/**
 * SioreX - Estilos da Pagina EAP
 * Baseado no padrao de Clientes/Projetos
 */

/* ============================================================
   PAGINA EAP - Layout Flexbox
   ============================================================ */

/* Quando o content-body contem a pagina EAP, desabilita seu scroll */
.content-body:has(.eap-page) {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

/* Fallback via JS - classe adicionada pelo eap.js */
.content-body.eap-active {
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

.eap-page {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Toolbar nao encolhe */
.eap-page .toolbar-metallic {
    flex-shrink: 0;
}

/* ============================================================
   CONTAINER DA TABELA EAP
   ============================================================ */
.eap-table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: var(--radius-md);
    /* Scrollbar fina - Firefox */
    scrollbar-width: thin;
    scrollbar-color: #3A3632 transparent;
}

/* Scrollbar fina - Chrome/Safari/Edge */
.eap-table-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.eap-table-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 6px;
}

.eap-table-container::-webkit-scrollbar-thumb {
    background: #3A3632;
    border-radius: 6px;
}

.eap-table-container::-webkit-scrollbar-thumb:hover {
    background: #4A4640;
}

.eap-table-container::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================================
   TABELA EAP - Estilo Metalico Industrial
   ============================================================ */
#eap-table {
    width: 100%;
    min-width: 1200px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    /* Borda fina com efeito 3D */
    border: 1px solid #888;
    border-top-color: #AAA;
    border-left-color: #999;
    border-bottom-color: #555;
    border-right-color: #666;
    /* Efeito 3D com sombra profunda */
    box-shadow:
        4px 4px 10px rgba(0, 0, 0, 0.4),
        8px 8px 20px rgba(0, 0, 0, 0.25),
        12px 12px 30px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   LARGURAS DAS COLUNAS
   ============================================================ */
/* 1. Expansor */
#eap-table th:nth-child(1),
#eap-table td:nth-child(1) {
    width: 45px;
    min-width: 45px;
}

/* 2. Item Cliente */
#eap-table th:nth-child(2),
#eap-table td:nth-child(2) {
    width: 120px;
    min-width: 120px;
}

/* 3. Codigo */
#eap-table th:nth-child(3),
#eap-table td:nth-child(3) {
    width: 80px;
    min-width: 80px;
}

/* 4. Itemizacao */
#eap-table th:nth-child(4),
#eap-table td:nth-child(4) {
    width: 90px;
    min-width: 90px;
}

/* 5. Natureza */
#eap-table th:nth-child(5),
#eap-table td:nth-child(5) {
    width: 80px;
    min-width: 80px;
}

/* 6. Tipo */
#eap-table th:nth-child(6),
#eap-table td:nth-child(6) {
    width: 90px;
    min-width: 90px;
}

/* 7. Descricao - flexivel */
#eap-table th:nth-child(7),
#eap-table td:nth-child(7) {
    min-width: 250px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 8. UN (Unidade) */
#eap-table th:nth-child(8),
#eap-table td:nth-child(8) {
    width: 50px;
    min-width: 50px;
    text-align: center;
}

/* 9. QTD (Quantidade) */
#eap-table th:nth-child(9),
#eap-table td:nth-child(9) {
    width: 70px;
    min-width: 70px;
    text-align: right;
}

/* 10. Prod.Val */
#eap-table th:nth-child(10),
#eap-table td:nth-child(10) {
    width: 80px;
    min-width: 80px;
    text-align: right;
}

/* 11. Prod.UN */
#eap-table th:nth-child(11),
#eap-table td:nth-child(11) {
    width: 70px;
    min-width: 70px;
    text-align: center;
}

/* 12. Valor Unit. */
#eap-table th:nth-child(12),
#eap-table td:nth-child(12) {
    width: 100px;
    min-width: 100px;
    text-align: right;
}

/* 13. Total */
#eap-table th:nth-child(13),
#eap-table td:nth-child(13) {
    width: 110px;
    min-width: 110px;
    text-align: right;
}

/* 14. Status */
#eap-table th:nth-child(14),
#eap-table td:nth-child(14) {
    width: 90px;
    min-width: 90px;
    text-align: center;
}

