/* ═══════════════════════════════════════════════════════════
   Design Tokens — Light palette (default)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Brand / semantic */
  --color-brand:        #0f7a36;
  --color-brand-hover:  #15803d;
  --color-brand-muted:  #d1e7dd;
  --color-accent:       #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-bg:    #eff6ff;
  /* Alias: many call-sites say --color-primary meaning the brand action color. */
  --color-primary:      var(--color-brand);
  --color-danger:       #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-bg:    #fee2e2;
  --color-warning:      #d97706;
  --color-warning-bg:   #fef3c7;
  /* Dashboard TAT tile fills — clearer/more saturated than the pale -bg tokens
     above (which read "washed" as a full-cell fill). Soon = amber, overdue = red. */
  --color-tat-soon-bg:    #FFFEE6;
  --color-tat-overdue-bg: #F87171;
  --color-success:      #059669;
  --color-success-bg:   #d1e7dd;

  /* Surfaces (depth hierarchy: page → card → elevated → modal) */
  --color-surface-0:   #f5f7fb;
  --color-surface-1:   #ffffff;
  --color-surface-2:   #f8fafc;
  --color-surface-3:   #ffffff;
  /* Alias kept for legacy call-sites that say var(--color-surface). */
  --color-surface:     #ffffff;

  /* Text */
  --color-text-primary:   #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6b7280;
  --color-text-on-brand:  #ffffff;
  /* Canonical text alias (used ~36x but previously undefined → silent failures). */
  --color-text:           var(--color-text-primary);

  /* Borders */
  --color-border:       #e5e7eb;
  --color-border-light: #f0f4f8;
  --color-border-grid:  #cbd5e1;
  /* Dashboard thead uses the same grid color so header and body lines are uniform. */
  --color-border-grid-header: #cbd5e1;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Menlo', 'Monaco', 'Consolas', monospace;
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.8125rem; /* 13px */
  --text-base:  0.875rem;  /* 14px */
  --text-lg:    1rem;       /* 16px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.75rem;   /* 28px */

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-16: 64px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);

  /* Transition */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;

  /* Modal / popover close (×) — one size everywhere */
  --modal-close-size: 22px;
  --modal-close-font-size: 12px;
  --modal-close-radius: 4px;
  --modal-close-shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.16);

  /* Inventory test-pill palette (one bg + fg pair per test code).
     Tokenized so a future dark-mode override only touches :root, not 16
     scattered rules. */
  --color-pill-can-bg:     #d1fae5;  --color-pill-can-fg:     #047857;
  --color-pill-ter-bg:     #dbeafe;  --color-pill-ter-fg:     #1d4ed8;
  --color-pill-pes-myc-bg: #fef3c7;  --color-pill-pes-myc-fg: #b45309;
  --color-pill-hea-bg:     #fee2e2;  --color-pill-hea-fg:     #b91c1c;
  --color-pill-mic-bg:     #ede9fe;  --color-pill-mic-fg:     #6d28d9;
  --color-pill-rsa-bg:     #ccfbf1;  --color-pill-rsa-fg:     #0f766e;
  --color-pill-gen-bg:     #e2e8f0;  --color-pill-gen-fg:     #475569;
  --color-pill-ofc-bg:     #fce7f3;  --color-pill-ofc-fg:     #be185d;
}

/* ═══════════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   Accessibility baseline (keyboard focus + reduced motion)
   ═══════════════════════════════════════════════════════════ */
/* Guaranteed keyboard-focus ring (WCAG 2.4.7). !important on the outline
   overrides the ~30 `outline:none` rules for keyboard focus only —
   :focus-visible never matches mouse focus, so click styling is unaffected. */
*:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect reduced-motion globally: collapse all animation/transition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--color-surface-0);
  color: var(--color-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition-base), color var(--transition-base);
}

.container {
  margin: var(--space-6) auto;
  padding: 0 var(--space-4);
}

.page-wide-layout {
  margin: var(--space-6) auto;
  padding: 0 var(--space-4);
  box-sizing: border-box;
}

.page-narrow {
  margin-left: auto;
  margin-right: auto;
}

.page-wide {
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-4);
}

/* ─── Top Nav ─────────────────────────────────────────────── */

.top-nav {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  align-items: center;
}

.nav-link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
  border: 1px solid var(--color-border);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-link:hover {
  background: var(--color-border);
  color: var(--color-text-primary);
}

.nav-link.active {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-color: var(--color-brand);
}

/* Nav dropdown (grünLIMS pattern — hover + click, animated) */
.gl-nav-group {
  position: relative;
  display: inline-block;
}
.gl-nav-trigger {
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.gl-nav-trigger:hover {
  background: var(--color-border);
  color: var(--color-text-primary);
}
.gl-nav-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
}
.gl-nav-trigger.active {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-color: var(--color-brand);
}
.gl-nav-group.gl-nav-open > .gl-nav-trigger:not(.active) {
  background: var(--color-border);
  color: var(--color-text-primary);
  border-color: var(--color-text-muted);
}
.gl-nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  transition: transform 140ms ease;
  transform: rotate(0deg);
  opacity: 0.75;
}
.gl-nav-caret svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
}
.gl-nav-group.gl-nav-open .gl-nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.gl-nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 12px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity 140ms ease-out,
    transform 140ms cubic-bezier(0.2, 0.8, 0.4, 1),
    visibility 0s linear 140ms;
}
.gl-nav-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -6px;
  right: -6px;
  height: 10px;
  background: transparent;
  pointer-events: auto;
}
.gl-nav-group.gl-nav-open .gl-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 140ms ease-out,
    transform 140ms cubic-bezier(0.2, 0.8, 0.4, 1),
    visibility 0s linear 0s;
}
.gl-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.gl-nav-item + .gl-nav-item {
  margin-top: 1px;
}
.gl-nav-item:hover,
.gl-nav-item:focus-visible {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  outline: none;
}
.gl-nav-item.active {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-weight: 600;
}
.gl-nav-item.active:hover,
.gl-nav-item.active:focus-visible {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
}
@media (prefers-reduced-motion: reduce) {
  .gl-nav-caret,
  .gl-nav-dropdown,
  .gl-nav-item,
  .gl-nav-trigger {
    transition: none !important;
  }
  .gl-nav-dropdown {
    transform: none;
  }
}

.nav-user {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.nav-logout {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

/* Phase 0: /logout is POST-only (CSRF-safe), so the nav "Sign Out" link is now
   a form-wrapped button. Reset native button chrome so it looks identical to
   the prior <a class="nav-link"> rendering. */
.nav-logout-form {
  display: inline;
  margin: 0;
  padding: 0;
}
button.nav-link {
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: var(--text-base);
}
button.nav-link.nav-logout {
  font-size: var(--text-xs);
}
.auth-link-button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-1);
  color: var(--color-text-primary);
}

h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
}

h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--space-1);
  color: var(--color-text-primary);
}

.subtitle {
  margin-top: 0;
  color: #4b5563;
}

.hint {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
}

/* ─── Tabs ────────────────────────────────────────────────── */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid #dbe1ea;
  padding-bottom: 0;
}

.tab-btn {
  background: none;
  color: #4b5563;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -2px;
  border-radius: 0;
}

.tab-btn:hover {
  color: var(--color-text-primary);
  background: none;
}

.tab-btn.active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
  background: none;
}

.tab-panel {
  display: none;
}

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

/* ─── Cards ───────────────────────────────────────────────── */

.card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

/* ─── General Form ────────────────────────────────────────── */

form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.upload-form {
  flex-direction: column;
  align-items: flex-start;
}

/* ─── File Drop Zone ─────────────────────────────────── */
.file-drop-zone {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.file-drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.file-drop-zone .drop-icon { display: none; }
.file-drop-zone .drop-label { display: none; }
.file-drop-zone .drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-brand);
  background: transparent;
  color: var(--color-brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  pointer-events: none;
  white-space: nowrap;
}
.file-drop-zone:hover .drop-btn {
  background: var(--color-brand);
  color: #fff;
}
.file-drop-zone .drop-filenames {
  font-size: 12px;
  color: var(--color-text-secondary);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-form {
  align-items: flex-start;
}

.settings-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 220px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.settings-form label.full-width {
  width: 100%;
  max-width: 400px;
}

.settings-form input[type="text"],
.settings-form input[type="number"],
.settings-form select {
  border: 1px solid #cdd6e4;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  min-width: 200px;
}
.settings-form select:not([multiple]):not([size]) {
  padding-inline-end: 28px;
}

.settings-form h3 {
  width: 100%;
  margin: 14px 0 4px;
  font-size: 15px;
}

.settings-form h4 {
  width: 100%;
  margin: 10px 0 2px;
  font-size: 13px;
}

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.checkbox-row {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  min-width: auto !important;
}

/* ─── Compact inline settings forms (Dashboard / Inventory / Analytics) ─── */
/* A single row of small fields ending in a Save button. Mirrors .settings-form
   typography but allows compact, fixed-width controls instead of min-width:220. */
.settings-inline-form {
  display: flex;
  gap: var(--space-3, 16px);
  align-items: flex-end;
  flex-wrap: wrap;
}
.settings-inline-form > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.settings-inline-form > label.inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.settings-inline-form input[type="text"],
.settings-inline-form input[type="number"] {
  border: 1px solid #cdd6e4;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  box-sizing: border-box;
}
.settings-inline-form .field-narrow { width: 120px; }
.settings-inline-form .field-grow { flex: 1 1 360px; }
.settings-inline-form .field-grow input { width: 100%; }
.settings-inline-form .settings-status {
  align-self: center;
  color: var(--color-text-muted);
  font-size: 12px;
}
.settings-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 16px);
}

/* Dashboard column-order editor (Settings → Dashboard).
   Laid out horizontally (tiles wrap left→right) to mirror the dashboard's
   left-to-right columns — reading order = column order. */
.col-order-list {
  list-style: none; margin: 0 0 var(--space-3); padding: 6px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 6px; align-items: flex-end;
}
/* Narrow vertical chips with an angled label — mirrors the dashboard's diagonal
   column headers and packs more columns per row (less wrapping/overflow). */
.col-order-row {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 48px; height: 78px; padding: 4px 2px 5px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface-1);
}
.col-order-row .co-label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  transform: rotate(-45deg); transform-origin: center;
}
.col-order-row .co-arrows { display: flex; gap: 3px; }
.col-order-row button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; font-size: 11px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 4px;
  background: #fff; color: var(--color-text-secondary);
}
.col-order-row button:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.col-order-row button:disabled { opacity: .35; cursor: default; }

/* ─── COA per-profile review-check override blocks ───────────────────────── */
.coa-override-ltb {
  font-size: 14px;
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.coa-override-ltb:first-child {
  margin-top: 0;
}
.coa-override-subcat {
  margin: 0 0 16px 16px;
  padding-left: 12px;
  border-left: 3px solid var(--color-border);
}
.coa-override-sub {
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.coa-override-table {
  margin-bottom: 8px;
}
/* COA override blocks as collapsible accordions (settings page) */
.settings-page .coa-override-accordion {
  border-bottom: 1px solid var(--color-border);
}
.settings-page .coa-override-accordion > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-bottom: none;
  margin: 0;
  padding: 10px 0;
}
.settings-page .coa-override-accordion > summary::-webkit-details-marker { display: none; }
.settings-page .coa-override-accordion > summary::before {
  content: "\25B8";              /* ▸ */
  display: inline-block;
  width: 1.1em;
  color: var(--color-text-muted);
  transition: transform 0.12s ease;
}
.settings-page .coa-override-accordion[open] > summary::before {
  content: "\25BE";              /* ▾ */
}
.settings-page .coa-override-accordion[open] > summary { margin-bottom: 8px; }

/* ─── CCV global acceptance window ───────────────────────────────────────── */
.ccv-global-config {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--color-bg-muted, #f5f5f5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
}
.ccv-global-config .ccv-global-heading {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.ccv-global-config label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.ccv-global-config .ccv-global-input,
.ccv-global-config .ccv-global-unit-input {
  width: 88px;
}

/* ─── Checkbox Grid (profiles) ────────────────────────────── */

.checkbox-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px 0;
}

/* ─── Profile modal ─── */
#profile-modal > .modal-card {
  max-width: 560px;
  padding: 20px 24px;
}
#profile-modal .modal-header {
  margin-bottom: 16px;
}
#profile-modal .modal-header h3 {
  font-size: 16px;
  font-weight: 700;
}
#profile-modal .modal-body {
  padding: 0;
}
#profile-modal .modal-body label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, var(--color-text-muted));
  margin-top: 0;
}
#profile-modal .modal-body label input[type="text"],
#profile-modal .modal-body label input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-sizing: border-box;
}
/* Expected-TAT is a single short value: own row, left-aligned, fixed width,
   with a quiet helper line. Keeps it consistent with the other modal fields
   instead of stretching a number box full width or orphaning it in the grid. */
#profile-modal .modal-body label.profile-tat-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
#profile-modal .modal-body label.profile-tat-field input {
  width: 140px;
  margin-top: 0;
}
#profile-modal .modal-body label.profile-tat-field .profile-field-hint {
  font-weight: 400;
  font-size: 11px;
  color: var(--color-text-muted);
}
#profile-modal .check-label {
  display: flex !important;
  margin-top: 0 !important;
  font-weight: 500 !important;
  color: var(--color-text-primary, var(--color-text-primary)) !important;
}
#profile-modal .checkbox-row {
  font-weight: 500 !important;
  color: var(--color-text-primary, var(--color-text-primary)) !important;
  margin-top: 0 !important;
}
.profile-form-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  align-items: start;
}
.profile-form-section {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}
.profile-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}

/* ─── Sub-category rows inside profile modal ─── */
.subcat-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
  background: var(--color-surface-2, #f9fafb);
}
/* Three columns; Title shares its column with remove (flex) so × sits flush to the field */
.subcat-row-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}
.subcat-title-with-remove {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}
.subcat-title-with-remove > label {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
#profile-modal .subcat-row-header > label,
#profile-modal .subcat-title-with-remove > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, var(--color-text-muted));
  margin-top: 0;
}
#profile-modal .subcat-row-header > label input[type="text"],
#profile-modal .subcat-row-header > label input[type="number"],
#profile-modal .subcat-title-with-remove > label input[type="text"] {
  display: block;
  font-size: 12px;
  width: 100%;
  margin-top: 3px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  box-sizing: border-box;
}
#profile-modal .subcat-row .sc-remove {
  box-sizing: border-box;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0 !important;
  margin: 0;
  font-size: 16px;
  line-height: 1;
  border-radius: 5px;
  flex-shrink: 0;
}
.subcat-tests-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, var(--color-text-muted));
}
.subcat-row .checkbox-grid {
  padding: 4px 0;
  gap: 8px;
}
.subcat-row .check-label {
  font-size: 11px !important;
}

.check-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 5px !important;
  min-width: auto !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand);
}

.settings-actions {
  width: 100%;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.secondary-btn {
  background: #64748b;
}

.secondary-btn:hover {
  background: #546274;
}

/* ─── Profile Table ───────────────────────────────────────── */

.profiles-table th,
.profiles-table td {
  text-align: center;
  padding: 6px 5px;
  font-size: 13px;
}

.profiles-table th:first-child,
.profiles-table td:first-child {
  text-align: left;
  min-width: 200px;
}

/* CCV Control Charting: analyte + target conc. read as a pair (override global table { width:100% }) */
.ccv-targets-narrow {
  width: auto;
  max-width: 100%;
  table-layout: auto;
}

.ccv-targets-narrow th:first-child,
.ccv-targets-narrow td:first-child {
  min-width: 0;
  max-width: 16rem;
  padding-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ccv-targets-narrow th:nth-child(2),
.ccv-targets-narrow td:nth-child(2) {
  padding-left: 0;
  width: auto;
  white-space: nowrap;
}

.ccv-targets-narrow .ccv-input {
  min-width: 0;
}

.check-on {
  color: var(--color-brand);
  font-weight: 700;
}

.check-off {
  color: #c0c7d0;
}

/* Horizontal scroll only: overflow-x:auto + visible y would compute y to `auto` and
   break `position:sticky` thead rows against the viewport. `clip` avoids a vertical
   scrollport while still allowing wide tables to scroll sideways. */
.table-scroll {
  overflow-x: auto;
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
}

/* ─── Buttons ─────────────────────────────────────────────── */

button {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

button:hover {
  background: var(--color-brand-hover);
}

button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.small-btn {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
}

.small-btn:hover {
  background: var(--color-brand-hover);
}

.complete-btn {
  background: var(--color-brand);
}

.complete-btn:hover {
  background: #0d6a2f;
}

.danger-btn {
  background: #d92d20;
}

.danger-btn:hover {
  background: #b42318;
}

.rule-controls-cell {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ─── Progress ────────────────────────────────────────────── */

.progress-label {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.progress-track {
  margin-top: 8px;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: #e8edf4;
  overflow: hidden;
}

#progress-fill {
  width: 0%;
  height: 100%;
  background: #2b7fff;
  transition: width 0.3s ease;
}

#download-link {
  display: inline-block;
  margin-top: 12px;
  color: #1b4fd2;
  text-decoration: none;
  font-weight: 600;
}

#download-link:hover {
  text-decoration: underline;
}

/* ─── Tables ──────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

th,
td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-2);
  text-align: center;
}

td.col-entity {
  word-break: break-word;
  max-width: 200px;
}

th {
  background: var(--color-surface-2);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
}

tbody tr {
  transition: background var(--transition-fast);
}

tbody tr:nth-child(even) {
  background: var(--color-surface-2);
}

tbody tr:hover {
  background: var(--color-border-light);
}

/* ─── Utility ─────────────────────────────────────────────── */

.hidden {
  display: none;
}

.center {
  text-align: center;
}

.manifest-select-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand);
  cursor: pointer;
}

/* ─── Download / Status Buttons ───────────────────────────── */

.download-btn {
  background: #1b4fd2;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.download-btn:hover {
  background: #173fad;
}

.download-btn:disabled {
  background: #8a93a3;
  cursor: not-allowed;
}

.pdf-btn {
  background: #475569;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.pdf-btn:hover {
  background: #334155;
}

.pdf-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

.status-ok {
  color: var(--color-brand);
  font-weight: 700;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.status-error {
  background: #d92d20;
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.status-warn {
  background: #f59e0b;
  color: var(--color-text-primary);
  border: none;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.status-warn:hover {
  background: var(--color-warning);
}

.error-log-cell {
  text-align: center;
}

/* ─── Modal entrance animations ──────────────────────────── */

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-card-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Modal ───────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
  animation: modal-backdrop-in 0.14s ease-out;
}

.modal.hidden {
  display: none;
}

.modal > .modal-card {
  animation: modal-card-in 0.16s ease-out forwards;
}

.modal-card {
  width: min(760px, 100%);
  background: #fff;
  border-radius: 10px;
  border: 1px solid #dbe1ea;
  padding: 14px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* COA single-sample detail modal: prev / title / next / close */
.coa-detail-modal-header {
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}
.coa-detail-modal-header .coa-detail-modal-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.coa-detail-modal-header .modal-close {
  margin-left: auto;
  flex-shrink: 0;
}
.coa-detail-nav-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border, #dbe1ea);
  border-radius: 8px;
  background: var(--color-surface-1, #fff);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-primary, var(--color-text-primary));
  display: flex;
  align-items: center;
  justify-content: center;
}
.coa-detail-nav-btn[hidden] {
  display: none !important;
}
.coa-detail-nav-btn:hover {
  background: var(--color-border, #e4e8f0);
}

.modal-close {
  background: #e4e8f0;
  color: var(--color-text-primary);
  border: 0;
  border-radius: var(--modal-close-radius);
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  min-width: var(--modal-close-size);
  min-height: var(--modal-close-size);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--modal-close-font-size);
  line-height: 1;
  padding: 0;
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
}
.modal-close:hover {
  background: #e4e8f0;
  box-shadow: var(--modal-close-shadow-hover);
}

#error-modal-text {
  margin: 0;
  white-space: pre-wrap;
  max-height: 50vh;
  overflow: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  background: var(--color-surface-2);
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  padding: 10px;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}
#coa-detail-modal-text {
  margin: 0;
  white-space: normal;
  max-height: 75vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: break-word;
  word-wrap: break-word;
  padding: 12px 16px;
  font-size: 13px;
}
.coa-detail-modal-card {
  width: min(820px, 95vw);
  overflow: hidden;
}

/* ─── Rule Simulator Results ──────────────────────────────── */

.sim-result {
  margin-top: 12px;
  padding: 12px;
  background: var(--color-surface-2);
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.sim-result ol,
.sim-result ul {
  margin: 4px 0 8px 16px;
  padding: 0;
}

.sim-section {
  margin-bottom: 6px;
}

.sim-none {
  color: var(--color-text-muted);
  font-style: italic;
}

.sim-error {
  color: #d92d20;
  font-weight: 600;
}

.settings-form.compact label {
  min-width: 200px;
}

/* ═══════════════════════════════════════════════════════════
   RULE BUILDER – IF / THEN card layout
   ═══════════════════════════════════════════════════════════ */

.rule-builder form {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

/* Meta row: name, description, priority, enabled */
.rb-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5eaf2;
  margin-bottom: 0;
}

.rb-meta label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
  flex: 1;
  min-width: 160px;
}

.rb-meta input[type="text"],
.rb-meta input[type="number"] {
  border: 1px solid #cdd6e4;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
}

.rb-meta .checkbox-row {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  flex: 0 0 auto;
  min-width: auto !important;
  padding-top: 20px;
}

/* Sections (IF / THEN) */
.rb-section {
  border: 1px solid #dbe1ea;
  border-radius: 10px;
  margin-top: 14px;
  overflow: hidden;
}

.rb-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
}

