/*:root {*/
/* Chiều cao bảng trong page CUỘN (Reports / TestPlan).
       Cố tình KHÔNG dùng calc(100vh - Npx): giá trị đó đổi theo kích thước cửa sổ
       và cộng thêm phần co giãn của flex -> bảng nhảy height liên tục.
       480px = vừa 11-13 dòng, không đổi theo viewport. Sửa ở đây là đủ cho mọi page. */
/*--lims-grid-h: 480px;*/
/* Chiều cao chart dùng chung để Dashboard và Reports giống nhau.
       sm = nhúng trong panel khác, md = chart 2 cột, lg = chart full-width. */
/*--lims-chart-h-sm: 300px;
    --lims-chart-h: 400px;
    --lims-chart-h-lg: 460px;
    --lims-page-padding-x: 18px;
    --lims-page-padding-y: 16px;
    --lims-panel-radius: 12px;
    --lims-table-header-h: 38px;
    --lims-table-row-h: 42px;
    --lims-border-soft: rgba(15, 23, 42, 0.08);
    --lims-muted: rgba(15, 23, 42, 0.6);
    --lims-strong: rgba(15, 23, 42, 0.9);
}*/

/* =========================================================
   GLOBAL PAGE DENSITY
   ========================================================= */
/* =========================================================
   THEME-AWARE LIMS TOKENS
   Đồng bộ nền tảng CSS với Framas.LabTest.
   Tự đổi màu theo Light Mode / Dark Mode của MudBlazor.
   ========================================================= */

:root {
    --lims-grid-h: 480px;
    --lims-chart-h-sm: 300px;
    --lims-chart-h: 400px;
    --lims-chart-h-lg: 460px;
    --lims-page-padding-x: 18px;
    --lims-page-padding-y: 16px;
    --lims-panel-radius: 12px;
    --lims-table-header-h: 38px;
    --lims-table-row-h: 42px;
    /* Các biến màu quan trọng */
    --lims-border-soft: var(--mud-palette-divider);
    --lims-muted: var(--mud-palette-text-secondary);
    --lims-strong: var(--mud-palette-text-primary);
}

/* Khung bao toàn bộ 1 page Labtest: flex dọc, position:relative (làm mốc cho modal), overflow:hidden. Root của mỗi page mang class này. */
.lims-page-host {
    background: var(--mud-palette-background);
}

/* Vùng nội dung page kiểu CUỘN (Dashboard, Reports, TestPlan, Notifications): chiếm phần cao còn lại, tự cuộn dọc khi dài. */
.lims-page-scroll {
    padding: var(--lims-page-padding-y) var(--lims-page-padding-x) 24px;
}

/* Khung thẻ (card) có viền mềm + bo góc 12px, dùng cho các khối biểu đồ / danh sách. */
.lims-panel,
/* Vỏ bọc bảng dữ liệu (viền + bo góc) chứa PageAction (thanh công cụ) + DataGrid + pager. */
.lims-table-shell {
    border-color: var(--lims-border-soft);
}

/* Thanh tiêu đề đầu mỗi page (PageHeader): chứa bộ chọn location bên trái và các nút Add/Export... bên phải. Cũng là dấu hiệu nhận biết page. */
.page-header-toolbar {
    background: transparent;
}

/* Hàng nội dung bên trong PageHeader (cao 42px). */
.page-header-inner {
    height: 42px;
    padding: 0 16px;
}

/* Cụm nút hành động (Add, Export...) bên phải PageHeader. */
.page-header-actions {
    min-height: 0;
}

/* Từng nút hành động trong PageHeader (thấp 32px, chữ nhỏ). */
.page-header-action {
    min-width: 0;
    height: 32px;
    padding-inline: 10px;
    font-size: 0.75rem;
}

/* =========================================================
   LOCATION SWITCHER
   Always visible - unavailable locations are disabled
   ========================================================= */

/* Dãy nút chọn location (fKV, fVN, fFT, fIN, fGE) ở góc trái PageHeader. */
.location-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* Một nút location; .active = location hiện tại, :disabled = không có quyền. */
.location-item {
    appearance: none;
    border: 1px solid var(--lims-border-soft);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    color: color-mix(in srgb, var(--mud-palette-text-primary) 32%, transparent);
    min-width: 42px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

    .location-item:hover:not(:disabled) {
        background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
        border-color: color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
        color: var(--lims-strong);
    }

    /* Current location */
    .location-item.active {
        background: #111111;
        color: #ffffff;
        border-color: #111111;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    }

/* Dark theme:
   nền vẫn đen nhưng có viền trắng */
.mud-theme-dark .location-item.active {
    background: #111111;
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Location không có permission */
.location-item:disabled {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    color: color-mix(in srgb, var(--mud-palette-text-primary) 32%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    cursor: not-allowed;
    box-shadow: none;
}
/* =========================================================
   DASHBOARD / KPI
   ========================================================= */

/* Root riêng của trang Dashboard. */
.labtest-dashboard-page {
    min-height: 100%;
}

/* Vùng cuộn của Dashboard (khoảng đệm quanh nội dung). */
.labtest-dashboard-scroll {
    padding: 16px 18px 28px;
}

/* Lưới KPI (bản cũ). */
.dashboard-kpi-grid {
    margin-top: 0;
}

/* Thẻ thống kê (Total / In progress / Overdue / Released); .selected = đang lọc theo thẻ này. */
.lims-stat-card {
    min-height: 100px;
    padding: 14px 16px;
    border: 1px solid var(--lims-border-soft);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

    .lims-stat-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .lims-stat-card.selected {
        border-color: rgba(0, 0, 0, 0.18);
    }

/* Con số lớn trong thẻ thống kê. */
.lims-stat-compact-value {
    margin-top: 4px;
    margin-bottom: 2px;
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* =========================================================
   CHARTS / PANELS
   ========================================================= */

/* Hàng chứa các biểu đồ mini của Dashboard. */
.dashboard-chart-row {
    margin-top: 0;
}

.lims-panel,
.lims-table-shell {
    border: 1px solid var(--lims-border-soft);
    border-radius: var(--lims-panel-radius);
    background: var(--mud-palette-surface);
}

/* Tiêu đề (title + phụ đề) của một panel trên Dashboard. */
.dashboard-panel-header,
/* Tiêu đề của một .lims-panel. */
.lims-panel-hdr {
    padding: 14px 16px 12px;
}

/* =========================================================
   TABLE DENSITY
   ========================================================= */

/* Thẻ chứa bảng request trên Dashboard. */
.dashboard-table-card {
    overflow: hidden;
}

/* Ô tìm kiếm của bảng Dashboard. */
.dashboard-search {
    width: 230px;
}

.dashboard-table-card .mud-table-container {
    padding: 0 10px 10px;
}

.dashboard-table-card .mud-table-head {
    background: rgba(15, 23, 42, 0.02);
}

.dashboard-table-card .mud-table-cell {
    padding: 9px 10px;
    font-size: 0.81rem;
    vertical-align: middle;
}

.dashboard-table-card .mud-table-head .mud-table-cell {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--lims-muted);
    height: var(--lims-table-header-h);
}

.dashboard-table-card .mud-table-row {
    min-height: var(--lims-table-row-h);
}

.dashboard-table-card .mud-table-cell .mud-typography,
.dashboard-table-card .mud-table-cell .mud-text,
.dashboard-table-card .mud-table-cell .mud-chip {
    line-height: 1.35;
}

/* =========================================================
   ACTIVITY / QUICK STACKS
   ========================================================= */

/* Danh sách hoạt động gần đây. */
.lims-activity-list {
    padding: 0 8px 8px;
}

/* Một dòng trong danh sách hoạt động. */
.lims-activity-item {
    min-height: 46px;
    margin: 2px 4px;
    border-radius: 10px;
}

/* =========================================================
   STATUS / BADGES
   ========================================================= */

.labtest-dashboard-page .mud-chip,
.lims-page-host .lims-table-shell .mud-chip {
    min-height: 24px;
    height: 24px;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0 8px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .labtest-dashboard-scroll {
        padding: 14px 14px 22px;
    }
}

@media (max-width: 768px) {
    .labtest-dashboard-scroll {
        padding: 12px 12px 18px;
    }

    .page-header-inner {
        padding: 0 8px;
    }

    .location-switcher {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .dashboard-search {
        width: 100%;
    }
}

/* =========================================================
   SHARED DATA-FIRST UI HELPERS
   ========================================================= */

/* Stack giãn cách nhỏ (8px) cho bố cục dày thông tin. */
.compact-stack {
    gap: 8px;
}

/* Panel gọn: viền mềm + bo góc 12px. */
.compact-panel {
    border: 1px solid var(--lims-border-soft);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

/* Thanh công cụ gọn (cao tối thiểu 40px). */
.compact-toolbar {
    min-height: 40px;
    gap: 8px;
}

/* Không đặt height cố định cho container page: app host đã quản lý layout */
.labtest-dashboard-scroll {
    min-height: 0;
}

/* Nền chuẩn của giao diện LIMS v8 (lấy màu nền từ theme MudBlazor). */
.lims-v8 {
    background: var(--mud-palette-background);
}

/* =========================================================
   COMPACT GRID / TABLE
   ========================================================= */

/* Vỏ ngoài của DataGrid dùng chung: bo góc, viền, nền surface. */
.compact-data-grid {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--lims-border-soft);
    background: var(--mud-palette-surface);
}

/* Phần MudTable bên trong DataGrid. */
.compact-data-grid-table .mud-table-container {
    border-radius: 12px;
}

/* Hàng tiêu đề cột của DataGrid (chữ nhỏ, viết hoa). */
.compact-grid-head .mud-table-head {
    background: rgba(15, 23, 42, 0.02);
}

.compact-grid-head .mud-table-cell {
    padding: 8px 10px;
    font-size: 0.68rem;
    height: 34px;
    vertical-align: middle;
    border-bottom: 1px solid var(--lims-border-soft);
}

/* Một dòng dữ liệu của DataGrid. */
.compact-grid-row .mud-table-cell,
.compact-grid-row .mud-th {
    min-height: 0;
}

/* Cụm (chữ + icon sort/filter) trong ô tiêu đề cột. */
.compact-head-stack {
    min-height: 20px;
}

/* Chữ tên cột. */
.compact-head-text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lims-muted);
}

/* Số thứ tự ưu tiên sắp xếp khi sort nhiều cột. */
.compact-sort-index {
    font-size: 11px;
}

/* Chữ mô tả phụ (nhỏ, mờ) trong tiêu đề cột. */
.compact-desc-text {
    font-size: 0.62rem;
    opacity: 0.72;
}

/* Nhãn nhóm cột. */
.compact-group-label {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

/* Ô dữ liệu của DataGrid. */
.compact-cell {
    padding: 8px 10px;
    font-size: 0.81rem;
    vertical-align: middle;
}

/* Chữ trong ô dữ liệu. */
.compact-cell-text {
    font-size: 0.81rem;
    line-height: 1.35;
}

/* Hàng tổng (footer) của DataGrid. */
.compact-grid-foot-row .mud-table-cell {
    padding: 8px 10px;
    font-size: 0.8rem;
}

/* Thanh phân trang dưới cùng của DataGrid (luôn cao tối thiểu 42px, không bị co). */
.compact-pager {
    min-height: 42px;
}

    .compact-pager .mud-table-pagination {
        min-height: 42px;
    }

    .compact-pager .mud-input-root,
    .compact-pager .mud-select {
        min-height: 28px;
    }

    .compact-pager .mud-table-pagination-toolbar {
        min-height: 42px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

/* keep table and panel dense without breaking MB UI */
.compact-data-grid .mud-table-container {
    border-radius: 0;
}

.compact-data-grid .mud-typography {
    line-height: 1.3;
}

.compact-data-grid .filter-icon,
.compact-data-grid .sort-icon {
    opacity: 0.75;
}

    .compact-data-grid .filter-icon:hover,
    .compact-data-grid .sort-icon:hover {
        opacity: 1;
    }

.compact-data-grid .resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    opacity: 0;
}

.compact-data-grid .mud-table-head .resizable {
    position: relative;
}

/* keep sticky header clean */
.compact-data-grid .mud-table-header-sticky {
    background: rgba(15, 23, 42, 0.02);
}

/* =========================================================
   DASHBOARD AND REPORT CHARTS
   ========================================================= */

.labtest-dashboard-page .mini-chart-card,
.lims-page-host .mini-chart-card {
    min-width: 0;
    overflow: hidden;
}

.labtest-dashboard-page .mini-chart-hdr,
.lims-page-host .mini-chart-hdr {
    min-width: 0;
    padding: 12px 14px 8px;
}

.labtest-dashboard-page .mini-chart-body,
.lims-page-host .mini-chart-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 190px;
    min-height: 190px;
    padding: 4px 10px 10px;
    overflow: hidden;
}

    .labtest-dashboard-page .mini-chart-body > svg,
    .lims-page-host .mini-chart-body > svg {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: visible;
    }

    .labtest-dashboard-page .mini-chart-body > .donut-svg,
    .lims-page-host .mini-chart-body > .donut-svg {
        width: auto;
        max-width: 100%;
        aspect-ratio: 1;
    }

    .labtest-dashboard-page .mini-chart-body .mini-label,
    .lims-page-host .mini-chart-body .mini-label {
        fill: var(--mud-palette-text-secondary);
        font-family: Inter, "Segoe UI", Arial, sans-serif;
        font-size: 6px;
        font-weight: 500;
    }

    .labtest-dashboard-page .mini-chart-body .mini-line,
    .lims-page-host .mini-chart-body .mini-line {
        fill: none;
        stroke: var(--mud-palette-primary);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .labtest-dashboard-page .mini-chart-body .mini-dot,
    .lims-page-host .mini-chart-body .mini-dot {
        fill: var(--mud-palette-primary);
        stroke: var(--mud-palette-surface);
        stroke-width: 1.5;
    }

    .labtest-dashboard-page .mini-chart-body .mini-track,
    .lims-page-host .mini-chart-body .mini-track {
        fill: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    }

    .labtest-dashboard-page .mini-chart-body .mini-bar,
    .lims-page-host .mini-chart-body .mini-bar {
        fill: var(--mud-palette-primary);
    }

    .labtest-dashboard-page .mini-chart-body .mini-stack,
    .lims-page-host .mini-chart-body .mini-stack {
        stroke: none;
    }

    .labtest-dashboard-page .mini-chart-body .donut-track,
    .lims-page-host .mini-chart-body .donut-track {
        stroke: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
    }

    .labtest-dashboard-page .mini-chart-body .donut-seg,
    .lims-page-host .mini-chart-body .donut-seg {
        cursor: pointer;
        stroke-linecap: butt;
    }

    .labtest-dashboard-page .mini-chart-body .donut-center,
    .lims-page-host .mini-chart-body .donut-center {
        pointer-events: none;
        fill: var(--mud-palette-text-primary);
        font-family: Inter, "Segoe UI", Arial, sans-serif;
    }

    .labtest-dashboard-page .mini-chart-body .mini-tip rect,
    .lims-page-host .mini-chart-body .mini-tip rect {
        fill: var(--mud-palette-dark);
    }

    .labtest-dashboard-page .mini-chart-body .mini-tip text,
    .lims-page-host .mini-chart-body .mini-tip text {
        fill: var(--mud-palette-primary-text);
        font-family: Inter, "Segoe UI", Arial, sans-serif;
        font-size: 6px;
    }

    .labtest-dashboard-page .mini-chart-body .mini-tip,
    .lims-page-host .mini-chart-body .mini-tip {
        visibility: hidden;
        pointer-events: none;
    }

    .labtest-dashboard-page .mini-chart-body .mini-hit:hover .mini-tip,
    .lims-page-host .mini-chart-body .mini-hit:hover .mini-tip {
        visibility: visible;
    }

    .labtest-dashboard-page .mini-chart-body .donut-num,
    .lims-page-host .mini-chart-body .donut-num {
        font-size: 18px;
    }

    .labtest-dashboard-page .mini-chart-body .donut-cap,
    .lims-page-host .mini-chart-body .donut-cap {
        font-size: 6px;
    }

/* =========================================================
   SAMPLE QUEUE DETAIL AND REQUEST FORM (khung modal cơ bản)
   ========================================================= */



/* Hộp modal (form tạo/sửa, chi tiết request). Flex dọc: header + body cuộn + footer. */
.lims-page-host .lims-modal {
    display: flex;
    flex-direction: column;
    width: min(100%, 1100px);
    max-height: calc(100dvh - 40px);
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--lims-border-soft);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.lims-page-host .lims-modal-lg {
    width: min(100%, 1080px);
}



.sample-queue-page .lims-modal-overlay {
    display: grid;
    place-items: center;
    padding: 24px;
}



/* Phần đầu modal (tiêu đề + nút đóng), không co. */
.lims-page-host .lims-modal-hdr {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--lims-border-soft);
}

/* Thẻ <form> bên trong modal. */
.lims-page-host .lims-modal-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Phần thân modal: chiếm chỗ còn lại và tự cuộn. */
.lims-page-host .lims-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px;
    overflow: auto;
}

.lims-page-host .lims-modal-form > .lims-modal-body {
    width: 100%;
}

/* Hàng đầu modal chi tiết: thông tin bên trái + QR bên phải. */
.lims-page-host .lims-detail-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: start;
    gap: 20px;
}

.lims-page-host .lims-detail-info {
    min-width: 0;
}

.lims-page-host .lims-dgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.lims-page-host .lims-di-cell,
.lims-page-host .lims-di-block {
    min-width: 0;
}

.lims-page-host .lims-di-label {
    margin-bottom: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lims-page-host .lims-di-val,
.lims-page-host .lims-di-block-text {
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-primary);
    font-size: 0.87rem;
    line-height: 1.4;
    font-weight: 400;
}

.lims-page-host .lims-di-block {
    margin-top: 12px;
}

.lims-page-host .lims-detail-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

/* Thẻ chứa mã QR + nút in. */
.lims-page-host .lims-qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--lims-border-soft);
    border-radius: 8px;
    text-align: center;
    background: var(--mud-palette-surface);
}

    .lims-page-host .lims-qr-card img {
        display: block;
        width: 150px;
        height: 150px;
        max-width: 100%;
        object-fit: contain;
    }

    .lims-page-host .lims-qr-card .mud-typography {
        overflow-wrap: anywhere;
        font-size: 0.7rem;
    }

