/* ============================================================
   HUB Solar — Professional Brand Theme (v20260901c)
   Colorful, interactive, corporate SaaS look.
   Dark sidebar + white content area + vibrant accents.
   ============================================================ */

:root,
[data-theme="dark"] {
  /* neutrals — deeper, cooler, layered */
  --bg:#080c12;
  --bg-grid:#0c1118;
  --surface:#101820;
  --surface-2:#16202c;
  --surface-3:#1c2836;
  --border:#1f2d3e;
  --border-soft:#182430;
  --grid:#1a2532;               /* very faint chart gridlines */

  /* text — secondary tiers kept high-contrast so labels/captions read clearly */
  --text:#eaf0f7;
  --text-dim:#9bb0c4;
  --text-mut:#7a90a6;

  /* brand accent — azure default (user can change live via Appearance) */
  --accent:#3b82f6;
  --accent-strong:#2563eb;
  --accent-ink:#ffffff;         /* readable text on the accent (auto-set in JS) */
  --accent-soft:rgba(59,130,246,.15);
  --accent-2:#38bdf8;           /* sky — secondary data accent */
  --gold:#f5a623;               /* warm secondary (solar) */

  /* status */
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#f87171;
  --offline:#647587;

  /* shape + depth */
  --radius:12px;
  --radius-sm:9px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --shadow-lg:0 18px 46px rgba(0,0,0,.48);
  --glow:0 0 0 1px var(--border), var(--shadow);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ---------- LIGHT MODE: dark sidebar + white content + vibrant accents ----- */
[data-theme="light"] {
  --bg:#eef1f6;              /* warm grey-blue — NOT plain white */
  --bg-grid:#e8ecf2;
  --surface:#ffffff;         /* cards stay white for contrast */
  --surface-2:#f0f3f7;
  --surface-3:#e5eaf1;
  --border:#dfe6ee;
  --border-soft:#ebf0f5;
  --grid:#e8edf3;

  --text:#0c1525;
  --text-dim:#334155;
  --text-mut:#4a5c72;

  --ok:#15803d;
  --warn:#b45309;
  --danger:#dc2626;
  --offline:#64748b;

  --shadow:0 1px 3px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.06);
  --shadow-lg:0 2px 8px rgba(15,23,42,.06), 0 20px 48px rgba(15,23,42,.11);
  --glow:0 0 0 1px var(--border), var(--shadow);
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

  /* sidebar dark colors */
  --sidebar-bg:linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  --sidebar-text:#94a3b8;
  --sidebar-text-active:#ffffff;
}

/* ---------- Typography: use the fonts that were actually loaded ---------- */
body{
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.006em;
  background: var(--bg) !important;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  letter-spacing:-0.015em;
  line-height:1.25;
}
.metric,
.font-mono{
  font-family:'IBM Plex Mono', ui-monospace, monospace !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
}

/* ---------- Surfaces ---------- */
.surface{
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 3%), var(--surface));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--glow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.surface:hover{
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 20%, var(--border)), var(--shadow);
}

/* ---------- KPI tiles ---------- */
#widget-kpis > .surface::before,
#kpis > .surface::before{
  background:linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
  height:3px !important;
  opacity:.7;
}
#widget-kpis > .surface:hover,
#kpis > .surface:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--border)), var(--shadow-lg) !important;
}
/* KPI value: crisp, high-contrast, tabular */
#widget-kpis .metric.text-3xl,
#kpis .metric{
  background:none !important;
  -webkit-text-fill-color:var(--text) !important;
  color:var(--text) !important;
  letter-spacing:-0.02em;
  font-weight:700;
}

/* eyebrow / section labels feel intentional */
.kpi-label,
.d2kpi-l{
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.66rem;
  font-weight:700;
  color:var(--text-mut);
}

/* ---------- Navigation ---------- */
.navlink{ border-left:2px solid transparent; border-radius:0 8px 8px 0; }
.navlink:hover{ background:var(--surface-2); color:var(--text); }
.navlink.active{
  color:var(--accent);
  border-left-color:var(--accent);
  background:linear-gradient(90deg, var(--accent-soft), transparent);
  font-weight:600;
}

