/* GA4 Weekly Reporter — Django admin in Demand Frontier's design system.
 *
 * The admin keeps ALL of its own behaviour and markup: this file only re-points Django's CSS
 * variables at the DF palette and restates the handful of shapes (cards, tables, buttons, inputs,
 * sidebar, header) that carry the console's identity. The only template that loads it is
 * `templates/admin/base_site.html`, and it is linked from `{% block responsive %}` because
 * responsive.css is the LAST stylesheet Django emits — anything injected via `extrastyle` or
 * `extrahead` is out-cascaded by it (and by the per-page forms.css / changelists.css / login.css).
 *
 * Tokens are the same values as `console/static/console/console.css`, prefixed `--df-` so they can
 * never collide with Django's own `--accent` / `--primary` semantics. That is a deliberate fourth
 * copy of the palette (console.css, reports/static/report.css and the inline block in
 * templates/base.html are the others) — CHANGE ALL OF THEM TOGETHER.
 *
 * Theme: three states, exactly as the console. Django's light palette is declared on
 * `html[data-theme="light"], :root`, so DF light must also claim `html[data-theme="light"]`
 * (and `[data-theme="auto"]`, which admin/js/theme.js stamps when no choice is stored) to win.
 * Django's dark palette is a bare `:root` inside `@media (prefers-color-scheme: dark)` plus
 * `html[data-theme="dark"]`; ours out-specifies the first and lands later than the second.
 *
 * Specificity, the part that bites: the light block's fallback branch is `html:root` (0,1,1), NOT
 * `:root` (0,1,0). Most Django variables here are mapped through a `--df-` token rather than being
 * restated per theme, and with a bare `:root` every one of them lost to Django's
 * `html[data-theme="dark"]` (0,1,1) — so explicit dark quietly fell back to Django's own grey
 * palette (--body-bg #121212, --link-fg #81d4fa, --selected-row teal) with the DF tokens unused.
 */

/* ---------------------------------------------------------------- tokens: light */
html[data-theme="light"],
html[data-theme="auto"],
html:root {   /* html:root, not :root — see the specificity note in the header comment */
  --df-paper: #F2F6F9;
  --df-surface: #FFFFFF;
  --df-surface-2: #E9F0F5;
  --df-border: #D3E0EA;
  --df-border-strong: #B4C8D8;
  --df-ink: #0A2E4E;
  --df-ink-2: #3D5F7D;
  --df-ink-3: #6A8399;
  --df-navy: #083B67;
  --df-accent: #D11793;
  --df-accent-2: #B3117E;
  --df-accent-soft: #FBE9F5;
  --df-pos: #0C7361;
  --df-pos-soft: #E4F3EF;
  --df-neg: #AD2F4C;
  --df-neg-soft: #FBEBEE;
  --df-caution: #8C5D0A;
  --df-caution-soft: #FBF0DC;
  --df-info: #2C74BC;
  --df-info-soft: #E6F0FA;
  --df-hover: #EAF1F6;
  --df-header-bg: #083B67;
  --df-header-fg: rgba(255, 255, 255, .74);
  --df-header-mark: #F58ACB;   /* the wordmark's magenta half: 5.1:1 on the navy bar */
  --df-on-soft: #B3117E;       /* text on --df-accent-soft; the accent itself is only 4.25:1 there */
  --df-shadow: 0 1px 2px rgba(10, 46, 78, .05), 0 1px 3px rgba(10, 46, 78, .06);
  --df-shadow-lg: 0 2px 4px rgba(10, 46, 78, .05), 0 18px 40px -18px rgba(10, 46, 78, .28);

  --df-r-sm: 6px;
  --df-r: 10px;
  --df-r-lg: 14px;
  --df-r-pill: 999px;

  /* ---- Django's own variables, re-pointed ---- */
  --primary: var(--df-navy);
  --secondary: var(--df-navy);
  --primary-fg: #fff;
  --accent: var(--df-accent-soft);      /* only reaches the calendar caption, which hardcodes #333 text */

  --body-fg: var(--df-ink);
  --body-bg: var(--df-surface);         /* every "surface" (modules, filter, dropdowns); the page ground is set on body */
  --body-quiet-color: var(--df-ink-3);
  --body-medium-color: var(--df-ink-2);
  --body-loud-color: var(--df-ink);

  --header-color: var(--df-header-fg);
  --header-branding-color: #fff;
  --header-bg: var(--df-header-bg);
  --header-link-color: #fff;

  --breadcrumbs-fg: var(--df-ink-3);
  --breadcrumbs-link-fg: var(--df-ink-2);
  --breadcrumbs-bg: var(--df-surface-2);

  --link-fg: var(--df-navy);
  --link-hover-color: var(--df-accent);
  --link-selected-fg: var(--df-accent);

  --hairline-color: var(--df-border);
  --border-color: var(--df-border-strong);

  --error-fg: var(--df-neg);
  --message-success-bg: var(--df-pos-soft);
  --message-warning-bg: var(--df-caution-soft);
  --message-error-bg: var(--df-neg-soft);

  --darkened-bg: var(--df-surface-2);
  --selected-bg: var(--df-hover);
  --selected-row: var(--df-accent-soft);

  --button-fg: #fff;
  --button-bg: var(--df-navy);
  --button-hover-bg: var(--df-ink);
  --default-button-bg: var(--df-accent);
  --default-button-hover-bg: var(--df-accent-2);
  --close-button-bg: var(--df-ink-2);   /* white on ink-3 is 3.95:1 — the cancel button needs more */
  --close-button-hover-bg: var(--df-ink);
  --delete-button-bg: var(--df-neg);
  --delete-button-hover-bg: #8E2440;

  /* object-tools pills carry white SVG icons (tooltag-add / tooltag-arrowright), so they must stay dark */
  --object-tools-fg: #fff;
  --object-tools-bg: var(--df-navy);
  --object-tools-hover-bg: var(--df-accent);

  --font-family-primary: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-monospace: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --df-font-head: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color-scheme: light;
}

