/* ═══════════════════════════════════════════════════════════════════════════════

   NEXUS EQUIPMENT — unified styles
   ────────────────────────────────
   Consolidated CSS for the entire equipment subsystem. This single file
   merges what used to be three separate files loaded in cascade order:

     · equipment.css         (PART 1 — base styles)
     · equipment-fixes.css   (PART 2 — patches/overrides, merged 2026-05-06)
     · equipment-context-menu.css (PART 3 — long-press context menu, merged 2026-05-06)

   The 3-part order is preserved exactly so cascade behavior is identical
   to the pre-merge state. Within each part, sections are roughly grouped
   by feature area but the original authoring order is left intact (don't
   reorder rules with the same selector — same-specificity rules get
   resolved by document position).

   ═══════════════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ═══════════════════════════════════════════════════════════════════════════════

   PART 1 — BASE (lines     1 –  2817)

       29   Module styles (layout, list, grid, cards, detail modal, tabs)
       908  Phase 2 AI additions (scan confidence, intelligence panels)
      1010  Phase 3 (Zebra print dialog)
      1158  PUBLIC SCAN VIEW (no-login, standalone page)
      1502  AI CREATOR (text-based equipment generation flow)
      1832  FULL EDITOR (large detail-edit modal with tabs)
      2134  UX PATCHES (per-row print button, list-view tweaks)
      2235  PHASE 4 (lineage tree + dispatch sheet)

   PART 2 — FIXES (lines  2818 –  5235)

      2839  CLEAN ACTION BAR (top filter chips + view toggle)
      2999  DISPATCH MODAL (call service flow)
      3236  MANUAL CARD (PDF/manual viewer in detail modal)
      3330  MULTI-VENDOR PARTS (parts list with vendor expansion)
      3718  EXTRACT FROM MANUAL (AI manual ingestion progress)
      3887  COLLAPSIBLE PART ACCORDION (v2 parts design)
      4046  DETAIL CLOSE BUTTON (mobile fix #1)
      4107  CLOSE BUTTON FIX V1 (overrides)
      4199  REPORT ISSUE BUTTON RESTYLE
      4248  CLOSE BUTTON FIX V2 (more aggressive overrides)
      4286  CALL CONTRACTOR BUTTON (public scan action card)
      4350  DISPATCH SHEET (corrected to match actual JS class names)
      4688  THREE-DOT OVERFLOW MENU (destructive-action gate)
      4770  CALL SERVICE BUTTON (replaces old dispatch)
      4793  CALL CONFIRM MODAL (pre-dial confirmation)
      4970  DETAIL ACTION BAR (Stage Z unified treatment)
      5082  PUBLIC SCAN BUTTON OVERHAUL
      5193  PUBLIC SCAN iPhone scroll fix

   PART 3 — CONTEXT MENU (lines  5236 –  end)

      5247  CONTEXT MENU SYSTEM (long-press card menu — backdrop, items, animation)
      5831  TIMELINE DETAIL MODAL (per-event detail view)

   ═══════════════════════════════════════════════════════════════════════════════
   AUDIT NOTES (current state)
   ═══════════════════════════════════════════════════════════════════════════════

     · 6,117 total lines, brace-balanced
     · ~216 !important declarations, all in PART 2 (preserved verbatim from the
       original equipment-fixes.css). Many are now redundant since both PART 1
       and PART 2 live in the same file with deterministic order. A future
       cleanup pass could remove them per-selector with visual testing.
     · ~357 duplicate selectors across PART 1 + PART 2 (e.g. `.eq-card`
       defined in both, with the PART 2 version winning). Same-selector
       rules can be merged with no cascade change but each merge needs a
       quick visual diff to confirm.
     · All inline color literals tokenized to var(--token) form.

   ═══════════════════════════════════════════════════════════════════════════════ */


/* ─── from equipment.css ─── */

/* ═══════════════════════════════════════════════════════════════════════
   NEXUS Equipment Module — Styles v1
   ═══════════════════════════════════════════════════════════════════════ */

#equipmentView { padding: 12px 16px 100px; }

/* ─── Header ─── */
.eq-header { margin-bottom: 16px; }
.eq-title-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.eq-title { font-size: 18px; font-weight: 600; margin: 0; color: var(--text); }
.eq-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.eq-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.eq-search {
  flex: 1; padding: 10px 14px; background: var(--elevated);
  border: 1px solid var(--border); border-radius: var(--rp);
  color: var(--text); font-size: 14px; outline: none;
}
.eq-search:focus { border-color: var(--accent); }

.eq-view-toggle {
  display: flex; background: var(--elevated); border: 1px solid var(--border);
  border-radius: var(--rp); overflow: hidden;
}
.eq-view-btn {
  padding: 10px 14px; background: none; border: none; color: var(--muted);
  font-size: 16px; cursor: pointer;
}
.eq-view-btn.active { background: var(--accent); color: #000; }

/* ─── Filters ─── */
.eq-filters { margin-bottom: 12px; }
.eq-filter-group {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 6px;
}
.eq-filter-label {
  font-size: 11px; color: var(--faint); text-transform: uppercase;
  letter-spacing: 0.5px; margin-right: 4px;
}
.eq-chip {
  padding: 5px 11px; border-radius: 18px; border: 1px solid var(--border);
  background: none; color: var(--muted); font-size: 12px; cursor: pointer;
  transition: all 0.15s;
}
.eq-chip:hover { border-color: var(--accent); color: var(--text); }
.eq-chip.active {
  background: var(--accent); color: #000; border-color: var(--accent);
  font-weight: 500;
}

/* ─── Stats ─── */
.eq-stats {
  display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.eq-stat {
  display: flex; flex-direction: column; padding: 8px 12px;
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: var(--rp); min-width: 80px;
}
.eq-stat-v { font-size: 18px; font-weight: 600; color: var(--text); }
.eq-stat-l {
  font-size: 10px; color: var(--faint); text-transform: uppercase;
  letter-spacing: 0.5px;
}
.eq-stat-red { border-color: var(--red); }
.eq-stat-red .eq-stat-v { color: var(--red); }
.eq-stat-amber { border-color: var(--amber); }
.eq-stat-amber .eq-stat-v { color: var(--amber); }
.eq-stat-blue { border-color: var(--blue); }
.eq-stat-blue .eq-stat-v { color: var(--blue); }

/* ─── Buttons ─── */
.eq-btn {
  padding: 8px 14px; border-radius: var(--rp); border: 1px solid transparent;
  font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
.eq-btn-primary { background: var(--accent); color: #000; border-color: var(--accent); }
.eq-btn-primary:hover { opacity: 0.9; }
.eq-btn-secondary { background: var(--elevated); color: var(--text); border-color: var(--border); }
.eq-btn-secondary:hover { border-color: var(--accent); }
.eq-btn-danger { background: none; color: var(--red); border-color: var(--red); }
.eq-btn-danger:hover { background: var(--red); color: #fff; }
.eq-btn-small { padding: 5px 10px; font-size: 12px; }
.eq-btn-tiny { padding: 3px 8px; font-size: 11px; }

/* ─── Empty state ─── */
.eq-empty {
  text-align: center; padding: 60px 20px; color: var(--muted);
}
.eq-empty-icon { font-size: 48px; margin-bottom: 12px; }
.eq-empty-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.eq-empty-sub { font-size: 13px; margin-bottom: 20px; }
.eq-empty-small { text-align: center; padding: 32px 16px; color: var(--muted); font-size: 13px; }
.eq-mt { margin-top: 12px; }

/* ─── List view ─── */
.eq-table {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.eq-row {
  display: grid;
  grid-template-columns: 2.4fr 1.2fr 1fr 0.9fr 0.5fr;
  gap: 14px; padding: 12px 16px; align-items: center;
  border-bottom: 1px solid var(--nx-highlight-tint); cursor: pointer;
  transition: background 0.15s;
  /* Hairline divider instead of full border so the table reads as one
     surface, not 12 stacked plates. */
}
.eq-row:last-child { border-bottom: none; }
.eq-row:hover:not(.eq-row-head) { background: var(--nx-gold-tint); }
.eq-row-head {
  background: rgba(255,255,255,0.015); font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--faint); cursor: default; font-weight: 600;
  padding: 10px 16px;
}
.eq-col-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Bigger category icon as primary visual anchor — eye lands on it, then
   reads name. Was 20px, felt timid against the long row. */
/* Category icon — now an inline SVG (see catIcon() in equipment.js).
   font-size sets the visual size (SVG is width/height: 1em).
   Color via gold accent so glyphs match brand language. */
.eq-cat-icon { font-size: 22px; flex-shrink: 0; color: var(--accent); display: inline-flex; align-items: center; }
.eq-cat-icon-lg { font-size: 32px; flex-shrink: 0; color: var(--accent); display: inline-flex; align-items: center; }
.eq-name { font-weight: 600; color: var(--text); font-size: 13.5px; line-height: 1.3; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Manufacturer de-emphasized vs model number. The model is what you
   actually search for when ordering parts; the brand is context. */
.eq-sub { font-size: 11px; color: var(--faint); margin-top: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-col-loc { color: var(--muted); font-size: 12.5px; }
.eq-col-status {
  display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted);
}
.eq-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  /* Subtle glow on green so the eye doesn't have to search for which
     dot is green (they all look the same at small size on dark BG). */
  box-shadow: 0 0 4px currentColor;
}
.eq-col-pm { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.eq-col-pm.eq-overdue { color: var(--red); font-weight: 600; }
.eq-col-pm.eq-soon { color: var(--amber); font-weight: 500; }
/* Empty PM dash should fade into the background — not bold-fight for
   attention with the real dates. */
.eq-col-pm:not(.eq-overdue):not(.eq-soon):empty::before,
.eq-col-pm:not(.eq-overdue):not(.eq-soon):where(:not(:empty)) {
  /* JS sets text to '—' for null; we tint that gracefully */
}
.eq-col-pm.eq-pm-empty { color: var(--nx-highlight-mid); font-size: 14px; }
.eq-col-services { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; padding-right: 4px; }

@media (max-width: 600px) {
  /* Mobile row layout — proper 2D grid:
       ┌───────────────┬────────┐
       │ name + avatar │        │
       ├───────────────┤ beacon │
       │ location      │        │
       └───────────────┴────────┘
     Name takes the full content width on row 1, location sits as a
     muted caption on row 2 (indented to align past the avatar), and
     the beacon lives in its own column spanning both rows so it
     vertically centers cleanly with no overlap. */
  .eq-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 40px;
    grid-template-areas:
      "name   beacon"
      "loc    beacon";
    column-gap: 10px;
    row-gap: 3px;
    padding: 12px 14px;
    align-items: center;
  }
  .eq-col-pm, .eq-col-services { display: none; }
  .eq-col-name { grid-area: name; }
  .eq-col-loc {
    grid-area: loc;
    padding-left: 48px;        /* align under name text, past avatar */
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    color: var(--nx-faint);
    letter-spacing: 0.1px;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Beacon — own column, vertically centered across both rows */
  .eq-col-status {
    grid-area: beacon;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 40px;
    height: 100%;
  }
  .eq-col-status .eq-lc-pill-label,
  .eq-col-status .eq-lc-pill-time { display: none; }
  .eq-col-status .eq-lc-pill {
    padding: 0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    justify-content: center;
    flex-shrink: 0;
  }
  .eq-col-status .eq-lc-pill-dot {
    width: 10px;
    height: 10px;
    margin: 0;
  }
  /* Hide the head-row's status header — beacon column doesn't need a
     "Status" word floating over it. */
  .eq-row-head .eq-col-status { display: none; }
}

/* When all visible rows are Operational, the status column used to
   collapse — that hid the lifecycle heartbeat. We now ALWAYS render
   the column. The unused class below is preserved as a no-op so any
   old cached HTML doesn't break, but it no longer hides anything. */
.eq-table-uniform .eq-col-status { display: none; }
.eq-table-uniform .eq-row { grid-template-columns: 2.4fr 1.2fr 1fr 0.5fr; }
@media (max-width: 600px) {
  /* Status hidden + pm/services hidden = only name + location visible.
     Drop to 2-column grid so location gets its full lane instead of
     squeezing into 1fr next to a wasted 0.6fr empty column. */
  .eq-table-uniform .eq-row {
    grid-template-columns: 1.7fr 1fr;
    padding-right: 50px;
  }
}

/* ─── Grid view ─── */
.eq-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.eq-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  transition: all 0.15s;
}
.eq-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.eq-card-top {
  position: relative; aspect-ratio: 4 / 3; background: var(--elevated);
}
.eq-card-photo {
  width: 100%; height: 100%; object-fit: cover;
}
.eq-card-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: var(--faint);
}
.eq-card-status {
  position: absolute; top: 8px; right: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface);
}
.eq-card-body { padding: 10px 12px; }
.eq-card-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eq-card-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.eq-card-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-top: 6px;
}
.eq-health { font-weight: 600; }
.eq-card-pm {
  font-size: 10px; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px;
}

/* ─── Detail modal ─── */
.eq-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
}
.eq-modal.active { display: flex; }
.eq-detail-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.eq-detail {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
  width: min(800px, 100%); max-height: 90vh;
  display: flex; flex-direction: column; margin: 0 12px;
}
.eq-edit { width: min(600px, 100%); }
.eq-detail-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.eq-detail-title { display: flex; align-items: center; gap: 12px; flex: 1; }
.eq-detail-title h2 { margin: 0; font-size: 18px; color: var(--text); }
.eq-detail-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.eq-detail-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
  padding: 4px 10px; background: var(--elevated);
  border-radius: 16px;
}
.eq-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: var(--muted);
  font-size: 20px; cursor: pointer; padding: 4px 8px;
}
.eq-close:hover { color: var(--text); }

/* ─── Tabs ─── */
.eq-detail-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-shrink: 0;
}
.eq-tab {
  padding: 12px 18px; background: none; border: none;
  color: var(--muted); font-size: 13px; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
  font-family: inherit;
}
.eq-tab:hover { color: var(--text); }
.eq-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.eq-detail-body { padding: 20px; overflow-y: auto; flex: 1; }
.eq-tab-panel { display: none; }
.eq-tab-panel.active { display: block; }

/* ─── Overview fields ─── */
.eq-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.eq-field label {
  display: block; font-size: 10px; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;
}
.eq-field > div { font-size: 14px; color: var(--text); }
.eq-specs, .eq-notes { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.eq-specs h4, .eq-notes h4 {
  font-size: 12px; color: var(--faint); text-transform: uppercase;
  letter-spacing: 0.5px; margin: 0 0 12px 0;
}
.eq-notes p { font-size: 13px; color: var(--text); margin: 0; line-height: 1.5; }
.eq-detail-photo {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: var(--rp); margin-bottom: 16px;
}

/* ─── Timeline ─── */
.eq-timeline { display: flex; flex-direction: column; gap: 12px; }
.eq-timeline-item {
  position: relative;
  background: var(--elevated); border-left: 3px solid var(--accent);
  border-radius: 0 var(--rp) var(--rp) 0; padding: 10px 14px;
  display: flex; gap: 16px;
}
.eq-timeline-date {
  font-size: 11px; color: var(--faint); flex-shrink: 0;
  min-width: 80px; font-weight: 500;
}
.eq-timeline-body { flex: 1; }
.eq-timeline-type {
  display: inline-block; font-size: 9px; padding: 2px 8px;
  border-radius: 14px; letter-spacing: 0.5px; font-weight: 600;
  margin-bottom: 6px;
}
.eq-type-repair { background: var(--nx-red-mist); color: var(--red); }
.eq-type-pm { background: rgba(63, 120, 181, 0.15); color: var(--blue); }
.eq-type-inspection { background: var(--nx-gold-soft); color: var(--amber); }
.eq-type-install { background: rgba(63, 160, 143, 0.15); color: var(--green); }
.eq-type-recall { background: var(--nx-red-aura); color: var(--red); }
.eq-timeline-desc { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.eq-timeline-who, .eq-timeline-cost, .eq-timeline-dt {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.eq-timeline-detail {
  font-size: 12px; color: var(--muted); margin-top: 4px;
  padding: 6px 8px; background: var(--surface); border-radius: 4px;
}
.eq-timeline-detail b { color: var(--text); }

/* ─── Pending PM review entry — distinct treatment so admins see
       at a glance that this log hasn't been approved yet.          ─── */
.eq-timeline-pending {
  border-left-color: var(--accent);
  background: linear-gradient(
    to right,
    var(--nx-gold-faint),
    rgba(35, 34, 40, 0.95) 70%
  );
  border: 1px solid var(--nx-gold-line);
  border-left-width: 3px;
}
.eq-timeline-pending-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--accent);
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 14px;
  white-space: nowrap;
}
.eq-timeline-submitted-at {
  margin-top: 8px;
  font-size: 10px;
  color: var(--faint);
  font-style: italic;
}
.eq-timeline-photos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.eq-timeline-photo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.15s;
}
.eq-timeline-photo:hover { transform: scale(1.05); }
.eq-timeline-signature {
  max-width: 180px;
  max-height: 70px;
  background: #fff;
  border-radius: 4px;
  margin-top: 8px;
  display: block;
}
.eq-timeline-spam-flag {
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--red);
  background: rgba(200, 70, 70, 0.12);
  border-radius: 4px;
}
.eq-timeline-review-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.eq-timeline-review-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--faint);
  font-style: italic;
}
.eq-btn-approve,
.eq-btn-reject,
.eq-btn-spam {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.eq-btn-approve {
  background: rgba(63, 160, 143, 0.14);
  color: var(--green);
  border-color: rgba(63, 160, 143, 0.3);
}
.eq-btn-approve:active {
  background: rgba(63, 160, 143, 0.24);
  transform: scale(0.97);
}
.eq-btn-reject {
  background: rgba(150, 150, 160, 0.1);
  color: var(--muted);
  border-color: rgba(150, 150, 160, 0.25);
}
.eq-btn-reject:active {
  background: rgba(150, 150, 160, 0.18);
  transform: scale(0.97);
}
.eq-btn-spam {
  background: rgba(200, 70, 70, 0.1);
  color: var(--red);
  border-color: rgba(200, 70, 70, 0.25);
}
.eq-btn-spam:active {
  background: rgba(200, 70, 70, 0.18);
  transform: scale(0.97);
}

/* Pending count badge in the Timeline tab label */
.eq-tab-pending-dot {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  background: var(--nx-gold-haze);
  border-radius: 12px;
  vertical-align: middle;
}

/* ─── Inline attachment add buttons (Overview tab) ────────────────
   Direct "+" affordance right in the Overview's attachments section
   so users don't have to navigate to Edit → Attachments tab to add
   more. Chip-style buttons, compact, tappable.                      */
.eq-attach-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.eq-attach-add-btn {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: 24px;
  border: 1px solid var(--nx-gold-line);
  background: var(--nx-gold-faint);
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.eq-attach-add-btn:active {
  background: var(--nx-gold-soft);
  border-color: var(--nx-gold-line-3);
  transform: scale(0.96);
}

/* ─── Cross-system close-out modal ─────────────────────────────────
   Confirms "equipment is back up, close related cards?" in a warm,
   non-alarming treatment. Amber accents match NEXUS aesthetic.     */
.eq-closeout-bg {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(4, 4, 10, 0.72);
  backdrop-filter: blur(4px);
  animation: eqCloseoutFade 0.2s ease-out;
}
.eq-closeout-modal {
  position: fixed;
  z-index: 351;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 420px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--elevated);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 20px;
  padding: 22px 20px 18px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--nx-gold-mist);
  animation: eqCloseoutIn 0.22s cubic-bezier(0.2, 0.8, 0.25, 1);
}
@keyframes eqCloseoutFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes eqCloseoutIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.eq-closeout-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.eq-closeout-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(63, 160, 143, 0.16);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(63, 160, 143, 0.25);
}
.eq-closeout-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.3;
}
.eq-closeout-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}
.eq-closeout-cards {
  list-style: none;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--nx-gold-tint);
  border: 1px solid var(--nx-gold-soft);
  border-radius: 14px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}
.eq-closeout-cards li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.eq-closeout-col {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--nx-gold-mist);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}
.eq-closeout-more {
  color: var(--faint);
  font-size: 11px;
  font-style: italic;
  justify-content: flex-start !important;
}
.eq-closeout-note {
  font-size: 11px;
  color: var(--faint);
  line-height: 1.5;
  margin: 0 0 16px;
  padding: 0 2px;
}
.eq-closeout-actions {
  display: flex;
  gap: 8px;
}
.eq-closeout-btn {
  flex: 1;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.eq-closeout-btn-secondary {
  background: rgba(150, 150, 160, 0.08);
  color: var(--muted);
  border-color: rgba(150, 150, 160, 0.2);
}
.eq-closeout-btn-secondary:active {
  background: rgba(150, 150, 160, 0.16);
  transform: scale(0.97);
}
.eq-closeout-btn-primary {
  background: rgba(63, 160, 143, 0.14);
  color: var(--green);
  border-color: rgba(63, 160, 143, 0.35);
  font-weight: 600;
}
.eq-closeout-btn-primary:active {
  background: rgba(63, 160, 143, 0.26);
  border-color: rgba(63, 160, 143, 0.6);
  transform: scale(0.97);
}
.eq-timeline-actions {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 2px;
}
.eq-timeline-edit,
.eq-timeline-del {
  background: none; border: none; color: var(--faint);
  cursor: pointer; font-size: 14px; padding: 2px 6px; line-height: 1;
}
.eq-timeline-edit:hover { color: var(--accent); }
.eq-timeline-del:hover  { color: var(--red); }
.eq-timeline-bar {
  display: flex; justify-content: flex-end; margin-bottom: 10px;
}

/* ─── Parts ─── */
.eq-parts-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.eq-parts-head h4 { margin: 0; font-size: 14px; color: var(--text); }
.eq-parts-list { display: flex; flex-direction: column; gap: 8px; }
.eq-part {
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: var(--rp); padding: 10px 12px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.eq-part-main { flex: 1; }
.eq-part-name { font-size: 13px; font-weight: 500; color: var(--text); }
.eq-part-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.eq-part-path { font-size: 10px; color: var(--faint); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.eq-part-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ─── Manual ─── */
.eq-manual-iframe {
  width: 100%; height: 500px; border: 1px solid var(--border);
  border-radius: var(--rp); background: #fff;
}
.eq-manual-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ─── QR ─── */
.eq-qr-section {
  text-align: center; padding: 20px;
  background: var(--elevated); border-radius: var(--r);
}
.eq-qr-label { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.eq-qr-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.eq-qr-img {
  background: #fff; padding: 10px; border-radius: 12px;
  margin: 0 auto 12px; display: block;
}
.eq-qr-code {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--faint); margin-bottom: 4px;
}
.eq-qr-url {
  font-size: 10px; color: var(--faint); word-break: break-all;
  margin-bottom: 16px;
}
.eq-qr-actions { display: flex; gap: 8px; justify-content: center; }

/* ─── Form ─── */
.eq-form { display: flex; flex-direction: column; gap: 14px; }
.eq-form-row { display: flex; gap: 14px; }
.eq-form-row .eq-form-group { flex: 1; }
.eq-form-group label {
  display: block; font-size: 11px; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
  font-weight: 500;
}
.eq-form-group input,
.eq-form-group select,
.eq-form-group textarea {
  width: 100%; padding: 9px 12px; background: var(--elevated);
  border: 1px solid var(--border); border-radius: var(--rp);
  color: var(--text); font-size: 14px; outline: none;
  font-family: inherit;
}
.eq-form-group input:focus,
.eq-form-group select:focus,
.eq-form-group textarea:focus {
  border-color: var(--accent);
}
.eq-form-group textarea { resize: vertical; min-height: 60px; }
.eq-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* ─── Detail actions bar — uniform, NEXUS-consistent ─── */
.eq-detail-actions {
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eq-detail-actions::-webkit-scrollbar { display: none; }
.eq-detail-actions .eq-btn,
.eq-detail-actions .eq-btn-primary,
.eq-detail-actions .eq-call-service-btn,
.eq-detail-actions .eq-zebra-action-btn {
  flex: 1 0 auto;
  min-width: 88px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  border-radius: 14px;
  border: 1px solid var(--nx-gold-line);
  background: var(--nx-gold-faint);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.eq-detail-actions .eq-btn:active,
.eq-detail-actions .eq-btn-primary:active,
.eq-detail-actions .eq-call-service-btn:active,
.eq-detail-actions .eq-zebra-action-btn:active {
  background: var(--nx-gold-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(0.97);
}
.eq-overflow-wrap { position: relative; flex: 0 0 auto; }
.eq-overflow-btn {
  width: 44px;
  min-width: 44px !important;
  padding: 11px 0 !important;
  font-size: 18px !important;
}

/* ─── List-row quick-status button (replaces the old label-print icon) ─── */
.eq-row-status-btn,
.eq-card-status-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--nx-gold-aura);
  background: var(--nx-gold-faint);
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}
.eq-row-status-btn:active,
.eq-card-status-btn:active {
  background: var(--nx-gold-haze);
  transform: translateY(-50%) scale(0.92);
}
.eq-card-status-btn {
  top: 8px;
  right: 8px;
  transform: none;
}
.eq-card-status-btn { display: none; }
.eq-row-status-btn { display: none; }
.eq-row { position: relative; }

/* ─── Quick status popup menu ─── */
.eq-status-menu {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  background: var(--elevated);
  border: 1px solid var(--nx-gold-haze);
  border-radius: 16px;
  padding: 6px;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 var(--nx-gold-faint);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: eqStatusMenuIn 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes eqStatusMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.eq-status-menu-head {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 10px 6px;
}
.eq-status-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 10px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 12px;
  text-align: left;
  transition: background 0.12s;
}
.eq-status-menu-item:active,
.eq-status-menu-item:hover {
  background: var(--nx-gold-mist);
}
.eq-status-menu-item.is-current {
  background: var(--nx-gold-faint);
  color: var(--accent);
}
.eq-status-menu-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.eq-status-menu-check {
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
}

/* ─── Mobile tweaks ─── */
@media (max-width: 600px) {
  #equipmentView { padding: 10px 12px 100px; }
  .eq-title-row { flex-wrap: wrap; gap: 8px; }
  .eq-actions { width: 100%; }
  .eq-actions .eq-btn { flex: 1; }
  .eq-form-row { flex-direction: column; gap: 14px; }
  .eq-detail { max-height: 100vh; border-radius: 0; margin: 0; height: 100vh; }
  .eq-detail-body { padding: 14px; }
}

/* ─── from equipment-ai.css ─── */

/* ═══════════════════════════════════════════════════════════════════════
   NEXUS Equipment Phase 2 AI — Style Additions
   Append after equipment.css
   ═══════════════════════════════════════════════════════════════════════ */

.eq-scan-conf {
  background: var(--nx-gold-mist);
  border: 1px solid var(--accent);
  border-radius: var(--rp);
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--muted);
}
.eq-scan-conf b { color: var(--accent); }

/* AI tab panel */
.eq-ai-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eq-ai-card {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
}

.eq-ai-card h4 {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}

.eq-ai-alert {
  background: var(--surface);
  border: 1.5px solid var(--amber);
  border-radius: var(--rp);
  padding: 12px 14px;
}

.eq-ai-big {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.eq-ai-detail {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.eq-ai-detail b {
  color: var(--text);
}

.eq-ai-neutral {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 4px;
  font-style: italic;
}

.eq-ai-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.eq-ai-actions .eq-btn {
  flex: 1;
  min-width: 140px;
}

/* Manual upgrade buttons */
.eq-manual-upgrade {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 12px;
}

/* Scan button in header */
.eq-scan-btn {
  font-weight: 500;
}

@media (max-width: 600px) {
  .eq-ai-actions {
    flex-direction: column;
  }
  .eq-ai-actions .eq-btn {
    width: 100%;
  }
}

/* ─── from equipment-p3.css ─── */

/* ═══════════════════════════════════════════════════════════════════════
   NEXUS Equipment Phase 3 — Styles
   Append after equipment.css and equipment-ai.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Zebra print dialog ─── */
.eq-zebra-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.eq-zebra-tab {
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.eq-zebra-tab:hover { color: var(--text); }
.eq-zebra-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.eq-zebra-panel { display: none; }
.eq-zebra-panel.active { display: block; }

.eq-zebra-note {
  padding: 10px 12px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--rp);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.eq-zebra-note a { color: var(--accent); text-decoration: none; }
.eq-zebra-note a:hover { text-decoration: underline; }

.eq-zebra-status {
  padding: 10px 12px;
  background: var(--elevated);
  border-radius: var(--rp);
  margin-bottom: 12px;
  font-size: 13px;
}
.eq-zebra-ok { color: var(--green); }
.eq-zebra-warn { color: var(--amber); }
.eq-zebra-err { color: var(--red); }
.eq-zebra-err a { color: var(--red); text-decoration: underline; }

.eq-zebra-preview {
  padding: 16px;
  background: var(--elevated);
  border-radius: var(--rp);
  min-height: 200px;
  text-align: center;
}
.eq-zebra-preview-img-wrap {
  display: inline-block;
}
.eq-zebra-preview-img {
  max-width: 100%;
  max-height: 300px;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.eq-zebra-preview-cap {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* ─── BOM extraction confirmation ─── */
.eq-bom-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
  margin: 12px 0;
  padding: 8px;
  background: var(--elevated);
  border-radius: var(--rp);
}
.eq-bom-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 4px;
  cursor: pointer;
}
.eq-bom-item:hover { background: var(--elevated); }
.eq-bom-item input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.eq-bom-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.eq-bom-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ─── Parts Cart ─── */
.eq-parts-cart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}
.eq-cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--elevated);
  border-radius: var(--rp);
  gap: 12px;
}
.eq-cart-info { flex: 1; }
.eq-cart-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.eq-cart-pn {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
   PUBLIC SCAN VIEW (no login, standalone page)
   ═══════════════════════════════════════════════════════════════════════ */

.public-scan-container {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  color: var(--text);
  font-family: 'DM Sans', 'Outfit', -apple-system, sans-serif;
  padding: 0;
}

.public-scan-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid var(--nx-gold-soft);
}

.public-scan-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 2px;
}

.public-scan-body {
  padding: 20px 16px 40px;
  max-width: 600px;
  margin: 0 auto;
}

.public-scan-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.public-scan-card {
  background: var(--surface);
  border: 1px solid var(--nx-gold-soft);
  border-radius: 18px;
  padding: 24px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.public-scan-photo {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 16px;
}

.public-scan-name {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px 0;
  color: #fff;
  line-height: 1.2;
}

.public-scan-loc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 14px;
}

.public-scan-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
}

.public-scan-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.public-scan-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--nx-highlight-faint);
}

.public-scan-fields > div label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 3px;
}

.public-scan-fields > div > div {
  font-size: 14px;
  color: #fff;
}

.public-scan-section {
  margin-bottom: 20px;
}

.public-scan-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.public-scan-history {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--nx-highlight-tint);
}

.public-scan-history:last-child { border-bottom: none; }

.public-scan-hist-date {
  font-size: 11px;
  color: var(--muted);
  min-width: 80px;
  padding-top: 2px;
}

.public-scan-hist-type {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.public-scan-hist-desc {
  font-size: 13px;
  color: #fff;
  line-height: 1.4;
}

.public-scan-hist-who {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.public-scan-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.public-scan-btn {
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid var(--nx-gold-aura);
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-align: center;
}

.public-scan-btn:hover {
  border-color: var(--accent);
  background: var(--nx-gold-faint);
}

.public-scan-btn-primary {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.public-scan-btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.public-scan-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--nx-highlight-faint);
  font-size: 11px;
  color: var(--faint);
}

.public-scan-error {
  text-align: center;
  padding: 60px 20px;
}

.public-scan-error h2 {
  color: #fff;
  margin-bottom: 10px;
}

.public-scan-error p {
  color: var(--muted);
  margin-bottom: 20px;
}

.public-scan-error button {
  padding: 12px 24px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* ─── Public report issue modal ─── */
.public-report-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.public-report-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.public-report {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 18px;
  width: min(500px, 92%);
  padding: 24px;
  max-height: 90vh;
  overflow-y: auto;
}

.public-report h2 {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 18px;
}

.public-report-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}

.public-report-close:hover { color: #fff; }

.public-report-field {
  margin-bottom: 14px;
}

.public-report-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 4px;
}

.public-report-field input,
.public-report-field textarea,
.public-report-field select {
  width: 100%;
  padding: 10px 12px;
  background: #252530;
  border: 1px solid var(--nx-highlight-line);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

.public-report-field input:focus,
.public-report-field textarea:focus,
.public-report-field select:focus {
  border-color: var(--accent);
}

.public-report-field textarea {
  resize: vertical;
  min-height: 80px;
}

.public-report-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.public-report-actions .public-scan-btn { flex: 1; }

.public-report-success {
  text-align: center;
}

.public-report-success p {
  color: var(--muted);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

/* ─── Mobile tweaks ─── */
@media (max-width: 600px) {
  .public-scan-body { padding: 16px 12px 30px; }
  .public-scan-card { padding: 18px 16px; }
  .public-scan-name { font-size: 18px; }
  .public-scan-fields { grid-template-columns: 1fr 1fr; }
}

/* ─── from equipment-ai-creator.css ─── */

/* ═══════════════════════════════════════════════════════════════════════
   NEXUS Equipment AI Creator — Styles
   ═══════════════════════════════════════════════════════════════════════ */

.eq-ai-intro {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--nx-gold-faint);
  border: 1px solid var(--nx-gold-haze);
  border-radius: var(--rp);
}

/* Method picker */
.eq-ai-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 500px) {
  .eq-ai-methods {
    grid-template-columns: 1fr 1fr;
  }
}

.eq-ai-method {
  background: var(--elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 16px 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eq-ai-method:hover {
  border-color: var(--accent);
  background: var(--nx-gold-faint);
  transform: translateY(-2px);
}

.eq-ai-method-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.eq-ai-method-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.eq-ai-method-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Describe examples */
.eq-ai-examples {
  margin: 12px 0 16px;
}

.eq-ai-examples-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--faint);
  margin-bottom: 6px;
}

.eq-ai-example {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--rp);
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
}

.eq-ai-example:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Confirmation */
.eq-ai-interp {
  padding: 10px 14px;
  background: var(--elevated);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--rp) var(--rp) 0;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.eq-ai-interp b { color: var(--accent); }

.eq-ai-bulk-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  justify-content: flex-end;
}

.eq-confirm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.eq-confirm-card {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
}

.eq-confirm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}

