/* ─────────────────────────────────────────────────────────────
   Riff — d.school skin
   Loaded AFTER Keenthemes bundle to override the default theme.

   Strategy: remap the Bootstrap/Keenthemes class names that already
   exist throughout the app onto d.school design tokens. Heavy use of
   !important is deliberate — we are overriding a high-specificity
   third-party theme without rewriting every view.

   Source of design: Stanford d.school — Rifflection handoff bundle.
   ───────────────────────────────────────────────────────────── */

/* Webfonts — Google "Everyday use" toolkit */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Gloock&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Fira+Code:wght@400;500;600;700&display=swap");

:root {
  /* ─────────── Core color ─────────── */
  --ds-black:        #000000;
  --ds-white:        #FFFFFF;
  --ds-cream:        #EFEFE5; /* "Paper" — workhorse background */
  --ds-red:          #EE272A; /* d. Dot Red — accent */
  --ds-cardinal:     #8C1515; /* Stanford Cardinal */
  --ds-aqua:         #8CDEE3;

  /* Secondary "Colors Beyond" */
  --ds-mustard:      #D9A521;
  --ds-salmon:       #F08A7E;
  --ds-terracotta:   #B2533C;
  --ds-olive:        #5C6B2E;
  --ds-slate:        #4A6B7C;
  --ds-butter:       #F4D35E;
  --ds-sky:          #7FB3C8;
  --ds-plum:         #6B2C5F;

  /* Semantic surface / ink */
  --ds-bg:           var(--ds-cream);
  --ds-surface:      var(--ds-cream);
  --ds-surface-2:    #E7E6DA;
  --ds-surface-3:    #DEDDCF;
  --ds-ink:          var(--ds-black);
  --ds-ink-mute:     #4A4A45;
  --ds-ink-faint:    #8A8A82;
  --ds-line:         var(--ds-black);
  --ds-line-soft:    rgba(0,0,0,0.12);
  --ds-line-softer:  rgba(0,0,0,0.06);
  --ds-accent:       var(--ds-red);
  --ds-accent-deep:  var(--ds-cardinal);

  /* Typography */
  --ds-font-display:   "Gloock", "Playfair Display", Georgia, serif;
  --ds-font-body:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-mono:      "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tracking */
  --ds-tr-display: -0.02em;
  --ds-tr-tight:   -0.01em;
  --ds-tr-caption: 0.08em;

  /* Radius — small everywhere; pills only for chips/small buttons */
  --ds-radius-0: 0px;
  --ds-radius-1: 2px;
  --ds-radius-2: 6px;
  --ds-radius-3: 8px;
  --ds-radius-card: 12px;
  --ds-radius-pill: 999px;

  /* Shadow — sparingly */
  --ds-shadow-0: none;
  --ds-shadow-1: 0 1px 0 rgba(0,0,0,0.06);
  --ds-shadow-2: 0 4px 16px rgba(0,0,0,0.08);
  --ds-shadow-photo: 0 18px 40px -16px rgba(0,0,0,0.35);

  /* Motion */
  --ds-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-dur-fast: 120ms;
  --ds-dur: 220ms;

  /* ─────────── Override Bootstrap & Keenthemes variables ─────────── */
  --bs-primary:               var(--ds-ink);
  --bs-primary-rgb:           0, 0, 0;
  --bs-secondary:             var(--ds-ink-mute);
  --bs-success:               var(--ds-ink);
  --bs-info:                  var(--ds-cardinal);
  --bs-warning:               var(--ds-mustard);
  --bs-danger:                var(--ds-red);
  --bs-light:                 var(--ds-surface-2);
  --bs-dark:                  var(--ds-ink);

  --bs-body-bg:               var(--ds-cream);
  --bs-body-color:            var(--ds-ink);
  --bs-body-font-family:      var(--ds-font-body);

  --bs-link-color:            var(--ds-ink);
  --bs-link-hover-color:      var(--ds-red);
  --bs-link-decoration:       none;

  --bs-border-color:          var(--ds-line-soft);
  --bs-border-radius:         var(--ds-radius-2);
  --bs-border-radius-sm:      var(--ds-radius-1);
  --bs-border-radius-lg:      var(--ds-radius-3);

  --kt-primary:               var(--ds-ink);
  --kt-primary-active:        var(--ds-red);
  --kt-primary-light:         var(--ds-surface-2);
  --kt-primary-inverse:       var(--ds-cream);

  /* Warm-leaning grey scale — replaces Bootstrap's cool greys so that
     anything referencing var(--bs-gray-*) (e.g. the dashboard's inline
     styles) sits in the cream/ink world instead of clashing blue-grey. */
  --bs-gray-100: #F4F3EC;
  --bs-gray-200: #E7E6DA;
  --bs-gray-300: #DEDDCF;
  --bs-gray-400: #B7B6AC;
  --bs-gray-500: #8A8A82;
  --bs-gray-600: #6E6E66;
  --bs-gray-700: #4A4A45;
  --bs-gray-800: #2A2A27;
  --bs-gray-900: #000000;
  --bs-border-color: var(--ds-line-soft);
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL — body & baseline
   ───────────────────────────────────────────────────────────── */
html,
body {
  background: var(--ds-cream) !important;
  color: var(--ds-ink);
  font-family: var(--ds-font-body) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#kt_app_root,
#kt_app_page,
#kt_app_wrapper,
#kt_app_main,
#kt_app_content,
#kt_app_content_container {
  background: var(--ds-cream) !important;
}

::selection { background: var(--ds-red); color: #fff; }

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — headings & utility
   ───────────────────────────────────────────────────────────── */
h1, .h1, .fs-1, .fs-2x, .fs-3x, .fs-4x,
h2, .h2 {
  font-family: var(--ds-font-display);
  font-weight: 400;
  letter-spacing: var(--ds-tr-tight);
  line-height: 1.08;
  color: var(--ds-ink);
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.fw-bolder, .fw-bold, .fw-semibold {
  color: inherit;
}
h3, .h3 { font-family: var(--ds-font-body); font-weight: 700; letter-spacing: -0.005em; }
h4, .h4, h5, .h5, h6, .h6 { font-family: var(--ds-font-body); font-weight: 600; }

/* Color utilities — remap Keenthemes grays to d.school ink scale */
.text-primary,
.text-hover-primary:hover,
.text-active-primary.active,
.text-active-primary:active {
  color: var(--ds-red) !important;
}
.text-gray-900, .text-dark, .text-gray-800 { color: var(--ds-ink) !important; }
.text-gray-700, .text-gray-600 { color: var(--ds-ink-mute) !important; }
.text-gray-500, .text-gray-400, .text-muted { color: var(--ds-ink-faint) !important; }
.text-gray-300, .text-gray-200, .text-gray-100 { color: rgba(0,0,0,0.15) !important; }
.text-white, .text-light { color: var(--ds-cream) !important; }
.text-success { color: var(--ds-ink) !important; }
.text-danger { color: var(--ds-red) !important; }
.text-warning { color: var(--ds-mustard) !important; }
.text-info { color: var(--ds-cardinal) !important; }

/* Background utilities */
.bg-light, .bg-white, .bg-body { background-color: var(--ds-cream) !important; }
.bg-primary { background-color: var(--ds-ink) !important; color: var(--ds-cream); }
.bg-success { background-color: var(--ds-ink) !important; color: var(--ds-cream); }
.bg-danger { background-color: var(--ds-red) !important; color: #fff; }
.bg-warning { background-color: var(--ds-mustard) !important; color: var(--ds-ink); }
.bg-info { background-color: var(--ds-cardinal) !important; color: var(--ds-cream); }
.bg-secondary { background-color: var(--ds-surface-2) !important; color: var(--ds-ink); }
.bg-dark { background-color: var(--ds-ink) !important; color: var(--ds-cream); }

/* Keenthemes "bg-light-*" tinted backgrounds */
.bg-light-primary { background-color: var(--ds-surface-2) !important; color: var(--ds-ink); }
.bg-light-success { background-color: var(--ds-surface-2) !important; color: var(--ds-ink); }
.bg-light-info    { background-color: color-mix(in srgb, var(--ds-cardinal) 10%, var(--ds-surface-2)) !important; color: var(--ds-ink); }
.bg-light-danger  { background-color: color-mix(in srgb, var(--ds-red) 10%, var(--ds-surface-2)) !important; color: var(--ds-ink); }
.bg-light-warning { background-color: color-mix(in srgb, var(--ds-mustard) 18%, var(--ds-surface-2)) !important; color: var(--ds-ink); }

/* Links */
a, .link-primary {
  color: var(--ds-ink);
  text-decoration: none;
  transition: color var(--ds-dur-fast) ease;
}
a:hover, .link-primary:hover { color: var(--ds-red); }
a.link-primary { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Borders */
.border, .border-top, .border-bottom, .border-start, .border-end {
  border-color: var(--ds-line-soft) !important;
}
.separator { border-color: var(--ds-line-soft) !important; }

/* ─────────────────────────────────────────────────────────────
   APP SHELL — header / wrapper / footer
   ───────────────────────────────────────────────────────────── */
.app-header,
#kt_app_header {
  background: var(--ds-cream) !important;
  border-bottom: 1px solid var(--ds-line-soft);
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.app-header .app-container { background: transparent !important; }

.app-footer {
  background: var(--ds-cream) !important;
  border-top: 1px solid var(--ds-line-soft);
  color: var(--ds-ink-mute);
}
.app-footer a { color: var(--ds-ink); }
.app-footer a:hover { color: var(--ds-red); }

/* Nav menu items */
.menu-link {
  color: var(--ds-ink-mute) !important;
  border-radius: var(--ds-radius-2) !important;
  transition: color var(--ds-dur-fast) ease, background var(--ds-dur-fast) ease;
}
.menu-link:hover,
.menu-link.active,
.menu-item.show > .menu-link,
.menu-item.here > .menu-link {
  color: var(--ds-ink) !important;
  background: transparent !important;
}
.menu-item.here > .menu-link::after,
.menu-link.active::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--ds-red);
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--ds-font-body) !important;
  font-weight: 500;
  border-radius: var(--ds-radius-2) !important;
  letter-spacing: 0.005em;
  border-width: 1.5px;
  transition: transform var(--ds-dur-fast), background var(--ds-dur-fast), color var(--ds-dur-fast), border-color var(--ds-dur-fast) !important;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-red) 30%, transparent) !important; }

