/* Comer Farms Dashboard v2 — Emergent brand theme (borrowed from Iron Horse) */

:root {
  /* Brand palette — stable across both themes */
  --brand-green:    #6b8e23;   /* Olive — primary */
  --brand-blue:     #2a7ca0;   /* Blue — primary */
  --brand-brown:    #40351e;   /* Dark brown — primary */
  --brand-cream:    #f9eddc;   /* Cream — secondary */
  --brand-gold:     #ba7c2b;   /* Gold — secondary */
  --brand-burgundy: #440008;   /* Burgundy — secondary (critical) */
  --brand-brown-deep: #2d2518; /* Darker brown — sidebar */
  --brand-brown-input:#352d1c; /* Input bg on dark */

  /* Status — also stable across themes */
  --status-ok:        var(--brand-green);
  --status-warning:   var(--brand-gold);
  --status-critical:  var(--brand-burgundy);
  --status-offline:   #999999;
  --status-info:      var(--brand-blue);

  /* Domain accents — semantic identity, stay the same in both themes */
  --domain-rain:      var(--brand-blue);
  --domain-feed:      var(--brand-gold);
  --domain-cattle:    #5c9dc4;
  --rain-light:       #a8c8dc;
  --feed-light:       #e6c26f;
  --cattle-light:     #88b8d3;

  /* Curated 8-color chart palette — every line/bar/slice color comes
     from here. Hash device EUI mod 8 to pick a stable slot; no other
     hex literals should leak into JS chart code. */
  --chart-1: #6b8e23;   /* Olive (brand) */
  --chart-2: #2a7ca0;   /* Blue (brand) */
  --chart-3: #ba7c2b;   /* Gold (brand) */
  --chart-4: #7cb342;   /* Light green */
  --chart-5: #5c9dc4;   /* Light blue */
  --chart-6: #c4682e;   /* Terracotta */
  --chart-7: #9a7ab0;   /* Dusty purple */
  --chart-8: #2a8a7a;   /* Deep teal */

  /* Legacy aliases — kept so existing rules don't have to be rewritten.
     They map onto the brand palette under either theme. */
  --brown:         var(--brand-brown);
  --brown-deep:    var(--brand-brown-deep);
  --grass:         var(--brand-green);
  --grass-bright:  var(--chart-4);
  --teal:          var(--brand-blue);
  --teal-deep:     #1a5d80;
  --teal-light:    var(--chart-5);
  --rain:          var(--brand-blue);
  --rain-deep:     #1a5d80;
  --feed-gold:     var(--brand-gold);
  --feed-gold-light:var(--feed-light);
  --feed-gold-deep:#8e5d1f;
  --cattle:        var(--domain-cattle);
  --cattle-deep:   #4a87a8;
  --red:           var(--brand-burgundy);
  --red-deep:      #2c0005;
  --amber:         var(--brand-gold);
  --cream:         var(--brand-cream);
  --cream-dark:    #e9dcc5;
}

/* ---------- Dark mode (default) ----------
   Page is dark brown, cards are cream — the Iron Horse aesthetic.
   Sidebar is pushed noticeably darker than the main page so the two
   surfaces don't blend into each other. */
:root,
[data-theme="dark"] {
  --surface-page:    var(--brand-brown);
  --surface-card:    var(--brand-cream);
  --surface-nested:  #f0e3c8;             /* slightly darker cream — sits on cards */
  --surface-input:   var(--brand-brown-input);
  --surface-sidebar: #1a1510;              /* much darker than page brown */

  --text-body:       var(--brand-cream);   /* on the dark page */
  --text-body-muted: rgba(249, 237, 220, 0.65);
  --text-card:       var(--brand-brown);   /* on cream cards (always) */
  --text-card-muted: rgba(64, 53, 30, 0.62);
  --text-sidebar:    var(--brand-cream);

  --line:            rgba(64, 53, 30, 0.18);
  --line-on-page:    rgba(249, 237, 220, 0.18);
  --shadow:          0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.28);
  --gridline:        rgba(64, 53, 30, 0.10);

  --paper:           var(--brand-brown);   /* legacy alias — body bg */

  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
}

/* ---------- Light mode ----------
   Cream page, white cards, brown text. Brand-consistent but less dramatic. */
[data-theme="light"] {
  --surface-page:    var(--brand-cream);
  --surface-card:    #ffffff;
  --surface-nested:  #fbf6e6;
  --surface-input:   #f4ead4;
  --surface-sidebar: var(--brand-brown);    /* sidebar stays dark for contrast */

  --text-body:       var(--brand-brown);
  --text-body-muted: rgba(64, 53, 30, 0.65);
  --text-card:       var(--brand-brown);
  --text-card-muted: rgba(64, 53, 30, 0.62);
  --text-sidebar:    var(--brand-cream);

  --line:            rgba(64, 53, 30, 0.15);
  --line-on-page:    rgba(64, 53, 30, 0.15);
  --shadow:          0 1px 2px rgba(64, 53, 30, 0.08), 0 8px 24px rgba(64, 53, 30, 0.06);
  --gridline:        rgba(64, 53, 30, 0.08);

  --paper:           var(--brand-cream);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--surface-page); color: var(--text-body); min-height: 100vh;
  padding: 24px 16px 60px;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(42, 124, 160, 0.06) 0%, transparent 42%),
    radial-gradient(circle at 85% 92%, rgba(107, 142, 35, 0.06) 0%, transparent 42%);
}
body.has-sidebar { padding-left: 220px; }
.wrap { max-width: 1480px; margin: 0 auto; }

/* ---------- Sidebar nav ---------- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 200px;
  background: var(--surface-sidebar); color: var(--cream);
  padding: 24px 0; z-index: 100;
  display: flex; flex-direction: column; gap: 24px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.30);
}
.sidebar .sb-brand {
  padding: 0 22px;
  font-family: var(--font-body); font-weight: 900; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--grass-bright);
}
.sidebar .sb-brand small {
  display: block; margin-top: 6px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--cream); opacity: 0.85;
}
.sidebar .sb-nav { display: flex; flex-direction: column; }
.sidebar .sb-section {
  padding: 0 22px 6px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream); opacity: 0.5;
}
.sidebar a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 22px;
  color: var(--cream); text-decoration: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.12s, border-left-color 0.12s;
}
.sidebar a:hover { background: rgba(255, 255, 255, 0.05); }
.sidebar a.active {
  background: rgba(255, 255, 255, 0.07);
  border-left-color: var(--grass-bright);
  font-weight: 600;
}
.sidebar a .sb-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rain-light);
}
.sidebar a.feed .sb-dot { background: var(--feed-gold-light); }
.sidebar a.cattle .sb-dot { background: var(--teal-light); }
.sidebar a.overview .sb-dot { background: var(--grass-bright); }
.sidebar .sb-spacer { flex: 1; }
.sb-above-line {
  padding: 0 22px;
  /* No border — divider is on .sb-footer below this block. */
}
.sidebar .sb-footer {
  padding: 16px 22px 18px;
  margin-top: 14px;
  border-top: 1px solid rgba(249, 237, 220, 0.22);
}
.sb-theme-toggle {
  display: flex; align-items: center; gap: 10px;
  background: rgba(42, 124, 160, 0.18);
  border: 1px solid rgba(42, 124, 160, 0.65);
  border-radius: 4px; padding: 9px 12px; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--text-sidebar);
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
}
.sb-theme-toggle:hover {
  background: rgba(42, 124, 160, 0.30);
  border-color: rgba(42, 124, 160, 0.95);
}
.sb-theme-icon { font-size: 14px; line-height: 1; }
.sb-icon {
  /* Shared style for both the theme-toggle glyph and the sign-out arrow,
     so the two buttons align identically. */
  display: inline-block; width: 16px; text-align: center;
  font-size: 15px; line-height: 1;
}

