/* Camada de tema por cima do Tailwind vendorizado (static/vendor/tailwind.min.css,
   v2.2.19 — a última versão com um CSS pronto "baixe e use", sem build/Node).
   Esse build não tem as variantes dark: (dependem de config, que só existe com
   o CLI), então o tema claro/escuro (RF-56) continua sendo feito como antes:
   variáveis CSS + atributo data-theme, e as classes abaixo (bg-app, bg-surface,
   text-muted-c, border-base, ...) ligam essas variáveis às classes usadas nos
   templates ao lado das classes utilitárias do Tailwind. */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #d8dbe2;
  --text: #1b1f27;
  --text-muted: #6b7280;
  --accent: #3457d5;
  --accent-soft: #eef1fd;
  --row-hover: #fafbfd;
  --badge-ecb-bg: #fde8d8;
  --badge-ecb-text: #b45309;
  --error: #c0392b;
  --error-soft: #fbeceb;
  --node-interno: #5b8def;
  --node-externo: #f3a953;
  --node-ecb: #9b6fd6;
  --node-root: #3fb27f;
  --node-unresolved: #c8ccd4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161c;
    --surface: #1c1f27;
    --border: #2e323d;
    --text: #e7e9ee;
    --text-muted: #9aa1ad;
    --accent: #7b9bff;
    --accent-soft: #232a45;
    --row-hover: #232631;
    --badge-ecb-bg: #4a2f13;
    --badge-ecb-text: #f3a953;
    --error: #f28b82;
    --error-soft: #3a2323;
    --node-root: #4fd39a;
    --node-unresolved: #4a4f5c;
  }
}
:root[data-theme="dark"] {
  --bg: #14161c;
  --surface: #1c1f27;
  --border: #2e323d;
  --text: #e7e9ee;
  --text-muted: #9aa1ad;
  --accent: #7b9bff;
  --accent-soft: #232a45;
  --row-hover: #232631;
  --badge-ecb-bg: #4a2f13;
  --badge-ecb-text: #f3a953;
  --error: #f28b82;
  --error-soft: #3a2323;
  --node-root: #4fd39a;
  --node-unresolved: #4a4f5c;
}

body { background: var(--bg); color: var(--text); }

.bg-app { background-color: var(--bg); }
.bg-surface { background-color: var(--surface); }
.bg-row-hover:hover { background-color: var(--row-hover); }
.bg-accent { background-color: var(--accent); }
.bg-accent-soft { background-color: var(--accent-soft); }
.bg-error-soft { background-color: var(--error-soft); }
.bg-error-c { background-color: var(--error); }
.text-base-c { color: var(--text); }
.text-muted-c { color: var(--text-muted); }
.text-accent-c { color: var(--accent); }
.text-error-c { color: var(--error); }
.border-base { border-color: var(--border); }
.border-accent-c { border-color: var(--accent); }
.placeholder-muted::placeholder { color: var(--text-muted); }

.badge-ecb-c { background-color: var(--badge-ecb-bg); color: var(--badge-ecb-text); }

/* Comparação (comparator/report.html): destaque leve na linha principal de
   um grupo de linhas (bloco/link com nota e/ou pista de "possível bloco
   movido" logo abaixo). Tom neutro por cima da superfície, não o
   bg-accent-soft azul — esse já aparece em quase toda linha (badge de
   nível, de tipo de bloco, aba ativa), então usar a mesma cor pro fundo da
   linha inteira faria o destaque se misturar com esses elementos em vez de
   se diferenciar deles. */
.bg-diff-group { background-color: color-mix(in srgb, var(--text) 8%, var(--surface)); }

/* O build vendorizado do Tailwind (v2.2.19, sem config/JIT) só gera a
   variante hover: para um subconjunto de utilitários — cor de fundo,
   texto, borda. Para as classes que usamos e não têm hover: pronto
   nesse build (ou que são nossas, baseadas nas variáveis acima),
   definimos a mão, com o mesmo nome de classe que o Tailwind usaria. */
.hover\:text-accent-c:hover { color: var(--accent); }
.hover\:border-accent-c:hover { border-color: var(--accent); }
.hover\:underline:hover { text-decoration: underline; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Grafo de conexões (vis-network, bloco_grafo.html/grafo.html) — cores fixas
   por categoria de nó, não fazem parte da paleta padrão do Tailwind. */
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; }
.legend-interno { background-color: var(--node-interno); }
.legend-externo { background-color: var(--node-externo); }
.legend-ecb { background-color: var(--node-ecb); }
.legend-root { background-color: var(--node-root); }
.legend-unresolved { background-color: var(--node-unresolved); }

/* Details/summary do bloco de parâmetros do composto (composto.html) —
   marcador de abrir/fechar customizado. */
.disclosure summary { cursor: pointer; list-style: none; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary h2::before { content: "▸ "; color: var(--text-muted); font-size: 0.85em; }
.disclosure[open] summary h2::before { content: "▾ "; }

/* Layout do dashboard (menu lateral). O build vendorizado do Tailwind só
   gera as variantes md:/lg: para hover/focus (ver comentário acima) —
   não para display/transform/margin — então o comportamento responsivo
   do menu (fixo em telas largas, painel deslizante em telas estreitas)
   é feito aqui, com media query de verdade, não classe md: do Tailwind. */
.dashboard-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; width: 16rem; z-index: 40;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}
.dashboard-sidebar.is-open { transform: translateX(0); }
.dashboard-backdrop {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0, 0, 0, 0.4);
  display: none;
}
.dashboard-backdrop.is-open { display: block; }
.sidebar-toggle { display: inline-flex; }
@media (min-width: 900px) {
  .dashboard-sidebar { transform: translateX(0); }
  .dashboard-backdrop { display: none !important; }
  .dashboard-main { margin-left: 16rem; }
  .sidebar-toggle { display: none; }
}

.nav-link { display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 8px 12px; font-size: 0.875rem; text-decoration: none; color: var(--text-muted); }
.nav-link:hover { color: var(--accent); background-color: var(--row-hover); }
.nav-link.nav-link-active { background-color: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* RF-57: overlay de carregamento para ações potencialmente demoradas. */
.loading-overlay { display: none; }
.loading-overlay.active { display: flex; }
.loading-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid var(--border); border-top-color: var(--accent);
  animation: loading-spin 0.8s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }