/* ═══════════════════════════════════════════════════════════════════════
   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). */
    /* Paleta azul-marinho, a mesma familia da tela de login (fundo da cena
       3D #070b14), para o site inteiro ter uma cara so no escuro. */
    --c-ink:           #eef1f6;
    --c-muted:         #9aa4b5;
    --c-muted-light:   #778196;
    --c-hairline:      #2d3a4f;
    --c-divider:       #222c3d;
    --c-parchment:     #0a0e17;
    --c-canvas:        #131a26;
    --c-surface:       #1a2231;
    /* --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. */

    /* Variaveis do proprio Bootstrap 5.3 no tema escuro: sem isto os
       componentes dele (modal, list-group, form-control, tabela, dropdown)
       usam o cinza #212529 do Bootstrap e destoam dos cards do sistema. */
    --bs-body-bg:            var(--c-parchment);
    --bs-body-bg-rgb:        10, 14, 23;
    --bs-body-color:         var(--c-ink);
    --bs-body-color-rgb:     238, 241, 246;
    --bs-emphasis-color:     #ffffff;
    --bs-secondary-color:    var(--c-muted);
    --bs-secondary-bg:       var(--c-surface);
    --bs-secondary-bg-rgb:   26, 34, 49;
    --bs-tertiary-bg:        var(--c-canvas);
    --bs-tertiary-bg-rgb:    19, 26, 38;
    --bs-border-color:       var(--c-hairline);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.10);
    --bs-heading-color:      var(--c-ink);
    --bs-link-color:         var(--c-blue);
    --bs-link-color-rgb:     41, 151, 255;
    --bs-link-hover-color:   var(--c-blue-focus);
    --bs-link-hover-color-rgb: 92, 178, 255;
}


/* ───────────────────────────────────────────────────────────────────────
   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);

        --bs-body-bg-rgb:      255, 255, 255;
        --bs-body-color-rgb:   33, 37, 41;
        --bs-secondary-bg-rgb: 233, 236, 239;
        --bs-tertiary-bg-rgb:  248, 249, 250;
        --bs-emphasis-color:   #000000;
    }

    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: #4a5a75; }
html[data-bs-theme="dark"] .konami-hint { background: rgba(19,26,38,0.92); }

html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5a75; }

/* Utilitarios do Bootstrap 5.3 que NAO invertem sozinhos no tema escuro
   (usados em dezenas de telas e em HTML montado por JS). Todos carregam
   !important no Bootstrap, entao o override repete a marcacao. */
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-white {
    background-color: var(--c-surface) !important;
    color: var(--c-ink);
}
html[data-bs-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.btn-warning) {
    color: var(--c-ink) !important;
}
html[data-bs-theme="dark"] .badge.bg-light { border: 1px solid var(--c-hairline); }
html[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--c-ink);
    --bs-table-bg: var(--c-surface);
    --bs-table-border-color: var(--c-hairline);
    --bs-table-striped-bg: var(--c-divider);
    --bs-table-striped-color: var(--c-ink);
    --bs-table-active-bg: var(--c-divider);
    --bs-table-active-color: var(--c-ink);
    --bs-table-hover-bg: var(--c-divider);
    --bs-table-hover-color: var(--c-ink);
    color: var(--c-ink);
    border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--c-ink);
    --bs-btn-bg: var(--c-surface);
    --bs-btn-border-color: var(--c-hairline);
    --bs-btn-hover-color: var(--c-ink);
    --bs-btn-hover-bg: var(--c-divider);
    --bs-btn-hover-border-color: var(--c-hairline);
    --bs-btn-active-color: var(--c-ink);
    --bs-btn-active-bg: var(--c-divider);
    --bs-btn-active-border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .alert-light {
    --bs-alert-color: var(--c-ink);
    --bs-alert-bg: var(--c-surface);
    --bs-alert-border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(255, 255, 255, 0.04);
}
html[data-bs-theme="dark"] .list-group-item:hover { background-color: var(--c-surface); }
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    background-color: var(--c-canvas);
    border-color: var(--c-hairline);
    color: var(--c-ink);
}
html[data-bs-theme="dark"] .form-control::placeholder { color: var(--c-muted-light); }
html[data-bs-theme="dark"] .modal-content {
    background-color: var(--c-canvas);
    border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer { border-color: var(--c-divider); }
html[data-bs-theme="dark"] .nav-tabs { --bs-nav-tabs-border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--c-canvas);
    border-color: var(--c-hairline) var(--c-hairline) var(--c-canvas);
}

/* Logo preta da NISMO (usada em cima de cards): inverte para branca e
   devolve o azul do risco com hue-rotate. Login tem logo propria. */
html[data-bs-theme="dark"] img[src*="nismosystem_logo_png_preto"]:not(.nismo-login-logo) {
    filter: invert(1) hue-rotate(180deg);
}

/* Lembrete "Baixa Filial" (templates/_baixa_filial_reminder.html, incluido
   no Inicio, Enderecados e Pedido): cartao branco fixo. */
html[data-bs-theme="dark"] #baixaFilialReminderOverlay .baixa-filial-reminder-card {
    background: var(--c-canvas);
    color: var(--c-ink);
    border: 1px solid var(--c-hairline);
}
html[data-bs-theme="dark"] #baixaFilialReminderOverlay .baixa-filial-reminder-title { color: #f2c94c; }
html[data-bs-theme="dark"] #baixaFilialReminderOverlay .baixa-filial-reminder-text { color: var(--c-ink); }
html[data-bs-theme="dark"] #baixaFilialReminderAck {
    color: var(--c-ink);
    border-color: var(--c-hairline);
}


/* 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:   #0a0e17;
    --page-soft: #131a26;
    --ink:       #eef1f6;
    --muted:     #9aa4b5;
    --accent:    #2997ff;
    --accent-2:  #5cb2ff;
    --line:      rgba(255, 255, 255, 0.12);
    --card:      #131a26;
    --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: var(--c-surface); }
html[data-bs-theme="dark"] .ghost:hover { background: var(--c-divider); }
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: var(--c-surface); color: var(--c-ink); }
html[data-bs-theme="dark"] .strip-highlight-time { background: var(--c-divider); color: var(--c-ink); }
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: var(--c-divider);
    color: var(--c-ink);
    border-bottom-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .rack-pct { color: var(--c-muted); }
html[data-bs-theme="dark"] .rack-body {
    border-left-color: var(--c-hairline);
    border-right-color: var(--c-hairline);
    border-bottom-color: var(--c-hairline);
    background: var(--c-surface);
}
html[data-bs-theme="dark"] .rack-level { border-top-color: var(--c-hairline); }
html[data-bs-theme="dark"] .level-lbl { color: var(--c-ink); background: var(--c-surface); }
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); }
/* Tokens --lg-* da tela de login (cartao em vidro sobre a cena 3D). */
html[data-bs-theme="dark"] {
    --lg-bg: #070b14;
    --lg-card: rgba(14, 19, 31, .8);
    --lg-card-border: rgba(255, 255, 255, .09);
    --lg-ink: #f5f5f7;
    --lg-muted: #9aa3b2;
    --lg-field: rgba(255, 255, 255, .05);
    --lg-field-border: rgba(255, 255, 255, .08);
    --lg-accent: #0a84ff;
    --lg-accent-2: #64b5ff;
    --lg-glow: rgba(41, 151, 255, .35);
    --lg-shadow: 0 30px 90px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(41, 151, 255, .06);
    --lg-vignette: radial-gradient(ellipse at 70% 50%, rgba(7, 11, 20, 0) 25%, rgba(7, 11, 20, .7) 100%);
    --lg-hero-shade: linear-gradient(90deg, rgba(7, 11, 20, .85) 0%, rgba(7, 11, 20, .5) 38%, rgba(7, 11, 20, 0) 60%);
}
html[data-bs-theme="dark"] .nismo-login-logo-light { display: none; }
html[data-bs-theme="dark"] .nismo-login-logo-dark { display: block; }
html[data-bs-theme="dark"] .nismo-login-error { color: #ff6961; }


/* 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: var(--c-ink);
    --triage-border: var(--c-divider);
    --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); }



/* ═══════════════════════════════════════════════════════════════════════
   REVISAO GERAL DO MODO ESCURO (quick 260928) — superficies que ainda
   ficavam claras/ilegiveis. Mesmo contrato do resto do arquivo: seletor
   original prefixado com html[data-bs-theme="dark"] (sempre vence por
   especificidade); `!important` so onde o alvo e estilo inline.
   Pre-visualizacoes de etiqueta (papel) ficam brancas DE PROPOSITO.
   ═══════════════════════════════════════════════════════════════════════ */

/* SURFACE: templates/dashboard.html */
/* Complemento: lembretes (OPTO / auditoria de prateleira), fundos inline
   da zona e do modulo e lista de destino do "Mover". */
html[data-bs-theme="dark"] #optoReminderOverlay .opto-reminder-card,
html[data-bs-theme="dark"] #shelfAuditReminderOverlay .shelf-audit-reminder-card {
    background: var(--c-canvas);
    color: var(--c-ink);
    border: 1px solid var(--c-hairline);
}
html[data-bs-theme="dark"] #optoReminderOverlay .opto-reminder-title,
html[data-bs-theme="dark"] #shelfAuditReminderOverlay .shelf-audit-reminder-title { color: #f2c94c; }
html[data-bs-theme="dark"] .zone-tags-panel { background-color: rgba(41, 151, 255, .06); }
html[data-bs-theme="dark"] .module-panel { background-color: var(--c-canvas); }
html[data-bs-theme="dark"] [data-tip-dest-list] {
    background: var(--c-canvas) !important;
    border-color: var(--c-hairline) !important;
    color: var(--c-ink);
}


