/* Sample Tracker v2 */

/* Fixture type color palette */
:root {
  --st-type-pendant: hsl(220, 55%, 58%);
  --st-type-downlight: hsl(35, 55%, 55%);
  --st-type-sconce: hsl(160, 45%, 48%);
  --st-type-linear: hsl(100, 45%, 48%);
  --st-type-track: hsl(280, 45%, 55%);
  --st-type-flood: hsl(0, 50%, 55%);
  --st-type-spot: hsl(45, 55%, 52%);
  --st-type-bollard: hsl(190, 45%, 48%);
  --st-type-power: hsl(60, 35%, 50%);
  --st-type-other: hsl(0, 0%, 52%);
}
[data-theme="light"] {
  --st-type-pendant: hsl(220, 55%, 45%);
  --st-type-downlight: hsl(35, 55%, 42%);
  --st-type-sconce: hsl(160, 50%, 38%);
  --st-type-linear: hsl(100, 50%, 38%);
  --st-type-track: hsl(280, 45%, 45%);
  --st-type-flood: hsl(0, 50%, 45%);
  --st-type-spot: hsl(45, 55%, 42%);
  --st-type-bollard: hsl(190, 50%, 38%);
  --st-type-power: hsl(60, 35%, 40%);
  --st-type-other: hsl(0, 0%, 42%);
}

/* Layout shell */
.st-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
  position: relative;
}

/* Tab bar */
.st-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.st-tab {
  padding: 6px 14px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: color var(--transition-speed), background var(--transition-speed);
}

.st-tab:hover { color: var(--text-primary); background: var(--panel); }
.st-tab.active { color: var(--text-primary); background: var(--panel); }
.st-tab-spacer { flex: 1; }

/* Scan button */
.st-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
}
.st-scan-btn svg {
  flex-shrink: 0;
}

/* Watch banner */
.st-watch-banner {
  background: rgba(72, 187, 120, 0.12);
  border: 1px solid rgba(72, 187, 120, 0.25);
  border-radius: var(--button-radius);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-primary);
}
.st-watch-banner-text { flex: 1; }
.st-watch-banner .st-fid { color: var(--success); }

/* My Samples bar -- pinned top of the samples list, shows current checkouts as
   a photo-forward horizontal card rail with a collapsible toggle. */
.st-my-bar {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: 10px 14px;
}
.st-my-bar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.st-my-bar.collapsed .st-my-bar-header { margin-bottom: 0; }
.st-my-bar-toggle {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
}
.st-my-bar-toggle:hover { background: var(--row-hover); color: var(--text-primary); }
.st-my-bar.collapsed .st-my-bar-toggle { transform: rotate(-90deg); }
.st-my-bar-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.st-my-bar-count {
  padding: 0 6px;
  min-width: 20px;
  height: 18px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: var(--panel-2);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-my-bar-summary {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 9px;
}
.st-my-bar-summary.tone-warning {
  background: var(--warning-soft);
  color: var(--warning);
}
.st-my-bar-return-all { margin-left: auto; }

.st-my-bar-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.st-my-bar.collapsed .st-my-bar-cards { display: none; }

.st-my-card {
  flex: 0 0 auto;
  width: 240px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--transition-speed), background var(--transition-speed);
}
.st-my-card:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
}
.st-my-card.stale {
  background: var(--warning-soft);
  border-color: var(--warning);
}
.st-my-card.stale:hover {
  background: var(--warning);
  border-color: var(--warning);
  color: var(--panel);
}
.st-my-card-photo {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-my-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.st-my-card-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 2px var(--panel);
}
.st-my-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-my-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.st-my-card-id {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-weight: 600;
  color: var(--accent);
}
.st-my-card:hover .st-my-card-id,
.st-my-card:hover .st-my-card-dur { color: var(--panel); }
.st-my-card.stale .st-my-card-id { color: var(--warning); }
.st-my-card.stale:hover .st-my-card-id { color: var(--panel); }
.st-my-card-dur {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.st-my-card.stale .st-my-card-dur { color: var(--warning); font-weight: 600; }
.st-my-card-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-my-card:hover .st-my-card-name { color: var(--panel); }
.st-my-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.st-my-card-return,
.st-my-card-refresh {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-speed), color var(--transition-speed);
}
.st-my-card-return:hover { color: var(--error); background: var(--error-soft); }
.st-my-card-refresh:hover { color: var(--warning); background: var(--warning-soft); }
.st-my-card:hover .st-my-card-return,
.st-my-card:hover .st-my-card-refresh { color: var(--panel); }

/* Compact status segment -- sits in the result bar alongside Group By.
   Visual shares the ghost-button / divider pattern with .st-group-by so
   the two controls read as distinct zones separated by 1px rules. */
.st-result-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.st-result-seg-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-right: 2px;
}
/* Ghost button: no chrome when idle, subtle hover bg, filled when active.
   Halves the visual weight of nine buttons queued up in the result bar. */
.st-result-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--transition-speed), background var(--transition-speed), color var(--transition-speed);
}
.st-result-seg-btn:hover {
  background: var(--row-hover);
  color: var(--text-primary);
}
.st-result-seg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-tertiary);
}
.st-result-seg-btn.tone-success .st-result-seg-dot { background: var(--success); }
.st-result-seg-btn.tone-error   .st-result-seg-dot { background: var(--error);   }
.st-result-seg-btn.tone-warning .st-result-seg-dot { background: var(--warning); }
.st-result-seg-btn.tone-accent  .st-result-seg-dot { background: var(--accent);  }
.st-result-seg-label-text { white-space: nowrap; }
.st-result-seg-count {
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}
.st-result-seg-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.st-result-seg-btn.active .st-result-seg-count {
  color: var(--accent);
}

/* Filter row -- search + type multi-select + location select */
.st-filter-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.st-search-input {
  flex: 1 1 160px;
  min-width: 100px;
}
.st-filter-row .st-filter-select {
  flex: 0 0 auto;
  width: auto;
}
.st-filter-select {
  font-size: 12px;
  padding: 4px 8px;
  height: 32px;
}

