/* Ibley sales — mobiele weergave.
   ---------------------------------------------------------------------------
   HERZIEN 30-08-2026. Twan: "Die houdt nu geen rekening met de besturingsbalk
   van de iphone onderaan en sowieso kan dat design wel beter. (...) betere data
   presentatie en volgens de nieuwste UX en design richtlijnen."

   Wat er mis was, in volgorde van ernst:

   1. De veilige zones deden niets. mobile.html miste `viewport-fit=cover`, en
      zonder die vlag geeft iOS env(safe-area-inset-*) altijd 0. De tabbalk
      rekende er wél mee en verdween dus onder de home-indicator.
   2. Zes gelijkwaardige kaartjes in drie kolommen op 375 pixels. "Gem.
      bestelwaarde" brak over drie regels, en omzet woog even zwaar als het
      retourpercentage. Op een telefoon kijk je naar één of twee dingen.
   3. Tekst van 9 tot 11,5 px, grijs op wit. Onder de 11 px is niet meer
      comfortabel te lezen, en de contrastverhouding haalde WCAG AA niet.
      Aanraakvlakken waren op sommige plekken 32 px; 44 px is de ondergrens.
   4. Geen donkere modus, terwijl een telefoon die vaak aan heeft staan.
   5. Kleuren stonden los in de code (#9aa0a8, #F9F9FA, ...) i.p.v. in tokens,
      dus een donkere variant was niet te maken zonder alles langs te gaan.

   Aanpak: één tokenset, één typeschaal, en hiërarchie in plaats van een raster
   van gelijke blokjes. De klassenamen zijn ongewijzigd gebleven — mobile.js
   bouwt de HTML en die hoefde daarvoor niet op de schop.
   --------------------------------------------------------------------------- */

:root{
  /* Merkkleur gelijk aan de desktop, zodat het één product blijft. */
  --primary:#2864AE;
  --primary-zacht:#EAF1F9;
  --goed:#0F6E56;
  --goed-zacht:#E4F2ED;
  --waarschuwing:#B45309;
  --waarschuwing-zacht:#FDF3E3;
  --fout:#B3271A;
  --fout-zacht:#FAECE7;

  /* Neutralen met een lichte blauwzweem: een zuiver grijs oogt onaf naast een
     blauwe merkkleur. */
  --grond:#F4F6F9;
  --vlak:#FFFFFF;
  --vlak-2:#EEF1F6;
  --inkt:#141A22;
  --inkt-2:#5A6472;      /* haalt 4.6:1 op --vlak — AA voor kleine tekst */
  --inkt-3:#7C8695;
  --lijn:#E3E8EF;
  --lijn-sterk:#D3DAE4;

  --schaduw-kaart:0 1px 2px rgba(20,26,34,.05);
  --schaduw-zwevend:0 10px 30px rgba(20,26,34,.16);

  --r-s:10px; --r-m:14px; --r-l:18px;
  --ruimte:14px;

  --font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --tab-hoogte:56px;
}

/* Donkere modus in drie standen, niet twee.
   ---------------------------------------------------------------------------
   Twan, 30-08-2026: "Kan je ook de optie om tussen dark mode te schakelen
   inbouwen?" Daarmee zijn er drie mogelijkheden, en de middelste wordt het
   vaakst vergeten:

   - data-thema="light"  : de gebruiker koos licht, ook op een donkere telefoon
   - data-thema="dark"   : de gebruiker koos donker, ook op een lichte telefoon
   - geen attribuut      : "Automatisch" — dan beslist prefers-color-scheme

   Vandaar de uitsluiting hieronder: zonder :not([data-thema="light"]) zou een
   bewuste keuze voor licht op een donker toestel alsnog donker worden.
   Kleuren staan ALLEEN in deze tokenblokken; geen enkele component mag een
   kleur rechtstreeks in een media query zetten, want dan werkt de knop maar
   één kant op. */
