:root {
  --legacy-field: #2e4032;
  --legacy-paper: #fbfaf6;
  --legacy-gold: #d1ad66;
}

/* The top bar. One colour with the Business Operations sidebar
   (--mgmt-sidebar-deep), one face with the rest of the portal, three
   destinations and the way out. UAT walk 9. The #container prefix outranks
   Django's responsive.css, which loads after this file and would stack the
   bar into a column below 1024px. */
#container #header {
  min-height: 70px;
  box-sizing: border-box;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  background: #0b251b;
  border-bottom: 1px solid rgba(210, 188, 121, .38);
  color: var(--legacy-paper);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

#branding,
#site-name {
  min-width: 0;
  margin: 0;
}

#branding { flex: 0 0 auto; }

.legacy-admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--legacy-paper) !important;
  text-decoration: none;
}

.legacy-admin-brand img {
  width: 44px;
  height: 44px;
  display: block;
}

.legacy-admin-brand span {
  display: grid;
  line-height: 1.1;
}

.legacy-admin-brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
}

.legacy-admin-brand small {
  margin-top: 5px;
  color: #d9dfd8;
  font: 700 9px/1.1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Areas: Business Operations, System administration, Subscriber portal.
   Rendered between the brand and the person, in the sidebar's typography. */
#header .legacy-admin-nav {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  align-self: stretch;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}

#header .legacy-admin-nav a,
#header .legacy-admin-nav a:link,
#header .legacy-admin-nav a:visited {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: #dfe6df;
  font-size: .86rem;
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
  white-space: nowrap;
}

#header .legacy-admin-nav a:hover,
#header .legacy-admin-nav a:focus,
#header .legacy-admin-nav a:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, .06);
  outline: none;
}

#header .legacy-admin-nav a[aria-current="true"] {
  color: #ffffff;
  border-bottom-color: var(--legacy-gold);
}

/* The person and the way out. Django's uppercase, letter-spaced, underlined
   "Welcome, name" row is replaced by the same weight and size as the areas. */
#container #user-tools,
#container #user-tools.legacy-admin-tools {
  order: 2;
  float: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  color: var(--legacy-paper);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.legacy-admin-tools__person {
  color: #b9c6bb;
  white-space: nowrap;
}

.legacy-admin-tools__person strong {
  color: #ffffff;
  font-weight: 650;
}

#user-tools a,
#user-tools a:link,
#user-tools a:visited,
#user-tools #logout-form button {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #dfe6df;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

#user-tools a:hover,
#user-tools a:focus,
#user-tools #logout-form button:hover,
#user-tools #logout-form button:active {
  margin: 0;
  color: #ffffff;
  border-bottom-color: var(--legacy-gold);
  background: transparent;
  text-decoration: none;
}

#user-tools #logout-form { margin: 0; display: inline-flex; }

#user-tools .theme-toggle {
  margin: 0 0 0 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: transparent;
}

#user-tools .theme-toggle:hover { border-color: var(--legacy-gold); }
#user-tools .theme-toggle svg { color: #dfe6df; }

#user-tools a:focus-visible,
#user-tools #logout-form button:focus-visible,
#user-tools .theme-toggle:focus-visible,
.legacy-admin-brand:focus-visible {
  outline: 3px solid var(--legacy-gold);
  outline-offset: 3px;
}

@media (max-width: 1080px) {
  .legacy-admin-tools__person { display: none; }
  #header .legacy-admin-nav { padding-left: 14px; }
  #header .legacy-admin-nav a { padding: 0 10px; }
  #container #site-name { margin: 0; }
}

@media (max-width: 767px) {
  #container #header {
    padding: 8px 14px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 18px;
  }

  #header .legacy-admin-nav {
    order: 3;
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
    overflow-x: auto;
  }

  #header .legacy-admin-nav a { padding: 6px 10px 6px 0; }

  .legacy-admin-brand img {
    width: 38px;
    height: 38px;
  }
}

