/* ==========================================================================
   LK Snack — shared design system
   One consistent palette/spacing scale used by every page (the original
   app had a slightly different accent color per screen; this file is the
   single source of truth now).
   ========================================================================== */

:root {
  --accent: #0F6E56;
  --accent-dark: #0B5943;
  --accent-tint: #E1F5EE;
  --accent-tint-border: #BFE3D8;

  --bg: #FAFAF8;
  --card: #ffffff;
  --ink: #1C1C1A;
  --muted: #6b7280;
  --line: #E4E2DC;
  --line-soft: #EFEDE7;

  --red: #DC2626;
  --red-soft: #FEE2E2;
  --orange: #D97706;
  --orange-soft: #FEF3C7;
  --green-ok: #16A34A;

  --shadow: 0 1px 3px rgba(28,28,26,0.06);
  --radius: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

body { padding-bottom: 12px; }

a { color: inherit; text-decoration: none; }

.app-shell {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 100px;
}

/* ---------- Hero / header ---------- */

.hero {
  margin: 12px;
  padding: 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  box-shadow: var(--shadow);
}

.hero.plain {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}

.hero .title { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.hero .subtitle { font-size: 13px; opacity: 0.9; }
.hero.plain .subtitle { color: var(--muted); opacity: 1; }

/* ---------- Panels / cards ---------- */

.panel {
  background: var(--card);
  margin: 12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.field-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 5px;
}

/* Field label with an inline "+ New X" quick-add action next to it */
.field-label-row {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;
}
.field-label-row .field-label { margin-bottom: 0; }
.quick-add-link {
  background: none; border: none; color: var(--accent-dark); font-weight: 800;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
  cursor: pointer; padding: 0; margin: 0; width: auto;
}
.quick-add-link:hover { transform: none; box-shadow: none; text-decoration: underline; }

/* Platform picker (Quick Checkout) */
.platform-picker {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px;
}
.platform-btn {
  background: var(--bg); border: 2px solid transparent; border-radius: 12px;
  padding: 10px 4px 8px; font-size: 11px; font-weight: 800; color: var(--muted);
  cursor: pointer; text-align: center; transition: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.platform-btn.selected {
  background: var(--accent-tint); border-color: var(--accent); color: var(--accent-dark);
}
.platform-logo {
  width: 30px; height: 30px; border-radius: 8px; object-fit: cover;
  flex-shrink: 0; margin: 0; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.platform-logo-emoji {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

input, select, textarea, button {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: white;
  outline: none;
  margin-bottom: 10px;
  box-sizing: border-box;
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15,110,86,0.12);
}

input:disabled, button:disabled {
  opacity: 0.5; cursor: not-allowed;
}
input:read-only {
  background: var(--bg); color: var(--ink);
}

.banner-warn {
  background: var(--orange-soft); color: var(--orange); padding: 10px 12px;
  border-radius: 10px; font-size: 12px; font-weight: 700; margin-top: 8px; line-height: 1.4;
}

/* Informational (non-warning) banner - currently used for "editing an
   existing order" on Quick Checkout. JS toggles display:flex/none directly
   (same pattern as the negative-stock banner), so this only sets the
   layout/look for when it's shown. */
.banner-info {
  background: var(--accent-tint); color: var(--accent-dark); border: 1px solid var(--accent-tint-border);
  padding: 10px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; line-height: 1.4;
  margin: 0 12px 12px; align-items: center; justify-content: space-between; gap: 10px;
}
.banner-info button { width: auto; padding: 6px 12px; font-size: 11px; margin: 0; flex-shrink: 0; }

/* ---------- Settings: toggle switch + PIN keypad ---------- */
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 6px 0;
}
.setting-row .setting-text { flex: 1; min-width: 0; }
.setting-row .setting-title { font-weight: 800; font-size: 13.5px; }
.setting-row .setting-desc { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

.toggle-switch { position: relative; display: inline-block; width: 46px; height: 27px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-switch .slider {
  position: absolute; inset: 0; background: var(--line); border-radius: 999px;
  transition: background-color .15s ease;
}
.toggle-switch .slider::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 21px; height: 21px;
  background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.toggle-switch input:checked + .slider { background: var(--accent); }
.toggle-switch input:checked + .slider::before { transform: translateX(19px); }

.pin-input {
  font-size: 26px !important; text-align: center; letter-spacing: 10px; font-weight: 800;
}
.pin-input::placeholder { letter-spacing: normal; font-size: 13px; font-weight: 600; }

/* Smaller variant for the "Change PIN" form - three fields at once, so the
   big dramatic keypad style used for unlock/setup would crowd or overflow
   its placeholder text here. */
.pin-input-sm {
  font-size: 15px !important; text-align: center; letter-spacing: 3px; font-weight: 800;
}
.pin-input-sm::placeholder { letter-spacing: normal; font-size: 13px; font-weight: 600; }

.lock-icon { font-size: 34px; text-align: center; margin-bottom: 6px; }

/* Settings: live "active now" presence count next to the sitewide login's
   log-out-everyone control. */
.active-sessions-box {
  display: flex; align-items: center; gap: 12px; background: var(--accent-tint);
  border: 1px solid var(--accent-tint-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.active-sessions-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(15,110,86,0.45); animation: activeSessionsPulse 2s infinite;
}
.active-sessions-dot.idle { background: var(--muted); animation: none; box-shadow: none; }
.active-sessions-count { font-size: 20px; font-weight: 900; color: var(--accent-dark); line-height: 1.2; }
.active-sessions-label { font-size: 11px; font-weight: 700; color: var(--muted); }
@keyframes activeSessionsPulse {
  0% { box-shadow: 0 0 0 0 rgba(15,110,86,0.45); }
  70% { box-shadow: 0 0 0 8px rgba(15,110,86,0); }
  100% { box-shadow: 0 0 0 0 rgba(15,110,86,0); }
}

button {
  background: var(--accent);
  color: white;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,110,86,.22); }
button:active { transform: translateY(0) scale(.98); }
button:disabled { opacity: .6; cursor: not-allowed; transform:none; box-shadow:none; }

.btn-outline {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-danger { background: var(--red); }

.two-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.three-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* ---------- Mini stat cards ---------- */

.mini-card {
  background: #f8faf8;
  border: 1px solid var(--line);
  padding: 12px;
  border-radius: 12px;
  text-align: center;
}
.mini-label { font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.mini-value { font-size: 18px; font-weight: 900; color: var(--accent-dark); }

/* ---------- Category tabs ---------- */

.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
}
.category-tab {
  width: auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  color: var(--muted);
  flex-shrink: 0;
  margin: 0;
}
.category-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Product grid (Stock In / Stock Out / Stock Order) ---------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.product-card {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  text-align: left;
}
.product-card:hover { border-color: var(--accent); }
.product-card img {
  width: 100%; height: 78px; object-fit: cover; border-radius: 8px;
  background: var(--bg); display: block;
}
.product-card .p-name { font-size: 11.5px; font-weight: 700; margin-top: 6px; line-height: 1.25; }
.product-card .p-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ---------- Product cards (Stock Take) ---------- */

.card {
  background: white;
  border-radius: var(--radius);
  padding: 12px;
  margin: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
}
.card.counted { border-color: var(--accent); background: #fbfffc; }
.card img {
  width: 88px; height: 88px; object-fit: contain; border-radius: 12px;
  background: #f3f4f6; flex-shrink: 0;
}
.card .info { flex: 1; min-width: 0; }
.card .top-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.card .product { font-weight: 900; font-size: 14px; line-height: 1.3; margin-bottom: 4px; }
.card .variation { color: var(--muted); font-size: 12px; margin-bottom: 8px; }

.category-pill {
  display: inline-block; font-size: 11px; background: var(--accent-tint);
  color: var(--accent-dark); padding: 5px 9px; border-radius: 999px; font-weight: 800;
}
.status-pill {
  font-size: 11px; background: #f3f4f6; color: var(--muted); padding: 5px 8px;
  border-radius: 999px; font-weight: 800; white-space: nowrap;
}
.status-pill.done { background: var(--accent-tint); color: var(--accent-dark); }

.qty-row { display: flex; gap: 8px; }
.qty-box { flex: 1; }
.qty-box input { margin-bottom: 0; font-size: 16px; font-weight: 800; text-align: center; padding: 10px; background: #f9fafb; }

/* Units-per-carton chip + inline editor (Stock Take) - lets staff set a
   product's carton size right where they're counting it, without a trip to
   Admin. Deliberately does NOT auto-convert whatever they type into Carton/
   Loose - those stay two independent counts (a carton sale and a loose-pack
   sale are genuinely different things, not just untidy counting) - this is
   purely a quiet reference number for reporting/forecasting elsewhere. */
.carton-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  padding: 6px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  min-height: 26px; box-sizing: border-box; touch-action: manipulation;
}
.carton-chip.set { background: var(--accent-tint); border-color: var(--accent-tint-border); color: var(--accent-dark); }
.carton-chip.set:hover { border-color: var(--accent); }
.carton-chip.unset { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.carton-chip.unset:hover { border-color: #F5C445; }

.carton-edit-row {
  display: none; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 10px;
  background: var(--bg); border: 1px dashed var(--line); border-radius: 10px;
}
.carton-edit-row.open { display: flex; }
.carton-edit-row label { font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.carton-edit-row input { width: 60px; margin: 0; padding: 6px 8px; font-size: 13px; text-align: center; font-weight: 800; }
.carton-edit-row button { width: auto; margin: 0; padding: 6px 12px; font-size: 11.5px; font-weight: 800; }

.norm-line { margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--muted); min-height: 1px; }

/* ---------- Steppers (Stock In / Out qty selection) ---------- */

.variation-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  background: #fff; border-radius: 10px; padding: 10px; margin-bottom: 8px;
}
.var-name { font-size: 12.5px; font-weight: 700; }
/* Variation name + its carton-size chip (Stock In) side by side, wrapping
   on narrow widths rather than forcing the row wider. */
.var-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.qty-control { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: var(--accent-tint); color: var(--accent-dark); font-size: 16px; font-weight: 700;
  margin: 0; padding: 0; cursor: pointer;
}
.qty-display { min-width: 30px; text-align: center; font-size: 14px; font-weight: 700; }

/* ---------- Demand Insight (Stock Order) ---------- */
/* Sales trend + reorder suggestion shown under the selected product on Stock
   Order. Only ever reads units_per_carton to compute a suggested carton
   quantity - never writes to Carton/Loose anywhere, same rule as the Stock
   Take carton chip above. */

.insight-panel {
  margin: 14px 0; padding: 14px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 14px;
}
.insight-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.insight-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.insight-tabs { display: flex; gap: 3px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.insight-tab {
  border: none; background: none; padding: 5px 12px; font-size: 11.5px; font-weight: 700;
  color: var(--muted); border-radius: 999px; cursor: pointer; margin: 0; width: auto;
}
.insight-tab.active { background: var(--accent); color: #fff; }

.insight-var-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.insight-var-tab {
  border: 1px solid var(--line); background: #fff; padding: 6px 12px; font-size: 11.5px; font-weight: 700;
  color: var(--ink); border-radius: 999px; cursor: pointer; margin: 0; width: auto;
}
.insight-var-tab.active { background: var(--accent-tint); border-color: var(--accent-tint-border); color: var(--accent-dark); }

.insight-chart {
  height: 150px; margin-bottom: 12px; background: #fff; border-radius: 10px;
  padding: 8px; border: 1px solid var(--line);
}

.insight-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.istat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; text-align: center; }
.istat-num { font-size: 15px; font-weight: 900; color: var(--accent-dark); }
.istat-lbl { font-size: 9.5px; font-weight: 700; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.02em; }

.coverage-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.coverage-label { font-size: 12px; font-weight: 700; color: var(--ink); }
.coverage-hint { font-size: 10.5px; color: var(--muted); margin-left: auto; }

.suggest-box {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--accent-tint-border); border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.suggest-icon { font-size: 20px; flex-shrink: 0; }
.suggest-text { flex: 1; min-width: 0; }
.suggest-label { font-size: 11.5px; font-weight: 800; color: var(--ink); }
.suggest-detail { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.suggest-num {
  font-size: 20px; font-weight: 900; color: var(--accent-dark); text-align: right;
  white-space: nowrap; flex-shrink: 0;
}
.suggest-num span { display: block; font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; }

.apply-btn { background: var(--accent); }

.insight-no-carton {
  background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E;
  font-size: 11.5px; font-weight: 700; padding: 10px 12px; border-radius: 10px; margin-bottom: 6px;
}

@media (max-width: 460px) {
  .insight-stats { grid-template-columns: repeat(2, 1fr); }
  .suggest-num { font-size: 17px; }
}

/* ---------- Status badges ---------- */

.badge { padding: 8px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.badge.out { background: var(--red-soft); color: var(--red); }
.badge.low { background: var(--orange-soft); color: var(--orange); }
.badge.ok { background: var(--accent-tint); color: var(--accent-dark); }

/* Stock Take progress card - lives inside the plain (white) hero, same
   quiet-card vibe as Quick Checkout's batch-strip rather than the old
   bold gradient banner treatment. */
.st-progress-box {
  margin-top: 16px; background: var(--accent-tint); border: 1px solid var(--accent-tint-border);
  border-radius: 12px; padding: 12px;
}
.st-progress-row {
  display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px;
  font-weight: 800; color: var(--accent-dark);
}
.st-progress-track {
  height: 10px; background: #fff; border: 1px solid var(--accent-tint-border);
  border-radius: 999px; overflow: hidden;
}
.st-progress-fill {
  height: 100%; width: 0%; background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 999px; transition: width .25s ease;
}

/* ---------- Tables ---------- */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #f1f5f2; text-align: left; padding: 10px; font-weight: 800; }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; }

/* ---------- Empty / loading states ---------- */

.empty {
  margin: 16px 12px; padding: 28px 16px; background: white; border-radius: var(--radius);
  text-align: center; color: var(--muted); box-shadow: var(--shadow); font-weight: 700;
}
.loading-box {
  margin: 16px 12px; padding: 40px 16px; background: white; border-radius: var(--radius);
  text-align: center; color: var(--accent-dark); box-shadow: var(--shadow); font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 5px solid var(--accent-tint); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.spinner-sm { display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation: spin .6s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Status / cart lines ---------- */

.status-msg { text-align: center; font-weight: 800; font-size: 12px; color: var(--muted); margin-bottom: 6px; min-height: 16px; }
.status-msg.success { color: var(--accent-dark); }
.status-msg.error { color: var(--red); }

.cart-empty {
  background: var(--bg); border: 1px dashed var(--line); border-radius: 10px;
  padding: 20px 14px; text-align: center; font-size: 12px; color: var(--muted);
}
.cart-group { margin-bottom: 10px; }
.cart-group-name { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.cart-line {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.cart-line .cl-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.cart-line .cl-remove { color: var(--red); cursor: pointer; font-size: 14px; margin-left: 8px; }
.cart-total { text-align: right; font-size: 13px; font-weight: 800; color: var(--accent-dark); padding-top: 8px; border-top: 1px solid var(--line-soft); margin-top: 4px; }

/* ---------- List rows (Home / Admin index) ---------- */

.list { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.list-row {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; font-family: inherit; min-height: 64px; box-sizing: border-box;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--line-soft); }
.list-icon {
  width: 46px; height: 46px; border-radius: 13px; background: var(--accent-tint); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 21px;
}
.list-text { flex: 1; min-width: 0; }
.list-title { font-size: 15px; font-weight: 800; }
.list-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.chevron { color: #B4B2A9; font-size: 20px; flex-shrink: 0; }

/* Soft tinted icon backgrounds so the list doesn't read as one flat block
   of identical rows - each section still shares the panel/border styling,
   just the icon chip color varies by function. */
.list-icon.tint-blue   { background: #E8F0FC; }
.list-icon.tint-orange { background: #FCEFE3; }
.list-icon.tint-purple { background: #F1ECFB; }
.list-icon.tint-amber  { background: #FCF4DC; }
.list-icon.tint-indigo { background: #ECEDFC; }
.list-icon.tint-rose   { background: #FCEAEF; }
.list-icon.tint-brown  { background: #F5EBE0; }
.list-icon.tint-slate  { background: #ECEEF0; }

/* ==========================================================================
   Polished dashboard components - shared "console" visual language used on
   Home and carried into the Stock In / Stock Out wizards, so numbers-heavy
   screens across the app read as one consistent system rather than each
   page inventing its own summary widget.
   ========================================================================== */

.section-label-row { display: flex; align-items: center; gap: 10px; margin: 20px 16px 8px; }
.section-label-row .section-label { margin: 0; white-space: nowrap; font-size: 11.5px; }
.section-label-row .rule { flex: 1; height: 1px; background: var(--line); }

.section-label {
  margin: 22px 16px 8px; font-size: 12px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.section-label:first-of-type { margin-top: 6px; }

/* Home dashboard shell - hero + KPI strip + grouped tool grid, all one flex
   column so the whole page can fit exactly one screen (no scroll) on
   tablet/desktop; on phones it just flows normally and scrolls like every
   other page in the app. */
.home-shell { display: flex; flex-direction: column; gap: 10px; }

.home-hero {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: white;
  border-radius: var(--radius); box-shadow: 0 6px 18px rgba(15,110,86,0.22);
  padding: 16px 20px; margin: 12px 12px 0; position: relative; overflow: hidden;
}
.home-hero::after {
  content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255,255,255,0.08);
}
.home-hero .title { font-size: 22px; font-weight: 800; position: relative; }
.home-hero .subtitle { font-size: 13px; color: rgba(255,255,255,0.85); margin-top: 3px; position: relative; }

/* Personal "log out this device" - only ever shown when the sitewide login
   gate (site_auth.py) is actually on, same condition Settings uses for its
   "Log out all devices" panel. This one just ends the current device's own
   session (no admin PIN needed) - the admin-only "log out everyone" stays
   in Settings, since that's the more drastic, deliberate action. */
.hero-logout-btn {
  position: absolute; top: 14px; right: 16px; z-index: 2; width: auto; margin: 0;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); color: white;
  font-size: 11px; font-weight: 800; padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
.hero-logout-btn:hover { background: rgba(255,255,255,0.28); }

/* KPI strip - individual cards, color-coded bottom border per stat, plus a
   4th "link" tile straight into Stock Overview (that page IS the detailed
   view behind these very numbers). */
.kpi-strip { display: flex; gap: 10px; margin: 12px; }
.kpi-cell {
  flex: 1; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 8px; text-align: center; border-bottom: 3px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.kpi-cell.c-products { border-bottom-color: var(--accent); }
.kpi-cell.c-low { border-bottom-color: var(--orange); }
.kpi-cell.c-pending { border-bottom-color: #6366F1; }
.kpi-num { font-size: 21px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.kpi-num.warn { color: #C2762B; }
.kpi-lbl { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

.kpi-cell.kpi-link { background: var(--accent); color: white; gap: 2px; cursor: pointer; }
.kpi-link .kpi-link-icon { font-size: 17px; }
.kpi-link .kpi-lbl { color: rgba(255,255,255,0.85); }

/* Sales Dashboard highlight banner - a full-width row between the KPI strip
   and "Daily Tools". White card (not another green bar - the header right
   above it is already solid green, so a second one just blurs together)
   with a colored accent edge, plus a real live number (today's sales) so
   it carries actual content instead of being an empty stretched-out strip. */
.dash-highlight {
  display: flex; align-items: center; gap: 16px; margin: 0 12px;
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px;
}
.dash-highlight:hover { border-color: var(--accent); border-left-color: var(--accent); }
.dh-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--accent-tint); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font-size: 23px; flex-shrink: 0;
}
.dh-text { flex: 1; min-width: 0; }
.dh-title-row { display: flex; align-items: center; gap: 8px; }
.dh-title { font-size: 16.5px; font-weight: 800; color: var(--ink); }
.dh-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  background: var(--accent-tint); color: var(--accent-dark); padding: 3px 8px; border-radius: 999px;
}
.dh-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-stat {
  text-align: right; flex-shrink: 0; padding-right: 18px; margin-right: 2px; border-right: 1px solid var(--line-soft);
}
.dh-stat-num { font-size: 21px; font-weight: 900; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.dh-stat-lbl { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px; }
.dh-arrow { font-size: 22px; font-weight: 800; color: var(--accent-dark); flex-shrink: 0; }

/* Narrow phones - icon + title/desc + live stat + arrow no longer fit on
   one row without the badge colliding into the stat. Wrap onto two rows
   instead: icon+title+desc on top, stat+arrow on their own row below
   (indented to align under the text, not the icon). */
@media (max-width: 460px) {
  .dash-highlight { flex-wrap: wrap; row-gap: 10px; }
  .dh-text { flex: 1 1 100%; }
  .dh-stat {
    flex: 1; text-align: left; border-right: none; padding-right: 0; margin-right: 0;
    margin-left: 68px; display: flex; align-items: baseline; gap: 6px;
  }
  .dh-stat-lbl { margin-top: 0; }
  .dh-arrow { margin-left: auto; }
}

/* Tool cards - "Daily Tools" (3) and "Other Operations" (4) rows on Home;
   same card size/weight in both rows, just grouped and labeled by how
   often each is actually used. */
.tools-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px; }
.feature-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px; box-shadow: 0 3px 12px rgba(28,28,26,0.05); text-align: left; position: relative;
  display: flex; flex-direction: column; gap: 8px; min-height: 116px;
  transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer;
}
.feature-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(15,110,86,0.10); }
.feature-icon {
  width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; font-size: 17px; color: white;
}
.feature-title { font-size: 12.5px; font-weight: 800; margin-top: auto; letter-spacing: -0.1px; }
.feature-desc { font-size: 10px; color: var(--muted); line-height: 1.3; }
.feature-meta {
  font-size: 9.5px; font-weight: 700; color: var(--muted); padding-top: 7px;
  border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 4px;
}
.feature-meta.attn { color: #C2762B; }
.feature-meta .m-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .7; }

/* Bolder, saturated icon fills (white icon on solid color) rather than pale
   tints, for a more "professional POS" look at a glance. */
.tint-blue .feature-icon { background: #3B82F6; }
.tint-orange .feature-icon { background: #F97316; }
.tint-purple .feature-icon { background: #8B5CF6; }
.tint-teal .feature-icon { background: var(--accent); }
.tint-amber .feature-icon { background: #F59E0B; }
.tint-indigo .feature-icon { background: #6366F1; }
.tint-rose .feature-icon { background: #EC4899; }
.tint-green .feature-icon { background: #16A34A; }

/* Management strip - compact icon+label pills into the admin/catalog pages,
   used far less often than the tool cards above so kept light and small. */
.mgmt-strip { display: flex; flex-direction: column; gap: 8px; margin: 20px 12px 12px; }
.mgmt-pill {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700;
}
.mgmt-pill:hover { border-color: var(--accent); }
.mgmt-pill .mp-icon { font-size: 16px; }

/* Sticky cart/status banner - Stock In / Stock Out step 2 */
.sticky-total {
  display: flex; align-items: center; gap: 12px; margin: 0 12px 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: white;
  border-radius: 16px; padding: 13px 16px; box-shadow: 0 6px 18px rgba(15,110,86,0.18);
  cursor: pointer;
}
.st-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.st-body { flex: 1; min-width: 0; }
.st-label { font-size: 11px; font-weight: 700; opacity: 0.85; }
.st-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; }
.st-arrow { font-size: 11px; font-weight: 800; opacity: 0.9; flex-shrink: 0; white-space: nowrap; }

/* Row list - product picker + review list, Stock In / Stock Out */
.row-list { background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin: 12px;
  box-shadow: 0 3px 12px rgba(28,28,26,0.05); overflow: hidden; }
.row-item { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--line-soft);
  cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; width: 100%;
  text-align: left; font-family: inherit; box-sizing: border-box; }
.row-item:last-child { border-bottom: none; }
.row-item:hover { background: var(--line-soft); }
.row-icon { width: 36px; height: 36px; border-radius: 11px; background: var(--accent-tint); display: flex;
  align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; overflow: hidden; }
.row-icon img { width: 100%; height: 100%; object-fit: cover; }
.row-body { flex: 1; min-width: 0; }
.row-name { font-weight: 800; font-size: 12.5px; letter-spacing: -0.1px; }
.row-sub { font-size: 10px; color: var(--muted); margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.low-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 800;
  color: #C2762B; background: #FCF1DF; padding: 2px 7px; border-radius: 999px; }
.low-pill .m-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.row-right { text-align: right; flex-shrink: 0; }
.row-qty { font-weight: 800; font-size: 13.5px; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.row-remove { color: var(--red); cursor: pointer; font-size: 15px; padding: 4px; margin-left: 8px; }

/* Totals strip - Stock In / Stock Out review step */
.totals-strip { display: flex; margin: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 4px 16px rgba(28,28,26,0.05); overflow: hidden; }
.totals-cell { flex: 1; padding: 14px 8px; text-align: center; border-right: 1px solid var(--line-soft); }
.totals-cell:last-child { border-right: none; }
.totals-num { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.totals-lbl { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* Home on a laptop/desktop window - self-adapting "one screen, no scroll"
   layout using clamp() so it scales smoothly across any window width
   instead of jumping at fixed breakpoints. The bottom nav is a fixed
   overlay ~84px tall, so the content area is sized to 100vh minus that so
   nothing sits under it and nothing needs to scroll. Scoped to
   body.page-home only, and only past ~700px - below that it stays the
   normal mobile-first scrolling layout used everywhere else in the app. */
@media (min-width: 700px) {
  body.page-home .app-shell {
    max-width: 1500px; height: calc(100vh - 84px); overflow: hidden; padding-bottom: 0;
  }

  body.page-home .home-shell {
    height: 100%; padding: clamp(10px, 1.5vh, 20px) clamp(14px, 1.8vw, 30px); gap: clamp(6px, 0.9vh, 12px);
  }

  body.page-home .home-top { flex-shrink: 0; display: flex; align-items: stretch; gap: clamp(10px, 1.4vw, 20px); }
  body.page-home .home-hero {
    margin: 0; flex: 0 0 clamp(190px, 21vw, 290px); display: flex; flex-direction: column; justify-content: center;
    padding: clamp(9px, 1.4vh, 16px) clamp(16px, 1.8vw, 24px);
  }
  body.page-home .home-hero .title { font-size: clamp(16px, 1.5vw, 24px); }
  body.page-home .home-hero .subtitle { font-size: clamp(10px, 0.78vw, 12.5px); }
  body.page-home .hero-logout-btn {
    top: clamp(8px, 1vh, 12px); right: clamp(10px, 1.2vw, 16px);
    font-size: clamp(9px, 0.65vw, 10.5px); padding: clamp(5px, 0.7vh, 7px) clamp(8px, 1vw, 12px);
  }

  body.page-home .kpi-strip { flex: 1; margin: 0; gap: clamp(8px, 1vw, 14px); }
  body.page-home .kpi-num { font-size: clamp(19px, 2.1vw, 32px); }
  body.page-home .kpi-lbl { font-size: clamp(8.5px, 0.6vw, 10.5px); }
  body.page-home .kpi-link-icon { font-size: clamp(16px, 1.6vw, 24px); }

  body.page-home .section-label-row { flex-shrink: 0; margin: 0; }
  body.page-home .section-label { font-size: clamp(10px, 0.66vw, 11.5px); }

  body.page-home .dash-highlight { flex-shrink: 0; margin: 0; padding: clamp(12px, 1.8vh, 20px) clamp(16px, 1.8vw, 22px); }
  body.page-home .dh-icon { width: clamp(34px, 3vw, 50px); height: clamp(34px, 3vw, 50px); font-size: clamp(15px, 1.5vw, 22px); }
  body.page-home .dh-title { font-size: clamp(13px, 1.1vw, 16px); }
  body.page-home .dh-desc { font-size: clamp(10px, 0.8vw, 12.5px); }
  body.page-home .dh-stat-num { font-size: clamp(15px, 1.4vw, 20px); }
  body.page-home .dh-stat-lbl { font-size: clamp(8px, 0.58vw, 9.5px); }

  body.page-home .tools-row {
    flex: 1; min-height: 0; margin: 0; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 14px);
  }
  body.page-home .tools-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
  body.page-home .tools-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
  body.page-home .feature-card { padding: clamp(10px, 1.3vw, 18px); min-height: 0; gap: clamp(4px, 0.6vh, 8px); }
  body.page-home .feature-icon {
    width: clamp(30px, 2.6vw, 42px); height: clamp(30px, 2.6vw, 42px); font-size: clamp(15px, 1.4vw, 22px); border-radius: 10px;
  }
  body.page-home .feature-title { font-size: clamp(12.5px, 1vw, 15.5px); }
  body.page-home .feature-desc { font-size: clamp(10px, 0.72vw, 12px); flex: 1; }
  body.page-home .feature-meta { font-size: clamp(9px, 0.62vw, 10.5px); }

  body.page-home .mgmt-strip { flex-shrink: 0; flex-direction: row; margin: 0; gap: clamp(8px, 1vw, 14px); }
  body.page-home .mgmt-pill { flex: 1; padding: clamp(6px, 0.9vh, 10px) clamp(10px, 1.2vw, 16px); font-size: clamp(10.5px, 0.75vw, 12.5px); }
  body.page-home .mgmt-pill .mp-icon { font-size: clamp(12px, 1vw, 15px); }
}

/* Stock In / Stock Out wizard on a wide desktop window - same problem as
   Home had: every element is sized for a phone, so on a real desktop
   monitor it reads as small and dense even though max-width already fills
   most of the window. Scoped to these two pages only. */
@media (min-width: 700px) {
  body.page-stockin .app-shell, body.page-stockout .app-shell,
  body.page-stockin .wizard-nav, body.page-stockout .wizard-nav { max-width: 760px; }

  body.page-stockin .hero .title, body.page-stockout .hero .title { font-size: 26px; }
  body.page-stockin .hero .subtitle, body.page-stockout .hero .subtitle { font-size: 14px; }

  body.page-stockin .wizard-step-circle, body.page-stockout .wizard-step-circle { width: 36px; height: 36px; font-size: 15px; }
  body.page-stockin .wizard-step-label, body.page-stockout .wizard-step-label { font-size: 12px; }

  body.page-stockin .field-label, body.page-stockout .field-label { font-size: 12.5px; }
  body.page-stockin input, body.page-stockin select, body.page-stockin textarea,
  body.page-stockout input, body.page-stockout select, body.page-stockout textarea { font-size: 16px; padding: 14px; }
  /* Deliberately excludes plain `button` from the bump above - it would also
     enlarge small inline text-links like "+ New Supplier" (.quick-add-link).
     Target only the real full-width action buttons instead. */
  body.page-stockin .wizard-nav button, body.page-stockout .wizard-nav button,
  body.page-stockin #qtyView > .panel > button, body.page-stockout #qtyView > .panel > button { font-size: 16px; padding: 14px; }

  body.page-stockin .recap-card, body.page-stockout .recap-card { font-size: 14px; padding: 14px 16px; }

  body.page-stockin .sticky-total, body.page-stockout .sticky-total { padding: 16px 18px; }
  body.page-stockin .st-icon, body.page-stockout .st-icon { width: 40px; height: 40px; font-size: 19px; }
  body.page-stockin .st-label, body.page-stockout .st-label { font-size: 12.5px; }
  body.page-stockin .st-value, body.page-stockout .st-value { font-size: 17px; }
  body.page-stockin .st-arrow, body.page-stockout .st-arrow { font-size: 12.5px; }

  body.page-stockin .simple-list-row, body.page-stockout .simple-list-row { padding: 15px; }
  body.page-stockin .simple-list-row img, body.page-stockout .simple-list-row img { width: 52px; height: 52px; }
  body.page-stockin .sl-name, body.page-stockout .sl-name { font-size: 15px; }
  body.page-stockin .sl-meta, body.page-stockout .sl-meta { font-size: 12px; }
  body.page-stockin .low-pill, body.page-stockout .low-pill { font-size: 10.5px; }

  body.page-stockin .row-item, body.page-stockout .row-item { padding: 16px 18px; }
  body.page-stockin .row-icon, body.page-stockout .row-icon { width: 42px; height: 42px; font-size: 19px; }
  body.page-stockin .row-name, body.page-stockout .row-name { font-size: 14.5px; }
  body.page-stockin .row-sub, body.page-stockout .row-sub { font-size: 11.5px; }
  body.page-stockin .row-qty, body.page-stockout .row-qty { font-size: 15px; }

  body.page-stockin .totals-num, body.page-stockout .totals-num { font-size: 21px; }
  body.page-stockin .totals-lbl, body.page-stockout .totals-lbl { font-size: 10.5px; }
  body.page-stockin .totals-cell, body.page-stockout .totals-cell { padding: 18px 10px; }

  body.page-stockin .var-name, body.page-stockout .var-name { font-size: 14px; }
  body.page-stockin .qty-display, body.page-stockout .qty-display { font-size: 16px; }
  body.page-stockin .qty-btn, body.page-stockout .qty-btn { width: 34px; height: 34px; font-size: 18px; }
}

/* Quick Checkout on desktop - two columns side by side, same landscape
   spirit as Home, instead of one tall vertical stack. LEFT column holds the
   input controls (staff/platform, waybill scan, item scan) which scrolls
   on its own if it's ever taller than the screen; RIGHT column holds the
   totals/cart/Complete-Checkout button, with only the cart list itself
   scrolling internally while the button stays pinned at a fixed spot in
   that column. This is a structural fix, not just a size tweak: because
   the button lives in its OWN flex column with flex-shrink:0, no amount of
   banners or scanned items on either side can ever push it outside the
   visible area the way the old single-column "lock everything, hope it
   fits" version could - see the bug writeup this replaced for exactly how
   that used to fail. `.checkout-split` is `display:contents` below 700px
   so mobile's normal single-column scrolling page is completely unaffected
   by this wrapper existing in the DOM. */
.checkout-split { display: contents; }

@media (min-width: 700px) {
  body.page-checkout .app-shell {
    max-width: 1300px; height: calc(100vh - 84px); overflow: hidden;
    padding: 0 0 clamp(6px, 1vh, 12px); display: flex; flex-direction: column;
    gap: clamp(4px, 0.9vh, 10px);
  }

  body.page-checkout .hero,
  body.page-checkout #negStockBanner,
  body.page-checkout .batch-strip,
  body.page-checkout #editBanner {
    flex-shrink: 0; margin-top: 0; margin-bottom: 0;
  }
  body.page-checkout #negStockBanner { margin: 0 12px !important; }

  body.page-checkout .checkout-split {
    display: flex; flex: 1; min-height: 0; gap: clamp(12px, 1.6vw, 22px); padding: 0 12px;
  }

  body.page-checkout .checkout-left {
    flex: 0 0 clamp(300px, 30vw, 400px); display: flex; flex-direction: column;
    gap: clamp(4px, 0.9vh, 10px); overflow-y: auto; min-height: 0; padding-right: 2px;
  }
  body.page-checkout .checkout-right {
    flex: 1; display: flex; flex-direction: column; gap: clamp(4px, 0.9vh, 10px); min-height: 0;
  }

  body.page-checkout .checkout-left .panel,
  body.page-checkout #checkoutTotals,
  body.page-checkout .status-msg {
    flex-shrink: 0;
  }
  body.page-checkout .wizard-nav { flex-shrink: 0; margin: 0 !important; }

  body.page-checkout #checkoutCart {
    flex: 1; min-height: 60px; overflow-y: auto;
  }

  /* Zero out each chrome element's own vertical margin - spacing comes
     from the flex `gap`s instead, same reasoning as Home's block above. */
  body.page-checkout .hero,
  body.page-checkout .batch-strip,
  body.page-checkout .panel,
  body.page-checkout .banner-info,
  body.page-checkout .totals-strip,
  body.page-checkout .status-msg {
    margin-top: 0; margin-bottom: 0;
  }

  /* Fluid vh-relative sizing so the whole stack compresses smoothly
     instead of overflowing on shorter laptop screens. */
  body.page-checkout .hero { padding: clamp(10px, 1.6vh, 20px) clamp(14px, 1.8vw, 20px); }
  body.page-checkout .hero .title { font-size: clamp(18px, 2.2vh, 26px); margin-bottom: 2px; }
  body.page-checkout .hero .subtitle { font-size: clamp(11px, 1.3vh, 14px); }

  body.page-checkout .batch-strip { padding: clamp(6px, 1vh, 10px) 12px; }
  body.page-checkout .banner-info, body.page-checkout #negStockBanner { padding: clamp(6px, 1vh, 10px) 12px; }

  body.page-checkout .panel { padding: clamp(8px, 1.4vh, 16px) clamp(12px, 1.6vw, 16px); }
  body.page-checkout .field-label { font-size: 11px; margin-bottom: clamp(2px, 0.5vh, 5px); }
  body.page-checkout input {
    font-size: clamp(13px, 1.6vh, 16px); padding: clamp(8px, 1.2vh, 14px); margin-bottom: clamp(4px, 0.8vh, 10px);
  }
  body.page-checkout .platform-picker { gap: clamp(5px, 0.8vw, 8px); margin-bottom: 0; }
  body.page-checkout .platform-btn { padding: clamp(6px, 1vh, 10px) 4px clamp(5px, 0.8vh, 8px); gap: clamp(3px, 0.5vh, 5px); }
  body.page-checkout .platform-logo, body.page-checkout .platform-logo-emoji {
    width: clamp(24px, 3.4vh, 34px); height: clamp(24px, 3.4vh, 34px);
  }
  body.page-checkout .platform-btn span:last-child { font-size: clamp(10px, 1.1vh, 12px); }

  body.page-checkout .totals-strip { margin: 0; }
  body.page-checkout .totals-cell { padding: clamp(6px, 1vh, 14px) 8px; }
  body.page-checkout .totals-num { font-size: clamp(15px, 1.9vh, 18px); }

  body.page-checkout .status-msg { min-height: 0; margin-bottom: 0; }

  body.page-checkout .wizard-nav button { font-size: clamp(13px, 1.6vh, 16px); padding: clamp(9px, 1.3vh, 14px); }
  body.page-checkout #completeHint { font-size: 10.5px; margin-top: -2px; }

  body.page-checkout .row-item { padding: clamp(8px, 1.3vh, 15px) 16px; }
  body.page-checkout .row-name { font-size: 14px; }
}

/* Stock In / Stock Out on desktop - Step 1 (Details) stays its own quick
   narrow screen, but Steps 2 (Add Products) and 3 (Review & Submit) merge
   into one side-by-side screen instead of two separate full-page steps to
   click between - search/product list on the left, cart + Submit on the
   right, matching Quick Checkout's split and Home's landscape spirit.
   JS (goToStep, in stock_in.js/stock_out.js) marks BOTH panel2 and panel3
   "active" together once width >= 700px, and keeps the cart preview live
   as items are added rather than only rendering it on arrival. The Submit
   button lives in its own flex-shrink:0 slot at the bottom of the right
   column, same structural guarantee Quick Checkout's fix relies on: no
   amount of search results or cart rows can push it off-screen, because
   only the list ABOVE it scrolls, never the column itself.
   .add-review-split is display:contents below 700px, so mobile's real
   3-step wizard (one screen at a time) is completely unaffected. */
.add-review-split { display: contents; }

@media (min-width: 700px) {
  body.page-stockin .app-shell, body.page-stockout .app-shell {
    max-width: 1500px; height: calc(100vh - 84px); overflow: hidden; padding-bottom: 0;
    display: flex; flex-direction: column; gap: clamp(4px, 0.8vh, 10px);
  }
  body.page-stockin .hero, body.page-stockout .hero,
  body.page-stockin .wizard-steps, body.page-stockout .wizard-steps {
    flex-shrink: 0; margin-top: 0; margin-bottom: 0;
  }
  /* negStockBanner sets its own margin inline in the template, which
     otherwise beats this external rule - hence !important. */
  body.page-stockout #negStockBanner { flex-shrink: 0; margin: 0 12px !important; }

  /* Step 1 (Details) - single narrow form, centered, scrolls on its own
     in the unlikely event it's ever taller than the screen. */
  body.page-stockin #panel1.wizard-panel.active, body.page-stockout #panel1.wizard-panel.active {
    flex: 1; min-height: 0; overflow-y: auto; max-width: 480px; width: 100%; margin: 0 auto; padding-bottom: 0;
  }

  /* Steps 2+3 merged split screen. display:none by default (rather than
     always flex:1) so this empty wrapper doesn't compete with panel1 for
     space while on Step 1 - .has-active-panel is toggled in goToStep()
     (stock_in.js/stock_out.js) alongside the step switch itself. */
  body.page-stockin .add-review-split, body.page-stockout .add-review-split {
    display: none; flex: 1; min-height: 0; gap: clamp(12px, 1.6vw, 22px); padding: 0 12px;
  }
  body.page-stockin .add-review-split.has-active-panel, body.page-stockout .add-review-split.has-active-panel {
    display: flex;
  }
  body.page-stockin #panel2.wizard-panel, body.page-stockout #panel2.wizard-panel,
  body.page-stockin #panel3.wizard-panel, body.page-stockout #panel3.wizard-panel {
    display: none; padding-bottom: 0;
  }
  body.page-stockin #panel2.wizard-panel.active, body.page-stockout #panel2.wizard-panel.active {
    display: flex; flex-direction: column; min-height: 0; flex: 0 0 clamp(300px, 34vw, 420px); overflow-y: auto;
  }
  body.page-stockin #panel3.wizard-panel.active, body.page-stockout #panel3.wizard-panel.active {
    display: flex; flex-direction: column; min-height: 0; flex: 1;
  }

  /* Left column (panel2): search box stays put, results scroll. The recap
     card + sticky-total pill (mobile-only "N items added" shortcut) aren't
     needed once the cart is already visible in the right column - !important
     because updateCartPill() in stock_in.js/stock_out.js sets this element's
     display via inline style, which otherwise beats any plain stylesheet rule. */
  body.page-stockin #panel2 .recap-card, body.page-stockout #panel2 .recap-card,
  body.page-stockin #panel2 .sticky-total, body.page-stockout #panel2 .sticky-total {
    display: none !important;
  }
  /* #searchView/#qtyView show/hide via the .sub-view-hidden/.sub-view-shown
     classes (see base rules near .wizard-panel above) rather than inline
     styles, so these can safely set their own display:flex without an
     !important fight - the whole "list scrolls, nav never overlaps" fix
     depends on this actually being display:flex, not display:block. */
  body.page-stockin #searchView, body.page-stockout #searchView {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  body.page-stockin #searchView.sub-view-hidden, body.page-stockout #searchView.sub-view-hidden {
    display: none;
  }
  body.page-stockin #productList, body.page-stockout #productList { flex: 1; min-height: 0; overflow-y: auto; }
  body.page-stockin #qtyView, body.page-stockout #qtyView { flex: 1; min-height: 0; display: none; }
  body.page-stockin #qtyView.sub-view-shown, body.page-stockout #qtyView.sub-view-shown { display: flex; }
  body.page-stockin #qtyView > .panel, body.page-stockout #qtyView > .panel {
    display: flex; flex-direction: column; min-height: 0; flex: 1;
  }
  body.page-stockin #variationArea, body.page-stockout #variationArea { flex: 1; min-height: 0; overflow-y: auto; }

  /* Right column (panel3): recap card not needed (context is obvious from
     the left column being right there), totals pinned, cart list scrolls,
     Submit pinned at the very bottom. */
  body.page-stockin #panel3 .recap-card, body.page-stockout #panel3 .recap-card { display: none; }
  body.page-stockin #cartTotals, body.page-stockout #cartTotals { flex-shrink: 0; }
  body.page-stockin #cartTable, body.page-stockout #cartTable { flex: 1; min-height: 60px; overflow-y: auto; }
  body.page-stockin #panel3 .status-msg, body.page-stockout #panel3 .status-msg { flex-shrink: 0; min-height: 0; }

  /* Un-fix both nav bars so each sits inline at the bottom of its own
     column instead of floating globally (which would otherwise stack two
     fixed bars on top of each other now that panel2 and panel3 show at
     the same time). Only one action button is needed per column - the
     other (now-redundant) button in each pair is hidden. */
  body.page-stockin #panel2 .wizard-nav, body.page-stockout #panel2 .wizard-nav,
  body.page-stockin #panel3 .wizard-nav, body.page-stockout #panel3 .wizard-nav {
    position: static; flex-shrink: 0; display: flex; box-shadow: none;
    border-top: 1px solid var(--line); background: none; max-width: none; margin: 0; padding: 10px 0 0;
  }
  body.page-stockin #panel2 .wizard-nav button:last-child, body.page-stockout #panel2 .wizard-nav button:last-child { display: none; }
  body.page-stockin #panel3 .wizard-nav button:first-child, body.page-stockout #panel3 .wizard-nav button:first-child { display: none; }

  /* Steps 2 & 3 are shown together now, so the 3rd "Review" dot (and the
     line leading to it) would just be a pending step that never separately
     activates - simpler to drop it and let dot 2 read as "Add & Review". */
  body.page-stockin #stepLine2, body.page-stockout #stepLine2,
  body.page-stockin #stepDot3, body.page-stockout #stepDot3 {
    display: none;
  }
  body.page-stockin #stepDot2 .wizard-step-label, body.page-stockout #stepDot2 .wizard-step-label {
    white-space: nowrap;
  }
}

/* Stock Take on desktop - same locked-shell idea, but this page shows
   several panels stacked at once (mode/staff, live stats, find-product
   controls, the count list, submit) rather than one step at a time, so
   it needs Quick Checkout's full "chrome pinned, one region scrolls"
   treatment - except Stock Take has MORE simultaneous panels than any
   other page, and one of them (the per-category progress breakdown)
   scales with how many categories a shop has, so a fixed max-height per
   panel doesn't work: several panels independently capped at (say) 42%
   of the screen can still add up to well over 100% combined and get
   clipped. Instead, panels are left at their default flex-shrink (1) so
   the browser distributes the actual available space across all of them
   proportionally, each with its own overflow-y:auto safety net so a
   panel that gets compressed still scrolls internally rather than
   losing content. The Submit panel is the one exception - like the
   Complete Checkout button elsewhere, it's pinned at flex-shrink:0 so
   it's always shown at full size, never squeezed into a tiny scroll box. */
.stocktake-split { display: contents; }

@media (min-width: 700px) {
  body.page-stocktake .app-shell {
    max-width: 1500px; height: calc(100vh - 84px); overflow: hidden; padding-bottom: 0;
    display: flex; flex-direction: column; gap: clamp(4px, 0.8vh, 10px);
  }
  body.page-stocktake .hero { flex-shrink: 0; margin-top: 0; margin-bottom: 0; }

  body.page-stocktake .stocktake-split {
    display: flex; flex: 1; min-height: 0; gap: clamp(12px, 1.6vw, 22px); padding: 0 12px;
  }

  /* LEFT: setup / live stats / find-product controls - doesn't grow with
     your product count, so it gets a fixed-ish column and scrolls on its
     own only in the unlikely event it's ever taller than the screen. */
  body.page-stocktake .stocktake-left {
    flex: 0 0 clamp(320px, 32vw, 420px); display: flex; flex-direction: column;
    gap: clamp(4px, 0.9vh, 10px); overflow-y: auto; min-height: 0; padding-right: 2px;
  }
  body.page-stocktake .stocktake-left .panel,
  body.page-stocktake .stocktake-left .empty {
    flex-shrink: 0; margin-top: 0; margin-bottom: 0;
  }

  /* RIGHT: the actual count list - this is the one region that should
     ever scroll here, with Submit pinned below it at full size always,
     same structural guarantee as Quick Checkout's Complete button. */
  body.page-stocktake .stocktake-right {
    flex: 1; display: flex; flex-direction: column; gap: clamp(4px, 0.9vh, 10px); min-height: 0;
  }
  body.page-stocktake #list { flex: 1; min-height: 100px; overflow-y: auto; }
  body.page-stocktake #submitSection { flex-shrink: 0; margin-top: 0; margin-bottom: 0; }
}

/* Stock Order on desktop - same split as Quick Checkout: LEFT holds
   staff/remark, search, the selected product + its Demand Insight panel
   (scrolls on its own if ever taller than the screen); RIGHT holds the
   cart with Submit/Clear pinned below it, only the cart list itself
   scrolling internally. */
.stockorder-split { display: contents; }

@media (min-width: 700px) {
  body.page-stockorder .app-shell {
    max-width: 1500px; height: calc(100vh - 84px); overflow: hidden; padding-bottom: 0;
    display: flex; flex-direction: column; gap: clamp(4px, 0.8vh, 10px);
  }
  body.page-stockorder .hero, body.page-stockorder .empty {
    flex-shrink: 0; margin-top: 0; margin-bottom: 0;
  }

  body.page-stockorder .stockorder-split {
    display: flex; flex: 1; min-height: 0; gap: clamp(12px, 1.6vw, 22px); padding: 0 12px;
  }

  body.page-stockorder .stockorder-left {
    flex: 0 0 clamp(340px, 34vw, 460px); display: flex; flex-direction: column;
    gap: clamp(4px, 0.9vh, 10px); overflow-y: auto; min-height: 0; padding-right: 2px;
  }
  body.page-stockorder .stockorder-left > .panel { flex-shrink: 0; margin-top: 0; margin-bottom: 0; }

  body.page-stockorder .stockorder-right {
    flex: 1; display: flex; flex-direction: column; gap: clamp(4px, 0.9vh, 10px); min-height: 0;
  }
  body.page-stockorder #cartPanel {
    flex: 1; min-height: 100px; overflow: hidden; display: flex; flex-direction: column;
    margin-top: 0; margin-bottom: 0;
  }
  body.page-stockorder #cartPanel > *:not(#cartTable) { flex-shrink: 0; }
  body.page-stockorder #cartTable { flex: 1; min-height: 60px; overflow-y: auto; }
}

/* ---------- Modal ---------- */

.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 2000; padding: 18px; box-sizing: border-box;
}
.modal-overlay.show { display: block; }
.modal-box {
  background: white; max-width: 480px; margin: 70px auto; padding: 18px; border-radius: var(--radius);
  box-shadow: 0 18px 45px rgba(0,0,0,.25); max-height: 82vh; overflow-y: auto;
}

/* Batch preview modal: the title row (with its close ✕) is pinned outside
   the scrolling area, so a long batch (20+ orders) never forces you to
   scroll all the way down just to find a way to close it - only the
   middle section scrolls, header and footer buttons stay put. */
.modal-box-flex { display: flex; flex-direction: column; max-height: 82vh; overflow: hidden; padding: 0; }
.modal-box-flex .modal-header-row {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line-soft);
}
.modal-box-flex .modal-header-row h3 { margin: 0; }
.modal-close-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  color: var(--muted); font-size: 15px; font-weight: 800; cursor: pointer; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1;
}
.modal-close-btn:hover { background: var(--line-soft); color: var(--ink); }

/* Language toggle - injected by i18n.js on every page (see base.html),
   floating just above the fixed bottom nav so it never collides with any
   page's own header/hero content, including Home's Logout button. */
.lang-toggle-btn {
  position: fixed; right: 12px; bottom: 96px; z-index: 998;
  background: white; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 12px; font-weight: 800; color: var(--ink);
  box-shadow: 0 4px 14px rgba(0,0,0,.14); cursor: pointer; margin: 0; width: auto;
}
.lang-toggle-btn:hover { border-color: var(--accent); }
@media print { .lang-toggle-btn { display: none !important; } }
.modal-box-flex .modal-scroll-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 18px; }
.modal-box-flex .batch-modal-footer { flex-shrink: 0; margin: 0; padding: 12px 18px 18px; border-top: 1px solid var(--line-soft); }

/* ---------- Quick Checkout: running batch strip + preview/print ---------- */

.batch-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--accent-tint); border: 1px solid var(--accent-tint-border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 12px 12px;
}
.batch-info { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--accent-dark); min-width: 0; }
.batch-icon { font-size: 16px; flex-shrink: 0; }
.batch-strip button { width: auto; margin: 0; padding: 8px 14px; font-size: 11.5px; flex-shrink: 0; }

.batch-meta { font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }

/* Batch preview order rows: each item on its own line instead of one
   comma-joined sentence, so a multi-item order is easy to scan at a
   glance. #batchModalBody-scoped so it doesn't affect .row-item elsewhere
   (e.g. the checkout cart, which has its own qty-stepper layout). */
#batchModalBody .row-item { align-items: flex-start; }
#batchModalBody .row-icon { margin-top: 1px; }
.order-items-list { margin-top: 4px; }
.order-item-line {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted); padding: 2px 0;
}
.order-item-line .oi-name { flex: 1; min-width: 0; }
.order-item-line .oi-qty { font-weight: 800; color: var(--ink); flex-shrink: 0; }
.batch-totals {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; margin-top: 12px;
}
.batch-total-row {
  display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
  font-weight: 700; padding: 5px 0; border-bottom: 1px solid var(--line-soft);
}
.batch-total-row:last-child { border-bottom: none; }
.batch-modal-footer { display: flex; gap: 8px; margin-top: 16px; }
.batch-modal-footer button { margin: 0; }

/* Printing the batch summary: hide everything else on the page, show only
   the modal's content, and drop the controls that don't make sense on
   paper (Print/Close buttons). */
@media print {
  body * { visibility: hidden; }
  #batchPreviewBox, #batchPreviewBox * { visibility: visible; }
  #batchPreviewModal {
    position: absolute; inset: 0; background: none; padding: 0; display: block;
  }
  #batchPreviewBox { box-shadow: none; margin: 0; max-height: none; max-width: none; display: block; }
  #batchPreviewBox .modal-scroll-body { overflow: visible; max-height: none; }
  .no-print { display: none !important; }
}

/* ---------- Sitewide login ---------- */
/* Split-screen design: a brand panel on the left (hidden on narrow screens)
   and the password form on the right, centered. Approved as
   option_b_v2_polished in the earlier mockup round. */

body.page-login .app-shell { padding-bottom: 0; max-width: none; margin: 0; }

.login-split { min-height: 100vh; display: flex; background: var(--bg); }

.login-side {
  flex: 0 0 46%; position: relative; overflow: hidden;
  background: linear-gradient(165deg, #12805F 0%, var(--accent) 45%, #0A4E3D 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 56px; color: #fff;
}
.login-side::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 0%, transparent 75%);
}
.login-side::after {
  content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
  bottom: -220px; right: -160px;
}
.login-side-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.login-side-mark {
  width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.login-side-mark svg { width: 18px; height: 18px; }
.login-side-brand { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }

.login-side-mid { position: relative; z-index: 1; max-width: 340px; }
.login-side-title { font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 14px; }
.login-side-sub { font-size: 14.5px; color: rgba(255,255,255,0.72); line-height: 1.65; }

.login-side-stats {
  position: relative; z-index: 1; display: flex; gap: 28px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.14); max-width: 340px;
}
.login-stat-num { font-size: 19px; font-weight: 800; }
.login-stat-label { font-size: 11.5px; color: rgba(255,255,255,0.6); margin-top: 2px; }

.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-form-wrap { width: 100%; max-width: 340px; }

.login-lock-badge {
  width: 46px; height: 46px; border-radius: 13px; background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.login-lock-badge svg { width: 20px; height: 20px; }

.login-form-title { font-size: 21px; font-weight: 800; color: var(--ink); margin-bottom: 5px; letter-spacing: -0.3px; }
.login-form-sub { font-size: 13px; color: var(--muted); margin-bottom: 28px; line-height: 1.5; }

.login-input-shell { position: relative; margin-bottom: 20px; }
.login-input-shell svg.login-field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #9CA3AF; pointer-events: none;
}
.login-input-shell input {
  width: 100%; padding: 13px 14px 13px 40px; margin: 0; border-radius: 11px; border: 1.5px solid var(--line);
  font-size: 14.5px; outline: none; transition: border-color .15s, box-shadow .15s;
  background: #fff; color: var(--ink);
}
.login-input-shell input::placeholder { color: #B8B5AE; }
.login-input-shell input:focus { border-color: var(--accent); box-shadow: 0 0 0 3.5px rgba(15,110,86,0.12); }

.login-submit-btn {
  width: 100%; padding: 13px; border: none; border-radius: 11px; margin: 0;
  background: linear-gradient(135deg, #17936F, var(--accent-dark)); color: #fff;
  font-size: 14.5px; font-weight: 700; cursor: pointer; letter-spacing: 0.1px;
  box-shadow: 0 6px 16px rgba(15,110,86,0.28);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.login-submit-btn:disabled { opacity: 0.65; cursor: default; }
.login-submit-btn svg { width: 15px; height: 15px; }

.login-form-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 22px; line-height: 1.5; }
.login-form-wrap .status-msg { margin-top: 12px; }

/* mobile: stack, hide the brand panel's stat row / dot texture noise */
@media (max-width: 720px) {
  .login-split { flex-direction: column; }
  .login-side { flex: 0 0 auto; padding: 32px 28px 40px; }
  .login-side-stats { display: none; }
  .login-side-title { font-size: 24px; }
  .login-main { padding: 32px 24px; }
}

/* ---------- Bottom nav ---------- */

.nav-spacer { height: 20px; }
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.97);
  border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr;
  gap: 6px; padding: 8px 10px calc(12px + env(safe-area-inset-bottom)); z-index: 999; box-shadow: 0 -8px 24px rgba(0,0,0,.08);
}
.nav-btn {
  border: none; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 800;
  padding: 6px 2px; border-radius: 12px; cursor: pointer; margin: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.nav-btn span:first-child { display: block; font-size: 19px; margin-bottom: 2px; }
.nav-btn.active { background: var(--accent-tint); color: var(--accent-dark); }
.nav-btn.home-btn { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: white; border-radius: 12px; }
.nav-btn.home-btn span { font-size: 21px; }

/* ---------- Utility ---------- */

.counter { font-size: 12px; color: var(--muted); text-align: center; margin-top: 2px; font-weight: 700; }
.search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.search-row input { margin-bottom: 0; }

@media (max-width: 420px) {
  .hero .title { font-size: 20px; }
  .card img { width: 76px; height: 76px; }
  .filter-controls-row { grid-template-columns: 1fr; }
}
.filter-controls-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }

/* ==========================================================================
   Step wizard (Stock In / Stock Out) — one step visible at a time, to keep
   the screen focused instead of showing search + cart + everything at once.
   ========================================================================== */

.wizard-steps {
  display: flex; align-items: center; margin: 12px; gap: 4px;
}
.wizard-step-dot {
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0;
}
.wizard-step-circle {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; background: var(--line-soft); color: var(--muted); flex-shrink: 0;
  transition: background .2s ease, color .2s ease;
}
.wizard-step-dot.active .wizard-step-circle { background: var(--accent); color: white; }
.wizard-step-dot.done .wizard-step-circle { background: var(--accent-tint); color: var(--accent-dark); }
.wizard-step-label {
  font-size: 10.5px; font-weight: 800; color: var(--muted); text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.wizard-step-dot.active .wizard-step-label { color: var(--accent-dark); }
.wizard-step-line { flex: 0 0 auto; width: 100%; max-width: 60px; height: 2px; background: var(--line); margin: 0 -8px 20px; }
.wizard-step-dot.done + .wizard-step-line, .wizard-step-line.done { background: var(--accent-tint-border); }

.wizard-panel { display: none; padding-bottom: 84px; }
.wizard-panel.active { display: block; }

/* Stock In/Out's "tap a product -> enter quantity" sub-view swap within
   Step 2. Driven by classes (added/removed in selectProduct()/
   backToSearch() in stock_in.js/stock_out.js) rather than inline
   style.display, specifically so the desktop split-view CSS below can
   safely set its own display:flex on whichever is showing - an inline
   style set by JS would otherwise always beat a plain stylesheet rule. */
#qtyView { display: none; }
#qtyView.sub-view-shown { display: block; }
#searchView.sub-view-hidden { display: none; }

/* Fixed so Back/Next/Review/Submit are always reachable without scrolling
   to the bottom of a long product list or cart - sits just above the
   site's existing bottom icon nav. */
.wizard-nav {
  display: flex; gap: 10px;
  position: fixed; left: 0; right: 0; bottom: 70px; z-index: 998;
  max-width: 900px; margin: 0 auto; padding: 10px 12px; box-sizing: border-box;
  background: rgba(255,255,255,0.97); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px rgba(0,0,0,.06);
}
.wizard-nav button { margin: 0; }

/* Recap card at the top of later steps, showing step-1 choices read-only
   with a quick way back instead of re-showing all the inputs again. */
.recap-card {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--accent-tint); border: 1px solid var(--accent-tint-border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 12px; font-size: 12.5px;
}
.recap-card .recap-text b { color: var(--accent-dark); }
.recap-card .recap-edit {
  width: auto; margin: 0; padding: 6px 12px; font-size: 11.5px; background: white;
  border: 1px solid var(--accent-tint-border); color: var(--accent-dark); border-radius: 999px; font-weight: 800;
}

/* Simple, single-column product search results (replaces the dense photo
   grid for the wizard's "find product" step — easier to scan quickly). */
.simple-list-row {
  display: flex; align-items: center; gap: 12px; padding: 12px; background: white; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; width: 100%; text-align: left;
}
.simple-list-row:hover { border-color: var(--accent); }
.simple-list-row img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--bg); flex-shrink: 0; }
.simple-list-row .sl-info { flex: 1; min-width: 0; }
.simple-list-row .sl-name { font-weight: 800; font-size: 13.5px; }
.simple-list-row .sl-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.simple-list-row .chevron { color: #B4B2A9; font-size: 18px; flex-shrink: 0; transition: transform .15s ease; }
.simple-list-row .chevron.open { transform: rotate(90deg); color: var(--accent); }

/* Grouped product search (Quick Checkout "search manually") - a product
   with multiple variations shows one row with this badge instead of a
   single variation name, and expands in place into .variation-sub-row
   rows rather than a separate screen. */
.variation-badge {
  display: inline-block; background: var(--accent-tint); color: var(--accent-dark); font-weight: 800;
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px; margin-top: 3px;
}
.variation-sublist {
  margin: -2px 0 8px 12px; padding-left: 12px; border-left: 2px solid var(--accent-tint-border); display: none;
}
.variation-sublist.show { display: block; }
.variation-sub-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); cursor: pointer; width: 100%; text-align: left; color: var(--ink); font: inherit;
}
.variation-sub-row:hover { border-color: var(--accent); background: var(--accent-tint); }
.variation-sub-row .vs-name { font-weight: 700; font-size: 12.5px; }
.variation-sub-row .vs-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.variation-sub-row .vs-add { font-size: 11px; font-weight: 800; color: var(--accent-dark); flex-shrink: 0; }

/* Floating "N items in cart" pill, pinned to the top of the Add Products
   step so the running total is visible without needing to scroll to a cart. */
.cart-pill {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--accent-dark); color: white; border-radius: 999px; padding: 10px 16px;
  margin: 12px; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.cart-pill .cp-arrow { font-size: 15px; }

/* Review step — clean grouped summary lines with a remove action, replacing
   the old always-visible cart panel. */
.review-group { margin: 0 0 14px; }
.review-group-name { font-size: 12px; font-weight: 800; color: var(--accent-dark); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
.review-line {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.review-line:last-child { border-bottom: none; }
.review-line .rl-name { font-weight: 700; font-size: 13.5px; }
.review-line .rl-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.review-line .rl-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.review-line .rl-qty { font-weight: 800; font-size: 13px; }
.review-line .rl-remove { color: var(--red); cursor: pointer; font-size: 15px; padding: 4px; }

/* ---------- History page ---------- */

/* Horizontally scrollable rather than a fixed grid - a 5th (or later, 6th)
   tab shouldn't force every label to squeeze/wrap on a narrow phone. */
.hist-tabs { display: flex; gap: 6px; margin: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.hist-tab {
  background: white; color: var(--muted); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; font-size: 11.5px; font-weight: 800; margin: 0; cursor: pointer;
  flex: 0 0 auto; width: auto; white-space: nowrap;
}
.hist-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
.hist-badge {
  display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: var(--red-soft); color: var(--red); margin-left: 6px; vertical-align: middle;
}
.hist-detail-line {
  display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.hist-detail-line:last-child { border-bottom: none; }
.hist-detail-line .hdl-name { font-weight: 700; }
.hist-detail-line .hdl-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Quick Checkout batch detail (History) - one order per card, each
   independently voidable, items stacked below like the live batch preview. */
.batch-hist-order {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.batch-hist-order.voided { opacity: .65; background: var(--bg); }
.batch-hist-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.batch-hist-order .order-items-list { margin-top: 8px; }

/* ---------- Sales Dashboard ---------- */

.dash-filters { display: flex; flex-direction: column; gap: 10px; }
.preset-tabs { display: flex; gap: 6px; }
.preset-tab {
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 800; margin: 0; cursor: pointer; width: auto;
}
.preset-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
.custom-range { display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
.custom-range.shown { display: grid; }
.custom-range input { margin: 0; }

.dash-loading { text-align: center; color: var(--muted); font-size: 13px; padding: 20px; }
.dash-body { transition: opacity .15s; }

.kpi-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px; }
.kpi-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.kpi-card-label { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.kpi-card-value { font-size: 20px; font-weight: 900; color: var(--ink); margin-bottom: 6px; }
.compare-label { font-size: 11px; color: var(--muted); margin: -4px 12px 4px; }

.delta-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.delta-badge.up { background: #DCFCE7; color: #16A34A; }
.delta-badge.down { background: var(--red-soft); color: var(--red); }
.delta-badge.neutral { background: var(--line-soft); color: var(--muted); }

.panel-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.panel-title { font-size: 14px; font-weight: 800; color: var(--ink); }

.rank-tabs { display: flex; gap: 6px; }
.rank-tab {
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 11.5px; font-weight: 800; margin: 0; cursor: pointer; width: auto;
}
.rank-tab.active { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent-tint-border); }

.product-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.product-row:last-child { border-bottom: none; }
.p-rank { width: 20px; flex-shrink: 0; font-size: 13px; font-weight: 900; color: var(--muted); text-align: center; }
.p-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.p-thumb-placeholder { display: flex; align-items: center; justify-content: center; background: var(--bg); font-size: 17px; }
.p-info { flex: 1; min-width: 0; }
.p-name { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-variation { font-weight: 500; color: var(--muted); }
.p-cat { font-size: 11px; color: var(--muted); margin-top: 1px; }
.p-stats { text-align: right; flex-shrink: 0; }
.p-qty { font-size: 11px; color: var(--muted); }
.p-revenue { font-size: 13.5px; font-weight: 800; color: var(--accent-dark); }

.empty-state { text-align: center; color: var(--muted); font-size: 13px; padding: 24px 10px; }
.empty-state.small { padding: 14px 10px; font-size: 12px; }

.chart-wrap { height: 220px; position: relative; }
.dash-trend-panel { margin: 12px; }

.platform-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.platform-label { width: 70px; flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-bar-track { flex: 1; height: 10px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.platform-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 999px; }
.platform-value { width: 90px; flex-shrink: 0; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--accent-dark); }

.export-btn {
  width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink); font-size: 13.5px; font-weight: 700; cursor: pointer; margin: 0 12px 12px;
}
.export-btn:hover { border-color: var(--accent); color: var(--accent-dark); }

/* Desktop: Revenue Trend gets its own full-width row (charts read better
   wide, and this uses the horizontal space a 2-column layout was wasting)
   plus a taller canvas so it reads as the dashboard's centerpiece rather
   than a cramped sidebar chart. Below it, a two-column split - Top Selling
   Products (wider, it's the detailed list) and By Platform + Export
   (narrower, it's just a short summary). Same mobile-safe pattern used by
   Quick Checkout / Stock In / Stock Out - zero impact below 900px. */
@media (min-width: 900px) {
  body.page-dashboard .app-shell { max-width: 1200px; }
  .chart-wrap-lg { height: 320px; }
  .dash-split { display: flex; gap: 16px; align-items: flex-start; margin: 0 12px; }
  .dash-left { flex: 1.6; min-width: 0; }
  .dash-right { flex: 1; min-width: 0; }
  .dash-left .panel, .dash-right .panel { margin: 0 0 16px; }
  .kpi-cards { margin-left: 12px; margin-right: 12px; }
  .platform-row { padding: 12px 0; }
  .platform-bar-track { height: 12px; }
}

/* ---------- Pricing Calculator (standalone page + Admin > Products helper) ---------- */

/* "Find Selling Price" / "Find Margin" mode switch - same lightweight
   pattern as Stock Take's Daily/Weekly mode buttons (plain .btn-outline
   toggled via JS), just given its own class since it's a two-way switch
   rather than a pair of cards. */
.seg-toggle { display: flex; gap: 8px; margin-top: 10px; }
.seg-btn {
  flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: white;
  color: var(--ink); font-weight: 800; font-size: 12.5px; cursor: pointer; text-align: center; margin: 0;
}
.seg-btn.active { background: var(--accent-tint); border-color: var(--accent-tint-border); color: var(--accent-dark); }

/* Result breakdown - Selling Price / Cost / Fee / Flat Fee / Profit /
   Margin %, one row each, plain label:value list rather than a table. */
.calc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 2px; border-bottom: 1px dashed var(--line); font-size: 13px;
}
.calc-row:last-child { border-bottom: none; }
.calc-row .calc-label { color: var(--muted); font-weight: 700; }
.calc-row .calc-value { font-weight: 800; color: var(--ink); }
.calc-row.calc-highlight { padding: 12px 2px; }
.calc-row.calc-highlight .calc-label { color: var(--accent-dark); font-size: 13.5px; }
.calc-row.calc-highlight .calc-value { color: var(--accent-dark); font-size: 19px; }
.calc-row.calc-negative .calc-value { color: var(--red); }

/* Saved platform presets list (Manage Platforms panel) - name + two small
   inline-editable fee fields + delete, one row per platform. */
.pf-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.pf-row:last-child { border-bottom: none; }
.pf-name { flex: 1; font-weight: 800; font-size: 13px; min-width: 0; }
.pf-row input[type="number"] {
  width: 64px; margin: 0; padding: 6px 8px; font-size: 12.5px; text-align: center; font-weight: 800; flex-shrink: 0;
}
.pf-row .pf-unit { font-size: 10.5px; color: var(--muted); flex-shrink: 0; }
.pf-row .pf-delete {
  width: auto; margin: 0; padding: 6px 10px; font-size: 15px; background: none; border: 1px solid var(--line);
  border-radius: 8px; color: var(--red); cursor: pointer; flex-shrink: 0;
}

/* Compact "Pricing Helper" panel dropped into Admin > Products' Add/Edit
   forms - a dashed, tinted panel to visually mark it as an optional aside
   rather than a required form field. */
.pricing-helper { background: #f8faf8; border: 1px dashed var(--line); }
.pricing-helper .field-label { margin-top: 0; }