/* =====================================================================
   console.css — the admin console's own styles.

   Loaded after /app/css/tokens.css, /app/css/base.css and
   /app/css/components.css, all three of which are the PWA's and are
   read-only. Nothing here re-styles .btn, .input, .label, .chip, .badge,
   .modal__* or .toast: those are reused as they are, which is the whole
   reason components.css is linked at all. A second copy of the button
   would drift from the till's within a week and nobody would notice until
   the two screens sat side by side on the counter.

   Conventions, all load-bearing:

     * **Every class is `adm-`-prefixed.** base.css and components.css are
       inherited wholesale, so an unprefixed `.table` or `.form` here
       could collide with a PWA class today or after any change to it.

     * **Logical properties only** — padding-inline, margin-block,
       inset-inline-start, border-inline, text-align: start/end. The
       document is `dir="rtl"`; a `padding-left` is a bug that only shows
       up in one direction. The single permitted physical exception is a
       block that also sets `direction: ltr`, and there is none below.

     * **No colour literals outside the token blocks.** The three new
       tokens this file needs are defined in all three theme states —
       bare `:root`, the `prefers-color-scheme: dark` media query guarded
       against an explicit light choice, and `:root[data-theme="dark"]`.
       A token defined in only one of them silently falls back to the
       light value in one of the two dark paths.

     * **Dynamic colour comes from a class**, never an inline custom
       property on an element: production runs `style-src 'self'
       'nonce-…'` and dom.js's `el()` throws if handed a `style` prop.
   ===================================================================== */

/* The six phase-2 areas. Imported here rather than linked from
   console.blade.php: the blade is the API layer's file, this one is not, and
   an `@import` from an already-linked stylesheet is how a sheet gets added
   without reaching across that line. It must stay above every rule below —
   an `@import` after a rule is ignored by the parser, silently. */
@import url("/console/css/phase2.css");
@import url("/console/css/hubs.css");
@import url("./online-orders.css");

/* ---------------------------------------------------------------------
   Tokens this file adds. Light first, on bare :root.
   --------------------------------------------------------------------- */

:root {
  --adm-head-bg:    #f2f5f9;
  --adm-row-hover:  #f6f8fa;
  --adm-shell-w:    1240px;
  --adm-nav-w:      232px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --adm-head-bg:   #1c242f;
    --adm-row-hover: #1a222c;
  }
}

:root[data-theme="dark"] {
  --adm-head-bg:   #1c242f;
  --adm-row-hover: #1a222c;
}

/* ---------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------- */

.adm-body {
  min-height: 100dvh;
}

.adm-skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s-4);
  z-index: 80;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-2);
  background: var(--c-brand);
  color: var(--c-brand-ink);
  font-weight: var(--w-bold);
  text-decoration: none;
}
.adm-skip:focus-visible { inset-block-start: var(--s-4); }

.adm-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.adm-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  min-height: var(--header-h);
  padding: var(--s-2) var(--s-5);
  border-block-end: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}

.adm-header__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.adm-header__logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-2);
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
  flex: none;
}

