/* ==========================================================================
   THRIVE BRAND LAYER — loaded LAST by every layout (base.html, the hub's
   admin.html, the sign-in pages' auth_base.html and the error pages).

   Source: the Thrive Brand Identity Book v1.0 (docs/brand/THRIVE_BRAND_GUIDE.md).
   One font (Montserrat), one palette, used with restraint:

     surfaces   White and Cloud, hairlines in a navy tint
     text       Thrive Navy for headings, a navy tint for body, Slate for small print
     action     Strategy Blue (links, primary buttons, active states)
     progress   Growth Green (progress bars, "done", success); Deep Green for green TEXT
     accent     Highlight Gold, sparingly (stars, key numbers, earned badges)

   Status colours (danger / warning alerts, red badges, filters that mean
   something) are deliberately left alone — they carry meaning, not brand.

   Why one override file instead of editing every stylesheet: the theme CSS is
   vendor code and the app's own sheets each carry a token block; re-pointing
   the tokens here keeps the brand in one place and easy to review. Selectors
   that must beat page-level sheets loaded after this one (commerce.css,
   dashboard.css arrive inside <body>) are prefixed with `body` for specificity.
   ========================================================================== */

:root,
[data-bs-theme] {
  /* --- Palette (page 26) and tints (page 27) --- */
  --thrive-navy: #0B1F4D;      --thrive-navy-rgb: 11, 31, 77;
  --thrive-navy-700: #3C4C71;
  --thrive-navy-400: #858FA6;
  --thrive-navy-100: #E7EAF0;
  --thrive-blue: #0B5FC6;      --thrive-blue-rgb: 11, 95, 198;
  --thrive-blue-400: #5A93DC;
  --thrive-blue-200: #A9C8EE;
  --thrive-blue-50: #E8F0FB;
  --thrive-green: #7DBA28;     --thrive-green-rgb: 125, 186, 40;
  --thrive-green-deep: #4F7F12;
  --thrive-green-200: #B8DB8A;
  --thrive-green-50: #EEF6E2;
  --thrive-gold: #F5C518;      --thrive-gold-rgb: 245, 197, 24;
  --thrive-slate: #5B6475;     --thrive-slate-rgb: 91, 100, 117;
  --thrive-cloud: #F5F7FA;
  --thrive-white: #FFFFFF;

  /* --- Typography (page 29): Montserrat only --- */
  --thrive-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-font-sans-serif: var(--thrive-font);
  --bs-body-font-family: var(--thrive-font);
  --bs-btn-font-family: var(--thrive-font);
  --su-font: var(--thrive-font);
  /* Montserrat runs ~8% wider than Inter; 14px keeps every row and button at
     its old length and is the brand book's minimum for body text on screen. */
  --bs-body-font-size: .875rem;
}

/* ---- Light theme: surfaces, text, action colour -------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-body-bg: var(--thrive-cloud);           --bs-body-bg-rgb: 245, 247, 250;
  --bs-body-color: var(--thrive-navy-700);     --bs-body-color-rgb: 60, 76, 113;
  --bs-heading-color: var(--thrive-navy);
  --bs-emphasis-color: var(--thrive-navy);     --bs-emphasis-color-rgb: 11, 31, 77;
  --bs-secondary-color: var(--thrive-slate);   --bs-secondary-color-rgb: 91, 100, 117;
  --bs-tertiary-color: var(--thrive-navy-400);
  --bs-secondary-bg: var(--thrive-cloud);      --bs-secondary-bg-rgb: 245, 247, 250;
  --bs-tertiary-bg: var(--thrive-cloud);       --bs-tertiary-bg-rgb: 245, 247, 250;
  --bs-border-color: var(--thrive-navy-100);
  --bs-border-color-translucent: rgba(11, 31, 77, .10);

  --bs-primary: var(--thrive-blue);            --bs-primary-rgb: var(--thrive-blue-rgb);
  --bs-primary-text-emphasis: #08458f;
  --bs-primary-bg-subtle: var(--thrive-blue-50);
  --bs-primary-border-subtle: var(--thrive-blue-200);
  /* "info" is used all over the templates as the decorative accent (cyan in the
     old theme). In the brand it is Strategy Blue. */
  --bs-info: var(--thrive-blue);               --bs-info-rgb: var(--thrive-blue-rgb);
  --bs-success: var(--thrive-green-deep);      --bs-success-rgb: 79, 127, 18;
  --bs-success-bg-subtle: var(--thrive-green-50);
  --bs-success-border-subtle: var(--thrive-green-200);
  --bs-dark: var(--thrive-navy);               --bs-dark-rgb: var(--thrive-navy-rgb);
  --bs-secondary: var(--thrive-slate);         --bs-secondary-rgb: var(--thrive-slate-rgb);

  --bs-link-color: var(--thrive-blue);         --bs-link-color-rgb: var(--thrive-blue-rgb);
  --bs-link-hover-color: var(--thrive-navy);   --bs-link-hover-color-rgb: var(--thrive-navy-rgb);
  --bs-focus-ring-color: rgba(11, 95, 198, .25);
}

