/*
 * home-tent.css — Climate-controlled inventory tab.
 *
 * Three views:
 *   .ht-rack-grid     — 8 3D-tilt rack cards
 *   .ht-rack-3dview   — single rack with 10×10 spot grid (zoom-in)
 *   .ht-spot-detail   — top-down spot view + inventory record + admin form
 *
 * Accent: emerald/green (matches the existing #tab-home-tent WIP styling
 * which used 167,139,250).
 */

.ht-wrap {
  padding: 24px 32px 80px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  animation: ht-fade-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ht-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header (shared across all views) ─────────────────────────────────── */
.ht-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.ht-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
  margin-top: 28px;
}
.ht-back:hover {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.45);
  color: rgba(196, 181, 253, 1);
  transform: translateX(-2px);
}
.ht-header-meta { flex: 1 1 auto; min-width: 0; }
.ht-title {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 6px 0 4px;
  line-height: 1;
}
.ht-sub {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.ht-sub strong { color: rgba(196, 181, 253, 1); font-weight: 700; }
.ht-admin-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  background: rgba(167, 139, 250, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 1);
}

/* Sort toggle — segmented pill under the shelf title. Flips between
   ascending-by-batch and most-recent-first; selection persists. */
.ht-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 6px 4px 12px;
  background: rgba(56, 189, 248, 0.04);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 999px;
}
.ht-sort-toggle-lbl {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(125, 211, 252, 0.85);
  margin-right: 4px;
}
.ht-sort-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(186, 211, 232, 0.70);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.ht-sort-pill:hover {
  background: rgba(56, 189, 248, 0.08);
  color: rgba(186, 230, 253, 1);
}
.ht-sort-pill.is-on {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.55);
  color: rgba(245, 253, 255, 1);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.22);
}

/* ════════════════════════════════════════════════════════════════════════
   VIEW 1 — Rack grid (3D tilt cards)
════════════════════════════════════════════════════════════════════════ */
.ht-rack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  perspective: 1200px;
}
@media (max-width: 1100px) {
  .ht-rack-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ht-rack-grid { grid-template-columns: 1fr; }
}

.ht-rack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 14px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s ease,
              border-color 0.32s ease;
  animation: ht-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--stagger, 1) * 0.045s);
  text-align: left;
  font-family: var(--font-body);
}
@keyframes ht-card-in {
  from { opacity: 0; transform: translateY(20px) rotateX(-12deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); }
}
.ht-rack-card:hover {
  transform: rotateX(-8deg) rotateY(6deg) translateY(-4px);
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(167, 139, 250, 0.20) inset,
    0 0 60px rgba(167, 139, 250, 0.14);
}
.ht-rack-card:active { transform: scale(0.985); }

/* The 3D rack mock — a layered glass block. Pure CSS, no Three.js. */
.ht-rack-3d {
  position: relative;
  height: 140px;
  transform-style: preserve-3d;
  pointer-events: none;
}
.ht-rack-face {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.40);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(167, 139, 250, 0.10) 0,
      rgba(167, 139, 250, 0.10) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(180deg, rgba(20, 16, 42, 0.85) 0%, rgba(12, 9, 28, 0.92) 100%);
}
.ht-rack-face-front { z-index: 3; }
.ht-rack-face-top {
  z-index: 2;
  transform: translateY(-6px) translateX(6px);
  border-color: rgba(167, 139, 250, 0.25);
  opacity: 0.55;
}
.ht-rack-face-side {
  z-index: 1;
  transform: translateY(-12px) translateX(12px);
  border-color: rgba(167, 139, 250, 0.15);
  opacity: 0.30;
}
.ht-rack-num {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 84px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgba(196, 181, 253, 0.95);
  text-shadow: 0 0 24px rgba(167, 139, 250, 0.45);
  line-height: 1;
  z-index: 4;
}
.ht-rack-label {
  position: absolute;
  top: 12px; left: 14px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.85);
  z-index: 4;
}

.ht-rack-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ht-rack-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ht-rack-stat-num {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 26px;
  font-weight: 700;
  color: rgba(196, 181, 253, 1);
  line-height: 1;
}
.ht-rack-stat-tot {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.ht-rack-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.ht-rack-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.85), rgba(139, 92, 246, 0.85));
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ht-rack-pct {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   VIEW 2 — Rack detail with 10×10 spot grid (3D scene)
════════════════════════════════════════════════════════════════════════ */
.ht-rack-scene {
  perspective: 1400px;
  perspective-origin: 50% 30%;
}
.ht-rack-3dview {
  transform-style: preserve-3d;
  animation: ht-rack-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ht-rack-enter {
  from { opacity: 0; transform: rotateX(-20deg) translateZ(-80px) scale(0.94); }
  to   { opacity: 1; transform: rotateX(-6deg)  translateZ(0)     scale(1);    }
}
.ht-rack-3dview-shell {
  background: linear-gradient(180deg, rgba(20, 16, 42, 0.78) 0%, rgba(12, 9, 28, 0.88) 100%);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 16px;
  padding: 22px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(167, 139, 250, 0.10);
  transform: rotateX(-6deg);
  transform-origin: 50% 80%;
}
.ht-spot-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}
.ht-spot {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease;
}
.ht-spot:hover {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.55);
  color: rgba(196, 181, 253, 1);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(167, 139, 250, 0.30) inset;
}
.ht-spot.is-filled {
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.55);
  color: rgba(196, 181, 253, 1);
  box-shadow: inset 0 0 12px rgba(167, 139, 250, 0.10);
}
.ht-spot.is-filled:hover {
  background: rgba(167, 139, 250, 0.26);
  border-color: rgba(167, 139, 250, 0.85);
}
.ht-spot-num {
  font-size: 10px;
  letter-spacing: 0;
}
.ht-spot-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 1);
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.85);
}

/* ════════════════════════════════════════════════════════════════════════
   VIEW 3 — Spot detail (top-down + record + admin form)
════════════════════════════════════════════════════════════════════════ */
.ht-spot-detail {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  animation: ht-fade-in 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 900px) {
  .ht-spot-detail { grid-template-columns: 1fr; }
}

.ht-topdown {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 16, 42, 0.78) 0%, rgba(12, 9, 28, 0.88) 100%);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.ht-topdown-grid {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.ht-topdown-shelf {
  width: 200px;
  height: 200px;
  background:
    repeating-linear-gradient(45deg,
      rgba(167, 139, 250, 0.05) 0 6px,
      transparent 6px 14px),
    rgba(167, 139, 250, 0.04);
  border: 1.5px dashed rgba(167, 139, 250, 0.35);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  position: relative;
}
.ht-topdown-shelf.is-filled {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.22) 0%, rgba(139, 92, 246, 0.18) 100%);
  border: 2px solid rgba(167, 139, 250, 0.85);
  box-shadow:
    0 0 32px rgba(167, 139, 250, 0.22),
    inset 0 0 24px rgba(167, 139, 250, 0.10);
}
.ht-topdown-item-name {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 0 16px rgba(167, 139, 250, 0.45);
}
.ht-topdown-empty {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ht-topdown-coord {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.75);
}

