/* F3 — base: tokens semânticos (REQ-047 §5) + layout + sidebar */
:root{
  --ok:#2e7d32; --warn:#b26a00; --block:#c62828; --info:#616161;
  --bg:#f5f6f7; --panel:#fff; --line:#d9dde1; --ink:#222; --muted:#777;
  --sidebar:#1f2a33; --sidebar-ink:#cfd8dc; --accent:#2e7d32;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--bg)}

/* UIX01/F2 — TIPOGRAFIA, sob o MESMO gate da Fase 1. Com a flag OFF a face atual
   (system-ui) nao muda, e o rollback continua sendo desligar a flag.
   ⚠️ Trocar a face muda a METRICA de todas as telas — o que quebrar por causa disso
   esta registrado no relatorio da fase, e o que exigir mudanca de LAYOUT foi para a
   Fase 3/4, que reescrevem essas telas de qualquer forma. */
:root[data-uix01-tokens] body { font-family: var(--u-fonte) }

/* Monoespacada nos identificadores fiscais (HANDOFF-056 §2): codigo CRM, numero
   Omie, chave da NF-e, placa, peso e valor. Reaproveita os seletores que ja
   marcavam monoespacada no app — nao inventa convencao nova. */
:root[data-uix01-tokens] .mono,
:root[data-uix01-tokens] .dw-chave code,
:root[data-uix01-tokens] .dw-corrigir code,
:root[data-uix01-tokens] .nf-auto-txt,
:root[data-uix01-tokens] .nf-previa,
:root[data-uix01-tokens] .ped-ident { font-family: var(--u-fonte-mono) }
a{color:inherit;text-decoration:none}
.layout{display:flex;min-height:100vh}
/* HANDOFF-041 B1: sem min-width:0 o flex-child .main não encolhe, e uma tabela
   larga empurra o layout — o conteúdo saía cortado à direita (visualização
   truncada). min-width:0 deixa o main respeitar a largura disponível. */
.main{flex:1;min-width:0;padding:18px 22px;max-width:1200px}
h1{font-size:20px;margin:0 0 4px}
.sub{color:var(--muted);font-size:12px;margin-bottom:14px}
.loading{color:var(--muted);padding:40px;text-align:center}
footer{color:var(--muted);font-size:11px;margin:18px 0 6px}
/* Sidebar — blocos Operação / Comercial / Sistema */
.sidebar{width:220px;background:var(--sidebar);color:var(--sidebar-ink);padding:14px 0;flex-shrink:0}
.sidebar .logo{padding:0 16px 12px;border-bottom:1px solid var(--u-linha,#37474f);margin-bottom:10px}
.sidebar .logo img{max-width:150px;display:block}
/* NAV-V1V2 item 0 — logo vira link de "início" (dashboard v2); sem estilo de link */
.sidebar .logo a{display:block;text-decoration:none;color:#fff}
.sidebar .bloco{padding:8px 16px 2px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--u-texto-2,#78909c)}
.sidebar a.item{display:block;padding:8px 16px;border-left:3px solid transparent}
.sidebar a.item:hover{background:var(--u-hover,#263238)}
.sidebar a.item.ativo{background:var(--u-hover,#263238);border-left-color:var(--accent);color:#fff;font-weight:600}
.sidebar .user{margin-top:18px;padding:10px 16px;border-top:1px solid var(--u-linha,#37474f);font-size:12px;color:var(--u-texto-2,#90a4ae);word-break:break-all}
/* NAV-V1V2 — variante do .tag-legacy sobre o fundo escuro da sidebar */
.sidebar .tag-legacy{color:var(--u-ambar,#ffb74d);border-color:var(--u-ambar,#ffb74d);background:transparent}
/* UIX01/HANDOFF-056 F1 — seletor Dia/Noite. So e renderizado com a flag ON
   (app.js), mas o estilo mora aqui junto do resto da sidebar. Alvo de toque de
   44px por exigencia do HANDOFF-056 §5 — o `.sidebar a.item` acima tem ~33px e
   sera corrigido quando a Fase 2 trocar a nav; nao herdamos o defeito. */
.tema-linha{margin-top:10px}
.tema-toggle{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;
  font:inherit;font-size:12px;cursor:pointer;border-radius:var(--u-raio-controle,8px);
  background:transparent;color:inherit;border:1px solid var(--u-linha,#37474f)}
.tema-toggle:hover{background:var(--u-hover,#263238)}
.tema-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:820px){.layout{flex-direction:column}.sidebar{width:100%}}