*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold: #D4A017;
  --gold-bg: #FFF8E1;
  --gold-border: #F9A825;
  --grey: #616161;
  --grey-bg: #F5F5F5;
  --grey-border: #9E9E9E;
  --blue: #1565C0;
  --blue-light: #BBDEFB;
  --blue-border: #90CAF9;
  --red: #D32F2F;
  --red-bg: #FFCDD2;
  --green: #388E3C;
  --green-bg: #C8E6C9;
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-alt: #F5F5F5;
  --surface-muted: #F5F7FA;
  --text: #212121;
  --text-secondary: #616161;
  --text-disabled: #BDBDBD;
  --text-hint: #6B6B6B; /* H8 (v3.11.3): WCAG AA contrast 4.6:1 on white (was #757575, 4.41:1 fail) */
  --nav-bg: #1a1a2e;
  --nav-text: #B0BEC5;
  --nav-active: #FFFFFF;
  --pending: #7B1FA2;
  --pending-bg: #E1BEE7;
  --pending-border: #CE93D8;
  --orange-dark: #E65100;
  --orange-bg: #FFF3E0;
  --border: #E0E0E0;
  --border-light: #F0F0F0;
  --card-secondary-bg: #FAFAFA;
  /* A2 (v3.5.2): WCAG contrast fixes for status badges in light mode.
   * Previous: #F57F17 on #FFF176 = 2.28:1 (fails AA 4.5:1) — illegible in sunlight.
   *           #E65100 on #FFCC80 = 2.56:1 (fails AA 4.5:1).
   * Now:      #7A4500 on #FFF176 = 6.76:1 (passes AA + AAA).
   *           #8A3300 on #FFCC80 = 5.56:1 (passes AA).
   * Border colors kept at the previous saturated values for visual chip identity.
   */
  --cutting-bg: #FFF176;
  --cutting-text: #7A4500;
  --cutting-border: #F9A825;
  --runner-bg: #FFCC80;
  --runner-text: #8A3300;
  --runner-border: #E65100;
  --radius: 6px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 1px rgba(0,0,0,0.03);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 2px 6px rgba(0,0,0,0.06);
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  height: 100%;
  overflow: hidden;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* --- Header --- */
.header {
  background: var(--nav-bg);
  color: white;
  padding: 12px 16px;
  text-align: center;
  flex-shrink: 0;
}
.header h1 { font-size: 18px; font-weight: 600; }
.header .subtitle { font-size: 12px; color: var(--nav-text); }

/* --- Connection Status --- */
.conn-status {
  padding: 4px 16px;
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
  display: none;
}
.conn-status.offline { display: block; background: var(--red); color: white; }
.conn-status.syncing { display: block; background: var(--orange-dark); color: white; }

/* --- Toast Notifications --- */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
.toast.warning { background: var(--orange-dark); }

/* --- Screen Container --- */
.screens {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen {
  display: none;
  padding: 12px;
  padding-bottom: 80px;
  opacity: 0;
  transition: opacity 0.08s ease;
}
.screen.active { display: block; }
.screen.screen-visible { opacity: 1; }

/* --- Bottom Nav --- */
.nav {
  display: flex;
  background: var(--nav-bg);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  min-height: 56px;
  border: none;
  background: none;
  color: var(--nav-text);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn.active { color: var(--nav-active); }
.nav-btn svg { width: 24px; height: 24px; margin-bottom: 2px; }

/* --- Form Elements --- */
.form-group { margin-bottom: 12px; }
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
input[type="number"], input[type="text"], select {
  width: 100%;
  padding: 14px 16px;
  font-size: 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  -webkit-appearance: none;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--blue);
}
select { padding-right: 40px; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
  /* Theme-aware defaults so any .btn variant without explicit color/bg
     (e.g. .btn-xs alone, .btn-sm alone) doesn't fall through to UA defaults
     that render as black-on-white "islands of light" in dark mode (#88). */
  color: var(--text);
  background: var(--surface);
}
.btn:active { opacity: 0.7; }
.btn-primary { background: var(--blue); color: white; width: 100%; }
.btn-danger { background: var(--red); color: white; }
.btn-outline {
  background: none;
  border: 2px solid var(--border);
  color: var(--text);
}
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: 14px; }

/* v3.15.0 #93: Add Floor Above / Add Sub Div Below controls under the numbered
   division picker. Distinct visual tier from the select itself (mobile-ux #1):
   smaller, lower contrast, and clearly grouped as add-actions. 44px min height
   keeps gloved tap targets honest. */
.division-controls {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.division-controls .division-add-btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.division-controls .division-add-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  opacity: 1;
}

/* v3.15.0 #93: Renumber inline banner. Non-modal, dismissable. Appears in
   the Operations tab above the shore-point list when migration left legacy
   labels behind. */
.renumber-banner {
  background: var(--surface-alt, rgba(255, 165, 0, 0.12));
  border: 1px solid var(--orange-dark, #c97b00);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.renumber-banner-text {
  flex: 1 1 220px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}
.renumber-banner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.renumber-banner-dismiss {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  min-width: 44px;
  min-height: 44px;
}
.renumber-banner-dismiss:hover { color: var(--text); }
.renumber-banner-dismiss:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --- Section Headers --- */
.section-header {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.section-header-sm {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* --- Result Cards --- */
.results-container { margin-top: 16px; }
.no-results {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-secondary);
}
.no-results.info-fallback {
  text-align: left;
  background: var(--bg-secondary, var(--surface));
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.info-fallback-list {
  margin: 4px 0 8px 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-primary);
  font-style: italic;
}
.info-fallback-list li { padding: 2px 0; }
.result-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  overflow: hidden;
}
.result-card.gold { border-left: 6px solid var(--gold); }
.result-card.grey { border-left: 6px solid var(--grey); }

.card-primary {
  padding: 12px;
}
.card-primary .system-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.gold .system-label { color: var(--gold); }
.grey .system-label { color: var(--grey); }

.card-primary .model-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}
.card-primary .range {
  font-size: 22px;
  font-weight: 800;
  margin-top: 4px;
  letter-spacing: -0.5px;
}
.gold .range { color: var(--gold); }
.grey .range { color: var(--grey); }

.card-primary .ext-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px solid var(--border-light);
}
.card-primary .ext-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.ext-chip {
  background: var(--blue-light);
  color: var(--blue);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}
.card-primary .total-reach {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.card-primary .no-ext {
  font-size: 14px;
  color: var(--green);
  font-weight: 600;
}

.card-secondary {
  padding: 8px 12px;
  background: var(--card-secondary-bg);
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-secondary);
}
.card-secondary .detail {
  display: flex;
  gap: 4px;
}
.card-secondary .detail-val {
  font-weight: 600;
  color: var(--text);
}
.card-secondary .detail-val.good { color: var(--green); }
.card-secondary .detail-val.warn { color: var(--cutting-text); }
.card-secondary .detail-val.bad { color: var(--red); }

.card-deploy {
  padding: 0 16px 12px;
}