/* Type multi-select dropdown */
.st-type-multi {
  position: relative;
  flex: 0 0 auto;
}
.st-type-multi-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--transition-speed), background var(--transition-speed);
}
.st-type-multi-btn:hover { border-color: var(--border-strong); }
.st-type-multi.open .st-type-multi-btn,
.st-type-multi.has-active .st-type-multi-btn {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
.st-type-multi-btn-label {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-type-multi-caret {
  flex-shrink: 0;
  transition: transform var(--transition-speed);
}
.st-type-multi.open .st-type-multi-caret { transform: rotate(180deg); }

.st-type-multi-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.st-type-multi-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  min-height: 32px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.st-type-multi-item:hover { background: var(--row-hover); }
.st-type-multi-item.checked { background: var(--accent-soft); color: var(--accent); }
.st-type-multi-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--st-type-other);
}
.st-type-multi-swatch[data-type-color="pendant"]   { background: var(--st-type-pendant); }
.st-type-multi-swatch[data-type-color="downlight"] { background: var(--st-type-downlight); }
.st-type-multi-swatch[data-type-color="sconce"]    { background: var(--st-type-sconce); }
.st-type-multi-swatch[data-type-color="linear"]    { background: var(--st-type-linear); }
.st-type-multi-swatch[data-type-color="track"]     { background: var(--st-type-track); }
.st-type-multi-swatch[data-type-color="flood"]     { background: var(--st-type-flood); }
.st-type-multi-swatch[data-type-color="spot"]      { background: var(--st-type-spot); }
.st-type-multi-swatch[data-type-color="bollard"]   { background: var(--st-type-bollard); }
.st-type-multi-swatch[data-type-color="power"]     { background: var(--st-type-power); }
.st-type-multi-swatch[data-type-color="other"]     { background: var(--st-type-other); }
.st-type-multi-name { flex: 1; }
.st-type-multi-count {
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.st-type-multi-item.checked .st-type-multi-count { color: var(--accent); }
.st-type-multi-check {
  flex-shrink: 0;
  opacity: 0;
  color: var(--accent);
}
.st-type-multi-item.checked .st-type-multi-check { opacity: 1; }
.st-type-multi-foot {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.st-type-multi-clear {
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.st-type-multi-clear:hover { text-decoration: underline; }

/* Active filter summary row -- shows when type / location / search filters are set.
   Named distinctly from .st-filter-chip (activity-view pills) to avoid collision. */
.st-active-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.st-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  height: 24px;
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-speed), border-color var(--transition-speed);
}
.st-active-filter:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--panel);
}
.st-active-filter-label {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-active-filters-clear {
  padding: 3px 8px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11.5px;
  cursor: pointer;
  touch-action: manipulation;
}
.st-active-filters-clear:hover { color: var(--text-primary); text-decoration: underline; }
.st-result-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-result-count {
  font-size: 13px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Card grid */
.st-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* Row list -- dense photo-anchored list view. Toggle via the view control
   in the result bar. Grid columns:
     photo 44 | ident 1fr | status 130 | type 120 | loc 120 | action 64 */
.st-row-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--button-radius);
  overflow: hidden;
}
.st-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 130px 120px 120px 64px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-speed);
}
.st-row:first-child { border-top: 0; }
.st-row:hover { background: var(--row-hover); }
.st-row:nth-child(2n) { background: var(--row-alt); }
.st-row:nth-child(2n):hover { background: var(--row-hover); }
.st-row.st-row-selected { background: var(--accent-soft); }
.st-row.st-row-selected:hover { background: var(--accent-soft); }
.st-row.st-row-in-bag { border-left: 3px solid var(--accent); padding-left: 9px; }

.st-row-photo {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: var(--panel-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-row-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Empty photo slot: keep the grid column for alignment but render nothing.
   Matches how Linear / Notion / file-list UIs handle missing thumbnails --
   an empty cell draws no attention; content reads as the anchor. */
.st-row-photo-placeholder {
  background: transparent;
}
.st-row-select {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  color: var(--panel);
}
.st-row-select.checked {
  background: var(--accent);
  border-color: var(--accent);
}
.st-row-ident {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-row-ident-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.st-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-row-brand {
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-row-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  min-width: 0;
}
.st-row-status-who {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-row-status-dur {
  color: var(--text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.st-row-status-dur.stale { color: var(--warning); font-weight: 600; }
.st-row-status-avail { color: var(--success); font-size: 12px; }
.st-row-type {
  min-width: 0;
  overflow: hidden;
}
/* Type chip: pill with a leading colored dot (not a left border) so the
   type signaling follows the rounded shape cleanly instead of creating a
   half-moon artifact against the pill radius. */
.st-row-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 8px 2px 6px;
  font-size: 11px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text-secondary);
  overflow: hidden;
  white-space: nowrap;
}
.st-row-type-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-type-other);
  flex-shrink: 0;
}
.st-row-type-chip[data-type-color="pendant"]::before   { background: var(--st-type-pendant);   }
.st-row-type-chip[data-type-color="downlight"]::before { background: var(--st-type-downlight); }
.st-row-type-chip[data-type-color="sconce"]::before    { background: var(--st-type-sconce);    }
.st-row-type-chip[data-type-color="linear"]::before    { background: var(--st-type-linear);    }
.st-row-type-chip[data-type-color="track"]::before     { background: var(--st-type-track);     }
.st-row-type-chip[data-type-color="flood"]::before     { background: var(--st-type-flood);     }
.st-row-type-chip[data-type-color="spot"]::before      { background: var(--st-type-spot);      }
.st-row-type-chip[data-type-color="bollard"]::before   { background: var(--st-type-bollard);   }
.st-row-type-chip[data-type-color="power"]::before     { background: var(--st-type-power);     }
.st-row-loc {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-row-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Row action buttons. Filled variants per tone so the primary actions
   (Check out, Return) read at a glance; secondary actions (Notify,
   In bag) stay subdued. Accent = take, success = give back, kept
   consistent with the detail-panel action hierarchy. */
.st-row-btn {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
  white-space: nowrap;
}
.st-row-btn-add {
  background: var(--accent-soft);
  color: var(--accent);
}
.st-row-btn-add:hover {
  background: var(--accent);
  color: var(--panel);
}
.st-row-btn-return {
  background: var(--success-soft);
  color: var(--success);
}
.st-row-btn-return:hover {
  background: var(--success);
  color: var(--panel);
}
.st-row-btn-muted {
  border-color: var(--border);
  color: var(--text-tertiary);
  font-weight: 500;
}
.st-row-btn-muted:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--row-hover);
}
/* In-bag indicator: solid accent fill so the "this is currently bagged"
   state is unmistakable; acts as a remove button on click. */
.st-row-btn-in-bag {
  background: var(--accent);
  color: var(--panel);
  width: 28px;
  height: 24px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.st-row-btn-in-bag:hover {
  background: var(--error);
}

/* View toggle (Cards / Rows) -- sits in the result bar before Select. */
.st-view-toggle {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--panel-2);
}
.st-view-toggle-btn {
  width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--transition-speed), color var(--transition-speed);
}
.st-view-toggle-btn:hover { color: var(--text-primary); }
.st-view-toggle-btn.active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Group headers */
.st-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
}
.st-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--st-type-other);
}
.st-group-dot[data-type-color="pendant"] { background: var(--st-type-pendant); }
.st-group-dot[data-type-color="downlight"] { background: var(--st-type-downlight); }
.st-group-dot[data-type-color="sconce"] { background: var(--st-type-sconce); }
.st-group-dot[data-type-color="linear"] { background: var(--st-type-linear); }
.st-group-dot[data-type-color="track"] { background: var(--st-type-track); }
.st-group-dot[data-type-color="flood"] { background: var(--st-type-flood); }
.st-group-dot[data-type-color="spot"] { background: var(--st-type-spot); }
.st-group-dot[data-type-color="bollard"] { background: var(--st-type-bollard); }
.st-group-dot[data-type-color="power"] { background: var(--st-type-power); }
.st-group-dot[data-type-color="other"] { background: var(--st-type-other); }
.st-group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.st-group-count {
  font-size: 12px;
  color: var(--text-tertiary);
}
.st-group-chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-tertiary);
  transition: transform var(--transition-speed);
}
.st-group-chevron.collapsed { transform: rotate(-90deg); }
.st-group-section { margin-bottom: 16px; }
.st-group-by {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-tertiary);
}
.st-group-by-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-right: 2px;
}
.st-group-by-btn {
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: border-color var(--transition-speed), background var(--transition-speed), color var(--transition-speed);
}
.st-group-by-btn:hover { background: var(--row-hover); color: var(--text-primary); }
.st-group-by-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Cards */
.st-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--st-type-other);
  border-radius: var(--panel-radius);
  padding: 12px;
  cursor: pointer;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
}
.st-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border); }
.st-card.st-card-out {
  background: color-mix(in srgb, var(--error) 4%, var(--panel));
}
.st-card.st-card-stale {
  background: color-mix(in srgb, var(--warning) 6%, var(--panel));
}
.st-card.st-card-in-bag {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Type-color left border */
.st-card[data-type-color="pendant"] { border-left-color: var(--st-type-pendant); }
.st-card[data-type-color="downlight"] { border-left-color: var(--st-type-downlight); }
.st-card[data-type-color="sconce"] { border-left-color: var(--st-type-sconce); }
.st-card[data-type-color="linear"] { border-left-color: var(--st-type-linear); }
.st-card[data-type-color="track"] { border-left-color: var(--st-type-track); }
.st-card[data-type-color="flood"] { border-left-color: var(--st-type-flood); }
.st-card[data-type-color="spot"] { border-left-color: var(--st-type-spot); }
.st-card[data-type-color="bollard"] { border-left-color: var(--st-type-bollard); }
.st-card[data-type-color="power"] { border-left-color: var(--st-type-power); }
.st-card[data-type-color="other"] { border-left-color: var(--st-type-other); }


/* Card body: icon left, content right */
.st-card-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.st-card-photo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
.st-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.st-fid {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(102, 126, 234, 0.08);
  color: var(--accent);
  white-space: nowrap;
}

.st-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.st-card-meta {
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status bar for checked-out cards */
.st-card-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
}
.st-card-status-out {
  background: rgba(245, 101, 101, 0.08);
  color: var(--error);
}
.st-card-status-out.stale {
  background: rgba(237, 185, 70, 0.1);
  color: var(--warning);
}
.st-card-who { font-weight: 500; }
.st-card-dur { opacity: 0.8; }

/* Card footer: ID + condition + action buttons */
.st-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.st-cond-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}
.st-cond-badge[data-cond="fair"] { background: rgba(237, 185, 70, 0.1); color: var(--warning); }
.st-cond-badge[data-cond="needs_attention"] { background: rgba(245, 101, 101, 0.1); color: var(--error); }

