/* ============================================================
   CloudWorks Online — LIGHT THEME (opt-in preview)
   Loaded only when the URL has ?theme=light (see index.html);
   the dark theme remains the default. Mostly token overrides,
   plus targeted fixes for chart chrome and the logo.
   ============================================================ */

:root {
  color-scheme: light;

  /* surfaces */
  --page:         #eef1f5;
  --surface:      #ffffff;
  --surface-2:    #f1f4f8;
  --surface-3:    #e6ebf1;
  --border:       rgba(16, 35, 55, 0.13);
  --border-soft:  rgba(16, 35, 55, 0.07);

  /* ink */
  --ink:          #16242e;
  --ink-2:        #44565f;
  --ink-3:        #75858f;
  --grid:         rgba(16, 35, 55, 0.08);
  --axis:         rgba(16, 35, 55, 0.28);

  /* categorical series (light-surface steps) */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;

  --shadow: 0 10px 26px rgba(25, 45, 65, 0.14);
}

/* ambient glow: much softer on light */
body::before { background: radial-gradient(closest-side, rgba(41, 171, 226, 0.1), transparent 70%); }

/* ---------------- shell ---------------- */

.topbar {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--border-soft);
}

.sidebar { background: rgba(255, 255, 255, 0.55); }
.nav-item.sel { background: rgba(41, 171, 226, 0.14); color: #0f7fb3; }

/* ---------------- cards & chrome ---------------- */

.kpi { background: linear-gradient(180deg, #ffffff, #fafcfe); }
.dev-card:hover { background: #fbfdff; border-color: rgba(41, 171, 226, 0.55); }

.pill.online   { background: rgba(12, 163, 12, 0.12);  color: #0a7a0a; }
.pill.sleep    { background: rgba(90, 110, 125, 0.13); color: #5a6e7d; }
.pill.sleep .pd { background: #8a9aa5; }
.pill.offline  { background: rgba(208, 59, 59, 0.12); color: #b03030; }
.pill.alarmpill { background: rgba(208, 59, 59, 0.1); color: #b03030; }
.pill.configpill { background: rgba(240, 194, 75, 0.18); color: #8a5a00; }
.pill.configpill .pd { background: #b98a1d; }

#error-banner, .alarm-banner {
  background: rgba(208, 59, 59, 0.07);
  border-color: rgba(208, 59, 59, 0.35);
  color: #a03030;
}
.danger-box { background: rgba(208, 59, 59, 0.07); border-color: rgba(208, 59, 59, 0.35); color: #a03030; }

.gsm i { background: rgba(16, 35, 55, 0.15); }

.skeleton {
  background: linear-gradient(90deg, #e8edf2 25%, #f4f7fa 45%, #e8edf2 65%);
  background-size: 300% 100%;
}

/* ---------------- chart chrome ---------------- */

.chart-holder svg text { fill: #75858f; }
.chart-holder svg line { stroke: rgba(16, 35, 55, 0.12); }
.chart-holder svg circle { stroke: #ffffff; }
.dev-spark svg rect.skeleton { fill: rgba(16, 35, 55, 0.05); }

.viz-tip {
  background: #ffffff;
  border-color: rgba(16, 35, 55, 0.18);
  box-shadow: 0 8px 24px rgba(25, 45, 65, 0.22);
}

/* ---------------- misc ---------------- */

#toast { background: #e7f6e7; color: #0a7a0a; border-color: rgba(12, 163, 12, 0.45); }

.chip.sel { color: #fff; }

.cmd-out { color: #44565f; }

.modal, #adm-veil .modal { background: #ffffff; }
.modal-veil { background: rgba(30, 45, 60, 0.35); }

/* tank table editor */
table.tt-grid tr.captured td { color: #1c5cab; }
.tt-warning { color: #8a6410; }
.tt-dirty { color: #8a6410; }
.tt-shape-fill { fill: rgba(41, 171, 226, 0.3); }
.tt-shape-surface { fill: rgba(41, 171, 226, 0.5); }