/* LockEngine — SuperStorage brand-light theme.
   Token-swap migration 2026-05-02: every existing class continues to work,
   only the :root values + a handful of hardcoded dark-theme colors below
   were updated. The brand palette comes from /img/superstorage-logo.svg.
   To revert to the dark theme, restore the previous :root block. */

:root {
  /* Brand palette extracted from the SuperStorage logo SVG */
  --brand-navy:      #1861a0;  /* primary letterforms — main action color */
  --brand-navy-dark: #134e80;  /* hover/pressed for primary buttons */
  --brand-blue-soft: #8cb0d0;  /* logo soft outline — borders, focus rings */
  --brand-red:       #e33642;  /* logo accent — danger / errors */
  --brand-gray-mid:  #7a7c7b;  /* logo secondary text */

  /* Surface tokens — light theme */
  --bg:       #f6f7fa;  /* page background — soft warm gray */
  --panel:    #ffffff;  /* cards, modals, drawers, top bar */
  --panel-2:  #f1f3f7;  /* subtle surface — table headers, chips, active tabs */
  --text:     #1f2937;  /* primary text — dark slate, readable on white */
  --muted:    #6b7280;  /* secondary text */
  --border:   #e4e7ec;  /* hairline dividers */

  /* Action tokens, mapped to brand */
  --accent:    var(--brand-navy);   /* link color, focus indicator, active tab underline */
  --accent-2:  var(--brand-navy);   /* primary button base — same brand navy */
  --danger:    var(--brand-red);
  --success:   #1f9d6e;             /* logo doesn't define a green; muted brand-adjacent */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; }
a { color: var(--accent); text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.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: 8px;
  background: var(--panel-2, #f8f9fa);
  border-left: 3px solid var(--accent, #4a90e2);
}
.guidance-title { margin: 0 0 8px 0; font-size: 15px; font-weight: 600; 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: 500; }

/* ---- 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 — two-line stack: org name on top, tool name below.
   Both inline-flex children of .logo so the wrapper sizes to content
   and the rest of the top-bar can flex around it. white-space:nowrap
   prevents either line from breaking when the viewport gets tight. */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  letter-spacing: 0.3px;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.logo:hover .logo-brand { color: var(--accent); }
.logo-brand {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.logo-tool {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.env-chip { font-size: 11px; background: var(--panel-2); padding: 2px 8px; border-radius: 10px; 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: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  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; padding: 8px 14px; cursor: pointer; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.tab:hover { color: var(--text); background: var(--panel-2); }
.tab.active { color: var(--text); background: var(--panel-2); }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.user-chip .btn-ghost { white-space: nowrap; }

/* ---- Notification badges on tabs / sub-tabs ----
   Brand-red circle that hides itself when empty (count=0).
   Empty + display:none rule keeps the tab text from getting a stray
   margin when there's no notification to show. */
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand-red);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  vertical-align: 1px;
  letter-spacing: 0;
}
.nav-badge:empty { display: none; }

/* ---- Collapsible section toggles ----
   Header chevron + footer "More" link share the same data-collapse-toggle
   attribute. Both are clickable, both fire the same handler. */
.collapse-toggle {
  display: inline-block;
  margin-left: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  user-select: none;
  padding: 0 4px;
  border-radius: 3px;
}
.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: 24px; max-width: 1200px; margin: 0 auto; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-header h2 { margin: 0; font-size: 18px; font-weight: 600; }

/* ---- Table ---- */
.table-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap th, .table-wrap td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.table-wrap th { font-size: 12px; text-transform: uppercase; color: var(--muted); background: var(--panel-2); }
.table-wrap tr:last-child td { border-bottom: none; }

/* ---- Buttons ---- */
.btn-primary, .btn-ghost, .btn-success { font-size: 13px; border-radius: 6px; padding: 7px 12px; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--accent-2); color: white; border-color: var(--accent-2); }
/* Light-theme hover darkens (dark-theme version lightened); pulls from brand-navy-dark */
.btn-primary:hover { background: var(--brand-navy-dark); border-color: var(--brand-navy-dark); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
/* Success — used for "completion" actions like Mark Removed (legacy).
   Distinct from primary so staff can scan a row and see "this is the
   green close-it-out button" vs "this is the blue go-do-it button". */
.btn-success { background: var(--success); color: #0e0e10; border-color: var(--success); }
.btn-success:hover { filter: brightness(1.08); }

/* ---- Status bar ---- */
.status-bar { padding: 8px 20px; background: var(--panel); border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }

/* ---- Modal ---- */
.modal-host { position: fixed; inset: 0; background: rgba(15, 23, 42, 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: 10px; padding: 22px; min-width: 420px; max-width: 90vw; }
.modal-card h3 { margin: 0 0 14px 0; font-size: 16px; }
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-row label { font-size: 12px; color: var(--muted); }
.form-row input, .form-row select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ---- Status badges (assignment status, etc.) ----
   Light-theme: soft tinted background + saturated dark text. Brand colors
   used where relevant (info → navy, error → brand red). */
.badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 500; letter-spacing: 0.3px; white-space: nowrap; }
.badge-muted { background: #e5e7eb; color: #4b5563; }
.badge-info  { background: rgba(24, 97, 160, 0.10); color: #1861a0; }   /* brand navy */
.badge-ok    { background: rgba(31, 157, 110, 0.12); color: #15734f; }
.badge-warn  { background: rgba(217, 119, 6, 0.12); color: #92400e; }
.badge-error { background: rgba(227, 54, 66, 0.12); color: #b1232d; }   /* brand red */

/* ---- Section header with multiple buttons ---- */
.header-actions { display: flex; gap: 8px; align-items: center; }
.btn-primary.small, .btn-ghost.small, .btn-success.small { padding: 4px 8px; font-size: 11px; }

/* ---- Modal help text ---- */
.modal-help { font-size: 12px; color: var(--muted); margin: -6px 0 14px 0; line-height: 1.5; padding: 8px 10px; background: var(--panel-2); border-left: 3px solid var(--accent-2); border-radius: 4px; }
/* Used by showAlert / confirmDialog — plain message body in the modal */
.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) ----
   Light-theme: dark saturated text on tinted light background. */
.auth-banner { padding: 12px 16px; margin: 0 0 16px 0; border-radius: 6px; font-size: 13px; line-height: 1.5; }
.auth-banner-error { background: rgba(227, 54, 66, 0.08); border: 1px solid rgba(227, 54, 66, 0.35); color: #8b1a22; }
.auth-banner-warn  { background: rgba(217, 119, 6, 0.08); border: 1px solid rgba(217, 119, 6, 0.35); color: #78350f; }
.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; 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: baseline; gap: 8px; margin: 18px 0 4px 0; }
.section-row:first-child { margin-top: 6px; }
.subsection-title { font-size: 12px; font-weight: 600; margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }

/* 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: 10px; opacity: 0.5; margin-left: 2px; }
.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 7px; border-radius: 9px; font-weight: 500; }
.section-desc { font-size: 11px; color: var(--muted); margin: 0 0 6px 0; line-height: 1.4; }
.section-empty { font-size: 12px; color: var(--muted); padding: 4px 0 6px 0; font-style: italic; }

/* Admin tab collapsible sections (Lock Policy, SMS Templates, Facility Settings).
   Native <details>/<summary> with custom chevron, panel background, and a
   tighter top border so each section reads as its own block. Collapsed
   by default keeps the page short; open shows the body padded out. */
.admin-section { border-top: 1px solid var(--border); padding: 12px 0 8px; }
.admin-section:first-of-type { border-top: 0; padding-top: 0; }
.admin-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  user-select: none;
}
.admin-section > summary::-webkit-details-marker { display: none; }
.admin-section > summary::before {
  content: '▸';
  display: inline-block;
  width: 14px;
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.12s ease;
  margin-right: 4px;
}
.admin-section[open] > summary::before { transform: rotate(90deg); }
.admin-section-title { font-size: 14px; font-weight: 600; color: var(--text); }
.admin-section-sub   { text-align: right; max-width: 520px; line-height: 1.4; }
.admin-section-body  { padding: 8px 0 16px 18px; }

/* Tighten tables in the Overlocks sub-view */
#subview-overlock .table-wrap th,
#subview-overlock .table-wrap td { padding: 7px 12px; }
#subview-overlock .table-wrap th { font-size: 11px; }

/* ---- Dashboard ---- */
.dash-section-title { font-size: 12px; font-weight: 600; 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: 14px 18px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; text-decoration: none;
  color: inherit; transition: border-color 0.15s; }
.kpi-tile:hover { border-color: var(--accent); }
.kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.4px; margin-bottom: 6px; }
.kpi-value { font-size: 32px; font-weight: 600; color: var(--text); line-height: 1.1; }
.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: 14px 18px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px; display: block;
  color: inherit; text-decoration: none; }
.dash-card.clickable { cursor: pointer; transition: border-color 0.15s; }
.dash-card.clickable:hover { border-color: var(--accent); }

/* Instant tooltip — JS-rendered floating element appended to body, so it
   escapes any ancestor overflow:hidden / overflow:auto clipping. Position
   computed in JS based on the trigger element's bounding rect.
   Triggered by attaching mouseenter/mouseleave listeners on [data-tooltip]
   elements (see attachInstantTooltip in app.js). */
.instant-tooltip {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: 280px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  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: 600; color: var(--text); line-height: 1.1; }
.dash-card-sub { font-size: 12px; 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: 12px; }
.audit-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; user-select: none; transition: all 0.15s; }
.audit-chip:hover { color: var(--text); border-color: var(--muted); }
.audit-chip.active { background: rgba(24, 97, 160, 0.10); 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.
   Light-theme: tinted background + saturated dark text for legibility. */
.event-pill { display: inline-block; font-size: 10.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 10px; letter-spacing: 0.2px; white-space: nowrap; }
.event-pill.assigned    { background: rgba(24, 97, 160, 0.10); color: #1861a0; }   /* brand navy */
.event-pill.removed     { background: rgba(227, 54, 66, 0.12); color: #b1232d; }   /* brand red */
.event-pill.delivered   { background: rgba(31, 157, 110, 0.12); color: #15734f; }
.event-pill.qr-success  { background: rgba(31, 157, 110, 0.10); color: #15734f; }
.event-pill.qr-denied   { background: rgba(217, 119, 6, 0.12); color: #92400e; }
.event-pill.ops         { background: rgba(122, 124, 123, 0.18); color: #4b5563; } /* logo gray */
.event-pill.manual      { background: rgba(31, 157, 110, 0.12); color: #15734f; }

/* Clickable lock-serial cells — show they open the drawer. */
.lock-serial-link { color: var(--accent); cursor: pointer; text-decoration: none; }
.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(15, 23, 42, 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(15, 23, 42, 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; }
.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: 500; }
.timeline-event .te-detail { font-size: 12px; color: var(--muted); line-height: 1.5; }
.timeline-event.assigned::before  { border-color: #1861a0; }   /* brand navy */
.timeline-event.removed::before   { border-color: #b1232d; }   /* brand red */
.timeline-event.delivered::before { border-color: #15734f; }
.timeline-event.ops::before       { border-color: #6b7280; }
.timeline-event.manual::before    { border-color: #15734f; }
.timeline-event.qr-denied::before { border-color: #92400e; }

/* ---- Public QR fallback page ---- */
body.public-page { background: #f6f7fa; color: #111; }
.public-card { max-width: 420px; margin: 40px auto; background: white; border: 1px solid #e4e6ec; border-radius: 12px; padding: 28px; }
.public-card h1 { font-size: 20px; margin: 0 0 6px 0; }
.public-card label { display: block; font-size: 12px; color: #666; margin: 14px 0 4px 0; }
.public-card input { width: 100%; padding: 10px; font-size: 15px; border: 1px solid #d0d2dc; border-radius: 6px; }
.public-card .btn-primary { width: 100%; margin-top: 14px; padding: 11px; font-size: 14px; }
.public-card .muted { color: #666; }
.mega-code { font-size: 52px; font-weight: 700; letter-spacing: 6px; text-align: center; margin: 16px 0; font-family: ui-monospace, SF Mono, Menlo, monospace; }
.public-footer { text-align: center; margin-top: 22px; }