/* MSA United landing page (templates/index.html).
 *
 * Design taken from MSA/example.html (prototype "NeuroRare"). This stylesheet is
 * loaded by the landing only: the page is self-contained and does not extend
 * core/base.html, so these rules must never leak into the authenticated UI.
 *
 * Dark is the default palette. The header toggle (and localStorage key
 * "nr-theme") switches to data-theme="light"; sections marked .on-dark stay dark
 * in both themes. No build step, no framework: plain CSS. */

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --bg: #0B1017;
  --surface: #121A25;
  --ink: #E7EBF1;
  --muted: #8E9AAB;
  --line: #232F3F;
  --accent: #86AEFF;
  --accent-ink: #0B1017;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Light theme, applied by the header toggle only. */
:root[data-theme="light"] {
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --ink: #0F1722;
  --muted: #566274;
  --line: #DCE1E8;
  --accent: #2B5BCB;
  --accent-ink: #FFFFFF;
}

/* Sections that stay dark in every theme. */
.on-dark {
  --bg: #0A0F15;
  --surface: #111923;
  --ink: #E9EDF3;
  --muted: #8F9BAC;
  --line: #223042;
  --accent: #86AEFF;
  --accent-ink: #0A0F15;
  background: var(--bg);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: inherit; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 0;
}
h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.08; max-width: 18ch; }
h3 { font-size: 24px; line-height: 1.2; }
/* h1-h3 are reset above; the UA sheet still gives h4-h6 a 1.33-1.67em margin, which
   opened ~95px of dead space inside cards and ~67px above every modal title. */
h4, h5, h6 { margin: 0 0 8px; }
h4 { margin-bottom: 16px; }
p { margin: 0; }

.mono {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .01em;
}
.lede { font-size: 19px; color: var(--muted); max-width: 56ch; }
.it { font-style: italic; color: var(--accent); }

