/* ══════════════════════════════════════════════════════════════════
   VULAVOND — per-dag toggles op dashboard + type-selector in editor
   ══════════════════════════════════════════════════════════════════ */

/* Vulavond-rij op dashboard */
.vul-row {
  display:flex; align-items:center; gap:0.5rem;
  background:white; border-radius:14px; padding:0.45rem 0.7rem;
  margin-bottom:0.55rem;
  box-shadow:0 1px 2px rgba(0,0,0,0.035), 0 3px 10px rgba(0,0,0,0.025);
}
.vul-row-label { font-size:0.78rem; font-weight:800; color:#a83545; display:inline-flex; align-items:center; gap:0.35rem; flex-shrink:0; letter-spacing:-0.01em; }
.vul-pills { display:flex; gap:0.4rem; flex:1; justify-content:flex-end; flex-wrap:wrap; }
.vul-toggle { position:relative; display:inline-flex; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.vul-toggle input { position:absolute; opacity:0; width:0; height:0; }
.vul-pill {
  min-height:40px; padding:0.45rem 0.95rem; border-radius:99px;
  border:1.5px solid #e2e8f0; background:#fbf5eb;
  font-size:0.85rem; font-weight:700; color:#6b7280;
  display:inline-flex; align-items:center; gap:0.3rem;
  transition:background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.08s;
}
.vul-toggle input:checked + .vul-pill {
  background:#a83545; color:white; border-color:#a83545;
  box-shadow:0 2px 8px rgba(168,53,69,0.35);
}
.vul-toggle:active .vul-pill { transform:scale(0.94); }
.vul-pill::before {
  content:''; display:inline-block;
  width:14px; height:14px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>") center/contain no-repeat;
  opacity:0.7;
}
.vul-toggle input:checked + .vul-pill::before { opacity:1; }

/* Vulavond-badge op checklist-kaart en dashboard-panel */
.vul-badge {
  display:inline-flex; align-items:center; gap:0.25rem;
  padding:0.12rem 0.5rem; border-radius:99px;
  background:#f4e2e5; color:#7d2f3d;
  font-size:0.68rem; font-weight:700; margin-left:0.35rem;
  vertical-align:middle; white-space:nowrap;
}
.vul-badge::before {
  content:''; display:inline-block;
  width:11px; height:11px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>") center/contain no-repeat;
}

/* ══════════════════════════════════════════════════════════════════
   INKLAPPEN — tijdvak / hele checklist wanneer afgevinkt
   ══════════════════════════════════════════════════════════════════ */

/* Tijdvak-label: klikbaar, chevron, "klaar"-state */
.time-group-label {
  cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:0.5rem;
  padding-right:0.1rem;
}
.tg-meta { font-size:0.72rem; font-weight:600; color:#9ca3af; margin-left:auto; }
.tg-chev { font-size:0.85em; color:#9ca3af; transition:transform 0.25s; display:inline-block; width:14px; text-align:center; }
.time-group.collapsed .tg-chev { transform:rotate(-90deg); }
.time-group.all-done .time-group-label { color:#065f46; }
.time-group.all-done .time-group-label::before { content:'\2713'; color:#10b981; font-weight:800; margin-right:0.1rem; }
.time-group.all-done .tg-meta { color:#10b981; }

/* Tijdvak-body animeert met max-height */
.tg-body { max-height:2000px; overflow:hidden; transition:max-height 0.28s ease, opacity 0.18s ease; opacity:1; }
.time-group.collapsed .tg-body { max-height:0; opacity:0; }

/* Hele checklist klaar → body inklappen, header blijft, tap om uit te klappen */
.dash-panel.all-done { background:linear-gradient(to bottom, #ecfdf5, white 60%); }
.dash-panel.all-done .dash-panel-header { cursor:pointer; }
.dash-panel.all-done .dash-panel-title { color:#065f46; }
.dash-panel.all-done .dash-panel-title::before { content:'\2713 '; color:#10b981; font-weight:800; }
.dash-panel.all-done .fav-panel-body { display:none; }
.dash-panel.all-done.expanded-override .fav-panel-body { display:block; }
.all-done-hint {
  font-size:0.72rem; color:#065f46; font-weight:700;
  padding:0 0.9rem 0.65rem; display:none;
}
.dash-panel.all-done .all-done-hint { display:block; }
.dash-panel.all-done.expanded-override .all-done-hint { display:none; }

/* Subtiele "pulse" op de panel-header wanneer je net de laatste tikt */
@keyframes donePulse {
  0% { box-shadow:0 0 0 0 rgba(16,185,129,0.4); }
  100% { box-shadow:0 0 0 12px rgba(16,185,129,0); }
}
.dash-panel.all-done { animation:donePulse 0.6s ease-out; }