.unicold-nav .mud-nav-link {
    color: #6c757d !important;
    fill: #6c757d !important;
}

    .unicold-nav .mud-nav-link:hover {
        color: #5867dd !important;
        fill: #5867dd !important;
        background-color: #e1e1ef !important;
    }

    .unicold-nav .mud-nav-link.active {
        color: #5867dd !important;
        fill: #5867dd !important;
        background-color: #e1e1ef !important;
    }

.app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .mud-nav-link-text {
    display: none;
}

.app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .mud-nav-link {
    position: relative;
}

    .app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .mud-nav-link::after {
        content: "...";
        font-size: 12px;
        margin-left: 6px;
        color: rgba(0,0,0,.6);
    }

.app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .section-caption {
    position: relative;
    visibility: hidden;
    display: block;
    height: 20px;
    margin-left: 22px;
}

    .app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .section-caption::after {
        content: "...";
        position: absolute;
        left: 0;
        top: 0;
        visibility: visible;
        font-size: 12px;
        line-height: 20px;
    }

.app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .mud-nav-link-expand-icon {
    display: none;
}

.app-drawer.mud-drawer--open .unicold-nav .mud-nav-link-text {
    display: block !important;
}

.app-drawer.mud-drawer--open .unicold-nav .mud-nav-link::after {
    content: none !important;
}

.app-drawer.mud-drawer--open .unicold-nav .section-caption {
    visibility: visible !important;
    height: auto !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    letter-spacing: .3px;
}

    .app-drawer.mud-drawer--open .unicold-nav .section-caption::after {
        content: none !important;
    }