.st-card-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

/* Card action buttons */
.st-card-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-speed);
}
.st-card-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.st-card-btn-add:hover { background: rgba(102, 126, 234, 0.1); border-color: var(--accent); color: var(--accent); }
.st-card-btn-return { border-color: var(--success); color: var(--success); }
.st-card-btn-return:hover { background: rgba(72, 187, 120, 0.1); }
.st-card-btn-muted { color: var(--text-tertiary); }
.st-card-btn-muted:hover { border-color: var(--text-secondary); color: var(--text-secondary); }
.st-card-btn-in-bag { border-color: var(--accent); color: var(--accent); background: rgba(102, 126, 234, 0.08); }


/* Combobox (filtered project selector) */
.st-combobox { position: relative; }
.st-combobox-list {
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  margin-top: 4px;
  background: var(--panel);
}
.st-combobox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.st-combobox-item:hover { background: rgba(102, 126, 234, 0.08); }
.st-combobox-item.selected { color: var(--accent); font-weight: 600; }
.st-combobox-item.hidden { display: none; }
.st-combobox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Checkout bag bar -- sticky bottom action bar with a photo-thumb preview
   of the bagged fixtures, count badge, and Clear / Check out actions. */
.st-bag-bar {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  border: 1px solid var(--accent-line);
  border-radius: var(--panel-radius);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 10;
}
.st-bag-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.st-bag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-bag-count {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 14px;
  text-align: center;
}
.st-bag-thumbs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.st-bag-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-bag-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.st-bag-thumb-fid {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
}
/* Type-tinted ring on the thumbnail to keep fixture-type signaling even
   in the bag preview. Falls through to border var(--border) when a type
   is not set. */
.st-bag-thumb[data-type-color="pendant"]   { border-color: var(--st-type-pendant); }
.st-bag-thumb[data-type-color="downlight"] { border-color: var(--st-type-downlight); }
.st-bag-thumb[data-type-color="sconce"]    { border-color: var(--st-type-sconce); }
.st-bag-thumb[data-type-color="linear"]    { border-color: var(--st-type-linear); }
.st-bag-thumb[data-type-color="track"]     { border-color: var(--st-type-track); }
.st-bag-thumb[data-type-color="flood"]     { border-color: var(--st-type-flood); }
.st-bag-thumb[data-type-color="spot"]      { border-color: var(--st-type-spot); }
.st-bag-thumb[data-type-color="bollard"]   { border-color: var(--st-type-bollard); }
.st-bag-thumb[data-type-color="power"]     { border-color: var(--st-type-power); }
.st-bag-thumb[data-type-color="other"]     { border-color: var(--st-type-other); }
.st-bag-thumb-overflow {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-bag-clear {
  flex-shrink: 0;
}
.st-bag-checkout {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Checkout summary (in modal) */
.st-checkout-summary { display: flex; flex-direction: column; gap: 12px; }
.st-checkout-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.st-checkout-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.st-checkout-item .st-fid { font-size: 10px; }
.st-checkout-remove {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.st-checkout-remove:hover { color: var(--error); }
.st-note-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.st-note-chip {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(102, 126, 234, 0.08);
  color: var(--accent);
  border: 1px solid rgba(102, 126, 234, 0.18);
  cursor: pointer;
  transition: background var(--transition-speed);
}
.st-note-chip:hover { background: rgba(102, 126, 234, 0.16); }
.st-checkout-field { display: flex; flex-direction: column; gap: 4px; }
.st-checkout-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Detail panel */
.st-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(480px, 100vw - 40px);
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  animation: st-slide-in 0.25s var(--transition-fn) forwards;
}
.st-detail-panel.closing {
  animation: st-slide-out 0.2s var(--transition-fn) forwards;
}
@keyframes st-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes st-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
.st-detail-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.st-detail-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-detail-close {
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
}
.st-detail-close:hover { background: var(--panel); color: var(--text-primary); }
.st-detail-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.st-detail-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.st-detail-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 20px;
}
.st-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-field-wide { grid-column: 1 / -1; }
.st-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.st-field-value {
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-word;
}
.st-field-link {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
}
.st-field-link:hover { text-decoration: underline; }
.st-detail-photo {
  padding: 0 20px;
  margin-top: 12px;
}
.st-detail-photo img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--button-radius);
  background: var(--panel-2);
  display: block;
}
/* Placeholder tinted by fixture type when no photo is on file; keeps the
   hero slot visible so the panel stays anchored. */