.ht-detail-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.ht-item-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
}
.ht-item-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ht-item-row:last-child { border-bottom: none; }
.ht-item-row.ht-item-headline { padding-top: 0; }
.ht-item-lbl {
  flex-shrink: 0;
  width: 100px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ht-item-val {
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-word;
}
.ht-item-name { font-weight: 700; color: rgba(196, 181, 253, 1); font-size: 15px; }
.ht-item-notes-row, .ht-item-meta-row { align-items: flex-start; }
.ht-item-notes { white-space: pre-wrap; line-height: 1.45; }

.ht-item-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: var(--text-muted);
  text-align: center;
  font-size: 12px;
}
.ht-item-empty svg { color: var(--text-dim); }
.ht-item-empty-hint { font-size: 10.5px; color: var(--text-dim); }

/* ── Admin add/edit form ──────────────────────────────────────────────── */
.ht-admin-form {
  background: rgba(167, 139, 250, 0.05);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ht-form-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 1);
  margin-bottom: 2px;
}
.ht-form-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) {
  .ht-form-row { grid-template-columns: 1fr; }
}
.ht-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ht-field-full { width: 100%; }
.ht-field-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ht-field input,
.ht-field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
  resize: vertical;
}
.ht-field input:focus,
.ht-field textarea:focus {
  border-color: rgba(167, 139, 250, 0.65);
  background: rgba(167, 139, 250, 0.06);
}

.ht-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.ht-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ht-btn:disabled { opacity: 0.6; cursor: progress; }
.ht-btn:active { transform: scale(0.97); }
.ht-btn-primary {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.55);
  color: rgba(196, 181, 253, 1);
}
.ht-btn-primary:hover {
  background: rgba(167, 139, 250, 0.30);
  border-color: rgba(167, 139, 250, 0.85);
  color: #f5f3ff;
}
.ht-btn-danger {
  background: rgba(251, 113, 133, 0.10);
  border-color: rgba(251, 113, 133, 0.45);
  color: var(--accent-rose, #fb7185);
}
.ht-btn-danger:hover {
  background: rgba(251, 113, 133, 0.20);
  border-color: rgba(251, 113, 133, 0.75);
}

.ht-form-status {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: right;
  min-height: 14px;
}
.ht-form-status.is-ok  { color: rgba(196, 181, 253, 1); }
.ht-form-status.is-err { color: var(--accent-rose, #fb7185); }

@media (prefers-reduced-motion: reduce) {
  .ht-rack-card, .ht-rack-card:hover,
  .ht-rack-3dview, .ht-spot, .ht-spot:hover,
  .ht-wrap, .ht-spot-detail { animation: none; transition: none; transform: none; }
}

/* ── Light-theme overrides ───────────────────────────────────────────── */
html[data-theme="light"] .ht-rack-card {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.10) 0%, rgba(255, 255, 255, 0.65) 100%);
  border-color: rgba(124, 58, 237, 0.30);
}
html[data-theme="light"] .ht-rack-card:hover {
  border-color: rgba(124, 58, 237, 0.65);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(124, 58, 237, 0.20) inset,
              0 0 60px rgba(124, 58, 237, 0.16);
}
html[data-theme="light"] .ht-rack-face {
  background:
    repeating-linear-gradient(to bottom,
      rgba(124, 58, 237, 0.10) 0,
      rgba(124, 58, 237, 0.10) 1px,
      transparent 1px,
      transparent 14px),
    linear-gradient(180deg, rgba(245, 243, 255, 0.85) 0%, rgba(237, 233, 254, 0.92) 100%);
  border-color: rgba(124, 58, 237, 0.45);
}
html[data-theme="light"] .ht-rack-num,
html[data-theme="light"] .ht-rack-stat-num,
html[data-theme="light"] .ht-item-name,
html[data-theme="light"] .ht-topdown-coord,
html[data-theme="light"] .ht-form-title,
html[data-theme="light"] .ht-admin-pill,
html[data-theme="light"] .ht-sub strong { color: rgba(124, 58, 237, 1); text-shadow: none; }
html[data-theme="light"] .ht-back {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(30, 41, 59, 0.85);
}
html[data-theme="light"] .ht-back:hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.45);
  color: rgba(124, 58, 237, 1);
}
html[data-theme="light"] .ht-rack-3dview-shell,
html[data-theme="light"] .ht-topdown {
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.85) 0%, rgba(237, 233, 254, 0.92) 100%);
  border-color: rgba(124, 58, 237, 0.35);
}
html[data-theme="light"] .ht-spot {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(30, 41, 59, 0.55);
}
html[data-theme="light"] .ht-spot.is-filled {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.55);
  color: rgba(124, 58, 237, 1);
}
html[data-theme="light"] .ht-spot-dot { background: rgba(124, 58, 237, 1); box-shadow: 0 0 6px rgba(124, 58, 237, 0.85); }
html[data-theme="light"] .ht-item-card,
html[data-theme="light"] .ht-item-empty {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .ht-admin-form {
  background: rgba(124, 58, 237, 0.07);
  border-color: rgba(124, 58, 237, 0.40);
}
html[data-theme="light"] .ht-field input,
html[data-theme="light"] .ht-field textarea {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}
html[data-theme="light"] .ht-field input:focus,
html[data-theme="light"] .ht-field textarea:focus {
  border-color: rgba(124, 58, 237, 0.65);
  background: rgba(255, 255, 255, 1);
}
html[data-theme="light"] .ht-btn-primary {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.55);
  color: rgba(124, 58, 237, 1);
}
html[data-theme="light"] .ht-btn-primary:hover {
  background: rgba(124, 58, 237, 0.30);
  border-color: rgba(124, 58, 237, 0.85);
  color: #ffffff;
}

/* ── Three.js scene hosts ─────────────────────────────────────────────── */
/* Rack-view canvas: large block centered in the wrap. The canvas itself
   sizes itself via ResizeObserver inside home-tent-3d.js, but the host
   reserves the box so the layout doesn't jump on mount. */
/* No box, no border, no glass. The Three.js canvas sits directly on the
   page so the 3D feels seamless with the rest of the layout. The canvas
   itself is transparent (renderer.setClearColor 0,0) so the page bg shows
   through anywhere the geometry doesn't paint. */
.ht-3d-host {
  position: relative;
  width: 100%;
  height: min(64vh, 540px);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.ht-3d-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
}
.ht-3d-overlay {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 7px 14px;
  background: rgba(10, 7, 24, 0.85);
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 999px;
  color: rgba(196, 181, 253, 1);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.22s ease;
}
.ht-3d-overlay.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

.ht-3d-hint {
  margin-left: 8px;
  color: var(--text-dim);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: none;
}

