/* 
   Dark Mode "Modern Slate" - LINEAR COHERENCE V25
   Focus: Mathematical progression of shades for absolute harmony.
   Scale: Base (#0b1120) -> Section (#0f172a) -> Surface (#1c2539) -> Header (#26334d)
*/

:root {
    --ds-level-0: #070b14; /* Fond encore plus profond */
    --ds-level-1: #111827; /* Sections intermédiaires plus claires */
    --ds-level-2: #1f2937; /* Surfaces */
    --ds-level-3: #374151; /* Relief */
    
    --ds-border: rgba(255, 255, 255, 0.05); 
    --ds-text-main: #f9fafb;     
    --ds-text-muted: #9ca3af;    
    --ds-accent: #38bdf8; 
}

/* 1. LAYER 0 - GLOBAL BACKGROUND */
html.dark-mode, 
html.dark-mode body,
html.dark-mode .main {
    background-color: var(--ds-level-0) !important;
    color: var(--ds-text-main) !important;
}

/* 2. LAYER 1 - SECTION BACKGROUNDS (Differentiated) */
html.dark-mode section {
    background-color: var(--ds-level-0) !important;
    border-bottom: 1px solid transparent;
}

html.dark-mode section:nth-of-type(even),
html.dark-mode .gray-light-bg,
html.dark-mode .bg-light:not(.card) {
    background-color: var(--ds-level-1) !important;
    border-top: 1px solid var(--ds-border) !important;
    border-bottom: 1px solid var(--ds-border) !important;
}

html.dark-mode .bg-white:not(.card) {
    background-color: var(--ds-level-0) !important;
}

