:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --yellow: #f59e0b; /* FinTech Amber Gold */
    --gold: #f59e0b;
    --gold-light: rgba(245, 158, 11, 0.15);
    --gold-hover: #d97706;
    --gold-text-light: #b45309; /* Accessible dark amber text on white (WCAG AA > 4.5:1) */
    --gold-text-dark: #fcd34d;  /* Luminous gold text on dark */
    --gold-ink: #18181b;        /* Dark contrast text on gold surfaces */
    --orange: #fd7e14;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    
    /* WSM Primary Accent */
    --primary: #f59e0b;
    --primary-rgb: 245, 158, 11;
    --primary-hover: #d97706;
    --primary-text: #18181b;    /* Crucial: always dark text on primary gold surface */
    --primary-light: rgba(245, 158, 11, 0.15);
    --primary-dark: #18181b; 
    --secondary: #212121;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

/* ==========================================================================
   THEME YELLOW / GOLD RULES
   ========================================================================== */

/* 1. Surfaces primaires : bouton, badge, fond actif -> TEXTE SOMBRE OBLIGATOIRE */
body:not(.dark-mode).theme-yellow .bg-primary,
body:not(.dark-mode) .theme-yellow .bg-primary,
.theme-yellow:not(.dark-mode) .bg-primary,
.theme-yellow .btn-primary,
.theme-yellow .badge-primary,
.theme-yellow .list-group-item.active,
.theme-yellow .btn-outline-primary:hover {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-text) !important;
    font-weight: 600;
}

/* En Dark Mode, la navbar et l'en-tête de sidebar ne doivent JAMAIS être jaunes */
body.dark-mode #navbarTop.bg-primary,
body.dark-mode #sidebar .navbar-header.bg-primary,
.dark-mode #navbarTop.bg-primary,
.dark-mode #sidebar .navbar-header.bg-primary {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

.theme-yellow .btn-primary:hover,
.theme-yellow .btn-primary:focus,
.theme-yellow .btn-primary:active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--primary-text) !important;
}

/* 2. Bordures primaires */
.theme-yellow .btn-outline-primary,
.theme-yellow .border-primary {
    border-color: var(--primary) !important;
}

/* 3. Bouton Contour (Outline) */
.theme-yellow .btn-outline-primary {
    color: var(--gold-text-light) !important;
    background-color: var(--primary-light) !important;
    border-color: var(--primary) !important;
    font-weight: 600;
}

/* 4. Textes d'accent dorés sur fond clair (Ambre profond respectant WCAG AA) */
body:not(.dark-mode).theme-yellow .text-primary,
body:not(.dark-mode).theme-yellow a.text-primary,
body:not(.dark-mode).theme-yellow .btn-link {
    color: var(--gold-text-light) !important;
}

/* 5. Textes d'accent dorés en Mode Sombre (Or lumineux vibrant sur fond sombre) */
body.dark-mode .text-primary,
body.dark-mode a.text-primary,
html.dark-mode .text-primary,
.dark-mode.theme-yellow .text-primary,
.dark-mode .theme-yellow .text-primary {
    color: var(--gold-text-dark) !important;
}

body.dark-mode .btn-outline-primary,
html.dark-mode .btn-outline-primary,
.dark-mode.theme-yellow .btn-outline-primary {
    color: var(--gold-text-dark) !important;
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

/* 6. En-tête (Navbar top) en Mode Clair */
body:not(.dark-mode).theme-yellow #navbarTop.bg-primary,
html:not(.dark-mode) .theme-yellow #navbarTop.bg-primary {
    background-color: var(--primary) !important;
    color: var(--primary-text) !important;
}

body:not(.dark-mode).theme-yellow #navbarTop.bg-primary .navbar-toggler,
body:not(.dark-mode).theme-yellow #navbarTop.bg-primary .navbar-btn,
body:not(.dark-mode).theme-yellow #navbarTop.bg-primary .navbar-title,
body:not(.dark-mode).theme-yellow #navbarTop.bg-primary i,
body:not(.dark-mode).theme-yellow #navbarTop.bg-primary span,
body:not(.dark-mode).theme-yellow #navbarTop.bg-primary a {
    color: var(--primary-text) !important;
}

/* En mode sombre, l'en-tête devient ardoise nuit profond (Obsidian) */
body.dark-mode #navbarTop,
html.dark-mode #navbarTop,
body.dark-mode #navbarTop.bg-primary,
html.dark-mode #navbarTop.bg-primary,
.dark-mode.theme-yellow #navbarTop,
.dark-mode #navbarTop {
    background-color: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

body.dark-mode #navbarTop .navbar-title,
body.dark-mode #navbarTop .navbar-title span,
body.dark-mode #navbarTop .navbar-brand,
body.dark-mode #navbarTop i,
body.dark-mode #navbarTop span,
body.dark-mode #navbarTop a {
    color: #f8fafc !important;
}

/* 7. Menu latéral & icônes actives */
body:not(.dark-mode).theme-yellow .sidebar .menu .list li.active > :first-child i,
body:not(.dark-mode).theme-yellow .sidebar .menu .list li.active > :first-child span {
    color: var(--gold-text-light);
}

body.dark-mode #sidebar .nav-link.active,
body.dark-mode #sidebar .list-group-item.active,
.dark-mode.theme-yellow .sidebar .menu .list li.active > :first-child i,
.dark-mode.theme-yellow .sidebar .menu .list li.active > :first-child span {
    color: var(--gold-text-dark) !important;
}

.theme-yellow .bg-primary-light {
    background-color: var(--primary-light) !important;
}

/* ==========================================================================
   8. ONGLETS DE NAVIGATION & FILTRES (Tout / Recettes / Dépenses)
   Suppression définitive du bleu Bootstrap par défaut (#007bff)
   ========================================================================== */
