/* ==========================================================================
   ICON College brand palette
   Sampled from the live site (iconcollege.ac.uk):
     #0e51ff  blue     logo wordmark, links, UK map, social icons
     #e11e49  crimson  "Apply Now" / "Send" CTAs, footer section headings
     #061f3d  navy     footer background
     #d6e1ff  tint     "Get In Touch" section background
     #eeab4a  gold     "20+ years of ICON College"
     blue -> purple -> crimson  the page-banner gradient

   The site uses blue for identity and links, and crimson for calls to
   action. Primary buttons here stay blue: this template's red is already
   carrying "reject / delete", and a crimson Save button next to a crimson
   Reject button would read as a warning. Crimson is available as --accent
   and is used for destructive actions and the public "Apply" CTAs.
   ========================================================================== */

/* Nunito, self-hosted from the same variable-weight cut the main site serves.
   Glyphs outside this latin range (✓ ✕ emoji) fall through to the next family,
   exactly as they do on the main site. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback, copied from the main site: overriding Arial's
   metrics to Nunito's keeps the page from reflowing while Nunito loads.
   It resolves against a locally installed Arial, so it costs no download. */
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial");
  ascent-override: 101.1%;
  descent-override: 35.3%;
  line-gap-override: 0%;
  size-adjust: 93.34%;
}

:root {
  /* The public site follows the main site's body font. The admin panel keeps
     the system stack — see body.admin-shell. */
  --font-body: "Nunito", "Nunito Fallback", sans-serif;
  --font-system: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";

  --bg: #ffffff;
  --text: #142235;
  --muted: #4b5b70;
  --border: #dde3ea;
  --panel: #f6f8fb;

  --primary: #0e51ff;
  --primary-hover: #0a3ecc;

  --accent: #e11e49;
  --accent-hover: #c11539;

  --brand-navy: #061f3d;
  --brand-tint: #d6e1ff;
  --brand-gold: #eeab4a;
  --brand-gradient: linear-gradient(90deg, #1c4ae7 0%, #7a3d93 50%, #d72f3f 100%);

  --focus: #eeab4a;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(20, 34, 53, 0.08);
  --max: 1080px;
}

* {
  box-sizing: border-box;
}

/* An author rule setting `display` (e.g. `.button { display: inline-flex }`)
   always outranks the UA's `[hidden] { display: none }` rule regardless of
   selector specificity, so anything with both a `hidden` attribute and a
   class that sets `display` would otherwise stay visible. Pin it globally. */
[hidden] {
  display: none !important;
}

html {
  height: 100%;
}

/* Sticky-footer layout: page fills the viewport so the footer sits at the
   bottom on short pages, and is pushed below the fold on long ones. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Absorbs the scrollbar-width overhang of the full-bleed .hero-gradient.
     clip, not hidden — hidden would break the sticky header. */
  overflow-x: clip;
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

/* Main takes up the leftover height; header/footer keep their natural size. */
body > main {
  flex: 1 0 auto;
}

body > .site-header,
body > .site-footer {
  flex-shrink: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  background: var(--focus);
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 20;
}

.skip-link:focus {
  left: 18px;
}

/* The gradient strip sits directly under the header, mirroring the banner
   that runs beneath the nav on the marketing site. border-image paints the
   gradient into the bottom border; the other sides are 0-width. */
.site-header {
  border-bottom: 3px solid transparent;
  border-image: var(--brand-gradient) 1;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

.brand-logo {
  height: 40px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* The "20+ years" accolade, sat beside the logo the way the main site groups
   its header badges. Kept a touch shorter than the logo so it reads as a
   secondary mark rather than competing with it. */
.brand-badge {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
  /* On top of .brand's 12px gap, for ~34px total — the two marks need clear
     separation so they don't read as one lockup. */
  margin-left: 22px;
}

.brand-title {
  font-weight: 700;
}

.brand-subtitle {
  color: var(--muted);
  font-size: 14px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav a {
  padding: 8px 10px;
  border-radius: 10px;
}

.site-nav a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.hero {
  padding: 34px 0 26px;
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
}

.lead {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  max-width: 78ch;
}

.hero-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Gradient hero banner, echoing the banner that heads each page on the main
   site. The hero sits inside main.container, so it pulls itself back out to
   the viewport edges and re-pads by the same amount, keeping its text lined up
   with the sections below. body uses overflow-x: clip to absorb the
   scrollbar-width overhang that 100vw leaves — clip rather than hidden,
   because hidden would create a scroll container and break the sticky
   header. */
.hero-gradient {
  margin-inline: calc(50% - 50vw);
  padding: 40px calc(50vw - 50%) 38px;
  background: var(--brand-gradient);
  color: #fff;
  margin-bottom: 18px;
}

.hero-gradient .lead,
.hero-gradient .section-subtitle,
.hero-gradient .breadcrumb {
  color: rgba(255, 255, 255, 0.92);
}

.hero-gradient .breadcrumb a {
  color: #fff;
  text-decoration: underline;
}

/* The amber and green note panels are drawn for a white page; over the
   gradient they become a translucent white panel instead. */
.hero-gradient .lead-note,
.hero-gradient .lead-note-green {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.38);
}

/* A solid white primary and an outlined-white secondary: the crimson accent
   button would sink into the red end of the gradient. */
.hero-gradient .button-accent {
  background: #fff;
  border-color: #fff;
  color: var(--primary);
}

.hero-gradient .button-accent:hover {
  background: var(--brand-tint);
  border-color: var(--brand-tint);
  color: var(--primary-hover);
}

.hero-gradient .button-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.hero-gradient .button-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #fff;
  color: #fff;
}

.hero-gradient .button:focus-visible {
  outline-color: #fff;
}

.section {
  padding: 24px 0 18px;
  scroll-margin-top: 90px;
}

.section-header {
  margin-bottom: 14px;
}

.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.section-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 80ch;
}

h2 {
  margin: 0;
  font-size: 22px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}

.card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.card-actions {
  margin-top: 14px;
}

.card-muted {
  opacity: 0.7;
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--panel);
  margin: 18px;
}

