:root {
  color-scheme: dark;
}

html {
  scrollbar-color: #334155 #020617;
  scrollbar-width: thin;
}

/* `slate-600` do Tailwind tem contraste insuficiente sobre o fundo principal
   escuro. Ele continua secundário, mas não desaparece para baixa visão. */
.text-slate-600 {
  color: #94a3b8;
}

body,
#sidebar,
.topbar,
main,
footer {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

select option {
  background: #0f172a;
  color: #e2e8f0;
}

thead {
  background-color: rgb(2 6 23 / 0.5);
}

th {
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}

html.light-mode {
  color-scheme: light;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

html.light-mode body,
html.light-mode .bg-slate-950 {
  background-color: #f1f5f9;
}

html.light-mode .bg-slate-950\/80 {
  background-color: rgb(248 250 252 / 0.86);
}

html.light-mode .bg-slate-950\/50,
html.light-mode thead {
  background-color: rgb(241 245 249 / 0.8);
}

html.light-mode .bg-slate-900,
html.light-mode .bg-slate-900\/70,
html.light-mode .bg-slate-900\/50 {
  background-color: #ffffff;
}

html.light-mode .bg-slate-800,
html.light-mode .hover\:bg-slate-800:hover,
html.light-mode .hover\:bg-slate-800\/30:hover {
  background-color: #f8fafc;
}

html.light-mode .bg-slate-800\/60,
html.light-mode .bg-slate-800\/30 {
  background-color: #f1f5f9;
}

/* Superficies e preenchimentos que faltavam na inversao.
   `bg-slate-700` e a fatia "nao alcancada" das barras de cobertura, e
   `bg-slate-900/40` e o bloco do gasto sem etiqueta: sem override, os dois
   ficavam azul-escuro sobre fundo claro -- dois retangulos pretos no meio da
   tela. Toda cor de PREENCHIMENTO nova precisa entrar aqui, nao so as de texto
   e borda. */
html.light-mode .bg-slate-700 {
  background-color: #cbd5e1;
}

html.light-mode .bg-slate-900\/40,
html.light-mode .bg-slate-800\/20,
html.light-mode .bg-slate-800\/40,
html.light-mode .bg-slate-800\/50 {
  background-color: #f8fafc;
}

/* Cabecalho de tabela com fundo proprio. Sem o override ele vira uma faixa
   azul-escura sobre a tabela clara -- o mesmo defeito das barras de cobertura,
   que so aparece quando alguem abre a tela no tema claro. */
html.light-mode .bg-slate-950\/20 {
  background-color: #f1f5f9;
}

html.light-mode .border-slate-900,
html.light-mode .border-slate-800,
html.light-mode .border-slate-800\/60 {
  border-color: #e2e8f0;
}

html.light-mode .border-slate-700 {
  border-color: #cbd5e1;
}

html.light-mode .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
html.light-mode .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0;
}

html.light-mode .text-slate-50,
html.light-mode .text-slate-100 {
  color: #0f172a;
}

html.light-mode .text-slate-200 {
  color: #1e293b;
}

html.light-mode .text-slate-300 {
  color: #334155;
}

html.light-mode .text-slate-400 {
  color: #475569;
}

html.light-mode .text-slate-500 {
  color: #475569;
}

html.light-mode .text-slate-600 {
  color: #475569;
}

html.light-mode .hover\:text-slate-100:hover,
html.light-mode .hover\:text-slate-200:hover {
  color: #0f172a;
}

html.light-mode .placeholder-slate-500::placeholder {
  color: #64748b;
}

html.light-mode input,
html.light-mode select,
html.light-mode textarea {
  color: #1e293b;
}

html.light-mode select option {
  background: #ffffff;
  color: #1e293b;
}

/* Semânticas no claro.
   O badge é lido pelo FUNDO, não pelo texto: amarelo escuro o bastante para ter
   contraste é marrom, sempre -- é física da cor, não escolha. Por isso o fundo
   sobe de 10% de opacidade (quase branco) para o tom 100 da paleta, que lê
   inequivocamente vermelho, amarelo ou verde, e o texto fica no tom escuro que
   dá contraste em cima dele. */
html.light-mode .text-green-400  { color: #15803d; }
html.light-mode .text-amber-400  { color: #92400e; }
html.light-mode .text-red-400    { color: #b91c1c; }
html.light-mode .text-sky-400    { color: #0369a1; }
html.light-mode .text-purple-400 { color: #7e22ce; }
/* Tons -300 e -500 de texto. No escuro eles sao claros o bastante sobre fundo
   escuro; no claro ficam quase invisiveis sobre o proprio fundo pastel do selo.
   Foi o que deixou os selos "mapa de tags" e "dimensoes" ilegiveis no tema
   claro -- texto claro sobre pastel claro. */
html.light-mode .text-brand-300  { color: #4338ca; }
html.light-mode .text-brand-500  { color: #4f46e5; }
html.light-mode .text-violet-300 { color: #6d28d9; }
html.light-mode .text-amber-300  { color: #b45309; }
html.light-mode .text-amber-500  { color: #b45309; }
html.light-mode .text-red-300    { color: #b91c1c; }
html.light-mode .text-indigo-400 { color: #4338ca; }
html.light-mode .text-slate-700  { color: #475569; }

html.light-mode .text-brand-400  { color: #4f46e5; }

html.light-mode .bg-green-500\/10  { background-color: #dcfce7; }
html.light-mode .bg-amber-500\/10  { background-color: #fef3c7; }
html.light-mode .bg-red-500\/10    { background-color: #fee2e2; }
html.light-mode .bg-sky-500\/10    { background-color: #e0f2fe; }
html.light-mode .bg-purple-500\/10 { background-color: #f3e8ff; }
html.light-mode .bg-brand-500\/10  { background-color: #e0e7ff; }

/* Bordas coloridas.

   No escuro o Tailwind gera `border-green-500/30` e a borda sai verde. No claro
   nada a sobrescrevia, e a cor com opacidade some contra o fundo branco: as
   QUATRO categorias de flash saíam com a mesma borda cinza do reset, e o único
   sinal de "isto é erro" contra "isto é sucesso" virava o texto. Auditado em
   25/08/2026 -- eram 14 classes de borda em uso e só duas cobertas.

   O tom -300 para as bordas fracas (/30, /40) e -400 para as fortes (/50, /60):
   sobre os fundos tom-100 usados nos mesmos blocos, -300 marca a aresta sem
   competir com o texto, e -400 lê como contorno de elemento ativo. */
html.light-mode .border-green-500\/30  { border-color: #86efac; }
html.light-mode .border-green-500\/40  { border-color: #86efac; }
html.light-mode .border-red-500\/30    { border-color: #fca5a5; }
html.light-mode .border-amber-500\/30  { border-color: #fcd34d; }
html.light-mode .border-amber-500\/40  { border-color: #fcd34d; }
html.light-mode .border-sky-500\/30    { border-color: #7dd3fc; }
html.light-mode .border-sky-900\/40    { border-color: #7dd3fc; }
html.light-mode .border-red-900\/50    { border-color: #fca5a5; }
html.light-mode .border-brand-500\/30  { border-color: #a5b4fc; }
html.light-mode .border-brand-500\/40  { border-color: #a5b4fc; }
html.light-mode .border-brand-500\/50  { border-color: #818cf8; }
html.light-mode .border-brand-500\/60  { border-color: #818cf8; }

/* Faixas de aviso -- as barras largas do topo das telas. Mesmo princípio. */
html.light-mode .bg-red-950\/20   { background-color: #fee2e2; }
html.light-mode .bg-amber-950\/20 { background-color: #fef9c3; }
html.light-mode .bg-sky-950\/20   { background-color: #e0f2fe; }
html.light-mode .bg-indigo-500\/10 { background-color: #e0e7ff; }
html.light-mode .border-red-900\/40   { border-color: #fca5a5; }
html.light-mode .border-amber-900\/40 { border-color: #fcd34d; }

html.light-mode .theme-icon-dark {
  display: none;
}

html.light-mode .theme-icon-light {
  display: block;
}

@media (max-width: 767px) {
  .overflow-x-auto table {
    min-width: 640px;
  }

  .overflow-x-auto {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Em tabelas extensas, a dimensão que identifica a linha permanece visível
     durante a rolagem horizontal. */
  .overflow-x-auto table th:first-child,
  .overflow-x-auto table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #0f172a;
    box-shadow: 1px 0 0 #334155;
  }

  html.light-mode .overflow-x-auto table th:first-child,
  html.light-mode .overflow-x-auto table td:first-child {
    background-color: #ffffff;
    box-shadow: 1px 0 0 #cbd5e1;
  }

  .chart-responsive {
    height: 260px;
    min-height: 260px;
  }

  .quality-details:not([open]) .quality-content {
    display: none;
  }
}

@media (min-width: 768px) {
  .quality-details > summary {
    display: none;
  }

  .quality-details .quality-content {
    display: flex !important;
  }
}