/* ===========================================================================
   Arora Shop — admin.css
   The back office. Deliberately not the storefront: no film, no parallax, no
   marble. Dense, dark, quick to scan, and comfortable at a counter under a
   shop light. It borrows the site's tokens so the two never look like
   different products, then spends all of its own effort on tables and forms.
   =========================================================================== */

/* ------------------------------------------------------------------ gate */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gut);
}
.gate-card {
  width: min(26rem, 100%);
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-2);
  box-shadow: 0 40px 90px -50px #000;
}
.gate-card .brand-mark { width: 42px; height: 42px; }

/* ----------------------------------------------------------------- shell */
.ad {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  min-height: 100dvh;
}
.ad-side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.4rem;
  padding: 1.35rem 1.1rem;
  background: var(--ink-1);
  border-right: 1px solid var(--ink-3);
}
.ad-side .brand { padding-inline: .35rem; }
.ad-tabs { display: grid; gap: .2rem; align-content: start; }
.ad-tab {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .62rem .7rem;
  border-radius: var(--r-2);
  color: var(--steel);
  font-size: var(--t-s);
  letter-spacing: .01em;
  text-align: left;
  transition: background .2s, color .2s;
}
.ad-tab svg { flex: none; opacity: .8; }
.ad-tab:hover { background: var(--ink-2); color: var(--marble); }
.ad-tab[aria-selected="true"] {
  background: var(--ink-3);
  color: var(--gold-hi);
  box-shadow: inset 2px 0 0 var(--gold);
}
.ad-tab .pip {
  margin-left: auto;
  min-width: 1.35rem;
  padding: .1rem .35rem;
  text-align: center;
  font-size: var(--t-xs);
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ad-tab .pip[data-n="0"] { display: none; }
.ad-foot { display: grid; gap: .5rem; font-size: var(--t-xs); color: var(--steel); }

/* ------------------------------------------------------------------ main */
.ad-main { min-width: 0; padding: 0 clamp(1rem, 2.4vw, 2rem) 5rem; }
.ad-top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.4rem 0 1.05rem;
  margin-bottom: 1.4rem;
  background: linear-gradient(var(--ink) 72%, transparent);
  border-bottom: 1px solid var(--ink-3);
}
.ad-view[hidden] { display: none; }
.ad-view { display: grid; gap: 1.6rem; }