/* Compound selector matches `.sidebar a`'s (0,1,1) specificity so the
   border-left override actually wins. `.sidebar a` sets the left edge
   to 3px solid transparent for the active-tab indicator on nav links,
   which is wrong for this pill — we want an even 1px gold border. */
.sidebar a.sb-signout {
  display: flex; align-items: center; gap: 10px;
  background: rgba(186, 124, 43, 0.16);
  border: 1px solid rgba(186, 124, 43, 0.65);
  border-radius: 4px; padding: 9px 12px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--text-sidebar); text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.12s, border-color 0.12s;
}
.sidebar a.sb-signout:hover {
  background: rgba(186, 124, 43, 0.32);
  border-color: rgba(186, 124, 43, 0.95);
}
/* Legacy alias — kept for any cached templates; the new icon class is .sb-icon */
.sb-signout-icon { font-size: 13px; line-height: 1; }

@media (max-width: 900px) {
  body.has-sidebar { padding-left: 16px; padding-top: 78px; }
  .sidebar {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    width: auto; height: 62px;
    padding: 12px 16px; flex-direction: row; align-items: center; gap: 14px;
    box-shadow: 0 2px 8px rgba(61, 53, 32, 0.15);
  }
  .sidebar .sb-brand { padding: 0; flex-shrink: 0; }
  .sidebar .sb-brand small { display: none; }
  .sidebar .sb-nav { flex-direction: row; overflow-x: auto; flex: 1; }
  .sidebar .sb-section { display: none; }
  .sidebar a {
    padding: 8px 12px; border-left: none; border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .sidebar a.active { border-left: none; border-bottom-color: var(--grass-bright); }
  .sidebar .sb-spacer, .sidebar .sb-footer { display: none; }
}

/* ---------- Login ---------- */
.login-wrap {
  min-height: 80vh; display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 32px 36px;
  box-shadow: var(--shadow); max-width: 460px; width: 100%;
}
.password-form { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.password-form label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brown); opacity: 0.65;
}
.password-form input {
  padding: 11px 14px; font-family: var(--font-mono); font-size: 14px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface-nested); color: var(--text-card);
}
.password-form button {
  margin-top: 6px; padding: 11px 16px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  background: var(--rain-deep); color: white; border: none; border-radius: 4px;
  cursor: pointer;
}
.password-form button:hover { background: var(--rain); }
.login-error {
  margin-top: 10px; padding: 9px 12px;
  background: rgba(192, 57, 43, 0.10); color: var(--red-deep);
  border-left: 3px solid var(--red); font-size: 12px; border-radius: 4px;
}

/* ---------- Header ---------- */
header {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 2px solid var(--line-on-page); flex-wrap: wrap; gap: 12px;
}
header.detail-head { padding-bottom: 18px; margin-bottom: 22px; }
.brand {
  font-family: var(--font-body); font-weight: 900; font-size: 14px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--grass);
}
h1 {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--text-body); margin-top: 4px;
}
h1 em { font-style: italic; color: var(--brand-blue); }
.login-card h1 { color: var(--text-card); }
.meta, .header-meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-body); opacity: 0.92; text-align: right;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.meta strong, .header-meta strong { color: var(--text-body); opacity: 1; font-weight: 700; }

/* Top-right Sign out — pill styled like the sidebar's so the affordance
   is recognizable. Gold accent matches the sidebar entry. */
.header-signout {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 6px 12px;
  background: rgba(186, 124, 43, 0.18);
  border: 1px solid rgba(186, 124, 43, 0.65);
  border-radius: 4px;
  color: var(--text-body); text-decoration: none;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: none;
  transition: background 0.12s, border-color 0.12s;
}
.header-signout:hover {
  background: rgba(186, 124, 43, 0.32);
  border-color: rgba(186, 124, 43, 0.95);
}
.device-banner {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rain-deep); color: white;
  padding: 4px 10px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; font-weight: 700; margin-top: 6px;
}
.device-banner::before {
  content: ''; width: 6px; height: 6px;
  background: var(--surface-card); border-radius: 50%;
  animation: pulse 1.8s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--text-body); opacity: 0.7;
  margin-bottom: 8px; display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--text-body); text-decoration: none; opacity: 0.75;
  padding: 2px 6px; border-radius: 3px; transition: background 0.15s;
}
.breadcrumb a:hover { background: rgba(249, 237, 220, 0.12); opacity: 1; }
[data-theme="light"] .breadcrumb a:hover { background: rgba(64, 53, 30, 0.08); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb strong { color: var(--text-body); opacity: 1; padding: 2px 6px; }

/* ---------- Alerts ---------- */
.alerts-strip {
  margin-bottom: 22px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
@media (max-width: 900px) {
  .alerts-strip { grid-template-columns: 1fr; }
}
.alert {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: 6px;
  font-size: 13px; line-height: 1.4;
  background: var(--surface-card); color: var(--text-card);
  box-shadow: var(--shadow);
}
.alert .a-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 900; font-size: 14px; color: var(--brand-cream);
  flex-shrink: 0;
}
.alert .a-text { flex: 1; }
.alert .a-text strong { font-weight: 700; }
.alert .a-text small {
  display: block; font-family: var(--font-mono);
  font-size: 10px; opacity: 0.75; margin-top: 2px;
}
.alert.critical { border-left: 4px solid var(--status-critical); }
.alert.critical .a-icon { background: var(--status-critical); animation: pulse 1.5s infinite; }
.alert.warning  { border-left: 4px solid var(--status-warning); }
.alert.warning .a-icon { background: var(--status-warning); }
.alert.info     { border-left: 4px solid var(--status-info); }
.alert.info .a-icon { background: var(--status-info); }

/* Grouped / collapsible alerts (Overview, many-alerts mode) */
.alerts-strip.is-grouped { display: block; }
.alerts-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.alerts-toolbar .at-summary {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.75;
}
.alerts-toolbar .at-toggle {
  border: 1px solid var(--border, rgba(0,0,0,0.15)); background: var(--surface-card);
  color: var(--text-card); border-radius: 5px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 5px 12px;
}
.alerts-toolbar .at-toggle:hover { filter: brightness(0.97); }
.alert-groups { display: flex; flex-direction: column; gap: 8px; }
.alert-group {
  background: var(--surface-card); border-radius: 6px;
  box-shadow: var(--shadow); overflow: hidden;
}
.alert-group.critical { border-left: 4px solid var(--status-critical); }
.alert-group.warning  { border-left: 4px solid var(--status-warning); }
.alert-group.info     { border-left: 4px solid var(--status-info); }
.ag-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; background: none; border: 0; cursor: pointer;
  color: var(--text-card); font-family: var(--font-body); font-size: 13px;
  text-align: left;
}
.ag-caret {
  display: inline-block; font-size: 18px; line-height: 1; opacity: 0.85;
  width: 16px; text-align: center; transition: transform 0.15s ease;
}
.alert-group[data-open="1"] .ag-caret { transform: rotate(90deg); }
.ag-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ag-dot.critical { background: var(--status-critical); }
.ag-dot.warning  { background: var(--status-warning); }
.ag-dot.info     { background: var(--status-info); }
.ag-title { font-weight: 700; }
.ag-count {
  min-width: 22px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
  background: var(--surface-2, rgba(0,0,0,0.06)); color: var(--text-card);
}
.ag-body { display: none; padding: 0 12px 12px; }
.alert-group[data-open="1"] .ag-body { display: flex; flex-direction: column; gap: 6px; }
/* Inside a group the individual alert rows drop their own card chrome. */
.ag-body .alert { box-shadow: none; border-left: 0; padding: 8px 10px; background: var(--surface-2, rgba(0,0,0,0.04)); }

