/* ============================================================================
   am-pm-board.css — "Bảng nhóm Monday" của tab PM (App Manager).
   Cặp với public/js/am-pm-board.js. Port từ mockup .tmp/pmredesign/mock-1-monday-board.html
   (bản user đã duyệt) — bảng màu chép Y NGUYÊN, đã đo tương phản ≥ 4.5:1, KHÔNG đổi.

   ANTI-BLEED
   • Mọi rule nằm dưới #workspace-app-manager, namespace riêng .ampb-*.
   • KHÔNG đụng .ampm-* của panel trái. Ba ngoại lệ có chủ ý, tất cả đều bị khoá trong
     .ampb-host (class do JS gắn lên .ampm-main, biến mất ngay khi renderPM vẽ lại):
       1) .ampm-hd  — dải tiêu đề 2 dòng (83px) của am-v3 ép về MỘT dòng 38px.
          Bắt buộc: phép kiểm "dòng task đầu tiên ≤ 120px" chỉ đủ chỗ cho
          38 (tiêu đề) + 44 (thanh công cụ) + 32 (đầu nhóm) = 114px.
          Ép bằng CSS chứ KHÔNG vẽ lại dải này: giữ nguyên mọi dây sự kiện của am-v3
          (đổi view · thu panel · menu ⋯), không phải bắt chước rồi lệch.
       2) .ampm-dtnote — dải cảnh báo "bộ lọc ngày đang giấu N việc" do api.amDtNote()
          sinh ra. Nó phải nằm TRONG thanh công cụ (nằm trên bảng thì đẩy dòng task
          đầu tiên xuống quá 120px), nên thu về dạng chip.
       3) .ampm-pop  — popover dùng chung; JS gắn thêm class .ampb-pop nên rule luôn
          có 2 lớp khoá.
   • File này nạp SAU am-pm.css nên không cần !important ở đâu.
   ========================================================================== */

/* ── token + khung ───────────────────────────────────────────────────────── */
#workspace-app-manager .ampb {
  --ampb-ink: #18181B;      --ampb-muted: #6B6B72;    --ampb-soft: #A1A1AA;
  --ampb-bg: #F1F1F3;       --ampb-card: #FFFFFF;     --ampb-line: #ECECEE;
  --ampb-line-2: #E4E4E7;   --ampb-row-line: #F4F4F6;
  --ampb-cobalt: #2563EB;   --ampb-cobalt-h: #1D4ED8;
  --ampb-tint: #E5EDFF;     --ampb-tint-2: #F4F6FF;
  --ampb-amber: #F59E0B;    --ampb-crimson: #E2445C;
  --ampb-sh: 0 2px 18px rgba(20, 20, 25, .05);

  display: flex; flex-direction: column; min-width: 0;
  /* huỷ padding 16px của .ampm-body — bảng phải chạm mép như mockup.
     margin-top chỉ thêm khi board là con ĐẦU TIÊN (class .ampb-top): ở chế độ chỉ xem
     .ampm-robar nằm ngay trên, kéo lên là đè chồng lên dải đó. */
  margin: 0 -16px -16px;
  background: var(--ampb-bg); color: var(--ampb-ink);
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
}
#workspace-app-manager .ampb.ampb-top { margin-top: -16px; }
/* index.html KHÔNG có reset box-sizing toàn cục → phải tự đặt, nếu không mọi chiều cao
   có border đều dôi 1–2px và tổng 114px trượt quá ngưỡng 120px. */
#workspace-app-manager .ampb, #workspace-app-manager .ampb * { box-sizing: border-box; }
#workspace-app-manager .ampb button { font-family: inherit; color: inherit; cursor: pointer; }
#workspace-app-manager .ampb :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .30); }
#workspace-app-manager .ampb .ampb-ic {
  width: 15px; height: 15px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
#workspace-app-manager .ampb .ampm-ic { width: 14px; height: 14px; }
#workspace-app-manager .ampb .ampb-num { font-variant-numeric: tabular-nums; }

/* ── DẢI 1 · ép .ampm-hd của am-v3 về một dòng 38px ──────────────────────── */
#workspace-app-manager .ampb-host > .ampm-hd {
  height: 38px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px;
}
/* display:contents → con của .ampm-hdt thành flex-item trực tiếp của .ampm-hd, nhờ vậy
   dải view + nút ⋯ đẩy được sang phải bằng order mà KHÔNG phải sửa HTML của am-v3. */
#workspace-app-manager .ampb-host > .ampm-hd > .ampm-hdt { display: contents; }
#workspace-app-manager .ampb-host > .ampm-hd h2 {
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#workspace-app-manager .ampb-host > .ampm-hd .ampm-sub { font-size: 12.5px; white-space: nowrap; }
#workspace-app-manager .ampb-host > .ampm-hd .ampm-cnt {
  min-width: 20px; height: 19px; padding: 0 6px; font-size: 11px; font-weight: 800;
  background: #E5EDFF; color: #1D4ED8; font-variant-numeric: tabular-nums;
}
#workspace-app-manager .ampb-host > .ampm-hd .ampm-iconbtn { width: 26px; height: 26px; border-radius: 6px; }
#workspace-app-manager .ampb-host > .ampm-hd .ampm-views {
  order: 1; flex: none; height: 28px; align-items: center;
  background: #F1F1F3; border-radius: 8px; padding: 2px;
}
#workspace-app-manager .ampb-host > .ampm-hd .ampm-views button {
  height: 24px; padding: 0 10px; border-radius: 6px; border-bottom: 0;
  font-size: 12px; font-weight: 700;
}
#workspace-app-manager .ampb-host > .ampm-hd .ampm-views button.is-on {
  background: #fff; color: #2563EB; box-shadow: 0 1px 3px rgba(20, 20, 25, .12);
}
#workspace-app-manager .ampb-host > .ampm-hd #ampm-more { order: 2; }

/* ── DẢI 2 · thanh công cụ (44px) ───────────────────────────────────────── */
#workspace-app-manager .ampb-tb {
  height: 44px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 16px;
  background: #fff; border-bottom: 1px solid var(--ampb-line);
  position: sticky; top: 0; z-index: 12;
}
/* overflow-x:auto (không phải hidden): màn hẹp thì cuộn ngang tới được "Xoá lọc" thay vì
   cắt cụt vĩnh viễn. Ẩn thanh cuộn để không ăn mất chiều cao 44px. */
#workspace-app-manager .ampb-tbl {
  display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
#workspace-app-manager .ampb-tbl::-webkit-scrollbar { display: none; }
/* KHÔNG cho khối phải co: cảnh báo "đang giấu N việc" phải đọc được nguyên câu. Khối trái
   thừa chỗ thì cuộn ngang, không cắt chữ của cảnh báo. */
#workspace-app-manager .ampb-tbr { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#workspace-app-manager .ampb-btn {
  height: 30px; padding: 0 10px; flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ampb-line-2); background: #fff; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--ampb-ink); white-space: nowrap;
}
#workspace-app-manager .ampb-btn .ampb-ic { color: var(--ampb-soft); }
#workspace-app-manager .ampb-btn:hover { background: var(--ampb-tint-2); border-color: #D4D4D8; }
#workspace-app-manager .ampb-btn.is-on { background: var(--ampb-tint); border-color: #BBD0FF; color: var(--ampb-cobalt-h); }
#workspace-app-manager .ampb-btn.is-on .ampb-ic { color: var(--ampb-cobalt); }
#workspace-app-manager .ampb-btn.is-ghost { border-color: transparent; background: none; color: var(--ampb-muted); }
#workspace-app-manager .ampb-btn.is-ghost:hover { background: #F1F1F3; color: var(--ampb-ink); }
#workspace-app-manager .ampb-btn[disabled] { opacity: .4; cursor: default; }
#workspace-app-manager .ampb-btn.is-icon { width: 30px; padding: 0; justify-content: center; }
#workspace-app-manager .ampb-btn .ampb-lb {
  max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#workspace-app-manager .ampb-n {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  background: var(--ampb-cobalt); color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
#workspace-app-manager .ampb-n:empty { display: none; }
#workspace-app-manager .ampb-srch {
  height: 30px; flex: 0 1 164px; min-width: 116px; display: flex; align-items: center; gap: 6px;
  padding: 0 10px; border: 1px solid var(--ampb-line-2); border-radius: 8px;
  background: #F7F7F9; color: var(--ampb-soft);
}
#workspace-app-manager .ampb-srch:focus-within {
  background: #fff; border-color: var(--ampb-cobalt); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