.theme-yellow .nav-tabs,
.theme-yellow .navbar-tabs,
.theme-yellow #categories .nav,
#categories .nav-tabs {
    border-bottom: none !important;
}

/* Mode Clair : Ardoise neutre élégant pour les onglets non actifs, Or Ambre pour l'onglet actif */
body:not(.dark-mode) .nav-tabs .nav-link,
body:not(.dark-mode) .navbar-tabs .nav-link,
body:not(.dark-mode) #categories .nav-link,
body:not(.dark-mode) .navbar-tabs-container .nav-link {
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    padding: 14px 18px !important;
    transition: color 0.15s ease-in-out !important;
}

body:not(.dark-mode) .nav-tabs .nav-link:hover,
body:not(.dark-mode) .navbar-tabs .nav-link:hover,
body:not(.dark-mode) #categories .nav-link:hover,
body:not(.dark-mode) .navbar-tabs-container .nav-link:hover {
    color: #0f172a !important;
}

body:not(.dark-mode) .nav-tabs .nav-link.active,
body:not(.dark-mode) .navbar-tabs .nav-link.active,
body:not(.dark-mode) #categories .nav-link.active,
body:not(.dark-mode) .navbar-tabs-container .nav-link.active {
    color: #b45309 !important; /* Ambre doré WCAG AA */
    background: transparent !important;
    border-bottom: 3px solid #f59e0b !important;
    font-weight: 700 !important;
}

/* Mode Sombre : Ardoise claire douce non agressive, Or éclatant actif */
body.dark-mode .nav-tabs .nav-link,
body.dark-mode .navbar-tabs .nav-link,
body.dark-mode #categories .nav-link,
body.dark-mode .navbar-tabs-container .nav-link,
.dark-mode .nav-tabs .nav-link,
.dark-mode .navbar-tabs .nav-link,
.dark-mode #categories .nav-link,
.dark-mode .navbar-tabs-container .nav-link {
    color: #94a3b8 !important; /* Plus AUCUN bleu #007bff */
    background: transparent !important;
    border: none !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    padding: 14px 18px !important;
    transition: color 0.15s ease-in-out !important;
}

body.dark-mode .nav-tabs .nav-link:hover,
body.dark-mode .navbar-tabs .nav-link:hover,
body.dark-mode #categories .nav-link:hover,
body.dark-mode .navbar-tabs-container .nav-link:hover,
.dark-mode .nav-tabs .nav-link:hover,
.dark-mode .navbar-tabs .nav-link:hover,
.dark-mode #categories .nav-link:hover {
    color: #f8fafc !important;
}

body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .navbar-tabs .nav-link.active,
body.dark-mode #categories .nav-link.active,
body.dark-mode .navbar-tabs-container .nav-link.active,
.dark-mode .nav-tabs .nav-link.active,
.dark-mode .navbar-tabs .nav-link.active,
.dark-mode #categories .nav-link.active {
    color: #fbbf24 !important; /* Or éclatant */
    background: transparent !important;
    border-bottom: 3px solid #f59e0b !important;
    font-weight: 700 !important;
}

/* Fond du conteneur des onglets sous la navbar */
body:not(.dark-mode) #categories,
body:not(.dark-mode) .navbar-tabs-container {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 1rem !important;
}

body.dark-mode #categories,
body.dark-mode .navbar-tabs-container,
.dark-mode #categories,
.dark-mode .navbar-tabs-container {
    background-color: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 1rem !important;
}

/* ==========================================================================
   9. LIENS GÉNÉRAUX DANS LE THÈME YELLOW (REMPLACEMENT DU BLEU BOOTSTRAP)
   ========================================================================== */
body:not(.dark-mode).theme-yellow a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item) {
    color: var(--gold-text-light);
}

body:not(.dark-mode).theme-yellow a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):hover {
    color: var(--primary-hover);
}

body.dark-mode a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item),
.dark-mode a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item) {
    color: #e2e8f0;
}

body.dark-mode a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):hover,
.dark-mode a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):hover {
    color: #fbbf24;
}

/* ==========================================================================
   10. BOUTON FLOTTANT D'ACTION (FAB) - ESPACEMENT ET POSITIONNEMENT
   ========================================================================== */
footer.fixed-bottom {
    pointer-events: none !important;
    border: none !important;
    background: transparent !important;
}

.floating-btn,
.cm-floating-btn-container {
    pointer-events: none !important;
    padding: 0 !important;
}

#fab,
.floating-btn #fab,
.btn-floating#fab {
    pointer-events: auto !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 22px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

#fab:hover,
.floating-btn #fab:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
}

#fab:active,
.floating-btn #fab:active {
    transform: translateY(0) !important;
}

/* Sur mobile (< 768px) : flotter au-dessus de la barre de navigation inférieure (56px) avec marge */
@media (max-width: 767.98px) {
    footer.fixed-bottom {
        bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    #fab,
    .floating-btn #fab {
        margin-bottom: 76px !important; /* 56px navbar + 20px dégagement */
        margin-right: 1.25rem !important; /* 20px du bord droit */
    }
}

/* Sur tablette et desktop (>= 768px) : bien détacher des bords de fenêtre et du conteneur */
@media (min-width: 768px) {
    footer.fixed-bottom {
        bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    #fab,
    .floating-btn #fab {
        margin-bottom: 2rem !important; /* 32px du bas */
        margin-right: 2rem !important;  /* 32px de la droite */
    }
}

/* Très grands écrans desktop (>= 1200px) */
@media (min-width: 1200px) {
    #fab,
    .floating-btn #fab {
        margin-bottom: 2.5rem !important; /* 40px du bas */
        margin-right: 2.5rem !important;  /* 40px de la droite */
    }
}