/* ============================================================
   W8Gear — design tokens & styles
   ============================================================ */

:root {
  /* Accent (overridden by Tweaks) */
  --accent: #D97706;
  --accent-2: color-mix(in oklab, var(--accent) 75%, white);
  --accent-soft: color-mix(in oklab, var(--accent) 14%, white);
  --accent-text: white;

  /* Neutrals — cool */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #FBFCFD;
  --soft: #F1F4F7;
  --line: #E5E9EE;
  --line-strong: #D4DAE2;
  --text: #0F1620;
  --text-2: #3A4654;
  --muted: #6A7585;
  --muted-2: #9098A3;

  /* Status */
  --ok: #16A34A;
  --ok-bg: #DCFCE7;
  --warn: #D97706;
  --warn-bg: #FEF3C7;
  --crit: #DC2626;
  --crit-bg: #FEE2E2;
  --info: #2563EB;
  --info-bg: #DBEAFE;

  /* Spacing scale */
  --r1: 6px;
  --r2: 10px;
  --r3: 14px;
  --r4: 20px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(15, 22, 32, 0.05), 0 1px 3px rgba(15, 22, 32, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 22, 32, 0.06), 0 2px 4px rgba(15, 22, 32, 0.04);
  --shadow-3: 0 12px 32px rgba(15, 22, 32, 0.12);

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

  /* Density */
  --pad-card: 18px;
  --pad-screen: 28px;
  --gap-grid: 16px;
  --sidebar-w: 248px;
  --topbar-h: 60px;

  /* Tells the browser to use its light defaults for native UI (autofill, scrollbars,
     date pickers, select dropdowns). Overridden in dark mode below. */
  color-scheme: light;
}

:root[data-density="compact"] {
  --pad-card: 12px;
  --pad-screen: 20px;
  --gap-grid: 12px;
  --topbar-h: 52px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0F14;
  --surface: #131922;
  --surface-2: #181F2A;
  --soft: #1B2330;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #ECF1F7;
  --text-2: #BCC6D3;
  --muted: #8492A4;
  --muted-2: #5F6C7E;
  --accent-soft: color-mix(in oklab, var(--accent) 22%, #131922);
  --ok-bg: color-mix(in oklab, var(--ok) 18%, #131922);
  --warn-bg: color-mix(in oklab, var(--warn) 18%, #131922);
  --crit-bg: color-mix(in oklab, var(--crit) 18%, #131922);
  --info-bg: color-mix(in oklab, var(--info) 18%, #131922);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.5);
}

/* ============================================================
   Reset / base
   ============================================================ */
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; letter-spacing: -0.02em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--accent); cursor: pointer; text-decoration: none; }
a.link:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 500; font-size: 14px;
  border-radius: var(--r2); border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms, transform 80ms;
  cursor: pointer; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-md { padding: 9px 14px; }
.btn-lg { padding: 12px 18px; font-size: 15px; }
.btn-primary {
  background: var(--accent); color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--accent) 70%, black) inset;
}
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 88%, black); }
.btn-secondary {
  background: var(--surface); color: var(--text);
  border-color: var(--line-strong);
}
.btn-secondary:hover { background: var(--soft); }
.btn-ghost {
  background: transparent; color: var(--text-2); border-color: transparent;
}
.btn-ghost:hover { background: var(--soft); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r2);
  background: transparent; border: 1px solid transparent; color: var(--text-2);
  position: relative;
}
.icon-btn:hover { background: var(--soft); color: var(--text); }

/* ============================================================
   Auth screens
   ============================================================ */
.auth-shell {
  display: grid; grid-template-columns: 1.05fr 1fr;
  min-height: 100vh; background: var(--bg);
}
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
}
.auth-brand {
  background: linear-gradient(155deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 60%, #0a0f1a) 100%);
  color: white; padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-brand::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.16), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(0,0,0,0.18), transparent 50%);
  pointer-events: none;
}
.auth-brand::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-mark { display: flex; align-items: center; gap: 12px; }
.logo { width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,0.1); border-radius: 10px;
}
.logo-text { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.logo-text span { font-weight: 400; opacity: 0.75; }
.auth-brand-copy h1 { font-size: 38px; line-height: 1.1; font-weight: 600; max-width: 460px; }
.auth-brand-copy p { margin-top: 16px; max-width: 460px; font-size: 15px; opacity: 0.85; line-height: 1.55; }
.auth-brand-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; opacity: 0.9; }
.ticker { display: flex; align-items: center; gap: 8px; }
.ticker .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6EE7B7; box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.25);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.auth-main {
  display: grid; place-items: center; padding: 40px 24px;
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface); border-radius: var(--r4);
  padding: 36px;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}
@media (max-width: 900px) {
  .auth-card { box-shadow: none; border: none; padding: 24px; max-width: 460px; }
}
.auth-head { margin-bottom: 24px; }
.auth-head h2 { font-size: 24px; margin-bottom: 6px; }
.auth-head p { color: var(--muted); font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.auth-foot { text-align: center; margin-top: 12px; font-size: 14px; color: var(--muted); }
.auth-sent { text-align: center; padding: 12px 0; }
.auth-sent-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
  display: grid; place-items: center; margin: 0 auto 16px;
}
.auth-sent h3 { font-size: 18px; margin-bottom: 8px; }
.auth-sent p { color: var(--muted); margin-bottom: 20px; line-height: 1.6; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Fields
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.field-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r2); padding: 10px 12px;
  transition: border-color 120ms, box-shadow 120ms;
  color: var(--muted);
}
.field-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.field-input input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14.5px; color: var(--text);
  min-width: 0;
}
/* Same reset for a textarea in a field-input (else it draws its own native border inside the frame). */
.field-input textarea {
  flex: 1; border: none; outline: none; background: transparent; resize: vertical;
  font-family: inherit; font-size: 14.5px; color: var(--text);
  min-width: 0;
}
/* Chrome's autofill paints its own background and text colour with high specificity.
   Repaint by faking a huge inset shadow in --surface and forcing the text colour back to --text.
   The long transition delay prevents the yellow flash on focus. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
.field-eye {
  background: transparent; border: none; padding: 2px; color: var(--muted);
  display: inline-flex;
}
.field.has-error .field-input { border-color: var(--crit); }
/* Styled native select — wrap a bare <select> in .select-wrap: strips the platform chrome,
   draws the design-system frame + a caret, and picks up both themes via the shared tokens. */
.select-wrap { position: relative; display: inline-flex; align-items: center; min-width: 260px; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  width: 100%; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  padding: 10px 36px 10px 12px; font-size: 14px; font-weight: 500;
  transition: border-color 120ms, box-shadow 120ms;
}
.select-wrap select:hover { border-color: var(--accent); }
.select-wrap select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.select-wrap::after {
  content: ""; position: absolute; right: 14px; top: 50%; pointer-events: none;
  width: 7px; height: 7px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
/* Inside a two-column form grid the 260px floor would force each track wider than the card
   at narrow viewports — let the grid own the width there. */
.form-grid .select-wrap { min-width: 0; width: 100%; }
.field-hint { font-size: 12px; color: var(--muted); }
.field-error { font-size: 12px; color: var(--crit); }
.field-ok { font-size: 12px; color: var(--ok); }
/* Add-a-setting row on the gear/sensor config grid: Group / Key / Value / Add, aligned to the table. */
.config-add-row { display: grid; grid-template-columns: 22% 26% 1fr auto; gap: 8px; align-items: center; }
@media (max-width: 640px) { .config-add-row { grid-template-columns: 1fr; } }
/* Bulk "add multiple via JSON" affordance on the config panels. */
.config-bulk { margin-top: 16px; }
.config-bulk > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); user-select: none; }
.config-sample {
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 10px 12px; margin: 8px 0; overflow-x: auto;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--muted); white-space: pre;
}
.config-json {
  width: 100%; min-height: 130px; resize: vertical;
  font-family: var(--font-mono); font-size: 13px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r2);
  background: var(--surface); color: var(--text);
}
.config-json:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* "Missing vs template" attention banner on the gear/sensor config panels. */
.template-gap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid color-mix(in oklab, var(--warn) 30%, transparent);
  border-radius: var(--r2); padding: 10px 12px; margin-bottom: 12px; font-size: 13px;
}
.template-gap > span { display: inline-flex; align-items: center; gap: 6px; }