@media (prefers-color-scheme: dark){
  :root:not([data-thema="light"]){
  --primary:#5A9BE8;
  --primary-zacht:#17273A;
  --goed:#5FC7A6;
  --goed-zacht:#123027;
  --waarschuwing:#E0A94F;
  --waarschuwing-zacht:#2E2617;
  --fout:#E58A76;
  --fout-zacht:#331C18;
  
  --grond:#0C1014;
  --vlak:#161C23;
  --vlak-2:#1F262F;
  --inkt:#E8EDF3;
  --inkt-2:#A0AAB8;
  --inkt-3:#7C8695;
  --lijn:#252D37;
  --lijn-sterk:#333C48;
  
  --schaduw-kaart:0 1px 2px rgba(0,0,0,.4);
  --schaduw-zwevend:0 10px 30px rgba(0,0,0,.55);
  }
}

:root[data-thema="dark"]{
  --primary:#5A9BE8;
  --primary-zacht:#17273A;
  --goed:#5FC7A6;
  --goed-zacht:#123027;
  --waarschuwing:#E0A94F;
  --waarschuwing-zacht:#2E2617;
  --fout:#E58A76;
  --fout-zacht:#331C18;
  
  --grond:#0C1014;
  --vlak:#161C23;
  --vlak-2:#1F262F;
  --inkt:#E8EDF3;
  --inkt-2:#A0AAB8;
  --inkt-3:#7C8695;
  --lijn:#252D37;
  --lijn-sterk:#333C48;
  
  --schaduw-kaart:0 1px 2px rgba(0,0,0,.4);
  --schaduw-zwevend:0 10px 30px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ background:var(--grond); }
body{
  margin:0;
  min-height:100dvh;               /* niet 100vh: dat rekent op iOS de browserbalk mee */
  background:var(--grond);
  font-family:var(--font-sans);
  color:var(--inkt);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
button,input{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }

/* Cijfers moeten onder elkaar uitlijnen — anders danst een bedrag bij elke
   verversing een paar pixels heen en weer. */
.m-card-value,.m-hero-waarde,.m-hero-neven-waarde,.m-row-right,.m-kv-value,.m-card-delta,.m-delta{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- inloggen ---------- */
.m-login{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}
.m-login-card{ width:100%; max-width:360px; background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-l); padding:30px 24px; box-shadow:var(--schaduw-kaart); }
.m-brand{ font-size:20px; font-weight:650; letter-spacing:-.01em; color:var(--inkt); margin-bottom:20px; text-align:center; }
#mLoginForm{ display:flex; flex-direction:column; gap:10px; }
#mLoginForm input{
  font-size:16px;                  /* onder 16px zoomt iOS bij het focussen in */
  padding:14px 15px; border-radius:var(--r-s); border:1px solid var(--lijn-sterk);
  background:var(--grond); color:var(--inkt); min-height:48px;
}
#mLoginForm input:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; border-color:transparent; }
#mLoginForm button{ background:var(--primary); color:#fff; border:none; font-size:16px; font-weight:600; padding:14px; border-radius:var(--r-s); margin-top:6px; min-height:48px; }
#mLoginForm button:active{ filter:brightness(.92); }
.m-error{ color:var(--fout); font-size:13px; min-height:18px; }
.m-login-hint{ text-align:center; font-size:13px; color:var(--inkt-3); margin-top:16px; }
.m-login-hint a{ color:var(--primary); }

/* ---------- het omhulsel ---------- */
.m-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px 10px; padding-top:calc(10px + env(safe-area-inset-top));
  background:color-mix(in srgb, var(--vlak) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--lijn);
}
.m-header .m-brand{ margin:0; font-size:17px; text-align:left; }
.m-icon-btn{
  border:none; background:var(--vlak-2); color:var(--inkt);
  width:44px; height:44px; border-radius:var(--r-s);   /* 44px: de ondergrens voor een aanraakvlak */
  font-size:18px; display:flex; align-items:center; justify-content:center;
}
.m-icon-btn:disabled{ opacity:.45; }
.m-icon-btn:active{ background:var(--lijn); }
.m-icon-btn.spin i,.m-spin-icon{ animation:m-spin .9s linear infinite; display:inline-block; }
@keyframes m-spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

