/* ==========================================================================
   Buyinn admin — design system
   --------------------------------------------------------------------------
   Self-contained on purpose: the storefront's sheets stay untouched, and the
   admin needs no build step. Tokens echo the brand (the same green, the same
   Barlow) so the two feel like one product, but the surfaces are quieter and
   the density higher — this is a tool people look at all day, not a shopfront.

   Naming: `adm-` block, `__element`, `--modifier`, `is-` for state.
   ========================================================================== */

:root {
  --adm-bg: #f4f6f5;
  --adm-surface: #ffffff;
  --adm-sunken: #fafbfa;
  --adm-ink: #17211b;
  --adm-ink-2: #566058;
  --adm-ink-3: #8a938c;
  --adm-line: #e3e8e4;
  --adm-line-strong: #cdd6cf;

  --adm-accent: #238a57;
  --adm-accent-dark: #1b6f46;
  --adm-accent-soft: #eaf7ef;

  --adm-warn: #9a7316;
  --adm-warn-soft: #fff5cf;
  --adm-danger: #b3261e;
  --adm-danger-soft: #fdf1f0;
  --adm-info: #2c5f8a;
  --adm-info-soft: #eaf2fa;

  --adm-radius: 10px;
  --adm-radius-sm: 7px;
  --adm-shadow: 0 1px 2px rgba(23, 33, 27, .06), 0 1px 3px rgba(23, 33, 27, .04);
  --adm-shadow-lg: 0 10px 30px rgba(23, 33, 27, .12);

  --adm-sidebar-w: 248px;
  --adm-font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --adm-font-head: "Barlow Condensed", system-ui, sans-serif;
}

/* --- Reset-ish ----------------------------------------------------------- */
.adm *, .adm *::before, .adm *::after { box-sizing: border-box; }

.adm {
  margin: 0;
  font-family: var(--adm-font);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--adm-ink);
  background: var(--adm-bg);
  -webkit-font-smoothing: antialiased;
}

/* Links take the colour of whatever they sit in — except when they are
   dressed as buttons. ".adm a" out-specifies ".adm-btn--primary" (0,1,1 beats
   0,1,0), so a green button written as <a> was drawing black text while the
   identical <button> drew white. Excluding .adm-btn lets each button variant
   set its own colour, whichever element it happens to be.

   :where() rather than :not() on purpose — :not() would add a class to the
   count and push this to 0,2,1, which is enough to start overriding the
   sidebar and login-footer link colours that were fine as they were. :where()
   contributes nothing, so the cascade is exactly what it always was. */
.adm a:not(:where(.adm-btn)) { color: inherit; text-decoration: none; }
.adm a.adm-btn { text-decoration: none; }
.adm h1, .adm h2, .adm h3, .adm h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.adm p { margin: 0; }

/* --- Shell --------------------------------------------------------------- */
.adm-shell { display: grid; grid-template-columns: var(--adm-sidebar-w) minmax(0, 1fr); min-height: 100vh; }

/* --- Sidebar ------------------------------------------------------------- */
.adm-sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--adm-ink); color: #dfe6e1;
  display: flex; flex-direction: column;
}

.adm-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.adm-brand__mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--adm-accent); color: #fff;
  border-radius: 8px;
  font-family: var(--adm-font-head); font-weight: 700; font-size: 17px;
}

.adm-brand__name { font-family: var(--adm-font-head); font-size: 19px; font-weight: 600; letter-spacing: .02em; color: #fff; }
.adm-brand__sub { display: block; font-family: var(--adm-font); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: #7d8b82; }

.adm-nav { padding: 14px 12px 24px; flex: 1; }
.adm-nav__group + .adm-nav__group { margin-top: 18px; }
.adm-nav__title {
  padding: 0 10px 7px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: #6f7d74;
}

.adm-nav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 1px;
  border-radius: var(--adm-radius-sm);
  font-size: 14px; color: #c2ccc6;
  transition: background .12s ease, color .12s ease;
}
.adm-nav__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.adm-nav__link.is-active { background: var(--adm-accent); color: #fff; font-weight: 500; }
.adm-nav__link.is-active .adm-nav__count { background: rgba(255, 255, 255, .22); color: #fff; }

.adm-nav__icon { flex: none; width: 17px; height: 17px; opacity: .9; }
.adm-nav__count {
  margin-inline-start: auto; min-width: 20px; padding: 1px 6px;
  border-radius: 20px; background: rgba(255, 255, 255, .1);
  font-size: 11.5px; font-weight: 600; text-align: center; color: #dfe6e1;
}

.adm-sidebar__foot { padding: 14px 20px 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; color: #7d8b82; }
.adm-sidebar__foot a { color: #b6c4bc; }
.adm-sidebar__foot a:hover { color: #fff; text-decoration: underline; }

/* --- Top bar ------------------------------------------------------------- */
.adm-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px; height: 62px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--adm-line);
}

.adm-topbar__title { font-size: 17px; font-weight: 600; }
.adm-topbar__crumbs { font-size: 12.5px; color: var(--adm-ink-3); }
.adm-topbar__crumbs a:hover { color: var(--adm-accent); text-decoration: underline; }
.adm-topbar__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

.adm-user { display: flex; align-items: center; gap: 9px; padding-inline-start: 14px; border-inline-start: 1px solid var(--adm-line); }
.adm-user__avatar {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--adm-accent-soft); color: var(--adm-accent-dark);
  font-size: 12.5px; font-weight: 600;
}
.adm-user__name { font-size: 13.5px; font-weight: 500; line-height: 1.2; }

/* --- Page ---------------------------------------------------------------- */
.adm-main { min-width: 0; display: flex; flex-direction: column; }
.adm-page { padding: 26px 28px 60px; max-width: 1400px; width: 100%; }

.adm-page__head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.adm-page__title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.adm-page__lede { margin-top: 3px; font-size: 14px; color: var(--adm-ink-2); max-width: 62ch; }
.adm-page__actions { margin-inline-start: auto; display: flex; gap: 9px; flex-wrap: wrap; }

/* --- Cards --------------------------------------------------------------- */
.adm-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
}
.adm-card + .adm-card { margin-top: 18px; }

.adm-card__head {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--adm-line);
}
.adm-card__title { font-size: 15px; font-weight: 600; }
.adm-card__sub { font-size: 12.5px; color: var(--adm-ink-3); margin-top: 1px; }
.adm-card__actions { margin-inline-start: auto; display: flex; gap: 8px; }
.adm-card__body { padding: 18px; }
.adm-card__body--flush { padding: 0; }
.adm-card__foot { padding: 13px 18px; border-top: 1px solid var(--adm-line); background: var(--adm-sunken); border-radius: 0 0 var(--adm-radius) var(--adm-radius); }

/* --- Stats --------------------------------------------------------------- */
/* --- Figures -------------------------------------------------------------
   A row of tiles that has to read as one row. Three things were fighting
   that: the caption was lighter than the note beneath it, so the eye landed
   in the middle of the tile; the number was large enough to shout over the
   label it belongs to; and a tile without a note was a different height from
   one with, so the row's baselines never lined up. */
.adm-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 18px;
  align-items: stretch;
}

.adm-stat {
  display: flex; flex-direction: column;
  padding: 15px 16px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow);
}

/* Darker than the note below it: this names the number, so it should be the
   more readable of the two, not the fainter. */
.adm-stat__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--adm-ink-2);
}

/* Tabular figures so 278 and 1,024 sit on the same grid across the row, and
   a size that leads the tile without dominating the page. */
.adm-stat__value {
  margin-top: 6px;
  font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--adm-ink);
}

/* Pushed to the foot, so tiles with a note and tiles without still agree
   where the tile ends. */
.adm-stat__meta {
  margin: 8px 0 0; padding-top: 0;
  font-size: 12.5px; line-height: 1.45; color: var(--adm-ink-3);
}
.adm-stat__meta:last-child { margin-top: auto; padding-top: 8px; }
.adm-stat--accent { border-inline-start: 3px solid var(--adm-accent); }
.adm-stat--warn { border-inline-start: 3px solid var(--adm-warn); }
.adm-stat--danger { border-inline-start: 3px solid var(--adm-danger); }

/* --- Tables -------------------------------------------------------------- */
.adm-tablewrap { overflow-x: auto; }

.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th, .adm-table td { padding: 11px 14px; text-align: start; vertical-align: middle; }
.adm-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--adm-sunken);
  border-bottom: 1px solid var(--adm-line);
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--adm-ink-3); white-space: nowrap;
}
.adm-table tbody tr { border-bottom: 1px solid var(--adm-line); }
.adm-table tbody tr:last-child { border-bottom: 0; }
.adm-table tbody tr:hover { background: var(--adm-sunken); }
.adm-table td.adm-num, .adm-table th.adm-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Header and cells align together, and the column hugs its buttons instead of
   claiming a share of the free space. */
