/* ===========================================
   TasksWidget: שכבת המשימות (06-07/09/2026)
   בורדו של ה-CRM (colors.css), גם בתוך מודול הוואטסאפ הירוק.
   נטען מ: /tasks/, /whatsapp/, /editing/
   =========================================== */

/* ---- גיליון (bottom sheet במובייל, מודל ממורכז בדסקטופ) ---- */
.tw-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(17, 24, 39, .42);
  display: flex; align-items: flex-end; justify-content: center;
  direction: rtl;
}
.tw-sheet {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-card, #fff); border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(16px + var(--safe-bottom));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
  font-family: 'Rubik', -apple-system, 'Segoe UI', Arial, sans-serif; font-size: 14px; color: var(--text-primary, #111827);
  animation: tw-rise .18s ease-out;
}
.tw-sheet * { box-sizing: border-box; }
@keyframes tw-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .tw-overlay { align-items: center; }
  .tw-sheet { border-radius: 18px; max-height: 88vh; padding: 10px 20px 18px; }
  .tw-grip { display: none; }
}
.tw-grip { width: 40px; height: 4px; border-radius: 2px; background: #d1d5db; margin: 0 auto 10px; }
.tw-h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.tw-h3 svg { color: var(--brand-primary, #95514f); flex: none; }
.tw-h3 .n { margin-inline-start: auto; font-size: 12px; color: var(--text-muted, #6b7280); font-weight: 400; }
.tw-sub { font-size: 13px; color: var(--text-secondary, #1f2937); margin: -4px 0 10px; }
.tw-label { display: block; font-size: 12px; color: var(--text-muted, #6b7280); margin: 12px 0 5px; font-weight: 500; }
.tw-title {
  width: 100%; border: 1.5px solid var(--brand-primary-light, #bd8e85); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: 16px; font-weight: 500; background: #fff; line-height: 1.35; resize: none; color: var(--text-primary, #111827);
}
/* 16px ומעלה בשדות: מתחת לזה iOS מגדיל את כל הדף (zoom) כשהשדה מקבל פוקוס */
.tw-title:focus { outline: none; border-color: var(--brand-primary, #95514f); }
.tw-quotes { display: grid; gap: 4px; margin-top: 8px; }
.tw-quote, .tw-mini {
  display: flex; gap: 8px; align-items: center; background: #f0f2f5; border-radius: 8px; padding: 5px 8px;
  font-size: 12.5px; color: var(--text-secondary, #1f2937); min-width: 0;
}
.tw-mini { background: #fff; border: 1px solid var(--brand-tint-border, #ebdeda); font-size: 12px; }
.tw-quote .bar, .tw-mini .bar { width: 3px; align-self: stretch; border-radius: 2px; background: #008069; flex: none; }
.tw-quote .txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tw-mini .txt { flex: 1; min-width: 0; line-height: 1.35; word-break: break-word; }
.tw-quote .thumb, .tw-mini .thumb { width: 44px; height: 32px; border-radius: 4px; object-fit: cover; background: #ddd6cf; flex: none; display: grid; place-items: center; color: var(--text-muted, #6b7280); cursor: zoom-in; }
.tw-quote .t, .tw-mini .t { font-size: 11px; color: var(--text-subtle, #9ca3af); font-variant-numeric: tabular-nums; flex: none; }
.tw-more { font-size: 12px; color: var(--text-muted, #6b7280); padding: 2px 4px; }
.tw-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tw-opt {
  border: 1px solid var(--border, #e5e7eb); background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px;
  color: var(--text-secondary, #1f2937); display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.tw-opt.on { border-color: var(--brand-primary, #95514f); background: var(--brand-tint-bg, #fdfaf9); color: var(--brand-primary-dark, #7a3f3d); font-weight: 500; }
.tw-dot { width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
.tw-dot.office, .tw-who.office { background: #dbeafe; color: #1e40af; }
.tw-dot.yossi, .tw-who.yossi { background: var(--status-red-bg, #fee2e2); color: var(--status-red-text, #991b1b); }
.tw-custom { margin-top: 8px; }
.tw-input { width: 100%; font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--brand-tint-border, #ebdeda); border-radius: 10px; background: #fff; direction: ltr; }
.tw-input:focus { outline: none; border-color: var(--brand-primary, #95514f); }
.tw-linked { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tw-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: 12px; border: 1px solid var(--border, #e5e7eb); background: #f9fafb; color: var(--text-secondary, #1f2937); }
.tw-chip svg { color: var(--brand-primary, #95514f); }
.tw-chip.stage { background: #f3e8ff; border-color: #e9d5ff; color: #6b21a8; }
.tw-btn-primary {
  margin-top: 14px; width: 100%; border: 0; border-radius: 12px; height: 46px; background: var(--brand-primary, #95514f); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
}
.tw-btn-primary:hover { background: var(--brand-primary-dark, #7a3f3d); }
.tw-btn-primary:disabled { opacity: .6; cursor: default; }
.tw-btn-ghost { margin-top: 6px; width: 100%; border: 0; background: transparent; color: var(--text-muted, #6b7280); font: inherit; font-size: 13.5px; padding: 10px; cursor: pointer; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tw-btn-ghost.tw-add { color: var(--brand-primary, #95514f); font-weight: 600; }
.tw-hint { text-align: center; color: var(--text-muted, #6b7280); font-size: 12px; margin-top: 7px; }
.tw-sheet-list { display: grid; gap: 6px; margin-top: 4px; }
.tw-loading, .tw-empty { font-size: 12.5px; color: var(--text-muted, #6b7280); padding: 8px 4px; }

/* ---- שורת משימה ---- */
.tw-task {
  background: var(--bg-card, #fff); border: 1px solid var(--brand-tint-border, #ebdeda); border-radius: 12px; padding: 9px 11px;
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; direction: rtl; position: relative;
}
.tw-task.expandable { cursor: pointer; }
.tw-task.open { border-color: var(--brand-primary-light, #bd8e85); background: var(--brand-tint-bg, #fdfaf9); }
.tw-task.compact { padding: 8px 10px; }
.tw-box {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--brand-primary-light, #bd8e85); background: #fff; margin-top: 2px; padding: 0;
  display: grid; place-items: center; cursor: pointer; color: #fff; flex: none;
}
.tw-box:hover { border-color: var(--brand-primary, #95514f); background: var(--brand-tint-bg, #fdfaf9); }
.tw-task.done .tw-box { background: var(--status-green-text, #065f46); border-color: var(--status-green-text, #065f46); }
.tw-task.done .t { color: var(--text-muted, #6b7280); text-decoration: line-through; }
.tw-body { min-width: 0; }
.tw-body .t { font-size: 14px; font-weight: 500; color: var(--text-primary, #111827); line-height: 1.35; word-break: break-word; }
.tw-task.compact .t { font-size: 13.5px; }
.tw-body .m { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 5px; font-size: 11.5px; color: var(--text-muted, #6b7280); align-items: center; }
.tw-body .src { display: inline-flex; align-items: center; gap: 4px; }
.tw-body .src svg { color: var(--brand-primary, #95514f); }
.tw-body .due { font-variant-numeric: tabular-nums; }
.tw-body .due.late { color: var(--status-red-text, #991b1b); font-weight: 600; }
.tw-body .n-msgs { color: var(--brand-primary-dark, #7a3f3d); font-weight: 500; }
.tw-body .req { display: inline-flex; align-items: center; border-radius: 999px; padding: 0 7px; font-size: 10.5px; font-weight: 600; }
.tw-body .req.from-yossi { background: var(--status-red-bg, #fee2e2); color: var(--status-red-text, #991b1b); }
.tw-body .req.from-office { background: #dbeafe; color: #1e40af; }
.tw-who { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; margin-top: 1px; }
.tw-detail { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 2px; }
.tw-minis { display: grid; gap: 6px; }
.tw-note { font-size: 12.5px; color: var(--text-secondary, #1f2937); background: #fff; border: 1px dashed var(--brand-tint-border, #ebdeda); border-radius: 8px; padding: 6px 8px; }
/* שורות נשמרות: משימת שיחה שהועברה למשרד מחזיקה את התמלול (tasks/js/calls-tab.js, 21/10/2026) */
.tw-note { white-space: pre-line; max-height: 320px; overflow-y: auto; word-break: break-word; }
.tw-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tw-act {
  border: 1px solid var(--brand-tint-border, #ebdeda); background: #fff; color: var(--brand-primary-dark, #7a3f3d); border-radius: 999px; padding: 5px 11px;
  font: inherit; font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; text-decoration: none;
}
.tw-act:hover { border-color: var(--brand-tint-border-hover, #d7bfb8); }
.tw-act.go { background: var(--brand-primary, #95514f); border-color: var(--brand-primary, #95514f); color: #fff; }
.tw-act.go:hover { background: var(--brand-primary-dark, #7a3f3d); }
.tw-act.danger { color: var(--status-red-text, #991b1b); margin-inline-start: auto; }

/* ---- וואטסאפ: סיכה באינבוקס, צ'יפ בכותרת, שורת מערכת ---- */
.tw-pin {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 7px;
  background: var(--brand-tint-bg, #fdfaf9); border: 1px solid var(--brand-primary-light, #bd8e85); color: var(--brand-primary-dark, #7a3f3d); white-space: nowrap;
}
.tw-pin svg { color: var(--brand-primary, #95514f); }
.tw-pin.late { background: var(--status-red-bg, #fee2e2); border-color: #fca5a5; color: var(--status-red-text, #991b1b); }
.tw-pin.late svg { color: var(--status-red-text, #991b1b); }
.tw-hchip {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; white-space: nowrap; cursor: pointer;
  background: var(--brand-tint-bg, #fdfaf9); border: 1px solid var(--brand-primary-light, #bd8e85); color: var(--brand-primary-dark, #7a3f3d); font-weight: 500;
}
.tw-hchip svg { color: var(--brand-primary, #95514f); }
.tw-hchip.empty { color: var(--text-subtle, #9ca3af); background: #f9fafb; border-color: var(--border, #e5e7eb); font-weight: 400; }
.tw-hchip.empty svg { color: var(--text-subtle, #9ca3af); }
.tw-hchip.late { background: var(--status-red-bg, #fee2e2); border-color: #fca5a5; color: var(--status-red-text, #991b1b); }
.tw-hchip.late svg { color: var(--status-red-text, #991b1b); }
.tw-sysline {
  align-self: center; max-width: 94%; margin: 4px auto; display: flex; align-items: flex-start; gap: 7px; cursor: pointer;
  background: var(--brand-tint-bg, #fdfaf9); border: 1px solid var(--brand-tint-border, #ebdeda); color: var(--brand-primary-dark, #7a3f3d);
  font-size: 12px; padding: 6px 10px; border-radius: 10px; line-height: 1.35; direction: rtl;
}
.tw-sysline svg { flex: none; margin-top: 2px; color: var(--brand-primary, #95514f); }
.tw-sysline .who { color: var(--text-muted, #6b7280); }
.tw-sysline.done { background: #f3f4f6; border-color: #e5e7eb; color: var(--text-muted, #6b7280); }
.tw-sysline.done svg { color: var(--status-green-text, #065f46); }

/* ---- בלוק "משימות פתוחות" (דף העריכה) ---- */
.tw-block { display: grid; gap: 8px; align-content: start; }
.tw-block-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--text-primary, #111827); cursor: pointer; user-select: none; -webkit-user-select: none; min-height: 30px; }
.tw-block-h svg { color: var(--brand-primary, #95514f); }
.tw-block-count { font-size: 11px; background: var(--brand-tint-bg, #fdfaf9); border: 1px solid var(--brand-tint-border, #ebdeda); color: var(--brand-primary-dark, #7a3f3d); border-radius: 999px; padding: 0 7px; font-weight: 600; }
.tw-block-count:empty { display: none; }
.tw-block-t { flex: 1; min-width: 0; }
.tw-block-none { font-size: 12.5px; font-weight: 500; color: var(--text-muted, #6b7280); }
.tw-block-chev { display: flex; flex: none; color: var(--text-muted, #6b7280); }
.tw-block-chev svg { color: inherit; }
.tw-block-h:hover .tw-block-chev { color: var(--brand-primary, #95514f); }
.tw-block-h:focus-visible { outline: 2px solid var(--brand-primary, #95514f); outline-offset: 3px; border-radius: 6px; }
.tw-block-body { display: grid; gap: 8px; }
.tw-block-body[hidden] { display: none; }
.tw-block-list { display: grid; gap: 6px; }
/* 09/09/2026: היה לינק טקסט ונראה כמו הערה ולא כמו פעולה. עכשיו כפתור משני
   בסגנון הבית (רקע כרטיס, מסגרת, hover שמכהה את המסגרת בלבד). 40 פיקסלים
   גובה כדי שיהיה נוח למגע בלי להתחרות במשימות עצמן. */
.tw-addlink {
  border: 1px solid var(--brand-tint-border, #ebdeda);
  background: var(--bg-card, #fff);
  color: var(--brand-primary, #95514f);
  font: inherit; font-weight: 600; font-size: 13.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; padding: 0 14px; min-height: 40px;
  border-radius: 9px; justify-self: start;
  transition: border-color 0.15s, background 0.15s;
}
.tw-addlink:hover { border-color: var(--brand-tint-border-hover, #d7bfb8); background: var(--brand-tint-bg, #fdfaf9); }
.tw-addlink:active { background: var(--brand-tint-border, #ebdeda); }