/* --- System Toggles --- */
.system-toggles {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.system-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}
.system-toggle.active.gold {
  border-color: var(--gold);
  background: var(--gold-bg);
}
.system-toggle.active.grey {
  border-color: var(--grey);
  background: var(--grey-bg);
}
.system-toggle.active.lockstroke {
  border-color: var(--grey);
  background: var(--grey-bg);
}
.system-toggle .toggle-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-disabled);
  flex-shrink: 0;
}
.system-toggle.active.gold .toggle-dot {
  background: var(--gold);
  border-color: var(--gold);
}
.system-toggle.active.grey .toggle-dot {
  background: var(--grey);
  border-color: var(--grey);
}
.system-toggle.active.lockstroke .toggle-dot {
  background: var(--grey);
  border-color: var(--grey);
}
.system-toggle .toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.system-toggle.active .toggle-label {
  color: var(--text);
}

/* --- Apparatus --- */
.apparatus-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.apparatus-tab {
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 20px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.apparatus-tab.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.apparatus-tab .app-count {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 4px;
}
.apparatus-source {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-light);
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
}
.apparatus-checklist { display: flex; flex-wrap: wrap; gap: 8px; }
.apparatus-checklist label { display: flex; align-items: center; gap: 6px; font-size: 14px; padding: 6px 12px; border: 1px solid var(--border-light); border-radius: var(--radius); cursor: pointer; }
.apparatus-checklist label:has(input:checked) { border-color: var(--blue); background: var(--blue-light); }
.apparatus-checklist input[type="checkbox"] { width: 16px; height: 16px; }
.assigned-apparatus-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 28px; }
.app-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 4px; background: var(--blue-light); color: var(--blue); }
.app-chip .chip-x { cursor: pointer; font-size: 16px; line-height: 1; opacity: 0.6; margin-left: 4px; padding: 4px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.app-chip .chip-x:hover { opacity: 1; }
.app-chip.external { background: var(--runner-bg); color: var(--runner-text); }
.ext-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: 6px; font-size: 13px; }
.ext-item .ext-info { font-weight: 600; }
.ext-item .ext-dept { font-size: 12px; color: var(--text-secondary); }
.ext-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--runner-bg); color: var(--runner-text); margin-left: 4px; }

/* --- Inventory --- */
.inv-section { margin-bottom: 24px; }
.inv-section-header {
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.inv-section-header .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.inv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}
.inv-item-name { font-size: 15px; font-weight: 500; flex: 1; }
.inv-item-status { font-size: 13px; color: var(--text-secondary); margin-right: 12px; }
.qty-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.inv-qty-btn {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.inv-qty-btn:active { background: var(--border); }
.qty-val {
  width: 36px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

/* --- Quick Add --- */
.quick-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.quick-add-btn {
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.quick-add-btn:active { background: var(--blue-light); }
.quick-add-btn.added { border-color: var(--green); background: var(--green-bg); }
.quick-add-btn { position: relative; }
.quick-add-qty { position: absolute; top: -6px; right: -6px; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; line-height: 20px; border-radius: 10px; text-align: center; padding: 0 5px; }
.quick-add-summary { background: var(--blue-light); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--blue); text-align: center; }
.quick-add-plate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.quick-add-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.quick-add-plate:active { background: var(--blue-light); }
.quick-add-plate.added { border-color: var(--green); background: var(--green-bg); }
.quick-add-plate img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 4px;
}
.quick-add-plate .plate-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.quick-add-plate .plate-ht {
  font-size: 10px;
  color: var(--text-secondary);
}

/* --- Operations --- */
.op-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.shore-point {
  background: var(--surface);
  border-radius: var(--radius);
  border: 2px solid var(--border);
  border-left: 6px solid var(--border);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.shore-point.pending { border-color: var(--pending-border); border-left-color: var(--pending-border); background: var(--pending-bg); }
.shore-point.process { border-color: var(--red); border-left-color: var(--red); background: var(--red-bg); }
.shore-point.strutplaced { border-color: var(--blue); border-left-color: var(--blue); background: var(--blue-light); }
.shore-point.cutting { border-color: var(--cutting-border); border-left-color: var(--cutting-border); background: var(--cutting-bg); }
.shore-point.runner { border-color: var(--runner-border); border-left-color: var(--runner-border); background: var(--runner-bg); }
.shore-point.secured { border-color: var(--green); border-left-color: var(--green); background: var(--green-bg); }
.shore-point.returned { border-color: var(--grey-border); border-left-color: var(--grey-border); background: var(--card-secondary-bg); }
.status-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.status-badge.pending { background: var(--pending-bg); color: var(--pending); }
.status-badge.process { background: var(--red-bg); color: var(--red); }
.status-badge.strutplaced { background: var(--blue-light); color: var(--blue); }
.status-badge.cutting { background: var(--cutting-bg); color: var(--cutting-text); }
.status-badge.runner { background: var(--runner-bg); color: var(--runner-text); }
.status-badge.secured { background: var(--green-bg); color: var(--green); }
.status-badge.returned { background: var(--surface-alt); color: var(--text-hint); }
.sp-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; margin-right: 6px; flex-shrink: 0; }
.sp-group-header { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 0 4px; margin-top: 8px; border-bottom: 1px solid var(--border-light); margin-bottom: 8px; }
.floor-group { margin-bottom: 16px; }
.floor-group-header { font-size: 14px; font-weight: 700; color: var(--text-primary); padding: 10px 12px; background: var(--surface-alt); border-radius: var(--radius); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.floor-group-header .floor-icon { font-size: 16px; }
.lane { margin-bottom: 8px; margin-left: 4px; }
.lane-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); cursor: default; user-select: none; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; border-left: 6px solid var(--text-disabled); background: var(--surface); min-height: 44px; }
.lane-header .lane-arrow { font-size: 10px; transition: transform 0.2s; color: var(--text-secondary); }
.lane-header .lane-arrow.collapsed { transform: rotate(-90deg); }
.lane-header .lane-count { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 10px; margin-left: auto; }
.lane-header.pending { border-left-color: var(--pending-border); color: var(--pending); }
.lane-header.pending .lane-count { background: var(--pending-bg); color: var(--pending); }
.lane-header.process { border-left-color: var(--red); color: var(--red); }
.lane-header.process .lane-count { background: var(--red-bg); color: var(--red); }
.lane-header.strutplaced { border-left-color: var(--blue); color: var(--blue); }
.lane-header.strutplaced .lane-count { background: var(--blue-light); color: var(--blue); }
.lane-header.cutting { border-left-color: var(--cutting-border); color: var(--cutting-text); }
.lane-header.cutting .lane-count { background: var(--cutting-bg); color: var(--cutting-text); }
.lane-header.runner { border-left-color: var(--runner-border); color: var(--runner-text); }
.lane-header.runner .lane-count { background: var(--runner-bg); color: var(--runner-text); }
.lane-header.secured { border-left-color: var(--green); color: var(--green); }
.lane-header.secured .lane-count { background: var(--green-bg); color: var(--green); }
.lane-header.returned { border-left-color: var(--grey-border); color: var(--text-hint); }
.lane-header.returned .lane-count { background: var(--surface-alt); color: var(--text-hint); }
.lane-body { padding: 4px 0 4px 8px; }
.lane-body.collapsed { display: none; }
.cut-length-display { font-size: 16px; font-weight: 700; color: var(--cutting-text); margin-top: 4px; }
.sp-edit-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 14px; cursor: pointer; color: var(--text-secondary); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.sp-edit-btn:hover { background: var(--surface-alt); }
.sp-delete-btn { background: none; border: 1px solid #FFCDD2; border-radius: 6px; padding: 6px 10px; font-size: 14px; cursor: pointer; color: var(--red); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; }
.sp-delete-btn:hover { background: var(--red-bg); }
.shore-point.locked .sp-edit-btn, .shore-point.locked .sp-delete-btn { opacity: 0.3; pointer-events: none; }
.sp-lock-icon { font-size: 12px; color: var(--blue); margin-left: 4px; }
.shore-point.grouped { border-left: 4px solid var(--blue); margin-bottom: 0; border-bottom: 1px dashed var(--text-disabled); border-radius: var(--radius) 8px 0 0; }
.shore-point.grouped.group-mid { border-radius: 0; }
.shore-point.grouped.group-last { border-radius: 0 0 8px var(--radius); margin-bottom: 10px; border-bottom: 2px solid var(--border); }
.group-label { display: inline-block; font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-light); padding: 2px 8px; border-radius: 4px; margin-left: 6px; }