/* Primary = ink (black) with red hover */
.btn-primary,
.btn.btn-primary {
  background: var(--ds-ink) !important;
  border-color: var(--ds-ink) !important;
  color: var(--ds-cream) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active) {
  background: var(--ds-red) !important;
  border-color: var(--ds-red) !important;
  color: #fff !important;
}

/* Secondary / light = surface */
.btn-secondary,
.btn-light,
.btn.btn-light {
  background: var(--ds-surface-2) !important;
  border-color: var(--ds-line-soft) !important;
  color: var(--ds-ink) !important;
}
.btn-secondary:hover,
.btn.btn-light:hover:not(.btn-active),
.btn.btn-light:focus:not(.btn-active),
.btn.btn-light:active:not(.btn-active) {
  background: var(--ds-red) !important;
  border-color: var(--ds-red) !important;
  color: #fff !important;
}

/* Outline */
.btn-outline-primary,
.btn-outline-dark,
.btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--ds-ink) !important;
  color: var(--ds-ink) !important;
}
.btn-outline-primary:hover,
.btn-outline-dark:hover,
.btn-outline:hover {
  background: var(--ds-ink) !important;
  color: var(--ds-cream) !important;
}

/* Status buttons */
.btn-success { background: var(--ds-ink) !important; border-color: var(--ds-ink) !important; color: var(--ds-cream) !important; }
.btn-success:hover { background: var(--ds-red) !important; border-color: var(--ds-red) !important; color: #fff !important; }
.btn-danger { background: var(--ds-red) !important; border-color: var(--ds-red) !important; color: #fff !important; }
.btn-danger:hover { background: var(--ds-cardinal) !important; border-color: var(--ds-cardinal) !important; }
.btn-warning { background: var(--ds-mustard) !important; border-color: var(--ds-mustard) !important; color: var(--ds-ink) !important; }
.btn-info { background: var(--ds-cardinal) !important; border-color: var(--ds-cardinal) !important; color: #fff !important; }
.btn-dark { background: var(--ds-ink) !important; border-color: var(--ds-ink) !important; color: var(--ds-cream) !important; }

/* Light-tint buttons (Keenthemes) */
.btn-light-primary,
.btn-light-success,
.btn-light-info,
.btn-light-warning,
.btn-light-danger {
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-line-soft) !important;
  color: var(--ds-ink) !important;
}
.btn-light-primary:hover,
.btn-light-success:hover,
.btn-light-info:hover,
.btn-light-warning:hover,
.btn-light-danger:hover {
  background: var(--ds-ink) !important;
  color: var(--ds-cream) !important;
}

/* Active-* variants (Keenthemes hover-color states).
   NOTE: do NOT force `background: transparent` here — that made solid
   buttons (e.g. a btn-primary that also carries btn-active-light-primary)
   lose their fill on hover and appear to vanish. Set color only; icon-only
   buttons have no base background so red-on-hover reads correctly. */
.btn-active-color-primary:hover,
.btn-active-primary.active,
.btn-active-primary:hover {
  color: var(--ds-red) !important;
}
.btn-active-light-primary:hover {
  background: var(--ds-surface-3) !important;
  color: var(--ds-ink) !important;
}

/* Icon-only buttons */
.btn-icon { border-radius: var(--ds-radius-2) !important; }
.btn-circle { border-radius: 50% !important; }

/* ─────────────────────────────────────────────────────────────
   CARDS
   ───────────────────────────────────────────────────────────── */
.card {
  background: var(--ds-cream) !important;
  border: 1px solid var(--ds-line-soft) !important;
  border-radius: var(--ds-radius-3) !important;
  box-shadow: none !important;
}
.card-flush,
.card.card-flush { box-shadow: none !important; }
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--ds-line-soft) !important;
}
.card-body { background: transparent !important; }
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--ds-line-soft) !important;
}
.card-title {
  font-family: var(--ds-font-display);
  font-weight: 400;
  letter-spacing: var(--ds-tr-tight);
}

/* ─────────────────────────────────────────────────────────────
   FORMS
   ───────────────────────────────────────────────────────────── */
.form-label {
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
  margin-bottom: 8px;
}
.form-text { color: var(--ds-ink-faint); }

.form-control,
.form-select,
.form-control.form-control-solid,
.form-select.form-select-solid {
  background: var(--ds-cream) !important;
  border: 1.5px solid var(--ds-line-soft) !important;
  border-radius: var(--ds-radius-2) !important;
  color: var(--ds-ink) !important;
  font-family: var(--ds-font-body);
  font-size: 15px;
  padding: 10px 14px;
  transition: border-color var(--ds-dur-fast);
  box-shadow: none !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ds-ink) !important;
  background: var(--ds-cream) !important;
  color: var(--ds-ink) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-red) 18%, transparent) !important;
}
.form-control::placeholder,
.form-select::placeholder {
  color: var(--ds-ink-mute) !important;
  font-style: italic;
  opacity: 0.7;
}
.form-control:disabled, .form-control[readonly] {
  background: var(--ds-surface-2) !important;
  color: var(--ds-ink-mute) !important;
}

/* Bootstrap floating labels / textareas */
textarea.form-control { min-height: 120px; line-height: 1.55; }

/* Checkboxes & radios */
.form-check-input {
  background-color: var(--ds-cream) !important;
  border: 1.5px solid var(--ds-ink) !important;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--ds-ink) !important;
  border-color: var(--ds-ink) !important;
}
.form-check-input:focus {
  border-color: var(--ds-ink) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-red) 20%, transparent) !important;
}
.form-check-label { color: var(--ds-ink); }

