/* =====================================================================
   categories.css — «دسته‌ها» and the category form.

   Linked from the shell (resources/views/admin/console.blade.php) as
   /console/css/categories.css, after console.css and before items.css.
   No builder adds or reorders a <link>.

   The rules inherited from console.css all still apply here:

     * every class is `adm-`-prefixed, because base.css and components.css
       are inherited wholesale and an unprefixed class can collide with a
       PWA one;
     * logical properties only (padding-inline, inset-inline-start,
       border-inline-start, text-align: start|end) — the document is
       dir="rtl" and a physical `left` is a bug waiting for the first
       screenshot;
     * colours come from tokens.css custom properties, never literals. No
       new colour is defined here: a colour needs all three theme states
       (bare `:root`, the `prefers-color-scheme` block and the
       `[data-theme]` block) and those live in console.css, which this
       builder does not own;
     * no inline styles anywhere, which is also why a category's own
       `color` is never painted onto a row — see the note above
       `.adm-cat-hex`.
   ===================================================================== */

/* ---------------------------------------------------------------------
   The staged-reorder bar

   Visible only while an arrangement is unsaved. It states plainly that
   nothing has been sent yet, because the whole point of staging is that
   the tree on screen and the tree on the server have deliberately
   diverged, and a user who cannot see that would walk away from unsaved
   work.
   --------------------------------------------------------------------- */

.adm-cat-orderbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  background: var(--c-warn-soft);
  color: var(--c-warn);
  box-shadow: var(--sh-inset);
}

.adm-cat-orderbar__text {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  min-inline-size: 0;
}

/* ---------------------------------------------------------------------
   Tree rows
   --------------------------------------------------------------------- */

.adm-cat-col-name   { inline-size: 100%; }
.adm-cat-col-status { white-space: nowrap; }
.adm-cat-col-order  { white-space: nowrap; inline-size: 1%; }
.adm-cat-col-actions{ white-space: nowrap; inline-size: 1%; }

.adm-cat-name {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-inline-size: 0;
}

.adm-cat-name__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-inline-size: 0;
}

.adm-cat-name__text {
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  overflow-wrap: anywhere;
}

/* Sub-categories are indented from the inline start, which is the right-hand
   edge in this document. The twig glyph carries the same information for
   anyone who cannot see the indent, and is aria-hidden so it is not read out
   twice. */
.adm-cat-row--child .adm-cat-name { padding-inline-start: var(--s-7); }

.adm-cat-twig {
  color: var(--c-dim);
  font-size: var(--t-md);
  flex: none;
}

.adm-cat-children {
  flex: none;
  background: var(--c-surface-3);
  color: var(--c-dim);
}

.adm-cat-name__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  flex-wrap: wrap;
}

/* `.ltr` (base.css) puts the isolate around these; this only makes them read
   as machine keys rather than as prose. */
.adm-cat-slug,
.adm-cat-hex {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/*
 * A category's colour is shown as its hex code, never as a swatch.
 *
 * A per-row colour chip would need either a `style="background:#…"` attribute
 * or an inline custom property, and the production nginx sends
 * `style-src 'self' 'nonce-…'` — deploy/ is off-limits, so that header cannot
 * be relaxed and both forms are refused. dom.js's `el()` throws on a `style`
 * prop to make it impossible to add by accident. The colour is seen properly
 * in the form, where a native `<input type="color">` draws it.
 */
.adm-cat-desc {
  font-size: var(--t-xs);
  margin: 0;
  max-inline-size: 60ch;
  overflow-wrap: anywhere;
}

/* A hidden category is legible but visibly demoted — «غیرفعال» in the status
   column says what, this says at a glance which. */
.adm-cat-row--hidden .adm-cat-name__text { color: var(--c-dim); }

/*
 * A row whose level has been rearranged but not saved.
 *
 * Declared after console.css's `tbody tr:hover` rule and at the same
 * specificity, so it holds while the pointer is over the row: "this is not
 * saved" outranks "this is hovered".
 */
.adm-table tbody tr.adm-cat-row--staged { background: var(--c-brand-soft); }

.adm-table tbody tr.adm-cat-row--staged > td:first-child {
  border-inline-start: 3px solid var(--c-brand);
}

.adm-cat-moves {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.adm-cat-move {
  font-size: var(--t-lg);
  line-height: 1;
}

.adm-cat-action { white-space: nowrap; }

.adm-cat-notice:not([hidden]) {
  display: block;
  margin-block-start: var(--s-4);
}

/* ---------------------------------------------------------------------
   The form
   --------------------------------------------------------------------- */

/*
 * The colour control: a native picker plus an on/off switch, because
 * `categories.color` is nullable and `<input type="color">` has no unset
 * state — it always reports something, and #000000 is a colour no shopkeeper
 * chose.
 */
.adm-cat-color {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.adm-cat-color__swatch {
  inline-size: 72px;
  block-size: var(--tap);
  padding: 0;
  border: none;
  border-radius: var(--r-1);
  background: transparent;
  box-shadow: var(--sh-inset);
  cursor: pointer;
}

.adm-cat-color__swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.adm-cat-color__swatch::-webkit-color-swatch { border: none; border-radius: var(--r-1); }
.adm-cat-color__swatch::-moz-color-swatch { border: none; border-radius: var(--r-1); }

.adm-cat-color--off .adm-cat-color__swatch { opacity: .35; cursor: default; }

.adm-cat-form__notice:not([hidden]) { display: block; }

/* The backdrop behind a deep-linked form. The modal is the screen; this only
   keeps the page from being blank behind it and offers a way back. */
.adm-cat-backdrop {
  display: flex;
  justify-content: center;
  padding-block: var(--s-8);
}

/* ---------------------------------------------------------------------
   Narrow screens

   The console is used on a 1366×768 counter PC, but an owner does open it
   on a phone to fix a price. The description is the first thing to go: it
   is the only column that is prose rather than a key.
   --------------------------------------------------------------------- */

@media (max-width: 720px) {
  .adm-cat-desc { display: none; }
  .adm-cat-row--child .adm-cat-name { padding-inline-start: var(--s-5); }
  .adm-cat-action { font-size: var(--t-xs); }
}