/* =============================================================================
   Admin + Settings rehaul — VISUAL + MOTION only.
   Owned by the admin/settings rehaul. New classes are namespaced `rh-` to avoid
   clashing with ios-kit.css / components.css. We REUSE the shared kit classes
   (.ios-list, .ios-section, .bk-field, .bk-empty, .bk-skeleton, .bk-button,
   .bk-chip, .bk-stat-tile) and only add what those don't already give us.

   Hard rules followed here (DESIGN.md):
   - animate transform / opacity only; never width/height/top/left/margins;
   - --ease-out for enters, --ease-out-quart for micro-interactions; no ease-in,
     no bounce, no elastic; exits ~75% of enter;
   - glass is chrome-only (we add none here — these are content screens);
   - hairline dividers + negative space over nested cards;
   - every interactive control gets a tactile :active press;
   - composed empty states + skeletons; reduced-motion safe.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. ENTRANCE STAGGER for the admin/settings sections.
   Each top-level .ios-section in these screens settles in with a gentle fade +
   lift. We scope it to a wrapper class so it only plays where we opt in, and so
   it replays on navigation (the screen remounts under .ios-screen-enter) but not
   on in-screen state changes. Capped at ~8 steps so long screens never trap the
   tail. Neutralised by the global prefers-reduced-motion block at the foot.
   --------------------------------------------------------------------------- */
@keyframes rh-section-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rh-screen > .ios-section,
.rh-screen > .ios-search,
.rh-screen .rh-stagger > .ios-section {
  animation: rh-section-in 360ms var(--ease-out) both;
}
.rh-screen > .ios-section:nth-of-type(1) { animation-delay: 0ms; }
.rh-screen > .ios-section:nth-of-type(2) { animation-delay: 48ms; }
.rh-screen > .ios-section:nth-of-type(3) { animation-delay: 96ms; }
.rh-screen > .ios-section:nth-of-type(4) { animation-delay: 144ms; }
.rh-screen > .ios-section:nth-of-type(5) { animation-delay: 192ms; }
.rh-screen > .ios-section:nth-of-type(6) { animation-delay: 240ms; }
.rh-screen > .ios-section:nth-of-type(7) { animation-delay: 288ms; }
.rh-screen > .ios-section:nth-of-type(n+8) { animation-delay: 320ms; }

/* The header block leads the screen in, a touch ahead of the first section. */
.rh-screen > .ios-screen__header {
  animation: rh-section-in 340ms var(--ease-out) both;
}

/* -----------------------------------------------------------------------------
   2. TACTILE PRESS on controls the shared sheet doesn't already cover.
   .ios-list__row already presses. Selects, file inputs, the segmented control
   labels and chips get a matching squeeze so nothing feels dead under the
   finger. Transform-only; micro-interaction curve.
   --------------------------------------------------------------------------- */
.rh-screen .bk-select,
.rh-screen .bk-input,
.rh-screen .bk-textarea {
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out-quart);
}
.rh-screen .bk-select:active { transform: scale(0.99); }

/* Segmented control: give the whole label a press squeeze (it currently only
   crossfades the active pane). Keeps Apple's "the control reacts" feel. */
.rh-screen .ios-segmented label { transition: transform var(--dur-press) var(--ease-out-quart); }
.rh-screen .ios-segmented label:active { transform: scale(0.97); }

/* Ghost / primary buttons inside these screens already press via components.css;
   we only ensure the curve matches and add a press to the inline icon-buttons
   (remove-row "×", chip remove) that are raw <button>s. */
