/* ============================================
   MYVIOO BRAND COLORS - Couleurs de charte
   ============================================
   
   Ce fichier applique les couleurs de marque MyviOO :
   - #034167 : Structure (textes, liens, éléments de navigation)
   - #0A5A85 : Boutons primary
   - #034167 : Hover des boutons primary
   
   Ce fichier est chargé automatiquement via theme_parameters.yaml
   sans modification du code existant.
*/

/* Variables CSS globales */
:root {
    --myvioo-structure-color: #034167;
    --myvioo-primary-color: #0A5A85;
    --myvioo-primary-hover: #034167;
    --myvioo-primary-rgb: 10, 90, 133;
    --myvioo-structure-rgb: 3, 65, 103;
    /* Couleurs vertes de la charte MyviOO */
    --myvioo-green-light: #76B82A;
    --myvioo-green-teal: #31B089;
    --myvioo-green-light-rgb: 118, 184, 42;
    --myvioo-green-teal-rgb: 49, 176, 137;
}

/* Surcharge de la couleur primary Bootstrap + texte primary */
html,
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-primary: #0A5A85;
    --bs-primary-rgb: 10, 90, 133;
    --bs-text-primary: #0A5A85;
}

/* Mode dark */
[data-bs-theme=dark] {
    --bs-primary: #0A5A85 !important;
    --bs-primary-rgb: 10, 90, 133 !important;
    --bs-text-primary: #0A5A85 !important;
}

/* Hover global des liens .text-hover-primary avec la couleur de la charte */
.text-hover-primary:hover,
.text-hover-primary:focus,
.text-hover-primary:active {
    color: #0A5A85 !important;
}

/* ============================================
   STRUCTURE - Couleur #034167
   ============================================ */

/* Textes primary et liens */
.text-primary,
.link-primary,
a.text-primary,
.nav-link.text-active-primary,
.nav-link.text-active-primary.active {
    color: #034167 !important;
}

/* Surcharge pour les titres des cartes de statistiques - éviter l'ancien bleu au hover */
.card.card-xl-stretch .card-header .card-title.text-primary,
.card.card-xl-stretch .card-header .card-title.text-primary:hover,
.card.card-xl-stretch .card-header a.card-title.text-primary,
.card.card-xl-stretch .card-header a.card-title.text-primary:hover,
.card.card-xl-stretch .card-header .card-title.link-primary,
.card.card-xl-stretch .card-header .card-title.link-primary:hover,
.card.card-xl-stretch .card-header a.card-title.link-primary,
.card.card-xl-stretch .card-header a.card-title.link-primary:hover {
    color: inherit !important;
}

/* Surcharge globale pour tous les liens et éléments dans les headers des cartes de stats */
.card.card-xl-stretch .card-header.bg-primary a:hover,
.card.card-xl-stretch .card-header.bg-primary a.text-hover-primary:hover,
.card.card-xl-stretch .card-header.bg-primary .text-hover-primary:hover,
.card.card-xl-stretch .card-header.bg-primary .text-hover-primary:hover i,
.card.card-xl-stretch .card-header.bg-primary .text-hover-primary:hover .svg-icon {
    color: #0A5A85 !important;
}

.card.card-xl-stretch .card-header.bg-success a:hover,
.card.card-xl-stretch .card-header.bg-success a.text-hover-success:hover,
.card.card-xl-stretch .card-header.bg-success .text-hover-success:hover,
.card.card-xl-stretch .card-header.bg-success .text-hover-success:hover i,
.card.card-xl-stretch .card-header.bg-success .text-hover-success:hover .svg-icon {
    color: #31B089 !important;
}

.card.card-xl-stretch .card-header.bg-warning a:hover,
.card.card-xl-stretch .card-header.bg-warning a.text-hover-warning:hover,
.card.card-xl-stretch .card-header.bg-warning .text-hover-warning:hover,
.card.card-xl-stretch .card-header.bg-warning .text-hover-warning:hover i,
.card.card-xl-stretch .card-header.bg-warning .text-hover-warning:hover .svg-icon {
    color: #F59E0B !important;
}

.card.card-xl-stretch .card-header.bg-info a:hover,
.card.card-xl-stretch .card-header.bg-info a.text-hover-info:hover,
.card.card-xl-stretch .card-header.bg-info .text-hover-info:hover,
.card.card-xl-stretch .card-header.bg-info .text-hover-info:hover i,
.card.card-xl-stretch .card-header.bg-info .text-hover-info:hover .svg-icon {
    color: #64748B !important;
}

/* Icônes info */
.text-info,
.ki-duotone.text-info,
.fas.text-info,
i.text-info {
    color: #034167 !important;
}

/* Couleurs vertes de la charte MyviOO */
/* Vert clair #76B82A */
.text-green-light,
.ki-duotone.text-green-light {
    color: #76B82A !important;
}

.bg-green-light {
    background-color: #76B82A !important;
}

.bg-light-green-light {
    background-color: rgba(118, 184, 42, 0.12) !important;
}

/* Vert teal #31B089 */
.text-green-teal,
.ki-duotone.text-green-teal {
    color: #31B089 !important;
}

.bg-green-teal {
    background-color: #31B089 !important;
}

.bg-light-green-teal {
    background-color: rgba(49, 176, 137, 0.12) !important;
}

/* Bordures info */
.border-info,
.border-info.border-dashed,
.notice.border-info {
    border-color: #034167 !important;
}

/* Backgrounds subtils */
.bg-light-info {
    background-color: rgba(3, 65, 103, 0.08) !important;
}