.st-detail-photo-placeholder {
  width: calc(100% - 40px);
  margin: 12px 20px 0;
  padding: 0;
  height: 140px;
  border-radius: var(--button-radius);
  background: var(--panel-2);
  border: 1px dashed var(--border);
  position: relative;
  overflow: hidden;
}
.st-detail-photo-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--panel-2), var(--panel) 80%);
  opacity: 0.9;
}
.st-detail-photo-placeholder::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--st-type-other);
  opacity: 0.35;
}
.st-detail-photo-placeholder[data-type-color="pendant"]::after   { background: var(--st-type-pendant);   }
.st-detail-photo-placeholder[data-type-color="downlight"]::after { background: var(--st-type-downlight); }
.st-detail-photo-placeholder[data-type-color="sconce"]::after    { background: var(--st-type-sconce);    }
.st-detail-photo-placeholder[data-type-color="linear"]::after    { background: var(--st-type-linear);    }
.st-detail-photo-placeholder[data-type-color="track"]::after     { background: var(--st-type-track);     }
.st-detail-photo-placeholder[data-type-color="flood"]::after     { background: var(--st-type-flood);     }
.st-detail-photo-placeholder[data-type-color="spot"]::after      { background: var(--st-type-spot);      }
.st-detail-photo-placeholder[data-type-color="bollard"]::after   { background: var(--st-type-bollard);   }
.st-detail-photo-placeholder[data-type-color="power"]::after     { background: var(--st-type-power);     }

/* Checkout banner -- out-state summary block between the hero photo and
   the action row. Carries user, duration, project, return-date, note, and
   a Stale flag when isStale() fires. */
.st-detail-banner {
  margin: 14px 20px 0;
  padding: 10px 12px;
  border-radius: var(--button-radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--text-primary);
}
.st-detail-banner.tone-stale {
  border-color: var(--warning);
  background: var(--warning-soft);
}
.st-detail-banner-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.st-detail-banner-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.st-detail-banner.tone-stale .st-detail-banner-avatar {
  background: var(--warning);
}
.st-detail-banner-who { font-weight: 600; }
.st-detail-banner-dur {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.st-detail-banner.tone-stale .st-detail-banner-dur {
  color: var(--warning);
  font-weight: 600;
}
.st-detail-banner-flag {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--panel);
  background: var(--warning);
  border-radius: 10px;
}
.st-detail-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}
.st-detail-banner-project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
}
.st-detail-banner-project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.st-detail-banner-return {
  font-variant-numeric: tabular-nums;
}
.st-detail-banner-note {
  flex-basis: 100%;
  color: var(--text-primary);
  font-style: italic;
}

/* Photo drop zone */
.st-photo-zone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--panel-radius);
  cursor: pointer;
  transition: border-color var(--transition-speed), background var(--transition-speed);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.st-photo-zone:hover, .st-photo-zone:focus-visible {
  border-color: var(--accent);
}
.st-photo-zone-dragover {
  border-color: var(--accent);
  background: rgba(102, 126, 234, 0.06);
}
.st-photo-zone-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
.st-photo-zone-prompt svg { opacity: 0.5; }
.st-photo-zone-input { display: none; }
.st-photo-zone-preview {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.st-photo-zone-preview img {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 4px;
}
.st-photo-zone-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-photo-zone-remove:hover { background: var(--error); }

.st-detail-similar {
  padding: 8px 20px;
  font-size: 13px;
}
.st-detail-similar a {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.st-detail-similar a:hover { text-decoration: underline; }

/* Timeline (comments + events in detail) */
.st-timeline {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex: 1;
}
.st-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.st-timeline-header h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.st-timeline-input {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.st-timeline-input .input-field { flex: 1; }

.st-tl-event {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.st-tl-event:last-child { border-bottom: none; }
.st-tl-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--panel-2);
  color: var(--text-secondary);
}
.st-tl-icon[data-type="checkout"] { background: var(--error-soft);   color: var(--error);   }
.st-tl-icon[data-type="return"]   { background: var(--success-soft); color: var(--success); }
.st-tl-icon[data-type="transfer"] { background: var(--panel-2);      color: var(--text-secondary); }
.st-tl-icon[data-type="comment"]  { background: var(--accent-soft);  color: var(--accent);  }
.st-tl-icon[data-type="edited"]   { background: var(--warning-soft); color: var(--warning); }
.st-tl-body { flex: 1; min-width: 0; }
.st-tl-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}
.st-tl-text {
  color: var(--text-primary);
  line-height: 1.4;
}

.st-tl-comment {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.st-tl-comment:last-child { border-bottom: none; }
.st-tl-comment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.st-tl-comment-user { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.st-tl-comment-time { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }
.st-tl-comment-text { font-size: 14px; color: var(--text-primary); line-height: 1.4; }

/* Inline edit mode in detail panel */
.st-edit-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.st-edit-name {
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-bottom: 2px solid var(--accent);
  background: none;
  color: var(--text-primary);
  width: 100%;
  padding: 4px 0;
  margin-top: 4px;
  outline: none;
}
.st-edit-info .st-edit-input {
  font-size: 13px;
  padding: 3px 6px;
  height: auto;
  min-height: 28px;
  background: rgba(102, 126, 234, 0.04);
  border: 1px solid rgba(102, 126, 234, 0.15);
  border-radius: 4px;
}
.st-edit-info .st-edit-input:focus {
  border-color: var(--accent);
  background: rgba(102, 126, 234, 0.08);
}
.st-edit-photo-section {
  padding: 8px 20px;
}
.st-edit-actions {
  display: flex;
  gap: 6px;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--bg);
}
.st-edit-actions .btn-danger { margin-left: auto; }

/* Forms */
.st-form { max-width: 700px; }
.st-form-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.st-form-header h2 { margin: 0; font-size: 20px; color: var(--text-primary); }
.st-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.st-form-group { display: flex; flex-direction: column; gap: 4px; }
.st-form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.st-form-wide { grid-column: 1 / -1; }
.st-required { color: var(--error); }
.st-textarea { resize: vertical; min-height: 60px; }
.st-form-actions { display: flex; gap: 8px; margin-top: 20px; }
.st-form-actions .btn-danger { margin-left: auto; }
@media (max-width: 600px) {
  .st-form-grid { grid-template-columns: 1fr; }
}

/* -- Quick Add Mode -- */
.st-qa-view { max-width: 600px; }

.st-qa-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-qa-header h2 {
  margin: 0;
  font-size: 20px;
  color: var(--text-primary);
  flex: 1;
}
.st-qa-counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Session defaults bar */
.st-qa-defaults {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius, 8px);
  padding: 12px 14px;
}
.st-qa-defaults-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.st-qa-defaults-hint {
  text-transform: none;
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0;
}
.st-qa-defaults-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.st-qa-defaults-row .st-form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
@media (max-width: 600px) {
  .st-qa-defaults-row { grid-template-columns: 1fr; }
}
.st-qa-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0 0;
}

