/* ==========================================================================
   THEME.CSS • Sistema de temas (Sistema / Claro / Escuro)
   --------------------------------------------------------------------------
   Carregado por ÚLTIMO. Centraliza as cores em custom properties.
   - :root                => tema ESCURO (padrão, idêntico ao legado 2025)
   - :root[data-theme=…]  => sobrescreve por tema
   As cores institucionais (azul=Líder, laranja=Auto, verde/roxo) são IGUAIS
   nos dois temas para não regredir o gráfico protegido de 2025.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* --- Tokens legados (2025/compartilhado) — valores ESCUROS originais --- */
    --bg: #0f1320;
    --panel: #161a2a;
    --accent: #2a3048;
    --stroke: #1f2438;
    --fg: #e9edf3;
    --muted: #9aa3b2;

    /* Cores institucionais (constantes nos dois temas) */
    --blue: #4aa8ff;
    /* Líder */
    --orange: #ffb64a;
    /* Auto  */
    --purple: #9d7dff;
    --green: #37c977;
    --red: #ff7d8b;

    /* --- Identidade institucional Anglo Morumbi (MARCA/chrome) ---
       Cores da paleta oficial. NÃO são cores de dado do gráfico — os pontos
       Líder/Auto seguem --blue/--orange. Usadas só em detalhes de UI. */
    --brand: #005490;
    /* cor principal */
    --brand-detail: #32a2db;
    /* cor para detalhes */
    --brand-footer: #7c7974;
    /* cor rodapé (referência) */
    --brand-ink: #32a2db;
    /* realce legível sobre superfície escura */

    --grid: #23304f;
    --guide: #2b395f;

    /* --- Tokens semânticos (novos, usados por 2026 e chrome compartilhado) --- */
    --surface: #161a2a;
    --surface-2: #1b2233;
    --surface-3: #222a3d;
    --surface-raised: #232c40;
    --border: rgba(150, 168, 205, .14);
    --hairline: rgba(150, 168, 205, .09);
    --fg-strong: #f3f6ff;
    --fg-soft: #c8d1e2;

    /* superfícies translúcidas de realce (adaptam por tema) */
    --overlay-1: rgba(255, 255, 255, .05);
    --overlay-2: rgba(255, 255, 255, .08);
    --inset-1: rgba(255, 255, 255, .03);

    /* Tintas de acento (baixa opacidade) — legíveis nos dois temas */
    --tint-blue: rgba(74, 168, 255, .13);
    --tint-blue-strong: rgba(74, 168, 255, .22);
    --tint-orange: rgba(255, 183, 77, .13);
    --tint-green: rgba(55, 201, 119, .14);
    --tint-red: rgba(255, 125, 139, .14);

    /* Tintas “tinta” para TEXTO sobre superfície (contraste garantido) */
    --ink-blue: #7cc0ff;
    --ink-orange: #ffce85;
    --ink-green: #7ee0ab;
    --ink-red: #ff9aa5;

    /* Sombras */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, .18);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, .22);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .38);

    /* Topbar */
    --topbar-bg: rgba(15, 19, 32, .88);
    --topbar-border: var(--stroke);

    /* Vermelho institucional controlado (Sair) */
    --danger-ink: #ffb0b0;
    --danger-soft: rgba(255, 107, 107, .12);
    --danger-soft-hover: rgba(255, 107, 107, .2);
    --danger-border: rgba(255, 107, 107, .38);

    /* Foco acessível — matiz institucional (detalhe da marca), claro sobre o escuro */
    --focus-ring: color-mix(in oklab, var(--brand-detail) 72%, white 0%);

    /* --- Tokens do gráfico (lidos pelo JS de 2026) --- */
    --chart-box-bg-a: #151c2b;
    --chart-box-bg-b: #111725;
    --chart-grid: rgba(77, 93, 133, .25);
    --chart-axis: rgba(122, 140, 181, .36);
    --chart-tick: #9fb0cd;
    --chart-label: #e7edf9;
    --chart-label-shadow: rgba(5, 8, 18, .88);
    --chart-guide: rgba(122, 140, 181, .72);
    --chart-point-border: #1f2438;
    --chart-point-hover: #f3f7ff;
    --chart-tooltip-bg: rgba(15, 20, 36, .96);
    --chart-tooltip-title: #f1f5ff;
    --chart-tooltip-body: #d3dced;
    --chart-zone-1: rgba(255, 182, 74, .20);
    --chart-zone-2: rgba(157, 125, 255, .17);
    --chart-zone-3: rgba(74, 168, 255, .15);
    --chart-zone-4: rgba(55, 201, 119, .13);
    --chart-zone-label: #aeb9cf;

    /* Metadados */
    --radius: 12px;
    --radius-lg: 16px;
    --ease: cubic-bezier(.2, .6, .2, 1);
    --topbar-h: 72px;
    --panel-offset: 0px;
    --sbw: 0px;
}

