/* CSS Variables for Theming */
:root {
  /* Light Mode Colors — Steel blue + amber: industrial-utilitarian */
  --primary-color: #1e4976;
  --primary-dark: #163758;
  --primary-light: #2a6399;
  --accent-color: #c75a00;
  --accent-dark: #a34800;
  --accent-light: #e06d10;

  /* Background Colors */
  --bg-body: #d8dde6;
  --bg-container: #f7f8fa;
  --bg-header: #1a3d66;
  --bg-section: #eef0f4;
  --bg-card: #ffffff;
  --bg-hover: #e8edf4;

  /* Text Colors */
  --text-primary: #1a2535;
  --text-secondary: #3d5068;
  --text-tertiary: #566375;
  --text-on-primary: #ffffff;
  --text-heading: #0f1e2e;

  /* Border Colors */
  --border-color: #d0d7e2;
  --border-focus: #1e4976;
  --border-error: #c75a00;

  /* Status Colors */
  --status-success: #0e9e6e;
  --status-success-bg: #d0f4e8;
  --status-warning: #d97706;
  --status-warning-bg: #fef3c7;
  --status-error: #c0392b;
  --status-error-bg: #fde8e6;
  --status-info: #1e4976;
  --status-info-bg: #dce8f5;

  /* Risk Level Colors */
  --risk-critical: #c0392b;
  --risk-critical-bg: #fde8e6;
  --risk-high: #d97706;
  --risk-high-bg: #fef3c7;
  --risk-moderate: #ca8a04;
  --risk-moderate-bg: #fef9c3;
  --risk-low: #0e9e6e;
  --risk-low-bg: #d0f4e8;
  --risk-none: #8a97a6;
  --risk-none-bg: #eef0f4;

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgba(15, 30, 50, 0.06);
  --shadow-md: 0 3px 8px -1px rgba(15, 30, 50, 0.12);
  --shadow-lg: 0 8px 20px -2px rgba(15, 30, 50, 0.14);
  --shadow-xl: 0 16px 32px -4px rgba(15, 30, 50, 0.16);

  /* Spacing */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Type scale — use these in new/edited rules; legacy ad-hoc sizes migrate opportunistically */
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;

  /* Aliases */
  --bg-input: #f0f3f7;
  --text-muted: #566375;
  --card-background: #ffffff;
  --primary-hover: #163758;
}

/* Dark Mode Colors */
[data-theme="dark"] {
  --primary-color: #2a6399;
  --primary-dark: #1e4976;
  --primary-light: #3d7fb8;
  --accent-color: #e06d10;
  --accent-dark: #c75a00;
  --accent-light: #f08030;

  /* Background Colors */
  --bg-body: #0d1520;
  --bg-container: #162030;
  --bg-header: #0d1520;
  --bg-section: #0d1520;
  --bg-card: #1e2e42;
  --bg-hover: #253d56;

  /* Text Colors */
  --text-primary: #e8edf4;
  --text-secondary: #c5d4e5;
  --text-tertiary: #a8b8cc;
  --text-on-primary: #ffffff;
  --text-heading: #f0f5fc;

  /* Border Colors */
  --border-color: #2a3e55;
  --border-focus: #3d7fb8;
  --border-error: #e06d10;

  /* Status Colors */
  --status-success: #14b87e;
  --status-success-bg: #0a3d2a;
  --status-warning: #e09010;
  --status-warning-bg: #4a2f00;
  --status-error: #e05040;
  --status-error-bg: #4a1010;
  --status-info: #3d7fb8;
  --status-info-bg: #0f2a42;

  /* Risk Level Colors */
  --risk-critical: #e05040;
  --risk-critical-bg: #4a1010;
  --risk-high: #e09010;
  --risk-high-bg: #4a2f00;
  --risk-moderate: #c8a800;
  --risk-moderate-bg: #3a2e00;
  --risk-low: #14b87e;
  --risk-low-bg: #0a3d2a;
  --risk-none: #6a8099;
  --risk-none-bg: #1e2e42;

  /* Shadow */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 10px -1px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 24px -2px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 20px 40px -4px rgba(0, 0, 0, 0.65);

  /* Aliases */
  --bg-input: #162030;
  --text-muted: #a8b8cc;
  --card-background: #1e2e42;
  --primary-hover: #3d7fb8;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
  padding: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
  background: var(--bg-container);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  /* `clip` (not `hidden`) clips the rounded corners WITHOUT making this a scroll
     container — so descendant `position: sticky` (SOP editor/viewer diagram aside,
     Assemble wizard aside) pins to the viewport instead of to this box. */
  overflow: clip;
}

/* Header */
header {
  background: var(--bg-header);
  color: var(--text-on-primary);
  padding: 30px;
}

/* Header Layout */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.shop-selector-container {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}
.shop-selector {
  padding: 6px 10px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #111);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 36px;
}
.shop-selector:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.btn-header-logout {
  padding: 8px 18px;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.2em;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1) rotate(15deg);
}

.theme-toggle-btn:active {
  transform: scale(0.95) rotate(0deg);
}

.theme-icon {
  display: inline-block;
  line-height: 1;
}

header h1 {
  margin-bottom: 16px;
  font-size: 2em;
  text-align: left;
  letter-spacing: -0.01em;
}

/* Navigation */
nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.nav-btn {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.nav-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.4);
  color: #ffffff;
}

.nav-btn.active {
  background: var(--accent-color);
  color: #ffffff;
  border-color: var(--accent-color);
}

.nav-btn:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

/* Main Content */
main {
  padding: 40px;
}

.view {
  display: none;
}

.view.active {
  display: block;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

h2 {
  color: var(--text-heading);
  margin-bottom: 25px;
  font-size: 2em;
  border-bottom: 3px solid var(--accent-color);
  padding-bottom: 10px;
}

h3 {
  color: var(--text-heading);
  margin-bottom: 15px;
  font-size: 1.5em;
}

h4 {
  color: var(--text-heading);
  margin-bottom: 10px;
  font-size: 1.2em;
}

/* Form Card */
.form-card {
  background: var(--bg-section);
  padding: 30px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

/* Form Styles */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-heading);
  font-size: 1em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 1em;
  transition: all 0.3s;
  background: var(--bg-container);
  color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(30, 73, 118, 0.15);
}

/* Global form-control baseline — same look for controls OUTSIDE a .form-group
   (filters, search bars, grade selects, datalist combos) that previously got
   ad-hoc per-feature styling and drifted from the form controls. Excludes
   checkbox/radio/file/range (styled separately) and does NOT set width:100%
   (inline filters must size to content). No !important, so the mobile
   16px-anti-zoom rule and feature classes still win. */
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]) {
  padding: 10px 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-family: inherit;
  background: var(--bg-container);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}
select:focus,
textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(30, 73, 118, 0.15);
}

/* App-wide brand accent on native checkboxes/radios (blue bubbles/checks). */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--primary-color);
}

/* Standard radio/checkbox row: bubble vertically centered with its label text,
   44px touch target. Use for every option row (thread verification, spec form,
   future forms) instead of hand-rolling alignment per feature. */
.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  color: var(--text-primary);
  min-height: 44px;
  padding: 8px 0;
  margin-bottom: 0;
  cursor: pointer;
}
.radio-option input[type="radio"],
.radio-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

.form-inline {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-inline .form-group {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

/* ============================================================================
   .form-grid — reusable, responsive labeled-form layout (PREFER over .form-inline
   for new forms). A 12-column grid with intentional per-field widths, so a field's
   size is defined by its span (not by leftover flex space), rows align cleanly,
   and hidden conditional fields reflow with no gaps.

   USAGE:
     <form class="form-grid">
       <div class="form-group fg-span-3">…</div>   <!-- narrow -->
       <div class="form-group fg-span-6">…</div>   <!-- wide -->
       <button type="submit" class="fg-span-4">Save</button>
     </form>
   Spans: fg-span-2/3/4/6/12 (12 = full row). Default (no class) = span 4.
   Field help text goes in <small class="field-hint">…</small> inside the group.
   Collapses to 1 column ≤768px and 6 columns ≤1100px automatically.
   ============================================================================ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px 20px;
  align-items: start; /* a taller (hint) cell grows down, never shifts row-mates */
}
.form-grid > .form-group {
  grid-column: span 4;
  margin-bottom: 0;
  min-width: 0; /* allow cells to shrink instead of overflowing the track */
}
/* Intentional per-field widths */
.form-grid .fg-span-2  { grid-column: span 2; }
.form-grid .fg-span-3  { grid-column: span 3; }
.form-grid .fg-span-4  { grid-column: span 4; }
.form-grid .fg-span-6  { grid-column: span 6; }
.form-grid .fg-span-12 { grid-column: span 12; }

/* Uniform control height across EVERY control type in the grid (text inputs,
   selects, and the custom multiselect header) — kills the varying-height problem.
   A FIXED height (not min-height) is required: inputs inherit 10px padding from
   the global baseline while selects get 12px from .form-group select, so a shared
   min-height still left inputs at 44px and selects at 48px. Fixing height makes
   the padding difference irrelevant — all controls render identically at 48px
   (>=44px touch target). box-sizing:border-box so the height includes padding+border. */
.form-grid input:not([type="checkbox"]):not([type="radio"]),
.form-grid select,
.form-grid .custom-multiselect-header {
  height: 48px;
  box-sizing: border-box;
  font-size: var(--fs-base);
}
/* Textareas grow with content — floor only, never a fixed height. */
.form-grid textarea {
  min-height: 88px;
  box-sizing: border-box;
  font-size: var(--fs-base);
}

/* Submit (and other bare buttons) are grid items but not .form-group — align
   them to the bottom of their cell so they sit level with inputs, not labels. */
.form-grid button[type="submit"],
.form-grid .form-grid-action {
  align-self: end;
  min-height: 44px;
}

/* Field help text — reserved line keeps first-render alignment even before an
   async hint (e.g. thread "mates with") populates. */
.form-grid .field-hint {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  min-height: 1.1em;
  line-height: 1.3;
}

/* Catch-Rod Model+Length wrapper: a single grid item whose two fields sit in a
   flex row (JS toggles it display:flex/none, so flex — not grid — here). Children
   share the width equally. */
.cr-fields {
  gap: 16px;
}
.cr-fields > .form-group {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* Small-laptop breakpoint: 12 → 6 columns so 4-per-row doesn't get cramped.
   Clamp wide spans to the 6-col track. */
@media (max-width: 1100px) {
  .form-grid { grid-template-columns: repeat(6, 1fr); }
  .form-grid .fg-span-12 { grid-column: span 6; }
}

/* Return-to-shop Thread Verification — per-position cards.
   The section lives inside a .form-group, so .form-group label (bold, heading
   color, 1em) would otherwise make the radio OPTIONS look like headings, as
   large as the position title. These scoped rules give each thread its own
   bounded card with a dominant header and normal-weight, selectable options. */
#return-thread-verification .rtv-row,
#return-pack-thread-verification .rtv-row {
  border: 1px solid var(--border-color);
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--bg-container);
}
#return-thread-verification .rtv-row:last-child,
#return-pack-thread-verification .rtv-row:last-child {
  margin-bottom: 0;
}
#return-thread-verification .rtv-position-title,
#return-pack-thread-verification .rtv-position-title {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 2px;
}
/* The three radio options use the shared .radio-option pattern (flex-centered
   bubble, 44px target); this only sets the option font-size so they don't read
   as headings like the inherited .form-group label style. */
#return-thread-verification .rtv-row label.radio-option,
#return-pack-thread-verification .rtv-row label.radio-option {
  font-size: var(--fs-sm);
}

/* Parts Grid */
.parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

/* Form Actions (button row) */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.form-actions .btn {
  flex: 1;
  min-width: 120px;
  text-align: center;
}

/* Standard modal footer: primary + cancel in a row on desktop, auto-stacking
   on narrow screens. Was used in markup with no CSS, so buttons fell to default
   block flow (the Ship modal's Cancel hung outside the dialog). */
.modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.modal-actions .btn {
  flex: 1;
  min-width: 130px;
  text-align: center;
}

/* Buttons */
.btn {
  padding: 12px 30px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--primary-color);
  color: var(--text-on-primary);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--text-secondary);
  color: var(--text-on-primary);
}

.btn-secondary:hover {
  background: var(--text-tertiary);
  transform: translateY(-1px);
}

/* Destructive actions (Delete, Remove, Deactivate, Cancel) use the error red,
   NOT the amber accent — previously these shared --accent-color and were
   visually indistinguishable from normal accent actions. */
.btn-danger {
  background: var(--status-error);
  color: #ffffff;
}

.btn-danger:hover {
  filter: brightness(0.92);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.875em;
  text-transform: none;
  margin: 0 4px;
}

/* Info Box */
.info-box {
  background: var(--status-info-bg);
  border-left: 4px solid var(--status-info);
  padding: 20px;
  margin: 20px 0;
  border-radius: var(--radius-sm);
}

.info-box h4 {
  color: var(--text-heading);
  margin-bottom: 10px;
}

.info-box p {
  color: var(--text-primary);
  margin: 5px 0;
}

/* Success Message */
.success-message {
  background: var(--status-success-bg);
  border-left: 4px solid var(--status-success);
  color: var(--text-heading);
  padding: 20px;
  margin: 20px 0;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.hidden {
  display: none !important;
}

/* Motor Cards */
.motor-card {
  background: var(--bg-card);
  padding: 20px;
  margin: 15px 0;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  transition: all 0.3s;
}

.motor-card:hover {
  border-color: var(--accent-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.motor-card h4 {
  color: var(--text-heading);
  margin-bottom: 10px;
}

.motor-card p {
  color: var(--text-secondary);
  margin: 5px 0;
}

.motor-card button {
  margin-top: 15px;
}

.motor-card--active {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: none;
}

.motor-card--active:hover {
  transform: none;
}

.motor-card-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.motor-card-header h4 {
  margin: 0;
}

.motor-card-specs {
  color: var(--text-secondary);
  font-size: 0.95em;
}

.motor-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.motor-card--active #parts-selection {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  animation: slideDown 0.3s ease-out;
}

.motor-parts-section {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.motor-parts-section-title {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.motor-parts-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
}

.part-label {
  font-weight: 600;
  color: var(--text-heading);
  font-size: 0.85em;
  white-space: nowrap;
}

.part-sn {
  color: var(--text-secondary);
  font-size: 0.85em;
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-parts-title {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-top: 8px;
  margin-bottom: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
}

/* Collapsed-by-default parts list on motor cards. The parts/pack-parts grid is
   long and pushes the run editor + field-data form far down the page, so it
   lives behind a "View Parts" toggle. The summary is the always-visible control;
   the .motor-parts-section (its usual card chrome) renders inside when open. */
.motor-parts-details {
  margin-top: 12px;
}

.motor-parts-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;               /* touch target (design principle #4) */
  padding: 8px 14px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-heading);
  list-style: none;               /* hide the native disclosure triangle */
  user-select: none;
}
.motor-parts-summary::-webkit-details-marker { display: none; }

.motor-parts-summary:hover {
  border-color: var(--primary-color);
}

.motor-parts-summary:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Chevron rotates when the details is open. */
.motor-parts-summary .motor-parts-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--text-tertiary);
  font-size: 0.9em;
}
.motor-parts-details[open] > .motor-parts-summary .motor-parts-chevron {
  transform: rotate(90deg);
}

/* Inside a details, drop the section's top margin (the summary already spaces it). */
.motor-parts-details[open] > .motor-parts-section {
  margin-top: 8px;
}

/* Assembly Record button at the top of the expanded parts list. */
.motor-parts-assembly-action {
  margin-bottom: 10px;
}

/* Assembly Record modal: the shared build-sheet renderer emits a .details-section
   card wrapping .part-detail-item cards. Inside the modal that's card-in-card
   nesting + a duplicate section heading (the modal header already says
   "Assembly Record"), so flatten the outer card here. ID-scoped — the printable
   report and the run-history expander keep the full card chrome. */
#assembly-record-modal .details-section {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
#assembly-record-modal .details-section > h4 {
  display: none;
}

/* In-progress banner shown above a partial build sheet. */
.assembly-record-progress-note {
  margin: 0 0 12px;
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.9em;
}

.btn-danger-outline {
  background: transparent;
  color: var(--status-error);
  border: 2px solid var(--status-error);
}

.btn-danger-outline:hover {
  background: var(--status-error-bg);
}

.btn-warning {
  background: var(--status-warning);
  color: #ffffff;
}

.btn-warning:hover {
  background: #b86305;
  transform: translateY(-1px);
}

/* ─── Toast Notifications ────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  width: calc(100vw - 40px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border-left: 4px solid;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  word-break: break-word;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateX(0);
}

.toast-icon {
  font-size: 1em;
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 700;
}

.toast-message {
  flex: 1;
  font-size: 0.875em;
  line-height: 1.45;
}

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1em;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.toast-close:hover { opacity: 1; }

.toast-success {
  border-color: var(--status-success);
  background: var(--status-success-bg);
  color: var(--text-heading);
}
.toast-success .toast-icon { color: var(--status-success); }
.toast-success .toast-close { color: var(--status-success); }

.toast-error {
  border-color: var(--status-error);
  background: var(--status-error-bg);
  color: var(--text-heading);
}
.toast-error .toast-icon { color: var(--status-error); }
.toast-error .toast-close { color: var(--status-error); }

.toast-warning {
  border-color: var(--status-warning);
  background: var(--status-warning-bg);
  color: var(--text-heading);
}
.toast-warning .toast-icon { color: var(--status-warning); }
.toast-warning .toast-close { color: var(--status-warning); }

.toast-info {
  border-color: var(--status-info);
  background: var(--status-info-bg);
  color: var(--text-heading);
}
.toast-info .toast-icon { color: var(--status-info); }
.toast-info .toast-close { color: var(--status-info); }

@media (max-width: 480px) {
  #toast-container {
    top: 10px;
    right: 10px;
    width: calc(100vw - 20px);
  }
}

/* ─── Persistent Banners (draft sync / offline state) ────────────────────── */
#banner-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
}

.app-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid;
  font-size: 0.875em;
  line-height: 1.45;
  word-break: break-word;
}

.app-banner-icon {
  flex-shrink: 0;
  font-weight: 700;
}

.app-banner-message { flex: 1; }

.app-banner-action {
  flex-shrink: 0;
  padding: 6px 12px;
  min-height: 32px;
}

.app-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  padding: 4px 8px;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
  color: inherit;
}

.app-banner-close:hover { opacity: 1; }

.app-banner-warning {
  border-color: var(--status-warning);
  background: var(--status-warning-bg);
  color: var(--text-heading);
}
.app-banner-warning .app-banner-icon { color: var(--status-warning); }

.app-banner-error {
  border-color: var(--status-error);
  background: var(--status-error-bg);
  color: var(--text-heading);
}
.app-banner-error .app-banner-icon { color: var(--status-error); }

.app-banner-info {
  border-color: var(--status-info);
  background: var(--status-info-bg);
  color: var(--text-heading);
}
.app-banner-info .app-banner-icon { color: var(--status-info); }

.app-banner-success {
  border-color: var(--status-success);
  background: var(--status-success-bg);
  color: var(--text-heading);
}
.app-banner-success .app-banner-icon { color: var(--status-success); }

/* ─── Confirm Dialog ─────────────────────────────────────────────────────── */
#confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#confirm-dialog-box {
  background: var(--bg-container);
  padding: 28px;
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 90%;
  box-shadow: var(--shadow-xl);
}

