/* SAM Revamp prototype — fullscreen overlay styles.
   All rules are scoped under .sam-v2 so:
     a) the prototype's --sam-* tokens cannot leak into the host page
     b) the host's six themes cannot color-bleed into the prototype
   Class names are kept as-is to match the prototype's vanilla JS. */

/* Host mount point — lives in static/index.html outside our scope. Without
   flex:1+min-width:0, this flex item sizes to its content's intrinsic width
   (the inventory rows ~1200px), gets clipped by .main-wrap's overflow:hidden,
   and the inventory list never receives the horizontal scroll it'd otherwise
   show. The min-width:0 disables flex's default min-width:auto that would
   refuse to shrink below content size. */
#sam-v2-mount { flex: 1; min-width: 0; min-height: 0; }

/* ============================================================
   HOST OVERLAY — wraps the prototype, lives on top of host page
   ============================================================ */
.sam-v2 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
.sam-v2-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   INLINE MOUNT MODE — revamp lives inside the host's inventory
   tab pane, not as a fullscreen overlay. Host header stays in
   charge of search, theme, settings, etc.
   ============================================================ */
.sam-v2.is-inline {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;                              /* always visible (no .open gate) */
  height: calc(100vh - 80px);                 /* cap to viewport so the inventory list scrolls internally */
  max-height: calc(100vh - 80px);             /* prevents content from pushing the container taller */
  min-height: 0;
  margin: 0;
}
.sam-v2.is-inline .sam-header { display: none; }
/* Scrollbars stay native to the inline pane; do not lock body scroll. */

/* Scaffolding from the prototype's standalone HTML <style> block.
   Keeps app-shell filling the overlay (not the viewport). */
.sam-v2 .app-shell { display: flex; flex-direction: column; height: 100%; background: var(--bg); }
.sam-v2 .app-body  { flex: 1; display: flex; min-height: 0; }
.sam-v2 .app-main  { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.sam-v2 kbd { background: var(--surface2); border: 1px solid var(--border2); color: var(--text); font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; }

/* keep header items on one line */
.sam-v2 .sam-header > * { flex-shrink: 0; }
.sam-v2 .sam-spacer { flex: 1 1 auto; min-width: 0; }
.sam-v2 .sam-stats { white-space: nowrap; }
@media (max-width: 1100px) { .sam-v2 .sam-stats { display: none; } }


/* ============================================================
   FROM styles-base.css
   ============================================================ */

.sam-v2 *,
.sam-v2 *::before,
.sam-v2 *::after { box-sizing: border-box; }
.sam-v2 .mono { font-family: var(--mono); }
.sam-v2 .dim { color: var(--muted); }

/* Status pills */
.sam-v2 .sam-pill { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; line-height: 1.6; border: 1px solid transparent; }
.sam-v2 .sam-pill-xs { font-size: 9px; padding: 1px 6px; }
.sam-v2 .sam-pill-sm { font-size: 10px; padding: 2px 8px; }
.sam-v2 .sam-pill-empty    { background: rgba(138,150,163,.10); color: var(--muted); border-color: rgba(138,150,163,.18); }
.sam-v2 .sam-pill-incoming { background: rgba(78,164,243,.12); color: var(--blue); border-color: rgba(78,164,243,.25); }
.sam-v2 .sam-pill-validation { background: rgba(245,166,35,.14); color: var(--amber); border-color: rgba(245,166,35,.30); }
.sam-v2 .sam-pill-staging  { background: rgba(245,166,35,.10); color: var(--amber); border-color: rgba(245,166,35,.25); }
.sam-v2 .sam-pill-ready    { background: rgba(63,194,109,.14); color: var(--green); border-color: rgba(63,194,109,.30); }
.sam-v2 .sam-pill-outgoing { background: rgba(78,164,243,.12); color: var(--blue); border-color: rgba(78,164,243,.25); }
.sam-v2 .sam-pill-decom    { background: rgba(239,68,68,.13); color: var(--red); border-color: rgba(239,68,68,.28); }

/* status dots */
.sam-v2 .sam-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: middle; }
.sam-v2 .sam-dot.st-empty { background: #3a414a; }
.sam-v2 .sam-dot.st-incoming, .sam-v2 .sam-dot.st-outgoing { background: var(--blue); box-shadow: 0 0 0 3px rgba(78,164,243,.12); }
.sam-v2 .sam-dot.st-validation, .sam-v2 .sam-dot.st-staging { background: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,.13); }
.sam-v2 .sam-dot.st-ready { background: var(--green); box-shadow: 0 0 0 3px rgba(63,194,109,.13); }
.sam-v2 .sam-dot.st-decom { background: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,.13); }

/* machine type / flag badges */
.sam-v2 .sam-badge { display: inline-flex; align-items: center; padding: 1px 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; font-weight: 700; border-radius: 2px; margin-right: 3px; }
.sam-v2 .sam-badge.sp { background: rgba(167,128,245,.16); color: var(--purple); }
.sam-v2 .sam-badge.nu { background: rgba(63,194,109,.14); color: var(--green); }
.sam-v2 .sam-badge.rp { background: rgba(78,164,243,.14); color: var(--blue); }
.sam-v2 .sam-badge.us { background: rgba(45,212,191,.14); color: var(--teal); }
.sam-v2 .sam-badge.dc { background: rgba(239,68,68,.14); color: var(--red); }
.sam-v2 .sam-badge.nc { background: rgba(245,166,35,.14); color: var(--amber); }

/* validation bar */
.sam-v2 .val-bar { width: 100%; height: 3px; background: rgba(255,255,255,.05); border-radius: 2px; overflow: hidden; }
.sam-v2 .val-bar.empty { opacity: .3; }
.sam-v2 .val-fill { height: 100%; transition: width .3s; }
.sam-v2 .val-fill.pass { background: var(--green); }
.sam-v2 .val-fill.fail { background: var(--red); }
.sam-v2 .val-fill.progress { background: var(--amber); }

/* config dots */
.sam-v2 .cfg-dots { display: inline-flex; gap: 3px; align-items: center; }
.sam-v2 .cfg-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.06); }
.sam-v2 .cfg-dot.on { background: var(--green); border-color: var(--green); }

/* Header ribbon */
.sam-v2 .sam-header { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sam-v2 .sam-logo { font-family: var(--mono); display: flex; flex-direction: column; line-height: 1.1; }
.sam-v2 .sam-logo-top { font-size: 14px; font-weight: 700; letter-spacing: .16em; color: var(--amber); }
.sam-v2 .sam-logo-bot { font-size: 7px; font-weight: 400; letter-spacing: .13em; color: var(--muted); }
.sam-v2 .sam-tabs { display: flex; gap: 1px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 2px; }
.sam-v2 .sam-tabs button { background: transparent; border: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 3px; cursor: pointer; transition: all .12s; }
.sam-v2 .sam-tabs button.active { background: var(--surface2); color: var(--amber); }
.sam-v2 .sam-spacer { flex: 1; }
.sam-v2 .sam-stats { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.sam-v2 .sam-stats b { color: var(--text); font-weight: 600; }
.sam-v2 .sam-stats .sep { color: var(--dim); }
.sam-v2 .sam-ingest-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(245,166,35,.10); color: var(--amber); border: 1px solid rgba(245,166,35,.30); border-radius: 5px; padding: 5px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all .12s; }
.sam-v2 .sam-ingest-btn:hover { background: rgba(245,166,35,.20); }
.sam-v2 .sam-icon-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 5px; padding: 5px 7px; cursor: pointer; line-height: 0; transition: color .12s, border-color .12s; }
.sam-v2 .sam-icon-btn:hover { color: var(--text); border-color: var(--border2); }
.sam-v2 .sam-user { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; background: var(--amber); color: #0b0d10; font-family: var(--mono); font-size: 10px; font-weight: 700; border-radius: 50%; }

/* Frame wrapper (artboard interior) */
.sam-v2 .sam-frame { display: flex; flex-direction: column; height: 100%; background: var(--bg); overflow: hidden; }
.sam-v2 .sam-frame-body { flex: 1; display: flex; min-height: 0; }
.sam-v2 .sam-frame-main { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.sam-v2 .sam-frame-panel { width: 720px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.sam-v2 .sam-frame-panel.tabs { width: 440px; }

/* generic seg */
.sam-v2 .seg { display: inline-flex; gap: 1px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 2px; }
.sam-v2 .seg button { background: transparent; border: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; cursor: pointer; }
.sam-v2 .seg button.active { background: var(--surface2); color: var(--text); }
.sam-v2 .seg-mini button { font-size: 9px; padding: 2px 7px; }
.sam-v2 .seg button.ok.active { color: var(--green); }
.sam-v2 .seg button.no.active { color: var(--red); }

.sam-v2 .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; padding: 4px 10px; font-family: var(--mono); font-size: 10px; cursor: pointer; }
.sam-v2 .btn-ghost:hover { color: var(--text); border-color: var(--border2); }

/* chips */
.sam-v2 .chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 3px; }
.sam-v2 .chip b { color: var(--text); font-weight: 500; }
.sam-v2 .chip.add { color: var(--amber); border-style: dashed; cursor: pointer; }

/* scrollbar */
.sam-v2 .sam-scroll { scrollbar-color: var(--border2) var(--surface); scrollbar-width: thin; }
.sam-v2 .sam-scroll::-webkit-scrollbar { width: 11px; height: 11px; }
.sam-v2 .sam-scroll::-webkit-scrollbar-track { background: var(--surface); }
.sam-v2 .sam-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 5px; border: 2px solid var(--surface); }
.sam-v2 .sam-scroll::-webkit-scrollbar-thumb:hover { background: var(--amber); }
.sam-v2 .sam-scroll::-webkit-scrollbar-corner { background: var(--surface); }

.sam-v2 .panel-empty { padding: 60px 20px; color: var(--muted); text-align: center; font-size: 12px; }


/* ============================================================
   FROM styles-inv-v2.css
   ============================================================ */

.sam-v2 .invA { display: flex; flex-direction: column; height: 100%; background: var(--bg); }

.sam-v2 .invA-title-bar { display: none; } /* opt-in per theme (retro shows it) */
.sam-v2 .invA-filter { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.sam-v2 .invA-search-mini input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 5px 10px; border-radius: 4px; font-family: var(--mono); font-size: 11px; min-width: 200px; outline: 0; }
.sam-v2 .invA-search-mini input:focus { border-color: var(--amber); }
.sam-v2 .invA-select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; border-radius: 4px; font-family: var(--mono); font-size: 11px; outline: 0; }
.sam-v2 .invA-filter-spacer { flex: 1; }
.sam-v2 .invA-meta { font-size: 10px; color: var(--muted); }

/* List/Cards view toggle — sits next to the bucket pills. Reuses .seg so
   active state and spacing match the bucket button group. */
.sam-v2 .invA-view-toggle { display: inline-flex; }
.sam-v2 .invA-view-toggle button { font-family: var(--mono); font-size: 11px; padding: 4px 9px; }