/* ---- Dark theme: navy leads, as on the brand book's dark pages ----------- */
[data-bs-theme="dark"] {
  --bs-body-bg: #071636;                       --bs-body-bg-rgb: 7, 22, 54;
  --bs-body-color: #D5DBE7;                    --bs-body-color-rgb: 213, 219, 231;
  --bs-heading-color: #FFFFFF;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: var(--thrive-navy-400);
  --bs-secondary-bg: var(--thrive-navy);
  --bs-tertiary-bg: #0E2558;
  --bs-border-color: rgba(255, 255, 255, .09);
  --bs-primary: var(--thrive-blue-400);        --bs-primary-rgb: 90, 147, 220;
  --bs-info: var(--thrive-blue-400);           --bs-info-rgb: 90, 147, 220;
  --bs-success: var(--thrive-green);           --bs-success-rgb: var(--thrive-green-rgb);
  --bs-link-color: var(--thrive-blue-400);     --bs-link-color-rgb: 90, 147, 220;
  --bs-link-hover-color: #FFFFFF;
}

/* ==========================================================================
   1. TYPE — Montserrat everywhere (icon fonts set their own family on
      ::before / their own class, so they are untouched).
   ========================================================================== */
body,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.btn, .tooltip, .popover, .dropdown-menu, .navbar, .nav, .card,
.form-control, .form-select, input, select, textarea, button,
.dash-side, .text-sans-serif,
.glightbox-clean .gslide-title, .glightbox-clean .gslide-desc {
  font-family: var(--thrive-font) !important;
}
body { font-size: var(--bs-body-font-size); color: var(--bs-body-color); background-color: var(--bs-body-bg); }

/* Hierarchy (page 29): ExtraBold display, Bold headlines, SemiBold labels. */
h1, .h1, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 800; letter-spacing: -.02em;
}
h2, .h2, h3, .h3 { font-weight: 700; letter-spacing: -.01em; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; }
/* Colour comes from --bs-heading-color (navy); headings inside dark surfaces
   inherit white instead. */
