/*
 * Tab Dự án trên máy tính (≥721px) theo mockup đã duyệt (Huashu, chốt 2026-10-05):
 * một hàng đầu (tiêu đề · thẻ nhóm dạng thanh chọn · tìm kiếm có nút Lọc · Tạo dự án),
 * mỗi nhóm một màu (Tất cả xanh dương, Tiềm năng tím, Đang sản xuất cam, Đã hoàn thành xanh lá, Hết hạn xám),
 * bảng 9 cột gọn dùng lại ô của bản điện thoại, khung hẹp gộp thẻ nhóm vào bảng Lọc.
 * Thanh 12 bước phía trên giữ nguyên. Điện thoại giữ giao diện của bms-project-mobile.css.
 * Hai :not(#\#) để thắng quy tắc ẩn phần "chỉ điện thoại" trong bms-project-mobile.css.
 */

/* ---- Bộ màu theo nhóm (dùng cho thẻ nhóm, phụ đề, dòng bảng, ô Bước, lựa chọn nhóm trong Lọc) ---- */
.panel[data-panel="project"] [data-queue-group="ALL"] { --pq-group: var(--bms-primary); --pq-group-soft: var(--bms-primary-soft); }
.panel[data-panel="project"] [data-queue-group="ACTIVE"] { --pq-group: var(--bms-review); --pq-group-soft: var(--bms-review-soft); }
.panel[data-panel="project"] [data-queue-group="PRODUCING"] { --pq-group: var(--bms-warning); --pq-group-soft: var(--bms-warning-soft); }
.panel[data-panel="project"] [data-queue-group="COMPLETED"] { --pq-group: var(--bms-success); --pq-group-soft: var(--bms-success-soft); }
.panel[data-panel="project"] [data-queue-group="EXPIRED"] { --pq-group: var(--bms-text-muted); --pq-group-soft: var(--bms-surface-subtle); }

/* ---- Bảng Lọc (máy tính và điện thoại): chip chọn nhiều có số đếm, khoảng ngày, lọc thêm ---- */
body .panel[data-panel="project"] .project-queue-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body .panel[data-panel="project"] label.project-queue-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--bms-border);
  border-radius: var(--bms-radius-round);
  background: var(--bms-surface);
  color: var(--bms-text);
  font: 600 13px/1.2 var(--bms-font-ui);
  cursor: pointer;
  user-select: none;
}
body .panel[data-panel="project"] label.project-queue-chip > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
body .panel[data-panel="project"] label.project-queue-chip > b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bms-surface-subtle); color: var(--bms-text-muted); font: 800 10px/1 var(--bms-font-ui); }
body .panel[data-panel="project"] label.project-queue-chip > i { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: var(--bms-radius-round); background: var(--bms-surface-subtle); color: var(--bms-text-muted); font: 700 11.5px/1 var(--bms-font-ui); font-style: normal; }
body .panel[data-panel="project"] label.project-queue-chip.is-zero { color: var(--bms-text-muted); }
body .panel[data-panel="project"] label.project-queue-chip:has(input:checked) { border-color: var(--bms-primary); background: var(--bms-primary-soft); color: var(--bms-primary-active, var(--bms-primary)); }
body .panel[data-panel="project"] label.project-queue-chip:has(input:checked) > :is(b, i) { background: var(--bms-primary); color: var(--bms-surface); }
body .panel[data-panel="project"] label.project-queue-chip:has(input:focus-visible) { outline: 2px solid var(--bms-primary); outline-offset: 2px; }
body .panel[data-panel="project"] .project-queue-daterange { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
body .panel[data-panel="project"] .project-queue-daterange label { display: grid; gap: 4px; color: var(--bms-text-muted); font: 600 12px/1.2 var(--bms-font-ui); }
body .panel[data-panel="project"] .project-queue-daterange input { height: 36px; padding: 0 10px; border: 1px solid var(--bms-border); border-radius: 10px; background: var(--bms-surface); color: var(--bms-text); font: 500 13px var(--bms-font-ui); }
body .panel[data-panel="project"] .project-queue-daterange > span { padding-bottom: 9px; color: var(--bms-text-muted); }
body .panel[data-panel="project"] details.project-queue-more { padding-top: 10px; border-top: 1px solid var(--bms-border); }
body .panel[data-panel="project"] details.project-queue-more > summary { color: var(--bms-text-muted); font: 600 13px var(--bms-font-ui); cursor: pointer; }
body .panel[data-panel="project"] .project-queue-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
body .panel[data-panel="project"] .project-queue-more-grid label { display: grid; gap: 4px; color: var(--bms-text-muted); font: 600 12px var(--bms-font-ui); }
body .panel[data-panel="project"] .project-queue-more-grid select { height: 40px; padding: 0 10px; border: 1px solid var(--bms-border); border-radius: 10px; background: var(--bms-surface); color: var(--bms-text); }

@media (max-width: 720px) {
  /* Điện thoại giữ cách hiển thị đã duyệt: loại dự án đầy đủ, nhãn "Đang mở" và chân bảng như cũ. */
  body .panel[data-panel="project"] :is(.pq-type-short, .pq-open-badge) { display: none; }
}

@media (min-width: 721px) {
  /* ================= Hàng đầu ================= */
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .dashboard-queue-heading { flex-wrap: nowrap; gap: 12px 16px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-title { display: flex; flex-direction: column; gap: 2px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-subtitle { display: block; color: var(--pq-group, var(--bms-text-muted)); font: 600 13px/1.2 var(--bms-font-ui); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-actions { flex: 1 1 auto; justify-content: flex-end; min-width: 0; margin-left: auto; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-actions > .bms-search { flex: 1 1 300px; min-width: 240px; max-width: 420px; padding-right: 6px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .bms-search__filter.project-queue-filter-part { display: inline-flex; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .bms-search__divider.project-queue-filter-part { display: block; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) #newProjectBtn { gap: 8px; padding: 0 20px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) #newProjectBtn .project-queue-create-icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

  /* Thẻ nhóm dạng thanh chọn (như Quản lý kho): khung viên thuốc 48px, mỗi thẻ có chấm màu và số đếm. */
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .dashboard-queue-heading .project-queue-tabs {
    display: inline-flex;
    flex: none;
    flex-wrap: nowrap;
    order: 0;
    gap: 2px;
    box-sizing: border-box;
    height: 48px;
    padding: 4px;
    border: 1px solid var(--bms-border);
    border-radius: var(--bms-radius-round);
    background: var(--bms-surface-subtle);
  }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .dashboard-queue-heading .project-queue-tabs button {
    gap: 6px;
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--bms-radius-round);
    background: transparent;
    box-shadow: none;
    color: var(--pq-group, var(--bms-text-muted));
    font: 600 13.5px/1 var(--bms-font-ui);
    white-space: nowrap;
  }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-tabs .project-queue-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pq-group, var(--bms-text-muted)); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-tabs .project-queue-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: var(--bms-radius-round); background: var(--pq-group-soft, var(--bms-surface)); color: var(--pq-group, var(--bms-text-muted)); font: 700 11.5px/1 var(--bms-font-ui); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .dashboard-queue-heading .project-queue-tabs button[aria-pressed="true"] {
    background: var(--pq-group, var(--bms-primary));
    color: var(--bms-surface);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--pq-group, var(--bms-primary)) 35%, transparent);
  }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-tabs button[aria-pressed="true"] .project-queue-dot { background: var(--bms-surface); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-tabs button[aria-pressed="true"] .project-queue-count { background: color-mix(in srgb, var(--bms-surface) 25%, transparent); color: var(--bms-surface); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-tabs button:focus-visible { outline: 2px solid var(--pq-group, var(--bms-primary)); outline-offset: 2px; }

  /* ================= Bảng Lọc ================= */
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-filter { width: 520px; max-width: calc(100vw - 32px); }
  /* Thẻ nhóm đang hiện thì bảng Lọc không lặp lại phần chọn nhóm. */
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-filter > .project-queue-group-field { display: none; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-radios { display: grid; gap: 6px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) label.project-queue-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--bms-border); border-radius: 12px; color: var(--bms-text); font: 600 14px/1.3 var(--bms-font-ui); cursor: pointer; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) label.project-queue-radio > span { flex: 1; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) label.project-queue-radio > input { width: 18px; height: 18px; margin: 0; accent-color: var(--pq-group, var(--bms-primary)); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) label.project-queue-radio > i { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: var(--bms-radius-round); background: var(--pq-group-soft, var(--bms-surface-subtle)); color: var(--pq-group, var(--bms-text-muted)); font: 700 12px/1 var(--bms-font-ui); font-style: normal; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) label.project-queue-radio:has(input:checked) { border-color: var(--pq-group, var(--bms-primary)); background: var(--pq-group-soft, var(--bms-primary-soft)); }

  /* Khung hẹp: thẻ nhóm gộp vào bảng Lọc (giống điện thoại); bảng rộng tự thu gọn menu trái. */
  @container project-queue (max-width: 1360px) {
    body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .dashboard-queue-heading .project-queue-tabs { display: none; }
    body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-filter > .project-queue-group-field { display: grid; }
  }

  /* ================= Bảng 9 cột ================= */
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap table { min-width: 1120px; table-layout: fixed; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap :is(th, td):is(.pq-client, .pq-cost) { display: none; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap :is(th, td).pq-cost-mobile { display: table-cell; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th { font-size: 12px; white-space: nowrap; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th.pq-code { width: 150px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th.pq-type { width: 110px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th.pq-step { width: 150px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th.pq-approval { width: 128px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th.pq-cost-mobile { width: 120px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th.pq-owner { width: 130px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th.pq-completion { width: 104px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th.project-vat-invoice-column { width: 116px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap th.pq-created { width: 100px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap :is(.pq-name, .pq-step, .pq-approval, .pq-owner, .pq-completion) .pq-desktop-label { display: none; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap :is(.pq-name, .pq-step, .pq-approval, .pq-owner, .pq-completion) .pq-mobile-label { display: inline; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap td { padding-top: 10px; padding-bottom: 10px; vertical-align: middle; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap :is(.pq-name-text, .pq-name-client) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap .pq-name-text { color: var(--bms-text); font-weight: 600; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap .pq-name-client { margin-top: 2px; color: var(--bms-text-muted); font-size: 12px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap .pq-type-full { display: none; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap td :is(.status) { white-space: nowrap; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap td.pq-step .status::before { display: none; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap .pq-step-no { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: var(--bms-surface); color: inherit; font: 800 10px/1 var(--bms-font-ui); font-style: normal; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap :is(.pq-date-iso, .dashboard-active-badge) { display: none; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap .pq-date-vn { display: inline; white-space: nowrap; font-variant-numeric: tabular-nums; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-table-wrap td.pq-completion { color: var(--bms-text-muted); white-space: nowrap; }

  /* Màu nhóm trên dòng: vạch trái 6px, nền nhạt, ô Bước cùng màu. */
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) tr.dashboard-project-row[data-queue-group] > td { background: color-mix(in srgb, var(--pq-group-soft) 55%, transparent); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) tr.dashboard-project-row[data-queue-group] > td.pq-code { box-shadow: inset 6px 0 0 var(--pq-group); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) tr.dashboard-project-row[data-queue-group] td.pq-step .status { border-color: color-mix(in srgb, var(--pq-group) 35%, transparent); background: var(--pq-group-soft); color: var(--pq-group); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) tr.dashboard-project-row[data-queue-group] td.pq-step .pq-step-no { background: var(--pq-group); color: var(--bms-surface); }

  /* Dự án đang mở: nền xanh nhạt và nhãn nhỏ dưới mã, không đè lên cột Ngày tạo. */
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) tr.dashboard-project-row[data-active="true"] > td { background: var(--bms-primary-soft); }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .pq-open-badge { display: block; margin-top: 3px; color: var(--bms-primary); font: 700 11px/1 var(--bms-font-ui); }

  /* Chân bảng: số dự án đang hiện (gợi ý vuốt ngang chỉ dành cho điện thoại). */
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-footer { display: block; margin: 12px 4px 0; color: var(--bms-text-muted); font-size: 13px; }
  body.bms-opendesign-v8 .panel[data-panel="project"]:not(#\#):not(#\#) .project-queue-footer-hint { display: none; }
}