/* LockEngine, StorageStack design system.
   Rebrand 2026-05-22: adopts the StorageStack palette, Plus Jakarta Sans
   typography, pill buttons, and the design-system radii and shadows.
   Every class name is preserved. Colors are fixed StorageStack tokens;
   brand-init.js no longer injects per-tenant colors (migration Step 0.5).
   LockEngine's product accent is Sunset, the StorageStack default. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* LockEngine consumes the StorageStack tokens in design-system/tokens.css
     (loaded first). These app-level aliases keep the existing class names
     (--bg, --panel, --accent, --danger, ...) working while sourcing every
     value from the locked token palette. The raw --ss-* palette, radii, and
     shadows are intentionally NOT redefined here, so they fall through to
     tokens.css and stay in sync. No hardcoded colors live in this file. */

  /* (The former --brand-* layer was removed in migration Step 0.5: colors
     are fixed StorageStack tokens, with no per-tenant runtime injection.) */

  /* Surface aliases */
  --bg:       var(--color-surface-app);     /* app-shell surface (Bone) — brief update; Cream is marketing-only */
  --panel:    var(--ss-paper);              /* cards, modals, drawers, top bar */
  --panel-2:  var(--color-surface-muted);   /* table headers, chips, active tabs */
  --text:     var(--ss-ink);                /* primary text */
  --muted:    var(--ss-slate);              /* secondary text */
  --border:   var(--color-border-default);  /* hairline dividers */

  /* Action aliases, mapped to brand */
  --accent:    var(--color-action-primary);   /* focus ring, active tab, sunset */
  --accent-2:  var(--color-action-primary);   /* primary button base */
  --danger:    var(--color-state-danger);
  --success:   var(--color-state-success);

  /* Typography (font stacks only; sizes + colors come from tokens.css) */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-small); -webkit-font-smoothing: antialiased; }
a { color: var(--color-text-link); text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: var(--text-caption); }
.error { color: var(--danger); margin: 8px 0 0 0; }

/* QR retrieval page, state-aware guidance block. Renders below the
   phone form when the API returns a structured failure code (vacant
   pre-stage, balance pending, phone mismatch, etc.). Visually distinct
   from the inline .error span, guidance is informational not an error. */
.guidance {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
}
.guidance-title { margin: 0 0 8px 0; font-size: 15px; font-weight: 700; color: var(--text); }
.guidance-body  { font-size: 13px; line-height: 1.5; color: var(--text); }
.guidance-body p { margin: 0 0 8px 0; }
.guidance-body p:last-child { margin-bottom: 0; }
.guidance-body a { font-weight: 400; }

/* ---- Top bar ---- */
.top-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; gap: 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Brand block, the StorageStack stacked-bars mark next to a two-line
   stack: org name on top, tool name below. .logo lays the mark and the
   text column in a row; .logo-text stacks the two text lines. */
.logo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.logo-mark { display: inline-flex; flex-shrink: 0; }
.logo-mark svg { display: block; }
.logo-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
/* Product-first wordmark: "lockengine" with the brand accent on "engine". */
.logo-product {
  display: block;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--ss-ink);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.logo-product .accent { color: var(--ss-sunset); }
/* Operator context line ("for SUPERSTORAGE"), muted mono. The operator name
   itself is the [data-brand-name] node, swapped per tenant by brand-init.js. */
.logo-suite {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.env-chip { font-size: 11px; background: var(--panel-2); padding: 2px 8px; border-radius: var(--radius-pill); color: var(--muted); }

/* Global facility selector, lives in the top bar next to the env chip and
   drives every tab's facility-scoped data. */
.global-facility-select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-family: var(--font-sans);
  max-width: 240px;
  cursor: pointer;
}
.global-facility-select:hover { border-color: var(--muted); }
.global-facility-select:focus { outline: none; border-color: var(--accent); }
.tab-bar { display: flex; gap: 2px; flex-shrink: 0; }
.tab { background: transparent; color: var(--muted); border: none; border-bottom: 2.5px solid transparent; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: var(--font-sans); white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: var(--text-caption); color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.user-chip .btn-ghost { white-space: nowrap; }

/* ---- Notification badges on tabs / sub-tabs ----
   Danger-colored circle that hides itself when empty (count=0). */
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-state-danger);
  color: var(--color-text-on-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: var(--radius-pill);
  vertical-align: 1px;
  letter-spacing: 0;
}
.nav-badge:empty { display: none; }

