/* ==========================================================
   BOOTSTRAP 5.3+ — PASTEL THEME · ADDITIONS
   Drop this file in AFTER your main pastel theme CSS.
   Self-contained: your color vars below drive every component
   here, so it does not matter what the base theme compiled.

   IMPORTANT — load order must be:  bootstrap  →  your theme  →  THIS file
   If bootstrap core loads last, its :root wins and your colors revert.
   ========================================================== */

/* ---------- Color tokens (single source of truth) ---------- */
:root,
[data-bs-theme="light"] {

  /* HEX — used by color-mix() and direct references */
  --bs-primary:   #01A8D6;
  --bs-secondary: #BFC5CC;
  --bs-rose:      #F4B8D0;
  --bs-peach:     #FFC79A;
  --bs-indigo:    #A9B4F0;
  --bs-new:       #DCBFEE;
  --bs-success:   #7EDC9A;
  --bs-info:      #8ED6DA;
  --bs-warning:   #FFE08A;
  --bs-danger:    #FF9A9A;
  --bs-light:     #EEF0F3;
  --bs-dark:      #616A77;
  --bs-cta:       #F37864;

  /* RGB TRIPLETS — required by .bg-*, .border-*, .text-bg-*,
     stock .text-*/.link-*, tables and list-groups. These MUST
     match the hex values above or utilities keep rendering blue. */
  --bs-primary-rgb:   1,   168, 214;
  --bs-secondary-rgb: 191, 197, 204;
  --bs-rose-rgb:      244, 184, 208;
  --bs-peach-rgb:     255, 199, 154;
  --bs-indigo-rgb:    169, 180, 240;
  --bs-new-rgb:       220, 191, 238;
  --bs-success-rgb:   126, 220, 154;
  --bs-info-rgb:      142, 214, 218;
  --bs-warning-rgb:   255, 224, 138;
  --bs-danger-rgb:    255, 154, 154;
  --bs-light-rgb:     238, 240, 243;
  --bs-dark-rgb:      97, 106, 119;
  --bs-cta-rgb:       243,120,100;

  /* Text-emphasis vars (used by .text-*-emphasis, some components) */
  --bs-primary-text-emphasis:   color-mix(in srgb, var(--bs-primary)   40%, black);
  --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 40%, black);
  --bs-rose-text-emphasis:      color-mix(in srgb, var(--bs-rose)      40%, black);
  --bs-peach-text-emphasis:     color-mix(in srgb, var(--bs-peach)     40%, black);
  --bs-indigo-text-emphasis:    color-mix(in srgb, var(--bs-indigo)    40%, black);
  --bs-success-text-emphasis:   color-mix(in srgb, var(--bs-success)   40%, black);
  --bs-info-text-emphasis:      color-mix(in srgb, var(--bs-info)      40%, black);
  --bs-warning-text-emphasis:   color-mix(in srgb, var(--bs-warning)   35%, black);
  --bs-danger-text-emphasis:    color-mix(in srgb, var(--bs-danger)    40%, black);

  /* ---------- Control knobs + bug fixes ---------- */

  /* Previously referenced but never defined (btn-light / btn-new) */
  --pastel-text-light: 5%;   /* dark text on the very pale light color  */
  --pastel-text-new:   5%;   /* dark text on the pale new (purple) color */

  /* Resting text darkness for outline buttons, .text-* and .link-* */
  --pastel-readable:   50%;  /* color% vs black -> lower = darker/more contrast */
  --pastel-link-hover: 35%;  /* link hover, a touch darker                      */

  /* WAS MISSING — used by every outline button active state below.
     Higher % = more color / less black = lighter active fill. */
  --pastel-active-darken: 70%;

  /* Background-fill softening. This is the % of WHITE mixed into the
     colored .bg-* (and soft .text-bg-*) fills. Higher = paler / less
     dominant. Text and link colors are NOT affected. Tune to taste. */
  --pastel-bg-tint: 45%;
}

