/* ═════════════════════════════════════════════════════════════════════
   Sponzar Platform Premium Design System & Universal Theme Engine
   ═════════════════════════════════════════════════════════════════════ */

/* ─── 0. Universal Theme Canvas ─── */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body,
body.dark-mode {
    background-color: #121214 !important;
    color: #e8eaf0 !important;
}

html[data-bs-theme="light"],
html[data-bs-theme="light"] body {
    background-color: #ffffff !important;
}

/* Turbo Native Progress Bar */
.turbo-progress-bar {
    height: 3px !important;
    background: linear-gradient(90deg, #609960 0%, #39ff14 100%) !important;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.8) !important;
    z-index: 999999 !important;
}

/* Native View Transitions API for zero-flash page morphing */
@supports (view-transition-name: root) {
    ::view-transition-old(root) {
        animation: 80ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
    }
    ::view-transition-new(root) {
        animation: 120ms cubic-bezier(0, 0, 0.2, 1) both fade-in;
    }
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ─── 1. Universal Layout Clearance ─── */
.section.section-sm,
.section-sm,
.main-wrapper,
.content-wrapper {
    padding-top: 90px !important;
}

/* ─── 2. Sponzar Official Platform Green Token ─── */
.btn-platform-green,
.btn-premium-action,
.btn-sponzar-primary {
    background-color: #609960 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 24px;
    box-shadow: 0 4px 14px rgba(96, 153, 96, 0.3) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none !important;
}
.btn-platform-green:hover,
.btn-premium-action:hover,
.btn-sponzar-primary:hover {
    background-color: #609960 !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(96, 153, 96, 0.45) !important;
    filter: brightness(1.08);
}
.btn-platform-green:active,
.btn-premium-action:active,
.btn-sponzar-primary:active {
    transform: translateY(0);
}

/* ─── 3. LIGHT THEME SYSTEM ─── */
html[data-bs-theme="light"],
html:not([data-bs-theme="dark"]) body:not(.dark-mode) {
    --theme-bg-base: #f8fafc;
    --theme-bg-surface: #ffffff;
    --theme-bg-soft: #f1f5f9;
    --theme-text-primary: #0f172a;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-border: rgba(0, 0, 0, 0.08);
    --theme-border-glow: rgba(96, 153, 96, 0.35);
}

html[data-bs-theme="light"] body,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

html[data-bs-theme="light"] .card,
html[data-bs-theme="light"] .card-premium,
html[data-bs-theme="light"] .audience-card,
html[data-bs-theme="light"] .vault-card,
html[data-bs-theme="light"] .storefront-card,
html[data-bs-theme="light"] .academy-card,
html[data-bs-theme="light"] .biolinks-card,
html[data-bs-theme="light"] .smart-card,
html[data-bs-theme="light"] .network-card,
html[data-bs-theme="light"] .team-card,
html[data-bs-theme="light"] .automations-card,
html[data-bs-theme="light"] .settings-card,
html[data-bs-theme="light"] .circles-card,
html[data-bs-theme="light"] .mission-card,
html[data-bs-theme="light"] .radar-card,
html[data-bs-theme="light"] .rev-card,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .card {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

html[data-bs-theme="light"] h1, html[data-bs-theme="light"] h2, html[data-bs-theme="light"] h3,
html[data-bs-theme="light"] h4, html[data-bs-theme="light"] h5, html[data-bs-theme="light"] h6,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) h1,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) h2,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) h3,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) h4,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) h5,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) h6 {
    color: #0f172a !important;
}

html[data-bs-theme="light"] .text-secondary,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-secondary {
    color: #475569 !important;
}

html[data-bs-theme="light"] .text-muted,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-muted {
    color: #64748b !important;
}

html[data-bs-theme="light"] .table-premium thead th,
html[data-bs-theme="light"] .table thead th,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .table thead th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-bs-theme="light"] .table-premium tbody td,
html[data-bs-theme="light"] .table tbody td,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .table tbody td {
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
    color: #0f172a !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-bs-theme="light"] .table-hover tbody tr:hover,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .table-hover tbody tr:hover {
    background-color: rgba(96, 153, 96, 0.05) !important;
}

html[data-bs-theme="light"] .btn-outline-secondary,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .btn-outline-secondary {
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
html[data-bs-theme="light"] .btn-outline-secondary:hover,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .btn-outline-secondary:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* ─── 4. DARK THEME SYSTEM ─── */
html[data-bs-theme="dark"],
body.dark-mode,
.dark-mode {
    --theme-bg-base: #0a0a0c;
    --theme-bg-surface: #141418;
    --theme-bg-soft: rgba(255, 255, 255, 0.04);
    --theme-text-primary: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.7);
    --theme-text-muted: rgba(255, 255, 255, 0.5);
    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-border-glow: rgba(96, 153, 96, 0.4);
}

