/* My Installed Base — customer-facing asset hub.
   Gemini critique addressed:
   - KPI tile spans now stack on their own lines (was: spans inline →
     "3137Installed assetsAcross operating sites" mashed together).
   - "Look up by serial" promoted from a 14px text+icon button to a real
     search affordance with prominent style + magnifying-glass icon. */

.my-assets-page {
  max-width: 82.5rem;
  margin: 0 auto;
  /* Density pass (ws-density): was 1.5rem … 4rem tail. */
  padding: 1rem clamp(1rem, calc(4 * var(--vwx)), 3rem) 2.5rem;
}

/* ───── Header ───── */
.my-assets-header {
  /* Density pass: was 2rem. */
  margin-bottom: 1rem;
}
.my-assets-header-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.my-assets-title {
  /* Density pass: was 2rem — align with the account-shell heading scale. */
  font-size: clamp(1.125rem, 0.95rem + calc(0.7 * var(--vwx)), 1.625rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.25rem;
  color: #0d1117;
}
.my-assets-subtitle {
  font-size: 0.9375rem;
  color: #57606a;
  margin: 0;
  line-height: 1.5;
}

/* Search-by-serial — promoted from a tiny outlined button to a prominent
   search-bar-style affordance. Still a button (lookup is gated/coming
   soon), but reads as a search action at a glance. */
/* Sized down from the iter-1 filled CTA — Gemini called it too prominent
   for an infrequent action. Now a 36px outlined affordance with a clear
   search icon; reads as "search field" without dominating the header. */
.my-assets-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.875rem 0 0.75rem;
  border-radius: 1.125rem;
  border: 1px solid #d0d7de;
  background: #ffffff;
  color: #24292f;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
}
.my-assets-scan-btn:hover {
  background: #f6f8fa;
  border-color: #57606a;
}
.my-assets-scan-btn:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}
.my-assets-scan-btn:active {
  transform: translateY(1px);
}
.my-assets-scan-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
}

/* ───── KPI tiles ───── */
.my-assets-kpis {
  display: grid;
  /* min track shrinks to half-width on narrow containers so there are
     always >=2 tracks — the span-2 tiles below then never overflow and
     the old 640px span-1 fallback query is unnecessary. */
  grid-template-columns: repeat(auto-fit, minmax(min(11.25rem, calc(50% - 0.5rem)), 1fr));
  gap: 0.75rem;
  /* Density pass: was 2.5rem. */
  margin-bottom: 1.25rem;
}
.my-assets-kpi-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  /* Density pass: was 1.25rem 1.375rem + 6.5rem min-height. */
  padding: 0.875rem 1rem;
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  min-height: 5rem;
}
/* The one tile that goes somewhere — the entry point into the machine
   browser. Keeps the neutral tile chrome (the other tiles are deliberately
   non-interactive) and signals affordance on hover only. */
.my-assets-kpi-tile--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.my-assets-kpi-tile--link:hover {
  border-color: #7b3fe4;
  box-shadow: 0 2px 8px rgba(123, 63, 228, 0.12);
}
.my-assets-kpi-tile--link:hover .my-assets-kpi-sublabel {
  color: #7b3fe4;
}
.my-assets-kpi-tile--accent {
  border-color: #b6dafd;
  background: linear-gradient(180deg, #f4faff 0%, #ffffff 60%);
}
.my-assets-kpi-tile--wide {
  grid-column: span 2;
}
/* The "Most common asset types" tile renders a small list instead of a
   single big number, so it needs the same outer chrome as siblings but a
   compact list layout inside. Same border / background / padding / shadow
   — only the inner content differs. */
.my-assets-kpi-tile--list {
  grid-column: span 2;
  padding-top: 1rem;
}
.my-assets-kpi-list-heading {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #1f2328;
  margin-bottom: 0.375rem;
}

/* The fix for the Gemini #1 finding — value/label/sublabel each on their
   own line with proper hierarchy. Before this the three spans inlined
   adjacent with no whitespace and read as one run-on string. */
.my-assets-kpi-value {
  display: block;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.15;
  color: #0d1117;
  letter-spacing: -0.02em;
}
.my-assets-kpi-label {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.4;
  /* Darkened from #0d1117 → matches headlines, but also bumped contrast
     on the sublabel below. Gap from value increased per Gemini iter-2. */
  color: #1f2328;
  margin-top: 0.75rem;
}
.my-assets-kpi-sublabel {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
  /* #6e7681 → #57606a: lifts contrast above WCAG AA 4.5:1 on white */
  color: #57606a;
  margin-top: 0.25rem;
}

/* Top-asset-groups list inside the wide tile */
.my-assets-kpi-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.my-assets-kpi-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.my-assets-kpi-list-name {
  color: #24292f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-assets-kpi-list-count {
  color: #57606a;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  flex-shrink: 0;
}

/* ───── Section headers (clusters / map) ───── */
.my-assets-section-header {
  margin: 2rem 0 1rem;
}
.my-assets-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0d1117;
  margin: 0 0 0.25rem;
}
.my-assets-section-caption {
  font-size: 0.8125rem;
  color: #6e7681;
  margin: 0;
  line-height: 1.5;
}