/* ---------------------------------------------------------------- tokens: dark (system) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --df-paper: #0E1620;
    --df-surface: #16212E;
    --df-surface-2: #1E2C3B;
    --df-border: #27384A;
    --df-border-strong: #3A5069;
    --df-ink: #E3ECF3;
    --df-ink-2: #A9BCCD;
    --df-ink-3: #7D93A8;
    --df-navy: #3E8AD6;
    --df-accent: #DE3FA2;
    --df-accent-2: #C22C8B;
    --df-accent-soft: #33132A;
    --df-pos: #4CBFA7;
    --df-pos-soft: #0F2A28;
    --df-neg: #F0798F;
    --df-neg-soft: #33161E;
    --df-caution: #D6A030;
    --df-caution-soft: #2C2312;
    --df-info: #6BA6E8;
    --df-info-soft: #14283C;
    --df-hover: #1C2A38;
    --df-header-bg: #111A24;
    --df-header-fg: rgba(227, 236, 243, .66);
    --df-header-mark: #F58ACB;
    --df-on-soft: #F58ACB;                   /* on the dark plum fill, the light magenta reads 7.3:1 */
      --df-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --df-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 40px -18px rgba(0, 0, 0, .7);

    --primary: #1E4F80;                      /* --df-navy is a LIGHT blue here; #fff on it is 3.6:1 */
    --secondary: #1E4F80;
    --button-bg: #1E4F80;
    --button-hover-bg: #275F97;
    --default-button-bg: var(--df-accent-2); /* #fff on #DE3FA2 is 3.9:1; the deeper magenta is 5.2:1 */
    --default-button-hover-bg: #A82479;
    --delete-button-bg: #8E2440;
    --delete-button-hover-bg: #A32B4B;
    --close-button-bg: var(--df-border-strong);
    --close-button-hover-bg: #4A6480;
    --object-tools-bg: #1E4F80;
    --object-tools-hover-bg: var(--df-accent-2);
    --primary-fg: #fff;
    --button-fg: #fff;
    --object-tools-fg: #fff;

    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- tokens: dark (explicit) */
html[data-theme="dark"] {
  --df-paper: #0E1620;
  --df-surface: #16212E;
  --df-surface-2: #1E2C3B;
  --df-border: #27384A;
  --df-border-strong: #3A5069;
  --df-ink: #E3ECF3;
  --df-ink-2: #A9BCCD;
  --df-ink-3: #7D93A8;
  --df-navy: #3E8AD6;
  --df-accent: #DE3FA2;
  --df-accent-2: #C22C8B;
  --df-accent-soft: #33132A;
  --df-pos: #4CBFA7;
  --df-pos-soft: #0F2A28;
  --df-neg: #F0798F;
  --df-neg-soft: #33161E;
  --df-caution: #D6A030;
  --df-caution-soft: #2C2312;
  --df-info: #6BA6E8;
  --df-info-soft: #14283C;
  --df-hover: #1C2A38;
  --df-header-bg: #111A24;
  --df-header-fg: rgba(227, 236, 243, .66);
  --df-header-mark: #F58ACB;
  --df-on-soft: #F58ACB;
  --df-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --df-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 40px -18px rgba(0, 0, 0, .7);

  --primary: #1E4F80;                      /* --df-navy is a LIGHT blue here; #fff on it is 3.6:1 */
  --secondary: #1E4F80;
  --button-bg: #1E4F80;
  --button-hover-bg: #275F97;
  --default-button-bg: var(--df-accent-2); /* #fff on #DE3FA2 is 3.9:1; the deeper magenta is 5.2:1 */
  --default-button-hover-bg: #A82479;
  --delete-button-bg: #8E2440;
  --delete-button-hover-bg: #A32B4B;
  --close-button-bg: var(--df-border-strong);
  --close-button-hover-bg: #4A6480;
  --object-tools-bg: #1E4F80;
  --object-tools-hover-bg: var(--df-accent-2);
  --primary-fg: #fff;
  --button-fg: #fff;
  --object-tools-fg: #fff;

  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
body {
  background: var(--df-paper);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#container { min-width: 0; }

h1, h2, h3, h4 {
  font-family: var(--df-font-head);
  font-weight: 600;
  color: var(--df-ink);
  text-wrap: balance;
}
/* h1's box height is load-bearing: .object-tools is pulled over it with margin-top:-48px. */
#content h1 { font-size: 1.25rem; letter-spacing: -.015em; }
/* Direct children only — `#content h2` (1,0,1) would out-specify `.module h2` and blow up every
   fieldset caption, module header and filter title on the page. */
#content > h2 { font-size: 1.05rem; color: var(--df-ink-2); }
h2.subhead { font-weight: 600; }

a:link, a:visited { text-decoration: none; }
a:focus, a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--df-accent);
  outline-offset: 2px;
  border-radius: var(--df-r-sm);
}

