/* manager/app/static/css/tema.css
   Identidade "mesa de triagem": aplicada SÓ no tema escuro
   (data-bs-theme="dark") -- o tema claro existente (âmbar/Inter)
   continua como está, sem mudança. Ver docs/superpowers/specs/ se um dia
   existir uma spec formal disso; por enquanto a fonte da verdade é o
   pedido do usuário (sessão 2026-09-24).

   Incluir DEPOIS do bootstrap.min.css e do bloco <style> de base.html. */

/* ── Fontes (self-hosted -- sem depender de fonts.googleapis.com em
   produção). Space Grotesk e JetBrains Mono são variable fonts: um
   arquivo por subset cobre a faixa de peso inteira (400-700), não
   precisa de um @font-face por peso. ────────────────────────────────── */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ── Tokens da mesa de triagem -- só existem quando o tema escuro está
   ativo. O tema claro (âmbar/Inter, já existente em base.html) fica
   intocado. Os componentes novos abaixo (.stamp, .toolbar, .stat-tile,
   tabela densa) usam essas MESMAS variáveis com nomes iguais também
   fora do bloco dark (ver seção "equivalentes claro" logo depois), pra
   não quebrar visualmente quando alguém estiver no tema claro -- não é
   a paleta exata pedida (essa é só pro escuro), é só pra esses
   componentes novos não ficarem com cores erradas/hardcoded no tema
   que não foi redesenhado agora. ─────────────────────────────────────── */
[data-bs-theme="dark"] {
  --ink: #0A0D12;
  --panel: #12161E;
  --panel-2: #171C26;
  --line: #242B38;
  --line-soft: #1C222E;
  --paper: #E7E9EE;
  --dim: #7C8494;
  --dimmer: #545C6D;
  --signal: #2FD9C4;
  --signal-dim: #1D8478;
  --ok: #3ECF8E;
  --danger: #F1595C;
  --warn: #E8A33D;
  --info: #8B93F2;

  color-scheme: dark;

  --bs-body-bg: var(--ink);
  --bs-body-color: var(--paper);
  --bs-body-font-family: var(--font-display);
  --bs-body-font-size: 14px;
  --bs-secondary-color: var(--dim);
  --bs-tertiary-color: var(--dimmer);
  --bs-border-color: var(--line);
  --bs-secondary-bg: var(--panel);
  --bs-tertiary-bg: var(--panel-2);
  --bs-primary: var(--signal);
  --bs-primary-rgb: 47, 217, 196;
  --bs-success: var(--ok);
  --bs-success-rgb: 62, 207, 142;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 241, 89, 92;
  --bs-warning: var(--warn);
  --bs-warning-rgb: 232, 163, 61;
  --bs-info: var(--info);
  --bs-info-rgb: 139, 147, 242;
  --bs-link-color: var(--signal);
  --bs-link-hover-color: var(--signal);
  --bs-border-radius: 5px;
  --bs-border-radius-lg: 10px;
  --bs-font-monospace: var(--font-mono);
}

/* Equivalentes pro tema claro -- mesmos NOMES de variável, valores que
   fazem sentido na paleta âmbar já existente (não é a spec da mesa de
   triagem, só evita `.stamp`/`.toolbar`/`.stat-tile` ficarem com cor
   hardcoded errada fora do tema escuro). */
