/* Vogelweide Verwaltung — component classes, copied unchanged from the design system (see admin/web/design-system/README.md). */
/* Vogelweide Verwaltung — component classes. Plain CSS over tokens.css; no script.
   Naming is BEM with the `admin-` prefix: block `admin-card`, element `admin-card__title`, modifier `admin-card--…`.
   Selectors are a single class, or a block modifier reaching its own elements (`.admin-stat-tile--attention .admin-stat-tile__label`).
   Tag selectors appear only in the base rules on `admin-root`; links are prefixed with `.admin-root` so they win over the base link colour.
   Interactive state is read from ARIA attributes (`aria-current`, `aria-pressed`, `aria-selected`, `aria-invalid`)
   instead of state modifiers, so the markup that is needed for accessibility also drives the styling.
   Units: rem for type, spacing and sizes, so everything follows the reader's font size; unitless line heights;
   px only for hairlines (borders, outlines, the selection marker), which should stay crisp at any zoom. */

/* ---------- Root (base styles for everything inside the app) ---------- */
.admin-root { font-family: var(--font-sans); font-size: .875rem; line-height: 1.43; color: var(--ink-default); background: var(--background-app); }
.admin-root *, .admin-root *::before, .admin-root *::after { box-sizing: border-box; }
.admin-root a { color: var(--ink-link); }
.admin-root a:hover { color: var(--ink-link-hover); }
.admin-root :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Shell ---------- */
.admin-shell { min-height: 100vh; display: flex; flex-wrap: wrap; background: var(--background-app); }
.admin-shell__sidebar { flex: 1 1 var(--sidebar-width); max-width: 100%; background: var(--background-card); border-right: 1px solid var(--border-card); padding: var(--space-lg) var(--space-sm); display: flex; flex-direction: column; gap: var(--space-2xs); }
.admin-shell__brand { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm) var(--space-lg); }
.admin-shell__mark { width: 1.75rem; height: 1.75rem; flex: none; background: var(--background-brand-mark); color: var(--ink-on-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-mark); font-size: 1rem; }
.admin-shell__brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.admin-shell__brand-name { font-size: .875rem; font-weight: 600; }
.admin-shell__brand-area { font-size: .75rem; color: var(--ink-hint); }
.admin-shell__footer { margin-top: auto; padding: var(--space-md) var(--space-sm) 0; border-top: 1px solid var(--border-card); display: flex; flex-direction: column; gap: var(--space-xs); font-size: .8125rem; }
.admin-shell__account { color: var(--ink-hint); }
.admin-root .admin-shell__logout { color: var(--ink-inactive); }
.admin-shell__main { flex: 999 1 40rem; min-width: 0; padding: var(--space-2xl) var(--space-2xl) var(--space-3xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.admin-shell__main--flush { padding: 0; gap: 0; }
.admin-shell__body { padding: var(--space-xl) var(--space-2xl) var(--space-3xl); display: flex; flex-wrap: wrap; gap: var(--space-xl); align-items: flex-start; }

/* ---------- Navigation ---------- */
.admin-nav { display: flex; flex-direction: column; gap: var(--space-3xs); }
.admin-root .admin-nav__item { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); color: var(--ink-inactive); text-decoration: none; }
.admin-root .admin-nav__item:hover { background: var(--background-item-active); color: var(--ink-default); }
.admin-root .admin-nav__item[aria-current="page"] { background: var(--background-item-active); color: var(--ink-default); font-weight: 600; }

/* ---------- Page header ---------- */
.admin-page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.admin-page-header--bar { background: var(--background-card); border-bottom: 1px solid var(--border-card); padding: var(--space-md) var(--space-2xl); }
.admin-page-header__titles { display: flex; flex-direction: column; gap: var(--space-2xs); }
.admin-page-header__title { margin: 0; font-size: 1.5rem; line-height: 1.333; font-weight: 650; }
.admin-page-header--bar .admin-page-header__title { font-size: 1.375rem; line-height: 1.273; }
.admin-page-header__breadcrumb { font-size: .8125rem; color: var(--ink-hint); }
.admin-root .admin-page-header__breadcrumb-link { color: var(--ink-hint); }
.admin-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.admin-page-header__note { font-size: .8125rem; color: var(--ink-hint); }

/* ---------- Button ---------- */
.admin-button { font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-height); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); border: 1px solid var(--border-button); background: var(--background-input); color: var(--ink-default); text-decoration: none; cursor: pointer; }
.admin-root a.admin-button { color: var(--ink-default); text-decoration: none; }
.admin-button--primary { background: var(--background-button-primary); border-color: var(--background-button-primary); color: var(--ink-on-dark); padding-inline: var(--space-lg); }
.admin-root a.admin-button--primary { color: var(--ink-on-dark); }
.admin-button--danger { border-color: var(--border-button-danger); color: var(--ink-danger); }
.admin-button--add { border-style: dashed; border-color: var(--border-add); align-self: flex-start; }
.admin-button--link { border-color: transparent; background: transparent; color: var(--ink-link); }
.admin-root a.admin-button--link { color: var(--ink-link); }
.admin-button--block { width: 100%; }
.admin-button--icon { width: var(--icon-button-size); height: var(--icon-button-size); min-height: 0; padding: 0; flex: none; border-color: transparent; background: transparent; color: var(--ink-hint); font-size: 1.125rem; font-weight: 400; }
.admin-button--icon:hover { background: var(--background-item-active); color: var(--ink-default); }
.admin-button:disabled, .admin-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- Badge ---------- */
.admin-badge { display: inline-flex; align-items: center; font-size: .75rem; line-height: 1.333; font-weight: 600; padding: .1875em var(--space-xs); border-radius: var(--radius-pill); white-space: nowrap; background: var(--background-badge-expired); color: var(--ink-badge-expired); }
.admin-badge--public { background: var(--background-badge-public); color: var(--ink-badge-public); }
.admin-badge--planned { background: var(--background-badge-planned); color: var(--ink-badge-planned); }
.admin-badge--expired { background: var(--background-badge-expired); color: var(--ink-badge-expired); }
.admin-badge--board { background: var(--background-badge-board); color: var(--ink-badge-board); font-size: .6875rem; }
.admin-badge--tag { background: var(--background-tag); color: var(--ink-on-dark); font-size: .6875rem; }

