/* ══════════════════════════════════════════════════════════════════════
   TASKS — layout riêng cho màn Tasks.
   Mobile-first để các luật 360px là mặc định thay vì phải ghi đè desktop.
══════════════════════════════════════════════════════════════════════ */

/* Khung chung (sidebar, topbar, bottom nav) o assets/css/screens/shell.css.
   O day .tasks chi con la mot man hinh nam trong cot noi dung cua khung do. */
.tasks {
  min-width: 0;
  overflow-x: hidden;
}

.tasks__svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tasks__icon {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--space-1) / 2);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tasks__touch-button {
  min-width: var(--row-h);
  min-height: var(--row-h);
}

/* ══ SIDEBAR MOBILE ════════════════════════════════════════════════════
   Drawer dùng transform để không thay đổi độ rộng nội dung và không tạo
   horizontal scroll khi đóng.
══════════════════════════════════════════════════════════════════════ */

.tasks__filter-select {
  position: relative;
}

.tasks__filter-summary {
  list-style: none;
}

.tasks__filter-summary::-webkit-details-marker {
  display: none;
}

/* ══ MOBILE TOPBAR + MAIN ══════════════════════════════════════════════
   Topbar có chiều cao dùng token chung để không tạo thêm một kích thước
   điều khiển riêng cho màn Tasks.
══════════════════════════════════════════════════════════════════════ */

.tasks__main {
  min-width: 0;
}

.tasks__content {
  min-width: 0;
  padding: var(--space-4);
  padding-bottom: calc(var(--topbar-h) + var(--space-10));
}

.tasks__page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.tasks__heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tasks__title {
  font-size: clamp(var(--fs-md), 4vw, var(--fs-lg));
}

.tasks__date {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.tasks__view-switch {
  align-self: flex-start;
}

/* ══ KPI ════════════════════════════════════════════════════════════════ */

.tasks__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.tasks__stat {
  position: relative;
  min-width: 0;
}

.tasks__stat-icon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--text-faint);
  opacity: .7;
}

.tasks__stat--danger .stat__value {
  color: var(--danger);
}

.tasks__stat--today .stat__value {
  color: var(--due-today);
}

.tasks__stat--success .stat__value {
  color: var(--success);
}

/* ══ QUICK ADD ═════════════════════════════════════════════════════════
   Mobile thay cả thanh nhập bằng FAB để giữ đủ chiều ngang cho task list.
══════════════════════════════════════════════════════════════════════ */

.tasks__quick-add {
  display: none;
}

.tasks__quick-add-field {
  position: relative;
}

.tasks__quick-add-input {
  height: var(--row-h);
  padding-left: var(--space-10);
  padding-right: calc(var(--control-h) * 3 + var(--space-4));
}

.tasks__quick-add-plus {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  z-index: var(--z-sticky);
}

.tasks__quick-add-actions {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  transform: translateY(-50%);
  display: flex;
}

.tasks__quick-add-fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--topbar-h) + var(--space-4));
  z-index: var(--z-sticky);
  width: var(--row-h);
  height: var(--row-h);
  box-shadow: var(--shadow-lg);
}

/* ══ SEARCH + FILTERS ══════════════════════════════════════════════════
   Filters wrap thay vì ép một hàng, nhờ vậy 360px không phát sinh scroll
   ngang và vẫn giữ đủ chức năng cho danh sách lớn.
══════════════════════════════════════════════════════════════════════ */

.tasks__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.tasks__search {
  width: 100%;
}

.tasks__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.tasks__status-filter {
  width: 100%;
}

.tasks__status-filter .pill {
  flex: 1;
  min-width: 0;
}

.tasks__filter-summary {
  display: flex;
  align-items: center;
  min-width: 0;
}

.tasks__filter-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
}

