/* =============================================================================
   MÀN DANH SÁCH ĐƠN HÀNG MUA (/purchase/orders) + ĐƠN HÀNG BÁN (/sales/orders)
   -----------------------------------------------------------------------------
   Phạm vi: CHỈ hai màn danh sách, bật bằng <VoucherView Class="op-list"> ở
   OrderPurchaseManager.razor / OrderSaleManager.razor. DOM chung của cả hai:
     .voucher-container.voucher-split.op-list > SfSplitter (dọc)
       pane 1: .voucher-panel--list  = .voucher-action (ToolbarVoucherCustom) + .voucher-list (SfGrid)
       pane 2: .voucher-panel--detail = SfTab (1 tab) > SfGrid chi tiết
   Popup chi tiết phiếu KHÔNG nằm ở đây — xem order-purchase.css (.op-form-root).

   Vì sao file toàn cục chứ không phải VoucherView.razor.css / ToolbarVoucherCustom.razor.css:
   CSS isolation của module được gộp bằng @import tới tên CÓ fingerprint, dev server chỉ phục
   vụ tên KHÔNG fingerprint ⇒ 404 (xem voucher.css, khối .vhb-btn). Nên cả hai file isolation
   đều không tới trình duyệt khi chạy dev — kể cả quy tắc bố cục (thẻ panel, khe splitter,
   toolbar flex-wrap). Những quy tắc bố cục cần cho giao diện được KHAI LẠI ở đây.

   Luật của file:
     1. Mọi selector bắt đầu bằng .op-list.voucher-split — độ đặc hiệu ≥ (0,3,0), thắng cả bản
        isolation (thêm [b-…]) nếu bản build publish có nạp được bundle. KHÔNG dùng :has(),
        KHÔNG để '*' ở vế phải cùng, không xâu chuỗi :not() dài trên selector theo từng ô lưới.
     2. VIỀN luôn xám trung tính — màu chỉ nằm ở NỀN, chữ, icon, nút (không viền màu, không
        vạch màu bên trái, không gạch chân màu).
     3. Nền trang + card cùng tông XANH TRỜI, card sáng hơn nền một bậc, tách bằng viền xám
        #bcc3ce + bóng đổ nhẹ. Hạn chế nền trắng ở mọi chỗ.
     4. Ô nhập: nền theo card nhưng nhạt hơn (không xám, không trắng); viền thường #a3aab7,
        hover ĐẬM hơn #6f7889; focus giữ nền, chỉ đổi viền + vòng sáng mờ.
     5. Thân bảng xám nhạt #f5f6f8 / #eceef2, tiêu đề cột xanh nhạt chữ xanh đậm #1b3f6e.
        Cột ghim (checkbox + STT) là position:sticky ⇒ nền ô phải ĐỤC, đặt trên td/th.
     6. Nút hành động luôn ĐỔ NỀN màu (không nút viền nền trắng).
     7. Bo góc một thang: card 12px, thẻ con/bảng/panel 10px, nút/ô nhập 8px, chip 999px.
   File phải nạp SAU cms.css + smart-custom.css (tiêu đề lưới, tab, phân trang dùng !important).
   ============================================================================= */

/* ---------- Token + nền trang ----------
   Bảng màu soi theo order-purchase.css (form đã được duyệt) nhưng khai lại trên gốc danh sách
   vì token --op-* chỉ sống trong .op-form-root. */