/* ---------- Filter chips ---------- */
.admin-filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.admin-filter-chips__chip { font: inherit; font-size: .8125rem; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--border-button); background: var(--background-input); color: var(--ink-default); cursor: pointer; }
.admin-filter-chips__chip[aria-pressed="true"] { background: var(--background-chip-active); border-color: var(--background-chip-active); color: var(--ink-on-dark); font-weight: 600; }

/* ---------- Segmented control ---------- */
.admin-segmented-control { display: inline-flex; border: 1px solid var(--border-input); border-radius: var(--radius-control); overflow: hidden; font-size: .8125rem; }
.admin-segmented-control__option { font: inherit; padding: var(--space-2xs) var(--space-sm); border: 0; background: var(--background-input); color: var(--ink-default); cursor: pointer; }
.admin-segmented-control__option[aria-pressed="true"] { background: var(--background-item-active); font-weight: 600; }

/* ---------- Field ---------- */
.admin-field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.admin-field__label-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); }
.admin-field__label { font-weight: 600; }
.admin-field__optional { font-weight: 400; color: var(--ink-hint); }
.admin-field__input, .admin-field__textarea { font: inherit; width: 100%; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--background-input); color: var(--ink-default); }
.admin-field__input { min-height: var(--control-height); }
.admin-field__input--compact { min-height: 0; padding: var(--space-2xs) var(--space-xs); }
.admin-field__textarea { resize: vertical; }
.admin-field__textarea--markdown { font-family: var(--font-mono); font-size: .8125rem; line-height: 1.615; }
.admin-field__input[aria-invalid="true"], .admin-field__textarea[aria-invalid="true"] { border-color: var(--ink-danger); }
.admin-field__hint { font-size: .75rem; line-height: 1.333; color: var(--ink-hint); }
.admin-field__error { font-size: .75rem; line-height: 1.333; color: var(--ink-danger); font-weight: 600; }

/* ---------- Form grid ---------- */
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.admin-form-grid--title-year { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-form-grid__item--span-2 { grid-column: span 2; }
.admin-form-grid__item--span-3 { grid-column: span 3; }

/* ---------- Checkbox ---------- */
.admin-checkbox { display: flex; align-items: center; gap: var(--space-xs); min-height: 2rem; }
.admin-checkbox__input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--background-button-primary); }
.admin-checkbox__note { color: var(--ink-hint); }

