/*
 * Corpus — design system próprio (inspirado em refs editoriais "warm dark").
 * Self-contained: tokens + base + componentes. Sem Tailwind/daisyUI. Fonts self-hosted.
 * Dark é o padrão (:root); claro em [data-theme="light"]. Acento âmbar; display serifada.
 */

/* ============================ Fonts (self-hosted) ============================ */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('../fonts/fraunces.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('../fonts/inter-tight.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('../fonts/geist-mono.woff2') format('woff2');
}

/* ============================ Tokens ============================ */
:root {
  /* neutros (escuro) */
  --bg-base:#16140F; --bg-surface:#1F1C15; --bg-surface-2:#28241B; --bg-inset:#110F0B;
  --line:#3A352A; --line-strong:#524B3B;
  --text-hi:#F4EFE3; --text-mid:#B8AF9C; --text-low:#7E7766;
  /* acento */
  --accent:#D98A3D; --accent-hover:#E8A155; --accent-press:#BE7430;
  --accent-soft:#3A2A18; --accent-ring:rgba(217,138,61,.35);
  --on-accent:#1A140C;
  /* semântica */
  --pos:#5BA678; --pos-soft:#1B2A20; --warn:#D9A93D; --warn-soft:#2E2613;
  --neg:#C7563E; --neg-soft:#2C1813;
  /* espaçamento (escala 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  /* raio */
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  /* elevação */
  --e1:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -16px rgba(0,0,0,.6);
  --e2:0 16px 40px -20px rgba(0,0,0,.7);
  --e3:0 32px 80px -32px rgba(0,0,0,.8);
  /* tipografia */
  --font-display:'Fraunces',Georgia,serif;
  --font-ui:'Inter Tight',system-ui,-apple-system,sans-serif;
  --font-num:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  --t-hero:54px; --t-display:34px; --t-h1:26px; --t-h2:20px;
  --t-body:15px; --t-label:13px; --t-caption:11.5px;
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --dur-fast:160ms; --dur-mid:280ms;
  /* layout */
  --sidebar-w:248px; --rail-w:76px; --topbar-h:64px; --content-max:1180px;
  color-scheme:dark;
}
[data-theme="light"] {
  --bg-base:#F5F1E8; --bg-surface:#FFFDF8; --bg-surface-2:#FFFFFF; --bg-inset:#EEE8DA;
  --line:#E0D8C6; --line-strong:#C9BFA8;
  --text-hi:#211D15; --text-mid:#6B6353; --text-low:#9A9180;
  --accent:#B5701F; --accent-hover:#C9821F; --accent-press:#985C16;
  --accent-soft:#F0E4CF; --accent-ring:rgba(181,112,31,.30); --on-accent:#FFFDF8;
  --pos:#3D8159; --pos-soft:#E4F0E7; --warn:#B58A1F; --warn-soft:#F3EAD0;
  --neg:#B23E2A; --neg-soft:#F6E2DC;
  --e1:0 1px 2px rgba(33,29,21,.04), 0 8px 24px -16px rgba(33,29,21,.18);
  --e2:0 16px 40px -20px rgba(33,29,21,.20);
  --e3:0 32px 80px -32px rgba(33,29,21,.24);
  color-scheme:light;
}

/* ============================ Base ============================ */
*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg-base); color: var(--text-hi);
  font-family: var(--font-ui); font-size: var(--t-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent-soft); color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================ Tipografia ============================ */
