@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root,
html[data-theme="dark"] {
  --brand-navy: #1C2259;
  --brand-green: #22AB6C;
  --brand-red: #E21E2C;

  --bg-app: #020617;
  --bg-header: rgba(15, 23, 42, 0.92);
  --bg-sidebar: rgba(2, 6, 23, 0.96);
  --bg-card: rgba(15, 23, 42, 0.85);
  --bg-card-gradient: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 60%, rgba(2, 6, 23, 0.95) 100%);
  --bg-subcard: rgba(2, 6, 23, 0.7);
  --bg-input: rgba(15, 23, 42, 0.9);
  --border-color: rgba(51, 65, 85, 0.6);
  --border-subtle: rgba(51, 65, 85, 0.35);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;

  --card-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
  --glass-border: 1px solid rgba(51, 65, 85, 0.6);

  /* Dark mode accent chips */
  --chip-green-bg: rgba(34, 171, 108, 0.15);
  --chip-green-border: rgba(34, 171, 108, 0.3);
  --chip-green-text: #22AB6C;

  --chip-red-bg: rgba(226, 30, 44, 0.15);
  --chip-red-border: rgba(226, 30, 44, 0.3);
  --chip-red-text: #E21E2C;

  --chip-amber-bg: rgba(245, 158, 11, 0.15);
  --chip-amber-border: rgba(245, 158, 11, 0.3);
  --chip-amber-text: #fbbf24;

  --chip-sky-bg: rgba(14, 165, 233, 0.15);
  --chip-sky-border: rgba(14, 165, 233, 0.3);
  --chip-sky-text: #38bdf8;

  --chip-purple-bg: rgba(168, 85, 247, 0.15);
  --chip-purple-border: rgba(168, 85, 247, 0.3);
  --chip-purple-text: #c084fc;

  --chip-rose-bg: rgba(244, 63, 94, 0.15);
  --chip-rose-border: rgba(244, 63, 94, 0.3);
  --chip-rose-text: #fb7185;

  --scrollbar-track: #0f172a;
  --scrollbar-thumb: #334155;
  --scrollbar-thumb-hover: #475569;
}

html[data-theme="light"] {
  --brand-navy: #1C2259;
  --brand-green: #22AB6C;
  --brand-red: #E21E2C;

  --bg-app: #F4F6FB;
  --bg-header: rgba(255, 255, 255, 0.95);
  --bg-sidebar: rgba(255, 255, 255, 0.98);
  --bg-card: #FFFFFF;
  --bg-card-gradient: linear-gradient(135deg, #FFFFFF 0%, #FAFBFD 60%, #F4F6FB 100%);
  --bg-subcard: #F8FAFC;
  --bg-input: #F1F5F9;
  --border-color: #E2E8F0;
  --border-subtle: #EDF2F7;

  --text-main: #1C2259;
  --text-muted: #475569;
  --text-subtle: #64748B;

  --card-shadow: 0 10px 25px -4px rgba(28, 34, 89, 0.07), 0 4px 10px -2px rgba(28, 34, 89, 0.04);
  --glass-border: 1px solid #E2E8F0;

  /* Light mode pastel chips (Soft, executive, non-distracting) */
  --chip-green-bg: #E8F7F0;
  --chip-green-border: #B7E8D2;
  --chip-green-text: #198754;

  --chip-red-bg: #FDEDEE;
  --chip-red-border: #F9C3C7;
  --chip-red-text: #E21E2C;

  --chip-amber-bg: #FEF9C3;
  --chip-amber-border: #FDE68A;
  --chip-amber-text: #B45309;

  --chip-sky-bg: #E0F2FE;
  --chip-sky-border: #BAE6FD;
  --chip-sky-text: #0369A1;

  --chip-purple-bg: #F3E8FF;
  --chip-purple-border: #E9D5FF;
  --chip-purple-text: #6B21A8;

  --chip-rose-bg: #FFE4E6;
  --chip-rose-border: #FECDD3;
  --chip-rose-text: #9F1239;

  --scrollbar-track: #F1F5F9;
  --scrollbar-thumb: #CBD5E1;
  --scrollbar-thumb-hover: #94A3B8;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Glass panel */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: var(--glass-border);
  box-shadow: var(--card-shadow);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ------------------------------------------------------------------------- */
/* LIGHT MODE SPECIFIC OVERRIDES                                             */
/* ------------------------------------------------------------------------- */
html[data-theme="light"],
html.light,
html[data-theme="light"] body,
html.light body,
body.light-mode {
  background-color: #F4F6FB !important;
  color: #1C2259 !important;
}

html[data-theme="light"] header,
html.light header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(28, 34, 89, 0.06);
}

html[data-theme="light"] aside#plantTreeSidebar,
html.light aside#plantTreeSidebar {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 4px 0 24px rgba(28, 34, 89, 0.04);
}

