/*
 * dashboard.css  —  Glassmorphism Dashboard
 * Overview tab layout, stat cards, alert box, room panels.
 */

/* ── Dashboard wrapper ─────────────────── */
#dashboard {
  min-height: 100vh;
  position: relative;
}

/* ── Tab panels ────────────────────────── */
.tab-panel {
  display: none;
  position: relative;
  min-height: 100vh;
  padding-top: var(--nav-h);
}

.tab-panel.active {
  display: block;
}

/* ── Overview: lock to viewport, no page scroll ── */
#tab-overview {
  height: 100vh;
  min-height: unset;
  overflow: hidden;
  flex-direction: column;
}

#tab-overview.active {
  display: flex !important;
}

#tab-overview .tab-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Top padding matches the other tabs (36px). The fixed top bar can render a
     touch taller than its reserved --nav-h, so the old tight 16px let the
     header's top row (the Submit Data / Add Back buttons) underlap the nav and
     get clipped. 36px gives the same clearance the other tabs already have. */
  padding: 36px 36px 10px;
}

.overview-main {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.08) transparent;
}

.overview-main::-webkit-scrollbar       { width: 3px; }
.overview-main::-webkit-scrollbar-track { background: transparent; }
.overview-main::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.15); border-radius: 3px; }

/* ── Overview 3D canvas ────────────────── */
#overview-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}

#overview-canvas.visible {
  opacity: 1;
}

/* ── Tab content ───────────────────────── */
.tab-content {
  position: relative;
  z-index: 1;
  padding: 36px 40px 80px;
  max-width: 1720px;
  margin: 0 auto;
}

/* ── Dashboard header ──────────────────── */
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 20px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.page-eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--accent-cyan);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-shadow: 0 0 40px rgba(56,189,248,0.12);
}

.page-title span {
  background: linear-gradient(
    135deg,
    var(--accent-cyan)   0%,
    var(--accent-violet) 40%,
    var(--accent-teal)   70%,
    var(--accent-cyan)   100%
  );
  background-size: 250% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-flow 6s ease-in-out infinite;
}

.header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-top: 8px;
}

.last-updated { display: none; }

.ov-submit-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: rgba(52,211,153,0.07);
  border: 1px solid rgba(52,211,153,0.28);
  border-radius: var(--r-sm);
  color: var(--accent-emerald);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  outline: none;
  transition: all 0.18s ease;
}

.ov-submit-btn:hover {
  background: rgba(52,211,153,0.14);
  border-color: rgba(52,211,153,0.55);
  box-shadow: 0 0 16px rgba(52,211,153,0.16);
}

html[data-theme="light"] .ov-submit-btn {
  background: rgba(5,150,105,0.06);
  border-color: rgba(5,150,105,0.25);
  color: rgb(5,150,105);
}

html[data-theme="light"] .ov-submit-btn:hover {
  background: rgba(5,150,105,0.12);
  border-color: rgba(5,150,105,0.50);
}

/* Two header buttons sit side by side when both data-entry perms are granted. */
.ov-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Add Back button — violet, to distinguish it from the emerald Submit button. */
.ov-addback-btn {
  background: rgba(167,139,250,0.08);
  border-color: rgba(167,139,250,0.30);
  color: #a78bfa;
}
.ov-addback-btn:hover {
  background: rgba(167,139,250,0.16);
  border-color: rgba(167,139,250,0.55);
  box-shadow: 0 0 16px rgba(167,139,250,0.16);
}
html[data-theme="light"] .ov-addback-btn {
  background: rgba(124,58,237,0.06);
  border-color: rgba(124,58,237,0.25);
  color: rgb(124,58,237);
}
html[data-theme="light"] .ov-addback-btn:hover {
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.50);
}

/* ─── Overview 2-column body ───────────── */
.overview-body {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

@media (max-width: 960px) {
  .overview-body { grid-template-columns: 1fr; }
}

/* ─── Alert sidebar ─────────────────────── */
.alerts-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.alerts-sidebar-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.alert-box {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.2) rgba(255,255,255,0.03);
}

.alert-box::-webkit-scrollbar        { width: 3px; }
.alert-box::-webkit-scrollbar-track  { background: transparent; }
.alert-box::-webkit-scrollbar-thumb  { background: rgba(56,189,248,0.2); border-radius: 3px; }

/* ─── Clear button ──────────────────────── */
.alert-clear-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-xs);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-smooth);
  flex-shrink: 0;
}

.alert-clear-btn:hover {
  background: rgba(251,113,133,0.08);
  border-color: rgba(251,113,133,0.28);
  color: var(--accent-rose);
}

/* ─── Gauge filter bar ──────────────────── */
.gauge-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.gauge-filter-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 16px;
  cursor: pointer;
  transition: all var(--t-base) var(--ease-out);
}

.gauge-filter-btn:hover {
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.25);
  color: var(--accent-cyan);
}

.gauge-filter-btn.active {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.4);
  color: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(56,189,248,0.15);
}

/* ─── Metric blocks (gauge layout) ─────── */
.metric-block {
  margin-bottom: 10px;
}

.metric-block:last-child { margin-bottom: 0; }

.metric-block-hdr {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.metric-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.metric-block-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.metric-range-hint {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.metric-gauge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ─── Circular gauge cell ───────────────── */
.gauge-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 108px;
  padding: 8px 6px 6px;
  background: var(--glass-1);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  cursor: default;
  transition: all var(--t-base) var(--ease-out);
}

.gauge-cell:hover {
  background: var(--glass-2);
  border-color: var(--glass-border-2);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.gauge-cell.gauge-alert {
  border-color: rgba(251,113,133,0.18);
}

.gauge-cell.gauge-alert:hover {
  border-color: rgba(251,113,133,0.38);
  box-shadow: 0 16px 40px rgba(251,113,133,0.14);
}

.gauge-room-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.gauge-cell.gauge-alert .gauge-room-lbl { color: var(--accent-rose); }

.gauge-cell.gauge-na {
  opacity: 0.45;
  pointer-events: none;
}

.gauge-svg {
  width: 84px;
  height: 84px;
  overflow: visible;
}

/* ─── Grouped alert rows ────────────────── */
.alert-group {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--glass-border);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition:
    background var(--t-base) var(--ease-smooth),
    box-shadow var(--t-base) var(--ease-smooth);
}

.alert-group:last-child { border-bottom: none; }

.alert-group.critical { border-left-color: var(--accent-rose); }
.alert-group.warning  { border-left-color: var(--accent-amber); }

.alert-group.critical:hover,
.alert-group.critical.expanded {
  background: rgba(251,113,133,0.06);
  box-shadow: inset 0 0 28px rgba(251,113,133,0.08), 0 0 14px rgba(251,113,133,0.10);
}

.alert-group.warning:hover,
.alert-group.warning.expanded {
  background: rgba(251,191,36,0.04);
  box-shadow: inset 0 0 28px rgba(251,191,36,0.06), 0 0 10px rgba(251,191,36,0.08);
}

/* ── Summary row (always visible) ───────── */
.ag-summary {
  display: grid;
  grid-template-columns: 16px 52px 1fr max-content;
  align-items: start;
  gap: 6px 12px;
  padding: 11px 16px 11px 14px;
}

.ag-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.ag-chevron {
  color: var(--text-dim);
  transition: transform 0.25s ease;
  display: block;
}

.alert-group.expanded .ag-chevron {
  transform: rotate(180deg);
}

/* ── Expanded detail panel ───────────────── */
.ag-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, padding 0.32s ease;
  padding: 0 14px;
  border-top: 0px solid rgba(255,255,255,0.05);
}

.alert-group.expanded .ag-detail {
  max-height: 700px;
  padding: 0 14px 14px;
  border-top-width: 1px;
}

.ag-detail-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  padding: 10px 0 12px;
}

.ag-explanations {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.ag-explain-item {
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 10px 12px;
  border-left: 2px solid rgba(255,255,255,0.1);
}

.ag-explain-item.critical {
  border-left-color: var(--accent-rose);
  background: rgba(251,113,133,0.05);
}

.ag-explain-item.warning {
  border-left-color: var(--accent-amber);
  background: rgba(251,191,36,0.04);
}

.ag-explain-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.ag-explain-item.critical .ag-explain-label { color: var(--accent-rose); }
.ag-explain-item.warning  .ag-explain-label { color: var(--accent-amber); }

.ag-explain-text {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.ag-snapshot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ag-snap-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 4px 10px;
}

.ag-snap-pill.ag-snap-oor {
  border-color: rgba(251,113,133,0.3);
  background: rgba(251,113,133,0.06);
}

.ag-snap-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.ag-snap-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.ag-snap-pill.ag-snap-oor .ag-snap-val { color: var(--accent-rose); }

/* ── Unchanged inner elements ────────────── */
.ag-icon { display: flex; align-items: flex-start; padding-top: 1px; }

.ag-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ag-room {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-cyan);
  text-transform: uppercase;
}

.alert-group.critical .ag-room { color: var(--accent-rose); }

.ag-sys {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ag-msgs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ag-msg {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.ag-msg strong { color: var(--text-primary); font-weight: 600; }
.ag-msg em { font-style: italic; color: var(--text-muted); }

.ag-msg.ag-crit strong { color: var(--accent-rose); }

.ag-time {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: right;
}

/* ─── Legacy alert-item (kept for compat) ─ */
.alert-time {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: right;
}

/* sticky alert header */

/* ─── Summary metric pills ─────────────── */
.summary-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.summary-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--glass-2);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  cursor: default;
  transition: all var(--t-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.summary-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.summary-pill:hover {
  background: var(--glass-3);
  border-color: var(--glass-border-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

.pill-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.pill-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1;
}

/* ─── Section header row ───────────────── */
.overview-section {
  position: relative;
  z-index: 1;
  margin-bottom: 44px;
}

/* ─── Stat cards grid ──────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.stats-loading {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  padding: 20px;
}

/* ─── Glassmorphism Stat Card ──────────── */
.stat-card {
  position: relative;
  background: var(--glass-2);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 22px 20px 20px;
  overflow: hidden;
  cursor: default;
  isolation: isolate;
  transition:
    transform     var(--t-base) var(--ease-out),
    border-color  var(--t-base) var(--ease-smooth),
    box-shadow    var(--t-base) var(--ease-smooth);
}

/* Inner top-left light catch */
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.01) 40%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Accent colour spill at bottom */
.stat-card::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 16px;
  width: 60%;
  height: 40px;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.35;
  transition: opacity var(--t-base) var(--ease-smooth), transform var(--t-base) var(--ease-out);
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(56,189,248,0.25);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.35),
    0 0 0 1px rgba(56,189,248,0.1) inset;
}

.stat-card:hover::after {
  opacity: 0.65;
  transform: scale(1.2);
}

/* Alert state */
.stat-card.alert-card {
  border-color: rgba(251,113,133,0.25);
}

.stat-card.alert-card::after {
  background: var(--accent-rose);
}

.stat-card.alert-card:hover {
  border-color: rgba(251,113,133,0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(251,113,133,0.12) inset;
}

/* Normal card bottom spill — cyan by default */
.stat-card:not(.alert-card)::after {
  background: var(--accent-cyan);
}

.stat-room {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-room::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
  flex-shrink: 0;
}

.stat-card.alert-card .stat-room::before {
  background: var(--accent-rose);
  box-shadow: 0 0 6px var(--accent-rose);
}

.stat-value {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 8px;
  transition: color var(--t-base);
}

.stat-value.alert {
  color: var(--accent-rose);
  text-shadow: 0 0 20px rgba(251,113,133,0.35);
}

.stat-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Progress bar at bottom of card */
.stat-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.05);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
}

.stat-progress-fill {
  height: 100%;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-violet));
  box-shadow: 0 0 8px rgba(56,189,248,0.6);
  transition: width 0.8s var(--ease-spring);
}

.stat-card.alert-card .stat-progress-fill {
  background: linear-gradient(90deg, var(--accent-rose), var(--accent-amber));
  box-shadow: 0 0 8px rgba(251,113,133,0.6);
}

/* Hex deco corner */
.stat-deco {
  position: absolute;
  bottom: 12px;
  right: 12px;
  opacity: 0.06;
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-slow) var(--ease-out);
}

.stat-card:hover .stat-deco {
  opacity: 0.12;
  transform: rotate(15deg) scale(1.1);
}

/* ─── Alert box ────────────────────────── */
.alert-box {
  background: var(--glass-1);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}

.alert-loading {
  padding: 24px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.alert-empty {
  padding: 24px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Alert header */
.alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--glass-border);
}

.alert-filter-btns {
  display: flex;
  gap: 6px;
}

.af-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.af-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

