/* Rack Safety Sweep — inspector cockpit (design 3a).
   Real CSS classes for the bay grid, sticky action bar, and aisle dropdown,
   replacing the former inline <style> block in _shelf_grid.html.erb. */

/* ── Brand-aware palette, SCOPED to .sweep-cockpit ────────────────────────
   Primary accents come from the BUSINESS THEME via the Bootstrap variables
   the layout's <style id="custom-theme"> emits (--bs-primary /
   --bs-primary-rgb / --bs-success); tenants without a theme fall back to the
   design handoff's colors (#3b7ddd blue / #1cbb8c green). Status colors on
   the bay grid / heatmap / severity badges stay FIXED — they're data
   semantics (passed/exception/critical), not branding.
   --sc-* locals below keep the fallbacks + hover shades in one place. */
.sweep-cockpit {
  --sc-primary: var(--bs-primary, #3b7ddd);
  --sc-primary-rgb: var(--bs-primary-rgb, 59, 125, 221);
  --sc-primary-dark: color-mix(in srgb, var(--bs-primary, #3b7ddd) 85%, #000);
  --sc-primary-tint: color-mix(in srgb, var(--bs-primary, #3b7ddd) 45%, #fff);
  --sc-success: var(--bs-success, #1cbb8c);
  --sc-success-dark: color-mix(in srgb, var(--bs-success, #1cbb8c) 85%, #000);
}
.sweep-cockpit .card { border: 0; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.sweep-cockpit .card-header { background: #fff; border-bottom: 1px solid #dee2e6; }
.sweep-cockpit .card-title { font-size: .9rem; font-weight: 600; color: #212529; margin: 0; }
.sweep-cockpit .text-primary { color: var(--sc-primary) !important; }
.sweep-cockpit a:not(.btn):not(.aisle-switcher-row):not(.ledger-row) { color: var(--sc-primary); }
.sweep-cockpit a:not(.btn):not(.aisle-switcher-row):not(.ledger-row):hover { color: var(--sc-primary-dark); }

/* !important on EVERY state — the business theme injects `.btn-primary` (and
   its hover/active variants) with !important via the layout's inline
   <style id="custom-theme">, so any state left un-!important mixes theme +
   scoped styles (e.g. theme text over our background). Since the values now
   READ the theme variables, this just keeps every state coherent. */
.sweep-cockpit .btn-primary {
  background-color: var(--sc-primary) !important;
  border-color: var(--sc-primary) !important;
  color: #fff !important;
}
.sweep-cockpit .btn-primary:hover,
.sweep-cockpit .btn-primary:focus,
.sweep-cockpit .btn-primary:focus-visible,
.sweep-cockpit .btn-primary:active,
.sweep-cockpit .btn-primary.active,
.sweep-cockpit .btn-primary:first-child:active {
  background-color: var(--sc-primary-dark) !important;
  border-color: var(--sc-primary-dark) !important;
  color: #fff !important;
}
.sweep-cockpit .btn-outline-primary {
  color: var(--sc-primary) !important;
  border-color: var(--sc-primary) !important;
  background-color: transparent !important;
}
.sweep-cockpit .btn-outline-primary:hover,
.sweep-cockpit .btn-outline-primary:focus,
.sweep-cockpit .btn-outline-primary:active,
.sweep-cockpit .btn-outline-primary.active,
.sweep-cockpit .btn-outline-primary:first-child:active {
  background-color: var(--sc-primary) !important;
  border-color: var(--sc-primary) !important;
  color: #fff !important;
}
.sweep-cockpit .btn-success {
  background-color: var(--sc-success) !important;
  border-color: var(--sc-success) !important;
  color: #fff !important;
}
.sweep-cockpit .btn-success:hover,
.sweep-cockpit .btn-success:focus,
.sweep-cockpit .btn-success:active,
.sweep-cockpit .btn-success.active,
.sweep-cockpit .btn-success:first-child:active {
  background-color: var(--sc-success-dark) !important;
  border-color: var(--sc-success-dark) !important;
  color: #fff !important;
}
.sweep-cockpit .btn-outline-secondary {
  background-color: #fff !important;
  color: #6c757d !important;
  border-color: #ced4da !important;
}
.sweep-cockpit .btn-outline-secondary:hover,
.sweep-cockpit .btn-outline-secondary:focus,
.sweep-cockpit .btn-outline-secondary:active,
.sweep-cockpit .btn-outline-secondary:first-child:active {
  background-color: #f8f9fa !important;
  color: #495057 !important;
  border-color: #ced4da !important;
}
/* .active is SELECTION (the sweep-log question buttons toggle it) — solid
   brand color like the component picker, clearly distinct from hover's
   light gray. */
.sweep-cockpit .btn-outline-secondary.active {
  background-color: var(--sc-primary) !important;
  border-color: var(--sc-primary) !important;
  color: #fff !important;
}
.sweep-cockpit .btn:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(var(--sc-primary-rgb), .25) !important;
}

/* Touch sizing used by the log / notable forms — moderated from the design's
   tablet scale (48/54px) to sit naturally next to the app's ~38px buttons
   while keeping a slightly larger tap target. */
.sweep-cockpit .btn-touch { min-height: 40px; }
.sweep-cockpit .btn-giant { min-height: 44px; font-size: .95rem; }

/* ── Bay grid ─────────────────────────────────────────────────────────── */
.bay-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bay-tile {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow .15s ease, background .15s ease, color .15s ease;
}
.bay-tile.is-passed {
  background: #1cbb8c;
  color: #fff;
}
.bay-tile.is-pending {
  background: #fff;
  color: #6c757d;
  border: 1px dashed #ced4da;
}
.bay-tile.is-exception {
  background: #dc3545;
  color: #fff;
  cursor: not-allowed;
}
/* Client-only "selected" state: tap a pending bay once to pick it (the action
   bar's Log Exception pre-fills this bay); tap again to mark it passed. */
.bay-tile.is-selected {
  background: #fff;
  color: var(--sc-primary, #3b7ddd);
  border: 1px solid var(--sc-primary, #3b7ddd);
  box-shadow: 0 0 0 2px rgba(var(--sc-primary-rgb, 59, 125, 221), .35);
}
/* Amber ring on the frontier bay (where the inspector resumed). */
.bay-tile.is-frontier {
  box-shadow: 0 0 0 2px #fcb92c;
}
.bay-tile:not(.is-exception):hover {
  box-shadow: 0 0 0 2px #fcb92c;
}

.bay-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #6c757d;
}
.bay-legend .swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  vertical-align: middle;
}
.bay-legend .swatch.is-passed { background: #1cbb8c; }
.bay-legend .swatch.is-exception { background: #dc3545; }
.bay-legend .swatch.is-pending { background: #fff; border: 1px dashed #ced4da; }
.bay-legend .swatch.is-selected { background: #fff; border: 1px solid var(--sc-primary, #3b7ddd); box-shadow: 0 0 0 1px rgba(var(--sc-primary-rgb, 59, 125, 221), .35); }

/* Expected beam elevations for the selected bay (from the imported drawing).
   Chips read bottom → top; future levels (designed, not installed) are muted. */
.bay-elevation-panel {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 10px 12px;
}
.bay-elevation-title {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.bay-elevation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bay-elevation-chip {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #212529;
  white-space: nowrap;
}
.bay-elevation-chip.is-future {
  border-style: dashed;
  color: #6c757d;
  font-weight: 500;
}

/* Header mini progress bar (wired to the sweep-grid `bar` target). */
.bay-progress {
  width: 140px;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}
.bay-progress > span {
  display: block;
  height: 100%;
  background: #1cbb8c;
  transition: width .15s ease;
}

/* ── Cockpit two-column layout (design: fixed 340px right rail, 16px gap) ── */
.cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
  /* Fill the viewport so the action bar docks at the bottom even on short
     aisles (design: viewport-docked bar). 265px = chrome above the grid
     (navbar + breadcrumb + aisle header) + the bar's own height + margin. */
  min-height: calc(100vh - 265px);
}
@media (max-width: 1199.98px) {
  .cockpit-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Sticky bottom action bar ─────────────────────────────────────────────
   Full-bleed across the content area (design docks it edge-to-edge): negative
   margins cancel main.content's 2rem side / 1rem bottom padding plus the
   container-fluid 0.375rem gutters. */
.sweep-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: #fff;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Single row: buttons never shrink or wrap — the summary text is the
     flexible element (it wraps/shrinks first). Only true mobile widths
     stack the bar. */
  flex-wrap: nowrap;
  margin: 16px calc(-2rem - .375rem) calc(-1rem);
}
.sweep-action-bar .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .sweep-action-bar { flex-wrap: wrap; }
}
/* Action-bar buttons at app scale — a touch taller than a default .btn for
   prominence, but no longer the design's 54px tablet targets. */
.sweep-action-bar .btn {
  min-height: 40px;
  padding: .45rem 1rem;
}
.sweep-action-summary {
  font-size: 13px;
  color: #6c757d;
  /* The bar's flexible element — absorbs remaining space so buttons keep one
     row. The copy is short + nowrap so it never wraps to a second line; the
     full explanation lives in the title tooltip. */
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sweep-action-summary strong { color: #212529; }

/* ── Aisle status square (header trigger + dropdown rows) ─────────────── */
.aisle-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
}
.aisle-status-dot.is-covered { background: #1cbb8c; }
.aisle-status-dot.is-in_progress { background: #fcb92c; }
.aisle-status-dot.is-skipped { background: #ced4da; }
.aisle-status-dot.is-not_started { background: #e9ecef; }

/* ── Aisle jump dropdown ─────────────────────────────────────────────── */
.aisle-switcher { position: relative; }
.aisle-switcher-trigger {
  min-height: 40px;
  background: #fff;
  border: 1px solid #ced4da;
  color: #000;
  font-size: 1rem;
  font-weight: 600;
  padding: .4rem .85rem;
  gap: 10px;
  border-radius: .2rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.aisle-switcher-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 300px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
  z-index: 20;
  padding: .35rem 0;
}
.aisle-switcher-menu[hidden] { display: none; }
.aisle-switcher-search {
  padding: .5rem .75rem;
  border-bottom: 1px solid #dee2e6;
  position: relative;
}
.aisle-switcher-search .fa-magnifying-glass {
  position: absolute;
  left: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  font-size: 12px;
}
.aisle-switcher-search input {
  padding-left: 2rem;
  font-size: .82rem;
}
.aisle-switcher-list {
  max-height: 320px;
  overflow-y: auto;
  padding: .35rem .5rem;
}
.aisle-switcher-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13.5px;
  color: #495057;
  cursor: pointer;
  text-decoration: none;
}
.aisle-switcher-row:hover { background: #f8f9fa; color: #495057; }
.aisle-switcher-row.is-current {
  background: rgba(var(--sc-primary-rgb, 59, 125, 221), .10);
  color: var(--sc-primary, #3b7ddd);
  font-weight: 600;
}
.aisle-switcher-row .label { flex: 1; }
.aisle-switcher-row .meta { font-size: 11.5px; color: #adb5bd; }
.aisle-switcher-row .meta.has-issues { color: #b02a37; }
.aisle-switcher-row[hidden] { display: none; }
.aisle-switcher-legend {
  display: flex;
  gap: 12px;
  padding: .5rem .85rem;
  border-top: 1px solid #dee2e6;
  font-size: 11px;
  color: #6c757d;
}

/* ── Rest-of-sweep heatmap ───────────────────────────────────────────── */
.sweep-heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.sweep-heatmap a {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  display: block;
}
.sweep-heatmap a.is-current { box-shadow: 0 0 0 2px #fcb92c; }

/* ── Exception ledger rows (design: 15px/600 component · 13px meta · 13px pad) ──
   Rows are links — click re-opens the log form in the drawer to edit. Text
   keeps the neutral palette (excluded from the cockpit's blue link rule). */
.ledger-card .card-body { padding: .4rem 1.25rem; }
.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid #f1f3f5;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}
.ledger-row:last-child { border-bottom: 0; }
a.ledger-row:hover {
  background: #f8f9fa;
  color: inherit;
  text-decoration: none;
}
a.ledger-row:hover .ledger-component,
a.ledger-row:hover .ledger-position,
a.ledger-row:hover .ledger-detail { text-decoration: none; }
/* "Edit" chip fades in on hover — replaces the sluggish native title tooltip. */
.ledger-edit-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sc-primary, #3b7ddd);
  background: #fff;
  border: 1px solid var(--sc-primary-tint, #9dbeee);
  border-radius: .2rem;
  padding: 2px 8px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .15s ease;
  white-space: nowrap;
}
.ledger-edit-chip .fa-pen { font-size: 10px; }
a.ledger-row:hover .ledger-edit-chip { opacity: 1; }
.ledger-row .ledger-component { font-weight: 600; color: #212529; font-size: 15px; }
.ledger-row .ledger-position { font-size: 13px; color: #6c757d; }
.ledger-row .ledger-detail { font-size: 13px; color: #6c757d; margin-top: 3px; }

/* Severity badges — exact design colors (app's themed bg-warning/bg-info drift). */
.sev-badge { font-size: .75rem; font-weight: 600; padding: .45em .7em; border-radius: .2rem; line-height: 1; }
.sev-badge.sev-critical { background: #dc3545; color: #fff; }
.sev-badge.sev-major { background: #fcb92c; color: #212529; }
.sev-badge.sev-minor { background: #17a2b8; color: #fff; }
.sev-badge.sev-observation { background: #6c757d; color: #fff; }

/* Neutral count badge (ledger header). */
.badge-neutral { background: #e9ecef; color: #6c757d; font-size: .7rem; font-weight: 600; padding: .34em .6em; border-radius: .2rem; line-height: 1; }

/* Aisle-header meta line ("Bulk storage · 48 bays · resumed at bay 060") —
   vertically centered against the 40px header controls. */
.aisle-header-meta { font-size: 13px; color: #6c757d; padding-top: 10px; }

/* Rest-of-the-Sweep card body (design: 1.1rem 1.25rem). */
.rest-of-sweep-card .card-body { padding: 1.1rem 1.25rem; }