/* Drill-down navigation */
.drilldown-breadcrumb { display: flex; align-items: center; gap: 4px; padding: 8px 0; margin-bottom: 8px; flex-wrap: wrap; }
.drilldown-breadcrumb button { background: none; border: none; color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 10px; border-radius: 6px; min-height: 44px; }
.drilldown-breadcrumb button:hover { background: var(--blue-light); }
.drilldown-breadcrumb button.current { color: var(--text-primary); cursor: default; }
.drilldown-breadcrumb button.current:hover { background: none; }
.drilldown-breadcrumb .bc-sep { color: var(--text-secondary); font-size: 11px; }
.drilldown-list { }
.drilldown-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; transition: background 0.15s; }
.drilldown-item:active { background: var(--blue-light); }
.drilldown-item .di-label { font-size: 15px; font-weight: 600; }
.drilldown-item .di-meta { display: flex; align-items: center; gap: 8px; }
.drilldown-item .di-count { font-size: 12px; color: var(--text-secondary); }
.drilldown-item .di-arrow { color: var(--text-secondary); font-size: 14px; }
.drilldown-item .di-status-dots { display: flex; gap: 3px; }
.drilldown-item .di-dot { width: 10px; height: 10px; border-radius: 50%; }
.drilldown-item .di-dot.process { background: var(--red); }
.drilldown-item .di-dot.strutplaced { background: var(--blue); }
.drilldown-item .di-dot.cutting { background: var(--cutting-border); }
.drilldown-item .di-dot.runner { background: var(--runner-border); }
.drilldown-item .di-dot.secured { background: var(--green); }
.drilldown-item .di-dot.returned { background: var(--grey-border); }
.di-status-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.di-status-pill { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
.di-status-pill.pending { background: var(--pending-bg); color: var(--pending); }
.di-status-pill.process { background: var(--red-bg); color: var(--red); }
.di-status-pill.strutplaced { background: var(--blue-light); color: var(--blue); }
.di-status-pill.cutting { background: var(--cutting-bg); color: var(--cutting-text); }
.di-status-pill.runner { background: var(--runner-bg); color: var(--runner-text); }
.di-status-pill.secured { background: var(--green-bg); color: var(--green); }
.di-status-pill.returned { background: var(--surface-alt); color: var(--text-hint); }

/* View switcher */
.view-switcher { display: flex; background: var(--surface-alt); border-radius: var(--radius); padding: 3px; gap: 2px; margin-bottom: 12px; }
.view-switcher button { flex: 1; padding: 10px 4px; border: none; background: none; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; border-bottom: 3px solid transparent; display: flex; align-items: center; justify-content: center; gap: 4px; }
.view-switcher button:hover { background: rgba(0,0,0,0.04); }
.view-switcher button.active { background: var(--surface); color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-bottom: 3px solid var(--blue); }

/* --- Role Badges & Assignment --- */
.role-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: var(--blue-light); color: var(--blue); margin-left: 4px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.3px; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.role-card { padding: 12px; border: 2px solid var(--border); border-radius: var(--radius); text-align: center; cursor: pointer; transition: all 0.15s; }
.role-card:active { transform: scale(0.97); }
.role-card.selected { border-color: var(--blue); background: var(--blue-light); }
.role-card .role-name { font-size: 13px; font-weight: 600; }
.role-card .role-abbr { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.role-suggest-banner { background: var(--blue-light); border: 1px solid var(--blue-border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.role-suggest-banner .suggest-text { font-size: 13px; color: var(--blue); flex: 1; }
.role-suggest-banner .suggest-actions { display: flex; gap: 6px; flex-shrink: 0; }
.role-suggest-banner button { padding: 8px 16px; border-radius: 6px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 36px; }
.role-suggest-banner .btn-suggest-switch { background: var(--blue); color: white; }
.role-suggest-banner .btn-suggest-dismiss { background: transparent; color: var(--blue); }
.task-force-label { font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-light); padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 4px; }

/* --- Setup / Settings --- */
.setup-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  text-align: center;
}
.setup-container h2 { margin-bottom: 8px; }
.setup-container p { color: var(--text-secondary); margin-bottom: 24px; }

/* --- Modal --- */
.modal-section { padding: 16px; }
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
}
.modal h3 { margin-bottom: 16px; }

/* v3.16.3 #101: opt-in pinned-header/footer pattern. Default .modal keeps
   single-scroll behavior so other modals don't regress. Modals that adopt
   `modal-scrollbody` must wrap their content in `.modal-body` and actions
   in `.modal-footer`; the body becomes the scroll container while header
   and footer stay pinned. Critical for tall forms on desktop where the
   85vh cap would otherwise hide the action buttons below the fold. */
.modal.modal-scrollbody {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.modal.modal-scrollbody > .modal-header,
.modal.modal-scrollbody > .modal-footer {
  flex: 0 0 auto;
  background: var(--surface);
  padding: 16px;
}
.modal.modal-scrollbody > .modal-header { border-bottom: 1px solid var(--border); margin-bottom: 0; }
.modal.modal-scrollbody > .modal-footer {
  border-top: 1px solid var(--border);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal.modal-scrollbody > .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}

/* --- Misc --- */
.section-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin: 24px 0 12px;
}
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-secondary);
}
.empty-state svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: 0.4; }

/* --- Quantity Buttons --- */
.qty-btn {
  flex: 1;
  padding: 12px;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: var(--radius);
  cursor: pointer;
}
.qty-btn.active {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}

/* --- Login Screen --- */
.login-screen {
  position: fixed;
  inset: 0;
  background: var(--nav-bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.login-screen.hidden { display: none; }
.login-logo {
  width: 80px;
  height: 80px;
  background: var(--blue);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 800;
  color: white;
  margin-bottom: 16px;
}
.login-title {
  font-size: 24px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}
.login-subtitle {
  font-size: 14px;
  color: var(--nav-text);
  margin-bottom: 32px;
}
.login-form {
  width: 100%;
  max-width: 340px;
}
.login-form input {
  width: 100%;
  padding: 16px;
  font-size: 20px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.1);
  color: white;
  text-align: center;
  margin-bottom: 16px;
}
.login-form input::placeholder { color: rgba(255,255,255,0.4); }
.login-form input:focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(255,255,255,0.15);
}
.login-form .btn { font-size: 18px; }
.login-hint {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin-top: 24px;
  text-align: center;
}

