/* ============================================================
 * Wiman IoT — operator UI
 * ============================================================
 * Design principles:
 *   - Industrial: dense, information-rich, no decorative noise
 *   - Trustworthy: subdued palette, restrained typography
 *   - Operator-first: high contrast for at-a-glance reading
 *   - Status colors used only for state (green/amber/red/gray)
 *
 * Token system below — every spacing/color/shadow comes from a var.
 * ============================================================ */

:root {
  /* Color — neutrals */
  --bg:           #eef1f4;
  --bg-deep:      #e0e6ec;
  --panel:        #ffffff;
  --panel-soft:   #f7f9fb;
  --panel-deep:   #eef1f4;
  --ink:          #11202d;
  --ink-soft:     #4f5d6c;
  --ink-mute:     #8a96a4;
  --line:         #d8dee4;
  --line-soft:    #ecf0f3;
  --line-strong:  #c1c9d2;

  /* Color — brand */
  --brand:         #0d7d76;
  --brand-dark:    #095049;
  --brand-darker:  #053d38;
  --brand-soft:    #e3f1ef;
  --brand-tint:    #f0f8f7;
  --sidebar-bg:    #0d7d76;
  --sidebar-bg-2:  #0a625c;
  --sidebar-ink:   #ffffff;

  /* Color — status */
  --ok:        #1f9d55;
  --ok-soft:   #d8f1e3;
  --warn:      #b88300;
  --warn-soft: #faedc6;
  --crit:      #c1272d;
  --crit-soft: #fbe1e2;
  --info:      #2a5db0;
  --info-soft: #dde9f7;
  --gray:      #92a0b3;

  /* Color — severity (alarm-only) */
  --sev-critical: #c1272d;
  --sev-major:    #d97706;
  --sev-minor:    #b88300;
  --sev-warning:  #5a7da4;

  /* Spacing scale (4-pt grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(17, 32, 45, 0.05);
  --shadow-2: 0 2px 4px rgba(17, 32, 45, 0.08);
  --shadow-3: 0 4px 12px rgba(17, 32, 45, 0.10);

  /* Radius */
  --radius:    6px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  /* Layout */
  --sidebar-w: 224px;
  --topbar-h:  56px;

  /* Type */
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ============================================================
 * Reset + base typography
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
h1 { font-size: 18px; }
h2 { font-size: 15px; margin: var(--s-5) 0 var(--s-3); }
h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); margin: var(--s-4) 0 var(--s-2); font-weight: 700; }
p  { margin: 0 0 var(--s-3); }
a  { color: inherit; text-decoration: none; }

code, .code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--line-soft);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink);
}

.small  { font-size: 11px; }
.muted  { color: var(--ink-soft); }
.muted.small, .small.muted { color: var(--ink-mute); }
.right { margin-left: auto; }
.num   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
[x-cloak] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
 * Login
 * ============================================================ */
.page-login {
  background:
    radial-gradient(at 30% 20%, rgba(13,125,118,0.30), transparent 60%),
    radial-gradient(at 80% 80%, rgba(10,98,92,0.40), transparent 60%),
    linear-gradient(135deg, #061722, #0d3b3c);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.login-wrap { width: 100%; padding: var(--s-6); }
.login-card {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 780px; margin: 0 auto;
  background: var(--panel);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.login-card__left {
  background: linear-gradient(160deg, var(--brand), var(--brand-darker));
  color: white; padding: 44px 36px;
  display: flex; flex-direction: column; justify-content: center;
}
.login-mark { font-size: 26px; opacity: 0.9; }
.login-brand { margin: var(--s-3) 0 var(--s-2); font-size: 24px; font-weight: 700; }
.login-tagline { opacity: 0.82; font-size: 13px; margin: 0; }
.login-card__right { padding: 44px 36px; }
.login-h2 { margin: 0 0 var(--s-5); font-size: 20px; }
.login-note { margin: var(--s-3) 0 0; font-size: 11px; color: var(--ink-mute); }

/* ============================================================
 * App shell — sidebar + topbar + content
 * ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ----- Sidebar ----- */
.sidebar {
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  color: var(--sidebar-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  box-shadow: 1px 0 0 rgba(0,0,0,0.08);
}
.sidebar__brand {
  padding: 16px 18px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand__mark {
  width: 20px; height: 20px; border-radius: 5px;
  background: white;
  position: relative;
  flex-shrink: 0;
}
.brand__mark::after {
  content: ""; position: absolute; inset: 4px;
  border-radius: 2px; background: var(--brand);
}
.brand__name {
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.01em;
}
.sidebar__nav { flex: 1; padding: var(--s-2) 0 var(--s-4); overflow-y: auto; }
.sidebar__divider {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 6px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 700;
}
.sidebar__divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.10), transparent);
}
.sidebar__divider--top { padding-top: 10px; }
.navlink {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 18px 7px 15px;
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.navlink:hover {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}
.navlink--active {
  background: rgba(0,0,0,0.20);
  border-left-color: white;
  color: #ffffff;
  font-weight: 600;
}
.navlink--sub { padding-left: 32px; font-size: 11px; opacity: 0.85; }
.navlink__label { flex: 1; }
.navlink--disabled { opacity: 0.40; cursor: not-allowed; }
.navlink--disabled:hover { background: transparent; color: rgba(255,255,255,0.86); }
.navlink__tag {
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  background: rgba(255,255,255,0.14);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 17px; padding: 0 6px;
  background: rgba(0,0,0,0.30); border-radius: 9px;
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nav-badge--critical { background: var(--sev-critical); }
.nav-badge--major    { background: var(--sev-major); }
.nav-badge--minor    { background: var(--sev-minor); }
.nav-badge--warning  { background: var(--sev-warning); }
.sidebar__footer {
  padding: 10px 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;                 /* the build stamp takes its own row below the links */
  background: rgba(0,0,0,0.12);
}
.sidebar__footer .build-stamp { flex: 0 0 100%; width: auto; }
.sidebar__footer .user { font-weight: 600; opacity: 0.95; }
.sidebar__footer .logout { color: rgba(255,255,255,0.65); font-size: 10px; }
.sidebar__footer .logout:hover { color: #fff; text-decoration: underline; }

/* ----- Content + topbar ----- */
.content { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  height: var(--topbar-h);
  padding: 0 var(--s-6);
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
.topbar__left {
  display: flex; align-items: center; gap: var(--s-3);
  min-width: 0;
}
.topbar__title {
  font-size: 16px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.crumbs {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-mute);
}
.crumbs a:hover { color: var(--brand); }
.crumbs__sep { color: var(--ink-mute); opacity: 0.6; }
.topbar__right {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 12px;
}
.sys-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--ok-soft); color: #0a5d2e;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
}
.sys-status__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(31,157,85,0.20);
  animation: pulse 2s ease-in-out infinite;
}
.sys-status--degraded { background: var(--warn-soft); color: #7a5500; }
.sys-status--degraded .sys-status__dot { background: var(--warn); box-shadow: 0 0 0 2px rgba(184,131,0,0.25); }
.hello { color: var(--ink-soft); }
.hello b { color: var(--ink); font-weight: 600; letter-spacing: 0.02em; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(31,157,85,0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(31,157,85,0.00); }
}

.page {
  padding: var(--s-5) var(--s-6);
}
.page__inner { max-width: 1480px; margin: 0 auto; }

/* ============================================================
 * Dashboard grid
 * ============================================================ */
.dash { display: flex; flex-direction: column; gap: var(--s-3); }
.dash__row {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-3);
}
.dash__col--1  { grid-column: span 1; }
.dash__col--2  { grid-column: span 2; }
.dash__col--3  { grid-column: span 3; }
.dash__col--4  { grid-column: span 4; }
.dash__col--5  { grid-column: span 5; }
.dash__col--6  { grid-column: span 6; }
.dash__col--7  { grid-column: span 7; }
.dash__col--8  { grid-column: span 8; }
.dash__col--9  { grid-column: span 9; }
.dash__col--10 { grid-column: span 10; }
.dash__col--11 { grid-column: span 11; }
.dash__col--12 { grid-column: span 12; }
@media (max-width: 1024px) {
  .dash__row { grid-template-columns: repeat(6, 1fr); }
  .dash__col--4, .dash__col--3, .dash__col--2 { grid-column: span 3; }
  .dash__col--8, .dash__col--6, .dash__col--7 { grid-column: span 6; }
}

/* ============================================================
 * Widgets
 * ============================================================ */
.widget {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  min-height: 110px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.widget:hover { border-color: var(--line-strong); }
.widget__title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-mute);
  margin-bottom: var(--s-2);
  font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}

/* Value tile */
.widget--tile { justify-content: space-between; }
.tile__value { display: flex; align-items: baseline; gap: 8px; }
.tile__number {
  font-size: 34px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.tile__unit {
  color: var(--ink-soft); font-size: 13px;
  font-weight: 500;
}
.tile__ts {
  font-size: 10px; color: var(--ink-mute); margin-top: 6px;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 5px;
}
.tile__ts::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok); display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}
.tile__value--stale .tile__number { color: var(--gray); }
.tile__value--stale + .tile__ts::before { background: var(--gray); animation: none; }

/* Gauge */
.widget--gauge { align-items: center; padding-bottom: var(--s-2); }
.gauge-host { width: 100%; display: flex; flex-direction: column; align-items: center; }
.gauge__svg { width: 78%; max-width: 200px; height: auto; }
.gauge__track {
  fill: none; stroke: var(--line-soft); stroke-width: 10;
  stroke-linecap: round; pathLength: 100;
}
.gauge__fill {
  fill: none; stroke: var(--ok); stroke-width: 10;
  stroke-linecap: round; pathLength: 100;
  transition: stroke-dasharray 0.4s ease, stroke 0.2s;
}
.gauge--amber   .gauge__fill { stroke: var(--warn); }
.gauge--red     .gauge__fill { stroke: var(--crit); }
.gauge--unknown .gauge__fill { stroke: var(--gray); }
.gauge__value { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.gauge__number {
  font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gauge__unit { color: var(--ink-soft); font-size: 12px; }
.gauge__ts { font-size: 10px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.gauge--stale .gauge__number { color: var(--gray); }

/* Status lamp */
.widget--lamp { justify-content: center; }
.lamp { display: flex; align-items: center; gap: var(--s-3); }
.lamp__dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gray);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
  flex-shrink: 0;
}
.lamp--green .lamp__dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(31,157,85,0.18), 0 0 14px rgba(31,157,85,0.40);
}
.lamp--amber .lamp__dot {
  background: var(--warn);
  box-shadow: 0 0 0 3px rgba(184,131,0,0.18), 0 0 14px rgba(184,131,0,0.40);
}
.lamp--red .lamp__dot {
  background: var(--crit);
  box-shadow: 0 0 0 3px rgba(193,39,45,0.18), 0 0 14px rgba(193,39,45,0.45);
}
.lamp__value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lamp__ts { font-size: 10px; color: var(--ink-mute); }
.lamp--stale .lamp__dot { background: var(--gray); box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
.lamp--inline { display: inline-flex; align-items: center; gap: 6px; }
.lamp--inline .lamp__dot { width: 9px; height: 9px; box-shadow: 0 0 0 2px rgba(0,0,0,0.04); }
.lamp--inline.lamp--green .lamp__dot { box-shadow: 0 0 0 2px rgba(31,157,85,0.20); }
.lamp__label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }

/* Data table widget */
.dtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.dtable th {
  text-align: left; color: var(--ink-mute);
  font-weight: 600; padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase; font-size: 9px; letter-spacing: 0.08em;
}
.dtable td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.dtable tr:last-child td { border-bottom: 0; }
.dtable__num { text-align: right; }
.dtable__row--stale { color: var(--gray); }

/* Alarm count badge */
.widget--alarm-badge { text-align: center; justify-content: center; }
.alarm-badge__num {
  font-size: 42px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ok);
}
.alarm-badge__breakdown {
  list-style: none; padding: 0; margin: var(--s-2) 0 0;
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.sev {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--line-soft);
  color: var(--ink-soft);
  font-weight: 600;
}
.sev--critical { color: var(--crit);   background: var(--crit-soft); }
.sev--major    { color: #9b5808;       background: var(--warn-soft); }
.alarm-badge__note { font-size: 10px; color: var(--ink-mute); margin-top: 6px; font-style: italic; }

/* Line chart */
.widget--chart { padding-bottom: 6px; }
.chartjs { width: 100%; max-height: 240px; }

/* Error widget */
.widget--error { border-left: 3px solid var(--crit); }
.widget-error strong { color: var(--crit); margin-right: 6px; }
.widget-error span { color: var(--ink-soft); font-size: 12px; }

/* Empty state inside widget */
.empty { text-align: center; padding: 40px 16px; color: var(--ink-mute); }

/* ============================================================
 * Page-head: title + summary stats + actions
 * ============================================================ */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  color: var(--ink-soft);
  font-size: 13px;
}
.page-head strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pill--green { background: var(--ok-soft);   color: #0a5d2e; }
.pill--gray  { background: var(--line-soft); color: var(--ink-soft); }
.pill--amber { background: var(--warn-soft); color: #7a5500; }
.pill--red   { background: var(--crit-soft); color: var(--crit); }

/* ============================================================
 * Tables (rtable)
 * ============================================================ */
.rtable {
  width: 100%; border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.rtable th, .rtable td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}
.rtable th {
  background: var(--panel-soft);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
}
.rtable tbody tr {
  transition: background 0.08s;
}
.rtable tbody tr:hover { background: var(--brand-tint); }
.rtable tbody tr:last-child td { border-bottom: 0; }
.rtable td code {
  background: var(--line-soft);
  font-size: 11.5px;
}
.rtable__num  { text-align: right; font-variant-numeric: tabular-nums; }
.rtable__ts   { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 12px; }
.rtable__sev  { width: 70px; }
.rtable--compact th, .rtable--compact td { padding: 5px 10px; font-size: 12px; }
.rtable--zebra tbody tr:nth-child(even) { background: var(--panel-soft); }
.rtable--zebra tbody tr:hover { background: var(--brand-tint); }
.row--muted td { color: var(--ink-mute); }

.link { color: var(--info); }
.link:hover { text-decoration: underline; }

/* ============================================================
 * Buttons
 * ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit; font-weight: 600; font-size: 13px;
  background: var(--panel-soft); color: var(--ink);
  transition: background 0.1s, border-color 0.1s, transform 0.05s, color 0.1s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--line-soft); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(13,125,118,0.25); }

.btn--primary {
  background: var(--brand); color: white; border-color: var(--brand);
}
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--secondary {
  background: white; color: var(--ink); border-color: var(--line-strong);
}
.btn--secondary:hover { background: var(--panel-soft); }
.btn--ghost {
  background: transparent; color: var(--ink-soft); border-color: transparent;
}
.btn--ghost:hover { background: var(--line-soft); color: var(--ink); }
.btn--danger {
  background: var(--crit); color: white; border-color: var(--crit);
}
.btn--danger:hover { filter: brightness(1.06); }

.btn--small { height: 26px; padding: 0 9px; font-size: 11px; }
.btn--large { height: 38px; padding: 0 18px; font-size: 14px; }

/* ============================================================
 * Filter bar
 * ============================================================ */
.filter-bar {
  display: flex; gap: var(--s-2); margin-bottom: var(--s-3);
  align-items: stretch;
}
.filter-bar input[type="text"],
.filter-bar input[type="number"] {
  flex: 1; padding: 0 12px;
  height: 32px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 13px;
  background: var(--panel);
}
.filter-bar input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,125,118,0.12); }
.filter-bar--multi { flex-wrap: wrap; align-items: flex-end; }

/* ============================================================
 * Forms (generic + settings)
 * ============================================================ */
.field { display: block; margin-bottom: var(--s-3); }
.field__label {
  display: block;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-soft); margin-bottom: 5px;
  font-weight: 600;
}
.field input, .field select, .field textarea,
.field--inline input, .field--inline select {
  width: 100%;
  padding: 8px 11px; font: inherit; font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel);
  outline: none;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.field input:focus, .field select:focus, .field textarea:focus,
.field--inline input:focus, .field--inline select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13,125,118,0.12);
}
.field--inline { display: flex; flex-direction: column; gap: 4px; }
.field--inline select[multiple] { min-width: 320px; min-height: 120px; }
.form-error {
  background: var(--crit-soft); color: var(--crit);
  padding: 8px 12px; border-radius: var(--radius-sm);
}

/* ============================================================
 * Cards
 * ============================================================ */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-1);
}
.card__header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
}
.card--narrow  { max-width: 720px; }
.card--summary .gw-detail__imei {
  font-size: 15px; font-weight: 600;
  background: var(--line-soft); padding: 3px 8px; border-radius: 3px;
  font-family: var(--font-mono);
}

/* KV display list */
.kv {
  display: grid; grid-template-columns: 150px 1fr;
  gap: 6px 18px;
  margin: 0; font-size: 13px;
}
.kv dt { color: var(--ink-soft); font-size: 12px; }
.kv dd { margin: 0; }

.code-block {
  background: #1a1f29; color: #d4d8df;
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 11.5px; overflow-x: auto;
  font-family: var(--font-mono);
}