/* Success banner */
.st-qa-success {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--success, #22c55e) 25%, transparent);
  border-radius: var(--button-radius);
  font-size: 13px;
  color: var(--text-primary);
}
.st-qa-success svg { color: var(--success, #22c55e); flex-shrink: 0; }
.st-qa-success strong { font-family: var(--font-mono, monospace); letter-spacing: 0.3px; }
.st-qa-print { margin-left: auto; flex-shrink: 0; }
.st-catalog-link-block {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--button-radius);
  padding: 12px;
  gap: 8px;
}
.st-catalog-link-heading {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.st-catalog-add-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.st-qa-catalog-btn { flex: 0 0 auto; }
/* Sample Tracker is a phone-first workflow, and strata-btn-sm is 28px high --
   below the 44px touch-target minimum in .claude/rules/modules.md. Restore it
   for the catalog actions at phone width. */
@media (max-width: 640px) {
  .st-qa-catalog-btn,
  .st-catalog-edit-actions .strata-btn-sm {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.st-catalog-link-hint {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.st-catalog-manual-divider {
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.2;
}
.st-catalog-manual-divider span {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.st-catalog-manual-divider span::before,
.st-catalog-manual-divider span::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
.st-qa-catalog-link {
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.st-qa-catalog-link.is-cleared { color: var(--warning); }
.st-catalog-edit-row { gap: 4px; }
.st-catalog-edit-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
}
.st-catalog-edit-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.st-qa-success-fade {
  animation: st-qa-fade-out 0.4s ease-out forwards;
}
@keyframes st-qa-fade-out {
  0% { opacity: 1; max-height: 50px; margin-bottom: 0; }
  100% { opacity: 0; max-height: 0; margin-bottom: -8px; overflow: hidden; }
}

/* Quick add form */
.st-qa-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.st-qa-form .st-form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.st-qa-form .st-form-wide { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .st-qa-form { grid-template-columns: 1fr; }
}

/* More details toggle */
.st-qa-more-toggle {
  grid-column: 1 / -1;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 4px 0;
  user-select: none;
  transition: color var(--transition-speed);
}
.st-qa-more-toggle:hover { color: var(--text-primary); }

/* Collapsible more section */
.st-qa-more {
  grid-column: 1 / -1;
  display: none;
}
.st-qa-more.st-qa-more-open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.st-qa-more .st-form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.st-qa-more .st-form-wide { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .st-qa-more.st-qa-more-open { grid-template-columns: 1fr; }
}

/* Quick add action buttons */
.st-qa-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

/* Activity view */
.st-activity-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.st-filter-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-speed);
}
.st-filter-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.st-filter-chip.active {
  background: rgba(102, 126, 234, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.st-activity-table-wrap { overflow-x: auto; }
.st-activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.st-activity-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.st-activity-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
.st-activity-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
[data-theme="light"] .st-activity-table tbody tr:hover { background: rgba(0, 0, 0, 0.02); }
.st-act-time { white-space: nowrap; color: var(--text-secondary); font-size: 12px; }
.st-act-note {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
.st-act-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: capitalize;
  white-space: nowrap;
}
.st-act-badge[data-type="checkout"] { background: rgba(245, 101, 101, 0.12); color: var(--error); }
.st-act-badge[data-type="return"] { background: rgba(72, 187, 120, 0.12); color: var(--success); }
.st-act-badge[data-type="transfer"] { background: rgba(160, 160, 160, 0.12); color: var(--text-secondary); }
.st-act-badge[data-type="added"] { background: rgba(102, 126, 234, 0.12); color: var(--accent); }
.st-act-badge[data-type="edited"] { background: rgba(237, 185, 70, 0.12); color: var(--warning); }
.st-act-badge[data-type="deleted"] { background: rgba(245, 101, 101, 0.12); color: var(--error); }

/* Settings sections */
.st-settings { display: flex; flex-direction: column; gap: 20px; }
.st-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  overflow: hidden;
}
.st-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.st-section-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.st-section-body { padding: 8px 16px; }
.st-setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.st-setting-label { font-size: 14px; color: var(--text-primary); flex: 1; }
.st-setting-hint { font-size: 12px; color: var(--text-tertiary); }
.st-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: background var(--transition-speed);
}
.st-toggle.on { background: var(--accent); }
.st-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: transform var(--transition-speed);
}
.st-toggle.on::after { transform: translateX(16px); }

.st-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.st-list-item:last-child { border-bottom: none; }
.st-list-item-name { font-size: 14px; color: var(--text-primary); flex: 1; }
.st-list-item-count { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.st-list-add {
  display: flex;
  gap: 6px;
  padding: 8px 0;
}
.st-list-add .input-field { flex: 1; }
.st-stale-dur { font-size: 13px; font-weight: 600; color: var(--warning); white-space: nowrap; }

/* Container cards in settings */
.st-container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  padding: 12px 16px;
}
.st-container-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color var(--transition-speed);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.st-container-card:hover { border-color: var(--accent); }
.st-container-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.st-container-meta { font-size: 12px; color: var(--text-secondary); }
.st-container-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}
.st-container-pill {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(102, 126, 234, 0.08);
  color: var(--accent);
}
.st-container-pill.out { background: rgba(245, 101, 101, 0.08); color: var(--error); }
.st-container-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

/* Utilities */
.st-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}
.st-empty-cta { margin-top: 12px; }
.st-load-more { display: block; margin: 12px auto; }

.st-stale-days-input {
  width: 60px;
  text-align: center;
}
.st-container-out-count { color: var(--error); }
.st-empty-sm { padding: 16px; }

/* Detail panel backdrop */
.st-detail-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
  animation: st-fade-in 0.2s ease forwards;
}
.st-detail-backdrop.closing {
  animation: st-fade-out 0.2s ease forwards;
}
@keyframes st-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ---- QR Code in Detail Panel ---- */

.st-detail-qr {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
}
.st-detail-qr-header h3 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.st-detail-qr-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.st-qr-img {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  padding: 6px;
  border: 1px solid var(--border);
}
.st-qr-code-img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.st-qr-error {
  font-size: 11px;
  color: var(--text-tertiary);
}
.st-qr-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Select Mode ---- */

.st-select-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.st-card.st-card-selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}
.st-select-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  margin-left: auto;
  flex-shrink: 0;
  transition: all var(--transition-speed);
}
.st-select-indicator.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- Print Overlay (screen view) ---- */

.st-print-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Full-screen print overlay on the modal layer -- like the print sheet, it
     must cover the mobile bottom nav (z-index 130) rather than sit under it. */
  z-index: 9000;
  background: color-mix(in srgb, var(--bg) 97%, var(--text-primary));
  overflow-y: auto;
}
.st-print-overlay {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 24px;
}
.st-print-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
}
.st-print-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-print-title strong {
  font-size: 16px;
  color: var(--text-primary);
}
.st-print-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
}
.st-print-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---- Direct Print Progress ---- */