/* ---------- Summary cards ---------- */
.summary-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px; margin-bottom: 22px;
}
@media (max-width: 1100px) { .summary-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .summary-row { grid-template-columns: repeat(2, 1fr); } }
.sum-card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.sum-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.sum-card.rain::before  { background: var(--rain); }
.sum-card.days::before  { background: var(--grass); }
.sum-card.feed::before  { background: var(--feed-gold); }
.sum-card.water::before { background: var(--cattle); }
.sum-card.issues::before{ background: var(--red); }
.sum-card .sc-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-card); opacity: 0.85;
  margin-bottom: 6px;
}
.sum-card .sc-value {
  font-family: var(--font-body); font-weight: 700;
  font-size: 28px; line-height: 1; color: var(--brown);
}
.sum-card .sc-unit {
  font-family: var(--font-body); font-size: 13px;
  font-weight: 500; color: var(--brown); opacity: 0.65; margin-left: 4px;
}
.sum-card .sc-sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-card); opacity: 0.85; margin-top: 6px;
}
.sum-card .sc-sub.green { color: var(--grass); opacity: 0.9; }
.sum-card .sc-sub.amber { color: #B07C0F; opacity: 1; }
.sum-card .sc-sub.red { color: var(--red); opacity: 1; }
.rate-stale { color: #B07C0F; font-style: italic; }

/* ---------- Section bands ---------- */
.section-band {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 22px;
  box-shadow: var(--shadow); overflow: hidden;
}
.section-band-header {
  padding: 16px 20px; color: white;
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 14px;
  cursor: pointer; transition: filter 0.15s;
  text-decoration: none;
}
.section-band-header:hover { filter: brightness(1.08); }
.section-band-header::after {
  content: '→'; font-family: var(--font-body);
  font-size: 22px; opacity: 0.5; margin-left: 8px;
  transition: transform 0.15s, opacity 0.15s;
}
.section-band-header:hover::after { transform: translateX(4px); opacity: 1; }
.section-band-header.water { background: linear-gradient(135deg, var(--rain-deep), var(--rain)); }
.section-band-header.feed  { background: linear-gradient(135deg, var(--feed-gold-deep), var(--feed-gold)); }
.section-band-header.cattle{ background: linear-gradient(135deg, var(--cattle-deep), var(--cattle)); }
.section-band-title { display: flex; align-items: center; gap: 14px; }
.section-band-title h2 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 20px; letter-spacing: -0.01em;
}
.section-band-title h2 small {
  display: block; font-family: var(--font-body);
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.78; margin-bottom: 2px;
}
.section-band-rollup { display: flex; gap: 22px; flex-wrap: wrap; }
.rollup-stat { text-align: right; }
.rollup-stat .rs-label {
  font-family: var(--font-body); font-size: 9px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.78; margin-bottom: 2px;
}
.rollup-stat .rs-value {
  font-family: var(--font-body); font-weight: 700;
  font-size: 18px; line-height: 1;
}
.rollup-stat .rs-unit { font-size: 11px; opacity: 0.78; font-weight: 500; margin-left: 2px; }
.rollup-stat.deferred .rs-value { opacity: 0.4; }

.section-band-body { padding: 20px 22px; }
.device-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ---------- Device card ---------- */
.device-card {
  background: var(--surface-nested); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
  transition: transform 0.12s, box-shadow 0.15s;
}
.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(61, 53, 32, 0.10);
  cursor: pointer;
}
.dc-head {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 8px;
}
.dc-name {
  font-family: var(--font-body); font-weight: 700;
  font-size: 14px; color: var(--brown); line-height: 1.2;
}
.dc-name small {
  display: block; font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; color: var(--text-card);
  opacity: 0.85; letter-spacing: 0.04em; margin-top: 3px;
}
.dc-status {
  padding: 3px 8px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 9px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  flex-shrink: 0;
}
/* Solid status badges with white text (Harborview v2 look) — readable on the
   dark card header; brighter critical red than the dark burgundy. */
.dc-status.healthy  { background: var(--brand-green); color: #fff; }
.dc-status.warning  { background: var(--brand-gold);  color: #fff; }
.dc-status.critical { background: #d32f2f;            color: #fff; }
.dc-status.offline  { background: #6b6152;            color: #fff; }
.dc-status.no-data  { background: rgba(64, 53, 30, 0.10); color: var(--brand-brown); border: 1px dashed rgba(64, 53, 30, 0.35); padding: 2px 7px; }

.dc-body {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px;
  align-items: center;
}
.dc-visual {
  display: flex; justify-content: center; align-items: center;
}
.dc-visual svg { width: 100%; height: auto; max-width: 130px; }
.dc-stats { display: flex; flex-direction: column; gap: 6px; }
.dc-primary {
  font-family: var(--font-body); font-weight: 700;
  font-size: 22px; line-height: 1; color: var(--brown);
}
.dc-primary .unit {
  font-family: var(--font-body); font-size: 12px;
  font-weight: 500; color: var(--brown); opacity: 0.65;
  margin-left: 3px;
}
.dc-primary.muted { color: rgba(61, 53, 32, 0.4); }
.dc-secondary {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-card); opacity: 0.92;
}
.dc-secondary span { display: block; }
.dc-bar {
  width: 100%; height: 6px; background: #ffffff;
  border-radius: 3px; overflow: hidden; margin-top: 2px;
  border: 1px solid var(--line);
}
.dc-bar-inner { height: 100%; transition: width 0.4s; }
.dc-bar-inner.rain    { background: linear-gradient(90deg, var(--rain), var(--rain-deep)); }
.dc-bar-inner.feed    { background: linear-gradient(90deg, var(--feed-gold-light), var(--feed-gold)); }
.dc-bar-inner.warning { background: var(--amber); }
.dc-bar-inner.critical{ background: var(--red); }

.dc-foot {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-card); opacity: 0.88;
  border-top: 1px solid var(--line); padding-top: 8px;
}

.device-card.flow .dc-body { grid-template-columns: 1fr; gap: 10px; }
.device-card.flow .dc-visual { padding: 4px 0; }
.device-card.flow .dc-visual svg { max-width: 260px; }

/* ---------- Loading skeletons ----------
   Rendered into the device grids on the initial server-side paint so the
   section bands don't look like an empty clickable menu before /api/landing
   returns. JS replaces innerHTML with real cards once data lands. */
.card-skeleton {
  height: 158px;
  background: var(--surface-nested);
  border: 1px solid var(--line);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.card-skeleton.flow { height: 220px; }
.card-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(64, 53, 30, 0.10) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
[data-theme="dark"] .card-skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(64, 53, 30, 0.18) 50%,
    transparent 100%
  );
}
@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.rollup-stat-skeleton {
  width: 90px; height: 36px;
  background: rgba(249, 237, 220, 0.12);
  border-radius: 4px;
  position: relative; overflow: hidden;
}
.rollup-stat-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg, transparent, rgba(249, 237, 220, 0.18), transparent
  );
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* ---------- Cost-of-water insight panel ---------- */
.insight-panel {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 22px;
  box-shadow: var(--shadow); margin-bottom: 22px;
}
.ip-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 16px;
  flex-wrap: wrap; gap: 14px;
}
.ip-title {
  font-family: var(--font-body); font-weight: 700;
  font-size: 18px; color: var(--brown); line-height: 1.2;
}
.ip-title small {
  display: block; font-family: var(--font-body);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grass); margin-bottom: 4px;
}
.ip-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 18px; }
@media (max-width: 540px) { .ip-stats { grid-template-columns: 1fr 1fr; } }
.ip-stat .ips-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brown); opacity: 0.6;
}
.ip-stat .ips-value {
  font-family: var(--font-body); font-weight: 700;
  font-size: 22px; color: var(--brown); margin-top: 2px;
}
.ip-stat .ips-value .unit {
  font-family: var(--font-body); font-size: 11px;
  font-weight: 500; opacity: 0.65; margin-left: 2px;
}
.ip-stat .ips-value.green { color: var(--grass); }
.ip-stat .ips-value.rain { color: var(--rain-deep); }
.ip-stat .ips-value.muted { color: rgba(61, 53, 32, 0.4); font-style: italic; }
.price-note {
  margin-top: 14px; padding: 10px 14px;
  background: var(--surface-nested); border-radius: 4px;
  border-left: 3px solid var(--rain);
  font-size: 11px; color: var(--brown); line-height: 1.5;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
}
.price-note .price-stale {
  font-family: var(--font-mono); font-size: 10px; opacity: 0.65;
}
.rate-edit-btn {
  margin-left: 8px;
  background: var(--rain-deep); color: white;
  border: none; border-radius: 3px;
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; padding: 3px 8px; cursor: pointer;
}
.rate-edit-btn:hover { background: var(--rain); }
.rate-edit-form {
  margin-top: 12px; padding: 12px 14px;
  background: var(--surface-nested); border-radius: 4px;
  border-left: 3px solid var(--grass);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.rate-edit-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brown); opacity: 0.75;
}
.rate-edit-form input {
  padding: 7px 10px; font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface-card);
  width: 140px;
}
.rate-edit-note {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--brown); opacity: 0.6;
}