/* Reset Bootstrap */
#eap-table.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
}

/* Header da Tabela - Metal escuro polido */
#eap-table th {
    background:
        var(--texture-noise-heavy),
        var(--texture-brushed),
        linear-gradient(180deg,
            #5E5A54 0%,
            #4A4640 5%,
            #3A3632 20%,
            #2A2724 50%,
            #1E1C1A 80%,
            #141210 100%
        );
    /* Texto metalico prateado brilhante */
    color: #e0e0e0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    letter-spacing: 0.5px;
    border-bottom: 2px solid #0E0C0A;
    border-right: 1px solid #1E1C1A;
    padding: 12px 8px;
    /* Texto gravado estilo metal */
    text-shadow:
        0 -1px 1px rgba(0,0,0,0.8),
        0 1px 0 rgba(255,255,255,0.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.4);
    /* Header fixo ao rolar */
    position: sticky;
    top: 0;
    z-index: 10;
}

#eap-table th:last-child {
    border-right: none;
}

/* Celulas da Tabela - Cinza bem claro */
#eap-table td {
    background: #F5F5F5;
    color: #333;
    padding: 6px 8px;
    vertical-align: middle;
    border-bottom: 1px solid #E0E0E0;
    border-right: 1px solid #E0E0E0;
}

#eap-table td:last-child {
    border-right: none;
}

/* ============================================================
   LINHAS DA TABELA
   ============================================================ */
#eap-table .eap-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Atividades (nao-titulos) - Cinza claro padrao */
#eap-table .eap-row:not(.eap-titulo) td {
    background: #F5F5F5;
    color: #333;
}

/* Hover nas atividades - tom acobreado solido */
#eap-table .eap-row:not(.eap-titulo):hover td {
    background: #E8DCD4 !important;
    box-shadow: inset 0 1px 0 0 #C49A7A, inset 0 -1px 0 0 #C49A7A;
}

#eap-table .eap-row:not(.eap-titulo):hover td:first-child {
    box-shadow: inset 1px 0 0 0 #C49A7A, inset 0 1px 0 0 #C49A7A, inset 0 -1px 0 0 #C49A7A;
}

#eap-table .eap-row:not(.eap-titulo):hover td:last-child {
    box-shadow: inset -1px 0 0 0 #C49A7A, inset 0 1px 0 0 #C49A7A, inset 0 -1px 0 0 #C49A7A;
}

/* Atividade selecionada - contorno fino com fundo */
#eap-table .eap-row:not(.eap-titulo).selected td {
    background: #D8D8D8 !important;
    box-shadow:
        inset 0 1px 0 0 var(--copper-600),
        inset 0 -1px 0 0 var(--copper-600);
}

#eap-table .eap-row:not(.eap-titulo).selected td:first-child {
    box-shadow:
        inset 1px 0 0 0 var(--copper-600),
        inset 0 1px 0 0 var(--copper-600),
        inset 0 -1px 0 0 var(--copper-600);
}

#eap-table .eap-row:not(.eap-titulo).selected td:last-child {
    box-shadow:
        inset -1px 0 0 0 var(--copper-600),
        inset 0 1px 0 0 var(--copper-600),
        inset 0 -1px 0 0 var(--copper-600);
}

/* ============================================================
   TITULOS POR NIVEL - Paleta com Contraste Definido
   ============================================================ */

/* Estilo base para todos os titulos */
#eap-table .eap-titulo td {
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.3) !important;
    border-right: 1px solid rgba(0,0,0,0.15) !important;
    /* Brilho interno no topo - efeito metalico 3D */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    /* Transicao suave */
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

/* Borda colorida na primeira celula dos titulos - base */
#eap-table .eap-titulo td:first-child {
    border-left: 1px solid #D4A04D !important;
}

/* ===== NIVEIS - Barra simples (1, 3, 5, 7, 9, 11, 13 px) ===== */