/* Spot-view scene is smaller (square-ish) and overlays a coordinate chip. */
.ht-topdown.ht-3d-host {
  height: 100%;
  min-height: 340px;
  padding: 0;
}
.ht-topdown-coord-overlay {
  position: absolute;
  top: 14px;
  left: 16px;
  background: rgba(10, 7, 24, 0.85);
  padding: 5px 12px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

/* Optional flat 10×10 grid still reachable as a fallback. */
.ht-flat-grid {
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
}
.ht-flat-grid > summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
  padding: 4px 0;
}
.ht-flat-grid > summary::-webkit-details-marker { display: none; }
.ht-flat-grid > summary:hover { color: rgba(196, 181, 253, 1); }
.ht-flat-grid[open] > summary { margin-bottom: 10px; }
.ht-flat-grid .ht-spot-grid { padding: 4px 0; }

html[data-theme="light"] .ht-3d-host { background: transparent; box-shadow: none; }
html[data-theme="light"] .ht-3d-overlay,
html[data-theme="light"] .ht-topdown-coord-overlay {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.45);
  color: rgba(124, 58, 237, 1);
}

/* Landing scene is the primary view. The Quick-Add form lives in a modal
   now, so the canvas can reclaim its full height. */
.ht-3d-host-landing { height: min(68vh, 600px); }
.ht-3d-host-shelf   { height: min(60vh, 520px); }

/* ── Stage pills (replaces the free-form item-name input) ─────────────── */
.ht-stage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.ht-stage-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 80px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease,
              color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.ht-stage-pill:hover {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.45);
  color: rgba(196, 181, 253, 1);
  transform: translateY(-1px);
}
.ht-stage-pill:active { transform: scale(0.97); }
.ht-stage-pill.is-on {
  background: rgba(167, 139, 250, 0.20);
  border-color: rgba(167, 139, 250, 0.85);
  color: #f5f3ff;
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.30),
              inset 0 0 12px rgba(167, 139, 250, 0.18);
}

/* Two-column quantity + unit row */
.ht-form-row-2 { grid-template-columns: 1fr 1fr; }

/* Light mode */
html[data-theme="light"] .ht-stage-pill {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(30, 41, 59, 0.78);
}
html[data-theme="light"] .ht-stage-pill:hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.45);
  color: rgba(124, 58, 237, 1);
}
html[data-theme="light"] .ht-stage-pill.is-on {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.85);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.30),
              inset 0 0 12px rgba(124, 58, 237, 0.20);
}

@media (prefers-reduced-motion: reduce) {
  .ht-stage-pill, .ht-stage-pill:hover { transition: none; transform: none; }
}

/* ── Quick Add panel (admin-only on the racks landing) ────────────────── */
.ht-quick-add {
  margin-top: 20px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 14px;
  box-shadow: inset 0 0 50px rgba(167, 139, 250, 0.04);
  animation: ht-fade-in 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.ht-quick-add-hdr {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ht-quick-add-hdr .page-eyebrow {
  color: rgba(196, 181, 253, 1);
  margin: 0;
}
.ht-quick-add-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.ht-quick-add-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.2fr) minmax(120px, 0.8fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .ht-quick-add-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ht-quick-add-grid { grid-template-columns: 1fr; }
}
.ht-quick-add-grid .ht-field-full { grid-column: 1 / -1; }

/* Small selector pills (rack/shelf rows) — slimmer than the big stage pills */
.ht-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ht-mini-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease,
              color 0.16s ease, transform 0.16s ease;
}
.ht-mini-pill:hover {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.45);
  color: rgba(196, 181, 253, 1);
  transform: translateY(-1px);
}
.ht-mini-pill.is-on {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.75);
  color: #f5f3ff;
  box-shadow: inset 0 0 10px rgba(167, 139, 250, 0.18);
}

.ht-quick-add-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ht-quick-add-actions .ht-form-status { text-align: left; flex: 1 1 auto; }
.ht-quick-add-actions .ht-btn-primary { flex-shrink: 0; }

/* Light-mode overrides */
html[data-theme="light"] .ht-quick-add {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(124, 58, 237, 0.32);
  box-shadow: inset 0 0 50px rgba(124, 58, 237, 0.06);
}
html[data-theme="light"] .ht-quick-add-hdr .page-eyebrow,
html[data-theme="light"] .ht-quick-add-sub { color: rgba(124, 58, 237, 0.95); }
html[data-theme="light"] .ht-mini-pill {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(30, 41, 59, 0.78);
}
html[data-theme="light"] .ht-mini-pill:hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.45);
  color: rgba(124, 58, 237, 1);
}
html[data-theme="light"] .ht-mini-pill.is-on {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.85);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .ht-quick-add, .ht-mini-pill, .ht-mini-pill:hover {
    animation: none; transition: none; transform: none;
  }
}

/* ── Quick Add trigger button + modal ─────────────────────────────────── */
.ht-landing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 14px;
}
.ht-quick-add-trigger {
  padding: 10px 18px;
  font-size: 11px;
}
.ht-quick-add-trigger svg { color: currentColor; }
.ht-clear-all-trigger {
  padding: 10px 16px;
  font-size: 11px;
}
.ht-clear-all-trigger svg { color: currentColor; }
.ht-overview-trigger {
  padding: 10px 16px;
  font-size: 11px;
}
.ht-overview-trigger svg { color: currentColor; }

/* ──────────────────────────────────────────────────────────────────────
   Overview side panel — mirrors the harvest tab's calculator
   ────────────────────────────────────────────────────────────────────── */
.ht-overview {
  position: fixed;
  top: 132px;
  right: 24px;
  width: 400px;
  max-height: calc(100vh - 168px);
  flex-direction: column;
  background: rgba(8, 16, 24, 0.94);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(167, 139, 250, 0.08) inset,
    0 0 60px rgba(167, 139, 250, 0.12);
  padding: 18px 18px 16px;
  z-index: 90;
  /* Fully hidden from layout until explicitly opened — prevents the panel
     from leaking visible content if any ancestor breaks `position: fixed`
     (e.g. a transform on .ht-wrap during the fade-in animation). */
  display: none;
  opacity: 0;
  transform: translateX(calc(100% + 32px));
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
  pointer-events: none;
}
.ht-overview.is-open {
  display: flex;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.ht-overview-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.ht-overview-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.85);
  margin-bottom: 4px;
}
.ht-overview-title {
  font-family: var(--font-display, 'Bebas Neue', 'Space Grotesk', sans-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.05;
}
.ht-overview-close {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.ht-overview-close:hover {
  background: rgba(251, 113, 133, 0.10);
  border-color: rgba(251, 113, 133, 0.40);
  color: var(--accent-rose, #fb7185);
  transform: rotate(90deg);
}
.ht-overview-filter {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 999px;
  margin-bottom: 12px;
  align-self: flex-start;
}
.ht-overview-pill {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(186, 211, 232, 0.75);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.ht-overview-pill:hover { color: rgba(221, 214, 254, 1); }
.ht-overview-pill.is-on {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.55);
  color: rgba(245, 243, 255, 1);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.22);
}
.ht-overview-search {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(167, 139, 250, 0.20);
  border-radius: 10px;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  flex-shrink: 0;
  margin-bottom: 14px;
}
.ht-overview-search:focus {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(167, 139, 250, 0.05);
}
.ht-overview-search::placeholder { color: var(--text-dim); }

.ht-overview-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.45) transparent;
  padding-right: 4px;
  min-height: 0;
  flex: 1;
}
.ht-overview-body::-webkit-scrollbar { width: 6px; }
.ht-overview-body::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.35);
  border-radius: 3px;
}

