html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #258cfb;
}

[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active:focus,
[data-bs-theme="dark"] .btn-link.nav-link:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #8b5cf6;
}

/* Sticky footer, flexbox version. The template's original approach
   (html{position:relative} + body{margin-bottom:60px} + an absolutely
   positioned .footer) hard-codes a 60px single-line footer; the Important
   Notice is several lines tall, so the footer now sits in normal flow and is
   pushed down by margin-top:auto instead. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The content wrapper takes the slack so the footer stays at the bottom on
   short pages without overlapping anything on tall ones. */
body > .container {
  flex: 1 0 auto;
}

/* ── Important legal notice (site footer) ──────────────────────────────
   Deliberately loud: it is a disclaimer that has to be noticed, so it gets a
   heavy left rule, a tinted ground and full-size body text rather than the
   muted small print around it. Amber reads as "read me" in both themes
   without the alarm of red. */
.important-notice {
  border: 1px solid var(--bs-warning-border-subtle);
  border-left: 6px solid #E8A33D;
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-body-color);
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  /* The footer used to be white-space:nowrap; make sure nothing here can
     re-introduce that and push the page sideways. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.important-notice .important-notice-icon {
  font-size: 1.4rem;
  color: #B57407;
  line-height: 1;
}

/* On near-black, the subtle amber ground almost vanishes - lift it and add a
   ring so the block still reads as a distinct panel. */
[data-bs-theme="dark"] .important-notice {
  border-color: rgba(240, 182, 92, .5);
  border-left-color: #F0B65C;
  background-color: rgba(240, 182, 92, .12);
  color: #FBE7C6;
  box-shadow: 0 0 0 1px rgba(240, 182, 92, .12), 0 .5rem 1.5rem rgba(0, 0, 0, .5);
}

[data-bs-theme="dark"] .important-notice .important-notice-icon {
  color: #F0B65C;
}

/* ── World Championship announcement (site footer) ─────────────────────
   The cheerful counterpart to .important-notice above, and deliberately the
   opposite of it in every way: warm gradient instead of a warning ground, a
   sparkle instead of a hazard triangle, teal-to-violet instead of amber.
   This is the one piece of footer content meant to be read for pleasure.

   Both themes are defined explicitly rather than leaning on Bootstrap's
   subtle tokens - those are tuned for status colours, and a celebration that
   renders as a muted alert is not a celebration. */
.worlds-banner {
  background: linear-gradient(135deg, #E8F7FB 0%, #F3ECFF 55%, #FFF3E0 100%);
  border: 1px solid rgba(124, 58, 237, .22);
  border-left: 6px solid #0FA3B1;
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  color: #1B365D;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 .5rem 1.25rem rgba(27, 54, 93, .10);
}

.worlds-banner p {
  margin-bottom: .6rem;
  max-width: 78ch;
}

.worlds-banner-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #7C3AED;
  margin-bottom: .35rem;
  letter-spacing: -.01em;
}

.worlds-banner-dates {
  font-weight: 600;
  color: #0B7C88;
}

.worlds-banner-icon {
  font-size: 1.6rem;
  line-height: 1;
  color: #E8A33D;
}

/* On the near-black ground the pastel gradient would glare, so the dark
   variant keeps the same three hues at low alpha and brightens the text
   instead - bright and happy, not a torch. */
[data-bs-theme="dark"] .worlds-banner {
  background: linear-gradient(135deg, rgba(15, 163, 177, .16) 0%, rgba(124, 58, 237, .18) 55%, rgba(232, 163, 61, .14) 100%);
  border-color: rgba(167, 139, 250, .32);
  border-left-color: #22D3EE;
  color: #E6ECF5;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .10), 0 .5rem 1.5rem rgba(0, 0, 0, .45);
}

[data-bs-theme="dark"] .worlds-banner-title {
  color: #C4B5FD;
}

[data-bs-theme="dark"] .worlds-banner-dates {
  color: #67E8F9;
}

[data-bs-theme="dark"] .worlds-banner-icon {
  color: #FBBF24;
}

/* ── Landing page ──────────────────────────────────────────────────────
   The hero and the program-tile bands are brand navy, which sits too close
   to the dark theme's near-black ground. Give them a defined edge and lift
   them off the page rather than changing the brand colour. */
.landing-hero {
  box-shadow: 0 .5rem 1.5rem rgba(16, 27, 46, .18);
}