/* ---------- Saved readings ---------- */
.saved-group { margin-bottom: 22px; }
.saved-group:last-child { margin-bottom: 0; }
.saved-group h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 14px; color: var(--brown);
  margin-bottom: 10px;
}
.saved-group h3 small {
  display: block; font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; color: var(--brown);
  opacity: 0.55; letter-spacing: 0.04em; margin-top: 2px;
}
.saved-row { gap: 12px; }

/* ---------- Calibration callout ---------- */
.calib-callout {
  margin-bottom: 22px;
  background: linear-gradient(135deg, var(--surface-card), var(--surface-nested));
  color: var(--text-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  padding: 14px 18px; display: flex; gap: 14px;
  align-items: flex-start;
}
.calib-callout.v2-callout { border-left-color: var(--amber); }
/* Caveat variant: amber rule + amber icon disc, for a callout that warns
   about the data itself rather than explaining how to read it. */
.calib-callout.warn { border-left-color: var(--amber); }
.calib-callout .cc-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--teal); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 900; font-size: 14px;
  flex-shrink: 0;
}
.calib-callout.v2-callout .cc-icon { background: var(--amber); }
.calib-callout.warn .cc-icon { background: var(--amber); font-size: 16px; }
.calib-callout .cc-body { flex: 1; font-size: 12px; line-height: 1.5; }
.calib-callout .cc-body strong {
  font-family: var(--font-body); font-size: 13px;
  display: block; margin-bottom: 3px;
}

/* ---------- Panel ---------- */
.panel {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
  margin-bottom: 22px;
}
.panel-header {
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.panel-header h2 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brown); display: flex; align-items: center; gap: 10px;
}
.panel-header h2::before {
  content: ''; width: 8px; height: 8px;
  background: var(--rain); border-radius: 50%;
}
.panel-body { padding: 20px; }
.snapshot-pre {
  background: var(--brown); color: var(--cream);
  font-family: var(--font-mono); font-size: 11px;
  padding: 14px 16px; border-radius: 6px;
  overflow-x: auto; line-height: 1.5;
}