/* ---------- Card ---------- */
.admin-card { background: var(--background-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); display: flex; flex-direction: column; min-width: 0; }
.admin-card__header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border-card); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.admin-card__title { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 650; }
.admin-card__intro { color: var(--ink-hint); }
.admin-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.admin-card__footer { margin-top: auto; padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--border-card); display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.admin-card__footer-spacer { flex: 1; }

/* ---------- Stat tiles ---------- */
.admin-stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: var(--space-md); }
.admin-stat-tile { background: var(--background-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.admin-root a.admin-stat-tile { color: var(--ink-default); text-decoration: none; }
.admin-stat-tile__label { color: var(--ink-hint); }
.admin-stat-tile__value { font-size: 1.75rem; line-height: 1.214; font-weight: 650; font-variant-numeric: tabular-nums; }
.admin-stat-tile__meta { font-size: .8125rem; color: var(--ink-inactive); }
.admin-stat-tile--attention { background: var(--background-attention); border-color: var(--border-attention); }
.admin-stat-tile--attention .admin-stat-tile__label { color: var(--ink-attention); font-weight: 600; }

/* ---------- Callout ---------- */
.admin-callout { background: var(--background-callout); border: 1px solid var(--border-callout); border-radius: var(--radius-inset); padding: var(--space-sm) var(--space-md); display: flex; gap: var(--space-xs); color: var(--ink-callout); line-height: 1.5; }
.admin-callout__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .125rem; }
.admin-callout__text { min-width: 0; }

/* ---------- Schedule ---------- */
.admin-schedule { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.admin-schedule__step { border-top: 3px solid var(--border-schedule-pending); padding: var(--space-xs) var(--space-sm) 0 0; display: flex; flex-direction: column; gap: var(--space-3xs); }
.admin-schedule__step--done { border-top-color: var(--border-schedule-done); }
.admin-schedule__label { font-size: .75rem; color: var(--ink-hint); }
.admin-schedule__date { font-weight: 600; }
.admin-schedule__state { font-size: .75rem; color: var(--ink-hint); }
.admin-schedule__step--done .admin-schedule__state { color: var(--ink-schedule-done); }

/* ---------- Selectable list ---------- */
.admin-selectable-list { list-style: none; margin: 0; padding: 0; }
.admin-selectable-list__item { border-bottom: 1px solid var(--border-divider); }
.admin-selectable-list__row { font: inherit; color: inherit; width: 100%; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 0; background: var(--background-card); cursor: pointer; text-align: left; }
.admin-selectable-list__row:hover { background: var(--background-row-hover); }
.admin-selectable-list__row[aria-pressed="true"] { background: var(--background-item-selected); box-shadow: inset 3px 0 0 var(--marker-selected); }
.admin-selectable-list__thumb { width: 3.5rem; height: 2.625rem; flex: none; background: var(--background-image-placeholder); border-radius: var(--radius-thumbnail); object-fit: cover; }
.admin-selectable-list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.admin-selectable-list__title { font-weight: 600; }
.admin-selectable-list__meta { font-size: .75rem; color: var(--ink-hint); }

/* ---------- Data table ---------- */
.admin-data-table { border: 1px solid var(--border-card); border-radius: var(--radius-inset); overflow-x: auto; background: var(--background-card); }
.admin-data-table--in-card { border: 0; border-radius: var(--radius-card); }
.admin-data-table__table { width: 100%; border-collapse: collapse; min-width: 32.5rem; }
.admin-data-table__header-cell { background: var(--background-table-header); text-align: left; font-size: .75rem; font-weight: 600; color: var(--ink-hint); padding: var(--space-xs) var(--space-sm); }
.admin-data-table__cell { padding: var(--space-2xs) var(--space-sm); border-top: 1px solid var(--border-divider); }
.admin-data-table__cell--number { color: var(--ink-hint); font-variant-numeric: tabular-nums; }
.admin-data-table__row[aria-selected="true"] .admin-data-table__cell { background: var(--background-item-selected); }
.admin-data-table__row[aria-selected="true"] .admin-data-table__cell:first-child { box-shadow: inset 3px 0 0 var(--marker-selected); }

/* ---------- Avatar ---------- */
.admin-avatar { width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--background-image-placeholder); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: var(--ink-inactive); object-fit: cover; }
.admin-avatar--large { width: 4rem; height: 4rem; font-size: 1.25rem; }

/* ---------- Cast editor ---------- */
.admin-cast-editor { display: flex; flex-direction: column; gap: var(--space-sm); }
.admin-cast-editor__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.admin-cast-editor__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-divider); }
.admin-cast-editor__handle { width: 1.75rem; height: var(--icon-button-size); flex: none; border: 0; background: transparent; font: inherit; color: var(--ink-drag-handle); cursor: grab; user-select: none; }
.admin-cast-editor__role { flex: 1 1 13.75rem; }
.admin-cast-editor__separator { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) 0; }
.admin-cast-editor__separator-rule { flex: 1; border-top: 1px dashed var(--border-add); }
.admin-cast-editor__separator-label { font-size: .75rem; color: var(--ink-hint); }
.admin-cast-editor__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* ---------- Token input ---------- */
.admin-token-input { flex: 1 1 16.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--border-input); border-radius: var(--radius-control); min-height: var(--control-height); background: var(--background-input); }
.admin-token-input__token { display: inline-flex; align-items: center; gap: var(--space-2xs); background: var(--background-token); border-radius: var(--radius-pill); padding: var(--space-3xs) var(--space-2xs) var(--space-3xs) var(--space-sm); font-size: .8125rem; }
.admin-token-input__remove { width: 1.375rem; height: 1.375rem; border: 0; background: transparent; border-radius: 50%; cursor: pointer; color: var(--ink-inactive); }
.admin-token-input__remove:hover { background: var(--border-card); }
.admin-token-input__search { flex: 1; min-width: 6.25rem; font: inherit; font-size: .8125rem; border: 0; padding: var(--space-2xs); background: transparent; }