/* 3. LAYER 2 - COMPONENT SURFACES (Cards, Modals, etc.) */
html.dark-mode .card,
html.dark-mode .modal-content,
html.dark-mode .dropdown-menu,
html.dark-mode .promo-single-wrap,
html.dark-mode .shout-bubble,
html.dark-mode .referral-bonus-card,
html.dark-mode .forum-group .card,
html.dark-mode .hs-sub-menu,
html.dark-mode .accordion-item,
html.dark-mode .list-group-item {
    background-color: var(--ds-level-2) !important;
    border: 1px solid var(--ds-border) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

/* Smooth transparency for internal nesting */
html.dark-mode .card-body,
html.dark-mode .modal-body,
html.dark-mode .accordion-body {
    background-color: transparent !important;
}

/* 4. LAYER 3 - HEADERS & INTERACTIVE RELIEF */
html.dark-mode .card-header,
html.dark-mode .modal-header,
html.dark-mode thead,
html.dark-mode thead.bg-light,
html.dark-mode .bg-darkest,
html.dark-mode .accordion-button,
html.dark-mode .card-footer,
html.dark-mode .modal-footer {
    background-color: var(--ds-level-3) !important;
    border-color: var(--ds-border) !important;
    color: #ffffff !important;
}

/* NAVIGATION & MENUS REFIT */
html.dark-mode .main-header-menu-wrap,
html.dark-mode .main-header-menu-wrap.affix {
    background-color: rgba(11, 17, 32, 0.8) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
}

html.dark-mode .nav-link {
    color: var(--ds-text-muted) !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

html.dark-mode .nav-link:hover,
html.dark-mode .nav-link.active {
    color: #ffffff !important;
}

/* Specific sub-menu styling (Dropdowns) */
html.dark-mode .hs-sub-menu,
html.dark-mode .dropdown-menu {
    background-color: rgba(28, 37, 57, 0.95) !important;
    border: 1px solid var(--ds-border) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
    padding: 0.75rem !important;
    border-radius: 12px !important;
}

html.dark-mode .dropdown-item,
html.dark-mode .sub-menu-nav-link {
    color: var(--ds-text-muted) !important;
    border-radius: 8px !important;
    padding: 0.6rem 1rem !important;
    margin-bottom: 2px;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .sub-menu-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* Force Administration Link visibility in new menu style */
html.dark-mode .nav-link.text-primary,
html.dark-mode .sub-menu-nav-link.text-primary {
    color: var(--ds-accent) !important;
    background-color: rgba(96, 165, 250, 0.1) !important;
}

/* Button & Input Unification */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode textarea,
html.dark-mode .btn-light,
html.dark-mode .btn-white,
html.dark-mode .btn-outline-dark,
html.dark-mode .input-group-text {
    background-color: var(--ds-level-3) !important;
    border: 1px solid var(--ds-border) !important;
    color: #ffffff !important;
}

/* Hover effects */
html.dark-mode .nav-link:hover,
html.dark-mode .dropdown-item:hover,
html.dark-mode .list-group-item:hover,
html.dark-mode .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 5. TYPOGRAPHY & NAVIGATION */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, 
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode [class*="text-dark"],
html.dark-mode [class*="fw-900"],
html.dark-mode strong {
    color: #ffffff !important;
}

html.dark-mode p, 
html.dark-mode .text-muted,
html.dark-mode .text-secondary,
html.dark-mode span:not(.badge):not(.text-white):not(.text-primary) {
    color: var(--ds-text-muted) !important;
}

/* Consistent highlighting */
html.dark-mode .text-primary,
html.dark-mode .nav-link.text-primary,
html.dark-mode .sub-menu-nav-link.text-primary {
    color: var(--ds-accent) !important;
}

/* Navbar & Footer Seamlessness */
html.dark-mode .main-header-menu-wrap.affix {
    background-color: var(--ds-level-1) !important;
    border-bottom: 1px solid var(--ds-border) !important;
}

html.dark-mode footer {
    background-color: var(--ds-level-1) !important;
    border-top: 1px solid var(--ds-border) !important;
}

/* 6. MISC */
html.dark-mode .progress { background-color: var(--ds-level-0) !important; }
html.dark-mode ::-webkit-scrollbar { width: 6px; }
html.dark-mode ::-webkit-scrollbar-track { background: var(--ds-level-0); }
html.dark-mode ::-webkit-scrollbar-thumb { background: var(--ds-level-3); border-radius: 10px; }

/* 7. TOGGLE SWITCH */
.theme-switch-wrapper { display: flex; align-items: center; }
.theme-switch { display: inline-block; height: 16px; position: relative; width: 36px; }
.theme-switch input { display: none; }
.slider-round { background-color: #334155; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 34px; }
.slider-round:before { background-color: #fff; bottom: 3px; content: ""; height: 10px; left: 3px; position: absolute; transition: .4s; width: 10px; border-radius: 50%; }
input:checked + .slider-round { background-color: var(--ds-accent); }
input:checked + .slider-round:before { transform: translateX(20px); }
.theme-icon { font-size: 10px; margin: 0 6px; }

/* 8. PREMIUM ALERTS & TOASTS */
.custom-toast {
    background: #ffffff !important;
    color: #1e293b !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.custom-toast .toast-content .small {
    color: #475569 !important;
}

.custom-toast .toast-content .fw-bold {
    color: #64748b !important;
}

html.dark-mode .alert:not(.rounded-0) {
    border: 1px solid var(--ds-border) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
}

/* Specific Alert Type Colors in Dark Mode */
html.dark-mode .alert-info { 
    background-color: rgba(59, 130, 246, 0.2) !important; 
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #93c5fd !important;
}
html.dark-mode .alert-success { 
    background-color: rgba(16, 185, 129, 0.2) !important; 
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}
html.dark-mode .alert-warning { 
    background-color: rgba(245, 158, 11, 0.2) !important; 
    border-color: rgba(245, 158, 11, 0.4) !important;
    color: #fcd34d !important;
}
html.dark-mode .alert-danger { 
    background-color: rgba(239, 68, 68, 0.2) !important; 
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

/* Special handling for top announcement bar (rounded-0) */
html.dark-mode .alert.rounded-0 {
    border-radius: 0 !important;
    border: none !important;
    color: #ffffff !important;
}

html.dark-mode .alert.rounded-0.alert-info { background-color: #1e3a8a !important; }
html.dark-mode .alert.rounded-0.alert-success { background-color: #064e3b !important; }
html.dark-mode .alert.rounded-0.alert-warning { background-color: #78350f !important; }
html.dark-mode .alert.rounded-0.alert-danger { background-color: #7f1d1d !important; }

/* Border-left style for standard alerts */
html.dark-mode .alert:not(.rounded-0) { border-left-width: 5px !important; }
html.dark-mode .alert-danger:not(.rounded-0) { border-left-color: #ef4444 !important; }
html.dark-mode .alert-success:not(.rounded-0) { border-left-color: #10b981 !important; }
html.dark-mode .alert-info:not(.rounded-0) { border-left-color: #3b82f6 !important; }
html.dark-mode .alert-warning:not(.rounded-0) { border-left-color: #f59e0b !important; }

html.dark-mode .custom-toast {
    background: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

html.dark-mode .custom-toast .toast-content div {
    color: #ffffff !important;
}

html.dark-mode .custom-toast .toast-content .fw-bold {
    color: var(--ds-accent) !important;
}

/* Fix for any hardcoded white backgrounds in cards or lists */
html.dark-mode [class*="bg-white"], 
html.dark-mode [class*="bg-light"]:not(.badge):not(.alert):not(.btn) {
    background-color: var(--ds-level-2) !important;
}

/* Force readable text on all standard headers and body copies */
html.dark-mode .card-header,
html.dark-mode .card-title,
html.dark-mode .modal-title,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, 
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: #ffffff !important;
}

/* Ensure sub-labels and monospaced text in admin are visible */
html.dark-mode .font-monospace,
html.dark-mode .text-muted,
html.dark-mode .small,
html.dark-mode .x-small {
    color: var(--ds-text-muted) !important;
}

/* Special fix for the admin metric widgets text */
html.dark-mode .fs-2.fw-900.text-dark {
    color: #ffffff !important;
}

/* Inputs and textareas placeholder visibility */
html.dark-mode ::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* 11. FORM VALIDATION ERRORS */
html.dark-mode .invalid-feedback {
    color: #f87171 !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    margin-top: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
}
html.dark-mode .invalid-feedback::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
}
/* 12. FORUM QUOTES (Blockquotes) */
blockquote {
    background-color: rgba(96, 165, 250, 0.05);
    border-left: 4px solid var(--ds-accent);
    padding: 1rem 1.5rem;
    margin: 0.5rem 0 1.5rem 0; /* Réduction de la marge supérieure */
    border-radius: 4px 12px 12px 4px;
    position: relative;
    font-style: italic;
    color: var(--ds-text-muted);
}

blockquote > p:first-child {
    margin-top: 0 !important; /* Supprime l'écart du paragraphe interne */
}

blockquote::before {
    content: "\f10d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 15px;
    opacity: 0.1;
    font-size: 1.5rem;
}

blockquote strong, blockquote a {
    color: var(--ds-accent) !important;
    text-decoration: none;
    font-weight: 900;
}

blockquote a:hover {
    text-decoration: underline;
}

/* Light Mode specific for blockquotes */
html:not(.dark-mode) blockquote {
    background-color: #f1f5f9;
    border-left: 4px solid #3b82f6;
    color: #475569;
}

/* 13. ADMINISTRATION PANEL SPECIFIC */
html.dark-mode #sidebar-wrapper {
    background-color: var(--ds-level-0) !important;
    border-right: 1px solid var(--ds-border) !important;
}

html.dark-mode #page-content-wrapper {
    background-color: var(--ds-level-1) !important;
}

html.dark-mode .navbar-light.bg-white,
html.dark-mode .navbar-admin {
    background-color: var(--ds-level-2) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    color: #ffffff !important;
}

html.dark-mode .navbar-light.bg-white .navbar-brand,
html.dark-mode .navbar-light.bg-white .nav-link,
html.dark-mode .navbar-light.bg-white .text-muted,
html.dark-mode .navbar-light.bg-white .text-dark {
    color: #ffffff !important;
}

html.dark-mode .admin-nav-link {
    color: var(--ds-text-muted) !important;
}

html.dark-mode .admin-nav-link:hover,
html.dark-mode .admin-nav-link.active {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #ffffff !important;
}

html.dark-mode .admin-nav-link.active {
    border-left: 3px solid var(--ds-accent) !important;
}

html.dark-mode .table {
    color: var(--ds-text-main) !important;
    background-color: transparent !important;
}

html.dark-mode .table thead th {
    background-color: var(--ds-level-3) !important;
    border-bottom: 2px solid var(--ds-border) !important;
    color: #ffffff !important;
}

html.dark-mode .table td {
    border-bottom: 1px solid var(--ds-border) !important;
    color: var(--ds-text-muted) !important;
    background-color: transparent !important;
}

html.dark-mode .breadcrumb-item a {
    color: var(--ds-accent) !important;
}

html.dark-mode .breadcrumb-item.active {
    color: var(--ds-text-muted) !important;
}

html.dark-mode .pagination .page-link {
    background-color: var(--ds-level-2) !important;
    border-color: var(--ds-border) !important;
    color: var(--ds-text-muted) !important;
}

html.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    color: #ffffff !important;
}

/* 14. CUSTOM ADMIN CLASSES OVERRIDES (Maltospeak Specific) */
html.dark-mode .bg-darker,
html.dark-mode .bg-darkest {
    background-color: var(--ds-level-2) !important;
}

html.dark-mode .text-color,
html.dark-mode .text-dark:not(.badge):not(.btn-warning):not(.bg-warning),
html.dark-mode .text-body:not(.bg-warning),
html.dark-mode .text-black,
html.dark-mode [class*="text-dark"]:not(.badge):not(.btn-warning):not(.bg-warning) {
    color: var(--ds-text-main) !important;
}

/* Specific case for elements that need dark text for contrast (like yellow/warning) */
html.dark-mode .badge.text-dark:not(.bg-white),
html.dark-mode .bg-warning .text-dark,
html.dark-mode .bg-warning .text-body,
html.dark-mode .btn-warning .text-dark {
    color: #000000 !important;
}

/* Fix for white badges on dark mode (e.g., Forum replies count) */
html.dark-mode .badge.bg-white.text-dark {
    background-color: var(--ds-level-3) !important;
    color: var(--ds-text-main) !important;
    border-color: var(--ds-border) !important;
}

html.dark-mode .text-muted,
html.dark-mode .text-secondary {
    color: var(--ds-text-muted) !important;
}

html.dark-mode .border-color-subtle,
html.dark-mode .border-light,
html.dark-mode .border-secondary-subtle {
    border-color: var(--ds-border) !important;
}

html.dark-mode .hover-bg-darkest:hover,
html.dark-mode .hover-bg-light:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* 15. BOOTSTRAP UTILITY OVERRIDES (AGGRESSIVE) */
html.dark-mode .bg-white,
html.dark-mode .bg-light,
html.dark-mode .bg-body {
    background-color: var(--ds-level-2) !important;
}

html.dark-mode .bg-light-subtle {
    background-color: var(--ds-level-1) !important;
}

html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-start,
html.dark-mode .border-end {
    border-color: var(--ds-border) !important;
}

html.dark-mode .list-group-item {
    background-color: var(--ds-level-2) !important;
    color: var(--ds-text-main) !important;
    border-color: var(--ds-border) !important;
}

html.dark-mode .list-group-item-action:hover {
    background-color: var(--ds-level-3) !important;
    color: #ffffff !important;
}

/* Specific for Admin Dashboard node cards & widgets */
html.dark-mode .node-icon-wrapper {
    background: var(--ds-level-3) !important;
}

/* Fix for buttons that have hardcoded light borders */
html.dark-mode .btn-light {
    background-color: var(--ds-level-3) !important;
    border-color: var(--ds-border) !important;
    color: #ffffff !important;
}


/* 16. MOBILE MENU SPACING & FRAMING */
@media (max-width: 991px) {
    .main-navbar-nav .nav-link {
        padding-left: 10px !important;
    }
    
    /* Encadrement des sous-menus */
    .hs-sub-menu {
        background-color: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 12px !important;
        margin: 5px 10px 15px 10px !important;
        padding: 5px 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    }

    html.dark-mode .hs-sub-menu {
        background-color: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: none !important;
    }

    .hs-sub-menu .nav-link {
        padding-left: 20px !important;
        border: none !important;
    }
}