pre, code, kbd, samp, .df-mono, .vLargeTextField, textarea.df-yaml {
  font-family: var(--font-family-monospace);
}
code strong { color: var(--df-accent); }
blockquote { color: var(--df-ink-3); border-left: 3px solid var(--df-border); }

/* ---------------------------------------------------------------- header + surface switcher */
#header {
  padding: 12px 24px;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: none;
}

#branding { align-items: center; gap: 14px; flex-wrap: wrap; }

#site-name {
  margin-inline-end: 0;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}
#site-name a:link,
#site-name a:visited {
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
#site-name a:hover { text-decoration: none; }

.df-mark {
  font-family: var(--font-family-monospace);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.df-mark b { font-weight: 600; color: #fff; }
/* --df-accent (#D11793) is only 2.3:1 on the navy bar — --df-header-mark is the lightened variant */
.df-mark i { font-style: normal; font-weight: 600; color: var(--df-header-mark); }

.df-site {
  font-family: var(--df-font-head);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}

.df-chip {
  font-family: var(--font-family-monospace);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--df-r-pill);
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}

#df-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline-start: 6px;
  border-inline-start: 1px solid rgba(255, 255, 255, .18);
}

#header #df-switch a.df-back:link,
#header #df-switch a.df-back:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--df-r-sm);
  border: 1px solid var(--default-button-bg);
  background: var(--default-button-bg);   /* deeper magenta in dark, for contrast with #fff */
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
#header #df-switch a.df-back:hover,
#header #df-switch a.df-back:focus {
  background: var(--default-button-hover-bg);
  border-color: var(--default-button-hover-bg);
  text-decoration: none;
}

.df-links { display: flex; align-items: center; gap: 2px; }
#header .df-links a:link,
#header .df-links a:visited {
  padding: 5px 9px;
  border-radius: var(--df-r-sm);
  font-size: .82rem;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
#header .df-links a:hover,
#header .df-links a:focus {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  text-decoration: none;
}

/* NOT a flex container: base.html separates these items with bare text nodes (". " and " / "), and
   flexing the parent turns each of them into its own flex item — a floating full stop and orphaned
   slashes. Django's inline flow is correct; only the colours and sizes change here. */
#user-tools {
  float: none;
  padding: 0;
  margin: 0;
  font-size: .8rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--df-header-fg);
}
#user-tools a,
#logout-form button {
  border-bottom: none;
  font-size: .8rem;
}
#user-tools a:hover,
#logout-form button:hover { text-decoration: underline; }
#logout-form button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-family-primary);
  text-transform: none;      /* base.css uppercases it; the rest of #user-tools is sentence case */
  letter-spacing: normal;
}
/* the global focus ring is magenta, which vanishes on the magenta ← Console button and reads poorly
   on navy — inside the header, focus is white */
#header :focus-visible { outline-color: #fff; }
#user-tools .theme-toggle,
#header .theme-toggle {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--df-r-sm);
  padding: 3px 6px;
  margin-inline-start: 8px;
  vertical-align: middle;
  background: none;
  cursor: pointer;
}
#user-tools .theme-toggle:hover,
#header .theme-toggle:hover { border-color: var(--df-accent); }
#header .theme-toggle svg { fill: #fff; }

/* ---------------------------------------------------------------- breadcrumbs */
div.breadcrumbs {
  padding: 9px 24px;
  font-size: .8rem;
  border-bottom: 1px solid var(--df-border);
  color: var(--df-ink-3);
}
div.breadcrumbs a { color: var(--df-ink-2); }
div.breadcrumbs a:focus,
div.breadcrumbs a:hover { color: var(--df-accent); }