.lims-page-host .lims-qr-card-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.lims-page-host .lims-modal .mud-grid {
    min-width: 0;
}

.lims-page-host .lims-modal .mud-input-control {
    min-width: 0;
}

    .lims-page-host .lims-modal .mud-input-control > .mud-input-control-input-container {
        min-width: 0;
    }

/* Compact summaries leave more initial viewport for charts and request data. */
.lims-page-host .lims-stat-card-compact {
    min-height: 78px;
    padding: 10px 12px;
}

    .lims-page-host .lims-stat-card-compact .lims-stat-compact-value {
        margin: 1px 0;
        font-size: 1.35rem;
    }

    .lims-page-host .lims-stat-card-compact .mud-avatar {
        width: 32px;
        height: 32px;
    }

/* =========================================================
   DASHBOARD REFACTOR: DATA-FIRST LAYOUT
   ========================================================= */

/* KPI Summary Bar - Compact horizontal layout */
/* Hàng KPI gọn của Dashboard (lưới tự chia cột). */
.dashboard-kpi-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

/* Một ô KPI; .selected = đang được chọn làm bộ lọc. */
.dashboard-kpi-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--lims-border-soft);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: all 120ms ease;
}

    .dashboard-kpi-item:hover {
        border-color: var(--lims-muted);
        background: rgba(15, 23, 42, 0.02);
    }

    .dashboard-kpi-item.selected {
        border-color: var(--mud-palette-dark);
        background: rgba(0, 0, 0, 0.04);
    }

/* Icon tròn của ô KPI. */
.dashboard-kpi-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
    font-size: 1rem;
}

/* Cụm nhãn + giá trị của ô KPI. */
.dashboard-kpi-item-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* Nhãn của ô KPI (TOTAL, IN PROGRESS...). */
.dashboard-kpi-item-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--lims-muted);
}

/* Giá trị số của ô KPI. */
.dashboard-kpi-item-value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

/* Charts section - Reduced height */
/* Khối chứa 3 biểu đồ mini. */
.dashboard-charts-section {
    margin-bottom: 12px;
}

/* Thẻ biểu đồ mini (line / donut / bar). */
.mini-chart-card {
    overflow: hidden;
}

/* Tiêu đề thẻ biểu đồ mini. */
.mini-chart-hdr {
    padding: 10px 12px 6px;
    gap: 8px;
}

    .mini-chart-hdr .mud-stack {
        min-width: 0;
    }

    .mini-chart-hdr .mud-text:first-child {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .mini-chart-hdr .mud-text:nth-child(2) {
        font-size: 0.65rem;
        margin-top: 1px;
    }

/* Vùng vẽ SVG của biểu đồ mini (chiều cao cố định). */
.mini-chart-body {
    height: 150px;
    padding: 4px 8px 6px;
}

/* Attention + Activity - Compact layout */
/* Hàng 2 cột: Cần chú ý + Hoạt động. */
.dashboard-attention-activity-row {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 1200px) {
    .dashboard-attention-activity-row {
        grid-template-columns: 1fr;
    }
}

/* Thẻ danh sách 'Cần chú ý'. */
.dashboard-attention-card,
/* Thẻ danh sách 'Hoạt động'. */
.dashboard-activity-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dashboard-panel-header {
    padding: 10px 12px 8px;
    gap: 8px;
    flex-shrink: 0;
}

    .dashboard-panel-header .mud-text:first-child {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .dashboard-panel-header .mud-text:nth-child(2) {
        font-size: 0.65rem;
        margin-top: 1px;
    }

/* Danh sách bên trong thẻ chú ý/hoạt động (tự cuộn). */
.dashboard-attention-list,
.lims-activity-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 6px 6px;
}

    .dashboard-attention-list .mud-list-item {
        min-height: 40px;
        padding: 6px 8px;
        margin: 1px 0;
    }

.lims-activity-item {
    min-height: 38px;
    margin: 1px 4px;
}

/* Table section - Priority display */
.dashboard-table-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Hàng tiêu đề + công cụ phía trên bảng Dashboard. */
.dashboard-table-header-section {
    padding: 10px 12px 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .dashboard-table-header-section .mud-text:first-child {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .dashboard-table-header-section .mud-text:nth-child(2) {
        font-size: 0.65rem;
        margin-top: 1px;
    }

/* Cụm nút/lọc bên phải tiêu đề bảng Dashboard. */
.dashboard-table-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dashboard-search {
    width: 200px;
    flex-shrink: 0;
}

    .dashboard-search input {
        height: 28px;
        font-size: 0.81rem;
    }

    .dashboard-search .mud-input-adornment {
        margin-right: 4px;
    }

/* Vùng bảng Dashboard: chiếm phần còn lại, cuộn bên trong, header sticky. */
.dashboard-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .dashboard-table-container .mud-table-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 0 8px 6px;
    }

    .dashboard-table-container .mud-table {
        background: transparent;
    }

    .dashboard-table-container .mud-table-head {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--mud-palette-surface);
    }

    .dashboard-table-container .mud-table-cell {
        padding: 6px 8px;
        font-size: 0.78rem;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dashboard-table-container .mud-table-head .mud-table-cell {
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--lims-muted);
        height: 32px;
        padding: 6px 8px;
    }

    .dashboard-table-container .mud-table-row {
        min-height: 36px;
        height: auto;
    }

        .dashboard-table-container .mud-table-row:hover {
            background: rgba(15, 23, 42, 0.02);
        }

/* Typography - Proper hierarchy */
/* Một dòng trong danh sách cần chú ý. */
.dashboard-attention-item {
    display: flex;
    gap: 8px;
}

/* Phần chữ chính của dòng cần chú ý. */
.dashboard-attention-main {
    min-width: 0;
    flex: 1 1 auto;
}

    .dashboard-attention-main .mud-text:first-child {
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.3;
    }

    .dashboard-attention-main .mud-text:nth-child(2) {
        font-size: 0.65rem;
        line-height: 1.2;
    }

/* Phần chip trạng thái bên phải dòng cần chú ý. */
.dashboard-attention-meta {
    flex-shrink: 0;
    display: flex;
    gap: 4px;
}

    .dashboard-attention-meta .mud-chip {
        min-height: 20px;
        height: 20px;
        font-size: 0.65rem;
        padding: 0 6px;
    }

/* Empty state - Minimal */
/* Trạng thái trống (không có dữ liệu). */
.dashboard-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 12px;
    color: var(--lims-muted);
    min-height: 80px;
}

    .dashboard-empty-state .mud-icon {
        opacity: 0.5;
    }

    .dashboard-empty-state .mud-text {
        font-size: 0.78rem;
    }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .dashboard-kpi-summary {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
    }

    .dashboard-search {
        width: 160px;
    }
}

