/* =====================================================================
   Stecky — Liquid Glass 2026 (mobiele verfijningslaag)
   ---------------------------------------------------------------------
   Additief: laadt NA style.css. Alles is gescoped op ≤820px, dus de
   desktopversie blijft volledig ongewijzigd. Gebruikt uitsluitend de
   bestaande merk-tokens (--indigo, --paneel, --ink, --lijn, --bg ...),
   zodat branding, kleuren en typografie identiek blijven.

   Doel: echte "liquid glass" — gelaagd glas met diepte, specular
   highlights, zachte reflecties en premium schaduwen — plus subtiele
   spring-microinteracties. GPU-vriendelijk (transform/opacity/blur).
   ===================================================================== */

/* ---- Globale, onschadelijke keyframes (ook op desktop ongebruikt) ---- */
@keyframes glasIn      { from{ opacity:0; transform:translateY(10px) scale(.985) } to{ opacity:1; transform:none } }
@keyframes shimmerMove { from{ background-position:-160% 0 } to{ background-position:160% 0 } }
@keyframes sheenDrift  { 0%{ transform:translateX(-30%) } 100%{ transform:translateX(30%) } }

@media (max-width:820px){

  /* =================================================================
     1. LIQUID GLASS — specular highlights & diepte op het chrome
     ================================================================= */

  /* Gemeenschappelijke glas-verdieping: hogere saturatie + zachte rand-
     highlight (inset) voor de kenmerkende "vloeibaar glas"-rand. */
  .tabbar, .topbar{
    -webkit-backdrop-filter:saturate(200%) blur(30px);
    backdrop-filter:saturate(200%) blur(30px);
    position:relative; isolation:isolate; overflow:hidden;
  }

  /* Specular sheen bovenop de glazen pill-tabbar */
  .tabbar::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
    pointer-events:none;
    background:
      linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 60%),
      radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,.35), transparent 60%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.65),
      inset 0 0 0 .5px rgba(255,255,255,.25),
      inset 0 -14px 26px -18px rgba(20,14,10,.35);
    mix-blend-mode:screen;
  }
  .tabbar > *{ position:relative; z-index:1; }
  .tabbar{
    box-shadow:
      0 20px 48px -18px rgba(20,14,10,.55),
      0 4px 14px -8px rgba(20,14,10,.30);
  }

  /* De actieve "pill" achter het icoon krijgt lichte glans + spring */
  .tabbar-item.actief::before{
    background:linear-gradient(160deg,
      color-mix(in srgb, var(--indigo-soft) 92%, #fff),
      var(--indigo-soft));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      0 6px 14px -8px color-mix(in srgb, var(--indigo) 60%, transparent);
  }

  /* Zwevende topbar-pill: identieke glas-behandeling */
  .topbar::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 52%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.6),
      inset 0 0 0 .5px rgba(255,255,255,.22);
    mix-blend-mode:screen;
  }
  .topbar > *{ position:relative; z-index:1; }

  /* =================================================================
     2. CARDS — gelaagd, met zachte diepte en fijne bovenrand-highlight
     ================================================================= */
  .card{
    position:relative;
    box-shadow:
      0 1px 2px rgba(20,14,10,.04),
      0 24px 48px -34px rgba(120,60,10,.42),
      inset 0 1px 0 rgba(255,255,255,.55);          /* subtiele bovenrand-glans */
    border-color:color-mix(in srgb, var(--ink) 6%, transparent);
  }
  /* Fijne, nauwelijks zichtbare bovenglans die de kaart "licht laat vangen" */
  .card::after{
    content:""; position:absolute; left:0; right:0; top:0; height:46%;
    border-radius:inherit; pointer-events:none; z-index:0;
    background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
    -webkit-mask-image:linear-gradient(180deg,#000,transparent);
            mask-image:linear-gradient(180deg,#000,transparent);
  }
  .card > *{ position:relative; z-index:1; }

  /* =================================================================
     3. BOTTOM SHEET — glazen top, diepere schaduw, drag-vriendelijk
     ================================================================= */
  dialog.modal{
    background:color-mix(in srgb, var(--paneel) 92%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(22px);
            backdrop-filter:saturate(180%) blur(22px);
    box-shadow:
      0 -24px 64px -26px rgba(20,14,10,.55),
      inset 0 1px 0 rgba(255,255,255,.6);
    will-change:transform;
  }
  dialog.modal::backdrop{
    background:rgba(20,14,10,.46);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  /* De sheet wordt door JS gesleept; deze klasse volgt de vinger 1:1 */
  dialog.modal.sleept{ animation:none !important; transition:none !important; }
  /* Terugveren na loslaten */
  dialog.modal.terug{ transition:transform .34s cubic-bezier(.2,.8,.2,1); transform:translateY(0) !important; }

  /* =================================================================
     4. SKELETON / SHIMMER — nette laadtoestanden
     ================================================================= */
  .skeleton{
    position:relative; overflow:hidden; border-radius:12px;
    background:color-mix(in srgb, var(--ink) 8%, var(--paneel));
    color:transparent !important;
  }
  .skeleton::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    background-size:200% 100%;
    animation:shimmerMove 1.25s ease-in-out infinite;
  }

  /* =================================================================
     5. FIJNSLIJPWERK
     ================================================================= */
  /* Iets levendiger tik-feedback op alle tikbare glas-elementen */
  .tabbar-item, .btn, .chip, .ico-btn, .stat-card, .tile{
    -webkit-tap-highlight-color:transparent;
  }
  /* Zachte "spring" bij het verschijnen van bottom-sheets voelt al goed;
     hier alleen een subtiele schaal-pop op de grijp-indicator. */
  dialog.modal .modal-kop::before{ transition:background .2s, width .2s; }
  dialog.modal.sleept .modal-kop::before{ width:52px; background:color-mix(in srgb, var(--ink) 28%, transparent); }

  /* Empty states iets luchtiger en vriendelijker op mobiel */
  .leeg, .empty, .geen-data{ padding:34px 20px; }
}

/* Respecteer 'minder beweging' */
@media (prefers-reduced-motion:reduce){
  .tabbar::before, .topbar::before{ animation:none; }
  .skeleton::after{ animation:none; }
  dialog.modal{ animation:none !important; }
}

/* =====================================================================
   Stecky — Mobiele app-header (profiel + zoek, géén logo) & 90/10-menu
   Overschrijft de eerdere mobiele topbar/pill. Alleen ≤820px.
   ===================================================================== */

/* Standaard verborgen (desktop): nieuwe mobiele elementen */
.mob-kop{ display:none; }
.mob-profiel{ display:none; }
.mob-avatar, .mob-hey, .mob-terug, .mob-navtitel{ display:none; }
.db-groet-mob{ display:none; }

@media (max-width:820px){

  /* ---- Header: schone glasbalk i.p.v. merk-pill ---- */
  .topbar{
    position:sticky; top:0; z-index:55;
    margin:0; width:auto; border-radius:0; border:none;
    display:flex; align-items:center; gap:12px;
    padding:calc(10px + env(safe-area-inset-top)) 18px 12px;
    background:color-mix(in srgb, var(--bg) 70%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
    box-shadow:none;
  }
  .app.is-scrolled .topbar{
    box-shadow:0 8px 22px -18px rgba(20,14,10,.5);
    border-bottom:1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  }
  /* glas-highlight van eerder niet nodig op een platte header */
  .topbar::before{ display:none; }

  /* Header (mobiel): paginatitel links, zoek + profiel rechts. Geen hamburger — navigatie zit in de tabbalk. */
  .hamburger{ display:none !important; }
  .mob-brand{ display:none !important; }
  .topbar .hallo{ display:none !important; }
  .topbar .avatar-stack{ display:none !important; }
  .topbar .zoek{ display:none !important; }
  .mob-kop{ display:none !important; }

  /* Dashboard-kop: avatar links, "Hey, naam." + groet, rechts +/zoek */
  .mob-avatar{ display:none; place-items:center; width:48px; height:48px; flex:none; padding:0; border:none; border-radius:50%; background:none; cursor:pointer; order:0; z-index:1; }
  .mob-avatar .avatar{ width:48px; height:48px; margin:0; }
  .mob-hey{ display:none; flex-direction:column; justify-content:center; line-height:1.18; order:1; flex:1; min-width:0; margin-left:2px; }
  .mob-hey-t{ font-size:19px; font-weight:500; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mob-hey-s{ font-size:14px; font-weight:500; color:var(--ink-3); }
  .tb-home .mob-avatar{ display:grid; }
  .tb-home .mob-hey{ display:flex; }

  /* Subpagina-kop: terug links, gecentreerde titel, rechts + */
  .mob-terug{ display:none; place-items:center; width:48px; height:48px; flex:none; border-radius:50%; order:0; z-index:1;
    border:1px solid color-mix(in srgb, var(--ink) 8%, transparent); background:color-mix(in srgb, var(--paneel) 78%, transparent);
    -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
    color:var(--ink); text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px -10px rgba(20,14,10,.5);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1); }
  .mob-terug:active{ transform:scale(.9); }
  .mob-navtitel{ display:none; position:absolute; left:0; right:0; text-align:center; padding:0 64px; z-index:0; pointer-events:none;
    font-size:17px; font-weight:500; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tb-sub .mob-terug{ display:grid; }
  .tb-sub .mob-navtitel{ display:block; }

  .topbar .rechts{ display:flex; align-items:center; gap:10px; margin-left:auto; order:2; position:relative; z-index:1; }
  .tb-sub .zoek-mobiel{ display:none !important; }
  .zoek-mobiel{
    display:grid !important; place-items:center; width:48px; height:48px; flex:none;
    border-radius:50%; border:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    background:color-mix(in srgb, var(--paneel) 78%, transparent);
    -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
    color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px -10px rgba(20,14,10,.5);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .2s;
  }
  .zoek-mobiel:active{ transform:scale(.9); background:var(--indigo-soft); }
  .mob-profiel{
    display:none !important; place-items:center; width:48px; height:48px; flex:none; padding:0; cursor:pointer;
    border:none; border-radius:50%; background:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px -10px rgba(0,0,0,.16);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1);
  }
  .mob-profiel:active{ transform:scale(.9); }
  .mob-profiel .avatar{ width:48px; height:48px; margin:0; }

  /* Paginatitel weer in de content (header toont nu icoon + hamburger) */
  .content{ padding-top:6px; }
  .db-groet-mob{ display:block; font-size:26px; font-weight:500; letter-spacing:-.02em; color:var(--ink); margin:2px 0 16px; }

  /* ---- 90/10 slide-over menu met iOS-parallax ---- */
  .sidebar{
    width:90% !important; max-width:none !important;
    border-radius:0 26px 26px 0;
  }
  /* App-laag schuift/verkleint subtiel weg naar rechts (10% blijft zichtbaar) */
  .main{ transition:transform .38s cubic-bezier(.32,.72,0,1), border-radius .38s, filter .38s; will-change:transform; }
  .app.menu-open .main{
    transform:scale(.94); border-radius:26px; overflow:hidden;
    filter:brightness(.96);
    transform-origin:right center;
  }
  /* Scrim dekt alles; rechter 10% toont de gedimde app */
  .app.menu-open .overlay,
  #overlay.show{ opacity:1; }
}

/* ---------------------------------------------------------------------
   Kostenverdeling (budget): 2 kolommen, stapelt op mobiel
   --------------------------------------------------------------------- */
.verdeel-vak{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
@media (max-width:820px){
  .verdeel-vak{ grid-template-columns:1fr; }
}

/* =====================================================================
   Uitlijning: deel-kaart (tijdlijn) + inspiratiebord lijstweergave
   Geldt op alle schermbreedtes (met mobiele verfijning).
   ===================================================================== */

/* --- Deel-kaart: knop netjes bovenaan uitlijnen --- */
.tl-deel{ align-items:flex-start; }

/* --- Knoppen op mobiel: 2 naast elkaar, samen volle breedte --- */
@media (max-width:820px){
  .modal-voet{ flex-direction:row; flex-wrap:nowrap; gap:10px; }
  .modal-voet .btn{ flex:1; width:auto; justify-content:center; }
  .tl-deel form,
  .tl-deel form .btn,
  .tl-deel-head form,
  .tl-deel-head form .btn{ width:auto; }
}

/* --- Inspiratie lijstweergave: niets over de foto, alles in het witte vak --- */
.pin-lijst-chip{ display:none; }
.pin-lijst-menu{ display:none; }

.pin-grid.lijst .pin-chip,
.pin-grid.lijst .pin-top,
.pin-grid.lijst .pin-hover,
.pin-grid.lijst .pin-mobiel{ display:none !important; }

.pin-grid.lijst .pin{ align-items:center; }
.pin-grid.lijst .pin-img{ align-self:stretch; }
.pin-grid.lijst .pin-img img{ height:100%; min-height:88px; }

.pin-grid.lijst .pin-meta{
  display:flex; align-items:center; gap:10px; padding:12px 14px; flex-wrap:wrap;
}
.pin-grid.lijst .pin-lijst-chip{
  display:inline-block; flex:none; background:var(--indigo-soft); color:var(--indigo-600);
  font-size:.7rem; font-weight:500; letter-spacing:.02em; padding:3px 10px; border-radius:999px;
}
.pin-grid.lijst .pin-titel{ flex:1 1 120px; min-width:0; white-space:normal; font-size:.95rem; }
.pin-grid.lijst .pin-prijs{ flex:none; }
.pin-grid.lijst .pin-lijst-menu{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--lijn);
  background:var(--paneel); color:var(--ink-2); cursor:pointer; margin-left:auto;
  transition:background .15s, color .15s;
}
.pin-grid.lijst .pin-lijst-menu:hover{ background:var(--bg); color:var(--ink); }

/* Compacter op smallere schermen */
@media (max-width:620px){
  .pin-grid.lijst .pin{ grid-template-columns:96px 1fr; }
  .pin-grid.lijst .pin-img img{ height:96px; }
  .pin-grid.lijst .pin-nolink{ height:96px; }
}

/* Tijdlijn — oogje: groen = zichtbaar in deellink, grijs = verborgen */
.tl-voet .oog{ color:var(--mint,#127a52); }
.tl-voet .oog.oog-uit{ color:var(--ink-3); }

/* =====================================================================
   Inspiratiebord — filter op wie de inspiratie toevoegde (2 personen)
   Pills met foto + voornaam + aantal, in dezelfde stijl als de chips.
   ===================================================================== */
.insp-filter{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 20px; }
.insp-filter-lbl{ font-size:.85rem; font-weight:500; color:var(--ink-3); letter-spacing:.01em; }
.insp-fp-rij{ display:flex; gap:9px; flex-wrap:wrap; }
.insp-fp{
  display:inline-flex; align-items:center; gap:9px; padding:4px 14px 4px 4px;
  border-radius:100px; background:var(--indigo-soft); border:1.5px solid var(--indigo);
  cursor:pointer; font:inherit; color:var(--ink);
  transition:background .16s, border-color .16s, filter .16s, opacity .16s, transform .1s;
}
.insp-fp .avatar{ width:30px; height:30px; margin:0; flex:none; }
.insp-fp-naam{ font-size:.86rem; font-weight:500; letter-spacing:-.01em; }
.insp-fp-n{ background:rgba(255,114,0,.16); color:var(--indigo-700); border-radius:100px; padding:1px 9px; font-size:.72rem; font-weight:500; }
.insp-fp:active{ transform:scale(.96); }
.insp-fp.uit{ background:var(--paneel); border-color:var(--lijn-2); color:var(--ink-3); }
.insp-fp.uit .avatar{ filter:grayscale(.5) brightness(.72); opacity:.85; }
.insp-fp.uit .insp-fp-n{ background:rgba(0,0,0,.06); color:var(--ink-3); }
.insp-reset{
  display:none; align-items:center; gap:6px; padding:7px 15px; border-radius:100px; cursor:pointer;
  background:none; border:1px dashed var(--lijn-2); color:var(--ink-3); font:inherit; font-weight:500; font-size:.82rem;
  transition:border-color .15s, color .15s;
}
.insp-reset.zichtbaar{ display:inline-flex; }
.insp-reset:hover{ border-color:var(--indigo); color:var(--indigo); }

/* =====================================================================
   Klussen & planning — weergave-toggle met tekst + planning-agenda
   ===================================================================== */
.weergave-toggle .wt-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 18px; border-radius:9px; font-weight:500; font-size:.9rem;
  color:var(--ink-3); text-decoration:none; transition:background .15s, color .15s;
}
.weergave-toggle .wt-btn.actief{ background:var(--indigo); color:#fff; }

.planning{ display:flex; flex-direction:column; gap:22px; }
.plan-kop{ font-size:1rem; font-weight:500; letter-spacing:-.01em; margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.plan-kop.plan-verlopen{ color:#c0392b; }
.plan-kop .telw{ background:var(--lijn); color:var(--ink-2); border-radius:100px; padding:1px 9px; font-size:.72rem; font-weight:500; }
.plan-rij{ display:flex; gap:14px; align-items:flex-start; background:var(--paneel); border:1px solid var(--lijn); border-radius:16px; padding:14px 16px; margin-bottom:8px; box-shadow:0 1px 2px rgba(20,14,10,.03); }
.plan-datum{ flex:none; width:60px; font-weight:500; color:var(--indigo); font-size:.9rem; padding-top:2px; text-transform:none; letter-spacing:normal; }
.plan-mid{ flex:1; min-width:0; }
.plan-titel{ font-weight:500; letter-spacing:-.01em; }

/* Klussen — voortgangsbalk */
.klus-voortgang{ max-width:520px; }
.klus-vg-kop{ display:flex; justify-content:space-between; font-size:.85rem; font-weight:500; color:var(--ink-2); margin-bottom:6px; }
.klus-vg-balk{ height:9px; border-radius:99px; background:var(--lijn); overflow:hidden; }
.klus-vg-balk i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--mint),#3fae83); transition:width .4s ease; }

/* Klussen — maandkalender */
.kal-kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; max-width:820px; }
.kal-kop b{ font-size:1.05rem; }
.kal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.kal-wd{ font-size:.72rem; font-weight:500; text-transform:none; letter-spacing:normal; color:var(--ink-3); text-align:center; padding:2px 0; }
.kal-dag{ background:var(--paneel); border:1px solid var(--lijn); border-radius:12px; min-height:96px; padding:6px; display:flex; flex-direction:column; gap:3px; }
.kal-dag.kal-leeg{ background:transparent; border:none; }
.kal-dag.kal-vandaag{ border-color:var(--indigo); box-shadow:inset 0 0 0 1px var(--indigo); }
.kal-nr{ font-size:.78rem; font-weight:500; color:var(--ink-3); }
.kal-klus{ display:flex; align-items:center; gap:5px; font-size:.72rem; font-weight:500; line-height:1.2; background:var(--indigo-soft); border-radius:7px; padding:3px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kal-klus span{ width:7px; height:7px; border-radius:50%; flex:none; }
.kal-klus.kal-klaar{ opacity:.5; text-decoration:line-through; }
@media (max-width:700px){ .kal-dag{ min-height:64px; } .kal-klus{ font-size:.62rem; padding:2px 4px; } }

/* Klussen — kolom ＋, projectkleuren, kleurkiezer */
.kolom-kop{ display:flex; align-items:center; gap:8px; }
.kolom-plus{ margin-left:auto; width:26px; height:26px; border:none; border-radius:8px; background:color-mix(in srgb,var(--ink) 6%,transparent); color:var(--ink-2); font-size:1rem; line-height:1; cursor:pointer; display:grid; place-items:center; }
.kolom-plus:hover{ background:var(--indigo-soft); color:var(--indigo); }
.chip-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:2px; }
.kleur-kies{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.kleur-optie{ cursor:pointer; }
.kleur-optie input{ position:absolute; opacity:0; width:0; height:0; }
.kleur-optie span{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(0,0,0,.06); transition:transform .1s, box-shadow .12s; }
.kleur-optie input:checked + span{ box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--ink); transform:scale(1.08); }
.kleur-geen{ background:var(--paneel); color:var(--ink-3); font-size:.8rem; }
.veld-check{ display:flex; align-items:flex-start; gap:8px; font-size:.86rem; color:var(--ink-2); font-weight:500; margin-top:2px; }
.veld-check input{ width:auto; margin-top:3px; flex:none; }

/* Klussen — meerdere personen toewijzen + over-budget markering */
.wie-kies{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.wie-optie{ cursor:pointer; }
.wie-optie input{ position:absolute; opacity:0; width:0; height:0; }
.wie-pil{ display:inline-flex; align-items:center; gap:8px; padding:4px 13px 4px 4px; border-radius:100px; border:1.5px solid var(--lijn-2); font-size:.85rem; font-weight:500; color:var(--ink-2); transition:border-color .15s, background .15s; }
.wie-pil .avatar{ width:28px; height:28px; margin:0; flex:none; }
.wie-optie input:checked ~ .wie-pil{ border-color:var(--indigo); background:var(--indigo-soft); color:var(--ink); }
.chip.over{ border-color:#e2a3a0; color:#c0392b; }
.chip.over.actief{ color:#fff; }

/* Budget — alleen-lezen regels die automatisch uit klussen komen */
tr.post-klus{ background:var(--indigo-soft); }
tr.post-klus td{ color:var(--ink-2); }
.via-klus{ display:inline-block; background:var(--indigo); color:#fff; font-size:.66rem; font-weight:500; letter-spacing:.02em; padding:1px 8px; border-radius:100px; vertical-align:middle; }
p .via-klus{ background:var(--indigo-soft); color:var(--indigo-700); }

/* Gedeelde ruimte-picker (keuzelijst + eigen ruimte) */
.ruimte-veld{ display:flex; flex-direction:column; gap:6px; }
.ruimte-veld .ruimte-picker{ font-size:.9rem; }

/* Polish: meta-iconen, lege-staat, viering */
.mi{ width:1em; height:1em; vertical-align:-0.15em; display:inline-block; }
.leeg-staat{ text-align:center; padding:44px 22px; }
.leeg-staat .leeg-ic{ width:46px; height:46px; color:var(--indigo); margin:0 auto 10px; display:block; }
.leeg-staat h3{ margin:0 0 4px; }
.leeg-acties{ display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.klus-vier{ background:linear-gradient(135deg,var(--indigo-soft),var(--mint-soft)); border:1px solid var(--mint-100); border-radius:16px; padding:14px 18px; margin-bottom:18px; font-size:.95rem; animation:vier-pop .5s ease; }
@keyframes vier-pop{ 0%{transform:scale(.96);opacity:0} 100%{transform:scale(1);opacity:1} }
.confetti{ position:fixed; top:-14px; width:9px; height:14px; border-radius:2px; z-index:9999; pointer-events:none; animation:confetti-val 3.2s linear forwards; }
@keyframes confetti-val{ to{ transform:translateY(106vh) rotate(560deg); opacity:.8; } }

/* ===== Dashboard / Overzicht ===== */
.db-kop{ margin-bottom:18px; }
.db-groet{ font-size:15px; color:var(--ink-2); font-weight:500; }
.db-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.db-hero{ grid-column:1/-1; position:relative; border-radius:22px; overflow:hidden; color:#fff; padding:20px 24px; min-height:200px; display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(130% 160% at 0% 0%,#ff9e4d,var(--indigo) 52%,var(--indigo-700)); box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 28px -18px rgba(0,0,0,.16); }
.db-hero-lbl{ font-size:12px; font-weight:500; letter-spacing:.02em; opacity:.95; text-shadow:0 1px 6px rgba(0,0,0,.25); }
.db-hero-body{ }
.db-hero-big{ display:flex; align-items:baseline; gap:11px; margin:0; text-shadow:0 2px 12px rgba(0,0,0,.32); } .db-hero-big b{ font-size:52px; font-weight:500; letter-spacing:-.03em; line-height:.9; }
.db-hero-big span{ font-size:16px; font-weight:500; margin-left:0; opacity:.96; }
.db-hero-sub{ font-size:15px; opacity:.9; line-height:1.45; }
.db-hero-adres{ display:block; margin-top:3px; font-size:14px; opacity:.82; }
.db-hero-r{ position:absolute; right:30px; top:26px; display:flex; gap:26px; text-align:right; }
.db-hero-r .k{ font-size:12px; opacity:.8; } .db-hero-r .v{ font-size:18px; font-weight:500; margin-top:2px; }
.db-hero-edit{ position:absolute; right:16px; top:16px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; text-decoration:none; transition:background .15s; }
.db-hero-edit:hover{ background:rgba(255,255,255,.34); }
.db-hero-edit svg{ width:15px; height:15px; }
.db-hero-cta{ display:inline-block; margin-top:14px; color:#fff; font-weight:500; font-size:13px; opacity:.92; text-decoration:none; }
.db-reis-cap{ font-size:12px; opacity:.92; font-weight:500; margin-top:9px; padding-right:0; text-shadow:0 1px 6px rgba(0,0,0,.3); }
.db-reis{ display:flex; gap:5px; margin-top:16px; max-width:none; }
.db-reis-stap{ flex:1; text-align:center; }
.db-reis-bol{ height:4px; border-radius:99px; background:rgba(255,255,255,.4); }
.db-reis-stap.done .db-reis-bol{ background:#fff; }
.db-reis-l{ font-size:11px; margin-top:6px; opacity:.9; font-weight:500; }
.db-stat{ display:block; background:#fff; border:none; border-radius:22px; padding:18px; text-decoration:none; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 28px -18px rgba(0,0,0,.16); transition:transform .12s, box-shadow .12s; }
.db-stat:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -14px rgba(20,14,10,.25); }
.db-ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:11px; }
.db-ico svg{ width:22px; height:22px; }
.db-ico.o{ background:var(--indigo-soft); color:var(--indigo-700); } .db-ico.g{ background:var(--mint-soft); color:var(--mint); }
.db-ico.b{ background:#e8eefb; color:#3a63b8; } .db-ico.y{ background:var(--geel-soft); color:var(--geel); }
.db-stat .k{ font-size:13px; color:var(--ink-3); font-weight:500; }
.db-stat .n{ font-size:24px; font-weight:500; letter-spacing:-.02em; margin-top:2px; }
.db-stat .n small{ font-size:13px; color:var(--ink-3); font-weight:500; }
.db-bar{ height:8px; border-radius:99px; background:var(--lijn); margin-top:12px; overflow:hidden; }
.db-bar i{ display:block; height:100%; border-radius:99px; }
/* --- Dashboard-tegels: ring + icoon-getal, horizontale rij --- */
.db-tile{ display:flex; align-items:center; gap:14px; padding:15px 16px; }
.db-ring{ position:relative; width:56px; height:56px; flex:none; }
.db-ring-svg{ width:56px; height:56px; display:block; transform:rotate(-90deg); }
.db-ring-svg .track{ fill:none; stroke:var(--lijn); stroke-width:6; }
.db-ring-svg .val{ fill:none; stroke:var(--indigo); stroke-width:6; stroke-linecap:round; stroke-dasharray:157.08; transition:stroke-dashoffset .7s cubic-bezier(.22,1,.36,1); }
.db-ring-num{ position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.db-tile-ico{ width:52px; height:52px; border-radius:15px; background:var(--indigo-soft); color:var(--indigo-700); display:grid; place-items:center; flex:none; }
.db-tile-ico svg{ width:22px; height:22px; }
.db-tile-txt{ min-width:0; }
.db-tile-lbl{ font-size:15px; font-weight:500; color:var(--ink); margin-bottom:2px; }
.db-tile-sub{ font-size:14px; font-weight:400; color:var(--ink-2); }
.db-tile-n{ font-size:14px; font-weight:400; color:var(--ink-2); line-height:1; }
.db-tile-n b{ font-size:20px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.db-card{ background:#fff; border:none; border-radius:22px; padding:20px; box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 28px -18px rgba(0,0,0,.16); }
.db-col2{ grid-column:span 2; }
.db-sectie{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.db-sectie h3{ font-size:16px; font-weight:500; letter-spacing:-.01em; margin:0; color:var(--ink); }
.db-link{ color:var(--indigo-700); font-weight:500; font-size:13px; text-decoration:none; display:inline-flex; align-items:center; gap:3px; transition:color .15s; }
.db-link:hover{ color:var(--indigo); }
.db-rij{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--lijn); }
.db-rij:first-of-type{ border-top:none; }
.db-dot{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--indigo-soft); color:var(--indigo-700); font-weight:500; font-size:13px; }
.db-dot svg{ width:18px; height:18px; } .db-dot.rood{ background:var(--rood-soft); color:var(--rood); }
.db-rij-thumb{ width:34px; height:34px; border-radius:10px; object-fit:cover; flex:none; }
.db-rij-mid{ min-width:0; } .db-rij-mid .t{ font-weight:500; font-size:14px; color:var(--ink); } .db-rij-mid .m{ font-size:13px; font-weight:500; color:var(--ink-3); }
.db-rij-r{ margin-left:auto; font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap; }
.db-pill{ margin-left:auto; background:var(--indigo-soft); color:var(--indigo-700); font-size:11px; font-weight:500; padding:2px 9px; border-radius:99px; }
.db-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.db-th{ aspect-ratio:1; border-radius:12px; overflow:hidden; display:block; }
.db-th img{ width:100%; height:100%; object-fit:cover; }
.db-acties{ display:flex; gap:10px; margin-top:14px; }
.db-actie{ flex:1; border:1px solid var(--lijn-2); border-radius:13px; padding:13px 4px; text-align:center; font-weight:500; font-size:13px; color:var(--ink-2); text-decoration:none; background:var(--paneel); }
.db-actie:hover{ border-color:var(--indigo); color:var(--indigo-700); }
.db-actie .ai{ display:block; width:24px; height:24px; margin:0 auto 5px; color:var(--indigo); } .db-actie .ai svg{ width:24px; height:24px; }
@media (max-width:900px){ .db-grid{ grid-template-columns:1fr 1fr; } .db-col2{ grid-column:1/-1; } .db-hero-r{ position:static; margin-top:14px; justify-content:flex-start; } }
@media (max-width:560px){ .db-hero{ padding:18px 20px; min-height:190px; } .db-hero-big b{ font-size:46px; } .db-reis-l{ display:none; } .db-grid{ grid-template-columns:1fr; } .db-col2{ grid-column:auto; } }

/* ===== Upgrade / prijzen ===== */
.prijs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.prijs-kaart{ background:var(--paneel); border:1px solid var(--lijn); border-radius:18px; padding:24px 22px; display:flex; flex-direction:column; text-align:center; position:relative; }
.prijs-kaart.aanbevolen{ border:2px solid var(--indigo); box-shadow:var(--schaduw); }
.prijs-badge{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--indigo); color:#fff; font-size:11px; font-weight:500; padding:3px 12px; border-radius:99px; white-space:nowrap; }
.prijs-naam{ font-weight:500; color:var(--ink-2); }
.prijs-bedrag{ font-size:34px; font-weight:500; letter-spacing:-.03em; margin:6px 0 14px; }
.prijs-bedrag span{ font-size:14px; font-weight:500; color:var(--ink-3); }
.prijs-punten{ list-style:none; padding:0; margin:0 0 18px; text-align:left; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--ink-2); }
.prijs-punten li{ display:flex; gap:8px; align-items:flex-start; }
.prijs-punten li::before{ content:"\2713"; color:var(--mint); font-weight:500; }
.prijs-kaart .btn{ margin-top:auto; }
@media (max-width:760px){ .prijs-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Microdetails — zachte overgangen, feedback & skeletons
   ============================================================ */

/* Klikbare elementen 'drukken' kort in bij een tik */
.btn, .chip, .db-stat, .db-actie, .wt-btn, .kolom-plus, .insp-fp,
.mob-profiel, .zoek-mobiel, .hamburger, .prijs-kaart, .nav a, .tabbar-item, .ico-btn {
    transition: transform .13s cubic-bezier(.34,1.56,.64,1), background-color .18s ease,
                border-color .18s ease, box-shadow .2s ease, color .18s ease, opacity .18s ease;
}
.btn:active, .chip:active, .db-actie:active, .wt-btn:active, .kolom-plus:active,
.insp-fp:active, .ico-btn:active, .tabbar-item:active { transform: scale(.95); }
.db-stat:active, .prijs-kaart:active { transform: scale(.985); }

/* Kaarten lichten subtiel op bij hover (alleen met echte muis) */
@media (hover:hover) and (pointer:fine){
    .card{ transition: box-shadow .22s ease, transform .22s ease; }
    .card:hover{ box-shadow: 0 14px 34px -22px rgba(20,14,10,.28); }
}

/* Nette, merk-gekleurde focusrand voor toetsenbord/toegankelijkheid */
:focus-visible{ outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 5px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible){ outline: none; }

/* Vensters openen zacht + backdrop faden */
dialog.modal[open]{ animation: modal-in .24s cubic-bezier(.2,.8,.25,1); }
dialog.modal::backdrop{
    background: rgba(20,14,10,.34);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: fade-in .24s ease;
}
@keyframes modal-in{ from{ opacity:0; transform: translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* Pagina-inhoud verschijnt zacht bij laden */
.content{ animation: page-in .18s ease both; }
@keyframes page-in{ from{ opacity:0 } to{ opacity:1 } }

/* Skeleton-shimmer (herbruikbaar + voor afbeeldingen die nog laden) */
@keyframes shimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }
.skel{
    display:block; border-radius: 10px;
    background: linear-gradient(90deg, var(--lijn) 25%, var(--lijn-2) 37%, var(--lijn) 63%);
    background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.skel-tekst{ height:.8em; margin:.35em 0; border-radius:6px; }
.skel-tekst.kort{ width:55%; }
img.laadt{
    background: linear-gradient(90deg, var(--lijn) 25%, var(--lijn-2) 37%, var(--lijn) 63%);
    background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
    color: transparent;
}

/* Dunne laadbalk bovenaan tijdens navigeren */
#nav-progress{
    position: fixed; top:0; left:0; height:3px; width:0; z-index: 10000;
    background: var(--indigo);
    box-shadow: 0 0 8px rgba(255,114,0,.55); border-radius: 0 3px 3px 0;
    opacity:0; pointer-events:none; transition: width .25s ease, opacity .25s ease;
}
#nav-progress.aan{ opacity:1; }

/* Respecteer 'verminder beweging' */
@media (prefers-reduced-motion: reduce){
    .content, dialog.modal[open], dialog.modal::backdrop, .skel, img.laadt, #nav-progress{ animation: none !important; }
    .btn, .chip, .db-stat, .db-actie, .wt-btn, .kolom-plus, .prijs-kaart, .card{ transition: none !important; transform: none !important; }
}


/* ===== Meer-menu (bottom sheet, mobiel) ===== */
dialog.meer-sheet{
  position:fixed; left:0; right:0; bottom:0; top:auto; margin:0; width:100%; max-width:100%; max-height:86vh;
  border:none; border-radius:24px 24px 0 0; color:var(--ink); background:var(--bg);
  padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -22px 55px -22px rgba(20,14,10,.45); overflow-y:auto;
  animation:sheet-up .28s cubic-bezier(.2,.8,.25,1);
}
dialog.meer-sheet::backdrop{ background:rgba(20,14,10,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fade-in .28s ease; }
@keyframes sheet-up{ from{ transform:translateY(100%); } to{ transform:none; } }
.sheet-greep{ width:40px; height:5px; border-radius:99px; background:var(--lijn-2); margin:2px auto 14px; cursor:pointer; }
.sheet-prof{ display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:20px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 22px -16px rgba(0,0,0,.16); margin-bottom:4px; text-decoration:none; color:var(--ink); }
.sheet-prof .avatar{ width:50px; height:50px; margin:0; flex:none; }
.sheet-prof .sp-tekst{ display:flex; flex-direction:column; min-width:0; }
.sheet-prof .sp-naam{ font-weight:500; font-size:17px; color:var(--ink); }
.sheet-prof .sp-sub{ font-size:14px; color:var(--ink-3); }
.sheet-prof .sp-chev{ margin-left:auto; color:var(--ink-3); }
.sheet-prof:focus, .sheet-prof:focus-visible{ outline:none; box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 22px -16px rgba(0,0,0,.16); }
.sheet-sectie{ font-size:12px; font-weight:500; color:var(--ink-3); text-transform:none; letter-spacing:normal; margin:24px 4px 12px; }
.sheet-raster{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-bottom:4px; }
.sheet-tegel{ background:#fff; border:none; border-radius:20px; padding:16px 8px 14px; display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 22px -16px rgba(0,0,0,.16); transition:transform .12s cubic-bezier(.34,1.56,.64,1); }
.sheet-tegel:active{ transform:scale(.96); }
.sheet-tegel .st-ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:#fff2e8; color:var(--indigo); }
.sheet-tegel .st-ic svg{ width:21px; height:21px; }
.sheet-tegel .st-lb{ font-size:12.5px; font-weight:500; color:var(--ink); text-align:center; line-height:1.2; }
/* alle voormalige kleurklassen -> één zacht-oranje */
.st-ic.o, .st-ic.g, .st-ic.b, .st-ic.y, .st-ic.p{ background:#fff2e8; color:var(--indigo); }
.sheet-tegel.plus{ background:#fff; border:none; }
.sheet-tegel.plus .st-ic{ background:#fff2e8; color:var(--indigo); }
.sheet-tegel.plus .st-lb{ color:var(--ink); font-weight:500; }
.sheet-lijst{ background:#fff; border:none; border-radius:20px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 22px -16px rgba(0,0,0,.16); }
.sheet-li{ display:flex; align-items:center; gap:13px; padding:15px 16px; border-top:1px solid var(--lijn); text-decoration:none; color:var(--ink); font-weight:500; font-size:16px; }
.sheet-li:first-child{ border-top:none; }
.sheet-li .sl-ic{ width:26px; height:26px; border-radius:0; display:grid; place-items:center; background:none; border:none; color:var(--ink-2); flex:none; }
.sheet-li.rood{ color:var(--rood); }
.sheet-li.rood .sl-ic{ background:none; border:none; color:var(--rood); }
@media (prefers-reduced-motion: reduce){ dialog.meer-sheet, dialog.meer-sheet::backdrop{ animation:none !important; } }

/* ============================================================
   Mobiele consistentie — één native stijl over alle pagina's
   ============================================================ */
@media (max-width:820px){
  /* De paginatitel staat al in de header → dubbele titel in de content weg (knoppen + subtitel blijven) */
  .content > h1,
  .content .paginakop h1{ display:none; }
  .content .paginakop{ margin-bottom:14px; }

  /* Native, comfortabele formuliervelden. 16px voorkomt automatisch inzoomen op iOS. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select, textarea{ font-size:16px; border-radius:13px; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]),
  select{ min-height:46px; }
  textarea{ min-height:96px; }

  /* Eén consistente, zacht zwevende kaartstijl (zoals het dashboard) */
  .card{ box-shadow:0 1px 3px rgba(20,14,10,.05); }

  /* Iets ruimere tikruimte voor filter-chips */
  .chip{ min-height:38px; }
}

/* De statusbalk in de PWA volgt de body-achtergrond → op mobiel puur crème
   (op desktop blijft de iets diepere canvas achter de zwevende panelen). */
@media (max-width:820px){
  html, body{ background:var(--bg); }
}

/* Desktop-decoraties die op mobiel doorlekken uitzetten:
   - .main::before = sier-gloed (verloop) bovenaan
   - de zijbalk staat links buiten beeld maar wierp nog een schaduw op het scherm */
@media (max-width:820px){
  .main::before{ display:none !important; }
  .sidebar:not(.open){ box-shadow:none !important; }
}

/* ===== Proefperiode ===== */
.proef-balk{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 16px; padding:11px 15px; border-radius:14px; text-decoration:none;
  background:linear-gradient(135deg, var(--indigo-soft), #ffe6cf);
  border:1px solid #f3d3b0; color:var(--indigo-700);
  font-size:13.5px; font-weight:500; transition:transform .12s ease;
}
.proef-balk .pb-info{ display:flex; align-items:center; gap:9px; min-width:0; }
.proef-balk .pb-punt{ width:8px; height:8px; border-radius:50%; background:var(--indigo); flex:none; box-shadow:0 0 0 3px rgba(255,114,0,.18); }
.proef-balk b{ font-weight:500; }
.proef-balk .pb-cta{ font-weight:500; white-space:nowrap; }
.proef-balk:active{ transform:scale(.99); }
.proef-melding{ background:var(--indigo-soft); border-color:#f3d3b0; color:var(--ink); }
.proef-melding.verlopen{ background:var(--rood-soft); border-color:#f3c9c6; }

/* ===== Abonnement/account-kaart (upgrade-pagina) ===== */
.ab-kaart{ background:var(--paneel); border:1px solid var(--lijn); border-radius:20px; padding:22px 24px; margin-bottom:22px; box-shadow:0 1px 3px rgba(20,14,10,.05); }
.ab-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.ab-badge{ display:inline-block; font-size:11px; font-weight:500; letter-spacing:normal; text-transform:none; padding:4px 11px; border-radius:99px; }
.ab-badge.proef{ background:var(--indigo-soft); color:var(--indigo-700); }
.ab-badge.actief{ background:var(--mint-soft); color:var(--mint); }
.ab-badge.verlopen{ background:var(--rood-soft); color:var(--rood); }
.ab-plan{ font-size:26px; font-weight:500; letter-spacing:-.02em; margin-top:8px; }
.ab-big{ text-align:right; line-height:1; flex:none; }
.ab-big b{ font-size:40px; font-weight:500; letter-spacing:-.03em; }
.ab-big span{ display:block; font-size:12px; font-weight:500; color:var(--ink-3); margin-top:3px; }
.ab-rijen{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
.ab-rij{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--lijn); }
.ab-rij span{ color:var(--ink-3); font-size:13.5px; }
.ab-rij b{ font-weight:500; font-size:13.5px; text-align:right; }
.ab-note{ margin-top:16px; padding:12px 15px; border-radius:13px; background:var(--indigo-soft); border:1px solid #f3d3b0; color:var(--ink-2); font-size:13.5px; }
.ab-note.verlopen{ background:var(--rood-soft); border-color:#f3c9c6; }
.ab-kop2{ font-size:18px; font-weight:500; letter-spacing:-.01em; margin:4px 0 14px; }
@media (max-width:640px){
  .ab-rijen{ grid-template-columns:1fr; gap:0; }
  .ab-plan{ font-size:22px; }
  .ab-big b{ font-size:34px; }
  .ab-head{ align-items:center; }
}

/* =====================================================================
   Vloeiendere navigatie in de app (crème canvas + fade-in + laadbalk)
   ===================================================================== */
@media (max-width:820px){
  html, body{ background-color:var(--bg); }
  .content{ animation:stkPaginaIn .18s ease; }
}
@keyframes stkPaginaIn{ from{ opacity:0 } to{ opacity:1 } }
#stk-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:99999; pointer-events:none;
  background:var(--indigo); box-shadow:0 0 8px rgba(255,114,0,.5);
  opacity:0; transition:width .25s ease, opacity .3s ease;
}
#stk-progress.aan{ opacity:1; }

/* ==========================================================================
   iPad / tablet: respecteer de systeem-statusbalk (safe area) in de
   desktop-layout (sidebar + topbar). Op een echt bureaublad is de inset 0,
   dus dit verandert daar niets.
   ========================================================================== */
@media (min-width:821px){
  .sidebar{ padding-top: calc(22px + env(safe-area-inset-top)); }
  .topbar{ padding-top: calc(18px + env(safe-area-inset-top)); }
}
/* Touch-tablets (iPad) geven env() vaak als 0 terug terwijl de statusbalk er
   wel is; reserveer daar een vaste minimumruimte. Muis-desktops (pointer:fine)
   worden niet geraakt. */
@media (min-width:821px) and (pointer: coarse){
  .sidebar{ padding-top: max(calc(22px + env(safe-area-inset-top)), 46px); }
  .topbar{ padding-top: max(calc(18px + env(safe-area-inset-top)), 42px); }
}

/* ==========================================================================
   Collapsing header (desktop/tablet): de begroeting verdwijnt bij het
   scrollen; alleen de zoekbalk + avatars blijven in een liquid-glass balk.
   ========================================================================== */
@media (min-width:821px){
  .topbar{ transition: padding .28s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .topbar .hallo{ transition: max-height .3s ease, opacity .22s ease, margin .3s ease, transform .3s ease; max-height:74px; overflow:hidden; }
  /* compacte staat: topbar zelf doorzichtig (geen brede balk) */
  .topbar.tb-compact{
    padding-top:10px; padding-bottom:10px;
    background: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
  }
  .topbar.tb-compact .hallo{ max-height:0; opacity:0; margin:0; transform:translateY(-6px); pointer-events:none; }
  /* De profielfoto links van de groet klapt mee weg bij het scrollen */
  .topbar .hallo-avatar{ transition: opacity .22s ease, width .3s ease, margin .3s ease; overflow:hidden; }
  .topbar.tb-compact .hallo-avatar{ opacity:0; width:0; margin:0; pointer-events:none; }
  .topbar .topbar-groet{ transition: gap .3s ease; }
  .topbar.tb-compact .topbar-groet{ gap:0; }
  /* alleen zoek + avatars in een liquid-glass pill met radius */
  .topbar .rechts{ transition: background .3s ease, box-shadow .3s ease, padding .3s ease, border-color .3s ease; }
  .topbar.tb-compact .rechts{
    background: rgba(250,248,244,.6);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    padding: 5px 8px 5px 16px;
    box-shadow: 0 12px 30px -16px rgba(20,14,10,.45);
  }
  /* zoekveld laten opgaan in de glazen pill (geen dubbele rand) */
  .topbar.tb-compact .zoek{ background: transparent; border-color: transparent; padding-top: 6px; padding-bottom: 6px; }
}
/* op touch-tablets de statusbalk-ruimte behouden, ook in compacte staat */
@media (min-width:821px) and (pointer:coarse){
  .topbar.tb-compact{ padding-top: max(calc(10px + env(safe-area-inset-top)), 42px); }
}

/* Warme achtergrond op <html> voorkomt een zwarte flits tussen paginawissels in de app (WKWebview). */
html { background: var(--bg, #F6F6F6); }
html, body { background-color: var(--bg, #F6F6F6); }

/* iOS-datumveld gelijktrekken met de andere velden: waarde links, geen afwijkende native rand. */
input[type=date]{ -webkit-appearance:none; appearance:none; text-align:left; }
input[type=date]::-webkit-date-and-time-value{ text-align:left; margin:0; }
input[type=date]::-webkit-calendar-picker-indicator{ opacity:.45; }

/* Datumveld in de moment-modals identiek aan de tekstvelden (native iOS-styling overschrijven). */
.modal .veld input[type=date]{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; box-sizing:border-box; height:auto; min-height:0;
  background:#fff;
  border:1px solid var(--lijn-2,#e2d9cc);
  border-radius:13px;
  padding:13px 14px;
  font-family:inherit; font-size:1rem; line-height:1.25;
  color:var(--ink,#231b13);
  text-align:left;
}
.modal .veld input[type=date]::-webkit-date-and-time-value{ text-align:left; margin:0; }
.modal .veld input[type=date]::-webkit-calendar-picker-indicator{ opacity:.5; margin-left:auto; }

/* Laadbalkjes uitgezet (client-side navigatie is direct genoeg). */
#nav-progress, #stk-progress{ display:none !important; }