/* Cineoteca Admin — design system.
   Scoped to body.admin-mode / .adm so the public site is untouched. Built on the
   shared tokens (tokens.css): same amber accent, same type, neutral surfaces,
   subtle borders, no decorative effects. Control height, radius and spacing are
   fixed here so every module looks the same. */

:root {
  --adm-sidebar-w: 236px;
  --adm-topbar-h: 56px;
  --adm-control-h: 40px;
  --adm-control-h-sm: 32px;
  --adm-radius: 8px;
  --adm-radius-lg: 12px;
  --adm-gap: 1rem;
  --adm-content-max: 1240px;
  --adm-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --adm-surface: var(--bg-elev);
  --adm-surface-2: var(--bg-elev-2);
  --adm-canvas: var(--bg);
}

/* ------------------------------------------------------------------ shell */
body.admin-mode .site-header,
body.admin-mode .site-footer,
body.admin-mode .mobile-nav { display: none; }
body.admin-mode #app { min-height: 100vh; }

.adm { display: grid; grid-template-columns: var(--adm-sidebar-w) minmax(0, 1fr); min-height: 100vh; background: var(--adm-canvas); color: var(--fg); }
.adm-sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--adm-surface); border-right: 1px solid var(--line); z-index: 70;
}
.adm-brand { display: flex; align-items: center; gap: 0.6rem; height: var(--adm-topbar-h); padding: 0 1rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--fg); }
.adm-brand .logo-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; }
.adm-brand .logo-mark svg { width: 17px; height: 17px; }
.adm-brand small { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); color: var(--fg-muted); margin-left: auto; text-transform: uppercase; letter-spacing: 0.1em; }
.adm-nav { padding: 0.75rem; display: grid; gap: 2px; align-content: start; flex: 1; overflow-y: auto; }
.adm-nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); padding: 0.75rem 0.65rem 0.35rem; }
.adm-nav a {
  display: flex; align-items: center; gap: 0.65rem; height: 38px; padding: 0 0.65rem;
  border-radius: var(--adm-radius); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500;
}
.adm-nav a svg { width: 18px; height: 18px; flex: none; }
.adm-nav a:hover { background: var(--adm-surface-2); color: var(--fg); }
.adm-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.adm-nav a .adm-nav-count { margin-left: auto; font-size: 11px; color: var(--fg-faint); }
.adm-sidebar-foot { border-top: 1px solid var(--line); padding: 0.75rem; display: grid; gap: 2px; }
.adm-sidebar-foot a { display: flex; align-items: center; gap: 0.65rem; height: 38px; padding: 0 0.65rem; border-radius: var(--adm-radius); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 500; }
.adm-sidebar-foot a:hover { background: var(--adm-surface-2); color: var(--fg); }
.adm-sidebar-foot a svg { width: 18px; height: 18px; flex: none; }
.adm-sidebar-foot .adm-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; font-size: var(--fs-sm); }
.adm-sidebar-foot .adm-user strong { display: block; font-size: var(--fs-sm); line-height: 1.2; }
.adm-sidebar-foot .adm-user span { color: var(--fg-muted); font-size: var(--fs-xs); }
.adm-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; object-fit: cover; flex: none; }
.adm-avatar.sm { width: 28px; height: 28px; font-size: 0.65rem; }