/* Reafirma o escuro quando escolhido explicitamente */
:root[data-theme="dark"] {
    color-scheme: dark;
}

/* ==========================================================================
   TEMA CLARO
   ========================================================================== */
:root[data-theme="light"] {
    color-scheme: light;

    --bg: #e3e8f1;
    --panel: #ffffff;
    --accent: #dce4f1;
    --stroke: #ccd5e5;
    --fg: #232d3c;
    --muted: #566072;

    /* Institucionais mantidas (mesma matiz do gráfico 2025) */
    --blue: #2f80ed;
    --orange: #e08600;
    --purple: #7b5bd6;
    --green: #1f9d57;
    --red: #d64550;

    /* Identidade institucional Anglo Morumbi (MARCA/chrome) — mesmas cores da
       paleta oficial; no claro o principal serve de realce e o detalhe de foco. */
    --brand: #005490;
    --brand-detail: #32a2db;
    --brand-footer: #7c7974;
    --brand-ink: #005490;

    --grid: #c9d3e4;
    --guide: #b6c2da;

    --surface: #ffffff;
    --surface-2: #eef2f9;
    --surface-3: #e5ebf5;
    --surface-raised: #ffffff;
    --border: #ccd5e5;
    --hairline: #dde4ef;
    --fg-strong: #101828;
    --fg-soft: #3d4757;

    --overlay-1: rgba(15, 27, 54, .035);
    --overlay-2: rgba(15, 27, 54, .06);
    --inset-1: rgba(15, 27, 54, .025);

    --tint-blue: rgba(47, 128, 237, .10);
    --tint-blue-strong: rgba(47, 128, 237, .16);
    --tint-orange: rgba(224, 134, 0, .12);
    --tint-green: rgba(31, 157, 87, .12);
    --tint-red: rgba(214, 69, 80, .11);

    --ink-blue: #1f66d0;
    --ink-orange: #b56b00;
    --ink-green: #12864a;
    --ink-red: #c23744;

    --shadow-sm: 0 1px 2px rgba(24, 39, 75, .06), 0 4px 12px rgba(24, 39, 75, .09);
    --shadow-md: 0 8px 22px rgba(24, 39, 75, .12), 0 2px 8px rgba(24, 39, 75, .07);
    --shadow-lg: 0 24px 60px rgba(24, 39, 75, .20);

    --topbar-bg: rgba(255, 255, 255, .92);
    --topbar-border: #e2e7f0;

    --danger-ink: #c0392b;
    --danger-soft: rgba(214, 69, 80, .09);
    --danger-soft-hover: rgba(214, 69, 80, .16);
    --danger-border: rgba(214, 69, 80, .32);

    --focus-ring: color-mix(in oklab, var(--brand) 68%, #101828 0%);

    /* Gráfico — variação clara legível (2026). O 2025 mantém caixa escura. */
    --chart-box-bg-a: #ffffff;
    --chart-box-bg-b: #f5f7fb;
    --chart-grid: rgba(64, 84, 122, .22);
    --chart-axis: rgba(64, 84, 122, .45);
    --chart-tick: #4f5a6c;
    --chart-label: #1b2635;
    --chart-label-shadow: rgba(255, 255, 255, .92);
    --chart-guide: rgba(64, 84, 122, .62);
    --chart-point-border: #ffffff;
    --chart-point-hover: #101828;
    --chart-tooltip-bg: rgba(20, 30, 50, .96);
    --chart-tooltip-title: #f1f5ff;
    --chart-tooltip-body: #d3dced;
    --chart-zone-1: rgba(224, 134, 0, .24);
    --chart-zone-2: rgba(123, 91, 214, .21);
    --chart-zone-3: rgba(47, 128, 237, .18);
    --chart-zone-4: rgba(31, 157, 87, .17);
    --chart-zone-label: #6b7688;
}

/* ==========================================================================
   Superfície base do app (aplica o tema ao body — vale p/ 2025 e 2026)
   ========================================================================== */
html,
body {
    background: var(--bg);
    color: var(--fg);
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ==========================================================================
   Chrome compartilhado adaptável ao tema (topbar/foot).
   Escopo neutro — vale para os dois ciclos.
   ========================================================================== */
.topbar {
    background: var(--topbar-bg);
    border-bottom-color: var(--topbar-border);
    /* Fina assinatura institucional sob a topbar (não altera a altura). */
    box-shadow: inset 0 -2px 0 0 color-mix(in oklab, var(--brand-detail) 42%, transparent);
}

/* Hover dos cards de setor com leve borda institucional (sutil, os dois temas). */
.sector-card:hover {
    border-color: color-mix(in oklab, var(--brand-detail) 45%, var(--border));
}

.foot {
    color: var(--muted);
    border-top-color: var(--stroke);
}

.foot code {
    color: var(--fg-soft);
}

/* ==========================================================================
   TEMA CLARO • ajustes do chrome legado 2025 (mantém legibilidade)
   Escopado para não afetar o modo escuro nem o 2026.
   ========================================================================== */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .card {
    background: var(--surface);
    border-color: var(--stroke);
    box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .glass {
    background: var(--surface);
    border-color: var(--stroke);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .kpi-block {
    background: var(--surface);
    border-color: var(--stroke);
    box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .kpi-head,
:root[data-theme="light"] .card .kpi-head,
:root[data-theme="light"] #chart-legend h3 {
    color: var(--fg-strong);
}

:root[data-theme="light"] .kpi-grid .k,
:root[data-theme="light"] .sector-kpis .k,
:root[data-theme="light"] .sector-kpis-2 .k,
:root[data-theme="light"] .stat-number {
    background: var(--surface-2);
    border-color: var(--stroke);
}

:root[data-theme="light"] thead th {
    background: var(--accent);
    color: var(--fg-strong);
}

:root[data-theme="light"] .sector-card {
    background: var(--surface);
    border-color: var(--stroke);
    box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .sector-card:hover {
    background: var(--surface-2);
}

:root[data-theme="light"] #tbl tbody tr[data-key]:hover {
    background: var(--tint-blue);
}

/* Seletor de ano legível no claro (o container .cycle-picker já provê o fundo
   branco; o select interno fica transparente para formar um único controle). */
:root[data-theme="light"] .cycle-picker select {
    background: transparent;
    color: var(--fg-strong);
}

/* 2025 no claro: mantém a CAIXA do gráfico escura (o canvas é desenhado
   com cores escuras pelo main.js protegido). Evita texto invisível. */
:root[data-theme="light"][data-avd-year="2025"] #chart-box {
    background: #111725;
    border-color: #222a3d;
}

/* 2025 no claro: comparador legado legível (superfícies eram escuras) */
:root[data-theme="light"][data-avd-year="2025"] .cmp-header,
:root[data-theme="light"][data-avd-year="2025"] .cmp-details,
:root[data-theme="light"][data-avd-year="2025"] .cmp-details > summary,
:root[data-theme="light"][data-avd-year="2025"] .cmp-item {
    background: var(--surface-2);
    border-color: var(--stroke);
    color: var(--fg);
}

:root[data-theme="light"][data-avd-year="2025"] .cmp-header strong,
:root[data-theme="light"][data-avd-year="2025"] .cmp-details > summary,
:root[data-theme="light"][data-avd-year="2025"] .cmp-item .q {
    color: var(--fg-strong);
}

:root[data-theme="light"][data-avd-year="2025"] .cmp-comment {
    background: var(--surface);
    border-color: var(--stroke);
    color: var(--fg);
}

/* ==========================================================================
   CONTROLE DE TEMA (botão cíclico Sistema→Claro→Escuro)
   Compartilhado entre dashboard e login. Adaptável ao tema.
   ========================================================================== */
.theme-control {
    display: inline-flex;
    align-items: center;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    min-width: 36px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--overlay-1);
    color: var(--fg);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}

.theme-toggle:hover {
    background: var(--overlay-2);
    border-color: color-mix(in oklab, var(--blue) 40%, var(--border));
}

.theme-toggle:active {
    transform: translateY(1px);
}

.theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 15px;
    line-height: 1;
}

.theme-toggle__label {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .theme-toggle {
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .theme-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}

/* ==========================================================================
   PÁGINA DE LOGIN • temas
   O login.css usa --accent como azul e --panel como superfície do cartão.
   Escopamos os tokens ao .login-wrap para não conflitar com o dashboard.
   ========================================================================== */
.login-wrap {
    --accent: var(--blue);
    --accent-2: var(--green);
}

:root[data-theme="dark"] .login-wrap {
    --panel: rgba(16, 20, 36, .55);
    --stroke: rgba(255, 255, 255, .10);
}

:root[data-theme="light"] .login-wrap {
    --panel: #ffffff;
    --panel-solid: #ffffff;
    --stroke: #d9e0ec;
}

/* Foto institucional VISÍVEL, com um scrim azulado (não branco) que dá leitura
   e faz o cartão claro se destacar — elimina o aspecto "lavado/esbranquiçado". */
:root[data-theme="light"] .login-wrap::before {
    background:
        radial-gradient(120vmax 82vmax at 72% 12%, rgba(20, 34, 66, .18), transparent 60%),
        linear-gradient(180deg, rgba(18, 30, 57, .46) 0%, rgba(22, 36, 66, .34) 42%, rgba(14, 24, 48, .56) 100%);
}

:root[data-theme="light"] .blob {
    opacity: .16;
    mix-blend-mode: normal;
}

/* Cartão institucional: sólido, borda nítida e profundidade em camadas. */
:root[data-theme="light"] .login-card {
    background: #ffffff;
    border-color: rgba(24, 39, 75, .10);
    box-shadow:
        0 1px 2px rgba(16, 26, 48, .10),
        0 14px 34px rgba(16, 26, 48, .20),
        0 40px 80px rgba(10, 18, 38, .22);
}

/* Chips das marcas com leve profundidade sobre o cartão branco. */
:root[data-theme="light"] .brand-chip {
    background: linear-gradient(180deg, #ffffff, #eef3fb);
    border-color: rgba(24, 39, 75, .10);
    box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(16, 26, 48, .10);
}

/* Título com degradê branco → cor sólida legível no claro */
:root[data-theme="light"] .login-brand h1 {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--fg-strong);
}

:root[data-theme="light"] .login-brand .muted {
    color: var(--muted);
}

/* Separador "ou" visível sobre o cartão branco (era um degradê branco). */
:root[data-theme="light"] .gsep {
    color: var(--muted);
}

:root[data-theme="light"] .gsep::before,
:root[data-theme="light"] .gsep::after {
    background: linear-gradient(90deg, transparent, rgba(24, 39, 75, .16), transparent);
}

:root[data-theme="light"] #frmLogin input[type="email"],
:root[data-theme="light"] #frmLogin input[type="password"] {
    background: #f2f5fb;
    border-color: #d3dbe9;
    color: var(--fg-strong);
}

:root[data-theme="light"] #frmLogin input::placeholder {
    color: #8b95a6;
}

/* Controle de tema no canto do login */
.login-theme {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    z-index: 5;
}

.login-theme .theme-toggle {
    background: color-mix(in oklab, var(--surface) 80%, transparent);
    border-color: var(--border);
    color: var(--fg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-sm);
}

.login-theme .theme-toggle:hover {
    background: var(--surface);
}