/* ---------------------------------------------------------------- nav sidebar (mirrors the console's)
 * app_list.html gives every app group `class="module"` and puts the app name in <caption>, the model
 * name in <th scope="row"> and the Add link in <td>. So: undo the card look, treat the caption as the
 * console's .nav-label, and make the <th> link the nav item. */
#nav-sidebar {
  background: var(--df-surface);
  border-inline-end: 1px solid var(--df-border);
  padding-top: 4px;
}
#nav-sidebar .module {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 10px;
}
#nav-sidebar .module caption {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 14px 16px 4px;
  font-family: var(--font-family-monospace);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--df-ink-2);
}
/* Django paints .current-app .section with --header-color, i.e. a colour meant for the navy bar. */
#nav-sidebar .module caption a.section:link,
#nav-sidebar .module caption a.section:visited,
#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--df-ink-3);
  font: inherit;
  font-weight: 600;
}
#nav-sidebar .module th,
#nav-sidebar .module td {
  background: transparent;
  border: 0;
  padding: 0;
  vertical-align: middle;
}
#nav-sidebar .module th { width: 100%; }
#nav-sidebar .module td { text-align: end; padding-inline-end: 10px; white-space: nowrap; }
#nav-sidebar .module th a:link,
#nav-sidebar .module th a:visited {
  display: block;
  margin: 1px 8px;
  padding: 7px 10px;
  border-radius: var(--df-r);
  border-inline-start: 2px solid transparent;
  color: var(--df-ink-2);
  font-size: .88rem;
  font-weight: 500;
}
#nav-sidebar .module th a:hover,
#nav-sidebar .module th a:focus {
  background: var(--df-hover);
  color: var(--df-ink);
  text-decoration: none;
}
#nav-sidebar .module td a:link,
#nav-sidebar .module td a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  /* block-only: .addlink reserves its left padding for the + icon, and a padding shorthand here
     wipes that out, dropping the icon on top of the label */
  padding-block: 4px;
  padding-inline-end: 4px;
  white-space: nowrap;
  font-size: .74rem;
  color: var(--df-ink-3);
}
#nav-sidebar .module td a:hover,
#nav-sidebar .module td a:focus { color: var(--df-accent); text-decoration: none; }
/* the highlight lives on the link, not on the whole row */
#nav-sidebar tr.current-model { background: transparent; }
#nav-sidebar tr.current-model th a:link,
#nav-sidebar tr.current-model th a:visited {
  background: var(--df-accent-soft);
  color: var(--df-on-soft);
  border-inline-start-color: var(--df-accent);
  font-weight: 600;
}
#nav-filter {
  margin: 6px 8px 10px;
  width: calc(100% - 16px);
  border: 1px solid var(--df-border-strong);
  border-radius: var(--df-r-sm);
  background: var(--df-surface);
  color: var(--df-ink);
  padding: 7px 10px;
  font-family: var(--font-family-primary);
  font-size: .84rem;
}
#nav-filter:focus {
  outline: none;
  border-color: var(--df-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--df-accent) 20%, transparent);
}
#nav-filter.no-results { background: var(--df-neg-soft); }
#toggle-nav-sidebar {
  background: var(--df-surface);
  border-inline-end: 1px solid var(--df-border);
  color: var(--df-ink-3);
}
#toggle-nav-sidebar:hover { background: var(--df-hover); color: var(--df-accent); }

/* ---------------------------------------------------------------- modules become cards */
.module {
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-lg);
  box-shadow: var(--df-shadow);
  padding: 0;
  margin-bottom: 20px;
  /* deliberately NOT overflow:hidden — autocomplete and calendar popups open inside fieldsets */
}
/* #changelist itself carries class="module"; its parts are the cards, not the wrapper. */
#changelist {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}
#content .module h2,
#content .module caption,
#content .inline-group h2,
#changelist-filter h2 {
  background: var(--df-surface-2);
  /* ink-2, not ink-3: at .64rem uppercase, ink-3 is 3.4:1 on this fill */
  color: var(--df-ink-2);
  font-family: var(--font-family-monospace);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 11px 16px;
  margin: 0;
  /* border:0 first — something upstream gives fieldset captions a full 1px border, whose rounded
     top-right corner then shows as a notch against the card edge. */
  border: 0;
  border-bottom: 1px solid var(--df-border);
  border-radius: var(--df-r-lg) var(--df-r-lg) 0 0;   /* the card is not overflow:hidden */
}
/* Collapsible fieldsets render <fieldset class="module collapse"><details><summary><h2>. Django
   paints the summary with --header-bg (navy) and our .module h2 rule then drew a rounded pill inside
   that bar, so both halves are restated here as one quiet caption. */
#content fieldset.collapse > details > summary {
  background: var(--df-surface-2);
  color: var(--df-ink-2);
  border: 0;
  border-bottom: 1px solid var(--df-border);
  border-radius: var(--df-r-lg) var(--df-r-lg) 0 0;
  padding: 11px 16px;
  font-family: var(--font-family-monospace);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}