#confirm-dialog-message {
  color: var(--text-primary);
  margin: 0 0 24px;
  line-height: 1.55;
  font-size: 0.95em;
  /* Honor newlines in multi-line confirmations (e.g. the bulk-import warning
     list) while still wrapping normally. No effect on single-line messages. */
  white-space: pre-line;
}

#confirm-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: var(--bg-container);
  padding: 30px;
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.modal-content.large-modal {
  max-width: 900px;
}

/* Return-to-shop modal: widened on desktop so all 5/6 measurement inputs fit on
   one row. Wrapped in min-width so the mobile .modal-content { max-width:96% }
   override (lower specificity) still wins on phones. */
@media (min-width: 700px) {
  #return-to-shop-modal .modal-content {
    max-width: 860px;
  }
}

/* Part run-history modals: wider so more table columns are visible.
   ID-scoped so other large-modals (return form, export picker) stay 900px. */
#part-history-modal .modal-content.large-modal,
#motor-pack-part-history-modal .modal-content.large-modal {
  max-width: 1200px;
}

/* Groups the fullscreen toggle + close control on the right of a modal header */
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Header close button in the pack-part history modal (was unstyled native button) */
.modal-header-actions .close-button {
  font-size: 2em;
  line-height: 1;
  cursor: pointer;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
}

.modal-header-actions .close-button:hover {
  color: var(--text-primary);
}

.modal-header-actions .close-button:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Fullscreen toggle button in a modal header (history modals). Desktop-only. */
.modal-fullscreen-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
}

.modal-fullscreen-toggle:hover {
  color: var(--text-primary);
}

.modal-fullscreen-toggle:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.modal-fullscreen-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Swap expand/collapse glyph based on the modal's fullscreen state */
.modal-fullscreen-toggle .icon-collapse {
  display: none;
}

.modal-content.fullscreen .modal-fullscreen-toggle .icon-expand {
  display: none;
}

.modal-content.fullscreen .modal-fullscreen-toggle .icon-collapse {
  display: block;
}

/* Fullscreen state: fill the viewport edge-to-edge (mirrors #return-modal).
   ID-scoped so it out-specifies the ~1200px width rule above (which is also
   ID-scoped); a bare `.fullscreen` selector would lose the specificity race. */
#part-history-modal .modal-content.large-modal.fullscreen,
#motor-pack-part-history-modal .modal-content.large-modal.fullscreen {
  max-width: 100%;
  width: 100%;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  margin: 0;
}

.modal:has(.modal-content.fullscreen) {
  align-items: stretch;
}

/* Mobile already fills the screen — hide the desktop-only toggle. */
@media (max-width: 768px) {
  .modal-fullscreen-toggle {
    display: none;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 15px;
}

/* Icon-only ×: scoped with :not(.btn) so Cancel/Close buttons that also carry
   .close-modal (a close-behavior hook wired in JS) keep the navy .btn-secondary
   look instead of being flattened to a borderless 2em glyph. */
.close-modal:not(.btn) {
  font-size: 2em;
  cursor: pointer;
  color: var(--text-tertiary);
  background: none;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s;
}

.close-modal:not(.btn):hover {
  color: var(--text-primary);
}

.close-modal:not(.btn):focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Maintenance Report */
.report-header {
  background: var(--bg-section);
  padding: 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

.parts-history {
  margin-top: 20px;
}

.part-history-card {
  background: var(--bg-section);
  padding: 15px;
  margin: 10px 0;
  border-left: 4px solid var(--accent-color);
  border-radius: var(--radius-sm);
}

.part-history-card h5 {
  color: var(--text-heading);
  margin-bottom: 10px;
}

.part-history-card ul {
  margin-left: 20px;
  margin-top: 10px;
}

.part-history-card li {
  color: var(--text-secondary);
  margin: 5px 0;
}

/* Part Grading Section */
.part-grade-section,
.motor-pack-part-grade-section {
  background: var(--bg-section);
  padding: 20px;
  margin: 15px 0;
  border-radius: var(--radius-md);
  border: 3px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.history-summary {
  background: var(--status-info-bg);
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 15px;
}

/* Rotor/Stator positional measurements: N bottom->top position inputs + a
   read-only derived average. Wraps to fit a 375px screen with 44px touch targets. */
.measurement-pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin: 6px 0;
}
/* On a widened return modal (≥700px, see #return-to-shop-modal below) pin the
   grid to N columns (via --m-cols set inline by renderMeasurementGrid) so all
   5/6 readings sit on one row. Below 700px the auto-fit rule above wraps. */
@media (min-width: 700px) {
  .measurement-pos-grid {
    grid-template-columns: repeat(var(--m-cols, 4), 1fr);
  }
}
.measurement-pos-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.measurement-pos-field label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.measurement-pos-input {
  width: 100%;
  min-height: 44px;
  font-variant-numeric: tabular-nums;
}
.measurement-avg-line {
  margin-top: 6px;
  font-weight: 600;
  color: var(--text-primary);
}
.measurement-avg-display {
  font-variant-numeric: tabular-nums;
  color: var(--primary-color);
}
/* The derived single average input on static forms (Add Part / Return-to-Shop)
   stays in the DOM for existing submit/validation code but is visually hidden —
   the position grid + the .measurement-avg-line readout are what the user sees. */
.measurement-avg-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Part History "Post Run Measurement" cell: average shown, individual bottom->top
   readings revealed on click (and via the cell's title tooltip on hover). */
.measurement-cell { white-space: nowrap; }
.measurement-avg-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
/* Expand affordance: a visible chip ("▸ N readings") so it's obvious the value
   opens a bottom→top breakdown (was a bare number with only a hidden tooltip). */
.measurement-expand-btn {
  margin-top: 2px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
.measurement-expand-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
}
.measurement-caret { font-size: 0.85em; }
.measurement-breakdown {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: normal;
  max-width: 240px;
}
.measurement-breakdown.hidden { display: none; }
.measurement-breakdown-label { font-weight: 600; }

/* Wear/Swell cell in the part run-history table. */
.wear-swell-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wear-swell-cell.ws-wear { color: var(--status-warning); font-weight: 600; }
.wear-swell-cell.ws-swell { color: var(--status-info); font-weight: 600; }

.grade-select,
.notes-input {
  width: 100%;
}

/* Inventory Styles */
.filter-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 20px;
  border: 2px solid var(--border-color);
  background: var(--bg-container);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
}

.filter-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-1px);
}

.filter-btn.active {
  background: var(--accent-color);
  color: var(--text-on-primary);
  border-color: var(--accent-color);
}

/* Inventory Active/Inactive sub-tabs (inventory-scoped classes) */
.inv-subtabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 16px;
}
.inv-subtab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.inv-subtab-btn:hover { color: var(--text-primary); }
.inv-subtab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--accent-color);
}
[data-theme="dark"] .inv-subtab-btn.active { color: var(--accent-color); }
@media (max-width: 768px) {
  .inv-subtab-btn { min-height: 44px; flex: 1; }
}

/* Collapsible "Add New Part" card header (Inventory view) — reads as a clickable
   expanding box: full-width bar, accent border, title sized to match the
   "Current Inventory" h3 (1.5em), a "+ / ×" affordance and chevron on the right. */
.add-part-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-container);
  border: 2px solid var(--primary-color);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  color: var(--primary-color);
  font-family: inherit;
  transition: background 0.15s, box-shadow 0.15s;
}
.add-part-toggle:hover {
  background: var(--bg-section);
  box-shadow: var(--shadow-sm);
}
.add-part-toggle:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}
/* Leading "+" badge that flips to "×" when open — the primary "this adds a part" cue */
.add-part-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--text-on-primary);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s ease;
}
.add-part-toggle:not(.collapsed) .add-part-plus {
  transform: rotate(45deg); /* "+" becomes "×" when expanded */
}
.add-part-toggle-title {
  font-size: 1.5em;
  font-weight: 700;
  flex: 1;
}
.add-part-chevron {
  display: inline-block;
  font-size: 1em;
  color: var(--primary-color);
  transition: transform 0.2s ease;
  transform: rotate(90deg); /* pointing down when expanded */
  flex-shrink: 0;
}
.add-part-toggle.collapsed .add-part-chevron {
  transform: rotate(0deg);  /* pointing right when collapsed */
}
.add-part-body {
  overflow: hidden;
}
.add-part-body.collapsed {
  display: none;
}
/* Breathing room between the header bar and the form when expanded. */
.add-part-body:not(.collapsed) {
  margin-top: 20px;
}

/* Collapsible part-type section header (size-gated status breakdown) */
.inv-section-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  background: var(--bg-header);
  color: var(--text-on-primary);
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
[data-theme="dark"] .inv-section-header { background: var(--primary-color); }
.inv-section-header:hover { filter: brightness(1.08); }
.inv-section-header:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.inv-section-chevron {
  font-size: 12px;
  opacity: 0.85;
  width: 12px;
  flex-shrink: 0;
}
.inv-section-title {
  font-size: 1.15em;
  font-weight: 700;
}
[data-theme="dark"] .inv-section-title { color: var(--accent-color); }
.inv-section-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.82em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-left: auto;
}
.inv-count-plain { color: rgba(255, 255, 255, 0.7); }
.inv-size-line strong { color: #fff; font-weight: 600; }
.inv-hs {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Status-tone accents on the header count chips (light text over dark header) */
.inv-hs-good { color: #7fe3bf; }
.inv-hs-warn { color: #ffd68a; }
.inv-hs-crit { color: #ff9e91; }
.inv-hs-info { color: #cfe0f5; }

/* Jump-to part-type navigation */
.inventory-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.inventory-jump-nav:empty { display: none; }

.inv-jump-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.inv-jump-pill:hover {
  background: var(--bg-hover);
  border-color: var(--primary-light);
}
.inv-jump-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: var(--primary-color);
  color: var(--text-on-primary);
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .inv-stat { flex-basis: calc(50% - 5px); }
  .inv-jump-pill { min-height: 40px; }
}

.inventory-section {
  margin-bottom: 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 16px;
}
.inventory-section.expanded {
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .inventory-section {
  border-color: var(--border-color);
}

.inventory-section .table-container {
  margin-top: 0;
  border: none;
  border-radius: 0;
}

.inventory-section table th,
.inventory-section table td {
  text-align: left;
}

.inventory-section table th {
  white-space: normal;
  padding: 8px 6px;
  font-size: 0.85em;
  line-height: 1.2;
  max-width: 120px;
}

.inventory-section table thead {
  background: var(--bg-header);
}

[data-theme="dark"] .inventory-section table thead {
  background: var(--primary-color);
}

.inventory-section table td {
  padding: 10px 6px;
}

/* Mobile inventory tables: these run 8–11 columns and scroll horizontally.
   Pin the first column (Serial Number) so the part identifier stays visible
   while the rest scrolls, and add a right-edge fade so it's clear there's
   more to scroll. */
@media (max-width: 768px) {
  #inventory-view .inventory-section .table-container {
    position: relative;
  }
  #inventory-view .inventory-section .table-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg-container));
  }
  #inventory-view .inventory-section table th:first-child,
  #inventory-view .inventory-section table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-container);
    box-shadow: 2px 0 4px -2px rgba(0,0,0,0.15);
  }
  #inventory-view .inventory-section table thead th:first-child {
    background: var(--bg-header);
    z-index: 2;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-container);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

thead {
  background: var(--primary-color);
  color: var(--text-on-primary);
}

[data-theme="dark"] thead {
  background: var(--primary-color);
}

th, td {
  padding: 12px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
  /* Fixed-width digits so numeric columns (footage, depth, counts, costs)
     line up cleanly. Only affects digit glyphs; letters are unchanged. */
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  text-align: left;
}

th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9em;
  white-space: nowrap;
}

tbody tr {
  transition: background 0.2s;
}

tr:hover {
  background: var(--bg-hover);
}

thead tr:hover {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] thead tr:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Status Change Row Styling */
tr.status-change-row {
  background: var(--status-warning-bg) !important;
}

tr.status-change-row:hover {
  background: var(--status-warning-bg) !important;
  opacity: 0.9;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.available {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.status-badge.in_use {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.status-badge.in_transit {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.status-badge.rework {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

.status-badge.reline {
  background: var(--status-info-bg);
  color: var(--status-info);
}

.status-badge.damaged {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.status-badge.quarantine {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.status-badge.archive {
  background: var(--bg-hover);
  color: var(--text-tertiary);
}

.status-badge.good {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.status-badge.polish_recarbide {
  background: var(--status-info-bg);
  color: var(--status-info);
}

.status-badge.rechrome {
  background: var(--status-info-bg);
  color: var(--primary-color);
}

.status-badge.excellent {
  background: var(--status-success-bg);
  color: var(--status-success);
}

.status-badge.motor_failure {
  background: var(--status-error-bg);
  color: var(--status-error);
}

.status-badge.non_motor_failure {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}

/* Motor Performance Section */
.motor-performance-section {
  background: var(--bg-section);
  padding: 15px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  border: 3px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.motor-performance-info {
  background: var(--bg-section);
  padding: 15px;
  border-radius: var(--radius-md);
  margin: 15px 0;
  border: 3px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.motor-performance-info h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--text-heading);
}

.performance-grade {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.performance-notes {
  background: var(--bg-container);
  padding: 12px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--primary-color);
}

.performance-notes strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text-heading);
}

.performance-notes p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Part History Links */
.part-history-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.part-history-link:hover {
  text-decoration: underline;
  color: var(--primary-dark);
}

/* Serial numbers in dark mode - keep brighter blue for readability */
[data-theme="dark"] .part-history-link {
  color: var(--primary-light);
}

[data-theme="dark"] .part-history-link:hover {
  color: var(--accent-light);
}

/* Empty Message */
.empty-message {
  text-align: center;
  color: var(--text-tertiary);
  padding: 40px;
  font-size: 1.2em;
}

/* Empty state with a next-step call to action */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px;
}
.empty-state .empty-message {
  padding: 0;
  margin: 0;
}
.empty-cta {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.empty-cta:hover { background: var(--bg-hover); text-decoration: underline; }

/* Single-motor-size stat panel (replaces a lonely one-bar chart) */
.single-size-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  gap: 14px;
  padding: 20px;
  text-align: center;
}
.single-size-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
}
.single-size-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.single-size-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 96px;
  padding: 12px 16px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: var(--radius-sm);
}
.single-size-metric.sss-good { border-top-color: var(--status-success); }
.single-size-metric.sss-warn { border-top-color: var(--status-warning); }
.single-size-metric.sss-crit { border-top-color: var(--status-error); }
.single-size-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
}
.single-size-metric.sss-good .single-size-value { color: var(--status-success); }
.single-size-metric.sss-warn .single-size-value { color: var(--status-warning); }
.single-size-metric.sss-crit .single-size-value { color: var(--status-error); }
.single-size-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}
.single-size-caption {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
  margin: 0;
}

/* Auto-save Status */
.auto-save-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--status-success-bg);
  border: 1px solid var(--status-success);
  border-radius: var(--radius-sm);
  margin: 15px 0;
  font-size: 0.9em;
  color: var(--status-success);
  transition: opacity 0.3s ease;
}

.auto-save-status.saving {
  background: var(--status-warning-bg);
  border-color: var(--status-warning);
  color: var(--status-warning);
}

.auto-save-status.saved {
  background: var(--status-success-bg);
  border-color: var(--status-success);
  color: var(--status-success);
}

.auto-save-icon {
  font-size: 1.2em;
  animation: pulse 1.5s ease-in-out infinite;
}

.auto-save-status.saved .auto-save-icon {
  animation: none;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Responsive Design */

/* Tablet and smaller screens (1024px and below) */
@media (max-width: 1024px) {
  .filter-row {
    gap: 12px;
  }

  .filter-group {
    flex: 1 1 calc(50% - 12px);
    min-width: 140px;
  }

  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  main {
    padding: 20px;
  }

  header h1 {
    font-size: 1.8em;
  }

  .nav-btn {
    padding: 10px 15px;
    font-size: 0.9em;
  }

  .parts-grid {
    grid-template-columns: 1fr;
  }

  .form-inline {
    flex-direction: column;
  }

  .form-inline .form-group {
    width: 100%;
  }

  /* .form-grid collapses to a single full-width column on mobile.
     !important beats the non-important .fg-span-* spans. */
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid > * {
    grid-column: 1 / -1 !important;
  }
  /* Stack the Catch-Rod Model/Length pair too (no side-by-side at 375px). */
  .cr-fields {
    flex-direction: column;
  }

  .modal-content {
    width: 95%;
    padding: 20px;
  }

  table {
    font-size: 0.9em;
  }

  th, td {
    padding: 10px;
  }
}

/* Analytics Styles */
.analytics-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 16px;
}

.analytics-tab-btn {
  padding: 10px 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

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

.analytics-tab-btn.active {
  border-bottom-color: #2563eb;
  color: #2563eb;
}

.analytics-tab-pane {
  display: none;
}

.analytics-tab-pane.active {
  display: block;
}

.analytics-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.analytics-filter-bar label {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
}

.analytics-filter-bar input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input, var(--bg-primary));
  color: var(--text-primary);
  font-size: 14px;
}

.analytics-filter-bar .custom-multiselect {
  min-width: 140px;
}

.analytics-date-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  margin-left: 8px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 20px;
}

.chart-card--wide {
  grid-column: span 2;
}

.chart-card {
  background: var(--bg-card);
  padding: 25px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--border-color);
  transition: all 0.3s;
}

.chart-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-color);
}

.chart-card h3 {
  color: var(--text-heading);
  margin-bottom: 20px;
  font-size: 1.3em;
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-color);
}

/* Chart canvas wrapper — Chart.js fills this with maintainAspectRatio: false */
.chart-canvas-wrap {
  position: relative;
  height: 320px;
  width: 100%;
}

.chart-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.chart-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background: var(--bg-section);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
  border: 1px solid var(--border-color);
}

/* Filter Row - Horizontal Layout */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-end;
  margin-bottom: 15px;
}

/* Clear Filters button in filter-row */
.filter-row .btn-sm {
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-end;
}

/* Export dropdown */
.export-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.export-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  min-width: 240px;
  margin-top: 4px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
}

.export-dropdown-menu.hidden {
  display: none;
}

.export-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary, #1f2937);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.export-dropdown-item:hover {
  background: var(--hover-bg, #f3f4f6);
}

.export-dropdown-menu hr {
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--border-color, #d1d5db);
}

/* Export part picker */
.export-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  cursor: pointer;
  font-size: 14px;
}

.export-picker-item:last-child {
  border-bottom: none;
}

.export-picker-item:hover {
  background: var(--hover-bg, #f3f4f6);
}

.export-picker-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.export-picker-item .picker-label {
  flex: 1;
}

.export-picker-item .picker-meta {
  color: var(--text-secondary, #6b7280);
  font-size: 12px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 150px;
  max-width: 250px;
}

.filter-group label {
  font-weight: 600;
  color: var(--text-heading);
  font-size: 0.85em;
  white-space: nowrap;
}

.filter-select {
  padding: 8px 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-container);
  color: var(--text-primary);
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 0;
}

.filter-select:hover {
  border-color: var(--primary-color);
}

.filter-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(30, 73, 118, 0.15);
}

/* Make multiselect filters appear as regular dropdowns */
.filter-select[multiple] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23334155" d="M6 9L1 4h10z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