.adm-header__names {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.adm-header__tenant {
  font-size: var(--t-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-header__sub {
  font-size: var(--t-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
}

/* ---------------------------------------------------------------------
   Shell row — the sidebar and the page content, side by side.

   `.adm-nav` is the first child, so in this `dir="rtl"` document a plain
   `display: flex` row (no `flex-direction: row-reverse` needed) already
   places it on the visual **right** — the document's own inline-start —
   exactly where a growing list of sections needs room without wrapping
   over the header or crowding the page it sits beside.
   --------------------------------------------------------------------- */

.adm-shell {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  min-height: 0;
}

/* ---------------------------------------------------------------------
   Nav — a right-side sidebar on desktop, a horizontal scroller on
   phone-width screens (see the narrow-screen block below).
   --------------------------------------------------------------------- */

.adm-nav {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-1);
  width: var(--adm-nav-w);
  padding: var(--s-5) var(--s-4);
  border-inline-start: 1px solid var(--c-line);
  position: sticky;
  inset-block-start: var(--header-h);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}

.adm-nav__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 46px;
  padding: 0 var(--s-4);
  border-radius: var(--r-2);
  color: var(--c-ink-2);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}
.adm-nav__link:hover { background: var(--c-surface-3); color: var(--c-ink); }
.adm-nav__link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }

.adm-nav__icon {
  flex: none;
  color: var(--c-dim);
  transition: color var(--d-2) var(--e-out);
}

.adm-nav__link--active,
.adm-nav__link[aria-current="page"] {
  background: var(--c-brand-soft);
  color: var(--c-brand-strong);
  font-weight: var(--w-bold);
}
.adm-nav__link[aria-current="page"] .adm-nav__icon { color: var(--c-brand); }

/* ---------------------------------------------------------------------
   Banners — the read-only notice and the offline notice
   --------------------------------------------------------------------- */

.adm-banner {
  padding: var(--s-3) var(--s-5);
  border-block-end: 1px solid var(--c-line);
  background: var(--c-info-soft);
  color: var(--c-info);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-align: start;
}

.adm-banner--offline {
  background: var(--c-warn-soft);
  color: var(--c-warn);
}

/* ---------------------------------------------------------------------
   Main + page scaffold
   --------------------------------------------------------------------- */

.adm-content {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: var(--adm-shell-w);
  margin-inline: auto;
  padding: var(--s-6) var(--s-5) var(--s-9);
}

.adm-main {
  display: block;
  min-width: 0;
}

/* «منو ‹ ورود گروهی کالا» — only below a hub, so it is never the page's
   first reading; it sits small and quiet above the title. */
.adm-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-end: var(--s-4);
  font-size: var(--t-sm);
  color: var(--c-dim);
}
.adm-crumbs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  margin-inline-start: calc(-1 * var(--s-2));
  border-radius: var(--r-1);
  color: var(--c-brand-strong);
  font-weight: var(--w-medium);
  text-decoration: none;
}
.adm-crumbs__link:hover { background: var(--c-brand-soft); }
.adm-crumbs__link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }
/* The back arrow points toward the inline start — rightward in RTL. */
.adm-crumbs__back { transform: scaleX(-1); }
.adm-crumbs__here { color: var(--c-ink-2); }

.adm-main:focus { outline: none; }

.adm-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.adm-page__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.adm-page__title { font-size: var(--t-2xl); }

.adm-page__sub {
  margin-block-start: calc(-1 * var(--s-3));
  font-size: var(--t-sm);
}

.adm-page__actions { flex: none; }

.adm-page__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

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

.adm-table__wrap {
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-inset), var(--sh-1);
  overflow: hidden;
}

/* Wide content scrolls inside its own box; the page body never scrolls
   sideways.

   `overflow-y: clip` (not `visible`) is load-bearing: CSS Overflow §3 forces
   any `visible` axis to `auto` when the other axis is non-visible, silently
   turning this into a two-axis scroll container with no vertical content to
   scroll. A mouse wheel then tries to scroll this element vertically, gets
   nowhere, and in many browsers swallows the event instead of chaining it up
   to the page — the page stops scrolling while the pointer is over any table.
   `clip` is not subject to that rule (it is not `visible`), clips without
   creating a scroll container, and passes wheel events to the page. Same fix
   applied to `.adm-nav`'s responsive variant below for the same reason.

   Additionally, the `.scroll` utility (base.css) sets `overscroll-behavior:
   contain` on both axes. On a horizontal-only scroll container, `overscroll-
   behavior-y: contain` prevents vertical wheel events from chaining up to the
   page — the exact same symptom. Override it explicitly: contain x (so the
   page doesn't bounce when the table scrolls to its edge), auto y (so the
   page receives the wheel event). */
.adm-table__scroll {
  overflow-x: auto;
  overflow-y: clip;
  max-width: 100%;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.adm-table th {
  position: sticky;
  inset-block-start: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--adm-head-bg);
  color: var(--c-dim);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  text-align: start;
  white-space: nowrap;
}

.adm-table td {
  padding: var(--s-3) var(--s-4);
  border-block-start: 1px solid var(--c-line);
  vertical-align: middle;
}

.adm-table tbody tr:hover { background: var(--adm-row-hover); }
.adm-table tbody tr[aria-selected="true"] { background: var(--c-brand-soft); }

.adm-table--busy { opacity: .6; }

/* A cell holding only buttons: keep them on one line and away from the edge. */
.adm-table__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  justify-content: flex-end;
}

.adm-table__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: start;
}

.adm-table__foot {
  display: flex;
  justify-content: center;
  padding: var(--s-4);
  border-block-start: 1px solid var(--c-line);
  background: var(--c-surface-2);
}

.adm-empty {
  padding: var(--s-8) var(--s-5);
  color: var(--c-dim);
  text-align: center;
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

.adm-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.adm-form--busy { opacity: .7; }

.adm-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}

.adm-form__foot {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--c-line);
}

.adm-field { display: block; }