/* SURFACE: templates/shelf_preview.html */
/* shelf_preview, shelf_preview6 e triage_preview: fundo cinza-claro fixo
   da "maquete" das prateleiras. */
html[data-bs-theme="dark"] .proto-page,
html[data-bs-theme="dark"] .triage-proto-page { background: var(--c-parchment); }
html[data-bs-theme="dark"] .triage-rack-body { background: var(--c-surface); }
html[data-bs-theme="dark"] .triage-level-lbl { background: var(--c-surface); color: var(--c-ink); }
html[data-bs-theme="dark"] .triage-slot-lbl { color: var(--c-muted); }
/* Titulo e legendas marrom-escuro inline da maquete da triagem. */
html[data-bs-theme="dark"] .triage-proto-accent { color: #ffab66; }


/* SURFACE: templates/about.html */
html[data-bs-theme="dark"] .about-card { border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .about-card .card-header { background: var(--c-surface); }
html[data-bs-theme="dark"] .about-metric {
    background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-canvas) 100%);
    border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .about-metric .metric-value { color: var(--c-ink); }
html[data-bs-theme="dark"] .about-metric .metric-label { color: var(--c-muted); }
html[data-bs-theme="dark"] .about-list li { color: var(--c-ink); }
html[data-bs-theme="dark"] .about-step { border-bottom-color: var(--c-divider); }
html[data-bs-theme="dark"] .about-support {
    background: var(--c-warning-bg);
    border-color: rgba(242, 201, 76, .30);
    color: var(--c-ink);
}


/* SURFACE: templates/confirmations.html */
/* Conferencia + historico. As badges-ok/erro tambem existem em
   admin_confirmations.html com o mesmo nome. */
html[data-bs-theme="dark"] #field-a,
html[data-bs-theme="dark"] #field-b { border-color: var(--c-hairline); }
html[data-bs-theme="dark"] #field-a.match,
html[data-bs-theme="dark"] #field-b.match { background-color: var(--c-success-bg); }
html[data-bs-theme="dark"] #field-a.mismatch,
html[data-bs-theme="dark"] #field-b.mismatch { background-color: var(--c-danger-bg); }
html[data-bs-theme="dark"] #result-badge.alert-success {
    background-color: var(--c-success-bg);
    border-color: rgba(111, 207, 143, .35);
    color: var(--c-success-fg);
}
html[data-bs-theme="dark"] #result-badge.alert-danger {
    background-color: var(--c-danger-bg);
    border-color: rgba(242, 139, 130, .35);
    color: var(--c-danger-fg);
}
html[data-bs-theme="dark"] .stat-number { color: var(--c-ink); }
html[data-bs-theme="dark"] .history-item { border-bottom-color: var(--c-divider); }
html[data-bs-theme="dark"] .history-item:hover { background-color: var(--c-surface); }
html[data-bs-theme="dark"] .badge-ok { background-color: var(--c-success-bg); color: var(--c-success-fg); }
html[data-bs-theme="dark"] .badge-erro { background-color: var(--c-danger-bg); color: var(--c-danger-fg); }


/* SURFACE: templates/admin_confirmations.html */
html[data-bs-theme="dark"] .table-hover tbody tr:hover { background-color: var(--c-surface); }


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