#workspace-app-manager .ampb-srch input {
  border: 0; background: none; outline: none; flex: 1; min-width: 0;
  font-family: inherit; font-size: 12.5px; color: var(--ampb-ink);
}
#workspace-app-manager .ampb-cnt {
  font-size: 12px; font-weight: 700; color: var(--ampb-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
#workspace-app-manager .ampb-cnt b { color: var(--ampb-ink); }
#workspace-app-manager .ampb-pri {
  height: 30px; padding: 0 12px; flex: none; display: inline-flex; align-items: center; gap: 5px;
  border: 0; border-radius: 8px; background: var(--ampb-cobalt); color: #fff;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
#workspace-app-manager .ampb-pri:hover { background: var(--ampb-cobalt-h); }

/* chip "đang giấu N việc đã xong" — chính là .ampm-dtnote của api.amDtNote(), thu nhỏ */
#workspace-app-manager .ampb-warn { display: flex; min-width: 0; }
#workspace-app-manager .ampb-warn:empty { display: none; }
#workspace-app-manager .ampb-warn .ampm-dtnote {
  margin: 0; height: 30px; padding: 0 4px 0 9px; gap: 6px; min-width: 0;
  border-radius: 8px; background: #FFF4E4; border: 1px solid #FBDCA8; border-left-width: 1px;
  font-size: 11.5px; font-weight: 700; color: #7A4E00; line-height: 1;
}
#workspace-app-manager .ampb-warn .ampm-dtnote > span {
  flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px;
}
#workspace-app-manager .ampb-warn .ampm-dtnote .ampm-ic { color: var(--ampb-amber); }
#workspace-app-manager .ampb-warn .ampm-dtnote button {
  height: 22px; padding: 0 8px; border: 0; border-radius: 6px; background: #fff;
  color: var(--ampb-cobalt-h); font-size: 11.5px; font-weight: 800;
}
#workspace-app-manager .ampb-warn .ampm-dtnote button:hover { background: var(--ampb-tint); }

/* ── BẢNG NHÓM ──────────────────────────────────────────────────────────── */
#workspace-app-manager .ampb-body { flex: 1; min-width: 0; padding: 0 16px 48px; }
#workspace-app-manager .ampb-grp {
  background: #fff; border-radius: 12px; box-shadow: var(--ampb-sh); margin-bottom: 12px;
}
/* KHÔNG overflow:hidden ở .ampb-grp — sticky của đầu nhóm sẽ chết câm. */
#workspace-app-manager .ampb-ghd {
  height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 0;
  background: var(--ampb-gbg, #F7F7F9); border-left: 3px solid var(--ampb-ac, #D4D4D8);
  border-bottom: 1px solid var(--ampb-line); border-radius: 12px 12px 0 0;
  position: sticky; top: 44px; z-index: 6;
}
#workspace-app-manager .ampb-grp.is-hot { box-shadow: 0 0 0 1px #F6C6CD, var(--ampb-sh); }
#workspace-app-manager .ampb-grp.is-hot .ampb-ghd { background: #FDECEE; }
#workspace-app-manager .ampb-chev {
  width: 22px; height: 22px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--ampb-muted); margin-left: 5px; border-radius: 4px;
}
#workspace-app-manager .ampb-chev:hover { background: rgba(0, 0, 0, .05); }
#workspace-app-manager .ampb-chev .ampb-ic { width: 14px; height: 14px; transition: transform .16s cubic-bezier(.22, 1, .36, 1); }
#workspace-app-manager .ampb-grp.is-shut .ampb-chev .ampb-ic { transform: rotate(-90deg); }
#workspace-app-manager .ampb-grp.is-shut .ampb-gbd,
#workspace-app-manager .ampb-grp.is-shut .ampb-gbody { display: none; }
#workspace-app-manager .ampb-gnm {
  font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ampb-ac, var(--ampb-ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 392px;
  border: 0; background: none; padding: 0; text-align: left;
}
#workspace-app-manager .ampb-gn {
  font-size: 11px; font-weight: 800; color: var(--ampb-muted); font-variant-numeric: tabular-nums; flex: none;
}
#workspace-app-manager .ampb-gmeta { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; }
#workspace-app-manager .ampb-gmeta .dl {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--ampb-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#workspace-app-manager .ampb-gmeta .dl.is-late { color: var(--ampb-crimson); }
#workspace-app-manager .ampb-gmeta .dl .ampb-ic { width: 13px; height: 13px; }
#workspace-app-manager .ampb-bar {
  width: 70px; height: 5px; border-radius: 99px; background: var(--ampb-line-2); overflow: hidden; flex: none;
}
#workspace-app-manager .ampb-bar i { display: block; height: 100%; background: var(--ampb-cobalt); border-radius: 99px; }
#workspace-app-manager .ampb-pct { font-size: 11px; font-weight: 800; color: var(--ampb-cobalt-h); font-variant-numeric: tabular-nums; }
#workspace-app-manager .ampb-sp { flex: 1; min-width: 8px; }
#workspace-app-manager .ampb-cols { display: flex; align-items: center; flex: none; }
#workspace-app-manager .ampb-cols span {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ampb-soft); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#workspace-app-manager .ampb-gact {
  width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 6px; color: var(--ampb-soft); opacity: 0;
}
#workspace-app-manager .ampb-ghd:hover .ampb-gact { opacity: 1; }
#workspace-app-manager .ampb-gact:hover { background: rgba(0, 0, 0, .06); color: var(--ampb-ink); }
#workspace-app-manager .ampb-gact .ampb-ic { width: 13px; height: 13px; }