.rb-label {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rb-label-sub {
  color: #4b5563;
  font-size: 13px;
}

.rb-if {
  background: #f0faf3;
}

.rb-if .rb-section-header {
  background: #e2f4e8;
  border-bottom: 1px solid #c9e6d2;
}

.rb-if .rb-section-header select {
  border: 1px solid #a8d5b8;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  background-color: #fff;
  color: var(--color-brand);
}

.rb-then {
  background: #f0f4ff;
}

.rb-then .rb-section-header {
  background: #dce4f8;
  border-bottom: 1px solid #c5d0ec;
}

/* Condition rows — one height for selects, inputs, +Or, remove (overrides global button) */
#condition-rows {
  padding: 8px 14px 4px;
  --cond-control-h: 32px;
}

.cond-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.cond-row select {
  border: 1px solid #b8c9d4;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
  background-color: #fff;
  min-width: 140px;
  flex-shrink: 0;
  height: var(--cond-control-h);
  min-height: var(--cond-control-h);
  box-sizing: border-box;
  line-height: 1.2;
}

.cond-row input[type="text"] {
  border: 1px solid #b8c9d4;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
  width: 200px;
  max-width: 200px;
  min-width: 0;
  height: var(--cond-control-h);
  min-height: var(--cond-control-h);
  box-sizing: border-box;
  line-height: 1.2;
}

.cond-value-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.cond-or-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-height: var(--cond-control-h);
}

.cond-or-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-brand);
  text-transform: lowercase;
  min-width: 16px;
  text-align: right;
  flex-shrink: 0;
}

.cond-row .cond-or-btn {
  height: var(--cond-control-h);
  min-height: var(--cond-control-h);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-brand);
  background: transparent;
  border: 1px dashed var(--color-brand);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.cond-row .cond-or-btn:hover {
  background: color-mix(in srgb, var(--color-brand) 8%, transparent);
  color: var(--color-brand);
}

.cond-row > .cond-remove-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #9ca3af;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
}
.cond-row > .cond-remove-btn:hover {
  background: var(--color-danger-bg);
  color: #d92d20;
  border-color: #fca5a5;
}

.cond-or-row .cond-remove-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #9ca3af;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
}
.cond-or-row .cond-remove-btn:hover {
  background: var(--color-danger-bg);
  color: #d92d20;
  border-color: #fca5a5;
}

.add-row-btn {
  background: transparent;
  color: var(--color-brand);
  border: 1px dashed var(--color-brand);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin: 4px 14px 12px;
  align-self: flex-start;
  width: auto;
  text-align: left;
  transition: background 0.15s;
}

.add-row-btn:hover {
  background: color-mix(in srgb, var(--color-brand) 8%, transparent);
}

/* THEN actions row */
.rb-actions-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px 6px;
}

.rb-actions-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
  flex: 1;
  min-width: 180px;
}

.rb-field-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.rb-actions-row input[type="text"] {
  border: 1px solid #c5d0ec;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}

.rb-comment-label {
  flex-basis: 100%;
}

/* Test toggle buttons */
.rb-test-section {
  padding: 8px 14px 12px;
  border-top: 1px solid #d5ddf0;
}

.rb-test-label {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-bottom: 8px;
}

.info-icon {
  margin-left: 8px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #c5d0ec;
  background: #f0f4ff;
  color: #1f4fbf;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.info-icon:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.test-toggle-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.test-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  user-select: none;
}

.test-toggle-key {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary);
  letter-spacing: 0.3px;
}

.test-toggle-state {
  width: 42px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid #d1d5db;
  background: #f3f4f6;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.test-toggle[data-state="none"] .test-toggle-state {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #9ca3af;
}

.test-toggle[data-state="on"] .test-toggle-state {
  background: #dcfce7;
  border-color: #22c55e;
  color: var(--color-brand-hover);
}

.test-toggle[data-state="off"] .test-toggle-state {
  background: var(--color-danger-bg);
  border-color: #ef4444;
  color: var(--color-danger-hover);
}

.test-toggle[data-state="inherit"] .test-toggle-state {
  background: #dbeafe;
  border-color: #3b82f6;
  color: var(--color-accent-hover);
}

/* Rule builder footer */
.rb-footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* ─── Condition Pills (rules table) ──────────────────────── */

.cond-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cond-pill {
  display: inline-block;
  padding: 3px 8px;
  background: #e8f5ec;
  border: 1px solid #bdd9c7;
  border-radius: 12px;
  font-size: 11px;
  color: #1a5c2d;
  white-space: nowrap;
}

.action-summary {
  font-size: 12px;
  line-height: 1.5;
}

.action-summary .act-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin: 1px 2px;
}

.act-tag.tag-on {
  background: #dcfce7;
  color: var(--color-brand-hover);
}

.act-tag.tag-off {
  background: var(--color-danger-bg);
  color: var(--color-danger-hover);
}

.act-tag.tag-inh {
  background: #dbeafe;
  color: var(--color-accent-hover);
}

/* ═══════════════════════════════════════════════════════════
   STATUS PAGE
   ═══════════════════════════════════════════════════════════ */

.status-divider {
  height: 1px;
  background: #e5eaf2;
  margin: 16px 0;
}

.status-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

.progress-fill-bar {
  width: 0%;
  height: 100%;
  background: #2b7fff;
  transition: width 0.3s ease;
}

/* Summary bar */
.summary-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--color-surface-2);
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  font-size: 13px;
}

.summary-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.summary-passed strong { color: var(--color-brand); }
.summary-pending strong { color: #b45309; }
.summary-skipped strong { color: var(--color-text-muted); }
.summary-error strong { color: #d92d20; }
.summary-checked strong { color: #1f4fbf; }

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-passed {
  background: #dcfce7;
  color: var(--color-brand-hover);
  border: 1px solid #86efac;
}

.badge-pending {
  background: var(--color-warning-bg);
  color: #92400e;
  border: 1px solid #fcd34d;
}

.badge-failed {
  background: var(--color-danger-bg);
  color: var(--color-danger-hover);
  border: 1px solid #fca5a5;
}

.badge-skipped {
  background: #f3f4f6;
  color: var(--color-text-muted);
  border: 1px solid #d1d5db;
}

.badge-error {
  background: var(--color-danger-bg);
  color: var(--color-danger-hover);
  border: 1px solid #fca5a5;
}

.badge-unchecked {
  background: #f0f4ff;
  color: var(--color-text-muted);
  border: 1px solid #c5d0ec;
}

/* Skipped rows */
.row-skipped td {
  opacity: 0.5;
}

.mono {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

/* Priority badge in rules table */
.priority-badge {
  display: inline-block;
  background: #f0f4ff;
  border: 1px solid #c5d0ec;
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 13px;
  color: #1f4fbf;
}

/* ─── Manifests page: Option 3 — stacked action rows (no vertical rule) ─ */

.manifests-actions-card > h2 {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.manifests-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.manifests-upload-section,
.manifests-metrc-action-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.manifests-metrc-action-block .manifests-fetch-hint {
  margin: 0;
  max-width: 36rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-text-secondary, var(--color-text-muted));
}

.manifests-row-label {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted, var(--color-text-muted));
}

/* METRC section: sync block + credentials */
.manifests-metrc-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.manifests-upload-form.upload-form {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  width: auto;
  max-width: 100%;
}

.manifests-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.manifests-progress {
  max-width: min(100%, 28rem);
}

.manifests-row-rule {
  border: none;
  border-top: 1px solid var(--color-border, #e5eaf2);
  margin: 0;
}

.manifests-fetch-btn,
.manifests-refresh-btn {
  width: fit-content;
  flex-shrink: 0;
}

.manifests-fetch-btn:disabled,
.manifests-refresh-btn:disabled {
  background: var(--color-text-muted, #94a3b8);
  border-color: var(--color-text-muted, #94a3b8);
  color: #fff;
  cursor: not-allowed;
}

.manifests-fetch-btn:disabled:hover,
.manifests-refresh-btn:disabled:hover {
  background: var(--color-text-muted, #94a3b8);
  border-color: var(--color-text-muted, #94a3b8);
}

.manifests-stack .metrc-creds {
  margin-top: 0;
}

.manifests-metrc-creds h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

@media (max-width: 720px) {
  .manifests-upload-form.upload-form {
    align-items: flex-start;
    width: 100%;
  }
  .manifests-upload-row {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .manifests-upload-row {
    flex-direction: column;
    align-items: stretch;
  }
  .manifests-upload-row .btn-brand {
    width: 100%;
  }
}

/* ─── METRC Credentials (Fetch / Refresh) ─────────────────── */

.metrc-creds {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-surface-2);
  border: 1px solid #e5eaf2;
  border-radius: 10px;
}

.metrc-creds-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.metrc-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.metrc-label-text {
  font-weight: 600;
}

.metrc-label input[type="text"],
.metrc-label input[type="password"] {
  border: 1px solid #cdd6e4;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  min-width: 220px;
}

/* ═══════════════════════════════════════════════════════════
   COMBINED PARSER + STATUS – Expandable Rows
   ═══════════════════════════════════════════════════════════ */

.refresh-btn {
  background: #475569;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.refresh-btn:hover {
  background: #334155;
}

.refresh-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

/* Toggle column */
.col-toggle {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  padding: 0 !important;
}

.expand-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-text-muted);
  transition: background 0.15s, transform 0.15s;
}

.expand-toggle:hover {
  background: #e9eef7;
  color: var(--color-text-primary);
}

.expand-toggle.expanded {
  transform: rotate(90deg);
  color: var(--color-brand);
}

/* Detail row (sub-table container) */
.detail-row > td {
  padding: 0 !important;
  border-bottom: none;
}

.detail-cell {
  background: #f0faf6;
  border-left: 4px solid #22c55e;
  padding: 10px 16px 10px 40px;
}

.sample-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sample-table th {
  background: #e2f4e8;
  padding: 6px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 1px solid #c9e6d2;
}
.sample-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #e5eaf2;
  vertical-align: middle;
  text-align: center;
}

.sample-table td:nth-child(3),
.sample-table th:nth-child(3) {
  max-width: 120px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.sample-table tr:last-child td {
  border-bottom: none;
}

/* Manifest status summary badges */
.manifest-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ms-passed {
  background: #dcfce7;
  color: var(--color-brand-hover);
  border: 1px solid #86efac;
}

.ms-partial {
  background: var(--color-warning-bg);
  color: #92400e;
  border: 1px solid #fcd34d;
}

.ms-errors {
  background: var(--color-danger-bg);
  color: var(--color-danger-hover);
  border: 1px solid #fca5a5;
}

.ms-unchecked {
  background: #f0f4ff;
  color: var(--color-text-muted);
  border: 1px solid #c5d0ec;
}

/* Expand / Collapse all controls */
.expand-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 8px 0 6px;
  font-size: 12px;
}

.expand-controls a {
  color: #1b4fd2;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
}

.expand-controls a:hover {
  text-decoration: underline;
}

.expand-sep {
  color: #c0c7d0;
}

/* Clickable manifest row */
.manifest-row {
  cursor: default;
}

.manifest-row:hover {
  background: var(--color-surface-2);
}

.delete-btn {
  background: #d92d20;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.delete-btn:hover {
  background: #b42318;
}

.delete-btn:disabled {
  background: #f2b8b3;
  cursor: not-allowed;
}

/* ─── COA Review: Evaluation Badges ──────────────────────── */

.eval-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

button.sample-coa-btn {
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Use a tiny translateY (no scale) so the rasterised text doesn't shift on the
   subpixel grid. scale() was causing the digits/glyphs to appear to "drop" on
   hover because the text was being re-rasterised at a fractional size. */
button.sample-coa-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

button.sample-coa-btn.eval-pass,
button.sample-coa-btn.eval-pass:hover {
  background: #dcfce7;
  color: #166534;
}

button.sample-coa-btn.eval-warn,
button.sample-coa-btn.eval-warn:hover {
  background: var(--color-warning-bg);
  color: #92400e;
}

button.sample-coa-btn.eval-error,
button.sample-coa-btn.eval-error:hover {
  background: var(--color-danger-bg);
  color: #991b1b;
}

/* Keep full opacity on hover — global .eval-badge:hover { opacity: 0.8 } would muddy contrast */
button.sample-coa-btn.eval-badge:hover {
  opacity: 1;
}

.eval-pass {
  background: #dcfce7;
  color: #166534;
}

.eval-warn {
  background: var(--color-warning-bg);
  color: #92400e;
}

.eval-error {
  background: var(--color-danger-bg);
  color: #991b1b;
}

/* ─── Comment Bubble ─────────────────────────────────────── */

.comment-bubble {
  background: none;
  border: 1px solid #cdd6e4;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 16px;
  cursor: help;
  line-height: 1;
}

.comment-bubble:hover {
  background: #e5eaf2;
}

.comments-cell {
  text-align: center;
}

/* ─── COA Detail Modal Content ───────────────────────────── */

.coa-detail-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.coa-detail-item {
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafcff;
}

.coa-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.coa-detail-name {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.coa-checks {
  list-style: none;
  padding: 0;
  margin: 6px 0;
  font-size: 13px;
}

.coa-checks li {
  padding: 3px 0;
}

.coa-checks .check-pass {
  color: #166534;
}

.coa-checks .check-warning {
  color: #92400e;
}

.coa-checks .check-error {
  color: #991b1b;
}

.coa-comments {
  font-size: 12px;
  color: #4b5563;
  background: #f0f4fa;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 6px 0 0;
}

/* ─── COA Review Page ────────────────────────────────────── */

.history-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.reviewed-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.reviewed-search-row input[type="search"] {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 420px;
  padding: 8px 10px;
  border: 1px solid #dbe1ea;
  border-radius: 8px;
  font-size: 14px;
}

.reviewed-search-hint {
  margin: 0 0 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.history-filter-row select {
  flex: 1;
  max-width: 350px;
  padding: 7px 10px;
  border: 1px solid #cdd6e4;
  border-radius: 8px;
  font-size: 14px;
}

.history-controls label {
  font-weight: 600;
  font-size: 14px;
}

.history-controls input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #cdd6e4;
  border-radius: 8px;
  font-size: 14px;
}

.history-controls select {
  padding: 4px;
  border: 1px solid #cdd6e4;
  border-radius: 8px;
  font-size: 13px;
  font-family: monospace;
  width: 100%;
  overflow-y: auto;
}

.history-controls select option {
  padding: 4px 6px;
}

#strain-detail-section .sample-id-cell {
  font-family: Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}

/* ─── Strain Stats ───────────────────────────────────────── */

.strain-stats {
  margin-bottom: 14px;
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: #f0faf6;
  border: 1px solid #d1e7dd;
  border-radius: 8px;
}

.stat-count {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-brand);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.stat-label {
  font-weight: 700;
  color: var(--color-text-secondary);
}

.stat-val {
  color: #1a1a1a;
}

.stat-muted {
  color: #9ca3af;
  font-size: 12px;
}

/* ─── Deviation Flag ─────────────────────────────────────── */

.deviation-flag {
  background: var(--color-warning-bg) !important;
  font-weight: 700;
}

/* ─── Trend Bar ──────────────────────────────────────────── */

.trend-bar {
  height: 4px;
  background: var(--color-brand);
  border-radius: 2px;
  margin-top: 3px;
  transition: width 0.3s;
}

/* ─── Top-5 Terpene cell ─────────────────────────────────── */

.top5-cell {
  font-size: 12px;
  max-width: 260px;
  white-space: normal;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
}

.top5-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 240px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.top5-bar {
  display: flex;
  align-items: center;
  height: 20px;
  background: #eef2f7;
  border-radius: 4px;
}

.top5-bar-fill {
  height: 100%;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  overflow: visible;
}

.top5-bar-fill .top5-bar-label {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}

.top5-bar > .top5-bar-label {
  padding-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}

/* ─── COA Progress Bar Fix ───────────────────────────────── */

#coa-progress-fill {
  width: 0%;
  height: 100%;
  background: #2b7fff;
  transition: width 0.3s ease;
}

/* ─── Issue Pills (COA Review results table) ─────────────── */

.issues-cell {
  white-space: normal;
  max-width: 220px;
}

.issue-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin: 1px 2px;
  cursor: default;
}

.issue-pill.issue-warning {
  background: var(--color-warning-bg);
  color: #92400e;
}

.issue-pill.issue-error {
  background: var(--color-danger-bg);
  color: #991b1b;
}

.all-clear {
  font-size: 12px;
  color: #6ee7b7;
  font-weight: 600;
}

/* ─── COA Delete Button ──────────────────────────────────── */

.coa-delete-btn {
  background: none;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  color: var(--color-danger);
  transition: background 0.15s;
}

.coa-delete-btn:hover {
  background: var(--color-danger-bg);
}

/* ─── Charts Grid (Historical Data) ──────────────────────── */

.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .charts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.chart-card {
  background: #ffffff;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  padding: 16px;
  position: relative;
}

.chart-card h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.chart-card .chart-wrap {
  position: relative;
  width: 100%;
  height: 240px;
}

/* Reserved grid cells on Historical Data row (same footprint as a chart-card; no content yet) */
.chart-slot-empty {
  visibility: hidden;
  pointer-events: none;
  min-height: 0;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.chart-placeholder .hint {
  margin-top: 8px;
}

.graph-filter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  background: #f9fafb;
}

.graph-filter-controls label {
  font-size: 12px;
  color: #4b5563;
  font-weight: 600;
}

.graph-filter-controls select,
.graph-filter-controls input[type="date"] {
  border: 1px solid #cdd6e4;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}

#coa-results-section .table-scroll {
  overflow-x: auto;
  overflow-y: clip;
}

#coa-results-section > .table-scroll > table {
  min-width: 700px;
}
.sample-table {
  min-width: 1400px;
}

.sticky-right {
  position: sticky;
  right: 0;
  background: #ffffff;
  z-index: 2;
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.15);
  width: 56px;
  min-width: 56px;
  text-align: center;
}

th.sticky-right {
  background: #fafcff;
}

/* ─── Stat Cards (Historical Data) ───────────────────────── */

.stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.stat-card {
  flex: 1 1 140px;
  min-width: 140px;
  max-width: 200px;
  background: #f9fafb;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-card-count {
  background: #f0faf6;
  border-color: #d1e7dd;
}

.stat-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-card-value {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
}

.stat-card-count .stat-card-value {
  color: var(--color-brand);
}

.stat-card-meta {
  font-size: 11px;
  color: #9ca3af;
}

/* ─── COA PDF modal (letter-sized embedded viewer) ─── */
/* Letter aspect ratio is 8.5 / 11 ≈ 0.773. We size the *body* (the iframe area)
   to that ratio and let the header sit on top, so a single page renders
   comfortably without distortion. The card itself is capped to the viewport. */
.pdf-modal-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.32);
  width: min(95vw, calc(min(94vh - 56px, 1120px) * 0.773));
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.pdf-modal-header-row {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 10px;
  margin-bottom: 0;
}
.pdf-modal-title {
  font-size: 14px;
  font-weight: 700;
}
.pdf-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.pdf-modal-link {
  font-size: 12px;
  color: var(--color-accent);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.pdf-modal-link:hover {
  background: var(--color-accent-bg);
  border-color: #bfdbfe;
}
.pdf-modal-body {
  flex: 1 1 auto;
  background: #f3f4f6;
  /* aspect-ratio keeps a true 8.5:11 frame as the viewport allows */
  aspect-ratio: 8.5 / 11;
  min-height: 0;
  max-height: calc(95vh - 56px);
  display: flex;
}
.pdf-modal-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f3f4f6;
}
@media (max-width: 720px) {
  .pdf-modal-card {
    width: 96vw;
    max-height: 95vh;
  }
  .pdf-modal-title { font-size: 13px; }
  .pdf-modal-link { padding: 3px 8px; font-size: 11px; }
}

/* ─── Photo lightbox modal ─── */
.photo-modal-card {
  position: relative;
  max-width: 700px;
  max-height: 80vh;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-modal-card img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 8px;
}
.photo-modal-card .photo-modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  min-width: var(--modal-close-size);
  min-height: var(--modal-close-size);
  font-size: var(--modal-close-font-size);
  font-weight: 700;
  cursor: pointer;
  line-height: var(--modal-close-size);
  text-align: center;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
}
.photo-modal-card .photo-modal-close:hover {
  background: rgba(0,0,0,0.4);
  box-shadow: var(--modal-close-shadow-hover);
}

/* ─── Thumbnails ─── */
.sample-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e5eaf2;
  cursor: pointer;
  transition: transform 0.15s;
}
.sample-thumb:hover {
  transform: scale(1.15);
}
.photo-thumb-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ─── COA PDF button ─── */
.status-cell-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.version-chevron {
  background: none;
  border: none;
  cursor: pointer;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 11px;
  color: var(--color-text-muted);
  transition: background 0.15s, transform 0.15s, color 0.15s;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}
.version-chevron:hover {
  background: #e9eef7;
  color: var(--color-text-primary);
}
.version-chevron.expanded {
  transform: rotate(90deg);
  color: var(--color-brand);
}
.version-history-row {
  background: var(--color-bg-alt, #f9fafb);
}
.version-history-row td {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding-top: 3px;
  padding-bottom: 3px;
  border-left: 3px solid var(--color-border);
}
.version-history-row td:first-child {
  padding-left: 24px;
}
.version-history-label {
  font-weight: 500;
  font-style: italic;
  color: var(--color-text-secondary);
}
/* Match main-row status pill + hover (sample-coa-btn); avoid background:none on revision buttons */
.version-history-row td.version-history-status-cell {
  text-align: center;
  vertical-align: middle;
}
.sample-reopen-cb {
  cursor: pointer;
}
.coa-reupload-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.coa-reupload-btn:hover {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.coa-pdf-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s;
}
.coa-pdf-btn:hover {
  background: var(--color-border-light);
}

/* ─── Detail photo in modal ─── */
.coa-detail-photo {
  text-align: center;
  margin-bottom: 12px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-photo-img {
  max-width: 300px;
  max-height: 240px;
  border-radius: 8px;
  border: 1px solid #e5eaf2;
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
.detail-photo-img.loaded {
  opacity: 1;
}

td.center {
  text-align: center;
}

/* ─── Modal overlay (unified pattern) ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.modal-overlay > .modal-card {
  position: relative;
  z-index: 1001;
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
/* Sample-alias modal: dropdown + focus rings must not clip — override overlay scroll clip */
.modal-overlay > .modal-card.alias-modal-card {
  overflow: visible;
  max-height: min(92vh, 900px);
  width: min(96vw, 700px);
  padding: 16px 22px;
  box-sizing: border-box;
}
.modal-overlay > .modal-card.alias-modal-card .modal-body {
  overflow: visible;
  padding-left: 2px;
  padding-right: 2px;
}
.modal-overlay > .modal-card.alias-modal-card .modal-body input[type="text"],
.modal-overlay > .modal-card.alias-modal-card .modal-body input[type="password"] {
  box-sizing: border-box;
  max-width: 100%;
}
.modal-overlay > .modal-card.modal-card-animate {
  animation: modal-card-in 0.16s ease-out;
}

/* ─── Combined terpene bars ─── */
.combined-terp-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 140px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  text-align: center;
}
.combined-terp-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 9px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.legend-dot.legend-sample { background: rgba(99,102,241,0.55); }
.legend-dot.legend-hist { background: rgba(99,102,241,0.25); }
.cterp-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: stretch;
  width: 100%;
}
.cterp-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}
.cterp-bar {
  height: 8px;
  border-radius: 3px;
  overflow: hidden;
  background: #f3f4f6;
}
.cterp-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.2s;
}
.cterp-dashed {
  border: 1px dashed #d1d5db;
  background: none;
  box-sizing: border-box;
  height: 6px;
  margin-top: 1px;
}

/* ─── SVG Sparklines ─── */
.sparkline-cell {
  min-width: 308px;
  padding: 4px;
  position: relative;
  overflow: visible;
  vertical-align: middle;
  text-align: center;
}
.sparkline-zoom-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  padding: 4px 6px;
  margin: -4px -6px;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}
/* Gentle hover: subtle tint + soft shadow ring, no transform/scale (which
   blurred the SVG text). The chart stays crisp at native size. */
.sparkline-cell:hover .sparkline-zoom-wrap {
  background-color: rgba(15, 122, 54, 0.05);
  box-shadow: 0 0 0 1px rgba(15, 122, 54, 0.18), 0 4px 12px rgba(0, 0, 0, 0.05);
}
.sparkline-svg {
  width: 300px;
  height: 100px;
  display: block;
}
.sparkline-svg .spark-y {
  font-size: 8.5px;
  font-weight: 600;
  font-family: system-ui, -apple-system, sans-serif;
}
.sparkline-svg .spark-y.spark-y-avg {
  font-weight: 800;
}
.sparkline-svg .spark-x {
  font-size: 7px;
  fill: var(--color-text-muted);
  font-weight: 600;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Let expanded sparklines paint above the sample table when possible */
#coa-results-section .detail-cell {
  overflow: visible;
}

/* ─── Sparkline modal ─── */
.sparkline-modal-card {
  width: 700px;
  max-width: 90vw;
}
.sparkline-modal-chart {
  position: relative;
}
/* The canvas lives in its own fixed-height box so Chart.js can size the plot
   (incl. the x-axis tick labels) entirely within it. The "click a point" hint
   sits ABOVE this box, not inside it — otherwise the canvas at height:100%
   overflowed by the hint's height and the x-axis labels got clipped. */
.sparkline-modal-canvas-wrap {
  position: relative;
  height: 300px;
}
.sparkline-modal-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ─── Sample Detail (sparkline flip + Explorer row-click) ─── */
@keyframes sd-fade-in { from { opacity: 0; } to { opacity: 1; } }
.sample-detail-modal-card { width: 700px; max-width: 90vw; }
#sparkline-detail-view,
#sample-detail-modal-body { max-height: 78vh; overflow-y: auto; }
/* Smooth the flip: fade each side in on show, and hold a min-height close to
   the chart's 320px so the modal doesn't jump-then-grow during the swap. */
#sparkline-detail-view { min-height: 320px; animation: sd-fade-in .18s ease; }
.sparkline-modal-chart { animation: sd-fade-in .18s ease; }
.sd-root { font-size: 13px; color: var(--color-text-primary); }
.sd-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.sd-back { color: var(--color-brand, #2563eb); font-size: 12px; text-decoration: none; white-space: nowrap; }
.sd-back:hover { text-decoration: underline; }
.sd-title { font-weight: 700; text-align: center; flex: 1; }
.sd-pill { font-size: 10px; padding: 1px 8px; border-radius: var(--radius-full, 999px); margin-left: 6px; }
.sd-pass-pill { background: var(--color-success-bg); color: var(--color-success); }
.sd-fail-pill { background: var(--color-danger-bg); color: var(--color-danger); }
.sd-alias {
  font-size: 10px; padding: 1px 6px; border-radius: var(--radius-full, 999px);
  background: var(--color-border-light); color: var(--color-text-secondary);
}
.sd-identity { color: var(--color-text-muted); font-size: 11px; margin-bottom: 8px; }
.sd-trend {
  background: var(--color-border-light); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 7px 10px; margin-bottom: 10px; font-size: 12px;
}
.sd-up { color: var(--color-success); }
.sd-down { color: var(--color-danger); }
.sd-section { margin-bottom: 12px; }
.sd-section .label {
  text-transform: uppercase; font-size: 10px; letter-spacing: .04em;
  color: var(--color-text-muted); margin-bottom: 6px;
}
.sd-stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sd-stat {
  background: var(--color-border-light); border-radius: 5px; padding: 5px 7px;
  display: flex; flex-direction: column;
}
.sd-stat-label { font-size: 10px; color: var(--color-text-muted); }
.sd-stat-val { font-weight: 600; }
.sd-minor { margin-top: 8px; }
.sd-minor > summary { cursor: pointer; font-size: 11px; color: var(--color-text-secondary); }
.sd-minor .sd-stat-grid { margin-top: 6px; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-chip {
  font-size: 11px; padding: 3px 9px; border-radius: var(--radius-full, 999px);
  border: 1px solid var(--color-border); background: #fff; cursor: pointer;
  color: var(--color-text-secondary);
}
.sd-chip.sd-pass { background: var(--color-success-bg); color: var(--color-success); border-color: transparent; }
.sd-chip.sd-fail { background: var(--color-danger-bg); color: var(--color-danger); border-color: transparent; font-weight: 600; }
.sd-chip.sd-unknown { background: var(--color-border-light); color: var(--color-text-muted); }
.sd-chip.sd-chip-open { outline: 2px solid var(--color-border-grid); }
.sd-panel-detail { margin-top: 8px; }
.sd-analyte-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.sd-analyte-table th, .sd-analyte-table td {
  text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--color-border-light);
}
.sd-analyte-table th { color: var(--color-text-muted); font-weight: 600; }
.sd-analyte-table .sd-pass { color: var(--color-success); }
.sd-analyte-table .sd-fail { color: var(--color-danger); font-weight: 600; }
.sd-analyte-table .sd-unknown { color: var(--color-text-muted); }
.sd-footer {
  display: flex; flex-wrap: wrap; gap: 14px; padding-top: 10px;
  border-top: 1px solid var(--color-border); font-size: 12px;
}
.sd-footer a { color: var(--color-brand, #2563eb); text-decoration: none; }
.sd-footer a:hover { text-decoration: underline; }
.explorer-row { cursor: pointer; }
.explorer-row:hover { background: var(--color-border-light); }

/* ─── Comment bubble (unified; resets global green `button` styles) ─── */
.comment-btn {
  /* Override global `button` + `button:hover` brand background */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 4px 8px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-shadow: none;
}
.comment-btn:hover {
  background: var(--color-border);
  color: var(--color-text-secondary);
  border-color: transparent;
}
.comment-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.comment-btn.has-comment {
  color: var(--color-accent);
}
.comment-btn.has-comment:hover {
  background: var(--color-border);
  color: var(--color-accent);
}
.comment-dot {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.comment-cell {
  text-align: center;
}
.comment-preview-cell {
  font-size: 12px;
  color: var(--color-text-muted);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Actions column (COA Review + Lab QC & Review) ───────────────
   Three uniform pill-shaped icon buttons (comment, broaden sparkline,
   combine strains). Sized + styled to match the .filter-pill pattern
   used in Analytics → Historical (gray surface, full radius, gentle
   hover). All three buttons share the exact same visual rules to stay
   uniform; per-button differences live only in the icon itself.        */
.actions-cell {
  text-align: center;
  white-space: nowrap;
}
.actions-cell-inner {
  /* Default: a single compact row. Shared by inventory (tracking/catalog/
     orders) and prelim actions cells, which have a few inline controls. The
     COA Review results table opts into a 2x2 grid below (it has 4 buttons). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* COA Review results actions = 4 buttons in a 2x2 grid. Scoped to that table so
   it does not leak into other actions cells (e.g. inventory, which then wrapped
   its reorder/edit/status onto a second line and grew the row height). */
#coa-results-table .actions-cell-inner {
  display: grid;
  grid-template-columns: repeat(2, 28px);
  justify-content: center;
  gap: 6px;
}
.actions-cell-inner .comment-btn,
.actions-cell-inner .broaden-btn,
.actions-cell-inner .combine-strains-btn,
.actions-cell-inner .history-btn {
  /* Reset any inherited global button background/colour first */
  appearance: none;
  background: var(--color-surface-2, var(--color-surface-2));
  border: 1px solid var(--color-border, var(--color-border));
  color: var(--color-text-secondary, var(--color-text-secondary));
  border-radius: var(--radius-full, 999px);
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}
.actions-cell-inner .comment-btn svg,
.actions-cell-inner .broaden-btn svg,
.actions-cell-inner .combine-strains-btn svg,
.actions-cell-inner .history-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}
.actions-cell-inner .comment-btn:hover,
.actions-cell-inner .broaden-btn:hover,
.actions-cell-inner .combine-strains-btn:hover,
.actions-cell-inner .history-btn:hover {
  background: var(--color-border-light, var(--color-border-light));
  border-color: var(--color-border-grid, var(--color-border-grid));
  color: var(--color-text-primary, var(--color-text-primary));
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.actions-cell-inner .comment-btn:active,
.actions-cell-inner .broaden-btn:active,
.actions-cell-inner .combine-strains-btn:active,
.actions-cell-inner .history-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.actions-cell-inner .comment-btn:focus-visible,
.actions-cell-inner .broaden-btn:focus-visible,
.actions-cell-inner .combine-strains-btn:focus-visible,
.actions-cell-inner .history-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.15));
}
.actions-cell-inner .comment-btn.has-comment {
  color: var(--color-accent, var(--color-accent));
  border-color: color-mix(in srgb, var(--color-accent, var(--color-accent)) 35%, transparent);
}
.actions-cell-inner .comment-dot {
  top: 2px;
  right: 2px;
}

/* ─── Broaden Sparkline popover ────────────────────────────────── */
.broaden-popover {
  position: absolute;
  z-index: 1100;
  width: min(560px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--color-border, var(--color-border));
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
  padding: 0;
  font-size: var(--text-sm, 13px);
}
.broaden-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border, var(--color-border));
}
.broaden-popover-title { font-weight: 600; color: var(--color-text-primary, var(--color-text-primary)); }
.broaden-popover-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--color-text-muted, var(--color-text-muted));
  padding: 0 4px;
}
.broaden-popover-close:hover { background: transparent; color: var(--color-text-primary, var(--color-text-primary)); }
.broaden-popover-hint {
  margin: 10px 14px 6px;
  color: var(--color-text-secondary, var(--color-text-secondary));
  font-size: var(--text-xs, 12px);
}
.broaden-popover-row {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px 10px;
}
.broaden-popover-input {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--color-border, var(--color-border));
  border-radius: 6px;
  font-size: var(--text-sm);
  background: #fff;
  color: var(--color-text-primary, var(--color-text-primary));
}
.broaden-popover-input:focus {
  outline: none;
  border-color: var(--color-brand, var(--color-brand));
  box-shadow: 0 0 0 3px rgba(15, 122, 54, 0.12);
}
.broaden-popover-search-btn,
.broaden-popover-apply-btn,
.broaden-popover-cancel-btn {
  padding: 6px 12px;
  font-size: var(--text-sm);
  border-radius: 6px;
  border: 1px solid var(--color-border, var(--color-border));
  background: var(--color-surface-2, var(--color-surface-2));
  color: var(--color-text-primary, var(--color-text-primary));
  cursor: pointer;
  font-weight: 600;
}
.broaden-popover-search-btn:hover,
.broaden-popover-cancel-btn:hover { background: var(--color-border-light, var(--color-border-light)); color: var(--color-text-primary, var(--color-text-primary)); }
.broaden-popover-apply-btn {
  background: var(--color-brand, var(--color-brand));
  border-color: var(--color-brand, var(--color-brand));
  color: #fff;
}
.broaden-popover-apply-btn:hover { background: var(--color-brand-hover, var(--color-brand-hover)); }
.broaden-popover-results {
  padding: 0 14px;
  max-height: 280px;
  overflow-y: auto;
}
/* Selection header row: summary text + All/None controls */
.broaden-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--color-border-light, var(--color-border-light));
  margin-bottom: 4px;
}
.broaden-selection-summary {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  flex: 1;
}
.broaden-select-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.broaden-select-controls button {
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid var(--color-border, var(--color-border));
  background: var(--color-surface-2, var(--color-surface-2));
  color: var(--color-text-secondary, var(--color-text-secondary));
  cursor: pointer;
  line-height: 1.6;
}
.broaden-select-controls button:hover {
  background: var(--color-border-light, var(--color-border-light));
  color: var(--color-text-primary, var(--color-text-primary));
}
/* Checkbox list */
.broaden-check-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 6px;
}
.broaden-check-item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  transition: background 0.1s;
}
.broaden-check-item:hover { background: var(--color-surface-2, var(--color-surface-2)); }
.broaden-check-item input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-brand, var(--color-brand));
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.broaden-check-name {
  flex: 1;
  color: var(--color-text-primary);
  word-break: break-word;
}
.broaden-check-count {
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.broaden-popover-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--color-border-light, var(--color-border-light));
}

/* ─── Combine Strains (Sample Aliases) inline modal ─────────────── */
.alias-cs-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
}
.alias-cs-modal-card {
  width: min(640px, 92vw);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.alias-cs-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, var(--color-border));
}
.alias-cs-modal-title { margin: 0; font-size: var(--text-base, 14px); font-weight: 600; }
.alias-cs-modal-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--color-text-muted);
}
.alias-cs-modal-close:hover { background: transparent; color: var(--color-text-primary, var(--color-text-primary)); }
.alias-cs-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.alias-cs-field-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); }
.alias-cs-input {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--color-border, var(--color-border));
  border-radius: 6px; font-size: var(--text-sm); background: #fff;
}
.alias-cs-input:focus {
  outline: none; border-color: var(--color-brand, var(--color-brand));
  box-shadow: 0 0 0 3px rgba(15, 122, 54, 0.12);
}
.alias-cs-add-row { display: flex; gap: 6px; }
.alias-cs-add-row .alias-cs-input { flex: 1; }
.alias-cs-add-btn {
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border, var(--color-border));
  background: var(--color-surface-2, var(--color-surface-2));
  color: var(--color-text-primary, var(--color-text-primary));
  cursor: pointer; font-weight: 600;
}
.alias-cs-add-btn:hover:not(:disabled) { background: var(--color-border-light, var(--color-border-light)); color: var(--color-text-primary, var(--color-text-primary)); }
.alias-cs-add-btn:disabled {
  background: var(--color-border-light, var(--color-border-light));
  color: var(--color-text-muted, #9ca3af);
  border-color: var(--color-border-light, var(--color-border-light));
  cursor: not-allowed;
  opacity: 0.6;
}
.alias-cs-names-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 40px;
  padding: 8px;
  border: 1px dashed var(--color-border, var(--color-border));
  border-radius: 6px;
}
.alias-cs-name-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 10px;
  background: #e0e7ff; color: #3730a3;
  border-radius: 999px; font-size: var(--text-xs); font-weight: 600;
  max-width: 100%; word-break: break-word;
}
.alias-cs-name-chip-x {
  background: none; border: none; color: #4338ca;
  cursor: pointer; font-size: 14px; line-height: 1;
  padding: 0 4px; border-radius: 50%;
}
.alias-cs-name-chip-x:hover { color: var(--color-danger); background: rgba(220,38,38,0.08); }
.alias-cs-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border, var(--color-border));
  background: var(--color-surface-2, var(--color-surface-2));
}
.alias-cs-modal-footer .btn-cancel,
.alias-cs-modal-footer .btn-save {
  padding: 6px 14px; border-radius: 6px; font-weight: 600;
  font-size: var(--text-sm); cursor: pointer; border: 1px solid var(--color-border, var(--color-border));
}
.alias-cs-modal-footer .btn-cancel { background: #fff; color: var(--color-text-primary); }
.alias-cs-modal-footer .btn-save  { background: var(--color-brand, var(--color-brand)); color: #fff; border-color: var(--color-brand); }
.alias-cs-modal-footer .btn-save:hover { background: var(--color-brand-hover, var(--color-brand-hover)); color: #fff; }
.alias-cs-modal-footer .btn-cancel:hover { background: var(--color-border-light, var(--color-border-light)); color: var(--color-text-primary, var(--color-text-primary)); }
.alias-cs-edit-banner {
  font-size: var(--text-xs); color: var(--color-text-secondary);
  background: var(--color-warning-bg, var(--color-warning-bg));
  border: 1px solid color-mix(in srgb, var(--color-warning, #b45309) 25%, transparent);
  padding: 6px 10px; border-radius: 6px;
}

/* ─── Comment left-anchored popover (unified) ─── */
.comment-popover {
  position: absolute;
  width: 320px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.14);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  animation: commentPopIn 0.12s ease-out;
}
@keyframes commentPopIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.comment-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}
.comment-popover-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comment-popover-close {
  background: #e4e8f0;
  color: var(--color-text-primary);
  border: 0;
  border-radius: var(--modal-close-radius);
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  min-width: var(--modal-close-size);
  min-height: var(--modal-close-size);
  padding: 0;
  font-size: var(--modal-close-font-size);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: inherit;
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
}
.comment-popover-close:hover {
  background: #e4e8f0;
  color: var(--color-text-primary);
  box-shadow: var(--modal-close-shadow-hover);
}
.comment-popover-textarea {
  margin: 12px 16px 0;
  width: calc(100% - 32px);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
}
.comment-popover-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.comment-popover-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
}
.comment-popover-save {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.comment-popover-save:hover { background: var(--color-brand-hover); }

.comment-log-container { padding: 0 16px 12px; }
.comment-log {
  margin-top: 10px;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.comment-entry {
  background: #f9fafb;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 7px 10px;
}
.comment-entry-text {
  font-size: 13px;
  color: #1f2937;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.comment-entry-ts {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 3px;
}

/* ─── Manifest action buttons ─── */
.manifest-actions {
  white-space: nowrap;
  vertical-align: middle;
}
.manifest-actions-inner {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.manifest-complete-btn {
  background: var(--color-success);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.manifest-complete-btn:hover {
  background: #047857;
}
.manifest-delete-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
  color: var(--color-text-muted);
}
.manifest-delete-btn:hover {
  background: var(--color-danger-bg);
  border-color: #fca5a5;
  color: var(--color-danger);
}
.manifest-uncomplete-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.manifest-uncomplete-btn:hover {
  background: var(--color-warning-bg);
  border-color: #fbbf24;
  color: #92400e;
}
.manifest-restore-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.manifest-restore-btn:hover {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1e40af;
}

/* ─── METRC fetch banner ─── */
.metrc-fetch-banner {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  color: #92400e;
  font-size: 13px;
  cursor: pointer;
}
.metrc-fetch-banner:hover {
  background: var(--color-warning-bg);
}

/* ─── METRC fetch modal form ─── */
.modal-body {
  /* Horizontal padding (>= the 3px focus ring) so an input flush to the body
     edge doesn't get its focus glow clipped when the body scrolls
     (overflow-y:auto forces overflow-x to clip). */
  padding: 16px 4px 8px;
}
.modal-body label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-top: 10px;
}
.modal-body input[type="text"],
.modal-body input[type="password"] {
  width: 100%;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
}
.primary-btn {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.primary-btn:hover { background: var(--color-brand-hover); }

/* ─── Alias chips ─── */
.alias-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-muted, #f1f5f9);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  margin: 2px 2px;
  white-space: nowrap;
  max-width: 100%;
}
.alias-chip-client {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.alias-chip.removable {
  padding-right: 6px;
}

/* ─── Alias autocomplete (rich) ─── */
.alias-search-wrap {
  position: relative;
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
/* (alias modal sizing lives on .modal-overlay > .modal-card.alias-modal-card above) */
.alias-search-wrap > input {
  flex: 1;
}
.alias-add-btn {
  padding: 6px 12px;
  font-size: 12px;
}
.alias-hint {
  margin: 6px 0 0;
  font-size: 11px;
}
.alias-suggest-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1100;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}
.alias-suggest-dropdown.drop-up {
  top: auto;
  bottom: calc(100% + 4px);
}
.alias-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
.alias-suggest-item:last-child { border-bottom: none; }
.alias-suggest-item:hover,
.alias-suggest-item.is-active {
  background: #eef2ff;
}
.alias-suggest-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.alias-suggest-clients {
  font-size: 11px;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alias-suggest-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.alias-chip-x {
  background: none;
  border: none;
  color: #6366f1;
  cursor: pointer;
  font-size: 14px;
  margin-left: 2px;
  vertical-align: middle;
  line-height: 1;
}
.alias-chip-x:hover { color: var(--color-danger); }
.alias-names-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 28px;
  padding: 4px 0;
}
/* Alias table actions — use same button language as the rest of Settings */
#aliases-table .alias-actions-cell {
  white-space: nowrap;
}
#aliases-table .alias-edit-btn,
#aliases-table .alias-del-btn {
  margin-right: 6px;
}
#aliases-table .alias-edit-btn:last-child,
#aliases-table .alias-del-btn:last-child {
  margin-right: 0;
}

/* ─── Manifest eval button (clickable badge) ─── */
.manifest-eval-btn {
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.manifest-eval-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
}
.manifest-eval-btn.eval-pass,
.manifest-eval-btn.eval-pass:hover {
  background: #dcfce7;
  color: #166534;
}
.manifest-eval-btn.eval-warn,
.manifest-eval-btn.eval-warn:hover {
  background: var(--color-warning-bg);
  color: #92400e;
}
.manifest-eval-btn.eval-error,
.manifest-eval-btn.eval-error:hover {
  background: var(--color-danger-bg);
  color: #991b1b;
}

/* ─── Manifest summary modal ─── */
.coa-detail-list + .coa-detail-list {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.assign-manifest-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.assign-manifest-input {
  width: 130px;
  padding: 3px 8px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-family: inherit;
}
.assign-manifest-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.assign-manifest-btn {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  cursor: pointer;
  white-space: nowrap;
}
.assign-manifest-btn:hover {
  background: var(--color-brand-hover);
}

.sparkline-config-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
}
.sparkline-config-table th {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 8px 10px;
  border-bottom: 2px solid var(--color-border);
}
.sparkline-config-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6;
  text-align: center;
}
.sparkline-config-table tr:hover td {
  background: #f9fafb;
}
.sparkline-bt-name {
  font-weight: 500;
  color: var(--color-text-secondary);
}
.sparkline-config-table .center {
  text-align: center;
}
.sparkline-bt-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Lab QC default-columns picker (Settings → Analytics) */
.prelim-cols-group {
  margin-top: 12px;
}
.prelim-cols-subhead {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}
.prelim-cols-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px;
  background: var(--color-surface-1);
}
.prelim-cols-picker .col-config-item {
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════
   Toast Notifications
   ═══════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.2s ease-out;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.toast-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}
