/* Experiment Ledger console - Admin Dashboard Design Spec.
 *
 * The spec's reference stack is Next.js + Tailwind + shadcn. This product is
 * server-rendered Django, so the design language is implemented directly:
 * the same token names, the same surface ladder, the same primitives.
 *
 * Palette values live in tokens.css. This file aliases them to the spec's
 * token names, so every rule below reads hsl(var(--accent)) as written.
 */
@import url('tokens.css');

:root {
  --background: var(--el-background);
  --foreground: var(--el-foreground);
  --surface: var(--el-surface);
  --surface-elevated: var(--el-surface-elevated);
  --surface-hover: var(--el-surface-hover);
  --surface-sunken: var(--el-surface-sunken);
  --card: var(--el-card);
  --card-foreground: var(--el-card-foreground);
  --popover: var(--el-popover);
  --popover-foreground: var(--el-popover-foreground);
  --muted: var(--el-muted);
  --muted-foreground: var(--el-muted-foreground);
  --subtle-foreground: var(--el-subtle-foreground);
  --primary: var(--el-primary);
  --primary-foreground: var(--el-primary-foreground);
  --secondary: var(--el-secondary);
  --secondary-foreground: var(--el-secondary-foreground);
  --accent: var(--el-accent);
  --accent-foreground: var(--el-accent-foreground);
  --accent-soft: var(--el-accent-soft);
  --accent-soft-foreground: var(--el-accent-soft-foreground);
  --destructive: var(--el-destructive);
  --destructive-foreground: var(--el-destructive-foreground);
  --success: var(--el-success);
  --warning: var(--el-warning);
  --border: var(--el-border);
  --input: var(--el-input);
  --ring: var(--el-ring);
  --sidebar: var(--el-sidebar);
  --sidebar-foreground: var(--el-sidebar-foreground);
  --sidebar-border: var(--el-sidebar-border);
  --sidebar-muted: var(--el-sidebar-muted);
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.55;
  font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* disableTransitionOnChange: suppress the whole-page flicker on theme swap. */
.theme-switching, .theme-switching * { transition: none !important; }

h1, h2, h3 { letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }

a { color: hsl(var(--accent)); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
  border-radius: calc(var(--radius) - 4px);
}

.tabular { font-variant-numeric: tabular-nums; }
.muted { color: hsl(var(--muted-foreground)); }
.subtle { color: hsl(var(--subtle-foreground)); }
.eyebrow {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; color: hsl(var(--muted-foreground));
}

/* ------------------------------------------------------------------ *
 * 5.1 App shell - only the right column scrolls
 * ------------------------------------------------------------------ */
.shell { display: flex; height: 100vh; overflow: hidden; }
.shell__column { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.shell__main { flex: 1; overflow: auto; background: hsl(var(--background)); }

/* ------------------------------------------------------------------ *
 * 5.2 Sidebar (264px, fixed)
 * ------------------------------------------------------------------ */
.sidebar {
  width: 264px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: hsl(var(--sidebar));
  color: hsl(var(--sidebar-foreground));
  border-right: 1px solid hsl(var(--sidebar-border));
}

.sidebar__brand {
  height: 64px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid hsl(var(--sidebar-border));
}
.sidebar__mark {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--primary));
  display: grid; place-items: center;
}
.sidebar__mark span {
  width: 10px; height: 10px; border-radius: 50%;
  background: hsl(var(--accent));
}
.sidebar__wordmark { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar__wordmark b { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.015em; }
.sidebar__wordmark small {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: hsl(var(--sidebar-muted));
}

.sidebar__nav { flex: 1; overflow-y: auto; padding: 16px 12px; }
.sidebar__section + .sidebar__section { margin-top: 20px; }
.sidebar__section-label {
  padding: 0 8px 6px;
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; color: hsl(var(--sidebar-muted));
}

.navitem {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 2px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem; font-weight: 500;
  color: hsl(var(--sidebar-foreground));
  text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.navitem:hover { background: hsl(var(--surface-hover)); text-decoration: none; }
.navitem svg { width: 16px; height: 16px; flex-shrink: 0; }
.navitem--active {
  background: hsl(var(--accent-soft));
  color: hsl(var(--accent-soft-foreground));
}
.navitem--active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px; background: hsl(var(--accent));
}
.navitem__count {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  color: hsl(var(--sidebar-muted));
}

.sidebar__user { border-top: 1px solid hsl(var(--sidebar-border)); padding: 12px; }
.usercard {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border: 0; background: none; cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  color: inherit; font: inherit; text-align: left;
  transition: background-color 150ms;
}
.usercard:hover { background: hsl(var(--surface-hover)); }
.usercard__avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--accent-soft));
  color: hsl(var(--accent-soft-foreground));
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 600;
}
.usercard__text { min-width: 0; line-height: 1.2; }
.usercard__text b { display: block; font-size: 0.875rem; font-weight: 500; }
.usercard__text small { font-size: 11px; color: hsl(var(--sidebar-muted)); }

