/* The back-office editors carried over from the till (docs/archive/MANAGER_PARITY.md):
   product editor, variants, combos, attributes, documents. Colours only from
   Tabler's / theme.css's custom properties — no literal hex here. */

/* ── Product editor: icon picker ──────────────────────────────────────── */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: .5rem;
  border: 0; padding: 0; margin: 0;
}
.icon-pack-title {
  grid-column: 1 / -1;
  margin-top: .5rem;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tblr-secondary);
}
.icon-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-block-size: 48px; min-inline-size: 48px;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  cursor: pointer;
  background: var(--tblr-bg-surface);
}
.icon-choice:has(input:checked) {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 2px var(--tblr-primary);
  color: var(--tblr-primary);
}
.icon-choice:has(input:focus-visible) { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.icon-choice:first-of-type { grid-column: span 2; }
/* A grid with no "default icon" entry at its head: every choice is one cell. */
.icon-grid-even .icon-choice:first-of-type { grid-column: auto; }
/* Five packs are taller than a phone: the list scrolls, the form under it stays in reach.
   The padding keeps a cell's focus ring inside the scrolling box. */
.icon-grid-even.choice-options { max-block-size: 16rem; overflow-y: auto; padding: 4px; }
.icon-choice-label { font-size: .75rem; }

/* ── Product editor: picture search ───────────────────────────────────── */
.picture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
}
.picture-hit {
  aspect-ratio: 1;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background-color: var(--tblr-bg-surface-secondary);
  background-size: cover; background-position: center;
  cursor: pointer;
}
.picture-hit:hover, .picture-hit:focus-visible { box-shadow: 0 0 0 2px var(--tblr-primary); }

/* Big enough for a finger on a tablet. */
.form-switch-lg { min-block-size: 44px; }

/* ── Lists: the multi-select tick, finger-sized ───────────────────────── */
.bulk-check { inline-size: 1.5rem; block-size: 1.5rem; cursor: pointer; }

/* ── Attributes: a value's colour dot ─────────────────────────────────── */
.value-dot {
  display: inline-block; inline-size: .7rem; block-size: .7rem; border-radius: 50%;
  background: var(--dot); border: 1px solid var(--tblr-border-color);
  margin-inline-end: .25rem; vertical-align: middle;
}