html[data-bs-theme="dark"] body,
body.dark-mode,
.dark-mode {
    background-color: #0a0a0c !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .card-premium,
html[data-bs-theme="dark"] .audience-card,
html[data-bs-theme="dark"] .vault-card,
html[data-bs-theme="dark"] .storefront-card,
html[data-bs-theme="dark"] .academy-card,
html[data-bs-theme="dark"] .biolinks-card,
html[data-bs-theme="dark"] .smart-card,
html[data-bs-theme="dark"] .network-card,
html[data-bs-theme="dark"] .team-card,
html[data-bs-theme="dark"] .automations-card,
html[data-bs-theme="dark"] .settings-card,
html[data-bs-theme="dark"] .circles-card,
html[data-bs-theme="dark"] .mission-card,
html[data-bs-theme="dark"] .radar-card,
html[data-bs-theme="dark"] .rev-card,
body.dark-mode .card,
.dark-mode .card {
    background-color: #141418 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

html[data-bs-theme="dark"] h1, html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4, html[data-bs-theme="dark"] h5, html[data-bs-theme="dark"] h6,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #ffffff !important;
}

html[data-bs-theme="dark"] :not(.btn):not(.badge).text-dark,
body.dark-mode :not(.btn):not(.badge).text-dark {
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .text-secondary,
body.dark-mode .text-secondary {
    color: rgba(255, 255, 255, 0.7) !important;
}

html[data-bs-theme="dark"] .text-muted,
body.dark-mode .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

html[data-bs-theme="dark"] .table-premium thead th,
html[data-bs-theme="dark"] .table thead th,
body.dark-mode .table thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-bs-theme="dark"] .table-premium tbody td,
html[data-bs-theme="dark"] .table tbody td,
body.dark-mode .table tbody td {
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-bs-theme="dark"] .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(96, 153, 96, 0.12) !important;
}

html[data-bs-theme="dark"] .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-outline-light,
html[data-bs-theme="dark"] .btn-outline-dark,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-light,
body.dark-mode .btn-outline-dark {
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}
html[data-bs-theme="dark"] .btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn-outline-light:hover,
html[data-bs-theme="dark"] .btn-outline-dark:hover,
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-light:hover,
body.dark-mode .btn-outline-dark:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* ─── 5. Enter Animations ─── */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.container-fluid, .container {
    animation: fadeInSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ─── 6. UNIVERSAL NAVBAR LIGHT & DARK THEME ENGINE ─── */

/* Smooth transitions for navbar state changes */
#navbarPersistent {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-bottom-color 0.3s ease;
}
#navbarPersistent .nav-link,
#navbarPersistent .nav-link i,
#navbarPersistent .nav-link span,
#navbarPersistent .login-btn {
    transition: color 0.3s ease;
}

/* Light Mode Navbars: Scrolled State & Standard Pages */
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent:not(.scroll),
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.link-scroll,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.p-nav-scroll,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .eos-nav-bar {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent:not(.scroll) .nav-link,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.link-scroll .nav-link,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.p-nav-scroll .nav-link,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .eos-nav-bar .eos-nav-title,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .eos-nav-bar .eos-nav-icon {
    color: #475569 !important;
}

html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent:not(.scroll) .nav-link i,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.link-scroll .nav-link i,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.p-nav-scroll .nav-link i,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent:not(.scroll) .nav-link span,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.link-scroll .nav-link span,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.p-nav-scroll .nav-link span {
    color: #475569 !important;
}

html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent:not(.scroll) .nav-link:hover,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.link-scroll .nav-link:hover,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.p-nav-scroll .nav-link:hover {
    color: #0f172a !important;
}

/* ─── Guest Landing Homepage Hero Header (Top Position Over Green Hero Banner) ─── */
/* These rules use higher specificity to beat inline <style> rules from css_general.blade.php */

/* Hero state: transparent background (also overrides navbar_background_color class from JS) */
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll),
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll.navbar_background_color:not(.link-scroll):not(.p-nav-scroll) {
    background-color: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Hero state: white text for standard nav links, icons, spans */
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .nav-link,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .nav-link i,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .nav-link span,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) a.nav-link,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .login-btn {
    color: #ffffff !important;
    font-weight: 500;
}