#content fieldset.collapse > details > summary h2,
#content fieldset.collapse > details > summary .fieldset-heading {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  display: inline;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
#content fieldset.collapse[aria-labelledby] > details[open] > summary { border-radius: var(--df-r-lg) var(--df-r-lg) 0 0; }

#content .module h2 a:link, #content .module h2 a:visited,
#content .module caption a:link, #content .module caption a:visited {
  color: var(--df-ink-2);
}
#content .module > p, #content .module > ul, #content .module > ol { padding-inline: 16px; }
#content .module ul.actionlist { padding-inline-start: 32px; }
#changelist .actions, #changelist-filter h2 { border-radius: var(--df-r-lg) var(--df-r-lg) 0 0; }

/* dashboard app tables: quiet rows, DF links */
/* base.css paints EVEN rows with --darkened-bg (and odd with --body-bg): clear both here. */
.dashboard .module tr:nth-child(odd),
.dashboard .module tr:nth-child(even),
#nav-sidebar tr:nth-child(odd),
#nav-sidebar tr:nth-child(even) { background: transparent; }
/* the changelist keeps a whisper of striping — ten columns wide is hard to track without it */
#result_list tbody tr:nth-child(even):not(.selected) {
  background: color-mix(in srgb, var(--df-surface-2) 55%, transparent);
}
/* actions.js toggles .selected on the row. --selected-row alone is ~1.2:1 against the stripe, so the
   selection also gets a magenta edge — a shape cue, not just a tint. */
#result_list tbody tr.selected > *,
#result_list tbody tr:has(.action-select:checked) > * {
  background: color-mix(in srgb, var(--df-accent) 12%, var(--df-surface));
}
#result_list tbody tr.selected > *:first-child,
#result_list tbody tr:has(.action-select:checked) > *:first-child {
  box-shadow: inset 3px 0 0 0 var(--df-accent);
}
/* `> *` so the row-header <th> is covered too: a th-only border reads as a ledge across half the card */
.dashboard .module table tr > * { border-bottom: 1px solid var(--df-border); }
.dashboard .module table tr:last-child > * { border-bottom: 0; }
.dashboard .module table tr:hover > * { background: var(--df-hover); }

/* the dashboard's app cards and Recent actions hold nothing that must escape, so they can clip —
   which keeps table cells from painting square corners over the card's rounded ones. */
.dashboard #content-main .module,
#content-related .module { overflow: hidden; }
#content-related { background: transparent; padding: 0; }
#content-related .module { background: var(--df-surface); }   /* base.css sets `background: none` here */
#content-related .module h3 {
  font-size: .9rem;
  padding: 12px 16px 0;
  color: var(--df-ink);
}
#content-related .actionlist { font-size: .84rem; }

/* ---------------------------------------------------------------- tables (changelist + inlines) */
table { border-collapse: collapse; }

thead th,
thead th.sortable,
#result_list thead th {
  background: var(--df-surface-2);
  border-bottom: 1px solid var(--df-border);
  font-family: var(--font-family-monospace);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--df-ink-2);
  white-space: nowrap;
}
#result_list thead th a:link,
#result_list thead th a:visited,
#result_list thead th.sorted a { color: var(--df-ink-2); }
#result_list tbody td,
#result_list tbody th {
  border-bottom: 1px solid var(--df-border);
  font-size: .875rem;
  vertical-align: middle;
}
#result_list tbody tr:not(.selected):hover > * { background: var(--df-hover); }
#result_list tbody tr:last-child > * { border-bottom: 0; }
#result_list tbody td.action-checkbox { text-align: center; }
#result_list td, #result_list th { font-variant-numeric: tabular-nums; }
#result_list thead th.sorted { background: var(--df-hover); }
#result_list .field-__str__ a, #result_list th a { font-weight: 500; }

.results {
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-lg);
  background: var(--df-surface);
  box-shadow: var(--df-shadow);
  /* both axes: cells carry their own background, and square corners would otherwise paint over the
     card's rounded ones. Nothing inside a result list needs to overflow it. */
  overflow: auto;
}
.results + .paginator { border: 0; background: transparent; }