:root:not([data-bs-theme="dark"]) {
  --panel: var(--bs-tertiary-bg, #F1ECE3);
  --panel-2: #E5DFD6;
  --line: var(--bs-border-color, #E5DFD6);
  --line-soft: #EFE9DF;
  --paper: var(--bs-body-color, #211D17);
  --dim: #7A7266;
  --dimmer: #9A9184;
  --signal: var(--pdv-primary, #D97706);
  --ok: #1E7E4F;
  --danger: #B3261E;
  --warn: #92600B;
  --info: #3949AB;
}

body[data-bs-theme="dark"], [data-bs-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
}
[data-bs-theme="dark"] a { text-decoration: none; }
[data-bs-theme="dark"] a:hover { text-decoration: underline; }
[data-bs-theme="dark"] :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
[data-bs-theme="dark"] .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
  background: var(--panel-2); border-color: var(--line); color: var(--paper); font-size: .88em;
}
[data-bs-theme="dark"] .btn-primary { background: var(--signal); border: none; color: #06211D; font-weight: 600; }
[data-bs-theme="dark"] .btn-danger { background: var(--danger); border: none; color: #2A0B0C; font-weight: 600; }
[data-bs-theme="dark"] .btn-secondary { background: var(--panel-2); border: 1px solid var(--line); color: var(--paper); }
[data-bs-theme="dark"] .btn:hover { filter: brightness(1.12); }
[data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .modal-overlay .modal-content {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
[data-bs-theme="dark"] .modal-backdrop.show { opacity: 1; background: rgba(6,8,12,.72); }
[data-bs-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--ink); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }

/* ── Componentes próprios (funcionam nos dois temas, usando as
   variáveis acima) ──────────────────────────────────────────────────── */

/* carimbos de status: borda da cor + fundo 8% + maiúsculas mono (NUNCA
   badge sólido) */
.stamp {
  display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: .74em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; border: 1px solid currentColor; font-family: var(--font-mono);
}
.stamp.ok { color: var(--ok); background: rgba(62,207,142,.08); }
.stamp.danger { color: var(--danger); background: rgba(241,89,92,.08); transform: rotate(-1deg); }
.stamp.warn { color: var(--warn); background: rgba(232,163,61,.08); }
.stamp.info { color: var(--info); background: rgba(139,147,242,.08); }
.stamp.muted { color: var(--dimmer); border-color: var(--line); }

/* tabelas densas */
.tabela-densa { width: 100%; border-collapse: collapse; font-size: .88em; }
.tabela-densa th, .tabela-densa td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft);
}
.tabela-densa th {
  color: var(--dim); font-weight: 600; font-size: .76em; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
[data-bs-theme="dark"] .tabela-densa th { position: sticky; top: 0; background: var(--ink); z-index: 1; }
.tabela-densa tbody tr:hover td { background: var(--panel); }
.tabela-densa tr.linha-clicavel { cursor: pointer; }
.tabela-densa tr.linha-clicavel:hover td { background: var(--panel-2); }
.td-mono, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabela-densa td.td-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* barra de filtros acima das tabelas */
.toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.toolbar label { font-size: .74em; color: var(--dimmer); text-transform: uppercase; letter-spacing: .05em; }

/* números grandes (KPIs) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.stat-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.stat-tile .n { font-family: var(--font-mono); font-size: 1.7em; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-tile .l { color: var(--dim); font-size: .74em; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* blocos de texto bruto / log */
pre.eml {
  white-space: pre-wrap; word-break: break-word; background: #05070A; padding: 14px; border-radius: 8px;
  max-height: 520px; overflow: auto; font-size: .82em; font-family: var(--font-mono); border: 1px solid var(--line);
}

/* spinner inline e paginação */
.spinner-dot {
  width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--signal); animation: girar .7s linear infinite; display: inline-block;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner-dot { animation: none; } }
.pager a { padding: 4px 9px; border-radius: 4px; color: var(--dim); font-family: var(--font-mono); font-size: .85em; }
.pager a.current { color: var(--paper); background: var(--panel-2); font-weight: 700; }

.empty-state { color: var(--dim); padding: 40px 20px; text-align: center; font-size: .9em; }

/* ── Faixa "telex" no topo (item 4.1) ────────────────────────────────── */
.telex {
  background: #05070A; border-bottom: 1px solid var(--line, #E5DFD6);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--dim);
  padding: 7px 20px; display: flex; gap: 22px; white-space: nowrap; overflow-x: auto; align-items: center;
}
:root:not([data-bs-theme="dark"]) .telex { background: #EFE9DF; }
.telex b { color: var(--paper); font-weight: 600; }
.telex .ponto-vivo {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok); display: inline-block;
  box-shadow: 0 0 6px var(--ok); animation: telex-pulso 2.4s infinite; flex: none;
}
@media (prefers-reduced-motion: reduce) { .telex .ponto-vivo { animation: none; } }
@keyframes telex-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.telex .contador.ok { color: var(--ok); }
.telex .contador.danger { color: var(--danger); }
.telex .contador.warn { color: var(--warn); }
.telex .contador.info { color: var(--info); }
.telex .zoom { margin-left: auto; display: flex; gap: 4px; flex: none; }
.telex .zoom button {
  width: 20px; height: 20px; border: 1px solid var(--line); background: transparent; color: var(--dim);
  border-radius: 3px; font-family: var(--font-mono); font-size: 11px; line-height: 1; cursor: pointer;
}
.telex .zoom button:hover { color: var(--paper); border-color: var(--signal); }

/* ── Sidebar fixa à esquerda (item 4.2) ──────────────────────────────── */
.app-shell { display: flex; min-height: 0; flex: 1; }
.app-sidebar {
  width: 208px; flex: none; background: var(--panel); border-right: 1px solid var(--line);
  padding: 22px 0; display: flex; flex-direction: column;
}
.app-sidebar .marca {
  display: flex; align-items: center; gap: .5rem; padding: 0 20px 18px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
}
.app-sidebar .marca .luz {
  width: 9px; height: 9px; background: var(--signal); box-shadow: 0 0 8px var(--signal); flex: none; border-radius: 1px;
}
.app-sidebar nav { display: flex; flex-direction: column; flex: 1; }
.app-sidebar nav a {
  padding: 9px 20px; color: var(--dim); font-size: .92em; border-left: 2px solid transparent;
  text-decoration: none; display: block;
}
.app-sidebar nav a:hover { background: var(--panel-2); color: var(--paper); }
.app-sidebar nav a.ativo { background: var(--panel-2); color: var(--paper); font-weight: 600; border-left-color: var(--signal); }
.app-sidebar .usuario {
  padding: 14px 20px 0; font-family: var(--font-mono); font-size: .8em; border-top: 1px solid var(--line); margin-top: 8px;
}
.app-sidebar .usuario .papel { color: var(--dimmer); }
.app-main { flex: 1; min-width: 0; padding: 26px 32px; overflow-x: auto; }
.app-main h1 { font-size: 1.4em; font-weight: 700; letter-spacing: -.01em; font-family: var(--font-display); }
.subtitulo { color: var(--dim); margin-top: -.5rem; margin-bottom: 1rem; }

/* ── Fila de terminais novos (mobile-first, item 2 da spec) ─────────── */
.topo-novos {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line, #E5DFD6);
}
.fila-novos { display: flex; flex-direction: column; gap: 12px; padding: 16px; max-width: 480px; margin: 0 auto; }
.cartao-novo {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px;
}
.cartao-novo-mac { font-size: 1.1em; font-weight: 700; color: var(--paper); margin-bottom: 8px; }
.cartao-novo .form-control, .cartao-novo .form-select { font-size: 1rem; min-height: 44px; }
.cartao-novo .btn-lg { padding: .75rem 1rem; }

/* ── Mensagens de retorno (flash) ─────────────────────────────────────── */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }
.flash.ok { background: rgba(62,207,142,.1); color: var(--ok); border: 1px solid var(--ok); }
.flash.erro { background: rgba(241,89,92,.1); color: var(--danger); border: 1px solid var(--danger); }