@media (max-width: 768px) {
    .dashboard-kpi-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .dashboard-search {
        width: 100%;
        flex-basis: 100%;
    }

    .dashboard-table-actions {
        flex-direction: column;
        width: 100%;
    }

        .dashboard-table-actions .mud-chip {
            width: 100%;
            justify-content: flex-start;
        }

    .dashboard-attention-activity-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   MODAL ACTION BUTTONS & PRINT AREA
   ========================================================= */

.lims-page-host .lims-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .lims-page-host .lims-modal-actions .mud-button {
        width: 100%;
        height: 36px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-radius: 6px;
        padding: 0;
    }

    .lims-page-host .lims-modal-actions .mud-button-outlined {
        border: 1px solid var(--mud-palette-dark);
        color: var(--mud-palette-dark);
    }

        .lims-page-host .lims-modal-actions .mud-button-outlined:hover {
            background: rgba(15, 23, 42, 0.04);
        }

    .lims-page-host .lims-modal-actions .mud-button-filled {
        background: var(--mud-palette-primary);
        color: white;
    }

        .lims-page-host .lims-modal-actions .mud-button-filled:hover {
            background: var(--mud-palette-primary-darken-1);
        }

.lims-page-host .lims-print-label-btn,
.lims-page-host .lims-print-form-btn {
    background: white;
    border: 1px solid var(--lims-border-soft);
    color: var(--mud-palette-text-primary);
}

.lims-page-host .lims-print-report-btn {
    background: var(--mud-palette-primary);
    color: white;
}

/* QR card print buttons styling */
.lims-page-host .lims-qr-card .mud-button {
    width: 100%;
    height: 32px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0;
    border-radius: 6px;
}

.lims-page-host .lims-qr-card .mud-button-outlined {
    border: 1px solid var(--lims-border-soft);
    background: white;
    color: var(--mud-palette-text-primary);
}

.lims-page-host .lims-qr-card .mud-button-filled {
    background: var(--mud-palette-primary);
    color: white;
}

/* Modal responsive (đã gộp các khối 900/640 bị lặp) */
@media (max-width: 900px) {
    .lims-page-host .lims-detail-top {
        grid-template-columns: minmax(0, 1fr) 200px;
        gap: 18px;
    }

    .lims-page-host .lims-dgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    /* Lớp nền mờ phủ lên page khi mở modal. Nằm GỌN trong page (absolute; inset:0), không đè header/sidebar. */
    .lims-page-host .lims-modal-overlay,
    .sample-queue-page .lims-modal-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    .lims-page-host .lims-modal,
    .lims-page-host .lims-modal-lg,
    .lims-page-host .lims-modal-xl,
    .sample-queue-page .lims-modal-xl {
        width: 100%;
        max-height: calc(100dvh - 24px);
    }

    .lims-page-host .lims-modal-hdr {
        align-items: flex-start;
        padding: 12px 16px;
    }

    .lims-page-host .lims-modal-body {
        padding: 16px;
    }

    .lims-page-host .lims-detail-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .lims-page-host .lims-detail-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lims-page-host .lims-qr-card {
        grid-column: 1 / -1;
    }

    .lims-page-host .lims-dgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }
}

/* =========================================================
   LIMS MODAL v2 — POLISH LAYER (đặt cuối file, chỉ chỉnh giao diện)
   ========================================================= */

.lims-page-host {
    --lims-accent: var(--mud-palette-primary);
    --lims-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --lims-surface-2: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
    --lims-line: var(--lims-border-soft);
}

    /* ---------- Overlay + animation (chỉ phản hồi khi mở modal) ---------- */
    .lims-page-host .lims-modal-overlay {
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(3px);
        animation: lims-fade 140ms ease-out;
    }

    .lims-page-host .lims-modal-wrap {
        display: contents;
    }

    .lims-page-host .lims-modal {
        border: none;
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.12);
        animation: lims-pop 180ms cubic-bezier(.2, .9, .3, 1.1);
    }

@keyframes lims-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lims-pop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lims-page-host .lims-modal-overlay,
    .lims-page-host .lims-modal {
        animation: none;
    }
}

/* ---------- Header ---------- */
.lims-page-host .lims-modal-hdr {
    padding: 14px 20px;
    background: var(--lims-surface-2);
    border-bottom: 1px solid var(--lims-line);
}

.lims-page-host .lims-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lims-page-host .lims-modal-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    color: var(--lims-accent);
    background: var(--lims-accent-soft);
}

/* ---------- Body ---------- */
.lims-page-host .lims-modal-body {
    padding: 20px 24px 24px;
    scrollbar-gutter: stable;
    background: var(--mud-palette-background);
}

    .lims-page-host .lims-modal-body::-webkit-scrollbar {
        width: 10px;
    }

    .lims-page-host .lims-modal-body::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

/* ---------- Footer (luôn hiện nhờ flex column của .lims-modal) ---------- */
/* Phần chân modal (nút Save/Cancel), luôn hiện. */
.lims-page-host .lims-modal-ftr {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--lims-line);
    background: var(--mud-palette-surface);
    box-shadow: 0 -6px 14px rgba(15, 23, 42, 0.04);
}

.lims-page-host .lims-ftr-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lims-page-host .lims-form-code {
    font-size: 0.68rem;
    letter-spacing: .04em;
    color: var(--lims-muted);
}

/* ---------- Form sections ---------- */
/* Một mục (có đánh số) trong form tạo request. */
.lims-page-host .lims-form-section {
    margin-bottom: 16px;
    border: 1px solid var(--lims-line);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.lims-page-host .lims-fs-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--lims-surface-2);
    border-bottom: 1px solid var(--lims-line);
}

.lims-page-host .lims-fs-num {
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--lims-accent);
}

.lims-page-host .lims-fs-body {
    padding: 16px;
}

/* ---------- Radio / mode ---------- */
.lims-page-host .lims-radio-row {
    gap: 6px;
    flex-wrap: wrap;
}

.lims-page-host .lims-review-mode-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--lims-line);
    border-radius: 10px;
    background: var(--lims-surface-2);
}

/* ---------- Scan cards ---------- */
.lims-page-host .lims-inline-scan-card,
.lims-page-host .lims-qr-scan-box,
.lims-page-host .lims-source-card {
    padding: 12px 14px;
    border: 1.5px dashed color-mix(in srgb, var(--lims-accent) 45%, transparent);
    border-radius: 12px;
    background: var(--lims-accent-soft);
}

.lims-page-host .lims-source-card {
    border-style: solid;
    border-width: 1px;
    background: var(--mud-palette-surface);
}

.lims-page-host .lims-source-summary {
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed var(--lims-line);
}

.lims-page-host .lims-scan-panel {
    padding: 16px;
    border: 1px solid var(--lims-line);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

/* ---------- Test picker (form) ---------- */
.lims-page-host .lims-test-group {
    margin-bottom: 14px;
}

    .lims-page-host .lims-test-group > .mud-typography {
        display: block;
        margin: 0 0 6px 2px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        font-size: 0.68rem;
    }

/* Dòng chọn test trong form; .selected = đã chọn. */
.lims-page-host .lims-test-pick {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px 8px 6px;
    margin-bottom: 6px;
    border: 1px solid var(--lims-line);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    transition: border-color 120ms, background 120ms;
}

    .lims-page-host .lims-test-pick:hover {
        border-color: color-mix(in srgb, var(--lims-accent) 40%, transparent);
    }

    .lims-page-host .lims-test-pick.selected {
        border-color: var(--lims-accent);
        background: var(--lims-accent-soft);
        box-shadow: inset 3px 0 0 var(--lims-accent);
    }

.lims-page-host .lims-test-main {
    flex: 1 1 auto;
    min-width: 0;
}

.lims-page-host .lims-test-title-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}

.lims-page-host .lims-review-route-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--lims-accent);
    background: color-mix(in srgb, var(--lims-accent) 12%, transparent);
}

/* ---------- Detail: info grid + QR ---------- */
.lims-page-host .lims-detail-info .mud-typography-subtitle1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

    .lims-page-host .lims-detail-info .mud-typography-subtitle1::before {
        content: "";
        width: 4px;
        height: 16px;
        border-radius: 2px;
        background: var(--lims-accent);
    }

.lims-page-host .lims-dgrid {
    padding: 14px 16px;
    border: 1px solid var(--lims-line);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.lims-page-host .lims-di-block {
    padding: 12px 16px;
    border: 1px solid var(--lims-line);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.lims-page-host .lims-detail-side {
    position: sticky;
    top: 0;
}

.lims-page-host .lims-qr-card {
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

    .lims-page-host .lims-qr-card img {
        width: 100%;
        max-width: 168px;
        height: auto;
        aspect-ratio: 1;
    }

.lims-page-host .lims-print-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .lims-page-host .lims-detail-side > .mud-button-root,
    .lims-page-host .lims-print-row .mud-button-root {
        height: 34px;
        text-transform: none;
        font-weight: 600;
        border-radius: 8px;
    }

/* ---------- Checkpoint stepper (4 bước: đúng với TrackingStages) ---------- */
/* Khối tiến trình 4 bước (Tracking) trong modal chi tiết. */
.lims-page-host .lims-checkpoint-section {
    margin: 20px 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--lims-line);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.lims-page-host .lims-checkpoint-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 12px 0 10px;
}

.lims-page-host .lims-checkpoint-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--lims-muted);
}

    .lims-page-host .lims-checkpoint-step .mud-icon-root {
        z-index: 1;
        box-sizing: content-box;
        padding: 8px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, var(--mud-palette-surface));
        color: var(--lims-muted);
    }

    .lims-page-host .lims-checkpoint-step::after {
        content: "";
        position: absolute;
        top: 20px;
        left: calc(50% + 24px);
        right: calc(-50% + 24px);
        height: 2px;
        background: var(--lims-line);
    }

    .lims-page-host .lims-checkpoint-step:last-child::after {
        display: none;
    }

    .lims-page-host .lims-checkpoint-step.completed {
        color: var(--mud-palette-success);
    }

        .lims-page-host .lims-checkpoint-step.completed .mud-icon-root {
            background: var(--mud-palette-success);
            color: #fff;
        }

        .lims-page-host .lims-checkpoint-step.completed::after {
            background: var(--mud-palette-success);
        }

    .lims-page-host .lims-checkpoint-step.current {
        color: var(--lims-accent);
    }

        .lims-page-host .lims-checkpoint-step.current .mud-icon-root {
            background: var(--lims-accent);
            color: #fff;
            box-shadow: 0 0 0 5px color-mix(in srgb, var(--lims-accent) 22%, transparent);
        }

/* ---------- Tabs ---------- */
/* Thanh tab của modal chi tiết (sticky ở đầu vùng cuộn). */
.lims-page-host .lims-tabs {
    position: sticky;
    top: -20px;
    z-index: 5;
    display: flex;
    gap: 4px;
    margin: 0 -24px 16px;
    padding: 0 24px;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--lims-line);
}

    .lims-page-host .lims-tabs button {
        appearance: none;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 12px 14px;
        margin-bottom: -1px;
        font: inherit;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--lims-muted);
        border-bottom: 2px solid transparent;
        transition: color 120ms, border-color 120ms;
    }

        .lims-page-host .lims-tabs button:hover {
            color: var(--lims-strong);
        }

        .lims-page-host .lims-tabs button:focus-visible {
            outline: 2px solid var(--lims-accent);
            outline-offset: -2px;
            border-radius: 6px;
        }

        .lims-page-host .lims-tabs button.active {
            color: var(--lims-accent);
            border-bottom-color: var(--lims-accent);
        }

.lims-page-host .lims-tab-count {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

.lims-page-host .lims-tabs button.active .lims-tab-count {
    background: var(--lims-accent-soft);
}

/* ---------- Test result cards ---------- */
.lims-page-host .lims-test-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lims-page-host .lims-test-card {
    padding: 14px 16px;
    border: 1px solid var(--lims-line);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.lims-page-host .lims-test-card-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--lims-line);
}