/* ───── Clusters table ───── */
.my-assets-clusters {
  margin-bottom: 2.5rem;
}
.my-assets-clusters-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 0.75rem;
  overflow: hidden;
}
.my-assets-clusters-head {
  display: grid;
  /* +56px leading column for thumbnail alignment (40px thumb + 16px gap) */
  grid-template-columns: 3.5rem 8.75rem 1fr auto 6.25rem 12.5rem;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: #f6f8fa;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1;
  color: #57606a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e1e4e8;
}
.my-assets-cluster-row {
  border-bottom: 1px solid #eaeef2;
}
.my-assets-cluster-row:last-child {
  border-bottom: none;
}
.my-assets-cluster-row-head {
  display: grid;
  grid-template-columns: 3.5rem 8.75rem 1fr auto 6.25rem 12.5rem;
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.1s;
}
.my-assets-cluster-row-head:hover {
  background: #f6f8fa;
}
.my-assets-kind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1875rem 0.625rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: max-content;
}
.my-assets-kind-badge--site {
  background: #ddf4ff;
  color: #0969da;
}
.my-assets-kind-badge--project {
  background: #fff8c5;
  color: #9a6700;
}
.my-assets-cluster-name {
  font-weight: 500;
  color: #0d1117;
}
.my-assets-cluster-country {
  color: #57606a;
  font-size: 0.8125rem;
}
.my-assets-cluster-count {
  color: #24292f;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.my-assets-cluster-action {
  color: #0969da;
  font-size: 0.8125rem;
  text-align: right;
  white-space: nowrap;
}

/* Expanded cluster body — flows + feedback */
.my-assets-cluster-flows {
  padding: 0 1.25rem 1rem;
  background: #fafbfc;
  border-top: 1px solid #eaeef2;
}
.my-assets-flows-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.75rem;
}
.my-assets-flow-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid #d0d7de;
  font-size: 0.75rem;
  color: #24292f;
}
.my-assets-flows-empty {
  padding: 0.75rem 0;
  color: #6e7681;
  font-size: 0.8125rem;
  font-style: italic;
}
.my-assets-cluster-feedback {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0 0.5rem;
  font-size: 0.8125rem;
}
.my-assets-cluster-feedback-label {
  color: #57606a;
}
.my-assets-cluster-feedback-btn {
  padding: 0.25rem 0.75rem;
  border-radius: 0.875rem;
  border: 1px solid #d0d7de;
  background: #ffffff;
  color: #24292f;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1;
  font-family: var(--font-family);
  cursor: pointer;
}
.my-assets-cluster-feedback-btn:hover {
  background: #f6f8fa;
}
.my-assets-cluster-feedback-btn--ok {
  border-color: #1a7f37;
  color: #1a7f37;
}
.my-assets-cluster-feedback-btn--warn {
  border-color: #b35900;
  color: #b35900;
}
.my-assets-cluster-feedback--ok {
  color: #1a7f37;
  font-weight: 500;
}

/* ───── Map ───── */
.my-assets-map-wrap {
  position: relative;
  margin-bottom: 2rem;
  border: 1px solid #e1e4e8;
  border-radius: 0.75rem;
  overflow: hidden;
  /* Reserve height even before Leaflet computes its viewport. Without this
     the map div has height 0 during hydration → tile loader skips
     rendering → "white map" until invalidateSize() runs. */
  min-height: 23.75rem;
}
/* Skeleton overlay sits on top of the Leaflet container until the first
   tile-loaded event removes it. Subtle horizontal shimmer over a muted
   background reads as "loading" without yelling for attention. The
   .my-assets-map-loaded class (set by my_assets_page.dart map init's
   `map.once('tileload', …)` + 4s fallback) fades and then removes it. */
.my-assets-map-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%) #eef2f7;
  background-size: 200% 100%;
  animation: my-assets-map-shimmer 1.8s linear infinite;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.my-assets-map-wrap.my-assets-map-loaded::before {
  opacity: 0;
  /* visibility hidden after the fade so pointer-events:none + opacity:0
     are belt-and-braces; the next paint cycle removes it entirely. */
  visibility: hidden;
}
@keyframes my-assets-map-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .my-assets-map-wrap::before { animation: none; }
}
/* Leaflet zoom controls get aria-label tagged from the map init script
   (see _initMap in my_assets_page.dart) — CSS can't set ARIA attrs. */
.my-assets-map-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: #6e7681;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 0.75rem;
}
.my-assets-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #f6f8fa;
  font-size: 0.75rem;
  border-top: 1px solid #e1e4e8;
}
.my-assets-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #24292f;
}
.my-assets-map-note {
  font-size: 0.75rem;
  color: #6e7681;
  margin: 0.5rem 0 0;
}

/* ───── Loading / error / empty states ───── */
.my-assets-loading,
.my-assets-empty,
.my-assets-error {
  /* Density pass: empty/error states cap at content height + a CTA — a
     4rem-padded well pushed everything else off the fold. */
  padding: 1.5rem;
  text-align: center;
  color: #57606a;
}
.my-assets-retry-btn {
  /* Aligned to core .btn vocabulary: 12px radius, near-black accent,
   * inherits storefront font-family from var(--font-family). */
  margin-top: 0.75rem;
  padding: 0.5rem 1.125rem;
  border-radius: 0.75rem;
  border: 1px solid #1a1a1a;
  background: #ffffff;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1;
  font-family: var(--font-family);
  cursor: pointer;
}
.my-assets-retry-btn:hover {
  background: #f4faff;
}