.toast-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}
.toast-info {
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.toast-exit {
  animation: toast-out 0.15s ease-in forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ═══════════════════════════════════════════════════════════
   Confirmation Dialog (replaces native confirm())
   ═══════════════════════════════════════════════════════════ */
.confirm-dialog .modal-card {
  max-width: 400px;
  padding: var(--space-6);
  text-align: center;
}
.confirm-dialog .confirm-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.confirm-dialog .confirm-message {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  white-space: pre-line;
}
.confirm-dialog .confirm-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}
.confirm-dialog .confirm-cancel {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.confirm-dialog .confirm-cancel:hover {
  background: var(--color-border);
}
.confirm-dialog .confirm-danger {
  background: var(--color-danger);
  color: #fff;
}
.confirm-dialog .confirm-danger:hover {
  background: var(--color-danger-hover);
}

/* ═══════════════════════════════════════════════════════════
   Loading Skeletons
   ═══════════════════════════════════════════════════════════ */
.skeleton-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.skeleton-cell {
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-border-light) 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-cell.w-sm  { width: 60px; }
.skeleton-cell.w-md  { width: 120px; }
.skeleton-cell.w-lg  { width: 200px; }
.skeleton-cell.w-xl  { width: 300px; }

@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════
   Empty States
   ═══════════════════════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
  opacity: 0.3;
}
.empty-state-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}
.empty-state-hint {
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════
   Inline Error Banner
   ═══════════════════════════════════════════════════════════ */
.inline-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════
   Status Pill Badges
   ═══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.badge-pass    { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error   { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-pending { background: var(--color-surface-2);  color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-info    { background: var(--color-accent-bg, #dbeafe); color: var(--color-accent); }

.badge-pulse {
  animation: badge-pulse 0.6s ease-out;
}
@keyframes badge-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   Export Engine
   ═══════════════════════════════════════════════════════════ */
.export-controls { display: flex; flex-direction: column; gap: var(--space-3); }
.export-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.export-row label { font-weight: 500; min-width: 70px; }
.export-row select { flex: 1; max-width: 300px; }

.export-upload-area {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--color-surface-2);
}
.export-upload-area:hover,
.export-upload-area.dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-bg, rgba(59,130,246,0.08));
}
.export-upload-area p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.export-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  justify-content: center;
}
.export-file-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  font-size: var(--text-xs);
}
.export-file-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-danger);
  line-height: 1;
  padding: 0 2px;
}
.export-actions { display: flex; gap: var(--space-2); }

.progress-wrap { margin-top: var(--space-3); }
.progress-bar {
  height: 8px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}
.progress-msg {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.export-result-summary {
  padding: var(--space-3);
  background: var(--color-success-bg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.export-result-actions { display: flex; gap: var(--space-2); }

/* ═══════════════════════════════════════════════════════════
   Template Builder — Tile System (Settings page)
   ═══════════════════════════════════════════════════════════ */
.template-builder { margin-top: var(--space-4); }

.template-list-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}
.template-list-table th,
.template-list-table td {
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.template-list-table th {
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.tile-editor-label {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
}

.tile-pool,
.tile-selected {
  min-height: 48px;
  padding: var(--space-2);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  transition: border-color 0.2s;
}
.tile-pool {
  display: block;
}
.tile-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tile-pool.drag-over,
.tile-selected.drag-over {
  border-color: var(--color-accent);
  background: var(--color-accent-bg, rgba(59,130,246,0.08));
}

.tile {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: box-shadow 0.15s, opacity 0.15s;
}
.tile:hover { box-shadow: var(--shadow-sm); }
.tile.dragging { opacity: 0.4; }

.tile-source {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  opacity: 0.7;
}
.tile-source-coa { color: var(--color-accent); }
.tile-source-manifest { color: var(--color-warning); }
.tile-source-static { color: var(--color-success, #16a34a); }

.tile-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-danger);
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
}
.tile-remove:hover { opacity: 1; }

.tile-editor-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tile-rename-input {
  font-size: var(--text-xs);
  padding: 2px 6px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  width: 100px;
}
.tile-value-input {
  border-color: var(--color-success, #16a34a);
}

.tile-static-val {
  font-size: 9px;
  color: var(--color-success, #16a34a);
  background: rgba(22,163,74,0.08);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  margin-left: 2px;
}
.tile-static-val em {
  font-style: italic;
  opacity: 0.6;
}

.tile-edit-wrap {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* ─── Tile Pool Test Groups ──────────────────────────── */
.tile-group {
  margin-bottom: var(--space-3, 12px);
}
.tile-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg-subtle, #f5f5f7);
  cursor: pointer;
  user-select: none;
  margin-bottom: 6px;
  border: 1px solid var(--color-border);
  transition: background 0.12s;
}
.tile-group-header:hover {
  background: var(--color-bg-hover, #ececf0);
}
.tile-group-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
  flex: 1;
}
.tile-group-count {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.tile-group-chevron {
  font-size: 10px;
  color: var(--color-text-secondary);
  transition: transform 0.15s;
}
.tile-group.expanded .tile-group-chevron {
  transform: rotate(90deg);
}
.tile-group-add-all {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: 4px;
  padding: 2px 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.tile-group-add-all:hover {
  background: var(--color-brand);
  color: #fff;
}
.tile-group-tiles {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 0 4px;
}
.tile-group.expanded .tile-group-tiles {
  display: flex;
}

.template-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.template-name-row label { font-weight: 500; }
.template-name-row input { flex: 1; max-width: 300px; }

/* ═══════════════════════════════════════════════════════════
   Export Toolbar (COA Review — Reviewed tab)
   ═══════════════════════════════════════════════════════════ */
.export-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
/* Match Historical / Prelim row selects (34px band, border, custom caret from global select rule) */
.export-toolbar select {
  max-width: min(280px, 100%);
  min-width: 120px;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-inline-start: 10px;
  padding-inline-end: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath fill='%2364748b' d='M6 2.5L10 7.5H2L6 2.5zm0 11L2 8.5h8L6 13.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 16px;
}
.col-check { width: 36px; text-align: center; }
.col-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand);  /* green, matching .manifest-select-checkbox */
  cursor: pointer;
}
.export-row-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: var(--text-xs);
  cursor: pointer;
  color: var(--color-accent);
  transition: background 0.15s;
}
.export-row-btn:hover { background: var(--color-accent-bg, rgba(59,130,246,0.08)); }

/* ═══════════════════════════════════════════════════════════
   Auth Pages (Login / Sign Up)
   ═══════════════════════════════════════════════════════════ */
.auth-page {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-border-light) 0%, #e2e8f0 100%);
  box-sizing: border-box;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-8);
  border: 1px solid var(--color-border-light);
}
/* Narrow centered column for fields + submit (login, signup, setup) */
.auth-card > .auth-error,
.auth-card > .auth-success {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.auth-card form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.auth-card form .auth-field,
.auth-card form .auth-submit {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}
.auth-card form .auth-field {
  align-self: center;
}
.auth-card form .auth-submit {
  align-self: center;
}
.auth-heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 var(--space-1);
}
.auth-subheading {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 var(--space-6);
}
.auth-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.auth-error svg { flex-shrink: 0; }
.auth-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.auth-field {
  margin-bottom: var(--space-4);
}
.auth-field label {
  display: block;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.auth-field input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-surface-1);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}
.auth-field input::placeholder {
  color: var(--color-text-muted);
}
.auth-field .field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.auth-submit {
  width: 100%;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  margin-top: var(--space-2);
}
.auth-submit:hover {
  background: linear-gradient(135deg, var(--color-brand-hover), #0b5e29);
  box-shadow: 0 4px 12px rgba(15, 122, 54, 0.3);
}
.auth-submit:active {
  transform: translateY(1px);
}
.auth-footer {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.auth-footer a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}
.auth-footer a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   Dashboard — Sample Tracking
   ═══════════════════════════════════════════════════════════ */

.week-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.week-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  cursor: pointer;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.week-nav-btn:hover {
  background: var(--color-surface-2);
  border-color: var(--color-brand);
}
.week-nav-label {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 260px;
  text-align: center;
}
.week-nav-today {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-1);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast);
}
.week-nav-today:hover {
  background: var(--color-brand-muted);
  color: var(--color-brand);
}
.week-nav-export {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-1);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast);
}
.week-nav-export:hover {
  background: #e8f5e9;
  color: #2e7d32;
}
.week-nav-configure {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-1);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.week-nav-configure:hover,
.week-nav-configure.active {
  background: var(--color-surface-2);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Configure View popover ─────────────────────────────────── */
.col-config-popover {
  position: fixed;
  z-index: 9990;
  width: 216px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 420px;
}
.col-config-header {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 10px 14px 6px;
  background: var(--color-surface-alt, var(--color-surface-2));
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.col-config-scroll {
  overflow-y: auto;
  flex: 1;
  padding: 6px 0;
}
.col-config-section-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  padding: 4px 14px 2px;
  margin-top: 2px;
}
.col-config-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  font-size: var(--text-xs);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
  border-radius: 0;
}
.col-config-item:hover { background: var(--color-surface-2); }
.col-config-item input[type="checkbox"] {
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--color-accent);
  margin: 0;
}
.col-config-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}
.col-config-footer {
  padding: 6px 14px 8px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt, var(--color-surface-2));
  flex-shrink: 0;
}
.col-config-reset {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: underline;
}
.col-config-reset:hover { color: var(--color-danger); }

.week-nav-new-order {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-left: auto;
}
.week-nav-new-order:hover {
  background: var(--color-brand-hover);
}

/* Day footer row */
.day-footer td {
  background: var(--color-surface-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-3);
  border-top: 2px solid var(--color-border-grid);
  border-bottom: 2px solid var(--color-border-grid);
  border-right: none !important;
}
.day-footer-label {
  text-transform: uppercase;
}
.day-footer td.day-footer-count-cell {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: none;
  letter-spacing: 0;
  padding: var(--space-2) var(--space-1);
}

/* Week tally row */
.week-tally td {
  background: var(--color-surface-2);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  border-top: 2px solid var(--color-border-grid);
  border-bottom: 2px solid var(--color-border-grid);
}
.week-tally td.tally-label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* Dashboard table wrapper: NO overflow set here so that thead sticky targets the
   viewport, not this container.  Horizontal overflow is handled by the page-wide
   parent which is allowed to scroll sideways on narrow viewports. */
.dash-table-wrap {
  /* intentionally no overflow — keeps sticky anchored to the viewport */
}

/* Main table — border-collapse:separate is REQUIRED for position:sticky on thead th. */
.dash-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
/* Sticky header row that tracks the viewport, not a scroll container. */
.dash-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border-grid-header);
  border-right: 1px solid var(--color-border-grid-header);
  border-top: none;
  border-left: none;
  padding: var(--space-1) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}
.dash-table thead th:first-child { border-left: 1px solid var(--color-border-grid-header); }
.dash-table td {
  padding: var(--space-1) var(--space-1);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-grid);
  border-right: 1px solid var(--color-border-grid);
  border-top: none;
  border-left: none;
  vertical-align: middle;
  text-align: center;
}
.dash-table td:first-child { border-left: 1px solid var(--color-border-grid); }
/* Uniform data-row height: prelim-configured rows render a deadline+link+checkbox
   stack (~58px) while rows without a prelim are ~45px, so the grid looked ragged.
   Pin data rows to the taller value (vertical-align:middle centers content); the
   short totals rows (.day-footer) are intentionally excluded. */
.dash-table tbody tr.dash-data-row td { height: 39px; }

/* Field-level hover only: highlight just the cell under the cursor, not the whole
   row. Neutralize the generic `tbody tr:hover` row tint for the dashboard. */
.dash-table tbody tr:hover { background: transparent; }
.dash-table td:hover {
  background: var(--color-surface-2);
}

/* Column widths: every column has a fixed pixel width EXCEPT Client.
 * Client has NO width declaration → in table-layout:fixed it becomes the
 * auto/flex column that absorbs all unclaimed horizontal space. When other
 * columns are hidden via display:none (applyColVisibility in dashboard.js),
 * the freed space flows automatically into Client. Single source of truth. */
.dash-table .col-date     { width: 62px; text-align: center; }
.dash-table td.col-date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dash-table .col-time     { width: 82px; }
/* Client default width is 140px. When toggleable columns are hidden,
 * applyColVisibility() in dashboard.js increases this width by exactly the
 * freed pixels so the freed space goes only to Client (not Order ID, etc.). */
.dash-table .col-client   { width: 140px; text-align: center; }
.client-hover-name {
  cursor: default;
  border-bottom: 1px dashed var(--color-border);
}
.client-hover-name:hover {
  border-bottom-color: var(--color-brand);
  color: var(--color-brand);
}
.client-info-tip {
  position: fixed;
  z-index: 1100;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  width: 240px;
  pointer-events: none;
}
.client-info-tip.hidden { display: none; }
.client-info-tip .ci-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: var(--text-sm);
}
.client-info-tip .ci-row + .ci-row {
  border-top: 1px solid var(--color-border-light);
}
.client-info-tip .ci-lbl {
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  flex-shrink: 0;
  margin-right: 8px;
}
.client-info-tip .ci-val {
  color: var(--color-text-primary);
  text-align: right;
  word-break: break-word;
}
.dash-table .col-manifest { width: 88px; text-align: center; }
.dash-table .col-orderid  { width: 120px; text-align: center; }
.dash-table thead th.col-client,
.dash-table thead th.col-manifest,
.dash-table thead th.col-orderid { text-align: center; }
.dash-table .col-samples  { width: 34px; }
.dash-table .col-prelims  { width: 82px; }
.dash-table .col-ltb      { width: 40px; }
.dash-table .col-comment  { width: 36px; text-align: center; }
.dash-table .col-qa-expected { width: 72px; }
.dash-table td.col-qa-expected {
  padding: 2px 2px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.dash-table .col-qa-eval  { width: 68px; }
.dash-table td.col-qa-eval {
  overflow: visible;
  padding-left: 2px;
  padding-right: 4px;
}
.dash-table .col-qa-tat   { width: 56px; }
.dash-table td.col-qa-tat {
  overflow: hidden;
  padding-left: 2px;
  padding-right: 2px;
}
.dash-table td.col-qa-tat > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Manual order action buttons (edit / delete / finish) */
.manual-action-group {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.manual-action-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.manual-action-btn:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.manual-edit-btn:hover   { background: #e3f2fd; color: #1565c0; }
.manual-delete-btn:hover { background: #fce4ec; color: #c62828; }
.manual-finish-btn:hover { background: #e8f5e9; color: #2e7d32; }
.manual-finish-btn.finished {
  background: var(--color-success-bg);
  color: var(--color-success);
  cursor: default;
  pointer-events: none;
}

.dash-table thead th.ltb-group-dpm {
  background: color-mix(in srgb, var(--color-brand-muted) 40%, var(--color-surface-1));
  border-color: var(--color-border-grid-header);
}
.dash-table td.ltb-group-dpm {
  background: color-mix(in srgb, var(--color-brand-muted) 20%, transparent);
}
.dash-table td.ltb-group-dpm:hover {
  background: color-mix(in srgb, var(--color-brand-muted) 35%, var(--color-surface-2));
}

/* Manual order rows */
.manual-order-row td:first-child {
  border-left: 3px solid var(--color-brand);
}

/* Order ID cell layout */
.dash-table td.col-orderid {
  padding: var(--space-1) 2px;
}
.orderid-cell-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  width: 100%;
  box-sizing: border-box;
}
.orderid-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 3px 6px;
  font-size: var(--text-sm);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}
.orderid-input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: var(--focus-ring);
}
.col-orderid.no-link .orderid-input { flex: 1 1 100%; }

/* LIMS badge link */
.lims-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 3px;
  text-decoration: none;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-sm);
  margin-left: 0;
  flex: 0 0 auto;
  transition: background var(--transition-fast), color var(--transition-fast);
  vertical-align: middle;
}
.lims-badge:hover {
  background: var(--color-accent);
  color: #fff;
}
.lims-link-icon {
  display: block;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
}

/* LTB headers */
.ltb-header {
  writing-mode: vertical-lr;
  transform: rotate(215deg);
  white-space: nowrap;
  height: 90px;
  font-size: var(--text-xs);
  line-height: 1;
  display: inline-block;
  padding-bottom: var(--space-1);
}

.ltb-count {
  font-weight: 600;
  font-size: var(--text-sm);
}
.ltb-terp-sub {
  display: block;
  font-size: 10px;
  color: var(--color-brand);
  font-weight: 600;
  line-height: 1.1;
}

/* DPM badge */
.dpm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  /* Light blue (accent), not yellow: this circle is a workflow ACTION
     ("click to categorize"), not a TAT severity state. Yellow now means
     "due soon" on this grid, so an accent hue keeps the action distinct from
     the green/yellow/red deadline system and avoids a yellow-on-yellow clash. */
  background: var(--color-accent-bg);
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--text-xs);
  cursor: pointer;
  border: 1px solid var(--color-accent);
  transition: transform var(--transition-fast);
}
.dpm-badge:hover {
  transform: scale(1.1);
}
.dpm-reverse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1;
}
.dpm-reverse-btn:hover {
  /* Undo categorization is reversible and already confirm-gated, so it is not a
     destructive action — danger-red overstated its stakes and clashed with the
     delete affordance. Use a neutral utility emphasis instead. */
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border-color: var(--color-border-grid);
}

/* DPM / terp popovers — fixed so viewport flip/clamp + scroll reposition stay correct */
.dpm-popover {
  position: fixed;
  z-index: 50;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  /* Size to content so the sample-name column can grow to the longest name
     (no truncation); floor keeps the header/footer readable, ceiling keeps it
     on-screen, and overflow scrolls for the rare extreme name. */
  width: max-content;
  min-width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 360px;
  overflow: auto;
}
.dpm-popover-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.dpm-popover-header .dpm-popover-title {
  flex: 1;
  min-width: 0;
}
.dpm-popover-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.dpm-select-all {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.dpm-select-all:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}
/* Sample list as a table so the name column sizes to the longest name (shown
   in full, no truncation) and the METRC id + Sample (QBench) id sit in their
   own columns beside it rather than stacked. */