/* --- Operations Legend (collapsible) --- */
.ops-legend { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; }
.ops-legend > summary { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; user-select: none; min-height: 44px; }
.ops-legend > summary::-webkit-details-marker { display: none; }
.ops-legend > summary::before { content: '▸'; font-size: 11px; transition: transform 0.15s; }
.ops-legend[open] > summary::before { transform: rotate(90deg); }
.ops-legend > div { padding: 0 14px 12px; }
.legend-section { margin-top: 8px; }
.legend-section + .legend-section { padding-top: 10px; border-top: 1px solid var(--border-light); }
.legend-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 6px; }
.legend-list { list-style: none; padding: 0; margin: 0; }
.legend-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.legend-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--border); flex-shrink: 0; }
.legend-sw-pending     { background: var(--pending-bg);        border-color: var(--pending-border); }
.legend-sw-process     { background: var(--red-bg);            border-color: var(--red); }
.legend-sw-strutplaced { background: var(--blue-light);        border-color: var(--blue); }
.legend-sw-cutting     { background: var(--cutting-bg);        border-color: var(--cutting-border); }
.legend-sw-runner      { background: var(--runner-bg);         border-color: var(--runner-border); }
.legend-sw-secured     { background: var(--green-bg);          border-color: var(--green); }
.legend-sw-returned    { background: var(--card-secondary-bg); border-color: var(--grey-border); }
.legend-action { font-weight: 600; min-width: 140px; }
.legend-roles { color: var(--text-secondary); }
.legend-note { color: var(--text-secondary); font-style: italic; font-size: 12px; padding-top: 4px !important; }

/* --- Inventory Quick View --- */
.inv-quickview-btn {
  position: fixed;
  right: 12px;
  bottom: 80px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.inv-quickview-btn svg { width: 24px; height: 24px; }
.inv-quickview-panel {
  position: fixed;
  right: -320px;
  top: 0;
  bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: var(--surface);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 150;
  transition: right 0.12s ease;
  display: flex;
  flex-direction: column;
}
.inv-quickview-panel.open { right: 0; }
.inv-qv-header {
  padding: 16px;
  background: var(--nav-bg);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.inv-qv-header h3 { font-size: 16px; margin: 0; }
.inv-qv-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
}
.inv-qv-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}
.inv-qv-body .inv-section { margin-bottom: 16px; }
.inv-qv-body .inv-section-header { font-size: 13px; padding: 6px 0; }
.inv-qv-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}
.inv-qv-item .qv-name { font-weight: 500; }
.inv-qv-item .qv-count { font-weight: 700; }
.inv-qv-item .qv-count.zero { color: var(--red); }
.inv-qv-item .qv-count.low { color: var(--cutting-text); }
.inv-qv-item .qv-app {
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
}
.inv-qv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 140;
  display: none;
}
.inv-qv-overlay.open { display: block; }

/* --- Deduction Toggle & Panel --- */
.deduction-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 0;
}
.deduction-toggle label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.toggle-switch {
  position: relative;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--text-disabled);
  border-radius: 28px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: var(--surface);
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--blue);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
.deduction-panel {
  background: var(--surface-muted);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 16px;
}
.deduction-panel.hidden { display: none; }
.deduction-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.deduction-row:last-child { margin-bottom: 0; }
.deduction-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 60px;
  margin: 0;
}
.deduction-row select {
  flex: 1;
  padding: 10px 12px;
  font-size: 15px;
  min-height: 44px;
}
.deduction-summary {
  background: var(--blue-light);
  border-radius: 4px;
  padding: 10px 14px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}
.deduction-summary .eff-length {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue);
}

/* --- Plate Picker with Images --- */
.plate-option-grid {
  /* Use visibility instead of display so iOS Safari initializes the touch
     scroll layer correctly. With display:none → display:block, iOS sometimes
     fails to set up overflow scrolling on a position:fixed element. Using
     visibility keeps the element in the layout tree at all times. */
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 0;
  max-width: 568px;
  margin: 0 auto;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  z-index: 200;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Explicit touch-action prevents the browser from interpreting upward
     swipes as page-level gestures (e.g. pull-to-refresh) and forces vertical
     pan handling on this element specifically. */
  touch-action: pan-y;
  /* Promote to its own compositing layer so iOS Safari treats scrolling as
     a layer transform instead of trying to scroll the page underneath. */
  transform: translateZ(0);
}
.plate-option-grid.open { visibility: visible; pointer-events: auto; }
.plate-grid-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 199;
}
.plate-grid-scrim.open { display: block; }
.plate-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  -webkit-tap-highlight-color: transparent;
}
.plate-option:last-child { border-bottom: none; }
.plate-option:active { background: var(--blue-light); }
.plate-option.selected { background: var(--blue-light); }
.plate-option img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.plate-option .plate-info {
  flex: 1;
}
.plate-option .plate-name {
  font-size: 14px;
  font-weight: 600;
}
.plate-option .plate-height {
  font-size: 12px;
  color: var(--text-secondary);
}
.plate-picker {
  position: relative;
}
.plate-picker-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 15px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  min-height: 48px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.plate-picker-btn img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.plate-picker-btn .picker-text {
  flex: 1;
  font-weight: 600;
}
.plate-picker-btn .picker-height {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* --- Shore Type Selector --- */
.shore-type-selector {
  margin-bottom: 16px;
}
.shore-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--surface);
}
.shore-type-option.selected {
  border-color: var(--blue);
  background: var(--blue-light);
}
.shore-type-option .st-name {
  font-size: 15px;
  font-weight: 600;
}
.shore-type-option .st-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

/* --- Deduction Info in Cards --- */
.card-deductions {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 16px;
  background: var(--surface-muted);
  border-top: 1px solid var(--border-light);
}