.eq-confirm-head input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.eq-confirm-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.eq-confirm-title { flex: 1; min-width: 0; }

.eq-confirm-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}

.eq-confirm-name:focus,
.eq-confirm-name:hover {
  border-bottom-color: var(--accent);
}

.eq-confirm-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.eq-conf {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 12px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.eq-conf-high { background: rgba(63, 160, 143, 0.20); color: var(--green); }
.eq-conf-medium { background: var(--nx-gold-haze); color: var(--amber); }
.eq-conf-low { background: var(--nx-red-haze); color: var(--red); }

.eq-confirm-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.eq-confirm-field label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--faint);
  margin-bottom: 3px;
}

.eq-confirm-field input,
.eq-confirm-field select {
  width: 100%;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

.eq-confirm-field input:focus,
.eq-confirm-field select:focus {
  border-color: var(--accent);
}

/* Links display */
.eq-confirm-links {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.eq-confirm-links-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--faint);
  margin-bottom: 6px;
}

.eq-link-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 11px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.eq-link-existing {
  background: rgba(70, 180, 120, 0.15);
  color: var(--green);
  border: 1px solid rgba(70, 180, 120, 0.3);
}

.eq-link-new {
  background: rgba(70, 140, 200, 0.15);
  color: var(--blue);
  border: 1px solid rgba(70, 140, 200, 0.3);
}

.eq-confirm-notes {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--rp);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.eq-confirm-issues {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(200, 70, 70, 0.1);
  border: 1px solid rgba(200, 70, 70, 0.3);
  border-radius: var(--rp);
  font-size: 12px;
  color: var(--text);
}

.eq-issue {
  padding: 4px 0;
  font-size: 11px;
  color: var(--muted);
}

/* Location picker */
.eq-loc-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eq-loc-btn {
  padding: 14px 20px;
  background: var(--elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-align: left;
}

.eq-loc-btn:hover {
  border-color: var(--accent);
  background: var(--nx-gold-faint);
}

/* AI Create button */
.eq-ai-create-btn {
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
}

.eq-ai-create-btn:hover {
  opacity: 0.9;
}

@media (max-width: 600px) {
  .eq-confirm-details {
    grid-template-columns: 1fr;
  }
}

/* ─── from equipment-full-editor.css ─── */

/* ═══════════════════════════════════════════════════════════════════════
   NEXUS Equipment Full Editor — Styles
   ═══════════════════════════════════════════════════════════════════════ */

.eq-edit-full {
  width: min(800px, 100%) !important;
}

/* Specs editor */
.eq-specs-help {
  font-size: 12px;
  color: var(--muted);
  padding: 10px 14px;
  background: var(--elevated);
  border-radius: var(--rp);
  margin-bottom: 14px;
  line-height: 1.5;
}

.eq-specs-list,
.eq-custom-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.eq-spec-row,
.eq-custom-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.eq-custom-row {
  grid-template-columns: 1fr auto 1fr auto;
}

.eq-spec-row input,
.eq-custom-row input,
.eq-custom-row select {
  padding: 8px 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--rp);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.eq-spec-row input:focus,
.eq-custom-row input:focus,
.eq-custom-row select:focus {
  border-color: var(--accent);
}

/* Photo sections */
.eq-photo-section {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.eq-photo-section:last-child {
  border-bottom: none;
}

.eq-photo-section h4 {
  font-size: 13px;
  color: var(--text);
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eq-photo-wrap {
  position: relative;
}

.eq-photo-main {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  background: var(--elevated);
  border-radius: var(--rp);
  border: 1px solid var(--border);
}

.eq-photo-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* Attachments */
.eq-attach-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.eq-attach-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eq-attach-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--rp);
  align-items: flex-start;
}

.eq-attach-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.eq-attach-info {
  flex: 1;
  min-width: 0;
}

.eq-attach-title-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}

.eq-attach-title {
  flex: 1;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  outline: none;
  font-family: inherit;
  min-width: 0;
}

.eq-attach-title:focus {
  border-color: var(--accent);
}

.eq-attach-type {
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
  outline: none;
  font-family: inherit;
}

.eq-attach-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  padding: 6px 0;
}

.eq-attach-preview {
  max-width: 200px;
  max-height: 120px;
  border-radius: 4px;
  margin-top: 6px;
  display: block;
}

.eq-attach-meta {
  font-size: 11px;
  color: var(--faint);
  margin-top: 6px;
}

.eq-attach-link {
  color: var(--accent) !important;
  text-decoration: none;
  font-weight: 500;
}

.eq-attach-link:hover {
  text-decoration: underline;
}

.eq-attach-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-bottom: 0;
}

/* URL field with open button */
.eq-url-field {
  display: flex;
  gap: 6px;
  align-items: center;
}

.eq-url-field input {
  flex: 1;
}

/* Overview enhancements */
.eq-overview-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.eq-overview-section h4 {
  font-size: 12px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

.eq-overview-attachments {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.eq-attach-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.15s;
}

.eq-attach-badge:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.eq-overview-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.eq-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--elevated);
  border: 1px solid var(--accent);
  border-radius: var(--rp);
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.15s;
}

.eq-link-btn:hover {
  background: var(--accent);
  color: #000;
}

@media (max-width: 600px) {
  .eq-custom-row {
    grid-template-columns: 1fr auto;
  }
  .eq-custom-row .eq-custom-val {
    grid-column: 1 / 3;
  }
  .eq-attach-item {
    flex-direction: column;
  }
  .eq-attach-actions {
    flex-direction: row;
    width: 100%;
  }
}

/* ─── from equipment-ux.css ─── */

/* ═══════════════════════════════════════════════════════════════════════
   NEXUS Equipment UX Patches — Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* Per-row print button in list view */
.eq-row-print {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all 0.15s;
  z-index: 5;
}

.eq-row {
  position: relative;
  padding-right: 52px !important;
}

.eq-row:hover .eq-row-print,
.eq-row-print:focus {
  opacity: 1;
  border-color: var(--accent);
  background: var(--nx-gold-mist);
}

.eq-row-print:active {
  transform: translateY(-50%) scale(0.92);
}

.eq-row-head {
  padding-right: 14px !important;
}

.eq-row-head .eq-row-print {
  display: none;
}

/* Grid card print button overlay */
.eq-card-print {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: all 0.15s;
  z-index: 5;
}

.eq-card-print:hover {
  background: var(--nx-gold-aura);
  opacity: 1;
}

.eq-card-print:active {
  transform: scale(0.92);
}

/* Make the detail action bar Zebra button unmistakable */
.eq-zebra-action-btn {
  font-weight: 600;
}

/* Mobile: bigger touch targets */
@media (max-width: 600px) {
  .eq-row-print {
    width: 36px;
    height: 36px;
    right: 8px;
  }
  .eq-row {
    padding-right: 52px !important;
  }
}

/* ─── from equipment-p4.css (Lineage & Dispatch) ─── */

/* ═══════════════════════════════════════════════════════════════════════
   NEXUS Equipment Phase 4 — Lineage & Dispatch
   Styles for:
     • Family tree section in equipment overview
     • Parent picker modal
     • Dispatch sheet (slides up from bottom)
     • Recent dispatch chips on detail view
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── FAMILY SECTION (in overview tab) ─── */
.eq-family-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.eq-family-section h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.eq-family-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--elevated);
  border-radius: var(--rp);
  padding: 10px 12px;
}

.eq-family-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: var(--rs);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
}

.eq-family-row:hover { background: var(--nx-gold-faint); }

.eq-family-row.is-self {
  background: var(--nx-gold-mist);
  font-weight: 600;
  color: var(--accent);
  cursor: default;
}

.eq-family-row.is-self:hover { background: var(--nx-gold-mist); }

.eq-family-indent {
  display: inline-block;
  width: 14px;
  flex-shrink: 0;
  color: var(--faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-align: center;
}

.eq-family-icon { flex-shrink: 0; opacity: 0.85; }

.eq-family-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eq-family-rel {
  font-size: 10px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  background: var(--surface);
  border-radius: 14px;
  flex-shrink: 0;
}

.eq-family-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.eq-family-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.eq-family-actions .eq-btn { font-size: 12px; padding: 6px 12px; }

.eq-family-empty {
  font-size: 12px;
  color: var(--faint);
  padding: 10px 4px;
  text-align: center;
}


/* ─── PARENT/CHILD PICKER MODAL ─── */
.eq-picker-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 950;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.eq-picker-overlay.active { display: flex; }

.eq-picker {
  background: var(--surface);
  border-radius: var(--rp);
  width: min(520px, 100%);
  max-height: min(640px, 90vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.eq-picker-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.eq-picker-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  color: var(--text);
}

.eq-picker-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

.eq-picker-close:hover { color: var(--text); }

.eq-picker-search {
  padding: 12px 14px 0;
}

.eq-picker-search input {
  width: 100%;
  padding: 9px 12px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--rp);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.eq-picker-search input:focus { border-color: var(--accent); }

.eq-picker-rel-row {
  display: flex;
  gap: 6px;
  padding: 12px 14px 0;
  flex-wrap: wrap;
}

.eq-rel-chip {
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
}

.eq-rel-chip:hover { border-color: var(--accent); color: var(--text); }
.eq-rel-chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.eq-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 14px;
}

.eq-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--rs);
  cursor: pointer;
  transition: background .12s;
}

.eq-picker-item:hover { background: var(--elevated); }

.eq-picker-item-icon { font-size: 16px; opacity: 0.85; }

.eq-picker-item-body { flex: 1; min-width: 0; }

.eq-picker-item-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eq-picker-item-sub {
  font-size: 11px;
  color: var(--faint);
  margin-top: 2px;
}

.eq-picker-empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}


/* ─── DISPATCH SHEET (bottom drawer) ─── */
.dispatch-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 960;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.dispatch-overlay.active { display: flex; }

.dispatch-sheet {
  background: var(--surface);
  border-radius: var(--rp) var(--rp) 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
  animation: dispatchSlideUp .22s ease-out;
}

@keyframes dispatchSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.dispatch-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 4px;
}

.dispatch-head {
  padding: 10px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.dispatch-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.dispatch-context {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dispatch-context .ctx-tag {
  background: var(--elevated);
  padding: 2px 8px;
  border-radius: 14px;
  font-size: 11px;
  color: var(--muted);
}

.dispatch-stage {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 18px;
}

/* Stage 1: contractor list */
.dispatch-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--elevated);
  border-radius: var(--rp);
  margin-bottom: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .12s;
}

.dispatch-contact:hover { border-color: var(--accent); }

.dispatch-contact.is-preferred {
  border-color: var(--accent);
  background: var(--nx-gold-faint);
}

.dispatch-contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
  flex-shrink: 0;
}

.dispatch-contact-body { flex: 1; min-width: 0; }

.dispatch-contact-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dispatch-contact-name .preferred-star {
  color: var(--accent);
  font-size: 12px;
}

.dispatch-contact-meta {
  font-size: 11px;
  color: var(--faint);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-contact-methods {
  display: flex;
  gap: 4px;
  font-size: 14px;
}

.dispatch-add-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--elevated);
  border-radius: var(--rp);
  border: 1px dashed var(--border);
  margin-top: 8px;
}

.dispatch-add-contact input {
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rp);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.dispatch-add-contact input:focus { border-color: var(--accent); }

/* Stage 2: method picker */
.dispatch-method-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin: 8px 0 14px;
}

.dispatch-method-btn {
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 8px;
  border-radius: var(--rp);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  transition: all .12s;
}

.dispatch-method-btn:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}

.dispatch-method-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.dispatch-method-btn .method-icon {
  font-size: 22px;
  line-height: 1;
}

/* Stage 3: message editor */
.dispatch-message {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dispatch-message-target {
  font-size: 13px;
  color: var(--muted);
  background: var(--elevated);
  padding: 8px 12px;
  border-radius: var(--rp);
}

.dispatch-message-target b { color: var(--text); }

.dispatch-message textarea {
  width: 100%;
  min-height: 130px;
  padding: 12px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--rp);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}

.dispatch-message textarea:focus { border-color: var(--accent); }

.dispatch-actions {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.dispatch-actions button { flex: 1; }


/* ─── RECENT DISPATCH CHIPS (on overview) ─── */
.eq-dispatch-recent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.eq-dispatch-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--elevated);
  border-radius: var(--rs);
  font-size: 12px;
  color: var(--muted);
}

.eq-dispatch-chip .chip-method {
  font-size: 14px;
  flex-shrink: 0;
}

.eq-dispatch-chip .chip-name {
  color: var(--text);
  font-weight: 500;
}

.eq-dispatch-chip .chip-when {
  color: var(--faint);
  font-size: 11px;
  margin-left: auto;
  flex-shrink: 0;
}

.eq-dispatch-chip .chip-outcome {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 14px;
  background: var(--surface);
}

.eq-dispatch-chip .chip-outcome.outcome-pending {
  background: var(--nx-gold-soft);
  color: var(--amber);
}

.eq-dispatch-chip .chip-outcome.outcome-resolved,
.eq-dispatch-chip .chip-outcome.outcome-scheduled,
.eq-dispatch-chip .chip-outcome.outcome-acknowledged {
  background: rgba(63, 160, 143, 0.15);
  color: var(--green);
}

.eq-dispatch-chip .chip-outcome.outcome-no_response {
  background: var(--nx-red-mist);
  color: var(--red);
}


/* ─── DISPATCH BUTTON on detail actions ─── */
.eq-dispatch-btn {
  background: var(--surface) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
}

.eq-dispatch-btn:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
}


/* ─── MOBILE TWEAKS ─── */
@media (max-width: 480px) {
  .eq-picker { max-height: 95vh; }
  .dispatch-sheet { max-height: 92vh; }
  .dispatch-method-row { grid-template-columns: repeat(2, 1fr); }
  .eq-family-row { font-size: 12px; }
  .eq-family-rel { display: none; }  /* save space */
}


/* ═══════════════════════════════════════════════════════════════════════════
   PART 2: FIXES (formerly equipment-fixes.css)

   Merged in 2026-05-06. These rules were originally in a separate file
   loaded AFTER equipment.css to override base rules. Now consolidated
   into a single file — the cascade order is preserved (these come
   after Part 1) so visual behavior is identical.

   This block uses extensive !important (~216 declarations) because it
   was originally fighting Part 1 rules across a separate file boundary.
   Many !importants are now redundant since both blocks live in the
   same file with deterministic order, but rather than dedup risk-wise
   in this PR, the !importants are preserved verbatim. Future cleanup
   pass can remove them per-selector with testing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   NEXUS Equipment Fixes — Styles
   
   Companion to equipment-fixes.js. Dark amber NEXUS aesthetic throughout.
   Mobile-first, generous tap targets (44px+ for everything interactive).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. CLEAN ACTION BAR ──────────────────────────────────────────────── */

/* CRITICAL: Override the equipment.css mobile rule that uses 100vh.
   On Android Chrome, 100vh is calculated against the LARGEST viewport
   (when address bar is hidden). When the address bar IS visible, the
   modal extends below the viewport and the action bar gets clipped.
   100dvh dynamically tracks the actual visible viewport. */
@media (max-width: 600px) {
  .eq-detail {
    max-height: 100vh !important;        /* fallback */
    max-height: 100dvh !important;       /* modern Chrome/Safari/Firefox */
    height: 100vh !important;            /* fallback */
    height: 100dvh !important;
  }
  /* Ensure body scrolls, not the modal as a whole */
  .eq-detail-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

.eq-actionbar-clean {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  /* Safe-area-aware bottom padding for Android gesture bar / iPhone home indicator */
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  background: rgba(12, 10, 16, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--nx-gold-soft) !important;
  align-items: center;
  justify-content: stretch;
  /* Pin to the bottom of the modal so it stays visible even if body content
     overflows. flex-shrink:0 prevents it from being compressed. */
  flex-shrink: 0 !important;
  position: sticky;
  bottom: 0;
  z-index: 5;
  /* Subtle shadow above so it visually separates from scrolling content */
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
}
.eq-actionbar-btn {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid var(--nx-gold-aura) !important;
  background: rgba(20, 18, 26, 0.6) !important;
  color: var(--accent, var(--accent)) !important;
  font-size: 13px !important;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-actionbar-btn:active {
  transform: scale(.96);
  background: var(--nx-gold-soft) !important;
}
.eq-ab-icon {
  font-size: 18px;
  line-height: 1;
}
.eq-ab-label {
  font-size: 11px;
  letter-spacing: 0.3px;
  line-height: 1;
}
.eq-actionbar-primary {
  background: linear-gradient(135deg, var(--accent, var(--accent)), var(--accent)) !important;
  color: var(--nx-gold-on) !important;
  border-color: var(--accent, var(--accent)) !important;
}
.eq-actionbar-primary .eq-ab-icon,
.eq-actionbar-primary .eq-ab-label { color: var(--nx-gold-on) !important; }
.eq-actionbar-dispatch {
  background: rgba(50, 110, 80, 0.25) !important;
  border-color: rgba(100, 200, 130, 0.5) !important;
  color: #7dd3a0 !important;
}
.eq-actionbar-dispatch .eq-ab-icon,
.eq-actionbar-dispatch .eq-ab-label { color: #7dd3a0 !important; }
.eq-actionbar-dispatch:active {
  background: rgba(100, 200, 130, 0.25) !important;
}

/* Zebra badge — distinct from Print so user knows it's the thermal path */
.eq-actionbar-zebra {
  background: rgba(120, 90, 50, 0.25) !important;
  border-color: var(--nx-gold-line-2) !important;
  color: var(--accent, var(--accent)) !important;
}
.eq-actionbar-zebra .eq-ab-icon,
.eq-actionbar-zebra .eq-ab-label { color: var(--accent, var(--accent)) !important; }
.eq-actionbar-zebra:active {
  background: var(--nx-gold-line) !important;
}

/* ─── More menu (overflow) ────────────────────────────────────────────── */
.eq-actionbar-more-wrap {
  flex: 1 1 0;
  position: relative;
}
.eq-actionbar-more {
  width: 100%;
}
.eq-actionbar-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  max-width: 280px;
  background: rgba(18, 15, 22, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  animation: eqMenuFadeIn .15s ease-out;
}
.eq-actionbar-menu.open { display: flex; flex-direction: column; gap: 2px; }
@keyframes eqMenuFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.eq-actionbar-menu-item {
  text-align: left;
  padding: 11px 14px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text, var(--nx-gold-faint));
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}
.eq-actionbar-menu-item:hover,
.eq-actionbar-menu-item:active {
  background: var(--nx-gold-soft);
}
.eq-actionbar-menu-item.danger { color: var(--red); }
.eq-actionbar-menu-item.danger:active { background: rgba(224, 112, 112, 0.15); }

/* ─── 2. DISPATCH MODAL ────────────────────────────────────────────────── */
.eq-dispatch-modal {
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: eqModalFadeIn .2s ease-out;
}
@keyframes eqModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.eq-dispatch-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eq-dispatch-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: rgba(18, 15, 22, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 18px 18px 0 0;
  padding: 0;
  max-height: 90vh;
  overflow-y: auto;
  animation: eqSlideUp .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes eqSlideUp { from { transform: translateY(20px); } to { transform: translateY(0); } }
@media (min-width: 600px) {
  .eq-dispatch-modal { align-items: center; }
  .eq-dispatch-card { border-radius: 22px; }
}
.eq-dispatch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--nx-gold-mist);
}
.eq-dispatch-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent, var(--accent));
  letter-spacing: 0.3px;
}
.eq-dispatch-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted, var(--muted));
  font-size: 18px;
  cursor: pointer;
}
.eq-dispatch-close:active {
  background: var(--nx-gold-soft);
  color: var(--accent, var(--accent));
}
.eq-dispatch-eq {
  padding: 14px 20px 12px;
  background: var(--nx-gold-tint);
  border-bottom: 1px solid var(--nx-gold-faint);
}
.eq-dispatch-eq-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
}
.eq-dispatch-eq-meta {
  font-size: 12px;
  color: var(--muted, var(--muted));
  margin-top: 2px;
}
.eq-dispatch-body { padding: 18px 20px 20px; }
.eq-dispatch-contractor {
  background: var(--nx-gold-faint);
  border: 1px solid var(--nx-gold-haze);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.eq-dispatch-contractor-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, var(--muted));
  margin-bottom: 6px;
}
.eq-dispatch-contractor-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--accent, var(--accent));
  margin-bottom: 4px;
}
.eq-dispatch-contractor-phone {
  font-size: 15px;
  color: var(--text, var(--nx-gold-faint));
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
}
.eq-dispatch-contractor-no-phone {
  font-size: 12px;
  color: var(--muted, var(--muted));
  font-style: italic;
}
.eq-dispatch-issue-wrap { margin-bottom: 16px; }
.eq-dispatch-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted, var(--muted));
  margin-bottom: 6px;
}
.eq-dispatch-issue,
.eq-dispatch-phone-input,
.eq-dispatch-search {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text, var(--nx-gold-faint));
  font-family: inherit;
  font-size: 14px;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}
.eq-dispatch-issue:focus,
.eq-dispatch-phone-input:focus,
.eq-dispatch-search:focus {
  border-color: var(--accent, var(--accent));
}
.eq-dispatch-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eq-dispatch-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--green), #4ea866);
  color: var(--elevated);
  border: none;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s;
}
.eq-dispatch-call-btn:active {
  transform: scale(.97);
  background: linear-gradient(135deg, #4ea866, #408455);
}
.eq-dispatch-secondary-btn {
  padding: 12px 16px;
  background: transparent;
  color: var(--muted, var(--muted));
  border: 1px solid var(--nx-gold-haze);
  border-radius: 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.eq-dispatch-secondary-btn:active {
  background: var(--nx-gold-mist);
  color: var(--accent, var(--accent));
}
.eq-dispatch-tip {
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted, var(--muted));
  text-align: center;
  line-height: 1.4;
}
.eq-dispatch-picker-header {
  font-size: 12px;
  color: var(--muted, var(--muted));
  margin-bottom: 12px;
  line-height: 1.5;
}
.eq-dispatch-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin: 12px 0 16px;
}
.eq-dispatch-list-item {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: rgba(20, 18, 26, 0.6);
  border: 1px solid var(--nx-gold-soft);
  border-radius: 14px;
  color: var(--text, var(--nx-gold-faint));
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
}
.eq-dispatch-list-item:active {
  background: var(--nx-gold-soft);
  border-color: var(--accent, var(--accent));
}
.eq-dispatch-list-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
  margin-bottom: 3px;
}
.eq-dispatch-list-phone {
  font-size: 12px;
  color: var(--accent, var(--accent));
  font-family: 'JetBrains Mono', monospace;
}
.eq-dispatch-list-no-phone {
  font-size: 11px;
  color: var(--muted, var(--muted));
  font-style: italic;
}
.eq-dispatch-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--muted, var(--muted));
  font-size: 13px;
}

/* ─── 3. MANUAL CARD ──────────────────────────────────────────────────── */
.eq-manual-card {
  background: rgba(20, 18, 26, 0.6);
  border: 1px solid var(--nx-gold-haze);
  border-radius: 18px;
  overflow: hidden;
  margin: 14px 0;
}
.eq-manual-card-thumb {
  width: 100%;
  height: 200px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--nx-gold-mist);
  overflow: hidden;
}
.eq-manual-card-thumb-canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.eq-manual-card-loading {
  color: var(--muted, var(--muted));
  font-size: 12px;
  letter-spacing: 0.3px;
}
.eq-manual-card-thumb-fallback {
  font-size: 64px;
  opacity: 0.3;
}
.eq-manual-card-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.eq-manual-card-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.eq-manual-card-meta { flex: 1; min-width: 0; }
.eq-manual-card-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, var(--nx-gold-faint));
  word-break: break-all;
  line-height: 1.4;
}
.eq-manual-card-pages {
  font-size: 11px;
  color: var(--muted, var(--muted));
  margin-top: 2px;
}
.eq-manual-card-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
}
.eq-manual-card-open-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  background: linear-gradient(135deg, var(--accent, var(--accent)), var(--accent));
  color: var(--nx-gold-on);
  border: none;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s;
}
.eq-manual-card-open-btn:active { transform: scale(.96); }
.eq-manual-card-secondary-btn {
  padding: 11px 16px;
  background: transparent;
  color: var(--muted, var(--muted));
  border: 1px solid var(--nx-gold-haze);
  border-radius: 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.eq-manual-card-secondary-btn:active {
  background: var(--nx-gold-mist);
  color: var(--accent, var(--accent));
}

/* ─── 4. MULTI-VENDOR PARTS ───────────────────────────────────────────── */
/* ─── PARTS / VENDORS — visual cleanup ───────────────────────────
   Before: every part was a card-within-card with VENDORS heading +
   vendor cards inside, inconsistent button counts per row, decorative
   stars without labels. Felt like a maximalist data dump.
   Now: each part is one clean section. Vendors below as table-style
   rows aligned to a 4-column grid (name / price / stock / actions).
   Same column count every row → eye scans cleanly. */
.eq-part {
  background: var(--elevated, var(--nx-gold-on));
  border: 1px solid var(--nx-gold-mist);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: block;
}
.eq-part-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.eq-part-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.eq-part-sub {
  font-size: 11px;
  color: var(--muted, var(--muted));
  margin-top: 3px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.3px;
}
.eq-part-path {
  font-size: 10px;
  color: var(--faint, var(--muted));
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.eq-part-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.eq-part-vendors {
  margin-top: 10px;
  /* Removed dashed border — was visual clutter. Plain background tier
     and a thin gold rule above the row reads cleaner. */
  border-top: 1px solid var(--nx-gold-faint);
  padding-top: 10px;
}
.eq-part-vendors-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  /* Tightened — header was wasting 18px above the actual data. */
}
.eq-part-vendors-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--faint, var(--muted));
  font-weight: 600;
}
.eq-part-add-vendor-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 12px;
  color: var(--accent, var(--accent));
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
}
.eq-part-add-vendor-btn:hover { background: var(--nx-gold-faint); }
.eq-part-add-vendor-btn:active {
  background: var(--nx-gold-soft);
  transform: scale(.95);
}
.eq-part-vendors-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Was 6px gap between cards. Now near-zero gap between table-style
     rows so a part with 4 vendors doesn't sprawl. */
}
.eq-part-vendors-empty {
  font-size: 11px;
  color: var(--muted, var(--muted));
  padding: 8px 0 4px;
}

/* ── Vendor row — one line, clean grid ──
   Was a card-style chip with 3-4 nested rows. Now a single grid row
   with clear columns: name+star / price / stock / action buttons.
   Dense by design. Tap to expand notes (handled in JS).            */
.eq-part-vendor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--nx-highlight-tint);
  transition: background .12s;
}
.eq-part-vendor:last-child { border-bottom: none; }
.eq-part-vendor:hover { background: var(--nx-gold-tint); border-radius: 10px; }
.eq-part-vendor.is-preferred { background: var(--nx-gold-tint); border-left: 2px solid var(--accent,var(--accent)); padding-left: 10px; border-radius: 4px; }

.eq-part-vendor-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eq-part-vendor-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Star is now a tighter "Preferred" badge with a label, not just an
   ambiguous gold star. Eye knows what it means without hovering. */
.eq-part-vendor-star {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent, var(--accent));
  background: var(--nx-gold-mist);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.eq-part-vendor-star::before { content: '★'; font-size: 9px; }
.eq-part-vendor-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, var(--nx-gold-faint));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eq-part-vendor-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 64px;
}
.eq-part-vendor-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--faint, var(--muted));
}
.eq-part-vendor-oem {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.2px;
}
/* Stock badges — green/red proper chips so the eye spots them
   at-a-glance instead of reading body copy. */
.eq-part-vendor-stock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.eq-part-vendor-stock.in {
  color: var(--nx-green, var(--green));
  background: var(--nx-green-soft, rgba(63, 160, 143, 0.12));
}
.eq-part-vendor-stock.in::before { content: '●'; font-size: 8px; color: var(--nx-green, var(--green)); }
.eq-part-vendor-stock.out {
  color: var(--nx-red, var(--red));
  background: var(--nx-red-soft, var(--nx-red-soft));
}
.eq-part-vendor-stock.out::before { content: '●'; font-size: 8px; color: var(--nx-red, var(--red)); }
.eq-part-vendor-checked {
  font-style: normal;
  opacity: 0.7;
  font-size: 10px;
}
.eq-part-vendor-notes {
  font-size: 11px;
  color: var(--muted, var(--muted));
  margin-top: 4px;
  font-style: italic;
  line-height: 1.4;
}

/* Actions — fixed icon button widths so every row has the same column
   alignment regardless of which actions are shown. Order button is
   the primary CTA (filled amber), others are subtle ghosts. */
.eq-part-vendor-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.eq-part-vendor-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nx-highlight-faint);
  border-radius: 10px;
  color: var(--muted, var(--muted));
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
}
.eq-part-vendor-btn:hover {
  background: var(--nx-highlight-tint);
  color: var(--text, var(--nx-gold-faint));
  border-color: var(--nx-highlight-line);
}
.eq-part-vendor-btn.order {
  width: auto;
  height: 28px;
  padding: 0 14px;
  background: var(--accent, var(--accent));
  color: var(--nx-gold-on);
  border-color: var(--accent, var(--accent));
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.3px;
}
.eq-part-vendor-btn.order:hover {
  background: #d4b46e;
  color: var(--nx-gold-on);
  filter: brightness(1.05);
}
.eq-part-vendor-btn:active {
  transform: scale(.94);
}
.eq-part-vendor-btn.remove-btn:hover {
  background: var(--nx-red-soft);
  color: var(--red);
  border-color: var(--nx-red-aura);
}

/* ─── Vendor editor modal ─────────────────────────────────────────────── */
.eq-vendor-modal {
  position: fixed; inset: 0;
  z-index: 2100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: eqModalFadeIn .2s;
}
.eq-vendor-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eq-vendor-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  background: rgba(18, 15, 22, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 18px 18px 0 0;
  animation: eqSlideUp .25s cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 600px) {
  .eq-vendor-modal { align-items: center; }
  .eq-vendor-card { border-radius: 22px; }
}
.eq-vendor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--nx-gold-mist);
}
.eq-vendor-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent, var(--accent));
}
.eq-vendor-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted, var(--muted));
  font-size: 18px;
  cursor: pointer;
}
.eq-vendor-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eq-vendor-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted, var(--muted));
  margin-bottom: 5px;
  margin-top: 0;
  display: block;
}
.eq-vendor-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text, var(--nx-gold-faint));
  font-family: inherit;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.eq-vendor-input:focus {
  border-color: var(--accent, var(--accent));
}
.eq-vendor-row {
  display: flex;
  gap: 10px;
}
.eq-vendor-half { flex: 1; min-width: 0; }
.eq-vendor-actions {
  display: flex;
  gap: 8px;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--nx-gold-faint);
}
.eq-vendor-cancel-btn {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--muted, var(--muted));
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.eq-vendor-save-btn {
  flex: 2;
  padding: 12px;
  background: linear-gradient(135deg, var(--accent, var(--accent)), var(--accent));
  border: none;
  border-radius: 14px;
  color: var(--nx-gold-on);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.eq-vendor-save-btn:active { transform: scale(.97); }

/* ─── 5. EXTRACT FROM MANUAL — Progress modal ─────────────────────────── */
.eq-extract-modal {
  position: fixed; inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: eqModalFadeIn .2s;
}
.eq-extract-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eq-extract-card {
  position: relative;
  width: 92%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgba(18, 15, 22, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 22px;
  animation: eqSlideUp .25s cubic-bezier(.22, 1, .36, 1);
}
.eq-extract-header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--nx-gold-mist);
}
.eq-extract-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent, var(--accent));
  text-align: center;
}
.eq-extract-body {
  padding: 24px 20px;
  min-height: 100px;
}
.eq-extract-step {
  text-align: center;
  font-size: 13px;
  color: var(--text, var(--nx-gold-faint));
  margin-bottom: 18px;
  line-height: 1.5;
}
.eq-extract-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border: 2.5px solid var(--nx-gold-soft);
  border-top-color: var(--accent, var(--accent));
  border-radius: 50%;
  animation: eqSpin 0.9s linear infinite;
}
@keyframes eqSpin { to { transform: rotate(360deg); } }
.eq-extract-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}
.eq-extract-error-icon {
  font-size: 24px;
  color: var(--red);
  flex-shrink: 0;
  line-height: 1;
}
.eq-extract-error-msg {
  font-size: 13px;
  color: var(--text, var(--nx-gold-faint));
  line-height: 1.5;
  word-break: break-word;
}
.eq-extract-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--nx-gold-mist);
}
.eq-extract-success-icon {
  font-size: 28px;
  color: var(--green);
  line-height: 1;
}
.eq-extract-success-count {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
}
.eq-extract-parts-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.eq-extract-part {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--nx-gold-mist);
  border-radius: 14px;
  cursor: pointer;
}
.eq-extract-part input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent, var(--accent));
  flex-shrink: 0;
}
.eq-extract-part-info { flex: 1; min-width: 0; }
.eq-extract-part-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
}
.eq-extract-part-meta {
  font-size: 11px;
  color: var(--muted, var(--muted));
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  word-break: break-word;
}
.eq-extract-actions {
  display: flex;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--nx-gold-faint);
}
.eq-extract-cancel-btn {
  flex: 1;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--muted, var(--muted));
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.eq-extract-save-btn {
  flex: 2;
  padding: 11px;
  background: linear-gradient(135deg, var(--accent, var(--accent)), var(--accent));
  border: none;
  border-radius: 14px;
  color: var(--nx-gold-on);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.eq-extract-save-btn:active { transform: scale(.97); }

/* ─── Light-theme overrides ───────────────────────────────────────────── */
[data-theme="light"] .eq-actionbar-clean { background: rgba(245, 243, 240, 0.92) !important; }
[data-theme="light"] .eq-actionbar-btn { background: rgba(255, 255, 255, 0.7) !important; }
[data-theme="light"] .eq-dispatch-card,
[data-theme="light"] .eq-vendor-card,
[data-theme="light"] .eq-extract-card,
[data-theme="light"] .eq-actionbar-menu { background: rgba(250, 248, 245, 0.97); }

/* ═══════════════════════════════════════════════════════════════════════════
   COLLAPSIBLE PART ACCORDION (v2 parts design)
   
   Each .eq-part is turned into an accordion by equipment-fixes.js:
     • .eq-part-acc-header (button) — always visible, entire row is tap target
     • .eq-part-acc-body — max-height animated (0 ↔ scrollHeight)
   
   Design principles (from NN/G + Mobbin + LogRocket research):
     • Caret icon rotates 180° on expand (not +/- which reads as "add")
     • Entire header is the hit target, not just the icon
     • Collapsed state shows enough info to skip opening (name + price)
     • 250ms ease-in-out animation — smooth but fast
     • No page-level scrolling during expand (keeps user oriented)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override the base .eq-part so it becomes a flex-column accordion container.
   Remove any padding that fought with our header button's own padding. */
.eq-part.eq-part-accordion {
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--nx-gold-soft);
  background: rgba(20, 18, 26, 0.55);
  border-radius: 18px;
  margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}
