/* Áp bộ thiết kế ERP cho VÙNG LÀM VIỆC và LƯỚI (SfGrid).
   Token khai ở erp-tokens.css (.tabs-body nằm trong danh sách selector).

   PHẠM VI CỐ Ý HẸP — chỉ đổi màu nền, màu dòng chọn và font chữ:
   - KHÔNG đổi mật độ dòng (padding, font-size của .e-rowcell / .e-headercell). Độ rộng cột
     do CMS cấu hình, đổi mật độ là lệch bố cục cột — xem chú thích đầu
     Modules/VoucherModule/Layout/VoucherView/VoucherView.razor.css.
   - KHÔNG đổi màu nút (e-success / e-danger còn nguyên, 244 + 75 chỗ trong .razor).
   Hai việc đó để lần sau, theo quyết định của người dùng 28/08/2026. */

/* ============ VÙNG LÀM VIỆC ============ */

/* Nền xám để hai panel trắng của VoucherView nổi lên và khe giữa chúng thành ranh giới
   (02-layout.md §5). Khe đó là thanh kéo của SfSplitter, nền trong suốt nên tự lấy màu này. */
.tabs > .tabs-body {
    background: var(--canvas);
}

/* Bắt buộc đi kèm: .tabs-body-content tự vẽ nền trắng phủ kín, không cho trong suốt thì
   màu canvas chỉ hiện ra ở dải padding — bẫy phụ mục 5, docs/voucher-view-port-kit/README.md. */
.tabs > .tabs-body .tabs-body-content {
    background: transparent;
}

/* ============ LƯỚI ============ */

.e-grid {
    font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Header: dùng ĐÚNG màu nền vùng làm việc (--canvas) chứ không phải --surface-alt, để dải
   header của lưới liền màu với nền ngoài panel.
   smart-custom.css:114 đặt #eeeeee kèm !important nên phải !important mới thắng.
   Chỉ đổi MÀU — chiều cao 30px, cỡ chữ 14px/500 ở file đó giữ nguyên. */
.e-grid .e-gridheader,
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    background-color: var(--canvas) !important;
}

/* Dòng tính tổng nằm ở .e-gridfooter (kiểm trên DOM thật: không phải .e-summaryrow như
   tài liệu Syncfusion mô tả cho grid có GridAggregate lồng trong content). Cho cùng nền
   với header để hai dải mép trên/mép dưới của lưới đồng bộ. */
.e-grid .e-gridfooter,
.e-grid .e-summaryrow,
.e-grid .e-summarycell {
    background-color: var(--canvas) !important;
}

/* Dòng đang chọn: đổi từ #ffdede sang brand-soft của bộ token.
   Màu PHẢI đục — cột ghim là position: sticky, đè lên cột cuộn phía dưới; nền rgba() bán
   trong suốt làm chữ lộ xuyên qua (bẫy 10, docs/voucher-view-port-kit/README.md). */
.e-grid .e-rowcell.e-selectionbackground,
.e-grid td.e-active,
.e-grid td.e-selectionbackground {
    background: var(--brand-soft) !important;
}