/* Tenant dropdown — pushed to the right of the filter bar via the spacer. */
.sam-v2 .invA-tenant-select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; border-radius: 4px; font-family: var(--mono); font-size: 11px; width: 200px; outline: 0; }
.sam-v2 .invA-tenant-select:focus { border-color: var(--amber); }

/* Force-resync button next to the tenant dropdown. Spinning state flips the
   glyph into a rotation animation while a refresh is in flight. */
.sam-v2 .invA-refresh { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 5px 9px; border-radius: 4px; font-family: var(--mono); font-size: 13px; line-height: 1; cursor: pointer; outline: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; }
.sam-v2 .invA-refresh:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.sam-v2 .invA-refresh:disabled { opacity: .6; cursor: progress; }
.sam-v2 .invA-refresh.is-spinning { animation: sam-v2-spin 0.9s linear infinite; color: var(--amber); border-color: var(--amber); }
@keyframes sam-v2-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Card view */
.sam-v2 .invA-cards-sec { border: 0; }
.sam-v2 .invA-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 14px; min-width: 0; }
.sam-v2 .invA-list:has(.invA-cards-grid) > * { min-width: 0; }
.sam-v2 .invA-list:has(.invA-cards-grid) { overflow-x: hidden; }
.sam-v2 .invA-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: border-color .12s, background .12s; min-width: 0; }
.sam-v2 .invA-card:hover { background: var(--surface2); border-color: var(--border2); }
.sam-v2 .invA-card.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.sam-v2 .invA-card.bk-spare  { box-shadow: inset 3px 0 0 rgba(167,128,245,.55); }
.sam-v2 .invA-card.bk-triage { box-shadow: inset 3px 0 0 rgba(245,166,35,.55); }
.sam-v2 .invA-card.bk-decom  { box-shadow: inset 3px 0 0 rgba(239,68,68,.55); }
.sam-v2 .invA-card.bk-spare.sel,
.sam-v2 .invA-card.bk-triage.sel,
.sam-v2 .invA-card.bk-decom.sel { box-shadow: 0 0 0 1px var(--amber) inset; }
.sam-v2 .invA-card-icon { width: 28px; height: 28px; border-radius: 5px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; flex-shrink: 0; }
.sam-v2 .invA-card-body { flex: 1; min-width: 0; }
.sam-v2 .invA-card-host { font-size: 12px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-v2 .invA-card-serial { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-v2 .invA-card-tenant { font-size: 11px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sam-v2 .invA-list { flex: 1; overflow-x: auto; overflow-y: scroll; padding: 0 0 80px; --inv-cols: 60px 160px 140px 130px 200px 70px 85px 65px 75px 130px 70px 150px; }
.sam-v2 .invA-list > * { min-width: max-content; }

.sam-v2 .invA-sec { border-bottom: 1px solid var(--border); }
/* Reset position/z-index/flex-shrink/height — the legacy host rule
   `header { position: relative; z-index: 800; flex-shrink: 0; height: 56px; }`
   targets bare <header> elements and was leaking into v2's <header class=
   "invA-sec-head">, making the section bar paint over the host's dropdowns
   when filtered to New/Decom. */
.sam-v2 .invA-sec-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px 9px; cursor: pointer; user-select: none; background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); border-bottom: 1px solid var(--border); position: static; z-index: auto; flex-shrink: 1; height: auto; }
.sam-v2 .invA-sec-head .chev { color: var(--muted); font-size: 10px; transition: transform .15s; }
.sam-v2 .invA-sec-head .chev.col { transform: rotate(-90deg); }
.sam-v2 .bucket-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 3px; }
.sam-v2 .bucket-tag.t-spare  { background: rgba(167,128,245,.14); color: var(--purple); }
.sam-v2 .bucket-tag.t-triage { background: rgba(245,166,35,.14); color: var(--amber); }
.sam-v2 .bucket-tag.t-decom  { background: rgba(239,68,68,.14);  color: var(--red); }
.sam-v2 .invA-sec-blurb { font-size: 11px; color: var(--muted); }
.sam-v2 .invA-sec-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text); background: var(--surface2); padding: 2px 9px; border-radius: 10px; }

