/* =========================================================
   MODALS: DESKTOP & TABLET FIXES
   ========================================================= */
@media (min-width: 769px) {
    /* Zorg dat in formulieren (zoals Sessie Laden) het linker input-vak maximale ruimte pakt */
    [id$="-modal"] .flex.items-end > div,
    [id$="-modal"] .flex:has(select) > div,
    [id$="-modal"] .flex.items-end > select,
    [id$="-modal"] .flex:has(select) > select,
    [id$="-modal"] .flex.items-end > input,
    [id$="-modal"] .flex:has(select) > input {
        flex: 1 1 0% !important;
        min-width: 200px !important;
        width: 100% !important;
    }

    /* Voorkom dat de blauwe actieknop teveel onnodige ruimte pakt */
    [id$="-modal"] .flex.items-end > button,
    [id$="-modal"] .flex:has(select) > button {
        flex: 0 0 auto !important;
        width: auto !important;
        white-space: nowrap !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 14px !important;
        height: fit-content !important;
        align-self: center !important;
    }
}

/* =========================================================
   MODALS: RESPONSIVE & TOUCH-FRIENDLY (MOBIEL)
   ========================================================= */
@media (max-width: 768px) {
    /* Modal Container: Maximaal 95vw breedte om binnen scherm te passen */
    [id$="-modal"] .max-w-sm, [id$="-modal"] .max-w-md, [id$="-modal"] .max-w-lg,
    [id$="-modal"] .max-w-xl, [id$="-modal"] .max-w-2xl, [id$="-modal"] .max-w-3xl,
    [id$="-modal"] .max-w-4xl, [id$="-modal"] .max-w-5xl, [id$="-modal"] .max-w-full {
        width: 95vw !important;
        max-width: 95vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Inputs & Knoppen (Stapelen) voor Sessie Laden etc. */
    [id$="-modal"] .flex.items-end,
    [id$="-modal"] .flex:has(select) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    [id$="-modal"] .flex.items-end > select,
    [id$="-modal"] .flex.items-end > button,
    [id$="-modal"] .flex.items-end > div,
    [id$="-modal"] .flex.items-end > input,
    [id$="-modal"] .flex:has(select) > select,
    [id$="-modal"] .flex:has(select) > button,
    [id$="-modal"] .flex:has(select) > div,
    [id$="-modal"] .flex:has(select) > input {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }

    /* Footer Actieknoppen: Verticaal stapelen, primaire knop bovenaan via column-reverse */
    [id$="-modal"] .flex.justify-end {
        flex-direction: column-reverse !important; align-items: stretch !important; gap: 12px !important;
    }

    [id$="-modal"] .flex.justify-end button {
        width: 100% !important; margin-left: 0 !important; margin-bottom: 0 !important;
    }

    /* Uitzondering voor de kruisje-knop (sluiten) rechtsboven */
    [id$="-modal"] button[data-close] {
        width: 44px !important; margin-top: 0 !important; margin-bottom: 0 !important;
    }
}

/* =========================================================
   FULL-PAGE VIEW (Speelschema in nieuw tabblad)
   ========================================================= */
body.speelschema-view > header,
body.speelschema-view > main,
body.speelschema-view > #btn-scroll-top,
body.speelschema-view > #ptr-container {
    display: none !important;
}

/* Forceert dat de modal ALTIJD open is in deze weergave */
body.speelschema-view #lineup-modal {
    display: flex !important; 
    background: transparent !important;
}

/* Forceer de daadwerkelijke card om het hele scherm over te nemen */
body.speelschema-view #lineup-modal > div:not(.fixed):not(.absolute),
body.speelschema-view #lineup-modal > div.relative {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Elastische, Scrollbare Content (Flex-ruimte pakken en soepel scrollen op iOS) */
body.speelschema-view #lineup-modal .overflow-y-auto,
body.speelschema-view #lineup-modal .modal-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Verberg eventuele donkere achtergrond-overlay (kruisje blijft zichtbaar om te sluiten/terug te gaan!) */
body.speelschema-view #lineup-modal > div.fixed.inset-0,
body.speelschema-view #lineup-modal > div.absolute.inset-0 {
    display: none !important;
}