/* ============================================================
   Seije Admin — design system

   Theming only: this stylesheet recolors Django's native admin and
   adds a handful of bespoke components (nav mark, view-as pill, status
   pills, card framing). Dimensional properties — font-size, line-height,
   padding, margin, letter-spacing — are intentionally left to Django's
   own admin CSS so spacing/typography match the native rhythm. We only
   set dimensions on elements Django does not style itself.

   Palette: Ink #111827 · Cloud #F7F8FA · Surface #FFFFFF
            Line #E5E7EB · Muted #6B7280
            Blue #2563EB · Teal #14B8A6 · Amber #F59E0B
            Coral #F97373 · Violet #8B5CF6
   ============================================================ */

/* --- CSS variables (override Django's --primary etc.) -------
   The --s-* palette tokens live in seije-tokens.css, which loads
   before this file (see templates/admin/base_site.html). This block
   only maps those tokens onto Django's own admin variables. */
:root {
  /* Django admin overrides */
  --primary:                  var(--s-blue);
  --secondary:                var(--s-ink);
  --accent:                   var(--s-teal);
  --primary-fg:               #ffffff;
  --header-bg:                var(--s-surface);
  --header-color:             var(--s-ink);
  --header-branding-color:    var(--s-ink);
  --header-link-color:        var(--s-blue);
  --breadcrumbs-bg:           var(--s-surface);
  --breadcrumbs-fg:           var(--s-muted);
  --breadcrumbs-link-fg:      var(--s-blue);
  --link-fg:                  var(--s-blue);
  --link-hover-color:         var(--s-blue-dark);
  --button-bg:                var(--s-blue);
  --button-hover-bg:          var(--s-blue-dark);
  --button-fg:                #ffffff;
  --default-button-bg:        var(--s-blue);
  --default-button-hover-bg:  var(--s-blue-dark);
  --close-button-bg:          var(--s-coral);
  --close-button-hover-bg:    #e05555;
  --object-tools-fg:          #ffffff;
  --object-tools-bg:          var(--s-teal);
  --object-tools-hover-bg:    var(--s-teal-dark);
  --darkened-bg:              var(--s-cloud);
  --selected-bg:              #EFF6FF;
  --selected-row:             #EFF6FF;
  --body-bg:                  var(--s-cloud);
  --body-fg:                  var(--s-ink);
  --body-quiet-color:         var(--s-muted);
}

/* --- Typography: Inter (family only, sizes stay native) ----- */
body,
input, select, textarea, button {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Page background ----------------------------------------- */
body,
#container {
  background: var(--s-cloud);
  color: var(--s-ink);
}

/* --- Header: compact light shell with a thin Seije accent ------ */
#header {
  background: var(--s-surface);
  border-bottom: 1px solid var(--s-line);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  color: var(--s-ink);
  min-height: 52px;
  height: 52px;
  padding: 0 28px;
  position: relative;
}

#header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: linear-gradient(180deg, var(--s-blue), var(--s-teal));
}

/* --- Branding: logo + nav-mark (bespoke — needs dimensions) -- */
#branding {
  align-items: center;
  display: flex;
  height: 52px;
}

.seije-admin-brand a {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  height: 52px;
  line-height: 1;
  text-decoration: none;
}

.seije-nav-mark {
  display: none;
  width: 8px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--s-blue), var(--s-teal));
  flex-shrink: 0;
}

.seije-admin-logo {
  display: block;
  height: 28px;
  width: 94px;
}

.seije-admin-brand-text {
  display: none;
}

#user-tools {
  color: var(--s-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 52px;
  padding: 0;
}

#user-tools a:link,
#user-tools a:visited {
  color: var(--s-blue);
  border-bottom: none;
}

#user-tools a:hover {
  color: var(--s-blue-dark);
}

/* --- Breadcrumbs -------------------------------------------- */
div.breadcrumbs {
  background: var(--breadcrumbs-bg);
  color: var(--breadcrumbs-fg);
  border-bottom: 1px solid var(--s-line);
  font-size: 13px;
  padding: 10px 35px;
}

div.breadcrumbs a {
  color: var(--breadcrumbs-link-fg);
  font-weight: 650;
}

div.breadcrumbs a:hover {
  color: var(--s-blue-dark);
}

#content {
  background: var(--s-cloud);
  padding: 22px 35px 28px;
}

