/* ──────────────────────────────────────────────────────────────────────────
   CDI Tipton Plant Dashboard — v2
   Design language: clean, professional, plant-floor-friendly. Modeled on
   modern monitoring/observability tools (Linear, Vercel, Grafana 11) but
   with CDI's green/gold accent and high-contrast values for big screens.
   ────────────────────────────────────────────────────────────────────────── */

/* Alpine FOUC guard: x-cloak only removes the attribute on init — the matching
   CSS rule must be supplied by us, or hidden panels/overlays (every tabbed
   Settings panel, the Service-Accounts modal, the unsaved-changes banner)
   flash on load until Alpine boots. The !important beats element-level
   display rules like `.sa-modal-root { display:flex }`. (Ported from Visalia
   v2.9.0607.8.) */
[x-cloak] { display: none !important; }

:root {
  /* CDI brand */
  --cdi-green:        #1B5E20;
  --cdi-green-mid:    #2E7D32;
  --cdi-green-light:  #66BB6A;
  --cdi-gold:         #FFC107;
  --cdi-gold-hover:   #FFD54F;

  /* Neutral scale (dark theme) */
  --n-950:  #07090B;     /* page background */
  --n-900:  #0F1316;     /* card surface     */
  --n-850:  #161B20;     /* card raised      */
  --n-800:  #1D232A;     /* hover            */
  --n-700:  #2A323A;     /* border-default   */
  --n-600:  #3A4450;     /* border-strong    */
  --n-500:  #6B7682;     /* muted text       */
  --n-400:  #8E99A6;     /* secondary text   */
  --n-300:  #B8C2CD;     /* body text        */
  --n-100:  #E8ECF1;     /* heading text     */
  --n-50:   #F5F7FA;     /* highest contrast */

  /* Semantic */
  --ok:        #4ADE80;
  --warn:      #F59E0B;
  --bad:       #F87171;
  --info:      #60A5FA;
  --neutral:   #94A3B8;

  /* Typography scale */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  38px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);

  /* Motion */
  --t-fast: 120ms ease;
  --t:      180ms ease;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--n-950);
  color: var(--n-300);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body { padding-bottom: 32px; }
a { color: var(--cdi-gold); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--cdi-gold-hover); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; color: var(--n-100); }
/* Inline code chips — keep the visual highlight (subtle background +
   rounded border) but inherit the body font so prose like
   "the `min` field" reads as one consistent typeface (v2.9.0524.10
   per OT request). Use .code-mono on tag-name / hex values where
   monospace genuinely helps readability. */
code {
  font-family: inherit;
  font-size: inherit; font-weight: 700;
  background: transparent;
  padding: 0; border: 0; border-radius: 0;
  color: inherit;
}
/* Native date / time / datetime-local pickers — force the body font onto
   the parent input AND every shadow-DOM pseudo-element. Chromium's date
   inputs use shadow DOM that doesn't reliably inherit from the parent,
   so each pseudo needs an explicit declaration. Plus:
   - Explicit font-family (not `inherit`) to dodge edge cases where the
     UA stylesheet's `font: -webkit-small-control` shorthand resets the
     family before our cascade reaches it.
   - `font-feature-settings: normal` to drop the body's tabular-numeral
     feature so date digits render with their natural proportional
     widths — tabular numerals make the value text read as monospace-ish
     against the body labels.
   - `!important` because the UA stylesheet's user-agent rules can win
     against descendant-pseudo specificity in some browser versions.  */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-second-field,
input[type="time"]::-webkit-datetime-edit-ampm-field,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-second-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field,
input[type="month"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit-fields-wrapper,
input[type="month"]::-webkit-datetime-edit-text,
input[type="month"]::-webkit-datetime-edit-month-field,
input[type="month"]::-webkit-datetime-edit-year-field {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: inherit !important;
  font-feature-settings: normal !important;
  font-variant-numeric: normal !important;
}
/* In descriptive contexts (admin help text, hints, modal bodies, dialog
   titles) the chip styling makes inline references stand out as separate
   visual elements when the admin just wants them to read as normal prose.
   Soften to inherit so phrases like "the Reset button" or "the audit log"
   blend with the surrounding text. Chip styling is preserved in release
   notes and any other context with its own explicit rule. */
.settings-card-sub code,
.settings-card-sub strong code,
.hint code,
.app-confirm-body code,
.empty code,
label code {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
  padding: 0;
  border: 0;
  color: inherit;
}
[data-theme="light"] .settings-card-sub code,
[data-theme="light"] .settings-card-sub strong code,
[data-theme="light"] .hint code,
[data-theme="light"] .app-confirm-body code,
[data-theme="light"] .empty code,
[data-theme="light"] label code {
  background: transparent;
  border: 0;
  color: inherit;
}
/* .code-mono is intentionally a NO-OP class. We keep the class so
   existing markup using it still works, but the font is the body font —
   OT request: no monospace anywhere in the dashboard. */
.code-mono { font-family: inherit; }
/* Global form-control font consistency — every native input that
   isn't already styled by a wrapper inherits the page font. Inputs
   inside .threshold-editor, .settings-field, .filters etc. already
   set `font-family: inherit`; this catches the few rogue inputs
   browsers default to Arial. */
input, select, textarea, button {
  font-family: inherit;
}

.icon         { display: inline-block; vertical-align: -3px; }
.icon-inline  { vertical-align: -2px; }

/* ── Top nav ─────────────────────────────────────────────────────────────── */
.topnav {
  background: linear-gradient(180deg, rgba(15,19,22,0.95) 0%, rgba(7,9,11,0.95) 100%);
  border-bottom: 1px solid var(--n-700);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 100;
}
.topnav-inner {
  max-width: 1700px; margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 0 24px; height: 60px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--n-50); padding-right: 18px;
  border-right: 1px solid var(--n-700);
  margin-right: 4px; white-space: nowrap;
}
.brand:hover { color: var(--n-50); }
.brand img { height: 36px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-line-1 { font-size: var(--fs-md); font-weight: 700; color: var(--n-50); }
.brand-line-2 { font-size: var(--fs-xs); color: var(--n-500); letter-spacing: 0.3px; }

.nav-tabs {
  display: flex; gap: 2px; list-style: none; margin: 0; padding: 0;
  /* `flex: 0 1 auto` (not grow): the strip sizes to its tabs and the "More"
     sibling sits right after it; `.nav-right` uses margin-left:auto to take
     the remaining space and stay on the right edge. */
  flex: 0 1 auto; min-width: 0;
  /* Was `overflow-x: auto` — that left the right-edge tabs unreachable on
     narrow viewports because the scrollbar was suppressed. We now collapse
     tabs to icon-only via JS (see static/nav-collapse.js) so the strip
     always fits without horizontal scrolling. */
  overflow: hidden;
}
.nav-tabs::-webkit-scrollbar { display: none; }
/* Strip tabs must NOT flex-shrink: a shrunk <li> reports a squished width to
   nav-collapse.js (and clips its own label, "Admin" → "A") instead of letting
   the overflow logic move it into More. Keep each tab at its natural width so
   the priority-plus measurement is honest. */
.nav-tabs > li { flex: 0 0 auto; }
/* When the resize logic adds .icon-only to a tab, its label span hides and
   the padding tightens. The icon itself stays full size. */
.nav-tabs li a.icon-only            { padding: 8px 10px; }
.nav-tabs li a.icon-only > span     { display: none; }
.nav-tabs li a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--n-400); font-weight: 500; font-size: var(--fs-sm);
  white-space: nowrap; transition: all var(--t-fast);
  border: 1px solid transparent;
}
.nav-tabs li a:hover {
  background: var(--n-850); color: var(--n-100); text-decoration: none;
}
.nav-tabs li a.active {
  background: rgba(255, 193, 7, 0.12); color: var(--cdi-gold);
  border-color: rgba(255, 193, 7, 0.3); font-weight: 600;
}
.nav-tabs li a.admin {
  margin-left: 6px; color: var(--cdi-green-light);
}
.nav-tabs li a.admin.active {
  background: rgba(102, 187, 106, 0.14); color: var(--cdi-green-light);
  border-color: rgba(102, 187, 106, 0.3);
}

/* More ▾ overflow (v2.9.0611.2). The button styles like a strip tab; the panel
   drops the lower-frequency destinations below it. It sits OUTSIDE .nav-tabs
   (a sibling in .topnav-inner) so the dropdown isn't clipped by .nav-tabs'
   overflow:hidden. Menu rows always keep their labels. */
.nav-more { position: relative; flex: none; display: flex; align-items: center; align-self: stretch; }
.nav-more[hidden] { display: none; }   /* JS unhides it only when it holds overflow tabs */
.nav-more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--n-400); font-weight: 500; font-size: var(--fs-sm);
  white-space: nowrap; transition: all var(--t-fast);
  border: 1px solid transparent; background: transparent;
  font-family: inherit; cursor: pointer;
}
.nav-more-btn:hover { background: var(--n-850); color: var(--n-100); }
.nav-more-btn.active {
  background: rgba(255, 193, 7, 0.12); color: var(--cdi-gold);
  border-color: rgba(255, 193, 7, 0.3); font-weight: 600;
}
.nav-more-caret { opacity: 0.65; transition: transform var(--t-fast); }
.nav-more-btn[aria-expanded="true"] .nav-more-caret { transform: rotate(180deg); }
.nav-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  min-width: 210px; margin: 0; padding: 6px; list-style: none;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--n-900); border: 1px solid var(--n-700);
  border-radius: var(--r-sm); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.nav-more-menu[hidden] { display: none; }
.nav-more-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--n-400); font-weight: 500; font-size: var(--fs-sm);
  white-space: nowrap; border: 1px solid transparent;
  transition: all var(--t-fast);
}
.nav-more-menu a > span { display: inline; }
.nav-more-menu a:hover { background: var(--n-850); color: var(--n-100); text-decoration: none; }
.nav-more-menu a.active {
  background: rgba(255, 193, 7, 0.12); color: var(--cdi-gold);
  border-color: rgba(255, 193, 7, 0.3);
}
.nav-more-menu a.admin { color: var(--cdi-green-light); }
.nav-more-menu a.admin.active {
  background: rgba(102, 187, 106, 0.14); color: var(--cdi-green-light);
  border-color: rgba(102, 187, 106, 0.3);
}

.nav-right {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;   /* take the remaining row space; stays on the right edge */
  padding-left: 14px; border-left: 1px solid var(--n-700);
  height: 30px;
}
.live-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.live-label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--ok);
  letter-spacing: 1px;
}

/* ── Page shell + headers ────────────────────────────────────────────────── */
.page { max-width: 1700px; margin: 0 auto; padding: 12px 24px 40px; }

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--n-800);
}
/* Compact variant — used on the Overview where we want to minimise vertical
   space above the dashboard tiles. Eyebrow + subtitle dropped; title sits
   tight against the page top and the section grid follows immediately. */
.page-header-compact {
  margin-bottom: 6px; padding-bottom: 4px;
}
.page-header-compact .page-title {
  font-size: var(--fs-xl); line-height: 1;
}
.page-header-text { display: flex; flex-direction: column; gap: 4px; }
.page-eyebrow {
  font-size: var(--fs-xs); color: var(--n-500); font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.page-title {
  font-size: var(--fs-2xl); font-weight: 700; color: var(--n-50);
  line-height: 1.1; display: inline-flex; align-items: center; gap: 12px;
}
.page-title .icon { color: var(--cdi-gold); }
.page-subtitle { color: var(--n-400); font-size: var(--fs-md); margin-top: 4px; }
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.section { margin-bottom: 18px; }
.section-title {
  font-size: var(--fs-lg); color: var(--n-100); font-weight: 600;
  margin: 0 0 8px; display: inline-flex; align-items: center; gap: 8px;
}
.section-title .icon { color: var(--cdi-gold); }
.section-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.section-sub-line { font-size: var(--fs-sm); color: var(--n-400); margin: 2px 0 0; }
.subsection-title {
  font-size: var(--fs-md); color: var(--n-100); font-weight: 600;
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.subsection-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--n-800), transparent);
}

/* ── Filter controls ─────────────────────────────────────────────────────── */
.filters {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.filters label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-xs); color: var(--n-500);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px;
}
.filters select, .filters input[type="text"], .filters input[type="number"] {
  background: var(--n-900); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: var(--fs-base); min-width: 180px;
  transition: border-color var(--t-fast);
  font-family: inherit;
}
.filters select:focus, .filters input:focus {
  outline: none; border-color: var(--cdi-gold);
}
.filter-wide select, .filter-wide input { min-width: 320px; }

/* ── Toolbar (under page header, in x-data scope) ─────────────────────────── */
.toolbar {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
/* Variant: meta-only toolbars (e.g. /silos after the sort dropdown was
   removed) — pin the lone child to the right edge instead of leaving
   it stuck on the left from the default `space-between`. */
.toolbar.toolbar-right { justify-content: flex-end; }
.toolbar-meta {
  font-size: var(--fs-sm); color: var(--n-400);
  font-variant-numeric: tabular-nums;
}
.toolbar-meta-strong {
  color: var(--n-100); font-weight: 700; font-size: var(--fs-md);
}
[data-theme="light"] .toolbar-meta { color: var(--n-500); }
[data-theme="light"] .toolbar-meta-strong { color: var(--cdi-green); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  background: var(--cdi-gold); color: var(--cdi-green);
  border: none; border-radius: var(--r-sm);
  padding: 8px 14px; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-fast), transform var(--t-fast);
  font-family: inherit;
}
.btn:hover { background: var(--cdi-gold-hover); text-decoration: none;
             transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: var(--n-300);
  border: 1px solid var(--n-700);
}
.btn-ghost:hover {
  background: var(--n-850); color: var(--n-50);
  border-color: var(--n-600);
}
.btn-danger {
  background: rgba(248, 113, 113, 0.15); color: var(--bad);
  border: 1px solid rgba(248, 113, 113, 0.3);
}
.btn-danger:hover { background: rgba(248, 113, 113, 0.25); color: var(--bad); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--n-900);
  border: 1px solid var(--n-700);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  position: relative;
}
.card-raised { background: var(--n-850); }
.card-clickable { cursor: pointer; }
.card-clickable:hover { border-color: var(--n-600); box-shadow: var(--shadow-md); }

.grid { display: grid; gap: 10px; }
.product-grid { grid-template-columns: repeat(4, 1fr); }
/* Five-column desktop grid with explicit responsive breakpoints, NOT
   auto-fit. Was previously `auto-fit, minmax(190px, 1fr)` — on wide
   monitors that packed 7+ tiles per row, which broke the carefully-
   planned 2-row pattern (full-height tiles span 2 rows; compact tiles
   stack 2 per column). With a fixed 5 columns the pattern always
   resolves predictably:
     • Plant Section Status: 1 full + 4 compact → 5 cols × 2 rows
     • Butter Line:          1 full + 8 compact → 5 cols × 2 rows
     • Powder Lines:         3 full + 4 compact → 5 cols × 2 rows
   At narrower viewports the column count steps down explicitly via the
   media queries below so the same content shrinks proportionally
   instead of reflowing into a different number of cells.

   `grid-auto-flow: dense` lets the engine backfill empty cells with
   subsequent compact tiles when a full-height tile takes both rows. */
.section-grid {
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-auto-flow: dense;
}
/* Step down responsively. Each break point keeps the same compact /
   full distinction; only the column count changes. */
@media (max-width: 1500px) { .section-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .section-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .section-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .section-grid { grid-template-columns: 1fr; } }
/* The span-2 / span-1 rule is for the Overview grid only. Dedicated-page
   summary bands (.summary-band) have their own dense layout and should
   keep their natural single-row height — the `:not(.summary-band)`
   guard prevents Butter/Powder/Receiving summary tiles from inflating
   to 2 grid-row heights. */
.section-grid:not(.summary-band) > .section-card         { grid-row: span 2; }
.section-grid:not(.summary-band) > .section-card-compact { grid-row: span 1; min-height: 64px; }
.section-card-compact { padding: 8px 12px; }
/* Inside a compact card the big number is closer to the header — drop
   the flex-stretch on `.section-big` so the value doesn't get pulled to
   the bottom of a half-height card. */
.section-card-compact .section-big   { flex: none; padding: 0;
                                        font-size: var(--fs-2xl); }
.section-card-compact .section-sub   { margin-top: 2px; }
.silos-grid   { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* 4-column variant of the summary band, for pages that publish exactly
   four headline tiles (e.g. /silos: Total / Avg / High / Low). Stretches
   the tiles edge-to-edge instead of leaving a fifth empty cell from the
   default 5-column .section-grid. Same responsive step-down as the
   parent. */
.section-grid.section-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .section-grid.section-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .section-grid.section-grid-4 { grid-template-columns: 1fr; } }

@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  /* .section-grid responsive cascade is now declared at its own
     definition (5/4/3/2/1 stepdown); only product-grid collapses here. */
  .product-grid { grid-template-columns: 1fr; }
}