/* Summary row — 3 stat cards */
.ht-overview-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.ht-overview-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid rgba(167, 139, 250, 0.18);
  border-radius: 10px;
}
.ht-overview-stat-lbl {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.80);
}
.ht-overview-stat-val {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1;
}

/* Section heading */
.ht-overview-section { margin-bottom: 18px; }
.ht-overview-sectitle {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.85);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.18);
}

/* Per-shelf bar list */
.ht-overview-shelves {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ht-overview-shelf-row {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  align-items: center;
  gap: 10px;
}
.ht-overview-shelf-lbl {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--text-dim);
}
.ht-overview-shelf-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  overflow: hidden;
}
.ht-overview-shelf-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.85), rgba(99, 102, 241, 0.85));
  border-radius: 3px;
  transition: width 0.32s var(--ease-out);
}
.ht-overview-shelf-val {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
}

/* Batch breakdown list */
.ht-overview-batches {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ht-overview-batch {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(167, 139, 250, 0.12);
  border-radius: 10px;
}
.ht-overview-batch-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ht-overview-batch-num {
  font-family: var(--font-display, sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.ht-overview-batch-stage {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253, 230, 138, 1);
}
/* Per-stage chips inside a batch row — BI #6 + AMIB #6 collapse into one
   row labeled "#6" with chips showing each stage's count. */
.ht-overview-batch-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.ht-overview-stage-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(167, 139, 250, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(253, 230, 138, 1);
}
.ht-overview-stage-chip em {
  font-style: normal;
  font-weight: 700;
  color: rgba(221, 214, 254, 1);
}
html[data-theme="light"] .ht-overview-stage-chip {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.32);
  color: rgba(180, 83, 9, 1);
}
html[data-theme="light"] .ht-overview-stage-chip em { color: rgba(91, 33, 182, 1); }
.ht-overview-batch-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ht-overview-batch-range {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(221, 214, 254, 1);
}
.ht-overview-batch-split {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.ht-overview-batch-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ht-overview-batch-count strong {
  font-family: var(--font-display, sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: rgba(167, 139, 250, 1);
  line-height: 1;
}
.ht-overview-batch-count span {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ht-overview-empty {
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(167, 139, 250, 0.20);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

/* Backdrop */
.ht-qa-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 20, 0.62);
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.ht-qa-backdrop.is-open { opacity: 1; }
.ht-qa-backdrop[hidden]  { display: none !important; }

/* Modal card */
.ht-qa-modal {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(12, 22, 18, 0.96) 0%, rgba(4, 14, 10, 0.98) 100%);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 16px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(167, 139, 250, 0.10),
    0 0 60px rgba(167, 139, 250, 0.10);
  padding: 22px 24px 18px;
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

/* Two-column layout — form on the left, recent-saves sidebar on the right.
   Collapses to single-column below 760px so the sidebar drops underneath. */
.ht-qa-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
}
.ht-qa-main { min-width: 0; }
@media (max-width: 760px) {
  .ht-qa-body { grid-template-columns: 1fr; }
}

/* Recent-saves sidebar */
.ht-qa-recent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(167, 139, 250, 0.18);
  background: rgba(167, 139, 250, 0.04);
  border-radius: 12px;
  max-height: 520px;
  min-height: 220px;
  overflow: hidden;
}
.ht-qa-recent-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.14);
}
.ht-qa-recent-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.95);
}
.ht-qa-recent-clear {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.ht-qa-recent-clear:hover {
  background: rgba(251, 113, 133, 0.10);
  border-color: rgba(251, 113, 133, 0.40);
  color: rgba(251, 113, 133, 1);
}
.ht-qa-recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.35) transparent;
}
.ht-qa-recent-list::-webkit-scrollbar { width: 5px; }
.ht-qa-recent-list::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.30);
  border-radius: 3px;
}
.ht-qa-recent-item {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.ht-qa-recent-item:hover {
  background: rgba(167, 139, 250, 0.06);
  border-color: rgba(167, 139, 250, 0.22);
  transform: translateY(-1px);
}
.ht-qa-recent-item.is-newest {
  background: rgba(167, 139, 250, 0.10);
  border-color: rgba(167, 139, 250, 0.40);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.15), 0 6px 18px rgba(167, 139, 250, 0.12);
  animation: ht-qa-recent-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ht-qa-recent-pop {
  0%   { transform: translateX(8px); opacity: 0.6; }
  100% { transform: translateX(0);   opacity: 1; }
}
.ht-qa-recent-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.ht-qa-recent-stage {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(221, 214, 254, 1);
}
.ht-qa-recent-batch {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1;
}
.ht-qa-recent-qty {
  margin-left: auto;
  padding: 2px 7px;
  background: rgba(167, 139, 250, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(196, 181, 253, 1);
}
.ht-qa-recent-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.ht-qa-recent-where { font-weight: 600; }
.ht-qa-recent-when  { opacity: 0.85; }
.ht-qa-recent-ids {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 9.5px;
  color: rgba(196, 181, 253, 0.75);
  letter-spacing: 0.02em;
}
.ht-qa-recent-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 12px;
  color: var(--text-muted);
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
}
.ht-qa-recent-empty svg { opacity: 0.35; margin-bottom: 4px; }
.ht-qa-recent-empty-sub { font-size: 10px; opacity: 0.7; }

/* Light-mode overrides for the sidebar */
html[data-theme="light"] .ht-qa-recent {
  background: rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.20);
}
html[data-theme="light"] .ht-qa-recent-hdr {
  border-bottom-color: rgba(124, 58, 237, 0.18);
}
html[data-theme="light"] .ht-qa-recent-title { color: rgba(91, 33, 182, 1); }
html[data-theme="light"] .ht-qa-recent-item {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(124, 58, 237, 0.12);
}
html[data-theme="light"] .ht-qa-recent-item:hover {
  background: rgba(124, 58, 237, 0.07);
  border-color: rgba(124, 58, 237, 0.30);
}
html[data-theme="light"] .ht-qa-recent-item.is-newest {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.45);
}
html[data-theme="light"] .ht-qa-recent-stage { color: rgba(91, 33, 182, 1); }
html[data-theme="light"] .ht-qa-recent-qty {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.30);
  color: rgba(91, 33, 182, 1);
}
html[data-theme="light"] .ht-qa-recent-ids {
  color: rgba(91, 33, 182, 0.75);
  border-top-color: rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .ht-qa-recent-item.is-newest { animation: none; }
  .ht-qa-recent-item:hover     { transform: none; }
}
.ht-qa-backdrop.is-open .ht-qa-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.ht-qa-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.ht-qa-title {
  margin: 6px 0 4px;
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1;
}
.ht-qa-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.ht-qa-close {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.ht-qa-close:hover {
  background: rgba(251, 113, 133, 0.10);
  border-color: rgba(251, 113, 133, 0.40);
  color: var(--accent-rose, #fb7185);
  transform: rotate(90deg);
}

.ht-qa-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ht-qa-actions .ht-form-status { text-align: left; flex: 1 1 auto; }
.ht-qa-actions .ht-btn-primary { flex-shrink: 0; }

/* "Keep open" batch-mode toggle — small pill next to the Save button.
   Hidden native checkbox; the pill is the clickable surface. */
.ht-qa-batchmode {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.ht-qa-batchmode input { position: absolute; opacity: 0; pointer-events: none; }
.ht-qa-batchmode-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.04);
  color: rgba(196, 181, 253, 0.85);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.ht-qa-batchmode-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.40);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.55);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}