.af-btn.active          { background: rgba(255,255,255,0.09); color: var(--text-primary); border-color: rgba(255,255,255,0.18); }
.af-btn.critical.active { background: rgba(251,113,133,0.15); color: var(--accent-rose);  border-color: rgba(251,113,133,0.35); }
.af-btn.warning.active  { background: rgba(251,191,36,0.12);  color: var(--accent-amber); border-color: rgba(251,191,36,0.3);  }

.af-count {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  color: inherit;
}
.af-btn.critical .af-count { background: rgba(251,113,133,0.2); }
.af-btn.warning  .af-count { background: rgba(251,191,36,0.18); }

.alert-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  min-width: 22px;
  text-align: center;
  background: var(--accent-rose);
  color: #fff;
}

.alert-badge.warn { background: var(--accent-amber); color: #000; }
.alert-badge.ok   { background: var(--accent-emerald); color: #000; }

.alert-total {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* Alert row */
.alert-item {
  display: grid;
  grid-template-columns: 18px 72px 80px 1fr max-content;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--glass-border);
  border-left: 3px solid transparent;
  transition: background var(--t-base) var(--ease-smooth);
}

.alert-item:last-child { border-bottom: none; }
.alert-item:hover      { background: rgba(255,255,255,0.025); }
.alert-item.critical   { border-left-color: var(--accent-rose); }
.alert-item.warning    { border-left-color: var(--accent-amber); }

.alert-icon { display: flex; align-items: center; }
.alert-room {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  text-transform: uppercase;
}
.alert-system { font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; }
.alert-msg    { font-size: 12px; color: var(--text-secondary); }
.alert-msg strong { color: var(--text-primary); font-weight: 600; }
.alert-tech {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}

/* ─── Room sub-tab bar ─────────────────── */
.room-subtabs {
  display: flex;
  gap: 6px;
}

.room-subtab {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all var(--t-base) var(--ease-out);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.room-subtab:hover {
  background: var(--glass-2);
  border-color: rgba(56,189,248,0.32);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.room-subtab.active {
  background: rgba(56,189,248,0.13);
  border-color: rgba(56,189,248,0.45);
  color: var(--accent-cyan);
  box-shadow: 0 0 18px rgba(56,189,248,0.22), 0 6px 16px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}

/* Compact header row: sub-tabs left, badge right, no extra vertical */
.room-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.room-name-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ─── Room panel ───────────────────────── */
.room-panel-content {
  position: relative;
  z-index: 1;
  padding: 20px 40px 60px;
}

.room-bg-text {
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 240px);
  color: rgba(56,189,248,0.025);
  letter-spacing: 0.05em;
  line-height: 1;
  position: absolute;
  top: 28px;
  right: -20px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-top: 0;
}

.room-title {
  display: none; /* replaced by .room-name-label inline with sub-tabs */
}

.room-sys-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(56,189,248,0.07);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 20px;
  padding: 5px 16px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* ─── Alert open icon (sidebar) ─────────── */
/* ─── Alert Detail Modal ─────────────────── */
.alert-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.alert-modal-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.alert-modal {
  position: relative;
  width: 60%;
  min-width: 340px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 26, 0.97);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 32px 80px rgba(0,0,0,0.7);
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  transition:
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
    opacity   0.22s ease;
  overflow: hidden;
}
.alert-modal-overlay.visible .alert-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.alert-modal.am-critical {
  border-color: rgba(251,113,133,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 32px 80px rgba(0,0,0,0.7), 0 0 50px rgba(251,113,133,0.09);
}
.alert-modal.am-warning {
  border-color: rgba(251,191,36,0.2);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 32px 80px rgba(0,0,0,0.7), 0 0 50px rgba(251,191,36,0.07);
}

/* ── macOS title bar ────────────────────── */
.am-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}

.am-lights {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}

.am-light {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  transition: filter 0.15s;
}

.am-light.red    { background: #ff5f57; cursor: pointer; }
.am-light.yellow { background: #ffbd2e; cursor: default; }
.am-light.green  { background: #28c940; cursor: default; }
.am-light.red:hover { filter: brightness(1.25); }

.am-win-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  flex: 1;
  text-align: center;
}

.am-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}
.am-badge.critical { background: rgba(251,113,133,0.15); border: 1px solid rgba(251,113,133,0.35); color: var(--accent-rose); }
.am-badge.warning  { background: rgba(251,191,36,0.12);  border: 1px solid rgba(251,191,36,0.3);  color: var(--accent-amber); }

/* Modal body */
.am-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.15) transparent;
}
.am-body::-webkit-scrollbar       { width: 3px; }
.am-body::-webkit-scrollbar-track { background: transparent; }
.am-body::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.2); border-radius: 3px; }

/* Sections */
.am-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.am-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.am-section-label::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* Triggered alerts */
.am-alerts-summary { display: flex; flex-direction: column; gap: 7px; }
.am-alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  background: rgba(255,255,255,0.03);
}
.am-alert-row.critical { background: rgba(251,113,133,0.08); border-left: 2px solid var(--accent-rose); }
.am-alert-row.warning  { background: rgba(251,191,36,0.06);  border-left: 2px solid var(--accent-amber); }
.am-alert-msg { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.am-alert-msg strong { color: var(--text-primary); font-weight: 600; }
.am-alert-msg.critical strong { color: var(--accent-rose); }

/* Entry info */
.am-meta-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding: 13px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.am-meta-item { display: flex; flex-direction: column; gap: 4px; }
.am-meta-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.am-meta-val { font-size: 13px; color: var(--text-primary); font-weight: 500; }

/* Explanations */
.am-explanations { display: flex; flex-direction: column; gap: 10px; }
.am-explain-item {
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 3px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}
.am-explain-item.critical { border-left-color: var(--accent-rose); background: rgba(251,113,133,0.07); }
.am-explain-item.warning  { border-left-color: var(--accent-amber); background: rgba(251,191,36,0.05); }
.am-explain-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.am-explain-item.critical .am-explain-label { color: var(--accent-rose); }
.am-explain-item.warning  .am-explain-label { color: var(--accent-amber); }
.am-explain-text { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Snapshot pills */
.am-snapshot { display: flex; flex-wrap: wrap; gap: 8px; }
.am-snap-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
}
.am-snap-pill.oor {
  border-color: rgba(251,113,133,0.32);
  background: rgba(251,113,133,0.08);
}
.am-snap-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.am-snap-val { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.am-snap-pill.oor .am-snap-val { color: var(--accent-rose); }

/* ─── Big watermark ────────────────────── */
.overview-bg-text {
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, 200px);
  color: rgba(56,189,248,0.025);
  letter-spacing: 0.06em;
  line-height: 1;
  position: absolute;
  top: 36px;
  right: -20px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ══════════════════════════════════════════
   LIGHT MODE — Dashboard overrides
══════════════════════════════════════════ */

/* Elements with hardcoded rgba(255,255,255,X) need flipping on light */
html[data-theme="light"] .alert-clear-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}

html[data-theme="light"] .alert-clear-btn:hover {
  background: rgba(225,29,72,0.08);
  border-color: rgba(225,29,72,0.30);
}

html[data-theme="light"] .gauge-filter-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}

html[data-theme="light"] .gauge-filter-btn:hover {
  background: rgba(2,132,199,0.08);
  border-color: rgba(2,132,199,0.28);
}

html[data-theme="light"] .gauge-filter-btn.active {
  background: rgba(2,132,199,0.12);
  border-color: rgba(2,132,199,0.40);
  box-shadow: 0 0 12px rgba(2,132,199,0.15);
}

html[data-theme="light"] .overview-bg-text {
  color: rgba(2,132,199,0.035);
}

html[data-theme="light"] .room-bg-text {
  color: rgba(2,132,199,0.03);
}

html[data-theme="light"] .page-title {
  text-shadow: 0 0 40px rgba(2,132,199,0.10);
}

html[data-theme="light"] .room-subtab.active {
  background: rgba(2,132,199,0.12);
  border-color: rgba(2,132,199,0.40);
  box-shadow: 0 0 14px rgba(2,132,199,0.15), 0 4px 12px rgba(0,0,0,0.08);
}

html[data-theme="light"] .room-subtab:hover {
  border-color: rgba(2,132,199,0.25);
}

/* ── Alert modal — light mode ─────────────── */
html[data-theme="light"] .alert-modal-overlay.visible {
  background: rgba(180,180,210,0.45);
}

html[data-theme="light"] .alert-modal {
  background: rgba(242,244,255,0.97);
  border-color: rgba(130,100,200,0.20);
  box-shadow: 0 40px 100px rgba(100,80,180,0.18), 0 0 0 1px rgba(255,255,255,0.80) inset;
}

html[data-theme="light"] .alert-modal.am-critical {
  border-color: rgba(225,29,72,0.28);
  box-shadow: 0 40px 100px rgba(100,80,180,0.15), 0 0 50px rgba(225,29,72,0.08), 0 0 0 1px rgba(255,255,255,0.80) inset;
}

html[data-theme="light"] .alert-modal.am-warning {
  border-color: rgba(217,119,6,0.28);
  box-shadow: 0 40px 100px rgba(100,80,180,0.15), 0 0 50px rgba(217,119,6,0.08), 0 0 0 1px rgba(255,255,255,0.80) inset;
}

html[data-theme="light"] .am-header {
  border-bottom-color: rgba(130,100,200,0.14);
}

html[data-theme="light"] .am-close {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.10);
}

html[data-theme="light"] .am-close:hover {
  background: rgba(225,29,72,0.08);
  border-color: rgba(225,29,72,0.30);
}

html[data-theme="light"] .am-alert-row {
  background: rgba(0,0,0,0.03);
}

html[data-theme="light"] .am-alert-row.critical {
  background: rgba(225,29,72,0.07);
}

html[data-theme="light"] .am-alert-row.warning {
  background: rgba(217,119,6,0.07);
}

html[data-theme="light"] .am-meta-row {
  background: rgba(0,0,0,0.03);
  border-color: rgba(130,100,200,0.12);
}

html[data-theme="light"] .am-explain-item {
  background: rgba(0,0,0,0.03);
  border-left-color: rgba(130,100,200,0.25);
}

html[data-theme="light"] .am-explain-item.critical {
  background: rgba(225,29,72,0.06);
}

html[data-theme="light"] .am-explain-item.warning {
  background: rgba(217,119,6,0.05);
}

html[data-theme="light"] .am-snap-pill {
  background: rgba(0,0,0,0.04);
  border-color: rgba(130,100,200,0.16);
}

html[data-theme="light"] .am-snap-pill.oor {
  background: rgba(225,29,72,0.07);
  border-color: rgba(225,29,72,0.30);
}

html[data-theme="light"] .am-body::-webkit-scrollbar-thumb {
  background: rgba(130,100,200,0.22);
}

html[data-theme="light"] .am-rh::before,
html[data-theme="light"] .am-rh::after {
  background: rgba(2,132,199,0.40);
}

html[data-theme="light"] .am-rh:hover::before,
html[data-theme="light"] .am-rh:hover::after {
  background: rgba(2,132,199,0.90);
}

/* Am note/comment textarea if present */
html[data-theme="light"] .am-note {
  background: rgba(0,0,0,0.04);
  border-color: rgba(130,100,200,0.18);
  color: var(--text-primary);
}

html[data-theme="light"] .am-footer {
  border-top-color: rgba(130,100,200,0.14);
  background: rgba(0,0,0,0.02);
}

/* ════════════════════════════════════════════════════════════════════════════
   Add Backs — admin → employee corrective-instruction flow
   ----------------------------------------------------------------------------
   1. ADMIN FORM MODAL — sits on top of .ftest-* shell reused from form.css
   2. EMPLOYEE INBOX SIDEBAR — replaces .alerts-sidebar contents for employees
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Admin Add Back modal ────────────────────────────────────────────── */
.addback-modal {
  max-width: 720px;
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}
.addback-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 18px 0;
  padding: 10px 14px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(186, 230, 253, 0.92);
}
.addback-banner svg { flex-shrink: 0; margin-top: 1px; color: rgba(56, 189, 248, 0.85); }
.addback-config { padding: 12px 18px 4px; }

