/* Mobile Responsive Styles for Sumerian App */

/* Search bar responsive layout */
.desktop-search-layout {
    display: flex !important;
}

.mobile-search-layout {
    display: none !important;
}

@media (max-width: 768px) {
    .desktop-search-layout {
        display: none !important;
    }
    
    .mobile-search-layout {
        display: flex !important;
    }
}

/* Mobile-specific table improvements */
@media (max-width: 600px) {
    .mud-table {
        font-size: 0.875rem;
    }
    
    .mud-table .mud-table-cell {
        padding: 8px 4px;
    }
    
    .mud-table .mud-table-head .mud-table-cell {
        padding: 8px 4px;
        font-size: 0.75rem;
    }
    
    /* Improve chip spacing on mobile */
    .mud-chip {
        margin: 2px;
        font-size: 0.75rem;
    }
    
    /* Better button sizing for mobile */
    .mud-button {
        min-height: 36px;
    }
    
    /* Improve text field sizing */
    .mud-input-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Better spacing for mobile navigation */
    .mud-nav-menu .mud-nav-link {
        padding: 12px 16px;
    }
    
    /* Improve drawer width on mobile */
    .mud-drawer {
        width: 280px;
    }
    
    /* Better app bar height on mobile */
    .mud-app-bar {
        min-height: 56px;
    }
    
    /* Improve main content padding */
    .mud-main-content {
        padding: 8px;
    }
}

/* Tablet improvements */
@media (min-width: 601px) and (max-width: 960px) {
    .mud-table {
        font-size: 0.9rem;
    }
    
    .mud-table .mud-table-cell {
        padding: 12px 8px;
    }
    
    .mud-main-content {
        padding: 16px;
    }
}

/* Improve touch targets for mobile */
@media (max-width: 600px) {
    .mud-button,
    .mud-chip,
    .mud-nav-link,
    .mud-icon-button {
        min-height: 44px;
        min-width: 44px;
    }
    
    .mud-icon-button {
        padding: 8px;
    }
}

/* Better text wrapping for mobile */
@media (max-width: 600px) {
    .mud-text {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .mud-table-cell {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Improve search field layout on mobile */
@media (max-width: 600px) {
    .mud-text-field {
        width: 100%;
    }
    
    .mud-stack.mud-stack-row {
        flex-wrap: wrap;
    }
}

/* Better spacing for mobile cards */
@media (max-width: 600px) {
    .mud-card {
        margin: 4px;
    }
    
    .mud-card-content {
        padding: 12px;
    }
}

/* Improve mobile table pagination */
@media (max-width: 600px) {
    .mud-table-pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .mud-table-pagination .mud-button {
        min-width: 36px;
        min-height: 36px;
    }
}

/* Better mobile drawer behavior */
@media (max-width: 600px) {
    .mud-drawer.mud-drawer-open {
        width: 280px;
    }
    
    .mud-drawer.mud-drawer-clipped {
        width: 280px;
    }
}

/* Improve mobile typography */
@media (max-width: 600px) {
    .mud-typography-h6 {
        font-size: 1.1rem;
    }
    
    .mud-typography-subtitle1 {
        font-size: 1rem;
    }
    
    .mud-typography-body1 {
        font-size: 0.9rem;
    }
    
    .mud-typography-body2 {
        font-size: 0.85rem;
    }
    
    .mud-typography-caption {
        font-size: 0.75rem;
    }
}