/* ============================================
   BOUTONS PRIMARY - Couleur #0A5A85
   ============================================ */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0A5A85;
    --bs-btn-border-color: #0A5A85;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #034167;
    --bs-btn-hover-border-color: #034167;
    --bs-btn-focus-shadow-rgb: 10, 90, 133;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #034167;
    --bs-btn-active-border-color: #034167;
    background-color: #0A5A85 !important;
    border-color: #0A5A85 !important;
    color: #fff !important;
}

/* Hover des boutons primary */
.btn-primary:hover:not(:disabled):not(.disabled),
.btn-primary:focus:not(:disabled):not(.disabled) {
    background-color: #034167 !important;
    border-color: #034167 !important;
    color: #fff !important;
}

/* Active des boutons primary */
.btn-primary:active:not(:disabled):not(.disabled),
.btn-primary.active:not(:disabled):not(.disabled) {
    background-color: #034167 !important;
    border-color: #034167 !important;
    color: #fff !important;
}

/* ============================================
   AUTRES ÉLÉMENTS PRIMARY
   ============================================ */

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(10, 90, 133, var(--bs-bg-opacity)) !important;
}

.border-primary {
    border-color: #0A5A85 !important;
}

.bg-light-primary {
    background-color: rgba(10, 90, 133, 0.15) !important;
}

.badge-light-primary {
    background-color: rgba(10, 90, 133, 0.15) !important;
    color: #0A5A85 !important;
}

/* ============================================
   FORMULAIRES
   ============================================ */

/* Focus des inputs */
.form-control:focus,
.form-select:focus,
.form-control-lg:focus,
.form-select-lg:focus {
    border-color: #0A5A85 !important;
    box-shadow: 0 0 0 0.25rem rgba(10, 90, 133, 0.25) !important;
    outline: none !important;
}

/* Cases à cocher et radios */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate,
.form-check-input:checked[type=radio] {
    background-color: #0A5A85 !important;
    border-color: #0A5A85 !important;
}

/* ============================================
   NOTIFICATIONS / ALERTES
   ============================================ */

.alert-info,
.notification-info {
    background: rgba(10, 90, 133, 0.04) !important;
    border: none !important;
    border-left: 4px solid #0A5A85 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    color: #034167 !important;
}

.alert-info .title,
.alert-info h4,
.alert-info .alert-heading,
.notification-info .title {
    font-weight: 600;
    color: #034167 !important;
}

.alert-info .text,
.alert-info p,
.alert-info span:not(.icon):not(.title):not(h4):not(.alert-heading),
.notification-info .text {
    color: #0A5A85 !important;
}

/* Style pour les icônes dans les alertes - seulement si elles ont la classe .icon */
.alert-info .icon,
.notification-info .icon {
    background: rgba(10, 90, 133, 0.1) !important;
    color: #034167 !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 6px;
}

/* Pour les autres icônes dans les alertes, seulement la couleur */
.alert-info i,
.alert-info .ki-duotone {
    color: #034167 !important;
}

/* Cibler les éléments SVG à l'intérieur des icônes */
.alert-info .icon svg,
.alert-info .icon svg path,
.alert-info .icon svg circle,
.alert-info .icon svg rect,
.alert-info .icon svg polygon,
.alert-info i svg,
.alert-info i svg path,
.alert-info .ki-duotone svg,
.alert-info .ki-duotone svg path,
.notification-info .icon svg,
.notification-info .icon svg path {
    fill: #034167 !important;
    color: #034167 !important;
}

.alert-primary {
    background: rgba(10, 90, 133, 0.04) !important;
    border: none !important;
    border-left: 4px solid #0A5A85 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    color: #034167 !important;
}

.alert-primary .title,
.alert-primary h4,
.alert-primary .alert-heading {
    font-weight: 600;
    color: #034167 !important;
}

.alert-primary .text,
.alert-primary p,
.alert-primary span:not(.icon):not(.title):not(h4):not(.alert-heading) {
    color: #0A5A85 !important;
}

/* Style pour les icônes dans les alertes primary - seulement si elles ont la classe .icon */
.alert-primary .icon {
    background: rgba(10, 90, 133, 0.1) !important;
    color: #034167 !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 6px;
}

/* Pour les autres icônes dans les alertes primary, seulement la couleur */
.alert-primary i,
.alert-primary .ki-duotone {
    color: #034167 !important;
}

/* Cibler les éléments SVG à l'intérieur des icônes primary */
.alert-primary .icon svg,
.alert-primary .icon svg path,
.alert-primary .icon svg circle,
.alert-primary .icon svg rect,
.alert-primary .icon svg polygon,
.alert-primary i svg,
.alert-primary i svg path,
.alert-primary .ki-duotone svg,
.alert-primary .ki-duotone svg path {
    fill: #034167 !important;
    color: #034167 !important;
}

/* Variante avec bordure pointillée */
.notification-info.border-dashed,
.alert-info.border-dashed {
    background: rgba(10, 90, 133, 0.06) !important;
    border: 1px dashed rgba(10, 90, 133, 0.2) !important;
    border-left: none !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
}

/* Mapping pour les blocs .notice (Metronic) */
.notice.bg-light-primary.border-primary.border.border-dashed,
.notice.bg-light-primary.border-primary.border-dashed {
    background: rgba(10, 90, 133, 0.04) !important;
    border: 1px dashed rgba(10, 90, 133, 0.2) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    color: #034167 !important;
}

/* Forcer la couleur pour les conteneurs d'icônes SVG dans les blocs notice */
.notice.bg-light-primary.border-primary .svg-icon,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon,
.notice.bg-light-primary.border-primary .svg-icon-primary,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary {
    color: #034167 !important;
}

.notice.bg-light-primary.border-primary.border.border-dashed h4,
.notice.bg-light-primary.border-primary.border-dashed h4,
.notice.bg-light-primary.border-primary.border.border-dashed .fw-semibold h4,
.notice.bg-light-primary.border-primary.border-dashed .fw-semibold h4 {
    font-weight: 600;
    color: #034167 !important;
}

