html,
body {
    height: 100%;
}

    .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: var(--mud-palette-drawer-text);
    --nav-hover-fg: #6b7cff;
    --nav-active-fg: #5367ff;
    --nav-hover-bg: #eef1ff;
    --nav-active-bg: #eef1ff;
    --nav-caption: #a1a8c3;
}

    .app-drawer .unicold-nav .section-caption {
        color: var(--nav-caption);
        font-family: var(--mud-typography-h6-family);
        font-weight: 500;
        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: #bbdefb !important;
}

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

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

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

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

.ro-heading-orange {
    background-color: #ffe0b2 !important;
}

.ro-heading-lightblue {
    background-color: #cfe2f6 !important;
}

.rt-header-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 4fr)) repeat(4, minmax(0, 3fr));
    gap: 12px;
}

@media (max-width: 1399px) {
    .rt-header-meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 959px) {
    .rt-header-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .rt-header-meta {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rt-cell-number .mud-input-slot,
.rt-cell-number input,
.rt-cell-number .mud-typography {
    text-align: right;
}

.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: #bbdefb !important;
    color: #060606 !important;
    font-weight: 600;
}

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

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

.responsive-batch-grid .bd-col-amber {
    background: #ffe0b2 !important;
    color: #060606 !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 7px !important;
    vertical-align: middle;
    font-size: 0.75rem;
    line-height: 1.357;
}

.responsive-batch-grid .mud-table-head .mud-table-cell .column-header,
.responsive-batch-grid .mud-table-head .mud-table-cell .sortable-column-header {
    white-space: nowrap !important;
}

.responsive-batch-grid .mud-table-head .mud-table-cell {
    vertical-align: middle;
    padding: 4px 7px !important;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.357;
}

.responsive-batch-grid .mud-table-head .mud-table-cell,
.responsive-batch-grid .mud-table-head .mud-table-cell *,
.responsive-batch-grid .mud-table-head .mud-table-cell .column-header,
.responsive-batch-grid .mud-table-head .mud-table-cell .sortable-column-header {
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

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

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

/* Inputs inside grid use the same smaller font */
.responsive-batch-grid .mud-input-root,
.responsive-batch-grid .mud-input-root input {
    font-size: 12px !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;
    min-width: 100%;
}

.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;
}

.responsive-batch-grid .mud-table-cell.bd-col-location,
.responsive-batch-grid .mud-table-head .mud-table-cell.bd-col-location {
    min-width: 130px !important;
}

.responsive-batch-grid .mud-table-cell.bd-col-location-picker,
.responsive-batch-grid .mud-table-head .mud-table-cell.bd-col-location-picker {
    min-width: 170px !important;
}

.responsive-batch-grid .mud-table-cell.bd-col-location,
.responsive-batch-grid .mud-table-cell.bd-col-location .mud-typography-body2,
.responsive-batch-grid .mud-table-cell.bd-col-location-picker,
.responsive-batch-grid .mud-table-cell.bd-col-location-picker .mud-typography-body2 {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* 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: 130px !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: 110px !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: 140px !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;
    vertical-align: middle;
    font-size: 12px;
    letter-spacing: normal;
    padding: 5px 8px !important;
    line-height: 1.3;
}

.resizable-grid .mud-table-cell .mud-icon-button {
    padding: 2px;
}

/* 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;
    vertical-align: middle;
    padding: 5px 8px !important;
    line-height: 1.2;
    font-weight: 600;
}

/* 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;
}

.page-header-bar {
    padding: 4px 4px 0;
}

.page-filters .filter-label {
    min-width: 88px;
}

.page-filters .mud-picker:not(:focus-within):not(:hover) .mud-input-clear-button {
    visibility: hidden;
}

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

.mud-data-grid .mud-table-container {
    overflow-x: auto;
    min-width: 100%;
    max-width: 100%;
}

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

.list-grid.list-grid-resized .mud-table-root {
    width: max-content;
}

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

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

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

.list-grid .mud-table-cell.col-w-num,
.list-grid .mud-table-head .mud-table-cell.col-w-num { min-width: 60px; }

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

.list-grid .mud-table-cell.col-w-date,
.list-grid .mud-table-cell.col-w-date .mud-typography-body1,
.list-grid .mud-table-cell.col-w-date .mud-typography-body2 {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

.list-grid .mud-table-cell.col-w-status,
.list-grid .mud-table-head .mud-table-cell.col-w-status { min-width: 76px; }

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

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

.list-grid .mud-table-cell.col-w-short,
.list-grid .mud-table-head .mud-table-cell.col-w-short { min-width: 90px; }

.list-grid .mud-table-cell.col-w-datetime,
.list-grid .mud-table-head .mud-table-cell.col-w-datetime,
.list-grid .mud-table-cell.col-w-person,
.list-grid .mud-table-head .mud-table-cell.col-w-person { min-width: 90px; }

.list-grid .mud-table-cell.col-w-note,
.list-grid .mud-table-head .mud-table-cell.col-w-note { min-width: 100px; }

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

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

.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:first-child {
    padding-left: var(--app-grid-list-edge-padding-x) !important;
}

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

.list-grid .mud-table-head .mud-table-cell .column-options .mud-icon-button {
    padding: 2px;
}

.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: middle;
}

.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; }

/* Header — icon sort/lọc đứng sát tiêu đề cột thay vì dạt về mép phải ô. */
.list-grid .mud-table-head .mud-table-cell .column-header { justify-content: flex-start; gap: 2px; }
.list-grid .mud-table-head .mud-table-cell .column-header .sortable-column-header { width: auto; flex: 0 1 auto; }
.list-grid .mud-table-head .mud-table-cell .column-header .column-options { margin-left: 0; }

.list-grid .mud-table-head .mud-table-cell.cell-right .column-header .column-options { order: -1; }

/* =========================================================================
   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;
    --app-grid-list-edge-padding-x: 8px;
}

.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);
}

/* 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;
}

@media (max-width: 599.95px) {
    .mud-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .mud-dialog-container {
        align-items: stretch;
    }

    .mud-dialog .mud-dialog-content {
        max-height: none;
    }
}

.idle-lock-backdrop .mud-overlay-scrim.mud-overlay-dark {
    background-color: var(--mud-palette-background);
    border-color: var(--mud-palette-background);
    opacity: 0.98;
}

.idle-lock-orders .mud-table-container {
    height: auto;
    max-height: 40vh;
}

.login-page {
    position: fixed;
    inset: 0;
    display: flex;
    background-color: #ffffff;
    z-index: 1;
}

.login-hero {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    background-color: #656660;
}

.login-hero-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.login-hero-caption {
    position: absolute;
    left: 3%;
    top: 47%;
    max-width: 34%;
    padding: 18px 28px 22px 22px;
    background-color: rgba(70, 70, 70, 0.78);
    color: #ffffff;
}

.login-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}

.login-hero-tagline {
    font-size: 0.95rem;
    line-height: 1.6;
}

.login-hero-tagline-last {
    margin-top: 22px;
}

.login-panel {
    flex: 0 0 30%;
    min-width: 360px;
    max-width: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    overflow-y: auto;
}

.login-panel-inner {
    width: 100%;
    max-width: 340px;
    padding: 32px 16px;
}

.login-logo {
    display: block;
    width: 100%;
    max-width: 290px;
    margin: 0 auto 28px;
}

.login-title {
    font-size: 2rem;
    font-weight: 400;
    color: #6b6b6b;
    text-align: center;
    margin-bottom: 28px;
}

.login-form {
    margin-bottom: 36px;
}

.login-submit.mud-button-filled {
    display: inline-flex;
    width: auto;
    align-self: flex-start;
    margin-top: 34px;
    background-color: #5c6bc0;
    color: #ffffff;
    text-transform: none;
    font-size: 0.95rem;
    padding: 8px 26px;
}

.login-submit.mud-button-filled:hover {
    background-color: #4d5bb0;
}

.login-footer {
    border-top: 1px solid #e0e0e0;
    padding-top: 18px;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.9;
    color: #5c6bc0;
}

@media (max-width: 960px) {
    .login-hero {
        display: none;
    }

    .login-panel {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }
}

#components-reconnect-modal {
    display: none !important;
}

#wms-reconnect-chip {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2000;
    display: none;
    align-items: center;
    gap: 9px;
    max-width: 78vw;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(38, 50, 56, 0.92);
    color: #ffffff;
    font-family: Roboto, sans-serif;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

#wms-reconnect-chip.wms-reconnect-chip-visible {
    display: inline-flex;
}

#wms-reconnect-chip::before {
    content: '';
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: wms-reconnect-spin 0.9s linear infinite;
}

@keyframes wms-reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}

.bd-unit-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.lookup-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.lookup-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.lookup-option-primary {
    white-space: normal;
    overflow-wrap: anywhere;
}

.lookup-option-secondary {
    color: var(--mud-palette-text-primary);
    white-space: normal;
    overflow-wrap: anywhere;
}

.lookup-option-trailing {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.mud-dialog-title .mud-chip,
.status-chip.mud-chip {
    height: 20px;
    min-height: 20px;
    padding: 0 10px;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.mud-dialog-title .mud-chip .mud-chip-content,
.status-chip.mud-chip .mud-chip-content {
    gap: 4px;
}

.mud-dialog.dialog-full-bleed {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
}

.responsive-batch-grid .mud-picker:not(:focus-within):not(:hover) .mud-input-adornment,
.responsive-batch-grid .mud-picker:not(:focus-within):not(:hover) .mud-input-clear-button {
    visibility: hidden;
}

.responsive-batch-grid .mud-table-cell.bd-col-date .mud-input.mud-input-text {
    position: relative;
}

.responsive-batch-grid .mud-table-cell.bd-col-date .mud-input-adornment,
.responsive-batch-grid .mud-table-cell.bd-col-date .mud-input-clear-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
}

.responsive-batch-grid .mud-table-cell.bd-col-date .mud-input-adornment {
    right: 2px;
}

.responsive-batch-grid .mud-table-cell.bd-col-date .mud-input-clear-button {
    right: 26px;
}

.responsive-batch-grid .mud-table-cell .mud-input-control {
    width: 100%;
}

.responsive-batch-grid .mud-table-cell .mud-input.mud-input-text {
    width: 100%;
    min-height: 26px;
    padding: 0 6px;
    border-radius: 4px;
    box-sizing: border-box;
}

.responsive-batch-grid .mud-table-cell .mud-input.mud-input-text:focus-within {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
    background: var(--mud-palette-surface);
}

.mud-tabs .mud-tab {
    text-transform: none;
    font-size: 0.875rem;
}

.responsive-batch-grid .mud-table-cell.cell-right,
.responsive-batch-grid .mud-table-cell.cell-right input {
    text-align: right;
}

.responsive-batch-grid .mud-table-cell.cell-right .mud-stack {
    justify-content: flex-end;
}

.responsive-batch-grid .mud-table-cell.cell-right .mud-input-control {
    width: auto;
    flex: 0 0 auto;
}

.responsive-batch-grid .mud-table-cell.cell-right .mud-input.mud-input-text {
    padding-right: 2px;
}

.responsive-batch-grid .mud-table-cell.cell-center,
.responsive-batch-grid .mud-table-cell.cell-center input {
    text-align: center;
}

.responsive-batch-grid .mud-table-head .mud-table-cell.cell-right .column-header {
    justify-content: flex-end;
}

.responsive-batch-grid .mud-table-head .mud-table-cell.cell-right .column-header .column-options {
    order: -1;
}

.responsive-batch-grid .mud-table-head .mud-table-cell.cell-center .column-header {
    justify-content: center;
}

.unicold-nav .mud-nav-link {
    font-family: var(--mud-typography-h6-family);
    font-size: 13px;
    font-weight: 500;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label {
    font-family: var(--mud-typography-h6-family);
    font-weight: 500;
}

.mud-input-control > .mud-input-control-input-container > .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-text-secondary);
}

.mud-dialog .mud-table-head .mud-table-cell,
.mud-dialog .mud-table-head .mud-table-cell .mud-table-sort-label {
    font-weight: 600;
}

.mud-input-outlined-border legend {
    font-family: var(--mud-typography-h6-family);
    font-weight: 500;
}

.list-grid .mud-table-cell,
.responsive-batch-grid .mud-table-cell {
    letter-spacing: normal;
}

.responsive-batch-grid .mud-table-cell.bd-col-date,
.responsive-batch-grid .mud-table-head .mud-table-cell.bd-col-date {
    min-width: 88px !important;
}

.responsive-batch-grid .mud-table-cell.bd-col-datetext,
.responsive-batch-grid .mud-table-head .mud-table-cell.bd-col-datetext {
    min-width: 80px !important;
}

.responsive-batch-grid .mud-table-cell.bd-col-batchno,
.responsive-batch-grid .mud-table-head .mud-table-cell.bd-col-batchno {
    min-width: 120px !important;
    max-width: none;
}

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

.responsive-batch-grid .mud-table-cell.bd-col-date,
.responsive-batch-grid .mud-table-cell.bd-col-date .mud-typography-body1,
.responsive-batch-grid .mud-table-cell.bd-col-date .mud-typography-body2,
.responsive-batch-grid .mud-table-cell.bd-col-datetext,
.responsive-batch-grid .mud-table-cell.bd-col-datetext .mud-typography-body1,
.responsive-batch-grid .mud-table-cell.bd-col-datetext .mud-typography-body2,
.responsive-batch-grid .mud-table-cell.bd-col-batchno,
.responsive-batch-grid .mud-table-cell.bd-col-batchno .mud-typography-body1,
.responsive-batch-grid .mud-table-cell.bd-col-batchno .mud-typography-body2 {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    text-overflow: clip;
}

.responsive-batch-grid .mud-table-cell.bd-col-date .mud-input-root {
    min-width: 68px;
}

.responsive-batch-grid .mud-table-cell.bd-col-batchno .mud-input-root {
    min-width: 104px;
}

.list-grid .mud-table-cell,
.resizable-grid .mud-table-cell,
.responsive-batch-grid .mud-table-cell {
    font-weight: 400;
}