/* ---- Collapsible section toggles ---- */
.collapse-toggle {
  display: inline-block;
  margin-left: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-caption);
  user-select: none;
  padding: 0 4px;
  border-radius: 4px;
}
.collapse-toggle:hover { color: var(--text); background: var(--panel-2); }

.collapse-footer {
  padding: 10px 14px;
  text-align: center;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
}
.collapse-footer a {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.collapse-footer a:hover { text-decoration: underline; }

/* ---- Main view ---- */
.view { padding: 32px 24px 64px; max-width: 1280px; margin: 0 auto; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-header h2 { margin: 0; font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: 700; letter-spacing: var(--ls-h2); }
.section-header__title { display: flex; flex-direction: column; gap: 4px; }
.page-crumb { font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.10em; color: var(--ss-slate); }

/* ---- Table ---- */
.table-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th, .table-wrap td { padding: 14px 16px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--ss-mist) 55%, var(--ss-paper)); font-variant-numeric: tabular-nums; }
.table-wrap th { padding: 10px 16px; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: var(--panel-2); font-weight: 700; }
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap tbody tr:hover td { background: var(--ss-cream); }

/* ---- Buttons ----
   Mirrors the StorageStack .btn system (tokens.css) onto the app's existing
   single-dash class names, so no markup/JS changes are needed. Shared base:
   pill, Bold, Iris focus ring, 44px touch target, soft hover transitions.
   The four tint variants (secondary/info/danger/warning) are new; the JS that
   renders row actions can opt into them so meaning reads at a glance. */
.btn-primary, .btn-primary-soft, .btn-secondary, .btn-ghost, .btn-info, .btn-success, .btn-danger, .btn-warning {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 12px 20px;
  font-family: var(--font-sans); font-size: var(--text-small); font-weight: 700; line-height: 1;
  border-radius: var(--radius-pill); border: var(--border-default) solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible,
.btn-info:focus-visible, .btn-success:focus-visible, .btn-danger:focus-visible,
.btn-warning:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-info:active,
.btn-success:active, .btn-danger:active, .btn-warning:active { transform: translateY(1px); }
.btn-primary[disabled], .btn-secondary[disabled], .btn-ghost[disabled], .btn-info[disabled],
.btn-success[disabled], .btn-danger[disabled], .btn-warning[disabled] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

/* Primary — Sunset (one per screen) */
.btn-primary { background: var(--color-action-primary); color: var(--color-text-on-primary); border-color: var(--color-action-primary); }
.btn-primary:hover { background: var(--color-action-primary-hover); border-color: var(--color-action-primary-hover); }
/* Secondary — ink-outlined neutral */
.btn-secondary { background: transparent; color: var(--color-text-primary); border-color: var(--ss-ink); }
.btn-secondary:hover { background: var(--color-action-ghost-hover); }
/* Ghost — light-outlined neutral utility (Reset, Cancel, Sign out) */
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--color-action-ghost-hover); border-color: var(--muted); }
/* Soft tints — row actions, color-coded by meaning. Hover deepens via filter
   (no hardcoded hex). info=Iris, success=green, danger=red, warning=honey. */
.btn-info    { background: var(--color-state-info-bg);    color: var(--color-state-info); }
.btn-success { background: var(--color-state-success-bg); color: var(--color-state-success); }
.btn-danger  { background: var(--color-state-danger-bg);  color: var(--color-state-danger); }
.btn-warning { background: var(--color-state-warning-bg); color: var(--color-state-warning); }
.btn-info:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover { filter: brightness(0.97); }
/* Soft Sunset — repeated constructive row actions (Assign Lock, Move-In when
   it's the row's primary, Apply Overlock, Activate, Mark Collected). Mirrors
   tokens.css .btn--primary-soft (#FFE2D0). Solid .btn-primary stays reserved
   for the one page-level hero per screen (Add Lock, Save lock policy). */