[data-theme="dark"] .filter-select[multiple] {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23cbd5e1" d="M6 9L1 4h10z"/></svg>');
}

/* Image Upload and Preview Styles */
.image-upload-input {
  margin-bottom: 10px;
}

.image-preview-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.image-preview {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-image-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--accent-color);
  color: var(--text-on-primary);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-image-btn:hover {
  background: var(--accent-dark);
}

/* Image Gallery in History Modal */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.image-gallery-item {
  border: 2px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.image-gallery-item:hover {
  border-color: var(--accent-color);
  transform: scale(1.05);
}

.image-gallery-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.image-gallery-item .image-caption {
  padding: 8px;
  background: var(--bg-section);
  font-size: 0.85em;
  color: var(--text-secondary);
}

/* Inline Run Images (thumbnails in table) */
.run-images-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.run-thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}

.run-thumbnail:hover {
  border-color: var(--accent-color);
  transform: scale(1.1);
}

/* Image Lightbox */
.image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.image-lightbox img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.image-lightbox .close-lightbox {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  background: none;
  border: none;
}

/* Print Styles */
@media print {
  header, nav, .btn {
    display: none;
  }

  .modal-content {
    box-shadow: none;
  }

  body {
    background: white;
  }
}

/* Custom Multi-Select Dropdown */
.custom-multiselect {
  position: relative;
  width: 100%;
}

.custom-multiselect-header {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 1em;
  background: var(--bg-container);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.3s;
}

.custom-multiselect-header:hover {
  border-color: var(--text-tertiary);
}

.custom-multiselect-header.active {
  border-color: var(--border-focus);
}

.custom-multiselect-placeholder {
  color: var(--text-secondary);
}

.custom-multiselect-arrow {
  font-size: 0.8em;
  transition: transform 0.3s;
}

.custom-multiselect-header.active .custom-multiselect-arrow {
  transform: rotate(180deg);
}

.custom-multiselect-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-container);
  border: 2px solid var(--border-focus);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  max-height: 250px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
  box-shadow: var(--shadow-md);
}

.custom-multiselect-dropdown.active {
  display: block;
}

.custom-multiselect-option {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}

.custom-multiselect-option:hover {
  background-color: var(--bg-hover);
}

.custom-multiselect-option input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.custom-multiselect-option label {
  cursor: pointer;
  margin: 0;
  flex: 1;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablet and below (768px) */
@media (max-width: 768px) {
  body {
    padding: 0;
  }

  .container {
    border-radius: 0;
    box-shadow: none;
  }

  /* Header — compact, no excess padding */
  header {
    padding: 12px 14px;
  }

  header h1 {
    font-size: 1.35em;
    margin-bottom: 12px;
    text-align: left;
  }

  .header-row {
    flex-wrap: wrap;
  }

  .header-actions {
    gap: 8px;
    /* Allow the action cluster (shop selector, bell, search, logout) to wrap
       onto a second line instead of clipping off the right edge at 375px. */
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
    justify-content: flex-start;
    row-gap: 10px;
  }

  .btn-header-logout {
    padding: 6px 14px;
    font-size: 0.8em;
  }

  .theme-toggle-btn {
    width: 38px;
    height: 38px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.1em;
  }

  .theme-toggle-btn:hover {
    transform: scale(1.05);
  }

  .form-actions .btn {
    flex: 1 1 100%;
  }

  /* Navigation — horizontal scroll strip with a right-edge fade cue so it's
     clear more tabs exist beyond the viewport. */
  .nav-scroll {
    position: relative;
  }
  .nav-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 2px;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg-header));
  }

  nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  nav::-webkit-scrollbar {
    display: none;
  }

  .nav-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 0.82em;
    white-space: nowrap;
    border-radius: 4px;
    min-height: 44px;
  }

  .btn-sm {
    min-height: 44px;
    padding: 6px 12px;
  }

  /* Main Content */
  main {
    padding: 16px 14px;
  }

  h2 {
    font-size: 1.4em;
    margin-bottom: 16px;
  }

  h3 {
    font-size: 1.15em;
  }

  /* Forms */
  .form-card {
    padding: 16px 14px;
  }

  .form-group {
    margin-bottom: 16px;
  }

  input, select, textarea, .custom-multiselect-header {
    font-size: 16px !important; /* Prevents zoom on iOS (header is a div, include it) */
  }

  /* Buttons */
  .btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger {
    padding: 13px 20px;
    font-size: 0.95em;
    min-height: 44px;
  }

  /* Tables - Make scrollable */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px;
    padding: 0 14px;
  }

  table {
    min-width: 700px;
    font-size: 0.85em;
  }

  table th, table td {
    padding: 10px 8px;
    white-space: nowrap;
  }

  /* Modals */
  .modal-content {
    width: 96%;
    max-width: 96%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 18px 14px;
    border-radius: var(--radius-lg);
  }

  /* Info boxes */
  .info-box {
    padding: 14px;
    margin-bottom: 14px;
  }

  /* Image previews */
  .image-preview-container {
    flex-direction: column;
  }

  .image-preview {
    max-width: 100%;
  }

  /* Analytics tabs — full width on mobile */
  .analytics-tabs {
    overflow-x: auto;
  }

  .analytics-tab-btn {
    padding: 8px 16px;
    font-size: 14px;
    white-space: nowrap;
  }

  .analytics-filter-bar {
    padding: 10px 12px;
    gap: 8px;
  }

  .analytics-filter-bar .custom-multiselect {
    min-width: 0;
    width: 100%;
  }

  /* Analytics Grid — single column */
  .charts-grid,
  .analytics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .chart-card {
    padding: 14px;
    min-width: 0;
    width: 100%;
  }

  .chart-card--wide {
    grid-column: span 1;
  }

  .chart-card h3 {
    font-size: 1em;
    padding-bottom: 10px;
    margin-bottom: 12px;
  }

  /* Chart canvas wrapper — constrained height on mobile */
  .chart-canvas-wrap {
    height: 240px;
  }

  /* Chart filters stack vertically */
  .chart-filters {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  .chart-filters select,
  .chart-filters .filter-group {
    width: 100%;
    max-width: 100%;
  }

  /* Filter Row — stack on mobile */
  .filter-row {
    flex-direction: column;
    gap: 10px;
  }

  .filter-group,
  /* Run History filter panel wraps fields in .form-group (not .filter-group);
     force them full-width too so they stack left-aligned instead of shrinking
     to the right with an empty left gutter. */
  .filter-row .form-group {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .filter-select {
    width: 100%;
  }

  .filter-row .btn-sm {
    width: 100%;
    margin-top: 4px;
  }

  .inventory-filters-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* Mobile phones (480px and below) */
@media (max-width: 480px) {
  header h1 {
    font-size: 1.1em;
  }

  h2 {
    font-size: 1.25em;
  }

  h3 {
    font-size: 1.05em;
  }

  main {
    padding: 14px 12px;
  }

  .form-card {
    padding: 14px 12px;
  }

  .motor-parts-section {
    padding: 8px 10px;
  }

  .motor-parts-grid {
    gap: 2px 8px;
  }

  table {
    font-size: 0.78em;
  }

  table th, table td {
    padding: 8px 6px;
  }

  .modal-content {
    padding: 14px 12px;
  }

  .inventory-filters-grid {
    grid-template-columns: 1fr !important;
  }

  .chart-canvas-wrap {
    height: 210px;
  }

  .chart-card {
    padding: 12px;
  }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
  header h1 {
    font-size: 1.15em;
    margin-bottom: 8px;
  }

  main {
    padding: 14px;
  }

  .chart-canvas-wrap {
    height: 200px;
  }
}

/* Utility classes for mobile */
.mobile-hide {
  display: none !important;
}

@media (min-width: 769px) {
  .desktop-hide {
    display: none !important;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets for touch devices */
  button, .btn, a, select, input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remove hover effects on touch devices */
  .nav-btn:hover {
    background: rgba(255,255,255,0.1);
  }

  button:hover {
    transform: none;
  }
}

/* Prevent text selection on buttons (better mobile UX) */
button, .btn {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Improve scrolling performance */
.table-container, .modal-content {
  -webkit-overflow-scrolling: touch;
}

/* Make sure modals don't go behind mobile keyboards */
.modal.active {
  overflow-y: scroll;
}

/* Run History Table Styles */
.table-container {
  overflow-x: auto;
  margin-top: 20px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* Wide tables on desktop/tablet: cap the container height so the container
   ITSELF scrolls. This keeps the horizontal scrollbar reachable near the
   viewport bottom from any vertical position (no more scrolling to the end of a
   tall table just to pan left/right) and lets the sticky th headers stay visible
   while scrolling rows. max-height is inert on short tables, so this is safe
   everywhere; min-height guards degenerate layouts.
   Scoped to min-width:769px on purpose: on phones a capped inner vertical
   scroll on top of the existing horizontal scroll + page scroll produces
   three fighting touch-scroll surfaces. On mobile we let the page scroll
   vertically and the table scroll only horizontally (see the mobile
   .table-container rule); the sticky th headers still pin against page scroll.
   Modal-nested tables are excluded — the modal body already provides scroll and
   a second capped scroll inside it double-scrolls awkwardly.
   dvh (with vh fallback) avoids the iOS Safari toolbar over-counting 100vh. */
@media (min-width: 769px) {
  .table-container {
    max-height: calc(100vh - 320px);
    max-height: calc(100dvh - 320px);
    min-height: 240px;
    overflow: auto;
  }
  /* Modal bodies scroll on their own — undo the cap for tables nested in them. */
  .modal-content .table-container {
    max-height: none;
    min-height: 0;
  }
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table thead {
  background: var(--bg-header);
  color: white;
}

.data-table th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid var(--accent-color);
  /* Sticky on the th (not thead) so headers stay put with border-collapse.
     Background repeated here because collapsed-border tables drop the
     thead background under sticky cells in some browsers. */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-header);
}

.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

/* Sort/hover tints use background-image (not background-color) so they
   composite OVER the solid var(--bg-header) base rather than replacing it.
   This keeps the header opaque blue when the th is sticky and lifted above
   scrolling rows — otherwise a translucent tint shows through as white. */
.data-table th.sortable:hover {
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
}

.data-table th.sortable.sorted-asc,
.data-table th.sortable.sorted-desc {
  background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
}

.data-table th .sort-arrow {
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
  opacity: 0.7;
}

.data-table tbody tr.report-row {
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

.data-table tbody tr.report-row:hover {
  background-color: var(--bg-hover);
}

.data-table tbody tr.report-row:nth-child(4n+1) {
  background-color: var(--bg-section);
}

.data-table tbody tr.report-row:nth-child(4n+1):hover {
  background-color: var(--bg-hover);
}

.data-table td {
  padding: 12px 10px;
  vertical-align: middle;
}

.data-table .btn-icon {
  background: var(--primary-color);
  color: var(--text-on-primary);
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}

.data-table .btn-icon:hover {
  background: var(--accent-color);
  transform: scale(1.1);
}

/* Details toggle: a labelled button with a rotating chevron so the
   expand/collapse state is always clear. Overrides the scale(1.1) hover
   from .btn-icon (which looks off on a text button). */
.data-table .btn-icon.details-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 12px;
}

.data-table .btn-icon.details-toggle-btn:hover {
  transform: none;
  background: var(--accent-color);
}

.details-toggle-chevron {
  font-size: 10px;
  line-height: 1;
  transition: transform 0.2s ease;
}

/* Details Row Styles */
.data-table tbody tr.details-row {
  background-color: var(--bg-section);
  border-bottom: 2px solid var(--accent-color);
}

/* Tie the expanded panel to its trigger row: accent the row that's open. */
.data-table tbody tr.report-row.expanded > td {
  background-color: var(--bg-hover);
}
.data-table tbody tr.report-row.expanded > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--accent-color);
}

.data-table tbody tr.details-row td {
  padding: 0;
}

/* The details row's <td colspan> spans the full (700px+) table width, so its
   content would otherwise be as wide as the table and need horizontal
   scrolling to read. Pin the content box to the left edge of the visible
   scroll area (position: sticky; left: 0) and size it to the container's
   visible width — driven by --rh-container-width, which a ResizeObserver in
   runHistory.js keeps in sync with the container's clientWidth. This works
   identically on desktop (centered 1600px container) and mobile (edge-bleed)
   with no viewport math. Fallback to 100% if the var isn't set yet. */
.report-details-expanded {
  position: sticky;
  left: 0;
  width: var(--rh-container-width, 100%);
  max-width: 100%;
  box-sizing: border-box;
  padding: 20px;
  animation: slideDown 0.25s ease-out;
}

/* Header bar at the top of the expanded panel: title + Print/PDF action. */
.report-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.report-details-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-heading);
}

.report-print-btn {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .report-print-btn {
    min-height: 44px;
  }
}

/* Reveal via opacity + a small translate rather than animating max-height —
   a fixed max-height ceiling clips tall runs (many parts/photos), especially
   in the single-column mobile layout, and translate/opacity composite
   cheaper on mobile GPUs. */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.details-section {
  background: var(--bg-card);
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.details-section.full-width {
  grid-column: 1 / -1;
}

.details-section h4 {
  color: var(--text-heading);
  margin-bottom: 14px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 7px;
}

/* Label / value on a 2-column grid so values align in a clean column
   (data clarity, design principle #3). max-content keeps labels tight;
   the value column takes the rest and wraps. */
.detail-item {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding: 5px 0;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-color);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item strong {
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
}

/* A nested <p> value (e.g. Field Crew Comments) spans both columns and
   reads as a full-width paragraph under its label. */
.detail-item p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--text-primary);
  line-height: 1.5;
}

/* Mandrel Group Accordion */
.mandrel-group {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}

.mandrel-group-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-section);
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  gap: 12px;
}