/* Messages */
.msg {
  padding: 9px 13px; border-radius: var(--radius-sm); margin-bottom: var(--s-2);
  font-size: 13px; border-left: 3px solid transparent;
}
.msg--success { background: var(--ok-soft);   color: #0a5d2e;     border-color: var(--ok); }
.msg--warning { background: var(--warn-soft); color: #7a5500;     border-color: var(--warn); }
.msg--error   { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.msg--info    { background: var(--info-soft); color: var(--info); border-color: var(--info); }

/* Trend page controls */
.trend-controls {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end;
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ============================================================
 * Alarms — severity chips, badges, alarm rows, state pills
 * ============================================================ */
.sev-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sev-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--panel); color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.sev-chip b {
  font-variant-numeric: tabular-nums;
  background: var(--line-soft); padding: 0 6px; border-radius: 8px;
}
.sev-chip:hover { border-color: var(--brand); color: var(--brand); }
.sev-chip--active { background: var(--brand); color: white; border-color: var(--brand); }
.sev-chip--active b { background: rgba(255,255,255,0.25); color: white; }
.sev-chip--critical { color: var(--sev-critical); border-color: var(--sev-critical); }
.sev-chip--critical.sev-chip--active { background: var(--sev-critical); color: white; }
.sev-chip--major    { color: var(--sev-major); border-color: var(--sev-major); }
.sev-chip--major.sev-chip--active { background: var(--sev-major); color: white; }
.sev-chip--minor    { color: var(--sev-minor); border-color: var(--sev-minor); }
.sev-chip--minor.sev-chip--active { background: var(--sev-minor); color: white; }
.sev-chip--warning  { color: var(--sev-warning); border-color: var(--sev-warning); }
.sev-chip--warning.sev-chip--active { background: var(--sev-warning); color: white; }

.sev-badge {
  display: inline-block;
  padding: 3px 9px; border-radius: 3px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--line-soft); color: var(--ink-soft);
}
.sev-badge--critical { background: var(--sev-critical); color: white; }
.sev-badge--major    { background: var(--sev-major);    color: white; }
.sev-badge--minor    { background: var(--sev-minor);    color: white; }
.sev-badge--warning  { background: var(--sev-warning);  color: white; }

.state-pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.state-pill--firing  { background: var(--crit);      color: white; }
.state-pill--pending { background: var(--warn);      color: white; }
.state-pill--acked   { background: var(--line-soft); color: var(--ink-soft); }

.rtable--alarms tbody tr { border-left: 3px solid transparent; }
.alarm-row--critical { border-left-color: var(--sev-critical); }
.alarm-row--major    { border-left-color: var(--sev-major); }
.alarm-row--minor    { border-left-color: var(--sev-minor); }
.alarm-row--warning  { border-left-color: var(--sev-warning); }
.alarm-row--acked    { opacity: 0.75; }
.alarm-row--pending  td { background: rgba(184,131,0,0.04); }

.event-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.event-tag--raised       { background: var(--crit-soft); color: var(--crit); }
.event-tag--cleared      { background: var(--ok-soft);   color: var(--ok); }
.event-tag--acked        { background: var(--info-soft); color: var(--info); }
.event-tag--auto_cleared { background: var(--line-soft); color: var(--ink-soft); }

.inline-ack { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.inline-ack__pop {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px;
  display: flex; gap: 6px; align-items: center;
  z-index: 20;
  box-shadow: var(--shadow-3);
  white-space: nowrap;
}
.inline-ack__pop input {
  width: 200px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 3px;
}

/* ============================================================
 * Empty state cards (full-page)
 * ============================================================ */
.empty-state {
  text-align: center; padding: 40px 16px;
}
.empty-state__lamp { display: inline-flex; padding: 12px; }
.empty-state h3 {
  margin: 10px 0 4px; font-size: 16px; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}

/* ============================================================
 * Device cards (FRONTEND devices index)
 * ============================================================ */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}
.device-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: var(--shadow-1);
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.05s;
}
.device-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-3);
}
.device-card:active { transform: translateY(1px); }
.device-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.device-card__type {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-mute);
  background: var(--line-soft);
  padding: 3px 8px; border-radius: 3px;
}
.device-card--energy_meter .device-card__type { color: #0a7a4a; background: var(--ok-soft); }
.device-card--dg          .device-card__type { color: #8c4316; background: var(--warn-soft); }
.device-card--transformer .device-card__type { color: #214a82; background: var(--info-soft); }
.device-card--compressor  .device-card__type { color: #b34244; background: var(--crit-soft); }
.device-card__title {
  font-size: 15px; font-weight: 600; color: var(--ink);
  margin-bottom: 2px;
}
.device-card__sub {
  font-size: 11px; color: var(--ink-soft);
  margin-bottom: var(--s-3);
  word-break: break-all;
}
.device-card__sub code {
  background: transparent; padding: 0; font-size: 11px;
}
.device-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
}
.device-card__count {
  font-size: 11px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.device-card__arrow {
  font-size: 16px; color: var(--brand); font-weight: 600;
}

/* Compact gateway card (owner 2026-09-22: "make this something small box with basic details").
 * Four short rows, no dead space: name + actions · chips · identity line · counts + last seen.
 * Everything a person scans for is on the card; the arrow and the whole card open it. */
.device-grid--compact { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.device-card--gw { padding: 10px 12px 8px; gap: 5px; }
.gwc__row1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gwc__name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.gwc__acts { display: flex; gap: 4px; flex: 0 0 auto; }
.gwc__act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
            border-radius: 5px; border: 1px solid var(--line); background: var(--panel-soft); color: var(--ink-soft);
            text-decoration: none; }
.gwc__act:hover { border-color: var(--brand); color: var(--brand); }
.gwc__act--term { background: #0f172a; border-color: #0f172a; }
.gwc__act--term:hover { border-color: #22d3ee; }
.gwc__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.gwc__chip { font-size: 10px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 3px;
             letter-spacing: 0.03em; white-space: nowrap; }
.gwc__chip--customer { background: #fef3c7; color: #92400e; font-weight: 500; letter-spacing: 0; max-width: 170px;
                       overflow: hidden; text-overflow: ellipsis; }
.gwc__chip--http { background: #dbeafe; color: #1e40af; text-transform: uppercase; }
.gwc__chip--mqtt { background: #dcfce7; color: #166534; text-transform: uppercase; }
.gwc__chip--tcp, .gwc__chip--other { background: #f3f4f6; color: #374151; text-transform: uppercase; }
.gwc__chip--type { background: var(--line-soft); color: var(--ink-mute); text-transform: uppercase; }
.gwc__chip--auth { background: #dcfce7; color: #166534; }
.gwc__chip--setup { background: #fef3c7; color: #b45309; white-space: normal; }
.gwc__id { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: var(--ink-soft);
           font-variant-numeric: tabular-nums; min-width: 0; }
.gwc__id code { background: var(--panel-soft); padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--ink-soft); }
.gwc__id span { white-space: nowrap; }
.gwc__foot { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; margin-top: 2px;
             padding-top: 6px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--ink-soft);
             font-variant-numeric: tabular-nums; }
.gwc__foot .muted { white-space: nowrap; }
.gwc__foot .device-card__arrow { font-size: 14px; margin-left: 6px; }
html[data-theme="dark"] .gwc__act { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .gwc__chip--customer { background: rgba(251,191,36,0.16); color: #fcd34d; }
html[data-theme="dark"] .gwc__chip--http { background: rgba(96,165,250,0.16); color: #93c5fd; }
html[data-theme="dark"] .gwc__chip--mqtt, html[data-theme="dark"] .gwc__chip--auth { background: rgba(74,222,128,0.16); color: #86efac; }
html[data-theme="dark"] .gwc__chip--setup { background: rgba(251,191,36,0.16); color: #fcd34d; }

/* Device dashboard top bar */
.device-detail__bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  margin-bottom: var(--s-3);
  font-size: 12px;
}
.device-detail__meta { display: flex; gap: 10px; align-items: center; }
.device-detail__meta code { font-size: 12px; }
.device-detail__actions { display: flex; gap: 6px; }

/* ============================================================
 * Settings form (device/gateway editors)
 * ============================================================ */
.settings-wrap { max-width: 920px; }
.settings-form { display: flex; flex-direction: column; gap: var(--s-3); }

.settings-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.settings-card__header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  padding: 11px 18px;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}
.settings-card__header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: none;
}
.settings-card__hint { font-size: 11px; color: var(--ink-mute); }
.settings-card__hint--link { color: var(--info); }
.settings-card__hint--link:hover { text-decoration: underline; }

.kv-form {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 18px;
  padding: 14px 18px;
  margin: 0;
  font-size: 13px;
}
.kv-form dt {
  color: var(--ink-soft);
  font-size: 12px;
  padding-top: 2px;
}
.kv-form dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.kv-form dd code { font-size: 12.5px; }

.form-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 18px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
}
.form-row:first-of-type { border-top: 0; }
.form-row__label {
  padding-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.form-row__label--check {
  display: flex; align-items: center; gap: 8px;
  padding-top: 0;
}
.form-row__label--check input { transform: scale(1.1); }
.form-row__input { display: flex; flex-direction: column; gap: 4px; }
.settings-form input[type="text"],
.settings-form input[type="number"],
.settings-form textarea,
.settings-form select {
  width: 100%;
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  outline: none;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.settings-form input:focus,
.settings-form textarea:focus,
.settings-form select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13,125,118,0.12);
}
.settings-form textarea { resize: vertical; min-height: 72px; }
.form-row__help { font-size: 11px; color: var(--ink-mute); line-height: 1.45; }
.form-row__error {
  font-size: 11px; color: var(--crit);
  background: var(--crit-soft);
  padding: 4px 8px; border-radius: 3px;
}
.form-row--split { grid-template-columns: 1fr 1fr; }
.form-row--split > div > .form-row__label {
  padding-top: 0; display: block; margin-bottom: 6px;
}

.settings-actions {
  position: sticky; bottom: 0;
  padding: var(--s-3) 0 0;
  display: flex; justify-content: flex-end; gap: 8px;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

/* ============================================================
 * Stage 5.7 — Parameter Profile suggestions
 * Device settings: slot-grid · slot-card
 * Map-unmapped:    quickpick chips
 * ============================================================ */

/* slot-grid: 2-column responsive list of canonical params per device-type */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  padding: 12px 14px;
}
.slot-grid__footer {
  padding: 10px 18px;
  font-size: 11px;
  background: var(--panel-soft);
  border-top: 1px solid var(--line-soft);
}
.slot-grid__footer code {
  background: transparent;
  font-size: 10.5px;
  color: var(--ink-mute);
}

.slot-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 11px;
  background: var(--panel);
  display: flex; flex-direction: column;
  gap: 6px;
  min-height: 70px;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.slot-card--mapped {
  border-left: 3px solid var(--ok);
  background: #f8fcfa;
}
.slot-card--unmapped {
  border-left: 3px solid var(--line);
  border-style: dashed;
  background: var(--panel-soft);
  opacity: 0.92;
}
.slot-card--unmapped:hover {
  border-color: var(--brand);
  opacity: 1;
  box-shadow: var(--shadow-1);
}
.slot-card__head { display: flex; align-items: flex-start; gap: 6px; }
.slot-card__status {
  font-size: 14px; line-height: 1;
  color: var(--ok);
  flex-shrink: 0;
  padding-top: 2px;
}
.slot-card--unmapped .slot-card__status { color: var(--ink-mute); }
.slot-card__title { flex: 1; min-width: 0; }
.slot-card__name {
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
}
.slot-card__slug {
  display: block;
  font-size: 10px;
  color: var(--ink-mute);
  background: transparent;
  padding: 0;
  margin-top: 1px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}
.slot-card__body {
  padding-left: 22px;
  font-size: 11.5px;
}
.slot-card__from {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-soft);
}
.slot-card__from code {
  background: var(--ok-soft);
  color: #0a5d2e;
  font-weight: 600;
}
.slot-card__edit {
  margin-left: auto;
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 13px;
  padding: 0 4px;
}
.slot-card__edit:hover { color: var(--brand); }
.slot-card__suggested-key {
  font-size: 10px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-card__suggested-key code {
  background: transparent;
  padding: 0;
  font-size: 10px;
  color: var(--ink-mute);
}
.slot-card__pick {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 8px;
  background: var(--brand);
  color: white;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
}
.slot-card__pick:hover { background: var(--brand-dark); }

/* Quick-pick chips inside the map-unmapped page */
.quickpick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
}
.quickpick__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, transform 0.05s;
}
.quickpick__chip:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.quickpick__chip:active { transform: translateY(1px); }
.quickpick__chip--active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.quickpick__chip--active .quickpick__unit { color: rgba(255,255,255,0.85); }
.quickpick__slot {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
}
.quickpick__unit {
  color: var(--ink-mute);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--line-soft);
  border-radius: 3px;
}

/* ============================================================
 * Tag-mapping editor — compact source strip + equation preview +
 * caret toggle (advanced collapsible) + danger zone
 * ============================================================ */
.src-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  font-size: 12px;
}
.src-strip__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-right: 4px;
}
.src-strip__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink);
}
.src-strip__chip i {
  font-style: normal;
  color: var(--ink-mute);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.src-strip__chip code {
  background: transparent;
  padding: 0;
  font-size: 11px;
}
.src-strip__chip--field {
  background: #fff8d6;
  border-color: #f1d877;
}
.src-strip__chip--field code { color: #6f4d00; font-weight: 600; }
.src-strip__spacer { flex: 1; }
.src-strip__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--ok-soft);
  color: #0a5d2e;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.src-strip__live b { font-variant-numeric: tabular-nums; }
.src-strip__live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px rgba(31,157,85,0.6);
  animation: pulse 2s ease-in-out infinite;
}
.src-strip__live--stale {
  background: var(--line-soft);
  color: var(--ink-mute);
  font-weight: 500;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}

/* Tag key — non-editable but copyable */
.tag-key-chip {
  display: inline-block;
  padding: 5px 10px;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--ink);
  user-select: all;
}

/* Equation preview */
.eq-preview {
  margin: 8px 18px 14px;
  padding: 12px 14px;
  background: #fafcfb;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.eq-preview__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.eq-preview__line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.eq-preview__raw {
  padding: 4px 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-soft);
}
.eq-preview__var {
  padding: 4px 9px;
  background: var(--info-soft);
  color: var(--info);
  border: 1px solid var(--info);
  border-radius: 4px;
  font-weight: 600;
}
.eq-preview__op { color: var(--ink-mute); font-weight: 700; }
.eq-preview__result {
  margin-left: auto;
  padding: 4px 12px;
  background: var(--brand);
  color: white;
  border-radius: 4px;
  font-size: 16px;
}
.eq-preview__result b { font-weight: 700; }
.eq-preview__result .muted { color: rgba(255,255,255,0.7); margin-left: 4px; font-size: 12px; }
.eq-preview__note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-mute);
  font-style: italic;
}

/* Caret for collapsible cards */
.settings-card__header--toggle {
  cursor: pointer;
  user-select: none;
}
.settings-card__header--toggle:hover { background: var(--line-soft); }
.caret {
  display: inline-block;
  margin-right: 6px;
  color: var(--ink-mute);
  transition: transform 0.15s ease;
}
.caret--open { transform: rotate(90deg); color: var(--brand); }

/* Danger card */
.settings-card--danger { border-color: var(--crit-soft); }
.settings-card--danger .settings-card__header {
  background: #fff5f5;
  border-bottom-color: var(--crit-soft);
}
.settings-card--danger .settings-card__header .danger {
  color: var(--crit);
}
.danger-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.danger-body p { margin: 0; font-size: 13px; line-height: 1.55; }
.danger-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.danger-form .form-row__label { padding-top: 0; }
.danger-form input[type="text"] {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  width: 140px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.danger-form input[type="text"]:focus {
  border-color: var(--crit);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(193,39,45,0.15);
}
.btn--danger {
  background: var(--crit);
  color: white;
  border: 1px solid var(--crit);
  padding: 7px 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
}
.btn--danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn--danger:not(:disabled):hover { background: #a01f24; }

/* ============================================================
 * Build-info pill in topbar — boot · tpl · now
 * Tiny diagnostic so the owner can tell whether a deploy actually
 * shipped new code (tpl changed) vs just bounced the process (boot only).
 * ============================================================ */
/* the build stamp lives in the sidebar footer now, not the header (2026-09-22) */
.build-stamp {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  opacity: .55;
  user-select: none;
  white-space: nowrap;
}
.build-pill {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: #15202b;
  color: #d4d8df;
  border-radius: 999px;
  padding: 3px 4px;
  font-family: "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-right: var(--s-3);
  user-select: none;
}
.build-pill__seg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  position: relative;
  white-space: nowrap;
}
.build-pill__seg + .build-pill__seg::before {
  content: "·";
  position: absolute;
  left: -1px;
  color: rgba(255,255,255,0.25);
  font-size: 12px;
  top: 50%;
  transform: translateY(-52%);
}
.build-pill__seg i {
  font-style: normal;
  color: #f3b94a;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.build-pill__seg:last-child i { color: #6fcf97; }
.build-pill__seg:first-child i { color: #f3b94a; }
.build-pill__seg:nth-child(2) i { color: #5bb6ff; }

@media (max-width: 1180px) {
  .build-pill { font-size: 10px; }
  .build-pill__seg { padding: 3px 7px; }
}
@media (max-width: 900px) {
  .build-pill__seg:nth-child(-n+2) { display: none; }
}

/* ============================================================
 * Responsive — three tiers
 *   ≤ 1180px : tighten label column + card padding (sidebar still 224px)
 *   ≤  960px : stack labels on top of inputs (sidebar still 224px)
 *   ≤  900px : sidebar collapses to icon-only 64px (last resort)
 * ============================================================ */

/* Tier 1 — most desktops with the platform open in a half-screen window */
@media (max-width: 1180px) {
  .settings-wrap { max-width: 100%; }
  .kv-form,
  .form-row { grid-template-columns: 160px 1fr; gap: 6px 14px; padding: 12px 14px; }
  .settings-card__header { padding: 9px 14px; }
  .settings-card__header { flex-wrap: wrap; }
  .settings-card__hint { flex-basis: 100%; }
  .form-row__label { padding-top: 7px; font-size: 11.5px; }
  .settings-form input[type="text"],
  .settings-form input[type="number"],
  .settings-form textarea,
  .settings-form select { padding: 7px 10px; font-size: 12.5px; }
  .form-row__help { line-height: 1.4; }
}

/* Tier 2 — narrow content area: stack labels above inputs */
@media (max-width: 960px) {
  .kv-form,
  .form-row { grid-template-columns: 1fr; gap: 4px 0; padding: 10px 14px; }
  .form-row__label { padding-top: 0; }
  .form-row--split { grid-template-columns: 1fr 1fr; gap: 10px; }
  .settings-card__header h2 { font-size: 12.5px; }
  .settings-form { gap: var(--s-2); }
  .settings-actions { padding-bottom: var(--s-3); }
}

/* Tier 3 — true narrow viewport (a phone): the menu is a drawer, see MENU_DRAWER at the end of this file.
   It was a rail of icons without their words. */
@media (max-width: 900px) {
  .topbar { padding: 0 var(--s-3); }
  .page { padding: var(--s-3); }
  .form-row--split { grid-template-columns: 1fr; }
}

/* ============================================================
 * Topology page — FDM-style communication tree
 * server → broker → gateways → slaves
 * ============================================================ */

.topo {
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  padding: var(--s-4) 0;
}

.topo__tier {
  display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center;
  width: 100%;
}
.topo__tier--gateways { gap: var(--s-5); align-items: flex-start; }

.topo__node {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-3) var(--s-4) var(--s-4);
  box-shadow: var(--shadow-2);
  text-align: center;
  min-width: 220px;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.topo__node--server { border-color: #3a4a5c; }
.topo__node--broker { border-color: var(--brand); }
.topo__node--gateway { min-width: 280px; max-width: 360px; text-align: left; align-items: stretch; }
.topo__node--gateway.is-online  { box-shadow: 0 0 0 1px rgba(31,157,85,0.3), var(--shadow-2); }
.topo__node--gateway.is-offline { opacity: 0.85; border-color: var(--line-strong); }

.topo__icon { margin-bottom: 6px; line-height: 0; }
.topo__icon--gw { align-self: center; }

.topo__node-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.topo__node-type {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mute);
}

.topo__title {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 4px;
  display: block;
}
.topo__title:hover { color: var(--brand); }
.topo__sub {
  font-size: 11px; color: var(--ink-soft);
  margin-bottom: var(--s-2);
  line-height: 1.5;
}
.topo__sub code { font-size: 11px; }
.topo__chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
  justify-content: center;
}
.topo__node--gateway .topo__chips { justify-content: flex-start; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chip--warn { background: var(--warn-soft); color: #7a5500; border-color: transparent; }
.chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gray); flex-shrink: 0;
}
.chip__dot--green { background: var(--ok); box-shadow: 0 0 0 2px rgba(31,157,85,0.18); }

/* Vertical connectors between tiers */
.topo__connector {
  width: 2px;
  height: 32px;
  background: linear-gradient(to bottom, var(--brand), var(--line-strong));
  margin: 0 auto;
  position: relative;
}
.topo__connector::after {
  content: ""; position: absolute; left: -3px; bottom: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 2px var(--panel);
}

/* Horizontal bus line above gateway row */
.topo__bus {
  position: relative;
  width: 80%; max-width: 1100px;
  height: 2px;
  background: var(--brand);
  margin: var(--s-3) 0 var(--s-3);
}
.topo__bus::before, .topo__bus::after {
  content: ""; position: absolute; top: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
}
.topo__bus::before { left: -4px; }
.topo__bus::after  { right: -4px; }
.topo__bus-label {
  position: absolute; left: 50%; top: -22px;
  transform: translateX(-50%);
  background: var(--panel);
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--ink-soft);
}

/* RS485 rail under each gateway */
.topo__rs485 {
  position: relative;
  margin: var(--s-4) -8px var(--s-3);
  height: 2px;
  background: #4f5d6c;
  border-radius: 1px;
}
.topo__rs485::before, .topo__rs485::after {
  content: ""; position: absolute; top: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #4f5d6c;
}
.topo__rs485::before { left: -4px; }
.topo__rs485::after  { right: -4px; }
.topo__rs485-label {
  position: absolute; left: 12px; top: -22px;
  background: var(--panel);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}

/* Slave devices fanning out under a gateway */
.topo__slaves {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.topo__slave {
  display: flex; flex-direction: column; align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  text-align: center;
  color: inherit;
  transition: border-color 0.1s, transform 0.05s, background 0.1s;
}
.topo__slave:hover { border-color: var(--brand); background: var(--brand-tint); }
.topo__slave:active { transform: translateY(1px); }
.topo__slave--energy_meter { border-top: 3px solid var(--ok); }
.topo__slave--dg           { border-top: 3px solid var(--warn); }
.topo__slave--transformer  { border-top: 3px solid var(--info); }
.topo__slave--compressor   { border-top: 3px solid var(--crit); }
.topo__slave--temp         { border-top: 3px solid #b34244; }
.topo__slave--flow         { border-top: 3px solid #2a8b8b; }
.topo__slave--generic      { border-top: 3px solid var(--gray); }

.topo__slave-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  margin-bottom: 4px;
  font-size: 9px;
}
.topo__slave-sid {
  font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft);
}
.topo__slave-icon { margin-bottom: 4px; line-height: 0; }
.topo__slave-title {
  font-size: 11px; font-weight: 600; color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.2;
}
.topo__slave-sub {
  font-size: 9px; color: var(--ink-mute);
  line-height: 1.3;
}

/* Bullet list inside a settings-card */
.settings-list {
  padding: 14px 18px 14px 38px;
  margin: 0;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.6;
}
.settings-list li { margin: 2px 0; }
.settings-list code { font-size: 11.5px; }
.settings-list em { color: var(--brand); font-style: normal; font-weight: 600; }

/* Compact row actions (edit/toggle/delete buttons in tables) */
.rtable__actions {
  white-space: nowrap;
  text-align: right;
}
.rtable__actions form,
.rtable__actions .btn {
  vertical-align: middle;
  margin-left: 2px;
}

/* ============================================================================
 * Stage 9 — Tenancy-specific styles + global compact pass
 * (appended to wiman.css after Stage 5.7)
 *
 * COMPACT PASS rationale:
 *   - Settings forms had too much vertical whitespace (40-50% wasted)
 *   - Inputs stretched edge-to-edge on wide screens — hard to scan
 *   - Section headers + cards had heavy padding
 * Tightening rules below apply to ALL settings pages (tenancy + Stage 5.6),
 * so device_settings.html / gateway_settings.html benefit automatically.
 * ========================================================================== */


/* ---------- Compact settings cards (global override) -------------------- */

.settings-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--s-3, 12px) var(--s-2, 8px);
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 12px);
}

.settings-card {
  background: #fff;
  border: 1px solid var(--border, #e6e9ec);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.04));
  padding: var(--s-2, 8px) var(--s-4, 16px) var(--s-3, 12px);
}

.settings-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3, 12px);
  padding: var(--s-2, 8px) 0 var(--s-2, 8px);
  margin: 0 0 var(--s-2, 8px);
  border-bottom: 1px solid var(--border-soft, #f0f2f4);
}

.settings-card__header h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  margin: 0;
  color: var(--text, #1d2226);
}

.settings-card__hint {
  font-size: 11.5px;
  color: var(--muted, #7a8086);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Compact form rows ------------------------------------------- */

.form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-2, 8px) var(--s-3, 12px);
  align-items: start;
  padding: var(--s-1, 4px) 0;
  margin: 0;
}

.form-row + .form-row {
  border-top: none;        /* no internal dividers — too noisy */
  padding-top: var(--s-2, 8px);
}

.form-row__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1d2226);
  padding-top: 6px;                /* aligns label with input baseline */
  margin: 0;
  line-height: 1.4;
}

.form-row__label--check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 0;
  font-weight: 500;
  font-size: 13px;
}

.form-row__label--check input[type="checkbox"] {
  margin: 0;
}

.form-row__input {
  min-width: 0;
}

.form-row__input .form-control,
.form-row__input .form-select,
.form-row__input input[type="text"],
.form-row__input input[type="email"],
.form-row__input input[type="number"],
.form-row__input input[type="date"],
.form-row__input input[type="password"],
.form-row__input select,
.form-row__input textarea {
  max-width: 480px;
  width: 100%;
  padding: 6px 10px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid var(--border, #d5d9dd);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  color: var(--text, #1d2226);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.form-row__input input:focus,
.form-row__input select:focus,
.form-row__input textarea:focus {
  outline: none;
  border-color: var(--saga-darkest, #347f8c);
  box-shadow: 0 0 0 3px rgba(52, 127, 140, .12);
}

.form-row__input textarea {
  max-width: 600px;
  resize: vertical;
  min-height: 60px;
}

.form-row__help {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted, #7a8086);
  line-height: 1.5;
  max-width: 600px;
}

.form-row__error {
  margin-top: 3px;
  font-size: 12px;
  color: #b51a1a;
  font-weight: 500;
}

/* ---------- Compact split row (2-col side-by-side) ---------------------- */

.form-row--split {
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2, 8px) var(--s-4, 16px);
}

.form-row--split > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-row--split .form-row__label {
  padding-top: 0;
}

.form-row--split .form-control,
.form-row--split input,
.form-row--split select,
.form-row--split textarea {
  max-width: none;     /* let split inputs fill their half */
}

/* ---------- Three-up rows (e.g. SMS / Email / Monthly checkboxes) ------- */

.form-row--triple {
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-2, 8px) var(--s-3, 12px);
}

/* ---------- Field placeholders look softer ------------------------------ */

.form-row__input ::placeholder {
  color: #adb2b8;
  font-size: 13px;
}

/* ---------- Settings actions bar (sticky bottom) ------------------------ */

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2, 8px);
  padding: var(--s-3, 12px) var(--s-4, 16px);
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(245,247,249,0) 0%, rgba(245,247,249,1) 35%);
  margin: var(--s-2, 8px) calc(-1 * var(--s-2, 8px)) 0;
}

/* ---------- KV form (read-only field pairs) ----------------------------- */

.kv-form {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 4px var(--s-3, 12px);
  margin: 0;
  padding: var(--s-1, 4px) 0;
}

.kv-form dt {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted, #7a8086);
  padding-top: 2px;
  line-height: 1.5;
}

.kv-form dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text, #1d2226);
}


/* ---------- Responsive collapse ----------------------------------------- */

@media (max-width: 720px) {
  .form-row,
  .kv-form {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .form-row__label,
  .kv-form dt {
    padding-top: 0;
    font-weight: 600;
  }
  .form-row--split,
  .form-row--triple {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
 * TENANCY-specific bits (home tiles + state pills + help section)
 * ========================================================================== */

/* ---------- Tenancy home tiles ----------------------------------------- */

.tenancy-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3, 12px);
  margin: var(--s-3, 12px) 0 var(--s-4, 16px);
  max-width: 920px;
}

.tenancy-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s-3, 12px) var(--s-2, 8px);
  background: #fff;
  border: 1px solid var(--border, #e6e9ec);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.04));
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.tenancy-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2, 0 3px 10px rgba(0,0,0,.08));
  border-color: var(--saga-mint, #3eb6a1);
}

.tenancy-tile__icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 4px;
  opacity: .85;
}