/* ==========================================================
   FILLED BUTTONS  (.btn-*)  — remapped onto your color vars
   so they follow the tokens above instead of compiled hex.
   Pale variants (warning / light / new / rose / peach / indigo) keep dark text.
   ========================================================== */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 78%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-disabled-color: #fff;
}
.btn-secondary {
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 78%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: #fff;
}
.btn-rose {
  --bs-btn-bg: var(--bs-rose);
  --bs-btn-border-color: var(--bs-rose);
  --bs-btn-color: color-mix(in srgb, var(--bs-rose) 12%, black);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-rose) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-rose) 84%, black);
  --bs-btn-hover-color: color-mix(in srgb, var(--bs-rose) 12%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-rose) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-rose) 80%, black);
  --bs-btn-active-color: color-mix(in srgb, var(--bs-rose) 12%, black);
  --bs-btn-disabled-bg: var(--bs-rose);
  --bs-btn-disabled-border-color: var(--bs-rose);
  --bs-btn-disabled-color: color-mix(in srgb, var(--bs-rose) 12%, black);
}
.btn-peach {
  --bs-btn-bg: var(--bs-peach);
  --bs-btn-border-color: var(--bs-peach);
  --bs-btn-color: color-mix(in srgb, var(--bs-peach) 12%, black);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-peach) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-peach) 84%, black);
  --bs-btn-hover-color: color-mix(in srgb, var(--bs-peach) 12%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-peach) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-peach) 80%, black);
  --bs-btn-active-color: color-mix(in srgb, var(--bs-peach) 12%, black);
  --bs-btn-disabled-bg: var(--bs-peach);
  --bs-btn-disabled-border-color: var(--bs-peach);
  --bs-btn-disabled-color: color-mix(in srgb, var(--bs-peach) 12%, black);
}
.btn-indigo {
  --bs-btn-bg: var(--bs-indigo);
  --bs-btn-border-color: var(--bs-indigo);
  --bs-btn-color: color-mix(in srgb, var(--bs-indigo) 12%, black);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-indigo) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-indigo) 84%, black);
  --bs-btn-hover-color: color-mix(in srgb, var(--bs-indigo) 12%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-indigo) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-indigo) 80%, black);
  --bs-btn-active-color: color-mix(in srgb, var(--bs-indigo) 12%, black);
  --bs-btn-disabled-bg: var(--bs-indigo);
  --bs-btn-disabled-border-color: var(--bs-indigo);
  --bs-btn-disabled-color: color-mix(in srgb, var(--bs-indigo) 12%, black);
}
.btn-success {
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 80%, black);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 78%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
  --bs-btn-disabled-color: #fff;
}
.btn-info {
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 80%, black);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 78%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
  --bs-btn-disabled-color: #fff;
}
.btn-warning {
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-color: #000;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 84%, black);
  --bs-btn-hover-color: #000;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 80%, black);
  --bs-btn-active-color: #000;
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
  --bs-btn-disabled-color: #000;
}
.btn-danger {
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 80%, black);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 78%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-disabled-color: #fff;
}
.btn-light {
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-color: #222;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-light) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-light) 85%, black);
  --bs-btn-hover-color: #222;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-light) 82%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-light) 82%, black);
  --bs-btn-active-color: #222;
  --bs-btn-disabled-bg: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
  --bs-btn-disabled-color: #222;
}
.btn-dark {
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-dark) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-dark) 80%, black);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-dark) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-dark) 78%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--bs-dark);
  --bs-btn-disabled-border-color: var(--bs-dark);
  --bs-btn-disabled-color: #fff;
}
.btn-new {
  --bs-btn-bg: var(--bs-new);
  --bs-btn-border-color: var(--bs-new);
  --bs-btn-color: color-mix(in srgb, var(--bs-new) 12%, black);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-new) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-new) 84%, black);
  --bs-btn-hover-color: color-mix(in srgb, var(--bs-new) 12%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-new) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-new) 80%, black);
  --bs-btn-active-color: color-mix(in srgb, var(--bs-new) 12%, black);
  --bs-btn-disabled-bg: var(--bs-new);
  --bs-btn-disabled-border-color: var(--bs-new);
  --bs-btn-disabled-color: color-mix(in srgb, var(--bs-new) 12%, black);
}
.btn-cta {
  --bs-btn-bg: var(--bs-cta);
  --bs-btn-border-color: var(--bs-cta);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-cta) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-cta) 80%, black);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-cta) 65%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-cta) 65%, black);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--bs-cta);
  --bs-btn-disabled-border-color: var(--bs-cta);
  --bs-btn-disabled-color: #fff;
}

