/* ═══════════════════════════════════════════════════════════════════════
   theme.css — fonte UNICA do modo escuro do NISMO WMS (quick 260901-arm)

   REGRA DE OURO deste arquivo:
     1. Este e o UNICO lugar do projeto onde o modo escuro vive. Nenhum
        outro arquivo de estilo do projeto (base.html <style>, expedicao.css,
        etiq/styles.css, blocos <style> de templates filhos) e editado para
        acomodar o tema — todos ficam byte a byte como estao hoje.
     2. TODO seletor de nivel superior deste arquivo carrega o prefixo
        `html[data-bs-theme="dark"]`. Especificidade 0,1,1 vence os
        seletores existentes (`:root` = 0,1,0, `.expedicao-page...` = 0,n,0,
        `.etiq :root` = 0,1,0) por especificidade, nunca por ordem de carga
        — um seletor sem o prefixo simplesmente nao aplica, sem erro e sem
        log (ver tools/check_theme_toggle.py, grupo `tokens`).
     3. As tres excecoes documentadas: (a) as regras de badge marcadas
        `!important` em base.html precisam repetir a marcacao, especificidade
        maior nao vence marcacao forcada; (b) o bloco de impressao vive
        AQUI e nao em base.html, porque check_help_mascote.py (gate D-08)
        afirma que base.html tem exatamente UMA at-rule de impressao,
        contendo somente seletores nismo-help-*; (c) a navbar (--c-nav) e
        `.navbar` ja sao escuras hoje e NUNCA invertem.
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   SECAO 0 — Botao de alternancia (#themeToggle, navbar de base.html).
   Chrome de <button> (border/background/cursor) e o estado CLARO dos dois
   icones (lua visivel, sol com display:none) vivem como `style=` inline
   na propria tag em base.html — nao em regra CSS aqui, porque toda regra
   deste arquivo carrega o prefixo de tema (regra de ouro do topo do
   arquivo) e o padrao claro nao e condicional a tema nenhum. So o estado
   ESCURO (inverter qual icone aparece) e condicional, e mora aqui.
   `!important` e obrigatorio nas duas regras: o icone do sol carrega
   `style="display:none"` inline em base.html, e estilo inline vence
   qualquer seletor externo sem `!important`, nao importa a especificidade
   do seletor. Sem a marcacao, o sol nunca aparecia no modo escuro — bug
   real encontrado em producao (o botao ficava sem nenhum icone visivel
   depois de alternar para escuro). */
html[data-bs-theme="dark"] #themeToggle .bi-sun-fill { display: inline-block !important; }
html[data-bs-theme="dark"] #themeToggle .bi-moon-stars-fill { display: none !important; }


/* ───────────────────────────────────────────────────────────────────────
   SECAO 1 — Tokens: redefinicao dos 25 tokens semanticos de base.html:16-40
   sob html[data-bs-theme="dark"]. Superficie e tinta invertidas; --c-nav e
   os tokens de raio (--r-*) ficam intocados (a navbar ja e escura, o raio
   nao depende de tema).
   ─────────────────────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Azul: usa o valor que o proprio design system ja reserva para fundo
       escuro (--c-blue-dark de base.html, #2997ff) — nunca um valor novo. */
    --c-blue:          #2997ff;
    --c-blue-focus:    #5cb2ff;
    /* --c-blue-dark: mesmo valor de hoje — ja e o azul reservado pelo
       design system para fundo escuro (usado pelos dropdowns da navbar),
       redeclarado aqui sem mudar o valor so para o gate `tokens` confirmar
       que nenhum token do :root foi esquecido em silencio (D-arm-12). */
    --c-blue-dark:     #2997ff;

    /* Tinta <-> superficie, invertidas. Canvas mais claro que parchment,
       para o cartao continuar se destacando do fundo (D-arm-12). */
    --c-ink:           #f2f2f4;
    --c-muted:         #a1a1a6;
    --c-muted-light:   #7d7d82;
    --c-hairline:      #3a3a3d;
    --c-divider:       #2c2c2e;
    --c-parchment:     #0b0b0d;
    --c-canvas:        #1c1c1e;
    --c-surface:       #232326;
    /* --c-nav intocado: a navbar ja e escura (#161617) e nao inverte. */

    /* Quatro pares de estado: fundo escuro dessaturado, tinta clara. */
    --c-success-bg:    #15321f; --c-success-fg: #6fcf8f;
    --c-danger-bg:     #3a1414; --c-danger-fg:  #f28b82;
    --c-warning-bg:    #3a2a0a; --c-warning-fg: #f2c94c;
    --c-info-bg:       #142a4a; --c-info-fg:    #7fb3f0;

    /* Sombras mais opacas — sombra suave desaparece sobre fundo escuro. */
    --shadow-card:     0 1px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.45);
    --shadow-hover:    0 2px 12px rgba(0,0,0,0.45), 0 20px 48px rgba(0,0,0,0.55);

    /* --r-sm/--r-md/--r-lg/--r-xl/--r-pill: intocados, tema nao muda raio. */
}