.eq-part.eq-part-accordion[data-expanded="1"] {
  background: rgba(20, 18, 26, 0.75);
  border-color: var(--nx-gold-line-2);
}

/* The whole header is a button — entire click surface */
.eq-part-acc-header {
  display: block;
  width: 100%;
  padding: 13px 46px 12px 14px;  /* right padding reserves space for ⋯ */
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  color: var(--text, var(--nx-gold-faint));
  -webkit-tap-highlight-color: transparent;
}
.eq-part-acc-header:active {
  background: var(--nx-gold-tint);
}

/* Top row: name + preferred price + caret */
.eq-part-acc-head-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eq-part-acc-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eq-part-acc-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, var(--accent));
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.eq-part-acc-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 14px;
  color: var(--muted, var(--muted));
  transition: transform .22s ease-out, color .15s;
  flex-shrink: 0;
  line-height: 1;
}
.eq-part-accordion[data-expanded="1"] .eq-part-acc-caret {
  transform: rotate(180deg);
  color: var(--accent, var(--accent));
}

/* Meta row below name: chips with OEM, assembly, qty, vendor count */
.eq-part-acc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 5px;
}
.eq-part-acc-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--nx-gold-faint);
  color: var(--muted, var(--muted));
  border-radius: 4px;
  font-size: 10.5px;
  letter-spacing: 0.2px;
}
.eq-part-acc-chip.mono {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent, var(--accent));
  background: var(--nx-gold-mist);
}
.eq-part-acc-vcount {
  background: rgba(100, 180, 220, 0.12);
  color: #7ab8d6;
}

/* Body: collapsible panel with max-height animation */
.eq-part-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s cubic-bezier(.22, 1, .36, 1);
}
.eq-part-acc-body-inner {
  padding: 0 14px 14px;
  border-top: 1px solid var(--nx-gold-mist);
  padding-top: 12px;
  margin-top: 2px;
}

/* Pull ⋯ trigger visually above and override positioning to fit the header */
.eq-part-accordion .ctx-menu-trigger-on-part {
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* Tweak the existing vendor header inside the new collapsible body */
.eq-part-acc-body .eq-part-vendors-header {
  margin-top: 4px;
  margin-bottom: 8px;
}
.eq-part-acc-body .eq-part-vendors-list {
  margin-bottom: 0;
}

/* Legacy .eq-part-vendors (old outer container) — hidden when accordion exists */
.eq-part-accordion > .eq-part-vendors {
  display: none !important;
}

/* Light theme adjustments */
[data-theme="light"] .eq-part.eq-part-accordion {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--nx-gold-line);
}
[data-theme="light"] .eq-part.eq-part-accordion[data-expanded="1"] {
  background: rgba(255, 255, 255, 0.9);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EQUIPMENT DETAIL CLOSE BUTTON (✕) — mobile fix
   
   The default ✕ sits at top:12px right:12px with no background, which on
   mobile Chrome visually collides with the browser's three-dot menu in
   the address bar chrome. Also the tap target was tiny (4x8px padding
   on a 20px font = ~28px tap area) which violates the 44px minimum.
   
   Fix:
     • Larger 40x40 circular button with subtle background
     • Pulled slightly further inset so it doesn't visually touch Chrome's
       controls at the viewport edge
     • Proper tap feedback
     • Respects safe-area-inset-top on devices with notches
   ═══════════════════════════════════════════════════════════════════════════ */
.eq-close {
  position: absolute !important;
  top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  right: 10px !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(20, 18, 26, 0.85) !important;
  border: 1px solid var(--nx-gold-line) !important;
  color: var(--text, var(--nx-gold-faint)) !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease-out;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.eq-close:hover {
  background: var(--nx-gold-soft) !important;
  border-color: var(--nx-gold-line-3) !important;
  color: var(--accent, var(--accent)) !important;
}
.eq-close:active {
  transform: scale(0.9);
  background: var(--nx-gold-line) !important;
}

/* Also shift the detail head's right padding so the title/status pill
   doesn't slide under the ✕ button */
.eq-detail-head {
  padding-right: 58px !important;
}

/* Light theme */
[data-theme="light"] .eq-close {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--nx-gold-on) !important;
  border-color: var(--nx-gold-aura) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   NEXUS Equipment Close Button Fix v1
   
   Problem: The X close button on equipment detail modals was positioned
   `top: 12px; right: 12px` — which on mobile browsers overlaps with
   Chrome's 3-dot menu in the top-right corner. Taps frequently hit the
   browser chrome instead of the X, or vice versa.
   
   Additionally, the tap target was only ~30px (below mobile standard
   44×44px per Apple HIG / Material Design), and the X had no visible
   button affordance — just a thin glyph on transparent background.
   
   Fix:
     • Move the X to the LEFT side of the header — safe from browser chrome
     • Make it a proper 40×40px circle with background + border
     • Keep it inside the flex flow (no more position: absolute)
     • Add min-height 44px to the entire header so the tap zone is guaranteed
     • Add padding-top on the modal so it clears the browser URL bar safely
   
   This applies to all four .eq-close instances (detail, edit, service, part).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override the close button — take it out of absolute positioning */
.eq-close {
  position: static !important;
  top: auto !important;
  right: auto !important;
  
  /* Proper mobile tap target (Apple HIG: 44pt min, Material: 48dp) */
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  
  /* Visual affordance — circle with subtle border */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--nx-gold-faint) !important;
  border: 1px solid var(--nx-gold-line) !important;
  
  /* Typography */
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--muted, var(--muted)) !important;
  
  /* Place it FIRST in the flex order so it sits on the LEFT */
  order: -1 !important;
  flex-shrink: 0 !important;
  
  /* Prevent the tap being eaten by the Chrome URL bar zone */
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease-out !important;
}

.eq-close:active {
  background: var(--nx-gold-haze) !important;
  border-color: var(--accent, var(--accent)) !important;
  color: var(--accent, var(--accent)) !important;
  transform: scale(0.92) !important;
}

.eq-close:hover {
  background: var(--nx-gold-soft) !important;
  color: var(--accent, var(--accent)) !important;
}

/* Ensure the header has enough padding and room — add top-safe-area
   so the whole header clears the browser chrome zone */
.eq-detail-head {
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px 14px !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 60px !important;
}

/* Make sure the status pill doesn't get cramped against the edge */
.eq-detail-status {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Light theme — tweak contrast */
[data-theme="light"] .eq-close {
  background: var(--nx-gold-mist) !important;
  border-color: var(--nx-gold-line-2) !important;
}
[data-theme="light"] .eq-close:active {
  background: var(--nx-gold-aura) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NEXUS Report Issue Button Restyle v1
   
   Problem: The Report Issue button was rendered with a red-tinted outlined
   style that clashed with the clean amber/white aesthetic of PM Logger and
   Login. The red background tint + red text + red border felt alarming,
   like clicking it would delete something.
   
   Fix: Match the neutral card style of the Login button but with a subtle
   amber accent on the icon so it's still visually distinct as the "report
   a problem" action. No red backgrounds, no red borders — just a clean
   dark card with red only on the emoji/alert glyph.
   ═══════════════════════════════════════════════════════════════════════════ */

.pm-public-btn-tertiary {
  /* Override any red-tinted styling inherited from earlier versions */
  background: var(--bg) !important;
  border: 1px solid var(--surface) !important;
  color: #c8c0b0 !important;
}

.pm-public-btn-tertiary .pm-public-btn-title {
  color: var(--nx-text) !important;   /* v299 — was --nx-gold-faint (8% gold), invisible button text on the dark public-scan buttons */
}

.pm-public-btn-tertiary .pm-public-btn-sub {
  color: var(--muted) !important;
}

.pm-public-btn-tertiary:active {
  background: var(--surface) !important;
  border-color: var(--elevated) !important;
  transform: scale(0.98);
}

/* Light theme */
[data-theme="light"] .pm-public-btn-tertiary {
  background: var(--elevated) !important;
  border: 1px solid var(--text) !important;
  color: var(--surface) !important;
}
[data-theme="light"] .pm-public-btn-tertiary .pm-public-btn-title {
  color: var(--surface) !important;
}
[data-theme="light"] .pm-public-btn-tertiary .pm-public-btn-sub {
  color: #6a6a72 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NEXUS Close Button Fix v2 — more aggressive
   
   The v1 fix moved .eq-close to the left side of the header but some
   markup patterns are still placing it in the top-right corner where it
   overlaps Chrome's 3-dot menu. Increase specificity + add extra rules
   to catch all variants.
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-modal .eq-close,
.eq-detail .eq-close,
.eq-detail-head .eq-close,
div.eq-close,
button.eq-close {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--nx-gold-faint) !important;
  border: 1px solid var(--nx-gold-line) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--accent) !important;
  order: -1 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s ease-out !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Call Contractor Button — public scan action card
   
   Used on the public scan page when equipment has a service_phone set
   (either directly on equipment.service_phone or extracted from the
   preferred contractor node). Matches the neutral dark card style of
   Login/Report Issue — just with a phone-icon accent.
   ═══════════════════════════════════════════════════════════════════════════ */

.pm-public-btn-call {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--surface);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.pm-public-btn-call:active {
  background: var(--surface);
  border-color: var(--elevated);
  transform: scale(0.98);
}
.pm-public-btn-call .pm-public-btn-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.pm-public-btn-call .pm-public-btn-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.pm-public-btn-call .pm-public-btn-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-gold-faint);
  line-height: 1.2;
}
.pm-public-btn-call .pm-public-btn-sub {
  font-size: 12px;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.3px;
}

[data-theme="light"] .pm-public-btn-call {
  background: var(--elevated);
  border-color: var(--text);
}
[data-theme="light"] .pm-public-btn-call .pm-public-btn-title {
  color: var(--surface);
}
[data-theme="light"] .pm-public-btn-call .pm-public-btn-sub {
  color: #6a6a72;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Dispatch Sheet — CORRECTED CSS matching actual JS class names
   
   Previous attempt styled the wrong class names. The JS actually uses:
     .dispatch-contact-avatar, .dispatch-contact-body, .is-preferred,
     .preferred-star, .dispatch-contact-methods, .eq-picker-empty,
     .dispatch-add-contact, .dispatch-method-btn, .dispatch-method-row,
     .dispatch-message, .dispatch-message-target
   ═══════════════════════════════════════════════════════════════════════════ */

.dispatch-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.dispatch-overlay.active {
  display: flex;
}

.dispatch-sheet {
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--bg);
  border-top: 1px solid var(--surface);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--nx-gold-faint);
  animation: dispatchSlideUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes dispatchSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.dispatch-handle {
  width: 40px;
  height: 4px;
  background: var(--elevated);
  border-radius: 2px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}

.dispatch-head {
  padding: 8px 20px 14px;
  border-bottom: 1px solid var(--surface);
  flex-shrink: 0;
}

.dispatch-head h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.dispatch-context {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dispatch-context .ctx-tag {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--nx-gold-faint);
  border: 1px solid var(--nx-gold-haze);
  border-radius: 14px;
  color: var(--accent);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dispatch-stage {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
}

/* Contact rows — matches JS output */
.dispatch-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--surface);
  border-radius: 16px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.dispatch-contact:active {
  transform: scale(0.98);
}
.dispatch-contact.is-preferred {
  border-color: var(--nx-gold-line-2);
  background: var(--nx-gold-tint);
}

.dispatch-contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.dispatch-contact-body {
  flex: 1;
  min-width: 0;
}

.dispatch-contact-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-gold-faint);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.preferred-star {
  color: var(--accent);
  font-size: 13px;
}

.dispatch-contact-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-contact-methods {
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 2px;
  flex-shrink: 0;
}

/* Empty state + add contact inline form */
.eq-picker-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.dispatch-add-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--surface);
  border-radius: 14px;
  margin-top: 12px;
}
.dispatch-add-contact input {
  background: #0a0a0f;
  border: 1px solid var(--surface);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--nx-gold-faint);
  font-size: 14px;
  font-family: inherit;
}
.dispatch-add-contact input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Method selection stage */
.dispatch-method-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.dispatch-method-btn {
  padding: 16px 8px;
  background: var(--surface);
  border: 1px solid var(--surface);
  border-radius: 16px;
  cursor: pointer;
  color: var(--nx-gold-faint);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.dispatch-method-btn:active:not(:disabled) {
  transform: scale(0.96);
  background: var(--nx-gold-faint);
  border-color: var(--accent);
  color: var(--accent);
}
.dispatch-method-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Compose stage */
.dispatch-message {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dispatch-message-target {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 10px;
  background: #0a0a0f;
  border: 1px solid var(--surface);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.dispatch-message textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px;
  background: #0a0a0f;
  border: 1px solid var(--surface);
  border-radius: 12px;
  color: var(--nx-gold-faint);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.dispatch-message textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Action bar at bottom of sheet */
.dispatch-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--surface);
  background: var(--bg);
  flex-shrink: 0;
}
.dispatch-actions button {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--elevated);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dispatch-actions button:active {
  transform: scale(0.98);
}
.dispatch-actions .eq-btn-primary,
.dispatch-actions button.primary {
  background: var(--accent);
  color: var(--nx-gold-on);
  border-color: var(--accent);
}
.dispatch-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Light theme */
[data-theme="light"] .dispatch-sheet {
  background: var(--elevated);
  color: var(--surface);
}
[data-theme="light"] .dispatch-head,
[data-theme="light"] .dispatch-actions {
  border-color: var(--text);
  background: var(--elevated);
}
[data-theme="light"] .dispatch-contact,
[data-theme="light"] .dispatch-method-btn,
[data-theme="light"] .dispatch-add-contact {
  background: #f5f5f7;
  border-color: var(--text);
  color: var(--surface);
}
[data-theme="light"] .dispatch-contact-name {
  color: var(--surface);
}
[data-theme="light"] .dispatch-contact-avatar {
  background: var(--text);
}
[data-theme="light"] .dispatch-message textarea,
[data-theme="light"] .dispatch-add-contact input,
[data-theme="light"] .dispatch-message-target {
  background: var(--elevated);
  color: var(--surface);
  border-color: var(--text);
}

@media (min-width: 720px) {
  .dispatch-overlay {
    align-items: center;
  }
  .dispatch-sheet {
    max-height: 80vh;
    border-radius: 24px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Three-dot Overflow Menu — hides destructive actions (Delete) behind a tap
   
   Lives at the end of .eq-detail-actions. Shows just "⋯" by default, 
   expands to a small popup above the button revealing Delete when tapped.
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-overflow-wrap {
  position: relative;
  display: inline-flex;
}

.eq-overflow-btn {
  background: transparent !important;
  border: 1px solid var(--elevated) !important;
  color: var(--muted) !important;
  font-size: 18px !important;
  min-width: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
}
.eq-overflow-btn:active {
  background: var(--nx-gold-faint) !important;
  transform: scale(0.95);
}

.eq-overflow-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--surface);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 100;
  display: none;
  animation: eqOverflowOpen 0.15s ease-out;
}
.eq-overflow-menu.active {
  display: block;
}

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

.eq-overflow-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--nx-gold-faint);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.eq-overflow-item:active {
  background: var(--nx-gold-faint);
}
.eq-overflow-danger {
  color: #f48a80 !important;
}
.eq-overflow-danger:active {
  background: rgba(244, 138, 128, 0.1) !important;
}

[data-theme="light"] .eq-overflow-menu {
  background: var(--elevated);
  border-color: var(--text);
}
[data-theme="light"] .eq-overflow-item {
  color: var(--surface);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Call Service button — replaces the old Dispatch sheet
   
   One-tap action in the equipment detail action bar. Opens the phone
   dialer directly using equipment.service_phone (or fallback to the
   preferred contractor node's phone).
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-call-service-btn {
  /* Stage Z: uniform treatment applied via .eq-detail-actions scope.
     See the "Equipment Detail Action Bar — unified NEXUS treatment"
     block below. Keeping this selector as a no-op so any legacy
     markup that expects it to exist doesn't break. */
}
.eq-call-service-btn:active {
  transform: scale(0.96);
}

[data-theme="light"] .eq-call-service-btn {
  /* Inherit from .eq-detail-actions scope */
}


/* ═══════════════════════════════════════════════════════════════════════════
   Call Confirm Modal — shown before dialing service contact
   
   Small centered card. Icon, contact name, phone number, source label,
   Cancel + Call buttons. Matches the amber/dark NEXUS theme.
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-call-confirm {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.eq-call-confirm.active {
  opacity: 1;
  pointer-events: auto;
}

.eq-call-confirm-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
}

.eq-call-confirm-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg);
  border: 1px solid var(--surface);
  border-radius: 20px;
  padding: 28px 24px 20px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.92);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.eq-call-confirm.active .eq-call-confirm-card {
  transform: scale(1);
}

.eq-call-confirm-icon {
  font-size: 38px;
  margin-bottom: 10px;
  line-height: 1;
}

.eq-call-confirm-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--nx-gold-faint);
  margin-bottom: 8px;
  line-height: 1.3;
}

.eq-call-confirm-phone {
  font-size: 22px;
  color: var(--accent);
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.eq-call-confirm-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.4;
}

.eq-call-confirm-issue-wrap {
  text-align: left;
  margin-bottom: 18px;
}
.eq-call-confirm-issue-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.eq-call-confirm-issue-label .eq-optional-tag {
  opacity: 0.55;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.eq-call-confirm-issue {
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--nx-gold-haze);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--nx-gold-faint);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  outline: none;
  transition: border-color .15s, background .15s;
}
.eq-call-confirm-issue::placeholder {
  color: #6a6456;
  opacity: 0.7;
}
.eq-call-confirm-issue:focus {
  border-color: var(--nx-gold-line-3);
  background: rgba(0, 0, 0, 0.5);
}

.eq-call-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
}

.eq-call-confirm-actions .eq-btn {
  padding: 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, background .15s;
}

/* Disabled Call Now state — dimmed when issue field is empty */
.eq-call-service-btn.is-disabled,
.eq-call-service-btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* Light theme */
[data-theme="light"] .eq-call-confirm-issue {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--surface);
}
[data-theme="light"] .eq-call-confirm-issue::placeholder {
  color: #a8a596;
}
[data-theme="light"] .eq-call-confirm-issue-label {
  color: #6a6456;
}

/* Light theme */
[data-theme="light"] .eq-call-confirm-card {
  background: var(--elevated);
  border-color: var(--text);
}
[data-theme="light"] .eq-call-confirm-title {
  color: var(--surface);
}
[data-theme="light"] .eq-call-confirm-phone {
  color: #a8852a;
}
[data-theme="light"] .eq-call-confirm-meta {
  color: #6a6a72;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Equipment Detail Action Bar — unified NEXUS treatment (Stage Z)

   Five equal buttons with subtle amber surface, lucide icons above their
   labels, friendly readable sizing. No single button takes over visually;
   the user picks by reading, not by visual priority. Horizontal scroll
   only engages on very narrow phones.

   Replaces the previous mix of yellow-filled "Call Service" + outline
   rest — the old variant had three different button treatments fighting
   for attention and "Log" got cut off below 380px.
   ═══════════════════════════════════════════════════════════════════════════ */

.eq-detail-actions {
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
  gap: 6px !important;
  justify-content: stretch !important;
  align-items: stretch;
  background: var(--surface);
  border-top: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eq-detail-actions::-webkit-scrollbar { display: none; }

.eq-detail-actions .eq-btn {
  flex: 1 1 0 !important;
  min-width: 62px;
  padding: 10px 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  min-height: 56px;
  white-space: nowrap;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 16px !important;
  background: var(--nx-gold-faint) !important;
  color: var(--text) !important;
  border: 1px solid var(--nx-gold-line) !important;
  cursor: pointer;
  font-family: inherit !important;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.eq-detail-actions .eq-btn:active {
  background: var(--nx-gold-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: scale(0.97);
}

/* Icon glyph sits above its label; larger than the text */
.eq-action-icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
  filter: grayscale(0.1);
}

/* Call Service — identical styling to its siblings.
   (The previous yellow-fill was visually dominant and made the bar
    look unbalanced. If you want to draw attention to it, the amber
    border on press is enough.) */
.eq-detail-actions .eq-call-service-btn {
  flex: 1 1 0 !important;
  background: var(--nx-gold-faint) !important;
  color: var(--text) !important;
  border: 1px solid var(--nx-gold-line) !important;
  font-weight: 500 !important;
}
.eq-detail-actions .eq-call-service-btn:active {
  background: var(--nx-gold-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: scale(0.97);
}

/* Overflow "⋯" stays square and visually secondary */
.eq-detail-actions .eq-overflow-wrap {
  flex: 0 0 auto !important;
}
.eq-detail-actions .eq-overflow-btn {
  width: 50px !important;
  min-width: 50px !important;
  padding: 10px 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Very narrow screens — slightly tighter but still readable */
@media (max-width: 360px) {
  .eq-detail-actions {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    gap: 4px !important;
  }
  .eq-detail-actions .eq-btn {
    font-size: 11px !important;
    padding: 8px 4px !important;
    min-width: 56px;
  }
  .eq-action-icon { font-size: 16px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Public Scan — Button aesthetic overhaul
   
   Unifies public scan buttons with the equipment action bar aesthetic:
     - Amber gold for primary action (PM Logger)
     - Dark neutral cards for secondary actions (Login, Call, Report)
     - No red, no pure white against dark background
     - Subtle borders, consistent padding
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base button override — higher specificity wins over equipment-public-pm.css */
.public-scan-actions .pm-public-btn,
.pm-public-actions .pm-public-btn {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  border: 1px solid !important;
  font-family: inherit !important;
  text-align: left !important;
  width: 100% !important;
  transition: all .15s !important;
  -webkit-tap-highlight-color: transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* PM Logger — primary amber gold */
.public-scan-actions .pm-public-btn-primary,
.pm-public-actions .pm-public-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent)) !important;
  border-color: var(--accent) !important;
  color: var(--nx-gold-on) !important;
}
.public-scan-actions .pm-public-btn-primary .pm-public-btn-title,
.pm-public-actions .pm-public-btn-primary .pm-public-btn-title {
  color: var(--nx-gold-on) !important;
}
.public-scan-actions .pm-public-btn-primary .pm-public-btn-sub,
.pm-public-actions .pm-public-btn-primary .pm-public-btn-sub {
  color: rgba(26, 20, 8, 0.7) !important;
}

/* Login — dark neutral card (was white, too bright for dark theme) */
.public-scan-actions .pm-public-btn-secondary,
.pm-public-actions .pm-public-btn-secondary {
  background: var(--bg) !important;
  border-color: var(--surface) !important;
  color: var(--nx-text) !important;   /* v299 — was --nx-gold-faint (8% gold), invisible button text on the dark public-scan buttons */
}
.public-scan-actions .pm-public-btn-secondary .pm-public-btn-title,
.pm-public-actions .pm-public-btn-secondary .pm-public-btn-title {
  color: var(--nx-text) !important;   /* v299 — was --nx-gold-faint (8% gold), invisible button text on the dark public-scan buttons */
}
.public-scan-actions .pm-public-btn-secondary .pm-public-btn-sub,
.pm-public-actions .pm-public-btn-secondary .pm-public-btn-sub {
  color: var(--muted) !important;
}

/* Call Contractor — dark neutral, phone icon tells the story */
.public-scan-actions .pm-public-btn-call,
.pm-public-actions .pm-public-btn-call {
  background: var(--bg) !important;
  border-color: var(--surface) !important;
  color: var(--nx-text) !important;   /* v299 — was --nx-gold-faint (8% gold), invisible button text on the dark public-scan buttons */
}
.public-scan-actions .pm-public-btn-call .pm-public-btn-title,
.pm-public-actions .pm-public-btn-call .pm-public-btn-title {
  color: var(--nx-text) !important;   /* v299 — was --nx-gold-faint (8% gold), invisible button text on the dark public-scan buttons */
}
.public-scan-actions .pm-public-btn-call .pm-public-btn-sub,
.pm-public-actions .pm-public-btn-call .pm-public-btn-sub {
  color: var(--muted) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.3px !important;
}

/* Report Issue — dark neutral, NO red tint */
.public-scan-actions .pm-public-btn-tertiary,
.pm-public-actions .pm-public-btn-tertiary {
  background: var(--bg) !important;
  border-color: var(--surface) !important;
  color: var(--nx-text) !important;   /* v299 — was --nx-gold-faint (8% gold), invisible button text on the dark public-scan buttons */
}
.public-scan-actions .pm-public-btn-tertiary .pm-public-btn-title,
.pm-public-actions .pm-public-btn-tertiary .pm-public-btn-title {
  color: var(--nx-text) !important;   /* v299 — was --nx-gold-faint (8% gold), invisible button text on the dark public-scan buttons */
}
.public-scan-actions .pm-public-btn-tertiary .pm-public-btn-sub,
.pm-public-actions .pm-public-btn-tertiary .pm-public-btn-sub {
  color: var(--muted) !important;
}

/* Shared press state */
.public-scan-actions .pm-public-btn:active,
.pm-public-actions .pm-public-btn:active {
  transform: scale(0.98);
  filter: brightness(1.1);
}
.public-scan-actions .pm-public-btn-secondary:active,
.public-scan-actions .pm-public-btn-call:active,
.public-scan-actions .pm-public-btn-tertiary:active,
.pm-public-actions .pm-public-btn-secondary:active,
.pm-public-actions .pm-public-btn-call:active,
.pm-public-actions .pm-public-btn-tertiary:active {
  background: var(--surface) !important;
  border-color: var(--elevated) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Public Scan — iPhone scroll fix
   
   Problem: iPhone Safari's dynamic viewport (URL bar collapses on scroll)
   interacts badly with `min-height: 100vh` — content below the initial
   viewport becomes unreachable because body/html aren't scrollable.
   
   Fix:
     - Use min-height: 100% instead of 100vh on the container
     - Ensure html, body scroll natively with -webkit-overflow-scrolling
     - Add safe-area-inset-bottom padding for iPhone notch/home indicator
     - Use 100dvh (dynamic viewport) where supported as fallback
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  height: auto !important;
  min-height: 100%;
}

.public-scan-container {
  min-height: 100vh !important;
  min-height: 100dvh !important; /* iOS 15.4+ — respects dynamic browser chrome */
  height: auto !important;
  overflow: visible !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
}

.public-scan-body {
  overflow: visible !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
}

/* Make sure the footer has clearance and the page has room to breathe */
.public-scan-footer {
  margin-top: 30px !important;
  padding-bottom: env(safe-area-inset-bottom, 20px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PART 3: CONTEXT MENU (formerly equipment-context-menu.css)

   Merged in 2026-05-06. Feature-scoped styles for the long-press
   context menu on equipment cards. Originally loaded as a separate
   <link> in index.html; now inlined here. Behavior preserved exactly:
   the JS that creates the menu (equipment-context-menu.js) loads
   dynamically on first long-press, and now finds its styles already
   in the cascade rather than waiting for a separate file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   NEXUS Context Menu System — Styles
   
   Companion to equipment-context-menu.js. Dark amber NEXUS aesthetic.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ⋯ TRIGGER BUTTON ────────────────────────────────────────────────── */

.ctx-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(20, 18, 26, 0.7);
  border: 1px solid var(--nx-gold-soft);
  border-radius: 50%;
  color: var(--accent, var(--accent));
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s;
  padding: 0;
}
.ctx-menu-trigger:active {
  background: var(--nx-gold-line);
  transform: scale(.92);
}
.ctx-menu-trigger-dots {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1;
  margin-top: -4px; /* visual centering of the dots */
}

/* On equipment grid cards — top-right corner overlay */
.ctx-menu-trigger-on-card {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--nx-highlight-mid);
  width: 32px;
  height: 32px;
}

/* On part rows / inline contexts — smaller */
.ctx-menu-trigger-inline {
  width: 32px;
  height: 32px;
  margin-left: 4px;
}
.ctx-menu-trigger-inline .ctx-menu-trigger-dots {
  font-size: 16px;
  margin-top: -2px;
}

/* On part cards — top-right corner overlay (replaces inline trigger) */
.ctx-menu-trigger-on-part {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: var(--nx-highlight-line);
}
.ctx-menu-trigger-on-part .ctx-menu-trigger-dots {
  font-size: 15px;
  margin-top: -3px;
}
/* Push the part name down so it doesn't collide with the absolute ⋯ */
.eq-part .eq-part-main { padding-right: 38px; }

/* ─── ⋯ POPUP MENU ────────────────────────────────────────────────────── */

.ctx-menu {
  position: fixed;
  min-width: 220px;
  max-width: 280px;
  background: rgba(18, 15, 22, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-4px) scale(.96);
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.ctx-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 11px 14px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text, var(--nx-gold-faint));
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.ctx-menu-item:active {
  background: var(--nx-gold-soft);
}
.ctx-menu-item.danger {
  color: var(--red);
  border-top: 1px solid var(--nx-gold-mist);
  margin-top: 4px;
  padding-top: 13px;
}
.ctx-menu-item.danger:active {
  background: rgba(224, 112, 112, 0.18);
}
.ctx-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}
.ctx-menu-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── DELETE CONFIRMATION MODAL ───────────────────────────────────────── */

.ctx-confirm-modal {
  position: fixed; inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: ctxFadeIn .2s ease-out;
}
@keyframes ctxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ctx-confirm-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ctx-confirm-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: rgba(18, 15, 22, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(224, 112, 112, 0.35);
  border-radius: 22px;
  padding: 24px 22px 18px;
  text-align: center;
  animation: ctxScaleIn .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ctxScaleIn {
  from { transform: scale(.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.ctx-confirm-icon {
  font-size: 36px;
  margin-bottom: 10px;
  line-height: 1;
}
.ctx-confirm-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, var(--nx-gold-faint));
  margin-bottom: 6px;
}
.ctx-confirm-name {
  font-size: 14px;
  color: var(--accent, var(--accent));
  font-weight: 600;
  padding: 6px 12px;
  background: var(--nx-gold-mist);
  border-radius: 12px;
  margin: 0 auto 14px;
  max-width: 100%;
  word-break: break-word;
}
.ctx-confirm-msg {
  font-size: 12.5px;
  color: var(--muted, var(--muted));
  line-height: 1.5;
  margin-bottom: 16px;
}
.ctx-confirm-msg strong {
  color: var(--accent, var(--accent));
  font-weight: 600;
}
.ctx-confirm-reason-wrap {
  text-align: left;
  margin-bottom: 18px;
}
.ctx-confirm-reason-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, var(--muted));
  margin-bottom: 6px;
}
.ctx-confirm-reason {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text, var(--nx-gold-faint));
  font-family: inherit;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.ctx-confirm-reason:focus { border-color: var(--accent, var(--accent)); }
.ctx-confirm-actions {
  display: flex;
  gap: 8px;
}
.ctx-confirm-cancel,
.ctx-confirm-delete {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ctx-confirm-cancel {
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--muted, var(--muted));
}
.ctx-confirm-cancel:active { background: var(--nx-gold-faint); }
.ctx-confirm-delete {
  background: linear-gradient(135deg, var(--red), var(--red));
  border: none;
  color: white;
}
.ctx-confirm-delete:active { transform: scale(.97); }
.ctx-confirm-delete:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ─── AUDIT LOG MODAL ─────────────────────────────────────────────────── */

.ctx-audit-modal {
  position: fixed; inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: ctxFadeIn .2s ease-out;
}
.ctx-audit-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ctx-audit-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  height: 88vh;
  height: 88dvh;
  display: flex;
  flex-direction: column;
  background: rgba(18, 15, 22, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 18px 18px 0 0;
  animation: ctxSlideUp .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ctxSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (min-width: 600px) {
  .ctx-audit-modal { align-items: center; }
  .ctx-audit-card { border-radius: 22px; height: 80vh; height: 80dvh; }
}
.ctx-audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--nx-gold-mist);
  flex-shrink: 0;
}
.ctx-audit-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent, var(--accent));
}
.ctx-audit-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted, var(--muted));
  font-size: 18px;
  cursor: pointer;
}
.ctx-audit-close:active { background: var(--nx-gold-soft); }
.ctx-audit-subject {
  padding: 10px 20px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
  background: var(--nx-gold-tint);
  border-bottom: 1px solid var(--nx-gold-faint);
  flex-shrink: 0;
  word-break: break-word;
}
.ctx-audit-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.ctx-audit-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted, var(--muted));
  font-size: 13px;
  font-style: italic;
}

.ctx-audit-event {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(20, 18, 26, 0.6);
  border: 1px solid var(--nx-gold-mist);
  border-radius: 16px;
  border-left: 3px solid var(--nx-gold-aura);
}
.ctx-audit-event.create  { border-left-color: var(--green); }
.ctx-audit-event.delete  { border-left-color: var(--red); }
.ctx-audit-event.dispatch { border-left-color: var(--blue); }
.ctx-audit-event.service { border-left-color: var(--accent, var(--accent)); }
.ctx-audit-event.ai      { border-left-color: var(--purple); }
.ctx-audit-event.ticket  { border-left-color: var(--accent); }
.ctx-audit-event.log     { border-left-color: var(--nx-gold-line-2); opacity: 0.85; }

.ctx-audit-event-icon {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.ctx-audit-event-body { flex: 1; min-width: 0; }
.ctx-audit-event-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
  margin-bottom: 3px;
}
.ctx-audit-event-detail {
  font-size: 12px;
  color: var(--text, var(--nx-gold-faint));
  opacity: 0.85;
  line-height: 1.4;
  margin-bottom: 4px;
  word-break: break-word;
}
.ctx-audit-event-meta {
  font-size: 10.5px;
  color: var(--muted, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ─── LOG → DELETED ITEMS ─────────────────────────────────────────────── */

.feed-chip.ctx-deleted-chip {
  border-color: rgba(224, 112, 112, 0.3);
}
.feed-chip.ctx-deleted-chip.active {
  background: rgba(224, 112, 112, 0.18);
  color: var(--red);
  border-color: rgba(224, 112, 112, 0.5);
}

.ctx-feed-search-wrap {
  padding: 10px 14px 4px;
}
.ctx-feed-search {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--nx-gold-haze);
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--text, var(--nx-gold-faint));
  font-family: inherit;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.ctx-feed-search:focus { border-color: var(--accent, var(--accent)); }
.ctx-feed-search::placeholder { color: var(--muted, var(--muted)); }

.ctx-deleted-loading,
.ctx-deleted-empty,
.ctx-deleted-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted, var(--muted));
  font-size: 13px;
  font-style: italic;
}
.ctx-deleted-error { color: var(--red); }