.adm-main { display: flex; flex-direction: column; min-width: 0; }
.adm-topbar {
  position: sticky; top: 0; z-index: 60; height: var(--adm-topbar-h); display: flex; align-items: center; gap: 0.75rem;
  padding: 0 clamp(1rem, 2.5vw, 2rem); background: color-mix(in srgb, var(--adm-canvas) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.adm-menu-btn { display: none; }
.adm-crumbs { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--fg-muted); min-width: 0; flex: 1; }
.adm-crumbs a { color: var(--fg-muted); }
.adm-crumbs a:hover { color: var(--fg); }
.adm-crumbs .sep { color: var(--fg-faint); }
.adm-crumbs .cur { color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-topbar-actions { display: flex; align-items: center; gap: 0.5rem; }
.adm-topbar .select select { height: var(--adm-control-h-sm); }
/* A single definite column (not the implicit `auto` track): grid items can then never widen the page
   with their min-content size (tables, segmented controls, long words) — they wrap or scroll instead. */
.adm-content { padding: clamp(1rem, 2.5vw, 2rem); max-width: var(--adm-content-max); width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-content: start; }
.adm-content > * { min-width: 0; }
/* Long tokens (ids, URLs, hashes) wrap only when a line cannot hold them; prose keeps breaking at word boundaries. */
.adm-content { overflow-wrap: break-word; }
.adm-content.has-savebar { padding-bottom: 6rem; }
.adm-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 65; display: none; }

@media (max-width: 1023px) {
  .adm-page-actions .adm-sep { display: none; }
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow); }
  .adm.nav-open .adm-sidebar { transform: none; }
  .adm.nav-open .adm-overlay { display: block; }
  .adm-menu-btn { display: inline-grid; }
}

/* ------------------------------------------------------------- page head */
.adm-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; }
.adm-page-head > * { min-width: 0; max-width: 100%; }
.adm-page-head h1 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.15; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; overflow-wrap: break-word; }
.adm-page-head p { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 0.3rem; max-width: 60ch; }
.adm-page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.adm-page-actions .adm-sep { width: 1px; height: 24px; background: var(--line-strong); margin: 0 0.25rem; }