/* ── khoang mức độ trong 1 nhóm trạng thái (board gộp) ─────────────────────
   Lúc thường: KHÔNG tiêu đề, không viền — mặt bảng y hệt bản thiết kế đã duyệt, và dòng
   task đầu tiên vẫn nằm ở 114px (ngưỡng của phép kiểm là 120px).
   Lúc đang kéo: hiện tiêu đề + cả khoang rỗng, để thấy rõ thả vào đâu là đổi mức độ nào. */
#workspace-app-manager .ampb-band { display: block; }
#workspace-app-manager .ampb-bandhd {
  display: none; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 34px;
  background: #FBFBFC; border-bottom: 1px solid var(--ampb-row-line);
  font-size: 11px; font-weight: 800; letter-spacing: .01em; color: var(--ampb-muted);
}
#workspace-app-manager .ampb-body.is-dragging .ampb-bandhd { display: flex; }
#workspace-app-manager .ampb-bandhd i { width: 8px; height: 8px; border-radius: 99px; flex: none; }
#workspace-app-manager .ampb-bandhd b { font-variant-numeric: tabular-nums; color: var(--ampb-soft); font-weight: 800; }
#workspace-app-manager .ampb-bandhd .tag {
  margin-left: 4px; height: 16px; padding: 0 6px; border-radius: 99px;
  background: #FFE9EC; color: #C2223A; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center;
}
#workspace-app-manager .ampb-band.is-hot .ampb-bandhd { background: #FFF5F6; color: #C2223A; }
/* khoang Khẩn "đóng hộp nhấn": nền hồng + rãnh đỏ mép trái, KHÔNG thêm chiều cao nào */
#workspace-app-manager .ampb-band.is-hot .ampb-row { background: #FFF7F8; box-shadow: inset 3px 0 0 0 #E2445C; }
#workspace-app-manager .ampb-band.is-hot .ampb-row:hover { background: #FFEFF1; }
/* khoang rỗng chỉ hiện lúc đang kéo — mời thả vào chỗ trống mà không chiếm chỗ lúc thường */
#workspace-app-manager .ampb-band.is-empty { display: none; }
#workspace-app-manager .ampb-body.is-dragging .ampb-band.is-empty { display: block; }
#workspace-app-manager .ampb-body.is-dragging .ampb-band.is-empty .amv3-drop { min-height: 26px; }

/* ── dòng task ──────────────────────────────────────────────────────────── */
#workspace-app-manager .ampb-row.is-last { border-bottom: 0; border-radius: 0 0 12px 12px; }
#workspace-app-manager .ampb-row {
  height: 42px; display: flex; align-items: center; padding: 0 8px; cursor: pointer;
  border-bottom: 1px solid var(--ampb-row-line); background: #fff;
}
#workspace-app-manager .ampb-row:hover { background: var(--ampb-tint-2); }
#workspace-app-manager .ampb-ghost { opacity: .35; }
#workspace-app-manager .ampb-grip {
  width: 26px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: #D4D4D8; opacity: 0; cursor: grab;
}
#workspace-app-manager .ampb-rw:hover .ampb-grip { opacity: 1; }
#workspace-app-manager .ampb-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding-right: 12px; }
#workspace-app-manager .ampb-x {
  width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 4px; color: var(--ampb-soft);
}
#workspace-app-manager .ampb-x:hover { background: var(--ampb-line-2); color: var(--ampb-ink); }
#workspace-app-manager .ampb-x .ampb-ic { width: 13px; height: 13px; transition: transform .16s cubic-bezier(.22, 1, .36, 1); }
#workspace-app-manager .ampb-rw.is-open .ampb-x .ampb-ic { transform: rotate(90deg); }
/* display:inline-block (KHÔNG inline-flex): text-overflow:ellipsis không có tác dụng trên
   flex container — chip bị CẮT NGANG GIỮA CHỮ, không có dấu "…" nào. */
