/* WMS Terminal - Zebra TC57 (5" 1280x720, ~360px CSS width)
   No icons, no images, no external fonts.
   High contrast for warehouse lighting.
   Dark/Light mode via CSS custom properties. */

/* --- Theme Variables --- */

:root {
  /* Dark theme (default - warehouse) */
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-input: #16213e;
  --bg-card: #16213e;
  --text-primary: #eaeaea;
  --text-secondary: #aaa;
  --text-muted: #888;
  --text-dim: #666;
  --text-faint: #555;
  --accent: #4fc3f7;
  --success: #4caf50;
  --success-bg: #1b5e20;
  --success-text: #81c784;
  --danger: #e94560;
  --danger-bg: #4a0000;
  --danger-text: #ff6b6b;
  --border: #0f3460;
  --border-light: #2a2a4a;
  --border-subtle: #333;
  --btn-primary-bg: #0f3460;
  --btn-primary-border: #4fc3f7;
  --btn-secondary-bg: #2a2a4a;
  --btn-secondary-border: #555;
  --btn-secondary-text: #ccc;
  --notification-info-bg: #1a2a4a;
  --notification-info-border: #4fc3f7;
  --qty-color: #4caf50;
  /* Picker (T8) elevation + tile surfaces. Dark: a hair lighter than --bg-card
     with a faint accent wash so tiles read as "raised" without a loud colour.
     Shadows are soft (dark UI: a drop shadow + top highlight to catch light). */
  --picker-item-bg: #1c2947;
  --elev-raise: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --elev-overlay: 0 16px 48px rgba(0, 0, 0, 0.55);
}

body.theme-light {
  /* Light theme */
  --bg-primary: #f5f5f5;
  --bg-secondary: #ffffff;
  --bg-input: #ffffff;
  --bg-card: #ffffff;
  --text-primary: #1a1a2e;
  --text-secondary: #555;
  --text-muted: #777;
  --text-dim: #999;
  --text-faint: #bbb;
  --accent: #1565c0;
  --success: #2e7d32;
  --success-bg: #e8f5e9;
  --success-text: #2e7d32;
  --danger: #c62828;
  --danger-bg: #ffebee;
  --danger-text: #c62828;
  --border: #ddd;
  --border-light: #eee;
  --border-subtle: #ddd;
  --btn-primary-bg: #1565c0;
  --btn-primary-border: #1565c0;
  --btn-secondary-bg: #e0e0e0;
  --btn-secondary-border: #bbb;
  --btn-secondary-text: #333;
  --notification-info-bg: #e3f2fd;
  --notification-info-border: #1565c0;
  --qty-color: #2e7d32;
  /* Picker tiles: light-blue surface (requested) + soft lift. */
  --picker-item-bg: #eef5fd;
  --elev-raise: 0 1px 2px rgba(21, 50, 80, 0.08), 0 3px 8px -2px rgba(21, 50, 80, 0.14);
  --elev-overlay: 0 20px 56px rgba(21, 50, 80, 0.25);
}

/* --- Reset --- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Inputs must remain selectable/editable (mobile Chrome blocks typing
   when user-select:none is inherited into form fields). */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Faster, more reliable tap response on touch devices (removes 300ms delay). */
.btn, .list-item, input {
  touch-action: manipulation;
}

/* --- Layout --- */

.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* --- Header --- */

.app-header {
  background: var(--bg-secondary);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}

.app-header .operator {
  font-weight: bold;
  color: var(--accent);
}

.app-header .logout-btn {
  background: none;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
}

/* Header is hidden on the login screen (toggled by _updateHeader in app.js) */
.app-header.hidden {
  display: none;
}

/* --- Screens --- */