/* --- Modules: tighter gap + narrower dashboard width ---------- */
.module {
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 14px;   /* native is 30px — too airy */
}

/* Dashboard columns: pull in from native 600px */
.dashboard #content {
  width: 540px;
}

/* Recent-actions sidebar stays flat on the page, per Django native */
#content-related .module {
  background: none;
}

/* Section headers: light tint + ink text instead of dark bars.
   Padding/size/transform inherited from Django. */
.module h2,
.module caption,
.inline-group h2 {
  background: #EEF2F7;
  color: var(--s-blue);
  border-bottom: 1px solid var(--s-line);
  font-size: 12px;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.selector-chosen h2 {
  background: var(--s-blue);
  color: var(--primary-fg);
}

/* Gradient accent rule under each section title (bespoke) */
.module caption,
.module > h2:first-child {
  position: relative;
}

.module caption::after,
.module > h2:first-child::after {
  content: "";
  position: absolute;
  left: 10px;            /* aligns with Django's caption padding */
  bottom: -1px;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--s-blue), var(--s-teal));
}

/* Dashboard app rows: hairline separators + soft hover (color only) */
.dashboard .module table th,
.dashboard .module table td {
  border-bottom: 1px solid var(--s-line);
  padding-top: 7px;
  padding-bottom: 7px;
}

.dashboard .module table tr:last-child th,
.dashboard .module table tr:last-child td {
  border-bottom: none;
}

.dashboard .module table tr:hover th,
.dashboard .module table tr:hover td {
  background: #F8FAFC;
}

/* --- Recent actions (color only) ---------------------------- */
#recent-actions-module h2 {
  background: #EEF2F7;
}

#recent-actions-module .addlink {
  color: #16A34A;
  font-weight: 650;
}

/* Deleted-object entries reuse the .deletelink class — keep them quiet
   (muted text + coral strikethrough), never a full coral block. */
#recent-actions-module ul.actionlist li.deletelink {
  background-color: transparent;
}

#recent-actions-module ul.actionlist li.deletelink a {
  color: var(--s-muted);
  text-decoration: line-through;
  text-decoration-color: var(--s-coral);
}

/* --- Content heading (color only) --------------------------- */
#content h1 {
  color: var(--s-ink);
  font-size: 23px;
  font-weight: 650;
  line-height: 1.2;
  margin: 0 0 18px;
}

/* --- Sidebar nav -------------------------------------------- */
#nav-sidebar {
  background: var(--s-surface);
  border-right: 1px solid var(--s-line);
  color: var(--s-ink);
}

#nav-sidebar table,
#nav-sidebar tbody,
#nav-sidebar tr,
#nav-sidebar th,
#nav-sidebar td {
  background: var(--s-surface);
}

#nav-sidebar .module h2,
#nav-sidebar .module caption {
  background: #EEF2F7;
  border-bottom: 1px solid var(--s-line);
  color: var(--s-blue);
  font-weight: 500 !important;
}

#nav-sidebar th,
#nav-sidebar td {
  border-bottom: 1px solid var(--s-line);
  color: var(--s-ink);
}

#nav-sidebar .current-model,
#nav-sidebar .current-model th,
#nav-sidebar .current-model td {
  background: var(--selected-bg);
}

#nav-sidebar .current-app .section:link,
#nav-sidebar .current-app .section:visited {
  color: var(--s-blue);
}

#nav-sidebar a:link,
#nav-sidebar a:visited {
  color: var(--s-ink);
}

#nav-sidebar a:hover {
  color: var(--s-blue-dark);
}

#nav-sidebar .addlink,
#nav-sidebar .addlink:link,
#nav-sidebar .addlink:visited {
  color: #15803D;
  font-weight: 650;
}

#nav-sidebar input[type="search"],
#nav-sidebar input[type="text"] {
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  color: var(--s-ink);
}

#nav-sidebar input::placeholder {
  color: var(--s-muted);
}

/* --- Changelist table (color only) -------------------------- */
/* Scoped under body.change-list so these win over Django's
   changelists.css, which loads after this file on list pages and
   otherwise overrides the equal-specificity #changelist table rules. */
body.change-list #changelist table thead th {
  background: #FBFCFD;
  color: var(--s-muted);
  border-bottom: 1px solid var(--s-line);
}

body.change-list #changelist table {
  border: 1px solid var(--s-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--s-surface);
}