/* Deviation, not absence: the device carries settings its type's template doesn't define.
   Muted rather than warn-coloured — an extra setting is a deliberate choice often enough that
   it should read as "note this", not "fix this". The missing-keys banner above keeps the warn
   colour because that one IS actionable via Apply template. */
.template-gap--extra {
  background: var(--surface); color: var(--muted);
  border-color: var(--line);
}
.template-orphan {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  color: var(--warn); cursor: help;
}

/* Device-own vs portal-override tabs on the gear/sensor config panels. Only rendered when the
   device actually carries overrides, so a plain sensor keeps the single-table screen it had. */
.config-scope-tabs { margin-bottom: 12px; max-width: 460px; }
.config-scope-tabs em {
  font-style: normal; font-size: 11px; font-weight: 600;
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--line); color: var(--text-2);
}
.config-scope-tabs button.active em { background: var(--accent-soft); color: var(--accent); }

/* Which layer an override row belongs to. Muted, not warn-coloured: these rows are correct and
   expected — the whole point of moving them here is that they are NOT a deviation to fix. */
.scope-chip {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--line); color: var(--text-2); white-space: nowrap;
}
.scope-chip--user { background: var(--accent-soft); color: var(--accent); }

/* Read-only key/value spec list (channel Configuration status screens). */
.config-spec { display: flex; flex-direction: column; gap: 0; margin: 0; }
.config-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.config-row:last-child { border-bottom: none; }
.config-row dt { font-size: 13px; font-weight: 500; color: var(--text-2); margin: 0; }
.config-row dd { margin: 0; font-size: 14px; color: var(--text); word-break: break-word; }
@media (max-width: 560px) {
  .config-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Help page */
.help-lead { margin: 0 0 14px; font-size: 14.5px; }
.help-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.help-list li { font-size: 14px; color: var(--text); line-height: 1.5; }
.help-list code, .config-row code { font-size: 12.5px; padding: 1px 5px; border-radius: var(--r1); background: var(--soft); }
.help-foot { margin-top: 12px; font-size: 12.5px; }

/* Profile page — vertical stack of settings cards */
.profile-stack { display: flex; flex-direction: column; gap: 16px; }

/* Lock screen avatar */
.lock-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 20px; margin: 0 auto 12px;
}

.check {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-2); cursor: pointer; user-select: none; font-size: 13px;
}
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.check.terms { font-size: 13px; line-height: 1.5; align-items: flex-start; }
.check.terms input { margin-top: 2px; }

.pw-strength {
  display: flex; gap: 4px; align-items: center; margin-top: -6px;
}
.pw-strength .bar { flex: 1; height: 3px; background: var(--soft); border-radius: 2px; }
.pw-strength em { font-style: normal; font-size: 12px; margin-left: 8px; color: var(--muted); }
.pw-strength[data-level="1"] .bar:nth-child(-n+1),
.pw-strength[data-level="2"] .bar:nth-child(-n+2),
.pw-strength[data-level="3"] .bar:nth-child(-n+3),
.pw-strength[data-level="4"] .bar:nth-child(-n+4) {
  background: var(--accent);
}
.pw-strength[data-level="1"] .bar:nth-child(-n+1) { background: var(--crit); }
.pw-strength[data-level="2"] .bar:nth-child(-n+2) { background: var(--warn); }

/* ============================================================
   App shell
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  height: var(--topbar-h);
}
.logo-row { display: flex; align-items: center; gap: 10px; }
.logo-mini { display: grid; place-items: center; width: 32px; height: 32px; }
.logo-text-sm { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.logo-text-sm span { font-weight: 400; color: var(--muted); }
.sidebar-close { display: none; }

/* Scroll container holding the stacked nav groups; the head + foot stay pinned. */
.sidebar-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar-nav {
  padding: 6px 10px;
  display: flex; flex-direction: column; gap: 1px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px; border-radius: var(--r2);
  color: var(--text-2); font-size: 14px; font-weight: 500;
  cursor: pointer; position: relative;
}
.nav-item:hover { background: var(--soft); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}
/* Child link under a sidebar section header (Configuration sub-group, etc.) — indented, slightly smaller. */
.nav-item.nav-sub {
  padding: 8px 12px 8px 22px;
  font-size: 13.5px;
}
.nav-badge {
  margin-left: auto;
  background: var(--crit); color: white;
  font-size: 11px; font-style: normal; font-weight: 600;
  padding: 2px 6px; border-radius: var(--r-pill);
  min-width: 18px; text-align: center;
}
.sidebar-foot { padding: 14px; border-top: 1px solid var(--line); }
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 600; font-size: 13px;
  flex-shrink: 0;
}
.avatar-sm { width: 30px; height: 30px; font-size: 12px; cursor: pointer; }
.user-meta { flex: 1; min-width: 0; }
.user-name { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 12px; color: var(--muted); }

.app-main {
  display: flex; flex-direction: column; min-width: 0;
}
.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--pad-screen);
  position: sticky; top: 0; z-index: 20;
}
.mobile-menu { display: none; }
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--muted);
  flex: 0 1 auto; min-width: 0;
}
.breadcrumb a { color: var(--muted); cursor: pointer; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { color: var(--text); font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.topbar-alerts { position: relative; }

/* Header scope switcher — tenant + account dropdowns in the top bar. The scope-bar's auto right
   margin pushes .topbar-actions to the far edge; the fixed scrim catches outside clicks to close. */
.scope-bar {
  display: flex; align-items: center; gap: 8px;
  margin-right: auto; min-width: 0;
  position: relative; z-index: 2;
}
.scope-field { position: relative; min-width: 0; }
.scope-pill {
  display: flex; align-items: center; gap: 7px;
  min-width: 240px; max-width: 460px;
  padding: 6px 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  color: var(--text); font-family: inherit; font-size: 13px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.scope-pill:hover:not(:disabled) { border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
.scope-pill.open { border-color: var(--accent); background: var(--accent-soft); }
.scope-pill:disabled { cursor: default; }
.scope-pill-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-2); flex-shrink: 0;
}
.scope-value {
  flex: 1; min-width: 0;
  font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scope-pill svg { color: var(--muted); flex-shrink: 0; }
.scope-pill.open svg { color: var(--accent); }
.scope-menu {
  position: absolute; left: 0; top: calc(100% + 6px);
  min-width: 280px; max-width: 440px; max-height: 60vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r2);
  box-shadow: var(--shadow-2);
  padding: 4px; z-index: 3;
}
.scope-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: none;
  padding: 8px 10px; border-radius: var(--r1);
  font-size: 13px; color: var(--text); cursor: pointer; text-align: left;
  font-family: inherit;
}
.scope-menu-item:hover { background: var(--soft); }
.scope-menu-item.active { background: var(--accent-soft); color: var(--accent); }
.scope-menu-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-menu-count {
  font-size: 11px; font-style: normal; color: var(--muted-2);
  font-family: var(--font-mono);
  background: var(--soft); padding: 1px 6px; border-radius: var(--r-pill);
}
.scope-menu-item.active .scope-menu-count { background: var(--surface); color: var(--accent); }
/* Outside-click scrim. It sits inside the sticky topbar's stacking context, so the topbar controls,
   the scope pills, and the sidebar are all lifted above it (below) — the scrim then only covers the
   main content area, i.e. clicking the page (but not the chrome) closes an open dropdown. */
.scope-scrim { position: fixed; inset: 0; z-index: 1; background: transparent; }
/* Keep the rest of the top-bar chrome clickable over the scrim (first click must hit the control,
   not just dismiss the menu). Navigation-triggering controls also close the menu via LocationChanged. */
.breadcrumb, .mobile-menu, .topbar-actions { position: relative; z-index: 2; }
/* The sidebar lives outside the topbar's stacking context; raise it so its links beat the scrim too. */
.sidebar { z-index: 30; }
/* Narrow screens: drop the "Tenant"/"Account" prefixes, keep just the values. */
@media (max-width: 720px) {
  .scope-pill-label { display: none; }
  .scope-pill { min-width: 0; max-width: 150px; }
}

/* -- Mobile scope: one trigger opens a bottom-sheet modal with tenant + account (so the two pills
   don't collide in the cramped topbar). The trigger is hidden on desktop; the pills are hidden on mobile. */
.scope-mobile-trigger { display: none; }
.scope-modal-backdrop { position: fixed; inset: 0; z-index: 40; background: color-mix(in oklab, var(--text) 45%, transparent); }
.scope-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  border-radius: 16px 16px 0 0; box-shadow: var(--shadow-2);
  max-height: 75vh; overflow-y: auto; padding: 8px 12px 20px;
  animation: scope-sheet-up 160ms ease-out;
}
@keyframes scope-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.scope-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 8px; font-weight: 600; font-size: 15px; }
.scope-sheet-section { margin-top: 6px; }
.scope-sheet-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-2); padding: 8px 6px 4px; }