/* Switches */
.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23EFEFE5'/%3e%3c/svg%3e");
}

/* Select2 (since it's used here) */
.select2-container--bootstrap5 .select2-selection,
.select2-selection {
  background: var(--ds-cream) !important;
  border: 1.5px solid var(--ds-line-soft) !important;
  border-radius: var(--ds-radius-2) !important;
  color: var(--ds-ink) !important;
}
.select2-container--bootstrap5.select2-container--focus .select2-selection,
.select2-container--bootstrap5.select2-container--open .select2-selection {
  border-color: var(--ds-ink) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-red) 18%, transparent) !important;
}

/* ─────────────────────────────────────────────────────────────
   BADGES & CHIPS
   ───────────────────────────────────────────────────────────── */
.badge {
  font-family: var(--ds-font-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: var(--ds-radius-pill);
}
.badge.badge-primary, .badge.bg-primary { background: var(--ds-ink) !important; color: var(--ds-cream) !important; }
.badge.badge-success, .badge.bg-success { background: var(--ds-ink) !important; color: var(--ds-cream) !important; }
.badge.badge-danger, .badge.bg-danger   { background: var(--ds-red) !important; color: #fff !important; }
.badge.badge-warning, .badge.bg-warning { background: var(--ds-mustard) !important; color: var(--ds-ink) !important; }
.badge.badge-info, .badge.bg-info       { background: var(--ds-cardinal) !important; color: var(--ds-cream) !important; }
.badge.badge-light, .badge.bg-light,
.badge.badge-light-primary,
.badge.badge-light-success,
.badge.badge-light-info,
.badge.badge-light-warning,
.badge.badge-light-danger {
  background: var(--ds-surface-2) !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line-soft);
}

/* ─────────────────────────────────────────────────────────────
   MODALS
   ───────────────────────────────────────────────────────────── */
.modal-content {
  background: var(--ds-cream) !important;
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-3) !important;
  box-shadow: var(--ds-shadow-2);
}
.modal-header { border-bottom: 1px solid var(--ds-line-soft) !important; }
.modal-footer { border-top: 1px solid var(--ds-line-soft) !important; }
.modal-title {
  font-family: var(--ds-font-display);
  font-weight: 400;
  letter-spacing: var(--ds-tr-tight);
}
.modal-backdrop.show { opacity: 0.5; background: var(--ds-ink); }