.ctx-deleted-row {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 14px 8px;
  background: rgba(20, 18, 26, 0.6);
  border: 1px solid rgba(224, 112, 112, 0.18);
  border-left: 3px solid var(--red);
  border-radius: 16px;
}
.ctx-deleted-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}
.ctx-deleted-body { flex: 1; min-width: 0; }
.ctx-deleted-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
  word-break: break-word;
}
.ctx-deleted-meta {
  font-size: 11px;
  color: var(--muted, var(--muted));
  margin-top: 2px;
}
.ctx-deleted-type {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(224, 112, 112, 0.18);
  color: var(--red);
  border-radius: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  margin-right: 4px;
}
.ctx-deleted-when {
  font-size: 10.5px;
  color: var(--muted, var(--muted));
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ctx-deleted-restore-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  background: rgba(92, 179, 119, 0.15);
  border: 1px solid rgba(92, 179, 119, 0.4);
  border-radius: 12px;
  color: var(--green);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ctx-deleted-restore-btn:active {
  background: rgba(92, 179, 119, 0.3);
  transform: scale(.95);
}

/* ─── Light-theme overrides ───────────────────────────────────────────── */
[data-theme="light"] .ctx-menu,
[data-theme="light"] .ctx-confirm-card,
[data-theme="light"] .ctx-audit-card { background: rgba(250, 248, 245, 0.97); }
[data-theme="light"] .ctx-menu-trigger { background: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .ctx-menu-trigger-on-card {
  background: rgba(0, 0, 0, 0.55);
  color: white;
}

/* ─── PRINT EVERYTHING button on Overview tab ─────────────────────────── */
.eq-print-everything-wrap {
  margin: 0 0 18px 0;
}
.eq-print-everything-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--nx-gold-haze), var(--nx-gold-faint));
  border: 1.5px solid var(--nx-gold-line-2);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.eq-print-everything-btn:active {
  transform: scale(.98);
  background: linear-gradient(135deg, var(--nx-gold-aura), var(--nx-gold-soft));
  border-color: var(--accent, var(--accent));
}
.eq-pe-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}
.eq-pe-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eq-pe-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent, var(--accent));
  letter-spacing: 0.3px;
}
.eq-pe-sub {
  font-size: 11px;
  color: var(--muted, var(--muted));
  line-height: 1.3;
}
.eq-pe-arrow {
  color: var(--accent, var(--accent));
  font-size: 20px;
  font-weight: 600;
  opacity: 0.7;
}
[data-theme="light"] .eq-print-everything-btn {
  background: linear-gradient(135deg, var(--nx-gold-soft), var(--nx-gold-tint));
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE DETAIL MODAL
   
   Opens when a user taps any timeline card. Shows full work description +
   photos/PDF/signature from the linked pm_log (if contractor submitted via QR).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Clickable timeline card — subtle hover lift to signal interactivity */
.eq-timeline-clickable {
  cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.eq-timeline-clickable:active {
  transform: scale(.99);
}
.eq-timeline-clickable:hover {
  border-color: var(--nx-gold-line-2) !important;
}

.eq-tl-detail-modal {
  position: fixed; inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: ctxFadeIn .2s ease-out;
}
.eq-tl-detail-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eq-tl-detail-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: rgba(18, 15, 22, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 18px 18px 0 0;
  animation: ctxSlideUp .25s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}
@media (min-width: 600px) {
  .eq-tl-detail-modal { align-items: center; }
  .eq-tl-detail-card { border-radius: 22px; max-height: 85vh; }
}
.eq-tl-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--nx-gold-mist);
  flex-shrink: 0;
}
.eq-tl-detail-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent, var(--accent));
}
.eq-tl-detail-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted, var(--muted));
  font-size: 18px;
  cursor: pointer;
}
.eq-tl-detail-close:active {
  background: var(--nx-gold-soft);
}
.eq-tl-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  -webkit-overflow-scrolling: touch;
}
.eq-tl-detail-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--red);
  font-size: 13px;
}

/* Hero: event type pill + date */
.eq-tl-detail-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--nx-gold-mist);
}
.eq-tl-detail-type {
  padding: 4px 12px;
  background: var(--nx-gold-haze);
  color: var(--accent, var(--accent));
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.eq-tl-detail-date {
  font-size: 13.5px;
  color: var(--text, var(--nx-gold-faint));
  font-weight: 500;
}
.eq-tl-detail-source {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted, var(--muted));
  background: rgba(100, 180, 130, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* Sections */
.eq-tl-detail-section {
  margin-bottom: 16px;
}
.eq-tl-detail-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, var(--muted));
  font-weight: 600;
  margin-bottom: 6px;
}
.eq-tl-detail-text {
  font-size: 13px;
  color: var(--text, var(--nx-gold-faint));
  line-height: 1.55;
  white-space: pre-wrap;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border-left: 3px solid var(--nx-gold-line-2);
  word-break: break-word;
}

/* Contractor block */
.eq-tl-detail-contractor {
  padding: 12px 14px;
  background: var(--nx-gold-faint);
  border-radius: 14px;
}
.eq-tl-detail-contractor-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, var(--nx-gold-faint));
  margin-bottom: 8px;
}
.eq-tl-detail-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  margin-right: 6px;
  margin-top: 4px;
  background: var(--nx-gold-soft);
  border: 1px solid var(--nx-gold-aura);
  border-radius: 12px;
  color: var(--accent, var(--accent));
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: background .12s;
}
.eq-tl-detail-contact-btn:active {
  background: var(--nx-gold-aura);
  transform: scale(.96);
}

/* Stats grid (cost, next service, downtime) */
.eq-tl-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}
.eq-tl-detail-stat {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  text-align: center;
}
.eq-tl-detail-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, var(--muted));
  margin-bottom: 3px;
}
.eq-tl-detail-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent, var(--accent));
  font-family: 'JetBrains Mono', monospace;
}

/* Photos grid */
.eq-tl-detail-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
}
.eq-tl-detail-photo-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--nx-gold-haze);
  transition: transform .12s, border-color .12s;
}
.eq-tl-detail-photo-link:active {
  transform: scale(.96);
  border-color: var(--accent, var(--accent));
}
.eq-tl-detail-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* PDF button */
.eq-tl-detail-pdf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--nx-gold-haze), var(--nx-gold-mist));
  border: 1px solid var(--nx-gold-line-2);
  border-radius: 16px;
  color: var(--accent, var(--accent));
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: all .15s;
}
.eq-tl-detail-pdf-btn:active {
  background: var(--nx-gold-aura);
  transform: scale(.98);
}

/* Signature — shown on white background since the canvas strokes are dark */
.eq-tl-detail-signature {
  display: block;
  padding: 10px;
  background: white;
  border-radius: 12px;
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

/* Metadata footer */
.eq-tl-detail-metadata {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--nx-gold-mist);
  font-size: 10.5px;
  color: var(--muted, var(--muted));
  line-height: 1.6;
}
.eq-tl-detail-metadata div { margin-top: 2px; }

/* Light theme */
[data-theme="light"] .eq-tl-detail-card {
  background: rgba(250, 248, 245, 0.98);
}
[data-theme="light"] .eq-tl-detail-text {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .eq-tl-detail-stat {
  background: rgba(0, 0, 0, 0.04);
}


/* ═══════════════════════════════════════════════════════════════════
   ISSUE TRACKER OVERLAY  +  BULK OPERATIONS
   ═══════════════════════════════════════════════════════════════════
   Mirrors the visual language of the ordering pane's order detail and
   vendor detail overlays. Card-stack body, sticky bottom CTA, gold +
   amber accents for state, mono kicker labels.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Issue tracker overlay shell ──────────────────────────────────── */

.eq-itracker-overlay {
  position: fixed;
  inset: 0;
  /* Above the equipment detail modal (.eq-modal, z 1000) — at 220 the
     tracker opened BEHIND the detail and "Report Issue" looked dead. */
  z-index: 2100;
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  animation: eq-itracker-in 220ms ease-out;
  overflow: hidden;
}
@keyframes eq-itracker-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.eq-itracker-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-surface-1);
  flex-shrink: 0;
}
.eq-itracker-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-itracker-close:hover {
  background: var(--nx-gold-mist);
  color: var(--nx-gold);
}
.eq-itracker-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-itracker-vendor {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-itracker-id {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  margin-top: 2px;
  text-transform: uppercase;
}

.eq-itracker-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 110px;
}

.eq-itracker-section-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin: 8px 4px 10px;
}
.eq-itracker-section-faded {
  color: var(--nx-faintest);
  margin-top: 22px;
}

.eq-itracker-loading,
.eq-itracker-empty {
  padding: 36px 24px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  color: var(--nx-faint);
}
.eq-itracker-empty-title {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-text);
  margin-bottom: 8px;
}
.eq-itracker-empty-msg {
  font-size: 13.5px;
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ─── Issue card ──────────────────────────────────────────────────── */

.eq-itracker-issue-card {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: opacity var(--nx-press);
}
.eq-itracker-issue-card.is-repaired {
  opacity: 0.6;
  background: transparent;
  border-style: dashed;
}

.eq-itracker-issue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.eq-itracker-issue-title {
  flex: 1 1 auto;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  line-height: 1.3;
}
.eq-itracker-issue-when {
  flex-shrink: 0;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.8px;
  color: var(--nx-faintest);
  text-transform: uppercase;
}
.eq-itracker-issue-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  color: var(--nx-faint);
  line-height: 1.5;
  margin-bottom: 10px;
}

.eq-itracker-contractor,
.eq-itracker-eta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--nx-text);
  margin-right: 6px;
  margin-bottom: 8px;
}
.eq-itracker-contractor svg,
.eq-itracker-eta svg {
  color: var(--nx-gold);
}
.eq-itracker-eta {
  background: rgba(76, 122, 138, 0.12);
  border-color: rgba(76, 122, 138, 0.35);
  color: #4c7a8a;
}
.eq-itracker-eta svg { color: #4c7a8a; }
[data-theme="light"] .eq-itracker-eta {
  background: rgba(60, 102, 117, 0.1);
  color: #3c6675;
}
[data-theme="light"] .eq-itracker-eta svg { color: #3c6675; }

/* ─── Inline timeline (5-step horizontal progress) ─────────────────── */

.eq-itracker-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  padding: 14px 0 8px;
  margin-top: 6px;
}
.eq-itracker-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  text-align: center;
  width: 60px;
}
.eq-itracker-tl-marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--nx-gold-line);
  background: var(--nx-bg);
  color: var(--nx-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--nx-press), border-color var(--nx-press), transform var(--nx-press);
}
.eq-itracker-tl-step.is-reached .eq-itracker-tl-marker {
  background: var(--nx-gold);
  border-color: var(--nx-gold);
  color: var(--nx-bg);
}
[data-theme="light"] .eq-itracker-tl-step.is-reached .eq-itracker-tl-marker {
  background: var(--nx-gold-strong, var(--nx-gold));
  border-color: var(--nx-gold-strong, var(--nx-gold));
  color: #fff;
}
.eq-itracker-tl-step.is-current .eq-itracker-tl-marker {
  box-shadow: 0 0 0 4px var(--nx-gold-mist);
  transform: scale(1.05);
}
.eq-itracker-tl-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faintest);
  white-space: nowrap;
}
.eq-itracker-tl-step.is-reached .eq-itracker-tl-label { color: var(--nx-text); }
.eq-itracker-tl-step.is-current .eq-itracker-tl-label {
  color: var(--nx-gold);
  font-weight: 600;
}
.eq-itracker-tl-ts {
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px;
  color: var(--nx-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.eq-itracker-tl-bar {
  flex: 1 1 auto;
  height: 2px;
  background: var(--nx-gold-line);
  margin: 10px 0 0 0;
  border-radius: 1px;
  min-width: 6px;
  transition: background var(--nx-press);
}
.eq-itracker-tl-bar.is-reached { background: var(--nx-gold); }
[data-theme="light"] .eq-itracker-tl-bar.is-reached {
  background: var(--nx-gold-strong, var(--nx-gold));
}

/* Side branch tag for "awaiting parts" — sits below the timeline. */
.eq-itracker-side-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin-top: 4px;
  background: rgba(214, 145, 46, 0.1);
  border: 1px dashed rgba(214, 145, 46, 0.4);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: #d6912e;
}
[data-theme="light"] .eq-itracker-side-tag {
  background: rgba(196, 129, 31, 0.08);
  border-color: rgba(196, 129, 31, 0.45);
  color: #c4811f;
}

/* ─── Action buttons row ──────────────────────────────────────────── */

.eq-itracker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.eq-itracker-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: var(--nx-gold-soft, var(--nx-gold-mist));
  color: var(--nx-text);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-itracker-act-btn:hover {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}
.eq-itracker-act-btn:active { transform: scale(0.98); }

.eq-itracker-act-advance {
  /* The primary advance button stands out a bit more — solid gold. */
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  border-color: var(--nx-gold);
  color: var(--nx-bg);
  font-weight: 600;
}
[data-theme="light"] .eq-itracker-act-advance { color: #fff; }
.eq-itracker-act-advance:hover { filter: brightness(1.05); }

.eq-itracker-act-email,
.eq-itracker-act-eta,
.eq-itracker-act-parts {
  /* Secondary actions — gold-soft, less weight than advance. */
}

/* ─── Sticky footer ──────────────────────────────────────────────── */

.eq-itracker-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--nx-bg) 75%, transparent);
  pointer-events: none;
  flex-shrink: 0;
}
.eq-itracker-action {
  pointer-events: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform var(--nx-press), filter var(--nx-press), box-shadow var(--nx-press);
  border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.eq-itracker-action-primary {
  background: linear-gradient(135deg, var(--nx-gold) 0%, var(--nx-gold-strong, var(--nx-gold)) 100%);
  color: var(--nx-bg);
  border-color: var(--nx-gold-strong, var(--nx-gold));
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
[data-theme="light"] .eq-itracker-action-primary { color: #fff; }
.eq-itracker-action-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.eq-itracker-action-primary:active { transform: scale(0.98); }


/* ═══ BULK OPERATIONS — multi-select toolbar + sheets ══════════════ */

/* Bottom-pinned toolbar that appears when entering bulk mode. */
.eq-bulk-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));   /* clears bottom-nav */
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--nx-surface-2);
  border-top: 1px solid var(--nx-gold-line);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
  animation: eq-bulk-tb-in 220ms ease-out;
}
@keyframes eq-bulk-tb-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.eq-bulk-toolbar-count {
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--nx-faint);
}
.eq-bulk-toolbar-count strong {
  color: var(--nx-gold);
  font-size: 17px;
  margin-right: 4px;
}
.eq-bulk-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.eq-bulk-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press), color var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-bulk-btn:active { transform: scale(0.98); }
.eq-bulk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.eq-bulk-btn-secondary {
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
}
.eq-bulk-btn-secondary:hover:not(:disabled) {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}
.eq-bulk-btn-cancel {
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-faint);
}
.eq-bulk-btn-cancel:hover {
  background: var(--nx-surface-2);
  color: var(--nx-text);
}

/* Selected row visual treatment. */
body.eq-bulk-mode [data-eq-id] {
  position: relative;
  cursor: pointer;
}
body.eq-bulk-mode [data-eq-id].is-selected {
  background: var(--nx-gold-mist) !important;
  border-color: var(--nx-gold) !important;
}
body.eq-bulk-mode [data-eq-id].is-selected::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nx-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Bulk-action bottom sheets (contractor pick + PM date). */
.eq-bulk-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: eq-bulk-sheet-fade 200ms ease-out;
}
@keyframes eq-bulk-sheet-fade {
  from { background: rgba(0, 0, 0, 0); }
  to   { background: rgba(0, 0, 0, 0.45); }
}
.eq-bulk-sheet-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.eq-bulk-sheet {
  position: relative;
  background: var(--nx-bg);
  border-top: 1px solid var(--nx-gold-line);
  border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  animation: eq-bulk-sheet-slide 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes eq-bulk-sheet-slide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.eq-bulk-sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--nx-gold-line);
  margin: 0 auto 14px;
}
.eq-bulk-sheet-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
  margin-bottom: 4px;
}
.eq-bulk-sheet-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-faint);
  margin-bottom: 14px;
  line-height: 1.4;
}
.eq-bulk-sheet-list {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.eq-bulk-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-bulk-sheet-item:hover {
  background: var(--nx-gold-mist);
  border-color: var(--nx-gold);
}
.eq-bulk-sheet-item:active { transform: scale(0.99); }
.eq-bulk-sheet-item-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--nx-text);
}
.eq-bulk-sheet-item-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--nx-faint);
}
.eq-bulk-sheet-empty {
  padding: 24px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--nx-faint);
}

.eq-bulk-pm-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.eq-bulk-pm-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nx-faint);
}
.eq-bulk-pm-input {
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
}
.eq-bulk-pm-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.eq-bulk-pm-preset {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-faint);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
}
.eq-bulk-pm-preset:hover {
  background: var(--nx-gold-mist);
  color: var(--nx-gold);
  border-color: var(--nx-gold);
}

.eq-bulk-sheet-confirm {
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  border: 0;
  border-radius: 16px;
  color: var(--nx-bg);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: filter var(--nx-press), transform var(--nx-press);
  margin-bottom: 8px;
}
[data-theme="light"] .eq-bulk-sheet-confirm { color: #fff; }
.eq-bulk-sheet-confirm:hover { filter: brightness(1.05); }
.eq-bulk-sheet-confirm:active { transform: scale(0.99); }

.eq-bulk-sheet-cancel {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 0;
  color: var(--nx-faint);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
}
.eq-bulk-sheet-cancel:hover { color: var(--nx-text); }


/* ═══════════════════════════════════════════════════════════════════
   MANUFACTURER LOGO  +  BRAND LIBRARY
   ═══════════════════════════════════════════════════════════════════
   Mirrors the vendor avatar pattern from ordering-system.css. Three
   sizes — sm (28px) for list rows, md (48px) for grid cards & brand
   library rows, lg (96px) for the brand library editor preview.
   ═══════════════════════════════════════════════════════════════════ */

.eq-mfg-logo {
  /* Deterministic colored-initial avatar. Background hue comes from
     --mfg-hue (set inline by JS based on hash-of-name or stored
     avatar_hue override). All in the same warm/desaturated family
     so a list of mixed brands feels coherent. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--mfg-hue, 35), 28%, 32%);
  border: 1px solid hsl(var(--mfg-hue, 35), 35%, 50%);
  color: #f5ecd6;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}
[data-theme="light"] .eq-mfg-logo {
  background: hsl(var(--mfg-hue, 35), 32%, 92%);
  border-color: hsl(var(--mfg-hue, 35), 35%, 60%);
  color: hsl(var(--mfg-hue, 35), 35%, 28%);
}

/* Image variant — the logo image takes over completely. The colored
   bg shows through transparency in PNGs which is why we leave the
   neutral surface color as a fallback. */
.eq-mfg-logo.eq-mfg-logo-img {
  background-color: var(--nx-surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--nx-gold-line);
  color: transparent;
  font-size: 0;
}
[data-theme="light"] .eq-mfg-logo.eq-mfg-logo-img {
  background-color: var(--nx-elevated, var(--nx-surface-2));
}

.eq-mfg-logo-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
}
.eq-mfg-logo-md {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 18px;
}
.eq-mfg-logo-lg {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  font-size: 36px;
}

/* List row — inherits .eq-cat-icon size constraints; we override to
   accommodate the larger logo and keep alignment with the name. */
.eq-cat-icon-with-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  flex-shrink: 0;
}
.eq-cat-icon-with-logo .eq-cat-icon-fallback {
  /* Original category icon (Lucide SVG) when there's no manufacturer */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--nx-gold);
  font-size: 18px;
}

/* Grid card — manufacturer logo as the photo placeholder, with subtle
   centered framing so it doesn't look stretched/cropped. */
.eq-card-photo-mfg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nx-surface-2);
  padding: 18px;
}
[data-theme="light"] .eq-card-photo-mfg {
  background: var(--nx-elevated, var(--nx-surface-2));
}
.eq-card-photo-mfg .eq-mfg-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  font-size: 24px;
}
.eq-card-photo-mfg .eq-mfg-logo.eq-mfg-logo-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-size: contain;     /* contain not cover so logos read in full */
  background-color: transparent;
  border: 0;
  padding: 0;
}


/* ═══ BRAND LIBRARY OVERLAY ════════════════════════════════════════ */

.eq-brand-lib-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  animation: eq-brand-lib-in 220ms ease-out;
  overflow: hidden;
}
@keyframes eq-brand-lib-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.eq-brand-lib-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-surface-1);
  flex-shrink: 0;
}
.eq-brand-lib-close,
.eq-brand-lib-add {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  cursor: pointer;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.eq-brand-lib-close:hover { background: var(--nx-gold-mist); color: var(--nx-gold); }
.eq-brand-lib-add {
  background: var(--nx-gold);
  color: var(--nx-bg);
  border-color: var(--nx-gold);
}
[data-theme="light"] .eq-brand-lib-add { color: #fff; }
.eq-brand-lib-add:hover { filter: brightness(1.05); }

.eq-brand-lib-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-brand-lib-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--nx-text);
}
.eq-brand-lib-sub {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  margin-top: 2px;
  text-transform: uppercase;
}

.eq-brand-lib-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 80px;
}

.eq-brand-lib-loading,
.eq-brand-lib-empty {
  padding: 40px 24px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  color: var(--nx-faint);
}
.eq-brand-lib-empty-title {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-text);
  margin-bottom: 8px;
}
.eq-brand-lib-empty-msg {
  font-size: 13.5px;
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Brand list rows */
.eq-brand-lib-row {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color var(--nx-press);
}
.eq-brand-lib-row:has(.eq-brand-lib-editor) {
  border-color: var(--nx-gold);
}
.eq-brand-lib-row-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.eq-brand-lib-row-text {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-brand-lib-row-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
}
.eq-brand-lib-row-meta {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  margin-top: 2px;
  text-transform: uppercase;
}
.eq-brand-lib-edit-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-brand-lib-edit-btn:hover {
  background: var(--nx-gold-mist);
  border-color: var(--nx-gold);
}

/* Inline editor */
.eq-brand-lib-editor {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--nx-gold-line);
  background: var(--nx-surface-2);
  align-items: flex-start;
}
[data-theme="light"] .eq-brand-lib-editor {
  background: var(--nx-elevated, var(--nx-surface-2));
}

.eq-brand-lib-editor-photo {
  position: relative;
  flex-shrink: 0;
}
.eq-brand-lib-photo-btn {
  position: relative;
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 20px;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--nx-press);
}
.eq-brand-lib-photo-btn:active { transform: scale(0.97); }
.eq-brand-lib-photo-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nx-gold);
  color: var(--nx-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--nx-surface-2);
  pointer-events: none;
}
[data-theme="light"] .eq-brand-lib-photo-badge {
  border-color: var(--nx-elevated, var(--nx-surface-2));
}

.eq-brand-lib-editor-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eq-brand-lib-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin-bottom: 4px;
  display: block;
}
.eq-brand-lib-label-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nx-faintest);
  margin-left: 4px;
}
.eq-brand-lib-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color var(--nx-press);
}
.eq-brand-lib-input:focus { border-color: var(--nx-gold); }

.eq-brand-lib-hue-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.eq-brand-lib-hue-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: hsl(var(--mfg-hue, 35), 28%, 48%);
  cursor: pointer;
  padding: 0;
  font-size: 0;
  transition: border-color var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .eq-brand-lib-hue-swatch {
  background: hsl(var(--mfg-hue, 35), 45%, 60%);
}
.eq-brand-lib-hue-swatch:hover { transform: scale(1.08); }
.eq-brand-lib-hue-swatch.active {
  border-color: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 0 4px var(--nx-gold);
}
.eq-brand-lib-hue-auto {
  background: var(--nx-surface-1);
  color: var(--nx-faint);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px !important;
  font-weight: 600;
  border-color: var(--nx-gold-line);
}

.eq-brand-lib-editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.eq-brand-lib-save-btn {
  flex: 1 1 auto;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  border: 0;
  border-radius: 14px;
  color: var(--nx-bg);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: filter var(--nx-press), transform var(--nx-press);
}
[data-theme="light"] .eq-brand-lib-save-btn { color: #fff; }
.eq-brand-lib-save-btn:hover { filter: brightness(1.05); }
.eq-brand-lib-save-btn:active { transform: scale(0.98); }

.eq-brand-lib-remove-btn {
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  transition: color var(--nx-press), border-color var(--nx-press), background var(--nx-press);
}
.eq-brand-lib-remove-btn:hover:not(:disabled) {
  color: var(--nx-red, var(--nx-red));
  border-color: var(--nx-red-soft, rgba(180, 60, 60, 0.4));
  background: var(--nx-red-soft, rgba(180, 60, 60, 0.08));
}
.eq-brand-lib-remove-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════════════
   FLEET INTELLIGENCE ANALYTICS
   ═══════════════════════════════════════════════════════════════════
   Four-tab dashboard: Brand Health, Patterns, Warranty, Digest.
   Same visual idiom as the issue tracker / brand library overlays.
   ═══════════════════════════════════════════════════════════════════ */

.eq-analytics-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  animation: eq-analytics-in 220ms ease-out;
  overflow: hidden;
}
@keyframes eq-analytics-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.eq-analytics-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-surface-1);
  flex-shrink: 0;
}
.eq-analytics-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-analytics-close:hover { background: var(--nx-gold-mist); color: var(--nx-gold); }

.eq-analytics-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-analytics-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
}
.eq-analytics-sub {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  margin-top: 2px;
  text-transform: uppercase;
}

/* ─── Tab strip ──────────────────────────────────────────────────── */

.eq-analytics-tabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  background: var(--nx-surface-1);
  border-bottom: 1px solid var(--nx-gold-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  scrollbar-width: none;
}
.eq-analytics-tabs::-webkit-scrollbar { display: none; }
.eq-analytics-tab {
  flex-shrink: 0;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: color var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-analytics-tab:hover { color: var(--nx-text); }
.eq-analytics-tab.is-active {
  color: var(--nx-gold);
  border-bottom-color: var(--nx-gold);
  font-weight: 600;
}

/* ─── Body ───────────────────────────────────────────────────────── */

.eq-analytics-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 60px;
}

.eq-analytics-loading,
.eq-analytics-empty,
.eq-analytics-error {
  padding: 50px 24px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  color: var(--nx-faint);
  font-size: 13.5px;
}
.eq-analytics-empty-title {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-text);
  margin-bottom: 8px;
}
.eq-analytics-empty-msg {
  font-size: 13px;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.55;
}
.eq-analytics-error { color: var(--nx-red, var(--nx-red)); }

.eq-analytics-intro {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  color: var(--nx-faint);
  line-height: 1.55;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  margin-bottom: 16px;
}
.eq-analytics-intro strong {
  color: var(--nx-text);
  font-weight: 600;
}

.eq-analytics-section-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin: 18px 4px 10px;
}
.eq-analytics-section-label-expired   { color: var(--nx-red, var(--nx-red)); }
.eq-analytics-section-label-urgent    { color: #d6912e; }
.eq-analytics-section-label-upcoming  { color: var(--nx-gold); }
.eq-analytics-section-label-watching  { color: var(--nx-faint); }


/* ═══ TAB 1: BRAND HEALTH ════════════════════════════════════════ */

.eq-analytics-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
@media (min-width: 480px) {
  .eq-analytics-summary { grid-template-columns: repeat(4, 1fr); }
}
.eq-analytics-stat {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  padding: 14px 16px;
  text-align: center;
}
.eq-analytics-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--nx-gold);
  line-height: 1.1;
}
.eq-analytics-stat-pct span {
  font-size: 16px;
  color: var(--nx-faint);
  font-weight: 500;
  margin-left: 1px;
}
.eq-analytics-stat-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin-top: 4px;
}

.eq-brand-health-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eq-brand-health-card {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--nx-press), background var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-brand-health-card:hover {
  border-color: var(--nx-gold);
  background: var(--nx-gold-mist);
}
.eq-brand-health-card:active { transform: scale(0.99); }

.eq-brand-health-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.eq-brand-health-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-brand-health-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
}
.eq-brand-health-meta {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  margin-top: 2px;
  text-transform: uppercase;
}

.eq-brand-health-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.eq-brand-health-stat {
  text-align: center;
}
.eq-brand-health-stat-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faintest);
  margin-bottom: 2px;
}
.eq-brand-health-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--nx-text);
}
.eq-brand-health-stat-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--nx-faint);
}
.eq-brand-health-pct.is-good    { color: #5b8a4c; }
.eq-brand-health-pct.is-caution { color: #d6912e; }
.eq-brand-health-pct.is-bad     { color: var(--nx-red, var(--nx-red)); }
[data-theme="light"] .eq-brand-health-pct.is-good    { color: #4b7838; }
[data-theme="light"] .eq-brand-health-pct.is-caution { color: #c4811f; }

.eq-brand-health-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--nx-surface-2);
  overflow: hidden;
}
.eq-brand-health-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 400ms ease-out;
}
.eq-brand-health-bar-fill.is-good    { background: #5b8a4c; }
.eq-brand-health-bar-fill.is-caution { background: #d6912e; }
.eq-brand-health-bar-fill.is-bad     { background: var(--nx-red, var(--nx-red)); }


/* ═══ TAB 2: PATTERNS ══════════════════════════════════════════════ */

.eq-pattern-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eq-pattern-card {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  padding: 14px 16px;
}
.eq-pattern-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.eq-pattern-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  background: rgba(214, 145, 46, 0.14);
  color: #d6912e;
  border: 1px solid rgba(214, 145, 46, 0.4);
}
[data-theme="light"] .eq-pattern-tag {
  background: rgba(196, 129, 31, 0.12);
  color: #c4811f;
  border-color: rgba(196, 129, 31, 0.4);
}
.eq-pattern-cohort {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--nx-faint);
}

.eq-pattern-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  margin-bottom: 10px;
}

.eq-pattern-stat {
  margin-bottom: 10px;
}
.eq-pattern-pct-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--nx-surface-2);
  overflow: hidden;
  margin-bottom: 5px;
}
.eq-pattern-pct-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #d6912e, var(--nx-red, var(--nx-red)));
  transition: width 400ms ease-out;
}
.eq-pattern-pct-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--nx-faint);
}

.eq-pattern-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-faint);
  margin-bottom: 10px;
}
.eq-pattern-meta strong {
  color: var(--nx-text);
  font-weight: 600;
}

.eq-pattern-recommendation {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-text);
  margin-bottom: 10px;
  line-height: 1.4;
}
.eq-pattern-recommendation svg {
  color: var(--nx-gold);
}
.eq-pattern-recommendation strong {
  color: var(--nx-gold);
  font-weight: 600;
}

