/* ============================================
   Mobile Optimizations & Drawer Styles
   ============================================ */

/* AppBar Mobile Styles */
.custom-appbar {
    position: fixed !important;
    top: 5px;
    left: 0;
    right: 0;
    z-index: 1300 !important;
    background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #0D47A1 100%) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* Main Content Padding for Fixed AppBar */
.mud-main-content {
    padding-top: 5px !important;
    margin-top: 5px !important;
}

.mud-main-content > .mud-container {
    padding-top: 5px !important;
    margin-top: 5px !important;
}

/* Desktop AppBar Height */
@media (min-width: 960px) {
    .mud-layout {
        padding-top: 64px !important;
    }
    
    .custom-appbar {
        height: 64px !important;
    }
    
    .appbar-logo {
        max-height: 50px !important;
    }
    
    /* Standards images on desktop */
    .standards-image {
        max-width: 140px !important;
    }
}

/* Mobile Drawer Styles */
.mud-drawer-temporary {
    z-index: 1400 !important;
}

.mud-overlay {
    z-index: 1399 !important;
    backdrop-filter: blur(2px);
}

/* Language Menu Popover */
.language-menu-popover {
    z-index: 1500 !important;
}

.mud-popover {
    z-index: 1500 !important;
}

.mud-menu {
    z-index: 1500 !important;
}

.mud-popover-provider {
    z-index: 1500 !important;
}

/* Ensure menu items are clickable */
.mud-menu .mud-list-item {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.mud-menu .mud-menu-item {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Language selector button */
.language-selector {
    position: relative !important;
    z-index: 1500 !important;
}

/* Mobile Navigation Menu */
.mud-nav-link {
    padding: 12px 16px !important;
    margin: 4px 8px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.mud-nav-link:hover {
    background-color: rgba(21, 101, 192, 0.1) !important;
}

.mud-nav-link-active {
    background-color: rgba(21, 101, 192, 0.15) !important;
    font-weight: bold !important;
}

/* Mobile Specific Styles */
@media (max-width: 959px) {
    /* AppBar adjustments */
    .custom-appbar {
        padding: 0 8px !important;
        height: 56px !important;
    }
    
    .appbar-logo {
        max-height: 40px !important;
        width: auto !important;
    }
    
    /* Prevent body scroll when drawer is open */
    body.mud-drawer-open-responsive-md-left,
    body.mud-drawer-open-responsive-md-right {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Main content padding for fixed appbar */
    .mud-layout {
        padding-top: 56px !important;
    }
    
    .mud-main-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Drawer header */
    .mud-drawer-header {
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
    }
    
    /* Mobile menu items */
    .mud-nav-link {
        font-size: 16px !important;
        padding: 14px 16px !important;
    }
    
    /* Mobile carousel adjustments */
    .mud-carousel {
        height: auto !important;
        min-height: 400px !important;
        overflow: hidden !important;
    }

    .mud-carousel-item {
        padding: 16px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 400px !important;
    }

    /* Hero carousel specific */
    .hero-carousel {
        height: auto !important;
        min-height: 450px !important;
        overflow: hidden !important;
    }

    .hero-carousel-item-content {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 16px 0 !important;
        min-height: 400px !important;
    }

    .hero-carousel-text {
        order: 1 !important;
        margin-bottom: 8px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .hero-carousel-image {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 250px !important;
        margin: 0 auto !important;
        padding-top: 0 !important;
    }

    .hero-image-wrapper {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 4px !important;
        max-width: 240px !important;
        margin: 0 auto !important;
    }

    .hero-slide-image {
        max-width: 100% !important;
        max-height: 180px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 8px !important;
    }
    
    /* Mobile card spacing */
    .mud-card {
        margin-bottom: 16px !important;
    }
    
    /* Mobile image gallery */
    .mud-image {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Mobile typography */
    h1, .mud-typography-h1 {
        font-size: 2rem !important;
    }
    
    h2, .mud-typography-h2 {
        font-size: 1.75rem !important;
    }
    
    h3, .mud-typography-h3 {
        font-size: 1.5rem !important;
    }
    
    h4, .mud-typography-h4 {
        font-size: 1.25rem !important;
    }
    
    /* Mobile container padding */
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Mobile grid spacing */
    .mud-grid-spacing-xs-3 > .mud-grid-item {
        padding: 6px !important;
    }
    
    /* Mobile buttons */
    .mud-button {
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    
    /* Mobile footer */
    .mud-footer {
        padding: 16px 12px !important;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 599px) {
    .custom-appbar {
        height: 56px !important;
    }
    
    .appbar-logo {
        max-height: 36px !important;
    }
    
    .mud-layout {
        padding-top: 56px !important;
    }
    
    .mud-main-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Smaller text on very small screens */
    h1, .mud-typography-h1 {
        font-size: 1.75rem !important;
    }
    
    h2, .mud-typography-h2 {
        font-size: 1.5rem !important;
    }
    
    h3, .mud-typography-h3 {
        font-size: 1.25rem !important;
    }
    
    h4, .mud-typography-h4 {
        font-size: 1.1rem !important;
    }
    
    /* Tighter spacing */
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .mud-card {
        margin-bottom: 12px !important;
        padding: 12px !important;
    }
    
    /* Smaller carousel on very small screens */
    .mud-carousel {
        min-height: 350px !important;
    }
    
    .mud-carousel-item {
        padding: 12px 8px !important;
    }
    
    /* Hero carousel for extra small screens */
    .hero-carousel {
        min-height: 400px !important;
    }

    .hero-carousel-item-content {
        min-height: 350px !important;
        padding: 12px 0 !important;
    }

    .hero-carousel-text {
        margin-bottom: 4px !important;
    }

    .hero-carousel-image {
        max-width: 200px !important;
    }

    .hero-image-wrapper {
        max-width: 180px !important;
        padding: 2px !important;
    }

    .hero-slide-image {
        max-width: 150px !important;
        max-height: 150px !important;
    }
    
    /* Smaller standards images on very small screens */
    .standards-image {
        max-width: 70px !important;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 959px) and (orientation: landscape) {
    .mud-carousel {
        min-height: 300px !important;
    }
    
    .mud-carousel-item {
        padding: 12px !important;
    }
    
    .hero-carousel {
        min-height: 280px !important;
    }

    .hero-carousel-item-content {
        min-height: 220px !important;
        padding: 8px 0 !important;
    }

    .hero-carousel-text {
        margin-bottom: 2px !important;
    }

    .hero-carousel-image {
        max-width: 200px !important;
    }

    .hero-image-wrapper {
        max-width: 180px !important;
        padding: 2px !important;
    }

    .hero-slide-image {
        max-width: 160px !important;
        max-height: 160px !important;
    }
    
    /* Reduce vertical spacing in landscape */
    .mud-card {
        margin-bottom: 12px !important;
    }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
    .mud-button,
    .mud-icon-button,
    .mud-nav-link,
    .mud-list-item {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Larger touch targets for links */
    a {
        padding: 4px !important;
    }
}

/* Smooth scrolling for mobile */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Mobile drawer animation */
.mud-drawer-temporary {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Overlay animation */
.mud-overlay {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Mobile image optimization */
@media (max-width: 959px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Product images */
    .product-card img {
        object-fit: cover !important;
        width: 100% !important;
        height: 200px !important;
    }
    
    /* Hero images in carousel */
    .chain-card-image {
        max-width: 80px !important;
        height: 80px !important;
        object-fit: contain !important;
    }
    
    /* Ensure carousel items don't overflow */
    .mud-carousel-item > div {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Typography adjustments in carousel */
    .hero-carousel-text h3,
    .hero-carousel-text .mud-typography-h3 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    .hero-carousel-text h5,
    .hero-carousel-text .mud-typography-h5 {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
    }
    
    .hero-carousel-text h6,
    .hero-carousel-text .mud-typography-h6 {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Standards images responsive */
    .standards-image {
        max-width: 100px !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* Mobile table responsiveness */
@media (max-width: 959px) {
    .mud-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Mobile dialog adjustments */
@media (max-width: 959px) {
    .mud-dialog {
        max-width: 95vw !important;
        margin: 8px !important;
    }
    
    .mud-dialog-content {
        padding: 16px !important;
    }
}

/* Mobile snackbar positioning */
@media (max-width: 959px) {
    .mud-snackbar {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
    }
}

/* Prevent text selection on double-tap */
@media (hover: none) and (pointer: coarse) {
    .mud-button,
    .mud-icon-button,
    .mud-nav-link {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* Mobile menu icon animation */
.menu-icon-animated {
    transition: transform 0.3s ease !important;
}

.menu-icon-animated.open {
    transform: rotate(90deg) !important;
}

/* Mobile safe area (for notched devices) */
@supports (padding: max(0px)) {
    .custom-appbar {
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
    }
    
    .mud-drawer-temporary {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for iOS Safari bottom bar */
    .mud-main-content {
        min-height: -webkit-fill-available !important;
    }
    
    /* Prevent iOS zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Android specific fixes */
@media (max-width: 959px) {
    /* Fix for Android Chrome address bar */
    .mud-layout {
        min-height: 100vh !important;
        min-height: -webkit-fill-available !important;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 959px) {
    /* Larger focus indicators */
    *:focus-visible {
        outline: 3px solid #1565C0 !important;
        outline-offset: 2px !important;
    }
    
    /* Skip to content link */
    .skip-to-content {
        position: absolute !important;
        top: -40px !important;
        left: 0 !important;
        background: #1565C0 !important;
        color: white !important;
        padding: 8px 16px !important;
        text-decoration: none !important;
        z-index: 9999 !important;
    }
    
    .skip-to-content:focus {
        top: 0 !important;
    }
}

/* Performance optimizations */
@media (max-width: 959px) {
    /* Use GPU acceleration for animations */
    .mud-drawer-temporary,
    .mud-overlay,
    .mud-carousel-item {
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
    
    /* Chain card responsive adjustments */
    .chain-card {
        height: 140px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .chain-card img {
        width: 45px !important;
        height: 45px !important;
    }

    .chain-card .mud-typography-h6 {
        font-size: 0.85rem !important;
        margin-top: 8px !important;
        margin-bottom: 4px !important;
    }

    .chain-card .mud-typography-body2 {
        font-size: 0.75rem !important;
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}