.notice.bg-light-primary.border-primary.border.border-dashed .text-gray-700,
.notice.bg-light-primary.border-primary.border-dashed .text-gray-700,
.notice.bg-light-primary.border-primary.border.border-dashed .fs-6,
.notice.bg-light-primary.border-primary.border-dashed .fs-6 {
    color: #0A5A85 !important;
}

/* Ne pas forcer le positionnement des icônes dans les blocs notice - garder le style original */
.notice.bg-light-primary.border-primary.border.border-dashed .svg-icon,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon,
.notice.bg-light-primary.border-primary.border.border-dashed i,
.notice.bg-light-primary.border-primary.border-dashed i,
.notice.bg-light-primary.border-primary.border.border-dashed .ki-duotone,
.notice.bg-light-primary.border-primary.border-dashed .ki-duotone {
    color: #034167 !important;
}

.notice.bg-light-primary.border-primary.border.border-dashed .svg-icon svg,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg {
    width: 20px;
    height: 20px;
}

/* Cibler les éléments SVG à l'intérieur des icônes .notice */
.notice.bg-light-primary.border-primary.border.border-dashed .svg-icon svg path,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg path,
.notice.bg-light-primary.border-primary.border.border-dashed .svg-icon svg circle,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg circle,
.notice.bg-light-primary.border-primary.border.border-dashed .svg-icon svg rect,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg rect,
.notice.bg-light-primary.border-primary.border.border-dashed .svg-icon svg polygon,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg polygon,
.notice.bg-light-primary.border-primary.border.border-dashed i svg path,
.notice.bg-light-primary.border-primary.border-dashed i svg path,
.notice.bg-light-primary.border-primary.border.border-dashed .ki-duotone svg path,
.notice.bg-light-primary.border-primary.border-dashed .ki-duotone svg path {
    fill: #034167 !important;
    stroke: #034167 !important;
    color: #034167 !important;
}

/* Cibler spécifiquement les icônes SVG avec classe svg-icon-primary - PRIORITÉ MAXIMALE */
/* Surcharger la règle du bundle: .svg-icon.svg-icon-primary { color: var(--bs-text-primary); } */
span.svg-icon-primary,
.svg-icon.svg-icon-primary,
span.svg-icon.svg-icon-primary,
.svg-icon-primary,
span.svg-icon.svg-icon-2tx.svg-icon-primary {
    color: #034167 !important;
}

span.svg-icon-primary svg,
.svg-icon.svg-icon-primary svg,
span.svg-icon.svg-icon-primary svg,
.svg-icon-primary svg,
span.svg-icon.svg-icon-2tx.svg-icon-primary svg {
    color: #034167 !important;
}

/* Forcer fill sur TOUS les path, même avec fill="currentColor" */
span.svg-icon-primary svg path,
.svg-icon.svg-icon-primary svg path,
span.svg-icon.svg-icon-primary svg path,
span.svg-icon-primary path,
.svg-icon.svg-icon-primary path,
span.svg-icon.svg-icon-primary path,
.svg-icon-primary svg path,
span.svg-icon.svg-icon-2tx.svg-icon-primary svg path {
    fill: #034167 !important;
    stroke: #034167 !important;
    color: #034167 !important;
}

span.svg-icon-primary svg circle,
.svg-icon.svg-icon-primary svg circle,
span.svg-icon.svg-icon-primary svg circle,
span.svg-icon-primary svg rect,
.svg-icon.svg-icon-primary svg rect,
span.svg-icon.svg-icon-primary svg rect,
span.svg-icon-primary svg polygon,
.svg-icon.svg-icon-primary svg polygon,
span.svg-icon.svg-icon-primary svg polygon,
span.svg-icon-primary svg *,
.svg-icon.svg-icon-primary svg *,
span.svg-icon.svg-icon-primary svg *,
.svg-icon-primary svg *,
span.svg-icon.svg-icon-2tx.svg-icon-primary svg * {
    fill: #034167 !important;
    stroke: #034167 !important;
    color: #034167 !important;
}

/* Cibler les icônes dans les blocs notice avec svg-icon-primary */
.notice .svg-icon-primary,
.notice .svg-icon-primary svg,
.notice .svg-icon-primary svg path,
.notice .svg-icon-primary svg circle,
.notice .svg-icon-primary svg rect,
.notice .svg-icon-primary svg polygon,
.notice .svg-icon-primary svg * {
    fill: #034167 !important;
    stroke: #034167 !important;
    color: #034167 !important;
}

/* Forcer la couleur pour les SVG avec fill="currentColor" dans les blocs notice */
.notice.bg-light-primary.border-primary .svg-icon-primary svg[fill="currentColor"],
.notice.bg-light-primary.border-primary .svg-icon-primary svg path[fill="currentColor"],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary svg[fill="currentColor"],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary svg path[fill="currentColor"] {
    fill: #034167 !important;
    color: #034167 !important;
}

/* Cibler tous les éléments SVG dans les blocs notice avec border-primary */
.notice.bg-light-primary.border-primary svg path,
.notice.bg-light-primary.border-primary.border-dashed svg path,
.notice.bg-light-primary.border-primary svg path[fill="currentColor"],
.notice.bg-light-primary.border-primary.border-dashed svg path[fill="currentColor"] {
    fill: #034167 !important;
    color: #034167 !important;
}

/* Forcer la couleur pour TOUS les éléments SVG dans les blocs notice, y compris ceux avec currentColor */
.notice.bg-light-primary.border-primary svg,
.notice.bg-light-primary.border-primary.border-dashed svg,
.notice.bg-light-primary.border-primary .svg-icon svg,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg,
.notice.bg-light-primary.border-primary .svg-icon-primary svg,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary svg {
    color: #034167 !important;
}