.mandrel-group-header:hover {
  background: var(--bg-hover, #f0f4f8);
}

.mandrel-group-header .chevron {
  transition: transform 0.2s ease;
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.mandrel-group.expanded .chevron {
  transform: rotate(90deg);
}

.mandrel-group-body {
  display: none;
}

.mandrel-group.expanded .mandrel-group-body {
  display: block;
}

.mandrel-group-meta {
  display: flex;
  gap: 16px;
  font-weight: 400;
  font-size: 0.9em;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.mandrel-group-body .table-container {
  margin: 0;
  padding: 0;
}

.mandrel-group-body table {
  margin-bottom: 0;
}

.mandrel-group-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .mandrel-group-header {
    padding: 10px 12px;
    flex-wrap: wrap;
  }

  .mandrel-group-meta {
    gap: 8px;
    font-size: 0.85em;
  }
}

/* Parts List in Details */
.parts-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.part-detail-item {
  background: var(--bg-card);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.part-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.part-serial {
  color: var(--text-secondary);
  font-size: 13px;
}

.graded-by-label {
  color: var(--text-secondary);
  font-size: 0.85em;
  margin-left: 4px;
}

.motor-fit {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.motor-fit.fit-loose {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
}

.motor-fit.fit-tight {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}

.motor-fit.fit-exact {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.part-measurements {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
/* Inline bottom->top individual readings (or pre → post pairs) under the
   Post-Run Avg on run detail. Keep on one line; scroll horizontally inside its
   own box on narrow screens rather than wrapping mid-sequence. */
.part-measurements-positions {
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.part-measurements-positions > span { white-space: nowrap; }

/* Run-detail Rotor/Stator measurements: pre and post fully separated so the
   bottom→top readings stack (pre row above post row) for easy per-position
   comparison. Each line = label + average + the individual readings. */
.part-measurements-block {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.part-measurements-block .pm-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.part-measurements-block .pm-label {
  font-style: italic;
  flex: 0 0 auto;
  min-width: 92px;
}
.part-measurements-block .pm-avg {
  font-weight: 600;
  color: var(--text-primary);
  flex: 0 0 auto;
}
.part-measurements-block .pm-positions {
  white-space: nowrap;
  color: var(--text-secondary);
}
.part-measurements-block .pm-order-note {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  margin: 1px 0 2px;
}
.part-measurements-block .pm-wear {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid var(--border-color);
}
.part-measurements-block .pm-wear em { font-style: italic; }

.part-notes {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: italic;
}

.part-images,
.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.detail-thumbnail {
  /* Sizing lives here (not inline) so the print page can override it to show
     large, uncropped photos. On screen: 100px cropped thumbnails → lightbox. */
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin: 5px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid var(--border-color);
  transition: transform 0.2s;
}

.detail-thumbnail:hover {
  transform: scale(1.05);
  border-color: var(--primary-color);
}

.loading-details,
.error {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary);
}

.error {
  color: var(--status-error);
}

/* Pagination Controls */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

#page-info {
  font-size: 14px;
  color: var(--text-heading);
  font-weight: 500;
}

#page-size-select {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  background: var(--bg-input);
  color: var(--text-primary);
}

/* Results Summary */
.results-summary {
  font-weight: 500;
  padding: 8px 0;
}

/* Responsive Table */
@media (max-width: 768px) {
  .data-table {
    font-size: 12px;
  }

  .data-table th,
  .data-table td {
    padding: 8px 6px;
  }

  .data-table th {
    font-size: 11px;
  }

  .details-grid {
    grid-template-columns: 1fr;
  }

  /* Touch target ≥44px for the details toggle on mobile (design principle #4). */
  .data-table .btn-icon.details-toggle-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Details value column stacks under its label on narrow screens so long
     values (well names, formations) don't get squeezed. */
  .detail-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .pagination-controls {
    flex-direction: column;
  }
}

/* Rotor Risk Assessment Badges */
.rotor-risk-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.rotor-risk-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.rotor-risk-cell {
  text-align: center;
}

.loading-risk {
  color: var(--text-tertiary);
  font-size: 0.9em;
  font-style: italic;
}

/* Risk Level specific styles (fallback if inline styles fail) */
.risk-critical {
  background-color: var(--risk-critical) !important;
  color: var(--text-on-primary) !important;
}

.risk-high {
  background-color: var(--risk-high) !important;
  color: var(--text-on-primary) !important;
}

.risk-moderate {
  background-color: var(--risk-moderate) !important;
  color: var(--text-heading) !important;
}

.risk-low {
  background-color: var(--risk-low) !important;
  color: var(--text-on-primary) !important;
}

.risk-no-data {
  background-color: var(--risk-none-bg) !important;
  color: var(--text-secondary) !important;
  font-style: italic;
}

/* Motor Pack Parts Display Box */
.motor-pack-display-box {
  margin: 15px 0;
  padding: 15px;
  background-color: var(--card-background);
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.motor-pack-display-box .info-box {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.motor-pack-display-box ul {
  margin: 10px 0;
  padding-left: 20px;
  list-style-type: disc;
  /* Responsive columns: 3 on desktop, 2 on tablet, 1 on mobile */
  columns: 3;
  column-gap: 20px;
}

@media (max-width: 768px) {
  .motor-pack-display-box ul {
    columns: 2;
  }
}

@media (max-width: 480px) {
  .motor-pack-display-box ul {
    columns: 1;
  }
}

.motor-pack-display-box ul li {
  margin: 5px 0;
  color: var(--text-primary);
  /* Prevent items from breaking across columns */
  break-inside: avoid;
  page-break-inside: avoid;
}

.motor-pack-display-box a {
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
}

.motor-pack-display-box a:hover {
  color: var(--primary-hover);
}

/* ===== TAB STYLES ===== */
.tabs-container {
  margin-bottom: 20px;
}

.tabs {
  display: flex;
  gap: 10px;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 20px;
}

.tab-button {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  bottom: -2px;
}

.tab-button:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

.tab-button.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
  font-weight: 600;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   ROLE-BASED ACCESS CONTROL STYLES
   ============================================================ */

/* Hidden utility for role-gated elements */
.hidden {
  display: none !important;
}

/* User info badge in header */
.user-info-badge {
  font-size: 0.85em;
  color: var(--accent-color);
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

/* Role badges in admin user table */
.role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: capitalize;
}

.role-admin {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.role-manager {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.role-technician {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* Dark mode role badges */
[data-theme="dark"] .role-admin {
  background: #451a03;
  color: #fde68a;
  border-color: #78350f;
}

[data-theme="dark"] .role-manager {
  background: #1e3a5f;
  color: #93c5fd;
  border-color: #1d4ed8;
}

[data-theme="dark"] .role-technician {
  background: #052e16;
  color: #86efac;
  border-color: #15803d;
}

/* Inline role select in admin table */
.role-select-inline {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.85em;
  cursor: pointer;
}

/* Small button override for admin section */
.admin-section .btn-sm {
  padding: 4px 10px;
  font-size: 0.82em;
}

/* Inactive row styling in admin table */
.row-inactive {
  opacity: 0.55;
}

/* Success/error inline messages */
.success-message {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--status-success-bg);
  color: var(--status-success);
  border: 1px solid var(--status-success);
  border-radius: var(--radius-md);
  font-size: 0.9em;
}

.error-message {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--status-error-bg);
  color: var(--status-error);
  border: 1px solid var(--status-error);
  border-radius: var(--radius-md);
  font-size: 0.9em;
}

/* ─── Global Search ────────────────────────────────────────────────────────── */

#global-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 10px;
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

#global-search-input {
  width: 240px;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full, 9999px);
  background: var(--bg-input, var(--bg-container));
  color: var(--text-primary);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, width 0.2s;
}

#global-search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(199, 90, 0, 0.15);
  width: 300px;
}

#global-search-input::placeholder {
  color: var(--text-muted);
}

#global-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 420px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg-container);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 8000;
}

#global-search-dropdown.hidden {
  display: none;
}

.search-loading,
.search-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.search-group {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
}

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

.search-group-label {
  padding: 6px 14px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.search-result-item:hover {
  background: var(--bg-hover, rgba(0,0,0,0.05));
}

.search-result-label {
  font-size: 0.85rem;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-full, 9999px);
  background: var(--bg-subtle, #e5e7eb);
  color: var(--text-secondary);
}

.search-badge.badge-available  { background: var(--status-success-bg); color: var(--status-success); }
.search-badge.badge-in_use     { background: var(--status-info-bg);    color: var(--status-info);    }
.search-badge.badge-rework     { background: var(--status-warning-bg); color: var(--status-warning); }
.search-badge.badge-reline     { background: var(--status-warning-bg); color: var(--status-warning); }
.search-badge.badge-damaged    { background: var(--status-error-bg);   color: var(--status-error);   }
.search-badge.badge-in_transit { background: var(--status-warning-bg); color: var(--status-warning); }

.search-badge.badge-motor-spec     { background: var(--bg-subtle, #e5e7eb); color: var(--text-secondary); }
.search-badge.badge-motor-built    { background: var(--status-info-bg);     color: var(--status-info);    }
.search-badge.badge-motor-shipped  { background: var(--status-warning-bg);  color: var(--status-warning); }
.search-badge.badge-motor-returned { background: var(--status-success-bg);  color: var(--status-success); }

.search-view-all {
  padding: 6px 14px;
  font-size: 0.8rem;
  color: var(--accent-color);
  cursor: default;
}

/* ─── Row highlight animation ─────────────────────────────────────────────── */

@keyframes searchPulse {
  0%   { background-color: transparent; }
  25%  { background-color: #fef08a; }
  75%  { background-color: #fef08a; }
  100% { background-color: transparent; }
}

.search-highlight {
  animation: searchPulse 1s ease 3;
}

[data-theme="dark"] .search-highlight {
  animation: searchPulseDark 1s ease 3;
}

@keyframes searchPulseDark {
  0%   { background-color: transparent; }
  25%  { background-color: #713f12; }
  75%  { background-color: #713f12; }
  100% { background-color: transparent; }
}

/* ─── Image upload: spinner + success badge ─────────────────────────────── */

@keyframes spin {
  to { transform: rotate(360deg); }
}

.upload-spinner-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 2px dashed var(--border-color, #ccc);
  border-radius: 4px;
}

.upload-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-color, #ccc);
  border-top-color: var(--accent-color, #1976d2);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.upload-success-badge {
  position: absolute;
  top: 2px;
  right: 22px;
  background: var(--status-success);
  color: var(--text-on-primary);
  font-size: 10px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.image-preview {
  position: relative;
}

/* ─── Responsive: search on small screens ──────────────────────── */
@media (max-width: 600px) {
  #global-search-input { width: 140px; }
  #global-search-input:focus { width: 180px; }
  #global-search-dropdown { width: calc(100vw - 20px); right: -10px; }
}

/* Smallest phones (375px and below — iPhone SE, etc.) */
@media (max-width: 375px) {
  /* Search — prevent overflow on tiny screens */
  #global-search-input { width: 100px; }
  #global-search-input:focus { width: 130px; }
  #global-search-dropdown { width: calc(100vw - 14px); right: -6px; }
}

/* ─── Reduced Motion ───────────────────────────────────────────────────────── */
@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;
  }

  .search-highlight {
    animation: none !important;
    background-color: #fef08a;
  }

  [data-theme="dark"] .search-highlight {
    background-color: #713f12;
  }
}

/* ============================================================
   PREDICTIVE ANALYTICS — Issues 9+14
   ============================================================ */

/* ── Ship form ─────────────────────────────────────────── */
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.form-row .form-group {
  flex: 1;
  min-width: 140px;
}
.field-optional {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 0.85em;
}

/* ── Shop Report Banner ─────────────────────────── */
.shop-report-banner {
  background: var(--bg-section);
  border-bottom: 2px solid var(--border-color);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 90;
}
.shop-report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  cursor: default;
  gap: 12px;
}
.shop-report-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.shop-report-title {
  font-weight: 700;
  font-size: 0.92em;
  color: var(--text-heading);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.shop-report-ts {
  font-size: 0.78em;
  color: var(--text-secondary);
}
.shop-report-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.75em;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.shop-report-toggle:hover { background: var(--border-color); }

.shop-report-body {
  padding: 0 20px 16px;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.shop-report-body.collapsed {
  display: none;
}
.shop-report-summary {
  margin: 0 0 12px;
  font-size: 0.9em;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Per-shop groups (user's shop first, others collapsible) ── */
.shop-report-shop-group {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-section);
  margin-bottom: 12px;
}
.shop-report-shop-group:last-child { margin-bottom: 0; }
.shop-report-shop-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-heading);
}
.shop-report-shop-header:hover { background: var(--bg-container); }
.shop-report-shop-header:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}
.shop-report-shop-chevron {
  font-size: 0.8em;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.shop-report-shop-name {
  font-size: 1.02em;
  font-weight: 700;
}
.shop-report-shop-own-tag {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.shop-report-shop-freshness {
  margin-left: auto;
  font-size: 0.76em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.shop-report-shop-freshness.shop-report-stale { color: var(--status-warning, #d97706); }
.shop-report-shop-body { padding: 0 14px 14px; }
.shop-report-shop-group.collapsed .shop-report-shop-body { display: none; }
.shop-report-empty {
  font-size: 0.85em;
  color: var(--text-secondary);
  font-style: italic;
  padding: 6px 0 2px;
}

/* Motors in field (live) — overdue rows accented */
.shop-motor-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.85em;
  border-bottom: 1px solid var(--border-color);
}
.shop-motor-item:last-child { border-bottom: none; }
.shop-motor-icon { flex-shrink: 0; }
.shop-motor-serial { font-weight: 600; color: var(--text-primary); }
.shop-motor-rig { color: var(--text-secondary); }
.shop-motor-days { margin-left: auto; color: var(--text-secondary); white-space: nowrap; }
.shop-motor-overdue .shop-motor-serial,
.shop-motor-overdue .shop-motor-days { color: var(--risk-critical, #dc2626); font-weight: 700; }

.shop-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.shop-report-section {
  background: var(--bg-container);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.shop-report-section-title {
  margin: 0 0 8px;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
}
.shop-report-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86em;
  color: var(--text-primary);
}
.shop-report-list li { margin-bottom: 4px; }
.shop-report-goodnews { color: var(--status-success); }

.shop-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.86em;
  border-bottom: 1px solid var(--border-color);
}
.shop-alert:last-child { border-bottom: none; }
.shop-alert-urgent { color: var(--risk-critical); }
.shop-alert-warning { color: var(--status-warning); }
.shop-alert-icon { flex-shrink: 0; }

.shop-risk-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 0;
  font-size: 0.85em;
  border-bottom: 1px solid var(--border-color);
}
.shop-risk-item:last-child { border-bottom: none; }
.shop-risk-serial {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: underline;
  font-size: inherit;
  padding: 0;
}
.shop-risk-type { color: var(--text-secondary); }
.shop-risk-reason { color: var(--text-secondary); font-size: 0.9em; }

/* Risk badges (used in shop report + inventory) */
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78em;
  font-weight: 700;
  white-space: nowrap;
}
.risk-badge.risk-critical { background: var(--risk-critical-bg); color: var(--risk-critical); }
.risk-badge.risk-high     { background: var(--risk-high-bg);     color: var(--risk-high); }
.risk-badge.risk-moderate { background: var(--risk-moderate-bg); color: var(--risk-moderate); }
.risk-badge.risk-low      { background: var(--risk-low-bg);      color: var(--risk-low); }

/* Risk badges as clickable buttons */
button.risk-badge {
  cursor: pointer;
  border: none;
  font: inherit;
  line-height: inherit;
}
button.risk-badge:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ── Risk Detail Modal ────────────────────────────────── */
.risk-score-bars {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.risk-score-bar-item {
  flex: 1;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.risk-score-bar-label {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.risk-score-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--border-color);
  overflow: hidden;
}
.risk-score-bar-fill {
  height: 100%;
  border-radius: 4px;
}
.risk-score-bar-pct {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-primary);
}
.risk-score-bar-na {
  font-size: 0.78em;
  color: var(--text-secondary);
  font-style: italic;
}
.risk-detail-warning {
  background: var(--risk-high-bg, #fef3c7);
  color: var(--risk-high, #d97706);
  border-left: 3px solid var(--risk-high, #d97706);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.88em;
  margin-bottom: 14px;
}
.risk-detail-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85em;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.risk-detail-subheading {
  font-size: 0.9em;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Shop badge (multi-shop All Shops view) ───────────── */
.shop-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-secondary, #64748b);
  border: 1px solid var(--border-color, #e2e8f0);
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Admin: Proposal tabs ──────────────────────────────── */
.proposal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0;
}
.proposal-tab {
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 0.88em;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: 4px 4px 0 0;
  transition: color 0.15s;
}
.proposal-tab:hover { color: var(--text-primary); }
.proposal-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }

/* ── Admin: Sub-tab navigation ── */
.admin-sub-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.admin-sub-tabs::-webkit-scrollbar { display: none; }
.admin-sub-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 22px;
  font-size: 0.92em;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.admin-sub-tab:hover { color: var(--text-primary); }
.admin-sub-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.admin-sub-pane.hidden { display: none; }

.proposal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  color: white;
  border-radius: 10px;
  font-size: 0.72em;
  padding: 1px 6px;
  margin-left: 4px;
  font-weight: 700;
}
.proposals-empty {
  color: var(--text-secondary);
  font-size: 0.9em;
  padding: 20px 0;
  text-align: center;
}
.proposals-table .proposed-value { color: var(--primary-color); font-weight: 600; }
.proposals-table .proposal-reasoning { font-size: 0.82em; color: var(--text-secondary); max-width: 260px; }
.proposals-table .proposal-actions { white-space: nowrap; }
.proposals-table .proposal-actions .btn { margin-right: 4px; }

/* Confidence bar */
.confidence-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}
.confidence-bar {
  height: 6px;
  border-radius: 3px;
  flex: 1;
  background: var(--status-success);
  transition: width 0.3s;
}
.confidence-pct {
  font-size: 0.78em;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Feature suggestion cards */
.feature-proposal-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
  background: var(--bg-container);
}
.feature-proposal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.feature-rationale { font-size: 0.88em; color: var(--text-primary); margin: 0 0 6px; }
.feature-impl { font-size: 0.82em; color: var(--text-secondary); margin: 0 0 8px; }
.priority-badge {
  font-size: 0.72em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.priority-high   { background: var(--risk-critical-bg); color: var(--risk-critical); }
.priority-medium { background: var(--risk-high-bg);     color: var(--risk-high); }
.priority-low    { background: var(--risk-low-bg);      color: var(--risk-low); }

/* ── Threshold editor ──────────────────────────────────── */
.threshold-input {
  width: 70px;
  padding: 4px 6px;
  font-size: 0.82em;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-section);
  color: var(--text-primary);
  text-align: right;
}
.threshold-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(30, 73, 118, 0.12);
}
.weight-input { width: 58px; }
.ai-updated-badge {
  display: inline-block;
  background: rgba(88, 28, 135, 0.10);
  color: #6b21a8;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 600;
}
.last-updated-cell { white-space: nowrap; }

/* ── AI Panel: jump nav + two-column layout ────────────── */
.ai-panel-layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.ai-jump-nav {
  position: sticky;
  top: 16px;
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 16px;
  margin-right: 24px;
  border-right: 2px solid var(--border-color);
}
.ai-jump-link {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.ai-jump-link:hover,
.ai-jump-link.active {
  background: rgba(30, 73, 118, 0.08);
  color: var(--primary-color);
  font-weight: 600;
}
.ai-panel-content {
  flex: 1;
  min-width: 0;
}
.ai-section {
  margin-bottom: 40px;
  scroll-margin-top: 80px;
}
.ai-section-heading {
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-color);
  color: var(--text-primary);
}
@media (max-width: 768px) {
  .ai-panel-layout  { flex-direction: column; }
  .ai-jump-nav {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 2px solid var(--border-color);
    padding: 0 0 12px;
    margin: 0 0 20px;
  }
}

/* ── Threshold table group headers ─────────────────────── */
/* ── Threshold table header: two-row grouped layout ──────── */

/* Row 1: light neutral base so color groups are visible */
#thresholds-table thead tr:first-child th {
  background: #f0f4f8;
  color: var(--text-secondary);
  font-size: 0.72em;
  vertical-align: middle;
}
[data-theme="dark"] #thresholds-table thead tr:first-child th {
  background: #1a2a3a;
  color: var(--text-secondary);
}

/* Row 2: column names — solid blue */
#thresholds-table thead tr:nth-child(2) th {
  background: var(--primary-color);
  color: var(--text-on-primary, #fff);
  font-size: 0.72em;
  padding: 6px 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
#thresholds-table thead tr:nth-child(2) th:first-child {
  border-left: none;
}

.threshold-group-label {
  text-align: center;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  border-bottom: 3px solid transparent;
}

/* Light mode group colors */
.threshold-group-wear {
  background: #dbeafe;
  color: #1e4076;
  border-bottom-color: #2563eb;
  border-left: 2px solid #bfdbfe;
  border-right: 2px solid #bfdbfe;
}
.threshold-group-weights {
  background: #fef3c7;
  color: #78350f;
  border-bottom-color: #d97706;
  border-left: 2px solid #fde68a;
  border-right: 2px solid #fde68a;
}
.threshold-group-penalties {
  background: #fee2e2;
  color: #991b1b;
  border-bottom-color: #dc2626;
  border-left: 2px solid #fecaca;
  border-right: 2px solid #fecaca;
}

/* Dark mode group colors */
[data-theme="dark"] .threshold-group-wear {
  background: #0f2a4a;
  color: #7ab8f5;
  border-bottom-color: #3d7fb8;
  border-left-color: #1e3d5a;
  border-right-color: #1e3d5a;
}
[data-theme="dark"] .threshold-group-weights {
  background: #3a2000;
  color: #f5c060;
  border-bottom-color: #e09010;
  border-left-color: #5a3500;
  border-right-color: #5a3500;
}
[data-theme="dark"] .threshold-group-penalties {
  background: #3a1010;
  color: #f08080;
  border-bottom-color: #e05040;
  border-left-color: #5a1a1a;
  border-right-color: #5a1a1a;
}

/* ── Threshold editor: collapsible group headers ─────────── */
.threshold-group-header {
  background: var(--bg-secondary);
  cursor: pointer;
  user-select: none;
  border-top: 2px solid var(--border-color);
}
.threshold-group-header:hover { background: var(--border-color); }
.threshold-group-header td {
  padding: 8px 12px !important;
  font-size: 0.9em;
}
.threshold-group-header.collapsed .threshold-group-toggle { color: var(--text-secondary); }
.threshold-group-toggle { margin-right: 8px; font-size: 0.8em; color: var(--text-secondary); }
.threshold-group-count { color: var(--text-secondary); font-size: 0.82em; margin-left: 8px; font-weight: normal; }
.threshold-group-row.hidden { display: none; }
.threshold-inline-header.hidden { display: none; }
.threshold-size-cell { padding-left: 24px !important; }
.threshold-inline-header th {
  background: var(--bg-secondary);
  font-size: 0.78em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  padding: 4px 6px !important;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.threshold-row-dirty { background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-primary)) !important; }
.threshold-row-dirty .threshold-input { border-color: var(--primary-color); }
.basin-row-dirty { background: color-mix(in srgb, var(--primary-color) 6%, var(--bg-primary)) !important; }
.basin-row-dirty .basin-input { border-color: var(--primary-color); }

/* ── Build motor: per-part risk chip below each dropdown ── */
.part-risk-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.82em;
  font-weight: 500;
  line-height: 1.4;
}
.part-risk-chip.hidden { display: none; }
.part-risk-chip-moderate {
  background: var(--risk-moderate-bg);
  color: var(--risk-moderate);
  border: 1px solid var(--risk-moderate);
}
.part-risk-chip-high {
  background: var(--risk-high-bg);
  color: var(--risk-high);
  border: 1px solid var(--risk-high);
}
.part-risk-chip-critical {
  background: var(--risk-critical-bg);
  color: var(--risk-critical);
  border: 1px solid var(--risk-critical);
}
.part-risk-chip-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  color: inherit;
  margin-left: auto;
}
.part-risk-chip-link:hover { opacity: 0.75; }

/* ── Risk detail modal — history link ─────────────────── */
.risk-history-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary-color);
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.risk-history-link:hover { opacity: 0.75; }

/* ── Routing advisories (shop report banner) ───────────── */
.routing-advisory {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.88em;
  line-height: 1.5;
}
.routing-advisory:last-child { border-bottom: none; }
.routing-target { font-weight: 600; color: var(--text-primary); }
.routing-ok     { font-weight: 600; color: var(--status-success, #0e9e6e); }
.routing-avoid  { font-weight: 600; color: var(--risk-critical, #dc2626); }
.routing-reason { color: var(--text-secondary); }

/* ── Basin editor ──────────────────────────────────────── */
.basin-input {
  padding: 4px 6px;
  font-size: 0.82em;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-section);
  color: var(--text-primary);
}
.basin-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(30, 73, 118, 0.12);
}

/* ── AI digest list ────────────────────────────────────── */
.digest-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.88em;
  color: var(--text-primary);
  line-height: 1.7;
}
.digest-list li { margin-bottom: 4px; }

/* ── Mobile responsive ─────────────────────────────────── */
@media (max-width: 768px) {
  .shop-report-grid { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .shop-report-header { padding: 8px 14px; }
  .shop-report-body { padding: 0 14px 12px; }
  .threshold-input { width: 55px; }
  .weight-input { width: 48px; }
  .proposal-tabs { flex-wrap: wrap; }
}

/* ── Inline Form Validation ──────────────────────────────── */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--status-error);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12);
}

.form-group.has-error > label {
  color: var(--status-error);
}

.custom-multiselect.has-error .custom-multiselect-header {
  border-color: var(--status-error);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12);
}

.field-error-msg {
  display: block;
  margin-top: 4px;
  font-size: 0.82em;
  font-weight: 500;
  color: var(--status-error);
  line-height: 1.3;
  animation: fieldErrorIn 0.15s ease-out;
}

@keyframes fieldErrorIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .field-error-msg { animation: none; }
}

/* ── Return Form Progress Sidebar ──────────────────────────────────────────── */

.return-form-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.return-form-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
  max-height: calc(90vh - 70px);
}