.m-content{
  padding:var(--ruimte);
  padding-bottom:calc(var(--tab-hoogte) + env(safe-area-inset-bottom) + 24px);
  padding-left:calc(var(--ruimte) + env(safe-area-inset-left));
  padding-right:calc(var(--ruimte) + env(safe-area-inset-right));
  max-width:560px; margin:0 auto;
}

/* DE TABBALK EN DE HOME-INDICATOR.
   Dit was de klacht. De balk zelf is 56px hoog; daaronder komt de veilige zone
   erbij, zodat de knoppen nooit onder het streepje van de iPhone vallen. */
.m-tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:10;
  display:flex; align-items:stretch;
  height:calc(var(--tab-hoogte) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
  background:color-mix(in srgb, var(--vlak) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--lijn);
}
.m-tab{
  flex:1; min-width:0; border:none; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:6px 2px; font-size:11px; font-weight:500; color:var(--inkt-3); position:relative;
}
.m-tab i{ font-size:22px; line-height:1; }
.m-tab span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.m-tab.active{ color:var(--primary); }
.m-tab.active i{ transform:translateY(-1px); }
.m-tab:active{ opacity:.6; }
.m-badge{
  position:absolute; top:4px; left:calc(50% + 6px);
  background:var(--fout); color:#fff; font-size:10px; font-weight:700;
  min-width:17px; height:17px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  border:2px solid var(--vlak);
}

/* ---------- "Meer"-menu ---------- */
.m-more-backdrop{ position:fixed; inset:0; z-index:19; background:rgba(10,14,18,.28); }
.m-more-menu{
  position:fixed; right:12px; left:12px; z-index:20;
  bottom:calc(var(--tab-hoogte) + env(safe-area-inset-bottom) + 10px);
  background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-l);
  box-shadow:var(--schaduw-zwevend); padding:8px;
  max-width:340px; margin-left:auto;
}
.m-more-item{
  display:flex; align-items:center; gap:12px; width:100%; border:none; background:transparent;
  color:var(--inkt); font-size:15px; padding:13px 12px; border-radius:var(--r-s); text-align:left; min-height:48px;
}
.m-more-item i{ font-size:19px; width:22px; text-align:center; color:var(--inkt-3); }
.m-more-item:active{ background:var(--vlak-2); }
.m-more-item.active{ color:var(--primary); background:var(--primary-zacht); }
.m-more-item.active i{ color:var(--primary); }