.btn-primary-soft { background: #FFE2D0; color: var(--ss-sunset); }
.btn-primary-soft:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary-soft:active { transform: translateY(1px); }
.btn-primary-soft:hover { filter: brightness(0.96); }

/* ---- Status bar ---- */
.status-bar { padding: 10px 20px; background: var(--panel); border-top: 1px solid var(--border); font-size: var(--text-caption); color: var(--muted); text-align: center; font-family: var(--font-mono); }

/* ---- Modal ---- */
.modal-host { position: fixed; inset: 0; background: rgba(31, 27, 46, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 22px; min-width: 420px; max-width: 90vw; box-shadow: var(--shadow-md); }
.modal-card h3 { margin: 0 0 14px 0; font-size: var(--text-body); font-weight: 700; }
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-row label { font-size: var(--text-caption); color: var(--muted); font-weight: 700; }
.form-row input, .form-row select { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: var(--radius-md); font-size: 13px; font-family: var(--font-sans); }
.form-row input:focus, .form-row select:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ---- Status badges (assignment status, etc.) ---- */
.badge { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill); font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; }
.badge-muted { background: var(--ss-mist); color: var(--ss-slate); }
.badge-info  { background: var(--color-state-info-bg); color: var(--color-state-info); }
.badge-ok    { background: var(--color-state-success-bg); color: var(--color-state-success); }
.badge-warn  { background: var(--color-state-warning-bg); color: var(--color-state-warning); }
.badge-error { background: var(--color-state-danger-bg); color: var(--color-state-danger); }

/* ---- Section header with multiple buttons ---- */
.header-actions { display: flex; gap: 8px; align-items: center; }
/* Small size modifier — mirrors the token .btn--sm (36px) for inline row actions. */
.btn-primary.small, .btn-primary-soft.small, .btn-secondary.small, .btn-ghost.small, .btn-info.small,
.btn-success.small, .btn-danger.small, .btn-warning.small {
  min-height: 36px; padding: 7px 13px; font-size: var(--text-caption);
}

/* ---- Modal help text ---- */
.modal-help { font-size: var(--text-caption); color: var(--muted); margin: -6px 0 14px 0; line-height: 1.5; padding: 8px 12px; background: var(--panel-2); border-left: 3px solid var(--accent-2); border-radius: var(--radius-sm); }
.modal-body { font-size: 13px; color: var(--text); margin: 0 0 18px 0; line-height: 1.5; white-space: pre-wrap; }

/* ---- Auth banner (top of view, shows when not signed in) ---- */
.auth-banner { padding: 12px 16px; margin: 0 0 16px 0; border-radius: var(--radius-md); font-size: 13px; line-height: 1.5; }
.auth-banner-error { background: var(--color-state-danger-bg); border: 1px solid var(--color-state-danger); color: var(--color-state-danger); }
.auth-banner-warn  { background: var(--color-state-warning-bg); border: 1px solid var(--color-state-warning); color: var(--color-state-warning); }
.auth-banner a { color: inherit; text-decoration: underline; }

/* ---- Sub-tabs (Assignments, Move-Ins | Overlocks) ---- */
.sub-tab-bar { display: flex; gap: 2px; margin: 0 0 12px 0; border-bottom: 1px solid var(--border); }
.sub-tab { background: transparent; color: var(--muted); border: none; padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 700; font-family: var(--font-sans); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sub-tab:hover { color: var(--text); }
.sub-tab.active { color: var(--text); border-bottom-color: var(--accent-2); }
.sub-view.hidden { display: none; }

/* Section heading, same row as its description + count badge */
.section-row { display: flex; align-items: center; gap: 10px; margin: 32px 0 6px 0; }
.section-row:first-child { margin-top: 6px; }
.subsection-title { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: 700; margin: 0; color: var(--text); letter-spacing: var(--ls-h3); }

/* Sortable column headers in the Overlocks tab tables */
.table-wrap th.sortable { cursor: pointer; user-select: none; }
.table-wrap th.sortable:hover { color: var(--text); }
.sort-indicator { font-size: 13px; opacity: 0.5; margin-left: 3px; vertical-align: middle; }
.sort-indicator.active { opacity: 1; color: var(--accent); }
.sort-indicator.muted { opacity: 0.3; }
.section-count { font-size: 11px; color: var(--muted); background: var(--panel-2); padding: 1px 8px; border-radius: var(--radius-pill); font-weight: 700; }
.section-desc { font-size: 11px; color: var(--muted); margin: 0 0 6px 0; line-height: 1.4; }
.section-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--muted); font-size: var(--text-small); text-align: center; }
.section-empty i { font-size: 22px; color: var(--ss-slate); opacity: 0.55; }

