/* ==========================================================================
   control room

   Deliberately plainer than the shop: this is a tool the owner uses every day,
   not a place anyone is being sold to. English and left-to-right only, as in
   the reference, though every content field still has its Arabic twin.
   ========================================================================== */

.adm { min-height: 100vh; min-height: 100dvh; background: #f4f4f5; }
.adm__top {
  background: var(--green-deep); color: #fff; padding: var(--s3) var(--s5);
  display: flex; align-items: center; gap: var(--s4);
}
.adm__brand { font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.02em; }
.adm__spacer { margin-inline-start: auto; }
.adm__top a, .adm__top button { color: #cdd4c8; font-size: var(--text-sm); text-decoration: none; }
.adm__top a:hover, .adm__top button:hover { color: #fff; }

.adm__banner {
  background: var(--gold-wash); border-bottom: 1px solid var(--gold-line);
  color: #5f4616; font-size: var(--text-sm); padding: var(--s3) var(--s5);
}

.adm__tabs { display: flex; gap: var(--s5); padding: 0 var(--s5); background: #fff; border-bottom: 1px solid var(--line); }
.adm__tab {
  padding: var(--s4) 0; font-size: var(--text-sm); font-weight: 500;
  color: var(--ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.adm__tab[data-active="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.adm__body { padding: var(--s5); max-width: 1100px; }

.adm-login {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: var(--s5);
}
.adm-login__card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--s6); width: min(100%, 360px); display: grid; gap: var(--s4);
}

.adm-status { display: flex; gap: var(--s2); flex-wrap: wrap; margin-block-end: var(--s5); }

.adm-order {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--s5); margin-block-end: var(--s4);
}
.adm-order__head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-block-end: var(--s4); }
.adm-order__id { font-weight: 600; }
.adm-pill {
  font-size: var(--text-xs); font-weight: 600; padding: 2px var(--s3);
  border-radius: var(--r-pill); letter-spacing: 0.03em;
}
.adm-pill[data-status="new"] { background: #e8eefb; color: #24438c; }
.adm-pill[data-status="confirmed"] { background: var(--gold-wash); color: #6b4f19; }
.adm-pill[data-status="delivered"] { background: #e6f2eb; color: #235c41; }
.adm-pill[data-status="out_for_delivery"] { background: #f7f2e6; color: #6b5219; }
.adm-pill[data-status="cancelled"] { background: #f1eff2; color: #6a6270; }
.adm-order__courier { font-size: var(--text-xs); color: var(--ink-faint); align-self: center; }
.adm-order__when { font-size: var(--text-sm); color: var(--ink-faint); margin-inline-start: auto; }
.adm-order__who { display: grid; gap: var(--s1); font-size: var(--text-sm); margin-block-end: var(--s4); }
.adm-order__items { list-style: none; padding: 0; display: grid; gap: var(--s2); font-size: var(--text-sm); }
.adm-order__items li { display: flex; gap: var(--s3); }
.adm-order__items b { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-weight: 500; }
.adm-order__foot { display: flex; gap: var(--s2); flex-wrap: wrap; margin-block-start: var(--s4); padding-block-start: var(--s4); border-top: 1px solid var(--line-soft); }
.adm-order__foot button {
  font-size: var(--text-xs); font-weight: 600; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-control); color: var(--ink-soft);
}
.adm-order__foot button:hover { border-color: var(--ink); color: var(--ink); }

.adm-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.adm-table th, .adm-table td { text-align: start; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); vertical-align: middle; }
.adm-table th { font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.04em; font-weight: 500; background: #faf9fa; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table img { width: 40px; aspect-ratio: 4/5; object-fit: contain; background: #fff; border: 1px solid var(--line-soft); }
.adm-table__ar { color: var(--ink-faint); font-size: var(--text-xs);
                 unicode-bidi: plaintext; text-align: start; }
.adm-td-ar { unicode-bidi: plaintext; }
.adm-table__actions { display: flex; gap: var(--s3); }
.adm-table__actions button { font-size: var(--text-xs); text-decoration: underline; color: var(--ink-soft); }
.adm-table__actions button:hover { color: var(--ink); }
.adm-scroll { overflow-x: auto; }

.adm-head { display: flex; align-items: center; gap: var(--s4); margin-block-end: var(--s4); flex-wrap: wrap; }
.adm-head h2 { font-size: var(--text-lg); }
.adm-head .btn { margin-inline-start: auto; }

.adm-modal { position: fixed; inset: 0; z-index: 130; background: rgba(34,48,31,0.5); display: grid; place-items: center; padding: var(--s4); }
.adm-modal__panel {
  background: #fff; border-radius: var(--r-panel); width: min(100%, 720px);
  max-height: 90vh; overflow-y: auto; padding: var(--s5); display: grid; gap: var(--s4);
}
.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 640px) { .adm-grid2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   the control room on a phone

   The tables were the whole complaint: five columns inside a sideways scroller
   is unusable on a 390px screen. Below 760px every row becomes its own card
   and each cell is labelled from the header it came from, which keeps one
   table in the markup and one set of semantics for a screen reader.
   ========================================================================== */

@media (max-width: 760px) {
  .adm__body { padding: var(--s4); }
  .adm-scroll { overflow-x: visible; }

  .adm-table--cards, .adm-table--cards tbody, .adm-table--cards tr, .adm-table--cards td {
    display: block; width: 100%;
  }
  .adm-table--cards { border: 0; background: none; }
  .adm-table--cards thead { position: absolute; width: 1px; height: 1px;
                            overflow: hidden; clip-path: inset(50%); }
  .adm-table--cards tr {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel);
    padding: var(--s3) var(--s4); margin-block-end: var(--s3);
  }
  .adm-table--cards td {
    border: 0; padding: var(--s2) 0;
    display: flex; gap: var(--s4); align-items: baseline; justify-content: space-between;
  }
  .adm-table--cards td::before {
    content: attr(data-label);
    font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.04em;
    flex: 0 0 auto;
  }
  /* A cell with no label, the thumbnail and the buttons, spans the card. */
  .adm-table--cards td[data-label=""]::before { display: none; }
  .adm-table--cards td[data-label=""] { justify-content: flex-start; }
  .adm-table--cards td > * { text-align: end; }
  .adm-table--cards td[data-label=""] > * { text-align: start; }
  /* The Arabic name is a subtitle, not a second column, so it takes its own
     line under the English rather than sharing the row with it. */
  .adm-table--cards td:has(.adm-table__ar) { flex-wrap: wrap; }
  .adm-table--cards .adm-table__ar { flex: 1 1 100%; text-align: end; }
  .adm-table--cards img { width: 56px; }
  .adm-table__actions { gap: var(--s4); }
  .adm-table__actions button { padding-block: var(--s2); }

  /* Five tabs do not fit; let them scroll the way the shop's chips do. */
  .adm__tabs {
    gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-inline: var(--s4);
  }
  .adm__tabs::-webkit-scrollbar { display: none; }
  .adm__tab { scroll-snap-align: start; white-space: nowrap; }

  .adm__top { padding-inline: var(--s4); flex-wrap: wrap; gap: var(--s2) var(--s3); }
  .adm__banner { padding-inline: var(--s4); }
  .adm-builder { padding: var(--s4); }
}

@media (max-width: 480px) {
  /* Four status buttons in a row is four half-words. */
  .adm-order__foot { display: grid; grid-template-columns: 1fr 1fr; }
  .adm-order__foot button { width: 100%; }
  .adm-order__head { gap: var(--s2); }
  .adm-order__when { margin-inline-start: 0; flex: 1 1 100%; }
}
.adm-checks { display: flex; gap: var(--s5); flex-wrap: wrap; }

/* ==========================================================================
   the options editor
   ========================================================================== */

.adm-hint { font-size: var(--text-xs); color: var(--ink-faint); margin-block-end: var(--s2); }

.adm-optgroup {
  border: 1px solid var(--line); border-radius: var(--r-control);
  padding: var(--s3); margin-block-end: var(--s3); display: grid; gap: var(--s3);
  background: #fafaf8;
}
/* The heading is picked, not typed, so it is one control on one line. */
.adm-optkind { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.adm-optkind > span { font-size: var(--text-sm); color: var(--ink-soft); }
.adm-optkind select {
  flex: 1 1 12rem; min-width: 0; padding: 0.5rem var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: #fff; font-weight: 600;
}
/* Nothing chosen yet: the block is a prompt, not a section of the form. */
.adm-optgroup--empty { background: none; border-style: dashed; }
.adm-optgroup--empty .adm-hint { margin: 0; }

.adm-optvalues { display: grid; gap: var(--s1); }
.adm-optvalues__head {
  display: grid; grid-template-columns: 1fr 6.5rem auto;
  gap: var(--s2); font-size: var(--text-xs); color: var(--ink-faint);
  letter-spacing: 0.04em; padding-inline: var(--s1);
}
.adm-optvalue {
  display: grid; grid-template-columns: 1fr 6.5rem auto;
  gap: var(--s2); align-items: center;
}
.adm-optvalue input {
  min-width: 0; padding: 0.45rem var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-control); background: #fff;
}
.adm-optvalue input[type="number"] { font-variant-numeric: tabular-nums; }
.adm-optvalue__swatch {
  position: absolute; width: 0; height: 0;    /* a shade's colour, kept but not edited here */
}

@media (max-width: 640px) {
  /* The three fields and a delete will not share a phone's width; give each
     choice its own block so they stay usable rather than merely present. */
  .adm-optkind { display: grid; gap: var(--s1); }
  .adm-optvalues__head { display: none; }
  .adm-optvalue {
    grid-template-columns: 1fr auto; gap: var(--s2);
    padding: var(--s3); border: 1px solid var(--line-soft);
    border-radius: var(--r-control); background: #fff;
  }
  .adm-optvalue input { grid-column: 1 / -1; }
  .adm-optvalue .adm-line__x { grid-column: 2; grid-row: 1; }
}

@media (pointer: coarse) {
  /* A checkbox is 13px of native box and the label around it is barely 20px,
     which is a miss more often than a hit with a thumb. Grow the target
     without moving anything: the label keeps its place in the grid and simply
     claims the height a finger needs. */
  .adm-check { min-height: 44px; gap: var(--s3); }
  .adm-check input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }
  /* The remove crosses are 32px. Missing a delete by a few pixels is the
     cheap failure; hitting one you meant to miss is not. */
  .adm-line__x { min-width: 44px; min-height: 44px; }
}

/* Set apart from the status buttons beside it: those move an order along,
   this one ends it. */
.adm-order__delete { margin-inline-start: auto; color: var(--danger); }

.adm-cert {
  display: inline-grid; gap: var(--s2); justify-items: start;
  padding: var(--s3); border: 1px dashed var(--line);
  border-radius: var(--r-control); background: #fff;
}
.adm-cert img { max-width: 180px; height: auto; border-radius: var(--r-control); }
.adm-cert--add { cursor: pointer; color: var(--ink-soft); font-size: var(--text-sm); }

.adm-fee { max-width: 420px; }
.adm-fee__note { font-size: var(--text-sm); color: var(--ink-faint); }
/* ==========================================================================
   the package builder
   ========================================================================== */

.adm-builder {
  margin-block-start: var(--s6); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: var(--s5);
}
.adm-builder h3 { font-size: var(--text-md); }
.adm-builder__foot { display: flex; gap: var(--s3); flex-wrap: wrap; }
.adm-sum { font-size: var(--text-sm); }

.adm-lines { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.adm-lines__empty {
  font-size: var(--text-sm); color: var(--ink-faint);
  padding: var(--s4); border: 1px dashed var(--line); border-radius: var(--r-control);
}
.adm-line {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-control); background: #fff;
}
.adm-line img {
  width: 40px; aspect-ratio: 4/5; object-fit: contain; flex: 0 0 auto;
  border: 1px solid var(--line-soft);
}
.adm-line__name { flex: 1; min-width: 0; font-size: var(--text-sm); display: grid; }
.adm-line__name small { color: var(--ink-faint); font-size: var(--text-xs);
                        unicode-bidi: plaintext; text-align: start; }
.adm-line__price { font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: 600; }
.adm-line__x {
  width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1;
  color: var(--ink-faint); flex: 0 0 auto;
}
.adm-line__x:hover { background: var(--danger-wash); color: var(--danger); }

.stepper--sm { flex: 0 0 auto; }
.stepper--sm button { width: 2rem; height: 2rem; }
.stepper--sm output { min-width: 1.8rem; }

.adm-picker {
  border: 1px solid var(--gold-line); border-radius: var(--r-control);
  background: var(--gold-wash); padding: var(--s3); display: grid; gap: var(--s3);
}
.adm-picker__head { display: flex; gap: var(--s2); }
.adm-picker__head input {
  flex: 1; padding: 0.6rem var(--s3); border: 1px solid var(--line);
  border-radius: var(--r-control); background: #fff; min-width: 0;
}
.adm-results { list-style: none; padding: 0; display: grid; gap: var(--s1); max-height: 20rem; overflow-y: auto; }
.adm-results__empty { font-size: var(--text-sm); color: var(--ink-faint); }
.adm-result {
  width: 100%; display: flex; align-items: center; gap: var(--s3); text-align: start;
  padding: var(--s2) var(--s3); border: 1px solid transparent;
  border-radius: var(--r-control); background: #fff;
}
.adm-result:hover { border-color: var(--gold); }
.adm-result img { width: 34px; aspect-ratio: 4/5; object-fit: contain; flex: 0 0 auto; }
.adm-result__name { flex: 1; min-width: 0; font-size: var(--text-sm); display: grid; }
.adm-result__name small { color: var(--ink-faint); font-size: var(--text-xs);
                          unicode-bidi: plaintext; text-align: start; }
.adm-result__price { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.adm-result__add {
  font-size: var(--text-xs); font-weight: 600; color: var(--gold-deep);
  white-space: nowrap; flex: 0 0 auto;
}

@media (max-width: 560px) {
  /* Five things will not share a line at 390px. Grid rather than flex-wrap:
     the thumbnail holds its column across both rows and the name gets the
     whole width, which wrapping alone would not guarantee. */
  .adm-line, .adm-result {
    display: grid; grid-template-columns: 44px 1fr auto;
    gap: var(--s2) var(--s3); align-items: center;
  }
  .adm-line img, .adm-result img { grid-row: span 2; width: 44px; align-self: start; }
  .adm-line__name, .adm-result__name { grid-column: 2 / -1; }
  .adm-line .stepper { grid-column: 2; justify-self: start; }
  .adm-line__price, .adm-result__price { grid-column: 3; justify-self: end; }
  .adm-line__x { position: absolute; inset-inline-end: var(--s2); inset-block-start: var(--s2); }
  .adm-line { position: relative; padding-inline-end: var(--s6); }
  .adm-result__add { grid-column: 3; justify-self: end; }

  .adm-picker__head { flex-wrap: wrap; }
  .adm-picker__head input { flex: 1 1 100%; }
  .adm-builder__foot .btn { flex: 1; }
}
.adm-order__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-block-start: var(--s3); padding-block-start: var(--s3);
  border-top: 1px solid var(--line-soft); font-size: var(--text-sm); font-weight: 600;
}
.adm-check { display: flex; align-items: center; gap: var(--s2); font-size: var(--text-sm); }

.adm-images { display: flex; gap: var(--s3); flex-wrap: wrap; }
.adm-image { width: 88px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; position: relative; background: #fff; }
.adm-image img { aspect-ratio: 4/5; object-fit: contain; }
.adm-image__x { position: absolute; top: 3px; inset-inline-end: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(34,48,31,0.78); color: #fff; font-size: 12px; display: grid; place-items: center; }
.adm-image--add {
  display: grid; place-items: center; aspect-ratio: 4/5; border-style: dashed;
  color: var(--ink-faint); font-size: var(--text-xs); text-align: center; padding: var(--s2); cursor: pointer;
}
/* A product with many option values makes a very tall form: the colour
   with 47 shades puts Save about fourteen screens down on a phone. Stick the
   footer to the bottom of the panel so Save is always a thumb away, however
   long the form gets. The negative margin and padding let the bar span the
   panel's full width and cover the content sliding under it. */
.adm-modal__foot {
  display: flex; gap: var(--s3); justify-content: flex-end;
  position: sticky; bottom: calc(var(--s5) * -1);
  margin: 0 calc(var(--s5) * -1) calc(var(--s5) * -1);
  padding: var(--s4) var(--s5);
  background: #fff; border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
}