/* Nivel 1 - Bronze Escuro (1px) */
#eap-table .eap-titulo.nivel-1 td {
    background:
        var(--texture-noise-heavy),
        linear-gradient(180deg, #6B5D52 0%, #5E5147 50%, #51453C 100%) !important;
    color: #F5F6F7 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    border-bottom-color: #51453C !important;
}
#eap-table .eap-titulo.nivel-1 td:first-child {
    border-left: 1px solid #D4A04D !important;
}

/* Nivel 2 - Bronze Medio-Escuro (3px) */
#eap-table .eap-titulo.nivel-2 td {
    background:
        var(--texture-noise-heavy),
        linear-gradient(180deg, #7A6B5E 0%, #6D5F54 50%, #60544A 100%) !important;
    color: #F5F6F7 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border-bottom-color: #60544A !important;
}
#eap-table .eap-titulo.nivel-2 td:first-child {
    border-left: 3px solid #C9A065 !important;
}

/* Nivel 3 - Bronze Medio (5px) */
#eap-table .eap-titulo.nivel-3 td {
    background:
        var(--texture-noise-heavy),
        linear-gradient(180deg, #8A7B6E 0%, #7D6F62 50%, #706356 100%) !important;
    color: #F5F6F7 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    border-bottom-color: #706356 !important;
}
#eap-table .eap-titulo.nivel-3 td:first-child {
    border-left: 5px solid #BE967D !important;
}

/* Nivel 4 - Bronze Claro (7px) */
#eap-table .eap-titulo.nivel-4 td {
    background:
        var(--texture-noise-heavy),
        linear-gradient(180deg, #9A8B7E 0%, #8D7F72 50%, #807366 100%) !important;
    color: #2C2824 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    border-bottom-color: #807366 !important;
}
#eap-table .eap-titulo.nivel-4 td:first-child {
    border-left: 7px solid #B38C95 !important;
}

/* Nivel 5 - Areia Bronze (9px) */
#eap-table .eap-titulo.nivel-5 td {
    background:
        var(--texture-noise-heavy),
        linear-gradient(180deg, #C4B8AC 0%, #B7AB9F 50%, #AA9E92 100%) !important;
    color: #2C2824 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
    border-bottom-color: #AA9E92 !important;
}
#eap-table .eap-titulo.nivel-5 td:first-child {
    border-left: 9px solid #A882AD !important;
}

/* Nivel 6 - Areia Clara (11px) */
#eap-table .eap-titulo.nivel-6 td {
    background:
        var(--texture-noise-heavy),
        linear-gradient(180deg, #D9CFC3 0%, #CCC2B6 50%, #BFB5A9 100%) !important;
    color: #2C2824 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border-bottom-color: #BFB5A9 !important;
}
#eap-table .eap-titulo.nivel-6 td:first-child {
    border-left: 11px solid #9D78C5 !important;
}

/* Nivel 7 - Quase Branco Bronze (13px) */
#eap-table .eap-titulo.nivel-7 td {
    background:
        var(--texture-noise-heavy),
        linear-gradient(180deg, #EDE5DB 0%, #E0D8CE 50%, #D3CBC1 100%) !important;
    color: #2C2824 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    border-bottom-color: #D3CBC1 !important;
}
#eap-table .eap-titulo.nivel-7 td:first-child {
    border-left: 13px solid #926EDD !important;
}

/* Hover nos titulos - brilho suave */
#eap-table tr.eap-row.eap-titulo:hover td {
    filter: brightness(1.1) saturate(1.1);
}

/* Titulo selecionado - contorno bronze sem preenchimento */
#eap-table tr.eap-row.eap-titulo.selected td {
    box-shadow:
        inset 0 2px 0 0 #C49A7A,
        inset 0 -2px 0 0 #C49A7A;
}

#eap-table tr.eap-row.eap-titulo.selected td:first-child {
    box-shadow:
        inset 2px 0 0 0 #C49A7A,
        inset 0 2px 0 0 #C49A7A,
        inset 0 -2px 0 0 #C49A7A;
}

#eap-table tr.eap-row.eap-titulo.selected td:last-child {
    box-shadow:
        inset -2px 0 0 0 #C49A7A,
        inset 0 2px 0 0 #C49A7A,
        inset 0 -2px 0 0 #C49A7A;
}

