/* Admin: a calm back office in English. Sidebar + top bar shell, then shared pieces (page header, panels,
   tables, filters, forms, pills, toasts) that every admin page uses. Built on the site tokens, so it follows
   light and dark mode. Logical properties throughout. */

.admin {
  --sidebar: 248px;
  --sidebar-collapsed: 68px;
  --topbar: 60px;
  --admin-max: 1240px;
  --warn: #B45309;
  --warn-tint: color-mix(in srgb, #D97706 14%, var(--surface));
  --bad-tint: color-mix(in srgb, var(--loss) 12%, var(--surface));
  --info-tint: color-mix(in srgb, var(--promo) 12%, var(--surface));
  font-size: 0.9375rem;
  font-family: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .admin { --warn: #F4B35E; } }
:root[data-theme="dark"] .admin { --warn: #F4B35E; }

.admin-icon { inline-size: 20px; block-size: 20px; flex: none; }
.admin [lang="ar"] { font-family: var(--font-arabic); }

/* ---------- Shell ---------- */
.admin-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-block-size: 100dvh; }
.admin-shell.is-collapsed { grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr); }

.admin-sidebar {
  position: sticky; inset-block-start: 0; block-size: 100dvh; display: flex; flex-direction: column;
  background: var(--surface); border-inline-end: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; z-index: 30;
}
.admin-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); block-size: var(--topbar); padding-inline: var(--space-4); border-block-end: 1px solid var(--line); flex: none; }
.admin-brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; font-weight: 800; letter-spacing: -0.02em; }
.admin-brand img { border-radius: 8px; }
.admin-brand__name span { color: var(--flag-red); }
.admin-brand--large { font-size: var(--step-2); justify-content: center; margin-block-end: var(--space-5); }
.admin-iconbutton.admin-sidebar__close { display: none; }
.admin-sidebar__nav { flex: 1; padding: var(--space-2) var(--space-3) var(--space-4); }
.admin-sidebar__nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.admin-sidebar__group { margin: var(--space-4) var(--space-3) var(--space-1); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.admin-sidebar__link {
  display: flex; align-items: center; gap: var(--space-3); min-block-size: 40px; padding-inline: var(--space-3);
  border-radius: var(--radius-m); color: var(--ink-2); text-decoration: none; font-weight: 550;
}
.admin-sidebar__link:hover { background: var(--surface-2); color: var(--ink); }
.admin-sidebar__link.is-active { background: var(--atlas-tint); color: var(--atlas-green); font-weight: 700; }
.admin-sidebar__label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar__badge { min-inline-size: 22px; padding: 0 6px; border-radius: 999px; background: var(--bad-tint); color: var(--loss); font-size: 0.75rem; font-weight: 800; text-align: center; line-height: 20px; }
.admin-sidebar__collapse {
  display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) var(--space-3) var(--space-3); min-block-size: 40px; padding-inline: var(--space-3);
  border: 0; border-radius: var(--radius-m); background: none; color: var(--ink-2); cursor: pointer; text-align: start;
}
.admin-sidebar__collapse:hover { background: var(--surface-2); color: var(--ink); }

.is-collapsed .admin-sidebar__label, .is-collapsed .admin-sidebar__group, .is-collapsed .admin-brand__name { display: none; }
.is-collapsed .admin-sidebar__head { justify-content: center; padding-inline: 0; }
.is-collapsed .admin-sidebar__link, .is-collapsed .admin-sidebar__collapse { justify-content: center; padding-inline: 0; position: relative; }
.is-collapsed .admin-sidebar__badge { position: absolute; inset-block-start: 2px; inset-inline-end: 4px; min-inline-size: 16px; line-height: 16px; font-size: 0.625rem; padding: 0 4px; }
.is-collapsed .admin-sidebar__collapse .admin-icon { transform: scaleX(-1); }

.admin-main { min-inline-size: 0; display: flex; flex-direction: column; }
.admin-topbar {
  position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-3);
  block-size: var(--topbar); padding-inline: var(--space-5); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-block-end: 1px solid var(--line);
}
.admin-iconbutton.admin-topbar__menu { display: none; }
.admin-crumbs { flex: 1; min-inline-size: 0; }
.admin-crumbs ol { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.admin-crumbs li { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.admin-crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--ink-2); opacity: 0.5; }
.admin-crumbs a { text-decoration: none; }
.admin-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.admin-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .admin-crumbs li:not(:last-child) { display: none; }
  .admin-crumbs li + li::before { content: none; }
}
.admin-topbar__search {
  display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 240px; min-block-size: 40px; padding-inline: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.admin-topbar__search span { flex: 1; text-align: start; }
.admin-topbar__search:hover { border-color: var(--ink-2); }
.admin kbd { padding: 1px 6px; border: 1px solid var(--line); border-block-end-width: 2px; border-radius: 5px; background: var(--surface-2); font: 600 0.6875rem/1.4 var(--font-ui); color: var(--ink-2); }
.admin-iconbutton {
  display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none;
  border: 0; border-radius: var(--radius-m); background: none; color: var(--ink-2); cursor: pointer; text-decoration: none;
}
.admin-iconbutton:hover { background: var(--surface-2); color: var(--ink); }

.admin-usermenu { position: relative; }
.admin-usermenu summary { list-style: none; cursor: pointer; border-radius: 999px; display: grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; }
.admin-usermenu summary::-webkit-details-marker { display: none; }
.admin-usermenu__panel {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); min-inline-size: 240px; display: grid; gap: 2px; padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-pop);
}
.admin-usermenu__who { padding: var(--space-2) var(--space-3) var(--space-3); border-block-end: 1px solid var(--line); margin-block-end: var(--space-1); overflow-wrap: anywhere; }
.admin-usermenu__panel a, .admin-usermenu__signout {
  display: flex; align-items: center; min-block-size: 40px; padding-inline: var(--space-3); border-radius: var(--radius-m);
  text-decoration: none; background: none; border: 0; inline-size: 100%; cursor: pointer; text-align: start;
}
.admin-usermenu__panel a:hover, .admin-usermenu__signout:hover { background: var(--surface-2); }
.admin-usermenu__panel form { margin: 0; }
.admin-usermenu__signout { color: var(--loss); }

.admin-avatar {
  display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; flex: none; border-radius: 999px;
  background: var(--brand); color: #FFFFFF; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em;
}
.admin-avatar--small { inline-size: 28px; block-size: 28px; font-size: 0.6875rem; }
.admin-avatar--large { inline-size: 96px; block-size: 96px; font-size: var(--step-3); }

.admin-content { inline-size: 100%; max-inline-size: var(--admin-max); margin-inline: auto; padding: var(--space-5) var(--space-5) var(--space-8); }
.admin-content:focus { outline: none; }
.admin-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); z-index: 25; }

/* Small screens: the sidebar becomes a drawer. */
@media (max-width: 960px) {
  .admin-shell, .admin-shell.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .admin-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(300px, 86vw); transform: translateX(-105%); transition: transform 0.2s ease; box-shadow: var(--shadow-pop); visibility: hidden; }
  .is-open .admin-sidebar { transform: none; visibility: visible; }
  .admin-iconbutton.admin-sidebar__close { display: inline-grid; }
  .admin-sidebar__collapse { display: none; }
  .is-collapsed .admin-sidebar__label, .is-collapsed .admin-sidebar__group, .is-collapsed .admin-brand__name { display: revert; }
  .is-collapsed .admin-sidebar__link { justify-content: flex-start; padding-inline: var(--space-3); }
  .is-collapsed .admin-sidebar__head { justify-content: space-between; padding-inline: var(--space-4); }
  .is-collapsed .admin-sidebar__badge { position: static; }
  .admin-topbar { padding-inline: var(--space-2); gap: var(--space-1); }
  .admin-iconbutton.admin-topbar__menu { display: inline-grid; }
  .admin-topbar__search { min-inline-size: 0; inline-size: 40px; padding: 0; justify-content: center; border: 0; background: none; }
  .admin-topbar__search span, .admin-topbar__search kbd { display: none; }
  .admin-content { padding: var(--space-4) var(--gutter) var(--space-8); }
}
@media (prefers-reduced-motion: reduce) { .admin-sidebar { transition: none; } }