.st-print-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-print-progress-inner {
  background: var(--panel);
  border-radius: 12px;
  padding: 24px 32px;
  min-width: 280px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.st-print-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--input-bg);
  border-radius: 3px;
  overflow: hidden;
}
.st-print-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}
.st-print-progress-text {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---- Tape labels (browser-print fallback) ---- */
/* One label per page at the roll's true dimensions. The <img> is the canvas
   render from StrataLabelRenderer; its width/height are set inline in mm so the
   browser dialog / PDF matches the continuous roll. */

.st-tape-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}
.st-tape-page {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-color, #000) 12%, transparent);
}
.st-tape-label-img {
  display: block;
  image-rendering: pixelated;
}

/* ---- Print Styles ---- */

@media print {
  /* Force white background on all ancestors to prevent dark theme bleeding */
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .strata-content {
    background: #fff !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .strata-module-container {
    max-width: none !important;
    margin: 0 !important;
  }
  [data-module="sample-tracker"] {
    background: #fff !important;
  }

  /* Hide all app chrome. The mobile shell (header/tabs) is included because a
     tiny tape @page can satisfy mobile.css's max-width rules during print and
     otherwise render the fixed phone header/tab bar over every label page. */
  .strata-topbar,
  .strata-sidebar,
  .strata-sidebar-backdrop,
  .strata-toast-container,
  .strata-command-overlay,
  /* .strata-help-overlay is retired -- Help is no longer its own modal layer, it
     renders in the dock. So the DOCK PANEL is what must be hidden now, otherwise
     an open Help (or any other dock view) prints over every label page. */
  .strata-dock-panel,
  .strata-mobile-header,
  .strata-mobile-tabs {
    display: none !important;
  }
  /* Hide screen-only UI */
  .st-print-toolbar,
  .st-print-progress {
    display: none !important;
  }
  /* Hide main content when print overlay is open */
  .st-view {
    display: none !important;
  }
  .st-detail-panel,
  .st-detail-backdrop,
  .st-labelsheet-wrap {
    display: none !important;
  }

  /* Print overlay becomes static, white, no scroll */
  .st-print-wrap {
    position: static !important;
    overflow: visible !important;
    background: #fff !important;
    z-index: auto !important;
  }
  .st-print-overlay {
    max-width: none;
    padding: 0;
    margin: 0;
    background: #fff;
  }

  /* Tape labels: one per page at the roll's true size (@page is set inline
     per batch). The image already carries the label content. */
  .st-tape-pages {
    display: block;
    padding: 0;
    gap: 0;
  }
  .st-tape-page {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff;
    margin: 0;
    page-break-after: always;
    break-after: page;
  }
  .st-tape-page:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  * {
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ---- Print sheet (size + copies picker with live preview) ---- */

.st-labelsheet-wrap {
  position: fixed;
  inset: 0;
  /* Modal layer (matches the platform modal/bottom-sheet band). Must clear the
     mobile bottom nav (z-index 130) and header (120) so app chrome can't be
     tapped underneath the print confirmation. */
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.st-labelsheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
}
.st-labelsheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  background: var(--surface-1, var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--card-radius, 12px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--shadow-color, #000) 30%, transparent);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  overflow: hidden;
}
.st-labelsheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.st-labelsheet-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.st-labelsheet-x {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.st-labelsheet-x:hover { color: var(--text-primary); }
.st-labelsheet-body {
  padding: 16px;
  overflow-y: auto;
}
/* Preview sits on white so it reads as the actual (white) label stock in both
   themes. */
.st-labelsheet-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.st-labelsheet-preview-img {
  max-width: 100%;
  max-height: 160px;
  image-rendering: pixelated;
}
.st-labelsheet-preview-loading {
  font-size: 12px;
  color: var(--text-tertiary);
}
.st-labelsheet-caption {
  margin-top: 8px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-secondary);
}
.st-labelsheet-more {
  color: var(--text-tertiary);
  font-family: var(--font-sans, sans-serif);
}
.st-labelsheet-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.st-labelsheet-field-label {
  font-size: 13px;
  color: var(--text-secondary);
}
.st-labelsheet-fixed {
  font-size: 13px;
  color: var(--text-tertiary);
}
.st-labelsheet-seg {
  display: inline-flex;
  gap: 4px;
  background: var(--overlay-bg);
  border-radius: 8px;
  padding: 3px;
}
.st-labelsheet-seg-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 62px;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
}
.st-labelsheet-seg-btn:hover { color: var(--text-primary); }
.st-labelsheet-seg-btn.active {
  background: var(--surface-1, var(--bg));
  border-color: var(--border);
  color: var(--text-primary);
}
.st-labelsheet-seg-name {
  font-size: 12px;
  font-weight: 600;
}
.st-labelsheet-seg-dim {
  font-size: 10px;
  color: var(--text-tertiary);
}
.st-labelsheet-stepper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.st-labelsheet-step {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-1, var(--bg));
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.st-labelsheet-step:hover { background: var(--overlay-bg); }
.st-labelsheet-copies {
  min-width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.st-labelsheet-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
/* Phone: bring the copies steppers up to the 44px touch-target minimum. */
@media (max-width: 600px) {
  .st-labelsheet-step {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}


/* ─── My Samples inline details ─── */
.st-my-details {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
/* Mandatory state: notes are required on checkout (require_checkout_note on). */
.st-my-details-required {
  border: 1px solid var(--error);
  border-radius: var(--button-radius);
  padding: 8px;
  background: var(--error-soft);
}
.st-my-details-required .st-my-details-dot { background: var(--error); }
.st-my-details-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.st-my-details-label {
  flex: 1;
  font-size: 11px;
  color: var(--text-tertiary);
}
.st-my-details-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
.st-my-details-dismiss:hover { color: var(--text-primary); }
.st-my-details-form {
  width: 100%;
}
.st-my-details-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.st-my-details-note {
  flex: 1 1 180px;
  height: 32px;
  font-size: 13px;
}
/* Project combobox */
.st-my-details-combo {
  position: relative;
  flex: 0 1 160px;
}
.st-my-details-combo-input {
  height: 32px;
  font-size: 13px;
  width: 100%;
}
.st-my-details-combo-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  box-shadow: var(--shadow);
  z-index: 10;
  margin-top: 2px;
}
.st-my-details-combo-list.st-my-details-combo-open { display: block; }
.st-my-details-combo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
}
.st-my-details-combo-item:hover { background: var(--border); }
.st-my-details-combo-item.hidden { display: none; }
.st-my-details-combo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Date pills */
.st-my-details-dates {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
}
.st-my-date-pill {
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-speed) var(--transition-fn);
}
.st-my-date-pill:hover { border-color: var(--accent); color: var(--accent); }
.st-my-date-pill.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.st-my-date-input {
  height: 28px;
  font-size: 12px;
  width: 130px;
}
.st-my-details-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}
.st-my-details-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .st-my-details { flex-wrap: wrap; }
  .st-my-details-row { flex-direction: column; }
  .st-my-details-note { flex: 1 1 100%; }
  .st-my-details-combo { flex: 1 1 100%; }
  .st-my-details-dates { flex-wrap: wrap; }
}

