/* ==========================================================================
   Comprehensive Theme Architecture: 5 Palettes x 2 Modes (10 Permutations)
   Default: Cyber Slate (Cyan) Light Mode
   ========================================================================== */

/* 1. Cyber Slate Palette (Cyan) */
[data-theme-palette="cyan"][data-theme-mode="light"],
:root {
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --sub-panel-bg: #f1f5f9;
  --top-panel-bg: rgba(255, 255, 255, 0.96);
  --border: #cbd5e1;
  --text: #0f172a;
  --text-dim: #64748b;
  --accent: #0284c7;
  --accent-hover: #0369a1;
  --success: #16a34a;
  --purple: #7c3aed;
  --danger: #dc2626;
  --amber: #d97706;
  --scope-screen-bg: #090e1a;
  --aura: #0284c7;
  --led-off: #94a3b8;
  --led-on: #16a34a;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}
[data-theme-palette="cyan"][data-theme-mode="dark"] {
  --bg: #070b12;
  --card-bg: #111827;
  --sub-panel-bg: #0b111e;
  --top-panel-bg: rgba(17, 24, 39, 0.96);
  --border: #1e293b;
  --text: #f8fafc;
  --text-dim: #94a3b8;
  --accent: #06b6d4;
  --accent-hover: #22d3ee;
  --success: #10b981;
  --purple: #8b5cf6;
  --danger: #ef4444;
  --amber: #f59e0b;
  --scope-screen-bg: #070b12;
  --aura: #00e5ff;
  --led-off: #334155;
  --led-on: #10b981;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
}

/* 2. Tactical Matrix Palette (Emerald) */
[data-theme-palette="emerald"][data-theme-mode="light"] {
  --bg: #f0fdf4;
  --card-bg: #ffffff;
  --sub-panel-bg: #dcfce7;
  --top-panel-bg: rgba(255, 255, 255, 0.96);
  --border: #bbf7d0;
  --text: #052e16;
  --text-dim: #166534;
  --accent: #15803d;
  --accent-hover: #166534;
  --success: #16a34a;
  --purple: #0f766e;
  --danger: #b91c1c;
  --amber: #b45309;
  --scope-screen-bg: #05110a;
  --aura: #15803d;
  --led-off: #86efac;
  --led-on: #15803d;
}
[data-theme-palette="emerald"][data-theme-mode="dark"] {
  --bg: #05110a;
  --card-bg: #0b1e13;
  --sub-panel-bg: #06180e;
  --top-panel-bg: rgba(11, 30, 19, 0.96);
  --border: #143823;
  --text: #ecfdf5;
  --text-dim: #6ee7b7;
  --accent: #10b981;
  --accent-hover: #34d399;
  --success: #10b981;
  --purple: #14b8a6;
  --danger: #ef4444;
  --amber: #f59e0b;
  --scope-screen-bg: #030a06;
  --aura: #10b981;
  --led-off: #1e3a29;
  --led-on: #10b981;
}

/* 3. Studio Violet Palette (Amethyst) */
[data-theme-palette="amethyst"][data-theme-mode="light"] {
  --bg: #faf5ff;
  --card-bg: #ffffff;
  --sub-panel-bg: #f3e8ff;
  --top-panel-bg: rgba(255, 255, 255, 0.96);
  --border: #e9d5ff;
  --text: #3b0764;
  --text-dim: #6b21a8;
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --success: #059669;
  --purple: #9333ea;
  --danger: #dc2626;
  --amber: #d97706;
  --scope-screen-bg: #0e0918;
  --aura: #7c3aed;
  --led-off: #d8b4fe;
  --led-on: #7c3aed;
}
[data-theme-palette="amethyst"][data-theme-mode="dark"] {
  --bg: #0e0918;
  --card-bg: #181028;
  --sub-panel-bg: #130a22;
  --top-panel-bg: rgba(24, 16, 40, 0.96);
  --border: #2e1d4d;
  --text: #f5f3ff;
  --text-dim: #c084fc;
  --accent: #a855f7;
  --accent-hover: #c084fc;
  --success: #10b981;
  --purple: #c084fc;
  --danger: #f43f5e;
  --amber: #fbbf24;
  --scope-screen-bg: #080410;
  --aura: #a855f7;
  --led-off: #3b2064;
  --led-on: #a855f7;
}

/* 4. Aviation Industrial Palette (Amber) */
[data-theme-palette="amber"][data-theme-mode="light"] {
  --bg: #fffbeb;
  --card-bg: #ffffff;
  --sub-panel-bg: #fef3c7;
  --top-panel-bg: rgba(255, 255, 255, 0.96);
  --border: #fde68a;
  --text: #451a03;
  --text-dim: #78350f;
  --accent: #b45309;
  --accent-hover: #92400e;
  --success: #15803d;
  --purple: #b45309;
  --danger: #b91c1c;
  --amber: #d97706;
  --scope-screen-bg: #140f07;
  --aura: #b45309;
  --led-off: #fcd34d;
  --led-on: #b45309;
}
[data-theme-palette="amber"][data-theme-mode="dark"] {
  --bg: #140f07;
  --card-bg: #22190c;
  --sub-panel-bg: #1c1409;
  --top-panel-bg: rgba(34, 25, 12, 0.96);
  --border: #3d2c14;
  --text: #fffbeb;
  --text-dim: #fcd34d;
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --success: #10b981;
  --purple: #f59e0b;
  --danger: #ef4444;
  --amber: #f59e0b;
  --scope-screen-bg: #0a0703;
  --aura: #f59e0b;
  --led-off: #452b0c;
  --led-on: #f59e0b;
}

/* 5. Tactical Night-Ops Palette (Crimson) */
[data-theme-palette="crimson"][data-theme-mode="light"] {
  --bg: #fff1f2;
  --card-bg: #ffffff;
  --sub-panel-bg: #ffe4e6;
  --top-panel-bg: rgba(255, 255, 255, 0.96);
  --border: #fecdd3;
  --text: #4c0519;
  --text-dim: #9f1239;
  --accent: #be123c;
  --accent-hover: #9f1239;
  --success: #15803d;
  --purple: #be123c;
  --danger: #e11d48;
  --amber: #d97706;
  --scope-screen-bg: #150608;
  --aura: #be123c;
  --led-off: #fda4af;
  --led-on: #be123c;
}
[data-theme-palette="crimson"][data-theme-mode="dark"] {
  --bg: #150608;
  --card-bg: #240b0e;
  --sub-panel-bg: #1b070a;
  --top-panel-bg: rgba(36, 11, 14, 0.96);
  --border: #44141a;
  --text: #fff1f2;
  --text-dim: #fda4af;
  --accent: #f43f5e;
  --accent-hover: #fb7185;
  --success: #10b981;
  --purple: #f43f5e;
  --danger: #ef4444;
  --amber: #f59e0b;
  --scope-screen-bg: #0c0203;
  --aura: #f43f5e;
  --led-off: #4c1117;
  --led-on: #f43f5e;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body {
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 1rem;
}

/* Header & Theme Controls */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.theme-controls-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

h1 {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--purple), #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p.subtitle { color: var(--text-dim); font-size: 0.88rem; }

/* Panels and Containers */
.autopilot-panel, .summary-table-panel, .top-panel, .virtual-window-bar, .factor-drawer-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.autopilot-panel {
  border-color: var(--purple);
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.autopilot-group, .panel-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.autopilot-title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--purple);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.autopilot-badge {
  font-size: 0.7rem;
  font-weight: 800;
  font-family: monospace;
  padding: 0.25rem 0.55rem;
  border-radius: 12px;
  background: var(--sub-panel-bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.autopilot-badge.active {
  background: rgba(22, 163, 74, 0.15);
  color: var(--success);
  border-color: var(--success);
}

.autopilot-badge.override {
  background: rgba(217, 119, 6, 0.18);
  color: var(--amber);
  border-color: var(--amber);
  animation: pulseLed 1.2s infinite alternate;
}

/* Bounds Controls Panel */
.bounds-control-strip {
  background: var(--sub-panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Summary Table */
.summary-table-panel { padding: 0.85rem 1.1rem; }
.summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.progress-summary-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; text-align: left; }
.progress-summary-table th { color: var(--text-dim); font-size: 0.68rem; text-transform: uppercase; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); }
.progress-summary-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
.progress-summary-table tr.total-row td { border-top: 2px solid var(--border); background: var(--sub-panel-bg); font-weight: 800; }

.mini-bar-bg { width: 90px; height: 6px; background: var(--sub-panel-bg); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.mini-bar-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.25s ease; }

/* Sticky Top Panel */
.top-panel {
  position: sticky;
  top: 0.8rem;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.panel-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; }
.analytics-strip { background: var(--sub-panel-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.analytics-metric { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; }
.metric-label { color: var(--text-dim); text-transform: uppercase; font-size: 0.68rem; font-weight: 800; }

/* Engine Cluster Sub-Bus Dashboard & Oscilloscopes */
.engine-cluster-matrix-strip {
  background: var(--sub-panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.engine-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.5rem;
  max-height: 180px;
  overflow-y: auto;
}

.engine-cluster-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: var(--shadow-sm);
}

.cluster-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cluster-title { font-size: 0.72rem; font-weight: 800; color: var(--purple); }
.cluster-scope-canvas {
  width: 100%;
  height: 38px;
  background: var(--scope-screen-bg);
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* Compact Track Cards (Zero Canvas) */
.tracks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
  width: 100%;
}

.track-card-compact {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  box-shadow: var(--shadow-sm);
}

.track-card-compact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--track-color, var(--accent));
}

.track-card-compact.culled-track { display: none !important; }
.track-card-compact.disabled-card { opacity: 0.45; filter: grayscale(0.7); }

.card-title {
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--track-color, var(--text));
}

.engine-cluster-tag {
  font-size: 0.6rem;
  font-family: monospace;
  font-weight: 800;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  background: var(--sub-panel-bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.scale-readout-compact {
  color: var(--aura);
  font-family: monospace;
  font-size: 0.74rem;
  font-weight: 800;
}

.btn-micro {
  padding: 0.15rem 0.35rem;
  font-size: 0.64rem;
  font-weight: 800;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--sub-panel-bg);
  color: var(--text);
  cursor: pointer;
}

/* Phase Degree Input Wrapper */
.phase-input-wrapper { display: inline-flex; align-items: center; position: relative; }
.phase-deg-field { width: 44px !important; padding-right: 12px !important; font-size: 0.72rem !important; }
.deg-symbol { position: absolute; right: 4px; font-size: 0.7rem; font-weight: 800; color: var(--text-dim); pointer-events: none; }

/* Buttons & Dropdowns */
.btn {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.74rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.btn:hover { background: var(--sub-panel-bg); }
.btn-primary { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.btn-danger { background: var(--danger); color: #ffffff; border-color: var(--danger); }
.btn-amber { background: var(--amber); color: #ffffff; border-color: var(--amber); }
.btn-purple { background: var(--purple); color: #ffffff; border-color: var(--purple); }

.select-input, .ui-num {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: 0.74rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
}

.toggle-btn {
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.68rem;
  cursor: pointer;
}
.toggle-btn.active-input-btn { background: var(--accent); color: #ffffff; }
.toggle-btn.active-layer { background: var(--success); color: #ffffff; }
.toggle-btn.active-mute { background: var(--danger); color: #ffffff; }
.toggle-btn.active-solo { background: var(--amber); color: #ffffff; }

canvas.master-canvas { width: 110px; height: 32px; background: var(--scope-screen-bg); border-radius: 4px; border: 1px solid var(--border); }