/* =========================================================================
   Juros & Valuation — servidor de dados. CSS artesanal (sem build), a mesma
   base sóbria dos projetos irmãos: ferramenta de admin, não vitrine.
   Regra da casa: anexar ao FINAL; sem `style=` nas views (a CSP não tem
   'unsafe-inline' em style-src, de propósito).
   ========================================================================= */

:root {
  color-scheme: light;
  --c-bg: #f5f6f8;
  --c-surface: #ffffff;
  --c-surface-2: #eef0f3;
  --c-text: #1c1f23;
  --c-text-muted: #666e78;
  --c-border: #d3d8de;
  --c-primary: #0f6e56;
  --c-primary-hover: #0b5744;
  --c-primary-contrast: #ffffff;
  --c-primary-soft: #dff0ea;     /* fundo do botão ativo dos seletores */
  --c-primary-text: #0b5744;     /* texto pequeno sobre o soft (o primary cru não passa AA ali) */
  --c-success: #3f7d4f;
  --c-danger: #a63232;
  --c-warning: #96702a;
  --radius-card: 10px;
  --radius-control: 8px;
  --largura-conteudo: 1240px;    /* nível 3 de App\Support\ContentWidth; os seis níveis no fim do arquivo */
}

/* ---------- Tema escuro (azul-marinho, derivado do verde-petróleo da marca) ---------------
   Preferência ternária (ver App\Support\Theme): claro = :root acima (sem bloco próprio) ·
   escuro = bloco abaixo · auto = mesmo bloco, mas só quando o aparelho está em dark mode
   (@media prefers-color-scheme).
   ATENÇÃO: os DOIS blocos são idênticos de propósito — sem preprocessador não dá para agrupar
   seletores através da fronteira do @media. Toda alteração de token escuro precisa ser feita
   NOS DOIS; o TemaCssTest compara os blocos e falha se divergirem. ------------------------ */

:root[data-theme="escuro"] {
  color-scheme: dark;
  --c-bg: #0f1829;               /* azul-marinho profundo */
  --c-surface: #172238;          /* cards, barra e menus */
  --c-surface-2: #1f2d47;        /* hover / cabeçalho de tabela */
  --c-text: #e6ecf5;
  --c-text-muted: #9fb0c9;
  --c-border: #34445f;
  --c-primary: #5ec9a6;          /* o verde-petróleo clareado para passar sobre o marinho */
  --c-primary-hover: #7fd8bb;
  --c-primary-contrast: #072a20; /* texto sobre primary */
  --c-primary-soft: #1a3a3a;
  --c-primary-text: #7fd8bb;
  --c-success: #8ecb9c;
  --c-danger: #f29b94;
  --c-warning: #e4bd66;
}