/* ── Side panels — history (left) + submissions (right) ─────────────── */
/* Shared base for both side panels */
.addback-sidepanel,
.addback-histpanel {
  position: fixed;
  top: 32px;
  bottom: 32px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: rgba(8, 16, 24, 0.94);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 60px rgba(56,189,248,0.08);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
/* RIGHT panel (submissions) — slides in from right */
.addback-sidepanel {
  right: 24px;
  transform: translateX(calc(100% + 40px));
}
.addback-sidepanel.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* LEFT panel (history) — slides in from left, violet accent */
.addback-histpanel {
  left: 24px;
  transform: translateX(calc(-100% - 40px));
  border-color: rgba(167, 139, 250, 0.28);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 60px rgba(167,139,250,0.08);
}
.addback-histpanel.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* Modal stays centered — no shift needed with panels on both sides */
.ftest-overlay.active .ftest-modal.addback-modal {
  transform: none;
}
@media (max-width: 1200px) {
  .addback-sidepanel { width: 280px; }
  .addback-histpanel { width: 260px; }
}
@media (max-width: 960px) {
  /* Panels collapse to bottom strips on small screens */
  .addback-sidepanel, .addback-histpanel {
    left: 0; right: 0; width: 100%;
    top: auto; bottom: 0; border-radius: 14px 14px 0 0;
    max-height: 36vh;
  }
  .addback-sidepanel   { transform: translateY(calc(100% + 20px)); }
  .addback-histpanel   { transform: translateY(calc(100% + 20px)); display: none; }
  .addback-sidepanel.active { transform: translateY(0); }
}
.addback-side-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}
.addback-side-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(56, 189, 248, 0.85);
  display: block;
  margin-bottom: 4px;
}
.addback-side-h {
  margin: 0;
  font-family: var(--font-display, 'Bebas Neue', 'Space Grotesk', sans-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.1;
}
/* Per-card ⤢ expand trigger (top-right corner of each submission / add-back card) */
.addback-picker-row, .addback-sent-card { position: relative; }
.addback-xpd-trigger {
  position: absolute;
  top: 7px; right: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.28);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.addback-picker-row:hover .addback-xpd-trigger,
.addback-sent-card:hover .addback-xpd-trigger,
.addback-xpd-trigger:focus-visible { opacity: 1; }
.addback-xpd-trigger:hover { background: rgba(124,58,237,0.32); border-color: rgba(167,139,250,0.6); color: #fff; transform: translateY(-1px); }
/* Keep header text clear of the corner button */
.addback-picker-row .addback-pick-meta,
.addback-sent-card .recent-card-meta { padding-right: 26px; }
@media (pointer: coarse) { .addback-xpd-trigger { opacity: 1; } }  /* always visible on touch */

/* ── Single-item expand pop-out modal ───────────────────────────────────── */
.addback-expand-overlay {
  position: fixed; inset: 0;
  z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: rgba(4, 6, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  /* Never trap clicks while invisible — this overlay is fixed/inset:0/z:4000, so
     a lingering opacity:0 instance (during fade-out or if teardown is preempted)
     would otherwise swallow every click on the page, incl. the side nav. */
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.addback-expand-overlay.active { opacity: 1; pointer-events: auto; }
.addback-expand-modal {
  width: min(560px, 96vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(20,24,42,0.98), rgba(12,15,28,0.98));
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.2s var(--ease-out);
}
.addback-expand-overlay.active .addback-expand-modal { transform: none; }
/* Comparison mode: wider modal to hold Yesterday | Today side by side. */
.addback-expand-modal.is-compare { width: min(1040px, 96vw); }

/* ── Yesterday-vs-Today comparison ──────────────────────────────────────────── */
.addback-cmp { display: flex; flex-direction: column; gap: 16px; }

/* ── Grow-context band (cycle · day-of-cycle · water-change) ──────────────── */
.addback-cyc {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(94, 234, 212, 0.07), transparent 55%),
    radial-gradient(130% 100% at 100% 0%, rgba(167, 139, 250, 0.07), transparent 55%),
    rgba(13, 19, 36, 0.55);
  padding: 12px 14px 13px;
  animation: addback-cyc-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.addback-cyc-tag {
  display: flex; align-items: center; gap: 7px; margin-bottom: 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
}
.addback-cyc-tag svg { color: rgba(94, 234, 212, 0.9); }
.addback-cyc-sys {
  margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: none; color: rgba(148, 163, 184, 0.62);
}
.addback-cyc-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.addback-cyc-chip {
  --cyc: rgba(148, 163, 184, 0.8);
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--cyc) 10%, transparent), transparent 60%),
    rgba(8, 12, 26, 0.5);
  padding: 9px 11px;
  min-width: 0;
}
.addback-cyc-ic {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--cyc) 16%, transparent);
  color: var(--cyc);
}
.addback-cyc-ic svg { width: 17px; height: 17px; }
.addback-cyc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.addback-cyc-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(148, 163, 184, 0.72); white-space: nowrap;
}
.addback-cyc-k em { font-style: normal; color: var(--cyc); }
/* chip "?" explainer — due (amber, calm) vs overdue (red, urgent), distinct motion */
.addback-cyc-q {
  appearance: none; cursor: pointer; width: 15px; height: 15px; border-radius: 50%; padding: 0; margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  font: 800 9px/1 var(--font-body, 'Inter', sans-serif);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.addback-cyc-q-due {
  color: #fcd34d; background: rgba(251,191,36,0.16); border: 1px solid rgba(251,191,36,0.5);
  animation: addback-cyc-q-breathe 2.8s ease-in-out infinite;
}
.addback-cyc-q-due:hover { background: #fcd34d; color: #1a1206; transform: scale(1.16); box-shadow: 0 0 9px rgba(251,191,36,0.55); animation: none; }
.addback-cyc-q-overdue {
  color: #fca5a5; background: rgba(251,77,106,0.16); border: 1px solid rgba(251,77,106,0.5);
  animation: addback-cyc-q-pulse 1.3s ease-in-out infinite;
}
.addback-cyc-q-overdue:hover { background: #fb4d6a; color: #fff; transform: scale(1.2); box-shadow: 0 0 11px rgba(251,77,106,0.65); animation: none; }
@keyframes addback-cyc-q-breathe { 0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); } 50% { box-shadow: 0 0 0 3px rgba(251,191,36,0.16); } }
@keyframes addback-cyc-q-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,77,106,0); transform: scale(1); }
  35%     { box-shadow: 0 0 0 4px rgba(251,77,106,0.26); transform: scale(1.1); }
  70%     { box-shadow: 0 0 0 1px rgba(251,77,106,0.1); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .addback-cyc-q { animation: none !important; } }
.addback-cyc-v {
  font-size: 15px; font-weight: 700; line-height: 1.1; color: var(--cyc);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.addback-cyc-na { font-size: 12px; font-weight: 600; color: rgba(148, 163, 184, 0.5); }
.addback-cyc-meter {
  margin-top: 5px; height: 4px; border-radius: 99px; overflow: hidden;
  background: rgba(148, 163, 184, 0.16);
}
.addback-cyc-meterfill {
  display: block; height: 100%; width: var(--fill); border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyc) 55%, transparent), var(--cyc));
  animation: addback-cyc-fill 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes addback-cyc-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes addback-cyc-fill {
  from { width: 0; }
  to   { width: var(--fill); }
}
@media (prefers-reduced-motion: reduce) {
  .addback-cyc { animation: none; }
  .addback-cyc-meterfill { animation: none; }
}
@media (max-width: 640px) {
  .addback-cyc-chips { grid-template-columns: 1fr; }
}