/* changelist chrome */
#changelist { background: transparent; }
#toolbar {
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-lg);
  background: var(--df-surface);
  padding: 10px 12px;
  margin-bottom: 14px;
  box-shadow: var(--df-shadow);
}
/* search_form.html wraps label+input+button in a plain <div>, so the form itself is not the row */
#toolbar form#changelist-search > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#changelist-search input[type="submit"],
#toolbar form input[type="submit"] {
  box-shadow: none;
  border-radius: var(--df-r-sm);
  padding: 7px 13px;
}
#changelist-search #searchbar {
  border: 1px solid var(--df-border-strong);
  border-radius: var(--df-r-sm);
  padding: 7px 11px;
  min-width: min(240px, 100%);   /* responsive.css shrinks this row to 0 on phones — let it */
  background: var(--df-surface);
  color: var(--df-ink);
}
#changelist .actions {
  background: var(--df-surface-2);
  border: 1px solid var(--df-border);
  border-bottom: 0;
  border-radius: var(--df-r-lg) var(--df-r-lg) 0 0;
  color: var(--df-ink-2);
  padding: 10px 14px;
  font-size: .84rem;
}
#changelist .actions + .results {
  border-radius: 0 0 var(--df-r-lg) var(--df-r-lg);
}
#changelist .actions select { margin-inline-end: 6px; }
#changelist .actions .button { padding: 5px 11px; }
#changelist .actions span.all,
#changelist .actions span.action-counter,
#changelist .actions span.clear,
#changelist .actions span.question { color: var(--df-ink-3); }

#changelist-filter {
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-lg);
  box-shadow: var(--df-shadow);
  overflow: hidden;
}
#changelist-filter h2 { border-bottom: 1px solid var(--df-border); }
#changelist-filter h3 {
  font-family: var(--font-family-primary);
  font-size: .82rem;
  font-weight: 600;
  color: var(--df-ink-2);
  padding: 10px 14px 2px;
  margin: 0;
}
#changelist-filter ul { padding: 0 14px 10px; margin: 0; }
#changelist-filter li { padding: 0; list-style: none; }
#changelist-filter a { color: var(--df-ink-2); font-size: .84rem; }
#changelist-filter li a { display: block; padding: 5px 0; min-height: 24px; }
/* changelists.css gives .selected `margin-left: -15px` to cancel the ul's 15px padding; ours is a
   2px bar inside a clipped panel, so that pull has to go or the bar is shaved to nothing. */
#changelist-filter li.selected {
  margin-inline: 0;
  border-inline-start: 2px solid var(--df-accent);
  padding-inline-start: 8px;
}
#changelist-filter li.selected a { color: var(--df-on-soft); font-weight: 600; }
#changelist-filter details summary { color: var(--df-ink-2); }

.paginator {
  border-top: 0;
  padding: 12px 2px;
  font-size: .84rem;
  color: var(--df-ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.paginator a:link, .paginator a:visited {
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-sm);
  color: var(--df-ink-2);
  padding: 3px 9px;
}
.paginator a:focus, .paginator a:hover {
  background: var(--df-accent-soft);
  border-color: var(--df-accent);
  color: var(--df-on-soft);
  text-decoration: none;
}
.paginator a.showall { border: 0; background: transparent; }
.paginator .this-page {
  background: var(--df-accent-soft);
  border: 1px solid var(--df-accent);
  border-radius: var(--df-r-sm);
  color: var(--df-on-soft);
  padding: 3px 9px;
  font-weight: 600;
}
.paginator input[type="submit"] { margin-inline-start: auto; }
/* changelists.css uses #changelist .paginator (1,1,0), which out-specifies a bare .paginator */
#changelist .paginator { background: transparent; border-bottom: 0; color: var(--df-ink-3); }

/* date_hierarchy drill-down */
.xfull, #changelist .toplinks {
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-lg);
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: .84rem;
}
#changelist .toplinks a { color: var(--df-ink-2); }
#changelist .toplinks .date-back a { color: var(--df-accent); }

/* ---------------------------------------------------------------- forms */
.form-row { border-bottom: 1px solid var(--df-border); padding: 12px 16px; }
fieldset.module .form-row:last-child { border-bottom: 0; }
.aligned label {
  color: var(--df-ink-2);
  font-weight: 600;
  font-size: .82rem;
  padding-top: 8px;
}
.help, .form-row .help, div.help, p.help, .aligned .help {
  color: var(--df-ink-2);
  font-size: .78rem;
}
.form-row .datetime span.datetimeshortcuts a { color: var(--df-ink-3); }

input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="tel"], input[type="search"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
textarea, select, .vTextField, .vURLField, .vLargeTextField, .vForeignKeyRawIdAdminField {
  border: 1px solid var(--df-border-strong);
  border-radius: var(--df-r-sm);
  background: var(--df-surface);
  color: var(--df-ink);
  padding: 7px 10px;
  font-family: var(--font-family-primary);
  font-size: .88rem;
}
textarea { line-height: 1.5; }
select { height: auto; min-height: 32px; padding: 6px 10px; }
select[multiple] { min-height: 150px; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="number"]:focus, input[type="tel"]:focus,
input[type="search"]:focus, input[type="date"]:focus, input[type="time"]:focus,
input[type="datetime-local"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--df-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--df-accent) 20%, transparent);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--df-accent); }
select[multiple] { padding: 4px; }