.t-hero    { font-family:var(--font-display); font-weight:900; font-size:var(--t-hero); line-height:1.0; letter-spacing:-.01em; }
.t-display { font-family:var(--font-display); font-weight:800; font-size:var(--t-display); line-height:1.05; letter-spacing:-.01em; }
.t-h1      { font-family:var(--font-display); font-weight:600; font-size:var(--t-h1); line-height:1.15; }
.t-h2      { font-family:var(--font-ui); font-weight:600; font-size:var(--t-h2); line-height:1.25; }
.eyebrow   { font-size:var(--t-caption); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-low); }
.muted     { color:var(--text-mid); }
.mono      { font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ============================ Helpers de layout ============================ */
.row { display:flex; align-items:center; gap:var(--sp-3); }
.col { display:flex; flex-direction:column; gap:var(--sp-3); }
.between { justify-content:space-between; }
.wrap { flex-wrap:wrap; }
.grow { flex:1; min-width:0; }
.right { text-align:right; }
.ml-auto { margin-left:auto; }
/* .hide-sm: default visível; escondido no mobile via @media abaixo (sem regra base). */

/* ============================ Utilitários ============================ */
/* Substituem os antigos style="" inline dos templates — reusam os tokens do design system. */
/* margens (escala --sp-N) */
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)} .mt-8{margin-top:var(--sp-8)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.mb-7{margin-bottom:var(--sp-7)} .mb-8{margin-bottom:var(--sp-8)}
/* gaps (override do gap default de .row/.col) */
.gap-0{gap:0} .gap-1{gap:var(--sp-1)} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)} .gap-6{gap:var(--sp-6)}
/* texto */
.text-caption{font-size:var(--t-caption)} .text-label{font-size:var(--t-label)}
.text-hi{color:var(--text-hi)} .text-neg{color:var(--neg)} .text-accent{color:var(--accent)}
.text-center{text-align:center} .fw-600{font-weight:600}
.truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* flex / dimensões / visibilidade */
.min-w-0{min-width:0} .flex-none{flex:0 0 auto} .justify-end{justify-content:flex-end}
.w-auto{width:auto} .w-narrow{width:120px} .is-hidden{display:none !important}
/* intro de página (parágrafo .muted sob o título): normaliza a medida de leitura */
.lead{margin-top:var(--sp-2); max-width:70ch}

/* ============================ App shell ============================ */
.app {
  display:grid; grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main"; height:100%;
  transition: grid-template-columns var(--dur-mid) var(--ease);
}
.sidebar {
  grid-area:sidebar; background:var(--bg-surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:var(--sp-4) var(--sp-3); gap:var(--sp-2);
  overflow:hidden; transition: transform var(--dur-mid) var(--ease);
}
/* O hamburger é o toggle da sidebar em TODAS as larguras (vence `.btn` por especificidade). */
.topbar .hamburger { display:inline-flex; }
.brand { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); }
.brand__mark { width:34px; height:34px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; flex:0 0 auto; }
.brand__mark--sm { width:30px; height:30px; }
.brand__mark--lg { width:38px; height:38px; }
.brand__name { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text-hi); letter-spacing:-.01em; }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:var(--sp-3); height:44px; padding:0 var(--sp-3);
  border-radius:var(--r-sm); color:var(--text-mid); font-size:var(--t-label); font-weight:500;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item:hover { background:var(--bg-surface-2); color:var(--text-hi); }
.nav-item--active { background:var(--accent-soft); color:var(--accent); }
.nav-item svg { flex:0 0 auto; }
/* <button> que se comporta como nav-item (ex.: Sair no rodapé da sidebar) */
.nav-item--button { width:100%; background:none; border:none; cursor:pointer; text-align:left; color:var(--neg); }
.sidebar__foot { margin-top:auto; }

.topbar {
  grid-area:topbar; display:flex; align-items:center; gap:var(--sp-4);
  padding:0 var(--sp-5); background:var(--bg-base); border-bottom:1px solid var(--line);
}
.topbar__dir { margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); }

.main { grid-area:main; overflow:auto; }
.main__inner { max-width:var(--content-max); margin:0 auto; padding:var(--sp-6) var(--sp-6) var(--sp-8); }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-6); }

.scrim { display:none; }

/* entrada de página */
@keyframes c-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.stagger > * { animation: c-in 320ms var(--ease) both; }
.stagger > *:nth-child(1){animation-delay:0ms}.stagger > *:nth-child(2){animation-delay:50ms}
.stagger > *:nth-child(3){animation-delay:100ms}.stagger > *:nth-child(4){animation-delay:150ms}
.stagger > *:nth-child(5){animation-delay:200ms}.stagger > *:nth-child(6){animation-delay:250ms}

/* ============================ Card ============================ */
.card { background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--e1); padding:var(--sp-5); }
.card--pad-sm { padding:var(--sp-4); }
.card--interactive { cursor:pointer; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); display:block; }
.card--interactive:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--e2); }
.card__head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.card--danger { border-color:var(--neg); }
/* grade responsiva de cards (ex.: dashboard: assuntos + filas lado a lado) */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--sp-4); }

/* ============================ Stats ============================ */
/* Cada métrica é um "tile" sutil (fundo inset + hairline + raio), valor e rótulo CENTRADOS.
 * flex:1 1 auto + min-width preenchem a faixa e quebram sem borda solta (robusto no rail/mobile). */