.adm-table th.adm-actions,
.adm-table td.adm-actions { text-align: end; white-space: nowrap; width: 1%; }
.adm-table td.adm-actions > * { vertical-align: middle; }
/* Several actions in one cell sit on one line, evenly spaced, flush end. */
.adm-table td.adm-actions form { display: inline-block; margin-inline-start: 6px; }
.adm-table td.adm-actions > a + form,
.adm-table td.adm-actions > form + form { margin-inline-start: 6px; }

.adm-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.adm-cell__thumb {
  width: 38px; height: 38px; flex: none; border-radius: var(--adm-radius-sm);
  object-fit: cover; background: var(--adm-sunken); border: 1px solid var(--adm-line);
}
/* Title over sub, not beside it. Both are spans, so without display:block
   they run together on one line and the sub reads as part of the title. */
.adm-cell__title { display: block; font-weight: 500; line-height: 1.25; }
.adm-cell__sub { display: block; font-size: 12.5px; color: var(--adm-ink-3); line-height: 1.25; }
.adm-cell__ar { font-size: 12.5px; color: var(--adm-ink-2); direction: rtl; text-align: start; }

/* --- Buttons ------------------------------------------------------------- */
.adm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 15px; height: 38px;
  border: 1px solid var(--adm-line-strong); border-radius: var(--adm-radius-sm);
  background: var(--adm-surface); color: var(--adm-ink);
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.adm-btn:hover { background: var(--adm-sunken); border-color: var(--adm-ink-3); }
.adm-btn:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }
.adm-btn[disabled] { opacity: .5; cursor: not-allowed; }

.adm-btn--primary { background: var(--adm-accent); border-color: var(--adm-accent); color: #fff; }
.adm-btn--primary:hover { background: var(--adm-accent-dark); border-color: var(--adm-accent-dark); color: #fff; }
.adm-btn--danger { background: var(--adm-surface); border-color: #e7b4b0; color: var(--adm-danger); }
.adm-btn--danger:hover { background: var(--adm-danger-soft); border-color: var(--adm-danger); }
.adm-btn--ghost { background: transparent; border-color: transparent; color: var(--adm-ink-2); }
.adm-btn--ghost:hover { background: var(--adm-sunken); color: var(--adm-ink); }
.adm-btn--sm { height: 31px; padding: 0 11px; font-size: 13px; }
.adm-btn--block { width: 100%; }

/* --- Forms --------------------------------------------------------------- */
.adm-form__section + .adm-form__section { margin-top: 18px; }

.adm-grid { display: grid; gap: 16px; }
.adm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.adm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.adm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.adm-grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 18px; }

/* Present for assistive tech and the focus order, absent from the layout.
   Referenced by every styled upload button; while this was missing, the raw
   native file input rendered on top of the button it was meant to hide
   behind — which is what made the editors look like fields stacked on
   fields. */
.adm-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.adm-field { display: block; }

/*
 * Spacing between the things a form stacks.
 *
 * This used to be ".adm-field + .adm-field" alone, which meant a row of
 * fields wrapped in a grid — seller and category, say — sat flush against the
 * controls above and below it: the grid is not a field, so neither side
 * matched. Naming both, in both directions, spaces a card however its rows
 * happen to be grouped.
 *
 * The grid's own gap still handles the space *within* a row, so the rule
 * below that zeroes it inside a grid stays.
 */
.adm-field + .adm-field,
.adm-field + .adm-grid,
.adm-grid + .adm-field,
.adm-grid + .adm-grid { margin-top: 15px; }

/* Inside a grid the gap already does the spacing. Without this, the second
   field of a row inherits the stacked-form margin and sits 15px lower than the
   first — the whole row reads as misaligned. Same trap as .adm-panel earlier:
   an adjacent-sibling margin does not know it is in a grid. */
.adm-grid > .adm-field + .adm-field,
.adm-grid > .adm-field + .adm-grid,
.adm-grid > .adm-grid + .adm-field,
.adm-grid > .adm-grid + .adm-grid { margin-top: 0; }

/* A control that needs the whole row inside a two-column form. */
.adm-grid > .adm-field--full { grid-column: 1 / -1; }

/* Buttons that close a form, spaced off it by the same gutter the grid uses. */
.adm-form__actions { display: flex; gap: 9px; margin-top: 16px; }
.adm-label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--adm-ink-2); }
.adm-label__req { color: var(--adm-danger); }
.adm-help { margin-top: 5px; font-size: 12.5px; color: var(--adm-ink-3); }
.adm-error { margin-top: 5px; font-size: 12.5px; color: var(--adm-danger); font-weight: 500; }

