/* 14-09-2026: telefoonlaag voor alle IMS-schillen (Main, Client, Sales, Systemen, Financiën, Dashboard, Leads, Jarvis …).
   De layouts hebben elk een eigen desktop-zijbalk van 250-280px; op de telefoon wordt die zijbalk een lade achter één
   vaste balk bovenin (ims-mobiel.js zet html.ims-mobiel zodra er een bekende zijbalk op de pagina staat). Alles houdt
   rekening met de notch/statusbalk (safe-area) en het toetsenbord (--ims-vvh/--ims-vv-top uit visualViewport). */

.ims-mbalk, .ims-mlade-sluit, .ims-mlade-achter { display: none; }

@media (max-width: 768px) {
    /* ── Vaste balk bovenin ── */
    html.ims-mobiel body { padding-top: calc(56px + env(safe-area-inset-top)) !important; }
    html.ims-mobiel .ims-mbalk {
        display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
        height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 6px 0;
        align-items: center; gap: 2px; background: #0A0A0A; color: #fff;
        font-family: "Geist", "Helvetica Neue", Arial, sans-serif; box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
    }
    .ims-mbalk button, .ims-mbalk a {
        flex: none; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        border: 0; border-radius: 10px; background: transparent; color: #fff; padding: 0 10px;
        font: 600 14px/1 "Geist", "Helvetica Neue", Arial, sans-serif; text-decoration: none; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .ims-mbalk button:active, .ims-mbalk a:active { background: rgba(255, 255, 255, .14); }
    .ims-mbalk [hidden] { display: none !important; }
    .ims-mbalk-titel { flex: 1; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
    .ims-mbalk .ims-mbalk-chat { border: 1px solid rgba(255, 255, 255, .35); height: 38px; margin-right: 4px; }

    /* ── Zijbalk wordt lade ── */
    html.ims-mobiel .page > .sidebar,
    html.ims-mobiel .page > .systemen-sidebar,
    html.ims-mobiel .page > .sc-sidebar,
    html.ims-mobiel .dashboard-page > .dashboard-sidebar,
    html.ims-mobiel .video-editor-sidebar,
    html.ims-mobiel .jv > .jv-rail {
        position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important;
        height: 100dvh !important; min-height: 0 !important; width: min(310px, 86vw) !important; max-width: none !important; flex: none !important;
        margin: 0 !important; transform: translateX(-105%) !important; visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s !important;
        z-index: 1062 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        padding-top: calc(64px + env(safe-area-inset-top)) !important; padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    }
    html.ims-menu-open .page > .sidebar,
    html.ims-menu-open .page > .systemen-sidebar,
    html.ims-menu-open .page > .sc-sidebar,
    html.ims-menu-open .dashboard-page > .dashboard-sidebar,
    html.ims-menu-open .video-editor-sidebar,
    html.ims-menu-open .jv > .jv-rail {
        transform: none !important; visibility: visible; transition: transform .22s ease, visibility 0s !important;
        box-shadow: 12px 0 40px rgba(0, 0, 0, .35);
    }
    html.ims-menu-open body { overflow: hidden !important; }

    /* Eigen hamburgers en achtergronden van de layouts: de balk neemt het over. */
    html.ims-mobiel .menu-knop, html.ims-mobiel .dashboard-menu-knop, html.ims-mobiel .menu-achtergrond { display: none !important; }

    /* Menu's in de lade: geen desktop-marge bovenin, duimvriendelijke regels. */
    html.ims-mobiel .client-menu, html.ims-mobiel .systemen-menu, html.ims-mobiel .sc-menu { margin-top: 0 !important; padding-top: 0 !important; }
    html.ims-mobiel :is(.sidebar, .systemen-sidebar, .sc-sidebar, .dashboard-sidebar, .video-editor-sidebar) :is(.nav-link, .nav-group-toggle) {
        min-height: 46px; display: flex !important; align-items: center; gap: 10px; font-size: 16px;
    }
    html.ims-mobiel :is(.sidebar, .dashboard-sidebar) .logo-container, html.ims-mobiel .dashboard-sidebar .dashboard-logo-container { display: none !important; }

    html.ims-mobiel .ims-mlade-achter { display: block; position: fixed; inset: 0; z-index: 1061; background: rgba(10, 10, 10, .45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    html.ims-menu-open .ims-mlade-achter { opacity: 1; pointer-events: auto; }
    html.ims-mobiel .ims-mlade-sluit {
        display: none; position: fixed; z-index: 1063; top: calc(10px + env(safe-area-inset-top)); left: calc(min(310px, 86vw) - 124px);
        width: 112px; height: 44px; align-items: center; justify-content: center; gap: 8px;
        border: 1px solid #DADADA; border-radius: 999px; background: #fff; color: #0A0A0A;
        font: 600 15px/1 "Geist", "Helvetica Neue", Arial, sans-serif; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); cursor: pointer;
    }
    html.ims-menu-open .ims-mlade-sluit { display: inline-flex; }

    /* Jarvis-rail: in de lade weer verticaal, met tekst bij de iconen. */
    html.ims-mobiel .jv > .jv-rail { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; padding-left: 12px !important; padding-right: 12px !important; border-right: 1px solid var(--jv-line) !important; border-bottom: 0 !important; }
    html.ims-mobiel .jv-rail .jv-navlist { flex-direction: column !important; }
    html.ims-mobiel .jv-rail .jv-nav { height: 46px; font-size: 15px; }
    html.ims-mobiel .jv-rail .jv-nav span { display: inline !important; }
    html.ims-mobiel .jv-rail .jv-rail-foot { margin: auto 0 0 !important; flex-direction: column !important; }
    html.ims-mobiel .jv-rail .jv-back { display: flex !important; height: 40px; font-size: 14px; }
    html.ims-mobiel .jv-rail .jv-me span { display: inline !important; }
    html.ims-mobiel .jv-rail .jv-me .jv-avme { display: flex !important; }
    html.ims-mobiel .jv-rail .jv-palet-knop, html.ims-mobiel .jv-rail .jv-chat-knop { height: 44px; font-size: 15px; }
    html.ims-mobiel .jv { flex-direction: column; }

    /* ── Bovenbalken van de layouts: gewoon in de stroom, geen tweede vaste balk ── */
    html.ims-mobiel .page > .top-row,
    html.ims-mobiel .page main > .top-row,
    html.ims-mobiel .page > .systemen-top-row,
    html.ims-mobiel .page > .sc-top-row,
    html.ims-mobiel .dashboard-page > .dashboard-topbar {
        position: relative !important; top: auto !important; left: auto !important; right: auto !important;
        margin: 0 !important; width: auto !important; height: auto !important; min-height: 48px;
        flex-wrap: wrap !important; gap: 8px; padding: 8px 12px !important; z-index: 1 !important;
    }
    html.ims-mobiel :is(.top-row, .dashboard-topbar) .navbar-brand img { max-height: 28px; width: auto; }
    html.ims-mobiel .top-row .logo-container { width: auto !important; padding: 0 !important; }

    /* ── Inhoud over de volle breedte; brede tabellen scrollen binnen de inhoud ── */
    html.ims-mobiel .page, html.ims-mobiel .dashboard-page { flex-direction: column !important; min-width: 0; }
    html.ims-mobiel .page main, html.ims-mobiel .dashboard-page main { flex: 1; min-width: 0; width: 100%; }
    html.ims-mobiel .page main > .content,
    html.ims-mobiel .page main > .systemen-content,
    html.ims-mobiel .page main > .sc-content,
    html.ims-mobiel .dashboard-page main > .dashboard-content {
        margin: 0 !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important;
        padding: 12px !important; overflow-x: auto;
    }
    html.ims-mobiel .jv .jv-main { padding: 14px 12px 96px; }

    /* ── Geen automatisch inzoomen op iOS bij een veld (dan schuiven knoppen buiten beeld) ── */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: 16px !important; }

    /* ── Jarvis-paneel en chatlade: schermvullend, binnen het zichtbare deel (ook met toetsenbord open) ── */
    .jvp-paneel {
        top: var(--ims-vv-top, 0px) !important; left: 0 !important; right: 0 !important; bottom: auto !important;
        width: 100% !important; height: var(--ims-vvh, 100dvh) !important; max-height: none !important;
        border: 0 !important; border-radius: 0 !important; z-index: 1070 !important;
        padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    }
    .jvp-paneel .jvp-kop { padding: 8px 8px 8px 14px !important; gap: 8px !important; flex-wrap: nowrap !important; }
    .jvp-paneel .jvp-merk-logo, .jvp-paneel .jvp-merk-streep, .jvp-paneel .jvp-merk-sub { display: none !important; }
    .jvp-paneel .jvp-kop-rechts { flex-wrap: nowrap !important; min-width: 0; gap: 6px !important; }
    .jvp-paneel .jvp-tabs { overflow-x: auto; max-width: calc(100vw - 130px); flex-wrap: nowrap; }
    .jvp-paneel .jvp-tabs button { white-space: nowrap; min-height: 38px; }
    .jvp-paneel .jv-x { width: 44px !important; height: 44px !important; flex: none; }
    .jvp-knop-wrap.jvp-zwevend { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }

    .jv-chatlade {
        top: var(--ims-vv-top, 0px) !important; bottom: auto !important; width: 100% !important; height: var(--ims-vvh, 100dvh) !important;
        z-index: 1070 !important; border-left: 0 !important;
        padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
    }
    .jv-chatlade .jv-chatlade-kop { padding: 8px 8px 8px 16px !important; }
    .jv-chatlade .jv-chatlade-kop .jv-btn { height: 44px !important; padding: 0 16px !important; font-size: 15px !important; }
    .jvg-kop .jv-btn { min-height: 36px; }
    .jvg-mic, .jvg-stuur { width: 44px !important; height: 44px !important; }
    .jvg-veld { height: 44px !important; }

    /* ── Popups: nooit onder de statusbalk, en passend in het zichtbare deel ── */
    .jv-overlay {
        top: var(--ims-vv-top, 0px) !important; bottom: auto !important; height: var(--ims-vvh, 100dvh) !important;
        padding: calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) !important;
    }
    .jv-overlay .jv-modal { max-height: 100% !important; }
    .jv-overlay .jv-mhead .jv-btn { height: 40px; padding: 0 14px; font-size: 14px; }
    .modal-dialog { margin-top: calc(.5rem + env(safe-area-inset-top)); }
}

@media (max-width: 768px) {
    /* Zwevende Jarvis-knop compact: minder inhoud eronder bedekt. Alleen de telefoon heeft die zwevende
       knop; op grotere schermen staat hij in de vaste balk rechtsboven (taak 330, JarvisPaneel.razor.css). */
    .jvp-zwevend .jvp-knop { height: 48px !important; padding: 0 18px !important; }
    .jvp-zwevend .jvp-knop-logo, .jvp-zwevend .jvp-knop-streep { display: none !important; }
}

/* ── Jarvis-pagina's en -popups op de telefoon (14-09-2026, nalooprondes) ──
   jarvis.css laadt ná dit bestand (in de body), dus alles hier krijgt "html" ervoor voor net iets meer gewicht. */
@media (max-width: 1100px) {
    /* Opleverpopup: de twee kolommen (inhoud | oordeel) onder elkaar; de 360px-minimumkolom drukte de tekst plat. */
    html .jv-split.jvd-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    html .jvd-parkeerform { min-width: 0; flex: 1 1 100%; }
}

@media (max-width: 768px) {
    /* Knoppen: duimgroot, en lange teksten lopen door naar een tweede regel in plaats van buiten beeld. */
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-btn {
        height: auto; min-height: 40px; max-width: 100%; padding-block: 6px;
        white-space: normal; line-height: 1.25; text-align: left; font-size: 13px;
    }
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-btn.sm { min-height: 36px; font-size: 12.5px; }
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-btn > svg { flex: none; }

    /* Rijen met knoppen mogen doorlopen naar een nieuwe regel. */
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-acts, html :is(.jv, .jv-overlay, .jvp-paneel) .jv-hstack:has(> :is(button, a.jv-btn, .jv-seg)) { flex-wrap: wrap; }
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-row:has(> :is(.jv-btn, .jv-actions)) { flex-wrap: wrap; }
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-row > .jv-actions { width: 100%; }
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-hstack > span:first-child:not([class]):has(~ .jv-btn) { flex: 1 1 220px; }

    /* Schakelaars (Bibliotheek | Pijplijn …): alles blijft zichtbaar, zo nodig op twee regels. */
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-seg { flex-wrap: wrap; max-width: 100%; }
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-seg button { height: 36px; padding: 0 12px; font-size: 13px; white-space: nowrap; }

    /* Tabbladen (SKILL.md | Tests …): één regel, zijwaarts te vegen. */
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-tabs { gap: 16px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-tabs::-webkit-scrollbar { display: none; }
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-tab { flex: none; white-space: nowrap; min-height: 42px; }

    /* Klikbare chips en kleine icoonknoppen. */
    html :is(.jv, .jv-overlay, .jvp-paneel) a.jv-chip.click, html :is(.jv, .jv-overlay) button.jv-chip { min-height: 30px; }
    html .jv .jvs-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; margin: -6px -8px; }
    html .jv .jvs-menu { width: 40px; height: 40px; font-size: 20px; }
    html .jv .jvs-tool { width: 36px; height: 36px; opacity: 1; }
    html .jv .jvs-brow.on .jvs-tools, html .jv .jvs-brow .jvs-tools { display: inline-flex; }

    /* Popups: compacter kader, grote sluitknop, voetregel met uitleg bóven de knoppen. */
    html .jv-overlay .jv-modal .jv-mhead { padding: 10px 10px 10px 16px; gap: 10px; }
    html .jv-overlay .jv-modal .jv-mhead h2 { font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
    html .jv-overlay .jv-modal .jv-mbody { padding: 14px 16px; }
    html .jv-overlay .jv-x { width: 44px; height: 44px; flex: none; font-size: 20px; }
    html .jv-overlay .jv-modal .jv-mfoot { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
    html .jv-overlay .jv-modal .jv-mfoot > :is(span, p, div:not(.jv-hstack):not(.jv-actions)) { flex: 1 1 100%; }
    html .jv-overlay .jv-modal .jv-mfoot > :is(.jv-hstack, .jv-actions) { flex-wrap: wrap; gap: 8px; }
    html .jv-overlay .jv-modal .jv-mfoot > :is(.jv-hstack, .jv-actions):last-child { margin-left: auto; justify-content: flex-end; }
    html .jv-overlay .jv-modal .jv-mfoot > :is(.jv-hstack, .jv-actions):only-child { margin-left: 0; justify-content: flex-start; }

    /* Opleverpopup: vult het scherm, kop compact (lange branchnaam afgekapt), ontwerpvoorbeeld minder hoog. */
    html .jv-overlay.jvd-overlay .jv-modal.jvd-modal { height: 100%; max-height: 100%; }
    html .jvd-head .jvd-headtext { flex: 1; gap: 6px; }
    html .jvd-head .jv-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html .jvd-head .jvd-title { font-size: 17px !important; }
    html .jvd-ontwerp { height: 300px; }
    html .jvd-ontwerp.jvd-ontwerp-groot { height: 56vh; min-height: 300px; }
    html .jvd-choice2 { gap: 8px; }
    html .jvd-big { justify-content: center !important; text-align: center !important; }

    /* Opleverpopup: de hele popup scrolt (kop schuift weg, meer ruimte voor video en oordeel); de voetregel met Sluiten blijft staan. */
    html .jv-overlay.jvd-overlay .jv-modal.jvd-modal { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    html .jv-modal.jvd-modal > .jv-mhead, html .jv-modal.jvd-modal > .jv-mbody { flex: none; overflow: visible; }
    html .jv-modal.jvd-modal > .jv-mfoot { position: sticky; bottom: 0; z-index: 2; margin-top: auto; }

    /* Velden: duimhoog; zoekvelden over de volle breedte. */
    html :is(.jv, .jv-overlay, .jvp-paneel) :is(.jv-input, .jv-select) { height: 42px; }
    html :is(.jv, .jv-overlay, .jvp-paneel) .jv-field { height: 42px; max-width: 100%; }
    html .jv .jv-main .jv-actions > .jv-field { flex: 1 1 100%; width: auto !important; }

    /* Brede tabellen (Beleid, Logboek, Sleutels): zijwaarts te vegen met leesbare kolommen. */
    html .jv .jv-tblwrap { -webkit-overflow-scrolling: touch; }
    html .jv .jv-tblwrap .jv-tbl td, html .jv .jv-tblwrap .jv-tbl th { min-width: 96px; }
}

@media (max-width: 768px) and (hover: none) {
    /* Aanraakschermen kennen geen hover: knoppen die alleen bij hover verschijnen, altijd tonen. */
    html .jv .jvs-tools { display: inline-flex; }
}

@media (hover: none), (max-width: 768px) {
    /* site.css kleurt élke button:hover groen; op een touchscreen blijft die hover na een tik hangen (bv. tabblad "Tests"). */
    html :where(.jv, .jv-overlay, .jvp-paneel) button:hover { background-color: transparent; }
}