/*
 * Feinschliff der Regie: die ruhigere, an Apple angelehnte Handschrift.
 *
 * Baut auf studio.css auf (dort steht das Gerüst) und gilt für alle Seiten des
 * Regie. Die höhere Spezifität durch "body.regie" sorgt dafür, dass diese
 * Regeln greifen, unabhängig davon, in welcher Reihenfolge die Dateien geladen
 * werden.
 *
 * Leitgedanken:
 *   - Farbe sparsam: nur die eine wichtige Aktion je Seite ist farbig.
 *   - Trennung durch Abstand und Licht statt durch Rahmen.
 *   - Kleinere, überall gleiche Radien.
 *   - Kurze, weiche Übergänge bei jedem Zustandswechsel.
 *
 * Die Küchenansicht bleibt bewusst außen vor: Dort dürfen die Kacheln bunt und
 * kontraststark sein, damit auch unter Zeitdruck alles sofort erkennbar ist.
 */

body.regie {
  --m-radius: 14px;
  --m-radius-sm: 10px;
  --m-line: #d2d2d7;
  --m-line-soft: #e8e8ed;
  --m-surface: #fff;
  --m-bg: #ffffff;
  --m-text: #1d1d1f;
  --m-text-soft: #6e6e73;
  --m-text-faint: #86868b;
  --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --m-ease: 160ms cubic-bezier(0.32, 0.72, 0, 1);

  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--mila-font);
  -webkit-font-smoothing: antialiased;
}

/* Kopfzeile: mattes Glas, der Inhalt scrollt sichtbar darunter durch. --------- */

body.regie .admin-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(247, 245, 242, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--m-line-soft);
}

body.regie .admin-logo__mark {
  letter-spacing: -0.03em;
}

body.regie .admin-logo__sub {
  letter-spacing: 0.14em;
  color: var(--m-text-faint);
}

body.regie .admin-nav__link {
  padding: 0.42rem 0.85rem;
  border-radius: var(--m-radius-sm);
  color: var(--m-text-soft);
  font-size: 0.94rem;
  font-weight: 500;
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-nav__link:hover {
  background: #f5f5f7;
  color: var(--m-text);
}

body.regie .admin-nav__link--active {
  background: #ececf1;
  color: var(--m-text);
  font-weight: 600;
}

/* Der Weg auf die Stage ist kein gewöhnlicher Menüpunkt: Er muss aufs Haar so
   aussehen wie sein Gegenstück dort (.kitchen-nav__wechsel), sonst springt er
   beim Wechsel. Deshalb steht er hier noch einmal — nach den Menüregeln. */
body.regie .admin-nav__link.admin-nav__wechsel {
  padding: 0.42rem 0.85rem;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--mila-text);
}

/* Überschriften: größer, enger, mit mehr Luft darunter. --------------------- */

body.regie .admin-page__head h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

body.regie .admin-page__lead {
  margin-top: 0.5rem;
  color: var(--m-text-faint);
  font-size: 0.95rem;
}

body.regie .admin-page__head {
  margin-bottom: 2.25rem;
}

/* Knöpfe: neutral, nur die Hauptaktion trägt Farbe. ------------------------- */

body.regie .admin-button {
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius-sm);
  background: var(--m-surface);
  color: var(--m-text);
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(35, 27, 20, 0.03);
  transition: background var(--m-ease), border-color var(--m-ease), transform var(--m-ease);
}

body.regie .admin-button:hover {
  background: #fbfaf9;
  border-color: rgba(60, 45, 32, 0.16);
  color: var(--m-text);
}

body.regie .admin-button:active {
  transform: scale(0.98);
}

body.regie .admin-button--primary {
  background: var(--mila-accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(146, 74, 42, 0.25);
}

body.regie .admin-button--primary:hover {
  background: #a2542f;
  border-color: transparent;
  color: #fff;
}

body.regie .admin-button--quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--m-text-soft);
}

body.regie .admin-button--quiet:hover {
  background: #f5f5f7;
  border-color: transparent;
}