/* ---------- filter- en periodepillen ---------- */
.m-pill-tabs{
  display:flex; gap:6px; margin-bottom:12px; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-left:calc(var(--ruimte) * -1); margin-right:calc(var(--ruimte) * -1);
  padding:2px var(--ruimte);
}
.m-pill-tabs::-webkit-scrollbar{ display:none; }
.m-pill-tabs button{
  flex-shrink:0; border:1px solid var(--lijn); background:var(--vlak); color:var(--inkt-2);
  /* 44px is de ondergrens voor een aanraakvlak (Apple HIG en WCAG 2.5.8);
     deze stonden op 40. */
  font-size:14px; font-weight:500; padding:0 16px; border-radius:999px; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
}
.m-pill-tabs button.active{ background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
.m-pill-tabs button:active{ transform:scale(.97); }

/* ---------- het hoofdgetal ----------
   Op een telefoon kijk je naar één of twee dingen. Omzet en winst krijgen
   daarom het formaat dat daarbij hoort; de rest zit eronder in een raster. */
.m-hero{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-l);
  box-shadow:var(--schaduw-kaart); padding:18px 18px 16px; margin-bottom:10px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
/* Met grafiek erin wordt de kaart tweeregelig: bedragen boven, staven eronder.
   flex-wrap i.p.v. een tweede container, zodat de bestaande twee kolommen hun
   uitlijning houden. */
.m-hero.met-grafiek{ flex-wrap:wrap; }
.m-hero-grafiek{ flex:1 0 100%; margin-top:16px; }
.m-hero-hoofd{ min-width:0; }
.m-hero-label{ font-size:13px; color:var(--inkt-2); margin-bottom:2px; }
.m-hero-waarde{ font-size:34px; line-height:1.05; font-weight:680; letter-spacing:-.025em; color:var(--inkt); }
.m-hero-neven{ text-align:right; flex-shrink:0; padding-left:16px; border-left:1px solid var(--lijn); }
.m-hero-neven-waarde{ font-size:20px; font-weight:650; letter-spacing:-.015em; margin-top:1px; }
.m-hero-neven-waarde.goed{ color:var(--goed); }
.m-hero-neven-waarde.slecht{ color:var(--fout); }
.m-hero-marge{ font-size:12px; color:var(--inkt-3); margin-top:2px; }
.m-delta{ font-size:13px; margin-top:6px; display:inline-flex; align-items:center; gap:4px; }
.m-delta.good{ color:var(--goed); }
.m-delta.bad{ color:var(--fout); }
.m-delta.vlak{ color:var(--inkt-3); }

/* ---------- kaarten ---------- */
.m-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.m-cards-3{ grid-template-columns:1fr 1fr; }   /* drie kolommen past niet op 375px */
.m-card{ background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-m); padding:14px 15px; box-shadow:var(--schaduw-kaart); }
.m-cards-3 .m-card{ padding:14px 15px; }
.m-card-label{ font-size:13px; color:var(--inkt-2); margin-bottom:3px; }
.m-card-value{ font-size:22px; font-weight:650; letter-spacing:-.02em; color:var(--inkt); line-height:1.15; }
.m-cards-3 .m-card-value{ font-size:22px; }
.m-card-delta{ font-size:12.5px; margin-top:4px; }
.m-card-delta.good{ color:var(--goed); }
.m-card-delta.bad{ color:var(--fout); }

.m-section-title{
  font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--inkt-3); margin:22px 0 9px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.m-section-title:first-child{ margin-top:0; }
.m-empty{ background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-m); padding:22px 16px; text-align:center; color:var(--inkt-3); font-size:14px; }

