/* AGRIXON — Mission Control theme layer (dark tone; the light tone is in mission-light.css).
   Loaded after app.css / redesign.css / tools.css on every page and switched on by
   html[data-mc="dark"] (set by mission-theme.js). It only restyles: no layout or behaviour changes,
   so every existing tool keeps working. Remove the attribute to get the original look back. */

html[data-mc="dark"] {
  --bg: #05070a;
  --surface: #0b1015;
  --surface-2: #101820;
  --ink: #e8eef2;
  --muted: #8f9daa;
  --line: rgba(150, 195, 215, 0.14);
  --line-strong: rgba(150, 195, 215, 0.28);
  --green: #5fe0b0;
  --soft: #0f1a1c;
  --side: #04070a;
  --orange: #f0b33a;
  --red: #ff7a66;
  --cyan: #5fb2c9;
  --violet: #b89cff;
  --mc-glow: 0 0 0 1px rgba(95, 224, 176, 0.08), 0 18px 60px rgba(0, 0, 0, 0.45);
  --mc-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --mc-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
  font-family: var(--mc-sans);
  color: var(--ink);
  background: var(--bg);
}

/* Deep-space backdrop: faint stars, a horizon glow and a fine survey grid. */
html[data-mc="dark"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1px 1px at 72% 9%, rgba(255, 255, 255, 0.28), transparent 60%),
    radial-gradient(1px 1px at 38% 62%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(1px 1px at 88% 44%, rgba(255, 255, 255, 0.22), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 30%, rgba(180, 230, 255, 0.35), transparent 60%),
    radial-gradient(1200px 520px at 75% -10%, rgba(47, 127, 209, 0.16), transparent 70%),
    radial-gradient(900px 480px at 0% 110%, rgba(95, 224, 176, 0.08), transparent 70%),
    linear-gradient(rgba(150, 195, 215, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 195, 215, 0.035) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, auto, auto, auto, 64px 64px, 64px 64px;
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
html[data-mc="dark"] .app { background: transparent; }

/* Typography: crisp sans for content, monospace telemetry for labels. */
html[data-mc="dark"] h1, html[data-mc="dark"] h2, html[data-mc="dark"] h3 { color: var(--ink); letter-spacing: -0.01em; }
html[data-mc="dark"] .page-heading h1 { font-weight: 600; letter-spacing: -0.025em; text-shadow: 0 2px 30px rgba(95, 178, 201, 0.18); }
html[data-mc="dark"] .page-heading h1 span { color: var(--green); }
html[data-mc="dark"] .eyebrow,
html[data-mc="dark"] .section-label,
html[data-mc="dark"] .crumb,
html[data-mc="dark"] .overview-item small,
html[data-mc="dark"] .image-date small,
html[data-mc="dark"] .f3d-side-head,
html[data-mc="dark"] .f3d-head small,
html[data-mc="dark"] .tools-tab {
  font-family: var(--mc-mono);
  letter-spacing: 0.12em;
}
html[data-mc="dark"] .eyebrow, html[data-mc="dark"] .section-label > span:first-child { color: var(--orange); }
html[data-mc="dark"] a { color: inherit; }
html[data-mc="dark"] .text-link { color: var(--green); }

/* Top bar: dark glass with a hairline. */
html[data-mc="dark"] .topbar {
  background: rgba(5, 8, 11, 0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
html[data-mc="dark"] .topbar-brand .brand-logo-light { display: none; }
html[data-mc="dark"] .topbar-brand .brand-logo-dark { display: block; }
html[data-mc="dark"] .topnav a, html[data-mc="dark"] .nav-more-btn { color: var(--muted); }
html[data-mc="dark"] .topnav a:hover, html[data-mc="dark"] .nav-more-btn:hover { color: var(--ink); }
html[data-mc="dark"] .topnav a.active, html[data-mc="dark"] .topnav a[aria-current="page"],
html[data-mc="dark"] .nav-more.active > .nav-more-btn {
  color: #04120c;
  background: var(--green);
  box-shadow: 0 0 24px rgba(95, 224, 176, 0.35);
}
html[data-mc="dark"] .nav-more-menu { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--mc-glow); }
html[data-mc="dark"] .slash { color: var(--line-strong); }

/* Surfaces: instrument panels rather than cards. */
html[data-mc="dark"] .overview,
html[data-mc="dark"] .map-workspace,
html[data-mc="dark"] .analysis-panel,
html[data-mc="dark"] .card,
html[data-mc="dark"] .tools-card-head,
html[data-mc="dark"] .source-card,
html[data-mc="dark"] .table-wrap,
html[data-mc="dark"] dialog,
html[data-mc="dark"] .fields-popover,
html[data-mc="dark"] .map-onboarding,
html[data-mc="dark"] .nav-more-menu {
  background: linear-gradient(180deg, rgba(16, 24, 32, 0.92), rgba(9, 13, 18, 0.92));
  border-color: var(--line);
  box-shadow: var(--mc-glow);
  color: var(--ink);
}
html[data-mc="dark"] .overview { backdrop-filter: blur(10px); }
html[data-mc="dark"] .metric-icon, html[data-mc="dark"] .state-icon {
  background: rgba(95, 224, 176, 0.08);
  border-color: rgba(95, 224, 176, 0.22);
  color: var(--green);
}
html[data-mc="dark"] .overview-item b, html[data-mc="dark"] .overview-item strong { color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-mc="dark"] .tiny-orbit, html[data-mc="dark"] .panel-orbit { color: var(--cyan); }
html[data-mc="dark"] .pill, html[data-mc="dark"] .tag {
  background: rgba(95, 178, 201, 0.1);
  border: 1px solid rgba(95, 178, 201, 0.3);
  color: #9fd7ea;
  font-family: var(--mc-mono);
  letter-spacing: 0.06em;
}
html[data-mc="dark"] .analysis-divider { background: var(--line); }
html[data-mc="dark"] .source-caption, html[data-mc="dark"] .point-note, html[data-mc="dark"] .muted { color: var(--muted); }

/* Buttons. */
html[data-mc="dark"] .btn, html[data-mc="dark"] .icon-btn, html[data-mc="dark"] .map-button, html[data-mc="dark"] .map-tool {
  background: rgba(16, 24, 32, 0.85);
  color: var(--ink);
  border-color: var(--line-strong);
}
html[data-mc="dark"] .btn:hover, html[data-mc="dark"] .icon-btn:hover, html[data-mc="dark"] .map-button:hover { border-color: var(--green); }
html[data-mc="dark"] .btn.primary {
  color: #04120c;
  background: linear-gradient(180deg, #7ff0c4, #4fcf9f);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(95, 224, 176, 0.35), 0 8px 28px rgba(95, 224, 176, 0.22);
}
html[data-mc="dark"] .btn.primary:hover { background: linear-gradient(180deg, #92f5cf, #5fe0b0); }
html[data-mc="dark"] .btn.danger { border-color: rgba(255, 122, 102, 0.45); color: var(--red); }
html[data-mc="dark"] .satellite-button {
  background: rgba(16, 24, 32, 0.9);
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-mc="dark"] .satellite-button:hover { border-color: var(--cyan); box-shadow: 0 0 24px rgba(95, 178, 201, 0.18); }
html[data-mc="dark"] :focus-visible { outline: 2px solid #ffd66b; outline-offset: 2px; }

/* Form controls. */
html[data-mc="dark"] input, html[data-mc="dark"] select, html[data-mc="dark"] textarea {
  background-color: #0a1015;
  color: var(--ink);
  border-color: var(--line-strong);
}
html[data-mc="dark"] input::placeholder, html[data-mc="dark"] textarea::placeholder { color: #5f6d79; }
html[data-mc="dark"] .season-control select, html[data-mc="dark"] .connection-pill { background: rgba(16, 24, 32, 0.85); color: var(--ink); border-color: var(--line); }

/* Map: dark basemap only on the plain "Map" layer; satellite and NDVI keep their colours. */
html[data-mc="dark"] .map-stage { background: #070b0f; }
html[data-mc="dark"][data-mc-map="base"][data-mc-basemap="vector"] #map .maplibregl-canvas {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92) saturate(0.55);
}
html[data-mc="dark"] .map-state { background: #070b0f; }
html[data-mc="dark"] .loading-line { background: var(--line); }
html[data-mc="dark"] .map-caption { background: rgba(5, 8, 11, 0.72); color: var(--muted); }
html[data-mc="dark"] .layer-tabs, html[data-mc="dark"] .image-date, html[data-mc="dark"] .map-tools, html[data-mc="dark"] .drawing-bar {
  background: rgba(8, 12, 16, 0.86);
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
html[data-mc="dark"] .layer-tabs button { color: var(--muted); }
html[data-mc="dark"] .layer-tabs button.active, html[data-mc="dark"] .layer-tab.active { background: var(--green); color: #04120c; }
html[data-mc="dark"] .maplibregl-ctrl-attrib { background: rgba(5, 8, 11, 0.6) !important; color: var(--muted); }
html[data-mc="dark"] .maplibregl-ctrl-attrib a { color: var(--muted); }

/* Status and alerts. */
html[data-mc="dark"] .status-dot.neutral { background: #5b6772; }
html[data-mc="dark"] .status-dot.warning { background: var(--orange); }
html[data-mc="dark"] .result-badge.warning, html[data-mc="dark"] .notice {
  background: rgba(240, 179, 58, 0.08);
  border-color: rgba(240, 179, 58, 0.35);
  color: #f6d48a;
}
html[data-mc="dark"] .form-error { background: rgba(255, 122, 102, 0.08); border-color: rgba(255, 122, 102, 0.4); }
html[data-mc="dark"] .alert-row.warning { color: var(--orange); background: rgba(240, 179, 58, 0.08); }
html[data-mc="dark"] .alert-row.danger { color: var(--red); background: rgba(255, 122, 102, 0.08); }
html[data-mc="dark"] .toast { background: #0b1116; color: var(--ink); border-color: var(--line-strong); box-shadow: var(--mc-glow); }
html[data-mc="dark"] dialog::backdrop { background: rgba(2, 4, 6, 0.72); backdrop-filter: blur(3px); }
html[data-mc="dark"] .modal-footer { background: transparent; border-color: var(--line); }

/* Tables (history, tools). */
html[data-mc="dark"] table { color: var(--ink); }
html[data-mc="dark"] th { color: var(--muted); font-family: var(--mc-mono); font-weight: 500; letter-spacing: 0.06em; }
html[data-mc="dark"] td, html[data-mc="dark"] th { border-color: var(--line); }
html[data-mc="dark"] tbody tr:hover { background: rgba(95, 178, 201, 0.05); }

/* Tools and sensors pages. */
html[data-mc="dark"] body.tools-page { background-color: var(--bg); }
html[data-mc="dark"] .tools-tabs { background: rgba(5, 8, 11, 0.6); border-bottom: 1px solid var(--line); }
html[data-mc="dark"] .tools-tab { color: var(--muted); }
html[data-mc="dark"] .tools-tab.is-active { background: var(--green); color: #04120c; }
html[data-mc="dark"] #terrain-map, html[data-mc="dark"] #terrain-profile, html[data-mc="dark"] .satellite-preview,
html[data-mc="dark"] .tools-ndvi-grid img { background: #0a1015; border-color: var(--line); }
html[data-mc="dark"] .tools-integration-card .tools-badge.warn { background: rgba(240, 179, 58, 0.12); color: #f6d48a; }
html[data-mc="dark"] .tools-integration-card .tools-badge.off { background: rgba(255, 122, 102, 0.1); color: #ffb4a6; }

/* Old 3D dialog follows the same palette. */
html[data-mc="dark"] .f3d-dialog, html[data-mc="dark"] .f3d-canvas { background: #05070a; }
html[data-mc="dark"] .f3d-side { background: #080c10; }

/* Scrollbars. */
html[data-mc="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-mc="dark"] ::-webkit-scrollbar-thumb { background: #1d2a33; border-radius: 10px; border: 2px solid var(--bg); }
html[data-mc="dark"] ::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  html[data-mc="dark"] * { scroll-behavior: auto !important; }
}