/* ===========================================
   MODERN NAVBAR - RESPONSIVE STYLES
   Location: wwwroot/css/navbar/navbar-responsive.css
   Purpose: Mobile and tablet responsive behavior
   Device Compatibility: iPhone, Android, iPad, Desktop
   =========================================== */

/* === VIEWPORT & TOUCH OPTIMIZATION === */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific adjustments */
    .modern-navbar {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
        -webkit-user-select: none;
    }
}

/* Android Chrome specific */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .modern-navbar {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    }
}

/* === MOBILE DEVICES (iPhone, Android phones) === */
@media (max-width: 991px) {
    /* Touch-friendly sizing */
    .modern-navbar .nav-link,
    .modern-navbar .dropdown-item,
    .modern-navbar .navbar-toggler {
        min-height: 44px; /* Apple's minimum touch target */
        min-width: 44px;
    }

    .modern-navbar .navbar-collapse {
        background: rgba(102, 126, 234, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px); /* iOS Safari */
        margin-top: 1rem;
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        max-height: calc(100vh - 120px); /* Prevent overflow */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .modern-navbar .navbar-nav {
        gap: 0.25rem;
    }

    .modern-navbar .nav-link {
        padding: 0.875rem 1rem;
        margin: 0;
        font-size: 1rem; /* Readable on small screens */
        touch-action: manipulation; /* Prevent zoom on double-tap */
        cursor: pointer; /* Show pointer cursor */
        position: relative; /* For ::before underline */
    }

    .modern-navbar .nav-link:hover,
    .modern-navbar .nav-link:active {
        transform: translateX(4px);
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Active link highlight in mobile */
    .modern-navbar .nav-link.active {
        background: rgba(255, 255, 255, 0.25);
        font-weight: 600;
        border-left: 3px solid #ffd700;
        padding-left: calc(1rem - 3px);
    }

    /* Dropdown toggle - ensure it's clickable */
    .modern-navbar .dropdown-toggle {
        cursor: pointer;
        pointer-events: auto;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Dropdown in mobile - use Bootstrap's default positioning */
    .modern-navbar .dropdown-menu {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 0.5rem;
        margin-left: 1rem;
        position: static !important; /* Override Bootstrap positioning */
        float: none !important;
        width: auto !important;
        transform: none !important; /* Remove Bootstrap transforms */
    }

    /* Show dropdown when Bootstrap adds .show class */
    .modern-navbar .dropdown-menu.show {
        display: block !important;
    }

    .modern-navbar .dropdown-item {
        color: rgba(255, 255, 255, 0.95);
        padding: 0.75rem 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        touch-action: manipulation;
        cursor: pointer;
    }

    .modern-navbar .dropdown-item:hover,
    .modern-navbar .dropdown-item:active {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }

    .modern-navbar .dropdown-item.active {
        background: rgba(255, 255, 255, 0.25);
        color: #ffffff;
    }

    /* Auth wrapper in mobile */
    .nav-auth-wrapper {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        width: 100%;
    }

    /* User roles badges in mobile */
    .user-roles-display {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Prevent body scroll when menu is open */
    body.navbar-open {
        overflow: hidden;
        /* Remove position: fixed - now handled by JavaScript */
    }
}

/* === iPHONE SE / SMALL MOBILE (320px - 375px) === */
@media (max-width: 375px) {
    .modern-navbar .container-fluid {
        padding: 0 0.75rem;
    }

    .modern-navbar .navbar-brand {
        font-size: 1.15rem;
    }

    .modern-navbar .navbar-brand i {
        font-size: 1.35rem;
    }

    .modern-navbar .nav-link {
        font-size: 0.95rem;
        padding: 0.75rem 0.875rem;
    }

    .modern-navbar .dropdown-item {
        font-size: 0.9rem;
        padding: 0.65rem 0.875rem;
    }

    .modern-navbar .navbar-collapse {
        max-height: calc(100vh - 100px);
    }
}

/* === iPHONE 12/13/14 / ANDROID PHONES (376px - 430px) === */
@media (min-width: 376px) and (max-width: 430px) {
    .modern-navbar .container-fluid {
        padding: 0 1rem;
    }

    .modern-navbar .navbar-brand {
        font-size: 1.25rem;
    }

    .modern-navbar .navbar-brand i {
        font-size: 1.5rem;
    }

    .modern-navbar .nav-link {
        font-size: 1rem;
        padding: 0.875rem 1rem;
    }
}

/* === iPHONE PLUS / ANDROID LARGE (431px - 575px) === */
@media (min-width: 431px) and (max-width: 575px) {
    .modern-navbar .container-fluid {
        padding: 0 1.25rem;
    }

    .modern-navbar .navbar-brand {
        font-size: 1.35rem;
    }

    .modern-navbar .navbar-brand i {
        font-size: 1.6rem;
    }
}

/* === TABLETS (iPad, Android Tablets) 576px - 991px === */
@media (min-width: 576px) and (max-width: 991px) {
    .modern-navbar .container-fluid {
        padding: 0 1.5rem;
    }

    .modern-navbar .navbar-brand {
        font-size: 1.4rem;
    }

    .modern-navbar .navbar-brand i {
        font-size: 1.65rem;
    }

    .modern-navbar .navbar-collapse {
        max-height: calc(100vh - 140px);
    }

    /* Two-column layout for dropdowns on tablets */
    .modern-navbar .dropdown-menu {
        columns: 2;
        column-gap: 1rem;
    }

    .modern-navbar .dropdown-item {
        break-inside: avoid;
    }
}

/* === iPAD SPECIFIC (768px - 1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {
    .modern-navbar .container-fluid {
        padding: 0 2rem;
    }

    /* Better spacing for iPad */
    .modern-navbar .nav-link {
        padding: 1rem 1.25rem;
    }
}

/* === iPAD PRO (1024px+) in portrait === */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .modern-navbar .container-fluid {
        padding: 0 2.5rem;
    }
}

/* === DESKTOP (?992px) === */
@media (min-width: 992px) {
    .modern-navbar .navbar-nav {
        gap: 0.5rem;
    }

    .modern-navbar .dropdown-menu {
        min-width: 220px;
        position: absolute; /* Restore absolute positioning for desktop */
        margin-top: 0; /* Remove gap between toggle and menu */
    }

    /* Ensure dropdown container includes menu for hover */
    .modern-navbar .dropdown {
        position: relative;
    }

    /* Create invisible bridge between toggle and menu */
    .modern-navbar .dropdown::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 8px; /* Small bridge to prevent gap */
        pointer-events: auto;
    }

    /* Desktop hover dropdowns */
    .modern-navbar .dropdown:hover > .dropdown-menu {
        display: block;
        animation: fadeInDown 0.3s ease;
    }

    .modern-navbar .dropdown-menu {
        display: none;
    }

    .modern-navbar .dropdown.show > .dropdown-menu {
        display: block;
    }

    /* Remove touch-specific styles on desktop */
    .modern-navbar .nav-link,
    .modern-navbar .dropdown-item {
        touch-action: auto;
    }

    /* Ensure dropdown stays open when hovering over it */
    .modern-navbar .dropdown-menu:hover {
        display: block;
    }
}

/* === LARGE DESKTOP (?1400px) === */
@media (min-width: 1400px) {
    .modern-navbar .container-fluid {
        padding: 0 3rem;
        max-width: 1920px;
        margin: 0 auto;
    }

    .modern-navbar .navbar-brand {
        font-size: 1.65rem;
    }

    .modern-navbar .navbar-brand i {
        font-size: 1.85rem;
    }
}

/* === ULTRA-WIDE (?1920px) === */
@media (min-width: 1920px) {
    .modern-navbar .container-fluid {
        max-width: 2560px;
        padding: 0 4rem;
    }
}

/* === LANDSCAPE MODE OPTIMIZATIONS === */
@media (max-width: 991px) and (orientation: landscape) {
    .modern-navbar .navbar-collapse {
        max-height: calc(100vh - 80px);
        flex-direction: row;
        flex-wrap: wrap;
    }

    .modern-navbar .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 60%;
    }

    .nav-auth-wrapper {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        padding-left: 1rem;
        margin-left: 1rem;
    }
}

