/* ============================================================================
   TOADEX ADMIN THEME
   Re-skins the Django admin to match toadex.ca: a clean WHITE background with
   navy (#002b5b) text/chrome and brand-green (#0ad649 / #0a9e39 / #077a2c)
   accents, Manrope body + Space Grotesk display type.

   We force the light palette on every theme selector (default / light / dark) so
   the admin stays white and readable regardless of the OS colour scheme or the
   admin's light/dark toggle — matching the marketing site, which is light-only.

   NOTE: served via {% static %} — run `manage.py collectstatic` after editing
   (ManifestStaticFilesStorage 500s on an uncollected reference when DEBUG=False).
   ========================================================================== */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* toadex tokens (mirrored from toadex.ca global.css) */
  --tdx-green: #0ad649;
  --tdx-green-2: #0a9e39;
  --tdx-green-deep: #077a2c;
  --tdx-navy: #002b5b;
  --tdx-ink: #20222b;
  --tdx-muted: #565562;
  --tdx-tint: #f3f5f4;
  --tdx-line: rgba(23, 20, 45, 0.11);

  /* --- Surfaces / text: force a light, white admin, navy text ---
     Every value is !important so it beats Django's dark-mode variables (which are
     declared on a more specific selector but are NOT !important) — otherwise dark
     OS/browser settings leave light text on our white background. */
  --body-bg: #ffffff !important;
  --body-fg: var(--tdx-navy) !important;           /* most text is brand navy */
  --body-quiet-color: var(--tdx-muted) !important; /* help text / captions muted grey */
  --body-loud-color: var(--tdx-navy) !important;
  --darkened-bg: var(--tdx-tint) !important;       /* table header rows, subtle panels */
  --selected-bg: rgba(10, 214, 73, 0.08) !important;
  --selected-row: rgba(10, 214, 73, 0.12) !important;
  --hairline-color: var(--tdx-line) !important;
  --border-color: var(--tdx-line) !important;

  /* Primary / accent */
  --primary: var(--tdx-navy) !important;
  --primary-fg: #ffffff !important;
  --secondary: var(--tdx-navy) !important;
  --accent: var(--tdx-green) !important;

  /* Top header bar: light strip so the brand wordmark shows in its true colours
     (dark-blue "toad" + lime "ex"); would vanish on the old navy bar. */
  --header-color: var(--tdx-navy) !important;
  --header-branding-color: var(--tdx-navy) !important;
  --header-bg: #ffffff !important;
  --header-link-color: var(--tdx-green-deep) !important;

  /* Links */
  --link-fg: var(--tdx-green-deep) !important;
  --link-hover-color: var(--tdx-green-2) !important;
  --link-selected-fg: var(--tdx-green-2) !important;

  /* Buttons */
  --button-bg: var(--tdx-green-2) !important;
  --button-fg: #ffffff !important;
  --button-hover-bg: var(--tdx-green-deep) !important;
  --default-button-bg: var(--tdx-green-2) !important;
  --default-button-hover-bg: var(--tdx-green-deep) !important;
  --close-button-bg: #64748b !important;
  --close-button-hover-bg: #475569 !important;

  /* Object tools (Add / History pills) */
  --object-tools-fg: #ffffff !important;
  --object-tools-bg: var(--tdx-navy) !important;
  --object-tools-hover-bg: var(--tdx-green-2) !important;

  /* Type — Space Grotesk throughout (matches the toadex website). */
  --font-family-primary: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;

  color-scheme: light;
}

/* Keep the main content area white even where the admin hard-codes a bg. */
body,
#content,
.dashboard #content,
#container {
  background: #ffffff;
  color: var(--tdx-navy);
}

/* App-module headers on the dashboard / app index (e.g. "Kiosk_Backend_App") →
   navy on their light caption bar. These "section" links otherwise inherited a
   light colour. Everything else keeps its normal styling — regular links stay
   brand green via --link-fg. */
