/* Design tokens compartilhados — U1/I9. Carregado após o <style> de cada página,
   portanto estas variáveis são a fonte de verdade da paleta. */

:root {
  --bg: #eef3f9;
  --panel: #ffffff;
  --ink: #1f1a14;
  --muted: #5f6772;
  --primary: #1d5bbf;
  --primary-soft: #e7eefb;
  --line: #dbe3ef;
  --danger: #b33c3c;
  --card: #f7faff;
  --summary: #f6f8fc;
  --month-grad-a: #dde8ff;
  --month-grad-b: #d9f0f5;
  --month-base: #eef3f9;
  --good: #2f8a57;
  --warn: #b8860b;
  --bad: #b33c3c;
  /* aliases: páginas antigas usam --text/--accent */
  --text: var(--ink);
  --accent: var(--primary);
  --radius: 12px;
  --shadow: 0 2px 10px rgba(20, 40, 80, 0.07);
  --transition: 160ms ease;
}

/* Identidade "Meia-noite" (U2, direção A): grafite + laranja energia */
[data-theme="dark"] {
  --bg: #14181f;
  --panel: #1a2029;
  --ink: #e9edf3;
  --muted: #8a95a5;
  --primary: #ff6b35;
  --primary-soft: #33221a;
  --line: #2a3442;
  --danger: #e07070;
  --card: #1c232d;
  --summary: #1c232d;
  --month-grad-a: #1f2734;
  --month-grad-b: #1a2530;
  --month-base: #14181f;
  --good: #5fb88a;
  --warn: #d9a94a;
  --bad: #e07070;
  --accent-ink: #ff8f66;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .app-nav-links a:hover,
[data-theme="dark"] .app-nav-links a.active {
  color: var(--accent-ink);
  background: var(--primary-soft);
}

.num,
.hero-big,
.stat-value,
.week-metric-value,
.split-head strong,
.target-card strong {
  font-family: "Rajdhani", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}

/* ==========================================================================
   Camada de compatibilidade dark para o CSS legado das páginas.
   Usa !important de propósito: as páginas têm seletores com especificidade
   maior e cores fixas. Esta camada inteira sai no restyle U2.
   ========================================================================== */

/* Painéis e cartões principais (inclui os com gradiente claro) */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .top-card,
[data-theme="dark"] .header-card,
[data-theme="dark"] .header,
[data-theme="dark"] .head,
[data-theme="dark"] .toolbar-card,
[data-theme="dark"] .focus-panel,
[data-theme="dark"] .week-summary,
[data-theme="dark"] .detail-sheet,
[data-theme="dark"] .quick-add,
[data-theme="dark"] .hero-panel,
[data-theme="dark"] .insight-panel,
[data-theme="dark"] .tip-card,
[data-theme="dark"] .timeline-card,
[data-theme="dark"] .source-card,
[data-theme="dark"] .reference-card,
[data-theme="dark"] .option-card,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .mini-card,
[data-theme="dark"] .summary,
[data-theme="dark"] .analysis,
[data-theme="dark"] .sources,
[data-theme="dark"] .section-grid {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}

/* Sub-cartões, tiles e caixas internas */
[data-theme="dark"] .stat,
[data-theme="dark"] .week-metric,
[data-theme="dark"] .target-card,
[data-theme="dark"] .target-pill,
[data-theme="dark"] .metric,
[data-theme="dark"] .formula,
[data-theme="dark"] .field-box,
[data-theme="dark"] .quick-item,
[data-theme="dark"] .summary-box,
[data-theme="dark"] .timeline,
[data-theme="dark"] .timeline-track,
[data-theme="dark"] .timeline-item,
[data-theme="dark"] .timeline-assumptions,
[data-theme="dark"] .meal-note,
[data-theme="dark"] .kcal,
[data-theme="dark"] .tip,
[data-theme="dark"] .note,
[data-theme="dark"] .anchor-chip,
[data-theme="dark"] .option-label,
[data-theme="dark"] .race-reminder,
[data-theme="dark"] .result,
[data-theme="dark"] .import-toast,
[data-theme="dark"] .detail-notes,
[data-theme="dark"] .detail-photos,
[data-theme="dark"] th {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .status-chip {
  background: var(--card) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .insight-badges span,
[data-theme="dark"] .timeline-tags span,
[data-theme="dark"] .legend span {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Tipografia base: elementos genéricos com tinta fixa clara viram tokens.
   Sem !important de propósito — regras semânticas mais específicas
   (.stat.good .stat-value, .status-chip.warn etc.) continuam vencendo. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] strong,
[data-theme="dark"] b,
[data-theme="dark"] th,
[data-theme="dark"] span,
[data-theme="dark"] .section-title,
[data-theme="dark"] .value,
[data-theme="dark"] .pill,
[data-theme="dark"] .badge,
[data-theme="dark"] .timeline-time,
[data-theme="dark"] .status-chip {
  color: var(--ink);
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] .interp-table td,
[data-theme="dark"] dd,
[data-theme="dark"] dt,
[data-theme="dark"] label,
[data-theme="dark"] .hint,
[data-theme="dark"] .status,
[data-theme="dark"] small,
[data-theme="dark"] .target-hint {
  color: #b6c0cd;
}

/* Tipografia com cor fixa escura */
[data-theme="dark"] .header h1,
[data-theme="dark"] .head h1,
[data-theme="dark"] .head h2,
[data-theme="dark"] .top-card .top-copy h1,
[data-theme="dark"] .week-summary h3,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .week-metric-value,
[data-theme="dark"] .day-number {
  color: var(--ink) !important;
}

[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-note,
[data-theme="dark"] .week-metric-label,
[data-theme="dark"] .head p,
[data-theme="dark"] .header p,
[data-theme="dark"] .top-card .top-copy p,
[data-theme="dark"] .week-summary p,
[data-theme="dark"] .field label {
  color: var(--muted) !important;
}

/* Formulários e botões utilitários claros */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .nav a,
[data-theme="dark"] .top-nav a,
[data-theme="dark"] .back-btn,
[data-theme="dark"] .logout-btn,
[data-theme="dark"] button.secondary,
[data-theme="dark"] .secondary,
[data-theme="dark"] .nav-toggle-btn,
[data-theme="dark"] .plus-btn,
[data-theme="dark"] .target-edit-btn,
[data-theme="dark"] .detail-rename-btn,
[data-theme="dark"] .detail-notes-edit-btn,
[data-theme="dark"] .detail-notes-cancel-btn,
[data-theme="dark"] .inline-edit-btn,
[data-theme="dark"] #prevWeekBtn,
[data-theme="dark"] #nextWeekBtn {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* Calendário: células, cabeçalho e bandas de mês */
[data-theme="dark"] .weekday,
[data-theme="dark"] .weekday.summary-title {
  background: var(--panel) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .day {
  background: var(--card) !important;
}

[data-theme="dark"] .day.other-month,
[data-theme="dark"] .day.after-priority-a {
  background: var(--bg) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .day.drop-target {
  background: var(--primary-soft) !important;
}

[data-theme="dark"] .day.month-band-0 { background: color-mix(in srgb, #6fa6ea 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-1 { background: color-mix(in srgb, #57a7d8 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-2 { background: color-mix(in srgb, #65b889 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-3 { background: color-mix(in srgb, #8d7bd3 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-4 { background: color-mix(in srgb, #d58d63 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-5 { background: color-mix(in srgb, #d4ad55 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-6 { background: color-mix(in srgb, #c77c66 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-7 { background: color-mix(in srgb, #cab15a 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-8 { background: color-mix(in srgb, #b99b6a 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-9 { background: color-mix(in srgb, #b07b74 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-10 { background: color-mix(in srgb, #6d8dbf 14%, var(--card)) !important; }
[data-theme="dark"] .day.month-band-11 { background: color-mix(in srgb, #7b88b8 14%, var(--card)) !important; }

/* Chips do calendário */
[data-theme="dark"] .block-chip {
  background: var(--primary-soft) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .race-chip {
  background: color-mix(in srgb, #d4ad55 22%, var(--bg)) !important;
  border-color: #6a5a2a !important;
  color: #ead9a0 !important;
}

/* Gráficos: canvas usa chartColor() nas páginas; painel acompanha o tema */
[data-theme="dark"] .chart-wrap {
  background: var(--card) !important;
  border-color: var(--line) !important;
}

/* Analytics: cards de split e chips de delta (gerados via JS) */
[data-theme="dark"] .split-card,
[data-theme="dark"] .brick-row {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .split-card p {
  color: var(--muted) !important;
}

[data-theme="dark"] .split-head strong {
  color: var(--ink) !important;
}

[data-theme="dark"] .delta-chip.good { background: color-mix(in srgb, #5fb88a 18%, var(--bg)) !important; border-color: #2f5a44 !important; }
[data-theme="dark"] .delta-chip.warn { background: color-mix(in srgb, #d9a94a 18%, var(--bg)) !important; border-color: #6a5a2a !important; }
[data-theme="dark"] .delta-chip.bad { background: color-mix(in srgb, #e07070 18%, var(--bg)) !important; border-color: #6a3535 !important; }

/* Navegação antiga das páginas: redundante com a barra fixa (some quando ela existe) */
html.has-app-nav .nav,
html.has-app-nav .top-nav,
html.has-app-nav .nav-toggle-btn {
  display: none !important;
}

/* Micro-interações globais (U4) */
button,
a,
.stat,
.card {
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

button:active {
  transform: scale(0.97);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Navegação compartilhada (injetada por nav.js).
   position:fixed para não herdar o layout do body de cada página. */
.app-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

html.has-app-nav body {
  padding-top: 60px !important;
}

.app-nav-links {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-nav-links::-webkit-scrollbar {
  display: none;
}

.app-nav-links a {
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.app-nav-links a:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.app-nav-links a.active {
  color: var(--primary);
  background: var(--primary-soft);
}

.app-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.app-nav-actions .theme-toggle {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 5px 9px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.app-nav-actions .logout-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
}

.app-nav-actions .logout-link:hover {
  color: var(--danger);
}

@media (max-width: 640px) {
  .app-nav {
    padding: 6px 8px;
  }

  .app-nav-links a {
    padding: 8px 9px;
    font-size: 0.82rem;
  }
}