/* mobiel.css — mobiele overrides voor de Vivo-suite (W18 fase 1)
 *
 * Opzet: alle mobiele fixes hier in aparte file, buiten style.css, zodat
 * merges met parallel bewerking van style.css niet conflicten. Elke sectie
 * volgt de systeempatronen uit docs/openstaand werk/issues-mobiel.md.
 *
 * Volgorde belangrijk: base.html laadt style.css eerst, dan mobiel.css.
 * Deze regels overschrijven dus wat nodig is.
 */


/* ── S-11. Main-container-padding krapper op mobiel ─────────────────────
 * `.main-met-nav` op 1.5rem = 48px vaste marge. Onder 640px terug naar
 * 1rem/.75rem levert ~14-16px extra content-breedte per zijde. Vaak net
 * genoeg om "past niet" naar "past net wel" te tillen.
 */
@media (max-width: 640px) {
  .main-met-nav {
    padding: 1rem .75rem;
  }
}


/* ── S-1. `.veld-grid` mobile fallback ──────────────────────────────────
 * `.veld-grid` in style.css:1467 is `grid-template-columns: 1fr 1fr`
 * zonder mobiel-fallback. Onder 640px stapelen naar één kolom, gelijk
 * aan de veld-rij-patroon.
 */
@media (max-width: 640px) {
  .veld-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ── S-4. Detail-grid breakpoint verlagen 900 → 768 ─────────────────────
 * Style.css schakelt `.detail-grid` pas onder 900px naar column. Dat is
 * te ruim: op tablet-staand (768) is 35/65-split al te krap. Onder 900px
 * al column dwingen (via override — hogere specificity dan style.css).
 */
@media (max-width: 900px) {
  .detail-grid {
    flex-direction: column !important;
  }
  .detail-kolom-links,
  .detail-kolom-rechts {
    flex: 1 1 auto !important;
    width: 100%;
  }
}


/* ── S-3. Tabellen scroll-wrapper (vangnet) ─────────────────────────────
 * Elke `<table>` zonder eigen `overflow-x`-wrapper krijgt onder 768px
 * horizontale scroll via de container-hint. `.tabel-scroll` is de
 * expliciete klasse voor pagina's die 'em al zouden hebben; hier voegen
 * we een fallback toe voor kale tabellen door de kaart-container een
 * `overflow-x: auto` te geven op mobiel.
 *
 * NB: dit is defensive — pagina's die al een eigen overflow-wrapper
 * hebben (bv. betalingsregeling) gaan hier niet stuk want overflow op
 * een parent verandert het gedrag van de child-wrap niet.
 */
.tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  /* Alle direct-in-kaart tabellen krijgen scroll-vangnet. Op grotere
   * schermen geen effect want tabel past sowieso. */
  .kaart > table,
  .kaart > .tabel-wrap > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Vangnet #2: alle kaarten die ergens een tabel bevatten (ook nested
   * onder secties of andere containers), mogen horizontaal scrollen.
   * :has() heeft brede browser-support sinds begin 2024. Voor oudere
   * browsers valt de gewone content-flow gewoon terug op standaard-
   * gedrag — geen breuk, alleen geen scroll-support voor die specifieke
   * kaarten. */
  .kaart:has(table):not(:has(.tabel-scroll)):not(:has(.stap-tabel-wrap)):not(:has(.aanslag-tabel-wrap)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Specifieke fallback voor tabellen buiten .kaart (bv. instellingen-
   * content, main-content). Zonder wrapper worden ze onleesbaar breed. */
  .instellingen-content > table,
  main > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}


/* ── S-6. Input font-size ≥ 16px op mobiel (iOS-zoom voorkomen) ────────
 * iOS Safari zoomt in bij focus als input font-size < 16px. Overal in
 * de codebase staan `.72rem`/.85rem`. Onder 768px alles forceren naar
 * 16px minimum voor tekst-inputs, selects, textareas.
 */
@media (max-width: 768px) {
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=password],
  input[type=number],
  input[type=search],
  input[type=url],
  input[type=date],
  input[type=time],
  input[type=datetime-local],
  select,
  textarea,
  .input,
  .select {
    font-size: 16px !important;
  }
}


/* ── S-8. Modal max-width + padding krapper op mobiel ───────────────────
 * Modals met inline `width:XXXpx` overrulen we niet; we zorgen wél dat
 * geen enkele modal onnodig ver over de viewport hangt en dat de padding
 * op mobiel wordt teruggebracht.
 */
@media (max-width: 480px) {
  /* Elk modal-achtig element krijgt max-width vangnet en krapper padding */
  .modal,
  .modal-inhoud,
  [class*="modal"] > [class*="inhoud"],
  .slide-panel {
    max-width: calc(100vw - 1rem) !important;
    padding: 1rem !important;
  }
  /* Modal-overlay-achtergronden met padding = ademruimte rond modal.
   * Verkleinen voor meer content-ruimte. */
  .modal-achtergrond,
  .modal-overlay {
    padding: .5rem !important;
  }
}


/* ── S-10. dl/grid `auto 1fr` mobile fallback ───────────────────────────
 * Meer dan één plek in profiel.html en 2fa-templates heeft een 2-koloms
 * dl-grid zonder fallback. Onder 640px stapelen.
 */
