/* Mobile Responsive Improvements - Bible §44 */
/* MOBILE-FIRST approach: base styles for mobile, then scale up */

/* ============================================================
   BASE STYLES (Mobile First - < 600px)
   ============================================================ */

/* Touch-friendly buttons - minimum 44x44px tap targets (iOS/Android HIG) */
.mud-button, .mud-icon-button {
    min-width: 44px;
    min-height: 44px;
}

/* Ensure small icon buttons in tables still meet 44px touch target on mobile */
@media (max-width: 600px) {
    .mud-table .mud-icon-button,
    .mud-data-grid .mud-icon-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* Larger text for readability on mobile */
.mud-typography-body1 {
    font-size: 1rem;
}

.mud-typography-body2 {
    font-size: 0.9rem;
}

/* Full-width containers on mobile */
.mud-container {
    padding: 8px !important;
    max-width: 100% !important;
}

/* Cards: stack vertically with minimal margins */
.mud-card {
    margin-bottom: 12px;
    border-radius: 8px;
}

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

/* Tables: horizontal scroll, card-style rows on mobile */
.mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mud-table {
    min-width: 100%;
}

/* Order items table - special handling */
.order-items-table .mud-table-container,
.delivery-items-table .mud-table-container {
    height: auto !important;
    max-height: none !important;
}

/* Compact icon buttons inside the table so action buttons fit in one row */
.order-items-table .mud-icon-button {
    min-width: 32px !important;
    min-height: 32px !important;
    width: 32px;
    height: 32px;
    padding: 4px;
}

/* Hide table headers on mobile, use DataLabel instead */
@media (max-width: 599.95px) {
    .mud-table-head {
        display: none;
    }
    
    .mud-table-body .mud-table-row {
        display: block;
        margin-bottom: 12px;
        border: 1px solid rgba(0,0,0,0.12);
        border-radius: 8px;
        padding: 8px;
        background: var(--mud-palette-surface);
    }
    
    .mud-table-body .mud-table-cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    
    .mud-table-body .mud-table-cell:last-child {
        border-bottom: none;
    }
    
    .mud-table-body .mud-table-cell::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        margin-right: 12px;
        flex-shrink: 0;
    }
}

/* Dialogs: full-screen on mobile */
.mud-dialog {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.mud-dialog-content {
    padding: 12px !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

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

/* Forms: full-width inputs */
.mud-input, .mud-input-control {
    font-size: 16px !important; /* Prevents zoom on iOS */
}

/* Grids: stack on mobile */
.mud-grid {
    margin: 0 !important;
}

.mud-grid > .mud-grid-item {
    padding: 4px !important;
}

/* Chips: compact on mobile */
.mud-chip {
    height: 28px;
    font-size: 0.8rem;
}

.mud-chipset {
    flex-wrap: wrap;
    gap: 4px;
}

/* AppBar: compact */
.mud-appbar {
    padding: 4px 8px !important;
    min-height: 56px;
}

.mud-appbar .mud-typography-h6 {
    font-size: 1.1rem;
}

/* Snackbar: bottom positioned */
.mud-snackbar-provider {
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
}

.mud-snackbar {
    width: 100% !important;
    max-width: 100% !important;
}

/* List items: touch-friendly */
.mud-list-item {
    padding: 12px 16px !important;
    min-height: 48px;
}

/* Pagination: compact */
.mud-table-pagination {
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px;
}

.mud-table-pagination-actions {
    margin-left: 0 !important;
}

/* Stepper: vertical on mobile */
.mud-stepper {
    flex-direction: column !important;
}

.mud-step-label-content {
    font-size: 0.9rem;
}

/* Tabs: scrollable on mobile */
.mud-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mud-tab {
    min-width: auto;
    padding: 8px 12px;
    font-size: 0.85rem;
}

/* Date/Time pickers: full-width */
.mud-picker-paper {
    max-width: 100% !important;
    width: 100% !important;
}

/* Select dropdowns: full-width */
.mud-select-popover, .mud-autocomplete-popover {
    max-width: 100% !important;
}

/* Timeline: compact */
.mud-timeline-item-opposite {
    display: none;
}

.mud-timeline-item-content {
    padding-left: 8px;
}

/* Expansion panels: full-width */
.mud-expand-panel {
    margin: 4px 0;
}

/* Speed dial / FAB positioning */
.mud-speed-dial {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    z-index: 1100 !important;
}

/* AI Assistant FAB - prevent overlap with page content */
.ai-assistant {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 1200;
    width: fit-content;
    pointer-events: none;
}

.ai-assistant .ai-assistant-toggle {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    pointer-events: auto;
}

.ai-assistant.open .ai-assistant-panel {
    position: fixed;
    bottom: 80px;
    left: 16px;
    width: 380px;
    max-height: 60vh;
    z-index: 1200;
    pointer-events: auto;
}

@media (max-width: 600px) {
    .ai-assistant {
        bottom: 72px; /* Above bottom nav if present */
        left: 12px;
    }

    .ai-assistant.open .ai-assistant-panel {
        width: calc(100vw - 24px);
        left: 12px;
        bottom: 136px;
        max-height: 50vh;
    }

    /* Add bottom padding so FAB doesn't overlap last row of content */
    .mud-main-content, .mud-container {
        padding-bottom: 80px !important;
    }
}

/* Hide desktop-only elements on mobile */
.hide-on-mobile {
    display: none !important;
}

/* Stack buttons on mobile */
.mud-button-group {
    flex-wrap: wrap;
    gap: 4px;
}

/* Order cards mobile-friendly */
.order-card-mobile {
    display: block !important;
}

.order-card-mobile .order-status {
    margin-top: 8px;
}

/* ============================================================
   SMALL TABLETS (600px - 768px)
   ============================================================ */
@media (min-width: 600px) {
    .mud-container {
        padding: 12px !important;
    }
    
    .mud-table-head {
        display: table-header-group;
    }
    
    .mud-table-body .mud-table-row {
        display: table-row;
        margin-bottom: 0;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    
    .mud-table-body .mud-table-cell {
        display: table-cell;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(0,0,0,0.12);
    }
    
    .mud-table-body .mud-table-cell::before {
        display: none;
    }
    
    .mud-dialog {
        max-width: 90% !important;
        margin: 24px auto !important;
        border-radius: 4px !important;
    }
    
    .hide-on-mobile {
        display: initial !important;
    }
    
    .show-on-mobile-only {
        display: none !important;
    }
}

/* ============================================================
   TABLETS (768px - 1024px)
   ============================================================ */
@media (min-width: 768px) {
    .mud-container {
        padding: 16px !important;
    }

    /* 2-column layout for forms */
    .mud-form .mud-grid-item {
        flex-basis: 50%;
        max-width: 50%;
    }

    .mud-drawer {
        width: 280px;
    }
    
    .mud-dialog {
        max-width: 600px !important;
    }
    
    .mud-stepper {
        flex-direction: row !important;
    }
}

/* ============================================================
   DESKTOP (1024px+)
   ============================================================ */
@media (min-width: 1024px) {
    .mud-container {
        padding: 24px !important;
        max-width: 1400px !important;
    }

    .mud-drawer {
        width: 280px;
    }
    
    .mud-dialog {
        max-width: 800px !important;
    }
    
    /* 3-column layout for large forms */
    .mud-form .mud-grid-item.col-large-4 {
        flex-basis: 33.333%;
        max-width: 33.333%;
    }
}

/* ============================================================
   LANDSCAPE MODE
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .mud-appbar {
        min-height: 48px !important;
    }
    
    .mud-dialog {
        max-height: 95vh !important;
    }
    
    .mud-dialog-content {
        max-height: calc(95vh - 100px);
    }
}

/* ============================================================
   MOBILE TABLE CARD VIEW - ACTION BUTTONS FIX
   ============================================================ */
@media (max-width: 599px) {
    /* Remove fixed height on mobile for full content visibility */
    .mud-table-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Ensure table itself doesn't clip content */
    .mud-table {
        overflow: visible !important;
    }
    
    /* Card view - make actions row prominent */
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Действия"],
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Actions"],
    .mud-table-body .mud-table-row .mud-table-cell[data-label="მოქმედებები"] {
        display: flex !important;
        justify-content: center !important;
        gap: 12px;
        padding: 16px !important;
        background: rgba(var(--mud-palette-primary-rgb), 0.08);
        border-radius: 0 0 8px 8px;
        margin-top: 8px;
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    
    /* Make action buttons bigger and more tappable on mobile */
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Действия"] .mud-icon-button,
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Actions"] .mud-icon-button,
    .mud-table-body .mud-table-row .mud-table-cell[data-label="მოქმედებები"] .mud-icon-button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        border-radius: 50%;
        background: var(--mud-palette-surface);
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
    
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Действия"] .mud-icon-button:active,
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Actions"] .mud-icon-button:active,
    .mud-table-body .mud-table-row .mud-table-cell[data-label="მოქმედებები"] .mud-icon-button:active {
        transform: scale(0.95);
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    
    /* Bigger icons inside buttons */
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Действия"] .mud-icon-button .mud-icon-root,
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Actions"] .mud-icon-button .mud-icon-root,
    .mud-table-body .mud-table-row .mud-table-cell[data-label="მოქმედებები"] .mud-icon-button .mud-icon-root {
        font-size: 24px !important;
    }
    
    /* Status column - ensure it's visible */
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Статус"],
    .mud-table-body .mud-table-row .mud-table-cell[data-label="Status"],
    .mud-table-body .mud-table-row .mud-table-cell[data-label="სტატუსი"] {
        padding: 12px 16px !important;
    }
    
    /* Fix tabs overflow on order management page */
    .mud-tabs {
        overflow: visible !important;
    }
    
    .mud-tabs-panels {
        overflow: visible !important;
    }
}

/* ============================================================
   TOUCH-SPECIFIC (no hover capability)
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    /* Increase spacing for touch targets */
    .mud-button-group .mud-button {
        margin-right: 8px;
    }

    /* Remove hover effects on touch devices */
    .mud-button:hover,
    .mud-list-item:hover,
    .mud-table-row:hover {
        background-color: inherit !important;
    }

    /* Show active/pressed state instead */
    .mud-button:active,
    .mud-list-item:active,
    .mud-table-row:active {
        opacity: 0.7;
        transition: opacity 0.1s;
    }
    
    /* Larger tap targets for all icon buttons */
    .mud-icon-button {
        min-width: 48px;
        min-height: 48px;
    }
}

/* ============================================================
   DARK MODE MOBILE
   ============================================================ */
@media (prefers-color-scheme: dark) {
    .mud-table-body .mud-table-row {
        border-color: rgba(255,255,255,0.12);
    }
    
    .mud-table-body .mud-table-cell {
        border-color: rgba(255,255,255,0.06);
    }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-fab,
    .mud-speed-dial,
    .mud-snackbar,
    .mud-dialog-overlay {
        display: none !important;
    }

    .mud-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .mud-table {
        page-break-inside: avoid;
    }
    
    .mud-table-head {
        display: table-header-group !important;
    }
}

/* ============================================================
   ORDER TABLE SCROLL WRAPPER
   Ensures the wide items table scrolls horizontally within
   its container on narrow viewports (landscape phones, tablets)
   rather than overflowing the entire page.
   ============================================================ */
.order-table-scroll-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scroll shadow indicators so user knows content extends left/right */
.order-table-scroll-wrapper {
    background:
        linear-gradient(to right, var(--mud-palette-surface) 20px, transparent 20px),
        linear-gradient(to left,  var(--mud-palette-surface) 20px, transparent 20px),
        radial-gradient(ellipse at left center,  rgba(0,0,0,.12) 0, transparent 70%) 0 center,
        radial-gradient(ellipse at right center, rgba(0,0,0,.12) 0, transparent 70%) 100% center;
    background-attachment: local, local, scroll, scroll;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
}


.text-truncate-mobile {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 600px) {
    .text-truncate-mobile {
        max-width: none;
    }
}

.stack-on-mobile {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 600px) {
    .stack-on-mobile {
        flex-direction: row;
    }
}

.full-width-mobile {
    width: 100%;
}

@media (min-width: 600px) {
    .full-width-mobile {
        width: auto;
    }
}