/* =====================================================================
   Thème sombre — PARKAPP
   ---------------------------------------------------------------------
   Metronic 8.2 est bâti sur Bootstrap 5.3 : ses composants lisent des
   variables CSS (--bs-gray-*, --bs-body-bg, --bs-border-color…) plutôt
   que des couleurs en dur. Basculer le thème revient donc à redéfinir
   ces variables, pas à repeindre chaque carte, table et formulaire.

   Ce que Bootstrap fait déjà tout seul sous [data-bs-theme=dark] :
   body, bordures, liens, couleurs d'emphase. Ce qu'il ne fait PAS, et
   qui est ici : l'échelle de gris (Metronic s'en sert du fond des
   champs jusqu'à la couleur du texte) et les surfaces propres au
   thème — en-tête, cartes, menus déroulants, tiroirs.

   Le fichier sert aussi la page de connexion, qui a sa propre palette.
   ===================================================================== */

/* Les commandes dessinées par le système — sélecteur de date, listes
   déroulantes natives, ascenseurs — ignorent nos variables : sans
   color-scheme, un calendrier ouvert depuis une page sombre s'affiche en blanc,
   et les flèches des champs numériques restent noires sur noir. */
[data-bs-theme="dark"] input,
[data-bs-theme="dark"] select,
[data-bs-theme="dark"] textarea { color-scheme: dark; }

[data-bs-theme="dark"] {
    /* ---- Échelle de gris INVERSÉE ----------------------------------
       100 = surface la plus discrète, 900 = texte le plus contrasté.
       Metronic écrit .text-gray-800 pour « du texte foncé » et
       .bg-gray-100 pour « un fond à peine teinté » : en inversant
       l'échelle, ces deux intentions restent vraies en sombre. */
    --bs-gray-100: #1b202a;
    --bs-gray-100-rgb: 27, 32, 42;
    --bs-gray-200: #242a36;
    --bs-gray-200-rgb: 36, 42, 54;
    --bs-gray-300: #313848;
    --bs-gray-300-rgb: 49, 56, 72;
    --bs-gray-400: #485266;
    --bs-gray-400-rgb: 72, 82, 102;
    --bs-gray-500: #6b7789;
    --bs-gray-500-rgb: 107, 119, 137;
    --bs-gray-600: #8b96a8;
    --bs-gray-600-rgb: 139, 150, 168;
    --bs-gray-700: #b0bacb;
    --bs-gray-700-rgb: 176, 186, 203;
    --bs-gray-800: #d4dbe6;
    --bs-gray-800-rgb: 212, 219, 230;
    --bs-gray-900: #eef2f8;
    --bs-gray-900-rgb: 238, 242, 248;

    /* ---- Fonds et texte ---- */
    --bs-body-bg: #12151d;
    --bs-body-bg-rgb: 18, 21, 29;
    --bs-body-color: #c8d0dd;
    --bs-body-color-rgb: 200, 208, 221;
    --bs-heading-color: #eef2f8;
    --bs-border-color: #262d3a;
    --bs-border-color-translucent: rgba(255, 255, 255, .10);

    /* .bg-light / .btn-light deviennent une surface sombre ; .bg-dark
       l'inverse, sinon ces deux classes se retrouvent à l'envers. */
    --bs-light: #1b202a;
    --bs-light-rgb: 27, 32, 42;
    --bs-dark: #eef2f8;
    --bs-dark-rgb: 238, 242, 248;

    /* ---- Surfaces propres au thème ---- */
    --bs-app-bg-color: #12151d;
    --bs-app-blank-bg-color: #12151d;
    --bs-app-header-minimize-bg-color: #171b25;
    --bs-app-toolbar-base-bg-color: #171b25;
    --bs-app-header-light-separator-color: #262d3a;
    --bs-app-sidebar-base-toggle-btn-bg-color: #1b202a;
    --bs-app-sidebar-base-toggle-btn-border-color: #313848;
    --bs-drawer-bg-color: #171b25;
    --bs-menu-dropdown-bg-color: #1b202a;
    --bs-menu-dropdown-box-shadow: 0 0 40px 0 rgba(0, 0, 0, .55);
    --bs-menu-link-bg-color-hover: #242a36;
    --bs-menu-link-bg-color-active: #242a36;
    --bs-menu-link-bg-color-here: #242a36;
    --bs-menu-link-bg-color-show: #242a36;
}

/* La carte fixe sa bordure en dur dans le thème (#F1F1F4) : c'est la
   seule surface majeure que les variables globales ne rattrapent pas. */
[data-bs-theme="dark"] .card {
    --bs-card-bg: #171b25;
    --bs-card-border-color: #262d3a;
    --bs-card-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .35);
}
[data-bs-theme="dark"] .card-header { border-bottom-color: #262d3a; }

[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .app-header[data-kt-sticky="on"] {
    background-color: #171b25;
    border-bottom: 1px solid #262d3a;
}

/* Séparateurs : le thème les trace en pointillé clair. */
[data-bs-theme="dark"] .separator { border-bottom-color: #262d3a; }

/* Champs : le « solid » de Metronic est un gris très clair en clair ;
   l'échelle inversée le rend sombre, il ne reste que la bordure au
   focus et le texte saisi. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { color: #dfe5ee; }
[data-bs-theme="dark"] .form-control::placeholder { color: #6b7789; }

/* Tableaux : la ligne survolée doit rester lisible sans éblouir. */
[data-bs-theme="dark"] .table { --bs-table-hover-bg: #1f2430; --bs-table-striped-bg: rgba(255, 255, 255, .025); }
[data-bs-theme="dark"] .table-row-dashed tr { border-bottom-color: #262d3a; }

/* DataTables et le sélecteur de dates ont leur propre feuille, sans
   variables : ce sont les rares endroits à repeindre à la main. */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-bs-theme="dark"] .page-link { background-color: transparent; color: #b0bacb; }
[data-bs-theme="dark"] .page-item.active .page-link { background-color: #1565c0; color: #fff; }
[data-bs-theme="dark"] .daterangepicker {
    background: #1b202a; border-color: #313848; color: #c8d0dd;
}
[data-bs-theme="dark"] .daterangepicker .calendar-table { background: #1b202a; border-color: #313848; }
[data-bs-theme="dark"] .daterangepicker td.off { background: #171b25; color: #4a5364; }
[data-bs-theme="dark"] .daterangepicker td.available:hover { background: #242a36; }
[data-bs-theme="dark"] .select2-dropdown { background: #1b202a; border-color: #313848; }
[data-bs-theme="dark"] .select2-container--bootstrap5 .select2-selection { background: #1b202a; }

/* ---- Composants maison ------------------------------------------- */

/* Pastilles de parking : elles étaient posées sur des gris clairs en dur. */
[data-bs-theme="dark"] .pk-pill { background: #1b202a; border-color: #313848; color: #c8d0dd; }
[data-bs-theme="dark"] .pk-pill:hover { background: #242a36; }
/* La case a cocher etait un carre blanc en dur : seul point clair reste
   apres la bascule, releve en auditant les fonds de la page. */
[data-bs-theme="dark"] .pk-pill .pk-check { background: #12151d; border-color: #485266; }
[data-bs-theme="dark"] .pk-pill.is-checked { background: rgba(21, 101, 192, .18); }
[data-bs-theme="dark"] .pk-pill.is-checked .pk-check { background: var(--bs-primary); border-color: var(--bs-primary); }
[data-bs-theme="dark"] .pk-compte:hover { background: #242a36; border-color: #313848; }
[data-bs-theme="dark"] .pk-compte-nom { color: #dfe5ee; }

/* Calendrier du taux de remplissage. */
[data-bs-theme="dark"] .occ-cal { --b: #262d3a; }
[data-bs-theme="dark"] .occ-cell.out { background: #171b25; color: #3b4354; }
[data-bs-theme="dark"] .occ-cell.out .occ-num { color: #3b4354; }

/* ---- Page de connexion -------------------------------------------
   Elle a sa propre palette, écrite hors du thème Metronic : ses deux
   panneaux sont des couleurs en dur qu'aucune variable ne couvre. */
[data-bs-theme="dark"] body { background: #12151d; }
[data-bs-theme="dark"] .pk-vitrine {
    background: #171b25;
    border-color: #262d3a;
    color: #c8d0dd;
}
[data-bs-theme="dark"] .pk-vitrine::before {
    background: linear-gradient(200deg, rgba(41, 171, 226, .10), rgba(21, 101, 192, .05) 60%, transparent);
}
[data-bs-theme="dark"] .pk-marque { color: #eef2f8; }
[data-bs-theme="dark"] .pk-accroche h1 { color: #eef2f8 !important; }
[data-bs-theme="dark"] .pk-accroche p,
[data-bs-theme="dark"] .pk-points li { color: #9aa6b8; }
[data-bs-theme="dark"] .pk-points svg { color: #29abe2; }
[data-bs-theme="dark"] .pk-mention { color: #67728a; }
[data-bs-theme="dark"] .pk-acces { background: #12151d; }
[data-bs-theme="dark"] .pk-carte h2 { color: #eef2f8; }
[data-bs-theme="dark"] .pk-carte .pk-sous-titre,
[data-bs-theme="dark"] .pk-note,
[data-bs-theme="dark"] .pk-pied { color: #8b96a8; }
[data-bs-theme="dark"] .pk-label { color: #c8d0dd; }
[data-bs-theme="dark"] .pk-input {
    background: #1b202a; border-color: #313848; color: #dfe5ee;
}
[data-bs-theme="dark"] .pk-input::placeholder { color: #5c6779; }
[data-bs-theme="dark"] .pk-onglets { background: #1b202a; }
[data-bs-theme="dark"] .pk-onglet { color: #8b96a8; }
[data-bs-theme="dark"] .pk-onglet.actif { background: #262d3a; color: #eef2f8; }
[data-bs-theme="dark"] .pk-oeil:hover { background: #262d3a; color: #dfe5ee; }
[data-bs-theme="dark"] .pk-pied { border-top-color: #262d3a; }
[data-bs-theme="dark"] .pk-erreur { background: #2a1618; border-color: #5b2326; color: #f3b0b3; }

/* ---- Le bouton de bascule lui-même -------------------------------- */
.pk-theme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: #6b7280; cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.pk-theme:hover { background: #f1f4f9; border-color: #e5e7eb; color: #1f2937; }
[data-bs-theme="dark"] .pk-theme { color: #8b96a8; }
[data-bs-theme="dark"] .pk-theme:hover { background: #242a36; border-color: #313848; color: #eef2f8; }
.pk-theme svg { width: 18px; height: 18px; display: block; }
/* Un seul des deux dessins est visible : le soleil en sombre (ce sur
   quoi on bascule), la lune en clair. */
.pk-theme .pk-theme-soleil { display: none; }
[data-bs-theme="dark"] .pk-theme .pk-theme-soleil { display: block; }
[data-bs-theme="dark"] .pk-theme .pk-theme-lune { display: none; }

/* Sur la page de connexion, la bascule se pose dans le coin. Le conteneur
   doit etre positionne, sinon le bouton s'accroche au bloc englobant initial
   et derive des que la page defile sur mobile. */
.pk-page { position: relative; }
.pk-theme-coin { position: absolute; top: 18px; right: 20px; z-index: 3; }

/* =====================================================================
   Sidebar en thème sombre
   ---------------------------------------------------------------------
   En clair, la colonne porte le bleu de la marque — c'est elle qui donne
   son identité à l'interface. En sombre, ce bleu devenait la seule zone
   claire de l'écran : la colonne prend donc la teneur du thème, et
   l'identité passe au liseré et à la pastille du logo, qui restent.

   Les attributs sont sur deux éléments : data-bs-theme sur <html>,
   data-kt-app-layout sur <body> — d'où le combinateur descendant.
   ===================================================================== */
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar {
    background: #0e1219;
    border-right: 1px solid #262d3a;
}
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom-color: #262d3a;
}
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link,
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: #9aa6b8;
}
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: #5c6779;
}
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-heading {
    color: #6b7789 !important;
}
/* La page courante garde le bleu de la maison : c'est le seul repère de
   couleur qui subsiste, avec le liseré. */
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: #1a3a63;
    box-shadow: inset 3px 0 0 var(--pk-accent, #29abe2);
}
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    background-color: rgba(255, 255, 255, .05);
}
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .separator {
    border-bottom-color: #262d3a;
}
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y:hover::-webkit-scrollbar-thumb {
    background-color: #313848;
}
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-toggle {
    background-color: #1b202a !important;
    border-color: #313848;
}
[data-bs-theme="dark"] [data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-toggle:hover {
    background-color: #262d3a !important;
}
/* Le logo reste la marque : pastille claire, lettre bleue. */
[data-bs-theme="dark"] .pk-marque-lien:hover .pk-marque-pastille { background: #c9d6e6; }

/* =====================================================================
   Calendrier du dashboard
   Feuille à part (calendar.css), écrite en couleurs fixes : rien n'y
   suivait la bascule, et ses cases claires trouaient l'écran.
   ===================================================================== */
[data-bs-theme="dark"] .calendar-content .week-content {
    background: #1b202a; border-color: #262d3a; color: #c8d0dd;
}
[data-bs-theme="dark"] .calendar-content .day-content,
[data-bs-theme="dark"] .calendar-content .day-content .day {
    border-color: #262d3a;
}
[data-bs-theme="dark"] .calendar-content .day-content .day.active { background: #171b25; }
[data-bs-theme="dark"] .calendar-content .day-content .day.no-active { background: #101319; }
[data-bs-theme="dark"] .calendar-content .day-content .day.current-day { background-color: #1a3a63; }
[data-bs-theme="dark"] .calendar-content .day-content .day.current-day .number-day { color: #9ec5ea; }
[data-bs-theme="dark"] .calendar-content .day-content .day .event-content .event.event-in,
[data-bs-theme="dark"] .calendar-content .day-content .day .event-content .event.event-out {
    background: #232b38;
}
[data-bs-theme="dark"] .calendar-content .day-content .day .event-content .event.current-event {
    background: #2b5482;
}
[data-bs-theme="dark"] .calendar-content .day-content .day .event-content .event.event-in .number,
[data-bs-theme="dark"] .calendar-content .day-content .day .event-content .event.event-out .number {
    color: #b0bacb;
}
/* Les flèches et le pictogramme parking sont des PNG/SVG sombres : on les
   éclaircit plutôt que d'en fournir une seconde version. */
[data-bs-theme="dark"] .calendar-content .day-content .day .event-content .event.event-in .icon img,
[data-bs-theme="dark"] .calendar-content .day-content .day .event-content .event.event-out .icon img {
    filter: invert(1) brightness(1.6);
}

/* =====================================================================
   Liste des réservations
   La colonne « Actions » est épinglée à droite : elle doit porter un
   fond OPAQUE pour masquer les cellules qui défilent dessous. Ce fond
   était blanc en dur — d'où une bande claire en travers du tableau.
   ===================================================================== */
[data-bs-theme="dark"] #kt_table_reservations th:last-child,
[data-bs-theme="dark"] #kt_table_reservations td:last-child {
    background: #171b25;
    box-shadow: -8px 0 10px -8px rgba(0, 0, 0, .55);
}
[data-bs-theme="dark"] #kt_table_reservations tbody tr:hover td:last-child { background: #1f2430; }

/* Commentaire éditable au clic : le champ apparaît sur le fond de la ligne. */
[data-bs-theme="dark"] .comment-input { background: #12151d; color: #dfe5ee; border-color: #313848; }

/* =====================================================================
   Surfaces pâles disséminées dans l'admin
   ---------------------------------------------------------------------
   Blocs d'emplacements, cartes média, encarts de tarifs… posés sur des
   gris quasi blancs écrits en dur, parfois dans l'attribut style, que
   les variables ne peuvent pas atteindre. Les sélecteurs d'attribut les
   rattrapent d'un coup : ces trois teintes ne servent QUE de fond de
   bloc discret, jamais de couleur d'accent.
   ===================================================================== */
[data-bs-theme="dark"] [style*="#f8fafc"],
[data-bs-theme="dark"] [style*="#f8f9fa"],
[data-bs-theme="dark"] [style*="#f5f8fa"],
[data-bs-theme="dark"] [style*="#f0f2f5"] {
    background-color: #1b202a !important;
    border-color: #313848 !important;
}

/* Les mêmes teintes, cette fois en classes. */
[data-bs-theme="dark"] .location-row,
[data-bs-theme="dark"] .subscription-row,
[data-bs-theme="dark"] .media-item,
[data-bs-theme="dark"] #calc-result {
    background: #1b202a !important;
    border-color: #313848 !important;
}
[data-bs-theme="dark"] .marque-input:hover,
[data-bs-theme="dark"] .destination-input:hover { background: #242a36; }
[data-bs-theme="dark"] .marque-input:focus,
[data-bs-theme="dark"] .destination-input:focus { background: #12151d; color: #dfe5ee; }
[data-bs-theme="dark"] .marque-input,
[data-bs-theme="dark"] .destination-input { color: #dfe5ee; }

/* Encarts d'aide : .alert-light est un aplat presque blanc. */
[data-bs-theme="dark"] .alert-light { background-color: #1b202a; border-color: #313848; color: #c8d0dd; }

/* Zone de dépôt des médias. */
[data-bs-theme="dark"] .dropzone { background-color: #1b202a !important; }

/* =====================================================================
   Couleurs de TEXTE — la seconde famille de variables
   ---------------------------------------------------------------------
   Metronic ne lit pas `--bs-gray-800` pour `.text-gray-800`, mais
   `--bs-text-gray-800` : une famille parallèle, propre au thème.
   Inverser la première ne suffisait donc pas — les titres, les montants
   et les en-têtes de tableau restaient en bleu nuit sur fond nuit.

   Même logique que l'échelle de fond : 100 le plus discret, 900 le plus
   contrasté, pour que `.text-gray-800` reste « du texte affirmé ».
   ===================================================================== */
[data-bs-theme="dark"] {
    --bs-text-gray-100: #1b202a;
    --bs-text-gray-200: #242a36;
    --bs-text-gray-300: #313848;
    --bs-text-gray-400: #566276;
    --bs-text-gray-500: #8b96a8;
    --bs-text-gray-600: #a3adbd;
    --bs-text-gray-700: #c2cbd8;
    --bs-text-gray-800: #dde4ee;
    --bs-text-gray-900: #f3f6fa;

    /* .text-dark est très utilisé pour les titres de page et les montants :
       en sombre il doit virer au clair, sans quoi il disparaît. */
    --bs-text-dark: #f3f6fa;
    --bs-text-light: #1b202a;
    --bs-text-muted: #8b96a8;
    --bs-text-secondary: #242a36;
}

/* Metronic écrit aussi certaines couleurs de titre en dur. */
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-label,
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
    color: var(--bs-heading-color);
}

/* Lignes mises en avant par une couleur pâle en dur — la journée du jour sur
   les passages et les taxes, ou les lignes « passées » grisées. Le fond
   s'assombrit, le texte redevient lisible. */
[data-bs-theme="dark"] tr[style*="background"] td,
[data-bs-theme="dark"] td[style*="background"],
[data-bs-theme="dark"] [style*="#fff7ed"],
[data-bs-theme="dark"] [style*="#fffbeb"],
[data-bs-theme="dark"] [style*="#f1f5f9"],
[data-bs-theme="dark"] [style*="#f9fafb"],
[data-bs-theme="dark"] [style*="#eff6ff"] {
    background-color: #1b202a !important;
    color: #dde4ee;
}

/* Le libellé « Aujourd'hui » et les pastilles de comptage gardent leur
   couleur d'accent : ce sont des repères, pas du texte courant. */
[data-bs-theme="dark"] .badge { color: inherit; }

/* Page Traductions : les champs vides sont signalés par un fond rose très
   clair, illisible en sombre. On garde le signal, on baisse la lumière. */
[data-bs-theme="dark"] input[style*="#fff5f5"],
[data-bs-theme="dark"] textarea[style*="#fff5f5"],
[data-bs-theme="dark"] .is-missing, [data-bs-theme="dark"] .translation-missing {
    background-color: #2a1a1d !important;
    border-color: #6b2b31 !important;
    color: #f3b0b3 !important;
}

/* `.bg-white` est un aplat blanc en dur, très utilisé pour les en-têtes de
   carte. On ne touche PAS à --bs-white : la variable sert aussi de couleur de
   texte sur fond coloré, l'inverser rendrait ces libellés illisibles. */
[data-bs-theme="dark"] .bg-white { background-color: #171b25 !important; }
[data-bs-theme="dark"] .bg-body  { background-color: #12151d !important; }

/* =====================================================================
   Lignes de tableau mises en avant (passages, taxes)
   Ces pages surlignent la journée du jour et grisent les jours à venir,
   avec des couleurs claires en dur et un !important. En sombre, le texte
   se retrouvait sur un fond presque blanc.
   ===================================================================== */
[data-bs-theme="dark"] .table tbody tr.row-today,
[data-bs-theme="dark"] #passages-table tbody tr.row-today {
    background-color: #172a44 !important;   /* bleu profond, repère conservé */
    border-left-color: #1565c0 !important;
}
[data-bs-theme="dark"] .table tbody tr.row-today td { color: #dde4ee; }

[data-bs-theme="dark"] .table tbody tr.row-future {
    background-color: #171b25 !important;
    opacity: 1;                              /* l'opacité écrasait la lisibilité */
}
[data-bs-theme="dark"] .table tbody tr.row-future td { color: #8b96a8; }

[data-bs-theme="dark"] .table tbody tr.row-weekend {
    background-color: rgba(246, 192, 0, .06) !important;
}

/* =====================================================================
   Page Traductions
   Les champs de saisie et les pastilles de complétude sont écrits en
   couleurs claires fixes. Le signal (champ vide = rose, complet = vert)
   est conservé, seule la luminosité change.
   ===================================================================== */
[data-bs-theme="dark"] #translates-table .translate-cell textarea {
    background: #1b202a;
    color: #dde4ee;
    border-color: transparent;
}
[data-bs-theme="dark"] #translates-table .translate-cell textarea:hover { background: #242a36; }
[data-bs-theme="dark"] #translates-table .translate-cell textarea:focus {
    background: #12151d;
    border-color: var(--bs-primary);
}
/* Champ vide : le rose pâle devient un bordeaux sourd, le pointillé reste. */
[data-bs-theme="dark"] #translates-table .translate-cell.empty textarea {
    background: #2a1a20;
    border-color: #a03a63;
    color: #f0c2d3;
}

[data-bs-theme="dark"] .completion-badge.complete { background: #12331f; color: #7ddba3; }
[data-bs-theme="dark"] .completion-badge.partial  { background: #33290a; color: #f2cd5a; }
[data-bs-theme="dark"] .completion-badge.empty    { background: #331519; color: #f0919b; }