.dpm-sample-table {
  border-collapse: collapse;
  margin: 2px 0;
}
.dpm-popover-sample > td {
  padding: 3px 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;   /* override inherited center so names left-align */
}
.dpm-cell-check {
  width: 1px;
  padding-right: var(--space-2) !important;
}
.dpm-cell-check input[type="checkbox"] {
  display: block;
  margin: 0;
}
.dpm-sample-name {
  color: var(--color-text);
  padding-right: 24px !important;   /* gap before the ID columns */
}
.dpm-sample-metrc {
  font-family: var(--font-mono, "SF Mono", "Consolas", monospace);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
  padding-right: 16px !important;
}
.dpm-sample-qbench {
  font-family: var(--font-mono, "SF Mono", "Consolas", monospace);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  letter-spacing: -0.02em;
}
.dpm-sample-qbench .dpm-id-tag {
  font-family: var(--font-sans, inherit);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-right: 4px;
}
.dpm-popover-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.dpm-popover-actions button {
  flex: 1;
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  cursor: pointer;
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.dpm-popover-actions button:hover {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-color: var(--color-brand);
}
.dpm-popover-actions button.active {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-color: var(--color-brand);
}

/* Per-cell TAT deadline shading (cleared once the LTB's COA is complete).
   Element + 2 classes outranks the .ltb-group-dpm background. */
td.col-ltb.cell-tat-soon    { background: var(--color-tat-soon-bg); }
td.col-ltb.cell-tat-overdue { background: var(--color-tat-overdue-bg); }
/* Highlight only the FIELD under the cursor (no row-wide highlight). On a shaded
   tile, keep the SAME hue/chroma and only drop lightness, so it reads as a
   slightly darker version of the same yellow/red. Hex fallback first for browsers
   without relative-color oklch. td.<status>:hover is (0,3,1) > .dash-table td:hover. */
.dash-table td.cell-tat-soon:hover    { background: #FFFBB8; }
.dash-table td.cell-tat-overdue:hover { background: #EF5E5E; }

/* TAT */
.tat-green  { color: var(--color-success); font-weight: 600; }
.tat-yellow { color: var(--color-warning); font-weight: 600; }
.tat-red    { color: var(--color-danger);  font-weight: 600; }
.tat-provisional { font-style: italic; opacity: 0.85; }
.tat-clickable { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.tat-clickable:hover { opacity: 0.75; }

/* TAT breakdown popover — compact, anchored to the left of the TAT cell */
.tat-info-popover {
  position: absolute;
  z-index: 55;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-text-primary, var(--color-text-primary));
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transform: translateZ(0);
}
.prep-popover-label {
  display: inline-block;
  min-width: 42px;
  color: var(--color-text-secondary, var(--color-text-muted));
  font-weight: 600;
  margin-right: 6px;
}
.prep-popover-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.prep-popover-row + .prep-popover-row {
  margin-top: 2px;
}
.cell-conv-popover {
  font-variant-numeric: tabular-nums;
}
.tat-info-title {
  font-weight: 600;
  font-size: 10px;
  margin-bottom: 4px;
  color: var(--color-text-primary);
}
.tat-info-table {
  border-collapse: collapse;
  font-size: 10px;
}
.tat-info-table th {
  text-align: center;
  padding: 1px 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-weight: 600;
}
.tat-info-table td {
  padding: 1px 6px;
  text-align: center;
}

/* Expected deadline when COAs are done (Pass + TAT shown) — neutral, still readable */
.expected-tat-neutral {
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* Time input */
.time-input {
  width: 100%;
  max-width: 76px;
  padding: 2px 3px;
  font-size: var(--text-sm);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}
.time-input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Prelims cell ───────────────────────────────────────── */
.prelim-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--text-xs);
  padding: 0;
}
.prelim-deadline {
  text-align: center;
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: 1.15;
  padding-bottom: 1px;
}
.prelim-green  { color: var(--color-success,  #16a34a); }
.prelim-yellow { color: var(--color-warning-text, #92400e); }
.prelim-red    { color: var(--color-danger,   var(--color-danger)); }
.prelim-done   { color: var(--color-text-tertiary, #9ca3af); }
.prelim-na     { color: var(--color-text-tertiary, #9ca3af); }
.prelim-bottom {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--color-border);
  padding-top: 1px;
  min-height: 16px;
}
.prelim-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prelim-divider {
  width: 1px;
  background: var(--color-border);
  margin: 0 2px;
  flex-shrink: 0;
}
.prelim-link {
  font-size: var(--text-xs);
  color: var(--color-brand);
  text-decoration: underline;
  white-space: nowrap;
}
.prelim-link-empty { display: inline-block; }
/*
 * Prelim checkbox — SVG background-image approach.
 * Fully custom: no OS accent-colour overrides, no focus-state resets,
 * crisp at any DPI. Matches the rounded-square + round-stroke style.
 */
.prelim-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* unchecked: light grey rounded square border */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='1.5' width='17' height='17' rx='3.5'/%3E%3C/svg%3E");
}
.prelim-checkbox:checked::after { display: none; } /* cancel any inherited pseudo */

/* on-time: green fill + white checkmark */
.prelim-check-ontime:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='1.5' width='17' height='17' rx='3.5' fill='%2316a34a' stroke='%2316a34a' stroke-width='1.5'/%3E%3Cpolyline points='5,10.5 8.5,14 15,7' stroke='white' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
}

/* late: red fill + white checkmark */
.prelim-check-late:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='1.5' width='17' height='17' rx='3.5' fill='%23dc2626' stroke='%23dc2626' stroke-width='1.5'/%3E%3Cpolyline points='5,10.5 8.5,14 15,7' stroke='white' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
}

/* neutral (no deadline configured): accent-blue fill + white checkmark */
.prelim-check-neutral:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='1.5' width='17' height='17' rx='3.5' fill='%233b82f6' stroke='%233b82f6' stroke-width='1.5'/%3E%3Cpolyline points='5,10.5 8.5,14 15,7' stroke='white' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
}
.prelim-unconfigured {
  width: 100%;
  height: 100%;
  min-height: 36px;
  background:
    linear-gradient(to bottom right,
      transparent calc(50% - 0.5px),
      var(--color-border) calc(50% - 0.5px),
      var(--color-border) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
}

/* Checks popover (uses .comment-popover shell) */
.checks-popover .checks-popover-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}
.checks-popover .comment-popover-actions {
  padding: var(--space-2) var(--space-3) var(--space-3);
  justify-content: flex-start;
}
.checks-popover .comment-popover-header { gap: 6px; }
.checks-popover .comment-popover-title {
  flex: 1 1 auto;
  text-align: center;
}
.checks-popover-nav {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.checks-popover-nav:hover {
  background: var(--color-surface-2);
  border-color: var(--color-accent);
}
.checks-popover-nav[hidden] {
  display: none !important;
}
.checks-popover .checks-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.checks-popover .checks-field-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.checks-popover .checks-input {
  width: 100%;
  padding: 6px 8px;
  font-size: var(--text-sm);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}
.checks-popover .checks-input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* (comment-input removed — replaced by unified comment bubble/popover) */

/* Manifest link */
.manifest-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.manifest-link:hover {
  text-decoration: underline;
}

/* Eval badge */
.eval-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.eval-badge:hover { opacity: 0.8; }
.eval-badge.pass    { background: var(--color-success-bg); color: var(--color-success); }
.eval-badge.warn    { background: var(--color-warning-bg); color: var(--color-warning); }
.eval-badge.fail    { background: var(--color-danger-bg);  color: var(--color-danger); }
.eval-badge.pending { background: var(--color-surface-2); color: var(--color-text-muted); }

/* Wrapper positions the (i) icon at the top-right corner of the badge */
.eval-badge-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* (i) superscript icon at top-right of the Pend badge */
.eval-info-icon {
  position: absolute;
  top: -6px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--color-text-muted);
  background: var(--color-surface-1);
  color: var(--color-text-muted);
  font-size: 7px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.eval-info-icon:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-text-secondary);
}

/* Eval info popover — compact, anchored top-right of the badge */
.eval-info-popover {
  position: absolute;
  z-index: 55;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 6px 8px;
  white-space: nowrap;
}
.eval-info-popover .eval-info-title {
  font-weight: 600;
  font-size: 10px;
  margin-bottom: 4px;
  color: var(--color-text-primary);
}
.eval-info-popover .eval-info-table {
  border-collapse: collapse;
  font-size: 10px;
}
.eval-info-popover .eval-info-table th {
  text-align: center;
  padding: 1px 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-weight: 600;
}
.eval-info-popover .eval-info-table td {
  padding: 1px 6px;
  text-align: center;
}
.eval-info-done   { color: var(--color-success); font-weight: 600; }
.eval-info-partial { color: var(--color-warning); font-weight: 600; }
.eval-info-none   { color: var(--color-text-muted); }

.dash-empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* Manifest detail modal table */
.dash-modal-table {
  width: 100%;
  border-collapse: collapse;
}
.dash-modal-table th {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}
.dash-modal-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
  text-align: center;
}
.dash-modal-table td.modal-metrc-id {
  font-family: var(--font-mono, "SF Mono", "Consolas", monospace);
  font-size: 0.78rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ── Sample void treatment ─────────────────────────────────── */

.manifest-modal-summary {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: rgba(248, 113, 113, 0.06);
  border-bottom: 1px solid var(--color-border-light);
}
.void-summary-pill {
  display: inline-block;
  background: var(--color-danger-bg);
  color: #991b1b;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-right: 4px;
}

/* Action column */
.dash-modal-table th.modal-action-col {
  text-align: right;
  padding-right: var(--space-3);
  white-space: nowrap;
}
.dash-modal-table td.modal-action-cell {
  text-align: right;
  white-space: nowrap;
  padding-right: var(--space-3);
}

.sample-void-btn,
.sample-unvoid-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sample-void-btn:hover {
  background: var(--color-danger-bg);
  color: #991b1b;
  border-color: #fca5a5;
}
.sample-unvoid-btn:hover {
  background: var(--color-bg-subtle, #f3f4f6);
  color: var(--color-text);
}

.sample-row-voided td {
  color: #9ca3af;
  background: rgba(248, 113, 113, 0.04);
}
.sample-row-voided td:not(.modal-action-cell) {
  text-decoration: line-through;
}
.sample-row-voided-detail td {
  background: rgba(248, 113, 113, 0.04);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: left;
  padding: 4px var(--space-3) var(--space-2) var(--space-3);
}
.void-detail-label {
  font-weight: 600;
  color: #991b1b;
  margin-right: 4px;
}
.void-detail-meta {
  color: #9ca3af;
  margin-left: 6px;
}

.void-badge {
  display: inline-block;
  background: #991b1b;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  text-decoration: none !important;
}

.status-badge.status-void {
  background: var(--color-danger-bg);
  color: #991b1b;
}

/* Inline reason form replacing the action cell during voiding */
.void-prompt-row td {
  background: #fef9f0;
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-2) var(--space-3);
}
.void-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.void-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.void-reason-input {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-surface-1, #ffffff);
  color: var(--color-text, var(--color-text-primary));
}
.void-reason-input:focus {
  outline: none;
  border-color: var(--color-accent, var(--color-accent));
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.void-reason-input.void-reason-input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
.void-confirm-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 16px;
  border-radius: 4px;
  border: 1px solid #991b1b;
  background: #991b1b;
  color: #ffffff;
  cursor: pointer;
  flex: 0 0 auto;
}
.void-confirm-btn:hover { background: #7f1d1d; }
.void-confirm-btn:disabled { opacity: 0.5; cursor: wait; }
.void-cancel-btn {
  font-size: 12px;
  padding: 5px 16px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  flex: 0 0 auto;
}
.void-cancel-btn:hover { background: var(--color-bg-subtle, #f3f4f6); }

/* Sample count column: "active / total" when voids exist */
.sample-count-with-void {
  font-weight: 600;
}
.sample-count-voided {
  color: #9ca3af;
  font-weight: 400;
  font-size: 0.85em;
}

/* Manifest modal: keep header flush and pinned while body scrolls */
#dashboard-manifest-modal > .modal-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#dashboard-manifest-modal .modal-header {
  margin-bottom: 0;
  padding: var(--space-3) var(--space-4);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
#dashboard-manifest-modal #dash-modal-title {
  flex: 1 1 auto;
  text-align: center;
  margin: 0;
}
#dashboard-manifest-modal .modal-close {
  margin-left: 0;
  flex-shrink: 0;
}
/* Prev/next: same footprint as .modal-close (not full .coa-detail-nav-btn size) */
#dashboard-manifest-modal #dash-modal-prev,
#dashboard-manifest-modal #dash-modal-next {
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  min-width: var(--modal-close-size);
  min-height: var(--modal-close-size);
  padding: 0;
  border: 0;
  border-radius: var(--modal-close-radius);
  background: #e4e8f0;
  color: var(--color-text-primary);
  font-size: var(--modal-close-font-size);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
}
#dashboard-manifest-modal #dash-modal-prev:hover,
#dashboard-manifest-modal #dash-modal-next:hover {
  background: #e4e8f0;
  box-shadow: var(--modal-close-shadow-hover);
}
#dashboard-manifest-modal .modal-body {
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
#dashboard-manifest-modal #dash-modal-body {
  padding: 0 var(--space-2) var(--space-3);
}

/* Projected rows */
.projected-row td {
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-surface-2);
}

/* ── New Manual Order Modal ─────────────────────────── */
.no-modal-card.modal-card {
  width: 420px;
  max-width: 94vw;
  padding: 0;
  text-align: left;
}
.no-modal-header.modal-header {
  padding: 18px 20px 0;
  margin-bottom: 0;
  text-align: left;
}
.no-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: left;
}
.no-modal-body.modal-body {
  padding: 16px 20px 20px;
  text-align: left;
}
.no-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  text-align: left;
}
.no-form .no-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.no-form .no-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  margin: 0;
}
.no-form .no-input,
.no-form select,
.no-form .li-ltb,
.no-form .li-count {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  background-color: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  text-align: left;
}
.no-form .no-input:focus,
.no-form select:focus {
  border-color: var(--color-brand);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-brand-muted);
}
.no-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* LTB section */
.no-ltb-section {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  margin-top: 2px;
}
.no-form .line-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.no-form .line-item-row .li-ltb {
  flex: 1;
  width: auto;
}
.no-form .line-item-row .li-count {
  width: 58px;
  flex: 0 0 58px;
  text-align: left;
}
.no-form .line-item-row .li-terp {
  width: 58px;
  flex: 0 0 58px;
  text-align: left;
}
.no-form .line-item-row .li-remove {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s;
}
.no-form .line-item-row .li-remove:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}
.no-add-ltb-btn {
  margin-top: 2px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-brand);
  background: transparent;
  border: 1px dashed var(--color-brand);
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
}
.no-add-ltb-btn:hover {
  background: color-mix(in srgb, var(--color-brand) 8%, transparent);
}
/* Actions */
.no-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  text-align: left;
}
.no-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.no-btn-cancel {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.no-btn-cancel:hover {
  background: var(--color-border-light);
}
.no-btn-save {
  background: var(--color-brand);
  color: #fff;
  border: none;
  min-width: 110px;
}
.no-btn-save:hover {
  background: var(--color-brand-hover);
}

/* Terpene popover — Select All in header (same toolbar row as DPM) */
.terp-select-all-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.terp-select-all-inline input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.terp-select-all-inline span {
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   Responsive breakpoints
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .dash-table {
    min-width: 1080px;
  }
  .table-scroll table {
    min-width: 800px;
  }
}

@media (max-width: 768px) {
  .top-nav {
    flex-wrap: wrap;
  }
  .card {
    padding: var(--space-2);
  }
}

@media (max-width: 480px) {
  .container,
  .page-wide-layout {
    padding: 0 var(--space-2);
  }
}

/* ── Analytics Suite ───────────────────────────────────────── */

.page-wide-layout { max-width: 100%; margin: 0; padding: 0; }
.page-wide-layout .page-narrow { padding: 0 var(--space-3); }
.page-wide-layout .page-wide { padding: 0 var(--space-3); }

/* ── Redesigned Filter Bar ─────────────────────────────── */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
  padding: 10px var(--space-4);
}
.fbar-body {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 0;
  flex-wrap: nowrap;
}
.fbar-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px;
  flex-shrink: 0;
}
.fbar-group:first-child { padding-left: 0; }
.fbar-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.fbar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.fbar-divider {
  width: 1px;
  align-self: stretch;
  min-height: 48px;
  margin: 2px 0;
  background: var(--color-border);
  flex-shrink: 0;
}
.fbar-inner-sep {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  flex-shrink: 0;
  margin: 0 2px;
}
.fbar-range-sep {
  font-size: 13px;
  color: var(--color-text-muted);
  user-select: none;
  flex-shrink: 0;
}
/* Uniform control height */
.filter-bar input[type="date"],
.filter-bar input[type="text"],
.filter-bar select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
  min-width: 0;
}

/* Single <select>: remove native OS chrome; custom double-caret (Historical Data bar) */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath fill='%2364748b' d='M6 2.5L10 7.5H2L6 2.5zm0 11L2 8.5h8L6 13.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 16px;
  /* Match .filter-bar horizontal inset: 10px start, 28px end (caret clearance) */
  padding-inline-start: 10px;
  padding-inline-end: 28px;
}
select:not([multiple]):not([size]):disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
select:not([multiple]):not([size]):focus {
  outline: none;
}
select:not([multiple]):not([size]):focus-visible {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px var(--color-brand-muted);
}

.filter-bar input[type="date"] { width: 132px; }
.fbar-client select { width: 150px; }
.fbar-matrix select { width: 120px; }
/* Prelim / other pages: fbar layout without wrapping .filter-bar */
.fbar-row select {
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}
.fbar-sample {
  flex: 1 1 180px;
  min-width: 0;
}
.fbar-sample .fbar-row { width: 100%; }
.fbar-sample input[type="text"] { width: 100%; flex: 1 1 auto; }
.fbar-actions {
  flex-shrink: 0;
  /* Match the 14px left padding on .fbar-group so the action buttons sit at
     the same distance from the preceding divider as every other group. */
  padding-left: 14px;
}
.fbar-label-placeholder {
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.filter-bar .fbar-clear-btn {
  height: 34px;
  min-width: 72px;
  padding: 0 16px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Quick-range preset pills */
.filter-presets { display: flex; gap: 4px; align-items: center; }
.filter-pill {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  font-size: 11px;
  cursor: pointer;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all .15s;
  white-space: nowrap;
}
.filter-pill:hover { background: var(--color-border-light); }
.filter-pill.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
/* Legacy .filter-group kept for compare section filter rows */
.filter-group { display: flex; flex-direction: column; gap: 2px; position: relative; min-width: 0; }
.filter-group label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.filter-group input[type="date"],
.filter-group input[type="text"],
.filter-group select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text);
}

.strain-dropdown {
  position: absolute;
  z-index: 20;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-height: 220px;
  overflow-y: auto;
  min-width: 250px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  top: 100%;
  left: 0;
}
.strain-dropdown-item {
  padding: 6px 10px;
  cursor: pointer;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.strain-dropdown-item:hover { background: var(--color-surface-2); }
.strain-dropdown-item .strain-dd-name { flex: 0 1 auto; min-width: 0; }
.strain-dropdown-item .strain-dd-count { color: var(--color-text-muted); font-size: 11px; flex: 0 0 auto; }
.strain-dropdown-item .strain-dd-meta {
  flex: 1 1 100%;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;
}

/* Inline alias badge — used in dropdown items, strain chips, and chart titles. */
.alias-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.28);
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
}
/* Link icon rendered via ::before — no text content in any variant. */
.alias-pill::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.85;
}
.alias-pill[data-variant="muted"] {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
/* Icon used inline in sample-name columns. */
.alias-pill[data-variant="cell"],
.alias-pill[data-variant="icon"] {
  padding: 2px 5px;
  background: rgba(5, 150, 105, 0.10);
  border-color: rgba(5, 150, 105, 0.22);
}
.alias-pill[data-variant="cell"]::before,
.alias-pill[data-variant="icon"]::before {
  width: 10px;
  height: 10px;
}
/* Variant used inside the sparkline cell — sits flush after the mini chart. */
.alias-pill[data-variant="sparkline"] {
  padding: 2px 4px;
  margin-left: 4px;
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.18);
}
.alias-pill[data-variant="sparkline"]::before {
  width: 9px;
  height: 9px;
  opacity: 0.75;
}
.strain-grid-col .alias-pill { margin-left: 4px; }
.strain-dropdown-item .alias-pill { margin-left: 2px; }

/* Sample-name cell wrapper for the COA Review samples table.
   Lets the badge sit on a second line when the strain label is long
   (e.g. "Plant Mat - Sativa - 25 - Pineapple Upside Down Cake") instead
   of pushing the column wider. */
.coa-sample-name-cell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  max-width: 100%;
  line-height: 1.3;
}
.coa-sample-name-cell .coa-sample-name-text { word-break: break-word; }

/* Sparkline modal: align the alias badge inside the title bar so it sits
   on the same baseline as the heading. */
#sparkline-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#sparkline-modal-title .alias-pill { transform: translateY(-1px); margin-left: 6px; }
.sparkline-modal-subtitle {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 400;
  word-break: break-word;
}

/* Filter-bar "Show ungrouped spellings" toggle (Sample group label). */
.fbar-sample .fbar-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.fbar-sample-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
.fbar-sample-toggle input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-brand);
}
.fbar-sample-toggle:hover { color: var(--color-text); }

/* Analytics Tabs */
.analytics-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
}
.analytics-tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .15s;
}
.analytics-tabs .tab-btn:hover { color: var(--color-text); background: var(--color-surface-2); }
.analytics-tabs .tab-btn.active { color: var(--color-brand); border-bottom-color: var(--color-brand); }
.analytics-tabs .tab-btn svg { flex-shrink: 0; }

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

/* Chart Cards */
.analytics-chart-card { margin-bottom: var(--space-3); }
.analytics-chart-wrap { width: 100%; height: 380px; }
#trend-chart { height: 460px; }
.chart-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.chart-card-header h3 { margin: 0; font-size: 1rem; }
.chart-local-select {
  padding: 4px 28px 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  background-color: var(--color-surface-1);
  min-height: 30px;
}

.analytics-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 1280px) {
  .analytics-grid-2x2 { grid-template-columns: 1fr; }
}

