* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html,
body {
  width: 100%;
  height: 100%;
}


body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 13px;
  background: #eef1f4;
  color: #172033;
  overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

#dashboard-header {
  height: 96px;
  background: #f8fafc;
  color: #172033;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #dbe3e8;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05);
}

.dashboard-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.brand-reload {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-right: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brand-reload:focus-visible {
  outline: 2px solid #78acd0;
  outline-offset: 3px;
  border-radius: 4px;
}

.brand-bird {
  width: 64px;
  height: 64px;
  object-fit: contain;
  transition: transform 160ms ease;
}

.brand-reload:hover .brand-bird {
  transform: scale(1.08);
}

.brand-copy {
  min-width: 0;
}

#dashboard-header .subtitle {
  margin: 0 0 6px;
  color: #4e7da1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.25;
}

#dashboard-header h1 {
  color: #172b3a;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.header-actions,
.filter-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions {
  width: 52%;
  min-width: 0;
  justify-content: flex-end;
}

.filter-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 36px);
  width: 100%;
  min-width: 0;
  gap: 8px;
}

.active-filter-badges {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.active-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid #d3dce3;
  border-radius: 14px;
  background: #fff;
  color: #334155;
  font-size: 10px;
  white-space: nowrap;
}

.active-filter-badge button {
  border: 0;
  padding: 0;
  background: none;
  color: #64748b;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 0;
  background: #fff;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.header-icon-btn:hover {
  border-color: #9ebaa8;
  background: #edf5ef;
  color: #1f633f;
}

.header-icon-btn:focus-visible {
  outline: 2px solid #76a98a;
  outline-offset: 2px;
}

.header-icon-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .theme-icon-sun,
:root[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: block;
}

.filter-menu {
  position: relative;
  z-index: 20;
}

.filter-menu summary {
  list-style: none;
}

.filter-menu summary::-webkit-details-marker {
  display: none;
}

.help-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: min(84vh, 760px);
  margin: auto;
  padding: 24px;
  overflow: auto;
  border: 1px solid #d5dce6;
  border-radius: 14px;
  background: #fff;
  color: #25324a;
  box-shadow: 0 22px 70px #0f172a40;
}

.help-dialog::backdrop { background: #0f172a80; }

.help-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.help-eyebrow {
  margin-bottom: 6px;
  color: #4e7da1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.help-header h2 {
  color: #172b3a;
  font-size: 21px;
  line-height: 1.25;
}

.help-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #d3dce3;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  cursor: pointer;
}

.help-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.help-close:hover { background: #f1f5f9; }

.help-intro {
  margin: 14px 0 18px;
  color: #536176;
  font-size: 13px;
  line-height: 1.55;
}

.guide-section-title {
  margin-bottom: 9px;
  color: #25324a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.guide-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e0e7ec;
  border-radius: 10px;
  background: #f8fafc;
}

.guide-card-wide { grid-column: 1 / -1; }

.guide-card h4 {
  margin-bottom: 3px;
  color: #25324a;
  font-size: 12px;
}

.guide-card p {
  color: #64748b;
  font-size: 11px;
  line-height: 1.4;
}

.guide-controls { margin-top: 17px; }

.guide-control-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.guide-control-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.guide-control-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid #d3dce3;
  border-radius: 8px;
  background: #fff;
  color: #334155;
}

