/* css for navs */

/* Permanent guard against a recurring Tailwind footgun: the compiled
   tailwind.css scans base.html (for the profile pill), and base.html's
   own class="collapse navbar-collapse" markup below gets picked up as a
   literal "collapse" candidate, regenerating Tailwind's built-in
   .collapse{visibility:collapse} utility (meant for table rows) on
   every build. Bootstrap's own .collapse only ever sets display, never
   visibility, so nothing here competed with it until now. This
   unlayered declaration always wins over that layered utility
   regardless of scan results, so the nav can never silently disappear
   again even if this file is rescanned. */
.navbar-collapse {
    visibility: visible;
}

.navbar {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    backdrop-filter: blur(10px);
    padding: 0.75rem 1.5rem;
    box-shadow: var(--shadow-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1020;
    /* Ensure navbar stays on top */
}

.navbar-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: white !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.navbar-brand i {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: 10px;
    backdrop-filter: blur(5px);
}

.navbar-brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
}

.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.navbar-nav {
    gap: 0.5rem;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
    padding: 0.625rem 1rem !important;
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.nav-link:hover,
.nav-link.active,
.nav-link.show {
    color: white !important;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 3px;
    background: white;
    border-radius: 3px;
}

/* Dropdown Menus */
.dropdown-menu {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: white;
    z-index: 1030;
    /* Ensure dropdowns are above other content */
}

.dropdown-item {
    border-radius: var(--border-radius-sm);
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: var(--transition);
}

.dropdown-item:hover {
    background: var(--gray-100);
    color: var(--primary);
    transform: translateX(3px);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--primary-light);
    color: white;
}

.dropdown-item i {
    margin-right: 0.5rem;
    color: var(--primary);
}

.dropdown-item:hover i {
    color: var(--primary-dark);
}

/* User Menu */
.user-dropdown {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.user-dropdown:hover {
    background: rgba(255, 255, 255, 0.25);
}

.user-avatar {
    width: 38px;
    height: 38px;
    background: white;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.user-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: white;
}

/* Mobile Dropdown Fixes */
@media (max-width: 1599.98px) {
    /* Fix for user dropdown on mobile */
    .user-dropdown+.dropdown-menu {
        position: fixed !important;
        right: 1rem !important;
        left: auto !important;
        top: auto !important;
        transform: translateY(-100%) !important;
        min-width: 200px;
        max-width: calc(100vw - 2rem);
        /* Prevent overflow */
        margin-top: 0.5rem;
        z-index: 1050 !important;
        border-radius: var(--border-radius) !important;
        box-shadow: var(--shadow-lg) !important;
    }
    
    /* Show dropdown properly when opened on mobile */
    .user-dropdown.show+.dropdown-menu {
        transform: translateY(0) !important;
    }
}

/* Close button only exists for the mobile drawer (below); hidden by default
   so it doesn't show up as a stray button in the always-visible desktop nav. */
.nav-drawer-close {
    display: none;
}

/* Mobile nav drawer: slides in from the right (classic app-nav pattern,
   matching AIMhosting) instead of expanding downward under the navbar.
   Bootstrap's own navbar-expand-xxl forces the nav inline again starting at
   1400px, which was overflowing/clipping the avatar on real ~1560-1600px
   desktop windows before the nav-item list had room to breathe - so this
   pushes the drawer breakpoint out to 1600px, past where the CDN Bootstrap
   rules would otherwise re-force horizontal layout. The compound selectors
   below match Bootstrap's own `.navbar-expand-xxl ...` specificity so they
   win the cascade in the 1400-1600px overlap instead of losing to it. */
@media (max-width: 1599.98px) {
    /* The closed drawer parks itself just past the right edge via transform;
       Chrome still counts that transformed geometry toward the document's
       scrollable area, which would otherwise make the whole page
       horizontally scrollable even though nothing is visibly cut off. */
    html,
    body {
        overflow-x: hidden;
    }

    /* backdrop-filter on .navbar makes it a CSS containing block for its
       position:fixed descendants (WebKit applies this reliably; Chrome is
       inconsistent, which is why this only showed up on a real phone, not
       in headless testing) - the drawer's own top/right/height:100vh still
       looked right by coincidence (the navbar box starts at the viewport's
       top-left and spans full width), but the backdrop's bottom edge
       resolved against the navbar's ~88px-tall box instead of the
       viewport, so it only ever dimmed/caught taps in that top strip.
       Dropping the blur here removes the containing block entirely. */
    .navbar {
        backdrop-filter: none;
        /* position:relative + an explicit z-index makes .navbar its own
           stacking context, which traps the drawer/backdrop's z-index
           inside it - no matter how high they're set, they could never
           out-rank the env banner or offline-indicator pill (both direct
           children of body, outside that context). Dropping to auto here
           removes the trap; position:relative alone doesn't create one. */
        z-index: auto;
    }

    .navbar-collapse,
    .navbar-expand-xxl .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(85vw, 320px);
        background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
        box-shadow: var(--shadow-lg);
        padding: 4rem 0.75rem 1.5rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        /* Above every fixed UI on the page, including the env banner
           (z-index: 9998) and offline-indicator pill (9999). */
        z-index: 10010;
    }

    .navbar-expand-xxl .navbar-toggler {
        display: block !important;
    }

    .navbar-expand-xxl .navbar-nav .dropdown-menu {
        position: static;
    }

    .navbar-collapse.show {
        transform: translateX(0);
    }

    .navbar-collapse .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
    }

    /* Full-width, visibly-tappable rows instead of plain inline text - each
       item reads as its own button, matching the "classic app nav" feel
       instead of a bare link list. They fill the drawer's own padded
       content box (see .navbar-collapse above), not literally touching the
       drawer's outer edge. */
    .navbar-collapse .navbar-nav {
        width: 100%;
    }

    .navbar-collapse .nav-item {
        width: 100%;
    }

    .navbar-collapse .nav-link {
        width: 100%;
        font-size: 1.05rem;
        padding: 0.875rem 1rem !important;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
    }

    .navbar-collapse .nav-link i {
        font-size: 1.1rem;
        width: 1.25rem;
        text-align: center;
    }

    .navbar-collapse .dropdown-menu {
        font-size: 1.02rem;
    }

    .nav-drawer-close {
        align-self: flex-end;
        width: 36px;
        height: 36px;
        margin-bottom: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .nav-drawer-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .nav-drawer-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height: 100vh;
        background: rgba(15, 23, 42, 0.5);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 10000;
    }

    .nav-drawer-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }
}

.nav-drawer-locked {
    overflow: hidden;
}

/* Additional mobile dropdown fixes */
@media (max-width: 768px) {
    .dropdown-menu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 300px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        z-index: 1050 !important;
        border-radius: var(--border-radius) !important;
        box-shadow: var(--shadow-lg) !important;
    }
    
    /* Override for user dropdown specifically */
    .user-dropdown+.dropdown-menu {
        position: fixed !important;
        right: 1rem !important;
        left: auto !important;
        top: 4rem !important;
        transform: none !important;
        width: auto !important;
        min-width: 200px !important;
        max-width: calc(100vw - 2rem) !important;
    }
    
    .user-dropdown.show+.dropdown-menu {
        transform: none !important;
    }
}