.ht-qa-batchmode:hover .ht-qa-batchmode-pill {
  border-color: rgba(167, 139, 250, 0.55);
  color: rgba(221, 214, 254, 1);
}
.ht-qa-batchmode input:checked + .ht-qa-batchmode-pill {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.75);
  color: rgba(245, 243, 255, 1);
  box-shadow: 0 0 16px rgba(167, 139, 250, 0.25);
}
.ht-qa-batchmode input:checked + .ht-qa-batchmode-pill .ht-qa-batchmode-dot {
  background: rgba(167, 139, 250, 1);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.80);
}
.ht-qa-batchmode input:focus-visible + .ht-qa-batchmode-pill {
  outline: 2px solid rgba(167, 139, 250, 0.75);
  outline-offset: 2px;
}

/* Light mode */
html[data-theme="light"] .ht-qa-backdrop {
  background: rgba(180, 200, 220, 0.55);
}
html[data-theme="light"] .ht-qa-modal {
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.98) 0%, rgba(237, 233, 254, 0.98) 100%);
  border-color: rgba(124, 58, 237, 0.40);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.20),
    inset 0 0 0 1px rgba(124, 58, 237, 0.10),
    0 0 60px rgba(124, 58, 237, 0.10);
}
html[data-theme="light"] .ht-qa-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  .ht-qa-backdrop, .ht-qa-modal, .ht-qa-close { transition: none; transform: none; }
}

/* ── Quick Add v2: streamlined, big-number layout ─────────────────────── */

/* Live preview strip — shows the destination + payload at a glance */
.ht-qa-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.10) 0%, rgba(124, 58, 237, 0.06) 100%);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 12px;
  font-family: var(--font-body);
}
.ht-qa-preview-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ht-qa-preview-coord {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.18s ease;
}
.ht-qa-preview-coord.is-ready { color: rgba(196, 181, 253, 1); }
.ht-qa-preview-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}
.ht-qa-preview-payload {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: color 0.18s ease;
  flex: 1 1 auto;
  min-width: 0;
}
.ht-qa-preview-payload.is-ready { color: var(--text-primary); }

/* Two-column rack + shelf row */
.ht-qa-row {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 16px;
  margin-bottom: 14px;
  align-items: end;
}
@media (max-width: 640px) {
  .ht-qa-row { grid-template-columns: 1fr; }
}

/* Segmented control — neighbour pills, shared border like a real
   segmented button. Replaces the old mini-pill row in the quick add only. */
.ht-seg {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 3px;
  margin-top: 4px;
  gap: 2px;
}
.ht-segpill {
  background: transparent;
  border: none;
  padding: 7px 14px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}
.ht-segpill:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.ht-segpill.is-on {
  background: rgba(167, 139, 250, 0.22);
  color: #f5f3ff;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.45),
              0 2px 12px rgba(167, 139, 250, 0.20);
}

/* The two big number inputs that drive everything */
.ht-qa-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 14px;
}
/* Auto-place variant: chip on the left, qty on the right. */
.ht-qa-numbers-auto { grid-template-columns: 1.15fr 1fr; }
.ht-qa-autochip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 12px;
  background: linear-gradient(160deg, rgba(167, 139, 250, 0.10), rgba(99, 102, 241, 0.04));
  border: 1px dashed rgba(167, 139, 250, 0.38);
  border-radius: 12px;
  position: relative;
}
.ht-qa-autochip-lbl {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 1);
}
.ht-qa-autochip-val {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1;
}
.ht-qa-autochip-hint {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ht-qa-num {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 12px;
  background: rgba(167, 139, 250, 0.05);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 12px;
  position: relative;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.ht-qa-num:focus-within {
  border-color: rgba(167, 139, 250, 0.85);
  background: rgba(167, 139, 250, 0.10);
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.20);
}
.ht-qa-num-lbl {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 1);
}
.ht-qa-num input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1;
  padding: 0;
  text-align: left;
}
.ht-qa-num input::placeholder {
  color: rgba(255, 255, 255, 0.18);
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
}
.ht-qa-num input::-webkit-outer-spin-button,
.ht-qa-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ht-qa-num input { -moz-appearance: textfield; }
.ht-qa-num-hint {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: absolute;
  top: 14px;
  right: 16px;
}

/* Collapsible "Optional details" panel */
.ht-qa-extras {
  margin: 4px 0 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.ht-qa-extras > summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  list-style: none;
  padding: 2px 0;
}
.ht-qa-extras > summary::-webkit-details-marker { display: none; }
.ht-qa-extras > summary::before {
  content: '+';
  display: inline-block;
  margin-right: 8px;
  color: rgba(196, 181, 253, 1);
  font-weight: 700;
  transition: transform 0.18s ease;
}
.ht-qa-extras[open] > summary::before { content: '–'; }
.ht-qa-extras[open] > summary { margin-bottom: 10px; }
.ht-qa-extras-row {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .ht-qa-extras-row { grid-template-columns: 1fr; }
}

/* Save button — emphasis + keyboard hint */
.ht-qa-save kbd,
.ht-qa-sub kbd {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: 1px;
}
.ht-qa-save kbd { background: rgba(0, 0, 0, 0.30); border-color: rgba(0, 0, 0, 0.40); color: rgba(255, 255, 255, 0.85); }