.adm-input, .adm-select, .adm-textarea {
  width: 100%; padding: 8px 11px; min-height: 38px;
  font-family: inherit; font-size: 14px; color: var(--adm-ink);
  background: var(--adm-surface);
  border: 1px solid var(--adm-line-strong); border-radius: var(--adm-radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.adm-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.adm-input:focus, .adm-select:focus, .adm-textarea:focus {
  outline: none; border-color: var(--adm-accent);
  box-shadow: 0 0 0 3px rgba(35, 138, 87, .14);
}
.adm-input.is-invalid, .adm-select.is-invalid, .adm-textarea.is-invalid { border-color: var(--adm-danger); }
.adm-input::placeholder, .adm-textarea::placeholder { color: var(--adm-ink-3); }

.adm-select { appearance: none; padding-inline-end: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a938c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

.adm-input[type="file"] { padding: 7px 10px; line-height: 22px; cursor: pointer; }
.adm-input[type="file"]::file-selector-button {
  margin-inline-end: 10px; padding: 3px 10px;
  border: 1px solid var(--adm-line-strong); border-radius: var(--adm-radius-sm);
  background: var(--adm-sunken); color: var(--adm-ink-2);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.adm-input[type="file"]::file-selector-button:hover { background: var(--adm-surface); }

.adm-inputgroup { display: flex; align-items: stretch; }
.adm-inputgroup .adm-input { border-start-end-radius: 0; border-end-end-radius: 0; }
.adm-inputgroup__suffix {
  display: grid; place-items: center; padding: 0 12px;
  border: 1px solid var(--adm-line-strong); border-inline-start: 0;
  border-start-end-radius: var(--adm-radius-sm); border-end-end-radius: var(--adm-radius-sm);
  background: var(--adm-sunken); color: var(--adm-ink-3); font-size: 13px; white-space: nowrap;
}

/* Checkboxes and switches */
.adm-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.adm-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--adm-accent); flex: none; cursor: pointer; }
.adm-check__label { font-size: 14px; font-weight: 500; }
.adm-check__help { font-size: 12.5px; color: var(--adm-ink-3); }
.adm-checks { display: grid; gap: 11px; }

/* --- Bilingual field pair ------------------------------------------------ */
/* English and Arabic sit side by side so a translator sees the source while
   writing, and an untranslated field is visible rather than hidden in a tab. */
.adm-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.adm-pair__side { min-width: 0; }
.adm-pair__flag {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--adm-ink-3);
}
.adm-pair__flag--ar { color: var(--adm-accent-dark); }
.adm-pair [dir="rtl"] { text-align: right; }
.adm-pair__side--ar .adm-input,
.adm-pair__side--ar .adm-textarea { direction: rtl; text-align: right; font-size: 15px; }
.adm-pair__side--ar .adm-input:placeholder-shown,
.adm-pair__side--ar .adm-textarea:placeholder-shown { direction: ltr; text-align: left; }

/* --- Badges -------------------------------------------------------------- */
.adm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--adm-sunken); color: var(--adm-ink-2); border: 1px solid var(--adm-line);
}
.adm-badge--ok { background: var(--adm-accent-soft); color: var(--adm-accent-dark); border-color: #bfe3ce; }
.adm-badge--warn { background: var(--adm-warn-soft); color: var(--adm-warn); border-color: #ecd79a; }
.adm-badge--danger { background: var(--adm-danger-soft); color: var(--adm-danger); border-color: #e7b4b0; }
.adm-badge--info { background: var(--adm-info-soft); color: var(--adm-info); border-color: #b9d3ea; }
.adm-badge--muted { background: var(--adm-sunken); color: var(--adm-ink-3); }
.adm-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Filters ------------------------------------------------------------- */

/* --- Flash / alerts ------------------------------------------------------ */
.adm-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; margin-bottom: 16px;
  border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  background: var(--adm-surface); font-size: 14px;
}
.adm-alert--success { background: var(--adm-accent-soft); border-color: #bfe3ce; color: var(--adm-accent-dark); }
.adm-alert--error { background: var(--adm-danger-soft); border-color: #e7b4b0; color: var(--adm-danger); }
.adm-alert__icon { flex: none; margin-top: 1px; }

/* --- Empty state --------------------------------------------------------- */
.adm-empty { padding: 52px 24px; text-align: center; }
.adm-empty__icon { color: var(--adm-line-strong); margin-bottom: 10px; }
.adm-empty__title { font-size: 16px; font-weight: 600; }
.adm-empty__text { margin-top: 5px; font-size: 14px; color: var(--adm-ink-3); }
.adm-empty__action { margin-top: 16px; }

/* --- Pagination ---------------------------------------------------------- */
.adm-pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-pagination__info { margin-inline-end: auto; font-size: 13px; color: var(--adm-ink-3); }
.adm-pagination a, .adm-pagination span {
  display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px;
  border: 1px solid var(--adm-line-strong); border-radius: var(--adm-radius-sm);
  font-size: 13.5px; background: var(--adm-surface);
}
.adm-pagination a:hover { background: var(--adm-sunken); }
.adm-pagination .is-active { background: var(--adm-accent); border-color: var(--adm-accent); color: #fff; font-weight: 600; }
.adm-pagination .is-disabled { opacity: .45; }

/* --- Detail lists -------------------------------------------------------- */
.adm-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14px; }
.adm-dl dt { color: var(--adm-ink-3); }
.adm-dl dd { margin: 0; font-weight: 500; }

.adm-address { font-size: 14px; line-height: 1.6; color: var(--adm-ink-2); }

/* --- Misc ---------------------------------------------------------------- */
.adm-muted { color: var(--adm-ink-3); }
.adm-num { font-variant-numeric: tabular-nums; }
.adm-hr { height: 1px; background: var(--adm-line); border: 0; margin: 16px 0; }

/* The heading above a group of fields. Sits closer to its rule than to the
   fields it introduces, so the two read as one unit rather than three. */
.adm-formgroup {
  /* Padding rather than margin so the space is the heading's own and cannot
     collapse into the first field's margin.
     Comfortably wider than the 15px between the checkboxes themselves, so the
     heading reads as sitting above the group rather than as another line in
     it — at equal spacing the label looked like the first option. */
  margin: 0;
  padding-bottom: 24px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--adm-ink-2);
}
.adm-hr + .adm-formgroup { margin-top: -4px; }
.adm-tag-ar { direction: rtl; unicode-bidi: isolate; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .adm-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .adm-shell { grid-template-columns: minmax(0, 1fr); }
  .adm-sidebar {
    position: fixed; inset-inline-start: 0; top: 0; z-index: 60;
    width: var(--adm-sidebar-w); transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--adm-shadow-lg);
  }
  .adm-sidebar.is-open { transform: none; }
  .adm-page { padding: 18px 16px 48px; }
  .adm-topbar { padding: 0 16px; }
  .adm-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(23, 33, 27, .45); }
}

@media (min-width: 861px) {
  .adm-burger, .adm-scrim { display: none; }
}

/* ==========================================================================
   Staff sign-in
   ==========================================================================
   A deliberately plain screen. It should look like the tool behind it rather
   than the shopfront, so nobody mistakes it for a customer login. */
.adm-login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(circle at 12% 12%, rgba(35, 138, 87, .10), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(35, 138, 87, .07), transparent 46%),
    var(--adm-bg);
}
.adm-login__card {
  width: 100%; max-width: 404px; padding: 30px;
  background: var(--adm-surface);
  border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  box-shadow: var(--adm-shadow-lg);
}
.adm-login__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.adm-login__brand .adm-brand__name { color: var(--adm-ink); }
.adm-login__brand .adm-brand__sub { color: var(--adm-ink-3); }
.adm-login__title { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.adm-login__lede { margin: 5px 0 20px; font-size: 13.5px; color: var(--adm-ink-2); }
.adm-login__foot { margin: 18px 0 0; text-align: center; font-size: 13px; }
.adm-login__foot a { color: var(--adm-ink-3); }
.adm-login__foot a:hover { color: var(--adm-accent); text-decoration: underline; }

/* ==========================================================================
   Order detail
   ========================================================================== */

/* Details beside the map pin. Collapses to one column before the map gets so
   narrow that a district is unreadable. */
.adm-grid--split { grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.1fr); align-items: start; }

/* Labelled rows: the label column sizes to the longest caption and stops,
   so every value starts on the same line down the whole list. */
.adm-dl { align-content: start; }
.adm-dl dt { white-space: nowrap; }
.adm-dl dd { overflow-wrap: anywhere; }

.adm-totals { max-width: 320px; margin-inline-start: auto; }
.adm-totals__grand { font-weight: 600; color: var(--adm-ink); font-size: 16px; }

/* Uploaded invoices read as a list of files, so each is a bordered row rather
   than loose text with a button floating at the end of it. */
.adm-invoice-row {
  justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  background: var(--adm-sunken);
  border: 1px solid var(--adm-line); border-radius: var(--adm-radius-sm);
}
.adm-invoice-row + .adm-invoice-row { margin-top: 8px; }
.adm-invoice-row:last-of-type { margin-bottom: 2px; }
.adm-invoice-row > span { min-width: 0; }
.adm-invoice-row .adm-cell__title { overflow-wrap: anywhere; }
.adm-invoice-row form { flex: none; }

/* --- Read-only delivery pin ---------------------------------------------- */
.adm-map { border: 1px solid var(--adm-line); border-radius: var(--adm-radius-sm); overflow: hidden; }

.adm-map__canvas {
  height: 236px; background: var(--adm-sunken);
  cursor: pointer; /* click once to unlock panning */
}
.adm-map__canvas.is-live { cursor: grab; }
.adm-map__canvas:active { cursor: grabbing; }

/* Leaflet writes its own font stack into the tile layer; keep the panel's. */
.adm-map .leaflet-container { font-family: var(--adm-font); font-size: 11px; }

.adm-map__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; background: var(--adm-sunken);
  border-top: 1px solid var(--adm-line);
  font-size: 12.5px; color: var(--adm-ink-3);
}
.adm-map__coords { font-variant-numeric: tabular-nums; }
.adm-map__link { display: inline-flex; align-items: center; gap: 5px; color: var(--adm-accent); font-weight: 500; }
.adm-map__link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .adm-grid--split { grid-template-columns: minmax(0, 1fr); }
}

/* Address nickname over its rows, with the default marker beside it. */
.adm-addrlabel {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--adm-ink);
}

/* --- Rating stars --------------------------------------------------------- */
.adm-stars { display: inline-flex; align-items: center; gap: 1px; }
.adm-stars__star { color: var(--adm-line-strong); flex: none; }
.adm-stars__star.is-on { color: #e0a52b; }
.adm-stars__value { margin-inline-start: 6px; font-size: 13px; font-weight: 600; color: var(--adm-ink-2); font-variant-numeric: tabular-nums; }

/* --- A single review ------------------------------------------------------ */
.adm-review__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--adm-line);
}
.adm-review__lang { margin-top: 14px; }
.adm-review__title { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.adm-review__body {
  font-size: 14.5px; line-height: 1.6; color: var(--adm-ink-2);
  white-space: pre-wrap;      /* the customer's own line breaks are content */
  overflow-wrap: anywhere;    /* an unbroken string must not widen the card */
}

/* The buyer's own words, quoted rather than restated. */
.adm-note {
  margin: 0; padding: 12px 14px;
  background: var(--adm-sunken);
  border: 1px solid var(--adm-line);
  border-inline-start: 3px solid var(--adm-accent);
  border-radius: var(--adm-radius-sm);
  font-size: 14.5px; line-height: 1.6; color: var(--adm-ink);
  white-space: pre-wrap;      /* their line breaks are part of the instruction */
  overflow-wrap: anywhere;
}

/* --- Unopened orders ------------------------------------------------------
   Colour alone would fail anyone who cannot see it, so the tint and the tag
   always travel together. */
.adm-table tr.is-unopened > td { background: var(--adm-accent-soft); }
.adm-table tr.is-unopened > td:first-child { box-shadow: inset 3px 0 0 var(--adm-accent); }
.adm-table tr.is-unopened:hover > td { background: #e0f2e8; }

/* A title and the badge that qualifies it, on one line.
   .adm-cell__title is display:block — the product and customer lists rely on
   that to stack a title over its sub-line — so a badge beside it needs a flex
   row rather than an inline nudge. The row wraps only if the cell is genuinely
   too narrow, and the badge never breaks mid-word. */
.adm-titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.adm-titlerow > .adm-cell__title { min-width: 0; overflow-wrap: anywhere; }

.adm-tag-new {
  flex: none;
  padding: 1px 7px; border-radius: 20px;
  background: var(--adm-accent); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}



/* ==========================================================================
   Filter toolbar  (<x-adm.filters>)
   --------------------------------------------------------------------------
   One search everybody uses, always visible; everything else behind a button.
   Every list screen in the panel wears the same bar, whether it has one filter
   or five, so the controls are in the same place wherever you are.
   ========================================================================== */

.adm-filterbar {
  border-bottom: 1px solid var(--adm-line);
  border-radius: var(--adm-radius) var(--adm-radius) 0 0;
  background: var(--adm-sunken);
}

.adm-filterbar__top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px;
}

/* --- Search box ----------------------------------------------------------- */
.adm-searchbox { position: relative; flex: 1 1 320px; min-width: 200px; max-width: 420px; display: block; }
.adm-searchbox__icon {
  position: absolute; inset-inline-start: 12px; inset-block-start: 50%;
  transform: translateY(-50%); display: grid; place-items: center;
  color: var(--adm-ink-3); pointer-events: none;
}
.adm-searchbox__input {
  width: 100%; padding: 9px 12px; padding-inline-start: 38px; min-height: 38px;
  font-family: inherit; font-size: 14px; color: var(--adm-ink);
  background: var(--adm-surface);
  border: 1px solid var(--adm-line-strong); border-radius: var(--adm-radius-sm);
}
.adm-searchbox__input::placeholder { color: var(--adm-ink-3); }
.adm-searchbox__input:focus {
  outline: none; border-color: var(--adm-accent);
  box-shadow: 0 0 0 3px rgba(35, 138, 87, .14);
}
/* The browser's own clear affordance duplicates our Clear button. */
.adm-searchbox__input::-webkit-search-cancel-button { cursor: pointer; }

/* --- The toggle ----------------------------------------------------------- */
.adm-filterbar__toggle[aria-expanded="true"] {
  border-color: var(--adm-line-strong);
  background: var(--adm-surface);
}
.adm-filterbar__count {
  min-width: 18px; padding: 0 5px; border-radius: 20px;
  background: var(--adm-accent); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* --- The panel ------------------------------------------------------------ */
.adm-filterbar__panel {
  padding: 18px;
  border-top: 1px solid var(--adm-line);
  background: var(--adm-surface);
}

/* Three across, the shape the fields were designed for; two, then one, as the
   window narrows. Explicit rather than auto-fit so the columns stay aligned
   between screens that have three filters and screens that have four. */
.adm-filterbar__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.adm-filterbar__grid > .adm-field + .adm-field { margin-top: 0; }

.adm-filterbar__extra {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 16px;
}

.adm-filterbar__actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
}

/* A standing note above the table — "3 orders have not been opened yet". */
.adm-filterbar__notice {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; margin: 0;
  background: var(--adm-accent-soft); color: var(--adm-accent-dark);
  border-bottom: 1px solid var(--adm-line);
  font-size: 13.5px; font-weight: 500;
}

@media (max-width: 1100px) { .adm-filterbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .adm-filterbar__grid { grid-template-columns: minmax(0, 1fr); }
  .adm-searchbox { max-width: none; }
  .adm-filterbar__actions { flex-wrap: wrap; }
}

/* --- Bulk selection -------------------------------------------------------
   The bar only exists while something is selected, so the screen is not
   permanently carrying an empty toolbar. */
.adm-tick { width: 1%; white-space: nowrap; }
.adm-tick input { width: 16px; height: 16px; margin: 0; accent-color: var(--adm-accent); cursor: pointer; }

.adm-bulkbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 18px;
  background: var(--adm-accent-soft);
  border-bottom: 1px solid var(--adm-line);
}
.adm-bulkbar__count {
  min-width: 24px; padding: 1px 8px; border-radius: 20px;
  background: var(--adm-accent); color: #fff;
  font-size: 12.5px; font-weight: 700; text-align: center;
}
.adm-bulkbar__label { font-size: 13.5px; font-weight: 500; color: var(--adm-accent-dark); }
.adm-bulkbar__actions { display: flex; gap: 8px; margin-inline-start: 14px; flex-wrap: wrap; }
.adm-bulkbar > [data-bulk-clear] { margin-inline-start: auto; }

.adm-table tr:has([data-bulk-item]:checked) > td { background: var(--adm-accent-soft); }

/* ==========================================================================
   Search panel — the curation screen
   --------------------------------------------------------------------------
   One long form of four blocks. The job of this section is to make a page of
   inputs read as four decisions rather than forty fields: each block states
   whether it is on before it asks anything else, and its contents are shown
   in the order the shopper will see them.
   ========================================================================== */

.adm-block + .adm-block { margin-top: 16px; }

/* A block that is off keeps its settings readable but stops competing for
   attention. Pointer-events stay on — you may well want to edit a heading
   before switching it back. */
/* [type=checkbox] matters: the switch also posts a hidden 0 companion, and a
   hidden input is never :checked — without the qualifier this matches every
   block and dims the whole page. */
.adm-block:has(.adm-switch input[type="checkbox"]:not(:checked)) .adm-card__body { opacity: .5; }
.adm-card__body { transition: opacity .15s ease; }

/* --- The on/off switch --------------------------------------------------- */
.adm-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.adm-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.adm-switch__label {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--adm-ink-3); transition: color .15s ease;
}
.adm-switch:has(input:checked) .adm-switch__label { color: var(--adm-accent-dark); }

.adm-switch__track {
  flex: none; position: relative; width: 40px; height: 23px; border-radius: 999px;
  background: var(--adm-line-strong); transition: background .18s ease;
}
.adm-switch__track::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(23, 33, 27, .28);
  transition: transform .18s ease;
}
.adm-switch input:checked + .adm-switch__track { background: var(--adm-accent); }
.adm-switch input:checked + .adm-switch__track::after { transform: translateX(17px); }
[dir="rtl"] .adm-switch input:checked + .adm-switch__track::after { transform: translateX(-17px); }
.adm-switch input:focus-visible + .adm-switch__track { outline: 2px solid var(--adm-accent); outline-offset: 3px; }

/* --- Heading + row count ------------------------------------------------- */
.adm-blockbar { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.adm-blockbar__field { flex: 1 1 460px; min-width: 0; }
.adm-blockbar__count { flex: none; width: 92px; }
/* Matches .adm-pair__flag exactly — same size, same weight, same bottom gap —
   so the two columns of this bar put their controls on the same line. */
.adm-blockbar__hint {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--adm-ink-3);
}
.adm-input--num { text-align: center; font-variant-numeric: tabular-nums; }

/* --- A block's contents -------------------------------------------------- */
.adm-subsection { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--adm-line); }
.adm-subsection__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.adm-subsection__head .adm-help { margin-top: 3px; max-width: 62ch; }

.adm-pill {
  flex: none; padding: 4px 11px; border-radius: 999px;
  background: var(--adm-accent-soft); color: var(--adm-accent-dark);
  border: 1px solid color-mix(in srgb, var(--adm-accent) 22%, transparent);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

.adm-note--tip { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; }
.adm-note--tip svg { flex: none; margin-top: 2px; color: var(--adm-accent); }

/* --- The term list ------------------------------------------------------- */
/* Laid out on one grid — header, rows and the cut marker share it — so the
   columns cannot drift apart as the content changes. */
.adm-termlist {
  --term-cols: 30px minmax(0, 1fr) minmax(0, 1fr) 74px 38px;
  border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  background: var(--adm-sunken); overflow: hidden;
}

.adm-termlist__head {
  display: grid; grid-template-columns: var(--term-cols); gap: 10px;
  padding: 9px 12px; background: var(--adm-surface);
  border-bottom: 1px solid var(--adm-line);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--adm-ink-3);
}
.adm-termlist__num { text-align: end; }
.adm-termlist__act { text-align: center; }
.adm-termlist__empty { padding: 18px 14px; margin: 0; color: var(--adm-ink-3); font-size: 13.5px; }

.adm-term {
  display: grid; grid-template-columns: var(--term-cols); gap: 10px; align-items: center;
  padding: 7px 12px; background: var(--adm-surface);
  border-bottom: 1px solid var(--adm-line);
  transition: background .12s ease;
}
.adm-term:last-child { border-bottom: 0; }
.adm-term:hover { background: var(--adm-sunken); }

/* Rank: a solid green disc for the terms that actually appear, a hollow one
   for those queued behind them. The number is the answer to "why isn't my
   term showing" before anyone has to ask it. */