/* ---- Admin sections, collapsible cards ---- */
.admin-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.admin-section:first-of-type { margin-top: 0; }
.admin-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  user-select: none;
  transition: background 0.12s ease;
}
.admin-section > summary:hover { background: var(--panel-2); }
.admin-section[open] > summary { border-bottom: 1px solid var(--border); }
.admin-section > summary::-webkit-details-marker { display: none; }

/* Right-aligned chevron, points down when collapsed, up when open. */
.admin-section > summary::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.15s ease;
  margin-top: -4px;
}
.admin-section[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }

.admin-section-summary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.admin-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.1px;
}
.admin-section-sub {
  font-size: var(--text-caption);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
  text-align: left;
  max-width: none;
}

.admin-section-body {
  padding: 18px 20px 20px;
}

/* ---- Admin sub-cards, nested collapsible pattern ---- */
.admin-subcard {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.admin-subcard + .admin-subcard { margin-top: 12px; }
.admin-subcard > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  user-select: none;
  transition: background 0.12s ease;
}
.admin-subcard > summary:hover { background: var(--color-action-ghost-hover); }
.admin-subcard[open] > summary { border-bottom: 1px solid var(--border); }
.admin-subcard > summary::-webkit-details-marker { display: none; }
.admin-subcard > summary::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.15s ease;
  margin-top: -4px;
}
.admin-subcard[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.admin-subcard-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.admin-subcard-body {
  padding: 14px 16px 16px;
  background: var(--panel);
}

/* Tighten tables in the Overlocks sub-view */
#subview-overlock .table-wrap th,
#subview-overlock .table-wrap td { padding: 12px 14px; }
#subview-overlock .table-wrap th { padding: 10px 14px; font-size: var(--text-caption); }

/* ---- Dashboard ---- */
.dash-section-title { font-size: var(--text-caption); font-weight: 700; margin: 0 0 8px 0;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-bottom: 22px; }
.kpi-tile { display: block; padding: 16px 18px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none;
  color: inherit; box-shadow: var(--shadow-sm); transition: border-color 0.15s, box-shadow 0.15s; }
.kpi-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 6px; }
.kpi-value { font-size: var(--text-h2); font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -0.02em; }
.kpi-sub { margin-top: 6px; }
.dash-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-top: 24px; }
.dash-card { padding: 16px 18px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius-lg); display: block;
  color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); }
.dash-card.clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.dash-card.clickable:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }

/* Instant tooltip */
.instant-tooltip {
  position: fixed;
  background: var(--ss-ink);
  border: 1px solid var(--ss-ink);
  color: var(--ss-cream);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: 280px;
  z-index: 1000;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.dash-detail-cell { cursor: pointer; }
.dash-card-title { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 6px; }
.dash-card-value { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -0.02em; }
.dash-card-sub { font-size: var(--text-caption); color: var(--muted); margin-top: 4px; }
.dash-health-row { display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--border); }
.dash-health-row:last-child { border-bottom: none; }

/* ---- Audit / Activity Log ---- */

/* Event-type filter chips: toggleable pills above the activity table. */
.audit-type-chips { font-size: var(--text-caption); }
.audit-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; user-select: none; transition: all 0.15s; font-weight: 700; }
.audit-chip:hover { color: var(--text); border-color: var(--muted); }
.audit-chip.active { background: rgba(255, 107, 26, 0.12); color: var(--accent); border-color: var(--accent); }
.audit-chip .chip-count { font-size: 10px; opacity: 0.7; margin-left: 2px; }