@media (max-width: 768px) {
  /* Swap the two inline pills for the single trigger. */
  .scope-bar .scope-field { display: none; }
  .scope-mobile-trigger {
    display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
    padding: 6px 12px; background: var(--soft); border: 1px solid var(--line);
    border-radius: var(--r2); color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer;
    transition: border-color 120ms;
  }
  .scope-mobile-trigger:hover { border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
  .scope-mobile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; text-align: left; }
  .scope-mobile-tenant { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scope-mobile-account { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scope-mobile-trigger > svg:last-child { color: var(--muted); flex-shrink: 0; margin-left: auto; }
  /* Drop the whole breadcrumb (product name + route) on mobile — the scope selector takes the space. */
  .breadcrumb { display: none; }
}
.pulse-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crit);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--crit) 50%, transparent);
  animation: pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--crit) 60%, transparent); }
  100% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--crit) 0%, transparent); }
}

.content {
  flex: 1;
  padding: var(--pad-screen);
  min-width: 0;
}

.bottom-nav { display: none; }

/* ============================================================
   Page heads
   ============================================================ */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 20px;
}
.page-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.page-head-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ============================================================
   Dashboard
   ============================================================ */
.summary-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid);
  margin-bottom: 20px;
}
.summary-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: 16px 18px;
}
.summary-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.summary-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 32px; font-weight: 600; margin-top: 6px;
  letter-spacing: -0.02em;
}

.filter-bar {
  display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.search-input {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r2); padding: 8px 12px;
  color: var(--muted);
}
.search-input input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--text);
}
.filter-bar select {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r2); padding: 8px 12px;
  font-size: 14px; color: var(--text);
  cursor: pointer;
  min-width: 160px;
}

.sensor-grid {
  display: grid; gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.sensor-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--pad-card);
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer;
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
}
.sensor-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}
/* Account grouping on the dashboard grid */
.sensor-account-section {
  margin-bottom: 24px;
}
.sensor-account-section:last-child { margin-bottom: 0; }
.sensor-account-header {
  display: flex; align-items: baseline; gap: 12px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.sensor-account-header h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.sensor-account-header .muted { font-size: 12px; }

.sensor-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  /* Fixed-height band (template): single-line name (ellipsised) + status badge.
     Hard-locked like the footer so the reading band below it starts at the same y on
     every card — current and future — which keeps headline readings aligned across the grid. */
  min-height: 28px; max-height: 28px; overflow: hidden; flex-shrink: 0;
}
/* The text wrapper must allow shrinking below content width (default min-width:auto blocks it). */
.sensor-card-head > .sensor-card-head-text {
  min-width: 0; flex: 1;
}
.sensor-name {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sensor-name.s-md { font-size: 15px; }   /* default */
.sensor-name.s-sm { font-size: 13px; }   /* longer names */
.sensor-name.s-xs { font-size: 11px; }   /* very long; ellipsis kicks in beyond this */

.sensor-meta {
  color: var(--muted); margin-top: 2px; font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sensor-meta.s-md { font-size: 12px; }
.sensor-meta.s-sm { font-size: 11px; }
.sensor-meta.s-xs { font-size: 10px; }
.sensor-card-body {
  display: flex; gap: 16px; align-items: center;
}
.sensor-card-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sensor-fill {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.sensor-fill .big {
  font-family: var(--font-mono); font-weight: 600; font-size: 28px;
  letter-spacing: -0.02em;
}
.sensor-fill .big em { font-style: normal; color: var(--muted); font-size: 18px; font-weight: 500; margin-left: 1px; }
.sensor-fill .cap { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.sensor-mini-stats {
  display: flex; gap: 14px; font-size: 12.5px; color: var(--muted-2);
  flex-wrap: wrap;
}
.sensor-mini-stats > div { display: flex; align-items: center; gap: 4px; }

/* === Bin-specific card layout ===
   - Main reading centered up top
   - Time-ago centered just below the main reading
   - Body: silo on the left, secondary readout in the middle
   - Weather strip on its own line below the body, right-justified */
.sensor-card-main {
  text-align: center;
  display: flex; justify-content: center; align-items: baseline; gap: 6px;
  margin-top: 2px;
  /* Fixed-height band (template): the headline reading. Locked so the big number sits on
     the same baseline across every tile — only the data/image band below flexes. */
  min-height: 26px; max-height: 26px; overflow: hidden; flex-shrink: 0;
}
.sensor-card-time {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  font-size: 11.5px;
  margin-top: -4px;
  /* Fixed-height band (template): the "Xh ago" last-reading line. */
  min-height: 16px; max-height: 16px; overflow: hidden; flex-shrink: 0;
}
.bin-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.bin-left  { display: flex; justify-content: center; min-width: 0; }
.bin-mid   { min-width: 0; }

.sensor-card-weather {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--muted);
  flex-wrap: nowrap; overflow: hidden;
  padding-top: 4px;
  border-top: 1px dashed color-mix(in oklab, var(--line) 60%, transparent);
  /* Fixed-height band (template): hard-locked like the footer so the weather strip is the
     same height — and the same distance above the footer — on every tile. Empty slots show
     "—" so cards without weather reserve the identical row. */
  min-height: 28px; max-height: 28px; flex-shrink: 0;
}
/* Fixed 22×22 slot for the icon so cards without weather still occupy the same width. */
.sensor-card-weather .weather-icon-slot {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sensor-card-weather img { width: 22px; height: 22px; flex-shrink: 0; }
.sensor-card-weather .weather-cond { color: var(--text-2); white-space: nowrap; }
.sensor-card-weather .weather-item { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Equal-height tile template. The card stretches to the grid row's tallest card
   (min-height: 100%). Going up from the bottom, every band is a FIXED height — footer,
   weather, reading, header — and the DATA/IMAGE band (.sensor-card-body) is the sole
   flex-grow absorber. So the weather strip always sits the same distance above the footer,
   footers line up across the row, and any height difference is taken up by the data band
   (its gauge/readout stays centred). This banding is the template for any new sensor family. */
.sensor-card { min-height: 100%; }
.sensor-card > .sensor-card-body { flex: 1 1 auto; min-height: 0; }

/* Headroom row above the days/rate grid. Same 2-column grid as the row below
   so the value lands at the AVG RATE column's left edge. */
.readout-stack-row {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: baseline; gap: 6px 12px;
  margin-bottom: 6px;
}
.readout-stack-row .muted {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
}
.readout-stack-row strong {
  font-size: 14px; font-weight: 600; font-family: var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Silhouette label overlay (editable or read-only). Positioned over the SVG. */
.silhouette-wrap { position: relative; display: inline-block; }
.silhouette-label {
  position: absolute; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  outline: none;
  padding: 1px 2px;
  /* Subtle outline lifts the label off whatever fill colour is behind it. */
  text-shadow: 0 0 2px var(--surface), 0 0 2px var(--surface);
}
.silhouette-label-input:hover {
  border-color: color-mix(in oklab, var(--text) 18%, transparent);
  border-radius: 3px;
}
.silhouette-label-input:focus {
  border-color: var(--accent);
  background: var(--surface);
  border-radius: 3px;
}
.silhouette-label-input::placeholder { color: var(--muted-2); font-weight: 500; }
.sensor-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
  line-height: 1.2;
  /* Lock the footer to a single 32px line regardless of premise/type text length —
     min-height + max-height + overflow:hidden makes the strip identical across
     every family and prevents long type names (e.g. "VersionState") from wrapping. */
  min-height: 32px;
  max-height: 32px;
  overflow: hidden;
  gap: 8px;
  flex-shrink: 0;
}
.sensor-card-foot > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sensor-card-foot > .foot-meta {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The inner em (Sensor.Type) must shrink within the flex foot-meta — without min-width:0
   on the foot-meta and the em itself, the em stays at its content width and forces the
   foot-meta to overflow before ellipsis kicks in. */
.sensor-card-foot > .foot-meta > em {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* SiloGauge */
.silo { flex-shrink: 0; }

/* Table layout */
.sensor-table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: auto;
}
.sensor-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sensor-table th {
  text-align: left; font-weight: 500; color: var(--muted);
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--surface-2);
  position: sticky; top: 0;
}
.sensor-table th.num, .sensor-table td.num { text-align: right; font-family: var(--font-mono); }
.sensor-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sensor-table tr { cursor: pointer; }
.sensor-table tr:hover { background: var(--soft); }
.sensor-table tr:last-child td { border-bottom: none; }
.td-primary { font-weight: 500; }
.td-sub { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }

/* Threshold picker — table variant with selection */
.sensor-table-pick tr.selected { background: var(--accent-soft); }
.sensor-table-pick tr.selected:hover { background: var(--accent-soft); }
.sensor-table-pick .col-check { width: 40px; padding-right: 0; }
.sensor-table-pick .col-check input[type="checkbox"] { cursor: pointer; }
.sensor-table-pick td.empty-row {
  text-align: center; color: var(--muted); padding: 24px; cursor: default;
}
.sensor-table-pick tr:has(td.empty-row) { cursor: default; }
.sensor-table-pick tr:has(td.empty-row):hover { background: transparent; }
.badge-fill  { background: var(--warn-bg);  color: var(--warn); }
.badge-empty { background: var(--ok-bg);    color: var(--ok);   }

.selection-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; flex-wrap: wrap;
}
.selection-counts { font-size: 14px; }
.selection-counts strong { color: var(--accent); }
.selection-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.threshold-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 6px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--chip-color) 14%, transparent);
  color: var(--chip-color);
  margin-right: 4px;
  font-family: var(--font-mono);
}

.thresholds-pane > .card { margin-bottom: 12px; }
.thresholds-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
}
.threshold-form {
  display: grid; gap: 10px;
}
.threshold-kind.seg-sm { font-size: 12px; }
.threshold-kind.seg-sm button { padding: 4px 8px; }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  padding: 3px 9px; border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ============================================================
   Detail screen
   ============================================================ */
