/* ==========================================================================
   Stockpilot WMS — Temas (Azul Petróleo)
   Carregar DEPOIS de style.css. Só cores: nada aqui muda grid/posição/HTML.

   Três modos, controlados por data-theme no <html>:
     • data-theme="light"   -> claro
     • data-theme="dark"    -> escuro (identidade do sistema)
     • (sem atributo)       -> "Padrão do sistema": segue o SO (prefers-color-scheme)

   O tema é aplicado por um script anti-flash no <head> do index.html.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1) TOKENS — CLARO  (aplicado por data-theme="light" e como base de fallback)
   ---------------------------------------------------------------------------- */
:root,
:root[data-theme="light"]{
  --petroleo:    #0A1220;  --petroleo-2: #141B29;  --petroleo-3: #12203D;  --petroleo-ln:#252B38;

  --navy:    var(--petroleo);
  --navy2:   var(--petroleo-2);
  --orange:  #2563EB;      /* "accent" do app (botões/ativos) agora é azul */
  --orange2: #1D4ED8;
  --canvas:  #EEF2F7;
  --surface: #FFFFFF;
  --ink:     #0F172A;
  --ink2:    #475569;
  --ink3:    #64748B;
  --line:    #D9E1EA;
  --ok:  #16A34A;  --okbg:  #E8F6EE;
  --warn:#D97706;  --warnbg:#FDF3DD;
  --crit:#DC2626;  --critbg:#FDECEC;

  --title:       #1D4ED8;
  --kpi-bg:      #EFF5FF;
  --kpi-accent:  #1D4ED8;
  --th-bg:       #F8FAFC;
  --zebra:       rgba(15,23,42,.018);
  --row-hover:   rgba(37,99,235,.06);
  --code-bg:     #E8EEF6;  --code-fg: #1E3A5F;
  --track:       #E2E8F0;
  --shadow:      0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.05);
}

/* ----------------------------------------------------------------------------
   2) TOKENS — ESCURO  (identidade: azul-petróleo do Dashboard Geral)
   Aplicado por data-theme="dark" E por "sistema" quando o SO está em dark.
   ---------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  --navy:    #0A1220;      /* barra lateral ainda mais escura que os painéis */
  --navy2:   #141F30;
  --orange:  #3B82F6;      /* accent azul */
  --orange2: #2563EB;
  --canvas:  #0B1220;      /* fundo da página */
  --surface: #111B2B;      /* painéis/tabelas */
  --ink:     #E6EDF5;
  --ink2:    #9FB0C3;
  --ink3:    #6B7C92;
  --line:    #1E2A3C;
  --ok:  #34D399;  --okbg:  rgba(52,211,153,.14);
  --warn:#FBBF24;  --warnbg:rgba(251,191,36,.14);
  --crit:#F87171;  --critbg:rgba(248,113,113,.16);

  --title:       #7FB2FF;
  --kpi-bg:      #0F1A2B;
  --kpi-accent:  #3B82F6;
  --th-bg:       #0E1826;
  --zebra:       rgba(255,255,255,.02);
  --row-hover:   rgba(59,130,246,.10);
  --code-bg:     #15233A;  --code-fg: #9ECBFF;
  --track:       #1E2A3C;
  --shadow:      0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
}

/* "Padrão do sistema": sem data-theme, segue o SO em modo escuro */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --navy:#0A1220; --navy2:#141F30; --orange:#3B82F6; --orange2:#2563EB;
    --canvas:#0B1220; --surface:#111B2B; --ink:#E6EDF5; --ink2:#9FB0C3; --ink3:#6B7C92;
    --line:#1E2A3C; --ok:#34D399; --okbg:rgba(52,211,153,.14); --warn:#FBBF24;
    --warnbg:rgba(251,191,36,.14); --crit:#F87171; --critbg:rgba(248,113,113,.16);
    --title:#7FB2FF; --kpi-bg:#0F1A2B; --kpi-accent:#3B82F6; --th-bg:#0E1826;
    --zebra:rgba(255,255,255,.02); --row-hover:rgba(59,130,246,.10);
    --code-bg:#15233A; --code-fg:#9ECBFF; --track:#1E2A3C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}