/* Light-mode overrides for the new bits */
html[data-theme="light"] .ht-qa-preview {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(167, 139, 250, 0.06) 100%);
  border-color: rgba(124, 58, 237, 0.30);
}
html[data-theme="light"] .ht-qa-preview-coord.is-ready { color: rgba(124, 58, 237, 1); }
html[data-theme="light"] .ht-seg {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
}
html[data-theme="light"] .ht-segpill { color: rgba(30, 41, 59, 0.65); }
html[data-theme="light"] .ht-segpill:hover { color: #0f172a; background: rgba(0, 0, 0, 0.05); }
html[data-theme="light"] .ht-segpill.is-on {
  background: rgba(124, 58, 237, 0.18);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.55),
              0 2px 12px rgba(124, 58, 237, 0.20);
}
html[data-theme="light"] .ht-qa-num {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.25);
}
html[data-theme="light"] .ht-qa-num:focus-within {
  border-color: rgba(124, 58, 237, 0.85);
  background: rgba(124, 58, 237, 0.10);
}
html[data-theme="light"] .ht-qa-num-lbl { color: rgba(124, 58, 237, 1); }
html[data-theme="light"] .ht-qa-num input { color: #0f172a; }
html[data-theme="light"] .ht-qa-num input::placeholder { color: rgba(30, 41, 59, 0.25); }

@media (prefers-reduced-motion: reduce) {
  .ht-qa-preview-coord, .ht-qa-preview-payload, .ht-qa-num, .ht-segpill { transition: none; }
}

/* ── Quick Add v3 — focused destination chip ──────────────────────────── */
/* Replaces the live-preview strip. By default the rack/shelf/stage
   selectors are collapsed under this chip so the user only sees the
   number inputs while batch-entering duplicates. */
.ht-qa-dest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 16px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.10) 0%, rgba(124, 58, 237, 0.04) 100%);
  border: 1px solid rgba(167, 139, 250, 0.32);
  border-radius: 12px;
  font-family: var(--font-body);
}
.ht-qa-dest-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ht-qa-dest-chip {
  flex: 1 1 auto;
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  line-height: 1;
  transition: color 0.18s ease;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ht-qa-dest-chip.is-ready { color: rgba(196, 181, 253, 1); }
.ht-qa-dest-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 1);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  flex-shrink: 0;
}
.ht-qa-dest-edit:hover {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.70);
  color: #f5f3ff;
}

/* Collapsible destination editor — drops down with rack/shelf/stage */
.ht-qa-dest-editor {
  display: block;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  animation: ht-qa-expand 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.ht-qa-dest-editor[hidden] { display: none !important; }
@keyframes ht-qa-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ht-qa-dest-editor .ht-qa-row { margin-bottom: 10px; }
.ht-qa-dest-editor > .ht-field-full { margin-top: 6px; }

/* Light mode */
html[data-theme="light"] .ht-qa-dest {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(167, 139, 250, 0.04) 100%);
  border-color: rgba(124, 58, 237, 0.30);
}
html[data-theme="light"] .ht-qa-dest-chip.is-ready { color: rgba(124, 58, 237, 1); }
html[data-theme="light"] .ht-qa-dest-edit {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(124, 58, 237, 0.40);
  color: rgba(124, 58, 237, 1);
}
html[data-theme="light"] .ht-qa-dest-edit:hover {
  background: rgba(124, 58, 237, 0.14);
  color: #ffffff;
}
html[data-theme="light"] .ht-qa-dest-editor {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Hide the old preview if it's still in the DOM from a stale cache */
.ht-qa-preview { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ht-qa-dest-editor { animation: none; }
}

/* ── Storage indicator badge ──────────────────────────────────────────── */
.ht-qa-storage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin: 0 0 14px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  flex-wrap: wrap;
  position: relative;
}
.ht-qa-storage[data-mode="cloud"] {
  background: rgba(52, 211, 153, 0.08);
  border-color: rgba(52, 211, 153, 0.35);
  color: rgba(167, 243, 208, 1);
}
.ht-qa-storage[data-mode="local"],
.ht-qa-storage[data-mode="pending"] {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.35);
  color: rgba(252, 211, 77, 1);
}
.ht-qa-storage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ht-qa-storage[data-mode="cloud"]   .ht-qa-storage-dot {
  background: rgba(52, 211, 153, 1);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
  animation: ht-qa-pulse-ok 2.5s ease-in-out infinite;
}
.ht-qa-storage[data-mode="local"]   .ht-qa-storage-dot,
.ht-qa-storage[data-mode="pending"] .ht-qa-storage-dot {
  background: rgba(251, 191, 36, 1);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
@keyframes ht-qa-pulse-ok {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.ht-qa-storage-text { flex: 1 1 auto; min-width: 0; }
.ht-qa-storage-text strong { font-weight: 700; }
.ht-qa-storage-info {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}
.ht-qa-storage-info:hover { opacity: 1; }

.ht-qa-storage-help {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0;
}
.ht-qa-storage-help[hidden] { display: none !important; }
.ht-qa-storage-help strong { color: var(--text-primary); display: block; margin-bottom: 4px; }
.ht-qa-storage-help code {
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
}
.ht-qa-storage-help pre {
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.40);
  border: 1px solid rgba(167, 139, 250, 0.30);
  border-radius: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: rgba(196, 181, 253, 1);
  overflow-x: auto;
  white-space: pre;
}

/* Light mode */
html[data-theme="light"] .ht-qa-storage[data-mode="cloud"] {
  background: rgba(13, 148, 136, 0.08);
  border-color: rgba(13, 148, 136, 0.35);
  color: rgba(15, 118, 110, 1);
}
html[data-theme="light"] .ht-qa-storage[data-mode="local"],
html[data-theme="light"] .ht-qa-storage[data-mode="pending"] {
  background: rgba(202, 138, 4, 0.10);
  border-color: rgba(202, 138, 4, 0.40);
  color: rgba(133, 77, 14, 1);
}
html[data-theme="light"] .ht-qa-storage[data-mode="cloud"] .ht-qa-storage-dot {
  background: rgba(13, 148, 136, 1);
}
html[data-theme="light"] .ht-qa-storage-help {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(30, 41, 59, 0.85);
}
html[data-theme="light"] .ht-qa-storage-help strong { color: #0f172a; }
html[data-theme="light"] .ht-qa-storage-help code {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
}
html[data-theme="light"] .ht-qa-storage-help pre {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(124, 58, 237, 0.30);
  color: rgba(124, 58, 237, 1);
}

/* ── Shelf-view bulk-action bar ────────────────────────────────────────────
   Appears centred at the viewport bottom once one or more spots have been
   Ctrl/Cmd-clicked on the shelf bird's-eye view. Mirrors the rooms-tab
   pattern but tinted purple to match the home-tent accent. */
.ht-bulk-bar {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9100;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(8, 16, 24, 0.96);
  border: 1px solid rgba(167, 139, 250, 0.55);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 28px rgba(167, 139, 250, 0.22);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  animation: ht-bulk-bar-rise 0.2s var(--ease-out, ease-out);
}
@keyframes ht-bulk-bar-rise {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.ht-bulk-count {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(167, 139, 250, 0.95);
  padding: 0 4px 0 6px;
}
.ht-bulk-btn {
  background: rgba(167, 139, 250, 0.10);
  border: 1px solid rgba(167, 139, 250, 0.35);
  color: rgba(196, 181, 253, 0.95);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer; outline: none;
  transition: all 0.16s ease;
}
.ht-bulk-btn:hover {
  background: rgba(167, 139, 250, 0.22);
  border-color: rgba(167, 139, 250, 0.65);
  transform: translateY(-1px);
}
.ht-bulk-btn-danger {
  background: rgba(251, 113, 133, 0.10);
  border-color: rgba(251, 113, 133, 0.40);
  color: rgba(251, 113, 133, 0.95);
}
.ht-bulk-btn-danger:hover {
  background: rgba(251, 113, 133, 0.22);
  border-color: rgba(251, 113, 133, 0.65);
}
.ht-bulk-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.65);
}
.ht-bulk-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.95);
}