/* Thanh nút hành động dính đáy vùng cuộn của modal. */
.lims-page-host .lims-sticky-actions {
    position: sticky;
    bottom: -24px;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 16px -24px -24px;
    padding: 12px 24px;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--lims-line);
}

/* ---------- Improve / Approve ---------- */
.lims-page-host .lims-decision-panel {
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--lims-line);
    border-radius: 10px;
    background: var(--lims-surface-2);
}

.lims-page-host .lims-decision-row {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 10px;
}

    .lims-page-host .lims-decision-row.reopen {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed var(--lims-line);
    }

.lims-page-host .lims-decision-actions {
    display: flex;
    gap: 6px;
}

@media (max-width: 760px) {
    .lims-page-host .lims-decision-row {
        grid-template-columns: 1fr;
    }
}

/* ---------- Tracking log (timeline) ---------- */
.lims-page-host .lims-log-wrap {
    margin-top: 10px;
    padding-left: 4px;
}

/* Một mục trong dòng thời gian (tracking log). */
.lims-page-host .lims-log-entry {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 0 0 18px 0;
}

    .lims-page-host .lims-log-entry:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 6px;
        top: 16px;
        bottom: 0;
        width: 2px;
        background: var(--lims-line);
    }

.lims-page-host .lims-log-dot {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--lims-accent);
    box-shadow: 0 0 0 4px var(--lims-accent-soft);
}

/* ---------- Mobile (polish) ---------- */
@media (max-width: 640px) {
    .lims-page-host .lims-modal {
        border-radius: 12px;
    }

    .lims-page-host .lims-modal-body {
        padding: 14px;
    }

    .lims-page-host .lims-tabs {
        margin: 0 -14px 12px;
        padding: 0 14px;
        top: -14px;
        overflow-x: auto;
    }

    .lims-page-host .lims-modal-ftr {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .lims-page-host .lims-checkpoint-step {
        font-size: 0.66rem;
    }

    .lims-page-host .lims-sticky-actions {
        margin: 12px -14px -14px;
        padding: 10px 14px;
        bottom: -14px;
    }

    /* Overlay nằm dưới MudDialog (1400) và popover/autocomplete (1500), trên nội dung trang.
   Vị trí/kích thước thật do JS limsModalFrame gán inline. */
    .lims-page-host .lims-modal-overlay {
        position: fixed;
        inset: 0; /* fallback trước khi JS chạy */
        z-index: 1250;
        box-sizing: border-box;
        padding: 16px;
    }

    /* Modal co theo chiều cao của khung, không theo 100dvh nữa */
    .lims-page-host .lims-modal,
    .lims-page-host .lims-modal-lg,
    .lims-page-host .lims-modal-xl,
    .sample-queue-page .lims-modal-xl {
        max-height: 100%;
    }

    /* Đảm bảo dialog Scan luôn nằm trên modal */
    .mud-dialog-container {
        z-index: 1400;
    }

    /* =========================================================
   LIMS MODAL + SCAN DIALOG — FINAL FIX
   Modal vừa khung nội dung; Scan luôn nổi trên Detail modal
   ========================================================= */

    .lims-page-host {
        --lims-accent: var(--mud-palette-primary);
        --lims-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
        --lims-surface-2: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
        --lims-line: var(--lims-border-soft);
    }

        /* Overlay: thấp hơn MudDialog (Scan) — KHÔNG dùng 1400 */
        .lims-page-host .lims-modal-overlay {
            position: fixed;
            /* top/left/width/height do limsModalFrame gán — không dùng inset:0 full viewport */
            inset: auto;
            z-index: 1250; /* dưới MudDialog (~1300–1400) */
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            overflow: auto;
            background: rgba(15, 23, 42, 0.52);
            backdrop-filter: blur(3px);
            animation: lims-fade 140ms ease-out;
        }

    .sample-queue-page .lims-modal-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }

    /* Modal: vừa, không full màn hình */
    .lims-page-host .lims-modal,
    .lims-page-host .lims-modal-lg,
    .lims-page-host .lims-modal-xl,
    .sample-queue-page .lims-modal-xl {
        display: flex;
        flex-direction: column;
        width: min(100%, 920px); /* vừa hơn 1080/1320 */
        max-height: min(780px, calc(100% - 8px)); /* theo khung frame, không 100dvh */
        min-height: 0;
        margin: auto;
        overflow: hidden;
        border: none;
        border-radius: 14px;
        background: var(--mud-palette-surface);
        box-shadow: 0 20px 48px rgba(15, 23, 42, 0.26), 0 2px 8px rgba(15, 23, 42, 0.1);
        animation: lims-pop 180ms cubic-bezier(.2, .9, .3, 1.1);
    }

    .lims-page-host .lims-modal-lg {
        width: min(100%, 880px);
    }

    .lims-page-host .lims-modal-xl {
        width: min(100%, 980px); /* detail: vừa, không 1320 */
    }

    .lims-page-host .lims-modal-hdr {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        background: var(--lims-surface-2);
        border-bottom: 1px solid var(--lims-line);
    }

    .lims-page-host .lims-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 16px 18px 18px;
        overflow: auto;
        background: var(--mud-palette-background);
        scrollbar-gutter: stable;
    }

    .lims-page-host .lims-modal-ftr {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 16px;
        border-top: 1px solid var(--lims-line);
        background: var(--mud-palette-surface);
    }

    /* Detail layout: QR cột hẹp hơn */
    .lims-page-host .lims-detail-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 180px;
        align-items: start;
        gap: 16px;
    }

    .lims-page-host .lims-qr-card img {
        width: 100%;
        max-width: 140px;
        height: auto;
        aspect-ratio: 1;
    }

    /* ---------- Scan Dialog: LUÔN trên Detail modal ---------- */
    /* MudBlazor default dialog ~1300; ép cao hơn overlay 1250 */
    .mud-dialog-container {
        z-index: 1600;
    }

    .mud-overlay-dialog {
        z-index: 1590;
    }

    /* Scan dialog compact + focus-friendly */
    /* Dialog Scan: luôn nổi trên modal của page. */
    .lims-scan-dialog .mud-dialog {
        width: min(440px, calc(100vw - 32px));
        max-width: 440px;
    }

    .lims-scan-dialog .mud-dialog-content {
        padding: 12px 16px;
    }

    /* Ô nhập mã khi quét. */
    .lims-scan-input input {
        font-size: 1rem;
        letter-spacing: 0.02em;
    }

    @keyframes lims-fade {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes lims-pop {
        from {
            opacity: 0;
            transform: translateY(8px) scale(.985);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .lims-page-host .lims-modal-overlay,
        .lims-page-host .lims-modal {
            animation: none;
        }
    }

    /* Mobile: modal full-width trong frame */
    @media (max-width: 640px) {
        .lims-page-host .lims-modal-overlay {
            padding: 10px;
            align-items: flex-start;
        }

        .lims-page-host .lims-modal,
        .lims-page-host .lims-modal-lg,
        .lims-page-host .lims-modal-xl,
        .sample-queue-page .lims-modal-xl {
            width: 100%;
            max-height: calc(100% - 4px);
            border-radius: 12px;
        }

        .lims-page-host .lims-detail-top {
            grid-template-columns: 1fr;
        }

        .lims-page-host .lims-modal-body {
            padding: 12px 14px;
        }
    }
    /* =========================================================
   FIX: Modal không bị bảng/header sticky đè
   ========================================================= */

    /* Overlay + modal: z-index CAO hơn table sticky */
    .lims-page-host .lims-modal-overlay {
        position: fixed;
        inset: auto; /* limsModalFrame set top/left/w/h */
        z-index: 2000; /* cao hơn sticky table */
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        overflow: auto;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(2px);
        /* Tạo stacking context riêng — không bị “lọt” từ ngoài */
        isolation: isolate;
        transform: translateZ(0);
    }

    .lims-page-host .lims-modal,
    .lims-page-host .lims-modal-lg,
    .lims-page-host .lims-modal-xl,
    .sample-queue-page .lims-modal-xl {
        position: relative;
        z-index: 1;
        width: min(100%, 920px);
        max-height: min(780px, calc(100% - 8px));
        margin: auto;
        overflow: hidden;
        border-radius: 14px;
        background: var(--mud-palette-surface); /* không trong suốt */
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
        isolation: isolate;
    }

    .lims-page-host .lims-modal-lg {
        width: min(100%, 880px);
    }

    .lims-page-host .lims-modal-xl {
        width: min(100%, 980px);
    }

    /* Body modal: nền đục, không lộ bảng sau */
    .lims-page-host .lims-modal-body {
        background: var(--mud-palette-background);
    }

    /* Khi modal mở: hạ sticky header bảng xuống */
    .lims-page-host:has(.lims-modal-overlay) .mud-table-header-sticky,
    .lims-page-host:has(.lims-modal-overlay) .mud-table-head,
    .lims-page-host:has(.lims-modal-overlay) .mud-table-container,
    .sample-queue-page:has(.lims-modal-overlay) .mud-table-header-sticky {
        z-index: 1;
    }

    /* Scan dialog vẫn cao hơn detail modal */
    .mud-dialog-container {
        z-index: 2100;
    }

    .mud-overlay-dialog {
        z-index: 2090;
    }
}

/* =========================================================
   MODAL LAYOUT — PAGE CONTENT FRAME ONLY
   The custom LIMS modal is contained by .lims-page-host.
   It must never cover the global Portal header or left sidebar.
   ========================================================= */
.lims-page-host {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

    .lims-page-host .lims-modal-overlay,
    .sample-queue-page .lims-modal-overlay {
        position: absolute;
        inset: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        z-index: 2000;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        overflow: auto;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(3px);
        isolation: isolate;
        animation: lims-fade 140ms ease-out;
    }

        /* Prevent the click-capture wrapper from affecting flex centering. */
        .lims-page-host .lims-modal-overlay > .lims-modal-wrap,
        .sample-queue-page .lims-modal-overlay > .lims-modal-wrap {
            display: contents;
        }

    .lims-page-host .lims-modal,
    .lims-page-host .lims-modal-lg,
    .lims-page-host .lims-modal-xl,
    .sample-queue-page .lims-modal,
    .sample-queue-page .lims-modal-lg,
    .sample-queue-page .lims-modal-xl {
        position: relative;
        z-index: 1;
        flex: 0 1 auto;
        width: min(100%, 920px);
        max-height: calc(100% - 8px);
        min-height: 0;
        margin: auto;
        overflow: hidden;
        box-sizing: border-box;
        border: none;
        border-radius: 14px;
        background: var(--mud-palette-surface);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 2px 8px rgba(15, 23, 42, 0.12);
        animation: lims-pop 180ms cubic-bezier(.2, .9, .3, 1.1);
    }

    .lims-page-host .lims-modal-lg,
    .sample-queue-page .lims-modal-lg {
        width: min(100%, 880px);
    }

    .lims-page-host .lims-modal-xl,
    .sample-queue-page .lims-modal-xl {
        width: min(100%, 980px);
    }

    /* Sticky tables are always below the page modal layer. */
    .lims-page-host:has(.lims-modal-overlay) .mud-table-header-sticky,
    .lims-page-host:has(.lims-modal-overlay) .mud-table-head,
    .lims-page-host:has(.lims-modal-overlay) .mud-table-container,
    .sample-queue-page:has(.lims-modal-overlay) .mud-table-header-sticky,
    .sample-queue-page:has(.lims-modal-overlay) .mud-table-head,
    .sample-queue-page:has(.lims-modal-overlay) .mud-table-container {
        z-index: 1;
    }

/*
   Scan / Import / any MudDialog opened from a custom LIMS modal.
   Keep the MudDialog above the custom modal, while the custom modal stays
   inside the page frame. The dialog itself may still use MudBlazor's global
   viewport overlay because it is a true provider-level dialog.
*/

.mud-overlay-dialog {
    z-index: 2090;
}

.mud-dialog-container {
    z-index: 2100;
}

/* Stronger target for the scan dialog itself. */
.lims-scan-dialog {
    position: relative;
    z-index: 2100; /* cao hơn overlay 2090 cùng container */
}

    .lims-scan-dialog .mud-dialog {
        width: min(440px, calc(100vw - 32px));
        max-width: 440px;
    }

    .lims-scan-dialog .mud-dialog-content {
        padding: 12px 16px;
    }

.lims-scan-input input {
    font-size: 1rem;
    letter-spacing: 0.02em;
    caret-color: var(--mud-palette-primary);
}

/* Mobile: still stay inside the page frame. */
@media (max-width: 640px) {
    .lims-page-host .lims-modal-overlay,
    .sample-queue-page .lims-modal-overlay {
        align-items: flex-start;
        padding: 10px;
    }

    .lims-page-host .lims-modal,
    .lims-page-host .lims-modal-lg,
    .lims-page-host .lims-modal-xl,
    .sample-queue-page .lims-modal,
    .sample-queue-page .lims-modal-lg,
    .sample-queue-page .lims-modal-xl {
        width: 100%;
        max-height: calc(100% - 4px);
        border-radius: 12px;
    }
}
/* Scan: không tối, không blur, overlay chỉ để chặn click ra ngoài */
.mud-overlay.mud-overlay-dialog.lims-scan-backdrop,
.mud-dialog-container:has(.lims-scan-dialog) > .mud-overlay-dialog {
    background: transparent;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

    .mud-overlay.mud-overlay-dialog.lims-scan-backdrop .mud-overlay-scrim,
    .mud-dialog-container:has(.lims-scan-dialog) .mud-overlay-scrim {
        background: transparent;
    }

/* MudBlazor may apply the dimming through the overlay dialog container. */

/* =========================================================
   PAGE FULL HEIGHT
   ========================================================= */

/* =========================================================
   LIMS PAGE / TABLE - FULL AVAILABLE HEIGHT
   Page content fills exactly the available portal area.
   Table shell fills remaining height.
   Table body scrolls internally.
   ========================================================= */

/* Page frame ------------------------------------------------ */

.lims-page-host {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

    .lims-page-host > * {
        min-width: 0;
        min-height: 0;
    }


/* Page body ------------------------------------------------- */

/* Vùng nội dung page kiểu FILL (Items, Approvers, RawMaterials, TestMethods, queue...): chiếm hết chiều cao còn lại; bảng bên trong cuộn riêng, pager luôn dính đáy. */
.lims-page-fill {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}


    /* Các panel phía trên table không được ăn hết chiều cao ------- */

    .lims-page-fill > .lims-panel,
    .lims-page-fill > .lims-alert,
    .lims-page-fill > .mud-alert {
        flex: 0 0 auto;
    }


    /* Table shell ----------------------------------------------- */

    .lims-page-fill > .lims-table-shell {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
    }


        /* PageAction trên đầu table giữ nguyên chiều cao ------------- */

        .lims-page-fill > .lims-table-shell > .page-action,
        .lims-page-fill > .lims-table-shell > .lims-page-action {
            flex: 0 0 auto;
        }


        /* DataGrid -------------------------------------------------- */

        .lims-page-fill > .lims-table-shell > .compact-data-grid {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            min-height: 0;
            height: auto;
            overflow: hidden;
            box-sizing: border-box;
        }


    /* MudTable -------------------------------------------------- */

    .lims-page-fill .compact-data-grid > .compact-data-grid-table,
    .lims-page-fill .compact-data-grid .mud-table {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }


    /* Đây là vùng duy nhất scroll row ---------------------------- */

    .lims-page-fill .compact-data-grid .mud-table-container {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
        max-height: 100%;
        overflow-x: auto;
        overflow-y: auto;
        box-sizing: border-box;
    }


    /* Table luôn ăn hết chiều ngang shell ------------------------ */

    .lims-page-fill .compact-data-grid .mud-table-root {
        width: 100%;
        min-width: 100%;
    }


    /* Header sticky nằm trong vùng table ------------------------- */

    .lims-page-fill .compact-data-grid .mud-table-head,
    .lims-page-fill .compact-data-grid .mud-table-header-sticky {
        z-index: 2;
    }


    /* Footer / Pager không bị mất -------------------------------- */

    .lims-page-fill .compact-data-grid .compact-pager {
        flex: 0 0 auto;
        min-height: 42px;
    }


    /* Horizontal overflow không phá page ------------------------ */

    .lims-page-fill,
    .lims-page-fill > .lims-table-shell,
    .lims-page-fill .compact-data-grid {
        overflow-x: hidden;
    }


        /* Khi table rộng hơn viewport: chỉ table scroll ngang -------- */

        .lims-page-fill .compact-data-grid .mud-table-container {
            overflow-x: auto;
        }


/* Mobile ---------------------------------------------------- */

@media (max-width: 640px) {

    .lims-page-fill {
        padding: 12px;
    }

        .lims-page-fill > .lims-table-shell {
            min-height: 0;
        }

        .lims-page-fill .compact-data-grid .mud-table-container {
            overflow-x: auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
}

.labtest-dashboard-page {
    height: 100%;
    min-height: 0;
}

.lims-page-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

    /* Các khối con không bị flex ép co lại -> bảng + pager luôn đủ chiều cao */
    .lims-page-scroll > * {
        flex-shrink: 0;
    }

/* =========================================================
   CHIỀU CAO PAGE ĐỘC LẬP VỚI LAYOUT CỦA HOST
   ---------------------------------------------------------
   Vấn đề: height:100% / flex:1 1 0 chỉ chạy khi thẻ cha có chiều cao
   xác định. Local có .lims-page-host (height:100%) bọc @Body nên chuỗi
   chiều cao liền mạch. Trên server thẻ bọc chỉ là <div class="px-2">
   (height:auto) nên chuỗi bị đứt -> page co về ~86px.

   Cách làm: root của MỖI page mang "lims-page-root lims-page-host" và tự
   cấp chiều cao cho mình, không cần nhờ thẻ cha.
   ========================================================= */

/* .lims-page-root  : đánh dấu root của một page Labtest (thẻ ngoài cùng của page,
                      chứa PageHeader + vùng nội dung).
                      SERVER: không có host cấp chiều cao nên root tự lấy
                      chiều cao = chiều cao viewport - khoảng cách từ đỉnh viewport
                      tới đỉnh page.
                      Nhờ vậy thẻ cha div.px-2 (height:auto) tự cao đúng bằng root.
   --lims-page-offset: khoảng cách đó. client.js (limsPageFrame) tự đo và gán lên
                      <html>; giá trị 65px dưới đây chỉ là dự phòng khi JS chưa chạy.
                      KHÔNG cần sửa tay. */
.lims-page-root.lims-page-host {
    height: calc(100vh - var(--lims-page-offset, 65px)); /* trình duyệt cũ chưa có dvh */
    height: calc(100dvh - var(--lims-page-offset, 65px)); /* dvh: đúng cả khi thanh địa chỉ mobile ẩn/hiện */
}

/* LOCAL: root nằm trong .lims-page-host của WebHost (đã có chiều cao) ->
   giữ height:100% như cũ để local không đổi gì. */
.lims-page-host > .lims-page-root.lims-page-host {
    height: 100%;
}


/* =========================================================
   CRUSHING REQUEST - NEW REQUEST PAGE
   Monochrome UI: black / white / gray
   Supports Light Mode and Dark Mode
   ========================================================= */
.cr-new-page-root {
    min-width: 0;
}

.cr-new-content {
    min-width: 0;
}

/* Content width and spacing */
.cr-new-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 1600px;
    min-width: 0;
    margin-inline: auto;
}

/* Common card */
.cr-new-hero,
.cr-new-signature-banner,
.cr-new-step,
.cr-new-loading {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.25));
    border-radius: 14px;
    box-shadow: none;
}

/* Intro */
.cr-new-hero {
    padding: 22px 24px;
}

.cr-new-hero-content {
    min-width: 0;
    flex: 1;
}

.cr-new-title {
    margin: 0 0 6px;
    font-weight: 750;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.cr-new-subtitle {
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
}

.cr-new-process-chip {
    font-weight: 600;
}

/* Signature banner */
.cr-new-signature-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}

.cr-new-signature-icon {
    flex: 0 0 auto;
}

.cr-new-signature-copy {
    flex: 1;
    min-width: 180px;
}

.cr-new-section-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

.cr-new-secondary-action {
    flex: 0 0 auto;
    border-radius: 8px;
    font-weight: 600;
}

/* Step card */
.cr-new-step {
    overflow: hidden;
}

.cr-new-step-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.2));
}

