/* ══════════════════════════════════════════════════════════════════
   MOBILE UX UPGRADES — native-app gevoel, grotere tap targets,
   snellere feedback, animaties, bottom-sheet patterns.
   ══════════════════════════════════════════════════════════════════ */

/* --- Basis: touch-geoptimaliseerd ---------------------------------- */
html, body { -webkit-tap-highlight-color:transparent; overscroll-behavior-y:contain; }
button, .task-row, .task-row-lg, .note-card, .cl-card-top, .dash-note-inline, .fav-option, .dropdown-item, .wd-chip, .chip {
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
button:active, .btn-primary:active, .btn-save:active, .btn-sm:active { transform:scale(0.97); transition:transform 0.08s; }

/* Safe-area voor iPhones met notch/home-indicator */
.bottom-nav { padding-bottom:env(safe-area-inset-bottom,0); }
.content { padding-bottom:calc(6rem + env(safe-area-inset-bottom,0)); }

/* --- Bottom nav: groter, duidelijker, thumb-friendly --------------- */
.bottom-nav { box-shadow:0 -2px 12px rgba(0,0,0,0.06); }
.nav-tab { min-height:54px; padding:0.35rem 0.1rem 0.3rem; font-size:0.6rem; gap:1px; position:relative; transition:color 0.15s, background 0.15s; }
.nav-tab .ni {
  font-size:1.2rem;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:26px; border-radius:99px;
  transition:background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nav-tab.active { color:#a83545; font-weight:900; }
.nav-tab.active .ni {
  background:linear-gradient(180deg,#fbeef1,#f4d9de);
  color:#a83545;
  transform:translateY(-1px);
  box-shadow:0 1px 4px rgba(168,53,69,0.18);
}
.nav-tab.active::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:42px; height:3px; background:linear-gradient(90deg,#a83545,#c44a5c); border-radius:0 0 3px 3px;
}
.nav-tab:active { background:#fbf5eb; }

/* --- Topbar: iets luchtiger, consistente hoogte -------------------- */
.topbar { height:54px; box-shadow:0 1px 3px rgba(0,0,0,0.12); }
.topbar-title { font-size:1.02rem; letter-spacing:-0.01em; font-weight:800; }
.avatar-btn { width:36px; height:36px; font-size:0.86rem; }

/* --- Dag-navigator: compact, enkele regel ------------------------- */
.dag-nav { padding:0.25rem 0.5rem; gap:0.3rem; }
.dag-nav-btn {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; line-height:1; border-radius:8px; transition:background 0.12s;
}
.dag-nav-btn:active { background:#e2e8f0; }
.dag-nav-today { min-height:26px; padding:0.14rem 0.55rem; font-size:0.68rem; }

/* --- Taakrijen: MIN 44px hitbox, grotere checkbox, directe feedback  */
.task-row { min-height:44px; padding:0.5rem 0.25rem; gap:0.7rem; border-radius:10px; margin:0 -0.25rem; transition:background 0.12s; }
.task-row:active { background:#f0f4f8; }
.task-check { width:24px; height:24px; border-radius:7px; font-size:0.9rem; border-width:2.5px; }
.task-text-s { font-size:0.9rem; line-height:1.32; }

.task-row-lg { min-height:48px; padding:0.6rem 0.3rem; gap:0.8rem; border-radius:10px; margin:0 -0.3rem; transition:background 0.12s; }
.task-row-lg:active { background:#f0f4f8; }
.task-check-lg { width:28px; height:28px; border-radius:8px; font-size:0.95rem; border-width:2.5px; }
.task-text-lg { font-size:0.96rem; line-height:1.36; }

/* Check "pop" feedback bij afvinken */
@keyframes checkPop { 0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);} }
.task-row.done .task-check, .task-row-lg.done .task-check-lg { animation:checkPop 0.28s ease-out; }

/* Sticky tijdvak-label binnen checklist-detail zodat je weet waar je zit */
.modal .time-group-label-lg {
  position:sticky; top:0; background:white; z-index:2;
  padding:0.7rem 0 0.3rem;
}

/* --- Chips/weekdag-chips: min 40px hitbox -------------------------- */
.wd-chip { min-width:40px; min-height:36px; padding:0.35rem 0.6rem; font-size:0.82rem; }
.chip { min-height:40px; padding:0.4rem 0.85rem; font-size:1rem; display:inline-flex; align-items:center; }
.chip.on { box-shadow:0 2px 6px rgba(168,53,69,0.3); }

/* --- Dropdown: grotere items -------------------------------------- */
.dropdown-item { min-height:44px; padding:0.65rem 0.9rem; font-size:0.92rem; }
.dropdown-menu { border-radius:14px; }

/* --- Cards: subtielere shadows, grotere tap areas ------------------ */
.cl-card-top { min-height:44px; padding:0.45rem 0.7rem; }
.cl-card-btn { min-height:38px; padding:0.45rem 0.5rem; font-size:0.76rem; }
.user-card-btn { min-height:42px; padding:0.55rem 0.5rem; font-size:0.8rem; }
.dni-btn { min-height:32px; padding:0.35rem 0.75rem; font-size:0.76rem; }
.note-card { min-height:auto; padding:0.75rem 0.95rem; transition:transform 0.1s, box-shadow 0.15s; }
.note-card:active { transform:scale(0.99); background:#fafbfc; }

/* --- OVERLAYS / BOTTOM SHEETS: slide-up animatie + drag handle ----- */
.overlay { transition:background 0.22s ease; background:rgba(0,0,0,0); }
.overlay.open { background:rgba(0,0,0,0.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.modal { transform:translateY(100%); transition:transform 0.28s cubic-bezier(0.32,0.72,0.3,1); padding-top:0.5rem; padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0)); border-radius:20px 20px 0 0; }
.overlay.open .modal { transform:translateY(0); }
.modal::before {
  content:''; display:block; width:36px; height:4px; border-radius:99px;
  background:#d1d5db; margin:0 auto 0.7rem; cursor:grab;
}
.modal.dragging { transition:none; }

/* --- FAB (Floating Action Button) --------------------------------- */
.fab {
  position:fixed; right:1rem; z-index:70;
  bottom:calc(122px + env(safe-area-inset-bottom,0));
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(180deg,#f5bc34,#e9a51a); color:#2a1418;
  border:none; font-size:1.65rem; font-weight:800; font-family:inherit;
  box-shadow:0 6px 16px rgba(240,176,32,0.42), 0 2px 5px rgba(0,0,0,0.1);
  cursor:pointer; display:none; align-items:center; justify-content:center;
  transition:transform 0.15s, box-shadow 0.15s;
}
.fab.show { display:flex; animation:fabIn 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.fab:active { transform:scale(0.92); box-shadow:0 2px 8px rgba(240,176,32,0.35); }
@keyframes fabIn { 0%{transform:scale(0.4);opacity:0;} 100%{transform:scale(1);opacity:1;} }

/* --- Toast voor snelle feedback ----------------------------------- */
#toast {
  position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom,0));
  transform:translateX(-50%) translateY(20px); opacity:0;
  background:#2a1418; color:white; padding:0.7rem 1.1rem; border-radius:99px;
  font-size:0.88rem; font-weight:600; z-index:400; pointer-events:none;
  transition:opacity 0.2s, transform 0.2s; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* --- Progress bar: iets dikker op mobile -------------------------- */
.prog-bar-wrap { height:7px; }
.prog-bar-wrap-lg { height:10px; }

/* --- Login: iets ruimer ------------------------------------------- */
.inp { min-height:44px; font-size:0.98rem; }
.btn-primary, .btn-save { min-height:48px; font-size:0.98rem; border-radius:12px; }
.btn-sm { min-height:38px; padding:0.45rem 0.9rem; font-size:0.86rem; border-radius:9px; }

/* --- Visuele druk verlagen: minder harde borders, rustiger hierarchie */
.dash-panel { box-shadow:0 1px 2px rgba(0,0,0,0.035), 0 3px 10px rgba(0,0,0,0.025); }
.cl-card, .note-card, .user-card, .card { box-shadow:0 1px 2px rgba(0,0,0,0.035), 0 3px 10px rgba(0,0,0,0.025); }
.dash-col-label { font-size:0.68rem; }

/* --- Focus ring voor toetsenbord-navigatie (a11y) ------------------ */
button:focus-visible, .inp:focus-visible, .task-row:focus-visible { outline:2px solid #a83545; outline-offset:2px; }

/* --- Skeleton / loading hint verzachten --------------------------- */
.fav-empty { padding:1.25rem 0.9rem; }

/* --- Mini-media: nog iets groter op zeer smalle schermen ---------- */
@media(max-width:380px){
  .task-text-s { font-size:0.86rem; }
  .nav-tab { font-size:0.55rem; letter-spacing:0.02em; }
  .nav-tab .ni { font-size:1.1rem; width:34px; height:24px; }
  .fab { right:0.9rem; width:50px; height:50px; font-size:1.5rem; }
}