/* Responsive Typography */
@media (max-width: 600px) {
    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }
    
    .mud-typography-h5 {
        font-size: 1.25rem !important;
    }
    
    .mud-typography-h6 {
        font-size: 1.1rem !important;
    }
}

/* Responsive Grid Adjustments */
@media (max-width: 960px) {
    .sf-grid .e-gridheader {
        font-size: 0.875rem;
    }
    
    .sf-grid .e-gridcontent {
        font-size: 0.875rem;
    }
    
    /* Hide less important columns on mobile */
    .sf-grid .e-hide-mobile {
        display: none;
    }
}

/* Mobile-First Card Layouts */
@media (max-width: 600px) {
    .mud-paper {
        margin: 0.5rem !important;
        padding: 1rem !important;
    }
    
    .mud-card-content {
        padding: 1rem !important;
    }
    
    /* Stack buttons vertically on mobile */
    .mud-button-group-root {
        flex-direction: column !important;
        width: 100%;
    }
    
    .mud-button-group-root > * {
        width: 100%;
        border-radius: 4px !important;
        margin: 2px 0 !important;
    }
}

/* Touch-Friendly Controls */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap targets for touch devices */
    .mud-icon-button {
        padding: 12px !important;
    }
    
    .mud-button {
        min-height: 48px !important;
    }
    
    .mud-input input {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* Responsive Navigation */
@media (max-width: 600px) {
    .mud-drawer-content {
        width: 280px !important;
    }
    
    /* Auto-close drawer on mobile after navigation */
    .mud-drawer-overlay {
        display: block !important;
    }
}

/* Dashboard Responsive */
@media (max-width: 960px) {
    /* Stack KPI cards in 2x2 grid on tablets */
    .dashboard-kpi-grid > .mud-grid-item {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 600px) {
    /* Stack KPI cards vertically on mobile */
    .dashboard-kpi-grid > .mud-grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    
    /* Adjust chart heights for mobile */
    .mud-chart {
        height: 250px !important;
    }
}

/* Loading States */
.loading-wrapper {
    position: relative;
    min-height: 200px;
}

.skeleton-animation {
    animation: skeleton-loading 1.5s infinite ease-in-out;
}

@keyframes skeleton-loading {
    0% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
    }
}

/* Smooth Transitions */
.page-transition {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Improve Syncfusion Grid Mobile Experience */
@media (max-width: 600px) {
    .e-grid .e-toolbar {
        flex-wrap: wrap;
    }
    
    .e-grid .e-toolbar .e-toolbar-items {
        width: 100%;
    }
    
    /* Make grid horizontally scrollable on mobile */
    .e-grid {
        overflow-x: auto;
    }
    
    .e-grid .e-gridcontent {
        min-width: 600px;
    }
}