.app-drawer {
    --nav-fg: #9aa6b2;
    --nav-hover-fg: #6b7cff;
    --nav-active-fg: #5367ff;
    --nav-hover-bg: #eef1ff;
    --nav-active-bg: #eef1ff;
    --nav-caption: #aab2c5;
}

    .app-drawer .unicold-nav .section-caption {
        color: var(--nav-caption);
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .app-drawer .unicold-nav .mud-nav-link {
        color: var(--nav-fg);
        fill: var(--nav-fg);
    }

        .app-drawer .unicold-nav .mud-nav-link .mud-nav-link-icon,
        .app-drawer .unicold-nav .mud-nav-link .mud-nav-link-text {
            color: inherit;
            fill: inherit;
        }

        .app-drawer .unicold-nav .mud-nav-link:hover {
            color: var(--nav-hover-fg);
            fill: var(--nav-hover-fg);
            background-color: var(--nav-hover-bg);
        }

            .app-drawer .unicold-nav .mud-nav-link:hover .mud-nav-link-icon {
                color: var(--nav-hover-fg);
                fill: currentColor;
            }

        .app-drawer .unicold-nav .mud-nav-link.active {
            color: var(--nav-active-fg) !important;
            fill: var(--nav-active-fg) !important;
            background-color: var(--nav-active-bg) !important;
            font-weight: 600;
        }

            .app-drawer .unicold-nav .mud-nav-link.active .mud-nav-link-icon {
                color: var(--nav-active-fg) !important;
                fill: currentColor !important;
            }

    .app-drawer .unicold-nav .mud-nav-link-expand-icon {
        color: inherit;
        fill: currentColor;
    }

    .app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .mud-nav-link::after {
        color: var(--nav-fg);
    }

    .app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .mud-nav-link:hover::after {
        color: var(--nav-hover-fg);
    }

    .app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .mud-nav-link.active::after {
        color: var(--nav-active-fg);
    }

    .app-drawer.mud-drawer-mini.mud-drawer--closed .unicold-nav .section-caption::after {
        color: var(--nav-caption);
    }

/*error text*/
.mud-error-text {
    color: var(--mud-palette-error) !important;
    font-size: 0.8rem;
    margin-top: 2px;
    display: block;
}

/*RO Dialog*/
.ro-heading-blue {
    background-color: #e3f2fd !important;
}

.ro-heading-purple {
    background-color: #f3e5f5 !important;
}

.ro-heading-green {
    background-color: #e8f5e9 !important;
}

.ro-heading-yellow {
    background-color: #fff8e1 !important;
}

.ro-heading-pink {
    background-color: #fce4ec !important;
}

.mud-icon-button.mud-icon-custom {
    padding: 0px !important;
}


/* ────────────────────────────────────────────────────────────────
   Receipt Order — Batch Details DataGrid styling
   ──────────────────────────────────────────────────────────────── */

/* Màu nền theo nhóm cột — y chang phong cách cũ */
.responsive-batch-grid .bd-col-blue {
    background: #e3f2fd !important;
    color: #1565c0 !important;
    font-weight: 600;
}

.responsive-batch-grid .bd-col-purple {
    background: #f3e5f5 !important;
    color: #6a1b9a !important;
    font-weight: 600;
}

.responsive-batch-grid .bd-col-green {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    font-weight: 600;
}

.responsive-batch-grid .bd-col-amber {
    background: #fff8e1 !important;
    color: #e65100 !important;
    font-weight: 600;
}

/* Ô input trong grid: gọn hơn, không tràn */
.responsive-batch-grid .mud-input-control,
.responsive-batch-grid .mud-input-slot {
    min-width: 0 !important;
}

/* Compact cell padding + readable font. Body + header + inputs unified at 0.85rem
   (header was 0.8rem — bumped up for legibility per UX review). Grid is now
   fit-to-width (no horizontal scroll) so we keep the readable size. */
.responsive-batch-grid .mud-table-cell {
    padding: 2px 6px !important;
    vertical-align: middle;
    font-size: 0.85rem;
}

.responsive-batch-grid .mud-table-head .mud-table-cell {
    padding: 4px 6px !important;
    font-size: 0.85rem;
}

.responsive-batch-grid .mud-table-head .mud-table-cell,
.responsive-batch-grid .mud-table-head .mud-table-cell * {
    white-space: normal;
}

.responsive-batch-grid .mud-table-cell:first-child {
    padding-left: 6px !important;
}

.responsive-batch-grid .mud-table-cell:last-child {
    padding-right: 6px !important;
}

/* Inputs inside grid use the same smaller font */
.responsive-batch-grid .mud-input-root,
.responsive-batch-grid .mud-input-root input {
    font-size: 0.85rem !important;
}

/* =====================================================================
   FIT-TO-WIDTH (bugs CH-0806-03 / CH-0806-12 / CH-1405-02)
   ---------------------------------------------------------------------
   The four order batch grids (RO/DO/RT/TO) carry ONLY `.responsive-batch-grid`
   now — `.resizable-grid` was removed from them because its `width:max-content`
   forced horizontal scroll. Column resizing is handled by MudDataGrid's built-in
   `ColumnResizeMode="ResizeMode.Column"` ("columns expand a limited amount,
   ensuring all columns remain visible") — no custom JS.

   Here we make the table fill the dialog and WRAP cell text so nothing is
   clipped (CH-1405-02). We deliberately do NOT set `table-layout:fixed` or
   `width:max-content`: ResizeMode.Column manages column widths itself and keeps
   them inside the grid, so we only pin the table to 100% of the container. */
.responsive-batch-grid .mud-table-container {
    overflow-x: auto;
}

.responsive-batch-grid .mud-table-root {
    width: 100%;
    min-width: 100%;
}

/* Cells wrap instead of clipping — long product names / batch no / notes stay
   fully readable even when a column is narrow. */
.responsive-batch-grid .mud-table-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Neutralise the large inline `min-width` set per cell in the RO markup
   (CellStyle="min-width:180px" etc.). Summed across ~14 columns they would force
   the table wider than the dialog and bring back the horizontal scroll. We cap
   the floor at a small value so inputs/checkboxes don't collapse, and let
   ResizeMode.Column + width:100% share the remaining space. Text still wraps, so
   a narrow column stays readable. */
.responsive-batch-grid .mud-table-cell,
.responsive-batch-grid .mud-table-head .mud-table-cell {
    min-width: 56px !important;
}

/* MudText wrappers inside cells must wrap too (MudBlazor wraps content in
   .mud-typography-*; without this the cell wraps but the inner <p> would not). */
.responsive-batch-grid .mud-table-cell .mud-typography-body1,
.responsive-batch-grid .mud-table-cell .mud-typography-body2,
.responsive-batch-grid .mud-table-cell .mud-typography-caption {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Wrapper allows horizontal scroll only as last-resort when viewport < 1200px */
.batch-grid-wrapper {
    overflow-x: auto;
}

/* Resize handle is rendered natively by MudDataGrid on the right edge of each
   header cell (.mud-resizer, position:absolute;right:0;width:8px). We only add a
   subtle hover cue here — no decorative ::after pseudo-element, which previously
   overlapped the resizer area and was redundant once the native handle works. */
.responsive-batch-grid .mud-table-head .mud-table-cell .mud-resizer:hover {
    background: var(--mud-palette-primary);
    opacity: 0.6;
}

/* Sticky cột Product Number (trái) và Actions (phải) khi scroll ngang */
.responsive-batch-grid .sticky-left {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
}

.responsive-batch-grid .sticky-right {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
}

/* Mobile (<600px): bỏ height fixed, cho cuộn theo dialog */
@media (max-width: 599.95px) {
    .responsive-batch-grid {
        height: auto !important;
        max-height: 60vh;
    }

        .responsive-batch-grid .mud-table-cell {
            padding: 2px 4px !important;
        }
}

.quantity-error .mud-input-root {
    border-color: #d32f2f !important;
}

.quantity-error input {
    color: #d32f2f !important;
    font-weight: 600;
}

/* RO Dialog — Batch Details horizontal scroll wrapper (small viewports) */
.batch-grid-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll iOS */
}

/* =========================================================================
   Edit DO — Batch Details: cố định vài cột hiển thị FULL TEXT 1 dòng.
   Grid #grid-do-batch là fit-to-width + wrap (min-width ép 56px !important,
   cell white-space:normal + word-break) nên Exp Date / Location bị xuống dòng.
   Pin riêng theo cột: Exp Date + Location + Export Qty đủ rộng + nowrap;
   Box Number ít dùng → ghim max-width nhỏ để không giành chỗ (nhường cho 3 cột
   trên). Scope theo id nên KHÔNG ảnh hưởng grid RO/TO/RT (dùng chung class cũ).
   ========================================================================= */
#grid-do-batch .mud-table-cell.bd-col-expdate,
#grid-do-batch .mud-table-head .mud-table-cell.bd-col-expdate {
    min-width: 96px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

#grid-do-batch .mud-table-cell.bd-col-location,
#grid-do-batch .mud-table-head .mud-table-cell.bd-col-location {
    min-width: 150px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

#grid-do-batch .mud-table-cell.bd-col-exportqty,
#grid-do-batch .mud-table-head .mud-table-cell.bd-col-exportqty {
    min-width: 120px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

#grid-do-batch .mud-table-cell.bd-col-box,
#grid-do-batch .mud-table-head .mud-table-cell.bd-col-box {
    min-width: 96px !important;
}