/* Forcer fill sur tous les éléments enfants SVG */
.notice.bg-light-primary.border-primary svg *,
.notice.bg-light-primary.border-primary.border-dashed svg *,
.notice.bg-light-primary.border-primary .svg-icon svg *,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg *,
.notice.bg-light-primary.border-primary .svg-icon-primary svg *,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary svg * {
    fill: #034167 !important;
    stroke: #034167 !important;
    color: #034167 !important;
}

/* Cibler spécifiquement les path avec opacity (comme dans les SVG Metronic) */
.notice.bg-light-primary.border-primary svg path[opacity],
.notice.bg-light-primary.border-primary.border-dashed svg path[opacity],
.notice.bg-light-primary.border-primary .svg-icon svg path[opacity],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg path[opacity],
.notice.bg-light-primary.border-primary .svg-icon-primary svg path[opacity],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary svg path[opacity] {
    fill: #034167 !important;
}

/* Cibler les path sans opacity (éléments principaux de l'icône) */
.notice.bg-light-primary.border-primary svg path:not([opacity]),
.notice.bg-light-primary.border-primary.border-dashed svg path:not([opacity]),
.notice.bg-light-primary.border-primary .svg-icon svg path:not([opacity]),
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg path:not([opacity]),
.notice.bg-light-primary.border-primary .svg-icon-primary svg path:not([opacity]),
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary svg path:not([opacity]) {
    fill: #034167 !important;
}

/* RÈGLES ULTRA-SPÉCIFIQUES POUR FORCER LA COULEUR DES SVG */
/* Cibler TOUS les path SVG dans les blocs notice, peu importe les attributs */
.notice.bg-light-primary.border-primary svg path[fill],
.notice.bg-light-primary.border-primary.border-dashed svg path[fill],
.notice.bg-light-primary.border-primary .svg-icon svg path[fill],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg path[fill],
.notice.bg-light-primary.border-primary .svg-icon-primary svg path[fill],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary svg path[fill] {
    fill: #034167 !important;
}

/* Forcer la couleur même si fill="currentColor" est défini inline */
.notice.bg-light-primary.border-primary svg path[fill="currentColor"],
.notice.bg-light-primary.border-primary.border-dashed svg path[fill="currentColor"],
.notice.bg-light-primary.border-primary .svg-icon svg path[fill="currentColor"],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg path[fill="currentColor"],
.notice.bg-light-primary.border-primary .svg-icon-primary svg path[fill="currentColor"],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary svg path[fill="currentColor"] {
    fill: #034167 !important;
}

/* Cibler les SVG directement dans les blocs notice sans classes intermédiaires */
.notice.bg-light-primary.border-primary > svg,
.notice.bg-light-primary.border-primary.border-dashed > svg,
.notice.bg-light-primary.border-primary > span > svg,
.notice.bg-light-primary.border-primary.border-dashed > span > svg {
    color: #034167 !important;
}

.notice.bg-light-primary.border-primary > svg *,
.notice.bg-light-primary.border-primary.border-dashed > svg *,
.notice.bg-light-primary.border-primary > span > svg *,
.notice.bg-light-primary.border-primary.border-dashed > span > svg * {
    fill: #034167 !important;
    stroke: #034167 !important;
    color: #034167 !important;
}

/* Cibler spécifiquement les span.svg-icon dans les blocs notice */
.notice.bg-light-primary.border-primary span.svg-icon,
.notice.bg-light-primary.border-primary.border-dashed span.svg-icon {
    color: #034167 !important;
}

.notice.bg-light-primary.border-primary span.svg-icon svg,
.notice.bg-light-primary.border-primary.border-dashed span.svg-icon svg {
    color: #034167 !important;
}

.notice.bg-light-primary.border-primary span.svg-icon svg *,
.notice.bg-light-primary.border-primary.border-dashed span.svg-icon svg * {
    fill: #034167 !important;
    stroke: #034167 !important;
    color: #034167 !important;
}

/* RÈGLE ULTIME : Cibler TOUS les SVG et leurs enfants dans les blocs notice */
.notice.bg-light-primary.border-primary svg,
.notice.bg-light-primary.border-primary.border-dashed svg,
.notice.bg-light-primary.border-primary svg path,
.notice.bg-light-primary.border-primary.border-dashed svg path,
.notice.bg-light-primary.border-primary svg circle,
.notice.bg-light-primary.border-primary.border-dashed svg circle,
.notice.bg-light-primary.border-primary svg rect,
.notice.bg-light-primary.border-primary.border-dashed svg rect,
.notice.bg-light-primary.border-primary svg polygon,
.notice.bg-light-primary.border-primary.border-dashed svg polygon,
.notice.bg-light-primary.border-primary svg g,
.notice.bg-light-primary.border-primary.border-dashed svg g {
    color: #034167 !important;
}

.notice.bg-light-primary.border-primary svg path,
.notice.bg-light-primary.border-primary.border-dashed svg path,
.notice.bg-light-primary.border-primary svg circle,
.notice.bg-light-primary.border-primary.border-dashed svg circle,
.notice.bg-light-primary.border-primary svg rect,
.notice.bg-light-primary.border-primary.border-dashed svg rect,
.notice.bg-light-primary.border-primary svg polygon,
.notice.bg-light-primary.border-primary.border-dashed svg polygon,
.notice.bg-light-primary.border-primary svg g,
.notice.bg-light-primary.border-primary.border-dashed svg g,
.notice.bg-light-primary.border-primary svg g path,
.notice.bg-light-primary.border-primary.border-dashed svg g path {
    fill: #034167 !important;
    stroke: #034167 !important;
}

