/* Cloud cashier: design tokens + layout on top of the hub UI kit (Bootstrap 5 + Finapp).
   Light values come from the Cloud Ταμειακή designs; dark values are derived from them.
   Overrides of kit classes are scoped with body.app so they win over the kit's body.dark-mode rules. */

:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-2: #eef2f6;
  --surface-3: #f2f4f7;
  --text: #1f2937;
  --text-strong: #111827;
  --muted: #5b6472;
  --border: #e5e7eb;
  --border-soft: #f1f3f5;
  --border-strong: #d1d5db;
  --primary: #2f74d8;
  --primary-strong: #1d63c4;
  --primary-hover: #2766c2;
  --primary-soft: #dbe9fb;
  --primary-tint: #f3f8fe;
  --on-primary: #ffffff;
  --key: #5d6b79;
  --key-text: #ffffff;
  --key-alt: #cfe0f5;
  --key-alt-text: #1d63c4;
  --ink: #1f2937;
  --on-ink: #ffffff;
  --neutral-btn: #e5e7eb;
  --neutral-btn-text: #374151;
  --success: #166534;
  --success-bg: #dcfce7;
  --success-icon: #15803d;
  --warning: #9a3412;
  --warning-bg: #ffedd5;
  --danger: #b42318;
  --danger-bg: #fee4e2;
  --scrim: rgba(17, 24, 39, 0.55);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.25);
  --focus: 0 0 0 3px rgba(47, 116, 216, 0.35);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #0f141b;
  --surface: #171e28;
  --surface-2: #212a36;
  --surface-3: #1d2530;
  --text: #e4e8ee;
  --text-strong: #f5f7fa;
  --muted: #9aa5b4;
  --border: #2a3442;
  --border-soft: #222b37;
  --border-strong: #3a4655;
  --primary: #4a8ef2;
  --primary-strong: #8db8ff;
  --primary-hover: #5d9bf5;
  --primary-soft: #1d3657;
  --primary-tint: #15243a;
  --on-primary: #ffffff;
  --key: #364252;
  --key-text: #f1f4f8;
  --key-alt: #1d3657;
  --key-alt-text: #a9c8ff;
  --ink: #e4e8ee;
  --on-ink: #111827;
  --neutral-btn: #2a3442;
  --neutral-btn-text: #e4e8ee;
  --success: #86efac;
  --success-bg: #123522;
  --success-icon: #4ade80;
  --warning: #fdba74;
  --warning-bg: #3d2512;
  --danger: #ff9b91;
  --danger-bg: #3d1a18;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --focus: 0 0 0 3px rgba(74, 142, 242, 0.45);
  color-scheme: dark;
}

/* ---------- Base ---------- */
body.app {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
body.app h1, body.app h2, body.app h3, body.app h4, body.app h5 { color: var(--text); font-family: var(--font); }
body.app a { color: var(--primary-strong); }
body.app a:hover { color: var(--primary); }
body.app button { font-family: inherit; cursor: pointer; }
body.app :focus-visible { outline: none; box-shadow: var(--focus); }
body.app .text-muted { color: var(--muted) !important; }
.icon { flex-shrink: 0; display: block; }
.tabular { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Kit component overrides ---------- */
body.app .btn { height: 48px; padding: 0 18px; font-size: 15px; font-weight: 600; border-radius: 12px; border-width: 0; gap: 8px; }
body.app .btn-lg { height: 52px; font-size: 16px; }
body.app .btn-primary { background: var(--primary) !important; color: var(--on-primary) !important; border-color: var(--primary) !important; }
body.app .btn-primary:hover, body.app .btn-primary:focus-visible { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; color: var(--on-primary) !important; }
body.app .btn-primary:disabled { background: var(--primary) !important; opacity: 0.5; }
body.app .btn-secondary { background: var(--neutral-btn) !important; color: var(--neutral-btn-text) !important; border-color: var(--neutral-btn) !important; }
body.app .btn-secondary:hover { background: var(--border-strong) !important; color: var(--neutral-btn-text) !important; }
body.app .btn-dark { background: var(--ink) !important; color: var(--on-ink) !important; }
body.app .btn-dark:hover { opacity: 0.9; color: var(--on-ink) !important; }
body.app .btn-outline-danger { border: 1px solid var(--danger) !important; color: var(--danger) !important; background: transparent !important; }
body.app .btn-outline-danger:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }
body.app .btn.is-busy { position: relative; color: transparent !important; }
body.app .btn.is-busy::after {
  content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--on-primary); border-right-color: transparent; animation: spin 0.7s linear infinite;
}
body.app .btn-secondary.is-busy::after { border-color: var(--neutral-btn-text); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

body.app .form-control,
body.app .form-select {
  height: 48px; padding: 0 14px; font-size: 16px; color: var(--text-strong);
  background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: none;
}
body.app .form-control:focus, body.app .form-select:focus { border-color: var(--primary); box-shadow: var(--focus); color: var(--text-strong); background-color: var(--surface); }
body.app .form-control::placeholder { color: var(--muted); opacity: 0.8; }
body.app .form-control.is-invalid { border-color: var(--danger); }
body.app .form-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--text); }
body.app .field-hint { font-size: 13px; color: var(--muted); margin-top: 6px; display: flex; gap: 6px; align-items: center; }
body.app .field-hint.is-success { color: var(--success-icon); }
body.app .field-hint.is-error { color: var(--danger); }
.field { display: flex; flex-direction: column; }
.field + .field, .field-row + .field, .field + .field-row { margin-top: 14px; }
.field-row .field + .field { margin-top: 0; }