.rh-row-remove {
  transition: transform var(--dur-press) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.rh-row-remove:active:not(:disabled) { transform: scale(0.92); }

/* -----------------------------------------------------------------------------
   3. INGREDIENT ROW (DrinkForm) — replace the inline-grid rows with a calmer,
   better-aligned rhythm. Same column intent (name | qty | unit | remove) but
   tuned spacing and a hairline between rows instead of a hard gap, so the spec
   reads as one list rather than scattered inputs.
   --------------------------------------------------------------------------- */
.rh-ing-rows { display: flex; flex-direction: column; }
.rh-ing-row {
  display: grid;
  grid-template-columns: 1fr 64px 92px 38px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.rh-ing-row:first-child { padding-top: 2px; }
.rh-ing-row:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.rh-ing-row .bk-input,
.rh-ing-row .bk-select { min-width: 0; }

/* The per-row remove control — a quiet circular target that only warms to the
   danger tone on hover/press, so a dense spec isn't a wall of red ×. */
.rh-row-remove {
  position: relative;
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg-subtle);
  font: 600 1.1rem/1 var(--font-display);
  cursor: pointer;
}
/* 34px visual, 44px finger target (HIG). */
.rh-row-remove::before { content: ''; position: absolute; inset: -5px; }
.rh-row-remove:hover:not(:disabled) {
  color: var(--status-danger);
  border-color: color-mix(in srgb, var(--status-danger) 40%, var(--line));
  background: color-mix(in srgb, var(--status-danger) 8%, var(--surface));
}
.rh-row-remove:disabled { opacity: 0.32; cursor: not-allowed; }

/* The "+ Add ingredient" / "+ Add batch ingredient" affordance reads as a
   dashed-edge add slot rather than a full ghost button, so it sits below the
   list as an invitation, not another heavy control. */
.rh-add-row {
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--accent-action) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-action) 5%, transparent);
  color: var(--accent-action);
  font: 600 0.9rem/1 var(--font-display);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out-quart);
}
.rh-add-row:hover { background: color-mix(in srgb, var(--accent-action) 10%, transparent); }
.rh-add-row:active { transform: scale(0.985); }

/* -----------------------------------------------------------------------------
   4. PHOTO SLOT (DrinkForm) — give the empty add-photo state a composed dashed
   well, and the filled state a clean thumbnail row, both better aligned than the
   inline-styled originals.
   --------------------------------------------------------------------------- */
.rh-photo-empty {
  width: 100%;
  min-height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  border-radius: var(--radius-md);
  border: 1.5px dashed color-mix(in srgb, var(--accent-action) 38%, var(--line));
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--accent-action) 4%, transparent) 9px 18px),
    var(--surface);
  color: var(--accent-action);
  font: 600 0.9rem/1 var(--font-display);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out-quart);
}
.rh-photo-empty:hover { border-color: var(--accent-action); }
.rh-photo-empty:active { transform: scale(0.99); }
.rh-photo-empty small { font-weight: 500; color: var(--fg-muted); }