.adm-term__rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--adm-line); color: var(--adm-ink-3);
}
.adm-term.is-live .adm-term__rank { background: var(--adm-accent); color: #fff; }
.adm-term.is-queued .adm-term__rank { background: transparent; border: 1px dashed var(--adm-line-strong); }
.adm-term.is-binned .adm-term__rank { background: var(--adm-danger-soft); color: var(--adm-danger); }

.adm-term__field { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm-term__field .adm-input { min-width: 0; }
.adm-term .adm-input { height: 34px; font-size: 13.5px; }
.adm-term .adm-input[readonly] {
  background: transparent; border-color: transparent; color: var(--adm-ink);
  padding-inline-start: 2px; cursor: default;
}
.adm-term:hover .adm-input[readonly] { border-color: var(--adm-line); background: var(--adm-surface); }

.adm-term__num {
  text-align: end; font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--adm-ink-2); white-space: nowrap;
}

.adm-tag-yours {
  flex: none; padding: 1px 7px; border-radius: 20px;
  background: var(--adm-info-soft); color: var(--adm-info);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* A binned row stays put, struck through, one click from coming back —
   nothing is actually removed until the form is saved. */

.adm-term--new { background: var(--adm-sunken); }
.adm-term--new .adm-term__rank { background: transparent; border: 1px dashed var(--adm-line-strong); color: var(--adm-ink-3); }
.adm-term--new .adm-input { border-style: dashed; }
.adm-term--new:focus-within .adm-input { border-style: solid; }
.adm-term--new:focus-within .adm-term__rank { border-style: solid; border-color: var(--adm-accent); color: var(--adm-accent); }

/* Where the block's row limit falls. */
.adm-termcut {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 7px 12px; background: var(--adm-sunken);
  border-bottom: 1px solid var(--adm-line);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--adm-ink-3);
}
.adm-termcut::before, .adm-termcut::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(to right, var(--adm-line-strong) 0 4px, transparent 4px 8px);
}
.adm-termcut span { flex: none; }

/* --- The bin toggle ------------------------------------------------------ */
.adm-bin {
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.adm-bin:focus-visible .adm-bin__face { outline: 2px solid var(--adm-accent); outline-offset: 2px; }

.adm-bin__face {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--adm-radius-sm);
  border: 1px solid transparent; color: var(--adm-ink-3);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.adm-bin:hover .adm-bin__face { background: var(--adm-danger-soft); color: var(--adm-danger); border-color: #e7b4b0; }

/* --- Ticklists for categories and products ------------------------------- */
.adm-picker {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  max-height: 330px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  background: var(--adm-sunken);
}
.adm-picker--tall { max-height: 420px; }

.adm-pick {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; border-radius: var(--adm-radius-sm);
  background: var(--adm-surface); border: 1px solid var(--adm-line);
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.adm-pick:hover { border-color: var(--adm-line-strong); }
.adm-pick:has(input:checked) {
  border-color: var(--adm-accent);
  background: var(--adm-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--adm-accent) 30%, transparent);
}
.adm-pick input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--adm-accent); flex: none; }
.adm-pick__body { min-width: 0; }
.adm-pick__title {
  display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-pick__sub {
  display: block; font-size: 12px; color: var(--adm-ink-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Save bar ------------------------------------------------------------ */
/* Sticky: this page is long enough that the button would otherwise be a
   scroll away from whatever you just changed. */
.adm-savebar {
  position: sticky; bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 13px 16px;
  background: var(--adm-surface); border: 1px solid var(--adm-line-strong);
  border-radius: var(--adm-radius); box-shadow: var(--adm-shadow-lg);
}
.adm-savebar__hint { font-size: 12.5px; color: var(--adm-ink-3); }

/* Visually hidden, still read aloud. */
.adm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 760px) {
  /* Arabic and the hit count drop away first: on a narrow screen the term and
     whether it is binned are what you came for. */
  .adm-termlist { --term-cols: 30px minmax(0, 1fr) 38px; }
  .adm-term > .adm-input[dir="rtl"], .adm-term__num,
  .adm-termlist__head > :nth-child(3), .adm-termlist__head > :nth-child(4) { display: none; }
  .adm-blockbar__count { width: 100%; }
}

/* A block length that is not the operator's to change. Stated as a fact
   rather than shown as a disabled input, which would read as broken. */
.adm-fixed {
  display: flex; align-items: baseline; gap: 6px;
  height: 38px; padding: 0 12px; margin: 0;
  border: 1px dashed var(--adm-line-strong); border-radius: var(--adm-radius-sm);
  background: var(--adm-sunken);
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--adm-ink-2);
}
.adm-fixed__note {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--adm-ink-3);
}

/* Terms kept out of the panel. Folded away — not part of the five — but there,
   because an observed term is hidden rather than destroyed. */
.adm-removed { margin-top: 14px; }
.adm-removed > summary {
  cursor: pointer; padding: 7px 11px; border-radius: var(--adm-radius-sm);
  background: var(--adm-sunken); border: 1px solid var(--adm-line);
  font-size: 12.5px; font-weight: 600; color: var(--adm-ink-2);
  list-style-position: inside;
}
.adm-removed > summary:hover { border-color: var(--adm-line-strong); }
.adm-removed__list {
  margin-top: 8px; border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  overflow: hidden;
}
.adm-removed__row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--adm-surface);
  border-bottom: 1px solid var(--adm-line);
}
.adm-removed__row:last-child { border-bottom: 0; }
.adm-removed__term {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--adm-ink-3);
  text-decoration: line-through;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-removed__row .adm-btn { flex: none; }

.adm-pill--warn {
  background: var(--adm-warn-soft); color: var(--adm-warn);
  border-color: color-mix(in srgb, var(--adm-warn) 30%, transparent);
}
.adm-removed > summary { display: flex; align-items: center; gap: 8px; }
.adm-removed__count {
  margin-inline-start: auto; padding: 1px 8px; border-radius: 999px;
  background: var(--adm-line); color: var(--adm-ink-3);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.adm-removed__list { max-height: 300px; overflow-y: auto; }
/* Not removed any more — these are candidates, so they read as normal text. */
.adm-removed__term { color: var(--adm-ink); text-decoration: none; }

/* --- Vendor application decision ---------------------------------------- */
.adm-decision__form { display: grid; gap: 12px; }
.adm-decision__reason { margin: 0; }
.adm-decision__buttons { display: flex; gap: 9px; flex-wrap: wrap; }

/* --- Seller messages ----------------------------------------------------- */
.adm-msglist { display: grid; }
.adm-msg { padding: 16px 18px; border-bottom: 1px solid var(--adm-line); }
.adm-msg:last-child { border-bottom: 0; }
/* Unanswered carries a marker down its edge — the queue is read by scanning
   for what still needs doing, not by reading every subject line. */
.adm-msg.is-open { border-inline-start: 3px solid var(--adm-warn); background: var(--adm-sunken); }

.adm-msg__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 10px;
}
.adm-msg__subject { display: block; font-size: 15px; font-weight: 600; }
.adm-msg__meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--adm-ink-3); }

.adm-msg__reply {
  margin-top: 12px; padding: 11px 13px;
  background: var(--adm-accent-soft); border-radius: var(--adm-radius-sm);
  border-inline-start: 3px solid var(--adm-accent);
}
.adm-msg__replybody { margin: 5px 0 0; font-size: 14px; line-height: 1.6; }
.adm-msg__form { display: grid; gap: 9px; margin-top: 12px; justify-items: start; }
.adm-msg__form .adm-textarea { width: 100%; }

/* Import preview: what is wrong with a row, under the row. */
.adm-rowerrors { margin: 6px 0 0; padding-inline-start: 16px; font-size: 12.5px; color: var(--adm-danger); }
.adm-rowerrors li { margin-top: 2px; }
.adm-stat--bad .adm-stat__value { color: var(--adm-danger); }
/* The done state, missing until now: without it the "ok" note fell back to a
   bare .adm-note, which has no flex — so the tick and the sentence stacked on
   top of one another instead of sitting on a line. */
.adm-note--ok {
  display: flex; align-items: flex-start; gap: 10px;
  border-inline-start-color: var(--adm-accent);
  background: var(--adm-accent-soft);
}
.adm-note--ok svg { flex: none; margin-top: 2px; color: var(--adm-accent-dark); }

/* --- the status card in the supplier panel -------------------------------
   A card whose whole job is to answer one question, so the answer is the
   first thing in it and everything else is subordinate. */
.adm-status__state {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--adm-ink);
}
.adm-status__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--adm-accent);
  /* A ring rather than a bigger dot: it reads at a glance without competing
     with the text beside it. */
  box-shadow: 0 0 0 3px rgba(35, 138, 87, .2);
}
.adm-status--waiting .adm-status__dot {
  background: var(--adm-warn);
  box-shadow: 0 0 0 3px rgba(154, 115, 22, .2);
}
.adm-status__detail {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--adm-ink-2);
}
/* Bank details and postcodes are read character by character, so they get a
   face where 0 and O differ, and stay left-to-right on an Arabic page. */
.adm-status__value {
  display: block; margin-top: 10px; padding: 9px 11px;
  background: var(--adm-sunken); border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--adm-ink);
  direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere;
}
.adm-status__foot {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--adm-line);
  font-size: 12.5px; line-height: 1.5; color: var(--adm-ink-2);
}

.adm-note--bad {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px;
  border-inline-start-color: var(--adm-danger); background: var(--adm-danger-soft);
}
.adm-note--bad svg { flex: none; margin-top: 2px; color: var(--adm-danger); }