.tasks__people-filter {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tasks__people-label {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.tasks__avatar-stack {
  min-width: 0;
}

.tasks__avatar-filter {
  border-color: var(--surface);
}

/* ══ TASK LIST ═════════════════════════════════════════════════════════
   Grid cho từng dòng cho phép ẩn cột theo breakpoint mà không cần tạo
   markup riêng cho mobile và desktop.
══════════════════════════════════════════════════════════════════════ */

.tasks__task-list {
  min-width: 0;
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.tasks__task-row {
  position: relative;
  min-height: var(--row-h);
  padding: 0 var(--space-2);
  display: grid;
  grid-template-columns:
    var(--row-h)
    minmax(0, 1fr)
    max-content
    var(--row-h);
  align-items: center;
  border-bottom: calc(var(--space-1) / 4) solid var(--border);
  transition: background var(--t-fast);
}

.tasks__task-row.is-selected {
  background: var(--primary-soft);
}

.tasks__task-row.is-done {
  opacity: .5;
}

.tasks__task-row.is-done .tasks__task-title {
  text-decoration: line-through;
}

.tasks__expand,
.tasks__expand-spacer,
.tasks__subtask-count,
.tasks__task-avatar {
  display: none;
}

.tasks__check {
  position: relative;
  margin: auto;
}

.tasks__check::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--row-h);
  height: var(--row-h);
  transform: translate(-50%, -50%);
}

.tasks__task-title {
  min-width: 0;
  padding-right: var(--space-2);
  font-size: var(--fs-base);
}

.tasks__task-row .due-chip {
  justify-self: end;
}

.tasks__due-warning {
  width: var(--space-3);
  height: var(--space-3);
}

.tasks__task-menu {
  opacity: 1;
}

.tasks__subtask-group {
  margin-left: var(--space-6);
  padding-left: var(--space-3);
  border-left: calc(var(--space-1) / 4) solid var(--border);
}

.tasks__subtask-group .tasks__task-row {
  padding-left: 0;
}

/* ══ PAGINATION ═══════════════════════════════════════════════════════ */

.tasks__pagination {
  min-height: var(--topbar-h);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  background: var(--surface);
}

.tasks__pagination-copy {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.tasks__pagination-actions {
  display: flex;
  gap: var(--space-2);
}

.tasks__pagination-actions .btn {
  flex: 1;
}

/* ══ EMPTY + SKELETON ═════════════════════════════════════════════════
   Hai state dùng chung một khung để QA có thể kiểm tra đồng thời mà không
   cần thay dữ liệu thật.
══════════════════════════════════════════════════════════════════════ */

.tasks__loading-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
}

.tasks__skeleton-row {
  min-height: var(--row-h);
  display: grid;
  grid-template-columns: var(--space-5) minmax(0, 1fr) var(--space-16);
  gap: var(--space-3);
  align-items: center;
}

.tasks__skeleton-check {
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-full);
}

.tasks__skeleton-title {
  height: var(--space-3);
}

.tasks__skeleton-chip {
  height: var(--space-5);
}

/* ══ DETAIL PANEL ══════════════════════════════════════════════════════ */

.tasks__detail-header {
  align-items: center;
  padding: var(--space-2);
}

.tasks__detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tasks__detail-title {
  padding: var(--space-2);
  margin: calc(var(--space-2) * -1);
  border: calc(var(--space-1) / 4) solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.tasks__properties {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tasks__property {
  min-height: var(--control-h);
  display: grid;
  grid-template-columns:
    calc(var(--space-10) * 2 + var(--space-3))
    minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.tasks__property-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.tasks__property-value {
  min-width: 0;
}

.tasks__property-person,
.tasks__property-button {
  min-height: var(--control-h);
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
}

.tasks__notes-input {
  min-height: calc(var(--space-16) + var(--space-5));
  padding: var(--space-1) 0;
  border-color: transparent;
  background: transparent;
}

.tasks__detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tasks__section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.tasks__section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .04em;
  color: var(--text-muted);
}

.tasks__subtask-progress-bar {
  width: calc(100% * 2 / 3);
}

.tasks__detail-subtasks {
  display: flex;
  flex-direction: column;
}

.tasks__detail-subtask {
  min-height: var(--row-h);
  display: grid;
  grid-template-columns: var(--row-h) minmax(0, 1fr);
  align-items: center;
}

.tasks__detail-subtask-title {
  min-width: 0;
}

.tasks__detail-subtask-title.is-done {
  color: var(--text-muted);
  text-decoration: line-through;
}

.tasks__subtask-input {
  min-height: var(--row-h);
  border-color: transparent;
  background: transparent;
}

/* ══ DEADLINE TIMELINE ════════════════════════════════════════════════
   Đường nối thuộc từng checkpoint thay vì một đường duy nhất, nhờ vậy
   đoạn cuối có thể đổi sang dashed mà không cần thêm markup trang trí.
══════════════════════════════════════════════════════════════════════ */

.tasks__timeline {
  display: flex;
  flex-direction: column;
}

.tasks__checkpoint {
  position: relative;
  min-height: var(--space-16);
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
}

.tasks__checkpoint::before {
  content: "";
  position: absolute;
  left: calc(var(--space-3) - (var(--space-1) / 4));
  top: var(--space-3);
  bottom: calc(var(--space-3) * -1);
  border-left: calc(var(--space-1) / 2) solid var(--border-strong);
}

.tasks__checkpoint:last-child::before {
  display: none;
}

.tasks__checkpoint:nth-last-child(2)::before {
  border-left-style: dashed;
}

.tasks__checkpoint-marker {
  position: relative;
  z-index: 1;
  width: var(--space-3);
  height: var(--space-3);
  margin-top: var(--space-1);
  margin-left: calc(var(--space-3) / 2);
  transform: translateX(-50%);
  border-radius: var(--radius-full);
  border: calc(var(--space-1) / 2) solid var(--border-strong);
  background: var(--surface);
}

.tasks__checkpoint-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
}

.tasks__checkpoint-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.tasks__checkpoint-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.tasks__checkpoint.is-done .tasks__checkpoint-marker {
  border-color: var(--success);
  background: var(--success);
}

.tasks__checkpoint.is-done .tasks__checkpoint-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--space-2) - var(--space-1));
  height: calc(var(--space-1) / 2);
  border-left: calc(var(--space-1) / 2) solid var(--text-inverse);
  border-bottom: calc(var(--space-1) / 2) solid var(--text-inverse);
  transform: translate(-50%, -65%) rotate(-45deg);
}