.rh-photo-filled {
  display: flex; align-items: center; gap: 14px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.rh-photo-filled__img {
  width: 76px; height: 76px; flex: 0 0 76px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
}
.rh-photo-filled__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* -----------------------------------------------------------------------------
   5. CUSTOM-CATEGORY CHIPS — the per-row chip + its remove glyph, tidied so the
   remove × is a real target and the chip presses as a unit.
   --------------------------------------------------------------------------- */
.rh-chip-set { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rh-chip {
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px;                  /* HIG: the chip presses as a unit */
  padding-right: 4px;
  transition: transform var(--dur-press) var(--ease-out-quart);
}
.rh-chip:active { transform: scale(0.96); }
.rh-chip__label { cursor: pointer; padding: 0 2px; }
.rh-chip__x {
  position: relative;
  width: 20px; height: 20px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-pill);
  font-weight: 700; line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
/* 20px glyph, taller finger target without swallowing the chip label. */
.rh-chip__x::before { content: ''; position: absolute; inset: -12px -6px; }
.rh-chip__x:hover { opacity: 1; background: color-mix(in srgb, var(--fg) 10%, transparent); }

/* -----------------------------------------------------------------------------
   6. STAFF / ACCOUNT AVATAR — replace the hardcoded blue gradient inline styles
   with a token-aware monogram so it reads native in both themes. (Applied via
   className; logic untouched.)
   --------------------------------------------------------------------------- */
.rh-avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  color: #fdfdfd;   /* near-white on the fixed brand gradient (not theme-flipping --fg-on-accent) */
  font: 800 0.78rem/1 var(--font-display);
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--brand-blue, #2563eb), var(--brand-indigo, #4f46e5));
  box-shadow: var(--shadow-xs);
}
/* "violet" retired (DESIGN.md lila ban) — a cool cyan→blue keeps avatars distinct without purple. */
.rh-avatar--violet { background: linear-gradient(135deg, #0891b2, #2563eb); }
.rh-avatar--ink    { background: linear-gradient(135deg, #0b0e14, #334155); }

/* -----------------------------------------------------------------------------
   7. STATUS BADGE (86'd / on-menu, active / paused) — one calm token-aware pill
   so we drop the scattered inline rgba() colours. Logic chooses the modifier.
   --------------------------------------------------------------------------- */
.rh-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font: 700 0.68rem/1.1 var(--font-display);
  letter-spacing: 0.02em;
}
.rh-badge--ok   { background: color-mix(in srgb, var(--status-success) 16%, transparent); color: var(--status-success); }
.rh-badge--off  { background: color-mix(in srgb, var(--status-danger) 14%, transparent); color: var(--status-danger); }
.rh-badge--mute { background: color-mix(in srgb, var(--fg-subtle) 16%, transparent); color: var(--fg-subtle); }

/* Inline tag used after a drink/company name (Custom / Edited / Paused). */
.rh-tag {
  margin-left: 8px;
  font: 700 0.66rem/1 var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rh-tag--accent { color: var(--accent-action); }
.rh-tag--warn   { color: var(--status-warning, #d97706); }

/* -----------------------------------------------------------------------------
   8. SAMPLE-DATA / HQ NOTE — soften the seed-data banner into a quiet inset note
   with a hairline, not a heavy tinted card.
   --------------------------------------------------------------------------- */
.rh-screen .ios-hq-sample {
  margin: 14px 16px 0;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--status-warning, #d97706) 28%, var(--line));
  background: color-mix(in srgb, var(--status-warning, #d97706) 8%, var(--surface));
  color: var(--fg);
  font-size: 0.82rem; line-height: 1.45;
}
.rh-screen .ios-hq-sample strong { color: var(--fg-strong); }

/* -----------------------------------------------------------------------------
   9. SUBMIT / SAVE button — the primary action on form screens gets a confident
   full-width rhythm with the icon trailing. (Uses .bk-button--primary; we only
   align the trailing icon and lock the press curve.)
   --------------------------------------------------------------------------- */
.rh-submit {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.rh-submit svg { transition: transform var(--dur-med) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .rh-submit:not(:disabled):hover svg { transform: translateX(2px); }
}

/* -----------------------------------------------------------------------------
   10. SETTINGS: SRS / reminder cards — these already use .ios-srs-card; we add a
   subtle press to the range thumb track and ensure the radio rows in profile
   press as a unit (they're .ios-list__row buttons, already covered) and that the
   FAQ disclosure animates its chevron via the existing inline transition.
   Nothing structural; just the range gets a tactile feel on the thumb.
   --------------------------------------------------------------------------- */
.rh-screen .ios-range { transition: filter var(--dur-fast) var(--ease-out); }
.rh-screen .ios-range:active { filter: saturate(1.15); }

/* -----------------------------------------------------------------------------
   11. ACCOUNT read-only detail rows — present name/email/role/venue as a calm
   label-over-value list with hairlines (it already uses .ios-list); we tighten
   the value typography so it reads as data, not a tappable row.
   --------------------------------------------------------------------------- */
.rh-detail-row { cursor: default; }
.rh-detail-row .ios-list__row-sub {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.6;
}
.rh-detail-row .ios-list__row-title { font-weight: 600; }

/* -----------------------------------------------------------------------------
   12. LEADERBOARD mini-profile recent-score bars — give the bars a gentle grow
   on open (scaleY from the base, transform-origin bottom) so the sheet feels
   alive. Heights are inline (data-driven); we only animate the reveal.
   --------------------------------------------------------------------------- */
@keyframes rh-bar-grow {
  from { transform: scaleY(0.2); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
.rh-screen .ios-recent-bars__fill,
.ios-sheet .ios-recent-bars__fill {
  transform-origin: bottom center;
  animation: rh-bar-grow 320ms var(--ease-out) both;
}
.ios-sheet .ios-recent-bars__col:nth-child(1) .ios-recent-bars__fill { animation-delay: 40ms; }
.ios-sheet .ios-recent-bars__col:nth-child(2) .ios-recent-bars__fill { animation-delay: 90ms; }
.ios-sheet .ios-recent-bars__col:nth-child(3) .ios-recent-bars__fill { animation-delay: 140ms; }
.ios-sheet .ios-recent-bars__col:nth-child(4) .ios-recent-bars__fill { animation-delay: 190ms; }
.ios-sheet .ios-recent-bars__col:nth-child(5) .ios-recent-bars__fill { animation-delay: 240ms; }

/* =============================================================================
   14. ADMIN — phone-first Apple-native rebuild (IOSAdmin, Missing photos,
   Missing ingredients). These are the grouped, inset Settings-idiom screens.
   The shared kit gives us .ios-list (inset card + hairline rows + row stagger)
   and .ios-section; here we add the Settings rhythm the kit lacks: a full-height
   canvas, a confident large-title block, grouped-list FOOTNOTES under each
   section, generous 48px+ rows, and a calmer trailing chevron. Structure +
   spacing only; all colour comes from tokens, no glass on these content screens.
   ============================================================================= */

/* Full-height canvas so short screens still anchor the header to the top and
   never float mid-viewport. dvh (not vh) per DESIGN.md. */
.rh-admin {
  min-height: 100dvh;
}

/* Large title gets a touch more presence and air on these top-level screens,
   matching the iOS Settings / grouped-list header weight without overriding the
   shared token scale elsewhere. */
.rh-admin > .ios-screen__header {
  padding-bottom: 6px;
}
.rh-admin > .ios-screen__header .ios-screen__sub {
  max-width: 34ch;
}

/* Section rhythm: a little more breathing room between grouped lists than the
   kit default, so the screen reads as composed sections, not a dense stack. */
.rh-admin > .ios-section { margin-top: 26px; }
.rh-admin > .ios-section:first-of-type { margin-top: 14px; }

/* Grouped-list FOOTNOTE — the quiet caption iOS places beneath a grouped list
   to explain what the group does. Replaces the old inline bk-hint blocks and
   the "tap to add" sub-text crammed into rows. Hairline-free, low-chroma. */
.rh-section-foot {
  margin: 8px 16px 0;
  font: 400 0.78rem/1.45 var(--font-body);
  color: var(--fg-muted);
  letter-spacing: -0.005em;
}

/* Section-header trailing count — the small neutral tally iOS shows on the
   right of a grouped-list header (e.g. how many items need attention). Sits in
   the existing flex .ios-section__title; quiet, tabular, never an accent glow. */
.rh-section-count {
  font: 700 0.8rem/1 var(--font-display);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Roomier tap targets on the admin rows — Apple's grouped-list rows breathe
   more than our dense kit default. Pushes each row past 48px while keeping the
   shared :active press (background + scale) from ios-kit.css intact. */
.rh-admin .ios-list__row { padding-top: 15px; padding-bottom: 15px; }

/* Slightly larger, softer leading medallion so the icon reads as an iOS
   settings glyph, not a tag. Shape + size only; tint stays on the modifier. */
.rh-admin .ios-list__row-icon {
  width: 38px; height: 38px; flex-basis: 38px;
  border-radius: var(--radius-md);
}

/* The trailing chevron sits quieter and nudges right on press for a tactile,
   "this row goes somewhere" feel. Transform-only micro-interaction. */
.rh-admin .ios-list__row-chev {
  opacity: 0.65;
  transition: transform var(--dur-press) var(--ease-out-quart), opacity var(--dur-fast) var(--ease-out);
}
.rh-admin .ios-list__row:active .ios-list__row-chev { transform: translateX(2px); opacity: 0.9; }

/* The composed empty state on these screens settles in with the section, and
   its icon medallion gets the brand-neutral treatment (kept token-driven). */
.rh-admin .bk-empty { padding-top: 34px; padding-bottom: 30px; }

/* -----------------------------------------------------------------------------
   13. REDUCED MOTION — neutralise every entrance/micro animation defined here.
   Controls never lose their final, interactive state.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rh-screen > .ios-section,
  .rh-screen > .ios-search,
  .rh-screen > .ios-screen__header,
  .rh-screen .rh-stagger > .ios-section,
  .rh-screen .ios-recent-bars__fill,
  .ios-sheet .ios-recent-bars__fill {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .rh-screen .bk-select:active,
  .rh-screen .ios-segmented label:active,
  .rh-row-remove:active:not(:disabled),
  .rh-add-row:active,
  .rh-photo-empty:active,
  .rh-chip:active,
  .rh-screen .ios-range:active,
  .rh-admin .ios-list__row:active .ios-list__row-chev {
    transform: none;
  }
}