/* ============ tasks.css — Tasks module + per-lead Activity component ============
   All classes are tk- prefixed. Existing app.css tokens only (no new colors invented).
   Matches web/js/tasks.js exactly. Two surfaces share this sheet:
     · the MODULE (#tasks) — filter chips + create form + a list grouped
       Overdue / Today / Upcoming / Done
     · CRMActivity — a compact per-lead panel mounted inside the leads drawer
   Calm, Apple-grade: soft rules, tabular numerals, quiet motion, clear overdue state. */

/* ===================================================================== *
 *  CRMActivity — per-lead panel (inside the leads drawer)
 * ===================================================================== */
.tk-panel{ display:flex; flex-direction:column; gap:11px; }

/* quick-add activity row: kind <select> + body <input> + Log */
.tk-qa{ display:flex; gap:7px; align-items:stretch; flex-wrap:wrap; }
.tk-qa__kind{ flex:none; width:130px; }
.tk-qa__body{ flex:1; min-width:150px; }
.tk-qa__go{ flex:none; }

/* ＋ Task toggle + mini-form */
.tk-taskbar{ display:flex; flex-direction:column; gap:8px; }
.tk-tasktoggle{ align-self:flex-start; }
.tk-taskform{ display:flex; gap:7px; align-items:stretch; flex-wrap:wrap;
  padding:11px 12px; background:var(--panel); border:1px dashed var(--rule); border-radius:var(--r-sm); }
.tk-tf__title{ flex:1; min-width:150px; }
.tk-tf__date{ flex:none; width:150px; }

/* activity timeline */
.tk-tl{ display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.tk-tl__load{ color:var(--mute); font-size:12.5px; padding:16px 4px; }
.tk-tl__empty{ text-align:center; color:var(--mute); padding:22px 16px; font-size:12.5px; }

/* one activity event — icon rail + body + meta */
.tk-ev{ display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); }
.tk-ev:last-child{ border-bottom:0; }
.tk-ev__ic{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--panel);
  border:1px solid var(--line); display:grid; place-items:center; font-size:13px; line-height:1; margin-top:1px; }
.tk-ev__main{ flex:1; min-width:0; }
.tk-ev__body{ font-size:13px; line-height:1.6; color:var(--ink); word-break:break-word; }
.tk-ev__body.ar{ direction:rtl; text-align:right; }
.tk-ev__meta{ margin-top:3px; font-size:11px; color:var(--mute); }
.tk-ev__kind{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--gold); }
.tk-ev__time{ font-family:var(--mono); font-size:10px; color:var(--faint); }

/* ===================================================================== *
 *  MODULE (#tasks) — chips · create form · grouped list
 * ===================================================================== */
.tk-m{ max-width:820px; }

/* filter chips */
.tk-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tk-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  padding:5px 13px; border-radius:20px; border:1px solid var(--rule); background:var(--paper);
  color:var(--body); cursor:pointer; transition:.12s; position:relative; }
.tk-chip:hover{ border-color:var(--gold); }
.tk-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* create-task form */
.tk-create{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:20px;
  padding:14px 16px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); }
.tk-create__title{ flex:1; min-width:220px; }
.tk-create__date{ flex:none; width:158px; }
.tk-create__lead{ flex:none; width:170px; }
.tk-create__who{ flex:none; min-width:170px; }
.tk-create__go{ flex:none; }

/* grouped list */
.tk-list{ display:flex; flex-direction:column; gap:22px; }
.tk-m__empty{ text-align:center; color:var(--mute); padding:50px 20px; font-size:13px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); }

.tk-sec__hd{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--mute);
  margin:0 0 10px; padding-bottom:7px; border-bottom:1px solid var(--line); }
.tk-sec--over .tk-sec__hd{ color:var(--red); }
.tk-sec--today .tk-sec__hd{ color:var(--gold-deep,#7d6428); }
.tk-sec--done .tk-sec__hd{ color:var(--faint); }
.tk-sec__n{ font-family:var(--mono); font-size:10px; font-weight:700; color:var(--body);
  background:var(--panel-2); border-radius:20px; padding:0 7px; line-height:16px; }

/* a task row — card, checkbox + title + meta */
.tk-t{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); margin-bottom:8px;
  transition:border-color .12s, opacity .18s; }
.tk-t:last-child{ margin-bottom:0; }
.tk-t:hover{ border-color:var(--rule); }
.tk-t.tk-t--over{ border-left:2.5px solid var(--red); }
.tk-t.tk-t--done{ opacity:.62; }

/* checkbox */
.tk-check{ flex:none; width:20px; height:20px; margin-top:1px; border-radius:6px; border:1.6px solid var(--rule);
  background:var(--paper); display:grid; place-items:center; padding:0; font-size:12px; line-height:1;
  color:transparent; transition:.12s; }
.tk-check:hover{ border-color:var(--gold); }
.tk-check.on{ background:var(--grn); border-color:var(--grn); color:#fff; }

.tk-t__main{ flex:1; min-width:0; }
.tk-t__title{ font-size:13.5px; color:var(--ink); font-weight:500; line-height:1.45; word-break:break-word; }
.tk-t--done .tk-t__title{ text-decoration:line-through; color:var(--mute); }
.tk-t__meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; font-size:11.5px; }

.tk-t__due{ font-family:var(--mono); font-size:11px; color:var(--body); }
.tk-t__due.over{ color:var(--red); font-weight:600; }
.tk-t__due--none{ color:var(--faint); }
.tk-t__lead{ font-family:var(--mono); font-size:10.5px; padding:1px 8px; border-radius:6px;
  background:var(--panel-2); color:var(--body); border:1px solid var(--line); transition:.12s; }
.tk-t__lead:hover{ border-color:var(--gold); color:var(--gold); }
.tk-t__who{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--mute); }
.tk-t__who::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold-2); flex:none; }