.eq-pattern-cta {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  color: var(--nx-bg);
  border: 0;
  border-radius: 15px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: filter var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .eq-pattern-cta { color: #fff; }
.eq-pattern-cta:hover { filter: brightness(1.05); }
.eq-pattern-cta:active { transform: scale(0.99); }


/* ═══ TAB 3: WARRANTY ══════════════════════════════════════════════ */

.eq-warranty-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.eq-warranty-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color var(--nx-press), background var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-warranty-card:hover {
  border-color: var(--nx-gold);
  background: var(--nx-gold-mist);
}
.eq-warranty-card:active { transform: scale(0.99); }

.eq-warranty-card-expired { border-left: 3px solid var(--nx-red, var(--nx-red)); }
.eq-warranty-card-urgent  { border-left: 3px solid #d6912e; }
.eq-warranty-card-upcoming{ border-left: 3px solid var(--nx-gold); }
.eq-warranty-card-watching{ border-left: 3px solid var(--nx-gold-line); }

.eq-warranty-card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eq-warranty-card-icon .eq-cat-icon-fallback {
  color: var(--nx-gold);
  font-size: 18px;
}
.eq-warranty-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-warranty-card-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-warranty-card-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: var(--nx-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eq-warranty-card-days {
  flex-shrink: 0;
  text-align: right;
}
.eq-warranty-card-days-num {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-text);
  white-space: nowrap;
}
.eq-warranty-card-expired .eq-warranty-card-days-num { color: var(--nx-red, var(--nx-red)); }
.eq-warranty-card-urgent  .eq-warranty-card-days-num { color: #d6912e; }
.eq-warranty-card-days-date {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 0.8px;
  color: var(--nx-faintest);
  margin-top: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ═══ TAB 4: DIGEST ════════════════════════════════════════════════ */

.eq-digest-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.eq-digest-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  border-radius: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter var(--nx-press), transform var(--nx-press), background var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-digest-btn:active { transform: scale(0.98); }
.eq-digest-btn-primary {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  color: var(--nx-bg);
  border-color: var(--nx-gold);
  min-width: 200px;
}
[data-theme="light"] .eq-digest-btn-primary { color: #fff; }
.eq-digest-btn-primary:hover { filter: brightness(1.05); }
.eq-digest-btn-secondary {
  background: var(--nx-gold-mist);
  color: var(--nx-text);
  border-color: var(--nx-gold-line);
}
.eq-digest-btn-secondary:hover {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}

.eq-digest-preview {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  padding: 18px 20px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  line-height: 1.6;
  color: var(--nx-text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ═══════════════════════════════════════════════════════════════════
   LIFECYCLE STATUS PILL
   ═══════════════════════════════════════════════════════════════════
   Replaces the static status pill across equipment views. Operational
   pieces glow softly. Down/broken units sit dim with no fill so the
   eye skips past them — there's nothing to do, the operator already
   knows. When an issue is logged, the lifecycle state takes over the
   pill with state-appropriate color and animation.

   Layered colors: green for operational, gold for waiting on
   contractor, deep blue for ETA, vibrant green pulsing for in-progress
   work, amber for awaiting parts, and an inert ghost outline for down.
   ═══════════════════════════════════════════════════════════════════ */

.eq-lc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.eq-lc-pill-lg { padding: 8px 16px; font-size: 11.5px; gap: 8px; }
.eq-lc-pill-md { padding: 6px 12px; font-size: 10px;   gap: 6px; }
.eq-lc-pill-sm { padding: 4px 10px; font-size: 9.5px;  gap: 6px; }

.eq-lc-pill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  position: relative;
}
.eq-lc-pill-sm .eq-lc-pill-dot { width: 6px;  height: 6px;  }
.eq-lc-pill-lg .eq-lc-pill-dot { width: 9px;  height: 9px;  }

.eq-lc-pill-time {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
  opacity: 0.85;
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid currentColor;
  border-color: rgba(255, 255, 255, 0.18);
}

/* ════════════════════════════════════════════════════════════════════
   LIFECYCLE PILL — LIGHTBULB METAPHOR
   ════════════════════════════════════════════════════════════════════
   Every state expressed in gold. Only the *intensity* and *animation*
   distinguish the lifecycle. Reads like a row of bulbs across the
   kitchen — bright ones are alive, faded ones are working through
   something, struggling ones are dying.

     operational      → BRIGHT steady glow, pulsing dot
     reported         → urgent, moderately bright with quick pulse
     contractor_called→ steady moderate glow (waiting)
     eta_set          → moderate with subtle countdown blink
     in_progress      → SIMPLE FADING — slow breathing, dimmer
     awaiting_parts   → low background pulse (back-burner)
     down / broken    → STRUGGLING — irregular dying-bulb flicker
   ════════════════════════════════════════════════════════════════════ */

/* ─── State: Operational ─── BRIGHT GLOWING YELLOW (alive) ─── */
.eq-lc-pill.is-operational {
  background: rgba(212, 164, 78, 0.18);
  color: var(--nx-gold);
  border-color: rgba(212, 164, 78, 0.55);
  box-shadow: 0 0 0 1px rgba(212, 164, 78, 0.22),
              0 0 22px rgba(212, 164, 78, 0.45);
  animation: eq-lc-glow 3.6s ease-in-out infinite;
}
[data-theme="light"] .eq-lc-pill.is-operational {
  color: var(--nx-gold-deep, #8b6914);
  background: rgba(139, 105, 20, 0.10);
  border-color: rgba(139, 105, 20, 0.45);
  box-shadow: 0 0 0 1px rgba(139, 105, 20, 0.15),
              0 0 18px rgba(212, 164, 78, 0.28);
}
@keyframes eq-lc-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212, 164, 78, 0.22),
                         0 0 18px rgba(212, 164, 78, 0.4); }
  50%      { box-shadow: 0 0 0 1px rgba(212, 164, 78, 0.32),
                         0 0 32px rgba(212, 164, 78, 0.6); }
}
.eq-lc-pill.is-operational .eq-lc-pill-dot {
  box-shadow: 0 0 6px currentColor, 0 0 14px currentColor;
  animation: eq-lc-pulse-dot 2.4s ease-in-out infinite;
}
@keyframes eq-lc-pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.15); }
}

/* ─── State: Down / Broken ─── THE LIGHT IS STRUGGLING 🥲 ─── */
.eq-lc-pill.is-down {
  background: rgba(212, 164, 78, 0.06);
  color: var(--nx-gold);
  border-color: rgba(212, 164, 78, 0.25);
  box-shadow: 0 0 8px rgba(212, 164, 78, 0.15);
  animation: eq-lc-struggle 5.2s steps(1, end) infinite;
}
[data-theme="light"] .eq-lc-pill.is-down {
  color: var(--nx-gold-deep, #8b6914);
  background: rgba(139, 105, 20, 0.04);
  border-color: rgba(139, 105, 20, 0.2);
}
.eq-lc-pill.is-down .eq-lc-pill-dot {
  box-shadow: 0 0 4px currentColor;
  animation: eq-lc-struggle-dot 5.2s steps(1, end) infinite;
}
/* Dying-bulb flicker: irregular intensity drops, occasional near-blackout.
   Long duration so the pattern reads as organic rather than jittery. */
@keyframes eq-lc-struggle {
  0%   { opacity: 0.55; }
  4%   { opacity: 0.18; }   /* sharp drop */
  6%   { opacity: 0.55; }
  19%  { opacity: 0.55; }
  21%  { opacity: 0.32; }   /* dim flutter */
  23%  { opacity: 0.55; }
  47%  { opacity: 0.55; }
  49%  { opacity: 0.10; }   /* near-out */
  50%  { opacity: 0.45; }
  52%  { opacity: 0.55; }
  73%  { opacity: 0.55; }
  75%  { opacity: 0.22; }
  77%  { opacity: 0.55; }
  91%  { opacity: 0.55; }
  93%  { opacity: 0.15; }   /* one more dip before reset */
  95%  { opacity: 0.55; }
  100% { opacity: 0.55; }
}
@keyframes eq-lc-struggle-dot {
  0%   { opacity: 0.7; transform: scale(1); }
  4%   { opacity: 0.2; transform: scale(0.85); }
  6%   { opacity: 0.7; transform: scale(1); }
  21%  { opacity: 0.4; transform: scale(0.92); }
  23%  { opacity: 0.7; transform: scale(1); }
  49%  { opacity: 0.1; transform: scale(0.8); }
  52%  { opacity: 0.7; transform: scale(1); }
  75%  { opacity: 0.3; transform: scale(0.88); }
  77%  { opacity: 0.7; transform: scale(1); }
  93%  { opacity: 0.2; transform: scale(0.85); }
  95%  { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(1); }
}

/* ─── State: Issue reported ─── medium-bright gold, urgent pulse ─── */
.eq-lc-pill.is-reported {
  background: rgba(212, 164, 78, 0.15);
  color: var(--nx-gold);
  border-color: rgba(212, 164, 78, 0.45);
  box-shadow: 0 0 16px rgba(212, 164, 78, 0.35);
  animation: eq-lc-glow-quick 1.6s ease-in-out infinite;
}
[data-theme="light"] .eq-lc-pill.is-reported {
  color: var(--nx-gold-deep, #8b6914);
  background: rgba(139, 105, 20, 0.08);
  border-color: rgba(139, 105, 20, 0.4);
}
@keyframes eq-lc-glow-quick {
  0%, 100% { box-shadow: 0 0 12px rgba(212, 164, 78, 0.3); }
  50%      { box-shadow: 0 0 22px rgba(212, 164, 78, 0.55); }
}

/* ─── State: Contractor called ─── steady moderate glow (waiting) ─── */
.eq-lc-pill.is-called {
  background: rgba(212, 164, 78, 0.12);
  color: var(--nx-gold);
  border-color: rgba(212, 164, 78, 0.4);
  box-shadow: 0 0 14px rgba(212, 164, 78, 0.28);
}
[data-theme="light"] .eq-lc-pill.is-called {
  color: var(--nx-gold-deep, #8b6914);
  background: rgba(139, 105, 20, 0.06);
  border-color: rgba(139, 105, 20, 0.35);
}

/* ─── State: ETA set ─── moderate with subtle countdown blink ─── */
.eq-lc-pill.is-eta {
  background: rgba(212, 164, 78, 0.13);
  color: var(--nx-gold);
  border-color: rgba(212, 164, 78, 0.42);
  box-shadow: 0 0 14px rgba(212, 164, 78, 0.3);
  animation: eq-lc-eta-blink 2.8s ease-in-out infinite;
}
[data-theme="light"] .eq-lc-pill.is-eta {
  color: var(--nx-gold-deep, #8b6914);
  background: rgba(139, 105, 20, 0.07);
  border-color: rgba(139, 105, 20, 0.36);
}
@keyframes eq-lc-eta-blink {
  0%, 90%, 100% { box-shadow: 0 0 14px rgba(212, 164, 78, 0.3); }
  93%, 96%      { box-shadow: 0 0 22px rgba(212, 164, 78, 0.5); }
}

/* ─── State: In progress ─── SIMPLE FADING YELLOW (slow breath) ─── */
.eq-lc-pill.is-in-progress {
  background: rgba(212, 164, 78, 0.10);
  color: var(--nx-gold);
  border-color: rgba(212, 164, 78, 0.35);
  box-shadow: 0 0 12px rgba(212, 164, 78, 0.22);
  animation: eq-lc-fading 4.4s ease-in-out infinite;
}
[data-theme="light"] .eq-lc-pill.is-in-progress {
  color: var(--nx-gold-deep, #8b6914);
  background: rgba(139, 105, 20, 0.05);
  border-color: rgba(139, 105, 20, 0.3);
}
/* The "fading" feel — opacity breathes between full and ~half, slowly,
   like a bulb whose energy is being drained by the work being done. */
@keyframes eq-lc-fading {
  0%, 100% { opacity: 0.95; box-shadow: 0 0 12px rgba(212, 164, 78, 0.22); }
  50%      { opacity: 0.55; box-shadow: 0 0 6px  rgba(212, 164, 78, 0.10); }
}
.eq-lc-pill.is-in-progress .eq-lc-pill-dot {
  box-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
  animation: eq-lc-fading-dot 4.4s ease-in-out infinite;
}
@keyframes eq-lc-fading-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.92); }
}

/* ─── State: Awaiting parts ─── low background pulse (back-burner) ─── */
.eq-lc-pill.is-awaiting {
  background: rgba(212, 164, 78, 0.08);
  color: var(--nx-gold);
  border-color: rgba(212, 164, 78, 0.3);
  box-shadow: 0 0 10px rgba(212, 164, 78, 0.18);
  animation: eq-lc-fading 6.0s ease-in-out infinite;  /* slower = more dormant */
  opacity: 0.85;
}
[data-theme="light"] .eq-lc-pill.is-awaiting {
  color: var(--nx-gold-deep, #8b6914);
  background: rgba(139, 105, 20, 0.04);
  border-color: rgba(139, 105, 20, 0.25);
}

/* ─── States: muted / retired / missing / needs_service ─── */
.eq-lc-pill.is-muted,
.eq-lc-pill.is-retired {
  background: transparent;
  color: var(--nx-faintest);
  border-color: var(--nx-gold-line);
  box-shadow: none;
  opacity: 0.65;
}
.eq-lc-pill.is-needs-service {
  background: rgba(214, 145, 46, 0.1);
  color: var(--nx-gold);
  border-color: rgba(214, 145, 46, 0.3);
}
.eq-lc-pill.is-missing {
  background: rgba(155, 110, 200, 0.14);
  color: #b58fd6;
  border-color: rgba(181, 143, 214, 0.4);
}
[data-theme="light"] .eq-lc-pill.is-missing {
  color: #6b48a3;
  background: rgba(107, 72, 163, 0.1);
  border-color: rgba(107, 72, 163, 0.35);
}


/* ─── Compact dot for grid card corner ──────────────────────────── */

.eq-lc-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  z-index: 2;
}
.eq-lc-dot.is-operational {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 8px rgba(212, 164, 78, 0.7),
              0 0 16px rgba(212, 164, 78, 0.45);
  animation: eq-lc-pulse-dot 2.4s ease-in-out infinite;
}
[data-theme="light"] .eq-lc-dot.is-operational {
  background: var(--nx-gold-deep, #8b6914);
}
.eq-lc-dot.is-down {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 4px rgba(212, 164, 78, 0.4);
  animation: eq-lc-struggle-dot 5.2s steps(1, end) infinite;
}
.eq-lc-dot.is-muted,
.eq-lc-dot.is-retired {
  background: var(--nx-faintest);
  box-shadow: 0 0 0 2px var(--nx-bg);
  opacity: 0.5;
}
.eq-lc-dot.is-reported {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 8px rgba(212, 164, 78, 0.6);
  animation: eq-lc-glow-quick 1.6s ease-in-out infinite;
}
.eq-lc-dot.is-called {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 8px rgba(212, 164, 78, 0.5);
}
.eq-lc-dot.is-eta {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 8px rgba(212, 164, 78, 0.55);
  animation: eq-lc-eta-blink 2.8s ease-in-out infinite;
}
.eq-lc-dot.is-in-progress {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 8px rgba(212, 164, 78, 0.45);
  animation: eq-lc-fading-dot 4.4s ease-in-out infinite;
}
.eq-lc-dot.is-awaiting {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 6px rgba(212, 164, 78, 0.35);
  animation: eq-lc-fading-dot 6.0s ease-in-out infinite;
  opacity: 0.8;
}
.eq-lc-dot.is-needs-service {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 6px rgba(212, 164, 78, 0.45);
}
.eq-lc-dot.is-missing {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg);
  opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════════════════
   CONTRACTORS — full management overlay
   ═══════════════════════════════════════════════════════════════════
   Two modes (list + detail) sharing one overlay. Same idiom as the
   brand library and analytics overlays — full screen, gold accent,
   editorial typography.
   ═══════════════════════════════════════════════════════════════════ */

.eq-contractors-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  animation: eq-contractors-in 220ms ease-out;
  overflow: hidden;
}
@keyframes eq-contractors-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.eq-contractors-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-surface-1);
  flex-shrink: 0;
}
.eq-contractors-close,
.eq-contractors-back,
.eq-contractors-add,
.eq-contractors-call {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.eq-contractors-close:hover,
.eq-contractors-back:hover {
  background: var(--nx-gold-mist);
  color: var(--nx-gold);
}
.eq-contractors-add {
  background: var(--nx-gold);
  color: var(--nx-bg);
  border-color: var(--nx-gold);
}
[data-theme="light"] .eq-contractors-add { color: #fff; }
.eq-contractors-add:hover { filter: brightness(1.05); }
.eq-contractors-call {
  background: rgba(91, 138, 76, 0.16);
  color: #5b8a4c;
  border-color: rgba(91, 138, 76, 0.4);
}
[data-theme="light"] .eq-contractors-call {
  color: #4b7838;
  background: rgba(75, 120, 56, 0.12);
}
.eq-contractors-call:hover { filter: brightness(1.1); }

.eq-contractors-head-text {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-contractors-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--nx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-contractors-sub {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  margin-top: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eq-contractors-search-wrap {
  padding: 10px 14px;
  background: var(--nx-surface-1);
  border-bottom: 1px solid var(--nx-gold-line);
  flex-shrink: 0;
}
.eq-contractors-search {
  width: 100%;
  padding: 11px 14px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--nx-press);
}
.eq-contractors-search:focus { border-color: var(--nx-gold); }

.eq-contractors-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 100px;
}

.eq-contractors-loading,
.eq-contractors-empty,
.eq-contractors-error {
  padding: 50px 24px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  color: var(--nx-faint);
  font-size: 13.5px;
}
.eq-contractors-empty-title {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-text);
  margin-bottom: 8px;
}
.eq-contractors-empty-msg {
  font-size: 13px;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.55;
}
.eq-contractors-error { color: var(--nx-red, var(--nx-red)); }


/* ─── Avatar ─────────────────────────────────────────────────────── */

.eq-contractor-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--mfg-hue, 35), 28%, 32%);
  border: 1px solid hsl(var(--mfg-hue, 35), 35%, 50%);
  color: #f5ecd6;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  user-select: none;
}
[data-theme="light"] .eq-contractor-avatar {
  background: hsl(var(--mfg-hue, 35), 32%, 92%);
  border-color: hsl(var(--mfg-hue, 35), 35%, 60%);
  color: hsl(var(--mfg-hue, 35), 35%, 28%);
}
.eq-contractor-avatar-sm { width: 32px; height: 32px; border-radius: 50%; font-size: 13px; }
.eq-contractor-avatar-md { width: 48px; height: 48px; border-radius: 50%; font-size: 19px; }
.eq-contractor-avatar-lg { width: 80px; height: 80px; border-radius: 50%; font-size: 32px; }


/* ─── List cards ─────────────────────────────────────────────────── */

.eq-contractors-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eq-contractor-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color var(--nx-press), background var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-contractor-card:hover {
  border-color: var(--nx-gold);
  background: var(--nx-gold-mist);
}
.eq-contractor-card:active { transform: scale(0.99); }

.eq-contractor-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-contractor-card-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-contractor-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-faint);
  margin-top: 2px;
}
.eq-contractor-card-phone {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--nx-text);
}
.eq-contractor-card-sep {
  color: var(--nx-faintest);
}
.eq-contractor-card-tags {
  font-style: italic;
  color: var(--nx-gold);
}
.eq-contractor-card-stats {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: var(--nx-faintest);
  margin-top: 4px;
  text-transform: uppercase;
}
.eq-contractor-card-when {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
}
.eq-contractor-card-when-text {
  white-space: nowrap;
}


/* ─── Detail summary ─────────────────────────────────────────────── */

.eq-contractor-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  background: var(--nx-surface-1);
  border-bottom: 1px solid var(--nx-gold-line);
}
.eq-contractor-summary .eq-contractor-avatar {
  flex-shrink: 0;
}
.eq-contractor-summary-stats {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) {
  .eq-contractor-summary-stats { grid-template-columns: repeat(4, 1fr); }
}
.eq-contractor-stat {
  text-align: center;
  padding: 6px 8px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
}
.eq-contractor-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nx-gold);
  line-height: 1.1;
}
.eq-contractor-stat-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin-top: 3px;
}


/* ─── Detail tabs ────────────────────────────────────────────────── */

.eq-contractors-tabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  background: var(--nx-surface-1);
  border-bottom: 1px solid var(--nx-gold-line);
  flex-shrink: 0;
}
.eq-contractors-tab {
  flex: 1 1 auto;
  padding: 13px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: color var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-contractors-tab:hover { color: var(--nx-text); }
.eq-contractors-tab.is-active {
  color: var(--nx-gold);
  border-bottom-color: var(--nx-gold);
  font-weight: 600;
}


/* ─── Activity feed ──────────────────────────────────────────────── */

.eq-contractor-activity-group {
  margin-bottom: 18px;
}
.eq-contractor-activity-month {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-faint);
  padding: 8px 4px;
  border-bottom: 1px solid var(--nx-gold-line);
  margin-bottom: 8px;
}
.eq-contractor-activity-row {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--nx-press), background var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-contractor-activity-row:hover {
  border-color: var(--nx-gold);
  background: var(--nx-gold-mist);
}
.eq-contractor-activity-row:active { transform: scale(0.99); }
.eq-contractor-activity-row.eq-contractor-event-issue {
  border-left: 3px solid #d6912e;
}
.eq-contractor-activity-row.eq-contractor-event-maintenance {
  border-left: 3px solid var(--nx-gold);
}
.eq-contractor-activity-date {
  flex-shrink: 0;
  width: 52px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--nx-faint);
  text-transform: uppercase;
  padding-top: 2px;
}
.eq-contractor-activity-body {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-contractor-activity-title {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-text);
  text-transform: capitalize;
}
.eq-contractor-activity-eq {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--nx-gold);
  margin-top: 2px;
}
.eq-contractor-activity-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-faint);
  margin-top: 4px;
  line-height: 1.45;
}


/* ─── Equipment tab ──────────────────────────────────────────────── */

.eq-contractor-eq-group-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin: 14px 4px 10px;
}
.eq-contractor-eq-group-label:first-child { margin-top: 4px; }
.eq-contractor-eq-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.eq-contractor-eq-row {
  padding: 11px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 15px;
  cursor: pointer;
  transition: border-color var(--nx-press), background var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-contractor-eq-row:hover {
  border-color: var(--nx-gold);
  background: var(--nx-gold-mist);
}
.eq-contractor-eq-row:active { transform: scale(0.99); }
.eq-contractor-eq-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--nx-text);
}
.eq-contractor-eq-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: var(--nx-faint);
  margin-top: 2px;
}


/* ─── Edit form ──────────────────────────────────────────────────── */

.eq-contractor-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.eq-contractor-edit-row {
  display: flex;
  gap: 10px;
}
.eq-contractor-edit-row .eq-contractor-edit-field {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-contractor-edit-field {
  display: flex;
  flex-direction: column;
}
.eq-contractor-edit-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin-bottom: 6px;
}
.eq-contractor-edit-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nx-faintest);
  margin-left: 4px;
}
.eq-contractor-edit-input,
.eq-contractor-edit-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color var(--nx-press);
  box-sizing: border-box;
}
.eq-contractor-edit-input:focus,
.eq-contractor-edit-textarea:focus {
  border-color: var(--nx-gold);
}
.eq-contractor-edit-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: 'Outfit', sans-serif;
  line-height: 1.5;
}

.eq-contractor-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.eq-contractor-edit-btn {
  padding: 13px 18px;
  border-radius: 15px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter var(--nx-press), transform var(--nx-press), background var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-contractor-edit-btn:active { transform: scale(0.98); }
.eq-contractor-edit-btn-primary {
  flex: 1 1 auto;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  color: var(--nx-bg);
  border-color: var(--nx-gold);
}
[data-theme="light"] .eq-contractor-edit-btn-primary { color: #fff; }
.eq-contractor-edit-btn-primary:hover { filter: brightness(1.05); }
.eq-contractor-edit-btn-danger {
  background: transparent;
  color: var(--nx-faint);
  border-color: var(--nx-gold-line);
}
.eq-contractor-edit-btn-danger:hover {
  color: var(--nx-red, var(--nx-red));
  border-color: var(--nx-red-soft, rgba(180, 60, 60, 0.4));
  background: var(--nx-red-soft, rgba(180, 60, 60, 0.06));
}


/* ─── Sticky footer with call/email actions ──────────────────────── */

.eq-contractors-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--nx-bg) 75%, transparent);
  z-index: 10;
}
.eq-contractors-foot-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter var(--nx-press), transform var(--nx-press), background var(--nx-press);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.eq-contractors-foot-btn:active { transform: scale(0.98); }
.eq-contractors-foot-btn-primary {
  background: linear-gradient(135deg, var(--nx-gold), var(--nx-gold-strong, var(--nx-gold)));
  color: var(--nx-bg);
  border-color: var(--nx-gold-strong, var(--nx-gold));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
[data-theme="light"] .eq-contractors-foot-btn-primary { color: #fff; }
.eq-contractors-foot-btn-primary:hover { filter: brightness(1.05); }
.eq-contractors-foot-btn-secondary {
  background: var(--nx-gold-mist);
  color: var(--nx-text);
  border-color: var(--nx-gold-line);
}
.eq-contractors-foot-btn-secondary:hover {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}


/* ═══════════════════════════════════════════════════════════════════
   LONG-PRESS  +  EXPANDING ACTION DIAL
   ═══════════════════════════════════════════════════════════════════
   Hold any equipment row for 1 second → an expanding gold ring fills
   around the touch point, then a duties-style speed-dial slides up
   with bulk-mode + issue + PM + email-contractor actions.

   Visual idiom matches the duties speed-dial: dimmed backdrop with
   blur, stacked label-chip + 52px gold-circle action rows above the
   bottom nav, staggered slide-up animation, gentle shadow lift.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Progress ring during the hold ─────────────────────────────── */

.eq-longpress-ring {
  position: fixed;
  width: 60px;
  height: 60px;
  margin-left: -30px;     /* center on the cursor */
  margin-top: -30px;
  z-index: 940;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease-out;
}
.eq-longpress-ring.is-running {
  opacity: 1;
}
.eq-longpress-ring.is-completing,
.eq-longpress-ring.is-fired {
  opacity: 0;
  transform: scale(1.6);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.eq-longpress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);    /* start the fill at 12 o'clock */
}
.eq-longpress-ring-track {
  fill: rgba(0, 0, 0, 0.45);
  stroke: var(--nx-gold-line);
  stroke-width: 2;
}
[data-theme="light"] .eq-longpress-ring-track {
  fill: rgba(255, 255, 255, 0.65);
  stroke: var(--nx-gold-line);
}
.eq-longpress-ring-fill {
  fill: none;
  stroke: var(--nx-gold);
  stroke-width: 4;
  stroke-linecap: round;
  /* The circle has circumference 2πr = 2π·26 ≈ 163.36. We start with
     dasharray fully empty, then animate to fully filled. */
  stroke-dasharray: 163.36;
  stroke-dashoffset: 163.36;
  filter: drop-shadow(0 0 4px var(--nx-gold-mist));
}
.eq-longpress-ring.is-running .eq-longpress-ring-fill {
  animation: eq-longpress-fill 1000ms linear forwards;
}
.eq-longpress-ring.is-fired .eq-longpress-ring-fill {
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 12px var(--nx-gold)) drop-shadow(0 0 24px var(--nx-gold-mist));
}
@keyframes eq-longpress-fill {
  from { stroke-dashoffset: 163.36; }
  to   { stroke-dashoffset: 0; }
}

/* Visual feedback on the held row itself */
.eq-longpress-active {
  transform: scale(0.985);
  transition: transform 120ms ease-out;
}


/* ─── Expanding action dial ─────────────────────────────────────── */

.eq-actions-dial {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.eq-actions-dial.is-open {
  opacity: 1;
  pointer-events: auto;
}
.eq-actions-dial.is-closing {
  opacity: 0;
}

.eq-actions-dial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme="light"] .eq-actions-dial-backdrop {
  background: rgba(20, 16, 8, 0.32);
}

.eq-actions-dial-stack {
  position: absolute;
  /* Above the bottom nav. Same calc as the duties dial. */
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  padding: 0 16px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}

/* Target pill at the top of the stack — shows what's being acted on. */
.eq-actions-dial-target {
  align-self: center;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  padding: 10px 16px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(20px) scale(0.92);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 200ms ease;
}
.eq-actions-dial.is-open .eq-actions-dial-target {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.eq-actions-dial-target-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
}
.eq-actions-dial-target-loc {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin-top: 2px;
}

.eq-actions-dial-action {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 220ms ease;
}
.eq-actions-dial.is-open .eq-actions-dial-action {
  transform: translateY(0);
  opacity: 1;
}
/* Staggered delays — each row enters slightly after the previous. */
.eq-actions-dial.is-open .eq-actions-dial-action:nth-of-type(1) { transition-delay: 60ms;  }
.eq-actions-dial.is-open .eq-actions-dial-action:nth-of-type(2) { transition-delay: 110ms; }
.eq-actions-dial.is-open .eq-actions-dial-action:nth-of-type(3) { transition-delay: 160ms; }
.eq-actions-dial.is-open .eq-actions-dial-action:nth-of-type(4) { transition-delay: 210ms; }
.eq-actions-dial.is-open .eq-actions-dial-action:nth-of-type(5) { transition-delay: 260ms; }
.eq-actions-dial.is-open .eq-actions-dial-action:nth-of-type(6) { transition-delay: 310ms; }

.eq-actions-dial-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 15px;
  padding: 9px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .eq-actions-dial-text {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.eq-actions-dial-label {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
}
.eq-actions-dial-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: var(--nx-faint);
  margin-top: 2px;
}

.eq-actions-dial-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  color: var(--nx-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(212, 164, 78, 0.35),
              0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform var(--nx-press), box-shadow var(--nx-press), filter var(--nx-press);
}
[data-theme="light"] .eq-actions-dial-icon { color: #fff; }
.eq-actions-dial-action:hover .eq-actions-dial-icon {
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(212, 164, 78, 0.5),
              0 2px 6px rgba(0, 0, 0, 0.25);
}
.eq-actions-dial-action:active .eq-actions-dial-icon {
  transform: scale(0.94);
}
.eq-actions-dial-action:active .eq-actions-dial-text {
  background: var(--nx-gold-mist);
}

.eq-actions-dial-cancel {
  align-self: center;
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  padding: 9px 22px;
  color: var(--nx-faint);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 220ms ease,
              color var(--nx-press),
              border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-actions-dial.is-open .eq-actions-dial-cancel {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 250ms;
}
.eq-actions-dial-cancel:hover {
  color: var(--nx-text);
  border-color: var(--nx-gold);
}


/* ═══════════════════════════════════════════════════════════════════
   PARTS CATALOG OVERLAY
   ═══════════════════════════════════════════════════════════════════
   Same shell idiom as contractors / brand library — full screen, list
   + detail modes, sticky footer for primary actions.
   ═══════════════════════════════════════════════════════════════════ */

.eq-parts-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: var(--nx-bg);
  display: flex;
  flex-direction: column;
  animation: eq-parts-in 220ms ease-out;
  overflow: hidden;
}
@keyframes eq-parts-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.eq-parts-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  background: var(--nx-surface-1);
  flex-shrink: 0;
}
.eq-parts-close,
.eq-parts-back,
.eq-parts-add,
.eq-parts-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
.eq-parts-close:hover,
.eq-parts-back:hover,
.eq-parts-link:hover { background: var(--nx-gold-mist); color: var(--nx-gold); }
.eq-parts-add {
  background: var(--nx-gold);
  color: var(--nx-bg);
  border-color: var(--nx-gold);
}
[data-theme="light"] .eq-parts-add { color: #fff; }
.eq-parts-add:hover { filter: brightness(1.05); }

.eq-parts-head-text { flex: 1 1 auto; min-width: 0; }
.eq-parts-title {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--nx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-parts-sub {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  margin-top: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eq-parts-search-wrap {
  padding: 10px 14px;
  background: var(--nx-surface-1);
  border-bottom: 1px solid var(--nx-gold-line);
  flex-shrink: 0;
}
.eq-parts-search {
  width: 100%;
  padding: 11px 14px;
  background: var(--nx-bg);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--nx-press);
  box-sizing: border-box;
}
.eq-parts-search:focus { border-color: var(--nx-gold); }

.eq-parts-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 14px 0;
  padding: 5px 12px;
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  align-self: flex-start;
}
.eq-parts-filter-chip-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faint);
}
.eq-parts-filter-chip-name {
  color: var(--nx-gold);
  font-weight: 600;
}
.eq-parts-filter-chip-clear {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--nx-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.eq-parts-filter-chip-clear:hover { color: var(--nx-text); }

.eq-parts-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 110px;
}

.eq-parts-loading,
.eq-parts-empty,
.eq-parts-error {
  padding: 50px 24px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  color: var(--nx-faint);
  font-size: 13.5px;
}
.eq-parts-empty-title {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-text);
  margin-bottom: 8px;
}
.eq-parts-empty-msg {
  font-size: 13px;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.55;
}
.eq-parts-empty-msg strong { color: var(--nx-text); }
.eq-parts-error { color: var(--nx-red, var(--nx-red)); }

.eq-parts-intro {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--nx-faint);
  line-height: 1.55;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--nx-gold-line);
  margin-bottom: 16px;
}
.eq-parts-intro strong {
  color: var(--nx-text);
  font-weight: 600;
}

.eq-parts-section-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin: 18px 4px 10px;
}


/* ─── Group header (per parent equipment) ────────────────────────── */

.eq-parts-group {
  margin-bottom: 18px;
}
.eq-parts-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 4px 10px;
  border-bottom: 1px solid var(--nx-gold-line);
  margin-bottom: 8px;
}
.eq-parts-group-title {
  flex: 1 1 auto;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-parts-group-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: var(--nx-faint);
  white-space: nowrap;
}
.eq-parts-group-count {
  flex-shrink: 0;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: var(--nx-faintest);
  text-transform: uppercase;
}
.eq-parts-group-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* ─── Part list card ─────────────────────────────────────────────── */

.eq-part-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color var(--nx-press), background var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-part-card:hover {
  border-color: var(--nx-gold);
  background: var(--nx-gold-mist);
}
.eq-part-card:active { transform: scale(0.99); }

.eq-part-card-photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background-color: var(--nx-surface-2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--nx-gold-line);
}
.eq-part-card-photo-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-faint);
}

.eq-part-card-body { flex: 1 1 auto; min-width: 0; }
.eq-part-card-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
}
.eq-part-card-qty {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--nx-faint);
  margin-left: 4px;
}
.eq-part-card-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: var(--nx-faint);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
}
.eq-part-card-oem {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  color: var(--nx-text);
  background: var(--nx-surface-2);
  padding: 1px 6px;
  border-radius: 4px;
}
.eq-part-card-path {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-style: italic;
  color: var(--nx-faintest);
  margin-top: 2px;
}
.eq-part-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.eq-part-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.eq-part-card-badge-shared {
  background: rgba(110, 163, 181, 0.16);
  color: #6ea3b5;
  border: 1px solid rgba(110, 163, 181, 0.4);
}
[data-theme="light"] .eq-part-card-badge-shared {
  background: rgba(60, 102, 117, 0.1);
  color: #3c6675;
}
.eq-part-card-badge-overdue {
  background: rgba(180, 60, 60, 0.16);
  color: #e07474;
  border: 1px solid rgba(180, 60, 60, 0.4);
}
[data-theme="light"] .eq-part-card-badge-overdue {
  background: rgba(180, 60, 60, 0.1);
  color: var(--nx-red);
}
.eq-part-card-badge-soon {
  background: rgba(214, 145, 46, 0.16);
  color: #d6912e;
  border: 1px solid rgba(214, 145, 46, 0.4);
}
.eq-part-card-arrow {
  flex-shrink: 0;
  color: var(--nx-faint);
}


/* ─── Detail tabs ────────────────────────────────────────────────── */

.eq-parts-tabs {
  display: flex;
  gap: 0;
  padding: 0 8px;
  background: var(--nx-surface-1);
  border-bottom: 1px solid var(--nx-gold-line);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eq-parts-tabs::-webkit-scrollbar { display: none; }
.eq-parts-tab {
  flex: 0 0 auto;
  padding: 13px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-parts-tab:hover { color: var(--nx-text); }
.eq-parts-tab.is-active {
  color: var(--nx-gold);
  border-bottom-color: var(--nx-gold);
  font-weight: 600;
}


/* ─── Overview: photo + form ─────────────────────────────────────── */

.eq-part-overview {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.eq-part-photo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.eq-part-photo-btn {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 22px;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--nx-press);
}
.eq-part-photo-btn:active { transform: scale(0.97); }
.eq-part-photo-img {
  width: 140px;
  height: 140px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid var(--nx-gold-line);
  display: block;
}
.eq-part-photo-placeholder {
  width: 140px;
  height: 140px;
  border-radius: 20px;
  background: var(--nx-surface-1);
  border: 1px dashed var(--nx-gold-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-faint);
}
.eq-part-photo-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nx-gold);
  color: var(--nx-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--nx-bg);
  pointer-events: none;
}
[data-theme="light"] .eq-part-photo-badge { color: #fff; }

.eq-part-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.eq-part-form-section {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-gold);
  margin: 8px 0 -4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--nx-gold-line);
}
.eq-part-form-row {
  display: flex;
  gap: 10px;
}
.eq-part-form-row .eq-part-form-field { flex: 1 1 auto; min-width: 0; }
.eq-part-form-field { display: flex; flex-direction: column; }
.eq-part-form-label {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin-bottom: 6px;
}
.eq-part-form-hint {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nx-faintest);
  margin-left: 4px;
}
.eq-part-form-input,
.eq-part-form-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color var(--nx-press);
  box-sizing: border-box;
}
.eq-part-form-input:focus,
.eq-part-form-textarea:focus { border-color: var(--nx-gold); }
.eq-part-form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.eq-part-form-delete {
  margin-top: 14px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  transition: color var(--nx-press), border-color var(--nx-press), background var(--nx-press);
}
.eq-part-form-delete:hover {
  color: var(--nx-red, var(--nx-red));
  border-color: var(--nx-red-soft, rgba(180, 60, 60, 0.4));
  background: var(--nx-red-soft, rgba(180, 60, 60, 0.06));
}