.stats { display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.stats > * {
  flex:1 1 auto; min-width:116px; text-align:center;
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--r-md);
}
.stat__num { font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:600; font-size:26px; line-height:1.1; color:var(--text-hi); }
.stat__num--accent { color:var(--accent); }
.stat__label { font-size:var(--t-caption); letter-spacing:.06em; text-transform:uppercase; color:var(--text-low); margin-top:2px; }
.stat__den { font-size:16px; } /* denominador "/N" dentro do .stat__num */

/* ============================ Botões ============================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:40px; min-width:40px; padding:0 var(--sp-4); border-radius:var(--r-sm); border:1px solid transparent;
  font-family:var(--font-ui); font-size:var(--t-label); font-weight:600; cursor:pointer; user-select:none;
  white-space:nowrap; background:transparent; color:var(--text-hi);
  transition: transform 80ms var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn--lg { height:48px; padding:0 var(--sp-5); width:100%; }
.btn--sm { height:34px; padding:0 var(--sp-3); }
.btn--primary { background:var(--accent); color:var(--on-accent); }
.btn--primary:hover:not(:disabled) { background:var(--accent-hover); }
.btn--primary:active { background:var(--accent-press); }
.btn--secondary { border-color:var(--line-strong); color:var(--text-hi); }
.btn--secondary:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.btn--ghost { color:var(--text-mid); }
.btn--ghost:hover:not(:disabled) { color:var(--text-hi); background:var(--bg-surface-2); }
.btn--danger { border-color:var(--neg); color:var(--neg); }
.btn--danger:hover:not(:disabled) { background:var(--neg-soft); }
.btn--icon { padding:0; width:40px; height:40px; }

/* ============================ Campos / inputs ============================ */
.field { display:flex; flex-direction:column; gap:var(--sp-2); }
.field__label { font-size:var(--t-label); font-weight:500; color:var(--text-mid); }
.input, .select {
  height:44px; padding:0 var(--sp-4); width:100%;
  background:var(--bg-inset); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--text-hi); font-family:var(--font-ui); font-size:var(--t-body);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder { color:var(--text-low); }
.input:focus, .select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.input--sm, .select--sm { height:38px; font-size:var(--t-label); }
.input--mono { font-family:var(--font-num); }
/* input com ícone à esquerda */
.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap > svg { position:absolute; left:var(--sp-4); color:var(--text-low); pointer-events:none; }
.input-wrap .input { padding-left:calc(var(--sp-4) + 1.6em); }
.checkbox { width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }

/* ============================ Chip / badge ============================ */
.chip { display:inline-flex; align-items:center; gap:var(--sp-1); padding:3px var(--sp-3); border-radius:999px;
  font-size:var(--t-caption); font-weight:600; letter-spacing:.02em; background:var(--accent-soft); color:var(--accent); }
.chip--neutral { background:var(--bg-surface-2); color:var(--text-mid); }
.chip--pos { background:var(--pos-soft); color:var(--pos); }
.chip--warn { background:var(--warn-soft); color:var(--warn); }
.chip--neg { background:var(--neg-soft); color:var(--neg); }
.chip--outline { background:transparent; border:1px solid var(--line-strong); color:var(--text-mid); }

/* ============================ Alert ============================ */
.alert { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  font-size:var(--t-label); border:1px solid var(--line); }
.alert--error { background:var(--neg-soft); border-color:var(--neg); color:var(--neg); }
.alert--success { background:var(--pos-soft); border-color:var(--pos); color:var(--pos); }
.alert--warn { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }

/* ============================ Tabela ============================ */
.table-wrap { border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-surface); overflow:auto; max-height:72vh; }
.table-wrap--flat { max-height:none; } /* sem teto de altura/scroll interno (listas curtas) */
.table { width:100%; border-collapse:collapse; }
.table thead th {
  position:sticky; top:0; z-index:1; background:var(--bg-surface);
  text-align:left; padding:var(--sp-3) var(--sp-4);
  font-size:var(--t-caption); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-low);
  border-bottom:1px solid var(--line);
}
.table tbody td { height:52px; padding:0 var(--sp-4); border-bottom:1px solid var(--line); color:var(--text-hi); }
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover td { background:var(--bg-surface-2); }
/* Alinhamento por coluna: escopado em .table (0-2-0) p/ vencer `.table thead th{text-align:left}`
 * (0-1-2) — assim th E td da MESMA coluna ficam consistentes. */