/* The bracket ladder, as the shopper will read it. */
.adm-ladder { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 1px; background: var(--adm-line); border: 1px solid var(--adm-line); border-radius: var(--adm-radius-sm); overflow: hidden; }
.adm-ladder li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 11px; background: var(--adm-surface); font-size: 13.5px; }
.adm-ladder strong { font-variant-numeric: tabular-nums; }

/* --- Product form -------------------------------------------------------- */
/* A bracket reads as a sentence: "from 50 units, each costs 42.00". */
.adm-tierrow {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: start; margin-bottom: 12px;
}
.adm-tierrow__joiner {
  align-self: center; padding-top: 18px;
  font-size: 12.5px; color: var(--adm-ink-3); white-space: nowrap;
}

/* Uploaded photos: the picture first, its captions beside it. */
.adm-photo-hint { margin: -4px 0 14px; }

/* Tiles side by side rather than a stack of full-width rows — a product with
   four photos was four screens of form before, for two controls each. */
.adm-photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px; margin-bottom: 12px;
}
.adm-photo {
  padding: 8px;
  border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  background: var(--adm-sunken);
}
.adm-photo__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 1;
  border-radius: var(--adm-radius-sm); overflow: hidden;
  background: var(--adm-line); border: 1px solid var(--adm-line);
}
.adm-photo__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Remove, top-right of the picture itself. */
.adm-photo__x {
  position: absolute; inset-block-start: 5px; inset-inline-end: 5px;
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(17, 17, 17, .58); color: #fff;
  font-size: 16px; line-height: 1;
  /* Legible over a photo of any colour, which a flat swatch is not. */
  backdrop-filter: blur(2px);
}
.adm-photo__x:hover { background: var(--adm-danger); }
.adm-photo__x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.adm-photo__x-undo { display: none; font-size: 14px; }