#grid-do-batch .mud-table-cell.bd-col-note,
#grid-do-batch .mud-table-head .mud-table-cell.bd-col-note {
    min-width: 160px !important;
}

/* MudText/typography bên trong các cột cố định cũng phải nowrap (MudBlazor bọc <p>) */
#grid-do-batch .mud-table-cell.bd-col-expdate .mud-typography-body1,
#grid-do-batch .mud-table-cell.bd-col-expdate .mud-typography-body2,
#grid-do-batch .mud-table-cell.bd-col-location .mud-typography-body1,
#grid-do-batch .mud-table-cell.bd-col-location .mud-typography-body2,
#grid-do-batch .mud-table-cell.bd-col-exportqty .mud-typography-body1,
#grid-do-batch .mud-table-cell.bd-col-exportqty .mud-typography-body2 {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* =========================================================================
   .resizable-grid — reusable MudDataGrid wrapper for 14-inch screens
   -------------------------------------------------------------------------
   Pairs with mudGridResize.js + GridResizeHandler. Goals (per UX spec):
     1) Every column readable at 14" (~1366px) — no squeeze, no line wrap.
     2) ALL columns horizontally resizable (uses MudBlazor native handle).
     3) Total column width may exceed container → horizontal scroll instead
        of compressing cells.
     4) Persist user-set widths across reloads (handled by JS module).
   Column min-widths applied via HeaderClass + CellClass utility classes
   (col-w-action, col-w-name, etc.) below.
   Placed AFTER .responsive-batch-grid so a grid carrying both classes lets
   resizable-grid override the fixed-width table-layout from batch styling.
   ========================================================================= */

.resizable-grid {
    /* Container scrolls horizontally only when sum of column min-widths
       exceeds the container width. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.resizable-grid .mud-table-root {
    /* width:max-content lets the table grow to sum of <th> widths so total can
       exceed container → wrapper scrolls horizontally (no squeeze). min-width
       :100% keeps it filling container when not overflowing.
       table-layout:fixed REQUIRED — MudBlazor sets <th style="width:Xpx"> on
       drag; without fixed layout the browser ignores those widths and resize
       appears broken. (Same trade-off as existing .responsive-batch-grid.) */
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
}

/* BODY cells only — ellipsis-clip long values. NEVER apply overflow:hidden to
   header cells: MudBlazor's resize handle (.mud-resizer) sits at right:-4px on
   each <th>, so a hidden header overflow clips the drag hit-area and resize
   visibly stops working (existing .responsive-batch-grid intentionally omits
   overflow:hidden on header for the same reason). */
.resizable-grid .mud-table-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* HEADER cells — nowrap only, NO overflow clip (preserves .mud-resizer hit-area).
   Headers are short labels so the lack of ellipsis is fine; if a localized header
   ever exceeds its column width the resize handle still works and user can drag. */
.resizable-grid .mud-table-head .mud-table-cell {
    white-space: nowrap;
}

/* Override MudText inside cells (MudBlazor wraps content in .mud-typography-*).
   Without this the cell is nowrap but the inner <p> still wraps and overflows. */
.resizable-grid .mud-table-cell .mud-typography-body1,
.resizable-grid .mud-table-cell .mud-typography-body2,
.resizable-grid .mud-table-cell .mud-typography-caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.resizable-grid .mud-table-cell.cell-wrap,
.resizable-grid .mud-table-cell.cell-wrap .mud-typography-body1,
.resizable-grid .mud-table-cell.cell-wrap .mud-typography-body2 {
    /* Opt-in for Note/Address columns that genuinely need multi-line text. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Sticky utility — keep first/last column visible during horizontal scroll.
   Caller adds .sticky-col to the column's HeaderClass + CellClass. */
.resizable-grid .mud-table-cell.sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
}

.resizable-grid .mud-table-head .mud-table-cell.sticky-col {
    z-index: 3; /* header sticky-col above body sticky-col */
}

/* Subtle hover affordance on the native MudDataGrid resize handle. */
.resizable-grid .mud-table-head .mud-table-cell .mud-resizer:hover {
    background: var(--mud-palette-primary);
    opacity: 0.5;
}

/* -------------------------------------------------------------------------
   Column min-width utilities — tuned for 14" (1366px) Vietnamese headers.
   Apply as HeaderClass + CellClass. Pick the loosest fit (rounding up):
     col-w-select   48px  selection / index
     col-w-action  120px  1–3 icon buttons (edit / delete / view)
     col-w-bool    110px  status badge / boolean ("Đang hoạt động")
     col-w-date    120px  dd/MM/yyyy
     col-w-datetime 160px dd/MM/yyyy HH:mm
     col-w-qty     110px  numeric + unit ("1.234 kg")
     col-w-code    130px  SKU / mã NV
     col-w-name    200px  product / employee name
     col-w-addr    280px  address / long note
     col-w-money   140px  formatted currency
   ------------------------------------------------------------------------- */
.resizable-grid .mud-table-cell.col-w-select,
.resizable-grid .mud-table-head .mud-table-cell.col-w-select { min-width: 48px; }

.resizable-grid .mud-table-cell.col-w-action,
.resizable-grid .mud-table-head .mud-table-cell.col-w-action { min-width: 120px; }

.resizable-grid .mud-table-cell.col-w-bool,
.resizable-grid .mud-table-head .mud-table-cell.col-w-bool { min-width: 110px; }

.resizable-grid .mud-table-cell.col-w-date,
.resizable-grid .mud-table-head .mud-table-cell.col-w-date { min-width: 120px; }

.resizable-grid .mud-table-cell.col-w-datetime,
.resizable-grid .mud-table-head .mud-table-cell.col-w-datetime { min-width: 160px; }

.resizable-grid .mud-table-cell.col-w-qty,
.resizable-grid .mud-table-head .mud-table-cell.col-w-qty { min-width: 110px; }

.resizable-grid .mud-table-cell.col-w-code,
.resizable-grid .mud-table-head .mud-table-cell.col-w-code { min-width: 130px; }

.resizable-grid .mud-table-cell.col-w-name,
.resizable-grid .mud-table-head .mud-table-cell.col-w-name { min-width: 200px; }

.resizable-grid .mud-table-cell.col-w-addr,
.resizable-grid .mud-table-head .mud-table-cell.col-w-addr { min-width: 280px; }

.resizable-grid .mud-table-cell.col-w-money,
.resizable-grid .mud-table-head .mud-table-cell.col-w-money { min-width: 140px; }

/* =========================================================================
   ClientFormDialog customer picker (#grid-client-form-customers) — FULL WIDTH
   -------------------------------------------------------------------------
   Grid chỉ 3 cột (select 48 + code 130 + name 200 = ~378px min). Rule chung
   `.resizable-grid .mud-table-root { width: max-content }` (thiết kế cho grid
   NHIỀU cột → tràn/scroll) co bảng này về ~378px, chừa trống nửa phải dialog.
   Ép RIÊNG grid này (scope theo id, specificity ID > class nên thắng override,
   KHÔNG đụng .resizable-grid dùng chung) full width, cột Tên hút phần trống.
   GIỮ table-layout:fixed thừa kế từ .resizable-grid → resize-drag/persist JS
   (#grid-client-form-customers) vẫn hoạt động (fixed layout cần cho <th width>).
   ========================================================================= */
#grid-client-form-customers,
#grid-client-form-customers .mud-table-container {
    width: 100%;
}

/* Bảng lấp đủ container thay vì co về max-content (min-width:100% thừa kế giữ nguyên). */
#grid-client-form-customers .mud-table-root {
    width: 100%;
}

/* Cột select/code neo width cố định (= min), cột Tên để width:auto → dưới table-layout:fixed
   cột auto hút toàn bộ khoảng trống còn lại. min-width thừa kế vẫn là sàn. */
#grid-client-form-customers .mud-table-cell.col-w-select,
#grid-client-form-customers .mud-table-head .mud-table-cell.col-w-select { width: 48px; }

#grid-client-form-customers .mud-table-cell.col-w-code,
#grid-client-form-customers .mud-table-head .mud-table-cell.col-w-code { width: 130px; }

#grid-client-form-customers .mud-table-cell.col-w-name,
#grid-client-form-customers .mud-table-head .mud-table-cell.col-w-name { width: auto; }

