/**
 * WORLD-CLASS MOBILE UX (Apple Guideline 4.0 Standard)
 * Optimized for iOS 26+ / iPhone 17 Pro Max
 * 
 * CORE PRINCIPLES:
 * 1. Safe Area Awareness (Notch, Dynamic Island, Home Indicator)
 * 2. 48px High-Confidence Touch Targets
 * 3. De-crowded Layout (Generous Spacing)
 * 4. Legible Typography (14px+ Base)
 */

:root {
    --mobile-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    --brand-dark: #0e2945;
    --touch-target: 48px;
    --sidebar-width-mobile: 280px;
    --header-height-mobile: 70px;
}

@media (max-width: 991.98px) {

    /* ============================================
       GLOBAL SCALE & LEGIBILITY
       ============================================ */
    body {
        font-family: var(--mobile-font) !important;
        font-size: 15px !important;
        /* INCREASED FROM 13PX */
        line-height: 1.4 !important;
        /* BETTER READABILITY */
        color: #1a1a1a !important;
        background-color: #f8fafc !important;
        padding-top: env(safe-area-inset-top, 20px) !important;
        /* Reset padding for Sticky Header */
        /* Header Height Compensation */
        padding-bottom: calc(85px + env(safe-area-inset-bottom, 0)) !important;
        /* CLEAR BOTTOM NAV + HOME INDICATOR */
        overflow-x: hidden !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        position: relative;
    }

    /* Fix Layout Breaking Elements */
    .categories-scroll,
    .scroll-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        min-width: 0 !important;
    }

    .container,
    .container-fluid {
        min-width: 0 !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    html {
        overflow-x: hidden !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
    }

    /* Consistent Heading Hierarchy (De-crowded) */
    h1,
    .h1,
    .shop-title {
        font-size: 1.5rem;
        /* Allow relative sizing */
        font-weight: 700;
        letter-spacing: -0.01em;
        margin-bottom: 0.5rem;
    }

    h2,
    .h2 {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin-bottom: 0.4rem !important;
    }

    h3,
    .h3 {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* Apple-Grade Flatness */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* ============================================
       SIDEBAR ACCESSIBILITY FIX
       ============================================ */
    .user-sidebar,
    .admin-sidebar {
        width: var(--sidebar-width-mobile) !important;
        height: 100vh !important;
        max-height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 2000 !important;
        padding-top: max(20px, env(safe-area-inset-top)) !important;
        padding-bottom: max(120px, calc(100px + env(safe-area-inset-bottom))) !important;
        /* MAJOR SCROLL GAP AT BOTTOM */
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar-toggle {
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 20px !important;
        background: #fff !important;
        border-radius: 8px !important;
        margin-right: 10px !important;
    }

    .menu-item {
        padding: 12px 20px !important;
        /* GENEROUS SPACING */
        font-size: 15px !important;
        min-height: var(--touch-target) !important;
        border-bottom: 1px solid #f8fafc !important;
        color: #2d3748 !important;
    }

    .menu-item i {
        width: 24px !important;
        font-size: 18px !important;
        margin-right: 15px !important;
    }

    /* ============================================
       DASHBOARD & CARDS
       ============================================ */
    .metric-card,
    .stats-card,
    .card {
        padding: 16px !important;
        /* INCREASED FROM 10PX */
        margin-bottom: 16px !important;
        border-radius: 16px !important;
        border: 1px solid #edf2f7 !important;
    }

    .metric-value,
    .count {
        font-size: 20px !important;
        font-weight: 800 !important;
    }

    .metric-title,
    .label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #718096 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em !important;
    }

    /* ============================================
       TOUCH TARGET ENFORCEMENT & DE-CROWDING
       ============================================ */
    .btn,
    .form-control,
    .form-select,
    .sidebar-toggle,
    .nav-link,
    .page-link {
        min-height: 40px;
        padding: 6px 12px;
        font-size: 14px;
        border-radius: 10px;
    }

    .menu-item {
        min-height: var(--touch-target) !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Prevent Welcome Text from Crowding Header */
    .welcome-text {
        white-space: nowrap !important;
        /* Prevent breadcrumb wrapping */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 70vw !important;
        font-size: 15px !important;
        line-height: normal !important;
        margin-bottom: 0 !important;
        /* Center better in flex */
    }

    /* Allow header to grow height for wrapped text */
    .user-header {
        height: auto !important;
        min-height: 70px;
        padding-top: 12px !important;
        /* De-crowd from top */
        padding-bottom: 8px !important;
    }

    /* Hide redundant page title on mobile to save space */
    .page-title-section .page-title {
        display: none !important;
    }

    /* Adjust title section when title is hidden */
    .page-title-section {
        justify-content: flex-end !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 1rem !important;
    }

    .page-title-section::after {
        display: none !important;
    }

    /* Product Grid Crowding Fix */
    .products-grid {
        gap: 12px !important;
        padding: 10px !important;
    }

    .product-name {
        font-size: 13px !important;
        line-height: 1.3 !important;
        height: 2.6em !important;
        overflow: hidden !important;
    }

    .product-price {
        font-size: 15px !important;
        font-weight: 800 !important;
    }

    /* ============================================
       MOBILE INTERFACE REFINEMENTS (ROUND 2)
       ============================================ */

    /* 1. Force Notification Badge Visibility */
    .notification-badge {
        background-color: #dc2626 !important;
        /* Vivid Red */
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        z-index: 2002 !important;
        min-width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 2. Compact "New Request" Button (User Preference) */
    .page-title-section .btn-premium,
    .btn-premium.btn-primary {
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 5px !important;
        /* Reduced margin */
        padding: 6px 16px !important;
        /* Significantly reduced padding */
        font-size: 13px !important;
        /* Smaller text */
        font-weight: 700 !important;
        border-radius: 20px !important;
        /* Match audit button roundness */
        box-shadow: none !important;
        /* Remove heavy shadow */
        order: 2 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Ensure page title section justifies correctly for inline button */
    .page-title-section {
        justify-content: flex-end !important;
        align-items: center !important;
        flex-direction: row !important;
        /* Keep it row */
        padding-bottom: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    /* 3. Compact "Audit" Button */
    .audit-btn-mobile {
        padding: 4px 12px !important;
        font-size: 11px !important;
        /* Match status text size */
        font-weight: 700 !important;
        border-radius: 20px !important;
        background: transparent !important;
        border: 1px solid var(--primary-color) !important;
        color: var(--primary-color) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        min-height: 0 !important;
        /* Override global 48px touch target for this specific inline action */
        height: auto !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hover state removal for touch devices */
    .audit-btn-mobile:hover,
    .audit-btn-mobile:active {
        background: rgba(14, 41, 69, 0.05) !important;
        color: var(--primary-color) !important;
        transform: none !important;
    }

    /* Ensure icons in audit button are small */
    .audit-btn-mobile i {
        font-size: 10px !important;
        margin-right: 4px !important;
    }

    /* ============================================
       MOBILE SIDEBAR LOGO REFINEMENT
       ============================================ */
    .user-sidebar .logo-section {
        padding: 1.5rem 1.5rem 1rem 1.5rem !important;
        /* Reduced top/bottom padding */
        text-align: left !important;
        /* Left Align Logo */
    }

    .user-sidebar .logo img {
        height: 32px !important;
        /* REDUCED FROM 48PX */
        width: auto !important;
        filter: none !important;
        /* Restore original color */
    }

    /* ============================================
       MOBILE BOTTOM MENU SAFE AREA FIX
       ============================================ */
    .mobile-bottom-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        /* Force safe area inset PLUS additional buffer for iPhone home indicator */
        padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 15px) !important;
        height: auto !important;
        display: block !important;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08) !important;
    }

    .mobile-menu-items {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        height: 75px !important;
        /* Increased height for better label breathing room */
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
    }

    .menu-item-label {
        font-size: 11px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        /* Prevent FORCE UPPERCASE that causes overlap */
        margin-top: 4px !important;
    }
}

/* FORCE HIDE BOTTOM MENU ON DESKTOP/TABLET (Added by Agent) */
@media (min-width: 992px) {
    .mobile-bottom-menu {
        display: none !important;
    }
}