.eq-part-due-banner {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  color: var(--nx-text);
  line-height: 1.4;
}
.eq-part-due-banner svg { color: var(--nx-gold); flex-shrink: 0; }
.eq-part-due-banner.is-soon {
  background: rgba(214, 145, 46, 0.1);
  border-color: rgba(214, 145, 46, 0.4);
}
.eq-part-due-banner.is-soon svg { color: #d6912e; }
.eq-part-due-banner.is-overdue {
  background: rgba(180, 60, 60, 0.1);
  border-color: rgba(180, 60, 60, 0.4);
}
.eq-part-due-banner.is-overdue svg { color: var(--nx-red, var(--nx-red)); }


/* ─── History tab ────────────────────────────────────────────────── */

.eq-part-history {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 4px;
}
.eq-part-history-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  position: relative;
}
.eq-part-history-marker {
  flex-shrink: 0;
  width: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eq-part-history-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nx-gold-line);
  border: 2px solid var(--nx-bg);
  margin-top: 4px;
  flex-shrink: 0;
  transition: background var(--nx-press);
}
.eq-part-history-row.is-latest .eq-part-history-dot {
  background: var(--nx-gold);
  box-shadow: 0 0 0 2px var(--nx-bg), 0 0 8px rgba(212, 164, 78, 0.4);
}
.eq-part-history-line {
  flex: 1 1 auto;
  width: 2px;
  background: var(--nx-gold-line);
  margin-top: 4px;
}
.eq-part-history-body { flex: 1 1 auto; min-width: 0; }
.eq-part-history-date {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nx-text);
}
.eq-part-history-badge {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--nx-gold);
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
}
.eq-part-history-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--nx-faint);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
}
.eq-part-history-cost {
  color: var(--nx-gold);
  font-weight: 600;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
}
.eq-part-history-by {
  font-style: italic;
  color: var(--nx-faintest);
}


/* ─── Compatibility tab ──────────────────────────────────────────── */

.eq-part-compat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.eq-part-compat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 15px;
}
.eq-part-compat-row.is-primary {
  border-color: var(--nx-gold);
  background: var(--nx-gold-mist);
}
.eq-part-compat-info { flex: 1 1 auto; min-width: 0; }
.eq-part-compat-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--nx-text);
}
.eq-part-compat-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: var(--nx-faint);
  margin-top: 2px;
}
.eq-part-compat-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--nx-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--nx-press), background var(--nx-press), border-color var(--nx-press);
}
.eq-part-compat-remove:hover {
  color: var(--nx-red, var(--nx-red));
  background: var(--nx-red-soft, rgba(180, 60, 60, 0.08));
  border-color: var(--nx-red-soft, rgba(180, 60, 60, 0.4));
}

.eq-part-compat-add {
  width: 100%;
  padding: 12px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--nx-press);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89968' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.eq-part-compat-add:focus { border-color: var(--nx-gold); }


/* ─── Sticky footer (Overview tab) ───────────────────────────────── */

.eq-parts-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--nx-bg) 75%, transparent);
  z-index: 10;
}
.eq-parts-foot-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter var(--nx-press), transform var(--nx-press), background var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-parts-foot-btn:active { transform: scale(0.98); }
.eq-parts-foot-btn-primary {
  background: linear-gradient(135deg, var(--nx-gold), var(--nx-gold-strong, var(--nx-gold)));
  color: var(--nx-bg);
  border-color: var(--nx-gold-strong, var(--nx-gold));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
[data-theme="light"] .eq-parts-foot-btn-primary { color: #fff; }
.eq-parts-foot-btn-primary:hover { filter: brightness(1.05); }
.eq-parts-foot-btn-secondary {
  background: var(--nx-gold-mist);
  color: var(--nx-text);
  border-color: var(--nx-gold-line);
}
.eq-parts-foot-btn-secondary:hover {
  background: var(--nx-gold-faint);
  border-color: var(--nx-gold);
}


/* ═══════════════════════════════════════════════════════════════════
   PARTS — BULK COMPATIBILITY APPLY
   ═══════════════════════════════════════════════════════════════════
   Multi-select sheet for marking a part compatible with many equipment
   units at once. Same-brand units float to the top with a badge.
   ═══════════════════════════════════════════════════════════════════ */

.eq-part-compat-bulk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  border: 0;
  border-radius: 16px;
  color: var(--nx-bg);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: filter var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 12px;
}
[data-theme="light"] .eq-part-compat-bulk-btn { color: #fff; }
.eq-part-compat-bulk-btn:hover { filter: brightness(1.05); }
.eq-part-compat-bulk-btn:active { transform: scale(0.98); }

.eq-part-compat-or {
  text-align: center;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nx-faintest);
  margin-bottom: 8px;
}

/* Multi-select item — same base styling as bulk-sheet-item, with checkbox + same-brand badge */
.eq-bulk-apply-item {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  position: relative;
}
.eq-bulk-apply-item.is-selected {
  background: var(--nx-gold-mist) !important;
  border-color: var(--nx-gold) !important;
}
.eq-bulk-apply-item.is-same-brand {
  border-left: 3px solid var(--nx-gold);
}
.eq-bulk-apply-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--nx-gold-line);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-bg);
  transition: background var(--nx-press), border-color var(--nx-press);
}
.eq-bulk-apply-item.is-selected .eq-bulk-apply-check {
  background: var(--nx-gold);
  border-color: var(--nx-gold);
}
.eq-bulk-sheet-item-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.eq-bulk-apply-badge {
  flex-shrink: 0;
  align-self: center;
  padding: 3px 8px;
  background: rgba(212, 164, 78, 0.16);
  color: var(--nx-gold);
  border: 1px solid rgba(212, 164, 78, 0.4);
  border-radius: 999px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 8.5px;
  letter-spacing: 1.2px;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════
   OVERFLOW MENU — section labels + divider for the enriched menu
   ═══════════════════════════════════════════════════════════════════
   The detail action bar's ⋯ overflow now contains 7 items grouped
   into Operate / Manage / Danger sections. Visual labels keep the
   menu scannable instead of feeling like a wall of buttons.
   ═══════════════════════════════════════════════════════════════════ */

.eq-overflow-section-label {
  /* Grey kicker label above each group of items. Mono-font, uppercase,
     small — same idiom as the analytics section labels so the menu
     reads as part of the same design system. */
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--nx-faintest);
  padding: 8px 14px 4px;
  pointer-events: none;
  user-select: none;
}
.eq-overflow-section-label:first-child {
  padding-top: 4px;
}

.eq-overflow-divider {
  height: 1px;
  background: var(--nx-gold-line);
  margin: 4px 0;
  opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════════════════
   TOOLS ROW — workspace launchers
   ═══════════════════════════════════════════════════════════════════
   Sits below the action buttons, above search. Quick access to the
   four fleet-wide management overlays: Contractors, Parts, Analytics,
   Brand Library. Pill-shaped buttons with icon + label; horizontal
   scroll if narrow.
   ═══════════════════════════════════════════════════════════════════ */

.eq-tools-row {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 0 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.eq-tools-row::-webkit-scrollbar {
  display: none;
}

.eq-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background var(--nx-press), border-color var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-tool-btn:hover {
  border-color: var(--nx-gold);
  background: rgba(212, 164, 78, 0.18);
}
.eq-tool-btn:active {
  transform: scale(0.97);
}
.eq-tool-icon {
  display: inline-flex;
  color: var(--nx-gold);
}
.eq-tool-icon svg {
  display: block;
}
.eq-tool-label {
  color: var(--nx-text);
}

@media (max-width: 380px) {
  /* On the narrowest phones, abbreviate to icon-only to fit four
     buttons across without truncation. */
  .eq-tool-btn { padding: 9px 11px; gap: 0; }
  .eq-tool-label { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   CONTRACTOR ↔ EQUIPMENT LINK CHIP
   ═══════════════════════════════════════════════════════════════════
   Shown in the equipment edit form when a contractor is FK-linked,
   and as a chip on contractor's equipment tab when a unit is linked
   by name only (so the user can promote it to a permanent link).
   ═══════════════════════════════════════════════════════════════════ */

.eq-contractor-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px 5px 8px;
  background: rgba(212, 164, 78, 0.14);
  border: 1px solid rgba(212, 164, 78, 0.4);
  border-radius: 999px;
  color: var(--nx-gold);
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.eq-contractor-link-chip-icon { font-size: 11px; }
.eq-contractor-link-chip-text { color: var(--nx-text); }
.eq-contractor-link-chip-unlink {
  background: transparent;
  border: 0;
  color: var(--nx-faint);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  margin-left: 2px;
}
.eq-contractor-link-chip-unlink:hover { color: var(--nx-text); }

/* Loose-link chip in the contractor's Equipment tab — yellow caution
   styling so it's clear this link is informal and could be made stronger */
.eq-contractor-eq-row.is-loose-link {
  border-left: 3px solid rgba(212, 164, 78, 0.5);
}
.eq-contractor-eq-loose-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(212, 164, 78, 0.10);
  border: 1px solid rgba(212, 164, 78, 0.3);
  border-radius: 999px;
  color: var(--nx-gold);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9px;
  letter-spacing: 0.6px;
  font-weight: 500;
  vertical-align: middle;
  text-transform: lowercase;
}
.eq-contractor-eq-promote-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 4px 10px;
  background: var(--nx-gold);
  color: var(--nx-bg);
  border: 0;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  text-transform: none;
}
[data-theme="light"] .eq-contractor-eq-promote-btn { color: #fff; }
.eq-contractor-eq-promote-btn:hover { filter: brightness(1.05); }
.eq-contractor-eq-promote-btn:active { transform: scale(0.97); }


/* ═══════════════════════════════════════════════════════════════════
   CONTRACTOR EDIT — multi-phone / multi-email rows
   ═══════════════════════════════════════════════════════════════════ */

.eq-contractor-multi-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.eq-contractor-multi-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eq-contractor-multi-input {
  flex: 1 1 auto;
  min-width: 0;
}
.eq-contractor-multi-label {
  flex: 0 0 130px;
  min-width: 80px;
  font-size: 12.5px;
  color: var(--nx-faint);
}
.eq-contractor-multi-role {
  flex: 0 0 76px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--nx-gold);
  cursor: pointer;
}
.eq-contractor-multi-remove {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--nx-gold-line);
  background: transparent;
  color: var(--nx-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--nx-press), color var(--nx-press), border-color var(--nx-press);
}
.eq-contractor-multi-remove:hover {
  background: rgba(180, 60, 60, 0.10);
  border-color: rgba(180, 60, 60, 0.4);
  color: var(--nx-red, var(--nx-red));
}
.eq-contractor-multi-add {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-gold);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--nx-press), border-color var(--nx-press);
}
.eq-contractor-multi-add:hover {
  background: var(--nx-gold-mist);
  border-color: var(--nx-gold);
  border-style: solid;
}

@media (max-width: 480px) {
  /* Stack the multi-row inputs on narrow phones — phone + label
     side-by-side gets too cramped at <380px. */
  .eq-contractor-multi-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .eq-contractor-multi-label,
  .eq-contractor-multi-role {
    flex: 1 1 calc(100% - 40px);
  }
  .eq-contractor-multi-remove {
    flex: 0 0 32px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   CONTRACTOR EQUIPMENT TAB — top actions (assign + bulk-PM)
   ═══════════════════════════════════════════════════════════════════ */

.eq-contractor-eq-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.eq-contractor-eq-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter var(--nx-press), transform var(--nx-press), background var(--nx-press), border-color var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-contractor-eq-action-btn:active { transform: scale(0.98); }
.eq-contractor-eq-action-primary {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  color: var(--nx-bg);
  border-color: var(--nx-gold);
}
[data-theme="light"] .eq-contractor-eq-action-primary { color: #fff; }
.eq-contractor-eq-action-primary:hover { filter: brightness(1.05); }
.eq-contractor-eq-action-secondary {
  background: var(--nx-gold-mist);
  color: var(--nx-text);
  border-color: var(--nx-gold-line);
}
.eq-contractor-eq-action-secondary:hover {
  border-color: var(--nx-gold);
  background: rgba(212, 164, 78, 0.18);
}


/* ═══════════════════════════════════════════════════════════════════
   PUBLIC SCAN — contact card with Call + Email actions
   ═══════════════════════════════════════════════════════════════════
   Sits between the equipment fields and the Service History section
   on the public QR scan page. Big tappable Call button on top, Email
   button below, with a roster of alternate phones if the contractor
   has more than one number.
   ═══════════════════════════════════════════════════════════════════ */

.public-scan-contact-card {
  margin: 18px 0;
  padding: 14px 14px 12px;
  background: rgba(212, 164, 78, 0.06);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
}
.public-scan-contact-name {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--nx-text);
  margin-bottom: 10px;
  letter-spacing: 0.1px;
}
.public-scan-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.public-scan-contact-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter var(--nx-press), transform var(--nx-press);
}
.public-scan-contact-btn:active { transform: scale(0.98); }
.public-scan-contact-call {
  background: linear-gradient(135deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  color: var(--nx-bg);
  border-color: var(--nx-gold);
  box-shadow: 0 6px 16px rgba(212, 164, 78, 0.3);
}
[data-theme="light"] .public-scan-contact-call { color: #fff; }
.public-scan-contact-call:hover { filter: brightness(1.05); }
.public-scan-contact-email {
  background: var(--nx-gold-mist);
  color: var(--nx-text);
  border-color: var(--nx-gold-line);
}
.public-scan-contact-email:hover {
  border-color: var(--nx-gold);
}
.public-scan-contact-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.public-scan-contact-email .public-scan-contact-icon {
  background: var(--nx-gold-mist);
  color: var(--nx-gold);
}
.public-scan-contact-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
}
.public-scan-contact-label {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.public-scan-contact-value {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  letter-spacing: 0.3px;
  opacity: 0.85;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.public-scan-contact-extra {
  flex: 0 0 auto;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.public-scan-contact-email .public-scan-contact-extra {
  background: var(--nx-gold);
  color: var(--nx-bg);
}
[data-theme="light"] .public-scan-contact-email .public-scan-contact-extra { color: #fff; }

.public-scan-contact-extras {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--nx-gold-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.public-scan-contact-extra-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--nx-text);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  transition: background var(--nx-press);
}
.public-scan-contact-extra-row:hover {
  background: var(--nx-gold-mist);
}
.public-scan-contact-extra-label {
  color: var(--nx-faint);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
}
.public-scan-contact-extra-value {
  color: var(--nx-gold);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════
   CONTRACTOR EQUIPMENT TAB — per-location groups
   ═══════════════════════════════════════════════════════════════════
   With 3 restaurants, the contractor's assigned equipment is grouped
   by location so the user can run separate PM rounds per restaurant.
   Each location header has its own row of bulk actions.
   ═══════════════════════════════════════════════════════════════════ */

.eq-contractor-loc-group {
  margin-bottom: 16px;
  padding: 10px 10px 10px 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.eq-contractor-loc-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}
.eq-contractor-loc-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: var(--nx-text);
}
.eq-contractor-loc-count {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  text-transform: uppercase;
}
.eq-contractor-loc-pm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  background: var(--nx-gold-mist);
  border: 1px solid var(--nx-gold-line);
  border-radius: 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--nx-press), border-color var(--nx-press);
}
.eq-contractor-loc-pm-btn:hover {
  border-color: var(--nx-gold);
  background: rgba(212, 164, 78, 0.16);
  color: var(--nx-gold);
}
.eq-contractor-loc-pm-btn:active { transform: scale(0.98); }

.eq-contractor-loc-promote {
  display: flex;
  justify-content: center;
  margin: 10px 0 4px;
}


/* ═══════════════════════════════════════════════════════════════════
   ROW AVATAR — equipment photo as primary, manufacturer letter fallback
   ═══════════════════════════════════════════════════════════════════
   When equipment has a photo_url, render it as the row's leading
   avatar (more recognizable than a colored letter). The whole avatar
   target is tappable for quick photo replace — opens the camera/gallery
   picker without leaving the list view.
   ═══════════════════════════════════════════════════════════════════ */

.eq-cat-icon-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;          /* squared, not circular — reads as "photo" */
  overflow: hidden;
  flex: 0 0 38px;
  background: var(--elevated);
  border: 1px solid var(--nx-gold-line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--nx-press), border-color var(--nx-press);
}
.eq-cat-icon-photo:active {
  transform: scale(0.94);
  border-color: var(--nx-gold);
}
.eq-cat-icon-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* If the <img> errors, JS removes it and adds .photo-failed; show the
   letter fallback so the row never looks broken. */
.eq-cat-icon-photo.photo-failed::after {
  content: '?';
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 16px;
  color: var(--nx-faint);
}

/* Letter-circle avatars also become tappable so users can ADD a
   photo via the same flow — gives a subtle gold halo on press to
   hint at interactivity. */
.eq-cat-icon-with-logo[data-action="quick-photo"] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--nx-press), filter var(--nx-press);
}
.eq-cat-icon-with-logo[data-action="quick-photo"]:active {
  transform: scale(0.94);
  filter: brightness(1.12);
}


/* ═══════════════════════════════════════════════════════════════════
   CONTRACTOR CARD v38 — tighter, no awkward wraps
   ═══════════════════════════════════════════════════════════════════
   Chevron-only right column instead of timestamp + chevron, so the
   card body has full horizontal room. Last-seen timestamp merges into
   the meta line as a final segment. Stats line stays single-row.
   ═══════════════════════════════════════════════════════════════════ */

.eq-contractor-card-chev {
  flex: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-faint);
  align-self: center;
}
.eq-contractor-card-when-inline {
  color: var(--nx-faint);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: lowercase;
}
.eq-contractor-card-stats {
  margin-top: 4px;
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--nx-faint);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-contractor-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--nx-faint);
  line-height: 1.4;
}
.eq-contractor-card-meta .eq-contractor-card-sep {
  color: var(--nx-fainter, rgba(255,255,255,0.18));
}
.eq-contractor-card-phone {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--nx-text);
}
.eq-contractor-card-tags {
  font-style: italic;
  color: var(--nx-gold);
}


/* ═══════════════════════════════════════════════════════════════════
   BEACON HALO INTENSITY v40 — visual urgency
   ═══════════════════════════════════════════════════════════════════
   The lifecycle beacon is the visual heartbeat. Different states get
   different intensities of glow + pulse so a quick scan of the list
   tells you what needs attention.

     OPERATIONAL        steady gold glow (calm)
     PM SOON / NEEDS    breathing amber glow
     DOWN / BROKEN      strong oxblood pulse (urgent)
     OVERDUE PM         amber edge ring overlay
     OPEN ISSUE         stronger halo regardless of base state

   Note: respects prefers-reduced-motion — animations stop for users
   who've opted out at the OS level.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes eq-pulse-urgent {
  0%, 100% {
    box-shadow:
      0 0 0   0   rgba(180, 60, 60, 0.55),
      0 0 12px 2px rgba(180, 60, 60, 0.35);
  }
  50% {
    box-shadow:
      0 0 0   8px rgba(180, 60, 60, 0.0),
      0 0 18px 4px rgba(180, 60, 60, 0.55);
  }
}
@keyframes eq-pulse-warn {
  0%, 100% { box-shadow: 0 0 8px  1px rgba(212, 164, 78, 0.30); }
  50%      { box-shadow: 0 0 14px 3px rgba(212, 164, 78, 0.55); }
}
@keyframes eq-pulse-soft {
  0%, 100% { box-shadow: 0 0 6px  1px rgba(212, 164, 78, 0.25); }
  50%      { box-shadow: 0 0 10px 2px rgba(212, 164, 78, 0.40); }
}

.eq-col-status .eq-lc-pill.is-operational {
  animation: eq-pulse-soft 4s ease-in-out infinite;
}
.eq-col-status .eq-lc-pill.is-needs-service,
.eq-col-status .eq-lc-pill.is-reported,
.eq-col-status .eq-lc-pill.is-contractor-called,
.eq-col-status .eq-lc-pill.is-eta-set,
.eq-col-status .eq-lc-pill.is-awaiting-parts {
  animation: eq-pulse-warn 2.4s ease-in-out infinite;
  border-color: rgba(212, 164, 78, 0.55);
}
.eq-col-status .eq-lc-pill.is-down,
.eq-col-status .eq-lc-pill.is-broken {
  animation: eq-pulse-urgent 1.6s ease-in-out infinite;
  border-color: rgba(180, 60, 60, 0.7);
}
.eq-col-status .eq-lc-pill.is-retired,
.eq-col-status .eq-lc-pill.is-muted {
  /* No animation for retired/muted — calm and final */
  opacity: 0.6;
}

/* Overdue PM ring overlay — amber edge ring on top of whatever the
   underlying status is. Used for equipment with status=operational
   but next_pm_date in the past. Adds the visual cue without changing
   the base color. */
.eq-col-status .eq-lc-pill.is-overdue-pm {
  outline: 2px solid rgba(212, 164, 78, 0.7);
  outline-offset: 2px;
}

/* Open issue (independent of status) — boosts the halo */
.eq-col-status .eq-lc-pill.has-open-issue {
  box-shadow: 0 0 18px 4px rgba(212, 164, 78, 0.5) !important;
}

/* Tappable hint — beacon is interactive everywhere it appears as a
   primary status indicator: list rows AND the detail header. One pill,
   one affordance, same one-tap-to-change-status workflow.

   The :active scale gives tactile feedback on touch devices; the
   :hover lift only fires where hover actually exists (desktop) so we
   don't get phantom lifts from sticky tap states on mobile. */
.eq-col-status .eq-lc-pill,
.eq-detail-status .eq-lc-pill {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    transform var(--nx-press, 120ms ease-out),
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}
.eq-col-status .eq-lc-pill:active,
.eq-detail-status .eq-lc-pill:active {
  transform: scale(0.92);
}
@media (hover: hover) and (pointer: fine) {
  .eq-col-status .eq-lc-pill:hover,
  .eq-detail-status .eq-lc-pill:hover {
    transform: translateY(-1px);
  }
}
.eq-detail-status .eq-lc-pill:focus-visible {
  outline: 2px solid var(--nx-gold, #d4a44e);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .eq-col-status .eq-lc-pill,
  .eq-detail-status .eq-lc-pill {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   QUICK STATUS POPOVER v40 — tap beacon to change status
   ═══════════════════════════════════════════════════════════════════
   Anchored to the tapped lifecycle pill in the equipment list. Four
   common statuses one tap away, current state shown with a checkmark.
   "More options" punches through to the full editor for the long-tail
   states (loaned, missing, relocated).
   ═══════════════════════════════════════════════════════════════════ */

.eq-quick-status-pop {
  position: absolute;
  z-index: 10000;
  min-width: 200px;
  max-width: 260px;
  padding: 12px 12px 10px;
  background: var(--elevated, #15161a);
  border: 1px solid var(--nx-gold-line);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  animation: eq-pop-in 140ms ease-out;
}
@keyframes eq-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.eq-quick-status-pop-arrow {
  position: absolute;
  bottom: -7px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: var(--elevated, #15161a);
  border-right: 1px solid var(--nx-gold-line);
  border-bottom: 1px solid var(--nx-gold-line);
  transform: rotate(45deg);
}
.eq-quick-status-pop.is-below .eq-quick-status-pop-arrow {
  top: -7px;
  bottom: auto;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid var(--nx-gold-line);
  border-left: 1px solid var(--nx-gold-line);
}
.eq-quick-status-pop-title {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--nx-gold);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-quick-status-pop-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eq-quick-status-pop-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--nx-press, 120ms ease-out);
}
.eq-quick-status-pop-btn:hover,
.eq-quick-status-pop-btn:active {
  background: rgba(212, 164, 78, 0.08);
}
.eq-quick-status-pop-btn.is-current {
  background: rgba(212, 164, 78, 0.12);
}
.eq-quick-status-pop-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nx-faint, #555);
}
.eq-quick-status-pop-btn.is-operational   .eq-quick-status-pop-dot { background: var(--nx-green, #6a9b5e); box-shadow: 0 0 6px rgba(106,155,94,0.55); }
.eq-quick-status-pop-btn.is-needs-service .eq-quick-status-pop-dot { background: var(--nx-amber, #d4a44e); box-shadow: 0 0 6px rgba(212,164,78,0.55); }
.eq-quick-status-pop-btn.is-down          .eq-quick-status-pop-dot { background: var(--nx-red,   var(--nx-red)); box-shadow: 0 0 6px rgba(180,60,60,0.55); }
.eq-quick-status-pop-btn.is-retired       .eq-quick-status-pop-dot { background: var(--nx-faint); opacity: 0.5; }
.eq-quick-status-pop-label { flex: 1 1 auto; }
.eq-quick-status-pop-check {
  color: var(--nx-gold);
  font-weight: 700;
}
.eq-quick-status-pop-more {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--nx-gold-line);
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.2px;
  cursor: pointer;
  text-align: center;
}
.eq-quick-status-pop-more:hover {
  color: var(--nx-gold);
}


/* ═══════════════════════════════════════════════════════════════════
   PROMINENT LOCATION BAR v40
   ═══════════════════════════════════════════════════════════════════
   Top-priority filter — when you're walking between 3 restaurants
   and need to see "what's at Bar Toti only", this is the fastest
   tap. Each chip shows the equipment count for that location.
   ═══════════════════════════════════════════════════════════════════ */

.eq-location-bar {
  display: flex;
  gap: 6px;
  padding: 6px 0 12px;
  margin: 4px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.eq-location-bar::-webkit-scrollbar { display: none; }

.eq-loc-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 14px;
  background: var(--elevated, #15161a);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--nx-press, 120ms ease-out),
    border-color var(--nx-press, 120ms ease-out),
    transform var(--nx-press, 120ms ease-out);
}
.eq-loc-chip:active { transform: scale(0.96); }
.eq-loc-chip:hover {
  border-color: var(--nx-gold);
  background: rgba(212, 164, 78, 0.06);
}
.eq-loc-chip.active {
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  border-color: var(--nx-gold);
  color: var(--nx-bg, #0a0a0a);
}
[data-theme="light"] .eq-loc-chip.active { color: #fff; }

.eq-loc-chip-name {
  font-weight: 600;
  letter-spacing: 0.1px;
}
.eq-loc-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 6px;
  background: rgba(212, 164, 78, 0.18);
  color: var(--nx-gold);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 999px;
}
.eq-loc-chip.active .eq-loc-chip-count {
  background: rgba(0, 0, 0, 0.2);
  color: var(--nx-bg, #0a0a0a);
}
[data-theme="light"] .eq-loc-chip.active .eq-loc-chip-count { color: #fff; background: rgba(255,255,255,0.25); }


/* ═══════════════════════════════════════════════════════════════════
   DUPLICATE CONTRACTOR MERGE TOOL v40
   ═══════════════════════════════════════════════════════════════════
   Overlay listing groups of contractors with the same name. Each
   group shows side-by-side cards: the canonical (KEEP) and the
   duplicates (MERGE IN), with quick stats so the user can sanity-check
   before tapping Merge.
   ═══════════════════════════════════════════════════════════════════ */

.eq-contractors-dup-hint {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  background: rgba(212, 164, 78, 0.18);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  color: var(--nx-gold);
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--nx-press, 120ms);
}
.eq-contractors-dup-hint:hover {
  background: rgba(212, 164, 78, 0.28);
}

.eq-dedupe-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.eq-dedupe-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  animation: eq-fade-in 200ms ease-out;
}
@keyframes eq-fade-in { from { opacity: 0; } to { opacity: 1; } }

.eq-dedupe-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  background: var(--bg, #0a0a0a);
  border-top: 1px solid var(--nx-gold-line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.5);
  animation: eq-slide-up 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes eq-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.eq-dedupe-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border, #2a2a2a);
}
.eq-dedupe-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.eq-dedupe-head-text { flex: 1 1 auto; }
.eq-dedupe-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: var(--nx-text);
}
.eq-dedupe-sub {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--nx-faint);
  text-transform: uppercase;
  margin-top: 2px;
}

.eq-dedupe-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px 24px;
}
.eq-dedupe-group {
  background: var(--elevated, #15161a);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
}
.eq-dedupe-group-name {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--nx-text);
  margin-bottom: 10px;
}
.eq-dedupe-group-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 540px) {
  .eq-dedupe-group-cards {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
.eq-dedupe-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 14px;
  padding: 10px;
}
.eq-dedupe-card.is-canonical {
  border-color: var(--nx-gold);
  background: rgba(212, 164, 78, 0.06);
}
.eq-dedupe-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.eq-dedupe-card-id {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: var(--nx-faint);
  letter-spacing: 0.5px;
}
.eq-dedupe-card-keep,
.eq-dedupe-card-merge {
  font-family: var(--nx-font-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 999px;
}
.eq-dedupe-card-keep {
  background: var(--nx-gold);
  color: var(--bg, #0a0a0a);
}
[data-theme="light"] .eq-dedupe-card-keep { color: #fff; }
.eq-dedupe-card-merge {
  background: rgba(180, 60, 60, 0.18);
  color: var(--nx-red, var(--nx-red));
  border: 1px solid rgba(180, 60, 60, 0.3);
}
.eq-dedupe-card-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  color: var(--nx-faint);
  line-height: 1.4;
}
.eq-dedupe-merge-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: linear-gradient(180deg, var(--nx-gold), var(--nx-gold-deep, #a8821e));
  color: var(--bg, #0a0a0a);
  border: 0;
  border-radius: 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 120ms, transform 120ms;
}
[data-theme="light"] .eq-dedupe-merge-btn { color: #fff; }
.eq-dedupe-merge-btn:hover { filter: brightness(1.05); }
.eq-dedupe-merge-btn:active { transform: scale(0.98); }
.eq-dedupe-merge-btn:disabled { opacity: 0.6; cursor: progress; }

/* ═══════════════════════════════════════════════════════════════════════
   Equipment row beacon alignment fix (2026-05-06)

   Problem: equipment-system.css forces `#equipmentView .eq-row { display:
   flex !important }`, which kills the mobile grid layout in this file
   (lines ~245-301). With flex packing, the lifecycle beacon ends up
   wherever the location text happens to end — column position varies row
   by row, looking ragged.

   Fix: a higher-specificity `#equipmentView .eq-list .eq-row` grid rule
   with !important that wins by specificity (1,2,0 > 1,1,0). Beacon lives
   in a fixed-width rightmost column that doesn't move regardless of how
   long or short the location text is.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   EQUIPMENT — SECTION CARD HOLDERS (collapsible group containers)
   ─────────────────────────────────────────────────────────────────────
   Equipment cards now render inside collapsible section containers,
   one per .section value. Section headers can collapse / rename, but
   are NEVER deletable — they vanish naturally when every equipment
   row is moved out. Mirrors the ordering catalog editor's section
   pattern visually so the two modules feel unified.
   ═══════════════════════════════════════════════════════════════════════ */

#equipmentView .eq-section {
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 20px;
  margin: 14px;
  overflow: hidden;
  transition: border-color .15s;
}
#equipmentView .eq-section:hover {
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
}

#equipmentView .eq-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--nx-surface-2, transparent);
  border-bottom: 1px solid var(--nx-gold-line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#equipmentView .eq-section.is-collapsed .eq-section-head {
  border-bottom-color: transparent;
}

#equipmentView .eq-section-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--nx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

#equipmentView .eq-section-count {
  flex-shrink: 0;
  background: var(--nx-gold-faint);
  color: var(--nx-gold);
  border-radius: 999px;
  padding: 2px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#equipmentView .eq-section-rename,
#equipmentView .eq-section-collapse {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--nx-faint);
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s, transform .2s;
  -webkit-tap-highlight-color: transparent;
}
#equipmentView .eq-section-rename:hover,
#equipmentView .eq-section-collapse:hover {
  color: var(--nx-text);
  background: var(--nx-gold-faint);
}
#equipmentView .eq-section-rename:active,
#equipmentView .eq-section-collapse:active {
  transform: scale(0.92);
}

/* Chevron rotation for collapse state */
#equipmentView .eq-section-collapse svg {
  transition: transform .2s ease;
}
#equipmentView .eq-section.is-collapsed .eq-section-collapse svg {
  transform: rotate(-90deg);
}

/* Body — slides closed when collapsed. Uses max-height instead of
   display:none so the chevron rotation has something to animate
   against. 4000px upper bound covers any plausible section size. */
#equipmentView .eq-section-body {
  max-height: 4000px;
  overflow: hidden;
  transition: max-height .25s ease;
}
#equipmentView .eq-section.is-collapsed .eq-section-body {
  max-height: 0;
}

/* Equipment rows inside a section — strip the outer margin since
   the section card already provides side margins. Bottom margin
   inside the section gives the cards breathing room from each other
   and from the section header / footer. */
#equipmentView .eq-section .eq-rows {
  padding: 6px 0 10px;
}
#equipmentView .eq-section .eq-rows .eq-row {
  margin: 6px 10px !important;
  width: calc(100% - 20px) !important;
}

/* ─── Sort mode picker — pills above the section list ───────────── */
#equipmentView .eq-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 0;
  flex-wrap: wrap;
}
#equipmentView .eq-sort-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faint);
  margin-right: 4px;
}
#equipmentView .eq-sort-mode {
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nx-faint);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
#equipmentView .eq-sort-mode:hover {
  color: var(--nx-text);
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
}
#equipmentView .eq-sort-mode.active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  border-color: var(--nx-gold);
  box-shadow: 0 0 0 1px var(--nx-gold), 0 0 14px rgba(212, 164, 78, 0.32);
}
[data-theme="light"] #equipmentView .eq-sort-mode.active {
  color: var(--surface);
}

/* ─── Section picker modal (Move to section…) ──────────────────── */
.eq-section-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: nxFadeIn .15s ease;
}
@keyframes nxFadeIn { from { opacity: 0; } to { opacity: 1; } }

