/* ==========================================================================
   [R702] DENSIDADE — o app tem de caber na tela em 100%
   --------------------------------------------------------------------------
   Dono (12/08): *"ele tá ficando bom pra mim com o zoom ajustado em 75%. Tirando
   isso ele fica muito grande e ruim de mexer. O que dá pra ajeitar?"*

   Ele resolvia no navegador o que era problema do app: menu de 260px, item de
   menu com 14px de padding, título de 2,2rem e célula de tabela com 14–16px.
   Numa tela cheia de tabela — que é o dia dele — isso vira metade da informação
   por rolagem.

   Esta folha é a ÚLTIMA a carregar de propósito: boa parte do padding do app é
   estilo inline (271 ocorrências de 14/16px), e inline só perde para `!important`.

   Duas travas deliberadas:
   1. `@media (min-width: 1024px)` — o celular já tem a própria régua em
      mobile-responsive.css e não é onde o problema aparece. Nada aqui o alcança.
   2. `body.densidade-confortavel` desliga tudo. Quem preferir o tamanho antigo
      (ou precisar por acessibilidade) tem por onde voltar, e o vendável nasce
      com a saída pronta em vez de uma decisão minha embutida no CSS.

   Alvo: ~80% do tamanho anterior — o mesmo efeito do zoom 75% que ele já usava,
   só que sem encolher fonte de leitura a ponto de cansar a vista.
   ========================================================================== */

@media (min-width: 1024px) {

    /* ── MENU LATERAL ────────────────────────────────────────────────────── */
    /* --sidebar-w é a fonte única da largura: o realce de toast já se posiciona
       por `calc(var(--sidebar-w) + 20px)`, então mudar aqui move tudo junto. */
    body:not(.densidade-confortavel) {
        --sidebar-w: 218px;
    }

    body:not(.densidade-confortavel) .sidebar-header {
        padding: 16px 14px !important;
        gap: 10px !important;
    }

    body:not(.densidade-confortavel) .sidebar-logo {
        width: 36px !important;
    }

    body:not(.densidade-confortavel) .sidebar-header h1,
    body:not(.densidade-confortavel) .sidebar-header h2 {
        font-size: 0.95rem !important;
        line-height: 1.25 !important;
    }

    body:not(.densidade-confortavel) .nav-item {
        padding: 8px 16px !important;
        font-size: 0.86rem !important;
        gap: 9px !important;
    }

    /* ── ÁREA DE CONTEÚDO ────────────────────────────────────────────────── */
    body:not(.densidade-confortavel) .page {
        padding: 16px 20px !important;
    }

    body:not(.densidade-confortavel) .page > h2,
    body:not(.densidade-confortavel) .page h2[style*="font-size:2.2rem"],
    body:not(.densidade-confortavel) .page h2[style*="font-size: 2.2rem"] {
        font-size: 1.55rem !important;
        margin-bottom: 10px !important;
    }

    /* ── TABELAS ─────────────────────────────────────────────────────────── */
    /* Regra por ELEMENTO em vez de casar string de padding: pega td/th com
       estilo inline, com classe ou sem nada — e continua pegando as tabelas que
       ainda vão nascer. É o maior ganho de linhas visíveis por tela. */
    body:not(.densidade-confortavel) .page td,
    body:not(.densidade-confortavel) .page th {
        padding: 8px 12px !important;
    }

    body:not(.densidade-confortavel) .page table {
        font-size: 0.86rem !important;
    }

    /* O cabeçalho da tabela pode encolher mais — é rótulo, não leitura. */
    body:not(.densidade-confortavel) .page thead th {
        font-size: 0.72rem !important;
    }

    /* ── CARTÕES E BOTÕES ────────────────────────────────────────────────── */
    body:not(.densidade-confortavel) .kpi-card,
    body:not(.densidade-confortavel) .tile {
        padding: 14px !important;
    }

    body:not(.densidade-confortavel) .dashboard-tile-grid {
        gap: 12px !important;
    }
}

/* ==========================================================================
   [R1132 -> REVERTIDO no R1133] zoom global 0.8 no desktop QUEBROU o layout
   --------------------------------------------------------------------------
   Dono (02/09, print do dashboard): "abriu 80% mas ficou tudo errado". Causa:
   zoom de CSS reescala o px do layout, mas as medidas feitas em JS
   (window.innerWidth, getBoundingClientRect em posicionamento) e os vw/vh
   continuam na escala 1:1 — sidebar fixa e conteudo passam a discordar.
   LICAO: densidade aqui e por COMPONENTE (regras acima, R702), nunca zoom
   global. O ajuste fino de tamanho volta a ser o zoom do NAVEGADOR do dono.
   ========================================================================== */

/* ==========================================================================
   [R1137 · FASE 2] "zoom 80% ainda não ficou bom" (dono, 02/09)
   --------------------------------------------------------------------------
   Segunda passada da MESMA técnica do R702 (componente a componente, nunca
   zoom global — a lição está logo acima): título-herói, números de KPI e
   cartões eram os maiores no print. body.densidade-confortavel segue
   desligando tudo.
   ========================================================================== */
@media (min-width: 1024px) {
    body:not(.densidade-confortavel) .page h1 {
        font-size: 1.6rem !important;
        margin-bottom: 4px !important;
    }
    body:not(.densidade-confortavel) .page .kpi-value,
    body:not(.densidade-confortavel) .page .site-kpi-value {
        font-size: 1.5rem !important;
    }
    body:not(.densidade-confortavel) .kpi-card,
    body:not(.densidade-confortavel) .site-kpi-card {
        padding: 14px 16px !important;
    }
    body:not(.densidade-confortavel) .page .card {
        padding: 14px !important;
    }
}

/* ==========================================================================
   [R1144] ITEM ATIVO DO MENU LEGÍVEL — cravado na ÚLTIMA folha
   --------------------------------------------------------------------------
   Dono (02/09, print do "Calendário" invisível): a regra do premium-theme perdia
   para folhas carregadas depois. densidade.css é a última — o que está aqui VENCE.
   Fora de media query de propósito: ilegível é ilegível em qualquer tela.
   ========================================================================== */
.nav-item.active,
.nav-item.active span {
    /* [R1152] o injetor de branding não crava mais cor de texto — esta regra é a
       dona da legibilidade no escuro (ciano claro sobre sidebar escura, >=7:1). */
    color: #00e5ff !important;
}
body.tema-claro #sidebar .nav-item.active,
body.tema-claro #sidebar .nav-item.active span {
    color: #0369a1 !important;
}