/* ---------- rijen ---------- */
.m-row{
  display:flex; align-items:center; gap:12px;
  background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-m);
  padding:12px 14px; margin-bottom:8px; cursor:pointer; min-height:60px;
}
.m-row:active{ background:var(--vlak-2); }
.m-row-thumb{ width:42px; height:42px; border-radius:var(--r-s); object-fit:cover; background:var(--vlak-2); flex-shrink:0; }
.m-row-body{ flex:1; min-width:0; }
.m-row-title{ font-size:15px; font-weight:550; color:var(--inkt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.006em; }
/* Eén regel, met puntjes als het niet past. Zonder dit brak "0x op voorraad"
   over twee regels bij lange EAN's en werden de rijen ongelijk hoog — dat
   maakt een lijst onrustig om doorheen te scannen. */
.m-row-sub,.m-row-sub2{ font-size:13px; color:var(--inkt-2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-row-right{ text-align:right; flex-shrink:0; }
.m-row-right b{ font-size:16px; font-weight:650; letter-spacing:-.015em; }
.m-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; flex-shrink:0; }
.m-status-chip{ display:flex; align-items:center; font-size:13px; color:var(--inkt-2); margin-top:3px; }
.m-chip{ display:inline-block; font-size:11.5px; font-weight:650; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; }
.m-chip-red{ background:var(--fout-zacht); color:var(--fout); }
.m-chip-orange{ background:var(--waarschuwing-zacht); color:var(--waarschuwing); }
.m-chip-primary{ background:var(--primary-zacht); color:var(--primary); }

/* ---------- detailschermen ---------- */
.m-detail-header{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.m-detail-title{ font-size:19px; font-weight:650; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-detail-section{ background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-m); padding:14px 15px; margin-bottom:8px; font-size:14px; line-height:1.5; }
.m-kv-row{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; }
.m-kv-row:not(:last-child){ border-bottom:1px solid var(--lijn); }
.m-kv-label{ color:var(--inkt-2); flex-shrink:0; }
.m-kv-value{ text-align:right; font-weight:500; }

/* ---------- zoeken ---------- */
.m-search{
  width:100%; font-size:16px; padding:13px 15px; border-radius:var(--r-m);
  border:1px solid var(--lijn-sterk); background:var(--vlak); color:var(--inkt);
  margin-bottom:14px; min-height:48px;
}
.m-search:focus-visible{ outline:2px solid var(--primary); outline-offset:1px; border-color:transparent; }
.m-search::placeholder{ color:var(--inkt-3); }

/* ---------- meldingen ---------- */
.m-notif-strip{
  background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-m);
  padding:13px 15px; margin-bottom:14px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; cursor:pointer; min-height:52px;
}
.m-notif-strip:active{ background:var(--vlak-2); }
.m-notif-strip-label{ font-size:15px; font-weight:550; }
.m-notif{ background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-m); padding:13px 14px; margin-bottom:8px; display:flex; gap:11px; align-items:flex-start; }
.m-notif-icon{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; margin-top:1px; }
.m-notif-icon.info{ background:var(--primary-zacht); color:var(--primary); }
.m-notif-icon.warn{ background:var(--waarschuwing-zacht); color:var(--waarschuwing); }
.m-notif-icon.error{ background:var(--fout-zacht); color:var(--fout); }
.m-notif-text{ flex:1; font-size:14px; line-height:1.45; }
.m-notif-date{ font-size:12.5px; color:var(--inkt-3); margin-top:3px; }
.m-notif-dismiss{ border:none; background:transparent; color:var(--inkt-3); font-size:18px; width:44px; height:44px; flex-shrink:0; margin:-8px -8px 0 0; }

/* ---------- koppelingen ---------- */
.m-conn-row{ background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-m); padding:14px 15px; margin-bottom:9px; }
.m-conn-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.m-conn-name{ font-size:15px; font-weight:600; }
.m-conn-sub{ font-size:13px; color:var(--inkt-2); margin-top:3px; }
.m-conn-error{ font-size:13px; color:var(--fout); margin-top:5px; }
.m-conn-btns{ display:flex; gap:8px; flex-shrink:0; }
.m-conn-sync-btn{ flex-shrink:0; border:1px solid var(--lijn); background:var(--vlak-2); color:var(--inkt); font-size:14px; font-weight:600; padding:0 14px; min-height:44px; border-radius:var(--r-s); display:flex; align-items:center; gap:6px; }
.m-conn-sync-btn:disabled{ opacity:.55; }
.m-conn-sync-btn:active{ background:var(--lijn); }
.m-conn-webhook-btn{ border:1px solid var(--lijn); background:var(--vlak-2); color:var(--inkt); width:44px; height:44px; border-radius:var(--r-s); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.m-conn-webhook-btn.active{ background:var(--primary-zacht); border-color:var(--primary-zacht); color:var(--primary); }
.m-refresh-all-btn{ width:100%; border:none; background:var(--primary); color:#fff; font-size:16px; font-weight:600; padding:0; min-height:50px; border-radius:var(--r-m); margin-bottom:14px; display:flex; align-items:center; justify-content:center; gap:8px; }
.m-refresh-all-btn:disabled{ opacity:.6; }
.m-refresh-all-btn:active{ filter:brightness(.92); }

/* ---------- instellingen ---------- */
.m-settings-card{ background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-m); padding:2px 16px; margin-bottom:16px; }
.m-settings-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; border-bottom:1px solid var(--lijn); min-height:56px; }
.m-settings-row:last-child{ border-bottom:none; }
.m-settings-row-label{ font-size:15px; font-weight:500; }
.m-settings-row-sub{ font-size:13px; color:var(--inkt-2); margin-top:3px; }
.m-settings-toggle{ width:24px; height:24px; flex-shrink:0; accent-color:var(--primary); }
.m-account-card{ background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-m); padding:18px 16px; margin-bottom:16px; display:flex; align-items:center; gap:14px; }
.m-avatar{ width:48px; height:48px; border-radius:50%; background:var(--vlak-2); object-fit:cover; flex-shrink:0; }
.m-avatar-fallback{ width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:650; flex-shrink:0; }
.m-logout-btn{ width:100%; border:1px solid var(--lijn); background:var(--vlak); color:var(--fout); font-size:16px; font-weight:600; min-height:50px; border-radius:var(--r-m); }
.m-logout-btn:active{ background:var(--fout-zacht); }