.return-progress-sidebar {
  width: 170px;
  min-width: 170px;
  border-right: 2px solid var(--border-color);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: calc(90vh - 70px);
  overflow-y: auto;
  background: var(--bg-container);
}

.progress-sections {
  display: flex;
  flex-direction: column;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 0.82em;
  color: var(--text-secondary);
  transition: background 0.15s;
  font-family: inherit;
}

.progress-item:hover {
  background: var(--bg-hover);
}

.progress-item.active {
  background: var(--bg-hover);
  color: var(--text-heading);
  font-weight: 600;
}

.progress-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65em;
  transition: all 0.2s;
}

.progress-item.complete .progress-check {
  background: var(--status-success);
  border-color: var(--status-success);
  color: #fff;
}

.progress-item.complete .progress-check::after {
  content: '\2713';
}

.progress-count {
  margin-left: auto;
  font-size: 0.75em;
  color: var(--text-tertiary);
  font-weight: 600;
}

.progress-sub-items {
  padding-left: 28px;
  display: flex;
  flex-direction: column;
}

.progress-sub-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 0.75em;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.progress-sub-item:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.sub-check {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
  transition: all 0.2s;
}

.progress-sub-item.complete .sub-check {
  background: var(--status-success);
  border-color: var(--status-success);
}

.progress-summary {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.progress-bar {
  height: 5px;
  background: var(--bg-section);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.progress-fill {
  height: 100%;
  background: var(--border-focus);
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}

.progress-text {
  font-size: 0.75em;
  color: var(--text-tertiary);
}

.graded-by-badge {
  display: block;
  font-size: 0.75em;
  color: var(--text-tertiary);
  margin-top: 3px;
  font-style: italic;
}

.large-modal:has(.return-form-layout) {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

/* Mobile: return form → full-page layout */
@media (max-width: 768px) {
  #return-modal {
    align-items: stretch;
  }

  #return-modal > .modal-content.large-modal {
    max-height: 100vh;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 12px;
  }

  .return-form-layout {
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .return-progress-sidebar {
    width: 100%;
    min-width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--border-color);
    padding: 8px 12px;
    max-height: none;
    position: relative;
    z-index: 10;
    background: var(--bg-container);
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    cursor: pointer;
  }

  .return-progress-sidebar .progress-sections {
    display: none;
  }

  .return-progress-sidebar.expanded .progress-sections {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-container);
    border-bottom: 2px solid var(--border-color);
    padding: 8px 12px;
    box-shadow: var(--shadow-md);
    z-index: 11;
  }

  .return-progress-sidebar .progress-summary {
    margin: 0;
    padding: 0;
    border: none;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .return-progress-sidebar .progress-bar {
    flex: 1;
    margin: 0;
  }

  .return-form-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none;
    padding: 0 8px 16px;
  }
}

/* Basin Breakdown Table */
.basin-breakdown {
  margin: 12px 0 16px;
}

.basin-breakdown h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-heading);
}

.basin-stats-table {
  font-size: 0.85rem;
}

.basin-stats-table th,
.basin-stats-table td {
  padding: 6px 10px;
}

.basin-stats-table th {
  background: var(--bg-section);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

.basin-stats-table td {
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   COST TRACKING STYLES (Issue 13)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Costs Tab Switching ─── */
.costs-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color, #e2e8f0);
  margin-bottom: 20px;
}

.costs-tab-btn {
  padding: 10px 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  position: relative;
}

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

.costs-tab-btn.active {
  border-bottom-color: #2563eb;
  color: #2563eb;
}

.costs-tab-pane {
  display: none;
}

.costs-tab-pane.active {
  display: block;
}

/* ─── Filter Bars ─── */
.costs-filter-bar,
.orders-filter-bar,
.revenue-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-section, #f8fafc);
  border-radius: 8px;
}

.cost-search-input,
.vendor-filter-input {
  padding: 6px 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
  min-width: 140px;
}

.cost-date-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}

.cost-date-label input[type="date"] {
  padding: 4px 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary);
}

.overdue-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

/* ─── Cost / Order Badges ─── */
.cost-badge,
.order-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cost-badge-quoted {
  background: #fef3c7;
  color: #92400e;
}

.cost-badge-invoiced {
  background: #d1fae5;
  color: #065f46;
}

.cost-badge-over-budget {
  background: #fee2e2;
  color: #991b1b;
}

.cost-badge-recorded {
  background: #e2e8f0;
  color: #334155;
}

.cost-badge-in-service {
  background: #dbeafe;
  color: #1e40af;
}

/* Cost Records — section dividers */
.cost-inflight-divider td {
  background: var(--status-warning-bg);
  color: var(--text-heading);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 12px;
}

.cost-inservice-divider td {
  background: #dbeafe;
  color: #1e3a5f;
}

.cost-month-header {
  cursor: pointer;
  user-select: none;
}
.cost-month-header td {
  background: var(--bg-section);
  font-weight: 600;
  padding: 10px 12px;
  border-top: 1px solid var(--border-color);
}
.cost-month-header:hover td {
  background: var(--bg-hover);
}
.cost-month-caret {
  display: inline-block;
  width: 16px;
  color: var(--text-secondary);
  font-size: 0.85em;
}
.cost-month-label {
  color: var(--text-heading);
}
.cost-month-meta {
  color: var(--text-tertiary);
  font-weight: normal;
  margin-left: 6px;
  font-size: 0.9em;
}
.cost-month-total {
  float: right;
  color: var(--primary-color);
  font-weight: 700;
}
.cost-month-breakdown {
  display: block;
  margin-top: 3px;
  margin-left: 22px;
  font-size: 0.82em;
  font-weight: normal;
  color: var(--text-tertiary);
}

.order-badge-ordered {
  background: #dbeafe;
  color: #1e40af;
}

.order-badge-shipped {
  background: #e9d5ff;
  color: #6b21a8;
}

.order-badge-partial {
  background: #fef3c7;
  color: #92400e;
}

.order-badge-received {
  background: #d1fae5;
  color: #065f46;
}

.order-badge-cancelled {
  background: #f1f5f9;
  color: #64748b;
}

.order-badge-overdue {
  background: #fee2e2;
  color: #991b1b;
}

.overdue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dc2626;
  color: #fff;
  font-size: 0.7em;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  margin-left: 4px;
}

.row-overdue {
  background: #fef2f2 !important;
}

/* ─── Tables ─── */
.notes-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-cell {
  white-space: nowrap;
}

.action-cell .btn {
  margin-right: 4px;
}

/* ─── Autocomplete Results ─── */
.autocomplete-results {
  position: absolute;
  z-index: 100;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9em;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover {
  background: var(--bg-section, #f8fafc);
}

.autocomplete-item.disabled {
  color: var(--text-secondary);
  cursor: default;
  font-style: italic;
}

/* ─── Linked Parts Chips ─── */
.linked-parts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.linked-part-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 16px;
  font-size: 0.8em;
  font-weight: 500;
}

.chip-remove {
  background: none;
  border: none;
  color: #1e40af;
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1;
  padding: 0 2px;
}

.chip-remove:hover {
  color: #dc2626;
}

.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.8em;
  color: var(--text-secondary);
}

/* ─── Cost KPI Cards (Analytics) ─── */
.cost-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.cost-kpi-card {
  background: var(--bg-section, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cost-kpi-label {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cost-kpi-value {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--text-primary);
}

/* ─── Cost History (in part modals) ─── */
.cost-history-section {
  margin-top: 8px;
}

.cost-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cost-history-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  font-size: 0.85em;
}

.cost-history-type {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 90px;
}

.cost-history-amount {
  font-weight: 700;
  color: #2563eb;
}

.cost-history-vendor {
  color: var(--text-secondary);
}

.cost-history-invoice {
  color: var(--text-secondary);
  font-size: 0.9em;
}

.cost-history-date {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-left: auto;
}

/* ─── Order Lines ─── */
.order-line + .order-line {
  margin-top: 4px;
}

/* ─── Mobile Responsive ─── */
@media (max-width: 768px) {
  .costs-filter-bar,
  .orders-filter-bar,
  .revenue-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .cost-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .costs-tab-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .cost-history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .cost-history-date {
    margin-left: 0;
  }

  .order-line .form-row,
  #cost-modal .form-row,
  #order-modal .form-row {
    flex-direction: column !important;
  }
}

@media (max-width: 480px) {
  .cost-kpi-row {
    grid-template-columns: 1fr;
  }

  .costs-tab-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ═════════════════════════════════════════════════════════
   NOTIFICATIONS CENTER — bell, dropdown, inline sections
   ═════════════════════════════════════════════════════════ */

.notifications-bell-wrap {
  position: relative;
  display: inline-block;
  margin-right: 8px;
}

.header-bell-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-on-primary);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 18px;
  line-height: 1;
  position: relative;
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease;
}
.header-bell-btn:hover { background: rgba(255,255,255,0.12); }
.header-bell-btn:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

.header-bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--accent-color);
  color: #fff;
  font-size: 0.7em;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-header);
}
.header-bell-badge.hidden { display: none; }

.notifications-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 1000;
  padding: 6px 0;
}
.notifications-dropdown.hidden { display: none; }

.notif-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  transition: background-color 120ms ease;
}
.notif-row:hover { background: var(--bg-hover); }
.notif-icon { font-size: 18px; }
.notif-label { flex: 1; }
.notif-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Inline sections (same shape, used on Orders + Cost Records sub-tabs) */
.pending-inline-section {
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.pending-inline-section.hidden { display: none; }

.pending-inline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pending-inline-header h3 {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--text-heading);
}

.pending-inline-list {
  background: var(--bg-card);
  border-radius: 6px;
  overflow-x: auto;
}

.pending-links-table,
.pending-costs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}
.pending-links-table th,
.pending-links-table td,
.pending-costs-table th,
.pending-costs-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}
.pending-links-table thead,
.pending-costs-table thead {
  background: var(--bg-header);
  color: #fff;
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pending-links-table thead th,
.pending-costs-table thead th {
  color: #fff;
}

.pl-ps-badge {
  display: inline-block;
  background: var(--primary-light);
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.8em;
  font-weight: 600;
  margin-left: 4px;
}
.pl-no-orders {
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 0.85em;
}
.cost-type-badge {
  display: inline-block;
  background: var(--primary-color);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: capitalize;
}

/* Suggestion chips (Receive modal) */
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.suggestion-chip {
  background: var(--bg-section);
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 120ms ease;
}
.suggestion-chip:hover {
  background: var(--primary-color);
  color: #fff;
}
.suggestion-chip.chip-used,
.suggestion-chip:disabled {
  background: var(--bg-section);
  color: var(--text-tertiary);
  border-color: var(--border-color);
  cursor: not-allowed;
  text-decoration: line-through;
}
.suggestion-chip small {
  opacity: 0.7;
  margin-left: 4px;
}

/* Pending-invoice cost-history row */
.cost-history-item-pending {
  background: var(--status-warning-bg);
  border-left: 3px solid var(--status-warning);
}
.cost-badge-pending-invoice {
  background: var(--status-warning);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

/* Paperclip attachment indicator */
.cost-paperclip-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
  cursor: pointer;
  color: var(--text-secondary);
}
.cost-paperclip-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Cost Analysis truth-in-numbers banner */
.cost-pending-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef4fb;
  border: 1px solid var(--primary-light);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: var(--text-primary);
  font-size: 0.95em;
}
.cost-pending-banner.hidden { display: none; }
.cost-pending-icon { font-size: 20px; }
.cost-pending-text { flex: 1; }
.cost-pending-text strong { color: var(--text-heading); }
.cost-pending-text span { color: var(--text-secondary); }
.cost-pending-cta {
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.9em;
}
.cost-pending-cta:hover { background: var(--primary-dark); }

/* ═════════════════════════════════════════════════════════
   ATTACHMENT CHIPS + PDF LIGHTBOX
   ═════════════════════════════════════════════════════════ */

.attachment-previews,
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85em;
  max-width: 240px;
}
.attachment-thumb {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
}
.attachment-pdf-icon {
  font-size: 24px;
  line-height: 1;
}
.attachment-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.attachment-open {
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.85em;
  cursor: pointer;
}
.attachment-open:hover { background: var(--primary-dark); }
.attachment-remove {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.3em;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.attachment-remove:hover { color: var(--accent-color); }
.attachment-spinner {
  width: 60px;
  height: 48px;
  justify-content: center;
}
.upload-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pdf-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 2000;
  display: flex;
  flex-direction: column;
}
.pdf-lightbox-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-header);
  color: var(--text-on-primary);
}
.pdf-lightbox-title {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-lightbox-newtab {
  color: var(--text-on-primary);
  text-decoration: underline;
  font-size: 0.9em;
}
.pdf-lightbox-close {
  background: transparent;
  border: none;
  color: var(--text-on-primary);
  font-size: 1.8em;
  line-height: 1;
  padding: 0 8px;
  cursor: pointer;
}
.pdf-lightbox-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}

/* Score bar info popover */
.score-bar-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.score-bar-info-icon {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.85em;
  margin-left: 4px;
  line-height: 1;
  user-select: none;
}
.score-bar-info-icon:hover { color: var(--primary-color); }
.score-bar-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: var(--bg-container);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px 14px;
  width: 280px;
  max-width: min(280px, 90vw);
  font-size: 0.82em;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: normal;
}
.score-bar-popover.hidden { display: none; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .notifications-dropdown {
    right: -8px;
    min-width: 280px;
  }
  .pending-inline-section {
    padding: 10px;
  }
  .pending-links-table,
  .pending-costs-table {
    font-size: 0.85em;
  }
}

/* Field return workflow styles */
.field-data-banner {
  background: #dcfce7;
  border: 1px solid #16a34a;
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 14px;
  color: #15803d;
  font-size: 0.88rem;
  font-weight: 500;
}
.field-data-banner.hidden { display: none; }

/* Each rig is a strongly-separated block: brand-blue header so the rig name
   stands out, a clear border, and generous spacing between rigs. */
.rig-accordion {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15,30,50,0.08));
}
.rig-accordion-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--text-on-primary);
  background: var(--primary-color);
}
.rig-accordion-summary::-webkit-details-marker { display: none; }
/* Chevron affordance on the rig header */
.rig-accordion-summary::before {
  content: '▸';
  font-size: 0.85rem;
  opacity: 0.85;
  transition: transform 0.15s;
}
.rig-accordion[open] .rig-accordion-summary::before { transform: rotate(90deg); }
.rig-motor-count {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-on-primary);
  background: rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 2px 10px;
  font-weight: 500;
}
.rig-accordion-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-section);
}

/* Collapsible motor cards inside a rig accordion (Motors Out on Rigs).
   .motor-card is a <details>; the summary row stays visible when collapsed.
   Solid white card on the tinted rig body so each motor reads as its own row. */
details.motor-card {
  padding: 0;
  overflow: hidden;
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
details.motor-card:hover { transform: none; border-color: var(--primary-light); }
.motor-card-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.motor-card-summary::-webkit-details-marker { display: none; }
.motor-card-chevron { color: var(--text-tertiary); transition: transform 0.15s; flex: none; }
details.motor-card[open] .motor-card-chevron { transform: rotate(90deg); }
.motor-card-serial { font-weight: 600; color: var(--text-heading); }
/* Push the action button to the end of the row; it wraps to its own line on narrow screens. */
.motor-card-summary .enter-field-btn { margin-left: auto; min-height: 44px; }  /* touch target */
.motor-card-body { padding: 0 14px 14px; }
.motor-card-body p { color: var(--text-secondary); margin: 5px 0; }
@media (max-width: 480px) {
  .motor-card-summary .enter-field-btn { margin-left: 0; width: 100%; }
}

/* ============================================================
   TASKS & TASK SCHEDULER
   ============================================================ */

/* Nav badge bubble (open-task count on the Tasks nav button) */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--danger-color, #dc2626);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.nav-badge.hidden { display: none; }

/* Unread "new shop report" dot on the Tasks nav button (dotless, no number) */
.nav-report-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--danger-color, #dc2626);
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25);
}
.nav-report-dot.hidden { display: none; }