/* SVG delta strip across the top */
.addback-cmp-strip {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(56, 189, 248, 0.08), transparent 55%),
    radial-gradient(130% 100% at 100% 0%, rgba(167, 139, 250, 0.08), transparent 55%),
    rgba(13, 19, 36, 0.55);
  padding: 12px 14px 13px;
}
.addback-cmp-striptag {
  display: flex; align-items: center; gap: 7px; margin-bottom: 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
}
.addback-cmp-striptag svg { color: rgba(56, 189, 248, 0.9); }
.addback-cmp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.addback-cmp-bandkey { margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: rgba(134, 239, 172, 0.7); }
.addback-cmp-metric {
  --dir: rgba(148, 163, 184, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(8, 12, 26, 0.5);
  padding: 9px 11px 7px;
  display: flex; flex-direction: column; gap: 5px;
}
.addback-cmp-metric.is-up   { --dir: #86efac; }
.addback-cmp-metric.is-down { --dir: #fca5a5; }
.addback-cmp-metric.is-flat { --dir: #93c5fd; }
.addback-cmp-metric.is-na   { --dir: rgba(148, 163, 184, 0.55); }
.addback-cmp-mhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.addback-cmp-mlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(203, 213, 225, 0.86); }
.addback-cmp-delta { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--dir); }
.addback-cmp-delta.is-na { font-size: 10px; color: rgba(148, 163, 184, 0.6); font-weight: 600; }
/* Chart */
.addback-cmp-spark { width: 100%; height: auto; display: block; overflow: visible; }
.addback-cmp-band   { fill: rgba(34, 197, 94, 0.13); stroke: rgba(74, 222, 128, 0.38); stroke-width: 1; stroke-dasharray: 3 3; }
.addback-cmp-area   { fill: var(--dir); opacity: 0.12; }
.addback-cmp-line   { fill: none; stroke: var(--dir); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.addback-cmp-dot    { fill: var(--dir); stroke: rgba(8, 12, 26, 0.95); stroke-width: 1.4; }
.addback-cmp-dot.d1 { opacity: 0.55; }
.addback-cmp-dot.is-oor { fill: #f87171; }
.addback-cmp-ptlbl  { fill: rgba(226, 232, 240, 0.78); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: 'Space Grotesk','Inter',sans-serif; }
.addback-cmp-ptlbl.is-today { fill: #f1f5ff; }
.addback-cmp-xlbl   { fill: rgba(148, 163, 184, 0.58); font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-family: 'Inter',sans-serif; }
.addback-cmp-xlbl.is-today { fill: rgba(125, 211, 252, 0.85); }
.addback-cmp-safe   { text-align: center; font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; color: rgba(134, 239, 172, 0.72); margin-top: 1px; }
/* Date chip on a section label (comparison context). */
.addback-xpd-datechip {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: 5px; vertical-align: 1px;
  color: rgba(203, 213, 225, 0.78);
  background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.22);
}
.addback-cmp-yest  .addback-xpd-datechip { color: rgba(226, 232, 240, 0.85); }
.addback-cmp-today .addback-xpd-datechip { color: #bae6fd; background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.3); }

/* Two-column body */
.addback-cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.addback-cmp-col {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: rgba(10, 14, 28, 0.45);
  padding: 12px 13px 13px;
  min-width: 0;
}
.addback-cmp-yest  { border-color: rgba(148, 163, 184, 0.18); }
.addback-cmp-today { border-color: rgba(56, 189, 248, 0.28); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.1) inset; }
.addback-cmp-coltag {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: -2px 0 11px; padding-bottom: 9px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.addback-cmp-colleft { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.addback-cmp-colname {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
}
.addback-cmp-coltag.is-yest  .addback-cmp-colname { color: rgba(203, 213, 225, 0.85); }
.addback-cmp-coltag.is-today .addback-cmp-colname { color: #7dd3fc; }
.addback-cmp-coldate { font-size: 11px; color: rgba(148, 163, 184, 0.7); }
/* The per-side card header inside each column is redundant with the col tag. */
.addback-cmp-col .addback-xpd-chdr { display: none; }

/* Line-draw animation (CSS, reduced-motion safe). */
@media (prefers-reduced-motion: no-preference) {
  .addback-cmp-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: addback-cmp-draw 0.7s 0.15s cubic-bezier(0.22, 1, 0.32, 1) forwards;
  }
  .addback-cmp-dot { opacity: 0; animation: addback-cmp-dot 0.3s 0.6s ease forwards; }
  .addback-cmp-dot.d1 { animation-delay: 0.45s; }
}
@keyframes addback-cmp-draw { to { stroke-dashoffset: 0; } }
@keyframes addback-cmp-dot  { to { opacity: 1; } }

/* The sent add-back details below the comparison. */
.addback-cmp-abwrap {
  margin-top: 16px; padding-top: 15px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.addback-cmp-abtag {
  display: flex; align-items: center; gap: 7px; margin-bottom: 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(167, 139, 250, 0.9);
}

@media (max-width: 720px) {
  .addback-cmp-cols { grid-template-columns: 1fr; }
  .addback-cmp-metrics { grid-template-columns: 1fr; }
}
.addback-xpd-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(148,163,184,0.14);
}
.addback-xpd-h { margin: 0; font-size: 17px; font-weight: 600; color: #f1f5fb; flex: 1 1 auto; }
.addback-xpd-close { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--text-muted); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; }
.addback-xpd-close:hover { background: rgba(248,113,113,0.16); border-color: rgba(248,113,113,0.5); color: #fca5a5; }

.addback-expand-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; }
.addback-xpd-chdr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; color: #f1f5fb; margin-bottom: 14px; }
.addback-xpd-chdr strong { font-weight: 700; }
.addback-xpd-cmeta { margin-left: auto; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.addback-xpd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 18px; }
.addback-xpd-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.addback-xpd-k { font-size: 13px; color: var(--text-muted); }
/* "AUTO" badge on system-computed columns (pH/PPM Change, Trend, Crash, DoD) */
.addback-xpd-auto {
  display: inline-block; margin-left: 7px; vertical-align: middle;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #a78bfa; background: rgba(167,139,250,0.14);
  border: 1px solid rgba(167,139,250,0.34); border-radius: 999px;
  padding: 1px 6px;
}
.addback-xpd-row.is-auto .addback-xpd-v { color: #c4b5fd; }
.addback-xpd-v { font-size: 14.5px; color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Grouped sections in the expanded Log entry — Initial / Final / Add Back / Details */
.addback-xpd-section { margin-bottom: 16px; }
.addback-xpd-section:last-child { margin-bottom: 0; }
.addback-xpd-sectlbl {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 7px; margin-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.addback-xpd-sectlbl::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px;
  background: currentColor; flex-shrink: 0;
}
.addback-xpd-section-initial .addback-xpd-sectlbl { color: #38bdf8; }
.addback-xpd-section-dod      .addback-xpd-sectlbl { color: #a78bfa; }
.addback-xpd-section-final   .addback-xpd-sectlbl { color: #34d399; }
.addback-xpd-section-addback .addback-xpd-sectlbl { color: #fbbf24; }
.addback-xpd-section-details .addback-xpd-sectlbl { color: #94a3b8; }

/* Missing-final flag — red "Missing final" pill in the header + notice in the
   Final section (mirrors the Daily Logs incomplete-day red flag). */
.addback-xpd-chdr.is-incomplete strong { color: #fda4af; }
.addback-xpd-flag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: #fb7185; background: rgba(244,63,94,0.12);
  border: 1px solid rgba(244,63,94,0.38); border-radius: 999px;
  padding: 2px 9px;
}
.addback-xpd-missing {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: #fb7185;
  background: rgba(244,63,94,0.08); border: 1px solid rgba(244,63,94,0.28);
  border-radius: 10px; padding: 10px 13px;
}
.addback-xpd-missing svg { flex-shrink: 0; }
.addback-xpd-missing.is-pending {
  color: #fbbf24; background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.28);
}
/* "No add back was sent yesterday" nudge — gentle amber, shown on the Yesterday
   side of the comparison when nothing was dosed that day. */
.addback-xpd-noab {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
  color: #fcd34d;
  background: rgba(251,191,36,0.07); border: 1px dashed rgba(251,191,36,0.32);
  border-radius: 10px; padding: 10px 13px;
}
.addback-xpd-noab svg { flex-shrink: 0; color: rgba(251,191,36,0.85); }
.addback-xpd-msg { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); font-style: italic; padding: 12px 14px; background: rgba(255,255,255,0.03); border-radius: 10px; border-left: 3px solid rgba(167,139,250,0.5); }

/* Submissions ⇄ Sent Add Backs mode toggle (above the type filter pills) */
.addback-side-modes {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding: 3px;
  background: rgba(124, 58, 237, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.20);
  border-radius: 999px;
  flex-shrink: 0;
}
.addback-side-mode {
  flex: 1 1 0;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.addback-side-mode:hover { color: var(--text-secondary); }
.addback-side-mode.active {
  background: rgba(167, 139, 250, 0.22);
  color: #d8d3ff;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.45) inset;
}
.addback-side-pills[hidden] { display: none; }

.addback-side-pills {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.20);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}
.addback-side-pill {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.addback-side-pill:hover { color: var(--text-secondary); }
.addback-side-pill.active {
  background: rgba(56, 189, 248, 0.20);
  color: rgba(56, 189, 248, 1);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.40) inset;
}

/* Room / system filter dropdowns (Recent Submissions + Log History) */
.addback-side-filters {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.addback-side-select {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(0,0,0,0.22)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M2 3.5L5 6.5L8 3.5' stroke='%2394a3b8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 9px center;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 9px;
  padding: 7px 26px 7px 11px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.addback-side-select:hover  { border-color: rgba(56,189,248,0.40); }
.addback-side-select:focus  { outline: none; border-color: rgba(56,189,248,0.60); background-color: rgba(56,189,248,0.06); }
.addback-side-select option { background: #0f172a; color: var(--text-secondary); }

.addback-side-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.65) rgba(255,255,255,0.06);
}
.addback-side-list::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
  background: rgba(255,255,255,0.04);
}
.addback-side-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 6px; }
.addback-side-list::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.55);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 36px;
}
.addback-side-list::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, 0.85); background-clip: padding-box; }

/* ── Yesterday's Log cards ─────────────────────────────────────────────── */
.yl-card {
  padding: 9px 11px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.yl-card.yl-has-ab {
  border-color: rgba(52,211,153,0.3);
  background: rgba(52,211,153,0.04);
}

/* Log History cards reuse the right-side picker-row shape, tinted green (they
   all carry add-back data). The whole card is clickable → opens the expand
   modal (the ⤢ button does the same via the global capture handler). */
.addback-picker-row.yl-row {
  cursor: pointer;
  padding: 11px 13px;
  border-color: rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.022);
}
.addback-picker-row.yl-row:hover {
  border-color: rgba(148,163,184,0.34);
  background: rgba(255,255,255,0.05);
  transform: translateY(-1px);
}
/* "✓ Add Back" badge */
.yl-ab-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(52,211,153,0.95);
  background: rgba(52,211,153,0.12);
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: 999px;
  padding: 2px 7px 2px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Clickable header — the whole row toggles the detail open / closed */
.yl-head {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  outline: none;
}
.yl-head:focus-visible {
  outline: 2px solid rgba(52,211,153,0.5);
  outline-offset: 2px;
  border-radius: 7px;
}
.yl-head-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.yl-card { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.yl-card:hover { border-color: rgba(52,211,153,0.45); background: rgba(52,211,153,0.08); }

/* Field-count pill — tells you how much detail is hidden on a collapsed card */
.yl-fieldcount {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  color: rgba(52,211,153,0.85);
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.25);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.6;
  white-space: nowrap;
}
.yl-fieldcount::after { content: ' fields'; font-weight: 500; opacity: 0.7; }
.yl-card.yl-expanded .yl-fieldcount { display: none; }

/* Rotating chevron */
.yl-chev {
  flex-shrink: 0;
  color: rgba(52,211,153,0.7);
  transition: transform 0.18s ease, color 0.15s;
}
.yl-head:hover .yl-chev { color: rgba(52,211,153,1); }
.yl-card.yl-expanded .yl-chev { transform: rotate(180deg); }

/* Expanded row detail section */
.yl-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(52,211,153,0.15);
  max-height: 240px;
  overflow-y: auto;
}
/* Critical: a class rule with `display` beats the UA [hidden] rule, so the
   collapse silently failed (every card showed expanded). Restore it. */
.yl-detail[hidden] { display: none; }
.yl-detail-row {
  display: flex;
  gap: 6px;
  font-size: 10px;
  line-height: 1.4;
}
.yl-detail-k {
  color: var(--text-dim);
  min-width: 90px;
  flex-shrink: 0;
  font-weight: 500;
}
.yl-detail-v {
  color: var(--text-primary, #e2e8f0);
  word-break: break-word;
}

.addback-side-empty {
  padding: 16px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(56, 189, 248, 0.04);
  border: 1px dashed rgba(56, 189, 248, 0.20);
  border-radius: 10px;
}

.addback-side-status {
  flex-shrink: 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.addback-side-status svg { flex-shrink: 0; margin-top: 1px; }
.addback-side-status.is-locked {
  background: rgba(45, 212, 191, 0.10);
  border: 1px solid rgba(45, 212, 191, 0.40);
  color: rgba(45, 212, 191, 0.98);
}
.addback-side-status.is-warn {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: rgba(251, 191, 36, 0.95);
}
.addback-side-status strong { color: var(--text-primary); font-weight: 700; }

/* ── Confirm-send overlay ──────────────────────────────────────────────── */
/* z-index has to be ABOVE .ftest-overlay (z:1200) — otherwise the form
   covers the confirmation and the first click goes to the form's backdrop. */
.addback-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(2, 4, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  /* Same invisible-click-trap guard as .addback-expand-overlay / .ftest-overlay:
     only intercept clicks while actually visible. */
  pointer-events: none;
  transition: opacity 0.22s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.addback-confirm-overlay.active { opacity: 1; pointer-events: auto; }

/* While the confirmation dialog is open, hide the form overlay (modal +
   side panel) so the confirm dialog reads as a focused decision-point.
   The double-class selector (.active.is-stashed) wins specificity over
   form.css's .ftest-overlay.active rule that sets opacity:1. !important
   on pointer-events as belt-and-braces. */
.ftest-overlay.active.is-stashed {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease;
}
.ftest-overlay.active.is-stashed .ftest-modal,
.ftest-overlay.active.is-stashed .addback-sidepanel {
  pointer-events: none !important;
}
.addback-confirm {
  width: min(540px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: rgba(10, 16, 24, 0.98);
  border: 1px solid rgba(56, 189, 248, 0.30);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 80px rgba(56,189,248,0.18);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.addback-confirm-overlay.active .addback-confirm { transform: scale(1); }
.addback-confirm-hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.addback-confirm-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.addback-confirm-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(56, 189, 248, 0.85);
}
.addback-confirm-title {
  margin: 4px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.35;
}
.addback-confirm-name {
  color: rgba(56, 189, 248, 1);
  font-weight: 700;
}
.addback-confirm-body {
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.20) transparent;
}
.addback-confirm-line {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.addback-confirm-line strong { color: var(--text-primary); font-weight: 600; }
.addback-confirm-source { color: var(--text-muted); font-size: 12px; }
.addback-confirm-sev {
  display: inline-flex;
  padding: 1px 8px;
  margin-left: 2px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.addback-confirm-sev-info     { background: rgba(56,189,248,0.14);  color: rgba(56,189,248,0.98); }
.addback-confirm-sev-warning  { background: rgba(251,191,36,0.14);  color: rgba(251,191,36,0.98); }
.addback-confirm-sev-critical { background: rgba(251,113,133,0.14); color: rgba(251,113,133,0.98); }
.addback-confirm-section {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.addback-confirm-section-title {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.addback-confirm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 14px;
}
.addback-confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
}
.addback-confirm-k { color: var(--text-secondary); }
.addback-confirm-v {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  color: rgba(56, 189, 248, 0.98);
  font-weight: 700;
}
.addback-confirm-u {
  margin-left: 3px;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.addback-confirm-msg {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.addback-confirm-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.addback-confirm-cancel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.addback-confirm-cancel:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
  color: var(--text-primary);
}
.addback-confirm-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(180deg, rgba(56,189,248,0.95), rgba(56,189,248,0.78));
  border: 1px solid rgba(56,189,248,0.65);
  border-radius: 10px;
  color: #04050f;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  box-shadow: 0 6px 20px rgba(56,189,248,0.30), inset 0 1px 0 rgba(255,255,255,0.30);
}
.addback-confirm-go:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(56,189,248,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
.addback-confirm-go:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .addback-sidepanel,
  .addback-confirm-overlay,
  .addback-confirm { transition: opacity 0.18s ease; }
  .ftest-overlay.active .ftest-modal.addback-modal { transform: none; }
  .addback-confirm-go:hover { transform: none; }
}

/* ── Embedded Recent Submissions picker (inside Add Back modal) ───────── */
.addback-picker {
  margin: 8px 18px 0;
  padding: 12px;
  background: rgba(56, 189, 248, 0.04);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.addback-picker-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.addback-picker-title { display: flex; flex-direction: column; gap: 2px; }
.addback-picker-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(56, 189, 248, 0.85);
}
.addback-picker-help {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.addback-picker-help.is-locked {
  color: rgba(45, 212, 191, 0.95);
  font-weight: 600;
}
.addback-picker-pills {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 3px;
}
.addback-picker-pill {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.addback-picker-pill:hover { color: var(--text-secondary); }
.addback-picker-pill.active {
  background: rgba(56, 189, 248, 0.20);
  color: rgba(56, 189, 248, 1);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.40) inset;
}

.addback-picker-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.20) transparent;
}
.addback-picker-list::-webkit-scrollbar { width: 5px; }
.addback-picker-list::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.20);
  border-radius: 4px;
}

.addback-picker-empty {
  padding: 14px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
}
.addback-picker-row {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.addback-picker-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(56, 189, 248, 0.35);
}
.addback-picker-row.is-selected {
  background: rgba(56, 189, 248, 0.10);
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25) inset;
}
.addback-picker-row.is-open { cursor: default; }
.addback-pick-row-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.addback-pick-where {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
}
.addback-pick-where strong { color: var(--text-primary); font-weight: 700; }
/* "Missing final reading" nudge on a preview card (type initial) */
.addback-pick-noflag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; white-space: nowrap;
  color: #fb7185; background: rgba(244,63,94,0.12);
  border: 1px solid rgba(244,63,94,0.38); border-radius: 999px;
  padding: 2px 9px;
}
.addback-pick-noflag svg { flex-shrink: 0; }

/* Log History cards with no final reading logged go red as a follow-up flag.
   (The Recent Submissions "pick a row" panel stays clean.) */
.addback-picker-row.yl-row.is-nofinal {
  background: rgba(244,63,94,0.06);
  border-color: rgba(244,63,94,0.34);
  box-shadow: inset 3px 0 0 0 rgba(244,63,94,0.70);
}
.addback-picker-row.yl-row.is-nofinal:hover {
  background: rgba(244,63,94,0.10);
  border-color: rgba(244,63,94,0.55);
}
.addback-pick-type {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}
.addback-pick-type-initial   { background: rgba(56, 189, 248, 0.14); color: rgba(56, 189, 248, 0.98); }
.addback-pick-type-final     { background: rgba(45, 212, 191, 0.14); color: rgba(45, 212, 191, 0.98); }
.addback-pick-type-equipment { background: rgba(167, 139, 250, 0.14); color: rgba(167, 139, 250, 0.98); }
.addback-pick-type-log       { background: rgba(148, 163, 184, 0.16); color: rgba(203, 213, 225, 0.95); }

.addback-pick-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--text-dim);
}
.addback-pick-tech {
  padding: 1px 6px;
  background: rgba(45, 212, 191, 0.10);
  border-radius: 8px;
  color: rgba(45, 212, 191, 0.95);
}
.addback-pick-chip {
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--text-muted);
}
.addback-pick-chip strong {
  color: var(--text-primary);
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

/* ════════════════════════════════════════════════════════════════════════
   Add Back modal — legibility pass (user 2026-06-11)
   Bigger + brighter text across the picker, Log History, and the center form.
   Card rules are scoped to the side panels (addback-only classes, scoped for a
   guaranteed override) and form rules to .addback-modal, so the SHARED
   grow/harvest "ftest-*" forms keep their own sizing.
   ════════════════════════════════════════════════════════════════════════ */
/* — Recent Submissions (pick a row) + Log History cards — */
.addback-sidepanel .addback-pick-where,
.addback-histpanel .addback-pick-where { font-size: 13.5px; color: var(--text-secondary); }
.addback-sidepanel .addback-pick-where strong,
.addback-histpanel .addback-pick-where strong { color: var(--text-primary); }
.addback-sidepanel .addback-pick-type,
.addback-histpanel .addback-pick-type { font-size: 10.5px; padding: 2px 7px; letter-spacing: 0.08em; }
.addback-sidepanel .addback-pick-meta,
.addback-histpanel .addback-pick-meta { font-size: 12.5px; gap: 7px 8px; color: rgba(255,255,255,0.70); }
/* the relative-time stamp ("2 hrs ago" / "Yesterday") */
.addback-pick-when { color: rgba(255,255,255,0.84); font-weight: 600; }
.addback-sidepanel .addback-pick-chip,
.addback-histpanel .addback-pick-chip { font-size: 12px; padding: 2px 8px; color: rgba(255,255,255,0.86); }
.addback-sidepanel .addback-pick-chip strong,
.addback-histpanel .addback-pick-chip strong { color: #fff; }
.addback-sidepanel .addback-pick-tech,
.addback-histpanel .addback-pick-tech { font-size: 12px; padding: 2px 8px; color: rgba(45,212,191,1); }
/* Panel headers */
.addback-sidepanel .addback-side-eyebrow,
.addback-histpanel .addback-side-eyebrow { font-size: 10.5px; color: rgba(56,189,248,0.98); }
.addback-sidepanel .addback-side-h,
.addback-histpanel .addback-side-h { font-size: 20px; }
/* Room / system filter dropdowns */
.addback-sidepanel .addback-side-select,
.addback-histpanel .addback-side-select { font-size: 13px; color: var(--text-primary); }

/* — Center "Send Add Back" form (scoped so the grow/harvest forms are untouched) — */
.addback-modal .ftest-section-title { font-size: 16px; color: var(--text-primary); }
.addback-modal .ftest-section-desc  { font-size: 12.5px; color: rgba(255,255,255,0.66); }
.addback-modal .ftest-field-label   { font-size: 12.5px; color: rgba(255,255,255,0.92); }
.addback-modal .ftest-meta-label    { color: rgba(255,255,255,0.60); }
.addback-modal .ftest-meta-val      { color: var(--text-primary); }
.addback-modal .ftest-input,
.addback-modal .ftest-select,
.addback-modal .ftest-textarea      { font-size: 13.5px; color: var(--text-primary); }
.addback-modal .addback-banner span { font-size: 13px; color: rgba(255,255,255,0.82); }
.addback-modal .addback-recipe-name { font-size: 12.5px; color: rgba(255,255,255,0.90); }

.addback-pick-detail {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 14px;
}
.addback-pick-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.04);
}
.addback-pick-detail-k {
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.addback-pick-detail-v {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  color: var(--text-primary);
  text-align: right;
  font-size: 11px;
  word-break: break-word;
}
.addback-pick-detail-empty {
  grid-column: 1 / -1;
  padding: 8px 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
}
@media (max-width: 640px) {
  .addback-pick-detail { grid-template-columns: 1fr; }
}
.addback-body {
  /* Force a definite height so the body ALWAYS overflows (form is ~620px
     of content) and the scrollbar is ALWAYS visible. macOS overlay
     scrollbars fade away on `overflow-y: scroll` alone — we work around
     that with `-webkit-appearance: none` on the scrollbar pseudo, plus
     scrollbar-gutter: stable to reserve the gutter so layout doesn't
     jump when the bar appears/disappears. */
  padding: 4px 18px 12px;
  flex: 1 1 auto;
  min-height: 0;
  height: clamp(300px, calc(88vh - 280px), 460px);
  max-height: 460px;
  overflow-y: scroll !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.65) rgba(255,255,255,0.06);
  scroll-padding-top: 60px;
}
.addback-body::-webkit-scrollbar {
  -webkit-appearance: none;  /* defeat macOS overlay-scrollbar fade */
  width: 12px;
  background: rgba(255,255,255,0.04);
}
.addback-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
.addback-body::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.55);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 36px;
}
.addback-body::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.85);
  background-clip: padding-box;
}