/* Screen-reader-only helper used for cluster aria-labels */
.my-assets-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ───────────────────────────────────────────────────────────
   AssetPicker — top-of-/services "Find your asset" section.
   Two tabs (serial typeahead / nameplate OCR upload).
   Rendered above the equipment strip on /services.

   ITER-1 token alignment (after Gemini baseline critique):
   - Killed the heavy rounded panel chrome (border + radius + shadow)
     so this reads as a page section, not an embedded widget.
   - Horizontal padding 12px 24px matches .svc-search-bar +
     .svc-equipment-strip directly below this in the DOM.
   - Accent switched from bootstrap blue (#0d6efd) → page accent
     #009999 (matches .svc-level-pill.active, .svc-search-input-wrap
     focus, .svc-equipment-chip-type).
   - Typography uses var(--font-family) so Siemens Sans actually loads.
   - "FIND YOUR ASSET" is now a small caps label like
     .svc-equipment-strip-label, not a 16px heading.

   ITER-2 polish (after iter-1 "needs work" verdict):
   - Subtle bg-tint (#f9fafb) + thicker `border-bottom: 2px` so the
     section reads as a discoverable affordance, NOT a floating set
     of disconnected controls (matches .svc-equipment-strip below).
   - Tabs converted from segmented-button look to round filter-pill
     look (border-radius: 20px, transparent inactive) — matches
     .svc-level-pill so the page has ONE filter-pill vocabulary.
   - 16px gap between subtitle → tabs → input (was 10px); reduces
     density Gemini flagged.
   - Suggestions get a `margin-top: 6px` separator so they read as
     a dropdown extending the input, not glued to it.
   - Suggestion items get `:focus-visible` keyboard-focus ring (A11y).
   - Selected-state: stronger visual link to equipment strip below
     via shared `background: #f9fafb` tint.
   ─────────────────────────────────────────────────────────── */
.asset-picker {
  /* Gemini iter-1 critique: dropped the #f9fafb panel tint + bottom border
   * so the widget blends into the page background like the rest of /services
   * (search bar, level pills, equipment strip — none of which sit on a tinted
   * panel). Padding kept so the tabs + input still align with the page's
   * 24px gutter. */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 1rem 1.5rem 0;
  margin: 0;
  box-shadow: none;
  font-family: var(--font-family);
}
.asset-picker-header {
  margin-bottom: 0.875rem;
}
/* Demoted from a 16px heading to a small caps section label —
   matches .svc-equipment-strip-label below it. */
.asset-picker-title {
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.25rem;
}
.asset-picker-subtitle {
  font-family: var(--font-family);
  font-size: 0.8125rem;
  color: #57606a;
  margin: 0;
  line-height: 1.4;
}
/* Tabs converted to filter-pill vocabulary (matches .svc-level-pill
   on the same page) — was a segmented control with #f3f4f6 trough
   and 8px sliding white pill, which read as a NEW chrome pattern. */
.asset-picker-tabs {
  display: inline-flex;
  gap: 0.375rem;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0.875rem;
}
.asset-picker-tab {
  /* Aligned to core button vocabulary (--radius-button 10-12px) — was 20px
   * pill which looked like a filter chip; tabs are mode-switches so they
   * should match the rounded-rectangle button language used on PLP/PDP/cart. */
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 0.3125rem 0.875rem;
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: #4b5563;
  border-radius: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.asset-picker-tab:hover:not(.active) {
  border-color: #1a1a1a;
  color: #333333;
}
.asset-picker-tab.active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
  box-shadow: none;
}
.asset-picker-tab:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}
.asset-picker-body {
  position: relative;
}
.asset-picker-pane {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 40rem;
}

/* Serial typeahead input — mirrors .svc-search-input-wrap so the
   two search affordances on /services share a visual language.
   Background is #ffffff (not #f9fafb) because the parent section
   is now tinted #f9fafb — input must contrast against it. */
.asset-picker-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  padding: 0 1rem;
  height: 2.5rem;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.asset-picker-input-wrap:focus-within {
  border-color: #1a1a1a;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12);
  background: #ffffff;
}
.asset-picker-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: 0.875rem;
  line-height: 1;
  color: #1f2937;
}
.asset-picker-input::placeholder {
  /* #9ca3af on white = 2.85:1 — fails WCAG AA. #6b7280 = 4.79:1, passes. */
  color: #6b7280;
}

.asset-picker-status {
  font-family: var(--font-family);
  font-size: 0.8125rem;
  color: #57606a;
  padding: 0.25rem 2px;
}
.asset-picker-error {
  font-family: var(--font-family);
  font-size: 0.8125rem;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
}

/* Suggestion list — same radius as the input above so it reads
   as a continuation of the same control. `margin-top: 6px` gives
   visual separation so it reads as a dropdown extending the input,
   not glued to it (iter-1 Gemini called it "feels disconnected").
   `overflow: hidden` clips the first/last <li> hover-bg to the
   rounded container so the corner radius reads clean even on
   hover/focus. */
.asset-picker-suggestions {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 0.625rem;
  background: #ffffff;
  max-height: 17.5rem;
  overflow: hidden auto;
  /* Slightly heavier shadow so the dropdown reads as a clearly grounded
     overlay, not a flat card — matches the depth conventions used on the
     storefront's other dropdowns. */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}
/* Two-line layout: serial + name on row 1, site on row 2 as
   secondary text under the name (previous layout right-aligned
   site as a 3rd column which felt detached). */