/* Unit-ID chips shown in the spot detail view when a single spot holds
   multiple units (qty > 1). Each chip is the lettered sub-ID — 63a, 63b,
   63c, etc. — derived from the spot number + the unit's index. */
.ht-item-ids-row .ht-item-val {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ht-item-id-chip {
  font-family: 'Press Start 2P', var(--font-body), monospace;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: rgba(196, 181, 253, 0.98);
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.40);
  padding: 5px 8px 4px;
  border-radius: 6px;
  line-height: 1;
  user-select: text;
}

/* Highlight the CURRENT unit's chip inside the sibling list on the spot
   detail view — so when you drill into 63c, the chip [63c] is brighter
   than its 63a, 63b, 63d, 63e, 63f siblings. */
.ht-item-id-chip.is-self {
  background: rgba(167, 139, 250, 0.32);
  border-color: rgba(196, 181, 253, 0.95);
  color: #fff;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.45);
}

/* ──────────────────────────────────────────────────────────────────────
   Light-theme overrides for the parts the original light pass missed
   (overview panel, sort toggle, batch-mode toggle, bulk bar, action
   buttons, batch-id chips). Without these the dark glass + dim text
   reads as illegible black-on-light blocks in light mode.
   ────────────────────────────────────────────────────────────────────── */

/* Landing action buttons (overview / clear-all triggers + ghost btn) */
html[data-theme="light"] .ht-btn-ghost,
html[data-theme="light"] .ht-overview-trigger {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.30);
  color: rgba(124, 58, 237, 1);
}
html[data-theme="light"] .ht-btn-ghost:hover,
html[data-theme="light"] .ht-overview-trigger:hover {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.55);
  color: rgba(91, 33, 182, 1);
}
html[data-theme="light"] .ht-btn-danger,
html[data-theme="light"] .ht-clear-all-trigger {
  background: rgba(244, 63, 94, 0.10);
  border-color: rgba(244, 63, 94, 0.45);
  color: rgba(190, 18, 60, 1);
}
html[data-theme="light"] .ht-btn-danger:hover,
html[data-theme="light"] .ht-clear-all-trigger:hover {
  background: rgba(244, 63, 94, 0.22);
  border-color: rgba(244, 63, 94, 0.75);
  color: #ffffff;
}

/* Sort toggle (shelf view header) */
html[data-theme="light"] .ht-sort-toggle {
  background: rgba(124, 58, 237, 0.04);
  border-color: rgba(124, 58, 237, 0.25);
}
html[data-theme="light"] .ht-sort-toggle-lbl { color: rgba(124, 58, 237, 0.85); }
html[data-theme="light"] .ht-sort-pill { color: rgba(71, 85, 105, 0.85); }
html[data-theme="light"] .ht-sort-pill:hover {
  background: rgba(124, 58, 237, 0.10);
  color: rgba(91, 33, 182, 1);
}
html[data-theme="light"] .ht-sort-pill.is-on {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.55);
  color: rgba(91, 33, 182, 1);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.18);
}

/* Quick-add modal: batch-mode "Keep open" toggle */
html[data-theme="light"] .ht-qa-batchmode-pill {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.35);
  color: rgba(91, 33, 182, 1);
}
html[data-theme="light"] .ht-qa-batchmode-dot {
  background: rgba(124, 58, 237, 0.40);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.55);
}
html[data-theme="light"] .ht-qa-batchmode:hover .ht-qa-batchmode-pill {
  border-color: rgba(124, 58, 237, 0.60);
  color: rgba(76, 29, 149, 1);
}
html[data-theme="light"] .ht-qa-batchmode input:checked + .ht-qa-batchmode-pill {
  background: rgba(124, 58, 237, 0.20);
  border-color: rgba(124, 58, 237, 0.75);
  color: rgba(76, 29, 149, 1);
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.22);
}
html[data-theme="light"] .ht-qa-batchmode input:checked + .ht-qa-batchmode-pill .ht-qa-batchmode-dot {
  background: rgba(124, 58, 237, 1);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.85);
}

/* Bulk action bar (shelf multi-select) */
html[data-theme="light"] .ht-bulk-bar {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.45);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(124, 58, 237, 0.10) inset;
  color: #1e293b;
}
html[data-theme="light"] .ht-bulk-count { color: rgba(91, 33, 182, 1); }
html[data-theme="light"] .ht-bulk-btn {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.35);
  color: rgba(91, 33, 182, 1);
}
html[data-theme="light"] .ht-bulk-btn:hover {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.70);
  color: #ffffff;
}
html[data-theme="light"] .ht-bulk-btn-danger {
  background: rgba(244, 63, 94, 0.10);
  border-color: rgba(244, 63, 94, 0.40);
  color: rgba(190, 18, 60, 1);
}
html[data-theme="light"] .ht-bulk-btn-danger:hover {
  background: rgba(244, 63, 94, 0.25);
  border-color: rgba(244, 63, 94, 0.75);
  color: #ffffff;
}
html[data-theme="light"] .ht-bulk-btn-ghost {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(71, 85, 105, 0.85);
}

/* Item-id sibling chips on the spot-detail view */
html[data-theme="light"] .ht-item-id-chip {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.35);
  color: rgba(91, 33, 182, 1);
}
html[data-theme="light"] .ht-item-id-chip.is-self {
  background: rgba(124, 58, 237, 0.28);
  border-color: rgba(124, 58, 237, 0.85);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.30);
}