/* SweetAlert (project uses sweetalert2) */
.swal2-popup {
  background: var(--ds-cream) !important;
  border-radius: var(--ds-radius-3) !important;
  color: var(--ds-ink) !important;
  font-family: var(--ds-font-body) !important;
}
.swal2-title {
  font-family: var(--ds-font-display) !important;
  font-weight: 400 !important;
  color: var(--ds-ink) !important;
}
.swal2-html-container { color: var(--ds-ink-mute) !important; }
.swal2-confirm.swal2-styled {
  background: var(--ds-ink) !important;
  border-radius: var(--ds-radius-2) !important;
  font-family: var(--ds-font-body) !important;
  font-weight: 600 !important;
  color: var(--ds-cream) !important;
}
.swal2-cancel.swal2-styled {
  background: var(--ds-surface-2) !important;
  color: var(--ds-ink) !important;
  border-radius: var(--ds-radius-2) !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────
   DROPDOWNS
   ───────────────────────────────────────────────────────────── */
.dropdown-menu, .menu-sub-dropdown {
  background: var(--ds-cream) !important;
  border: 1px solid var(--ds-line-soft) !important;
  border-radius: var(--ds-radius-2) !important;
  box-shadow: var(--ds-shadow-2) !important;
}
.dropdown-item:hover,
.dropdown-item:focus,
.menu-sub-dropdown .menu-link:hover {
  background: var(--ds-surface-2) !important;
  color: var(--ds-red) !important;
}

.menu-sub-dropdown .menu-link.text-danger {
  color: var(--ds-red) !important;
}

/* ─────────────────────────────────────────────────────────────
   TABLES
   ───────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ds-ink);
  --bs-table-striped-bg: rgba(0,0,0,0.025);
  color: var(--ds-ink);
}
.table thead th, .table th {
  font-family: var(--ds-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-ink-mute) !important;
  border-bottom: 2px solid var(--ds-ink) !important;
  border-top: 0 !important;
  padding: 14px 12px;
}
.table tbody tr {
  border-bottom: 1px solid var(--ds-line-soft);
}
.table tbody td { color: var(--ds-ink); padding: 14px 12px; }
.table-row-bordered > :not(caption) > * > * { border-color: var(--ds-line-soft) !important; }

/* ─────────────────────────────────────────────────────────────
   ALERTS / TOASTS
   ───────────────────────────────────────────────────────────── */
.alert {
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-line-soft) !important;
  border-left: 3px solid var(--ds-red) !important;
  border-radius: var(--ds-radius-2) !important;
  color: var(--ds-ink) !important;
}
.alert-primary, .alert-success { border-left-color: var(--ds-ink) !important; }
.alert-danger { border-left-color: var(--ds-red) !important; }
.alert-warning { border-left-color: var(--ds-mustard) !important; }
.alert-info { border-left-color: var(--ds-cardinal) !important; }

/* Toastr */
#toast-container > div {
  background: var(--ds-ink) !important;
  color: var(--ds-cream) !important;
  border-radius: var(--ds-radius-2) !important;
  font-family: var(--ds-font-body) !important;
  box-shadow: var(--ds-shadow-2) !important;
  opacity: 1 !important;
}
#toast-container > .toast-success { background: var(--ds-ink) !important; }
#toast-container > .toast-info { background: var(--ds-cardinal) !important; }
#toast-container > .toast-warning { background: var(--ds-mustard) !important; color: var(--ds-ink) !important; }
#toast-container > .toast-error { background: var(--ds-red) !important; }

/* ─────────────────────────────────────────────────────────────
   SYMBOL / AVATAR
   ───────────────────────────────────────────────────────────── */