/* ── Locked target chip (replaces dropdown when a row is clicked) ────── */
.addback-target-locked {
  background: rgba(45, 212, 191, 0.06);
  border: 1px solid rgba(45, 212, 191, 0.40);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 4px;
  animation: addback-lock-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes addback-lock-in {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.addback-target-locked.is-warn {
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.40);
}
/* When auto-target resolved successfully, the manual dropdown stays in the
   DOM but is greyed out + non-interactive so admins see both pieces of UI
   (locked chip + dropdown) without being tempted to pick again. */
#addback-target-manual.is-disabled {
  opacity: 0.40;
  pointer-events: none;
  filter: saturate(0.5);
  transition: opacity 0.18s ease-out, filter 0.18s ease-out;
}
.addback-target-locked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.addback-target-locked-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.addback-target-locked-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(45, 212, 191, 0.90);
}
.addback-target-locked.is-warn .addback-target-locked-eyebrow { color: rgba(251, 191, 36, 0.95); }
.addback-target-locked-name {
  font-family: var(--font-display, 'Bebas Neue', 'Space Grotesk', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1;
}
.addback-target-locked-sub {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addback-target-locked-clear {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.addback-target-locked-clear:hover {
  background: rgba(251, 113, 133, 0.12);
  border-color: rgba(251, 113, 133, 0.40);
  color: rgba(251, 113, 133, 0.95);
  transform: rotate(90deg);
}
.addback-body::-webkit-scrollbar       { width: 6px; }
.addback-body::-webkit-scrollbar-track { background: transparent; }
.addback-body::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.20); border-radius: 4px; }

.addback-sev-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.addback-sev-pill {
  flex: 1;
  height: 36px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.addback-sev-pill:hover {
  border-color: var(--sev-color, rgba(56,189,248,0.40));
  color: var(--sev-color, var(--text-primary));
}
.addback-sev-pill.active {
  background: color-mix(in srgb, var(--sev-color) 12%, transparent);
  border-color: var(--sev-color);
  color: var(--sev-color);
  box-shadow: 0 0 0 1px var(--sev-color) inset;
}

.addback-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Water-change Yes/No toggle in the Add-Back recipe grid (next to Feed Time) */
.addback-water-cell.is-disabled { opacity: 0.5; }
#addback-water-day { color: var(--accent-teal, #2dd4bf); font-weight: 700; text-transform: none; letter-spacing: 0; }
.addback-water-yn { display: inline-flex; gap: 6px; margin-top: 4px; }
.addback-water-opt {
  flex: 1 1 0; padding: 9px 0; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent; color: rgba(255,255,255,0.58);
  font: 700 12px/1 var(--font-body, 'Inter', sans-serif); letter-spacing: 0.04em;
  cursor: pointer; transition: all 0.15s ease;
}
.addback-water-opt:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); }
.addback-water-opt#addback-water-yes.is-active { background: rgba(45,212,191,0.18); border-color: var(--accent-teal, #2dd4bf); color: var(--accent-teal, #2dd4bf); }
.addback-water-opt#addback-water-no.is-active  { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.9); }
.addback-water-cell.is-disabled .addback-water-opt { pointer-events: none; }
html[data-theme="light"] .addback-water-opt { border-color: rgba(19,16,58,0.18); color: rgba(19,16,58,0.55); }
html[data-theme="light"] .addback-water-opt#addback-water-no.is-active { background: rgba(19,16,58,0.06); color: var(--text-primary); }

.addback-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(180deg, rgba(56,189,248,0.92), rgba(56,189,248,0.78));
  border: 1px solid rgba(56, 189, 248, 0.65);
  border-radius: 10px;
  color: #04050f;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(56,189,248,0.22), inset 0 1px 0 rgba(255,255,255,0.25);
}
.addback-send-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(99,209,252,0.98), rgba(56,189,248,0.88));
  box-shadow: 0 6px 22px rgba(56,189,248,0.38), inset 0 1px 0 rgba(255,255,255,0.30);
}
.addback-send-btn:active { transform: translateY(0); }
.addback-send-btn:disabled { opacity: 0.7; cursor: progress; }
.addback-send-btn.is-busy { pointer-events: none; }
.addback-send-btn.is-success {
  background: rgba(45,212,191,0.92);
  border-color: rgba(45,212,191,0.65);
  color: #04050f;
  pointer-events: none;
}

/* "Keep open" batch toggle — pill immediately left of the Send button (mirrors
   home-tent's batch mode). Hidden native checkbox; the pill is the clickable
   surface. margin-left:auto pushes the [pill][Send] cluster to the right (the
   Send button no longer carries the auto-margin). */
.addback-keepopen {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.addback-keepopen input { position: absolute; opacity: 0; pointer-events: none; }
.addback-keepopen-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.04);
  color: rgba(196, 181, 253, 0.85);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.addback-keepopen-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.40);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.55);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}
.addback-keepopen:hover .addback-keepopen-pill {
  border-color: rgba(167, 139, 250, 0.55);
  color: rgba(221, 214, 254, 1);
}
.addback-keepopen input:checked + .addback-keepopen-pill {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.75);
  color: rgba(245, 243, 255, 1);
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.25);
}
.addback-keepopen input:checked + .addback-keepopen-pill .addback-keepopen-dot {
  background: rgba(167, 139, 250, 1);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.80);
}
.addback-keepopen input:focus-visible + .addback-keepopen-pill {
  outline: 2px solid rgba(167, 139, 250, 0.75);
  outline-offset: 2px;
}
/* Light theme — match home-tent's violet treatment. */
html[data-theme="light"] .addback-keepopen-pill {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.35);
  color: rgba(91, 33, 182, 1);
}
html[data-theme="light"] .addback-keepopen-dot {
  background: rgba(124, 58, 237, 0.40);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.55);
}
html[data-theme="light"] .addback-keepopen:hover .addback-keepopen-pill {
  border-color: rgba(124, 58, 237, 0.60);
  color: rgba(76, 29, 149, 1);
}
html[data-theme="light"] .addback-keepopen input:checked + .addback-keepopen-pill {
  background: rgba(124, 58, 237, 0.20);
  border-color: rgba(124, 58, 237, 0.75);
  color: rgba(76, 29, 149, 1);
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.22);
}
html[data-theme="light"] .addback-keepopen input:checked + .addback-keepopen-pill .addback-keepopen-dot {
  background: rgba(124, 58, 237, 1);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.85);
}