body.change-list #changelist table tbody tr:hover td {
  background: #EFF6FF;
}

/* --- Buttons (color, radius + standard sizing) -------------- */
/* Default size: 36px tall, 0 16px padding, 13px. Touch targets are
   bumped to >=44px on coarse pointers near the bottom of this file. */
.button,
input[type=submit],
input[type=button],
.submit-row input,
a.button {
  background: var(--s-blue);
  color: #ffffff;
  border: none;
  border-radius: var(--s-radius-control);
  box-sizing: border-box;
  height: var(--s-control-h);
  padding: 0 var(--s-control-pad-x);
  font-size: var(--s-control-font);
  text-transform: none;   /* sentence case — see DESIGN_STANDARDS.md */
}

/* Link-buttons need flex to honor height and center their label. */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.button:hover,
input[type=submit]:hover,
input[type=button]:hover,
a.button:hover {
  background: var(--s-blue-dark);
  color: #ffffff;
}

a.button:link,
a.button:visited {
  color: #ffffff;
}

.button.default,
input[type=submit].default {
  background: var(--s-blue);
}

.button.seije-compact-button,
a.button.seije-compact-button {
  height: var(--s-control-h-compact);
  padding: 0 var(--s-control-pad-x-compact);
  font-size: var(--s-control-font-compact);
}
.button.seije-worksheet-button,
a.button.seije-worksheet-button {
  height: 26px;
  min-height: 0;
  padding: 0 10px;
  font-size: 12px;
  line-height: 24px;
}

.seije-worksheet-actions {
  display: inline-block;
  max-width: 100%;
  text-align: left;
  vertical-align: top;
}

.seije-worksheet-button-row {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
}

.seije-worksheet-button-gap {
  display: inline-block;
  flex: 0 0 8px;
  min-width: 8px;
  width: 8px;
}

.seije-worksheet-help,
.aligned .form-row .seije-worksheet-actions .seije-worksheet-help {
  display: block;
  margin: 6px 0 0;
  max-width: 100%;
  padding: 0;
  text-align: left;
}

/* Secondary / object-tools (color, radius, alignment) */
.object-tools form {
  margin: 0;
}

.object-tools a:not(.toolbar-button):link,
.object-tools a:not(.toolbar-button):visited {
  background: var(--s-teal);
  color: var(--object-tools-fg) !important;
  border-radius: 6px;
  font-weight: 400 !important;
  text-transform: none;   /* override Django's object-tools uppercase */
}

.object-tools button:not(.toolbar-button) {
  background: var(--s-teal);
  border: none;
  border-radius: 6px;
  color: var(--object-tools-fg) !important;
  cursor: pointer;
  font: inherit;
  font-weight: 400 !important;
  text-transform: none;   /* override Django's object-tools uppercase */
}

.object-tools a:not(.toolbar-button):hover,
.object-tools a:not(.toolbar-button):focus,
.object-tools button:not(.toolbar-button):hover,
.object-tools button:not(.toolbar-button):focus {
  background: var(--s-teal-dark);
  color: var(--object-tools-fg) !important;
  font-weight: 400 !important;
}

body.change-list .object-tools form {
  display: inline-flex;
  margin: 0;
}

body.change-list .object-tools a:not(.toolbar-button),
body.change-list .object-tools a:not(.toolbar-button):link,
body.change-list .object-tools a:not(.toolbar-button):visited,
body.change-list .object-tools a:not(.toolbar-button):hover,
body.change-list .object-tools a:not(.toolbar-button):focus,
body.change-list .object-tools button:not(.toolbar-button),
body.change-list .object-tools button:not(.toolbar-button):hover,
body.change-list .object-tools button:not(.toolbar-button):focus {
  align-items: center;
  box-sizing: border-box;
  color: var(--object-tools-fg) !important;
  display: inline-flex;
  font-size: 12px;
  font-weight: 400 !important;
  height: 32px;
  justify-content: center;
  line-height: 32px;
  min-height: 32px;
  padding: 0 14px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}

body.change-list .object-tools a.addlink:not(.toolbar-button),
body.change-list .object-tools a.viewsitelink:not(.toolbar-button) {
  background-image: none;
}

/* Delete button — scoped to submit row / object tools so it doesn't
   touch recent-actions log entries that share the .deletelink class. */
.submit-row a.deletelink,
.object-tools a.deletelink,
.submit-row a.deletelink:link,
.submit-row a.deletelink:visited {
  background: var(--s-coral);
  color: #ffffff;
  border-radius: 6px;
}