.symbol-label {
  background: var(--ds-surface-2) !important;
  color: var(--ds-ink) !important;
  border-radius: var(--ds-radius-2);
}
.symbol.symbol-circle .symbol-label { border-radius: 50%; }

/* ─────────────────────────────────────────────────────────────
   QUILL / TINYMCE / CKEDITOR
   ───────────────────────────────────────────────────────────── */
.ql-toolbar, .tox-toolbar, .ck-toolbar {
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-line-soft) !important;
  border-radius: var(--ds-radius-2) var(--ds-radius-2) 0 0 !important;
}
.ql-container, .tox-edit-area, .ck-editor__main > .ck-editor__editable {
  background: var(--ds-cream) !important;
  border: 1px solid var(--ds-line-soft) !important;
  border-radius: 0 0 var(--ds-radius-2) var(--ds-radius-2) !important;
  font-family: var(--ds-font-body) !important;
  color: var(--ds-ink) !important;
  min-height: 200px;
}

/* ─────────────────────────────────────────────────────────────
   DATATABLES
   ───────────────────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--ds-radius-2) !important;
  background: transparent !important;
  border: 1px solid var(--ds-line-soft) !important;
  color: var(--ds-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ds-ink) !important;
  color: var(--ds-cream) !important;
  border-color: var(--ds-ink) !important;
}
.dataTables_length select, .dataTables_filter input {
  background: var(--ds-cream) !important;
  border: 1.5px solid var(--ds-line-soft) !important;
  border-radius: var(--ds-radius-2) !important;
}

/* ─────────────────────────────────────────────────────────────
   RIFF-SPECIFIC UTILITY CLASSES (.rf-*)
   For use in new/updated Blade views.
   ───────────────────────────────────────────────────────────── */
.rf-mega {
  font-family: var(--ds-font-display);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: var(--ds-tr-display);
  font-weight: 400;
  text-wrap: balance;
  color: var(--ds-ink);
}
.rf-display {
  font-family: var(--ds-font-display);
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  font-weight: 400;
  text-wrap: balance;
  color: var(--ds-ink);
}
.rf-h1 {
  font-family: var(--ds-font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: var(--ds-tr-tight);
  font-weight: 400;
  color: var(--ds-ink);
}
.rf-h2 {
  font-family: var(--ds-font-body);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  letter-spacing: var(--ds-tr-tight);
  color: var(--ds-ink);
}
.rf-italic, .rf-italic em { font-style: italic; }
.rf-red { color: var(--ds-red) !important; }
.rf-ink { color: var(--ds-ink) !important; }
.rf-mute { color: var(--ds-ink-mute) !important; }

.rf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ds-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
  margin-bottom: 20px;
}
.rf-kicker::before {
  content: "";
  width: 36px;
  height: 1.5px;
  background: var(--ds-red);
  flex-shrink: 0;
}

.rf-lede {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ds-ink);
  max-width: 48ch;
}

.rf-caption {
  font-family: var(--ds-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
}

.rf-dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  background: var(--ds-red);
  border-radius: 50%;
  vertical-align: -0.05em;
  margin-left: 0.05em;
}

.rf-mono { font-family: var(--ds-font-mono); font-size: 13px; }

/* Hover-lift card pattern */
.rf-card {
  background: var(--ds-cream);
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-3);
  padding: 24px;
  transition: transform var(--ds-dur), background var(--ds-dur), color var(--ds-dur), border-color var(--ds-dur);
}
.rf-card.rf-card-hoverable:hover {
  transform: translateY(-3px);
  background: var(--ds-ink);
  color: var(--ds-cream);
  border-color: var(--ds-ink);
}
.rf-card.rf-card-hoverable:hover .rf-mute { color: var(--ds-cream) !important; opacity: 0.65; }
.rf-card.rf-card-hoverable:hover .rf-red { color: var(--ds-red) !important; }

/* Stat strip */
.rf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--ds-line-soft);
  border-bottom: 1px solid var(--ds-line-soft);
}
.rf-stat { padding: 24px 20px; border-right: 1px solid var(--ds-line-soft); }
.rf-stat:last-child { border-right: 0; }
.rf-stat .n {
  font-family: var(--ds-font-display);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ds-red);
}
.rf-stat .l {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
}

/* ─────────────────────────────────────────────────────────────
   RAIL — sticky top brand row (used in header)
   ───────────────────────────────────────────────────────────── */