/* ----------------------------------------------------------------- cards */
.adm-card { background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); min-width: 0; }
.adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.adm-card-head > * { min-width: 0; }
.adm-card-head h2 { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.adm-card-head p { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 0.15rem; }
.adm-card-body { padding: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.adm-card-body > * { min-width: 0; }
.adm-card-body > .adm-row:first-child { margin-top: 0; }
.adm-card-foot { padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.adm-card.flush .adm-card-body { padding: 0; }
.adm-card.flush .adm-skeleton, .adm-card.flush .adm-empty { margin: 1rem; }
.adm-card.is-danger { border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.adm-card.is-danger .adm-card-head h2 { color: var(--bad); }
.adm-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.adm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.adm-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
/* Main column + sidebar. The sidebar keeps a readable width (320–360px); when the content area cannot hold a
   ~520px editor next to it, the sidebar moves below the main column instead of being squeezed. The admin
   shell sidebar is 236px wide from 1024px up, so two columns need roughly 1180px of viewport. */
.adm-grid-side { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); align-items: start; }
.adm-grid-side > * { min-width: 0; }
.adm-grid-side.has-nav { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 1179px) { .adm-grid-side:not(.has-nav) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .adm-grid-side.has-nav { grid-template-columns: minmax(0, 1fr); } }
.adm-stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.adm-stat { background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); padding: 0.9rem 1.1rem; display: grid; gap: 0.2rem; }
.adm-stat span { font-size: var(--fs-xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.adm-stat strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; }

/* ----------------------------------------------------------------- forms */
.adm-field { display: grid; gap: 0.35rem; font-size: var(--fs-sm); min-width: 0; }
.adm-field > span, .adm-label { color: var(--fg-muted); font-weight: 500; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.adm-field > span .req { color: var(--bad); }
.adm-field input, .adm-field select, .adm-field textarea, .adm-input {
  width: 100%; min-width: 0; height: var(--adm-control-h); padding: 0 0.8rem; font: inherit; font-size: var(--fs-sm); color: var(--fg);
  background: var(--adm-canvas); border: 1px solid var(--line-strong); border-radius: var(--adm-radius); outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.adm-field textarea { height: auto; min-height: 120px; padding: 0.6rem 0.8rem; line-height: 1.5; resize: vertical; }
.adm-field textarea.tall { min-height: 180px; }
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus, .adm-input:focus { border-color: var(--accent); box-shadow: var(--adm-focus); }
.adm-field input:disabled, .adm-field select:disabled, .adm-field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.adm-field input[aria-invalid="true"], .adm-field textarea[aria-invalid="true"], .adm-field select[aria-invalid="true"] { border-color: var(--bad); }
.adm-field .hint { color: var(--fg-faint); font-size: var(--fs-xs); }
.adm-field .err { color: var(--bad); font-size: var(--fs-xs); }
.adm-field.is-mono input { font-family: var(--font-mono); font-size: 0.8rem; }
.adm-field select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.adm-input-group { display: flex; align-items: stretch; }
.adm-input-group .adm-input { border-radius: var(--adm-radius) 0 0 var(--adm-radius); }
.adm-input-group .btn { border-radius: 0 var(--adm-radius) var(--adm-radius) 0; height: var(--adm-control-h); margin-left: -1px; }
.adm-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.adm-row .spacer { flex: 1; }
.adm-form-error { color: var(--bad); font-size: var(--fs-sm); display: flex; align-items: flex-start; gap: 0.4rem; min-width: 0; }
.adm-form-error svg { width: 16px; height: 16px; flex: none; margin-top: 0.15em; }
.adm-form-error[hidden] { display: none; }
.adm-help { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.5; }
.adm-help a { color: var(--accent); }

/* switches */
.adm-switch { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; font-size: var(--fs-sm); padding: 0.35rem 0; }
.adm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.adm-switch .track { flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--adm-surface-2); border: 1px solid var(--line-strong); position: relative; transition: background 0.15s, border-color 0.15s; margin-top: 1px; }
.adm-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: var(--fg-muted); transition: transform 0.15s, background 0.15s; }
.adm-switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.adm-switch input:checked + .track::after { transform: translateX(18px); background: var(--accent-fg); }
.adm-switch input:focus-visible + .track { box-shadow: var(--adm-focus); }
.adm-switch input:disabled + .track { opacity: 0.5; }
.adm-switch .text { display: grid; gap: 0.1rem; min-width: 0; }
.adm-switch .text strong { font-weight: 500; color: var(--fg); }
.adm-switch .text small { color: var(--fg-muted); font-size: var(--fs-xs); line-height: 1.45; }
.adm-switch-group { display: grid; gap: 0.25rem; padding-left: 1rem; border-left: 2px solid var(--line); }

/* buttons (extend .btn) */
.adm .btn { height: var(--adm-control-h); padding: 0 1rem; font-size: var(--fs-sm); border-radius: var(--adm-radius); gap: 0.45rem; }
.adm .btn-sm { height: var(--adm-control-h-sm); padding: 0 0.75rem; font-size: var(--fs-xs); }
/* flex: none — otherwise the icon is a shrinkable flex item and the button under-reports its min-content width (table columns, wrapped rows). */
.adm .btn svg { width: 16px; height: 16px; flex: none; }
.adm .btn:focus-visible { outline: none; box-shadow: var(--adm-focus); }
.adm .btn:disabled, .adm .btn.is-busy { opacity: 0.55; cursor: not-allowed; }
.adm .btn.is-busy { cursor: progress; position: relative; }
.adm .btn.is-busy::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: adm-spin 0.7s linear infinite; }
.adm .btn-icon { width: var(--adm-control-h); padding: 0; justify-content: center; }
.adm .btn-icon.btn-sm { width: var(--adm-control-h-sm); }
.adm .btn-danger { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.adm .btn-danger:hover { background: color-mix(in srgb, var(--bad) 24%, transparent); }
.adm .btn-danger.btn-solid { background: var(--bad); color: #fff; border-color: var(--bad); }
.adm .btn-link { height: auto; padding: 0; color: var(--accent); background: none; border: 0; }
@keyframes adm-spin { to { transform: rotate(360deg); } }

/* badges */
.adm-badge { display: inline-flex; align-items: center; gap: 0.3rem; height: 22px; padding: 0 0.55rem; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; background: var(--adm-surface-2); color: var(--fg-muted); white-space: nowrap; }
.adm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.adm-badge.no-dot::before { display: none; }
.adm-badge.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.adm-badge.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.adm-badge.warn { background: var(--accent-soft); color: var(--accent); }
.adm-badge.info { background: color-mix(in srgb, #5b9cff 18%, transparent); color: #5b9cff; }
.adm-badge.outline { background: none; border: 1px solid var(--line-strong); }

/* tabs */
.adm-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs button, .adm-tabs a {
  height: 42px; padding: 0 0.9rem; border: 0; background: none; color: var(--fg-muted); font: inherit; font-size: var(--fs-sm); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
}
.adm-tabs button:hover, .adm-tabs a:hover { color: var(--fg); }
.adm-tabs button[aria-selected="true"], .adm-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.adm-tabs button:focus-visible { outline: none; box-shadow: var(--adm-focus); border-radius: 6px; }
.adm-tabs .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--bad); }
.adm-tabpanel[hidden] { display: none; }
.adm-subtabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--adm-surface-2); border-radius: var(--adm-radius); }
.adm-subtabs button { height: 30px; padding: 0 0.8rem; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; }
.adm-subtabs button[aria-selected="true"] { background: var(--adm-surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.adm-subtabs button:focus-visible { outline: none; box-shadow: var(--adm-focus); }

/* tables */
.adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.adm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.adm-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-weight: 600; padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--adm-surface); }
.adm-table td { padding: 0.7rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover td { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.adm-table td.num, .adm-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table td.actions { text-align: right; white-space: nowrap; width: 1%; }
.adm-table td.actions > * + * { margin-left: 0.35rem; }
.adm-table .cell-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.adm-table .cell-main .txt { min-width: 0; display: grid; gap: 0.1rem; }
/* The primary column is the one that flexes; it never collapses below 8rem (the wrapper scrolls instead). */
.adm-table td.cell-primary { min-width: 8rem; }
.adm-table .cell-main strong { overflow-wrap: break-word; max-width: 32ch; display: block; }
.adm-table .cell-main a strong { color: var(--fg); }
.adm-table .cell-main a:hover strong { color: var(--accent); }
.adm-table .sub { color: var(--fg-muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 36ch; }
.adm-thumb { width: 40px; height: 60px; border-radius: 5px; object-fit: cover; background: var(--adm-surface-2); flex: none; display: grid; place-items: center; color: var(--fg-faint); font-size: 11px; }
.adm-thumb.wide { width: 72px; height: 40px; }
.adm-thumb.round { width: 36px; height: 36px; border-radius: 999px; }
/* Card rows while the shell sidebar is a drawer: below 1024px the content area is too narrow for 5–6 columns. */
@media (max-width: 1023px) {
  .adm-table.responsive thead { display: none; }
  .adm-table.responsive tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
  .adm-table.responsive tbody tr:hover td { background: none; }
  .adm-table.responsive td { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0; border: 0; grid-column: 1 / -1; }
  .adm-table.responsive td[data-label]::before { content: attr(data-label); flex: 0 0 6.5rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
  .adm-table.responsive td.cell-primary { grid-column: 1; grid-row: 1; }
  .adm-table.responsive td.actions { grid-column: 2; grid-row: 1; text-align: right; justify-content: flex-end; white-space: nowrap; }
  .adm-table.responsive td.num { text-align: left; }
  .adm-table.responsive td > .adm-row { margin-top: 0; }
  .adm-table.responsive td.cell-primary { width: auto; min-width: 0; }
  .adm-table .cell-main strong { max-width: 100%; }
}

/* toolbar / filters */
.adm-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.adm-toolbar .adm-search { flex: 1 1 240px; display: flex; align-items: center; gap: 0.5rem; height: var(--adm-control-h); padding: 0 0.8rem; background: var(--adm-canvas); border: 1px solid var(--line-strong); border-radius: var(--adm-radius); min-width: 0; }
.adm-toolbar .adm-search:focus-within { border-color: var(--accent); box-shadow: var(--adm-focus); }
.adm-toolbar .adm-search svg { width: 16px; height: 16px; color: var(--fg-muted); flex: none; }
.adm-toolbar .adm-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: var(--fs-sm); outline: none; }
.adm-toolbar .adm-field { width: auto; }
.adm-toolbar .adm-field select { width: auto; min-width: 140px; }
.adm-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--adm-surface-2); border-radius: var(--adm-radius); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-seg::-webkit-scrollbar { display: none; }
.adm-seg button { height: 32px; padding: 0 0.75rem; border: 0; border-radius: 6px; background: none; color: var(--fg-muted); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; flex: none; }
.adm-seg button[aria-pressed="true"] { background: var(--adm-surface); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.adm-seg button:focus-visible { outline: none; box-shadow: var(--adm-focus); }

/* dropdown menu */
.adm-menu { position: relative; display: inline-block; }
.adm-menu-list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius); box-shadow: var(--shadow); padding: 0.3rem; z-index: 80; display: grid; }
.adm-menu-list[hidden] { display: none; }
.adm-menu-list button, .adm-menu-list a { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; padding: 0.5rem 0.65rem; border: 0; background: none; color: var(--fg); font: inherit; font-size: var(--fs-sm); border-radius: 6px; cursor: pointer; }
.adm-menu-list button:hover, .adm-menu-list a:hover, .adm-menu-list button:focus-visible { background: var(--adm-surface-2); outline: none; }
.adm-menu-list button.danger { color: var(--bad); }
.adm-menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 0.3rem 0; }
.adm-menu-list.left { right: auto; left: 0; }

/* dialogs */
dialog.adm-dialog { width: min(520px, calc(100vw - 2rem)); max-width: 100%; max-height: calc(100vh - 2rem); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); background: var(--adm-surface); color: var(--fg); padding: 0; box-shadow: var(--shadow); overflow: auto; }
dialog.adm-dialog.wide { width: min(760px, calc(100vw - 2rem)); }
dialog.adm-dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.adm-dialog-head { padding: 1.1rem 1.25rem 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.adm-dialog-head h2 { font-size: var(--fs-lg); }
.adm-dialog-head p { color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 0.3rem; }
.adm-dialog-body { padding: 1rem 1.25rem; display: grid; gap: 0.9rem; }
.adm-dialog-foot { padding: 0 1.25rem 1.1rem; display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.adm-dialog .adm-dialog-foot .btn { min-width: 96px; }

/* genre / multi select */
.adm-multiselect { display: grid; gap: 0.6rem; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 32px; }
.adm-chip { display: inline-flex; align-items: center; gap: 0.35rem; height: 30px; padding: 0 0.4rem 0 0.75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.adm-chip button { width: 20px; height: 20px; border-radius: 999px; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; font: inherit; }
.adm-chip button:hover, .adm-chip button:focus-visible { background: color-mix(in srgb, var(--accent) 25%, transparent); outline: none; }
.adm-chip button svg { width: 12px; height: 12px; }
.adm-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.3rem; max-height: 220px; overflow: auto; padding: 0.4rem; border: 1px solid var(--line); border-radius: var(--adm-radius); background: var(--adm-canvas); }
.adm-options label { display: flex; align-items: center; gap: 0.5rem; height: 34px; padding: 0 0.6rem; border-radius: 6px; font-size: var(--fs-sm); cursor: pointer; }
.adm-options label:hover { background: var(--adm-surface-2); }
.adm-options label:has(input:focus-visible) { box-shadow: var(--adm-focus); }
.adm-options label.hide { display: none; }
.adm-options input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.adm-options .none { grid-column: 1 / -1; color: var(--fg-faint); font-size: var(--fs-sm); padding: 0.5rem; }

/* media previews */
.adm-media { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.adm-media-item { display: grid; gap: 0.6rem; grid-template-rows: 1fr auto auto; align-items: end; }
.adm-preview { position: relative; border-radius: var(--adm-radius); overflow: hidden; background: var(--adm-surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--fg-faint); font-size: var(--fs-xs); }
.adm-preview.poster { aspect-ratio: 2 / 3; max-width: 200px; }
.adm-preview.backdrop { aspect-ratio: 16 / 9; }
.adm-preview.still { aspect-ratio: 16 / 9; width: 96px; }
.adm-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-preview.is-broken img { display: none; }
.adm-preview .ph { display: grid; place-items: center; gap: 0.3rem; text-align: center; padding: 1rem; }
.adm-preview .ph svg { width: 24px; height: 24px; }
.adm-thumb .ph, .adm-title-head .adm-preview .ph, .adm-preview.still .ph { padding: 0; }
.adm-thumb .ph span, .adm-title-head .adm-preview .ph span, .adm-preview.still .ph span { display: none; }
.adm-thumb .ph svg, .adm-preview.still .ph svg { width: 16px; height: 16px; }
.adm-help svg { width: 14px; height: 14px; vertical-align: -2px; }

/* seasons & episodes */
.adm-season { background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); overflow: hidden; }
.adm-season-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; }
.adm-season-head:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.adm-season-head .chev { width: 18px; height: 18px; color: var(--fg-muted); transition: transform 0.15s; flex: none; }
.adm-season[open] .adm-season-head .chev, .adm-season.is-open .adm-season-head .chev { transform: rotate(90deg); }
.adm-season-head h3 { font-size: var(--fs-md); font-weight: 600; }
.adm-season-head .meta { color: var(--fg-muted); font-size: var(--fs-xs); }
.adm-season-head .acts { margin-left: auto; display: flex; gap: 0.35rem; }
.adm-season-body { border-top: 1px solid var(--line); display: grid; gap: 1rem; padding: 1rem; }
.adm-season-body[hidden] { display: none; }
.adm-episodes { display: grid; gap: 0.5rem; }
.adm-episode { border: 1px solid var(--line); border-radius: var(--adm-radius); background: var(--adm-canvas); }
.adm-episode-row { display: grid; grid-template-columns: auto 96px minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0.75rem; }
.adm-episode-row .num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-muted); width: 2.5ch; text-align: right; }
.adm-episode-row .txt { min-width: 0; display: grid; gap: 0.15rem; }
.adm-episode-row .txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-episode-row .txt .sub { color: var(--fg-muted); font-size: var(--fs-xs); }
.adm-episode-row .acts { display: flex; gap: 0.25rem; }
.adm-episode-edit { border-top: 1px solid var(--line); padding: 1rem 0.75rem; display: grid; gap: 1rem; }
.adm-episode-edit[hidden] { display: none; }
@media (max-width: 640px) {
  .adm-episode-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .adm-episode-row .adm-preview.still { display: none; }
}