@media (min-width: 500px) {
  .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* Touch targets consolidated into component definitions above */

/* Hover + focus states */
.btn:hover { filter: brightness(0.95); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.drilldown-item:hover { background: var(--blue-light); }
.role-card:hover { border-color: var(--blue); }
.quick-add-btn:hover, .quick-add-plate:hover { background: var(--blue-light); }

/* Focus-visible for non-button interactive elements */
.system-toggle:focus-visible,
.apparatus-tab:focus-visible,
.nav-btn:focus-visible,
.qty-btn:focus-visible,
.org-node:focus-visible,
.shore-type-option:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Disabled button state */
.btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Small action buttons — xs variant (min 44px tap target) */
.btn-xs {
  min-height: 44px;
  padding: 4px 8px;
  font-size: 12px;
}

/* Warning alert box */
.alert-warning {
  background: var(--red-bg);
  border: 1px solid var(--red);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 14px;
}

/* Loading state for guardClick buttons */
.btn-loading {
  position: relative;
  color: transparent !important;
}
.btn-loading::after {
  content: 'Working\2026';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  /* static — no animation for speed */
}
/* pulse animation removed — speed over aesthetics */

/* Active/pressed states for interactive cards */
.drilldown-item:active, .list-item-row:active { transform: scale(0.98); }

/* Nav button active indicator dot */
.nav-btn.active { position: relative; }
.nav-btn.active::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--nav-active);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.w-full { width: 100%; }
.flex-1 { flex: 1; }
.flex-1-2 { flex: 1.2; }
.d-flex { display: flex; }
.gap-sm { gap: 6px; }
.gap-md { gap: 8px; }
.items-center { align-items: center; }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.hidden { display: none; }
.m-0 { margin: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.my-12 { margin-top: 12px; margin-bottom: 12px; }
.spacer-sm { height: 8px; }

/* ========================================
   COMPONENT CLASSES
   ======================================== */

/* Typography */
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.modal-header .modal-title { margin-bottom: 0; flex: 1; }
.modal-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; font-size: 22px; color: var(--text-secondary); cursor: pointer; padding: 0; flex-shrink: 0; border-radius: 4px; }
.modal-close { transition: background 0.1s; }
.modal-close:active { background: rgba(128,128,128,0.2); }
.modal-title { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.modal-subtitle { font-size: 14px; font-weight: 600; margin: 8px 0; }
.version-label { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.input-hint { font-size: 10px; color: var(--text-secondary); text-align: center; }
.label-sm { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.label-hint { font-size: 11px; color: var(--text-secondary); font-weight: 400; }
.op-name { font-size: 15px; font-weight: 700; margin: 0; }
.op-time { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; }

/* Layout */
.measurement-row { display: flex; gap: 6px; align-items: center; }
.measurement-field { flex: 1; }
.measurement-field-wide { flex: 1.2; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.role-name-group { display: flex; flex-direction: column; gap: 2px; }

/* Form Elements */
.select-compact { width: 100%; min-height: 44px; padding: 10px 4px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); } /* H7 (v3.11.3): 44px gloves min */
.textarea { width: 100%; min-height: 80px; padding: 10px; font-size: 14px; border: 1px solid var(--border); border-radius: 6px; resize: vertical; font-family: inherit; }

/* Buttons */
.btn-block { display: block; width: 100%; }
.btn-success { background: var(--green-bg); color: #2E7D32; border: 1px solid #66BB6A; font-weight: 700; }
.btn-success:hover { background: var(--green-bg); }

/* Links & Feedback */
.feedback-link-wrap { text-align: center; margin-top: 16px; }
.feedback-link { color: var(--blue); text-decoration: none; font-size: 13px; font-weight: 600; }
.feedback-link:hover { text-decoration: underline; }

/* Grids */
.ext-strut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* Action rows & groups (JS template literals) */
.action-row { display: flex; gap: 6px; margin-top: 8px; }
.section-label { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.section-label-spaced { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); margin: 16px 0 8px; }
.text-muted { color: var(--text-secondary); }
.text-muted-sm { font-size: 13px; color: var(--text-secondary); }
.text-muted-xs { font-size: 12px; color: var(--text-secondary); }
.text-xs { font-size: 11px; color: var(--text-secondary); }
.text-danger { color: var(--red); }
.divider-dot { width: 2px; height: 12px; background: var(--text-disabled); }

/* ============================================================
   ICS Org Chart — v3.16.0 SmartArt-style tree
   Each node is a card with inline hierarchy controls; connectors
   are CSS L-shapes drawn from children rows. Horizontal scroll
   on overflow so wide branches don't wrap mid-tree.
   ============================================================ */

/* Canvas: horizontally scrollable, centered-tree default */
.org-tree-canvas { overflow-x: auto; overflow-y: hidden; padding: 4px 4px 12px; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.org-tree { display: inline-flex; flex-direction: column; align-items: center; min-width: 100%; padding: 0 8px; }

/* Wrap: a node + (optionally) its children row stacked vertically */
.org-node-wrap { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 6px; }

/* Card */
.org-node { position: relative; padding: 8px 12px 8px; border-radius: var(--radius); width: 160px; box-sizing: border-box; text-align: center; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; border: 1.5px solid transparent; background: var(--surface); }
.org-node:active { transform: scale(0.98); }
.org-node-filled { background: var(--blue-light); border-color: var(--blue); }
.org-node-filled:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(33,150,243,0.18); }
.org-node-empty { background: var(--card-secondary-bg); border: 1.5px dashed var(--text-disabled); }
.org-node-empty:hover { border-color: var(--blue); background: var(--surface-alt); }
.org-node-picked { box-shadow: 0 0 0 3px var(--blue); transform: scale(1.04); border-color: var(--blue) !important; }
.org-node-drop-target { border-color: var(--blue) !important; border-style: dashed !important; background: var(--blue-light); box-shadow: 0 0 0 3px rgba(33,150,243,0.3); }
.org-node-reparent-picked { box-shadow: 0 0 0 3px var(--orange-dark); transform: scale(1.04); border-color: var(--orange-dark) !important; }

/* Card content stack */
.org-card-title { font-size: 12px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.2; }
.org-node-empty .org-card-title { color: var(--text-secondary); }
.org-card-name { font-size: 11px; color: var(--text-secondary); margin-top: 2px; line-height: 1.2; }
.org-card-people { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 4px; line-height: 1.25; word-break: break-word; }
.org-card-empty { font-size: 12px; color: var(--text-disabled); font-style: italic; margin-top: 4px; }

/* Corner buttons (collapse + delete) */
.org-card-corner { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; z-index: 2; }
.org-card-btn { min-width: 44px; min-height: 44px; border: none; background: transparent; color: var(--text-secondary); font-size: 14px; line-height: 1; cursor: pointer; border-radius: 3px; padding: 11px; display: inline-flex; align-items: center; justify-content: center; }
.org-card-btn:hover { background: rgba(0,0,0,0.08); color: var(--text-primary); }
.org-card-delete:hover { background: var(--red-bg); color: var(--red); }
.org-card-collapse { font-size: 12px; }

/* Inline hierarchy toolbar at the bottom of each card */
.org-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.06); justify-items: center; }
.org-tool-add { grid-column: 1 / -1; justify-self: center; }
.org-tool { min-width: 44px; min-height: 44px; flex-shrink: 0; border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 6px 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: background 0.1s, border-color 0.1s, color 0.1s; }
.org-tool:hover:not(.is-disabled) { background: var(--surface-alt); border-color: var(--border); color: var(--blue); }
.org-tool:active:not(.is-disabled) { transform: scale(0.9); }
.org-tool.is-disabled, .org-tool[disabled] { color: var(--text-disabled); opacity: 1; cursor: not-allowed; }
.org-tool-glyph { font-size: 14px; line-height: 1; font-weight: 600; }

/* ---- Connectors (L-shapes via pseudo-elements) ---------------- */
/* Children row: 24px padding-top hosts both the parent-down line and
   the horizontal bar that fans out to each child. */
.org-children-row { display: flex; justify-content: center; align-items: flex-start; gap: 0; position: relative; padding: 24px 0 4px; }

/* Vertical line from parent down to horizontal bar */
.org-children-row::before { content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 12px; background: var(--border); transform: translateX(-50%); }

/* Horizontal bar across children — each wrap contributes its width */
.org-children-row > .org-node-wrap { padding: 24px 6px 0; position: relative; }
.org-children-row > .org-node-wrap::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: var(--border); }
.org-children-row > .org-node-wrap:first-child::after { left: 50%; }
.org-children-row > .org-node-wrap:last-child::after { right: 50%; }
.org-children-row > .org-node-wrap:only-child::after { display: none; }

/* Vertical line from horizontal bar down into the child card */
.org-children-row > .org-node-wrap::before { content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 12px; background: var(--border); transform: translateX(-50%); }
.org-children-row > .org-node-wrap:only-child::before { height: 12px; }

/* Single-child rows still need the vertical drop. The row::before draws the
   first 12px, the child wrap::before draws the second 12px — they fuse. */
.org-children-row.single-child { padding-top: 24px; }

/* Root node — no incoming connector */
.org-node-wrap.is-root { padding-top: 0; }
.org-node-wrap.is-root::before, .org-node-wrap.is-root::after { display: none; }

/* Narrow phone: shrink cards, hide inline toolbar (reorder controls move to node-tap modal) */
@media (max-width: 480px) {
  .org-node { width: 132px; padding: 6px 8px; }
  .org-card-title { font-size: 11px; }
  .org-card-name { font-size: 10px; }
  .org-card-people { font-size: 12px; }
  .org-toolbar { display: none; }
  .org-children-row > .org-node-wrap { padding: 24px 3px 0; }
  .org-node-wrap { padding: 0 3px; }
}

/* Role Status Indicators */
.status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }
.status-active { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.3); }
.status-staged { background: #eab308; border-radius: 2px; box-shadow: 0 0 0 2px rgba(234,179,8,0.3); }
.span-warning { font-size: 11px; margin-left: 4px; cursor: help; color: var(--orange-dark); }
.span-warning.span-yellow { color: var(--orange-dark); }
.span-warning.span-red { color: var(--red); }
.status-key { display: flex; gap: 12px; font-size: 12px; color: var(--text-secondary); align-items: center; margin-bottom: 8px; }
.status-key-item { display: flex; align-items: center; gap: 4px; }

/* Collapsible Section Toggles */
.section-toggle { cursor: pointer; user-select: none; }
.section-arrow { display: inline-block; font-size: 10px; width: 14px; color: var(--text-secondary); transition: transform 0.15s; }
.btn-gold-outline { background: var(--gold-bg); color: var(--cutting-text); border: 1px solid var(--gold-border); font-weight: 700; }
.btn-blue-outline { background: var(--blue-light); color: var(--blue); border: 1px solid var(--blue-border); }
.btn-purple { background: var(--pending-bg); color: var(--pending); border: 1px solid var(--pending-border); font-weight: 700; margin-top: 8px; }
.flex-center { display: flex; justify-content: center; }
.flex-wrap-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 16px; }
.list-item-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.cut-diff-warning { font-size: 12px; font-weight: 600; color: var(--runner-text); background: var(--runner-bg); border-radius: 4px; padding: 2px 6px; display: inline-block; }
.plate-unavailable { opacity: 0.3; filter: grayscale(1); }