/* Forcer la couleur même sur les éléments avec des attributs inline */
.notice.bg-light-primary.border-primary [fill],
.notice.bg-light-primary.border-primary.border-dashed [fill],
.notice.bg-light-primary.border-primary [fill="currentColor"],
.notice.bg-light-primary.border-primary.border-dashed [fill="currentColor"],
.notice.bg-light-primary.border-primary svg [fill],
.notice.bg-light-primary.border-primary.border-dashed svg [fill],
.notice.bg-light-primary.border-primary svg [fill="currentColor"],
.notice.bg-light-primary.border-primary.border-dashed svg [fill="currentColor"],
.notice.bg-light-primary.border-primary .svg-icon [fill],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon [fill],
.notice.bg-light-primary.border-primary .svg-icon-primary [fill],
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary [fill] {
    fill: #034167 !important;
    color: #034167 !important;
}

/* RÈGLE ABSOLUE : Forcer la couleur sur TOUS les path SVG dans les blocs notice */
.notice.bg-light-primary.border-primary path,
.notice.bg-light-primary.border-primary.border-dashed path,
.notice.bg-light-primary.border-primary svg path,
.notice.bg-light-primary.border-primary.border-dashed svg path,
.notice.bg-light-primary.border-primary .svg-icon path,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon path,
.notice.bg-light-primary.border-primary .svg-icon-primary path,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary path,
.notice.bg-light-primary.border-primary .svg-icon svg path,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon svg path,
.notice.bg-light-primary.border-primary .svg-icon-primary svg path,
.notice.bg-light-primary.border-primary.border-dashed .svg-icon-primary svg path {
    fill: #034167 !important;
    stroke: #034167 !important;
    color: #034167 !important;
}

/* ============================================
   CARTES DE STATISTIQUES - Page Event List
   Style moderne avec bleu et vert
   ============================================ */

/* Définir les variables CSS pour les graphiques JavaScript */
.card.card-xl-stretch {
    /* Couleurs par statut */
    --color-all-events: #0A5A85;      /* Bleu primaire - Tous les événements */
    --color-upcoming: #31B089;         /* Vert teal - À venir */
    --color-ongoing: #F59E0B;          /* Orange/Amber - En cours */
    --color-completed: #64748B;        /* Gris bleuté de la charte - Terminés */
    
    --bs-success: #31B089;
    --bs-warning: #F59E0B;
    --bs-info: #64748B;
}

/* Surcharger --bs-text-primary pour éviter l'ancien bleu au hover */
.card.card-xl-stretch .card-header.bg-primary {
    --bs-text-primary: #0A5A85 !important;
}

.card.card-xl-stretch .card-header.bg-success {
    --bs-text-primary: #31B089 !important;
}

.card.card-xl-stretch .card-header.bg-warning {
    --bs-text-primary: #F59E0B !important;
}

.card.card-xl-stretch .card-header.bg-info {
    --bs-text-primary: #64748B !important;
}
    
    /* Style minimal et moins arrondi */
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    overflow: visible !important;
}

.card.card-xl-stretch .card-body {
    overflow: visible !important;
    padding-bottom: 0 !important;
}

