/* Beauty Specialist: de app-laag voor iPhone en touch (PRD-Z, Seyed 2861, 2 okt 2026).
 *
 * Geladen door klantenportaal.html en beheer.html NA de eigen stijl en thema.css, zodat deze regels winnen.
 * Alleen tokens uit thema.css, geen losse kleuren. Drie lagen:
 *  1. touch: geen grijze tikflits, geen dubbeltik-zoom, zichtbare ingedrukte staat, doelen van 44 px;
 *  2. app-stand (op het beginscherm gezet): veilige zones rond notch en thuisbalk, geen rubberband op de schil;
 *  3. eigen onderdelen: iOS-achtige onderbalk, installatieblad, trek-om-te-verversen, offline-balk, update-melding.
 */

/* ── 1. Touch ─────────────────────────────────────────────────────────────── */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, [role="button"], a, label, input, select, textarea, summary, .rij, .chip, .nav-item, .mn-item, .conv, .kpi, .card.klik { touch-action: manipulation; }
img, svg, .avatar, .mn-item, .nav-item, .icon-btn { -webkit-touch-callout: none; }
.mobile-nav, .sidebar, .sidebar-drawer .panel, .drawer .panel, .topbar { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

/* Op een aanraakscherm bestaat hover niet; de ingedrukte staat moet het doen. */
@media (hover: none) and (pointer: coarse) {
  .btn:active, .login-btn:active, .btn-gold:active, .btn-primair:active, .chip:active, .icon-btn:active { transform: scale(0.97); opacity: .9; transition: transform var(--dur-fast), opacity var(--dur-fast); }
  .rij:active, .nav-item:active, .conv:active, .kpi.kpi-klik:active { background: var(--row-hover); }
  .mn-item:active { transform: scale(0.94); transition: transform var(--dur-fast); }
  .nav-item:hover, .rij:hover, .icon-btn:hover { background: inherit; }
  .nav-item.active:hover { background: var(--chip-bg); }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .chip { min-height: 40px; padding-top: 0; padding-bottom: 0; }
  .nav-item { min-height: 48px; }
  .rij { min-height: 60px; }
  .forgot-btn, .back-btn, .tbl td a { min-height: 44px; display: inline-flex; align-items: center; }
  .tbl td a { padding: 6px 0; }
  .btn-sm { min-height: 40px; }
  select, input:not([type="checkbox"]):not([type="radio"]), textarea { font-size: 16px; }
}

/* ── 2. App-stand ─────────────────────────────────────────────────────────── */
html.standalone body { overscroll-behavior-y: none; }
html.standalone .content, html.standalone .chat-body, html.standalone .thread, html.standalone .lijst, html.standalone .chat-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
html.standalone .topbar { padding-top: calc(12px + env(safe-area-inset-top)); height: auto; min-height: calc(56px + env(safe-area-inset-top)); }
html.standalone .sidebar-drawer .panel, html.standalone .drawer .panel { padding-top: calc(10px + env(safe-area-inset-top)); }
html.standalone .login-wrap { padding-top: calc(24px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
html.standalone .toast-houder { bottom: calc(16px + env(safe-area-inset-bottom)); }
#toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { #toast { bottom: 24px; } }
/* Links en rechts (liggend, met notch) */
.topbar, .content { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 900px) { .topbar { padding-left: 20px; padding-right: 20px; } .content { padding-left: 24px; padding-right: 24px; } }

/* ── 3a. Onderbalk zoals een iOS-tabbalk ──────────────────────────────────── */
.mobile-nav[hidden] { display: none; }
.mobile-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--card); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 0.5px solid var(--border-strong); padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .mobile-nav { background: color-mix(in srgb, var(--card) 82%, transparent); } }
.mobile-nav .mn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-height: 49px; padding: 4px 2px 0; background: none; border: none; color: var(--muted); font: 500 10px/1.2 var(--font); letter-spacing: 0; cursor: pointer; border-radius: 10px; transition: color var(--dur-fast); }
.mobile-nav .mn-item i, .mobile-nav .mn-item svg { width: 24px; height: 24px; stroke-width: 1.9; }
.mobile-nav .mn-item.active { color: var(--brand); font-weight: 600; }
.mobile-nav .mn-item .mn-badge { position: absolute; top: 2px; right: calc(50% - 20px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--red); color: var(--card); font: 700 10px/16px var(--font); padding: 0 4px; }
.mobile-nav .mn-item { position: relative; }
@media (min-width: 900px) { .mobile-nav { display: none; } }