/* Header */
header.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
header.top .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding-block: 10px;
  flex-wrap: wrap;
}
header.top #theme { margin-left: 0; }
.brand {
  font-family: var(--serif);
  font-size: 23px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand svg { width: 26px; height: 26px; }
nav.main {
  display: flex;
  gap: 4px;
  margin-left: auto;
  font-size: 15px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
nav.main a {
  text-decoration: none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
nav.main a:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
nav.main form { display: contents; }
nav.main .nav-link {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font: 500 15px/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
nav.main .nav-link:hover { border-color: var(--muted); }

.btn {
  font: 500 15px/1 var(--sans);
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
@media (max-width: 760px) {
  nav.main { display: none; }
  header.top .wrap { gap: 12px; }
  .brand { margin-right: auto; }
}

/* Hero */
.hero {
  padding: clamp(56px, 9vw, 120px) 0 clamp(56px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 78% 20%, rgba(134, 174, 255, .14), transparent 70%);
  pointer-events: none;
}
.hero .grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  position: relative;
}
.hero h1 { font-size: clamp(44px, 7.2vw, 92px); line-height: 1.02; }
.hero .lede { margin-top: 20px; }
.hero .actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Login card: the real LoginForm, hand-rendered in the prototype's markup */
.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}
.login-card h3 { font-size: 26px; margin-bottom: 6px; }
.login-card .sub { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.login-card .btn { width: 100%; justify-content: center; padding: 14px; }
.login-card .help { margin-top: 14px; font-size: 14px; color: var(--muted); }
.login-card .help a { color: var(--ink); }

/* Login refusal arrives via django.contrib.messages */
.form-messages { margin-bottom: 18px; }
.form-error {
  font-size: 14px;
  color: #FF9D9D;
  border: 1px solid #5A2B2B;
  background: rgba(255, 90, 90, .08);
  border-radius: 10px;
  padding: 10px 12px;
}

@media (max-width: 900px) { .hero .grid { grid-template-columns: 1fr; } }

/* Sections */
section { padding: clamp(64px, 9vw, 120px) 0; }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.bordered { border-top: 1px solid var(--line); }

/* Consortium */
.funders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.funder {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
}
.funder h3 { font-size: 28px; }
.funder p { color: var(--muted); }
.funder a.link { margin-top: auto; color: var(--accent); text-decoration: none; font-weight: 500; }
.funder a.link:hover { text-decoration: underline; }
@media (max-width: 760px) { .funders { grid-template-columns: 1fr; } }

/* Process steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: s;
  border-top: 1px solid var(--line);
}
.steps li { counter-increment: s; padding: 28px 24px 8px 0; position: relative; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font: 500 12.5px var(--mono);
  color: var(--accent);
  display: block;
  margin-bottom: 28px;
}
.steps li::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.steps h3 { font-size: 22px; margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 16px; max-width: 26ch; }
.note { margin-top: 28px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 20px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Open-call card */
.call {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 28px 32px;
}
.call p { color: var(--muted); margin-top: 4px; }

/* CMS slot: staff-editable TemplateModel content, sanitised at render time.
   Empty when no "index" row exists -- the tests pin exactly that. */
.intro { margin-top: 40px; }
.intro:not(:empty) {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 24px 28px;
}
.intro:not(:empty) > :first-child { margin-top: 0; }
.intro:not(:empty) > :last-child { margin-bottom: 0; }
.intro a { color: var(--accent); }

/* Roadmap grid */
.aud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}
.aud article { padding: 28px 24px 32px; }
.aud article + article { border-left: 1px solid var(--line); }
.aud h3 { font-size: 21px; margin-bottom: 10px; }
.aud p { color: var(--muted); font-size: 16px; }
@media (max-width: 980px) {
  .aud { grid-template-columns: 1fr 1fr; }
  .aud article:nth-child(3) { border-left: 0; }
  .aud article:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 540px) {
  .aud { grid-template-columns: 1fr; }
  .aud article + article { border-left: 0; border-top: 1px solid var(--line); }
}

/* Closing CTA */
.cta { text-align: left; }
.cta h2 { font-size: clamp(40px, 6.4vw, 84px); max-width: 16ch; }
.cta .actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }

footer {
  padding: 40px 0 48px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; }
footer a { text-decoration: none; color: var(--ink); }
footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   Authenticated UI components (extend landing design system)
   ============================================================ */

/* --- Grid system (Bootstrap replacement) --- */
.row { display: flex; flex-wrap: wrap; margin-inline: -12px; }
.row > * { padding-inline: 12px; }
.col { flex: 1 0 0%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.g-4 { gap: 16px; }
/* The row gutter is padding on the children, so `gap` on top of it double-counts. */
.g-4 > * { padding-inline: 0; }
/* `gap` is additive to a percentage basis, so four 25% columns plus their three
   gaps exceed the row and the last card wraps alone. Discount its share of the gap. */
.row-cols-md-4.g-4 > * { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); }
.row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }
.row-cols-md-4 > * { flex: 0 0 25%; max-width: 25%; }
@media (max-width: 768px) {
  .col-lg-9, .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .row-cols-md-4 > * { flex: 0 0 50%; max-width: 50%; }
  .row-cols-md-4.g-4 > * { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
}
@media (max-width: 576px) {
  .row-cols-md-4 > * { flex: 0 0 100%; max-width: 100%; }
  .row-cols-md-4.g-4 > * { flex: 0 0 100%; max-width: 100%; }
}

/* --- Spacing utilities --- */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.me-2 { margin-right: 8px; }
.ms-auto { margin-left: auto; }
.mx-2 { margin-inline: 8px; }
.mx-md-5 { margin-inline: 24px; }
.p-3 { padding: 16px; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }

/* --- Text utilities --- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--muted); }
.text-uppercase { text-transform: uppercase; }
.text-bg-light { background: var(--surface); }

/* --- Background utilities --- */
.bg-light { background: var(--surface); }
.bg-body-tertiary { background: var(--surface); }

/* --- Flexbox utilities --- */
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }

/* --- Card component --- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.card-body { padding: 24px; }
.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.card-title { font-size: 18px; margin-bottom: 8px; }
.card-text { color: var(--muted); }
/* Status cards render the count as an h5, which left the primary figure the
   smallest, dimmest thing in the card; h3/h4 values on rankings keep their size. */
h5.card-text {
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0;
}

/* --- Alert component --- */
.alert {
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.alert-info { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.alert-warning { background: rgba(255, 193, 7, .08); border-color: rgba(255, 193, 7, .3); }
.alert-danger { background: rgba(255, 90, 90, .08); border-color: rgba(255, 90, 90, .3); }

/* --- Badge component --- */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* --- Table component --- */
.table-container { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.table th, .table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.table th {
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table-striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 50%, transparent); }
.table-hover tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* --- Pagination --- */
.pagination {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 24px 0;
  justify-content: center;
}
.page-item { display: inline; }
.page-link {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
}
.page-link:hover { border-color: var(--muted); }
.page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* --- Form components (crispy forms replacement) --- */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.form-control {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.form-control:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.form-control.is-invalid {
  border-color: #FF9D9D;
}
/* The picker button is UA-drawn and stays light (rgb(239,239,239)) on the dark
   surface unless it is restyled, so it is the one control .form-control cannot reach. */
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2, var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
select.form-control,
select:not([class]) {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E9AAB' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238E9AAB' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.form-check-input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.form-check-label { font-size: 15px; }
.requiredField::after { content: " *"; color: #FF9D9D; }

/* --- Button variants --- */
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-success { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-success:hover { filter: brightness(1.08); }
.btn-danger {
  background: transparent;
  border: 1px solid #FF9D9D;
  color: #FF9D9D;
  padding: 12px 18px;
  border-radius: 999px;
  font: 500 15px/1 var(--sans);
  cursor: pointer;
}
.btn-danger:hover { background: rgba(255, 90, 90, .1); }
.btn-warning {
  background: transparent;
  border: 1px solid #FFC107;
  color: #FFC107;
  padding: 12px 18px;
  border-radius: 999px;
  font: 500 15px/1 var(--sans);
  cursor: pointer;
}
.btn-warning:hover { background: rgba(255, 193, 7, .1); }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 999px;
  font: 500 15px/1 var(--sans);
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--muted); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  padding: 12px 18px;
  border-radius: 999px;
  font: 500 15px/1 var(--sans);
  cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.08); }

/* --- Modal (Bootstrap replacement) --- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, .5);
  align-items: center;
  justify-content: center;
}
.modal.show { display: flex; }
.modal-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.modal-title { font-size: 18px; font-weight: 500; }
.modal-body { padding: 24px; }
.modal-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}
/* Bootstrap draws the glyph with a background-image; without the CDN the button
   collapses to 0x0, so the x is drawn from pseudo-elements instead. */
.btn-close {
  position: relative;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  border-radius: 6px;
  flex: 0 0 auto;
}
.btn-close::before,
.btn-close::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 15px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* --- Navbar (Bootstrap replacement) --- */
.navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 24px;
}
.navbar-expand-lg { display: flex; align-items: center; min-height: 64px; }
.navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
  align-items: center;
}
.nav-item { display: inline; }
.nav-link {
  display: inline-block;
  padding: 8px 14px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  border-radius: 8px;
}
.nav-link:hover, .nav-link.active { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.navbar-toggler { display: none; }
@media (max-width: 992px) {
  .navbar-toggler {
    display: block;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
  }
  .navbar-collapse { display: none; width: 100%; }
  .navbar-collapse.show { display: block; }
  .navbar-nav { flex-direction: column; align-items: stretch; padding: 12px 0; }
}

/* --- Container --- */
.container { width: min(1160px, 100% - 40px); margin-inline: auto; }
.container-fluid { width: 100%; padding-inline: 24px; }

/* --- Messages --- */
.messages { margin-bottom: 16px; }
.message {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 8px;
}

/* --- Logo --- */
.logo { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }

/* --- Text color utilities --- */
.text-danger { color: #FF9D9D; }

/* --- Link utilities --- */
.link-underline { text-decoration: underline; }
.link-underline-opacity-0 { text-decoration: none; }
.link-underline-opacity-0:hover { text-decoration: underline; }

/* --- List utilities --- */
.list-unstyled { list-style: none; padding-left: 0; }

/* --- List group --- */
.list-group { display: flex; flex-direction: column; gap: 8px; }
.list-group-item {
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

/* --- Nav tabs --- */
.nav-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  list-style: none;
  padding: 0;
}
.nav-tabs .nav-link {
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--ink); }
.nav-tabs .nav-link.active { color: var(--ink); border-bottom-color: var(--accent); }
.nav-tabs .nav-link.disabled { color: var(--muted); opacity: .5; cursor: not-allowed; }

/* --- Tab content --- */
.tab-content { padding: 24px 0; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* --- Modal size variants --- */
.modal-lg { max-width: 900px; }
.modal-title { font-size: 20px; font-weight: 500; }

/* --- Font size utilities --- */
.fs-5 { font-size: 18px; }

/* --- Print styles --- */
@media print {
  nav, .navbar { display: none !important; }
  body { background: white; color: black; }
}

/* ============================================================
   Bootstrap compatibility layer.

   crispy-bootstrap5 and django-tables2 emit Bootstrap 5 class names.
   The project renders no Bootstrap CSS, so each name it can emit is
   mapped here onto the landing palette. Without this, fields lose
   their width, grid and validation styling.
   ============================================================ */

.col-md { flex: 1 0 0%; }
.col-form-label { font-size: 15px; padding-top: 6px; }
.form-text { font-size: 13px; color: var(--muted); margin-top: 4px; }
.invalid-feedback { display: none; font-size: 13px; color: #FF9D9D; margin-top: 4px; }
.is-invalid ~ .invalid-feedback { display: block; }
.input-group { display: flex; align-items: stretch; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; }
.input-group-text {
  display: flex; align-items: center; padding: 0 12px;
  font-size: 14px; color: var(--muted);
  border: 1px solid var(--line); border-right: 0;
  border-radius: 10px 0 0 10px; background: var(--surface);
}
.form-check-inline { display: inline-flex; margin-right: 12px; }
.form-floating { margin-bottom: 16px; }
.form-floating > label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 6px; }
.form-floating > .form-control { padding: 14px; }
.form-actions { margin-top: 16px; }
.d-none { display: none !important; }
.h-auto { height: auto !important; }
.ml-2 { margin-left: 8px; }
.mb-2 { margin-bottom: 8px; }
.alert-block { display: block; }
.alert-dismissible { padding-right: 48px; }
.asteriskField { color: var(--muted); }
.description { font-size: 13px; color: var(--muted); margin-top: 4px; }
.empty-form { display: none; }
.buttonHolder { margin-top: 16px; }
.requiredField { color: #FF9D9D; }
.table-responsive { overflow-x: auto; }
.prev-next-links { display: flex; gap: 8px; justify-content: center; margin: 24px 0; }
.prev-next-links a { color: var(--accent); text-decoration: none; }
.prev-next-links a:hover { text-decoration: underline; }

/* Django-tables2 renders its pager as these three anchors inside a
   .table-container; keep them readable without the Bootstrap sheet. */
.card-header,
.table-container + .pagination,
.tab-content > .card-body > .pagination { margin-bottom: 0; }