/* Event-type pill (in table cell). Color-coded per event family. */
.event-pill { display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 2px 9px; border-radius: var(--radius-pill); letter-spacing: 0.2px; white-space: nowrap; }
.event-pill.assigned    { background: var(--color-state-info-bg); color: var(--color-state-info); }
.event-pill.removed     { background: var(--color-state-danger-bg); color: var(--color-state-danger); }
.event-pill.delivered   { background: var(--color-state-success-bg); color: var(--color-state-success); }
.event-pill.qr-success  { background: var(--color-state-success-bg); color: var(--color-state-success); }
.event-pill.qr-denied   { background: var(--color-state-warning-bg); color: var(--color-state-warning); }
.event-pill.ops         { background: var(--ss-mist); color: var(--ss-slate); }
.event-pill.manual      { background: var(--color-state-success-bg); color: var(--color-state-success); }

/* Clickable lock-serial cells. */
.lock-serial-link { color: var(--ss-iris); font-family: var(--font-mono); cursor: pointer; text-decoration: none; font-weight: 700; }
.lock-serial-link:hover { text-decoration: underline; }

/* ---- Per-lock activity drawer ---- */
.lock-drawer { position: fixed; inset: 0; z-index: 200; }
.lock-drawer.hidden { display: none; }
.lock-drawer-backdrop { position: absolute; inset: 0; background: rgba(31, 27, 46, 0.40); }
.lock-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 560px; max-width: 92vw;
  background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(31, 27, 46, 0.10); }
.lock-drawer-header { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); }
.lock-drawer-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.lock-drawer-body { padding: 18px 20px; overflow-y: auto; flex: 1; }

/* Vertical timeline rendering inside the drawer. */
.timeline { position: relative; padding-left: 16px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border); }
.timeline-event { position: relative; padding: 8px 0 14px 16px; }
.timeline-event::before { content: ''; position: absolute; left: -1px; top: 12px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--accent); }
.timeline-event .te-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.timeline-event .te-title { font-size: 13px; color: var(--text); margin-bottom: 4px; font-weight: 700; }
.timeline-event .te-detail { font-size: var(--text-caption); color: var(--muted); line-height: 1.5; }
/* Combo line in timeline events (per-lock + per-unit drawers). v0.4.177. */
.timeline-event .te-combo { margin-top: 4px; font-size: var(--text-caption); color: var(--muted); }
.timeline-event .te-combo .combo-num { font-family: var(--font-mono);
  font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 1px; }
/* Desktop activity table: combo run within the Detail column. v0.4.177. */
.combo-num { font-family: var(--font-mono); font-weight: 600; color: var(--text);
  letter-spacing: 0.5px; }
.timeline-event.assigned::before  { border-color: var(--ss-iris); }
.timeline-event.removed::before   { border-color: var(--color-state-danger); }
.timeline-event.delivered::before { border-color: var(--color-state-success); }
.timeline-event.ops::before       { border-color: var(--ss-slate); }
.timeline-event.manual::before    { border-color: var(--color-state-success); }
.timeline-event.qr-denied::before { border-color: var(--color-state-warning); }

/* ---- Public QR fallback page ---- */
body.public-page { background: var(--ss-cream); color: var(--ss-ink); }
.public-card { max-width: 420px; margin: 40px auto; background: var(--ss-paper); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-md); }
.public-card h1 { font-size: 20px; margin: 0 0 6px 0; font-weight: 700; }
.public-card label { display: block; font-size: var(--text-caption); color: var(--muted); margin: 14px 0 4px 0; }
.public-card input { width: 100%; padding: 11px; font-size: 15px; border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-sans); }
.public-card input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.public-card .btn-primary { width: 100%; margin-top: 14px; padding: 12px; font-size: var(--text-small); }
.public-card .muted { color: var(--muted); }
.mega-code { font-size: 52px; font-weight: 700; letter-spacing: 6px; text-align: center; margin: 16px 0; font-family: var(--font-mono); }
.public-footer { text-align: center; margin-top: 22px; }