.guide-control-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guide-control-icon img { width: 22px; height: 22px; object-fit: contain; }
.guide-control-item strong,
.guide-control-item small { display: block; }
.guide-control-item strong { color: #334155; font-size: 10px; }
.guide-control-item small { margin-top: 2px; color: #64748b; font-size: 9px; line-height: 1.2; }
.guide-help-icon { background: #edf5ef; color: #26714a; }

.guide-filter-note {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .help-dialog { padding: 17px; }
  .guide-chart-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-card-wide { grid-column: auto; }
  .guide-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.filter-form {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: min(440px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid #d5dce6;
  border-radius: 10px;
  background: #fff;
  color: #172033;
  box-shadow: 0 12px 35px #0f172a40;
}

.filter-form-heading,
.filter-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.filter-form-heading span {
  color: #64748b;
  font-size: 11px;
}

.filter-form label {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: 11px;
}

.filter-form select,
.filter-form input {
  width: 100%;
  min-width: 0;
  padding: 7px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #fff;
  color: #172033;
  font: inherit;
}

.filter-form-actions button {
  border: 0;
  border-radius: 5px;
  padding: 8px 11px;
  cursor: pointer;
  font: inherit;
}

.filter-clear-btn {
  background: #e2e8f0;
  color: #334155;
}

.filter-apply-btn {
  background: #2563eb;
  color: #fff;
}

/* =========================================================
   DASHBOARD ROOT
   ========================================================= */

#dashboard-root {
  width: 100%;
  height: calc(100vh - 96px);

  max-width: none;
  margin: 0 auto;

  padding: 16px;

  overflow: hidden;
  box-sizing: border-box;
}


/* =========================================================
   MAIN GRID
   ========================================================= */

#dashboard-grid {

  width: 100%;
  height: 100%;

  display: grid;

  /*
    3 equal columns
  */
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  /*
    14 equal vertical units

    1–4  = line chart
    5–14 = bottom section
  */
  grid-template-rows:
    repeat(14, minmax(0, 1fr));

  gap: 10px;

  min-width: 0;
  min-height: 0;
}


/* =========================================================
   GENERIC CARD
   ========================================================= */

.card {
  background: #ffffff;

  border: 1px solid #d9dee7;
  border-radius: 8px;

  padding: 12px 14px 12px;

  position: relative;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.card-header {

  display: flex;
  align-items: baseline;
  justify-content: space-between;

  margin-bottom: 8px;

  flex-shrink: 0;
}

.card-title {

  font-size: 12px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.8px;

  color: #25324a;
}

.card-subtitle {

  font-size: 11px;

  color: #718096;

  margin-top: 2px;
  margin-bottom: 4px;

  line-height: 1.4;
}


/* =========================================================
   LINE CHART
   ========================================================= */

#linechart-card {

  grid-column: 1 / 3;

  /*
    Rows 1–4
    = 4 / 14
  */
  grid-row: 1 / 5;

  display: flex;
  flex-direction: column;
}


#linechart-container {

  width: 100%;

  flex: 1;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}


/* =========================================================
   CALENDAR CARD
   ========================================================= */

#calendar-card {

  grid-column: 1;
  grid-row: 5 / 15;

  display: flex;
  flex-direction: column;
}


/* =========================================================
   CALENDAR CONTENT
   ========================================================= */

.calendar-content {

  flex: 1;

  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-rows: repeat(2, minmax(0, 1fr));

  gap: 8px;
}


/* =========================================================
   EACH CALENDAR ROW
   ========================================================= */

.calendar-row {

  min-width: 0;
  min-height: 0;

  display: grid;

  /*
    Calendar + circular chart
    têm exactamente a mesma estrutura
    nos dois rows.
  */
  grid-template-columns: 1.25fr 0.75fr;

  gap: 8px;
}

/* =========================================================
   CALENDAR ELEMENTS
   ========================================================= */

.calendar-row>div {

  min-width: 0;
  min-height: 0;
}


/* =========================================================
   SIGHTINGS — EMPTY SPACE
   ========================================================= */

.calendar-spacer {

  min-width: 0;
  min-height: 0;

  /*
    Mantém o espaço ocupado pelo circular chart,
    mas sem mostrar nada.
  */
}

/* Temporal Patterns — chart subtitles */
.temporal-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.aircraft-part {
  transition: opacity 120ms ease;
}

.temporal-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  flex: 0 0 34px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  line-height: 1.4;
  padding: 6px 4px 8px;
  flex-shrink: 0;
}

.temporal-chart>div[id] {
  flex: 1;
  min-height: 0;
}

/* ── Temporal charts shared legend ── */

#temporal-legend {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  padding: 16px 20px;
  box-sizing: border-box;
  background: #ffffff;
}

.temporal-legend-title {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  text-align: center;
  margin-bottom: 2px;
}

.temporal-legend-item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.temporal-legend-label {
  font-size: 10px;
  font-weight: 600;
  color: #536176;
}

.temporal-gradient {
  width: 100%;
  height: 10px;
  border-radius: 3px;
}