#workspace-app-manager .ampb-ctx {
  flex: none; max-width: 210px; height: 20px; line-height: 20px; padding: 0 7px; border-radius: 4px;
  background: #F1F1F3; color: var(--ampb-muted); font-size: 11px; font-weight: 700;
  display: inline-block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#workspace-app-manager .ampb-tt {
  font-size: 13px; font-weight: 600; color: var(--ampb-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#workspace-app-manager .ampb-row.is-done .ampb-tt { color: var(--ampb-muted); }
#workspace-app-manager .ampb-c { flex: none; display: flex; align-items: center; justify-content: center; padding: 0 4px; min-width: 0; }
#workspace-app-manager .ampb-st {
  width: 100%; height: 28px; border: 0; border-radius: 4px;
  background: var(--ampb-c, #D4D4D8); color: var(--ampb-ct, #fff);
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px;
  white-space: nowrap; overflow: hidden;
}
#workspace-app-manager .ampb-st .ampb-ic { width: 13px; height: 13px; }
#workspace-app-manager .ampb-st:hover { filter: brightness(.95); }
/* Chế độ chỉ xem: viên trạng thái GIỮ NGUYÊN (nó là thông tin), chỉ tắt thao tác —
   cùng cách am-v3 xử lý input[data-sub] và #amv3-status. */
body.amv3-ro #workspace-app-manager .ampb-st { pointer-events: none; opacity: .78; }
#workspace-app-manager .ampb-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; }
#workspace-app-manager .ampb-tag .ampb-ic { width: 14px; height: 14px; }
#workspace-app-manager .ampb-tag.t-prio .ampb-dot { width: 9px; height: 9px; border-radius: 99px; flex: none; }
#workspace-app-manager .ampb-tag.t-type { height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; }
#workspace-app-manager .ampb-tag.t-type .ampb-ic { width: 13px; height: 13px; }
#workspace-app-manager .ampb-due { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
#workspace-app-manager .ampb-due b { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
#workspace-app-manager .ampb-due i { font-size: 11px; font-style: normal; color: var(--ampb-soft); font-variant-numeric: tabular-nums; }
#workspace-app-manager .ampb-due.is-late i { color: var(--ampb-crimson); font-weight: 700; }
#workspace-app-manager .ampb-dash { font-size: 12px; color: var(--ampb-soft); }
#workspace-app-manager .ampb-prog { display: flex; align-items: center; gap: 5px; }
#workspace-app-manager .ampb-seg4 { display: flex; gap: 2px; }
#workspace-app-manager .ampb-seg4 i { width: 11px; height: 6px; border-radius: 2px; background: #E7E7EA; display: block; }
#workspace-app-manager .ampb-seg4 i.on { background: var(--ampb-cobalt); }
#workspace-app-manager .ampb-prog span { font-size: 11px; font-weight: 700; color: var(--ampb-muted); font-variant-numeric: tabular-nums; }
#workspace-app-manager .ampb-rmenu {
  width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 6px; color: var(--ampb-soft); opacity: 0;
}
#workspace-app-manager .ampb-rw:hover .ampb-rmenu { opacity: 1; }
#workspace-app-manager .ampb-rmenu:hover { background: var(--ampb-line-2); color: var(--ampb-ink); }
#workspace-app-manager .ampb-rmenu .ampm-ic { width: 15px; height: 15px; }

/* ── việc con bung tại chỗ ──────────────────────────────────────────────── */
#workspace-app-manager .ampb-subs {
  padding: 8px 8px 10px 60px; background: #FBFBFC; border-bottom: 1px solid var(--ampb-row-line);
}
#workspace-app-manager .ampb-subs .r { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 12.5px; }
#workspace-app-manager .ampb-subs .r input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--ampb-cobalt); margin: 0; flex: none; }
#workspace-app-manager .ampb-subs .r > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#workspace-app-manager .ampb-subs .r.is-done > span { color: var(--ampb-soft); text-decoration: line-through; }
#workspace-app-manager .ampb-subs .e { font-size: 11.5px; color: var(--ampb-soft); font-weight: 700; }
#workspace-app-manager .ampb-subs .ampb-mini {
  height: 26px; margin-top: 6px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--ampb-line-2); background: #fff; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--ampb-muted);
}
#workspace-app-manager .ampb-subs .ampb-mini:hover { border-color: var(--ampb-cobalt); color: var(--ampb-cobalt); }