.cr-new-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix( in srgb, var(--mud-palette-text-primary) 22%, transparent );
    border-radius: 12px;
    color: var(--mud-palette-text-primary);
    background: color-mix( in srgb, var(--mud-palette-text-primary) 5%, transparent );
    font-size: 0.85rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.cr-new-step-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 22px 24px;
}

/* Excel upload zone */
.cr-new-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    padding: 28px 20px;
    text-align: center;
    border: 1px dashed color-mix( in srgb, var(--mud-palette-text-primary) 28%, transparent );
    border-radius: 12px;
    background: color-mix( in srgb, var(--mud-palette-text-primary) 2.5%, transparent );
    transition: border-color 140ms ease, background-color 140ms ease;
}

    .cr-new-upload-zone:hover {
        border-color: color-mix( in srgb, var(--mud-palette-text-primary) 55%, transparent );
        background: color-mix( in srgb, var(--mud-palette-text-primary) 4%, transparent );
    }

.cr-new-upload-icon {
    margin-bottom: 2px;
    opacity: 0.85;
}

.cr-new-upload-title {
    font-weight: 700;
}

.cr-new-selected-file {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    margin-top: 4px;
    padding: 8px 12px;
    overflow-wrap: anywhere;
    border: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.25));
    border-radius: 8px;
}

/* Neutral primary action */
.cr-new-page-root .cr-new-primary-action {
    min-height: 38px;
    padding-inline: 18px;
    border-radius: 8px;
    background: #171717 !important;
    color: #ffffff !important;
    border: 1px solid #171717 !important;
    font-weight: 650;
    box-shadow: none;
}

    .cr-new-page-root .cr-new-primary-action:hover:not(:disabled) {
        background: #303030 !important;
        border-color: #303030 !important;
    }

.mud-theme-dark .cr-new-page-root .cr-new-primary-action,
.portal-dark .cr-new-page-root .cr-new-primary-action {
    background: #f4f4f5 !important;
    color: #18181b !important;
    border-color: #f4f4f5 !important;
}

    .mud-theme-dark .cr-new-page-root .cr-new-primary-action:hover:not(:disabled),
    .portal-dark .cr-new-page-root .cr-new-primary-action:hover:not(:disabled) {
        background: #e4e4e7 !important;
        border-color: #e4e4e7 !important;
    }

/* Imported document overview */
.cr-new-document-info {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.cr-new-document-field {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.22));
    border-radius: 10px;
    background: color-mix( in srgb, var(--mud-palette-text-primary) 2%, transparent );
}

.cr-new-value {
    margin-top: 5px;
    overflow-wrap: anywhere;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Imported line items */
.cr-new-table-heading {
    margin-top: 2px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.cr-new-table-scroll {
    width: 100%;
    max-height: 420px;
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.25));
    border-radius: 10px;
}

.cr-new-import-table {
    width: 100%;
    min-width: 920px;
}

    .cr-new-import-table table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .cr-new-import-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 12px 14px;
        white-space: nowrap;
        background: var(--mud-palette-background);
        color: var(--mud-palette-text-primary);
        border-bottom: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.3));
        font-size: 0.78rem;
        font-weight: 750;
    }

    .cr-new-import-table tbody td {
        padding: 11px 14px;
        color: var(--mud-palette-text-primary);
        border-bottom: 1px solid color-mix( in srgb, var(--mud-palette-text-primary) 10%, transparent );
        font-size: 0.84rem;
        vertical-align: top;
    }

    .cr-new-import-table tbody tr:last-child td {
        border-bottom: none;
    }

    .cr-new-import-table tbody tr:hover {
        background: color-mix( in srgb, var(--mud-palette-text-primary) 4%, transparent );
    }

    .cr-new-import-table .cr-number-cell {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .cr-new-import-table .cr-item-name,
    .cr-new-import-table .cr-remark-cell {
        min-width: 130px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

/* Approver selection */
.cr-new-approver-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.cr-new-approver-select {
    min-width: 0;
    width: 100%;
}

.cr-new-approval-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.22));
    border-radius: 9px;
    background: color-mix( in srgb, var(--mud-palette-text-primary) 2.5%, transparent );
}

    .cr-new-approval-note .mud-icon-root {
        flex: 0 0 auto;
        margin-top: 2px;
    }