.link-list {
  margin: 0;
  padding-left: 20px;
}

.link-list li {
  margin: 10px 0;
}

.accordion {
  display: grid;
  gap: 10px;
}

.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.accordion-item summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 650;
}

.accordion-item summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.accordion-content {
  padding: 0 16px 14px;
  color: var(--muted);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--primary);
  padding: 10px 14px;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  min-height: 40px;
  color: #fff;
  background: var(--primary);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  line-height: 1.3;
}

.button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
  text-decoration: none;
}

.button:active {
  transform: translateY(1px);
}

.button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.button:disabled {
  background: #7ea0c6;
  cursor: not-allowed;
}

.button-secondary {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

.button-secondary:hover {
  background: #f3f6fb;
  border-color: #b8c5d6;
  color: var(--text);
}

.button-disabled {
  background: #aab7c6;
  border-color: #aab7c6;
  cursor: not-allowed;
}

/* The unavailable sibling of .button-accent — a muted crimson rather than the
   neutral grey above, so a "coming soon" card still reads as brand. .button's
   hover turns everything blue, so the hover here is restated: it deepens
   within the same crimson family instead of jumping palette. */
.button-disabled-accent {
  /*background: #b96e7f;*/
  /*border-color: #b96e7f;*/
  background: #aab7c6;
  border-color: #aab7c6;
  color: #fff;
  cursor: not-allowed;
}

.button-disabled-accent:hover {
  background: #a85f70;
  border-color: #a85f70;
  color: #fff;
}

.button-small {
  padding: 8px 12px;
  min-height: 36px;
}

.button-ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--border);
}

.button-ghost:hover {
  background: #eaf3ff;
  color: var(--primary);
}

.button-danger {
  background: var(--accent);
  border-color: var(--accent);
}

.button-danger:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.button-ghost.button-danger {
  background: transparent;
  color: var(--accent);
  border-color: #f0c7cf;
}

.button-ghost.button-danger:hover {
  background: #fdecef;
  color: var(--accent-hover);
}

/* Brand CTA — the crimson "Apply Now" treatment from the marketing site.
   For the public apply buttons, not for admin actions. */
.button-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.button-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.button-success {
  background: #2aa876;
  border-color: #2aa876;
}

.button-success:hover {
  background: #238a62;
  border-color: #238a62;
}

/* Navy footer with crimson headings, matching the marketing site. */
.site-footer {
  margin-top: 26px;
  background: var(--brand-navy);
  color: #e6effc;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 12px;
}

.footer-title {
  font-weight: 700;
  color: #fff;
}

.footer-subtitle {
  font-size: 14px;
  color: #a9c2e0;
}

.footer-meta {
  color: #a9c2e0;
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Brand footer — mirrors the footer on iconcollege.ac.uk: navy panel, crimson
   column headings, blue circular social buttons, the faint crest watermark and
   the UK locator map. The compact .footer-inner footer above is still what the
   admin screens use.
   --------------------------------------------------------------------------- */
.site-footer-brand {
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 30px;
  align-items: start;
  padding: 46px 0 26px;
}

.site-footer-brand h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
}

.site-footer-brand h3 + h3 {
  margin-top: 22px;
}

.site-footer-brand p {
  margin: 0 0 10px;
}

.site-footer-brand a {
  color: #fff;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  transition: background 0.15s;
}

.footer-social a:hover {
  background: var(--primary-hover);
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

/* Crest watermark. The artwork is already drawn at 5% opacity. */
.footer-crest {
  margin-top: 20px;
  text-align: center;
}

.footer-crest img {
  width: 200px;
  max-width: 100%;
}

.footer-address {
  line-height: 1.3;
}

.footer-links-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links-list li {
  margin-bottom: 2px;
}

.footer-map {
  text-align: center;
}

.footer-map img {
  width: 100%;
  max-width: 280px;
}

.footer-legal {
  padding-bottom: 30px;
  text-align: center;
  font-size: 14px;
}

.footer-legal p {
  margin: 0;
}

/* Two columns on tablets, one on phones — the same way the main site collapses. */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 36px;
  }
}

@media (max-width: 640px) {
  /* The header is tight on phones; the logo and page nav come first. */
  .brand-badge {
    display: none;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    padding-top: 30px;
  }

  .footer-map {
    display: none;
  }
}

.breadcrumb {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}

.breadcrumb a {
  color: var(--primary);
}

.breadcrumb span {
  margin: 0 6px;
}

.lead-note {
  margin: 10px 0 0;
  color: #8a3a00;
  background: #fff7ec;
  border: 1px solid #f3d9b1;
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 84ch;
}

.lead-note-green {
  color: #165438;
  background: #e7f6ec;
  border-color: #9ed5b3;
}

/* ==========================================================================
   Admin styles
   ========================================================================== */

.admin-header {
  background: linear-gradient(180deg, var(--sidebar-start), var(--brand-navy));
  border-bottom: 1px solid #0a2f5c;
}

.admin-header .brand-mark-admin {
  background: linear-gradient(180deg, #0e599e, #0a3f75);
  color: #fff;
}

.admin-header .site-nav a:not(.button) {
  color: #e6effc;
}

.admin-header .site-nav a:not(.button):hover {
  color: #fff;
  border-bottom-color: #a8cffc;
}

.admin-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0 6px;
  margin-top: 14px;
}

.admin-hero h1 {
  margin: 4px 0 4px;
  font-size: 28px;
}

.admin-hero .lead {
  max-width: 84ch;
}

.admin-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.summary-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
  border-left: 4px solid var(--border);
}

.summary-card--bursary {
  border-left-color: #3d6fe0;
}

.summary-card--hardship {
  border-left-color: #2aa876;
}

.summary-card--pending {
  border-left-color: #d99b3a;
}

.summary-card--approved {
  border-left-color: #2aa876;
}

.summary-card--rejected {
  border-left-color: #c2354f;
}

.summary-card--action {
  border-left-color: #e07b39;
}

.summary-label {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.summary-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.admin-filters {
  display: grid;
  gap: 10px;
}

.filters-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.filter-field {
  min-width: 0;
}

.filter-field-wide {
  grid-column: span 1;
}

.filters-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

.empty-state {
  padding: 28px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: #fafbff;
}

.empty-state-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.empty-state-text {
  margin: 0 auto;
  max-width: 64ch;
  color: var(--muted);
}

.admin-table {
  min-width: 980px;
}

.admin-table tbody td {
  vertical-align: middle;
}

.admin-table .row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--type-hardship {
  background: #e7f6ec;
  color: #165438;
  border-color: #9ed5b3;
}

.badge--type-bursary {
  background: #eaf1ff;
  color: #1e4092;
  border-color: #bfd2ff;
}

/* A student's own unsubmitted draft. The static demo never showed this state,
   so it has no counterpart in html_template: deliberately grey and quiet, since
   a draft is not yet waiting on anybody. */
.badge--draft {
  background: #f1f2f4;
  color: #4a5159;
  border-color: #d4d8dd;
}

.badge--pending {
  background: #fff5e2;
  color: #7a5000;
  border-color: #f1d591;
}

.badge--under-review {
  background: #eef4fb;
  color: #0f447e;
  border-color: #c3d7ec;
}

.badge--approved {
  background: #e7f6ec;
  color: #165438;
  border-color: #9ed5b3;
}

.badge--rejected {
  background: #fdecef;
  color: #8a1f2e;
  border-color: #f0c7cf;
}

/* Waiting on the student to correct something. Deliberately more orange than
   badge--pending's yellow, so the two are not mistaken for each other. */
.badge--action-required {
  background: #ffece2;
  color: #9a3d00;
  border-color: #f7bc98;
}

.row-status-badge {
  min-width: 108px;
  justify-content: center;
}

.app-header {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  align-items: start;
}

.app-ref-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.app-ref {
  font-size: 24px;
  margin: 0;
}

.app-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 14px;
}

.app-meta-label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.app-meta-value {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

.app-decision {
  background: #f8fafe;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.app-decision-title {
  font-weight: 700;
  font-size: 16px;
}

/* ==========================================================================
   Status picker
   One control for the application status, replacing a select that duplicated
   a row of quick-action buttons. Every option is visible at once and one
   click selects it; nothing is saved until "Save changes" is pressed.

   Blade: @foreach over the statuses, @checked($application->status === $s).
   ========================================================================== */

.status-picker-field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.app-decision-label {
  padding: 0;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.status-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.status-option {
  display: inline-flex;
}

/* Kept in the layout (not display:none) so it stays focusable and labelable. */
.status-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.status-option-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.status-option-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}

.status-option:hover .status-option-chip {
  border-color: #b8c5d6;
  background: #f4f7fc;
}

.status-option input:focus-visible + .status-option-chip {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.status-option input:checked + .status-option-chip {
  font-weight: 700;
}

.status-option input:checked + .status-option-chip::before {
  opacity: 1;
}

/* Selected chip takes the palette of the status it represents, so the picker
   and the badge elsewhere on the page read as the same thing. */
.status-option input:checked + [data-status="Pending"] {
  background: #fff5e2;
  color: #7a5000;
  border-color: #f1d591;
}

.status-option input:checked + [data-status="Under Review"] {
  background: #eef4fb;
  color: #0f447e;
  border-color: #c3d7ec;
}

.status-option input:checked + [data-status="Action Required"] {
  background: #ffece2;
  color: #9a3d00;
  border-color: #f7bc98;
}

.status-option input:checked + [data-status="Approved"] {
  background: #e7f6ec;
  color: #165438;
  border-color: #9ed5b3;
}

.status-option input:checked + [data-status="Rejected"] {
  background: #fdecef;
  color: #8a1f2e;
  border-color: #f0c7cf;
}

/* Private-note caveat, sitting under the textarea. */
.app-decision-private {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.app-save-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Contacting the student is a different intent from deciding the
   application, so it is separated rather than sitting in the same button row. */
.app-decision-secondary {
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.app-decision-hint {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.saved-tick {
  color: #2aa876;
  font-weight: 700;
  font-size: 14px;
}

/* align-items: start stops a short panel being stretched to match a tall one
   beside it — the bank details panel was padding out 250px of empty space to
   match the student details list. */
.app-section-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  align-items: start;
}

/* The label column is sized for labels, not given half the panel. At 50/50 a
   short label like "EMAIL" left a gap of ~200px before its value, which made
   the pairs hard to read across. */
.key-value-list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 6px 16px;
}

.key-value-list dt {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 6px;
}

.key-value-list dd {
  margin: 0;
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}

.panel-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.panel-header-row h3 {
  margin: 0;
}

.panel-header-meta {
  color: var(--muted);
  font-size: 13px;
}

.statement-box {
  background: #f7f9fc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-wrap;
}

.documents-list {
  display: grid;
  gap: 8px;
}

.document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.document-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.document-name::before {
  content: "📄";
  font-size: 16px;
}

.document-tag {
  color: var(--muted);
  font-size: 12px;
  /* "1 file" broke across two lines once the rows sat two to a row. */
  white-space: nowrap;
}

.note-history {
  display: grid;
  gap: 8px;
}

.note-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafbff;
}

.note-item-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--muted);
}