.detail-head { margin-bottom: 20px; }
.back {
  background: transparent; border: none; color: var(--muted);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; padding: 0; margin-bottom: 12px;
  cursor: pointer;
}
.back:hover { color: var(--text); }
.detail-head-main {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
}
.detail-head-actions { display: flex; gap: 8px; }
.detail-eyebrow {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.detail-head h1 { font-size: 28px; margin: 4px 0 10px; }
.detail-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.detail-meta .muted { display: inline-flex; align-items: center; gap: 4px; }

.detail-grid {
  display: grid; gap: var(--gap-grid);
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas:
    "hero tiles"
    "chart chart"
    "alerts readings"
    "events events";
}
.card-hero { grid-area: hero; }
.card-tiles { grid-area: tiles; }
.card-chart { grid-area: chart; }
.card-alerts { grid-area: alerts; }
.card-readings { grid-area: readings; }
.card-events { grid-area: events; }

@media (max-width: 960px) {
  .detail-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "tiles" "chart" "alerts" "readings" "events";
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--pad-card);
}
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 12px;
}
.card-head h3 { font-size: 14px; }
.card-sub { font-size: 12px; color: var(--muted); }

.hero-body {
  display: flex; gap: 24px; align-items: center;
  padding: 8px 0;
}
.hero-stats { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-big {
  font-family: var(--font-mono); font-size: 56px; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 8px;
}
.hero-big em { font-style: normal; font-size: 28px; color: var(--muted); margin-left: 2px; }
.hero-line {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; font-size: 13px;
  border-bottom: 1px dashed var(--line);
}
.hero-line:last-child { border-bottom: none; }
.hero-line strong { font-family: var(--font-mono); font-weight: 600; }

/* Metric tile */
.metric-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.metric-tile {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 14px;
}
.metric-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 500;
}
.metric-icon { display: inline-flex; color: var(--accent); }
.metric-value {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 24px; letter-spacing: -0.02em; margin-top: 6px;
}
.metric-value .unit { font-size: 14px; color: var(--muted); margin-left: 3px; font-weight: 500; }
.metric-sub { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; }
.trend.up { color: var(--ok); }
.trend.down { color: var(--crit); }
.trend.flat { color: var(--muted); }

/* Segmented control */
.seg {
  display: inline-flex; background: var(--soft);
  border-radius: var(--r2); padding: 3px;
}
.seg button {
  background: transparent; border: none; padding: 5px 12px;
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  border-radius: 7px; cursor: pointer;
}
.seg button.active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-1);
}

/* Readings table */
.readings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.readings-table th {
  text-align: left; font-weight: 500; color: var(--muted);
  padding: 8px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
.readings-table th.num, .readings-table td.num { text-align: right; font-family: var(--font-mono); }
.readings-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.readings-table tr:last-child td { border-bottom: none; }

/* ============================================================
   Alerts
   ============================================================ */
.tab-row {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line);
  margin-bottom: 16px; overflow-x: auto;
}
.tab {
  background: transparent; border: none; padding: 10px 14px;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent; cursor: pointer;
  white-space: nowrap;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab:hover:not(.active) { color: var(--text-2); }

.alert-list {
  list-style: none; padding: 0; margin: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r3); overflow: hidden;
}
.alert-list > li {
  display: flex; gap: 14px; padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer; align-items: flex-start;
  transition: background 100ms;
}
.alert-list > li:hover { background: var(--soft); }
.alert-list > li:last-child { border-bottom: none; }
.alert-list > li.ack { opacity: 0.65; }
.alert-sev { padding-top: 4px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title-row { display: flex; align-items: center; gap: 8px; }
.alert-title { font-weight: 600; font-size: 14.5px; }
.alert-ack {
  font-size: 11px; color: var(--muted); background: var(--soft);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.alert-message { color: var(--text-2); font-size: 13.5px; margin-top: 4px; line-height: 1.5; }
.alert-meta { font-size: 12px; margin-top: 6px; }
.alert-sensorid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; opacity: 0.7; }
.alert-actions { display: flex; align-items: center; gap: 8px; color: var(--muted); flex-shrink: 0; }

.alert-list.compact { background: transparent; border: none; }
.alert-list.compact > li {
  padding: 10px 0; border-bottom: 1px dashed var(--line);
  gap: 10px;
}
.alert-list.compact > li:hover { background: transparent; }

/* ============================================================
   Map
   ============================================================ */
.map-canvas {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r3);
  height: 560px; overflow: hidden;
}
.map-canvas .leaflet-container {
  height: 100%; width: 100%;
  background: var(--surface-2);
  font-family: var(--font-sans);
}
.leaflet-popup-content-wrapper { border-radius: var(--r2); }
.map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
}
.map-placeholder-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; font-family: var(--font-mono); font-size: 12px;
  color: var(--muted-2); pointer-events: none; line-height: 1.6;
}
.map-pin {
  position: absolute; transform: translate(-50%, -100%);
  background: transparent; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pin-dot {
  width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  background: var(--pin-color); transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 0 0 3px color-mix(in oklab, var(--pin-color) 25%, transparent);
}
.pin-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: var(--surface); padding: 2px 6px; border-radius: var(--r-pill);
  border: 1px solid var(--line); margin-top: 4px;
}
.map-legend {
  display: flex; gap: 18px; margin-top: 12px; font-size: 13px; color: var(--muted);
  flex-wrap: wrap;
}
.map-legend span { display: flex; align-items: center; gap: 6px; }

