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

/* 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-root {
    width: 100%;
    max-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 */
}

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

/* =========================================================================
   LIST-GRID — single-line rows for LIST pages (not dialogs)
   -------------------------------------------------------------------------
   Opt-in class for the MudDataGrid on list pages (ReceiptOrder, DispatchingOrder,
   TransferOrder, RoutingOrder, Customer, Product, Access, …). Matches the legacy
   WMS: each cell shows ONE line and clips overflow with an ellipsis, so rows have
   a uniform height and the list stays scannable (long Customer / Note values no
   longer wrap to 2–3 lines and make rows uneven).

   This is COMPLETELY separate from the dialog batch grids: `.responsive-batch-grid`
   intentionally WRAPS, and `.resizable-grid` (reports/portal) keeps its own rules.
   We never touch those here. A column that genuinely needs multiline can opt out
   with CellClass="cell-wrap".

   FIT-TO-WIDTH + RESIZE (matches the batch grid behaviour, adapted for nowrap):
   - The grid uses ColumnResizeMode="ResizeMode.Column" so MudBlazor keeps columns
     inside the grid and lets the user drag a column edge (no horizontal scroll).
   - `table-layout: fixed; width: 100%` makes the browser divide the grid width
     across columns by their <th> widths. Unlike the batch grid (which WRAPS, so
     auto layout can shrink cells), a nowrap grid needs FIXED layout: otherwise a
     long single-line value would stretch its column to content-width and overflow.
     With fixed layout the overflow is clipped to an ellipsis inside the column.
   - `overflow-x: hidden` is the safety net against any residual horizontal scroll.
   ========================================================================= */
.list-grid {
    overflow-x: hidden;
}

.list-grid .mud-table-root {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.list-grid .mud-table-cell {
    white-space: normal;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: normal;
    font-size: 12px;
}

/* Text dài XUỐNG DÒNG (wrap) như WMS Light — bỏ truncate ellipsis. Cột số/ngày/status ngắn không bị ảnh hưởng (tự fit 1 dòng). */
.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;
}

/* HEADER cells (.list-grid): CHỈ wrap ở ranh giới TỪ — KHÔNG break char-by-char như body.
   "Order Number" -> "Order"/"Number", KHÔNG "O/r/d/e/r". Broad selector (cả descendant) +
   !important để override MỌI rule MudBlazor (column-header flex / sortable-column-header). */
.list-grid .mud-table-head .mud-table-cell,
.list-grid .mud-table-head .mud-table-cell * {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* Opt-out: a column that genuinely needs multiline text. */
.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;
}

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