/* Tool Controls */
.analytics-tool-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-3);
}
/* Trend Controls */
.trend-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.trend-analyte-group { position: relative; }
.trend-toggles {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Strain Card — dedicated card above trend toolbar */
.trend-strain-card {
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.trend-strain-card.hidden { display: none; }
.strain-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.strain-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
/* Override global `button` / `button:hover` (brand green) for strain card text actions */
.strain-card-clear {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 4px 8px;
  margin: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: underline;
  box-shadow: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.strain-card-clear:hover {
  background: var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}
.strain-card-clear:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Horizontal strip: full strain names, column width = content; scroll when many */
.strain-grid-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.strain-grid-col {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  white-space: nowrap;
  max-width: none;
}
.strain-grid-col:hover { border-color: var(--color-text-muted); }
.strain-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.strain-grid-label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
.strain-grid-close {
  /* Icon-only control: neutral hit target, centered × (global button styles reset) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0 0 0 4px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  opacity: 0.7;
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.strain-grid-close:hover {
  background: var(--color-border);
  color: var(--color-text-secondary);
  opacity: 1;
}
.strain-grid-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Analyte Panel — Checkbox Dropdown */
.analyte-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
  min-width: 260px;
  padding: var(--space-1) 0;
}
.analyte-panel.hidden { display: none; }
.analyte-panel-group { padding: 0; }
.analyte-panel-group.analyte-panel-disabled { opacity: .4; }
.analyte-panel-group-header {
  padding: 6px 14px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
}
.analyte-panel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}
.analyte-panel-item:hover { background: var(--color-surface-2); }
.analyte-panel-item.disabled {
  opacity: .4;
  cursor: default;
}
.analyte-panel-item input[type="checkbox"] { margin: 0; }

/* Analyte Chips Strip */
.trend-selected-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.analyte-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
  cursor: default;
}
.analyte-chip-icon {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  opacity: .7;
}
.analyte-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.analyte-chip-close {
  cursor: pointer;
  font-weight: 700;
  opacity: .5;
  font-size: 12px;
  line-height: 1;
}
.analyte-chip-close:hover { opacity: 1; }
.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

/* Pill toggles (terpene sub-views) */
.pill-toggle-group { display: flex; gap: 2px; }
.pill-toggle {
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all .15s;
}
.pill-toggle:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.pill-toggle:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.pill-toggle.active { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.pill-toggle:not(.active):hover {
  background: var(--color-border);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Summary Cards */
.summary-cards-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.summary-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-width: 120px;
  flex: 1;
}
.summary-card-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; margin-bottom: 2px; }
.summary-card-value { font-size: 1.25rem; font-weight: 700; color: var(--color-text); }
.summary-card-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.summary-card.clickable { cursor: pointer; transition: border-color .15s; }
.summary-card.clickable:hover { border-color: var(--color-brand); }
.summary-card.clickable.active { border-color: var(--color-brand); background: var(--color-brand-muted); }

/* Compare Controls */
.compare-side-controls { margin-bottom: var(--space-3); padding: var(--space-3); }
.compare-side-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.compare-filter-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.compare-filter-row:last-child { margin-bottom: 0; }
.compare-strain-group { flex: 1; min-width: 160px; }
.compare-analyte-wrap { position: relative; display: inline-block; }
.compare-analyte-wrap .analyte-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 240px;
  max-height: 300px;
  overflow-y: auto;
}

/* Comparison Split */
.comparison-split {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.comparison-divider { background: var(--color-border); }
.comparison-panel { min-width: 0; }
@media (max-width: 1280px) {
  .comparison-split { grid-template-columns: 1fr; }
  .comparison-divider { height: 2px; }
}

/* Explorer Table */
/* Explorer Toolbar */
.explorer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.explorer-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.explorer-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.explorer-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}
.explorer-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.explorer-search-wrap .explorer-search {
  padding: 6px 10px 6px 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--color-surface-1);
  color: var(--color-text);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.explorer-search-wrap .explorer-search:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px var(--color-brand-muted);
}
.explorer-controls-right { display: flex; gap: var(--space-2); align-items: center; }
.explorer-table-card { }
.explorer-table { width: 100%; border-collapse: collapse; }
.explorer-table th {
  position: sticky;
  top: 0;
  background: var(--color-surface-2);
  padding: 8px 10px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.explorer-table th:hover { color: var(--color-text); }
.explorer-table th .sort-arrow { margin-left: 4px; opacity: .4; }
.explorer-table th.sorted .sort-arrow { opacity: 1; color: var(--color-brand); }
.explorer-table td {
  padding: 6px 10px;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
/* Numeric columns right-align (tagged with .num at render). */
.explorer-table th.num, .explorer-table td.num { text-align: right; }
.explorer-table tr:hover td { background: var(--color-surface-2); }
.explorer-pdf-link {
  color: var(--color-text-muted);
  transition: color 0.15s;
}
.explorer-pdf-link:hover {
  color: var(--color-brand, var(--color-accent));
}
.explorer-table tr.highlight-pulse td {
  animation: highlightFade 5s ease-out;
}
@keyframes highlightFade {
  from { background: var(--color-warning-bg); }
  to { background: transparent; }
}
.explorer-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  font-size: var(--text-sm);
}
.explorer-pagination button,
.explorer-pagination .explorer-page-btn {
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
}
.explorer-pagination button:disabled { opacity: .35; cursor: default; }
.explorer-pagination button:hover:not(:disabled) { background: var(--color-primary); color: #fff; }

/* Explorer Column Picker */
.explorer-col-picker-wrap { position: relative; }
.explorer-col-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 400px;
  overflow-y: auto;
  min-width: 280px;
  padding: var(--space-2) 0;
}
.explorer-col-panel.hidden { display: none; }
.explorer-col-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
}
.explorer-col-group-header input[type="checkbox"] { margin: 0; }
.explorer-col-group-header .group-always-on {
  font-size: 9px;
  font-weight: 500;
  text-transform: none;
  opacity: .6;
  letter-spacing: 0;
}
.explorer-col-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 14px 3px 28px;
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}
.explorer-col-item:hover { background: var(--color-surface-2); }
.explorer-col-item input[type="checkbox"] { margin: 0; }
.explorer-col-item.locked { opacity: .6; cursor: default; }
.explorer-col-section {
  padding: 2px 0;
}
.explorer-col-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
}
.explorer-group-toggle {
  padding: 4px 14px;
  font-size: var(--text-sm);
}
.explorer-col-toggle {
  padding: 2px 14px 2px 28px;
  font-size: var(--text-sm);
  cursor: pointer;
}
.explorer-col-toggle input[type="checkbox"] { margin: 0; }
.explorer-col-toggle.sub-col {
  padding-left: 38px;
}
.explorer-col-sub.hidden { display: none; }
.explorer-col-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 8px 0;
}
.explorer-col-quick-links {
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.explorer-col-quick-links a {
  color: var(--color-brand);
  text-decoration: none;
}
.explorer-col-quick-links a:hover {
  text-decoration: underline;
}

/* Skeleton / Loading */
.skeleton-chart {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border-light) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
  width: 100%;
  height: 100%;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-4);
}
.empty-state-icon { font-size: 2rem; margin-bottom: var(--space-2); opacity: .5; }

/* Safety pass/fail bar */
.pass-rate-bar { height: 6px; border-radius: 3px; background: var(--color-border-light); overflow: hidden; margin-top: 4px; }
.pass-rate-fill { height: 100%; background: var(--color-success); border-radius: 3px; }

/* Delta table */
.delta-table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }
.delta-table th, .delta-table td { padding: 6px 10px; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border-light); }
.delta-table th { text-align: center; font-weight: 500; color: var(--color-text-muted); }
.delta-table td { text-align: center; }
.delta-positive { color: var(--color-success); }
.delta-negative { color: var(--color-danger); }

/* ═══════════════════════════════════════════════════════════
   Audit Log table
   ═══════════════════════════════════════════════════════════ */
.audit-filters {
  flex-wrap: wrap;
  gap: 8px;
}
.audit-filters .audit-filter-input {
  height: 32px;
  padding: 0 8px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--color-border, #d6d9e0);
  border-radius: 6px;
  background: var(--color-surface, #fff);
  color: inherit;
}
.audit-filters .audit-filter-input[type="search"] { min-width: 220px; }
.audit-filters .audit-date-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-muted, #6b7280);
}
.audit-filters #audit-count { margin-left: auto; }
.audit-pager {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
}

.audit-table colgroup .col-time     { width: 140px; }
.audit-table colgroup .col-category { width: 110px; }
.audit-table colgroup .col-user     { width: 90px; }
.audit-table colgroup .col-summary  { width: 50%; }
.audit-table colgroup .col-tech     { width: 260px; }

.audit-table th,
.audit-table td {
  text-align: left;
  vertical-align: top;
}

.audit-category {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  white-space: nowrap;
  border: 1px solid var(--color-border);
}

.audit-summary {
  line-height: 1.5;
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

.audit-technical {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.audit-technical .audit-ip {
  margin-bottom: 2px;
}

.audit-technical details {
  margin: 0;
}

.audit-technical details summary {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--color-accent);
  user-select: none;
}

.audit-technical details summary:hover {
  text-decoration: underline;
}

.audit-technical details pre {
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 4px 0 0;
  padding: var(--space-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  font-size: var(--text-xs);
  line-height: 1.4;
}

/* ── Role badges (navbar + users table) ──────────────────────────── */
.role-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.role-pill-admin    { background: #dcfce7; color: #166534; }
.role-pill-manager  { background: #dbeafe; color: #1e40af; }
.role-pill-employee { background: #f1f5f9; color: #475569; }

.nav-role-pill {
  padding: 1px 8px;
  border-radius: var(--radius-full, 9999px);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  margin-left: 6px;
  vertical-align: middle;
}
.nav-role-pill.role-pill-admin    { background: rgba(22,101,52,0.12); color: var(--color-brand-hover); }
.nav-role-pill.role-pill-manager  { background: rgba(37,99,235,0.10); color: var(--color-accent); }
.nav-role-pill.role-pill-employee { background: rgba(100,116,139,0.10); color: #64748b; }

.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  font-weight: 500;
}
.status-pill-active   { background: #dcfce7; color: #166534; }
.status-pill-inactive { background: var(--color-danger-bg); color: #991b1b; }

/* Users table */
.users-table th, .users-table td { text-align: left; vertical-align: middle; }
.users-table .user-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.users-table .user-actions button {
  padding: 3px 10px;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

/* Settings form compact variant */
.settings-form.compact { gap: var(--space-2); }
.settings-form.compact label { font-size: var(--text-sm); font-weight: 500; }
.settings-form.compact input {
  padding: var(--space-2);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 100%;
}
.settings-form.compact select {
  padding: var(--space-2);
  padding-inline-end: 28px;
  padding-inline-start: 10px;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 100%;
}
.settings-form.compact input:focus,
.settings-form.compact select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

/* ── User Management Modal ──────────────────────────────────────── */
.um-section {
  margin-bottom: var(--space-4);
}
.um-section:last-child { margin-bottom: 0; }
.um-section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-light);
}
.um-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.um-row:last-child { margin-bottom: 0; }
.um-field {
  min-width: 0;
}
.um-field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--color-text-primary);
}
.um-field input,
.um-field select,
.um-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  margin-top: 0;
  font-family: inherit;
}
.um-field textarea {
  resize: vertical;
}
.um-field input:focus,
.um-field select:focus,
.um-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}
.um-field input:disabled {
  background: var(--color-bg-secondary, #f1f5f9);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}
.modal-body .um-field input[type="text"],
.modal-body .um-field input[type="password"],
.modal-body .um-field input[type="email"],
.modal-body .um-field input[type="number"] {
  margin-top: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.modal-body .um-field label {
  margin-top: 0;
}

/* Permissions grid */
.um-perms-grid {
  display: grid;
  gap: 0;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--text-sm);
}
.um-perm-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--color-border-light);
  align-items: center;
}
.um-perm-row:last-child { border-bottom: none; }
.um-perm-row.um-perm-header {
  background: var(--color-bg-secondary, var(--color-surface-2));
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.um-perm-resource {
  padding: 8px 12px;
  font-weight: 500;
  border-right: 1px solid var(--color-border-light);
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.um-perm-actions {
  display: flex;
  gap: 0;
  padding: 0;
}
.um-perm-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
.um-perm-action label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 400;
  cursor: pointer;
  color: var(--color-text-secondary);
}
.um-perm-action input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-accent);
}
.um-perm-action.um-perm-override label {
  color: var(--color-accent);
  font-weight: 600;
}

/* Grouped permission rows (e.g. Settings submodules) */
.um-perm-group-header {
  background: var(--color-bg-secondary, var(--color-surface-2));
  border-bottom: 1px solid var(--color-border-light);
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
.um-perm-row.um-perm-grouped .um-perm-resource {
  padding-left: 26px;
  padding-right: 8px;
  font-weight: 400;
  color: var(--color-text-primary);
  position: relative;
}
.um-perm-row.um-perm-grouped .um-perm-resource::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border);
  transform: translateY(-50%);
}

/* Danger zone */
.um-danger-section {
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: #fef2f2;
  margin-top: var(--space-4);
}
.danger-btn {
  padding: 6px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-danger);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.danger-btn:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }

/* Configure Roles modal: pill toggle spacing */
.roles-pill-toggle-wrap {
  margin-bottom: var(--space-3);
}

/* ── Clients Page ───────────────────────────────────────────── */

.clients-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.client-search-input {
  flex: 1;
  max-width: 320px;
  padding: 8px 10px;
  border: 1px solid #dbe1ea;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.client-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
}
.client-toggle-inactive {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.clients-card { overflow-x: auto; }
.clients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.clients-table th,
.clients-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.clients-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.client-inactive-row { opacity: 0.5; }
.sub-client-indent {
  color: var(--color-text-muted);
  margin-right: 4px;
}
.mapping-tags-cell { max-width: 300px; }
.tag {
  display: inline-block;
  background: var(--color-surface-2);
  color: var(--color-text);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  margin: 1px 2px;
}
.tag-removable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tag-remove {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.tag-remove:hover { color: var(--color-danger); }
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-2);
}
/* Never use display:flex directly on a <td> — it stops behaving like a
 * table-cell, so the cell shrinks to the buttons' height while sibling
 * cells grow for "Invoices as: …" subtitles. Row borders then misalign
 * under Edit/Delete. Flex lives on an inner wrapper instead. */
.clients-table .actions-cell {
  text-align: right;
  white-space: nowrap;
}
.clients-actions-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-active { background: #dcfce7; color: #166534; }
.status-inactive { background: #f3f4f6; color: var(--color-text-muted); }

/* Billing Group — child license chips with inline "Bills separately" toggle. */
.clients-children-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.clients-children-chips .child-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2, transparent);
  font-size: var(--text-sm);
}
.clients-children-chips .child-chip-name {
  font-weight: 600;
}
.clients-children-chips .child-chip-lic {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.clients-children-chips .child-chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.clients-children-chips .child-chip-toggle input {
  margin: 0;
}

/* Clients list — parent/child grouping + inline billing pills. */
.clients-table tr.client-child-row td:first-child {
  padding-left: 28px;
}
.clients-table .child-indent {
  color: var(--color-text-muted);
  margin-right: 6px;
}
.billing-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 6px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-surface-2, transparent);
}
.billing-pill.billing-pill-sep {
  color: #92400e;
  background: var(--color-warning-bg);
  border-color: #fde68a;
}
/* Manual dashboard-order line markers in the billing queue. */
.billing-pill.billing-pill-manual {
  color: #3730a3;
  background: #eef2ff;
  border-color: #c7d2fe;
}
.status-pill.status-manual { background: #eef2ff; color: #3730a3; }
.terp-warn { color: var(--color-warning); font-weight: 700; cursor: help; }
/* "Manual orders need a client" notice above the queue. */
#manual-needs-client .banner-warn {
  border: 1px solid #fde68a;
  background: var(--color-warning-bg);
  color: #92400e;
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
  font-size: var(--text-sm, 0.875rem);
}
#manual-needs-client .manual-needs-list {
  margin: 8px 0 0;
  padding-left: 18px;
}
#manual-needs-client .manual-needs-list li { margin: 2px 0; }
.clients-table .invoices-as-subtitle {
  display: block;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Billing queue — license pill list when a billing parent has multiple
 * child licenses, plus the "Bills separately" pill on a child row. */
.license-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2, transparent);
  color: var(--color-text);
  margin-right: 2px;
}

/* Form sections in client modal */
.form-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.form-section h3 {
  margin: 0 0 4px 0;
  font-size: 0.9rem;
}
.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}
.mapping-add-row,
.pricing-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}
.pricing-table th,
.pricing-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.pricing-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

/* Pricing editor: keep header, existing rows and the input row column-aligned
   so base/terpene inputs sit directly under their headers. */
.pricing-table--editor { table-layout: fixed; }
.pricing-table--editor .pricing-col-ltb    { width: 32%; }
.pricing-table--editor .pricing-col-sub    { width: 24%; }
.pricing-table--editor .pricing-col-base   { width: 17%; }
.pricing-table--editor .pricing-col-terp   { width: 17%; }
.pricing-table--editor .pricing-col-action { width: 10%; }
.pricing-table--editor td,
.pricing-table--editor th { vertical-align: middle; }
.pricing-table--editor tfoot td { border-bottom: none; padding-top: 10px; }
.pricing-table--editor .pricing-editor-row .pricing-action-cell { text-align: right; }

.pricing-table--editor .pricing-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.pricing-table--editor .pricing-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.pricing-table--editor .pricing-input:disabled {
  background: var(--color-surface-muted, var(--color-surface-2));
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.pricing-table--editor .pricing-add-btn {
  white-space: nowrap;
  padding: 7px 12px;
  font-size: 12px;
}

.form-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
}
.form-input {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  background: var(--color-surface);
}
.form-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px rgba(15,122,54,0.1);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Button variants */
.btn { cursor: pointer; font-family: inherit; }
.btn-brand {
  background: var(--color-brand);
  color: #fff;
  border: 1px solid var(--color-brand);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
}
.btn-brand:hover { background: #0a6b2e; border-color: #0a6b2e; }
/* Primary action = brand green (was undefined → unstyled on 6 call-sites). */
.btn-primary {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border: 1px solid var(--color-brand);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
}
.btn-primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--text-sm);
}
.btn-outline:hover { background: var(--color-surface-2); }
.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border: 1px solid var(--color-danger);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
}
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-danger-outline {
  background: transparent;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--text-sm);
}
.btn-danger-outline:hover { background: #fef2f2; }
.btn-sm { padding: 4px 10px; font-size: 0.75rem; }
.text-muted { color: var(--color-text-muted); }
.empty-state {
  text-align: center;
  padding: var(--space-4) var(--space-2);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   Billing Module
   ═══════════════════════════════════════════════════════════ */

/* Toolbar */
.billing-queue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.billing-queue-toolbar .queue-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.queue-selection-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  padding: 4px 10px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}
.queue-summary-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Tables */
.billing-queue-table,
.invoices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  table-layout: auto;
}
.billing-queue-table th,
.billing-queue-table td,
.invoices-table th,
.invoices-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.billing-queue-table th,
.invoices-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-surface-2);
}
.billing-queue-table th.num,
.billing-queue-table td.num,
.invoices-table th.num,
.invoices-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.billing-queue-table th.center,
.billing-queue-table td.center {
  text-align: center;
}
.billing-queue-table .col-toggle,
.billing-queue-table .col-check {
  width: 40px;
  padding: 0 6px;
  text-align: center;
}
.billing-queue-table .col-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand);
  cursor: pointer;
}