/* ---------- Status pill on detail header ---------- */
.status-pill {
  display: inline-block; padding: 4px 10px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 4px;
}
.status-pill.healthy  { background: var(--brand-green); color: #fff; }
.status-pill.warning  { background: var(--brand-gold);  color: #fff; }
.status-pill.critical { background: #d32f2f;            color: #fff; }
.status-pill.offline  { background: #6b6152;            color: #fff; }

/* Sensor Status — inline rename */
.name-cell .name-text { font-weight: 600; }
.name-cell .name-alias { display: block; font-family: var(--font-mono); font-size: 10px; opacity: 0.6; }
.rename-btn {
  border: 1px solid rgba(64, 53, 30, 0.2); background: var(--surface-card);
  color: var(--text-card); border-radius: 4px; cursor: pointer;
  font-family: var(--font-body); font-size: 11px; padding: 3px 8px; margin-left: 6px;
}
.rename-btn.edit { opacity: 0; border: 0; background: none; font-size: 13px; padding: 2px 4px; }
tr:hover .rename-btn.edit { opacity: 0.55; }
.rename-btn.edit:hover { opacity: 1; }
.rename-btn.save { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }
.name-cell.editing { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rename-input {
  font-family: var(--font-body); font-size: 13px; padding: 4px 8px;
  border: 1px solid var(--brand-blue); border-radius: 4px;
  background: var(--surface-card); color: var(--text-card); width: 150px;
}
.rename-spinner {
  display: inline-block; width: 13px; height: 13px; vertical-align: middle;
  border: 2px solid rgba(64, 53, 30, 0.2); border-top-color: var(--brand-blue);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.rename-hint {
  display: block; width: 100%; margin-top: 4px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--text-card); opacity: 0.9;
}

/* ---------- Tank detail: top grid ---------- */
.top-grid {
  display: grid; grid-template-columns: 380px 1fr;
  gap: 22px; margin-bottom: 22px;
}
@media (max-width: 980px) { .top-grid { grid-template-columns: 1fr; } }

.tank-visual {
  background: linear-gradient(180deg, #DCE7F0 0%, #B89E78 50%, #8B7748 100%);
  border-radius: 8px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tank-visual svg { width: 100%; height: auto; max-width: 300px; }
/* Bin doesn't sit in soil so the sky-→-soil gradient is wrong; use a flat cream. */
#binVisual { background: linear-gradient(180deg, #F5F1E6 0%, #E8E0CC 100%); }
/* Flow meter has no soil context either — a steel-pipe-y grey backdrop. */
.tank-visual.flow-visual,
#flowVisual { background: linear-gradient(180deg, #E8E8E8 0%, #C8CED4 100%); }

/* ---------- Stat grid (6 cells) ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 600px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 14px; background: var(--surface-nested);
  border: 1px solid var(--line); border-left: 3px solid var(--rain);
  border-radius: 4px;
}
.stat.green { border-left-color: var(--grass); }
.stat.brown { border-left-color: var(--brown); }
.stat.amber { border-left-color: var(--amber); }
.stat.teal  { border-left-color: var(--teal); }
.stat-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brown); opacity: 0.65;
  margin-bottom: 4px;
}
.stat-value {
  font-family: var(--font-body); font-weight: 700;
  font-size: 24px; line-height: 1; color: var(--brown);
}
.stat-unit {
  font-family: var(--font-body); font-size: 12px;
  font-weight: 500; color: var(--brown); opacity: 0.65; margin-left: 3px;
}
.stat-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--brown); opacity: 0.6; margin-top: 4px;
}

/* ---------- Calibration strip ---------- */
.calib-strip {
  background: var(--surface-nested); padding: 12px 16px;
  border-radius: 6px; margin-top: 14px;
  border-left: 3px solid var(--teal);
  font-size: 11px; color: var(--brown); line-height: 1.5;
}
.calib-strip > strong {
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 10px; opacity: 0.7;
}
.calib-strip-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 6px;
}
@media (max-width: 600px) { .calib-strip-grid { grid-template-columns: repeat(2, 1fr); } }
/* Sit on the always-light card — pin dark text (don't inherit --text-body,
   which flips light in dark mode and would vanish on the light card). */
.calib-cell .cl { font-size: 13px; color: var(--text-card-muted); margin-bottom: 2px; }
.calib-cell .cv {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 16px; color: var(--text-card);
}

/* ---------- Period tabs ---------- */
.period-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.period-tabs {
  display: inline-flex; background: var(--surface-card); border-radius: 6px;
  padding: 4px; border: 1px solid var(--line); gap: 2px;
}
.period-tabs button {
  background: none; border: none; padding: 7px 14px;
  font-family: var(--font-body); font-size: 12px;
  font-weight: 600; color: var(--brown); cursor: pointer;
  border-radius: 4px; transition: all 0.15s;
}
.period-tabs button.active { background: var(--brown); color: var(--cream); }
.period-tabs button:hover:not(.active) { background: var(--surface-nested); }
.period-label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--brown); opacity: 0.65;
}

/* ---------- Chart panels ---------- */
.chart-wrap { position: relative; height: 320px; }
.chart-wrap.small { height: 240px; }
.chart-legend-note {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--brown); opacity: 0.6;
}
.chart-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 22px; margin-bottom: 22px;
}
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }

/* Tanks page layout: the Tank Activity feed varies in height, so instead of a
   rigid 2x2 grid (which left dead space under the shorter chart), use two
   independent columns — the 3 charts stack in the main column and the activity
   feed fills the side column, packing whatever height it needs. */
.tanks-masonry {
  display: flex; gap: 22px; margin-bottom: 22px; align-items: flex-start;
}
.tanks-masonry .tm-main {
  flex: 1.4 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 22px;
}
.tanks-masonry .tm-side { flex: 1 1 0; min-width: 0; }
.tanks-masonry .tm-main .panel, .tanks-masonry .tm-side .panel { margin-bottom: 0; }
@media (max-width: 900px) { .tanks-masonry { flex-direction: column; } }

/* ---------- Refill events list ---------- */
.events-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.event-item {
  padding: 10px 12px; background: var(--surface-nested);
  border-radius: 4px; border-left: 3px solid var(--rain);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  color: var(--text-card);   /* lock to brown in both themes — unclassed
                                inner divs (like Δ +1.1%) would otherwise
                                inherit body cream in dark mode */
}
.event-item.event-empty {
  border-left-color: rgba(64, 53, 30, 0.2);
  color: var(--text-card); opacity: 0.65;
}
.event-item .ev-date {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-card);   /* no opacity — Jeff wants this fully legible */
}
/* Tank name within an activity row — bold + tank-color (inline) so each tank
   is easy to discern at a glance (matches the row's left color bar + chart line). */