.op-list.voucher-split.voucher-container {
  --ol-page-bg: linear-gradient(160deg, #cbe0f7 0%, #d8e8fa 50%, #cadff6 100%);
  --ol-card: linear-gradient(180deg, #f1f7ff 0%, #e7f1fd 100%);
  --ol-card-solid: #ecf4fe;
  --ol-toolbar: linear-gradient(90deg, #d3e6fb 0%, #e0edfc 55%, #eaf3fe 100%);
  --ol-head-bg: linear-gradient(180deg, #d6e6f9 0%, #c4dbf4 100%);
  --ol-head-bg-solid: #cfe1f7;
  --ol-head-text: #1b3f6e;
  --ol-text: #1b1c1f;
  --ol-row: #f5f6f8;
  --ol-row-alt: #eceef2;
  --ol-row-hover: #dde9f7;
  --ol-row-sel: #c9def7;
  --ol-group-bg: #e3edf9;
  --ol-group-drop: #dce9f8;
  --ol-input-bg: #f7fbff;
  --ol-input-border: #a3aab7;
  --ol-input-border-hover: #6f7889;
  --ol-input-ring: 0 0 0 3px rgba(42, 120, 214, .20);
  --ol-border: #bcc3ce;
  --ol-border-soft: #dfe3e9;
  --ol-divider: #c9d1dc;
  --ol-shadow: 0 3px 10px rgba(20, 60, 120, .13), 0 1px 2px rgba(27, 28, 31, .08);
  --ol-radius: 12px;
  --ol-radius-sm: 8px;
  --ol-radius-pill: 999px;
  --ol-accent: var(--st-s2, #2a78d6);
  --ol-accent-2: #4f97ea;
  --ol-accent-700: #1d5fb0;
  --ol-good: var(--st-good, #0E9F4F);
  --ol-good-2: #22b865;
  --ol-good-700: #0b8442;
  --ol-teal: #0f8fa8;
  --ol-teal-2: #1fb3c9;
  --ol-teal-700: #0c7489;
  --ol-danger-soft: #fde3e4;
  --ol-danger-soft-hover: #fbcdd0;
  --ol-danger-text: #b02a37;
  --ol-soft-btn: #dce9f8;
  --ol-soft-btn-hover: #cadef5;

  display: block;
  height: auto; /* chiều cao do SfSplitter mang (tham số SplitterHeight) */
  width: auto;
  min-width: 0;
  /* Lề âm + padding bằng nhau: nền xanh trời tràn ra vùng padding của .tabs-body mà vị trí,
     chiều cao của splitter giữ NGUYÊN — thêm padding thuần là cộng thêm chiều cao ⇒ sinh cuộn
     ngoài (xem ghi chú chiều cao ở VoucherView.razor.css). Bằng đúng padding .tabs-body ở MainLayout (6px 8px). */
  margin: -6px -8px;
  padding: 6px 8px;
  background: var(--ol-page-bg);
  border-radius: var(--ol-radius);
}

/* ---------- Card ----------
   overflow:hidden giữ bo góc cho nội dung bên trong — đừng bỏ. */
.op-list.voucher-split .voucher-panel {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  background: var(--ol-card);
  border: 1px solid var(--ol-border);
  border-radius: var(--ol-radius);
  box-shadow: var(--ol-shadow);
  overflow: hidden;
}

/* Panel 1: thanh công cụ nằm trên, lưới danh sách ăn hết phần còn lại */
.op-list.voucher-split .voucher-panel--list {
  display: flex;
  flex-direction: column;
}

/* flex: 1 1 0 + min-height: 0 mới cho lưới co lại được */
.op-list.voucher-split .voucher-list {
  flex: 1 1 0;
  min-height: 0;
}

/* ---------- Thanh công cụ ----------
   Không sticky ở bố cục panel (giữ như bản gốc); góc trên do card bo. */
.op-list.voucher-split .voucher-action {
  position: static;
  flex: 0 0 auto;
  background: var(--ol-toolbar);
  border: 0;
  border-bottom: 1px solid var(--ol-divider);
  border-radius: 0;
}

/* Bố cục khai lại từ ToolbarVoucherCustom.razor.css (bản isolation 404 khi chạy dev):
   cho cả HÀNG xuống dòng thay vì bóp từng nút. */
.op-list.voucher-split .header-container {
  width: 100%;
  min-width: 0;
}

.op-list.voucher-split .top-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  row-gap: 6px;
  padding: 7px 10px;
}

.op-list.voucher-split .header-left {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

/* "Thời gian: [__/__ - __/__] [Lọc]" luôn nằm trên MỘT dòng, không co */
.op-list.voucher-split .header-filter {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.op-list.voucher-split .header-filter-label {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ol-head-text);
}

.op-list.voucher-split .header-custom-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.op-list.voucher-split .header-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

.op-list.voucher-split .header-action,
.op-list.voucher-split .header-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* Vạch ngăn nhóm nút nghiệp vụ và nhóm cấu hình lưới — xám trung tính */
.op-list.voucher-split .header-button {
  position: relative;
  padding-left: 10px;
}

.op-list.voucher-split .header-button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  border-left: 1px solid var(--ol-divider);
}

/* ---------- Màn hẹp (khai lại từ ToolbarVoucherCustom.razor.css) ---------- */
/* Không đủ chỗ cho một hàng: cụm nút xuống dòng riêng, canh TRÁI thẳng với bộ lọc */
@media (max-width: 1280px) {
  .op-list.voucher-split .header-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* Rất hẹp: bỏ nhãn "Thời gian:" (ô đã có icon lịch) và vạch ngăn */
@media (max-width: 640px) {
  .op-list.voucher-split .header-filter-label {
    display: none;
  }

  .op-list.voucher-split .header-button {
    padding-left: 0;
  }

  .op-list.voucher-split .header-button::before {
    display: none;
  }
}