/* NAVBAR GLASS EFFECT - PROPER GLASSMORPHISM */

/* High specificity glass effect for navbar */
.navbar.navbar-top.fixed-top,
nav.navbar.navbar-top.fixed-top {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Dark theme glass effect */
[data-bs-theme="dark"] .navbar.navbar-top.fixed-top,
[data-bs-theme="dark"] nav.navbar.navbar-top.fixed-top {
    background-color: rgba(26, 29, 41, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}



    /* Dark theme for mobile navbar - HIGHEST SPECIFICITY */
    [data-bs-theme="dark"] body .navbar.navbar-top.fixed-top,
    [data-bs-theme="dark"] html body .navbar.navbar-top.fixed-top,
    [data-bs-theme="dark"] body nav.navbar.navbar-top.fixed-top,
    [data-bs-theme="dark"] html body nav.navbar.navbar-top.fixed-top,
    [data-bs-theme="dark"] .navbar.navbar-top.fixed-top,
    [data-bs-theme="dark"] nav.navbar.navbar-top.fixed-top {
        background-color: rgba(26, 29, 41, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
        color: #e2e8f0 !important;
    }

    /* Force blur background with highest specificity */
    .navbar-top.fixed-top,
    .navbar.fixed-top,
    nav.fixed-top {
        background-color: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    [data-bs-theme="dark"] .navbar-top.fixed-top,
    [data-bs-theme="dark"] .navbar.fixed-top,
    [data-bs-theme="dark"] nav.fixed-top {
        background-color: rgba(26, 29, 41, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Ensure navbar content has proper styling */
    .navbar-top .navbar-brand,
    .navbar-top .navbar-nav,
    .navbar-top .navbar-toggler {
        background-color: transparent;
    }

    .navbar-top .navbar-nav .nav-link {
        background-color: transparent !important;
        transition: all 0.2s ease;
    }

    .navbar-top .navbar-nav .nav-link:hover {
        background-color: rgba(0, 166, 255, 0.1) !important;
    }

    /* Dark theme for navbar content */
    [data-bs-theme="dark"] .navbar-top .navbar-nav .nav-link:hover {
        background-color: rgba(0, 166, 255, 0.2) !important;
    }
}

/* FORCE BLUR BACKGROUND ON MOBILE NAVBAR - OVERRIDE ALL PHOENIX STYLES */
@media (max-width: 991.98px) {
    /* Ultra high specificity to override Phoenix theme */
    body .navbar.navbar-expand-lg.navbar-top.fixed-top,
    body nav.navbar.navbar-expand-lg.navbar-top.fixed-top,
    body .navbar.navbar-top.navbar-expand-lg.fixed-top,
    html body .navbar.navbar-top.fixed-top.navbar-expand-lg {
        background-color: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    }

    /* Dark theme with ultra high specificity */
    [data-bs-theme="dark"] body .navbar.navbar-expand-lg.navbar-top.fixed-top,
    [data-bs-theme="dark"] body nav.navbar.navbar-expand-lg.navbar-top.fixed-top,
    [data-bs-theme="dark"] body .navbar.navbar-top.navbar-expand-lg.fixed-top,
    [data-bs-theme="dark"] html body .navbar.navbar-top.fixed-top.navbar-expand-lg {
        background-color: rgba(26, 29, 41, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
        color: #e2e8f0 !important;
    }

    /* Force blur background when navbar is visible */
    body .navbar-top.show,
    body .navbar.show,
    html body .navbar-top.show {
        background-color: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    [data-bs-theme="dark"] body .navbar-top.show,
    [data-bs-theme="dark"] body .navbar.show,
    [data-bs-theme="dark"] html body .navbar-top.show {
        background-color: rgba(26, 29, 41, 0.85) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}

/* Desktop - transparent background */
@media (min-width: 992px) {
    .navbar-top.fixed-top {
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border-bottom: none !important;
    }
}

/* OVERRIDE NAVBAR BRAND AND TOGGLE COLORS - HIGHEST SPECIFICITY */
/* Light theme - keep the blue brand color */
.navbar-top .navbar-brand,
.navbar-top .navbar-toggler,
body .navbar-top .navbar-brand,
html body .navbar-top .navbar-brand {
    color: #00A6FF !important;
}

/* Dark theme - change from white to a better color */
[data-bs-theme="dark"] .navbar-top .navbar-brand,
[data-bs-theme="dark"] .navbar-top .navbar-toggler,
[data-bs-theme="dark"] body .navbar-top .navbar-brand,
[data-bs-theme="dark"] html body .navbar-top .navbar-brand {
    color: #00A6FF !important;
}

/* Override navbar toggle button */
.navbar-top .navbar-toggler {
    border-color: rgba(0, 166, 255, 0.3) !important;
}

.navbar-top .navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 166, 255, 0.25) !important;
}

/* ULTRA HIGH SPECIFICITY - Force navbar brand color change */
html body .navbar.navbar-expand-lg.navbar-top .navbar-brand,
html body nav.navbar.navbar-expand-lg.navbar-top .navbar-brand,
html body .navbar.navbar-top .navbar-brand,
html body .navbar-top .navbar-brand,
body .navbar-top .navbar-brand,
.navbar-top .navbar-brand {
    color: #00A6FF !important;
}

/* Dark theme with ultra high specificity */
[data-bs-theme="dark"] html body .navbar.navbar-expand-lg.navbar-top .navbar-brand,
[data-bs-theme="dark"] html body nav.navbar.navbar-expand-lg.navbar-top .navbar-brand,
[data-bs-theme="dark"] html body .navbar.navbar-top .navbar-brand,
[data-bs-theme="dark"] html body .navbar-top .navbar-brand,
[data-bs-theme="dark"] body .navbar-top .navbar-brand,
[data-bs-theme="dark"] .navbar-top .navbar-brand {
    color: #00A6FF !important;
}

/* Override CSS variables for navbar brand color */
:root {
    --phoenix-navbar-brand-color: #00A6FF !important;
}

[data-bs-theme="dark"] {
    --phoenix-navbar-brand-color: #00A6FF !important;
}

/* Force color on any navbar brand */
.navbar-top .navbar-brand,
.navbar-top .navbar-brand *,
.navbar .navbar-brand,
.navbar .navbar-brand * {
    color: #00A6FF !important;
}

/* Target specific navbar brand structure */
.navbar-top .navbar-brand .brand-text,
.navbar-top .navbar-brand .brand-logo,
.navbar-top .navbar-brand img,
.navbar-top .navbar-brand span {
    color: #00A6FF !important;
}

/* Nuclear option - target everything in navbar brand */
.navbar-top .navbar-brand,
.navbar-top .navbar-brand *,
.navbar-top .navbar-brand > *,
.navbar-top .navbar-brand > * > *,
.navbar-top .navbar-brand > * > * > * {
    color: #00A6FF !important;
}

/* Ensure proper contrast for navbar text on blur background */
@media (max-width: 991.98px) {
    .navbar-top .navbar-nav .nav-link {
        color: #333 !important;
    }

    [data-bs-theme="dark"] .navbar-top .navbar-nav .nav-link {
        color: #e2e8f0 !important;
    }

    .navbar-top .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2800, 166, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    [data-bs-theme="dark"] .navbar-top .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2800, 166, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
}