/* Ultima linha sem borda inferior e com cantos arredondados */
#eap-table tbody tr:last-child td {
    border-bottom: none;
}

#eap-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-md);
}

#eap-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-md);
}

/* ============================================================
   EXPANSOR (+/-) - Estilo metalico refinado
   ============================================================ */
.eap-expansor {
    cursor: pointer;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    text-align: center;
    white-space: nowrap;
    /* Fundo metalico com gradiente */
    background: linear-gradient(180deg,
        rgba(255,255,255,0.35) 0%,
        rgba(255,255,255,0.15) 50%,
        rgba(0,0,0,0.05) 100%
    );
    /* Borda com efeito 3D */
    border: 1px solid rgba(0,0,0,0.25);
    border-top-color: rgba(255,255,255,0.3);
    border-left-color: rgba(255,255,255,0.2);
    /* Sombra sutil */
    box-shadow:
        0 1px 2px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.3);
    color: inherit;
    transition: all 0.15s ease;
}

.eap-expansor:hover {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.5) 0%,
        rgba(255,255,255,0.25) 50%,
        rgba(0,0,0,0.02) 100%
    );
    box-shadow:
        0 2px 4px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.4);
    transform: scale(1.05);
}

.eap-expansor:active {
    transform: scale(0.95);
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.2);
}

/* ============================================================
   BADGES DE STATUS - Icone Parafuso
   ============================================================ */
.badge-screw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.badge-screw svg {
    width: 18px;
    height: 18px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}

/* Cores do parafuso por status */
.badge-screw.badge-pendente svg .screw-body {
    fill: #D4A04D;
}
.badge-screw.badge-pendente svg .screw-highlight {
    stop-color: #F5D89A;
}
.badge-screw.badge-pendente svg .screw-shadow {
    stop-color: #8B6914;
}

.badge-screw.badge-aprovado svg .screw-body {
    fill: #5C9A5C;
}
.badge-screw.badge-aprovado svg .screw-highlight {
    stop-color: #8BC88B;
}
.badge-screw.badge-aprovado svg .screw-shadow {
    stop-color: #2D5A2D;
}

.badge-screw.badge-revisao svg .screw-body {
    fill: #5A8AB8;
}
.badge-screw.badge-revisao svg .screw-highlight {
    stop-color: #8AB8E8;
}
.badge-screw.badge-revisao svg .screw-shadow {
    stop-color: #2A5A88;
}

.badge-screw.badge-cancelado svg .screw-body {
    fill: #B85A5A;
}
.badge-screw.badge-cancelado svg .screw-highlight {
    stop-color: #E88A8A;
}
.badge-screw.badge-cancelado svg .screw-shadow {
    stop-color: #782A2A;
}

/* ============================================================
   RODAPE - Estilo metalico refinado
   ============================================================ */
.eap-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    margin-top: 15px;
    background:
        var(--texture-noise-heavy),
        linear-gradient(180deg, #F5F5F5 0%, #E8E8E8 50%, #E0E0E0 100%);
    border-radius: var(--radius-md);
    border: 1px solid #C0C0C0;
    border-top-color: #D8D8D8;
    border-bottom-color: #A8A8A8;
    font-size: 0.95rem;
    color: #505050;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

.eap-footer strong {
    color: #333;
}

.eap-footer #eap-count {
    color: var(--copper-700);
    font-weight: 600;
}

.eap-footer #eap-total {
    color: var(--copper-600);
    font-weight: 600;
}

/* ============================================================
   ICONES DE STATUS
   ============================================================ */
.eap-status-icon {
    font-size: 16px;
}

