/*
 * Tokens de cor. Todas as cores do sistema saem daqui: o tailwind.config em
 * views/partials/inicio.ejs aponta as classes utilitárias (bg-white,
 * text-zinc-500, border-linha…) para estas variáveis, então trocar de tema é
 * trocar o valor das variáveis — nenhuma tela precisa de variante "dark:".
 *
 * A escala zinc se inverte no escuro (zinc-50 = fundo sutil, zinc-900 = texto
 * forte). É o que faz "bg-zinc-900 text-white" continuar sendo um botão de
 * alto contraste nos dois temas, sem tocar no HTML.
 */
:root {
  color-scheme: light;

  --c-branco: #ffffff;   /* superfície de cartão e texto sobre botão escuro */
  --c-papel: #f4f4f5;    /* fundo da página */
  --c-tinta: #18181b;    /* texto principal */
  --c-linha: #d4d4d8;    /* bordas */

  --z-50:  #fafafa;
  --z-100: #f4f4f5;
  --z-300: #d4d4d8;
  --z-400: #a1a1aa;
  --z-500: #71717a;
  --z-600: #52525b;
  --z-700: #3f3f46;
  --z-800: #27272a;
  --z-900: #18181b;

  --c-atraso: #b91c1c;
  --c-economia: #15803d;
  --c-pendente: #b45309;
  --c-original: #a1a1aa;

  --f-erro: #fef2f2;     /* faixas: red-50 / green-50 / amber-50 */
  --f-ok: #f0fdf4;
  --f-aviso: #fffbeb;
  --f-aviso-texto: #78350f;

  --c-hover-linha: #fafafa;   /* hover de linha de tabela */
  --c-grade: #f4f4f5;         /* grade dos gráficos */
  /* Série neutra dos gráficos (principal, saldo devedor): azul, para não
     competir com verde = amortização e vermelho = juros, e para não sumir
     no cinza do próprio cartão. */
  --c-serie: #1d4ed8;
  --c-serie-fundo: rgba(29, 78, 216, .10);
}

html.escuro {
  color-scheme: dark;

  --c-branco: #26262a;
  --c-papel: #17171a;
  --c-tinta: #ececef;
  --c-linha: #3a3a41;

  --z-50:  #202024;
  --z-100: #2c2c31;
  --z-300: #4b4b53;
  --z-400: #8f8f99;
  --z-500: #a1a1ab;
  --z-600: #b8b8c0;
  --z-700: #d0d0d6;
  --z-800: #e4e4e8;
  --z-900: #f2f2f4;

  --c-atraso: #f87171;
  --c-economia: #4ade80;
  --c-pendente: #fbbf24;
  --c-original: #6b6b73;

  --f-erro: #2e1416;
  --f-ok: #10281a;
  --f-aviso: #2c1f08;
  --f-aviso-texto: #fcd34d;

  --c-hover-linha: #2e2e33;
  --c-grade: #2c2c31;
  --c-serie: #60a5fa;
  --c-serie-fundo: rgba(96, 165, 250, .14);
}

/* Poucos ajustes fora do Tailwind: foco visível e tabelas densas. */
:focus-visible { outline: 2px solid var(--c-tinta); outline-offset: 2px; }

/* Campos nativos: color-scheme já escurece o widget (inclusive o seletor de
   data e o checkbox); aqui só alinhamos fundo e texto aos tokens. */
input, select, textarea, button { color: inherit; font: inherit; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: var(--c-branco);
  color: var(--c-tinta);
}
input::placeholder, textarea::placeholder { color: var(--z-400); }

table.densa { border-collapse: collapse; width: 100%; }
table.densa th, table.densa td { border-bottom: 1px solid var(--c-linha); padding: 5px 8px; text-align: left; }
table.densa th {
  font-weight: 600; color: var(--z-600); font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em;
  background: var(--c-branco);
}
table.densa td.num, table.densa th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.densa tbody tr:hover { background: var(--c-hover-linha); }

/*
 * Caixas com rolagem própria. O cabeçalho só é sticky aqui dentro, e com
 * top: 0 — a referência do sticky é o topo desta caixa, não o da página.
 * Um top: 48px (a altura da barra de navegação) empurraria o cabeçalho 48px
 * para baixo do lugar dele, por cima das primeiras linhas.
 */
.rolagem { overflow: auto; }
.tab-rolagem { max-height: 62vh; overflow: auto; }

.rolagem table.densa th,
.tab-rolagem table.densa th {
  position: sticky;
  top: 0;
  z-index: 5;
  /* border-bottom não é pintado em célula sticky com border-collapse: collapse;
     a linha de baixo do cabeçalho vem do inset shadow. */
  box-shadow: inset 0 -1px 0 var(--c-linha);
}

.num { font-variant-numeric: tabular-nums; }

/* max-width em <td> é ignorado no layout automático de tabela; quem corta o
   texto é este bloco interno. */
.corta { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Marca. O manual traz as versões positiva e negativa do logotipo; a troca
   segue o tema, como o botão de sol/lua. */
.marca { height: 22px; width: auto; display: block; }
.marca-grande { height: 34px; }
.marca-escura { display: none; }
html.escuro .marca-clara { display: none; }
html.escuro .marca-escura { display: block; }

/* Botão de tema no cabeçalho (e flutuante nas telas sem cabeçalho, como o login). */
.btn-tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--c-linha); background: var(--c-branco); color: var(--z-500);
  line-height: 1; cursor: pointer;
}
.btn-tema:hover { color: var(--c-tinta); border-color: var(--z-400); }
.btn-tema .sol { display: none; }
html.escuro .btn-tema .sol { display: block; }
html.escuro .btn-tema .lua { display: none; }
.btn-tema-solto { position: fixed; top: 12px; right: 12px; z-index: 30; }