.submit-row a.deletelink:hover,
.object-tools a.deletelink:hover {
  background: #e05555;
  color: #ffffff;
}

/* --- Forms & panels (framing only) -------------------------- */
.form-row {
  border-bottom: 1px solid var(--s-line);
}

fieldset {
  background: var(--s-surface);
  border: 1px solid var(--s-line);
  border-radius: 8px;
}

.submit-row {
  background: var(--s-surface);
  border-top: 1px solid var(--s-line);
  border-radius: 0 0 8px 8px;
}

/* Change-form action row uses the Compact button size — this dense row of
   Save / Save-and-continue / Delete reads as bulky at the Default 36px.
   (DESIGN_STANDARDS.md §3 Size.) Same selectors as the default rule, declared
   later, so equal specificity resolves to compact here. */
.submit-row input,
.submit-row .button,
.submit-row a.button,
.submit-row a.deletelink {
  height: var(--s-control-h-compact);
  padding: 0 var(--s-control-pad-x-compact);
  font-size: var(--s-control-font-compact);
}

.submit-row a.deletelink {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
}

body.delete-confirmation .submit-row input[type=submit],
body.delete-confirmation .submit-row a.button,
body.delete-confirmation .submit-row a.cancel-link {
  box-sizing: border-box;
  height: var(--s-control-h-compact);
  min-height: 0;
  padding: 0 var(--s-control-pad-x-compact);
  font-size: var(--s-control-font-compact);
  line-height: var(--s-control-h-compact);
  vertical-align: middle;
}

body.delete-confirmation .submit-row a.button,
body.delete-confirmation .submit-row a.cancel-link {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
}

body.delete-confirmation form input[type=submit],
body.delete-confirmation form a.button,
body.delete-confirmation form a.cancel-link {
  box-sizing: border-box;
  height: var(--s-control-h);
  min-height: var(--s-control-h);
  padding: 0 var(--s-control-pad-x);
  font-size: var(--s-control-font);
  vertical-align: middle;
}

body.delete-confirmation form input[type=submit] {
  background: var(--s-coral);
  color: #ffffff;
  line-height: var(--s-control-h);
}

body.delete-confirmation form input[type=submit]:hover,
body.delete-confirmation form input[type=submit]:focus {
  background: #e05555;
  color: #ffffff;
}

body.delete-confirmation form a.button,
body.delete-confirmation form a.button:link,
body.delete-confirmation form a.button:visited,
body.delete-confirmation form a.cancel-link,
body.delete-confirmation form a.cancel-link:link,
body.delete-confirmation form a.cancel-link:visited {
  align-items: center;
  background: var(--s-blue);
  color: #ffffff;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
}

body.delete-confirmation form a.button:hover,
body.delete-confirmation form a.button:focus,
body.delete-confirmation form a.cancel-link:hover,
body.delete-confirmation form a.cancel-link:focus {
  background: var(--s-blue-dark);
  color: #ffffff;
}

.seije-request-approval,
.seije-request-approval-form {
  max-width: 760px;
}

.seije-request-approval-panel {
  overflow: hidden;
}

.seije-request-approval-panel h2 {
  background: #EEF2F7;
  border-bottom: 1px solid var(--s-line);
  color: var(--s-blue);
  font-size: 13px;
  letter-spacing: 0;
  margin: 0;
  padding: 10px 16px;
  text-transform: none;
}

.seije-request-approval-intro {
  color: var(--s-muted);
  margin: 12px 16px 0;
  max-width: 680px;
}

.seije-request-approval-row {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: 128px minmax(0, 520px);
  padding: 14px 16px;
}

.seije-request-approval-row > label {
  color: var(--s-ink);
  font-weight: 650;
  padding-top: 8px;
}

.seije-request-approval-field {
  min-width: 0;
}

.seije-request-approval-field textarea {
  box-sizing: border-box;
  max-width: 520px;
  width: 100%;
}

.seije-request-approval-field .help {
  margin: 6px 0 0;
}

.seije-request-approval-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  padding: 12px 16px;
}

.seije-request-approval-actions input,
.seije-request-approval-actions a.button {
  margin: 0;
}

