/* =========================================================================
   FOQA — Theme Overrides
   Default (Cockpit) lives in index.html. These themes override the
   CSS variables and the most-used hardcoded Tailwind utility classes.
   ========================================================================= */

/* ───────── shared theme primitives ──────────────────────────────────── */
:root {
  --radius:        6px;
  --shadow-card:   none;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-display:  var(--font-body);
}
/* Tailwind's transition-colors creates transitions that get stuck mid-animation
   when theme variables change rapidly — strip ALL transition properties from
   this utility so theme switches apply instantly and don't pin the previous value. */
.transition-colors {
  transition-property: none !important;
}
.panel { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.panel-2 { border-radius: var(--radius); }
[data-theme] body { font-family: var(--font-body); }
[data-theme] .font-mono { font-family: var(--font-mono); }
[data-theme] .display { font-family: var(--font-display); }

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ CHROME · FLOWING — sem caixas, documento contínuo                  ║
   ║   - strip panel backgrounds/borders/shadows                        ║
   ║   - vertical rhythm generoso entre seções                          ║
   ║   - hairline embaixo de cada bloco grande                          ║
   ║   - reveal-on-scroll via .flow-watched + .in-view                  ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
[data-chrome="flowing"] main .panel,
[data-chrome="flowing"] main .panel-2 {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* generous gap between top-level grid children */
[data-chrome="flowing"] main .grid.grid-cols-12 {
  row-gap: 56px !important;
  column-gap: 28px !important;
}
/* full-bleed body padding, max-width container so it reads as a document */
[data-chrome="flowing"] main > .flex-1.overflow-y-auto {
  padding: 28px 0 64px !important;
}
[data-chrome="flowing"] main > .flex-1.overflow-y-auto > * {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
}
/* hairline beneath every full-width section panel */
[data-chrome="flowing"] main .col-span-12 {
  padding-bottom: 40px !important;
  border-bottom: 1px solid var(--line);
}
[data-chrome="flowing"] main .col-span-12:last-child {
  border-bottom: 0;
}
/* nested column panels (col-span-7, col-span-5) sit inside a 2-col area —
   they share the same hairline-bottom rhythm if they're at the row level */
[data-chrome="flowing"] main .col-span-7,
[data-chrome="flowing"] main .col-span-5 {
  padding-bottom: 0 !important;
}
/* KPI strip: row of bare numbers separated by vertical hairlines */
[data-chrome="flowing"] main .col-span-12 > .grid.grid-cols-5,
[data-chrome="flowing"] main .col-span-12 > .grid.grid-cols-4 {
  gap: 0 !important;
}
[data-chrome="flowing"] main .col-span-12 > .grid.grid-cols-5 > .panel,
[data-chrome="flowing"] main .col-span-12 > .grid.grid-cols-4 > .panel {
  padding: 4px 24px !important;
  border-right: 1px solid var(--line) !important;
}
[data-chrome="flowing"] main .col-span-12 > .grid.grid-cols-5 > .panel:first-child,
[data-chrome="flowing"] main .col-span-12 > .grid.grid-cols-4 > .panel:first-child {
  padding-left: 0 !important;
}
[data-chrome="flowing"] main .col-span-12 > .grid.grid-cols-5 > .panel:last-child,
[data-chrome="flowing"] main .col-span-12 > .grid.grid-cols-4 > .panel:last-child {
  border-right: 0 !important;
  padding-right: 0 !important;
}
/* tables full-bleed, no surrounding panel */
[data-chrome="flowing"] main table { width: 100%; }
[data-chrome="flowing"] main .panel.overflow-hidden { overflow: visible !important; }
[data-chrome="flowing"] main .panel.overflow-hidden > div:first-child {
  /* the table's mini-toolbar */
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-color: var(--line-2) !important;
}
/* dropzone — keep the dashed affordance but lose the box shadow & background */
[data-chrome="flowing"] main .dz-idle,
[data-chrome="flowing"] main .dz-active {
  background: transparent !important;
}
/* section title — slightly bigger, more breathing in flowing */
[data-chrome="flowing"] main .panel > .flex.items-end.justify-between.mb-3 > div > .text-\[11px\].uppercase {
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--ink) !important;
  font-weight: 600;
}
[data-chrome="flowing"] main .panel > .flex.items-end.justify-between.mb-3 {
  margin-bottom: 18px !important;
}
/* reveal-on-scroll */
[data-chrome="flowing"] .flow-watched {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(.2,.7,.2,1), transform 520ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-chrome="flowing"] .flow-watched.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* stagger nested KPI tiles slightly so the row paints sequentially */
[data-chrome="flowing"] .flow-watched.in-view > .grid > .flow-watched,
[data-chrome="flowing"] .flow-watched.in-view > .grid.grid-cols-5 > .panel,
[data-chrome="flowing"] .flow-watched.in-view > .grid.grid-cols-4 > .panel {
  animation: flowFade 520ms cubic-bezier(.2,.7,.2,1) both;
}
[data-chrome="flowing"] .flow-watched.in-view > .grid > *:nth-child(2) { animation-delay: 60ms; }
[data-chrome="flowing"] .flow-watched.in-view > .grid > *:nth-child(3) { animation-delay: 120ms; }
[data-chrome="flowing"] .flow-watched.in-view > .grid > *:nth-child(4) { animation-delay: 180ms; }
[data-chrome="flowing"] .flow-watched.in-view > .grid > *:nth-child(5) { animation-delay: 240ms; }
@keyframes flowFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ THEME · EDITORIAL — printed safety briefing                        ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
[data-theme="editorial"] {
  --bg:       #f4ede0;
  --panel:    #fbf6ec;
  --panel-2:  #efe6d3;
  --line:     #d8ccaf;
  --line-2:   #b8a87f;
  --ink:      #181410;
  --ink-dim:  #4a4137;
  --ink-mute: #8a7d65;
  --accent:   #8a2a1c;
  --good:     #4f6a32;
  --warn:     #b86e0d;
  --bad:      #8a2a1c;
  --violet:   #5b3a7a;
  --radius:   2px;
  --shadow-card: none;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;
  --font-display:  'Source Serif 4', 'Crimson Pro', Georgia, serif;
}
[data-theme="editorial"], [data-theme="editorial"] body { background: var(--bg); color: var(--ink); }
[data-theme="editorial"] .panel { background: var(--panel); border-color: var(--line); }
[data-theme="editorial"] .panel-2 { background: var(--panel-2); }
[data-theme="editorial"] h1, [data-theme="editorial"] .md h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
[data-theme="editorial"] h1.text-\[18px\] { font-family: var(--font-display); font-weight: 600; font-size: 22px !important; letter-spacing: -0.01em; }
/* serif treatment on KPI numbers, big page titles */
[data-theme="editorial"] .text-\[22px\] { font-family: var(--font-display) !important; font-weight: 600; }
[data-theme="editorial"] .text-\[26px\] { font-family: var(--font-display) !important; font-weight: 600; font-feature-settings: "tnum" 1; }
/* hardcoded utility class overrides */
[data-theme="editorial"] .bg-\[\#0a1118\] { background: #efe6d3 !important; }
[data-theme="editorial"] .bg-\[\#0b1117\] { background: var(--bg) !important; color: var(--ink) !important; }
[data-theme="editorial"] .bg-\[\#0c131c\] { background: var(--panel) !important; }
[data-theme="editorial"] .bg-\[\#0d141d\] { background: #efe6d3 !important; }
[data-theme="editorial"] .bg-\[\#0d141d\]\/60 { background: rgba(239,230,211,0.6) !important; }
[data-theme="editorial"] .bg-\[\#141d28\] { background: #ebe1cb !important; }
[data-theme="editorial"] .bg-\[\#141d28\]\/60 { background: rgba(235,225,203,0.6) !important; }
[data-theme="editorial"] .bg-\[\#1c2735\] { background: #e3d6b7 !important; }
[data-theme="editorial"] .bg-\[\#1f2a38\] { background: var(--line-2) !important; }
[data-theme="editorial"] .text-slate-100 { color: #181410 !important; }
[data-theme="editorial"] .text-slate-200 { color: #2a221b !important; }
[data-theme="editorial"] .text-sky-200, [data-theme="editorial"] .text-sky-300 { color: var(--accent) !important; }
[data-theme="editorial"] .text-emerald-300 { color: var(--good) !important; }
[data-theme="editorial"] .text-rose-300 { color: var(--bad) !important; }
[data-theme="editorial"] .text-amber-300 { color: var(--warn) !important; }
[data-theme="editorial"] .text-\[\#0b1117\] { color: #fbf6ec !important; }
[data-theme="editorial"] .bg-sky-400, [data-theme="editorial"] .bg-sky-300, [data-theme="editorial"] .bg-sky-400\/90 { background: var(--accent) !important; color: #fbf6ec !important; }
[data-theme="editorial"] .bg-sky-400\/10 { background: rgba(138,42,28,0.10) !important; }
[data-theme="editorial"] .border-sky-500\/30 { border-color: rgba(138,42,28,0.45) !important; }
[data-theme="editorial"] .border-sky-500\/50 { border-color: rgba(138,42,28,0.55) !important; }
[data-theme="editorial"] .from-violet-400, [data-theme="editorial"] .to-sky-400 { --tw-gradient-stops: #5b3a7a, var(--accent) !important; }
[data-theme="editorial"] .from-violet-400 { --tw-gradient-from: #5b3a7a !important; }
[data-theme="editorial"] .to-sky-400 { --tw-gradient-to: var(--accent) !important; }
/* scrollbar */
[data-theme="editorial"] ::-webkit-scrollbar-thumb { background: #c9b88f; }
/* Recharts text */
[data-theme="editorial"] .recharts-text { fill: #6a5d48; }
[data-theme="editorial"] .recharts-default-tooltip { background: #fbf6ec !important; border: 1px solid var(--line-2) !important; border-radius: 2px !important; }
[data-theme="editorial"] .recharts-tooltip-label { color: var(--ink) !important; }
[data-theme="editorial"] .recharts-tooltip-item { color: var(--ink) !important; }
/* Markdown editorial styling */
[data-theme="editorial"] .md h1 { font-family: var(--font-display); color: var(--ink); font-size: 26px; }
[data-theme="editorial"] .md h2 { font-family: var(--font-display); color: var(--ink); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 600; border-bottom: 1px solid var(--line-2); padding-bottom: 4px; }
[data-theme="editorial"] .md p, [data-theme="editorial"] .md ul li { color: var(--ink-dim); }
[data-theme="editorial"] .md strong { color: var(--ink); }
[data-theme="editorial"] .md table th { background: var(--panel-2); color: var(--ink-dim); }
[data-theme="editorial"] .md table td { color: var(--ink); }
[data-theme="editorial"] .md code { background: #efe6d3; border-color: var(--line); color: var(--accent); }
[data-theme="editorial"] .md em { color: var(--ink-mute); }
/* badge text-emerald, etc. — already mapped through CSS vars in components */
[data-theme="editorial"] code.text-sky-300 { color: var(--accent) !important; }
[data-theme="editorial"] .bg-rose-500\/15 { background: rgba(138,42,28,0.12) !important; }
[data-theme="editorial"] .bg-amber-500\/15 { background: rgba(184,110,13,0.14) !important; }
[data-theme="editorial"] .bg-emerald-400 { background: var(--good) !important; }
[data-theme="editorial"] .from-violet-400 { --tw-gradient-from: #5b3a7a !important; --tw-gradient-stops: #5b3a7a, var(--tw-gradient-to, var(--accent)) !important; }
[data-theme="editorial"] .to-sky-400 { --tw-gradient-to: var(--accent) !important; }

/* big section/page title gets a serif rule (decorative) */
[data-theme="editorial"] h1.text-\[18px\]::before {
  content: "FLIGHT SAFETY BRIEFING — ";
  display: inline;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-family: var(--font-body);
  font-weight: 500;
  vertical-align: 4px;
  margin-right: 6px;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ THEME · SAAS CLARO — modern light enterprise                       ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
[data-theme="saas"] {
  --bg:       #f6f7f9;
  --panel:    #ffffff;
  --panel-2:  #f1f4f8;
  --line:     #e3e7ec;
  --line-2:   #cdd4dd;
  --ink:      #0f172a;
  --ink-dim:  #475569;
  --ink-mute: #94a3b8;
  --accent:   #4f46e5;     /* indigo */
  --good:     #059669;
  --warn:     #d97706;
  --bad:      #dc2626;
  --violet:   #7c3aed;
  --radius:   12px;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 6px 18px rgba(15,23,42,0.06);
  --font-body:     'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-display:  var(--font-body);
}
[data-theme="saas"], [data-theme="saas"] body { background: var(--bg); color: var(--ink); }
[data-theme="saas"] .panel { background: var(--panel); border-color: var(--line); }
[data-theme="saas"] .panel-2 { background: var(--panel-2); border-color: var(--line); }
[data-theme="saas"] .bg-\[\#0a1118\] { background: #fafbfc !important; border-color: var(--line) !important; }
[data-theme="saas"] .bg-\[\#0b1117\] { background: var(--bg) !important; color: var(--ink) !important; }
[data-theme="saas"] .bg-\[\#0c131c\] { background: var(--panel) !important; }
[data-theme="saas"] .bg-\[\#0d141d\] { background: var(--panel-2) !important; }
[data-theme="saas"] .bg-\[\#0d141d\]\/60 { background: rgba(241,244,248,0.6) !important; }
[data-theme="saas"] .bg-\[\#141d28\] { background: #eef2f7 !important; }
[data-theme="saas"] .bg-\[\#141d28\]\/60 { background: rgba(238,242,247,0.6) !important; }
[data-theme="saas"] .bg-\[\#1c2735\] { background: #e2e7ee !important; }
[data-theme="saas"] .bg-\[\#1f2a38\] { background: var(--line) !important; }
[data-theme="saas"] .text-slate-100 { color: var(--ink) !important; }
[data-theme="saas"] .text-slate-200 { color: #1e293b !important; }
[data-theme="saas"] .text-sky-200, [data-theme="saas"] .text-sky-300 { color: var(--accent) !important; }
[data-theme="saas"] .text-emerald-300 { color: var(--good) !important; }
[data-theme="saas"] .text-rose-300 { color: var(--bad) !important; }
[data-theme="saas"] .text-amber-300 { color: var(--warn) !important; }
[data-theme="saas"] .text-\[\#0b1117\] { color: #ffffff !important; }
[data-theme="saas"] .bg-sky-400, [data-theme="saas"] .bg-sky-300, [data-theme="saas"] .bg-sky-400\/90 { background: var(--accent) !important; color: #ffffff !important; }
[data-theme="saas"] .bg-sky-400\/10 { background: rgba(79,70,229,0.08) !important; }
[data-theme="saas"] .border-sky-500\/30 { border-color: rgba(79,70,229,0.30) !important; }
[data-theme="saas"] .border-sky-500\/50 { border-color: rgba(79,70,229,0.50) !important; }
[data-theme="saas"] ::-webkit-scrollbar-thumb { background: #cdd4dd; }
[data-theme="saas"] .recharts-text { fill: #64748b; }
[data-theme="saas"] .recharts-default-tooltip { background: #ffffff !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: 0 12px 32px rgba(15,23,42,0.10) !important; }
[data-theme="saas"] .recharts-tooltip-label { color: var(--ink) !important; }
[data-theme="saas"] .recharts-tooltip-item { color: var(--ink) !important; }
[data-theme="saas"] .md h1 { color: var(--ink); }
[data-theme="saas"] .md h2 { color: var(--ink-dim); }
[data-theme="saas"] .md p, [data-theme="saas"] .md ul li { color: var(--ink-dim); }
[data-theme="saas"] .md strong { color: var(--ink); }
[data-theme="saas"] .md table th { background: var(--panel-2); color: var(--ink-dim); }
[data-theme="saas"] .md table td { color: var(--ink); }
[data-theme="saas"] .md code { background: var(--panel-2); border-color: var(--line); color: var(--accent); }
[data-theme="saas"] code.text-sky-300 { color: var(--accent) !important; }
[data-theme="saas"] .bg-rose-500\/15 { background: rgba(220,38,38,0.10) !important; }
[data-theme="saas"] .bg-amber-500\/15 { background: rgba(217,119,6,0.12) !important; }
[data-theme="saas"] .bg-emerald-400 { background: var(--good) !important; }

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ THEME · BLUEPRINT — technical drawing aesthetic                    ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
[data-theme="blueprint"] {
  --bg:       #0a2540;
  --panel:    #0d2d4d;
  --panel-2:  #103559;
  --line:     #1f4a73;
  --line-2:   #2e6092;
  --ink:      #eaf3fb;
  --ink-dim:  #9fc2e0;
  --ink-mute: #5c89ad;
  --accent:   #ffd166;     /* drafting yellow */
  --good:     #6ee7b7;
  --warn:     #ffd166;
  --bad:      #ff7a7a;
  --violet:   #c4b5fd;
  --radius:   2px;
  --shadow-card: none;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-display:  'Barlow Condensed', 'Oswald', 'Inter', sans-serif;
}
[data-theme="blueprint"], [data-theme="blueprint"] body {
  background: var(--bg); color: var(--ink);
  background-image:
    linear-gradient(rgba(46,96,146,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,96,146,0.18) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 0 0;
}
[data-theme="blueprint"] .panel { background: rgba(13,45,77,0.85); border-color: var(--line-2); backdrop-filter: blur(2px); }
[data-theme="blueprint"] .panel-2 { background: rgba(16,53,89,0.9); }
/* condensed uppercase for big headings */
[data-theme="blueprint"] h1.text-\[18px\] { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 22px !important; }
[data-theme="blueprint"] .text-\[22px\] { font-family: var(--font-display) !important; font-weight: 600; letter-spacing: 0.02em; }
[data-theme="blueprint"] .text-\[26px\] { font-family: var(--font-mono) !important; }
[data-theme="blueprint"] .bg-\[\#0a1118\] { background: #082038 !important; border-right: 1px solid var(--line-2) !important; }
[data-theme="blueprint"] .bg-\[\#0b1117\] { background: var(--bg) !important; }
[data-theme="blueprint"] .bg-\[\#0c131c\] { background: rgba(13,45,77,0.7) !important; }
[data-theme="blueprint"] .bg-\[\#0d141d\] { background: #08203a !important; }
[data-theme="blueprint"] .bg-\[\#0d141d\]\/60 { background: rgba(8,32,58,0.6) !important; }
[data-theme="blueprint"] .bg-\[\#141d28\] { background: #103559 !important; }
[data-theme="blueprint"] .bg-\[\#141d28\]\/60 { background: rgba(16,53,89,0.6) !important; }
[data-theme="blueprint"] .bg-\[\#1c2735\] { background: #144072 !important; }
[data-theme="blueprint"] .bg-\[\#1f2a38\] { background: var(--line) !important; }
[data-theme="blueprint"] .text-slate-100 { color: var(--ink) !important; }
[data-theme="blueprint"] .text-slate-200 { color: #d6e7f5 !important; }
[data-theme="blueprint"] .text-sky-200, [data-theme="blueprint"] .text-sky-300 { color: var(--accent) !important; }
[data-theme="blueprint"] .text-emerald-300 { color: var(--good) !important; }
[data-theme="blueprint"] .text-rose-300 { color: var(--bad) !important; }
[data-theme="blueprint"] .text-amber-300 { color: var(--warn) !important; }
[data-theme="blueprint"] .text-\[\#0b1117\] { color: var(--bg) !important; }
[data-theme="blueprint"] .bg-sky-400, [data-theme="blueprint"] .bg-sky-300, [data-theme="blueprint"] .bg-sky-400\/90 { background: var(--accent) !important; color: var(--bg) !important; }
[data-theme="blueprint"] .bg-sky-400\/10 { background: rgba(255,209,102,0.10) !important; }
[data-theme="blueprint"] .border-sky-500\/30 { border-color: rgba(255,209,102,0.45) !important; }
[data-theme="blueprint"] .border-sky-500\/50 { border-color: rgba(255,209,102,0.60) !important; }
[data-theme="blueprint"] ::-webkit-scrollbar-thumb { background: var(--line-2); }
[data-theme="blueprint"] .recharts-text { fill: #9fc2e0; }
[data-theme="blueprint"] .recharts-default-tooltip { background: var(--bg) !important; border: 1px solid var(--line-2) !important; border-radius: 0 !important; }
[data-theme="blueprint"] .recharts-tooltip-label { color: var(--accent) !important; }
[data-theme="blueprint"] .recharts-tooltip-item { color: var(--ink) !important; }
/* labels uppercased + condensed in blueprint */
[data-theme="blueprint"] .uppercase { font-family: var(--font-display); letter-spacing: 0.1em; }
[data-theme="blueprint"] code.text-sky-300 { color: var(--accent) !important; background: rgba(8,32,58,0.7) !important; border-color: var(--line) !important; }
[data-theme="blueprint"] .md h1 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
[data-theme="blueprint"] .md h2 { color: var(--accent); }
[data-theme="blueprint"] .md p, [data-theme="blueprint"] .md ul li { color: var(--ink-dim); }
[data-theme="blueprint"] .md strong { color: var(--ink); }
[data-theme="blueprint"] .md table th { background: var(--panel-2); color: var(--accent); }
[data-theme="blueprint"] .md table td { color: var(--ink); }
[data-theme="blueprint"] .md code { background: var(--bg); border-color: var(--line); color: var(--accent); }
[data-theme="blueprint"] .bg-rose-500\/15 { background: rgba(255,122,122,0.14) !important; }
[data-theme="blueprint"] .bg-amber-500\/15 { background: rgba(255,209,102,0.14) !important; }
[data-theme="blueprint"] .bg-emerald-400 { background: var(--good) !important; }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ THEME · CIVIL — light cyan portal, pill inputs, network mesh bg    ║
   ║ Inspirado em portais de gestão aeronáutica brasileiros (genérico,  ║
   ║ sem reproduzir marcas). Botões em pílula, labels ciano, asteriscos ║
   ║ vermelhos, fundo malha de pontos conectados.                       ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
[data-theme="civil"] {
  --bg:       #eef2f5;
  --panel:    #ffffff;
  --panel-2:  #f3f7fa;
  --line:     #dbe4ec;
  --line-2:   #bccddc;
  --ink:      #1f3346;
  --ink-dim:  #4a6378;
  --ink-mute: #8aa0b4;
  --accent:   #1f9bd1;     /* cyan-blue primary */
  --good:     #2cb86c;     /* save-button green */
  --warn:     #e08a1c;
  --bad:      #d9534f;
  --violet:   #5b6ec8;
  --radius:   8px;
  --shadow-card: 0 1px 0 rgba(15,40,68,0.04), 0 4px 18px rgba(31,51,70,0.06);
  --font-body:     'Inter', 'Open Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-display:  var(--font-body);
}
[data-theme="civil"], [data-theme="civil"] body {
  background: var(--bg); color: var(--ink);
  /* subtle connected-nodes pattern — generic, hand-rolled SVG */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(31,155,209,0.10) 0 3px, transparent 3.5px),
    radial-gradient(circle at 38% 42%, rgba(31,155,209,0.08) 0 2.5px, transparent 3px),
    radial-gradient(circle at 66% 12%, rgba(31,155,209,0.09) 0 3px, transparent 3.5px),
    radial-gradient(circle at 84% 58%, rgba(31,155,209,0.08) 0 2px, transparent 2.5px),
    radial-gradient(circle at 22% 78%, rgba(31,155,209,0.07) 0 2.5px, transparent 3px),
    radial-gradient(circle at 54% 88%, rgba(31,155,209,0.09) 0 3px, transparent 3.5px),
    linear-gradient(118deg, rgba(31,155,209,0.05) 0 1px, transparent 1.2px 100%),
    linear-gradient(62deg, rgba(31,155,209,0.05) 0 1px, transparent 1.2px 100%);
  background-size: 520px 420px, 520px 420px, 520px 420px, 520px 420px, 520px 420px, 520px 420px, 220px 220px, 260px 260px;
  background-attachment: fixed;
}
[data-theme="civil"] .panel {
  background: var(--panel); border-color: var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
[data-theme="civil"] .panel-2 { background: var(--panel-2); border-color: var(--line); border-radius: var(--radius); }

/* ── Surface mappings (slate hardcoded utilities → light tokens) */
[data-theme="civil"] .bg-\[\#0a1118\] {
  background: #ffffff !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: 1px 0 0 rgba(31,51,70,0.02);
}
[data-theme="civil"] .bg-\[\#0b1117\] { background: var(--bg) !important; color: var(--ink) !important; }
[data-theme="civil"] .bg-\[\#0c131c\] { background: var(--panel) !important; }
[data-theme="civil"] .bg-\[\#0d141d\] { background: #ffffff !important; }
[data-theme="civil"] .bg-\[\#0d141d\]\/60 { background: rgba(255,255,255,0.6) !important; }
[data-theme="civil"] .bg-\[\#141d28\] { background: #eaf3f9 !important; }
[data-theme="civil"] .bg-\[\#141d28\]\/60 { background: rgba(234,243,249,0.6) !important; }
[data-theme="civil"] .bg-\[\#1c2735\] { background: #e1ecf4 !important; color: var(--ink-dim) !important; }
[data-theme="civil"] .bg-\[\#1f2a38\] { background: var(--line) !important; }

/* ── Text mappings */
[data-theme="civil"] .text-slate-100 { color: var(--ink) !important; }
[data-theme="civil"] .text-slate-200 { color: #142536 !important; }
[data-theme="civil"] .text-slate-300, [data-theme="civil"] .text-slate-400 { color: var(--ink-dim) !important; }
[data-theme="civil"] .text-slate-500 { color: var(--ink-mute) !important; }
[data-theme="civil"] .text-sky-200, [data-theme="civil"] .text-sky-300 { color: var(--accent) !important; }
[data-theme="civil"] .text-emerald-300 { color: var(--good) !important; }
[data-theme="civil"] .text-rose-300 { color: var(--bad) !important; }
[data-theme="civil"] .text-amber-300 { color: var(--warn) !important; }
[data-theme="civil"] .text-\[\#0b1117\] { color: #ffffff !important; }

/* ── Primary accent: pill buttons + cyan fills */
[data-theme="civil"] .bg-sky-400,
[data-theme="civil"] .bg-sky-300,
[data-theme="civil"] .bg-sky-400\/90 {
  background: var(--accent) !important; color: #ffffff !important;
  border-radius: 999px !important;
}
[data-theme="civil"] .bg-sky-400\/10 { background: rgba(31,155,209,0.10) !important; }
[data-theme="civil"] .border-sky-500\/30 { border-color: rgba(31,155,209,0.35) !important; }
[data-theme="civil"] .border-sky-500\/50 { border-color: rgba(31,155,209,0.55) !important; }

/* ── Pill radius for the most common control shapes */
[data-theme="civil"] button.rounded-md,
[data-theme="civil"] a.rounded-md,
[data-theme="civil"] .rounded-md.bg-sky-400 { border-radius: 999px !important; }
[data-theme="civil"] input[type="text"],
[data-theme="civil"] input:not([type]),
[data-theme="civil"] input[type="search"],
[data-theme="civil"] input[type="email"],
[data-theme="civil"] input[type="password"] {
  border-radius: 999px !important;
}
/* search box in topbar */
[data-theme="civil"] header .rounded-md.border-line.bg-\[\#0d141d\],
[data-theme="civil"] header .flex.items-center.gap-2.px-3.py-1\.5.rounded-md {
  border-radius: 999px !important;
  background: var(--panel-2) !important;
  border-color: var(--line) !important;
}

/* ── Sidebar active state — soft cyan pill with left rail */
[data-theme="civil"] .bg-sky-400\/10.text-sky-200,
[data-theme="civil"] a.bg-sky-400\/10 {
  background: rgba(31,155,209,0.10) !important;
  color: var(--accent) !important;
  border-radius: 999px !important;
}

/* ── Scrollbar */
[data-theme="civil"] ::-webkit-scrollbar-thumb { background: #c6d3df; border-radius: 999px; }
[data-theme="civil"] ::-webkit-scrollbar-thumb:hover { background: #aebccc; }

/* ── Recharts on light */
[data-theme="civil"] .recharts-text { fill: #6b8295; }
[data-theme="civil"] .recharts-default-tooltip {
  background: #ffffff !important; border: 1px solid var(--line) !important;
  border-radius: 8px !important; box-shadow: 0 12px 32px rgba(31,51,70,0.10) !important;
}
[data-theme="civil"] .recharts-tooltip-label { color: var(--ink) !important; }
[data-theme="civil"] .recharts-tooltip-item { color: var(--ink) !important; }

/* ── Markdown */
[data-theme="civil"] .md h1 { color: var(--ink); }
[data-theme="civil"] .md h2 {
  color: var(--accent); text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
[data-theme="civil"] .md p, [data-theme="civil"] .md ul li { color: var(--ink-dim); }
[data-theme="civil"] .md strong { color: var(--ink); }
[data-theme="civil"] .md table th { background: var(--panel-2); color: var(--ink-dim); }
[data-theme="civil"] .md table td { color: var(--ink); }
[data-theme="civil"] .md code { background: var(--panel-2); border-color: var(--line); color: var(--accent); }
[data-theme="civil"] code.text-sky-300 { color: var(--accent) !important; background: var(--panel-2) !important; }

/* ── Status pill backgrounds */
[data-theme="civil"] .bg-rose-500\/15 { background: rgba(217,83,79,0.12) !important; }
[data-theme="civil"] .bg-amber-500\/15 { background: rgba(224,138,28,0.14) !important; }
[data-theme="civil"] .bg-emerald-400 { background: var(--good) !important; }
[data-theme="civil"] .bg-emerald-400\/10 { background: rgba(44,184,108,0.12) !important; }
[data-theme="civil"] .text-emerald-300 { color: #1e8a4e !important; }

/* ── Section headers: cyan accent with underline rule (form-style) */
[data-theme="civil"] main .panel > .flex.items-end.justify-between.mb-3 > div > .text-\[11px\].uppercase {
  color: var(--accent) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(31,155,209,0.25);
  display: inline-block;
}

/* ── Topbar status pill (Ativo) — softer */
[data-theme="civil"] .bg-emerald-400\/10.text-emerald-300 {
  background: rgba(44,184,108,0.12) !important;
  color: #1e8a4e !important;
  border-color: rgba(44,184,108,0.35) !important;
  border-radius: 999px !important;
}

/* ── Subtle row hover */
[data-theme="civil"] .hover\:bg-\[\#141d28\]:hover { background: #eaf3f9 !important; }

/* ── Footer */
[data-theme="civil"] footer.bg-\[\#0a1118\] {
  background: #ffffff !important;
  color: var(--ink-mute) !important;
}

/* ── Sidebar logo block: soft cyan gradient feel */
[data-theme="civil"] .from-violet-400 { --tw-gradient-from: #5b6ec8 !important; }
[data-theme="civil"] .to-sky-400 { --tw-gradient-to: var(--accent) !important; }

/* ── Tabs underline color */
[data-theme="civil"] .border-sky-400 { border-color: var(--accent) !important; }

/* ── Required-field asterisks: red on labels containing literal '*' */
[data-theme="civil"] label::first-letter { /* harmless if not '*' */ }

/* ── Inputs: clean white pill with cyan focus */
[data-theme="civil"] input,
[data-theme="civil"] textarea,
[data-theme="civil"] select {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
[data-theme="civil"] textarea, [data-theme="civil"] select {
  border-radius: var(--radius) !important;
}
[data-theme="civil"] input:focus,
[data-theme="civil"] textarea:focus,
[data-theme="civil"] select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(31,155,209,0.15);
}

/* ── “Adicionar voo” / primary CTA buttons keep pill + cyan, on hover slightly lighter */
[data-theme="civil"] button.bg-sky-400:hover,
[data-theme="civil"] button.bg-sky-300:hover { background: #1a8bbb !important; }