.asset-picker-suggestion {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 0.875rem;
  row-gap: 0.1875rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  transition: background 0.08s;
}
.asset-picker-suggestion:last-child {
  border-bottom: 0;
}
.asset-picker-suggestion:hover,
.asset-picker-suggestion:focus-visible {
  background: #faf5ff;
  outline: none;
}
.asset-picker-suggestion:focus-visible {
  /* A11y: visible keyboard-focus ring matching the page accent. */
  box-shadow: inset 0 0 0 2px #1a1a1a;
}
.asset-picker-suggestion-serial {
  grid-column: 1;
  grid-row: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #242424;
  font-weight: 600;
  font-size: 0.8125rem;
}
.asset-picker-suggestion-name {
  grid-column: 2;
  grid-row: 1;
  color: #1f2937;
  font-weight: 500;
}
.asset-picker-suggestion-site {
  grid-column: 2;
  grid-row: 2;
  color: #6b7280;
  font-size: 0.75rem;
}

/* Nameplate-upload affordance — match the equipment-chip-restore
   dashed pattern so it reads as part of the page vocabulary. */
.asset-picker-upload {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px dashed #d1d5db;
  border-radius: 0.5rem;
  background: transparent;
  color: #6b7280;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  width: max-content;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
}
.asset-picker-upload:hover {
  border-color: #1a1a1a;
  color: #1a1a1a;
  background: #faf5ff;
}
.asset-picker-file-input {
  position: absolute;
  left: -625rem;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.asset-picker-ocr-result {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.asset-picker-ocr-detected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1.375rem;
  padding: 0.625rem 0.75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}
.asset-picker-ocr-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asset-picker-ocr-label {
  font-family: var(--font-family);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.asset-picker-ocr-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #242424;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.asset-picker-suggestion--ocr {
  grid-template-columns: minmax(7.5rem, auto) 1fr auto;
  grid-template-rows: auto auto;
}
.asset-picker-suggestion--ocr .asset-picker-confirm {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
}
.asset-picker-confirm {
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: #ffffff;
  padding: 0.375rem 0.875rem;
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.asset-picker-confirm:hover {
  background: #333333;
  border-color: #333333;
}

/* Selected-state row (replaces the picker once an asset is chosen).
   Demoted from a banner-style filled card to a single inline row
   that reads as a filter indicator, not a page heading.
   ITER-2: shared bg-tint with the unselected picker so the section
   above the equipment strip has ONE visual identity. */
.asset-picker--selected {
  background: #f9fafb;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.75rem 1.5rem;
}
.asset-picker-selected-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.asset-picker-selected-info {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
}
.asset-picker-selected-label {
  font-family: var(--font-family);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  font-weight: 600;
}
/* Was 16px/600 — now a 14px/500 inline name so it doesn't outweigh
   the page's actual h2 (SERVICES). */
.asset-picker-selected-name {
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
}
.asset-picker-selected-meta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  color: #6b7280;
}
.asset-picker-selected-serial {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6b7280;
  font-weight: 500;
}
.asset-picker-selected-type {
  font-family: var(--font-family);
  font-size: 0.625rem;
  font-weight: 600;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.asset-picker-selected-site {
  font-family: var(--font-family);
  font-size: 0.75rem;
  color: #9ca3af;
}
/* Demoted from a bordered button to a quiet text link with an X
   icon — the action is "drop a filter", not "submit a form".
   ITER-2 polish: 1px border-on-hover gives it just enough affordance
   to read as a button without weighing down the resting state. */
.asset-picker-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.625rem;
  border: 1px solid transparent;
  background: transparent;
  color: #6b7280;
  border-radius: 0.375rem;
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.asset-picker-clear-btn:hover {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #242424;
}
.asset-picker-clear-btn:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 1px;
}

/* ──────────────────────────────────────────────────────────────────────
   /nameplate-scan — full-page phone-camera entry into the service flow.
   Re-uses the .my-assets-page wrapper colours / font stack via inheritance
   so it visually belongs to the Asset-Hub family.
   ────────────────────────────────────────────────────────────────────── */

.nameplate-scan-page {
  max-width: 82.5rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, calc(4 * var(--vwx)), 3rem) 4rem;
}
.nameplate-scan-header {
  margin-bottom: 1.75rem;
}
.nameplate-scan-header .breadcrumb {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: #6b7280;
  margin-bottom: 0.75rem;
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.nameplate-scan-header .breadcrumb a {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 600;
}
.nameplate-scan-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.nameplate-scan-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0 0 0.375rem;
  color: #0d1117;
  line-height: 1.2;
}
.nameplate-scan-subtitle {
  font-size: 0.875rem;
  color: #57606a;
  margin: 0;
  max-width: 56ch;
  line-height: 1.5;
}
.nameplate-scan-manual-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: #4f46e5;
  text-decoration: underline;
  font-size: 0.8125rem;
  font-weight: 500;
}
.nameplate-scan-manual-link:hover {
  color: #4338ca;
}

.nameplate-scan-content {
  display: block;
}

/* ── Idle / upload affordance ── */
.nameplate-scan-upload-card {
  max-width: 40rem;
  margin: 0 auto;
  background: #ffffff;
  border: 1px dashed #c7d2fe;
  border-radius: 0.875rem;
  padding: 2.5rem 2rem;
  text-align: center;
}
.nameplate-scan-upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.125rem;
  background: #eef2ff;
  margin-bottom: 1rem;
}
.nameplate-scan-upload-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0d1117;
  margin: 0 0 0.5rem;
}
.nameplate-scan-upload-hint {
  color: #57606a;
  font-size: 0.8125rem;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}