.eq-section-picker {
  width: 100%;
  max-width: 380px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.eq-section-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nx-gold-line);
}
.eq-section-picker-head h3 {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text);
}
.eq-section-picker-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--nx-faint);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 10px;
}
.eq-section-picker-close:hover {
  background: var(--nx-gold-faint);
  color: var(--nx-text);
}

.eq-section-picker-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 60vh;
  overflow-y: auto;
}
.eq-section-picker-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--nx-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.eq-section-picker-item:hover {
  background: var(--nx-gold-faint);
}
.eq-section-picker-item.is-current {
  color: var(--nx-gold);
}
.eq-section-picker-item.is-new {
  color: var(--nx-gold);
  border-top: 1px solid var(--nx-gold-line);
  margin-top: 6px;
  padding-top: 14px;
}
.eq-section-picker-current {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nx-faint);
}

/* ═══════════════════════════════════════════════════════════════════════
   OBSOLETE GRID OVERRIDES — REMOVED
   ─────────────────────────────────────────────────────────────────────
   This block previously contained two media queries that forced
   `display: grid !important` with grid-template-areas designed for
   the old .eq-col-name / .eq-col-loc / .eq-col-status row structure.
   The row HTML was rewritten to use .eq-row-avatar / .eq-row-main /
   .eq-row-arrow (mirrors ordering's vendor row exactly), and the old
   grid-template-areas didn't match the new class names. Result: the
   avatar collapsed into a 0px column and the main content rendered
   on top of it — that's why names appeared visually clipped on the
   left ("om Rational Oven" instead of "Bottom Rational Oven").

   The new layout uses plain flex (set by equipment-system.css's
   `#equipmentView .eq-row { display: flex !important; ... }` at line
   ~366) with child rules at line 11875+ in this file handling the
   typography and spacing. No grid override needed.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   PARTS LIBRARY PICKER + INLINE SOURCES LIST
   ─────────────────────────────────────────────────────────────────────
   The picker sits at the top of the Add Part modal. As the user types
   it shows existing parts they can pick from — selecting one pre-fills
   the rest of the form. The inline sources list is the multi-vendor
   editor surfaced inside the part detail's Sourcing section, replacing
   the old single-supplier inputs.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Picker (Add Part modal) ─────────────────────────────────────────── */
.eq-part-picker {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.05));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 16px;
  position: relative;
}
.eq-part-picker-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-gold, #d4a44e);
  margin-bottom: 8px;
}
.eq-part-picker-label .eq-part-form-hint {
  text-transform: none;
  letter-spacing: normal;
  color: var(--nx-faint, var(--muted));
  font-weight: 400;
}
.eq-part-picker-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--nx-bg, #0e1320);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22));
  border-radius: 12px;
  color: var(--nx-text, #ede9e0);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .12s ease;
}
.eq-part-picker-input:focus {
  border-color: var(--nx-gold, #d4a44e);
}
[data-theme="light"] .eq-part-picker-input {
  background: var(--bg, #fff);
}

/* Results dropdown */
.eq-part-picker-results {
  margin-top: 8px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  background: var(--nx-bg, #0e1320);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 12px;
}
[data-theme="light"] .eq-part-picker-results {
  background: var(--bg, #fff);
}
.eq-part-picker-result {
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s ease, border-color .1s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.eq-part-picker-result:hover,
.eq-part-picker-result:active {
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.08));
  border-color: var(--nx-gold-line, rgba(212, 164, 78, 0.32));
}
.eq-part-picker-result-name {
  color: var(--nx-text, var(--text));
  font-size: 14px;
  font-weight: 500;
}
.eq-part-picker-result-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.eq-part-picker-result-oem {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--nx-faint, var(--muted));
  letter-spacing: 0.04em;
}
.eq-part-picker-result-sources {
  font-size: 10.5px;
  color: var(--nx-muted, var(--muted));
}
.eq-part-picker-empty {
  padding: 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--nx-faint, var(--muted));
  font-style: italic;
}

/* ── Inline sources list (Part detail → Sourcing) ────────────────────── */
.eq-part-vendors-inline {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.04));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 14px;
}
.eq-part-vendors-loading {
  font-size: 12px;
  color: var(--nx-faint, var(--muted));
  font-style: italic;
  padding: 6px 0;
}
.eq-part-vendors-empty {
  padding: 10px 4px;
  font-size: 12.5px;
  color: var(--nx-faint, var(--muted));
  font-style: italic;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   SERVICED BY — equipment ↔ contractor surface block
   ─────────────────────────────────────────────────────────────────────
   Sits at the top of the equipment detail's Overview tab. Hydrates
   from the assigned contractor record (joined by service_contractor_
   node_id) so all the contractor's data is reachable in one place
   — name, specialty tags ("duties"), phone tap-to-call, and small
   pips showing whether the email engine is wired up (has email
   address, has saved template).
   ═══════════════════════════════════════════════════════════════════════ */

.eq-serviced-by {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.06));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.20));
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eq-serviced-by-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eq-serviced-by-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-gold, #d4a44e);
}
.eq-serviced-by-name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--nx-text, var(--text));
  line-height: 1.2;
}

.eq-serviced-by-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.eq-serviced-by-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.28));
  border-radius: 999px;
  font-size: 11px;
  color: var(--nx-muted, var(--muted));
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.eq-serviced-by-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.eq-serviced-by-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--nx-gold, #d4a44e);
  border: 1px solid var(--nx-gold, #d4a44e);
  border-radius: 999px;
  color: var(--nx-bg, #0e1320);
  text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}
.eq-serviced-by-call:active { transform: scale(0.96); }
.eq-serviced-by-call:hover { text-decoration: none; }
.eq-serviced-by-nophone {
  font-size: 12px;
  color: var(--nx-faint, var(--muted));
  font-style: italic;
}

.eq-serviced-by-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--nx-gold-line, rgba(212, 164, 78, 0.18));
}
.eq-serviced-by-pip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--nx-faint, var(--muted));
  opacity: 0.65;
}
.eq-serviced-by-pip.is-on {
  color: var(--nx-gold, #d4a44e);
  opacity: 1;
}
.eq-serviced-by-pip svg {
  flex-shrink: 0;
}

/* Empty state — nudges the user to Edit Everything → Links to set up
   the relationship. Quieter visual since there's nothing to surface. */
.eq-serviced-by.eq-serviced-by-empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--nx-gold-line, rgba(212, 164, 78, 0.15));
  padding: 12px 14px;
  align-items: center;
  text-align: center;
}
.eq-serviced-by-empty-msg {
  font-size: 13px;
  color: var(--nx-muted, var(--muted));
}
.eq-serviced-by-empty-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--nx-faint, var(--muted));
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════════════
   EQUIPMENT ARCHIVE FLOW + STATUS UNDO BANNER
   ─────────────────────────────────────────────────────────────────────
   Modeled on the orders module's archive/undo system so equipment ops
   feel consistent across NEXUS. Confirm modal for archive, snackbar
   undo for quick status changes.
   ═══════════════════════════════════════════════════════════════════════ */

.eq-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  animation: eq-confirm-fade .15s ease;
}
@keyframes eq-confirm-fade { from { opacity: 0; } to { opacity: 1; } }

.eq-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.eq-confirm-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--nx-surface-solid, #0e1320);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.35));
  border-radius: 18px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.eq-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.12));
  color: var(--nx-gold, #d4a44e);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.eq-confirm-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--nx-text);
}

.eq-confirm-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--nx-muted, var(--muted));
  line-height: 1.45;
}
.eq-confirm-line { color: var(--nx-text); font-size: 14px; margin-top: 2px; }
.eq-confirm-line strong { color: var(--nx-text); font-weight: 600; }
.eq-confirm-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--nx-faint, var(--muted));
}
.eq-confirm-warn {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.06));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 12px;
  font-size: 12.5px;
  text-align: left;
  line-height: 1.5;
}
.eq-confirm-warn strong { color: var(--nx-gold); }

.eq-confirm-actions {
  display: flex;
  width: 100%;
  gap: 10px;
  margin-top: 14px;
}
.eq-confirm-cancel,
.eq-confirm-archive {
  flex: 1;
  height: 44px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.eq-confirm-cancel {
  background: transparent;
  border: 1px solid var(--nx-gold-line);
  color: var(--nx-text);
}
.eq-confirm-archive {
  background: var(--nx-gold);
  border: 1px solid var(--nx-gold);
  color: var(--nx-bg);
}
.eq-confirm-archive:active { transform: scale(0.98); }
.eq-confirm-archive:disabled { opacity: 0.6; cursor: wait; }

/* ═══════════════════════════════════════════════════════════════════════
   STATUS UNDO BANNER — snackbar after quick-status change
   ═══════════════════════════════════════════════════════════════════════ */

.eq-undo-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--nx-surface-solid, #0e1320);
  border: 1px solid var(--nx-gold);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(212, 164, 78, 0.1);
  transform: translateY(120%);
  transition: transform 280ms cubic-bezier(.2,.9,.3,1);
}
.eq-undo-banner.is-shown { transform: translateY(0); }
@media (min-width: 600px) {
  .eq-undo-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 380px;
    width: auto;
    min-width: 340px;
  }
}
.eq-undo-banner-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.12));
  color: var(--nx-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.eq-undo-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eq-undo-banner-title {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nx-text);
}
.eq-undo-banner-sub {
  font-size: 11.5px;
  color: var(--nx-faint, var(--muted));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.eq-undo-banner-btn {
  flex-shrink: 0;
  background: var(--nx-gold);
  color: var(--nx-bg);
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 120ms ease, transform 120ms ease;
}
.eq-undo-banner-btn:active { transform: scale(0.96); filter: brightness(0.95); }
.eq-undo-banner-btn:disabled { opacity: 0.6; cursor: wait; }

/* ═══════════════════════════════════════════════════════════════════════
   EQUIPMENT DETAIL CARDS — mirrors ordering's card pattern
   ─────────────────────────────────────────────────────────────────────
   Each logical group inside the equipment detail (identity, lifecycle,
   specs, notes, attachments, custom fields, links) lives in its own
   gold-line bordered card with a monospace small-caps header. Replaces
   the old flat eq-fields grid pattern that floated values in space
   without containment.
   ═══════════════════════════════════════════════════════════════════════ */

.eq-detail-card {
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.04));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.16));
  border-radius: 16px;
  padding: 14px 16px 16px;
  margin: 0 0 12px;
  position: relative;
}
.eq-detail-card:last-child { margin-bottom: 16px; }

.eq-detail-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--nx-gold, #d4a44e);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.14));
}
.eq-detail-card-head svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.eq-detail-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 18px;
}
.eq-detail-card-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.eq-detail-card-field-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nx-faint, var(--faint));
  font-weight: 500;
}
.eq-detail-card-field-value {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  color: var(--nx-text, var(--text));
  line-height: 1.35;
  font-weight: 500;
  word-break: break-word;
}
.eq-detail-card-field-value a {
  color: var(--nx-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 164, 78, 0.3);
}
.eq-detail-card-field-value a:hover {
  border-bottom-color: var(--nx-gold);
}
.eq-detail-card-unit {
  color: var(--nx-faint, var(--faint));
  font-weight: 400;
  font-size: 13px;
}

.eq-detail-card-prose {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nx-text, var(--text));
  white-space: pre-wrap;
}

/* Override the old .eq-overview-section pattern so it inherits the
   card look automatically — any remaining call sites still styled
   consistently (e.g. the bottom button row uses eq-overview-section
   without an h4). For these residual cases we keep them sectioned
   but without the heavy top border the old pattern had. */
.eq-overview-section {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}
.eq-overview-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--nx-gold, #d4a44e);
  margin: 0 0 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   EQUIPMENT LIST — card-row layout (mirrors ordering vendor cards)
   ─────────────────────────────────────────────────────────────────────
   Replaces the old 5-column table. Each equipment is its own card with
   the same visual language as ordering's vendor rows: avatar on left,
   two-line content stack in the middle, chevron on right. Top line:
   name + PM date. Bottom line: beacon + sub.
   ═══════════════════════════════════════════════════════════════════════ */

.eq-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   EQUIPMENT — LIST ROW (mirrors .ord-vendor-row exactly)
   ─────────────────────────────────────────────────────────────────────
   Same padding, min-height, border-radius, surface, typography, and
   spacing as the ordering vendor card. The only structural difference
   is the meta row holds a beacon pill + sub-line (model · mfr · loc)
   instead of ordering's status pill + preview text. Visual weight is
   intentionally identical so the two modules feel like one app.
   ═══════════════════════════════════════════════════════════════════════ */

/* Higher specificity (#equipmentView .eq-list .eq-row) so this rule wins
   against the more general #equipmentView .eq-row override in
   equipment-system.css. !important on the key sizing properties matches
   equipment-system.css's pattern so neither rule can stomp the other
   into a half-applied state. */
#equipmentView .eq-list .eq-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: calc(100% - 28px) !important;
  margin: 8px 14px !important;
  padding: 20px 18px !important;
  min-height: 88px !important;
  background: var(--nx-surface-1) !important;
  border: 1px solid var(--nx-gold-line) !important;
  border-radius: 22px !important;
  text-align: left;
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--nx-text);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  /* Reset any grid-* properties that might have been set by older rules
     so the flex layout above has no inherited grid leftovers. */
  grid-template-columns: none !important;
  grid-template-areas: none !important;
}
#equipmentView .eq-list .eq-row:hover {
  border-color: var(--nx-gold-line-2, var(--nx-gold-line)) !important;
  background: var(--nx-gold-soft, var(--nx-gold-faint)) !important;
}
#equipmentView .eq-list .eq-row:active {
  transform: scale(0.99);
}

/* Legacy alias — unscoped .eq-row keeps a basic flex setup so any row
   rendered outside #equipmentView (modals, previews) still looks
   reasonable without depending on the scoped rule above. */
.eq-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 28px);
  margin: 8px 14px;
  padding: 20px 18px;
  min-height: 88px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 22px;
  text-align: left;
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--nx-text);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.eq-row:hover {
  border-color: var(--nx-gold-line-2, var(--nx-gold-line));
  background: var(--nx-gold-soft, var(--nx-gold-faint));
}
.eq-row:active {
  transform: scale(0.99);
}

/* Avatar — same treatment as ordering's vendor avatar.
   Default: colored letter on hue-driven background (set inline by JS
   via --avatar-hue). Photo variant: circular background-image, image
   fully clipped to the circle. No logo/icon variants in the row —
   those live in the detail view where they have room to breathe. */
.eq-row-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--avatar-hue, 35), 28%, 32%);
  border: 1px solid hsl(var(--avatar-hue, 35), 35%, 50%);
  color: #f5ecd6;
  overflow: hidden;
  align-self: center;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}
[data-theme="light"] .eq-row-avatar {
  background: hsl(var(--avatar-hue, 35), 32%, 92%);
  border-color: hsl(var(--avatar-hue, 35), 35%, 60%);
  color: hsl(var(--avatar-hue, 35), 35%, 28%);
}

/* Photo variant — image fills the circle as a background. The hue
   colors don't apply because background-image overrides the gradient.
   Border stays neutral so any photo's edge looks intentional. */
.eq-row-avatar.eq-row-avatar-img {
  background-color: var(--nx-surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--nx-gold-line);
  color: transparent;
  font-size: 0;
}
[data-theme="light"] .eq-row-avatar.eq-row-avatar-img {
  background-color: var(--nx-elevated);
  border-color: var(--nx-gold-line);
}
.eq-row-avatar.photo-failed {
  background-image: none !important;
  background-color: var(--nx-gold-faint);
}

/* Main column — name+date row + meta row (beacon + sub) */
.eq-row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.eq-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.eq-row-name {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--nx-text);
  letter-spacing: 0.1px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eq-row-when {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--nx-faint);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.eq-row-when.eq-row-when-empty { color: var(--nx-faintest); font-weight: 400; }
.eq-row-when.is-soon    { color: var(--nx-gold); }
.eq-row-when.is-overdue { color: #d35454; font-weight: 600; }

/* Meta row — beacon pill + sub line (model · mfr · location).
   No overflow:hidden here — that was clipping the leading characters
   of the OPERATIONAL beacon. Each child handles its own truncation. */
.eq-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  min-width: 0;
  flex-wrap: nowrap;
}
.eq-row-meta .eq-lc-pill {
  flex-shrink: 0;
}
.eq-row-sub {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--nx-faint);
  letter-spacing: 0.1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron — muted gold, vertically centered. */
.eq-row-arrow {
  flex-shrink: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--nx-faintest);
  line-height: 1;
  padding-right: 2px;
  user-select: none;
  align-self: center;
}

/* Bulk-selection mode — checkbox affordance. Padding adjusts so the
   row layout doesn't reflow when toggling bulk mode. */
body.eq-bulk-mode .eq-row {
  padding-left: 46px;
}
body.eq-bulk-mode .eq-row::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--nx-gold-line);
  background: var(--nx-bg);
  transition: background 140ms ease, border-color 140ms ease;
}
body.eq-bulk-mode .eq-row.is-selected::before {
  background: var(--nx-gold);
  border-color: var(--nx-gold);
}
body.eq-bulk-mode .eq-row.is-selected::after {
  content: '✓';
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-bg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   OVERFLOW MENU — primary "Edit equipment" item
   ─────────────────────────────────────────────────────────────────────
   The Edit button used to live in the bottom action bar; moved into
   the kebab to keep the bar focused on operational actions (Call
   Service / Report Issue). The primary variant gets a gold-tinted
   background + bold treatment so it reads as the most-used kebab item.
   ═══════════════════════════════════════════════════════════════════════ */

.eq-overflow-item.eq-overflow-item-primary {
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.08));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  border-radius: 14px;
  margin: 4px 6px 4px;
  font-weight: 600;
  color: var(--nx-gold);
}
.eq-overflow-item.eq-overflow-item-primary:hover,
.eq-overflow-item.eq-overflow-item-primary:active {
  background: var(--nx-gold-mist, rgba(212, 164, 78, 0.14));
  border-color: var(--nx-gold);
  color: var(--nx-gold);
}
.eq-overflow-item.eq-overflow-item-primary svg {
  color: var(--nx-gold);
}

/* ═══════════════════════════════════════════════════════════════════════
   EQUIPMENT — LOCATION PROFILE PICKER (top-right of title row)
   ─────────────────────────────────────────────────────────────────────
   Three-pill profile selector matching the ordering module's pattern.
   Tapping a pill switches the entire equipment view to that
   restaurant. Renamed from .eq-loc-picker to .eq-loc-tabs to dodge a
   collision with an older .eq-loc-picker rule (used by the relocate
   modal) that sets flex-direction: column. Explicit flex-direction
   below ensures the pills always render as a horizontal row even if
   the cascade picks up a stray rule from elsewhere.
   ═══════════════════════════════════════════════════════════════════════ */

.eq-loc-tabs {
  display: inline-flex;
  flex-direction: row;        /* explicit — beats any cascade override */
  align-items: center;
  gap: 4px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  padding: 4px;
  flex-shrink: 0;             /* don't let the title squish the pills */
  white-space: nowrap;
}

.eq-loc-tab {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-faint);
  cursor: pointer;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
  white-space: nowrap;
}

.eq-loc-tab:hover {
  color: var(--nx-text);
}

.eq-loc-tab.active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  box-shadow: 0 0 0 1px var(--nx-gold), 0 0 14px rgba(212, 164, 78, 0.32);
}

[data-theme="light"] .eq-loc-tab.active {
  color: var(--surface);
}

/* Title row layout — title left, pills right. Wrap on very narrow
   viewports so nothing gets clipped; in normal mobile the row fits. */
.eq-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Action buttons row — moved out of .eq-title-row so they don't fight
   the pills for horizontal space. Wraps naturally on narrow viewports. */
.eq-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   EQUIPMENT LIST ROW — 2-row layout (rebuild)
   ─────────────────────────────────────────────────────────────────────
   Replaces the older 3-row stack (name+date / sub / beacon-on-own-line)
   with a tighter 2-row version that mirrors the ordering vendor card:
   - Top row: name (flex-1) + PM date (right)
   - Bottom row: beacon (left) + sub line (flex-1, right)

   The beacon sits INLINE with the sub now — possible because the
   sm-variant glow has been tightened to not bleed into adjacent text.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tighten the small-variant beacon glow specifically. The lg/md
   beacons still get their full presence (used in detail headers).
   The sm beacon is for inline use in list rows where a wide glow
   would visually bleed into adjacent text. */
.eq-lc-pill-sm.is-operational {
  box-shadow:
    0 0 0 1px rgba(212, 164, 78, 0.25),
    0 0 6px rgba(212, 164, 78, 0.32) !important;
  animation: eq-lc-glow-sm 3.6s ease-in-out infinite !important;
}

@keyframes eq-lc-glow-sm {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212, 164, 78, 0.22),
      0 0 5px rgba(212, 164, 78, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(212, 164, 78, 0.32),
      0 0 9px rgba(212, 164, 78, 0.45);
  }
}

/* The 3-row layout's beacon-line is no longer used. Hidden if rendered
   by any cached/legacy JS path so it doesn't take space. */
.eq-row-beacon-line { display: none; }

/* Vertically center the avatar with the now-2-row content stack —
   override the older align-self:flex-start that was tuned for 3 rows. */
.eq-row-avatar {
  align-self: center;
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   EQUIPMENT ACTIVITY — per-equipment Timeline tab + global Log overlay
   ─────────────────────────────────────────────────────────────────────
   Two surfaces share these styles:
     1. Activity tab inside the equipment detail view (per-equipment)
     2. Global "Equipment Activity" overlay (per-location, all equipment)

   Both use the same row markup so visual scanning is consistent — gold
   icon column, summary line, meta line. Group classes
   (eq-act-row-status, -location, -archive, -pm, etc.) tint the icon
   column subtly so users can scan event types at a glance.
   ═══════════════════════════════════════════════════════════════════════ */

/* Per-equipment Activity tab — clean chronological list */
.eq-act-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 12px;
}

.eq-act-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.16));
  border-radius: 14px;
  font-family: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.eq-act-row-clickable {
  cursor: pointer;
  transition: border-color 140ms ease, transform 80ms ease;
}
.eq-act-row-clickable:hover {
  border-color: var(--nx-gold-line, rgba(212, 164, 78, 0.4));
}
.eq-act-row-clickable:active { transform: scale(0.998); }

.eq-act-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.10));
  border-radius: 50%;
  color: var(--nx-gold);
  margin-top: 2px;
}

/* Group tints — subtle background variations on the icon disc */
.eq-act-row-status   .eq-act-icon { background: rgba(212, 164, 78, 0.14); }
.eq-act-row-location .eq-act-icon { background: rgba(96, 165, 250, 0.14); color: #6193e6; }
.eq-act-row-archive  .eq-act-icon { background: rgba(180, 180, 180, 0.18); color: #8a8a8a; }
.eq-act-row-pm       .eq-act-icon { background: rgba(74, 168, 102, 0.18); color: #5fae84; }
.eq-act-row-edit     .eq-act-icon { background: rgba(212, 164, 78, 0.10); }
.eq-act-row-create   .eq-act-icon { background: rgba(74, 168, 102, 0.18); color: #5fae84; }
.eq-act-row-other    .eq-act-icon { background: rgba(212, 164, 78, 0.08); color: var(--nx-faint); }

.eq-act-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eq-act-summary {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  color: var(--nx-text);
  line-height: 1.35;
  word-break: break-word;
}
.eq-act-summary b {
  font-weight: 600;
  color: var(--nx-gold);
}
.eq-act-summary .eq-act-name {
  font-weight: 600;
  color: var(--nx-text);
}

.eq-act-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--nx-faint);
  letter-spacing: 0.3px;
}

.eq-act-arrow {
  flex-shrink: 0;
  align-self: center;
  color: var(--nx-faint);
  font-size: 18px;
  line-height: 1;
  padding-left: 4px;
}

/* "View all activity →" link below the equipment list */
.eq-act-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 14px 0 0;
  padding: 14px 18px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  border-radius: 16px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.eq-act-link:hover {
  color: var(--nx-gold);
  border-color: var(--nx-gold);
  background: var(--nx-gold-faint, rgba(212, 164, 78, 0.06));
}
.eq-act-link-arrow {
  display: inline-block;
  transition: transform 140ms ease;
}
.eq-act-link:hover .eq-act-link-arrow {
  transform: translateX(2px);
}

/* ─── Global Equipment Activity overlay ──────────────────────────── */

.eq-act-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
}
.eq-act-overlay.is-open { pointer-events: auto; }

.eq-act-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 9, 5, 0.6);
  opacity: 0;
  transition: opacity 200ms ease;
}
.eq-act-overlay.is-open .eq-act-backdrop { opacity: 1; }

.eq-act-sheet {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--nx-bg, #faf7f1);
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 220ms ease, opacity 200ms ease;
  overflow: hidden;
}
.eq-act-overlay.is-open .eq-act-sheet {
  transform: translateY(0);
  opacity: 1;
}

.eq-act-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.16));
  flex-shrink: 0;
}
.eq-act-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.25));
  border-radius: 50%;
  color: var(--nx-text);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms ease, color 140ms ease;
}
.eq-act-back:hover {
  border-color: var(--nx-gold);
  color: var(--nx-gold);
}
.eq-act-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eq-act-title {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--nx-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.eq-act-loc-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--nx-faint);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.eq-act-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}
.eq-act-pills::-webkit-scrollbar { display: none; }
.eq-act-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.28));
  border-radius: 999px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.eq-act-pill:hover {
  border-color: var(--nx-gold);
  color: var(--nx-text);
}
.eq-act-pill.active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  border-color: var(--nx-gold);
}
[data-theme="light"] .eq-act-pill.active { color: var(--surface); }
.eq-act-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--nx-surface-1);
  border-radius: 999px;
  color: var(--nx-faint);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.eq-act-pill.active .eq-act-pill-count {
  background: rgba(28, 20, 8, 0.18);
  color: var(--nx-gold-on, #101626);
}

.eq-act-search-wrap {
  padding: 0 16px 10px;
  flex-shrink: 0;
}
.eq-act-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  border-radius: 14px;
  color: var(--nx-text);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  -webkit-appearance: none;
  appearance: none;
}
.eq-act-search::placeholder { color: var(--nx-faint); }
.eq-act-search:focus {
  outline: none;
  border-color: var(--nx-gold);
}

.eq-act-list-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 24px;
  -webkit-overflow-scrolling: touch;
}
.eq-act-list-wrap.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.eq-act-loading,
.eq-act-empty,
.eq-act-end {
  padding: 32px 16px;
  text-align: center;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
}
.eq-act-end {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 24px 16px;
}

.eq-act-divider {
  margin: 18px 0 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--nx-faint);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.eq-act-divider:first-child { margin-top: 4px; }

.eq-act-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 16px 0 8px;
  padding: 12px;
  background: transparent;
  border: 1px dashed var(--nx-gold-line, rgba(212, 164, 78, 0.3));
  border-radius: 14px;
  color: var(--nx-faint);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.eq-act-load-more:hover {
  color: var(--nx-gold);
  border-color: var(--nx-gold);
}

/* ════════════════════════════════════════════════════════════════════════════
   REPAIR vs MAINTENANCE — split contractor surfacing
   ════════════════════════════════════════════════════════════════════════════
   Two parallel contractor slots per equipment: maintenance (scheduled PMs)
   and repair (powers the public QR Call button). Cards laid out side-by-side
   on tablet/desktop, stacked on phone. Repair is tinted oxblood/amber to
   read as "urgent contact" vs the gold "scheduled work" maintenance card.
   ════════════════════════════════════════════════════════════════════════════ */

.eq-serviced-by-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.eq-serviced-by-row > .eq-serviced-by {
  flex: 1 1 240px;
  margin: 0;
}

/* Repair card — distinct from the gold maintenance card. Uses a softer
   amber-leaning tint that reads as "call when broken" without the oxblood
   alarm intensity (which is reserved for actual down/error states). */
.eq-serviced-by.eq-serviced-by-role-repair {
  background: rgba(180, 80, 50, 0.05);
  border-color: rgba(180, 80, 50, 0.22);
}
.eq-serviced-by.eq-serviced-by-role-repair .eq-serviced-by-label {
  color: rgb(190, 95, 60);
}

/* ── Role chips on equipment rows inside contractor detail ───────────── */
.eq-contractor-eq-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.eq-contractor-eq-body-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
}
.eq-contractor-eq-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 1px 0;
}
.eq-contractor-eq-role-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid transparent;
  line-height: 1.4;
}
.eq-contractor-eq-role-chip.eq-contractor-eq-role-maint {
  background: rgba(212, 164, 78, 0.10);
  border-color: rgba(212, 164, 78, 0.30);
  color: var(--nx-gold, #d4a44e);
}
.eq-contractor-eq-role-chip.eq-contractor-eq-role-repair {
  background: rgba(180, 80, 50, 0.10);
  border-color: rgba(180, 80, 50, 0.30);
  color: rgb(190, 95, 60);
}

/* Per-row × unassign button. Compact, only reveals on hover so the row
   stays clean — phone users tap-and-hold or just tap directly. */
.eq-contractor-eq-unassign-btn {
  flex: 0 0 auto;
  width: 28px;
  align-self: center;
  border: 1px solid var(--nx-line);
  background: transparent;
  border-radius: 11px;
  color: var(--nx-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 28px;
  transition: color var(--nx-press), border-color var(--nx-press), background var(--nx-press);
  -webkit-tap-highlight-color: transparent;
}
.eq-contractor-eq-unassign-btn:hover {
  color: rgb(190, 95, 60);
  border-color: rgba(180, 80, 50, 0.45);
  background: rgba(180, 80, 50, 0.07);
}
.eq-contractor-eq-unassign-btn:active { transform: scale(0.94); }

/* Don't let the whole row click bubble through to detail when tapping × */
.eq-contractor-eq-row:has(.eq-contractor-eq-unassign-btn:hover) {
  border-color: var(--nx-gold-line);
  background: var(--nx-surface-1);
}

/* ── Role picker on the contractor → Assign equipment sheet ──────────── */
.eq-bulk-role-picker {
  display: flex;
  gap: 6px;
  margin: 14px 16px 12px;
}
.eq-bulk-role-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-line);
  border-radius: 13px;
  cursor: pointer;
  transition: border-color var(--nx-press), background var(--nx-press), transform var(--nx-press);
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.eq-bulk-role-btn:active { transform: scale(0.98); }
.eq-bulk-role-btn.is-active {
  background: var(--nx-gold-mist);
  border-color: var(--nx-gold);
}
.eq-bulk-role-label {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-text);
  line-height: 1.2;
}
.eq-bulk-role-btn.is-active .eq-bulk-role-label {
  color: var(--nx-gold);
}
.eq-bulk-role-hint {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--nx-faint);
  text-transform: uppercase;
}

/* Phone: stack the two contractor cards vertically — they were getting
   too narrow at 240px each on a 375-wide viewport with surrounding chrome. */
@media (max-width: 520px) {
  .eq-serviced-by-row { flex-direction: column; }
  .eq-serviced-by-row > .eq-serviced-by { flex-basis: auto; }
  .eq-bulk-role-picker { flex-wrap: wrap; }
  .eq-bulk-role-btn { flex: 1 1 calc(50% - 3px); }
}

/* ════════════════════════════════════════════════════════════════════════════
   TWO-LEVEL CATEGORY → SECTION GROUPING
   ════════════════════════════════════════════════════════════════════════════
   Outer card = category (fixed enum: Refrigeration, Cooking, Ice…). Renders
   with a more prominent header (category icon + larger label) so the
   structural hierarchy is obvious at a glance. Inner sections (.eq-section.
   is-nested) use the existing rename + collapse machinery and sit indented
   inside the category body.

   When a category has only one un-named ("Uncategorized") inner section
   the inner header is suppressed in JS and the equipment rows render
   directly in .eq-cat-section-body — handled by .eq-rows there.
   ════════════════════════════════════════════════════════════════════════════ */

.eq-cat-section {
  margin: 0 0 14px;
  background: var(--nx-surface-1, var(--surface));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22));
  border-radius: 18px;
  overflow: hidden;
}
.eq-cat-section.is-collapsed .eq-cat-section-body { display: none; }
.eq-cat-section.is-collapsed .eq-cat-section-collapse svg { transform: rotate(-90deg); }

.eq-cat-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(
    180deg,
    var(--nx-gold-mist, rgba(212, 164, 78, 0.10)) 0%,
    var(--nx-gold-faint, rgba(212, 164, 78, 0.04)) 100%
  );
  border-bottom: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.18));
  transition: background var(--nx-press, 120ms ease);
}
.eq-cat-section.is-collapsed .eq-cat-section-head { border-bottom-color: transparent; }
.eq-cat-section-head:hover { background: var(--nx-gold-mist, rgba(212, 164, 78, 0.14)); }

.eq-cat-section-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--nx-gold, #d4a44e);
  background: rgba(212, 164, 78, 0.10);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.30));
  border-radius: 12px;
}
.eq-cat-section-icon svg {
  width: 16px;
  height: 16px;
}

.eq-cat-section-name {
  flex: 1;
  min-width: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--nx-text, var(--text));
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eq-cat-section-count {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--nx-gold, #d4a44e);
  background: rgba(212, 164, 78, 0.08);
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22));
  padding: 3px 8px;
  border-radius: 999px;
  min-width: 26px;
  text-align: center;
}

.eq-cat-section-collapse {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--nx-faint, var(--muted));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 11px;
  transition: color var(--nx-press, 120ms ease), background var(--nx-press, 120ms ease);
  -webkit-tap-highlight-color: transparent;
}
.eq-cat-section-collapse:hover {
  color: var(--nx-gold, #d4a44e);
  background: rgba(212, 164, 78, 0.08);
}
.eq-cat-section-collapse svg {
  transition: transform 180ms ease;
}

.eq-cat-section-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* When the category renders flat (one un-named inner section), .eq-rows
   sits directly inside the body and gets a tighter top margin. */
.eq-cat-section-body > .eq-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Inner sections (nested under a category card) ─────────────────── */
.eq-section.is-nested {
  margin: 0;
  background: transparent;
  border: 1px dashed var(--nx-line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  overflow: hidden;
}
.eq-section.is-nested > .eq-section-head {
  background: transparent;
  padding: 8px 11px;
  border-bottom: 1px dashed var(--nx-line, rgba(255, 255, 255, 0.08));
}
.eq-section.is-nested.is-collapsed > .eq-section-head { border-bottom-color: transparent; }
.eq-section.is-nested > .eq-section-head .eq-section-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-faint, var(--muted));
  font-weight: 500;
}
.eq-section.is-nested > .eq-section-body {
  padding: 8px 6px 4px;
}