.seije-request-approval-actions a.button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .seije-request-approval-row {
    grid-template-columns: 1fr;
  }

  .seije-request-approval-row > label {
    padding-top: 0;
  }

  .seije-request-approval-actions {
    flex-wrap: wrap;
  }
}
/* --- Admin datepicker popup (framing, contrast, navigation) -- */
body .calendarbox,
body .clockbox {
  background: var(--s-surface);
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.18);
  color: var(--s-ink);
  overflow: hidden;
}

body .calendarbox caption,
body .clockbox h2 {
  background: #EEF2F7;
  border-bottom: 1px solid var(--s-line);
  color: var(--s-blue);
}

body .calendarbox .calendarnav-previous,
body .calendarbox .calendarnav-next {
  align-items: center;
  background: var(--s-surface);
  border: 1px solid #CBD5E1;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--s-blue);
  display: inline-flex;
  font-size: 0;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  text-decoration: none;
  text-indent: 0;
  top: 5px;
  width: 22px;
  z-index: 2;
}

body .calendarbox .calendarnav-previous {
  left: 10px;
}

body .calendarbox .calendarnav-next {
  right: 10px;
}

body .calendarbox .calendarnav-previous::before,
body .calendarbox .calendarnav-next::before {
  font-size: 14px;
  line-height: 1;
}

body .calendarbox .calendarnav-previous::before {
  content: "<";
}

body .calendarbox .calendarnav-next::before {
  content: ">";
}

body .calendarbox .calendarnav-previous:hover,
body .calendarbox .calendarnav-previous:focus,
body .calendarbox .calendarnav-next:hover,
body .calendarbox .calendarnav-next:focus {
  background: #EFF6FF;
  border-color: var(--s-blue);
  color: var(--s-blue-dark);
}

body .calendarbox .calendar,
body .calendarbox .calendar table,
body .clockbox ul {
  background: var(--s-surface);
}

body .calendarbox .calendar th {
  background: #FBFCFD;
  border-bottom: 1px solid var(--s-line);
  color: var(--s-muted);
}

body .calendarbox .calendar td {
  background: var(--s-surface);
  border-top: 1px solid #EEF2F7;
}

body .calendarbox .calendar-shortcuts,
body .calendarbox .calendar-cancel {
  background: #F8FAFC;
  border-top: 1px solid var(--s-line);
}