.nameplate-scan-file-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #4f46e5;
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.375rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  user-select: none;
}
.nameplate-scan-file-label:hover {
  background: #4338ca;
}
.nameplate-scan-file-label:active {
  transform: translateY(1px);
}
.nameplate-scan-file-input {
  display: none;
}
.nameplate-scan-tips {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f1f1f3;
  text-align: left;
}
.nameplate-scan-tips h3 {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.nameplate-scan-tips ul {
  margin: 0;
  padding-left: 1.125rem;
  color: #57606a;
  font-size: 0.8125rem;
  line-height: 1.7;
}

/* ── Spinner ── */
.nameplate-scan-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border: 3px solid #e5e7eb;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: nameplate-scan-spin 0.9s linear infinite;
}
@keyframes nameplate-scan-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Status card (scanning / error) ── */
.nameplate-scan-status-card {
  max-width: 28.75rem;
  margin: 3.75rem auto 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  padding: 2rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.nameplate-scan-status-card h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0.25rem 0 0;
}
.nameplate-scan-status-hint {
  color: #57606a;
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
}
.nameplate-scan-error-card {
  border-color: #fecaca;
  background: #fff;
}
.nameplate-scan-error-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.875rem;
  background: #fef2f2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nameplate-scan-error-actions {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-top: 0.5rem;
}

/* ── Matched / no-match shared grid ── */
/* Fluid: photo rail holds ~17.5rem beside the services column and wraps
   to a full-width line when the row can't fit both (no width breakpoint). */
.nameplate-scan-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: start;
}
.nameplate-scan-photo-col {
  flex: 1 1 min(100%, 17.5rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nameplate-scan-services-col {
  flex: 999 1 min(100%, 24rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nameplate-scan-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}
.nameplate-scan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.nameplate-scan-card-title {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
}
.nameplate-scan-retake-btn {
  background: transparent;
  border: 0;
  color: #4f46e5;
  font-weight: 600;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0.375rem;
}
.nameplate-scan-retake-btn:hover {
  text-decoration: underline;
}
.nameplate-scan-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  background: #0d1117;
  object-fit: cover;
  max-height: 16.25rem;
}
.nameplate-scan-photo-fallback {
  background: #f3f4f6;
  color: #6b7280;
  font-size: 0.75rem;
  height: 11.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

/* ── Detail card ── */
.nameplate-scan-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 0.75rem 1rem;
}
.nameplate-scan-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nameplate-scan-detail-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  font-weight: 600;
}
.nameplate-scan-detail-value {
  font-size: 0.8125rem;
  color: #0d1117;
  font-weight: 500;
  word-break: break-word;
}
.nameplate-scan-detail-foot {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f1f1f3;
}
.nameplate-scan-detail-link {
  color: #4f46e5;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
.nameplate-scan-detail-link:hover {
  text-decoration: underline;
}
.nameplate-scan-detected-strip {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  font-size: 0.75rem;
}
.nameplate-scan-detected-label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.625rem;
}
.nameplate-scan-detected-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #0d1117;
  font-weight: 600;
}

/* ── Match banner + service cards ── */
.nameplate-scan-match-banner {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
}
.nameplate-scan-match-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  background: #ede9fe;
  color: #4f46e5;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
}
.nameplate-scan-match-banner h2 {
  font-size: 1.375rem;
  margin: 0;
  color: #0d1117;
  font-weight: 600;
}

.nameplate-scan-services-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.nameplate-scan-service-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}
.nameplate-scan-service-card--recommended {
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px #4f46e5;
}
.nameplate-scan-service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.nameplate-scan-service-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0d1117;
}
.nameplate-scan-service-badge {
  background: #4f46e5;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
}
.nameplate-scan-service-level {
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
}
.nameplate-scan-service-desc {
  font-size: 0.8125rem;
  color: #57606a;
  margin: 0;
  line-height: 1.5;
}
.nameplate-scan-service-cta {
  margin-top: auto;
  color: #4f46e5;
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
}
.nameplate-scan-service-cta:hover {
  text-decoration: underline;
}
.nameplate-scan-services-foot {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.nameplate-scan-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #0d1117;
  color: #fff;
  border: 0;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.125rem;
  border-radius: 0.625rem;
  cursor: pointer;
}
.nameplate-scan-primary-btn:hover {
  background: #1f2937;
}
.nameplate-scan-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: #0d1117;
  border: 1px solid #d0d7de;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.125rem;
  border-radius: 0.625rem;
  cursor: pointer;
  text-decoration: none;
}
.nameplate-scan-secondary-btn:hover {
  background: #f6f8fa;
  border-color: #6b7280;
}

