/* =====================================================================
   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");

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

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

@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;
}

/* ---------------------------------------------------------------------
   Nav
   --------------------------------------------------------------------- */

.adm-nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.adm-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  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); }

.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);
}

/* ---------------------------------------------------------------------
   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-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--adm-shell-w);
  margin-inline: auto;
  padding: var(--s-6) var(--s-5) var(--s-9);
}
.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. */
.adm-table__scroll {
  overflow-x: auto;
  max-width: 100%;
}

.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--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.
   --------------------------------------------------------------------- */

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

  .adm-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-block-end: var(--s-1);
  }

  .adm-main { padding-inline: var(--s-4); }

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