/* save bar */
.adm-savebar { position: fixed; left: var(--adm-sidebar-w); right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem clamp(1rem, 2.5vw, 2rem); background: color-mix(in srgb, var(--adm-surface) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.adm-savebar .state { font-size: var(--fs-sm); color: var(--fg-muted); display: flex; align-items: center; gap: 0.45rem; }
.adm-savebar .state .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--fg-faint); }
.adm-savebar.is-dirty .state .dot { background: var(--accent); }
.adm-savebar .spacer { flex: 1; }
@media (max-width: 1023px) { .adm-savebar { left: 0; } }

/* misc */
.adm-empty { padding: 3rem 1rem; text-align: center; color: var(--fg-muted); display: grid; gap: 0.5rem; justify-items: center; }
.adm-empty svg { width: 36px; height: 36px; color: var(--fg-faint); }
.adm-empty h3 { color: var(--fg); font-size: var(--fs-md); }
.adm-empty p { font-size: var(--fs-sm); max-width: 44ch; }
.adm-skeleton { border-radius: var(--adm-radius); background: linear-gradient(90deg, var(--adm-surface-2) 25%, color-mix(in srgb, var(--adm-surface-2) 60%, var(--adm-surface)) 50%, var(--adm-surface-2) 75%); background-size: 200% 100%; animation: adm-shimmer 1.2s infinite; min-height: 48px; }
@keyframes adm-shimmer { to { background-position: -200% 0; } }
/* Key/value rows. The label column takes its natural width but never more than 40% of the row; the value column
   gets the rest. UA margins on <dd> (40px) are reset — they used to eat the value column. Values wrap at word
   boundaries; only a token longer than the whole column (an id, a URL) may break mid-word. */