/* ── No-match state ── */
.nameplate-scan-no-match-head {
  text-align: left;
  margin-bottom: 0.25rem;
}
.nameplate-scan-no-match-icon {
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8125rem;
  background: #fef2f2;
  margin-bottom: 0.75rem;
}
.nameplate-scan-no-match-head h2 {
  margin: 0 0 0.375rem;
  font-size: 1.375rem;
  color: #0d1117;
}
.nameplate-scan-no-match-head p {
  margin: 0;
  font-size: 0.875rem;
  color: #57606a;
  line-height: 1.5;
}
.nameplate-scan-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: 0.75rem;
}
.nameplate-scan-action-card {
  display: flex;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.875rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.05s;
}
.nameplate-scan-action-card:hover {
  border-color: #4f46e5;
}
.nameplate-scan-action-card:active {
  transform: translateY(1px);
}
.nameplate-scan-action-icon {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background: #eef2ff;
  border-radius: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nameplate-scan-action-body h3 {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0d1117;
}
.nameplate-scan-action-body p {
  margin: 0;
  font-size: 0.75rem;
  color: #57606a;
  line-height: 1.45;
}
.nameplate-scan-no-match-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

/* ── Empty service list (matched but no SMM offer) ── */
.nameplate-scan-empty {
  text-align: center;
  padding: 1rem 0.25rem;
}
.nameplate-scan-empty p {
  color: #57606a;
  font-size: 0.8125rem;
  margin: 0 0 0.75rem;
  line-height: 1.5;
}
.nameplate-scan-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.nameplate-scan-loading-card p {
  color: #57606a;
  font-size: 0.8125rem;
  margin: 0;
}

/* /services header "Scan a nameplate" entry — sized to match the region
   badge sibling so it doesn't dominate the SERVICES heading. */
.svc-scan-nameplate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  background: #fff;
  color: #4f46e5;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  margin-left: auto;
  transition: background 0.15s, border-color 0.15s;
}
.svc-scan-nameplate-btn:hover {
  background: #eef2ff;
  border-color: #4f46e5;
}
.svc-scan-nameplate-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}


/* ─────────────────────────────────────────────────────────────────
   Site Detail page (/sites/:clusterId) — Stitch "Substation Alpha"
   dark layout. Aligns with the rest of the asset-hub surface but
   uses a darker chrome (deep-indigo background, light-on-dark
   typography) per the Figma reference.
   ───────────────────────────────────────────────────────────────── */
.site-detail-page {
  min-height: 100vh;
  background: #ffffff;
  color: #1a1a1a;
  padding: 2rem 2.5rem 5rem;
}
.site-detail-loading,
.site-detail-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3.75rem 0;
  color: #475569;
}
.site-detail-empty {
  max-width: 30rem;
  margin: 5rem auto;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 2rem;
}
.site-detail-empty h3 {
  margin: 0 0 0.5rem;
  color: #1a1a1a;
  font-size: 1.125rem;
}
.site-detail-empty p {
  margin: 0 0 1rem;
  color: #6b7280;
}
.site-detail-back-link {
  color: #8b9cff;
  text-decoration: none;
}
.site-detail-retry-btn {
  background: #1a1a1a;
  color: #fff;
  border: none;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  cursor: pointer;
}

/* ── Header ─────────────────────────────────────────────────────── */
.site-detail-header {
  margin-bottom: 1.5rem;
}
.site-detail-breadcrumb {
  color: #6b7280;
  font-size: 0.8125rem;
  margin-bottom: 0.75rem;
}
.site-detail-breadcrumb a {
  color: #6b7280;
  text-decoration: none;
}
.site-detail-breadcrumb a:hover {
  color: #1a1a1a;
  text-decoration: underline;
}
.site-detail-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.site-detail-title-group {
  flex: 1 1 auto;
  min-width: 0;
}
.site-detail-title {
  margin: 0 0 0.5rem;
  color: #1a1a1a;
  font-size: 2.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.site-detail-title-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}