/* ── nhóm rỗng · hàng thêm · rỗng hoàn toàn ─────────────────────────────── */
#workspace-app-manager .ampb-empt { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
#workspace-app-manager .ampb-ebar {
  height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 0;
  background: #fff; border-radius: 8px; border-left: 3px solid var(--ampb-ac, #D4D4D8);
  border-top: 0; box-shadow: var(--ampb-sh);
  font-size: 11.5px; font-weight: 700; color: var(--ampb-muted);
}
#workspace-app-manager .ampb-ebar .ampb-ic { width: 13px; height: 13px; margin-left: 8px; }
#workspace-app-manager .ampb-ebar b { font-variant-numeric: tabular-nums; color: var(--ampb-soft); }
#workspace-app-manager .ampb-add {
  height: 34px; width: 100%; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border: 1px dashed #D4D4D8; background: #fff; border-radius: 10px; color: var(--ampb-muted);
  font-size: 12.5px; font-weight: 700; margin-bottom: 12px;
}
#workspace-app-manager .ampb-add:hover { border-color: var(--ampb-cobalt); color: var(--ampb-cobalt); background: var(--ampb-tint-2); }
#workspace-app-manager .ampb-none {
  background: #fff; border-radius: 12px; box-shadow: var(--ampb-sh); padding: 32px; text-align: center;
  color: var(--ampb-muted); font-size: 13px;
}
#workspace-app-manager .ampb-none b { display: block; font-size: 14px; color: var(--ampb-ink); margin-bottom: 4px; }
#workspace-app-manager .ampb-load { padding: 24px 16px; font-size: 13px; color: var(--ampb-muted); }

@media (prefers-reduced-motion: no-preference) {
  #workspace-app-manager .ampb-btn:active, #workspace-app-manager .ampb-pri:active { transform: scale(.97); }
}

/* ── POPOVER (gắn ở body → nằm NGOÀI #workspace-app-manager) ─────────────
   Khoá 2 lớp .ampm-pop.ampb-pop: .ampm-pop đã là của riêng App Manager, .ampb-pop do
   JS gắn thêm. Không có cách nào đặt các rule này dưới #workspace-app-manager vì
   pmPop() append thẳng vào <body>. */
/* position:fixed — CẶP với place() trong am-pm-board.js (nó ghi toạ độ MÀN HÌNH, không cộng
   scrollX/scrollY). Sửa một bên mà quên bên kia là menu bay đi đâu mất khi trang có cuộn.
   Lý do bỏ `absolute` của .ampm-pop: popup absolute trên <body> cộng vào chiều cao tài liệu →
   mở menu ở dòng sát đáy làm hiện thanh cuộn dọc → bảng hẹp lại 15px → nút ⋯ dịch trái →
   menu canh lệch đúng bằng bề rộng thanh cuộn. */