.tenancy-tile__count {
  font-size: 26px;
  font-weight: 600;
  color: var(--saga-darkest, #347f8c);
  line-height: 1.1;
}

.tenancy-tile__label {
  margin-top: 4px;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text, #1d2226);
}

.tenancy-tile__hint {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #7a8086);
}

/* ---------- Help section + page intro ---------------------------------- */

.tenancy-help {
  margin: var(--s-4, 16px) 0;
  padding: var(--s-3, 12px) var(--s-4, 16px);
  background: #fff;
  border: 1px solid var(--border, #e6e9ec);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.04));
  max-width: 920px;
}

.tenancy-help h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted, #7a8086);
  margin: 0 0 6px;
}

.tenancy-help h2:not(:first-child) {
  margin-top: var(--s-3, 12px);
}

.topology-tree {
  margin: 0;
  padding: 10px 12px;
  background: var(--saga-pale, #f5fbf9);
  border: 1px solid var(--saga-mint-2, #c8eae3);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  color: var(--text, #1d2226);
}

.workflow {
  margin: 0;
  padding-left: 22px;
  line-height: 1.5;
  font-size: 13px;
}

.workflow li {
  margin: 2px 0;
}

.workflow strong {
  color: var(--saga-darkest, #347f8c);
}

.page-intro {
  margin: 4px 0 var(--s-3, 12px);
  max-width: 720px;
  line-height: 1.5;
}

.page-intro .muted {
  color: var(--muted, #7a8086);
  font-size: 13px;
}

/* ---------- State pill variants used by tenancy lists ------------------ */

.state-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}

.state-pill--ok     { background: #e6f6ef; color: #0a7c3e; }
.state-pill--info   { background: #e6f0fa; color: #1959a8; }
.state-pill--brand  { background: var(--saga-pale, #ddf3ee); color: var(--saga-darkest, #347f8c); }
.state-pill--muted  { background: #eef0f2; color: #6b7178; }
.state-pill--danger { background: #fdecea; color: #b51a1a; }

/* ---------- Sidebar sub-divider ---------------------------------------- */

.sidebar__divider--sub {
  margin-top: var(--s-2, 8px);
  opacity: .55;
  font-size: 10px;
  letter-spacing: .12em;
}

/* ---------- Mobile tweaks ---------------------------------------------- */

@media (max-width: 720px) {
  .tenancy-tiles {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .tenancy-tiles {
    grid-template-columns: 1fr;
  }
}
/* ============================================================================
 * Gateway tabbed dashboard — single page per gateway, slaves as tabs.
 * Matches the AKS Cold Storage layout (Location tabs + green/yellow cards).
 * Appended to wiman.css after the Stage 9 tenancy block.
 * ========================================================================== */

.gw-dash {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--s-2, 8px);
}

/* ---------- Status strip ----------------------------------------------- */

.gw-dash__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3, 12px);
  padding: var(--s-2, 8px) var(--s-3, 12px);
  margin: var(--s-2, 8px) 0 var(--s-3, 12px);
  background: #fff;
  border: 1px solid var(--border, #e6e9ec);
  border-radius: var(--radius, 8px);
  font-size: 12.5px;
}

.gw-dash__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #f3f5f7;
  font-weight: 600;
  letter-spacing: .04em;
  font-size: 11.5px;
}

.gw-dash__lamp {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.gw-dash__lamp--online   { background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.18); }
.gw-dash__lamp--offline  { background: #e74c3c; box-shadow: 0 0 0 3px rgba(231,76,60,.18); }
.gw-dash__lamp--unknown  { background: #95a5a6; box-shadow: 0 0 0 3px rgba(149,165,166,.18); }

.gw-dash__meta {
  font-size: 12.5px;
  color: var(--text, #1d2226);
}

/* ---------- Slave tabs (the "Location 1 | 2 | 3 …" row) ---------------- */

.slave-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 2px solid var(--border, #e6e9ec);
  margin: 0 0 var(--s-3, 12px);
  background: #fff;
  border-top-left-radius: var(--radius, 8px);
  border-top-right-radius: var(--radius, 8px);
  overflow-x: auto;
}

.slave-tab {
  background: none;
  border: 0;
  padding: var(--s-3, 12px) var(--s-4, 16px);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted, #7a8086);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;            /* overlap the parent's border-bottom */
  transition: color .12s ease, border-color .12s ease, background .12s ease;
  white-space: nowrap;
}

.slave-tab:hover {
  color: var(--text, #1d2226);
  background: rgba(52, 127, 140, 0.05);
}

.slave-tab--active {
  color: var(--saga-darkest, #347f8c);
  border-bottom-color: var(--saga-darkest, #347f8c);
}

/* ---------- Slave panel (only active is visible) ----------------------- */

.slave-panel {
  display: none;
  animation: fadeIn .12s ease-in;
}
.slave-panel--active {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slave-panel__footer {
  margin-top: var(--s-3, 12px);
  padding-top: var(--s-2, 8px);
  border-top: 1px dashed var(--border, #e6e9ec);
}

/* ---------- Cards inside a panel (Temperature + Humidity style) -------- */

.storage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4, 16px);
  margin-top: var(--s-2, 8px);
}

.storage-card {
  background: #fff;
  border: 1px solid var(--border, #e6e9ec);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.05));
  transition: transform .12s ease, box-shadow .12s ease;
}

.storage-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2, 0 4px 12px rgba(0,0,0,.08));
}

.storage-card__head {
  padding: 14px 18px;
  font-weight: 600;
  letter-spacing: .04em;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  background: var(--saga-darkest, #347f8c);
}

/* Card colors by parameter kind (kind set server-side) */
.storage-card--temperature .storage-card__head { background: #43a047; }   /* green */
.storage-card--humidity    .storage-card__head { background: #c0ca33; }   /* lime/yellow */
.storage-card--pressure    .storage-card__head { background: #1976d2; }   /* blue */
.storage-card--flow        .storage-card__head { background: #00897b; }   /* teal */
.storage-card--voltage     .storage-card__head { background: #ef6c00; }   /* orange */
.storage-card--current     .storage-card__head { background: #ad1457; }   /* magenta */
.storage-card--power       .storage-card__head { background: #5e35b1; }   /* purple */
.storage-card--generic     .storage-card__head { background: var(--saga-darkest, #347f8c); }

.storage-card__body {
  padding: 28px 18px 18px;
  text-align: center;
  background: #fff;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Override the default tile__value layout inside our storage cards
   so the number is BIG and the unit subtle, matching the screenshot. */
.storage-card__body .tile__value {
  font-size: 38px;
  font-weight: 700;
  color: var(--text, #1d2226);
  line-height: 1.1;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.storage-card__body .tile__number {
  font-variant-numeric: tabular-nums;
}

.storage-card__body .tile__unit {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted, #7a8086);
  text-transform: lowercase;
}

.storage-card__body .tile__value--stale {
  color: var(--muted, #95a5a6);
  opacity: .55;
}

.storage-card__body .tile__ts {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted, #95a5a6);
  letter-spacing: .04em;
}

/* ---------- Empty state ------------------------------------------------ */

.empty-state {
  padding: var(--s-5, 24px);
  text-align: center;
  background: #fff;
  border: 1px dashed var(--border, #d5d9dd);
  border-radius: var(--radius, 8px);
  color: var(--muted, #7a8086);
  margin: var(--s-3, 12px) 0;
}

/* ---------- Mobile ----------------------------------------------------- */

@media (max-width: 720px) {
  .storage-cards {
    grid-template-columns: 1fr;
  }
  .slave-tab {
    padding: var(--s-2, 8px) var(--s-3, 12px);
    font-size: 11.5px;
  }
  .gw-dash__strip {
    gap: var(--s-2, 8px);
    font-size: 11.5px;
  }
}

/* ============================================================
 * Stat tiles — fleet summary row (used on /registry/devices/)
 * ============================================================ */
.stat-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0 0 1.25rem;
}
.stat-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  position: relative;
  box-shadow: 0 1px 2px rgba(15, 32, 45, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stat-tile:hover {
  box-shadow: 0 4px 8px rgba(15, 32, 45, 0.08);
  transform: translateY(-1px);
}
.stat-tile__num {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-tile__label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.stat-tile--ok { border-left: 3px solid var(--ok); }
.stat-tile--ok .stat-tile__num { color: var(--ok); }
.stat-tile--warn { border-left: 3px solid var(--warn); }
.stat-tile--warn .stat-tile__num { color: var(--warn); }
.stat-tile--crit { border-left: 3px solid var(--crit); }
.stat-tile--crit .stat-tile__num { color: var(--crit); }

/* ============================================================
 * Page jump-nav — sticky section navigation on long settings pages
 * ============================================================ */
.page-jumpnav {
  position: sticky;
  top: 56px; /* below the topbar */
  z-index: 10;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 8px;
  margin: 0 0 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(15, 32, 45, 0.05);
}
.page-jumpnav a {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--panel-soft);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background 0.1s ease, color 0.1s ease;
}
.page-jumpnav a:hover {
  background: var(--brand-soft);
  color: var(--brand);
}
.page-jumpnav a.danger {
  color: var(--crit);
  background: var(--crit-soft);
}
.page-jumpnav a.danger:hover {
  background: var(--crit);
  color: var(--panel);
}

/* Scroll-margin so section headers don't hide under the sticky topbar
 * + jumpnav when clicked from a jump-link. */
[id^="sec-"] { scroll-margin-top: 120px; }

/* ============================================================
 * Polished device card refinements
 * ============================================================ */
.device-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.device-card:hover {
  box-shadow: 0 6px 16px rgba(15, 32, 45, 0.12);
  transform: translateY(-2px);
  border-color: var(--brand-soft);
}
.device-card__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.device-card__sub code {
  background: var(--panel-soft);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* DASHBOARD_FACE_CSS — global time-range picker, sparkline, trend arrow, source badge */

.range-picker {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; margin: 0 0 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15,32,45,.05);
}
.range-picker__label {
  font-size: 11.5px; color: var(--ink-soft); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.range-picker__chips {
  display: inline-flex; gap: 6px; border-radius: 6px;
  background: #f1f5f9; padding: 3px; border: 1px solid #e2e8f0;
}
.range-chip {
  border: 0; padding: 6px 14px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); background: transparent; border-radius: 4px;
  cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
}
.range-chip:hover { background: rgba(20,184,166,0.08); color: var(--brand); }
.range-chip.active {
  background: var(--brand); color: #fff;
  box-shadow: 0 1px 3px rgba(15,118,110,.25);
}
.range-picker__source {
  font-size: 11.5px; color: var(--ink-soft); margin-left: auto;
  font-family: ui-monospace, Menlo, monospace; font-weight: 500;
}

/* Source badge on charts */
.chart__source-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  vertical-align: middle;
}

/* Sparkline area on value tile */
.tile__spark {
  width: 100%; height: 42px;
  margin-top: 6px;
  position: relative;
}
.tile__spark svg { width: 100%; height: 100%; display: block; }

/* Trend arrow next to value */
.tile__trend {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  font-family: ui-monospace, Menlo, monospace;
  vertical-align: 2px;
}
.tile__trend[data-trend="up"]   { color: #047857; }
.tile__trend[data-trend="down"] { color: #b91c1c; }
.tile__trend[data-trend="flat"] { color: #64748b; }

/* ============================================================
 * DASHBOARD_GRID_POLISH — phone breakpoint + improved widget hover
 * ============================================================ */

/* Widget lift + softer shadow on hover */
.widget {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.widget:hover {
  border-color: var(--brand-soft, #5eead4);
  box-shadow: 0 6px 14px rgba(15, 32, 45, 0.08);
  transform: translateY(-1px);
}

/* Phone breakpoint (≤640 px) — collapse to single column */
@media (max-width: 640px) {
  .dash { gap: 10px; }
  .dash__row { grid-template-columns: 1fr; gap: 10px; }
  .dash__col--1, .dash__col--2, .dash__col--3,
  .dash__col--4, .dash__col--5, .dash__col--6,
  .dash__col--7, .dash__col--8, .dash__col--9,
  .dash__col--10, .dash__col--11, .dash__col--12 {
    grid-column: span 1;
  }
  .widget {
    min-height: 88px;
    padding: 10px 12px;
    border-radius: 8px;
  }
  .tile__number { font-size: 30px; }
  .widget__title { font-size: 9px; letter-spacing: 0.06em; }
  .widget--chart { height: 200px !important; }
  /* Range picker compacts gracefully */
  .range-picker { padding: 8px 12px; gap: 8px; }
  .range-picker__source { display: none; }
}

/* Small tablet (641-820px) — keep 6 cols but tighter */
@media (min-width: 641px) and (max-width: 820px) {
  .dash { gap: 10px; }
  .dash__row { gap: 10px; }
  .widget { min-height: 100px; padding: 10px 14px; }
  .tile__number { font-size: 30px; }
}

/* Make the sparkline slot collapse on phones so number stays prominent */
@media (max-width: 480px) {
  .tile__spark { display: none; }
}

/* DASHBOARD_FACE_TILE_ROW — trend arrow sits beside the value */
.tile__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.tile__swap { flex: 1; min-width: 0; }
.tile__row .tile__trend {
  font-size: 20px; font-weight: 700;
  flex: 0 0 auto;
  line-height: 1;
  margin-left: 4px;
  font-family: ui-monospace, Menlo, monospace;
}


/* ============================================================
   SIDEBAR_COLLAPSIBLE_BLOCK -- Stripe-style collapsible rail.
   Toggle button at top-right of sidebar collapses to 64px icon-only.
   ============================================================ */

.sidebar {
  transition: width 180ms ease;
}

.sidebar__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand__logo {
  height: 24px;
  width: auto;
  flex-shrink: 0;
}
.brand__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-toggle {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,0.10);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 120ms ease, transform 180ms ease;
}
.sb-toggle:hover { background: rgba(255,255,255,0.20); }
.sb-toggle svg { width: 14px; height: 14px; }

.navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  position: relative;
}
.navlink__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
.navlink:hover .navlink__icon { opacity: 1; }
.navlink--active .navlink__icon { opacity: 1; }
.navlink__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.nav-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.4;
}
.nav-badge--critical { background:#7f1d1d; color:#fecaca; }
.nav-badge--major    { background:#9a3412; color:#fed7aa; }
.nav-badge--minor    { background:#854d0e; color:#fde68a; }
.nav-badge--warning  { background:#374151; color:#e5e7eb; }

/* ─── COLLAPSED STATE ─────────────────────────────────────── */

.sidebar--collapsed { width: 64px; }
.sidebar--collapsed .brand__name { display: none; }
.sidebar--collapsed .sidebar__divider { display: none; }
.sidebar--collapsed .navlink__label { display: none; }
.sidebar--collapsed .navlink__tag { display: none; }
.sidebar--collapsed .nav-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 9px;
  padding: 0 4px;
  line-height: 1.3;
}
.sidebar--collapsed .navlink {
  justify-content: center;
  padding: 10px 0;
}
.sidebar--collapsed .navlink--sub { padding-left: 0; }
.sidebar--collapsed .sb-toggle svg { transform: rotate(180deg); }
.sidebar--collapsed .sidebar__footer .user { display: none; }
.sidebar--collapsed .sidebar__footer .logout { display: none; }
.sidebar--collapsed .sidebar__footer .build-stamp { display: none; }
.sidebar--collapsed .sidebar__footer {
  padding: 8px 4px;
  text-align: center;
}

/* Native tooltip when collapsed shows the title= attribute */
.sidebar--collapsed .navlink { cursor: pointer; }

/* Content shifts when sidebar collapses */
.sidebar--collapsed + .content { /* no extra rule needed -- flex layout handles it */ }


/* ============================================================
   GLOSSY_DASHBOARD_BLOCK -- premium widget surface polish.
   Appended at end so cascade wins over earlier .widget rules.
   ============================================================ */

/* Subtle radial-gradient page backdrop instead of flat grey */
body .content,
body .dash-page,
body main.content {
  background:
    radial-gradient(1200px 600px at 0% -10%, rgba(20,184,166,0.06), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(14,165,233,0.05), transparent 65%),
    #f5f7fa;
}

/* Cards: bigger radius, layered shadow, gradient surface, smooth lift */
.widget {
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.06);
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 24px -10px rgba(15,23,42,0.10);
  padding: 16px 18px;
  min-height: 140px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  position: relative;
  overflow: hidden;
}
.widget::before {
  /* glossy highlight strip across the top */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(20,184,166,0.45), transparent);
  pointer-events: none;
}
.widget:hover {
  transform: translateY(-2px);
  border-color: rgba(20,184,166,0.30);
  box-shadow:
    0 2px 4px rgba(15,23,42,0.05),
    0 14px 32px -10px rgba(15,23,42,0.16),
    0 0 0 1px rgba(20,184,166,0.15);
}

/* Title row: brand-accent left stripe + tighter spacing */
.widget__title {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: #475569;
  padding-left: 10px;
  position: relative;
  margin-bottom: 10px;
}
.widget__title::before {
  content: "";
  position: absolute;
  left: 0; top: 1px; bottom: 1px;
  width: 3px;
  background: linear-gradient(180deg, #0f766e, #14b8a6);
  border-radius: 2px;
}

/* Value tile: bigger number, crisper letter-spacing */
.tile__row {
  align-items: center;
  gap: 6px;
}
.tile__number {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.0;
  color: #0f172a;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tile__unit {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  margin-left: 4px;
  align-self: flex-end;
  padding-bottom: 6px;
}
.tile__trend {
  font-size: 18px;
  font-weight: 800;
  opacity: 0.85;
}
.tile__trend[data-trend="up"]   { color: #047857; }
.tile__trend[data-trend="down"] { color: #b91c1c; }
.tile__trend[data-trend="flat"] { color: #14b8a6; }

/* Sparkline: brighter area fill */
.tile__spark {
  height: 46px;
  margin-top: 8px;
  opacity: 0.95;
}

/* Status lamp: bigger dot + glow + breathing pulse on green */
.widget--lamp { justify-content: center; align-items: center; }
.lamp { gap: 14px; }
.lamp__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
}
.lamp--green .lamp__dot {
  background: radial-gradient(circle at 35% 35%, #4ade80, #16a34a);
  box-shadow:
    0 0 0 3px rgba(34,197,94,0.18),
    0 0 16px 2px rgba(34,197,94,0.45);
  animation: lampPulseGreen 2.4s ease-in-out infinite;
}
.lamp--amber .lamp__dot {
  background: radial-gradient(circle at 35% 35%, #fbbf24, #d97706);
  box-shadow:
    0 0 0 3px rgba(245,158,11,0.18),
    0 0 14px 2px rgba(245,158,11,0.45);
}
.lamp--red .lamp__dot {
  background: radial-gradient(circle at 35% 35%, #f87171, #dc2626);
  box-shadow:
    0 0 0 3px rgba(239,68,68,0.20),
    0 0 18px 3px rgba(239,68,68,0.55);
  animation: lampPulseRed 1.4s ease-in-out infinite;
}
.lamp--stale .lamp__dot {
  background: radial-gradient(circle at 35% 35%, #cbd5e1, #94a3b8);
  box-shadow: 0 0 0 3px rgba(100,116,139,0.10);
  animation: none;
}
.lamp__value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
@keyframes lampPulseGreen {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.18), 0 0 16px 2px rgba(34,197,94,0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0.10), 0 0 22px 4px rgba(34,197,94,0.60); }
}
@keyframes lampPulseRed {
  0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,0.20), 0 0 18px 3px rgba(239,68,68,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0.10), 0 0 26px 5px rgba(239,68,68,0.75); }
}

/* Gauge: gradient arc + softer track */
.gauge__svg { width: 84%; max-width: 220px; }
.gauge__track {
  stroke: rgba(15,23,42,0.06);
  stroke-width: 11;
}
.gauge__value {
  stroke-width: 11;
  stroke: url(#wm-gauge-gradient);
  filter: drop-shadow(0 1px 2px rgba(15,118,110,0.30));
}
.gauge__pct {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Inject a gradient defs at the body level via ::before pseudo-element trick.
   (Actual gradient defs need to be in SVG; this fallback ensures the
    --primary stroke still renders even if defs id isn't present.) */
.gauge__value:not([stroke^="url"]) {
  stroke: #14b8a6;
}

/* Empty / loading state polish */
.tile__value:empty::before,
.lamp__value:empty::before {
  content: "—";
  color: #cbd5e1;
  font-size: 32px;
  font-weight: 500;
}

/* Dashboard meta strip + topbar lift */
.meta-strip {
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(240,253,250,0.95) 0%, rgba(220,252,231,0.65) 100%);
  border: 1px solid rgba(20,184,166,0.25);
  box-shadow: 0 2px 8px -2px rgba(20,184,166,0.18);
}

/* Better empty placeholders for tiles with no data */
.widget .tile__row:has(.tile__number:empty) .tile__number::before,
.widget .tile__row:has(.tile__swap:empty) .tile__number::before {
  content: "—";
  color: #cbd5e1;
}


/* ============================================================
   PREMIUM_TIER_2_BLOCK -- glassmorphism + per-metric color +
   entry animation + refined typography. Appended after GLOSSY.
   ============================================================ */

/* Richer page backdrop: more saturated gradient, no flat zones */
body .content,
body .dash-page,
body main.content {
  background:
    radial-gradient(1400px 700px at -5% -15%, rgba(20,184,166,0.10), transparent 55%),
    radial-gradient(1200px 600px at 105% 115%, rgba(14,165,233,0.08), transparent 60%),
    radial-gradient(800px 400px at 50% 50%, rgba(15,118,110,0.03), transparent 70%),
    linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Cards: frosted glass + bigger radius + premium shadow stack */
.widget {
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(250,251,252,0.75) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 1px 1px rgba(15,23,42,0.04),
    0 2px 6px rgba(15,23,42,0.04),
    0 16px 40px -14px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
  padding: 18px 20px 16px;
  min-height: 150px;
  animation: cardEntry 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms ease,
              border-color 220ms ease;
}
.widget:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow:
    0 2px 4px rgba(15,23,42,0.05),
    0 4px 10px rgba(15,23,42,0.06),
    0 24px 48px -16px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(20,184,166,0.35);
}

/* Staggered card entry for that "load orchestrated" feel */
@keyframes cardEntry {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.widget:nth-child(1)  { animation-delay: 0ms; }
.widget:nth-child(2)  { animation-delay: 40ms; }
.widget:nth-child(3)  { animation-delay: 80ms; }
.widget:nth-child(4)  { animation-delay: 120ms; }
.widget:nth-child(5)  { animation-delay: 160ms; }
.widget:nth-child(6)  { animation-delay: 200ms; }
.widget:nth-child(7)  { animation-delay: 240ms; }
.widget:nth-child(8)  { animation-delay: 280ms; }
.widget:nth-child(9)  { animation-delay: 320ms; }
.widget:nth-child(10) { animation-delay: 360ms; }
.widget:nth-child(n+11) { animation-delay: 400ms; }

/* Per-metric color stripe on the title accent */
.widget__title {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: #475569;
  padding-left: 12px;
  margin-bottom: 12px;
}
.widget__title::before {
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0f766e, #14b8a6, #2dd4bf);
  box-shadow: 0 0 8px -1px rgba(20,184,166,0.4);
}
.widget--gauge .widget__title::before {
  background: linear-gradient(180deg, #0369a1, #0ea5e9, #38bdf8);
  box-shadow: 0 0 8px -1px rgba(14,165,233,0.45);
}
.widget--lamp .widget__title::before {
  background: linear-gradient(180deg, #7c2d12, #f59e0b, #fbbf24);
  box-shadow: 0 0 8px -1px rgba(245,158,11,0.45);
}

/* Tile numbers: bigger, bolder, refined */
.tile__number {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.0;
  background: linear-gradient(180deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(15,23,42,0.04);
}
.tile__unit {
  font-size: 15px;
  font-weight: 600;
  color: #64748b;
  padding-bottom: 8px;
}
.tile__trend {
  font-size: 20px;
  font-weight: 900;
}

/* Sparkline: gradient fill from color → transparent (not flat alpha) */
.tile__spark {
  height: 52px;
  margin-top: 10px;
  position: relative;
}
.tile__spark svg polyline {
  filter: drop-shadow(0 1px 2px rgba(15,23,42,0.10));
}

/* Status lamp upgrade: concentric ripple + smoother gradients */
.lamp__dot {
  width: 26px;
  height: 26px;
  position: relative;
}
.lamp__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
}
.lamp--green .lamp__dot {
  background: radial-gradient(circle at 32% 32%, #6ee7b7 0%, #10b981 50%, #047857 100%);
  color: #10b981;
}
.lamp--green .lamp__dot::after {
  animation: lampRipple 2.2s ease-out infinite;
}
.lamp--amber .lamp__dot {
  background: radial-gradient(circle at 32% 32%, #fcd34d 0%, #f59e0b 50%, #b45309 100%);
  color: #f59e0b;
}
.lamp--red .lamp__dot {
  background: radial-gradient(circle at 32% 32%, #fca5a5 0%, #ef4444 50%, #991b1b 100%);
  color: #ef4444;
}
.lamp--red .lamp__dot::after {
  animation: lampRipple 1.2s ease-out infinite;
}
@keyframes lampRipple {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(2.0); opacity: 0;   }
}
.lamp__value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.018em;
  background: linear-gradient(180deg, #0f172a, #334155);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gauge polish */
.gauge__svg { width: 86%; max-width: 230px; }
.gauge__track { stroke: rgba(15,23,42,0.05); stroke-width: 12; }
.gauge__value {
  stroke-width: 12;
  stroke: #0ea5e9;
  filter: drop-shadow(0 2px 4px rgba(14,165,233,0.35));
}
.gauge__pct {
  font-size: 30px;
  font-weight: 800;
  background: linear-gradient(180deg, #0369a1, #0ea5e9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Meta strip: glass + brand glow */
.meta-strip {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(240,253,250,0.85) 0%, rgba(220,252,231,0.55) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(20,184,166,0.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 6px 20px -6px rgba(20,184,166,0.25);
  padding: 10px 16px;
}

/* Topbar lift */
.topbar {
  background: rgba(255,255,255,0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

/* Active alarms / count badges: pill with brand shimmer */
.nav-badge {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(220,38,38,0.55);
}

/* Buttons polish */
.btn--primary {
  background: linear-gradient(180deg, #0f766e 0%, #115e59 100%);
  box-shadow: 0 2px 6px -2px rgba(15,118,110,0.45);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(15,118,110,0.55);
}


/* ============================================================
   DARK_MODE_PALETTE_BLOCK -- toggleable dark theme with
   per-metric color + icon chips + compact sizing.
   Activated via <html data-theme="dark">. Light stays default.
   ============================================================ */

/* Per-metric CSS variables (apply in BOTH themes, color tweaked per theme) */
.widget[data-metric=status]   { --m-color: #22c55e; --m-icon: "\26A0"; }
.widget[data-metric=signal]   { --m-color: #38bdf8; --m-icon: "\1F4F6"; }
.widget[data-metric=counter]  { --m-color: #a78bfa; --m-icon: "\1F522"; }
.widget[data-metric=di]       { --m-color: #22d3ee; --m-icon: "\26A1"; }
.widget[data-metric=do]       { --m-color: #fbbf24; --m-icon: "\1F50C"; }
.widget[data-metric=voltage]  { --m-color: #fde047; --m-icon: "\26A1"; }
.widget[data-metric=current]  { --m-color: #fb923c; --m-icon: "\1F50B"; }
.widget[data-metric=power]    { --m-color: #f59e0b; --m-icon: "\1F4A1"; }
.widget[data-metric=temp]     { --m-color: #f87171; --m-icon: "\1F321"; }
.widget[data-metric=humidity] { --m-color: #67e8f9; --m-icon: "\1F4A7"; }
.widget[data-metric=pressure] { --m-color: #93c5fd; --m-icon: "\1F32A"; }
.widget[data-metric=analog]   { --m-color: #c4b5fd; --m-icon: "\1F4CA"; }
.widget[data-metric=flow]     { --m-color: #06b6d4; --m-icon: "\1F30A"; }
.widget[data-metric=generic]  { --m-color: #14b8a6; --m-icon: "\1F4CC"; }

/* Title icon chip (works in both themes) */
.widget__title { padding-left: 32px; min-height: 22px; position: relative; }
.widget__title::after {
  content: var(--m-icon);
  position: absolute;
  left: 8px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background: color-mix(in srgb, var(--m-color, #14b8a6) 18%, transparent);
  color: var(--m-color, #14b8a6);
}

/* Title accent stripe uses metric color */
.widget__title::before {
  background: linear-gradient(180deg, var(--m-color, #14b8a6), color-mix(in srgb, var(--m-color, #14b8a6) 60%, transparent)) !important;
  box-shadow: 0 0 8px -1px color-mix(in srgb, var(--m-color, #14b8a6) 50%, transparent) !important;
}

/* Compact tile sizing (overrides earlier premium tier 2) */
.widget {
  min-height: 122px;
  padding: 14px 16px 12px;
  border-radius: 14px;
}
.tile__number { font-size: 36px; }
.tile__spark { height: 38px; margin-top: 6px; }
.lamp__dot { width: 22px; height: 22px; }
.lamp__value { font-size: 20px; }

/* ----- DARK THEME ----- */
html[data-theme="dark"] {
  --ink: #e6edf7;
  --ink-soft: #cfe1ff;
  --ink-mute: #8a99b6;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.18);
  --panel: #0f1830;
}
html[data-theme="dark"] body .content,
html[data-theme="dark"] body .dash-page,
html[data-theme="dark"] body main.content {
  background:
    radial-gradient(1400px 700px at -5% -15%, rgba(34,211,238,0.10), transparent 55%),
    radial-gradient(1200px 600px at 105% 115%, rgba(167,139,250,0.10), transparent 60%),
    linear-gradient(135deg, #070b14 0%, #0a1228 100%);
  color: #e6edf7;
}
html[data-theme="dark"] .widget {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.35),
    0 12px 30px -12px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .widget:hover {
  border-color: color-mix(in srgb, var(--m-color, #14b8a6) 35%, transparent);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.35),
    0 16px 36px -14px rgba(0,0,0,0.65),
    0 0 0 1px color-mix(in srgb, var(--m-color, #14b8a6) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
html[data-theme="dark"] .widget__title { color: #cfe1ff; }
html[data-theme="dark"] .tile__number {
  background: linear-gradient(180deg, #e6edf7 0%, #cfe1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .tile__unit { color: #8a99b6; }
html[data-theme="dark"] .tile__ts { color: #5e6e8c; }
html[data-theme="dark"] .lamp__value {
  background: linear-gradient(180deg, #e6edf7, #cfe1ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .meta-strip {
  background: linear-gradient(180deg, rgba(15,23,42,0.65), rgba(15,23,42,0.45));
  border: 1px solid rgba(34,211,238,0.18);
  color: #cfe1ff;
}
html[data-theme="dark"] .gauge__track { stroke: rgba(255,255,255,0.07); }
html[data-theme="dark"] .topbar {
  background: rgba(15,23,42,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #070b14 0%, #0a1228 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.05);
}

/* Theme toggle button styling (works both themes) */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  margin-right: 10px;
  transition: background 120ms ease, transform 120ms ease;
}
.theme-toggle:hover { background: rgba(20,184,166,0.10); transform: scale(1.05); }
html[data-theme="dark"] .theme-toggle {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: #fde047;
}
html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.10); }


/* ============================================================
   DARK_MODE_POLISH_BLOCK -- fine-tune dim/low-contrast pieces
   that the first dark-mode patcher missed.
   Light theme untouched.
   ============================================================ */

/* ---- Range picker (top-of-dashboard time bar) ---- */
html[data-theme="dark"] .range-picker {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .range-picker__label { color: #cfe1ff; }
html[data-theme="dark"] .range-picker__source { color: #94a3b8; }
html[data-theme="dark"] .range-picker__chips {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
html[data-theme="dark"] .range-chip {
  color: #cbd5e1;
}
html[data-theme="dark"] .range-chip:hover {
  background: rgba(34,211,238,0.12);
  color: #67e8f9;
}
html[data-theme="dark"] .range-chip.active {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(2,132,199,0.5);
}

/* ---- Chart "1-MIN AGG" source badge ---- */
html[data-theme="dark"] .chart__source-badge {
  color: #94a3b8;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}

/* ---- Alarm-badge severity pills (was cream/pink bleed) ---- */
html[data-theme="dark"] .sev--critical {
  color: #fca5a5;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.30);
}
html[data-theme="dark"] .sev--major {
  color: #fbbf24;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.30);
}
html[data-theme="dark"] .sev--minor {
  color: #67e8f9;
  background: rgba(14,165,233,0.12);
  border: 1px solid rgba(14,165,233,0.30);
}
html[data-theme="dark"] .sev--warning {
  color: #fcd34d;
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.30);
}

/* ---- Generic pills used elsewhere ---- */
html[data-theme="dark"] .pill--red,
html[data-theme="dark"] .pill--crit {
  background: rgba(239,68,68,0.14);
  color: #fca5a5;
}
html[data-theme="dark"] .pill--amber,
html[data-theme="dark"] .pill--warn {
  background: rgba(245,158,11,0.14);
  color: #fbbf24;
}
html[data-theme="dark"] .pill--green,
html[data-theme="dark"] .pill--ok {
  background: rgba(34,197,94,0.14);
  color: #86efac;
}

/* ---- Data table rows (Reg1, Reg10, etc.) ---- */
html[data-theme="dark"] .data-table {
  color: #e6edf7;
}
html[data-theme="dark"] .data-table thead {
  background: rgba(255,255,255,0.04) !important;
}
html[data-theme="dark"] .data-table thead th {
  color: #cfe1ff !important;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
html[data-theme="dark"] .data-table tbody td {
  color: #cbd5e1;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .data-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}
html[data-theme="dark"] .data-table code,
html[data-theme="dark"] .data-table b {
  color: #67e8f9;
}

/* ---- Tile trend arrow ---- */
html[data-theme="dark"] .tile__trend { color: #8a99b6; }
html[data-theme="dark"] .tile__trend[data-trend="up"]   { color: #34d399; }
html[data-theme="dark"] .tile__trend[data-trend="down"] { color: #f87171; }
html[data-theme="dark"] .tile__trend[data-trend="flat"] { color: #67e8f9; }

/* ---- Topbar (title, hello, build-pill) ---- */
html[data-theme="dark"] .topbar__title { color: #e6edf7; }
html[data-theme="dark"] .hello { color: #cfe1ff; }
html[data-theme="dark"] .hello b { color: #fff; }
html[data-theme="dark"] .build-pill {
  background: rgba(255,255,255,0.06);
  color: #cfe1ff;
  border: 1px solid rgba(255,255,255,0.08);
}
html[data-theme="dark"] .build-pill i { color: #94a3b8; }

/* ---- Sidebar navlinks ---- */
html[data-theme="dark"] .sidebar .navlink {
  color: #cfe1ff;
}
html[data-theme="dark"] .sidebar .navlink:hover {
  background: rgba(255,255,255,0.06);
  color: #67e8f9;
}
html[data-theme="dark"] .sidebar .navlink.navlink--active,
html[data-theme="dark"] .sidebar .sidebar__link--active {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(13,148,136,0.55);
}
html[data-theme="dark"] .sidebar__brand {
  background: rgba(255,255,255,0.04) !important;
  color: #67e8f9;
}
html[data-theme="dark"] .sidebar-section,
html[data-theme="dark"] .sidebar__section,
html[data-theme="dark"] .sidebar__group-title {
  color: #64748b;
}

/* ---- Sparkline svg fill polish in dark ---- */
html[data-theme="dark"] .tile__spark svg polyline {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
}

/* ---- Cards / sections that use bare background:#fff ---- */
html[data-theme="dark"] .card {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  border: 1px solid rgba(255,255,255,0.06);
  color: #e6edf7;
}
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3 { color: #67e8f9; }
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card li,
html[data-theme="dark"] .card span { color: #cbd5e1; }

/* ---- Forms ---- */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(255,255,255,0.04);
  color: #e6edf7;
  border-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #64748b; }

/* ---- Inline labels (subtle text, small caps) ---- */
html[data-theme="dark"] label b,
html[data-theme="dark"] label strong { color: #cfe1ff; }

/* ---- Empty placeholders / stale markers (large "—") ---- */
html[data-theme="dark"] .tile__value:empty::before,
html[data-theme="dark"] .lamp__value:empty::before { color: #475569; }

/* ---- Lamp dot "stale" state ---- */
html[data-theme="dark"] .lamp--stale .lamp__dot {
  background: radial-gradient(circle at 35% 35%, #475569, #334155);
}

/* ---- Builder palette + grid (when in dark mode) ---- */
html[data-theme="dark"] .dbld-bar {
  background: rgba(15,23,42,0.65);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .dbld-bar strong { color: #67e8f9; }
html[data-theme="dark"] .dbld-palette {
  background: rgba(15,23,42,0.65);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .dbld-palette h3 { color: #67e8f9; }
html[data-theme="dark"] .dbld-pal-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
  color: #cfe1ff;
}
html[data-theme="dark"] .dbld-pal-item small { color: #94a3b8; }
html[data-theme="dark"] .grid-stack {
  background: repeating-linear-gradient(0deg,#0a1228,#0a1228 39px,rgba(255,255,255,0.04) 39px,rgba(255,255,255,0.04) 40px);
  border-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .grid-stack-item-content {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  border-color: rgba(255,255,255,0.10);
  color: #cbd5e1;
}
html[data-theme="dark"] .dbld-card-head {
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .dbld-card-title { color: #e6edf7; }
html[data-theme="dark"] .dbld-card-tag { color: #94a3b8; }
html[data-theme="dark"] .dbld-card-type { color: #67e8f9; }
html[data-theme="dark"] .dbld-modal {
  background: linear-gradient(180deg, #0f1830, #111c38);
  color: #e6edf7;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.7);
}
html[data-theme="dark"] .dbld-modal h2 { color: #67e8f9; }


/* ============================================================
   DARK_SIDEBAR_ICONS_BLOCK -- boost icon visibility in dark
   ============================================================ */

/* Brighter, thicker icon strokes in dark mode (both expanded + collapsed) */
html[data-theme="dark"] .sidebar .navlink svg,
html[data-theme="dark"] .sidebar .sb-toggle svg {
  stroke: #a5f3fc;
  stroke-width: 2.1;
  opacity: 0.95;
}
html[data-theme="dark"] .sidebar .navlink:hover svg {
  stroke: #ecfeff;
  opacity: 1;
}
html[data-theme="dark"] .sidebar .navlink.navlink--active svg,
html[data-theme="dark"] .sidebar .sidebar__link--active svg {
  stroke: #ffffff;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(34,211,238,0.5));
}

/* In collapsed mode the icon IS the entire link target -- give it a
   subtle background ring on hover for better affordance */
html[data-theme="dark"] .sidebar--collapsed .navlink {
  border-radius: 8px;
}
html[data-theme="dark"] .sidebar--collapsed .navlink:hover {
  background: rgba(34,211,238,0.10);
}
html[data-theme="dark"] .sidebar--collapsed .navlink.navlink--active,
html[data-theme="dark"] .sidebar--collapsed .sidebar__link--active {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10),
              0 4px 12px -4px rgba(13,148,136,0.65);
}

/* Sidebar toggle (chevron) — make the arrow clearly visible */
html[data-theme="dark"] .sb-toggle {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: #a5f3fc;
}
html[data-theme="dark"] .sb-toggle:hover {
  background: rgba(34,211,238,0.15);
  color: #ecfeff;
}

/* Light mode parity tweak: don't change anything (no override) */


/* ============================================================
   DARK_SIDEBAR_ICONS_V2_BLOCK -- icons use currentColor; set
   the LINK color, not the svg stroke. Bumps opacity too.
   ============================================================ */

html[data-theme="dark"] .sidebar .navlink {
  color: #a5f3fc;
}
html[data-theme="dark"] .sidebar .navlink .navlink__label {
  color: #cfe1ff;
}
html[data-theme="dark"] .sidebar .navlink .navlink__icon {
  opacity: 1;
  color: #67e8f9;
}
html[data-theme="dark"] .sidebar .navlink:hover {
  color: #ecfeff;
  background: rgba(34,211,238,0.10);
}
html[data-theme="dark"] .sidebar .navlink:hover .navlink__icon {
  color: #ecfeff;
}
html[data-theme="dark"] .sidebar .navlink.navlink--active,
html[data-theme="dark"] .sidebar .sidebar__link--active {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px -4px rgba(13,148,136,0.55);
}
html[data-theme="dark"] .sidebar .navlink.navlink--active .navlink__icon,
html[data-theme="dark"] .sidebar .sidebar__link--active .navlink__icon {
  color: #ffffff;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
}

/* Section headers (FRONTEND / BACKEND / INFRA labels) */
html[data-theme="dark"] .sidebar .sidebar__section,
html[data-theme="dark"] .sidebar .sidebar-section,
html[data-theme="dark"] .sidebar .sidebar__group-title,
html[data-theme="dark"] .sidebar h4,
html[data-theme="dark"] .sidebar h5 {
  color: #64748b !important;
}

/* Collapsed-rail specific */
html[data-theme="dark"] .sidebar--collapsed .navlink {
  justify-content: center;
}
html[data-theme="dark"] .sidebar--collapsed .navlink .navlink__icon {
  width: 20px;
  height: 20px;
}

/* Brand mark + sb-toggle chevron */
html[data-theme="dark"] .sidebar__brand,
html[data-theme="dark"] .brand__mark {
  color: #67e8f9;
}
html[data-theme="dark"] .sb-toggle {
  color: #a5f3fc;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
html[data-theme="dark"] .sb-toggle:hover {
  color: #ecfeff;
  background: rgba(34,211,238,0.18);
}

/* Footer (admin / change pw / sign out) */
html[data-theme="dark"] .sidebar__footer { color: #cbd5e1; }
html[data-theme="dark"] .sidebar__footer a { color: #a5f3fc; }
html[data-theme="dark"] .sidebar__footer a:hover { color: #ecfeff; }


/* ============================================================
   APP_SHELL_COLLAPSED_GRID_BLOCK -- when sidebar collapses,
   shrink the parent grid track so content reclaims the space.
   Uses :has() (Chrome/Safari/Firefox 121+).
   ============================================================ */
.app-shell:has(.sidebar.sidebar--collapsed) {
  grid-template-columns: 64px 1fr;
}


/* ============================================================
   SIDEBAR_GROUPS_CSS_BLOCK -- collapsible <details>/<summary>
   navigation groups
   ============================================================ */

.navgroup { margin: 2px 0; }
.navgroup > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.navgroup > summary::-webkit-details-marker { display: none; }

.navgroup__head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--sidebar-ink, #cfe1ff);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 120ms ease, color 120ms ease;
}
.navgroup__head:hover { background: rgba(20,184,166,0.10); color: var(--brand, #0d9488); }
.navgroup__head .navlink__label { flex: 1; }

.navgroup__chev {
  transition: transform 180ms ease;
  opacity: 0.55;
  flex-shrink: 0;
}
.navgroup[open] > summary .navgroup__chev { transform: rotate(90deg); opacity: 0.9; }

.navgroup__items {
  display: flex; flex-direction: column; gap: 1px;
  padding-left: 8px;
  margin-top: 2px;
  margin-bottom: 6px;
  border-left: 1px dashed rgba(15,23,42,0.08);
  margin-left: 18px;
}

.navgroup__items .navlink--sub {
  padding: 6px 10px 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
}
.navgroup__items .navlink--sub .navlink__icon {
  width: 15px; height: 15px;
  opacity: 0.75;
}

/* When sidebar is collapsed: hide group heads, force-show items as icons */
.sidebar--collapsed .navgroup > summary { display: none; }
.sidebar--collapsed .navgroup > .navgroup__items {
  display: flex !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.sidebar--collapsed .navgroup__items .navlink--sub {
  padding: 10px 0;
  justify-content: center;
  font-size: 0;             /* hides labels at the icon-rail level too */
}
.sidebar--collapsed .navgroup__items .navlink--sub .navlink__icon {
  width: 18px; height: 18px;
}
.sidebar--collapsed .navlink--footer { margin-top: auto; }

/* Dark-mode tweaks */
html[data-theme="dark"] .navgroup__head { color: #a5f3fc; }
html[data-theme="dark"] .navgroup__head:hover {
  background: rgba(34,211,238,0.10);
  color: #ecfeff;
}
html[data-theme="dark"] .navgroup__items {
  border-left-color: rgba(255,255,255,0.08);
}
html[data-theme="dark"] .navgroup__items .navlink--sub { color: #cbd5e1; }
html[data-theme="dark"] .navgroup__items .navlink--sub:hover { color: #ecfeff; }
html[data-theme="dark"] .navgroup__items .navlink--sub.navlink--active {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
}


/* ============================================================
   SIDEBAR_SPACING_BLOCK -- breathable rail
   ============================================================ */

/* Pinned top-level links: more vertical space, bigger icons */
.sidebar .navlink {
  padding: 10px 14px 10px 16px;
  font-size: 13px;
  gap: 12px;
  margin: 1px 6px;
  border-radius: 6px;
  /* override the original heavy left-border accent for non-active items */
  border-left: 0;
}
.sidebar .navlink--active {
  border-left: 0;
  background: linear-gradient(135deg, var(--brand, #0d9488) 0%, #0f766e 100%);
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(13,148,136,0.45);
}
.sidebar .navlink__icon {
  width: 20px;
  height: 20px;
}

/* Group rows */
.sidebar .navgroup {
  margin: 4px 0;
}
.sidebar .navgroup__head {
  padding: 10px 14px 10px 16px;
  gap: 12px;
  margin: 1px 6px;
}
.sidebar .navgroup__head .navlink__icon {
  width: 20px;
  height: 20px;
}

/* Sub-items inside groups: slightly smaller than parents but still legible */
.sidebar .navgroup__items {
  margin-top: 4px;
  margin-bottom: 8px;
  padding-left: 6px;
  margin-left: 22px;
  gap: 2px;
}
.sidebar .navgroup__items .navlink--sub {
  padding: 7px 10px 7px 12px;
  font-size: 12.5px;
  gap: 10px;
  margin: 0;
}
.sidebar .navgroup__items .navlink--sub .navlink__icon {
  width: 17px;
  height: 17px;
}

/* Footer-pinned (Django admin) */
.sidebar .navlink--footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 10px;
}

/* Collapsed rail keeps its own compact spacing (don't let the new
   margins push icons off-center) */
.sidebar--collapsed .navlink,
.sidebar--collapsed .navgroup__items .navlink--sub {
  margin: 2px 8px;
  padding: 10px 0;
}
.sidebar--collapsed .navlink__icon,
.sidebar--collapsed .navgroup__items .navlink--sub .navlink__icon {
  width: 22px;
  height: 22px;
}


/* ============================================================
   DARK_MODE_SWEEPER_BLOCK -- catch-all dark-mode overrides for
   inline-styled elements across the whole platform.
   ============================================================ */

/* ---------- WHITE / NEAR-WHITE BACKGROUNDS ---------- */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFFFFF"],
html[data-theme="dark"] [style*="background: #FFFFFF"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"] {
  background: #0f1830 !important;
  color: #e6edf7;
}

/* ---------- SLATE-50 / SLATE-100 ---------- */
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#fafbfc"],
html[data-theme="dark"] [style*="background: #fafbfc"] {
  background: rgba(255,255,255,0.04) !important;
  color: #e6edf7;
}

/* ---------- SLATE-200 (heavier elevation) ---------- */
html[data-theme="dark"] [style*="background:#e2e8f0"],
html[data-theme="dark"] [style*="background: #e2e8f0"] {
  background: rgba(255,255,255,0.08) !important;
}

/* ---------- STATUS-COLOR PASTELS (soft) ---------- */
/* GREEN tints */
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"],
html[data-theme="dark"] [style*="background:#d1fae5"],
html[data-theme="dark"] [style*="background: #d1fae5"],
html[data-theme="dark"] [style*="background:#f0fdfa"],
html[data-theme="dark"] [style*="background: #f0fdfa"],
html[data-theme="dark"] [style*="background:#ccfbf1"],
html[data-theme="dark"] [style*="background: #ccfbf1"] {
  background: rgba(34,197,94,0.12) !important;
  color: #86efac !important;
}

/* RED tints */
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2"],
html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background: #fef2f2"],
html[data-theme="dark"] [style*="background:#fbe1e2"],
html[data-theme="dark"] [style*="background: #fbe1e2"],
html[data-theme="dark"] [style*="background:#fce7f3"],
html[data-theme="dark"] [style*="background: #fce7f3"] {
  background: rgba(239,68,68,0.12) !important;
  color: #fca5a5 !important;
}

/* AMBER tints */
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background: #fef3c7"],
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background: #fffbeb"],
html[data-theme="dark"] [style*="background:#faedc6"],
html[data-theme="dark"] [style*="background: #faedc6"] {
  background: rgba(245,158,11,0.12) !important;
  color: #fbbf24 !important;
}

/* BLUE tints */
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background: #dbeafe"],
html[data-theme="dark"] [style*="background:#bfdbfe"],
html[data-theme="dark"] [style*="background: #bfdbfe"] {
  background: rgba(14,165,233,0.12) !important;
  color: #93c5fd !important;
}

/* PURPLE / PINK accents */
html[data-theme="dark"] [style*="background:#fce7f3"],
html[data-theme="dark"] [style*="background: #fce7f3"] {
  background: rgba(217,70,239,0.12) !important;
  color: #f0abfc !important;
}

/* ---------- DARK TEXT ON ASSUMED-LIGHT BG → LIGHT TEXT ---------- */
html[data-theme="dark"] [style*="color:#0f172a"],
html[data-theme="dark"] [style*="color: #0f172a"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #374151"] {
  color: #e6edf7 !important;
}

/* MID-SLATE → SOFT SLATE */
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"],
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#7a8086"],
html[data-theme="dark"] [style*="color: #7a8086"] {
  color: #cbd5e1 !important;
}

/* LIGHT-SLATE → MUTED */
html[data-theme="dark"] [style*="color:#94a3b8"],
html[data-theme="dark"] [style*="color: #94a3b8"],
html[data-theme="dark"] [style*="color:#cbd5e1"],
html[data-theme="dark"] [style*="color: #cbd5e1"],
html[data-theme="dark"] [style*="color:#e2e8f0"],
html[data-theme="dark"] [style*="color: #e2e8f0"] {
  color: #94a3b8 !important;
}

/* ---------- BRAND TEAL → BRIGHTER CYAN (dark needs more contrast) ---------- */
html[data-theme="dark"] [style*="color:#0f766e"],
html[data-theme="dark"] [style*="color: #0f766e"],
html[data-theme="dark"] [style*="color:#0d9488"],
html[data-theme="dark"] [style*="color: #0d9488"],
html[data-theme="dark"] [style*="color:#0a7c3e"],
html[data-theme="dark"] [style*="color: #0a7c3e"] {
  color: #67e8f9 !important;
}

/* Status text colors stay vivid */
html[data-theme="dark"] [style*="color:#166534"],
html[data-theme="dark"] [style*="color: #166534"],
html[data-theme="dark"] [style*="color:#15803d"],
html[data-theme="dark"] [style*="color: #15803d"] {
  color: #86efac !important;
}
html[data-theme="dark"] [style*="color:#991b1b"],
html[data-theme="dark"] [style*="color: #991b1b"],
html[data-theme="dark"] [style*="color:#b91c1c"],
html[data-theme="dark"] [style*="color: #b91c1c"],
html[data-theme="dark"] [style*="color:#dc2626"],
html[data-theme="dark"] [style*="color: #dc2626"] {
  color: #fca5a5 !important;
}
html[data-theme="dark"] [style*="color:#854d0e"],
html[data-theme="dark"] [style*="color: #854d0e"],
html[data-theme="dark"] [style*="color:#92400e"],
html[data-theme="dark"] [style*="color: #92400e"],
html[data-theme="dark"] [style*="color:#78350f"],
html[data-theme="dark"] [style*="color: #78350f"],
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color: #b45309"] {
  color: #fbbf24 !important;
}
html[data-theme="dark"] [style*="color:#1e40af"],
html[data-theme="dark"] [style*="color: #1e40af"] {
  color: #93c5fd !important;
}

/* ---------- LIGHT BORDERS → SUBTLE DARK ---------- */
html[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border-color:#e2e8f0"],
html[data-theme="dark"] [style*="border-color: #e2e8f0"],
html[data-theme="dark"] [style*="border-bottom:1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border-bottom: 1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border-top:1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border-top: 1px solid #e2e8f0"],
html[data-theme="dark"] [style*="border:1px solid #cbd5e1"],
html[data-theme="dark"] [style*="border: 1px solid #cbd5e1"],
html[data-theme="dark"] [style*="border-color:#cbd5e1"],
html[data-theme="dark"] [style*="border-color: #cbd5e1"] {
  border-color: rgba(255,255,255,0.10) !important;
}

/* ---------- GENERIC SECTIONS / CARDS / PANELS ---------- */
html[data-theme="dark"] section.card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .surface,
html[data-theme="dark"] .table-wrap {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  color: #e6edf7;
  border-color: rgba(255,255,255,0.08);
}

/* ---------- TABLES (non-inline) ---------- */
html[data-theme="dark"] table {
  color: #e6edf7;
}
html[data-theme="dark"] table thead {
  background: rgba(255,255,255,0.04);
}
html[data-theme="dark"] table thead th {
  color: #cfe1ff;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
html[data-theme="dark"] table tbody tr {
  border-bottom-color: rgba(255,255,255,0.06);
}
html[data-theme="dark"] table tbody td {
  color: #cbd5e1;
}
html[data-theme="dark"] table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

/* ---------- FORMS ---------- */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=url],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=datetime-local],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: rgba(255,255,255,0.04) !important;
  color: #e6edf7 !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: rgba(34,211,238,0.45) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,211,238,0.18);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #64748b !important;
}
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label {
  color: #cbd5e1;
}
html[data-theme="dark"] label b,
html[data-theme="dark"] label strong {
  color: #cfe1ff;
}

/* Disabled / readonly */
html[data-theme="dark"] input[disabled],
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] textarea[disabled],
html[data-theme="dark"] select[disabled] {
  background: rgba(255,255,255,0.02) !important;
  color: #64748b !important;
  cursor: not-allowed;
}

/* ---------- CODE / KBD / PRE ---------- */
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] pre,
html[data-theme="dark"] tt,
html[data-theme="dark"] samp {
  background: rgba(255,255,255,0.05) !important;
  color: #67e8f9 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] pre {
  padding: 10px;
  border-radius: 6px;
}

/* ---------- HR + DIVIDERS ---------- */
html[data-theme="dark"] hr {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}

/* ---------- BUTTONS (non-primary) ---------- */
html[data-theme="dark"] button:not(.btn--primary):not(.dbld-btn--primary):not(.dbld-btn--danger):not(.theme-toggle):not(.sb-toggle):not(.snip-btn) {
  background: rgba(255,255,255,0.05);
  color: #cfe1ff;
  border-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] button:not(.btn--primary):not(.dbld-btn--primary):not(.dbld-btn--danger):not(.theme-toggle):not(.sb-toggle):not(.snip-btn):hover {
  background: rgba(255,255,255,0.10);
  color: #ecfeff;
}
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn--ghost {
  background: rgba(255,255,255,0.05);
  color: #cfe1ff;
  border-color: rgba(255,255,255,0.10);
}

/* ---------- LINKS ---------- */
html[data-theme="dark"] a:not(.navlink):not(.btn):not(.btn--primary):not(.dbld-btn) {
  color: #67e8f9;
}
html[data-theme="dark"] a:not(.navlink):not(.btn):not(.btn--primary):not(.dbld-btn):hover {
  color: #a5f3fc;
}

/* ---------- HEADINGS ---------- */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
  color: #e6edf7;
}
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .page__title { color: #e6edf7; }

/* ---------- LISTS ---------- */
html[data-theme="dark"] ul, html[data-theme="dark"] ol {
  color: #cbd5e1;
}
html[data-theme="dark"] dl dt { color: #cfe1ff; }
html[data-theme="dark"] dl dd { color: #cbd5e1; }

/* ---------- BREADCRUMBS / SMALL TEXT ---------- */
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .crumbs,
html[data-theme="dark"] small,
html[data-theme="dark"] .small,
html[data-theme="dark"] .text-muted {
  color: #94a3b8;
}

/* ---------- PILLS / CHIPS (cover what main DARK_MODE_POLISH missed) ---------- */
html[data-theme="dark"] .pill,
html[data-theme="dark"] .chip {
  border-color: rgba(255,255,255,0.10);
}

/* ---------- STAT CARDS (the 2/2/2 Gateways/Online/Slaves Total cards) ---------- */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stats-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .kpi-card {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  border-color: rgba(255,255,255,0.08);
  color: #e6edf7;
}

/* ---------- MODAL / DIALOG (generic) ---------- */
html[data-theme="dark"] dialog,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal__content,
html[data-theme="dark"] [role="dialog"] {
  background: linear-gradient(180deg, #0f1830, #111c38);
  color: #e6edf7;
  border-color: rgba(255,255,255,0.10);
}

/* ---------- DROPDOWN / DATALIST results (browser-styled, limited) ---------- */
html[data-theme="dark"] option {
  background: #0f1830;
  color: #e6edf7;
}

/* ---------- DEVICE/GATEWAY/CLIENT CARDS (auto-detect by class) ---------- */
html[data-theme="dark"] .device-card,
html[data-theme="dark"] .gateway-card,
html[data-theme="dark"] .client-card,
html[data-theme="dark"] .master-card,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .row-card {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e6edf7;
}

/* ---------- MESSAGE BANNERS (info/success/error/warning) ---------- */
html[data-theme="dark"] .msg--info,
html[data-theme="dark"] .alert--info,
html[data-theme="dark"] .banner--info {
  background: rgba(14,165,233,0.12) !important;
  color: #93c5fd !important;
  border-color: rgba(14,165,233,0.30) !important;
}
html[data-theme="dark"] .msg--success,
html[data-theme="dark"] .alert--success,
html[data-theme="dark"] .banner--success {
  background: rgba(34,197,94,0.12) !important;
  color: #86efac !important;
  border-color: rgba(34,197,94,0.30) !important;
}
html[data-theme="dark"] .msg--warning,
html[data-theme="dark"] .alert--warning,
html[data-theme="dark"] .banner--warning {
  background: rgba(245,158,11,0.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,0.30) !important;
}
html[data-theme="dark"] .msg--error,
html[data-theme="dark"] .alert--error,
html[data-theme="dark"] .banner--error,
html[data-theme="dark"] .msg--danger {
  background: rgba(239,68,68,0.12) !important;
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,0.30) !important;
}

/* ---------- TAB STRIPS ---------- */
html[data-theme="dark"] .tabs__tab,
html[data-theme="dark"] .tab-nav__item {
  color: #94a3b8;
  border-bottom-color: transparent;
}
html[data-theme="dark"] .tabs__tab:hover,
html[data-theme="dark"] .tab-nav__item:hover {
  color: #cfe1ff;
}
html[data-theme="dark"] .tabs__tab.is-active,
html[data-theme="dark"] .tab-nav__item.is-active,
html[data-theme="dark"] .tab-nav__item--active {
  color: #67e8f9;
  border-bottom-color: #0ea5e9;
}

/* ---------- FOOTER / NOTES / HINTS ---------- */
html[data-theme="dark"] .hint,
html[data-theme="dark"] .note,
html[data-theme="dark"] footer.note,
html[data-theme="dark"] .help-text {
  color: #94a3b8;
}

/* ---------- KEEP page body color sane wherever a stray .content is used ---------- */
html[data-theme="dark"] .content,
html[data-theme="dark"] .page,
html[data-theme="dark"] main.content {
  color: #e6edf7;
}


/* ============================================================
   DARK_AUTOBOX_BLOCK -- dark mode for the per-device AUTO-BOX
   dashboard (gw-dash strip, slave tabs, storage cards).
   ============================================================ */

/* Status strip ("ONLINE · Slaves · Last packet") */
html[data-theme="dark"] .gw-dash__strip {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  border-color: rgba(255,255,255,0.08);
  color: #e6edf7;
}
html[data-theme="dark"] .gw-dash__chip {
  background: rgba(255,255,255,0.06);
  color: #cfe1ff;
}
html[data-theme="dark"] .gw-dash__meta { color: #cbd5e1; }

/* Slave tabs ("LOCATION-1 | 2 | …") banner */
html[data-theme="dark"] .slave-tabs {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  border-bottom-color: rgba(255,255,255,0.12);
}
html[data-theme="dark"] .slave-tab { color: #94a3b8; }
html[data-theme="dark"] .slave-tab:hover {
  color: #ecfeff;
  background: rgba(34,211,238,0.08);
}
html[data-theme="dark"] .slave-tab--active {
  color: #67e8f9;
  border-bottom-color: #0ea5e9;
}
html[data-theme="dark"] .slave-panel__footer {
  border-top-color: rgba(255,255,255,0.10);
  color: #94a3b8;
}

/* Storage cards (the metric tiles) */
html[data-theme="dark"] .storage-card {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 1px rgba(0,0,0,0.35), 0 10px 26px -14px rgba(0,0,0,0.55);
}
html[data-theme="dark"] .storage-card:hover {
  box-shadow: 0 1px 1px rgba(0,0,0,0.35), 0 14px 30px -14px rgba(0,0,0,0.65);
  border-color: rgba(34,211,238,0.25);
}

/* Card BODY (was #fff) -> dark; the value text -> light */
html[data-theme="dark"] .storage-card__body {
  background: transparent;
}
html[data-theme="dark"] .storage-card__body .tile__value,
html[data-theme="dark"] .storage-card__body .tile__number {
  color: #e6edf7;
}
html[data-theme="dark"] .storage-card__body .tile__unit { color: #94a3b8; }
html[data-theme="dark"] .storage-card__body .tile__value--stale { color: #64748b; }
html[data-theme="dark"] .storage-card__body .tile__ts { color: #64748b; }

/* Card headers keep their vivid metric colors, but the GENERIC one used a
   muted saga-teal -- brighten its text a touch for dark */
html[data-theme="dark"] .storage-card__head { color: #ffffff; }

/* Empty-state panel */
html[data-theme="dark"] .empty-state {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  border-color: rgba(255,255,255,0.08);
  color: #cbd5e1;
}

/* Layout-picker select in the toolbar */
html[data-theme="dark"] .tile-grid + * select,
html[data-theme="dark"] .gw-dash select {
  background: rgba(255,255,255,0.05);
  color: #e6edf7;
  border-color: rgba(255,255,255,0.10);
}


/* CW_FIT_TO_PAGE_BLOCK -- scale a custom widget to fit the viewport (keeps aspect) */
html.cw-fit .custom-widget {
  min-height: 0 !important;
  max-width: min(100%, calc((100vh - 175px) * var(--cw-ar, 1.6)));
  margin-left: auto;
  margin-right: auto;
}
.cw-fit-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 1px solid #cbd5e1; background: #fff; color: #475569;
  border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cw-fit-toggle:hover { background: #f1f5f9; }
.cw-fit-toggle.is-on { background: #0d9488; color: #fff; border-color: #0d9488; }
html[data-theme="dark"] .cw-fit-toggle { background: rgba(255,255,255,.05); color: #cbd5e1; border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .cw-fit-toggle.is-on { background: #0d9488; color: #fff; }

/* ============================================================
   UI_TUNE_2026_06_05 — comprehensive look-and-feel polish.
   Light + dark, additive. Safe to remove block to revert.

   Fixes:
   1. Dark theme was only flipping 6 of ~14 neutral tokens
      (--panel-soft, --bg, --line-soft, etc. stayed light) so
      .rtable / .filter-bar / .card / .empty all rendered with
      light grey backgrounds on dark backgrounds. We flip the
      full neutral palette so every .rtable / hover state
      auto-corrects.
   2. .rtp-* (report picker) used hardcoded #fff / #0f172a
      instead of vars. We add a dark-mode override block
      targeting each .rtp-* class.
   3. Light-mode polish: softer card shadow, refined focus ring,
      subtler hover, snappier transitions.
   ============================================================ */

/* ---------- LIGHT-MODE refinements ---------- */
html:not([data-theme="dark"]) {
  --shadow-1: 0 1px 2px rgba(17, 32, 45, 0.04);
  --shadow-2: 0 2px 6px rgba(17, 32, 45, 0.06);
  --shadow-3: 0 6px 18px rgba(17, 32, 45, 0.08);
}

/* Universal: smoother focus rings + subtle elevation on hover for interactive panels */
button, input, select, textarea, .btn, a.btn { outline: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, a.btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
  border-color: var(--brand) !important;
}

/* Buttons: bump motion + a hair of squish on press, no other surprises */
.btn, button.btn, .rtp-btn {
  transition: background 110ms ease, border-color 110ms ease, color 110ms ease,
              box-shadow 140ms ease, transform 90ms ease;
}
.btn:active, button.btn:active, .rtp-btn:active { transform: translateY(1px); }

/* .rtable hover: slightly less saturated tint */
.rtable tbody tr:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }


/* ============================================================
   DARK theme — full neutral-palette flip
   ============================================================ */
html[data-theme="dark"] {
  --bg:           #070b14;
  --bg-deep:      #050811;
  --panel:        #0f1830;
  --panel-soft:   #111c38;
  --panel-deep:   #0a1228;
  --ink:          #e6edf7;
  --ink-soft:     #b6c4d8;
  --ink-mute:     #8a99b6;
  --line:         rgba(255,255,255,0.10);
  --line-soft:    rgba(255,255,255,0.06);
  --line-strong:  rgba(255,255,255,0.20);
  --brand-soft:   rgba(20,184,166,0.18);
  --brand-tint:   rgba(20,184,166,0.10);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 10px 30px rgba(0,0,0,0.55);
}

/* Dark mode: ensure body/page bg follows the new --bg token */
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] .page { color: var(--ink); }

/* Settings forms in the dark theme (docs/47): the card and the bar under it were fixed light, with the
   theme's light text on them */
html[data-theme="dark"] .settings-card { background: var(--panel); border-color: var(--line); }
html[data-theme="dark"] .settings-actions { background: linear-gradient(180deg, rgba(7,11,20,0) 0%, rgba(7,11,20,1) 35%); }
html[data-theme="dark"] .form-row__label { color: var(--ink); }
html[data-theme="dark"] .form-row__help { color: var(--ink-mute); }

/* .rtable in dark — header row gets the proper dark soft-panel */
html[data-theme="dark"] .rtable {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}
html[data-theme="dark"] .rtable th {
  background: rgba(255,255,255,0.04);
  color: #cfe1ff;
  border-bottom-color: var(--line);
  letter-spacing: 0.08em;
}
html[data-theme="dark"] .rtable td {
  color: var(--ink);
  border-bottom-color: var(--line-soft);
}
html[data-theme="dark"] .rtable td code {
  background: rgba(255,255,255,0.06);
  color: #67e8f9;
}
html[data-theme="dark"] .rtable tbody tr:hover {
  background: rgba(34,211,238,0.06);
}
html[data-theme="dark"] .rtable--zebra tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}
html[data-theme="dark"] .rtable__ts { color: var(--ink-mute); }

/* .filter-bar / .page-head etc. follow vars */
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .page-head {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .filter-bar select,
html[data-theme="dark"] .filter-bar input[type=text],
html[data-theme="dark"] .filter-bar input[type=search] {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border-color: var(--line);
}

/* Empty-state text */
html[data-theme="dark"] .empty { color: var(--ink-mute); }


/* ============================================================
   .rtp-* (telemetry report picker) — dark mode overrides.
   Picker template hardcoded #fff / #0f172a so we have to
   override each rule, not just flip tokens.
   ============================================================ */
html[data-theme="dark"] .rtp-wrap { color: var(--ink); }

html[data-theme="dark"] .rtp-toolbar {
  background: rgba(15,23,42,0.65);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html[data-theme="dark"] .rtp-field label {
  color: #cfe1ff;
}
html[data-theme="dark"] .rtp-field select,
html[data-theme="dark"] .rtp-field input[type=datetime-local] {
  background: rgba(255,255,255,0.05);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .rtp-field select:focus,
html[data-theme="dark"] .rtp-field input[type=datetime-local]:focus {
  border-color: #14b8a6;
  background: rgba(255,255,255,0.07);
}

html[data-theme="dark"] .rtp-tagbtn {
  background: rgba(255,255,255,0.05);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .rtp-tagbtn:hover {
  border-color: #14b8a6;
  color: #5eead4;
}
html[data-theme="dark"] .rtp-tagbtn .pill {
  background: #14b8a6;
  color: #fff;
}

html[data-theme="dark"] .rtp-btn--primary {
  background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(15,118,110,0.5);
}
html[data-theme="dark"] .rtp-btn--primary:hover {
  background: linear-gradient(180deg, #2dd4bf 0%, #14b8a6 100%);
}
html[data-theme="dark"] .rtp-btn--secondary {
  background: rgba(255,255,255,0.06);
  color: #cfe1ff;
  border-color: var(--line);
}
html[data-theme="dark"] .rtp-btn--secondary:hover {
  border-color: #14b8a6;
  color: #5eead4;
}

html[data-theme="dark"] .rtp-quicks {
  background: rgba(15,23,42,0.45);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .rtp-quicks .lbl { color: var(--ink-mute); }
html[data-theme="dark"] .rtp-quicks button {
  background: rgba(255,255,255,0.04);
  color: #cfe1ff;
  border-color: var(--line);
}
html[data-theme="dark"] .rtp-quicks button:hover {
  background: rgba(20,184,166,0.15);
  border-color: #14b8a6;
  color: #5eead4;
}

html[data-theme="dark"] .rtp-tagpop {
  background: linear-gradient(180deg, #0f1830 0%, #111c38 100%);
  border-color: var(--line);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .rtp-tagpop label { color: var(--ink); }
html[data-theme="dark"] .rtp-tagpop label:hover { color: #5eead4; }
html[data-theme="dark"] .rtp-tagpop .group-head { color: #cfe1ff; }
html[data-theme="dark"] .rtp-tagpop .top-actions { border-bottom-color: var(--line); }
html[data-theme="dark"] .rtp-tagpop .top-actions a { color: #5eead4; }
html[data-theme="dark"] .rtp-tagpop .top-actions .close { color: var(--ink-mute); }

html[data-theme="dark"] .rtp-empty { color: var(--ink-mute); }


/* ============================================================
   Topbar polish (both modes) — make the build-pill quieter
   and theme-toggle stand out a hair more.
   ============================================================ */
.topbar { transition: background 160ms ease, border-color 160ms ease; }
.theme-toggle { transition: background 120ms ease, transform 120ms ease, color 120ms ease; }
.theme-toggle:hover { transform: scale(1.08); }

html[data-theme="dark"] .theme-toggle { color: #fde047; }
html[data-theme="dark"] .theme-toggle:hover { color: #fef08a; background: rgba(253,224,71,0.10); }


/* ============================================================
   Card / tile hover lift — both modes
   ============================================================ */
.card, .tile-card, .widget {
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.card:hover, .tile-card:hover { box-shadow: var(--shadow-3); }


/* ============================================================
   Form refinement — both modes: tighter, less harsh borders
   ============================================================ */
input[type=text], input[type=number], input[type=search],
input[type=email], input[type=password],
input[type=date], input[type=datetime-local],
select, textarea {
  transition: background 110ms ease, border-color 110ms ease, box-shadow 110ms ease;
}
input[type=text]:hover, input[type=number]:hover, input[type=search]:hover,
input[type=email]:hover, input[type=password]:hover,
input[type=date]:hover, input[type=datetime-local]:hover,
select:hover, textarea:hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}

/* Scrollbar polish in dark mode — match the deep navy bg */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 6px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(20,184,166,0.4); }

/* Light mode scrollbar — also gets a touch of polish */
html:not([data-theme="dark"]) ::-webkit-scrollbar { width: 10px; height: 10px; }
html:not([data-theme="dark"]) ::-webkit-scrollbar-track { background: transparent; }
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}
html:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


/* ============================================================
 * D-A (docs/13, 2026-09-17): data age + phone overflow
 * ============================================================ */
.pill--age { font-weight: 500; margin-left: 6px; vertical-align: middle; }
/* docs/32: slave status icons beside the device name — what each slave last reported to the gateway */
.slv-strip { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: middle; }
.slv-strip:empty { display: none; }
.slv { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; line-height: 1.4;
       border-radius: 999px; padding: 2px 9px 2px 7px; white-space: nowrap; }
.slv i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.slv.is-ok { background: #dcfce7; color: #15803d; }
.slv.is-ok i { background: #16a34a; }
.slv.is-fail { background: #fee2e2; color: #b91c1c; }
.slv.is-fail i { background: #dc2626; animation: slv-pulse 1.6s ease-in-out infinite; }
@keyframes slv-pulse { 50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, .25); } }
.custom-widget { position: relative; }
.cw-stale {
  position: absolute; top: 6px; right: 8px; z-index: 5;
  background: #64748b; color: #fff; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.cw-is-stale .cw-mount { filter: grayscale(1); opacity: 0.75; }
@media (max-width: 720px) {
  /* D11: tables and pixel-exact panels scroll inside their card; the page itself never overflows */
  .rtable, .data-table, .vtl-table, .dtable, .sac-table { display: block; overflow-x: auto; max-width: 100%; }
  /* 2026-09-22 audit: the Users / Customers filter row and the page head kept their desktop row and
     pushed the Filter button past the right edge, which scrolled the whole page sideways */
  .filter-bar, .page-head { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
  .filter-bar select, .filter-bar input[type="text"] { min-width: 0; flex: 1 1 160px; }
  .build-stamp { display: none; }
  .custom-widget, .oltc-viewer-frame { max-width: 100%; overflow-x: auto; }
  /* the tag multi-select sizes itself to its longest label; pin it to the card width */
  .trend-controls .field--inline { flex: 1 1 100%; max-width: 100%; min-width: 0; }
  .trend-controls select[multiple] { width: 100%; max-width: 100%; min-width: 0; }
  /* the staff action bar on the device page: wrap instead of pushing off-screen */
  .device-detail__bar, .device-detail__actions, .device-detail__meta { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
  body { overflow-x: hidden; }
}

/* ============================================================
 * Device page modes (docs/13 §7): box panels + table
 * ============================================================ */
.dmode-switch { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin: 0 0 10px; background: var(--panel); }
.dmode-switch__lbl { font-size: 11px; color: var(--ink-mute); padding: 0 8px; font-weight: 600; }
.dmode-switch a, .dmode-switch button { border: 0; border-left: 1px solid var(--line-soft); background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 600; padding: 5px 12px; cursor: pointer; text-decoration: none; }
.dmode-switch a:hover, .dmode-switch button:hover { background: var(--line-soft); }
.dmode-switch .is-on { background: #0d9488; color: #fff; }
.dmode-hint { font-size: 11px; color: var(--ink-mute); margin-left: 8px; }
.dbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.dbox { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 14px 8px; box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.04)); }
.dbox__title { position: absolute; top: -9px; left: 12px; margin: 0; padding: 0 6px; background: var(--panel); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #1d4ed8; text-transform: none; }
.dbox__rows { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; column-gap: 10px; }
.dbox__row { display: contents; }
.dbox__label, .dbox__value { padding: 4px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; line-height: 1.35; }
.dbox__label { text-align: right; color: var(--ink-soft); }
.dbox__label::after { content: "\00a0:"; color: var(--ink-mute); }
.dbox__value { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.dbox__val { font-weight: 600; color: var(--ink); }
.dbox__unit { color: var(--ink-soft); font-size: 12px; }
.dbox__age { margin-left: auto; font-size: 10.5px; color: var(--ink-mute); white-space: nowrap; }
.dbox__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; align-self: center; }
.dbox__dot--ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.dbox__dot--bad { background: var(--gray); }
.dbox__row.is-stale .dbox__val { color: var(--gray); font-weight: 500; }
.dbox__row.trend-trigger { cursor: pointer; }
.dbox__row.trend-trigger:hover .dbox__label, .dbox__row.trend-trigger:hover .dbox__value { background: var(--line-soft); }
html[data-theme="dark"] .dbox { background: rgba(15,23,42,0.55); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .dbox__title { background: #0f1830; color: #93c5fd; }
html[data-theme="dark"] .dmode-switch { background: rgba(15,23,42,0.55); border-color: rgba(255,255,255,0.12); }
@media (max-width: 720px) { .dbox-grid { grid-template-columns: 1fr; } .dbox__rows { grid-template-columns: minmax(96px, 38%) 1fr; } }

/* Table mode — one neat table (owner 2026-09-17: "make it proper aligned, professional and neat") */
.dmode-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.04)); }
.dmode-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.dmode-col-var { width: 38%; } .dmode-col-val { width: 17%; } .dmode-col-unit { width: 13%; } .dmode-col-upd { width: 32%; }
.dmode-table--staff .dmode-col-var { width: 32%; } .dmode-table--staff .dmode-col-val { width: 14%; } .dmode-table--staff .dmode-col-unit { width: 10%; } .dmode-table--staff .dmode-col-upd { width: 22%; } .dmode-table--staff .dmode-col-src { width: 22%; }
.dmode-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--line-soft); }
.dmode-table td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmode-table tbody tr:last-child td { border-bottom: 0; }
.dmode-table tbody tr:nth-child(even) td { background: rgba(15,23,42,0.015); }
.dmode-table tbody tr.trend-trigger { cursor: pointer; }
.dmode-table tbody tr.trend-trigger:hover td { background: var(--line-soft); }
.dmode-table .dmode-var { font-weight: 600; color: var(--ink); }
.dmode-table .dmode-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); padding-right: 6px; }
.dmode-table th.dmode-num, .dmode-table th.dmode-unit { font-weight: 700; color: var(--ink-mute); }
.dmode-table .dmode-unit { color: var(--ink-soft); padding-left: 6px; }
.dmode-table .dmode-upd { color: var(--ink-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.dmode-table .dmode-src code { font-size: 11.5px; background: var(--line-soft); padding: 2px 6px; border-radius: 4px; color: var(--ink-soft); }
.dmode-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 7px; vertical-align: 1px; animation: pulse 2s ease-in-out infinite; }
.dmode-dot--off { background: var(--gray); animation: none; }
.dmode-table tr.is-stale .dmode-num, .dmode-table tr.is-stale .dmode-var { color: var(--gray); font-weight: 500; }
.dmode-table tr.is-stale .dmode-dot { background: var(--gray); animation: none; }
.dmode-table .dmode-section td { background: var(--line-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); padding: 6px 14px; }
.dmode-table .dmode-empty { color: var(--ink-mute); text-align: center; padding: 24px; white-space: normal; }
html[data-theme="dark"] .dmode-card { background: rgba(15,23,42,0.55); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .dmode-table th, html[data-theme="dark"] .dmode-table .dmode-section td { background: rgba(255,255,255,0.04); }
html[data-theme="dark"] .dmode-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
@media (max-width: 720px) {
  .dmode-card { overflow-x: auto; }
  .dmode-table { min-width: 520px; }
  .dmode-table--staff { min-width: 680px; }
  .dmode-table th, .dmode-table td { padding-left: 10px; padding-right: 10px; }
}

/* ============================================================
 * OLTC light dashboard (registry/graphical/oltc_light.html)
 * ============================================================ */
.ol { --ol-line: #e2e8f0; --ol-ink: #0f172a; --ol-soft: #475569; --ol-mute: #64748b; --ol-blue: #2563eb; --ol-green: #16a34a; --ol-amber: #d97706; --ol-red: #dc2626; color: var(--ol-ink); }
.ol-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--ol-line); border-radius: 12px; padding: 10px 16px; margin-bottom: 10px; }
.ol-head__l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ol-head__icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #2563eb, #0d9488); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.ol-head__title { font-size: 17px; font-weight: 800; letter-spacing: 0.01em; color: var(--ol-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-head__sub { font-size: 11.5px; color: var(--ol-mute); margin-top: 1px; }
.ol-head__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ol-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ol-soft); background: #f1f5f9; border: 1px solid var(--ol-line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.ol-chip b { color: var(--ol-ink); font-variant-numeric: tabular-nums; }
.ol-chip--live i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.ol-chip--live.is-on { background: #ecfdf5; border-color: #bbf7d0; color: #166534; }
.ol-chip--live.is-on i { background: var(--ol-green); box-shadow: 0 0 0 3px rgba(22,163,74,0.18); animation: pulse 2s ease-in-out infinite; }
.ol-chip--avr.is-on { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ol-switch { display: inline-flex; border: 1px solid var(--ol-line); border-radius: 8px; overflow: hidden; background: #f8fafc; }
.ol-switch a { font-size: 11.5px; font-weight: 700; color: var(--ol-soft); padding: 5px 11px; text-decoration: none; border-left: 1px solid var(--ol-line); }
.ol-switch a:first-child { border-left: 0; }
.ol-switch a.is-on { background: #0d9488; color: #fff; }
.ol-chip--link { text-decoration: none; color: #0d9488; border-color: #99f6e4; background: #f0fdfa; }
.ol-chip--link:hover { background: #ccfbf1; }
.ol-clock { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 700; color: var(--ol-ink); letter-spacing: 0.06em; background: #f8fafc; border: 1px solid var(--ol-line); border-radius: 8px; padding: 4px 10px; }
.ol-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 10px; }
.ol-lamp { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ol-line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.ol-lamp__dot { width: 14px; height: 14px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto; box-shadow: inset 0 1px 2px rgba(0,0,0,0.15); }
.ol-lamp__lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ol-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-lamp__val { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ol-mute); font-variant-numeric: tabular-nums; }
.ol-lamp.is-on[data-kind="status"] .ol-lamp__dot { background: var(--ol-green); box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.ol-lamp.is-on[data-kind="status"] .ol-lamp__val { color: var(--ol-green); }
.ol-lamp.is-on[data-kind="warn"] .ol-lamp__dot { background: var(--ol-amber); box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.ol-lamp.is-on[data-kind="warn"] .ol-lamp__val { color: var(--ol-amber); }
.ol-lamp.is-on[data-kind="alarm"] { border-color: #fecaca; background: #fef2f2; }
.ol-lamp.is-on[data-kind="alarm"] .ol-lamp__dot { background: var(--ol-red); box-shadow: 0 0 0 3px rgba(220,38,38,0.18); animation: pulse 1.4s ease-in-out infinite; }
.ol-lamp.is-on[data-kind="alarm"] .ol-lamp__lbl, .ol-lamp.is-on[data-kind="alarm"] .ol-lamp__val { color: var(--ol-red); }
.ol-lamp--inline { border: 0; background: transparent; padding: 4px 0; }
/* docs/50: the "rows" look is a list of strips, each item a bar of its own with rounded ends, tinted by its state
   while it is on (an alarm red, a warning amber, a status green, an information blue) */
.ol-lamp--row { gap: 9px; min-height: 34px; padding: 6px 14px 6px 11px; background: #f8fafc; border: 1px solid var(--ol-line); border-radius: 999px; transition: background 160ms ease, border-color 160ms ease; }
.ol-lamp--row .ol-lamp__dot { width: 12px; height: 12px; }
.ol-lamp--row .ol-lamp__lbl { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--ol-ink); }
.ol-lamp--row .ol-lamp__val { white-space: nowrap; }
.ol-lamp--row.is-on .ol-lamp__lbl { font-weight: 600; }
.ol-lamp--row.is-on[data-kind="status"] { background: #f0fdf4; border-color: #bbf7d0; }
.ol-lamp--row.is-on[data-kind="warn"] { background: #fffbeb; border-color: #fde68a; }
.ol-lamp--row.is-on[data-kind="info"] { background: #eff6ff; border-color: #bfdbfe; }
.ol-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-areas: "volt volt volt volt volt tap tap tap tap alarms alarms alarms" "set set set set set maint maint maint maint alarms alarms alarms"; gap: 10px; align-items: stretch; }
.ol-card { background: #fff; border: 1px solid var(--ol-line); border-radius: 12px; padding: 14px 16px; min-width: 0; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.ol-volt { grid-area: volt; } .ol-tap { grid-area: tap; } .ol-alarms { grid-area: alarms; } .ol-temp { grid-area: temp; } .ol-maint { grid-area: maint; } .ol-set { grid-area: set; }
.ol-card__h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ol-soft); }
.ol-card__hs { font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--ol-mute); }
.ol-h-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ol-h-dot--blue { background: var(--ol-blue); } .ol-h-dot--amber { background: var(--ol-amber); } .ol-h-dot--red { background: var(--ol-red); } .ol-h-dot--green { background: var(--ol-green); } .ol-h-dot--slate { background: #94a3b8; }
.ol-big { font-size: 44px; font-weight: 800; line-height: 1; color: var(--ol-blue); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ol-big--md { font-size: 34px; color: var(--ol-amber); margin: 4px 0 10px; }
.ol-big__unit { font-size: 16px; font-weight: 700; color: var(--ol-mute); margin-left: 6px; letter-spacing: 0; }
.ol-muted { font-size: 11px; color: var(--ol-mute); }
.ol-logic { font-size: 12px; color: var(--ol-soft); background: #f8fafc; border: 1px solid var(--ol-line); border-radius: 8px; padding: 8px 10px; margin-top: 10px; line-height: 1.45; }
.ol-logic b { color: var(--ol-ink); font-variant-numeric: tabular-nums; }
.ol-c-blue { color: var(--ol-blue) !important; } .ol-c-green { color: var(--ol-green) !important; } .ol-c-amber { color: var(--ol-amber) !important; } .ol-c-red { color: var(--ol-red) !important; }
.ol-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ol-stat__l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ol-mute); white-space: nowrap; }
.ol-stat__v { font-size: 22px; font-weight: 800; color: var(--ol-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ol-stat__v small { font-size: 12px; color: var(--ol-mute); font-weight: 600; }
.ol-volt__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.ol-volt__reach { display: flex; gap: 22px; padding-top: 6px; }
.ol-band-status { display: inline-block; margin: 8px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 999px; background: #f1f5f9; color: var(--ol-mute); }
.ol-band-status.is-green { background: #ecfdf5; color: #15803d; } .ol-band-status.is-amber { background: #fffbeb; color: #b45309; } .ol-band-status.is-red { background: #fef2f2; color: #b91c1c; }
.ol-band { position: relative; height: 14px; border-radius: 7px; background: #f1f5f9; margin: 26px 8px 4px; overflow: visible; }
.ol-band__seg { position: absolute; top: 0; height: 100%; }
.ol-band__seg--under, .ol-band__seg--over { background: #fca5a5; }
.ol-band__seg--lower, .ol-band__seg--raise { background: #fcd34d; }
.ol-band__seg--nom { background: #86efac; }
.ol-band__seg--under { border-radius: 7px 0 0 7px; } .ol-band__seg--over { border-radius: 0 7px 7px 0; }
.ol-band__needle { position: absolute; top: -8px; width: 3px; height: 30px; background: var(--ol-blue); transform: translateX(-50%); border-radius: 2px; box-shadow: 0 0 0 2px #fff; transition: left 400ms ease; }
.ol-band__needle span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: var(--ol-blue); white-space: nowrap; background: #fff; padding: 0 4px; border-radius: 4px; }
.ol-band__legend { display: flex; justify-content: space-between; gap: 6px; margin: 8px 4px 0; }
.ol-band__mark { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.ol-band__mark b { font-size: 11.5px; color: var(--ol-ink); font-weight: 700; margin-top: 1px; }
.ol-band__mark small { font-size: 9.5px; font-weight: 600; color: var(--ol-mute); letter-spacing: 0; }
.ol-volt__foot { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.ol-volt__hist { margin-left: auto; }
.ol-spark { width: 100%; height: 70px; display: block; margin-top: 4px; }
.ol-dial-wrap { position: relative; width: min(100%, 300px); margin: 0 auto; aspect-ratio: 1 / 1; }
.ol-dial { width: 100%; height: 100%; display: block; }
.ol-dial__ring { fill: #f8fafc; stroke: var(--ol-line); stroke-width: 2; }
.ol-dial__arc { fill: none; stroke: #fde68a; stroke-width: 10; stroke-linecap: round; }
.ol-dial__tick { stroke: #94a3b8; stroke-width: 2.5; stroke-linecap: round; }
.ol-dial__tick.is-on { stroke: var(--ol-amber); stroke-width: 5; }
.ol-dial__lblt { font-size: 11px; font-weight: 700; fill: var(--ol-soft); font-family: inherit; }
.ol-dial__needle { stroke: var(--ol-amber); stroke-width: 5; stroke-linecap: round; transition: transform 500ms ease; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.ol-dial__hub { fill: #fff; stroke: var(--ol-amber); stroke-width: 4; }
.ol-dial__center { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.ol-dial__lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: var(--ol-mute); }
.ol-dial__num { font-size: 34px; font-weight: 900; color: var(--ol-amber); line-height: 1; font-variant-numeric: tabular-nums; }
.ol-tap__stats { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.ol-tap__foot { display: flex; gap: 18px; margin-top: 6px; }
.ol-alarm-count { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; padding: 2px 8px; border-radius: 999px; background: #ecfdf5; color: #15803d; }
.ol-alarm-count.is-on { background: #fef2f2; color: #b91c1c; }
.ol-alarm-list { display: flex; flex-direction: column; }
.ol-gauge { position: relative; height: 14px; border-radius: 7px; background: #f1f5f9; overflow: visible; margin: 4px 0 4px; }
.ol-gauge--thin { height: 10px; }
.ol-gauge__fill { height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, #fbbf24, #f97316); transition: width 500ms ease; }
.ol-gauge__fill--green { background: linear-gradient(90deg, #4ade80, #16a34a); }
.ol-gauge__fill.is-alarm { background: linear-gradient(90deg, #f97316, #dc2626); }
.ol-gauge__alarm { position: absolute; top: -4px; width: 2px; height: 22px; background: var(--ol-red); }
.ol-gauge__scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--ol-mute); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.ol-maint__row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ol-set__grid { display: grid; grid-template-columns: 1fr; }
.ol-set__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--ol-line); font-size: 12.5px; color: var(--ol-soft); }
.ol-set__row b { color: var(--ol-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-stale { margin-top: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; }
.ol.is-stale .ol-big, .ol.is-stale .ol-stat__v, .ol.is-stale .ol-dial__num { color: #94a3b8 !important; }
[data-role].is-stale { color: #94a3b8; }
@media (max-width: 1180px) {
  .ol-grid { grid-template-columns: repeat(6, 1fr); grid-template-areas: "volt volt volt volt volt volt" "tap tap tap alarms alarms alarms" "set set set set maint maint"; }
  .ol-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .ol-grid { grid-template-columns: 1fr; grid-template-areas: "volt" "tap" "alarms" "set" "maint"; }
  .ol-strip { grid-template-columns: repeat(2, 1fr); }
  .ol-volt__top { flex-direction: column; }
  .ol-set__grid { grid-template-columns: 1fr; }
  .ol-head__title { white-space: normal; }
  .ol-big { font-size: 36px; }
  .ol-band__legend { flex-wrap: wrap; }
  .ol-band__mark { flex: 1 1 30%; }
}
html[data-theme="dark"] .ol-head, html[data-theme="dark"] .ol-card, html[data-theme="dark"] .ol-lamp { background: #fff; }
html[data-theme="dark"] .ol-lamp--row { background: #f8fafc; }

/* OLTC controls + v3 layout (chamber temp in the strip, settings editable, no temp card) */
.ol-strip { grid-template-columns: repeat(8, 1fr); }
.ol-grid { grid-template-areas: "volt volt volt volt volt tap tap tap tap alarms alarms alarms" "set set set set set maint maint maint maint alarms alarms alarms"; }
.ol-tap__body { display: flex; align-items: center; gap: 14px; }
.ol-tap__body .ol-dial-wrap { flex: 1 1 0; min-width: 0; width: auto; max-width: 260px; }
.ol-ctl { display: flex; flex-direction: column; gap: 8px; flex: 0 0 118px; }
.ol-ctl--row { flex-direction: row; flex-wrap: wrap; flex: none; margin-top: 10px; }
.ol-btn { font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.03em; border: 1px solid var(--ol-line); border-radius: 10px; background: #fff; color: var(--ol-ink); padding: 9px 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform 80ms ease, box-shadow 120ms ease; }
.ol-btn:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(15,23,42,0.12); transform: translateY(-1px); }
.ol-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ol-btn--raise { background: #ecfdf5; border-color: #86efac; color: #15803d; font-size: 14px; padding: 12px 10px; }
.ol-btn--lower { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; font-size: 14px; padding: 12px 10px; }
.ol-btn--avr { background: #fff7ed; border-color: #fdba74; color: #c2410c; }
.ol-btn--avr.is-on { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.ol-btn--reset { background: #f8fafc; color: var(--ol-soft); }
.ol-btn--apply { padding: 5px 10px; font-size: 11px; background: #0d9488; border-color: #0d9488; color: #fff; }
.ol-cmd { margin-top: 10px; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 7px 10px; background: #f8fafc; border: 1px solid var(--ol-line); color: var(--ol-soft); }
.ol-cmd.is-busy { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ol-cmd.is-ok { background: #ecfdf5; border-color: #bbf7d0; color: #15803d; }
.ol-cmd.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ol-cmd.is-err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ol-tap__stats { align-items: flex-end; }
.ol-tap__stats .ol-lamp--inline { padding: 0 0 3px; }
.ol-set__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 12px; padding: 5px 0; }
.ol-set__cur { min-width: 64px; text-align: right; }
.ol-set__edit { display: inline-flex; align-items: center; gap: 6px; }
.ol-set__in { width: 84px; font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--ol-line); border-radius: 8px; background: #fff; color: var(--ol-ink); font-variant-numeric: tabular-nums; }
.ol-set__in:focus { outline: 2px solid #99f6e4; border-color: #0d9488; }
.ol--view-only .ol-set__edit, .ol--view-only .ol-ctl { display: none; }
.ol--view-only .ol-tap__body .ol-dial-wrap { max-width: 300px; margin: 0 auto; }
@media (max-width: 1180px) {
  .ol-grid { grid-template-areas: "volt volt volt volt volt volt" "tap tap tap alarms alarms alarms" "set set set set maint maint"; }
  .ol-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .ol-grid { grid-template-areas: "volt" "tap" "alarms" "set" "maint"; }
  .ol-strip { grid-template-columns: repeat(2, 1fr); }
  .ol-tap__body { flex-direction: column; }
  .ol-ctl { flex-direction: row; flex-wrap: wrap; flex: none; width: 100%; }
  .ol-ctl .ol-btn { flex: 1 1 45%; }
  .ol-set__row { grid-template-columns: 1fr auto; }
  .ol-set__edit { grid-column: 1 / -1; justify-content: flex-end; }
}

/* OLTC strip + tap stats: fit eight chips at 1366 px, two-row stats */
.ol-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ol-strip .ol-lamp { gap: 7px; padding: 9px 9px; }
.ol-strip .ol-lamp__dot { width: 12px; height: 12px; }
.ol-strip .ol-lamp__lbl { font-size: 10.5px; letter-spacing: 0.02em; }
.ol-strip .ol-lamp__val { font-size: 11px; white-space: nowrap; }
.ol-tap__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin-top: 8px; align-items: end; }
.ol-tap__stats .ol-lamp--inline { grid-column: auto; padding: 0; }
.ol-tap__stats .ol-lamp--inline .ol-lamp__lbl { font-size: 10.5px; }
@media (max-width: 1400px) and (min-width: 721px) {
  .ol-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ol-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ol-tap__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* OLTC v4 flow (owner: "some free space in between, better aligned"):
   row 1 = PT voltage | tap selector | alarms  — alarms sets the height, the chart and the dial fill it
   row 2 = settings (two columns)   | maintenance — both about one card tall */
.ol-grid { grid-template-areas: "volt volt volt volt volt tap tap tap tap alarms alarms alarms" "set set set set set set set set set maint maint maint"; }
.ol-card { display: flex; flex-direction: column; }
.ol-volt .ol-spark { flex: 1 1 60px; min-height: 60px; height: auto; }
.ol-tap__body { flex: 1 1 auto; justify-content: center; }
.ol-tap__body .ol-dial-wrap { max-width: 300px; }
.ol-alarm-list { flex: 1 1 auto; justify-content: space-between; }
.ol-set__grid { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.ol-maint > *:not(.ol-card__h) { }
.ol-maint { justify-content: center; }
.ol-maint .ol-card__h { margin-bottom: auto; }
.ol-maint .ol-ctl--row { margin-bottom: auto; }
@media (min-width: 1241px) { .ol-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  .ol-grid { grid-template-areas: "volt volt volt volt volt volt" "tap tap tap alarms alarms alarms" "set set set set maint maint"; }
  .ol-set__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ol-grid { grid-template-areas: "volt" "tap" "alarms" "set" "maint"; }
}

/* OLTC v5 flow: three equal columns in row 1 (alarms as two columns of six), settings + maintenance in row 2 */
.ol-grid { grid-template-areas: "volt volt volt volt tap tap tap tap alarms alarms alarms alarms" "set set set set set set set set maint maint maint maint"; }
.ol-alarm-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-content: space-between; }
.ol-alarm-list .ol-lamp--row { padding: 7px 2px; }
.ol-alarm-list .ol-lamp--row .ol-lamp__lbl { font-size: 12.5px; }
.ol-alarm-list .ol-lamp--row:nth-last-child(2) { border-bottom: 0; }
.ol-band__mark span { font-size: 9.5px; }
.ol-band__mark small { font-size: 9px; }
.ol-band__legend { gap: 4px; margin-left: 2px; margin-right: 2px; }
.ol-volt__top { margin-bottom: 8px; }
.ol-band { margin-top: 24px; }
@media (max-width: 1180px) {
  .ol-grid { grid-template-areas: "volt volt volt volt volt volt" "tap tap tap alarms alarms alarms" "set set set set maint maint"; }
}
@media (max-width: 720px) {
  .ol-grid { grid-template-areas: "volt" "tap" "alarms" "set" "maint"; }
  .ol-alarm-list { grid-template-columns: 1fr; }
  .ol-alarm-list .ol-lamp--row:nth-last-child(2) { border-bottom: 1px dashed var(--ol-line); }
}
.ol-volt__foot .ol-lamp--inline { flex: 0 0 auto; }
.ol-volt__foot .ol-lamp--inline .ol-lamp__lbl { overflow: visible; }
.ol-volt__hist { white-space: nowrap; }
@media (max-width: 720px) {
  .ol-volt__foot { flex-wrap: wrap; gap: 6px 18px; }
  .ol-volt__hist { flex-basis: 100%; margin-left: 0; text-align: right; white-space: normal; }
}

/* Device controls (registry/device_controls.py) — shared button/status styles + the Box view panel */
.ctl-btn { font: inherit; }
.ol-btn--plain { background: #f8fafc; color: var(--ol-soft, #475569); }
.ctl-status { margin-top: 10px; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 7px 10px; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; }
.ctl-status.is-busy { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ctl-status.is-ok { background: #ecfdf5; border-color: #bbf7d0; color: #15803d; }
.ctl-status.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ctl-status.is-err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ctl-toggle-txt { font-style: normal; opacity: 0.85; }
.dbox--controls { margin-top: 14px; --ol-line: #e2e8f0; --ol-ink: #0f172a; --ol-soft: #475569; --ol-mute: #64748b; }
.dbox--controls .ctl-group { padding: 8px 0 4px; border-bottom: 1px dashed var(--line-soft); }
.dbox--controls .ctl-group:last-of-type { border-bottom: 0; }
.dbox--controls .ctl-group__h { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.dbox--controls .ctl-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.dbox--controls .ol-btn { padding: 8px 12px; font-size: 12px; }
.ctl-set { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ctl-set__lbl { font-size: 12px; color: var(--ink-soft); }
.ctl-set__cur { font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ctl-in { width: 84px; font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-variant-numeric: tabular-nums; }
.ctl-in:focus { outline: 2px solid #99f6e4; border-color: #0d9488; }
.ol-btn--sm { padding: 5px 10px; font-size: 11px; }
.ctl-btn.is-on.ol-btn--plain { background: #ecfdf5; border-color: #86efac; color: #15803d; }
.ol-btn--primary { background: #f0fdfa; border-color: #99f6e4; color: #0f766e; }

/* Device controls — corner indicator (no command text on customer pages) */
.ctl-toast { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; max-width: min(420px, calc(100vw - 36px)); padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 6px 24px rgba(15,23,42,0.14); font-size: 12.5px; font-weight: 600; color: #334155; }
.ctl-toast[hidden] { display: none; }
.ctl-toast i { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; flex: 0 0 auto; }
.ctl-toast.is-busy i { background: #2563eb; animation: pulse 1.2s ease-in-out infinite; }
.ctl-toast.is-ok { border-color: #bbf7d0; color: #15803d; } .ctl-toast.is-ok i { background: #16a34a; }
.ctl-toast.is-warn { border-color: #fde68a; color: #92400e; } .ctl-toast.is-warn i { background: #d97706; }
.ctl-toast.is-err { border-color: #fecaca; color: #b91c1c; } .ctl-toast.is-err i { background: #dc2626; }
@media (max-width: 720px) { .ctl-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; justify-content: center; } }

/* ============================================================
 * docs/34 — the OLTC light dashboard drawn from its layout (static/js/oltc-layout.js)
 * Cards flow in a 12-column grid by their width (--span); the parameters of a card sit in groups
 * with the card's look (tiles / rows / stats), columns (--cols) and alignment. Replaces the fixed
 * grid areas above.
 * ============================================================ */
.ol-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; }
.ol-grid > .ol-card { grid-column: span var(--span, 4); }
.ol-card__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; }
.ol-blk { display: flex; flex-direction: column; min-width: 0; }   /* flex: its parts keep their margins, as when they sat in the card */
.ol-blk[data-block="ptv_spark"] { flex: 1 1 60px; min-height: 60px; }
.ol-blk[data-block="ptv_spark"] .ol-spark { flex: 1 1 60px; min-height: 60px; height: auto; }
.ol-blk[data-block="tap_dial"] { flex: 1 1 auto; justify-content: center; }
.ol-head__chips { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ol-head__chips:empty { display: none; }
.ol-chip--lamp.is-on[data-kind="info"] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ol-chip--lamp.is-on[data-kind="status"] { background: #ecfdf5; border-color: #bbf7d0; color: #166534; }
.ol-chip--lamp.is-on[data-kind="warn"] { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.ol-chip--lamp.is-on[data-kind="alarm"] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ol-lamp.is-on[data-kind="info"] .ol-lamp__dot { background: var(--ol-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
.ol-lamp.is-on[data-kind="info"] .ol-lamp__val { color: var(--ol-blue); }
/* a group's grid has 4 tracks per column ("per row"), so a width snaps to a quarter column. The space
   between items is their own side margins (half each), not track gaps, so the extra tracks never pile
   up gaps; the group reaches out by the same half, so the outer items stay flush with the card. */
.ol-grp { --gx: 12px; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); column-gap: 0; margin-left: calc(var(--gx) / -2); margin-right: calc(var(--gx) / -2); min-width: 0; }
.ol-grp > * { grid-column: span var(--w, 4); margin-left: calc(var(--gx) / 2); margin-right: calc(var(--gx) / 2); }
.ol-card__body > .ol-blk + .ol-grp, .ol-card__body > .ol-grp + .ol-blk { margin-top: 8px; }
/* the settings rows follow the width of their card, wherever the layout puts them */
.ol-grid > .ol-card { container-type: inline-size; }
@container (min-width: 560px) { .ol-set__grid { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@container (max-width: 559.98px) { .ol-set__grid { grid-template-columns: 1fr; } }
.ol-grp--stats { row-gap: 10px; align-items: end; }
.ol-grp--stats .ol-lamp--inline { padding: 0; }
.ol-grp--stats .ol-lamp--inline .ol-lamp__lbl { font-size: 10.5px; }
.ol-grp--rows { --gx: 10px; flex: 1 1 auto; align-content: space-between; row-gap: 7px; }
.ol-grp--rows .ol-lamp--row .ol-lamp__lbl { font-size: 12.5px; }
.ol-grp--tiles { --gx: 6px; }
.ol-card .ol-grp--tiles { row-gap: 6px; }
.ol-grp--tiles .ol-lamp { gap: 7px; padding: 9px 9px; }
.ol-grp--tiles .ol-lamp__dot { width: 12px; height: 12px; }
.ol-grp--tiles .ol-lamp__lbl { font-size: 10.5px; letter-spacing: 0.02em; }
.ol-grp--tiles .ol-lamp__val { font-size: 11px; white-space: nowrap; }
.ol-strip.ol-grp { grid-template-columns: repeat(var(--cols, 32), minmax(0, 1fr)); }
.ol-strip.is-empty { display: none; }
.ol-grp--stats[data-align="center"] { justify-items: center; text-align: center; }
.ol-grp--stats[data-align="center"] .ol-stat { align-items: center; }
.ol-grp--stats[data-align="end"] { justify-items: end; text-align: right; }
.ol-grp--stats[data-align="end"] .ol-stat { align-items: flex-end; }
.ol-grp--stats[data-align="between"] { display: flex; flex-wrap: wrap; justify-content: space-between; }
.ol-grp[data-align="start"] .ol-lamp__val, .ol-grp[data-align="center"] .ol-lamp__val, .ol-grp[data-align="end"] .ol-lamp__val { margin-left: 4px; }
.ol-grp--tiles[data-align="center"] .ol-lamp, .ol-grp--rows[data-align="center"] .ol-lamp { justify-content: center; }
.ol-grp--tiles[data-align="end"] .ol-lamp, .ol-grp--rows[data-align="end"] .ol-lamp { justify-content: flex-end; }
/* sizes: an item covers --w tracks and h rows of its group; a card covers rows of the page grid */
.ol-grp > [data-h] { grid-row: span var(--h); align-self: stretch; }
.ol-stat[data-h] { justify-content: center; }
.ol-grp .ol-stat__l { overflow: hidden; text-overflow: ellipsis; }   /* many per row: shorten, never overlap */
.ol-stat[data-h="2"] .ol-stat__v { font-size: 34px; }
.ol-stat[data-h="3"] .ol-stat__v { font-size: 46px; }
.ol-stat[data-h="4"] .ol-stat__v { font-size: 56px; }
.ol-grid > .ol-card[data-rows] { grid-row: span var(--rows); }
.ol-space { min-width: 0; min-height: 24px; }
/* counter (docs/34 §7): a value as flip-counter digits — dark tiles, a seam across the middle, hinge tabs
   at the sides. The digits size themselves to the item's width (container units) and grow with its
   height; a digit that changes drops its top leaf (the painter adds .is-flip). */
.ol-ctr { container-type: inline-size; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ol-ctr[data-h] { justify-content: center; }
.ol-grp--stats[data-align="between"] > .ol-ctr { flex: 0 1 200px; }
.ol-ctr__l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ol-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-ctr__row { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.ol-ctr__digits { --fs: clamp(12px, calc((100cqw - var(--u, 0px)) / (var(--n, 3) * 0.9 + 0.24)), var(--fs-max, 30px)); display: inline-flex; flex: 0 0 auto; gap: calc(var(--fs) * 0.1); padding: calc(var(--fs) * 0.12); background: #070708; border-radius: calc(var(--fs) * 0.2); box-shadow: 0 2px 6px rgba(15,23,42,0.22); }
.ol-ctr[data-h="2"] .ol-ctr__digits { --fs-max: 48px; }
.ol-ctr[data-h="3"] .ol-ctr__digits { --fs-max: 64px; }
.ol-ctr[data-h="4"] .ol-ctr__digits { --fs-max: 80px; }
.ol-ctr__t { position: relative; display: flex; align-items: center; justify-content: center; width: calc(var(--fs) * 0.8); height: calc(var(--fs) * 1.28); font-family: "Bahnschrift", "DIN Alternate", "Arial Narrow", system-ui, sans-serif; font-size: var(--fs); font-weight: 700; line-height: 1; color: #f4f4f5; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #2c2c30 0%, #222226 49.4%, #09090a 49.4%, #09090a 50.6%, #1a1a1d 50.6%, #141416 100%); border-radius: calc(var(--fs) * 0.1); perspective: calc(var(--fs) * 6); }
.ol-ctr__t::before { content: ""; position: absolute; left: calc(var(--fs) * -0.05); right: calc(var(--fs) * -0.05); top: calc(50% - var(--fs) * 0.09); height: calc(var(--fs) * 0.18); background: linear-gradient(90deg, #8a8f98 0 calc(var(--fs) * 0.07), transparent calc(var(--fs) * 0.07) calc(100% - var(--fs) * 0.07), #8a8f98 calc(100% - var(--fs) * 0.07)); border-radius: 1px; pointer-events: none; }
.ol-ctr__t.is-flip::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; border-radius: calc(var(--fs) * 0.1) calc(var(--fs) * 0.1) 0 0; background: linear-gradient(180deg, #34343a, #26262a); transform-origin: 50% 100%; animation: ol-flap 320ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards; }
@keyframes ol-flap { from { transform: rotateX(0deg); } to { transform: rotateX(-90deg); } }
.ol-ctr__u { font-size: 12px; font-weight: 600; color: var(--ol-mute); padding-bottom: 2px; white-space: nowrap; }
/* a counter sizes itself from its box: in a grid cell it must fill the cell (centred at its own width
   it would have none) */
.ol-grp > .ol-ctr { justify-self: stretch; }
/* alignment of an item's label and value (docs/34 §9): its own "al" (set in its dialog), else its card's */
.ol-grp > [data-al] { justify-self: stretch; }
.ol-stat[data-al="start"], .ol-ctr[data-al="start"] .ol-ctr__l { text-align: left; }
.ol-stat[data-al="center"], .ol-ctr[data-al="center"] .ol-ctr__l { text-align: center; }
.ol-stat[data-al="end"], .ol-ctr[data-al="end"] .ol-ctr__l { text-align: right; }
.ol-ctr[data-al="start"] .ol-ctr__row, .ol-lamp[data-al="start"] { justify-content: flex-start; }
.ol-ctr[data-al="center"] .ol-ctr__row, .ol-lamp[data-al="center"] { justify-content: center; }
.ol-ctr[data-al="end"] .ol-ctr__row, .ol-lamp[data-al="end"] { justify-content: flex-end; }
.ol-lamp[data-al] .ol-lamp__val { margin-left: 6px; }
.ol-grp[data-align="center"] > .ol-ctr:not([data-al]) .ol-ctr__l { text-align: center; }
.ol-grp[data-align="center"] > .ol-ctr:not([data-al]) .ol-ctr__row { justify-content: center; }
.ol-grp[data-align="end"] > .ol-ctr:not([data-al]) .ol-ctr__l { text-align: right; }
.ol-grp[data-align="end"] > .ol-ctr:not([data-al]) .ol-ctr__row { justify-content: flex-end; }
.ol-ctr.is-stale .ol-ctr__digits { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .ol-ctr__t.is-flip::after { animation: none; display: none; } }
/* free placement (docs/34 §8): a card's items at any spot and size — left / width in % of the card, top /
   height in px. Their content scales with the box (container units). On a phone they stack in reading
   order at their natural size. */
.ol-card__body.ol-free { display: block; position: relative; flex: 0 0 auto; min-height: 40px; }
.ol-free > .ol-fi { position: absolute; box-sizing: border-box; margin: 0; min-width: 0; }
@media (min-width: 721px) {
  .ol-free > .ol-fi:not(.ol-blk) { container-type: size; }
  .ol-free > .ol-stat.ol-fi { justify-content: center; gap: 1px; overflow: hidden; }
  /* never smaller than in a grid (the floor is the grid size), larger as the box grows */
  .ol-free > .ol-stat.ol-fi .ol-stat__l { font-size: clamp(10.5px, 20cqh, 16px); }
  .ol-free > .ol-stat.ol-fi .ol-stat__v { font-size: clamp(22px, min(46cqh, 28cqw), 240px); }
  .ol-free > .ol-stat.ol-fi .ol-stat__v small { font-size: 0.45em; }
  .ol-free > .ol-lamp.ol-fi { gap: clamp(7px, 12cqh, 14px); overflow: hidden; }
  .ol-free > .ol-lamp.ol-fi .ol-lamp__dot { width: clamp(12px, 42cqh, 30px); height: clamp(12px, 42cqh, 30px); }
  .ol-free > .ol-lamp.ol-fi .ol-lamp__lbl, .ol-free > .ol-lamp.ol-fi .ol-lamp__val { font-size: clamp(10.5px, 30cqh, 24px); }
  .ol-free > .ol-ctr.ol-fi { justify-content: center; }
  .ol-free > .ol-ctr.ol-fi .ol-ctr__digits { --fs: clamp(8px, min(calc((100cqw - var(--u, 0px)) / (var(--n, 3) * 0.9 + 0.24)), calc((100cqh - 24px) / 1.56)), 400px); }
  .ol-free > .ol-blk.ol-fi { overflow: hidden; }
  .ol-free > .ol-blk[data-block="tap_dial"] .ol-tap__body { height: 100%; }
  .ol-free > .ol-blk[data-block="tap_dial"] .ol-dial-wrap { height: 100%; width: auto; max-width: 100%; max-height: 100%; flex: 0 1 auto; }
  .ol-free > .ol-blk[data-block="ptv_spark"] .ol-spark { height: 100%; }
}
@media (max-width: 720px) {
  .ol-card__body.ol-free { height: auto !important; display: flex; flex-direction: column; gap: 8px; }
  .ol-free > .ol-fi { position: static; width: auto !important; height: auto !important; }
}
@media (max-width: 1240px) { .ol-strip.ol-grp > * { grid-column: span var(--w-md, 4); } }
@media (max-width: 1180px) { .ol-grid > .ol-card[data-rows] { grid-row: auto; } }
@media (max-width: 720px) { .ol-grp > * { grid-column: span var(--w-sm, 4); } }
@media (max-width: 1240px) {
  .ol-strip.ol-grp { grid-template-columns: repeat(var(--cols-md, 16), minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .ol-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: none; grid-auto-flow: row dense; }
  .ol-grid > .ol-card { grid-column: span var(--span-md, 6); }
}
@media (max-width: 720px) {
  .ol-grid { grid-template-columns: minmax(0, 1fr); }
  .ol-grid > .ol-card { grid-column: 1 / -1; }
  .ol-grp, .ol-strip.ol-grp { grid-template-columns: repeat(var(--cols-sm, 4), minmax(0, 1fr)); }
}

/* docs/34 layout editor (staff): outlines, handles, add buttons, the floating bar, dialogs */
.ol-chip--edit { cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; color: #0d9488; background: #f0fdfa; border-color: #99f6e4; }
.ol-chip--edit:hover { background: #ccfbf1; }
.ol--editing .ol-chip--edit { display: none; }
.ol--editing { padding-bottom: 72px; }   /* room above the floating editor bar */
.ol--editing .ctl-btn, .ol--editing .ctl-in { pointer-events: none; }
.ol--editing .ol-strip.is-empty { display: grid; }
.ol--editing [data-i] { position: relative; cursor: grab; outline: 1px dashed #94a3b8; outline-offset: 2px; }
.ol--editing [data-i]:hover { outline: 2px solid #0d9488; }
.ol--editing .ol-blk[data-i] { outline-color: #cbd5e1; border-radius: 8px; }
.ol--editing .ol-blk[data-i]:hover { outline-color: #0d9488; }
.ol--editing .ol-card__h { cursor: pointer; }
.ol--editing .ol-card__body { min-height: 48px; }
.ol-ed-x { position: absolute; top: -9px; right: -9px; z-index: 3; display: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid #fecaca; background: #fff; color: #b91c1c; font: inherit; font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; cursor: pointer; }
.ol--editing [data-i]:hover > .ol-ed-x { display: block; }
.ol-ed-add { font: inherit; font-size: 12px; font-weight: 700; color: #0d9488; background: #f0fdfa; border: 1px dashed #5eead4; border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.ol-ed-add:hover { background: #ccfbf1; }
.ol-ed-add--chip { padding: 3px 10px; border-radius: 999px; }
.ol-ed-add--gear { padding: 7px 10px; }
.ol-ed-zonebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ol-strip > .ol-ed-zonebar { grid-column: 1 / -1; }
.ol-card__body > .ol-ed-zonebar { margin-top: 8px; }
.ol-ed-perrow { font: inherit; font-size: 12px; font-weight: 700; color: #0f766e; background: #f0fdfa; border: 1px dashed #5eead4; border-radius: 10px; padding: 6px 8px; cursor: pointer; }
.ol-ed-perrow:hover { background: #ccfbf1; }
.ol-ed-handle { cursor: grab; color: #94a3b8; font-size: 15px; line-height: 1; user-select: none; }
.ol-ed-cbtn { margin-left: 4px; width: 24px; height: 24px; padding: 0; border: 1px solid var(--ol-line); border-radius: 7px; background: #fff; color: var(--ol-soft); font: inherit; font-size: 13px; line-height: 22px; cursor: pointer; }
.ol-card__h .ol-ed-cbtn:first-of-type { margin-left: auto; }
.ol-card__h .ol-alarm-count + .ol-ed-cbtn { margin-left: 4px; }
.ol-ed-cbtn:hover { border-color: #0d9488; color: #0d9488; }
.ol-ed-cbtn--x:hover { border-color: #fecaca; color: #b91c1c; }
.ol-ed-newcard { grid-column: span 4; min-height: 120px; border: 2px dashed #99f6e4; border-radius: 12px; background: #f0fdfa; color: #0d9488; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ol-ed-newcard:hover { background: #ccfbf1; }
.ol--editing { -webkit-user-select: none; user-select: none; }
.ol--editing [data-i], .ol--editing .ol-ed-handle { touch-action: none; }
.ol--editing .ol-space { outline: 1px dashed #cbd5e1; outline-offset: 2px; border-radius: 8px; background: repeating-linear-gradient(135deg, #f8fafc 0 6px, #f1f5f9 6px 12px); display: flex; align-items: center; justify-content: center; }
.ol--editing .ol-space::after { content: "space"; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.ol-ed-ghost { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; opacity: 0.94; border-radius: 12px; box-shadow: 0 14px 34px rgba(15,23,42,0.28); will-change: transform; }
.ol-ed-ghost > * { width: 100%; height: 100%; margin: 0 !important; outline: 2px solid #0d9488 !important; }
.ol--editing .is-ph { opacity: 0.35; outline: 2px dashed #0d9488 !important; }
.ol--editing .is-ph > .ol-ed-x, .ol--editing .is-ph > .ol-ed-rs { display: none !important; }
.ol--dragging, .ol--dragging * { cursor: grabbing !important; }
.ol--resizing, .ol--resizing * { cursor: nwse-resize !important; }
.ol-ed-rs { position: absolute; right: -6px; bottom: -6px; z-index: 4; display: none; width: 13px; height: 13px; border-radius: 4px; background: #0d9488; border: 2px solid #fff; box-shadow: 0 0 0 1px #0d9488; cursor: nwse-resize; touch-action: none; }
.ol--editing [data-i]:hover > .ol-ed-rs, .ol--editing .ol-card:hover > .ol-ed-rs, .ol-ed-rs.is-on { display: block; }
.ol--editing .ol-card { position: relative; }
.ol-ed-rs--card { right: 5px; bottom: 5px; width: 15px; height: 15px; }
.ol-ed-rs.is-on::after { content: attr(data-size); position: absolute; right: 16px; bottom: 16px; white-space: nowrap; font-size: 11px; font-weight: 700; color: #fff; background: #0f172a; border-radius: 6px; padding: 3px 7px; }
.ol--resizing .ol-ed-rs.is-on { box-shadow: 0 0 0 3px rgba(13,148,136,0.35); }
/* free placement while editing: the item itself is lifted and follows the pointer; pink guides show
   an edge or centre it has caught; a free card lights up when a copy from elsewhere hovers over it */
.ol--editing .ol-free > .ol-fi { position: absolute; overflow: visible; }   /* over ".ol--editing [data-i]" */
@media (max-width: 720px) { .ol--editing .ol-free > .ol-fi { position: static; } }
.ol--editing .ol-free > .ol-fi.is-moving { z-index: 50; pointer-events: none; box-shadow: 0 12px 28px rgba(15,23,42,0.28); outline: 2px solid #0d9488 !important; background-color: rgba(255,255,255,0.92); }
.ol-ed-guide { position: absolute; display: none; z-index: 60; pointer-events: none; background: #ec4899; }
.ol-ed-guide--v { top: -6px; bottom: -6px; width: 1px; }
.ol-ed-guide--h { left: -6px; right: -6px; height: 1px; }
.ol-free.ol-ed-target { outline: 2px dashed #0d9488; outline-offset: 4px; border-radius: 8px; }
.ol-card > .ol-ed-zonebar { margin-top: 8px; }
.ol-ed-bar { position: fixed; left: 12px; right: 12px; margin: 0 auto; width: max-content; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 9px 12px 9px 16px; box-shadow: 0 10px 30px rgba(15,23,42,0.35); font-size: 12.5px; }
.ol-ed-bar__h { color: #94a3b8; }
.ol-ed-bar__st { color: #5eead4; font-weight: 600; }
.ol-ed-bar__st.is-bad { color: #fca5a5; }
.ol-ed-bar__btn { font: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid #334155; border-radius: 8px; background: #1e293b; color: #e2e8f0; padding: 6px 12px; cursor: pointer; }
.ol-ed-bar__btn:hover { background: #334155; }
.ol-ed-bar__btn.is-primary { background: #0d9488; border-color: #0d9488; color: #fff; }
.ol-ed-bar__btn.is-primary:hover { background: #0f766e; }
.ol-dlg { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--ol-line); border-radius: 12px; background: #fff; color: var(--ol-ink); box-shadow: 0 20px 50px rgba(15,23,42,0.3); }
.ol-dlg::backdrop { background: rgba(15,23,42,0.35); }
.ol-dlg__t { margin: 0; padding: 14px 18px 10px; font-size: 15px; font-weight: 800; border-bottom: 1px solid var(--ol-line); }
.ol-dlg__body { padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; overflow: auto; max-height: calc(100vh - 190px); }
.ol-dlg__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px; font-size: 12.5px; }
.ol-dlg__row[hidden] { display: none; }
.ol-dlg__l { color: var(--ol-soft); font-weight: 600; }
.ol-dlg__hint { grid-column: 2; color: var(--ol-mute); font-size: 11px; }
.ol-dlg__in { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--ol-line); border-radius: 8px; background: #fff; color: var(--ol-ink); min-width: 0; }
.ol-dlg__in:focus { outline: 2px solid #99f6e4; border-color: #0d9488; }
.ol-dlg__row input[type="checkbox"] { justify-self: start; width: 18px; height: 18px; accent-color: #0d9488; }
.ol-dlg__pair { display: flex; align-items: center; gap: 8px; color: var(--ol-mute); }
.ol-dlg__pair select { flex: 1 1 0; }
.ol-dlg__note { margin: 0; font-size: 12.5px; color: var(--ol-soft); }
.ol-dlg__sub { margin: 6px 0 0; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ol-mute); }
.ol-dlg__list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; border: 1px solid var(--ol-line); border-radius: 8px; padding: 4px; }
.ol-dlg__list--blocks { max-height: none; }
.ol-dlg__pick { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; font: inherit; font-size: 13px; color: var(--ol-ink); background: #fff; border: 0; border-radius: 6px; padding: 6px 8px; cursor: pointer; }
.ol-dlg__pick:hover { background: #f0fdfa; }
.ol-dlg__pick small { font-size: 11px; color: var(--ol-mute); }
.ol-dlg__b { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 18px 14px; border-top: 1px solid var(--ol-line); }
.ol-dlg__btn { font: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid var(--ol-line); border-radius: 8px; background: #fff; color: var(--ol-ink); padding: 7px 14px; cursor: pointer; }
.ol-dlg__btn:hover { background: #f8fafc; }
.ol-dlg__btn.is-primary { background: #0d9488; border-color: #0d9488; color: #fff; }
.ol-dlg__btn.is-danger { margin-right: auto; color: #b91c1c; border-color: #fecaca; }
.ol-dlg__btn.is-danger:hover { background: #fef2f2; }
@media (max-width: 720px) {
  .ol-dlg__row { grid-template-columns: minmax(0, 1fr); }
  .ol-dlg__hint { grid-column: 1; }
  .ol-ed-newcard { grid-column: 1 / -1; }
}

/* docs/43: the widget library, a button's properties and the templates (the layout editor's dialogs), and
   on the page the dashboard's own buttons, bars and text. */
.ol-dlg--lib { width: min(1060px, calc(100vw - 24px)); }
.ol-dlg--form { width: min(660px, calc(100vw - 24px)); }
.ol-dlg--lib .ol-dlg__body { padding: 0; overflow: hidden; }
.ol-lib { display: grid; grid-template-columns: 180px minmax(0, 1fr) 290px; height: min(520px, calc(100vh - 190px)); }
.ol-lib__nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--ol-line); background: #f8fafc; overflow: auto; }
.ol-lib__cat { font: inherit; font-size: 13px; font-weight: 700; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--ol-soft); cursor: pointer; }
.ol-lib__cat:hover { background: #eef2f6; color: var(--ol-ink); }
.ol-lib__cat.is-on, .ol-lib__cat.is-on:hover { background: #0d9488; color: #fff; }
.ol-lib__main { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; min-width: 0; min-height: 0; overflow: auto; }
.ol-lib__q { width: 100%; box-sizing: border-box; flex: 0 0 auto; }
.ol-lib__list { max-height: none; flex: 1 1 auto; min-height: 0; }
.ol-lib__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ol-lib__grid .ol-dlg__pick { border: 1px solid var(--ol-line); border-radius: 10px; padding: 12px 14px; gap: 3px; }
.ol-lib__grid .ol-dlg__pick:hover { border-color: #5eead4; }
.ol-dlg__pick { position: relative; }
.ol-dlg__pick:disabled { opacity: 0.5; cursor: default; }
.ol-dlg__pick.is-added::after { content: "added"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #0f766e; background: #ccfbf1; border-radius: 999px; padding: 2px 8px; }
.ol-lib__side { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-left: 1px solid var(--ol-line); background: #f8fafc; overflow: auto; }
.ol-lib__side .ol-dlg__sub { margin: 0; }
.ol-lib__pv { display: grid; align-items: center; min-height: 128px; padding: 18px 16px; border: 1px solid var(--ol-line); border-radius: 10px; background: #fff; pointer-events: none; }
.ol-lib__pv > * { min-width: 0; max-width: 100%; }
.ol-lib__pv .ol-ctr { width: 100%; }
.ol-lib__pvt { font-size: 13.5px; }
.ol-lib__count { margin-right: auto; align-self: center; font-size: 12.5px; font-weight: 600; color: #0f766e; }
.ol-dlg__err { margin: 0; padding: 8px 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; font-weight: 600; }
.ol-dlg__err[hidden] { display: none; }
.ol-dlg__checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ol-dlg__checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ol-ink); }
.ol-dlg__checks input[type="checkbox"] { width: 16px; height: 16px; accent-color: #0d9488; }
.ol-dlg__pair input { flex: 1 1 0; min-width: 0; }
.ol-dlg--form .ol-dlg__sub { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--ol-line); }
.ol-dlg--form .ol-dlg__err + .ol-dlg__sub, .ol-dlg--form .ol-dlg__body > .ol-dlg__sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ol-tpl { display: flex; flex-direction: column; gap: 6px; }
.ol-tpl__row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--ol-line); border-radius: 10px; }
.ol-tpl__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ol-tpl__info small { font-size: 11.5px; color: var(--ol-mute); }
.ol-tpl__del { color: #b91c1c; border-color: #fecaca; }
.ol-tpl__save { display: flex; align-items: center; gap: 12px; }
.ol-tpl__save .ol-dlg__note { flex: 1 1 auto; }
@media (max-width: 860px) {
  .ol-lib { grid-template-columns: minmax(0, 1fr); height: auto; max-height: calc(100vh - 190px); overflow: auto; }
  .ol-lib__nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--ol-line); }
  .ol-lib__side { border-left: 0; border-top: 1px solid var(--ol-line); }
  .ol-lib__main, .ol-lib__side, .ol-lib__nav { overflow: visible; }
}
/* a button of the dashboard's own: it fills its cell; a pair shares it; a value to set is a row */
.ol-cw { display: flex; align-items: center; gap: 8px; min-width: 0; align-self: center; }
.ol-cw > .ol-btn { flex: 1 1 0; min-width: 0; justify-content: center; text-decoration: none; }
.ol-cw > .ol-btn--apply { flex: 0 0 auto; }
.ol-cw--setpoint { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 10px; font-size: 12.5px; color: var(--ol-soft); }
.ol-cw__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-cw__cur { color: var(--ol-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-cw .ol-btn.is-on { box-shadow: inset 0 0 0 2px currentColor; }
.ol-btn--warn { background: #fff7ed; border-color: #fdba74; color: #c2410c; }
.ol-grp > .ol-cw[data-h], .ol-fi.ol-cw { align-self: stretch; }
.ol-grp > .ol-cw[data-h] > .ol-btn, .ol-fi.ol-cw > .ol-btn { align-self: stretch; }
.ol--view-only .ol-cw > .ctl-btn, .ol--view-only .ol-cw > .ctl-in { opacity: 0.55; }
/* ... in the lamp row it is as tall as the lamps beside it; among the header chips it is a small pill */
.ol-strip > .ol-cw { align-self: stretch; }
.ol-strip > .ol-cw > .ol-btn { align-self: stretch; padding: 8px 10px; font-size: 12px; }
.ol-strip > .ol-cw--setpoint { grid-template-columns: minmax(0, 1fr) auto minmax(44px, 72px) auto; column-gap: 8px; padding: 6px 10px; background: #fff; border: 1px solid var(--ol-line); border-radius: 10px; font-size: 11.5px; }
.ol-strip > .ol-cw--setpoint .ol-set__in { width: 100%; min-width: 0; box-sizing: border-box; }
.ol-lib__pv .ol-cw--setpoint { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
.ol-cw--chip { display: inline-flex; gap: 4px; vertical-align: middle; }
.ol-cw--chip > .ol-btn { flex: 0 0 auto; padding: 4px 11px; font-size: 11px; border-radius: 999px; }
.ol-cw--chip.ol-cw--setpoint { display: inline-flex; gap: 6px; font-size: 11px; }
.ol-cw--chip .ol-set__in { width: 62px; padding: 3px 6px; font-size: 11px; }
.ol-lib__to { display: flex; flex-direction: column; gap: 4px; margin: 0 4px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ol-line); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ol-mute); }
.ol-lib__to select { width: 100%; text-transform: none; letter-spacing: 0; font-weight: 600; }
.ol-lib__main .ol-dlg__sub { margin: 4px 0 0; }
/* a bar: the value as a level between the two ends of its scale */
.ol-bar { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.ol-bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ol-bar__l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ol-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-bar__v { font-size: 15px; font-weight: 800; color: var(--ol-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-bar__v small { font-size: 11px; color: var(--ol-mute); font-weight: 600; }
.ol-bar__track { height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.ol-bar__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #0d9488; transition: width 0.4s ease; }
.ol-bar__fill--blue { background: var(--ol-blue); } .ol-bar__fill--green { background: var(--ol-green); }
.ol-bar__fill--amber { background: var(--ol-amber); } .ol-bar__fill--red { background: var(--ol-red); }
.ol-bar__ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--ol-mute); font-variant-numeric: tabular-nums; }
.ol-bar[data-h] .ol-bar__track, .ol-fi.ol-bar .ol-bar__track { height: 16px; }
.ol-bar.is-stale .ol-bar__fill { opacity: 0.4; }
/* a line of text */
.ol-text { min-width: 0; align-self: center; font-size: 13px; line-height: 1.35; color: var(--ol-ink); overflow-wrap: anywhere; }
.ol-text--s { font-size: 11.5px; color: var(--ol-mute); }
.ol-text--l { font-size: 17px; font-weight: 800; }
.ol-text[data-al="center"] { text-align: center; } .ol-text[data-al="end"] { text-align: right; }
.ol-grp > .ol-text, .ol-grp > .ol-bar, .ol-grp > .ol-cw { justify-self: stretch; }

/* docs/44: an item's own look (its sizes and colours go on the element itself), a button's icon, a block
   drawn without its buttons, and in the editor the "Look in detail" rows and the preview. */
.ol-ic { display: block; flex: 0 0 auto; width: 0.95em; height: 0.95em; }
.ol-btn[data-ip="right"] > .ol-ic { order: 9; }
.ol-btn[data-ip="top"] { flex-wrap: wrap; align-content: center; row-gap: 3px; }
.ol-btn[data-ip="top"] > .ol-ic { flex: 0 0 100%; }
.ol-blk[data-bare] .ol-ctl { display: none; }
.ol-blk[data-bare] .ol-tap__body .ol-dial-wrap { max-width: 300px; margin: 0 auto; }
.ol-stat.ol-own-box, .ol-text.ol-own-box, .ol-bar.ol-own-box, .ol-ctr.ol-own-box, .ol-lamp--inline.ol-own-box, .ol-lamp--row.ol-own-box { padding: 6px 10px; border-color: var(--ol-line); border-radius: 8px; }
.ol-ctr__digits[data-fg] .ol-ctr__t { color: inherit; }
.ol-dlg__col { display: inline-flex; align-items: center; gap: 8px; }
.ol-dlg__col input[type="color"] { flex: 0 0 auto; width: 46px; height: 30px; padding: 2px; border: 1px solid var(--ol-line); border-radius: 8px; background: #fff; cursor: pointer; }
.ol-dlg__col input[type="checkbox"] { flex: 0 0 auto; }
.ol-dlg__col input[type="checkbox"]:not(:checked) + input[type="color"] { opacity: 0.4; }
.ol-dlg__pair > .ol-dlg__col { flex: 1 1 0; }
.ol-dlg__pv { position: sticky; top: 0; z-index: 2; flex: 0 0 auto; display: grid; justify-items: center; align-items: center; min-height: 72px; max-height: 232px; padding: 14px 16px; overflow: hidden; border: 1px solid var(--ol-line); border-radius: 10px; background: #f8fafc; box-shadow: 0 6px 10px -8px rgba(15,23,42,0.35); pointer-events: none; }
.ol-dlg__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
.ol-dlg__stage.ol-strip { gap: 0; margin: 0; }
.ol-dlg__stage.ol-free { display: block; }
.ol-dlg__stage > * { min-width: 0; margin: 0; }
.ol-dlg__stage:not([style]) > .ol-cw { width: 200px; max-width: 100%; }
.ol-dlg__stage:not([style]) > .ol-cw--pair { width: 300px; }
.ol-dlg__stage:not([style]) > .ol-cw--setpoint { width: 440px; }
.ol-dlg__stage:not([style]) > .ol-lamp, .ol-dlg__stage:not([style]) > .ol-bar, .ol-dlg__stage:not([style]) > .ol-ctr { width: 260px; max-width: 100%; }

/* docs/34 §10: every device's Graphical view is the live dashboard. A device that is not an OLTC one gets
   a letter for an icon, and its standard layout puts what the view showed before (the automatic tiles, its
   designer widgets) in plain cards: no frame and no title, unless the layout is being edited. */
.ol-head__icon--letter { font-size: 17px; font-weight: 800; }
.ol-card.ol-card--plain, html[data-theme="dark"] .ol-card.ol-card--plain { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.ol-card--plain > .ol-card__h { display: none; }
.ol--editing .ol-card--plain { outline: 1px dashed #cbd5e1; outline-offset: 4px; border-radius: 12px; }
.ol--editing .ol-card--plain > .ol-card__h { display: flex; }
.ol--editing .ol-blk > :not(.ol-ed) { pointer-events: none; }   /* a block moves as one: nothing inside it takes the pointer */
/* The automatic tiles and designer widgets take the page's own colours, as before they sat in the live page;
   and the live page keeps its light colours in the dark theme (docs/13 §7): the dark theme's colours for
   headings, links and buttons must not reach its header and card titles. */
.ol-blk[data-block="tiles"], .ol-blk[data-block^="cw"] { color: var(--ink); }
html[data-theme="dark"] #oltc-light .ol-card__h { color: var(--ol-soft); }
html[data-theme="dark"] #oltc-light .ol-switch a { color: var(--ol-soft); }
html[data-theme="dark"] #oltc-light .ol-switch a.is-on { color: #fff; }
html[data-theme="dark"] #oltc-light .ol-chip--link, html[data-theme="dark"] #oltc-light .ol-chip--edit { color: #0d9488; background: #f0fdfa; border-color: #99f6e4; }
html[data-theme="dark"] #oltc-light .ol-chip--link:hover, html[data-theme="dark"] #oltc-light .ol-chip--edit:hover { background: #ccfbf1; }
/* ROUTER_SECTION_BAND_2026_06_11 -- section bands above the tiles of a router's themed layout */
.dash__section { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 4px 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.dash__section:before { content: ''; width: 3px; height: 14px; background: var(--brand); border-radius: 1.5px; }
html[data-theme="dark"] .dash__section { color: #cfe1ff; border-bottom-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .dash__section:before { background: #5eead4; }

/* ============================================================
   MENU_DRAWER (2026-10-04) -- the side menu on a narrow screen.
   Owner: "in mobile chrome side menu show as icon.. even in desktop view .. fix this".
   Up to 900 px the menu is off the page and slides in WITH its words from the button in the top bar; the page
   has the whole width. From 901 px it stands beside the page as before, and the rail of icons is only what
   the arrow in its head chose there (app_shell.html keeps that choice for wide screens only).
   ============================================================ */
.nav-open-btn {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; margin-right: 10px; padding: 0;
  border: 1px solid rgba(15,23,42,0.12); border-radius: 9px;
  background: rgba(255,255,255,0.7); color: var(--ink); cursor: pointer;
}
.nav-open-btn svg { width: 20px; height: 20px; }
html[data-theme="dark"] .nav-open-btn { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.14) !important; color: var(--ink) !important; }
.nav-scrim { display: none; }
@media (max-width: 900px) {
  .app-shell, .app-shell:has(.sidebar.sidebar--collapsed) { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 900;
    width: min(288px, 86vw); height: 100vh; height: 100dvh;
    transform: translateX(-104%); visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }
  .app-shell.nav-open .sidebar { transform: none; visibility: visible; transition: transform 200ms ease; box-shadow: 0 0 44px rgba(0,0,0,0.38); }
  .sidebar__nav { overscroll-behavior: contain; }
  .sidebar .navlink { min-height: 42px; }                 /* a finger, not a pointer */
  .sb-toggle { width: 34px; height: 34px; }
  .app-shell.nav-open .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 890; width: 100%; height: 100%; padding: 0; border: 0;
    background: rgba(8,15,30,0.48); touch-action: none; cursor: default;
  }
  .nav-open-btn { display: inline-flex; }
  .topbar .topbar__title { margin-right: auto; }
  .topbar__right .hello { display: none; }                /* the name is in the menu's foot */
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none !important; } }