@media (max-width: 640px) {
  dl[style*="grid-template-columns"],
  div[style*="grid-template-columns: auto 1fr"],
  div[style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── Ondersteunende regels — algemene "past niet" preventie ────────────
 * Elke expliciete `min-width` op modals/panels die groter is dan de
 * kleinste viewport (327px op iPhone SE) veroorzaakt pagina-scroll.
 * Vangnet: onder 400px worden dropdown-panels flexibel gemaakt.
 */
@media (max-width: 400px) {
  [class*="dropdown"][style*="min-width"],
  [class*="panel"][style*="min-width"] {
    min-width: 0 !important;
    width: calc(100vw - 1rem);
  }
}


/* ── S-2. Filter-balk-varianten flex-wrap:wrap ─────────────────────────
 * `.filter-balk` heeft wél wrap, maar sub-containers (`.filter-knoppen`,
 * `.filter-uitklap-rij`, `.ws-filter-rij`) niet. Ook diverse inline
 * `display:flex` filter-rijen. Onder 768px zorgen dat alle filter-achtige
 * containers wrappen + gap houdt items ademend.
 */
.filter-knoppen,
/* F-20: .bulk-acties-rij weggehaald uit deze mobile-wrap-groep (dood). */
.filter-uitklap-rij,
.ws-filter-rij,
.act-type-filters,
.ap-kop-acties {
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  /* Alle filter-containers wrap-safe maken via attribute-selector.
   * Vangt inline styling en klasse-varianten door de suite heen. */
  [class*="filter"],
  [class*="-filter"] {
    flex-wrap: wrap !important;
  }
  /* Zoek-inputs binnen filter-balken op mobiel volle breedte om ademruimte
   * te maken. Alleen als parent flex is en het item geen expliciete flex-
   * shrink krijgt. */
  .filter-balk > .zoek-wrap,
  .filter-balk input[type=search],
  [class*="filter"] > input[type=search] {
    flex: 1 1 100%;
    max-width: 100%;
  }
  /* Sticky filter-balken op mobiel niet sticky — vreet verticale ruimte. */
  .filter-balk[style*="sticky"],
  .filter-balk.sticky,
  .filter-balk-sticky {
    position: static !important;
    top: auto !important;
  }
  /* Klantkaart-meta (badges + dossier-teller): op mobiel mag ze shrinken
   * onder een lange klantnaam ipv gedrukt tegen de chevron. */
  .klant-kaart-meta {
    flex-shrink: 1 !important;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}


/* ── S-5. Touch-targets ≥ 44px op mobiel ───────────────────────────────
 * Apple-richtlijn 44×44px. Kleine SVG-only knoppen (klant-edit, btn-rij,
 * stap-actie) hebben nu 20-30px effectief click-area. Onder 768px alle
 * button/link-elementen minimaal 44×44 tap-area geven via padding, zonder
 * de visuele grootte van de icon zelf te veranderen.
 */
@media (max-width: 768px) {
  /* Alle button-elementen krijgen minimaal 44px tap-area. */
  button,
  .btn,
  a.btn,
  input[type=button],
  input[type=submit] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Kleine icon-knoppen (klant-edit, btn-rij, stap-actie, map-verwijder)
   * krijgen extra padding zodat het tap-area 44px is zonder icon-vergroting. */
  .klant-edit-btn,
  .btn-rij,
  .stap-actie-knop,
  .map-verwijder-btn,
  .melding-gelezen-knop {
    min-height: 44px;
    min-width: 44px;
    padding: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Uitzondering: .btn-sm mag kleiner blijven zolang het er niet als
   * primaire actie uitziet — 36px is nog acceptabel voor secundaire
   * densere UI zoals de tijd-picker in het weekoverzicht. */
  .btn-sm {
    min-height: 36px;
    min-width: 36px;
  }
  /* Native checkboxes en radiobuttons vergroten met transform i.p.v.
   * width/height (voorkomt layout-shift; scale werkt op alle browsers). */
  input[type=checkbox],
  input[type=radio] {
    transform: scale(1.25);
    margin: .35rem;  /* extra ruimte rond het vergrote element */
  }
  /* Nav-hamburger + close-buttons in modals: garanderen 44px. */
  .nav-hamburger,
  [aria-label*="close" i],
  [aria-label*="sluit" i],
  .modal-sluit,
  .modal-close {
    min-height: 44px;
    min-width: 44px;
    padding: .6rem;
  }
}


/* ── S-9. Meldingen/profiel-panels binnen viewport houden ──────────────
 * Meldingen-panel is 360px, profiel-menu 200px, beide absoluut rechts
 * gepositioneerd. Op 375px past 360px net maar met safe-area-insets kan
 * het over de rand hangen. Onder 480px: full-width dropdown met kleine
 * side-margins in plaats van absolute right:0.
 */
@media (max-width: 480px) {
  .melding-panel,
  .profiel-menu {
    right: .5rem !important;
    left: .5rem !important;
    width: auto !important;
    max-width: calc(100vw - 1rem) !important;
  }
  /* Suite-switch-menu idem — hover-dropdown-panel binnen viewport. */
  .suite-switch-menu,
  .nav-dropdown {
    right: .5rem !important;
    left: auto;
    max-width: calc(100vw - 1rem);
  }
}


/* ── M-1. 2FA-klaar backup-codes + acties op mobiel ────────────────────
 * profiel_2fa_klaar.html:32 heeft repeat(2, 1fr) voor backup-codes.
 * Onder 480px: 1 kolom zodat elke code met letter-spacing goed leest.
 * Actie-knoppen (Kopieer alle codes, Print/opslaan) op mobiel wrappen.
 */
@media (max-width: 480px) {
  /* Backup-codes grid — sluit aan bij zowel expliciete class als de
   * inline style op profiel_2fa_klaar.html. */
  .backup-codes-grid,
  div[style*="grid-template-columns:repeat(2, 1fr)"],
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── M-2. Ondertekenpagina — iframe-hoogte + canvas-ratio ──────────────
 * templates/ondertekening/ondertekenen.html
 * - iframe 520px op mobiel is 78% van iPhone SE-hoogte → scroll-conflict.
 * - Canvas 200px hoog is te weinig voor vinger-handtekening.
 * - Kop en Wissen-rij missen flex-wrap.
 */
@media (max-width: 640px) {
  .od-iframe {
    height: 400px !important;
  }
  #odCanvas {
    height: 260px !important;
  }
  .od-kop {
    flex-wrap: wrap;
    row-gap: .5rem;
  }
  /* Bevestigings-iframe na tekenen ook krapper — 600px is te veel. */
  iframe[style*="height:600px"],
  iframe[style*="height: 600px"] {
    height: 420px !important;
  }
}


/* ── M-3. Boekingssysteem klant-flow ──────────────────────────────────
 * templates/afspraken/{boeken,bevestiging,aanvragen,beheer}.html
 */
@media (max-width: 640px) {
  /* Kalender-nav (vorige/volgende maand) touch-target op 44. */
  .kalender-nav,
  .kalender-nav-knop,
  button[class*="kalender-nav"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: .5rem !important;
  }
  /* Aanvraag-lijst 2-koloms → 1-koloms + knop-kolom full-width. */
  .aanvraag-rij,
  div[style*="grid-template-columns:1fr auto"],
  div[style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
  /* Aanvragen: knop-kolom min-width verwijderen zodat 'ie stapelt. */
  .aanvraag-acties {
    min-width: 0 !important;
    width: 100%;
  }
  /* Beheer: slot-tijd knop op 44px minimum. */
  .slot-tijd {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  /* Kalender-dot-marker groter en met meer contrast onder 380px. */
  .kalender-cel.beschikbaar::after {
    width: 5px !important;
    height: 5px !important;
    opacity: 1 !important;
  }
  /* Slot-chips ellipsis bij lange labels ("in overleg"). */
  .slot-btn {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ── S-7. Hover-only dropdowns op touch bereikbaar maken ──────────────
 * Op touch-devices werkt :hover niet betrouwbaar. Voor hover-dropdowns
 * die geen JS-toggle hebben: gebruiken we :focus-within als fallback.
 * Werkt als het parent-element focusbaar is (button/a/tabindex).
 *
 * NB: dit is een CSS-only quick-fix. Voor volledige tap-gedrag met
 * tap-buiten-sluiten is JS nodig (per component). Deze fix voorkomt
 * dat items onbereikbaar zijn op touch.
 */
@media (hover: none) and (pointer: coarse) {
  /* Suite-switch en algemene nav-dropdowns: tonen bij focus. */
  .suite-switch:focus-within .suite-switch-menu,
  .nav-dropdown-wrap:focus-within .nav-dropdown,
  .relaties-nav:focus-within .relaties-nav-menu {
    display: block !important;
  }
  /* Zorg dat de trigger focusbaar is (hint voor screenreaders/keyboard). */
  .suite-switch,
  .nav-dropdown-wrap,
  .relaties-nav {
    outline-offset: 2px;
  }
}


/* ── Deel C fase 1 — Interne schermen: gedeelde inline-grid-patronen ───
 * M-4 dashboard, M-5 klantenlijst, M-6 klant_detail, M-7 groep_detail,
 * M-8 dossier_detail bevatten inline `style="grid-template-columns:..."`
 * die nergens een mobile fallback hebben. We vangen de vaakst voorkomende
 * patronen via attribute-selectors, zodat inline HTML niet aangepast hoeft.
 *
 * NB: attribute-selectors zoeken op letterlijke inline string; spaties
 * variëren daarom worden meerdere spellingen gedekt.
 */

/* auto-fit minmax(340px, 1fr) → op 375px overflow (340 > 327). Onder 400px
 * naar minmax(0, 1fr) zodat 1 kolom past. */
@media (max-width: 400px) {
  [style*="minmax(340px"],
  [style*="minmax(340px "],
  [style*="minmax(340px,"],
  [style*="minmax(320px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 4-koloms inline grid (1fr 1fr 1fr 1fr) — op mobiel te krap. Onder 480px
 * naar 2 kolommen, onder 380px naar 1. */
@media (max-width: 480px) {
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 380px) {
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* 2-koloms inline `1fr 1fr` in binnen-kaart-formulieren (M-6 klant_detail
 * Voornaam/Tussenvoegsel, M-8 dossier_detail Aanslagnr/Belastingjaar).
 * Onder 480px al te krap in 260px-min-width kaart. */
@media (max-width: 480px) {
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
  }
}

/* Hoofdlayout `minmax(280px, 380px) 1fr` (M-7 groep_detail:75) — geen
 * mobile fallback. Onder 900px stapelen. */
@media (max-width: 900px) {
  [style*="minmax(280px, 380px)"],
  [style*="minmax(280px,380px)"],
  [style*="minmax(280px, 380px) 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Scopivo-werkstromen 5-koloms grid (M-6 klant_detail:2113) — geen mobile
 * fallback. Onder 640px stapelen. */
@media (max-width: 640px) {
  [style*="grid-template-columns:1fr auto auto auto auto"],
  [style*="grid-template-columns: 1fr auto auto auto auto"] {
    grid-template-columns: 1fr !important;
    row-gap: .3rem;
  }
}


/* ── Deel C fase 1 — Kaart-rijen met min-width:260px full-width mobiel ─
 * M-6 klant_detail kaart-rij (regel 117) heeft 4 kaarten met flex:1;
 * min-width:260px. Op 640px past niet, op 375px is elke kaart 260px van
 * de 327px content-breedte = strak-krap. Onder 640px full-width per kaart.
 */
@media (max-width: 640px) {
  [style*="min-width:260px"],
  [style*="min-width: 260px"],
  [style*="min-width:280px"],
  [style*="min-width: 280px"] {
    min-width: 100% !important;
  }
}


/* ── Deel C fase 1 — Kaart-meta chips onder text stapelen ──────────────
 * M-5 klantenlijst .klant-kaart-meta zit rechts naast klantnaam met
 * flex-shrink:0 en 3+ badges — op mobiel gedrukt tegen de chevron.
 * Onder 640px onder de kaart-info stapelen.
 */
@media (max-width: 640px) {
  .klant-kaart {
    flex-wrap: wrap;
  }
  .klant-kaart-meta,
  .kaart-meta {
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: .25rem;
    margin-top: .35rem;
  }
}


/* ── Deel C fase 1 — Actiebalk/sectie-koppen wrappen op mobiel ─────────
 * Talloze plekken met `display:flex;justify-content:space-between` zonder
 * `flex-wrap` waar titel + actie-knop naast elkaar staan. Bij lange
 * titels of veel knoppen loopt de knop uit beeld.
 */
@media (max-width: 640px) {
  [style*="justify-content:space-between"]:not(nav):not(.nav-inner),
  [style*="justify-content: space-between"]:not(nav):not(.nav-inner) {
    flex-wrap: wrap;
    row-gap: .4rem;
  }
}


/* ── Deel C fase 2 — Planning week-view (M-9) ─────────────────────────
 * `.lx-week-stack grid-template-columns: repeat(7, 1fr)` (planning.css:1130)
 * geeft op 375px ~47px per dag-kolom → onleesbare chips. Onder 640px
 * verticale dagen-stack (elke dag onder elkaar, taken als lijst).
 */
@media (max-width: 640px) {
  .lx-week-stack {
    grid-template-columns: 1fr !important;
  }
}


/* ── Deel C fase 2 — Voorstel-detail 2fr 1fr layout (M-13) ─────────────
 * voorstel_detail.html:72 heeft inline `class="twee-kolommen"` +
 * `style="grid-template-columns:2fr 1fr"` — inline wint van class. Onder
 * 900px status-kolom onder samenvatting stapelen.
 */
@media (max-width: 900px) {
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  /* 14rem 1fr label-grids (voorstel_detail.html:99, :113) — label boven
   * waarde onder 640px. Ook auto 1fr 1fr auto ondertekenaar-rij (:423). */
  [style*="grid-template-columns:14rem 1fr"],
  [style*="grid-template-columns: 14rem 1fr"],
  [style*="grid-template-columns:auto 1fr 1fr auto"],
  [style*="grid-template-columns: auto 1fr 1fr auto"],
  [style*="grid-template-columns:1fr auto auto auto"],
  [style*="grid-template-columns: 1fr auto auto auto"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── Deel C fase 2 — Multi-column workflow-editor rijen (M-10) ────────
 * numivo/workflows.html:188 iv-rij `1.1fr 1.3fr .8fr 1.2fr auto auto` en
 * andere lange grid-strings — op 375px input-velden onder 40px = onbruikbaar.
 * Onder 768px 1-koloms.
 */
@media (max-width: 768px) {
  [style*="grid-template-columns:1.1fr 1.3fr"],
  [style*="grid-template-columns: 1.1fr 1.3fr"],
  [style*="grid-template-columns:auto 2rem 1fr"],
  [style*="grid-template-columns: auto 2rem 1fr"] {
    grid-template-columns: 1fr !important;
    row-gap: .4rem;
  }
}


/* ── Deel C fase 2 — min-width:340px dropdown-panel (M-12) ────────────
 * betalingsregeling.html:29 heeft een dropdown-panel met min-width:340px —
 * groter dan 327px content-breedte op iPhone SE. Fase 1 dekte inline
 * min-widths generiek onder 400px maar alleen als ze op een dropdown/panel
 * zaten. Deze fix pakt alle min-width:340px (en 320/300px varianten) aan
 * onafhankelijk van klasse.
 */
@media (max-width: 400px) {
  [style*="min-width:340px"],
  [style*="min-width: 340px"],
  [style*="min-width:320px"],
  [style*="min-width: 320px"],
  [style*="min-width:300px"],
  [style*="min-width: 300px"] {
    min-width: 0 !important;
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
  }
}


/* ── Deel C fase 2 — Wrap-containers krapper padding op mobiel (M-14) ─
 * voorstellen/lijst.html:4 heeft padding:2rem = 64px van 375px weg =
 * 311px content. Onder 640px de body-wrappers naar 1rem.
 */
@media (max-width: 640px) {
  main > [style*="padding:2rem"],
  main > [style*="padding: 2rem"] {
    padding: 1rem !important;
  }
}


/* ── Deel C fase 2 — Taakbord dots + gebruiker-acties (M-10, M-17) ────
 * .tb-dot in taakbord op mobiel groter (S-5 aanvullend). .gebruiker-acties
 * flex-wrap zodat de 3 knoppen (Bewerken/Apparaten/Deactiveren) niet
 * uitschieten op smalle kaart.
 */
@media (max-width: 768px) {
  .tb-dot,
  a.tb-dot {
    min-width: 20px !important;
    min-height: 20px !important;
  }
  .gebruiker-acties,
  .aanvraag-acties {
    flex-wrap: wrap;
    row-gap: .4rem;
  }
}


/* ── Deel C fase 2 — Toast op mobiel full-width (M-16, M-11) ──────────
 * .lx-toast-melding staat op position:fixed;bottom:1.25rem;right:1.25rem;
 * max-width:360px. Op 375px overloopt 'ie bijna de hele viewport. Onder
 * 480px left+right kleine marge en max-width verwijderen.
 */
@media (max-width: 480px) {
  .lx-toast-melding {
    left: 1rem !important;
    right: 1rem !important;
    max-width: none !important;
    width: auto !important;
  }
}


/* ── Deel C fase 2 — Yuki key-readonly bullets word-break (M-20) ──────
 * numivo/yuki_instellingen.html:41-53 toont 20 bullets + laatste 4 tekens
 * in een flex-rij zonder wrap; op 375px overflow. word-break force wrap.
 */
@media (max-width: 640px) {
  [class*="key-readonly"],
  [class*="key-display"] {
    word-break: break-all;
    flex-wrap: wrap;
  }
}


/* ── S-9 vervolg — Bottom-sheet voor meldingen/profiel op mobiel ──────
 * Fase 3 dekte full-width dropdown (left/right :.5rem). Onder 480px is
 * bottom-sheet-patroon (fixed onderin, van onder in) veel prettiger op
 * duim-bereik. .melding-panel + .profiel-menu krijgen `position:fixed;
 * bottom:0; left:0; right:0` en `max-height:80vh; overflow:auto`.
 *
 * Wordt getoggled met dezelfde `.tap-open`-class als S-7 (of via de
 * bestaande open-mechaniek). Als het element via display:none/block
 * wordt getoond, werkt dit automatisch.
 */
@media (max-width: 480px) {
  .melding-panel,
  .profiel-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-width: none !important;
    width: auto !important;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    padding: 1rem 1rem 2rem !important;
    animation: bottomSheetUp .2s ease-out;
    z-index: 1000;
  }
}
@keyframes bottomSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}


/* ── Deel C fase 3 — Scopivo/Fiscivo werkstromen stap-rij ─────────────
 * scopivo/werkstromen.html + fiscivo/werkstromen.html `.stap-rij-view td`
 * bevat een `<div style="display:flex;align-items:center;gap:.5rem">`
 * met label + rol + 4 knoppen. Zonder wrap op mobiel gedrukt. Idem in
 * JS-gegenereerde template (regel ~620). Via generieke selector dekken.
 */
@media (max-width: 640px) {
  .stap-rij-view td > div {
    flex-wrap: wrap;
    row-gap: .3rem;
  }
  .stap-rij-view td > div > .stap-view-rol {
    /* Rol-label naar volgende regel als het niet past. */
    flex: 0 0 auto;
    order: 3;
  }
  .stap-rij-view td > div > .stap-knoppen {
    order: 4;
    margin-left: auto;
  }
}


/* ── Deel C fase 3 — Fixed-width progress-bars mobiel-vriendelijk ─────
 * scopivo/dashboard.html:62 en dashboard.html:150 hebben progress-bar
 * met vaste `width:60px`/`width:70px`. Op mobiel binnen krappe kaart
 * kan dat wringen. Onder 480px flexibel maken zodat 'ie meebeweegt met
 * de content.
 */
@media (max-width: 480px) {
  [style*="width:60px;height:6px"],
  [style*="width: 60px;height: 6px"],
  [style*="width:70px;height:4px"],
  [style*="width: 70px;height: 4px"] {
    width: 100% !important;
    max-width: 100px;
    min-width: 40px;
  }
}


/* ── S-2 vervolg — Primaire filter als scroll-snap chip-rij ───────────
 * Onder 640px worden .filter-knoppen-containers een horizontale scroll-
 * chip-rij: alle statusknoppen naast elkaar met snap-alignment, i.p.v.
 * onder elkaar te wrappen (wat verticale ruimte vreet).
 *
 * flex-wrap:wrap uit S-2 blijft gelden op andere filter-containers
 * (.filter-uitklap-rij, .ws-filter-rij). Deze regel geldt specifiek
 * voor .filter-knoppen als primaire filter-groep.
 *
 * Kleine ideal: fade-mask rechts als visuele hint dat er meer is.
 */
@media (max-width: 640px) {
  .filter-knoppen {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: .2rem;
    margin: 0 -.5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }
  .filter-knoppen > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}


/* ── S-5 vervolg — Quill toolbar compact op mobiel ────────────────────
 * Quill snow-toolbar heeft ~30px hoge knoppen; onder 768px willen we:
 * (a) horizontale scroll zodat alle knoppen bereikbaar zijn zonder de
 *     hele toolbar te wrappen tot een lange vertikale strook,
 * (b) tap-targets minimaal 44px hoog per knop.
 */
@media (max-width: 768px) {
  .ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: .35rem !important;
    min-height: 48px;
    align-items: center;
  }
  .ql-toolbar.ql-snow .ql-formats {
    flex-shrink: 0;
    margin-right: .4rem !important;
  }
  .ql-toolbar.ql-snow button,
  .ql-toolbar.ql-snow .ql-picker {
    min-width: 36px;
    min-height: 36px;
    padding: 4px !important;
  }
  /* Editor-area zelf onder 768px extra padding-krapper anders past
   * de content niet meer binnen kaart-padding + editor-padding. */
  .ql-container.ql-snow {
    font-size: 16px;
  }
  .ql-editor {
    padding: .75rem !important;
    min-height: 120px;
  }
}


/* ── M-23 base+partials — informatie-secties 2-koloms stack ───────────
 * _informatie_secties.html:2 heeft `repeat(2, minmax(0, 1fr))` — hard
 * 2-koloms. Aparte selectors omdat dit patroon geen `1fr 1fr` matcht.
 */
@media (max-width: 640px) {
  [style*="repeat(2, minmax(0, 1fr))"],
  [style*="repeat(2,minmax(0, 1fr))"],
  [style*="repeat(2, minmax(0,1fr))"],
  [style*="repeat(2,minmax(0,1fr))"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── M-23 base+partials — Structuur-tree horizontale scroll ──────────
 * partials/structuur_tree.html gebruikt brede flex-rijen met vast
 * min-width:110px per kind + gap 1.5rem/3rem — op mobiel scroll de
 * hele tree, niet de pagina. */
[class*="structuur-tree"],
.structuur-tree-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}


/* ── M-11. Instellingen-sidebar collapse (mobiel) ──────────────────────
 * Onder 900px was er al basis-fallback in style.css (grid 1fr + groep als
 * inline-block). Op mobiel wil je écht een compact navigation-patroon —
 * anders staat er een lange lijst boven de content.
 *
 * Aanpak: sidebar wordt een horizontaal scrollbare chip-nav bovenaan.
 * Alle items op één rij, groep-koppen verborgen, scroll-snap voor duim-
 * swipen, fade-mask rechts als visuele hint dat er meer is.
 *
 * Werkt voor de bestaande HTML zonder templates te wijzigen.
 */
@media (max-width: 900px) {
  .instellingen-sidebar {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: .3rem;
    padding: .5rem .75rem;
    margin: -.5rem -.75rem 1rem;
    background: var(--bg-kaart);
    border-bottom: 1px solid var(--rand);
    position: sticky;
    top: 0;
    z-index: 5;
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  }
  .instellingen-sidebar .instellingen-groep {
    display: flex !important;
    flex-direction: row !important;
    gap: .25rem;
    flex-shrink: 0;
    margin: 0 !important;
    min-width: 0 !important;
    padding-right: .5rem;
    border-right: 1px solid var(--rand);
  }
  .instellingen-sidebar .instellingen-groep:last-child {
    border-right: none;
    padding-right: 0;
  }
  .instellingen-sidebar .instellingen-groep-kop {
    display: none;
  }
  .instellingen-sidebar .instellingen-nav-item {
    white-space: nowrap;
    flex-shrink: 0;
    padding: .55rem .8rem;
    font-size: 13px;
    scroll-snap-align: start;
    min-height: 44px;  /* WCAG 2.5.5 + Apple HIG (touch-target). */
    display: inline-flex;
    align-items: center;
  }
  .instellingen-sidebar .instellingen-nav-item.actief {
    background: rgba(240,101,63,.18);
  }
}


/* ── M-11 instellingen — Werkvestigingen-dagtabel + info-veld-tabellen ─
 * Deze twee (instellingen.html:390, :2516, :5398) zijn brede tabellen die
 * op mobiel als kaart-per-rij zouden moeten renderen. Een pure CSS-fix
 * zonder `data-label`-attributen per td levert leesbare kaartjes maar
 * zonder kop-labels — nog steeds beter dan een 800px-brede tabel op 375px.
 *
 * De S-3 scroll-wrapper is de primaire fallback (al gedekt) — deze
 * card-view is voor de plekken waar horizontal scroll onhandig aanvoelt.
 * Alleen actief op tabellen met de `.mobiel-kaart-tabel`-klasse zodat het
 * niet ongewenst álle tabellen raakt.
 */
@media (max-width: 640px) {
  .mobiel-kaart-tabel {
    display: block;
  }
  .mobiel-kaart-tabel thead {
    display: none;
  }
  .mobiel-kaart-tabel tbody,
  .mobiel-kaart-tabel tr {
    display: block;
  }
  .mobiel-kaart-tabel tr {
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    background: var(--bg-kaart);
    border: 1px solid var(--rand);
    border-radius: 6px;
  }
  .mobiel-kaart-tabel td {
    display: block;
    padding: .2rem 0;
    border: none;
    font-size: .82rem;
  }
  .mobiel-kaart-tabel td:first-child {
    font-weight: 600;
    color: var(--tekst-primair);
    font-size: .88rem;
    margin-bottom: .25rem;
  }
}


/* ── S-2 vervolg — Weergave-toggles op mobiel verbergen ───────────────
 * .klant-weergave-btn (Bedrijfsnaam/Persoonsnaam) is niet-primair op
 * mobiel: op 375px vreet 'ie ruimte weg voor de filter-balk. Verbergen
 * onder 640px; de gebruiker die 'em op mobiel wil, kan draaien naar
 * landscape of desktop. Voorkeur zit sowieso in localStorage — wat je
 * op desktop koos werkt door op mobiel.
 */
@media (max-width: 640px) {
  .klant-weergave-btn {
    display: none !important;
  }
}


/* ── M-23 vervolg — Structuur-tree sticky root-node ───────────────────
 * Bij het horizontaal scrollen van de tree (zie eerdere fase) blijft de
 * root-node aan de linkerkant staan zodat je context houdt. Werkt alleen
 * als de tree als flex/inline-block wordt gerenderd en de root het eerste
 * child is (patroon in partials/structuur_tree.html).
 */
[class*="structuur-tree"] > :first-child,
[class*="structuur-tree"] .virtual-root {
  position: sticky;
  left: 0;
  background: var(--bg-kaart);
  z-index: 2;
  box-shadow: 2px 0 6px rgba(0,0,0,.04);
}


/* ── M-2 vervolg — iframe soepel scrollen op iOS ──────────────────────
 * Sommige iOS-versies scrollen iframe-inhoud alleen soepel als het
 * element expliciet `-webkit-overflow-scrolling:touch` heeft. Overal
 * op iframes en de ondertekenpagina-iframe.
 */
/* F-20: .iframe-scroll dood — alleen `iframe` en .od-iframe over. */
iframe,
.od-iframe {
  -webkit-overflow-scrolling: touch;
}


/* ── Relaties-nav accordion in mobiel-menu ────────────────────────────
 * Emma's feedback (2026-07-12): in het hamburger-menu opent Relaties
 * nu een raar klein dropdown-scherm. Het moet gewoon inline uitklappen
 * onder Relaties zelf, als accordion.
 *
 * Onder 768px (mobiel-nav) heffen we de absolute positionering op van
 * .relaties-nav-menu, tonen 'em altijd zichtbaar, met inspring om te
 * onderscheiden van de hoofd-links.
 */
@media (max-width: 768px) {
  .nav-links .relaties-nav-wrapper {
    display: block;
    width: 100%;
  }
  .nav-links .relaties-nav-wrapper > a.nav-link {
    display: flex;
    width: 100%;
  }
  .nav-links .relaties-nav-menu {
    display: block !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 .3rem 1.5rem;
    border: none !important;
    animation: none !important;
  }
  .nav-links .relaties-nav-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    font-size: .85rem;
    color: var(--tekst-secundair);
    text-decoration: none;
    border-radius: 6px;
    line-height: 1.3;
  }
  .nav-links .relaties-nav-item.actief {
    color: var(--ember);
    font-weight: 600;
  }
  /* Verberg de chevron in de nav-link zelf op mobiel — niet klikbaar
   * want menu is altijd open. */
  .nav-links .relaties-nav-wrapper > a.nav-link > svg:last-child {
    display: none;
  }
}


/* ── M-9 vervolg — Planning mobiel gebruiksvriendelijker ─────────────
 * Emma-feedback iPhone-test:
 * - 'weekweergave is veel te lang' → dagen krappe hoogte, minder gap.
 * - 'maand-open-dag wordt veel te lang' → drawer als bottom-sheet met
 *   max-hoogte.
 * - 'dossier-lijst te breed' → filters/lijsten met scroll of wrap.
 */
@media (max-width: 640px) {
  /* Week-view compacter — dagen krijgen kleinere min-hoogte. Fase 9
   * dekte al de 7-koloms → 1-koloms; nu ook de vertikale ruimte. */
  .lx-wcol {
    min-height: 120px !important;
  }
  .lx-week-stack {
    gap: 6px !important;
  }
  /* Dag-koppen compacter zodat elke dag niet 50px kop heeft. */
  .lx-wcol .lx-wcol-kop,
  .lx-wcol [class*="col-kop"] {
    padding: 6px 8px !important;
    font-size: .8rem !important;
  }
  /* Maand-drawer als bottom-sheet: opent van onderaf met max-hoogte
   * zodat 'ie niet de hele viewport vult bij lange dagen. */
  .lx-drawer-wrap {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .lx-drawer,
  .lx-drawer.modal,
  .lx-drawer.settings {
    max-height: 88vh !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
    animation: bottomSheetUp .2s ease-out !important;
  }
  /* Filter-balk in planning: wrap + kleinere gap */
  .lx-filters {
    gap: 6px !important;
  }
  .lx-who,
  .lx-who-lbl {
    font-size: 12px;
  }
  /* Popovers/dossier-lijstjes in planning-scherm: max-width vangnet. */
  .lx-popover {
    max-width: calc(100vw - 1rem) !important;
    min-width: 0 !important;
  }
}


/* ── M-10 vervolg — Werkstromen lijst compacter op mobiel ────────────
 * Emma-feedback iPhone-test: periode-kolom te smal → periode wrapt over
 * 2-3 regels waardoor rijen lang worden. Oplossing: kleiner font op
 * mobiel + periode nowrap zodat 'ie op één regel blijft.
 *
 * Openklikken werkt niet makkelijk → onder 640px maken we de detail-
 * view een bottom-sheet-modal via het bestaande drawer-mechanisme
 * (mobiel.css §S-9 bottom-sheet regels helpen automatisch).
 */
@media (max-width: 640px) {
  .ws-tabel,
  table.ws-tabel {
    font-size: .75rem;
  }
  .ws-tabel th,
  .ws-tabel td {
    padding: .35rem .4rem !important;
    font-size: .74rem;
  }
  /* Periode-kolom: nowrap zodat 'q1 2026' niet wraps naar 2 regels. */
  .ws-tabel td:nth-child(4),
  .ws-tabel th:nth-child(4) {
    white-space: nowrap;
    min-width: 60px;
  }
  /* Voortgang-kolom mag krappe: staafje kan compact. */
  .ws-tabel td:nth-child(6),
  .ws-tabel th:nth-child(6) {
    min-width: 80px;
  }
  /* Deadline: klein zodat rij compact blijft. */
  .ws-tabel td:nth-child(5) {
    font-size: .7rem;
    white-space: nowrap;
  }
}


/* ── M-10 vervolg — Taakbord lijst-per-status op mobiel ──────────────
 * Kanban werkt slecht op mobiel: horizontale scroll is akkoord voor
 * desktop-touch maar op smartphone niet praktisch. Onder 640px maken we
 * van de kolommen een verticale lijst-per-status via display:block.
 * Sticky-kolom blijft functioneel voor tussenkomende horizontale scroll
 * bij tablet.
 */
@media (max-width: 640px) {
  .tb-scroll {
    overflow-x: hidden !important;
  }
  .tb-scroll table.tb-tabel {
    display: block;
    width: 100%;
  }
  .tb-scroll table.tb-tabel thead {
    display: none;
  }
  .tb-scroll table.tb-tabel tbody,
  .tb-scroll table.tb-tabel tr {
    display: block;
    width: 100%;
  }
  .tb-scroll table.tb-tabel td {
    display: block;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    padding: .35rem .5rem !important;
    border: none !important;
  }
  .tb-scroll table.tb-tabel tr {
    border-bottom: 1px solid var(--rand);
    padding: .5rem 0;
  }
  /* Klant-td (sticky op desktop) op mobiel gewoon in-flow als kop. */
  .tb-scroll .tb-td-klant,
  .tb-scroll .tb-th-klant {
    position: static !important;
    font-weight: 600;
    color: var(--tekst-primair);
    font-size: .9rem;
    padding-bottom: .25rem !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}


/* ── Scopivo scope-matrix mobiel-vriendelijk ─────────────────────────
 * Emma-feedback iPhone-test: 'scope in Scopivo is te breed, werkt niet
 * makkelijk op mobiel.' De brede matrix (klant | overeenkomst-check |
 * N diensten) heeft sticky eerste kolom + horizontale scroll — werkt
 * matig op smartphone-touch.
 *
 * Onder 640px maken we van de matrix een kaart-per-klant: klantnaam
 * boven, checkboxen daaronder in een chip-grid.
 */
@media (max-width: 640px) {
  .scopivo-matrix,
  table.scopivo-matrix {
    display: block;
    width: 100%;
  }
  .scopivo-matrix thead {
    display: none;
  }
  .scopivo-matrix tbody,
  .scopivo-matrix tr {
    display: block;
    width: 100%;
  }
  .scopivo-matrix tr {
    padding: .75rem .8rem;
    border-bottom: 1px solid var(--rand);
    background: var(--bg-kaart);
  }
  .scopivo-matrix td {
    display: inline-flex;
    align-items: center;
    padding: .2rem .4rem !important;
    border: none !important;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: .78rem;
  }
  /* Eerste td (klant) full-width als kop. */
  .scopivo-matrix td:first-child {
    display: block;
    width: 100%;
    padding: 0 0 .4rem !important;
    font-size: .95rem;
    font-weight: 600;
  }
  /* Overeenkomst-td als klein badge boven de diensten-lijst. */
  .scopivo-matrix td:nth-child(2) {
    display: inline-block;
    margin-bottom: .35rem;
  }
  /* Diensten-cellen als chip-lijst met label. */
  .scopivo-matrix td.sm-cel {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    background: var(--paper) !important;
    border-radius: 4px;
    padding: .25rem .5rem !important;
    margin: .15rem;
    font-size: .72rem;
  }
  .scopivo-matrix td.sm-cel::before {
    content: attr(data-dienst);
    color: var(--tekst-secundair);
  }
  .scopivo-matrix td.sm-cel .sm-check {
    margin: 0;
  }
  /* Scroll-container mag niet meer horizontaal scrollen op mobiel. */
  .scopivo-matrix + *,
  div[style*="overflow:auto"]:has(.scopivo-matrix),
  div[style*="overflow: auto"]:has(.scopivo-matrix) {
    overflow: visible !important;
    max-height: none !important;
  }
}


/* ── Instellingen tab-inhoud extra overflow-vangnet ──────────────────
 * Emma-feedback: 'in templates kan ik opzij scrollen'. Alle tab-inhoud
 * expliciet geen horizontale scroll behalve op scroll-wrappers.
 */
@media (max-width: 768px) {
  #tab-workflows,
  #tab-pricing,
  #tab-organisatie,
  #tab-beveiliging,
  #tab-publiek,
  #tab-planning,
  #tab-ondertekenen,
  #tab-koppelingen,
  .tab-inhoud > .kaart,
  .tab-inhoud > .form-kaart {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* Uitzondering: scroll-wrappers moeten hun eigen scroll houden. */
  .tab-inhoud .stap-tabel-wrap,
  .tab-inhoud .tabel-scroll,
  .tab-inhoud [class*="scroll"] {
    overflow-x: auto !important;
  }
}


/* ── Body: voorkom horizontale scroll bij overshoot ────────────────────
 * Als er ergens onbedoelde overflow ontstaat (bv. bij een nog-niet-gefixte
 * modal), voorkomt deze regel dat de héle pagina horizontaal scrolt.
 * Betrouwbaarder dan proberen elke overshoot afzonderlijk te vinden.
 *
 * Emma-melding 2026-07-12: 'ik zit nu in templates en zie dat ik opzij
 * kan scrollen — dat hoort niet.' Universeel op alle mobiel-viewports.
 */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  /* Ook tab-inhoud + kaarten expliciet: voorkomt dat brede inline styles
   * onbedoeld overflow veroorzaken op de root. */
  .tab-inhoud,
  main,
  .main-met-nav,
  .kaart,
  .form-kaart {
    max-width: 100%;
    overflow-x: hidden;
  }
  /* .tab-inhoud kan een interne overflow-container hebben (bv. brede
   * tabellen). Die krijgt overflow-x auto binnen z'n grens. */
  .tab-inhoud > .tabel-scroll,
  .tab-inhoud > .stap-tabel-wrap,
  .tab-inhoud table,
  .tab-inhoud pre {
    max-width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════════════
   M-12 Betalingsregeling — inline `grid-template-columns:1fr 1fr`
   en `1fr 1fr 1fr` op 375px, breekt bedragen-inputs (85px op 327px).

   Inline styles hebben hoogste specificiteit — attribute-selector
   met !important is de enige nette manier om ze op mobiel te
   overrulen zonder elke tag te herschrijven. `body.betalingsregeling-
   pagina`-scope beperkt de impact tot deze template.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  body.betalingsregeling-pagina [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  body.betalingsregeling-pagina [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}