/* ==========================================================
   BARE BUTTONS — no border when no variant is set
   Applies only to `.btn` with no `btn-*` modifier class
   (e.g. <button class="btn">). Variant buttons keep their border.
   Uses transparent border to avoid any layout/size shift.
   ========================================================== */
.btn:not([class*="btn-"]) {
  border-color: transparent;
}

/* ==========================================================
   OUTLINE BUTTONS  (.btn-outline-*)  — all 10 colors
   Resting: transparent bg, pastel border, darkened readable text.
   Hover/active: filled pastel with a contrasting text color.
   ========================================================== */
.btn-outline-primary {
  --bs-btn-color: color-mix(in srgb, var(--bs-primary) var(--pastel-readable), black);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) var(--pastel-active-darken), white);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) var(--pastel-active-darken), white);
  --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: color-mix(in srgb, var(--bs-secondary) var(--pastel-readable), black);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) var(--pastel-active-darken), white);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) var(--pastel-active-darken), white);
  --bs-btn-active-color: #fff;
}
.btn-outline-rose {
  --bs-btn-color: color-mix(in srgb, var(--bs-rose) var(--pastel-readable), black);
  --bs-btn-border-color: var(--bs-rose);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-rose);
  --bs-btn-hover-border-color: var(--bs-rose);
  --bs-btn-hover-color: color-mix(in srgb, var(--bs-rose) 12%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-rose) var(--pastel-active-darken), black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-rose) var(--pastel-active-darken), black);
  --bs-btn-active-color: color-mix(in srgb, var(--bs-rose) 12%, black);
}
.btn-outline-peach {
  --bs-btn-color: color-mix(in srgb, var(--bs-peach) var(--pastel-readable), black);
  --bs-btn-border-color: var(--bs-peach);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-peach);
  --bs-btn-hover-border-color: var(--bs-peach);
  --bs-btn-hover-color: color-mix(in srgb, var(--bs-peach) 12%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-peach) var(--pastel-active-darken), black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-peach) var(--pastel-active-darken), black);
  --bs-btn-active-color: color-mix(in srgb, var(--bs-peach) 12%, black);
}
.btn-outline-indigo {
  --bs-btn-color: color-mix(in srgb, var(--bs-indigo) var(--pastel-readable), black);
  --bs-btn-border-color: var(--bs-indigo);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-indigo);
  --bs-btn-hover-border-color: var(--bs-indigo);
  --bs-btn-hover-color: color-mix(in srgb, var(--bs-indigo) 12%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-indigo) var(--pastel-active-darken), black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-indigo) var(--pastel-active-darken), black);
  --bs-btn-active-color: color-mix(in srgb, var(--bs-indigo) 12%, black);
}
.btn-outline-success {
  --bs-btn-color: color-mix(in srgb, var(--bs-success) var(--pastel-readable), black);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) var(--pastel-active-darken), black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) var(--pastel-active-darken), black);
  --bs-btn-active-color: #fff;
}
.btn-outline-info {
  --bs-btn-color: color-mix(in srgb, var(--bs-info) var(--pastel-readable), black);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) var(--pastel-active-darken), black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) var(--pastel-active-darken), black);
  --bs-btn-active-color: #fff;
}
.btn-outline-warning {
  --bs-btn-color: color-mix(in srgb, var(--bs-warning) 45%, black);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-hover-color: #000;          /* black stays readable on yellow */
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) var(--pastel-active-darken), black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) var(--pastel-active-darken), black);
  --bs-btn-active-color: #000;
}
.btn-outline-danger {
  --bs-btn-color: color-mix(in srgb, var(--bs-danger) var(--pastel-readable), black);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) var(--pastel-active-darken), black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) var(--pastel-active-darken), black);
  --bs-btn-active-color: #fff;
}
.btn-outline-dark {
  --bs-btn-color: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-dark) var(--pastel-active-darken), white);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-dark) var(--pastel-active-darken), white);
  --bs-btn-active-color: #fff;
}
.btn-outline-light {
  --bs-btn-color: color-mix(in srgb, var(--bs-light) 15%, black);  /* readable dark text */
  --bs-btn-border-color: color-mix(in srgb, var(--bs-light) 80%, black);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-hover-color: #222;          /* dark text on pale fill */
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-light) var(--pastel-active-darken), black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-light) var(--pastel-active-darken), black);
  --bs-btn-active-color: #222;
}
.btn-outline-new {
  --bs-btn-color: color-mix(in srgb, var(--bs-new) var(--pastel-readable), black);
  --bs-btn-border-color: var(--bs-new);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-new);
  --bs-btn-hover-border-color: var(--bs-new);
  --bs-btn-hover-color: color-mix(in srgb, var(--bs-new) 12%, black); /* dark on pale purple */
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-new) var(--pastel-active-darken), black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-new) var(--pastel-active-darken), black);
  --bs-btn-active-color: color-mix(in srgb, var(--bs-new) 12%, black);
}
.btn-outline-cta {
  --bs-btn-color: var(--bs-cta);
  --bs-btn-border-color: var(--bs-cta);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--bs-cta);
  --bs-btn-hover-border-color: var(--bs-cta);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-cta) 65%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-cta) 65%, black);
  --bs-btn-active-color: #fff;
}

/* Smooth transitions for the new outline buttons (matches filled set) */
[class^="btn-outline-"],
[class*=" btn-outline-"] {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ==========================================================
   BUG FIX — readable hover text on the pale filled buttons
   (your universal hover forced #fff on these very light colors)
   ========================================================== */
.btn-light:hover { color: #222 !important; }
.btn-new:hover   { color: color-mix(in srgb, var(--bs-new) 12%, black) !important; }
.btn-rose:hover   { color: color-mix(in srgb, var(--bs-rose) 12%, black) !important; }
.btn-peach:hover  { color: color-mix(in srgb, var(--bs-peach) 12%, black) !important; }
.btn-indigo:hover { color: color-mix(in srgb, var(--bs-indigo) 12%, black) !important; }

/* ==========================================================
   BACKGROUND / BORDER UTILITIES driven by your colors
   .bg-* fills are softened toward white via --pastel-bg-tint
   so colored panels/sections read less dominant. Borders stay
   full-strength. .bg-dark is left solid (neutral / contrast use).
   ========================================================== */
.bg-primary   { background-color: color-mix(in srgb, var(--bs-primary),   white var(--pastel-bg-tint)) !important; }
.bg-secondary { background-color: color-mix(in srgb, var(--bs-secondary), white var(--pastel-bg-tint)) !important; }
.bg-rose      { background-color: color-mix(in srgb, var(--bs-rose),      white var(--pastel-bg-tint)) !important; }
.bg-peach     { background-color: color-mix(in srgb, var(--bs-peach),     white var(--pastel-bg-tint)) !important; }
.bg-indigo    { background-color: color-mix(in srgb, var(--bs-indigo),    white var(--pastel-bg-tint)) !important; }
.bg-new       { background-color: color-mix(in srgb, var(--bs-new),       white var(--pastel-bg-tint)) !important; }
.bg-success   { background-color: color-mix(in srgb, var(--bs-success),   white var(--pastel-bg-tint)) !important; }
.bg-info      { background-color: color-mix(in srgb, var(--bs-info),      white var(--pastel-bg-tint)) !important; }
.bg-warning   { background-color: color-mix(in srgb, var(--bs-warning),   white var(--pastel-bg-tint)) !important; }
.bg-danger    { background-color: color-mix(in srgb, var(--bs-danger),    white var(--pastel-bg-tint)) !important; }
.bg-light     { background-color: color-mix(in srgb, var(--bs-light),     white var(--pastel-bg-tint)) !important; }
.bg-cta       { background-color: color-mix(in srgb, var(--bs-cta),       white var(--pastel-bg-tint)) !important; }
.bg-dark      { background-color: var(--bs-dark) !important; }  /* left solid on purpose */

.border-new    { border-color: var(--bs-new) !important; }
.border-rose   { border-color: var(--bs-rose) !important; }
.border-peach  { border-color: var(--bs-peach) !important; }
.border-indigo { border-color: var(--bs-indigo) !important; }
.border-cta    { border-color: var(--bs-cta) !important; }

/* Soft text-bg pairs: background paled to match the .bg-* fills,
   dark text kept for readability. .text-bg-cta stays loud (the CTA). */
.text-bg-new    { color: color-mix(in srgb, var(--bs-new) 12%, black) !important;
                  background-color: color-mix(in srgb, var(--bs-new),    white var(--pastel-bg-tint)) !important; }
.text-bg-rose   { color: color-mix(in srgb, var(--bs-rose) 12%, black) !important;
                  background-color: color-mix(in srgb, var(--bs-rose),   white var(--pastel-bg-tint)) !important; }
.text-bg-peach  { color: color-mix(in srgb, var(--bs-peach) 12%, black) !important;
                  background-color: color-mix(in srgb, var(--bs-peach),  white var(--pastel-bg-tint)) !important; }
.text-bg-indigo { color: color-mix(in srgb, var(--bs-indigo) 12%, black) !important;
                  background-color: color-mix(in srgb, var(--bs-indigo), white var(--pastel-bg-tint)) !important; }
.text-bg-cta    { color: #fff !important; background-color: var(--bs-cta) !important; }

/* ==========================================================
   TEXT COLOR UTILITIES  (.text-*)  — darkened for contrast on white
   (.text-cta already exists in your base file)
   ========================================================== */
.text-primary   { color: color-mix(in srgb, var(--bs-primary)   var(--pastel-readable), black) !important; }
.text-secondary { color: color-mix(in srgb, var(--bs-secondary) var(--pastel-readable), black) !important; }
.text-rose      { color: color-mix(in srgb, var(--bs-rose)      var(--pastel-readable), black) !important; }
.text-peach     { color: color-mix(in srgb, var(--bs-peach)     var(--pastel-readable), black) !important; }
.text-indigo    { color: color-mix(in srgb, var(--bs-indigo)    var(--pastel-readable), black) !important; }
.text-success   { color: color-mix(in srgb, var(--bs-success)   var(--pastel-readable), black) !important; }
.text-info      { color: color-mix(in srgb, var(--bs-info)      var(--pastel-readable), black) !important; }
.text-warning   { color: color-mix(in srgb, var(--bs-warning)   40%, black) !important; }
.text-danger    { color: color-mix(in srgb, var(--bs-danger)    var(--pastel-readable), black) !important; }
.text-dark      { color: var(--bs-dark) !important; }
.text-new       { color: color-mix(in srgb, var(--bs-new)       var(--pastel-readable), black) !important; }
/* .text-light intentionally left pale — for use on dark backgrounds */
.text-light     { color: var(--bs-light) !important; }

/* ==========================================================
   LINK COLOR UTILITIES  (.link-*)  — with hover states
   ========================================================== */
.link-primary,
.link-secondary,
.link-rose,
.link-peach,
.link-indigo,
.link-success,
.link-info,
.link-warning,
.link-danger,
.link-dark,
.link-new,
.link-cta { text-decoration-color: inherit; transition: color .2s ease; }

.link-primary   { color: color-mix(in srgb, var(--bs-primary)   var(--pastel-readable), black) !important; }
.link-secondary { color: color-mix(in srgb, var(--bs-secondary) var(--pastel-readable), black) !important; }
.link-rose      { color: color-mix(in srgb, var(--bs-rose)      var(--pastel-readable), black) !important; }
.link-peach     { color: color-mix(in srgb, var(--bs-peach)     var(--pastel-readable), black) !important; }
.link-indigo    { color: color-mix(in srgb, var(--bs-indigo)    var(--pastel-readable), black) !important; }
.link-success   { color: color-mix(in srgb, var(--bs-success)   var(--pastel-readable), black) !important; }
.link-info      { color: color-mix(in srgb, var(--bs-info)      var(--pastel-readable), black) !important; }
.link-warning   { color: color-mix(in srgb, var(--bs-warning)   40%, black) !important; }
.link-danger    { color: color-mix(in srgb, var(--bs-danger)    var(--pastel-readable), black) !important; }
.link-dark      { color: var(--bs-dark) !important; }
.link-new       { color: color-mix(in srgb, var(--bs-new)       var(--pastel-readable), black) !important; }
.link-cta       { color: var(--bs-cta) !important; }

.link-primary:hover   { color: color-mix(in srgb, var(--bs-primary)   var(--pastel-link-hover), black) !important; }
.link-secondary:hover { color: color-mix(in srgb, var(--bs-secondary) var(--pastel-link-hover), black) !important; }
.link-rose:hover      { color: color-mix(in srgb, var(--bs-rose)      var(--pastel-link-hover), black) !important; }
.link-peach:hover     { color: color-mix(in srgb, var(--bs-peach)     var(--pastel-link-hover), black) !important; }
.link-indigo:hover    { color: color-mix(in srgb, var(--bs-indigo)    var(--pastel-link-hover), black) !important; }
.link-success:hover   { color: color-mix(in srgb, var(--bs-success)   var(--pastel-link-hover), black) !important; }
.link-info:hover      { color: color-mix(in srgb, var(--bs-info)      var(--pastel-link-hover), black) !important; }
.link-warning:hover   { color: color-mix(in srgb, var(--bs-warning)   28%, black) !important; }
.link-danger:hover    { color: color-mix(in srgb, var(--bs-danger)    var(--pastel-link-hover), black) !important; }
.link-dark:hover      { color: color-mix(in srgb, var(--bs-dark)      80%, black) !important; }
.link-new:hover       { color: color-mix(in srgb, var(--bs-new)       var(--pastel-link-hover), black) !important; }
.link-cta:hover       { color: color-mix(in srgb, var(--bs-cta)       70%, black) !important; }

/* ==========================================================
   OUTLINE BADGES  (.badge.badge-outline-*)  — all 10 colors
   Use alongside .badge:  <span class="badge badge-outline-primary">…</span>
   ========================================================== */
.badge-outline-primary   { background: transparent !important; border: 1px solid var(--bs-primary);   color: color-mix(in srgb, var(--bs-primary)   var(--pastel-readable), black) !important; }
.badge-outline-secondary { background: transparent !important; border: 1px solid var(--bs-secondary); color: color-mix(in srgb, var(--bs-secondary) var(--pastel-readable), black) !important; }
.badge-outline-rose      { background: transparent !important; border: 1px solid var(--bs-rose);      color: color-mix(in srgb, var(--bs-rose)      var(--pastel-readable), black) !important; }
.badge-outline-peach     { background: transparent !important; border: 1px solid var(--bs-peach);     color: color-mix(in srgb, var(--bs-peach)     var(--pastel-readable), black) !important; }
.badge-outline-indigo    { background: transparent !important; border: 1px solid var(--bs-indigo);    color: color-mix(in srgb, var(--bs-indigo)    var(--pastel-readable), black) !important; }
.badge-outline-success   { background: transparent !important; border: 1px solid var(--bs-success);   color: color-mix(in srgb, var(--bs-success)   var(--pastel-readable), black) !important; }
.badge-outline-info      { background: transparent !important; border: 1px solid var(--bs-info);      color: color-mix(in srgb, var(--bs-info)      var(--pastel-readable), black) !important; }
.badge-outline-warning   { background: transparent !important; border: 1px solid var(--bs-warning);   color: color-mix(in srgb, var(--bs-warning)   40%, black) !important; }
.badge-outline-danger    { background: transparent !important; border: 1px solid var(--bs-danger);    color: color-mix(in srgb, var(--bs-danger)    var(--pastel-readable), black) !important; }
.badge-outline-dark      { background: transparent !important; border: 1px solid var(--bs-dark);      color: var(--bs-dark) !important; }
.badge-outline-light     { background: transparent !important; border: 1px solid color-mix(in srgb, var(--bs-light) 80%, black); color: color-mix(in srgb, var(--bs-light) 15%, black) !important; }
.badge-outline-new       { background: transparent !important; border: 1px solid var(--bs-new);       color: color-mix(in srgb, var(--bs-new)       var(--pastel-readable), black) !important; }
.badge-outline-cta       { background: transparent !important; border: 1px solid var(--bs-cta);       color: var(--bs-cta) !important; }

/* ==========================================================
   ALERTS  (.alert-*)  — remapped onto your color vars
   Bootstrap bakes separate tint + shade per alert; these
   reproduce them with color-mix so they follow your tokens.
   ========================================================== */
.alert-primary {
  --bs-alert-color: color-mix(in srgb, var(--bs-primary) 60%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-primary) 18%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-primary) 32%, white);
}
.alert-secondary {
  --bs-alert-color: color-mix(in srgb, var(--bs-secondary) 60%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-secondary) 22%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-secondary) 36%, white);
}
.alert-rose {
  --bs-alert-color: color-mix(in srgb, var(--bs-rose) 58%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-rose) 20%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-rose) 34%, white);
}
.alert-peach {
  --bs-alert-color: color-mix(in srgb, var(--bs-peach) 58%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-peach) 22%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-peach) 38%, white);
}
.alert-indigo {
  --bs-alert-color: color-mix(in srgb, var(--bs-indigo) 58%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-indigo) 20%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-indigo) 34%, white);
}
.alert-success {
  --bs-alert-color: color-mix(in srgb, var(--bs-success) 60%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-success) 18%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-success) 32%, white);
}
.alert-info {
  --bs-alert-color: color-mix(in srgb, var(--bs-info) 60%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-info) 18%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-info) 32%, white);
}
.alert-warning {
  --bs-alert-color: color-mix(in srgb, var(--bs-warning) 55%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-warning) 25%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-warning) 42%, white);
}
.alert-danger {
  --bs-alert-color: color-mix(in srgb, var(--bs-danger) 60%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-danger) 18%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-danger) 32%, white);
}
.alert-dark {
  --bs-alert-color: color-mix(in srgb, var(--bs-dark) 75%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-dark) 16%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-dark) 30%, white);
}
.alert-light {
  --bs-alert-color: color-mix(in srgb, var(--bs-light) 12%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-light) 60%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-light) 75%, black);
}
.alert-new {
  --bs-alert-color: color-mix(in srgb, var(--bs-new) 55%, black);
  --bs-alert-bg: color-mix(in srgb, var(--bs-new) 20%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-new) 34%, white);
}
.alert-cta {
  --bs-alert-color: #fff;
  --bs-alert-bg: var(--bs-cta);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-cta) 80%, black);
}

