/*
 * ============================================================
 *  YELIAFRICA — Brand CSS Global (Backoffice)
 *  Entreprise solaire — Côte d'Ivoire
 *  Design System : Énergie · Bleu · Soleil
 *  Override AdminLTE / Bootstrap — 2026
 * ============================================================
 */

/* ============================================================
   1. VARIABLES CSS GLOBALES
============================================================ */
:root {
    --yeli-soleil:       #F5C218;
    --yeli-soleil-light: #FDE97C;
    --yeli-soleil-dark:  #D4A80E;
    --yeli-bleu:         #1B4B8A;
    --yeli-bleu-light:   #2A6AC4;
    --yeli-bleu-dark:    #0D2856;
    --yeli-nuit:         #0D2856;
    --yeli-blanc:        #FFFFFF;
    --yeli-cream:        #F4F7FC;
    --yeli-muted:        #6B7C99;
    --yeli-border:       #D6E4F7;
    --yeli-text:         #1A2B4A;
    --yeli-error:        #DC3545;
    --yeli-success:      #28A745;
    --yeli-warning:      #F5C218;
    --yeli-info:         #17A2B8;

    /* Sidebar */
    --yeli-sidebar-bg:          #0D2856;
    --yeli-sidebar-item:        rgba(255,255,255,0.65);
    --yeli-sidebar-active-bg:   rgba(245,194,24,0.12);
    --yeli-sidebar-active-text: #F5C218;
    --yeli-sidebar-hover-bg:    rgba(245,194,24,0.07);

    /* Header */
    --yeli-header-bg:     #0D2856;
    --yeli-header-border: rgba(245,194,24,0.18);
}

/* ============================================================
   2. TYPOGRAPHIE GLOBALE
============================================================ */
body,
.content-wrapper,
.main-sidebar,
.main-header {
    font-family: 'Poppins', system-ui, sans-serif !important;
}

.box-title,
.content-header h1,
.box-header .box-title,
.modal-title {
    font-family: 'Nunito', 'Poppins', sans-serif !important;
    font-weight: 700 !important;
}

/* Tailles headings admin */
.content-wrapper h1 { font-size: 1.3rem  !important; }
.content-wrapper h2 { font-size: 1.15rem !important; }
.content-wrapper h3 { font-size: 1rem    !important; }
.content-wrapper h4 { font-size: 0.9rem  !important; }

/* ============================================================
   3. HEADER / NAVBAR PRINCIPALE
============================================================ */
.main-header,
.skin-black .main-header,
.skin-black-light .main-header,
.skin-blue .main-header,
.skin-blue-light .main-header {
    background: var(--yeli-header-bg) !important;
    border-bottom: 2px solid var(--yeli-soleil) !important;
    box-shadow: 0 2px 10px rgba(13,40,86,0.4) !important;
}

.main-header .navbar,
.skin-black .main-header .navbar,
.skin-blue .main-header .navbar {
    background: transparent !important;
    border: none !important;
}