/* SURFACE: templates/movements.html */
html[data-bs-theme="dark"] .movement-search-card {
    background: var(--c-canvas);
    border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .movement-search-card .form-label { color: var(--c-ink); }
html[data-bs-theme="dark"] .movement-search-card .form-text { color: var(--c-muted) !important; }
html[data-bs-theme="dark"] .movement-results-table thead th {
    background: var(--c-surface);
    color: var(--c-ink);
    border-bottom-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .movement-filter-toggle {
    border-color: var(--c-hairline);
    background: var(--c-surface);
    color: var(--c-muted);
}
html[data-bs-theme="dark"] .movement-filter-toggle:hover,
html[data-bs-theme="dark"] .movement-filter-toggle:focus {
    background: var(--c-divider);
    color: var(--c-ink);
}
html[data-bs-theme="dark"] .movement-filter-menu .form-label { color: var(--c-ink); }


/* SURFACE: templates/order_form.html */
/* Painel "MODO BIPADOR" vira ambar escuro; faixa azul do checkbox de
   etiqueta de envio; janela da etiqueta de envio montada pelo JS. */
html[data-bs-theme="dark"] .bipador-panel {
    background-color: var(--c-warning-bg);
    border-color: #b45309;
    color: var(--c-warning-fg);
}
html[data-bs-theme="dark"] .bipador-panel h4,
html[data-bs-theme="dark"] .bipador-panel .form-check-label { color: var(--c-warning-fg); }
html[data-bs-theme="dark"] .autoprint-envio-box {
    background: rgba(41, 151, 255, .10);
    border-color: rgba(41, 151, 255, .35);
}
html[data-bs-theme="dark"] .autoprint-envio-box .form-check-label { color: var(--c-ink); }
html[data-bs-theme="dark"] .envio-modal {
    background: var(--c-canvas);
    color: var(--c-ink);
    border: 1px solid var(--c-hairline);
}
html[data-bs-theme="dark"] .envio-modal-meta { color: var(--c-muted); }
html[data-bs-theme="dark"] .envio-modal-frame { border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .envio-modal-btn.is-close { background: var(--c-surface); color: var(--c-ink); }


/* SURFACE: templates/expedicao_doublecheck.html */
html[data-bs-theme="dark"] #dc-loud-warning-box { background: var(--c-canvas) !important; }
html[data-bs-theme="dark"] #dc-loud-warning-message { color: var(--c-ink) !important; }
html[data-bs-theme="dark"] #dcLabelModal { background: var(--c-canvas); color: var(--c-ink); }
/* #dcLabelPreview / .dc-label-code / .dc-label-line = papel: continuam brancos. */
html[data-bs-theme="dark"] .dc-btn-close { background: var(--c-surface); color: var(--c-ink); }


/* SURFACE: templates/controle_servidor.html */
/* As abas usam !important no template, entao o override repete. */
html[data-bs-theme="dark"] #ctrlTabs .nav-link { color: var(--c-muted) !important; }
html[data-bs-theme="dark"] #ctrlTabs .nav-link.active,
html[data-bs-theme="dark"] #ctrlTabs .nav-link:hover { color: var(--c-blue) !important; }
html[data-bs-theme="dark"] .ctrl-pedido-erro-check { background: var(--c-canvas); }


/* SURFACE: templates/cells.html */
html[data-bs-theme="dark"] .perm-list-box { background: var(--c-canvas); }


/* SURFACE: templates/search.html */
/* O <select> de ordenacao forca tinta preta nas <option> (inline). */
html[data-bs-theme="dark"] #sortFilter option { color: var(--c-ink) !important; background: var(--c-canvas); }


/* SURFACE: templates/triage_receiving.html */
/* Complemento: faixa de introducao e modal de "servicos ativos". */
html[data-bs-theme="dark"] .triage-form-card,
html[data-bs-theme="dark"] .triage-search-card { border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .triage-intro {
    background: var(--c-warning-bg);
    border-color: rgba(242, 201, 76, .30);
}
html[data-bs-theme="dark"] #triageActiveServicesModal .modal-content {
    background: var(--c-canvas);
    border-color: rgba(242, 201, 76, .30);
}
html[data-bs-theme="dark"] #triageActiveServicesModal .modal-header,
html[data-bs-theme="dark"] #triageActiveServicesModal .modal-footer { border-color: var(--c-divider); }
html[data-bs-theme="dark"] #triageActiveServicesModal .modal-title { color: #f2c94c; }
html[data-bs-theme="dark"] #triageActiveServicesModal .modal-title i {
    background: var(--c-warning-bg);
    border-color: rgba(242, 201, 76, .35);
}
html[data-bs-theme="dark"] #triageActiveServicesModalText { color: var(--c-ink); }
html[data-bs-theme="dark"] .triage-warning-modal-summary,
html[data-bs-theme="dark"] .triage-warning-modal-item {
    background: var(--c-surface);
    border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .triage-warning-modal-summary-icon { background: var(--c-warning-bg); }
html[data-bs-theme="dark"] .triage-warning-modal-summary-title { color: #f2c94c; }
html[data-bs-theme="dark"] .triage-warning-modal-field strong,
html[data-bs-theme="dark"] .triage-warning-modal-field--os strong { color: var(--c-ink); }


/* SURFACE: templates/etiq/label_edit.html */
/* Editor de layout da etiqueta. .preview-wrap e a "mesa" em volta da
   etiqueta — escurece; a etiqueta dentro continua papel branco. */
html[data-bs-theme="dark"] .editor-hero,
html[data-bs-theme="dark"] .editor-side,
html[data-bs-theme="dark"] .control-group,
html[data-bs-theme="dark"] .selected-card,
html[data-bs-theme="dark"] .model-item {
    background: var(--c-canvas);
    border-color: var(--c-hairline);
}
html[data-bs-theme="dark"] .preview-wrap { background: var(--c-surface); }
html[data-bs-theme="dark"] .editor-hero p,
html[data-bs-theme="dark"] .editor-side p,
html[data-bs-theme="dark"] .preview-panel p { color: var(--c-muted); }
html[data-bs-theme="dark"] .meta-row { background: var(--c-surface); }
html[data-bs-theme="dark"] .section-tab { background: var(--c-surface); color: var(--c-ink); }
html[data-bs-theme="dark"] .selected-tag,
html[data-bs-theme="dark"] .model-input { background: var(--c-surface); color: var(--c-ink); }
html[data-bs-theme="dark"] .hint-box { background: var(--c-warning-bg); color: var(--c-warning-fg); }
html[data-bs-theme="dark"] .advanced-toggle { color: var(--c-ink); }


/* SURFACE: templates/etiq/barcode_code128.html */
html[data-bs-theme="dark"] .editor-group,
html[data-bs-theme="dark"] .layout-panel { background: var(--c-canvas); }
html[data-bs-theme="dark"] .editor-preview,
html[data-bs-theme="dark"] .preview-card { background: var(--c-surface); }
html[data-bs-theme="dark"] .preview-legend { color: var(--c-muted); }


/* SURFACE: templates/etiq/expedicao_label_100x150.html */
/* #labelPreview / .label-code-box / .label-info-box = papel: brancos. */
html[data-bs-theme="dark"] .exp-card { background: var(--c-canvas); border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .meta-item { background: var(--c-surface); border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .meta-value { color: var(--c-ink); }
html[data-bs-theme="dark"] .exp-card .btn-secondary { background: var(--c-surface); color: var(--c-ink); }


/* SURFACE: templates/etiq/label_print_100x150.html */
html[data-bs-theme="dark"] .etiq150-card { background: var(--c-canvas); border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .field-grid input { border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .section-title { border-bottom-color: var(--c-divider); }
html[data-bs-theme="dark"] #pdfEmbed { border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .printer-modal { background: var(--c-canvas); color: var(--c-ink); }
html[data-bs-theme="dark"] .printer-modal p,
html[data-bs-theme="dark"] .printer-modal ol { color: var(--c-muted); }
html[data-bs-theme="dark"] .printer-modal .close-btn { background: var(--c-surface); color: var(--c-ink); }


/* SURFACE: templates/etiq/impressos_list.html */
html[data-bs-theme="dark"] .imp-card { background: var(--c-canvas); border-color: var(--c-hairline); }
html[data-bs-theme="dark"] .imp-card tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
html[data-bs-theme="dark"] .imp-card tbody td { border-bottom-color: var(--c-divider); }


/* SURFACE: static/etiq/styles.css */
/* Complemento: alertas e cartoes com fundo branco literal. */
html[data-bs-theme="dark"] body.etiq-page .alert:not([class*="alert-"]) {
    background: var(--c-danger-bg);
    border-color: rgba(242, 139, 130, .35);
    color: var(--c-danger-fg);
}
html[data-bs-theme="dark"] body.etiq-page .ok {
    background: var(--c-success-bg);
    border-color: rgba(111, 207, 143, .35);
    color: var(--c-success-fg);
}
html[data-bs-theme="dark"] body.etiq-page .shell,
html[data-bs-theme="dark"] body.etiq-page .dashboard-card { background: var(--card); }