.eap-status-pendente { color: #D4A520; }
.eap-status-aprovado { color: #28A745; }
.eap-status-revisao { color: #6080A0; }
.eap-status-cancelado { color: #DC3545; }

/* ============================================================
   ESTADO VAZIO
   ============================================================ */
.eap-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #888;
}

.eap-empty-state i {
    font-size: 64px;
    color: var(--copper-400);
    margin-bottom: 16px;
}

.eap-empty-state h5 {
    color: #555;
    margin-bottom: 8px;
}

/* ============================================================
   ANIMACOES
   ============================================================ */
@keyframes rowHighlight {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
    100% { filter: brightness(1); }
}

.eap-row.just-moved td {
    animation: rowHighlight 0.6s ease;
}

/* ============================================================
   VIRTUAL SCROLLING - Suporte para grandes quantidades de itens
   ============================================================ */

/* Wrapper do virtual scroll */
.eap-virtual-scroll-wrapper {
    /* Herdar scrollbar fina do container pai */
    scrollbar-width: thin;
    scrollbar-color: #3A3632 transparent;
}

.eap-virtual-scroll-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.eap-virtual-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.eap-virtual-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #3A3632;
    border-radius: 6px;
}

.eap-virtual-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #4A4640;
}

/* Espaçadores invisíveis para manter altura correta */
.eap-spacer-top,
.eap-spacer-bottom {
    pointer-events: none;
}

.eap-spacer-top td,
.eap-spacer-bottom td {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Garantir altura fixa das linhas para calculo correto */
#eap-table .eap-row td {
    height: 32px;
    max-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Performance: usar will-change apenas quando scrollando */
.eap-virtual-scroll-wrapper.scrolling #eap-tbody {
    will-change: contents;
}

/* Quando virtual scroll está ativo, remover animações pesadas */
.eap-virtual-scroll-wrapper .eap-row {
    transition: none;
}

.eap-virtual-scroll-wrapper .eap-row:hover td {
    transition: background-color 0.1s ease;
}

/* ==================== MODAL MOVER - BOTOES DE POSICAO ==================== */

#mover-posicao-container .btn {
    padding: 10px 16px;
    font-weight: 500;
    border-width: 2px;
}

#mover-posicao-container .btn.active {
    background-color: var(--copper-500);
    border-color: var(--copper-500);
    color: white;
}

#mover-posicao-container .btn:not(.active):hover {
    background-color: var(--hover-bg);
    border-color: var(--copper-400);
}

#mover-preview {
    background-color: rgba(58, 96, 128, 0.15);
    border-color: var(--info);
    color: var(--inox-200);
}

#mover-preview .bi {
    color: var(--info);
}

/* ==================== MODO REORDENACAO ==================== */

/* Botao Acoes no modo reordenacao */
#btn-acoes.modo-reordenacao,
.btn-acoes.modo-reordenacao {
    background-color: var(--warning) !important;
    color: white !important;
    animation: pulse-reordenacao 1.5s ease-in-out infinite;
}

#btn-acoes.modo-reordenacao:hover,
.btn-acoes.modo-reordenacao:hover {
    background-color: #D97700 !important;
}

@keyframes pulse-reordenacao {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(192, 106, 60, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(192, 106, 60, 0);
    }
}

/* Linha sendo reordenada */
.eap-row.reordenando {
    background-color: rgba(192, 106, 60, 0.15) !important;
    border-left: 3px solid var(--warning) !important;
}

.eap-row.reordenando td:first-child {
    padding-left: 5px;
}

/* Setinhas de reordenacao */
.setas-reordenacao {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 8px;
    padding: 2px 4px;
    background-color: var(--warning);
    border-radius: 4px;
    color: white;
    font-size: 10px;
    line-height: 1;
    gap: 1px;
}

.setas-reordenacao i {
    display: block;
    cursor: pointer;
    padding: 2px;
    border-radius: 2px;
    transition: background-color 0.15s, transform 0.1s;
}

.setas-reordenacao i:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.3);
}

.setas-reordenacao i:active {
    transform: scale(0.9);
}

/* Setinhas de movimentacao (sempre visiveis para atividades selecionadas) */
/* Posicionadas na coluna de descrição, à esquerda do texto */
.setas-mover {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 6px;
    padding: 2px;
    color: var(--copper-400);
    font-size: 11px;
    line-height: 1;
    gap: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
    vertical-align: middle;
}

.eap-row.selected .setas-mover {
    opacity: 1;
}