.rf-rail-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ds-font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ds-ink) !important;
  text-decoration: none;
}
.rf-rail-logo:hover { color: var(--ds-ink) !important; }
.rf-rail-logo .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ds-red);
  display: inline-block;
  transform: translateY(-1px);
}
.rf-rail-logo small {
  font-family: var(--ds-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--ds-line-soft);
}

.rf-rail-nav-login {
  padding: 8px 18px;
  border: 1.5px solid var(--ds-ink);
  border-radius: var(--ds-radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ds-ink) !important;
  text-transform: uppercase;
  transition: background var(--ds-dur-fast), color var(--ds-dur-fast);
  display: inline-block;
}
.rf-rail-nav-login:hover {
  background: var(--ds-ink);
  color: var(--ds-cream) !important;
}

/* ─────────────────────────────────────────────────────────────
   AUTH PAGES — d.school 50/50 split
   ───────────────────────────────────────────────────────────── */
.rf-auth-aside {
  background: var(--ds-ink) !important;
  color: var(--ds-cream) !important;
  background-image: none !important;
  position: relative;
  overflow: hidden;
}
.rf-auth-aside::before {
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 28px solid rgba(239,239,229,0.10);
  pointer-events: none;
}
.rf-auth-aside-headline {
  font-family: var(--ds-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--ds-cream);
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.rf-auth-aside-headline em { font-style: italic; color: var(--ds-red); }
.rf-auth-aside-lede {
  font-family: var(--ds-font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ds-cream);
  opacity: 0.85;
  max-width: 36ch;
}

/* ─────────────────────────────────────────────────────────────
   SCROLLTOP
   ───────────────────────────────────────────────────────────── */
.scrolltop {
  background: var(--ds-ink) !important;
  color: var(--ds-cream) !important;
  border-radius: var(--ds-radius-2) !important;
}
.scrolltop:hover {
  background: var(--ds-red) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────
   TABS — nav-line-tabs (bot show page) → red active state
   ───────────────────────────────────────────────────────────── */
.nav-line-tabs {
  border-bottom: 1px solid var(--ds-line-soft) !important;
}
.nav-line-tabs .nav-link {
  color: var(--ds-ink-mute) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  font-weight: 600;
}
.nav-line-tabs .nav-link:hover {
  color: var(--ds-ink) !important;
  border-bottom-color: var(--ds-line) !important;
}
.nav-line-tabs .nav-link.active,
.nav-line-tabs .nav-item.show .nav-link {
  color: var(--ds-red) !important;
  border-bottom-color: var(--ds-red) !important;
  background: transparent !important;
}
/* Plain Bootstrap nav-tabs / nav-pills fallback */
.nav-tabs .nav-link.active { color: var(--ds-red) !important; }
.nav-pills .nav-link.active { background: var(--ds-ink) !important; color: var(--ds-cream) !important; }

/* ─────────────────────────────────────────────────────────────
   MODAL PLAN/OPTION SELECTOR (Share modal) → red active, not grey
   ───────────────────────────────────────────────────────────── */
.btn.btn-outline-dashed {
  border: 1.5px dashed var(--ds-line-soft) !important;
  background: var(--ds-cream) !important;
  color: var(--ds-ink) !important;
}
.btn.btn-outline-dashed:hover {
  border-color: var(--ds-ink) !important;
  transform: none;
}
/* The selected option card */
.btn.btn-outline-dashed.active,
label.nav-link.btn.active,
.btn-active-secondary.active {
  border: 2px solid var(--ds-red) !important;
  background: color-mix(in srgb, var(--ds-red) 6%, var(--ds-cream)) !important;
  color: var(--ds-ink) !important;
}

/* Bootstrap utility border colours used in notices */
.border-primary { border-color: rgba(0,0,0,0.28) !important; }
.border-dashed { border-style: dashed !important; }
.notice {
  background: var(--ds-surface-2) !important;
  border-radius: var(--ds-radius-2) !important;
}

/* ─────────────────────────────────────────────────────────────
   CODE / PRE blocks (embed snippets in Share modal)
   ───────────────────────────────────────────────────────────── */
pre,
pre.text-muted {
  font-family: var(--ds-font-mono) !important;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ds-ink) !important;
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-2);
  padding: 14px 16px;
}

/* ─────────────────────────────────────────────────────────────
   HELP / INTRO TEXT — replaces misuse of .form-label on long copy.
   Readable margin-note, NOT an uppercase label.
   ───────────────────────────────────────────────────────────── */