/* Universal Light Mode Typography */
html[data-theme="light"] .text-white,
html.light .text-white,
html[data-theme="light"] .text-slate-100,
html.light .text-slate-100 {
  color: #1C2259 !important;
}

html[data-theme="light"] .text-slate-200,
html.light .text-slate-200,
html[data-theme="light"] .text-slate-300,
html.light .text-slate-300 {
  color: #334155 !important;
}

html[data-theme="light"] .text-slate-400,
html.light .text-slate-400 {
  color: #64748B !important;
}

html[data-theme="light"] .text-slate-500,
html.light .text-slate-500 {
  color: #94A3B8 !important;
}

/* Background Color and Gradient Resets for Light Mode */
html[data-theme="light"] .glass-panel,
html.light .glass-panel {
  background: #FFFFFF !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 25px -4px rgba(28, 34, 89, 0.07), 0 4px 10px -2px rgba(28, 34, 89, 0.04) !important;
}

html[data-theme="light"] [class*="bg-gradient-to-"],
html.light [class*="bg-gradient-to-"] {
  background-image: none !important;
}

html[data-theme="light"] [class*="bg-slate-950"],
html.light [class*="bg-slate-950"],
html[data-theme="light"] [class*="bg-slate-900"],
html.light [class*="bg-slate-900"] {
  background-color: #FFFFFF !important;
  background-image: none !important;
}

/* Sub-card & telemetry metric pill backgrounds */
html[data-theme="light"] .bg-slate-950\/70,
html[data-theme="light"] .bg-slate-950\/80,
html[data-theme="light"] .bg-slate-950\/90,
html[data-theme="light"] .bg-slate-900\/70,
html[data-theme="light"] .bg-slate-900\/80,
html[data-theme="light"] .bg-slate-900\/90,
html.light .bg-slate-950\/70,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/90,
html.light .bg-slate-900\/70,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/90 {
  background-color: #F8FAFC !important;
  background-image: none !important;
}

html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] [class*="bg-slate-800"],
html.light .bg-slate-800,
html.light [class*="bg-slate-800"] {
  background-color: #EDF2F7 !important;
  background-image: none !important;
}

html[data-theme="light"] .hover\:bg-slate-800:hover,
html[data-theme="light"] .hover\:bg-slate-700:hover,
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-700:hover {
  background-color: #E2E8F0 !important;
}

/* Border Resets */
html[data-theme="light"] [class*="border-slate-800"],
html[data-theme="light"] [class*="border-slate-700"],
html[data-theme="light"] [class*="border-slate-900"],
html.light [class*="border-slate-800"],
html.light [class*="border-slate-700"],
html.light [class*="border-slate-900"] {
  border-color: #E2E8F0 !important;
}

/* Light Mode Input & Select Elements */
html[data-theme="light"] input,
html[data-theme="light"] select,
html.light input,
html.light select {
  background-color: #FFFFFF !important;
  color: #1C2259 !important;
  border-color: #CBD5E1 !important;
}

html[data-theme="light"] input::placeholder,
html.light input::placeholder {
  color: #94A3B8 !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html.light input:focus,
html.light select:focus {
  border-color: var(--brand-navy) !important;
  box-shadow: 0 0 0 2px rgba(28, 34, 89, 0.1) !important;
}

/* Preserved brand gradients (Logo & Solar View toggle) */
html[data-theme="light"] .from-blue-600.to-cyan-400,
html.light .from-blue-600.to-cyan-400 {
  background-image: linear-gradient(to top right, #2563eb, #22d3ee) !important;
}

html[data-theme="light"] #viewToggleSolar.bg-gradient-to-r,
html.light #viewToggleSolar.bg-gradient-to-r {
  background: var(--brand-navy) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(28, 34, 89, 0.25) !important;
}

/* Badges and Header Buttons */
html[data-theme="light"] #btnAlarmsToggle,
html[data-theme="light"] #btnDaemonToggleHeader,
html[data-theme="light"] #btnThemeToggle,
html.light #btnAlarmsToggle,
html.light #btnDaemonToggleHeader,
html.light #btnThemeToggle {
  background-color: #FFFFFF !important;
  color: #1C2259 !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 2px 6px rgba(28, 34, 89, 0.04);
}

