/* ============================================================================
   am-pm.css — panel điều hướng trái của tab PM (App Manager), theo MagnoliaX DS v2.
   Thay 2 hàng chip flex-wrap cũ: 23 project tự xuống dòng, rìa phải răng cưa,
   chip inactive trắng như nhau nên không phân biệt được, không có số việc.

   Namespace .ampm-* — KHÔNG giao với .amv3-* mà ensureAmStyle() chèn vào <style id="amv3-style">.
   Token khoanh trong .ampm để không rò sang workspace khác dùng chung index.html.
   ========================================================================== */

#workspace-app-manager .ampm {
  /* token DS v2 (magnolia-ds.css) */
  --am-surface: #FFFFFF;   --am-surface-2: #F5F6F8;  --am-surface-3: #EBECF0;
  --am-text: #323338;      --am-muted: #676879;      --am-soft: #9699A6;
  --am-primary: #0073EA;   --am-primary-soft: #CCE5FF; --am-focus: rgba(0,115,234,.30);
  --am-border: #E6E9EF;    --am-border-2: #D0D4E4;
  --am-stuck: #E2445C;     --am-stuck-bg: #FCE8EB;
  --am-purple: #A25DDC;    --am-purple-bg: #F3EAFB;
  --am-solo: #dd3636;      --am-solo-bg: #FDEDED;
  --am-working: #FDAB3D;   --am-working-bg: #FFF4E4;  --am-working-bd: #FBDCA8;
  --am-r-sm: 4px;          --am-r: 8px;              --am-r-pill: 99px;
  --am-shadow: 0 1px 2px rgba(0,0,0,.04);
  --am-t: .14s;

  display: flex;
  align-items: stretch;
  /* ensureAmStyle() đặt .view-container{padding:16px 22px !important} → panel sẽ thụt vào giữa
     màn hình thay vì dính mép trái. Kéo ngược đúng bằng lượng padding đó. */
  margin: -16px -22px;
  min-height: calc(100vh - 118px);
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
  color: var(--am-text);
}

#workspace-app-manager .ampm button { font-family: inherit; color: inherit; cursor: pointer; }
#workspace-app-manager .ampm :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--am-focus); }
#workspace-app-manager .ampm .ampm-ic {
  width: 16px; height: 16px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
#workspace-app-manager .ampm .ampm-num { font-variant-numeric: tabular-nums; }

/* ── PANEL TRÁI ─────────────────────────────────────────────────────────── */
#workspace-app-manager .ampm-pnl {
  width: 248px; flex: none; display: flex; flex-direction: column;
  background: var(--am-surface); border-right: 1px solid var(--am-border);
  transition: width var(--am-t);
}
#workspace-app-manager .ampm-pnl.is-mini { width: 0; border-right: none; overflow: hidden; }

#workspace-app-manager .ampm-top {
  padding: 8px; border-bottom: 1px solid var(--am-border);
  display: flex; flex-direction: column; gap: 8px;
}

/* chọn dev */
#workspace-app-manager .ampm-dev {
  height: 40px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 8px;
  border: 1px solid var(--am-border); border-radius: var(--am-r); background: var(--am-surface);
}
#workspace-app-manager .ampm-dev:hover { background: var(--am-surface-2); }
#workspace-app-manager .ampm-dev .ampm-nm { font-size: 13px; font-weight: 700; flex: 1; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#workspace-app-manager .ampm-dev .ampm-n { font-size: 12px; color: var(--am-muted); }

/* ô tìm */
#workspace-app-manager .ampm-srch {
  height: 32px; display: flex; align-items: center; gap: 4px; padding: 0 8px;
  border: 1px solid var(--am-border); border-radius: var(--am-r-sm);
  background: var(--am-surface-2); color: var(--am-soft);
}
#workspace-app-manager .ampm-srch:focus-within {
  background: var(--am-surface); border-color: var(--am-primary); box-shadow: 0 0 0 3px var(--am-focus);
}
#workspace-app-manager .ampm-srch input {
  border: none; background: none; outline: none; flex: 1; min-width: 0;
  font-family: inherit; font-size: 13px; color: var(--am-text);
}
#workspace-app-manager .ampm-srch input::placeholder { color: var(--am-soft); }

/* chip phạm vi Còn việc / Tất cả */
#workspace-app-manager .ampm-scope { display: flex; gap: 4px; }
#workspace-app-manager .ampm-scope button {
  height: 24px; padding: 0 10px; border-radius: var(--am-r-pill);
  border: 1px solid var(--am-border); background: var(--am-surface); color: var(--am-muted);
  font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px;
}
#workspace-app-manager .ampm-scope button:hover { background: var(--am-surface-2); }
#workspace-app-manager .ampm-scope button.is-on {
  background: var(--am-primary); border-color: var(--am-primary); color: #fff;
}
#workspace-app-manager .ampm-scope .ampm-d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* danh sách */
#workspace-app-manager .ampm-list { flex: 1; overflow-y: auto; padding: 8px 0 0; }
#workspace-app-manager .ampm-list::-webkit-scrollbar { width: 8px; }
#workspace-app-manager .ampm-list::-webkit-scrollbar-thumb { background: var(--am-border-2); border-radius: 4px; }

/* dòng project — 36px CỐ ĐỊNH, đây là thứ làm nó "đều" */
#workspace-app-manager .ampm-row {
  height: 36px; width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 0; border: none; background: none;
  border-left: 3px solid transparent; position: relative; text-align: left;
}
#workspace-app-manager .ampm-row:hover { background: var(--am-surface-2); }
#workspace-app-manager .ampm-row.is-on { background: #E5F0FF; border-left-color: var(--am-primary); color: var(--am-primary); }
#workspace-app-manager .ampm-row.is-on .ampm-nm { font-weight: 700; }
#workspace-app-manager .ampm-row .ampm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-left: 9px; }
#workspace-app-manager .ampm-row .ampm-ic { color: var(--am-muted); }
#workspace-app-manager .ampm-row.is-on .ampm-ic { color: var(--am-primary); }
#workspace-app-manager .ampm-row .ampm-nm {
  flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#workspace-app-manager .ampm-row .ampm-bdg {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--am-r-pill);
  background: var(--am-surface-3); color: var(--am-muted);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none;
}
#workspace-app-manager .ampm-row.is-on .ampm-bdg { background: var(--am-primary); color: #fff; }
/* dòng ĐANG MỞ nhưng 0 việc: ở chế độ "Còn việc" vẫn phải hiện, không thì mở Sales OS xong
   panel nuốt mất chính dòng vừa bấm. */
#workspace-app-manager .ampm-row.is-kept .ampm-nm { color: var(--am-soft); }
#workspace-app-manager .ampm-row.is-kept::after {
  content: 'đang mở'; position: absolute; right: 12px;
  font-size: 9.5px; color: var(--am-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}

/* dòng ghim "Tất cả task" */
#workspace-app-manager .ampm-pin { margin-bottom: 8px; border-bottom: 1px solid var(--am-border); }
#workspace-app-manager .ampm-pin .ampm-row { height: 38px; }

/* group header — tint + accent 3px (DS luật 11) */
#workspace-app-manager .ampm-grp {
  height: 28px; width: 100%; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 0;
  border: none; border-left: 3px solid var(--ampm-gc, var(--am-border-2));
  background: var(--ampm-gbg, var(--am-surface-2));
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--am-muted); margin-top: 8px;
}
#workspace-app-manager .ampm-grp .ampm-ic { width: 12px; height: 12px; margin-left: 9px; transition: transform var(--am-t); }
#workspace-app-manager .ampm-grp.is-shut .ampm-ic { transform: rotate(-90deg); }
#workspace-app-manager .ampm-grp .ampm-t { flex: 1; text-align: left; }
#workspace-app-manager .ampm-grp .ampm-n { font-size: 11px; }
#workspace-app-manager .ampm-grpb.is-shut { display: none; }

#workspace-app-manager .ampm-bot { padding: 8px; border-top: 1px solid var(--am-border); }
#workspace-app-manager .ampm-ghost {
  width: 100%; height: 32px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed var(--am-border-2); border-radius: var(--am-r); background: none;
  color: var(--am-primary); font-size: 12.5px; font-weight: 700;
}
#workspace-app-manager .ampm-ghost:hover { background: var(--am-primary-soft); border-color: var(--am-primary); }

/* ── KHU NỘI DUNG ───────────────────────────────────────────────────────── */
#workspace-app-manager .ampm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#workspace-app-manager .ampm-hd {
  background: var(--am-surface); border-bottom: 1px solid var(--am-border); padding: 12px 16px 0;
}
#workspace-app-manager .ampm-hdt { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#workspace-app-manager .ampm-hdt h2 { margin: 0; font-size: 18px; font-weight: 700; }
#workspace-app-manager .ampm-hdt .ampm-sub { font-size: 13px; color: var(--am-muted); font-weight: 400; }
#workspace-app-manager .ampm-hdt .ampm-cnt {
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--am-r-pill);
  background: var(--am-stuck); color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
#workspace-app-manager .ampm-sp { flex: 1; }
#workspace-app-manager .ampm-iconbtn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--am-r-sm); color: var(--am-muted);
}
#workspace-app-manager .ampm-iconbtn:hover { background: var(--am-surface-2); color: var(--am-text); }

/* dải view Kanban | Gantt | Thẻ */
#workspace-app-manager .ampm-views { display: flex; gap: 2px; }
#workspace-app-manager .ampm-views button {
  height: 34px; padding: 0 12px; border: none; background: none;
  color: var(--am-muted); font-size: 13px; font-weight: 700; border-bottom: 3px solid transparent;
}
#workspace-app-manager .ampm-views button:hover { color: var(--am-text); background: var(--am-surface-2); }
#workspace-app-manager .ampm-views button.is-on { color: var(--am-primary); border-bottom-color: var(--am-primary); }

#workspace-app-manager .ampm-body { flex: 1; min-width: 0; padding: 16px; }

/* View Gantt / Thẻ project mượn nguyên khối "Quản lý project" sẵn có. Khối đó tự mang
   thanh tiêu đề thu-gọn + 2 nút Gantt/Thẻ của riêng nó — giờ đã có dải view ở trên nên
   giấu đi, không thì màn hình có HAI bộ chuyển view chồng nhau. Chỉ giấu bằng CSS, phần
   tử vẫn nằm trong DOM để wireHead() gắn sự kiện không lỗi. */
#workspace-app-manager .ampm-body #amv3-pboard .amv3-pb-view,
#workspace-app-manager .ampm-body #amv3-pboard #amv3-pb-tg { display: none !important; }
#workspace-app-manager .ampm-body #amv3-pboard > div {
  border: none !important; border-radius: 0 !important; padding: 0 !important; margin-bottom: 0 !important;
}

/* ── popover dùng chung (chọn dev · Người · Lọc · ⋯) ─────────────────────── */
.ampm-pop {
  position: absolute; z-index: 100001; background: #fff; border: 1px solid #E6E9EF;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px; min-width: 210px;
  max-height: 70vh; overflow: auto;
  font-family: 'Public Sans', 'Be Vietnam Pro', 'Figtree', system-ui, sans-serif;
}
.ampm-pop h4 {
  margin: 8px 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: #9699A6; font-weight: 700;
}
.ampm-pop h4:first-child { margin-top: 0; }
.ampm-pop label {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px;
  border-radius: 4px; font-size: 13px; cursor: pointer; color: #323338;
}
.ampm-pop label:hover { background: #F5F6F8; }
.ampm-pop label input { accent-color: #0073EA; width: 15px; height: 15px; margin: 0; }
.ampm-pop .ampm-mi {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px; width: 100%;
  border: none; background: none; border-radius: 4px; font-size: 13px; text-align: left;
  color: #323338; cursor: pointer; font-family: inherit;
}
.ampm-pop .ampm-mi:hover { background: #F5F6F8; }
.ampm-pop .ampm-sep { height: 1px; background: #E6E9EF; margin: 8px 0; }
.ampm-pop .ampm-ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── báo bộ lọc ngày đang giấu việc ──────────────────────────────────────── */
/* Thiếu dòng này thì milestone đã xong 100% mở ra là board trắng 5 cột 0 thẻ, không một lời
   giải thích — trông hệt như mất sạch task (sự cố APP MOBILE 05/08/2026). */
#workspace-app-manager .ampm-dtnote {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 8px 12px;
  background: var(--am-working-bg); border: 1px solid var(--am-working-bd);
  border-left: 3px solid var(--am-working); border-radius: var(--am-r);
  font-size: 13px; line-height: 1.4; color: var(--am-text);
}
#workspace-app-manager .ampm-dtnote .ampm-ic { color: var(--am-working); }
#workspace-app-manager .ampm-dtnote > span { flex: 1; min-width: 0; }
#workspace-app-manager .ampm-dtnote b { font-weight: 700; font-variant-numeric: tabular-nums; }
#workspace-app-manager .ampm-dtnote button {
  flex: none; height: 28px; padding: 0 12px;
  border: 1px solid var(--am-primary); border-radius: var(--am-r-sm);
  background: var(--am-primary); color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
#workspace-app-manager .ampm-dtnote button:hover { background: #0060B9; border-color: #0060B9; }

/* ── nút "Đang ẩn" + danh sách hiện lại ──────────────────────────────────── */
/* Chỉ mọc ra khi thật sự có project bị ẩn — không có thì đáy panel y như cũ. */
#workspace-app-manager .ampm-bot { display: flex; flex-direction: column; gap: 6px; }
#workspace-app-manager .ampm-ghost.ampm-hid {
  border-style: solid; border-color: var(--am-border); color: var(--am-muted);
}
#workspace-app-manager .ampm-ghost.ampm-hid:hover {
  background: var(--am-surface-2); border-color: var(--am-border-2); color: var(--am-text);
}
#workspace-app-manager .ampm-ghost.ampm-hid b {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--am-r-pill);
  background: var(--am-surface-3); color: var(--am-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ampm-pop .ampm-mi .ampm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ampm-pop .ampm-mi .ampm-mi-nm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px;
}
.ampm-pop .ampm-mi .ampm-mi-act {
  margin-left: auto; padding-left: 12px; flex: none;
  font-size: 11.5px; font-weight: 700; color: #0073EA;
}
.ampm-pop .ampm-mi[disabled] { opacity: .45; cursor: default; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  #workspace-app-manager .ampm-pnl { width: 56px; }
  #workspace-app-manager .ampm-pnl .ampm-nm,
  #workspace-app-manager .ampm-pnl .ampm-grp .ampm-t,
  #workspace-app-manager .ampm-pnl .ampm-grp .ampm-n,
  #workspace-app-manager .ampm-pnl .ampm-srch input,
  #workspace-app-manager .ampm-pnl .ampm-dev .ampm-n,
  #workspace-app-manager .ampm-pnl .ampm-scope,
  #workspace-app-manager .ampm-pnl .ampm-ghost span,
  #workspace-app-manager .ampm-row.is-kept::after { display: none; }
  #workspace-app-manager .ampm-row { padding-right: 0; justify-content: center; }
  /* 56px không đủ cho CẢ chấm lẫn icon → bỏ chấm, tô p.color thẳng vào icon */
  #workspace-app-manager .ampm-row .ampm-dot { display: none; }
  #workspace-app-manager .ampm-row .ampm-ic { width: 19px; height: 19px; color: var(--ampm-pc, var(--am-muted)); }
  #workspace-app-manager .ampm-row.is-on .ampm-ic { color: var(--am-primary); }
  #workspace-app-manager .ampm-row .ampm-bdg {
    position: absolute; right: 3px; top: 3px; min-width: 14px; height: 14px; padding: 0 3px;
    font-size: 9px; background: var(--am-stuck); color: #fff; box-shadow: 0 0 0 2px var(--am-surface);
  }
  #workspace-app-manager .ampm-grp { height: 3px; margin-top: 8px; border-left: none; background: var(--ampm-gc); }
  #workspace-app-manager .ampm-grp .ampm-ic { display: none; }
}