.adm-kv { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 0.45rem 1.25rem; align-items: baseline; font-size: var(--fs-sm); margin: 0; }
.adm-kv dt { color: var(--fg-muted); margin: 0; min-width: 0; overflow-wrap: break-word; }
.adm-kv dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.adm-kv dd > .adm-badge { vertical-align: middle; }
.adm-ext { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; color: var(--accent); }
.adm-ext svg { width: 12px; height: 12px; flex: none; }
.adm-code { font-family: var(--font-mono); font-size: 0.78rem; background: var(--adm-canvas); border: 1px solid var(--line); border-radius: 6px; padding: 0.6rem 0.75rem; overflow: auto; max-height: 240px; white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--fg-muted); }
.adm-pager .pages { display: flex; gap: 0.25rem; }
.adm-pager a, .adm-pager span.cur { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 0.5rem; border-radius: 6px; color: var(--fg-muted); }
.adm-pager a:hover { background: var(--adm-surface-2); color: var(--fg); }
.adm-pager span.cur { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.adm-result { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; padding: 0.9rem; background: var(--adm-surface); border: 1px solid var(--line); border-radius: var(--adm-radius-lg); }
.adm-result .adm-preview.poster { max-width: 96px; }
.adm-result .txt { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.adm-result .txt p { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.adm-results { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.adm-settings-nav { position: sticky; top: calc(var(--adm-topbar-h) + 1rem); display: grid; gap: 2px; }
@media (max-width: 900px) {
  .adm-settings-nav { position: static; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); }
  .adm-settings-nav::-webkit-scrollbar { display: none; }
  .adm-settings-nav a { white-space: nowrap; flex: none; }
}
.adm-settings-nav a { padding: 0.5rem 0.65rem; border-radius: var(--adm-radius); color: var(--fg-muted); font-size: var(--fs-sm); }
.adm-settings-nav a:hover { background: var(--adm-surface-2); color: var(--fg); }
.adm-settings-nav a.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
/* Compact rows: tag + field name + value + action. The value asks for at least 8rem; when the row cannot give it
   that, it wraps onto its own line (flex-wrap) instead of being squeezed into a one-character-wide column. */
.adm-inline-list { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.adm-inline-list li { display: flex; align-items: center; gap: 0.35rem 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--adm-radius); font-size: var(--fs-sm); min-width: 0; }
.adm-inline-list li > * { min-width: 0; }
.adm-inline-list li > strong { white-space: nowrap; }
.adm-inline-list li .val { flex: 1 1 8rem; overflow-wrap: break-word; }
.adm-inline-list li .btn { margin-left: auto; }
.adm-inline-list code { font-family: var(--font-mono); font-size: 0.75rem; background: var(--adm-surface-2); padding: 0.1rem 0.4rem; border-radius: 4px; }
.adm-sticky-head { position: sticky; top: var(--adm-topbar-h); z-index: 40; background: var(--adm-canvas); padding-bottom: 0.5rem; }
.adm-title-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; min-width: 0; }
.adm-title-head > * { min-width: 0; }
.adm-title-head .adm-preview.poster { width: 56px; max-width: 56px; }
.adm-title-head .meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; color: var(--fg-muted); font-size: var(--fs-sm); margin-top: 0.3rem; }
.adm-title-head .meta code { font-family: var(--font-mono); font-size: 0.75rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }