/* Áp bộ thiết kế ERP cho VÙNG LÀM VIỆC và LƯỚI (SfGrid).
   Token khai ở erp-chrome.css (khối "CẦU NỐI TOKEN"), nạp file này SAU nó.

   Port từ SmartAccCloud.WebWasm/wwwroot/css/erp-content.css.

   PHẠM VI CỐ Ý HẸP — chỉ đổi màu nền vùng làm việc và nền dải header/footer của lưới:
   - 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.
   - KHÔNG đổi màu nút (e-success / e-danger giữ nguyên).
   - KHÔNG port khối tô màu dòng đang chọn của bản gốc. Repo này đã có rule tương đương
     ở smart-custom.css (.e-rowcell.e-selectionbackground / td.e-cellselectionbackground
     dùng --hrm-primary-50 + --hrm-primary-ink). Hai rule cùng !important ở hai file khác
     nhau là mầm mống lỗi khó truy — giữ một nơi duy nhất là smart-custom.css.
   ============================================================================= */

/* ============ 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.
   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. */
    .tabs > .tabs-body .tabs-body-content {
        background: transparent;
    }

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

/* Header lưới: dùng ĐÚNG màu nền vùng làm việc (--canvas) để dải header liền màu với
   nền ngoài panel.

   GIÁ TRỊ DỰ PHÒNG #F3F4F6 LÀ BẮT BUỘC, đừng rút gọn thành var(--canvas) trơn.
   --canvas khai ở :root nên thường có, nhưng lưới mở trong popup của Smart.Blazor nằm
   ngoài cây DOM của Layout (PopupProvider là anh em của BootstrapBlazor.Layout). Nếu vì
   lý do nào đó biến rỗng thì cả khai báo thành không hợp lệ → background-color rơi về
   transparent. Vì có !important, nó còn đè mất nền đục mà theme Syncfusion vốn cấp cho ô
   header GHIM, mà cột ghim là position: sticky nên các cột cuộn phía dưới lộ chữ xuyên qua. */
.e-grid .e-gridheader,
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    background-color: var(--canvas, #F3F4F6) !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 cùng nền với header để hai dải mép trên/mép dưới của
   lưới đồng bộ. Giá trị dự phòng cũng bắt buộc, cùng lý do như khối header ngay trên. */
.e-grid .e-gridfooter,
.e-grid .e-summaryrow,
.e-grid .e-summarycell {
    background-color: var(--canvas, #F3F4F6) !important;
}