@media (max-width: 859px) {
  #workspace-app-manager .ampm-pnl {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 900; width: 248px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateX(-110%); transition: transform .2s;
  }
  #workspace-app-manager .ampm-pnl.is-show { transform: none; }
  #workspace-app-manager .ampm-pnl.is-show::before {
    content: ''; position: fixed; left: 248px; right: 0; top: 0; bottom: 0;
    background: rgba(0,0,0,.28); z-index: -1;
  }
  /* TRẢ LẠI ĐỦ mọi thứ rule mini (≤1099px) đã tắt. Thiếu cái nào hỏng cái đó — bỏ sót
     background của .ampm-grp là header nhóm thành thanh màu đặc, chữ không đọc được. */
  #workspace-app-manager .ampm-pnl.is-show .ampm-nm,
  #workspace-app-manager .ampm-pnl.is-show .ampm-grp .ampm-t,
  #workspace-app-manager .ampm-pnl.is-show .ampm-grp .ampm-n,
  #workspace-app-manager .ampm-pnl.is-show .ampm-srch input,
  #workspace-app-manager .ampm-pnl.is-show .ampm-dev .ampm-n,
  #workspace-app-manager .ampm-pnl.is-show .ampm-scope,
  #workspace-app-manager .ampm-pnl.is-show .ampm-ghost span,
  #workspace-app-manager .ampm-pnl.is-show .ampm-row .ampm-dot,
  #workspace-app-manager .ampm-pnl.is-show .ampm-row.is-kept::after { display: revert; }
  #workspace-app-manager .ampm-pnl.is-show .ampm-scope { display: flex; }
  #workspace-app-manager .ampm-pnl.is-show .ampm-row { padding-right: 12px; justify-content: flex-start; }
  #workspace-app-manager .ampm-pnl.is-show .ampm-row .ampm-ic { width: 16px; height: 16px; color: var(--am-muted); }
  #workspace-app-manager .ampm-pnl.is-show .ampm-row.is-on .ampm-ic { color: var(--am-primary); }
  #workspace-app-manager .ampm-pnl.is-show .ampm-row .ampm-bdg {
    position: static; min-width: 20px; height: 18px; padding: 0 6px; font-size: 11px;
    background: var(--am-surface-3); color: var(--am-muted); box-shadow: none;
  }
  #workspace-app-manager .ampm-pnl.is-show .ampm-row.is-on .ampm-bdg { background: var(--am-primary); color: #fff; }
  #workspace-app-manager .ampm-pnl.is-show .ampm-grp {
    height: 28px; margin-top: 8px; background: var(--ampm-gbg); border-left: 3px solid var(--ampm-gc);
  }
  #workspace-app-manager .ampm-pnl.is-show .ampm-grp .ampm-ic { display: block; width: 12px; height: 12px; }
  #workspace-app-manager .ampm-burger { display: flex !important; }
}