.site-detail-country {
  color: #475569;
  font-size: 0.875rem;
}
.site-detail-kind-badge {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}
.site-detail-kind-badge--project {
  background: rgba(249, 115, 22, 0.16);
  color: #ea580c;
  border-color: rgba(249, 115, 22, 0.4);
}
.site-detail-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
}
.site-detail-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.site-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.site-detail-btn--ghost {
  border-color: #e2e8f0;
  background: #ffffff;
}
.site-detail-btn--ghost:hover {
  background: #f1f5f9;
  border-color: #d1d5db;
}
.site-detail-btn--primary {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.site-detail-btn--primary:hover {
  background: #2a2a2a;
}
/* Staged / inert (asset-lab preview) recommendation badge. */
.site-detail-staged-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  /* 0.06em == the old 0.6px at this 0.625rem font-size, but it tracks the
     text when the user zooms instead of staying pinned to a device pixel. */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a5a00;
  background: rgba(217, 164, 65, 0.18);
  border: 1px solid rgba(217, 164, 65, 0.5);
  padding: 1px 0.4375rem;
  border-radius: 3px;
}
.site-detail-btn--ghost-sm {
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  border-color: #e2e8f0;
  background: #ffffff;
}
.site-detail-btn--ghost-sm:hover {
  background: #f1f5f9;
  border-color: #d1d5db;
}
.site-detail-btn--primary-sm {
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.site-detail-btn--primary-sm:hover {
  background: #2a2a2a;
}

/* ── Stats row ──────────────────────────────────────────────────── */
.site-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.site-detail-stat {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.625rem;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.site-detail-stat-value {
  font-size: 1.625rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.1;
}
.site-detail-stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-detail-stat--due {
  border-color: rgba(245, 158, 11, 0.45);
}
.site-detail-stat--due .site-detail-stat-value {
  color: #d97706;
}
.site-detail-stat--approaching {
  border-color: rgba(56, 189, 248, 0.45);
}
.site-detail-stat--approaching .site-detail-stat-value {
  color: #0284c7;
}
.site-detail-stat--overdue {
  border-color: rgba(239, 68, 68, 0.5);
}
.site-detail-stat--overdue .site-detail-stat-value {
  color: #dc2626;
}

/* ── Layout (main + side) ───────────────────────────────────────── */
/* Fluid sidebar: side rail holds ~20rem, wraps below main when the row
   can't fit both (no width breakpoint). */
.site-detail-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.site-detail-main {
  flex: 999 1 min(100%, 26rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.site-detail-side {
  flex: 1 1 20rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.site-detail-card,
.site-detail-side-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.site-detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.site-detail-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
}
.site-detail-card-caption {
  font-size: 0.75rem;
  color: #6b7280;
}
.site-detail-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}
.site-detail-side-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
}
.site-detail-side-blurb {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
}
.site-detail-ai-pill {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1875rem 0.4375rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

/* ── Recommended Next Activities ───────────────────────────────── */
.site-detail-recommended-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.site-detail-rec-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left-width: 0.25rem;
}
.site-detail-rec-row--overdue {
  border-left-color: #ef4444;
}
.site-detail-rec-row--due_now {
  border-left-color: #f59e0b;
}
.site-detail-rec-row--approaching {
  border-left-color: #38bdf8;
}
.site-detail-rec-body {
  min-width: 0;
}
.site-detail-rec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.25rem;
  font-size: 0.6875rem;
  color: #6b7280;
}
.site-detail-sev-badge {
  display: inline-block;
  padding: 2px 0.4375rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.site-detail-sev-badge--overdue {
  background: rgba(239, 68, 68, 0.18);
  color: #dc2626;
}
.site-detail-sev-badge--due_now {
  background: rgba(245, 158, 11, 0.18);
  color: #d97706;
}
.site-detail-sev-badge--approaching {
  background: rgba(56, 189, 248, 0.18);
  color: #0284c7;
}
.site-detail-rec-sn,
.site-detail-rec-type {
  color: #475569;
}
.site-detail-rec-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.site-detail-rec-reason {
  font-size: 0.75rem;
  color: #6b7280;
}
.site-detail-rec-pricing {
  text-align: right;
  min-width: 5.625rem;
}
.site-detail-rec-price {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
}
.site-detail-rec-price-note {
  font-size: 0.625rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-detail-rec-actions {
  display: flex;
  gap: 0.375rem;
}

/* ── Sidebar cards (bundle + geographic) ───────────────────────── */
.site-detail-bundle-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.375rem;
}
.site-detail-bundle-blurb {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.5;
}
.site-detail-bundle-targets-label {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 0.375rem;
}
.site-detail-bundle-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.site-detail-chip {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}
.site-detail-bundle-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.site-detail-confidence {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-detail-confidence-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
}
.site-detail-confidence-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a1a;
}
.site-detail-bundle-actions {
  display: flex;
  gap: 0.375rem;
}

/* ── All Assets table ──────────────────────────────────────────── */
.site-detail-assets-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  overflow: hidden;
}
.site-detail-assets-head,
.site-detail-asset-row {
  display: grid;
  grid-template-columns:
    minmax(7.5rem, 1.2fr)
    minmax(10rem, 1.8fr)
    minmax(5rem, 0.8fr)
    minmax(6.875rem, 1fr)
    minmax(6.875rem, 1fr);
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  align-items: center;
}
.site-detail-assets-head {
  background: #f8fafc;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  border-bottom: 1px solid #e2e8f0;
}
.site-detail-asset-row {
  font-size: 0.8125rem;
  color: #475569;
  border-bottom: 1px solid #21243c;
}
.site-detail-asset-row:last-child {
  border-bottom: none;
}
.site-detail-asset-row:hover {
  background: #f1f5f9;
}
.site-detail-asset-sn {
  color: #1a1a1a;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.site-detail-asset-type {
  color: #1a1a1a;
}
/* Equipment-family chip beside the MLFB code (Userback SHOP-225) — small,
   muted, sits before the type link so a row reads "AIS · 3AP1". */
.site-detail-family-chip {
  display: inline-block;
  margin-right: 0.375rem;
  padding: 1px 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  background: #f1f5f9;
  border-radius: 0.25rem;
  vertical-align: middle;
}
.site-detail-asset-cell {
  color: #475569;
}
.site-detail-asset-status {
  text-align: left;
}
.site-detail-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
}
.site-detail-status-badge--ok {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}
/* Real operational status — operating = green (it IS running), unknown = neutral
   grey (we honestly don't know), planned = blue. No fabricated "Healthy". */
.site-detail-status-badge--operating,
.site-detail-status-badge--active {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}
.site-detail-status-badge--planned {
  background: rgba(56, 189, 248, 0.18);
  color: #0284c7;
}
.site-detail-status-badge--unknown {
  background: rgba(100, 116, 139, 0.16);
  color: #475569;
}
.site-detail-status-badge--due {
  background: rgba(245, 158, 11, 0.18);
  color: #d97706;
}
.site-detail-status-badge--due_soon {
  background: rgba(56, 189, 248, 0.18);
  color: #0284c7;
}
.site-detail-status-badge--overdue {
  background: rgba(239, 68, 68, 0.22);
  color: #dc2626;
}
.site-detail-status-badge--decommissioned {
  background: #e2e8f0;
  color: #6b7280;
}
.site-detail-assets-empty {
  padding: 1.5rem;
  text-align: center;
  color: #6b7280;
}
.site-detail-assets-expand {
  margin-top: 0.75rem;
  width: 100%;
  background: transparent;
  border: 1px dashed #e2e8f0;
  color: #6b7280;
  padding: 0.625rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
}
.site-detail-assets-expand:hover {
  border-color: #d1d5db;
  color: #1a1a1a;
  background: #f1f5f9;
}