.table .col-num    { text-align:right; }
.table .col-center { text-align:center; }
.col-check         { width:40px; } /* coluna do checkbox (largura fixa) */
.col-key           { width:150px; } /* coluna "rótulo" em tabelas chave/valor (detalhe do job) */
.cell-trunc        { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* descrição longa em célula */
.cell-cta          { text-align:center; padding:var(--sp-3); } /* célula spanning de ação (ex.: "carregar mais") */

/* ============================ Filtros / barra de ação ============================ */
.form-search { max-width:560px; } /* form de busca por tópico (index) */
.filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-4); }
.actionbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  background:var(--bg-surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); box-shadow:var(--e1); }

/* ============================ Empty state ============================ */
.empty { display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); padding:var(--sp-8) var(--sp-5); text-align:center; color:var(--text-mid); }
.empty--md { padding:var(--sp-6); }
.empty--sm { padding:var(--sp-6) var(--sp-4); }
.empty > svg { color:var(--text-low); }
.empty__title { font-family:var(--font-display); font-size:var(--t-h2); color:var(--text-hi); }

/* ============================ Toasts ============================ */
.toasts { position:fixed; top:var(--sp-5); right:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); z-index:80; }
.toast { display:flex; align-items:center; gap:var(--sp-3); background:var(--bg-surface-2); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--r-md); box-shadow:var(--e2); padding:var(--sp-3) var(--sp-4);
  color:var(--text-hi); font-size:var(--t-label); min-width:240px; animation:c-toast 240ms var(--ease); }
.toast--error { border-left-color:var(--neg); }
.toast--success { border-left-color:var(--pos); }
@keyframes c-toast { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

/* ============================ HTMX loading + spinner ============================ */
/* Spinner avulso (chips "executando/sincronizando/enviando"): sempre visível e girando. */
.spinner { width:1em; height:1em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  display:inline-block; vertical-align:-.125em; animation:c-spin .7s linear infinite; }
/* Indicador HTMX (spinner DENTRO do botão): oculto no idle (sem "fantasma" reservando espaço antes do
 * rótulo) e revelado — girando — só enquanto o pedido está em curso. Declarado DEPOIS de `.spinner`
 * para vencer o `display:inline-block` por ordem de origem; `.htmx-request` reativa durante o pedido. */
.htmx-indicator { display:none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display:inline-block; }
@keyframes c-spin { to { transform:rotate(360deg); } }
/* Health-check: durante o reteste (#health-checks com .htmx-request) repõe o "checando…" nos itens. */
#health-checks .health-loading { display:none; }
#health-checks.htmx-request .health-loading { display:block; }
#health-checks.htmx-request .health-result { display:none; }

/* ============================ Dropdown (menu do usuário, <details>) ============================ */
.menu { position:relative; }
.menu > summary { list-style:none; cursor:pointer; }
.menu > summary::-webkit-details-marker { display:none; }
.menu__panel { position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:var(--bg-surface-2);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--e2); padding:var(--sp-2); z-index:60; }
.menu__item { display:flex; align-items:center; gap:var(--sp-2); width:100%; height:40px; padding:0 var(--sp-3);
  border-radius:var(--r-sm); color:var(--text-mid); font-size:var(--t-label); background:transparent; border:none; cursor:pointer; text-align:left; }
.menu__item:hover { background:var(--bg-surface); color:var(--text-hi); }
.menu__head { padding:var(--sp-2) var(--sp-3); color:var(--text-low); font-size:var(--t-caption); letter-spacing:.06em; text-transform:uppercase; }
.menu__sep { height:1px; background:var(--line); margin:var(--sp-2) 0; }
.avatar { width:34px; height:34px; border-radius:999px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-weight:700; font-size:14px; }
.avatar--sm { width:30px; height:30px; font-size:12px; }

/* ============================ Breadcrumb ============================ */
.crumbs { display:flex; align-items:center; gap:var(--sp-2); color:var(--text-low); font-size:var(--t-label); margin-bottom:var(--sp-2); }
.crumbs a { color:var(--text-mid); }
.crumbs a:hover { color:var(--accent); }
.crumbs svg { flex:0 0 auto; color:var(--text-low); } /* separador (chevron) */