/* ─── Select mode entry + floating bar ─── */
.st-select-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: all var(--transition-speed) var(--transition-fn);
}
.st-select-enter:hover { border-color: var(--accent); color: var(--accent); }
.st-select-enter.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.st-select-float {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius, 8px);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  margin: 0 4px 4px;
  z-index: 10;
}
.st-select-float-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-select-float-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-right: auto;
}
.st-select-float-pick {
  display: flex;
  gap: 4px;
}
.st-select-float-actions {
  display: flex;
  gap: 6px;
}
.st-select-float-actions .btn-primary,
.st-select-float-actions .btn-secondary {
  flex: 1;
}
@media (max-width: 640px) {
  .st-select-float {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 12px;
    margin: 0 8px 8px;
    padding: 14px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .st-select-float-actions .btn-primary,
  .st-select-float-actions .btn-secondary { min-height: 44px; font-size: 14px; }
}

/* ─── Mobile Responsive ───────────────────────────────────────────── */

/* -- Scope hover-only styles to devices with real hover -- */
@media (hover: hover) {
  .st-card:hover { border-color: var(--accent); }
  .st-container-card:hover { border-color: var(--accent); }
  .st-activity-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
}
/* Remove hover-only effects on touch devices */
@media (hover: none) {
  .st-card:hover { border-color: var(--border); }
  .st-container-card:hover { border-color: var(--border); }
  .st-activity-table tbody tr:hover { background: none; }
}

/* -- Tablet and below (≤768px) -- */
@media (max-width: 768px) {

  /* Tab bar: horizontal scroll, hide less-important buttons */
  .st-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .st-tabs::-webkit-scrollbar { display: none; }

  .st-tab {
    padding: 8px 14px;
    min-height: 36px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Filter row: stack on tablet; search takes full width, type + location sit together */
  .st-filter-row {
    flex-wrap: wrap;
  }
  .st-search-input {
    flex: 1 1 100%;
    min-width: 0;
  }
  /* Compact status segment: allow scroll if too many options at tablet width */
  .st-result-seg {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .st-result-seg::-webkit-scrollbar { display: none; }
  .st-result-seg-btn { flex-shrink: 0; }

  /* Card grid: 2 columns on tablet */
  .st-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  /* Detail panel: wider on tablet */
  .st-detail-panel {
    width: min(480px, 100vw - 20px);
  }

  /* Detail info: 1 column on narrow panel */
  .st-detail-info {
    grid-template-columns: 1fr;
  }
  .st-detail-info .st-field-wide {
    grid-column: 1;
  }

  /* Activity table: bump font for readability */
  .st-activity-table { font-size: 13px; }

  /* Settings: toggles need larger touch target */
  .st-toggle {
    width: 44px;
    height: 26px;
    border-radius: 13px;
  }
  .st-toggle::after {
    width: 22px;
    height: 22px;
  }
  .st-toggle.active::after {
    transform: translateX(18px);
  }

  /* Settings list items: taller rows for touch */
  .st-list-item {
    min-height: 44px;
    padding: 10px 0;
  }
}

/* Scan FAB: hidden by default, shown on mobile via media query below */
.st-scan-fab {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.st-scan-fab:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .st-scan-fab {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* -- Phone (≤640px) -- */
@media (max-width: 640px) {

  /* View padding */
  .st-view {
    padding: 4px 0;
    gap: 12px;
  }

  /* Tab bar: compact, scan/labels hidden (FAB replaces scan) */
  .st-tabs {
    gap: 2px;
    padding-bottom: 6px;
  }
  .st-tab {
    padding: 8px 10px;
    font-size: 12px;
  }
  .st-tab-spacer {
    flex: 0 0 4px;
  }
  /* Hide scan button in tab bar (mobile FAB replaces it) */
  .st-scan-btn {
    display: none;
  }

  /* My checkouts bar: larger touch targets + wider cards on phone */
  .st-my-bar {
    padding: 10px 12px;
  }
  .st-my-bar-toggle {
    width: 36px;
    height: 36px;
  }
  .st-my-bar-cards {
    gap: 8px;
    padding-bottom: 6px;
  }
  .st-my-card {
    width: 260px;
    padding: 10px;
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
  }
  .st-my-card-photo {
    width: 48px;
    height: 48px;
  }
  .st-my-card-name {
    font-size: 13px;
  }
  .st-my-card-return,
  .st-my-card-refresh {
    width: 36px;
    height: 36px;
  }

  /* Filter row: full-width stacked */
  .st-filter-row {
    gap: 6px;
  }
  .st-search-input { font-size: 16px; }         /* prevent iOS auto-zoom on focus */
  .st-filter-select {
    height: 44px;                                /* touch target */
    min-height: 44px;
    font-size: 16px;                             /* prevent iOS auto-zoom */
    padding: 6px 10px;
  }

  /* Compact status segment: bump to 40px tap target on phone, keep compact
     pill footprint in the result bar */
  .st-result-seg-btn {
    min-height: 40px;
    padding: 6px 12px;
    font-size: 13px;
  }
  .st-result-seg-count { font-size: 12px; }

  /* Type multi-select: full touch target */
  .st-type-multi-btn {
    min-height: 44px;
    height: auto;
    padding: 8px 12px;
    font-size: 13px;
  }
  .st-type-multi-menu {
    min-width: min(320px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: 50vh;
  }
  .st-type-multi-item {
    min-height: 44px;
    font-size: 14px;
    padding: 8px 10px;
  }
  .st-type-multi-clear {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 13px;
  }

  /* Active-filter chips: taller for touch */
  .st-active-filter {
    min-height: 32px;
    height: auto;
    padding: 4px 10px;
    font-size: 12.5px;
  }
  .st-active-filters-clear {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12.5px;
  }

  /* Card grid: single column, full width */
  .st-card-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Row list: drop type + location columns on phone (too narrow for the
     full desktop grid). Keep photo + identity + status + action. */
  .st-row {
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    gap: 8px;
    padding: 10px 12px;
    min-height: 60px;
  }
  .st-row-type,
  .st-row-loc { display: none; }
  .st-row-btn {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 12px;
  }
  .st-row-btn-in-bag { width: 32px; height: 32px; }
  .st-view-toggle-btn {
    width: 36px;
    height: 36px;
  }

  /* Cards: larger touch targets, more readable */
  .st-card {
    padding: 14px;
  }
  .st-card-name {
    font-size: 15px;
  }
  .st-card-meta {
    font-size: 12px;
  }
  .st-card-footer {
    gap: 8px;
    flex-wrap: wrap;
  }
  .st-card-btn {
    font-size: 13px;
    padding: 6px 14px;
    min-height: 36px;
    border-radius: 6px;
  }
  .st-card-actions {
    margin-left: auto;
  }
  .st-fid {
    font-size: 11px;
    padding: 2px 8px;
  }

  /* Group headers: larger tap target */
  .st-group-header {
    min-height: 44px;
    padding: 10px 0;
  }

  /* Result bar. When the bar wraps, each section goes to its own row; the
     left dividers look stranded as leading edge rules, so drop them and
     let the gap carry separation on phone. */
  .st-result-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .st-result-seg,
  .st-group-by {
    padding-left: 0;
    border-left: 0;
    flex-wrap: wrap;
  }
  .st-group-by-btn {
    min-height: 32px;
    padding: 4px 10px;
  }

  /* Select mode entry in result bar */
  .st-select-enter {
    width: 36px;
    height: 36px;
  }
  .st-select-indicator {
    width: 28px;
    height: 28px;
  }

  /* Activity filter chips: larger for touch */
  .st-activity-filters {
    gap: 6px;
  }
  .st-filter-chip {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 36px;
  }

  /* Activity table: card-style rows on phone */
  .st-activity-table thead {
    display: none;
  }
  .st-activity-table,
  .st-activity-table tbody,
  .st-activity-table tr,
  .st-activity-table td {
    display: block;
  }
  .st-activity-table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .st-activity-table td {
    padding: 2px 0;
    text-align: left;
    font-size: 13px;
  }
  .st-activity-table td::before {
    display: none;
  }
  .st-act-time {
    font-size: 11px;
    color: var(--text-tertiary);
  }
  .st-act-note {
    max-width: none;
    white-space: normal;
  }

  /* Detail panel: full-width on phone */
  .st-detail-panel {
    width: 100vw;
    border-radius: 0;
    border-left: none;
  }
  .st-detail-backdrop {
    display: none;
  }
  .st-detail-header {
    padding: 16px 16px 10px;
  }
  .st-detail-close {
    min-width: 36px;
    min-height: 36px;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .st-detail-name {
    font-size: 18px;
  }
  .st-detail-actions {
    padding: 0 16px 12px;
    gap: 8px;
  }
  .st-detail-actions .btn-primary,
  .st-detail-actions .btn-secondary {
    min-height: 44px;
    font-size: 14px;
    padding: 0 16px;
  }
  /* Primary action (checkout/return) is full-width on mobile */
  .st-detail-actions .btn-primary:first-child {
    flex: 1 1 100%;
    font-size: 16px;
    min-height: 48px;
    order: -1;
  }
  .st-detail-info {
    padding: 12px 16px;
    gap: 10px;
  }
  .st-detail-photo { padding: 0 16px; }
  .st-detail-photo img { max-height: 260px; }
  .st-detail-photo-placeholder {
    width: calc(100% - 32px);
    margin: 12px 16px 0;
    height: 120px;
  }
  .st-detail-banner {
    margin: 12px 16px 0;
    padding: 10px;
  }
  .st-detail-banner-flag { margin-left: 0; }
  .st-field-label {
    font-size: 10px;
  }
  .st-field-value {
    font-size: 14px;
  }

  /* QR section: stack vertically */
  .st-detail-qr {
    padding: 12px 16px;
  }
  .st-detail-qr-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .st-qr-img {
    width: 80px;
    height: 80px;
  }
  .st-qr-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Timeline */
  .st-timeline {
    padding: 12px 16px;
  }
  .st-timeline-input {
    gap: 8px;
  }
  .st-timeline-input .btn-primary {
    min-height: 36px;
  }

  /* Edit panel: touch-friendly inputs */
  .st-edit-input {
    min-height: 36px;
    font-size: 14px;
    padding: 6px 8px;
  }
  .st-edit-actions {
    padding: 12px 16px;
    gap: 8px;
  }
  .st-edit-actions .btn-primary,
  .st-edit-actions .btn-secondary,
  .st-edit-actions .btn-danger {
    min-height: 40px;
    font-size: 13px;
  }

  /* Add form: full-width, touch-friendly */
  .st-form {
    max-width: none;
    padding: 0;
  }
  .st-form-actions {
    flex-direction: column;
    gap: 8px;
  }
  .st-form-actions .btn-primary,
  .st-form-actions .btn-secondary {
    min-height: 44px;
    font-size: 14px;
  }

  /* Quick add: compact but touch-friendly */
  .st-qa-view {
    max-width: none;
  }
  .st-qa-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .st-qa-actions .btn-primary,
  .st-qa-actions .btn-secondary,
  .st-qa-print {
    min-height: 44px;
    font-size: 14px;
    justify-content: center;
  }

  /* Settings: touch-friendly controls */
  .st-section-header {
    padding: 12px 14px;
  }
  .st-section-body {
    padding: 8px 14px;
  }
  .st-setting-row {
    min-height: 44px;
    padding: 10px 0;
    gap: 10px;
    flex-wrap: wrap;
  }
  .st-list-item {
    min-height: 44px;
    padding: 10px 0;
    flex-wrap: wrap;
    gap: 8px;
  }
  .st-list-item-name {
    flex: 1 1 100%;
  }

  /* Container grid: single column */
  .st-container-grid {
    grid-template-columns: 1fr;
    padding: 8px 14px;
  }
  .st-container-card {
    padding: 12px 14px;
  }
  .st-container-actions {
    gap: 8px;
    margin-top: 8px;
  }
  .st-container-actions .btn-secondary {
    min-height: 36px;
  }

  /* Bag bar: full-width, bottom-fixed. The thumb strip takes a full row at
     phone width so the Clear / Check out buttons can span the second row
     with comfortable touch targets. */
  .st-bag-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .st-bag-head { order: 1; }
  .st-bag-thumbs {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }
  .st-bag-clear {
    order: 3;
    min-height: 44px;
  }
  .st-bag-checkout {
    order: 4;
    min-height: 44px;
    flex: 1;
  }
  .st-bag-thumb,
  .st-bag-thumb-overflow {
    width: 36px;
    height: 36px;
  }

  /* Print overlay: full-width on phone */
  .st-print-overlay {
    padding: 12px;
  }
  .st-print-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Empty state */
  .st-empty {
    padding: 30px 16px;
  }

  /* Watch banner */
  .st-watch-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  /* Scan FAB (floating action button) -- mobile only */
  .st-scan-fab {
    display: flex;
  }
}

/* -- Typography scaling for small screens -- */
@media (max-width: 640px) {
  .st-card-status-bar { font-size: 12px; }
  .st-card-who { font-size: 12px; }
  .st-container-meta { font-size: 12px; }
  .st-container-pill { font-size: 11px; padding: 2px 6px; }
}

/* -- Reduced motion for mobile -- */
@media (prefers-reduced-motion: reduce) {
  .st-detail-panel { animation: none; transform: none; }
  .st-detail-panel.closing { animation: none; }
  .st-detail-backdrop { animation: none; }
  .st-qa-success-fade { animation: none; opacity: 0; }
}