/* =====================================================================
   items.css — «کالاها», the item form, and the image panel.

   Linked last of the six stylesheets (tokens, base, components, console,
   categories, items), so everything here composes on top of the PWA's
   primitives rather than replacing any of them. Nothing below re-styles
   `.btn`, `.input`, `.label`, `.badge` or `.modal__*`; those are reused
   exactly as the counter screen has them, which is the entire reason
   components.css is linked at all.

   Four rules the file is shaped by, all inherited from console.css and
   all load-bearing:

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

     * **Logical properties only.** The document is `dir="rtl"`. A
       `padding-left` is a bug that is invisible in one direction and
       obvious in the other, and this file is only ever read in the
       obvious one. There is no `direction: ltr` block below, so there is
       no exception in force.

     * **No colour literals.** Every colour is a tokens.css custom
       property. The two colours this file wanted and did not find —
       a gallery tile's checkerboard and a "primary image" ring — are
       built from `--c-line` and `--c-brand` instead of being invented,
       because a new token has to be defined in all three theme states
       (bare `:root`, the guarded `prefers-color-scheme: dark`, and
       `:root[data-theme="dark"]`) and that belongs in console.css, not
       here.

     * **No inline styles anywhere, so nothing here can be set from JS.**
       Production runs `style-src 'self' 'nonce-…'` and dom.js's `el()`
       throws on a `style` prop. A thumbnail is an `<img>` with a class,
       never a `style="background-image:…"`; the upload preview is a
       `<canvas>` sized by its own width/height attributes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A compact button, for the ones that sit several-to-a-row inside a
   table cell or under a gallery tile.

   `.btn` is sized for the counter's 56 px touch target, which is right on
   a till and wrong in a six-button table row. This keeps the same visual
   language and only relaxes the height — still 36 px, still comfortably
   clickable with a mouse, which is the input device the console actually
   has.
   --------------------------------------------------------------------- */

.adm-btn-sm {
  min-height: 36px;
  min-width: 0;
  padding-inline: var(--s-3);
  font-size: var(--t-sm);
}

/* =====================================================================
   The grid — #/items
   ===================================================================== */

.adm-items__filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(200px, 2fr) minmax(180px, 1fr);
  gap: var(--s-4);
  align-items: end;
  padding: var(--s-4);
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-inset), var(--sh-1);
}

.adm-items__filter {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.adm-items__filter .input {
  width: 100%;
}

/* The name cell stacks the name over its SKU. */
.adm-items__name {
  display: block;
  font-weight: var(--w-medium);
}

.adm-items__sku {
  display: block;
  margin-block-start: 2px;
  color: var(--c-dim);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  /* `text-align: start` in an element whose `dir` is ltr means "left", which
     is what a SKU wants; the surrounding cell stays RTL. */
  text-align: start;
}

.adm-items__category {
  color: var(--c-ink-2);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-items__price {
  font-weight: var(--w-medium);
}

.adm-items__actionsHead {
  /* The action column has no heading text; reserving its width here stops the
     header row from collapsing it to nothing on a narrow viewport. */
  min-width: 260px;
}

.adm-items__actions {
  gap: var(--s-1);
  flex-wrap: nowrap;
}

/*
 * Delete is the only irreversible thing on this screen, and it sits next to
 * four reversible ones. It is not painted red at rest — a row of red buttons
 * stops meaning anything — but it turns red the moment the pointer is on it,
 * which is the last moment before the click.
 */
.adm-items__delete:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

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

@media (max-width: 860px) {
  .adm-items__filters {
    grid-template-columns: 1fr;
  }

  .adm-items__actionsHead {
    min-width: 0;
  }
}

/* =====================================================================
   The form — #/items/new and #/items/:id
   ===================================================================== */

/*
 * The «یعنی ۱۸۵٬۰۰۰ تومان» line under the price field.
 *
 * Deliberately not dimmed into invisibility: this line is the console's
 * answer to the tenfold pricing error, and a user who never reads it gets no
 * protection from it. It is the same size as a hint but carries the ink
 * colour of ordinary text.
 */
.adm-item__echo {
  margin-block-start: var(--s-2);
  color: var(--c-ink-2);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}

.adm-item__more {
  margin-block-start: var(--s-2);
}

.adm-item__sectionTitle {
  font-size: var(--t-lg);
  margin-block-end: var(--s-2);
}

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

/*
 * The 86 control, boxed and set apart from the form.
 *
 * The separation is the point. `is_available` is not a form field — it is
 * written by its own endpoint, and the till writes it too. Putting it inside
 * the `<form>` would say it saves with everything else, which is exactly the
 * confusion that ends with a sold-out item un-86'd on every register.
 */
.adm-item__availability {
  margin-block-start: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-inset), var(--sh-1);
}

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

.adm-item__soon {
  margin-block-start: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: var(--c-surface-2);
  box-shadow: var(--sh-inset);
  /* Dimmed as a whole: everything in this panel is read-only in this version
     and must not read as something that could be edited. */
  color: var(--c-dim);
}

.adm-item__soonHead {
  margin-block-start: var(--s-4);
  font-size: var(--t-md);
}

.adm-item__soonList {
  margin-block-start: var(--s-2);
  padding-inline-start: var(--s-5);
  list-style: disc;
  line-height: 1.9;
}

.adm-item__soonEmpty {
  margin-block-start: var(--s-3);
  font-size: var(--t-sm);
}

/* The delete button, alone, well below everything else. */
.adm-item__danger {
  display: flex;
  justify-content: flex-start;
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line);
}