.submit-row {
  background: var(--df-surface-2);
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-lg);
  padding: 12px 16px;
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.submit-row a.deletelink {
  background: var(--df-neg-soft);
  border: 1px solid var(--df-neg);
  color: var(--df-neg);
  border-radius: var(--df-r-sm);
  padding: 7px 13px;
  height: auto;
  line-height: normal;
}
.submit-row a.deletelink:hover, .submit-row a.deletelink:focus {
  /* --delete-button-bg is already themed (#AD2F4C / #8E2440), so #fff stays legible in both */
  background: var(--delete-button-bg);
  color: #fff;
  text-decoration: none;
}
.submit-row a.closelink {
  background: var(--df-surface);
  border: 1px solid var(--df-border-strong);
  color: var(--df-ink-2);
  border-radius: var(--df-r-sm);
  padding: 7px 13px;
  height: auto;
  line-height: normal;
}
.submit-row a:link.closelink:hover { background: var(--df-hover); text-decoration: none; }

.errornote {
  background: var(--df-neg-soft);
  border: 1px solid var(--df-neg);
  border-radius: var(--df-r);
  color: var(--df-neg);
  font-weight: 500;
  padding: 10px 14px;
}
ul.errorlist {
  background: transparent;
  color: var(--df-neg);
  font-size: .8rem;
  margin: 0 0 4px;
  padding: 0;
}
ul.errorlist li { background: transparent; color: var(--df-neg); padding: 0; margin: 0 0 2px; font-size: .8rem; }
.form-row.errors, td.errors, .errors input, .errors select, .errors textarea {
  border-color: var(--df-neg);
}
.form-row.errors { background: color-mix(in srgb, var(--df-neg) 6%, transparent); }

/* inlines */
.inline-group {
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-lg);
  /* a scroll container, not a clip: tabular inlines are wide and their heads are nowrap */
  overflow-x: auto;
  overflow-y: visible;
  padding: 0;
}
.inline-related h3 {
  background: var(--df-surface-2);
  border-bottom: 1px solid var(--df-border);
  color: var(--df-ink-2);
  font-family: var(--font-family-primary);
  font-size: .84rem;
  font-weight: 600;
  padding: 9px 16px;
}
/* rtl.css repositions this; a float would win over it, so use a logical margin instead */
.inline-related h3 { display: flex; align-items: center; gap: 10px; }
.inline-related h3 span.delete { float: none; margin-inline-start: auto; font-weight: 400; color: var(--df-ink-3); }
.inline-group .tabular td.original p { color: var(--df-ink-3); font-size: .78rem; }
.add-row a { color: var(--df-accent); font-weight: 500; }

/* m2m selector */
.selector .selector-available, .selector .selector-chosen {
  border: 1px solid var(--df-border);
  border-radius: var(--df-r);
  overflow: hidden;
}
.selector .selector-available-title, .selector .selector-chosen-title { border-radius: 0; }
.selector-chosen-title { background: var(--button-bg); color: #fff; }
.selector-available-title { background: var(--df-surface-2); color: var(--df-ink-3); }
.stacked ul.selector-chooser { background-color: var(--df-surface-2); border-radius: var(--df-r-pill); }
.selector .selector-filter { border-bottom: 1px solid var(--df-border); }

/* ---------------------------------------------------------------- buttons */
.button, input[type="submit"], input[type="button"], .submit-row input, a.button {
  border-radius: var(--df-r-sm);
  padding: 7px 13px;
  font-family: var(--font-family-primary);
  font-size: .85rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
}
.button:active, input[type="submit"]:active, input[type="button"]:active { filter: brightness(.96); }
.button.default, input[type="submit"].default, .submit-row input.default { font-weight: 600; }
a.deletelink { color: var(--df-neg); }

/* object-tools (Add / History / View on site) stay dark pills: their icons are white SVGs */
.object-tools a:link, .object-tools a:visited {
  border-radius: var(--df-r-pill);
  font-family: var(--font-family-primary);
  font-size: .68rem;
  letter-spacing: .04em;
  font-weight: 600;
  padding: 4px 13px;
}

/* ---------------------------------------------------------------- messages */
ul.messagelist { padding: 0; margin: 0 0 14px; }
ul.messagelist li {
  /* background-COLOR only: the shorthand carries Django's status icon */
  background-color: var(--message-success-bg);
  border: 1px solid color-mix(in srgb, var(--df-pos) 30%, transparent);
  border-radius: var(--df-r);
  color: var(--df-pos);
  font-size: .88rem;
  margin: 0 24px 8px;
  box-shadow: none;
}
ul.messagelist li.warning {
  border-color: color-mix(in srgb, var(--df-caution) 30%, transparent);
  color: var(--df-caution);
}
ul.messagelist li.error {
  border-color: color-mix(in srgb, var(--df-neg) 30%, transparent);
  color: var(--df-neg);
}
ul.messagelist li.info {
  background-color: var(--df-info-soft);
  border-color: color-mix(in srgb, var(--df-info) 30%, transparent);
  color: var(--df-info);
}

/* ---------------------------------------------------------------- readonly blocks written by our ModelAdmins */
.df-pre, .df-mono {
  font-family: var(--font-family-monospace);
  font-size: 12px;
  color: var(--df-ink);
  margin: 0;
}
.df-pre {
  white-space: pre-wrap;
  max-height: 70vh;
  overflow: auto;
  background: var(--df-paper);
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-sm);
  padding: 10px 12px;
}
.df-mono { white-space: pre-wrap; width: 95%; }
textarea.df-yaml {
  font-family: var(--font-family-monospace);
  font-size: 12px;
  line-height: 1.6;
  width: 95%;
  /* responsive.css caps every textarea at 120px below 1024px, which flattens a 42-row config editor */
  max-height: none;
  min-height: 60vh;
}
.df-warn { color: var(--df-caution); font-weight: 600; }

