/* ================================================================
   AI Frame — Mobile Responsive Layer v1.2
   Doel: alle pagina's correct op mobiel (iOS/Android)
   Strategie:
     - Zo min mogelijk overflow: auto op nested containers
     - iOS scroll = window scroll (geen nested scroll-contexts)
     - Studio fullpage: hoogte aanpassen voor bottom nav
     - Geen touch-action of -webkit-overflow-scrolling op nested divs
   ================================================================ */

/* ================================================================
   BREAKPOINTS
   - 900px : mobiel (bottom-nav zichtbaar)
   - 600px : klein mobiel
   ================================================================ */

/* ================================================================
   1. ADMIN PAGES — WordPress dashboard
   ================================================================ */
@media screen and (max-width: 782px) {

    /* Prevent horizontal scroll on all admin wrap */
    .imgx-wrap, .imgx-dash-wrap, .imgx-history-wrap,
    .imgx-settings-wrap, .imgx-bhist-wrap, .imgx-rbg-wrap,
    .imgx-brand-wrap, .imgx-proc-wrap, .bulk-editor-wrap,
    .imgx-queue-page-wrap {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Page header */
    .imgx-page-header {
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .imgx-page-header h1, .imgx-ph-title { font-size: 16px !important; }
    .imgx-page-header .imgx-ph-actions { flex-wrap: wrap !important; gap: 6px !important; }

    /* Dashboard KPI */
    .imgx-dash-kpi-row { flex-direction: column !important; }
    .imgx-dash-grid { grid-template-columns: 1fr !important; }

    /* Studio admin */
    .ia-studio-body { flex-direction: column !important; }
    .ia-studio-editor {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    .ia-field-row { grid-template-columns: 1fr !important; }

    /* Bulk admin */
    .bulk-split, .imgx-layout.bulk-split {
        flex-direction: column !important;
        height: auto !important;
    }

    /* Settings: form table stack */
    .form-table td, .form-table th { display: block !important; width: 100% !important; }

    /* General */
    .imgx-stat-grid { grid-template-columns: 1fr !important; }
    .imgx-two-col { grid-template-columns: 1fr !important; }

    /* Sticky nav icon-only */
    .imgx-snav-label { display: none !important; }

    /* ── Admin Users / Settings tabel responsive ── */

    /* Tabellen horizontaal scrollbaar */
    .imgx-section-card,
    .imgx-settings-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Tabel kolommen compacter */
    .widefat th, .widefat td {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    /* Stat boxes stapelen */
    .imgx-admin-stat-box,
    .imgx-stat-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .imgx-admin-stat-box > div {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* User detail pagina — kolommen stapelen */
    .imgx-user-detail-grid,
    .imgx-detail-grid {
        grid-template-columns: 1fr !important;
    }

    /* Section cards — minder padding */
    .imgx-section-card {
        padding: 12px !important;
        border-radius: 8px !important;
    }

    /* Knoppen in tabel — compacter */
    .widefat .button,
    .widefat .button-small {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    /* Settings body — minder padding */
    .imgx-settings-body {
        padding: 12px !important;
    }

    /* Impersonatie bar */
    .imgx-impersonate-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* Admin wordmark kleiner */
    .imgx-wordmark {
        font-size: 16px !important;
    }

    /* Token/plan info compacter */
    .imgx-admin-count-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    /* Form inputs volle breedte */
    .imgx-settings-body input[type="text"],
    .imgx-settings-body input[type="number"],
    .imgx-settings-body input[type="email"],
    .imgx-settings-body input[type="search"],
    .imgx-settings-body select,
    .imgx-settings-body textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ================================================================
   2. FRONTEND — bottom nav aanwezig (≤900px)
   ================================================================ */
@media (max-width: 900px) {

    /* ── 2a. STUDIO FULLPAGE: op mobiel scrollen i.p.v. fixed-height ──
       Desktop: height: calc(100vh - ...) met interne scroll-panels
       Mobiel: pagina scrollt normaal, geen fixed height.
       De ia-studio-body (met de left/right panelen) stacked verticaal en
       scrollt als onderdeel van de normale window scroll. */
    body:not(.wp-admin) .imgx-page[data-imgx-studio] {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* ── 2b. STUDIO BODY: stack left/right panelen, window scroll ──
       Niet overflow:auto — dan ontstaan geneste scroll-contexten op iOS.
       Laat de window/body de scroll afhandelen. */
    body:not(.wp-admin) [data-imgx-studio] .ia-studio-body {
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
    }

    /* ── 2c. STUDIO EDITOR: vaste breedte opheffen ── */
    body:not(.wp-admin) [data-imgx-studio] .ia-studio-editor {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    /* ── 2d. STUDIO FIELDS ── */
    body:not(.wp-admin) [data-imgx-studio] .ia-field-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    body:not(.wp-admin) [data-imgx-studio] .ia-studio-head {
        padding: 14px 16px 10px !important;
    }
    body:not(.wp-admin) [data-imgx-studio] .ia-studio-field {
        padding: 0 16px 14px !important;
    }
    body:not(.wp-admin) [data-imgx-studio] .ia-prompt-labelrow {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    body:not(.wp-admin) [data-imgx-studio] .ia-prompt-actions {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* ── 2e. RES CARDS ── */
    body:not(.wp-admin) [data-imgx-studio] .ia-res-card {
        height: 50px !important;
        padding: 6px 8px !important;
    }
    body:not(.wp-admin) [data-imgx-studio] .ia-res-card-label {
        font-size: 16px !important;
    }

    /* ── 2f. CREDIT METER: geen white-space nowrap ── */
    body:not(.wp-admin) [data-imgx-studio] .ia-credit-meter-row,
    body:not(.wp-admin) .ia-studio[data-imgx-studio] .ia-credit-meter-row {
        white-space: normal !important;
        flex-wrap: wrap !important;
    }

    /* ── 2g. TOPBAR: horizontaal scrollbaar, breadcrumbs compact ── */
    body:not(.wp-admin) .ia-topbar {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        scrollbar-width: none !important;
    }
    body:not(.wp-admin) .ia-topbar::-webkit-scrollbar { display: none !important; }
    body:not(.wp-admin) .ia-topbar-crumb:not(.ia-topbar-crumb-active) {
        display: none !important;
    }

    /* ── 2h. MODE PILL (Single|Bulk tabs) ── */
    body:not(.wp-admin) .ia-mode-pill {
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
    body:not(.wp-admin) .ia-mode-tab {
        padding: 0 8px !important;
        gap: 4px !important;
    }
    body:not(.wp-admin) .ia-mode-tab span { display: none !important; }
    body:not(.wp-admin) .ia-topbar-actions .ia-btn span:not(.ia-topbar-crumb) {
        display: none !important;
    }

    /* ── 2i. BULK COLS: padding verkleinen ── */
    body:not(.wp-admin) [data-imgx-studio="bulk"] .ia-bulk-cols,
    body:not(.wp-admin) [data-imgx-studio="cutout"] .ia-bulk-cols {
        padding: 0 14px 20px !important;
        grid-template-columns: 1fr !important;
    }
    body:not(.wp-admin) [data-imgx-studio="bulk"] .ia-result-head,
    body:not(.wp-admin) [data-imgx-studio="cutout"] .ia-result-head {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 14px 10px !important;
    }
    body:not(.wp-admin) [data-imgx-studio="bulk"] .ia-bulk-jobs-head,
    body:not(.wp-admin) [data-imgx-studio="cutout"] .ia-bulk-jobs-head {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    body:not(.wp-admin) [data-imgx-studio="bulk"] .ia-bulk-jobs-actions,
    body:not(.wp-admin) [data-imgx-studio="cutout"] .ia-bulk-jobs-actions {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* ── 2j. VRIJSTAAND (cutout): ia-bulk-jobs overflow fix voor file-input ──
       overflow:hidden op ia-bulk-jobs blokkeert file picker op iOS Safari */
    body:not(.wp-admin) [data-imgx-studio="cutout"] .ia-bulk-jobs {
        overflow: visible !important;
    }
    body:not(.wp-admin) [data-imgx-studio="cutout"] .ia-bulk-jobs-head {
        overflow: visible !important;
        position: relative !important;
        z-index: 2 !important;
    }
    /* Upload label: expliciete touch target */
    body:not(.wp-admin) [data-imgx-studio="cutout"] label.bulk-add-btn {
        display: inline-flex !important;
        align-items: center !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 10 !important;
        touch-action: manipulation !important;
        min-height: 36px !important;
    }
    /* Dropzone: klikbaar op mobiel (geen drag-drop) */
    body:not(.wp-admin) [data-imgx-studio="cutout"] .ia-bulk-dropzone {
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    body:not(.wp-admin) [data-imgx-studio="cutout"] .ia-bulk-dropzone-inner {
        pointer-events: none !important;
    }

    /* ── 2k. ANALYSER: min-width opheffen ── */
    body:not(.wp-admin) [data-imgx-studio="analyser"] .ia-analyser-left {
        min-width: 0 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body:not(.wp-admin) [data-imgx-studio="analyser"] .ia-analyser-drop-wrap {
        margin: 0 16px 14px !important;
    }
    body:not(.wp-admin) [data-imgx-studio="analyser"] .ia-analyser-dropzone {
        padding: 20px 16px !important;
        min-height: 200px !important;
    }
    body:not(.wp-admin) [data-imgx-studio="analyser"] .ia-analyser-right {
        width: 100% !important;
    }
    body:not(.wp-admin) [data-imgx-studio="analyser"] .ia-result-head {
        padding: 12px 16px 10px !important;
        flex-wrap: wrap !important;
    }

    /* ── 2l. REFINE EDITOR: grid → verticale layout ── */
    body:not(.wp-admin) [data-imgx-studio="refine"] .ia-refine-shell {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 50vh !important;
        overflow: visible !important;
    }
    /* Rail: horizontaal bovenaan */
    body:not(.wp-admin) [data-imgx-studio="refine"] .ia-refine-rail {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 8px 12px !important;
        gap: 6px !important;
        border-right: none !important;
        border-bottom: 1px solid #EDEBE3 !important;
        min-height: 54px !important;
        scrollbar-width: none !important;
    }
    body:not(.wp-admin) [data-imgx-studio="refine"] .ia-refine-rail::-webkit-scrollbar { display: none !important; }
    body:not(.wp-admin) [data-imgx-studio="refine"] .ia-refine-tool {
        width: 36px !important; height: 36px !important; flex-shrink: 0 !important;
    }
    body:not(.wp-admin) [data-imgx-studio="refine"] .ia-refine-canvas-wrap {
        min-height: 50vh !important;
    }
    body:not(.wp-admin) [data-imgx-studio="refine"] .ia-refine-canvas-toolbar {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        scrollbar-width: none !important;
    }
    body:not(.wp-admin) [data-imgx-studio="refine"] .ia-refine-canvas-toolbar::-webkit-scrollbar { display: none !important; }
    body:not(.wp-admin) [data-imgx-studio="refine"] .ia-refine-format-pills {
        flex-shrink: 0 !important; flex-wrap: nowrap !important; gap: 4px !important;
    }

    /* ── 2m. RESULTATEN PAGINA — scroll fix ── */
    /* Frontend.css gebruikt hoge-specificiteit selector:
       body:not(.wp-admin) .imgx-wrap.imgx-history-wrap { height:100vh; overflow:hidden }
       Onze override moet exact dezelfde of hogere specificiteit hebben. */

    /* Outer wrap: van fixed-height naar auto */
    body:not(.wp-admin) .wrap.imgx-wrap:has(.imgx-history-wrap),
    body:not(.wp-admin) .imgx-wrap.imgx-history-wrap {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        overflow-x: hidden !important;
    }

    /* imgx-history-wrap zelf (is ook .imgx-wrap) */
    body:not(.wp-admin) .imgx-wrap.imgx-history-wrap {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* History body: niet intern scrollen — pagina scrollt */
    body:not(.wp-admin) .imgx-wrap.imgx-history-wrap .imgx-history-body,
    body:not(.wp-admin) .imgx-history-body {
        height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
        min-height: 0 !important;
        flex: none !important;
    }

    /* Grid: auto hoogte, 2 kolommen op mobiel */
    body:not(.wp-admin) .imgx-history-wrap #imgx-history-grid[data-view="grid"] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 10px !important;
        padding: 14px !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Head: wrap op kleine schermen */
    body:not(.wp-admin) .imgx-history-wrap .imgx-history-head {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 14px !important;
    }
    body:not(.wp-admin) .imgx-history-wrap .imgx-history-head-actions,
    body:not(.wp-admin) .imgx-history-wrap .imgx-hist-toolbar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Lege staat CTA */
    body:not(.wp-admin) .imgx-history-wrap .imgx-hist-empty-cta {
        padding: 24px 16px !important;
    }

    /* ── 2n. STIJLANALYSER (standalone pagina) ── */
    body:not(.wp-admin) .imgx-sa-body {
        padding: 16px 14px 80px !important;
    }
    body:not(.wp-admin) .imgx-sa-dropzone {
        padding: 24px 16px !important;
    }
    body:not(.wp-admin) .imgx-sa-analyse-row {
        width: 100% !important;
    }
    body:not(.wp-admin) .imgx-sa-analyse-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── 2o. GLOBAAL: horizontale overflow voorkomen ── */
    body:not(.wp-admin) .imgx-page,
    body:not(.wp-admin) .imgx-fullpage,
    body:not(.wp-admin) #imgx-page-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ── 2p. CE TOPBAR (refine canvas topbar) ── */
    body:not(.wp-admin) .imgx-ce-topbar {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 0 10px !important;
        scrollbar-width: none !important;
    }
    body:not(.wp-admin) .imgx-ce-topbar::-webkit-scrollbar { display: none !important; }
}

/* ================================================================
   3. KLEIN MOBIEL — extra compact (≤600px)
   ================================================================ */
@media (max-width: 600px) {

    body:not(.wp-admin) .imgx-history-wrap #imgx-history-grid[data-view="grid"] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        padding: 10px !important;
    }

    body:not(.wp-admin) .imgx-page-header {
        padding: 10px 14px !important;
    }

    body:not(.wp-admin) .imgx-settings-body {
        padding: 16px 14px 80px !important;
    }
}

/* ================================================================
   4. PADDING-BOTTOM FIX — studio fixed-height pagina's
   ================================================================
   frontend.css regel 342 geeft .imgx-fullpage en .imgx-page
   padding-bottom: calc(var(--ix-btm-h) + 12px) = ~80px op mobiel.
   Studio/history pagina's zijn fixed-height (height: calc(100vh - ...))
   en mogen GEEN padding-bottom hebben — dat creëert de extra marge
   die zichtbaar is in de screenshots.
   ================================================================ */
@media (max-width: 900px) {

    /* Studio: fixed-height, geen padding-bottom nodig */
    body:not(.wp-admin) .imgx-page[data-imgx-studio],
    body:not(.wp-admin) .imgx-fullpage[data-imgx-studio] {
        padding-bottom: 0 !important;
    }

    /* History/Resultaten: normale paginascroll — padding-bottom voor bottom nav */
    body:not(.wp-admin) .imgx-fullpage:has(.imgx-history-wrap),
    body:not(.wp-admin) .imgx-page:has(.imgx-history-wrap) {
        padding-bottom: calc(var(--ix-btm-h, 60px) + 20px) !important;
    }

    /* Bulk editor wrap: ook fixed-height */
    body:not(.wp-admin) .imgx-fullpage:has(.bulk-editor-wrap),
    body:not(.wp-admin) .imgx-page:has(.bulk-editor-wrap),
    body:not(.wp-admin) .imgx-fullpage:has([data-imgx-studio]),
    body:not(.wp-admin) .imgx-page:has([data-imgx-studio]) {
        padding-bottom: 0 !important;
    }
}

/* ================================================================
   5. iOS SCROLL FIX — overscroll-behavior
   ================================================================
   Op iOS Safari blijft scroll soms "hangen" als er meerdere
   scroll-containers genest zijn. Fix: beperk overscroll op
   inner containers en gebruik momentum scrolling alleen op
   de juiste containers.
   ================================================================ */
@media (max-width: 900px) {

    /* Studio body scroll: momentum + geen bounce buiten bounds */
    body:not(.wp-admin) [data-imgx-studio] .ia-studio-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* History body: op mobiel = normale pagina scroll (geen interne scroll-container) */
    body:not(.wp-admin) .imgx-history-body {
        -webkit-overflow-scrolling: auto;
        overscroll-behavior: auto;
    }

    /* Horizontale scroll-containers: alleen x-richting */
    body:not(.wp-admin) .ia-topbar,
    body:not(.wp-admin) .imgx-tabs,
    body:not(.wp-admin) .ia-refine-rail,
    body:not(.wp-admin) .ia-refine-canvas-toolbar,
    body:not(.wp-admin) .imgx-ce-topbar {
        overscroll-behavior-x: contain;
    }

    /* Voorkom dat body mee-scrollt als inner container scroll eindigt */
    body:not(.wp-admin):has([data-imgx-studio]) {
        overscroll-behavior: none;
    }
}

/* ================================================================
   26. DASHBOARD v2 — mobiel fixes
   .imgx-dash-v2 is een scoped wrapper met eigen CSS-tokens.
   De globale imgx-responsive.css voegt overflow-guard toe.
   ================================================================ */
@media (max-width: 900px) {

    /* Geen horizontale overflow */
    body:not(.wp-admin) .imgx-dash-v2 {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Normale pagina-scroll (geen fixed-height container) */
    body:not(.wp-admin) .imgx-dash-v2 .d2 {
        height: auto !important;
        overflow: visible !important;
    }

    /* Bottom nav ruimte — .d2 padding-bottom is al 84px in scoped CSS,
       maar voeg extra toe als ix-btm-h groter is */
    body:not(.wp-admin) .imgx-dash-v2 {
        padding-bottom: 0 !important; /* d2 regelt het zelf */
    }
}

/* ================================================================
   27. TOKENS PAGINA — fullpage fix
   .ia-tokens-body heeft max-width:1280px maar de achtergrond
   loopt wel full width. Op mobiel padding kleiner.
   ================================================================ */
@media (max-width: 900px) {
    body:not(.wp-admin) .ia-tokens {
        overflow-x: hidden !important;
    }
    body:not(.wp-admin) .ia-tokens-body {
        padding: 16px 14px 84px !important;
        max-width: 100% !important;
    }
    /* Wallet grid: stack op mobiel */
    body:not(.wp-admin) .ia-wallet-grid {
        grid-template-columns: 1fr !important;
    }
    /* Pakket kaarten: wrap */
    body:not(.wp-admin) .ia-token-packages {
        flex-direction: column !important;
        gap: 10px !important;
    }
    body:not(.wp-admin) .ia-token-package {
        width: 100% !important;
    }
}

/* ================================================================
   28. DASHBOARD v2 — globale overflow-guard
   ================================================================ */
@media (max-width: 900px) {
    body:not(.wp-admin) .imgx-dash-v2 {
        overflow-x: hidden !important;
    }
    body:not(.wp-admin) .imgx-dash-v2 .d2v {
        height: auto !important;
        overflow: visible !important;
    }
}