body.app .modal-backdrop.show { opacity: 1; background: var(--scrim); }
body.app .modal-content { background: var(--surface); color: var(--text); border: 0; border-radius: 20px; box-shadow: var(--shadow-lg); }
body.app .dialogbox .modal-dialog .modal-content { max-width: 340px; background: var(--surface); }
body.app .dialogbox .modal-header { padding: 22px 22px 6px; }
body.app .dialogbox .modal-title { color: var(--text-strong); font-size: 17px; font-weight: 600; }
body.app .dialogbox .modal-body { color: var(--muted); padding: 0 22px 18px; font-size: 15px; }
body.app .dialogbox .modal-footer { border-top: 1px solid var(--border); }
body.app .dialogbox .btn-inline .btn { height: 52px; font-size: 15px; border-radius: 0; background: transparent; }
body.app .dialogbox .btn-inline .btn:first-child { border-right: 1px solid var(--border); }
body.app .btn-text-primary { color: var(--primary-strong) !important; }
body.app .btn-text-danger { color: var(--danger) !important; }
body.app .btn-text-secondary { color: var(--muted) !important; }

body.app .toast-box {
  left: 50%; right: auto; width: min(480px, calc(100% - 32px)); transform: translateX(-50%);
  border-radius: 14px; background: var(--ink); color: var(--on-ink); font-size: 15px; padding: 12px 16px; box-shadow: var(--shadow-lg);
  cursor: pointer;
}
body.app .toast-box.toast-top { top: -120px; }
body.app .toast-box.toast-top.show { top: 16px; }
body.app .toast-box .in { gap: 10px; padding-right: 0; }
body.app .toast-box[data-tone='success'] .toast-icon { color: var(--success-icon); }
body.app .toast-box[data-tone='error'] .toast-icon { color: #f97066; }

/* ---------- App header ---------- */
.app-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 24px; min-height: 64px; box-sizing: border-box;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text) !important; font-weight: 600; font-size: 15px; margin-right: 8px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; display: block; object-fit: cover; flex-shrink: 0; }
/* dobby wordmark (hub logo.png is white-on-transparent): used as a mask so it follows the text colour in both themes. */
.wordmark {
  display: block; width: 92px; height: 34px; background-color: var(--text);
  -webkit-mask: url('../img/logo.png') left center / contain no-repeat;
  mask: url('../img/logo.png') left center / contain no-repeat;
}
.app-nav { display: flex; gap: 6px; }
.app-nav-link {
  display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 44px; border-radius: 10px;
  background: var(--surface-3); color: var(--text) !important; text-decoration: none; font-size: 15px; font-weight: 500;
}
.app-nav-link:hover { background: var(--border); }
.app-nav-link[aria-current='page'] { background: var(--primary-soft); color: var(--primary-strong) !important; }
.app-header-spacer { flex-grow: 1; }
.app-clock { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.app-header-tools { display: flex; align-items: center; gap: 6px; }
.icon-button {
  width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--text);
  display: grid; place-items: center;
}
.icon-button:hover { background: var(--surface-3); }
.lang-select {
  height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600;
  padding: 0 8px; cursor: pointer;
}
.lang-select:hover { background: var(--surface-3); }
.lang-select option { background: var(--surface); color: var(--text); }
.app-user { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; padding: 0 6px 0 10px; border-left: 1px solid var(--border); margin-left: 4px; }
.app-user-name { font-size: 14px; font-weight: 600; color: var(--text); }
.app-user-business { font-size: 12px; color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Page heading ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 24px 32px 20px; }
.page-head-icon { width: 56px; height: 56px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--muted); }
.page-head h1 { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.page-head-spacer { flex-grow: 1; }
.pill-select {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 18px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--surface); font-size: 15px;
}
.pill-select select { border: 0; background: transparent; font: inherit; color: var(--text); outline: none; height: 44px; padding-right: 10px; cursor: pointer; }
.pill-select select option { background: var(--surface); color: var(--text); }
.pill-select:focus-within { box-shadow: var(--focus); border-color: var(--primary); }