/* Native disclosure stands in for the spec's Radix dropdown: same shape,
 * no JavaScript. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  min-width: 8rem; padding: 4px;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--popover));
  box-shadow: var(--shadow-lifted);
  z-index: 30;
}
.menu__item {
  display: block; width: 100%; text-align: left;
  padding: 6px 8px; border: 0; background: none; cursor: pointer;
  border-radius: calc(var(--radius) - 4px);
  font: inherit; font-size: 0.875rem; color: hsl(var(--foreground));
  text-decoration: none;
}
.menu__item:hover { background: hsl(var(--surface-hover)); text-decoration: none; }

/* ------------------------------------------------------------------ *
 * 5.3 Topbar - deliberately quiet
 * ------------------------------------------------------------------ */
.topbar {
  height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 24px;
  background: hsl(var(--surface-elevated));
  border-bottom: 1px solid hsl(var(--border));
}
.topbar__label {
  font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground));
}
.topbar__actions { display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------------ *
 * 5.4 PageHeader
 * ------------------------------------------------------------------ */
.pageheader { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background)); }
.pageheader__inner {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
}
.pageheader h1 { font-size: 1.5rem; font-weight: 600; }
.pageheader__desc { margin-top: 4px; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.pageheader__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 768px) {
  .pageheader__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

.page { padding: 24px; }
.stack { display: flex; flex-direction: column; gap: 32px; }

/* ------------------------------------------------------------------ *
 * 6.1 Button
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  font: inherit; font-size: 0.875rem; font-weight: 500;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:disabled { opacity: 0.5; pointer-events: none; }

.btn--sm { height: 32px; padding: 0 12px; }
.btn--lg { height: 40px; padding: 0 18px; }
.btn--icon { width: 36px; height: 36px; padding: 0; }
.btn--icon-sm { width: 32px; height: 32px; padding: 0; }

.btn--default {
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-soft);
}
.btn--default:hover { background: hsl(var(--primary) / 0.9); }

.btn--accent {
  background: hsl(var(--accent)); color: hsl(var(--accent-foreground));
  box-shadow: var(--shadow-soft);
}
.btn--accent:hover { background: hsl(var(--accent) / 0.9); }

.btn--outline {
  background: hsl(var(--surface-elevated));
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-soft);
}
.btn--outline:hover { background: hsl(var(--surface-hover)); }

.btn--secondary {
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
}
.btn--secondary:hover { background: hsl(var(--secondary) / 0.8); }

.btn--ghost { background: none; color: hsl(var(--foreground)); }
.btn--ghost:hover { background: hsl(var(--surface-hover)); }

.btn--destructive {
  background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground));
}
.btn--destructive:hover { background: hsl(var(--destructive) / 0.9); }

/* ------------------------------------------------------------------ *
 * 6.2 Input
 * ------------------------------------------------------------------ */
.input, input[type='text'], input[type='password'], input[type='number'],
input[type='date'], input[type='email'], textarea, select {
  width: 100%;
  min-height: 36px; padding: 7px 12px;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--surface-elevated));
  color: hsl(var(--foreground));
  font: inherit; font-size: 0.875rem;
  box-shadow: var(--shadow-soft);
  transition: border-color 150ms;
}
textarea { min-height: 76px; resize: vertical; }
select[multiple] { min-height: 160px; padding: 6px; }
select[multiple] option { padding: 4px 6px; border-radius: 4px; }
::placeholder { color: hsl(var(--muted-foreground) / 0.7); }
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; }
input[type='checkbox'] {
  width: 16px; height: 16px; min-height: 0; accent-color: hsl(var(--accent));
  box-shadow: none; margin: 0;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: 0.75rem; font-weight: 500; color: hsl(var(--foreground) / 0.85);
}
.field__help { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.field__error { font-size: 0.75rem; color: hsl(var(--destructive)); }
.field--invalid input, .field--invalid textarea, .field--invalid select {
  border-left: 2px solid hsl(var(--destructive));
}
.formstack { display: flex; flex-direction: column; gap: 16px; }
.formactions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 8px;
}