@media (prefers-color-scheme: dark) {
  /* ATENÇÃO: cópia exata do bloco acima — alterar os DOIS. */
  :root[data-theme="auto"] {
    color-scheme: dark;
    --c-bg: #0f1829;
    --c-surface: #172238;
    --c-surface-2: #1f2d47;
    --c-text: #e6ecf5;
    --c-text-muted: #9fb0c9;
    --c-border: #34445f;
    --c-primary: #5ec9a6;
    --c-primary-hover: #7fd8bb;
    --c-primary-contrast: #072a20;
    --c-primary-soft: #1a3a3a;
    --c-primary-text: #7fd8bb;
    --c-success: #8ecb9c;
    --c-danger: #f29b94;
    --c-warning: #e4bd66;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  background-color: var(--c-bg);
  min-height: 100vh;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; }

/* ---------- Casca ---------------------------------------------------------- */

.topbar { background-color: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: 0.6rem 1rem; }
.topbar__inner {
  max-width: var(--largura-conteudo); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.topbar__brand { font-weight: 600; font-size: 1.05rem; color: var(--c-text); }
.topbar__brand:hover { text-decoration: none; }
.topbar__nav { display: flex; align-items: center; gap: 0.2rem 0.9rem; flex-wrap: wrap; }
.topbar__nav a { padding: 0.25rem 0; border-bottom: 2px solid transparent; color: var(--c-text-muted); }
.topbar__nav a:hover { text-decoration: none; color: var(--c-text); }
.topbar__nav a.is-active { color: var(--c-text); border-bottom-color: var(--c-primary); }
.topbar__nav form { display: inline; }

.wrap { max-width: var(--largura-conteudo); margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.rodape {
  max-width: var(--largura-conteudo); margin: 0 auto; padding: 0 1rem 2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--c-text-muted);
}

/* ---------- Blocos --------------------------------------------------------- */

.card {
  background-color: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-card); padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.card__title { font-size: 1.1rem; margin-bottom: 0.5rem; }
.page-title { font-size: 1.45rem; margin-bottom: 0.3rem; }
.page-sub { color: var(--c-text-muted); margin-bottom: 1.25rem; }
.text-muted { color: var(--c-text-muted); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.stack > * + * { margin-top: 0.9rem; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.btn {
  display: inline-block; font: inherit; cursor: pointer;
  padding: 0.5rem 1rem; border-radius: var(--radius-control);
  border: 1px solid var(--c-border); background-color: var(--c-surface); color: var(--c-text);
}
.btn:hover { background-color: var(--c-surface-2); text-decoration: none; }
.btn--primary { background-color: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-contrast); }
.btn--primary:hover { background-color: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn--danger { border-color: var(--c-danger); color: var(--c-danger); }
.btn--danger:hover { background-color: var(--c-danger); color: #fff; }
.btn--sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn--block { display: block; width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn.is-done { border-color: var(--c-success); color: var(--c-success); }

.pill, .badge {
  display: inline-block; font-size: 0.78rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--c-border); background-color: var(--c-surface-2); color: var(--c-text-muted);
  white-space: nowrap;
}
.pill--ok { border-color: var(--c-success); color: var(--c-success); }
.pill--falha { border-color: var(--c-danger); color: var(--c-danger); }
.pill--rodando { border-color: var(--c-warning); color: var(--c-warning); }
.pill--manual { border-color: var(--c-primary); color: var(--c-primary); }

.table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-control); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid var(--c-border); padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; }
.table th { background-color: var(--c-surface-2); font-weight: 600; }
.table tbody tr:hover { background-color: var(--c-surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table .actions { white-space: nowrap; text-align: right; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

.stats { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.stat { border: 1px solid var(--c-border); border-radius: var(--radius-control); padding: 0.5rem 0.9rem; min-width: 7rem; }
.stat__value { display: block; font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat__label { display: block; font-size: 0.78rem; color: var(--c-text-muted); }

.empty { text-align: center; padding: 1.5rem 1rem; color: var(--c-text-muted); }

.pager { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.9rem; }
.pager a, .pager span { border: 1px solid var(--c-border); border-radius: var(--radius-control); padding: 0.3rem 0.7rem; font-size: 0.88rem; }
.pager a:hover { background-color: var(--c-surface-2); text-decoration: none; }

/* ---------- Formulários ---------------------------------------------------- */

.field { margin-bottom: 0.9rem; }
.label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--c-text-muted); }
.input {
  width: 100%; font: inherit; color: var(--c-text); background-color: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius-control); padding: 0.5rem 0.7rem;
}
.input:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; border-color: var(--c-primary); }
.field-help { color: var(--c-text-muted); font-size: 0.85rem; margin-top: 0.25rem; }
.field-error { color: var(--c-danger); font-size: 0.85rem; margin-top: 0.25rem; }
.checkbox-row { display: flex; align-items: center; gap: 0.45rem; }
.checkbox-row input { width: 1rem; height: 1rem; }

.alert {
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-primary);
  background-color: var(--c-surface-2); border-radius: var(--radius-control);
  padding: 0.6rem 0.8rem; margin-bottom: 1rem;
}
.alert--success { border-left-color: var(--c-success); }
.alert--warning { border-left-color: var(--c-warning); }
.alert--danger { border-left-color: var(--c-danger); color: var(--c-danger); }

/* ---------- Autenticação --------------------------------------------------- */

.auth-wrap { max-width: 26rem; margin: 3rem auto 0; padding: 0 1rem; }
.auth-brand { font-weight: 600; color: var(--c-text-muted); margin-bottom: 0.25rem; }
.auth-title { font-size: 1.35rem; margin-bottom: 1rem; }
.auth-note { font-size: 0.85rem; margin-top: 1rem; }

/* ---------- 2FA ------------------------------------------------------------ */

.passos { display: grid; gap: 0.4rem; counter-reset: passo; margin-bottom: 1rem; }
.passos li { display: flex; gap: 0.6rem; align-items: baseline; }
.passos li::before { counter-increment: passo; content: counter(passo) "."; font-weight: 600; color: var(--c-primary); }
.qr-box { width: 220px; max-width: 100%; margin: 0 auto 1rem; padding: 8px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-control); }
.qr-box svg { display: block; width: 100%; height: auto; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin: 0.75rem 0; }
.recovery-codes code { display: block; padding: 0.35rem 0.6rem; background-color: var(--c-surface-2); border-radius: var(--radius-control); font-size: 1rem; letter-spacing: 0.04em; }

.fold { margin: 0.5rem 0; }
.fold > summary { cursor: pointer; color: var(--c-primary); font-size: 0.9rem; }
.fold__body { margin-top: 0.4rem; font-size: 0.9rem; }
.fold__body > p + p { margin-top: 0.4rem; }

/* ---------- Séries e pontos (W1) ------------------------------------------- */

.cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cabecalho .page-sub { margin-bottom: 0; }
.table--tight th, .table--tight td { padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.table .actions form { display: inline; }
.table .actions .btn { margin-left: 0.25rem; }
.linha-erro td { padding-top: 0; }
.text-danger { color: var(--c-danger); }
.form-linha { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.form-linha .label { margin: 0; }
.input--curto { width: 10rem; }
.pager .is-disabled { opacity: 0.45; }
.pager__status { border: 0; padding: 0; font-size: 0.85rem; color: var(--c-text-muted); }
.excluir { display: inline-block; }
.excluir > summary { list-style: none; display: inline-block; }
.excluir > summary::-webkit-details-marker { display: none; }
.excluir[open] > summary { display: none; }

/* ---------- Ativos e cotações (W2) ----------------------------------------- */

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
.ficha dt { color: var(--c-text-muted); font-size: 0.85rem; }
.ficha dd { margin: 0; }
input[type="search"].input { max-width: 20rem; }

/* ---------- Painel, configurações e execuções (W3) ------------------------- */

.lista { display: grid; gap: 0.35rem; }
.lista li { padding-left: 0.6rem; border-left: 2px solid var(--c-border); font-size: 0.92rem; }
.pre { background-color: var(--c-surface-2); border-radius: var(--radius-card); padding: 0.7rem 0.9rem; font-size: 0.85rem; line-height: 1.5; overflow-x: auto; margin: 0; }
textarea.input { min-height: 4.5rem; }

/* ---------- Preferências de leitura: fonte, largura e tema (copiadas do banco de questões) ------ */

/* Tamanho da fonte: escala o font-size da raiz; como toda a UI usa rem, tudo acompanha.
   Nível 2 = padrão do navegador (100%). */
:root[data-font-scale="1"] { font-size: 90%; }
:root[data-font-scale="2"] { font-size: 100%; }
:root[data-font-scale="3"] { font-size: 112%; }
:root[data-font-scale="4"] { font-size: 125%; }
html[data-font-scale] body { font-size: 1rem; } /* o body tinha 16px fixo; em rem ele segue a raiz */

/* Largura do conteúdo: os seis níveis escrevem a variável que barra, main e rodapé leem. */
:root[data-content-width="1"] { --largura-conteudo: 960px; }
:root[data-content-width="2"] { --largura-conteudo: 1080px; }
:root[data-content-width="3"] { --largura-conteudo: 1240px; }
:root[data-content-width="4"] { --largura-conteudo: 1440px; }
:root[data-content-width="5"] { --largura-conteudo: 1680px; }
:root[data-content-width="6"] { --largura-conteudo: none; }

/* Gatilhos: um <details> nativo cada (o app.js fecha os irmãos, o Esc e o clique fora). */
.fontscale, .cwidth { position: relative; display: inline-flex; }
.fontscale > summary, .cwidth > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.15em; height: 2.15em; border-radius: 10px;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
}
.fontscale > summary::-webkit-details-marker, .cwidth > summary::-webkit-details-marker { display: none; }
.fontscale > summary:hover, .fontscale[open] > summary,
.cwidth > summary:hover, .cwidth[open] > summary { border-color: var(--c-primary); }
.fontscale__glyph { font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.fontscale__glyph span { font-size: .68em; font-weight: 700; }
.cwidth__glyph { font-weight: 800; line-height: 1; font-size: 1.1em; }
.themesel__glyph { font-size: 1.15em; line-height: 1; }

/* 320px: é o que os três rótulos do tema pedem numa linha só no nível 2 (nos níveis 3 e 4 o
   terceiro quebra para a linha de baixo e ocupa a largura toda). Absoluto sob um gatilho de
   2em, o painel não cresce sozinho — a largura tem de ser dita. */
.fontscale__panel, .cwidth__panel {
  margin-top: .5rem; width: 320px; max-width: calc(100vw - 2rem); padding: .9rem; font-size: 1rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
@media (min-width: 768px) {
  .fontscale__panel, .cwidth__panel { position: absolute; right: 0; top: 100%; margin-top: .4rem; z-index: 50; }
}
.fontscale__control, .cwidth__control { display: flex; flex-direction: column; gap: .55rem; }
.fontscale__meta, .cwidth__meta { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--c-text-muted); }
.fontscale__meta strong, .cwidth__meta strong { color: var(--c-text); }
.fontscale__hint, .cwidth__hint { margin: 0; font-size: .78rem; color: var(--c-text-muted); }

/* Botões discretos: um clique aplica o nível. O "A" cresce por nível como pista; a barra da
   largura alarga; o tema leva ícone + rótulo. */
.fontscale__btns { display: flex; gap: .4rem; }
.fontscale__btn, .themesel__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  height: 2.4rem; padding: 0; border-radius: 8px; cursor: pointer; font: inherit;
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text); font-weight: 800; line-height: 1;
  transition: border-color .12s ease, background-color .12s ease;
}
.fontscale__btn:hover, .themesel__btn:hover { border-color: var(--c-primary); }
.fontscale__btn.is-active, .themesel__btn.is-active { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-text); }
.fontscale__btn:focus-visible, .themesel__btn:focus-visible, .cwidth__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-primary-soft); }
.fontscale__btn[data-fontscale-value="1"] { font-size: .8rem; }
.fontscale__btn[data-fontscale-value="2"] { font-size: 1rem; }
.fontscale__btn[data-fontscale-value="3"] { font-size: 1.2rem; }
.fontscale__btn[data-fontscale-value="4"] { font-size: 1.45rem; }
/* Os três rótulos do tema têm larguras diferentes ("Automático" é o dobro de "Claro"): cada botão
   mede o próprio rótulo (flex-basis auto, sem quebra) e o painel do tema cresce com o conteúdo —
   com terços iguais numa caixa fixa, o terceiro botão vazava do painel a partir do nível 3. */