/* ---------- Image uploader ---------- */
.admin-image-uploader { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); gap: var(--space-sm); }
.admin-image-uploader--compact { display: flex; flex-wrap: wrap; }
.admin-image-uploader__image { position: relative; aspect-ratio: 4 / 3; background: var(--background-image-placeholder); border-radius: var(--radius-control); overflow: hidden; display: flex; align-items: flex-end; padding: var(--space-xs); }
.admin-image-uploader--compact .admin-image-uploader__image, .admin-image-uploader--compact .admin-image-uploader__dropzone { width: 7rem; height: 5.25rem; aspect-ratio: auto; }
.admin-image-uploader__image--main { box-shadow: inset 0 0 0 2px var(--outline-image-main); }
.admin-image-uploader__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.admin-image-uploader__badge { position: relative; z-index: 1; }
.admin-image-uploader__remove { position: absolute; top: var(--space-2xs); right: var(--space-2xs); width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 0; background: var(--background-card); cursor: pointer; z-index: 1; }
.admin-image-uploader__dropzone { aspect-ratio: 4 / 3; border: 1.5px dashed var(--border-add); border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; text-align: center; font-size: .75rem; color: var(--ink-inactive); cursor: pointer; padding: var(--space-xs); }
.admin-image-uploader__dropzone[data-over="true"] { border-color: var(--marker-selected); background: var(--background-item-selected); }
.admin-image-uploader__file-input { display: none; }

/* ---------- Activity list ---------- */
.admin-activity-list { list-style: none; margin: 0; padding: 0; }
.admin-activity-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--border-divider); }
.admin-activity-list__kind { width: 6rem; font-size: .75rem; color: var(--ink-hint); }
.admin-root .admin-activity-list__title { flex: 1 1 15rem; color: var(--ink-default); font-weight: 600; text-decoration: none; }
.admin-activity-list__time { font-size: .8125rem; color: var(--ink-hint); }

/* ---------- Section index ---------- */
.admin-section-index { flex: 1 1 13.75rem; background: var(--background-card); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-3xs); }
.admin-root .admin-section-index__link { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); color: var(--ink-default); text-decoration: none; display: flex; justify-content: space-between; }
.admin-root .admin-section-index__link:hover { background: var(--background-item-active); }
.admin-section-index__count { color: var(--ink-hint); font-variant-numeric: tabular-nums; }
.admin-section-index__footer { margin-top: var(--space-xs); padding: var(--space-sm) var(--space-sm) var(--space-2xs); border-top: 1px solid var(--border-card); }

/* ---------- Layout ---------- */
.admin-split { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: flex-start; }
.admin-split__list { flex: 1 1 26.25rem; min-width: 0; }
.admin-split__detail { flex: 1.4 1 32.5rem; min-width: 0; }
.admin-stack { display: flex; flex-direction: column; gap: var(--space-lg); }
.admin-stack--editor { flex: 999 1 37.5rem; min-width: 0; }
.admin-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }