/* =====================================================================
   components.css — buttons, chips, fields, badges, dialogs, toasts.
   Nothing here knows about the counter screen; pos.css does the layout.
   ===================================================================== */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-5);
  border-radius: var(--r-2);
  background: var(--c-surface-2);
  color: var(--c-ink);
  box-shadow: var(--sh-inset);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  text-align: center;
  white-space: nowrap;
  transition: transform var(--d-1) var(--e-out),
              background-color var(--d-2) var(--e-out),
              box-shadow var(--d-2) var(--e-out);
}
.btn:hover { background: var(--c-surface-3); }
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .45; transform: none; }

.btn--primary {
  background: var(--c-brand);
  color: var(--c-brand-ink);
  box-shadow: var(--sh-2);
  font-weight: var(--w-bold);
}
.btn--primary:hover { background: var(--c-brand-strong); }

.btn--ok      { background: var(--c-ok);   color: #fff; box-shadow: var(--sh-1); font-weight: var(--w-bold); }
/* The bottom bar's one status button (`#barNext`) is re-labelled through
   every step of the order — a cashier could not tell, from the button
   alone, that its *last* tap is the one that closes the order and clears
   its tab. `app.js`'s `paintBottomBar()` adds this only on that last tap,
   so the button visibly changes character right when it starts meaning
   "finish," not just "next." */
.btn--ok.bottombar__next--final {
  box-shadow: 0 0 0 3px var(--c-ok-soft), var(--sh-2);
}
.btn--ghost   { background: transparent; box-shadow: none; color: var(--c-ink-2); }
.btn--ghost:hover { background: var(--c-surface-3); }
.btn--danger  { background: var(--c-danger-soft); color: var(--c-danger); box-shadow: none; }
.btn--danger:hover { background: var(--c-danger); color: #fff; }
.btn--lg { min-height: var(--tap-lg); font-size: var(--t-lg); padding: 0 var(--s-6); }
.btn--block { width: 100%; }
.btn--icon { min-width: var(--tap); padding: 0 var(--s-3); }

/* ---------- chips (categories, filters) ----------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  /* 48px, not 52: it is the row height the wrapped strip's two-row clamp is
     measured against, and still above the 48px floor for a frequent control. */
  min-height: 48px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink-2);
  box-shadow: var(--sh-inset);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  white-space: nowrap;
  transition: background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out),
              transform var(--d-1) var(--e-out);
}
.chip:hover { background: var(--c-surface-3); }
.chip:active { transform: scale(.97); }
.chip[aria-selected="true"] {
  background: var(--c-ink);
  color: var(--c-bg);
  box-shadow: var(--sh-2);
}
.chip__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--c-brand));
  flex: none;
}
.chip__count {
  font-size: var(--t-xs);
  opacity: .65;
  font-variant-numeric: tabular-nums;
}

/* ---------- fields --------------------------------------------------- */

.field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border-radius: var(--r-2);
  background: var(--c-surface);
  box-shadow: var(--sh-inset);
}
.field:focus-within { box-shadow: inset 0 0 0 2px var(--c-focus); }
.field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--t-md);
  outline: none;
}
.field input::placeholder { color: var(--c-dim); }
.field__icon { color: var(--c-dim); flex: none; display: grid; place-items: center; }

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-2);
  background: var(--c-surface);
  box-shadow: var(--sh-inset);
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}
.input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--c-focus); }

.label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-dim);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}

/* ---------- segmented control --------------------------------------- */

.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  gap: 2px;
}
.seg button {
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  color: var(--c-ink-2);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  transition: background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.seg button[aria-pressed="true"] {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--sh-1);
}

/* Settings dialog's category tabs: a touch till needs equal-width targets
   spanning the dialog, not the currency toggle's compact inline pill. */
.settabs { display: flex; width: 100%; }
.settabs button { flex: 1; }

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

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  color: var(--c-ink-2);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  white-space: nowrap;
}
.badge--ok     { background: var(--c-ok-soft);    color: var(--c-ok); }
.badge--warn   { background: var(--c-warn-soft);  color: var(--c-warn); }
.badge--info   { background: var(--c-info-soft);  color: var(--c-info); }
.badge--brand  { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.badge--danger { background: var(--c-danger-soft);color: var(--c-danger); }

.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- dialogs ---------------------------------------------------- */

dialog.modal {
  width: min(720px, calc(100vw - 2 * var(--s-4)));
  max-height: calc(100dvh - 2 * var(--s-5));
  /* Some mobile Chrome builds don't auto-center <dialog> in RTL documents;
     margin: auto is the spec-correct override that pins it to centre. */
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-4);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--sh-3);
  /* `clip`, not `hidden`. Both clip identically (border-radius included) --
     the difference is that `hidden` still creates a scroll container with a
     real, settable `scrollTop`, just without a visible scrollbar. Clicking a
     field near the bottom of a long form (`.modal__body` legitimately scrolls
     via its own `overflow-y: auto`) focuses it, and the browser's native
     scroll-into-view walks up EVERY clipping ancestor -- including this one --
     to bring it fully into view. Two scroll containers each taking their own
     offset compounds into the dialog's head and half its fields sliding off
     above the viewport with no way back, because nothing in this app ever
     resets the outer one. `clip` cannot scroll at all (scrollTop is always 0),
     so it can never be picked up by that walk -- .modal__body stays the only
     scrollable surface, which is the only one anything here was ever meant to
     use. Reproduced with a real click in a short browser window; verified with
     getBoundingClientRect() showing head at top: -488 while its own parent
     dialog sat at top: 43. */
  overflow: clip;
}
dialog.modal::backdrop {
  background: rgba(6, 10, 16, .55);
  backdrop-filter: blur(3px);
}
dialog.modal[open] { animation: modal-in var(--d-3) var(--e-out); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.modal__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.modal__title { font-size: var(--t-xl); }
.modal__sub { color: var(--c-dim); font-size: var(--t-sm); }
.modal__body { padding: var(--s-5); overflow-y: auto; max-height: min(62dvh, 640px); }
.modal__foot {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
.modal__foot .btn { flex: 1 1 0; }
.spacer { flex: 1 1 auto; }

/* ---------- toasts ------------------------------------------------------ */

.toasts {
  position: fixed;
  inset-block-end: var(--s-6);
  inset-inline-start: 50%;
  transform: translateX(50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  z-index: 60;
  pointer-events: none;
}
.toast {
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-bg);
  box-shadow: var(--sh-3);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  animation: toast-in var(--d-2) var(--e-out);
}
.toast--warn { background: var(--c-warn); color: #1b1200; }
.toast--danger { background: var(--c-danger); color: #fff; }
.toast--out { animation: toast-out var(--d-3) var(--e-out) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } }

/* ---------- misc -------------------------------------------------------- */

.hr { height: 1px; background: var(--c-line); border: 0; margin: var(--s-4) 0; }
.muted { color: var(--c-dim); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---------------- device pairing (settings dialog) ---------------- */

.pair__title { font-weight: var(--w-medium); margin-block-end: var(--s-2); }

/* The code is Latin inside an RTL document and is read off one screen to be
   typed into another, so it is isolated, monospaced and spaced out: O/0 and
   I/1 must not have to be guessed at. */
.pair__code {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  font-size: var(--t-xl);
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  direction: ltr;
  unicode-bidi: isolate;
}
.pair__actions { display: flex; justify-content: flex-end; margin-block-start: var(--s-3); }
.pair__err {
  margin-block-start: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  background: var(--c-danger-soft);
  color: var(--c-danger);
  font-size: var(--t-sm);
}
.pair__live .kv { margin-block-start: var(--s-2); }

/* ---------- Jalali date picker (js/ui/jalali-picker.js) ------------- */
/* Shared by the till, the console and the vendor panel — see that file's
   own header for why the rules live here instead of three times over. */

.jal-picker { position: relative; }

.jal-picker__trigger {
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.jal-picker__trigger::placeholder { color: var(--c-dim); }

.jal-picker__panel {
  position: absolute;
  z-index: 5;
  inset-block-start: calc(100% + var(--s-2));
  inset-inline-end: 0;
  width: max(240px, 100%);
  padding: var(--s-2);
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-3), var(--sh-inset);
}

.jal-picker__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-3);
}
.jal-picker__nav {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--c-ink-2);
  font-size: var(--t-base);
}
.jal-picker__nav:hover { background: var(--c-surface-2); }

.jal-picker__select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-2);
  background: var(--c-surface-2);
  color: var(--c-ink);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}
.jal-picker__select--year { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

.jal-picker__weekdays,
.jal-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.jal-picker__weekdays {
  margin-block-end: var(--s-1);
  color: var(--c-dim);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-align: center;
}

.jal-picker__day {
  aspect-ratio: 1;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.jal-picker__day:hover { background: var(--c-surface-2); }
.jal-picker__day--out { color: var(--c-dim); }
.jal-picker__day--today { box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.jal-picker__day--selected {
  background: var(--c-brand);
  color: var(--c-brand-ink);
  font-weight: var(--w-bold);
}
.jal-picker__day--selected:hover { background: var(--c-brand-strong); }

.jal-picker__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-2);
  border-top: 1px solid var(--c-line);
}
.jal-picker__foot-btn {
  min-height: var(--tap);
  padding: 0 var(--s-3);
  border-radius: var(--r-2);
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}
.jal-picker__foot-btn:hover { background: var(--c-brand); color: var(--c-brand-ink); }
.jal-picker__foot-btn--ghost { background: transparent; color: var(--c-dim); }
.jal-picker__foot-btn--ghost:hover { background: var(--c-surface-2); color: var(--c-ink-2); }

/* ---------- force-update blocking overlay -------------------------------- */
.force-update-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.force-update-box {
  background: var(--c-surface);
  border-radius: var(--r-3);
  padding: var(--s-6);
  max-width: 360px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.force-update-box h2 { font-size: var(--t-lg); font-weight: var(--w-bold); }
.force-update-box p  { color: var(--c-ink-2); font-size: var(--t-sm); }