/* ══════════════════════════════════════════════════════════════════
   EXTRAS — stijlen bij functionaliteit uit static/js/extras.js: de
   algemene dialog/prompt-modal, sub-stappen, trainingen-pagina,
   filiaal-beheer, winkeltijden-editor, backup-lijst (Gebruikersbeheer).
   Wordt als LAATSTE geladen vóór donker.css (zie templates/base.html),
   dus regels hier winnen bij gelijke specificiteit van alle voorgaande
   CSS-files. Groeit historisch mee met elke nieuwe feature — bij een
   grote nieuwe feature is een eigen CSS-file (zoals checklists.css/
   tijdvakken.css) overzichtelijker dan hem hier nog groter te maken.
   ══════════════════════════════════════════════════════════════════ */

/* Algemene dialog-modal (prompt/confirm) — hogere z-index zodat hij bovenop andere modals past */
#ovDialog { z-index:250; align-items:center; }
.dialog-modal {
  max-width:340px;
  padding:0.95rem 1rem 0.8rem;
  transform-origin:center;
  border-radius:16px;
  margin-bottom:0;
}
.dialog-head h3 {
  margin:0 0 0.3rem; font-size:0.98rem; color:#a83545;
}
.dialog-msg {
  margin:0 0 0.7rem; font-size:0.86rem; color:#374151; line-height:1.4;
  white-space:pre-wrap;
}
.dialog-modal .inp { margin:0 0 0.75rem; }
.dialog-actions {
  display:flex; gap:0.5rem; justify-content:flex-end;
}
.dialog-actions .btn-sm { min-width:90px; }
.dialog-actions .btn-gold.danger {
  background:#ef4444; color:white;
}
.dialog-actions .btn-gold.danger:hover { background:#dc2626; }

/* Toast met actieknop voor ongedaan-maken */
#toast.has-action { padding-right:0.4rem; }
#toast .toast-action {
  margin-left:0.8rem; padding:0.3rem 0.75rem;
  background:#f0b020; color:#2a1418;
  border:none; border-radius:8px;
  font-family:inherit; font-size:0.8rem; font-weight:800;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#toast .toast-action:active { transform:scale(0.95); }

/* ── NIEUWE FEATURES ─────────────────────────────────────────── */

/* Taak-notitie: kleine schuine regel onder de taakbeschrijving */
.task-note { display:block; font-size:0.74rem; color:#8a7a88; font-style:italic; margin-top:2px; line-height:1.25; }
.task-row.done .task-note, .task-row-lg.done .task-note { color:#c9c6c9; text-decoration:none; }
.task-row-lg .task-note { font-size:0.78rem; }

/* Huidig tijdvak: subtiele markering */
.time-group.now-slot .time-group-label { color:#a83545; }
.time-group.now-slot .time-group-label::before {
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#a83545; margin-right:0.4rem; vertical-align:middle;
  animation:nowPulse 2s ease-in-out infinite;
}
@keyframes nowPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(168,53,69,0.5); }
  50% { box-shadow:0 0 0 5px rgba(168,53,69,0); }
}

/* Filter-chips Vandaag-pagina */
.filter-chips-row { display:flex; gap:0.35rem; overflow-x:auto; padding:0 0 0.5rem; margin:0 -0.1rem 0.2rem; -webkit-overflow-scrolling:touch; }
.filter-chips-row::-webkit-scrollbar { display:none; }
.filter-chip {
  flex-shrink:0; padding:0.35rem 0.7rem; border-radius:999px;
  background:white; border:1px solid #e2e8f0; color:#6b7280;
  font-size:0.78rem; font-weight:600; font-family:inherit;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background 0.12s, color 0.12s, border-color 0.12s;
}
.filter-chip:hover { background:#faf4ec; }
.filter-chip.on { background:#a83545; color:white; border-color:#a83545; }


/* Dashboard celebratory state (alles af) */
.dash-celebrate {
  background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
  border-radius:14px; padding:0.9rem 1rem;
  margin-bottom:0.6rem; display:flex; align-items:center; gap:0.7rem;
  box-shadow:0 1px 6px rgba(240,176,32,0.2);
}
.dash-celebrate-ico { font-size:1.4rem; }
.dash-celebrate-txt { font-size:0.85rem; color:#2a1418; font-weight:600; }

/* Swipe-animatie feedback op task-row */
.task-row.swiping, .task-row-lg.swiping { transition:none; }
.task-row.swipe-flash, .task-row-lg.swipe-flash { animation:swipeFlash 0.4s ease-out; }
@keyframes swipeFlash {
  0% { background:rgba(16,185,129,0.25); }
  100% { background:transparent; }
}
.task-row.swipe-flash-undo, .task-row-lg.swipe-flash-undo { animation:swipeFlashUndo 0.4s ease-out; }
@keyframes swipeFlashUndo {
  0% { background:rgba(168,53,69,0.15); }
  100% { background:transparent; }
}


/* Routine-separator gemarkeerd als "nu" */
.routine-sep.now-slot { color:#a83545; position:relative; }
.routine-sep.now-slot::before {
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#a83545; margin-right:0.45rem; vertical-align:middle;
  animation:nowPulse 2s ease-in-out infinite;
}
.now-pill {
  display:inline-block; margin-left:0.4rem; padding:0.05rem 0.5rem;
  font-size:0.62rem; font-weight:800; letter-spacing:0.06em;
  background:#a83545; color:white; border-radius:999px;
  text-transform:uppercase; vertical-align:middle;
}

/* Notitie-knop in detail-modal (optioneel UI-element) */
.task-note-btn {
  border:none; background:transparent; cursor:pointer; padding:0.3rem;
  color:#9ca3af; -webkit-tap-highlight-color:transparent;
}
.task-note-btn:hover { color:#a83545; }

/* ── SEGMENT-KEUZE (licht/donker/auto) ───────────────────────── */
.seg-pick {
  display:inline-flex; background:#f1ede5; border-radius:10px;
  padding:2px; gap:0;
}
.seg-pick .seg-btn {
  border:none; background:transparent;
  padding:0.35rem 0.7rem;
  font-family:inherit; font-size:0.74rem; font-weight:700;
  color:#6b7280; cursor:pointer; border-radius:8px;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.12s, color 0.12s;
}
.seg-pick .seg-btn.on {
  background:white; color:#2a1418;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
body.dark-mode .seg-pick { background:#2f2f38; }
body.dark-mode .seg-pick .seg-btn { color:#a0a0a8; }
body.dark-mode .seg-pick .seg-btn.on { background:#1c1c22; color:#e5e5eb; }

/* ── SNELLE TAKEN (Quick tasks) ─────────────────────────────── */
.quick-panel {
  background:white; border-radius:14px; padding:0.75rem 0.85rem;
  margin-bottom:0.7rem; box-shadow:0 1px 6px rgba(0,0,0,0.05);
}
body.dark-mode .quick-panel { background:#24242b; }
.quick-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:0.5rem;
}
.quick-title {
  font-size:0.82rem; font-weight:800; color:#2a1418;
  display:flex; align-items:center; gap:0.4rem;
}
body.dark-mode .quick-title { color:#e5e5eb; }
.quick-title .quick-count {
  font-size:0.7rem; color:#9ca3af; font-weight:600;
}
.quick-add-btn {
  border:none; background:#a83545; color:white;
  border-radius:8px; padding:0.35rem 0.7rem;
  font-family:inherit; font-size:0.78rem; font-weight:700;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; gap:0.3rem;
}
.quick-add-btn:active { transform:scale(0.96); }
.quick-list { display:flex; flex-direction:column; gap:0.1rem; }
.quick-row {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.45rem 0.2rem; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border-radius:6px;
}
.quick-row:hover { background:#fbf5eb; }
body.dark-mode .quick-row:hover { background:#2c2c34; }
.quick-check {
  width:20px; height:20px; flex-shrink:0;
  border:1.8px solid #d1d5db; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:#10b981;
}
.quick-row.done .quick-check { background:#10b981; border-color:#10b981; color:white; }
.quick-text { flex:1; font-size:0.86rem; color:#374151; }
body.dark-mode .quick-text { color:#d4d4dc; }
.quick-row.done .quick-text { text-decoration:line-through; color:#9ca3af; }
.quick-del {
  border:none; background:transparent; color:#9ca3af;
  cursor:pointer; padding:0.2rem 0.4rem; font-size:1.1rem;
  -webkit-tap-highlight-color:transparent;
}
.quick-del:hover { color:#ef4444; }
.quick-empty {
  font-size:0.78rem; color:#9ca3af; padding:0.5rem 0.2rem;
  font-style:italic;
}

/* ── SUB-STAPPEN (uit notitie syntax) ───────────────────────── */
.substeps {
  margin-top:4px; padding-left:0;
  display:flex; flex-direction:column; gap:1px;
}
.substep {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.18rem 0; cursor:pointer;
  font-size:0.76rem; color:#6b7280;
  -webkit-tap-highlight-color:transparent;
}
.substep-check {
  width:14px; height:14px; flex-shrink:0;
  border:1.5px solid #cbd5e1; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  color:#10b981;
}
.substep.done .substep-check { background:#10b981; border-color:#10b981; }
.substep.done .substep-check svg { color:white; }
.substep.done .substep-text { text-decoration:line-through; color:#cbd5e1; }
.substep-text { flex:1; }
body.dark-mode .substep { color:#a0a0a8; }
body.dark-mode .substep-check { border-color:#3a3a45; }

/* ── GLOBALE SNEL-INVOER (sticky boven nav, op elke pagina) ──────── */
.global-quick-add {
  position: fixed;
  left: 0; right: 0;
  bottom: 56px; /* hoogte van bottom-nav */
  padding: 0.45rem 0.7rem 0.55rem;
  z-index: 60;
  background: linear-gradient(to top, rgba(255,255,255,0.96) 55%, rgba(255,255,255,0));
  pointer-events: none;
}
/* Eén pil-vormige kapje rond input + Enter-knop. Pointer-events terug aan
   zodat de elementen binnenin klikbaar zijn (de buitenste container heeft
   pointer-events:none vanwege de gradient-achtergrond). */
.quick-add-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  padding: 0.2rem 0.25rem 0.2rem 0.4rem;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.2s;
}
.quick-add-pill:focus-within {
  border-color: #a83545;
  box-shadow: 0 2px 14px rgba(168,53,69,0.22);
}
.quick-add-pill.added-flash {
  border-color: #10b981;
  background: #ecfdf5;
  box-shadow: 0 2px 14px rgba(16,185,129,0.25);
}
.global-quick-add input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0.45rem 0.6rem;
  font-family: inherit;
  font-size: 0.88rem;
  color: #2a1418;
  outline: none;
  -webkit-appearance: none;
}
.quick-enter-btn {
  flex: 0 0 auto;
  border: none;
  background: #a83545;
  color: white;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  -webkit-appearance: none;
  letter-spacing: 0.02em;
}
.quick-enter-btn:hover { background: #8e2838; }
.quick-enter-btn:active { transform: scale(0.95); }

.global-quick-add input::placeholder { color: #9ca3af; }
.quick-add-pill.added-flash { animation: quickAddPop 0.4s ease-out; }
@keyframes quickAddPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

body.dark-mode .global-quick-add {
  background: linear-gradient(to top, rgba(28,28,34,0.96) 55%, rgba(28,28,34,0));
}
body.dark-mode .quick-add-pill { background: #2f2f38; border-color: #3a3a45; }
body.dark-mode .quick-add-pill.added-flash { background: #064e3b; border-color: #10b981; }
body.dark-mode .global-quick-add input { color: #e5e5eb; }
body.dark-mode .global-quick-add input::placeholder { color: #6b7280; }
body.dark-mode .quick-enter-btn { background: #c14254; }
body.dark-mode .quick-enter-btn:hover { background: #a83545; }
/* Pagina krijgt extra ruimte onderaan zodat de balk niets verbergt */
.page { padding-bottom: 130px !important; }

/* ── SNEL-AFRONDEN op berichten ─────────────────────────────────── */
.inbox-row { position: relative; }
.note-card { position: relative; }
.msg-quick-done {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: white;
  color: #94a3b8; /* subtiel grijs check-icoontje als hint */
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  z-index: 5;
  padding: 0;
}
.msg-quick-done svg { width: 16px; height: 16px; stroke-width: 3; }
.msg-quick-done:hover { border-color: #10b981; color: #10b981; background:#f0fdf4; }
.msg-quick-done:active { transform: translateY(-50%) scale(0.92); }
.msg-quick-done.on {
  background: #10b981; border-color: #10b981; color: white;
}
.msg-quick-done.on:hover { background:#059669; border-color:#059669; }
.msg-quick-done.card {
  top: 0.55rem;
  right: 2.3rem; /* naast de bestaande X-verwijderknop */
  transform: none;
  width: 32px; height: 32px;
}
.msg-quick-done.card:active { transform: scale(0.92); }
/* Maak ruimte rechts in de inbox-rij zodat het knopje niet over tekst zit */
.inbox-row .inbox-main { padding-right: 38px; }
/* Donker thema */
body.dark-mode .msg-quick-done {
  background: #2f2f38; border-color: #4a4a55; color: #6b7280;
}
body.dark-mode .msg-quick-done:hover { border-color: #10b981; color: #10b981; background:#1c2a23; }
body.dark-mode .msg-quick-done.on { background: #10b981; color: white; border-color: #10b981; }

/* ── Per-checklist inklappen (Vandaag + Favorieten) ──────────────────── */
/* Klein chevron-pijltje vóór de titel — staat als 'open' standaard ▼,
   en draait -90° als 't ingeklapt is (▶). Sterretje rechts blijft daardoor
   netjes aan het einde staan. */
.dash-panel .panel-collapse-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 0.35rem 0 0;
  color: #9ca3af;
  font-size: 0.8rem;
  line-height: 1;
  transform: rotate(90deg); /* open-staat: ▶ → ▼ door rotatie */
  transition: transform 0.18s ease, color 0.15s ease;
  user-select: none;
  flex-shrink: 0;
}
/* Zorg dat de titel alle ruimte tussen chevron en sterretje opvult */
.dash-panel-header .dash-panel-title { flex: 1 1 auto; min-width: 0; }
.dash-panel-header { cursor: pointer; }
/* Ingeklapt: pijltje terug naar 0° (= ▶ horizontaal) */
.dash-panel.panel-collapsed .panel-collapse-chev { transform: rotate(0deg); color: #6b7280; }
/* Verberg de body wanneer panel handmatig is ingeklapt */
.dash-panel.panel-collapsed .fav-panel-body { display: none; }
.dash-panel.panel-collapsed .all-done-hint { display: none; }
/* Subtiele hover-feedback om aan te geven dat de header klikbaar is */
.dash-panel-header:hover .panel-collapse-chev { color: #2a1418; }
body.dark-mode .dash-panel .panel-collapse-chev { color: #6b7280; }
body.dark-mode .dash-panel.panel-collapsed .panel-collapse-chev { color: #9ca3af; }
body.dark-mode .dash-panel-header:hover .panel-collapse-chev { color: #e5e5eb; }

/* Admin-bewerk-knop in de checklist-paneelheader (Vandaag/Favorieten) */
.dash-panel-header .cl-edit-btn {
  color: #9ca3af;
  margin-right: 0.25rem;
  transition: color 0.15s ease, transform 0.1s ease;
}
.dash-panel-header .cl-edit-btn:hover { color: #2a1418; }
.dash-panel-header .cl-edit-btn:active { transform: scale(0.92); }
body.dark-mode .dash-panel-header .cl-edit-btn { color: #6b7280; }
body.dark-mode .dash-panel-header .cl-edit-btn:hover { color: #e5e5eb; }

/* Instellingen-pagina: kaart-stijl voor losstaande toggles (zoals Herinneringen) */
.inst-sectie-titel {
  font-size: 0.72rem;
  font-weight: 800;
  color: #a83545;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding-top: 0.25rem;
}
.instellingen-card {
  background: white;
  border-radius: 12px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.dark-mode .instellingen-card {
  background: #2f2f38;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.dark-mode .inst-sectie-titel { color: #e47a84; }

/* Winkeltijden tabel — grid-layout met 5 kolommen */
.wt-table {
  width: 100%;
  overflow-x: auto;
}
.wt-header-row,
.wt-day-row {
  display: grid;
  grid-template-columns: 1.8rem repeat(4, 1fr);
  align-items: center;
  gap: 0 4px;
}
.wt-header-row {
  padding-bottom: 5px;
  border-bottom: 1.5px solid #e5e7eb;
  margin-bottom: 2px;
}
.wt-day-row {
  padding: 4px 0;
  border-bottom: 1px solid #f3f4f6;
}
.wt-day-row:last-child { border-bottom: none; }
.wt-col-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-align: center;
}
.wt-day-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #a83545;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.dark-mode .wt-header-row { border-bottom-color: #4a4a58; }
body.dark-mode .wt-day-row { border-bottom-color: #3f3f4a; }
body.dark-mode .wt-day-label { color: #e47a84; }
body.dark-mode .wt-col-lbl { color: #6b7280; }
body.dark-mode .wt-val { color: #f0f0f0; }
body.dark-mode .wt-inp { background: #1e1e26; border-color: #4a3535; color: #f0f0f0; }
body.dark-mode .wt-edit-btn { background: #2c2c34; color: #e47a84; }
body.dark-mode .wt-save-btn { background: #064e3b; color: #6ee7b7; }

/* Filiaal in winkeltijden-kaart */
.wt-filiaal-area {
  margin-bottom: 0.45rem;
  margin-top: 0.1rem;
}
.wt-filiaal-inp {
  width: 100%;
  border: 1.5px solid #f3cece;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 0.85rem;
  font-family: inherit;
  background: #fff;
  color: #2a1418;
  box-sizing: border-box;
}
.wt-filiaal-inp:focus { border-color: #a83545; outline: none; }
.wt-filiaal-val {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  display: inline-block;
}
.wt-filiaal-ph { color: #9ca3af; font-weight: 400; font-style: italic; }
body.dark-mode .wt-filiaal-inp { background: #1e1e26; border-color: #4a3535; color: #f0f0f0; }
body.dark-mode .wt-filiaal-val { color: #e5e5eb; }

/* Tijdvak-modus knoppen (5 stuks in de checklist-editor) */
.ts-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0.5rem;
}
.ts-mode-btn {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6b7280;
  background: #f3f4f6;
  border: 1.5px solid #e5e7eb;
  border-radius: 99px;
  padding: 3px 9px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.5;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.ts-mode-btn:active { transform: scale(0.96); }
.ts-mode-btn.on {
  color: #a83545;
  background: #fef2f2;
  border-color: #a83545;
}
body.dark-mode .ts-mode-btn { background: #2c2c38; border-color: #4a4a58; color: #9ca3af; }
body.dark-mode .ts-mode-btn.on { background: #3d1f24; border-color: #e47a84; color: #e47a84; }

/* Zichtbare mappen: chip-knoppen */
.map-vis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0.1rem 0;
}
.map-vis-chip {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: #a83545;
  border: 1.5px solid #a83545;
  border-radius: 99px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.map-vis-chip.off {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #6b7280;
  text-decoration: line-through;
}
.map-vis-chip:active { transform: scale(0.96); }
body.dark-mode .map-vis-chip { background: #a83545; border-color: #c84558; color: #fff; }
body.dark-mode .map-vis-chip.off { background: #2c2c38; border-color: #4a4a58; color: #6b7280; }

/* Tijdvak-label clickable indicator */
.time-group-label, .time-group-label-lg { user-select:none; }
.time-group-label.bulk-pressing,
.time-group-label-lg.bulk-pressing {
  background:rgba(168,53,69,0.1); border-radius:6px;
  transition:background 0.15s ease;
}


/* ── PWA installatie-modal ──────────────────────────────────────── */
.install-overlay {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,12,14,0.55);
  z-index:300;
  padding:1.25rem;
  opacity:0;
  transition:opacity 0.22s ease;
}
.install-overlay.show { opacity:1; }
.install-modal {
  width:100%; max-width:360px;
  background:white; color:#2a1418;
  border-radius:18px;
  padding:1.5rem 1.4rem 1.2rem;
  box-shadow:0 18px 48px rgba(0,0,0,0.32);
  text-align:center;
  transform:translateY(14px) scale(0.96);
  transition:transform 0.22s ease;
}
.install-overlay.show .install-modal { transform:translateY(0) scale(1); }
.install-title {
  margin:0 0 0.55rem;
  font-size:1.45rem; font-weight:800; line-height:1.2;
  color:#a83545;
}
.install-sub {
  margin:0 0 1.25rem;
  font-size:0.95rem; line-height:1.45; color:#374151;
}
.install-ios-hint { margin-top:0.6rem; font-size:0.85rem; color:#4b5563; }
.install-ios-hint em { font-style:normal; font-weight:700; color:#a83545; }
.install-share-ico { width:16px; height:16px; vertical-align:-3px; display:inline-block; }
.install-actions { display:flex; gap:0.6rem; }
.install-btn-skip,
.install-btn-go {
  flex:1;
  min-height:48px;
  padding:0 1rem;
  border:none; border-radius:10px;
  font-family:inherit; font-size:0.95rem; font-weight:700;
  cursor:pointer;
}
.install-btn-skip { background:#f3f4f6; color:#374151; }
.install-btn-skip:hover { background:#e5e7eb; }
.install-btn-go { background:#a83545; color:white; }
.install-btn-go:hover { background:#c44a5c; }

body.dark-mode .install-modal { background:#24242b; color:#e5e5eb; }
body.dark-mode .install-title { color:#e9a4ad; }
body.dark-mode .install-sub { color:#cbd5e1; }
body.dark-mode .install-ios-hint { color:#9ca3af; }
body.dark-mode .install-ios-hint em { color:#e9a4ad; }
body.dark-mode .install-btn-skip { background:#2d2d35; color:#e5e5eb; }
body.dark-mode .install-btn-skip:hover { background:#3a3a45; }

/* ── Pull-to-refresh indicator ──────────────────────────────────── */
.pull-refresh {
  position:fixed;
  top:0; left:50%;
  width:36px; height:36px;
  margin:0;
  background:white;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
  display:flex; align-items:center; justify-content:center;
  z-index:400;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -50px);
  will-change:transform, opacity;
}
.pull-refresh-spinner {
  width:18px; height:18px;
  border:2.5px solid #e5e7eb;
  border-top-color:#a83545;
  border-radius:50%;
  transform:rotate(0deg);
  transition:border-color 0.2s ease;
}
.pull-refresh.ready .pull-refresh-spinner {
  border-color:#a83545;
  border-top-color:#a83545;
}
.pull-refresh.refreshing .pull-refresh-spinner {
  animation:prSpin 0.7s linear infinite;
  border-color:#e5e7eb;
  border-top-color:#a83545;
}
@keyframes prSpin { to { transform:rotate(360deg); } }

body.dark-mode .pull-refresh { background:#24242b; box-shadow:0 4px 12px rgba(0,0,0,0.5); }
body.dark-mode .pull-refresh-spinner { border-color:#3a3a45; border-top-color:#e9a4ad; }
body.dark-mode .pull-refresh.ready .pull-refresh-spinner { border-color:#e9a4ad; border-top-color:#e9a4ad; }


/* ── FAVORIETEN VOLGORDE ─────────────────────────────────────── */
.fav-order-head {
  font-size:0.72rem; font-weight:700; color:#9ca3af;
  text-transform:uppercase; letter-spacing:.05em;
  padding:0.65rem 0 0.25rem;
  display:flex; align-items:center; gap:0.5rem;
}
.fav-order-hint {
  font-size:0.68rem; font-weight:400; color:#c4c9d4;
  text-transform:none; letter-spacing:0;
}
.fav-order-row {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.55rem 0; border-bottom:1px solid #f3f4f6;
  touch-action:none; user-select:none;
}
body.dark-mode .fav-order-row { border-color:#2f2f38; }
.fav-order-row.drag-active {
  opacity:0.35; background:#faf4ec; border-radius:8px;
}
body.dark-mode .fav-order-row.drag-active { background:#2c2c34; }
.drag-handle {
  font-size:1.05rem; color:#c4c9d4; padding:0.3rem 0.25rem;
  cursor:grab; flex-shrink:0; line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.drag-handle:active { cursor:grabbing; color:#a83545; }
.fav-section-div { height:1px; background:#e5e7eb; margin:0.75rem 0 0; }
body.dark-mode .fav-section-div { background:#2f2f38; }

/* ── ZOEKRESULTATEN ──────────────────────────────────────────── */
.zoek-result {
  padding:0.7rem 0; border-bottom:1px solid #f3f4f6;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.zoek-result:last-child { border-bottom:none; }
body.dark-mode .zoek-result { border-color:#2f2f38; }
.zoek-result:active { background:#faf4ec; border-radius:6px; }
body.dark-mode .zoek-result:active { background:#2c2c34; }
.zoek-r-type { font-size:0.72rem; color:#9ca3af; margin-bottom:0.15rem; }
.zoek-r-title { font-size:0.92rem; font-weight:600; color:#1f2937; }
body.dark-mode .zoek-r-title { color:#e5e5eb; }
.zoek-leeg { color:#9ca3af; font-size:0.88rem; text-align:center; padding:1.5rem 0; margin:0; }

/* ── LEESBEVESTIGING BERICHT ─────────────────────────────────── */
.note-readers {
  font-size:0.8rem; color:#6b7280; margin:0.5rem 0 0;
  padding:0.45rem 0.6rem; background:#f9fafb; border-radius:8px;
  line-height:1.4;
}
body.dark-mode .note-readers { background:#2c2c34; color:#9ca3af; }

/* ── TRAININGEN ──────────────────────────────────────────────── */
.train-user-bar {
  display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem;
}
.train-user-chip {
  padding:0.35rem 0.8rem; border-radius:20px; border:1.5px solid #e2e8f0;
  background:white; font-size:0.82rem; font-weight:600; color:#6b7280;
  cursor:pointer; font-family:inherit; transition:all 0.15s;
}
.train-user-chip.on { background:#a83545; border-color:#a83545; color:white; }

.train-trainee-chip-wrap {
  position:relative; display:inline-flex; align-items:center;
}
.train-trainee-chip-wrap .train-user-chip.trainee {
  border-style:dashed; padding-right:1.6rem;
}
.train-trainee-del {
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; border:none; background:none;
  color:#9ca3af; font-size:1rem; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.train-trainee-del:hover { color:#ef4444; }
.train-add-trainee-btn {
  display:inline-flex; align-items:center; gap:0.3rem;
  padding:0.3rem 0.75rem; border-radius:20px;
  border:1.5px dashed #a83545; background:none;
  color:#a83545; font-size:0.78rem; font-weight:600;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:background 0.13s;
}
.train-add-trainee-btn:hover { background:#fdf2f4; }

.train-empty {
  text-align:center; padding:2.5rem 1rem; color:#9ca3af; font-size:0.88rem; line-height:1.6;
}

.train-section {
  background:white; border-radius:14px; box-shadow:0 1px 6px rgba(0,0,0,0.07);
  margin-bottom:0.85rem; overflow:hidden;
}
.train-section-head {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.65rem 0.85rem; border-bottom:1px solid #f4ede3;
  flex-wrap:wrap;
}
.train-section-title {
  font-size:0.82rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; color:#a83545; flex:1; min-width:0;
}
.train-progress-wrap {
  display:flex; align-items:center; gap:0.4rem; flex-shrink:0;
}
.train-progress-bar {
  width:56px; height:6px; background:#f0ebe5; border-radius:3px; overflow:hidden;
}
.train-progress-fill {
  height:100%; background:#22c55e; border-radius:3px; transition:width 0.3s ease;
}
.train-progress-label {
  font-size:0.72rem; font-weight:700; color:#6b7280; white-space:nowrap;
}
.train-head-actions {
  display:flex; gap:0.4rem; flex-shrink:0;
}
/* Zichtbare knop blijft compact (past bij de dichte header/footer-rijen),
   maar het echte tikgebied wordt via ::after vergroot richting de
   44px-conventie — anders mist een medewerker de knop op mobiel geregeld. */
.train-icon-btn {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px; border:none;
  background:#f9fafb; color:#6b7280; cursor:pointer; font-family:inherit;
  transition:background 0.13s, color 0.13s;
}
/* Halo bewust klein gehouden: bij -6px zou hij, gegeven de 0.4rem-gap in
   .train-head-actions, de hitbox van de buurknop overlappen (dubbeltik-fout
   op de verkeerde actie). -3px blijft ruim binnen de helft van de kleinste
   omringende gap (train-head-actions: 0.4rem, train-item-footer .sm: 0.5rem). */
.train-icon-btn::after { content:''; position:absolute; inset:-3px; }
.train-icon-btn:hover { background:#f0ebe5; color:#a83545; }
.train-icon-btn.danger:hover { background:#fef2f2; color:#ef4444; }
.train-icon-btn.sm { width:26px; height:26px; border-radius:6px; }

.train-no-items {
  padding:0.6rem 0.85rem; font-size:0.8rem; color:#9ca3af; font-style:italic;
}

.train-items { padding:0 0.5rem 0.5rem; }
.train-item {
  padding:0.65rem 0.4rem; border-bottom:1px solid #f4ede3;
}
.train-item:last-child { border-bottom:none; }
.train-item-naam {
  font-size:0.9rem; color:#2a1418; margin-bottom:0.5rem; font-weight:500;
}
.train-item-footer {
  display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
}
.train-toggle {
  position:relative;
  display:inline-flex; align-items:center; gap:0.3rem;
  padding:0.3rem 0.65rem; border-radius:20px; border:1.5px solid #e2e8f0;
  background:white; color:#9ca3af; font-size:0.78rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all 0.15s;
  min-height:32px;
}
/* Alleen verticaal vergroten — horizontaal ligt de volgende knop in
   dezelfde rij te dicht ernaast om het tikgebied te laten overlappen. */
.train-toggle::after { content:''; position:absolute; top:-3px; bottom:-3px; left:0; right:0; }
.train-toggle .train-chk {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:3px; border:1.5px solid currentColor;
  font-size:0.7rem; line-height:1; flex-shrink:0;
}
.train-toggle.on { background:#f0b020; border-color:#f0b020; color:#2a1418; }
.train-toggle.on .train-chk { border-color:#2a1418; }
.train-toggle.beheerst.on { background:#22c55e; border-color:#22c55e; color:white; }
.train-toggle.beheerst.on .train-chk { border-color:white; }
.train-toggle.readonly { cursor:default; opacity:0.75; }
.train-toggle:disabled { cursor:default; }

.train-note-btn {
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; border:1.5px solid #e2e8f0;
  background:white; color:#9ca3af; cursor:pointer; transition:all 0.13s;
  flex-shrink:0;
}
.train-note-btn::after { content:''; position:absolute; inset:-3px; }
.train-note-btn:hover { background:#f0ebe5; color:#a83545; border-color:#a83545; }
.train-note-btn.has-note { border-color:#a83545; color:#a83545; }

.train-note-preview {
  margin-top:0.4rem; font-size:0.78rem; color:#6b7280; font-style:italic;
  line-height:1.35; padding-left:0.2rem; white-space:pre-wrap;
}

/* Notities-overzicht bovenaan een sectie */
.train-notes-summary {
  background:#fffbeb;
  border-left:3px solid #f59e0b;
  border-radius:0 6px 6px 0;
  margin:0.6rem 0 0.2rem;
  padding:0.5rem 0.75rem 0.3rem;
}
.train-notes-summary-title {
  display:flex; align-items:center; gap:0.3rem;
  font-size:0.72rem; font-weight:700; color:#92400e;
  text-transform:uppercase; letter-spacing:0.05em;
  margin-bottom:0.35rem;
}
.train-note-sum-item {
  display:flex; flex-direction:column; gap:0.1rem;
  padding:0.35rem 0;
  border-top:1px solid #fde68a;
  cursor:pointer;
}
.train-note-sum-item:first-of-type { border-top:none; }
.train-note-sum-naam {
  font-size:0.8rem; font-weight:600; color:#78350f;
}
.train-note-sum-text {
  font-size:0.78rem; color:#92400e; line-height:1.35;
  white-space:pre-wrap; word-break:break-word;
}
.train-note-sum-item:hover .train-note-sum-naam { text-decoration:underline; }
.train-afvink-btn {
  position:relative;
  flex-shrink:0; margin-top:0.1rem;
  width:22px; height:22px;
  border-radius:50%; border:1.5px solid #d97706;
  background:white; color:#d97706;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  transition:background 0.15s, color 0.15s;
}
.train-afvink-btn::after { content:''; position:absolute; inset:-11px; }
.train-afvink-btn:hover { background:#f59e0b; color:white; border-color:#f59e0b; }
.train-afvink-btn.is-on { background:#16a34a; border-color:#16a34a; color:white; }
.train-afvink-btn.is-on:hover { background:#dc2626; border-color:#dc2626; }
.train-afgevinkt-count {
  font-size:0.68rem; font-weight:600; color:#92400e;
  background:#fde68a; border-radius:99px;
  padding:0.05rem 0.5rem; margin-left:0.4rem;
  border:none; cursor:pointer; font-family:inherit;
}
.train-afgevinkt-count:hover { background:#fcd34d; }
/* Opgeloste notities standaard verborgen */
.train-note-sum-item.resolved { display:none; }
.train-notes-summary.show-resolved .train-note-sum-item.resolved {
  display:block; opacity:0.6;
}
.train-notes-summary.show-resolved .train-note-sum-item.resolved .train-note-sum-naam {
  text-decoration:line-through;
}
.train-note-preview.afgevinkt { opacity:0.5; text-decoration:line-through; }
.train-note-opgelost {
  font-size:0.72rem; font-weight:700; color:#16a34a;
  text-decoration:none; display:inline;
}

/* Donkere modus */
body.dark-mode .train-notes-summary { background:#2a2208; border-left-color:#d97706; }
body.dark-mode .train-notes-summary-title { color:#fbbf24; }
body.dark-mode .train-note-sum-item { border-top-color:#3d3000; }
body.dark-mode .train-note-sum-naam { color:#fde68a; }
body.dark-mode .train-note-sum-text { color:#fbbf24; }
body.dark-mode .train-afvink-btn { background:#2a2208; border-color:#d97706; color:#fbbf24; }
body.dark-mode .train-afvink-btn:hover { background:#d97706; color:#111; }
body.dark-mode .train-afgevinkt-count { background:#3d3000; color:#fde68a; }

body.dark-mode .train-section { background:#1e1e26; box-shadow:0 1px 6px rgba(0,0,0,0.25); }
body.dark-mode .train-section-head { border-bottom-color:#2c2c34; }
body.dark-mode .train-item { border-bottom-color:#2c2c34; }
body.dark-mode .train-item-naam { color:#f3f4f6; }
body.dark-mode .train-toggle { background:#2c2c34; border-color:#3d3d4d; color:#9ca3af; }
body.dark-mode .train-toggle.on { background:#d4981a; border-color:#d4981a; color:#111; }
body.dark-mode .train-toggle.beheerst.on { background:#16a34a; border-color:#16a34a; color:white; }
body.dark-mode .train-icon-btn { background:#2c2c34; color:#9ca3af; }
body.dark-mode .train-icon-btn:hover { background:#3d3d4d; color:#f3f4f6; }
body.dark-mode .train-note-btn { background:#2c2c34; border-color:#3d3d4d; color:#9ca3af; }
body.dark-mode .train-note-btn.has-note { border-color:#a83545; color:#e26272; }
body.dark-mode .train-user-chip { background:#2c2c34; border-color:#3d3d4d; color:#9ca3af; }
body.dark-mode .train-user-chip.on { background:#a83545; border-color:#a83545; color:white; }
body.dark-mode .train-progress-bar { background:#2c2c34; }
body.dark-mode .train-note-preview { color:#9ca3af; }

/* ── Privé-checklists (teamleider/admin) ────────────────────────── */
.mijn-cl-card { border-left:3px solid #3b82f6; }
.mijn-cl-owner { font-size:0.72rem; color:#6b7280; display:flex; align-items:center; gap:0.25rem; margin-top:2px; }
.mijn-cl-owner .ui-ico { width:12px; height:12px; }
body.dark-mode .mijn-cl-card { border-left-color:#2563eb; }

/* ── Filiaal-selector (chip-rij bovenaan pagina) ────────────────── */
.filiaal-selector-wrap {
  display:flex; flex-direction:column; gap:0.35rem;
  padding:0.65rem 1rem 0.55rem;
  background:var(--bg-card,#fff); border-bottom:2px solid #fca5a5;
}
.filiaal-sel-lbl {
  font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:#a83545;
}
.filiaal-selector {
  display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto;
  scrollbar-width:none;
}
.filiaal-selector::-webkit-scrollbar { display:none; }
.filiaal-chip {
  flex-shrink:0; font-size:0.78rem; font-weight:600;
  color:#6b7280; background:#f3f4f6; border:1px solid #e5e7eb;
  border-radius:99px; padding:4px 12px; cursor:pointer;
  white-space:nowrap; transition:background 0.15s,color 0.15s,border-color 0.15s;
}
.filiaal-chip.on {
  background:#a83545; color:#fff; border-color:#a83545;
}
body.dark-mode .filiaal-chip { background:#2c2c34; border-color:#3d3d4d; color:#9ca3af; }
body.dark-mode .filiaal-chip.on { background:#a83545; border-color:#a83545; color:#fff; }

/* ── Filiaal-beheer rijen (admin) ───────────────────────────────── */
.filiaal-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:0.5rem; padding:0.45rem 0; border-bottom:1px solid #f3f4f6;
}
.filiaal-row:last-child { border-bottom:none; }
.filiaal-row-info { flex:1; min-width:0; }
.filiaal-row-naam { font-size:0.88rem; font-weight:600; color:#1f2937; display:block; }
.filiaal-row-cnt { font-size:0.75rem; color:#9ca3af; }
.filiaal-row-cnt.pub { color:#059669; font-weight:600; }
.filiaal-row-btns { display:flex; gap:0.25rem; }
body.dark-mode .filiaal-row { border-color:#2c2c34; }
body.dark-mode .filiaal-row-naam { color:#e5e7eb; }

/* ── Filiaal-modal gebruikerslijst ──────────────────────────────── */
.fil-users-list {
  display:flex; flex-direction:column; gap:0.35rem;
  max-height:160px; overflow-y:auto; padding:0.4rem 0;
}
.fil-user-check {
  display:flex; align-items:center; gap:0.45rem;
  font-size:0.86rem; color:#374151; cursor:pointer;
  padding:0.2rem 0;
}
.fil-user-check input[type=checkbox] { width:16px; height:16px; accent-color:#a83545; flex-shrink:0; }
body.dark-mode .fil-user-check { color:#d1d5db; }

/* ── Tijdvak-tijden op de checklist-kaart ───────────────────────── */
.cl-card-slots { display:flex; flex-wrap:wrap; gap:5px; margin-top:0.4rem; }
.cl-slot-time {
  font-size:0.75rem; font-weight:700; letter-spacing:0.02em;
  color:#a83545; background:#fef2f2; border:1px solid #fca5a5;
  border-radius:99px; padding:2px 9px; white-space:nowrap;
}
body.dark-mode .cl-slot-time { background:#2c1518; border-color:#6b2535; color:#e26272; }
body.dark-mode .mijn-cl-owner { color:#9ca3af; }