.adm-field__label { margin-block-end: var(--s-2); }

.adm-field__hint,
.adm-field__error {
  margin-block-start: var(--s-2);
  font-size: var(--t-sm);
}

.adm-field__error { color: var(--c-danger); font-weight: var(--w-medium); }

.adm-field--invalid .input,
.adm-field--invalid .adm-textarea,
.adm-field--invalid .adm-select {
  box-shadow: inset 0 0 0 2px var(--c-danger);
}

.adm-textarea {
  min-height: calc(var(--tap) * 1.6);
  padding-block: var(--s-3);
  font-size: var(--t-md);
  line-height: 1.6;
  resize: vertical;
}

.adm-select {
  font-size: var(--t-md);
  /* The UA arrow sits on the inline-end edge automatically in RTL; no
     background-image trickery, which would need a data: URI. */
  padding-inline-end: var(--s-4);
}

/* A collapsible "secondary fields" block — <details>/<summary>, so keyboard
   and screen-reader behaviour comes for free. */
.adm-details {
  border-radius: var(--r-2);
  background: var(--c-surface-2);
  box-shadow: var(--sh-inset);
}
.adm-details > summary {
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-weight: var(--w-medium);
  list-style: none;
}
.adm-details > summary::-webkit-details-marker { display: none; }
.adm-details__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: 0 var(--s-4) var(--s-4);
}

/* ---------------------------------------------------------------------
   Switch (a checkbox, dressed)
   --------------------------------------------------------------------- */

.adm-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  cursor: pointer;
}

.adm-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.adm-switch__track {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  box-shadow: var(--sh-inset);
  transition: background-color var(--d-2) var(--e-out);
  flex: none;
}

.adm-switch__thumb {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--sh-1);
  transition: transform var(--d-2) var(--e-out);
}

.adm-switch__input:checked + .adm-switch__track { background: var(--c-ok); }
/* RTL: "on" travels toward the inline end, which is leftward on screen. */
.adm-switch__input:checked + .adm-switch__track .adm-switch__thumb {
  transform: translateX(-22px);
}
.adm-switch__input:focus-visible + .adm-switch__track {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
.adm-switch__input:disabled + .adm-switch__track { opacity: .45; }

.adm-switch__label { font-size: var(--t-md); }

/* ---------------------------------------------------------------------
   Price input
   --------------------------------------------------------------------- */

.adm-price {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.adm-price__input {
  flex: 1 1 160px;
  min-width: 0;
  text-align: start;
}

.adm-price__unit {
  flex: none;
  color: var(--c-dim);
  font-size: var(--t-md);
  font-weight: var(--w-medium);
}

/* The «۱۲۰٬۰۰۰ تومان برای هر ۱ کیلوگرم» echo under a weighed item's price. */
.adm-price__echo {
  flex: 1 0 100%;
  margin-block-start: var(--s-1);
  font-size: var(--t-sm);
}

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

.adm-login {
  width: min(420px, 100%);
  margin-inline: auto;
  margin-block-start: clamp(var(--s-6), 8vh, var(--s-9));
  padding: var(--s-6);
  border-radius: var(--r-4);
  background: var(--c-surface);
  box-shadow: var(--sh-2);
}

.adm-login__title { font-size: var(--t-xl); }

.adm-login__sub {
  margin-block: var(--s-2) var(--s-5);
  font-size: var(--t-sm);
}

.adm-login__error {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  background: var(--c-danger-soft);
  color: var(--c-danger);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}

/* ---------------------------------------------------------------------
   Notices, request ids, dialogs
   --------------------------------------------------------------------- */

.adm-notice {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-2);
  background: var(--c-surface-2);
  box-shadow: var(--sh-inset);
}

.adm-notice--network,
.adm-notice--server,
.adm-notice--auth       { background: var(--c-danger-soft); color: var(--c-danger); }
.adm-notice--permission { background: var(--c-warn-soft);   color: var(--c-warn); }
.adm-notice--conflict   { background: var(--c-warn-soft);   color: var(--c-warn); }
.adm-notice--missing,
.adm-notice--cursor,
.adm-notice--info,
.adm-notice--validation { background: var(--c-info-soft);   color: var(--c-info); }

.adm-notice__text { font-size: var(--t-md); font-weight: var(--w-medium); }

/*
 * The support handle. Dim, small, selectable and LTR — it is a uuid, it is
 * read out over the phone, and it must be copyable with a double-click.
 */
.adm-reqid {
  color: var(--c-dim);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  user-select: text;
  word-break: break-all;
}

.adm-modal__sub {
  padding-inline: var(--s-5);
  padding-block-start: var(--s-3);
}

.adm-modal--confirm { width: min(520px, calc(100vw - 2 * var(--s-4))); }

.adm-confirm__message {
  font-size: var(--t-md);
  line-height: 1.7;
}

.adm-toasts { z-index: 90; }

/* ---------------------------------------------------------------------
   Narrow screens — the console is a desktop tool, but the owner will open
   it on a phone at least once.
   --------------------------------------------------------------------- */

/* At tablet width the 232px sidebar eats ~25–30% of the viewport and leaves
   the page content cramped without fully collapsing. Narrowing to 168px at
   900px gives back 64px of content width while keeping the sidebar visible. */
@media (max-width: 900px) {
  :root { --adm-nav-w: 196px; }
  .adm-nav__link { font-size: var(--t-sm); padding-inline: var(--s-3); gap: var(--s-2); }
}

@media (max-width: 720px) {
  .adm-header {
    align-items: flex-start;
    padding-inline: var(--s-4);
  }

  /* The right-side sidebar only pays off where there is width to give it.
     Below it, the nav goes back to a horizontal scroll strip above the
     page content, same as before this became a sidebar. */
  .adm-shell {
    flex-direction: column;
  }

  .adm-nav {
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-height: none;
    padding: var(--s-2) var(--s-4);
    border-inline-start: none;
    border-block-end: 1px solid var(--c-line);
    position: static;
    overflow-x: auto;
    overflow-y: clip;
  }

  .adm-nav__link {
    flex: none;
    border-radius: var(--r-pill);
  }

  .adm-content { padding-inline: var(--s-4); padding-block-start: var(--s-4); }

  .adm-page__title { font-size: var(--t-xl); }
}

/* ---------------------------------------------------------------------
   Sections inside one page

   Added for «روش‌های پرداخت», which is one screen answering one question
   — "how can somebody pay us here?" — with two lists behind it: the card
   readers on the counter and the shop's own accounts. Two tabs would have
   made a shop owner choose between them before knowing what either
   contained; two headings on one page let them see both.

   Generic on purpose. Any screen whose content splits into named groups
   can use it, and the intent is that the next one does rather than
   inventing a third spelling of a heading.
   --------------------------------------------------------------------- */

.adm-section + .adm-section {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--c-line);
}