/* ============================================================
   Settings
   ============================================================ */
.settings-layout {
  display: grid; grid-template-columns: 200px 1fr; gap: 20px;
}
/* Grid items default to min-width:auto, so a wide child (the access table, a form) forces its column
   wider than the viewport and scrolls the whole page. Let both columns shrink so wide content scrolls
   inside its own wrapper instead. This is the mobile horizontal-overflow fix. */
.settings-layout > * { min-width: 0; }
.settings-nav {
  display: flex; flex-direction: column; gap: 2px;
}
/* .select-wrap lives in the Fields section (~line 279). */
.prefs-scope { margin-bottom: 6px; }

/* Scope group headers — which slice of the world a settings section applies to. */
.settings-nav-group {
  display: flex; flex-direction: column; gap: 1px;
  margin: 14px 0 4px; padding: 0 12px;
}
.settings-nav-group:first-child { margin-top: 0; }
.settings-nav-group .group-label {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.settings-nav-group .group-scope {
  font-size: 11px; font-weight: 500; color: var(--text-2);
}
.settings-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r2);
  color: var(--text-2); font-size: 14px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.settings-nav a:hover { background: var(--soft); color: var(--text); }
.settings-nav a.active { background: var(--accent-soft); color: var(--accent); }
/* Mobile: stack the layout and turn the side nav into a horizontal scroll strip. Placed AFTER the base
   .settings-nav* rules on purpose — a media query adds no specificity, so source order must win. */
@media (max-width: 720px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .settings-nav a { flex: 0 0 auto; }
  /* Horizontal tab strip has no room for group headers; each pane restates its own scope. */
  .settings-nav-group { display: none; }
}
.settings-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r3); padding: 24px;
}
.settings-card > h3 { font-size: 17px; margin-bottom: 6px; }
.settings-card > p.muted { margin-bottom: 20px; font-size: 13px; }
.settings-card .form-grid { margin-bottom: 16px; }
.settings-foot { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.settings-subhead {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
  margin: 24px 0 10px;
}
.pw-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }

/* Toggle */
.toggle-list { display: flex; flex-direction: column; }
.toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  gap: 12px;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-weight: 500; font-size: 14px; }
.toggle-desc { font-size: 12.5px; margin-top: 2px; }
.toggle {
  width: 40px; height: 22px; border-radius: var(--r-pill);
  background: var(--line-strong); border: none; position: relative;
  cursor: pointer; transition: background 160ms; flex-shrink: 0;
}
.toggle.on { background: var(--accent); }
.toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: white; transition: transform 160ms;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on .toggle-knob { transform: translateX(18px); }

/* Team */
.team-list { display: flex; flex-direction: column; }
.team-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.team-row:last-child { border-bottom: none; }
.team-meta { flex: 1; min-width: 0; }
.team-name { font-weight: 500; font-size: 14px; }
.team-email { font-size: 12.5px; }
.role-pill {
  font-size: 11.5px; font-weight: 500; padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--soft); color: var(--text-2);
}
.role-pill.role-admin { background: var(--accent-soft); color: var(--accent); }
.role-pill.role-engineer { background: var(--info-bg); color: var(--info); }
.role-pill.role-viewer { background: var(--soft); color: var(--muted); }

/* Empty states */
.empty { padding: 60px; text-align: center; color: var(--muted); }
.empty-small { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* Loading state — centered spinner + message. Used by the dashboard while sensors fetch. */
.dashboard-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 80px 20px; color: var(--muted);
}
.dashboard-loading p { margin: 0; font-size: 14px; }
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid color-mix(in oklab, var(--accent) 18%, transparent);
  border-top-color: var(--accent);
  animation: w8gear-spin 0.8s linear infinite;
}
@keyframes w8gear-spin {
  to { transform: rotate(360deg); }
}

/* Sparkline */
.sparkline { display: block; }
.linechart { display: block; overflow: visible; }

/* Scrim */
.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 50;
  display: none;
}

/* ============================================================
   Responsive (mobile/tablet)
   ============================================================ */
@media (max-width: 980px) {
  .summary-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 280px;
    transform: translateX(-100%); transition: transform 220ms;
    z-index: 60; box-shadow: var(--shadow-3);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: inline-flex; }
  .mobile-menu { display: inline-flex; }
  .scrim { display: block; }
  .bottom-nav {
    display: flex; justify-content: space-around;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 4px 4px calc(env(safe-area-inset-bottom, 0) + 4px);
    position: sticky; bottom: 0; z-index: 30;
  }
  .bnav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 12px; color: var(--muted); font-size: 11px; font-weight: 500;
    border-radius: var(--r2); cursor: pointer; position: relative;
    flex: 1; max-width: 100px;
  }
  .bnav-item.active { color: var(--accent); }
  .bnav-badge {
    position: absolute; top: 4px; right: 22px;
    background: var(--crit); color: white;
    font-size: 10px; font-style: normal; font-weight: 600;
    padding: 1px 5px; border-radius: var(--r-pill); min-width: 16px; text-align: center;
  }
  .content { padding: 16px; padding-bottom: 80px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head-actions { justify-content: stretch; }
  .page-head-actions .btn { flex: 1; }
  .detail-head h1 { font-size: 22px; }
  .hero-body { flex-direction: column; align-items: stretch; }
  .hero-big { font-size: 44px; }
  h1 { font-size: 20px; }
}
@media (max-width: 480px) {
  .summary-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .summary-tile { padding: 12px; }
  .summary-value { font-size: 24px; }
  /* Filter bar on phones: search input gets a full row, the rest of the controls
     (Account / Premise / Status / Type selects, Fill/Empty segment) wrap to half-width
     pairs so each control has enough room to render its label text in full. */
  .filter-bar { gap: 8px; }
  .filter-bar .search-input { flex: 1 1 100%; min-width: 0; }
  .filter-bar select { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: 100%; }
  .filter-bar .seg { flex: 1 1 100%; }
  .sensor-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .sensor-card-body { flex-direction: column; }
  .sensor-card-body .silo, .sensor-card-body .silhouette-gauge { align-self: center; }
  /* Tighten table padding on phones so the remaining columns breathe. */
  .sensor-table th, .sensor-table td { padding: 10px 8px; }
}

/* ----- Responsive column visibility utility ----- *
 * Tag a <th>/<td> with hide-phone  → hidden at ≤480px (still visible on tablet/desktop).
 * Tag with hide-tablet → hidden at ≤768px (so also hidden on phone).
 * No class → always visible.
 * Used by SensorTable to drop low-value columns on small screens.
 */
@media (max-width: 768px) {
  .hide-tablet { display: none !important; }
}
@media (max-width: 480px) {
  .hide-phone { display: none !important; }
}