.note-item-status {
  font-weight: 700;
  color: var(--text);
}

.note-item-body {
  white-space: pre-wrap;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.note-item-body:empty {
  color: var(--muted);
  font-style: italic;
}

/* ==========================================================================
   Responsive: admin + forms layout
   ========================================================================== */

@media (max-width: 980px) {
  .admin-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-header {
    grid-template-columns: 1fr;
  }

  .app-section-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .section-header h2 {
    margin-bottom: 2px;
  }

  .section-tools {
    display: flex;
    gap: 8px;
  }

  .panel h3 {
    margin: 14px 0 8px;
    font-size: 16px;
  }

  .panel p {
    margin: 8px 0;
    color: var(--text);
  }

  .note {
    color: var(--muted);
    font-size: 14px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
    margin-top: 12px !important;
  }
}

/* ==========================================================================
   GLOBAL: Lists, tables, forms (NOT inside media query — fixes bug)
   ========================================================================== */

.list-numbered {
  margin: 0;
  padding-left: 22px;
}

.list-numbered li {
  margin: 8px 0;
}

.list-bullet {
  margin: 0;
  padding-left: 22px;
}

.list-bullet li {
  margin: 6px 0;
}

.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  margin: 10px 0 6px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  min-width: 620px;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

.data-table thead th {
  background: #eaf1fb;
  font-weight: 700;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table .totals-row td {
  background: #eef4fb;
  font-weight: 700;
  border-top: 2px solid var(--border);
}

.form-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px;
  display: grid;
  gap: 18px;
}

.form-card fieldset {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 16px;
  background: #fbfcfd;
}

.form-card legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  background: #fff;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field.inline {
  margin-top: 6px;
  gap: 4px;
}

.form-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.required {
  color: #c53030;
  margin-left: 2px;
}

.field-help {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="password"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.15);
}

.form-field input:invalid:not(:placeholder-shown),
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #c53030;
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.12);
}

.form-field textarea {
  resize: vertical;
  min-height: 90px;
}

.form-field input[type="file"] {
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.form-field small {
  color: var(--muted);
  font-size: 12px;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.45;
}

.checkbox input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.checklist {
  display: grid;
  gap: 14px;
}

.checklist-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}

.checklist-item .form-field {
  margin-top: 10px;
}

.checklist-item .uploader {
  margin-top: 12px;
}

/* ==========================================================================
   File uploader
   A drop zone plus a list of the files the student has added. The real
   <input type="file"> sits invisibly on top of the drop zone, so clicking
   anywhere in it opens the picker, dropping files onto it works natively,
   and the field stays keyboard-focusable and labelable.

   Markup contract (see the forms, and app.js -> setupFileUploaders):
     [data-uploader]          wrapper
     [data-uploader-drop]     the drop zone (gets .is-dragover)
     [data-uploader-input]    the real file input
     [data-uploader-summary]  the "N files added / Remove all" row
     [data-uploader-count]    text node for the count
     [data-uploader-clear]    "Remove all" button
     [data-uploader-list]     <ul> the file rows are appended to
   Rows are cloned from #uploaderFileTemplate, so the row markup lives in
   the HTML rather than in a JS string.
   ========================================================================== */

.uploader {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uploader-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.uploader-optional {
  font-weight: 400;
  color: var(--muted);
}

.uploader-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.uploader-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.uploader-drop:hover {
  border-color: var(--primary);
  background: #f5f9ff;
}

/* The invisible input is the focus target, so lift the ring to the zone. */
.uploader-drop:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.15);
}

.uploader-drop.is-dragover {
  border-style: solid;
  border-color: var(--primary);
  background: #eaf3ff;
}

.uploader-drop:has(.uploader-input[aria-invalid="true"]) {
  border-color: #c53030;
  background: #fff7f7;
}

.uploader-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.uploader-drop-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.uploader-drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.uploader-drop-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.uploader-browse {
  color: var(--primary);
  text-decoration: underline;
}

.uploader-drop-sub {
  font-size: 12px;
  color: var(--muted);
}

.uploader-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.uploader-count {
  font-weight: 700;
  color: #165438;
}

.uploader-clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: #c2354f;
  text-decoration: underline;
  cursor: pointer;
}

.uploader-clear:hover {
  color: #a72b42;
}

.uploader-clear:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.uploader-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.uploader-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.uploader-file-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.uploader-file-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.uploader-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.uploader-file-size {
  font-size: 12px;
  color: var(--muted);
}

.uploader-file-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.uploader-file-remove:hover {
  background: #fdecef;
  border-color: #f0c7cf;
  color: #a72b42;
}

.uploader-file-remove:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.money-input {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  width: 100%;
  min-width: 0;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.money-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.15);
}

.money-input[aria-invalid="true"] {
  border-color: #c53030;
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.12);
}

.total-input {
  background: #eef4fb;
  font-weight: 700;
}

.info-box {
  margin-top: 12px;
  background: var(--brand-tint);
  border: 1px solid #b6c9f5;
  color: #143a8f;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
}

.terms-fieldset {
  background: #fbfcfd;
}