/* --------------------------------------------------------------- section */
.ad-sec {
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-2);
  display: grid;
  gap: 1.05rem;
}
.ad-sec > .head { margin: 0; }
.ad-note {
  display: flex;
  gap: .7rem;
  padding: .8rem .95rem;
  font-size: var(--t-s);
  line-height: 1.5;
  color: color-mix(in srgb, var(--marble) 78%, transparent);
  background: color-mix(in srgb, var(--gold) 7%, var(--ink-1));
  border: 1px solid var(--gold-ghost);
  border-radius: var(--r-2);
}
.ad-note svg { flex: none; color: var(--gold); margin-top: .1rem; }
.ad-note.bad { background: color-mix(in srgb, var(--bad) 10%, var(--ink-1)); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.ad-note.bad svg { color: #e07a6c; }
.ad-note.ok { background: color-mix(in srgb, var(--ok) 12%, var(--ink-1)); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ad-note.ok svg { color: #5cbf95; }

/* ------------------------------------------------------------ stat cards */
.stat-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.stat {
  padding: 1rem 1.05rem;
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-2);
  display: grid;
  gap: .3rem;
  align-content: start;
}
.stat-n {
  font-family: var(--display);
  font-size: 1.85rem;
  line-height: 1;
  color: var(--marble);
  font-variant-numeric: tabular-nums;
}
.stat-l { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.stat.warn .stat-n { color: #d9a63a; }
.stat.bad  .stat-n { color: #e07a6c; }
.stat.gold .stat-n { color: var(--gold-hi); }

/* -------------------------------------------------------------- bar chart */
/* Named .shelf-*, not .bar-*: site.css already owns .bar for the shop's sticky
   filter strip, and admin.html loads that sheet too. */
.bars { display: grid; gap: .7rem; }
.shelf-row { display: grid; grid-template-columns: 9.5rem 1fr 2.5rem; gap: .8rem; align-items: center; font-size: var(--t-s); }
.shelf-bar { height: 6px; background: var(--ink-3); border-radius: 999px; overflow: hidden; }
.shelf-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.shelf-row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--steel); font-weight: 400; }

/* ------------------------------------------------------------------ table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--ink-3); border-radius: var(--r-2); background: var(--ink-1); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tbl th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--steel);
  background: var(--ink-2);
  padding: .7rem .8rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink-3);
}
.tbl td { padding: .6rem .8rem; border-bottom: 1px solid var(--ink-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: var(--ink-2); }
.tbl tr.picked { background: color-mix(in srgb, var(--gold) 8%, var(--ink-1)); }
.tbl tr.dim td:not(.do) { opacity: .45; }
.tbl .r { text-align: right; }
.tbl .mid { text-align: center; }
.tbl .nowrap { white-space: nowrap; }

.thumb {
  width: 42px; height: 42px; flex: none;
  object-fit: cover;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-1);
}
.item-cell { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.item-cell .en { color: var(--marble); }
.item-cell .pa { font-family: var(--gurmukhi); font-size: .95em; color: var(--steel); }
.item-cell .sku { font-family: var(--mono); font-size: var(--t-xs); color: var(--steel-1); }

/* --------------------------------------------------- inline editable cells */
/* Price and stock are the two things that change most often at a counter, so
   they are editable in place instead of behind the editor drawer. They look
   almost like plain text until focused — a table full of visible input boxes
   is exhausting to read. */
.cell-in {
  width: 5.5rem;
  padding: .3rem .45rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--marble);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  transition: border-color .15s, background .15s;
}
.cell-in:hover { border-color: var(--ink-3); background: var(--ink-2); }
.cell-in:focus {
  outline: none;
  border-color: var(--gold-dim);
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--gold-ghost);
}
.cell-in.saved { animation: cellFlash .9s var(--ease-o); }
@keyframes cellFlash {
  from { background: color-mix(in srgb, var(--ok) 40%, transparent); border-color: var(--ok); }
  to   { background: transparent; border-color: transparent; }
}
.cell-in.w-s { width: 4rem; }

/* ------------------------------------------------------------ toggle switch */
/* Named .tog, not .sw — the storefront's Cinema.split() already owns .sw for
   per-word spans and the two files share a document on no page, but the habit
   of keeping class names unique across the project is cheap insurance. */
.tog {
  --on: var(--gold);
  position: relative;
  width: 2.2rem;
  height: 1.15rem;
  flex: none;
  border-radius: 999px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4, var(--ink-3));
  transition: background .2s var(--ease);
}
.tog::after {
  content: "";
  position: absolute;
  inset: 2px auto 2px 2px;
  width: .78rem;
  border-radius: 999px;
  background: var(--steel);
  transition: transform .2s var(--ease), background .2s;
}
.tog[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 35%, var(--ink-3)); border-color: var(--gold-dim); }
.tog[aria-pressed="true"]::after { transform: translateX(1.02rem); background: var(--gold-hi); }
.tog:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tog-cell { display: flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------- toolbar */
.ad-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}
.ad-bar .input, .ad-bar .select { padding-block: .45rem; }
.ad-find { flex: 1 1 12rem; min-width: 9rem; }
.ad-bar .count { margin-left: auto; font-size: var(--t-xs); color: var(--steel); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- bulk strip */
/* Appears only when rows are ticked. It sits at the foot of the viewport so a
   long table does not have to be scrolled back to the top to act on a
   selection made near the bottom. */
.bulk {
  position: sticky;
  bottom: .8rem;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .7rem .85rem;
  background: color-mix(in srgb, var(--ink-2) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gold-ghost);
  border-radius: var(--r-2);
  box-shadow: 0 24px 50px -30px #000;
}
.bulk[hidden] { display: none; }
.bulk .n { font-size: var(--t-s); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.bulk .sep { width: 1px; height: 1.4rem; background: var(--ink-3); }
.bulk .num-in { width: 4.5rem; }

/* ----------------------------------------------------------------- drawer */
/* The item editor slides in from the right rather than opening a new page, so
   the table stays behind it and the shopkeeper never loses their place. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, #000 62%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 41;
  width: min(38rem, 100%);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--ink-1);
  border-left: 1px solid var(--ink-3);
  box-shadow: -40px 0 90px -50px #000;
  transform: translateX(101%);
  transition: transform .32s var(--ease);
}
.drawer.open { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .scrim, .drawer { transition: none; }
}
.drawer-head,
.drawer-foot {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.15rem;
  background: var(--ink-1);
}
.drawer-head { border-bottom: 1px solid var(--ink-3); }
.drawer-foot { border-top: 1px solid var(--ink-3); justify-content: flex-end; }
.drawer-head h2 { margin: 0; font-size: var(--t-4, 1.15rem); }
.drawer-head .x { margin-left: auto; }
.drawer-body {
  overflow-y: auto;
  padding: 1.15rem;
  display: grid;
  gap: 1.05rem;
  align-content: start;
}

/* -------------------------------------------------------------- form parts */
.grid-2 { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.fieldset {
  display: grid;
  gap: .85rem;
  padding: .95rem 1rem 1.05rem;
  border: 1px solid var(--ink-3);
  border-radius: var(--r-2);
  background: var(--ink);
}
.fieldset > legend,
.fieldset > .leg {
  padding: 0 .4rem;
  font-size: var(--t-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--steel);
}

/* repeatable spec rows: label on the left, value on the right, bin at the end.
   Prefixed .ad-, because site.css's .specs is the product page's spec list. */
.ad-specs { display: grid; gap: .45rem; }
.ad-spec-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: .45rem; align-items: center; }
.ad-spec-row .btn-s { padding-inline: .55rem; }

/* Admin → Content: repeatable review/FAQ editor rows */
.content-row { position: relative; display: grid; gap: .55rem; padding: 1rem; margin-bottom: .9rem;
  border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: .6rem; }
.content-row .content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .55rem; }
.content-row [data-content-del] { position: absolute; top: .55rem; right: .55rem; }

/* image picker: preview beside the file input, with the data-URL weight shown
   so nobody quietly stuffs a 4 MB photo into localStorage */
.pic {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
}
.pic-prev {
  width: 88px; height: 88px;
  object-fit: cover;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-1);
}
.pic-side { display: grid; gap: .45rem; min-width: 0; }
.pic-side .hint { word-break: break-word; }
input[type="file"].input { padding: .45rem; font-size: var(--t-xs); }