/* =========================================================================
   Portal Receipt detail — Batch Details grid (#grid-portal-receipt-detail) — FULL WIDTH
   -------------------------------------------------------------------------
   Grid ~14 cột NHƯNG các cột (checkbox Exp.Month/Not Auto/Not Export, số lượng,
   ngày, status) hẹp → tổng width < container ⇒ rule chung `.resizable-grid
   .mud-table-root { width:max-content }` co bảng về ~content, chừa TRỐNG lớn bên phải.
   Ép RIÊNG grid này (scope theo id — ID > class, KHÔNG đụng .resizable-grid chung
   hay grid khác) full width, cột "Note" (col-flex-note) hút phần trống như reference.
   Khác #grid-client-form-customers: các cột ở đây KHÔNG có class width (col-w-*) để neo,
   nên override `table-layout: fixed`→`auto` cho RIÊNG grid này: cột size theo content,
   cột Note width:100% absorb toàn bộ slack (pattern chuẩn browser, deterministic).
   Đánh đổi: resize-drag chuyển sang "mềm" (inline <th width> của GridResize thành
   preferred-width dưới auto layout, vẫn kéo được); .resizable-grid overflow-x:auto giữ
   → nếu content vượt container vẫn scroll ngang. Ưu tiên full-width (mục tiêu user).
   ========================================================================= */
#grid-portal-receipt-detail,
#grid-portal-receipt-detail .mud-table-container {
    width: 100%;
}

#grid-portal-receipt-detail .mud-table-root {
    width: 100%;
    table-layout: auto;
}

/* Cột Note absorb toàn bộ khoảng trống còn lại (auto layout + width:100% = fill remainder). */
#grid-portal-receipt-detail .mud-table-cell.col-flex-note,
#grid-portal-receipt-detail .mud-table-head .mud-table-cell.col-flex-note {
    width: 100%;
    white-space: normal;
}

.list-grid {
    overflow-x: hidden;
}

.list-grid .mud-table-container {
    overflow-x: auto;
}

.list-grid .mud-table-root {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
}

.list-grid .mud-table-cell {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: 12px;
    min-width: 96px;
    vertical-align: top;
}

.list-grid .mud-table-cell.cell-center {
    min-width: 88px;
    vertical-align: middle;
}

.list-grid .mud-table-cell.cell-right {
    min-width: 84px;
}

.list-grid .mud-table-cell.mud-table-cell-checkbox,
.list-grid .mud-table-cell.col-w-action {
    min-width: 44px;
}

.list-grid .mud-table-cell .mud-typography-body1,
.list-grid .mud-table-cell .mud-typography-body2,
.list-grid .mud-table-cell .mud-typography-caption {
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
    font-size: 12px;
}

.list-grid .mud-table-head .mud-table-cell,
.list-grid .mud-table-head .mud-table-cell * {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

.list-grid .mud-table-head .mud-table-cell {
    vertical-align: bottom;
}

.list-grid .mud-table-cell.cell-wrap,
.list-grid .mud-table-cell.cell-wrap .mud-typography-body1,
.list-grid .mud-table-cell.cell-wrap .mud-typography-body2 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* =========================================================================
   CP-2205-17: căn lề chuẩn cho grid trang list (đồng bộ mọi màn hình list).
   - Số ĐO LƯỜNG (Pallets/Quantity/Weight/count…)  → cell-right (căn PHẢI).
   - Status (chip) + Actions (menu/icon)            → cell-center (căn GIỮA).
   - Text/ngày/mã/định danh (OrderNumber/SĐT…)      → mặc định TRÁI (không gắn class).
   Body cell: text-align trên cell + .mud-typography-* (giống .cell-wrap).
   Header MudDataGrid 8: cấu trúc .mud-table-cell > .column-header (flex) >
   .sortable-column-header (width:100% → khoá justify-content). Vì vậy phải:
     • set justify-content trên .column-header  (cột KHÔNG sortable: title là flex-child trực tiếp)
     • set text-align trên .sortable-column-header (cột sortable: width:100% nên cần text-align)
   ========================================================================= */
.list-grid .mud-table-cell.cell-right,
.list-grid .mud-table-cell.cell-right .mud-typography-body1,
.list-grid .mud-table-cell.cell-right .mud-typography-body2,
.list-grid .mud-table-cell.cell-right .mud-typography-caption { text-align: right; }

.list-grid .mud-table-cell.cell-center,
.list-grid .mud-table-cell.cell-center .mud-typography-body1,
.list-grid .mud-table-cell.cell-center .mud-typography-body2,
.list-grid .mud-table-cell.cell-center .mud-typography-caption { text-align: center; }

/* Header — khớp hướng căn với cell tương ứng. */
.list-grid .mud-table-head .mud-table-cell.cell-right .column-header { justify-content: flex-end; }
.list-grid .mud-table-head .mud-table-cell.cell-right .column-header .sortable-column-header { text-align: right; }

.list-grid .mud-table-head .mud-table-cell.cell-center .column-header { justify-content: center; }
.list-grid .mud-table-head .mud-table-cell.cell-center .column-header .sortable-column-header { text-align: center; }

/* =========================================================================
   GLOBAL FONT SIZE — shrink body/UI text to ~12px, KEEP headings (H1–H6)
   -------------------------------------------------------------------------
   One place to make every page/dialog/table/form/button/chip/menu/tab text
   ~12px, EXCEPT semantic headings. We never touch `.mud-typography-h1..h6`
   nor the bare `h1..h6` tags, so heading sizes stay exactly as the theme set
   them. The list-grid 12px rules above are now redundant but harmless (kept).

   Change one value to retune the whole app:  --app-base-font-size.
   ========================================================================= */
:root {
    --app-base-font-size: 12px;
    --app-grid-cell-padding-y: 6px;
    --app-grid-cell-padding-x: 4px;
    --app-grid-edge-padding-x: 16px;
}

.mud-table-cell {
    padding: var(--app-grid-cell-padding-y) var(--app-grid-cell-padding-x) !important;
}

.mud-table-cell:first-child {
    padding-left: var(--app-grid-edge-padding-x) !important;
}

.mud-table-cell:last-child {
    padding-right: var(--app-grid-edge-padding-x) !important;
}

/* MudBlazor typography variants — NON-heading only (h1..h6 deliberately omitted). */
.mud-typography-body1,
.mud-typography-body2,
.mud-typography-subtitle1,
.mud-typography-subtitle2,
.mud-typography-button,
.mud-typography-overline {
    font-size: var(--app-base-font-size);
}

/* Caption is already small — pin to 11px so this rule never enlarges it. */
.mud-typography-caption {
    font-size: 11px;
}

/* Areas where MudBlazor renders raw text WITHOUT a .mud-typography-* wrapper:
   inputs/selects, table cells + headers, buttons, chips, menus, tabs, list items,
   tooltips, breadcrumbs, table pager, form helper/label, expansion panels, alerts.
   Listed explicitly (no `*`/`body` blanket) so headings can never be caught. */
.mud-input-root,
.mud-input-root input,
.mud-input-root textarea,
.mud-input-slot,
.mud-input-helper-text,
.mud-input-label,
.mud-select,
.mud-select-input,
.mud-table-cell,
.mud-table-head .mud-table-cell,
.mud-table-pagination,
.mud-table-pagination-select,
.mud-button-root,
.mud-button-label,
.mud-icon-button-label,
.mud-chip,
.mud-list-item,
.mud-list-item-text,
.mud-menu-item,
.mud-nav-link,
.mud-tab,
.mud-tabs .mud-tab,
.mud-breadcrumb-item,
.mud-tooltip,
.mud-expand-panel-text,
.mud-alert-message,
.mud-form-control,
.mud-radio .mud-typography,
.mud-checkbox .mud-typography,
.mud-switch .mud-typography {
    font-size: var(--app-base-font-size);
}

.mud-table-head .mud-table-cell,
.mud-table-head .mud-table-cell .column-header,
.mud-table-head .mud-table-cell .sortable-column-header {
    white-space: nowrap;
}