.rf-help {
  display: block;
  font-family: var(--ds-font-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-ink-mute);
  background: color-mix(in srgb, var(--ds-red) 5%, transparent);
  border-left: 3px solid var(--ds-red);
  border-radius: 0 var(--ds-radius-2) var(--ds-radius-2) 0;
  padding: 12px 16px;
  max-width: 90ch;
}
.rf-help strong { color: var(--ds-ink); font-weight: 700; }
.rf-help a { color: var(--ds-red); text-decoration: underline; text-underline-offset: 2px; }

/* Definition-list style for read-only detail rows (General Info tab) */
.rf-field-label {
  font-family: var(--ds-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-ink-faint);
}
.rf-field-value {
  font-family: var(--ds-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ds-ink);
}

/* ───────────────────────────────────────────────────────────────
   KEENICONS — kill the baked-in purple.
   plugins.bundle.css sets `.ki-duotone/.ki-outline/.ki-solid { color:#6C5C98 }`
   (the Metronic demo's purple primary) directly on every icon, so they
   ignore surrounding text colour. Force them to inherit instead — they
   then read as ink in body text, red in the active tab, cream on dark
   buttons, etc., with the duotone opacity layering preserved.
   ─────────────────────────────────────────────────────────────── */
.ki-duotone, .ki-outline, .ki-solid { color: inherit !important; }

/* Keep status-coloured icons meaningful when explicitly tagged */
.ki-duotone.text-primary, .ki-outline.text-primary, .ki-solid.text-primary,
.ki-duotone.text-danger,  .ki-outline.text-danger,  .ki-solid.text-danger { color: var(--ds-red) !important; }
.ki-duotone.text-success, .ki-outline.text-success, .ki-solid.text-success { color: var(--ds-ink) !important; }
.ki-duotone.text-warning, .ki-outline.text-warning, .ki-solid.text-warning { color: var(--ds-mustard) !important; }

/* Subtle info "i" icons next to field labels */
.ki-duotone.ki-information,
i[class*="ki-information"] { color: var(--ds-ink-faint) !important; }

/* ─────────────────────────────────────────────────────────────
   TAILWIND COMPATIBILITY SHIMS
   Jetstream ships a few Blade components carrying Tailwind utility
   classes that don't exist in this Bootstrap app (profile + teams
   forms, flash banner). Map the visible ones so leftover markup
   degrades gracefully instead of rendering unstyled.
   ───────────────────────────────────────────────────────────── */
.font-semibold { font-weight: 600 !important; }
.font-medium   { font-weight: 500 !important; }
.font-bold     { font-weight: 700 !important; }
.text-sm   { font-size: 14px; }
.text-xl   { font-size: 20px; }
.text-2xl  { font-size: 24px; }
.leading-tight   { line-height: 1.2; }
.leading-relaxed { line-height: 1.625; }
.underline { text-decoration: underline; text-underline-offset: 2px; }
.text-green-600, .text-green-500 { color: var(--ds-olive) !important; }
.text-red-600, .text-red-500     { color: var(--ds-red) !important; }
.text-indigo-700, .text-indigo-600, .text-indigo-500 { color: var(--ds-ink) !important; }
.border-t { border-top: 1px solid var(--ds-line-soft); }
.border-b { border-bottom: 1px solid var(--ds-line-soft); }
.border-gray-200, .border-gray-300 { border-color: var(--ds-line-soft) !important; }
.rounded-md { border-radius: var(--ds-radius-2); }
.rounded-lg { border-radius: var(--ds-radius-3); }

/* ─────────────────────────────────────────────────────────────
   HIDE NOISY KEENTHEMES BITS WE DON'T USE
   ───────────────────────────────────────────────────────────── */
/* Dark-mode toggle: Riff is light-only now */
[data-kt-element="mode"] { display: none !important; }
.menu-item[data-kt-menu-trigger="hover"]:has([data-kt-element="mode"]) { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   PRINT
   ───────────────────────────────────────────────────────────── */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
}

/* Share modal — embed option icons follow active/hover state */
.nav-link.btn.active svg,
.nav-link.btn:hover svg {
  color: var(--ds-red) !important;
}

/* ─────────────────────────────────────────────────────────────
   LUCIDE ICONS
   ───────────────────────────────────────────────────────────── */
[data-lucide], svg.lucide {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
  flex-shrink: 0;
}

.btn svg.lucide {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  margin-right: 0.35em;
}

.btn:not(.btn-icon) {
  font-size: calc(1em + 1pt) !important;
}

.btn.btn-icon svg.lucide {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}