[data-bs-theme="dark"] .landing-hero {
  border: 1px solid rgba(167, 139, 250, .45);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .18), 0 1rem 2.5rem rgba(0, 0, 0, .65);
}

/* Same problem one level down: a navy band on a dark card had no edge. */
[data-bs-theme="dark"] .program-band {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* ── Act-as impersonation banner ───────────────────────────────────────
   Intentionally the loudest thing on the page, and identical in both themes.
   While this bar is showing, a staff member has full control of someone
   else's account - it must never blend into a theme or be mistaken for a
   routine notification. */
.act-as-banner {
  background-color: #B3261E;
  color: #fff;
  border-bottom: 3px solid #7F1710;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .3);
  z-index: 1080;
}

.act-as-banner .small {
  color: rgba(255, 255, 255, .85);
}

/* ── Manage-sessions button ───────────────────────────────────────────
   Deliberately loud, and deliberately NOT one of Bootstrap's contextual
   colours. Every semantic slot on this screen is already spoken for -
   primary is Save, danger is Delete, secondary is everything else - so a
   button that needs to be findable at a glance has nowhere in that palette
   to go without reading as one of those actions. Purple carries no meaning
   here, which is exactly why it can be handed one.

   Solid fill with white text rather than an outline: it keeps its contrast
   in both themes, so no dark-mode variant is needed. */
.btn-sessions {
  background-color: #7C3AED;
  border-color: #7C3AED;
  color: #fff;
}

.btn-sessions:hover,
.btn-sessions:active {
  background-color: #6D28D9;
  border-color: #6D28D9;
  color: #fff;
}

.btn-sessions:focus-visible {
  background-color: #6D28D9;
  border-color: #6D28D9;
  color: #fff;
  box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .5);
}

/* ── Brand logo ────────────────────────────────────────────────────────
   The logo is single-colour navy on transparency (see recf-logo.png), which
   is unreadable against the dark navbar - so in dark mode it's flattened to
   white via a filter rather than shipping a second asset to keep in sync. */
.brand-logo {
  width: 40px;
  height: 40px;
}

[data-bs-theme="dark"] .brand-logo {
  filter: brightness(0) invert(1);
}

/* ── Events filter bar ─────────────────────────────────────────────────
   Brand-tied but deliberately NOT the hero's solid navy. Two reasons: this
   strip sits directly above event cards that already carry navy banner
   bands, so a third navy block makes the page top-heavy and competes with
   the content it filters; and small labels on saturated navy sit right at
   the edge of comfortable reading. So: a navy-TINTED ground with a solid
   brand rule across the top - the hero's colour family, at utility weight,
   with text left in theme-native tones that stay comfortably legible. */
.filter-bar {
  /* A real blue tint rather than a blue-leaning grey, with a soft vertical
     fall so the panel has some depth instead of reading as a flat slab.
     Same family as the navy brand rule above it. */
  background: linear-gradient(180deg, #F3F8FF 0%, #E2ECFA 100%);
  border: 1px solid rgba(27, 54, 93, .16);
  border-top: 3px solid #1B365D;
}

/* Every label is laid out identically - flex row, fixed line-height - so the
   one that carries an info icon computes the same height as the plain three
   and the controls below them stay on a single line. */
.filter-bar .form-label {
  display: flex;
  align-items: center;
  gap: .35rem;
  line-height: 1.5;
  min-height: 1.5rem;
  color: #2E4666;
}

/* The hero's amber, darkened for contrast against a light ground. */
.filter-bar .bi-info-circle {
  color: #B57407;
}

.filter-bar hr,
.filter-bar .border-top {
  border-color: rgba(27, 54, 93, .15) !important;
  opacity: 1;
}

/* .card.filter-bar, not just .filter-bar: the generic
   [data-bs-theme="dark"] .card rule further down this file has equal
   specificity and would otherwise win on source order and repaint the top
   rule violet. */
[data-bs-theme="dark"] .card.filter-bar {
  /* Navy-leaning lift over the #212529 body ground rather than a colour of
     its own, so it recedes behind the cards instead of glowing.
     background-image must be cleared explicitly - the light rule sets a
     gradient via the `background` shorthand, and overriding only
     background-color would leave that gradient painted on top. */
  background-color: #232936;
  background-image: none;
  border-color: rgba(167, 139, 250, .28);
  border-top-color: #7C6BD6;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45);
}

[data-bs-theme="dark"] .filter-bar .form-label {
  color: #B9C7DC;
}

[data-bs-theme="dark"] .filter-bar .bi-info-circle {
  color: #E8A33D;
}

[data-bs-theme="dark"] .filter-bar hr,
[data-bs-theme="dark"] .filter-bar .border-top {
  border-color: rgba(255, 255, 255, .12) !important;
}

/* "Learn More and Get Involved" links. A plain outline button was too quiet
   for what is effectively the page's secondary navigation, so these get a
   filled ground, a sized icon and a hover lift - noticeable without
   competing with the amber primary CTA in the hero. */
.involve-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.15rem;
  border-radius: .6rem;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 27, 46, .06), 0 4px 12px rgba(16, 27, 46, .08);
  transition: transform .12s ease-out, box-shadow .12s ease-out, border-color .12s ease-out;
}