/* Signed out (sign-in, password reset). */
.admin-auth { min-block-size: 100dvh; display: grid; place-content: center; padding: var(--space-6) var(--gutter); }
.auth-card { inline-size: min(420px, calc(100vw - 2 * var(--gutter))); margin-inline: auto; display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }

/* ---------- Page header ---------- */
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); }
.admin-head > div:first-child { min-inline-size: 0; flex: 1 1 320px; }
.admin .page-title { font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.admin .page-intro { margin-block-start: var(--space-1); color: var(--ink-2); max-inline-size: 72ch; }
.admin-content > .page-intro { margin-block-end: var(--space-5); } /* older pages without an .admin-head */
.admin-who { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.admin-who--large { gap: var(--space-4); }
.admin-meta, .meta { color: var(--ink-2); font-size: var(--step--1); }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.admin-actions form { margin: 0; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 40px; padding-inline: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--step--1); line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.12s, border-color 0.12s;
}
.button:hover { border-color: var(--ink-2); }
.button .admin-icon { inline-size: 18px; block-size: 18px; }
.button--primary { background: var(--atlas-green); border-color: var(--atlas-green); color: var(--on-status); }
.button--primary:hover { background: color-mix(in srgb, var(--atlas-green) 88%, #000); border-color: transparent; }
.button--small { min-block-size: 34px; padding-inline: var(--space-3); font-size: 0.8125rem; }
.button--danger { color: var(--loss); }
.button--danger:hover { border-color: var(--loss); background: var(--bad-tint); }
.button--ghost { border-color: transparent; background: none; color: var(--ink-2); }
.button.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; }
form.button_to { display: inline; margin: 0; }

/* ---------- Panels, stats, lists ---------- */
.admin-panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-block-end: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); min-inline-size: 0;
}
@media (max-width: 640px) { .admin-panel { padding-inline: var(--space-4); } .admin-panel:not(.admin-panel--flush) > .admin-table-wrap { margin-inline: calc(-1 * var(--space-4)); } }
.admin-panel h2 { font-size: var(--step-1); letter-spacing: -0.01em; }
.admin-panel--flush { padding: 0; overflow: hidden; gap: 0; }
.admin-panel--alert { border-inline-start: 4px solid var(--loss); }
.admin-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.admin-panel__head a { font-size: var(--step--1); font-weight: 600; color: var(--atlas-green); text-decoration: none; }
.admin-columns { display: grid; gap: var(--space-4); margin-block-end: var(--space-4); }
@media (min-width: 1000px) {
  .admin-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .admin-columns--form { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
}
.admin-columns > .admin-panel, .admin-columns > div > .admin-panel:last-child, .admin-columns > aside > .admin-panel:last-child { margin-block-end: 0; }
.admin-grid { display: grid; gap: var(--space-4); margin-block-start: var(--space-5); }
@media (min-width: 900px) { .admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.admin-grid-2 { display: grid; gap: var(--space-4) var(--space-3); }
@media (min-width: 640px) { .admin-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--space-3); margin-block-end: var(--space-4); }
.admin-stat {
  position: relative; display: grid; gap: 2px; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card); text-decoration: none; overflow: hidden;
}
.admin-stat:hover { border-color: var(--ink-2); }
.admin-stat::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px; background: var(--line); }
.admin-stat--good::before { background: var(--win); }
.admin-stat--warn::before { background: #D97706; }
.admin-stat--bad::before { background: var(--loss); }
.admin-stat__label { font-size: var(--step--1); color: var(--ink-2); font-weight: 600; }
.admin-stat__value { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.admin-stat__note { font-size: var(--step--1); color: var(--ink-2); }
.admin-stat--bad .admin-stat__note { color: var(--loss); }
.admin-spark { position: absolute; inset-inline-end: var(--space-4); inset-block-start: var(--space-4); display: flex; align-items: flex-end; gap: 2px; block-size: 32px; }
.admin-spark i { inline-size: 5px; block-size: var(--h); background: color-mix(in srgb, var(--atlas-green) 55%, var(--surface)); border-radius: 2px; }

.admin-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.admin-counts div { padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.admin-counts dt { font-size: var(--step--1); color: var(--ink-2); font-weight: 600; }
.admin-counts dd { margin: 0; font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em; }
.admin-counts--alert { box-shadow: inset 4px 0 0 var(--loss) !important; }

.admin-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; }
.admin-figures dt { font-size: var(--step--1); color: var(--ink-2); }
.admin-figures dd { margin: 0; font-size: var(--step-2); font-weight: 800; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.admin-delta { font-size: 0.75rem; font-weight: 700; color: var(--win); }

.admin-list { display: grid; margin: 0 calc(-1 * var(--space-2)); padding: 0; list-style: none; }
.admin-list__row { display: flex; align-items: center; gap: var(--space-3); min-block-size: 44px; padding: var(--space-2); border-radius: var(--radius-m); text-decoration: none; }
.admin-list__row > span:first-child { flex: 1; min-inline-size: 0; }
a.admin-list__row:hover { background: var(--surface-2); }
.admin-list__row .admin-icon { color: var(--ink-2); inline-size: 16px; }
.admin-list--compact .admin-list__row { min-block-size: 36px; border-block-end: 1px solid var(--line); border-radius: 0; font-size: var(--step--1); }
.admin-list--compact li:last-child .admin-list__row { border-block-end: 0; }
.admin-health { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }

.admin-feed { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.admin-feed li { display: flex; gap: var(--space-3); align-items: flex-start; }
.admin-feed p { overflow-wrap: anywhere; font-size: var(--step--1); }
.admin-feed--full { gap: 0; }
.admin-feed--full li { padding: var(--space-3) var(--space-5); border-block-end: 1px solid var(--line); }
.admin-feed--full li:last-child { border-block-end: 0; }
.admin-feed--full li > div { display: grid; gap: var(--space-1); min-inline-size: 0; }
.admin-changes summary { cursor: pointer; font-size: var(--step--1); color: var(--atlas-green); font-weight: 600; }
.admin-changes .admin-table-wrap, .admin-changes .admin-table { margin-block-start: var(--space-2); }

.admin-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.admin-shortcut { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); text-decoration: none; }
.admin-shortcut:hover { border-color: var(--atlas-green); background: var(--atlas-tint); }
.admin-shortcut .admin-icon { color: var(--atlas-green); margin-block-start: 2px; }
.admin-shortcut span { display: grid; gap: 2px; }
.admin-shortcut small { color: var(--ink-2); }

.admin-empty { display: grid; gap: var(--space-2); justify-items: center; padding: var(--space-6) var(--space-4); text-align: center; }
.admin-empty__title { font-weight: 700; }
.admin-empty__text { color: var(--ink-2); max-inline-size: 48ch; }

.admin-callout { padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); font-size: var(--step--1); margin-block-end: var(--space-4); }
.admin-panel .admin-callout { margin-block-end: 0; }
.admin-callout ul { margin: var(--space-1) 0 0; padding-inline-start: var(--space-5); }
.admin-callout--bad { background: var(--bad-tint); color: var(--loss); }
.admin-callout--warn { background: var(--warn-tint); color: var(--warn); }
.admin-callout--info { background: var(--info-tint); color: var(--promo); }

/* ---------- Tables ---------- */
.admin-table-wrap { overflow-x: auto; }
.admin-table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); }
.admin-table th, .admin-table td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); text-align: start; vertical-align: middle; }
.admin-table thead th { background: var(--surface-2); color: var(--ink-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.admin-table tbody tr:last-child td { border-block-end: 0; }
.admin-table--hover tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.admin-table--compact th, .admin-table--compact td { padding: var(--space-1) var(--space-2); }
.admin-table--syncs td { vertical-align: top; }
.admin-table th.num, .admin-table td.num { text-align: end; }
.admin-table__group th { background: var(--surface-2); font-weight: 800; }
.admin-table__detail td { padding-block-start: 0; color: var(--ink-2); font-size: 0.75rem; border-block-start: 0; }
.admin-table__actions { text-align: end; white-space: nowrap; }
.admin-table__actions > * + * { margin-inline-start: var(--space-1); }
.admin-table tr.is-muted td { color: var(--ink-2); }
.admin-panel:not(.admin-panel--flush) > .admin-table-wrap { margin-inline: calc(-1 * var(--space-5)); }
.admin-panel:not(.admin-panel--flush) > .admin-table-wrap .admin-table :is(th, td):first-child { padding-inline-start: var(--space-5); }
.admin-panel:not(.admin-panel--flush) > .admin-table-wrap .admin-table :is(th, td):last-child { padding-inline-end: var(--space-5); }
.admin-sort { color: inherit; text-decoration: none; }
.admin-sort:hover, .admin-sort.is-sorted { color: var(--ink); }
.admin-strong-link { font-weight: 650; text-decoration: none; }
.admin-strong-link:hover { text-decoration: underline; color: var(--atlas-green); }
.admin-crest { inline-size: 24px; block-size: 24px; object-fit: contain; flex: none; }
.admin-crest--empty { display: inline-block; border-radius: 6px; background: var(--surface-3); }
.admin-crest--large { inline-size: 96px; block-size: 96px; border-radius: var(--radius-l); }
.admin-who--large .admin-crest, .admin-photo { inline-size: 48px; block-size: 48px; border-radius: var(--radius-m); object-fit: cover; }
.admin-who--large .admin-crest { object-fit: contain; }

.admin-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block: var(--space-3) var(--space-5); font-size: var(--step--1); }
.admin-pagination__links { display: flex; align-items: center; gap: var(--space-2); }
.admin-pagination__page { color: var(--ink-2); }

/* ---------- Filters and tabs ---------- */
.admin-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-block-end: var(--space-4); }
.admin-filters label { display: grid; gap: 4px; font-size: 0.75rem; font-weight: 700; color: var(--ink-2); min-inline-size: 0; }
.admin-filters__search { flex: 1 1 240px; }
.admin-filters input:not([type="checkbox"]):not([type="submit"]), .admin-filters select {
  inline-size: 100%; min-block-size: 40px; padding-inline: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); color: var(--ink); font-size: var(--step--1); font-weight: 400;
}
.admin-filters select { max-inline-size: 260px; }
.admin-filters label.admin-filters__check { display: flex; align-items: center; gap: var(--space-2); min-block-size: 40px; color: var(--ink); font-weight: 500; font-size: var(--step--1); }
.admin-filters__check input { inline-size: 18px; block-size: 18px; accent-color: var(--atlas-green); }
.admin-filters .pill a { text-decoration: none; margin-inline-start: 4px; }
@media (max-width: 640px) {
  .admin-filters > label:not(.admin-filters__check) { flex: 1 1 100%; }
  .admin-filters select { max-inline-size: none; }
}
.admin-tabs { display: flex; gap: var(--space-1); margin-block-end: var(--space-3); overflow-x: auto; scrollbar-width: none; border-block-end: 1px solid var(--line); }
.admin-tabs a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 44px; padding-inline: var(--space-3); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--step--1); border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap; }
.admin-tabs a:hover { color: var(--ink); }
.admin-tabs a.is-active { color: var(--atlas-green); border-color: var(--atlas-green); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-4); }
.admin-form { display: grid; gap: 0; max-inline-size: 760px; }
.admin-form--wide { max-inline-size: none; }
.admin-form > :is(.field, label, .admin-actions) { margin-block-end: var(--space-3); } /* forms laid out without panels */
.field { display: grid; gap: 6px; align-content: start; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.field label, .field legend, .field__label { font-weight: 650; font-size: var(--step--1); padding: 0; }
.field legend { margin-block-end: 6px; }
.admin .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .admin .field select, .admin .field textarea,
.admin-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]), .admin-form select, .admin-form textarea {
  inline-size: 100%; min-block-size: 42px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); color: var(--ink);
}
.admin .field :is(input, select, textarea):focus, .admin-form :is(input, select, textarea):focus { outline: 2px solid color-mix(in srgb, var(--atlas-green) 45%, transparent); outline-offset: 0; border-color: var(--atlas-green); }
.admin-form input:disabled { background: var(--surface-2); color: var(--ink-2); }
.admin-form textarea { font-family: ui-monospace, Menlo, monospace; font-size: var(--step--1); }
.field__hint { font-size: 0.8125rem; color: var(--ink-2); }
.field__error { font-size: 0.8125rem; color: var(--loss); font-weight: 600; }
.field--invalid :is(input, select, textarea) { border-color: var(--loss) !important; }
.admin-form .admin-panel { gap: var(--space-4); }

.admin-choices { display: grid; gap: var(--space-2); }
.admin-choice, .admin-toggle { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); cursor: pointer; font-weight: 400; }
.admin-choice:has(input:checked) { border-color: var(--atlas-green); background: var(--atlas-tint); }
.admin-choice input, .admin-toggle input { inline-size: 20px; block-size: 20px; margin-block-start: 1px; accent-color: var(--atlas-green); flex: none; }
.admin-choice span, .admin-toggle span { display: grid; gap: 2px; }
.admin-choice small, .admin-toggle small { color: var(--ink-2); font-size: 0.8125rem; }

.admin-savebar {
  position: sticky; inset-block-end: var(--space-3); z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-block-start: var(--space-2); padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-pop);
}
.admin-savebar .admin-meta { margin-inline-start: auto; }
.admin-preview { display: grid; place-items: center; padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius-m); }
.admin-preview img { max-block-size: 120px; inline-size: auto; object-fit: contain; border-radius: var(--radius-s); }

.admin-autocomplete { position: relative; }
.admin-autocomplete__list {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 2px); z-index: 15; margin: 0; padding: var(--space-1); list-style: none;
  max-block-size: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop);
}
.admin-autocomplete__list li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); cursor: pointer; font-size: var(--step--1); }
.admin-autocomplete__list li:hover, .admin-autocomplete__list li[aria-selected="true"] { background: var(--atlas-tint); color: var(--atlas-green); }

.admin-roles { display: grid; gap: var(--space-3); margin: 0; }
.admin-roles div { display: flex; gap: var(--space-3); align-items: baseline; }
.admin-roles dt { flex: none; inline-size: 80px; }
.admin-roles dd { margin: 0; color: var(--ink-2); }
.admin-credentials dl { display: grid; gap: var(--space-3); margin: 0; }
.admin-credentials dt { font-size: var(--step--1); color: var(--ink-2); font-weight: 600; }
.admin-credentials dd { margin: 0; overflow-wrap: anywhere; }
.admin-credentials code { font-size: var(--step-0); }
.admin-credentials .admin-credentials__password { display: inline-block; padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-m); font-size: var(--step-2); letter-spacing: 0.04em; user-select: all; }

/* Match texts */
.admin-stories { margin: 0; padding: 0; list-style: none; }
.admin-stories li { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--line); }
.admin-stories li:last-child { border-block-end: 0; }
.admin-stories li.is-muted .admin-stories__text { opacity: 0.55; }
.admin-stories__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.admin-stories__text { max-inline-size: 80ch; font-size: var(--step--1); }

/* ---------- Pills, statuses ---------- */
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; line-height: 1.6; }
.pill--good { background: var(--atlas-tint); color: var(--atlas-green); }
.pill--bad { background: var(--bad-tint); color: var(--loss); }
.pill--warn { background: var(--warn-tint); color: var(--warn); }
.pill--info { background: var(--info-tint); color: var(--promo); }
.pill--muted { background: var(--surface-2); color: var(--ink-2); }
.status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--surface-3); }
.status--succeeded { background: var(--atlas-tint); color: var(--atlas-green); }
.status--failed { background: var(--bad-tint); color: var(--loss); }
.text-bad { color: var(--loss); }
.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }

/* ---------- Older admin pages (Moroccans, rankings, errors, sponsors) ---------- */
.admin-search { display: flex; gap: var(--space-2); }
.admin-search input { flex: 1; min-inline-size: 0; min-block-size: 42px; padding-inline: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.admin-results { display: grid; margin: 0; padding: 0; list-style: none; }
.admin-results li { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
.admin-inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.admin-inline-form select, .admin-inline-form input[type="url"], .admin-inline-form input[type="text"] { min-block-size: 38px; padding-inline: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); max-inline-size: 100%; }
.admin-inline-form input[type="url"] { min-inline-size: min(260px, 100%); flex: 1; }
.admin-ranking { columns: 2; font-size: var(--step--1); }
@media (max-width: 640px) { .admin-ranking { columns: 1; } }
.admin-failures { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.admin-failures pre { white-space: pre-wrap; font-size: 0.75rem; max-block-size: 360px; overflow: auto; background: var(--surface-2); padding: var(--space-3); border-radius: var(--radius-m); }
.admin-failures dd { margin: 0; overflow-wrap: anywhere; }
.admin code { font-size: 0.85em; overflow-wrap: anywhere; }

/* ---------- Toasts ---------- */
.admin-toasts { position: fixed; inset-block-end: var(--space-4); inset-inline-end: var(--space-4); z-index: 60; display: grid; gap: var(--space-2); inline-size: min(420px, calc(100vw - 2 * var(--space-4))); }
.admin-toasts:empty { display: none; }
.admin-toast {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--win); border-radius: var(--radius-m); box-shadow: var(--shadow-pop);
  animation: admin-toast-in 0.18s ease-out;
}
.admin-toast p { flex: 1; padding-block: 2px; font-size: var(--step--1); }
.admin-toast > .admin-icon { color: var(--win); margin-block-start: 2px; }
.admin-toast .admin-iconbutton { inline-size: 32px; block-size: 32px; margin: -4px; }
.admin-toast--alert { border-inline-start-color: var(--loss); }
.admin-toast--alert > .admin-icon { color: var(--loss); }
@keyframes admin-toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .admin-toast { animation: none; } }

/* ---------- Command palette ---------- */
.admin-palette { inline-size: min(640px, calc(100vw - 2 * var(--gutter))); max-inline-size: none; max-block-size: min(560px, 80dvh); margin-block-start: 10dvh; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); overflow: hidden; }
.admin-palette::backdrop { background: rgb(0 0 0 / 0.45); }
.admin-palette__box { display: flex; flex-direction: column; max-block-size: min(560px, 80dvh); }
.admin-palette__field { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-block-end: 1px solid var(--line); flex: none; }
.admin-palette__field .admin-icon { color: var(--ink-2); }
.admin-palette__field input { flex: 1; min-inline-size: 0; min-block-size: 44px; border: 0; background: none; font-size: var(--step-1); }
.admin-palette__field input:focus { outline: none; }
.admin-palette__field input::-webkit-search-cancel-button { display: none; }
.admin-palette__results { flex: 1; margin: 0; padding: var(--space-2); list-style: none; overflow-y: auto; }
.admin-palette__group { padding: var(--space-3) var(--space-3) var(--space-1); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.admin-palette__results [role="option"] a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-block-size: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); text-decoration: none; }
.admin-palette__results [role="option"] span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-palette__results [role="option"] small { color: var(--ink-2); white-space: nowrap; }
.admin-palette__results [aria-selected="true"] a { background: var(--atlas-tint); color: var(--atlas-green); }
.admin-palette__empty { padding: var(--space-5); text-align: center; color: var(--ink-2); }
.admin-palette__hint { padding: var(--space-2) var(--space-4); border-block-start: 1px solid var(--line); font-size: 0.75rem; color: var(--ink-2); flex: none; }
@media (max-width: 640px) { .admin-palette__hint, .admin-palette__field kbd { display: none; } }
.admin-locked { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.admin-locked li { display: inline-flex; align-items: center; gap: var(--space-2); }
.admin-locked form { margin: 0; }