.m-loading{ text-align:center; padding:48px 0; color:var(--inkt-3); font-size:14px; }

/* ---------------------------------------------------------------------------
   Voorstellen 3, 4 en 5 (30-08-2026), goedgekeurd na de mockups.
   --------------------------------------------------------------------------- */

/* ---- 3. periode als schuifknop, winkel in de kop ---- */
.m-segment{
  display:flex; background:var(--vlak-2); border-radius:11px; padding:3px; margin-bottom:12px;
}
.m-segment button{
  flex:1; border:none; background:transparent; color:var(--inkt-2);
  font-size:14px; font-weight:500; min-height:38px; border-radius:8px;
}
.m-segment button.aan{
  background:var(--vlak); color:var(--inkt); font-weight:650;
  box-shadow:0 1px 3px rgba(20,26,34,.12);
}
.m-segment button:active{ opacity:.7; }

.m-winkelkop{
  display:inline-flex; align-items:center; gap:5px; border:none; background:transparent;
  color:var(--inkt); font-size:17px; font-weight:650; letter-spacing:-.01em;
  padding:0; min-height:44px; max-width:100%;
}
.m-winkelkop span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-winkelkop i{ font-size:16px; color:var(--inkt-3); flex-shrink:0; }
.m-winkelkop:active{ opacity:.6; }

.m-winkelmenu-backdrop{ position:fixed; inset:0; z-index:29; background:rgba(10,14,18,.28); }
.m-winkelmenu{
  position:fixed; z-index:30; left:12px; right:12px; max-width:340px;
  top:calc(env(safe-area-inset-top) + 62px);
  background:var(--vlak); border:1px solid var(--lijn); border-radius:var(--r-l);
  box-shadow:var(--schaduw-zwevend); padding:8px;
}
.m-winkelmenu button{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  border:none; background:transparent; color:var(--inkt); font-size:15px;
  padding:12px; border-radius:var(--r-s); text-align:left; min-height:48px;
}
.m-winkelmenu button:active{ background:var(--vlak-2); }
.m-winkelmenu button.aan{ color:var(--primary); background:var(--primary-zacht); font-weight:600; }

/* ---- 4. status als kleurstreep, en een pijltje dat zegt: hier kun je op tikken ---- */
.m-row{ position:relative; }
.m-streep{
  position:absolute; left:0; top:0; bottom:0; width:3px;
  border-top-left-radius:var(--r-m); border-bottom-left-radius:var(--r-m);
}
/* Twan vond het orderdetail niet, en dat is geen wonder: een rij zag er niet
   uit alsof je erop kon tikken. Een pijltje is de conventie op iOS. */
.m-pijl{ font-size:16px; color:var(--inkt-3); flex-shrink:0; margin-left:2px; }

/* ---- 5. voorraad als staafje ---- */
.m-balk{
  height:4px; border-radius:2px; background:var(--vlak-2);
  overflow:hidden; margin-top:5px; max-width:150px;
}
.m-balk i{ display:block; height:100%; border-radius:2px; }
.m-op{ color:var(--fout); }
.m-op b{ font-weight:650; }
.m-bijna{ color:var(--waarschuwing); }
.m-bijna b{ font-weight:650; }