.event-item .ev-tank { font-weight: 700; font-family: var(--font-body); }
.event-item .ev-gain {
  font-family: var(--font-body); font-weight: 700;
  color: var(--rain-deep);
}
.event-item.event-drawdown { border-left-color: var(--brand-gold); }
.event-item .ev-gain.ev-loss { color: var(--brand-burgundy); }
.ev-tag {
  display: inline-block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; border-radius: 3px;
}
.ev-tag.ok    { background: rgba(107, 142, 35, 0.18); color: #3f5d12; }
.ev-tag.warn  { background: rgba(186, 124, 43, 0.22); color: #6e4815; }
.ev-tag.muted { background: rgba(64, 53, 30, 0.10); color: var(--text-card-muted); }
.trust-gate {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--brown); opacity: 0.75; line-height: 1.5;
}
.trust-gate strong { opacity: 1; }

/* ---------- Config grid + threshold sliders ---------- */
.config-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; margin-bottom: 22px;
}
@media (max-width: 780px) { .config-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brown); opacity: 0.65; margin-bottom: 6px;
}
.field-row { display: flex; gap: 10px; align-items: center; }
.field-row input[type="number"] {
  width: 100px; padding: 8px 10px;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-card); background: var(--surface-nested);
  border: 1px solid var(--line); border-radius: 4px;
}
.field-row input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; background: #ffffff;
  border-radius: 3px; outline: none;
  border: 1px solid var(--line);
}
.field-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  background: var(--rain); border: 3px solid white; border-radius: 50%;
  cursor: pointer; box-shadow: 0 2px 6px rgba(61, 53, 32, 0.25);
}
.field-row .unit-label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--brown); opacity: 0.6; min-width: 30px;
}
.threshold-hint {
  margin-top: 6px; font-family: var(--font-mono);
  font-size: 10px; color: var(--brown); opacity: 0.55;
}
.threshold-hint.amber { color: #B07C0F; opacity: 1; }
.threshold-hint.red { color: var(--red); opacity: 1; }

/* ---------- "How this is calculated" ---------- */
details.calc-disclosure {
  background: var(--brown); color: var(--cream);
  border-radius: 8px; overflow: hidden;
}
details.calc-disclosure summary {
  padding: 12px 18px; cursor: pointer; list-style: none;
  font-family: var(--font-body); font-weight: 700;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
details.calc-disclosure summary::-webkit-details-marker { display: none; }
details.calc-disclosure summary::after {
  content: '+'; font-size: 22px; font-weight: 300;
  transition: transform 0.2s;
}
details.calc-disclosure[open] summary::after { transform: rotate(45deg); }
.formula-body {
  padding: 4px 18px 18px;
  font-family: var(--font-mono); font-size: 12px;
  line-height: 1.6; color: var(--cream);
}
.formula-block {
  background: rgba(0,0,0,0.22); padding: 10px 14px;
  border-radius: 4px; margin: 10px 0;
  border-left: 3px solid var(--rain-light);
}
.formula-block strong {
  color: var(--rain-light); display: block; margin-bottom: 4px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.formula-body code {
  background: rgba(255,255,255,0.08); padding: 2px 6px;
  border-radius: 3px; color: var(--grass-bright);
  font-family: var(--font-mono);
}
.formula-body .caveat {
  margin-top: 14px; padding: 10px 12px;
  background: rgba(232, 163, 23, 0.15);
  border-left: 3px solid var(--amber); border-radius: 4px;
  color: #F4D88A;
}
.formula-body .caveat strong { color: #F4D88A; }

/* ---------- Action bar ---------- */
.action-bar {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 20px;
  box-shadow: var(--shadow); margin-bottom: 22px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.action-bar .ab-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brown); opacity: 0.65; margin-right: 8px;
}
.action-btn {
  padding: 9px 16px; font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  border: none; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform 0.08s, background 0.15s;
}
.action-btn:active { transform: translateY(1px); }
.action-btn.save { background: var(--rain-deep); color: white; }
.action-btn.save:hover { background: var(--rain); }
.action-btn.csv { background: var(--brown); color: var(--cream); }
.action-btn.csv:hover { background: var(--brown-deep); }
.action-btn.pdf { background: var(--teal); color: white; }
.action-btn.pdf:hover { background: var(--teal-deep); }
.save-confirm {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 4px; padding: 6px 10px;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; border-radius: 3px;
  opacity: 0; transition: opacity 0.2s;
  background: rgba(107, 158, 42, 0.15); color: #4A6E1D;
}
.save-confirm.show { opacity: 1; }

/* ---------- Ask Rip page ---------- */
.sidebar a.ask .sb-dot { background: var(--feed-gold-light); }

.rip-intro {
  display: flex; align-items: center; gap: 18px;
  margin: 22px 0 18px;
  padding: 14px 18px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.rip-intro-avatar {
  /* Plain rectangle, no crop — matches Iron Horse's render so Rip's full
     face shows without object-fit zoom or circle clipping. */
  width: 80px; height: 80px;
  flex-shrink: 0;
}
.rip-intro-text h3 {
  font-family: var(--font-body);
  font-size: 22px; font-weight: 700;
  color: var(--text-card); margin: 0 0 4px;
}
.rip-intro-text p {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  color: var(--text-card-muted); margin: 0;
}

.rip-quick-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px;
}
.rip-quick-btn {
  /* Cards are cream in both themes — use --text-card so text doesn't
     vanish in dark mode (where --text-body is also cream). */
  background: var(--surface-card); color: var(--text-card);
  border: 1px solid var(--line);
  border-radius: 16px; padding: 7px 14px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rip-quick-btn:hover {
  background: rgba(186, 124, 43, 0.12);
  border-color: rgba(186, 124, 43, 0.6);
  color: var(--brand-gold);
}

.rip-chat-container {
  background: var(--surface-card);
  border: 1px solid var(--line-on-page);
  border-radius: 8px;
  display: flex; flex-direction: column;
  height: 540px;
  overflow: hidden;
}
.rip-messages {
  flex: 1; overflow-y: auto; padding: 18px 18px 10px;
  display: flex; flex-direction: column; gap: 14px;
}
.rip-message {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 86%;
}
.rip-message.user {
  align-self: flex-end; flex-direction: row-reverse;
}
.rip-bubble {
  background: var(--surface-page); color: var(--text-body);
  border: 1px solid var(--line-on-page);
  border-radius: 12px; padding: 10px 14px;
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
}
.rip-message.user .rip-bubble {
  background: rgba(42, 124, 160, 0.16);
  border-color: rgba(42, 124, 160, 0.55);
}
/* In dark mode the page text is cream — the light-teal overlay above is
   way too pale for cream text to read on. Use the deep teal solid instead. */
:root .rip-message.user .rip-bubble,
[data-theme="dark"] .rip-message.user .rip-bubble {
  background: var(--rain-deep);
  border-color: var(--rain-deep);
  color: var(--brand-cream);
}
[data-theme="light"] .rip-message.user .rip-bubble {
  background: rgba(42, 124, 160, 0.16);
  border-color: rgba(42, 124, 160, 0.55);
  color: var(--brand-brown);
}
.rip-bubble p { margin: 0 0 6px; }
.rip-bubble p:last-child { margin-bottom: 0; }
.rip-bubble ul { margin: 6px 0; padding-left: 18px; }
.rip-bubble li { margin: 2px 0; }
/* Ask Rip markdown tables */
.rip-bubble .rip-table {
  border-collapse: collapse; margin: 6px 0; width: 100%; font-size: 12px;
}
.rip-bubble .rip-table th, .rip-bubble .rip-table td {
  border: 1px solid rgba(64, 53, 30, 0.25); padding: 4px 8px; text-align: left;
}
.rip-bubble .rip-table th { background: var(--surface-nested); color: var(--text-card); font-weight: 700; }
/* Dark mode: a dark header so cream label text stays legible against the bubble. */
[data-theme="dark"] .rip-bubble .rip-table th { background: #241d12; color: var(--brand-cream); }
.rip-bubble code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 3px;
}
.rip-bubble strong { color: var(--brand-gold); font-weight: 600; }

.rip-typing .rip-bubble {
  display: flex; align-items: center; gap: 5px;
  padding: 12px 14px;
}
.rip-typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-body); opacity: 0.4;
  animation: rip-typing-bounce 1.2s infinite ease-in-out;
}
.rip-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.rip-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes rip-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 0.9; }
}

.rip-input-area {
  display: flex; gap: 8px; padding: 12px;
  border-top: 1px solid var(--line-on-page);
  background: var(--surface-page);
}
.rip-input {
  flex: 1; padding: 9px 12px;
  font-family: var(--font-body); font-size: 13px;
  /* Same trap as .rip-quick-btn — input bg is cream in both modes. */
  background: var(--surface-card); color: var(--text-card);
  border: 1px solid var(--line); border-radius: 4px;
  outline: none; transition: border-color 0.12s;
}
.rip-input:focus { border-color: var(--brand-gold); }
.rip-send-btn {
  padding: 9px 18px;
  background: var(--brand-gold); color: var(--brand-cream);
  border: 1px solid var(--brand-gold); border-radius: 4px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.rip-send-btn:hover {
  background: rgba(186, 124, 43, 0.85); border-color: rgba(186, 124, 43, 0.95);
}

.rip-status {
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-body); opacity: 0.7;
}
.rip-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #888;
}
.rip-status-dot.online { background: var(--grass-bright); }

/* ---------- Footer ---------- */
footer {
  margin-top: 32px; padding-top: 18px;
  border-top: 1px solid var(--line-on-page);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-body);
  opacity: 0.55; text-align: center;
}
.forecast-disclaimer {
  margin-top: 10px; font-family: var(--font-body); font-style: italic;
  font-size: 11px; letter-spacing: 0; text-transform: none; opacity: 0.85;
}

/* ==========================================================================
   Strickland v2 additions — domain accents + hog-barn component styles.
   Layered on top of the shared Emergent theme above (borrowed from Comer v2).
   ========================================================================== */
:root {
  --domain-barn:   var(--brand-green);
  --domain-door:   var(--brand-gold);
  --domain-grain:  #c4682e;   /* terracotta */
  --domain-lagoon: var(--brand-blue);
  --domain-curing: #9a7ab0;   /* dusty purple */
  /* Deliberately a teal, NOT --brand-blue: the lagoon already owns blue, and two
     adjacent water domains reading as one colour defeats the accent. */
  --domain-flow:   #1f9e94;   /* teal */
  --grain-deep:    #8e451f;
  --curing-deep:   #6b5480;
  --flow-deep:     #13655f;
}