.card.card-xl-stretch:hover {
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Carte 1 : Total des événements - Bleu primaire (#0A5A85) */
.card.card-xl-stretch .card-header.bg-primary {
    background: transparent !important;
    border: none !important;
    padding: 18px 20px !important;
    background: linear-gradient(to bottom, rgba(10, 90, 133, 0.05) 0%, transparent 100%) !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.card.card-xl-stretch .event-stats-chart.bg-primary {
    background: transparent !important;
    height: 100px !important;
}

.card.card-xl-stretch .bg-light-primary {
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid rgba(10, 90, 133, 0.1) !important;
    border-left: 3px solid #0A5A85 !important;
    box-shadow: none !important;
}

.card.card-xl-stretch .text-primary {
    color: #0A5A85 !important;
}

.card.card-xl-stretch .ki-duotone.text-primary {
    color: #0A5A85 !important;
}

/* Carte 2 : À venir - Vert teal (#31B089) */
.card.card-xl-stretch .card-header.bg-success {
    background: transparent !important;
    border: none !important;
    padding: 18px 20px !important;
    background: linear-gradient(to bottom, rgba(49, 176, 137, 0.05) 0%, transparent 100%) !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.card.card-xl-stretch .event-stats-chart.bg-success {
    background: transparent !important;
    height: 100px !important;
}

.card.card-xl-stretch .bg-light-success {
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid rgba(49, 176, 137, 0.1) !important;
    border-left: 3px solid #31B089 !important;
    box-shadow: none !important;
}

.card.card-xl-stretch .text-success {
    color: #31B089 !important;
    font-weight: 600 !important;
}

.card.card-xl-stretch .ki-duotone.text-success {
    color: #31B089 !important;
}

/* Carte 3 : En cours - Orange/Amber (#F59E0B) */
.card.card-xl-stretch .card-header.bg-warning {
    background: transparent !important;
    border: none !important;
    padding: 18px 20px !important;
    background: linear-gradient(to bottom, rgba(245, 158, 11, 0.05) 0%, transparent 100%) !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.card.card-xl-stretch .event-stats-chart.bg-warning {
    background: transparent !important;
    height: 100px !important;
}

.card.card-xl-stretch .bg-light-warning {
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid rgba(245, 158, 11, 0.1) !important;
    border-left: 3px solid #F59E0B !important;
    box-shadow: none !important;
}

.card.card-xl-stretch .text-warning {
    color: #F59E0B !important;
    font-weight: 600 !important;
}

.card.card-xl-stretch .ki-duotone.text-warning {
    color: #F59E0B !important;
}

/* Carte 4 : Terminés - Gris bleuté de la charte (#64748B) */
.card.card-xl-stretch .card-header.bg-info {
    background: transparent !important;
    border: none !important;
    padding: 18px 20px !important;
    background: linear-gradient(to bottom, rgba(100, 116, 139, 0.05) 0%, transparent 100%) !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.card.card-xl-stretch .event-stats-chart.bg-info {
    background: transparent !important;
    height: 100px !important;
}

.card.card-xl-stretch .bg-light-info {
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid rgba(107, 114, 128, 0.1) !important;
    border-left: 3px solid #6B7280 !important;
    box-shadow: none !important;
}

.card.card-xl-stretch .text-info {
    color: #64748B !important;
    font-weight: 600 !important;
}

.card.card-xl-stretch .ki-duotone.text-info {
    color: #6B7280 !important;
}

/* Style Flat Minimal des titres et nombres */
.card.card-xl-stretch .card-title {
    color: #1f2937 !important;
    text-transform: none !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* Titres avec couleurs de la charte - Tous les événements */
.card.card-xl-stretch .card-header.bg-primary .card-title,
.card.card-xl-stretch .card-header.bg-primary .card-title:hover,
.card.card-xl-stretch .card-header.bg-primary .card-title:focus,
.card.card-xl-stretch .card-header.bg-primary .card-title:active,
.card.card-xl-stretch .card-header.bg-primary a.card-title,
.card.card-xl-stretch .card-header.bg-primary a.card-title:hover,
.card.card-xl-stretch .card-header.bg-primary a.card-title:focus,
.card.card-xl-stretch .card-header.bg-primary a.card-title:active,
.card.card-xl-stretch .card-header.bg-primary a.card-title:visited,
.card.card-xl-stretch .card-header.bg-primary .link-primary,
.card.card-xl-stretch .card-header.bg-primary .link-primary:hover,
.card.card-xl-stretch .card-header.bg-primary .text-primary,
.card.card-xl-stretch .card-header.bg-primary .text-primary:hover,
.card.card-xl-stretch .card-header.bg-primary a.text-primary,
.card.card-xl-stretch .card-header.bg-primary a.text-primary:hover,
.card.card-xl-stretch .card-header.bg-primary .text-hover-primary:hover,
.card.card-xl-stretch .card-header.bg-primary a.text-hover-primary:hover,
.card.card-xl-stretch .card-header.bg-primary .card-title.text-white,
.card.card-xl-stretch .card-header.bg-primary .card-title.text-white:hover,
.card.card-xl-stretch .card-header.bg-primary a.card-title.text-white,
.card.card-xl-stretch .card-header.bg-primary a.card-title.text-white:hover {
    color: #0A5A85 !important;
    font-weight: 700 !important;
}

/* Titres avec couleurs de la charte - À venir */
.card.card-xl-stretch .card-header.bg-success .card-title,
.card.card-xl-stretch .card-header.bg-success .card-title:hover,
.card.card-xl-stretch .card-header.bg-success .card-title:focus,
.card.card-xl-stretch .card-header.bg-success .card-title:active,
.card.card-xl-stretch .card-header.bg-success a.card-title,
.card.card-xl-stretch .card-header.bg-success a.card-title:hover,
.card.card-xl-stretch .card-header.bg-success a.card-title:focus,
.card.card-xl-stretch .card-header.bg-success a.card-title:active,
.card.card-xl-stretch .card-header.bg-success a.card-title:visited,
.card.card-xl-stretch .card-header.bg-success .link-success,
.card.card-xl-stretch .card-header.bg-success .link-success:hover,
.card.card-xl-stretch .card-header.bg-success .text-success,
.card.card-xl-stretch .card-header.bg-success .text-success:hover,
.card.card-xl-stretch .card-header.bg-success a.text-success,
.card.card-xl-stretch .card-header.bg-success a.text-success:hover,
.card.card-xl-stretch .card-header.bg-success .text-hover-success:hover,
.card.card-xl-stretch .card-header.bg-success a.text-hover-success:hover,
.card.card-xl-stretch .card-header.bg-success .card-title.text-white,
.card.card-xl-stretch .card-header.bg-success .card-title.text-white:hover,
.card.card-xl-stretch .card-header.bg-success a.card-title.text-white,
.card.card-xl-stretch .card-header.bg-success a.card-title.text-white:hover {
    color: #31B089 !important;
    font-weight: 700 !important;
}

/* Titres avec couleurs de la charte - En cours */
.card.card-xl-stretch .card-header.bg-warning .card-title,
.card.card-xl-stretch .card-header.bg-warning .card-title:hover,
.card.card-xl-stretch .card-header.bg-warning .card-title:focus,
.card.card-xl-stretch .card-header.bg-warning .card-title:active,
.card.card-xl-stretch .card-header.bg-warning a.card-title,
.card.card-xl-stretch .card-header.bg-warning a.card-title:hover,
.card.card-xl-stretch .card-header.bg-warning a.card-title:focus,
.card.card-xl-stretch .card-header.bg-warning a.card-title:active,
.card.card-xl-stretch .card-header.bg-warning a.card-title:visited,
.card.card-xl-stretch .card-header.bg-warning .link-warning,
.card.card-xl-stretch .card-header.bg-warning .link-warning:hover,
.card.card-xl-stretch .card-header.bg-warning .text-warning,
.card.card-xl-stretch .card-header.bg-warning .text-warning:hover,
.card.card-xl-stretch .card-header.bg-warning a.text-warning,
.card.card-xl-stretch .card-header.bg-warning a.text-warning:hover,
.card.card-xl-stretch .card-header.bg-warning .text-hover-warning:hover,
.card.card-xl-stretch .card-header.bg-warning a.text-hover-warning:hover,
.card.card-xl-stretch .card-header.bg-warning .card-title.text-white,
.card.card-xl-stretch .card-header.bg-warning .card-title.text-white:hover,
.card.card-xl-stretch .card-header.bg-warning a.card-title.text-white,
.card.card-xl-stretch .card-header.bg-warning a.card-title.text-white:hover {
    color: #F59E0B !important;
    font-weight: 700 !important;
}

/* Titres avec couleurs de la charte - Terminés */
.card.card-xl-stretch .card-header.bg-info .card-title,
.card.card-xl-stretch .card-header.bg-info .card-title:hover,
.card.card-xl-stretch .card-header.bg-info .card-title:focus,
.card.card-xl-stretch .card-header.bg-info .card-title:active,
.card.card-xl-stretch .card-header.bg-info a.card-title,
.card.card-xl-stretch .card-header.bg-info a.card-title:hover,
.card.card-xl-stretch .card-header.bg-info a.card-title:focus,
.card.card-xl-stretch .card-header.bg-info a.card-title:active,
.card.card-xl-stretch .card-header.bg-info a.card-title:visited,
.card.card-xl-stretch .card-header.bg-info .link-info,
.card.card-xl-stretch .card-header.bg-info .link-info:hover,
.card.card-xl-stretch .card-header.bg-info .text-info,
.card.card-xl-stretch .card-header.bg-info .text-info:hover,
.card.card-xl-stretch .card-header.bg-info a.text-info,
.card.card-xl-stretch .card-header.bg-info a.text-info:hover,
.card.card-xl-stretch .card-header.bg-info .text-hover-info:hover,
.card.card-xl-stretch .card-header.bg-info a.text-hover-info:hover,
.card.card-xl-stretch .card-header.bg-info .card-title.text-white,
.card.card-xl-stretch .card-header.bg-info .card-title.text-white:hover,
.card.card-xl-stretch .card-header.bg-info a.card-title.text-white,
.card.card-xl-stretch .card-header.bg-info a.card-title.text-white:hover {
    color: #64748B !important;
    font-weight: 700 !important;
}

.card.card-xl-stretch .fw-bold.fs-1 {
    font-size: 2.5rem !important;
    color: #111827 !important;
    font-weight: 700 !important;
}

.card.card-xl-stretch .fw-semibold.fs-6 {
    color: #6b7280 !important;
    text-transform: none !important;
    font-size: 0.875rem !important;
    opacity: 1 !important;
}

/* Style Flat Minimal des icônes */
.card.card-xl-stretch .ki-duotone {
    filter: none !important;
    opacity: 0.9 !important;
}

/* ============================================
   VARIANTE ALTERNATIVE - Style Glassmorphism
   Utiliser la classe .card-style-variant sur les cartes pour activer
   ============================================ */

.card.card-xl-stretch.card-style-variant {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.card.card-xl-stretch.card-style-variant .card-header.bg-primary,
.card.card-xl-stretch.card-style-variant .card-header.bg-success,
.card.card-xl-stretch.card-style-variant .card-header.bg-warning,
.card.card-xl-stretch.card-style-variant .card-header.bg-info {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(5px) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.card.card-xl-stretch.card-style-variant .event-stats-chart {
    background: transparent !important;
    opacity: 0.6 !important;
}

.card.card-xl-stretch.card-style-variant .bg-light-primary,
.card.card-xl-stretch.card-style-variant .bg-light-success,
.card.card-xl-stretch.card-style-variant .bg-light-warning,
.card.card-xl-stretch.card-style-variant .bg-light-info {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-left: 4px solid !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.card.card-xl-stretch.card-style-variant .bg-light-primary {
    border-left-color: #0A5A85 !important;
}

.card.card-xl-stretch.card-style-variant .bg-light-success {
    border-left-color: #31B089 !important;
}

.card.card-xl-stretch.card-style-variant .bg-light-warning {
    border-left-color: #0A5A85 !important;
}

.card.card-xl-stretch.card-style-variant .bg-light-info {
    border-left-color: #31B089 !important;
}

/* ============================================
   VARIANTE ALTERNATIVE - Style Flat Minimal
   ============================================ */

.card.card-xl-stretch.card-style-flat {
    border-radius: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
}

.card.card-xl-stretch.card-style-flat:hover {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border-color: #d1d5db !important;
}

.card.card-xl-stretch.card-style-flat .card-header.bg-primary,
.card.card-xl-stretch.card-style-flat .card-header.bg-success,
.card.card-xl-stretch.card-style-flat .card-header.bg-warning,
.card.card-xl-stretch.card-style-flat .card-header.bg-info {
    background: transparent !important;
    border-bottom: 4px solid !important;
    padding: 20px 24px !important;
}

.card.card-xl-stretch.card-style-flat .card-header.bg-primary {
    border-bottom-color: #0A5A85 !important;
    border-bottom-width: 4px !important;
    background: linear-gradient(to bottom, rgba(10, 90, 133, 0.08) 0%, transparent 100%) !important;
}

.card.card-xl-stretch.card-style-flat .card-header.bg-success {
    border-bottom-color: #31B089 !important;
    border-bottom-width: 4px !important;
    background: linear-gradient(to bottom, rgba(49, 176, 137, 0.08) 0%, transparent 100%) !important;
}

.card.card-xl-stretch.card-style-flat .card-header.bg-warning {
    border-bottom-color: #0A5A85 !important;
    border-bottom-width: 4px !important;
    background: linear-gradient(to bottom, rgba(10, 90, 133, 0.08) 0%, transparent 100%) !important;
}

.card.card-xl-stretch.card-style-flat .card-header.bg-info {
    border-bottom-color: #31B089 !important;
    border-bottom-width: 4px !important;
    background: linear-gradient(to bottom, rgba(49, 176, 137, 0.08) 0%, transparent 100%) !important;
}

/* Titres avec couleurs vives - Style flat */
.card.card-xl-stretch.card-style-flat .card-header.bg-primary .card-title {
    color: #0A5A85 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

.card.card-xl-stretch.card-style-flat .card-header.bg-success .card-title {
    color: #31B089 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

.card.card-xl-stretch.card-style-flat .card-header.bg-warning .card-title {
    color: #0A5A85 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

.card.card-xl-stretch.card-style-flat .card-header.bg-info .card-title {
    color: #31B089 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

.card.card-xl-stretch.card-style-flat .card-title {
    color: #1f2937 !important;
    text-transform: none !important;
    font-size: 0.875rem !important;
}

.card.card-xl-stretch.card-style-flat .event-stats-chart {
    background: transparent !important;
    height: 100px !important;
}

.card.card-xl-stretch.card-style-flat .card-p {
    margin-top: 0 !important;
    padding: 20px !important;
}

.card.card-xl-stretch.card-style-flat .bg-light-primary,
.card.card-xl-stretch.card-style-flat .bg-light-success,
.card.card-xl-stretch.card-style-flat .bg-light-warning,
.card.card-xl-stretch.card-style-flat .bg-light-info {
    background: #f9fafb !important;
    border-radius: 0 !important;
    border: none !important;
    border-left: 3px solid !important;
    box-shadow: none !important;
}

.card.card-xl-stretch.card-style-flat .bg-light-primary {
    border-left-color: #0A5A85 !important;
}

.card.card-xl-stretch.card-style-flat .bg-light-success {
    border-left-color: #31B089 !important;
}

.card.card-xl-stretch.card-style-flat .bg-light-warning {
    border-left-color: #0A5A85 !important;
}

.card.card-xl-stretch.card-style-flat .bg-light-info {
    border-left-color: #31B089 !important;
}

.card.card-xl-stretch.card-style-flat .fw-bold.fs-1 {
    color: #111827 !important;
}

.card.card-xl-stretch.card-style-flat .fw-semibold.fs-6 {
    color: #6b7280 !important;
    text-transform: none !important;
    opacity: 1 !important;
}

/* Positionner le bloc blanc - Style minimal */
.card.card-xl-stretch .card-p {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 20 !important;
    padding: 18px 20px !important;
}

/* Le graphique reste en arrière-plan */
.card.card-xl-stretch .event-stats-chart {
    position: relative !important;
    z-index: 1 !important;
}

/* Le header coloré reste en arrière-plan */
.card.card-xl-stretch .card-header {
    position: relative !important;
    z-index: 1 !important;
}

.card.card-xl-stretch .card-p .rounded-2 {
    margin-bottom: 0 !important;
    padding: 18px 20px !important;
    position: relative !important;
    z-index: 21 !important;
    box-shadow: none !important;
    border-radius: 6px !important;
}

/* Bloc blanc - Style minimal */
.card.card-xl-stretch .bg-light-primary,
.card.card-xl-stretch .bg-light-success,
.card.card-xl-stretch .bg-light-warning,
.card.card-xl-stretch .bg-light-info {
    min-height: auto !important;
    padding: 18px 20px !important;
    position: relative !important;
    z-index: 21 !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* ============================================
   VARIANTE ALTERNATIVE - Style Flat Moderne
   Décommenter cette section pour activer
   ============================================ */

/*
.card.card-xl-stretch {
    --bs-success: #31B089;
    --bs-warning: #0A5A85;
    --bs-info: #034167;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 2px solid #f0f0f0 !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease !important;
}

.card.card-xl-stretch:hover {
    transform: none !important;
    border-color: #0A5A85 !important;
    box-shadow: 0 0 0 4px rgba(10, 90, 133, 0.05) !important;
}

.card.card-xl-stretch .card-header.bg-primary,
.card.card-xl-stretch .card-header.bg-success,
.card.card-xl-stretch .card-header.bg-warning,
.card.card-xl-stretch .card-header.bg-info {
    background: transparent !important;
    border-bottom: 3px solid !important;
    padding: 16px 20px !important;
}

.card.card-xl-stretch .card-header.bg-primary {
    border-bottom-color: #0A5A85 !important;
}

.card.card-xl-stretch .card-header.bg-success {
    border-bottom-color: #31B089 !important;
}

.card.card-xl-stretch .card-header.bg-warning {
    border-bottom-color: #0A5A85 !important;
}

.card.card-xl-stretch .card-header.bg-info {
    border-bottom-color: #31B089 !important;
}

.card.card-xl-stretch .event-stats-chart {
    background: transparent !important;
    height: 120px !important;
}

.card.card-xl-stretch .card-p {
    margin-top: 0 !important;
    padding: 20px !important;
}

.card.card-xl-stretch .bg-light-primary,
.card.card-xl-stretch .bg-light-success,
.card.card-xl-stretch .bg-light-warning,
.card.card-xl-stretch .bg-light-info {
    background: #fafafa !important;
    border-radius: 0 !important;
    border: none !important;
    border-left: 4px solid !important;
    box-shadow: none !important;
}

.card.card-xl-stretch .bg-light-primary {
    border-left-color: #0A5A85 !important;
}

.card.card-xl-stretch .bg-light-success {
    border-left-color: #31B089 !important;
}

.card.card-xl-stretch .bg-light-warning {
    border-left-color: #0A5A85 !important;
}

.card.card-xl-stretch .bg-light-info {
    border-left-color: #31B089 !important;
}

.card.card-xl-stretch .card-title {
    color: #333 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.card.card-xl-stretch .fw-bold.fs-1 {
    font-size: 2.5rem !important;
    color: #1a1a1a !important;
}

.card.card-xl-stretch .fw-semibold.fs-6 {
    color: #666 !important;
    text-transform: none !important;
    font-size: 0.875rem !important;
}
*/