/* ==========================================================================
   css/apps/checklist-docs-tasks.css
   Split from app.html (build 2026.10.08.9-beta), original lines 7980-8039.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* Checklist channel */
.cl-wrap { display:flex; flex-direction:column; height:100%; overflow:hidden; max-width:760px; width:100%; margin:0 auto; }
.cl-topbar { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cl-progress { width:140px; height:6px; border-radius:99px; background:var(--bg-elevated); overflow:hidden; }
.cl-progress-fill { height:100%; background:var(--accent); border-radius:99px; transition:width .2s; }
.cl-list { flex:1; overflow-y:auto; padding:8px 12px; }
.cl-item { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:9px; transition:background .12s; }
.cl-item:hover { background:var(--bg-hover); }
.cl-item:hover .cl-del { opacity:1; }
.cl-check { flex-shrink:0; width:22px; height:22px; border-radius:6px; border:2px solid var(--border-strong); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s,border-color .12s; }
.cl-check:disabled { cursor:default; }
.cl-item.done .cl-check { background:var(--accent); border-color:var(--accent); }
.cl-text { flex:1; font-size:14.5px; color:var(--text-primary); word-break:break-word; }
.cl-item.done .cl-text { color:var(--text-muted); text-decoration:line-through; }
.cl-del { flex-shrink:0; opacity:0; background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; border-radius:6px; display:flex; transition:opacity .12s,color .12s,background .12s; }
.cl-del:hover { color:var(--red,#ed4245); background:var(--bg-active); }
.cl-add { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); flex-shrink:0; }
.cl-add-input { flex:1; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:9px; padding:10px 14px; color:var(--text-primary); font-size:14px; outline:none; font-family:inherit; }
.cl-add-input:focus { border-color:var(--accent); }
.cl-add-btn { flex-shrink:0; width:40px; border-radius:9px; border:none; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cl-add-btn:hover { filter:brightness(1.1); }

/* Documents channel */
.doc-wrap { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.doc-editor { flex:1; width:100%; box-sizing:border-box; resize:none; border:none; outline:none;
  background:var(--bg-chat); color:var(--text-primary); font-family:var(--font-body,'DM Sans',sans-serif);
  font-size:15px; line-height:1.65; padding:22px 26px; overflow-y:auto; }
.doc-editor::placeholder { color:var(--text-muted); }
.doc-editor[readonly] { color:var(--text-secondary); }
.doc-foot { display:flex; align-items:center; justify-content:space-between; padding:6px 16px;
  border-top:1px solid var(--border); flex-shrink:0; font-size:11.5px; color:var(--text-muted); }
.doc-status { font-weight:600; }
.doc-count { font-variant-numeric:tabular-nums; }

/* Team Planner (tasks) board */
.tb-wrap { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.tb-topbar { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.tb-board { flex:1; display:flex; gap:14px; padding:16px; overflow-x:auto; overflow-y:hidden; align-items:flex-start; }
.tb-col { flex:1 1 0; min-width:240px; max-width:380px; display:flex; flex-direction:column; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; max-height:100%; transition:border-color .15s, background .15s; }
.tb-col.tb-over { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg-surface)); }
.tb-col-head { display:flex; align-items:center; gap:8px; padding:12px 14px 8px; font-size:13px; font-weight:700; color:var(--text-primary); }
.tb-col-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.tb-col-count { margin-left:auto; font-size:11px; font-weight:700; color:var(--text-muted); background:var(--bg-void); border-radius:999px; padding:1px 8px; }
.tb-cards { flex:1; overflow-y:auto; padding:4px 10px 10px; display:flex; flex-direction:column; gap:8px; min-height:24px; }
.tb-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:11px; padding:11px 12px; cursor:grab; transition:border-color .15s, transform .1s; }
.tb-card:hover { border-color:var(--accent); }
.tb-card:active { cursor:grabbing; }
.tb-card.tb-dragging { opacity:.45; }
.tb-card-title { font-size:13.5px; font-weight:600; color:var(--text-primary); line-height:1.35; word-break:break-word; }
.tb-card-desc { font-size:12px; color:var(--text-muted); line-height:1.45; margin-top:5px; white-space:pre-wrap; word-break:break-word; }
.tb-card-foot { display:flex; align-items:center; gap:7px; margin-top:9px; }
.tb-assignee { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); background:var(--bg-void); border-radius:999px; padding:2px 8px 2px 3px; max-width:100%; }
.tb-assignee img, .tb-assignee .tb-av { width:16px; height:16px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.tb-card-actions { margin-left:auto; display:flex; gap:4px; opacity:0; transition:opacity .12s; }
.tb-card:hover .tb-card-actions { opacity:1; }
.tb-icon-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:2px; border-radius:6px; display:flex; }
.tb-icon-btn:hover { color:var(--text-primary); background:var(--bg-void); }
.tb-add { margin:0 10px 10px; padding:7px; border:1px dashed var(--border-strong); border-radius:9px; background:transparent; color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; transition:color .15s, border-color .15s; }
.tb-add:hover { color:var(--text-primary); border-color:var(--accent); }
@media (max-width:640px){ .tb-board { gap:10px; padding:10px; } .tb-col { min-width:80vw; } }