.tasks__checkpoint.is-done .tasks__checkpoint-title {
  color: var(--text-muted);
  text-decoration: line-through;
}

.tasks__checkpoint.is-overdue .tasks__checkpoint-marker {
  border-color: var(--danger);
}

.tasks__checkpoint.is-overdue .tasks__checkpoint-date {
  color: var(--danger);
}

.tasks__checkpoint-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tasks__reminder-pills {
  width: 100%;
}

.tasks__reminder-pills .pill {
  flex: 1;
  min-width: 0;
}

.tasks__repeat-reminder {
  min-height: var(--row-h);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.tasks__detail-footer {
  flex-wrap: wrap;
}

/* ══ MOBILE BOTTOM NAV ════════════════════════════════════════════════ */

/* ══ HOVER CHỈ CHO THIẾT BỊ THẬT SỰ CÓ HOVER ═════════════════════════
   Touch không phụ thuộc hover nên menu ba chấm vẫn luôn truy cập được.
══════════════════════════════════════════════════════════════════════ */

@media (hover: hover) {
  

  .tasks__task-row:hover {
    background: var(--surface-hover);
  }

  .tasks__task-row.is-selected:hover {
    background: var(--primary-soft);
  }

  .tasks__detail-title:hover {
    border-color: var(--border-strong);
  }
}

/* ══ 481–768px ════════════════════════════════════════════════════════
   KPI chuyển thành bốn cột, task có thêm avatar; detail vẫn giữ cơ chế
   drawer của component dùng chung.
══════════════════════════════════════════════════════════════════════ */

@media (min-width: 481px) {
  .tasks__content {
    padding: var(--space-5);
  }

  .tasks__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tasks__page-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .tasks__quick-add {
    display: block;
    margin-bottom: var(--space-4);
  }

  .tasks__quick-add-fab {
    display: none;
  }

  .tasks__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .tasks__filters {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr);
  }

  .tasks__task-row {
    grid-template-columns:
      var(--row-h)
      minmax(0, 1fr)
      max-content
      var(--space-8)
      var(--row-h);
  }

  .tasks__task-avatar {
    display: grid;
    justify-self: center;
  }

  .tasks__pagination {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .tasks__pagination-actions .btn {
    flex: none;
  }
}

/* ══ 769–1279px ═══════════════════════════════════════════════════════
   Sidebar dùng đúng nhịp 64px từ token spacing; detail lấy 360px trừ
   spacing 40px để đạt kích thước tablet yêu cầu mà không tạo số mới.
══════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  .tasks {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      calc(var(--detail-w) - var(--space-10));
  }

  

  

  

  

  

  

  

  

  

  

  

  .tasks__main {
    min-width: 0;
  }

  .tasks__content {
    padding: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .tasks__controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
  }

  .tasks__people-filter {
    grid-column: 1 / -1;
  }

  .tasks__task-row {
    grid-template-columns:
      var(--control-h-sm)
      var(--row-h)
      minmax(0, 1fr)
      max-content
      max-content
      var(--space-8)
      var(--row-h);
  }

  .tasks__expand,
.tasks__expand-spacer {
    display: grid;
    place-items: center;
  }

  .tasks__subtask-count {
    display: inline-flex;
  }

  .tasks__task-row > .tasks__subtask-count:empty {
    display: block;
  }

  .tasks__detail.drawer {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    height: 100dvh;
    z-index: auto;
    transform: none;
    transition: none;
    box-shadow: none;
  }

  @media (hover: hover) {
    .tasks__task-menu {
      opacity: 0;
      transition: opacity var(--t-fast);
    }

    .tasks__task-row:hover .tasks__task-menu,
.tasks__task-menu:focus-visible {
      opacity: 1;
    }

    

    
  }
}

/* ══ ≥1280px ══════════════════════════════════════════════════════════
   Desktop phục hồi đủ sidebar 240px và detail 360px bằng token layout
   đã có trong design system.
══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  .tasks {
    grid-template-columns:
      minmax(0, 1fr)
      var(--detail-w);
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .tasks__controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  }

  .tasks__people-filter {
    grid-column: auto;
    justify-content: flex-end;
  }

  
}

/* Đề xuất thêm token:
   Không cần thêm token mới; toàn bộ kích thước, màu, spacing, radius và shadow
   của màn Tasks đều suy ra từ tokens.css hiện có.
*/
/* ══════════════════════════════════════════════════════════════════════
   PHẦN NỐI VÀO APP THẬT
   Bản vẽ từ ChatGPT là HTML+CSS tĩnh. Bốn thứ dưới đây phát sinh khi
   gắn logic vào: thẻ đổi từ <button> sang <a>, ô hiển thị đổi thành ô
   nhập được, và hai trạng thái rỗng/đang tải tách khỏi khung xem thử.
══════════════════════════════════════════════════════════════════════ */

/* ── Nav giờ là <a> để bấm giữa chuột mở tab mới được ───────────────── */

/* ── Khung rỗng / đang tải, thay cho .tasks__states của bản vẽ ──────── */
.tasks__panel {
  min-width: 0;
  overflow: hidden;
  margin-bottom: var(--space-5);
}

/* ── Dấu tick trong menu: chỉ hiện ở dòng đang chọn ─────────────────── */

/* ── Menu tài khoản, đặt giống menu ngôn ngữ ────────────────────────── */

/* ── Ô lọc giờ là <select> thật thay cho <details> giả ──────────────── */
.tasks__filter-select > .select {
  width: 100%;
}

/* ── Hàng không có hạn chót: giữ chỗ trong lưới, chỉ giấu chữ ───────── */
.tasks__task-row .due-chip.is-empty {
  visibility: hidden;
}

/* ══ Ô SỬA ĐÈ LÊN Ô HIỂN THỊ ══════════════════════════════════════════
   Badge / chip màu vẫn hiện như bản vẽ, còn <select> hay <input> nằm
   trong suốt phủ lên trên. Vẫn là điều khiển thật nên bàn phím và
   trình đọc màn hình dùng được, không phải popover tự chế.
══════════════════════════════════════════════════════════════════════ */

.tasks__property-edit {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.tasks__property-edit:focus-within {
  outline: calc(var(--space-1) / 2) solid var(--primary);
  outline-offset: var(--space-1);
}

.tasks__property-control,
.tasks__quick-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

.tasks__quick-overlay {
  z-index: var(--z-sticky);
}

.tasks__estimate-input {
  height: var(--control-h);
  padding: 0 var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  border-color: transparent;
  background: transparent;
}

/* ── Thẻ #tag đọc được từ ô nhập nhanh ──────────────────────────────── */
.tasks__detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tasks__detail-tags:empty {
  display: none;
}

/* ── Mốc deadline giờ bấm được để đánh dấu xong ─────────────────────── */
.tasks__checkpoint-marker {
  padding: 0;
  cursor: pointer;
}

.tasks__checkpoint-input {
  min-height: var(--row-h);
}

/* ── Panel chi tiết khi chưa chọn việc nào ──────────────────────────── */
.tasks__detail-none {
  padding: var(--space-10) var(--space-4);
}

.tasks__detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ══ HOVER — vẫn phải bọc trong (hover: hover) ═══════════════════════ */
@media (hover: hover) {
  /* base.css gạch chân mọi <a>, nav thì không được gạch chân */
  

  

  .tasks__property-edit:hover {
    background: var(--surface-hover);
  }

  .tasks__estimate-input:hover {
    border-color: var(--border-strong);
  }
}

/* ══ 769–1279px — sidebar thu gọn, menu tài khoản bung sang phải ═════ */

/* ── Thanh go nhanh: mobile an di, FAB bam vao thi hien ────────────── */
.tasks__quick-add.is-open {
  display: block;
  margin-bottom: var(--space-4);
}

/* ── Avatar dang duoc chon lam bo loc ──────────────────────────────── */
.tasks__avatar-filter.is-active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

/* ── Nut Luu mo di khi khong co gi de luu ──────────────────────────── */
.tasks__detail-footer .btn[disabled] {
  opacity: .45;
}

/* ── Dau panel chi tiet: dong ben trai, menu ben phai ──────────────── */
.tasks__detail-header {
  display: flex;
  justify-content: space-between;
}

/* ── Hang avatar loc nguoi: KHONG chong len nhau ────────────────────
   .avatar-stack chong -8px la de TRUNG BAY. O day moi avatar la mot nut
   bam duoc, chong len nhau thi vua khong doc duoc chu vua kho bam. */
.tasks__avatar-stack {
  gap: var(--space-1);
}

.tasks__avatar-stack .avatar {
  margin-left: 0;
  border: 0;
}