/* ============================================================================
   Responsive layout, phones and small tablets
   ----------------------------------------------------------------------------
   Ported from the pre-migration sheet (v0.4.145) and re-tokenized for the
   StorageStack brand (v0.4.171). The desktop UI above is unchanged. Every rule
   here lives inside a max-width media query, so it only takes effect once the
   viewport is narrow enough that the fixed desktop layout would otherwise
   overflow or clip.

   Mobile tables become stacked cards (built by js/mobile-ui.js) and the nav
   collapses into a hamburger. The two base rules just below are NOT in a media
   query: .nav-toggle must default to hidden on desktop (otherwise it renders
   as a stray box left of the Home tab), and .global-search needs its layout in
   the sheet so the media query can override it. State colors map to the brand
   state tokens so mobile badges match the desktop pills.
   ============================================================================ */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  padding: 9px 13px;
  cursor: pointer;
}
.nav-toggle::before { content: '\2630'; }   /* hamburger glyph */

.global-search { display: flex; align-items: center; gap: 8px; min-width: 240px; }

/* Card lists are built by js/mobile-ui.js for every data table. They stay
   hidden on desktop (the real <table> shows); the media query below reveals
   them and hides the table once the viewport is narrow. */
.mc-list { display: none; }

@media (max-width: 768px) {

  /* ---- Top bar: brand + hamburger on row one, search on row two. The tab
     bar and user chip become a drop-down menu (see .nav-open below). ---- */
  .top-bar       { flex-wrap: wrap; padding: 8px 12px; gap: 8px 12px; }
  .brand         { order: 1; }
  .nav-toggle    { display: inline-flex; order: 2; margin-left: auto; }
  .global-search { order: 3; width: 100%; min-width: 0; }
  .global-facility-select { max-width: 150px; }

  /* Tab bar + user chip are the hamburger menu: hidden until #navToggle adds
     .nav-open to .top-bar, then revealed stacked under the search row. */
  .tab-bar {
    order: 4;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 2px;
  }
  .user-chip {
    order: 5;
    width: 100%;
    display: none;
    flex-wrap: wrap;
    white-space: normal;
  }
  .top-bar.nav-open .tab-bar,
  .top-bar.nav-open .user-chip {
    display: flex;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 8px;
  }
  .tab-bar .tab { width: 100%; text-align: left; }
  .top-bar.nav-open .nav-toggle::before { content: '\2715'; }   /* close glyph */

  /* ---- Main view: reclaim side padding a phone cannot spare ---- */
  .view { padding: 14px 12px; }
  .section-header,
  .header-actions { flex-wrap: wrap; gap: 8px; }
  /* Desktop section heads are --text-h2 (32px); scale to h3 so a phone heading
     does not eat the viewport, with a smaller step again at 420px below. */
  .section-header h2 { font-size: var(--text-h3); line-height: var(--lh-h3); }

  /* ---- Tables become hierarchical cards ----
     js/mobile-ui.js builds a .mc-list of designed cards next to each table
     and adds .mc-on to the wrap. The desktop <table> is only hidden here, it
     is never modified. A table with no card spec gets a plain label/value
     .mc-generic card, so nothing is ever left as a wide scrolling table. */
  .table-wrap.mc-on {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .table-wrap.mc-on table { display: none; }
  .mc-list { display: block; }

  .mc {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 15px 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
  }
  .mc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .mc-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.7px;
    text-transform: uppercase; color: var(--muted); }
  .mc-title { font-size: 25px; font-weight: 800; line-height: 1.05; color: var(--text); margin-top: 1px; }
  .mc-title.sm { font-size: 18px; font-weight: 700; }
  .mc-badge { flex-shrink: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px;
    text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
  .mc-badge.is-danger { background: var(--color-state-danger-bg); color: var(--color-state-danger); }
  .mc-badge.is-warn   { background: var(--color-state-warning-bg); color: var(--color-state-warning); }
  .mc-badge.is-ok     { background: var(--color-state-success-bg); color: var(--color-state-success); }
  .mc-badge.is-info   { background: var(--color-state-info-bg); color: var(--color-state-info); }
  .mc-badge.is-muted  { background: var(--panel-2); color: var(--muted); }

  .mc-sub { margin-top: 7px; }
  .mc-tenant { font-size: 15px; font-weight: 600; color: var(--text); }
  .mc-phone { font-size: 13px; color: var(--muted); margin-top: 1px; }

  .mc-stat { margin-top: 13px; }
  .mc-stat-num { font-size: 27px; font-weight: 800; line-height: 1; color: var(--text); }
  .mc-stat-num.danger { color: var(--color-state-danger); }
  .mc-stat-num.ok { color: var(--color-state-success); }
  .mc-stat-cap { font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    text-transform: uppercase; color: var(--muted); margin-top: 4px; }

  .mc-identity { margin-top: 13px; font-family: var(--font-mono);
    font-size: 13px; color: var(--text); letter-spacing: 0.2px; }
  .mc-identity .sep { color: var(--border); margin: 0 4px; }
  .mc-identity .k { color: var(--muted); }

  .mc-meta { margin-top: 9px; font-size: 12px; color: var(--muted); line-height: 1.45; }

  .mc-action { margin-top: 14px; }
  .mc-btn {
    display: block; width: 100%; text-align: center;
    border: 1px solid transparent; border-radius: 9px;
    padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .mc-btn.primary { background: var(--accent); color: var(--color-text-on-primary); border-color: var(--accent); }
  .mc-btn.danger  { background: var(--danger); color: var(--color-text-on-primary); border-color: var(--danger); }
  .mc-secondary { margin-top: 2px; text-align: center; }
  .mc-link-btn {
    background: none; border: none; cursor: pointer; margin-top: 6px;
    padding: 5px 6px; font-size: 13px; font-weight: 600; color: var(--accent);
  }
  .mc-note { margin-top: 13px; font-size: 12px; color: var(--muted); font-style: italic;
    background: var(--panel-2); border-radius: 8px; padding: 9px 11px; }

  /* activity feed — compact card variant */
  .mc.feed { padding: 13px 15px; }
  .mc-feed-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .mc-feed-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .mc-feed-line { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
  .mc-feed-line .mono { font-family: var(--font-mono);
    font-size: 13px; font-weight: 500; color: var(--muted); }
  /* Combo line: prominent monospace, between unit/lock line and meta line.
     Carries the operationally critical fact (the active code on the lock).
     v0.4.177. */
  .mc-feed-combo { margin-top: 6px; font-size: 13px; color: var(--muted);
    letter-spacing: 0.3px; }
  .mc-feed-combo .combo-num { font-family: var(--font-mono);
    font-size: 15px; font-weight: 600; color: var(--text);
    letter-spacing: 1px; }

  /* generic fallback card — label / value, used when a table has no spec */
  .mc-gen-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
  .mc-gen-row + .mc-gen-row { border-top: 1px solid var(--border); }
  .mc-gen-k { font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--muted); flex-shrink: 0; }
  .mc-gen-v { font-size: 13px; color: var(--text); text-align: right; }

  /* ---- Modals: fit the screen; the 420px min-width overflowed ---- */
  .modal-card {
    min-width: 0;
    width: 100%;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 16px;
  }
  .form-actions { flex-wrap: wrap; }

  /* ---- Inputs at 16px stop iOS from zoom-jumping on focus ---- */
  input, select, textarea { font-size: 16px; }
  #globalSearch { font-size: 16px !important; }   /* beats the inline 12px */

  /* ---- A little more thumb room on buttons ---- */
  .btn-primary, .btn-ghost, .btn-success, .btn-danger { padding: 9px 14px; }
  .btn-primary.small, .btn-ghost.small,
  .btn-success.small, .btn-danger.small { padding: 6px 10px; }

  /* ---- Misc ---- */
  .kpi-strip, .dash-cards-row { gap: 10px; }
  .instant-tooltip { width: min(280px, calc(100vw - 24px)); }
}

/* Extra-small phones */
@media (max-width: 420px) {
  .view              { padding: 12px 10px; }
  .kpi-value         { font-size: 26px; }
  .section-header h2 { font-size: 20px; }
}