/* === SMOOTH TRANSITIONS === */
.modern-navbar .navbar-collapse {
    transition: all 0.35s ease-in-out;
}

.modern-navbar .navbar-collapse.collapsing {
    transition: height 0.35s ease;
    overflow: hidden;
}

/* === DROPDOWN Z-INDEX === */
.modern-navbar .dropdown-menu.show {
    z-index: 1050;
}

/* === MOBILE EDGE PADDING === */
@media (max-width: 991px) {
    .mobile-edge-pad {
        padding-left: 0;
        padding-right: 0;
    }
}

/* === SAFE AREA INSETS (iPhone X and newer) === */
@supports (padding: max(0px)) {
    .modern-navbar .container-fluid {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    @media (max-width: 991px) {
        .modern-navbar .navbar-collapse {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }
    }
}

/* === NOTCH SUPPORT (iPhone X, 11, 12, 13, 14, 15) === */
@supports (padding-top: constant(safe-area-inset-top)) {
    .modern-navbar {
        padding-top: constant(safe-area-inset-top);
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    .modern-navbar {
        padding-top: env(safe-area-inset-top);
    }
}

/* === PRINT STYLES === */
@media print {
    .modern-navbar {
        display: none;
    }
}

/* === HIGH DPI DISPLAYS (Retina) === */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .modern-navbar {
        /* Sharper text rendering on retina displays */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* === FOLDABLE DEVICES (Surface Duo, Galaxy Fold) === */
@media (min-width: 540px) and (max-width: 720px) and (min-height: 720px) {
    .modern-navbar .container-fluid {
        padding: 0 1.5rem;
    }

    .modern-navbar .navbar-collapse {
        max-height: calc(100vh - 120px);
    }
}

/* === ACCESSIBILITY: FOCUS IMPROVEMENTS === */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices only */
    .modern-navbar .nav-link:focus,
    .modern-navbar .dropdown-item:focus {
        outline: 3px solid rgba(255, 215, 0, 0.8);
        outline-offset: 2px;
    }
}

/* === PERFORMANCE: GPU ACCELERATION === */
.modern-navbar,
.modern-navbar .navbar-collapse,
.modern-navbar .dropdown-menu {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}