/* Theme System */
:root, [data-theme="midnight"] {
  --bg: #0a0e1a;
  --bg-gradient: linear-gradient(135deg, #0a0e1a 0%, #0f1628 50%, #0a0e1a 100%);
  --surface: #1a1f35;
  --surface-alpha: rgba(255,255,255,0.04);
  --surface-hover: rgba(255,255,255,0.08);
  --surface-elevated: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(0,240,255,0.3);
  --text: #ffffff;
  --text-muted: rgba(255,255,255,0.7);
  --text-dim: rgba(255,255,255,0.4);
  --accent1: #00f0ff;
  --accent2: #ff00c8;
  --accent3: #ffb800;
  --success: #00ff88;
  --danger: #ff3344;
  --info: #4488ff;
  --warning: #ffb800;
  --dot-color: rgba(0,240,255,0.03);
  --glow-spread: 20px;
  --card-radius: 14px;
  --header-weight: 700;
  --card-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

[data-theme="aurora"] {
  --bg: #0d1117;
  --bg-gradient: linear-gradient(160deg, #0d1117 0%, #161b28 40%, #1a1032 100%);
  --surface: #1c2333;
  --surface-alpha: rgba(130,180,255,0.04);
  --surface-hover: rgba(130,180,255,0.08);
  --surface-elevated: rgba(130,180,255,0.06);
  --border: rgba(130,180,255,0.1);
  --border-hover: rgba(130,220,255,0.35);
  --text: #e6f0ff;
  --text-muted: rgba(230,240,255,0.7);
  --text-dim: rgba(230,240,255,0.4);
  --accent1: #82d8ff;
  --accent2: #c77dff;
  --accent3: #ffd166;
  --success: #7bf1a8;
  --danger: #ff6b6b;
  --info: #748ffc;
  --warning: #ffd166;
  --dot-color: rgba(130,216,255,0.025);
  --glow-spread: 25px;
  --card-radius: 16px;
  --header-weight: 700;
  --card-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

[data-theme="ember"] {
  --bg: #1a0a0a;
  --bg-gradient: linear-gradient(145deg, #1a0a0a 0%, #1f1210 50%, #1a0a0a 100%);
  --surface: #2a1515;
  --surface-alpha: rgba(255,140,50,0.04);
  --surface-hover: rgba(255,140,50,0.08);
  --surface-elevated: rgba(255,140,50,0.06);
  --border: rgba(255,140,50,0.1);
  --border-hover: rgba(255,180,80,0.35);
  --text: #ffe8d6;
  --text-muted: rgba(255,232,214,0.7);
  --text-dim: rgba(255,232,214,0.4);
  --accent1: #ff8c32;
  --accent2: #ff4081;
  --accent3: #ffd740;
  --success: #69f0ae;
  --danger: #ff5252;
  --info: #ff9100;
  --warning: #ffd740;
  --dot-color: rgba(255,140,50,0.03);
  --glow-spread: 18px;
  --card-radius: 12px;
  --header-weight: 700;
  --card-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

[data-theme="matrix"] {
  --bg: #0a0f0a;
  --bg-gradient: linear-gradient(180deg, #0a0f0a 0%, #0d140d 50%, #0a0f0a 100%);
  --surface: #142014;
  --surface-alpha: rgba(0,255,100,0.03);
  --surface-hover: rgba(0,255,100,0.07);
  --surface-elevated: rgba(0,255,100,0.05);
  --border: rgba(0,255,100,0.1);
  --border-hover: rgba(0,255,100,0.3);
  --text: #d0ffd0;
  --text-muted: rgba(208,255,208,0.7);
  --text-dim: rgba(208,255,208,0.4);
  --accent1: #00ff64;
  --accent2: #00cc88;
  --accent3: #88ff00;
  --success: #00ff88;
  --danger: #ff4444;
  --info: #44ffaa;
  --warning: #88ff00;
  --dot-color: rgba(0,255,100,0.025);
  --glow-spread: 15px;
  --card-radius: 10px;
  --header-weight: 700;
  --card-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

[data-theme="frost"] {
  --bg: #f8fafb;
  --bg-gradient: linear-gradient(135deg, #f8fafb 0%, #edf2f7 50%, #f8fafb 100%);
  --surface: #ffffff;
  --surface-alpha: rgba(0, 30, 60, 0.03);
  --surface-hover: rgba(0, 30, 60, 0.07);
  --surface-elevated: rgba(0, 30, 60, 0.05);
  --border: rgba(0, 30, 60, 0.12);
  --border-hover: rgba(0, 90, 180, 0.35);
  --text: #0f172a;
  --text-muted: #334155;
  --text-dim: #64748b;
  --accent1: #0369a1;
  --accent2: #7c3aed;
  --accent3: #b45309;
  --success: #047857;
  --danger: #be123c;
  --info: #1d4ed8;
  --warning: #b45309;
  --dot-color: rgba(0, 80, 160, 0.04);
  --glow-spread: 8px;
  --card-radius: 14px;
  --header-weight: 700;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent1) 30%, transparent) transparent;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent1) 30%, transparent);
  border-radius: 3px;
}

body {
  background: var(--bg);
  background-image: var(--bg-gradient);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

#root {
  position: relative;
  z-index: 1;
}

.glass-card {
  background: var(--surface-alpha);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--card-shadow), 0 0 var(--glow-spread) color-mix(in srgb, var(--accent1) 8%, transparent);
}

.glass-card-static {
  background: var(--surface-alpha);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.glass-card-elevated {
  background: var(--surface-elevated);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow), 0 8px 32px rgba(0,0,0,0.12);
}

.glow-cyan { box-shadow: 0 0 15px color-mix(in srgb, var(--accent1) 15%, transparent), inset 0 0 15px color-mix(in srgb, var(--accent1) 5%, transparent); }
.glow-magenta { box-shadow: 0 0 15px color-mix(in srgb, var(--accent2) 15%, transparent), inset 0 0 15px color-mix(in srgb, var(--accent2) 5%, transparent); }
.glow-amber { box-shadow: 0 0 15px color-mix(in srgb, var(--accent3) 15%, transparent), inset 0 0 15px color-mix(in srgb, var(--accent3) 5%, transparent); }
.glow-green { box-shadow: 0 0 15px color-mix(in srgb, var(--success) 15%, transparent), inset 0 0 15px color-mix(in srgb, var(--success) 5%, transparent); }

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes slide-in {
  from { transform: translateY(-12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-slide-in {
  animation: slide-in 0.3s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.tab-active {
  position: relative;
}

.tab-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  animation: glow-line 1.5s ease-in-out infinite;
}

@keyframes glow-line {
  0%, 100% { box-shadow: 0 0 4px currentColor; opacity: 1; }
  50% { box-shadow: 0 0 12px currentColor; opacity: 0.8; }
}

.modal-overlay {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  animation: fade-in 0.2s ease-out;
}

.efficiency-gauge {
  transition: stroke-dashoffset 1s ease-in-out;
}

.category-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

input, select, textarea {
  background: var(--surface-alpha) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: 'Outfit', sans-serif !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  font-size: 14px !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--accent1) 50%, transparent) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent1) 10%, transparent) !important;
}

/* Section headers */
.section-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

/* Responsive */
@media (max-width: 1024px) {
  body {
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .glass-card {
    border-radius: 10px;
  }
}

/* Drill-through panel */
.drill-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 520px;
  z-index: 60;
  background: var(--bg);
  border-left: 1px solid var(--border);
  animation: slide-from-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(0,0,0,0.2);
}

@keyframes slide-from-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (max-width: 480px) {
  .drill-panel {
    max-width: 100%;
  }
}

/* Theme selector pills */
.theme-pill {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}
.theme-pill:hover {
  transform: scale(1.2);
}
.theme-pill.active {
  border-color: var(--accent1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent1) 40%, transparent);
}

/* Mobile nav */
.mobile-nav-btn {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-nav-btn {
    display: flex;
  }
}

/* Report window styles */
.report-window {
  font-family: 'Outfit', -apple-system, sans-serif;
}

.report-window table {
  border-collapse: collapse;
  width: 100%;
}

.report-window th,
.report-window td {
  border: 1px solid #d1d5db;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
}

.report-window th {
  background: #1e293b;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-window tr:nth-child(even) {
  background: #f8fafc;
}

.report-window .status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

/* Frost / Light mode specific overrides for better contrast */
[data-theme="frost"] .glass-card,
[data-theme="frost"] .glass-card-static,
[data-theme="frost"] .glass-card-elevated {
  background: rgba(255,255,255, 0.85);
  border-color: rgba(0, 30, 60, 0.12);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}

[data-theme="frost"] body::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 60, 120, 0.05) 1px, transparent 0);
}

[data-theme="frost"] input,
[data-theme="frost"] select,
[data-theme="frost"] textarea {
  background: rgba(248,250,252, 0.9) !important;
  border-color: rgba(0, 30, 60, 0.15) !important;
  color: #0f172a !important;
}

[data-theme="frost"] input::placeholder,
[data-theme="frost"] textarea::placeholder {
  color: #64748b !important;
}

[data-theme="frost"] .modal-overlay {
  background: rgba(15, 23, 42, 0.4);
}