/* ========================================
   PROFESSIONAL UI POLISH
   ======================================== */

/* Smooth transitions on interactive elements */
.btn, .chip, .drilldown-item, .role-card {
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Card refinements */
.card {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.card:hover {
  box-shadow: var(--shadow-md);
}

/* Typography refinements */
h1, h2, h3, h4 {
  letter-spacing: -0.01em;
}
body {
  line-height: 1.5;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: var(--blue);
  color: white;
  border-radius: var(--radius);
  z-index: 300;
  font-weight: 600;
}

/* ========================================
   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;
  }
}

/* ========================================
   TABLET RESPONSIVE
   ======================================== */
@media (min-width: 768px) {
  .app { max-width: 700px; }
  .screen { padding: 20px 24px; padding-bottom: 80px; }
  .modal { max-width: 700px; }
  .quick-add-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .inv-quickview-panel { width: 380px; right: -400px; }
  .measurement-row { gap: 10px; }
  .role-grid { grid-template-columns: 1fr 1fr 1fr; }
  .quick-add-plate-grid { grid-template-columns: repeat(4, 1fr); }
  .ext-strut-grid { grid-template-columns: 1fr 1fr 1fr; }
  .inv-quickview-btn { right: calc(50vw - 350px + 12px); }
  /* v3.16.3 #98 #99 #100: scope the 480px cap to screen-level primary
     buttons (Find Struts / Start New Operation / Save Settings) so the
     button centers within its container. Broad `.btn-primary` rule
     would break modal flex rows and inline form buttons. ID anchors
     used to outrank the `#screen* > *` 1000px wrapper rule at 1024px. */
  :root:not(.force-mobile-view) #screenSelect > .btn.btn-primary,
  :root:not(.force-mobile-view) #screenSettings > .btn.btn-primary,
  :root:not(.force-mobile-view) #screenOps > * > .btn.btn-primary,
  :root:not(.force-mobile-view) #screenCommand > * > .btn.btn-primary,
  :root.force-mobile-view #screenSelect > .btn.btn-primary,
  :root.force-mobile-view #screenSettings > .btn.btn-primary,
  :root.force-mobile-view #screenOps > * > .btn.btn-primary,
  :root.force-mobile-view #screenCommand > * > .btn.btn-primary {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

@media (min-width: 1024px) {
  .app { max-width: 700px; }
  .screen { padding: 20px 24px; padding-bottom: 80px; }
  .modal { max-width: 800px; }
  .role-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .quick-add-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ========================================
   DESKTOP VIEW (≥1024px)
   Scoped to :root:not(.force-mobile-view) so users can opt back to
   the mobile layout via the upper-right toggle button.
   ======================================== */

/* View-mode toggle button — hidden by default (mobile/tablet portrait) */
.view-mode-toggle { display: none; }
.view-mode-toggle .vm-icon { width: 18px; height: 18px; display: block; }
.view-mode-toggle .vm-icon-desktop { display: none; }
:root.force-mobile-view .view-mode-toggle .vm-icon-phone { display: none; }
:root.force-mobile-view .view-mode-toggle .vm-icon-desktop { display: block; }

@media (min-width: 1024px) {
  /* Toggle button — fixed top-right of viewport, always visible on desktop */
  .view-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 200;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 6px;
    color: white;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
  }
  .view-mode-toggle:hover { background: rgba(255,255,255,0.22); }
  .view-mode-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

  /* SHELL — fills viewport in desktop view (#94, v3.14.3). The 1200px cap
     in v3.13.0 wasted ~240px on a 1440-wide laptop; on 1920+ it looked
     like the app failed to render. Inner panels self-constrain via their
     own grid templates and content max-widths. */
  :root:not(.force-mobile-view) .app {
    max-width: none;
  }

  /* Form-heavy screens self-cap so inputs don't stretch to absurd widths.
     Split-view screens (Operations, Command) and Inventory list keep the
     full viewport since their layouts adapt to the available space. */
  :root:not(.force-mobile-view) #screenSelect > *,
  :root:not(.force-mobile-view) #screenSettings > * {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  :root:not(.force-mobile-view) .nav {
    order: -1;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: 0;
    justify-content: center;
  }
  :root:not(.force-mobile-view) .nav-btn {
    flex: 0 1 220px;
    flex-direction: row;
    min-height: 48px;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
  }
  :root:not(.force-mobile-view) .nav-btn svg {
    margin-bottom: 0;
  }
  /* Active-tab dot sits to the LEFT of the icon in row mode */
  :root:not(.force-mobile-view) .nav-btn.active::after {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  :root:not(.force-mobile-view) .screen {
    padding: 20px 24px;
    padding-bottom: 20px;
  }

  /* COMMAND — side-by-side: roster left (sticky), org chart + dashboard right.
     DOM order is op-card → op-views → op-shell so mobile reads top-down
     (dashboard before apparatus); grid placement reorders on desktop. */
  :root:not(.force-mobile-view) #activeOpCommand {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 20px;
    align-items: start;
  }
  :root:not(.force-mobile-view) #activeOpCommand > .op-card {
    grid-column: 1 / -1;
  }
  :root:not(.force-mobile-view) #activeOpCommand > .op-shell {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 8px;
  }
  :root:not(.force-mobile-view) #activeOpCommand > .op-views {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  /* v3.14.0 — OPERATIONS — side-by-side: drilldown sidebar left, shore points right */
  :root:not(.force-mobile-view) #activeOp {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
  }
  :root:not(.force-mobile-view) #activeOp > .op-card { grid-column: 1 / -1; grid-row: 1; }
  :root:not(.force-mobile-view) #activeOp > #roleSuggestBanner { grid-column: 1 / -1; grid-row: 2; }
  :root:not(.force-mobile-view) #activeOp > .op-shell {
    display: block;
    grid-column: 1;
    grid-row: 3;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding-right: 4px;
  }
  :root:not(.force-mobile-view) #activeOp > .op-views {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
  }
  :root:not(.force-mobile-view) #activeOp .view-switcher { justify-content: center; }
  :root:not(.force-mobile-view) #activeOp .ops-shore-points-header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  :root:not(.force-mobile-view) #activeOp .ops-shore-points-header .section-title {
    text-align: center;
  }
  :root:not(.force-mobile-view) #activeOp .ops-add-sp-btn {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
  }
  /* On desktop, the sidebar tree replaces the inline breadcrumb AND
     the inline drilldown-list rows (sidebar already navigates the hierarchy) */
  :root:not(.force-mobile-view) #activeOp #drilldownBreadcrumb { display: none !important; }
  :root:not(.force-mobile-view) #activeOp .drilldown-item { display: none; }

  /* Desktop Operations — permanent inventory right rail (replaces the
     floating FAB + slide-in panel pattern used on mobile). Pins the
     existing #qvPanel to the viewport right edge and reserves matching
     right space on the app shell so shore-point cards aren't covered. */
  :root:not(.force-mobile-view) body.ops-active .inv-quickview-btn { display: none !important; }
  :root:not(.force-mobile-view) body.ops-active .inv-qv-overlay { display: none !important; }
  :root:not(.force-mobile-view) body.ops-active #mainApp { padding-right: 340px; }
  :root:not(.force-mobile-view) body.ops-active .inv-quickview-panel {
    right: 0;
    width: 320px;
    top: 56px;
    box-shadow: -1px 0 0 var(--border);
    transition: none;
    z-index: 40;
  }
  :root:not(.force-mobile-view) body.ops-active .inv-qv-close { display: none; }
}

