/* ============================================================
   Mobiele app-schil + UX-verfijning (laadt als allerlaatste)
   ============================================================ */
.mb-ico { width: 22px; height: 22px; flex: 0 0 auto; display: block; }

/* ---------- Snelle acties op het overzicht ---------- */
.ov-snel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ov-snel a, .ov-snel button { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); color: var(--ink); font: 600 14.5px var(--sans); text-decoration: none; cursor: pointer; text-align: left; transition: transform .15s, box-shadow .15s; }
.ov-snel a:hover, .ov-snel button:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.ov-snel span { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: #fff1e2; color: var(--accent-dark); }
.ov-snel > :first-child span { background: var(--accent); color: #fff; }

@media (max-width: 760px) {
  /* ---------- Kopbalk ---------- */
  .sidebar { height: 60px; padding: 0 14px; gap: 8px; }
  .brand-logo { max-width: 138px; }
  .wk-bel-m { width: 44px; height: 44px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--shadow-btn); color: var(--ink); margin-right: 4px; }
  .wk-bel-m .mb-ico { width: 20px; height: 20px; }
  .user-avatar { width: 40px; height: 40px; }

  /* ---------- Tabbalk ---------- */
  .bottom-nav { display: grid !important; grid-template-columns: 1fr 1fr 72px 1fr 1fr; align-items: end; height: calc(70px + env(safe-area-inset-bottom)); padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); }
  .bn-item { gap: 3px; min-height: 52px; justify-content: center; padding: 4px 0; border-radius: 14px; color: var(--ink-faint); font-size: 11px; }
  .bn-item .mb-ico { width: 24px; height: 24px; }
  .bn-item.active { color: var(--ink); background: transparent; }
  .bn-item.active .mb-ico { color: var(--accent); }
  .bn-item.active .bn-label { font-weight: 700; }
  .bn-plus { justify-self: center; align-self: center; width: 58px; height: 58px; margin-top: -26px; border: 4px solid var(--paper); border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -8px rgba(255, 119, 0, 0.9); cursor: pointer; transition: transform .12s; }
  .bn-plus:active { transform: scale(0.94); }
  .bn-plus .mb-ico { width: 26px; height: 26px; stroke-width: 2.4; }
  .fab { display: none !important; }

  /* ---------- Meer: blad van onder ---------- */
  .mb-backdrop { position: fixed; inset: 0; z-index: 46; background: rgba(24, 30, 36, 0.38); backdrop-filter: blur(2px); animation: mbFade .2s ease; }
  .mb-backdrop[hidden] { display: none; }
  .meer-menu { left: 0; right: 0; bottom: 0; top: auto; z-index: 47; padding: 10px 16px calc(96px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--paper); box-shadow: 0 -20px 50px -20px rgba(24, 54, 74, 0.5); gap: 14px; animation: mbOmhoog .28s cubic-bezier(.2, .9, .3, 1.1); }
  .mb-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(24, 54, 74, 0.2); }
  .mb-gebruiker { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-btn); }
  .mb-gebruiker div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .mb-gebruiker span:not(.mp-avatar) { font-size: 13px; color: var(--ink-soft); }
  .mb-gebruiker .btn { gap: 6px; }
  .mb-gebruiker .btn .mb-ico { width: 16px; height: 16px; }
  .mb-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .meer-menu .meer-item { flex-direction: column; justify-content: center; gap: 8px; min-height: 92px; padding: 12px 6px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-btn); font-size: 13px; font-weight: 600; text-align: center; color: var(--ink); }
  .meer-menu .meer-item .mb-ico { width: 26px; height: 26px; color: var(--accent-dark); }
  .meer-menu .meer-item.active { background: var(--ink); color: #fff; }
  .meer-menu .meer-item.active .mb-ico { color: #ffb36b; }
  .meer-menu .meer-item[hidden] { display: none; }
  .mb-meldingen { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow-btn); font: 600 15px var(--sans); color: var(--ink); cursor: pointer; }
  .mb-meldingen .wk-teller { margin-left: auto; }
  @keyframes mbOmhoog { from { transform: translateY(100%); } }
  @keyframes mbFade { from { opacity: 0; } }

  /* ---------- Paginakop compacter, actie volle breedte ---------- */
  .page-head { gap: 14px; }
  .page-head > .btn, .page-head > div + .btn { width: 100%; }
  .page-title { font-size: 30px; }

  /* ---------- Tabellen als kaarten ---------- */
  .tbl tbody tr { position: relative; padding: 14px 16px; margin-bottom: 12px; cursor: pointer; }
  .tbl td { padding: 5px 0; font-size: 14px; }
  .tbl td::before { font-size: 11px; letter-spacing: 0.05em; font-weight: 600; }
  .tbl td:first-child { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
  .tbl td:first-child::before { display: none; }
  .tbl tbody tr:active { transform: scale(0.99); }

  /* ---------- Overzicht op telefoon ---------- */
  .ov { gap: 18px; }
  .ov-snel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ov-snel a, .ov-snel button { min-height: 60px; padding: 10px 12px; font-size: 13.5px; }
  .ov-snel span { width: 36px; height: 36px; flex-basis: 36px; }
  .ov-acties { display: none; }
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---------- Rapport bewerken: horizontaal scrollende secties ---------- */
  .section-nav { margin-left: -16px; margin-right: -16px; border-radius: 0; padding: 8px 12px; scrollbar-width: none; }
  .section-nav::-webkit-scrollbar { display: none; }
  .wd-balk { left: 12px; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); border-radius: 18px; }

  /* ---------- Modals als blad van onder ---------- */
  .modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .modal { max-width: none !important; width: 100%; margin: 0 !important; max-height: 92vh; border-radius: 26px 26px 0 0; animation: mbOmhoog .28s cubic-bezier(.2, .9, .3, 1.1); padding-bottom: env(safe-area-inset-bottom); }
  .modal::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: rgba(24, 54, 74, 0.2); margin: 10px auto 0; }
  .modal-foot { position: sticky; bottom: 0; z-index: 2; background: #fff; margin: 4px -16px -16px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 20px -14px rgba(24, 54, 74, 0.4); }
  .modal-foot .btn { flex: 1; }
  .modal-lightbox { height: 92vh; }

  .melding-stack { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .ov-snel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print { .ov-snel, .mb-backdrop { display: none !important; } }