/* Global responsive behaviour shared by all templates.
   Loaded AFTER each template's inline <style> so its rules win without
   needing to bump every selector. */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* iOS Safari auto-zooms when a focused form control has font-size < 16px.
   Many inputs in the app use Tailwind's text-sm (14px). Force 16px on
   phones so focusing never triggers a viewport zoom. */
@media (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    select,
    textarea,
    .cb-search,
    .cb-trigger {
        font-size: 16px !important;
    }
    select.w-full option {
        font-size: 16px !important;
    }
}

/* Modal scroll behaviour (all viewports).
   Make the modal wrapper itself the scroll container so a tall form
   doesn't need an inner scrollbar. Scrollbars are hidden visually but
   scrolling still works (touch / wheel). */
div[id$="-modal"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div[id$="-modal"]::-webkit-scrollbar { display: none; }

/* Strip any inner scroll/clamp on forms inside modals so the wrapper is
   the single scroll container. */
div[id$="-modal"] form {
    max-height: none !important;
    overflow: visible !important;
}
div[id$="-modal"] form::-webkit-scrollbar { display: none; }

/* Modal cards on mobile.
   All modals follow the same shape:
     <div id="*-modal" class="fixed inset-0 ... flex items-center justify-center">
        <div class="bg-white rounded-2xl ... mx-4 max-w-md ...">
   On phones the inner card spans the full viewport horizontally with
   no margin and no rounded corners. The wrapper aligns to the top so a
   tall form (or one with the keyboard open) stays reachable from the
   first field down. */
@media (max-width: 640px) {
    div[id$="-modal"] {
        align-items: flex-start !important;
        padding: 0 !important;
    }
    div[id$="-modal"] > div:first-child {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        min-height: 100vh;
    }
    /* Combobox panel can extend to viewport edges on phones too. */
    .cb-panel {
        max-width: 100vw !important;
    }
    /* Lightbox image can use the full screen on phones. */
    #lightbox #lb-img {
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
}