.text-muted, .text-secondary, small.text-muted, .form-text { color: var(--bs-secondary-color) !important; }
.text-dark { color: var(--thrive-navy) !important; }
[data-bs-theme="dark"] .text-dark { color: #FFFFFF !important; }

/* Eyebrows / labels in wide capitals (DOING IT DIFFERENTLY style). */
.text-uppercase.small, .text-uppercase.text-xs, .text-uppercase.text-xxs,
.tc-eyebrow, .dash-eyebrow { letter-spacing: .08em; font-weight: 600; }

/* ==========================================================================
   2. SURFACES — White and Cloud, hairlines in navy tint.
   ========================================================================== */
.card { --bs-card-bg: #FFFFFF; --bs-card-border-color: var(--thrive-navy-100); }
.navbar, .su-navbar, header.navbar-light { background-color: #FFFFFF; }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--thrive-blue); --bs-dropdown-link-hover-bg: var(--thrive-blue-50); }
.table { --bs-table-hover-bg: var(--thrive-blue-50); --bs-table-striped-bg: var(--thrive-cloud); }
[data-bs-theme="dark"] .card { --bs-card-bg: var(--thrive-navy); --bs-card-border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .navbar, [data-bs-theme="dark"] .su-navbar { background-color: var(--thrive-navy); }

/* Form focus: Strategy Blue ring instead of the theme's cyan/pink. */
.form-control:focus, .form-select:focus {
  border-color: var(--thrive-blue-400) !important;
  box-shadow: 0 0 0 3px rgba(11, 95, 198, .15) !important;
}
.form-check-input:checked { background-color: var(--thrive-blue); border-color: var(--thrive-blue); }
.form-switch .form-check-input:checked { background-color: var(--thrive-green-deep); border-color: var(--thrive-green-deep); }

/* ==========================================================================
   3. ACTIONS — buttons and the old Soft UI gradients.
      Primary/info: Strategy Blue, hover to Navy. Success: Deep Green (white
      text on Growth Green fails contrast). Dark: Navy. Secondary: Slate.
      Danger and warning keep their meaning and colour.
   ========================================================================== */
.btn-primary, .bg-gradient-primary,
.btn-info, .bg-gradient-info {
  background-image: none !important;
  background-color: var(--thrive-blue) !important;
  border-color: var(--thrive-blue) !important;
  color: #FFFFFF !important;
}
.btn-primary:hover, .btn-primary:focus-visible, .btn-info:hover, .btn-info:focus-visible,
a.bg-gradient-info:hover, button.bg-gradient-info:hover, .btn.bg-gradient-info:hover,
a.bg-gradient-primary:hover, .btn.bg-gradient-primary:hover {
  background-color: var(--thrive-navy) !important;
  border-color: var(--thrive-navy) !important;
}
.btn-success, .bg-gradient-success {
  background-image: none !important;
  background-color: var(--thrive-green-deep) !important;
  border-color: var(--thrive-green-deep) !important;
  color: #FFFFFF !important;
}
.btn-success:hover, .btn.bg-gradient-success:hover { background-color: #3f6610 !important; }
.btn-dark, .bg-gradient-dark {
  background-image: none !important; background-color: var(--thrive-navy) !important;
  border-color: var(--thrive-navy) !important; color: #FFFFFF !important;
}
.btn-secondary, .bg-gradient-secondary {
  background-image: none !important; background-color: var(--thrive-slate) !important;
  border-color: var(--thrive-slate) !important; color: #FFFFFF !important;
}
.btn-outline-primary, .btn-outline-info {
  --bs-btn-color: var(--thrive-blue); --bs-btn-border-color: var(--thrive-blue);
  --bs-btn-hover-bg: var(--thrive-blue); --bs-btn-hover-border-color: var(--thrive-blue); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--thrive-navy); --bs-btn-active-border-color: var(--thrive-navy);
  color: var(--thrive-blue);
}
.btn-outline-secondary {
  --bs-btn-color: var(--thrive-navy-700); --bs-btn-border-color: var(--thrive-navy-100);
  --bs-btn-hover-bg: var(--thrive-cloud); --bs-btn-hover-color: var(--thrive-navy); --bs-btn-hover-border-color: var(--thrive-navy-400);
}
.btn-outline-dark {
  --bs-btn-color: var(--thrive-navy); --bs-btn-border-color: var(--thrive-navy);
  --bs-btn-hover-bg: var(--thrive-navy); --bs-btn-hover-border-color: var(--thrive-navy);
}
.btn-link { --bs-btn-color: var(--thrive-blue); --bs-btn-hover-color: var(--thrive-navy); }
.btn-primary-soft, .btn-info-soft {
  color: var(--thrive-blue) !important; background-color: var(--thrive-blue-50) !important;
}
.btn-primary-soft:hover, .btn-info-soft:hover { color: #fff !important; background-color: var(--thrive-blue) !important; }
.btn-success-soft { color: var(--thrive-green-deep) !important; background-color: var(--thrive-green-50) !important; }

/* Headline "gradient text" (Soft UI's cyan→blue) becomes calm, solid navy. */
.text-gradient.text-info, .text-gradient.text-primary, .text-gradient.text-dark {
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--thrive-navy) !important;
}
[data-bs-theme="dark"] .text-gradient.text-info,
[data-bs-theme="dark"] .text-gradient.text-primary { color: #FFFFFF !important; }
.text-gradient.text-success { background-image: none !important; -webkit-text-fill-color: currentColor !important; color: var(--thrive-green-deep) !important; }
.text-info, .text-primary { color: var(--thrive-blue) !important; }
[data-bs-theme="dark"] .text-info, [data-bs-theme="dark"] .text-primary { color: var(--thrive-blue-400) !important; }
.text-success { color: var(--thrive-green-deep) !important; }
[data-bs-theme="dark"] .text-success { color: var(--thrive-green) !important; }
/* .bg-primary / .bg-info / .bg-dark follow the --bs-*-rgb tokens above, which
   keeps Bootstrap's .bg-opacity-* tints working (a solid override broke them). */
.bg-primary-soft, .bg-info-soft { background-color: var(--thrive-blue-50) !important; }
.bg-success-soft { background-color: var(--thrive-green-50) !important; }

/* Progress is green (page 26: "moments of progress"). Bars that state a
   status with their own bg-danger / bg-warning class keep it. */
.progress { --bs-progress-bar-bg: var(--thrive-green); --bs-progress-bg: var(--thrive-navy-100); }
.progress-bar:not([class*="bg-"]) { background-color: var(--thrive-green); }
.progress-bar.bg-gradient-info, .progress-bar.bg-info, .progress-bar.bg-primary { background-color: var(--thrive-blue) !important; }

/* Gold is the accent: stars and earned things only. */
.text-warning.bi-star-fill, .text-warning.bi-star-half, .bi-star-fill.text-warning,
.tc-stars .bi-star-fill, .tc-stars .bi-star-half { color: var(--thrive-gold) !important; }

/* Page loader + boosted-navigation bar: blue into green, the double tick. */
#htmxBar { background: linear-gradient(90deg, var(--thrive-blue), var(--thrive-green)) !important; }

/* ==========================================================================
   4. APP SURFACES — re-point each component's own token block.
   ========================================================================== */
/* Sidebar (css/sidenav.css) */
body .dash-side {
  --side-ink: var(--thrive-navy);
  --side-muted: var(--thrive-slate);
  --side-blue: var(--thrive-blue);
  --side-blue-soft: var(--thrive-blue-50);
  --side-line: var(--thrive-navy-100);
  --side-surface: #FFFFFF;
  --side-shadow: 0 6px 24px rgba(11, 31, 77, .06), 0 1px 2px rgba(11, 31, 77, .04);
}
[data-bs-theme="dark"] body .dash-side {
  --side-ink: #E7EAF0; --side-muted: var(--thrive-navy-400);
  --side-blue: var(--thrive-blue-400); --side-blue-soft: rgba(90, 147, 220, .14);
  --side-line: rgba(255, 255, 255, .08); --side-surface: var(--thrive-navy);
}
/* Active item gets the green tick colour on its marker, blue on the label. */
body .dash-side .nav-link.is-active { box-shadow: inset 3px 0 0 var(--thrive-green); }

/* Finance, shop and staff desk (css/commerce.css .tc tokens) */
body .tc {
  --tc-ink: var(--thrive-navy-700);
  --tc-ink-strong: var(--thrive-navy);
  --tc-muted: var(--thrive-slate);
  --tc-line: var(--thrive-navy-100);
  --tc-surface: #FFFFFF;
  --tc-surface-2: var(--thrive-cloud);
  --tc-primary: var(--thrive-blue);
  --tc-primary-soft: var(--thrive-blue-50);
  --tc-cyan: var(--thrive-blue-400);
  --tc-cyan-soft: var(--thrive-blue-50);
  --tc-success: var(--thrive-green-deep);
  --tc-success-soft: var(--thrive-green-50);
  --tc-shadow: 0 6px 24px rgba(11, 31, 77, .06), 0 1px 2px rgba(11, 31, 77, .04);
  --tc-shadow-lg: 0 14px 36px rgba(11, 31, 77, .12);
}
[data-bs-theme="dark"] body .tc {
  --tc-ink: #D5DBE7; --tc-ink-strong: #FFFFFF; --tc-muted: var(--thrive-navy-400);
  --tc-line: rgba(255, 255, 255, .09); --tc-surface: var(--thrive-navy); --tc-surface-2: #0E2558;
  --tc-primary: var(--thrive-blue-400); --tc-primary-soft: rgba(90, 147, 220, .14);
  --tc-cyan: var(--thrive-blue-400); --tc-cyan-soft: rgba(90, 147, 220, .12);
  --tc-success: var(--thrive-green); --tc-success-soft: rgba(125, 186, 40, .14);
}
body .tc .tc-chip--cyan { color: var(--thrive-blue); }

/* Student dashboard (css/dashboard.css): the welcome banner is Thrive Navy;
   the icon tiles and bars use the palette instead of a rainbow. */
body .dash-hero {
  background: linear-gradient(310deg, var(--thrive-navy) 0%, var(--thrive-navy) 55%, #14306E 100%) !important;
}
body .dash-hero::after { opacity: .5; }
body .dash-hero :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: #FFFFFF; }
body .dash-glyph--primary   { background: var(--thrive-navy); }
body .dash-glyph--info      { background: var(--thrive-blue); }
body .dash-glyph--success   { background: var(--thrive-green-deep); }
body .dash-glyph--secondary { background: var(--thrive-slate); }
body .dash-glyph--dark      { background: var(--thrive-navy); }
body .dash-glyph--warning   { background: var(--thrive-gold); color: var(--thrive-navy) !important; }
body .dash-glyph--warning > * { color: var(--thrive-navy) !important; }
body .dash-bar--primary > span   { background: var(--thrive-navy); }
body .dash-bar--info > span      { background: var(--thrive-blue); }
body .dash-bar--success > span   { background: var(--thrive-green); }
body .dash-bar--secondary > span { background: var(--thrive-slate); }
body .dash-line__fill { background: var(--thrive-blue); }
body .dash-spark > i { background: var(--thrive-blue-400); }
body .dash-badge--earned .dash-badge__ico { background: var(--thrive-gold); color: var(--thrive-navy); }

/* Registration and the side accent bar (css/chrome.css). */
body .reg-bg::after { background: linear-gradient(160deg, rgba(11, 31, 77, .80), rgba(7, 22, 54, .94)) !important; }
body .reg-head { background: var(--thrive-navy) !important; }
body.sidebar-start-enabled #sidebarHoverZone::after { background: linear-gradient(180deg, var(--thrive-blue), var(--thrive-green)) !important; }