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



/* =========================================================
   THEME-AWARE LIMS TOKENS
   Keep app chrome neutral: white / gray / black.
   Status colors are still supplied by 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;
    --lims-border-soft: var(--mud-palette-divider);
    --lims-muted: var(--mud-palette-text-secondary);
    --lims-strong: var(--mud-palette-text-primary);
}



/* =========================================================
   GLOBAL PAGE DENSITY
   ========================================================= */

/* 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: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    }

/* 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: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}

.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: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}

.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: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
}

/* =========================================================
   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: 8px;
        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: 8px;
    }

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

/* =========================================================
   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: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
    }

    .dashboard-kpi-item.selected {
        border-color: var(--mud-palette-dark);
        background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    }

/* 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: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
        }

/* 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: var(--mud-palette-primary-text);
    }

        .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: var(--mud-palette-surface);
    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: var(--mud-palette-primary-text);
}

/* 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: var(--mud-palette-primary-text);
}

/* 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: var(--mud-palette-primary-text);
    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: var(--mud-palette-primary-text);
            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%;
}