/* Scheduler sub-tabs (reuse the costs-tabs wrapper, own button class) */
.task-tab-btn {
  padding: 8px 16px;
  min-height: 40px;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
}
.task-tab-btn:hover { color: var(--text-primary, #0f1e32); }
.task-tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.task-tab-pane { display: none; }
.task-tab-pane.active { display: block; }

/* Status badges — grey / blue / green / muted, paired with text */
.task-status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.status-todo       { background: #eef0f4; color: #566375; }
.status-inprogress { background: #dbeafe; color: #1d4ed8; }
.status-done       { background: #d0f4e8; color: #0e7a57; }
.status-cancelled  { background: #f3f4f6; color: #9aa4b2; text-decoration: line-through; }
[data-theme="dark"] .status-todo       { background: #2a3240; color: #c5d4e5; }
[data-theme="dark"] .status-inprogress { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .status-done       { background: #143d30; color: #6ee7b7; }
[data-theme="dark"] .status-cancelled  { background: #2a2f38; color: #7a8494; }

/* Priority — icon + color + text (never color alone) */
.task-priority { font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.prio-urgent { color: #dc2626; }
.prio-high   { color: #d97706; }
.prio-low    { color: #2563eb; }
.prio-none   { color: #8a97a6; font-weight: 500; }

/* Due-date coloring (Todoist-style); suppressed once done/cancelled */
.task-due { font-variant-numeric: tabular-nums; white-space: nowrap; }
.due-overdue  { color: #dc2626; font-weight: 700; }
.due-today    { color: #0e7a57; font-weight: 700; }
.due-tomorrow { color: #b45309; }
.due-soon     { color: var(--text-primary, #0f1e32); }
.due-future,
.due-none     { color: var(--text-secondary); }
.due-flag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(220,38,38,0.12);
  color: #dc2626;
}
.due-today .due-flag { background: rgba(14,122,87,0.14); color: #0e7a57; }
.due-tomorrow .due-flag { background: rgba(180,83,9,0.14); color: #b45309; }

.collab-count, .recur-flag {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-left: 4px;
}
.recur-flag { color: var(--primary-color); }

/* ── Slide-over drawer ── */
.task-drawer { position: fixed; inset: 0; z-index: 1200; }
.task-drawer.hidden { display: none; }
.task-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 30, 50, 0.42);
}
.task-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100%);
  background: var(--card-background, #fff);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  animation: task-drawer-in 0.16s ease-out;
}
@keyframes task-drawer-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.task-drawer-header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.task-drawer-header h3 { margin: 0; font-size: 1.1rem; }
.task-drawer-close {
  border: none; background: none; font-size: 1.6rem; line-height: 1;
  cursor: pointer; color: var(--text-secondary);
  width: 44px; height: 44px;
}
/* min-height:0 lets the scroll area shrink so the fixed footer stays visible
   (flex children default to min-height:auto, which pushed the footer off-screen). */
.task-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; }
.task-drawer-footer {
  flex: 0 0 auto;
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--card-background, #fff);
}
.task-meta-edit label,
.task-meta-read > div { display: block; margin-bottom: 12px; font-weight: 600; font-size: 0.85rem; }
.task-meta-edit input[type="text"],
.task-meta-edit input[type="datetime-local"],
.task-meta-edit textarea,
.task-meta-edit select {
  width: 100%; margin-top: 4px; padding: 9px 10px;
  min-height: 42px;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-input); font-weight: 400;
}
.task-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.td-collab-list { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; margin-top: 4px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px; }
.td-collab-item { font-weight: 400 !important; margin-bottom: 0 !important; display: flex; align-items: center; gap: 6px; min-height: 32px; }
.td-file-preview { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.task-status-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

.task-read-title { margin: 0 0 6px; }
.task-read-details { color: var(--text-secondary); margin: 0 0 16px; white-space: pre-wrap; }

.task-attachments-section, .task-activity-section { margin-top: 20px; }
.task-attachments-section h4, .task-activity-section h4 { margin: 0 0 8px; font-size: 0.95rem; }
.task-existing-files { display: flex; flex-wrap: wrap; gap: 6px; }
.task-file-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 14px;
  background: var(--bg-input); color: var(--text-primary, #0f1e32);
  font-size: 0.8rem; text-decoration: none;
  border: 1px solid var(--border-color);
}
.task-file-chip:hover { border-color: var(--primary-color); }

.task-activity-feed { display: flex; flex-direction: column; gap: 10px; }
.activity-item { font-size: 0.85rem; }
.activity-system { color: var(--text-secondary); }
.activity-dot { color: var(--primary-color); }
.activity-note {
  background: var(--bg-input); border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.activity-note-head { font-weight: 600; }
.activity-meta { color: var(--text-secondary); font-weight: 400; font-size: 0.78rem; }
.activity-note-body { margin-top: 3px; white-space: pre-wrap; }
/* Note composer — a distinct, inviting card so adding an update reads as a
   primary action, not an afterthought. */
.task-note-composer {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary-color);
  border-radius: var(--radius-md);
  background: var(--card-background, #fff);
  box-shadow: var(--shadow-sm);
}
.task-note-composer-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px;
}
.task-note-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary-color); color: #fff; font-size: 0.8rem; line-height: 1;
}
.task-note-label {
  font-weight: 700; font-size: 0.92rem; color: var(--text-primary, #0f1e32);
}
.task-note-composer textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  resize: vertical;
  min-height: 64px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.task-note-composer textarea::placeholder { color: var(--text-secondary); }
.task-note-composer textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  background: var(--card-background, #fff);
}
.task-note-composer-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.task-note-hint { color: var(--text-secondary); font-size: 0.76rem; font-style: italic; }
.task-note-composer-actions .btn { min-width: 110px; }
[data-theme="dark"] .task-note-composer textarea:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
}

.muted { color: var(--text-secondary); }

/* Mobile: drawer goes full-screen, grid collapses */
@media (max-width: 640px) {
  .task-drawer-panel { width: 100%; }
  .task-meta-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TASKS — merged page (sub-tabs, mobile cards, sort, mentions, a11y)
   ============================================================ */

/* Body scroll-lock while the drawer is open */
body.no-scroll { overflow: hidden; }

/* ── Top-level sub-tabs (My Tasks / Scheduler) — scroll-correct like nav ── */
.tasks-toptabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 16px;
  scrollbar-width: none;
}
.tasks-toptabs::-webkit-scrollbar { display: none; }
.tasks-toptabs.hidden { display: none; }
.tasks-toptab-btn {
  padding: 10px 18px;
  min-height: 44px;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.tasks-toptab-btn:hover { color: var(--text-primary); }
.tasks-toptab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.tasks-toptab-pane { display: none; }
.tasks-toptab-pane.active { display: block; }

/* Overdue quick-toggle in filter bars */
.task-overdue-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
  min-height: 40px;
}

/* Clickable rows */
.tasks-table tbody tr.task-row { cursor: pointer; }
.tasks-table tbody tr.task-row:hover { background: var(--bg-input); }
.tasks-table tbody tr.task-row:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }

/* ── @-mention autocomplete menu ── */
.task-note-input-wrap { position: relative; flex: 1; }
.mention-menu {
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  margin-bottom: 4px;
  background: var(--card-background, #fff);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}
.mention-menu.hidden { display: none; }
.mention-item {
  padding: 8px 12px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.mention-item.active,
.mention-item:hover { background: var(--bg-input); }
.mention-role { color: var(--text-secondary); font-size: 0.75rem; }

/* Bigger collaborator checkbox tap targets */
.td-collab-item { min-height: 40px; }
.td-collab-item input[type="checkbox"] { width: 18px; height: 18px; }

/* Due "soon" now carries a subtle emphasis (not color-only) */
.due-soon { color: var(--text-primary); font-weight: 600; }
.due-soon .due-flag { background: rgba(37,99,235,0.12); color: #2563eb; }

/* Dark-mode overrides for priority/due hex colors (were light-only) */
[data-theme="dark"] .prio-urgent,
[data-theme="dark"] .due-overdue { color: #f87171; }
[data-theme="dark"] .prio-high   { color: #fbbf24; }
[data-theme="dark"] .prio-low    { color: #60a5fa; }
[data-theme="dark"] .due-today   { color: #34d399; }
[data-theme="dark"] .due-tomorrow{ color: #fbbf24; }
[data-theme="dark"] .due-soon    { color: #93c5fd; }

/* ────────────────────────────────────────────────
   MOBILE: task tables collapse to stacked cards (≤640px).
   Overrides the global min-width:700px scrolling-table rule for .tasks-table.
   Uses the data-label attributes on each <td>.
   ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tasks-table { min-width: 0; width: 100%; }
  .tasks-table thead { display: none; }
  .tasks-table, .tasks-table tbody, .tasks-table tr, .tasks-table td { display: block; width: 100%; }
  .tasks-table tbody { }
  .tasks-table tr.task-row {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--card-background, #fff);
  }
  .tasks-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    white-space: normal;
    border: none;
  }
  .tasks-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.78rem;
    flex: 0 0 auto;
  }
  /* Title = card headline */
  .tasks-table td.task-title-cell {
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: 6px;
  }
  .tasks-table td.task-title-cell::before { content: ""; }
  /* Action = full-width button, no label */
  .tasks-table td.action-cell { padding-top: 8px; }
  .tasks-table td.action-cell::before { content: ""; }
  .tasks-table td.action-cell .btn {
    width: 100%;
    min-height: 44px;
  }
  /* Empty/loading/error message rows shouldn't render as cards */
  .tasks-table td.empty-message,
  .tasks-table td.loading-message,
  .tasks-table td.error-message {
    display: block;
    text-align: center;
    justify-content: center;
  }
  .tasks-table td.empty-message::before,
  .tasks-table td.loading-message::before,
  .tasks-table td.error-message::before { content: ""; }
}

/* Optional-field hint in the task drawer */
.field-optional { font-weight: 400; color: var(--text-secondary); font-size: 0.78rem; }

/* "Open ›" hint in the My Tasks row action cell */
.task-open-hint { color: var(--text-secondary); font-size: 0.82rem; white-space: nowrap; }
.task-row:hover .task-open-hint { color: var(--primary-color); }

/* Assignee work-area: add-attachment block */
.task-attach-add { margin-top: 10px; }
.task-attach-add label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
.task-attach-add input[type="file"] { font-size: 0.85rem; }

/* Footer can hold several action buttons — let them wrap on narrow screens */
.task-drawer-footer { flex-wrap: wrap; }

/* ─── Multi-run field editor (fieldRuns.js) ─────────────────────────────── */
.fruns { margin-top: 8px; }
.fruns-list-title {
  font-size: 0.8rem; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.03em; margin: 4px 0 8px;
}
.fruns-empty {
  color: var(--text-secondary); font-size: 0.9rem; padding: 10px 12px;
  background: var(--bg-section); border: 1px dashed var(--border-color); border-radius: 6px;
}
/* Committed run cards — solid, "locked" look */
.fruns-card {
  border: 1px solid var(--border-color); border-radius: 6px;
  background: var(--bg-card); padding: 10px 12px; margin-bottom: 8px;
}
.fruns-card-main { font-size: 0.95rem; color: var(--text-primary); }
.fruns-card-sub { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 2px; }
.fruns-metrics { color: var(--text-secondary); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.fruns-card-actions { margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; min-height: 36px; }
.fruns-danger { color: var(--status-error); }
/* Open run (in the hole) — accent-tinted */
.fruns-open { border-left: 4px solid var(--accent-color); }
.fruns-inhole {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--status-warning-bg); color: var(--status-warning);
  font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fruns-stale { border-left-color: var(--status-error); }
.fruns-stale .fruns-inhole { background: var(--status-error-bg); color: var(--status-error); }
/* The in-progress run form ("New run" panel) */
.fruns-form {
  border: 1px solid var(--border-focus); border-radius: 6px;
  background: var(--bg-section); padding: 14px; margin-top: 4px;
}
.fruns-form-title { font-weight: 600; color: var(--text-heading); margin-bottom: 10px; }
.fruns-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .fruns-grid2 { grid-template-columns: 1fr; } }
.fruns-out-tag {
  font-size: 0.7rem; font-weight: 500; color: var(--accent-dark);
  background: #fff3e6; padding: 1px 6px; border-radius: 3px; margin-left: 4px;
}
[data-theme="dark"] .fruns-out-tag { background: rgba(199,90,0,0.2); color: var(--accent-light); }
.fruns-hint { display: block; margin-top: 8px; color: var(--text-tertiary); font-size: 0.8rem; }
/* State-driven button row (Start Run / Complete Run / Return Motor to Shop) */
.fruns-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.fruns-buttons .btn { min-height: 44px; }
/* File chips (per-run uploads) */
.fruns-file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fruns-file-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-section); border: 1px solid var(--border-color);
  border-radius: 4px; padding: 4px 8px; font-size: 0.8rem; color: var(--text-primary);
  max-width: 100%; overflow: hidden;
}
.fruns-file-chip > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fruns-file-x { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 0; line-height: 1; font-size: 1rem; flex: none; }
.fruns-file-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid var(--border-color); border-top-color: var(--primary-color);
  border-radius: 50%; animation: fruns-spin 0.7s linear infinite;
}
@keyframes fruns-spin { to { transform: rotate(360deg); } }
/* Read-only file links (list cards, breakdown, report) */
.fruns-file-list { margin-top: 6px; font-size: 0.82rem; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.fruns-file-link { color: var(--primary-color); text-decoration: none; }
.fruns-file-link:hover { text-decoration: underline; }
/* Accuracy-acknowledgment modal */
.fruns-ack-overlay {
  position: fixed; inset: 0; z-index: 10000; background: rgba(15,30,46,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fruns-ack-modal {
  background: var(--bg-card); border-radius: 8px; padding: 22px; max-width: 460px; width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.fruns-ack-modal h3 { margin: 0 0 8px; color: var(--text-heading); }
.fruns-ack-modal p { color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 14px; }
.fruns-ack-check {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  background: var(--bg-section); border: 1px solid var(--border-color);
  border-radius: 6px; padding: 12px; font-size: 0.9rem; color: var(--text-primary);
}
.fruns-ack-check input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.fruns-ack-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* In-hole badge on the Motors Out on Rigs cards */
.fr-inhole-badge, .ship-inhole-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--status-warning-bg); color: var(--status-warning);
  font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fr-inhole-badge.stale, .ship-inhole-badge.stale { background: var(--status-error-bg); color: var(--status-error); }

/* Shipping-transit badge (Shipped X ago → frozen Received in X) on the same cards */
.ship-shipped-badge, .fr-shipped-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--status-info-bg, #dbeafe); color: var(--status-info, #2563eb);
  font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ship-shipped-badge.stale, .fr-shipped-badge.stale { background: var(--status-error-bg); color: var(--status-error); }
.ship-shipped-badge.received, .fr-shipped-badge.received { background: var(--status-success-bg, #dcfce7); color: var(--status-success, #16a34a); }

/* Derived shipment sub-badge in the serialized inventory Status column */
.ship-loc-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.ship-loc-badge.in-transit { background: var(--status-warning-bg); color: var(--status-warning); }
.ship-loc-badge.at-rig { background: var(--status-info-bg, #dbeafe); color: var(--status-info, #2563eb); }

/* "Returned with 0 feet/hours drilled" banner (run report) + inline tag (tables) */
.zero-run-banner {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 6px; font-weight: 600;
  background: var(--status-warning-bg); color: var(--status-warning);
  border: 1px solid var(--status-warning);
}
.zero-run-tag {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem;
  font-weight: 600; white-space: nowrap;
  background: var(--status-warning-bg); color: var(--status-warning);
}

/* ─── Per-run breakdown (grading + run history + report) ─────────────────── */
.usage-runs-note { font-size: 0.82rem; color: var(--text-secondary); margin: 6px 0 10px; }
.fruns-breakdown { border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-card); margin-bottom: 12px; }
.fruns-bd-single { padding: 10px 12px; }
.fruns-bd-toggle { cursor: pointer; padding: 10px 12px; font-weight: 600; color: var(--text-heading); list-style: none; }
.fruns-bd-toggle::-webkit-details-marker { display: none; }
.fruns-bd-toggle::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform 0.15s; }
details[open] .fruns-bd-toggle::before { transform: rotate(90deg); }
/* Collapsed multi-run header: compact inline stats next to the toggle label. */
.fruns-bd-summary {
  display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-left: 6px;
  font-weight: 400; font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.fruns-bd-summary strong { color: var(--text-primary); }
.fruns-bd-range { color: var(--text-tertiary); }
.fruns-bd-count { color: var(--text-tertiary); }
/* Single-run / expanded: labeled "readout" stats — bold number over muted label,
   so the totals read as calibrated tiles instead of a run-on line. */
.fruns-bd-single .fruns-bd-summary {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-start;
  margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color);
}
.fruns-bd-single .fruns-bd-summary > span { display: inline-flex; flex-direction: column; line-height: 1.3; }
.fruns-bd-single .fruns-bd-summary strong { font-size: var(--fs-lg); }
/* Range + run-count carry their own text; keep them muted and let them wrap full-width. */
.fruns-bd-single .fruns-bd-range,
.fruns-bd-single .fruns-bd-count { flex-direction: row; font-size: var(--fs-sm); }
.fruns-bd-body { padding: 0 12px 8px; }
.fruns-bd-row { border-top: 1px solid var(--border-color); padding: 10px 0; }
.fruns-bd-single .fruns-bd-row { border-top: none; padding: 0; }
.fruns-bd-row-head { font-size: 0.9rem; color: var(--text-primary); }
.fruns-bd-row-metrics { font-size: 0.85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-top: 2px; }
.fruns-bd-row-dates { font-size: 0.78rem; color: var(--text-tertiary); margin-top: 2px; }
.fruns-bd-row-note { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
   SOP LIBRARY & VIEWER (sopLibrary.js, sopRender.js, sop-print.html)
   Scoped under #sop-library-root / .sop-* / .sop-view. Mobile-first, 44px
   touch targets. Uses existing CSS vars with fallbacks.
   ═══════════════════════════════════════════════════════════════════════ */

/* Utility used by SOP tables (no global definition existed). */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Toolbar (admin: new / upload) ── */
.sop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.sop-toolbar .btn { min-height: 44px; }

/* ── List grid: single column on mobile, 2-col ≥720px ── */
.sop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px) {
  .sop-grid { grid-template-columns: repeat(2, 1fr); }
}

.sop-card {
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 8px;
  background: var(--bg-secondary, #eef1f6);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sop-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.sop-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading, #0f1e2e);
  line-height: 1.3;
}
.sop-type-badge {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.sop-type-asm { background: rgba(37,99,235,0.12); color: #2563eb; }
.sop-type-doc { background: var(--bg-highlight, #eef1f6); color: var(--text-secondary, #3d5068); }
.sop-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary, #3d5068);
}
.sop-card-sizes { font-variant-numeric: tabular-nums; }
.sop-card-ver {
  font-weight: 700;
  color: var(--text-primary, #1a2536);
  font-variant-numeric: tabular-nums;
}
.sop-card-updated {
  font-size: 0.78rem;
  color: var(--text-secondary, #3d5068);
}
.sop-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.sop-card-btn { min-height: 44px; width: 100%; }
@media (min-width: 480px) {
  .sop-card-actions { display: flex; flex-wrap: wrap; }
  .sop-card-btn { width: auto; flex: 1 1 auto; }
}

.sop-empty { text-align: center; padding: 24px 12px; }
.sop-empty-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.sop-empty-cta .btn { min-height: 44px; }

/* ── Detail / editor view headers ── */
.sop-back-btn { min-height: 44px; margin-bottom: 14px; }
.sop-section-title {
  margin: 0 0 14px;
  font-size: 1.1rem;
  color: var(--text-heading, #0f1e2e);
}
.sop-detail-wrap { margin-top: 4px; }

/* ── History list ── */
.sop-history-list { display: flex; flex-direction: column; gap: 8px; }
.sop-history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 6px;
  background: var(--bg-secondary, #eef1f6);
  cursor: pointer;
  color: var(--text-primary, #1a2536);
}
.sop-history-row:hover { border-color: #2563eb; }
.sop-history-ver { font-weight: 700; color: #2563eb; font-variant-numeric: tabular-nums; }
.sop-history-title { font-weight: 600; }
.sop-history-by { font-size: 0.82rem; color: var(--text-secondary, #3d5068); }

/* ═══════════════════════════════════════════════════════════════════════
   SHARED SOP VIEWER (classes emitted by sopRender.js: buildSopHTML)
   ═══════════════════════════════════════════════════════════════════════ */
.sop-view { max-width: 900px; }
.sop-view-head { margin-bottom: 18px; }
.sop-title {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-heading, #0f1e2e);
}
.sop-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 0.85rem;
  color: var(--text-secondary, #3d5068);
}

/* Steps: clean numbered list of cards (numbers via the .sop-step-num badge). */
.sop-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sop-step {
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 8px;
  background: var(--bg-secondary, #eef1f6);
  padding: 14px;
}
.sop-step-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sop-step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* Sub-step (check) entries in the SOP viewer/print: thin left border + small
   indent; pill-shaped decimal number ("1.1") so wider labels fit. */
.sop-step--sub {
  margin-left: 12px;
  border-left: 3px solid #2563eb;
}
.sop-step-num--sub {
  width: auto;
  min-width: 40px;
  padding: 0 9px;
  border-radius: 16px;
  font-size: 0.85rem;
}

/* Document-control footer on the printable SOP page (version + printed date +
   "uncontrolled when printed" — mirrors the paper SOP's own practice). */
.sop-doc-control {
  margin-top: 24px;
  padding-top: 10px;
  border-top: 2px solid var(--border-color, #d3d9e3);
  font-size: 0.78rem;
  color: var(--text-secondary, #3d5068);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sop-step-titlewrap { display: flex; flex-direction: column; gap: 2px; }
.sop-step-kind {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #3d5068);
}
/* The bare connection key (E6, I2…) as a small monospace-ish tag beside the kind. */
.sop-step-connkey {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--bg-secondary, #eef1f6);
  color: var(--text-secondary, #3d5068);
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* The parts a connection joins ("Lower Stationary → Fixed Housing") — the
   primary, human-readable line for each make-up/catch-rod step. */
.sop-step-parts {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-heading, #0f1e2e);
  margin-top: 2px;
}
.sop-step-meta {
  font-size: 0.85rem;
  color: var(--text-primary, #1a2536);
  font-variant-numeric: tabular-nums;
}
.sop-lh-warning {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fee2e2;
  color: #dc2626;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Body: procedure text (left) + images (right) on desktop; stacked on mobile. */
.sop-step-body { margin-top: 10px; }
.sop-step-instructions {
  max-width: 65ch;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--text-primary, #1a2536);
}
.sop-step-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.sop-step-figure {
  margin: 0;
  flex: 0 1 auto;
}
.sop-step-figure img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  height: auto;
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 6px;
}
.sop-step-figure figcaption {
  font-size: 0.78rem;
  color: var(--text-secondary, #3d5068);
  margin-top: 4px;
  max-width: 220px;
}
@media (min-width: 720px) {
  .sop-step-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
  }
  .sop-step-images { margin-top: 0; flex-direction: column; }
}

/* Document-category SOP block. */
.sop-doc { max-width: 700px; }
.sop-doc .sop-title { margin-bottom: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   ASSEMBLY-SOP EDITOR (sopLibrary.js)
   ═══════════════════════════════════════════════════════════════════════ */
.sop-editor { max-width: 760px; }
.sop-editor .form-group { margin-bottom: 14px; }
.sop-editor input[type="text"],
.sop-editor input[type="number"],
.sop-editor textarea,
.sop-editor select { width: 100%; }
.sop-editor-subhead {
  margin: 20px 0 10px;
  font-size: 1rem;
  color: var(--text-heading, #0f1e2e);
}

.sop-editor-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sop-editor-step {
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 8px;
  background: var(--bg-secondary, #eef1f6);
  padding: 12px;
}
.sop-editor-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sop-editor-step-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.sop-editor-step-kind {
  flex: 1 1 auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #3d5068);
}
.sop-editor-step-ctrls { display: flex; gap: 4px; flex: 0 0 auto; }

/* ── Sub-steps (checks nested under a parent step) ─────────────────────────
   Thin left border + small indent (not deep indentation) so cards keep their
   width at 375px. Decimal number chips ("1.1") are pill-shaped to fit. */
.sop-editor-substeps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 10px;
  border-left: 3px solid #2563eb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sop-editor-substep {
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 8px;
  background: var(--bg-primary, #fff);
  padding: 10px;
}
.sop-editor-substep-num {
  width: auto;
  min-width: 34px;
  padding: 0 8px;
  border-radius: 14px;
}
.sop-add-substep {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sop-add-substep .btn { min-height: 44px; }
.sop-add-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--text-secondary, #3d5068);
}
/* "Before torque" / "After torque" divider above each phase's check list —
   makes the editor order match the assembly page. */
.sop-editor-phase-label {
  margin: 10px 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #3d5068);
}
/* The make-up (torque) card in the editor — reads as the middle item, so the
   step order matches the assembly page (before-checks → make-up → after-checks).
   The instructions are collapsible so a long procedure doesn't dominate. */
.sop-editor-makeup {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #d3d9e3);
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  background: var(--bg-primary, #fff);
}
.sop-editor-makeup-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 4px;
}
/* Instruction blocks in the editor — visually distinct from checks (neutral
   grey accent instead of the blue check accent). */
.sop-editor-substep--instr {
  border-left: 3px solid var(--text-secondary, #3d5068);
}
.sop-editor-substep-num--instr {
  background: var(--text-secondary, #3d5068);
}
.sop-step-ctrl {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1a2536);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}
.sop-step-ctrl:hover:not(:disabled) { border-color: #2563eb; }
.sop-step-ctrl:disabled { opacity: 0.4; cursor: not-allowed; }
.sop-step-remove { color: #dc2626; }

.sop-step-numrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sop-step-numrow .form-group { flex: 1 1 120px; margin-bottom: 0; }

.sop-step-addphoto { margin-top: 10px; }
.sop-photo-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px dashed var(--border-color, #d3d9e3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary, #3d5068);
}
.sop-photo-label:hover { border-color: #2563eb; color: #2563eb; }

.sop-editor-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.sop-editor-thumb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 160px;
}
.sop-editor-thumb img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 6px;
}
.sop-thumb-caption { width: 100%; font-size: 0.8rem; }
.sop-editor-thumb .sop-step-ctrl { align-self: flex-start; }

.sop-add-step {
  margin-top: 16px;
  padding: 12px;
  border: 1px dashed var(--border-color, #d3d9e3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sop-add-step-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sop-add-step-row .btn { min-height: 44px; }
.sop-add-select {
  flex: 1 1 200px;
  min-height: 44px;
}
.sop-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.sop-editor-actions .btn { min-height: 44px; }

/* ═══════════════════════════════════════════════════════════════════════
   THREAD-PROFILES REFERENCE CARD (collapsible, sopLibrary.js)
   ═══════════════════════════════════════════════════════════════════════ */
.sop-ref-card {
  margin-top: 24px;
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 8px;
  overflow: hidden;
}
.sop-ref-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--bg-secondary, #eef1f6);
  user-select: none;
}
.sop-ref-title {
  font-weight: 700;
  color: var(--text-heading, #0f1e2e);
}
.sop-ref-chevron {
  color: var(--text-secondary, #3d5068);
  transition: transform 0.15s ease;
  transform: rotate(90deg);
}
.sop-ref-card.collapsed .sop-ref-chevron { transform: rotate(0deg); }
.sop-ref-card.collapsed .sop-ref-body { display: none; }
.sop-ref-body { padding: 14px 16px; }

.sop-ref-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.sop-ref-filters .custom-multiselect { flex: 1 1 160px; min-width: 140px; }
.sop-ref-clear {
  margin-left: auto;
  min-height: 44px;
}

.sop-ref-table { width: 100%; }
.sop-ref-table th, .sop-ref-table td { vertical-align: top; }
.sop-ref-files-cell { display: flex; flex-wrap: wrap; gap: 6px; }
.sop-file-chip {
  display: inline-block;
  padding: 4px 10px;
  min-height: 32px;
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 4px;
  background: var(--bg-highlight, #eef1f6);
  color: #2563eb;
  font-size: 0.8rem;
  cursor: pointer;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sop-file-chip:hover { border-color: #2563eb; }

@media (max-width: 480px) {
  .sop-ref-filters { flex-direction: column; align-items: stretch; }
  .sop-ref-clear { margin-left: 0; }
}

/* Remove-file ✕ inside a thread-profile drawing chip (predictiveAnalytics form). */
.thread-file-remove {
  border: none;
  background: transparent;
  color: #dc2626;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 0 0 4px;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   ASSEMBLE MOTOR — focused stage-by-stage stepper
   One stage on screen (a make-up + its checks), sticky progress header with
   tappable chips + a step drawer, sticky bottom nav. Mobile-first, 44px targets.
   ══════════════════════════════════════════════════════════════════════════ */
.asm-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.asm-topbar-title {
  font-weight: 700;
  color: var(--text-heading, #0f1e2e);
  font-variant-numeric: tabular-nums;
}

.asm-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-secondary, #eef1f6);
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.asm-header-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--text-secondary, #3d5068);
}
.asm-count { font-variant-numeric: tabular-nums; }
.asm-pct {
  font-weight: 800;
  color: var(--text-heading, #0f1e2e);
  font-variant-numeric: tabular-nums;
}
.asm-progressbar {
  height: 8px;
  border-radius: 4px;
  background: var(--border-color, #d3d9e3);
  overflow: hidden;
  margin: 6px 0 10px;
}
.asm-progress-fill {
  height: 100%;
  background: #2563eb;
  border-radius: 4px;
  transition: width 200ms ease;
}
@media (prefers-reduced-motion: reduce) { .asm-progress-fill { transition: none; } }

.asm-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.asm-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1 1 auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.asm-chip {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  border: 2px solid var(--border-color, #d3d9e3);
  background: var(--bg-primary, #fff);
  color: var(--text-secondary, #3d5068);
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.asm-chip--current {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}
.asm-chip--done {
  background: var(--success-color, #16a34a);
  border-color: var(--success-color, #16a34a);
  color: #fff;
}
.asm-chip--skipped {
  background: var(--bg-secondary, #eef1f6);
  border-color: var(--border-color, #d3d9e3);
  color: var(--text-secondary, #3d5068);
}
.asm-drawer-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #d3d9e3);
  background: var(--bg-primary, #fff);
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-secondary, #3d5068);
}

.asm-drawer {
  margin-top: 10px;
  border-top: 1px solid var(--border-color, #d3d9e3);
  padding-top: 8px;
  max-height: 45vh;
  overflow-y: auto;
}
.asm-drawer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color, #d3d9e3);
  padding: 8px 4px;
  min-height: 40px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-primary, #1a2536);
}
.asm-drawer-row--sub { padding-left: 22px; }
.asm-drawer-row--sub .asm-drawer-label { color: var(--text-secondary, #3d5068); }
.asm-drawer-label { overflow: hidden; text-overflow: ellipsis; }

.asm-stage {
  max-width: 680px;
  margin: 0 auto;
}
.asm-checks-label {
  margin: 14px 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #3d5068);
}
/* Make-up procedure shown expanded (not collapsed) on the assembly card so the
   tech always sees the built-in instructions. */
.asm-procedure {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--bg-secondary, #eef1f6);
  border-radius: 6px;
}
.asm-procedure-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary, #3d5068);
  margin-bottom: 3px;
}
.asm-procedure-text {
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-wrap;
  color: var(--text-primary, #1a2536);
}
/* Label on the bottom action card (torque + Mark Done) of a make-up stage. */
.asm-action-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 6px;
}
.asm-final-banner {
  background: var(--bg-secondary, #eef1f6);
  border-left: 4px solid var(--risk-moderate, #f59e0b);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 12px 0 4px;
  font-size: 0.85rem;
  color: var(--text-secondary, #3d5068);
}

/* Compact in-card actions: photo + note-toggle on one row */
.asm-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.asm-photo-btn, .asm-note-toggle {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #d3d9e3);
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #1a2536);
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.asm-note-field { margin-top: 4px; }

.asm-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-body, #d8dde6);
  border-top: 1px solid var(--border-color, #d3d9e3);
  padding: 10px 4px;
  margin-top: 14px;
}
.asm-nav-label {
  font-size: 0.85rem;
  color: var(--text-secondary, #3d5068);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.asm-complete { text-align: center; padding-top: 20px; }
.asm-complete-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--success-color, #16a34a);
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════ Topology diagram ═══════════════════════════ */
/* Schematic 2D motor-assembly drawing (client/js/topologyDiagram.js). All
   colors via CSS custom properties → light/dark parity automatic. */
.topo-diagram { max-width: 460px; margin: 0 auto; min-width: 300px; }
.topo-diagram-svg { display: block; width: 100%; height: auto; font-family: inherit; }
/* Horizontal (reference explorer): the SVG is wide, not tall — let it use the
   full card width and cap height so it doesn't get huge. */
.topo-diagram--h { max-width: 100%; }
.topo-diagram-svg--h { max-height: 340px; }
.topo-diagram-error { padding: 16px; color: var(--text-secondary); font-style: italic; }

/* Solid-body render: ONE continuous tool, adjacent parts alternate colour
   (blue A / green B) so each external thread point is a colour boundary. */
/* Muted engineering-render palette (not saturated candy-cane). Two soft brushed-
   metal tones — EACH PART TYPE its own muted colour (gradients defined inline in
   defs() in topologyDiagram.js: Steel/Tan/Slate/Sage/Bronze/Teal). Gentle
   cylindrical shading reads as a machined tube; the COLOURED markers stay the
   only saturated accents so the body stays calm/professional. */
.topo-body { stroke: #46586b; stroke-width: 1.1; }
.topo-body-hl { fill: #fff; opacity: 0.22; }                                                  /* specular stripe */
.topo-body-seam { fill: #2e3c4a; opacity: 0.5; }                                              /* machined shoulder */
/* Cutaway internals in neutral steel tones (complement the muted body). */
.topo-cut-edge { stroke: #3a4a5a; stroke-width: 0.8; opacity: 0.5; }
/* Inner rotating-train cross-section shown in the cutaway window: light steel
   core + diagonal hatch (cut-metal), rotor flutes, mandrel bore centreline. */
.topo-core { fill: #dfe4ea; stroke: #46586b; stroke-width: 0.8; }
.topo-core--slip { fill: #e8ebef; stroke-dasharray: 2 2; }
.topo-hatch-fill { stroke: none; pointer-events: none; }
.topo-hatch-line { stroke: #5a6b7c; stroke-width: 0.6; opacity: 0.55; }
.topo-lobe { fill: none; stroke: #46586b; stroke-width: 0.7; opacity: 0.5; }
.topo-bore-line { stroke: #46586b; stroke-width: 0.8; opacity: 0.5; stroke-dasharray: 3 2; }
/* Hollow bore = the drilling-fluid exit channel (open through Flow Diverter →
   mandrel → bit box). Rendered as an open channel, faint blue fluid tint. */
.topo-bore { fill: color-mix(in srgb, #2a6399 12%, var(--bg-card, #fff)); stroke: #46586b; stroke-width: 0.7; }
/* Rotor: brushed-steel shaft with helical spiral flutes (power-section look). */
.topo-rotor { fill: #c3ccd4; stroke: #46586b; stroke-width: 0.8; }
/* Catch rod: one solid darker gray (darker than the rotor); the skinny rod +
   its cross-bar (the "catch"). */
.topo-catchrod { fill: #7a8794; stroke: #4a5763; stroke-width: 0.7; }
/* Transmission drivetrain (Upper Coupling / Coupling Shaft / Flow Diverter):
   solid steel, opaque like the rotor (not faint). */
.topo-trans { fill: #b7c1cb; stroke: #46586b; stroke-width: 0.9; }
/* Mandrel wall strips flanking the bore — mid-tone of the mandrel body gradient
   (topoMandrelBody #3f5567→#5a7186→#3a4f60) so the pin walls, flared end and bit
   box all read as ONE consistent mandrel colour. */
.topo-mandrel-wall { fill: #4b6274; stroke: none; }
/* Upper Rotating: its OWN colour — a muted plum/magenta that stands out from the
   bronze Bearing Housing and every other (blue/tan/sage/teal) part tone. */
.topo-rotating { fill: #8a5a72; stroke: #5e3c4d; stroke-width: 0.6; }
.topo-flute { fill: none; stroke: #3a4a5a; stroke-width: 1.4; opacity: 0.55; stroke-linecap: round; }
.topo-flute--valley { stroke-width: 0.7; opacity: 0.25; }
/* Stator elastomer lining (the dark rubber the rotor turns against). */
.topo-elastomer { fill: #6b5a4a; opacity: 0.5; stroke: none; }
.topo-part-label { fill: var(--text-secondary, #3d5068); font-size: 12px; font-weight: 600; }
.topo-part-label--inner { fill: var(--primary-light, #2a6399); font-size: 11px; font-style: italic; }
.topo-label-leader { stroke: var(--border-color, #d0d7e2); stroke-width: 0.8; }

/* Seams — clean coupling collar (machined band) at each threaded joint. */
.topo-collar { stroke: var(--primary-dark, #163758); stroke-width: 1; }
.topo-collar--ext { fill: color-mix(in srgb, var(--status-error, #c0392b) 40%, var(--bg-card, #fff)); stroke: var(--status-error, #c0392b); }
.topo-collar--int { fill: color-mix(in srgb, var(--primary-color, #1e4976) 40%, var(--bg-card, #fff)); stroke: var(--primary-dark, #163758); }
.topo-collar-scribe { stroke: var(--primary-dark, #163758); stroke-width: 0.5; opacity: 0.4; }

/* Endpoints */
.topo-endpoint-line { stroke: var(--text-tertiary, #566375); stroke-width: 1; stroke-dasharray: 4 3; }
.topo-endpoint { fill: var(--text-tertiary, #566375); font-size: 11px; font-style: italic; }

/* Connection markers */
.topo-leader { stroke: var(--text-tertiary, #566375); stroke-width: 0.9; opacity: 0.65; }
.topo-conn-hit { fill: transparent; }
.topo-conn { cursor: pointer; }
.topo-conn:focus { outline: none; }
.topo-conn:focus-visible .topo-conn-badge { stroke: var(--accent-color, #c75a00); stroke-width: 3; }
/* Badge FILL encodes thread facing: external (OD, E-chain) = red, internal
   (bore/ID, inner train) = blue. Default (no facing data) = neutral navy. */
.topo-conn-badge { fill: var(--primary-color, #1e4976); stroke: var(--bg-card, #fff); stroke-width: 1.5; }
.topo-conn-badge--external { fill: var(--status-error, #c0392b); }
.topo-conn-badge--internal { fill: var(--primary-color, #1e4976); }
.topo-conn-badge--plain { fill: var(--bg-card, #fff); stroke: var(--text-tertiary, #566375); }
.topo-conn-badge--dim { opacity: 0.4; }
/* Status: done/skipped are a ring over the facing fill. CURRENT is unmistakable
   — a GOLD fill + gold glow ring that overrides the facing colour, so the tech
   instantly sees which connection they're on. */
.topo-conn-badge--done { stroke: var(--status-success, #0e9e6e); stroke-width: 3.5; }
.topo-conn-badge--skipped { fill: var(--bg-hover, #e8edf4); stroke: var(--text-tertiary, #566375); stroke-width: 1.5; stroke-dasharray: 2 2; }
.topo-conn-badge--current { fill: #e6a817 !important; stroke: #fff; stroke-width: 2; }
.topo-conn-halo { fill: none; stroke: #e6a817; stroke-width: 4; opacity: 0.9; }
.topo-conn-halo-glow { fill: #e6a817; opacity: 0.18; }
/* SELECTED — the connection whose detail is showing in the inspector. Keeps the
   bubble's own facing colour (red/blue) and adds a bold BLUE ring + soft glow, so
   it's unmistakable which bubble you're viewing. Distinct from gold 'current' and
   the green 'done' ring; coexists with all of them. Toggled on the clicked <g>. */
.topo-conn-selected .topo-conn-badge { stroke: var(--primary-color, #2563eb); stroke-width: 3.5; }
.topo-conn-selected { filter: drop-shadow(0 0 4px var(--primary-color, #2563eb)); }
.topo-conn-num { fill: var(--text-on-primary, #fff); font-size: 12px; font-weight: 700; }
.topo-conn-num--dark { fill: var(--text-secondary, #3d5068); }
.topo-lh-pill rect { fill: var(--status-error, #c0392b); }
.topo-lh-pill text { fill: #fff; font-size: 8px; font-weight: 700; }

/* Diagram color/state LEGEND (TopologyDiagram.legendHTML). Rendered under the
   diagram on every interactive surface; swatch fills reuse the exact badge tokens
   so the key matches the markers. Distinct .topo-legend* classes so the diagram's
   click handling never touches it. Hidden in print. */
.topo-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); font-size: 0.75rem; color: var(--text-secondary); }
.topo-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.topo-legend-swatch { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto; font-size: 9px; font-weight: 700; color: #fff; line-height: 1; box-sizing: border-box; }
.topo-legend-swatch.is-external { background: var(--status-error, #c0392b); }
.topo-legend-swatch.is-internal { background: var(--primary-color, #1e4976); }
.topo-legend-swatch.is-pack { background: var(--primary-color, #1e4976); }   /* letter glyph = pack joint (colour still = facing) */
.topo-legend-swatch.is-selected { background: var(--bg-card, #fff); border: 2px solid var(--primary-color, #2563eb); box-shadow: 0 0 3px var(--primary-color, #2563eb); }
.topo-legend-swatch.is-dim { background: var(--bg-card, #fff); border: 1px solid var(--text-tertiary, #566375); opacity: 0.45; }
.topo-legend-swatch.is-current { background: #e6a817; }
.topo-legend-swatch.is-done { background: var(--bg-card, #fff); border: 2px solid var(--status-success, #0e9e6e); color: var(--status-success, #0e9e6e); }
.topo-legend-swatch.is-skipped { background: var(--bg-hover, #e8edf4); border: 1px dashed var(--text-tertiary, #566375); color: var(--text-tertiary, #566375); }
.topo-legend-pill { display: inline-flex; align-items: center; justify-content: center; height: 15px; padding: 0 5px; border-radius: 3px; background: var(--status-error, #c0392b); color: #fff; font-size: 9px; font-weight: 700; }
.topo-legend-label { white-space: nowrap; }
@media print { .topo-legend { display: none !important; } }

/* Config toggle (reference explorer + SOP editor) */
.topo-config-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 5px); overflow: hidden; margin-bottom: 10px; flex-wrap: wrap; }
.topo-config-toggle button { border: none; background: var(--bg-card, #fff); color: var(--text-secondary); padding: 8px 12px; min-height: 40px; cursor: pointer; font-size: 0.82rem; border-right: 1px solid var(--border-color); }
.topo-config-toggle button:last-child { border-right: none; }
.topo-config-toggle button.active { background: var(--primary-color, #1e4976); color: var(--text-on-primary, #fff); }
.topo-explorer-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 14px; }
.topo-explorer-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-secondary); }
.topo-explorer-controls select { min-height: 40px; }

/* SOP viewer / print embedded diagram */
.sop-view-diagram { margin: 14px 0 18px; padding: 12px; background: var(--bg-section, #eef0f4); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); }

/* Assemble wizard: two-column body — steps left, sticky diagram right, so the
   diagram stays in view while the tech scrolls the step cards. The diagram gets
   a generous fixed width so its labels stay legible next to the step text. */
.asm-body-layout { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 24px; align-items: start; }
.asm-body-main { min-width: 0; }
.asm-diagram { padding: 14px; background: var(--bg-section, #eef0f4); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); position: sticky; top: 12px; align-self: start; }
.asm-diagram .topo-diagram { max-width: 100%; }
.asm-diagram.hidden { display: none; }
@media (max-width: 1100px) { .asm-body-layout { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (max-width: 900px) {
  /* Stack on mobile; diagram sits above the steps and is toggle-collapsible. */
  .asm-body-layout { grid-template-columns: 1fr; }
  .asm-diagram { position: static; order: -1; margin-bottom: 12px; }
  .asm-diagram .topo-diagram { max-width: 460px; }
}

/* SOP editor two-pane layout — SHARED by the SOP VIEWER (sopViewLayoutHTML reuses
   these exact classes so the read-only viewer matches the editor's sizing/sticky/
   fonts/mobile-toggle). Editing these restyles both surfaces by design. */
.sop-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 560px); gap: 20px; align-items: start; }
/* Sticky diagram column. max-height + overflow-y keep it usable when the enlarged
   diagram + inspector are taller than the viewport (else the inspector would sit
   below the fold, unreachable while pinned). Overflow on the sticky element itself
   is fine — it's an ancestor overflow that breaks sticky, not self-overflow. */
.sop-editor-diagram { position: sticky; top: 12px; align-self: start; }
.sop-editor-diagram .topo-diagram { max-width: 100%; }   /* fill the wider column at full size */
/* Connection detail now opens in the slide-over DRAWER (not stacked below the
   diagram), so the diagram fills the column at full size — nothing competes with
   it for vertical space. */
.sop-diagram-hint { font-size: 0.78rem; color: var(--text-tertiary); font-style: italic; margin: 8px 0 0; }
/* "+ Add [connection]" pill — appears under the diagram when a stepless connection
   is clicked (editor). Non-covering; the diagram stays fully visible. */
.sop-addpill-host:empty { display: none; }
.sop-addpill-host { margin-top: 8px; }
.sop-add-pill { width: 100%; }
/* Scoped font bump — larger labels on the big editor/viewer diagram only; the
   wizard, reference explorer, and print keep the base sizes. Rendered px = these
   × columnWidth / 470 viewBox → ~14–15px at common desktop widths. */
.sop-editor-diagram .topo-part-label { font-size: 13px; }
.sop-editor-diagram .topo-part-label--inner { font-size: 12px; }
.sop-editor-diagram .topo-endpoint { font-size: 12px; }
.sop-editor-diagram .topo-conn-num { font-size: 13px; }
.sop-editor-diagram .topo-lh-pill text { font-size: 9px; }
.sop-editor-inspector { margin-top: 12px; padding: 12px; background: var(--bg-section, #eef0f4); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); min-height: 60px; }
.sop-editor-inspector-empty { color: var(--text-tertiary); font-size: 0.84rem; font-style: italic; }

/* Mobile Steps ⇄ Diagram pane toggle — hidden on desktop (both panes show);
   only inside the ≤900px MQ below does it appear + gate which pane is visible. */
.sop-pane-toggle { display: none; }

/* Read-only inspector's "+ Add step" affordance (shown when a clicked connection
   isn't in the SOP yet). The old diagram-driven authoring toolbar was removed —
   the step cards are the sole editor now. */
.sop-inspector-author { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.sop-inspector-add { width: 100%; }
.sop-step-flash { animation: sop-step-flash 2s ease-out; }
@keyframes sop-step-flash {
  0%, 100% { box-shadow: none; }
  15% { box-shadow: 0 0 0 3px var(--primary-color, #1e4976); }
}
@media (max-width: 900px) {
  .sop-editor-layout { grid-template-columns: 1fr; }
  .sop-editor-diagram { position: static; }
  /* Segmented Steps ⇄ Diagram switch — only one pane shows at a time on mobile. */
  .sop-pane-toggle { display: flex; margin-bottom: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 5px); overflow: hidden; }
  .sop-pane-toggle button { flex: 1 1 50%; min-height: 44px; border: none; background: var(--bg-card, #fff); color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
  .sop-pane-toggle button + button { border-left: 1px solid var(--border-color); }
  .sop-pane-toggle button.active { background: var(--primary-color, #1e4976); color: var(--text-on-primary, #fff); }
  .sop-editor-layout.sop-pane-steps .sop-editor-diagram { display: none; }
  .sop-editor-layout.sop-pane-diagram .sop-editor-main { display: none; }
}

/* ── Connection detail drawer (slide-over, all breakpoints) ── */
.conn-drawer { position: fixed; inset: 0; z-index: 1200; }
.conn-drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 30, 50, 0.42); }
.conn-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--bg-card, #fff); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; animation: conn-drawer-in 0.16s ease-out; }
@keyframes conn-drawer-in { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.conn-drawer-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-color); }
.conn-drawer-close { border: none; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--text-secondary); width: 44px; height: 44px; }
.conn-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; }

/* Detail content (shared drawer + editor inspector) */
.conn-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.conn-detail-title { font-weight: 700; color: var(--text-heading, #0f1e2e); font-size: 1rem; }
.conn-key-pill { background: var(--primary-color, #1e4976); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.conn-sides { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.conn-side { background: var(--bg-section, #eef0f4); border: 1px solid var(--border-color); border-radius: var(--radius-sm, 5px); padding: 8px 10px; flex: 1 1 40%; min-width: 120px; }
.conn-side-type { display: block; font-weight: 600; color: var(--text-primary); font-size: 0.88rem; }
.conn-side-meta { display: block; color: var(--text-tertiary); font-size: 0.76rem; margin-top: 2px; }
.conn-side-join { color: var(--text-tertiary); font-weight: 700; }
.conn-note { font-size: 0.82rem; color: var(--text-secondary); margin: 8px 0; }
.conn-note--muted { color: var(--text-tertiary); font-style: italic; }
.conn-thread { margin: 12px 0; }
.conn-lh-warning { background: var(--status-error, #c0392b); color: #fff; font-weight: 600; font-size: 0.82rem; padding: 6px 10px; border-radius: var(--radius-sm, 5px); margin-bottom: 8px; }
.conn-profile-name { font-weight: 600; color: var(--text-primary); }
.conn-torque { font-size: 1.05rem; font-weight: 700; color: var(--primary-color, #1e4976); font-variant-numeric: tabular-nums; }
.conn-torque--none { color: var(--text-tertiary); font-weight: 400; font-size: 0.9rem; }
.conn-ambiguous { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 6px; }
.conn-cand { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--border-color); }
.conn-cand-meta { font-size: 0.76rem; color: var(--text-tertiary); }
.conn-proc { margin: 12px 0; }
.conn-proc h5 { margin: 0 0 4px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); }
.conn-proc p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); white-space: pre-wrap; }
.conn-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.conn-img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm, 5px); border: 1px solid var(--border-color); }

@media print {
  .topo-config-toggle, .topo-explorer-controls, .conn-drawer { display: none !important; }
  .topo-diagram { max-width: 4.4in; page-break-inside: avoid; }
  .topo-part, .topo-pin, .topo-box, .topo-thread, .topo-seam-neutral { stroke: #333 !important; }
  .topo-part-label, .topo-endpoint { fill: #000 !important; }
  .topo-conn-badge { fill: #fff !important; stroke: #000 !important; }
  .topo-conn-num, .topo-conn-num--dark { fill: #000 !important; }
  .sop-view-diagram { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .conn-drawer-panel { animation: none; }
  .sop-step-flash { animation: none; outline: 2px solid var(--primary-color, #1e4976); }
}

/* ═══════════════════════════════════════════════════════════════
   REVENUE SUB-TAB
   ═══════════════════════════════════════════════════════════════ */

/* Status badges (mirror the order-badge look) */
.rev-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.rev-badge-needs    { background: #fdecea; color: #a5281b; }
.rev-badge-priced   { background: #e7f0fd; color: #1a4b8f; }
.rev-badge-invoiced { background: #e6f4ea; color: #1e7e34; }
.rev-badge-paid     { background: #e2e8f0; color: #334155; }

/* Collapsible sections (report + pricing setup) */
.revenue-collapsible {
  margin-top: 18px;
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 8px;
  overflow: hidden;
}
.revenue-collapsible.hidden { display: none; }
.revenue-collapsible > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-heading, #0f1e2e);
  background: var(--bg-secondary, #eef1f6);
}
.revenue-collapsible > summary::-webkit-details-marker { display: none; }
.revenue-collapsible > summary::before { content: '▸'; }
.revenue-collapsible[open] > summary::before { content: '▾'; }
.revenue-setup-hint { font-weight: 400; color: var(--text-secondary, #556); font-size: 0.85rem; }
.revenue-report-body, .revenue-setup-body { padding: 16px; }
.revenue-setup-block { margin-bottom: 20px; }
.revenue-setup-note { font-size: 0.85rem; color: var(--text-secondary, #556); margin: 4px 0 10px; }
.revenue-report-chart-wrap { position: relative; height: 240px; margin: 12px 0 18px; }

/* Empty-state inline (models list) */
.empty-state-inline { color: var(--text-tertiary, #889); font-size: 0.9rem; padding: 10px 0; }

/* Pricing model cards */
.pricing-models-list { display: flex; flex-direction: column; gap: 8px; }
.pricing-model-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 6px;
  background: #fff;
}
.pricing-model-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pricing-model-summary { font-size: 0.82rem; color: var(--text-secondary, #556); }
.pricing-model-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Revenue flat-list rows — whole row clickable, comfortable touch height */
#revenue-table tbody tr.rev-row { cursor: pointer; }
#revenue-table tbody tr.rev-row td { min-height: 44px; }
#revenue-table tbody tr.rev-row:hover { background: var(--bg-hover, #eef2f9); }
.rev-select-spacer { display: inline-block; width: 16px; }
.rev-inv-link { color: var(--brand-blue, #2563eb); font-weight: 600; text-decoration: none; }
.rev-inv-link:hover { text-decoration: underline; }
.cost-kpi-clickable { cursor: pointer; }
.cost-kpi-clickable:hover { background: var(--bg-hover, #eef2f9); }

/* One-off pricing form (inside the detail modal) */
.rev-oneoff { margin: 12px 0; border: 1px solid var(--border-color, #cfd6e2); border-radius: 4px; }
.rev-oneoff > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.rev-oneoff-body { padding: 0 12px 12px; }
.rev-detail-actions-left { display: flex; gap: 8px; flex-wrap: wrap; margin-right: auto; }
.rev-modal-content .modal-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Pricing-model modal internals */
.rev-modal-content { width: min(760px, 94vw); max-width: 760px; box-sizing: border-box; }
.rev-modal-content label { display: block; margin-bottom: 10px; font-size: 0.9rem; }
.rev-modal-content label input[type="text"],
.rev-modal-content label input[type="number"],
.rev-modal-content label input[type="date"],
.rev-modal-content label select,
.rev-modal-content label textarea { display: block; width: 100%; margin-top: 4px; box-sizing: border-box; }
.pm-rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pm-fees-block { margin: 10px 0; }
/* Fee editor: shared column template for the header + each row so they align. */
.pm-fee-head,
.pm-fee-row { display: grid; grid-template-columns: 2fr 1.2fr 1.6fr 40px; gap: 8px; align-items: center; }
.pm-fee-head {
  margin-bottom: 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #556);
  font-weight: 700;
}
.pm-fee-row { margin-bottom: 6px; }
.pm-fee-row input, .pm-fee-row select { width: 100%; box-sizing: border-box; min-width: 0; }
.pm-fee-row .pm-fee-del { padding: 4px 8px; }
.pm-active-field { display: flex; align-items: center; gap: 8px; }

/* Revenue edit modal — line items */
.rev-modal-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.85rem; color: var(--text-secondary, #556); margin-bottom: 12px; }
.rev-lines-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 0.88rem; }
.rev-lines-table th, .rev-lines-table td { border-bottom: 1px solid var(--border-color, #e2e8f0); padding: 5px 8px; text-align: left; }
.rev-lines-table td.tabular-nums, #rev-lines-total { font-variant-numeric: tabular-nums; text-align: right; }
.rev-lines-table input[type="number"], .rev-lines-table input[type="text"] { width: 100%; }
.rev-min-tag { font-size: 0.68rem; background: #e7f0fd; color: #1a4b8f; padding: 1px 5px; border-radius: 8px; }
.rev-modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.rev-notes-field { grid-column: 1 / -1; }

/* Assignments table + edit modal */
.pa-any { color: var(--text-tertiary, #889); font-style: italic; }
.pa-hint { font-weight: 400; color: var(--text-secondary, #556); font-size: 0.8rem; }
.pa-multi-block { margin: 12px 0; }
.pa-multi-block h4 { margin: 0 0 6px; font-size: 0.9rem; }
.pa-checkgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  max-height: 160px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #d3d9e3);
  border-radius: 6px;
  background: var(--bg-section, #f8fafc);
}
.pa-checkgroup label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.9rem;
  min-height: 32px;
  white-space: nowrap;
}
.pa-checkgroup input[type="checkbox"] { width: 18px; height: 18px; }

/* Combined-invoice selection bar */
.revenue-selection-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #eef4ff;
  border: 1px solid #c7d9f5;
  border-left: 4px solid var(--primary-color, #2563eb);
  border-radius: 6px;
}
.revenue-selection-bar.hidden { display: none; }
.revenue-selection-hint { font-size: 0.82rem; color: var(--text-secondary, #556); margin-left: auto; }
.rev-select { width: 16px; height: 16px; vertical-align: middle; }

/* Per-run detail cards in the combine-confirm dialog */
.rev-run-cards { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; }
.rev-run-card { border: 1px solid var(--border-color, #d3d9e3); border-radius: 6px; overflow: hidden; }
.rev-run-card-head {
  background: var(--bg-secondary, #eef1f6);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.9rem;
}
.rev-run-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  padding: 10px 12px;
  font-size: 0.88rem;
}
.rev-run-card-grid > div { display: flex; gap: 6px; }
.rev-run-card-grid span { color: var(--text-secondary, #556); min-width: 62px; }
.rev-conflict { color: var(--status-error, #c0392b); font-weight: 600; font-size: 0.8rem; }
.rev-conflict-note {
  background: #fdecea; border: 1px solid #e0b4ae; color: #a5281b;
  padding: 8px 12px; border-radius: 6px; font-size: 0.88rem; margin-bottom: 10px;
}
.rev-pick { display: block; margin-bottom: 8px; font-size: 0.9rem; }
.rev-pick select { display: block; width: 100%; margin-top: 4px; }
.rev-combined-total { font-size: 1.05rem; margin: 10px 0; text-align: right; }

/* Optional ("When selected") fees inside a run card */
.rev-optfees { border-top: 1px dashed var(--border-color, #d3d9e3); padding: 8px 12px; }
.rev-optfees-head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, #556); font-weight: 700; margin-bottom: 4px; }
.rev-optfees label { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; min-height: 30px; margin: 0; }
.rev-optfees input[type="checkbox"] { width: 18px; height: 18px; }

/* Invoice: per-motor charge sub-header + mixed-field marker (in invoice.html scope) */
.inv-charge-motor td { background: #eef1f6; font-weight: 700; font-size: 0.8rem; }
.inv-mixed { color: #c0392b; font-size: 0.8rem; font-weight: 600; }

/* ─── Return form: prominent run-sum totals strip ─── */
.usage-runs-total-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: #eef4ff;
  border: 1px solid #c7d9f5;
  border-left: 4px solid var(--primary-color, #2563eb);
  border-radius: 6px;
}
.usage-runs-total-strip .urt-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1a4b8f;
  font-weight: 700;
}
.usage-runs-total-strip .urt-figure {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f1e2e;
  font-variant-numeric: tabular-nums;
}
.usage-runs-total-strip .urt-unit { font-size: 0.85rem; color: var(--text-secondary, #556); font-weight: 600; }
.usage-runs-total-strip .urt-runcount { margin-left: auto; font-size: 0.9rem; color: #1a4b8f; font-weight: 600; }

@media (max-width: 640px) {
  .pm-rate-grid, .rev-modal-fields { grid-template-columns: 1fr; }
  /* Fee rows stack vertically on phones; the header row is hidden (each input
     carries its own placeholder). Delete button sits full-width at the bottom. */
  .pm-fee-head { display: none; }
  .pm-fee-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--border-color, #d3d9e3);
    border-radius: 6px;
    margin-bottom: 10px;
  }
  .pm-fee-row .pm-fee-del { justify-self: end; }
  .usage-runs-total-strip .urt-runcount { margin-left: 0; width: 100%; }
}