.ampm-pop.ampb-pop { position: fixed; padding: 6px; min-width: 220px; max-height: 76vh; border-radius: 12px; }
.ampm-pop.ampb-pop .ampb-ic {
  width: 15px; height: 15px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ampm-pop.ampb-pop h5 {
  margin: 8px 6px 4px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: #A1A1AA;
}
.ampm-pop.ampb-pop h5:first-child { margin-top: 4px; }
.ampm-pop.ampb-pop .ampb-mi {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 8px;
  border: 0; background: none; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: #18181B;
  text-align: left; cursor: pointer;
}
.ampm-pop.ampb-pop .ampb-mi:hover { background: #F4F6FF; }
.ampm-pop.ampb-pop .ampb-mi.is-on { background: #E5EDFF; color: #1D4ED8; font-weight: 800; }
.ampm-pop.ampb-pop .ampb-mi .ampb-ic { color: #A1A1AA; }
.ampm-pop.ampb-pop .ampb-mi.is-on .ampb-ic { color: #2563EB; }
.ampm-pop.ampb-pop .ampb-mi .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ampm-pop.ampb-pop .ampb-mi .k { font-size: 11px; font-weight: 700; color: #A1A1AA; font-variant-numeric: tabular-nums; }
.ampm-pop.ampb-pop .ampb-mi.is-danger { color: #E2445C; }
.ampm-pop.ampb-pop .ampb-mi.is-danger .ampb-ic { color: #E2445C; }
.ampm-pop.ampb-pop label.ampb-mi { cursor: pointer; }
.ampm-pop.ampb-pop label.ampb-mi input { width: 15px; height: 15px; margin: 0; accent-color: #2563EB; flex: none; }
.ampm-pop.ampb-pop .ampb-sep { height: 1px; background: #ECECEE; margin: 6px 4px; }
.ampm-pop.ampb-pop .ampb-sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.ampm-pop.ampb-pop .ampb-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px 6px; }
.ampm-pop.ampb-pop .ampb-chips button {
  height: 26px; padding: 0 10px; border: 1px solid #E4E4E7; background: #fff; border-radius: 99px;
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: #6B6B72; cursor: pointer;
}
.ampm-pop.ampb-pop .ampb-chips button.is-on { background: #2563EB; border-color: #2563EB; color: #fff; }
.ampm-pop.ampb-pop .ampb-nav { display: flex; align-items: center; gap: 4px; padding: 2px 4px 6px; }
.ampm-pop.ampb-pop .ampb-nav button {
  width: 28px; height: 28px; flex: none; border: 1px solid #E4E4E7; background: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: #6B6B72; cursor: pointer;
}
.ampm-pop.ampb-pop .ampb-nav button:hover { background: #F4F6FF; }
.ampm-pop.ampb-pop .ampb-nav b {
  flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: #18181B;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ampm-pop.ampb-pop .ampb-nav input {
  flex: 1; min-width: 0; height: 28px; border: 1px solid #E4E4E7; border-radius: 8px; padding: 0 8px;
  font-family: inherit; font-size: 12.5px; color: #18181B; outline: none;
}
.ampm-pop.ampb-pop .ampb-hint {
  padding: 4px 8px 6px; font-size: 11px; font-weight: 600; color: #A1A1AA; line-height: 1.4;
}

/* ── mục menu 2 dòng · nút quay lại · chọn deploy ──────────────────────────
   Menu "Thao tác" của dòng task phải nói được VÌ SAO một mục không bấm được
   (đang chờ duyệt / bạn chính là người tạo…) nên cần dòng phụ dưới nhãn. */
.ampm-pop.ampb-pop .ampb-mi2 { min-height: 42px; padding: 5px 8px; align-items: center; }
.ampm-pop.ampb-pop .ampb-mi2 .t2 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ampm-pop.ampb-pop .ampb-mi2 .t2 b {
  font-size: 12.5px; font-weight: 700; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ampm-pop.ampb-pop .ampb-mi2 .t2 i {
  font-style: normal; font-size: 11px; font-weight: 600; color: #A1A1AA;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ampm-pop.ampb-pop .ampb-mi2 .ampb-more { display: flex; color: #C4C4C8; }
.ampm-pop.ampb-pop .ampb-mi2 .ampb-more .ampb-ic { width: 13px; height: 13px; }
/* Mục tắt vẫn ĐỌC ĐƯỢC (không mờ tới mức đoán chữ): chỉ nhãn xám lại, dòng lý do giữ nguyên. */
.ampm-pop.ampb-pop .ampb-mi[disabled] { cursor: default; background: none; }
.ampm-pop.ampb-pop .ampb-mi[disabled] .t2 b,
.ampm-pop.ampb-pop .ampb-mi[disabled] .t { color: #A1A1AA; }
.ampm-pop.ampb-pop .ampb-mi[disabled] .ampb-ic { color: #D4D4D8; }
.ampm-pop.ampb-pop .ampb-mi[disabled]:hover { background: none; }

.ampm-pop.ampb-pop .ampb-back { min-height: 28px; color: #6B6B72; font-size: 12px; font-weight: 700; }
.ampm-pop.ampb-pop .ampb-back .ampb-ic { width: 14px; height: 14px; color: #6B6B72; }

/* min-width ở ĐÂY chứ không phải trên .ampb-pop: nó là thứ kéo rộng popup chọn deploy lên
   360px (nhãn deploy là cả câu commit, 220px cắt còn 3 chữ) mà không phải thêm class riêng
   cho popup — các menu khác không có ô tìm kiếm nên vẫn giữ đúng 220px như cũ. */
.ampm-pop.ampb-pop .ampb-srch {
  display: flex; align-items: center; gap: 6px; margin: 2px 4px 6px; padding: 0 8px;
  height: 30px; min-width: 340px; border: 1px solid #E4E4E7; border-radius: 8px; background: #FAFAFB;
}
.ampm-pop.ampb-pop .ampb-srch .ampb-ic { width: 14px; height: 14px; color: #A1A1AA; }
.ampm-pop.ampb-pop .ampb-srch input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: inherit; font-size: 12.5px; color: #18181B;
}
.ampm-pop.ampb-pop .ampb-srch input::-webkit-search-cancel-button { cursor: pointer; }
/* Bề rộng + chiều cao đều CỐ ĐỊNH:
   – rộng: nhãn deploy là cả câu commit và để nowrap, không chốt số thì popup tự phình theo
     câu dài nhất (đo thật 565px) và mỗi lần lọc lại đổi bề rộng một kiểu;
   – cao: gõ lọc mà popup co giãn thì nó nhảy lên/xuống theo từng phím.
   354 = 340 (lòng ô tìm kiếm) + 14 (viền + đệm của ô) — index.html KHÔNG có reset
   box-sizing toàn cục, mà popup nằm ngoài #workspace-app-manager nên cũng không ăn
   reset của .ampb → mọi số ở đây là content-box, cộng tay. */
.ampm-pop.ampb-pop .ampb-dlist { width: 354px; max-height: 262px; overflow: auto; margin: 0 -2px; padding: 0 2px; }
.ampm-pop.ampb-pop .ampb-dep.is-on { background: #E5EDFF; }
.ampm-pop.ampb-pop .ampb-dep.is-on .ampb-ic { color: #2563EB; }
.ampm-pop.ampb-pop .ampb-dep.is-on .t2 b { color: #1D4ED8; }
.ampm-pop.ampb-pop .ampb-dep .t2 i { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════
   ĐỢT 2 — vùng thả cột mốc + dọn lại popup chi tiết task
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── kéo-thả chuyển cột mốc ────────────────────────────────────────────────
   Dải cột mốc RỖNG cao 0px → không thả vào được. Chỉ mở rãnh lúc đang kéo,
   ngoài lúc đó bảng vẫn khít như cũ. */
#workspace-app-manager .ampb-body.is-dragging .ampb-msdrop {
  min-height: 34px;
  outline: 1px dashed var(--ampb-line, #D8DAE0);
  outline-offset: -4px;
  border-radius: 8px;
}
#workspace-app-manager .ampb-body.is-dragging .ampb-msdrop:empty::after {
  content: 'Thả vào đây để chuyển sang cột mốc này';
  display: flex; align-items: center; height: 34px; padding-left: 46px;
  font-size: 11.5px; color: #A1A1AA;
}

/* ── POPUP CHI TIẾT TASK ───────────────────────────────────────────────────
   Markup của popup nằm trong am-v3.js và gắn style INLINE, nên phần dưới buộc
   phải !important. Chỉ đè những thuộc tính TĨNH (bo góc, font, viền, nền) —
   KHÔNG đè thuộc tính nào JS bật/tắt theo trạng thái, để không khoá logic.
   Popup append thẳng vào <body> nên KHÔNG bọc trong #workspace-app-manager. */
#amv3-modal { padding: 32px 16px !important; }

/* thẻ popup: bo 16 theo DS, bóng mảnh hơn */
#amv3-modal > div {
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(22, 32, 51, .22) !important;
  max-width: 940px !important;
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
}

/* ô nhập: bỏ font monospace mặc định của textarea, thống nhất bo 8 + focus ring */
#amv3-modal input,
#amv3-modal select,
#amv3-modal textarea {
  font-family: inherit !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border-color: #E4E4E7 !important;
  color: #18181B;
}
#amv3-modal textarea { line-height: 1.55 !important; padding: 9px 11px !important; }
#amv3-modal select { height: 34px !important; padding: 0 8px !important; cursor: pointer; }
#amv3-modal input[type="date"],
#amv3-modal input[type="number"],
#amv3-modal input[type="text"] { height: 34px !important; padding: 0 10px !important; }
#amv3-modal input:focus,
#amv3-modal select:focus,
#amv3-modal textarea:focus {
  outline: none !important;
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) !important;
}

/* tên task = tiêu đề thật, không phải một ô input lọt thỏm */
#amv3-modal #amv3-title {
  font-size: 18px !important; font-weight: 700 !important;
  height: 42px !important; border-color: transparent !important;
  padding-left: 8px !important; margin-left: -8px !important;
}
#amv3-modal #amv3-title:hover { border-color: #E4E4E7 !important; }

/* nhãn cột phải: chuẩn nhãn nhóm của DS (10.5px/800/UPPERCASE) */
#amv3-modal [style*="font-size:11px"][style*="font-weight:700"][style*="#64748b"] {
  font-size: 10.5px !important; font-weight: 800 !important;
  letter-spacing: .04em; text-transform: uppercase; color: #A1A1AA !important;
}