/* S5.5 Mobile Responsive Update - April 2026 */

/* Enhanced mobile navigation */
@media (max-width: 768px) {
    .header-buttons {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .header-buttons a,
    .header-buttons button {
        flex: 1 !important;
        min-width: 100px !important;
        text-align: center !important;
        font-size: 0.875rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* Stats grid improvements */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }

    .stats-grid > div:nth-child(odd):last-child {
        grid-column: span 2;
    }

    /* Table mobile scrolling */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin;
    }

    /* Modal improvements */
    .modal-container {
        margin: 0.5rem !important;
        max-height: calc(100vh - 1rem) !important;
    }

    /* Form improvements */
    .filters-grid,
    .controls-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Touch-friendly toggles */
    .toggle-switch {
        width: 3rem !important;
        height: 1.75rem !important;
    }

    .toggle-slider:before {
        height: 1.25rem !important;
        width: 1.25rem !important;
    }

    /* Better text sizing */
    .text-3xl {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }

    /* Improved spacing */
    .page-padding {
        padding: 1rem !important;
    }

    .section-spacing {
        margin-bottom: 1.5rem !important;
    }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .filters-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* iOS safe area support */
@supports (padding: max(0px)) {
    .page-container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Dark mode mobile enhancements */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .bg-gray-800 {
        background-color: rgb(31 41 55) !important;
    }
    
    .border-gray-700 {
        border-color: rgb(55 65 81) !important;
    }
}