/*
 * ═══════════════════════════════════════════════════════════════
 *  DOHIMA.CI — Thème Savane (Backoffice)
 *  Palette : Terre · Or savane · Coucher de soleil · Vert acacia
 *  Chaud · Vivant · Lisible · Mutuelle Africaine
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   1. VARIABLES — PALETTE SAVANE
═══════════════════════════════════════════════════════════════ */
:root {
    /* Terres & bois */
    --sv-nuit:        #152210;   /* forêt profonde — sidebar bg */
    --sv-terre:       #1F3518;   /* écorce sombre */
    --sv-foret:       #2E5520;   /* acacia vert foncé */
    --sv-sol:         #5C3A1A;   /* sol rouge-ocre */

    /* Or & Soleil */
    --sv-or:          #D9920A;   /* or savane / herbe sèche */
    --sv-or-vif:      #F0A820;   /* soleil de midi */
    --sv-or-clair:    #F7C84A;   /* reflet doré */
    --sv-soleil:      #E07320;   /* coucher de soleil — CTA principal */
    --sv-coucher:     #BF4E10;   /* orange brûlé profond */

    /* Vert acacia */
    --sv-vert:        #3E7A2C;   /* feuillage acacia */
    --sv-vert-clair:  #6BAA4A;   /* herbe verte saison pluie */
    --sv-vert-sombre: #1A4010;   /* jungle sombre */

    /* Fond & Surfaces */
    --sv-sable:       #F6EDD8;   /* sable chaud — fond contenu */
    --sv-creme:       #FDF6ED;   /* crème douce — surface carte */
    --sv-ocre:        #E8CFA0;   /* ocre clair — hover / stripe */
    --sv-argile:      #C4622A;   /* argile / terracotta */

    /* Textes */
    --sv-texte:       #1C1008;   /* texte principal sombre */
    --sv-texte-2:     #3A2010;   /* texte secondaire */
    --sv-muted:       #8A6A44;   /* texte atténué */
    --sv-blanc:       #FFFDF8;   /* blanc chaud */

    /* Bordures */
    --sv-border:      rgba(217,146,10,0.22);
    --sv-border-h:    rgba(217,146,10,0.55);

    /* Sidebar items */
    --sv-sidebar-item:   #ffffff;
    --sv-sidebar-hover:  rgba(217,146,10,0.12);
    --sv-sidebar-active-bg: rgba(217,146,10,0.18);
    --sv-sidebar-active: #F0A820;
}

/* ═══════════════════════════════════════════════════════════════
   2. TYPOGRAPHIE GLOBALE
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Spectral:wght@400;600;700&display=swap');

body,
.content-wrapper,
.main-sidebar,
.main-header,
input, select, textarea, button {
    font-family: 'Outfit', 'Poppins', system-ui, sans-serif !important;
}

.box-title,
.content-header h1,
.box-header .box-title,
.modal-title,
.info-box-number {
    font-family: 'Spectral', 'Playfair Display', serif !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. SIDEBAR — Forêt profonde
═══════════════════════════════════════════════════════════════ */
aside.side-bar,
.side-bar {
    background: linear-gradient(180deg,
        var(--sv-nuit)  0%,
        #1A2E12        40%,
        var(--sv-terre) 100%
    ) !important;
    border-right: 1px solid rgba(217,146,10,0.15) !important;
    box-shadow: 3px 0 18px rgba(0,0,0,0.35) !important;
}

/* Logo / Nom de l'enseigne */
aside.side-bar > a:first-of-type,
.side-bar > a:first-child {
    background: linear-gradient(90deg, #0E1A08, #1A2E12) !important;
    border-bottom: 1px solid rgba(217,146,10,0.3) !important;
}

aside.side-bar > a .side-bar-heading,
.side-bar > a .side-bar-heading {
    font-family: 'Spectral', serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: .06em !important;
    color: var(--sv-or-vif) !important;
}

/* Sections headers */
.sidebar-menu > .header,
.sidebar > .user-panel,
#side-bar .sidebar-section-header {
    color: rgba(240,168,32,0.45) !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(217,146,10,0.08) !important;
    font-size: 0.62rem !important;
    letter-spacing: 3px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10px 14px 6px !important;
}

/* Items sidebar */
.sidebar-menu > li > a,
#side-bar a {
    color: var(--sv-sidebar-item) !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease !important;
}