.themesel__btn { font-size: .78rem; font-weight: 600; padding: 0 .55rem; flex: 1 1 auto; white-space: nowrap; }
.fontscale__btns { flex-wrap: wrap; }
.themesel__icone { font-size: 1.05rem; }

.cwidth__btns { display: flex; gap: .35rem; }
.cwidth__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  height: 2.4rem; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-text-muted); transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.cwidth__btn:hover { border-color: var(--c-primary); }
.cwidth__btn.is-active { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-text); }
.cwidth__bar { display: block; height: 3px; border-radius: 2px; background: currentColor; }
.cwidth__btn[data-cwidth-value="1"] .cwidth__bar { width: 8px; }
.cwidth__btn[data-cwidth-value="2"] .cwidth__bar { width: 11px; }
.cwidth__btn[data-cwidth-value="3"] .cwidth__bar { width: 14px; }
.cwidth__btn[data-cwidth-value="4"] .cwidth__bar { width: 17px; }
.cwidth__btn[data-cwidth-value="5"] .cwidth__bar { width: 20px; }
.cwidth__btn[data-cwidth-value="6"] .cwidth__bar { width: 23px; }

/* Na barra superior os três ficam juntos. No desktop o painel abre logo abaixo do PRÓPRIO
   gatilho (right: 0 — o grupo encosta na borda direita da tela, então alinhar pela direita é o
   que o mantém visível), a receita da navbar do admin do banco de questões. No celular a nav
   quebra de linha e um painel de 260px preso a um botão à esquerda sairia da tela, então ali
   ele ancora na própria barra (a receita da .app-topbar__quick de lá). */