/* v3.14.0 — Operations drilldown sidebar (hidden on mobile, shown via the
   @media (min-width: 1024px) block above). The .op-shell wrapper inside the
   Operations tab is desktop-only; the Command tab's .op-shell stays visible
   on mobile (different content, different use case). */
#activeOp > .op-shell { display: none; }
.ops-drilldown-search-row { padding: 0 4px 10px; }
.ops-drilldown-search-row input {
  width: 100%;
  min-height: 44px; /* v3.14.2: glove-width tap target (rugged-iPad command post) */
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  box-sizing: border-box;
}
.ops-drilldown-search-row input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.ops-drilldown-tree { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.ops-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px; /* v3.14.2: glove-width tap target */
  padding: 10px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  transition: background 0.1s;
}
.ops-tree-node:hover { background: var(--surface-alt); }
.ops-tree-node.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }
.ops-tree-node:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ops-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-tree-counts { display: flex; gap: 3px; flex-shrink: 0; }
.ops-tree-count {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  background: var(--text-disabled);
  color: #fff;
}
/* v3.14.2 — pill colors aligned with .lane-header.* status colors so the
   tree counts and the right-pane lane headers share one mental model.
   Cutting (gold) is now visually distinct from Runner (orange-dark). */
.tree-count-pending { background: var(--pending); }
.tree-count-process { background: var(--red); }
.tree-count-strutplaced { background: var(--blue); }
.tree-count-cutting { background: var(--cutting-border); color: var(--cutting-text); }
.tree-count-runner { background: var(--orange-dark); }
.tree-count-secured { background: var(--green); }
.tree-count-returned { background: var(--text-disabled); color: #424242; }
.ops-tree-empty { padding: 12px; text-align: center; color: var(--text-secondary); font-size: 13px; }

/* Theme toggle — segmented control */
.theme-toggle { display: flex; gap: 4px; background: var(--surface-alt); border-radius: var(--radius); padding: 4px; }
.theme-option { flex: 1; padding: 10px 12px; border: none; background: transparent; color: var(--text-secondary); font-weight: 600; font-size: 14px; border-radius: calc(var(--radius) - 4px); cursor: pointer; transition: background 0.15s, color 0.15s; }
.theme-option:hover { color: var(--text); }
.theme-option.active { background: var(--surface); color: var(--blue); box-shadow: var(--shadow-sm); }

/* ========================================
   HAZARD LOG (v3.12.0 D3 — ICS-208)
   ======================================== */
.hazard-card { background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.hazard-card.hazard-sev-high { border-left-color: var(--red); background: var(--red-bg); color: var(--text); }
.hazard-card.hazard-sev-medium { border-left-color: var(--orange-dark); background: var(--orange-bg); color: var(--text); }
.hazard-card.hazard-sev-low { border-left-color: var(--blue); background: var(--blue-light); color: var(--text); }
.hazard-card.hazard-mitigated { opacity: 0.65; background: var(--surface-alt); border-left-color: var(--text-disabled); color: var(--text-primary); }
.hazard-card .btn { flex-shrink: 0; white-space: nowrap; width: auto; }
.hazard-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 3px; margin-left: 4px; letter-spacing: 0.4px; vertical-align: middle; }
.hazard-badge-high { background: var(--red); color: #fff; }
.hazard-badge-medium { background: var(--orange-dark); color: #fff; }
.hazard-badge-low { background: var(--blue); color: #fff; }
.hazard-badge-mitigated { background: var(--text-disabled); color: #fff; }

/* ========================================
   FORCE UPDATE OVERLAY (v3.12.0 Phase 7b)
   Full-screen blocking modal when the client's APP_VERSION falls below the
   admin-set /config/minAppVersion. No dismissal — only Reload Now.
   ======================================== */
.force-update-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: auto; }
.force-update-card { background: var(--surface); border: 2px solid var(--orange-dark); border-radius: 12px; max-width: 480px; width: 100%; padding: 28px; box-shadow: 0 12px 48px rgba(0,0,0,0.6); }
.force-update-card h2 { font-size: 22px; font-weight: 800; color: var(--orange-dark); margin-bottom: 12px; }
.force-update-card p { font-size: 15px; color: var(--text); line-height: 1.5; margin-bottom: 20px; }
.force-update-card .reload-btn { width: 100%; min-height: 56px; background: var(--orange-dark); color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 16px; cursor: pointer; }
.force-update-card .reload-btn:hover { filter: brightness(1.1); }
.force-update-card .version-meta { font-size: 12px; color: var(--text-secondary); margin-top: 16px; text-align: center; }

/* ========================================
   QUICK-START FAB (#110)
   ======================================== */
.quick-start-fab {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  right: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.quick-start-fab .fab-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.quick-start-fab .fab-arc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 1;
}
.fab-arc-track { fill: none; stroke: rgba(255,255,255,0.2); stroke-width: 3; }
.fab-arc-fill {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 3.5s linear;
}
.quick-start-fab.holding .fab-arc-fill { stroke-dashoffset: 0; }
.quick-start-fab .fab-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ========================================
   SCENARIO PRESET CARDS (#108)
   ======================================== */
.preset-cards { display: flex; flex-direction: column; gap: 6px; }
.preset-card {
  background: var(--surface-alt, #F5F5F5);
  border: 2px solid transparent;
  border-left: 4px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 56px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.preset-card:hover { border-color: var(--blue-border, #90CAF9); }
.preset-card.selected { border-left-color: var(--blue); background: var(--blue-light, #BBDEFB); }
.preset-card-name { font-size: 14px; font-weight: 700; color: var(--text); }
.preset-card-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ========================================
   SOLO-IC MODE CONTROLS (#109)
   ======================================== */
.solo-ic-panel { background: var(--surface-alt, #F5F5F5); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.solo-ic-status { font-size: 14px; font-weight: 700; color: var(--blue); margin-bottom: 8px; }
.solo-ic-options { display: flex; flex-direction: column; gap: 6px; }
.solo-ic-option { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; font-size: 13px; cursor: pointer; border: 1px solid transparent; }
.solo-ic-option.selected { background: var(--blue-light, #BBDEFB); border-color: var(--blue-border, #90CAF9); }
.solo-ic-option input[type="radio"] { width: 16px; height: 16px; accent-color: var(--blue); }

/* ========================================
   DARK MODE
   Applied via [data-theme="dark"] on <html>. JavaScript resolves the user's
   preference ('system' | 'light' | 'dark') and sets the attribute on load
   and on system theme change, so CSS only needs one selector.
   ======================================== */
:root[data-theme="dark"] {
  --bg: #121212;
    --surface: #1E1E1E;
    --surface-alt: #2A2A2A;
    --surface-muted: #252525;
    --card-secondary-bg: #1A1A1A;
    --text: #E0E0E0;
    --text-secondary: #9E9E9E;
    --text-disabled: #555555;
    --text-hint: #999999; /* H8 (v3.11.3): WCAG AA contrast 4.6:1 on #2A2A2A (was #888888, 4.05:1 fail) */
    --border: #333333;
    --border-light: #2A2A2A;
    --nav-bg: #0D0D1A;
    --nav-text: #8899AA;
    --shadow: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
    --blue: #42A5F5;
    --blue-light: #1A3050;
    --blue-border: #1565C0;
    --red: #EF5350;
    --red-bg: #4A1A1A;
    --green: #66BB6A;
    --green-bg: #1A3A1A;
    --gold: #FFD54F;
    --gold-bg: #2A2510;
    --gold-border: #FFD54F;
    --grey: #9E9E9E;
    --grey-bg: #2A2A2A;
    --grey-border: #666666;
    --pending: #CE93D8;
    --pending-bg: #3D1A3D;
    --pending-border: #7B1FA2;
    --orange-dark: #FF9100;
    --orange-bg: #2A1F10;
    --cutting-bg: #3A3515;
    --cutting-text: #FFD54F;
    --cutting-border: #FFD54F;
    --runner-bg: #3A2A15;
    --runner-text: #FF9100;
    --runner-border: #FF9100;

  /* Input fields — & prefix required for nested type selectors */
  & input[type="number"], & input[type="text"], & select {
    background: #2A2A2A;
    border-color: #444444;
    color: var(--text);
  }
  & input:focus, & select:focus { border-color: var(--blue); }
  .select-compact { background: #2A2A2A; border-color: #444444; }
  .textarea { background: #2A2A2A; border-color: #444444; color: var(--text); }

  /* Extension chip */
  .ext-chip { background: #1A2A3A; color: #90CAF9; }

  /* Lockstroke toggle */
  .system-toggle.active.lockstroke { border-color: #78909C; background: #1A2530; }
  .system-toggle.active.lockstroke .toggle-dot { background: #78909C; border-color: #78909C; }

  /* Org chart */
  .org-node { background: #181818; }
  .org-node-filled { background: #1A2A3A; border-color: #42A5F5; }
  .org-node-empty { background: #1A1A1A; border-color: #555555; }
  .org-node-empty:hover { background: #2A2A2A; }
  .org-node-drop-target { background: #1A2A3A; }
  .org-node-reparent-picked { box-shadow: 0 0 0 3px #F57C00; border-color: #F57C00 !important; }
  .org-card-btn { color: #BBB; }
  .org-card-btn:hover { background: rgba(255,255,255,0.08); color: #FFF; }
  .org-card-delete:hover { background: rgba(244,67,54,0.18); color: #EF5350; }
  .org-toolbar { border-top-color: rgba(255,255,255,0.08); }
  .org-tool { color: #999; }
  .org-tool:hover:not(.is-disabled) { background: #1F1F1F; border-color: #333; color: #42A5F5; }
  .org-children-row::before,
  .org-children-row > .org-node-wrap::before,
  .org-children-row > .org-node-wrap::after { background: #555; }

  /* Modal */
  .modal-overlay { background: rgba(0,0,0,0.7); }

  /* Login input */
  .login-form input { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); }

  /* View switcher */
  .view-switcher { background: #2A2A2A; }
  .view-switcher button.active { background: var(--surface); color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

  /* Card sections */
  .card-secondary { background: #1A1A1A; }
  .card-deductions { background: #1A1A1A; }
  .card-primary .ext-section { border-top-color: #333333; }

  /* Button variants */
  .btn-outline { border-color: #444444; color: var(--text); }
  .btn-success { background: #1A2A1A; color: #66BB6A; border-color: #388E3C; }
  .btn-success:hover { background: #223322; }
  .btn-gold-outline { background: #2A2510; color: #FFD54F; border-color: #FFD54F; }
  .btn-blue-outline { background: #1A2A3A; color: #42A5F5; border-color: #1565C0; }
  .btn-purple { background: #2A1A2A; color: #CE93D8; border-color: #7B1FA2; }

  /* Alert */
  .alert-warning { background: #3A1A1A; border-color: #EF5350; }

  /* Badges */
  .ext-badge { background: #2A1F10; color: #FF9100; }
  .cut-diff-warning { background: #2A1F10; color: #FF9100; }
  .apparatus-source { background: #1A2A3A; color: #42A5F5; }
  .app-chip.external { background: #2A1F10; color: #FF9100; }

  /* Loading text */
  .btn-loading::after { color: var(--text); }

  /* Hover/active overrides */
  .sp-edit-btn:hover { background: #2A2A2A; }
  .sp-delete-btn:hover { background: #3A1A1A; }
  .drilldown-item:hover, .drilldown-item:active { background: #1A2A3A; }
  .inv-qty-btn:active { background: #333333; }
  .quick-add-btn:hover, .quick-add-plate:hover { background: #1A2A3A; }
  .role-card:hover { border-color: #42A5F5; }

  /* Connection status */
  .conn-status.offline { background: #B71C1C; }
  .conn-status.syncing { background: #E65100; }

  /* Plate unavailable */
  .plate-unavailable { opacity: 0.25; }

  /* Preset cards dark */
  .preset-card { background: var(--card-secondary-bg, #1A1A1A); }
  .preset-card.selected { background: #1A3A5C; border-left-color: var(--blue); }
  .preset-card:hover { border-color: #2A5A8C; }

  /* Solo-IC panel dark */
  .solo-ic-option.selected { background: #1A3A5C; border-color: #2A5A8C; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: #1A1A1A; }
  ::-webkit-scrollbar-thumb { background: #444444; border-radius: 3px; }
}