/* ── Product totals (Overview) ───────────────────────────────────────────── */
.product-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px 8px;
  text-align: center;
  border-top: 3px solid var(--accent);
}
.product-card header {
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.product-card .product-name {
  /* Larger, more prominent title (was --fs-xs = 11px). */
  font-size: var(--fs-lg); font-weight: 700;
  color: var(--accent); letter-spacing: 1.6px; text-transform: uppercase;
}
.product-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
}
.product-value {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
}
.product-value-num {
  font-size: var(--fs-2xl); font-weight: 700; color: var(--n-50);
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.product-value-unit { font-size: var(--fs-sm); color: var(--n-500); }
.product-foot {
  font-size: var(--fs-xs); color: var(--n-500);
  display: flex; align-items: center; justify-content: center; gap: 4px;
}

/* ── Section status (Overview) ───────────────────────────────────────────── */
.section-card {
  display: flex; flex-direction: column;
  padding: 10px 12px;
  text-decoration: none; color: inherit;
  transition: all var(--t-fast);
  min-height: 110px;
}
.section-card:hover {
  text-decoration: none; border-color: var(--cdi-gold);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.section-card header {
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--cdi-gold); margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.8px;
}
.section-card.silos     header { color: var(--info); }
.section-card.utilities header { color: var(--cdi-gold); }
.section-card.butter    header { color: #FFCC80; }
.section-card.powder    header { color: #FFB300; }
.section-big {
  font-size: var(--fs-3xl); font-weight: 700; line-height: 1.0;
  color: var(--n-50); text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 4px 0;
}
.section-sub {
  font-size: var(--fs-xs); color: var(--n-400); text-align: center;
  margin-top: 4px;
}

/* Compact variant — used as a per-page summary band above the main content.
   Overview keeps the larger default. */
/* Summary band tiles sit in the parent .section-grid's 5-column track by
   default, which leaves whitespace on the right when the band has fewer
   than 5 tiles (Receiving has 3, Powder has 4). Override with auto-fit
   so the tiles fill the full width and shrink gracefully on narrow
   screens — each tile keeps a 240 px minimum so it never goes unreadable. */
.summary-band {
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (max-width: 1500px) { .summary-band { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
@media (max-width: 1100px) { .summary-band { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (max-width: 800px)  { .summary-band { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
@media (max-width: 540px)  { .summary-band { grid-template-columns: 1fr; } }
.summary-band .section-card     {
  min-height: 0; padding: 8px 12px;
  display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: auto auto; column-gap: 12px; row-gap: 0;
  align-items: baseline;
}
.summary-band .section-card header {
  font-size: var(--fs-xs); margin: 0; letter-spacing: 0.6px;
  grid-column: 1; grid-row: 1; align-self: center;
}
.summary-band .section-big      {
  font-size: var(--fs-xl); flex: none;
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  display: block; text-align: right; line-height: 1;
}
.summary-band .section-sub      {
  font-size: var(--fs-xs); margin: 0; text-align: left;
  grid-column: 1; grid-row: 2;
}

/* ── Admin log feed ────────────────────────────────────────────────────── */
.log-feed {
  font-family: inherit;
  font-size: 12px;
  background: var(--n-900);
  border: 1px solid var(--n-800);
  border-radius: 6px;
  max-height: 540px;
  overflow-y: auto;
  padding: 4px 0;
}
.log-row {
  display: grid;
  grid-template-columns: 70px 70px 160px 1fr;
  gap: 8px;
  padding: 3px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: pre-wrap;
  word-break: break-word;
  align-items: baseline;
}
.log-row:last-child { border-bottom: 0; }
.log-ts     { color: var(--n-500); font-variant-numeric: tabular-nums; }
.log-level  { font-weight: 700; letter-spacing: 0.5px; }
.log-logger { color: var(--n-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-msg    { color: var(--n-100); }
.log-debug    .log-level { color: var(--n-500); }
.log-info     .log-level { color: #6BA8FF; }
.log-warning  .log-level { color: #FFB300; }
.log-warning  .log-msg   { color: #FFD27A; }
.log-error    .log-level { color: #F87171; }
.log-error    .log-msg   { color: #FCA5A5; }
.log-critical .log-level,
.log-critical .log-msg   { color: #F87171; font-weight: 700; }
[data-theme="light"] .log-feed {
  background: #F8FAFC;
  border-color: var(--n-800);
}
[data-theme="light"] .log-row {
  border-bottom-color: rgba(0,0,0,0.04);
}
[data-theme="light"] .log-msg     { color: var(--n-50); }
[data-theme="light"] .log-logger  { color: var(--n-500); }
[data-theme="light"] .log-info    .log-level { color: #1D4ED8; }
[data-theme="light"] .log-warning .log-msg   { color: #92400E; }
[data-theme="light"] .log-error   .log-msg   { color: #991B1B; }

/* ── Time-in-status tile (Butter + Powder history drawers) ───────────────── */
/* Tile colors come in as inline CSS variables on each instance:
     --state-c       : full-opacity hex (e.g. #10B981) — label + left bar
     --state-bg      : rgba tint for background (computed by DASH.stateColorRgba)
     --state-border  : rgba tint for the outline
     --state-label-c : darker-of-state color used in light theme so label
                       stays legible on the lighter background tint.
   Avoiding CSS color-mix() so this works on every webkit build that ships
   with the plant-floor browsers. */
.tis-tile {
  padding: 10px 12px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--state-border, rgba(136,136,136,0.30));
  border-left: 6px solid var(--state-c, #888);
  background: var(--state-bg, rgba(136,136,136,0.10));
  transition: transform var(--t-fast);
  min-height: 70px;
}
.tis-tile:hover { transform: translateY(-1px); }
.tis-tile-label {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--state-c, var(--n-300));
  margin-bottom: 4px;
}
.tis-tile-duration {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--n-50);
  font-variant-numeric: tabular-nums;
}
.tis-tile-pct {
  font-size: 10px;
  color: var(--n-400);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
[data-theme="light"] .tis-tile-label    { color: var(--state-label-c, var(--state-c, var(--n-100))); }
[data-theme="light"] .tis-tile-duration { color: var(--n-50); }
[data-theme="light"] .tis-tile-pct      { color: var(--n-500); }

/* ── Report catalog tile (Reports landing grid) ──────────────────────────── */
.report-tile:hover {
  transform: translateY(-2px);
  border-color: var(--cdi-gold);
  box-shadow: var(--shadow-md);
}
.report-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--n-850); border-radius: 8px;
}
[data-theme="light"] .report-tile-icon { background: #F1F5F9; }

/* ── Themed confirm modal (window.appConfirm) ──────────────────────────── */
.app-confirm-root {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: appConfirmIn 120ms ease-out;
}
@keyframes appConfirmIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.app-confirm-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 18, 0.55);
  backdrop-filter: blur(2px);
}
.app-confirm-card {
  position: relative;
  background: var(--n-900); color: var(--n-50);
  border: 1px solid var(--n-700); border-radius: 12px;
  min-width: 320px; max-width: 480px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
  overflow: hidden;
}
.app-confirm-head {
  padding: 16px 20px 0 20px;
}
.app-confirm-head h3 {
  margin: 0; font-size: var(--fs-lg); font-weight: 700;
  color: var(--cdi-gold);
}
.app-confirm-body {
  padding: 12px 20px 18px 20px;
  font-size: var(--fs-base); line-height: 1.5;
  color: var(--n-200);
  white-space: pre-wrap;
}
.app-confirm-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px 20px;
  background: var(--n-850); border-top: 1px solid var(--n-800);
}
[data-theme="light"] .app-confirm-card {
  background: #FFFFFF; color: var(--n-50);
  border-color: var(--n-800);
}
[data-theme="light"] .app-confirm-body { color: var(--n-100); }
[data-theme="light"] .app-confirm-foot { background: #F1F5F9; border-top-color: #E2E8F0; }
.benhill-strip {
  display: flex; flex-wrap: wrap; gap: 3px; justify-content: center;
  margin-top: 6px;
}
.benhill-pip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 700; color: #0F1316;
  transition: transform var(--t-fast);
}
.benhill-pip:hover { transform: scale(1.15); cursor: default; }
.benhill-pip.on      { background: var(--ok); }
.benhill-pip.off     { background: var(--bad); }
.benhill-pip.pending { background: var(--n-600); }   /* awaiting PLC tag */

/* ── Silo cards (Silos & Tanks) ──────────────────────────────────────────── */
/* Sized to match the eq-card on Butter / Powder / Receiving so every
   operator page renders tiles at the same scale. Knobs (graphic, font
   sizes, meta row spacing) all stepped down one notch from their
   pre-v2.8 values. */
.silo-card { padding: 10px 12px; }
.silo-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.silo-tag { font-size: var(--fs-base); font-weight: 700; color: var(--cdi-gold); }
.silo-plc { font-size: var(--fs-xs); color: var(--n-500); }
.silo-body { display: flex; align-items: center; gap: 10px; }
.silo-graphic { width: 60px; height: 92px; flex-shrink: 0; }
.silo-stats   { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.silo-lbs-num { font-size: var(--fs-xl); font-weight: 700; color: var(--n-50);
                font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.silo-lbs-unit { font-size: var(--fs-xs); color: var(--n-500); margin-left: 3px; }
/* Fill-direction arrow next to the tank lbs value (v2.9.0608.8). Colour is
   set inline per-direction (green up / blue down / grey flat). */
.silo-trend   { margin-left: 6px; font-size: 13px; font-weight: 700;
                line-height: 1; cursor: default; }
.silo-pct     { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.silo-status  { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.7px; }

/* Silo cards honour --eq-accent the same way eq-cards do
   (v2.9.0524.5) so admin threshold edits land on the border + pct text. */
.silo-ok       .silo-pct, .silo-ok       .silo-status { color: var(--eq-accent, var(--n-500)); }
.silo-low      .silo-pct, .silo-low      .silo-status { color: var(--warn); }
/* EMPTY is informational, not alarming — distinct from CRITICAL which signals
   overflow risk. Use neutral grey so operators can scan a section and only
   notice red where it actually matters. */
.silo-empty    .silo-pct, .silo-empty    .silo-status { color: var(--eq-accent, var(--n-500)); }
.silo-high     .silo-pct, .silo-high     .silo-status { color: var(--eq-accent, #FFCC00); }
.silo-critical .silo-pct, .silo-critical .silo-status { color: var(--eq-accent, var(--bad)); }
.silo-unknown  .silo-pct, .silo-unknown  .silo-status { color: var(--n-500); }

/* Colored left-edge accent — mirrors the section-card treatment on the
   butter/powder pages so the same color you see in the numeric value is
   echoed at the tile's left border. Lets operators scan a wall of tanks
   and pick out the in-distress ones at a glance. */
.silo-card { border-left: 4px solid var(--n-700); }
.silo-card.silo-ok       { border-left-color: var(--eq-accent, var(--ok));   }
.silo-card.silo-low      { border-left-color: var(--eq-accent, var(--warn));  }
.silo-card.silo-empty    { border-left-color: var(--eq-accent, var(--n-600)); }
.silo-card.silo-high     { border-left-color: var(--eq-accent, #FFCC00);      }
.silo-card.silo-critical { border-left-color: var(--eq-accent, var(--bad));   }
.silo-card.silo-unknown  { border-left-color: var(--eq-accent, var(--n-600)); }

/* Product-type chip shown under the status label on each tank card.
   Color-coded per product so operators can scan a section and spot
   off-pattern tanks (e.g. an RT holding cream instead of raw milk) at
   a glance. Falls back to a neutral chip if the product isn't one of
   the known ones. */
.silo-product {
  margin-top: 2px;
  display: inline-block; align-self: flex-start;
  padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--n-100);
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="light"] .silo-product {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.15);
  color: var(--n-700);
}
/* Per-product color coding. Slugs are computed in transform() —
   lowercase, non-alphanumeric collapsed to hyphens. */
.silo-product.silo-product-raw-milk {
  background: rgba(100,181,246,0.18); border-color: rgba(100,181,246,0.55);
  color: #1e88e5;
}
.silo-product.silo-product-cream-42 {
  background: rgba(255,196,0,0.20); border-color: rgba(255,196,0,0.60);
  color: #b07700;
}
.silo-product.silo-product-buttermilk {
  background: rgba(245,245,220,0.25); border-color: rgba(200,180,140,0.60);
  color: #8a7430;
}
.silo-product.silo-product-cond-skim-low-heat-38,
.silo-product.silo-product-cond-skim-high-heat-38,
.silo-product.silo-product-cond-skim-low-heat-33,
.silo-product.silo-product-whole-milk-condensed {
  background: rgba(76,175,80,0.18); border-color: rgba(76,175,80,0.55);
  color: #1b5e20;
}
[data-theme="light"] .silo-product.silo-product-raw-milk         { color: #0d47a1; }
[data-theme="light"] .silo-product.silo-product-cream-42          { color: #8a5d00; }
[data-theme="light"] .silo-product.silo-product-buttermilk        { color: #5a4d20; }
[data-theme="light"] .silo-product[class*="silo-product-cond-"],
[data-theme="light"] .silo-product.silo-product-whole-milk-condensed { color: #0d3d10; }

/* Per-silo operational placeholders: Temperature, Time-at-Temp, Time-in-Silo.
   Renders below the existing stats inside silo-card. Once real PLC tags
   arrive, JS will replace the placeholder values + apply silo-meta-good /
   silo-meta-warn based on the target ranges noted in each row's title. */
.silo-meta {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--n-700);
  display: flex; flex-direction: column; gap: 1px;
  font-size: 10px;
}
[data-theme="light"] .silo-meta { border-top-color: rgba(0,0,0,0.08); }
.silo-meta-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 1px 0;
}
.silo-meta-lbl {
  color: var(--n-500); font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; font-size: 9px;
}
.silo-meta-val { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px; }
.silo-meta-pending .silo-meta-val { color: var(--n-500); }
.silo-meta-good   .silo-meta-val { color: #1b5e20; }
.silo-meta-warn   .silo-meta-val { color: var(--warn); }
.silo-meta-bad    .silo-meta-val { color: var(--bad); }
[data-theme="light"] .silo-meta-good .silo-meta-val { color: #1b5e20; }

.silo-section-block { margin-bottom: 30px; }
.silo-section-block .section-meta {
  font-size: var(--fs-xs); color: var(--n-500); margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.empty {
  grid-column: 1 / -1;
  text-align: center; padding: 40px;
  color: var(--n-500); font-style: italic;
}

/* ── Equipment cards (Butter / Powder / Utilities) ───────────────────────── */
.eq-grid       { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.eq-grid-tight { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.eq-card {
  display: flex; flex-direction: column;
  padding: 12px 14px; min-height: 150px;
  border-left: 3px solid var(--n-700);
  transition: all var(--t-fast);
  cursor: default;
}
.eq-card-compact { min-height: 100px; }
.eq-card header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.eq-label { font-size: var(--fs-base); font-weight: 700; color: var(--cdi-gold); }
.eq-pos   { font-size: var(--fs-xs); color: var(--n-500); }
.eq-status {
  font-size: var(--fs-xl); font-weight: 700;
  text-align: center; letter-spacing: 0.5px;
}
.eq-card-compact .eq-status { font-size: var(--fs-md); }

/* Tote (PDR) — status-only tile (no Run Rate, no Flow). With those
   rows hidden the card has a single value to display, so center it
   vertically and bump the font size so the tile reads at a glance
   from across the room (v2.9.0528.9). The flex: 1 + align-self push
   the .eq-status row into the remaining vertical space, then the
   larger font fills the void. */
.eq-card-tote .eq-status {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--fs-xl) * 2);
  line-height: 1;
  margin: 8px 0;
}
.eq-metrics {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px;
  margin: 10px 0 6px;
  font-size: var(--fs-xs);
}
.eq-metric-label { color: var(--n-500); }
.eq-metric-value {
  color: var(--n-100); font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
}
.eq-foot {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--fs-xs); color: var(--n-500);
  margin-top: auto; padding-top: 6px;
  border-top: 1px solid var(--n-800);
}
.eq-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.65; }
.eq-age { flex-shrink: 0; }

/* Two-line status footer: "In Status" + "Last Comm." rows, styled like the
   silo-meta block on the Silos page. The "Last Comm." value colour is set
   inline by DASH.statusAgeColor(); "In Status" inherits default. A "—"
   placeholder shows when the PLC isn't yet sending that signal. */
.eq-statmeta {
  margin-top: auto; padding-top: 6px;
  border-top: 1px solid var(--n-800);
  display: flex; flex-direction: column; gap: 1px;
}
[data-theme="light"] .eq-statmeta { border-top-color: rgba(0,0,0,0.08); }
.eq-statmeta-row {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.eq-statmeta-lbl {
  color: var(--n-500); font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; font-size: 9px; flex-shrink: 0;
}
.eq-statmeta-val {
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-statmeta-val.is-pending { color: var(--n-500); font-weight: 600; }

/* Per-equipment Run Rate row. Sits between the status text and the
   bottom tag/age footer. Bold value when a rate is published; faded
   "— awaiting tag" when no rate tag exists yet. */
.eq-runrate {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--n-700);
  font-size: var(--fs-xs);
}
[data-theme="light"] .eq-runrate { border-top-color: rgba(0,0,0,0.10); }
.eq-runrate-lbl {
  color: var(--n-500); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 700; font-size: 10px;
}
.eq-runrate-val {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--n-100);
}
[data-theme="light"] .eq-runrate-val { color: var(--n-700); }
.eq-runrate-pending {
  color: var(--n-500); font-weight: 600;
}
.eq-runrate-pending small {
  font-size: 9px; font-weight: 600; opacity: 0.7;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-left: 4px;
}

/* Plant-6 process-flow rate (PPH = pounds per hour). Same row layout
   as .eq-runrate so the two rows stack cleanly on the same card. PPH
   value uses tabular-nums + the brand gold so it stands out from the
   Run Rate row above (which uses the regular n-100 text color). */
.eq-pph {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-top: 4px;
  font-size: var(--fs-xs);
}
.eq-pph-lbl {
  color: var(--n-500); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 700; font-size: 10px;
}
.eq-pph-val {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--cdi-gold);
}
[data-theme="light"] .eq-pph-val { color: #B45309; }

/* Secondary flow row (e.g. EVP discharge) — same row layout but the
   value uses a slightly muted gold so the Feed row above reads as the
   primary metric. */
.eq-pph-secondary .eq-pph-val { opacity: 0.85; }

/* ── EVP card expansion (v2.9.0527.1) ─────────────────────────────────
   EVP cards carry five additional rows (Temperature, MVR Discharge
   Flow, MVR Density %, TVR Discharge Flow, TVR Density %) below the
   standard Status / Run Rate / Flow / Discharge rows. Result is a
   taller card that visually anchors the start of each P6 / P7 / P8
   line section, with the smaller SEP / HPP / DRY cards wrapping to its
   right at standard height.

   `grid-row: span 2` lets the EVP occupy two grid rows so two smaller
   cards can stack vertically alongside it without forcing the entire
   row to the EVP's height. `order: -1` floats the EVP visually to the
   start of the section regardless of its position in the data array
   (which mirrors process-flow order: SEP → EVP → HPP → DRY). */
.eq-card-evp {
  grid-row: span 2;
  order: -1;
}
.eq-card-evp .eq-evp-rows {
  border-top: 1px dashed var(--border-muted, #d8d8d8);
  margin-top: 8px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Tighter spacing on the EVP-specific rows so the card doesn't sprawl. */
.eq-card-evp .eq-evp-rows .eq-pph { padding: 2px 0; }

/* ── Avapac card (v2.9.0527.1) ────────────────────────────────────────
   PPM (lbs/min) renders as a regular .eq-pph row above the (shared)
   PPH row. No layout override — Avapacs stay at standard card height. */
.eq-card-avapac .eq-runrate-val { font-variant-numeric: tabular-nums; }

/* Section-level total PPH chip — sits inline with the section title on
   the Powder page. Gold pill against the page background so the
   running total reads at a glance. */
.section-flow-chip {
  display: inline-block; margin-left: 12px;
  background: rgba(255, 193, 7, 0.18);
  border: 1px solid rgba(255, 193, 7, 0.45);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: var(--fs-xs);
  font-weight: 700; color: var(--cdi-gold);
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .section-flow-chip {
  background: rgba(255, 193, 7, 0.22);
  border-color: rgba(255, 152, 0, 0.5);
  color: #B45309;
}

/* Per-card accent colour driven by the admin-managed thresholds
   (v2.9.0524.5). Templates set `--eq-accent: <hex>` inline via
   :style on each article from DASH.styleFor("cluster", value). The
   fallback keeps the legacy eq-on / eq-cip / eq-off appearance
   when no inline style is supplied (e.g. older templates, kiosk
   widgets that haven't been migrated yet). */
.eq-on       { border-left-color: var(--eq-accent, var(--ok)); }
.eq-on       .eq-status { color: var(--eq-accent, var(--ok)); }
.eq-off      { border-left-color: var(--eq-accent, var(--bad)); }
.eq-off      .eq-status { color: var(--eq-accent, var(--bad)); }
.eq-cip      { border-left-color: var(--eq-accent, var(--warn)); }
.eq-cip      .eq-status { color: var(--eq-accent, var(--warn)); }
.eq-unknown  { border-left-color: var(--eq-accent, var(--n-500)); }
.eq-unknown  .eq-status { color: var(--eq-accent, var(--n-500)); }
.eq-missing  { border-left-color: var(--n-700); opacity: 0.5; }
.eq-missing  .eq-status { color: var(--n-500); font-size: var(--fs-xs); letter-spacing: 0.8px; }

/* Aggregate rollup tile (e.g. Churn Combined on /butter) — distinct
   gold left-edge and gold label so it visually reads as "this is the
   total of the cards next to it", not just another piece of equipment.
   Stacks on top of the eq-on/eq-missing colour, so both selectors apply. */
.eq-aggregate            { border-left-color: var(--cdi-gold) !important; }
.eq-aggregate .eq-status { color: var(--cdi-gold); }

.eq-clickable { cursor: pointer; }
.eq-clickable:hover {
  border-color: var(--n-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.eq-clickable:hover .eq-card-history-hint { opacity: 1; }
.eq-card-history-hint {
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; color: var(--n-500);
  opacity: 0; transition: opacity var(--t-fast);
}

/* ── Power section (Utilities) ───────────────────────────────────────────── */
.power-row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
}
@media (max-width: 900px) { .power-row { grid-template-columns: 1fr; } }
.power-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 22px; text-align: center;
  border-top: 3px solid var(--warn);
}
.power-num  { font-size: var(--fs-5xl); font-weight: 700; line-height: 1;
              font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.power-unit { font-size: var(--fs-md); color: var(--n-500); margin-top: 4px; font-weight: 600; }
.power-sub  { font-size: var(--fs-xs); color: var(--n-500); margin-top: 14px; }
.power-ok       .power-num { color: var(--ok); }
.power-warn     .power-num { color: var(--warn); }
.power-high     .power-num { color: #FF9800; }
.power-critical .power-num { color: var(--bad); }
.power-unknown  .power-num { color: var(--n-500); }

.power-spark { display: flex; flex-direction: column; padding: 14px; }
.spark-head  {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--n-500); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 8px;
}
.spark-min-max { color: var(--n-400); font-variant-numeric: tabular-nums; }
.spark-chart   { flex: 1; min-height: 140px; }

/* Grid-Power chart range selector — small segmented pills in the sparkline
   header. Active range gets the CDI gold accent. */
.spark-range { display: flex; gap: 2px; flex-wrap: wrap; }
.spark-range-btn {
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; cursor: pointer;
  padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--n-700); background: transparent; color: var(--n-400);
  line-height: 1.4;
}
.spark-range-btn:hover { border-color: var(--cdi-gold); color: var(--n-200); }
.spark-range-btn.is-active {
  background: var(--cdi-gold); border-color: var(--cdi-gold); color: #1a1a1a;
}
[data-theme="light"] .spark-range-btn { color: var(--n-500); border-color: var(--n-700); }
[data-theme="light"] .spark-range-btn.is-active { color: #1a1a1a; }

/* ── Receiving bays ──────────────────────────────────────────────────────── */
.bay-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.bay-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 12px;
  border-top: 3px solid var(--info);
  text-align: center;
}
.bay-num   { font-size: var(--fs-md); font-weight: 700; color: var(--info); }
.bay-icon  {
  width: 72px; height: 72px; margin: 12px 0;
  background: rgba(96, 165, 250, 0.1); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--info);
  /* Truck emoji is the visual; size it so it visually fills the circle.
     Line-height matched to the icon size keeps the glyph vertically
     centered without ascender/descender padding. */
  font-size: 56px;
  line-height: 1;
}
.bay-status {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.9px;
  color: var(--warn); line-height: 1.4;
}
/* "Time in current status" row on each bay card — small label above, larger
   tabular-numeric value below. Matches the BH eq-card metric pattern. */
.bay-tis {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 10px; gap: 2px;
}
.bay-tis-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--n-500);
}
.bay-tis-val {
  font-size: var(--fs-md); font-weight: 700; color: var(--n-200);
  font-variant-numeric: tabular-nums;
}
.bay-foot  { font-size: var(--fs-xs); color: var(--n-500); margin-top: 10px; }

/* Live-state coloring for receiving bays. Pending = neutral (default);
   on = green; off = red. Plus a colored left-edge accent (4 px) to match
   the silo / butter / powder tile treatment so a wall of bays is easy
   to scan at a glance. */
.bay-card { border-left: 4px solid var(--n-700); }
/* Bay tiles use the same --eq-accent pattern as eq-card so admin
   thresholds on receiving.bays drive the colour (v2.9.0524.5). */
.bay-on  { border-top-color: var(--eq-accent, var(--ok));  border-left-color: var(--eq-accent, var(--ok)); }
.bay-on  .bay-status { color: var(--eq-accent, var(--ok)); }
.bay-on  .bay-icon   { background: rgba(76, 175, 80, 0.15); color: var(--eq-accent, var(--ok)); }
.bay-off { border-top-color: var(--eq-accent, var(--bad)); border-left-color: var(--eq-accent, var(--bad)); }
.bay-off .bay-status { color: var(--eq-accent, var(--bad)); }
.bay-off .bay-icon   { background: rgba(204, 0, 0, 0.10); color: var(--eq-accent, var(--bad)); }
.bay-pending { border-top-color: var(--n-600); border-left-color: var(--n-600); }

.rt-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rt-card { padding: 14px; border-left: 3px solid var(--n-700); }
.rt-card header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.rt-tag  { font-size: var(--fs-base); font-weight: 700; color: var(--cdi-gold); }
.rt-plc  { font-size: var(--fs-xs); color: var(--n-500); }
.rt-body { display: flex; gap: 14px; align-items: stretch; height: 100px; }
.rt-bar  {
  width: 30px; background: rgba(255,255,255,0.03);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
}
.rt-bar-fill { width: 100%; transition: height 0.4s ease, background var(--t-fast); }
.rt-stats   { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.rt-lbs     { font-size: var(--fs-xl); font-weight: 700; color: var(--n-50); line-height: 1;
              font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rt-unit    { font-size: var(--fs-xs); color: var(--n-500); margin-left: 4px; font-weight: 500; }
.rt-pct     { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-label   { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.7px; }
.rt-ok       { border-left-color: var(--n-500); }
.rt-ok       .rt-pct, .rt-ok       .rt-label { color: var(--n-500); }
.rt-low      { border-left-color: var(--warn); }
.rt-low      .rt-pct, .rt-low      .rt-label { color: var(--warn); }
.rt-empty    { border-left-color: var(--bad); }
.rt-empty    .rt-pct, .rt-empty    .rt-label { color: var(--bad); }
.rt-high     { border-left-color: #FFCC00; }
.rt-high     .rt-pct, .rt-high     .rt-label { color: #FFCC00; }
.rt-critical { border-left-color: var(--bad); }
.rt-critical .rt-pct, .rt-critical .rt-label { color: var(--bad); }

/* ── Trends ──────────────────────────────────────────────────────────────── */
.trends-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: flex-start;
}
@media (max-width: 1100px) {
  .trends-layout { grid-template-columns: 1fr; }
}

.trends-sidebar {
  position: sticky; top: 76px;
  max-height: calc(100vh - 100px);
  display: flex; flex-direction: column;
  padding: 14px;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .trends-sidebar { position: relative; top: 0; max-height: none; }
}
.trends-sidebar-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.trends-sidebar-head h3 {
  font-size: var(--fs-md); color: var(--n-100);
  display: flex; align-items: center; gap: 6px;
}
.trends-selected-count {
  font-size: var(--fs-xs); color: var(--n-500);
  background: var(--n-850); border-radius: 999px;
  padding: 2px 8px; font-weight: 600;
}
.trends-search {
  background: var(--n-950); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: var(--fs-sm); width: 100%;
  margin-bottom: 8px; font-family: inherit;
}
.trends-search:focus { outline: none; border-color: var(--cdi-gold); }

.trends-sidebar-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--n-800);
}
.btn-sm { padding: 5px 9px; font-size: var(--fs-xs); }

.trends-groups {
  flex: 1; overflow-y: auto;
  margin-right: -8px; padding-right: 8px;  /* breathing room for scrollbar */
}
.trends-group { margin-bottom: 6px; }
.trends-group-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 4px 6px 8px; cursor: pointer;
  user-select: none;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
  border-left: 3px solid transparent;
}
.trends-group-head:hover { background: var(--n-850); }
/* Active-selection accent on the group container. Visible whether the
   group is open or collapsed so operators can spot which categories
   have selections at a glance. */
.trends-group.has-selection > .trends-group-head {
  border-left-color: var(--cdi-green);
  background: rgba(76,175,80,0.06);
}
.trends-group-name  { flex: 1; font-size: var(--fs-sm); font-weight: 600; color: var(--n-100); }
.trends-group-selected {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  color: #fff;
  background: var(--cdi-green);
  padding: 1px 7px; border-radius: 999px;
  white-space: nowrap;
}
[data-theme="light"] .trends-group-selected {
  background: var(--cdi-green); color: #fff;
}
.trends-group-count {
  font-size: 10px; color: var(--n-500);
  background: var(--n-800); padding: 1px 6px; border-radius: 999px;
}
.trends-group-all {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--cdi-green); background: transparent;
  border: 1px solid var(--cdi-green); border-radius: 999px;
  padding: 1px 8px; cursor: pointer; transition: all var(--t-fast);
  margin-right: 2px;
}
.trends-group-all:hover { background: var(--cdi-green); color: #fff; }
.trends-group-caret { color: var(--n-500); font-size: 12px; transition: transform var(--t-fast); }
.trends-group:not(.open) .trends-group-caret { transform: rotate(-90deg); }
.trends-group-list {
  list-style: none; margin: 0; padding: 2px 0 4px 4px;
}

.trends-tag-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--r-sm);
  cursor: pointer; transition: background var(--t-fast);
  font-size: var(--fs-sm);
}
.trends-tag-row:hover { background: var(--n-850); }
.trends-tag-row.selected {
  background: rgba(255, 193, 7, 0.08);
}
.trends-tag-row input[type="checkbox"] {
  margin: 0; cursor: pointer; accent-color: var(--cdi-gold);
}
.trends-tag-swatch {
  width: 10px; height: 10px; border-radius: 3px;
  border: 1px solid var(--n-700);
  flex-shrink: 0; transition: all var(--t-fast);
}
.trends-tag-label { flex: 1; color: var(--n-300); }
/* Attribute badge — small pill noting which variable of the equipment
   is being plotted (Pounds, Run Rate, Power Import, etc.). Today most
   equipment publishes a single graphable attribute, but the badge makes
   the multi-attribute concept visible so when extra attributes
   (Temperature, etc.) appear they fit visually as additional rows. */
.trends-tag-attr {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 6px; border-radius: 8px;
  background: rgba(76,175,80,0.10);
  border: 1px solid rgba(76,175,80,0.35);
  color: #4caf50;
  white-space: nowrap;
}
[data-theme="light"] .trends-tag-attr {
  background: rgba(27,94,32,0.08);
  border-color: rgba(27,94,32,0.30);
  color: #1b5e20;
}
.trends-tag-unit  {
  font-size: 10px; color: var(--n-500); font-style: italic;
  margin-left: 6px;
}

/* Main panel */
.trends-main { display: flex; flex-direction: column; gap: 14px; }

.trends-toolbar {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 14px 16px;
}
.trends-toolbar-section {
  display: flex; flex-direction: column; gap: 4px;
}
.trends-toolbar-section.trends-toolbar-actions {
  margin-left: auto; flex-direction: row; align-items: center; gap: 12px;
}
.trends-toolbar-label {
  font-size: 10px; color: var(--n-500);
  text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700;
}
.trends-toolbar-toggle {
  font-size: var(--fs-sm); color: var(--n-400);
  display: flex; align-items: center; gap: 5px; cursor: pointer;
}
.trends-toolbar-toggle input { accent-color: var(--cdi-gold); }
.trends-bucket {
  background: var(--n-950); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 6px 10px; font-size: var(--fs-sm); min-width: 110px;
  font-family: inherit;
}
.btn-disabled { opacity: 0.4; pointer-events: none; }

/* Pill group (time-range, chart-type) */
.pill-group { display: flex; gap: 4px; }
.pill {
  background: transparent; border: 1px solid var(--n-700);
  color: var(--n-400); padding: 6px 12px;
  font-size: var(--fs-sm); font-weight: 600;
  border-radius: var(--r-sm); cursor: pointer;
  transition: all var(--t-fast); font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.pill:hover { color: var(--n-100); border-color: var(--n-600); }
.pill.active {
  background: var(--cdi-gold); color: var(--cdi-green);
  border-color: var(--cdi-gold); font-weight: 700;
}
/* Custom pill: faded when inactive, amber when active (user has zoomed). */
.pill-custom.active {
  background: rgba(255, 193, 7, 0.18) !important;
  color: var(--cdi-gold) !important;
  border-color: var(--cdi-gold) !important;
}
[data-theme="light"] .pill-custom.active {
  background: rgba(180, 83, 9, 0.12) !important;
  color: #B45309 !important;
  border-color: #B45309 !important;
}

/* Custom datetime range picker */
.trends-custom-picker {
  padding: 16px;
  border-left: 3px solid var(--cdi-gold);
  animation: picker-in 160ms ease-out;
}
@keyframes picker-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.custom-picker-row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 14px;
}
.custom-picker-field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-xs); color: var(--n-500);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px;
}
.custom-picker-field input {
  background: var(--n-950); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 7px 10px; font-size: var(--fs-base); min-width: 220px;
  font-family: inherit;
}
.custom-picker-field input:focus {
  outline: none; border-color: var(--cdi-gold);
}
.custom-picker-shortcuts {
  display: flex; gap: 4px; padding-bottom: 1px;
}
.custom-picker-actions {
  margin-left: auto; display: flex; gap: 8px;
}
.custom-picker-hint {
  margin: 12px 0 0; font-size: var(--fs-sm); color: var(--n-400);
}
.custom-picker-hint strong { color: var(--cdi-gold); font-variant-numeric: tabular-nums; }
[data-theme="light"] .custom-picker-field input {
  background: #FFFFFF; color: var(--n-50);
}
[data-theme="light"] .custom-picker-field input:focus { border-color: var(--cdi-green); }
[data-theme="light"] .custom-picker-hint strong { color: var(--cdi-green); }
[data-theme="light"] .trends-custom-picker { border-left-color: var(--cdi-green); }

/* Chart */
.trends-chart-wrap  { position: relative; padding: 16px; min-height: 480px; }
.trends-chart       { width: 100%; height: 460px; position: relative; z-index: 1; }
.trends-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--n-500); font-style: italic;
  pointer-events: none;     /* never intercept mouse events */
  text-align: center;
  z-index: 0;
}
.trends-loading {
  position: absolute; top: 16px; right: 20px;
  font-size: var(--fs-xs); color: var(--cdi-gold);
  display: flex; align-items: center; gap: 4px;
  pointer-events: none;     /* never intercept mouse events */
  z-index: 2;
}

/* Stats strip */
.trends-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.trends-stat-card { padding: 12px 14px; }
.trends-stat-card header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.trends-stat-swatch {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.trends-stat-label {
  font-size: var(--fs-sm); font-weight: 700; color: var(--n-100);
  flex: 1;
}
.trends-stat-remove {
  background: transparent; border: none; color: var(--n-500);
  cursor: pointer; padding: 2px; display: flex; align-items: center;
  border-radius: 3px;
}
.trends-stat-remove:hover { color: var(--bad); background: rgba(248,113,113,0.1); }
.trends-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 12px; margin: 6px 0; padding: 0;
}
.trends-stat-grid dt {
  font-size: 10px; color: var(--n-500);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
}
.trends-stat-grid dd {
  margin: 0; font-size: var(--fs-md); font-weight: 700;
  color: var(--n-50); font-variant-numeric: tabular-nums;
  text-align: right;
}
.trends-stat-divider {
  font-size: 10px; color: var(--n-500);
  text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700;
  margin: 10px 0 4px;
  padding-top: 8px; padding-bottom: 2px;
  border-top: 1px solid var(--n-800);
  text-align: center;
}
[data-theme="light"] .trends-stat-divider {
  color: var(--n-500); border-top-color: var(--n-700);
}
.trends-stat-deltas dd { font-size: var(--fs-md); }
.delta-positive { color: var(--ok)      !important; }
.delta-negative { color: var(--bad)     !important; }
.delta-zero     { color: var(--n-500)   !important; }
.trends-stat-foot {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--n-800);
  font-size: 10px; color: var(--n-500);
}
.trends-stat-tag { font-size: 10px; word-break: break-all; }
.trends-stat-unit { font-style: italic; }

/* Light-theme overrides for the new components */
[data-theme="light"] .trends-search {
  background: var(--n-900); color: var(--n-50);
}
[data-theme="light"] .trends-search:focus { border-color: var(--cdi-green); }
[data-theme="light"] .trends-group-head:hover { background: var(--n-850); }
[data-theme="light"] .trends-tag-row:hover { background: var(--n-850); }
[data-theme="light"] .trends-tag-row.selected {
  background: rgba(27, 94, 32, 0.08);
}
[data-theme="light"] .trends-selected-count {
  background: rgba(27, 94, 32, 0.12); color: var(--cdi-green);
}
[data-theme="light"] .trends-group-count {
  background: var(--n-800); color: var(--n-500);
}
[data-theme="light"] .trends-bucket {
  background: var(--n-900); color: var(--n-50);
}
[data-theme="light"] .pill {
  background: #FFFFFF; border-color: var(--n-700); color: var(--n-400);
}
[data-theme="light"] .pill:hover {
  color: var(--cdi-green); border-color: var(--cdi-green);
}
[data-theme="light"] .pill.active {
  background: var(--cdi-green); color: #FFFFFF; border-color: var(--cdi-green);
}
[data-theme="light"] .trends-stat-foot { border-top-color: var(--n-700); }
[data-theme="light"] .trends-loading { color: var(--cdi-green); }

/* ── Reports ─────────────────────────────────────────────────────────────── */
.report-card { padding: 0; overflow: hidden; }
.report-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; gap: 12px;
  border-bottom: 1px solid var(--n-800); flex-wrap: wrap;
}
.report-head .subsection-title { margin: 0; }
.report-head .subsection-title::after { display: none; }
.report-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.report-table th, .report-table td {
  padding: 11px 18px; text-align: left;
  border-bottom: 1px solid var(--n-800);
}
.report-table thead th {
  background: var(--n-850);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--n-500); font-weight: 700;
}
.report-table td.num, .report-table th.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.report-table tr:hover td { background: rgba(255,193,7,0.04); }
.report-empty { text-align: center; padding: 30px; color: var(--n-500); font-style: italic; }

/* Drawer history "WINDOW OPENED" pseudo-row: marks the state the equipment
   was already in at window start. Strong top border + chip so it isn't
   mistaken for an in-window transition. */
.drawer-history-table tbody tr.drawer-history-window-row td {
  background: rgba(255, 193, 7, 0.06);
  border-top: 2px solid var(--cdi-yellow, #FFC107);
  color: var(--n-300);
}
.drawer-history-table tbody tr.drawer-history-window-row:hover td {
  background: rgba(255, 193, 7, 0.10);
}
.drawer-history-window-chip {
  display: inline-block;
  background: var(--cdi-yellow, #FFC107);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 10px;
  vertical-align: middle;
}
[data-theme="light"] .drawer-history-table tbody tr.drawer-history-window-row td {
  background: rgba(255, 193, 7, 0.18);
  color: var(--n-200);
}

/* Compact local-users table: fits inside the narrow Settings card. The
   parent .local-users-scroll allows horizontal scroll if the row still
   exceeds the card width on very small viewports. */
.local-users-table th, .local-users-table td {
  padding: 6px 8px;
  font-size: var(--fs-sm);
}
.local-users-table th { white-space: nowrap; }
.local-users-table td .btn { margin-right: 4px; }
.local-users-table td .btn:last-child { margin-right: 0; }
.local-users-scroll { border: 1px solid var(--n-800); border-radius: var(--r-sm); }
[data-theme="light"] .local-users-scroll { border-color: var(--n-700); }

/* ── Environment strip (always-visible banner in UAT/staging) ─────────── */
.env-strip {
  background: linear-gradient(90deg, #f9a825 0%, #ef6c00 100%);
  color: #1a1a1a;
  text-align: center;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}
.env-strip strong {
  font-weight: 800;
  letter-spacing: 2px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  padding: 1px 8px;
  margin-right: 4px;
  border-radius: 3px;
}

/* ── Environment badge (UAT/staging marker in the brand area) ─────────── */
.env-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  background: #f9a825; color: #1a1a1a;
  border-radius: 4px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(249, 168, 37, 0.25);
}
[data-theme="light"] .env-badge { background: #ef6c00; color: #fff; }

/* ── Audit log event chips ─────────────────────────────────────────────── */
.audit-event-chip {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 3px;
  font-family: inherit;
  border: 1px solid transparent;
}
.audit-event-login-success    { background: rgba(76,175,80,0.18);  color: #81c784; border-color: rgba(76,175,80,0.35); }
.audit-event-login-failure    { background: rgba(204,0,0,0.18);    color: #ef5350; border-color: rgba(204,0,0,0.35); }
.audit-event-login-ratelimited{ background: rgba(255,179,0,0.18);  color: #ffb74d; border-color: rgba(255,179,0,0.35); }
.audit-event-logout           { background: rgba(120,120,120,0.18);color: #bbb;     border-color: rgba(120,120,120,0.35); }
[data-theme="light"] .audit-event-login-success    { background: rgba(27,94,32,0.12);  color: #1b5e20; border-color: rgba(27,94,32,0.4); }
[data-theme="light"] .audit-event-login-failure    { background: rgba(183,28,28,0.10); color: #b71c1c; border-color: rgba(183,28,28,0.4); }
[data-theme="light"] .audit-event-login-ratelimited{ background: rgba(230,138,0,0.12); color: #b06b00; border-color: rgba(230,138,0,0.4); }
[data-theme="light"] .audit-event-logout           { background: rgba(80,80,80,0.10);  color: #555;    border-color: rgba(80,80,80,0.35); }

/* ── Shared tile-drawer container (v2.9.0524.8) ──────────────────────────
   One drawer DOM tree per page (mounted in base.html). Hidden until any
   page calls DASH.openTileDrawer(...), which adds `.open`. */
#tile-drawer-root { display: none; }
#tile-drawer-root.open { display: block; }

/* ── Drawer (used by Butter history + universal tile drawer) ─────────── */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 200; backdrop-filter: blur(4px);
  animation: fadein 0.18s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(640px, 100%);
  background: var(--n-900);
  border-left: 1px solid var(--n-700);
  box-shadow: var(--shadow-lg);
  z-index: 201;
  display: flex; flex-direction: column;
  animation: slidein 0.22s ease;
}
@keyframes slidein { from { transform: translateX(20px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } }
.drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid var(--n-800);
}
.drawer-title {
  font-size: var(--fs-lg); font-weight: 600; color: var(--n-50);
  display: flex; align-items: center; gap: 10px;
}
.drawer-close {
  background: transparent; border: 1px solid var(--n-700);
  color: var(--n-400); width: 32px; height: 32px;
  border-radius: var(--r-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.drawer-close:hover { background: var(--n-850); color: var(--n-50); }
.drawer-body { flex: 1; overflow-y: auto; padding: 22px; }

/* ── Settings page — vertical tab sidebar (v2.9) ─────────────────────────
   Tabs got too crowded across the top once we hit 11 of them and a 12th
   is on the way (Thresholds). Moved to a left-sidebar layout inside the
   /settings page only — main top-nav (Overview / Silos / Receiving /
   etc.) stays unchanged. The sidebar is sticky so it stays visible
   while the right-hand content panel scrolls. */
.settings-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}
.settings-tabs {
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 12px;
  padding: 6px;
  background: var(--n-900);
  border: 1px solid var(--n-700);
  border-radius: 8px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
[data-theme="light"] .settings-tabs {
  background: #fff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.settings-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 10px 12px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--n-400);
  display: flex; align-items: center; gap: 8px;
  font-family: inherit;
  text-align: left;
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.settings-tab:hover {
  color: var(--n-100);
  background: rgba(255,255,255,0.03);
}
[data-theme="light"] .settings-tab:hover { background: rgba(0,0,0,0.04); }
.settings-tab.active {
  color: var(--cdi-gold);
  border-left-color: var(--cdi-gold);
  background: rgba(255,193,7,0.06);
}
[data-theme="light"] .settings-tab.active {
  color: var(--cdi-green);
  border-left-color: var(--cdi-green);
  background: rgba(34,139,34,0.06);
}
.settings-tab svg { opacity: 0.9; flex-shrink: 0; }
.settings-content { min-width: 0; }   /* prevents grid blow-out */

/* Collapse to a stacked single column on narrow viewports — the sidebar
   sits above the content instead of beside it. */
@media (max-width: 900px) {
  .settings-shell { grid-template-columns: 1fr; }
  .settings-tabs {
    position: static; flex-direction: row; flex-wrap: wrap;
    max-height: none; overflow: visible;
  }
  .settings-tab { border-left: none; border-bottom: 3px solid transparent; }
  .settings-tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--cdi-gold);
  }
}

/* ── Threshold editor — v2.9 ───────────────────────────────────────────────
   The threshold editor uses raw <input> elements in a table layout
   (not the .settings-field wrapper). Style them with the same dark
   theme + Inter font as the rest of /settings so they don't fall back
   to Times-New-Roman browser defaults. Scoped to .threshold-editor so
   the styles don't bleed into other settings tabs. */
.threshold-editor h3,
.threshold-editor p,
.threshold-editor label,
.threshold-editor table,
.threshold-editor button {
  font-family: inherit;
}
.threshold-editor table { font-size: var(--fs-sm); }
.threshold-editor th {
  color: var(--n-500);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.6px;
  font-weight: 700;
  text-align: left;
  padding: 6px 4px;
}
.threshold-editor input[type="text"],
.threshold-editor input[type="number"] {
  background: var(--n-950);
  color: var(--n-100);
  border: 1px solid var(--n-700);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  font-size: var(--fs-sm);
  font-family: inherit;
  width: 100%;
  transition: border-color var(--t-fast);
}
.threshold-editor input[type="text"]:focus,
.threshold-editor input[type="number"]:focus {
  outline: none; border-color: var(--cdi-gold);
}
/* Hex string input next to the colour swatch — uses the body font
   (v2.9.0524.5). Smaller size so the 7-char hex still reads tidily
   alongside the wider Label / Match columns. */
.threshold-editor input.thresh-hex {
  font-family: inherit;
  font-size: 11px;
}
/* Native colour-picker — strip the chrome browsers add and make it
   look like a clean swatch tile with the same rounded border the
   inputs use. */
.threshold-editor input[type="color"] {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--n-700);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: var(--n-950);
}
.threshold-editor input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.threshold-editor input[type="color"]::-webkit-color-swatch {
  border: none; border-radius: 3px;
}
.threshold-editor input[type="color"]::-moz-color-swatch {
  border: none; border-radius: 3px;
}
/* Cluster-list nav on the editor's left side — match the settings-tab
   look so the inner cluster picker reads as a continuation of the
   outer settings sidebar, not a different design language. */
.threshold-editor .cluster-list {
  background: var(--n-900);
  border: 1px solid var(--n-700);
  border-radius: 8px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 70vh; overflow-y: auto;
}
.threshold-editor .cluster-unit {
  margin-left: auto;
  font-size: 10px;
  color: var(--n-500);
  font-weight: 600;
}
/* Light-theme overrides — the dark-default inputs above need to flip
   to white backgrounds. NOTE on the colour scale: this project's
   --n-* variables INVERT between themes (so --n-100 is dark on light,
   light on dark). That means `color: var(--n-100)` already does the
   right thing in both themes; we only need to override the *backgrounds*
   and borders for light mode. */
[data-theme="light"] .threshold-editor input[type="text"],
[data-theme="light"] .threshold-editor input[type="number"] {
  background: #fff;
  border-color: rgba(0,0,0,0.18);
}
[data-theme="light"] .threshold-editor input[type="color"] {
  background: #fff;
  border-color: rgba(0,0,0,0.18);
}
[data-theme="light"] .threshold-editor .cluster-list {
  background: #fff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .threshold-editor th { color: var(--n-500); }

/* Preview chips (v2.9.0524.3) — replaces the solid-fill pills with a
   subtle tinted background + coloured dot + theme-aware text. Reads
   as a chip rather than a screaming colour bar. The `--pv-color`
   custom property lets each chip tint its background from the
   per-bucket colour without inlining the rgba conversion. */
.thresh-pv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--pv-color) 50%, transparent);
  background: color-mix(in srgb, var(--pv-color) 14%, transparent);
  border-radius: 14px;
  font-size: 11px; font-weight: 600;
  /* --n-100 inverts between themes — light text on dark, dark text
     on light. Same trick the rest of the project uses. */
  color: var(--n-100);
  letter-spacing: 0.2px;
}
[data-theme="light"] .thresh-pv-chip {
  background: color-mix(in srgb, var(--pv-color) 18%, white);
  border-color: color-mix(in srgb, var(--pv-color) 55%, transparent);
}
.thresh-pv-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}
.thresh-pv-range { font-variant-numeric: tabular-nums; }
.thresh-pv-label {
  font-weight: 700;
  text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px;
  opacity: 0.85;
}
.thresh-pv-label::before { content: "·  "; opacity: 0.5; font-weight: 400; }

/* ── Threshold editor — cluster groups (v2.9.0524.3) ──────────────────
   Cluster list groups (Receiving / Butter / Silos / Powder / Utilities
   / Waste). Each group header is a collapsible header with a chevron
   that rotates when expanded. */
.threshold-editor .cluster-group { margin-bottom: 4px; }
.threshold-editor .cluster-group-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: none;
  padding: 8px 10px 6px;
  color: var(--n-500);
  font-size: 10px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
  text-align: left;
}
.threshold-editor .cluster-group-head:hover {
  color: var(--n-100);
  background: rgba(255,255,255,0.03);
}
[data-theme="light"] .threshold-editor .cluster-group-head:hover {
  color: var(--n-900);
  background: rgba(0,0,0,0.04);
}
.threshold-editor .cluster-group-chev {
  display: inline-block;
  transition: transform var(--t-fast);
  font-size: 10px;
}
.threshold-editor .cluster-group.open .cluster-group-chev { transform: rotate(90deg); }
.threshold-editor .cluster-group-count {
  margin-left: auto; opacity: 0.6;
  font-size: 9px; font-weight: 600;
}
.threshold-editor .cluster-group-items {
  display: none; flex-direction: column; gap: 2px;
  padding-left: 4px;
}
.threshold-editor .cluster-group.open .cluster-group-items { display: flex; }

/* Inline warning banner inside the editor — shown when buckets overlap
   or categorical rules duplicate a match value. Soft amber, never red,
   so it reads as a hint, not an error. */
.threshold-editor .thresh-warn {
  margin: 10px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--gold, #F39C12) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold, #F39C12) 45%, transparent);
  border-left: 3px solid var(--gold, #F39C12);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--n-100);
  display: flex; gap: 8px; align-items: flex-start;
}
[data-theme="light"] .threshold-editor .thresh-warn {
  color: var(--n-800);
  background: #FFF8E1;
  border-color: #F9C46B;
  border-left-color: #B47600;
}
.threshold-editor .thresh-warn strong { color: var(--gold, #B47600); }
.threshold-editor .thresh-warn ul { margin: 4px 0 0 0; padding-left: 18px; }

/* ── Settings page — grids ───────────────────────────────────────────────── */
.settings-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.settings-grid-wide { grid-template-columns: 1fr; }

/* ── General tab layout (v2.9.0529.9) ──────────────────────────────────────
   Display & Plant + Shift schedule share row 1 (50/50); Sibling plants
   (`.general-full`) spans the full width on row 2. */
.settings-grid--general {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.settings-grid--general .general-full { grid-column: 1 / -1; }
.settings-grid--general .settings-card { padding: 14px 18px; }
@media (max-width: 900px) {
  .settings-grid--general { grid-template-columns: 1fr; }
}

/* ── Authentication tab layout (v2.9.0529.9) ───────────────────────────────
   Tab access (AD group matrix) spans the full width as row 1 (`.auth-full`
   + order:-1); LDAP + Local fallback accounts share row 2 at 50% each. */
.settings-grid--auth {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.settings-grid--auth .auth-full {
  grid-column: 1 / -1;
  order: -1;                     /* render the matrix first regardless of DOM order */
}
@media (max-width: 900px) {
  .settings-grid--auth { grid-template-columns: 1fr; }
}

/* ── Tab-access editor: AD picker + permission matrix (v2.9.0529.x) ─────────
   Live AD-group search bar + a checkbox matrix (AD groups × tabs). `.perm-cn`
   uses text-transform:capitalize so CNs render Title Case regardless of how
   they're stored (matching stays case-insensitive — display-only). */
.ad-picker {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 14px 0 10px;
}
.ad-picker-input {
  flex: 1 1 280px; min-width: 220px;
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--n-900); border: 1px solid var(--n-700);
  border-radius: var(--r-sm); color: var(--n-500);
}
.ad-picker-input input {
  flex: 1; border: none; background: transparent; color: var(--n-100);
  font: inherit; padding: 8px 0; outline: none;
}
.ad-picker-spin { color: var(--cdi-gold); font-weight: 700; }
.ad-picker-results {
  position: absolute; top: calc(100% + 4px); left: 0;
  width: min(520px, 100%); max-height: 300px; overflow-y: auto;
  background: var(--n-900); border: 1px solid var(--n-700);
  border-radius: var(--r-sm); box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  z-index: 1400; padding: 4px;
}
.ad-picker-result {
  display: flex; align-items: center; gap: 8px; width: 100%;
  text-align: left; padding: 7px 10px; border: none; background: none;
  color: var(--n-100); cursor: pointer; border-radius: 4px; font: inherit;
}
.ad-picker-result:hover { background: var(--n-800); }
.ad-picker-result .icon { color: var(--cdi-green-light); flex: 0 0 auto; }
.ad-picker-added { margin-left: auto; font-size: 10px; color: var(--n-500); font-style: italic; }
.ad-picker-msg { padding: 10px 12px; color: var(--n-500); font-size: var(--fs-sm); }

.perm-matrix-wrap {
  overflow-x: auto; margin-top: 6px;
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
}
.perm-matrix { border-collapse: collapse; width: 100%; font-size: 12px; }
.perm-matrix th, .perm-matrix td { border-bottom: 1px solid var(--n-800); }
.perm-matrix tbody tr:last-child td { border-bottom: 0; }
.perm-matrix thead th {
  position: sticky; top: 0; z-index: 1; background: var(--n-850);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--n-400); font-weight: 700; padding: 8px 6px;
  text-align: center; white-space: nowrap;
}
.perm-cn-col {
  text-align: left !important; padding: 8px 12px !important;
  position: sticky; left: 0; background: var(--n-900); z-index: 1; min-width: 210px;
}
.perm-matrix thead .perm-cn-col { z-index: 3; background: var(--n-850); }
/* Display AD group CNs in Title Case regardless of how they're stored
   (matching stays case-insensitive; this is display-only). */
.perm-cn { font-weight: 600; color: var(--n-100); text-transform: capitalize; }
.perm-cn-input {
  width: 100%; box-sizing: border-box; font: inherit; padding: 5px 8px;
  background: var(--n-950); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: 4px;
}
.perm-cell {
  text-align: center; cursor: pointer; padding: 7px 6px; min-width: 42px;
  user-select: none;
}
.perm-cell:hover { background: var(--n-800); }
.perm-cell.perm-on { background: rgba(76,175,80,0.14); }
.perm-cell.perm-on .perm-check { color: var(--cdi-green-light); font-weight: 700; }
.perm-check { font-size: 13px; }
.perm-row-admin .perm-cn { color: var(--cdi-gold); }
.perm-rm-col { text-align: center; width: 34px; }
.perm-rm-btn {
  border: none; background: none; color: var(--n-500);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 8px;
}
.perm-rm-btn:hover { color: var(--bad); }

/* Light theme — sticky backgrounds + readable text. */
[data-theme="light"] .ad-picker-input,
[data-theme="light"] .ad-picker-results { background: #ffffff; border-color: var(--n-700); }
[data-theme="light"] .ad-picker-result { color: var(--n-100); }
[data-theme="light"] .ad-picker-result:hover { background: var(--n-800); }
[data-theme="light"] .perm-matrix thead th,
[data-theme="light"] .perm-matrix thead .perm-cn-col { background: var(--n-800); color: var(--n-300); }
[data-theme="light"] .perm-cn-col { background: var(--n-900); }
[data-theme="light"] .perm-cn { color: var(--n-100); }
[data-theme="light"] .perm-cell:hover { background: var(--n-800); }
[data-theme="light"] .perm-cell.perm-on { background: rgba(27,94,32,0.10); }
[data-theme="light"] .perm-cell.perm-on .perm-check { color: var(--cdi-green); }
[data-theme="light"] .perm-row-admin .perm-cn { color: #B45309; }

/* ── Service accounts: cleaned-up table + per-account usage analytics ───────
   The prior table crammed 8 columns with no row separation. This gives clear
   cell padding, zebra-free row borders, status pills, and a compact actions
   cluster. The usage panel below renders an ECharts calls-over-time chart +
   top IPs / endpoints / status cards + a recent-calls table. */
.sa-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  margin-bottom: 18px;
}
.sa-table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.sa-table thead th {
  background: var(--n-850); color: var(--n-400);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700; text-align: left; padding: 9px 12px;
  white-space: nowrap; border-bottom: 1px solid var(--n-700);
}
.sa-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--n-800);
  vertical-align: middle; color: var(--n-200, var(--n-300));
}
.sa-table tbody tr:last-child td { border-bottom: 0; }
.sa-table tbody tr:hover { background: var(--n-850); }
.sa-num    { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-center { text-align: center; }
.sa-name { font-weight: 700; color: var(--n-100); }
.sa-desc { font-size: var(--fs-xs); color: var(--n-500); margin-top: 1px; }
.sa-key  { font-size: var(--fs-xs); color: var(--n-400); letter-spacing: 0.2px; word-break: break-all; }
.sa-ip   { font-size: var(--fs-xs); color: var(--n-300); font-variant-numeric: tabular-nums; }
.sa-muted { color: var(--n-500); }
.sa-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
}
.sa-badge-on  { background: rgba(76,175,80,0.18);  color: var(--cdi-green-light, #2e7d32); }
.sa-badge-off { background: rgba(204,0,0,0.16);     color: var(--bad); }
.sa-actions-col { width: 1%; white-space: nowrap; }
.sa-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.sa-table .btn-sm { padding: 4px 10px; font-size: var(--fs-xs); }
.sa-del { color: var(--bad); border-color: rgba(204,0,0,0.35); }
.sa-del:hover { border-color: var(--bad); }

.sa-usage {
  border: 1px solid var(--n-700); border-radius: var(--r-md);
  padding: 16px 18px; background: var(--n-900);
}
.sa-usage-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sa-usage-controls { display: flex; gap: 8px; align-items: center; }
.sa-usage-range {
  background: var(--n-950); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 5px 8px; font: inherit; font-size: var(--fs-sm);
}
.sa-usage-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.sa-stat { background: var(--n-850); border: 1px solid var(--n-700); border-radius: var(--r-sm); padding: 10px 12px; text-align: center; }
.sa-stat-num { font-size: var(--fs-xl); font-weight: 700; color: var(--n-50); font-variant-numeric: tabular-nums; line-height: 1.1; }
.sa-stat-lbl { font-size: var(--fs-xs); color: var(--n-500); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.sa-usage-chart { width: 100%; height: 200px; margin-bottom: 14px; }
.sa-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sa-usage-card { border: 1px solid var(--n-700); border-radius: var(--r-sm); padding: 10px 12px; background: var(--n-850); }
.sa-usage-card-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--n-400); font-weight: 700; margin-bottom: 8px; }
.sa-usage-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; font-size: var(--fs-sm); }
.sa-usage-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--n-100); }
.sa-recent { font-size: var(--fs-xs); }

@media (max-width: 700px) { .sa-usage-stats { grid-template-columns: repeat(2, 1fr); } }

[data-theme="light"] .sa-table thead th { background: var(--n-850); color: var(--n-400); }
[data-theme="light"] .sa-table tbody tr:hover { background: var(--n-850); }
[data-theme="light"] .sa-usage,
[data-theme="light"] .sa-usage-range { background: #ffffff; }
[data-theme="light"] .sa-stat,
[data-theme="light"] .sa-usage-card { background: var(--n-900); }

/* Placeholder pane inside cards (for "Coming next" sections) */
.placeholder-pane {
  background: rgba(255, 193, 7, 0.05);
  border: 1px dashed rgba(255, 193, 7, 0.30);
  border-radius: var(--r-sm);
  padding: 18px;
  margin-top: 8px;
}
[data-theme="light"] .placeholder-pane {
  background: rgba(180, 83, 9, 0.05);
  border-color: rgba(180, 83, 9, 0.30);
}
.placeholder-title {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--cdi-gold); letter-spacing: 1px; text-transform: uppercase;
  margin: 0 0 8px;
}
[data-theme="light"] .placeholder-title { color: #B45309; }
.placeholder-pane p { margin: 0 0 8px; color: var(--n-400); font-size: var(--fs-sm); line-height: 1.55; }
.placeholder-pane p:last-child { margin-bottom: 0; }
.placeholder-hint { font-style: italic; color: var(--n-500) !important; }
.settings-card { padding: 20px; }
.settings-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.settings-card-head h3 {
  font-size: var(--fs-md); color: var(--n-50); font-weight: 600;
}
.settings-card-head .icon { color: var(--cdi-gold); }
.settings-card-sub {
  font-size: var(--fs-xs); color: var(--n-500); margin: 0 0 16px;
}
.settings-card form { display: flex; flex-direction: column; gap: 12px; }
.settings-field {
  display: flex; flex-direction: column; gap: 4px;
}
.settings-field label {
  font-size: var(--fs-xs); color: var(--n-400); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.settings-field input, .settings-field select, .settings-field textarea {
  background: var(--n-950); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 9px 11px; font-size: var(--fs-base);
  font-family: inherit;
  transition: border-color var(--t-fast);
}
.settings-field input:focus, .settings-field select:focus,
.settings-field textarea:focus {
  outline: none; border-color: var(--cdi-gold);
}
.settings-field input[readonly], .settings-field input[disabled] {
  background: var(--n-900); color: var(--n-500); cursor: not-allowed;
}
.settings-field .hint {
  font-size: var(--fs-xs); color: var(--n-500); margin-top: 2px;
}
.settings-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--n-800);
}
.settings-banner {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--warn);
  padding: 10px 14px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.settings-success {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: var(--ok);
  padding: 10px 14px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.role-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.7px;
  padding: 2px 8px; border-radius: 4px; text-transform: uppercase;
}
.role-admin  { background: rgba(102, 187, 106, 0.18); color: var(--cdi-green-light); }
.role-viewer { background: rgba(96, 165, 250, 0.15); color: var(--info); }

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 86vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.login-card {
  background: linear-gradient(170deg, var(--n-900) 0%, var(--n-850) 100%);
  border: 1px solid var(--n-700);
  border-top: 3px solid var(--cdi-gold);
  border-radius: var(--r-lg);
  padding: 36px; width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 16px;
}
.login-logo { height: 64px; align-self: center; }
.login-card h1 { text-align: center; font-size: var(--fs-xl); color: var(--cdi-gold); }
.login-sub { text-align: center; color: var(--n-400); font-size: var(--fs-sm); margin: 0; }
.login-card label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-xs); color: var(--n-400);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}
.login-card input {
  background: var(--n-950);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: var(--fs-base); color: var(--n-50);
  font-family: inherit;
}
.login-card input:focus { outline: none; border-color: var(--cdi-gold); }
.login-btn {
  background: var(--cdi-gold); color: var(--cdi-green);
  border: none; border-radius: var(--r-sm);
  padding: 13px; font-size: var(--fs-md); font-weight: 700;
  cursor: pointer; letter-spacing: 0.5px;
  transition: background var(--t-fast);
  font-family: inherit;
}
.login-btn:hover { background: var(--cdi-gold-hover); }
.login-error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: var(--r-sm); padding: 10px 12px;
  color: var(--bad); font-size: var(--fs-sm); text-align: center;
}
.login-hint {
  font-size: var(--fs-xs); color: var(--n-500); text-align: center;
  margin: 8px 0 0;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(7, 9, 11, 0.92);
  border-top: 1px solid var(--n-800);
  padding: 8px 24px; font-size: var(--fs-xs); color: var(--n-500);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  backdrop-filter: blur(8px);
  z-index: 50;
}
.footer-brand { font-weight: 600; letter-spacing: 0.4px; }
.footer-user  { display: flex; align-items: center; gap: 8px; }
.footer-sep   { color: var(--n-700); }
.footer-link  {
  color: var(--n-400); display: inline-flex; align-items: center; gap: 4px;
}
.footer-link:hover { color: var(--cdi-gold); text-decoration: none; }

/* ── Plant Switcher ───────────────────────────────────────────────────────
   In-footer popover listing sibling-plant dashboards. Plant names only, no
   monospace, no live-status pings. Hidden when no siblings configured. */
.plant-switcher { position: relative; display: inline-flex; align-items: center; }
.plant-switcher-trigger {
  background: none; border: none; cursor: pointer;
  padding: 0; margin: 0; font: inherit; letter-spacing: inherit;
  color: var(--n-400);
  display: inline-flex; align-items: center; gap: 4px;
}
.plant-switcher-trigger:hover { color: var(--cdi-gold); }
.plant-switcher-chevron { font-size: 0.7em; transition: transform var(--t-fast, 150ms) ease; display: inline-block; }
.plant-switcher-chevron--open { transform: rotate(180deg); }
.plant-switcher-panel {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  min-width: 200px; max-width: 300px;
  background: var(--n-900); border: 1px solid var(--n-700);
  border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  padding: 4px 0; z-index: 1500; font-family: inherit;
}
.plant-switcher-section {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--n-500); font-weight: 700; padding: 6px 12px 2px;
}
.plant-switcher-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px;
  color: var(--n-100);   /* auto-inverts: readable in both themes */
  text-decoration: none; cursor: pointer; font-weight: 600; font-size: var(--fs-sm, 13px);
}
.plant-switcher-row:hover, .plant-switcher-row:focus { background: var(--n-800); outline: none; }
.plant-switcher-row--current {
  cursor: default;
  background: rgba(102, 187, 106, 0.16);
  color: var(--cdi-green-light);
  font-weight: 700;
  border-left: 3px solid var(--cdi-green-light);
  padding-left: 9px;   /* 12px - 3px accent bar, keeps name aligned */
}
.plant-switcher-row--current:hover { background: rgba(102, 187, 106, 0.16); }

/* Other plants - gold, obviously different from the green current row. */
.plant-switcher-row:not(.plant-switcher-row--current) { color: var(--cdi-gold); }
.plant-switcher-row:not(.plant-switcher-row--current):hover,
.plant-switcher-row:not(.plant-switcher-row--current):focus {
  background: var(--n-800);
  color: var(--cdi-gold-hover);
}

.plant-switcher-name { font-size: inherit; font-weight: inherit; }
.plant-switcher-check { color: var(--cdi-green-light, var(--cdi-green)); font-weight: 700; }

/* Light theme - keep both states readable on the white popover. */
[data-theme="light"] .plant-switcher-panel {
  background: #ffffff;
  border: 1px solid var(--n-700);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
[data-theme="light"] .plant-switcher-row--current {
  color: var(--cdi-green);
  border-left-color: var(--cdi-green);
}
[data-theme="light"] .plant-switcher-check { color: var(--cdi-green); }
[data-theme="light"] .plant-switcher-row:not(.plant-switcher-row--current)       { color: #8a6d00; }
[data-theme="light"] .plant-switcher-row:not(.plant-switcher-row--current):hover { color: #6f5600; }
[data-theme="light"] .plant-switcher-trigger       { color: var(--n-500); }
[data-theme="light"] .plant-switcher-trigger:hover { color: var(--cdi-green); }

.last-refresh {
  text-align: right;
  font-size: var(--fs-xs); color: var(--n-500); font-style: italic;
  margin: 10px 0 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Theme toggle (top-right of nav)
   ────────────────────────────────────────────────────────────────────────── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--n-700);
  color: var(--n-400);
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
  margin-left: 8px;
  font-family: inherit;
}
.theme-toggle:hover {
  background: var(--n-850);
  color: var(--cdi-gold);
  border-color: var(--n-600);
}
.theme-toggle svg { display: block; }

/* Help — dedicated icon button to the right of the theme toggle (v2.9.0611.5).
   Same size/shape as .theme-toggle so the two pair cleanly. */
.nav-help {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--n-700); color: var(--n-400);
  margin-left: 8px; transition: all var(--t-fast);
}
.nav-help:hover { background: var(--n-850); color: var(--cdi-green-light); border-color: var(--n-600); }
.nav-help.active {
  background: rgba(102, 187, 106, 0.14); color: var(--cdi-green-light);
  border-color: rgba(102, 187, 106, 0.3);
}
.nav-help svg { display: block; }

/* CSS-driven visibility: only the icon matching the current mode is shown.
   `<html data-theme-mode="...">` is set by the init script in <head>. */
.theme-toggle .theme-icon {
  display: none; align-items: center; gap: 6px;
}
html[data-theme-mode="system"] .theme-toggle .theme-icon[data-mode="system"],
html[data-theme-mode="light"]  .theme-toggle .theme-icon[data-mode="light"],
html[data-theme-mode="dark"]   .theme-toggle .theme-icon[data-mode="dark"] {
  display: inline-flex;
}
.theme-toggle .theme-mode-label { display: none; }
@media (min-width: 1200px) {
  .theme-toggle {
    width: auto; padding: 6px 10px;
  }
  .theme-toggle .theme-mode-label {
    display: inline-block; font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   LIGHT THEME
   Goal: warm, paper-like background with clearly defined elevation between
   page → cards → controls. White cards pop against a slate-tinted page
   instead of disappearing.
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Neutral scale — page is a warm slate, cards are bright white */
  --n-950:  #E2E8F0;   /* page bg — strong gray-blue tint                */
  --n-900:  #FFFFFF;   /* card surface — pure white pops on the slate    */
  --n-850:  #F1F5F9;   /* table head, raised surfaces                    */
  --n-800:  #E1E7EE;   /* hover, code chips, inset                       */
  --n-700:  #B8C2CF;   /* border-default — visible, not aggressive       */
  --n-600:  #94A1B1;   /* border-strong                                  */
  --n-500:  #5A6573;   /* muted text                                     */
  --n-400:  #404B58;   /* secondary text                                 */
  --n-300:  #1F2933;   /* body text                                      */
  --n-100:  #0B1118;   /* heading text                                   */
  --n-50:   #050A0F;   /* highest contrast                               */

  /* Semantic — darker shades for adequate contrast on white */
  --ok:        #15803D;
  --warn:      #B45309;
  --bad:       #B91C1C;
  --info:      #1D4ED8;
  --neutral:   #475569;

  /* Shadows that actually read on light surfaces */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.10);
}
[data-theme="light"] body {
  background:
    radial-gradient(ellipse 1200px 600px at 50% -200px, rgba(102, 187, 106, 0.10), transparent 60%),
    var(--n-950);
  color: var(--n-300);
}

/* ── Top nav — gives the page a clear brand bar ─────────────────────────── */
[data-theme="light"] .topnav {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%);
  border-bottom: 3px solid var(--cdi-green);
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .brand           { border-right-color: var(--n-700); }
[data-theme="light"] .brand-line-1    { color: var(--cdi-green); font-weight: 800; }
[data-theme="light"] .brand-line-2    { color: var(--n-500); }
[data-theme="light"] .nav-tabs li a   { color: var(--n-400); }
[data-theme="light"] .nav-tabs li a:hover {
  background: rgba(102, 187, 106, 0.10); color: var(--cdi-green);
  border-color: rgba(102, 187, 106, 0.25);
}
[data-theme="light"] .nav-tabs li a.active {
  background: var(--cdi-green); color: #FFFFFF;
  border-color: var(--cdi-green); font-weight: 700;
  box-shadow: 0 2px 8px rgba(27, 94, 32, 0.25);
}
[data-theme="light"] .nav-tabs li a.active .icon { color: var(--cdi-gold); }
[data-theme="light"] .nav-tabs li a.admin             { color: var(--cdi-green); }
[data-theme="light"] .nav-tabs li a.admin:hover       {
  background: rgba(27, 94, 32, 0.10);
}
[data-theme="light"] .nav-tabs li a.admin.active      {
  background: var(--cdi-green); color: #FFFFFF; border-color: var(--cdi-green);
}
[data-theme="light"] .nav-more-btn:hover {
  background: rgba(102, 187, 106, 0.10); color: var(--cdi-green);
  border-color: rgba(102, 187, 106, 0.25);
}
[data-theme="light"] .nav-more-btn.active {
  background: var(--cdi-green); color: #FFFFFF; border-color: var(--cdi-green);
  font-weight: 700; box-shadow: 0 2px 8px rgba(27, 94, 32, 0.25);
}
[data-theme="light"] .nav-more-btn.active .nav-more-caret,
[data-theme="light"] .nav-more-btn.active .icon { color: #FFFFFF; }
[data-theme="light"] .nav-more-menu {
  background: #FFFFFF; border-color: var(--n-700);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.15);
}
[data-theme="light"] .nav-more-menu a:hover {
  background: rgba(102, 187, 106, 0.10); color: var(--cdi-green);
}
[data-theme="light"] .nav-more-menu a.active {
  background: var(--cdi-green); color: #FFFFFF; border-color: var(--cdi-green);
}
[data-theme="light"] .nav-more-menu a.admin { color: var(--cdi-green); }
[data-theme="light"] .nav-more-menu a.admin.active {
  background: var(--cdi-green); color: #FFFFFF; border-color: var(--cdi-green);
}
[data-theme="light"] .nav-right { border-left-color: var(--n-700); }
[data-theme="light"] .live-label { color: var(--ok); }
[data-theme="light"] .live-pulse { background: var(--ok); }
[data-theme="light"] .theme-toggle {
  background: #FFFFFF; border-color: var(--n-700); color: var(--n-400);
}
[data-theme="light"] .theme-toggle:hover {
  background: var(--n-850); color: var(--cdi-green); border-color: var(--cdi-green);
}
[data-theme="light"] .nav-help {
  background: #FFFFFF; border-color: var(--n-700); color: var(--n-400);
}
[data-theme="light"] .nav-help:hover {
  background: rgba(102, 187, 106, 0.10); color: var(--cdi-green); border-color: rgba(102, 187, 106, 0.3);
}
[data-theme="light"] .nav-help.active {
  background: var(--cdi-green); color: #FFFFFF; border-color: var(--cdi-green);
}

/* ── Page header — bottom border becomes a brand gradient ───────────────── */
[data-theme="light"] .page-header {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, var(--cdi-green), var(--cdi-gold), transparent) 1;
  padding-bottom: 22px;
}
[data-theme="light"] .page-eyebrow  { color: var(--cdi-green); font-weight: 700; }
[data-theme="light"] .page-title    { color: var(--n-50); }
[data-theme="light"] .page-title .icon { color: var(--cdi-green); }
[data-theme="light"] .page-subtitle { color: var(--n-400); }

/* ── Section / subsection titles get a stronger visual weight ───────────── */
[data-theme="light"] .section-title       { color: var(--n-50); }
[data-theme="light"] .section-title .icon { color: var(--cdi-green); }
[data-theme="light"] .subsection-title {
  color: var(--n-50);
  padding-left: 10px;
  border-left: 3px solid var(--cdi-gold);
  border-bottom: none;
}
[data-theme="light"] .subsection-title::after {
  background: linear-gradient(to right, var(--n-700), transparent);
}

/* ── Cards — visible borders, real shadows, hover lift ──────────────────── */
[data-theme="light"] .card {
  background: var(--n-900);
  border: 1px solid var(--n-700);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .card-raised { background: var(--n-850); }
[data-theme="light"] .section-card:hover {
  border-color: var(--cdi-green);
  box-shadow: 0 12px 28px rgba(27, 94, 32, 0.15);
}
[data-theme="light"] .card-clickable:hover {
  border-color: var(--cdi-green);
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .product-icon { background: transparent; }
[data-theme="light"] .silo-tag, [data-theme="light"] .rt-tag,
[data-theme="light"] .eq-label  { color: var(--cdi-green); font-weight: 700; }
[data-theme="light"] .product-name {
  filter: brightness(0.7) saturate(1.3);
}
[data-theme="light"] .product-value-num { color: var(--n-50); }
[data-theme="light"] .section-big       { color: var(--n-50); }
[data-theme="light"] .silo-lbs-num,
[data-theme="light"] .rt-lbs            { color: var(--n-50); }

/* Section status cards — colored left bar per type for at-a-glance routing */
[data-theme="light"] .section-card           { border-left-width: 4px; }
[data-theme="light"] .section-card.silos     { border-left-color: var(--info); }
[data-theme="light"] .section-card.powder    { border-left-color: var(--warn); }
[data-theme="light"] .section-card.utilities { border-left-color: var(--cdi-gold); }
[data-theme="light"] .section-card.butter    { border-left-color: #B45309; }
[data-theme="light"] .section-card.silos     header { color: var(--info); }
[data-theme="light"] .section-card.powder    header { color: var(--warn); }
[data-theme="light"] .section-card.utilities header { color: #B45309; }
[data-theme="light"] .section-card.butter    header { color: #B45309; }

/* ── Code chips ─────────────────────────────────────────────────────────── */
/* Inline code in light theme — matches Visalia: plain bold text in the body
   colour (no green chip). The help docs' `.markdown-body code` rule still adds
   a subtle grey chip background; this keeps the TEXT the body colour like the
   sister plant rather than CDI green. */
[data-theme="light"] code {
  background: transparent;
  color: inherit;
  border: 0;
  font-weight: 700;
}

/* ── Links ──────────────────────────────────────────────────────────────── */
[data-theme="light"] a              { color: var(--cdi-green); }
[data-theme="light"] a:hover        { color: #2E7D32; }
[data-theme="light"] .footer-link   { color: var(--n-400); }
[data-theme="light"] .footer-link:hover { color: var(--cdi-green); }

/* ── Buttons — primary uses CDI green, ghosts get more presence ─────────── */
[data-theme="light"] .btn {
  background: var(--cdi-green); color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(27, 94, 32, 0.25);
}
[data-theme="light"] .btn:hover {
  background: #2E7D32; color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(27, 94, 32, 0.30);
}
[data-theme="light"] .btn-ghost {
  background: #FFFFFF; color: var(--n-300); border-color: var(--n-700);
  box-shadow: var(--shadow-sm);
}
[data-theme="light"] .btn-ghost:hover {
  background: var(--n-850); color: var(--cdi-green);
  border-color: var(--cdi-green);
}
[data-theme="light"] .btn-danger {
  background: rgba(185, 28, 28, 0.10); color: var(--bad);
  border-color: rgba(185, 28, 28, 0.40);
}

/* ── Form fields ────────────────────────────────────────────────────────── */
[data-theme="light"] .filters select, [data-theme="light"] .filters input,
[data-theme="light"] .settings-field input, [data-theme="light"] .settings-field select,
[data-theme="light"] .settings-field textarea,
[data-theme="light"] .login-card input {
  background: var(--n-900); color: var(--n-50);
  border: 1px solid var(--n-700);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
[data-theme="light"] .filters select:focus, [data-theme="light"] .filters input:focus,
[data-theme="light"] .settings-field input:focus,
[data-theme="light"] .settings-field select:focus,
[data-theme="light"] .settings-field textarea:focus,
[data-theme="light"] .login-card input:focus {
  border-color: var(--cdi-green);
  box-shadow: 0 0 0 3px rgba(27, 94, 32, 0.15);
  outline: none;
}
[data-theme="light"] .filters label { color: var(--n-500); }
[data-theme="light"] .settings-field label { color: var(--n-400); }
[data-theme="light"] .settings-field input[readonly],
[data-theme="light"] .settings-field input[disabled] {
  background: var(--n-850); color: var(--n-500); cursor: not-allowed;
}
[data-theme="light"] .settings-field .hint { color: var(--n-500); }

/* ── Login card ─────────────────────────────────────────────────────────── */
[data-theme="light"] .login-card {
  background: #FFFFFF;
  border: 1px solid var(--n-700);
  border-top: 4px solid var(--cdi-green);
}
[data-theme="light"] .login-card h1 { color: var(--cdi-green); }
[data-theme="light"] .login-sub     { color: var(--n-400); }
[data-theme="light"] .login-card label { color: var(--n-500); }
[data-theme="light"] .login-btn {
  background: var(--cdi-green); color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(27, 94, 32, 0.30);
}
[data-theme="light"] .login-btn:hover { background: #2E7D32; }
[data-theme="light"] .login-error {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.30);
  color: var(--bad);
}
[data-theme="light"] .login-hint { color: var(--n-500); }

/* ── Equipment cards — bolder left-bar, status legibility on white ──────── */
[data-theme="light"] .eq-card        { border-left-width: 4px; }
[data-theme="light"] .eq-on          { border-left-color: var(--eq-accent, var(--ok)); }
[data-theme="light"] .eq-off         { border-left-color: var(--eq-accent, var(--bad)); }
[data-theme="light"] .eq-cip         { border-left-color: var(--eq-accent, var(--warn)); }
[data-theme="light"] .eq-unknown     { border-left-color: var(--eq-accent, var(--n-600)); }
[data-theme="light"] .eq-missing     { border-left-color: var(--n-700); opacity: 0.7; }
[data-theme="light"] .eq-on .eq-status  { color: var(--eq-accent, var(--ok)); }
[data-theme="light"] .eq-off .eq-status { color: var(--eq-accent, var(--bad)); }
[data-theme="light"] .eq-cip .eq-status { color: var(--eq-accent, var(--warn)); }
[data-theme="light"] .eq-metric-label   { color: var(--n-500); }
[data-theme="light"] .eq-metric-value   { color: var(--n-50); }
[data-theme="light"] .eq-foot           {
  border-top-color: var(--n-700);
  color: var(--n-500);
}

/* ── RT receiving / silo cards ──────────────────────────────────────────── */
[data-theme="light"] .rt-card { border-left-width: 4px; }
[data-theme="light"] .rt-bar  {
  background: var(--n-850); border-color: var(--n-700);
}
[data-theme="light"] .rt-ok .rt-pct, [data-theme="light"] .rt-ok .rt-label,
[data-theme="light"] .silo-ok .silo-pct, [data-theme="light"] .silo-ok .silo-status {
  color: var(--n-500);
}
[data-theme="light"] .rt-tag, [data-theme="light"] .silo-tag {
  color: var(--cdi-green);
}
[data-theme="light"] .rt-plc, [data-theme="light"] .silo-plc {
  color: var(--n-500);
}

/* Bay placeholder cards. We re-apply the `border-left` width here at
   `[data-theme="light"]`-level specificity because `[data-theme="light"] .card`
   above uses the `border` shorthand, which would otherwise reset all
   four sides back to 1 px on light mode. Same fix for silo cards
   immediately below. */
[data-theme="light"] .bay-card  { border-top-width: 4px; border-left-width: 4px; }
[data-theme="light"] .bay-on    { border-left-color: var(--eq-accent, var(--ok));  }
[data-theme="light"] .bay-off   { border-left-color: var(--eq-accent, var(--bad)); }
[data-theme="light"] .bay-pending { border-left-color: var(--n-600); }
[data-theme="light"] .silo-card           { border-left-width: 4px; border-left-color: var(--n-700); }
[data-theme="light"] .silo-card.silo-ok       { border-left-color: var(--ok);   }
[data-theme="light"] .silo-card.silo-low      { border-left-color: var(--warn); }
[data-theme="light"] .silo-card.silo-empty    { border-left-color: var(--n-600); }
[data-theme="light"] .silo-card.silo-high     { border-left-color: #FFCC00; }
[data-theme="light"] .silo-card.silo-critical { border-left-color: var(--bad);  }
[data-theme="light"] .silo-card.silo-unknown  { border-left-color: var(--n-600); }

[data-theme="light"] .bay-num  { color: var(--info); font-weight: 700; }
[data-theme="light"] .bay-icon { background: rgba(29, 78, 216, 0.10); color: var(--info); }
/* Light-theme bay status — pending only (warn-style). Live states
   (.bay-on, .bay-off) take precedence via the explicit class selectors
   below so they're not overridden to amber. */
[data-theme="light"] .bay-pending .bay-status { color: var(--warn); }
[data-theme="light"] .bay-on  .bay-status     { color: var(--eq-accent, var(--ok)); }
[data-theme="light"] .bay-off .bay-status     { color: var(--eq-accent, var(--bad)); }

/* ── Drawer (Butter history) ────────────────────────────────────────────── */
[data-theme="light"] .drawer {
  background: var(--n-900); border-left: 2px solid var(--cdi-green);
}
[data-theme="light"] .drawer-backdrop { background: rgba(15, 23, 42, 0.45); }
[data-theme="light"] .drawer-head     { border-bottom-color: var(--n-700); }
[data-theme="light"] .drawer-title    { color: var(--n-50); }
[data-theme="light"] .drawer-close    {
  background: #FFFFFF; color: var(--n-400); border-color: var(--n-700);
}
[data-theme="light"] .drawer-close:hover {
  background: var(--n-850); color: var(--cdi-green); border-color: var(--cdi-green);
}

/* ── Tables / Reports ───────────────────────────────────────────────────── */
[data-theme="light"] .report-card { border: 1px solid var(--n-700); }
[data-theme="light"] .report-head { border-bottom-color: var(--n-700); }
[data-theme="light"] .report-table thead th {
  background: var(--n-850); color: var(--n-400);
  border-bottom: 2px solid var(--cdi-green);
}
[data-theme="light"] .report-table td        { border-bottom-color: var(--n-800); }
[data-theme="light"] .report-table tr:hover td {
  background: rgba(27, 94, 32, 0.06);
}

/* ── Role badges ────────────────────────────────────────────────────────── */
[data-theme="light"] .role-admin {
  background: rgba(27, 94, 32, 0.14); color: var(--cdi-green);
  border: 1px solid rgba(27, 94, 32, 0.30);
}
[data-theme="light"] .role-viewer {
  background: rgba(29, 78, 216, 0.10); color: var(--info);
  border: 1px solid rgba(29, 78, 216, 0.28);
}

/* ── BenHill pip strip on overview ──────────────────────────────────────── */
[data-theme="light"] .benhill-pip { color: #FFFFFF; }
[data-theme="light"] .benhill-pip.off { background: var(--bad); }
[data-theme="light"] .benhill-pip.on  { background: var(--ok); }

/* ── Settings banners ───────────────────────────────────────────────────── */
[data-theme="light"] .settings-banner {
  background: rgba(180, 83, 9, 0.10); color: var(--warn);
  border-color: rgba(180, 83, 9, 0.30);
}
[data-theme="light"] .settings-success {
  background: rgba(21, 128, 61, 0.10); color: var(--ok);
  border-color: rgba(21, 128, 61, 0.30);
}
[data-theme="light"] .settings-card-head h3 { color: var(--n-50); }
[data-theme="light"] .settings-card-head .icon { color: var(--cdi-green); }
[data-theme="light"] .settings-actions       { border-top-color: var(--n-700); }

/* ── Filter labels / hint text ──────────────────────────────────────────── */
[data-theme="light"] .section-sub-line { color: var(--n-500); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
[data-theme="light"] .footer {
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--n-700);
}
[data-theme="light"] .footer-brand { color: var(--n-400); font-weight: 600; }
[data-theme="light"] .footer-sep   { color: var(--n-600); }

/* ── Power section (utilities) ──────────────────────────────────────────── */
[data-theme="light"] .power-card { border-top: 4px solid var(--cdi-gold); }
[data-theme="light"] .spark-head { color: var(--n-500); }
[data-theme="light"] .spark-min-max { color: var(--n-400); }

/* ── Empty state ────────────────────────────────────────────────────────── */
[data-theme="light"] .empty { color: var(--n-500); }
[data-theme="light"] .report-empty { color: var(--n-500); }

/* ── Last refresh ───────────────────────────────────────────────────────── */
[data-theme="light"] .last-refresh { color: var(--n-500); }

/* ────────────────────────────────────────────────────────────────────────
   Statistics widgets + Kiosk pages
   Used by /stats/<id> (admin) and /k/<slug>/page/<id> (public kiosk).
   ──────────────────────────────────────────────────────────────────────── */
.widget-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .widget-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .widget-grid { grid-template-columns: 1fr; }
}
.widget-slot {
  background: var(--n-900); border: 1px solid var(--n-700);
  border-radius: var(--r-md); padding: 12px;
  position: relative; min-height: 120px;
  display: flex; flex-direction: column;
}
.widget-slot.size-small  { grid-column: span 1; }
.widget-slot.size-medium { grid-column: span 2; }
.widget-slot.size-large  { grid-column: span 3; }
.widget-slot.size-full   { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .widget-slot.size-large, .widget-slot.size-medium { grid-column: 1 / -1; }
}
.widget-slot.size-tall   { min-height: 320px; }
.widget-title { font-size: var(--fs-sm); font-weight: 600;
                color: var(--n-100); margin: 0 0 8px; }

/* KPI */
.widget-kpi { display: flex; flex-direction: column; align-items: center;
              justify-content: center; gap: 4px; flex: 1; padding: 8px 0; }
.widget-kpi-title { font-size: var(--fs-xs); color: var(--n-500);
                    text-transform: uppercase; letter-spacing: 1px;
                    font-weight: 700; }
.widget-kpi-value { font-size: var(--fs-3xl); font-weight: 700;
                    color: var(--n-50); font-variant-numeric: tabular-nums;
                    letter-spacing: -0.02em; line-height: 1; }
.widget-kpi-suffix{ font-size: var(--fs-md); color: var(--n-400); margin-left: 4px; }
.widget-kpi-sub   { font-size: var(--fs-xs); color: var(--n-500); }

/* Text */
.widget-text h3 { font-size: var(--fs-lg); color: var(--n-100);
                  font-weight: 700; margin: 0 0 6px; }
.widget-text-body { font-size: var(--fs-sm); color: var(--n-300);
                    line-height: 1.5; }

/* Product tiles */
.widget-product-grid { display: grid; gap: 8px;
                       grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                       flex: 1; align-items: stretch; }
.widget-product-tile { background: var(--n-850); border: 1px solid var(--n-700);
                       border-top: 3px solid var(--accent); border-radius: 6px;
                       padding: 8px 10px; text-align: center;
                       display: flex; flex-direction: column; gap: 4px; }
.widget-product-tile header { display: flex; align-items: center;
                              justify-content: center; gap: 6px; }
.widget-product-icon { font-size: 18px; }
.widget-product-name { font-size: var(--fs-xs); font-weight: 700;
                       color: var(--accent); text-transform: uppercase;
                       letter-spacing: 1px; }
.widget-product-num  { font-size: var(--fs-2xl); font-weight: 700;
                       color: var(--n-50); font-variant-numeric: tabular-nums; }
.widget-product-unit { font-size: var(--fs-xs); color: var(--n-500);
                       margin-left: 4px; }

/* Charts */
.widget-chart-host { width: 100%; flex: 1; min-height: 240px; }

/* Status grid */
.widget-stat-grid { display: grid; gap: 6px;
                    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.widget-stat-cell { background: var(--n-850);
                    border: 1px solid var(--n-700);
                    border-left: 3px solid var(--state-c, var(--n-500));
                    border-radius: 6px; padding: 6px 8px;
                    display: flex; flex-direction: column; gap: 1px; }
.widget-stat-label { font-size: var(--fs-xs); color: var(--n-300);
                     font-weight: 600; }
.widget-stat-state { font-size: var(--fs-sm); color: var(--state-c, var(--n-50));
                     font-weight: 700; letter-spacing: 0.4px; }
.widget-stat-sub   { font-size: 10px; color: var(--n-500); }

/* Error / empty */
.widget-error { color: var(--bad); font-size: var(--fs-xs); }
.widget-error pre { white-space: pre-wrap; word-break: break-all;
                    background: rgba(248,113,113,0.08); padding: 6px;
                    border-radius: 4px; margin: 4px 0 0; font-size: 10px; }
.widget-empty { color: var(--n-500); font-size: var(--fs-sm);
                text-align: center; padding: 16px; }

/* Kiosk shell — strips chrome, full-bleed, hides interactive affordances */
.kiosk-shell { background: var(--n-950); min-height: 100vh;
               padding: 16px; box-sizing: border-box; }
.kiosk-shell .widget-slot { background: var(--n-850); }
.kiosk-banner { position: fixed; top: 0; left: 0; right: 0;
                background: var(--cdi-green); color: var(--n-50);
                padding: 6px 14px; font-size: var(--fs-xs);
                font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
                z-index: 100; display: flex; justify-content: space-between;
                align-items: center; }
.kiosk-progress { height: 3px; background: var(--cdi-gold);
                  width: 0%; transition: width 1s linear;
                  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; }
.kiosk-iframe { width: 100%; height: 100vh; border: 0; display: block; }

/* Stats list (admin) */
.stats-list-row { display: flex; align-items: center; justify-content: space-between;
                  padding: 10px 12px; border-bottom: 1px solid var(--n-800);
                  gap: 12px; }
.stats-list-row:last-child { border-bottom: none; }
.stats-list-name { font-weight: 600; color: var(--n-100); }
.stats-list-meta { font-size: var(--fs-xs); color: var(--n-500); }

/* Editor */
.widget-editor-row { display: grid; grid-template-columns: 1fr auto auto auto auto;
                     gap: 8px; padding: 8px 10px; align-items: center;
                     background: var(--n-850); border: 1px solid var(--n-700);
                     border-radius: 6px; margin-bottom: 6px; }
.widget-editor-row select, .widget-editor-row input { font-size: var(--fs-xs); }
.widget-editor-config { display: grid; grid-template-columns: auto 1fr;
                        gap: 4px 8px; align-items: center; font-size: var(--fs-xs);
                        padding: 6px 10px; background: var(--n-900);
                        border: 1px solid var(--n-700); border-radius: 6px;
                        margin: -4px 0 8px; }
.widget-editor-config label { color: var(--n-400); font-weight: 600; }

/* Light theme overrides */
[data-theme="light"] .widget-slot          { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .widget-product-tile  { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .widget-stat-cell     { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .widget-editor-row    { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .widget-editor-config { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .kiosk-shell          { background: #F1F5F9; }
[data-theme="light"] .kiosk-shell .widget-slot { background: #FFFFFF; }
[data-theme="light"] .widget-product-name  { color: var(--accent); }
[data-theme="light"] .widget-product-num,
[data-theme="light"] .widget-kpi-value     { color: var(--n-50); }

/* Tab-access table — group CN appears as a non-editable label so the AD
   group string stays untouched. Uses the same font as the surrounding
   body text (no monospace) so the table reads uniformly. */
.tab-access-cn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  /* AD stores the CN in whatever case the admin originally typed it; the
     server normalises to lowercase for case-insensitive matching. Show
     the visual label in title case so "Tipton Plant Dashboard - Admin"
     reads naturally without changing the stored value. */
  text-transform: capitalize;
  color: var(--n-100);
  padding: 6px 0;
  word-break: break-all;
}
[data-theme="light"] .tab-access-cn { color: var(--n-50); }

/* ────────────────────────────────────────────────────────────────────────
   Stats editor v2 — instance cards, widget tile-picker, inline preview
   ──────────────────────────────────────────────────────────────────────── */
.widget-edit-card {
  background: var(--n-850); border: 1px solid var(--n-700);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.widget-edit-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 8px;
}
.widget-edit-meta { display: flex; align-items: center; gap: 10px; }
.widget-edit-icon { font-size: 22px; line-height: 1; }
.widget-edit-title { font-weight: 700; color: var(--n-100); font-size: var(--fs-sm); }
.widget-edit-area  { font-size: 10px; color: var(--n-500);
                     text-transform: uppercase; letter-spacing: 0.7px; }
.widget-edit-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.widget-edit-size { padding: 4px 6px; font-size: var(--fs-xs); }
.widget-edit-preview {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--n-700);
}
.widget-edit-preview-label {
  font-size: 10px; color: var(--cdi-gold); letter-spacing: 1px;
  text-transform: uppercase; font-weight: 700; margin-bottom: 6px;
}

/* Tile-picker modal — widget cards grouped by area */
.widget-picker-area {
  font-size: var(--fs-xs); color: var(--cdi-gold); font-weight: 700;
  letter-spacing: 1px; margin: 4px 0 8px;
}
.widget-picker-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.widget-picker-card {
  background: var(--n-850); border: 1px solid var(--n-700);
  border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; cursor: pointer;
  transition: all var(--t-fast);
  color: var(--n-100); font: inherit;
}
.widget-picker-card:hover {
  border-color: var(--cdi-gold);
  background: var(--n-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.widget-picker-emoji { font-size: 22px; line-height: 1; }
.widget-picker-title { font-weight: 700; color: var(--n-100); font-size: var(--fs-sm); }
.widget-picker-desc  { font-size: var(--fs-xs); color: var(--n-400); line-height: 1.4; }

[data-theme="light"] .widget-edit-card    { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .widget-picker-card  { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .widget-picker-card:hover { background: #F8FAFC; border-color: var(--cdi-green); }

/* Stats editor — title field that looks identical to the view-mode h1.
   Removing the secondary "Page name" card was a deliberate simplification:
   what you type IS what shows up at the top of the kiosk page. */
.page-title-edit {
  background: transparent; border: 0;
  padding: 0; margin: 0;
  width: auto; min-width: 280px;
  font: inherit; font-size: var(--fs-xl); line-height: 1;
  color: inherit;
}
.page-title-edit:focus {
  outline: none;
  /* Subtle underline cue that this is editable */
  box-shadow: 0 1px 0 0 var(--cdi-gold);
}
.page-title-edit::placeholder { color: var(--n-500); font-style: italic; }
.stats-edit-header { align-items: center; }

/* Tighter widget picker — denser cards, smaller minmax, less margin */
.widget-picker-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}
.widget-picker-card {
  padding: 8px 10px !important; gap: 2px !important;
}
.widget-picker-emoji { font-size: 18px; }
.widget-picker-title { font-size: var(--fs-xs); line-height: 1.2; }
.widget-picker-desc  { font-size: 10px; line-height: 1.35; color: var(--n-400); }
.widget-picker-area  {
  margin: 0 0 4px !important;
  font-size: 10px !important;
}

/* Pick-a-widget modal sections need very little vertical breathing room
   between them — admins scan; they're not reading. */
.app-confirm-card .widget-picker-grid + section,
.app-confirm-card section + section { margin-top: 6px; }

/* When the confirm-modal body hosts structured markup instead of plain
   prose (widget picker, tag picker, the new-page form), the inherited
   `white-space: pre-wrap` renders every source newline as a visible
   blank line. Bodies that opt-in via `has-structured` get a hard reset
   to normal whitespace handling for every descendant. */
.app-confirm-body.has-structured,
.app-confirm-body.has-structured * { white-space: normal; }

/* Widget editor config form — uniform input styling matching the rest of
   the dashboard. Replaces the browser-default look that made the row of
   labels + inputs feel raw and out of theme. */
.widget-editor-config {
  padding: 8px 12px;
  font-size: var(--fs-xs);
}
.widget-editor-config label {
  color: var(--n-400); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  font-size: 10px;
}
/* All inputs inside the config block — text, number, select, textarea —
   share a single look. Caps width so a 2000-px viewport doesn't render a
   2000-px-wide text input. */
.widget-editor-config input[type="text"],
.widget-editor-config input[type="number"],
.widget-editor-config select,
.widget-editor-config textarea,
.widget-cfg-input {
  background: var(--n-900); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 6px 8px; font: inherit; font-size: var(--fs-xs);
  max-width: 460px; width: 100%;
}
.widget-editor-config input[type="number"] { max-width: 120px; }
.widget-editor-config select { max-width: 260px; }
.widget-editor-config textarea { min-height: 60px; max-width: 600px;
                                  resize: vertical; }
.widget-editor-config input:focus,
.widget-editor-config select:focus,
.widget-editor-config textarea:focus,
.widget-cfg-input:focus {
  outline: none; border-color: var(--cdi-gold);
}

/* Pill group inside the config (Time window 1/4/12/24h selector) */
.widget-editor-config .pill-group { display: flex; gap: 4px; flex-wrap: wrap; }

/* Tag chips below the Pick tags button — visible at a glance, soft style */
.widget-cfg-tag-chips {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px;
}
.widget-cfg-tag-chip {
  background: var(--n-850); border: 1px solid var(--n-700);
  border-radius: 4px; padding: 2px 6px;
  font-size: 10px; color: var(--n-300); font-family: inherit;
}

/* Light-theme overrides */
[data-theme="light"] .widget-editor-config input,
[data-theme="light"] .widget-editor-config select,
[data-theme="light"] .widget-editor-config textarea,
[data-theme="light"] .widget-cfg-input {
  background: #FFFFFF; color: var(--n-50); border-color: #E2E8F0;
}
[data-theme="light"] .widget-cfg-tag-chip {
  background: #F1F5F9; border-color: #E2E8F0; color: var(--n-50);
}

/* Editor v2.2 — widget cards laid out in a 4-col grid that mirrors the
   actual viewer/kiosk layout. The size pills set grid-column spans so the
   admin literally sees what they're about to ship. */
.widget-edit-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}
.widget-edit-card.size-small  { grid-column: span 1; }
.widget-edit-card.size-medium { grid-column: span 2; }
.widget-edit-card.size-large  { grid-column: span 3; }
.widget-edit-card.size-full   { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .widget-edit-grid { grid-template-columns: repeat(2, 1fr); }
  .widget-edit-card.size-small,
  .widget-edit-card.size-medium,
  .widget-edit-card.size-large { grid-column: 1 / -1; }
}

/* Size selector — themed pill row */
.widget-edit-size-group { display: flex; gap: 2px; }
.widget-edit-size-pill {
  padding: 4px 8px !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Line-break widget — full-width horizontal rule. Functions as a visual
   section divider AND a grid layout helper: grid-column 1/-1 forces a
   fresh row, and the gold gradient mirrors the brand accent so the
   section change is obvious to operators glancing at the kiosk. */
.widget-linebreak {
  grid-column: 1 / -1;
  background: transparent !important; border: 0 !important;
  padding: 0 !important; min-height: 0 !important;
  display: flex; align-items: center; height: 14px;
}
.widget-linebreak::before {
  content: ""; display: block; width: 100%; height: 2px;
  background: linear-gradient(to right,
    transparent, var(--cdi-gold) 10%, var(--cdi-gold) 90%, transparent);
  opacity: 0.6; border-radius: 1px;
}
/* Light hairline so admins can see the break in the editor */
.widget-edit-card.kind-line_break {
  background: transparent !important;
  border: 0; border-top: 1px dashed var(--n-700);
  padding: 6px 0; min-height: 0;
}
.widget-edit-card.kind-line_break .widget-edit-meta { opacity: 0.6; }
.widget-edit-card.kind-line_break .widget-edit-area { color: var(--cdi-gold); }

/* Preview mini-grid — fixed at 4 cols so size classes have the same
   semantics as the production widget-grid. */
.widget-edit-preview-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .widget-edit-preview-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ────────────────────────────────────────────────────────────────────────
   Stats pages tile grid (admin /stats list)
   ──────────────────────────────────────────────────────────────────────── */
.stats-tile-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.stats-tile {
  background: var(--n-900); border: 1px solid var(--n-700);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column;
  gap: 8px; min-height: 130px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.stats-tile:hover { border-color: var(--cdi-gold); transform: translateY(-1px); }
.stats-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stats-tile-name { font-weight: 700; color: var(--n-100); font-size: var(--fs-md);
                   line-height: 1.2; }
.stats-tile-count { font-size: 10px; color: var(--n-500); text-transform: uppercase;
                    letter-spacing: 0.7px; white-space: nowrap; }
.stats-tile-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; flex: 1; }
.stats-tile-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; font-size: 16px;
  background: var(--n-850); border: 1px solid var(--n-700);
}
.stats-tile-chip-overflow {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 8px; border-radius: 6px;
  background: var(--n-850); border: 1px solid var(--n-700);
  font-size: var(--fs-xs); color: var(--n-400); font-weight: 700;
}
.stats-tile-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; border-top: 1px solid var(--n-800); padding-top: 8px;
}
.stats-tile-byline { font-size: var(--fs-xs); color: var(--n-500); }
.stats-tile-actions { display: flex; gap: 4px; }
.btn-sm { padding: 4px 8px !important; font-size: var(--fs-xs) !important; }

[data-theme="light"] .stats-tile          { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .stats-tile-chip,
[data-theme="light"] .stats-tile-chip-overflow {
  background: #F1F5F9; border-color: #E2E8F0; }
[data-theme="light"] .stats-tile-foot     { border-top-color: #E2E8F0; }

/* ────────────────────────────────────────────────────────────────────────
   Kiosk Access Denied — animated, friendlier than a wall of red text
   ──────────────────────────────────────────────────────────────────────── */
.kiosk-denied {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1a0a0a 0%, #07090B 70%);
  font-family: "Inter", system-ui, sans-serif;
}
.kiosk-denied-card {
  text-align: center; padding: 40px; max-width: 560px;
}
.kiosk-denied-lock {
  display: inline-block; font-size: 92px; line-height: 1;
  filter: drop-shadow(0 0 24px rgba(248, 113, 113, 0.55));
  animation: kioskShake 1.6s ease-in-out infinite;
  margin-bottom: 14px;
}
.kiosk-denied-title {
  font-size: 38px; font-weight: 800; color: #F87171;
  letter-spacing: 2px; text-transform: uppercase;
  margin: 0 0 12px; text-shadow: 0 0 14px rgba(248,113,113,0.4);
  animation: kioskPulse 2s ease-in-out infinite;
}
.kiosk-denied-msg  { font-size: 16px; color: #E5E7EB; line-height: 1.5; margin: 0 0 8px; }
.kiosk-denied-hint { font-size: 12px; color: #8E99A6; margin: 16px 0 0;
                     letter-spacing: 0.4px; }
.kiosk-denied-bar  {
  margin-top: 22px; height: 6px; width: 100%;
  background: linear-gradient(90deg, transparent, #F87171, transparent);
  background-size: 200% 100%;
  animation: kioskScan 2.4s linear infinite;
  border-radius: 3px; opacity: 0.7;
}
@keyframes kioskShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-4px) rotate(-3deg); }
  40%      { transform: translateX(4px)  rotate(3deg);  }
  60%      { transform: translateX(-3px) rotate(-2deg); }
  80%      { transform: translateX(3px)  rotate(2deg);  }
}
@keyframes kioskPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.97); }
}
@keyframes kioskScan {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0;  }
}

/* Stats page editor — small inline options strip (theme override) */
.stats-page-options {
  display: flex; gap: 14px; margin-bottom: 12px; flex-wrap: wrap;
}
.stats-page-options label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-xs); color: var(--n-500);
  text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700;
}
.stats-page-options select {
  background: var(--n-900); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 6px 8px; font: inherit; font-size: var(--fs-xs);
  min-width: 240px;
}
[data-theme="light"] .stats-page-options select {
  background: #FFFFFF; color: var(--n-50); border-color: #E2E8F0;
}

/* ────────────────────────────────────────────────────────────────────────
   Easter eggs — strictly visual sugar, all opt-in via the egg engine.
   Nothing here should affect the production look unless a class is
   explicitly added by easter-eggs.js.
   ──────────────────────────────────────────────────────────────────────── */

/* Toast notification when an egg is discovered */
.egg-toast {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-20px);
  background: var(--cdi-green); color: var(--n-50);
  padding: 12px 22px; border-radius: 28px;
  font-weight: 700; font-size: var(--fs-md);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
  z-index: 99999; pointer-events: none;
}
.egg-toast.egg-toast-in {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* Confetti */
.egg-confetti-wrap {
  position: fixed; inset: 0; pointer-events: none; z-index: 99990;
  overflow: hidden;
}
.egg-confetti {
  position: absolute; top: -20px; width: 10px; height: 14px;
  border-radius: 2px;
  animation: egg-confetti-fall linear forwards;
}
@keyframes egg-confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); }
}

/* Cow stampede */
.egg-cow-wrap {
  position: fixed; inset: 0; pointer-events: none; z-index: 99988;
  overflow: hidden;
}
.egg-cow {
  position: absolute; left: -80px;
  animation: egg-cow-walk 6.5s linear forwards;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
@keyframes egg-cow-walk {
  0%   { transform: translateX(0)      translateY(0); }
  25%  { transform: translateX(30vw)   translateY(-4px); }
  50%  { transform: translateX(60vw)   translateY(0); }
  75%  { transform: translateX(90vw)   translateY(-4px); }
  100% { transform: translateX(120vw)  translateY(0); }
}
.egg-cow-sign {
  position: absolute; left: 50%; bottom: 18%;
  transform: translateX(-50%) scale(0.6);
  background: var(--cdi-gold); color: var(--cdi-green);
  padding: 12px 28px; border-radius: 12px; font-size: 26px; font-weight: 900;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  animation: egg-sign-pop 6.5s ease-in-out forwards;
}
@keyframes egg-sign-pop {
  0%, 100% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  15%, 85% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Disco mode — color-cycle background + tile bounce */
@keyframes egg-disco-bg {
  0%   { background: #1B5E20; }
  20%  { background: #FFC107; }
  40%  { background: #60A5FA; }
  60%  { background: #F87171; }
  80%  { background: #A78BFA; }
  100% { background: #1B5E20; }
}
@keyframes egg-disco-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.egg-disco { animation: egg-disco-bg 1.6s linear infinite; }
.egg-disco .card,
.egg-disco .section-card,
.egg-disco .product-card,
.egg-disco .widget-slot {
  animation: egg-disco-bounce 0.6s ease-in-out infinite;
}

/* Matrix rain */
.egg-matrix {
  position: fixed; inset: 0; z-index: 99987; pointer-events: none;
  opacity: 1; transition: opacity 0.7s ease-out;
}
.egg-matrix.egg-matrix-fade { opacity: 0; }

/* Credits modal */
.egg-credits-root {
  position: fixed; inset: 0; z-index: 99995;
  display: flex; align-items: center; justify-content: center;
  animation: appConfirmIn 0.2s ease-out;
}
.egg-credits-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.egg-credits-card {
  position: relative; max-width: 460px; padding: 28px 32px; text-align: center;
  background: var(--n-900); color: var(--n-50);
  border: 1px solid var(--cdi-gold); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.egg-credits-emoji {
  font-size: 64px; line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 0 20px rgba(255, 193, 7, 0.6));
  animation: egg-credits-spin 6s linear infinite;
}
@keyframes egg-credits-spin {
  to { transform: rotate(360deg); }
}
.egg-credits-card h2 {
  margin: 0 0 12px; color: var(--cdi-gold); font-size: 22px;
}
.egg-credits-card p { margin: 6px 0; color: var(--n-200); font-size: 14px; }
.egg-credits-tag {
  margin-top: 14px !important; font-style: italic; color: var(--n-400) !important;
}
[data-theme="light"] .egg-credits-card {
  background: #FFFFFF; color: var(--n-50);
}
[data-theme="light"] .egg-credits-card p { color: var(--n-100); }

/* Plant pulse */
@keyframes egg-pulse {
  0%, 100% { transform: scale(1);    color: inherit; }
  50%      { transform: scale(1.18); color: var(--cdi-gold);
             text-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
}
.egg-pulse {
  animation: egg-pulse 1.6s ease-in-out 2;
  display: inline-block;
}

/* Secret-egg icon revealed after 10 copyright clicks */
.about-secret-egg {
  display: none; margin-left: 12px;
  font-size: 22px; cursor: pointer; vertical-align: middle;
  text-decoration: none; opacity: 0; transition: opacity 0.6s ease;
}
.about-secret-egg.egg-secret-in {
  opacity: 1; animation: egg-secret-bob 1.4s ease-in-out infinite;
}
@keyframes egg-secret-bob {
  0%, 100% { transform: translateY(0)   rotate(-4deg); }
  50%      { transform: translateY(-3px) rotate(4deg); }
}

/* Easter Egg page tile grid */
.eggs-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.egg-card {
  background: var(--n-900); border: 1px solid var(--n-700);
  border-left: 4px solid var(--n-700);
  border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.egg-card.discovered { border-left-color: var(--cdi-gold); }
.egg-card-head { display: flex; align-items: baseline; justify-content: space-between; }
.egg-card-name { font-weight: 700; color: var(--n-100); font-size: var(--fs-md); }
.egg-card-state {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 700;
}
.egg-card-state.discovered { color: var(--cdi-gold); }
.egg-card-state.hidden     { color: var(--n-500); }
.egg-card-hint    { font-size: var(--fs-xs); color: var(--n-300); line-height: 1.4; }
.egg-card-trigger { font-size: 10px; color: var(--n-500);
                    font-family: inherit; }
.egg-card-actions { display: flex; gap: 6px; margin-top: 4px; }
[data-theme="light"] .egg-card { background: #FFFFFF; border-color: #E2E8F0; }

/* Matrix-rain countdown overlay */
.egg-matrix-timer {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 120px; font-weight: 800;
  color: #4ADE80; opacity: 0.85;
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.6);
  pointer-events: none; z-index: 99988;
  transition: opacity 0.7s ease-out;
  font-variant-numeric: tabular-nums;
}
.egg-matrix-timer.egg-matrix-fade { opacity: 0; }

/* Credits modal — team columns + late-hours props */
.egg-credits-team {
  display: flex; justify-content: center; gap: 60px;
  margin: 16px 0 8px;
}
.egg-credits-team-col { text-align: center; }
.egg-credits-team-label {
  font-size: 11px; font-weight: 800; color: var(--cdi-gold);
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 2px;
}
.egg-credits-team-name {
  font-size: 11px; color: var(--n-400); font-style: italic;
}
.egg-credits-pit {
  display: flex; justify-content: center; gap: 18px;
  font-size: 38px; line-height: 1; margin: 12px 0 4px;
  filter: drop-shadow(0 0 14px rgba(255, 152, 0, 0.45));
}
.egg-credits-pit-icon {
  display: inline-block;
  animation: egg-credits-flicker 2.4s ease-in-out infinite;
}
.egg-credits-pit-icon:nth-child(2) { animation-delay: 0.6s; }
@keyframes egg-credits-flicker {
  0%, 100% { transform: translateY(0) scale(1);   opacity: 1; }
  50%      { transform: translateY(-3px) scale(1.06); opacity: 0.92; }
}
[data-theme="light"] .egg-credits-team-name { color: var(--n-100); }

/* ────────────────────────────────────────────────────────────────────────
   About page — version banner, support cards, tech-stack tile grid.
   Layout inspired by polished enterprise app About pages.
   ──────────────────────────────────────────────────────────────────────── */
.about-page { display: flex; flex-direction: column; gap: 16px; max-width: 1280px; }

/* Banner */
.about-hero {
  display: flex; gap: 18px; align-items: center;
  background: linear-gradient(135deg, #0B3D14 0%, #1B5E20 55%, #2E7D32 100%);
  /* Literal white — `var(--n-50)` becomes near-black in light theme
     which is invisible on the dark-green banner. Hard-pin to white
     since the banner gradient is dark regardless of OS theme. */
  color: #FFFFFF; border-radius: 14px; padding: 22px 28px;
  position: relative; overflow: hidden;
}
.about-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle at center,
              rgba(255, 193, 7, 0.18), transparent 70%);
  pointer-events: none;
}
.about-hero-icon {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.12); padding: 10px;
  display: flex; align-items: center; justify-content: center;
}
.about-hero-icon img { max-width: 100%; max-height: 100%; }
.about-hero-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.about-hero-body h2 {
  font-size: 26px; font-weight: 800; margin: 0 0 4px;
  color: #FFFFFF; letter-spacing: -0.01em;
}
.about-hero-sub {
  margin: 0 0 14px; font-size: var(--fs-sm); color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.about-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.about-pill {
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px; padding: 6px 12px;
}
.about-pill-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.65); text-transform: uppercase;
}
.about-pill-value {
  /* Hard-pinned white — banner is always dark-green; theme tokens swap
     this colour with the page background in light mode and the value
     becomes unreadable on green. */
  font-size: var(--fs-sm); font-weight: 700; color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

/* Two-up row: IT Support card + Release/Roadmap stack */
.about-cols {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .about-cols { grid-template-columns: 1fr; }
}
.about-col-stack { display: flex; flex-direction: column; gap: 12px; }

/* Cards (matches the .card baseline but with tighter padding + a label) */
.about-card {
  background: var(--n-900); border: 1px solid var(--n-700);
  border-radius: 12px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.about-card-label {
  font-size: 10px; color: var(--n-500); font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 4px;
}
.about-link {
  display: flex; align-items: center; gap: 12px;
  background: var(--n-850); border: 1px solid var(--n-700);
  border-radius: 8px; padding: 10px 14px;
  text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.about-link:hover { border-color: var(--cdi-gold);
                    transform: translateY(-1px); text-decoration: none; }
.about-link svg, .about-link .icon { color: var(--info); flex-shrink: 0; }
.about-link-name { font-weight: 700; color: var(--n-100); font-size: var(--fs-sm); }
.about-link-sub  { font-size: var(--fs-xs); color: var(--n-500); }

.about-card-link {
  flex-direction: row; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.about-card-link:hover { border-color: var(--cdi-gold);
                          transform: translateY(-1px); text-decoration: none; }
.about-card-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(96, 165, 250, 0.12); color: var(--info);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.about-card-arrow {
  margin-left: auto; color: var(--n-500); font-size: 22px;
  transition: transform var(--t-fast);
}
.about-card-link:hover .about-card-arrow { transform: translateX(4px); color: var(--cdi-gold); }

/* Technology stack */
.about-stack-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.about-stack-tile {
  background: var(--n-850); border: 1px solid var(--n-700);
  border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.about-stack-icon {
  width: 30px; height: 30px; border-radius: 6px;
  background: rgba(96, 165, 250, 0.12); color: var(--info);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 4px;
}
.about-stack-cat {
  font-size: 10px; color: var(--n-500); font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.about-stack-name {
  font-weight: 700; color: var(--n-100); font-size: var(--fs-sm);
  line-height: 1.3;
}
.about-stack-desc {
  margin: 4px 0 0; font-size: var(--fs-xs); color: var(--n-300);
  line-height: 1.5;
}

/* Copyright footer with secret-egg trigger */
.about-foot {
  text-align: center; padding: 20px 0; color: var(--n-500);
  font-size: var(--fs-xs);
}

/* Light-theme overrides */
[data-theme="light"] .about-card        { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .about-link        { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .about-stack-tile  { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .about-stack-name  { color: var(--n-50); }
[data-theme="light"] .about-link-name   { color: var(--n-50); }
[data-theme="light"] .about-stack-desc  { color: var(--n-100); }

/* About → two-column row when only Release Notes + Roadmap remain */
.about-cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .about-cols-2 { grid-template-columns: 1fr; } }

/* ────────────────────────────────────────────────────────────────────────
   Roadmap page — phase cards with shipped / in-progress / planned counts
   ──────────────────────────────────────────────────────────────────────── */
.rm-summary {
  font-size: var(--fs-sm); color: var(--n-300); margin: 0 0 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rm-banner {
  background: rgba(255, 193, 7, 0.10);
  border: 1px solid rgba(255, 193, 7, 0.35);
  border-left: 3px solid var(--cdi-gold);
  border-radius: 10px; padding: 14px 18px;
  display: flex; gap: 12px; font-size: var(--fs-sm); color: var(--n-200);
  line-height: 1.5;
}
.rm-banner-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.rm-phases {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) { .rm-phases { grid-template-columns: 1fr; } }

.rm-phase {
  background: var(--n-900); border: 1px solid var(--n-700);
  border-top: 4px solid var(--n-600);
  border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.rm-phase-1 { border-top-color: var(--info);   }
.rm-phase-2 { border-top-color: #A78BFA;       }
.rm-phase-3 { border-top-color: var(--cdi-green-light); }
.rm-phase header h2 {
  font-size: 22px; margin: 4px 0 2px; color: var(--n-100); font-weight: 800;
}
.rm-phase-eyebrow {
  font-size: 10px; color: var(--info); font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.rm-phase-2 .rm-phase-eyebrow { color: #A78BFA; }
.rm-phase-3 .rm-phase-eyebrow { color: var(--cdi-green-light); }
.rm-phase-when {
  font-size: var(--fs-xs); color: var(--n-400); margin: 0;
}
.rm-phase-counts { display: flex; gap: 6px; flex-wrap: wrap; }

.rm-pill {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 700;
  border: 1px solid transparent;
}
.rm-pill-shipped    { background: rgba(74, 222, 128, 0.15);
                      border-color: rgba(74, 222, 128, 0.4);
                      color: #A3E9B7; }
.rm-pill-inprogress { background: rgba(167, 139, 250, 0.18);
                      border-color: rgba(167, 139, 250, 0.4);
                      color: #C8B6FF; }
.rm-pill-planned    { background: rgba(96, 165, 250, 0.14);
                      border-color: rgba(96, 165, 250, 0.4);
                      color: #93C5FD; }

.rm-feature-list { list-style: none; padding: 0; margin: 4px 0 0;
                   display: flex; flex-direction: column; gap: 6px; }
.rm-feature-list li {
  font-size: var(--fs-xs); line-height: 1.5; color: var(--n-300);
  padding-left: 22px; position: relative;
}
.rm-feature-list li::before {
  position: absolute; left: 0; top: 0; font-size: 12px; line-height: 1.4;
}
.rm-feature-list li.rm-shipped::before    { content: "★"; color: #A3E9B7; }
.rm-feature-list li.rm-inprogress::before { content: "⚙"; color: #C8B6FF; }
.rm-feature-list li.rm-planned::before    { content: "○"; color: #93C5FD; }

/* ────────────────────────────────────────────────────────────────────────
   Release Notes page
   ──────────────────────────────────────────────────────────────────────── */
.rn-summary {
  font-size: var(--fs-sm); color: var(--n-300); margin: 0 0 14px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
/* Release-notes summary pills + per-version badges (v2.9.0524.5 —
   bumped saturation: previous pale chips disappeared against the dark
   card. Now reads with proper colour weight in both themes. */
.rn-pill {
  display: inline-block; padding: 4px 11px; border-radius: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.rn-pill-feat { background: #0C8442; border-color: #0C8442; color: #FFFFFF; }
.rn-pill-fix  { background: #006BFF; border-color: #006BFF; color: #FFFFFF; }
.rn-pill-sec  { background: #CC0000; border-color: #CC0000; color: #FFFFFF; }
[data-theme="light"] .rn-pill-feat,
[data-theme="light"] .rn-pill-fix,
[data-theme="light"] .rn-pill-sec { color: #FFFFFF; }

/* Top-of-page disclaimer that build timestamps are UTC (v2.9.0524.6 —
   added after admins noticed the dates drift vs. PST). v2.9.0524.7 —
   light-mode contrast bumped: previous `var(--n-700)` text colour
   resolved to the border tint #B8C2CF in light theme (palette is
   inverted — see ops runbook on theme palette), leaving the note nearly invisible
   on the pale-yellow background. */
.rn-note {
  margin: 8px 0 16px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--n-300);
  background: rgba(255, 193, 7, 0.06);
  border: 1px solid rgba(255, 193, 7, 0.30);
  border-left: 3px solid var(--cdi-gold);
  border-radius: 6px;
  line-height: 1.5;
}
[data-theme="light"] .rn-note {
  color: #3A2A05;            /* near-black warm brown — high contrast on #FFF3CD */
  background: #FFF3CD;
  border-color: #E0A800;
  border-left-color: #8A5A00;
}
[data-theme="light"] .rn-note strong { color: #1F1300; }

/* Subtle italic interjections that live between release-note cards.
   Reads as a developer comment that "leaked" into the user-facing page —
   intentional easter-egg vibe. Muted enough to skip while scanning but
   visible to anyone reading carefully. Wrapped in // // to feel like a
   code comment. */
.rn-aside {
  margin: 6px auto;
  padding: 4px 14px;
  max-width: 70%;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  color: var(--n-500);
  opacity: 0.55;
  letter-spacing: 0.01em;
}
.rn-aside::before { content: "// "; opacity: 0.6; }
.rn-aside::after  { content: " //"; opacity: 0.6; }
[data-theme="light"] .rn-aside { color: var(--n-500); opacity: 0.6; }

.rn-list { display: flex; flex-direction: column; gap: 12px; }
/* Era headers — separate the release notes into the per-session arcs that
   built this dashboard (v1 Grafana → v2 HTML rewrite → v2.1 UAT → etc.).
   Larger than a card head, smaller than a page title, with a thin gold
   underline so it reads as a real section divider. */
.rn-era {
  font-size: var(--fs-lg); color: var(--n-100); font-weight: 700;
  letter-spacing: -0.01em; margin: 24px 0 4px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(255, 193, 7, 0.35);
}
[data-theme="light"] .rn-era { color: var(--n-50);
  border-bottom-color: rgba(255, 152, 0, 0.4); }
/* Era subtitle — short paragraph beneath each minor-version heading
   explaining what drove the bump (v2.9.0524.6). */
.rn-era-sub {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--n-400);
  max-width: 80ch;
}
[data-theme="light"] .rn-era-sub { color: var(--n-600); }
.rn-card {
  background: var(--n-900); border: 1px solid var(--n-700);
  border-left: 3px solid var(--n-600);
  border-radius: 10px; padding: 16px 20px;
}
.rn-card.rn-current { border-left-color: var(--cdi-gold);
                      box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.15); }
.rn-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.rn-version {
  font-size: 16px; font-weight: 800; color: var(--n-100);
  font-family: inherit; letter-spacing: -0.02em;
}
.rn-date { font-size: var(--fs-xs); color: var(--n-500); }
/* Per-version badge — v2.9.0524.7 softened: previous 800-weight all-caps
   with 0.7px letter-spacing read as harsh / shouty against the muted
   card type. Now matches the calmer body weight + Title Case casing
   used elsewhere on the page. */
.rn-badge {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em; text-transform: none;
  padding: 4px 10px; border-radius: 12px;
  border: 1px solid transparent; white-space: nowrap;
}
.rn-badge-feat { background: #0C8442; border-color: #0C8442; color: #FFFFFF; }
.rn-badge-fix  { background: #006BFF; border-color: #006BFF; color: #FFFFFF; }
.rn-badge-sec  { background: #CC0000; border-color: #CC0000; color: #FFFFFF; }
[data-theme="light"] .rn-badge-feat,
[data-theme="light"] .rn-badge-fix,
[data-theme="light"] .rn-badge-sec { color: #FFFFFF; }
.rn-card ul { margin: 0; padding-left: 22px; }
.rn-card li { font-size: var(--fs-sm); line-height: 1.55; color: var(--n-300);
              margin-bottom: 4px; }
.rn-card li:last-child { margin-bottom: 0; }
/* Release-notes inline code: blend with surrounding body text instead of
   rendering as gold-on-dark chips. Operators reading the release notes
   want to scan the narrative, not pick out implementation tokens. */
.rn-card code {
  background: transparent;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Light-theme tweaks */
[data-theme="light"] .rm-phase,
[data-theme="light"] .rn-card { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .rm-phase header h2,
[data-theme="light"] .rn-version { color: var(--n-50); }
[data-theme="light"] .rm-feature-list li,
[data-theme="light"] .rn-card li { color: var(--n-100); }
[data-theme="light"] .rn-card code { background: transparent; color: inherit; }
[data-theme="light"] .rm-banner {
  background: rgba(255, 193, 7, 0.18);
  border-color: rgba(255, 152, 0, 0.4);
  color: var(--n-50);
}

/* Combined Avapac tile (Overview Powder Lines row).
   Two cells side-by-side inside one section-card so both Avapac values
   show independently but the tile is the same size as P6/P7/P8 next to it. */
.avapac-pair {
  display: flex; gap: 8px; flex: 1; align-items: center;
  justify-content: center; padding: 4px 0;
}
.avapac-cell {
  flex: 1; min-width: 0; text-align: center;
  border: 1px solid var(--n-700); border-radius: 6px;
  padding: 6px 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.avapac-cell-label {
  font-size: 9px; color: var(--n-500);
  text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700;
}
.avapac-cell-value {
  font-size: var(--fs-2xl); font-weight: 700; line-height: 1;
  color: var(--n-50); font-variant-numeric: tabular-nums;
}
[data-theme="light"] .avapac-cell        { border-color: #E2E8F0; background: #F8FAFC; }
[data-theme="light"] .avapac-cell-value  { color: var(--n-50); }

/* ════════════════════════════════════════════════════════════════════════
   TIPTON-SPECIFIC ADDITIONS
   These classes exist only at Tipton (this plant's powder planned-tile
   styling, the enhanced tile-drawer "Time in status" + "Numeric trends"
   panels, and the About page's stacked section). They are appended after
   the shared design system so they layer cleanly on top of it. The rest
   of this stylesheet is kept in lock-step with the sister plant.
   ════════════════════════════════════════════════════════════════════════ */

/* Powder "planned" placeholder tiles — greyed-out dashed card matching the
   bh-planned treatment on the Butter page. (Sister plant uses .eq-missing;
   Tipton standardised on .eq-planned for the powder roadmap tiles.) */
.eq-planned {
  border-style: dashed;
  border-color: var(--n-700);
  border-left-style: dashed;
  border-left-color: var(--n-700);
  opacity: 0.55;
  background: rgba(15,23,42,0.4);
}
.eq-planned .eq-label,
.eq-planned .eq-status { color: var(--n-500); font-style: italic; }
.eq-planned .eq-status { font-size: var(--fs-xs); letter-spacing: 0.8px; }

/* About page — full-width stacked section card. */
.about-stack-section { padding: 24px 26px; }

/* Tile-drawer enhancements (Time in status panel + Numeric trends grid).
   Sit inside the drawer's `.tile-drawer-extra` container; injected by
   tile-drawer.js. Tokens follow the rest of the design system. */
.drawer-tis-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.drawer-tis-row { font-size: var(--fs-sm); }
.drawer-tis-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.drawer-tis-state { font-weight: 700; }
.drawer-tis-meta { font-variant-numeric: tabular-nums; color: var(--n-400); font-size: var(--fs-xs); }
.drawer-tis-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--n-800); overflow: hidden; }
.drawer-tis-bar-fill { height: 100%; transition: width var(--t-fast); }
.drawer-trends-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.drawer-trend-card { padding: 10px 12px; }
.drawer-trend-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.drawer-trend-label { font-size: var(--fs-xs); color: var(--n-400); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.drawer-trend-unit { font-size: var(--fs-xs); color: var(--n-500); }
.drawer-trend-chart { width: 100%; height: 130px; }

/* ── Service accounts redesign: overview/detail/modal (v2.9.0530.3) ───────── */
.sa-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sa-head-title { display: flex; align-items: center; gap: 10px; }
.sa-head-title h3 { margin: 0; }
.sa-error { color: #CC0000; margin-top: 12px; }

/* clickable overview rows */
.sa-table-click tbody tr.sa-row { cursor: pointer; transition: background 0.08s; }
.sa-table-click tbody tr.sa-row:hover { background: var(--n-850); }
.sa-table-click tbody tr.sa-row:focus-visible { outline: 2px solid var(--cdi-green, #2e7d32); outline-offset: -2px; }
.sa-row-arrow { color: var(--n-500); font-size: 18px; font-weight: 700; }

/* pagination */
.sa-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 10px; }
.sa-pager-info { font-size: var(--fs-xs); color: var(--n-400); font-variant-numeric: tabular-nums; }

/* detail view */
.sa-detail-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sa-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sa-detail-title-row { display: flex; align-items: center; gap: 10px; }
.sa-detail-title { margin: 0; }
.sa-detail-desc { color: var(--n-400); margin: 4px 0 14px; }
.sa-detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 6px; }
.sa-meta { border: 1px solid var(--n-700); border-radius: var(--r-sm); padding: 8px 11px; background: var(--n-850); }
.sa-meta-lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--n-500); margin-bottom: 3px; }
.sa-scope-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sa-scope-chip { font-size: 10px; padding: 1px 7px; border-radius: 9px; background: var(--n-800); color: var(--n-300); border: 1px solid var(--n-700); white-space: nowrap; }
.sa-usage-lbl { font-size: var(--fs-xs); color: var(--n-400); text-transform: uppercase; letter-spacing: 0.5px; }

/* create/edit modal */
.sa-modal-root { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.sa-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); }
.sa-modal-card { position: relative; background: var(--n-900); border: 1px solid var(--n-700); border-radius: var(--r-md); width: min(780px, 100%); max-height: calc(100vh - 80px); display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
.sa-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--n-700); }
.sa-modal-head h3 { margin: 0; }
.sa-modal-x { background: none; border: 0; color: var(--n-400); font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); }
.sa-modal-x:hover { color: var(--n-100); background: var(--n-800); }
.sa-modal-body { padding: 18px; overflow-y: auto; }
.sa-modal-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--n-700); }

[data-theme="light"] .sa-modal-card { background: #ffffff; }
[data-theme="light"] .sa-meta { background: var(--n-900); }
[data-theme="light"] .sa-table-click tbody tr.sa-row:hover { background: var(--n-850); }
[data-theme="light"] .sa-scope-chip { background: var(--n-900); }


/* ════ Admin parity with Visalia: Logs toolbar + General form-row layout (v2.9.0530.4) ════ */
/* Appended to override the older settings/log CSS so the Admin area matches the
   Visalia reference exactly. Admin-only classes — operational pages unaffected. */
/* ── System Logs — single filter bar + expandable detail (v2.9.0529.4) ───── */
.log-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.log-toolbar-search {
  flex: 1 1 240px;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--n-900);
  border: 1px solid var(--n-700);
  border-radius: 6px;
  color: var(--n-500);
}
.log-toolbar-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 7px 0;
  outline: none;
}
.log-toolbar-select {
  flex: 0 0 auto;
  padding: 7px 10px;
  background: var(--n-900);
  border: 1px solid var(--n-700);
  border-radius: 6px;
  color: var(--n-200);
  font: inherit;
  cursor: pointer;
}
.log-toolbar-auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--n-300);
  cursor: pointer;
}
.log-toolbar-auto small { color: var(--n-500); }
.log-timerange { position: relative; }
.log-timerange-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1400;
  min-width: 260px;
  background: var(--n-900);
  border: 1px solid var(--n-700);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.log-timerange-pop label { display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-xs); color: var(--n-400); }
.log-timerange-pop input {
  padding: 6px 8px; background: var(--n-850);
  border: 1px solid var(--n-700); border-radius: 5px;
  color: var(--n-100); font: inherit;
}

/* Blue left accent on the whole feed window — mirrors the reference. */
.log-feed { border-left: 3px solid var(--accent-blue, #3B82F6); }

/* The expanded detail panel spans all four grid columns and indents
   slightly under the message. */
.log-detail {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
}
.log-detail-row { display: flex; gap: 10px; }
.log-detail-key {
  flex: 0 0 110px;
  color: var(--n-500);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
}
.log-row { cursor: pointer; }
.log-row:hover { background: rgba(255,255,255,0.03); }

[data-theme="light"] .log-toolbar-search,
[data-theme="light"] .log-toolbar-select,
[data-theme="light"] .log-timerange-pop {
  background: #ffffff;
  border-color: var(--n-300);
  color: var(--n-700);
}
[data-theme="light"] .log-toolbar-search { color: var(--n-500); }
[data-theme="light"] .log-toolbar-auto   { color: var(--n-700); }
[data-theme="light"] .log-detail { background: rgba(0,0,0,0.03); }
[data-theme="light"] .log-row:hover { background: rgba(0,0,0,0.03); }


/* ── Settings page — grids ───────────────────────────────────────────────── */
.settings-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.settings-grid-wide { grid-template-columns: 1fr; }

/* Placeholder pane inside cards (for "Coming next" sections) */
.placeholder-pane {
  background: rgba(255, 193, 7, 0.05);
  border: 1px dashed rgba(255, 193, 7, 0.30);
  border-radius: var(--r-sm);
  padding: 18px;
  margin-top: 8px;
}
[data-theme="light"] .placeholder-pane {
  background: rgba(180, 83, 9, 0.05);
  border-color: rgba(180, 83, 9, 0.30);
}
.placeholder-title {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--cdi-gold); letter-spacing: 1px; text-transform: uppercase;
  margin: 0 0 8px;
}
[data-theme="light"] .placeholder-title { color: #B45309; }
.placeholder-pane p { margin: 0 0 8px; color: var(--n-400); font-size: var(--fs-sm); line-height: 1.55; }
.placeholder-pane p:last-child { margin-bottom: 0; }
.placeholder-hint { font-style: italic; color: var(--n-500) !important; }
.settings-card { padding: 20px; }
.settings-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.settings-card-head h3 {
  font-size: var(--fs-md); color: var(--n-50); font-weight: 600;
}
.settings-card-head .icon { color: var(--cdi-gold); }
.settings-card-sub {
  font-size: var(--fs-xs); color: var(--n-500); margin: 0 0 16px;
}
.settings-card form { display: flex; flex-direction: column; gap: 12px; }
.settings-field {
  display: flex; flex-direction: column; gap: 4px;
}
.settings-field label {
  font-size: var(--fs-xs); color: var(--n-400); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.settings-field input, .settings-field select, .settings-field textarea {
  background: var(--n-950); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  padding: 9px 11px; font-size: var(--fs-base);
  font-family: inherit;
  transition: border-color var(--t-fast);
}
.settings-field input:focus, .settings-field select:focus,
.settings-field textarea:focus {
  outline: none; border-color: var(--cdi-gold);
}
.settings-field input[readonly], .settings-field input[disabled] {
  background: var(--n-900); color: var(--n-500); cursor: not-allowed;
}
.settings-field .hint {
  font-size: var(--fs-xs); color: var(--n-500); margin-top: 2px;
}

/* ── General settings — 2-column grid + label:field rows (v2.9.0529.9) ─────
   Display & Plant + Shift schedule share the top row (50% each); Sibling
   plants (`.general-full`) spans the full width below. Cards lay their fields
   out as dense "label : field" rows (`.form-row`). */
.settings-grid--general {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;            /* no equal-height stretch */
}
.settings-grid--general .general-full { grid-column: 1 / -1; }
.settings-grid--general .settings-card        { padding: 14px 18px; }
.settings-grid--general .settings-card-head   { margin-bottom: 8px; gap: 8px; }
.settings-grid--general .settings-card-head h3 { font-size: var(--fs-sm); }
.settings-grid--general .settings-card-sub    { margin: -4px 0 8px; font-size: 11px; line-height: 1.35; }

/* The label:field row. Label right-aligned in a fixed column, field fills
   the rest. Label tops align with the input (not the hint) via padding-top. */
.form-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid var(--n-800);
}
.form-row:last-child { border-bottom: 0; }
.form-row > label {
  font-size: 12px; font-weight: 600; color: var(--n-300);
  text-align: right; padding-top: 7px; letter-spacing: 0.2px;
}
.form-row-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.form-row-field input,
.form-row-field select,
.form-row-field textarea {
  padding: 6px 10px; font-size: 13px; line-height: 1.3;
  background: var(--n-950); color: var(--n-100);
  border: 1px solid var(--n-700); border-radius: var(--r-sm);
  font-family: inherit; width: 100%; box-sizing: border-box;
}
.form-row-field input:focus,
.form-row-field select:focus { outline: none; border-color: var(--cdi-gold); }
.form-row-field input[readonly] { background: var(--n-900); color: var(--n-500); cursor: not-allowed; }
.form-row-field .hint { font-size: 10px; color: var(--n-500); line-height: 1.3; }

/* Shift + sibling editors keep their own inline grids; just tighten the
   field inputs + bottom margins so they match the density. */
.settings-grid--general .settings-field { gap: 2px; }
.settings-grid--general .settings-field label { font-size: 10px; letter-spacing: 0.5px; }
.settings-grid--general .settings-field input,
.settings-grid--general .settings-field select {
  padding: 5px 9px !important; font-size: 13px !important; line-height: 1.3 !important;
}
.settings-grid--general .settings-field .hint { font-size: 10px; }
.settings-grid--general .settings-card > [style*="margin-bottom"] { margin-bottom: 6px !important; }
/* Collapse to a single column (cards stack, labels above inputs) on narrow
   viewports so nothing gets cramped. */
@media (max-width: 900px) {
  .settings-grid--general { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; gap: 3px; }
  .form-row > label { text-align: left; padding-top: 0; }
}