/* ---------------------------------------------------------------- login */
body.login { background: var(--df-paper); }
.login #header {
  justify-content: center;
  border-radius: 0;
  padding: 14px 16px;
}
/* the login page renders #header INSIDE the 26em card, so the brand row has to centre and wrap */
body.login #branding { justify-content: center; text-align: center; gap: 10px; }
body.login #site-name a:link, body.login #site-name a:visited { justify-content: center; }
.login #container {
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-r-lg);
  box-shadow: var(--df-shadow-lg);
  width: 26em;
  margin: 72px auto;
  position: relative;
}
.login #container::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--df-accent);
}
.login #content { padding: 24px 26px 26px; }
.login .form-row { border-bottom: 0; padding: 6px 0; }
.login .form-row label { color: var(--df-ink-2); font-weight: 600; font-size: .82rem; }
.login .submit-row { background: transparent; border: 0; padding: 14px 0 0; margin: 0; display: block; }
.login .submit-row input[type="submit"] {
  width: 100%;
  background: var(--df-accent);
  color: #fff;
  font-weight: 600;
  padding: 9px 13px;
}
.login .submit-row input[type="submit"]:hover { background: var(--df-accent-2); }
.login br { display: none; }
.login .password-reset-link a { color: var(--df-ink-3); font-size: .82rem; }

/* ---------------------------------------------------------------- odds and ends */
#footer { padding: 16px 24px; color: var(--df-ink-3); font-size: .8rem; }
.calendarbox, .clockbox {
  border-radius: var(--df-r);
  border: 1px solid var(--df-border);
  overflow: hidden;
}
/* Django paints these with `background: var(--accent)` and a hardcoded `color: #333`, so the
   background MUST stay light in both themes — hence explicit values here rather than a token. */
.calendar caption, .calendarbox h2, .clockbox h2 {
  background: var(--df-surface-2);
  color: var(--df-ink-2);
  font-family: var(--font-family-monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.calendar td a:hover, .calendar td a:active { background: var(--df-accent); color: #fff; }
.calendarnav { color: var(--df-ink-3); }
.timezonewarning { color: var(--df-caution); }
.select2-container--admin-autocomplete .select2-selection {
  border-color: var(--df-border-strong);
  border-radius: var(--df-r-sm);
}
.select2-container--admin-autocomplete.select2-container--focus .select2-selection {
  border-color: var(--df-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--df-accent) 20%, transparent);
}
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
  background: var(--df-accent);
  color: #fff;
}

/* ---------------------------------------------------------------- responsive
 * This file is the last stylesheet on the page, so these rules land after responsive.css. */
@media (max-width: 1024px) {
  /* responsive.css switches #header to a column but leaves base.css's align-items: center */
  #header { padding: 12px 16px; align-items: flex-start; }
  div.breadcrumbs { padding: 9px 16px; }
  ul.messagelist li { margin-inline: 16px; }
  #site-name a:link, #site-name a:visited { flex-wrap: wrap; gap: 4px 10px; }
}
@media (max-width: 767px) {
  #header { flex-direction: column; gap: 10px; }
  #user-tools { flex-wrap: wrap; gap: 8px 12px; }
  #df-switch { border-inline-start: 0; padding-inline-start: 0; flex-wrap: wrap; }
  /* the section shortcuts stay: the header is already a column here, so they cost one wrapped line
     and save a phone user a hop through the dashboard */
  .df-chip { display: none; }
  .submit-row { border-radius: var(--df-r); }
}
@media (forced-colors: active) {
  /* box-shadow rings are not rendered in this mode — put the outline back */
  input:focus, textarea:focus, select:focus, #nav-filter:focus,
  .select2-container--admin-autocomplete.select2-container--focus .select2-selection {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }
  /* nav_sidebar.css paints .current-model with SelectedItem; our rule moved the fill to the link */
  #nav-sidebar tr.current-model th a:link,
  #nav-sidebar tr.current-model th a:visited {
    background: SelectedItem;
    color: SelectedItemText;
  }
}

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