/* ESTILOS PREMIUM PARA O MÓDULO DE ORDENAÇÃO (ESTILO COCKPIT CIENTÍFICO) */

/* Grade Customizada para exibir 2 Botões por linha no Painel Mestre */
.gpl-sort-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 5px 0;
}

@media (max-width: 480px) {
    .gpl-sort-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================= */
/* OVERRIDE BLINDADO: FORÇA O MODO CÁPSULA (FLEX ROW) DA REFERÊNCIA VISUAL  */
/* ========================================================================= */
.gpl-sort-grid .painel-mestre-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    background: #111827 !important; /* Fundo mais dark inativo */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
    min-height: 64px;
}

/* Desativa as bordas brilhantes globais antigas */
.gpl-sort-grid .painel-mestre-card .painel-mestre-card-borders {
    display: none !important;
}

/* O BLOCO DO ÍCONE */
.gpl-sort-grid .painel-mestre-card-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0f172a !important; 
    border: 1.5px solid rgba(var(--card-color-rgb), 0.3) !important; 
    border-color: var(--card-color) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.gpl-sort-grid .painel-mestre-card-icon i {
    font-size: 1.15rem !important;
    color: var(--card-color) !important;
    transition: all 0.3s ease !important;
}

/* O TEXTO */
.gpl-sort-grid .painel-mestre-card span {
    color: #94a3b8 !important; 
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    flex: 1; 
    word-break: break-word; 
}

/* ========================================================================= */
/* EFEITOS DE HOVER E ATIVAÇÃO (A MÁGICA DA IMAGEM DE REFERÊNCIA)           */
/* ========================================================================= */

/* Hover Inativo */
.gpl-sort-grid .painel-mestre-card:hover:not(.active-sort) {
    border-color: var(--card-color) !important; /* Cor dinâmica na borda */
    background: rgba(15, 23, 42, 0.8) !important; /* Mais escuro mas com leve transparência */
    transform: scale(1.02) !important; /* Leve zoom ao passar o mouse */
    box-shadow: 0 0 10px rgba(255,255,255,0.05) !important;
}
.gpl-sort-grid .painel-mestre-card:hover:not(.active-sort) span {
    color: #e2e8f0 !important;
}

/* ESTADO ATIVO - VISUAL CIENTÍFICO ABSOLUTO */
.gpl-sort-grid .painel-mestre-card.active-sort {
    border-color: var(--card-color) !important;
    background: rgba(15, 23, 42, 0.5) !important; 
    box-shadow: inset 0 0 0 1px var(--card-color), 0 0 20px rgba(0, 0, 0, 0.4) !important;
}

/* Efeito extra no Hover do botão JÁ ATIVO */
.gpl-sort-grid .painel-mestre-card.active-sort:hover {
    transform: scale(1.03) !important; /* Leve zoom */
    box-shadow: inset 0 0 0 2px var(--card-color), 0 0 25px var(--card-color) !important; /* Intensifica a luz */
}

/* Quadradinho do ícone acende */
.gpl-sort-grid .painel-mestre-card.active-sort .painel-mestre-card-icon {
    background: var(--card-color) !important;
    box-shadow: 0 0 15px var(--card-color) !important;
    border-color: var(--card-color) !important;
}

/* Ícone Preto no ativo */
.gpl-sort-grid .painel-mestre-card.active-sort .painel-mestre-card-icon i {
    color: #020617 !important; 
    text-shadow: none !important;
}

/* Texto Branco com brilho no ativo */
.gpl-sort-grid .painel-mestre-card.active-sort span {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* ============================================================== */
/* BOTÃO EXTERNO DO TOPO (Gatilho da Ordenação)                   */
/* ============================================================== */
#btn-gpl-ordenacao {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #111827; /* Fundo mais dark inativo padrão */
}

#btn-gpl-ordenacao:hover {
    box-shadow: 0 0 20px var(--btn-color) !important;
    border-color: var(--btn-color) !important; /* Borda dinâmica no hover */
    transform: scale(1.08) translateY(-2px); /* Leve zoom e sobe no hover */
    background: rgba(15, 23, 42, 0.9);
}

#btn-gpl-ordenacao:active {
    transform: scale(0.95); /* Efeito de clique */
    box-shadow: inset 0 0 10px var(--btn-color) !important;
}

#btn-gpl-ordenacao:hover i {
    filter: drop-shadow(0 0 8px var(--btn-color));
}