body.legacy-admin-login {
  background:
    linear-gradient(rgba(25, 42, 31, .88), rgba(25, 42, 31, .88)),
    linear-gradient(135deg, #334c39, #17291f);
}

.legacy-admin-login #header {
  border-bottom: 1px solid rgba(209, 173, 102, .55);
}

.legacy-admin-login #main,
.legacy-admin-login #content {
  padding: 0;
}

.legacy-admin-login__stage {
  min-height: calc(100vh - 87px);
  display: grid;
  place-items: center;
  padding: 48px 20px;
}

.legacy-admin-login__card {
  width: min(100%, 620px);
  box-sizing: border-box;
  padding: 42px;
  border: 1px solid #d9d7ce;
  border-top: 4px solid var(--legacy-gold);
  background: var(--legacy-paper);
  box-shadow: 0 24px 70px rgba(5, 14, 9, .34);
  color: #1d2820;
}

.legacy-admin-login__identity {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 26px;
  border-bottom: 1px solid #d9d7ce;
}

.legacy-admin-login__identity img {
  width: 58px;
  height: 58px;
}

.legacy-admin-login__identity span {
  color: #765b28;
  font: 800 11px/1.2 system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.legacy-admin-login__identity h1 {
  margin: 7px 0 8px;
  color: #1b2c20;
  font: 700 31px/1.12 Georgia, "Times New Roman", serif;
}

.legacy-admin-login__identity p,
.legacy-admin-login__audience p,
.legacy-admin-login__notice p,
.legacy-admin-login__switch {
  margin: 0;
  color: #59645c;
  font: 400 14px/1.6 system-ui, sans-serif;
}

.legacy-admin-login__audience {
  display: grid;
  grid-template-columns: 154px 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 24px;
  padding: 15px 16px;
  border-left: 3px solid var(--legacy-gold);
  background: #f2eee2;
}

.legacy-admin-login__audience strong {
  color: #334838;
  font: 800 11px/1.45 system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.legacy-admin-login__form {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.legacy-admin-login__field {
  display: grid;
  gap: 8px;
}

.legacy-admin-login__field label {
  color: #1d2820;
  font: 800 12px/1.2 system-ui, sans-serif;
}

.legacy-admin-login__field input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #8d978f;
  border-radius: 0;
  background: #fff;
  color: #1d2820;
  font: 400 16px/1.3 system-ui, sans-serif;
}

.legacy-admin-login__field input:focus {
  border-color: #2b4a57;
  outline: 3px solid rgba(43, 74, 87, .2);
  outline-offset: 1px;
}

.legacy-admin-login__submit {
  min-height: 48px;
  border: 1px solid #2e4032;
  border-radius: 0;
  background: #2e4032;
  color: #fff;
  font: 800 12px/1.2 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.legacy-admin-login__submit:hover,
.legacy-admin-login__submit:focus-visible {
  background: #1f3025;
  outline: 3px solid rgba(209, 173, 102, .45);
  outline-offset: 2px;
}

.legacy-admin-login__notice,
.legacy-admin-login__messages {
  margin-top: 24px;
  padding: 14px 16px;
  border-left: 3px solid var(--legacy-gold);
  background: #f2eee2;
}

.legacy-admin-login__notice strong {
  display: block;
  margin-bottom: 4px;
  color: #334838;
  font: 800 12px/1.3 system-ui, sans-serif;
}

.legacy-admin-login__messages {
  color: #654d1f;
  font: 700 13px/1.5 system-ui, sans-serif;
}

.legacy-admin-login__messages p {
  margin: 0;
}

.legacy-admin-login__messages--error,
.legacy-admin-login__field-error {
  color: #742f24;
}

.legacy-admin-login__switch {
  margin-top: 22px;
  text-align: center;
}

.legacy-admin-login__switch a {
  color: #2e4032;
  font-weight: 800;
}

@media (max-width: 640px) {
  .legacy-admin-login__stage {
    padding: 26px 14px;
  }

  .legacy-admin-login__card {
    padding: 28px 22px;
  }

  .legacy-admin-login__identity {
    grid-template-columns: 46px 1fr;
    gap: 13px;
  }

  .legacy-admin-login__identity img {
    width: 46px;
    height: 46px;
  }

  .legacy-admin-login__identity h1 {
    font-size: 24px;
  }

  .legacy-admin-login__audience {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* ==========================================================================
   The body of every administration page (2026-09-19).

   Until now this file styled the top bar, the nav, the user tools and the
   login page, and nothing below them. So the homepage and each application
   index rendered inside our shell (section 159) while every record list and
   every change form fell back to Django's stock design: its blue-grey
   sidebar, its blue links, its default form. A well made header sat on an
   undesigned body and the join is what the eye catches. The owner saw it
   immediately on the organization profile form.

   This is fixed at the palette rather than component by component. Django's
   admin is built on CSS custom properties, so redefining the tokens restyles
   the sidebar, the breadcrumbs, the tables, the filters, the buttons and the
   messages together, in one place, with no specificity fight and no rule
   left behind on a page nobody happened to open.

   Three things this has to get right:

   **Specificity against Django's own declarations.** `base.css` declares the
   light palette on `html[data-theme="light"], :root`, so a bare `:root` here
   loses whenever the light theme is chosen explicitly. The same selector list
   is repeated. `dark_mode.css` declares dark on `:root` inside the media
   query and on `html[data-theme="dark"]`; `html:not([data-theme="light"])`
   beats the first and the second is matched exactly.

   **Both themes, because the portal has a theme toggle.** A palette defined
   only for light would leave the dark theme reading Django blue.

   **The colours are Business Operations', not new ones.** The two portals sit
   under one top bar and a person crosses between them; a third palette would
   read as a third product. Values are `admin_portal/portal.css`.
   ========================================================================== */

html[data-theme="light"],
:root {
  --primary: #24633f;
  --secondary: #123326;
  --accent: #80662d;
  --primary-fg: #ffffff;

  --body-fg: #17221c;
  --body-bg: #f1f3ef;
  --body-quiet-color: #5c6961;
  --body-medium-color: #3c4a41;
  --body-loud-color: #0f1a13;

  --header-color: #ffffff;
  --header-branding-color: var(--legacy-gold);
  --header-bg: #0b251b;
  --header-link-color: #ffffff;

  --breadcrumbs-fg: #cfd8d2;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #123326;

  --link-fg: #1c5136;
  --link-hover-color: #0f3522;
  --link-selected-fg: #174b31;

  --hairline-color: #e2e6e1;
  --border-color: #cbd3cc;

  --error-fg: #a42e2e;

  --darkened-bg: #e8ece6;
  --selected-bg: #dde5df;
  --selected-row: #f3edda;

  --button-fg: #ffffff;
  --button-bg: #24633f;
  --button-hover-bg: #174b31;
  --default-button-bg: #174b31;
  --default-button-hover-bg: #24633f;
  --close-button-bg: #5c6961;
  --close-button-hover-bg: #3c4a41;
  --delete-button-bg: #a42e2e;
  --delete-button-hover-bg: #862424;

  --object-tools-fg: #ffffff;
  --object-tools-bg: #5c6961;
  --object-tools-hover-bg: #3c4a41;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --primary: #1d4a33;
    --secondary: #0f2a1e;
    --accent: #c2a15c;
    --primary-fg: #f2f5f1;

    --body-fg: #e6ebe6;
    --body-bg: #101511;
    --body-quiet-color: #a9b5ac;
    --body-medium-color: #c6cfc7;
    --body-loud-color: #ffffff;

    --breadcrumbs-fg: #b9c7bd;
    --breadcrumbs-link-fg: #eef3ee;
    --breadcrumbs-bg: #0f2a1e;

    --link-fg: #8fc6a6;
    --link-hover-color: #b6dcc5;
    --link-selected-fg: #8fc6a6;

    --hairline-color: #222c25;
    --border-color: #2c3a30;

    --error-fg: #e08a8a;

    --darkened-bg: #17201a;
    --selected-bg: #1d2a22;
    --selected-row: #2a2a18;

    --button-bg: #24633f;
    --button-hover-bg: #2f7d4f;
    --default-button-bg: #2f7d4f;
    --default-button-hover-bg: #24633f;
  }
}

html[data-theme="dark"] {
  --primary: #1d4a33;
  --secondary: #0f2a1e;
  --accent: #c2a15c;
  --primary-fg: #f2f5f1;

  --body-fg: #e6ebe6;
  --body-bg: #101511;
  --body-quiet-color: #a9b5ac;
  --body-medium-color: #c6cfc7;
  --body-loud-color: #ffffff;

  --breadcrumbs-fg: #b9c7bd;
  --breadcrumbs-link-fg: #eef3ee;
  --breadcrumbs-bg: #0f2a1e;

  --link-fg: #8fc6a6;
  --link-hover-color: #b6dcc5;
  --link-selected-fg: #8fc6a6;

  --hairline-color: #222c25;
  --border-color: #2c3a30;

  --error-fg: #e08a8a;

  --darkened-bg: #17201a;
  --selected-bg: #1d2a22;
  --selected-row: #2a2a18;

  --button-bg: #24633f;
  --button-hover-bg: #2f7d4f;
  --default-button-bg: #2f7d4f;
  --default-button-hover-bg: #24633f;
}

/* The few things a palette cannot carry: the face, the panel and the rail.

   Kept deliberately short. Every rule below earns its place by fixing
   something a token could not reach, and nothing here restyles a component
   Django already renders acceptably once its colours are ours. */

html[data-theme="light"],
:root {
  --legacy-panel: #ffffff;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --legacy-panel: #171d19;
  }
}

html[data-theme="dark"] {
  --legacy-panel: #171d19;
}

/* The portal speaks in a serif at heading sizes and a humanist sans in the
   body. Django's default is the system sans throughout, which is legible and
   anonymous, and anonymous is the thing the owner keeps correcting. */
#content h1,
#content-main h1,
.module h2,
.module caption,
#changelist-filter h2,
fieldset.module h2 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .1px;
}

#content h1 {
  font-size: 25px;
  font-weight: 700;
  color: var(--body-loud-color);
}

/* A record table and a change form are objects on the page, not the page
   itself. They sit on a panel with a hairline, the way every panel in
   Business Operations does. */
#content .module,
#content fieldset.module,
#changelist-filter {
  background: var(--legacy-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

#content .module caption,
#content fieldset.module h2,
#changelist-filter h2 {
  border-radius: 5px 5px 0 0;
}

/* The application rail. Django ships it the same colour as the page, so it
   reads as spilled content rather than navigation. */
#container #nav-sidebar {
  background: var(--darkened-bg);
  border-right: 1px solid var(--border-color);
}

#container #nav-sidebar .module caption {
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 11px;
}

/* The collapse control floated bare against the window edge, unstyled and
   unexplained. It is a control, so it looks like one. */
#container #toggle-nav-sidebar {
  background: var(--darkened-bg);
  border-right: 1px solid var(--border-color);
  color: var(--body-quiet-color);
}

#container #toggle-nav-sidebar:hover,
#container #toggle-nav-sidebar:focus-visible {
  background: var(--selected-bg);
  color: var(--body-loud-color);
}

/* The row of actions that commits a change. Django gives it no separation
   from the last field, so on a long form it reads as one more row. */
#content .submit-row {
  background: var(--legacy-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-top: 18px;
}

#content .button,
#content input[type="submit"],
#content input[type="button"],
#content .submit-row input,
#content .object-tools a {
  border-radius: 4px;
}

/* A field label is read far more often than it is clicked. */
#content .aligned label {
  color: var(--body-medium-color);
  font-weight: 600;
}

/* Every grid and flex child that holds a table needs its automatic minimum
   size removed, or its widest row sets the track and the page lays out wider
   than the screen (section 173). The administration shell did exactly this
   at phone width for as long as it existed. */
#container #main,
#container #content,
#container #content-main {
  min-width: 0;
}