/* ============================================================
   v2 — Multi-family sensor support
   ============================================================ */

/* Sidebar section heading + tree */
.sidebar-section {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  padding: 10px 14px 4px;
  margin-top: 2px;
}
.sidebar-section svg { color: var(--muted-2); }
/* The very first section (Tenant workspace) sits under the logo — trim its top padding. */
.sidebar-section--first { padding-top: 10px; margin-top: 0; }
/* Configuration sub-header inside a nav group — subordinate to the section heading above it. */
.sidebar-subsection {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted-2);
  padding: 8px 14px 3px 16px;
}
.sidebar-subsection svg { color: var(--muted-2); opacity: 0.8; }
/* Global block sits below the tenant workspace as a secondary group — divide them with a rule. */
.sidebar-nav--global { border-top: 1px solid var(--line); margin-top: 4px; }
/* Collapsible nav group (e.g. Alerts → Feed / Rules) */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-head {
  width: 100%;
  background: transparent; border: none; font-family: inherit;
  text-align: left;
}
.nav-group-right {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-group-right .nav-badge { margin-left: 0; }
.nav-group-chevron {
  display: inline-flex; color: var(--muted-2);
  transition: transform 160ms ease;
}
.nav-group.open .nav-group-chevron { transform: rotate(90deg); }
.nav-subnav { display: flex; flex-direction: column; gap: 2px; }
.nav-item.nav-sub {
  padding: 7px 12px 7px 42px;
  font-size: 13px; font-weight: 500;
}

/* Thin scrollbar on the nav scroll container when the groups are long */
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* Breadcrumb anchor styling */
.breadcrumb a {
  cursor: pointer;
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--text); }

/* Sensor card adapts to family */
.sensor-card[data-family="state"] .sensor-card-body,
.sensor-card[data-family="map"] .sensor-card-body,
.sensor-card[data-family="counter"] .sensor-card-body,
.sensor-card[data-family="numeric"] .sensor-card-body {
  align-items: center;
}
.sensor-gauge-wrap {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  min-width: 80px;
}

/* Card readout */
.readout-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.readout-big {
  font-family: var(--font-mono); font-weight: 600; font-size: 24px;
  letter-spacing: -0.02em; line-height: 1;
}
.readout-big em {
  font-style: normal; color: var(--muted); font-size: 14px;
  font-weight: 500; margin-left: 2px;
}
.readout-cap {
  font-size: 12px; font-family: var(--font-mono);
}
.readout-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 12px;
}
.readout-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 4px;
}
/* Stacked variant: label on the left, value on the right, one row per metric. */
.readout-stack {
  grid-template-columns: 1fr;
  gap: 4px;
}
.readout-stack > div {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.readout-grid > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.readout-grid .muted {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
}
.readout-grid strong {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.readout-grid strong.num { font-family: var(--font-mono); }

.foot-meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted);
}
.foot-meta em { font-style: normal; font-family: var(--font-mono); font-size: 11px; flex-shrink: 0; }

/* SVG gauges base */
.silhouette-gauge, .dial-gauge { display: block; }

/* Numeric readout */
.numeric-readout {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px;
  width: 100% !important;
}
.numeric-big {
  font-family: var(--font-mono); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
}
.numeric-big .num-unit {
  font-size: 0.5em; color: var(--muted); font-weight: 500;
  margin-left: 4px;
}
.numeric-bar { display: flex; flex-direction: column; gap: 4px; }
.numeric-bar-track {
  position: relative; height: 8px; background: var(--soft);
  border-radius: 4px; overflow: visible;
}
.numeric-bar-fill {
  height: 100%; border-radius: 4px;
  transition: width 200ms;
}
.numeric-bar-tick {
  position: absolute; top: -2px; bottom: -2px;
  width: 2px;
}
.numeric-bar-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); font-family: var(--font-mono);
}

/* Belt weigher gauge (conveyor) + readout */
.belt-gauge { display: block; }
.belt-flow {
  stroke-dasharray: 5 7;
  animation: belt-flow-scroll var(--belt-flow-dur, 2s) linear infinite;
}
.belt-flow.paused { animation: none; stroke-dasharray: 2 6; stroke-opacity: 0.3 !important; }
@keyframes belt-flow-scroll { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .belt-flow { animation: none; } }

/* Belt card readout: Feed/Load/Speed stack full-width (label auto, value right-aligned) so values
   never truncate; Shift/Batch share the 2-col grid below, values left-aligned under their labels. */
.belt-readout .readout-stack-row { grid-template-columns: auto 1fr; gap: 6px 10px; margin-bottom: 5px; }
.belt-readout .readout-stack-row strong { overflow: visible; text-overflow: clip; text-align: right; white-space: nowrap; }
.belt-readout .readout-grid { gap: 4px 10px; }
.belt-readout .readout-grid strong { overflow: visible; text-overflow: clip; text-align: left; white-space: nowrap; }

/* Belt left column: conveyor image, with the period Total above the run-state indicator beneath it. */
.belt-left { flex-direction: column; gap: 3px; }
.belt-total { font-size: 11px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.belt-run { font-size: 11.5px; font-weight: 600; white-space: nowrap; letter-spacing: 0.02em; }

/* ===== Uniform family images + under-image sub-indicator ===== */
.weighbridge-gauge, .flow-meter-gauge, .state-gauge, .map-pin-gauge { display: block; }

/* Left cell as a column (image on top, sub-indicator beneath) for the non-belt families. */
.card-left { flex-direction: column; gap: 3px; align-items: center; }
.sub-ind { font-size: 11px; white-space: nowrap; font-weight: 600; letter-spacing: 0.02em; }
.sub-ind.num { font-family: var(--font-mono); font-weight: 500; }
.sensor-card-main .map-coords { font-size: 16px; }

/* Flow meter: rotor spins + flow dashes scroll at the current rate. */
.flow-rotor { transform-box: fill-box; transform-origin: center; animation: gauge-spin var(--rotor-dur, 2s) linear infinite; }
.flow-dash  { stroke-dasharray: 5 7; animation: belt-flow-scroll var(--flow-dur, 2s) linear infinite; }
.flow-rotor.paused, .flow-dash.paused { animation: none; }
.flow-dash.paused { stroke-opacity: 0.25 !important; }

/* Pump impeller spins while active; gate panels slide; LED pulses while running. */
.state-rotor { transform-box: fill-box; transform-origin: center; animation: gauge-spin var(--rotor-dur, 1.2s) linear infinite; }
.state-rotor.paused { animation: none; }
.state-panel { transition: x 300ms ease; }
.state-led-pulse { animation: led-pulse 1.6s ease-in-out infinite; }

/* GPS ping ring. */
.map-ping { transform-box: fill-box; transform-origin: center; animation: map-ping 2.4s ease-out infinite; }

@keyframes gauge-spin { to { transform: rotate(360deg); } }
@keyframes led-pulse  { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes map-ping   { 0% { opacity: 0.7; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.7); } }

@media (prefers-reduced-motion: reduce) {
  .flow-rotor, .flow-dash, .state-rotor, .map-ping { animation: none; }
}

/* ===== Demo mode ===== */
/* Sidebar badge shown above the user chip while demo mode is on. */
.demo-chip {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  margin-bottom: 8px; padding: 7px 10px; border-radius: 8px;
  background: color-mix(in oklab, var(--warn) 14%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--warn) 45%, transparent);
  color: var(--text); font-size: 12.5px; user-select: none;
}
.demo-chip:hover { background: color-mix(in oklab, var(--warn) 22%, var(--surface)); }
.demo-chip-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex-shrink: 0;
  animation: led-pulse 1.8s ease-in-out infinite;
}
.demo-chip-text { font-weight: 600; flex: 1; }
.demo-chip-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 1px 6px; border-radius: 999px;
  background: var(--warn); color: #1a1206;
}

