/* Mobile Responsive CSS - MOBILE ONLY
   These styles apply ONLY to mobile devices (< 600px)
   Desktop layout remains completely unchanged
   ══════════════════════════════════════════════════════════════════════ */

/* Mobile CSS Variables - AppBar positioning */
@media (max-width: 599px) {
    :root {
        --mobile-appbar-height: 150px; /* Confirmed DOM height */
        --mobile-content-offset: 180px; /* AppBar + generous buffer for search input */
    }
}

/* Desktop: Show email menu, hide icon menu */
@media (min-width: 600px) {
    .user-menu-mobile {
        display: none !important;
    }

    .user-menu-desktop {
        display: inline-flex !important;
    }
}

/* Mobile: Make AppBar stack vertically with FIXED HEIGHT */
@media (max-width: 599px) {
    /* CRITICAL: Prevent horizontal overflow on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    .mud-layout {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Fix AppBar to specific height on mobile */
    .mud-appbar {
        height: var(--mobile-appbar-height) !important;
        min-height: var(--mobile-appbar-height) !important;
        max-height: var(--mobile-appbar-height) !important;
    }

    /* AppBar: Two rows - Logo+Cart+User on row 1, Search on row 2 */
    .mud-appbar .mud-toolbar-gutters {
        display: flex;
        flex-wrap: wrap;
        min-height: 100%;
        height: 100%;
        padding: 8px 12px;
        gap: 0;
        align-items: flex-start;
        justify-content: space-between;
    }

    /* Row 1: Logo - Left side */
    .mud-appbar .mud-link {
        flex: 0 0 auto;
        order: 1;
        text-align: left !important;
        margin: 0 !important;
        padding-top: 8px;
    }

    .mud-appbar .mud-link img {
        max-width: 140px !important;
        height: auto;
    }

    /* Row 1: Cart - Right side (before user) */
    .appbar-cart {
        flex: 0 0 auto;
        order: 2;
        margin-left: auto !important;
        padding-top: 8px;
    }

    /* Row 1: User menu - Right side (after cart) */
    .appbar-user {
        flex: 0 0 auto;
        order: 3;
        margin-left: 8px !important;
        padding-top: 8px;
    }

    /* Hide desktop user menu on mobile */
    .user-menu-desktop {
        display: none !important;
    }

    /* Show mobile user menu (icon only) */
    .user-menu-mobile {
        display: inline-flex !important;
    }

    /* Mobile user icon styling */
    .user-menu-mobile .mud-button-root {
        min-width: 44px;
        padding: 6px;
    }

    .user-menu-mobile .mud-icon-root {
        font-size: 28px;
    }

    /* Row 2: Search bar - Full width, positioned at bottom of AppBar */
    .mud-appbar .d-flex.flex-grow-1 {
        flex: 1 1 100% !important;
        order: 4;
        max-width: 100% !important;
        margin-top: 8px;
        align-self: flex-end;
    }

    /* Hide all spacers on mobile */
    .mud-appbar .mud-spacer {
        display: none !important;
    }

    /* Main content: offset for fixed AppBar */
    .mud-layout .mud-main-content {
        padding-top: var(--mobile-content-offset) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        min-height: calc(100vh - var(--mobile-content-offset)) !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Make search input appropriate size for mobile */
    .search-bar .mud-input-control {
        font-size: 14px;
    }

    .search-bar .mud-input-label {
        font-size: 13px;
    }

    /* Touch-friendly buttons */
    .mud-icon-button,
    .mud-button {
        min-width: 44px;
        min-height: 44px;
    }

    /* CRITICAL: Ensure all containers respect viewport width on mobile */
    .mud-container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* CRITICAL: Minimal MudCard padding on mobile to prevent button cutoff */
    .mud-card {
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    .mud-card-content {
        padding: 16px !important;
    }

    .mud-card-header {
        padding: 16px !important;
    }

    /* Loading screens: Center in available viewport space */
    .cart-loading-container,
    .checkout-loading-container {
        min-height: calc(100vh - var(--mobile-content-offset)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Progress indicators should be centered in viewport */
    .mud-progress-circular {
        margin: 0 auto;
    }
}

/* Extra small mobile devices (portrait phones) */
@media (max-width: 374px) {
    :root {
        --mobile-appbar-height: 160px; /* Slightly taller for text wrapping */
        --mobile-content-offset: 190px; /* AppBar + buffer */
    }

    .appbar-logo img {
        max-width: 110px !important;
    }

    .search-bar .mud-input-control {
        font-size: 13px;
    }

    .search-bar .mud-input-label {
        font-size: 12px;
    }

    /* Slightly smaller user icon on very small screens */
    .user-menu-mobile .mud-icon-root {
        font-size: 24px;
    }
}

/* Mobile landscape orientation - removed unused variables */
@media (max-width: 959px) and (orientation: landscape) and (max-height: 500px) {
    .mud-appbar .mud-toolbar-gutters {
        padding: 4px 12px;
    }

    .appbar-search {
        margin-top: 4px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile Page-Specific Improvements
   ══════════════════════════════════════════════════════════════════════ */

/* Cart Page Mobile Optimizations */
@media (max-width: 599px) {
    /* Cart header: Stack view toggle and checkout button */
    .mud-stack.mb-4 {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .mud-stack.mb-4 .mud-stack {
        flex-direction: column !important;
        width: 100%;
        gap: 8px !important;
    }

    .mud-stack.mb-4 .mud-button-group {
        width: 100%;
    }

    .mud-stack.mb-4 .mud-button {
        width: 100%;
    }

    /* Card view: Full width container */
    .mud-card-content > div[style*="max-width: 50%"] {
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Cart cards: Better mobile spacing */
    .mud-card {
        margin-bottom: 12px;
    }

    .mud-card-header {
        padding: 12px !important;
    }

    .mud-card-content {
        padding: 12px !important;
    }

    /* Form fields in cart */
    .mud-input,
    .mud-select {
        font-size: 14px !important;
    }

    .mud-input-label {
        font-size: 12px !important;
    }

    /* Cart grid items: Full width on mobile */
    .mud-grid-item.xs-12 {
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Reduce button text size */
    .mud-button-label {
        font-size: 13px;
    }
}

/* Search Results Mobile Optimizations */
@media (max-width: 599px) {
    /* Result header: Stack count and toggle buttons */
    .mud-paper.pa-3.mb-3.d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
    }

    .mud-paper.pa-3.mb-3 .mud-button-group {
        width: 100%;
    }

    .mud-paper.pa-3.mb-3 .mud-button-group .mud-button {
        flex: 1;
    }

    /* MudTable mobile mode improvements */
    .mud-table-root {
        font-size: 14px;
    }

    /* Mobile table rows should stack as cards */
    .mud-table-cell[data-label] {
        padding: 8px 12px !important;
        font-size: 14px;
    }

    .mud-table-cell[data-label]::before {
        font-weight: 600;
        font-size: 12px;
    }

    /* Ensure table container doesn't overflow */
    .mud-paper .mud-table-container {
        max-width: 100%;
    }

    /* Card view: Full width items on mobile */
    .mud-grid .mud-grid-item {
        padding: 4px !important;
    }

    .mud-card-actions {
        flex-wrap: wrap;
        padding: 8px 12px !important;
    }
}

/* Container and Spacing Adjustments */
@media (max-width: 599px) {
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .mud-main-content.pa-4 {
        padding-top: var(--mobile-content-offset) !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 8px !important;
    }

    .mt-4 {
        margin-top: 8px !important;
    }

    .mb-3 {
        margin-bottom: 8px !important;
    }
}

/* Typography Mobile Adjustments */
@media (max-width: 599px) {
    .mud-typography-h3 {
        font-size: 1.75rem !important;
    }

    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }

    .mud-typography-h6 {
        font-size: 1rem !important;
    }

    .mud-typography-body1 {
        font-size: 0.875rem !important;
    }

    .mud-typography-body2 {
        font-size: 0.8125rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Order History Page Mobile Optimizations
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
    /* Order header: Stack elements vertically instead of horizontal */
    .mud-card-header .mud-stack[style*="width: 100%"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Order header items */
    .mud-card-header .mud-stack > .mud-typography-h6 {
        font-size: 0.95rem !important;
    }

    /* Order line items: Stack part info and ship-to vertically */
    .mud-card-content .mud-paper > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Ship-to section: Left align on mobile instead of right */
    .mud-card-content .mud-paper > div > div[style*="flex: 0 0 300px"] {
        flex: 1 1 auto !important;
        text-align: left !important;
    }

    .mud-card-content .mud-paper .mud-stack[style*="align-items: flex-end"] {
        align-items: flex-start !important;
    }

    /* Make part details more compact on mobile */
    .mud-card-content .mud-paper .mud-typography-body1 {
        margin-bottom: 6px !important;
        font-size: 0.875rem !important;
    }

    /* Reduce padding on line item cards */
    .mud-card-content .mud-paper.pa-4 {
        padding: 12px !important;
    }

    /* Search field: Full width and better touch target */
    .mud-paper .mud-text-field {
        font-size: 14px;
    }
}