.sidebar-menu > li > a:hover,
#side-bar a:hover {
    color: #fff !important;
    background: var(--sv-sidebar-hover) !important;
    border-left-color: var(--sv-or-vif) !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    color: var(--sv-sidebar-active) !important;
    background: var(--sv-sidebar-active-bg) !important;
    border-left-color: var(--sv-or-vif) !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,
#side-bar a .fa,
#side-bar a .fas,
#side-bar a .far {
    color: rgba(240,168,32,0.65) !important;
    margin-right: 8px !important;
}

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

/* Treeview */
.treeview-menu {
    background: rgba(0,0,0,0.12) !important;
    border-left: 2px solid rgba(217,146,10,0.12) !important;
    margin-left: 16px !important;
}

.treeview-menu > li > a {
    color: rgba(247,220,160,0.55) !important;
    font-size: 0.8rem !important;
    padding: 7px 12px 7px 20px !important;
}

.treeview-menu > li > a:hover,
.treeview-menu > li.active > a {
    color: var(--sv-or-clair) !important;
    background: transparent !important;
}

/* ── TAILWIND CLASS OVERRIDES for #side-bar (dark bg context) ─── */
/* Le presenter utilise des classes Tailwind conçues pour fond blanc → à neutraliser sur fond vert nuit */

/* ─── Reset global : toutes les classes gray/primary générées par le presenter ─── */
/* 1. Wrapper div actif (tw-bg-gray-200 + tw-text-primary-700 + tw-pb-1 + tw-rounded-md) */
#side-bar div[class*="tw-bg-gray-"],
#side-bar div[class*="tw-text-primary"] {
    background: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Liens principaux (items de premier niveau, avec ou sans dropdown) */
#side-bar a,
#side-bar a span,
#side-bar .drop_down {
    color: #fff !important;
    background: transparent !important;
}

/* 3. Hover items principaux */
#side-bar a:hover,
#side-bar a.drop_down:hover {
    color: #fff !important;
    background: rgba(217, 146, 10, 0.15) !important;
}

/* 4. État actif item principal — barre dorée à gauche + texte lumineux */
#side-bar a[class*="tw-bg-gray-"],
#side-bar a[class*="tw-text-primary"] {
    background: rgba(217, 146, 10, 0.14) !important;
    color: var(--sv-or-vif) !important;
    border-left-color: var(--sv-or-vif) !important;
    border-radius: 6px !important;
}

/* 5. SVG chevron dropdown */
#side-bar svg {
    color: rgba(247, 200, 100, 0.45) !important;
    transition: color 0.2s !important;
}
#side-bar a:hover svg,
#side-bar a[class*="tw-text-primary"] svg {
    color: rgba(247, 200, 100, 0.9) !important;
}

/* ── SOUS-MENUS (conteneur .chiled) ─────────────────────────────── */
#side-bar .chiled {
    background: rgba(0, 0, 0, 0.14) !important;
    border-radius: 0 0 8px 8px !important;
    margin-top: -2px !important;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
}

/* Ligne verticale connectrice (tw-bg-gray-200 sur fond sombre = invisible → or estompé) */
#side-bar .chiled .tw-absolute.tw-w-px,
#side-bar .chiled [class*="tw-w-px"] {
    background: rgba(217, 146, 10, 0.28) !important;
}

/* Items sous-menu — mêmes couleurs que les autres sections */
#side-bar .chiled a,
#side-bar .chiled a span {
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    padding: 2px 0 !important;
    transition: color 0.15s !important;
}

/* Hover sous-menu */
#side-bar .chiled a:hover,
#side-bar .chiled a:hover span {
    color: var(--sv-or-clair) !important;
    background: transparent !important;
}

/* Sous-menu actif (tw-text-primary-700 ajouté par le presenter) */
#side-bar .chiled a[class*="tw-text-primary"],
#side-bar .chiled a[class*="tw-bg-gray-"],
#side-bar .chiled a[class*="tw-text-primary"] span,
#side-bar .chiled a[class*="tw-bg-gray-"] span {
    color: var(--sv-or-vif) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* Scrollbar sidebar */