/* Hero state: Getting Started pill button (White background with refined grey text) */
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .btn-register-menu,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .btn-register-menu.btn-light,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) a.btn-register-menu {
    background-color: #ffffff !important;
    color: #475569 !important;
    border-color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .btn-register-menu:hover {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

/* Hero state: hover */
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .nav-link:hover,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) a.nav-link:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Hero state: search bar styling (White/light pill background with dark placeholder & icon) */
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .search-bar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: transparent !important;
    color: #0f172a !important;
}
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .search-bar::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .button-search,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) #navbarPersistent.scroll:not(.link-scroll):not(.p-nav-scroll) .button-search i {
    color: #64748b !important;
}

/* ─── High-Contrast White Text Overrides for Dark/Gradient Sections & CTA ─── */
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-white,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-white h1,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-white h2,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-white h3,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-white h4,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-white h5,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-white h6,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .bg-gradient h1,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .bg-gradient h2,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .bg-gradient h3,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .bg-gradient h4,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .bg-gradient h5,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .bg-gradient h6,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .bg-gradient .display-4,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .jumbotron.homepage h1,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .jumbotron.homepage h2 {
    color: #ffffff !important;
}

html:not([data-bs-theme="dark"]) body:not(.dark-mode) .text-white p,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .bg-gradient p,
html:not([data-bs-theme="dark"]) body:not(.dark-mode) .jumbotron.homepage p {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Start Free button inside Hero section */
.jumbotron.homepage .btn-light,
.bg-gradient .btn-light {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #ffffff !important;
}

/* Explore the Platform button inside Hero section */
.jumbotron.homepage .btn-outline-light,
.bg-gradient .btn-outline-light {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}
.jumbotron.homepage .btn-outline-light:hover,
.bg-gradient .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Dark Mode Navbars */
html[data-bs-theme="dark"] #navbarPersistent,
html[data-bs-theme="dark"] .eos-nav-bar,
body.dark-mode #navbarPersistent,
body.dark-mode .eos-nav-bar,
.dark-mode #navbarPersistent,
.dark-mode .eos-nav-bar {
    background-color: rgba(14, 14, 18, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] #navbarPersistent .nav-link,
html[data-bs-theme="dark"] .eos-nav-bar .eos-nav-title,
html[data-bs-theme="dark"] .eos-nav-bar .eos-nav-icon,
body.dark-mode #navbarPersistent .nav-link,
body.dark-mode .eos-nav-bar .eos-nav-title,
body.dark-mode .eos-nav-bar .eos-nav-icon,
.dark-mode #navbarPersistent .nav-link,
.dark-mode .eos-nav-bar .eos-nav-title,
.dark-mode .eos-nav-bar .eos-nav-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

html[data-bs-theme="dark"] .eos-back-btn,
html[data-bs-theme="dark"] .eos-nav-icon,
body.dark-mode .eos-back-btn,
body.dark-mode .eos-nav-icon,
.dark-mode .eos-back-btn,
.dark-mode .eos-nav-icon {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .eos-back-btn:hover,
html[data-bs-theme="dark"] .eos-nav-icon:hover,
html[data-bs-theme="dark"] .eos-nav-icon.active,
body.dark-mode .eos-back-btn:hover,
body.dark-mode .eos-nav-icon:hover,
body.dark-mode .eos-nav-icon.active {
    background-color: #609960 !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .search-bar,
body.dark-mode .search-bar {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ─── 7. HAMBURGER MENU & DROPDOWN Z-INDEX LAYERING ─── */
.sidebar-overlay .navbar.fixed-top,
.sidebar-overlay #navbarPersistent {
    z-index: 1050 !important;
}

#mobileMenuOverlay {
    z-index: 1040 !important;
}

.navbar .navbar-collapse,
#navbarCollapse {
    z-index: 1060 !important;
}

.dropdown-menu.show,
.dropdown-menu-user {
    z-index: 1070 !important;
}

html[data-bs-theme="dark"] .navbar .navbar-collapse,
html[data-bs-theme="dark"] #navbarCollapse,
html[data-bs-theme="dark"] .dropdown-menu,
body.dark-mode .navbar .navbar-collapse,
body.dark-mode #navbarCollapse,
body.dark-mode .dropdown-menu {
    background-color: #141418 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

html[data-bs-theme="dark"] .dropdown-item,
body.dark-mode .dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
}

html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus,
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: rgba(96, 153, 96, 0.15) !important;
    color: #609960 !important;
}