.screen {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.screen.hidden {
  display: none;
}

/* --- Buttons --- */

.btn {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  margin-bottom: 10px;
  box-shadow: var(--elev-raise);                 /* lift all action buttons */
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Press-down feedback on tap (touch — no hover on Zebra). */
.btn:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: #fff;
  border: 2px solid var(--btn-primary-border);
}

.btn-primary:active {
  background: var(--accent);
  color: var(--bg-primary);
}

.btn-success {
  background: var(--success-bg);
  color: #fff;
  border: 2px solid var(--success);
}

.btn-success:active {
  background: var(--success);
  color: #fff;
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 2px solid var(--btn-secondary-border);
}

.btn-secondary:active {
  background: var(--btn-secondary-border);
  color: #fff;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Menu buttons --- */

.menu-btn {
  min-height: 56px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0;
}

/* Main operations group - larger spacing between buttons */
.menu-primary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

/* Secondary group (History/Options) pinned to bottom */
.menu-secondary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

/* --- Input --- */

.input-group {
  margin-bottom: 14px;
}

.input-group label {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.input-group input {
  width: 100%;
  padding: 12px;
  font-size: 18px;
  background: var(--bg-input);
  border: 2px solid var(--border);
  color: var(--text-primary);
  border-radius: 4px;
  min-height: 48px;
}

.input-group input:focus {
  border-color: var(--accent);
  outline: none;
}

/* --- Screen title --- */

.screen-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

/* --- Info card --- */

.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 12px;
}

.info-card .label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* STOCK CHECK (modal): short status under the field while the lookup runs */
.stock-status {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  min-height: 20px;
}
/* Read-only picker tile: same look, no press-down (nothing to tap) */
.picker-item--static:active {
  border-color: var(--border);
  transform: none;
  box-shadow: var(--elev-raise);
}
.picker-item .picker-item-name {
  overflow-wrap: anywhere;      /* long product names wrap inside the tile */
  margin-right: 12px;
}
.picker-item .item-qty {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--qty-color);      /* same token as ISSUE/COUNT source tiles */
}
/* Totals tile (product view): same tile look as the locations, rows stacked.
   Extra top gap sets it apart; a divider + bold accent marks "Razem". */
.picker-item.stock-totals {
  display: block;               /* override the tile's row flex: stack rows */
  margin-top: 20px;
}
.stock-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
}
.stock-totals-row .label {
  color: var(--text-secondary);
}
.stock-totals-row .value {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
}
.stock-totals-row.stock-totals-sum {
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.stock-totals-row.stock-totals-sum .label,
.stock-totals-row.stock-totals-sum .value {
  font-weight: bold;
  color: var(--accent);
}

/* INACTIVE product badge (ISSUE/COUNT modals, next to the product name) —
   small, non-intrusive hint that the product is being phased out (operations
   still allowed to draw down its stock).
   Subtle informational tag (not a loud badge): bordered, no bold, transparent
   background so it reads as a quiet note that the product is being phased out. */
.inactive-badge {
  margin-left: auto;            /* push to the right edge of the line */
  padding: 1px 8px;
  font-size: 11px;
  color: var(--danger-text);
  background: transparent;
  border: 1px solid var(--danger);
  border-radius: 3px;
  white-space: nowrap;
}

/* T5: COUNT large-variance warning, shown inside the COUNT summary modal
   (T15c) when the delta exceeds WMS_CONFIG.countVariance. */
.variance-card {
  background: var(--danger-bg);
  border: 2px solid var(--danger);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.variance-card .variance-title {
  font-weight: bold;
  color: var(--danger-text);
  font-size: 16px;
  margin-bottom: 8px;
}
.variance-card .variance-hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--danger-text);
}

/* --- List items --- */

.list-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
}

.list-item:active {
  background: var(--border);
  border-color: var(--accent);
}

/* Pickable location/source rows (ISSUE source, COUNT location) — styled like
   picker tiles: themed surface (light = soft blue) + lift + press-down. History
   list stays neutral (plain .list-item). */