/* ============================ Galeria de tópicos ============================ */
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--sp-4); }

/* ============================ Bloco de código (<pre>) ============================ */
/* payload do job + resultado no monitor (queues.js). Self-contained (já é mono). */
.codeblock { font-family:var(--font-num); background:var(--bg-inset); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-3); overflow:auto; font-size:var(--t-caption);
  line-height:1.5; white-space:pre-wrap; word-break:break-word; margin:0; }

/* ============================ Lista de health-checks ============================ */
.health-list { display:flex; flex-direction:column; }
.health-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
.health-row__detail { font-size:var(--t-caption); max-width:48ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

/* ============================ Tela de auth (login) ============================ */
.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--sp-5); background:
  radial-gradient(1200px 600px at 50% -10%, var(--accent-soft) 0%, transparent 55%), var(--bg-base); }
.auth__theme { position:fixed; top:var(--sp-5); right:var(--sp-5); }
.auth-card { width:100%; max-width:26rem; text-align:center; padding:var(--sp-7) var(--sp-6); }
.auth-badge { width:64px; height:64px; margin:0 auto var(--sp-4); display:grid; place-items:center;
  border-radius:var(--r-lg); background:var(--accent-soft); color:var(--accent); }
.auth-title { font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--text-hi); margin:var(--sp-2) 0; }
.auth-sub { color:var(--text-mid); margin-bottom:var(--sp-5); }
.auth-form { display:flex; flex-direction:column; gap:var(--sp-4); text-align:left; }
.auth-foot { margin-top:var(--sp-5); color:var(--text-low); font-size:var(--t-caption); }

/* ============================ Admin: permissões ============================ */
.perm-fieldset { border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); }
.perm-fieldset > legend { padding:0 var(--sp-2); font-size:var(--t-label); font-weight:600; color:var(--text-hi); }
.radio-row { display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.radio-opt { display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--text-mid); font-size:var(--t-label); cursor:pointer; }
.radio-opt input { accent-color:var(--accent); }
.topic-pills { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); }
.topic-pill { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--line); border-radius:999px; font-size:var(--t-caption); color:var(--text-mid); cursor:pointer; }
.toggle { width:42px; height:24px; appearance:none; -webkit-appearance:none; background:var(--bg-inset); border:1px solid var(--line-strong);
  border-radius:999px; position:relative; cursor:pointer; transition:background var(--dur-fast) var(--ease); flex:0 0 auto; }
.toggle::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:999px; background:var(--text-mid); transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.toggle:checked { background:var(--accent-soft); border-color:var(--accent); }
.toggle:checked::after { transform:translateX(18px); background:var(--accent); }

/* grid de 2 colunas (admin: coluna estreita + conteúdo) */
.grid-2 { display:grid; grid-template-columns:1fr; gap:var(--sp-5); }
@media (min-width:900px) { .grid-2 { grid-template-columns:340px 1fr; } }
/* variante "form largo" (importação): a coluna principal respira, o painel ocupa o resto. */
@media (min-width:900px) { .grid-2--wide { grid-template-columns:minmax(420px, 480px) 1fr; } }