/* ───────────────────────────────────────────────────────────────────────
   SECAO 2 — As tres badges com !important (base.html ~linhas 393-395).
   Especificidade maior nao vence marcacao forcada: o override repete a
   mesma marcacao. Unicas regras do projeto nesta condicao (expedicao.css e
   etiq/styles.css tem zero !important, confirmado por varredura).
   ─────────────────────────────────────────────────────────────────────── */
html[data-bs-theme="dark"] .badge.bg-success { background: #15803d !important; }
html[data-bs-theme="dark"] .badge.bg-danger  { background: #b91c1c !important; }
html[data-bs-theme="dark"] .badge.bg-warning { background: #92400e !important; color: white !important; }


/* ───────────────────────────────────────────────────────────────────────
   SECAO 3 — Impressao: devolve os tokens de superficie/tinta aos valores
   claros originais quando o documento (com data-bs-theme="dark" ainda
   escrito no <html> pelo script anti-flash) e mandado para impressora ou
   pre-visualizacao. Sem isto, imprimir uma etiqueta ou a guia de expedicao
   com o modo escuro ligado sairia com tinta clara sobre papel branco.
   Este bloco tem de nascer AQUI: check_help_mascote.py (gate `print`)
   afirma que base.html tem exatamente uma at-rule @media print, com todos
   os seletores no namespace nismo-help-* — um segundo bloco em base.html
   quebraria a contagem, um seletor de tema dentro do bloco existente
   quebraria a contencao de namespace. O checker le so base.html, entao
   este bloco em theme.css nao o alcanca.
   ─────────────────────────────────────────────────────────────────────── */
@media print {
    html[data-bs-theme="dark"] {
        color-scheme: light;

        --c-blue:          #0066cc;
        --c-blue-focus:    #0071e3;
        --c-ink:           #1d1d1f;
        --c-muted:         #6e6e73;
        --c-muted-light:   #86868b;
        --c-hairline:      #d2d2d7;
        --c-divider:       #ebebed;
        --c-parchment:     #f5f5f7;
        --c-canvas:        #ffffff;
        --c-surface:       #fafafc;

        --c-success-bg:    #eaf7ef; --c-success-fg: #1a6635;
        --c-danger-bg:     #fde8e8; --c-danger-fg:  #9b1c1c;
        --c-warning-bg:    #fef3e2; --c-warning-fg: #7c4a00;
        --c-info-bg:       #e8f0fc; --c-info-fg:    #1d3f8a;

        --shadow-card:     0 1px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
        --shadow-hover:    0 2px 12px rgba(0,0,0,0.06), 0 20px 48px rgba(0,0,0,0.09);
    }

    html[data-bs-theme="dark"] .badge.bg-success { background: #16a34a !important; }
    html[data-bs-theme="dark"] .badge.bg-danger  { background: #dc2626 !important; }
    html[data-bs-theme="dark"] .badge.bg-warning { background: #d97706 !important; color: white !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   TASK 2 — Cobertura das superficies de cor fixa que nao viraram com a
   troca de tokens (Secao 1). Nenhum arquivo de origem listado abaixo e
   editado — todo override entra por especificidade a partir daqui. Cada
   secao abre com um marcador estavel "SURFACE: caminho" (dentro de um
   comentario CSS proprio), lido pelo gate `coverage` de
   tools/check_theme_toggle.py.
   ═══════════════════════════════════════════════════════════════════════ */

/* SURFACE: templates/base.html */
/* Quarteto de tinta de estado que sobra fora dos tokens (vermelho de
   perigo/vermelho escuro do .btn-danger), overlays de baixa opacidade
   sobre preto (bordas/sombras de card/dropdown/tabela) e o balao decorativo
   do Konami (fundo quase-branco fixo + var(--c-ink) — o UNICO par
   fixo+token do arquivo que quebraria contraste se ficasse para tras). A
   navbar e o mascote de ajuda ficam fora (SURFACE_ALLOWLIST, ja escuros ou
   auto-consistentes — ver justificativa no checker). */
html[data-bs-theme="dark"] .btn-danger { background: #b91c1c; border-color: #b91c1c; }
html[data-bs-theme="dark"] .btn-danger:hover { background: #991b1b; border-color: #991b1b; }
html[data-bs-theme="dark"] .container-content { border-color: rgba(255,255,255,0.08); }
html[data-bs-theme="dark"] .card { border-color: rgba(255,255,255,0.09); }
html[data-bs-theme="dark"] .dropdown-menu { border-color: rgba(255,255,255,0.10); box-shadow: 0 4px 20px rgba(0,0,0,0.45); }
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(255,255,255,0.03); }
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5a5a5e; }
html[data-bs-theme="dark"] .konami-hint { background: rgba(28,28,30,0.92); }


/* SURFACE: static/css/expedicao.css */
/* Custom properties escopadas em .expedicao-page.expedicao-hifi (definidas
   em expedicao.css:52-67) — redefinir aqui vence por especificidade
   (html[data-bs-theme="dark"] .expedicao-page.expedicao-hifi = 0,2,1 contra
   0,1,0 da regra original) sem editar expedicao.css. Os literais que
   check_expedicao_hifi.py exige (#1a7f37/#166b2f/#c0392b/#e0a3a3/#fdf2f2)
   continuam intocados no arquivo de origem — sao os fundos verde/vermelho
   solidos dos botoes (ja tem tinta branca, permanecem legiveis). */
html[data-bs-theme="dark"] .expedicao-page.expedicao-hifi {
    --hifi-green-tint: rgba(111, 207, 143, .16);
    --hifi-red-bg-hover: rgba(242, 139, 130, .14);
    --hifi-blue-tint: rgba(41, 151, 255, .16);
    --hifi-sectionhead-bg: var(--c-surface);
    --hifi-row-divider: var(--c-divider);
}
html[data-bs-theme="dark"] .expedicao-page.expedicao-hifi .expedicao-batchcard,
html[data-bs-theme="dark"] .expedicao-page.expedicao-hifi .expedicao-wavecard {
    background: var(--c-canvas);
}
html[data-bs-theme="dark"] .expedicao-page.expedicao-hifi .btn-outline-danger,
html[data-bs-theme="dark"] .expedicao-page.expedicao-hifi .btn-outline-success {
    background: var(--c-canvas);
}


/* SURFACE: static/etiq/styles.css */
/* etiq/styles.css declara o proprio bloco :root (--bg-main/--page-soft/
   --ink/--muted/--accent/--accent-2/--card/--line/--shadow-sm), separado
   do :root de base.html. Especificidade de html[data-bs-theme="dark"]
   (0,1,1) vence :root (0,1,0) do mesmo jeito. --nav-bg fica intocado (a
   navbar ja e escura). Cobertura de classe explicita para os literais que
   nao passam pelos tokens (panel/ghost/barcode/strip-highlight/tabela). */
html[data-bs-theme="dark"] {
    --bg-main:   #0b0b0d;
    --page-soft: #1c1c1e;
    --ink:       #f2f2f4;
    --muted:     #a1a1a6;
    --accent:    #2997ff;
    --accent-2:  #5cb2ff;
    --line:      rgba(255, 255, 255, 0.12);
    --card:      #1c1c1e;
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.45);
}
html[data-bs-theme="dark"] .panel { background: var(--card); }
html[data-bs-theme="dark"] .ghost { background: #2c2c2e; }
html[data-bs-theme="dark"] .ghost:hover { background: #3a3a3d; }
html[data-bs-theme="dark"] .inline-label-area h3 { color: var(--ink); }
html[data-bs-theme="dark"] .barcode-preview-panel { background: var(--card); }
html[data-bs-theme="dark"] .dashboard-head p { color: var(--muted); }
html[data-bs-theme="dark"] .barcode-tip { color: var(--muted); }
html[data-bs-theme="dark"] .barcode-error { color: #ff8a80; }
html[data-bs-theme="dark"] .strip-highlight-color { background: #2c2c2e; color: #f2f2f4; }
html[data-bs-theme="dark"] .strip-highlight-time { background: #3a3a3d; color: #f2f2f4; }
html[data-bs-theme="dark"] .horario-invalido-box .clients-table-wrap { background: var(--card); }
html[data-bs-theme="dark"] .client-date { color: var(--muted); }
html[data-bs-theme="dark"] .modal-close { color: var(--muted); }
html[data-bs-theme="dark"] .clients-table th { color: var(--muted); }
/* Bug real reportado em producao: .label-card (etiq/styles.css:454-462) e a
   pre-visualizacao da etiqueta impressa — simula papel, por isso o fundo
   fica sempre branco de proposito (nunca coberto acima, igual aos outros
   cards de preview). O problema e que nenhum filho seu (.strip-meta,
   .barcode-number) declara `color` proprio: o texto herda a tinta da
   pagina, que --ink inverte para clara no escuro, ficando quase invisivel
   sobre o cartao branco (CLI/DT ilegiveis). Fixar a tinta do cartao no
   valor claro de sempre resolve todos os filhos de uma vez, sem tocar
   fundo nenhum — o cartao continua identico ao modo claro, como deve. */
html[data-bs-theme="dark"] .label-card { color: #1d1d1f; }
/* Bug real reportado em producao: etiq/styles.css:204-212 estiliza TODO
   input/textarea/select da pagina com fundo fixo quase-branco
   (rgba(255,255,255,0.95)) e nao declara `color` proprio — o texto herda
   a tinta da pagina, que --ink inverte para clara no escuro. Resultado:
   campo de digitar completamente ilegivel (texto claro sobre fundo quase
   branco). Escopado a `body.etiq-page` (classe que as paginas com
   etiq/styles.css ja usam) para nao alcancar formularios de outras
   telas, que usam .form-control do Bootstrap e ja funcionam. */
html[data-bs-theme="dark"] body.etiq-page input,
html[data-bs-theme="dark"] body.etiq-page textarea,
html[data-bs-theme="dark"] body.etiq-page select {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    border-color: var(--line);
}
html[data-bs-theme="dark"] body.etiq-page input::placeholder,
html[data-bs-theme="dark"] body.etiq-page textarea::placeholder {
    color: var(--muted);
}


/* SURFACE: templates/dashboard.html */
/* Painel principal (Endereçados). Bloco <style> de topo (visualizacao de
   prateleiras) e o segundo bloco (tooltip de informacao da caixa). */
html[data-bs-theme="dark"] .rack-header {
    background: #3a3a3d;
    color: var(--c-ink);
    border-bottom-color: #4a4a4e;
}
html[data-bs-theme="dark"] .rack-pct { color: var(--c-muted); }
html[data-bs-theme="dark"] .rack-body {
    border-left-color: #4a4a4e;
    border-right-color: #4a4a4e;
    border-bottom-color: #4a4a4e;
    background: #2c2c2e;
}
html[data-bs-theme="dark"] .rack-level { border-top-color: #4a4a4e; }
html[data-bs-theme="dark"] .level-lbl { color: var(--c-ink); background: #2c2c2e; }
html[data-bs-theme="dark"] .slot-lbl { color: var(--c-muted); }
html[data-bs-theme="dark"] .box-info-tooltip {
    background: var(--c-canvas);
    border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .box-info-tooltip .tip-title { color: var(--c-ink); }
html[data-bs-theme="dark"] .box-info-tooltip .tip-line { color: var(--c-ink); }
html[data-bs-theme="dark"] .box-info-tooltip .tip-line strong { color: var(--c-ink); }
html[data-bs-theme="dark"] .box-info-tooltip .tip-observation {
    border-color: var(--c-hairline);
    background: var(--c-surface);
}


/* SURFACE: templates/login.html */
html[data-bs-theme="dark"] body { background: var(--c-parchment); }
html[data-bs-theme="dark"] .nismo-login-page { background: var(--c-parchment); }
html[data-bs-theme="dark"] .nismo-login-card {
    background: var(--c-canvas);
    border-color: rgba(255,255,255,.08);
}
html[data-bs-theme="dark"] .nismo-login-field {
    background: var(--c-surface);
    border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .nismo-login-field:focus-within {
    background: var(--c-canvas);
    border-color: var(--c-blue-focus);
}
html[data-bs-theme="dark"] .nismo-login-field i { color: var(--c-muted-light); }
html[data-bs-theme="dark"] .nismo-login-field input { color: var(--c-ink); }
html[data-bs-theme="dark"] .nismo-login-field input::placeholder { color: var(--c-muted-light); }
html[data-bs-theme="dark"] .nismo-login-button { background: var(--c-blue); }
html[data-bs-theme="dark"] .nismo-login-button:hover { background: var(--c-blue-focus); }
html[data-bs-theme="dark"] .nismo-login-error {
    background: #3a1414;
    border-color: rgba(242,139,130,.35);
    color: #f28b82;
}


/* SURFACE: templates/settings.html */
html[data-bs-theme="dark"] #cfgTabs .nav-link { color: var(--c-muted) !important; }
html[data-bs-theme="dark"] #cfgTabs .nav-link.active { color: var(--c-blue) !important; }
html[data-bs-theme="dark"] #cfgTabs .nav-link:hover { color: var(--c-blue) !important; }


/* SURFACE: templates/search.html */
html[data-bs-theme="dark"] #autocomplete-suggestions .list-group-item:hover {
    background-color: var(--c-surface);
}


/* SURFACE: templates/triage_receiving.html */
/* Cobertura dos containers estruturais e do texto primario/secundario.
   Gradientes decorativos de marca (cabecalhos coloridos de card, faixa de
   introducao) ficam intencionalmente fora — sao auto-consistentes (fundo
   E tinta fixos juntos, sem par fixo+token) e nao viram risco de contraste
   ao entrar no tema escuro; documentado no SUMMARY como cobertura parcial. */
html[data-bs-theme="dark"] .triage-page {
    --triage-ink: #f2f2f4;
    --triage-border: #3a3a3d;
    --triage-accent-soft: rgba(224, 109, 0, .18);
}
html[data-bs-theme="dark"] .triage-subtitle { color: var(--c-muted); }
html[data-bs-theme="dark"] .triage-search-card .card-body { background: var(--c-canvas); }
html[data-bs-theme="dark"] .triage-search-label { color: var(--c-ink); }
html[data-bs-theme="dark"] .triage-search-help { color: var(--c-muted); }
html[data-bs-theme="dark"] .triage-results-meta { color: var(--c-muted); }
html[data-bs-theme="dark"] .triage-results-table thead th {
    background: var(--c-surface);
    color: var(--c-ink);
    border-bottom-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .triage-filter-toggle {
    border-color: var(--c-hairline);
    background: var(--c-surface);
    color: var(--c-muted);
}
html[data-bs-theme="dark"] .triage-filter-toggle:hover,
html[data-bs-theme="dark"] .triage-filter-toggle:focus {
    background: var(--c-divider);
    color: var(--c-ink);
}
html[data-bs-theme="dark"] .triage-filter-menu .form-label { color: var(--c-ink); }
html[data-bs-theme="dark"] .triage-filter-chip {
    border-color: var(--c-hairline);
    background: var(--c-surface);
    color: var(--c-muted);
}
html[data-bs-theme="dark"] .triage-filter-chip:hover,
html[data-bs-theme="dark"] .triage-filter-chip:focus {
    background: var(--c-divider);
    color: var(--c-ink);
}
html[data-bs-theme="dark"] .triage-edit-banner {
    background: var(--c-warning-bg);
    border-color: rgba(242,201,76,.35);
    color: var(--c-warning-fg);
}
html[data-bs-theme="dark"] .triage-form-card .card-body { background: var(--c-canvas); }
html[data-bs-theme="dark"] .triage-form .form-label { color: var(--c-ink); }
html[data-bs-theme="dark"] .triage-form .form-control,
html[data-bs-theme="dark"] .triage-form textarea {
    background: var(--c-canvas);
    color: var(--c-ink);
    border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .triage-form small.text-muted { color: var(--c-muted) !important; }
html[data-bs-theme="dark"] #activeServicesWarning {
    background: var(--c-danger-bg);
    border-color: rgba(242,139,130,.35);
    color: var(--c-danger-fg);
}


/* SURFACE: templates/start_page.html */
/* Quase todo o arquivo ja usa tokens de base.html (design ja preparado
   para o tema). .start-hero fica de fora (SURFACE_ALLOWLIST — gradiente
   quase-preto + texto branco, ja auto-consistente com o tema escuro). O
   unico par fixo+fixo que precisa escurecer para nao destoar do resto da
   pagina e o quarteto "urgente" (mesma logica das badges de estado). */
html[data-bs-theme="dark"] .metric-card.is-urgent .metric-icon {
    background: rgba(177, 75, 0, .28);
    color: #ffab66;
}
html[data-bs-theme="dark"] .is-urgent .metric-value { color: #ffab66; }
html[data-bs-theme="dark"] .metric-card.is-attention { border-color: rgba(242, 201, 76, .35); }
html[data-bs-theme="dark"] .metric-card.is-urgent { border-color: rgba(255, 171, 102, .35); }
html[data-bs-theme="dark"] .metric-card.is-critical { border-color: rgba(242, 139, 130, .35); }