/* ── /my-assets row: site-detail link ──────────────────────────── */
.my-assets-cluster-detail-link {
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
.my-assets-cluster-detail-link:hover {
  text-decoration: underline;
}

/* ── Leaflet tile fix ──────────────────────────────────────────────
 * Global `img { max-width: 100% }` from main.css collapses Leaflet
 * tiles to 0 width when nested inside a flex container. Force the
 * tile pane's images back to their natural 256x256 with !important so
 * the global rule loses the cascade.
 *
 * MUST be px, never rem (the GREY-STRIPE BUG, fixed 2026-07-21).
 * Leaflet positions tiles on a hard 256px grid computed in JS, but this
 * rule sized them in `rem`. The storefront's root font-size is 14.62px,
 * not 16px, so `16rem` resolved to 233.9px — every tile ended up ~22px
 * short of its own grid cell, opening a 22px gutter between every tile
 * row and column. Those gutters are the grey stripes that ran across the
 * fleet map. A tile is a fixed-pixel raster keyed to Leaflet's pixel
 * math; it must not scale with typography. */
.leaflet-tile-pane img,
.leaflet-container img.leaflet-tile {
  max-width: none !important;
  /* px-doctrine: allow — Leaflet's JS tile grid is a hard 256px lattice */
  width: 256px !important;
  /* px-doctrine: allow — a relative unit here reopens the grey stripes */
  height: 256px !important;
}
.leaflet-marker-pane img,
.leaflet-shadow-pane img,
.leaflet-popup img {
  max-width: none !important;
}

/* ─── Equipment Family filter chip-row (above cluster table) ──────────── */
.my-assets-family-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
  padding: 0.25rem 0;
}
.my-assets-family-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: inherit;
}
.my-assets-family-chip:hover {
  border-color: #cbd5e1;
  color: #0f172a;
}
.my-assets-family-chip--active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}
.my-assets-family-chip-count {
  display: inline-block;
  padding: 1px 0.5rem;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.my-assets-family-chip--active .my-assets-family-chip-count {
  background: rgba(255, 255, 255, 0.18);
}
.my-assets-clusters-empty-row {
  padding: 1.5rem 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.8125rem;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}

/* ─── Cluster row thumbnail tile (48px asset-family icon) ─────────────── */
.my-assets-cluster-thumb {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  color: #475569;
  margin-right: 0.75rem;
}
.my-assets-cluster-thumb svg {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

/* ─── Tame the long-page scroll ──────────────────────────────────────────
 * /my-assets has 355 cluster rows in TenneT's data. Without a cap the page
 * scrolls to 27,000px which feels broken. Constrain the table to a sensible
 * viewport height + give it internal scroll (matches cart's items-col
 * scroll pattern). Header stays sticky inside the scroll pane.
 * Override the earlier `overflow: hidden` (line ~203) and rounded corners. */
.my-assets-clusters-table {
  max-height: min(45rem, calc(100vh - 15rem));
  min-height: 26.25rem;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
.my-assets-clusters-table .my-assets-clusters-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f8fa;
}
/* Slim cart-style scrollbar (matches .cart-panel-items-scroll) */
.my-assets-clusters-table::-webkit-scrollbar {
  width: 0.375rem;
}
.my-assets-clusters-table::-webkit-scrollbar-track {
  background: transparent;
}
.my-assets-clusters-table::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.my-assets-clusters-table::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Asset-type link in site-detail per-asset table — points at the new
 * /asset-types/:code catalog page (de55d5209). Subtle until hover so it
 * doesn't shout in a dense table row. */
.site-detail-asset-type-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #b0b0b0;
  transition: color 0.15s, border-color 0.15s;
}
.site-detail-asset-type-link:hover {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
}

/* AssetPicker "View catalog" CTA — sits next to Clear so the next-best
 * action after selecting an asset is one click away (deep-link to
 * /asset-types/:code where spare-parts + docs + RFQ live). */
.asset-picker-catalog-btn {
  display: inline-flex;
  align-items: center;
  background: #0f766e;
  color: #ffffff;
  text-decoration: none;
  padding: 0.4375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.25rem;
  letter-spacing: 0.017em;
  transition: background 0.15s;
  margin-right: 0.5rem;
}
.asset-picker-catalog-btn:hover { background: #115e59; }

/* Installed-base → services deep-links (Erlangen flow): owned types on the
   My Assets cluster card link straight to their maintenance packs + spares. */
.my-assets-types-heading { font-size: 0.8125rem; font-weight: 600; color: #374151; margin: 0.25rem 0 0.5rem; }
.my-assets-types-grid { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 0.75rem; }
.my-assets-type-link {
  display: flex; flex-direction: column; gap: 2px; padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; text-decoration: none;
  min-width: 9.375rem; transition: border-color .15s, box-shadow .15s;
}
.my-assets-type-link:hover { border-color: #6366f1; box-shadow: 0 2px 0.5rem rgba(99,102,241,.12); }
.my-assets-type-link__code { font-size: 0.9375rem; font-weight: 700; color: #111827; }
.my-assets-type-link__units { font-size: 0.75rem; color: #6b7280; }
.my-assets-type-link__cta { font-size: 0.8125rem; color: #4f46e5; font-weight: 500; margin-top: 0.25rem; }