body.regie .admin-button--small {
  min-height: 32px;
  padding: 0.28rem 0.7rem;
  font-size: 0.84rem;
}

body.regie .admin-button--danger:hover {
  background: rgba(178, 59, 59, 0.07);
  border-color: transparent;
  color: #b23b3b;
}

/* Filterzeile: schwebt als eigene Fläche, ohne Rahmen. ---------------------- */

body.regie .admin-filter {
  padding: 1rem 1.15rem;
  border: 0;
  border-radius: var(--m-radius);
  background: var(--m-surface);
  box-shadow: var(--m-shadow);
  margin-bottom: 1.5rem;
}

body.regie .admin-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--m-text-faint);
}

body.regie .admin-input {
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius-sm);
  background: var(--m-bg);
  font-size: 0.94rem;
  transition: border-color var(--m-ease), background var(--m-ease), box-shadow var(--m-ease);
}

body.regie .admin-input:focus-visible {
  outline: 0;
  background: var(--m-surface);
  border-color: rgba(181, 100, 60, 0.55);
  box-shadow: 0 0 0 3.5px rgba(181, 100, 60, 0.13);
}

/* Tabelle: keine Rahmen, Trennung durch feine Linien und Licht. ------------- */

body.regie .admin-table-wrap {
  border: 0;
  border-radius: var(--m-radius);
  background: var(--m-surface);
  box-shadow: var(--m-shadow);
}

body.regie .admin-table thead th {
  padding: 0.7rem 1rem;
  background: transparent;
  border-bottom: 1px solid var(--m-line);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--m-text-faint);
}

body.regie .admin-table th,
body.regie .admin-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--m-line-soft);
}

body.regie .admin-table tbody tr {
  transition: background var(--m-ease);
}

body.regie .admin-table tbody tr:hover {
  background: rgba(60, 45, 32, 0.022);
}

body.regie .admin-table__recipe {
  font-weight: 500;
}

body.regie .admin-list__link {
  font-weight: 500;
  transition: color var(--m-ease);
}

body.regie .admin-thumb {
  width: 52px;
  height: 40px;
  border-radius: var(--m-radius-sm);
  box-shadow: 0 1px 2px rgba(35, 27, 20, 0.08);
}

/* Statusmarke: dezenter, ohne kräftige Flächen. ----------------------------- */

body.regie .status-badge {
  padding: 0.16rem 0.55rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.regie .status-badge--active {
  background: rgba(94, 138, 74, 0.13);
  color: #4a6b3a;
}

body.regie .status-badge--draft {
  background: rgba(200, 150, 50, 0.15);
  color: #856019;
}

body.regie .status-badge--archived {
  background: rgba(60, 45, 32, 0.07);
  color: var(--m-text-faint);
}

/* Zeilenaktionen erscheinen erst beim Überfahren — ruhigeres Gesamtbild. ---- */

body.regie .admin-row-actions {
  gap: 0.3rem;
  opacity: 0.55;
  transition: opacity var(--m-ease);
}

body.regie .admin-table tbody tr:hover .admin-row-actions,
body.regie .admin-table tbody tr:focus-within .admin-row-actions {
  opacity: 1;
}

body.regie .admin-menu__toggle {
  width: 32px;
  height: 32px;
  border-color: transparent;
  background: transparent;
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-menu__toggle:hover,
body.regie .admin-menu[open] .admin-menu__toggle {
  border-color: transparent;
  background: rgba(60, 45, 32, 0.07);
  color: var(--m-text);
}

body.regie .admin-menu__panel {
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: 0 2px 6px rgba(35, 27, 20, 0.06), 0 14px 40px rgba(35, 27, 20, 0.14);
  padding: 0.3rem;
}

body.regie .admin-menu__item {
  border-radius: 7px;
  font-size: 0.88rem;
}

body.regie .admin-empty {
  border: 1px solid var(--m-line-soft);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  color: var(--m-text-faint);
}

/* Kennzahlen auf der Übersicht -------------------------------------------- */

body.regie .admin-stat {
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  padding: 1.15rem 1.3rem;
  transition: transform var(--m-ease), box-shadow var(--m-ease);
}

body.regie .admin-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(35, 27, 20, 0.05), 0 12px 30px rgba(35, 27, 20, 0.08);
}

body.regie .admin-stat__value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.regie .admin-stat__label {
  font-weight: 600;
  font-size: 0.94rem;
}

body.regie .admin-stat__hint {
  color: var(--m-text-faint);
  font-size: 0.82rem;
}

/* Karten und Listen -------------------------------------------------------- */

body.regie .admin-card {
  border: 0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
}

body.regie .admin-card__title {
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--m-text);
}