/* ------------------------------------------------------------ status pills */
.st {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .5rem;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.st::before { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; }
.st-new       { color: var(--gold-hi); background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: var(--gold-ghost); }
.st-packed    { color: #7fb4e0; background: color-mix(in srgb, #7fb4e0 12%, transparent); border-color: color-mix(in srgb, #7fb4e0 35%, transparent); }
.st-shipped   { color: #c9a6e8; background: color-mix(in srgb, #c9a6e8 12%, transparent); border-color: color-mix(in srgb, #c9a6e8 35%, transparent); }
.st-done      { color: #5cbf95; background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 38%, transparent); }
.st-cancelled { color: var(--steel); background: var(--ink-2); border-color: var(--ink-3); }

.pills { display: flex; flex-wrap: wrap; gap: .3rem; }

/* --------------------------------------------------------- order detail row */
/* Clicking an order opens a row underneath it rather than a dialog, so several
   orders can be read side by side while packing. */
tr.detail > td { padding: 0; border-bottom: 1px solid var(--ink-2); }
.detail-in {
  display: grid;
  gap: .9rem;
  padding: 1rem 1.05rem 1.15rem;
  background: var(--ink);
  border-left: 2px solid var(--gold-dim);
}
.detail-in .who { display: grid; gap: .2rem; font-size: var(--t-s); line-height: 1.55; }
.detail-in .who b { font-weight: 500; color: var(--marble); }
.mini { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.mini td { padding: .35rem .5rem; border-bottom: 1px dashed var(--ink-3); }
.mini tr:last-child td { border-bottom: 0; }
.mini .r { text-align: right; font-variant-numeric: tabular-nums; }
.ad-track { border-top: 1px solid var(--ink-3); padding-top: .85rem; }
.ad-track > b { display: block; font-weight: 500; color: var(--marble); margin-bottom: .6rem; font-size: var(--t-s); }
.ad-track .field { gap: .3rem; }

/* ------------------------------------------------------------------ misc */
.ad-empty {
  padding: 2.4rem 1rem;
  text-align: center;
  color: var(--steel);
  font-size: var(--t-s);
}
.tickbox { width: 1rem; height: 1rem; accent-color: var(--gold); cursor: pointer; }
.ad-actions { display: flex; gap: .35rem; justify-content: flex-end; }
.code {
  width: 100%;
  min-height: 9rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  white-space: pre;
  overflow: auto;
}

/* ------------------------------------------------------------------ toast */
/* Every save says so — silent success is indistinguishable from a dead button.
   The storefront's .toast is already ink-and-gold, so the panel reuses
   UI.toast() as-is rather than growing a second one. Only the reduced-motion
   courtesy for the inline cell flash lives here. */
@media (prefers-reduced-motion: reduce) {
  .cell-in.saved { animation: none; }
}

/* ----------------------------------------------------------- narrow screens */
/* Below the shell width the sidebar stops being a column and becomes a strip of
   tabs across the top — a phone at the counter is a real case, since stock gets
   corrected while standing in front of the shelf. */
@media (max-width: 60rem) {
  .ad { grid-template-columns: 1fr; }
  .ad-side {
    position: static;
    height: auto;
    grid-template-rows: auto auto;
    gap: .9rem;
    border-right: 0;
    border-bottom: 1px solid var(--ink-3);
  }
  .ad-tabs { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: .3rem; padding-bottom: .2rem; }
  .ad-tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--gold); }
  .ad-foot { display: none; }
  .ad-main { padding-inline: 1rem; }
  .drawer { width: 100%; }
}