/* ── 2. Employee Inbox sidebar ──────────────────────────────────────────── */
.alerts-sidebar.is-inbox .inbox-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.35);
  color: rgba(56,189,248,0.98);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
}
.inbox-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inbox-empty {
  text-align: center;
  padding: 30px 16px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.inbox-empty-title {
  font-family: var(--font-display, 'Bebas Neue', 'Space Grotesk', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.inbox-empty-body { color: var(--text-dim); }

.inbox-card {
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid rgba(56,189,248,0.55);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.inbox-card.inbox-sev-info     { border-left-color: rgba(56,189,248,0.55); }
.inbox-card.inbox-sev-warning  { border-left-color: rgba(251,191,36,0.65); }
.inbox-card.inbox-sev-critical { border-left-color: rgba(251,113,133,0.75); background: rgba(251,113,133,0.05); }
.inbox-card.is-ack             { opacity: 0.75; }
.inbox-card:hover              { background: rgba(255,255,255,0.04); }

.inbox-card-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.inbox-card-where {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.inbox-card-where strong {
  color: var(--text-primary);
  font-weight: 700;
}
.inbox-card-time {
  font-size: 10px;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.inbox-card-metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
}
.inbox-card-metric-name {
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(56,189,248,0.95);
}
.inbox-card-metric-obs {
  color: rgba(251,113,133,0.95);
  font-weight: 600;
}
.inbox-card-metric-exp { color: var(--text-dim); }
.inbox-card-msg {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.inbox-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.inbox-card-from {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}
.inbox-card-actions {
  display: flex;
  gap: 6px;
}
.inbox-ack-btn,
.inbox-resolve-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.inbox-ack-btn:hover {
  background: rgba(56,189,248,0.10);
  border-color: rgba(56,189,248,0.45);
  color: rgba(56,189,248,0.98);
}
.inbox-resolve-btn:hover {
  background: rgba(45,212,191,0.10);
  border-color: rgba(45,212,191,0.45);
  color: rgba(45,212,191,0.98);
}
.inbox-ack-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 14px;
  background: rgba(45,212,191,0.10);
  border: 1px solid rgba(45,212,191,0.35);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(45,212,191,0.95);
}
@media (prefers-reduced-motion: reduce) {
  .addback-send-btn,
  .addback-send-btn:hover { transform: none; transition: background 0.18s ease; }
}

/* ── Recipe grid (admin form) ──────────────────────────────────────────── */
.addback-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.addback-recipe-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(56, 189, 248, 0.10);
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.025);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.addback-recipe-cell:focus-within {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.06);
}
.addback-recipe-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.addback-recipe-name { font-weight: 600; }
.addback-recipe-unit {
  font-weight: 500;
  color: rgba(56, 189, 248, 0.75);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 10px;
}
.addback-recipe-input {
  padding: 6px 10px;
  font-size: 13px;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.addback-recipe-input:focus { border-color: rgba(56, 189, 248, 0.55); }

.addback-recipe-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.addback-recipe-foot-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.addback-recipe-foot .addback-sev-row { flex: 1; }

/* ── Recipe display inside inbox cards ─────────────────────────────────── */
.inbox-recipe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  padding: 8px 10px;
  background: rgba(56, 189, 248, 0.04);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 8px;
}
.inbox-recipe-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
}
.inbox-recipe-name {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.inbox-recipe-dose {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-weight: 700;
  color: rgba(56, 189, 248, 0.98);
  font-size: 12px;
}
.inbox-recipe-unit {
  margin-left: 3px;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* ── Recent Submissions panel (admin sidebar) ──────────────────────────── */
.alerts-sidebar.is-recent .recent-refresh-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.alerts-sidebar.is-recent .recent-refresh-btn:hover {
  border-color: rgba(56, 189, 248, 0.45);
  color: rgba(56, 189, 248, 0.98);
  transform: rotate(60deg);
}
.recent-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recent-empty {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  background: rgba(56, 189, 248, 0.04);
  border: 1px dashed rgba(56, 189, 248, 0.22);
  border-radius: 10px;
}

/* Submissions / Sent Add Backs toggle in the recent-submissions sidebar */
.recent-viewtabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
}
.recent-vtab {
  flex: 1 1 0;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.recent-vtab:hover { color: var(--text-secondary); }
.recent-vtab.is-on {
  background: rgba(56, 189, 248, 0.14);
  color: var(--accent-cyan, #38bdf8);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.12);
}

/* Sent add-back history card */
.addback-sent-card { cursor: default; border-left: 3px solid rgba(148,163,184,0.4); }
.addback-sent-card.sev-info     { border-left-color: rgba(56,189,248,0.85); }
.addback-sent-card.sev-warning  { border-left-color: rgba(251,191,36,0.85); }
.addback-sent-card.sev-critical { border-left-color: rgba(251,113,133,0.9); }
.addback-sent-msg {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  font-style: italic;
}
.addback-sent-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
}
.addback-sent-status.is-new      { color: #38bdf8; background: rgba(56,189,248,0.12); }
.addback-sent-status.is-ack      { color: #fbbf24; background: rgba(251,191,36,0.12); }
.addback-sent-status.is-resolved { color: #34d399; background: rgba(52,211,153,0.12); }

.recent-card {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.recent-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(56, 189, 248, 0.30);
}
.recent-card.is-open {
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.45);
  cursor: default;
}
.recent-card-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.recent-card-where {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-secondary);
}
.recent-card-where strong {
  color: var(--text-primary);
  font-weight: 700;
}
.recent-card-meta {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--text-dim);
}
.recent-card-tech {
  padding: 1px 6px;
  background: rgba(45, 212, 191, 0.10);
  border-radius: 10px;
  color: rgba(45, 212, 191, 0.95);
  letter-spacing: 0.02em;
}
.recent-card-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.recent-chip strong {
  color: var(--text-primary);
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
}
.recent-chip.recent-ph strong  { color: rgba(56, 189, 248, 0.98); }
.recent-chip.recent-ppm strong { color: rgba(129, 140, 248, 0.98); }

.recent-card-hint {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: right;
}

.recent-card-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recent-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-family: var(--font-body);
  font-size: 11px;
}
.recent-detail-k {
  color: var(--text-dim);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.recent-detail-v {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}
.recent-detail-empty {
  padding: 10px 0;
  color: var(--text-dim);
  font-size: 11px;
  text-align: center;
}

.recent-act-btn {
  align-self: flex-end;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(56, 189, 248, 0.98);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.recent-act-btn:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.65);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.recent-act-btn:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════════
   Light-theme: Add Backs + comparison + confirm
   ------------------------------------------------------------------------------
   The Add Backs block (admin modal, side panels, Yesterday-vs-Today comparison,
   confirm dialog, embedded picker, Yesterday's Log cards, sev pills, inbox +
   recent cards, recipe grid) was authored dark-first: near-opaque navy panel
   fills (rgba(8,16,24,0.94) etc.), translucent-white glass (rgba(255,255,255,0.0x)),
   near-white / bright-accent text, white hairline borders, and harsh pure-black
   shadows — all of which vanish or glare on the light background. These scoped
   overrides refrost the panels white, darken the text/accents, and soften the
   borders + shadows WITHOUT touching dark mode. Modal BACKDROP scrims
   (.addback-expand-overlay / .addback-confirm-overlay dim layers) are left dark
   on purpose — a dim scrim behind a modal reads correctly in both themes.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Admin modal banner ───────────────────────────────────────────────────── */
html[data-theme="light"] .addback-banner {
  background: rgba(2,132,199,0.06);
  border-color: rgba(2,132,199,0.24);
  color: rgba(19,16,58,0.80);
}
html[data-theme="light"] .addback-banner svg { color: rgba(2,132,199,0.90); }
html[data-theme="light"] .addback-modal .addback-banner span { color: rgba(19,16,58,0.78); }

/* ── Side panels (right submissions + left history) ───────────────────────── */
html[data-theme="light"] .addback-sidepanel,
html[data-theme="light"] .addback-histpanel {
  background: rgba(248,250,254,0.94);
  border-color: rgba(2,132,199,0.24);
  box-shadow: 0 24px 60px rgba(80,90,160,0.16), 0 0 60px rgba(2,132,199,0.06);
}
html[data-theme="light"] .addback-histpanel {
  border-color: rgba(124,58,237,0.28);
  box-shadow: 0 24px 60px rgba(80,90,160,0.16), 0 0 60px rgba(124,58,237,0.06);
}
html[data-theme="light"] .addback-side-eyebrow { color: rgb(2,132,199); }
html[data-theme="light"] .addback-sidepanel .addback-side-eyebrow,
html[data-theme="light"] .addback-histpanel .addback-side-eyebrow { color: rgb(2,132,199); }
/* Legibility-pass rows/meta authored with white text → dark text */
html[data-theme="light"] .addback-sidepanel .addback-pick-meta,
html[data-theme="light"] .addback-histpanel .addback-pick-meta { color: var(--text-secondary); }
html[data-theme="light"] .addback-pick-when { color: var(--text-secondary); }
html[data-theme="light"] .addback-sidepanel .addback-pick-chip,
html[data-theme="light"] .addback-histpanel .addback-pick-chip { color: var(--text-secondary); }
html[data-theme="light"] .addback-sidepanel .addback-pick-chip strong,
html[data-theme="light"] .addback-histpanel .addback-pick-chip strong { color: var(--text-primary); }
html[data-theme="light"] .addback-sidepanel .addback-pick-tech,
html[data-theme="light"] .addback-histpanel .addback-pick-tech { color: rgb(13,148,136); }
/* Center form (scoped) — white-ish helper text → dark tokens */
html[data-theme="light"] .addback-modal .ftest-section-desc { color: var(--text-secondary); }
html[data-theme="light"] .addback-modal .ftest-field-label  { color: var(--text-primary); }
html[data-theme="light"] .addback-modal .ftest-meta-label   { color: var(--text-muted); }
html[data-theme="light"] .addback-modal .addback-recipe-name { color: var(--text-primary); }

/* Per-card expand (⤢) trigger — violet chip */
html[data-theme="light"] .addback-xpd-trigger {
  color: rgb(124,58,237);
  background: rgba(124,58,237,0.10);
  border-color: rgba(124,58,237,0.28);
}
html[data-theme="light"] .addback-xpd-trigger:hover {
  background: rgba(124,58,237,0.20);
  border-color: rgba(124,58,237,0.55);
  color: rgb(76,29,149);
}

/* ── Expand pop-out modal + Yesterday-vs-Today comparison ─────────────────── */
html[data-theme="light"] .addback-expand-modal {
  background: linear-gradient(180deg, rgba(250,251,254,0.98), rgba(244,247,252,0.98));
  border-color: rgba(130,100,200,0.20);
  box-shadow: 0 24px 80px rgba(80,90,160,0.18);
}
/* Grow-context (cycle) band */
html[data-theme="light"] .addback-cyc {
  border-color: rgba(130,100,200,0.16);
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(13,148,136,0.08), transparent 55%),
    radial-gradient(130% 100% at 100% 0%, rgba(124,58,237,0.08), transparent 55%),
    rgba(248,250,254,0.92);
}
html[data-theme="light"] .addback-cyc-tag { color: var(--text-secondary); }
html[data-theme="light"] .addback-cyc-tag svg { color: rgb(13,148,136); }
html[data-theme="light"] .addback-cyc-sys { color: var(--text-muted); }
html[data-theme="light"] .addback-cyc-chip {
  border-color: rgba(130,100,200,0.16);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--cyc) 12%, transparent), transparent 60%),
    rgba(255,255,255,0.72);
}
html[data-theme="light"] .addback-cyc-k { color: var(--text-secondary); }
html[data-theme="light"] .addback-cyc-na { color: var(--text-muted); }
html[data-theme="light"] .addback-cyc-meter { background: rgba(19,16,58,0.10); }
/* Delta strip */
html[data-theme="light"] .addback-cmp-strip {
  border-color: rgba(130,100,200,0.16);
  background:
    radial-gradient(130% 100% at 0% 0%, rgba(2,132,199,0.08), transparent 55%),
    radial-gradient(130% 100% at 100% 0%, rgba(124,58,237,0.08), transparent 55%),
    rgba(248,250,254,0.92);
}
html[data-theme="light"] .addback-cmp-striptag { color: var(--text-secondary); }
html[data-theme="light"] .addback-cmp-striptag svg { color: rgb(2,132,199); }
html[data-theme="light"] .addback-cmp-bandkey { color: rgb(5,150,105); }
html[data-theme="light"] .addback-cmp-metric {
  --dir: rgba(19,16,58,0.55);
  border-color: rgba(130,100,200,0.16);
  background: rgba(255,255,255,0.72);
}
html[data-theme="light"] .addback-cmp-metric.is-up   { --dir: rgb(5,150,105); }
html[data-theme="light"] .addback-cmp-metric.is-down { --dir: rgb(225,29,72); }
html[data-theme="light"] .addback-cmp-metric.is-flat { --dir: rgb(79,70,229); }
html[data-theme="light"] .addback-cmp-metric.is-na   { --dir: rgba(19,16,58,0.45); }
html[data-theme="light"] .addback-cmp-mlabel { color: var(--text-secondary); }
html[data-theme="light"] .addback-cmp-delta.is-na { color: var(--text-muted); }
/* Comparison two-column body */
html[data-theme="light"] .addback-cmp-col {
  border-color: rgba(130,100,200,0.16);
  background: rgba(255,255,255,0.70);
}
html[data-theme="light"] .addback-cmp-yest  { border-color: rgba(130,100,200,0.20); }
html[data-theme="light"] .addback-cmp-today {
  border-color: rgba(2,132,199,0.32);
  box-shadow: 0 0 0 1px rgba(2,132,199,0.12) inset;
}
html[data-theme="light"] .addback-cmp-coltag { border-bottom-color: rgba(130,100,200,0.14); }
html[data-theme="light"] .addback-cmp-coltag.is-yest  .addback-cmp-colname { color: var(--text-secondary); }
html[data-theme="light"] .addback-cmp-coltag.is-today .addback-cmp-colname { color: rgb(2,132,199); }
html[data-theme="light"] .addback-cmp-coldate { color: var(--text-muted); }
html[data-theme="light"] .addback-cmp-abwrap { border-top-color: rgba(130,100,200,0.16); }
html[data-theme="light"] .addback-cmp-abtag { color: rgb(124,58,237); }
/* SVG spark chart — legible on white */
html[data-theme="light"] .addback-cmp-band {
  fill: rgba(5,150,105,0.12);
  stroke: rgba(5,150,105,0.42);
}
html[data-theme="light"] .addback-cmp-area { opacity: 0.16; }
html[data-theme="light"] .addback-cmp-dot  { stroke: rgba(255,255,255,0.95); }
html[data-theme="light"] .addback-cmp-dot.is-oor { fill: rgb(225,29,72); }
html[data-theme="light"] .addback-cmp-ptlbl { fill: rgba(19,16,58,0.78); }
html[data-theme="light"] .addback-cmp-ptlbl.is-today { fill: rgb(19,16,58); }
html[data-theme="light"] .addback-cmp-xlbl  { fill: rgba(19,16,58,0.55); }
html[data-theme="light"] .addback-cmp-xlbl.is-today { fill: rgb(2,132,199); }
html[data-theme="light"] .addback-cmp-safe  { color: rgb(5,150,105); }
/* Date chips on section labels */
html[data-theme="light"] .addback-xpd-datechip {
  color: var(--text-secondary);
  background: rgba(19,16,58,0.06);
  border-color: rgba(130,100,200,0.22);
}
html[data-theme="light"] .addback-cmp-yest .addback-xpd-datechip { color: var(--text-secondary); }
html[data-theme="light"] .addback-cmp-today .addback-xpd-datechip {
  color: rgb(2,132,199);
  background: rgba(2,132,199,0.12);
  border-color: rgba(2,132,199,0.32);
}