.adm-item__gallery {
  margin-block-start: var(--s-6);
}

/* =====================================================================
   The image panel
   ===================================================================== */

.adm-img {
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-inset), var(--sh-1);
}

.adm-img--busy {
  opacity: .7;
  pointer-events: none;
}

.adm-img__title {
  font-size: var(--t-lg);
}

.adm-img__intro {
  margin-block: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.7;
}

.adm-img__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin-block-end: var(--s-5);
}

.adm-img__empty {
  padding-block: var(--s-6);
  font-size: var(--t-sm);
}

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

/* The primary image is the one the counter grid shows. It gets a ring rather
   than a different background, so the photograph itself is unaltered. */
.adm-img__tile--primary {
  box-shadow: inset 0 0 0 2px var(--c-brand);
}

.adm-img__thumb {
  width: 100%;
  height: 140px;
  border-radius: var(--r-1);
  background: var(--c-surface-3);
  object-fit: cover;
}

.adm-img__thumb--missing {
  display: block;
}

.adm-img__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.adm-img__badge {
  align-self: flex-start;
}

.adm-img__alt {
  font-size: var(--t-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.adm-img__facts {
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.adm-img__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: var(--s-2);
}

.adm-img__remove:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

/* ---- the uploader ---- */

.adm-img__uploader {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line);
}

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

/*
 * The real <input type="file"> is visually hidden but still focusable and
 * still in the tab order — `display: none` would take it out of both, and the
 * <label for> that triggers it would then be unreachable from the keyboard.
 */
.adm-img__file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.adm-img__pick {
  cursor: pointer;
}

.adm-img__file:focus-visible + .adm-img__pick {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.adm-img__picked {
  font-size: var(--t-sm);
  overflow-wrap: anywhere;
}

.adm-img__previewSlot {
  display: flex;
}

/*
 * The preview canvas carries its own pixel dimensions as attributes, so it
 * needs no sizing here beyond a cap — and a cap it must have, because a very
 * wide photo would otherwise push the panel past the page width.
 */
.adm-img__preview {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-2);
  box-shadow: var(--sh-1);
}

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

.adm-img__noticeText {
  font-size: var(--t-sm);
  color: var(--c-ink-2);
}

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

.adm-img__uploadRow {
  display: flex;
  gap: var(--s-3);
}

.adm-img--placeholder {
  background: var(--c-surface-2);
  box-shadow: var(--sh-inset);
}