/* Alerts stay neutral instead of relying on bright status colors */
.cr-new-page .cr-new-alert {
    border: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.3));
    border-radius: 9px;
    color: var(--mud-palette-text-primary);
    background: color-mix( in srgb, var(--mud-palette-text-primary) 4%, transparent );
}

.cr-new-warnings {
    width: 100%;
}

/* Submit actions */
.cr-new-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px solid var(--mud-palette-lines-default, rgba(127, 127, 127, 0.22));
}

.cr-new-submit-hint {
    color: var(--mud-palette-text-secondary);
}

.cr-new-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
}

/* Responsive layout */
@media (max-width: 1100px) {
    .cr-new-document-info {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .cr-new-content {
        padding: 12px !important;
    }

    .cr-new-page {
        gap: 12px;
    }

    .cr-new-hero,
    .cr-new-step-heading {
        padding: 16px;
    }

    .cr-new-signature-banner {
        flex-wrap: wrap;
        padding: 16px;
    }

    .cr-new-signature-copy {
        min-width: 0;
        flex: 1 1 calc(100% - 52px);
    }

    .cr-new-signature-banner .cr-new-secondary-action {
        width: 100%;
    }

    .cr-new-step-body {
        gap: 14px;
        padding: 16px;
    }

    .cr-new-document-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .cr-new-document-field {
        padding: 11px;
    }

    .cr-new-approver-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .cr-new-upload-zone {
        min-height: 190px;
        padding: 22px 14px;
    }
}

@media (max-width: 420px) {
    .cr-new-document-info {
        grid-template-columns: minmax(0, 1fr);
    }

    .cr-new-title {
        font-size: 1.25rem;
    }

    .cr-new-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .cr-new-form-actions .mud-button-root {
            width: 100%;
        }
}

/* =========================================================
   CRUSHING REQUEST — CONTAINED PAGE & INTERNAL SCROLL
   Không tràn khỏi khung Portal.
   ========================================================= */

/* Giữ page nằm trong vùng nội dung Portal */
.cr-new-page-root {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

    /* Cho phép nội dung New cuộn dọc trong khung page */
    .cr-new-page-root > .cr-new-content.lims-page-fill {
        flex: 1 1 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        align-items: stretch;
    }

/* Tất cả các card nằm gọn trong chiều ngang trang */
.cr-new-page {
    position: relative;
    width: 100%;
    max-width: 1600px;
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
}

    .cr-new-page > * {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Card và các thành phần form không đẩy rộng page */
    .cr-new-page .cr-new-step,
    .cr-new-page .cr-new-hero,
    .cr-new-page .cr-new-signature-banner {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .cr-new-page .mud-stack,
    .cr-new-page .mud-paper,
    .cr-new-page .mud-input-control {
        min-width: 0;
        max-width: 100%;
    }

    /* Chỉ bảng Excel cuộn ngang khi có nhiều cột */
    .cr-new-page .cr-new-table-scroll {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cr-new-page .cr-new-import-table {
        width: 100%;
        min-width: 920px;
    }

/* =========================================================
   INLINE OPERATION LOADING
   Có trạng thái và nội dung rõ ràng theo thao tác.
   ========================================================= */

.cr-new-busy-banner {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
    margin-bottom: 12px;
    padding: 14px 16px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.cr-new-busy-copy {
    flex: 1;
    min-width: 0;
}

.cr-new-busy-title {
    font-weight: 700;
}

.cr-new-busy-description {
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

/* Loading banner vẫn dễ nhìn ở Dark Mode */
.mud-theme-dark .cr-new-busy-banner,
.portal-dark .cr-new-busy-banner {
    border-color: var(--mud-palette-lines-default);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
}

@media (max-width: 640px) {
    .cr-new-page-root > .cr-new-content.lims-page-fill {
        padding: 12px !important;
    }

    .cr-new-page {
        gap: 12px;
    }

    .cr-new-busy-banner {
        padding: 12px;
        gap: 10px;
    }
}
/* Thanh thông tin request: thông tin | quy trình ký | thao tác */
.cr-request-toolbar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px 16px;
    width: 100%;
    min-width: 0;
}

.cr-request-meta,
.cr-request-steps,
.cr-request-actions {
    min-width: 0;
}

.cr-request-meta {
    flex-wrap: wrap;
}

.cr-request-steps {
    justify-content: center;
    flex-wrap: nowrap;
}

.cr-request-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Màn hình nhỏ: chuyển thành các hàng riêng, không để tràn */
@media (max-width: 1250px) {
    .cr-request-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .cr-request-meta,
    .cr-request-steps,
    .cr-request-actions {
        grid-column: 1;
    }

    .cr-request-steps {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .cr-request-actions {
        justify-content: flex-start;
    }
}
/* Ba bước ký có cùng chiều rộng và được căn thẳng hàng */
.cr-request-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    min-width: 0;
    gap: 0;
}

/* Mỗi bước ký có khoảng cách riêng */
.cr-step-item {
    min-width: 0;
    padding: 4px 12px;
    box-sizing: border-box;
}

    /* Đường phân cách nhẹ giữa các bước */
    .cr-step-item + .cr-step-item {
        border-left: 1px solid #e2e8f0;
    }

    /* Không để email hoặc tên dài phá bố cục */
    .cr-step-item,
    .cr-step-item * {
        overflow-wrap: anywhere;
    }

/* Giữ các phần tử văn bản dễ đọc */
.cr-step-item {
    line-height: 1.4;
}

/* Màn hình nhỏ: cho phép ba bước xuống hàng */
@media (max-width: 1250px) {
    .cr-request-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .cr-step-item:first-child {
        padding-left: 0;
    }
}

@media (max-width: 600px) {
    .cr-request-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .cr-step-item,
    .cr-step-item + .cr-step-item {
        padding: 6px 0;
        border-left: none;
        border-bottom: 1px solid #e2e8f0;
    }

        .cr-step-item:last-child {
            border-bottom: none;
        }
}
/* Header và History giữ chiều cao theo nội dung */
.cr-request-header,
.cr-history-container {
    flex: 0 0 auto;
    min-width: 0;
}

/* Khung ngoài của form: không tạo thanh cuộn thứ hai */
.cr-form-container {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
    box-sizing: border-box;
}

    /* Chỉ vùng preview bên trong được phép cuộn */
    .cr-form-container .cr-preview-viewport {
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;
        max-height: 100%;
        overflow: auto;
        box-sizing: border-box;
    }

/* Giữ nguyên hành vi in, không giới hạn vùng in theo chiều cao màn hình */
@media print {
    .cr-form-container {
        display: block;
        flex: none;
        min-height: auto;
        overflow: visible !important;
    }

        .cr-form-container .cr-preview-viewport {
            display: block;
            flex: none;
            height: auto;
            max-height: none;
            overflow: visible;
        }
}
/* =====================================================
   CRUSHING REQUEST — PAGE-LOCAL POPUPS
   Không sử dụng MudDialog hoặc class modal dùng chung
   ===================================================== */



.cr-request-popup {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    max-height: calc(100% - 8px);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30);
}


.cr-new-dialog-root,
.cr-approve-dialog-root {
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.cr-new-dialog-content {
    display: block;
    padding: 12px;
    overflow: visible;
}

.cr-approve-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    overflow: visible;
}

    /* Giữ preview CM-FOR-0005 trong phạm vi phù hợp với popup */
    .cr-approve-dialog-content .cr-preview-viewport {
        height: clamp(280px, 55dvh, 600px);
        max-height: 100%;
    }

.cr-request-no-link {
    min-width: 0;
    padding: 0;
    text-transform: none;
    font-weight: 700;
}

/* Request list / approver list polish. */
.crushing-request-grid .mud-table-head,
.cr-approvers-grid .mud-table-head {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.crushing-request-grid .mud-table-head .mud-table-cell,
.cr-approvers-grid .mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.crushing-request-grid .mud-table-body .mud-table-row,
.cr-approvers-grid .mud-table-body .mud-table-row {
    transition: background-color 120ms ease;
}

.crushing-request-grid .mud-table-body .mud-table-row:hover,
.cr-approvers-grid .mud-table-body .mud-table-row:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.cr-request-status-chip {
    min-width: 92px;
    justify-content: center;
    font-weight: 650;
}

.cr-approvers-grid .mud-avatar {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 28%, var(--mud-palette-lines-default));
    font-size: 0.72rem;
    font-weight: 750;
}

.cr-approvers-grid .mud-icon-button {
    border-radius: 8px;
}

@media (max-width: 768px) {

    .cr-new-dialog-content,
    .cr-approve-dialog-content {
        padding: 8px;
    }

        .cr-approve-dialog-content .cr-preview-viewport {
            height: 45dvh;
            min-height: 240px;
        }
}
/* =========================================================
   CRUSHING REQUEST — LARGE APPROVE POPUP
   Chiếm gần toàn bộ vùng nội dung của Portal
   ========================================================= */

/* Overlay phủ kín vùng page Crushing Request */


/* Popup Approve chiếm toàn bộ diện tích overlay */


/* Header popup giữ chiều cao vừa phải */


/* Body sử dụng toàn bộ chiều cao còn lại */


/* Component Approve phải kéo giãn theo body popup */

/* Nội dung bên trong Approve */
.cr-approve-dialog-content {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

    /* Thông tin request phía trên không bị co */
    .cr-approve-dialog-content > .mud-paper:first-child {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Form CM-FOR-0005 nhận toàn bộ chiều cao còn lại */
    .cr-approve-dialog-content > .cr-form-container {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden !important;
    }

/* Chỉ vùng preview của form được phép cuộn */
.cr-form-container .cr-preview-viewport {
    flex: 1 1 0;
    width: 100%;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow: auto;
    box-sizing: border-box;
}

/* History nằm phía dưới, không chiếm mất diện tích form */
.cr-approve-dialog-content > .cr-history-container {
    flex: 0 0 auto;
    max-height: 16%;
    min-height: 0;
    overflow: auto;
}

/* Màn hình nhỏ */
/* =========================================================
   CRUSHING REQUEST — ADD NEW POPUP NEAR FULL SIZE
   ========================================================= */

/* Popup New chiếm gần toàn bộ vùng nội dung */


/* Giữ header gọn, không bị co */


/* Body sử dụng toàn bộ chiều cao còn lại */

/* Root của New kéo giãn theo popup */
  box-sizing: border-box;
}

/* Chỉ vùng nội dung New được cuộn khi nội dung quá dài */


/* Nội dung form tận dụng toàn bộ chiều ngang */

/* Màn hình nhỏ */

/* =========================================================
   CRUSHING REQUEST — COMPACT HISTORY
   Ưu tiên chiều cao cho form CM-FOR-0005
   ========================================================= */

.cr-history-collapsible {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

    /* Thanh History mặc định cao khoảng 36px */
    .cr-history-collapsible > summary {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 36px;
        padding: 6px 12px;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none;
        list-style: none;
        font-size: 0.8rem;
        font-weight: 650;
        color: var(--mud-palette-text-primary);
        background: var(--mud-palette-surface);
    }

        /* Ẩn marker mặc định của trình duyệt */
        .cr-history-collapsible > summary::-webkit-details-marker {
            display: none;
        }

        /* Ký hiệu đóng/mở ở phía bên phải */
        .cr-history-collapsible > summary::after {
            content: "+";
            margin-left: auto;
            font-size: 1rem;
            font-weight: 600;
            color: var(--mud-palette-text-secondary);
        }

    .cr-history-collapsible[open] > summary::after {
        content: "−";
    }

    .cr-history-collapsible > summary:hover {
        background: color-mix( in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface) );
    }

.cr-history-count {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* Khi mở, lịch sử có vùng cuộn riêng */
.cr-history-collapsible-body {
    max-height: 180px;
    min-height: 0;
    overflow: auto;
    border-top: 1px solid var(--mud-palette-divider);
}

    .cr-history-collapsible-body table {
        width: 100%;
        font-size: 0.75rem;
    }

    .cr-history-collapsible-body th,
    .cr-history-collapsible-body td {
        padding: 4px 8px;
        line-height: 1.35;
        vertical-align: middle;
    }

/* Màn hình thấp: lịch sử mở ra vẫn không lấn át form */
@media (max-height: 700px) {
    .cr-history-collapsible-body {
        max-height: 120px;
    }
}
/* Elevate notifications only while the New Request dialog is open. */
body:has(.cr-new-dialog-root) #mud-snackbar-container {
    z-index: 20000 !important;
}

/* Khung nội dung bên trong MudDialog: cho form tự cuộn bên trong */
/* Dialog của Crushing Request bám đúng khung nội dung Portal (không đè sidebar) */
.mud-dialog:has(.cr-dialog-fill) {
    position: fixed !important;
  /*  left: calc(var(--cr-frame-left, 0px) + 8px) !important;
    top: calc(var(--cr-frame-top, 0px) + 8px) !important;*/
    width: calc(var(--cr-frame-width, 100vw) - 16px) !important;
    height: calc(var(--cr-frame-height, 100dvh) - 16px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

    /* Phần nội dung chiếm hết chiều cao còn lại, không cuộn ở tầng này */
    .mud-dialog:has(.cr-dialog-fill) .mud-dialog-content {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0 8px 8px;
    }

.cr-dialog-fill {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
}

    .cr-dialog-fill > .cr-new-dialog-root,
    .cr-dialog-fill > .cr-approve-dialog-root {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .cr-dialog-fill .cr-new-dialog-content {
        flex: 1 1 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

/* Approvers page */
.cr-ap-page {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

    .cr-ap-page > * {
        flex-shrink: 0;
    }

.cr-ap-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cr-ap-stat {
    padding: 12px 16px;
}

    .cr-ap-stat.warn {
        border-color: var(--mud-palette-warning);
    }

.cr-ap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

    .cr-ap-toolbar .cr-ap-search {
        flex: 1 1 240px;
        max-width: 360px;
    }

/* Khung xem trước chữ ký: nền trắng để chữ ký nền trong suốt vẫn rõ ở Dark Mode */
.cr-ap-signature-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 8px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    background: #ffffff;
}

    .cr-ap-signature-box img {
        max-width: 100%;
        max-height: 120px;
        object-fit: contain;
    }

@media (max-width: 640px) {
    .cr-ap-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Approvers DataGrid */
.cr-approvers-grid {
    min-width: 0;
    width: 100%;
}

    .cr-approvers-grid .mud-chip {
        white-space: nowrap;
    }

    .cr-approvers-grid .mud-icon-button {
        flex-shrink: 0;
    }

@media (max-width: 960px) {
    .cr-approvers-grid {
        min-width: 850px;
    }
}
/* Download CM-FOR-0005 template */
.cr-new-template-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 16px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease;
}

    .cr-new-template-download:hover {
        background: color-mix( in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface) );
        border-color: var(--mud-palette-text-secondary);
        color: var(--mud-palette-text-primary);
    }

    .cr-new-template-download:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

/* =========================================================
   CRUSHING REQUEST — MOBILE RESPONSIVE
   Chỉ áp dụng cho popup New Crushing Request
   ========================================================= */

@media (max-width: 768px) {

    /* Popup nằm sát vùng nội dung, chừa lề nhỏ trên điện thoại */
    .mud-dialog:has(.cr-new-dialog-root) {
/*        left: calc(var(--cr-frame-left, 0px) + 4px) !important;
        top: calc(var(--cr-frame-top, 0px) + 4px) !important;*/
        width: calc(var(--cr-frame-width, 100vw) - 8px) !important;
        height: calc(var(--cr-frame-height, 100dvh) - 8px) !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 10px !important;
        overflow: hidden;
        box-sizing: border-box;
    }

        /* Giảm khoảng trống mặc định của MudDialog */
        .mud-dialog:has(.cr-new-dialog-root) .mud-dialog-content {
            min-width: 0;
            min-height: 0;
            padding: 0 4px 4px !important;
            overflow: hidden;
        }

    /* Root và nội dung form */
    .cr-new-dialog-root {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .cr-new-dialog-content {
        width: 100%;
        min-width: 0;
        padding: 6px !important;
        box-sizing: border-box;
    }

    .cr-new-page {
        width: 100%;
        gap: 8px;
    }

    /* Các card gọn hơn */
    .cr-new-hero,
    .cr-new-signature-banner {
        padding: 12px !important;
        border-radius: 10px;
    }

    .cr-new-step {
        border-radius: 10px;
    }

    .cr-new-step-heading {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px !important;
    }

    .cr-new-step-number {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 0.75rem;
    }

    .cr-new-step-body {
        gap: 12px;
        padding: 12px !important;
    }

    /* Vùng chọn file không quá cao */
    .cr-new-upload-zone {
        min-height: 145px;
        padding: 16px 10px;
        gap: 8px;
    }

    .cr-new-upload-title {
        font-size: 0.9rem;
    }

    /* Nút tải template không đẩy rộng tiêu đề */
    .cr-new-step-heading .cr-new-template-download {
        width: 100%;
        min-height: 36px;
        margin-left: 0;
        box-sizing: border-box;
        font-size: 0.8rem;
    }

    /* Các nút hành động hiển thị vừa chiều ngang */
    .cr-new-form-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .cr-new-form-actions .mud-button-root {
            width: 100%;
            min-height: 38px;
            margin: 0;
        }

    /* Cho các trường chọn người duyệt chiếm hết chiều ngang */
    .cr-new-approver-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    /* Bảng Excel cuộn trong khung riêng */
    .cr-new-table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Điện thoại nhỏ */
@media (max-width: 420px) {

    .cr-new-dialog-content {
        padding: 4px !important;
    }

    .cr-new-hero,
    .cr-new-signature-banner,
    .cr-new-step-heading,
    .cr-new-step-body {
        padding: 10px !important;
    }

    .cr-new-title {
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .cr-new-document-info {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .cr-new-document-field {
        padding: 9px;
    }

    .cr-new-selected-file {
        width: 100%;
        box-sizing: border-box;
        font-size: 0.75rem;
    }
}
/* =========================================================
   CRUSHING REQUEST — APPROVAL DIALOG
   Thay thế TOÀN BỘ phần cuối file CSS, từ comment
   "Request summary - horizontal information cells" đến hết file.
   Hỗ trợ Light / Dark Mode (dùng biến --mud-palette-*).
   ========================================================= */

/* ---------- Tokens ---------- */
.cr-approve-dialog-content {
    --cr-green: #2f9e5f;
    --cr-green-hover: #278a52;
    --cr-red: #e5484d;
    --cr-amber: #f59e0b;
    --cr-charcoal: #2b3036;
    --cr-charcoal-hover: #1b1f23;
    --cr-line: var(--mud-palette-divider);
    --cr-muted: var(--mud-palette-text-secondary);
}

.mud-theme-dark .cr-approve-dialog-content,
.portal-dark .cr-approve-dialog-content {
    --cr-charcoal: #3a4047;
    --cr-charcoal-hover: #4a5159;
}

/* ---------- Khung dialog: tiêu đề + nội dung ---------- */
.mud-dialog:has(.cr-approve-dialog-content) .mud-dialog-title {
    padding: 16px 24px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

    .mud-dialog:has(.cr-approve-dialog-content) .mud-dialog-title .mud-typography {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

.mud-dialog:has(.cr-approve-dialog-content) .mud-dialog-content {
    /*padding: 0 24px 20px;*/
}

.cr-approve-dialog-content {
    gap: 14px;
}

    /* ---------- Thanh thông tin phía trên ---------- */
    .cr-approve-dialog-content > .mud-paper:first-child {
        container: crbar / inline-size;
        
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--cr-line);
        border-radius: 0;
        box-shadow: none;
    }

    /* 3 khối: thông tin | quy trình ký | thao tác.
   Dùng flex-wrap: màn hình hẹp tự rớt "quy trình + nút" xuống hàng 2. */
    .cr-approve-dialog-content .cr-request-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 0;
        width: 100%;
        min-width: 0;
    }

    /* ---------- 1. Thông tin request ---------- */
    .cr-approve-dialog-content .cr-request-meta {
        display: flex;
        flex: 0 1 auto;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 12px 0;
        width: auto;
        min-width: 0;
    }

    .cr-approve-dialog-content .cr-meta-cell {
        position: relative;
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: flex-start;
        gap: 5px;
        min-width: 0;
        padding: 2px 22px;
        border-left: 0;
    }

        .cr-approve-dialog-content .cr-meta-cell:first-child {
            padding-left: 0;
        }

        /* Vạch ngăn ngắn, nằm giữa chiều cao của ô */
        .cr-approve-dialog-content .cr-meta-cell + .cr-meta-cell::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 1px;
            height: 38px;
            background: var(--cr-line);
            transform: translateY(-50%);
        }

    .cr-approve-dialog-content .cr-meta-label {
        color: var(--cr-muted);
        font-size: 0.72rem;
        font-weight: 400;
        line-height: 1.2;
        text-transform: none;
        white-space: nowrap;
    }

    .cr-approve-dialog-content .cr-meta-value {
        display: flex;
        align-items: center;
        min-height: 24px;
        color: var(--mud-palette-text-primary);
        font-size: 0.84rem;
        font-weight: 800;
        line-height: 1.3;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }

    .cr-approve-dialog-content .cr-meta-value-line {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
        white-space: nowrap;
    }

        /* Icon đứng trước giá trị (lịch, phòng ban, người, tiền) */
        .cr-approve-dialog-content .cr-meta-value-line .mud-icon-root {
            flex: 0 0 auto;
            width: 1rem;
            height: 1rem;
            color: var(--cr-muted);
        }

    /* Ô Request ID: nhãn và số nằm cùng một dòng */
    .cr-approve-dialog-content .cr-meta-request {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    /* Số request: chữ thường, không in đậm */
    .cr-approve-dialog-content .cr-meta-request-no {
        font-size: 0.9rem;
        font-weight: 800;
        letter-spacing: 0.01em;
    }

    /* ---------- 2. Quy trình ký ---------- */
    .cr-approve-dialog-content .cr-request-steps.cr-approval-flow {
        position: relative;
        display: flex;
        flex: 1 1 460px;
        align-items: flex-start; /* các vòng tròn luôn thẳng hàng */
        justify-content: center;
        align-self: center;
        gap: 10px;
        min-width: 0;
        padding: 0 24px;
    }

    /* Dùng lại ::before làm vạch ngăn bên trái (thay cho đường nối cũ) */
    .cr-approve-dialog-content .cr-approval-flow::before {
        content: "";
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: 0;
        right: auto;
        width: 1px;
        height: auto;
        background: var(--cr-line);
        z-index: 0;
    }

    .cr-approve-dialog-content .cr-approval-flow .cr-flow-step {
        position: relative;
        z-index: 1;
        display: flex;
        flex: 0 1 auto;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        min-width: 0;
        padding: 0;
        text-align: left;
    }

        /* Đường nối: nằm ngang ở giữa vòng tròn, nối sang bước kế tiếp */
        .cr-approve-dialog-content .cr-approval-flow .cr-flow-step:not(:last-child)::after {
            content: "";
            flex: 0 1 44px;
            min-width: 16px;
            height: 1px;
            margin-top: 12px;
            background: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
        }

        /* Bước đã xong -> đường nối sang bước kế tiếp màu đen, dày 2px */
        .cr-approve-dialog-content .cr-approval-flow .cr-flow-step[data-state="done"]:not(:last-child)::after {
            height: 2px;
            background: var(--mud-palette-text-primary);
        }

    .cr-approve-dialog-content .cr-approval-flow .cr-flow-marker {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 26px;
        box-sizing: border-box;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--cr-muted);
        background: var(--mud-palette-surface);
        border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    }

        .cr-approve-dialog-content .cr-approval-flow .cr-flow-marker .mud-icon-root {
            width: 1rem;
            height: 1rem;
        }

    /* Đã xong: xanh lá */
    .cr-approve-dialog-content .cr-flow-step[data-state="done"] .cr-flow-marker {
        color: #ffffff;
        background: var(--cr-green);
        border-color: var(--cr-green);
    }

    /* Đang chờ xử lý: đậm, theo màu chữ chính của theme */
    .cr-approve-dialog-content .cr-flow-step[data-state="current"] .cr-flow-marker {
        color: var(--mud-palette-surface);
        background: var(--cr-amber);
        border-color: var(--mud-palette-text-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    }

    /* Chữ "Pending" của bước đang chờ: màu cam */
/*    .cr-approve-dialog-content .cr-flow-step[data-state="current"] .cr-flow-pending {
        color: color-mix(in srgb, var(--cr-amber) 65%, var(--mud-palette-text-primary));
        font-weight: 600;
    }*/

    /* Chưa tới lượt: viền xám, số xám */
    .cr-approve-dialog-content .cr-flow-step[data-state="pending"] .cr-flow-marker {
        color: var(--cr-muted);
        background: var(--mud-palette-surface);
    }

    .cr-approve-dialog-content .cr-approval-flow .cr-flow-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        min-width: 0;
        text-align: left;
    }

    .cr-approve-dialog-content .cr-approval-flow .cr-flow-title {
        color: var(--mud-palette-text-primary);
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 0;
        text-transform: lowercase;
        white-space: nowrap;
    }

        .cr-approve-dialog-content .cr-approval-flow .cr-flow-title::first-letter {
            text-transform: uppercase;
        }

    .cr-approve-dialog-content .cr-flow-step[data-state="pending"] .cr-flow-title {
        color: var(--cr-muted);
        font-weight: 600;
    }

    .cr-approve-dialog-content .cr-approval-flow .cr-flow-name {
        max-width: 160px;
        overflow: hidden;
        color: color-mix(in srgb, var(--mud-palette-text-primary) 80%, transparent);
        font-size: 0.75rem;
        line-height: 1.4;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

        .cr-approve-dialog-content .cr-approval-flow .cr-flow-name strong {
            font-weight: 500;
        }

    .cr-approve-dialog-content .cr-approval-flow .cr-flow-time,
    .cr-approve-dialog-content .cr-approval-flow .cr-flow-pending {
        color: var(--cr-muted);
        font-size: 0.72rem;
        line-height: 1.4;
        white-space: nowrap;
    }

    .cr-approve-dialog-content .cr-approval-flow .cr-flow-status {
        color: var(--cr-green);
        font-size: 0.68rem;
        font-weight: 700;
    }

/* ---------- Huy hiệu trạng thái của request ----------
   requested / checked -> vàng cam (đang chờ)
   approved            -> xanh lá
   rejected            -> đỏ                                   */
.cr-status-pill {
    --pill: var(--cr-amber);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--pill) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pill) 14%, transparent);
    color: color-mix(in srgb, var(--pill) 68%, var(--mud-palette-text-primary));
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

    .cr-status-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--pill);
    }
    .cr-status-pill[data-status="approved"] {
        --pill: var(--cr-green);
    }

    .cr-status-pill[data-status="rejected"] {
        --pill: var(--cr-red);
    }

/* ---------- 3. Nút thao tác ---------- */
.cr-approve-dialog-content .cr-request-actions {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    align-self: center;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
    padding-left: 24px;
}

    .cr-approve-dialog-content .cr-request-actions::before {
        content: "";
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: 0;
        width: 1px;
        background: var(--cr-line);
    }

    .cr-approve-dialog-content .cr-request-actions .mud-button {
        min-width: 0;
        height: 38px;
        padding: 0 16px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        white-space: nowrap;
        box-shadow: none;
        transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    }

        .cr-approve-dialog-content .cr-request-actions .mud-button .mud-button-icon-start {
            margin: 0 6px 0 0;
        }

        .cr-approve-dialog-content .cr-request-actions .mud-button .mud-icon-root {
            font-size: 1.1rem;
        }

        .cr-approve-dialog-content .cr-request-actions .mud-button:focus-visible {
            outline: 2px solid var(--mud-palette-primary);
            outline-offset: 2px;
        }

        .cr-approve-dialog-content .cr-request-actions .mud-button.mud-disabled,
        .cr-approve-dialog-content .cr-request-actions .mud-button:disabled {
            opacity: 0.5;
        }

    /* CHECK / APPROVE: xanh lá, chữ trắng */
    .cr-approve-dialog-content .cr-request-actions .cr-action-primary {
        min-width: 0;
        color: #ffffff;
        background: var(--cr-green);
        border: 1px solid var(--cr-green);
    }

        .cr-approve-dialog-content .cr-request-actions .cr-action-primary:hover:not(:disabled) {
            background: var(--cr-green-hover);
            border-color: var(--cr-green-hover);
        }

    /* REJECT / CANCEL: viền đỏ, nền trong suốt */
    .cr-approve-dialog-content .cr-request-actions .cr-action-reject,
    .cr-approve-dialog-content .cr-request-actions .cr-action-cancel {
        color: var(--cr-red);
        background: transparent;
        border: 1px solid var(--cr-red);
    }

        .cr-approve-dialog-content .cr-request-actions .cr-action-reject:hover:not(:disabled),
        .cr-approve-dialog-content .cr-request-actions .cr-action-cancel:hover:not(:disabled) {
            background: color-mix(in srgb, var(--cr-red) 8%, transparent);
        }

    /* PRINT: xám than */
    .cr-approve-dialog-content .cr-request-actions .cr-action-print {
        color: #ffffff !important;
        background: var(--cr-charcoal) !important;
        border: 1px solid var(--cr-charcoal);
    }

        .cr-approve-dialog-content .cr-request-actions .cr-action-print:hover:not(:disabled) {
            background: var(--cr-charcoal-hover) !important;
            border-color: var(--cr-charcoal-hover);
        }

/* ---------- Khung xem trước CM-FOR-0005 ----------
   Mọi thẻ cha của .cr-preview-viewport (tính từ nội dung dialog trở xuống)
   đều phải là flex-column và giãn hết chiều cao còn lại. Chỉ cần một thẻ
   trung gian không giãn là viewport co về ~0 và để trống phần còn lại. */
.mud-dialog:has(.cr-approve-dialog-content) .mud-dialog-content,
.mud-dialog:has(.cr-approve-dialog-content) .mud-dialog-content :has(.cr-preview-viewport) {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
}

.cr-approve-dialog-content .cr-preview-viewport {
    flex: 1 1 0;
    height: auto !important;
    min-height: 240px;
    max-height: none;
}

.cr-approve-dialog-content > .cr-form-container {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-background));
    border: 1px solid var(--cr-line);
    border-radius: 12px;
}

.cr-approve-dialog-content .cr-preview-viewport {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mud-palette-text-primary) 28%, transparent) transparent;
}

/* =========================================================
   RESPONSIVE — theo bề rộng thật của thanh thông tin
   ========================================================= */

/* Hàng 1 không đủ chỗ cho cả 3 khối: quy trình + nút rớt xuống hàng 2 */
@container crbar (max-width: 1500px) {
    .cr-approve-dialog-content .cr-request-steps.cr-approval-flow {
        justify-content: flex-start;
        padding-left: 0;
    }

    .cr-approve-dialog-content .cr-approval-flow::before {
        display: none;
    }
}

/* Thông tin request xếp lưới, bỏ vạch ngăn */
@container crbar (max-width: 920px) {
    .cr-approve-dialog-content .cr-request-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px 16px;
        width: 100%;
    }

    .cr-approve-dialog-content .cr-meta-cell,
    .cr-approve-dialog-content .cr-meta-cell:first-child {
        padding: 0;
    }

        .cr-approve-dialog-content .cr-meta-cell + .cr-meta-cell::before {
            display: none;
        }
}
/* REQUESTER & DEPARTMENT: font-weight 600 */
.cr-approve-dialog-content .cr-meta-cell-2 .cr-meta-value {
    font-weight: 600;
}

/* Rất hẹp: 3 bước xếp dọc, nút xuống hàng */
@container crbar (max-width: 640px) {
    .cr-approve-dialog-content .cr-request-steps.cr-approval-flow {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .cr-approve-dialog-content .cr-approval-flow .cr-flow-step:not(:last-child)::after {
        display: none;
    }

    .cr-approve-dialog-content .cr-request-actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 0;
        padding-left: 0;
    }

        .cr-approve-dialog-content .cr-request-actions::before {
            display: none;
        }
}

/* New Request only: compact reference-style popup and upload review. */
@media (min-width: 769px) {
    .mud-dialog:has(.cr-new-dialog-root) {
        width: min(1280px, calc(100vw - 48px)) !important;
        height: min(860px, calc(100dvh - 48px)) !important;
        max-width: 1280px !important;
        max-height: calc(100dvh - 48px) !important;
        border-radius: 12px !important;
        overflow: hidden;
    }

    .mud-dialog:has(.cr-new-dialog-root) .mud-dialog-content {
        padding: 0 6px 6px !important;
    }
}

.cr-new-dialog-root .cr-new-page {
    gap: 10px;
}

.cr-new-dialog-root .cr-new-hero {
    display: none;
}

.cr-new-dialog-root .cr-new-step-heading {
    padding: 14px 18px;
}

.cr-new-dialog-root .cr-new-step-body {
    gap: 14px;
    padding: 16px 18px;
}

.cr-new-dialog-root .cr-new-upload-zone {
    min-height: 170px;
    padding: 22px 16px;
}

.cr-new-reference-file {
    width: min(100%, 520px);
    justify-content: flex-start;
    margin-top: 4px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.cr-new-reference-file span:first-of-type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-new-file-ready {
    margin-left: auto;
    color: var(--mud-palette-success);
    font-size: 0.75rem;
    font-weight: 700;
}

/* New Request only: reference-style form layout and progress panel. */
.cr-new-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    align-items: start;
    gap: 16px;
}

.cr-new-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.cr-new-process-card {
    position: sticky;
    top: 12px;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.cr-new-process-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.cr-new-process-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #fff;
    border-radius: 50%;
    background: #35b8bd;
}

.cr-new-process-list {
    display: flex;
    flex-direction: column;
}

.cr-new-process-item {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 10px;
    min-height: 76px;
}

.cr-new-process-item:not(:last-child)::after {
    position: absolute;
    top: 25px;
    bottom: 0;
    left: 12px;
    width: 2px;
    content: "";
    background: var(--mud-palette-lines-default);
}

.cr-new-process-marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #fff;
    border-radius: 50%;
    background: #b9b9b9;
    font-size: 0.75rem;
    font-weight: 700;
}

.cr-new-process-item[data-state="done"] .cr-new-process-marker {
    background: #55bd00;
}

.cr-new-process-item[data-state="done"] .cr-new-process-title {
    color: var(--mud-palette-text-primary);
}

.cr-new-process-item[data-state="done"]::after {
    background: #55bd00;
}

.cr-new-process-copy {
    min-width: 0;
    padding-top: 2px;
}

.cr-new-process-title {
    color: #a7a7a7;
    font-weight: 600;
    line-height: 1.25;
}

.cr-new-process-detail {
    display: block;
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

.cr-new-dialog-root .cr-new-layout {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 10px;
}

.cr-new-dialog-root .cr-new-process-card {
    padding: 14px;
}

/* Rejected request state in the approval timeline. */
.cr-approve-dialog-content .cr-approval-flow .cr-flow-step[data-state="rejected"] .cr-flow-marker {
    color: #fff;
    background: #d94b4b;
}

.cr-approve-dialog-content .cr-approval-flow .cr-flow-step[data-state="rejected"] .cr-flow-title {
    color: #c53939;
}

.cr-approve-dialog-content .cr-flow-reason-preview {
    display: block;
    max-width: 520px;
    margin-top: 5px;
    overflow: hidden;
    color: #b34a4a;
    font-size: 0.78rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-rejection-card {
    padding: 14px 16px;
    border: 1px solid rgba(211, 47, 47, 0.28);
    border-left: 4px solid #d32f2f;
    border-radius: 10px;
    background: rgba(211, 47, 47, 0.06);
}

.cr-rejection-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #b42323;
}

.cr-rejection-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: #fff;
    border-radius: 50%;
    background: #d32f2f;
}

.cr-rejection-label {
    display: block;
    margin-top: 12px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.cr-rejection-reason {
    margin-top: 4px;
    padding: 9px 11px;
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(211, 47, 47, 0.16);
    border-radius: 7px;
    background: var(--mud-palette-surface);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cr-reject-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.cr-reject-dialog-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    color: #9b3e3e;
    border: 1px solid rgba(211, 47, 47, 0.2);
    border-radius: 8px;
    background: rgba(211, 47, 47, 0.06);
}

.cr-reject-dialog-note .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 2px;
}

.cr-reject-reason-input textarea {
    min-height: 110px;
}

.cr-reject-dialog-actions {
    gap: 8px;
}

@media (max-width: 768px) {
    .cr-new-layout,
    .cr-new-dialog-root .cr-new-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cr-new-process-card {
        position: static;
    }

    .cr-new-dialog-root .cr-new-hero {
        display: none;
    }

    .cr-new-dialog-root .cr-new-upload-zone {
        min-height: 145px;
    }
}