.banner { margin: 0 32px 16px; padding: 12px 16px; border-radius: 12px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; background: var(--warning-bg); color: var(--warning); }
.banner[hidden] { display: none; }

.surface { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-sm); }

/* ---------- Cashier ---------- */
.cashier-grid {
  display: grid; gap: 24px; padding: 0 32px 32px;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  grid-template-areas: 'cart quick' 'pad quick';
  grid-template-rows: auto auto;
  align-items: start;
}
.cart-panel { grid-area: cart; display: flex; flex-direction: column; min-height: 380px; overflow: hidden; }
.pad-panel { grid-area: pad; display: flex; flex-direction: column; gap: 16px; }
.quick-panel { grid-area: quick; padding: 20px; display: flex; flex-direction: column; gap: 14px; align-self: stretch; min-height: 0; }

.cart-scroll { overflow-x: auto; flex-grow: 1; }
.cart-table { min-width: 520px; }
.cart-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px 70px 100px 36px; gap: 12px; align-items: center;
  padding: 10px 20px; font-size: 15px; border-bottom: 1px solid var(--border-soft);
}
.cart-row.cart-head { padding: 18px 20px; border-bottom: 1px solid var(--border); font-weight: 600; }
.cart-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.cart-row .center { text-align: center; }
.cart-row .muted { color: var(--muted); }
.cart-row .strong { font-weight: 600; }
.cart-name { overflow: hidden; text-overflow: ellipsis; }
.cart-name small { display: block; color: var(--muted); font-size: 12px; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 4px; }
.stepper button {
  width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text);
  font-size: 17px; line-height: 1; display: grid; place-items: center;
}
.stepper button:hover { background: var(--surface-3); }
.stepper span { min-width: 24px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.row-remove { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; }
.row-remove:hover { background: var(--danger-bg); color: var(--danger); }
.cart-empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 15px; }
.cart-empty strong { display: block; color: var(--text); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.cart-new-line { animation: flash 0.6s ease-out; }
@keyframes flash { from { background: var(--primary-tint); } to { background: transparent; } }

.issue-wrap { padding: 16px 20px 20px; }
.issue-bar {
  width: 100%; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; border: 0; border-radius: 12px;
  background: var(--primary); color: var(--on-primary); font-size: 18px; transition: background 0.15s;
}
.issue-bar:hover:not(:disabled) { background: var(--primary-hover); }
.issue-bar:disabled { opacity: 0.45; cursor: not-allowed; }
.issue-count { min-width: 28px; height: 28px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--on-primary); color: var(--primary); display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.issue-label { flex-grow: 1; text-align: center; font-weight: 600; }
.issue-total { font-weight: 700; font-variant-numeric: tabular-nums; }

.amount-display {
  height: 64px; box-sizing: border-box; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 32px; font-variant-numeric: tabular-nums; color: var(--text-strong);
}
.amount-hint { font-size: 13px; color: var(--muted); }
.numpad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.key {
  height: 64px; border: 0; border-radius: 12px; background: var(--key); color: var(--key-text); font-size: 24px; font-weight: 600;
  display: grid; place-items: center; transition: transform 0.06s, filter 0.15s; user-select: none; -webkit-tap-highlight-color: transparent;
}
.key:hover { filter: brightness(1.08); }
.key:active, .key.is-pressed { transform: scale(0.96); }
.key.alt { background: var(--key-alt); color: var(--key-alt-text); }

.quick-head { display: flex; align-items: center; gap: 10px; }
.quick-head h2 { margin: 0; font-size: 17px; font-weight: 600; flex-grow: 1; }
.search-field { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--muted); background: var(--surface); }
.search-field:focus-within { border-color: var(--primary); box-shadow: var(--focus); }
.search-field input { border: 0; outline: none; font: inherit; font-size: 15px; flex-grow: 1; min-width: 0; background: transparent; color: var(--text); }
.search-field input::placeholder { color: var(--muted); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn {
  height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 14px;
}
.chip-btn:hover { background: var(--surface-3); }
.chip-btn[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 500; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow-y: auto; align-content: start; max-height: 600px; padding: 2px; margin: -2px; }
.product-tile {
  height: 72px; border: 0; border-radius: 12px; background: var(--surface-2); padding: 10px 14px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.06s, background 0.15s;
}
.product-tile:hover { background: var(--primary-tint); }
.product-tile:active { transform: scale(0.97); }
.product-tile .name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-tile .price { font-size: 14px; font-weight: 600; color: var(--primary-strong); font-variant-numeric: tabular-nums; }
.product-tile .price.is-empty { color: var(--muted); font-weight: 500; }
.product-empty { grid-column: 1 / -1; padding: 32px 8px; text-align: center; color: var(--muted); }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 12px; height: 72px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Issue flow modal ---------- */
.flow-modal .modal-dialog { max-width: 540px; }
.flow-modal .modal-content { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.flow-head { display: flex; align-items: flex-start; gap: 14px; }
.flow-head-text { flex-grow: 1; min-width: 0; }
.flow-head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.flow-amount { margin-top: 6px; font-size: 20px; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.flow-sub { margin-top: 2px; font-size: 14px; color: var(--muted); }
.flow-sub strong { color: var(--primary); font-weight: 600; }
.round-button {
  width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--text);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15); display: grid; place-items: center;
}
:root[data-theme='dark'] .round-button { background: var(--surface-2); box-shadow: none; }
.round-button:hover { background: var(--surface-3); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.steps li { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.steps li::before { content: ''; height: 4px; border-radius: 2px; background: var(--border); }
.steps li.is-done::before, .steps li.is-current::before { background: var(--primary); }
.steps li.is-current { color: var(--primary-strong); font-weight: 600; }
.steps li.is-skipped { opacity: 0.5; }
.option-list { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); text-align: left; width: 100%; font: inherit;
}
.option:hover { border-color: var(--border-strong); background: var(--surface-3); }
.option[aria-checked='true'], .option.is-default { border: 2px solid var(--primary); background: var(--primary-tint); padding: 15px; }
.option:disabled { opacity: 0.5; cursor: not-allowed; }
.option-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-3); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; }
.option[aria-checked='true'] .option-icon, .option.is-default .option-icon { background: var(--primary-soft); color: var(--primary-strong); }
.option-text { flex-grow: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.option-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.option-desc { font-size: 14px; color: var(--muted); }
.option-chevron { color: var(--muted); }
.tag { font-size: 12px; font-weight: 600; color: var(--primary-strong); background: var(--primary-soft); padding: 2px 8px; border-radius: 999px; }
.flow-actions { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; }
.flow-actions.single { grid-template-columns: 1fr; }
.flow-actions .btn { width: 100%; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 110px; gap: 12px; }
.field-row .form-control { min-width: 0; }
.input-with-button { display: flex; gap: 8px; }
.input-with-button .form-control { flex-grow: 1; min-width: 0; }
.input-with-button .btn { flex-shrink: 0; }
.flow-status { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 12px 0 4px; }
.flow-status h2 { margin: 0; font-size: 22px; font-weight: 700; }
.flow-status p { margin: 0; color: var(--muted); font-size: 15px; max-width: 380px; }
.status-orb { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; }
.status-orb.is-success { background: var(--success-bg); color: var(--success-icon); }
.status-orb.is-error { background: var(--danger-bg); color: var(--danger); }
.status-orb.is-working { background: var(--primary-tint); color: var(--primary); }
.status-orb.is-working .icon { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.status-orb.is-success .icon { animation: pop 0.35s ease-out; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
.facts { width: 100%; margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; text-align: left; background: var(--surface-3); border-radius: 12px; padding: 14px 16px; }
.facts dt { color: var(--muted); font-weight: 400; }
.facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.print-note { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* ---------- Invoices ---------- */
.invoices-wrap { padding: 0 32px 32px; }
.invoices-panel { overflow: hidden; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--border); }
.toolbar .search-field { flex: 1 1 280px; max-width: 380px; }
.date-range { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--muted); }
.date-range:focus-within { border-color: var(--primary); box-shadow: var(--focus); }
.date-range input { border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--text); outline: none; width: 128px; }
.date-range input::-webkit-calendar-picker-indicator { cursor: pointer; }
:root[data-theme='dark'] .date-range input::-webkit-calendar-picker-indicator { filter: invert(0.85); }
.select-field { height: 46px; border: 1px solid var(--border-strong); border-radius: 10px; background-color: var(--surface); color: var(--text); font: inherit; font-size: 14px; padding: 0 36px 0 12px; }
.select-field option { background: var(--surface); color: var(--text); }
.toolbar-summary { margin-left: auto; font-size: 14px; color: var(--muted); white-space: nowrap; }
.toolbar-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 980px; }
.data-table th { text-align: left; font-weight: 600; font-size: 13px; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--text); }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover td { background: var(--surface-3); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .nowrap { white-space: nowrap; }
.data-table .sub { display: block; color: var(--muted); font-size: 12px; }
.data-table .mark-cell { font-variant-numeric: tabular-nums; color: var(--muted); }
.data-table .amount { font-weight: 600; }
.doc-link { font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; color: var(--primary-strong); }
.doc-link:hover { text-decoration: underline; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.is-success { background: var(--success-bg); color: var(--success); }
.status-pill.is-pending { background: var(--warning-bg); color: var(--warning); }
.status-pill.is-cancelled { background: var(--danger-bg); color: var(--danger); }
.status-pill.is-draft { background: var(--surface-3); color: var(--muted); }
.table-state { padding: 56px 20px; text-align: center; color: var(--muted); }
.table-state strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
.table-state .btn { margin-top: 14px; }

.pager { display: flex; align-items: center; gap: 6px; padding: 14px 20px; font-size: 14px; color: var(--muted); }
.pager-info { margin-right: auto; }
.pager button { min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500; display: grid; place-items: center; padding: 0 8px; }
.pager button:hover:not(:disabled) { background: var(--surface-3); }
.pager button[aria-current='page'] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Invoice details */
.detail-modal .modal-dialog { max-width: 600px; }
.detail-modal .modal-content { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.detail-head { display: flex; align-items: flex-start; gap: 12px; }
.detail-head > div { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.detail-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.detail-head h2 span { color: var(--primary-strong); }
.dl-grid { display: grid; grid-template-columns: 180px 1fr; gap: 10px 16px; margin: 0; font-size: 15px; }
.dl-grid dt { color: var(--muted); font-weight: 400; }
.dl-grid dd { margin: 0; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.dl-grid dd .muted { color: var(--muted); }
.copy-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--surface-3); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; }
.copy-btn:hover { color: var(--text); }
.detail-section { border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.detail-section h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.detail-section .lead-line { font-weight: 600; font-size: 16px; }
.detail-section div { font-size: 14px; }
.items { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.items-row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 64px 96px; gap: 12px; padding: 10px 16px; font-size: 14px; border-top: 1px solid var(--border-soft); }
.items-row:first-child { border-top: 0; background: var(--surface-3); font-weight: 600; font-size: 13px; color: var(--muted); }
.items-row > :not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; font-size: 15px; }
.totals dt { color: var(--muted); font-weight: 400; text-align: right; }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 96px; }
.totals .grand { font-size: 18px; font-weight: 700; color: var(--text-strong); }
.mark-box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--surface-3); flex-wrap: wrap; }
.mark-box > div { flex-grow: 1; }
.mark-box .label { font-size: 13px; color: var(--muted); }
.mark-box .value { font-weight: 600; font-variant-numeric: tabular-nums; }
.mark-box a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; font-size: 14px; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-actions .btn { flex: 1 1 auto; white-space: nowrap; }

