/* Màn Việc cần làm (đợt 5): KPI hôm nay, tồn đọng, lịch hẹn, bộ lọc, thẻ việc. Chỉ dùng biến màu chung (sáng/tối). */

.task-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.task-page .group-head { padding: 0; }

/* KPI "Tiến độ hôm nay" */
.task-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.task-kpi-big { font-size: 15px; margin: 8px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-kpi-big strong { font-size: 30px; font-weight: 800; }
.task-pace { position: relative; height: 10px; border-radius: 99px; background: var(--line); margin: 4px 0 6px; }
.task-pace-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--accent-strong); }
.task-pace-mark { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.task-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.task-kpi-grid .stat-label { display: flex; align-items: center; gap: 5px; }
.task-kpi-open { border-color: var(--danger); background: var(--danger-bg); color: var(--ink); text-decoration: none; }
.task-kpi-open:hover { border-color: var(--danger); filter: brightness(0.98); }

/* Tồn đọng */
.task-backlog-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.task-backlog-head .task-chip-row { flex: 1; min-width: 0; }
.task-chip-row .chip { text-decoration: none; }
.task-backlog-table { margin-top: 12px; }
.task-backlog-foot { margin-top: 10px; align-items: center; }
.task-backlog-foot p { margin: 0; }

/* Cần xử lý & Hẹn xử lý đến giờ */
.task-urgent { border-color: var(--danger); }
.task-urgent-link { display: block; margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); text-decoration: none; }
.task-urgent-link:hover { text-decoration: underline; }
.task-appt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.task-appt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.task-appt:last-child { border-bottom: 0; }
.task-appt-text { flex: 1 1 220px; min-width: 0; color: var(--ink-2); }

/* Bộ lọc */
.task-filters { display: flex; flex-direction: column; gap: 8px; }
.task-filter-pair { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.task-filter-row { min-width: 0; }

/* Nhóm & thẻ việc */
.task-group { display: flex; flex-direction: column; gap: 10px; }
.task-group-head { margin: 6px 0 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.task-group.is-overdue .task-group-head { color: var(--danger); }
.task-group.is-today .task-group-head { color: var(--warn); }
.task-page .task-list { display: flex; flex-direction: column; gap: 10px; }
.task-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--line-strong); min-width: 0; }
.task-card.is-overdue { border-left-color: var(--danger); }
.task-card.is-today { border-left-color: var(--warn); }
.task-card.is-done { opacity: .85; }
.task-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.task-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.task-who-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-contact { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.task-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; text-align: right; }
.task-due { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.task-due.is-overdue { color: var(--danger); }
.task-due.is-today { color: var(--warn); }
.task-title { font-weight: 600; overflow-wrap: anywhere; }
.task-order { align-self: flex-start; }
.task-history { display: flex; flex-direction: column; gap: 2px; }
.task-calls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-calls .btn.is-on { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.task-form { display: flex; flex-direction: column; gap: 6px; }
.task-form textarea { width: 100%; min-height: 54px; resize: vertical; }
.task-form-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.task-form-row select { width: auto; flex: 1 1 160px; }
.task-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-actions .btn { text-decoration: none; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn-accent:hover { filter: brightness(0.96); background: var(--accent); }
.btn-warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); font-weight: 700; }
.task-assign { width: auto; font-size: 12px; padding: 4px 8px; }
.task-details { width: 100%; }
.task-details summary { cursor: pointer; display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 8px; }
.task-details summary::-webkit-details-marker { display: none; }
.task-details-body { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.task-details-body .group-head { font-size: 11px; color: var(--muted); margin-top: 6px; }
.task-done-note { margin: 0; color: var(--ink-2); }

/* Kiểm tra trùng khách */
.task-merge { border-left-color: var(--warn); }
.merge-help { margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--ink); }
.merge-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

/* Modal */
.task-modal-form { display: flex; flex-direction: column; gap: 12px; }
.task-modal-form p { margin: 0; }
.task-num { width: 90px; text-align: right; }

@media (max-width: 1100px) {
  .task-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-kpi-open { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .task-filter-row .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .task-head { flex-direction: row; }
  .task-tags { flex-direction: column; align-items: flex-end; gap: 4px; }
  .task-calls { display: grid; grid-template-columns: 1fr 1fr; }
  .task-calls > span { grid-column: 1 / -1; }
  .task-form-row > * { flex: 1 1 calc(50% - 6px); }
  .task-form-row select { flex-basis: 100%; }
  .task-actions .btn-accent { flex: 1 1 100%; text-align: center; }
  .task-card { padding: 12px; }
}