/* Identidade FBLog — token layer ÚNICO (north-star .rct). Archivo + Bricolage Grotesque.
   Carregado pelo base.html p/ TODAS as telas; o `.rct` herda daqui (não redeclara). */
:root {
  /* marca / teal */
  --teal-deep: #1A6875; --teal: #6DA3AD; --teal-bright: #34C5A6;
  --teal-soft: #E9F2F3; --teal-line: #CFE0E2;
  /* `--teal-deep` acumulava DOIS papéis: fundo de botão (tem que continuar escuro nos
     dois temas, com texto branco em cima) e cor de TEXTO/acento (tem que CLAREAR no
     escuro, senão é teal escuro sobre fundo escuro — títulos h2, links de filtro e o
     botão-fantasma ficavam quase invisíveis). O papel de texto ganhou token próprio. */
  --teal-text: #1A6875;
  /* neutros */
  --ink: #222829; --gray: #6f7376; --muted: #6f7376; /* --muted = alias legado de --gray */
  --line: #E5E8E9; --bg: #f4f6f7; --surface: #ffffff;
  /* elevação / raio */
  --r: 11px; --shadow: 0 1px 2px rgba(18,78,88,.05), 0 12px 28px -16px rgba(18,78,88,.28);
  /* semânticos (AA) + tints */
  --ok: #1E8A6E; --ok-bg: #e3f4ea; --warn: #B9791A; --warn-bg: #fbf0dd;
  --danger: #B5462F; --danger-bg: #fbe6e6; --err: #B5462F; --err-bg: #fbe6e6;
  /* status (Saúde da API) */
  --status-online: #1E8A6E; --status-offline: #B5462F; --status-auth: #B9791A; --status-unknown: #6f7376;
  /* Fundos de destaque ("washes"). Antes cada template escrevia o hex claro na mão —
     ~200 deles, e no tema escuro viravam faixa clara com texto claro em cima (a linha
     FECHADA da Operação Start, ilegível). Aqui viram UM par por significado, e o texto
     continua saindo de var(--ink), que já vira com o tema. */
  --wash-warn: #fff9d6; --wash-ok: #e3f3e6; --wash-bad: #fdeaea;
  --wash-info: #dcecef; --wash-mute: #f3f5f5; --wash-cream: #faf7f0;
  /* Todo wash tem um PAR de texto. Os chips da casa (fase, status, pontual/atraso,
     parceiro/renegociar…) são tinta clara + texto escuro do MESMO matiz: virar só o
     fundo deixaria escuro sobre escuro. O par vira junto. */
  --ink-ok: #256b33; --ink-warn: #8a5a00; --ink-bad: #a33d28;
  --ink-info: #1a6875; --ink-mute: #5a5142; --ink-cream: #8a5f00;
  /* rampa FM (Diamante→Carvão + Frota) — ÚNICA fonte de cor */
  --cat-diamante: #1a9c6e; --cat-ouro: #7bbf3f; --cat-prata: #e7b94e;
  --cat-bronze: #e08a3c; --cat-carvao: #7a3b2e; --cat-frota: #9aa6ab;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.5;
}
h1, h2, h3, .brand { font-family: "Bricolage Grotesque", "Archivo", sans-serif; }
h1 { font-size: 24px; margin: 18px 0 14px; }
h1 small, h2 small { font-weight: 400; color: var(--muted); font-size: 14px; }
h2 { font-size: 18px; color:var(--teal-text); margin: 26px 0 10px; }
a { color:var(--teal-text); }