.list-item--pick {
  background: var(--picker-item-bg);
  border-radius: 6px;           /* match .picker-item (same "pick tile" look) */
  box-shadow: var(--elev-raise);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.list-item--pick:active {
  background: var(--picker-item-bg);
  border-color: var(--accent);
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.list-item .item-name {
  font-weight: bold;
  color: var(--text-primary);
}

.list-item .item-qty {
  font-size: 18px;
  font-weight: bold;
  color: var(--qty-color);
}

/* --- Summary --- */

.summary {
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row .label {
  color: var(--text-secondary);
}

.summary-row .value {
  font-weight: bold;
  color: var(--text-primary);
}

/* --- Product picker (T8) --- */

.picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;      /* slides IN from the top */
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
  /* Soft blur of the flow underneath while picking (Chrome 85 supports it; if
     a device lacks it, the dim background alone still works). */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: pickerFade 0.2s ease-out;
}
.picker-overlay.hidden { display: none; }

.picker-card {
  width: 100%;
  max-width: 440px;             /* narrow — fits the vertical terminal screen */
  min-height: 58%;              /* always reasonably tall... */
  max-height: 76%;              /* ...up to 76% (grows with content, then scrolls) */
  margin-top: 7vh;              /* sits lower / more centred (still slides in from top) */
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 2px solid var(--accent);
  border-radius: 12px;          /* larger radius (was 6) */
  box-shadow: var(--elev-overlay);
  overflow: hidden;
  animation: pickerSlideDown 0.25s ease-out;
}

/* Slide the card in from the top edge; fade the overlay. */
@keyframes pickerSlideDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pickerFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .picker-overlay, .picker-card { animation: none; }
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.picker-title {
  font-weight: bold;
  font-size: 17px;
  color: var(--accent);
}
/* "← WSTECZ" in every overlay header (picker + all flow modals): one style —
   plain text link, no fill/border, small font. */
.picker-back {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 4px 2px;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.picker-back:active {
  color: var(--accent);
}
.picker-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
}

/* --- Flow confirm modal (RECEIVE product + summary) ---
   Same overlay/blur/card/header as the picker; only the height differs:
   it fits the content (a long product name wraps to 2+ lines and the card
   grows with it) instead of the picker's 58-76% list height. */
.flow-modal-card {
  min-height: 58%;              /* upright rectangle, same minimum as the picker */
  max-height: 86%;              /* long names still grow the card */
}
.flow-modal-body {
  flex: 1;                      /* takes the free space -> button sits at the bottom */
  overflow-y: auto;             /* safety net only — normal content fits */
  padding: 12px 14px 0;
}
.flow-modal-body .flow-line .value,
.flow-modal-body .summary-row .value {
  overflow-wrap: anywhere;      /* very long names/codes wrap instead of overflowing */
  word-break: break-word;
}
/* Summary inside the modal: no second bordered box (avoid "window in window") */
.flow-modal-body .summary {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.flow-modal-body .summary-row .label {
  flex-shrink: 0;
  margin-right: 12px;
}
.flow-modal-body .summary-row .value {
  text-align: right;
}
.flow-modal-actions {
  flex-shrink: 0;
  padding: 0 14px 16px;
}
/* OK / ZAPISZ in the modal: a bit narrower and lighter than full flow buttons */
.flow-modal .flow-modal-actions .btn {   /* 3 classes: beats .btn-success.flow-save (18px) */
  max-width: 200px;
  min-height: 42px;
  padding: 10px 14px;
  font-size: 15px;
  margin: 16px auto 4px;
}

/* ISSUE source modal: product NAME only (wraps), optional inactive badge,
   then the source tiles (.list-item--pick) underneath. */
.flow-modal-product {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}
.flow-modal-product .value {
  flex: 1 1 auto;
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.flow-modal-product .inactive-badge {
  flex: 0 0 auto;
  margin-left: 0;
}

/* COUNT: large-variance warning inside the summary modal (T5 threshold) */
.flow-modal-body .variance-card {
  margin: 12px 0 0;
}
/* COUNT card: input sits under the location / system-stock lines */
.recount-input {
  margin-top: 12px;
}

/* Taller on-screen step card (RECEIVE quantity + location): content at the
   top, OK/WSTECZ pinned to the bottom of the card. */
.flow-card--tall {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
}
/* Quantity card: OK (+ WSTECZ under it) pushed to the bottom.
   Location card has no OK: WSTECZ directly after the input goes to the bottom. */
.flow-card--tall > .flow-ok,
.flow-card--tall > .input-group + .flow-back {
  margin-top: auto;
}

/* Scrollable list region fills the rest of the card */
.picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 16px;
}

/* A picker row (category or product). Reuses list-item look, tappable.
   Raised tile: themed surface (light = soft blue) + lift + generous padding and
   spacing for gloved/large-finger taps. */
.picker-item {
  background: var(--picker-item-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;                /* roomier target (was 12) */
  margin-bottom: 12px;          /* bigger gap between tiles (was 8) */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--elev-raise);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
/* Press-down feedback (touch — no hover on Zebra): the tile visibly sinks. */
.picker-item:active {
  border-color: var(--accent);
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* Extra breathing room between the two picker views (categories vs products) */
.picker-list { padding-top: 14px; }
.picker-item .picker-item-name {
  font-weight: bold;
  color: var(--text-primary);
}
.picker-item .picker-item-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.picker-item .picker-item-count {
  font-size: 13px;
  color: var(--text-muted);
}
.picker-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 24px;
}

/* --- Notification --- */

/* Full-screen overlay - light dim, card positioned slightly above center */
.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;                /* above picker + flow modals (1100): errors stay visible */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 20px;
  /* align with the green success card position (just below header + title) */
  padding-top: 96px;
  background: rgba(0, 0, 0, 0.35);
  animation: notifyFade 0.18s ease-out;
  /* Info only: taps pass through to the screen/modal underneath (e.g. WSTECZ
     right after an error) instead of being swallowed for the 3 s it shows. */
  pointer-events: none;
}

.notification-overlay.hidden {
  display: none;
}

/* The centered message card */
.notification-card {
  width: 100%;
  max-width: 368px;
  padding: 22px 20px;
  border-radius: 10px;
  border-width: 2px;
  border-style: solid;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: notifyPop 0.2s ease-out;
}

@keyframes notifyFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes notifyPop {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .notification-overlay, .notification-card { animation: none; }
}

.notification-error .notification-card {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger-text);
}

.notification-success .notification-card {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success-text);
}

.notification-info .notification-card {
  background: var(--notification-info-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Login screen --- */

.login-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.login-container .app-title {
  font-size: 28px;
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 8px;
}

.login-container .app-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.login-container .btn {
  max-width: 280px;
}

.login-container .version {
  margin-top: 40px;
  font-size: 12px;
  color: var(--text-faint);
}

/* --- Footer bar --- */

.footer-bar {
  background: var(--bg-secondary);
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* --- Delta display --- */

/* 3-class selectors on purpose: .flow-line .value / .summary-row .value set
   color: text-primary and would otherwise override the delta colour. */
.delta-positive,
.flow-line .value.delta-positive,
.summary-row .value.delta-positive {
  color: var(--success);
}

.delta-negative,
.flow-line .value.delta-negative,
.summary-row .value.delta-negative {
  color: var(--danger);
}

/* --- Spacer --- */

.spacer {
  flex: 1;
}

/* --- Scrollable content --- */

.scroll-content {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 12px;
}

/* --- Theme toggle --- */

.theme-toggle {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.theme-toggle .btn {
  flex: 1;
  min-height: 40px;
  font-size: 14px;
}

.theme-toggle .btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg-primary);
}

/* --- Progressive flow (RECEIVE etc.) --- */

/* Active step card - the current focus of the flow */
.flow-card {
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

/* Slide-up + fade-in for the newly revealed active step */
@keyframes flowSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.flow-anim-in {
  animation: flowSlideUp 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .flow-anim-in { animation: none; }
}

/* A single label+value line, always stacked (label above, value below) */
.flow-line {
  padding: 4px 0;
}

.flow-line:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}

.flow-line .label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.flow-line .value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
  margin-top: 2px;
}

/* Prompt above an input inside the flow */
.flow-prompt {
  text-align: center;
  color: var(--accent);
  font-size: 17px;
  margin: 8px 0 12px;
}

/* Primary confirm button (OK) - large, centered, pushed down from content */
.flow-ok {
  max-width: 260px;
  margin: 20px auto 8px;
}

/* Remove number input spinner arrows (+/-) */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Back link under OK - small, subtle */
.flow-back {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  padding: 6px;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.flow-back:active {
  color: var(--text-primary);
}

/* Subtle secondary button ("Wybierz z listy" / product picker entry) */
.btn-subtle {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  min-height: 40px;
  font-size: 14px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  max-width: 200px;
  margin: 24px auto 8px;
  box-shadow: var(--elev-raise);           /* lifted off the screen */
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-subtle:active {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(1px) scale(0.99);  /* press down */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Cancel row pinned lower */
.flow-cancel {
  margin-top: 8px;
}

/* ZAPISZ / save button - high-contrast text so it stays readable in light mode */
.btn-success.flow-save {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
  font-size: 18px;
  letter-spacing: 1px;
}

.btn-success.flow-save:active {
  background: var(--success-text);
}

/* Success confirmation - one big green card, centered */
.flow-success-card {
  background: var(--success-bg);
  border: 2px solid var(--success);
  border-radius: 10px;
  padding: 28px 16px;
  text-align: center;
  margin: 24px 0 20px;
  animation: flowSlideUp 0.25s ease-out;
}

.flow-success-card .success-title {
  font-size: 22px;
  font-weight: bold;
  color: var(--success-text);
  letter-spacing: 1px;
}

.flow-success-card .success-sub {
  font-size: 15px;
  color: var(--success-text);
  margin-top: 6px;
  opacity: 0.9;
}

/* --- 3-slot bar: left / CENTRE / right ---
   Rule of thumb: 2 items -> flex + space-between; 3 items -> .bar-3.
   space-between does NOT centre the middle item when the side items differ
   in width (or one is hidden). Grid with equal 1fr side columns does.
   Kept at the END of the file on purpose: same specificity as
   .picker-header / .footer-bar, so it must come after them to win.
   Used by: product picker header, menu footer. */
.bar-3 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
}
.bar-3 > :first-child { justify-self: start; }
.bar-3 > .bar-3-center { justify-self: center; text-align: center; grid-column: 2; }
.bar-3 > :last-child  { justify-self: end; grid-column: 3; }