:root,
html[data-theme="light"],
html[data-theme="auto"] {
  --wawa-bg: #f7f5fc;
  --wawa-surface: #fff;
  --wawa-surface-muted: #f0edfa;
  --wawa-ink: #211a3b;
  --wawa-muted: #6f6882;
  --wawa-medium: #504963;
  --wawa-link: #4934ca;
  --wawa-link-hover: #2f209e;
  --wawa-link-selected: #3525b8;
  --wawa-border: #ded8ef;
  --wawa-hairline: #ebe7f4;
  --wawa-selected: #e9e4fb;
  --wawa-selected-row: #fff3d6;
  --wawa-shadow: 0 18px 44px rgba(56, 41, 129, 0.1);
}

html[data-theme="dark"] {
  --wawa-bg: #181522;
  --wawa-surface: #231f2f;
  --wawa-surface-muted: #302a40;
  --wawa-ink: #f4f1fb;
  --wawa-muted: #bdb6cb;
  --wawa-medium: #d9d3e4;
  --wawa-link: #b7a8ff;
  --wawa-link-hover: #ffce69;
  --wawa-link-selected: #d7ceff;
  --wawa-border: #514763;
  --wawa-hairline: #383144;
  --wawa-selected: #39314c;
  --wawa-selected-row: #443a52;
  --wawa-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --wawa-bg: #181522;
    --wawa-surface: #231f2f;
    --wawa-surface-muted: #302a40;
    --wawa-ink: #f4f1fb;
    --wawa-muted: #bdb6cb;
    --wawa-medium: #d9d3e4;
    --wawa-link: #b7a8ff;
    --wawa-link-hover: #ffce69;
    --wawa-link-selected: #d7ceff;
    --wawa-border: #514763;
    --wawa-hairline: #383144;
    --wawa-selected: #39314c;
    --wawa-selected-row: #443a52;
    --wawa-shadow: 0 18px 44px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}

:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"] {
  --font-family-primary: "Jost", sans-serif;
  --primary: #6249eb;
  --secondary: #4934ca;
  --accent: #ffce69;
  --primary-fg: #fff;
  --body-fg: var(--wawa-ink);
  --body-bg: var(--wawa-surface);
  --body-quiet-color: var(--wawa-muted);
  --body-medium-color: var(--wawa-medium);
  --body-loud-color: var(--wawa-ink);
  --header-color: #fff;
  --header-branding-color: #211a3b;
  --header-bg: #fff;
  --header-link-color: #4934ca;
  --breadcrumbs-fg: #eeeaff;
  --breadcrumbs-link-fg: #fff;
  --breadcrumbs-bg: #4934ca;
  --link-fg: var(--wawa-link);
  --link-hover-color: var(--wawa-link-hover);
  --link-selected-fg: var(--wawa-link-selected);
  --hairline-color: var(--wawa-hairline);
  --border-color: var(--wawa-border);
  --darkened-bg: var(--wawa-surface-muted);
  --selected-bg: var(--wawa-selected);
  --selected-row: var(--wawa-selected-row);
  --button-fg: #fff;
  --button-bg: #4934ca;
  --button-hover-bg: #3525b8;
  --default-button-bg: #4934ca;
  --default-button-hover-bg: #3525b8;
  --close-button-bg: #5e566f;
  --close-button-hover-bg: #40384f;
  --object-tools-fg: #fff;
  --object-tools-bg: #4934ca;
  --object-tools-hover-bg: #3525b8;
}

body {
  background: var(--wawa-bg);
  color: var(--wawa-ink);
  font-family: "Jost", sans-serif;
}

button,
input,
optgroup,
select,
textarea {
  font-family: "Jost", sans-serif;
}

#header {
  min-height: 52px;
  padding: 12px 28px;
  background:
    radial-gradient(circle at 72% -90%, rgba(114, 87, 255, 0.18), transparent 42%),
    #fff;
  border-top: 4px solid #4934ca;
  border-bottom: 1px solid #e4deef;
  box-shadow: 0 10px 32px rgba(45, 34, 123, 0.12);
  color: #211a3b;
}

#branding,
#site-name {
  display: flex;
  align-items: center;
}

.wawa-brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #211a3b;
  text-decoration: none;
}

.wawa-brand:focus-visible {
  border-radius: 8px;
  outline: 3px solid rgba(85, 64, 232, 0.28);
  outline-offset: 5px;
}

.wawa-brand__logo {
  display: block;
  width: 175px;
  height: 50px;
  object-fit: contain;
}

.wawa-brand__context {
  padding-left: 18px;
  border-left: 1px solid #d7d0e5;
  color: #59516c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
}