.module caption,
.module caption a,
.module caption a.section,
.module caption a:link,
.module caption a:visited,
.module > h2 a,
a.section,
a.section:link,
a.section:visited {
  color: var(--tdx-navy) !important;
}

/* Hide the light/dark toggle — the toadex admin is light-only. */
button.theme-toggle,
.theme-toggle {
  display: none !important;
}

/* Section headers (module/inline/fieldset titles): light panel with navy text
   and a green accent underline — instead of the heavy dark bars. */
.module h2,
.module caption,
.inline-group h2,
fieldset.module h2,
.dashboard .module table caption {
  background: var(--tdx-tint);
  color: var(--tdx-navy);
  border-bottom: 2px solid rgba(10, 214, 73, 0.55);
  font-family: "Space Grotesk", var(--font-family-primary);
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* Breadcrumbs: light strip, navy text, green links (was a dark bar). */
div.breadcrumbs {
  background: var(--tdx-tint);
  color: var(--tdx-muted);
  border-bottom: 1px solid var(--tdx-line);
}
div.breadcrumbs a {
  color: var(--tdx-green-deep);
}
div.breadcrumbs a:hover {
  color: var(--tdx-green-2);
}

/* Wordmark + page headings in the display font. */
#site-name,
#site-name a,
#content h1 {
  font-family: "Space Grotesk", var(--font-family-primary);
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* Bold all remaining headings + table column headers. */
h1, h2, h3, h4,
#content-main .module h2,
thead th,
thead th a.text a,
.results thead th {
  font-weight: 700;
}

/* The " Admin" suffix + wordmark link colour: navy on the light header (the
   two-tone "toadex" spans set their own colours and override this). */
#site-name a:link,
#site-name a:visited {
  color: var(--tdx-navy) !important;
}

/* Hairline so the now-white header still separates from the white body. */
#header {
  border-bottom: 1px solid var(--tdx-line);
}

/* Bolder "Welcome, … / Change password / Log out" user tools in the header. */
#user-tools,
#user-tools a {
  font-weight: 700;
}

/* Green focus ring on inputs to echo the site accent. */
.aligned input:focus,
.aligned select:focus,
.aligned textarea:focus,
#changelist-search input:focus {
  outline: 2px solid var(--tdx-green);
  outline-offset: 1px;
}

/* ============================================================================
   MENU ITEM EDITOR — nested customization groups & options
   Scoped to the Menu Item change page (body.model-menuitem) so other admins'
   inlines are untouched. Goal: (1) make it obvious options belong to their group
   and (2) tell adjacent options apart. Targets both Django's classic inline
   classes and django-nested-admin's djn-* classes for resilience.
   ========================================================================== */

/* Each customization GROUP renders as a bordered white card. */
.model-menuitem .inline-group > .inline-related,
.model-menuitem .djn-group > .djn-item {
  border: 1px solid var(--tdx-line);
  border-radius: 12px;
  margin-bottom: 20px;
  background: #ffffff;
  overflow: hidden;
}

/* Group / option row headers: tinted bar, navy display type, green accent line. */
.model-menuitem .inline-related > h3,
.model-menuitem .djn-item > h3 {
  background: var(--tdx-tint);
  color: var(--tdx-navy);
  font-family: "Space Grotesk", var(--font-family-primary);
  font-weight: 700;
  border-bottom: 2px solid rgba(10, 214, 73, 0.55);
}

/* The OPTIONS inline nested inside a group: indent + a green left "rail" so the
   options clearly sit INSIDE the group above them. */
.model-menuitem .inline-related .inline-group,
.model-menuitem .djn-item .djn-group {
  margin: 10px 14px 14px 20px;
  padding-left: 16px;
  border-left: 3px solid var(--tdx-green);
}

/* Each OPTION → its own light-grey card with a clear gap/divider between them. */
.model-menuitem .inline-related .inline-group .inline-related,
.model-menuitem .djn-item .djn-group .djn-item {
  background: var(--tdx-tint);
  border: 1px solid var(--tdx-line);
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 6px 12px 12px;
}