/* Settings → Demo pane. */
.demo-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); margin-top: 12px;
}
.demo-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.demo-toggle-text strong { font-size: 14px; }
.demo-toggle-text .muted { font-size: 12px; }
.demo-note { font-size: 11.5px; margin-top: 10px; display: flex; align-items: center; gap: 5px; }

/* Generic on/off switch. */
.switch {
  position: relative; width: 44px; height: 24px; flex-shrink: 0;
  border-radius: 999px; border: none; cursor: pointer; padding: 0;
  background: var(--soft); transition: background 160ms ease;
}
.switch.on { background: var(--ok); }
.switch:disabled { opacity: 0.6; cursor: default; }
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: transform 160ms ease;
}
.switch.on .switch-knob { transform: translateX(20px); }

/* Belt period-summary table on the detail page */
.belt-summary-wrap { overflow-x: auto; }
.belt-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.belt-summary-table th, .belt-summary-table td {
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--soft); white-space: nowrap;
}
.belt-summary-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 500;
}
.belt-summary-table td.num, .belt-summary-table th.num { text-align: right; font-family: var(--font-mono); }
.belt-summary-table tbody tr:last-child td { border-bottom: none; }

/* Counter tile */
.counter-tile {
  display: flex; flex-direction: column; gap: 10px; padding: 4px;
}
.counter-big {
  font-family: var(--font-mono); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
}
.counter-big .num-unit {
  font-size: 0.5em; color: var(--muted); font-weight: 500; margin-left: 4px;
}
.counter-rate {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 12px;
  background: var(--soft);
  border-radius: var(--r2);
}
.rate-label {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
}
.rate-value {
  font-family: var(--font-mono); font-weight: 600; font-size: 16px;
  color: var(--text);
}
.rate-value em { font-style: normal; color: var(--muted); font-size: 11px; margin-left: 2px; }

/* State pill */
.state-pill {
  display: flex; flex-direction: column; gap: 6px; padding: 4px;
}
.state-big {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: 700;
  letter-spacing: 0.04em;
  border: 2px solid currentColor;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  align-self: flex-start;
}
.state-led {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 18%, transparent);
}
.state-meta {
  font-size: 12px; color: var(--muted);
}

/* Map pin tile */
.map-pin-tile {
  display: flex; align-items: center; gap: 12px; padding: 4px;
}
.map-pin-meta {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px;
}
.map-pin-meta .num { font-family: var(--font-mono); font-weight: 600; }

/* Unconfigured tile */
.unconfigured-tile {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--soft);
  color: var(--muted);
  border-radius: var(--r2);
  font-size: 13px;
  border: 1px dashed var(--line-strong);
}

/* Threshold list (detail page) */
.threshold-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.threshold-list > li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.threshold-list > li:last-child { border-bottom: none; }
.threshold-bar {
  width: 4px; height: 18px; border-radius: 2px; flex-shrink: 0;
}
.threshold-label {
  flex: 1;
  font-size: 13px; color: var(--text-2);
}
.threshold-value {
  font-weight: 600; font-size: 13.5px;
}

/* ============================================================
   Sensor Configuration screen
   ============================================================ */
.configure-grid {
  display: grid; gap: var(--gap-grid);
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 960px) {
  .configure-grid { grid-template-columns: 1fr; }
}
.config-preview {
  grid-row: span 3;
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  align-self: start;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.config-preview-body {
  display: flex; gap: 20px; align-items: center;
  padding: 16px 0;
}
.config-form .card-head { margin-bottom: 16px; }
.config-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 520px) { .config-row { grid-template-columns: 1fr; } }

/* Segmented control taking full width inside a field */
.seg.seg-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  width: 100%;
}
.seg.seg-block button { padding: 8px 12px; font-size: 13px; }

/* Inline select that fills its row */
.select-block {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r2); padding: 10px 12px;
  font-size: 14px; color: var(--text);
  width: 100%;
}

/* Threshold edit form */
.threshold-form {
  display: flex; flex-direction: column; gap: 8px;
}
.threshold-field {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  align-items: center; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.threshold-field:last-child { border-bottom: none; }
.threshold-color {
  width: 6px; height: 22px; border-radius: 3px;
}
.threshold-field .threshold-label {
  font-size: 14px; color: var(--text);
}
.threshold-input {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r2); padding: 6px 10px;
  width: 160px;
}
.threshold-input input {
  border: none; outline: none; background: transparent;
  font-family: var(--font-mono); font-size: 14px; color: var(--text);
  width: 100%; text-align: right;
}
.threshold-input input::placeholder { color: var(--muted-2); }

/* Sidebar height handling — keep tree scrollable on small screens */
@media (max-width: 768px) {
  .sidebar { width: 300px; }
  .config-preview { position: static; }
}

/* ============================================================
   Events card
   ============================================================ */
.events-head-actions {
  display: flex; align-items: center; gap: 10px;
}
.event-chip-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.event-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--soft);
  border: 1px solid transparent;
  color: var(--text-2);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.event-chip:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--line-strong);
}
.event-chip.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 35%, transparent);
}
.event-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.event-chip em {
  font-style: normal;
  background: var(--surface);
  color: var(--muted);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 11px;
}
.event-chip.active em { background: var(--surface); color: var(--accent); }

.event-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
}
.event-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.event-table th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 9px 14px;
  text-align: left;
  font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}
.event-table th.num, .event-table td.num {
  text-align: right; font-family: var(--font-mono);
}
.event-table th.sortable { cursor: pointer; user-select: none; }
.event-table th.sortable:hover { color: var(--text); }
.event-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.event-table tbody tr:last-child td { border-bottom: none; }
.event-table tbody tr:hover { background: var(--soft); }
.event-type-cell { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.event-type-cell svg { color: var(--muted); }
.event-table-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  text-align: center;
}

@media (max-width: 600px) {
  .events-head-actions { flex-wrap: wrap; }
  .event-table { font-size: 12px; }
  .event-table th, .event-table td { padding: 7px 8px; }
}

/* Event type list (configuration page) */
.event-type-list { display: flex; flex-direction: column; }
.event-type-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.event-type-row:last-child { border-bottom: none; }
.event-type-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.event-type-meta { flex: 1; min-width: 0; }
.event-type-name { font-weight: 500; font-size: 14px; }
.event-type-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Custom date range row inside events card */
.custom-range-row {
  display: flex; align-items: flex-end; gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.range-field { flex: 0 0 180px; }
.range-field .field-input { padding: 8px 10px; }
.range-field input[type="date"] {
  border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--text); width: 100%;
  font-family: var(--font-mono);
}
.range-hint {
  flex: 1; min-width: 200px;
  font-size: 12.5px; color: var(--muted); padding-bottom: 10px;
}

/* Threshold → alerts annotation */
.threshold-note {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--accent);
  background: var(--accent-soft);
  padding: 8px 12px;
  border-radius: var(--r2);
  margin-bottom: 12px;
  line-height: 1.4;
}
.threshold-note svg { flex-shrink: 0; }

/* ============================================================
   Appearance pane
   ============================================================ */
.scope-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.scope-label { font-size: 13px; font-weight: 500; }
.scope-toggle { max-width: 300px; flex: 0 1 300px; }
.scope-hint { font-size: 12px; color: var(--muted); }

.color-form {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 16px;
}
.color-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.color-row:last-child { border-bottom: none; }
.color-row-label {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.color-row-label strong { font-size: 14px; }
.color-row-label .muted { font-size: 12.5px; }
.color-row-input {
  display: flex; align-items: center; gap: 10px;
}
.color-row-input input[type="color"] {
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r2);
  background: transparent;
  cursor: pointer;
  padding: 2px;
}
.color-row-input code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--soft); padding: 2px 8px;
  border-radius: var(--r-pill); color: var(--text-2);
}
.scope-inherit { font-size: 11px; }