.adm-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin-block-end: var(--s-4);
}

.adm-section__title {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 700;
}

/* Takes the row's slack so the action button sits at the far edge, the
   same job `.spacer` does in the page head. */
.adm-section__sub {
  flex: 1 1 14rem;
  margin: 0;
  color: var(--c-ink-2);
  font-size: var(--t-sm);
  line-height: 1.7;
}

/* ---------------------------------------------------------------------
   The orders screen

   Two columns carry more than one fact per cell — a split tender is two
   tenders, and a delivery is a rider plus a state — so both stack their
   lines rather than running them together with a separator. A sale paid
   half cash and half card is the case the whole column exists for.
   --------------------------------------------------------------------- */

.adm-paid + .adm-paid { margin-block-start: 2px; }

.adm-orderdetail {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.adm-orderlines,
.adm-orderpays {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-orderlines__row {
  display: grid;
  /* Name takes the slack, the two numbers keep their own width, so the
     money column stays aligned down the list however long a name is. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  align-items: baseline;
}

.adm-orderlines__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-orderlines__qty { color: var(--c-ink-2); }

.adm-orderpays__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  justify-content: space-between;
  align-items: baseline;
}

/* A refund is struck through rather than coloured alone: on a list read at
   a glance, the line through it is the part that survives being skimmed. */
.adm-orderpays__row--reversal { color: var(--c-danger); text-decoration: line-through; }

/* A refund in the list's payment column, marked the same way the detail
   marks it — see `.adm-orderpays__row--reversal`. */
.adm-paid--reversal { color: var(--c-danger); text-decoration: line-through; }

/* ---------- orders list: day-separator rows + prev-day button ------------ */
.adm-day-header td {
  padding-block: var(--s-3);
  padding-inline: var(--s-4);
  font-weight: var(--w-bold);
  font-size: var(--t-sm);
  color: var(--c-ink-2);
  background: var(--c-bg-2);
  border-block-start: 1px solid var(--c-line);
  border-block-end: 1px solid var(--c-line);
}

.adm-orders__prev-day {
  display: block;
  margin: var(--s-4) auto 0;
}

/* ---------- 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: 400px;
  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); }