/* ---------- Buttons ---------- */
.btn{
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface-2);
  font-weight:500;
  transition:transform .1s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{ background:var(--surface-3); border-color:color-mix(in srgb, var(--accent) 30%, var(--border)); transform:translateY(-1px); box-shadow:0 4px 12px rgba(15,23,42,.08); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn-accent{
  background:linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color:var(--accent-ink,#04231f) !important;
  border:none !important;
  font-weight:600;
  box-shadow:0 6px 18px rgba(14,150,138,.30);
}
.btn-accent:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 8px 24px rgba(14,150,138,.35); }
.btn-danger{ border-color:#7f1d1d; color:#fca5a5; }
.btn-danger:hover{ background:color-mix(in srgb, var(--danger) 12%, var(--surface-2)); border-color:var(--danger); }

/* chips / segmented toggles pick up the brand */
.chip.on{ background:linear-gradient(135deg, var(--accent), var(--accent-strong)) !important; color:var(--accent-ink,#04231f) !important; border:none; }
.d2tab.active{ background:var(--accent) !important; color:var(--accent-ink,#04231f) !important; }
.d2btn.on{ background:var(--accent) !important; border-color:var(--accent) !important; color:var(--accent-ink,#04231f) !important; }
.d2btn:hover{ border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); }
.d2kpi::before{ background:var(--accent) !important; }
.d2title[contenteditable="true"]{ outline-color:var(--accent) !important; }

/* ---------- Inputs ---------- */
input,select,textarea{ border-radius:var(--radius-sm); background:var(--surface-2); }
input:focus,select:focus,textarea:focus{
  border-color:var(--accent) !important;
  box-shadow:var(--ring);
}

/* ---------- Brand icon (sidebar / login) ---------- */
#brandIcon{
  background:linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  box-shadow:0 6px 18px rgba(14,150,138,.35);
}

/* ---------- Toggle switch: brand-on ---------- */
.switch input:checked + .slider{ background:var(--accent) !important; }

/* ---------- Small touches ---------- */
::selection{ background:color-mix(in srgb, var(--accent) 35%, transparent); color:var(--text); }
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--accent) 55%, var(--border)); }

/* status left-borders a touch cleaner */
.st-Normal{ border-left-color:var(--ok) !important; }
.st-Warning{ border-left-color:var(--warn) !important; }
.st-Offline,.st-Unknown{ border-left-color:var(--offline) !important; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* brand icon glyph adapts to accent */
#brandIcon, #brandIcon > *{ color:var(--accent-ink,#04231f) !important; }

/* ---------- Appearance modal ---------- */
.appseclbl{ font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--text-mut); }
.appsw{ width:30px; height:30px; border-radius:8px; border:2px solid transparent; cursor:pointer;
  box-shadow:0 0 0 1px var(--border); transition:transform .1s ease; }
.appsw:hover{ transform:translateY(-1px); }
.appsw.sel{ border-color:var(--text); box-shadow:0 0 0 2px var(--accent); }
.approw{ display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--text); }
.approw input[type="color"]{ width:26px; height:26px; padding:0; border:1px solid var(--border);
  border-radius:6px; background:var(--surface-2); cursor:pointer; }
input[type="color"]{ -webkit-appearance:none; appearance:none; }
input[type="color"]::-webkit-color-swatch-wrapper{ padding:2px; }
input[type="color"]::-webkit-color-swatch{ border:none; border-radius:4px; }

/* ---------- Departments table header ---------- */
#deptHeadRow{ font-weight:600; border-bottom:1px solid var(--border); margin-bottom:.4rem; }
@media (max-width:767px){ #deptHeadRow{ display:none !important; } }

/* ============================================================
   Colourful polish — cards, panels aur pages ko zinda banata hai
   ============================================================ */

/* ---- KPI cards: rang MAANI ke hisaab se (dono dashboards par ek jaisa) ---- */
#widget-kpis > .surface, #kpis > .surface, .d2kpi{
  position:relative; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* rangeen patti: Overview me upar, Live Summary me bayin taraf */
#widget-kpis > .surface::before, #kpis > .surface::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
}
[data-kpi-kind="power"]::before   { background:linear-gradient(90deg,#3b82f6,#38bdf8) !important; }
[data-kpi-kind="energy"]::before  { background:linear-gradient(90deg,#22c55e,#4ade80) !important; }
[data-kpi-kind="eff"]::before     { background:linear-gradient(90deg,#a855f7,#e879f9) !important; }
[data-kpi-kind="weather"]::before { background:linear-gradient(90deg,#f5a623,#fbbf24) !important; }
[data-kpi-kind="nominal"]::before { background:linear-gradient(90deg,#0ea5e9,#22d3ee) !important; }
[data-kpi-kind="online"]::before  { background:linear-gradient(90deg,#ef4444,#fb7185) !important; }
[data-kpi-kind="voltage"]::before { background:linear-gradient(90deg,#0ea5e9,#22d3ee) !important; }
[data-kpi-kind="current"]::before { background:linear-gradient(90deg,#6366f1,#818cf8) !important; }
[data-kpi-kind="status"]::before  { background:linear-gradient(90deg,#22c55e,#4ade80) !important; }
/* Live Summary ke cards par patti khari (bayin taraf) */
.d2kpi[data-kpi-kind]::before{ top:0; bottom:0; left:0; right:auto; width:5px; height:auto; }
/* value ka rang bhi wahi */
[data-kpi-kind="power"]   .metric.text-2xl, [data-kpi-kind="power"]   .metric.text-3xl, [data-kpi-kind="power"]   .d2kpi-v, [data-kpi-kind="power"]   .kpiv{ color:#2563eb !important; -webkit-text-fill-color:#2563eb !important; }
[data-kpi-kind="energy"]  .metric.text-2xl, [data-kpi-kind="energy"]  .metric.text-3xl, [data-kpi-kind="energy"]  .d2kpi-v, [data-kpi-kind="energy"]  .kpiv{ color:#16a34a !important; -webkit-text-fill-color:#16a34a !important; }
[data-kpi-kind="eff"]     .metric.text-2xl, [data-kpi-kind="eff"]     .metric.text-3xl, [data-kpi-kind="eff"]     .d2kpi-v, [data-kpi-kind="eff"]     .kpiv{ color:#9333ea !important; -webkit-text-fill-color:#9333ea !important; }
[data-kpi-kind="weather"] .metric.text-2xl, [data-kpi-kind="weather"] .metric.text-3xl, [data-kpi-kind="weather"] .d2kpi-v, [data-kpi-kind="weather"] .kpiv{ color:#d97706 !important; -webkit-text-fill-color:#d97706 !important; }
[data-kpi-kind="nominal"] .metric.text-2xl, [data-kpi-kind="nominal"] .metric.text-3xl, [data-kpi-kind="nominal"] .d2kpi-v, [data-kpi-kind="nominal"] .kpiv{ color:#0284c7 !important; -webkit-text-fill-color:#0284c7 !important; }
[data-kpi-kind="online"]  .metric.text-2xl, [data-kpi-kind="online"]  .metric.text-3xl, [data-kpi-kind="online"]  .d2kpi-v, [data-kpi-kind="online"]  .kpiv{ color:#dc2626 !important; -webkit-text-fill-color:#dc2626 !important; }
[data-kpi-kind="voltage"] .metric.text-2xl, [data-kpi-kind="voltage"] .metric.text-3xl, [data-kpi-kind="voltage"] .d2kpi-v, [data-kpi-kind="voltage"] .kpiv{ color:#0284c7 !important; -webkit-text-fill-color:#0284c7 !important; }
[data-kpi-kind="current"] .metric.text-2xl, [data-kpi-kind="current"] .metric.text-3xl, [data-kpi-kind="current"] .d2kpi-v, [data-kpi-kind="current"] .kpiv{ color:#6366f1 !important; -webkit-text-fill-color:#6366f1 !important; }
[data-kpi-kind="status"]  .metric.text-2xl, [data-kpi-kind="status"]  .metric.text-3xl, [data-kpi-kind="status"]  .d2kpi-v, [data-kpi-kind="status"]  .kpiv{ color:#16a34a !important; -webkit-text-fill-color:#16a34a !important; }

/* ---- clickable cards: hover par uthte hain ---- */
.kpi-click{ cursor:pointer; }
.kpi-click:hover, #widget-kpis > .surface:hover, #kpis > .surface:hover, .d2kpi.kpi-click:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(16,24,40,.10), 0 20px 44px rgba(16,24,40,.14);
}
.kpi-click:active{ transform:translateY(-1px); }

/* ---- chart panels: rangeen heading patti ---- */
.chart-card{ transition:box-shadow .15s ease, transform .15s ease; border-radius:var(--radius); }
.chart-card:hover{ box-shadow:0 4px 10px rgba(16,24,40,.08), 0 16px 36px rgba(16,24,40,.12); }

/* ---- page background: halka rangeen wash (bilkul saada white nahi) ----
   NOTE: pehle yahan `background-attachment:fixed` tha. Ye scroll performance
   ka SAB SE BADA killer hai: is ke saath browser page ko ek simple layer-shift
   ki tarah scroll nahi kar sakta — usay HAR SCROLL FRAME par poore viewport ka
   background (yahan 3 bade radial gradients) dobara rasterize karna padta hai.
   Wahi "fixed wash" look ab ek alag position:fixed layer se aata hai, jo
   compositor ki apni layer ban jati hai aur scroll par bilkul repaint nahi
   hoti — dikhne me bilkul wahi, magar scroll par zero cost. */
html{ background:var(--bg); }
body{ background:transparent !important; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 480px at 8% -8%,  rgba(59,130,246,.10), transparent 60%),
    radial-gradient(760px 420px at 96% 4%,  rgba(168,85,247,.08), transparent 60%),
    radial-gradient(680px 420px at 50% 108%, rgba(34,197,94,.08),  transparent 60%);
}

/* ---- sidebar: rangeen active state + halka gradient ---- */
#sidebar{ background:linear-gradient(180deg,#ffffff 0%, #f7f9fd 100%) !important; }
.navlink.active{
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent) !important;
  border-left-color:var(--accent) !important; font-weight:600;
}
.navlink:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); }

/* ---- section headings ke aage rangeen patti ---- */
.d2title, .panel-title{ border-left:3px solid var(--accent); padding-left:.55rem; }

/* ---- status pills ---- */
.st-Normal{ background:color-mix(in srgb, var(--ok) 10%, transparent); }
.st-Warning{ background:color-mix(in srgb, var(--warn) 12%, transparent); }
.st-Offline,.st-Unknown{ background:color-mix(in srgb, var(--offline) 10%, transparent); }

/* ============================================================
   COLORFUL PROFESSIONAL LAYER (v20260901c)
   Dark sidebar + warm background + colorful cards.
   All pages get the same polished treatment.
   ============================================================ */

/* ---- Body: warm colorful light wash ---- */
html[data-theme="light"]{ background:#eef1f6; }
[data-theme="light"] body{ background:transparent !important; }
[data-theme="light"] body::before{
  background:
    radial-gradient(1100px 520px at 8% -6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
    radial-gradient(900px 480px at 92% 4%, color-mix(in srgb, #8b5cf6 13%, transparent), transparent 58%),
    radial-gradient(820px 440px at 45% 108%, color-mix(in srgb, #22c55e 9%, transparent), transparent 58%);
}

/* ---- Cards: white with rounded corners + shadow ---- */
[data-theme="light"] .surface{
  background:#ffffff !important;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
}
[data-theme="light"] .surface:hover{ box-shadow:var(--shadow-lg); }
[data-theme="light"] h1, [data-theme="light"] h2{ letter-spacing:-.015em; }

/* ---- Header: tinted glass with gradient strip ---- */
header{ position:sticky; top:0; z-index:40; }
[data-theme="light"] header{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, #ffffff) 0%, color-mix(in srgb, #8b5cf6 3%, #ffffff) 100%) !important;
  box-shadow:0 1px 0 var(--border), 0 4px 16px rgba(15,23,42,.04);
  border-bottom:2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-theme="light"] header::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:1;
  background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--gold), #a855f7);
}
[data-theme="light"] #viewTitle{
  background:linear-gradient(90deg, var(--text) 35%, var(--accent) 95%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:800;
}

/* ---- Sidebar: LIGHT, colorful rail (no dark navy) ---- */
[data-theme="light"] #sidebar{
  background:linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--accent) 5%, #f8fafc) 55%, #f1f5f9 100%) !important;
  border-right:1px solid var(--border) !important;
  box-shadow:4px 0 20px rgba(15,23,42,.05);
}
[data-theme="light"] #sidebar .navlink{
  color:var(--text-dim) !important;
  border-radius:0 12px 12px 0;
  font-weight:500;
  font-size:.875rem;
  border-left:3px solid transparent;
  transition:background .15s ease, color .15s ease;
}
[data-theme="light"] #sidebar .navlink:hover{
  color:var(--accent) !important;
  background:color-mix(in srgb, var(--accent) 7%, transparent);
}
[data-theme="light"] #sidebar .navlink.active{
  color:var(--accent) !important;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, #ffffff), color-mix(in srgb, var(--accent) 3%, #ffffff) 85%) !important;
  border-left-color:var(--accent) !important;
  font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.8);
}
/* sidebar inner text — dark readable on light rail */
[data-theme="light"] #brandIcon{
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
[data-theme="light"] #sidebar .font-bold,
[data-theme="light"] #sidebar #brandNameSide{ color:var(--text) !important; }
[data-theme="light"] #sidebar #brandLabelSide,
[data-theme="light"] #sidebar #roleNote,
[data-theme="light"] #sidebar [style*="text-dim"],
[data-theme="light"] #sidebar .metric,
[data-theme="light"] #sidebar #lastUpdate,
[data-theme="light"] #sidebar #modeBadge{ color:var(--text-mut) !important; }
[data-theme="light"] #sidebar #liveText{ color:var(--text-dim) !important; }
[data-theme="light"] #sidebar .btn{
  color:var(--text-dim) !important; border-color:var(--border) !important; background:#ffffff !important;
}
[data-theme="light"] #sidebar [style*="border-top"], [data-theme="light"] #sidebar [style*="border-bottom"]{ border-color:var(--border) !important; }

/* ---- Buttons: colorful, tactile ---- */
[data-theme="light"] .btn{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:9px;
  font-weight:500;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
[data-theme="light"] .btn:hover{
  background:var(--surface-2);
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}
[data-theme="light"] .btn-accent{
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
[data-theme="light"] #refreshBtn{
  background:linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color:var(--accent-ink,#fff) !important;
  border:none !important;
  font-weight:600;
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
[data-theme="light"] #refreshBtn:hover{ filter:brightness(1.07); transform:translateY(-1px); }

/* ---- Inputs: white with accent focus ---- */
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea{
  background:#ffffff;
  border:1px solid var(--border);
}
[data-theme="light"] input:hover, [data-theme="light"] select:hover{ border-color:var(--accent); }
[data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus{
  border-color:var(--accent) !important;
  box-shadow:var(--ring);
}

/* ---- KPI tiles: tinted backgrounds + bold top bars + watermark icons ---- */
[data-theme="light"] #widget-kpis > .surface::before,
[data-theme="light"] #kpis > .surface::before{ height:4px !important; opacity:1 !important; }
[data-theme="light"] .d2kpi::before{ opacity:1 !important; }
[data-theme="light"] [data-kpi-kind]{ position:relative; overflow:hidden; }
[data-theme="light"] [data-kpi-kind]::after{
  content:""; position:absolute; right:.9rem; top:.9rem; width:32px; height:32px;
  opacity:0.45; pointer-events:none; background:center/contain no-repeat;
}
[data-theme="light"] [data-kpi-kind="power"]{
  background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(255,255,255,0) 58%), #ffffff !important; }
[data-theme="light"] [data-kpi-kind="power"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4.5 13.5H11l-1.5 8.5L18 10.5h-6.5L13 2z'/%3E%3C/svg%3E"); }
[data-theme="light"] [data-kpi-kind="energy"]{
  background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(255,255,255,0) 58%), #ffffff !important; }
[data-theme="light"] [data-kpi-kind="energy"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='16' height='10' rx='2'/%3E%3Cpath d='M22 11v2'/%3E%3Cpath d='M10 9.5 8 12h4l-2 2.5'/%3E%3C/svg%3E"); }
[data-theme="light"] [data-kpi-kind="eff"]{
  background:linear-gradient(135deg, rgba(168,85,247,.14), rgba(255,255,255,0) 58%), #ffffff !important; }
[data-theme="light"] [data-kpi-kind="eff"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
[data-theme="light"] [data-kpi-kind="weather"]{
  background:linear-gradient(135deg, rgba(245,166,35,.16), rgba(255,255,255,0) 58%), #ffffff !important; }
[data-theme="light"] [data-kpi-kind="weather"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5a623' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M2 12h2.5M19.5 12H22M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/%3E%3C/svg%3E"); }
[data-theme="light"] [data-kpi-kind="nominal"]{
  background:linear-gradient(135deg, rgba(14,165,233,.14), rgba(255,255,255,0) 58%), #ffffff !important; }
[data-theme="light"] [data-kpi-kind="nominal"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V8l5 3.5V8l5 3.5V8l4 3v10'/%3E%3C/svg%3E"); }
[data-theme="light"] [data-kpi-kind="online"]{
  background:linear-gradient(135deg, rgba(239,68,68,.12), rgba(255,255,255,0) 58%), #ffffff !important; }
[data-theme="light"] [data-kpi-kind="online"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5a10 10 0 0 1 14 0'/%3E%3Cpath d='M8.5 15.5a5.5 5.5 0 0 1 7 0'/%3E%3Cpath d='M12 19h.01'/%3E%3C/svg%3E"); }
[data-theme="light"] [data-kpi-kind="voltage"]{
  background:linear-gradient(135deg, rgba(14,165,233,.14), rgba(255,255,255,0) 58%), #ffffff !important; }
[data-theme="light"] [data-kpi-kind="voltage"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4.5 13.5H11l-1.5 8.5L18 10.5h-6.5L13 2z'/%3E%3C/svg%3E"); }
[data-theme="light"] [data-kpi-kind="current"]{
  background:linear-gradient(135deg, rgba(99,102,241,.14), rgba(255,255,255,0) 58%), #ffffff !important; }
[data-theme="light"] [data-kpi-kind="current"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 4-2'/%3E%3Cpath d='M3 12c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 4-2'/%3E%3Cpath d='M3 17c2.5 0 2.5 2 5 2s2.5-2 5-2 2.5 2 5 2 2.5-2 4-2'/%3E%3C/svg%3E"); }
[data-theme="light"] [data-kpi-kind="status"]{
  background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(255,255,255,0) 58%), #ffffff !important; }
[data-theme="light"] [data-kpi-kind="status"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 5-5.5'/%3E%3C/svg%3E"); }

/* ---- Tabs: colorful segmented control ---- */
[data-theme="light"] .d2tabs{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.3rem;
  box-shadow:var(--shadow);
}
[data-theme="light"] .d2tab{
  border-radius:9px;
  color:var(--text-mut) !important;
  font-weight:600;
}
[data-theme="light"] .d2tab:hover{ color:var(--accent) !important; background:var(--surface-2); }
[data-theme="light"] .d2tab.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color:var(--accent-ink,#fff) !important;
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

/* ---- Chart card headings: accent tick ---- */
[data-theme="light"] h2.font-semibold::before{
  content:""; display:inline-block; width:4px; height:14px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  margin-right:.5rem; vertical-align:-2px;
}
[data-theme="light"] .panel-title::before{
  content:""; display:inline-block; width:4px; height:14px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  margin-right:.5rem; vertical-align:-2px;
}

/* ---- Small buttons (d2btn) ---- */
[data-theme="light"] .dbar-arrow{
  width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem; font-weight:700; padding:0 !important; line-height:1;
}
[data-theme="light"] .d2btn{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:9px;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
[data-theme="light"] .d2btn:hover{ border-color:var(--accent); }
[data-theme="light"] .chip{ background:#ffffff; }
[data-theme="light"] .chip.on{
  box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}
[data-theme="light"] .d2live{
  background:#ffffff;
  box-shadow:var(--shadow);
}

/* ---- Multi-select panels ---- */
[data-theme="light"] .ms-panel{
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:0 12px 34px rgba(15,23,42,.16);
}

/* ---- Tables: colorful header ---- */
[data-theme="light"] #deptHeadRow{
  color:var(--text-mut);
  border-bottom:2px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}
[data-theme="light"] .inv-row:hover, [data-theme="light"] .dept-head:hover{
  background:color-mix(in srgb, var(--accent) 4%, var(--surface-2));
}

/* ---- Departments rows: rounded ---- */
[data-theme="light"] #deptBars > div{ border-radius:12px !important; }

/* ---- Toggle switch ---- */
[data-theme="light"] .slider{ background:#cbd5e1; }
[data-theme="light"] .switch input:checked + .slider{ background:var(--accent) !important; }

/* ---- Scrollbar + selection ---- */
[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#cbd5e1; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }
[data-theme="light"] ::selection{
  background:color-mix(in srgb, var(--accent) 22%, transparent); color:var(--text);
}

/* ---- Modals ---- */
.modal-wrap{ transition: opacity .2s ease; }
[data-theme="light"] .ms-panel, [data-theme="light"] dialog{
  border-radius:14px;
  box-shadow:0 20px 60px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.06);
}
[data-theme="light"] .appsw{ box-shadow:0 0 0 1px var(--border); }

/* ---- Weather cards: white with shadow ---- */
[data-theme="light"] .wcard{ background:#ffffff !important; box-shadow:var(--shadow); }

/* ---- Setup page: colorful panel tops ---- */
[data-theme="light"] #view-setup .surface{
  border-top:3px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* ---- Report band: deeper gradient ---- */
[data-theme="light"] .band{
  background:linear-gradient(135deg, var(--band1), var(--band2), color-mix(in srgb, var(--accent) 30%, var(--band2))) !important;
}

/* ---- Login hero: branded navy ---- */
.hero-pane{
  background:
    radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 62%),
    radial-gradient(800px 500px at 90% 110%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(160deg, #0c2140 0%, #0a1a36 55%, #081428 100%) !important;
}
.hero-pane::before{
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) !important;
}