.setas-mover i {
    display: block;
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 2px;
    transition: color 0.15s, transform 0.1s, background-color 0.15s;
}

.setas-mover i:hover {
    color: var(--copper-300);
    background-color: rgba(192, 106, 60, 0.2);
    transform: scale(1.3);
}

.setas-mover i:active {
    transform: scale(0.9);
}

/* No modo reordenacao, destacar mais as setinhas */
.eap-row.reordenando .setas-mover {
    color: var(--warning);
    opacity: 1;
}

.eap-row.reordenando .setas-mover i:hover {
    color: white;
    background-color: var(--warning);
}

/* ============================================
   ARVORE DO MODAL MOVER
   ============================================ */

.mover-tree-container {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #ffffff;
    padding: 8px;
    /* Scrollbar fina - Firefox */
    scrollbar-width: thin;
    scrollbar-color: #b0b0b0 transparent;
}

/* Scrollbar fina - Chrome/Safari/Edge */
.mover-tree-container::-webkit-scrollbar {
    width: 6px;
}

.mover-tree-container::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 6px;
}

.mover-tree-container::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 6px;
}

.mover-tree-container::-webkit-scrollbar-thumb:hover {
    background: #909090;
}

.mover-tree-item {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    margin: 1px 0;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    background: linear-gradient(180deg, #f0f0f0 0%, #d8d8d8 50%, #c0c0c0 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
    color: #1a1a1a;
    font-size: 0.85rem;
    border: 1px solid #b0b0b0;
}

.mover-tree-item:hover {
    filter: brightness(1.1) saturate(1.1);
}

.mover-tree-item.selected {
    box-shadow: inset 0 2px 0 0 #C49A7A, inset 0 -2px 0 0 #C49A7A, inset 2px 0 0 0 #C49A7A, inset -2px 0 0 0 #C49A7A;
    font-weight: 500;
}

.mover-tree-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.mover-tree-item .tree-toggle {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.15s;
    color: #555;
    font-size: 0.75rem;
}

.mover-tree-item .tree-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #000;
}

.mover-tree-item .tree-toggle.empty {
    visibility: hidden;
}

.mover-tree-item .tree-icon {
    margin-right: 8px;
    color: #c9a227;
}

.mover-tree-item.selected .tree-icon {
    color: #c9a227;
}

/* Raiz do Projeto */
.mover-tree-raiz {
    background: linear-gradient(180deg, #e0e0e0 0%, #c8c8c8 50%, #b0b0b0 100%);
    border: 1px dashed #999;
    margin-bottom: 4px;
    color: #1a1a1a;
    padding: 4px 10px;
}

.mover-tree-raiz:hover {
    filter: brightness(1.1) saturate(1.1);
}

.mover-tree-raiz.selected {
    box-shadow: inset 0 2px 0 0 #C49A7A, inset 0 -2px 0 0 #C49A7A, inset 2px 0 0 0 #C49A7A, inset -2px 0 0 0 #C49A7A;
    font-weight: 500;
}

.mover-tree-raiz .bi-house-door {
    color: #666;
}

/* Container de filhos */
.mover-tree-children {
    margin-left: 16px;
    padding-left: 6px;
    border-left: 1px solid #d0d0d0;
}

/* Botões de expandir/colapsar */
.mover-tree-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.mover-tree-actions button {
    padding: 4px 10px;
    font-size: 0.8rem;
    border: 1px solid #b0b0b0;
    border-radius: 3px;
    background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%);
    color: #333;
    cursor: pointer;
    transition: all 0.15s;
}

.mover-tree-actions button:hover {
    filter: brightness(1.05);
}

.mover-tree-actions button i {
    margin-right: 4px;
}

/* ============================================================
   SELECAO MULTIPLA (Ctrl+Click)
   ============================================================ */
.eap-row.multi-selected {
    background: rgba(140, 58, 48, 0.12) !important;
}

.eap-row.multi-selected:hover {
    background: rgba(140, 58, 48, 0.18) !important;
}

/* Marcador de exclusão (X vermelho) */
.delete-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delete-marker svg {
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
}