/* Logo dans le header */
.main-header .logo,
.skin-black .main-header .logo,
.skin-blue .main-header .logo {
    background: rgba(0,0,0,0.2) !important;
    border-right: 1px solid var(--yeli-header-border) !important;
    color: var(--yeli-soleil) !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

.main-header .logo:hover,
.skin-black .main-header .logo:hover {
    background: rgba(0,0,0,0.3) !important;
}

/* Liens header */
.main-header .navbar .nav > li > a,
.skin-black .main-header .navbar .nav > li > a {
    color: rgba(255,255,255,0.75) !important;
    transition: color 0.2s !important;
}

.main-header .navbar .nav > li > a:hover,
.skin-black .main-header .navbar .nav > li > a:hover {
    color: var(--yeli-soleil) !important;
    background: rgba(245,194,24,0.08) !important;
}

/* Sidebar toggle */
.main-header .navbar .sidebar-toggle,
.skin-black .main-header .navbar .sidebar-toggle {
    color: rgba(255,255,255,0.65) !important;
}

.main-header .navbar .sidebar-toggle:hover,
.skin-black .main-header .navbar .sidebar-toggle:hover {
    color: var(--yeli-soleil) !important;
    background: rgba(245,194,24,0.08) !important;
}

/* Notification badges */
.main-header .navbar .nav > li > .label,
.main-header .navbar .nav > li > a > .label {
    background-color: var(--yeli-soleil) !important;
    color: var(--yeli-nuit) !important;
    font-weight: 700 !important;
}

/* ============================================================
   4. SIDEBAR
============================================================ */
.main-sidebar,
.left-side,
.skin-black .main-sidebar,
.skin-blue .main-sidebar {
    background: var(--yeli-sidebar-bg) !important;
    border-right: 1px solid rgba(245,194,24,0.1) !important;
    box-shadow: 2px 0 12px rgba(13,40,86,0.35) !important;
}

/* En-têtes de section sidebar */
.sidebar-menu > .header,
.sidebar > .user-panel,
.skin-black .sidebar-menu > .header {
    color: rgba(245,194,24,0.5) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(245,194,24,0.08) !important;
    font-size: 0.63rem !important;
    letter-spacing: 2.5px !important;
    font-weight: 700 !important;
}

/* Items sidebar */
.sidebar-menu > li > a,
.skin-black .sidebar-menu > li > a {
    color: var(--yeli-sidebar-item) !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s !important;
}

.sidebar-menu > li > a:hover,
.skin-black .sidebar-menu > li > a:hover {
    color: #fff !important;
    background: var(--yeli-sidebar-hover-bg) !important;
    border-left-color: var(--yeli-soleil) !important;
}

/* Item actif */
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a,
.skin-black .sidebar-menu > li.active > a {
    color: var(--yeli-sidebar-active-text) !important;
    background: var(--yeli-sidebar-active-bg) !important;
    border-left-color: var(--yeli-soleil) !important;
    font-weight: 600 !important;
}

/* Icônes sidebar */
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .far,
.sidebar-menu > li > a > .fab {
    color: rgba(245,194,24,0.7) !important;
    margin-right: 8px !important;
}

.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .fas {
    color: var(--yeli-soleil) !important;
}

/* Treeview sous-menus */
.treeview-menu {
    background: rgba(0,0,0,0.18) !important;
}

.treeview-menu > li > a {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.79rem !important;
    padding-left: 30px !important;
    font-weight: 400 !important;
}

.treeview-menu > li > a:hover,
.treeview-menu > li.active > a {
    color: var(--yeli-soleil-light) !important;
    background: transparent !important;
}

/* Scrollbar sidebar */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(245,194,24,0.25); border-radius: 2px; }

/* ============================================================
   5. CONTENU — WRAPPER PRINCIPAL
============================================================ */
.content-wrapper {
    background: var(--yeli-cream) !important;
}

/* En-tête des pages */
.content-header {
    padding: 14px 20px 8px !important;
    border-bottom: 1px solid var(--yeli-border) !important;
    background: #fff !important;
}

.content-header h1 {
    font-size: 1.15rem !important;
    color: var(--yeli-nuit) !important;
    font-weight: 700 !important;
    font-family: 'Nunito', sans-serif !important;
}

.content-header h1 small {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.75rem !important;
    color: var(--yeli-muted) !important;
}

/* Breadcrumbs */
.breadcrumb {
    background: transparent !important;
    padding: 4px 0 !important;
}

.breadcrumb > li + li::before {
    color: var(--yeli-bleu) !important;
}

.breadcrumb > .active {
    color: var(--yeli-bleu) !important;
}

/* ============================================================
   6. BOXES / CARDS (AdminLTE)
============================================================ */
.box {
    border-top: 3px solid var(--yeli-bleu) !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 6px rgba(27,75,138,0.08) !important;
}

.box-header {
    border-bottom: 1px solid var(--yeli-border) !important;
    background: #fff !important;
    color: var(--yeli-text) !important;
}

.box-header .box-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--yeli-nuit) !important;
    font-family: 'Nunito', sans-serif !important;
}

.box-body {
    background: #fff !important;
}

.box-footer {
    background: var(--yeli-cream) !important;
    border-top: 1px solid var(--yeli-border) !important;
}

/* Solid box override — garder les titres lisibles */
.box.box-solid > .box-header {
    background: var(--yeli-bleu) !important;
    border-bottom-color: var(--yeli-bleu-dark) !important;
}

.box.box-solid > .box-header .box-title {
    color: #fff !important;
}

.box.box-solid > .box-header .box-tools .btn {
    color: rgba(255,255,255,0.8) !important;
}

/* Fix : double box-header imbriqué (ex: profil utilisateur) dans box-solid
   Le .box-header général reçoit background:#fff qui rend le titre (color:#fff) invisible */
.box.box-solid > .box-header > .box-header {
    background: transparent !important;
}
.box.box-solid > .box-header > .box-header .box-title {
    color: #fff !important;
}

/* Small boxes (stats) */
.small-box {
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(13,40,86,0.1) !important;
}

.small-box > .inner {
    padding: 14px !important;
}

.small-box h3 {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
}

.small-box:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(13,40,86,0.15) !important;
    transition: all 0.25s !important;
}

/* ============================================================
   7. BOUTONS
============================================================ */
.btn {
    border-radius: 4px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.3px !important;
    transition: all 0.22s !important;
}

.btn-primary {
    background: var(--yeli-bleu) !important;
    border-color: var(--yeli-bleu-dark) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--yeli-bleu-dark) !important;
    border-color: var(--yeli-nuit) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(27,75,138,0.35) !important;
}

.btn-success {
    background: var(--yeli-success) !important;
    border-color: #1e7e34 !important;
    color: #fff !important;
}

.btn-warning {
    background: var(--yeli-soleil) !important;
    border-color: var(--yeli-soleil-dark) !important;
    color: var(--yeli-nuit) !important;
    font-weight: 700 !important;
}

.btn-warning:hover {
    background: var(--yeli-soleil-dark) !important;
    border-color: #b8920c !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--yeli-error) !important;
    border-color: #bd2130 !important;
    color: #fff !important;
}

.btn-default {
    background: #fff !important;
    border-color: var(--yeli-border) !important;
    color: var(--yeli-text) !important;
}

.btn-default:hover {
    background: var(--yeli-cream) !important;
    border-color: #b0c8e8 !important;
    color: var(--yeli-bleu) !important;
}

.btn-info {
    background: var(--yeli-info) !important;
    border-color: #117a8b !important;
    color: #fff !important;
}

/* ============================================================
   8. FORMULAIRES
============================================================ */
.form-control {
    border: 1.5px solid var(--yeli-border) !important;
    border-radius: 4px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.85rem !important;
    color: var(--yeli-text) !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-control:focus {
    border-color: var(--yeli-bleu-light) !important;
    box-shadow: 0 0 0 3px rgba(27,75,138,0.1) !important;
    background: #fff !important;
    outline: none !important;
}

.form-control::placeholder {
    color: #aab8cc !important;
    font-weight: 400 !important;
}

.control-label,
label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--yeli-text) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single {
    border: 1.5px solid var(--yeli-border) !important;
    border-radius: 4px !important;
    background: #fff !important;
    height: 34px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--yeli-bleu-light) !important;
    box-shadow: 0 0 0 3px rgba(27,75,138,0.1) !important;
}

.select2-container--default .select2-results__option--highlighted {
    background: var(--yeli-bleu) !important;
}

/* ============================================================
   9. TABLEAUX (DataTables)
============================================================ */
.table > thead > tr > th {
    background: var(--yeli-bleu) !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid var(--yeli-bleu-dark) !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
}

.table > thead > tr > th a,
.table > thead > tr > th a:hover {
    color: #fff !important;
}

/* Tri DataTables sur les th */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: rgba(255,255,255,0.55) !important;
}

.table > tbody > tr > td {
    font-size: 0.83rem !important;
    color: var(--yeli-text) !important;
    vertical-align: middle !important;
    border-color: var(--yeli-border) !important;
    padding: 8px 12px !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(244,247,252,0.7) !important;
}

.table > tbody > tr:hover > td {
    background: rgba(27,75,138,0.04) !important;
}

/* DataTables wrapper */
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--yeli-border) !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.82rem !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--yeli-bleu-light) !important;
    box-shadow: 0 0 0 2px rgba(27,75,138,0.1) !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--yeli-bleu) !important;
    color: #fff !important;
    border-color: var(--yeli-bleu-dark) !important;
    border-radius: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--yeli-bleu-light) !important;
    color: #fff !important;
    border-color: var(--yeli-bleu) !important;
    border-radius: 4px !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.8rem !important;
    color: var(--yeli-muted) !important;
}

/* ============================================================
   10. BADGES & LABELS
============================================================ */
.badge,
.label {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.68rem !important;
    border-radius: 3px !important;
}

.badge-primary,
.label-primary {
    background: var(--yeli-bleu) !important;
    color: #fff !important;
}

.badge-success,
.label-success {
    background: var(--yeli-success) !important;
    color: #fff !important;
}

.badge-warning,
.label-warning {
    background: var(--yeli-soleil) !important;
    color: var(--yeli-nuit) !important;
}

.badge-danger,
.label-danger {
    background: var(--yeli-error) !important;
    color: #fff !important;
}

.badge-info,
.label-info {
    background: var(--yeli-info) !important;
    color: #fff !important;
}

/* ============================================================
   11. ALERTS
============================================================ */
.alert {
    border-radius: 4px !important;
    border: none !important;
    border-left: 4px solid !important;
    font-size: 0.85rem !important;
    font-family: 'Poppins', sans-serif !important;
}

.alert-success {
    background: rgba(40,167,69,0.08) !important;
    border-left-color: var(--yeli-success) !important;
    color: #155724 !important;
}

.alert-warning {
    background: rgba(245,194,24,0.1) !important;
    border-left-color: var(--yeli-soleil) !important;
    color: #856404 !important;
}

.alert-danger {
    background: rgba(220,53,69,0.08) !important;
    border-left-color: var(--yeli-error) !important;
    color: #721c24 !important;
}

.alert-info {
    background: rgba(23,162,184,0.08) !important;
    border-left-color: var(--yeli-info) !important;
    color: #0c5460 !important;
}

/* ============================================================
   12. MODALES
============================================================ */
.modal-header {
    background: var(--yeli-nuit) !important;
    border-bottom: 2px solid var(--yeli-soleil) !important;
    border-radius: 6px 6px 0 0 !important;
}