/* Expand-list rows (title bar, key/value grid, AUTO badge, section labels) */
html[data-theme="light"] .addback-xpd-bar { border-bottom-color: rgba(130,100,200,0.14); }
html[data-theme="light"] .addback-xpd-h { color: var(--text-primary); }
html[data-theme="light"] .addback-xpd-close {
  background: rgba(19,16,58,0.05);
  border-color: rgba(130,100,200,0.18);
}
html[data-theme="light"] .addback-xpd-close:hover {
  background: rgba(225,29,72,0.10);
  border-color: rgba(225,29,72,0.45);
  color: rgb(225,29,72);
}
html[data-theme="light"] .addback-xpd-chdr { color: var(--text-primary); }
html[data-theme="light"] .addback-xpd-row { border-bottom-color: rgba(130,100,200,0.12); }
html[data-theme="light"] .addback-xpd-auto {
  color: rgb(124,58,237);
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.34);
}
html[data-theme="light"] .addback-xpd-row.is-auto .addback-xpd-v { color: rgb(124,58,237); }
html[data-theme="light"] .addback-xpd-sectlbl { border-bottom-color: rgba(130,100,200,0.14); }
html[data-theme="light"] .addback-xpd-section-initial .addback-xpd-sectlbl { color: rgb(2,132,199); }
html[data-theme="light"] .addback-xpd-section-dod     .addback-xpd-sectlbl { color: rgb(124,58,237); }
html[data-theme="light"] .addback-xpd-section-final   .addback-xpd-sectlbl { color: rgb(5,150,105); }
html[data-theme="light"] .addback-xpd-section-addback .addback-xpd-sectlbl { color: rgb(217,119,6); }
html[data-theme="light"] .addback-xpd-section-details .addback-xpd-sectlbl { color: var(--text-muted); }
html[data-theme="light"] .addback-xpd-msg {
  background: rgba(19,16,58,0.04);
  border-left-color: rgba(124,58,237,0.5);
}

/* ── Confirm-send dialog ──────────────────────────────────────────────────── */
html[data-theme="light"] .addback-confirm {
  background: rgba(250,251,254,0.98);
  border-color: rgba(2,132,199,0.30);
  box-shadow: 0 30px 80px rgba(80,90,160,0.18), 0 0 80px rgba(2,132,199,0.10);
}
html[data-theme="light"] .addback-confirm-hdr { border-bottom-color: rgba(130,100,200,0.14); }
html[data-theme="light"] .addback-confirm-name { color: rgb(2,132,199); }
html[data-theme="light"] .addback-confirm-sev-info     { background: rgba(2,132,199,0.14);  color: rgb(2,132,199); }
html[data-theme="light"] .addback-confirm-sev-warning  { background: rgba(217,119,6,0.14);  color: rgb(217,119,6); }
html[data-theme="light"] .addback-confirm-sev-critical { background: rgba(225,29,72,0.14);  color: rgb(225,29,72); }
html[data-theme="light"] .addback-confirm-section {
  background: rgba(19,16,58,0.04);
  border-color: rgba(130,100,200,0.14);
}
html[data-theme="light"] .addback-confirm-v { color: rgb(2,132,199); }
html[data-theme="light"] .addback-confirm-foot { border-top-color: rgba(130,100,200,0.14); }
html[data-theme="light"] .addback-confirm-cancel {
  background: rgba(19,16,58,0.04);
  border-color: rgba(130,100,200,0.18);
}
html[data-theme="light"] .addback-confirm-cancel:hover {
  background: rgba(19,16,58,0.08);
  border-color: rgba(130,100,200,0.32);
  color: var(--text-primary);
}
/* .addback-confirm-go keeps its cyan gradient + dark #04050f label — reads in
   both themes; left as-is. */

/* ── Embedded picker (Recent Submissions inside the modal) ────────────────── */
html[data-theme="light"] .addback-picker {
  background: rgba(2,132,199,0.05);
  border-color: rgba(2,132,199,0.20);
}
html[data-theme="light"] .addback-picker-eyebrow { color: rgb(2,132,199); }
html[data-theme="light"] .addback-picker-help.is-locked { color: rgb(13,148,136); }
html[data-theme="light"] .addback-picker-pills { background: rgba(19,16,58,0.05); }
html[data-theme="light"] .addback-picker-pill.active {
  background: rgba(2,132,199,0.16);
  color: rgb(2,132,199);
  box-shadow: 0 0 0 1px rgba(2,132,199,0.40) inset;
}
html[data-theme="light"] .addback-picker-row {
  background: rgba(19,16,58,0.03);
  border-color: rgba(130,100,200,0.14);
}
html[data-theme="light"] .addback-picker-row:hover {
  background: rgba(19,16,58,0.05);
  border-color: rgba(2,132,199,0.40);
}
html[data-theme="light"] .addback-picker-row.is-selected {
  background: rgba(2,132,199,0.10);
  border-color: rgba(2,132,199,0.55);
  box-shadow: 0 0 0 1px rgba(2,132,199,0.25) inset;
}
/* Pick-row type pills — darkened accents */
html[data-theme="light"] .addback-pick-type { background: rgba(19,16,58,0.06); color: var(--text-muted); }
html[data-theme="light"] .addback-pick-type-initial   { background: rgba(2,132,199,0.14);  color: rgb(2,132,199); }
html[data-theme="light"] .addback-pick-type-final     { background: rgba(13,148,136,0.14); color: rgb(13,148,136); }
html[data-theme="light"] .addback-pick-type-equipment { background: rgba(124,58,237,0.14); color: rgb(124,58,237); }
html[data-theme="light"] .addback-pick-type-log       { background: rgba(19,16,58,0.08);  color: var(--text-secondary); }
html[data-theme="light"] .addback-pick-tech { background: rgba(13,148,136,0.10); color: rgb(13,148,136); }
html[data-theme="light"] .addback-pick-chip {
  background: rgba(19,16,58,0.05);
  border-color: rgba(130,100,200,0.14);
  color: var(--text-muted);
}
html[data-theme="light"] .addback-pick-chip strong { color: var(--text-primary); }
html[data-theme="light"] .addback-pick-detail { border-top-color: rgba(130,100,200,0.14); }
html[data-theme="light"] .addback-pick-detail-row { border-bottom-color: rgba(130,100,200,0.10); }

