/*!
 * Friperie — thème Bootstrap 5.3 pour BAV (Les Frip'ouilles)
 *
 * Même principe que les thèmes Bootswatch, mais en surcouche : ce fichier se
 * charge APRÈS bootstrap.min.css et AVANT app.css (voir assets/app.js). Il ne
 * recompile rien, il redéfinit les variables CSS de Bootstrap et reprend les
 * composants dont la couleur est codée en dur dans le CSS compilé (boutons,
 * focus des champs, cases à cocher, dropdown, pagination…).
 *
 * Charte : une friperie associative — terracotta (primaire), denim (info),
 * sauge (succès), moutarde (avertissement), brique (danger), fonds lin et
 * écru, texte couleur encre chaude. Les séparateurs en pointillés rappellent
 * une couture.
 *
 * Accessibilité (WCAG 2.1 AA, contraste ≥ 4,5:1) — mesures :
 *   texte blanc sur primaire 5,79 · secondaire 6,04 · succès 5,45
 *   · info 6,73 · danger 6,36 ; texte encre sur moutarde 6,74
 *   ; texte encre sur fond écru 13,86, sur fond lin 12,41
 *   ; texte secondaire sur fond lin 4,98 ; lien primaire sur fond lin 5,07.
 * Changer une couleur de base impose de refaire ces mesures.
 *
 * Aucune police web : pas d'appel à un service tiers (RGPD, et le réseau
 * d'une salle des fêtes un jour de bourse n'est pas un réseau fiable). Les
 * titres prennent une police arrondie quand le système en fournit une.
 *
 * Teintes dérivées par color-mix() : modifier une couleur de base (et son
 * triplet -rgb) suffit à propager survols, fonds atténués et bordures.
 */

/* --------------------------------------------------------------------------
 * 1. Variables globales
 * ------------------------------------------------------------------------ */

:root,
[data-bs-theme="light"] {
    /* Couleurs de base — hexadécimal ET triplet RGB (utilitaires .bg-*, .text-*). */
    --bs-primary: #a8482a;
    --bs-primary-rgb: 168, 72, 42;
    --bs-secondary: #6b6158;
    --bs-secondary-rgb: 107, 97, 88;
    --bs-success: #3b7552;
    --bs-success-rgb: 59, 117, 82;
    --bs-info: #2e5f8a;
    --bs-info-rgb: 46, 95, 138;
    --bs-warning: #e2a93b;
    --bs-warning-rgb: 226, 169, 59;
    --bs-danger: #b0302a;
    --bs-danger-rgb: 176, 48, 42;
    --bs-light: #f3ece2;
    --bs-light-rgb: 243, 236, 226;
    --bs-dark: #2f2a26;
    --bs-dark-rgb: 47, 42, 38;

    /* Textes « emphasis » (alertes, badges atténués) : base assombrie à 40 %. */
    --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 40%, #000);
    --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 40%, #000);
    --bs-success-text-emphasis: color-mix(in srgb, var(--bs-success) 40%, #000);
    --bs-info-text-emphasis: color-mix(in srgb, var(--bs-info) 40%, #000);
    --bs-warning-text-emphasis: color-mix(in srgb, var(--bs-warning) 40%, #000);
    --bs-danger-text-emphasis: color-mix(in srgb, var(--bs-danger) 40%, #000);
    --bs-light-text-emphasis: #4f4740;
    --bs-dark-text-emphasis: #2f2a26;

    /* Fonds atténués : un peu de la base mélangé à l'écru (et non au blanc pur). */
    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 18%, #fffcf7);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 14%, #fffcf7);
    --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 18%, #fffcf7);
    --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 18%, #fffcf7);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 22%, #fffcf7);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 16%, #fffcf7);
    --bs-light-bg-subtle: #faf6f0;
    --bs-dark-bg-subtle: #d5d0ca;

    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 40%, #fffcf7);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 32%, #fffcf7);
    --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 40%, #fffcf7);
    --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 40%, #fffcf7);
    --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 50%, #fffcf7);
    --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 36%, #fffcf7);
    --bs-light-border-subtle: #ece3d7;
    --bs-dark-border-subtle: #aca49c;

    /* Corps de page : écru, texte encre chaude. */
    --bs-body-color: #2f2a26;
    --bs-body-color-rgb: 47, 42, 38;
    --bs-body-bg: #fffcf7;
    --bs-body-bg-rgb: 255, 252, 247;
    --bs-emphasis-color: #1c1916;
    --bs-emphasis-color-rgb: 28, 25, 22;
    --bs-secondary-color: #6f655c;
    --bs-secondary-color-rgb: 111, 101, 92;
    --bs-secondary-bg: #efe7dc;
    --bs-secondary-bg-rgb: 239, 231, 220;
    --bs-tertiary-color: rgba(47, 42, 38, 0.55);
    --bs-tertiary-color-rgb: 47, 42, 38;
    --bs-tertiary-bg: #f5efe6;
    --bs-tertiary-bg-rgb: 245, 239, 230;

    /* Liens : primaire assombri, pour tenir le contraste sur fond lin. */
    --bs-link-color: #8f3d23;
    --bs-link-color-rgb: 143, 61, 35;
    --bs-link-hover-color: #6c2e1a;
    --bs-link-hover-color-rgb: 108, 46, 26;
    --bs-link-decoration: underline;

    --bs-highlight-color: #2f2a26;
    --bs-highlight-bg: #f9e7c2;

    /* Bordures et arrondis : plus doux que Bootstrap. */
    --bs-border-color: #e3d8ca;
    --bs-border-color-translucent: rgba(47, 42, 38, 0.14);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1.125rem;
    --bs-border-radius-xxl: 2rem;

    /* Ombres teintées (pas de noir pur sur fond chaud). */
    --bs-box-shadow: 0 0.5rem 1rem rgba(47, 42, 38, 0.1);
    --bs-box-shadow-sm: 0 1px 2px rgba(47, 42, 38, 0.06), 0 2px 6px rgba(47, 42, 38, 0.05);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(47, 42, 38, 0.14);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(47, 42, 38, 0.075);

    /* Anneau de focus et validation de formulaire. */
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.3);
    --bs-form-valid-color: var(--bs-success);
    --bs-form-valid-border-color: var(--bs-success);
    --bs-form-invalid-color: var(--bs-danger);
    --bs-form-invalid-border-color: var(--bs-danger);

    /* Typographie. */
    --bav-heading-font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --bs-heading-color: #2a2521;
}

/* --------------------------------------------------------------------------
 * 2. Typographie
 * ------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand,
.modal-title {
    font-family: var(--bav-heading-font);
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

a:hover {
    text-decoration-thickness: 2px;
}

hr {
    border-top-style: dashed;
    opacity: 1;
    color: var(--bs-border-color);
}

::selection {
    background: rgba(var(--bs-warning-rgb), 0.45);
    color: var(--bs-body-color);
}

/*
 * Icônes Phosphor (`<i class="ph ph-…" aria-hidden="true"></i>`).
 * Glyphe de police : couleur héritée du texte (`currentColor`), taille en em.
 * Le décalage vertical aligne l'icône sur la ligne de base du texte voisin,
 * comme le fait Bootstrap Icons ; un léger agrandissement compense le trait
 * fin de Phosphor à côté d'un texte en gras (boutons). En inline-block, le
 * soulignement d'un lien ne traverse pas le glyphe.
 */
.ph {
    display: inline-block;
    font-size: 1.15em;
    vertical-align: -0.175em;
}

/* --------------------------------------------------------------------------
 * 3. Boutons
 *
 * Bootstrap fixe les couleurs de chaque variante en dur dans la classe : on
 * réécrit toutes les variables --bs-btn-*. Survol : base assombrie de 15 %,
 * clic : 20 %. Moutarde et lin gardent un texte encre (contraste).
 * ------------------------------------------------------------------------ */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-border-radius-sm: var(--bs-border-radius-sm);
    --bs-btn-border-radius-lg: var(--bs-border-radius-lg);
    letter-spacing: 0.01em;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-danger,
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-bg: var(--bav-btn-base);
    --bs-btn-border-color: var(--bav-btn-base);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bav-btn-base) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bav-btn-base) 82%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bav-btn-base) 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bav-btn-base) 76%, #000);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-bg: var(--bav-btn-base);
    --bs-btn-disabled-border-color: var(--bav-btn-base);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.btn-primary { --bav-btn-base: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }
.btn-secondary { --bav-btn-base: var(--bs-secondary); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); }
.btn-success { --bav-btn-base: var(--bs-success); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); }
.btn-info { --bav-btn-base: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); }
.btn-danger { --bav-btn-base: var(--bs-danger); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); }
.btn-dark {
    --bav-btn-base: var(--bs-dark);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-dark) 85%, #fff);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-dark) 82%, #fff);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-dark) 78%, #fff);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-dark) 75%, #fff);
    --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
}

.btn-warning,
.btn-light {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-bg: var(--bav-btn-base);
    --bs-btn-border-color: var(--bav-btn-base);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bav-btn-base) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bav-btn-base) 85%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--bav-btn-base) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bav-btn-base) 78%, #000);
    --bs-btn-disabled-bg: var(--bav-btn-base);
    --bs-btn-disabled-border-color: var(--bav-btn-base);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}

.btn-warning { --bav-btn-base: var(--bs-warning); --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb); }
.btn-light { --bav-btn-base: var(--bs-light); --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb); }

/* Le relief ne doit pas survivre à l'état désactivé ni au clic. */
.btn:disabled,
.btn.disabled,
.btn:active,
.btn.active {
    box-shadow: none;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-dark {
    --bs-btn-color: var(--bav-btn-text);
    --bs-btn-border-color: var(--bav-btn-base);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bav-btn-base);
    --bs-btn-hover-border-color: var(--bav-btn-base);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--bav-btn-base) 85%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bav-btn-base) 85%, #000);
    --bs-btn-disabled-color: var(--bav-btn-text);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bav-btn-base);
    --bs-gradient: none;
}

.btn-outline-primary { --bav-btn-base: var(--bs-primary); --bav-btn-text: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); }
.btn-outline-success { --bav-btn-base: var(--bs-success); --bav-btn-text: var(--bs-success); --bs-btn-focus-shadow-rgb: var(--bs-success-rgb); }
.btn-outline-info { --bav-btn-base: var(--bs-info); --bav-btn-text: var(--bs-info); --bs-btn-focus-shadow-rgb: var(--bs-info-rgb); }
.btn-outline-danger { --bav-btn-base: var(--bs-danger); --bav-btn-text: var(--bs-danger); --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb); }
.btn-outline-dark { --bav-btn-base: var(--bs-dark); --bav-btn-text: var(--bs-dark); --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb); }

/* Secondaire en contour : bordure plus claire, texte encre — bouton « neutre ». */
.btn-outline-secondary {
    --bav-btn-base: var(--bs-secondary);
    --bav-btn-text: var(--bs-body-color);
    --bs-btn-border-color: #cbbfb1;
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: #b3a697;
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: #e5dbcd;
    --bs-btn-active-border-color: #b3a697;
    --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    background-color: var(--bs-body-bg);
}

/* Moutarde en contour : le texte moutarde sur écru ne tient pas le contraste. */
.btn-outline-warning {
    --bav-btn-base: var(--bs-warning);
    --bav-btn-text: var(--bs-warning-text-emphasis);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
}

.btn-link {
    --bs-btn-font-weight: 600;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* --------------------------------------------------------------------------
 * 4. Barre de navigation
 * ------------------------------------------------------------------------ */

.navbar {
    --bs-navbar-brand-color: var(--bs-primary);
    --bs-navbar-brand-hover-color: color-mix(in srgb, var(--bs-primary) 80%, #000);
    --bs-navbar-color: var(--bs-secondary-color);
    --bs-navbar-hover-color: var(--bs-body-color);
    --bs-navbar-active-color: var(--bs-primary);
    --bs-navbar-toggler-border-color: var(--bs-border-color);
    --bs-navbar-toggler-focus-width: 0.2rem;
}

/* Liseré « ruban » terracotta sous la barre, à la place de la bordure grise. */
.navbar.border-bottom {
    border-bottom: 3px solid var(--bs-primary) !important;
}

.navbar .nav-link {
    font-weight: 500;
    border-radius: var(--bs-border-radius-sm);
}

.navbar .nav-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width) var(--bs-focus-ring-color);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
    --bs-nav-pills-border-radius: var(--bs-border-radius-pill);
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--bs-primary);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}

.nav-tabs .nav-link.active {
    box-shadow: inset 0 3px 0 var(--bs-primary);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
 * 5. Cartes, modales, toasts, dropdown
 * ------------------------------------------------------------------------ */

.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-cap-bg: var(--bs-tertiary-bg);
    --bs-card-bg: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}

/* Couture : en-têtes et pieds séparés par des pointillés. */
.card-header {
    border-bottom-style: dashed;
}

.card-footer {
    border-top-style: dashed;
}

.card-title {
    color: var(--bs-heading-color);
}

.modal {
    --bs-modal-border-color: transparent;
    --bs-modal-box-shadow: var(--bs-box-shadow-lg);
    --bs-modal-bg: var(--bs-body-bg);
}

.modal-content {
    box-shadow: var(--bs-box-shadow-lg);
}

.modal-header {
    border-bottom-style: dashed;
    background-color: var(--bs-tertiary-bg);
}

.modal-footer {
    border-top-style: dashed;
}

.toast {
    --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.95);
    --bs-toast-border-color: var(--bs-border-color);
    --bs-toast-box-shadow: var(--bs-box-shadow);
    --bs-toast-header-bg: var(--bs-tertiary-bg);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-box-shadow: var(--bs-box-shadow);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-divider-bg: var(--bs-border-color);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-divider {
    border-top-style: dashed;
}

/* --------------------------------------------------------------------------
 * 6. Tableaux
 * ------------------------------------------------------------------------ */

.table {
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: rgba(var(--bs-secondary-rgb), 0.05);
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.07);
    --bs-table-active-bg: rgba(var(--bs-primary-rgb), 0.12);
}

/*
 * Pas de text-transform ici : WebDriver (E2E Panther) lit le texte tel que
 * rendu, un en-tête passé en majuscules ferait échouer les assertions.
 */
.table > thead > tr > th {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    font-weight: 700;
    border-bottom-width: 2px;
    vertical-align: bottom;
}

/* --------------------------------------------------------------------------
 * 7. Formulaires
 * ------------------------------------------------------------------------ */

.form-label {
    font-weight: 600;
}

.form-control,
.form-select {
    border-color: #d6c9b9;
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 55%, #fff);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-control::placeholder {
    color: var(--bs-tertiary-color);
}

.form-check-input {
    border-color: #bfb1a1;
}

.form-check-input:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 55%, #fff);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

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

.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

.form-range::-webkit-slider-thumb:active {
    background-color: color-mix(in srgb, var(--bs-primary) 35%, #fff);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb:active {
    background-color: color-mix(in srgb, var(--bs-primary) 35%, #fff);
}

/* Deux règles séparées : un pseudo-élément inconnu invalide toute la liste de sélecteurs. */
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: #d6c9b9;
}

/* --------------------------------------------------------------------------
 * 8. Alertes, badges, listes, pagination, progression, accordéon
 * ------------------------------------------------------------------------ */

/* Liseré gauche en couleur pleine : le fond atténué seul distingue mal une alerte d'une autre. */
.alert {
    border-left-width: 4px;
}

.alert-primary { border-left-color: var(--bs-primary); }
.alert-secondary { border-left-color: var(--bs-secondary); }
.alert-success { border-left-color: var(--bs-success); }
.alert-info { border-left-color: var(--bs-info); }
.alert-warning { border-left-color: var(--bs-warning); }
.alert-danger { border-left-color: var(--bs-danger); }
.alert-light { border-left-color: var(--bs-dark-border-subtle); }
.alert-dark { border-left-color: var(--bs-dark); }

.alert-link {
    text-underline-offset: 0.2em;
}

.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: var(--bs-border-radius-pill);
    --bs-badge-padding-x: 0.6em;
    letter-spacing: 0.02em;
}

.list-group {
    --bs-list-group-border-color: var(--bs-border-color);
    --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
    --bs-list-group-action-active-bg: var(--bs-secondary-bg);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}

.pagination {
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-border-color: var(--bs-border-color);
}

.progress,
.progress-stacked {
    --bs-progress-bg: var(--bs-secondary-bg);
    --bs-progress-bar-bg: var(--bs-primary);
    --bs-progress-border-radius: var(--bs-border-radius-pill);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23431d11' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}