.involve-btn:hover,
.involve-btn:focus-visible {
  color: var(--bs-body-color);
  border-color: #1B365D;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(16, 27, 46, .1), 0 10px 22px rgba(16, 27, 46, .16);
}

/* The icon carries the colour, so the buttons stay legible as a set while
   still being individually recognisable. */
.involve-btn .bi {
  font-size: 1.25rem;
  color: #1B365D;
  flex: none;
}

[data-bs-theme="dark"] .involve-btn {
  border-color: rgba(167, 139, 250, .4);
  background-color: rgba(167, 139, 250, .08);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .45);
}

[data-bs-theme="dark"] .involve-btn:hover,
[data-bs-theme="dark"] .involve-btn:focus-visible {
  border-color: #a78bfa;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .35), 0 .75rem 1.5rem rgba(0, 0, 0, .6);
}

[data-bs-theme="dark"] .involve-btn .bi {
  color: #a78bfa;
}

@media (prefers-reduced-motion: reduce) {
  .involve-btn,
  .involve-btn:hover,
  .involve-btn:focus-visible {
    transform: none;
    transition: none;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Dark mode toggle icon - shows the icon for the mode a click switches TO
   (moon in light mode invites going dark, sun in dark mode invites going
   back to light), not the current mode. */
.theme-icon-sun {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-sun {
  display: inline-block;
}

[data-bs-theme="dark"] .theme-icon-moon {
  display: none;
}

/* Dark mode accent - violet/blue highlights instead of flat gray-on-gray.
   Links get a lighter, more saturated violet than the button/border accent
   so they still read as clickable against dark backgrounds. .btn-primary
   and .nav-pills active state are re-themed in _Layout.cshtml.css, right
   next to the light-mode rules they override. */
[data-bs-theme="dark"] {
  --bs-link-color: #a78bfa;
  --bs-link-color-rgb: 167, 139, 250;
  --bs-link-hover-color: #c4b5fd;
  --bs-link-hover-color-rgb: 196, 181, 253;
}

/* Cards default to a flat, barely-there border in Bootstrap's stock dark
   theme - give them a violet tint plus a hover glow (every dashboard card
   is a link) so the grid doesn't look dull. */
[data-bs-theme="dark"] .card {
  border-color: rgba(139, 92, 246, 0.35);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[data-bs-theme="dark"] a:hover > .card {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 0.5rem 1rem rgba(139, 92, 246, 0.15);
}

/* Buttons/navbar-brand/nav-pills: overridden here (not in
   _Layout.cshtml.css) because MVC's CSS isolation only scopes that file's
   rules to markup written directly in _Layout.cshtml - a .btn-primary
   rendered by any other view never picks it up. Extra attribute-selector
   specificity here beats Bootstrap's own single-class .btn-primary rule
   regardless of stylesheet load order. */
[data-bs-theme="dark"] .navbar-brand {
  color: #a78bfa;
}

[data-bs-theme="dark"] .btn-primary {
  background-color: #7c3aed;
  border-color: #6d28d9;
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:active {
  background-color: #6d28d9;
  border-color: #5b21b6;
}

[data-bs-theme="dark"] .nav-pills .nav-link.active,
[data-bs-theme="dark"] .nav-pills .show > .nav-link {
  background-color: #7c3aed;
  border-color: #6d28d9;
}
/* ── Contextual table rows in dark mode ──────────────────────────────────
   Bootstrap 5.3 made almost everything theme-aware and then left the table
   variants behind: .table-success/-warning/-info/-danger are defined ONCE,
   as the light-mode pastels (#d1e7dd, #fff3cd, ...), with a near-black
   --bs-table-color to sit on them. Under data-bs-theme="dark" - which is
   this app's DEFAULT, not an opt-in - a report that marks paid rows green
   turns into bands of bright mint across a #212529 page. That is what made
   GrantReports/AllocationDetail, ByOrg and TeamFeeGrantList look lit up.

   Fixed here rather than in the views because it is not those pages' bug:
   the same classes carry status on OrgReports, PaymentDiagnostic and
   UserAccounts, and swapping them for something bespoke per page would
   scatter the convention instead of repairing it.

   Each variant is re-tinted as a low-alpha wash of its own hue over
   whatever the row already sits on, so striping and hover still read
   underneath, and the text colour is handed back to the body colour rather
   than the light-mode near-black that would otherwise be unreadable. */
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-secondary {
  --bs-table-color: var(--bs-body-color);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-success {
  --bs-table-bg: rgba(25, 135, 84, .16);
  --bs-table-border-color: rgba(25, 135, 84, .32);
  --bs-table-striped-bg: rgba(25, 135, 84, .22);
  --bs-table-active-bg: rgba(25, 135, 84, .28);
  --bs-table-hover-bg: rgba(25, 135, 84, .24);
}

[data-bs-theme="dark"] .table-warning {
  --bs-table-bg: rgba(255, 193, 7, .14);
  --bs-table-border-color: rgba(255, 193, 7, .30);
  --bs-table-striped-bg: rgba(255, 193, 7, .20);
  --bs-table-active-bg: rgba(255, 193, 7, .26);
  --bs-table-hover-bg: rgba(255, 193, 7, .22);
}

[data-bs-theme="dark"] .table-info {
  --bs-table-bg: rgba(13, 202, 240, .14);
  --bs-table-border-color: rgba(13, 202, 240, .30);
  --bs-table-striped-bg: rgba(13, 202, 240, .20);
  --bs-table-active-bg: rgba(13, 202, 240, .26);
  --bs-table-hover-bg: rgba(13, 202, 240, .22);
}

[data-bs-theme="dark"] .table-danger {
  --bs-table-bg: rgba(220, 53, 69, .16);
  --bs-table-border-color: rgba(220, 53, 69, .32);
  --bs-table-striped-bg: rgba(220, 53, 69, .22);
  --bs-table-active-bg: rgba(220, 53, 69, .28);
  --bs-table-hover-bg: rgba(220, 53, 69, .24);
}

[data-bs-theme="dark"] .table-primary {
  --bs-table-bg: rgba(124, 58, 237, .18);
  --bs-table-border-color: rgba(124, 58, 237, .34);
  --bs-table-striped-bg: rgba(124, 58, 237, .24);
  --bs-table-active-bg: rgba(124, 58, 237, .30);
  --bs-table-hover-bg: rgba(124, 58, 237, .26);
}

[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: rgba(173, 181, 189, .12);
  --bs-table-border-color: rgba(173, 181, 189, .26);
  --bs-table-striped-bg: rgba(173, 181, 189, .18);
  --bs-table-active-bg: rgba(173, 181, 189, .24);
  --bs-table-hover-bg: rgba(173, 181, 189, .20);
}

/* The group headers on GrantReports/ByOrg. bg-primary-subtle IS theme-aware,
   but its dark value is tuned to Bootstrap's own blue - this app's dark
   accent is the violet used for .btn-primary above, and the stock blue read
   as a second, competing brand colour down the page. */
.grant-group-header {
  background-color: rgba(13, 110, 253, .10);
  border: 1px solid rgba(13, 110, 253, .20);
}

[data-bs-theme="dark"] .grant-group-header {
  background-color: rgba(124, 58, 237, .18);
  border: 1px solid rgba(167, 139, 250, .28);
}

/* Free-text entered by users (Event Partner content, legacy award text).
   Rendered as SANITISED HTML, not encoded text - the stored data is markup for
   238 of 364 events, so encoding it showed visible tags on the public page.
   See EventContentSanitizer, which strips script, style, remote content and
   every CSS property, and turns newlines into <br> for the rows that really
   are plain text.

   No white-space: pre-wrap here: the content carries its own block elements
   now, and pre-wrap would add the source newlines on top of them. */
.user-text {
  overflow-wrap: break-word;
}

/* Pasted markup often arrives wrapped in a trailing empty paragraph. */
.user-text > p:last-child {
  margin-bottom: 0;
}