/* Marked for removal: dimmed, and the button becomes its own undo. */
.adm-photo.is-binned { background: var(--adm-danger-soft); border-color: #e7b4b0; }
.adm-photo.is-binned .adm-photo__frame img { opacity: .35; }
.adm-photo.is-binned .adm-photo__x { background: var(--adm-danger); }
.adm-photo.is-binned .adm-photo__x-bin { display: none; }
.adm-photo.is-binned .adm-photo__x-undo { display: block; }

.adm-photo__binned {
  position: absolute; inset-inline: 0; bottom: 0; display: none;
  padding: 3px 6px; background: var(--adm-danger); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: center;
}
.adm-photo.is-binned .adm-photo__binned { display: block; }

.adm-photo__pick { margin-top: 8px; }
/* The chosen one is ringed, so which photo leads is readable at a glance
   across a row of tiles rather than only from the radio under it. */
.adm-photo__pick input:checked + span .adm-check__label,
.adm-photo__pick input:checked ~ span { color: var(--adm-accent); font-weight: 600; }
@supports selector(:has(*)) {
  .adm-photo:has(.adm-photo__pick input:checked) { border-color: var(--adm-accent); box-shadow: 0 0 0 1px var(--adm-accent); }
  /* A photo on its way out cannot also be the one that leads. */
  .adm-photo.is-binned:has(.adm-photo__pick input:checked) { border-color: #e7b4b0; box-shadow: none; }
}

.adm-upload input[type="file"] { padding: 7px 9px; height: auto; }

.adm-badgepreview { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

@media (max-width: 720px) {
  .adm-tierrow { grid-template-columns: 1fr; }
  .adm-tierrow__joiner { padding-top: 0; }
  .adm-photos { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}

/* The bracket row: quantity, price, the range it covers, and a way out. */
.adm-tierrow { grid-template-columns: 1fr auto 1fr auto auto; }
.adm-tierrow__range {
  align-self: center; padding-top: 18px; min-width: 108px;
  font-size: 12.5px; font-weight: 600; color: var(--adm-accent-dark); white-space: nowrap;
}
.adm-tierrow__clear {
  align-self: center; margin-top: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  padding: 0; border: 1px solid transparent; border-radius: var(--adm-radius-sm);
  background: none; color: var(--adm-ink-3); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.adm-tierrow__clear:hover { background: var(--adm-danger-soft); color: var(--adm-danger); border-color: #e7b4b0; }
.adm-tierrow__clear:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }

@media (max-width: 900px) {
  .adm-tierrow { grid-template-columns: 1fr auto 1fr; }
  .adm-tierrow__range { grid-column: 1 / -1; padding-top: 0; }
  .adm-tierrow__clear { grid-column: 1 / -1; margin-top: 0; width: auto; }
}

/* Seller messages, summarised on the seller page. */
.adm-thread { display: grid; gap: 10px; }
.adm-thread__row { padding-bottom: 10px; border-bottom: 1px solid var(--adm-line); }
.adm-thread__row:last-child { border-bottom: 0; padding-bottom: 0; }

/* A picture field in the generic resource form: what is there, and how to
   replace it. */
/* --- image upload ----------------------------------------------------------
   The picture first and large, because "which image is this?" is the question
   the field exists to answer — and a URL in a text box never answered it. */
.adm-filefield { display: block; }
.adm-filefield__frame {
  position: relative; display: block; width: 100%; max-width: 340px;
  aspect-ratio: 16 / 10; margin: 6px 0 10px;
  border-radius: var(--adm-radius); overflow: hidden;
  background: var(--adm-sunken); border: 1px solid var(--adm-line);
}
.adm-filefield__frame.is-empty { border-style: dashed; }
.adm-filefield__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.adm-filefield__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; color: var(--adm-ink-3);
}
.adm-filefield__empty svg { color: var(--adm-line-strong); }

.adm-filefield__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* The label IS the button: a file input cannot be styled to match the panel,
   and clicking a label opens the picker just as well. */
.adm-filefield__actions > label.adm-btn { cursor: pointer; }
.adm-filefield__remove { margin: 0; }
.adm-filefield__name {
  font-size: 12.5px; color: var(--adm-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
/* Keyboard users must still see the focus the hidden input receives. */
.adm-filefield__actions input[type="file"]:focus-visible + span,
.adm-filefield__actions > label.adm-btn:focus-within {
  outline: 2px solid var(--adm-accent); outline-offset: 2px; border-radius: var(--adm-radius-sm);
}

@media (max-width: 600px) {
  .adm-filefield__frame { max-width: 100%; }
}

/* A second application, read against the first. */
.adm-reapply { display: grid; gap: 14px; margin-bottom: 16px; }
.adm-reapply__block { padding: 12px 14px; border-radius: var(--adm-radius-sm); background: var(--adm-sunken); border: 1px solid var(--adm-line); }
.adm-reapply__block--reply { background: var(--adm-info-soft); border-color: color-mix(in srgb, var(--adm-info) 22%, transparent); }
.adm-reapply__subject { margin: 6px 0 0; font-weight: 600; }
.adm-reapply__block .adm-note { margin-top: 6px; background: var(--adm-surface); }

/* SKU: the code, and the choice of who writes it. */
.adm-sku__auto { margin-top: 9px; }
.adm-sku .adm-input.is-muted { background: var(--adm-sunken); color: var(--adm-ink-3); }

/* --- chat ------------------------------------------------------------------
   Shared by the supplier's panel and the admin's side of the same thread.
   Two voices in one column: theirs plain and left, yours accented and right —
   the convention every messaging app uses, so it needs no legend. */
.adm-chat { display: flex; flex-direction: column; }

.adm-chat__scroll {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px; max-height: 56vh; min-height: 220px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--adm-sunken);
  /* No visible scrollbar. The thread still scrolls — it opens at the newest
     message, so the bar was furniture pointing at where you already are. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.adm-chat__scroll::-webkit-scrollbar { width: 0; height: 0; }

.adm-chat__msg {
  position: relative; max-width: min(72%, 560px);
  align-self: flex-start; margin-bottom: 8px;
  padding: 9px 13px 7px;
  background: var(--adm-bg, #fff); border: 1px solid var(--adm-line);
  border-radius: 14px 14px 14px 4px;
}
.adm-chat__msg.is-me {
  align-self: flex-end;
  background: var(--adm-accent); border-color: var(--adm-accent); color: #fff;
  border-radius: 14px 14px 4px 14px;
}

/* pre-line so a paragraph break somebody typed survives to the page. */
.adm-chat__body { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-line; }

.adm-chat__stamp {
  display: flex; align-items: baseline; gap: 8px;
  margin: 3px 0 0; font-size: 10.5px; color: var(--adm-ink-2);
}
.adm-chat__msg.is-me .adm-chat__stamp { color: rgba(255, 255, 255, .82); justify-content: flex-end; }
.adm-chat__who { font-weight: 600; }

.adm-chat__tag {
  margin: 0 0 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; opacity: .75;
}

/* A rule with a word on it, for the date and for the unread mark. */
.adm-chat__day,
.adm-chat__new {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0; font-size: 11.5px; color: var(--adm-ink-2); text-align: center;
}
.adm-chat__day::before, .adm-chat__day::after,
.adm-chat__new::before, .adm-chat__new::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--adm-line);
}
.adm-chat__day > span { flex: none; }
.adm-chat__new {
  color: var(--adm-danger); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.adm-chat__new > span { flex: none; }
.adm-chat__new::before, .adm-chat__new::after { background: var(--adm-danger); opacity: .35; }

/* The composer: one field and a send key, sharing a border so they read as a
   single control rather than as a form that happens to sit underneath. */
.adm-composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--adm-line);
  background: var(--adm-bg, #fff);
}
.adm-composer__field { flex: 1 1 auto; min-width: 0; margin: 0; }
.adm-composer__input {
  width: 100%; display: block; resize: none; overflow-y: auto;
  max-height: 140px; padding: 10px 14px;
  font: inherit; font-size: 14px; line-height: 1.45; color: var(--adm-ink);
  background: var(--adm-sunken); border: 1px solid var(--adm-line); border-radius: 20px;
  scrollbar-width: none;
}
.adm-composer__input::-webkit-scrollbar { width: 0; }
.adm-composer__input:focus {
  outline: none; background: var(--adm-bg, #fff);
  border-color: var(--adm-accent); box-shadow: 0 0 0 3px rgba(0, 121, 106, .12);
}
.adm-composer__input.is-invalid { border-color: var(--adm-danger); }

.adm-composer__send {
  flex: none; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%;
  background: var(--adm-accent); color: #fff;
}
.adm-composer__send:hover { filter: brightness(1.08); }
.adm-composer__send:disabled { opacity: .45; cursor: default; filter: none; }
.adm-composer__send:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }

/* --- supplier message inbox ------------------------------------------------
   A list of conversations rather than of messages: name, who spoke last, and
   how long ago. The whole row is the link, so the target is the full width of
   the list and not a word inside it. */
.adm-threads { list-style: none; margin: 0; padding: 0; }
.adm-threads > li + li { border-top: 1px solid var(--adm-line); }

.adm-thread {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; color: inherit; text-decoration: none;
}
.adm-thread:hover { background: var(--adm-sunken); }
.adm-thread.is-unread { background: var(--adm-accent-soft, #eef6f2); }
.adm-thread.is-unread:hover { background: var(--adm-sunken); }

.adm-thread__avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--adm-accent); color: #fff; font-weight: 700; font-size: 15px;
}
.adm-thread__body { flex: 1 1 auto; min-width: 0; }
.adm-thread__top { display: flex; align-items: baseline; gap: 10px; }
.adm-thread__name { font-weight: 600; color: var(--adm-ink); }
.adm-thread.is-unread .adm-thread__name { font-weight: 700; }
.adm-thread__time { font-size: 11.5px; color: var(--adm-ink-2); white-space: nowrap; }

/* One line, clipped — a preview that wraps stops being a list. */
.adm-thread__preview {
  display: block; margin-top: 3px; font-size: 13px; color: var(--adm-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-thread__by { font-weight: 600; }

.adm-thread__meta {
  flex: none; display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--adm-ink-2); white-space: nowrap;
}
.adm-thread__count { display: none; }
@media (min-width: 720px) { .adm-thread__count { display: inline; } }

/* The two-state filter above the list. */
.adm-chipfilter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--adm-line); background: var(--adm-bg, #fff);
  font-size: 13px; color: var(--adm-ink); text-decoration: none;
}
.adm-chipfilter:hover { border-color: var(--adm-accent); }
.adm-chipfilter.is-on {
  background: var(--adm-accent); border-color: var(--adm-accent); color: #fff; font-weight: 600;
}
.adm-chipfilter.is-on .adm-nav__count { background: rgba(255, 255, 255, .25); color: #fff; }

/* --- period picker, chart and breakdowns -----------------------------------
   The supplier's Selling page, built to read like the buyer's Spend page. The
   shapes are the same on purpose: the same person may well look at both. */
.adm-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 16px 18px; }
.adm-period__ranges { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-period__range {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--adm-line); background: var(--adm-bg, #fff);
  font-size: 13px; color: var(--adm-ink); text-decoration: none; white-space: nowrap;
}
.adm-period__range:hover { border-color: var(--adm-accent); }
.adm-period__range.is-current {
  background: var(--adm-accent); border-color: var(--adm-accent); color: #fff; font-weight: 600;
}
.adm-period__custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-inline-start: auto; }
.adm-period__custom .adm-field { margin: 0; max-width: 170px; }

/* Scrolls sideways on a narrow screen rather than squashing twelve months
   into something unreadable. */
.adm-chart { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.adm-chart__svg { display: block; width: 100%; min-width: 560px; height: 236px; }
.adm-chart__track { fill: var(--adm-sunken); }
.adm-chart__bar { fill: var(--adm-accent); }
.adm-chart__label { fill: var(--adm-ink-2); font-size: 11px; text-anchor: middle; }
.adm-chart__value { fill: var(--adm-ink); font-size: 11px; font-weight: 600; text-anchor: middle; }

.adm-breakdown + .adm-breakdown { margin-top: 14px; }
.adm-breakdown__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.adm-breakdown__label {
  font-size: 13.5px; color: var(--adm-ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-breakdown__value { flex: none; font-size: 13.5px; font-weight: 600; }
.adm-breakdown__track {
  display: block; height: 8px; margin: 6px 0 4px; border-radius: 999px;
  background: var(--adm-sunken); overflow: hidden;
}
.adm-breakdown__fill { display: block; height: 100%; background: var(--adm-accent); border-radius: 999px; }
.adm-breakdown__fill--alt { background: var(--adm-ink-2); }
.adm-breakdown__share { font-size: 11.5px; color: var(--adm-ink-2); }

@media (max-width: 720px) {
  .adm-period__custom { margin-inline-start: 0; }
}

/* A certificate beside the number it proves. */
.adm-doclink {
  display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 10px;
  font-size: 12.5px; color: var(--adm-accent-dark); text-decoration: underline;
}
.adm-doclink:hover { color: var(--adm-accent); }
/* Bank numbers stay left-to-right and get a face where 0 and O differ. */
.adm-doclink__iban {
  display: block; margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  direction: ltr; unicode-bidi: isolate;
}

/* --- homepage bands --------------------------------------------------------
   The page top to bottom, one row per band. Numbered rather than dragged: the
   order is the point, and a number you can read beats a handle you have to
   discover — and it works on a phone and with a keyboard. */
.adm-bands { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.adm-bands > li + li { border-top: 1px solid var(--adm-line); }

.adm-band { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; }
.adm-band.is-off { background: var(--adm-sunken); }
.adm-band.is-off .adm-band__name,
.adm-band.is-off .adm-band__blurb { opacity: .65; }

.adm-band__rank {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--adm-accent); color: #fff; font-size: 12.5px; font-weight: 700;
}
.adm-band.is-off .adm-band__rank { background: var(--adm-line-strong); color: var(--adm-ink-2); }

.adm-band__body { flex: 1 1 auto; min-width: 0; }
.adm-band__name { display: flex; align-items: center; gap: 8px; margin: 0 0 3px; font-weight: 600; }
.adm-band__blurb { margin: 0; font-size: 13px; color: var(--adm-ink-2); }
.adm-band__custom { margin: 5px 0 0; font-size: 12.5px; color: var(--adm-ink-2); }

.adm-band__tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-band__tools form { display: inline; }

.adm-iconbtn {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: inline-grid; place-items: center;
  background: var(--adm-bg, #fff); border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius-sm); color: var(--adm-ink); font-size: 14px; line-height: 1;
}
.adm-iconbtn:hover:not(:disabled) { border-color: var(--adm-accent); color: var(--adm-accent); }
.adm-iconbtn:disabled { opacity: .35; cursor: default; }
.adm-iconbtn--danger:hover { border-color: var(--adm-danger); color: var(--adm-danger); }

/* The heading editor, folded away until wanted — twelve open forms would bury
   the order the page is meant to show. */
.adm-band__edit > summary { list-style: none; display: inline-flex; }
.adm-band__edit > summary::-webkit-details-marker { display: none; }
.adm-band__form {
  margin-top: 10px; padding: 14px; width: min(420px, 78vw);
  background: var(--adm-sunken); border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
}

@media (max-width: 900px) {
  .adm-band { flex-wrap: wrap; }
  .adm-band__tools { width: 100%; }
}

.adm-band__stock { margin: 5px 0 0; font-size: 12px; color: var(--adm-ink-3); }
.adm-band__warn {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0;
  padding: 3px 9px; border-radius: 999px;
  background: var(--adm-warn-soft); color: var(--adm-warn);
  font-size: 12px; font-weight: 600;
}

/* --- section editors -------------------------------------------------------
   The shared furniture of /admin/homepage/{section}: rows of things with a
   thumbnail, and rows of inline forms. */
.adm-pickrows, .adm-blockrows { list-style: none; margin: 0; padding: 0; }
.adm-pickrows > li + li, .adm-blockrows > li + li { border-top: 1px solid var(--adm-line); }

.adm-pickrow { display: flex; align-items: center; gap: 12px; padding: 11px 18px; }
.adm-pickrow.is-dim { opacity: .55; }
.adm-pickrow__thumb {
  flex: none; width: 46px; height: 46px; overflow: hidden;
  border-radius: var(--adm-radius-sm); background: var(--adm-sunken);
  border: 1px solid var(--adm-line);
}
.adm-pickrow__thumb--round { border-radius: 50%; }
.adm-pickrow__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-pickrow__mono {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-weight: 700; color: var(--adm-accent-dark); background: var(--adm-accent-soft);
}
.adm-pickrow__body { flex: 1 1 auto; min-width: 0; display: block; }
.adm-pickrow__name { display: block; font-weight: 600; color: var(--adm-ink); text-decoration: none; }
a.adm-pickrow__name:hover { color: var(--adm-accent-dark); }
.adm-pickrow__sub {
  display: block; font-size: 12.5px; color: var(--adm-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-pickrow form { display: inline; }
.adm-tileform { display: flex; align-items: center; gap: 12px; flex: none; }

/* An inline form per row, with its remove pinned to the corner. */
.adm-blockrow { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; }
/* The editing form takes the room; the delete keeps its corner without being
   absolutely positioned over anything. */
.adm-blockrow > form:first-child { flex: 1 1 auto; min-width: 0; }
.adm-blockrow > form:last-child { flex: none; }

.adm-blockrow__foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
/* Save closes the row at its end, whatever else the footer holds. */
.adm-blockrow__foot > .adm-btn { margin-inline-start: auto; }

/* Picture beside the words, as two real columns rather than a flex guess. */
.adm-bannerrow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-bannerrow__media { min-width: 0; }
.adm-bannerrow__media .adm-filefield__frame { max-width: 100%; margin-top: 0; }
@media (max-width: 820px) {
  .adm-bannerrow { grid-template-columns: minmax(0, 1fr); }
  .adm-bannerrow__media .adm-filefield__frame { max-width: 340px; }
}

/* The collage grid: small squares, each with the same × the photo tiles use. */
.adm-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.adm-gallery__item {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--adm-radius-sm); border: 1px solid var(--adm-line);
  background: var(--adm-sunken);
}
.adm-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-gallery__add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-band__link { color: inherit; text-decoration: none; }
.adm-band__link:hover { color: var(--adm-accent-dark); text-decoration: underline; }

/* --- editor layout kit -----------------------------------------------------
   The section editors' recurring shapes, named instead of improvised. */

/* An EN/AR pair that stays a pair. The auto-fit grid re-decides per pixel of
   width whether to show one column or two, so the same form flickered between
   side-by-side and stacked depending on which card it sat in. */
.adm-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .adm-grid--pair { grid-template-columns: minmax(0, 1fr); }
}

/* A picker and its button on one line: the field takes the room, the button
   sits on the field's baseline rather than floating under it. */
.adm-addrow { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.adm-addrow .adm-field { flex: 1 1 260px; min-width: 0; margin: 0; }
.adm-addrow .adm-btn { flex: none; height: 40px; }

@media (max-width: 640px) {
  .adm-blockrow { flex-wrap: wrap; }
  .adm-pickrow { flex-wrap: wrap; }
  .adm-tileform { width: 100%; }
}

/* The link picker: the select proposes, the box beneath it decides. */
.adm-linkfield .adm-select { margin-bottom: 8px; }
.adm-linkfield__path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Upload fields side by side — a band with five pictures was five screens of
   form when they stacked. Three across, then two, then one. */
.adm-uploadgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin: 15px 0 16px;
}
.adm-uploadgrid > .adm-field { margin-top: 0; }
.adm-uploadgrid .adm-filefield__frame { max-width: 100%; }
@media (max-width: 1100px) { .adm-uploadgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .adm-uploadgrid { grid-template-columns: minmax(0, 1fr); } }

/* --- details editor --------------------------------------------------------
   Five commands and a page. The value that posts lives in a hidden textarea;
   this is only the comfortable way to write it. */
.adm-rich { border: 1px solid var(--adm-line); border-radius: var(--adm-radius-sm); background: var(--adm-bg, #fff); }
.adm-rich__bar {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 8px; border-bottom: 1px solid var(--adm-line);
  background: var(--adm-sunken);
  border-radius: var(--adm-radius-sm) var(--adm-radius-sm) 0 0;
}
.adm-rich__bar button {
  min-width: 30px; height: 28px; padding: 0 7px; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px; background: none;
  font-size: 13px; color: var(--adm-ink);
}
.adm-rich__bar button:hover { background: var(--adm-bg, #fff); border-color: var(--adm-line); }
.adm-rich__sep { width: 1px; height: 18px; margin: 0 5px; background: var(--adm-line-strong); }
.adm-rich__page {
  min-height: 130px; max-height: 320px; overflow-y: auto;
  padding: 10px 13px; font-size: 14px; line-height: 1.6; color: var(--adm-ink);
}
.adm-rich__page:focus { outline: none; }
.adm-rich:focus-within { border-color: var(--adm-accent); box-shadow: 0 0 0 3px rgba(0, 121, 106, .1); }
.adm-rich__page ul, .adm-rich__page ol { padding-inline-start: 22px; margin: 6px 0; }
.adm-rich__page p { margin: 0 0 8px; }

/* --- category tree ---------------------------------------------------------
   Departments fold over their subcategories. The connector lines are drawn,
   not structural: a border down the gutter and a tick per row. */
.adm-tree { padding: 4px 0; }
.adm-tree__row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; cursor: default;
}
.adm-tree__branch > summary { cursor: pointer; list-style: none; }
.adm-tree__branch > summary::-webkit-details-marker { display: none; }
.adm-tree__branch > summary:hover, .adm-tree__row--childless:hover, .adm-tree__row--sub:hover { background: var(--adm-sunken); }
.adm-tree__branch + .adm-tree__branch > summary,
.adm-tree__branch + .adm-tree__row--childless,
.adm-tree__row--childless + .adm-tree__branch > summary,
.adm-tree__row--childless + .adm-tree__row--childless { border-top: 1px solid var(--adm-line); }
.adm-tree__chevron {
  width: 18px; flex: none; text-align: center;
  font-size: 17px; font-weight: 700; color: var(--adm-ink-3);
  transition: transform .15s ease;
}
.adm-tree__branch[open] > summary .adm-tree__chevron { transform: rotate(90deg); }
.adm-tree__name {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--adm-accent-dark, var(--adm-accent));
}
.adm-tree__row--sub .adm-tree__name { font-weight: 500; color: var(--adm-ink); }
.adm-tree__chip {
  padding: 2px 9px; border-radius: 999px; flex: none;
  background: var(--adm-accent-soft); color: var(--adm-accent-dark, var(--adm-accent));
  font-size: 11.5px; font-weight: 600;
}
.adm-tree__count { margin-inline-start: auto; flex: none; font-size: 12.5px; color: var(--adm-ink-3); }
.adm-tree__tools { flex: none; }
.adm-tree__subs {
  list-style: none; margin: 0 0 6px; padding: 0 0 0 27px; position: relative;
}
.adm-tree__subs::before {
  content: ""; position: absolute; top: 0; bottom: 14px; inset-inline-start: 27px;
  border-inline-start: 1px solid var(--adm-line-strong);
}
.adm-tree__row--sub { position: relative; padding-inline-start: 22px; }
.adm-tree__row--sub::before {
  content: ""; position: absolute; top: 50%; inset-inline-start: 0;
  width: 14px; border-top: 1px solid var(--adm-line-strong);
}
@media (max-width: 720px) {
  .adm-tree__count { display: none; }
}

/* --- supplier: answering an order ------------------------------------------
   The ask sits above the lines it is about, and each line can be answered on
   its own row. */
.adm-respond {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--adm-line);
  background: var(--adm-warn-soft);
}
.adm-respond__ask {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13.5px; font-weight: 600; color: var(--adm-warn);
}
.adm-respond__acts { display: flex; gap: 8px; }
.adm-rowacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-rowacts--end { justify-content: flex-end; }
.adm-tally { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.adm-tally li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 14px;
}
.adm-tally span { color: var(--adm-ink-3); }

/* A choice between two ways of doing the same job. */
.adm-choice {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--adm-line); border-radius: var(--adm-radius-sm);
}
.adm-choice:hover { border-color: var(--adm-accent); }
.adm-choice.is-on { border-color: var(--adm-accent); background: var(--adm-accent-soft); }
.adm-choice input { margin-top: 3px; }
.adm-choice__title { display: block; font-size: 14px; font-weight: 600; color: var(--adm-ink); }
.adm-choice__note { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--adm-ink-3); }