/* ============================================================================
   Cicero — mobiel.css (fase mobiel-1)
   Opmaak voor telefoon en tablet. SPELREGEL: regels voor BESTAANDE onderdelen
   staan uitsluitend binnen @media (max-width: ...) — op een pc-scherm doet dit
   bestand dus helemaal niets. Alleen NIEUWE, puur-mobiele onderdelen (de
   bovenbalk met de menuknop en het donkere overlay-vlak) krijgen hier een
   basisregel, en die is "verborgen" — op pc bestaan ze dus onzichtbaar.
   Terugdraaien = dit bestand (en de bovenbalk in views.js) weghalen.
   ========================================================================== */

/* Nieuwe mobiele onderdelen: op pc altijd onzichtbaar */
.m-th-balk { display: none; }
.m-bovenbalk { display: none; }
.m-overlay { display: none; }
.m-onderbalk { display: none; }
.m-filterbalk { display: none; }
.m-filters-klaar { display: none; }
.m-filters-kop { display: none; }
.m-terug-knop { display: none; }

/* ============================ TELEFOON & SMALLE TABLET (≤ 900px) ============ */
@media (max-width: 900px) {

  /* De inhoud mag NOOIT breder worden dan het scherm (anders zoomde de
     telefoon stiekem uit en vielen de vaste balken uit beeld). De beveiliging
     stond eerst op het hele document (html/body), maar dat liet sommige
     aanraakbrowsers de scrollhoogte verkeerd berekenen: je kon nooit tot
     onderaan scrollen en de pagina veerde terug (melding Falco). Nu knipt
     enkel de inhoudszone af — scrollen blijft volledig van de browser. */
  main { overflow-x: clip; }

  /* ---------- Slank logobalkje bovenaan (scrolt gewoon mee weg) ---------- */
  .m-bovenbalk {
    display: flex; align-items: center; justify-content: center;
    background: var(--donkerder);
    padding: 9px 14px;
  }
  .m-logo { font-size: 19px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-decoration: none; }

  /* ---------- Onderbalk: Menu / Zoeken / Favorieten / Offerte ---------- */
  /* Huisstijlgeel met donkere tekst (vraag Falco) */
  .m-onderbalk {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 380;
    background: var(--accent);
    border-top: 2px solid #1c1f26;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 16px rgba(0,0,0,.25);
  }
  .m-ob-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 8px 4px 7px;
    background: none; border: none; cursor: pointer;
    color: #1c1f26; text-decoration: none; font: inherit;
  }
  .m-ob-item:active { background: var(--accent-donker); }
  .m-ob-icoon { font-size: 20px; line-height: 1.2; position: relative; }
  .m-ob-icoon img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
  .m-ob-tekst { font-size: 10.5px; font-weight: 700; letter-spacing: .2px; }
  /* Favorietenster: geel met zwarte rand */
  .m-ob-ster { font-size: 22px; line-height: 1; color: var(--accent); -webkit-text-stroke: 1.3px #1c1f26; }
  /* Teller-bolletje op het offerte-icoon: geel met zwarte rand */
  .m-ob-teller {
    display: none; position: absolute; top: -7px; right: -12px;
    background: var(--accent); color: #1c1f26;
    border: 2px solid #1c1f26; box-sizing: content-box;
    min-width: 15px; height: 15px; border-radius: 99px;
    font-size: 10.5px; font-weight: 800; line-height: 15px; text-align: center; padding: 0 3px;
  }

  /* ---------- Zijbalk wordt een uitschuifmenu ---------- */
  body.met-zijbalk { display: block; }
  body.met-zijbalk .zijbalk {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 400;
    width: 272px; max-width: 84vw;
    max-height: none;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: none; /* dicht: geen schaduwrand die aan de linkerkant doorschemert */
    visibility: hidden; transition: transform .22s ease, visibility 0s .22s;
  }
  body.menu-open .zijbalk {
    transform: none; visibility: visible;
    transition: transform .22s ease, visibility 0s;
    box-shadow: 14px 0 34px rgba(0,0,0,.35);
  }
  /* Menu scrollbaar op gsm (melding Falco): eigen scrolgebied — verankerd
     via top/bottom (geen expliciete schermhoogte: die berekende op sommige
     aanraakbrowsers te krap waardoor Afmelden onbereikbaar bleef), veeg
     blijft binnen het menu en de pagina erachter staat stil */
  body.met-zijbalk .zijbalk {
    height: auto;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .m-overlay {
    display: block; position: fixed; inset: 0; z-index: 390;
    background: rgba(15, 23, 42, .5);
  }
  /* Menu-links: grotere tikvlakken voor vingers */
  .zijbalk a { padding: 12px 12px; font-size: 15.5px; }

  /* ---------- Algemene indeling ---------- */
  main { padding: 18px 14px 90px; }
  h1 { font-size: 22px; }

  /* iPhone zoomt automatisch in op invulvakken met kleine letters;
     16px voorkomt dat gespring */
  input, select, textarea { font-size: 16px; }

  /* Tabellen: nooit de pagina laten openduwen — binnen hun vak schuifbaar */
  .tabel { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .m-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Dashboard-tegels: twee per rij */
  .tegels { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Vensters (fiches, startdialoog): schermvullend en binnenin scrollbaar */
  .modal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: 92vh; overflow-y: auto; }

  /* ---------- Offerte-widget ---------- */
  /* De zwevende gele knop is op telefoon vervangen door het offerte-vak in de
     onderbalk (met teller-bolletje); het paneel komt bóven de onderbalk uit */
  .offerte-knop { display: none !important; }
  .offerte-paneel { width: 100vw; max-width: 100vw; border-left: none; z-index: 385; }
  .offerte-paneel-voet { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); }

  /* Op pc houden de shopkoppen rechts 170px vrij voor de offerteknop;
     die staat op telefoon onderaan, dus die reservering mag weg */
  .shop-kop, .shop-topbalk { margin-right: 0; }

  /* ---------- Webshop ---------- */
  /* Bovenaan alleen nog de zoekbalk: het merkblok (WEBSHOP + logo), de
     favorietenster en de groepeerknop verhuizen weg (onderbalk) — vraag Falco */
  .shop-merk { display: none; }
  .shop-topbalk .shop-fav-top { display: none; }
  .shop-topbalk { flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .shop-zoek { flex: 1 1 100%; max-width: none; order: 3; }
  /* Zoekknop enkel het vergrootglas: het invulvak wordt breder (vraag Falco) */
  .shop-zoekknop { font-size: 0; padding: 0 16px; }
  .shop-zoekknop .zoek-icoon { width: 20px; height: 20px; margin-right: 0; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shop-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shop-tegel-foto { height: 110px; }
  .shop-hero { flex-direction: column; align-items: flex-start; padding: 20px 18px; gap: 14px; }
  .shop-hero h1 { font-size: 22px; }
  .shop-hero-foto { max-width: 100%; }
  .shop-hoofdfoto { height: 260px; }
  /* Artikels met meerdere foto's: de miniaturenstrook duwde het hele rooster
     breder dan het scherm (melding Falco). Roostervakken mogen krimpen
     (min-width 0) en de strook scrolt binnen zijn eigen breedte. */
  .shop-artikel > *, .shop-cat-layout > *, .shop-home-layout > * { min-width: 0; }
  .shop-minis-wrap, .shop-minis { max-width: 100%; min-width: 0; }
  .shop-titel { font-size: 20px; }
  /* Titelrij artikelpagina: de ster en de blader-pijltjes (vorig/volgend
     artikel) vielen rechts uit beeld (melding Falco) */
  .shop-titel-rij { flex-wrap: wrap; }
  .shop-titel-rij > * { min-width: 0; }
  .shop-titel-acties { flex-wrap: wrap; padding-top: 0; }
  .shop-blader { width: 36px; height: 36px; }
  /* Snelle terugknop naar het overzicht (maakt app.js aan; pc: onzichtbaar) */
  .m-terug-knop {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 8px; padding: 8px 14px;
    background: var(--wit); border: 1px solid var(--rand); border-radius: 99px;
    font-size: 13px; font-weight: 700; color: inherit; cursor: pointer;
  }
  .shop-prijs .shop-netto { font-size: 24px; }
  .shop-artikel.kaart { padding: 14px; }
  /* Bestelvak: groter aantal-vakje en een brede, dikke toevoegen-knop;
     "Bekijk je offerte" hoeft niet (de offerte zit in de onderbalk) */
  .shop-bestel-kader { max-width: none; }
  .shop-stap { width: 48px; height: 48px; font-size: 20px; }
  .shop-stepper input { width: 92px; height: 48px; font-size: 18px; }
  .shop-bestel { width: 100%; padding: 16px 22px; font-size: 16.5px; }
  .shop-bestel-tweede { display: none; }
  .shop-spec-l { width: 130px; }
  .shop-mini { width: 76px; height: 76px; }

  /* ---------- Domeinen als uitklaplijst (Zalando-stijl) ---------- */
  /* Hoofdpagina webshop: de zijlijst "Shop per categorie" is overbodig op
     gsm — het Assortiment (automatisch uitgeklapt) neemt dat over (vraag Falco) */
  .shop-home-layout > .shop-zijkolom { display: none; }
  /* "Assortiment" in zwarte letters (de algemene lichtgrijze linkkleur van de
     donkere balk won het van de gele knop-opmaak) */
  .shop-catbalk a.shop-catbalk-titel { color: #1c1f26; }
  /* "Assortiment ▾" opent een verticale lijst; tik op een domein toont de
     categorieën eronder (het bestaande uitklappaneel, maar dan in de bladzijde) */
  .shop-domeinbalk { flex-direction: column; align-items: stretch; overflow: visible; padding: 0; }
  .shop-domeinbalk .shop-catbalk-titel { margin: 5px 6px; text-align: center; }
  .shop-domeinbalk .shop-catbalk-titel::after { content: ' ▾'; }
  .shop-domeinbalk.open .shop-catbalk-titel::after { content: ' ▴'; }
  .shop-domeinbalk .shop-domein { display: none; }
  .shop-domeinbalk.open .shop-domein {
    display: block; text-align: left; padding: 13px 16px;
    border-bottom: 1px solid #2a3140; border-radius: 0;
  }
  .shop-domeinbalk.open .shop-domein::after { content: ' ›'; float: right; color: #6b7280; }
  /* Categorieënpaneel: niet zwevend maar gewoon in de bladzijde, onder de lijst */
  .shop-megamenu { position: static; flex-direction: column; gap: 14px; padding: 14px 16px;
    border-radius: 0 0 14px 14px; box-shadow: 0 10px 24px rgba(0,0,0,.14); }
  .shop-mm-kolom { min-width: 0; }

  /* ---------- Filterbalk bovenaan + filterscherm als popup ---------- */
  /* De filterkolom links bestaat niet op telefoon; in de plaats komt een
     veegbare chipbalk (maakt app.js aan) en een schermvullend filterscherm */
  .shop-cat-layout .shop-zijkolom { display: none; }
  body.filters-open .shop-cat-layout .shop-zijkolom {
    display: block; position: fixed; inset: 0; z-index: 420;
    border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 16px calc(84px + env(safe-area-inset-bottom, 0));
  }
  /* Kopbalk van het filterscherm: titel + duidelijke sluitknop (✕) */
  .m-filters-kop {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 5;
    background: var(--wit); border-bottom: 1px solid var(--rand);
    margin: 0 -16px 6px; padding: 12px 16px;
  }
  .m-filters-kop strong { font-size: 17px; }
  .m-filters-sluit {
    width: 40px; height: 40px; border: 1px solid var(--rand); border-radius: 10px;
    background: #f3f4f6; font-size: 17px; font-weight: 700; cursor: pointer;
  }
  body.filters-open { overflow: hidden; }
  .m-filterbalk {
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    position: sticky; top: 0; z-index: 240;
    background: var(--achtergrond);
    margin: 0 -14px; padding: 10px 14px;
  }
  .m-filterbalk::-webkit-scrollbar { display: none; }
  .m-filterchip {
    flex: 0 0 auto; padding: 8px 15px; border-radius: 99px;
    border: 1px solid var(--rand); background: var(--wit);
    font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  }
  .m-filterchip.hoofd { background: var(--donkerder); color: var(--accent); border-color: var(--donkerder); }
  .m-filterchip.actief { border-color: var(--accent); background: var(--accent-licht); }
  /* "Zoeken in [groep]" hoeft niet op telefoon (vraag Falco): de grote zoekbalk
     bovenaan zoekt al overal; Sorteer verhuist als pil naast de Filters-chip */
  .shop-cat-kop .shop-zoek.klein { display: none; }
  .shop-cat-kop .shop-sorteer { display: none; }
  .m-filterbalk .shop-sorteer { flex: 0 0 auto; margin-left: 0; gap: 6px; font-size: 13px; }
  .m-filterbalk .shop-sorteer select {
    padding: 7px 12px; border-radius: 99px; border: 1px solid var(--rand);
    background: var(--wit); font-size: 13px; font-weight: 600;
  }
  .m-filters-klaar {
    display: block; position: fixed; left: 12px; right: 12px; z-index: 430;
    bottom: calc(14px + env(safe-area-inset-bottom, 0));
    padding: 14px; border: none; border-radius: 12px;
    background: var(--accent); color: #1c1f26;
    font-size: 15px; font-weight: 800; cursor: pointer;
    box-shadow: 0 10px 26px rgba(0,0,0,.3);
  }
  body:not(.filters-open):not(.th-filters-open) .m-filters-klaar { display: none; }

  /* ---------- Productstroken (gerelateerd / vaak samen gekocht) ---------- */
  /* Zijwaarts vegen: 2 kaartjes volledig in beeld + een halve als hint */
  .shop-grid.shop-strook {
    display: flex; grid-template-columns: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: -14px; padding-right: 14px;
  }
  .shop-grid.shop-strook::-webkit-scrollbar { display: none; }
  .shop-grid.shop-strook > * { flex: 0 0 calc((100% - 30px) / 2.4); scroll-snap-align: start; }
  .shop-groeptegels { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shop-lightbox { padding: 10px; }
  .shop-lightbox-kader { padding: 10px; }

  /* ---------- Offertes (lijst + pagina) ---------- */
  .offerte-totalen { max-width: none; margin-left: 0; }
  .afrond-balk { gap: 8px; }
  .afrond-balk .knop, .print-knoppen .knop { padding: 10px 14px; }

  /* Weergavekeuzes (Kortingkolom / Detaillijnen / Vergelijkend / Prijzen):
     compacte pilletjes naast elkaar i.p.v. brede knoppen onder elkaar */
  .offerte-kop .weergave-keuzes { gap: 6px; }
  .offerte-kop .weergave-keuzes .vinkje,
  .offerte-kop .weergave-keuzes .schakelaar { padding: 5px 9px; font-size: 11.5px; gap: 5px; }
  .offerte-kop .weergave-keuzes .vinkje input { width: 15px; height: 15px; }
  .offerte-kop .weergave-keuzes select { padding: 3px 6px; font-size: 11.5px; }

  /* Kop van de offerte: velden onder elkaar i.p.v. samengeperst naast elkaar.
     Voor een klant-account is de vraag "Voor wie?" overbodig (het is altijd
     zijn eigen offerte): titel en het vaste klantveld verbergen — werfadres
     en referentie blijven gewoon invulbaar (vraag Falco) */
  .offerte-kop .veldrij { flex-direction: column; gap: 8px; }
  .offerte-kop .veldrij label { flex: 1 1 auto; }
  .offerte-kop.klantmodus > h2 { display: none; }
  .offerte-kop.klantmodus .kop-klantveld { display: none; }

  /* Offertetabel: iets kleiner geschreven en de omschrijving krijgt échte
     breedte — de cijferkolommen bereik je door zijwaarts te vegen, in plaats
     van alles smal samen te persen tot lange sliertjes tekst */
  .offerte-tabel { font-size: 12.5px; }
  .offerte-tabel th, .offerte-tabel td { padding: 7px 8px; }
  .offerte-tabel td:nth-child(2) { min-width: 230px; }
  .offerte-tabel .lijn-input { width: 62px; padding: 6px 6px; }
  .offerte-kop { flex-wrap: wrap; gap: 10px; }
  .offerte-totaal { font-size: 14.5px; }

  /* ---------- Fiches en beheerformulieren ---------- */
  .ad-rooster, .ad-rooster.vier, .ad-rooster.omschrijving-rij,
  .art-modal.nieuw .ad-rooster.omschrijving-rij { grid-template-columns: 1fr 1fr; }

  /* Login netjes gecentreerd met wat lucht */
  .login-kaart { margin: 40px auto; width: calc(100vw - 28px); }

  /* ---------- Beheer: team, klanten, leveranciers (fase mobiel-9) ---------- */
  /* Kaarten met wat minder lucht zodat er meer op het scherm past */
  .kaart { padding: 14px 14px; margin-top: 14px; }
  .art-kop { gap: 8px; }
  .art-kop-acties { gap: 6px; padding-top: 2px; }
  .art-kop-acties .knop { padding: 9px 12px; font-size: 13px; }
  /* Rechten-keuzeblokken en vinkjes: onder elkaar met volle breedte */
  .keuzeblok { min-width: 100%; }
  .vinkjes { gap: 8px 12px; }
  /* Actieknopjes in tabellen (blokkeren, verwijderen, ...) niet laten breken */
  .acties, .inline-form { white-space: nowrap; }

  /* ---------- Formulieren algemeen (Mijn gegevens, fiches, beheer) ---------- */
  /* Veldrijen mogen omplooien: velden krijgen echte breedte i.p.v. samengeperst */
  .veldrij { flex-wrap: wrap; }
  .veldrij label { flex: 1 1 46%; min-width: 130px; }

  /* ---------- Offertes & bestellingen (overzichtslijst) ---------- */
  .offerte-filters { padding: 8px 10px; gap: 6px; }
  .offerte-filters input[name="zoek"] { min-width: 0; flex: 1 1 100%; }
  .offerte-filters input, .offerte-filters select { font-size: 13px; padding: 6px 8px; }
  /* Compacter geschreven lijst (vraag Falco) */
  main > .tabel, .kaart > .tabel { font-size: 12px; }
  main > .tabel th, main > .tabel td,
  .kaart > .tabel th, .kaart > .tabel td { padding: 6px 7px; }

  /* ---------- Prijslijsten ---------- */
  .pl-titelrij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .pl-titelrij h1 { flex: 1 1 100%; margin-bottom: 0; }
  .pl-zoekwrap { margin: 4px 0 0; flex: 1 1 100%; }
  .pl-zoekwrap input { min-width: 0; flex: 1; }
  .pl-keuzebalk { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 6px; padding-bottom: 4px; }
  .pl-keuzebalk::-webkit-scrollbar { display: none; }
  .pl-keuzebalk .pl-keuzehint { display: none; }
  /* Vooral compacter geschreven (vraag Falco) */
  .pl-tabel { font-size: 11.5px; }
  .pl-tabel th, .pl-tabel td { padding: 4px 6px; }
  .pl-tabel td:nth-child(2) { min-width: 170px; }
  .pl-zoek-tabel td, .pl-zoek-tabel th { font-size: 11.5px; }

  /* ---------- Tuinhuizen-portaal (zoals de webshop, vraag Falco) ---------- */
  /* Zoekbalk bovenaan met een Filters-knop eronder (maakt app.js aan);
     de filterkolom wordt een schermvullend filterscherm; 2 tegels per rij */
  .th-layout { display: block; }
  .th-layout .th-zijkolom { display: none; }
  body.th-filters-open .th-layout .th-zijkolom {
    display: block; position: fixed; inset: 0; z-index: 420; width: auto;
    max-height: none; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 16px calc(84px + env(safe-area-inset-bottom, 0));
  }
  body.th-filters-open { overflow: hidden; }
  .th-scroller { max-height: none; overflow: visible; padding-right: 0; }
  .th-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .th-foto { height: 120px; }
  .th-naam { font-size: 13px; }
  .th-kop { gap: 8px; }
  .m-th-balk { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
  .m-th-filterknop {
    align-self: flex-start;
    background: var(--donkerder); color: var(--accent);
    border: none; border-radius: 99px; padding: 10px 18px;
    font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: inherit;
  }

  /* ---------- Toonpark referenties ---------- */
  .th-zoekvak { max-width: none !important; }
  .tp-ref { font-size: 12.5px; }

  /* ---------- Calculators (omkadering; de binnenkant regelt de server-injectie) ---------- */
  .calc-kop h1 { font-size: 17px; margin: 2px 0 6px; }
  .calc-kop .kruimel { font-size: 12px; margin: 0; }
  .calc-frame {
    height: calc(100vh - 205px);
    height: calc(100dvh - 205px); /* echte schermhoogte op telefoons */
    border-radius: 10px;
    /* iPhone-truc: verhindert dat het kader zichzelf oprekt naar de breedte
       van de inhoud (dan werd de hele pagina breder na het invullen) */
    width: 1px; min-width: 100%; max-width: 100%;
  }

  /* ---------- Statistieken ---------- */
  .art-statkaarten { gap: 8px; }
  .statkaart { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); padding: 7px 10px; }
  .stats-periodes { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .stats-periodes::-webkit-scrollbar { display: none; }
  /* Grafieken: weinig staafjes (jaar/maand) rekken mee tot de kaartbreedte
     i.p.v. een smal strookje links; veel staafjes (week/dag) blijven gewoon
     zijwaarts scrollen op hun vaste breedte */
  .stats-scroll .stats-grafiek { min-width: 100%; height: auto; max-height: 320px; }
}

/* ============================ KLEINE TELEFOON (≤ 480px) ===================== */
@media (max-width: 480px) {
  .tegels { grid-template-columns: 1fr 1fr; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-cats { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 20px; }
  .ad-rooster, .ad-rooster.vier { grid-template-columns: 1fr; }
  .shop-hoofdfoto { height: 220px; }
}