.strikes-gradient {
  background: linear-gradient(to right,
      #fee5d9,
      #fcae91,
      #fb6a4a,
      #de2d26,
      #a50f15);
}

.sightings-gradient {
  background: linear-gradient(to right,
      #deebf7,
      #9ecae1,
      #4292c6,
      #2171b5,
      #084594);
}

.temporal-legend-scale {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #64748b;
}

/* =========================================================
   CHOROPLETH
   ========================================================= */

#map-card {
  grid-column: 2;
  grid-row: 5 / 15;

  display: flex;
  flex-direction: column;
}

#map-container {
  position: relative;

  flex: 1;
  min-width: 0;
  min-height: 0;

  /* Reserve space for the legend */
  display: flex;
  flex-direction: column;
}

#map-container canvas,
#map-container svg {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: calc(100% - 42px);
}

#map-container svg {
  display: block;
  z-index: 1;
}

#map-container canvas {
  z-index: 2;
  pointer-events: none;
}


/* =========================================================
   MAP LEGEND
   ========================================================= */

#map-legend {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;

  background: #ffffff;
  z-index: 3;
}

.legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 7px;
}

.legend-label {
  font-size: 10px;
  font-weight: 600;
  color: #536176;
  white-space: nowrap;
}

.gradient-bar {
  display: block;

  width: 65px;
  height: 7px;

  border-radius: 3px;

  background: linear-gradient(to right,
      #e3eef9,
      #9ecae1,
      #4292c6,
      #08519c);
}

.legend-strikes {
  gap: 6px;
}

.strike-dot {
  display: inline-block;

  width: 7px;
  height: 7px;

  flex-shrink: 0;
  border-radius: 50%;

  background: rgba(220, 38, 38, 0.85);
}

/* =========================================================
   AIRCRAFT
   ========================================================= */

#aircraft-card {
  grid-column: 3;
  grid-row: 1 / 8;

  display: flex;
  flex-direction: column;
}

#aircraft-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* =========================================================
   AIRCRAFT LEGEND
   ========================================================= */

#aircraft-legend {
  flex-shrink: 0;

  width: 100%;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;

  background: #ffffff;
}

.legend-aircraft-strikes,
.legend-aircraft-damage {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  gap: 7px;
}

/* Gradiente dos strikes no avião */

.aircraft-gradient-bar {
  display: block;

  width: 65px;
  height: 7px;

  border-radius: 3px;

  background: linear-gradient(to right,
      #f7fbff,
      #c6dbef,
      #6baed6,
      #2171b5,
      #08306b);
}

/* Cor dos danos no bar chart */

.damage-dot {
  display: inline-block;

  width: 9px;
  height: 9px;

  flex-shrink: 0;

  border-radius: 2px;

  background: #f28e2b;
}


/* =========================================================
   SANKEY
   ========================================================= */

#sankey-card {
  grid-column: 3;
  grid-row: 8 / 15;

  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

#sankey-container {
  flex: 1 1 0;

  width: 100%;
  min-width: 0;
  min-height: 0;

  overflow: hidden;
}

#sankey-container svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================
   SANKEY LEGEND
   ========================================================= */

#sankey-legend {
  flex-shrink: 0;

  width: 100%;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  background: #ffffff;
}

.sankey-damage-dot {
  display: inline-block;

  width: 9px;
  height: 9px;

  flex-shrink: 0;
  border-radius: 2px;
}

.damage-none {
  background: #F3F4F6;
  border: 1px solid #d1d5db;
}

.damage-minor {
  background: #A1A1AA;
}

.damage-substantial {
  background: #52525B;
}

.damage-destroyed {
  background: #18181B;
}


/* =========================================================
   BRUSH
   ========================================================= */

.brush .selection {

  fill: #2f6fed;

  fill-opacity: 0.14;

  stroke: #2f6fed;

  stroke-width: 1px;
}


/* =========================================================
   D3 AXES
   ========================================================= */

.axis text {
  font-size: 10px;
  fill: #555;
  font-family: inherit;
}

.axis path {
  stroke: #bbb;
}

.axis line {
  stroke: #bbb;
}

.grid line {
  stroke: #e8eaed;
  stroke-dasharray: 3, 3;
}

.grid path {
  display: none;
}

.axis-label {
  font-size: 11px;
  fill: #777;
  font-family: inherit;
}

.chart-title {
  font-size: 12px;
  font-weight: 600;
  fill: #1a1a2e;
}


/* =========================================================
   TOOLTIP
   ========================================================= */

#tooltip {

  position: fixed;

  pointer-events: none;

  background: #ffffff;

  border: 1px solid #d8dee8;

  border-radius: 6px;

  padding: 8px 12px;

  font-size: 12px;

  color: #263247;

  opacity: 0;

  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.14);

  line-height: 1.6;

  z-index: 999;

  transition: opacity 0.12s;
}