/* Mode toggle + view pills + filter selects */
html[data-theme="light"] .addback-side-modes {
  background: rgba(124,58,237,0.08);
  border-color: rgba(124,58,237,0.22);
}
html[data-theme="light"] .addback-side-mode.active {
  background: rgba(124,58,237,0.18);
  color: rgb(76,29,149);
  box-shadow: 0 0 0 1px rgba(124,58,237,0.45) inset;
}
html[data-theme="light"] .addback-side-pills { background: rgba(19,16,58,0.06); }
html[data-theme="light"] .addback-side-pill.active {
  background: rgba(2,132,199,0.16);
  color: rgb(2,132,199);
  box-shadow: 0 0 0 1px rgba(2,132,199,0.40) inset;
}
html[data-theme="light"] .addback-side-select {
  background-color: rgba(255,255,255,0.72);
  border-color: rgba(130,100,200,0.20);
  color: var(--text-secondary);
}
html[data-theme="light"] .addback-sidepanel .addback-side-select,
html[data-theme="light"] .addback-histpanel .addback-side-select { color: var(--text-primary); }
html[data-theme="light"] .addback-side-select:hover  { border-color: rgba(2,132,199,0.40); }
html[data-theme="light"] .addback-side-select:focus  { border-color: rgba(2,132,199,0.60); background-color: rgba(2,132,199,0.06); }
html[data-theme="light"] .addback-side-select option { background: #f1f5fb; color: var(--text-primary); }
html[data-theme="light"] .addback-side-empty {
  background: rgba(2,132,199,0.04);
  border-color: rgba(2,132,199,0.22);
}

/* ── Yesterday's Log cards ────────────────────────────────────────────────── */
html[data-theme="light"] .yl-card {
  background: rgba(19,16,58,0.03);
  border-color: rgba(130,100,200,0.14);
}
html[data-theme="light"] .yl-card.yl-has-ab {
  border-color: rgba(5,150,105,0.32);
  background: rgba(5,150,105,0.05);
}
html[data-theme="light"] .addback-picker-row.yl-row {
  border-color: rgba(130,100,200,0.14);
  background: rgba(19,16,58,0.022);
}
html[data-theme="light"] .addback-picker-row.yl-row:hover {
  border-color: rgba(130,100,200,0.34);
  background: rgba(19,16,58,0.05);
}
html[data-theme="light"] .yl-ab-badge {
  color: rgb(5,150,105);
  background: rgba(5,150,105,0.12);
  border-color: rgba(5,150,105,0.32);
}
html[data-theme="light"] .yl-fieldcount {
  color: rgb(5,150,105);
  background: rgba(5,150,105,0.10);
  border-color: rgba(5,150,105,0.28);
}
html[data-theme="light"] .yl-chev { color: rgba(5,150,105,0.8); }
html[data-theme="light"] .yl-head:hover .yl-chev { color: rgb(5,150,105); }
html[data-theme="light"] .yl-detail { border-top-color: rgba(5,150,105,0.18); }

/* ── Sev pills (admin recipe footer) ──────────────────────────────────────── */
html[data-theme="light"] .addback-sev-pill {
  background: rgba(19,16,58,0.03);
  border-color: rgba(130,100,200,0.16);
}

/* ── Locked-target chip + footers + misc white glass ──────────────────────── */
html[data-theme="light"] .addback-target-locked-clear {
  background: rgba(19,16,58,0.05);
  border-color: rgba(130,100,200,0.18);
}
html[data-theme="light"] .addback-target-locked-clear:hover {
  background: rgba(225,29,72,0.12);
  border-color: rgba(225,29,72,0.45);
  color: rgb(225,29,72);
}
html[data-theme="light"] .addback-footer { border-top-color: rgba(130,100,200,0.12); }
html[data-theme="light"] .addback-body::-webkit-scrollbar,
html[data-theme="light"] .addback-side-list::-webkit-scrollbar,
html[data-theme="light"] .addback-body::-webkit-scrollbar-track,
html[data-theme="light"] .addback-side-list::-webkit-scrollbar-track { background: rgba(19,16,58,0.05); }

/* ── Recipe grid (admin form) ─────────────────────────────────────────────── */
html[data-theme="light"] .addback-recipe-cell {
  border-color: rgba(2,132,199,0.14);
  background: rgba(2,132,199,0.04);
}
html[data-theme="light"] .addback-recipe-cell:focus-within {
  border-color: rgba(2,132,199,0.45);
  background: rgba(2,132,199,0.07);
}
html[data-theme="light"] .addback-recipe-unit { color: rgb(2,132,199); }
html[data-theme="light"] .addback-recipe-input {
  background: rgba(255,255,255,0.72);
  border-color: rgba(130,100,200,0.18);
}
html[data-theme="light"] .addback-recipe-input:focus { border-color: rgba(2,132,199,0.55); }
html[data-theme="light"] .addback-recipe-foot { border-top-color: rgba(130,100,200,0.14); }

/* ── Employee inbox cards ─────────────────────────────────────────────────── */
html[data-theme="light"] .alerts-sidebar.is-inbox .inbox-count {
  background: rgba(2,132,199,0.12);
  border-color: rgba(2,132,199,0.35);
  color: rgb(2,132,199);
}
html[data-theme="light"] .inbox-card {
  background: rgba(19,16,58,0.025);
  border-color: rgba(130,100,200,0.14);
  border-left-color: rgba(2,132,199,0.55);
}
html[data-theme="light"] .inbox-card.inbox-sev-warning  { border-left-color: rgba(217,119,6,0.65); }
html[data-theme="light"] .inbox-card.inbox-sev-critical {
  border-left-color: rgba(225,29,72,0.75);
  background: rgba(225,29,72,0.05);
}
html[data-theme="light"] .inbox-card:hover { background: rgba(19,16,58,0.045); }
html[data-theme="light"] .inbox-card-metric-name { color: rgb(2,132,199); }
html[data-theme="light"] .inbox-card-metric-obs  { color: rgb(225,29,72); }
html[data-theme="light"] .inbox-ack-btn,
html[data-theme="light"] .inbox-resolve-btn {
  background: rgba(19,16,58,0.03);
  border-color: rgba(130,100,200,0.16);
}
html[data-theme="light"] .inbox-ack-btn:hover {
  background: rgba(2,132,199,0.10);
  border-color: rgba(2,132,199,0.45);
  color: rgb(2,132,199);
}
html[data-theme="light"] .inbox-resolve-btn:hover {
  background: rgba(13,148,136,0.10);
  border-color: rgba(13,148,136,0.45);
  color: rgb(13,148,136);
}
html[data-theme="light"] .inbox-ack-chip {
  background: rgba(13,148,136,0.10);
  border-color: rgba(13,148,136,0.35);
  color: rgb(13,148,136);
}
html[data-theme="light"] .inbox-recipe {
  background: rgba(2,132,199,0.05);
  border-color: rgba(2,132,199,0.20);
}
html[data-theme="light"] .inbox-recipe-dose { color: rgb(2,132,199); }

/* ── Recent Submissions cards (admin sidebar) ─────────────────────────────── */
html[data-theme="light"] .alerts-sidebar.is-recent .recent-refresh-btn {
  border-color: rgba(130,100,200,0.16);
}
html[data-theme="light"] .alerts-sidebar.is-recent .recent-refresh-btn:hover {
  border-color: rgba(2,132,199,0.45);
  color: rgb(2,132,199);
}
html[data-theme="light"] .recent-empty {
  background: rgba(2,132,199,0.04);
  border-color: rgba(2,132,199,0.22);
}
html[data-theme="light"] .recent-viewtabs {
  background: rgba(19,16,58,0.03);
  border-color: rgba(130,100,200,0.14);
}
html[data-theme="light"] .recent-vtab.is-on {
  background: rgba(2,132,199,0.14);
  color: rgb(2,132,199);
  box-shadow: 0 0 12px rgba(2,132,199,0.12);
}
html[data-theme="light"] .addback-sent-card { border-left-color: rgba(130,100,200,0.4); }
html[data-theme="light"] .addback-sent-card.sev-info     { border-left-color: rgba(2,132,199,0.85); }
html[data-theme="light"] .addback-sent-card.sev-warning  { border-left-color: rgba(217,119,6,0.85); }
html[data-theme="light"] .addback-sent-card.sev-critical { border-left-color: rgba(225,29,72,0.9); }
html[data-theme="light"] .addback-sent-status.is-new      { color: rgb(2,132,199);  background: rgba(2,132,199,0.12); }
html[data-theme="light"] .addback-sent-status.is-ack      { color: rgb(217,119,6);  background: rgba(217,119,6,0.12); }
html[data-theme="light"] .addback-sent-status.is-resolved { color: rgb(5,150,105);  background: rgba(5,150,105,0.12); }
html[data-theme="light"] .recent-card {
  background: rgba(19,16,58,0.025);
  border-color: rgba(130,100,200,0.14);
}
html[data-theme="light"] .recent-card:hover {
  background: rgba(19,16,58,0.045);
  border-color: rgba(2,132,199,0.30);
}
html[data-theme="light"] .recent-card.is-open {
  background: rgba(2,132,199,0.06);
  border-color: rgba(2,132,199,0.45);
}
html[data-theme="light"] .recent-card-tech { background: rgba(13,148,136,0.10); color: rgb(13,148,136); }
html[data-theme="light"] .recent-chip {
  background: rgba(19,16,58,0.05);
  border-color: rgba(130,100,200,0.14);
  color: var(--text-muted);
}
html[data-theme="light"] .recent-chip strong { color: var(--text-primary); }
html[data-theme="light"] .recent-chip.recent-ph strong  { color: rgb(2,132,199); }
html[data-theme="light"] .recent-chip.recent-ppm strong { color: rgb(79,70,229); }
html[data-theme="light"] .recent-card-detail { border-top-color: rgba(130,100,200,0.14); }
html[data-theme="light"] .recent-act-btn {
  background: rgba(2,132,199,0.12);
  border-color: rgba(2,132,199,0.45);
  color: rgb(2,132,199);
}
html[data-theme="light"] .recent-act-btn:hover {
  background: rgba(2,132,199,0.20);
  border-color: rgba(2,132,199,0.65);
  color: var(--text-primary);
}

/* ── MOBILE (2026-07-06 overhaul) — scoped, desktop untouched ─────────────── */
@media (max-width: 768px) {

  /* P0 — the Recent Submissions bottom strip (960px band above) paints OVER
     the modal footer and floats around the iOS keyboard. Hide both side
     panels on phones; the form is self-sufficient without them. */
  #addback-form-overlay .addback-sidepanel,
  #addback-form-overlay .addback-histpanel { display: none; }

  /* P0 — form modal becomes a full-screen sheet (dvh-safe; vh fallback first) */
  #addback-form-overlay.ftest-overlay {
    padding: 0;
    align-items: flex-end;
  }
  #addback-form-overlay .ftest-modal.addback-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  #addback-form-overlay .ftest-titlebar {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
  }
  /* Body drops its desktop height clamp (clamp(300px, 88vh-280px, 460px))
     and just fills the sheet. !important needed only to match the base
     rule's own `overflow-y: scroll !important`. */
  #addback-form-overlay .addback-body {
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto !important;
    scrollbar-gutter: auto;
  }
  #addback-form-overlay .addback-body::-webkit-scrollbar {
    width: 0;
    background: transparent;
  }
  #addback-form-overlay .addback-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* P1 — vh → dvh for the sub-modals (iOS URL bar clips bottom edges) */
  .addback-expand-overlay { padding: 12px; }
  .addback-expand-modal {
    max-height: 86vh;
    max-height: 86dvh;
  }
  .addback-confirm {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }

  /* P1 — kill stacked backdrop blurs (overlay + confirm + expand can be live
     at once) for the non-perf-lite case. Scrim stays dark on both themes,
     matching the existing light-theme convention for these dim layers. */
  #addback-form-overlay.ftest-overlay,
  .addback-confirm-overlay,
  .addback-expand-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(2, 4, 14, 0.9);
  }
  .stat-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* P1 — inner scrollers: stop touch scroll chaining to the page/overlay */
  .addback-side-list,
  .addback-expand-list,
  .addback-confirm-body,
  .addback-picker-list {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Small phones ≤480px ────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* P0 — footer is a no-wrap flex row; with a validation error visible the
     Send button gets pushed off the right edge. Let it wrap. */
  .addback-footer { flex-wrap: wrap; }
  .addback-footer .ftest-validation { flex: 1 1 100%; }
  .addback-send-btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
  }
  .addback-keepopen-pill { min-height: 40px; }

  /* P1 — send-confirm: 1-col recipe grid + stacked full-width foot buttons */
  .addback-confirm-grid { grid-template-columns: 1fr; }
  .addback-confirm-foot {
    flex-wrap: wrap;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .addback-confirm-cancel,
  .addback-confirm-go {
    flex: 1 1 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-left: 0;
  }

  /* P1 — expand pop-out becomes a full-screen sheet (header bar already sits
     outside the .addback-expand-list scroller, so the close button stays put) */
  .addback-expand-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .addback-expand-modal {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .addback-xpd-bar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  .addback-expand-list {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* P2 — employee-inbox recipe grid: 2 cols collide in the narrow sidebar */
  .inbox-recipe { grid-template-columns: 1fr; }

  /* P2 — legacy stat cards: 2-up compact grid instead of 7 tall full-width
     glass cards; tone the 42px display numerals down */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stat-card { padding: 14px 12px 12px; }
  .stat-value { font-size: 30px; }
  .stat-room { margin-bottom: 8px; }
}

/* ── Landscape phones ───────────────────────────────────────────────────── */
@media (max-width: 900px) and (max-height: 480px) {
  #addback-form-overlay.ftest-overlay { padding: 0; }
  #addback-form-overlay .ftest-modal.addback-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }
  #addback-form-overlay .addback-body {
    height: auto;
    max-height: none;
    flex: 1 1 auto;
  }
  #addback-form-overlay .addback-sidepanel,
  #addback-form-overlay .addback-histpanel { display: none; }
  .addback-expand-modal {
    max-height: 100vh;
    max-height: 100dvh;
  }
  .addback-confirm {
    max-height: 100vh;
    max-height: 100dvh;
  }
}

/* ── Touch-target sizing (touch devices only; desktop pointer untouched) ── */
@media (pointer: coarse) {

  /* P0 — the only close affordance on the Cultivation-skin form is a 13px
     macOS traffic-light dot. Grow it into a real 40px ✕ button. (The Overview
     .ovx-addback-skin already renders its own ✕ — its coarse bump lives in
     css/addback-overview-skin.css.) */
  .addback-modal .ftest-light.red {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    color: #fca5a5;
  }
  .addback-modal .ftest-light.red::before {
    content: "\2715";
    font-size: 16px;
    line-height: 1;
  }
  .addback-modal .ftest-light.yellow,
  .addback-modal .ftest-light.green { display: none; }
  html[data-theme="light"] .addback-modal .ftest-light.red {
    background: rgba(19, 16, 58, 0.06);
    border-color: rgba(19, 16, 58, 0.14);
    color: #b91c1c;
  }

  /* P1 — 44px floor for primary touch actions (expand, close pop-out, clear
     locked target, inbox Acknowledge / Mark done, sidebar Send Add Back CTA,
     Submissions/Sent tabs, Select/Clear controls, refresh, severity, water) */
  .addback-xpd-trigger { width: 36px; height: 36px; }
  .addback-xpd-close { width: 44px; height: 44px; }
  .addback-target-locked-clear { width: 44px; height: 44px; }
  .inbox-ack-btn,
  .inbox-resolve-btn,
  .recent-act-btn,
  .addback-side-ctl,
  .recent-vtab {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .alerts-sidebar.is-recent .recent-refresh-btn { width: 40px; height: 40px; }
  .addback-sev-pill { height: 44px; }
  .addback-water-opt { padding: 13px 0; }

  /* P2 — hover-lift transform is dead code on touch */
  .stat-card:hover { transform: none; }
}

/* ── iOS focus-zoom guard: this file's sub-16px form controls (base global
     floor is handled centrally; these neutralize THIS file's own 13–13.5px
     declarations that would otherwise out-rank it) ───────────────────────── */
@media (pointer: coarse) and (max-width: 768px) {
  .addback-modal .ftest-input,
  .addback-modal .ftest-select,
  .addback-modal .ftest-textarea,
  .addback-modal .addback-recipe-input,
  .addback-sidepanel .addback-side-select,
  .addback-histpanel .addback-side-select {
    font-size: 16px;
  }
}