/* ── Overview side panel ─────────────────────────────────────────────── */
html[data-theme="light"] .ht-overview {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(124, 58, 237, 0.40);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(124, 58, 237, 0.10) inset,
    0 0 60px rgba(124, 58, 237, 0.10);
}
html[data-theme="light"] .ht-overview-eyebrow { color: rgba(124, 58, 237, 0.85); }
html[data-theme="light"] .ht-overview-title    { color: #0f172a; }
html[data-theme="light"] .ht-overview-close {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(71, 85, 105, 0.85);
}
html[data-theme="light"] .ht-overview-close:hover {
  background: rgba(244, 63, 94, 0.10);
  border-color: rgba(244, 63, 94, 0.40);
  color: rgba(190, 18, 60, 1);
}
html[data-theme="light"] .ht-overview-filter {
  background: rgba(124, 58, 237, 0.04);
  border-color: rgba(124, 58, 237, 0.20);
}
html[data-theme="light"] .ht-overview-pill { color: rgba(71, 85, 105, 0.85); }
html[data-theme="light"] .ht-overview-pill:hover { color: rgba(91, 33, 182, 1); }
html[data-theme="light"] .ht-overview-pill.is-on {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.55);
  color: rgba(91, 33, 182, 1);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.18);
}
html[data-theme="light"] .ht-overview-search {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(124, 58, 237, 0.25);
  color: #0f172a;
}
html[data-theme="light"] .ht-overview-search:focus {
  border-color: rgba(124, 58, 237, 0.65);
  background: #ffffff;
}
html[data-theme="light"] .ht-overview-search::placeholder { color: rgba(30, 41, 59, 0.35); }
html[data-theme="light"] .ht-overview-stat {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.22);
}
html[data-theme="light"] .ht-overview-stat-lbl { color: rgba(124, 58, 237, 0.85); }
html[data-theme="light"] .ht-overview-stat-val { color: #0f172a; }
html[data-theme="light"] .ht-overview-sectitle {
  color: rgba(124, 58, 237, 0.85);
  border-bottom-color: rgba(124, 58, 237, 0.18);
}
html[data-theme="light"] .ht-overview-shelf-lbl { color: rgba(71, 85, 105, 0.85); }
html[data-theme="light"] .ht-overview-shelf-bar { background: rgba(0, 0, 0, 0.06); }
html[data-theme="light"] .ht-overview-shelf-fill {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.85), rgba(91, 33, 182, 0.85));
}
html[data-theme="light"] .ht-overview-shelf-val { color: #1e293b; }
html[data-theme="light"] .ht-overview-batch {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(124, 58, 237, 0.22);
}
html[data-theme="light"] .ht-overview-batch-num { color: #0f172a; }
html[data-theme="light"] .ht-overview-batch-stage { color: rgba(180, 83, 9, 1); }
html[data-theme="light"] .ht-overview-batch-range { color: rgba(91, 33, 182, 1); }
html[data-theme="light"] .ht-overview-batch-split { color: rgba(71, 85, 105, 0.85); }
html[data-theme="light"] .ht-overview-batch-count strong { color: rgba(124, 58, 237, 1); }
html[data-theme="light"] .ht-overview-batch-count span { color: rgba(71, 85, 105, 0.85); }
html[data-theme="light"] .ht-overview-empty {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(124, 58, 237, 0.22);
  color: rgba(71, 85, 105, 0.85);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT-THEME GAPS — surfaces the earlier light passes left on dark values.
   These are dark glass fills / white-tint glass / white borders / near-white
   text / bright violet accents that read as illegible black-on-white or
   invisible-on-white in light mode. Dark mode is untouched (all scoped under
   html[data-theme="light"]). Palette: void bg → frosted white glass; violet
   text → purple #7c3aed / #5b21b6; white borders → rgba(130,100,200,0.18).
   ══════════════════════════════════════════════════════════════════════════ */

/* Sub-line strong + rack labels/nums already covered above; add the rack bar
   track (was white rgba(255,255,255,0.06) → near-invisible on white). */
html[data-theme="light"] .ht-rack-bar { background: rgba(130, 100, 200, 0.14); }
html[data-theme="light"] .ht-rack-face-top { border-color: rgba(124, 58, 237, 0.28); }
html[data-theme="light"] .ht-rack-face-side { border-color: rgba(124, 58, 237, 0.20); }

/* Spot grid cell number chip (was --text-dim; keep readable) + spot-grid
   fallback container had no fill override. */
html[data-theme="light"] .ht-spot-num { color: rgba(30, 41, 59, 0.55); }

/* Detail record rows — white hairline separators vanished on white. */
html[data-theme="light"] .ht-item-row { border-bottom-color: rgba(130, 100, 200, 0.16); }

/* Top-down shelf tile (empty + filled) — the empty state used a violet-wash
   dashed border on a dark page; the filled headline text was near-white. */
html[data-theme="light"] .ht-topdown-shelf {
  background:
    repeating-linear-gradient(45deg,
      rgba(124, 58, 237, 0.06) 0 6px,
      transparent 6px 14px),
    rgba(124, 58, 237, 0.05);
  border-color: rgba(124, 58, 237, 0.40);
}
html[data-theme="light"] .ht-topdown-shelf.is-filled {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(91, 33, 182, 0.14) 100%);
  border-color: rgba(124, 58, 237, 0.70);
  box-shadow:
    0 0 32px rgba(124, 58, 237, 0.16),
    inset 0 0 24px rgba(124, 58, 237, 0.08);
}
html[data-theme="light"] .ht-topdown-item-name {
  color: #5b21b6;
  text-shadow: none;
}

/* Flat-grid fallback (details) — white glass fill + white border + violet
   hover on the summary. */
html[data-theme="light"] .ht-flat-grid {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(130, 100, 200, 0.18);
}
html[data-theme="light"] .ht-flat-grid > summary:hover { color: rgba(124, 58, 237, 1); }

/* Quick-Add: auto-place chip (violet dashed) + its violet labels. */
html[data-theme="light"] .ht-qa-autochip {
  background: linear-gradient(160deg, rgba(124, 58, 237, 0.10), rgba(99, 102, 241, 0.04));
  border-color: rgba(124, 58, 237, 0.38);
}
html[data-theme="light"] .ht-qa-autochip-lbl { color: rgba(124, 58, 237, 1); }
html[data-theme="light"] .ht-qa-autochip-val { color: #0f172a; }

/* Quick-Add: "Optional details" collapsible — white glass + white border +
   violet marker. */
html[data-theme="light"] .ht-qa-extras {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(130, 100, 200, 0.18);
}
html[data-theme="light"] .ht-qa-extras > summary::before { color: rgba(124, 58, 237, 1); }

/* Quick-Add: number-input placeholder was pure-white ghost (0.18) → dark. */
html[data-theme="light"] .ht-qa-num input::placeholder { color: rgba(30, 41, 59, 0.25); }

/* Quick-Add recent-saves: batch label + IDs used near-white / violet text. */
html[data-theme="light"] .ht-qa-recent-batch { color: #0f172a; }

/* Storage badge dots — the amber (local/pending) dot stays amber but darken
   to the light-mode amber so it matches the darkened text/border above. */
html[data-theme="light"] .ht-qa-storage[data-mode="local"] .ht-qa-storage-dot,
html[data-theme="light"] .ht-qa-storage[data-mode="pending"] .ht-qa-storage-dot {
  background: rgba(202, 138, 4, 1);
  box-shadow: 0 0 8px rgba(202, 138, 4, 0.5);
}

/* Save-button keyboard hint <kbd> — dark pill on a light modal reads fine as
   a "key cap", but the generic .ht-qa-sub kbd used a white-glass fill that
   disappears on white. */
html[data-theme="light"] .ht-qa-sub kbd {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.22);
  color: rgba(91, 33, 182, 1);
}

/* Overview batch STAGE chip container border already themed; the empty-state
   dashed border on the overview batches list. (ht-overview-empty covered.) */