/*
╔════════════════════════════════════════════════════════════════════╗
║  ROOTED VITALITY, INC.                                             ║
║  File: styles/dark-mode/dark-mode-navigation.css                   ║
║  Purpose: Dark mode styling for navigation, header, and footer     ║
║  Holistic Wellness · Modern Connection Platform                    ║
║  rootedvitality.health | 2025                                      ║
╚════════════════════════════════════════════════════════════════════╝

TABLE OF CONTENTS
  1. Header & Navigation
  2. Avatar & Notification Dropdowns
  3. Footer Styling
*/

@media (prefers-color-scheme: dark) {
    /* ========================================== */
    /* 1. HEADER & NAVIGATION */
    /* ========================================== */

    /* HEADER STYLING */
    .rv-header {
        background: linear-gradient(
            180deg,
            rgba(26, 23, 20, 0.95) 0%,
            rgba(26, 23, 20, 0.92) 50%,
            rgba(26, 23, 20, 0.90) 100%
        ) !important;
        border-bottom: 1px solid var(--dm-bg-card-secondary) !important;
        filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)) drop-shadow(inset 0 1px 0 rgba(119, 136, 62, 0.1)) drop-shadow(0 0 50px rgba(119, 136, 62, 0.1));
    }

    .rv-header-scrolled {
        background: linear-gradient(
            180deg,
            rgba(26, 23, 20, 0.97) 0%,
            rgba(26, 23, 20, 0.95) 50%,
            rgba(26, 23, 20, 0.92) 100%
        ) !important;
        filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5)) drop-shadow(inset 0 1px 0 rgba(119, 136, 62, 0.1)) drop-shadow(0 0 60px rgba(119, 136, 62, 0.12));
    }

    /* Brand text - white on all headers */
    .rv-brand-text,
    .rv-brand-name {
        color: #ffffff !important;
    }

    .rv-brand-name {
        color: #ffffff !important;
    }

    /* Navigation links */
    .rv-nav a,
    .rv-nav-link {
        color: var(--dm-text-primary) !important;
    }

    .rv-nav a:hover,
    .rv-nav-link:hover {
        color: #d9cc94 !important;
    }

    /* Login button (injected header) */
    .rv-login-btn,
    .rv-nav-btn {
        color: var(--dm-text-primary) !important;
        background: transparent !important;
    }

    .rv-login-btn:hover,
    .rv-nav-btn:hover {
        color: #d9cc94 !important;
    }

    /* CTA buttons */
    .rv-nav .cta,
    a.cta {
        background: #77883e !important;
        color: var(--dm-text-on-light) !important;
        border-color: #77883e !important;
    }

    .rv-nav .cta:hover,
    a.cta:hover {
        background: #5f7030 !important;
        border-color: #5f7030 !important;
        color: #ffffff !important;
    }

    /* Public Header Sign Up Button */
    .rv-header-public .rv-btn-accent {
        background: #77883e !important;
        color: var(--dm-text-on-light) !important;
    }

    .rv-header-public .rv-btn-accent:hover {
        background: #5f7030 !important;
        color: #ffffff !important;
    }

    /* Menu toggle */
    .rv-menu-toggle {
        color: #ffffff !important;
    }
    
    .rv-header-client .rv-nav-link,
    .rv-header-practitioner .rv-nav-link {
        color: var(--dm-text-primary) !important;
    }
    
    .rv-header-client .rv-nav-link:hover,
    .rv-header-practitioner .rv-nav-link:hover {
        color: #d9cc94 !important;
    }
    
    /* Practitioner header buttons */
    .rv-header-practitioner .rv-nav-icon-btn,
    .rv-header-practitioner .rv-notifications-btn,
    .rv-header-practitioner .rv-avatar-btn {
        color: #ffffff !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .rv-header-practitioner .rv-nav-icon-btn:hover,
    .rv-header-practitioner .rv-notifications-btn:hover,
    .rv-header-practitioner .rv-avatar-btn:hover {
        color: #d9cc94 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* ========================================== */
    /* 2. AVATAR & NOTIFICATION DROPDOWNS */
    /* ========================================== */

    /* Aggressive notification bell removal of any boxes */
    .rv-notifications-menu {
        position: relative;
    }

    /* Override the 40x40 box from light mode - use both classes for specificity */
    .rv-notifications-btn.rv-nav-icon-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 24px !important;
        height: 24px !important;
        min-width: auto !important;
        min-height: auto !important;
        display: inline-flex !important;
        cursor: pointer !important;
    }

    .rv-notifications-btn.rv-nav-icon-btn:hover,
    .rv-notifications-btn.rv-nav-icon-btn:focus,
    .rv-notifications-btn.rv-nav-icon-btn:active,
    .rv-notifications-btn.rv-nav-icon-btn:focus-visible {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Make sure bell icon is visible and doesn't have grey background */
    .rv-bell-icon {
        stroke: #ffffff !important;
        color: #ffffff !important;
        width: 24px !important;
        height: 24px !important;
    }

    .rv-notifications-btn:hover .rv-bell-icon {
        stroke: #d9cc94 !important;
        color: #d9cc94 !important;
    }

    /* Notification dropdown styling */
    .rv-notifications-dropdown,
    .rv-notifications-menu {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-border-primary) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    }

    .rv-notifications-header {
        background: var(--dm-bg-card) !important;
        border-bottom-color: var(--dm-border-primary) !important;
    }

    .rv-notifications-header h3 {
        color: #ffffff !important;
    }

    .rv-notifications-list {
        background: var(--dm-bg-card) !important;
    }

    .rv-notifications-empty {
        color: #b8b3b0 !important;
    }

    .rv-notification-item {
        background: var(--dm-bg-card-secondary) !important;
        border-color: var(--dm-border-primary) !important;
        color: var(--dm-text-primary) !important;
    }

    .rv-notification-item:hover {
        background: var(--dm-bg-card-secondary) !important;
    }

    .rv-notification-badge {
        background: #d32f2f !important;
        opacity: 0 !important;
        display: none !important;
    }
    
    .rv-notification-badge.active {
        opacity: 1 !important;
        display: flex !important;
    }
    
    .rv-header-client .rv-practitioner-btn {
        color: #ffffff !important;
    }
    
    .rv-header-client .rv-practitioner-btn:hover {
        color: #d9cc94 !important;
    }
    
    /* AVATAR DROPDOWN */
    .rv-avatar-dropdown {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-bg-card-secondary) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    }
    
    .rv-dropdown-item {
        color: var(--dm-text-primary) !important;
    }
    
    .rv-dropdown-item:hover {
        background: rgba(119, 136, 62, 0.2) !important;
        color: #d9cc94 !important;
    }
    
    .rv-dropdown-item:focus {
        background: rgba(119, 136, 62, 0.25) !important;
        color: #d9cc94 !important;
    }
    
    .rv-dropdown-divider {
        border-top-color: var(--dm-border-primary) !important;
    }
    
    .rv-logout-item {
        color: #f87171 !important;
    }
    
    .rv-logout-item:hover {
        background: rgba(248, 113, 113, 0.1) !important;
        color: #ff9999 !important;
    }
    
    /* NOTIFICATIONS DROPDOWN */
    .rv-notifications-dropdown {
        background: var(--dm-bg-card) !important;
        border-color: var(--dm-bg-card-secondary) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    }
    
    .rv-notifications-header {
        border-bottom-color: var(--dm-bg-card-secondary) !important;
    }
    
    .rv-notifications-header h3 {
        color: var(--dm-text-primary) !important;
    }
    
    .rv-notifications-empty {
        color: #a09b97 !important;
    }
    
    /* NOTIFICATION ITEMS */
    .rv-notification-item {
        border-bottom-color: var(--dm-bg-card-secondary) !important;
    }
    
    .rv-notification-item:hover {
        background: rgba(119, 136, 62, 0.1) !important;
    }
    
    .rv-notification-title {
        color: var(--dm-text-primary) !important;
    }
    
    .rv-notification-message {
        color: #b8b3b0 !important;
    }
    
    .rv-notification-time {
        color: #8f8b87 !important;
    }

    /* ========================================== */
    /* 3. FOOTER STYLING */
    /* ========================================== */

    /* Footer keeps green background but text already light - ensure visibility */
    .rv-footer {
        background: #77883e !important;
    }
    
    /* CRITICAL: Override all nav elements in footer - browser default black background fix */
    .rv-footer nav,
    .rv-footer-nav,
    .rv-footer-socials-nav {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
    }
    
    /* Footer section - ensure no background or shadows */
    .rv-footer-section {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* Remove any backgrounds from all footer links and buttons - AGGRESSIVE */
    .rv-footer-nav,
    .rv-footer-nav a,
    .rv-footer-link-btn,
    .rv-footer-socials-nav,
    .rv-footer-socials-nav a,
    .rv-footer-social-btn,
    .rv-footer-section > nav {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border: none !important;
        text-shadow: none !important;
    }
    
    /* Ensure nav doesn't get dark mode default styling */
    .rv-footer-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.7rem !important;
    }
    
    .rv-footer-nav a {
        color: #fbf7ec !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .rv-footer-nav a:hover {
        color: #ffffff !important;
        background: none !important;
    }
    
    .rv-footer-nav a:visited {
        color: #fbf7ec !important;
    }
    
    .rv-footer-nav a:active {
        color: #ffffff !important;
    }
    
    .rv-footer-nav a::before {
        background: #ffffff !important;
    }
    
    .rv-footer-link-btn {
        color: #fbf7ec !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-width: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }
    
    .rv-footer-link-btn:hover {
        color: #ffffff !important;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        border-width: 0 !important;
        box-shadow: none !important;
    }
    
    .rv-footer-link-btn:active,
    .rv-footer-link-btn:focus {
        color: #ffffff !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-width: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    .rv-footer-link-btn::before {
        background: #ffffff !important;
    }
    
    /* Social links in footer */
    .rv-footer-socials-nav {
        display: flex !important;
        gap: 0.8rem !important;
    }
    
    .rv-footer-socials-nav a {
        color: #fbf7ec !important;
    }
    
    .rv-social-link,
    .rv-footer-social-btn {
        background: rgba(251, 247, 236, 0.15) !important;
        color: #fbf7ec !important;
    }
    
    .rv-social-link:hover,
    .rv-footer-social-btn:hover {
        background: #d4c47c !important;
        color: var(--dm-text-on-light) !important;
    }
    
    /* Footer heading */
    .rv-footer-heading {
        color: #fbf7ec !important;
    }
    
    /* Footer text elements */
    .rv-footer-title,
    .rv-footer-phone,
    .rv-footer-email,
    .rv-footer-copyright {
        color: #fbf7ec !important;
    }

    /* Report Concern Widget - Remove any background boxes */
    .report-concern-footer {
        background: transparent !important;
        border-top: none !important;
    }

    .report-concern-link {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        color: #fbf7ec !important;
        padding: 0 !important;
    }

    .report-concern-link:hover {
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        color: #ffffff !important;
    }

    .report-concern-link:active,
    .report-concern-link:focus {
        background: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
}