/* Mobile Adaptation for DJ Manager */
@media screen and (max-width: 768px) {

    /* Main Layout Reset */
    #root {
        display: block !important;
        overflow-x: hidden;
    }

    body {
        overflow-x: hidden;
    }

    /* Sidebar - Off-canvas */
    aside {
        display: block !important;
        /* Force render if React hides it */
        position: fixed;
        top: 0;
        left: -100%;
        width: 80% !important;
        max-width: 300px;
        height: 100vh;
        z-index: 2000;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
    }

    body.mobile-sidebar-open aside {
        left: 0;
    }

    /* Overlay */
    body.mobile-sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        backdrop-filter: blur(2px);
    }

    /* Main Content Area */
    main {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 60px !important;
        /* Space for header */
    }

    /* Mobile Header (Injected) */
    .mobile-header {
        display: flex !important;
        align-items: center;
        width: 100%;
        height: 50px;
        background-color: var(--bg-card, #1f2937);
        /* Fallback dark */
        border-bottom: 1px solid #374151;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 900;
        padding: 0 1rem;
        color: white;
    }

    /* Adjust Grid/Flex in React App */
    .grid {
        grid-template-columns: 1fr !important;
    }

    .flex-row {
        flex-direction: column !important;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* ============================================= */
    /* NEW: Modal/Form Layout Fixes */
    /* ============================================= */

    /* Fix modal to stack vertically on mobile */
    .fixed.inset-0>div,
    [class*="rounded-2xl"][class*="shadow-2xl"] {
        flex-direction: column !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        width: 95vw !important;
        max-width: 95vw !important;
    }

    /* Equipment selection panel - make it accessible on mobile */
    .fixed.inset-0>div>div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        border-top: 1px solid #374151;
        border-left: none !important;
        padding: 1rem !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }

    /* ============================================= */
    /* NEW: Mileage Log / Fahrtenbuch Responsive */
    /* ============================================= */

    /* Forms with multiple columns should stack */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4,
    .grid.grid-cols-5,
    .grid.grid-cols-6 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Tables should scroll horizontally but not overflow page */
    table {
        display: block !important;
        overflow-x: auto !important;
        max-width: calc(100vw - 2rem) !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 0.85rem;
    }

    /* Input fields full width */
    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Cards and containers should not overflow */
    .bg-white,
    .dark\:bg-gray-800,
    [class*="rounded-xl"],
    [class*="rounded-lg"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Flex containers should wrap */
    .flex {
        flex-wrap: wrap !important;
    }

    /* Space adjustments */
    .space-x-4>*+*,
    .space-x-2>*+* {
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
    }

    /* Button groups should stack or wrap */
    .flex.items-center.space-x-2,
    .flex.gap-3,
    .flex.gap-4 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Ensure main content padding */
    main>div {
        padding: 1rem !important;
        max-width: 100% !important;
    }
}