.palette-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.palette-card {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r2); cursor: pointer;
  transition: border-color 100ms;
}
.palette-card:hover { border-color: var(--accent); }
.palette-swatches { display: flex; gap: 4px; }
.palette-swatches span {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}
.palette-name {
  font-size: 12px; font-weight: 500; color: var(--text-2);
}

.color-preview {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 16px;
  background: var(--surface-2);
  border-radius: var(--r3);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.color-preview-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 1; min-width: 120px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--r2);
}

.confirm-text {
  font-size: 14px; font-weight: 500; color: var(--text-2);
  align-self: center;
  padding: 0 8px;
}
.alerts-tab-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.alerts-tabs {
  display: flex; gap: 4px;
  overflow-x: auto; flex: 1; min-width: 200px;
}
.alerts-range { flex-shrink: 0; }
.save-flash {
  color: var(--ok);
  font-size: 13px;
  align-self: center;
  font-weight: 500;
}

/* Type selector + per-type override pills */
.type-select-wrap {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 280px;
}
.type-select {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r2); padding: 8px 12px;
  font-size: 14px; color: var(--text); cursor: pointer;
  flex: 1; min-width: 0;
}

.type-override-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.type-override-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 5px 10px 5px 12px;
  font-size: 12.5px; cursor: pointer;
  color: var(--text-2);
}
.type-override-pill:hover { border-color: var(--accent); color: var(--text); }
.type-override-pill strong { font-weight: 600; font-size: 13px; }
.scope-tag {
  font-style: normal; font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.scope-tag.user { background: var(--accent-soft); color: var(--accent); }
.scope-tag.tenant { background: var(--info-bg); color: var(--info); }

/* Dashboard layout toggle */
.layout-toggle button {
  display: inline-flex; align-items: center; gap: 4px;
}

/* Two-section appearance card */
.appearance-block {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--surface-2);
}
.appearance-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.appearance-block-head h4 {
  font-size: 14px; font-weight: 600; margin: 0;
}
.appearance-block-head .muted { font-size: 12.5px; }
.resolution-note { font-size: 12.5px; }

/* Theme/accent section in Appearance pane */
.appearance-section { margin-bottom: 12px; }
.appearance-section:last-of-type { margin-bottom: 0; }
.appearance-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.theme-seg {
  display: inline-flex;
  background: var(--soft);
  border-radius: var(--r2);
  padding: 3px;
  gap: 2px;
}
.theme-seg button {
  background: transparent; border: none; padding: 6px 14px;
  border-radius: 7px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.theme-seg button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

/* ============================================================
   Alert authoring (UC-001 Phase 4c) — manage list + editor
   ============================================================ */
.btn-danger {
  background: var(--crit); color: white; border-color: var(--crit);
}
.btn-danger:hover { background: color-mix(in oklab, var(--crit) 88%, black); }
.btn-ghost.danger { color: var(--crit); }
.btn-ghost.danger:hover { background: var(--crit-bg); }

.alerts-manage-screen .alert-empty { align-items: flex-start; gap: 16px; }

.alert-def-table .col-toggle { width: 90px; }
.alert-def-table .col-actions { width: 1%; white-space: nowrap; }
.alert-def-table .col-actions .btn { margin-left: 6px; }
.alert-def-table td { vertical-align: middle; }
.alert-def-table .col-check { width: 40px; padding-right: 0; }
.alert-def-table .col-check input[type="checkbox"] { cursor: pointer; }
.alert-def-table tr.selected { background: var(--accent-soft); }
.alert-def-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.alert-def-table th.sortable:hover { color: var(--text); }
.alert-def-table .sort-ind { font-size: 10px; color: var(--accent); }
.alert-def-table td.empty-row { text-align: center; color: var(--muted); padding: 22px 12px; }

/* Rules list: filter bar + bulk-action bar */
.alert-def-filters { margin-bottom: 12px; }
.alert-def-filters .filter-count { margin-left: auto; font-size: 12px; font-family: var(--font-mono); }
.bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 8px 12px;
  border-radius: var(--r2); background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.bulk-count { font-size: 13px; margin-right: 4px; }

.alert-editor-grid { display: flex; flex-direction: column; gap: 16px; }
.alert-editor-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.alert-editor-actions .enabled-row { display: flex; align-items: center; gap: 10px; border: none; padding: 0; }

/* Severity selector — one row, colour-coded (Info green / Warning orange / Critical red) */
.severity-seg { display: flex; gap: 8px; }
.severity-seg .sev-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border-radius: var(--r2);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-2); font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.severity-seg .sev-btn:hover { border-color: var(--muted-2); }
.severity-seg .sev-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.severity-seg .sev-btn[data-sev="Info"] .sev-dot { background: var(--ok); }
.severity-seg .sev-btn[data-sev="Warning"] .sev-dot { background: var(--warn); }
.severity-seg .sev-btn[data-sev="Critical"] .sev-dot { background: var(--crit); }
.severity-seg .sev-btn.active[data-sev="Info"] { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.severity-seg .sev-btn.active[data-sev="Warning"] { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.severity-seg .sev-btn.active[data-sev="Critical"] { background: var(--crit-bg); border-color: var(--crit); color: var(--crit); }

.target-pick-wrap { max-height: 320px; overflow: auto; }

.group-toggle { margin-top: 14px; }
.group-facets { margin-top: 10px; }

/* Condition template picker — a grid of selectable cards */
.condition-templates {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.condition-card {
  text-align: left; padding: 12px 14px; border-radius: var(--r2);
  border: 1px solid var(--line-strong); background: var(--surface);
  cursor: pointer; transition: border-color 120ms, background 120ms;
}
.condition-card:hover { border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
.condition-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.condition-card-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.condition-card-desc { font-size: 12px; line-height: 1.4; }
.condition-params { margin-top: 6px; }

/* Rule test / preview (client-side dry-run against current readings) */
.condition-test { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.condition-preview {
  width: 100%;
  border-top: 1px solid var(--line); padding-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.condition-preview-head { font-size: 13.5px; }
.preview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.preview-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.preview-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.preview-fires { background: var(--crit); }
.preview-quiet { background: var(--ok); }
.preview-unknown { background: var(--muted-2); }
.preview-name { font-weight: 500; }
.preview-detail { margin-left: auto; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.preview-note { font-size: 11.5px; }

/* Validation summary at the top of the alert editor */
.editor-validation-summary { margin-bottom: 12px; }
.editor-validation-summary .validation-errors,
ul.validation-errors {
  margin: 0; padding: 10px 14px 10px 30px;
  border-radius: var(--r2);
  background: var(--crit-bg); color: var(--crit);
  font-size: 13px;
}

/* Recipients */
.recipient-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.recipient-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--r2);
  border: 1px solid var(--line); background: var(--soft);
}
.recipient-name { display: flex; align-items: center; gap: 6px; font-weight: 500; flex: 1; min-width: 0; }
.recipient-channels { display: flex; align-items: center; gap: 14px; }
.chan-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.chan-fixed { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--soft); }
.recipient-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Recipient name + on-demand contact reveal */
.recipient-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.recipient-main .recipient-name { flex: 0 0 auto; }
.recipient-contact { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; }
.recipient-contact span { display: inline-flex; align-items: center; gap: 5px; }
.recipient-reveal {
  align-self: flex-start; background: none; border: none; padding: 0;
  color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.recipient-reveal:hover { text-decoration: underline; }
.recipient-reveal:disabled { color: var(--muted-2); cursor: default; text-decoration: none; }
.recipient-add .select-block { max-width: 240px; }
.invite-inline { display: flex; align-items: center; gap: 6px; }
.invite-inline input {
  padding: 8px 10px; border-radius: var(--r2);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  min-width: 200px;
}
.invite-msg { margin-top: 8px; }

/* NotificationsPane additions */
.channel-note { margin-top: -8px; margin-bottom: 14px; font-size: 12px; }
.quiet-hours-row { padding: 12px 0 4px; }
.settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; }