/* ----------------------------------------------------------------------------
   3) COMPONENTES — regras que usam os tokens acima (valem nos 3 modos)
   ---------------------------------------------------------------------------- */
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

/* Barra lateral */
.side{ border-right:1px solid var(--petroleo-ln); }
.brand .mark{ background:var(--orange); color:#fff; }
.nav.active{ background:rgba(255,255,255,.06); color:#fff; box-shadow: inset 3px 0 0 var(--orange); }

/* Cabeçalho */
header{ background:color-mix(in srgb, var(--canvas) 88%, transparent); border-bottom:1px solid var(--line); }
h1{ font-weight:700; letter-spacing:-.01em; color:var(--ink); }

/* Rodapé */
.app-rodape{ background:color-mix(in srgb, var(--canvas) 88%, transparent); border-top:1px solid var(--line); }

/* KPIs com faixa de destaque à esquerda */
.kpi{ background:var(--kpi-bg); border:1px solid var(--line); border-radius:12px; position:relative; overflow:hidden; }
.kpi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--kpi-accent); }
.kpi .v{ color:var(--ink); font-variant-numeric:tabular-nums; }
.kpi .v.ac{ color:var(--kpi-accent); }

/* Painéis */
.card{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
.card h3{ color:var(--title); font-weight:600; border-bottom-color:var(--line); }

/* Tabelas */
th{ background:var(--th-bg); color:var(--ink2); text-transform:none; letter-spacing:0; font-weight:600; border-bottom:1px solid var(--line); }
td{ color:var(--ink); border-bottom:1px solid var(--line); }
tbody tr:nth-child(even){ background:var(--zebra); }
tbody tr:hover{ background:var(--row-hover); }
.code{ background:var(--code-bg); color:var(--code-fg); }
.muted,.muted *{ color:var(--ink3); }

/* Status (pílulas) */
.pill.livre{ background:var(--okbg); color:var(--ok); }
.pill.qualidade{ background:var(--warnbg); color:var(--warn); }
.pill.bloqueado,.pill.vencido{ background:var(--critbg); color:var(--crit); }

/* Formulários e botões */
label{ color:var(--ink2); }
input,select{ background:var(--surface); color:var(--ink); border:1px solid var(--line); }
input:focus,select:focus{ border-color:var(--orange); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent); }
.btn.primary{ background:var(--orange); color:#fff; }
.btn.primary:hover{ background:var(--orange2); }
.btn.ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.btn.ghost:hover{ background:color-mix(in srgb, var(--ink) 6%, var(--surface)); }

/* Barra de proporção (trilho + preenchimento) */
.bar-track{ background:var(--track); }

/* Campo de leitura do coletor — segue o tema (antes ficava sempre escuro, "travado",
   mesmo em tela clara). */
.scan{ background:var(--canvas); border:1px solid var(--line); }
.scan input{ background:var(--surface); border-color:var(--line); color:var(--ink); }
.scan input::placeholder,.scan .hint{ color:var(--ink3); }
.pick-ok{ background:var(--okbg); border:1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.pick-ok b{ color:var(--ok); }

/* Login e toasts */
.login-wrap{ position:fixed; inset:0; z-index:100; background:var(--petroleo); }
.login-card{ background:var(--surface); color:var(--ink); }
.login-card .lb .mark{ background:var(--orange); color:#fff; }
.login-hint{ color:var(--ink3); border-top-color:var(--line); }
.chip{ background:var(--surface); color:var(--ink2); border:1px solid var(--line); }
.toast{ background:var(--navy); color:#EAF1F6; border-left-color:var(--orange); }

/* ----------------------------------------------------------------------------
   4) Seletor de tema (no cabeçalho)
   ---------------------------------------------------------------------------- */
/* Só o tema ativo fica visível; passar o mouse no grupo revela os outros dois. */
.theme-switch{ display:inline-flex; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:2px; }
.theme-switch button{ display:none; border:none; background:none; cursor:pointer; padding:5px 9px; border-radius:7px; font-size:12px; color:var(--ink3); align-items:center; gap:5px; font-family:inherit; }
.theme-switch button svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.theme-switch button:hover{ color:var(--ink); }
.theme-switch button.on{ display:inline-flex; background:var(--orange); color:#fff; }
.theme-switch:hover button{ display:inline-flex; }