/* Dải nhóm trong danh sách — kiểu A "thanh nhấn" (screen-standard Slice 107, user chọn 20/10).
 *
 * Một khối cho mọi danh sách có nhóm: Công việc (Việc, Dự án), Thanh toán, Tủ bếp CBD,
 * Cổng đối tác › Giao hàng. Mẩu: core/templates/core/group_band/_band.html; JS:
 * core/static/core/js/group-band.js; Python: core/group_bands.py.
 *
 * Màu CHỈ từ biến của khung: Unfold (`--color-primary-*`, `--color-base-*`, …). Cổng đối
 * tác không nạp CSS của Unfold, nên vỏ cổng gán lại sáu biến `--wl-band-*` dưới đây
 * bằng biến của chính nó (partners/_shared_tools.html, infra ADR 0009).
 */

:root {
  --wl-band-accent: var(--color-primary-600);
  --wl-band-soft: var(--color-primary-50);
  --wl-band-soft-hover: var(--color-primary-100);
  --wl-band-line: var(--color-primary-200);
  --wl-band-track: var(--color-base-200);
  --wl-band-done: var(--color-green-600);
  --wl-band-over: var(--color-red-600);
  --wl-band-strong: var(--color-font-important-light);
  --wl-band-subtle: var(--color-font-subtle-light);
  --wl-band-bg: var(--color-white);
}

.dark {
  --wl-band-accent: var(--color-primary-400);
  /* Đục (trộn với nền), vì ô ghim của Thanh toán và nhãn dính trái phải che được dòng dưới. */
  --wl-band-soft: color-mix(in oklab, var(--color-primary-500) 16%, var(--color-base-900));
  --wl-band-soft-hover: color-mix(in oklab, var(--color-primary-500) 26%, var(--color-base-900));
  --wl-band-line: color-mix(in oklab, var(--color-primary-400) 45%, var(--color-base-900));
  /* Vạch nền thanh xong rõ hơn bản mockup (tồn nhỏ 20/10). */
  --wl-band-track: var(--color-base-600);
  --wl-band-done: var(--color-green-400);
  --wl-band-over: var(--color-red-400);
  --wl-band-strong: var(--color-font-important-dark);
  --wl-band-subtle: var(--color-font-subtle-dark);
  --wl-band-bg: var(--color-base-900);
}

/* ---------- thân dải ---------- */

.wl-band {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 12px;
  color: var(--wl-band-subtle);
  font-size: 12px;
  line-height: 1.3;
}

.wl-band--2 {
  min-height: 40px;
  padding-left: 14px;
}

.wl-band__elbow {
  flex: none;
  width: 14px;
  height: 20px;
  margin-left: 6px;
  border-left: 1px solid var(--wl-band-line);
  border-bottom: 1px solid var(--wl-band-line);
  border-bottom-left-radius: 6px;
  transform: translateY(-9px);
}

.wl-band__check {
  flex: none;
}

.wl-band__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 2px 4px 2px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wl-band__toggle:focus-visible {
  outline: 2px solid var(--wl-band-accent);
  outline-offset: 2px;
}

.wl-band .wl-band__chev {
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

.wl-band .wl-band__toggle[aria-expanded="false"] .wl-band__chev {
  transform: rotate(-90deg);
}

.wl-band__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wl-band-strong);
  font-size: 14px;
  font-weight: 600;
}

.wl-band--2 .wl-band__name {
  font-size: 13px;
}

.wl-band__code {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
}

.wl-band__cont,
.wl-band__count {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wl-band__cont {
  font-style: italic;
}

.wl-band__sum {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wl-band--1 .wl-band__sum {
  padding-left: 12px;
  border-left: 1px solid var(--wl-band-line);
}

.wl-band__over {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--wl-band-over);
  font-weight: 600;
}

.wl-band__over::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.wl-band__prog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wl-band__prog > i {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--wl-band-track);
}

.wl-band__prog > i > b {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
  background: var(--wl-band-done);
}

.wl-band__extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- dải trong bảng ---------- */

.wl-band-row--1 > td,
td.wl-band-row--1,
.wl-band-row--1 {
  background: var(--wl-band-soft);
  cursor: pointer;
}

.wl-band-row--2 > td,
td.wl-band-row--2,
.wl-band-row--2 {
  background: var(--wl-band-bg);
  cursor: pointer;
}

tr.wl-band-row > td {
  border-top: 1px solid var(--wl-band-line);
}

/* Dải trải cả bề ngang bảng (một ô colspan): thân dải tự lo khoảng đệm. Dải đủ cột
 * (Thanh toán) giữ khoảng đệm của từng ô. */
tr.wl-band-row > td[colspan] {
  padding: 0;
}

/* Thanh nhấn 3px bên trái của cấp 1, nét cây mảnh của cấp 2. */
tr.wl-band-row--1 > td:first-child,
.wl-band-row--1.wl-band-card {
  box-shadow: inset 3px 0 0 var(--wl-band-accent);
}

tr.wl-band-row--2 > td:first-child {
  box-shadow: inset 1px 0 0 var(--wl-band-line);
}

tr.wl-band-row--1:hover > td {
  background: var(--wl-band-soft-hover);
}

/* Cuộn ngang: thân dải dính trái và rộng đúng khung đang thấy, nên tên nhóm và tóm tắt
 * luôn đọc được (`--wl-band-width` do group-band.js đo trên khung cuộn). */
@media (min-width: 1024px) {
  tr.wl-band-row > td[colspan] > .wl-band {
    position: sticky;
    left: 0;
    width: var(--wl-band-width, auto);
    max-width: 100%;
  }
}

/* Dòng dữ liệu giữ nét mảnh của nhóm để biết mình thuộc nhóm nào. */
[data-group-list] tr[data-group-member] > td:first-child {
  box-shadow: inset 1px 0 0 var(--wl-band-line);
}

/* ---------- Mở hết / Thu hết ---------- */

.wl-band-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}

.wl-band-tools__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--wl-band-subtle);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.wl-band-tools__btn:hover {
  background: var(--wl-band-soft);
  color: var(--wl-band-strong);
}

.wl-band-tools__btn:focus-visible {
  outline: 2px solid var(--wl-band-accent);
  outline-offset: 2px;
}

.wl-band-tools__btn svg {
  width: 16px;
  height: 16px;
}

/* ---------- điện thoại: mỗi nhóm một khối có dải đầu (mockup A) ---------- */

/* Chỉ bảng dòng của khuôn danh sách, nơi Unfold đổi dòng thành thẻ dưới 1024px (lớp
 * `block lg:table-row`); bảng vẫn là bảng trên điện thoại (Thanh toán) giữ nguyên dải. */
@media (max-width: 1023.98px) {
  table.result-list tr.wl-band-row > td {
    border: 0;
  }

  table.result-list tr.wl-band-row--1 {
    margin-top: 12px;
  }

  table.result-list tr.wl-band-row--1 > td {
    border-radius: 0 6px 6px 0;
  }

  table.result-list tr.wl-band-row--2 > td {
    background: transparent;
    box-shadow: none;
  }

  .wl-band {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  /* Ô tích, nút và tên trên một hàng (tên cắt "…"), tóm tắt xuống hàng dưới. */
  .wl-band__toggle {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
  }

  .wl-band__sum {
    flex-basis: 100%;
    flex-wrap: wrap;
    padding-left: 28px;
  }

  .wl-band--1 .wl-band__sum {
    border-left: 0;
  }

  /* Thẻ dòng thụt vào dưới dải, nét cây nối về thanh nhấn. */
  table.result-list tr.data-row[data-group-member] {
    margin-left: 10px;
  }

  table.result-list tr[data-group-member] > td:first-child {
    box-shadow: none;
  }
}

/* Dải trong một ô hẹp (ô ghim tên nhóm của Thanh toán): số dòng xuống dòng dưới tên
 * thay vì tràn; tên vẫn cắt "…" như mọi dải. */
.wl-band--wrap,
.wl-band--wrap .wl-band__toggle {
  flex-wrap: wrap;
  row-gap: 2px;
}

/* Bảng dòng của danh sách có nhóm mang lớp `result-list` như bản gốc của Unfold:
 * actions.js của Django tìm bảng bằng lớp ấy để đếm dòng đã tích. */
table.result-list[data-group-list] {
  border-spacing: 0;
}