/* Sidebar dots per domain */
.sidebar a.barns  .sb-dot { background: var(--grass-bright); }
.sidebar a.doors  .sb-dot { background: var(--feed-gold-light); }
.sidebar a.grain  .sb-dot { background: #e0895c; }
.sidebar a.lagoon .sb-dot { background: var(--rain-light); }
.sidebar a.curing .sb-dot { background: #c3a9d6; }
.sidebar a.water  .sb-dot { background: #4fc9be; }

/* Section-band header gradients per domain */
.section-band-header.barns  { background: linear-gradient(135deg, #4f6b1a, var(--brand-green)); }
.section-band-header.doors  { background: linear-gradient(135deg, var(--feed-gold-deep), var(--feed-gold)); }
.section-band-header.grain  { background: linear-gradient(135deg, var(--grain-deep), var(--domain-grain)); }
.section-band-header.lagoon { background: linear-gradient(135deg, var(--rain-deep), var(--rain)); }
.section-band-header.curing { background: linear-gradient(135deg, var(--curing-deep), var(--domain-curing)); }
.section-band-header.flow   { background: linear-gradient(135deg, var(--flow-deep), var(--domain-flow)); }

/* KPI summary top-bar colors */
.sum-card.c-green::before  { background: var(--brand-green); }
.sum-card.c-gold::before   { background: var(--brand-gold); }
.sum-card.c-blue::before   { background: var(--brand-blue); }
.sum-card.c-terra::before  { background: var(--domain-grain); }
.sum-card.c-purple::before { background: var(--domain-curing); }
.sum-card.c-teal::before   { background: var(--domain-flow); }
.sum-card.c-red::before    { background: var(--red); }

/* ---------- Card metric grid: value over label, read downward -------------
   Ported from Harborview v2. Replaces full-width `label ....... value` rows,
   which set tiny text at opposite edges of a wide card and leave a canyon of
   dead space between them. A grid of value-over-label cells is denser AND
   bigger. */
.dc-metrics {
  display: grid; gap: 12px 10px; width: 100%;
  padding: 12px 10px; margin-top: 2px;
  background: rgba(64, 53, 30, 0.045); border-radius: 6px;
}
.dc-metrics.cols-2 { grid-template-columns: repeat(2, 1fr); }
.dc-metrics.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dc-metrics.cols-4 { grid-template-columns: repeat(4, 1fr); }
.dc-cell { display: flex; flex-direction: column; min-width: 0; }
.dc-cell-v {
  font-family: var(--font-body); font-weight: 700; font-size: 19px;
  line-height: 1.05; color: var(--text-card); white-space: nowrap;
}
.dc-cell-v .u {
  font-size: 11px; font-weight: 500; margin-left: 2px;
  color: var(--text-card); opacity: 0.6;
}
.dc-cell-v .muted { color: var(--text-card-muted); font-weight: 600; }
.dc-cell-l {
  margin-top: 4px; font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-card-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-cell.warn .dc-cell-v { color: var(--amber, #9A6A0C); }
.dc-cell.crit .dc-cell-v { color: var(--red); }

/* Inline context strip for secondary values (door state, cure stage). */
.dc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dc-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 9px; border-radius: 20px;
  background: rgba(64, 53, 30, 0.06);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  color: var(--text-card); white-space: nowrap;
}
.dc-chip i {
  font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-card-muted);
}
.dc-chip.warn { background: rgba(186, 124, 43, 0.16); color: #7A5210; }
.dc-chip.warn i { color: #7A5210; opacity: 0.75; }
.dc-chip.crit { background: rgba(68, 0, 8, 0.12); color: var(--red); }
.dc-chip.crit i { color: var(--red); opacity: 0.75; }

/* ---------- Water-meter matrix ---------------------------------------------
   Both of a barn's meters on ONE card: metrics down the left, a column per
   meter, and a total. Deliberately keeps the row layout rather than the cell
   grid above — a label...value row leaves a wide empty middle, and that space
   is exactly what the per-meter columns fill, so it costs no extra card height. */
.dc-mtable { width: 100%; margin-top: 2px;
  padding: 10px; background: rgba(64, 53, 30, 0.045); border-radius: 6px; }
.mt-row { display: grid; align-items: baseline; gap: 8px; }
.mt-row + .mt-row { margin-top: 9px; }
.mt-head { padding-bottom: 7px; margin-bottom: 3px; border-bottom: 1px solid var(--line); }
.mt-head span, .mt-lbl {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-card-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-head .mt-total, .mt-val.mt-total {
  color: var(--text-card); font-weight: 700;
}
.mt-val {
  font-family: var(--font-body); font-weight: 700; font-size: 17px;
  line-height: 1.05; color: var(--text-card); white-space: nowrap;
}
.mt-val .u { font-size: 10px; font-weight: 500; margin-left: 2px; opacity: 0.6; }
.mt-val .muted { color: var(--text-card-muted); font-weight: 600; font-size: 15px; }
.mt-val.warn { color: var(--amber, #9A6A0C); }

/* ---------- Paired water-meter detail ------------------------------------
   One meter graphic each side of the readings, all on one line. The readings
   sit in a narrow middle column on purpose: stretched across the full panel the
   three value columns drift so far apart the rows stop reading as rows. */
.wm-pair {
  /* Middle column is `auto` — sized to the table's content, NOT 1fr. Stretching
     it pushed the value columns to opposite ends of the panel. The leftover
     width goes to the graphics instead, which can use it. */
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 28px; align-items: center; justify-items: center;
}
.wm-side { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.wm-side svg { max-width: 340px; }
.wm-side-label {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-card-muted);
}
.wm-mid { min-width: 0; max-width: 100%; overflow-x: auto; }
@media (max-width: 900px) {
  .wm-pair { grid-template-columns: 1fr; }
  .wm-side { order: 2; }
  .wm-mid { order: 1; }
}

/* Readings grid. Numbers are right-aligned and columns sized to content so the
   eye tracks along a row instead of hopping across empty space. */
.wm-tbl { display: grid; gap: 0; }
.wm-tbl { width: auto; }
.wm-tbl .r {
  display: grid; grid-template-columns: var(--wm-cols); align-items: baseline;
  gap: 6px 18px; padding: 7px 2px;
}
.wm-tbl .r + .r { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.wm-tbl .r.h { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wm-tbl .r.h + .r { border-top: 0; }
.wm-tbl .h span, .wm-tbl .lbl {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-card-muted);
}
.wm-tbl .h span { text-align: right; }
.wm-tbl .h span:first-child, .wm-tbl .lbl { text-align: left; }
.wm-tbl .h .tot { color: var(--text-card); font-weight: 700; }
.wm-tbl .v {
  text-align: right; font-family: var(--font-body); font-weight: 700; font-size: 16px;
  line-height: 1.1; color: var(--text-card); white-space: nowrap;
}
.wm-tbl .v .u { font-size: 10px; font-weight: 500; margin-left: 2px; opacity: 0.6; }
.wm-tbl .v .muted { color: var(--text-card-muted); font-weight: 600; }
.wm-tbl .v.sm { font-size: 13px; font-weight: 600; }
.wm-tbl .v.tot { color: var(--text-card); }
.wm-tbl .v.tot.warn { color: var(--amber, #9A6A0C); }
.wm-tbl .r.sep { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }

/* Unit toggle (gal / L) — sits next to the period tabs on the water pages.
   Mirrors .period-tabs so the two rows read as one control group. */
.unit-tabs { display: inline-flex; gap: 4px; margin-left: 10px; }
.unit-tabs button {
  padding: 5px 11px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
}
.unit-tabs button:hover { border-color: var(--domain-flow); color: var(--ink); }
.unit-tabs button.active {
  background: var(--domain-flow); border-color: var(--domain-flow); color: #fff;
}

/* Stuck-totalizer banner — a frozen meter is an instrumentation problem, and it
   gets said out loud rather than being implied by a "0 gallons" reading. */
.stuck-banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0; padding: 11px 14px; border-radius: 8px;
  background: color-mix(in srgb, var(--brand-gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
  font-size: 13px; line-height: 1.45; color: var(--ink);
}
.stuck-banner strong { color: var(--brand-gold); }

/* Plain device cards (barns/doors) — no side visual, metric rows fill width */
.device-card.plain .dc-body { grid-template-columns: 1fr; }
.metric-rows { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.metric-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-card);
}
.metric-row .mr-label { opacity: 0.68; }
.metric-row .mr-value { font-family: var(--font-body); font-weight: 700; font-size: 14px; }
.metric-row .mr-value .unit { font-size: 11px; font-weight: 500; opacity: 0.6; margin-left: 2px; }
.metric-row.warn .mr-value { color: #B07C0F; }
.metric-row.crit .mr-value { color: var(--red); }

/* Door open/closed pill */
.door-pill {
  display: inline-block; padding: 4px 12px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.door-pill.closed  { background: rgba(107, 142, 35, 0.20); color: #3f5d12; }
.door-pill.open    { background: rgba(186, 124, 43, 0.24); color: #6e4815; animation: pulse 1.5s infinite; }
.door-pill.unknown { background: rgba(64, 53, 30, 0.14); color: var(--brand-brown); }

/* Vertical fill visual (grain bin / lagoon cross-section on cards) */
.fill-visual {
  position: relative; width: 78px; height: 118px; margin: 0 auto;
  border: 2px solid var(--line); border-radius: 6px; overflow: hidden;
  background: repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(64,53,30,0.05) 11px, rgba(64,53,30,0.05) 12px);
}
.fill-visual .fill-level {
  position: absolute; left: 0; right: 0; bottom: 0;
  transition: height 0.5s; opacity: 0.9;
}
.fill-visual.bin  .fill-level { background: linear-gradient(180deg, #d99a58, var(--domain-grain)); }
.fill-visual.lagoon .fill-level { background: linear-gradient(180deg, var(--rain-light), var(--rain-deep)); }
.fill-visual .fill-cap {
  position: absolute; top: 4px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-card-muted);
}

/* Sensor Status table */
.status-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.status-table thead th {
  text-align: left; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-card); opacity: 0.7; padding: 10px 12px;
  border-bottom: 2px solid var(--line); cursor: pointer; white-space: nowrap;
}
.status-table thead th:hover { opacity: 1; }
.status-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text-card); }
.status-table tbody tr { transition: background 0.12s; }
.status-table tbody tr:hover { background: var(--surface-nested); }
.status-table .dev-eui { font-family: var(--font-mono); font-size: 11px; opacity: 0.75; }
.s-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.s-dot.online { background: var(--status-ok); }
.s-dot.stale  { background: var(--status-warning); }
.s-dot.offline{ background: var(--status-offline); }
.mini-bar {
  display: inline-block; width: 46px; height: 9px; background: #ffffff;
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  vertical-align: middle; margin-right: 6px;
}
.mini-bar-inner { height: 100%; background: var(--brand-green); }
.mini-bar-inner.warn { background: var(--brand-gold); }
.mini-bar-inner.low  { background: var(--red); }

/* Filter chips (Sensor Status domain filter) */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-chip {
  background: var(--surface-card); color: var(--text-card);
  border: 1px solid var(--line); border-radius: 16px; padding: 6px 14px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.filter-chip.active { background: var(--brown); color: var(--cream); border-color: var(--brown); }

/* KPI strip cell used on domain pages (min/avg/max) */
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 18px; }

/* Calibrate — grouped threshold panels */
.calib-group { margin-bottom: 22px; }
.calib-group h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.calib-group h3::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rain); }
.calib-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.calib-live {
  font-family: var(--font-mono); font-size: 11px; color: var(--brown); opacity: 0.7;
  margin-top: 4px;
}

/* Range spinner shown while readings re-fetch */
.readings-spinner {
  width: 14px; height: 14px; border: 2px solid var(--line);
  border-top-color: var(--rain); border-radius: 50%;
  display: inline-block; animation: sk-spin 0.8s linear infinite; vertical-align: middle;
}
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* ---------- Asset-graphic cards + insight callouts (v2 graphics pass) ------ */
.dc-insight {
  padding: 8px 11px; border-radius: 4px;
  border-left: 3px solid var(--rain);
  background: var(--surface-nested);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.45;
  color: var(--text-card); opacity: 0.95;
}
.dc-insight.warn { border-left-color: var(--brand-gold); }
/* Provisional-calibration caveat on the lagoon card. Small and tight on purpose:
   it has to ride along without making the card taller than its siblings. */
.dc-insight.crit { border-left-color: var(--brand-burgundy); }
.metric-row .mr-value .muted { opacity: 0.5; }

/* Wide card (lagoon): landscape cross-section spans the card, stats below */
.device-card.wide .dc-body { grid-template-columns: 1fr; gap: 10px; }
.device-card.wide .dc-visual svg { max-width: 100%; }
.device-card.wide .metric-rows { flex-direction: row; gap: 22px; }

/* Give the SVG visual room + a soft inset so it doesn't crowd the stats */
.dc-visual { padding: 2px; }

/* ---------- Vertical rhythm: keep grids/strips/panels from touching -------- */
.device-grid { margin-bottom: 22px; }
.section-band-body .device-grid { margin-bottom: 0; }  /* bands own their spacing */
.mini-kpis { margin-bottom: 22px; }
.period-row { margin-bottom: 18px; }
.summary-row { margin-bottom: 22px; }
.filter-chips { margin-bottom: 18px; }
/* Charts grid used on some detail/domain pages */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
@media (max-width: 1024px) { .charts-grid { grid-template-columns: 1fr; } }

/* Device-detail hero asset visual */
.asset-visual {
  background: linear-gradient(180deg, var(--surface-card), var(--surface-nested));
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; min-height: 200px;
}
.asset-visual svg { max-width: 100%; max-height: 280px; height: auto; width: auto; }

/* ---------- Device-detail "Current readings" card (compact, not elongated) -- */
.readings-card { max-width: 460px; margin-bottom: 0; align-self: start; }
.readings-card .panel-body { padding: 16px 20px; }
.readings-card .metric-rows { gap: 11px; }
.readings-card .metric-row { font-size: 13px; }
.readings-card .metric-row .mr-value { font-size: 15px; }
/* When there is no hero visual the grid is set to 1fr in JS — keep the readings
   card from stretching full width. */
.top-grid .asset-visual[style*="display: none"] + .readings-card { max-width: 460px; }

/* ---------- Card sizing: grow to fit content, don't stretch to fill --------
   The device grids use auto-fit + 1fr, so a lone card would expand across the
   whole row. Cap the card so single-card areas (lagoon, curing, overview
   sections) stay a normal size and align left instead of stretching. */
.device-card { max-width: 440px; }
.section-band-body .device-grid,
#lagoonGrid, #curingGrid { justify-content: start; }

/* ---------- Calibrate page: threshold groups as readable cream panels ------
   Previously the fields rendered directly on the dark page, so the brown
   labels were unreadable. Each group is now a .panel (cream) laid out in a
   responsive grid; fields sit in a compact 2-up grid inside each panel. */
#calibForm {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px; align-items: start;
}
#calibForm .calib-panel { margin-bottom: 0; }
.calib-panel .panel-body { padding: 18px 20px; }
.calib-panel .calib-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px 18px;
}
.calib-panel .field { margin-bottom: 0; }
.calib-panel .field-row input[type="number"] { width: 100%; }