/* ---------- Login ---------- */
.login-page { min-height: 100vh; display: flex; flex-direction: column; }
.login-top { display: flex; align-items: center; gap: 6px; padding: 16px 24px; }
.login-top-spacer { flex-grow: 1; }
.login-main { flex-grow: 1; display: grid; place-items: center; align-content: center; gap: 18px; padding: 16px 16px 64px; }
.login-help { font-size: 14px; color: var(--muted) !important; text-decoration: underline; text-underline-offset: 3px; }
.login-help:hover { color: var(--text) !important; }
.login-card { width: 100%; max-width: 420px; padding: 32px; box-sizing: border-box; }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.login-brand .brand-mark { width: 52px; height: 52px; border-radius: 14px; }
.login-brand h1 { margin: 0; font-size: 24px; font-weight: 600; }
.login-brand p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.login-card .btn-primary { width: 100%; margin-top: 22px; }
.login-alert { margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; font-size: 14px; background: var(--danger-bg); color: var(--danger); display: flex; gap: 8px; }
.login-alert.is-info { background: var(--primary-tint); color: var(--primary-strong); }
.login-alert[hidden] { display: none; }
.login-advanced { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.login-advanced summary { cursor: pointer; font-size: 14px; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.login-advanced summary::-webkit-details-marker { display: none; }
.login-advanced summary::before { content: '▸'; font-size: 11px; transition: transform 0.15s; }
.login-advanced[open] summary::before { transform: rotate(90deg); }
.login-advanced .field { margin-top: 12px; }
.pin-input { letter-spacing: 0.5em; font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cashier-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .app-clock { display: none; }
}

@media (max-width: 900px) {
  .app-header { padding: 8px 16px; gap: 8px; }
  .brand-text, .app-user { display: none; }
  .page-head { padding: 16px 16px 12px; gap: 12px; }
  .page-head-icon { width: 44px; height: 44px; }
  .page-head h1 { font-size: 22px; }
  .banner { margin: 0 16px 12px; }
  .cashier-grid { padding: 0 16px 16px; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: 'cart' 'quick' 'pad'; }
  .quick-panel { padding: 16px; }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 320px; }
  .invoices-wrap { padding: 0 16px 16px; }
}

@media (max-width: 600px) {
  .brand { display: none; }
  .app-nav-link { padding: 0 12px; }
  .app-nav-link span { display: none; }
  .page-head-icon { display: none; }
  .cart-panel { min-height: 0; }
  .cart-table { min-width: 0; }
  .cart-row.cart-head { display: none; }
  .cart-row {
    grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'name step total' 'meta step total';
    padding: 10px 14px; row-gap: 2px;
  }
  .cart-row .cell-name { grid-area: name; }
  .cart-row .cell-price { grid-area: meta; text-align: left; font-size: 13px; }
  .cart-row .cell-vat, .cart-row .cell-remove { display: none; }
  .cart-row .cell-qty { grid-area: step; }
  .cart-row .cell-total { grid-area: total; min-width: 64px; }
  .issue-wrap { padding: 12px 14px 14px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 236px; }
  .numpad { gap: 8px; }
  .key { height: 56px; font-size: 22px; }
  .amount-display { height: 56px; font-size: 28px; }

  .flow-modal .modal-dialog, .detail-modal .modal-dialog { margin: 0; max-width: none; min-height: 100%; align-items: flex-end; }
  .flow-modal .modal-content, .detail-modal .modal-content { border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .flow-actions { grid-template-columns: 1fr 2fr; }
  .field-row { grid-template-columns: minmax(0, 1fr) 80px; }
  .field-row .field:last-child { grid-column: 1 / -1; }
  .dl-grid { grid-template-columns: 1fr; gap: 2px; }
  .dl-grid dd { margin-bottom: 8px; }

  .toolbar { padding: 14px; gap: 10px; }
  .toolbar .search-field, .date-range, .select-field { flex: 1 1 100%; max-width: none; }
  .date-range input { flex: 1; width: auto; min-width: 0; }
  .toolbar-summary { margin-left: 0; }
  .data-table { min-width: 0; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody { display: block; }
  .data-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
    grid-template-areas: 'doc amount' 'meta status';
  }
  .data-table td { padding: 0; border: 0; }
  .data-table td[data-col='date'], .data-table td[data-col='order'], .data-table td[data-col='mark'], .data-table td[data-col='pay'] { display: none; }
  .data-table td[data-col='aa'] { grid-area: doc; }
  .data-table td[data-col='type'] { display: none; }
  .data-table td[data-col='customer'] { grid-area: meta; font-size: 13px; color: var(--muted); }
  .data-table td[data-col='customer'] .sub { display: inline; }
  .data-table td[data-col='amount'] { grid-area: amount; }
  .data-table td[data-col='status'] { grid-area: status; text-align: right; }
  .data-table .mobile-only { display: inline; }
  .pager { padding: 12px 14px; flex-wrap: wrap; }
  .pager-info { width: 100%; margin-bottom: 4px; }
}
.data-table .mobile-only { display: none; }
@media (max-width: 600px) { .data-table .mobile-only { display: inline; } }

body.app .toolbar .form-select { width: auto; height: 46px; font-size: 14px; padding-right: 36px; }
@media (max-width: 600px) { body.app .toolbar .form-select { width: 100%; } }

/* ---------- Header extras (slot + overflow menu) ---------- */
.app-header-slot { display: flex; align-items: center; }
.app-header-slot:empty { display: none; }
.app-header-slot .pill-select { height: 44px; padding-left: 16px; }
.app-header-slot .pill-select select { height: 42px; max-width: 260px; text-overflow: ellipsis; }
.app-more { display: none; }
body.app .app-more .dropdown-menu {
  min-width: 240px; padding: 8px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-lg); color: var(--text);
}
.more-user { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; font-size: 14px; }
.more-user span { color: var(--muted); font-size: 12px; }
.more-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 4px 8px; }
.more-langs button { height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 14px; }
.more-langs button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
body.app .app-more .dropdown-item { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border-radius: 10px; color: var(--text); font-size: 15px; }
body.app .app-more .dropdown-item:hover, body.app .app-more .dropdown-item:focus { background: var(--surface-3); color: var(--text); }