/* ── 3b. Installatieblad (iPhone: Deel-knop, Zet op beginscherm; Android: knop) ── */
.pwa-blad[hidden] { display: none; }
.pwa-blad { position: fixed; inset: 0; z-index: 95; background: var(--overlay); display: flex; align-items: flex-end; justify-content: center; animation: pwa-fade var(--dur-panel) ease-out; }
.pwa-blad .vel { width: 100%; max-width: 520px; background: var(--card); border-radius: var(--radius-hero) var(--radius-hero) 0 0; box-shadow: var(--shadow-pop); padding: 10px 22px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; animation: pwa-omhoog var(--dur-panel) ease-out; font-family: var(--font); color: var(--text); }
.pwa-blad .greep { width: 36px; height: 5px; border-radius: 3px; background: var(--skeleton); margin: 0 auto 6px; }
.pwa-blad .kop { display: flex; align-items: center; gap: 14px; }
.pwa-blad .kop img { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; }
.pwa-blad h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.pwa-blad p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.pwa-blad ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pwa-blad li { display: flex; align-items: center; gap: 12px; font-size: 15px; min-height: 44px; }
.pwa-blad li .nr { width: 28px; height: 28px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-text); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pwa-blad li svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); }
.pwa-blad .acties { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pwa-blad .knop { min-height: 50px; border: none; border-radius: var(--radius-field); background: var(--cta); color: var(--card); font: 600 16px var(--font); cursor: pointer; }
.pwa-blad .knop:active { background: var(--cta-hover); }
.pwa-blad .later { min-height: 44px; border: none; background: none; color: var(--muted); font: 500 15px var(--font); cursor: pointer; }
.pwa-blad .pijl { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(6px + env(safe-area-inset-bottom)); color: var(--brand); animation: pwa-wip 1.2s ease-in-out infinite; }
.pwa-blad .pijl svg { width: 28px; height: 28px; }
@media (min-width: 600px) { .pwa-blad { align-items: center; padding: 20px; } .pwa-blad .vel { border-radius: var(--radius-hero); padding-bottom: 24px; } .pwa-blad .pijl { display: none; } }
@keyframes pwa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pwa-omhoog { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pwa-wip { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ── 3c. Trek om te verversen (alleen in de app-stand; Safari heeft het zelf) ── */
.ptr { position: fixed; top: calc(56px + env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -60px); width: 36px; height: 36px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-pop); display: flex; align-items: center; justify-content: center; z-index: 55; pointer-events: none; transition: transform var(--dur-fast); opacity: 0; }
.ptr.zichtbaar { opacity: 1; }
.ptr svg { width: 18px; height: 18px; color: var(--brand); transition: transform var(--dur-fast); }
.ptr.draait svg { animation: pwa-draai .8s linear infinite; }
@keyframes pwa-draai { to { transform: rotate(360deg); } }

/* ── 3d. Offline-balk en update-melding ───────────────────────────────────── */
.offline-balk[hidden] { display: none; }
.offline-balk { position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 85; background: var(--text); color: var(--card); border-radius: 14px; padding: 12px 16px; font: 500 14px var(--font); display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-pop); animation: pwa-omhoog var(--dur-panel) ease-out; }
.offline-balk .stip { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
.offline-balk.online .stip { background: var(--green); }
.offline-balk .actie { margin-left: auto; color: var(--card); background: color-mix(in srgb, var(--card) 14%, transparent); border: none; border-radius: 8px; padding: 8px 12px; font: 600 13px var(--font); cursor: pointer; min-height: 36px; }
@media (min-width: 900px) { .offline-balk { left: auto; right: 20px; bottom: 20px; max-width: 420px; } }

@media (prefers-reduced-motion: reduce) { .pwa-blad, .pwa-blad .vel, .pwa-blad .pijl, .offline-balk, .ptr.draait svg { animation: none; } }