/* Mobile optimizations for SharkBoat */

/* Prevent theme flashing on mobile devices */
@media (max-width: 768px) {
    /* Fast transitions for better mobile experience */
    .mud-drawer {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: transform;
    }
    
    .mud-drawer .mud-drawer-content {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .mud-overlay {
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Prevent app bar theme flashing */
    .mud-appbar {
        transition: background-color 0s !important;
        will-change: background-color;
    }
    
    .mud-appbar .mud-toolbar {
        transition: background-color 0s !important;
    }
    
    /* Faster ripple effect for better responsiveness */
    .mud-button-root,
    .mud-icon-button {
        --mud-ripple-duration: 250ms !important;
    }
    
    .mud-ripple-fast {
        --mud-ripple-duration: 200ms !important;
    }
    
    /* Faster hamburger menu response */
    .mud-icon-button {
        transition: background-color 0.15s ease !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Immediate theme class application */
    .mud-theme-light,
    .mud-theme-dark {
        transition: none !important;
    }
    
    /* Optimize touch targets */
    .mud-button,
    .mud-icon-button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Smooth drawer animations */
    .mud-drawer-open {
        transform: translateX(0) !important;
    }
    
    .mud-drawer-closed {
        transform: translateX(-100%) !important;
    }
    
    /* Prevent layout shifts during theme changes */
    .mud-layout,
    .mud-main-content {
        transition: none !important;
    }
    
    /* Optimize navbar for mobile */
    .mud-appbar .mud-toolbar {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    /* Better touch interaction for menu items */
    .mud-nav-link {
        padding: 12px 16px;
        transition: background-color 0.15s ease;
    }
    
    /* Prevent text selection on interactive elements */
    .mud-button,
    .mud-icon-button,
    .mud-nav-link {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
}

/* Performance optimizations for all screen sizes */
.mud-drawer-responsive {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Theme switching optimizations */
[data-theme="light"] .mud-appbar,
[data-theme="dark"] .mud-appbar {
    transition: none !important;
}

/* Smooth mode for desktop */
@media (min-width: 769px) {
    .mud-drawer {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .mud-appbar {
        transition: background-color 0.2s ease !important;
    }
}

/* Layout/reflow fixes for small screens - tables and grids that would otherwise force
   horizontal page scroll or run off-screen. */
@media (max-width: 600px) {
    /* Safety net for any MudTable/MudDataGrid not explicitly given a stacked/hidden-column
       layout: scroll the table itself instead of the page. */
    .mud-table-container,
    .mud-data-grid-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tighter gutters so content isn't squeezed by MudContainer's default padding. */
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Fixed-width dialogs (MaxWidth.Small/Medium/Large) should still fill the viewport
       width on phones rather than leaving large empty side margins or clipping content. */
    .mud-dialog {
        max-width: calc(100vw - 24px) !important;
        margin-left: 12px;
        margin-right: 12px;
    }
}