/* =========================================================
   SMALLER SCREENS
   ========================================================= */

@media (max-width: 1000px) {

  #dashboard-header {
    padding: 10px 16px;
    gap: 12px;
  }

  .header-actions { width: 54%; }

  #dashboard-header h1 { font-size: 18px; }
  #dashboard-header .subtitle { font-size: 9px; }

  #dashboard-root {
    padding: 7px;
  }

  #dashboard-grid {
    gap: 7px;
  }

  .card {
    padding: 9px 10px;
  }

  .card-subtitle {
    font-size: 9px;
  }
}

@media (max-width: 700px) {
  #dashboard-header {
    height: 118px;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
  }

  .brand-reload { margin-right: 10px; }
  .brand-bird {
    width: 44px;
    height: 44px;
  }

  #dashboard-header h1 {
    font-size: 15px;
  }

  #dashboard-header .subtitle { font-size: 7px; }

  .header-actions {
    width: 100%;
  }

  .filter-toolbar {
    width: 100%;
  }

  #dashboard-root {
    height: calc(100vh - 118px);
  }
}
#initial-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #f8fafc;
  color: #0f172a;
  opacity: 1;
  visibility: visible;
  transition: opacity 450ms ease, visibility 450ms ease;
}

#initial-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content {
  width: min(90vw, 420px);
  text-align: center;
}

.loading-mark {
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 6px;
  margin-bottom: 28px;
}

.loading-mark span {
  width: 8px;
  height: 20px;
  border-radius: 8px;
  background: #2563eb;
  animation: loading-pulse 900ms ease-in-out infinite alternate;
}

.loading-mark span:nth-child(2) {
  height: 34px;
  animation-delay: 180ms;
}

.loading-mark span:nth-child(3) {
  height: 25px;
  animation-delay: 360ms;
}

