/* ══════════════════════════════════════════════════════════════════
   COMPONENTEN — generieke, herbruikbare UI-bouwstenen die op meerdere
   pagina's terugkomen: chips, toggles, badges, kaarten, knoppen. Geen
   pagina- of feature-specifieke stijlen hier (die horen in hun eigen
   file, bv. checklists.css/tijdvakken.css) — wél dingen als "hoe ziet
   een chip eruit", ongeacht waar hij gebruikt wordt.
   ══════════════════════════════════════════════════════════════════ */

/* WEEKDAG CHIPS in editor */
.weekday-chips { display:flex; gap:0.3rem; flex-wrap:wrap; margin:0.4rem 0 0.7rem; }
.wd-chip { padding:0.25rem 0.5rem; border-radius:8px; border:1.5px solid #e2e8f0; background:white; font-size:0.76rem; font-weight:700; cursor:pointer; font-family:inherit; color:#6b7280; min-width:34px; text-align:center; }
.wd-chip.on { background:#a83545; color:white; border-color:#a83545; }

/* Weekdag badge op checklist-kaart */
.wd-badges { display:flex; gap:0.15rem; flex-wrap:wrap; margin-top:0.22rem; }
.wd-badge { font-size:0.58rem; font-weight:700; padding:0.04rem 0.3rem; border-radius:4px; background:#f4ede3; color:#6b7280; }
.wd-badge.active { background:#f8e0e4; color:#a83545; }

/* FAVORIETE CHECKLIST */
.fav-panel-body { padding:0.55rem 0.8rem 0.65rem; }
.fav-empty { text-align:center; padding:1.1rem 0.75rem; color:#9ca3af; font-size:0.82rem; }

/* TIJDVAKKEN */
.time-group-label { font-size:0.85rem; font-weight:800; color:#a83545; padding:0.35rem 0 0.1rem; border-top:1px solid #f4ede3; margin-top:0.2rem; }
.time-group:first-child .time-group-label { border-top:none; margin-top:0; }
.task-row { display:flex; align-items:center; gap:0.6rem; padding:0.3rem 0; cursor:pointer; user-select:none; }
.task-check { width:18px; height:18px; border-radius:5px; border:2px solid #d1d5db; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.7rem; color:white; transition:all 0.15s; }
.task-row.done .task-check { background:#10b981; border-color:#10b981; }
.task-row.done .task-text-s { text-decoration:line-through; color:#9ca3af; }
.task-text-s { flex:1; font-size:0.8rem; line-height:1.3; }
.prog-bar-wrap { background:#eef1f5; border-radius:99px; height:5px; margin-bottom:0.4rem; overflow:hidden; }
.prog-bar-fill { height:100%; background:linear-gradient(90deg,#10b981,#34d399); border-radius:99px; transition:width 0.4s; }
.prog-label-s { font-size:0.7rem; color:#9ca3af; display:flex; justify-content:space-between; margin-bottom:0.22rem; }

/* INLINE NOTITIES OP DASHBOARD */
.dash-note-inline { border-bottom:1px solid #f4ede3; padding:0.6rem 0.85rem; }
.dash-note-inline:last-child { border-bottom:none; }
.dash-note-inline.is-done { opacity:0.45; }
.dni-title { font-weight:700; font-size:0.82rem; display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; margin-bottom:0.15rem; }
.dni-meta { font-size:0.68rem; color:#9ca3af; margin-bottom:0.25rem; }
.dni-body { font-size:0.76rem; color:#6b7280; line-height:1.45; margin-bottom:0.35rem; }
.dni-actions { display:flex; gap:0.35rem; }
.dni-btn { padding:0.25rem 0.6rem; border-radius:6px; border:1px solid #e2e8f0; background:white; font-size:0.7rem; font-weight:600; cursor:pointer; font-family:inherit; color:#6b7280; }
.dni-btn:hover { background:#fbf5eb; }
.dni-btn.r { border-color:#f2c7cf; background:#fbeef1; color:#a83545; }
.dni-btn.d { border-color:#a7f3d0; background:#ecfdf5; color:#059669; }

/* STATUS BADGES */
.status-badge { display:inline-block; padding:0.12rem 0.45rem; border-radius:99px; font-size:0.68rem; font-weight:700; }
.badge-unread { background:#fbeef1; color:#a83545; }
.badge-read { background:#fef3c7; color:#8a5a10; }
.badge-done { background:#ecfdf5; color:#065f46; }

/* KAARTEN */
.card { background:white; border-radius:14px; padding:0.85rem 1rem; box-shadow:0 1px 6px rgba(0,0,0,0.07); margin-bottom:0.6rem; }

/* CHECKLISTS PAGINA */
.cl-card { background:white; border-radius:11px; box-shadow:0 1px 5px rgba(0,0,0,0.06); margin-bottom:0.4rem; overflow:hidden; cursor:pointer; }
.cl-card-top { display:flex; align-items:center; gap:0.55rem; padding:0.45rem 0.7rem; }
.cl-card-icon { font-size:1.1rem; }
.cl-card-name { font-weight:700; font-size:0.85rem; }
.cl-card-meta { font-size:0.66rem; color:#9ca3af; margin-top:1px; }
.cl-card-chev { color:#c4c4c4; margin-left:0.4rem; font-size:1.2rem; line-height:1; display:inline-block; flex-shrink:0; transition:transform 0.15s ease, color 0.15s ease; }
.cl-card:hover .cl-card-chev, .cl-card:active .cl-card-chev { color:#a83545; transform:translateX(2px); }
.cl-card-body { padding:0 0.7rem 0.45rem; }
.cl-card-body .wd-badges { margin-top:0; margin-bottom:0.3rem; }
.cl-card-body .cl-card-meta { margin-bottom:0.35rem; }
.cl-card-body .prog-bar-wrap { margin:0; height:3px; }
.cl-card-actions { display:flex; border-top:1px solid #f4ede3; }
.cl-card-btn { flex:1; padding:0.38rem; border:none; background:none; cursor:pointer; font-size:0.72rem; font-weight:600; font-family:inherit; color:#6b7280; }
.cl-card-btn:hover { background:#fbf5eb; }
.cl-card-btn + .cl-card-btn { border-left:1px solid #f4ede3; }
.cl-card-btn.danger { color:#ef4444; }
.cl-card-btn.star { color:#f59e0b; }
.cl-card-icons { display:flex; gap:0.08rem; flex-shrink:0; margin-left:0.2rem; }
.cl-ico-btn { width:28px; height:28px; border-radius:8px; border:none; background:none; cursor:pointer; font-size:0.92rem; color:#6b7280; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background 0.15s ease, color 0.15s ease; }
.cl-ico-btn:hover { background:#fbf5eb; }
.cl-ico-btn:active { background:#f4ede3; }
.cl-ico-btn.star { color:#9ca3af; }
.cl-ico-btn.star.on { color:#f59e0b; }
.cl-ico-btn.danger { color:#ef4444; }
.cl-ico-btn.danger:hover { background:#fef2f2; }
.cl-svg-ico { width:16px; height:16px; display:block; }
.ui-ico { width:16px; height:16px; display:inline-block; vertical-align:middle; flex-shrink:0; }
.ui-ico-sm { width:14px; height:14px; }
.ui-ico-md { width:18px; height:18px; }
.ui-ico-lg { width:20px; height:20px; }
.ui-ico-xl { width:22px; height:22px; }
.ui-ico-xxl { width:32px; height:32px; }
/* Iconen in specifieke containers */
.task-check .ui-ico, .task-check-lg .ui-ico { stroke:white; }
.drag-handle { color:#c4c4c4; display:inline-flex; align-items:center; }
.drag-handle .ui-ico { width:12px; height:18px; }
.task-move-btn { display:inline-flex; align-items:center; justify-content:center; }
.task-move-btn .ui-ico { width:14px; height:14px; }
.inbox-act-btn { display:inline-flex; align-items:center; gap:0.35rem; justify-content:center; }
.user-card-btn { display:inline-flex; align-items:center; gap:0.35rem; justify-content:center; }
.fav-option-check { color:#10b981; display:inline-flex; align-items:center; }
.cl-folder-action .ui-ico { width:16px; height:16px; }
.type-chip.routine { display:inline-flex; align-items:center; gap:0.3rem; }
.type-chip.routine .ui-ico { width:14px; height:14px; }
.folder-chip { display:inline-flex; align-items:center; gap:0.3rem; }
.folder-chip .ui-ico { width:14px; height:14px; }
.dash-panel-action { color:#d1d5db; display:inline-flex; align-items:center; justify-content:center; }
.dash-panel-action.fav-on { color:#f59e0b; }
.btn-sm { display:inline-flex; align-items:center; gap:0.35rem; justify-content:center; }
.btn-sm .ui-ico { width:14px; height:14px; }
.dropdown-item .di { display:inline-flex; align-items:center; justify-content:center; }
.nav-tab .ni .ui-ico { width:18px; height:18px; }
.cl-card-icon { display:inline-flex; align-items:center; justify-content:center; color:#6b7280; }
.cl-card-icon .ui-ico { width:18px; height:18px; }
.cl-ico-wrap { display:inline-flex; align-items:center; vertical-align:middle; color:#6b7280; margin-right:0.25rem; }
.cl-ico-wrap .ui-ico { width:18px; height:18px; }
.dash-panel-title { display:inline-flex; align-items:center; gap:0.1rem; }
.icon-chip { display:inline-flex; align-items:center; justify-content:center; min-width:42px; }
.icon-chip .ui-ico { width:18px; height:18px; }
.icon-chip.on { background:#a83545; border-color:#a83545; color:white; }
.fav-option .cl-ico-wrap { color:#6b7280; }

/* TIJDVAKKEN IN DETAIL */
.time-group-label-lg { font-size:1rem; font-weight:800; color:#a83545; padding:0.5rem 0 0.2rem; border-top:1px solid #f4ede3; margin-top:0.2rem; }
.time-group:first-child .time-group-label-lg { border-top:none; margin-top:0; }
.task-row-lg { display:flex; align-items:center; gap:0.7rem; padding:0.45rem 0; cursor:pointer; user-select:none; }
.task-check-lg { width:22px; height:22px; border-radius:6px; border:2px solid #d1d5db; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.8rem; color:white; transition:all 0.15s; }
.task-row-lg.done .task-check-lg { background:#10b981; border-color:#10b981; }
.task-row-lg.done .task-text-lg { text-decoration:line-through; color:#9ca3af; }
.task-text-lg { flex:1; font-size:0.92rem; }

/* NOTITIES */
.note-card { background:white; border-radius:12px; padding:0.7rem 0.95rem; box-shadow:0 1px 6px rgba(0,0,0,0.07); margin-bottom:0.5rem; border-left:4px solid #a83545; cursor:pointer; position:relative; padding-right:2.3rem; }
.note-card.mine { border-left-color:#f0b020; }
.note-card.note-done { opacity:0.5; }
.note-card-title { font-weight:700; font-size:0.88rem; padding-right:0.2rem; }
.note-card-preview { font-size:0.8rem; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.note-card-foot { display:flex; justify-content:space-between; margin-top:0.4rem; font-size:0.72rem; color:#9ca3af; }
.note-card-del {
  position:absolute; top:0.4rem; right:0.4rem;
  width:28px; height:28px; border-radius:8px;
  background:transparent; border:none; color:#9ca3af;
  font-size:0.9rem; font-weight:700; font-family:inherit;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background 0.12s, color 0.12s, transform 0.08s;
  -webkit-tap-highlight-color:transparent; line-height:1;
}
.note-card-del:hover { background:#fbeef1; color:#a83545; }
.note-card-del:active { transform:scale(0.88); background:#f4c7cf; color:#8a2838; }

/* GEBRUIKERS */
.user-card { background:white; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,0.07); margin-bottom:0.5rem; overflow:hidden; }
.user-card-top { display:flex; align-items:center; gap:0.75rem; padding:0.7rem 0.9rem; }
.user-avatar { width:38px; height:38px; border-radius:50%; background:#a83545; color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.88rem; flex-shrink:0; }
.user-avatar.adm { background:#f0b020; color:#2a1418; }
.user-name { font-weight:700; font-size:0.95rem; }
.user-meta { font-size:0.78rem; color:#9ca3af; margin-top:2px; }
.role-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:99px; font-size:0.7rem; font-weight:700; margin-left:0.4rem; }
.role-admin { background:#fef3c7; color:#92400e; }
.role-teamleider { background:#dbeafe; color:#1e40af; }
.role-user { background:#f4ede3; color:#6b7280; }
.user-card-actions { display:flex; border-top:1px solid #f4ede3; }
.user-card-btn { flex:1; padding:0.55rem; border:none; background:none; cursor:pointer; font-size:0.75rem; font-weight:600; font-family:inherit; color:#6b7280; }
.user-card-btn:hover { background:#fbf5eb; }
.user-card-btn + .user-card-btn { border-left:1px solid #f4ede3; }
.user-card-btn.danger { color:#ef4444; }

/* OVERLAYS */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:200; align-items:flex-end; justify-content:center; }
.overlay.open { display:flex; }
.modal { background:white; border-radius:18px 18px 0 0; padding:1rem 1rem 1.5rem; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; }
/* Scrollbar netjes onder de afgeronde hoek laten beginnen, anders 'verstoort'
   de track-rechthoek de afgeronde top-rechter hoek visueel. */
.modal { scrollbar-gutter: stable; }
.modal::-webkit-scrollbar { width:8px; }
.modal::-webkit-scrollbar-track { background:transparent; margin-top:18px; margin-bottom:18px; }
.modal::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.18); border-radius:99px; }
.modal::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.28); }
.modal { scrollbar-color: rgba(0,0,0,0.25) transparent; scrollbar-width: thin; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; }
.modal-head h3 { font-size:1.02rem; font-weight:700; color:#a83545; letter-spacing:-0.01em; }
.btn-close { background:none; border:none; font-size:1.3rem; cursor:pointer; color:#9ca3af; }
.modal .lbl { margin-top:0.7rem; }
.modal .inp { margin-bottom:0; }

/* DATE NAV */
.date-lbl { font-weight:700; color:#a83545; font-size:0.9rem; }

/* PROG BAR LARGE */
.prog-bar-wrap-lg { background:#eef1f5; border-radius:99px; height:7px; margin-bottom:0.6rem; overflow:hidden; }
.prog-bar-fill-lg { height:100%; background:linear-gradient(90deg,#10b981,#34d399); border-radius:99px; transition:width 0.4s; }
.prog-label-lg { font-size:0.76rem; color:#9ca3af; margin-bottom:0.3rem; display:flex; justify-content:space-between; }

/* TIMESLOT EDITOR */
.timeslot-list { margin:0.6rem 0; }
.timeslot-block { background:#fbf5eb; border-radius:10px; padding:0.7rem 0.85rem; margin-bottom:0.5rem; border:1px solid #e2e8f0; transition:box-shadow 0.15s; }
.timeslot-block.drag-over { box-shadow:0 0 0 2px #a83545; background:#f0f4f8; }
.timeslot-header { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.6rem; }
.timeslot-time-inp { width:78px; padding:0.5rem 0.5rem; border:1.5px solid #e2e8f0; border-radius:7px; font-size:1.05rem; font-weight:700; font-family:inherit; color:#a83545; background:white; text-align:center; font-variant-numeric:tabular-nums; letter-spacing:0.02em; }
.timeslot-time-inp:focus { outline:none; border-color:#a83545; }
.timeslot-time-inp.invalid { border-color:#ef4444; background:#fef2f2; }
.timeslot-label { font-size:0.82rem; font-weight:600; color:#6b7280; flex:1; }
.btn-icon { background:none; border:none; cursor:pointer; font-size:1rem; color:#9ca3af; padding:0.2rem; border-radius:5px; display:inline-flex; align-items:center; justify-content:center; }
.btn-icon .ui-ico { width:16px; height:16px; }
.btn-icon.rm-slot { width:32px; height:32px; border-radius:8px; color:#ef4444; transition:background 0.12s ease; }
.btn-icon.rm-slot:hover { background:#fef2f2; }
.btn-icon:hover { background:#e2e8f0; }
.task-inp-row { display:flex; gap:0.4rem; margin-bottom:0.4rem; align-items:center; cursor:grab; border-radius:8px; padding:1px; transition:background 0.12s; }
.task-inp-row:active { cursor:grabbing; }
.task-inp-row.dragging { opacity:0.4; }
.task-inp-row.drop-above { border-top:2px solid #a83545; }
.task-inp-row.drop-below { border-bottom:2px solid #a83545; }
.drag-handle { color:#cbd5e1; cursor:grab; padding:0 2px; flex-shrink:0; user-select:none; display:inline-flex; align-items:center; justify-content:center; }
.drag-handle:active { cursor:grabbing; }
.task-inp-row input { flex:1; padding:0.5rem 0.75rem; border:1.5px solid #e2e8f0; border-radius:8px; font-size:0.92rem; font-family:inherit; color:#2a1418; cursor:text; background:white; transition:border-color 0.15s, box-shadow 0.15s; }
.task-inp-row input:focus { outline:none; border-color:#a83545; box-shadow:0 0 0 3px rgba(168,53,69,0.12); }
.task-move-btn, .task-del-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex-shrink:0;
  border-radius:8px; border:1px solid #e2e8f0; background:white;
  cursor:pointer; padding:0; font-family:inherit;
  transition:background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.task-move-btn { color:#6b7280; }
.task-move-btn:hover { background:#f4ede3; border-color:#d1d5db; color:#2a1418; }
.task-del-btn { color:#ef4444; border-color:#fecaca; background:#fef2f2; }
.task-del-btn:hover { background:#fee2e2; border-color:#fca5a5; }
.task-move-btn .ui-ico, .task-del-btn .ui-ico { width:16px; height:16px; }
.btn-add-timeslot { width:100%; padding:0.55rem; background:none; border:1.5px dashed #d1d5db; border-radius:10px; font-size:0.85rem; color:#6b7280; cursor:pointer; font-family:inherit; margin-bottom:0.75rem; }
.btn-add-timeslot:hover { border-color:#a83545; color:#a83545; }
.btn-add-task { background:none; border:1.5px dashed #d1d5db; border-radius:7px; padding:0.38rem 0.65rem; font-size:0.82rem; color:#6b7280; cursor:pointer; font-family:inherit; margin-top:0.25rem; }
.btn-add-task:hover { border-color:#a83545; color:#a83545; }

/* AUTOSAVE */
#autosaveStatus { font-size:0.72rem; color:#9ca3af; }

/* CHIPS */
.chips { display:flex; flex-wrap:wrap; gap:0.35rem; margin:0.45rem 0 0.65rem; }
.chip { padding:0.3rem 0.75rem; border-radius:99px; border:1.5px solid #e2e8f0; background:white; font-size:0.9rem; cursor:pointer; font-family:inherit; color:#6b7280; line-height:1.35; }
.chip.on { background:#a83545; color:white; border-color:#a83545; }

/* BUTTONS */
.btn-row { display:flex; gap:0.45rem; flex-wrap:wrap; margin-bottom:0.6rem; }
.btn-sm { padding:0.4rem 0.85rem; border-radius:8px; border:none; font-size:0.82rem; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-blue { background:#a83545; color:white; }
.btn-blue:hover { background:#c44a5c; }
.btn-gold { background:linear-gradient(180deg,#f5bc34,#e9a51a); color:#2a1418; box-shadow:0 1px 2px rgba(240,176,32,0.35); }
.btn-gold:hover { background:linear-gradient(180deg,#edaa18,#d49410); }
.btn-outline { background:white; color:#a83545; border:1.5px solid #a83545 !important; }
.btn-save { display:block; width:100%; padding:0.75rem; background:#a83545; color:white; border:none; border-radius:10px; font-size:1rem; font-weight:600; cursor:pointer; font-family:inherit; margin-top:0.85rem; }
.btn-save:hover { background:#c44a5c; }
.btn-save.gold { background:linear-gradient(180deg,#f5bc34,#e9a51a); color:#2a1418; box-shadow:0 2px 8px rgba(240,176,32,0.35); }
.btn-save.gold:hover { background:linear-gradient(180deg,#edaa18,#d49410); }

/* TOGGLE */
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0; border-top:1px solid #f4ede3; margin-top:0.75rem; }
.toggle-row-label { font-size:0.9rem; font-weight:600; color:#2a1418; }
.toggle-row-sub { font-size:0.75rem; color:#9ca3af; margin-top:1px; }
.toggle { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#d1d5db; border-radius:99px; cursor:pointer; transition:0.2s; }
.toggle-slider:before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:white; border-radius:50%; transition:0.2s; }
.toggle input:checked + .toggle-slider { background:#a83545; }
.toggle input:checked + .toggle-slider:before { transform:translateX(20px); }

/* BACKUP-LIJST (beheerscherm) */
.backup-list { display:flex; flex-direction:column; gap:0.35rem; max-height:220px; overflow-y:auto; }
.backup-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.4rem 0.6rem; background:#f9fafb; border-radius:8px; font-size:0.8rem; }

/* FAV PICKER */
.fav-option { display:flex; align-items:center; gap:0.85rem; padding:0.85rem 0.5rem; border-bottom:1px solid #f4ede3; cursor:pointer; border-radius:8px; }
.fav-option:last-child { border-bottom:none; }
.fav-option:hover { background:#fbf5eb; }
.fav-option-check { color:#10b981; }

/* EMPTY */
.empty-state { text-align:center; padding:1.35rem 0.85rem; color:#9ca3af; }
.empty-state .ei { font-size:1.95rem; margin-bottom:0.45rem; }
.empty-state p { font-size:0.86rem; }

/* INFO BOX */
.info-box { background:#fbeef1; border:1px solid #f2c7cf; border-radius:10px; padding:0.55rem 0.85rem; font-size:0.8rem; color:#8e2838; margin-bottom:0.6rem; }

/* NOTE FULL */
.note-full-body { font-size:0.95rem; line-height:1.75; white-space:pre-wrap; color:#2a1418; }
.note-full-meta { font-size:0.78rem; color:#9ca3af; margin-top:1rem; padding-top:1rem; border-top:1px solid #f4ede3; }

/* CELEBRATION OVERLAY */
#ovCelebration {
  position:fixed; inset:0; z-index:700;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.62);
}
#ovCelebration.open { display:flex; }
.celebration-card {
  background:white; border-radius:22px;
  padding:2rem 2rem 1.5rem;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
  animation:celebPop 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
  position:relative; overflow:hidden;
  max-width:260px; width:90%;
}
.celebration-emoji {
  font-size:3.2rem;
  animation:celebBounce 0.5s ease-out 0.1s both;
  display:block; margin-bottom:0.5rem;
}
.celebration-title {
  font-size:1.7rem; font-weight:800; color:#a83545; letter-spacing:-0.02em; margin-bottom:0.15rem;
}
.celebration-name {
  font-size:0.82rem; color:#6b7280; margin-bottom:0.75rem; min-height:1.1em;
}
.celebration-hint {
  font-size:0.65rem; color:#c4c4c4; text-transform:uppercase; letter-spacing:0.06em;
}
.confetti-wrap {
  position:absolute; top:0; left:0; right:0; height:100%; pointer-events:none; overflow:hidden;
}
.confetti-piece {
  position:absolute; top:-12px; border-radius:2px;
  animation:confettiFall linear forwards;
}
@keyframes celebPop {
  0% { transform:scale(0.4); opacity:0; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes celebBounce {
  0% { transform:scale(0) rotate(-30deg); }
  60% { transform:scale(1.3) rotate(10deg); }
  100% { transform:scale(1) rotate(0deg); }
}
@keyframes confettiFall {
  0% { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(320px) rotate(540deg); opacity:0; }
}


/* ── Winkeltijden-balk (dashboard + vandaag) ─────────────────────────────── */
.winkeltijden-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 5px;
  padding: 6px 0.9rem;
  background: #fff7f7;
  border-bottom: 1px solid #fce8e8;
  font-size: 0.8rem;
}
.wt-lbl {
  color: #9ca3af;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wt-inp {
  width: 100%;
  min-width: 0;
  border: 1.5px solid #f3cece;
  border-radius: 7px;
  padding: 4px 2px;
  font-size: 0.82rem;
  text-align: center;
  font-family: inherit;
  background: #fff;
  color: #2a1418;
  box-sizing: border-box;
}
.wt-inp:focus { border-color: #a83545; outline: none; }
.wt-val {
  font-size: 0.82rem;
  color: #2a1418;
  font-variant-numeric: tabular-nums;
}
.wt-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 9px; border: none; cursor: pointer;
  background: #f4ede3; color: #a83545; flex-shrink: 0;
  transition: background 0.12s;
}
.wt-edit-btn:active { background: #f0d4d9; }
.wt-save-btn { background: #d1fae5; color: #065f46; }
.wt-save-btn:active { background: #a7f3d0; }

/* ── Relatief tijdvak — editor ───────────────────────────────────────────── */
.slot-rel-btn {
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ca3af;
  background: none;
  border: 1.5px solid #e5e7eb;
  border-radius: 99px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 2px;
  font-family: inherit;
  flex-shrink: 0;
  line-height: 1.4;
}
.slot-rel-btn.active { color: #a83545; border-color: #a83545; background: #fef2f2; }
.ts-rel-wrap { display: flex; align-items: center; gap: 4px; }
.ts-abs-wrap { display: flex; align-items: center; }
.slot-rel-inp {
  width: 3rem;
  border: 1.5px solid #f3cece;
  border-radius: 7px;
  padding: 3px 5px;
  font-size: 0.85rem;
  text-align: center;
  font-family: inherit;
  background: #fff;
}
.ts-rel-lbl { font-size: 0.75rem; color: #6b7280; white-space: nowrap; }

/* ── Relatief tijdvak — weergave (dashboard/vandaag/detail) ─────────────── */
.rel-time { font-weight: 700; }
.rel-badge {
  display: inline-block;
  background: #fef2f2;
  color: #a83545;
  border: 1px solid #fca5a5;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}