/* ------------------------------------------------------------------ *
 * 6.3 Card
 * ------------------------------------------------------------------ */
.card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: var(--shadow-soft);
}
.card__header {
  display: flex; flex-direction: column; gap: 6px; padding: 20px;
}
.card__header--tight { padding-bottom: 8px; }
.card__title { font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: -0.015em; }
.card__desc { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.card__content { padding: 20px; }
.card__header + .card__content { padding-top: 0; }
.card__footer { padding: 20px; padding-top: 0; }
.card--flush .card__content { padding: 0; }

.section-title { font-size: 1.125rem; font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 6.4 Badge
 * ------------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 9999px; padding: 2px 8px;
  font-size: 11px; font-weight: 500; line-height: 1.3;
  border: 1px solid transparent; white-space: nowrap;
}
.badge--default { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge--accent { background: hsl(var(--accent-soft)); color: hsl(var(--accent-soft-foreground)); }
.badge--outline { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.badge--success { background: hsl(var(--success) / 0.1); color: hsl(var(--success)); }
.badge--warning { background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); }
.badge--destructive { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); }
.badge--muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* ------------------------------------------------------------------ *
 * 6.5 Table - sharp rows, round chrome
 * ------------------------------------------------------------------ */
.tablewrap { position: relative; width: 100%; overflow: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.data th {
  position: sticky; top: 0; z-index: 1;
  background: hsl(var(--surface-elevated));
  text-align: left; padding: 10px 20px;
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
}
table.data td {
  padding: 12px 20px; vertical-align: top;
  border-bottom: 1px solid hsl(var(--border));
}
table.data tbody tr { transition: background-color 150ms; }
table.data tbody tr:hover { background: hsl(var(--surface-hover)); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Key/value table for record metadata. */
table.kv { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.kv th {
  width: 200px; text-align: left; font-weight: 500;
  color: hsl(var(--muted-foreground));
  padding: 8px 16px 8px 0; vertical-align: top;
  border-bottom: 1px solid hsl(var(--border));
}
table.kv td { padding: 8px 0; border-bottom: 1px solid hsl(var(--border)); }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Banner - the power check and other inline states
 * ------------------------------------------------------------------ */
.banner {
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--muted-foreground));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--surface-elevated));
  padding: 16px 18px;
}
.banner h3 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; }
.banner p + p { margin-top: 8px; }
.banner__meta { margin-top: 10px; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.power-pass { border-left-color: hsl(var(--success)); }
.power-pass h3 { color: hsl(var(--success)); }
.power-blocked {
  border-left-color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.06);
}
.power-blocked h3 { color: hsl(var(--destructive)); }

/* ------------------------------------------------------------------ *
 * 7.5 Empty state - centred, no illustration
 * ------------------------------------------------------------------ */
.empty { text-align: center; padding: 48px 24px; }
.empty svg { width: 28px; height: 28px; color: hsl(var(--muted-foreground)); }
.empty h3 { margin-top: 12px; font-size: 1rem; font-weight: 600; }
.empty p { margin-top: 4px; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.empty .btn { margin-top: 16px; }

/* ------------------------------------------------------------------ *
 * Chart - the one graphic, drawn inline
 * ------------------------------------------------------------------ */
.chart {
  width: 100%; height: auto; max-width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--surface-elevated));
}
.chart .chart__zero { stroke: hsl(var(--border)); }
.chart .chart__line { stroke: hsl(var(--accent)); }
.chart .chart__dot { fill: hsl(var(--accent)); }

/* ------------------------------------------------------------------ *
 * Utilities
 * ------------------------------------------------------------------ */
.row { display: flex; align-items: center; gap: 8px; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grid-kpi { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-kpi { grid-template-columns: repeat(4, 1fr); } }
.kpi-value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.prose { max-width: 68ch; }
.divider { height: 1px; background: hsl(var(--border)); border: 0; margin: 0; }
.chiplist { display: flex; flex-wrap: wrap; gap: 4px; }
.weights {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: hsl(var(--muted-foreground)); word-break: break-word;
}

.auth {
  min-height: 100vh; display: grid; place-items: center;
  padding: 24px; background: hsl(var(--background));
}
.auth__card { width: 100%; max-width: 380px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 860px) {
  .sidebar { display: none; }
}

/* 7.3 Detail page: main content left, metadata and primary action right. */
.detail { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) {
  .detail { grid-template-columns: minmax(0, 1fr) 340px; }
}