.loading-eyebrow {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.loading-content h1 {
  margin: 0;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.loading-tagline {
  margin: 8px 0 0;
  color: #385f78;
  font-size: clamp(14px, 2.5vw, 17px);
  font-weight: 600;
  line-height: 1.35;
}

.loading-message {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
}

@keyframes loading-pulse {
  from { transform: scaleY(0.55); opacity: 0.55; }
  to { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #initial-loading { transition: none; }
  .loading-mark span { animation: none; }
}

/* =========================================================
   DARK THEME
   ========================================================= */

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="dark"] body {
  background: #111a21;
  color: #e2e8ed;
}

:root[data-theme="dark"] #dashboard-header {
  background: #18242d;
  color: #e8eef2;
  border-bottom-color: #2d3c46;
  box-shadow: 0 2px 8px #0003;
}

:root[data-theme="dark"] #dashboard-header h1 { color: #edf3f5; }
:root[data-theme="dark"] #dashboard-header .subtitle { color: #a5cbe5; }
:root[data-theme="dark"] .brand-bird { filter: invert(1); }
:root[data-theme="dark"] .dashboard-brand { border-left-color: #6fa9d1; }

:root[data-theme="dark"] .header-icon-btn,
:root[data-theme="dark"] .active-filter-badge {
  background: #202e38;
  color: #dce5eb;
  border-color: #3b4a54;
}

:root[data-theme="dark"] .header-icon-btn:hover {
  background: #2b3c46;
  border-color: #719c7d;
  color: #d7eddb;
}

:root[data-theme="dark"] .active-filter-badge button { color: #c2d0d8; }
:root[data-theme="dark"] .header-icon-btn:focus-visible { outline-color: #8fc79f; }

:root[data-theme="dark"] .filter-form {
  background: #1b2932;
  color: #e2e8ed;
  border-color: #394a55;
  box-shadow: 0 12px 35px #0008;
}

:root[data-theme="dark"] .filter-form-heading span,
:root[data-theme="dark"] .filter-form label { color: #aab9c2; }
:root[data-theme="dark"] .filter-form select,
:root[data-theme="dark"] .filter-form input {
  color: #e2e8ed;
  background: #111a21;
  border-color: #43545e;
}
:root[data-theme="dark"] .filter-clear-btn { background: #34434d; color: #e2e8ed; }

:root[data-theme="dark"] .card {
  background: #1a2730;
  border-color: #2e3e48;
  box-shadow: 0 1px 4px #0002;
}

:root[data-theme="dark"] .card-title { color: #dce6eb; }
:root[data-theme="dark"] .card-subtitle,
:root[data-theme="dark"] .temporal-subtitle { color: #a8b7c0; }
:root[data-theme="dark"] #temporal-legend,
:root[data-theme="dark"] #map-legend,
:root[data-theme="dark"] #aircraft-legend,
:root[data-theme="dark"] #sankey-legend { background: #1a2730; }
:root[data-theme="dark"] .temporal-legend-title,
:root[data-theme="dark"] .temporal-legend-label,
:root[data-theme="dark"] .legend-label,
:root[data-theme="dark"] .temporal-legend-scale { color: #b2c0c8; }

:root[data-theme="dark"] .axis text,
:root[data-theme="dark"] .axis-label,
:root[data-theme="dark"] #aircraft-container text,
:root[data-theme="dark"] .sankey-header {
  fill: #b5c3cc !important;
  color: #b5c3cc;
}
:root[data-theme="dark"] #aircraft-container .bar-no-damage-label {
  fill: #33414a !important;
}
:root[data-theme="dark"] .axis path,
:root[data-theme="dark"] .axis line,
:root[data-theme="dark"] .rc-ring,
:root[data-theme="dark"] .rc-guide { stroke: #52616b !important; }
:root[data-theme="dark"] .grid line { stroke: #34434d; }
:root[data-theme="dark"] .rc-inner { fill: #202e38 !important; stroke: #52616b !important; }
:root[data-theme="dark"] .rc-label { fill: #c2cdd3 !important; }

:root[data-theme="dark"] .hm-cell.is-empty { fill: #263640 !important; }
:root[data-theme="dark"] .hm-xaxis text,
:root[data-theme="dark"] .hm-yaxis text { fill: #aebdc6; }
:root[data-theme="dark"] .map-state[fill="#eef1f5"] { fill: #2a3943; }
:root[data-theme="dark"] .map-state { stroke: #354650 !important; }
:root[data-theme="dark"] .help-dialog {
  background: #1b2932;
  color: #e2e8ed;
  border-color: #394a55;
  box-shadow: 0 22px 70px #0009;
}
:root[data-theme="dark"] .help-eyebrow { color: #a5cbe5; }
:root[data-theme="dark"] .help-header h2,
:root[data-theme="dark"] .guide-section-title,
:root[data-theme="dark"] .guide-card h4 { color: #e4edf1; }
:root[data-theme="dark"] .help-intro,
:root[data-theme="dark"] .guide-card p,
:root[data-theme="dark"] .guide-filter-note { color: #b7c4cc; }
:root[data-theme="dark"] .guide-card {
  background: #202e38;
  border-color: #354650;
}
:root[data-theme="dark"] .guide-control-icon {
  background: #202e38;
  color: #dce5eb;
  border-color: #3b4a54;
}
:root[data-theme="dark"] .guide-control-icon img { filter: invert(1); }
:root[data-theme="dark"] .guide-control-item strong { color: #e0e8ed; }
:root[data-theme="dark"] .guide-control-item small { color: #aab9c2; }
:root[data-theme="dark"] .guide-help-icon { background: #293a43; color: #a5cdb3; }
:root[data-theme="dark"] .guide-filter-note { border-top-color: #354650; }
:root[data-theme="dark"] .help-close {
  background: #202e38;
  color: #dce5eb;
  border-color: #3b4a54;
}
:root[data-theme="dark"] .help-close:hover { background: #2b3c46; }

:root[data-theme="dark"] #tooltip {
  background: #202e38;
  color: #e5edf1;
  border-color: #465761;
  box-shadow: 0 5px 18px #0006;
}

:root[data-theme="dark"] #initial-loading {
  background: #111a21;
  color: #e2e8ed;
}
:root[data-theme="dark"] .loading-message,
:root[data-theme="dark"] .loading-eyebrow { color: #aab9c2; }
:root[data-theme="dark"] .loading-tagline { color: #a5cbe5; }

:root[data-theme="dark"] body,
:root[data-theme="dark"] #dashboard-header,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] #tooltip,
:root[data-theme="dark"] .header-icon-btn,
:root[data-theme="dark"] .active-filter-badge,
:root[data-theme="dark"] .filter-form {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}