.topbar { position: relative; }
.topbar__quick { display: inline-flex; align-items: center; gap: .4em; }
.topbar__quick .fontscale__panel, .topbar__quick .cwidth__panel { position: absolute; top: 100%; z-index: 50; }
@media (max-width: 767.98px) {
  .topbar__quick .fontscale, .topbar__quick .cwidth { position: static; }
  .topbar__quick .fontscale__panel, .topbar__quick .cwidth__panel { right: 1rem; left: auto; margin-top: .25rem; }
}
@media (min-width: 768px) {
  .topbar__quick .fontscale__panel, .topbar__quick .cwidth__panel { right: 0; margin-top: .4rem; }
}
/* Na tela de login os três ficam abaixo do card, e o painel ancora na LINHA dos gatilhos,
   centrado — preso ao gatilho, o painel em fluxo empurrava os dois botões vizinhos para o lado. */
.auth-quick { position: relative; display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.auth-quick .fontscale, .auth-quick .cwidth { position: static; }
.auth-quick .fontscale__panel, .auth-quick .cwidth__panel {
  position: absolute; left: 50%; right: auto; top: 100%; transform: translateX(-50%); margin-top: .4rem; z-index: 50;
}
/* No card Aparência da Conta os três controles vivem abertos, um abaixo do outro. */
.aparencia { display: grid; gap: 1.1rem; max-width: 320px; }

/* Barra superior: teto de escala de fonte. A barra acompanha os níveis 1 e 2 e trava no nível 2
   nos níveis 3 e 4 (compensa a escala da raiz), para continuar compacta enquanto o conteúdo
   cresce. Os tamanhos internos passam a em, relativos a este teto. */
.topbar { font-size: 1rem; }
:root[data-font-scale="3"] .topbar { font-size: 0.893rem; } /* 1 / 1.12 */
:root[data-font-scale="4"] .topbar { font-size: 0.800rem; } /* 1 / 1.25 */
.topbar__brand { font-size: 1.05em; }
.topbar__nav { gap: 0.2em 0.9em; }
.topbar__nav a { padding: 0.25em 0; }
.topbar__nav .btn--sm { padding: 0.3em 0.7em; font-size: 0.85em; }