#user-tools {
  color: #6f6882;
  font-size: 12px;
  letter-spacing: 0.04em;
}

#user-tools strong {
  color: #211a3b;
}

#user-tools a,
#logout-form button {
  color: #4934ca;
  font-weight: 700;
  text-decoration-color: rgba(73, 52, 202, 0.34);
}

#user-tools a:hover,
#logout-form button:hover {
  color: #2f209e;
}

.theme-toggle {
  color: #4934ca;
}

.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
  color: #fff;
  fill: #4934ca;
}

div.breadcrumbs {
  padding: 11px 28px;
  background: linear-gradient(90deg, #3c2cc1, #6249eb 68%, #7257ff);
  color: #e9e4ff;
  font-size: 12px;
  letter-spacing: 0.02em;
}

div.breadcrumbs a {
  color: #fff;
  font-weight: 700;
}

.main > .content {
  padding: 28px 32px 40px;
}

#content h1 {
  margin: 0 0 24px;
  color: var(--wawa-ink);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

#content h2 {
  color: var(--wawa-ink);
}

.module,
.inline-group,
#changelist-filter,
#content-related .module {
  overflow: hidden;
  border: 1px solid var(--wawa-border);
  border-radius: 14px;
  background: var(--wawa-surface);
  box-shadow: var(--wawa-shadow);
}

.module h2,
.module caption,
.inline-group h2 {
  padding: 12px 16px;
  background: linear-gradient(120deg, #3525b8, #6249eb);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.module caption a.section:link,
.module caption a.section:visited,
.module h2 a:link,
.module h2 a:visited,
.inline-group h2 a:link,
.inline-group h2 a:visited {
  color: #fff;
}

.module caption a.section:hover,
.module caption a.section:focus,
.module h2 a:hover,
.module h2 a:focus,
.inline-group h2 a:hover,
.inline-group h2 a:focus {
  color: #fff4cf;
}

.dashboard #content {
  width: auto;
}

.dashboard #content-main {
  min-width: 0;
}

.dashboard .module table th,
.dashboard .module table td {
  padding: 13px 16px;
}

.dashboard .module table th a {
  color: var(--wawa-ink);
  font-weight: 700;
}

.dashboard .module table tr:hover {
  background: var(--wawa-surface-muted);
}

#content-related {
  margin-right: -310px;
  width: 280px;
}

#content-related .module h2 {
  background: var(--wawa-surface-muted);
  color: var(--wawa-ink);
}

#content-related .module h3 {
  color: var(--wawa-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.object-tools a,
.button,
input[type="submit"],
input[type="button"],
.submit-row input,
a.button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6249eb, #4934cf);
  box-shadow: 0 7px 16px rgba(85, 64, 232, 0.2);
  color: #fff;
  font-weight: 700;
}

.object-tools a:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.submit-row input:hover,
a.button:hover {
  background: linear-gradient(135deg, #7257ff, #3525b8);
}

.submit-row {
  border: 1px solid var(--wawa-border);
  border-radius: 14px;
  background: var(--wawa-surface-muted);
}

.submit-row a.deletelink {
  border-radius: 999px;
}

thead th,
tfoot td {
  background: var(--wawa-surface-muted);
  color: var(--wawa-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

thead th a:link,
thead th a:visited {
  color: var(--wawa-ink);
}

.row1,
.row2 {
  background: var(--wawa-surface);
}

tr:hover td,
tr:hover th {
  background: var(--wawa-surface-muted);
}

input,
textarea,
select,
.vTextField {
  border-color: var(--wawa-border);
  border-radius: 8px;
  background: var(--wawa-surface);
  color: var(--wawa-ink);
}

input:focus,
textarea:focus,
select:focus,
.vTextField:focus {
  border-color: #7257ff;
  outline: 3px solid rgba(114, 87, 255, 0.16);
}

#nav-sidebar {
  border-right: 1px solid var(--wawa-border);
  background: var(--wawa-surface);
  box-shadow: 10px 0 30px rgba(45, 34, 123, 0.04);
}

#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: #fff;
}

#nav-sidebar .current-model {
  background: var(--wawa-surface-muted);
}

#nav-filter {
  margin: 12px 10px;
  width: calc(100% - 20px);
  border: 1px solid var(--wawa-border);
  border-radius: 999px;
  background: var(--wawa-surface-muted);
}

#nav-sidebar .module {
  margin: 0 10px 10px;
}

.toggle-nav-sidebar {
  border-right-color: var(--wawa-border);
  background: var(--wawa-surface-muted);
  color: var(--wawa-link);
}