.terms-fieldset h3 {
  margin: 14px 0 6px;
  font-size: 15px;
}

.terms-fieldset p {
  margin: 6px 0;
  color: var(--text);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.form-message {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
}

.form-message.success {
  background: #e7f6ec;
  border-color: #9ed5b3;
  color: #14663f;
}

.form-message.error {
  background: #fcebeb;
  border-color: #f0b5b5;
  color: #8a1f1f;
}

.form-message.info {
  background: #eaf3ff;
  border-color: #bfd6f2;
  color: #0b457f;
}

/* ==========================================================================
   Responsive: layout adjustments for tablets & small screens
   ========================================================================== */

@media (max-width: 900px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .header-inner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .brand {
    min-width: 0;
  }

  .brand-logo {
    height: 32px;
  }

  .brand-text .brand-subtitle {
    display: none;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: 14px;
  }

  .form-card fieldset {
    padding: 12px;
  }

  .form-actions {
    justify-content: stretch;
  }

  .form-actions .button {
    flex: 1;
  }
}

/* A plain `display: grid` class has the same specificity as the UA's
   `[hidden] { display: none }` rule, so source order alone decides the
   winner — fragile. This variant pins `[hidden]` to always win. */
.app-view-grid {
  display: grid;
  gap: 18px;
}

/* On the student view this grid follows the hero directly. Unlike .section it
   carries no top padding of its own, so the first alert would butt straight up
   against the gradient band. The admin shell puts this grid inside
   .admin-content, which already pads it. */
body:not(.admin-shell) .app-view-grid {
  margin-top: 24px;
}

/* Admin application view: a working column plus a sticky decision rail.
   The decision block used to sit inside the header panel, where it left ~420px
   of dead space beside the six meta fields and scrolled out of reach the moment
   the reviewer moved down into the evidence. In the rail it fills space that
   was empty anyway and stays put while they read. */
.app-view-grid--rail {
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 16px;
}

.app-view-main,
.app-view-rail {
  display: grid;
  gap: 14px;
  /* Grid items default to min-width:auto, which lets the wide income table
     push the column past its track. */
  min-width: 0;
}

.app-view-rail {
  position: sticky;
  /* Clears the 75px sticky topbar. */
  top: 87px;
}

/* With the decision moved out, the header panel holds one child and no longer
   needs its two-column grid. */
.app-view-grid--rail .app-header {
  display: block;
}

/* Eight one-line document rows stacked singly ran to ~600px of mostly empty
   row. Two up halves that without crowding the names. */
.app-view-grid--rail .documents-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Below this the rail has no room to sit beside the content, so it unsticks
   and moves to the top — the status is what a reviewer wants first. */
@media (max-width: 1080px) {
  .app-view-grid--rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-view-rail {
    position: static;
    order: -1;
  }
}

.app-view-grid[hidden] {
  display: none;
}

/* ==========================================================================
   Document links (Terms / Declaration) + modal dialog
   ========================================================================== */

.doc-links {
  display: grid;
  gap: 10px;
}

.doc-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.doc-link:hover {
  border-color: var(--primary);
  background: #f5f9ff;
  box-shadow: 0 6px 18px rgba(20, 34, 53, 0.08);
}

.doc-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.doc-link-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.doc-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.doc-link-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.doc-link-sub {
  font-size: 13px;
  color: var(--muted);
}

.doc-link-cta {
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Inline "Terms and Conditions" / "Declaration" link inside a checkbox label */
.doc-inline-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

.doc-inline-link:hover {
  color: var(--primary-hover);
}

.doc-inline-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.modal {
  position: fixed;
  inset: 0;
  /* Above the demo navigation bar (z-index: 999999). */
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 35, 0.55);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(6, 20, 40, 0.35);
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 19px;
}

.modal-close {
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

.modal-close:hover {
  background: #f0f3f8;
  color: var(--text);
}

.modal-close:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  color: var(--text);
  line-height: 1.6;
}

.modal-body h3 {
  margin: 18px 0 8px;
  font-size: 16px;
}

.modal-body p {
  margin: 8px 0;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: #fbfcfd;
}

@media (max-width: 640px) {
  .modal {
    padding: 12px;
  }

  .modal-dialog {
    max-height: 90vh;
  }

  .doc-link {
    align-items: flex-start;
  }

  .doc-link-cta {
    display: none;
  }
}

/* ==========================================================================
   Student dashboard: summary tiles, application cards, progress tracker
   ========================================================================== */

.student-summary {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.app-card-list {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.app-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: grid;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.app-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(20, 34, 53, 0.12);
  border-color: #b8c5d6;
  text-decoration: none;
  color: inherit;
}

.app-card:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.app-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.app-card-ref {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.app-card-meta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.app-card-actions {
  display: flex;
  justify-content: flex-end;
}

.app-card-cta {
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
}

/* A draft card carries two actions rather than one: the destructive one is
   pushed to the far left, well away from the one the student usually wants. */
.app-card-actions--split {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.apply-more-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Progress tracker: Submitted -> Under Review -> Decision */
.tracker {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tracker-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.tracker-step::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.tracker-step:first-child::before {
  display: none;
}

.tracker-step.is-complete::before {
  background: var(--primary);
}

.tracker-dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  border: 2px solid var(--border);
  color: var(--muted);
}

.tracker-step.is-complete .tracker-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.tracker-step.is-approved .tracker-dot {
  background: #2aa876;
  border-color: #2aa876;
}

.tracker-step.is-rejected .tracker-dot {
  background: #c2354f;
  border-color: #c2354f;
}

/* The application is paused here waiting on the student. Use with
   .is-complete so the connector line up to this point is still filled. */
.tracker-step.is-action .tracker-dot {
  background: #e07b39;
  border-color: #e07b39;
  color: #fff;
}

.tracker-step.is-action .tracker-label {
  color: #9a3d00;
}

.tracker-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tracker-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.tracker-step.is-upcoming .tracker-label {
  color: var(--muted);
  font-weight: 600;
}

.tracker-date {
  font-size: 12px;
  color: var(--muted);
}

.tracker--compact .tracker-dot {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.tracker--compact .tracker-label {
  font-size: 11px;
}

.tracker--compact .tracker-step::before {
  top: 10px;
}

@media (max-width: 560px) {
  .tracker:not(.tracker--compact) {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .tracker:not(.tracker--compact) .tracker-step {
    flex-direction: row;
    text-align: left;
    align-items: center;
  }

  .tracker:not(.tracker--compact) .tracker-step::before {
    display: none;
  }

  .app-card-actions {
    justify-content: flex-start;
  }

  .app-card-actions--split {
    justify-content: space-between;
  }

  .apply-more-panel {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   Public flow: info page "Apply now" CTA + form-page success screen
   ========================================================================== */

.apply-cta {
  background: linear-gradient(135deg, #eaf3ff, #f7fbff);
  border: 1px solid #bfd6f2;
  border-radius: var(--radius);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.apply-cta-text h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.apply-cta-text p {
  margin: 0;
  color: var(--muted);
  max-width: 60ch;
}

.apply-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.success-card {
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 36px 32px;
  text-align: center;
  display: grid;
  gap: 16px;
  justify-items: center;
}

.success-icon {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: #e7f6ec;
  color: #14663f;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.success-card h2 {
  margin: 0;
  font-size: 24px;
}

.success-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 52ch;
}

.success-ref-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f7f9fc;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  color: var(--muted);
}

.success-ref-box strong {
  font-size: 16px;
  color: var(--primary);
  letter-spacing: 0.4px;
}

.success-email-box {
  text-align: left;
  width: 100%;
  background: #eaf3ff;
  border: 1px solid #bfd6f2;
  color: #0b457f;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.success-steps {
  text-align: left;
  width: 100%;
  margin: 0;
  padding-left: 22px;
  color: var(--text);
}

.success-steps li {
  margin: 6px 0;
}

.success-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .apply-cta {
    padding: 20px;
  }

  .success-card {
    padding: 26px 18px;
  }

  .success-actions .button {
    flex: 1;
  }
}

/* ==========================================================================
   Admin Shell v2 — sidebar layout, stat cards, responsive table-as-cards
   ========================================================================== */

:root {
  --admin-sidebar-w: 264px;
  --admin-bg: #f3f6fb;
  /* Fades from a brand-blue-tinted navy into the exact footer navy. */
  --sidebar-start: #0d3a80;
  --sidebar-end: var(--brand-navy);
  --sidebar-text: #cfe0f7;
  --sidebar-text-dim: #8fabca;
  --sidebar-active: rgba(255, 255, 255, 0.14);
  --sidebar-accent: #5c86ff;
}

/* The admin panel keeps the system font stack — Nunito is the public site's
   voice, and the dense admin tables were set with these metrics. */
body.admin-shell {
  background: var(--admin-bg);
  margin: 0;
  font-family: var(--font-system);
}

.admin-layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.sidebar-overlay {
  display: none;
}

.admin-sidebar {
  width: var(--admin-sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--sidebar-start), var(--sidebar-end));
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}

.sidebar-brand:hover {
  text-decoration: none;
}

.sidebar-brand .brand-mark-admin {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1c72d6, #0e4c94);
  border-radius: 11px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.sidebar-logo-chip {
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.sidebar-logo-chip .brand-logo {
  height: 24px;
}

.sidebar-brand .brand-title {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

.sidebar-brand .brand-subtitle {
  display: block;
  font-size: 12px;
  color: var(--sidebar-text-dim);
}

.sidebar-close {
  display: none;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-nav {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sidebar-nav-label {
  margin: 14px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sidebar-text-dim);
}

.sidebar-nav-label:first-child {
  margin-top: 4px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

.sidebar-link.active {
  background: var(--sidebar-active);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--sidebar-accent);
}

.sidebar-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.sidebar-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}

.sidebar-link.active .sidebar-count {
  background: var(--sidebar-accent);
  color: var(--brand-navy);
}

.sidebar-bottom {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link-danger:hover {
  background: rgba(220, 70, 90, 0.18);
  color: #ffd7dc;
}

.admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 3px solid transparent;
  border-image: var(--brand-gradient) 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 18px;
  background: var(--text);
  border-radius: 2px;
}

.menu-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.topbar-titles {
  min-width: 0;
}

.topbar-titles h1 {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.25;
}

.topbar-titles .breadcrumb {
  margin: 0;
  font-size: 12px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.admin-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f7f9fc;
}

.admin-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.admin-user-name {
  font-size: 13px;
  font-weight: 700;
}

.admin-user-role {
  font-size: 11px;
  color: var(--muted);
}

.admin-content {
  flex: 1 0 auto;
  padding: 22px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  flex: 1;
  align-content: start;
}

/* A grid/flex item's default "auto" minimum size is its content's min-content
   size, which for a wide descendant (e.g. the income/expenditure table)
   propagates all the way up through nested grids and pushes the whole page
   into horizontal overflow on small screens. minmax(0, 1fr) above caps the
   outer track at the available width; resetting min-width down every nested
   level here lets each one actually shrink to it, so wide tables scroll
   inside their own .table-wrap instead. */
.admin-content * {
  min-width: 0;
}

.admin-lead {
  margin: 0;
  max-width: 84ch;
}

.admin-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Stat cards v2 */
.admin-summary {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.summary-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-left-width: 4px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(20, 34, 53, 0.12);
}

.summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 19px;
  flex-shrink: 0;
  background: #eef4fb;
}

.summary-card--hardship .summary-icon {
  background: #e7f6ec;
}

.summary-card--bursary .summary-icon {
  background: #eaf1ff;
}

.summary-card--pending .summary-icon {
  background: #fff5e2;
}

.summary-card--approved .summary-icon {
  background: #e7f6ec;
}

.summary-card--rejected .summary-icon {
  background: #fdecef;
}

.summary-card--action .summary-icon {
  background: #ffece2;
}

.summary-value {
  font-size: 26px;
}

/* Filters panel v2 */
.admin-filters-panel {
  background: #fff;
}

.filters-row {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.filter-field-wide {
  grid-column: span 1;
}

@media (min-width: 640px) {
  .filter-field-wide {
    grid-column: span 2;
  }
}

/* Table -> stacked cards on small screens */
@media (max-width: 760px) {
  .admin-table {
    min-width: 0;
  }

  .table-wrap {
    overflow: visible;
    border: none;
  }

  .admin-table thead {
    display: none;
  }

  .admin-table,
  .admin-table tbody,
  .admin-table tr,
  .admin-table td {
    display: block;
    width: 100%;
  }

  .admin-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 12px;
    background: #fff;
    box-shadow: var(--shadow);
  }

  .admin-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 14px;
  }

  .admin-table td:last-child {
    border-bottom: none;
  }

  .admin-table td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-align: left;
    flex-shrink: 0;
  }

  .admin-table td[data-label="Actions"] {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-table td[data-label="Actions"]::before {
    margin-bottom: 6px;
  }

  .admin-table .row-actions {
    justify-content: flex-end;
  }
}

/* Sidebar collapses to an off-canvas drawer below 980px */
@media (max-width: 980px) {
  .admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 20px 0 40px rgba(6, 20, 40, 0.25);
  }

  .sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .menu-toggle {
    display: inline-flex;
  }

  body.sidebar-open .admin-sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 20, 40, 0.5);
    z-index: 25;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .admin-topbar {
    padding: 12px 16px;
  }

  .admin-content {
    padding: 16px;
  }

  .app-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-topbar {
    flex-wrap: wrap;
  }

  .topbar-right {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  .topbar-right .admin-user-info {
    display: none;
  }

  .admin-user-chip {
    padding: 6px;
  }

  .topbar-titles h1 {
    font-size: 17px;
  }

  .admin-content {
    padding: 14px;
    gap: 14px;
  }

  .summary-value {
    font-size: 22px;
  }

  .app-meta-grid {
    grid-template-columns: 1fr;
  }

  .key-value-list {
    grid-template-columns: 1fr;
  }

  .admin-toolbar {
    width: 100%;
  }

  .admin-toolbar .button {
    flex: 1;
  }
}

/* ==========================================================================
   Content utilities
   Small classes used by the static table / detail markup. These replace the
   inline `style="..."` strings that used to be produced in JS, so the same
   markup can be copied straight into a Blade view.
   ========================================================================== */

/* Compact buttons inside a table row's action group. */
.button-xs {
  padding: 4px 10px;
  font-size: 12px;
  min-height: 0;
}

/* Reference cell: bold link back to the application detail page. */
.cell-ref-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.cell-ref-link:hover,
.cell-ref-link:focus-visible {
  text-decoration: underline;
}

/* Two-line table cell: main value + muted secondary line. */
.cell-primary {
  font-weight: 600;
}

.cell-sub {
  color: var(--muted);
  font-size: 12px;
}

.cell-nowrap {
  white-space: nowrap;
}

/* Money figures and outcomes that carry a positive / negative meaning.
   The dd./td. variants are here to out-rank `.key-value-list dd` and the
   table cell rules, which set their own colour. */
.amount-positive,
dd.amount-positive,
td.amount-positive {
  color: #165438;
  font-weight: 700;
}

.amount-negative,
dd.amount-negative,
td.amount-negative {
  color: #8a1f2e;
  font-weight: 700;
}

/* Supporting-documents list: the "(required)" tag and the file name row. */
.doc-required {
  color: #c53030;
  font-size: 12px;
  font-weight: 400;
}

.doc-files {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

/* Each name is a link to the authorised download route. It keeps the muted
   tone of the list and shows it is clickable only on hover. */
.doc-files a {
  color: inherit;
  text-decoration: none;
}

.doc-files a:hover,
.doc-files a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

/* Empty state sitting inside a panel rather than filling the page. */
.empty-state--inline {
  padding: 14px;
}

.empty-state--inline .empty-state-title {
  font-size: 14px;
}

.empty-state--inline .empty-state-text {
  margin: 0;
}

/* ==========================================================================
   Message thread
   The admin <-> student conversation on an application. Used on both
   application.html (admin side) and student-application.html (student side);
   only the composer differs. Direction is carried by the --admin / --student
   modifier on each message, so in Blade this is one @foreach over the thread.
   ========================================================================== */

.thread {
  display: grid;
  gap: 10px;
}

.thread-message {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}

/* Messages from the College, tinted so the two sides read apart at a glance. */
.thread-message--admin {
  background: #f4f8ff;
  border-color: #c3d7ec;
}

.thread-message--student {
  background: #fff;
}

.thread-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.thread-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.thread-role {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.thread-role--admin {
  background: #e6effb;
  color: #0f447e;
}

.thread-role--student {
  background: #eef1f5;
  color: #4b5b70;
}

.thread-time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

/* pre-wrap: keep message text on a single source line, or the indentation
   of the HTML shows up on the page. */
.thread-body {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.thread-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.thread-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
}

.thread-attachment:hover {
  border-color: var(--primary);
  color: var(--primary);
  text-decoration: none;
}

/* "New" marker on a message the recipient has not read yet. */
.thread-new {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffece2;
  color: #9a3d00;
  border: 1px solid #f7bc98;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.thread-composer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: grid;
  gap: 12px;
}

.thread-composer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Alert banner
   A prominent, self-contained callout — used for "we need something from
   you" on the student's application page.
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.alert-icon {
  font-size: 20px;
  line-height: 1.2;
  flex-shrink: 0;
}

.alert-body {
  min-width: 0;
}

.alert-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}

.alert-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.alert-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.alert--action {
  background: #fff6f0;
  border-color: #f7bc98;
}

.alert--action .alert-title {
  color: #7a3200;
}

.alert--action .alert-text {
  color: #8a4200;
}

.alert--approved {
  background: #f1faf4;
  border-color: #9ed5b3;
}

.alert--approved .alert-title {
  color: #12492f;
}

.alert--approved .alert-text {
  color: #165438;
}

.alert--rejected {
  background: #fdf3f5;
  border-color: #f0c7cf;
}

.alert--rejected .alert-title {
  color: #781927;
}

.alert--rejected .alert-text {
  color: #8a1f2e;
}

/* Timestamp / attribution line under a decision. */
.alert-meta {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* The decision wording the admin actually sent, quoted verbatim so the
   student sees the same text as in their email. */
.decision-note {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* ==========================================================================
   Dashboard card flag
   Shown on an application card in student-dashboard.html when that
   application is waiting on the student.
   ========================================================================== */

.app-card--action {
  border-color: #f7bc98;
  background: #fffaf6;
}

.app-card-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ffece2;
  border: 1px solid #f7bc98;
  color: #8a4200;
  font-size: 13px;
  font-weight: 600;
}

.app-card-flag-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

/* ==========================================================================
   Auth pages (sign in, register, password reset)
   Lifted out of the login page's inline <style> block during the Blade
   conversion so every auth screen shares one definition.
   ========================================================================== */

.button:disabled {
    background: #a85f70;
    border-color: #a85f70;
    color: #fff;
  }
.auth-wrap {
    min-height: calc(100vh - 180px);
    display: grid;
    place-items: center;
    padding: 30px 0;
  }
.auth-card {
    width: 100%;
    max-width: 460px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    padding: 32px 28px;
  }
.auth-header {
    text-align: center;
    margin-bottom: 24px;
  }
.auth-header h1 {
    margin: 0 0 8px;
    font-size: 26px;
  }
.auth-header p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
  }
.auth-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    background: #eaf3ff;
    color: var(--primary);
    border-radius: 16px;
    font-size: 28px;
    font-weight: 700;
  }
.auth-form {
    display: grid;
    gap: 16px;
  }
.form-field input[type="text"],
  .form-field input[type="email"],
  .form-field input[type="password"] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
.form-field input[type="text"]:focus,
  .form-field input[type="email"]:focus,
  .form-field input[type="password"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11, 99, 206, 0.15);
  }
.form-field input[type="text"]:invalid:not(:placeholder-shown),
  .form-field input[type="email"]:invalid:not(:placeholder-shown),
  .form-field input[type="password"]:invalid:not(:placeholder-shown),
  .form-field input[aria-invalid="true"] {
    border-color: #c53030;
    box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.12);
  }
.auth-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
  }
.auth-actions a {
    color: var(--accent);
  }

  /* Brand crimson rather than the browser's default blue tick. */
  .auth-card .checkbox input[type="checkbox"] {
    accent-color: var(--accent);
  }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--muted);
    font-size: 13px;
  }
.auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
  }