/* Parent (client) row */
.queue-parent-row {
  background: var(--color-surface-1);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.queue-parent-row:hover { background: var(--color-surface-2); }
.queue-parent-row.expanded {
  background: var(--color-surface-2);
  border-bottom-color: var(--color-border-grid);
}
.queue-parent-row .queue-client {
  font-weight: 600;
  color: var(--color-text-primary);
}
.queue-parent-row .queue-license {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

/* Expanded detail row — mirrors the manifests sub-table look */
.queue-detail-row > td.detail-td {
  padding: 0 !important;
  border-bottom: 1px solid var(--color-border);
}
.billing-detail-cell {
  background: #f0faf6;
  border-left: 4px solid #22c55e;
  padding: 10px 16px 10px 40px;
}
.billing-sub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  table-layout: fixed;
}
.billing-sub-table thead th {
  background: #e2f4e8;
  padding: 8px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  border-bottom: 1px solid #c9e6d2;
  white-space: nowrap;
}
.billing-sub-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5eaf2;
  vertical-align: middle;
  text-align: center;
  color: var(--color-text-primary);
}
.billing-sub-table tbody tr:last-child td { border-bottom: none; }
.billing-sub-table tbody tr:hover td { background: #e8f6ef; }
.billing-sub-table .mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.billing-sub-table .muted { color: var(--color-text-muted); }

/* Column widths — tight, consistent, centered */
.billing-sub-table .sub-col-check    { width: 44px; }
.billing-sub-table .sub-col-pickup   { width: 110px; }
.billing-sub-table .sub-col-order    { width: 96px;  font-variant-numeric: tabular-nums; }
.billing-sub-table .sub-col-manifest { width: 130px; }
.billing-sub-table .sub-col-pkg      { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.billing-sub-table .sub-col-sub      { width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.billing-sub-table .sub-col-samples  { width: 80px;  font-variant-numeric: tabular-nums; }
.billing-sub-table .sub-col-terp     { width: 90px;  font-variant-numeric: tabular-nums; }
.billing-sub-table .sub-col-status   { width: 110px; }

.billing-sub-table .billing-sub-row.needs-categorization {
  background: var(--color-warning-bg, #fff7ed);
}
.billing-sub-table .billing-sub-row.needs-categorization .sub-col-check input {
  cursor: not-allowed;
}
.queue-needs-cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-warning-bg, #fff7ed);
  color: var(--color-warning, #92400e);
  border: 1px solid var(--color-warning, #f59e0b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.billing-sub-table .sub-col-amt      {
  width: 120px;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  padding-right: 14px;
}
.billing-sub-table .sub-col-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand);
  cursor: pointer;
  vertical-align: middle;
}

/* Status pill */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-pill.status-pending   { background: var(--color-warning-bg); color: var(--color-warning); }
.status-pill.status-completed { background: var(--color-success-bg); color: var(--color-success); }

/* Invoice filter toolbar */
.invoice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.invoice-filters {
  display: flex;
  gap: var(--space-2);
}
.invoice-filters .form-input {
  height: 36px;
  min-width: 170px;
}

/* Invoice status badges */
.inv-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inv-badge-draft   { background: #f3f4f6; color: var(--color-text-muted); }
.inv-badge-sent    { background: #dbeafe; color: var(--color-accent-hover); }
.inv-badge-paid    { background: #d1e7dd; color: #166534; }
.inv-badge-overdue { background: var(--color-warning-bg); color: #92400e; }
.inv-badge-void    { background: var(--color-danger-bg); color: #991b1b; }

/* ── Invoice Detail Modal ─────────────────────────────────── */
.invoice-modal-card {
  width: min(1180px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.invoice-modal-card .modal-header {
  padding: 14px 20px;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-1);
}
.invoice-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.invoice-header h3 { margin: 0; font-size: 1rem; }
.invoice-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.invoice-preview-pane {
  background: var(--color-surface-0);
  border-right: 1px solid var(--color-border);
  min-height: 520px;
  overflow: hidden;
}
.invoice-preview-pane iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  background: var(--color-surface-0);
}
.invoice-side-pane {
  padding: 20px;
  overflow-y: auto;
  background: var(--color-surface-1);
}
.invoice-side-pane .um-section { margin-bottom: var(--space-4); }
.invoice-side-pane .um-row.single { grid-template-columns: 1fr; }
.invoice-side-pane .um-value {
  padding: 8px 0;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: 500;
}

.totals-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.totals-side > div {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-secondary);
}
.totals-side .grand {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 2px solid var(--color-brand);
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 1rem;
}

/* Editable per-line cards in side pane */
.side-line-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.line-item-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--color-surface-1);
}
.line-item-row .li-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.line-item-row .li-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.line-item-row .li-sub-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-subtle, #eef2f7);
  color: var(--color-text-secondary, #475569);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.line-item-row .li-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
.line-item-row .li-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.line-item-row label {
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  gap: 4px;
}
.line-item-row input[type="number"] {
  width: 100%;
  padding: 6px 8px;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.line-item-row .li-comp-label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  grid-column: 1 / -1;
  text-transform: none;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.line-item-row .li-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-end;
}

/* Invoice modal footer */
.invoice-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-1);
  gap: var(--space-2);
}
.invoice-modal-footer .footer-right {
  display: flex;
  gap: var(--space-2);
}

/* Shared small modal footer row (payment / new-invoice) */
.modal-footer-row {
  display: flex;
  gap: var(--space-2);
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
}
.payment-modal-card { width: min(440px, 95vw); padding: 0; }
.payment-modal-card .modal-header,
.payment-modal-card .modal-body {
  padding-left: 20px;
  padding-right: 20px;
}

/* ── KPI + Analytics ──────────────────────────────────────── */
.billing-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.kpi-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}
.kpi-card:hover { box-shadow: var(--shadow-md); }
.kpi-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.billing-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.billing-charts-grid .chart-card {
  padding: var(--space-4);
  min-height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.billing-charts-grid .chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.billing-charts-grid .chart-card-header h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.billing-charts-grid .chart-card .chart-wrap {
  position: relative;
  width: 100%;
  height: 260px;
}
.billing-charts-grid .chart-card .chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.chart-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-6) 0;
  font-style: italic;
}

/* ── Settings > Billing: logo + admin tools ─────────────── */
.billing-logo-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  margin-bottom: var(--space-3);
}
.billing-logo-preview {
  flex: 0 0 200px;
  height: 80px;
  background: var(--color-surface-1);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}
.billing-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.billing-logo-empty {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
.billing-logo-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.billing-logo-actions { margin-top: var(--space-2); }

.billing-admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.billing-admin-row .billing-admin-text { flex: 1; min-width: 0; }

@media (max-width: 1100px) {
  .invoice-modal-body { grid-template-columns: 1fr; }
  .invoice-preview-pane { border-right: 0; border-bottom: 1px solid var(--color-border); min-height: 480px; }
}
@media (max-width: 768px) {
  .billing-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .billing-charts-grid { grid-template-columns: 1fr; }
  .clients-toolbar { flex-wrap: wrap; }
  .form-row { flex-direction: column; }
  .billing-detail-cell { padding: 8px; }
  .billing-sub-table { table-layout: auto; }
}

.col-originating-entity .client-primary {
  line-height: 1.3;
}
.col-originating-entity .client-display-subtitle {
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ──────────────────────────────────────────────────────────
 * Global Jobs nav widget
 * Pill injected into .top-nav with a dropdown of active +
 * recent background jobs. Toasts render in #jobs-toast-root.
 * ────────────────────────────────────────────────────────── */

.jobs-widget {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
.jobs-widget + .nav-user { margin-left: var(--space-2); }
.nav-user + .jobs-widget { margin-left: 0; }

.jobs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  font-weight: 600;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.jobs-pill:hover,
.jobs-pill:focus-visible {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
  outline: none;
  transform: none;
}
.jobs-pill.is-active {
  color: var(--color-brand);
  border-color: var(--color-brand);
}
.jobs-pill-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
}
.jobs-pill-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-size: 11px;
  font-weight: 700;
}

@keyframes jobs-pulse-kf {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.jobs-pill.jobs-pulse { animation: jobs-pulse-kf 1.1s ease-out 1; }

/* Dropdown: solid white card with clear elevation + internal padding. */
.jobs-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 70vh;
  overflow: auto;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 16px 40px rgba(15, 23, 42, 0.22);
  z-index: 1200;
  overscroll-behavior: contain;
  isolation: isolate;
}
.jobs-dropdown-header {
  padding: 10px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}
.jobs-dropdown-body {
  padding: 6px;
  background: var(--color-surface-1);
}
.jobs-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.jobs-section-label {
  padding: 10px 10px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Each job renders as a distinct card on the white surface. */
.jobs-row {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin: 4px 4px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.jobs-row + .jobs-row { margin-top: 6px; }
.jobs-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.jobs-row-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.jobs-row-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-surface-2);
}
.jobs-row-running .jobs-row-status { color: var(--color-brand); background: rgba(22,163,74,0.12); }
.jobs-row-queued  .jobs-row-status { color: #b45309;           background: rgba(245,158,11,0.14); }
.jobs-row-done    .jobs-row-status { color: #166534;           background: rgba(22,101,52,0.12); }
.jobs-row-error   .jobs-row-status { color: var(--color-danger-hover);           background: rgba(220,38,38,0.12); }
.jobs-row-cancelled .jobs-row-status { color: #475569;         background: rgba(100,116,139,0.14); }

.jobs-row-msg {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: 2px 0 6px;
  line-height: 1.35;
  word-break: break-word;
}
.jobs-row-progress {
  height: 4px;
  background: var(--color-surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.jobs-row-progress-fill {
  height: 100%;
  background: var(--color-brand);
  transition: width var(--transition-fast);
}
.jobs-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.jobs-row-when {
  font-size: 11px;
  color: var(--color-text-muted);
}
.jobs-cancel-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-1);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background var(--transition-fast);
}
.jobs-cancel-btn:hover:not(:disabled) {
  color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  background: rgba(185, 28, 28, 0.06);
}
.jobs-cancel-btn:disabled { opacity: 0.5; cursor: default; }

/* Queued/Running state for trigger buttons (Refresh, Fetch, COA Fetch). */
button.is-queued,
button.is-running {
  opacity: 0.75;
  cursor: progress;
}

/* Toast notifications for job completion. */
.jobs-toast-root {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}
.jobs-toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
  font-size: var(--text-sm);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.jobs-toast.is-visible { opacity: 1; transform: translateY(0); }
.jobs-toast-success { border-left: 4px solid var(--color-brand); }
.jobs-toast-info    { border-left: 4px solid var(--color-accent); }
.jobs-toast-error   { border-left: 4px solid var(--color-danger-hover); }

.card-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card-header-row > h3 { margin: 0; }

/* ── Prelim Review ─────────────────────────────────────────── */

.recent-batches-list { display: flex; flex-direction: column; gap: 4px; }
.recent-batch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.12s ease;
}
.recent-batch-row:hover { background: var(--color-surface-2); }
.recent-batch-id  { font-weight: 600; white-space: nowrap; }
.recent-batch-sep { color: var(--color-text-secondary); flex-shrink: 0; }
.recent-batch-meta { font-size: var(--text-sm); color: var(--color-text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reviewed-batches-list .recent-batch-row { border-color: var(--color-success, #22c55e); opacity: 0.85; }
#reviewed-batches-list .recent-batch-row:hover { opacity: 1; }

.batch-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.batch-detail-header h2 { margin: 0; flex: 1; }

.upload-row    { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.upload-label  { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.upload-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Prelim: assay select inline with Choose File + submit (same 34px band as Historical bar selects) */
.upload-actions .upload-assay-select {
  min-width: 140px;
  height: 34px;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}
.upload-mode-btn {
  padding: 5px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
}
.upload-mode-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.upload-mode-btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.upload-mode-btn.active { background: var(--color-brand); color: #fff; font-weight: 600; }
.upload-mode-btn:not(.active):hover { background: var(--color-surface-2); color: var(--color-text); }

.table-scroll-wrapper { overflow-x: auto; }
.col-prep { width: 36px; text-align: center; }
.col-num  { text-align: center; font-variant-numeric: tabular-nums; }

/* Analyte value cell — JS creates popover dynamically, no static :hover CSS needed */
.cell-conv { position: relative; cursor: default; }

/* Prep info popover — appearance only; positioning handled via JS */
.prep-info-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 0.85em;
  line-height: 1;
}
.prep-deviant::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-warning, #b45309);
  margin-left: 3px;
  vertical-align: middle;
}

/* Samples table alignment */
#prelim-samples-table th { text-align: center; }
#prelim-samples-table td { text-align: center; }
#prelim-samples-table .col-sample-name {
  text-align: left;
  max-width: 180px;
  white-space: normal;
  word-break: break-word;
  min-width: 100px;
}
/* Eval (historical comparison) column */
#prelim-samples-table .col-eval { width: 1%; white-space: nowrap; text-align: center; padding: 4px 10px; }
button.prelim-eval-btn {
  font-size: var(--text-xs);
  padding: 3px 10px;
  min-width: 56px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  font-weight: 600;
  letter-spacing: 0.01em;
}
button.prelim-eval-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  opacity: 1;
}
button.prelim-eval-btn.eval-pass,
button.prelim-eval-btn.eval-pass:hover { background: #dcfce7; color: #166534; }
button.prelim-eval-btn.eval-warn,
button.prelim-eval-btn.eval-warn:hover { background: var(--color-warning-bg); color: #92400e; }

/* Prelim eval detail modal */
.prelim-eval-modal-card { width: min(480px, 95vw); }
.prelim-eval-modal-card .eval-detail-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-top: 8px; }
.prelim-eval-modal-card .eval-detail-table th,
.prelim-eval-modal-card .eval-detail-table td { padding: 5px 10px; text-align: center; border-bottom: 1px solid var(--color-border); }
.prelim-eval-modal-card .eval-detail-table th:first-child,
.prelim-eval-modal-card .eval-detail-table td:first-child { text-align: left; }
.prelim-eval-modal-card .eval-detail-table tr:last-child td { border-bottom: none; }
.prelim-eval-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* CCV status colors */
.ccv-cell.is-pass { background: var(--color-success-bg, #d1fae5); color: var(--color-success, var(--color-success)); }
.ccv-cell.is-warn { background: var(--color-warning-bg, var(--color-warning-bg)); color: var(--color-warning, #b45309); }
.ccv-cell.is-fail { background: var(--color-danger-bg,  var(--color-danger-bg)); color: var(--color-danger,  var(--color-danger)); }

/* CCV table — compact, auto-fit column widths */
#prelim-ccvs-table               { width: auto; table-layout: auto; }
#prelim-ccvs-table th             { text-align: center; white-space: nowrap; padding: 4px 10px; width: 1%; }
#prelim-ccvs-table th.ccv-row-label { text-align: left; width: 1%; }
#prelim-ccvs-table td             { padding: 3px 8px; }
#prelim-ccvs-table .ccv-row-label { text-align: left; white-space: nowrap; font-weight: 600; background: var(--color-surface-2); padding-right: 16px; position: sticky; left: 0; z-index: 2; }
#prelim-ccvs-table .ccv-cell      { text-align: center; white-space: nowrap; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
#prelim-ccvs-table .ccv-meta-cell { text-align: center; white-space: nowrap; font-size: var(--text-xs); color: var(--color-text-secondary); }

/* Configure View modal */
.configure-view-modal-card  { width: min(560px, 95vw); }
.configure-view-body        { padding: 16px 20px; }
.configure-view-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.configure-view-section h4  { margin: 0 0 8px; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); }
.config-checkbox-list       { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.config-checkbox-row        { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.config-checkbox-row input  { cursor: pointer; }
.modal-footer               { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--color-border); }

/* ── QC Control Charting ─────────────────────────────────────────────────── */
.qc-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (max-width: 1100px) {
  .qc-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .qc-chart-grid { grid-template-columns: 1fr; }
}
.qc-chart-card { position: relative; }
.qc-chart-card .qc-chart-title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 2px;
}
.qc-chart-card .qc-chart-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}
.qc-chart-wrap { position: relative; height: 280px; }
.qc-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* analyte multi-select panel */
.qc-analyte-panel {
  position: absolute;
  z-index: 100;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0,0,0,0.12));
  padding: var(--space-2);
  min-width: 200px;
  max-height: 260px;
  display: flex;
  flex-direction: column;
}
.qc-analyte-panel-actions {
  display: flex;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-1);
  flex-shrink: 0;
}
.qc-analyte-panel-list {
  overflow-y: auto;
  flex: 1;
}
.qc-analyte-panel-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 2px;
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
}
.qc-analyte-panel-list label:hover {
  background: var(--color-surface-hover, rgba(0,0,0,0.04));
  border-radius: var(--radius-sm);
}

/* ── Generic Order Link ─────────────────────────────────────── */
.add-order-link-btn {
  font-size: var(--text-xs);
  padding: 3px 10px;
  white-space: nowrap;
}

/* Cell must be relative so edit button can be pinned to corner */
.dash-table td.col-orderid.generic-link-td {
  position: relative;
}

/* Matches .manifest-link — bold, accent colour, centred via td text-align */
.generic-link-anchor {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  background: none !important;
}
.generic-link-anchor:hover {
  text-decoration: underline;
  background: none !important;
}

/* Edit button pinned to bottom-right corner */
.generic-link-edit-btn {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 1px 3px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  opacity: 0.45;
  line-height: 1;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.generic-link-edit-btn:hover {
  opacity: 1;
  color: var(--color-text);
  background: none;
}

/* Order Link Popover */
.order-link-popover {
  position: fixed;
  z-index: 9999;
  width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.olp-header {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.olp-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.olp-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.olp-required { color: var(--color-danger); }
.olp-optional { color: var(--color-text-muted); font-weight: 400; }

.olp-input {
  width: 100%;
  box-sizing: border-box;
}

.olp-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
}

.input-error {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

/* === Inventory Tracking ===================================================
 * Scoped styles for templates/inventory_tracking.html + inventory_tracking.js.
 * Built on existing styles.css primitives only — no design-system classes.   */

/* Filter bar: wraps to a second row when the window is too narrow for one
   row (no spilling outside the card). Every group — including the Actions
   cluster — packs left-to-right so they read in natural order: SEARCH,
   CATEGORY, TESTS, FILTERS, UPDATED IN LAST, Actions. No right-pin gaps. */
#inv-trk-filter-bar .fbar-body { flex-wrap: wrap; row-gap: 10px; }
#inv-trk-filter-bar input[type="search"] {
  height: 34px;
  width: 220px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}
#inv-trk-cat { width: 160px; }

/* Test tags rendered inside the table's Tests column. */
.test-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  margin: 1px 2px 1px 0;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.test-pill--CAN     { background: var(--color-pill-can-bg);     color: var(--color-pill-can-fg); }
.test-pill--TER     { background: var(--color-pill-ter-bg);     color: var(--color-pill-ter-fg); }
.test-pill--PES_MYC { background: var(--color-pill-pes-myc-bg); color: var(--color-pill-pes-myc-fg); }
.test-pill--HEA     { background: var(--color-pill-hea-bg);     color: var(--color-pill-hea-fg); }
.test-pill--MIC     { background: var(--color-pill-mic-bg);     color: var(--color-pill-mic-fg); }
.test-pill--RSA     { background: var(--color-pill-rsa-bg);     color: var(--color-pill-rsa-fg); }
.test-pill--GEN     { background: var(--color-pill-gen-bg);     color: var(--color-pill-gen-fg); }
.test-pill--OFC     { background: var(--color-pill-ofc-bg);     color: var(--color-pill-ofc-fg); }

/* Tracking table: fixed-layout column widths. The Item Name column is
   governed by the shared "inventory Item Name column" block below;
   min-width on the table is the horizontal-scroll floor. */
#inv-trk-table { table-layout: fixed; min-width: 1310px; }
#inv-trk-table .itk-vendor    { min-width: 132px; width: 132px; }
#inv-trk-table .itk-catalog   { min-width: 112px; width: 112px; }
#inv-trk-table .itk-cat       { min-width: 110px; width: 110px; }
#inv-trk-table .itk-tests     { min-width: 152px; width: 152px; }
#inv-trk-table .itk-unit      { min-width: 88px;  width: 88px; }
#inv-trk-table .itk-qty       { min-width: 92px;  width: 92px; }
#inv-trk-table .itk-updated   { min-width: 100px; width: 100px; }
#inv-trk-table .itk-updatedby { min-width: 122px; width: 122px; }
#inv-trk-table .itk-actions   { min-width: 138px; width: 138px; }
/* All headers and cells centered (the shared block re-aligns Item Name). */
#inv-trk-table th,
#inv-trk-table td {
  text-align: center;
  vertical-align: middle;
}
#inv-trk-table td.num { font-variant-numeric: tabular-nums; }
#inv-trk-table td .inv-row-sub {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Low-stock + nothing-on-order row tint. */
#inv-trk-table tr.row-low-no-order td { background: var(--color-danger-bg); }
#inv-trk-table tr.row-low-no-order:hover td { background: #fcd0d0; }

/* Full-width empty / loading message (avoids colspan squish with table-layout:fixed). */
.inv-table-empty-panel {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  border-top: 1px solid var(--color-border-grid);
}
.inv-table-empty-panel.hidden { display: none; }

/* Tracking table: sortable column headers. */
#inv-trk-table th[data-sort-col] { cursor: pointer; user-select: none; }
#inv-trk-table th[data-sort-col]:hover { color: var(--color-text); }
#inv-trk-table th[data-sort-col] .sort-arrow { margin-left: 3px; opacity: .35; font-style: normal; }
#inv-trk-table th[data-sort-col].sorted-asc .sort-arrow,
#inv-trk-table th[data-sort-col].sorted-desc .sort-arrow { opacity: 1; color: var(--color-brand); }

/* "Multiple" rollup info icon. */
.inv-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  /* reset native <button> chrome (this is a real button for keyboard a11y) */
  padding: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-secondary);
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  cursor: help;
  vertical-align: middle;
}
.inv-info-icon:hover { background: var(--color-border-grid); }
.inv-info-icon:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}
.inv-info-pop {
  position: fixed;
  z-index: 1200;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-text-primary);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
}
.inv-info-pop .inv-info-pop-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Row action pills (28x28, mirrors .actions-cell-inner .comment-btn). */
.inv-action-pill {
  appearance: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease,
    color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.inv-action-pill svg { width: 14px; height: 14px; display: block; }
.inv-action-pill:hover {
  background: var(--color-border-light);
  border-color: var(--color-border-grid);
  color: var(--color-text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.inv-action-pill:active { transform: translateY(0); box-shadow: none; }
.inv-action-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.inv-action-pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* On-the-way pill (informational pending qty / low-stock attention signal). */
.inv-onway-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--color-success-bg);
  color: var(--color-success);
}
.inv-onway-pill--draft {
  background: #fef9c3;
  color: #854d0e;
}
[data-theme="dark"] .inv-onway-pill--draft {
  background: #422006;
  color: #fde68a;
}
.inv-onway-pill--placeholder {
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-grid);
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.inv-onway-pill--pulse {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  animation: invPulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  will-change: transform, box-shadow;
}
@keyframes invPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55); }
  50%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(217, 119, 6, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .inv-onway-pill--pulse {
    animation: none;
    outline: 2px solid var(--color-warning);
  }
}

/* Tracking Qty cell — green up-arrow flagging a recent received-order credit. */
.inv-recent-receive-arrow {
  display: inline-block;
  margin-left: 4px;
  color: var(--color-success);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
}

/* Inventory popovers (re-order / update-stock) — fixed, body-appended. */
.inv-popover {
  position: fixed;
  z-index: 1100;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  animation: invPopIn 0.12s ease-out;
}
@keyframes invPopIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inv-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-light);
}
.inv-popover-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-popover-body { padding: 12px 14px; font-size: 13px; color: var(--color-text-secondary); }
.inv-popover-body .inv-popover-meta { color: var(--color-text-muted); margin-bottom: 10px; }
.inv-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 12px;
}