.paginator {
  border-color: var(--wawa-border);
  background: var(--wawa-surface);
}

.messagelist li {
  border-radius: 10px;
  box-shadow: var(--wawa-shadow);
}

body.login {
  background:
    radial-gradient(circle at 20% 10%, rgba(114, 87, 255, 0.25), transparent 30%),
    radial-gradient(circle at 85% 90%, rgba(255, 154, 92, 0.18), transparent 25%),
    var(--wawa-bg);
}

.login #container {
  overflow: hidden;
  width: min(440px, calc(100% - 32px));
  border: 1px solid var(--wawa-border);
  border-radius: 22px;
  background: var(--wawa-surface);
  box-shadow: 0 28px 80px rgba(45, 34, 123, 0.2);
}

.login #header {
  position: relative;
  justify-content: center;
  padding: 24px;
  border-bottom: 1px solid #e4deef;
}

.login #branding {
  flex: 1;
  justify-content: center;
}

.login .wawa-brand__context {
  display: none;
}

.login .wawa-brand__logo {
  width: 196px;
  height: 56px;
}

.login .theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px;
  border: 1px solid #ded8ef;
  border-radius: 999px;
  background: #f3f0fc;
  color: #4934ca;
}

.login #content {
  padding: 32px;
}

.login .submit-row {
  padding: 0;
  border: 0;
  background: transparent;
}

.login .submit-row input {
  width: 100%;
  padding: 12px 20px;
}

@media (max-width: 767px) {
  #header {
    padding: 10px 16px;
  }

  .wawa-brand__logo {
    width: 145px;
    height: 42px;
  }

  .wawa-brand__context {
    display: none;
  }

  .main > .content {
    padding: 22px 10px 32px;
  }

  /* Django's responsive.css gives #content its own 15px gutter (ID selector,
     loaded after this file) on top of the .content padding, double-insetting
     the form on narrow screens. The `body` prefix wins specificity so we can
     drop the redundant horizontal part and let the card use the screen width. */
  body #content {
    padding-right: 0;
    padding-left: 0;
  }

  div.breadcrumbs {
    padding-right: 16px;
    padding-left: 16px;
  }

  /* Forms — Django's responsive.css (which loads AFTER this file) sizes rows
     with `width: calc(100vw - 30px)` and `padding: 15px 0`, ignoring this
     theme's padded card so fields overflow / hug the module edges. The #content
     prefix raises specificity so these win regardless of load order: refit each
     row to the card and add consistent horizontal padding. */
  #content .form-row {
    box-sizing: border-box;
    padding: 14px 12px;
  }

  #content .aligned .form-row > div {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  #content .form-row input[type="text"],
  #content .form-row input[type="url"],
  #content .form-row input[type="email"],
  #content .form-row input[type="tel"],
  #content .form-row input[type="number"],
  #content .form-row input[type="password"],
  #content .form-row select,
  #content .form-row textarea,
  #content .form-row .vTextField,
  #content .form-row .vURLField,
  #content .form-row .readonly,
  #content .form-row .wawa-preview {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  /* Changelist — universal responsive layout for EVERY list (current or
     future, with no per-model code). On mobile each row becomes a stacked card
     and each cell a "Column: value" line. The column labels are copied onto
     the cells from the table headers by wawa_responsive_list.js. */

  /* Inset the toolbar and action bar from the module edges so nothing hugs the
     border. The `body` prefix beats Django's later same-specificity
     `#changelist .actions` rule; cards (below) use margin to avoid overflow. */
  #changelist #toolbar,
  body #changelist .actions {
    padding-left: 12px;
    padding-right: 12px;
  }

  #result_list thead {
    display: none;
  }

  #result_list,
  #result_list tbody,
  #result_list tbody tr,
  #result_list tbody tr > th,
  #result_list tbody tr > td {
    display: block;
    width: auto;
  }

  #result_list tbody tr {
    margin: 0 12px 12px;
    border: 1px solid var(--wawa-border);
    border-radius: 12px;
    background: var(--wawa-surface);
    overflow: hidden;
  }

  #result_list tbody tr > th,
  #result_list tbody tr > td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 14px;
    border: 0;
    border-bottom: 1px solid var(--wawa-hairline);
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #result_list tbody tr > :last-child {
    border-bottom: 0;
  }

  #result_list tbody tr > [data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    color: var(--wawa-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
  }

  /* The row-select checkbox cell has no column header — show it left-aligned
     at the top of the card without a label. */
  #result_list tbody tr > .action-checkbox-column {
    justify-content: flex-start;
  }
  #result_list tbody tr > .action-checkbox-column::before {
    content: none;
  }
}