/* Phone — keep the outer category card edge-to-edge but tighten the
   inner padding so we don't lose row width to nested chrome. */
@media (max-width: 520px) {
  .eq-cat-section { border-radius: 16px; }
  .eq-cat-section-head { padding: 10px 12px; gap: 9px; }
  .eq-cat-section-name { font-size: 15px; }
  .eq-cat-section-icon { width: 26px; height: 26px; }
  .eq-cat-section-icon svg { width: 14px; height: 14px; }
  .eq-cat-section-body { padding: 8px 8px; gap: 8px; }
  .eq-section.is-nested > .eq-section-head { padding: 7px 9px; }
  .eq-section.is-nested > .eq-section-body { padding: 6px 4px 2px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ROW BEACON — clean right-edge status indicator
   ════════════════════════════════════════════════════════════════════════════
   Replaces the inline OPERATIONAL / NEEDS SERVICE / DOWN pill that used to
   sit in the middle of each card with a single round beacon all the way to
   the right. Same color rules as before (lifecycleStatusDot does the work),
   just without the textual label. Beacon is fixed-width and right-aligned
   so the dot column lines up perfectly across rows for a clean, neat scan.
   The chevron has been removed in JS — the beacon takes its visual place
   as the row's right-edge anchor.
   ════════════════════════════════════════════════════════════════════════════ */

.eq-row-beacon {
  flex: 0 0 auto;
  align-self: center;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
}

/* Override the grid-card variant of .eq-lc-dot when it's nested inside a
   row beacon — that variant uses absolute positioning pinned to top:8/right:8
   of its parent. In a row, we want the dot to flow inline at the center of
   the beacon slot, scaled up slightly so it reads as a deliberate marker. */
.eq-row-beacon .eq-lc-dot {
  position: static;
  top: auto;
  right: auto;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* The OPERATIONAL pulse still applies via .eq-lc-dot.is-operational; we just
   tighten the box-shadow ring so it reads against the row's lighter
   background instead of the grid card's dark backdrop. */
.eq-row-beacon .eq-lc-dot.is-operational {
  box-shadow: 0 0 0 3px var(--nx-bg, var(--bg)),
              0 0 10px rgba(212, 164, 78, 0.55),
              0 0 20px rgba(212, 164, 78, 0.30);
}
[data-theme="light"] .eq-row-beacon .eq-lc-dot.is-operational {
  box-shadow: 0 0 0 3px var(--surface, #faf6ed),
              0 0 8px rgba(139, 105, 20, 0.45),
              0 0 16px rgba(139, 105, 20, 0.18);
}

/* Phone — slightly tighter slot to claw back row-width for the name. */
@media (max-width: 520px) {
  .eq-row-beacon { width: 20px; height: 20px; margin-left: 4px; }
  .eq-row-beacon .eq-lc-dot { width: 11px; height: 11px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTRACTOR DETAIL — LOCATION PROFILE PILL
   ════════════════════════════════════════════════════════════════════════════
   Mirrors the ordering module's .ord-loc-picker exactly so the two surfaces
   feel like the same app. Same gold-line container, same gold-fill active
   state, same padding and corner radius. Sits between the contractor head
   and the summary stats card. The pill scopes equipment, activity, and the
   four summary numbers to a single restaurant — switching is instant since
   the data is already in memory; nothing reloads from Supabase.
   ════════════════════════════════════════════════════════════════════════════ */

.eq-contractor-loc-picker {
  display: flex;
  gap: 4px;
  background: var(--nx-surface-1);
  border: 1px solid var(--nx-gold-line);
  border-radius: 999px;
  padding: 4px;
  margin: 0 14px 12px;
}

.eq-contractor-loc-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-faint);
  cursor: pointer;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.eq-contractor-loc-btn:hover {
  color: var(--nx-text);
}
.eq-contractor-loc-btn.active {
  background: var(--nx-gold);
  color: var(--nx-gold-on, #101626);
  box-shadow: 0 0 0 1px var(--nx-gold), 0 0 14px rgba(212, 164, 78, 0.32);
}
[data-theme="light"] .eq-contractor-loc-btn.active {
  color: var(--surface);
}

/* Phone — keep all four pills on one line at narrow widths by tightening
   horizontal padding. The labels are short ("All", "Suerte", "Este", "Toti")
   so 9px each side is plenty. */
@media (max-width: 420px) {
  .eq-contractor-loc-btn { padding: 9px 9px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LIFECYCLE BEACON OVERHAUL — 2026-05-08
   ════════════════════════════════════════════════════════════════════════════
   The original "all-gold lightbulb" metaphor (every state rendered in gold;
   only the intensity and animation distinguished them) didn't survive
   contact with light mode — when the cream surface and the dots are both
   warm-toned, every beacon read as the same blob. This overhaul keeps the
   editorial brand restraint but assigns each lifecycle state its own hue
   so a glance at a list of equipment instantly says which units are
   healthy, which need attention, and which are critical. The brand colors
   are still the source — green/red/blue/amber from nx-system, with light-
   mode-tuned versions promoted up front for legibility on the cream
   surface. No new colors were introduced.

   New color logic:
     operational      → green   (healthy, alive, pulses)
     needs_service    → amber   (attention)
     down/broken      → red     (critical, struggle animation)
     reported         → fresh   (urgent, freshly logged)
     contractor_called→ blue    (in motion)
     eta_set          → blue    (scheduled, blinks)
     in_progress      → blue    (working — dimmer)
     awaiting_parts   → fresh   (back-burner — dimmer)
     missing          → fresh   (where is it)
     loaned/relocated → muted   (out of building)
     retired          → fainter (end of life)

   In the DETAIL HEADER (.eq-detail-status), the pill chrome is stripped —
   no border, no background, no glow — leaving just a beacon dot and a
   clean uppercase label. The state color does what the border was doing.
   This is the user's "make it just a beacon with the description of
   status" ask.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --eq-state-ok:        #9c8a3e;                     /* olive bronze — alive */
  --eq-state-warn:      #d4a44e;                     /* gold/amber — attention */
  --eq-state-crit:      #a83e3e;                     /* oxblood — critical */
  --eq-state-fresh:     #d6912e;                     /* safety orange — urgent */
  --eq-state-info:      #3f78b5;                     /* steel blue — in motion */
  --eq-state-muted:     #6e6a5a;                     /* warm gray — sidelined */
  --eq-state-retired:   #4a4638;                     /* deep gray — done */
}
[data-theme="light"] {
  --eq-state-ok:        #4f7027;                     /* deeper olive — pops on cream */
  --eq-state-warn:      #b8842a;                     /* deep gold */
  --eq-state-crit:      #7c2d2d;                     /* dark oxblood */
  --eq-state-fresh:     #c4811f;                     /* deep orange */
  --eq-state-info:      #2c5aa0;                     /* royal blue */
  --eq-state-muted:     #8a8474;                     /* warm gray */
  --eq-state-retired:   #b8b0a0;                     /* faint warm gray */
}

/* ─── Per-state DOTS (.eq-lc-dot) ──────────────────────────────────── */
.eq-lc-dot.is-operational {
  background: var(--eq-state-ok);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 8px var(--eq-state-ok),
              0 0 16px var(--eq-state-ok);
  animation: eq-lc-pulse-dot 2.4s ease-in-out infinite;
}
.eq-lc-dot.is-needs-service {
  background: var(--eq-state-warn);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 6px var(--eq-state-warn);
  animation: none;
}
.eq-lc-dot.is-down {
  background: var(--eq-state-crit);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 8px var(--eq-state-crit),
              0 0 16px var(--eq-state-crit);
  animation: eq-lc-struggle-dot 5.2s steps(1, end) infinite;
}
.eq-lc-dot.is-reported {
  background: var(--eq-state-fresh);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 8px var(--eq-state-fresh);
  animation: eq-lc-glow-quick 1.6s ease-in-out infinite;
}
.eq-lc-dot.is-called {
  background: var(--eq-state-info);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 6px var(--eq-state-info);
}
.eq-lc-dot.is-eta {
  background: var(--eq-state-info);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 6px var(--eq-state-info);
  animation: eq-lc-eta-blink 2.8s ease-in-out infinite;
}
.eq-lc-dot.is-in-progress {
  background: var(--eq-state-info);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 5px var(--eq-state-info);
  opacity: 0.78;
  animation: none;
}
.eq-lc-dot.is-awaiting {
  background: var(--eq-state-fresh);
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 4px var(--eq-state-fresh);
  opacity: 0.72;
}
.eq-lc-dot.is-missing {
  background: var(--eq-state-fresh);
  box-shadow: 0 0 0 2px var(--nx-bg);
  opacity: 0.85;
}
.eq-lc-dot.is-muted {
  background: var(--eq-state-muted);
  box-shadow: 0 0 0 2px var(--nx-bg);
  opacity: 0.62;
}
.eq-lc-dot.is-retired {
  background: var(--eq-state-retired);
  box-shadow: 0 0 0 2px var(--nx-bg);
  opacity: 0.55;
}

/* ─── Light-mode dot tuning ────────────────────────────────────────────
   Slightly larger and with brighter glow halos so dots stay legible on
   the cream surface. The brand colors are darker in light mode, so the
   halo does the visibility work that the saturated dark-mode colors
   were doing on their own. */
[data-theme="light"] .eq-lc-dot,
[data-theme="light"] .eq-row-beacon .eq-lc-dot {
  width: 12px;
  height: 12px;
}
[data-theme="light"] .eq-lc-dot.is-operational {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 6px rgba(79, 112, 39, 0.65),
              0 0 14px rgba(79, 112, 39, 0.40);
}
[data-theme="light"] .eq-lc-dot.is-down {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 7px rgba(124, 45, 45, 0.60),
              0 0 14px rgba(124, 45, 45, 0.40);
}
[data-theme="light"] .eq-lc-dot.is-needs-service {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 6px rgba(184, 132, 42, 0.55);
}
[data-theme="light"] .eq-lc-dot.is-reported {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 7px rgba(196, 129, 31, 0.60);
}
[data-theme="light"] .eq-lc-dot.is-eta,
[data-theme="light"] .eq-lc-dot.is-called,
[data-theme="light"] .eq-lc-dot.is-in-progress {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 6px rgba(44, 90, 160, 0.55);
}

/* ─── Per-state PILLS (.eq-lc-pill) ───────────────────────────────────
   Same color logic as the dots, applied to the pill chrome. The label
   text inherits the state color via `color`; the dot inherits via
   `background: currentColor` from earlier in the cascade. */
.eq-lc-pill.is-operational {
  background: rgba(63, 160, 143, 0.14);
  color: var(--eq-state-ok);
  border-color: rgba(63, 160, 143, 0.45);
  box-shadow: 0 0 0 1px rgba(63, 160, 143, 0.18),
              0 0 22px rgba(63, 160, 143, 0.32);
  animation: eq-lc-glow 3.6s ease-in-out infinite;
}
[data-theme="light"] .eq-lc-pill.is-operational {
  background: rgba(79, 112, 39, 0.08);
  color: var(--eq-state-ok);
  border-color: rgba(79, 112, 39, 0.42);
  box-shadow: 0 0 0 1px rgba(79, 112, 39, 0.20),
              0 0 16px rgba(79, 112, 39, 0.22);
}
.eq-lc-pill.is-needs-service {
  background: rgba(212, 164, 78, 0.10);
  color: var(--eq-state-warn);
  border-color: rgba(212, 164, 78, 0.40);
}
[data-theme="light"] .eq-lc-pill.is-needs-service {
  background: rgba(184, 132, 42, 0.08);
  color: var(--eq-state-warn);
  border-color: rgba(184, 132, 42, 0.40);
}
.eq-lc-pill.is-down {
  background: rgba(210, 75, 75, 0.10);
  color: var(--eq-state-crit);
  border-color: rgba(210, 75, 75, 0.45);
  box-shadow: 0 0 10px rgba(210, 75, 75, 0.22);
  animation: eq-lc-struggle 5.2s steps(1, end) infinite;
}
[data-theme="light"] .eq-lc-pill.is-down {
  background: rgba(124, 45, 45, 0.06);
  color: var(--eq-state-crit);
  border-color: rgba(124, 45, 45, 0.35);
}
.eq-lc-pill.is-reported {
  background: rgba(214, 145, 46, 0.12);
  color: var(--eq-state-fresh);
  border-color: rgba(214, 145, 46, 0.45);
}
[data-theme="light"] .eq-lc-pill.is-reported {
  background: rgba(196, 129, 31, 0.08);
  color: var(--eq-state-fresh);
  border-color: rgba(196, 129, 31, 0.40);
}
.eq-lc-pill.is-called,
.eq-lc-pill.is-eta,
.eq-lc-pill.is-in-progress {
  background: rgba(63, 120, 181, 0.10);
  color: var(--eq-state-info);
  border-color: rgba(63, 120, 181, 0.40);
}
[data-theme="light"] .eq-lc-pill.is-called,
[data-theme="light"] .eq-lc-pill.is-eta,
[data-theme="light"] .eq-lc-pill.is-in-progress {
  background: rgba(44, 90, 160, 0.06);
  color: var(--eq-state-info);
  border-color: rgba(44, 90, 160, 0.38);
}
.eq-lc-pill.is-awaiting,
.eq-lc-pill.is-missing {
  background: rgba(214, 145, 46, 0.06);
  color: var(--eq-state-fresh);
  border-color: rgba(214, 145, 46, 0.30);
}
.eq-lc-pill.is-muted {
  background: var(--nx-surface-2);
  color: var(--eq-state-muted);
  border-color: var(--nx-border);
  opacity: 0.85;
}
.eq-lc-pill.is-retired {
  background: var(--nx-surface-2);
  color: var(--eq-state-retired);
  border-color: var(--nx-border);
  opacity: 0.7;
}

/* ─── DETAIL HEADER — strip the pill chrome ──────────────────────────
   The user wanted the equipment-detail status to read as a beacon with
   a description, not a chip. Remove border/background/glow on the pill
   when it lives inside .eq-detail-status, leaving the colored dot to
   carry the visual weight. The dot is enlarged (14px) and its glow is
   amped up so it reads as the obvious indicator. The label keeps its
   editorial uppercase mono treatment. */
.eq-detail-status .eq-lc-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 4px !important;
  animation: none !important;
  gap: 10px;
}
.eq-detail-status .eq-lc-pill-dot {
  width: 14px !important;
  height: 14px !important;
  box-shadow: 0 0 8px currentColor,
              0 0 18px currentColor !important;
}
.eq-detail-status .eq-lc-pill.is-operational .eq-lc-pill-dot {
  animation: eq-lc-pulse-dot 2.4s ease-in-out infinite;
}
.eq-detail-status .eq-lc-pill.is-down .eq-lc-pill-dot {
  animation: eq-lc-struggle-dot 5.2s steps(1, end) infinite;
}
.eq-detail-status .eq-lc-pill.is-reported .eq-lc-pill-dot {
  animation: eq-lc-glow-quick 1.6s ease-in-out infinite;
}
.eq-detail-status .eq-lc-pill.is-eta .eq-lc-pill-dot {
  animation: eq-lc-eta-blink 2.8s ease-in-out infinite;
}
.eq-detail-status .eq-lc-pill-label {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 1.6px;
}
.eq-detail-status .eq-lc-pill-time {
  /* Keep the time tag, but lose the divider line that pill chrome had */
  border-left-color: rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] .eq-detail-status .eq-lc-pill-time {
  border-left-color: rgba(0, 0, 0, 0.20) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   BEACON BOOST — 2026-05-08
   ════════════════════════════════════════════════════════════════════════════
   First overhaul (per-state colors) made beacons distinguishable by hue but
   user said the dots are still not bright enough — needs bigger dot, more
   prominent glow halo. This boost layer doubles down on visibility:

     • Dots scale up (12px dark / 14px light, was 10/12)
     • Glow halos extend to 24-30px outer radius with stronger alpha
     • Halo colors saturate the brand hue with a higher rgba opacity
     • Multiple layered shadows create a "torch" quality (close + far glow)

   Both modes get the boost. Lives at the end of the file so it overrides
   the prior color section's halo defaults via cascade order.
   ════════════════════════════════════════════════════════════════════════════ */

/* Default dot dimensions — bumped from 10px */
.eq-lc-dot {
  width: 12px;
  height: 12px;
}
[data-theme="light"] .eq-lc-dot,
[data-theme="light"] .eq-row-beacon .eq-lc-dot {
  width: 14px;
  height: 14px;
}

/* ─── Brighter, larger halos per state ──────────────────────────────── */
.eq-lc-dot.is-operational {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 10px var(--eq-state-ok),
              0 0 22px rgba(63, 160, 143, 0.85),
              0 0 36px rgba(63, 160, 143, 0.50);
}
[data-theme="light"] .eq-lc-dot.is-operational {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 10px rgba(79, 112, 39, 0.95),
              0 0 22px rgba(79, 112, 39, 0.65),
              0 0 36px rgba(79, 112, 39, 0.35);
}

.eq-lc-dot.is-needs-service {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 10px var(--eq-state-warn),
              0 0 22px rgba(212, 164, 78, 0.80),
              0 0 32px rgba(212, 164, 78, 0.45);
}
[data-theme="light"] .eq-lc-dot.is-needs-service {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 10px rgba(184, 132, 42, 0.90),
              0 0 22px rgba(184, 132, 42, 0.55),
              0 0 32px rgba(184, 132, 42, 0.30);
}

.eq-lc-dot.is-down {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 10px var(--eq-state-crit),
              0 0 22px rgba(210, 75, 75, 0.85),
              0 0 36px rgba(210, 75, 75, 0.55);
}
[data-theme="light"] .eq-lc-dot.is-down {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 10px rgba(124, 45, 45, 0.95),
              0 0 22px rgba(124, 45, 45, 0.70),
              0 0 36px rgba(124, 45, 45, 0.40);
}

.eq-lc-dot.is-reported {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 12px var(--eq-state-fresh),
              0 0 24px rgba(214, 145, 46, 0.85),
              0 0 36px rgba(214, 145, 46, 0.50);
}
[data-theme="light"] .eq-lc-dot.is-reported {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 12px rgba(196, 129, 31, 0.95),
              0 0 24px rgba(196, 129, 31, 0.65),
              0 0 36px rgba(196, 129, 31, 0.35);
}

.eq-lc-dot.is-called,
.eq-lc-dot.is-eta,
.eq-lc-dot.is-in-progress {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 10px var(--eq-state-info),
              0 0 22px rgba(63, 120, 181, 0.80),
              0 0 32px rgba(63, 120, 181, 0.45);
}
[data-theme="light"] .eq-lc-dot.is-called,
[data-theme="light"] .eq-lc-dot.is-eta,
[data-theme="light"] .eq-lc-dot.is-in-progress {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 10px rgba(44, 90, 160, 0.90),
              0 0 22px rgba(44, 90, 160, 0.60),
              0 0 32px rgba(44, 90, 160, 0.32);
}

.eq-lc-dot.is-awaiting,
.eq-lc-dot.is-missing {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 8px var(--eq-state-fresh),
              0 0 18px rgba(214, 145, 46, 0.55);
  opacity: 0.85;
}
[data-theme="light"] .eq-lc-dot.is-awaiting,
[data-theme="light"] .eq-lc-dot.is-missing {
  box-shadow: 0 0 0 2px var(--nx-bg),
              0 0 8px rgba(196, 129, 31, 0.70),
              0 0 18px rgba(196, 129, 31, 0.40);
  opacity: 0.85;
}

/* Muted/retired stay subtle — they should NOT glow because they're
   sidelined states; a glow would say "look at me" when the message
   is "this isn't in service." */
.eq-lc-dot.is-muted,
.eq-lc-dot.is-retired {
  box-shadow: 0 0 0 2px var(--nx-bg);
}

/* ─── Make the row-list beacon container give the halo room ────────── */
.eq-row-beacon {
  /* The halo extends ~36px beyond the dot. Give the slot enough room so
     the glow doesn't get clipped at the row's right edge. The dot stays
     centered visually; the slot just allows visual breathing room. */
  width: 36px !important;
  min-width: 36px;
}

/* ─── Detail-header beacon: torch-grade glow ───────────────────────── */
.eq-detail-status .eq-lc-pill-dot {
  width: 16px !important;
  height: 16px !important;
}
.eq-detail-status .eq-lc-pill.is-operational .eq-lc-pill-dot {
  box-shadow: 0 0 12px currentColor,
              0 0 24px currentColor,
              0 0 40px currentColor !important;
}
.eq-detail-status .eq-lc-pill.is-down .eq-lc-pill-dot,
.eq-detail-status .eq-lc-pill.is-reported .eq-lc-pill-dot,
.eq-detail-status .eq-lc-pill.is-needs-service .eq-lc-pill-dot {
  box-shadow: 0 0 10px currentColor,
              0 0 22px currentColor,
              0 0 36px currentColor !important;
}
.eq-detail-status .eq-lc-pill.is-eta .eq-lc-pill-dot,
.eq-detail-status .eq-lc-pill.is-called .eq-lc-pill-dot,
.eq-detail-status .eq-lc-pill.is-in-progress .eq-lc-pill-dot {
  box-shadow: 0 0 10px currentColor,
              0 0 22px currentColor !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v18.30 — Multi-cadence health bars (PM · Inspection · Deep clean) + the
   toolbar chooser. Reversible block: delete from here to EOF to revert.
   Bar fill colors + widths are inline (set by renderHealthBars) so they
   survive the lazy-module CSS cache; only layout lives here.
   ═══════════════════════════════════════════════════════════════════════ */
.eq-health-bars {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.eq-hb-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.eq-hb-lab {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--nx-faint, #6c7585);
  width: 40px;
  flex-shrink: 0;
}
.eq-hb-track {
  flex: 1 1 auto;
  height: 4px;
  min-width: 34px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.eq-hb-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.eq-hb-cd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  white-space: nowrap;
  width: 46px;
  text-align: right;
  flex-shrink: 0;
}
.eq-hb-row-full .eq-hb-cd { width: auto; }

/* Chooser — gold segmented pills, mirroring the ordering location picker. */
.eq-hb-chooser {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--nx-surface-1, rgba(34, 46, 70, 0.42));
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22));
  border-radius: 999px;
  padding: 3px;
}
.eq-hb-toggle {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--nx-faint, #6c7585);
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.eq-hb-toggle:hover { color: var(--nx-text, #ece4d4); }
.eq-hb-toggle.on {
  background: var(--nx-gold, #d4a44e);
  color: #101626;
  box-shadow: 0 0 0 1px var(--nx-gold, #d4a44e), 0 0 12px rgba(212, 164, 78, 0.28);
}

/* ── Parts: where-to-buy + per-part replacement bar (v18.30) ── reversible ── */
.eq-part-pmtag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5cc3b1;
  background: rgba(63, 160, 143, 0.14);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}
.eq-part-buy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.eq-part-supplier { font-size: 11.5px; color: var(--nx-text, #ece4d4); }
.eq-part-price {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: #e6c97a;
}
.eq-part-buybtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  background: linear-gradient(180deg, #d4a44e, #b88830);
  color: #101626;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(212, 164, 78, 0.28);
}
.eq-part-buybtn:hover { filter: brightness(1.06); }
.eq-part-repl {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
}
.eq-part-repl-track {
  flex: 1 1 auto;
  height: 4px;
  min-width: 36px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.eq-part-repl-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.eq-part-repl-lab {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── QR tab — dark-gold Ordering restyle (v18.30) ── reversible ──
   .eq-qr-* is styled only here, so this EOF block wins the cascade. */
.eq-qr-section {
  background: var(--nx-surface-1, rgba(34, 46, 70, 0.42)) !important;
  border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22));
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
}
.eq-qr-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--nx-text-strong, #f6f0e2);
  margin-bottom: 2px;
}
.eq-qr-sub { font-size: 12px; color: var(--nx-muted, #9aa3b2); margin-bottom: 14px; }
.eq-qr-img {
  background: #fff;
  padding: 11px;
  border-radius: 14px;
  margin: 0 auto 12px;
  display: block;
}
.eq-qr-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--nx-gold, #e6c97a);
  margin-bottom: 3px;
}
.eq-qr-url {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--nx-faint, #6c7585);
  word-break: break-all;
  line-height: 1.4;
  margin-bottom: 14px;
}
.eq-qr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.eq-qr-actions .eq-btn { width: 100%; }

/* ── v18.34 Detail health bars (animated) + Bars Studio ── reversible ── */
.eq-health-card .eq-health-head { display: flex; align-items: center; justify-content: space-between; }
.eq-health-gear { background: transparent; border: none; color: var(--nx-faint, #6c7585); cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.eq-health-gear:hover { color: var(--nx-gold, #d4a44e); }
.eq-hbar { margin-top: 12px; }
.eq-hbar:first-of-type { margin-top: 8px; }
.eq-hbar-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.eq-hbar-label { font-size: 13px; font-weight: 600; color: var(--nx-text, #ece4d4); }
.eq-hbar-pct { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; }
.eq-hbar-track { height: 9px; border-radius: 5px; background: rgba(212, 164, 78, 0.10); overflow: hidden; position: relative; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.eq-hbar-fill { height: 100%; border-radius: 5px; background: var(--bar, #3fa08f); position: relative; overflow: hidden; transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 8px -1px var(--bar, #3fa08f); }
.eq-hbar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: translateX(-100%); animation: eq-hbar-shimmer 2.6s ease-in-out infinite; }
.eq-hbar.is-over .eq-hbar-fill { animation: eq-hbar-pulse 1.1s ease-in-out infinite; }
.eq-hbar-sub { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; color: var(--nx-faint, #6c7585); margin-top: 4px; }
.eq-hbar-note { margin-top: 5px; padding: 5px 8px; border-left: 2px solid var(--nx-gold, #d4a44e); border-radius: 0 7px 7px 0; background: rgba(212, 164, 78, 0.08); font-size: 11.5px; line-height: 1.45; color: var(--nx-text, #ece4d4); }
@keyframes eq-hbar-shimmer { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(220%); } }
@keyframes eq-hbar-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }

.eq-studio-ov { position: fixed; inset: 0; z-index: 9400; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.5); }
.eq-studio { width: 100%; max-width: 480px; background: var(--nx-surface-solid, #161d2e); border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.24)); border-bottom: none; border-radius: 22px 22px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px)); max-height: 86vh; overflow-y: auto; }
.eq-studio-grip { width: 36px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); margin: 8px auto 14px; }
.eq-studio-title { font-family: 'Outfit', system-ui, sans-serif; font-size: 18px; font-weight: 600; color: var(--nx-text-strong, #f6f0e2); }
.eq-studio-sub { font-size: 12.5px; color: var(--nx-muted, #9aa3b2); margin: 2px 0 10px; }
.eq-studio-sec { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--nx-gold, #d4a44e); margin: 16px 0 8px; }
.eq-studio-row { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-radius: 10px; cursor: pointer; }
.eq-studio-row input { width: 18px; height: 18px; accent-color: var(--nx-gold, #d4a44e); flex-shrink: 0; }
.eq-studio-rl { flex: 1; font-size: 14px; color: var(--nx-text, #ece4d4); }
.eq-studio-rm { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--nx-faint, #6c7585); }
.eq-studio-crow { padding: 8px 0; border-top: 1px solid rgba(212, 164, 78, 0.10); }
.eq-studio-crow:first-child { border-top: none; }
.eq-studio-crow2 { display: flex; gap: 8px; margin-top: 7px; }
.eq-studio-in { box-sizing: border-box; width: 100%; background: var(--nx-surface-2, rgba(24, 34, 54, 0.62)); border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22)); border-radius: 10px; padding: 9px 11px; color: var(--nx-text, #ece4d4); font-family: 'Outfit', system-ui, sans-serif; font-size: 13px; }
.eq-studio-in:focus { outline: none; border-color: var(--nx-gold, #d4a44e); }
.eq-studio-crow2 .eq-studio-num, .eq-studio-crow2 input[type="date"] { flex: 1; }
.eq-studio-del { flex-shrink: 0; width: 36px; border: 1px solid rgba(210, 75, 75, 0.35); background: transparent; color: #e58a8a; border-radius: 10px; cursor: pointer; }
.eq-studio-add { margin-top: 10px; display: inline-flex; align-items: center; gap: 5px; background: var(--nx-gold-faint, rgba(212, 164, 78, 0.08)); border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22)); color: var(--nx-gold, #d4a44e); border-radius: 999px; padding: 7px 13px; font-family: 'Outfit', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.eq-studio-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.eq-studio-btn { padding: 10px 18px; border-radius: 999px; cursor: pointer; font-family: 'Outfit', system-ui, sans-serif; font-size: 13px; font-weight: 600; background: transparent; border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.3)); color: var(--nx-text, #ece4d4); }
.eq-studio-btn.is-primary { background: var(--nx-gold, #d4a44e); border-color: var(--nx-gold, #d4a44e); color: #101626; }
@media (prefers-reduced-motion: reduce) { .eq-hbar-fill::after, .eq-hbar.is-over .eq-hbar-fill { animation: none !important; } }

/* v18.36 — Lifecycle & Service card sub-group labels (reversible) */
.eq-ls-subhead {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nx-faint, #8a93a3);
  margin: 15px 2px 7px;
}
.eq-ls-subhead:first-of-type { margin-top: 8px; }
.eq-ls-demoted { margin-top: 10px; opacity: 0.9; }
.eq-ls-demoted .eq-detail-card-grid { grid-template-columns: 1fr; }
.eq-ls-demoted .eq-detail-card-field-label { color: var(--nx-faint, #8a93a3); }

/* v182 — Report-issue sheet (replaces native window.prompt, which is
   suppressed in installed PWAs / mobile). Reversible. */
.eq-issue-newsheet { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
.eq-issue-newsheet-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 22, 0.66); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.eq-issue-newsheet-card { position: relative; width: 100%; max-width: 460px; box-sizing: border-box; background: var(--nx-surface-1, #141d2e); border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22)); border-radius: 18px 18px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); animation: eqIssueSheetUp 0.18s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes eqIssueSheetUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 560px) { .eq-issue-newsheet { align-items: center; } .eq-issue-newsheet-card { border-radius: 18px; } }
.eq-issue-newsheet-title { font-family: 'Outfit', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--nx-text, #ece4d4); }
.eq-issue-newsheet-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--nx-faint, #8a93a3); margin: 2px 0 14px; }
.eq-issue-newsheet-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nx-faint, #8a93a3); margin: 10px 0 5px; }
.eq-issue-newsheet-input, .eq-issue-newsheet-textarea { box-sizing: border-box; width: 100%; background: var(--nx-surface-2, rgba(24, 34, 54, 0.62)); border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.22)); border-radius: 11px; padding: 11px 13px; color: var(--nx-text, #ece4d4); font-family: 'Outfit', system-ui, sans-serif; font-size: 15px; resize: vertical; }
.eq-issue-newsheet-input:focus, .eq-issue-newsheet-textarea:focus { outline: none; border-color: var(--nx-gold, #d4a44e); }
.eq-issue-newsheet-input.is-error { border-color: #d24b4b; }
.eq-issue-newsheet-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.eq-issue-newsheet-btn { padding: 11px 18px; border-radius: 999px; cursor: pointer; font-family: 'Outfit', system-ui, sans-serif; font-size: 14px; font-weight: 600; background: transparent; border: 1px solid var(--nx-gold-line, rgba(212, 164, 78, 0.3)); color: var(--nx-text, #ece4d4); }
.eq-issue-newsheet-btn.is-primary { background: var(--nx-gold, #d4a44e); border-color: var(--nx-gold, #d4a44e); color: #101626; }
.eq-issue-newsheet-btn:disabled { opacity: 0.6; cursor: default; }

/* ─── Locations landing: calm the DUE SOON card ──────────────────────
   The location cards reuse the Ordering vendor-row classes, and DUE
   SOON rides the `has-draft` class — but in Ordering that class means
   "open draft order" and paints the WHOLE card gold-mist. On Equipment
   that made due-soon locations (Este, Bar Toti) shout louder than an
   actually-overdue one (Suerte, thin amber bar only). Scoped here:
   due-soon keeps its pill and gets a soft gold left bar one step
   calmer than the overdue amber; the card body returns to the normal
   surface. Visual priority now matches urgency: overdue > due soon. */
#eqLocationCardsOrSearch .ord-vendor-row.has-draft {
  background: var(--nx-surface-1);
  border-color: var(--nx-gold-line);
  border-left-width: 3px;
  border-left-color: var(--nx-gold-line-2, var(--nx-gold-line));
  padding-left: 16px;
}
#eqLocationCardsOrSearch .ord-vendor-row.has-draft:hover {
  background: var(--nx-gold-soft, var(--nx-gold-faint));
}


/* ─── Report-issue sheet: severity pills (mirror the Call Service modal) ── */
.eq-issue-newsheet-pri { display: flex; gap: 6px; margin: 4px 0 10px; }
.eq-issue-newsheet-pri button {
  flex: 1; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-family: 'Outfit', system-ui, sans-serif; font-size: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
  color: var(--nx-text, #ece4d4);
}
.eq-issue-newsheet-pri button.active {
  background: var(--nx-gold-faint, rgba(212,164,78,0.15));
  border-color: var(--nx-gold, #d4a44e); color: var(--nx-gold, #d4a44e);
}

/* v380 — PM three-state block (Completed / Expected / Scheduled) */
.eq-pm-triple { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.eq-pm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11px; }
.eq-pm-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-faint, #6c7585); }
.eq-pm-v { color: var(--nx-text, #e8e6e1); font-weight: 600; text-align: right; }
.eq-pm-v .eq-pm-cnt { font-weight: 500; font-size: 10px; color: var(--nx-faint, #8a8a90); font-style: normal; margin-left: 4px; }
.eq-pm-v .eq-pm-late { font-style: normal; font-size: 9px; color: #d24b4b; margin-left: 4px; }
.eq-pm-v .eq-pm-none { color: var(--nx-faint, #6c7585); font-weight: 400; font-style: italic; }

/* v383 — "book a visit" affordance on the PM Scheduled row */
.eq-pm-book { margin-left: 6px; background: rgba(212,164,78,0.12); color: var(--nx-gold,#d4a44e); border: 1px solid rgba(212,164,78,0.35); border-radius: 999px; font-size: 10px; font-weight: 600; padding: 2px 9px; cursor: pointer; white-space: nowrap; }
.eq-pm-book:hover { background: rgba(212,164,78,0.2); }