body.regie .admin-list__item {
  border-bottom: 1px solid var(--m-line-soft);
}

body.regie .admin-list__meta {
  color: var(--m-text-faint);
  font-size: 0.82rem;
}

body.regie .admin-hint {
  color: var(--m-text-faint);
  font-size: 0.82rem;
}

body.regie .admin-hint code {
  background: rgba(60, 45, 32, 0.06);
  border-radius: 5px;
}

/* Formulare ---------------------------------------------------------------- */

body.regie .admin-nested__row {
  border: 0;
  border-radius: var(--m-radius-sm);
  background: rgba(60, 45, 32, 0.028);
}

body.regie .admin-remove {
  border-color: transparent;
  background: transparent;
  color: var(--m-text-faint);
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-remove:hover {
  border-color: transparent;
  background: rgba(178, 59, 59, 0.09);
}

body.regie .admin-form__footer {
  position: sticky;
  bottom: 0;
  /* Speichern bleibt in Reichweite, auch in langen Anleitungen. */
  padding: 1rem 0;
  margin-top: 0.5rem;
  background: linear-gradient(to bottom, rgba(247, 245, 242, 0), var(--m-bg) 35%);
}

body.regie .admin-preview img {
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
}

body.regie .admin-errors {
  border: 0;
  border-radius: var(--m-radius-sm);
  background: rgba(200, 150, 50, 0.13);
  color: #7a5813;
}

/* Ziehgriff und Rückmeldung beim Sortieren --------------------------------- */

body.regie .admin-handle {
  border-radius: var(--m-radius-sm);
  color: var(--m-text-faint);
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-handle:hover {
  border-color: transparent;
  background: rgba(60, 45, 32, 0.06);
  color: var(--m-text);
}

body.regie .admin-table--sortable tbody tr.is-dragging {
  background: var(--m-surface);
  box-shadow: 0 2px 6px rgba(35, 27, 20, 0.08), 0 14px 36px rgba(35, 27, 20, 0.13);
}

body.regie .admin-sort-status {
  color: var(--m-text-faint);
  font-size: 0.82rem;
}

/* Meldungen ---------------------------------------------------------------- */

body.regie .flash {
  border: 0;
  border-radius: var(--m-radius-sm);
  font-weight: 500;
  box-shadow: var(--m-shadow);
}

body.regie .flash--notice {
  background: rgba(94, 138, 74, 0.14);
  color: #406030;
}

body.regie .flash--alert {
  background: rgba(200, 150, 50, 0.16);
  color: #7a5813;
}

/* Auf Geräten ohne Glaseffekt bleibt die Kopfzeile deckend lesbar. ---------- */

@supports not (backdrop-filter: blur(1px)) {
  body.regie .admin-header {
    background: var(--m-bg);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.regie * {
    transition-duration: 0.01ms !important;
  }
}

/* In der Kopfzeile sahen "Stage" und "Abmelden" wie bloßer Text aus. Eine feine
   Fläche mit Kontur zeigt, dass man sie drücken kann. */
body.regie .admin-header__account .admin-button--quiet {
  background: var(--mila-surface);
  border-color: var(--mila-line);
  color: var(--mila-text);
  font-weight: 600;
}

body.regie .admin-header__account .admin-button--quiet:hover {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}