/* Arquivo: public/assets/css/lotacoes.css (VERSÃO FINAL - DESIGN UNIFICADO) */

/* ==================================================================
   ESTILOS DO POPUP (LAYOUT FLEX)
   ================================================================== */

#popupNovaLotacao .form-row {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px;
    width: 100%;
    margin-bottom: 12px; 
}

#popupNovaLotacao .form-row .form-group {
    flex: 1; 
    margin-bottom: 0; 
    min-width: 200px; 
}

#popupNovaLotacao .form-group {
    margin-bottom: 12px; 
}

/* Botões do popup */
#popupNovaLotacao .form-buttons #btn-cancelar-lotacao {
    background-color: var(--cor-erro);
}
#popupNovaLotacao .form-buttons #btn-cancelar-lotacao:hover {
    background-color: var(--cor-erro-hover);
}
#popupNovaLotacao .form-buttons #btn-confirmar-lotacao {
    background-color: var(--cor-sucesso);
}
#popupNovaLotacao .form-buttons #btn-confirmar-lotacao:hover {
    background-color: var(--cor-sucesso-hover);
}

/* ==========================================================================
   ESTILOS DE ORDENAÇÃO DA TABELA (Padrão Azul #1a237e)
   ========================================================================== */

#tabela-lotacoes {
    width: 100%;
    border-collapse: collapse;
}

/* 1. BARRA AZUL SÓLIDA */
#tabela-lotacoes thead tr {
    background-color: #1a237e !important; 
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 2. CÉLULA PADRÃO (Sem Mouse) */
#tabela-lotacoes th {
    background-color: #1a237e; 
    color: #ffffff;            
    user-select: none;
    position: relative;
    padding: 12px 10px;
    cursor: default; 
    border: none;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
    text-align: left;
}

/* 3. Colunas ordenáveis */
#tabela-lotacoes th[data-column] { cursor: pointer; }

/* 4. EFEITO HOVER (Com Mouse) - INVERTIDO */
#tabela-lotacoes th[data-column]:hover {
    background-color: #ffffff !important; 
    color: #1a237e !important;            
    border-radius: 4px 4px 0 0;
}

/* 5. COLUNA ATIVA (Já Ordenada) */
#tabela-lotacoes th.sort-asc,
#tabela-lotacoes th.sort-desc {
    background-color: #1a237e; 
    color: #ffffff;
    font-weight: 800;
    border-bottom: 3px solid #ffffff; 
}

/* Hover na ativa */
#tabela-lotacoes th.sort-asc:hover,
#tabela-lotacoes th.sort-desc:hover {
    background-color: #ffffff !important;
    color: #1a237e !important;
    border-bottom: 3px solid #1a237e;
}

/* 6. ÍCONES (Setinhas) */
#tabela-lotacoes th i {
    font-size: 14px;
    margin-left: 6px;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.5); 
    transition: all 0.1s;
}

#tabela-lotacoes th[data-column]:hover i {
    opacity: 1;
    color: #1a237e !important; 
}

#tabela-lotacoes th.sort-asc i,
#tabela-lotacoes th.sort-desc i {
    color: #ffffff;
    opacity: 1;
}
#tabela-lotacoes th.sort-asc:hover i,
#tabela-lotacoes th.sort-desc:hover i {
    color: #1a237e !important;
}

/* Outros estilos de tabela */
#tabela-lotacoes td {
    padding: 10px;
    border-bottom: 1px solid var(--cor-borda);
}
#tabela-lotacoes .coluna-centralizada { text-align: center; }

#tabela-lotacoes .btn-reativar {
    background-color: var(--cor-sucesso) !important;
    color: white;
}
#tabela-lotacoes .btn-reativar:hover {
    background-color: var(--cor-sucesso-hover) !important;
}