.topbar {
  background: linear-gradient(95deg, var(--teal-deep), #14525c);
  color: #fff; display: flex; align-items: center; gap: 24px;
  padding: 0 22px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; padding: 10px 0; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-sub { color: #d7eef0; font-weight: 700; font-size: 14px; letter-spacing: .01em; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  color: #d7eef0; text-decoration: none; padding: 14px 12px;
  border-bottom: 3px solid transparent; font-weight: 600;
}
.topbar nav a:hover { color: #fff; }
.topbar nav a.on { color: #fff; border-bottom-color: var(--teal); }

main { max-width: 1100px; margin: 0 auto; padding: 8px 22px 48px; }

/* Barra de contexto global (v0.40) — Período (De/Até) que segue o usuário entre as telas (sessão) */
.ctxbar { background: var(--teal-soft); border-bottom: 1px solid var(--teal-line); }
.ctxform { max-width: 1100px; margin: 0 auto; padding: 8px 22px; display: flex; align-items: center;
  gap: 9px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.ctxform .ctxlbl { font-weight: 700; color:var(--teal-text); }
.ctxform .ctxlbl small { font-weight: 400; color: var(--muted); }
.ctxform input[type=date] { padding: 5px 8px; border: 1px solid var(--teal-line); border-radius: 6px; font: inherit; background: var(--surface); }
.ctxform button { padding: 6px 14px; border: 0; border-radius: 6px; background: var(--teal-deep); color: #fff; font-weight: 600; cursor: pointer; }
.ctxform .ctxfil { margin-left: auto; }
.ctxform .ctxfil strong { color: var(--ink); }

/* Breadcrumb (v0.39) — só nas telas de detalhe; volta ao pai preservando o contexto (sessão) */
.breadcrumb { max-width: 1100px; margin: 10px auto 0; padding: 0 22px; font-size: 12.5px; color: var(--muted); }
.breadcrumb a { color:var(--teal-text); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 7px; color: var(--line); }

.periodo { display: flex; gap: 14px; align-items: end; margin: 16px 0 4px; flex-wrap: wrap; }
.periodo label { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.periodo input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.periodo button {
  background: var(--teal-deep); color: #fff; border: 0; border-radius: 6px;
  padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer;
}

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.kpi span { display: block; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.kpi strong { display: block; font-size: 26px; margin-top: 6px; font-family: "Bricolage Grotesque", sans-serif; }
.kpi.accent { border-left: 4px solid var(--teal); }

table { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
/* v1.7.8 (diagnosticado AO VIVO no Chrome, print do Walter): o `overflow:hidden` acima
   (que arredonda os cantos) faz da própria <table> um container de rolagem — e isso
   ANULA o `position:sticky` do cabeçalho, porque o th passa a grudar na caixa da tabela
   (que não rola) em vez de no wrapper que rola. Dentro de `.tbl-wrap` (o padrão de tabela
   rolável da casa: Auditoria, Operação Start…) o overflow volta a `visible` — o wrapper
   já tem o próprio border-radius, então os cantos continuam arredondados. Vale p/ TODAS
   as telas com cabeçalho fixo, não só a que motivou o achado. */
.tbl-wrap > table { overflow: visible; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: var(--teal-soft); color:var(--teal-text); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .02em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
tr.total td { background: var(--wash-info); font-weight: 700; }

.badge { padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
/* swatch sólido (preenchimento de gráfico / legenda / seg) — lê o token único --cat-* */
.cat-Diamante { background: var(--cat-diamante); }
.cat-Ouro { background: var(--cat-ouro); } .cat-Prata { background: var(--cat-prata); }
.cat-Bronze { background: var(--cat-bronze); } .cat-Carvao { background: var(--cat-carvao); }
.cat-FrotaPropria { background: var(--cat-frota); }
/* variante badge (rótulo inline): tinta clara + texto na cor da banda, do MESMO hue */
.badge.cat-Diamante { background: #e3f3ec; color: #146b4b; }
.badge.cat-Ouro { background: #eef6e2; color: #4d6f1f; }
.badge.cat-Prata { background: #f7f0db; color: #7a5e12; }
.badge.cat-Bronze { background: #f7e9da; color: #8a4f17; }
.badge.cat-Carvao { background: #efe3df; color: #6b3326; }
.badge.cat-FrotaPropria { background: #eef1f3; color: #4a5b60; }

.pos { color: var(--ok); } .neg { color: var(--err); }
footer { text-align: center; color: var(--muted); font-size: 12px; padding: 22px; border-top: 1px solid var(--line); }
.hint { color: var(--muted); font-size: 12.5px; margin: 4px 0 0; }


/* ===== Tema ESCURO (v1.5.1 — pedido Walter). `data-theme="dark"` no <html>; toggle 🌓
   no rodapé da sidebar (localStorage; default claro). Os tokens viram; superfícies que
   os templates pintam de #fff fixo ganham override dirigido (dívida: migrar p/ var()). */
:root[data-theme="dark"] {
  --teal-soft: #12333a; --teal-line: #1d4a52; --teal-text: #7fc4d1;
  --ink: #e8e6df; --gray: #a39f95; --muted: #a39f95;
  --line: #31383b; --bg: #14181a; --surface: #1e2427;
  --ok-bg: #12362b; --warn-bg: #3a2f16; --danger-bg: #3d201c; --err-bg: #3d201c;
  --wash-warn: #3a2f16; --wash-ok: #12362b; --wash-bad: #3d201c;
  --wash-info: #12333a; --wash-mute: #23292c; --wash-cream: #22282a;
  --ink-ok: #7fd0a2; --ink-warn: #e0b96a; --ink-bad: #e8a08c;
  --ink-info: #7fc4d1; --ink-mute: #b7b1a4; --ink-cream: #d9b877;
  /* As semânticas fortes também servem de TEXTO (o "N/M CT-es com o dado", os deltas,
     os avisos). Nos valores do tema claro elas dão 3,7 / 4,3 / 2,9 sobre a superfície
     escura — abaixo de AA. Clareiam; o par de FUNDO (--ok-bg etc.) não muda. */
  --ok: #5fc9a6; --warn: #e0a94a; --danger: #e58a70; --err: #e58a70;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.6);
  /* `color-scheme` é o que faz o NAVEGADOR desenhar escuro o que é dele: o picker do
     input[type=date], a lista aberta do <select>, a barra de rolagem, o autofill. Sem
     isto o tema escuro para na borda do nosso CSS — foi o que o Walter viu. */
  color-scheme: dark;
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .appbar,
[data-theme="dark"] .card, [data-theme="dark"] .kpi, [data-theme="dark"] .painel,
[data-theme="dark"] .hcard, [data-theme="dark"] .filtros, [data-theme="dark"] .prov,
[data-theme="dark"] .snaps, [data-theme="dark"] .secoes, [data-theme="dark"] .wall,
[data-theme="dark"] .cli-box, [data-theme="dark"] .cli-pick > summary,
[data-theme="dark"] .tbl-wrap, [data-theme="dark"] table.fonte,
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background-color: var(--surface) !important; color: var(--ink); border-color: var(--line);
}
[data-theme="dark"] table.fonte th { color: var(--gray); border-color: var(--line); }
[data-theme="dark"] table.fonte td { border-color: var(--line); }
[data-theme="dark"] a { color: #7fc4d1; }
[data-theme="dark"] .hint, [data-theme="dark"] small { color: var(--gray); }
[data-theme="dark"] .ab-ctx input[type=date] { background: var(--surface); color: var(--ink); }
/* telas .apr definem os próprios tokens de superfície — viram junto */
[data-theme="dark"] .apr.viz-root {
  --surface-1: var(--surface); --ink: #e8e6df; --ink2: #a39f95;
}
[data-theme="dark"] .apr .painel, [data-theme="dark"] .apr .hcard {
  background: var(--surface) !important; border-color: var(--line);
}
[data-theme="dark"] .honesto { background: #2e2a1a !important; }
[data-theme="dark"] .og.custo, [data-theme="dark"] .tipo-b.fa { background: #3a2f16; }