/* =========================================================
   MOBILE LAYOUT ADJUSTMENTS (MOBIEL)
   ========================================================= */
@media (max-width: 768px) {
    /* Stack side-by-side columns vertically on smaller screens */
    .lineup-editor-container {
        flex-direction: column;
        gap: 12px;
    }

    /* =========================================================
       COMPACT SPEELSCHEMA (Lineup) OP MOBIEL
       ========================================================= */
    .lineup-item, .reserve-item {
        min-height: 38px !important;
        margin-bottom: 6px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 16px !important;
    }

    .lineup-item input, .reserve-item input {
        min-height: 36px !important;
        height: 36px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Slightly increase base font size for easy reading in dark venues */
    body {
        font-size: 18px !important;
    }

    /* =========================================================
       FIX NATIVE PULL-TO-REFRESH & PAGE SCROLLING
       ========================================================= */
    /* Verwijder de lock op de body zodat iOS native kan bouncen en scrollen */
    html, body {
        height: auto !important;
        overflow: visible !important;
        overscroll-behavior-y: auto !important;
    }
    
    main {
        height: auto !important;
        overflow: visible !important;
        flex: none !important;
    }

    /* =========================================================
       FIX ONKLIKBARE ZWEVENDE KNOP (FAB)
       ========================================================= */
    /* Zorg dat de FAB altijd boven alles ligt en interactief is als hij zichtbaar is */
    #btn-scroll-top {
        z-index: 9999 !important;
        bottom: 100px !important;
        cursor: pointer;
    }
    
    #btn-scroll-top.opacity-100 {
        pointer-events: auto !important;
    }

    /* =========================================================
       TABEL NAAR CARDS CONVERSIE (Mobiel)
       ========================================================= */
    /* Forceer de tabel om zich als blokken te gedragen */
    table, thead, tbody, th, td, tr {
        display: block;
        width: 100%;
    }

    /* Overschrijf Tailwind's vaste 'min-w-[1250px]' die het uitzoomen veroorzaakte */
    table {
        min-width: 0 !important;
    }

    /* Verberg de originele tabel headers op mobiel */
    thead {
        display: none;
    }

    /* Maak van elke artiest-rij een afzonderlijke 'card' */
    tbody tr {
        margin-bottom: 16px;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px;
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* Dark mode styling voor cards */
    html.dark tbody tr {
        background-color: #1f2937;
        border-color: #374151;
    }

    /* Cellen netjes onder elkaar zetten zonder standaard tabelranden */
    tbody td {
        border: none !important;
        padding: 8px 0 !important;
        display: flex;
        flex-direction: column;
    }

    /* Scheidinglijn vlak boven de Acties-knoppen voor een clean design */
    tbody td:last-child {
        margin-top: 12px;
        padding-top: 16px !important;
        border-top: 1px solid #f3f4f6 !important;
    }

    html.dark tbody td:last-child {
        border-top-color: #374151 !important;
    }
    
    /* Actieknoppen (Bewerk/Verwijder) links uitlijnen binnen de mobiele card */
    tbody td:last-child > div {
        justify-content: flex-start !important;
    }

    /* =========================================================
       FIX HORIZONTAAL SCROLLEN (Header & Filters)
       ========================================================= */
    header > div.flex {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }
    
    header .flex, main .flex {
        flex-wrap: wrap !important;
    }

    header .relative {
        width: 100% !important;
        flex-basis: 100% !important;
        margin-top: 12px;
        order: 99;
    }
    
    #search-input { width: 100% !important; max-width: none !important; }

    select { flex: 1 1 calc(50% - 12px); max-width: 100%; white-space: normal !important; }

    /* =========================================================
       LEESBAARHEID & IOS OPTIMALISATIE
       ========================================================= */
    input, select, textarea { font-size: 16px !important; }
    
    tbody td, tbody td div, tbody td span { font-size: 16px !important; line-height: 1.5; }
    tbody td .font-medium { font-size: 20px !important; font-weight: bold !important; }
    tbody td .text-xs { font-size: 16px !important; }
}