/* ============================ Progresso + "ao vivo" (monitor de tarefas) ============================ */
.progress { height:6px; background:var(--bg-inset); border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.progress__bar { height:100%; background:var(--accent); border-radius:999px; transition:width var(--dur-mid) var(--ease); }
.progress__meta { margin-top:6px; font-size:var(--t-caption); } /* "saved / total (pct%)" sob a barra */
.live-dot { width:8px; height:8px; border-radius:999px; background:var(--text-low); display:inline-block; flex:0 0 auto; }
.live-dot--on { background:var(--pos); animation:c-pulse 1.8s var(--ease) infinite; }
@keyframes c-pulse {
  0% { box-shadow:0 0 0 0 rgba(91,166,120,.5); }
  70% { box-shadow:0 0 0 6px rgba(91,166,120,0); }
  100% { box-shadow:0 0 0 0 rgba(91,166,120,0); }
}
/* card de tarefa em execução (destaque sutil) */
.runjob { border-left:3px solid var(--accent); }

/* ============================ Responsivo ============================ */
/* Desktop: o hamburger COLAPSA a sidebar num "rail" enxuto (ícones-only) — não some mais.
 * A sidebar fica no lugar (sem translateX); o grid encolhe a coluna p/ --rail-w. Os rótulos são
 * CLIPADOS (não display:none) p/ preservar o nome acessível dos links; o tooltip vem do `title`. */
@media (min-width:901px) {
  .nav-toggle:checked ~ .app { grid-template-columns: var(--rail-w) 1fr; }
  /* gap:0 também na brand — senão o gap até o nome (clipado) desloca a logo do centro. */
  .nav-toggle:checked ~ .app .brand { justify-content:center; gap:0; padding-left:0; padding-right:0; }
  .nav-toggle:checked ~ .app .brand__name,
  .nav-toggle:checked ~ .app .nav-item__label {
    width:0; overflow:hidden; opacity:0; pointer-events:none; white-space:nowrap;
  }
  .nav-toggle:checked ~ .app .nav-item { justify-content:center; gap:0; padding:0; }
}

/* Mobile: sidebar off-canvas; o hamburger abre (entra deslizando) + scrim escurece o fundo. */
@media (max-width:900px) {
  .app { grid-template-columns:1fr; grid-template-rows:var(--topbar-h) 1fr; grid-template-areas:"topbar" "main"; }
  .sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:70; transform:translateX(-100%); box-shadow:var(--e3); }
  .nav-toggle:checked ~ .app .sidebar { transform:translateX(0); }
  .nav-toggle:checked ~ .app .scrim { display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60; }
  .hide-sm { display:none !important; }
  .main__inner { padding:var(--sp-5) var(--sp-4) var(--sp-7); }
  .page-head { flex-direction:column; align-items:flex-start; }
}

/* ============================ Documentação (guia do dataset) ============================ */
.doc { max-width:78ch; }
.doc h2 { font-family:var(--font-ui); font-weight:600; font-size:var(--t-h2); color:var(--text-hi);
  margin:var(--sp-7) 0 var(--sp-3); scroll-margin-top:var(--sp-6); }
.doc h3 { font-family:var(--font-ui); font-weight:600; font-size:var(--t-body); color:var(--text-hi);
  margin:var(--sp-5) 0 var(--sp-2); scroll-margin-top:var(--sp-6); }
.doc p, .doc li { color:var(--text-mid); }
.doc p { margin:var(--sp-3) 0; }
.doc ul, .doc ol { margin:var(--sp-3) 0; padding-left:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); }
.doc code { font-family:var(--font-num); font-size:.92em; background:var(--bg-inset);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 5px; color:var(--text-hi); }
.doc .codeblock code { background:none; border:none; padding:0; }
.doc__toc { columns:2; column-gap:var(--sp-6); }
.doc__toc a { display:block; padding:2px 0; color:var(--text-mid); font-size:var(--t-label); }
.doc__toc a:hover { color:var(--accent); }
.doc .table td:first-child { white-space:nowrap; }

/* ============================ Impressão / Salvar em PDF ============================ */
@media print {
  /* tinta preta sobre branco, independente do tema da tela */
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --bg:#fff; --bg-surface:#fff; --bg-surface-2:#fff; --bg-inset:#f6f6f6;
    --text-hi:#000; --text-mid:#1a1a1a; --text-low:#555;
    --line:#bbb; --line-strong:#888; --accent:#000; --e1:none; --e2:none;
  }
  html, body { background:#fff !important; color:#000 !important; }
  /* fora do papel: navegação, ações e tudo que só existe para clicar */
  .sidebar, .topbar, .toasts, .scrim, .nav-toggle, .no-print,
  [data-action="print"], .btn { display:none !important; }
  .app { display:block !important; }
  .main, .main__inner { margin:0 !important; padding:0 !important; max-width:none !important; }
  .doc { max-width:none; }
  .card { border:1px solid #bbb !important; box-shadow:none !important; break-inside:avoid; }
  .table-wrap { max-height:none !important; overflow:visible !important; border-color:#bbb !important; }
  .table thead th { position:static !important; background:#eee !important; }
  .table tr, .codeblock, .doc h2, .doc h3 { break-inside:avoid; }
  .doc h2, .doc h3 { break-after:avoid; }
  .codeblock { white-space:pre-wrap; word-break:break-word; }
  .doc__toc { columns:2; }
  /* o leitor do papel não tem como clicar: mostra o destino dos links externos */
  .doc a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.85em; color:#555; }
  @page { margin:16mm 14mm; }
}