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

/* ==========================================================================
   ESTILOS DO POPUP
   ========================================================================== */

#popupNovaRubrica .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}
#popupNovaRubrica .form-row .form-group {
    flex: 1;
    margin-bottom: 0;
    min-width: 200px;
}
#popupNovaRubrica .form-group {
    margin-bottom: 12px;
}
#popupNovaRubrica .form-group-label {
    display: block;
    font-size: 0.9rem;
    color: var(--cor-principal);
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: 600;
}

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

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

/* 1. BARRA AZUL SÓLIDA */
#tabela-rubricas 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-rubricas 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-rubricas th[data-column] { cursor: pointer; }

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

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

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

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

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

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

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

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

/* Ícones de Ação na Tabela */
#tabela-rubricas .btn-reativar { background-color: var(--cor-sucesso) !important; color: white; }
#tabela-rubricas .btn-reativar:hover { background-color: var(--cor-sucesso-hover) !important; }