html[data-theme="light"] #btnAlarmsToggle:hover,
html[data-theme="light"] #btnDaemonToggleHeader:hover,
html[data-theme="light"] #btnThemeToggle:hover,
html.light #btnAlarmsToggle:hover,
html.light #btnDaemonToggleHeader:hover,
html.light #btnThemeToggle:hover {
  background-color: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

/* Alarms Drawer and Modals */
html[data-theme="light"] #alarmsDrawer,
html[data-theme="light"] #fleetSummaryModalContent,
html[data-theme="light"] #spotlightModal > div > div,
html.light #alarmsDrawer,
html.light #fleetSummaryModalContent,
html.light #spotlightModal > div > div {
  background-color: #FFFFFF !important;
  color: #1C2259 !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 20px 40px rgba(28, 34, 89, 0.12) !important;
}

/* Top Sensor Telemetry Cards Pastel Styling */
html[data-theme="light"] .border-amber-500\/20,
html.light .border-amber-500\/20 {
  background-color: #FFFDF7 !important;
  border-color: #FDE68A !important;
}

html[data-theme="light"] .border-emerald-500\/20,
html.light .border-emerald-500\/20 {
  background-color: #F7FDF9 !important;
  border-color: #A7F3D0 !important;
}

html[data-theme="light"] .border-cyan-500\/30,
html.light .border-cyan-500\/30 {
  border-color: #CBD5E1 !important;
}

/* Inverter Twin Cards in Light Mode */
html[data-theme="light"] .twin-inv-card-selected,
html.light .twin-inv-card-selected {
  background-color: #EFF6FF !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15) !important;
}

html[data-theme="light"] .twin-inv-card-unselected,
html.light .twin-inv-card-unselected {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

html[data-theme="light"] .twin-inv-card-unselected:hover,
html.light .twin-inv-card-unselected:hover {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

/* Light mode icon & chip color contrast enhancements */
html[data-theme="light"] .text-purple-400,
html[data-theme="light"] .text-purple-300,
html.light .text-purple-400,
html.light .text-purple-300 {
  color: #7E22CE !important;
}

html[data-theme="light"] .text-cyan-400,
html[data-theme="light"] .text-cyan-300,
html.light .text-cyan-400,
html.light .text-cyan-300 {
  color: #0284C7 !important;
}

html[data-theme="light"] .text-amber-400,
html[data-theme="light"] .text-amber-300,
html.light .text-amber-400,
html.light .text-amber-300 {
  color: #D97706 !important;
}

html[data-theme="light"] .text-yellow-400,
html.light .text-yellow-400 {
  color: #CA8A04 !important;
}

html[data-theme="light"] .text-emerald-400,
html.light .text-emerald-400 {
  color: #16A34A !important;
}

html[data-theme="light"] .text-indigo-400,
html.light .text-indigo-400 {
  color: #4F46E5 !important;
}

html[data-theme="light"] .text-rose-400,
html[data-theme="light"] .text-rose-500,
html.light .text-rose-400,
html.light .text-rose-500 {
  color: #E21E2C !important;
}

/* ========================================================================= */
/* 📈 PERFORMANCE STUDIO RESPONSIVE GRID LAYOUT RULES (Milestone 3)          */
/* ========================================================================= */
@media (min-width: 1024px) {
  .lg\:grid-cols-12 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  .lg\:col-span-8 {
    grid-column: span 8 / span 8 !important;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4 !important;
  }
  .lg\:col-span-9 {
    grid-column: span 9 / span 9 !important;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
}

#annualStringHeatmapContainer {
  width: 100%;
  height: 520px;
  min-height: 520px;
}

#pvsystSankeyContainer {
  width: 100%;
  height: 520px;
  min-height: 520px;
}