.auth-footer {
    text-align: center;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--muted);
  }
.auth-footer a {
    color: var(--accent);
    font-weight: 600;
  }
.auth-note {
    margin-top: 18px;
    padding: 12px 14px;
    background: #f7f9fc;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
  }
.auth-note strong {
    color: var(--text);
  }
@media (max-width: 640px) {
    .auth-card {
      padding: 22px 18px;
    }
  }

/* Registration asks for six fields; at the default 460px they stack into a
   column long enough to scroll. The wide card pairs them with .grid-2, the same
   two-column helper the application forms use, which already collapses back to
   one column at 900px. */
.auth-card--wide {
  max-width: 720px;
}

/* Logging out of the admin panel has to POST, so the sidebar's last item is a
   button wearing .sidebar-link. Reset the parts a button brings with it. */
button.sidebar-link {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* A form button that has to read as a link, for actions that must be POSTed -
   signing out from inside a sentence, for instance. Inherits the surrounding
   link colour rather than introducing another. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--accent-hover, var(--accent));
}

/* Validation message under a field. The static template only ever styled the
   input itself (via aria-invalid) and the summary box, so this is the one new
   rule the server-rendered errors need. */
.field-error {
  display: block;
  margin-top: 6px;
  color: #c53030;
  font-size: 13px;
  font-weight: 600;
}

/* Pagination — the pager Laravel renders for every paginated list. Built from
   the same buttons the rest of the UI uses, so it needs only layout here. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.pagination-info {
  color: var(--muted);
  font-size: 0.92rem;
}

.pagination-total {
  opacity: 0.75;
}

.pagination .is-disabled {
  opacity: 0.45;
  pointer-events: none;
}