/* StudyPass — admin
   The admin is a tool, not a shopfront: denser than the marketing site,
   same tokens, no decoration. English only by design (see 3.5 notes).
*/

/* ==============================================================
   TOP BAR
   ============================================================== */
.admin-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--bg-canvas);
  border-bottom: var(--border-hair) solid var(--edge-hair);
}
.admin-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--nav-height);
  padding-inline: var(--gutter);
}
.admin-bar__wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h4);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
.admin-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.admin-bar__who { display: none; }
@media (min-width: 760px) { .admin-bar__who { display: inline; } }
@media (max-width: 999px) {
  .admin-bar__actions .btn--secondary,
  .admin-bar__actions .btn--quiet { display: none; }
}

/* ==============================================================
   SIDEBAR — .frame and .side-nav come from shell.css
   ============================================================== */
.side-nav__link[aria-disabled='true'] {
  color: var(--fg-disabled);
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
}
.side-nav__soon {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-disabled);
}

/* ==============================================================
   PAGE HEADER inside the frame
   ============================================================== */
.admin-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-hair) solid var(--edge-hair);
}
.admin-head__title { font-size: var(--text-h1); }
.admin-head__sub { margin-top: var(--space-2); color: var(--fg-muted); font-size: var(--text-sm); }

/* ==============================================================
   STAT TILES — one number each, no sparkline, no percentage change
   ============================================================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 0;
  border: var(--border-hair) solid var(--edge-hair);
}
.tile {
  padding: var(--space-5);
  border-left: var(--border-hair) solid var(--edge-hair);
  border-top: var(--border-hair) solid var(--edge-hair);
  min-width: 0;
}
.tile:first-child { border-left: 0; }
.tile__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h1);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-strong);
  margin-top: var(--space-3);
}
.tile__value.is-loading { color: var(--fg-disabled); }
.tile__note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--fg-muted); }
.tile--alert .tile__value { color: var(--brand-orange); }
.tile a { color: inherit; }

/* ==============================================================
   TOOLBAR — search, filters, primary action
   ============================================================== */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
}
.toolbar__search { flex: 1 1 16rem; min-width: 0; }
.toolbar__spacer { flex: 1 1 auto; }
.toolbar .select { width: auto; min-width: 9rem; }

/* ==============================================================
   DATA TABLE
   ============================================================== */
.data-table { font-size: var(--text-sm); }
.data-table th { white-space: nowrap; }
.data-table td { vertical-align: middle; }
.data-table .cell-main { color: var(--fg-strong); font-weight: var(--weight-medium); }
.data-table .cell-dim  { color: var(--fg-muted); }
.data-table .cell-actions { text-align: right; white-space: nowrap; }
.data-table tbody tr { cursor: default; }

/* Status pips reuse the badge, so nothing new to learn */
.pip-draft     { border-color: var(--edge-hair); color: var(--fg-muted); }
.pip-in_review { border-color: var(--status-warn); }
.pip-published { border-color: var(--status-pass); }
.pip-retired   { border-color: var(--edge-hair); color: var(--fg-disabled); }

/* ==============================================================
   FORM LAYOUT for create/edit screens
   ============================================================== */
.form-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid__full { grid-column: 1 / -1; }
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-hair) solid var(--edge-hair);
}
.form-actions__spacer { flex: 1 1 auto; }

/* ==============================================================
   LOADING / EMPTY
   ============================================================== */
.skeleton-row {
  height: 1em;
  background: var(--bg-muted);
  animation: skeleton 1.4s ease-in-out infinite;
}
.admin-empty {
  border: var(--border-hair) dashed var(--edge-hair);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--fg-muted);
}
.admin-error {
  border-left: var(--border-heavy) solid var(--status-alert);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-subtle);
  font-size: var(--text-sm);
}

/* ==============================================================
   OPTION EDITOR — key, English, Mongolian, remove
   ============================================================== */
.opt-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-2);
}
.opt-row + .opt-row { border-top: var(--border-hair) solid var(--edge-subtle); }
.opt-key { text-align: center; font-weight: var(--weight-semibold); }
.opt-key[readonly] { background: var(--bg-subtle); color: var(--fg-muted); }
@media (max-width: 700px) {
  .opt-row { grid-template-columns: 4rem 1fr auto; }
  .opt-row .opt-mn { grid-column: 1 / -1; }
}

/* ==============================================================
   TIER SUMMARY — the locked-word wall, counted
   ============================================================== */
.tiers {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: var(--border-hair) solid var(--edge-hair);
  margin-bottom: var(--space-6);
}
.tier {
  padding: var(--space-4);
  border-left: var(--border-hair) solid var(--edge-hair);
  text-align: center;
  min-width: 0;
}
.tier:first-child { border-left: 0; }
.tier__band {
  display: block;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.tier__count {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-h2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg-strong);
}
.tier__count.is-empty { color: var(--fg-disabled); }
.tier__draft { display: block; margin-top: var(--space-2); font-size: var(--text-2xs); color: var(--fg-muted); }

/* ==============================================================
   QUICK ADD — word, band, meaning, on one line
   ============================================================== */
.quick-add {
  display: grid;
  grid-template-columns: 1fr 6rem 1.4fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border: var(--border-hair) solid var(--edge-hair);
  background: var(--bg-subtle);
}
.quick-add .field { margin: 0; }
.quick-add .field + .field { margin-top: 0; }
@media (max-width: 700px) {
  .quick-add { grid-template-columns: 1fr 6rem; }
  .quick-add .field:nth-child(3) { grid-column: 1 / -1; }
  .quick-add button { grid-column: 1 / -1; }
}

/* Wider dialog for the vocabulary editor and the importer */
.modal--wide { max-width: min(760px, calc(100vw - 2 * var(--gutter))); }

/* Promo code note row sits under its code, not beside it */
.promo-note td { padding-top: 0; font-size: var(--text-xs); }