/* --- Status pills (bespoke — list_display readonly fields) -- */
.seije-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.seije-pill--ready    { background: #CCFBF1; color: var(--s-teal-dark); }
.seije-pill--pending  { background: #FEF3C7; color: #92400E; }
.seije-pill--issue    { background: #FEE2E2; color: #B91C1C; }
.seije-pill--ai       { background: #EDE9FE; color: #6D28D9; }
.seije-pill--muted    { background: var(--s-line); color: var(--s-muted); }
.seije-pill--blue     { background: #DBEAFE; color: var(--s-blue-dark); }

/* --- Inline groups (framing only) --------------------------- */
.inline-group {
  border: 1px solid var(--s-line);
  border-radius: 8px;
  overflow: hidden;
}

.inline-group .tabular table {
  border: none;
}

/* --- Login page (framing/color only) ------------------------ */
.login #container {
  border-radius: 12px;
  border-top: 4px solid var(--s-teal);
  box-shadow: 0 20px 44px rgba(17, 24, 39, 0.10);
}

.login #header {
  background: var(--s-surface);
  border-bottom: 1px solid var(--s-line);
  justify-content: center;
}

.login #site-name.seije-admin-brand {
  justify-content: center;
}

.login .seije-admin-brand a {
  flex-direction: column;
  gap: 10px;
}

.login .seije-nav-mark {
  /* The nav-mark is a header-only accent. On the login screen it read as a
     stray floating bar above the logo, so keep it hidden here (matching the
     general rule) and let login show just the centered logo + theme toggle. */
  display: none;
}

.login .seije-admin-logo {
  height: 34px;
  width: 114px;
}

/* --- Admin context toolbar ---------------------------------- */
.seije-admin-context-bar {
  align-items: center;
  background: var(--s-surface);
  border-bottom: 1px solid var(--s-line);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  min-height: 42px;
  padding: 6px 35px;
}

.seije-view-as-bar {
  align-items: center;
  background: transparent;
  border: none;
  color: #78350F;
  display: inline-flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 0;
}

.seije-view-as-bar form {
  margin: 0;
}

.seije-view-as-bar button,
.seije-view-as-link {
  align-items: center;
  background: var(--s-amber);
  border: none;
  border-radius: var(--s-radius-control);
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--s-control-font);
  font-weight: 700;
  height: var(--s-control-h);
  justify-content: center;
  padding: 0 var(--s-control-pad-x);
  text-decoration: none;
  transition: background 0.12s;
}

.seije-view-as-bar button:hover,
.seije-view-as-link:hover {
  background: #D97706;
  color: #ffffff;
}

.seije-view-as-link:link,
.seije-view-as-link:visited {
  color: #ffffff;
}

.seije-view-as-link:hover:link,
.seije-view-as-link:hover:visited {
  color: #ffffff;
}

/* --- Messages / alerts (color + radius only) ---------------- */
.messagelist li {
  border-radius: 6px;
}

.messagelist .success { background: #CCFBF1; color: var(--s-teal-dark); }
.messagelist .warning { background: #FEF3C7; color: #92400E; }
.messagelist .error   { background: #FEE2E2; color: #B91C1C; }

/* --- Action links ------------------------------------------- */
.addlink {
  color: #16A34A !important;
  font-weight: 650;
}

.changelink {
  color: var(--s-blue) !important;
  font-weight: 650;
}

/* --- Plain text links (keep below button rules) -------------
   .toolbar-button is excluded alongside the other button-like classes so
   storefront changelist toolbar labels keep their own white/ink color
   instead of the global blue link color (this rule's :not() chain would
   otherwise outrank the toolbar's color rules). */
a:link:not(.button):not(.deletelink):not(.seije-view-as-link):not(.toolbar-button),
a:visited:not(.button):not(.deletelink):not(.seije-view-as-link):not(.toolbar-button) {
  color: var(--s-blue);
}

a:hover:not(.button):not(.deletelink):not(.seije-view-as-link):not(.toolbar-button) {
  color: var(--s-blue-dark);
}

.help, p.help, .help-tooltip {
  color: var(--s-muted);
}

.errornote,
.errorlist li {
  background: #FEE2E2;
  color: #B91C1C;
  border-radius: 6px;
}

/* --- Mobile header: stack cleanly, left-aligned, with breathing room ----
   At <=1024px Django's responsive.css stacks #branding above #user-tools.
   Two things then read as "crowded": (1) base.css keeps align-items:center,
   so the stack is centered and jammed; (2) our desktop shell pins the header
   to a fixed 52px (with #user-tools line-height:52px) and this file loads
   after responsive.css, so those flat rules win on mobile too — the stacked
   "WELCOME, …" tools overflow the 52px header onto the breadcrumbs, and the
   1.5rem theme-toggle icon (nudged -1px) collides with the text/H1.
   Let the header grow, left-align the stack, give it vertical rhythm, and
   size the toggle to match the small user-tools line. */
@media (max-width: 1024px) {
  #header {
    height: auto;
    min-height: 52px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 15px 14px;
  }
  #branding,
  .seije-admin-brand a {
    height: auto;
  }
  #user-tools {
    float: none;
    margin: 0;
    padding: 0;
    text-align: left;
    line-height: 1.7;
  }
  #user-tools .theme-toggle {
    margin-top: 0;
    vertical-align: middle;
  }
  #user-tools .theme-toggle svg {
    height: 1.1rem;
    width: 1.1rem;
  }
}

/* --- Touch targets: enlarge controls on coarse (touch) pointers ----
   Desktop sizes (36px default / 32px compact) are comfortable with a mouse
   but below the ~44px touch-target guideline (WCAG 2.5.5, Apple HIG, Material).
   Keyed on `pointer: coarse` rather than viewport width so it applies to any
   touch device (phone, tablet) regardless of screen size, and leaves precise
   mouse pointers untouched. Buttons, links-as-buttons, and form controls all
   grow to a >=44px tap target. */
@media (pointer: coarse) {
  .button,
  input[type=submit],
  input[type=button],
  .submit-row input,
  .submit-row a.deletelink,
  a.button,
  .object-tools .toolbar-button,
  .seije-view-as-bar button,
  .seije-view-as-link {
    min-height: 44px;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
  }

  .button.seije-worksheet-button,
  a.button.seije-worksheet-button {
    min-height: 0;
    height: 26px;
  }
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  input[type=number],
  input[type=tel],
  input[type=search],
  select,
  textarea {
    min-height: 44px;
  }
}