/* ---------- Cashier: fits the viewport. Only the cart lines and the product grid scroll inside. ---------- */
body.page-cashier { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.page-cashier .app-header { position: static; flex: none; }
body.page-cashier .banner { flex: none; margin: 12px 24px 0; }
body.page-cashier .cashier-grid {
  flex: 1 1 auto; min-height: 0; padding: 20px 24px; gap: 20px;
  grid-template-rows: minmax(0, 1fr) auto; align-items: stretch;
}
body.page-cashier .cart-panel { min-height: 0; }
body.page-cashier .cart-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
body.page-cashier .cart-row.cart-head { position: sticky; top: 0; z-index: 1; background: var(--surface); }
body.page-cashier .cart-empty { padding: 24px 20px; }
body.page-cashier .pad-panel { gap: 12px; }
body.page-cashier .numpad { gap: 10px; }
body.page-cashier .key { height: 7.5vh; height: clamp(44px, 7.5dvh, 64px); }
body.page-cashier .amount-display { height: clamp(48px, 7dvh, 64px); }
body.page-cashier .quick-panel { min-height: 0; overflow: hidden; }
body.page-cashier .product-grid { flex: 1 1 auto; min-height: 0; max-height: none; }
.quick-filters { display: flex; flex-direction: column; gap: 12px; }

/* Short laptop screens (e.g. 1366x768). */
@media (max-height: 780px) and (min-width: 901px) {
  body.page-cashier .cashier-grid { padding: 14px 20px; gap: 14px; }
  body.page-cashier .cart-row.cart-head { padding: 12px 20px; }
  body.page-cashier .issue-wrap { padding: 10px 16px 12px; }
  body.page-cashier .issue-bar { height: 52px; }
  body.page-cashier .quick-panel { padding: 14px; gap: 10px; }
  body.page-cashier .quick-head { display: none; }
}

/* Tablet (portrait): cart on top, number pad + quick add side by side, as in the tablet design. */
@media (max-width: 900px) and (min-width: 601px) {
  body.page-cashier .cashier-grid {
    padding: 16px; gap: 16px;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    grid-template-areas: 'cart cart' 'pad quick';
    grid-template-rows: minmax(0, 1fr) auto;
  }
  body.page-cashier .key { height: 8vh; height: clamp(48px, 8dvh, 96px); }
  body.page-cashier .quick-panel { padding: 14px; gap: 10px; }
  body.page-cashier .quick-head { display: none; }
  body.page-cashier .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.page-cashier .chip-btn { flex: none; }
  body.page-cashier .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The pad sets the bottom row's height; the product panel fills it and scrolls instead of growing it. */
  body.page-cashier .quick-panel { height: 0; min-height: 100%; }
}

/* Phone: cart, a two-row swipeable product strip, then the number pad. */
@media (max-width: 600px) {
  .app-header-tools { display: none; }
  .app-more { display: block; }
  .app-header { flex-wrap: nowrap; }
  .app-header-spacer { display: none; }
  .app-header-slot { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .app-header-slot .pill-select { padding-left: 12px; min-width: 0; max-width: 100%; }
  .app-header-slot .pill-select select { width: 100%; max-width: none; min-width: 0; font-size: 14px; }
  body.page-cashier .banner { margin: 8px 8px 0; font-size: 13px; padding: 8px 12px; }
  body.page-cashier .cashier-grid {
    padding: 8px; gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'cart' 'quick' 'pad';
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  body.page-cashier .cart-empty { padding: 12px; font-size: 13px; }
  body.page-cashier .cart-empty strong { font-size: 15px; }
  body.page-cashier .issue-wrap { padding: 8px; }
  body.page-cashier .issue-bar { height: 52px; font-size: 17px; }
  body.page-cashier .quick-panel { padding: 8px; gap: 8px; border-radius: 14px; }
  body.page-cashier .quick-head { display: none; }
  body.page-cashier .quick-filters { flex-direction: row; align-items: center; gap: 8px; }
  /* Search collapses to an icon next to the categories and expands while in use. */
  body.page-cashier .quick-filters .search-field { flex: 0 0 40px; height: 40px; padding: 0 10px; transition: flex-basis 0.15s; }
  body.page-cashier .quick-filters .search-field input { width: 0; }
  body.page-cashier .quick-filters .search-field:focus-within { flex: 1 1 auto; }
  body.page-cashier .quick-filters .search-field:focus-within input { width: auto; }
  body.page-cashier .quick-filters:focus-within .chips { display: none; }
  /* Kept in their own rules: older WebViews without :has() would otherwise drop the rules above too. */
  body.page-cashier .quick-filters .search-field:has(input:not(:placeholder-shown)) { flex: 1 1 auto; }
  body.page-cashier .quick-filters .search-field:has(input:not(:placeholder-shown)) input { width: auto; }
  body.page-cashier .quick-filters:has(input:not(:placeholder-shown)) .chips { display: none; }
  body.page-cashier .chips { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.page-cashier .chips::-webkit-scrollbar { display: none; }
  body.page-cashier .chip-btn { flex: none; height: 36px; }
  body.page-cashier .product-grid {
    flex: none; max-height: none; overflow-x: auto; overflow-y: hidden;
    grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, 54px); grid-auto-columns: calc(50% - 4px);
    gap: 8px; scroll-snap-type: x proximity;
  }
  body.page-cashier .product-tile { height: 54px; padding: 7px 10px; scroll-snap-align: start; }
  body.page-cashier .product-grid .skeleton { height: 54px; }
  body.page-cashier .product-empty { grid-row: 1 / -1; padding: 12px; }
  body.page-cashier .product-grid:has(.product-empty) { grid-auto-columns: 100%; }
  body.page-cashier .pad-panel { gap: 8px; }
  body.page-cashier .numpad { gap: 6px; }
  body.page-cashier .key { height: 6vh; height: clamp(40px, 6dvh, 56px); font-size: 21px; border-radius: 10px; }
  body.page-cashier .amount-display { height: 44px; font-size: 24px; padding: 0 16px; border-radius: 12px; }
}

/* Short phones (iPhone SE, small Android, Safari with toolbars): one row of products leaves room for the cart. */
@media (max-width: 600px) and (max-height: 720px) {
  .app-header { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
  body.page-cashier .product-grid { grid-template-rows: 50px; grid-auto-columns: calc(50% - 4px); }
  body.page-cashier .product-tile { height: 50px; }
  body.page-cashier .product-grid .skeleton { height: 50px; }
  body.page-cashier .issue-bar { height: 48px; }
  body.page-cashier .key { height: 40px; }
  body.page-cashier .amount-display { height: 40px; font-size: 22px; }
}

/* ---------- Setup guide (setup.html) ---------- */
.setup { max-width: 640px; margin: 0 auto; padding: 8px 24px 64px; box-sizing: border-box; }
.setup h1 { margin: 16px 0 28px; font-size: 28px; font-weight: 600; letter-spacing: -0.015em; }
.setup-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.setup-step { counter-increment: step; position: relative; padding: 0 0 28px 56px; }
.setup-step::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-strong); font-weight: 700; display: grid; place-items: center;
}
.setup-step:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 42px; bottom: 8px; width: 2px; background: var(--border); }
.setup-step h2 { margin: 6px 0 8px; font-size: 18px; font-weight: 600; }
.setup-step p { margin: 0; font-size: 15px; line-height: 1.6; }
.setup-step strong { font-weight: 600; }
.setup-download { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 12px 0 14px; }
.setup-download .btn { gap: 8px; }
.setup-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.setup-qr svg { display: block; border-radius: 10px; border: 1px solid var(--border); }
.setup-qr figcaption { font-size: 13px; color: var(--muted); }
.setup-notes { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.setup-notes strong { color: var(--text); }
.setup-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; text-decoration: none; }
@media (max-width: 600px) {
  .setup { padding: 0 16px 48px; }
  .setup h1 { font-size: 24px; }
  .setup-step { padding-left: 48px; }
}

/* Three nav items (POC setup link): keep the top bar on one row and shed labels as the width shrinks. */
.app-header { flex-wrap: nowrap; }
.app-header-slot { min-width: 0; }
.app-header-slot .pill-select { min-width: 0; }
@media (max-width: 1440px) { .brand-text { display: none; } }
@media (max-width: 1200px) {
  .app-nav-link { padding: 0 12px; }
  .app-nav-link span { display: none; }
}