/* De status stond achteraan in de subregel en werd daar afgekapt — precies het
   woord dat ertoe doet. Nu vooraan, in dezelfde kleur als de streep links, zodat
   je hem ook ziet als de winkelnaam niet past. */
.m-status{ font-weight:600; }

/* Lange teksten in een detailkaart moeten afbreken. De uitleg bij een
   ontbrekende track & trace liep anders buiten de kaart door. */
.m-detail-section{ overflow-wrap:anywhere; word-break:break-word; }

/* Kleine knop in een instellingenrij (proefmelding). 44 px hoog, net als elk
   ander aanraakvlak in deze app. */
.m-knop-klein{
  appearance:none; border:1px solid var(--lijn-sterk); background:var(--vlak);
  color:var(--primary); font-family:inherit; font-size:14px; font-weight:600;
  min-height:44px; padding:0 16px; border-radius:var(--r-s); cursor:pointer;
}
.m-knop-klein:disabled{ opacity:.5; }

/* ---- staafgrafiek omzet (voorstel 7) ----
   De staven zijn <button>: ze zijn aan te tikken en dus ook met een
   toetsenbord of VoiceOver te bereiken. Een <div> met een klikafhandeling
   ziet er hetzelfde uit maar bestaat niet voor wie de app niet ziet. */
.m-grafiek{
  display:flex; align-items:flex-end; gap:2px; height:68px;
  margin:0 0 6px; padding:0 2px;
}
.m-balkje{
  flex:1; min-width:0; padding:0; border:0; border-radius:3px 3px 0 0;
  background:var(--primary); opacity:.35; cursor:pointer;
  transition:opacity .12s ease;
  /* Het aanraakvlak doortrekken tot de volle hoogte van de grafiek: een staaf
     van 4 pixels is anders niet te raken. */
  position:relative;
}
.m-balkje::after{ content:''; position:absolute; left:0; right:0; bottom:0; top:-68px; }
.m-balkje.top{ opacity:.6; }
.m-balkje.gekozen{ opacity:1; background:var(--inkt); }
.m-grafiek-as{
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--inkt-3); font-variant-numeric:tabular-nums;
}
.m-grafiek-detail{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--lijn);
  font-size:13px; color:var(--inkt-2);
}
.m-grafiek-detail b{ font-size:16px; color:var(--inkt); font-variant-numeric:tabular-nums; white-space:nowrap; }
.m-grafiek-orders{ font-size:13px; font-weight:400; color:var(--inkt-2); }
.m-grafiek-hint{
  margin-top:8px; padding-top:8px; border-top:1px solid var(--lijn);
  font-size:12px; color:var(--inkt-3);
}
.m-grafiek-leeg{ font-size:13px; color:var(--inkt-3); padding:10px 0; }

/* ---- twee pagina's kaarten met een veeg (voorstel 8) ----
   scroll-snap, geen eigen touch-afhandeling: de browser levert de vaart en
   het vastklikken die bij het toestel horen. `overscroll-behavior-x: contain`
   voorkomt dat een veeg aan het einde de terug-navigatie van Safari opent. */
.m-schuif{
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-bottom:6px;
}
.m-schuif::-webkit-scrollbar{ display:none; }
.m-schuif-pagina{ flex:0 0 100%; scroll-snap-align:start; }
.m-schuif .m-cards{ margin-bottom:0; }

.m-stippen{ display:flex; justify-content:center; gap:6px; margin:0 0 18px; }
.m-stippen i{
  width:6px; height:6px; border-radius:99px; background:var(--lijn-sterk);
  transition:width .16s ease, background .16s ease;
}
.m-stippen i.aan{ width:16px; background:var(--primary); }

/* Een kaart die ook een knop is (Bijna op → de productenlijst). */
.m-card-knop{
  appearance:none; font-family:inherit; text-align:left; width:100%;
  cursor:pointer; color:inherit;
}
.m-card-leeg{ font-size:16px; font-weight:500; color:var(--inkt-3); }