.sam-v2 .invA-rows { display: flex; flex-direction: column; min-width: max-content; }
.sam-v2 .invA-row {
  display: grid;
  grid-template-columns: var(--inv-cols);
  align-items: center; padding: 0 16px; height: 32px; border-bottom: 1px solid rgba(255,255,255,.025); cursor: pointer; font-size: 12px;
}
.sam-v2 .invA-row.invA-head { font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); cursor: default; height: 24px; border-bottom: 1px solid var(--border); background: transparent; }
.sam-v2 .invA-row.invA-head > div { position: relative; overflow: visible; }
.sam-v2 .invA-resizer { position: absolute; top: -4px; right: 0; bottom: -4px; width: 10px; cursor: col-resize; z-index: 2; display: flex; justify-content: center; }
.sam-v2 .invA-resizer::after { content: ''; width: 1px; background: var(--border2); align-self: stretch; transition: background .12s, width .12s; }
.sam-v2 .invA-resizer:hover::after,
.sam-v2 .invA-resizer.dragging::after { background: var(--amber); width: 2px; }
.sam-v2.invA-resizing { cursor: col-resize !important; user-select: none; }
.sam-v2.invA-resizing * { cursor: col-resize !important; }
.sam-v2 .invA-row:not(.invA-head):hover { background: var(--surface2); }
.sam-v2 .invA-row.sel { background: rgba(245,166,35,.06); border-left: 2px solid var(--amber); padding-left: 14px; }
/* Offline hot spare — alert accent on the row + the filter-tab offline chip. */
.sam-v2 .invA-row.hot-offline { background: rgba(229,72,72,.07); border-left: 2px solid var(--red); padding-left: 14px; }
.sam-v2 .seg-offline { color: var(--red); font-size: 10px; margin-left: 3px; }
.sam-v2 .invA-row > div { padding-right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text); }
.sam-v2 .invA-row .c-tenant { font-weight: 500; }
.sam-v2 .invA-row .c-loc, .sam-v2 .invA-row .c-serial, .sam-v2 .invA-row .c-asset,
.sam-v2 .invA-row .c-cpu, .sam-v2 .invA-row .c-ram, .sam-v2 .invA-row .c-drive,
.sam-v2 .invA-row .c-gpu { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.sam-v2 .invA-row .c-cpu, .sam-v2 .invA-row .c-ram, .sam-v2 .invA-row .c-drive,
.sam-v2 .invA-row .c-gpu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-v2 .invA-row .c-host { font-family: var(--mono); font-size: 11px; color: var(--text); }
.sam-v2 .invA-row .c-asset, .sam-v2 .invA-row .c-charger { text-align: center; }
.sam-v2 .invA-row .c-asset .ok, .sam-v2 .invA-row .c-charger .ok { color: var(--green); font-size: 13px; }
.sam-v2 .invA-row .c-asset .warn, .sam-v2 .invA-row .c-charger .warn { color: var(--red); font-size: 14px; font-weight: 700; }
.sam-v2 .invA-row.invA-head .c-asset, .sam-v2 .invA-row.invA-head .c-charger { text-align: center; }
.sam-v2 .invA-row .ok { color: var(--green); }
.sam-v2 .invA-row .warn { color: var(--amber); font-size: 10px; }
.sam-v2 .invA-row .reason { font-size: 10px; color: var(--amber); }
.sam-v2 .invA-row .dim { color: var(--muted); font-size: 10px; }
/* Absent hostname/model — a machine NinjaOne/ImmyBot/Intune never resolved.
   Flagged in red so an empty cell can't be misread as "nothing to see". */
.sam-v2 .invA-row .c-missing { color: var(--red); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; opacity: .85; }
/* Cross-platform identity conflict — row badge + side-panel callout. */
.sam-v2 .invA-row .conflict-flag { display: inline-block; background: rgba(239,68,68,.14); color: var(--red); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; border-radius: 2px; margin-right: 6px; cursor: help; }
.sam-v2 .cf-block { border: 1px solid rgba(239,68,68,.30); border-radius: 6px; padding: 8px 10px; background: rgba(239,68,68,.06); }
.sam-v2 .cf-h { color: var(--red) !important; }
.sam-v2 .cf-row { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.sam-v2 .cf-row .cf-k { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sam-v2 .cf-row .cf-v { font-size: 11px; color: var(--text); }
.sam-v2 .cf-row .cf-v b { color: var(--red); font-weight: 600; }
.sam-v2 .invA-row .flag-am { background: rgba(245,166,35,.18); color: var(--amber); font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 2px; margin-left: 6px; }

/* condition tag */
.sam-v2 .cond { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; border-radius: 3px; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.sam-v2 .cond-A { background: rgba(63,194,109,.14); color: var(--green); }
.sam-v2 .cond-B { background: rgba(78,164,243,.14); color: var(--blue); }
.sam-v2 .cond-C { background: rgba(245,166,35,.14); color: var(--amber); }
.sam-v2 .cond-D { background: rgba(239,68,68,.14); color: var(--red); }

.sam-v2 .invA-empty { color: var(--dim); font-style: italic; padding: 14px 16px; font-size: 11px; }

/* Side panel (left rail) — old .sp-* selectors retained for compat */
.sam-v2 .sp { display: flex; flex-direction: column; height: 100%; background: var(--surface); width: 340px; flex-shrink: 0; border-right: 1px solid var(--border); overflow: hidden; }
.sam-v2 .sp-empty { padding: 60px 24px; text-align: center; color: var(--muted); }
.sam-v2 .sp-empty-glyph { font-size: 36px; color: var(--dim); margin-bottom: 14px; }
.sam-v2 .sp-empty-t { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.sam-v2 .sp-empty-d { font-size: 11px; color: var(--muted); }

.sam-v2 .sp-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.sam-v2 .sp-head-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sam-v2 .sp-close { margin-left: auto; background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; }
.sam-v2 .sp-close:hover { color: var(--text); }
.sam-v2 .sp-tenant { font-size: 14px; font-weight: 600; color: var(--text); }
.sam-v2 .sp-model { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }

.sam-v2 .sp-block { padding: 12px 16px; border-bottom: 1px solid var(--border); overflow-y: auto; }
.sam-v2 .sp-block h4 { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; font-weight: 600; }
.sam-v2 .sp-dl { display: grid; grid-template-columns: 84px 1fr; gap: 5px 12px; font-size: 11px; }
.sam-v2 .sp-dl dt { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.sam-v2 .sp-dl dd { color: var(--text); margin: 0; word-break: break-all; }
.sam-v2 .sp-dl .ok { color: var(--green); }
.sam-v2 .sp-dl .warn { color: var(--amber); }
.sam-v2 .sp-dl .dim { color: var(--muted); }
.sam-v2 .sp-dl .flag-am { background: rgba(245,166,35,.18); color: var(--amber); font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 2px; }

.sam-v2 .sp-actions { display: flex; flex-direction: column; gap: 6px; }
.sam-v2 .qa { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 9px 10px; cursor: pointer; text-align: left; font-family: inherit; transition: all .12s; }
.sam-v2 .qa:hover { border-color: var(--border2); background: var(--surface2); }
.sam-v2 .qa .qa-i { font-family: var(--mono); font-size: 14px; color: var(--amber); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: rgba(245,166,35,.10); border-radius: 4px; }
.sam-v2 .qa .qa-l { font-size: 12px; font-weight: 500; }
.sam-v2 .qa .qa-d { grid-column: 2; font-size: 10px; color: var(--muted); margin-top: 1px; }
.sam-v2 .qa .qa-tog { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 8px; background: var(--surface2); color: var(--muted); }
.sam-v2 .qa.toggle.on .qa-tog { background: rgba(63,194,109,.14); color: var(--green); }
.sam-v2 .qa.toggle:not(.on) .qa-tog { background: rgba(245,166,35,.10); color: var(--amber); }
.sam-v2 .qa.primary { background: rgba(245,166,35,.10); border-color: rgba(245,166,35,.40); }
.sam-v2 .qa.primary .qa-i { background: var(--amber); color: #0b0d10; }
.sam-v2 .qa.danger { color: var(--red); border-color: rgba(239,68,68,.30); }
.sam-v2 .qa.danger .qa-i { background: rgba(239,68,68,.12); color: var(--red); }
.sam-v2 .qa.flag.on { background: rgba(245,166,35,.10); border-color: var(--amber); }
.sam-v2 .qa.ghost { color: var(--muted); }
.sam-v2 .qa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sam-v2 .qa-row2 .qa { grid-template-columns: 22px 1fr auto; padding: 7px 9px; }

.sam-v2 .sp-note { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 8px; font-family: inherit; font-size: 11px; outline: 0; resize: vertical; }
.sam-v2 .sp-note:focus { border-color: var(--amber); }
.sam-v2 .sp-foot { padding: 10px 16px; font-size: 10px; color: var(--dim); margin-top: auto; border-top: 1px solid var(--border); }

/* tone overrides on sec heads */
.sam-v2 .invA-sec.tone-amber { background: linear-gradient(180deg, rgba(245,166,35,.025), transparent 80px); }
.sam-v2 .invA-sec.tone-purple { background: linear-gradient(180deg, rgba(167,128,245,.020), transparent 80px); }
.sam-v2 .invA-sec.tone-red { background: linear-gradient(180deg, rgba(239,68,68,.022), transparent 80px); }

/* header stats with tone dots */
.sam-v2 .sam-stats .dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.sam-v2 .sam-stats .dot.sp::before { background: var(--purple); }
.sam-v2 .sam-stats .dot.tr::before { background: var(--amber); }
.sam-v2 .sam-stats .dot.dc::before { background: var(--red); }
.sam-v2 .sam-stats .dot.bn::before { background: var(--blue); }


/* Quick ingest modal — simplified.
   .qi-overlay is kept position:fixed but z-index is bumped above the
   close button so the modal can dim everything. */
.sam-v2 .qi-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1100; }
.sam-v2 .qi-card { width: 720px; max-width: 95vw; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.sam-v2 .qi-head { display: flex; gap: 16px; padding: 14px 18px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.sam-v2 .qi-title h3 { margin: 0; font-size: 16px; color: var(--text); font-weight: 600; }
.sam-v2 .qi-title .mono { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.sam-v2 .qi-steps { display: flex; gap: 4px; margin-left: auto; }
.sam-v2 .qi-step { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; padding: 4px 9px; font-family: var(--mono); font-size: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sam-v2 .qi-step .num { background: var(--bg); color: var(--dim); border-radius: 50%; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; }
.sam-v2 .qi-step.active { border-color: var(--amber); color: var(--amber); }
.sam-v2 .qi-step.active .num { background: var(--amber); color: #0b0d10; }
.sam-v2 .qi-step.done { color: var(--green); border-color: rgba(63,194,109,.3); }
.sam-v2 .qi-step.done .num { background: var(--green); color: #0b0d10; }
.sam-v2 .qi-close { background: transparent; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; align-self: flex-start; }
.sam-v2 .qi-body { padding: 24px 26px; min-height: 260px; }
.sam-v2 .qi-pane { display: flex; flex-direction: column; gap: 14px; }
.sam-v2 .qi-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.sam-v2 .qi-bigin { width: 100%; background: var(--bg); border: 2px solid var(--border2); color: var(--text); border-radius: 6px; padding: 14px 18px; font-family: var(--mono); font-size: 20px; outline: 0; letter-spacing: .04em; }
.sam-v2 .qi-bigin:focus { border-color: var(--amber); }
.sam-v2 .qi-hint { font-size: 11px; color: var(--muted); }
.sam-v2 .qi-statusgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.sam-v2 .qi-stbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; text-align: left; }
.sam-v2 .qi-stbtn.sel { border-color: var(--amber); background: rgba(245,166,35,.08); }
.sam-v2 .qi-stbtn-l { font-size: 12px; font-weight: 600; color: var(--text); }
.sam-v2 .qi-stbtn-d { font-size: 9px; color: var(--muted); }
.sam-v2 .qi-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.sam-v2 .qi-flag { background: var(--bg); border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: 14px; font-family: var(--mono); font-size: 10px; cursor: pointer; }
.sam-v2 .qi-flag.on { background: rgba(245,166,35,.10); border-color: var(--amber); color: var(--amber); }
.sam-v2 .qi-locrow { display: flex; gap: 14px; }
.sam-v2 .qi-locgrp { display: flex; flex-direction: column; gap: 6px; }
.sam-v2 .qi-loctitle { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.sam-v2 .qi-locbtns { display: flex; gap: 4px; }
.sam-v2 .qi-locbtns button { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: 4px; font-family: var(--mono); font-size: 12px; cursor: pointer; font-weight: 600; }
.sam-v2 .qi-locbtns button.sel { background: var(--amber); color: #0b0d10; border-color: var(--amber); }
.sam-v2 .qi-slots { display: grid; grid-template-columns: repeat(6,1fr); gap: 4px; flex: 1; }
.sam-v2 .qi-slot { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 0; border-radius: 3px; font-family: var(--mono); font-size: 11px; cursor: pointer; }
.sam-v2 .qi-slot.occ { background: var(--surface2); color: var(--dim); cursor: not-allowed; }
.sam-v2 .qi-slot.sel { background: var(--amber); color: #0b0d10; border-color: var(--amber); }
.sam-v2 .qi-actrow { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.sam-v2 .abtn { background: var(--bg); border: 1px solid var(--border2); color: var(--text); border-radius: 4px; padding: 6px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; cursor: pointer; }
.sam-v2 .abtn.primary { background: var(--amber); color: #0b0d10; border-color: var(--amber); }
.sam-v2 .abtn.primary.big { padding: 10px 16px; font-size: 11px; }
.sam-v2 .abtn.ghost { background: transparent; color: var(--muted); }
.sam-v2 .abtn.danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.sam-v2 .abtn.danger:hover { background: #d24533; border-color: #d24533; }

/* Confirm / notify modal — reuses .qa-overlay + .qa-pop bones, narrower and
   with a stacked footer-actions row. Themed via the same CSS vars as the
   rest of the modal stack so it picks up Light/Win99/Rivendell/Matrix/HC
   automatically. */
.sam-v2 .confirm-pop { width: 440px; max-width: 92vw; }
.sam-v2 .confirm-body { margin: 0; font-size: 12px; color: var(--text); line-height: 1.45; }
.sam-v2 .confirm-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px 14px; }
.sam-v2 .confirm-alert .confirm-foot { justify-content: flex-end; }
.sam-v2 .confirm-input-label { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sam-v2 .confirm-input-label > span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sam-v2 .confirm-input { background: var(--bg); border: 1px solid var(--border2); color: var(--text); padding: 8px 10px; border-radius: 4px; font-family: var(--mono); font-size: 12px; outline: 0; }
.sam-v2 .confirm-input:focus { border-color: var(--amber); }

/* Add-Machine wizard: mode/category radios, optional flag chips, ticket link */
.sam-v2 .qi-modepick { display: flex; flex-wrap: wrap; gap: 8px; }
.sam-v2 .qi-radio { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg); border: 1px solid var(--border2); border-radius: 5px; cursor: pointer; font-size: 12px; color: var(--text); user-select: none; min-width: 110px; }
.sam-v2 .qi-radio:hover { border-color: var(--amber); }
.sam-v2 .qi-radio input[type="radio"] { appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border2); margin: 0; position: relative; cursor: pointer; flex-shrink: 0; }
.sam-v2 .qi-radio input[type="radio"]:checked { border-color: var(--amber); background: var(--amber); box-shadow: inset 0 0 0 3px var(--bg); }
.sam-v2 .qi-radio.sel { border-color: var(--amber); background: rgba(245,166,35,.08); }
.sam-v2 .qi-radio-l { font-weight: 600; letter-spacing: .01em; }
.sam-v2 .qi-label-d { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 10px; margin-left: 4px; }
.sam-v2 .qi-flags-small .qi-flag { padding: 4px 10px; font-size: 9px; }
.sam-v2 .qi-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); cursor: pointer; user-select: none; }
.sam-v2 .qi-check-inline { padding: 4px 0; }
.sam-v2 .qi-check input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border2); background: var(--bg); margin: 0; cursor: pointer; position: relative; flex-shrink: 0; }
.sam-v2 .qi-check input[type="checkbox"]:checked { background: var(--amber); border-color: var(--amber); }
.sam-v2 .qi-check input[type="checkbox"]:checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #0b0d10; font-size: 10px; font-weight: 700; line-height: 1; }
.sam-v2 .qi-ticket-link { color: var(--amber); text-decoration: none; font-size: 11px; margin-left: 8px; }
.sam-v2 .qi-ticket-link:hover { text-decoration: underline; }



/* ============================================================
   FROM styles-rail.css
   ============================================================ */

.sam-v2 .rail { display: flex; flex-direction: column; height: 100%; background: var(--surface); width: 300px; flex-shrink: 0; border-right: 1px solid var(--border); overflow: hidden; }

.sam-v2 .rail-h { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: 10px 14px 6px; font-weight: 600; }

.sam-v2 .rail-counts { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); padding: 1px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sam-v2 .rc-btn { background: var(--surface); border: 0; color: var(--text); padding: 9px 4px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: background .12s; }
.sam-v2 .rc-btn:hover { background: var(--surface2); }
.sam-v2 .rc-btn.active { background: var(--surface2); }
.sam-v2 .rc-n { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); }
.sam-v2 .rc-l { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sam-v2 .rc-btn.tone-sp.active .rc-n { color: var(--purple); }
.sam-v2 .rc-btn.tone-tr.active .rc-n { color: var(--amber); }
.sam-v2 .rc-btn.tone-dc.active .rc-n { color: var(--red); }
.sam-v2 .rc-btn.active .rc-l { color: var(--text); }

/* Add Machine button — above shelf nav */
.sam-v2 .add-machine-btn { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 10px 12px 6px; padding: 8px 14px; background: var(--amber); color: #0b0d10; border: 0; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18); transition: background .12s, transform .04s; }
.sam-v2 .add-machine-btn:hover { background: #ffb635; }
.sam-v2 .add-machine-btn:active { transform: translateY(1px); }
.sam-v2 .add-machine-i { width: 18px; height: 18px; background: #0b0d10; color: var(--amber); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 1; }
.sam-v2 .add-machine-l { letter-spacing: .01em; }

.sam-v2 .seg .seg-n { font-family: var(--mono); font-size: 9px; opacity: .7; margin-left: 4px; padding: 1px 5px; background: rgba(255,255,255,.05); border-radius: 8px; }
.sam-v2 .seg button.active .seg-n { background: rgba(0,0,0,.25); opacity: .9; }
.sam-v2 .invA-tgroup { border-top: 1px dashed var(--border); }
.sam-v2 .invA-tgroup:first-child { border-top: 0; }
.sam-v2 .invA-tgroup-head { display: flex; align-items: center; gap: 8px; padding: 5px 12px; background: rgba(167,128,245,.04); cursor: pointer; user-select: none; }
.sam-v2 .invA-tgroup-head:hover { background: rgba(167,128,245,.08); }
.sam-v2 .invA-tgroup-head .chev { color: var(--muted); font-size: 9px; transition: transform .12s; }
.sam-v2 .invA-tgroup-head .chev.col { transform: rotate(-90deg); }
.sam-v2 .invA-tgroup-name { font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: .01em; }
.sam-v2 .invA-tgroup-n { font-size: 10px; color: var(--muted); margin-left: auto; }
.sam-v2 .rail-divider { height: 1px; background: var(--border); margin: 0; flex-shrink: 0; }

/* selected status (scoped to rail to avoid colliding with .invA-row.sel) */
.sam-v2 .rail-sel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sam-v2 .rail-sel-empty { padding: 36px 18px; text-align: center; color: var(--muted); flex: 1; }
.sam-v2 .rail-sel-empty-glyph { font-size: 30px; color: var(--dim); margin-bottom: 10px; }
.sam-v2 .rail-sel-empty-t { font-size: 12px; color: var(--text); font-weight: 600; margin-bottom: 3px; }
.sam-v2 .rail-sel-empty-d { font-size: 11px; color: var(--muted); }

.sam-v2 .rail-sel-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sam-v2 .rail-sel-head-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sam-v2 .rail-sel-close { margin-left: auto; background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; }
.sam-v2 .rail-sel-close:hover { color: var(--text); }
.sam-v2 .rail-sel-tenant { font-size: 11px; color: var(--muted); }
.sam-v2 .rail-sel-model { font-size: 11px; color: var(--muted); margin-top: 1px; }
.sam-v2 .rail-sel-host-line { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.sam-v2 .rail-sel-host { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--mono); }
.sam-v2 .rail-sel-serial { font-size: 11px; color: var(--muted); margin-left: 4px; }
.sam-v2 .copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 3px; color: var(--dim); cursor: pointer; transition: all .15s ease; }
.sam-v2 .copy-btn:hover { color: var(--text); background: var(--surface2); border-color: var(--border); }
.sam-v2 .copy-btn.done { color: var(--green); border-color: transparent; background: transparent; }

.sam-v2 .rail-sel-block { padding: 10px 14px 12px; border-bottom: 1px solid var(--border); overflow: hidden; }
.sam-v2 .rail-sel-block .rail-h { padding: 0 0 8px; }

/* connector grid */
.sam-v2 .conn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sam-v2 .conn-chip { display: grid; grid-template-columns: 24px 1fr 6px; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px; transition: border .12s; }
.sam-v2 .conn-mark { color: #0b0d10; background: var(--c); width: 22px; height: 18px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sam-v2 .conn-mark svg { width: 14px; height: 14px; }
.sam-v2 .conn-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sam-v2 .conn-label { font-size: 10px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sam-v2 .conn-state { font-family: var(--mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.sam-v2 .conn-led { width: 6px; height: 6px; border-radius: 50%; }
.sam-v2 .conn-chip.cn-ok .conn-state, .sam-v2 .conn-led.cn-ok { color: var(--green); background: var(--green); box-shadow: 0 0 4px rgba(63,194,109,.5); }
.sam-v2 .conn-chip.cn-ok .conn-led { background: var(--green); }
.sam-v2 .conn-chip.cn-stale .conn-state { color: var(--amber); }
.sam-v2 .conn-chip.cn-stale .conn-led { background: var(--amber); }
.sam-v2 .conn-chip.cn-missing { border-color: rgba(239,68,68,.18); }
.sam-v2 .conn-chip.cn-missing .conn-state { color: var(--red); }
.sam-v2 .conn-chip.cn-missing .conn-led { background: var(--red); }
.sam-v2 .conn-chip.cn-missing .conn-mark { opacity: .4; }
.sam-v2 .conn-chip.cn-error { border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.04); }
.sam-v2 .conn-chip.cn-error .conn-state { color: var(--red); }
.sam-v2 .conn-chip.cn-error .conn-led { background: var(--red); animation: sam-v2-pulse 1.4s infinite; }
.sam-v2 .conn-chip.cn-na { opacity: .45; }
.sam-v2 .conn-chip.cn-na .conn-state { color: var(--dim); }
.sam-v2 .conn-chip.cn-na .conn-led { background: var(--dim); }
@keyframes sam-v2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.sam-v2 .conn-foot { font-size: 10px; color: var(--muted); margin-top: 8px; }
.sam-v2 .conn-foot b { color: var(--text); }

/* ── Consolidated connector UI: chips are clickable, expand detail below ──── */
/* The chip is now a <button>; reset native chrome, keep the grid layout, and
   widen the trailing column so the syncing spinner (10px) isn't clipped. */
.sam-v2 button.conn-chip { grid-template-columns: 24px 1fr auto; font: inherit; text-align: left; width: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sam-v2 .conn-chip:hover { border-color: var(--dim); }
.sam-v2 .conn-chip.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.sam-v2 .conn-chip.is-syncing { cursor: progress; }
.sam-v2 .conn-chip.is-syncing .conn-state { color: var(--muted); }
.sam-v2 .conn-chip .integ-sync-spinner { width: 9px; height: 9px; }

/* Expanded detail pane below the chip grid — reuses the .integ-* row/link/badge
   styles for the per-connector body. */
.sam-v2 .conn-detail { margin-top: 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); padding: 8px 10px; }
.sam-v2 .conn-detail-head { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.sam-v2 .conn-detail-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); margin: 8px 0 2px; }
.sam-v2 .conn-detail-sub:first-of-type { margin-top: 2px; }
.sam-v2 .conn-detail-syncing { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; padding: 2px 0; }

/* ── Connector detail accordions (ported from legacy integration panel) ───── */
.sam-v2 .integ-acc-list { margin-top: 10px; }
.sam-v2 .integ-acc-loading,
.sam-v2 .integ-acc-error { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 0; font-size: 11px; color: var(--muted); }
.sam-v2 .integ-acc-error { color: var(--red); }
.sam-v2 .integ-acc-empty { margin-top: 10px; font-size: 11px; font-style: italic; color: var(--dim); }
.sam-v2 .integ-skeleton-bar { width: 120px; height: 10px; border-radius: 3px; background: var(--border); opacity: .3; animation: skelpulse 1.2s ease-in-out infinite; }
/* Per-connector "syncing" spinner shown in the accordion header until that
   connector's individual lookup settles (progressive load). */
.sam-v2 .integ-sync-spinner { width: 10px; height: 10px; border: 1.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; display: inline-block; flex-shrink: 0; animation: integ-spin .7s linear infinite; }
.sam-v2 .integ-accordion.is-syncing { opacity: .8; }
.sam-v2 .integ-accordion.is-syncing .integ-accordion-header { cursor: default; }
@keyframes integ-spin { to { transform: rotate(360deg); } }

.sam-v2 .integ-accordion { border: 1px solid var(--border); border-radius: 4px; margin-bottom: 4px; overflow: hidden; }
.sam-v2 .integ-accordion-header { display: flex; align-items: center; gap: 6px; padding: 6px 8px; cursor: pointer; user-select: none; background: var(--surface); transition: background .15s; font-size: 11px; }
.sam-v2 .integ-accordion-header:hover { background: var(--surface2); }
.sam-v2 .integ-accordion-chevron { font-size: 8px; transition: transform .2s; display: inline-block; color: var(--muted); flex-shrink: 0; }
.sam-v2 .integ-accordion.open .integ-accordion-chevron { transform: rotate(90deg); }
.sam-v2 .integ-accordion-label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); flex-shrink: 0; min-width: 60px; }
.sam-v2 .integ-accordion-status { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.sam-v2 .integ-accordion-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-v2 .integ-accordion-body { max-height: 0; overflow: hidden; transition: max-height .25s ease-out; }
.sam-v2 .integ-accordion.open .integ-accordion-body { max-height: 600px; transition: max-height .35s ease-in; }
.sam-v2 .integ-accordion-inner { padding: 4px 8px 8px; }

.sam-v2 .integ-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 11px; color: var(--text); flex-wrap: wrap; }
.sam-v2 .integ-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sam-v2 .integ-dot.online  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.sam-v2 .integ-dot.offline { background: var(--red);   box-shadow: 0 0 6px var(--red); }
.sam-v2 .integ-dot.warning { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.sam-v2 .integ-badge { font-family: var(--mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.sam-v2 .integ-badge.patches { background: rgba(234,179,8,.12); color: var(--yellow); }
.sam-v2 .integ-badge.reboot  { background: rgba(239,68,68,.12); color: var(--red); }
.sam-v2 .integ-badge.warn    { background: rgba(234,179,8,.12); color: var(--yellow); }
.sam-v2 .integ-badge.healthy { background: rgba(34,197,94,.12); color: var(--green); }
.sam-v2 .integ-badge.unhealthy { background: rgba(239,68,68,.12); color: var(--red); }
.sam-v2 .integ-detail { font-size: 11px; color: var(--muted); padding: 2px 0; word-break: break-word; }
.sam-v2 .integ-detail strong { color: var(--text); }
.sam-v2 .integ-detail.integ-warn { color: var(--yellow); font-size: 10px; padding-top: 1px; }
.sam-v2 .integ-detail.integ-err { color: var(--red); font-size: 10px; font-weight: 600; padding-top: 1px; }
.sam-v2 .integ-link { color: var(--blue); text-decoration: none; font-size: 11px; }
.sam-v2 .integ-link:hover { text-decoration: underline; }
.sam-v2 .integ-link-primary { font-weight: 600; }
.sam-v2 .integ-hudu-links { gap: 12px; }
.sam-v2 .integ-muted { color: var(--muted); font-size: 11px; font-style: italic; }
.sam-v2 .integ-retry-btn { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-family: var(--mono); font-size: 10px; padding: 2px 8px; cursor: pointer; transition: color .15s, border-color .15s; }
.sam-v2 .integ-retry-btn:hover { color: var(--text); border-color: var(--text); }

/* hardware dl */
.sam-v2 .rail-sel-dl { display: grid; grid-template-columns: 78px 1fr; gap: 4px 10px; font-size: 11px; margin: 0; }
.sam-v2 .rail-sel-dl dt { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.sam-v2 .rail-sel-dl dd { color: var(--text); margin: 0; word-break: break-word; }
.sam-v2 .rail-sel-dl .ok { color: var(--green); }
.sam-v2 .rail-sel-dl .warn { color: var(--amber); }
.sam-v2 .rail-sel-dl .dim { color: var(--muted); }
.sam-v2 .rail-sel-dl .flag-am { background: rgba(245,166,35,.18); color: var(--amber); font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 2px; }

/* footer trigger — neutral & narrow, centered text */
.sam-v2 .rail-sel-foot { padding: 10px 12px; border-top: 1px solid var(--border); margin-top: auto; flex-shrink: 0; display: flex; justify-content: center; }
.sam-v2 .qa-trigger { background: var(--bg); color: var(--text); border: 1px solid var(--border2); border-radius: 5px; padding: 8px 18px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; text-align: center; transition: all .12s ease; }
.sam-v2 .qa-trigger:hover { background: var(--surface2); border-color: var(--text); }

/* hardware section — diagnosed checkbox + spec list */
.sam-v2 .hw-diag { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 10px; cursor: default; }
.sam-v2 .hw-diag input { position: absolute; opacity: 0; pointer-events: none; }
.sam-v2 .hw-diag-box { width: 14px; height: 14px; border: 1.5px solid var(--border2); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: var(--green); flex-shrink: 0; }
.sam-v2 .hw-diag input:checked + .hw-diag-box, .sam-v2 .hw-diag .hw-diag-box:has(svg) { border-color: var(--green); background: rgba(63,194,109,.12); }
.sam-v2 .hw-diag-l { font-size: 12px; color: var(--text); font-weight: 500; }
.sam-v2 .hw-diag-hint { font-size: 9px; color: var(--dim); letter-spacing: .04em; margin-left: auto; }
.sam-v2 .hw-spec { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.sam-v2 .hw-spec-row { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.025); }
.sam-v2 .hw-spec-row:last-child { border-bottom: 0; }
.sam-v2 .hw-spec-row dt { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0; }
.sam-v2 .hw-spec-row dd { margin: 0; font-size: 11px; color: var(--text); }

/* Quick Actions popup (some old class names retained) */
.sam-v2 .qa-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.50); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1100; animation: sam-v2-fadeIn .15s; }
@keyframes sam-v2-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.sam-v2 .qa-pop { width: 560px; max-width: 95vw; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: sam-v2-popIn .18s cubic-bezier(.2,.9,.3,1.2); }
@keyframes sam-v2-popIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.sam-v2 .qa-pop-head { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.sam-v2 .qa-pop-head h3 { margin: 2px 0 0; font-size: 14px; color: var(--text); font-weight: 600; }
.sam-v2 .qa-pop-head .mono.dim { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.sam-v2 .qa-pop-close { margin-left: auto; background: transparent; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.sam-v2 .qa-pop-close:hover { color: var(--text); }

.sam-v2 .qa-pop-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.sam-v2 .qa-pop-sect { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 8px; padding: 0 2px; font-weight: 600; }
.sam-v2 .qa-pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.sam-v2 .qap { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 10px 12px; cursor: pointer; text-align: left; font-family: inherit; transition: all .12s; }
.sam-v2 .qap:hover { border-color: var(--border2); background: var(--surface2); }
.sam-v2 .qap-i { font-family: var(--mono); font-size: 14px; color: var(--amber); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: rgba(245,166,35,.10); border-radius: 5px; }
.sam-v2 .qap-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sam-v2 .qap-l b { font-size: 12px; font-weight: 600; }
.sam-v2 .qap-d { font-size: 10px; color: var(--muted); }
.sam-v2 .qap-k { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); padding: 1px 6px; border-radius: 3px; font-size: 9px; }
.sam-v2 .qap-tog { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 9px; background: var(--surface2); color: var(--muted); }
.sam-v2 .qap.toggle.on .qap-tog { background: rgba(63,194,109,.14); color: var(--green); }
.sam-v2 .qap.toggle:not(.on) .qap-tog { background: rgba(245,166,35,.10); color: var(--amber); }
.sam-v2 .qap.primary { background: rgba(245,166,35,.10); border-color: rgba(245,166,35,.40); }
.sam-v2 .qap.primary .qap-i { background: var(--amber); color: #0b0d10; }
.sam-v2 .qap.qap-danger { border-color: rgba(220,53,69,.35); }
.sam-v2 .qap.qap-danger:hover { border-color: rgba(220,53,69,.7); background: rgba(220,53,69,.08); }
.sam-v2 .qap.qap-danger .qap-i { background: rgba(220,53,69,.14); color: #ff6f7a; }
.sam-v2 .qap.qap-danger .qap-l b { color: #ff6f7a; }

.sam-v2 .qa-pop-foot { padding: 8px 16px; border-top: 1px solid var(--border); background: var(--bg); }
.sam-v2 .qa-pop-foot .dim { font-size: 10px; color: var(--dim); }


/* ============================================================
   FROM styles-inv-vanilla.css
   ============================================================ */

/* Container + toolbar */
.sam-v2 .inv { display: flex; flex-direction: column; height: 100%; background: var(--bg); min-height: 0; }

.sam-v2 .inv-toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

/* Bucket segmented control */
.sam-v2 .inv-buckets { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); padding: 3px; border-radius: 6px; }
.sam-v2 .bk-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: 600 11px/1 var(--sans, Inter, system-ui, sans-serif);
  letter-spacing: .04em;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .12s;
}
.sam-v2 .bk-btn:hover { color: var(--text); background: var(--surface2); }
.sam-v2 .bk-btn.active { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border2); }
.sam-v2 .bk-btn.bk-spare.active   { color: var(--purple); box-shadow: inset 0 0 0 1px rgba(167,128,245,.4); background: rgba(167,128,245,.08); }
.sam-v2 .bk-btn.bk-triage.active  { color: var(--amber);  box-shadow: inset 0 0 0 1px rgba(245,166,35,.4);  background: rgba(245,166,35,.08); }
.sam-v2 .bk-btn.bk-decom.active   { color: var(--red);    box-shadow: inset 0 0 0 1px rgba(239,68,68,.4);   background: rgba(239,68,68,.08); }
.sam-v2 .bk-btn .bk-n { color: var(--dim); font-family: var(--mono); font-size: 10px; padding: 1px 5px; background: rgba(255,255,255,.04); border-radius: 8px; }
.sam-v2 .bk-btn.active .bk-n { color: inherit; background: rgba(255,255,255,.08); }

.sam-v2 .inv-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sam-v2 .inv-count { font-size: 11px; }
.sam-v2 .filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2); border-radius: 11px;
  padding: 2px 4px 2px 10px; font-size: 11px;
}
.sam-v2 .filter-chip button { background: transparent; border: 0; color: var(--muted); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; line-height: 1; }
.sam-v2 .filter-chip button:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* Scroll region + table */
.sam-v2 .inv-scroll { flex: 1; overflow: auto; min-height: 0; }
.sam-v2 .inv-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--text); table-layout: auto; min-width: 880px; }
.sam-v2 .inv-table thead th {
  position: sticky; top: 0;
  background: var(--surface);
  font: 600 9px/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sam-v2 .inv-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.025);
  vertical-align: middle;
  white-space: nowrap;
}
.sam-v2 .inv-table .c-bk     { width: 60px; }
.sam-v2 .inv-table .c-tenant { min-width: 120px; max-width: 170px; }
.sam-v2 .inv-table .c-host   { min-width: 140px; }
.sam-v2 .inv-table .c-model  { min-width: 150px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sam-v2 .inv-table .c-spec   { min-width: 140px; }
.sam-v2 .inv-table .c-shelf  { width: 70px; }
.sam-v2 .inv-table .c-cond   { width: 88px; }
.sam-v2 .inv-table .c-conn   { min-width: 160px; }
.sam-v2 .inv-table .c-age    { width: 100px; }

/* At narrow viewports, hide the lowest-priority columns */
@media (max-width: 1180px) {
  .sam-v2 .inv-table .c-spec, .sam-v2 .inv-table thead th:nth-child(5) { display: none; }
}
@media (max-width: 980px) {
  .sam-v2 .inv-table .c-age, .sam-v2 .inv-table thead th:nth-child(9) { display: none; }
}
@media (max-width: 860px) {
  .sam-v2 .inv-table .c-conn, .sam-v2 .inv-table thead th:nth-child(8) { display: none; }
}

.sam-v2 .inv-row { cursor: pointer; transition: background .1s; }
.sam-v2 .inv-row:hover { background: var(--surface2); }
.sam-v2 .inv-row.sel  { background: rgba(245,166,35,.06); box-shadow: inset 2px 0 0 var(--amber); }

/* Cell content */
.sam-v2 .tn-pill {
  display: inline-block; max-width: 100%;
  background: var(--surface2);
  color: var(--text);
  font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 10px;
  border: 1px solid var(--border2);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sam-v2 .host-l1 { font-family: var(--mono); font-size: 11px; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.sam-v2 .host-l2 { font-size: 10px; line-height: 1.2; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }

.sam-v2 .cell-shelf {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2);
}

/* Cond + charger + flag */
.sam-v2 .c-cond { display: flex; align-items: center; gap: 6px; }
.sam-v2 .chg { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 3px; font-size: 11px; }
.sam-v2 .chg-y { color: var(--green); background: rgba(63,194,109,.10); }
.sam-v2 .chg-n { color: var(--dim);   background: rgba(255,255,255,.03); }
.sam-v2 .flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 3px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.sam-v2 .flag-new { color: var(--amber);  background: rgba(245,166,35,.18); }
.sam-v2 .flag-am  { color: var(--amber);  background: rgba(245,166,35,.18); }

/* Connector strip — six small chips */
.sam-v2 .conn-strip { display: inline-flex; gap: 3px; align-items: center; flex-wrap: nowrap; }
.sam-v2 .cd {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  min-width: 22px; height: 18px; padding: 0 4px; border-radius: 3px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .02em;
  background: var(--surface2); color: var(--dim);
  border: 1px solid transparent;
  white-space: nowrap;
}
.sam-v2 .cd.cd-ok      { background: rgba(63,194,109,.14);  color: var(--green); }
.sam-v2 .cd.cd-stale   { background: rgba(245,166,35,.14);  color: var(--amber); }
.sam-v2 .cd.cd-missing { background: rgba(138,147,163,.10); color: var(--muted); border-style: dashed; border-color: rgba(138,147,163,.25); }
.sam-v2 .cd.cd-error   { background: rgba(239,68,68,.16);   color: var(--red); }
.sam-v2 .cd.cd-na      { background: transparent; color: var(--dim); opacity: .45; }

/* Filter chip + invA filter bar tweaks */
.sam-v2 .invA-chip {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border2); border-radius: 11px;
  padding: 3px 10px; font-size: 11px; cursor: pointer;
}
.sam-v2 .invA-chip:hover { border-color: var(--amber); color: var(--amber); }


/* ============================================================
   FROM styles-qi-extra.css (had a JS-style // comment in the original;
   converted to CSS comments here)
   ============================================================ */

.sam-v2 .qi-summary { display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 14px 16px; }
.sam-v2 .qi-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.sam-v2 .qi-sum-row:last-child { border-bottom: 0; }
.sam-v2 .qi-sum-row span { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.sam-v2 .qi-sum-row b { color: var(--text); font-weight: 500; }
.sam-v2 .qi-match { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: rgba(63,194,109,.06); border: 1px solid rgba(63,194,109,.18); border-radius: 4px; font-size: 11px; }
.sam-v2 .qi-match .ok { color: var(--green); font-weight: 600; font-size: 11px; }
.sam-v2 .qi-match .dim { font-size: 10px; }
.sam-v2 .qi-kbd { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; }


/* ============================================================
   ACCESSIBILITY — bigger fonts, less padding squeeze, clearer
   row distinction. Appended last so source order wins for
   matched-specificity selectors.
   ============================================================ */

/* Base wrapper */
.sam-v2 { font-size: 14px; }

/* Inventory table (legacy table layout, kept for completeness) */
.sam-v2 .inv-table          { font-size: 13px; }
.sam-v2 .inv-table thead th { font-size: 10px; padding: 9px 10px; }
.sam-v2 .inv-table tbody td { padding: 9px 10px; }

/* Inventory grid rows (the active rendering) */
.sam-v2 .invA-row           { font-size: 13px; height: 36px; }
.sam-v2 .invA-row.invA-head { font-size: 10px; height: 28px; }
.sam-v2 .invA-row .c-loc,
.sam-v2 .invA-row .c-serial,
.sam-v2 .invA-row .c-asset,
.sam-v2 .invA-row .c-cpu,
.sam-v2 .invA-row .c-ram,
.sam-v2 .invA-row .c-drive,
.sam-v2 .invA-row .c-gpu,
.sam-v2 .invA-row .c-host   { font-size: 12px; }
.sam-v2 .invA-row .reason   { font-size: 11px; }
.sam-v2 .invA-row .dim      { font-size: 11px; }
.sam-v2 .invA-row .warn     { font-size: 11px; }
.sam-v2 .invA-row .flag-am  { font-size: 10px; }
.sam-v2 .invA-empty         { font-size: 12px; }

/* Bucket toolbar */
.sam-v2 .bk-btn        { font-size: 12px; padding: 7px 14px; }
.sam-v2 .bk-btn .bk-n  { font-size: 11px; }
.sam-v2 .inv-count     { font-size: 12px; }
.sam-v2 .filter-chip   { font-size: 12px; padding: 3px 5px 3px 11px; }
.sam-v2 .invA-chip     { font-size: 12px; padding: 4px 11px; }

/* Inv table cell content */
.sam-v2 .host-l1     { font-size: 12px; }
.sam-v2 .host-l2     { font-size: 11px; }
.sam-v2 .tn-pill     { font-size: 12px; padding: 4px 10px; }
.sam-v2 .cell-shelf  { font-size: 11px; padding: 3px 8px; }
.sam-v2 .cd          { font-size: 10px; min-width: 24px; height: 20px; padding: 0 5px; }

/* Left rail */
.sam-v2 .rail-h                      { font-size: 10px; }
.sam-v2 .rc-n                        { font-size: 17px; }
.sam-v2 .rc-l                        { font-size: 10px; }
.sam-v2 .add-machine-btn             { font-size: 13px; padding: 9px 14px; }
.sam-v2 .add-machine-i               { font-size: 14px; width: 18px; height: 18px; }
.sam-v2 .invA-tgroup-name            { font-size: 12px; }
.sam-v2 .invA-tgroup-n               { font-size: 11px; }
.sam-v2 .invA-tgroup-head .chev      { font-size: 10px; }

/* Rail selected status */
.sam-v2 .rail-sel-head           { padding: 14px 16px 12px; }
.sam-v2 .rail-sel-head-top       { flex-wrap: wrap; row-gap: 4px; }
.sam-v2 .rail-sel-host           { font-size: 14px; }
.sam-v2 .rail-sel-tenant         { font-size: 12px; }
.sam-v2 .rail-sel-model          { font-size: 12px; }
.sam-v2 .rail-sel-serial         { font-size: 12px; }
.sam-v2 .rail-sel-empty-t        { font-size: 13px; }
.sam-v2 .rail-sel-empty-d        { font-size: 12px; }
.sam-v2 .rail-sel-dl             { font-size: 12px; }
.sam-v2 .rail-sel-dl dt          { font-size: 11px; }
.sam-v2 .conn-label              { font-size: 11px; }
.sam-v2 .conn-state              { font-size: 9px; }
.sam-v2 .conn-foot               { font-size: 11px; }
.sam-v2 .hw-diag-l               { font-size: 13px; }
.sam-v2 .hw-diag-hint            { font-size: 10px; }
.sam-v2 .hw-spec-row dt          { font-size: 10px; }
.sam-v2 .hw-spec-row dd          { font-size: 12px; }
.sam-v2 .qa-trigger              { font-size: 13px; padding: 9px 20px; }

/* Quick actions / quick ingest popovers */
.sam-v2 .qa .qa-l       { font-size: 13px; }
.sam-v2 .qa .qa-d       { font-size: 11px; }
.sam-v2 .qa .qa-i       { font-size: 16px; width: 28px; height: 28px; }
.sam-v2 .qap-l b        { font-size: 13px; }
.sam-v2 .qap-d          { font-size: 11px; }
.sam-v2 .qap-i          { font-size: 16px; width: 32px; height: 32px; }
.sam-v2 .qa-pop-head h3 { font-size: 15px; }
.sam-v2 .qi-bigin       { font-size: 22px; padding: 16px 20px; }
.sam-v2 .qi-stbtn-l     { font-size: 13px; }
.sam-v2 .qi-stbtn-d     { font-size: 10px; }
.sam-v2 .qi-flag        { font-size: 11px; padding: 7px 14px; }
.sam-v2 .qi-locbtns button { font-size: 13px; padding: 9px 18px; }
.sam-v2 .qi-slot        { font-size: 12px; padding: 9px 0; }
.sam-v2 .qi-hint        { font-size: 12px; }
.sam-v2 .qi-step        { font-size: 11px; padding: 5px 10px; }
.sam-v2 .qi-title h3    { font-size: 17px; }
.sam-v2 .qi-sum-row     { font-size: 13px; }
.sam-v2 .qi-sum-row span { font-size: 11px; }
.sam-v2 .qi-match       { font-size: 12px; }
.sam-v2 .qi-match .ok   { font-size: 12px; }
.sam-v2 .qi-match .dim  { font-size: 11px; }
.sam-v2 .qi-label       { font-size: 11px; }
.sam-v2 .qi-loctitle    { font-size: 10px; }

/* Header strip (lives only when overlay mode; inline mode hides it) */
.sam-v2 .sam-tabs button     { font-size: 11px; padding: 5px 13px; }
.sam-v2 .sam-stats           { font-size: 11px; }
.sam-v2 .sam-ingest-btn      { font-size: 11px; padding: 6px 12px; }
.sam-v2 .seg button          { font-size: 11px; padding: 4px 10px; }
.sam-v2 .btn-ghost           { font-size: 11px; padding: 5px 12px; }
.sam-v2 .chip                { font-size: 11px; padding: 4px 10px; }
.sam-v2 .abtn                { font-size: 11px; padding: 7px 14px; }
.sam-v2 .abtn.primary.big    { font-size: 12px; padding: 12px 18px; }
.sam-v2 .panel-empty         { font-size: 13px; }

/* Bug fix: the original cn-ok rule (line ~467) used a comma selector that
   accidentally painted .conn-state with the LED's green background + glow,
   which is why the OK chip showed a solid green bar instead of green text
   like the other states. Reset bg/shadow on the text span here; LED keeps
   its background via the original .conn-chip.cn-ok .conn-led rule. */
.sam-v2 .conn-chip.cn-ok .conn-state { background: transparent; box-shadow: none; }

/* Convert rail-sel from flex-column to block flow. Flex column with `flex:1`
   on the parent was forcing the head to compute height ~56px even though
   its content needed 143px, causing serial/lastboot to paint over the
   connectors block. Block flow + overflow-y:auto gives each section its
   natural content height. */
.sam-v2 .rail-sel   { display: block; overflow-y: auto; }

/* Wider rail and explicit section sizing so each block stays in its own lane
   (head ↔ connectors ↔ hardware ↔ foot). flex-shrink:0 keeps them at content
   height instead of squishing under flex pressure; position:relative gives a
   clean stacking context per section. */
.sam-v2 .rail              { width: 360px; }
.sam-v2 .rail-sel,
.sam-v2 .rail-sel-head,
.sam-v2 .rail-sel-block,
.sam-v2 .rail-sel-foot     { max-width: 100%; min-width: 0; }
.sam-v2 .rail-sel-head     { flex-shrink: 0; flex-grow: 0; position: relative; }
.sam-v2 .rail-sel-block    { flex-shrink: 0; flex-grow: 0; position: relative; }
.sam-v2 .rail-sel-foot     { flex-shrink: 0; flex-grow: 0; position: relative; }
/* rail-sel-head: labeled definition list. Two-column grid puts each label
   in its own column on the left and the value in the column on the right.
   height: auto !important defends against a stale flex-basis cascade that
   was collapsing the head box and letting content paint over connectors. */
.sam-v2 .rail-sel-head      { padding: 18px 20px 16px; display: block; height: auto !important; min-height: fit-content; box-sizing: border-box; }
.sam-v2 .rail-sel-list      { display: grid; grid-template-columns: 92px 1fr; column-gap: 14px; row-gap: 9px; margin: 0; align-items: center; }
.sam-v2 .rail-sel-list dt   { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 0; font-weight: 600; }
.sam-v2 .rail-sel-list dd   { margin: 0; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sam-v2 .rail-sel-list dd.rail-sel-row { display: flex; align-items: center; gap: 8px; overflow: visible; }
.sam-v2 .rail-sel-list dd.rail-sel-row > span { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sam-v2 .rail-sel-list dd.rail-sel-row > .copy-btn { flex: 0 0 auto; }
.sam-v2 .rail-sel-host      { font-size: 14px; font-weight: 600; color: var(--text); font-family: var(--mono); }
.sam-v2 .rail-sel-serial    { font-size: 13px; color: var(--text); font-family: var(--mono); }
.sam-v2 .rail-sel-ip        { font-size: 13px; color: var(--text); font-family: var(--mono); }
.sam-v2 .rail-sel-tenant,
.sam-v2 .rail-sel-model     { font-size: 13px; color: var(--text); }
.sam-v2 .rail-sel-lastseen  { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.sam-v2 .rail-sel-lastseen.on { color: var(--green); font-weight: 600; }
.sam-v2 .rail-sel-bucket    { font-size: 13px; font-weight: 600; }
.sam-v2 .rail-sel-bucket.bk-spare  { color: var(--purple); }
.sam-v2 .rail-sel-bucket.bk-triage { color: var(--amber); }
.sam-v2 .rail-sel-bucket.bk-decom  { color: var(--red); }
.sam-v2 .rail-h            { display: flex; align-items: baseline; gap: 8px; }
.sam-v2 .rail-h-r          { margin-left: auto; }
.sam-v2 .conn-meta         { min-width: 0; }
.sam-v2 .conn-label        { min-width: 0; }
.sam-v2 .conn-state        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-v2 .hw-spec-row       { min-width: 0; max-width: 100%; }
.sam-v2 .hw-spec-row dd    { overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; }
.sam-v2 .hw-diag-l         { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-v2 .tn-name           { min-width: 0; }

/* Footer: place Deselect + Quick Actions side by side, equal width, matching style. */
.sam-v2 .rail-sel-foot     { gap: 8px; justify-content: stretch; padding: 12px; }
.sam-v2 .rail-sel-foot .qa-trigger { flex: 1 1 0; min-width: 0; }
.sam-v2 .qa-deselect       { color: var(--muted); }
.sam-v2 .qa-deselect:hover { color: var(--text); border-color: var(--border2); background: var(--surface2); }

/* Subtle bucket row tints — purple/amber/red wash with left edge accent.
   Hover/sel still take precedence (sel via existing .invA-row.sel rule). */
.sam-v2 .invA-row.bk-spare:not(.invA-head):not(.sel)  { background: rgba(167,128,245,.022); box-shadow: inset 2px 0 0 rgba(167,128,245,.28); }
.sam-v2 .invA-row.bk-triage:not(.invA-head):not(.sel) { background: rgba(245,166,35,.030); box-shadow: inset 2px 0 0 rgba(245,166,35,.35); }
.sam-v2 .invA-row.bk-decom:not(.invA-head):not(.sel)  { background: rgba(239,68,68,.025);  box-shadow: inset 2px 0 0 rgba(239,68,68,.35); }
.sam-v2 .invA-row.bk-spare:not(.invA-head):not(.sel):hover  { background: rgba(167,128,245,.07); }
.sam-v2 .invA-row.bk-triage:not(.invA-head):not(.sel):hover { background: rgba(245,166,35,.08); }
.sam-v2 .invA-row.bk-decom:not(.invA-head):not(.sel):hover  { background: rgba(239,68,68,.07); }


/* ============================================================
   PER-THEME V2 OVERRIDES
   Phase 2 of v2 promotion. Token-redef where the cleanest fix is
   tweaking color/space values for a theme; targeted rule overrides
   where a structural property (button outline, font size) needs
   to change for that theme only.
   ============================================================ */

/* — Light — outlined primary buttons (the solid amber looks heavy on
   bright surfaces), and darker dividers for visibility. Token-scoped
   to .sam-v2 so legacy UI keeps its current border palette. */
body.light .sam-v2 { --border: #b8bec8; --border2: #8a92a0; --dim: #6b7585; }
body.light .sam-v2 .add-machine-btn,
body.light .sam-v2 .abtn.primary {
  background: transparent;
  color: var(--amber);
  border: 2px solid var(--amber);
  box-shadow: none;
}
body.light .sam-v2 .add-machine-btn:hover,
body.light .sam-v2 .abtn.primary:hover { background: rgba(245,124,10,.08); }
body.light .sam-v2 .add-machine-btn .add-machine-i { background: var(--amber); color: #fff; }

/* Connector detail accordions — darken the link blue and the yellow badge
   text so they read on white, mirroring legacy light.css (#1d4ed8 links,
   #92400e amber-on-white). Header/body/border already adapt via the tokens
   light overrides above, so nothing structural is needed. */
body.light .sam-v2 .integ-link { color: #1d4ed8; }
body.light .sam-v2 .integ-detail.integ-warn,
body.light .sam-v2 .integ-badge.patches,
body.light .sam-v2 .integ-badge.warn { color: #92400e; }

/* — Win99 (Retro) — Windows 95 paint job:
     • Main inventory list  → teal (#00bdbd), white text
     • Column header + section/tenant title bars → Win95 navy (#000080),
       bold white text
     • Left rail + filter row → Win95 chrome grey (#c0c0c0), black text
     • Spares/New/Decom + Add Machine → Win98 3D grey buttons
     • Green/forest accents removed entirely
     • No rounded corners anywhere */
body.win99 .sam-v2 {
  --bg:        #c0c0c0;   /* Win95 chrome grey */
  --surface:   #c0c0c0;
  --surface2:  #d4d0c8;
  --amber:     #000080;   /* Win95 active-title navy stands in for "amber" accent */
  --dim:       #000000;
  --muted:     #000000;
}
body.win99 .sam-v2 *,
body.win99 .sam-v2 *::before,
body.win99 .sam-v2 *::after { border-radius: 0 !important; }

/* Inventory List title bar above the filter row — Win95 navy with bold
   white, the only navy element in retro now that section headers are teal */
body.win99 .sam-v2 .invA-title-bar {
  display: block;
  background: #000080;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-bottom: 1px solid #000040;
}

/* Main inventory list — WHITE field, BLACK text throughout */
body.win99 .sam-v2 .invA-list { background: #ffffff; }
body.win99 .sam-v2 .invA-list .invA-row:not(.invA-head) { color: #000000; }
body.win99 .sam-v2 .invA-list .invA-row:not(.invA-head) > div { color: #000000; }
body.win99 .sam-v2 .invA-list .invA-row .ok { color: #008000; }
body.win99 .sam-v2 .invA-list .invA-row .warn { color: #c00000; }
body.win99 .sam-v2 .invA-list .invA-row .reason,
body.win99 .sam-v2 .invA-list .invA-row .dim { color: #404040; }
body.win99 .sam-v2 .invA-empty { color: #404040; }
/* Selected row in retro: pale navy tint with navy left border */
body.win99 .sam-v2 .invA-list .invA-row.sel { background: #d4dafa; border-left-color: #000080; color: #000000; }
body.win99 .sam-v2 .invA-list .invA-row.sel > div { color: #000000; }
/* Bucket tints on white are very faint — keep but tone-shift to muted on white */
body.win99 .sam-v2 .invA-list .invA-row:not(.invA-head):not(.sel):hover { background: #f0f0f0; }

/* Column header row, section bars, tenant sub-groups — all DARKER TEAL
   (#008080, the original Win98 desktop teal) with bold white text */
body.win99 .sam-v2 .invA-row.invA-head { background: #008080; font-size: 11px; }
body.win99 .sam-v2 .invA-row.invA-head > div {
  color: #ffffff;
  font-weight: 700;
  text-shadow: none;
}
body.win99 .sam-v2 .invA-resizer::after { background: #ffffff; opacity: .5; }

body.win99 .sam-v2 .invA-sec-head { background: #008080; }
body.win99 .sam-v2 .invA-sec-head,
body.win99 .sam-v2 .invA-sec-head * {
  color: #ffffff;
  text-shadow: none;
}
body.win99 .sam-v2 .invA-sec-head .invA-sec-blurb,
body.win99 .sam-v2 .invA-sec-head .invA-sec-blurb b,
body.win99 .sam-v2 .invA-sec-head .bucket-tag,
body.win99 .sam-v2 .invA-sec-head .invA-sec-count,
body.win99 .sam-v2 .invA-sec-head .chev { color: #ffffff; font-weight: 700; }

body.win99 .sam-v2 .invA-tgroup-head { background: #008080; }
body.win99 .sam-v2 .invA-tgroup-head,
body.win99 .sam-v2 .invA-tgroup-head * { color: #ffffff; text-shadow: none; font-weight: 700; }

/* Left rail (sidebar) — Win95 grey, black text */
body.win99 .sam-v2 .rail {
  background: #c0c0c0;
  border-right: 1px solid #808080;
}
body.win99 .sam-v2 .rail,
body.win99 .sam-v2 .rail * { color: #000000; text-shadow: none; }
body.win99 .sam-v2 .rail-divider { background: #808080; }

/* Filter strip (Spares/New/Decom + search) — Win95 grey, black text */
body.win99 .sam-v2 .invA-filter {
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
}
body.win99 .sam-v2 .invA-filter,
body.win99 .sam-v2 .invA-filter * { color: #000000; }
body.win99 .sam-v2 .invA-search-mini input {
  background: #ffffff;
  border: 2px solid;
  border-color: #404040 #ffffff #ffffff #404040;
  color: #000000;
}

/* Spares/New/Decom segment buttons — Win98 grey 3D bezel */
body.win99 .sam-v2 .seg { background: transparent; border: 0; padding: 0; gap: 2px; }
body.win99 .sam-v2 .seg button {
  background: var(--w99-face);
  border: 2px solid;
  border-color: var(--w99-hi) var(--w99-dk) var(--w99-dk) var(--w99-hi);
  color: #000000;
  padding: 4px 12px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}
body.win99 .sam-v2 .seg button:hover { background: #e8e4d6; color: #000000; }
body.win99 .sam-v2 .seg button.active,
body.win99 .sam-v2 .seg button:active {
  background: #e8e4d6;
  border-color: var(--w99-dk) var(--w99-hi) var(--w99-hi) var(--w99-dk);
  color: #000000;
}
body.win99 .sam-v2 .seg .seg-n { background: transparent; opacity: 1; color: inherit; }

/* Add Machine — same Win98 grey 3D bezel */
body.win99 .sam-v2 .add-machine-btn {
  background: var(--w99-face);
  border: 2px solid;
  border-color: var(--w99-hi) var(--w99-dk) var(--w99-dk) var(--w99-hi);
  color: #000000;
  box-shadow: none;
  padding: 6px 14px;
}
body.win99 .sam-v2 .add-machine-btn:hover { background: #e8e4d6; }
body.win99 .sam-v2 .add-machine-btn:active {
  border-color: var(--w99-dk) var(--w99-hi) var(--w99-hi) var(--w99-dk);
  transform: none;
}
body.win99 .sam-v2 .add-machine-i,
body.win99 .sam-v2 .add-machine-l { background: transparent; color: #000000; text-shadow: none; font-weight: 700; }

/* Connector detail accordions — Win98 paint job. Header is a raised 3D grey
   button (same bezel as .seg button / Add Machine); pressing it open gives the
   sunken state. Body is an inset (sunken) white field. Retry button matches the
   3D bezel. Dot/LED glow box-shadows removed (no glow in retro). Square corners
   already forced globally by the border-radius:0 !important rule above. */
body.win99 .sam-v2 .integ-accordion {
  border: 2px solid;
  border-color: var(--w99-hi) var(--w99-dk) var(--w99-dk) var(--w99-hi);
  margin-bottom: 4px;
}
body.win99 .sam-v2 .integ-accordion-header {
  background: var(--w99-face);
  color: #000000;
}
body.win99 .sam-v2 .integ-accordion-header:hover { background: #e8e4d6; }
body.win99 .sam-v2 .integ-accordion.open .integ-accordion-header {
  border-bottom: 2px solid;
  border-color: var(--w99-dk) var(--w99-hi) var(--w99-hi) var(--w99-dk);
}
body.win99 .sam-v2 .integ-accordion-label,
body.win99 .sam-v2 .integ-accordion-chevron { color: #000000; }
body.win99 .sam-v2 .integ-accordion-body { background: #ffffff; }
body.win99 .sam-v2 .integ-row,
body.win99 .sam-v2 .integ-detail strong { color: #000000; }
body.win99 .sam-v2 .integ-detail,
body.win99 .sam-v2 .integ-muted { color: #404040; }
body.win99 .sam-v2 .integ-detail.integ-warn { color: #c00000; }
/* Flat status dots — no phosphor glow in Win98 */
body.win99 .sam-v2 .integ-dot { box-shadow: none; }
body.win99 .sam-v2 .integ-dot.online  { background: #008000; }
body.win99 .sam-v2 .integ-dot.offline { background: #c00000; }
body.win99 .sam-v2 .integ-dot.warning { background: #808000; }
body.win99 .sam-v2 .integ-link { color: #000080; }
/* Retry button — 3D grey bezel like the other Win98 buttons */
body.win99 .sam-v2 .integ-retry-btn {
  background: var(--w99-face);
  border: 2px solid;
  border-color: var(--w99-hi) var(--w99-dk) var(--w99-dk) var(--w99-hi);
  color: #000000;
}
body.win99 .sam-v2 .integ-retry-btn:hover { background: #e8e4d6; color: #000000; }
body.win99 .sam-v2 .integ-retry-btn:active {
  border-color: var(--w99-dk) var(--w99-hi) var(--w99-hi) var(--w99-dk);
}
body.win99 .sam-v2 .integ-acc-empty,
body.win99 .sam-v2 .integ-acc-loading { color: #404040; }
body.win99 .sam-v2 .integ-acc-error { color: #c00000; }
body.win99 .sam-v2 .integ-skeleton-bar { background: #808080; opacity: .5; }

/* — Silmarillion (Rivendell) — Cinzel/Crimson serif reads small at the
   default 13/14px v2 sizing. Bump base, lift the smaller chrome (filter
   inputs, Add Machine, the top of the rail), and re-balance the row cell
   sizes: tenant smaller, everything else a notch larger, so the row
   reads uniformly rather than tenant dominating. */
body.silmarillion .sam-v2 { font-size: 16px; }
body.silmarillion .sam-v2 .invA-row { font-size: 14px; }
body.silmarillion .sam-v2 .invA-row.invA-head { font-size: 11px; }
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-tenant { font-size: 13px; }
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-host,
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-serial,
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-model,
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-cpu,
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-ram,
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-drive,
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-gpu,
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-loc { font-size: 13px; }
body.silmarillion .sam-v2 .invA-row:not(.invA-head) .c-extra { font-size: 12px; }
body.silmarillion .sam-v2 .invA-search-mini input { font-size: 14px; }
body.silmarillion .sam-v2 .seg button { font-size: 12px; }
body.silmarillion .sam-v2 .seg-n { font-size: 11px; }
body.silmarillion .sam-v2 .invA-meta { font-size: 12px; }
body.silmarillion .sam-v2 .invA-tgroup-name { font-size: 14px; }
body.silmarillion .sam-v2 .invA-tgroup-n { font-size: 12px; }
body.silmarillion .sam-v2 .invA-sec-blurb { font-size: 13px; }
body.silmarillion .sam-v2 .add-machine-btn { font-size: 15px; padding: 9px 16px; }
body.silmarillion .sam-v2 .add-machine-i { font-size: 16px; width: 22px; height: 22px; }
body.silmarillion .sam-v2 .qi-bigin { font-size: 22px; }
body.silmarillion .sam-v2 .qi-label { font-size: 12px; }
body.silmarillion .sam-v2 .qi-hint { font-size: 13px; }
body.silmarillion .sam-v2 .abtn { font-size: 12px; }

/* Connector detail accordions — Rivendell serif. The label is a small caps
   heading, so lift it to the Cinzel display face (--sans) and ease the heavy
   tracking that suits the mono original but crowds the serif. Bump the tiny
   9–11px chrome a notch so Crimson/Cinzel stay legible. Amber/sandstone
   palette comes through the tokens. */
body.silmarillion .sam-v2 .integ-accordion-label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--amber);
}
body.silmarillion .sam-v2 .integ-accordion-header { font-size: 13px; }
body.silmarillion .sam-v2 .integ-row,
body.silmarillion .sam-v2 .integ-detail,
body.silmarillion .sam-v2 .integ-link { font-size: 13px; }
body.silmarillion .sam-v2 .integ-detail.integ-warn { font-size: 12px; }
body.silmarillion .sam-v2 .integ-badge { font-size: 11px; }
body.silmarillion .sam-v2 .integ-acc-loading,
body.silmarillion .sam-v2 .integ-acc-error,
body.silmarillion .sam-v2 .integ-acc-empty,
body.silmarillion .sam-v2 .integ-muted { font-size: 12px; }

/* — Matrix — bump font for terminal-font readability; kill text-shadow
   and the inset highlight on add-machine + the empty-state copy so the
   "glow" of bright green on void doesn't blur the letters. */
body.matrix .sam-v2 { font-size: 15px; }
body.matrix .sam-v2 .invA-row { font-size: 14px; }
body.matrix .sam-v2 .add-machine-btn,
body.matrix .sam-v2 .add-machine-btn *,
body.matrix .sam-v2 .rail-sel-empty,
body.matrix .sam-v2 .rail-sel-empty * { text-shadow: none; }
body.matrix .sam-v2 .add-machine-btn { box-shadow: none; }

/* Connector detail accordions — phosphor terminal. Everything maps to green:
   the base .integ-link uses --blue (#3090d0 in matrix, a real blue) so force it
   to the phosphor green with a faint glow, matching the .conn-* link treatment.
   Header/body backgrounds go transparent over the void; the warm rgba badge
   backgrounds (amber/red literals in the base) are remapped to green tints so
   no warm color survives. Status dots keep their token glow (--green/--red are
   already green-shifted) but warning maps to green rather than amber. */
body.matrix .sam-v2 .integ-accordion-header { background: transparent; }
body.matrix .sam-v2 .integ-accordion-header:hover { background: rgba(0,255,65,.05); }
body.matrix .sam-v2 .integ-accordion-body { background: transparent; }
body.matrix .sam-v2 .integ-link {
  color: var(--green);
  text-shadow: 0 0 4px rgba(0,204,0,.4);
}
body.matrix .sam-v2 .integ-dot { box-shadow: 0 0 6px currentColor; }
body.matrix .sam-v2 .integ-dot.warning { background: var(--green); }
/* Remap warm badge backgrounds to phosphor-green tints */
body.matrix .sam-v2 .integ-badge.patches,
body.matrix .sam-v2 .integ-badge.warn,
body.matrix .sam-v2 .integ-badge.healthy {
  background: rgba(0,255,65,.10);
  color: var(--green);
}
body.matrix .sam-v2 .integ-badge.reboot,
body.matrix .sam-v2 .integ-badge.unhealthy {
  background: rgba(255,48,48,.12);
  color: var(--red);
}
body.matrix .sam-v2 .integ-detail.integ-warn { color: var(--green); }
body.matrix .sam-v2 .integ-skeleton-bar { background: var(--green); opacity: .25; }

/* — High Contrast — WCAG AAA. The base accordion leans on 1px borders, faint
   rgba badge tints and low-opacity skeleton/muted text that all fail contrast
   on pure black. Thicken interactive borders to 2px, bolden, route links to the
   theme yellow with a 3px focus ring, make every badge a solid high-contrast
   block, and lift the faint opacities to full strength. Color tokens
   (--green/--red/--yellow/--blue) are already the boosted HC values. */
body.highcontrast .sam-v2 .integ-accordion { border-width: 2px; }
body.highcontrast .sam-v2 .integ-accordion-header { font-weight: 700; }
body.highcontrast .sam-v2 .integ-accordion-label,
body.highcontrast .sam-v2 .integ-accordion-chevron { color: var(--text); }
body.highcontrast .sam-v2 .integ-detail,
body.highcontrast .sam-v2 .integ-muted { color: var(--text); font-style: normal; }
body.highcontrast .sam-v2 .integ-detail.integ-warn { color: var(--yellow); font-weight: 700; }
body.highcontrast .sam-v2 .integ-dot { box-shadow: none; border: 1px solid #000; }
/* Solid, opaque badges — no faint tints */
body.highcontrast .sam-v2 .integ-badge { font-weight: 700; border: 2px solid currentColor; }
body.highcontrast .sam-v2 .integ-badge.patches,
body.highcontrast .sam-v2 .integ-badge.warn { background: var(--yellow); color: #000; }
body.highcontrast .sam-v2 .integ-badge.reboot,
body.highcontrast .sam-v2 .integ-badge.unhealthy { background: var(--red); color: #000; }
body.highcontrast .sam-v2 .integ-badge.healthy { background: var(--green); color: #000; }
/* Links — theme yellow, underlined, 3px focus ring */
body.highcontrast .sam-v2 .integ-link { color: var(--yellow); text-decoration: underline; }
body.highcontrast .sam-v2 .integ-link:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* Retry button — 2px border, bold, yellow focus ring */
body.highcontrast .sam-v2 .integ-retry-btn { border-width: 2px; color: var(--text); font-weight: 700; }
body.highcontrast .sam-v2 .integ-retry-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* Skeleton bar — full opacity so it doesn't disappear on black */
body.highcontrast .sam-v2 .integ-skeleton-bar { background: var(--border2); opacity: 1; }
body.highcontrast .sam-v2 .integ-acc-empty { font-style: normal; color: var(--text); }

/* ── Load-failure state (loader.js renderError) ─────────────────────────────
   Painted instead of fabricated mock inventory when /api/shelves (or the v2
   script bundle) fails to load. Uses the shared theme vars so all six themes
   inherit sane colors without per-theme overrides. */
.sam-v2 .sam-v2-load-error {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 64px 24px; text-align: center;
}
.sam-v2 .sam-v2-load-error-title { font-size: 16px; font-weight: 600; }
.sam-v2 .sam-v2-load-error-msg { font-size: 13px; opacity: 0.75; max-width: 480px; }
.sam-v2 .sam-v2-load-error-retry {
  margin-top: 6px; padding: 6px 18px; cursor: pointer;
  border: 1px solid currentColor; border-radius: 6px;
  background: transparent; color: inherit; font: inherit;
}
.sam-v2 .sam-v2-load-error-retry:hover { opacity: 0.8; }
body.highcontrast .sam-v2 .sam-v2-load-error-retry { border-width: 2px; font-weight: 700; }
body.highcontrast .sam-v2 .sam-v2-load-error-retry:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }