/* Design tokens + shared components for the /manage/* admin UI (base.html).
   Extracted from an inline <style> block so it's cached across page loads
   instead of re-sent on every response. */
:root {
  --bg:#111214; --panel:#17181b; --panel-2:#0d0e10; --line:#26272b; --ink:#e7e9ee; --mut:#8b8f98;
  --acc:#3ecf8e; --acc-ink:#0d1f16; --info:#4f8cff; --danger:#ff5d5d;
  --ok:#3ecf8e; --warn:#f1c453;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
  --shimmer: linear-gradient(90deg, #17181b 0%, #202127 50%, #17181b 100%);
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--ink); }
input, select, button { font:inherit; }
input, select { background:var(--panel-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px 10px; }
button { background:var(--acc); color:var(--acc-ink); border:0; border-radius:8px; padding:8px 14px; cursor:pointer; font-weight:600; }
button.del, button.del-sm { background:transparent; color:var(--danger); padding:2px 8px; font-weight:400; }
button:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
a.lnk:focus-visible, button:focus-visible { outline-offset:3px; }
form { display:inline; }
.muted { color:var(--mut); }

/* ---------- App shell: sidebar + topbar ---------- */
.shell { display:flex; min-height:100vh; }
.sidebar {
  width:240px; flex-shrink:0; background:var(--panel-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; transition:width .18s ease;
}
.shell.collapsed .sidebar { width:64px; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid var(--line); }
.sidebar-brand .brand-name { font-weight:700; white-space:nowrap; overflow:hidden; }
.sidebar-collapse {
  margin-left:auto; background:transparent; color:var(--mut); border:1px solid var(--line);
  border-radius:6px; padding:2px 8px; font-size:12px;
}
.shell.collapsed .brand-name,
.shell.collapsed .nav-label,
.shell.collapsed .sidebar-group-label,
.shell.collapsed .sidebar-logout span { display:none; }
.sidebar-nav { flex:1; overflow-y:auto; padding:10px 0; }
.sidebar-group { margin-top:14px; }
.sidebar-group-label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); padding:6px 16px; }
.nav-link {
  display:flex; align-items:center; gap:10px; padding:9px 16px; color:var(--mut); text-decoration:none;
  font-size:14px; border-left:2px solid transparent; white-space:nowrap; overflow:hidden;
}
.nav-link:hover { color:var(--ink); background:rgba(255,255,255,.03); }
.nav-link.active { color:var(--ink); background:rgba(62,207,142,.1); border-left-color:var(--acc); }
.nav-icon { width:18px; text-align:center; flex-shrink:0; }
.sidebar-logout {
  display:flex; align-items:center; gap:10px; padding:14px 16px; color:var(--danger); text-decoration:none;
  border-top:1px solid var(--line); font-size:14px;
}
.page { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  display:flex; align-items:center; gap:12px; padding:10px 20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg); z-index:5;
}
.topbar-menu { display:none; background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:4px 10px; }
main { max-width:1100px; width:100%; margin:0 auto; padding:28px 24px; }

@media (max-width: 900px) {
  .sidebar { position:fixed; left:-260px; top:0; z-index:20; width:240px; box-shadow:2px 0 24px rgba(0,0,0,.4); }
  .shell.drawer-open .sidebar { left:0; }
  .topbar-menu { display:inline-block; }
}

/* ---------- Page header ---------- */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.page-header .crumb { color:var(--mut); font-size:13px; margin:0 0 4px; }
.page-header h1 { font-size:22px; margin:0; }
.page-header-action { display:flex; align-items:center; }

/* ---------- Stat cards ---------- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:18px; }
.stat-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.stat-card .stat-label { color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.stat-card .stat-value { font-size:22px; font-weight:700; margin-top:4px; }
.stat-card.ok .stat-value { color:var(--ok); }
.stat-card.warn .stat-value { color:var(--warn); }
.stat-card.danger .stat-value { color:var(--danger); }

/* ---------- Cards, tables, buttons (existing patterns, recolored) ---------- */
.class-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:14px 0; }
.class-head { display:flex; align-items:center; justify-content:space-between; }
.class-head h3 { margin:0; }
.class-card ul { list-style:none; padding:0; margin:12px 0; display:flex; flex-wrap:wrap; gap:8px; }
.class-card li { background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:4px 6px 4px 12px; display:flex; align-items:center; gap:4px; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.toolbar form { display:flex; gap:8px; }
.chapters li { background:transparent; border:0; display:block; padding:3px 0; border-radius:0; }
a.lnk { color:var(--acc); cursor:pointer; font-size:12px; margin-left:8px; }
.chsum { margin:4px 0 8px 14px; padding-left:10px; border-left:2px solid var(--line); }
.add-sub { display:flex; gap:6px; margin-top:6px; }
.upload-form { display:flex; flex-direction:column; gap:14px; max-width:520px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px; }
.upload-form label { display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--mut); }
.upload-form input, .upload-form select { color:var(--ink); }

.table { width:100%; border-collapse:collapse; margin-top:10px; }
.table th { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
.table td { padding:8px 6px; border-bottom:1px solid var(--line); }

.btn, a.btn, button.btn { display:inline-block; background:var(--acc); color:var(--acc-ink); text-decoration:none;
  border-radius:8px; padding:9px 16px; margin:10px 0; border:0; cursor:pointer; font-weight:600; }
.btn-outline, a.btn-outline, button.btn-outline { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-danger, button.btn-danger { background:transparent; color:var(--danger); border:1px solid #5e2424; }

.progress { background:var(--panel-2); border:1px solid var(--line); border-radius:999px; height:14px; overflow:hidden; margin:14px 0 6px; }
.progress .bar { background:var(--acc); height:100%; width:0; transition:width .4s ease; }
.ok { color:var(--ok); } .err { color:var(--danger); } .warn-text { color:var(--warn); }
.badge { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); }
.badge.g { color:var(--ok); border-color:#1f5e3a; }
.badge.a { color:var(--warn); border-color:#5e4e1f; }
.badge.r { color:#ff7a7a; border-color:#5e2424; }
.method-badge { font-family:var(--mono); font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; }
.method-badge.get { background:rgba(79,140,255,.12); color:var(--info); }
.method-badge.post { background:rgba(62,207,142,.12); color:var(--ok); }
details { margin:6px 0; } summary { cursor:pointer; }
pre.preview { white-space:pre-wrap; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:10px; max-height:280px; overflow:auto; font-size:13px; color:#c4c9d4; }

/* ---------- Code blocks (API guide) ---------- */
.code-block { position:relative; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; margin:10px 0; }
.code-block pre { margin:0; padding:14px 16px; overflow-x:auto; font-family:var(--mono); font-size:13px; color:#c4e9d4; }
.code-block .copy-btn {
  position:absolute; top:8px; right:8px; background:var(--panel); color:var(--mut); border:1px solid var(--line);
  border-radius:6px; padding:3px 10px; font-size:12px; cursor:pointer;
}
.code-block .copy-btn:hover { color:var(--ink); }

/* ---------- Empty states — a consistent "nothing here yet" pattern (see _macros.html empty_state()) ---------- */
.empty-state { text-align:center; padding:32px 20px; color:var(--mut); border:1px dashed var(--line); border-radius:12px; }
.empty-state .empty-icon { font-size:28px; margin-bottom:8px; }
.empty-state a.btn { margin-top:12px; }

/* ---------- Loading spinner — for HTMX polling windows (see _macros.html loading_spinner()) ---------- */
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }
.skeleton { background:var(--shimmer); background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite; border-radius:6px; height:14px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* ---------- Status banners (info/warn/ok/danger) ---------- */
.banner { border-radius:10px; padding:10px 14px; margin:10px 0; border:1px solid var(--line); font-size:14px; }
.banner.info { border-color:#1f3a5e; background:rgba(79,140,255,.08); color:var(--info); }
.banner.ok   { border-color:#1f5e3a; background:rgba(62,207,142,.08); color:var(--ok); }
.banner.warn { border-color:#5e4e1f; background:rgba(241,196,83,.08); color:var(--warn); }
.banner.danger { border-color:#5e2424; background:rgba(255,93,93,.08); color:var(--danger); }

/* ---------- Standalone auth pages (login, studio-login — no sidebar) ---------- */
.auth-page { min-height:100vh; display:grid; place-items:center; background:var(--bg); }
.auth-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; width:320px; display:flex; flex-direction:column; gap:12px; }
.auth-card h1 { font-size:18px; margin:0 0 6px; }
.auth-card .sub { color:var(--mut); font-size:13px; margin:0; }