aside.side-bar::-webkit-scrollbar { width: 4px; }
aside.side-bar::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
aside.side-bar::-webkit-scrollbar-thumb { background: rgba(217,146,10,0.4); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════
   4. HEADER / TOPBAR — Coucher de soleil
═══════════════════════════════════════════════════════════════ */

/* Override du header tailwind */
body > div.tw-flex > main > div:first-child,
body > div.tw-flex > aside + main > div.no-print:first-child,
.main-header {
    background: linear-gradient(90deg, #3A1A06, #5C2E0A, #7A3E10) !important;
    border-bottom: 2px solid var(--sv-or) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}

/* Surcharger les classes tw-bg-primary via les éléments */
[class*="tw-from-primary"],
[class*="tw-bg-primary"] {
    --tw-gradient-from: #5C2E0A !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(92,46,10,0)) !important;
}
[class*="tw-to-primary"] {
    --tw-gradient-to: #3A1A06 !important;
}

/* Boutons dans la topbar */
[class*="tw-bg-primary-800"],
[class*="tw-from-primary-800"] {
    background-color: rgba(92,46,10,0.6) !important;
}
[class*="hover:tw-bg-primary-700"]:hover {
    background-color: rgba(122,62,16,0.8) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. FOND CONTENU — Sable chaud
═══════════════════════════════════════════════════════════════ */
.content-wrapper,
.right-side,
main.tw-flex.tw-flex-col {
    background: var(--sv-sable) !important;
}

body {
    background: var(--sv-sable) !important;
}

/* Content header */
.content-header {
    padding: 14px 20px 10px !important;
    background: linear-gradient(90deg, #F0E4C8, var(--sv-sable)) !important;
    border-bottom: 1px solid var(--sv-border) !important;
    margin-bottom: 16px !important;
}

.content-header h1 {
    color: var(--sv-texte) !important;
    font-size: 1.25rem !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.content-header h1 > i,
.content-header h1 > .fa,
.content-header h1 > .fas {
    color: var(--sv-soleil) !important;
}

.content-header .breadcrumb { background: transparent !important; }
.content-header .breadcrumb > li > a { color: var(--sv-sol) !important; }

/* ═══════════════════════════════════════════════════════════════
   6. BOXES / CARDS AdminLTE
═══════════════════════════════════════════════════════════════ */
.box {
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(92,58,26,0.10) !important;
    border-top-color: var(--sv-or) !important;
    background: var(--sv-creme) !important;
    border: 1px solid var(--sv-border) !important;
}

.box-header {
    background: linear-gradient(90deg, #F3E8CC, var(--sv-creme)) !important;
    border-bottom: 1px solid var(--sv-border) !important;
    padding: 12px 16px !important;
    border-radius: 10px 10px 0 0 !important;
}

.box-header .box-title {
    color: var(--sv-texte) !important;
    font-size: 0.95rem !important;
}

.box-header .box-title .fa,
.box-header .box-title .fas {
    color: var(--sv-soleil) !important;
    margin-right: 6px !important;
}

.box.box-primary {
    border-top: 3px solid var(--sv-or) !important;
}

.box.box-primary > .box-header {
    background: linear-gradient(90deg, rgba(217,146,10,0.12), var(--sv-creme)) !important;
}

.box.box-success  { border-top-color: var(--sv-vert) !important; }
.box.box-warning  { border-top-color: var(--sv-or-vif) !important; }
.box.box-danger   { border-top-color: #DC3545 !important; }
.box.box-info     { border-top-color: #2196F3 !important; }

.box-body {
    background: var(--sv-creme) !important;
    border-radius: 0 0 10px 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. BOUTONS
═══════════════════════════════════════════════════════════════ */
.btn-primary,
.tw-dw-btn-primary {
    background: linear-gradient(135deg, var(--sv-soleil), var(--sv-coucher)) !important;
    border-color: var(--sv-coucher) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(224,115,32,0.3) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--sv-coucher), #9A3A08) !important;
    border-color: #9A3A08 !important;
    box-shadow: 0 4px 14px rgba(224,115,32,0.45) !important;
}

.btn-success {
    background: linear-gradient(135deg, var(--sv-vert), var(--sv-vert-sombre)) !important;
    border-color: var(--sv-vert-sombre) !important;
    color: #fff !important;
    border-radius: 6px !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--sv-or-vif), var(--sv-or)) !important;
    border-color: var(--sv-or) !important;
    color: #fff !important;
    border-radius: 6px !important;
}

.btn-info {
    background: linear-gradient(135deg, #2196F3, #1565C0) !important;
    border-color: #1565C0 !important;
    color: #fff !important;
    border-radius: 6px !important;
}

.btn-default {
    background: #fff !important;
    border-color: var(--sv-border-h) !important;
    color: var(--sv-texte-2) !important;
    border-radius: 6px !important;
}

.btn-default:hover {
    border-color: var(--sv-or) !important;
    background: rgba(217,146,10,0.06) !important;
    color: var(--sv-sol) !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. TABLES
═══════════════════════════════════════════════════════════════ */
.table > thead > tr > th {
    background: linear-gradient(135deg, #2D1A08, #3E2810) !important;
    color: var(--sv-or-clair) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid var(--sv-or) !important;
    text-transform: uppercase !important;
}

.table-hover > tbody > tr:hover {
    background: var(--sv-ocre) !important;
    transition: background 0.15s !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(217,146,10,0.05) !important;
}

.table > tbody > tr > td {
    color: var(--sv-texte-2) !important;
    border-color: rgba(217,146,10,0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. FORMULAIRES
═══════════════════════════════════════════════════════════════ */
.form-control {
    background: #fff !important;
    border-color: rgba(92,58,26,0.2) !important;
    color: var(--sv-texte) !important;
    border-radius: 6px !important;
}

.form-control:focus {
    border-color: var(--sv-or) !important;
    box-shadow: 0 0 0 3px rgba(217,146,10,0.15) !important;
    background: #fffdf6 !important;
}

.form-group label {
    font-weight: 600 !important;
    font-size: 0.83rem !important;
    color: var(--sv-texte-2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. NAV TABS
═══════════════════════════════════════════════════════════════ */
.nav-tabs {
    border-bottom: 2px solid var(--sv-border) !important;
}

.nav-tabs > li > a {
    color: var(--sv-muted) !important;
    border-radius: 6px 6px 0 0 !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
}

.nav-tabs > li > a:hover {
    color: var(--sv-sol) !important;
    background: var(--sv-ocre) !important;
    border-color: var(--sv-border) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    color: var(--sv-sol) !important;
    background: var(--sv-creme) !important;
    border-top: 3px solid var(--sv-or) !important;
    border-bottom-color: transparent !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   11. BADGES & LABELS
═══════════════════════════════════════════════════════════════ */
.label-primary, .badge-primary {
    background: var(--sv-soleil) !important;
    color: #fff !important;
}

.label-success, .badge-success { background: var(--sv-vert) !important; }
.label-warning, .badge-warning { background: var(--sv-or-vif) !important; color: #fff !important; }
.label-danger,  .badge-danger  { background: #DC3545 !important; }
.label-info,    .badge-info    { background: #2196F3 !important; }

/* ═══════════════════════════════════════════════════════════════
   12. PAGINATION
═══════════════════════════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
    color: var(--sv-sol) !important;
    border-color: var(--sv-border) !important;
    background: var(--sv-creme) !important;
}

.pagination > li > a:hover {
    background: var(--sv-ocre) !important;
    color: var(--sv-sol) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--sv-soleil) !important;
    border-color: var(--sv-coucher) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   13. INFO-BOXES & SMALL-BOXES (Dashboard)
═══════════════════════════════════════════════════════════════ */
.info-box {
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(92,58,26,0.1) !important;
    background: var(--sv-creme) !important;
    border: 1px solid var(--sv-border) !important;
}

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

.info-box-number {
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    color: var(--sv-texte) !important;
}

.small-box {
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;
}

.small-box h3 {
    font-family: 'Spectral', serif !important;
    font-weight: 800 !important;
}

.small-box .icon > i {
    opacity: 0.25 !important;
}

.bg-orange, .bg-yellow {
    background: linear-gradient(135deg, var(--sv-soleil), var(--sv-coucher)) !important;
}

.bg-green {
    background: linear-gradient(135deg, var(--sv-vert), var(--sv-vert-sombre)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. MODAL
═══════════════════════════════════════════════════════════════ */
.modal-header {
    background: linear-gradient(90deg, #2D1A08, #4A2C10) !important;
    color: #fff !important;
    border-bottom: 2px solid var(--sv-or) !important;
    border-radius: 5px 5px 0 0 !important;
}

.modal-header .modal-title { color: var(--sv-or-clair) !important; }
.modal-header .close { color: rgba(255,255,255,0.7) !important; }

.modal-content {
    border-radius: 10px !important;
    border: 1px solid var(--sv-border) !important;
    overflow: hidden !important;
}

.modal-footer {
    background: #FDF0DC !important;
    border-top: 1px solid var(--sv-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   15. ALERTES
═══════════════════════════════════════════════════════════════ */
.alert {
    border-radius: 8px !important;
    border: none !important;
}

.alert-success {
    background: #F0FDF4 !important;
    border-left: 4px solid var(--sv-vert) !important;
    color: #1A5C20 !important;
}

.alert-warning {
    background: #FFFBEB !important;
    border-left: 4px solid var(--sv-or-vif) !important;
    color: #7A4A08 !important;
}

.alert-info {
    background: #EFF6FF !important;
    border-left: 4px solid #2196F3 !important;
    color: #1A3A6A !important;
}

.alert-danger {
    background: #FFF5F5 !important;
    border-left: 4px solid #DC3545 !important;
    color: #7A1A1A !important;
}

/* ═══════════════════════════════════════════════════════════════
   16. DROPDOWN MENUS
═══════════════════════════════════════════════════════════════ */
.dropdown-menu {
    border: 1px solid var(--sv-border) !important;
    box-shadow: 0 6px 24px rgba(92,58,26,0.15) !important;
    border-radius: 8px !important;
    background: #fffdf8 !important;
}

.dropdown-menu > li > a {
    color: var(--sv-texte-2) !important;
}

.dropdown-menu > li > a:hover {
    background: var(--sv-ocre) !important;
    color: var(--sv-sol) !important;
}

/* ═══════════════════════════════════════════════════════════════
   17. SELECT2
═══════════════════════════════════════════════════════════════ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid rgba(92,58,26,0.2) !important;
    border-radius: 6px !important;
    background: #fff !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--sv-or) !important;
    box-shadow: 0 0 0 3px rgba(217,146,10,0.15) !important;
}

.select2-container--default .select2-results__option--highlighted {
    background: var(--sv-soleil) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   18. DATATABLES
═══════════════════════════════════════════════════════════════ */
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting::after {
    color: var(--sv-or-clair) !important;
}

.dataTables_wrapper .dataTables_filter input {
    border-color: rgba(92,58,26,0.2) !important;
    border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--sv-or) !important;
    box-shadow: 0 0 0 2px rgba(217,146,10,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   19. PROGRESS BARS
═══════════════════════════════════════════════════════════════ */
.progress-bar {
    background: linear-gradient(90deg, var(--sv-or), var(--sv-soleil)) !important;
}

.progress {
    background: rgba(217,146,10,0.12) !important;
    border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   20. COULEURS LIENS & GLOBAUX
═══════════════════════════════════════════════════════════════ */
a { color: var(--sv-sol) !important; }
a:hover { color: var(--sv-soleil) !important; }

.text-primary  { color: var(--sv-sol) !important; }
.bg-primary    { background: var(--sv-soleil) !important; }
.bg-orange     { background: linear-gradient(135deg, var(--sv-soleil), var(--sv-coucher)) !important; }

/* ═══════════════════════════════════════════════════════════════
   21. SCROLLBAR GLOBAL
═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(217,146,10,0.06); }
::-webkit-scrollbar-thumb { background: rgba(217,146,10,0.45); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sv-or); }

/* ═══════════════════════════════════════════════════════════════
   22. FOOTER
═══════════════════════════════════════════════════════════════ */
.main-footer {
    background: var(--sv-creme) !important;
    border-top: 1px solid var(--sv-border) !important;
    color: var(--sv-muted) !important;
    font-size: 0.78rem !important;
}

.main-footer a { color: var(--sv-sol) !important; }

/* ═══════════════════════════════════════════════════════════════
   23. USER PANEL SIDEBAR
═══════════════════════════════════════════════════════════════ */
.user-panel > .info > a,
.user-panel > .info { color: rgba(247,220,160,0.85) !important; }
.user-panel > .info > p { color: var(--sv-or-clair) !important; font-size: 0.78rem !important; }

/* ═══════════════════════════════════════════════════════════════
   24. DATEPICKER
═══════════════════════════════════════════════════════════════ */
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background: var(--sv-soleil) !important;
    border-color: var(--sv-coucher) !important;
}

.datepicker table tr td:hover {
    background: var(--sv-ocre) !important;
}

/* ═══════════════════════════════════════════════════════════════
   25. TAILWIND OVERRIDES (header buttons, topbar)
═══════════════════════════════════════════════════════════════ */

/* Topbar : fond et boutons */
body > div.tw-flex > main > div.no-print {
    background: linear-gradient(90deg, #2D1206 0%, #4A2010 50%, #2D1206 100%) !important;
    border-bottom: 2px solid var(--sv-or) !important;
}

/* Logo sidebar (nouvelle structure tw-) */
body > div.tw-flex > aside a[href] {
    background: linear-gradient(90deg, #0C1608, #152210) !important;
    border-bottom: 1px solid rgba(217,146,10,0.25) !important;
}

/* Contenu principal */
body > div.tw-flex > main {
    background: var(--sv-sable) !important;
}

/* Sidebar bg (nouvelle structure tw-) */
body > div.tw-flex > aside {
    background: linear-gradient(180deg, #152210, #1A2E12, #152210) !important;
}