/* Add-to-order line + qty stepper. */
.inv-order-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.inv-stepper button {
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.inv-stepper button:hover { background: var(--color-border-light); }
.inv-stepper input {
  width: 48px;
  height: 30px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.inv-stepper input::-webkit-outer-spin-button,
.inv-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inv-order-unit { font-size: 12px; color: var(--color-text-muted); }
.inv-order-line.inv-order-line--mt { margin-top: 8px; }
.inv-stock-input {
  width: 96px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

/* Bulk Update + Group restock modals. */
.modal-overlay > .modal-card.inv-modal-card {
  width: min(960px, 95vw);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.modal-overlay > .modal-card.inv-modal-card.inv-group-modal-card { width: min(680px, 95vw); }
.inv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.inv-modal-header h3 { margin: 0; font-size: 16px; }
.inv-modal-body { padding: 8px 18px; overflow-y: auto; flex: 1 1 auto; position: relative; }
.inv-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
}
.inv-bulk-table, .inv-group-table { width: 100%; border-collapse: collapse; }
.inv-bulk-table th, .inv-group-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-2);
  box-shadow: 0 1px 0 var(--color-border);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-align: center;
  padding: 8px 12px;
  border-right: 1px solid var(--color-border-grid);
}
.inv-bulk-table td, .inv-group-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border-grid);
  text-align: center;
  vertical-align: middle;
}
/* Column dividers: 1px between cells, none on the trailing edge. */
.inv-bulk-table th:last-child, .inv-group-table th:last-child,
.inv-bulk-table td:last-child, .inv-group-table td:last-child {
  border-right: none;
}
.inv-bulk-table input[type="number"] {
  width: 90px;
  height: 32px;
  margin: 0 auto;
  display: block;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
/* Long chemical names must not blow out the modal column (full name in
   the cell's title=). */
.inv-bulk-item-name {
  font-weight: 600;
  display: inline-block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Mobile/tablet: stack the Bulk Update table into per-row cards. */
@media (max-width: 767px) {
  .modal-overlay > .modal-card.inv-modal-card { width: 95vw; }
  .inv-bulk-table thead { display: none; }
  .inv-bulk-table, .inv-bulk-table tbody, .inv-bulk-table tr, .inv-bulk-table td {
    display: block;
    width: 100%;
  }
  .inv-bulk-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    padding: 6px 4px;
  }
  .inv-bulk-table td { border-bottom: none; border-right: none; padding: 6px 10px; }
  .inv-bulk-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }
  .inv-stepper button { width: 44px; height: 44px; font-size: 18px; }
  .inv-stepper input { height: 44px; width: 56px; }
}

/* Saved view exclusions — chip strip under the filter bar. */
.inv-excluded-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 0;
}
.inv-excluded-pills[hidden] { display: none; }
.inv-excluded-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: var(--text-xs);
  color: var(--color-text-primary);
}
.inv-excluded-pill-label { font-weight: 600; }
.inv-excluded-pill-x {
  appearance: none;
  border: none;
  background: transparent;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}
.inv-excluded-pill-x:hover {
  background: var(--color-surface-1);
  color: var(--color-danger);
}

/* Manage View modal — two exclusion columns. */
.modal-overlay > .modal-card.inv-modal-card.inv-trk-view-modal-card {
  width: min(560px, 95vw);
}
.inv-trk-view-intro {
  margin: 0 0 12px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.inv-trk-view-cols { display: flex; gap: 16px; }
.inv-trk-view-col { flex: 1 1 0; min-width: 0; }
.inv-trk-view-col-title {
  margin: 0 0 6px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.inv-trk-view-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
}
.inv-trk-view-list .hint { padding: 10px; margin: 0; }
.inv-trk-view-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
}
.inv-trk-view-row:last-child { border-bottom: none; }
.inv-trk-view-row:hover { background: var(--color-surface-2); }
.inv-trk-view-check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--color-brand);
  cursor: pointer;
}
.inv-trk-view-row-label {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
@media (max-width: 560px) {
  .inv-trk-view-cols { flex-direction: column; }
}
/* === end Inventory Tracking === */

/* === Inventory Orders ====================================================
 * Scoped styles for templates/inventory_orders.html + inventory_orders.js.
 * Built on existing styles.css primitives + the Inventory Tracking block
 * above (.test-pill, .inv-stepper, .inv-action-pill, .inv-modal-* are reused).
 */

/* Header strip above the active-order table. */
.inv-ord-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.inv-ord-toolbar-info {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.inv-ord-toolbar-info span {
  font-weight: 600;
  color: var(--color-text-primary);
}
.inv-ord-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Active-order table: fixed-layout column widths (Item Name flexes — see
   the shared "inventory Item Name column" block). min-width is the
   horizontal-scroll floor. */
#inv-ord-active-table { table-layout: fixed; min-width: 1320px; }
#inv-ord-active-table .iord-check    { width: 38px; }
#inv-ord-active-table .iord-vendor   { width: 124px; }
#inv-ord-active-table .iord-catalog  { width: 104px; }
#inv-ord-active-table .iord-cat      { width: 108px; }
#inv-ord-active-table .iord-tests    { width: 142px; }
#inv-ord-active-table .iord-stock    { width: 116px; }
#inv-ord-active-table .iord-ous      { width: 124px; }
#inv-ord-active-table .iord-price    { width: 104px; }
#inv-ord-active-table .iord-qty      { width: 100px; }
#inv-ord-active-table .iord-actions  { width: 96px; }
#inv-ord-active-table th,
#inv-ord-active-table td {
  text-align: center;
  vertical-align: middle;
}
#inv-ord-active-table td.num { font-variant-numeric: tabular-nums; }

/* Inline editable number cells (Order Qty / Unit Price). */
.inv-ord-cell-input {
  width: 100%;
  max-width: 84px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}
.inv-ord-cell-input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-brand);
}

/* Past Orders: search field above the compact table. */
.inv-ord-past-search { margin-bottom: 14px; }
.inv-ord-past-search input[type="search"] {
  height: 36px;
  width: 320px;
  max-width: 100%;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}

/* Submitted & Past compact tables: fixed-layout column widths. Both tables
   share the .iord-past-* cell classes; the Submitted table swaps the Items
   column for a wider receive-Progress column. */
#inv-ord-past-table,
#inv-ord-submitted-table { table-layout: fixed; }
#inv-ord-past-table .iord-past-approved,
#inv-ord-submitted-table .iord-past-approved { width: 132px; }
#inv-ord-past-table .iord-past-by,
#inv-ord-submitted-table .iord-past-by       { width: 148px; }
#inv-ord-past-table .iord-past-items         { width: 80px; }
#inv-ord-submitted-table .iord-past-progress { width: 132px; }
#inv-ord-past-table .iord-past-total,
#inv-ord-submitted-table .iord-past-total    { width: 112px; }
#inv-ord-past-table .iord-past-actions,
#inv-ord-submitted-table .iord-past-actions  { width: 108px; }
/* Disable sticky thead — the expand detail row sits inside the same table;
   the global z-index:2 sticky header would paint over it. */
#inv-ord-past-table thead th,
#inv-ord-submitted-table thead th { position: static; }
#inv-ord-past-table > thead th,
#inv-ord-past-table > tbody > tr.inv-ord-past-row > td,
#inv-ord-submitted-table > thead th,
#inv-ord-submitted-table > tbody > tr.inv-ord-past-row > td {
  text-align: center;
  vertical-align: middle;
}
#inv-ord-past-table td.num,
#inv-ord-submitted-table td.num { font-variant-numeric: tabular-nums; }
.inv-ord-past-row { transition: background-color 400ms ease; }
.inv-ord-past-row--highlight { background-color: var(--color-brand-muted); }

/* RUSH pill — design-system primitive. Shared by the active-order table,
   the past-order code cell, and past-order detail line items. The legacy
   .inv-ord-rush-badge class is kept as an alias for one release. */
.inv-rush-pill,
.inv-ord-rush-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 9999px;
  background: var(--color-danger, var(--color-danger));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.3;
}
.inv-rush-pill + .inv-rush-pill-name,
.inv-rush-pill-name + .inv-rush-pill { margin-left: 6px; }

/* RUSH toggle — design-system primitive (role="switch"). Shared by the
   re-order popover and the Bulk Update modal. */
.inv-rush-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  padding: 0;
  flex: none;
}
.inv-rush-toggle::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 140ms ease;
}
.inv-rush-toggle[aria-checked="true"] {
  background: var(--color-danger, var(--color-danger));
  border-color: var(--color-danger, var(--color-danger));
}
.inv-rush-toggle[aria-checked="true"]::before { transform: translateX(16px); }
.inv-rush-toggle:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-accent));
  outline-offset: 2px;
}
.inv-rush-toggle[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Re-order popover: the "Mark as rush" row beneath the qty stepper. */
.inv-pop-rush-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.inv-pop-rush-label { font-size: 13px; color: var(--color-text-primary); }

/* Chevron-expand detail row + nested line-item sub-table. */
.inv-ord-past-detail > td { padding: 0 !important; background: var(--color-surface-2); }
.inv-ord-past-detail-inner { padding: 10px 14px 14px; }
/* table-layout: fixed + explicit column widths so a long item name can no
   longer overflow and shove the vendor/catalog columns sideways. */
.inv-ord-past-detail-table { width: 100%; table-layout: fixed; }
.inv-ord-past-detail-table th,
.inv-ord-past-detail-table td {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-ord-past-detail-table td.num { font-variant-numeric: tabular-nums; }
/* 8-column split — Item Name gets the lion's share, the rest stay aligned. */
.inv-ord-past-detail-table th:nth-child(1),
.inv-ord-past-detail-table td:nth-child(1) { width: 28%; }
.inv-ord-past-detail-table th:nth-child(2),
.inv-ord-past-detail-table td:nth-child(2) { width: 12%; }
.inv-ord-past-detail-table th:nth-child(3),
.inv-ord-past-detail-table td:nth-child(3) { width: 12%; }
.inv-ord-past-detail-table th:nth-child(4),
.inv-ord-past-detail-table td:nth-child(4) { width: 11%; }
.inv-ord-past-detail-table th:nth-child(5),
.inv-ord-past-detail-table td:nth-child(5) { width: 10%; }
.inv-ord-past-detail-table th:nth-child(6),
.inv-ord-past-detail-table td:nth-child(6) { width: 8%; }
.inv-ord-past-detail-table th:nth-child(7),
.inv-ord-past-detail-table td:nth-child(7) { width: 9%; }
.inv-ord-past-detail-table th:nth-child(8),
.inv-ord-past-detail-table td:nth-child(8) { width: 10%; }
/* Item Name cell: centered, clamped to 2 lines (full string in title=). */
.inv-ord-past-detail-table th:nth-child(1) { text-align: center; }
.inv-ord-past-detail-table td.iord-detail-name {
  white-space: normal;
  text-align: center;
}
.iord-detail-name-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
.iord-detail-name-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  min-width: 0;
  word-break: break-word;
}
.inv-ord-past-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.inv-ord-past-detail-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.inv-ord-detail-allreceived,
.inv-ord-received-done {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-success);
}
.iord-receive-cell { white-space: nowrap; }

/* Receive popover — optional note field. */
.inv-receive-note-label {
  display: block;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.inv-receive-note {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 4px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}
.inv-receive-note:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-brand);
}

/* Add Item modal — wider card + two-column body. */
.modal-overlay > .modal-card.inv-modal-card.inv-ord-add-modal-card {
  width: min(900px, 95vw);
}
.inv-ord-add-search-wrap { margin-bottom: 12px; }
.inv-ord-add-search-wrap input[type="search"] {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}
.inv-ord-add-layout {
  display: flex;
  gap: 14px;
}
.inv-ord-add-col { flex: 1 1 0; min-width: 0; }
.inv-ord-add-col-title {
  margin: 0 0 6px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.inv-ord-add-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
}
.inv-ord-add-list .hint { padding: 12px; margin: 0; }
.inv-ord-add-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  background: transparent;
  cursor: pointer;
}
.inv-ord-add-item:last-child { border-bottom: none; }
.inv-ord-add-item:hover { background: var(--color-surface-2); }
.inv-ord-add-item.selected { background: var(--color-brand-muted); }
.inv-ord-add-item-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.inv-ord-add-item-sub {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Add Item modal — detail pane. */
.inv-ord-add-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.inv-ord-add-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 18px;
  margin-bottom: 12px;
}
.inv-ord-detail-field { display: flex; flex-direction: column; }
.inv-ord-detail-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.inv-ord-detail-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.inv-ord-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Mobile/tablet: stack the Add Item modal columns. */
@media (max-width: 640px) {
  .inv-ord-add-layout { flex-direction: column; }
  .inv-ord-add-detail-grid { grid-template-columns: 1fr; }
  .inv-ord-detail-actions { align-items: stretch; }
}
/* === end Inventory Orders === */

/* === Inventory Catalog ===================================================
 * Scoped styles for templates/inventory_catalog.html + inventory_catalog.js.
 * Built on existing styles.css primitives + the Inventory Tracking block
 * (.test-pill, .inv-action-pill, .inv-modal-* are reused). No design-system.
 */

/* Filter bar: wraps to a second row when the window is too narrow for one
   row (no spilling outside the card). Every group packs left-to-right so
   the filters read in natural order with no right-pin gaps. */
#inv-cat-filter-bar .fbar-body { flex-wrap: wrap; row-gap: 10px; }
#inv-cat-filter-bar input[type="search"] {
  height: 34px;
  width: 220px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}
#inv-cat-cat { width: 160px; }

/* Toolbar: catalog action buttons above the table. */
.inv-cat-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* Existing-groups strip above the table. */
.inv-cat-groups {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.inv-cat-groups[hidden] { display: none; }
.inv-cat-groups-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.inv-cat-groups-list { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-cat-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}
.inv-cat-group-name { font-weight: 600; color: var(--color-text-primary); }
.inv-cat-group-count { font-size: var(--text-xs); color: var(--color-text-muted); }
.inv-cat-group-link {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-brand);
  cursor: pointer;
}
.inv-cat-group-link:hover { text-decoration: underline; }
.inv-cat-group-link--danger { color: var(--color-danger); }

/* ── RBAC: hide inventory write/delete controls for read-only users ──────
   Driven by body.inv-no-catalog-write / .inv-no-catalog-delete, set from
   inventory.catalog write/delete perms in the catalog/tracking/settings
   templates. The backend already enforces these perms (403); this just keeps
   read-only users from seeing controls they can't use. "Reorder" is an
   inventory.orders action and is intentionally NOT gated here. */
body.inv-no-catalog-write #inv-cat-add-btn,
body.inv-no-catalog-write #inv-cat-group-btn,
body.inv-no-catalog-write #inv-cat-import-btn,
body.inv-no-catalog-write .inv-cat-tests-plus,
body.inv-no-catalog-write .inv-cat-group-link:not(.inv-cat-group-link--danger),
body.inv-no-catalog-write .inv-action-pill[data-action="edit"],
body.inv-no-catalog-write #inv-trk-bulk-update,
body.inv-no-catalog-write .inv-action-pill[data-action="update-stock"],
body.inv-no-catalog-write .inv-action-pill[data-action="update-group-stock"] {
  display: none !important;
}
body.inv-no-catalog-delete .inv-action-pill[data-action="delete"],
body.inv-no-catalog-delete .inv-cat-group-link--danger {
  display: none !important;
}

/* Catalog table: fixed-layout column widths (Item Name flexes — see the
   shared "inventory Item Name column" block). min-width is the
   horizontal-scroll floor. */
#inv-cat-table { table-layout: fixed; min-width: 1260px; }
#inv-cat-table .icat-vendor   { width: 130px; }
#inv-cat-table .icat-catalog  { width: 110px; }
#inv-cat-table .icat-cat      { width: 112px; }
#inv-cat-table .icat-tests    { width: 240px; }
#inv-cat-table .icat-unit     { width: 92px; }
#inv-cat-table .icat-ous      { width: 122px; }
#inv-cat-table .icat-price    { width: 92px; }
#inv-cat-table .icat-actions  { width: 96px; }
#inv-cat-table th,
#inv-cat-table td {
  text-align: center;
  vertical-align: middle;
}
#inv-cat-table td.num { font-variant-numeric: tabular-nums; }

/* ── Shared inventory "Item Name" column ──────────────────────────
   The Stock & Tracking, Catalog and Active-cart tables all use
   table-layout: fixed with explicit px widths on every column except
   Item Name. Item Name itself carries NO width, so it is the single
   flexible column and absorbs all leftover table width. INVARIANT: each
   table's min-width = sum of its fixed columns + a readable name floor
   (~260px); that keeps the name column from collapsing to an illegible
   sliver, and below that width the table scrolls inside .table-scroll.
   (A cell min-width is ignored under table-layout: fixed, so the floor
   must live on the table's min-width.) The Past-orders detail sub-table
   keeps its own .iord-detail-name-* rules. */
#inv-trk-table .itk-name,
#inv-cat-table .icat-name,
#inv-ord-active-table .iord-name {
  text-align: center;
}
/* Name text: clamp to 2 lines with an ellipsis (full string lives in the
   td's title=) instead of a character-by-character crush. */
.inv-name-cell-inner {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  text-align: center;
}
/* Active-cart name cell: RUSH pill beside the clamped name, centered as a group. */
.inv-name-cell-rush {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.inv-name-cell-rush .inv-name-cell-inner { flex: 0 1 auto; min-width: 0; }

.inv-cat-tests-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.inv-cat-tests-current {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.inv-cat-tests-plus {
  appearance: none;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease, box-shadow 120ms ease;
}
.inv-cat-tests-plus svg { width: 12px; height: 12px; display: block; flex-shrink: 0; }
.inv-cat-tests-plus:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-grid);
  color: var(--color-text-primary);
}
.inv-cat-tests-plus.active {
  background: var(--color-brand-muted, #e8f5e9);
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.inv-cat-tests-plus:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Floating palette — appended to body, positioned via JS */
.inv-cat-tests-palette {
  position: absolute;
  z-index: 1300;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-grid);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
  transform: translateX(-50%);
  white-space: nowrap;
}
.inv-cat-inline-test-pill {
  min-height: 22px;
  padding: 0 8px;
  font-size: var(--text-xs);
}

/* Item-name hyperlink — brand (green) hover, never the default blue accent. */
a.inv-name-link {
  color: var(--color-text-primary);
  text-decoration: none;
}
a.inv-name-link:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

/* Add/Edit Item + Create Group modals — narrower form cards. */
.modal-overlay > .modal-card.inv-modal-card.inv-cat-form-modal-card {
  width: min(620px, 95vw);
}
.modal-overlay > .modal-card.inv-modal-card.inv-cat-group-modal-card {
  width: min(560px, 95vw);
}

/* Two-column form grid inside the Add/Edit Item modal. */
.inv-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin: 6px 0;
}
.inv-form-field { display: flex; flex-direction: column; gap: 4px; }
.inv-form-field--wide { grid-column: 1 / -1; }
.inv-form-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.inv-form-input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}
select.inv-form-input { height: 34px; }
textarea.inv-form-textarea {
  height: auto;
  min-height: 56px;
  padding: 8px 10px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
}
.inv-form-input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-brand);
}
.inv-cat-test-pillrow { display: flex; flex-wrap: wrap; gap: 6px; }

/* Create Group modal — searchable multi-select picker. */
.inv-cat-pick-search {
  height: 34px;
  width: 100%;
  padding: 0 10px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-surface-1);
  color: var(--color-text);
  box-sizing: border-box;
}
.inv-cat-pick-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-1);
}
.inv-cat-pick-list .hint { padding: 12px; margin: 0; }
.inv-cat-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
}
.inv-cat-pick-row:last-child { border-bottom: none; }
.inv-cat-pick-row:hover { background: var(--color-surface-2); }
.inv-cat-pick-row.is-taken { cursor: not-allowed; opacity: 0.6; }
.inv-cat-pick-check { flex: none; }
.inv-cat-pick-text { display: flex; flex-direction: column; min-width: 0; }
.inv-cat-pick-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.inv-cat-pick-sub { font-size: 11px; color: var(--color-text-muted); }
.inv-cat-pick-taken { font-style: italic; }

/* Mobile/tablet: collapse the item form to a single column. */
@media (max-width: 560px) {
  .inv-form-grid { grid-template-columns: 1fr; }
}
/* === end Inventory Catalog === */


/* === Inventory Tracking — filter bar layout tweaks ====================== */
/* Square eye icon button (Manage View). Sized to match the 34px height of the
   adjacent Clear / Bulk Update buttons so all three sit at the same baseline. */
.inv-trk-view-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  box-sizing: border-box;
  flex: none;
  vertical-align: middle;
}

/* "Mark as Rush" checkbox label used in the Add-Item-to-Order modal detail pane. */
.inv-rush-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  user-select: none;
}
.inv-rush-toggle-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--color-danger, var(--color-danger));
}
.inv-rush-toggle-text { font-weight: 500; }


/* ═══════════════════════════════════════════════════════════
   Settings: cohesive section primitives (scoped to .settings-page
   so other pages' .tab-panel/.card are untouched). Typography is
   normalized now; the reusable .settings-* helpers are applied
   section-by-section in a follow-up visual pass.
   ═══════════════════════════════════════════════════════════ */
.settings-page .tab-panel .card > h2,
.settings-page .tab-panel .card > .settings-section-head > h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}
.settings-page .section-desc {
  margin: 2px 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.settings-page .settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.settings-page .settings-section-head > h2 { margin: 0; }
.settings-page .settings-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-3);
}
.settings-page .settings-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
/* Merged settings tabs: each former tab is kept in place as a stacked
   subsection (still a .tab-panel, shown via the tab→panels group map). When a
   merged tab activates more than one subsection they stack with separation. */
.settings-page .settings-subsection { margin-bottom: var(--space-5, 32px); }
.settings-page .settings-subsection.active ~ .settings-subsection.active {
  padding-top: var(--space-5, 32px);
  border-top: 1px solid var(--color-border);
}