/* ==========================================================
   ALERT LINKS  (.alert-* .alert-link)  — darkened to match each alert
   ========================================================== */
.alert-primary   .alert-link { color: color-mix(in srgb, var(--bs-primary)   30%, black); font-weight: 600; }
.alert-secondary .alert-link { color: color-mix(in srgb, var(--bs-secondary) 30%, black); font-weight: 600; }
.alert-rose      .alert-link { color: color-mix(in srgb, var(--bs-rose)      30%, black); font-weight: 600; }
.alert-peach     .alert-link { color: color-mix(in srgb, var(--bs-peach)     30%, black); font-weight: 600; }
.alert-indigo    .alert-link { color: color-mix(in srgb, var(--bs-indigo)    30%, black); font-weight: 600; }
.alert-success   .alert-link { color: color-mix(in srgb, var(--bs-success)   30%, black); font-weight: 600; }
.alert-info      .alert-link { color: color-mix(in srgb, var(--bs-info)      30%, black); font-weight: 600; }
.alert-warning   .alert-link { color: color-mix(in srgb, var(--bs-warning)   25%, black); font-weight: 600; }
.alert-danger    .alert-link { color: color-mix(in srgb, var(--bs-danger)    30%, black); font-weight: 600; }
.alert-dark      .alert-link { color: color-mix(in srgb, var(--bs-dark)      70%, black); font-weight: 600; }
.alert-light     .alert-link { color: color-mix(in srgb, var(--bs-light)     12%, black); font-weight: 600; }
.alert-new       .alert-link { color: color-mix(in srgb, var(--bs-new)       30%, black); font-weight: 600; }
.alert-cta       .alert-link { color: #fff; text-decoration: underline; font-weight: 600; }



/* ==========================================================
   ACCORDION
   ========================================================== */

.accordion {
  --bs-accordion-active-bg: #fff;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(111,66,193,.25);
}



/* ==========================================================
   PAGINATION — minimalist (Bootstrap .pagination)
   Borderless, airy, soft hover, pastel-primary active pill.
   ========================================================== */
.pagination {
  --bs-pagination-padding-x: .8rem;
  --bs-pagination-padding-y: .4rem;
  --bs-pagination-border-width: 0;            /* no borders */
  --bs-pagination-border-radius: .55rem;
  --bs-pagination-bg: transparent;
  --bs-pagination-color: var(--bs-dark);
  --bs-pagination-hover-bg: color-mix(in srgb, var(--bs-primary) 18%, white);
  --bs-pagination-hover-color: color-mix(in srgb, var(--bs-primary) var(--pastel-readable), black);
  --bs-pagination-focus-bg: color-mix(in srgb, var(--bs-primary) 18%, white);
  --bs-pagination-focus-color: color-mix(in srgb, var(--bs-primary) var(--pastel-readable), black);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-active-color: #fff;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: color-mix(in srgb, var(--bs-dark) 35%, white);
  gap: .25rem;                                 /* breathing room between items */
}
.pagination .page-link {
  border-radius: var(--bs-pagination-border-radius);
  font-weight: 500;
  line-height: 1.4;
  transition: background-color .15s ease, color .15s ease;
}
.pagination .page-item.active .page-link {
  font-weight: 600;
  box-shadow: 0 .35rem .7rem -.4rem color-mix(in srgb, var(--bs-primary) 80%, black);
}
.pagination .page-link:focus { box-shadow: none; }
.pagination .page-item.disabled .page-link { opacity: .55; }

/* ==========================================================
   dataTables — pagination styling to match the pastel theme
   ========================================================== */
.dataTables_wrapper .dataTables_paginate {
    padding: 15px 0px;
    margin-top: 1rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    text-decoration: none;       /* remove underline */
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    color: #5b6470 !important;
    padding: .35rem .7rem;
    margin: 0 .15rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: all .15s ease-in-out;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    text-decoration: none;       /* ensure hover doesn't underline */
    background: #f1f5f9;
    border-color: rgba(0,0,0,.2);
    color: #212529 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 .4rem .75rem -.45rem rgba(0,0,0,.35);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: not-allowed;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    outline: none;
    box-shadow: none;
}