/* ══════════════════════════════════════════════════════════════════
   CHECKLISTS-PAGINA — stijlen specifiek voor de checklist-editor en
   -kaarten (type-selector, taak-rijen, mappen). Algemene, overal
   herbruikbare bouwstenen horen in componenten.css, niet hier.
   ══════════════════════════════════════════════════════════════════ */

/* Type-selector in checklist-editor (segmented chips) */
.type-chips { display:flex; gap:0.35rem; flex-wrap:wrap; margin:0.35rem 0 0.7rem; }
.type-chip {
  min-height:36px; padding:0.4rem 0.8rem; border-radius:9px;
  border:1.5px solid #e2e8f0; background:white;
  font-size:0.82rem; font-weight:600; color:#6b7280;
  font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.3rem;
  transition:all 0.12s;
}
.type-chip:active { transform:scale(0.97); }
.type-chip.on { background:#a83545; color:white; border-color:#a83545; box-shadow:0 2px 6px rgba(168,53,69,0.3); }
.type-chip.on.vul { background:#7d2f3d; border-color:#7d2f3d; }

/* Routine-chips: eigen kleur per moment van de dag, zodat je in één oogopslag ziet wat je kiest. */
.type-chip.routine { font-size:0.78rem; padding:0.35rem 0.65rem; }
.type-chip.routine.on.r-open    { background:#0f766e; border-color:#0f766e; box-shadow:0 2px 6px rgba(15,118,110,0.3); }
.type-chip.routine.on.r-ochtend { background:#f59e0b; border-color:#f59e0b; color:#2a1418; box-shadow:0 2px 6px rgba(245,158,11,0.3); }
.type-chip.routine.on.r-none    { background:#6b7280; border-color:#6b7280; }
.type-chip.routine.on.r-middag  { background:#d97706; border-color:#d97706; box-shadow:0 2px 6px rgba(217,119,6,0.3); }
.type-chip.routine.on.r-afsluit { background:#4338ca; border-color:#4338ca; box-shadow:0 2px 6px rgba(67,56,202,0.3); }

/* Routine-badge op checklist-kaart en dashboard-panels */
.routine-badge {
  display:inline-block; margin-left:0.35rem; padding:0.06rem 0.42rem;
  border-radius:99px; font-size:0.6rem; font-weight:800;
  vertical-align:middle; letter-spacing:0.02em;
}
.routine-badge.r-open    { background:#d1fae5; color:#065f46; }
.routine-badge.r-ochtend { background:#fef3c7; color:#92400e; }
.routine-badge.r-middag  { background:#ffedd5; color:#9a3412; }
.routine-badge.r-afsluit { background:#e0e7ff; color:#3730a3; }

/* Routine-sectie labels bínnen een map */
.routine-sep {
  font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em;
  padding:0.25rem 0.35rem 0.15rem; margin-top:0.25rem;
  color:#9ca3af;
  display:flex; align-items:center; gap:0.4rem;
}
.routine-sep::after { content:''; flex:1; height:1px; background:#e5e7eb; }
.routine-sep.r-open    { color:#065f46; }
.routine-sep.r-ochtend { color:#92400e; }
.routine-sep.r-middag  { color:#9a3412; }
.routine-sep.r-afsluit { color:#3730a3; }
.routine-sep.r-none, .routine-sep.r- { color:#9ca3af; }
.routine-sep:first-child { margin-top:0; }

/* ══════════════════════════════════════════════════════════════════
   CHECKLIST-MAPPEN + DUPLICATIE-ACTIE
   ══════════════════════════════════════════════════════════════════ */

/* Mapcontainer */
.cl-folder { margin-bottom:0.45rem; }
.cl-folder-head {
  display:flex; align-items:center; gap:0.4rem;
  padding:0.3rem 0.55rem;
  background:linear-gradient(180deg,#f8fafc,#eef1f6);
  border-radius:9px;
  cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
  border:1px solid #e6eaf0;
  margin-bottom:0.28rem;
}
.cl-folder-head:active { background:#eef1f6; }
.cl-folder-chev {
  font-size:0.72rem; color:#a83545; font-weight:800;
  transition:transform 0.18s ease;
  display:inline-block; width:12px; text-align:center;
}
.cl-folder.collapsed .cl-folder-chev { transform:rotate(-90deg); }
.cl-folder-icon { font-size:0.95rem; }
.cl-folder-name {
  flex:1; min-width:0; font-size:0.82rem; font-weight:800; color:#a83545;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cl-folder-count {
  font-size:0.65rem; font-weight:800; color:#6b7280;
  background:#fff; border:1px solid #e2e8f0;
  padding:0.08rem 0.42rem; border-radius:99px;
  flex-shrink:0;
}
.cl-folder-action {
  background:none; border:none; cursor:pointer;
  font-size:0.85rem; color:#6b7280; font-family:inherit;
  width:28px; height:28px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.cl-folder-action:active { background:#e2e8f0; transform:scale(0.92); }
.cl-folder-action.danger { color:#ef4444; }
.cl-folder-body {
  max-height:9999px; overflow:hidden;
  transition:max-height 0.28s ease;
}
.cl-folder.collapsed .cl-folder-body {
  max-height:0;
}

/* Folder-picker in editor (chips) */
.folder-chips { display:flex; gap:0.35rem; flex-wrap:wrap; margin:0.35rem 0 0.7rem; }
.folder-chip {
  min-height:34px; padding:0.35rem 0.7rem; border-radius:9px;
  border:1.5px solid #e2e8f0; background:white;
  font-size:0.8rem; font-weight:600; color:#6b7280;
  font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.3rem;
  transition:all 0.12s;
  -webkit-tap-highlight-color:transparent;
}
.folder-chip:active { transform:scale(0.97); }
.folder-chip.on { background:#a83545; color:white; border-color:#a83545; box-shadow:0 2px 6px rgba(168,53,69,0.3); }
.folder-chip.new-folder {
  border-style:dashed; color:#a83545; font-weight:700;
}
.folder-chip.new-folder:active { background:#f4ede3; }

/* Compactere actieknoppen zodat 4 knoppen (Fav, Kopie, Bewerk, Verwijder) passen */
.cl-card-btn.mini { padding:0.5rem 0.25rem; font-size:0.72rem; }
.cl-card-btn.mini .cbi { font-size:0.95rem; margin-right:0.2rem; }
@media (max-width:360px){
  .cl-card-btn.mini { font-size:0.68rem; padding:0.5rem 0.1rem; }
}

/* Folder-header primaire "+" knop krijgt goud-accent */
.cl-folder-action.primary {
  background:#f0b020; color:#2a1418; font-weight:900; font-size:1rem;
  box-shadow:0 2px 6px rgba(240,176,32,0.35);
}
.cl-folder-action.primary:active { background:#d99a10; transform:scale(0.92); }
.cl-folder-empty {
  padding:0.55rem 0.75rem; color:#9ca3af; font-size:0.76rem;
  background:#fafbfc; border-radius:10px; margin:0.05rem 0.1rem 0.25rem;
  border:1px dashed #e6eaf0;
}
.cl-folder-empty b { color:#a83545; }

/* Zoekveld boven checklist-lijst */
.cl-search-inp {
  flex:1; min-height:38px; padding:0.4rem 0.8rem;
  border:1.5px solid #e2e8f0; border-radius:10px;
  background:white; font-size:0.88rem; font-family:inherit; color:#2a1418;
  outline:none; transition:border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance:none; appearance:none;
}
.cl-search-inp:focus { box-shadow:0 0 0 3px rgba(168,53,69,0.12); }
.cl-search-inp:focus { border-color:#a83545; }
.cl-search-inp::-webkit-search-cancel-button { -webkit-appearance:none; }