.modal-title {
    color: #fff !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

.modal-header .close {
    color: rgba(255,255,255,0.75) !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.modal-header .close:hover {
    color: var(--yeli-soleil) !important;
}

.modal-footer {
    background: var(--yeli-cream) !important;
    border-top: 1px solid var(--yeli-border) !important;
}

/* ============================================================
   13. TABS (nav-tabs)
============================================================ */
.nav-tabs > li > a {
    color: var(--yeli-muted) !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    border-radius: 4px 4px 0 0 !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--yeli-nuit) !important;
    border-color: var(--yeli-border) var(--yeli-border) transparent !important;
    border-top: 3px solid var(--yeli-soleil) !important;
}

/* ============================================================
   14. FOOTER
============================================================ */
.main-footer {
    background: #fff !important;
    border-top: 1px solid var(--yeli-border) !important;
    color: var(--yeli-muted) !important;
    font-size: 0.76rem !important;
    font-family: 'Poppins', sans-serif !important;
}

/* ============================================================
   15. SCROLLBAR GLOBALE
============================================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--yeli-cream);
}

::-webkit-scrollbar-thumb {
    background: rgba(27,75,138,0.25);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(27,75,138,0.45);
}

/* ============================================================
   16. SweetAlert2 — thème YeliAfrica
============================================================ */
.swal2-popup {
    border-radius: 8px !important;
    font-family: 'Poppins', sans-serif !important;
}

.swal2-title {
    font-family: 'Nunito', sans-serif !important;
    color: var(--yeli-nuit) !important;
    font-weight: 700 !important;
}

.swal2-confirm {
    background: var(--yeli-bleu) !important;
    color: #fff !important;
    border-radius: 4px !important;
}

.swal2-confirm:hover {
    background: var(--yeli-bleu-dark) !important;
}

.swal2-cancel {
    background: #fff !important;
    color: var(--yeli-text) !important;
    border: 1px solid var(--yeli-border) !important;
    border-radius: 4px !important;
}

/* ============================================================
   17. USER PANEL SIDEBAR
============================================================ */
.user-panel {
    border-bottom: 1px solid rgba(245,194,24,0.12) !important;
    padding: 12px 16px !important;
}

.user-panel .info {
    color: rgba(255,255,255,0.75) !important;
}

.user-panel .info a {
    color: var(--yeli-soleil) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
}

.user-panel .info p {
    font-size: 0.72rem !important;
    color: rgba(255,255,255,0.5) !important;
    margin: 0 !important;
}

/* ============================================================
   18. NAVBAR DROPDOWN MENUS
============================================================ */
.navbar-nav > .open > .dropdown-menu,
.main-header .navbar .open .dropdown-menu {
    background: var(--yeli-nuit) !important;
    border: 1px solid var(--yeli-header-border) !important;
    box-shadow: 0 4px 16px rgba(13,40,86,0.4) !important;
}

.navbar-nav > .open > .dropdown-menu > li > a,
.main-header .navbar .open .dropdown-menu > li > a {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.83rem !important;
}

.navbar-nav > .open > .dropdown-menu > li > a:hover,
.main-header .navbar .open .dropdown-menu > li > a:hover {
    background: rgba(245,194,24,0.1) !important;
    color: var(--yeli-soleil) !important;
}

/* ============================================================
   19. USER MENU DROPDOWN
============================================================ */
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background: var(--yeli-nuit) !important;
    border-bottom: 2px solid var(--yeli-soleil) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header p {
    color: rgba(255,255,255,0.7) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background: var(--yeli-bleu) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
    background: rgba(255,255,255,0.15) !important;
    color: var(--yeli-soleil) !important;
}

/* ============================================================
   20. NAV CRM (sous-navigation module CRM)
============================================================ */
/* La navbar Bootstrap 3 du module CRM */
.navbar.navbar-default.bg-white {
    background: #fff !important;
    border-bottom: 2px solid var(--yeli-border) !important;
    box-shadow: 0 1px 6px rgba(27,75,138,0.08) !important;
    border-radius: 0 !important;
    margin: 0 0 16px 0 !important;
}

.navbar.navbar-default .navbar-brand {
    color: var(--yeli-bleu) !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
}

.navbar.navbar-default .navbar-brand:hover {
    color: var(--yeli-nuit) !important;
}

.navbar.navbar-default .navbar-nav > li > a {
    color: var(--yeli-muted) !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    transition: color 0.2s !important;
}

.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li.active > a {
    color: var(--yeli-bleu) !important;
    background: rgba(27,75,138,0.05) !important;
    border-bottom: 2px solid var(--yeli-soleil) !important;
}

/* Dropdown CRM dans la subnav */
.navbar.navbar-default .dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--yeli-border) !important;
    box-shadow: 0 4px 16px rgba(27,75,138,0.12) !important;
    border-radius: 4px !important;
}

.navbar.navbar-default .dropdown-menu > li > a,
.navbar.navbar-default .dropdown-item {
    color: var(--yeli-text) !important;
    font-size: 0.82rem !important;
    padding: 8px 16px !important;
}

.navbar.navbar-default .dropdown-menu > li > a:hover,
.navbar.navbar-default .dropdown-item:hover {
    background: var(--yeli-cream) !important;
    color: var(--yeli-bleu) !important;
}

/* ============================================================
   21. SIDEBAR LOGO / BRAND
============================================================ */
.sidebar-brand-logo,
.sidebar .logo-text {
    font-family: 'Nunito', sans-serif !important;
    color: var(--yeli-soleil) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

/* ============================================================
   22. INFO BOXES (stats tableau de bord)
============================================================ */
.info-box {
    border-radius: 6px !important;
    box-shadow: 0 1px 6px rgba(27,75,138,0.08) !important;
}

.info-box-icon {
    border-radius: 6px 0 0 6px !important;
}

.info-box-text {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--yeli-muted) !important;
}

.info-box-number {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    color: var(--yeli-text) !important;
}