/* ============================================================
   LAB THEME v2 — design system for My Laboratory
   ------------------------------------------------------------
   Loads AFTER admin.css and deliberately overrides the Bigdeal
   template. Every design decision lives in the :root tokens
   below — change them here and the whole app follows.

   Language: deep navy rail + teal chrome, white cards on a cool
   grey field, blue table headers. Built for dense clinical data,
   so type is compact and figures are tabular.
   ============================================================ */

:root {
    /* ---- Brand ---- */
    --lab-navy: #16263f;
    --lab-navy-2: #1e3350;
    --lab-navy-3: #24405f;
    --lab-teal: #0e7c8c;
    --lab-teal-dark: #0b6473;
    --lab-teal-light: #1497ab;
    --lab-teal-soft: #e6f4f6;

    /* ---- Table header (blue, per lab convention) ---- */
    --lab-thead-bg: #1b3a5c;
    --lab-thead-fg: #eaf1f8;

    /* ---- Status ---- */
    --lab-success: #15803d;
    --lab-success-soft: #dcfce7;
    --lab-warning: #b45309;
    --lab-warning-soft: #fef3c7;
    --lab-danger: #b91c1c;
    --lab-danger-soft: #fee2e2;
    --lab-info: #1d4ed8;
    --lab-info-soft: #dbeafe;

    /* ---- Ink ---- */
    --lab-ink: #0f1c2e;
    --lab-ink-2: #35485f;
    --lab-ink-3: #64748b;
    --lab-ink-faint: #94a3b8;

    /* ---- Surfaces ---- */
    --lab-bg: #f1f4f8;
    --lab-surface: #ffffff;
    --lab-surface-2: #f8fafc;
    --lab-border: #e3e8ef;
    --lab-border-strong: #c9d2e0;

    /* ---- Shape + depth ---- */
    --lab-radius: 12px;
    --lab-radius-sm: 8px;
    --lab-radius-xs: 6px;
    --lab-shadow-sm: 0 1px 2px rgba(15, 28, 46, 0.06);
    --lab-shadow: 0 1px 3px rgba(15, 28, 46, 0.08), 0 8px 24px -14px rgba(15, 28, 46, 0.18);
    --lab-shadow-lg: 0 16px 44px -16px rgba(15, 28, 46, 0.28);

    /* ---- Type ---- */
    --lab-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ---- Compact density: forms fit one screen ---- */
    --lab-field-h: 34px;
    --lab-field-pad: 6px 10px;
    --lab-gap: 12px;
}

/* ------------------------------------------------------------
   1. Base
   ------------------------------------------------------------ */

.page-wrapper,
.authentication-box {
    font-family: var(--lab-font);
    color: var(--lab-ink-2);
    font-feature-settings: "tnum" 1, "cv05" 1;   /* tabular figures */
    -webkit-font-smoothing: antialiased;
}

.page-wrapper .page-body-wrapper .page-body {
    background-color: var(--lab-bg);
}

.page-wrapper h1, .page-wrapper h2, .page-wrapper h3,
.page-wrapper h4, .page-wrapper h5, .page-wrapper h6 {
    font-family: var(--lab-font);
    color: var(--lab-ink);
    letter-spacing: -0.011em;
    font-weight: 600;
}

/* numbers everywhere line up */
.page-wrapper table,
.page-wrapper .lab-stat-value,
.page-wrapper input {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   2. Header (teal chrome)
   ------------------------------------------------------------ */

.page-wrapper .page-main-header {
    background: var(--lab-teal);
    -webkit-box-shadow: none;
            box-shadow: none;
    border-bottom: none;
    height: 62px;
}

.page-wrapper .page-main-header .main-header-left {
    background: transparent;
    padding: 8px 12px;
}

.page-wrapper .page-main-header .main-header-left .logo-wrapper img {
    width: auto;
    max-height: 40px;
    border-radius: 8px;
    background: #fff;
    padding: 3px;
}

.page-wrapper .nav-menus > li > a,
.page-wrapper .nav-menus > li > a.txt-dark,
.page-wrapper .nav-menus > li > a.text-dark {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500;
    font-size: 13.5px;
    border-radius: var(--lab-radius-xs);
    padding: 7px 11px;
    -webkit-transition: background-color 0.15s ease, color 0.15s ease;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.page-wrapper .nav-menus > li > a:hover,
.page-wrapper .nav-menus > li > a.txt-dark:hover,
.page-wrapper .nav-menus > li > a.text-dark:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.14);
}

.page-wrapper .page-main-header .nav-right i {
    color: rgba(255, 255, 255, 0.9);
}

/* dropdown panels */
.page-wrapper .onhover-show-div {
    border-radius: var(--lab-radius-sm);
    -webkit-box-shadow: var(--lab-shadow-lg);
            box-shadow: var(--lab-shadow-lg);
    border: 1px solid var(--lab-border);
    padding: 8px !important;
}

.page-wrapper .language-dropdown li a,
.page-wrapper .profile-dropdown li a {
    color: var(--lab-ink-2);
    font-size: 13px;
    font-weight: 500;
    display: block;
    padding: 7px 10px;
    border-radius: var(--lab-radius-xs);
    white-space: nowrap;
}

.page-wrapper .language-dropdown li a:hover,
.page-wrapper .profile-dropdown li a:hover {
    color: var(--lab-teal);
    background-color: var(--lab-teal-soft);
}

/* ------------------------------------------------------------
   3. Sidebar (navy rail)
   ------------------------------------------------------------ */

.page-wrapper .page-body-wrapper .page-sidebar,
.page-wrapper .page-body-wrapper .sidebar {
    background: var(--lab-navy);
    -webkit-box-shadow: none;
            box-shadow: none;
    border-right: none;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-user {
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    padding: 16px 12px;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-user h6 {
    color: #fff;
    letter-spacing: 0.06em;
    font-size: 13px;
    margin-top: 10px;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-user p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    margin-bottom: 0;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu {
    padding: 10px 0;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu > li > a {
    margin: 1px 10px;
    border-radius: var(--lab-radius-sm);
    padding: 9px 12px;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-header {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: 0;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-header svg,
.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-header i {
    color: rgba(255, 255, 255, 0.55);
    width: 17px;
    height: 17px;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu > li:hover > a,
.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu > li.active > a {
    background-color: rgba(255, 255, 255, 0.09);
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu > li:hover > a .sidebar-header,
.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu > li.active > a .sidebar-header,
.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu li .sidebar-header:hover {
    color: #fff;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu > li:hover > a .sidebar-header svg,
.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu > li.active > a .sidebar-header svg {
    color: var(--lab-teal-light);
}

/* submenu */
.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-submenu {
    background: rgba(0, 0, 0, 0.16);
    margin: 0 10px 4px;
    border-radius: var(--lab-radius-sm);
    padding: 4px 0;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-submenu li a {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12.5px;
    padding: 6px 14px 6px 34px;
    -webkit-transition: color 0.15s ease;
    transition: color 0.15s ease;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-submenu li a:hover,
.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-submenu li.active a {
    color: #fff;
}

.page-wrapper .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-submenu li a i.fa-circle {
    font-size: 4px;
    vertical-align: 3px;
    color: var(--lab-teal-light);
}

/* count badge on a sidebar item */
.lab-nav-badge {
    float: right;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--lab-teal);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 19px;
    text-align: center;
}

/* ------------------------------------------------------------
   4. Page header / breadcrumb
   ------------------------------------------------------------ */

.page-wrapper .page-body-wrapper .page-header {
    padding-top: 18px;
    padding-bottom: 14px;
}

.page-wrapper .page-body-wrapper .page-header .row h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--lab-ink);
    margin-bottom: 0;
}

.page-wrapper .page-body-wrapper .page-header .row h3 small {
    display: block;
    font-size: 12px;
    margin-top: 3px;
    color: var(--lab-ink-3);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.page-wrapper .breadcrumb {
    background-color: transparent;
    margin-bottom: 0;
    padding: 6px 0;
}

.page-wrapper .breadcrumb-item,
.page-wrapper .breadcrumb-item a { color: var(--lab-ink-3); font-size: 12.5px; }
.page-wrapper .breadcrumb-item.active { color: var(--lab-ink-2); font-weight: 500; }

/* ------------------------------------------------------------
   5. Cards
   ------------------------------------------------------------ */

.page-wrapper .card {
    border: 1px solid var(--lab-border);
    border-radius: var(--lab-radius);
    -webkit-box-shadow: var(--lab-shadow-sm);
            box-shadow: var(--lab-shadow-sm);
    margin-bottom: 16px;
    background: var(--lab-surface);
}

.page-wrapper .card .card-header {
    background-color: var(--lab-surface);
    border-bottom: 1px solid var(--lab-border);
    border-radius: var(--lab-radius) var(--lab-radius) 0 0;
    padding: 13px 18px;
}

.page-wrapper .card .card-header h5 {
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    margin: 0;
    color: var(--lab-ink);
}

.page-wrapper .card .card-body {
    padding: 18px;
}

.page-wrapper .card .card-body.is-flush { padding: 0; }

/* ------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------ */

.page-wrapper .btn,
.authentication-box .btn {
    font-family: var(--lab-font);
    font-weight: 500;
    border-radius: var(--lab-radius-xs);
    padding: 7px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

/* template hard-codes #00baf2 with !important — take it back */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--lab-teal) !important;
    border-color: var(--lab-teal) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--lab-teal-dark) !important;
    border-color: var(--lab-teal-dark) !important;
    -webkit-box-shadow: 0 4px 12px -4px rgba(14, 124, 140, 0.55) !important;
            box-shadow: 0 4px 12px -4px rgba(14, 124, 140, 0.55) !important;
}

.btn-outline-primary {
    color: var(--lab-teal) !important;
    border-color: var(--lab-border-strong) !important;
    background-color: var(--lab-surface) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--lab-teal-dark) !important;
    border-color: var(--lab-teal) !important;
    background-color: var(--lab-teal-soft) !important;
}

.btn-secondary {
    background-color: var(--lab-surface) !important;
    border-color: var(--lab-border-strong) !important;
    color: var(--lab-ink-2) !important;
}

.btn-secondary:hover { background-color: var(--lab-surface-2) !important; }

.btn-success { background-color: var(--lab-success) !important; border-color: var(--lab-success) !important; }
.btn-danger  { background-color: var(--lab-danger) !important;  border-color: var(--lab-danger) !important; }
.btn-warning { background-color: var(--lab-warning) !important; border-color: var(--lab-warning) !important; color: #fff !important; }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }

/* legacy views put fa icon classes directly on .btn */
.page-wrapper .btn.fa { font-family: var(--lab-font), FontAwesome; }

/* ------------------------------------------------------------
   7. Forms — compact, icon-led labels
   ------------------------------------------------------------ */

.page-wrapper .form-control,
.page-wrapper select.form-control,
.authentication-box .form-control {
    font-family: var(--lab-font);
    font-size: 13.5px;
    color: var(--lab-ink);
    background-color: var(--lab-surface);
    border: 1px solid var(--lab-border-strong);
    border-radius: var(--lab-radius-xs);
    padding: var(--lab-field-pad);
    height: var(--lab-field-h);
    -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-wrapper textarea.form-control { height: auto; }

.page-wrapper .form-control:focus,
.authentication-box .form-control:focus {
    border-color: var(--lab-teal);
    -webkit-box-shadow: 0 0 0 3px rgba(14, 124, 140, 0.16);
            box-shadow: 0 0 0 3px rgba(14, 124, 140, 0.16);
    outline: none;
}

/* keyboard navigation highlights the active field */
.page-wrapper .form-control.lab-kb-active {
    border-color: var(--lab-teal);
    background: var(--lab-teal-soft);
}

.page-wrapper .form-control::-webkit-input-placeholder { color: var(--lab-ink-faint); }
.page-wrapper .form-control::-moz-placeholder          { color: var(--lab-ink-faint); }
.page-wrapper .form-control:-ms-input-placeholder      { color: var(--lab-ink-faint); }
.page-wrapper .form-control::placeholder               { color: var(--lab-ink-faint); }

.page-wrapper .form-control[readonly] {
    background-color: var(--lab-surface-2);
    color: var(--lab-ink-2);
}

.page-wrapper label,
.page-wrapper .control-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--lab-ink);
    margin-bottom: 3px;
}

.page-wrapper .form-group { margin-bottom: var(--lab-gap); }

.page-wrapper .text-danger,
.page-wrapper .field-validation-error {
    color: var(--lab-danger) !important;
    font-size: 11.5px;
}

.page-wrapper .input-validation-error { border-color: var(--lab-danger) !important; }

/* ---- Field grid: auto-fits so forms stay on one screen ---- */

.lab-form-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: var(--lab-gap) 14px;
}

.lab-form-grid.is-tight  { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.lab-form-grid.is-wide   { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.lab-field { min-width: 0; }

/* label + blue icon, black text */
.lab-field > label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--lab-ink);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lab-field > label svg,
.lab-field > label i {
    width: 13px;
    height: 13px;
    font-size: 12px;
    color: var(--lab-teal);
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

.lab-field .req { color: var(--lab-danger); margin-left: 1px; }

/* checkbox sitting where a field control would be */
.lab-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    height: var(--lab-field-h);
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--lab-ink-2);
    cursor: pointer;
}

.lab-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--lab-teal);
    cursor: pointer;
}

.lab-field .form-control,
.lab-field select.form-control { width: 100%; }

.lab-span-2 { grid-column: span 2; }
.lab-span-3 { grid-column: span 3; }
.lab-span-4 { grid-column: span 4; }

@media (max-width: 700px) {
    .lab-span-2, .lab-span-3, .lab-span-4 { grid-column: span 1; }
}

/* section inside a compact form */
.lab-form-section { margin-bottom: 14px; }

.lab-form-section > .card-header h5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
}

.lab-form-section > .card-header h5 .step {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--lab-teal);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.lab-form-section > .card-header h5 svg { color: var(--lab-teal); width: 16px; height: 16px; }

/* divider heading between field groups inside one card */
.lab-subhead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lab-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 18px 0 12px;
    padding-top: 14px;
    border-top: 1px dashed var(--lab-border);
}

.lab-subhead svg,
.lab-subhead i { width: 13px; height: 13px; color: var(--lab-teal); }

/* first subhead in a card needs no rule above it */
.lab-subhead.is-first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* wrapping row of related action buttons, replaces col-md-1 grids */
.lab-btn-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
}

.lab-btn-row .btn svg {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: -3px;
}

/* "create something" tiles: an icon, a name and what it's for */
.lab-tiles {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 10px;
}

.lab-tile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--lab-border);
    border-radius: var(--lab-radius-sm);
    background: var(--lab-surface);
    text-decoration: none;
    -webkit-transition: all 0.16s ease;
    transition: all 0.16s ease;
}

.lab-tile:hover {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    -webkit-box-shadow: 0 4px 14px -6px rgba(15, 28, 46, 0.22);
            box-shadow: 0 4px 14px -6px rgba(15, 28, 46, 0.22);
}

.lab-tile .ic {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: var(--lab-radius-xs);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.lab-tile .ic svg { width: 17px; height: 17px; }
.lab-tile .tx { min-width: 0; }

.lab-tile .t1 {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--lab-ink);
    line-height: 1.25;
}

.lab-tile .t2 {
    display: block;
    font-size: 11px;
    color: var(--lab-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* category filter strip: chips instead of a full-width table */
.page-wrapper .page-body table.lab-chip-table,
.lab-chip-table {
    width: auto;
    border-collapse: separate;
    border-spacing: 6px 0;
    margin: 0;
}

.page-wrapper .page-body table.lab-chip-table td {
    border-bottom: none;
    padding: 6px 14px;
}

/* sticky save bar */
.lab-actions-bar {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 8px;
    background: var(--lab-surface);
    border: 1px solid var(--lab-border);
    border-radius: var(--lab-radius);
    -webkit-box-shadow: 0 -2px 16px -8px rgba(15, 28, 46, 0.28);
            box-shadow: 0 -2px 16px -8px rgba(15, 28, 46, 0.28);
    padding: 11px 16px;
    margin-bottom: 16px;
}

.lab-actions-bar .summary {
    margin-right: auto;
    font-size: 12.5px;
    color: var(--lab-ink-3);
}

.lab-actions-bar .summary strong {
    color: var(--lab-ink);
    font-size: 16px;
    font-weight: 600;
}

/* ------------------------------------------------------------
   7b. Patient-registration screen
   ------------------------------------------------------------ */

/* gradient page banner */
.reg-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 12px;
    background: -webkit-gradient(linear, left top, right top, from(var(--lab-navy)), color-stop(52%, var(--lab-teal-dark)), to(var(--lab-teal)));
    background: linear-gradient(110deg, var(--lab-navy) 0%, var(--lab-teal-dark) 52%, var(--lab-teal) 100%);
    border-radius: var(--lab-radius);
    padding: 14px 20px;
    margin-bottom: 16px;
    -webkit-box-shadow: 0 8px 22px -12px rgba(14, 124, 140, 0.6);
            box-shadow: 0 8px 22px -12px rgba(14, 124, 140, 0.6);
}

.reg-banner .bt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 13px;
    min-width: 0;
}

.reg-banner .bt .ic {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.16);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #fff;
}

.reg-banner .bt .ic svg { width: 20px; height: 20px; }
.reg-banner .bt h3 { color: #fff; font-size: 18px; font-weight: 700; margin: 0; line-height: 1.15; }
.reg-banner .bt p { color: rgba(255, 255, 255, 0.82); font-size: 12px; margin: 2px 0 0; letter-spacing: 0.02em; }

.reg-banner .ba {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.reg-banner .ba a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 15px;
    border-radius: var(--lab-radius-sm);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    -webkit-transition: background 0.15s ease;
    transition: background 0.15s ease;
}

.reg-banner .ba a:hover { background: rgba(255, 255, 255, 0.28); }
.reg-banner .ba a svg { width: 15px; height: 15px; }

/* banner merged into the top of a card (attached to the table below) */
.reg-card { overflow: hidden; }

.reg-banner.in-card {
    margin-bottom: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
}

/* ---- filter bar: category chips + a search that stays a search ---- */
.lab-filterbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.lab-chips {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 7px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-width: 0;
}

.lab-chip {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--lab-border-strong);
    background: var(--lab-surface);
    color: var(--lab-ink-2);
    font-family: var(--lab-font);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.lab-chip:hover {
    border-color: var(--lab-teal);
    color: var(--lab-teal);
    background: var(--lab-teal-soft);
}

/* the selected category has to be obvious without reading anything else */
.lab-chip.is-active {
    background: var(--lab-teal);
    border-color: var(--lab-teal);
    color: #fff;
    font-weight: 600;
    -webkit-box-shadow: 0 2px 8px -2px rgba(14, 124, 140, 0.55);
            box-shadow: 0 2px 8px -2px rgba(14, 124, 140, 0.55);
}

.lab-chip .cnt {
    font-size: 11px;
    font-weight: 600;
    background: var(--lab-surface-2);
    color: var(--lab-ink-3);
    border-radius: 999px;
    padding: 0 6px;
    line-height: 17px;
}

.lab-chip.is-active .cnt { background: rgba(255, 255, 255, 0.22); color: #fff; }

.lab-filter-search {
    position: relative;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 280px;
            flex: 0 1 280px;
    min-width: 190px;
}

.lab-filter-search svg,
.lab-filter-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    color: var(--lab-ink-faint);
    pointer-events: none;
}

.lab-filter-search .form-control { padding-left: 32px; }

@media (max-width: 720px) {
    .lab-filter-search { -ms-flex: 1 1 100%; flex: 1 1 100%; }
}

/* distinct row-action tints so two icon buttons never read alike */
.lab-row-actions .act-view {
    color: var(--lab-info) !important;
    border-color: #c3d4f8 !important;
    background: var(--lab-surface) !important;
}

.lab-row-actions .act-view:hover,
.lab-row-actions .act-view:focus {
    color: var(--lab-info) !important;
    background: var(--lab-info-soft) !important;
    border-color: var(--lab-info) !important;
}

.lab-row-actions .act-edit {
    color: var(--lab-teal) !important;
    border-color: #b6dde3 !important;
    background: var(--lab-surface) !important;
}

.lab-row-actions .act-edit:hover,
.lab-row-actions .act-edit:focus {
    color: var(--lab-teal-dark) !important;
    background: var(--lab-teal-soft) !important;
    border-color: var(--lab-teal) !important;
}

.lab-row-actions .act-add {
    color: var(--lab-success) !important;
    border-color: #b7e4c7 !important;
    background: var(--lab-surface) !important;
}

.lab-row-actions .act-add:hover,
.lab-row-actions .act-add:focus {
    color: var(--lab-success) !important;
    background: var(--lab-success-soft) !important;
    border-color: var(--lab-success) !important;
}

.lab-row-actions .act-report {
    color: var(--lab-warning) !important;
    border-color: #f2d19b !important;
    background: var(--lab-surface) !important;
}

.lab-row-actions .act-report:hover,
.lab-row-actions .act-report:focus {
    color: var(--lab-warning) !important;
    background: var(--lab-warning-soft) !important;
    border-color: var(--lab-warning) !important;
}

/* explicit field rows */
.reg-row {
    display: -ms-grid;
    display: grid;
    gap: 12px 14px;
    margin-bottom: 14px;
}

.reg-row:last-child { margin-bottom: 0; }

/* Title · First · Last · Gender · Mobile */
.reg-row-name { grid-template-columns: 96px 1.5fr 1.5fr 1fr 1.2fr; }

/* Age · Aadhar · Email · Address */
.reg-row-id { grid-template-columns: minmax(168px, 0.9fr) 1.1fr 1.3fr 1.7fr; }

/* age triple */
.reg-age-inputs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
}

.reg-age-inputs .form-control {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 1100px) {
    .reg-row-name { grid-template-columns: 90px 1fr 1fr 1fr; }
    .reg-row-id { grid-template-columns: minmax(160px, auto) 1fr 1fr; }
}

@media (max-width: 640px) {
    .reg-row-name, .reg-row-id { grid-template-columns: 1fr 1fr; }
}

/* on a phone, name and address fields get the full width; the payment
   row keeps two columns because those values are short */
@media (max-width: 420px) {
    .reg-row-name, .reg-row-id { grid-template-columns: 1fr; }
}

/* investigations: search + fee + add toolbar */
.reg-inv-add {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 10px;
}

.reg-inv-add .grow { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.reg-inv-add .fee { -webkit-box-flex: 0; -ms-flex: 0 0 130px; flex: 0 0 130px; }
.reg-inv-add .add { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.reg-inv-add .add .btn { height: var(--lab-field-h); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

@media (max-width: 560px) {
    .reg-inv-add { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .reg-inv-add .grow { -ms-flex: 1 1 100%; flex: 1 1 100%; }
}

/* payment row */
.reg-row-pay { grid-template-columns: repeat(5, 1fr) 1.3fr; }

@media (max-width: 1100px) { .reg-row-pay { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .reg-row-pay { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------
   8. Tables — blue header, dense rows
   ------------------------------------------------------------ */

.page-wrapper .page-body table {
    background-color: var(--lab-surface);
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

.page-wrapper .page-body table th,
.page-wrapper .page-body table thead th,
.page-wrapper .page-body table thead td {
    background-color: var(--lab-thead-bg) !important;
    color: var(--lab-thead-fg) !important;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 9px 12px;
    border: none;
    white-space: nowrap;
}

.page-wrapper .page-body table thead th:first-child { border-top-left-radius: var(--lab-radius-sm); }
.page-wrapper .page-body table thead th:last-child  { border-top-right-radius: var(--lab-radius-sm); }

.page-wrapper .page-body table td {
    padding: 8px 12px;
    color: var(--lab-ink-2);
    border: none;
    border-bottom: 1px solid var(--lab-border);
    vertical-align: middle;
}

.page-wrapper .page-body table tbody tr:hover td { background-color: var(--lab-teal-soft); }

/* inputs living inside a table footer/row stay compact */
.page-wrapper .page-body table .form-control { height: 30px; font-size: 13px; }

.page-wrapper .page-body .table-responsive { border-radius: var(--lab-radius-sm); }

/* clickable category chips used as a filter strip above a list */
.page-wrapper .page-body table td.lab-cat-chip,
.lab-cat-chip {
    background: var(--lab-teal) !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 12.5px;
    text-align: center;
    cursor: pointer;
    border-radius: var(--lab-radius-xs);
    border: none !important;
    -webkit-transition: background 0.15s ease;
    transition: background 0.15s ease;
}

.page-wrapper .page-body table td.lab-cat-chip:hover,
.lab-cat-chip:hover { background: var(--lab-teal-dark) !important; }

/* lines nested under a grouped parent row */
.page-wrapper .page-body table.lab-subtable {
    margin: 0;
    background: var(--lab-surface-2);
}

.page-wrapper .page-body table.lab-subtable th {
    background: var(--lab-surface-2) !important;
    color: var(--lab-ink-3) !important;
    font-size: 10.5px;
    border-bottom: 1px solid var(--lab-border);
    border-radius: 0;
}

.page-wrapper .page-body table.lab-subtable td {
    background: var(--lab-surface-2);
    font-size: 12.5px;
    border-bottom: 1px solid var(--lab-border);
}

.page-wrapper .page-body table.lab-subtable tbody tr:last-child td { border-bottom: none; }
.page-wrapper .page-body table.lab-subtable tbody tr:hover td { background: var(--lab-teal-soft); }

.lab-empty-row td {
    text-align: center !important;
    color: var(--lab-ink-faint) !important;
    font-size: 12.5px;
    padding: 22px 12px !important;
}

/* list-page toolbar */
.lab-toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    gap: 10px;
}

.lab-toolbar-search {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 240px;
            flex: 1 1 240px;
    min-width: 180px;
}

.lab-toolbar-field { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }

.lab-toolbar-field label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--lab-ink);
    margin-bottom: 3px;
}

.lab-toolbar-field label svg,
.lab-toolbar-field label i { width: 12px; height: 12px; color: var(--lab-teal); }

.lab-toolbar-actions {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 7px;
}

.lab-row-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
}

.lab-row-actions .btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 12.5px;
    line-height: 1;
}

/* row actions use inline SVG (Feather), not an icon font — the bundled
   Font Awesome CSS points at ../fonts/*.woff2 which this project does
   not ship, so every fa- glyph renders as the same missing box. */
.lab-row-actions .btn svg {
    width: 15px;
    height: 15px;
    stroke-width: 2;
}

/* ------------------------------------------------------------
   9. Modals
   ------------------------------------------------------------ */

/* embedded receipt / report viewer */
#labEmbedModal .modal-dialog { max-width: 94vw; }
#labEmbedModal .modal-content { height: 90vh; }
#labEmbedModal .modal-body { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0; overflow: hidden; }
#labEmbedFrame { width: 100%; height: 100%; border: 0; display: block; background: var(--lab-bg); }

.lab-modal-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    margin-left: auto;
}

.lab-modal-actions .close { margin-left: 2px; }

/* confirm dialog */
#labConfirmModal .modal-dialog { max-width: 420px; }

.lab-confirm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 14px;
}

.lab-confirm .ic {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--lab-danger-soft);
    color: var(--lab-danger);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 17px;
}

.lab-confirm .ic svg { width: 18px; height: 18px; }
.lab-confirm p { margin: 0; font-size: 14px; color: var(--lab-ink-2); line-height: 1.5; }

/* SVG icons sitting next to button text */
.lab-modal-actions .btn svg,
.modal-footer .btn svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px;
}
.lab-confirm p strong { color: var(--lab-ink); }

.modal-content {
    border: none;
    border-radius: var(--lab-radius);
    -webkit-box-shadow: var(--lab-shadow-lg);
            box-shadow: var(--lab-shadow-lg);
    font-family: var(--lab-font);
}

.modal-header {
    border-bottom: 1px solid var(--lab-border);
    padding: 14px 20px;
    background: var(--lab-surface);
    border-radius: var(--lab-radius) var(--lab-radius) 0 0;
}

.modal-header .modal-title,
.modal-header h3.modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--lab-ink);
    margin: 0;
}

.modal-body   { padding: 20px; }
.modal-footer { border-top: 1px solid var(--lab-border); padding: 12px 20px; }

.modal-header .close,
.modal-header a.close {
    color: var(--lab-ink-3);
    opacity: 1;
    text-decoration: none;
    font-size: 21px;
    line-height: 1;
}

/* ------------------------------------------------------------
   10. Stat cards + sparklines
   ------------------------------------------------------------ */

.lab-section-title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lab-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2px 0 10px;
}

.lab-stat-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.lab-stat-card {
    position: relative;
    background: var(--lab-surface);
    border: 1px solid var(--lab-border);
    border-radius: var(--lab-radius);
    -webkit-box-shadow: var(--lab-shadow-sm);
            box-shadow: var(--lab-shadow-sm);
    padding: 15px 16px;
    overflow: hidden;
    -webkit-transition: -webkit-box-shadow 0.15s ease;
    transition: box-shadow 0.15s ease;
}

/* accent rail so the cards read as a set */
.lab-stat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--lab-teal);
    opacity: 0.85;
}

.lab-stat-card:hover {
    -webkit-box-shadow: var(--lab-shadow);
            box-shadow: var(--lab-shadow);
}

.lab-stat-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 10px;
}

.lab-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--lab-ink-2);
    margin-bottom: 6px;
}

.lab-stat-value {
    font-size: 25px;
    font-weight: 600;
    color: var(--lab-ink);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.02em;
}

.lab-stat-trend {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 7px;
    vertical-align: 3px;
}

.lab-stat-trend.is-up   { color: var(--lab-success); }
.lab-stat-trend.is-down { color: var(--lab-danger); }

.lab-stat-icon {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--lab-radius-sm);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.lab-stat-icon svg,
.lab-stat-icon i { width: 17px; height: 17px; }

.lab-stat-icon.is-teal    { background: var(--lab-teal-soft);    color: var(--lab-teal); }
.lab-stat-icon.is-success { background: var(--lab-success-soft); color: var(--lab-success); }
.lab-stat-icon.is-warning { background: var(--lab-warning-soft); color: var(--lab-warning); }
.lab-stat-icon.is-danger  { background: var(--lab-danger-soft);  color: var(--lab-danger); }
.lab-stat-icon.is-info    { background: var(--lab-info-soft);    color: var(--lab-info); }

/* sparkline strip pinned to the card floor */
.lab-spark { height: 46px; margin: 6px -16px 0; }

/* ------------------------------------------------------------
   11. Status pills + badges
   ------------------------------------------------------------ */

.lab-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.5;
    white-space: nowrap;
}

.lab-badge-success { background: var(--lab-success-soft); color: var(--lab-success); }
.lab-badge-warning { background: var(--lab-warning-soft); color: var(--lab-warning); }
.lab-badge-danger  { background: var(--lab-danger-soft);  color: var(--lab-danger); }
.lab-badge-info    { background: var(--lab-info-soft);    color: var(--lab-info); }
.lab-badge-teal    { background: var(--lab-teal-soft);    color: var(--lab-teal); }
.lab-badge-muted   { background: #eef1f5;                 color: var(--lab-ink-3); }

/* solid variant, like "Processing" in the reference */
.lab-badge-solid   { background: var(--lab-info); color: #fff; }

/* status dot */
.lab-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-left: 7px;
    vertical-align: middle;
}

.lab-dot.is-success { background: var(--lab-success); }
.lab-dot.is-warning { background: var(--lab-warning); }
.lab-dot.is-muted   { background: var(--lab-ink-faint); }

/* ------------------------------------------------------------
   12. List cards (Patient Activity / Notifications style)
   ------------------------------------------------------------ */

.lab-list { list-style: none; margin: 0; padding: 0; }

.lab-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 11px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--lab-border);
}

.lab-list li:last-child { border-bottom: none; }

.lab-list .avatar {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--lab-teal-soft);
    color: var(--lab-teal);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.lab-list .avatar svg { width: 16px; height: 16px; }

.lab-list .body { min-width: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.lab-list .body .title {
    font-size: 13px;
    font-weight: 500;
    color: var(--lab-ink);
    display: block;
}

.lab-list .body .meta {
    font-size: 11.5px;
    color: var(--lab-ink-3);
}

.lab-list .trail { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; color: var(--lab-ink-faint); }

/* ------------------------------------------------------------
   13. Alerts
   ------------------------------------------------------------ */

.lab-alert {
    border-radius: var(--lab-radius-sm);
    padding: 11px 14px;
    font-size: 13px;
    border: 1px solid transparent;
    margin-bottom: 14px;
}

.lab-alert-danger  { background: var(--lab-danger-soft);  border-color: rgba(185, 28, 28, 0.22); color: var(--lab-danger); }
.lab-alert-success { background: var(--lab-success-soft); border-color: rgba(21, 128, 61, 0.22); color: var(--lab-success); }
.lab-alert-info    { background: var(--lab-teal-soft);    border-color: rgba(14, 124, 140, 0.22); color: var(--lab-teal-dark); }

/* an alert that leads with an icon */
.lab-alert svg {
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    margin-right: 7px;
}

/* ------------------------------------------------------------
   14. Footer + scrollbar
   ------------------------------------------------------------ */

.page-wrapper .page-body-wrapper footer {
    background-color: var(--lab-surface);
    border-top: 1px solid var(--lab-border);
    -webkit-box-shadow: none;
            box-shadow: none;
}

.page-wrapper .page-body-wrapper footer p {
    color: var(--lab-ink-3);
    font-size: 12.5px;
}

.page-wrapper ::-webkit-scrollbar { width: 8px; height: 8px; }
.page-wrapper ::-webkit-scrollbar-thumb { background: var(--lab-border-strong); border-radius: 999px; }
.page-wrapper ::-webkit-scrollbar-track { background: transparent; }

.page-wrapper .page-sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

/* ------------------------------------------------------------
   14a. Case strip — the read-only "who is this for" block that sits
   above a data-entry table
   ------------------------------------------------------------ */

.lab-case-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 22px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--lab-surface-2, #f7f9fc);
    border: 1px solid var(--lab-border);
    border-radius: var(--lab-radius-sm);
}

.lab-case-strip .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
}

.lab-case-strip .k {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 92px;
    font-weight: 600;
    color: var(--lab-ink-3);
}

.lab-case-strip .v { color: var(--lab-ink); }
.lab-case-strip .wide { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .lab-case-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .lab-case-strip { grid-template-columns: 1fr; }
}

/* the row you are typing a result into */
.page-wrapper .page-body table.lab-result-table tbody tr.selected-row td {
    background-color: var(--lab-teal-soft);
}

.page-wrapper .page-body table.lab-result-table .form-control {
    height: 30px;
    font-weight: 600;
}

/* ------------------------------------------------------------
   14b. Printed receipt

   Deliberately not themed: black rules, Arial, grey title strips.
   This is a document that goes on paper and gets filed, so it
   follows the billing-receipt convention the rest of the group
   already prints, not the app's navy-and-teal chrome.
   ------------------------------------------------------------ */

.rcpt-toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    max-width: 780px;
    margin: 0 auto 14px;
}

.rcpt-toolbar .meta {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    font-size: 12.5px;
    color: var(--lab-ink-3);
}

.rcpt {
    max-width: 780px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000;
    background: #fff;
}

.rcpt * { box-sizing: border-box; }

/* Section 8 themes every table under .page-body — roomy padding, grey
   rules, navy text, a teal row hover. None of that belongs on a document
   that gets printed and filed, so the tables inside the sheet opt out.
   These need the full .page-wrapper .page-body prefix to outrank it. */
.page-wrapper .page-body .rcpt table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.page-wrapper .page-body .rcpt table td {
    padding: 1px 0;
    color: #000;
    border: none;
    vertical-align: top;
    font-size: 11px;
    line-height: 1.3;
}

.page-wrapper .page-body .rcpt table tbody tr:hover td { background-color: transparent; }

.rcpt-sheet {
    border: 2px solid #000;
    min-height: 110mm;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: #fff;
    page-break-inside: avoid;
}

/* ---- letterhead ---- */
.rcpt-head {
    border-bottom: 2px solid #000;
    padding: 4px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
}

.rcpt-head .logo {
    width: 70px;
    height: 70px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.rcpt-head .logo img { width: 100%; height: 100%; object-fit: contain; }

.rcpt-head .org {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: center;
}

.rcpt-head .org h2 {
    margin: 0 0 3px;
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase;
    color: #c00000;
    line-height: 1.15;
}

.rcpt-head .org p { margin: 0; font-size: 11px; }
.rcpt-head .org p + p { margin-top: 2px; }

.rcpt-head .regno {
    width: 84px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    text-align: right;
    font-size: 10px;
}

/* the blank band you print onto pre-printed stationery */
.rcpt-headspace { height: 80px; border-bottom: 2px solid #000; }

.rcpt-strip {
    background-color: #e0e0e0;
    border-bottom: 2px solid #000;
    text-align: center;
    padding: 2px;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 1px;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
}

/* ---- who the receipt is for ---- */
.rcpt-party {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-bottom: 2px solid #000;
}

.rcpt-party .col { padding: 2px 8px; }
.rcpt-party .l { width: 60%; border-right: 2px solid #000; }
.rcpt-party .r { width: 40%; }

.rcpt-party .k { width: 30%; font-weight: bold; }
.rcpt-party .sep { width: 5%; }
.rcpt-party .r .k { text-align: right; }
.rcpt-party .r .sep { text-align: center; }
.rcpt-party .nm { font-size: 12px; text-transform: uppercase; font-weight: bold; }

/* ---- what was billed ---- */
.rcpt-items {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.rcpt-ihead,
.rcpt-irow,
.rcpt-ifill {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.rcpt-ihead {
    border-bottom: 1px solid #000;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 10px;
    background-color: #e0e0e0;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
}

.rcpt-irow { font-size: 11px; }

/* an empty run that carries the column rules to the footer */
.rcpt-ifill {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.rcpt-items .c-sr   { width:  6%; text-align: center; padding: 2px 5px; border-right: 1px solid #000; }
.rcpt-items .c-desc { width: 54%; text-align: left;   padding: 2px 5px; border-right: 1px solid #000; }
.rcpt-items .c-qty  { width: 10%; text-align: center; padding: 2px 5px; border-right: 1px solid #000; }
.rcpt-items .c-rate { width: 12%; text-align: right;  padding: 2px 5px; border-right: 1px solid #000; }
.rcpt-items .c-amt  { width: 18%; text-align: right;  padding: 2px 5px; }

/* ---- totals ---- */
.rcpt-foot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 2px solid #000;
    margin-top: auto;
}

.rcpt-words {
    width: 60%;
    border-right: 2px solid #000;
    padding: 6px 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 8px;
}

.rcpt-words .cap { margin: 0 0 2px; font-size: 10px; font-weight: bold; }
.rcpt-words .amt { margin: 0; font-size: 11px; font-weight: bold; text-transform: capitalize; }
.rcpt-words .note { font-size: 9px; color: #444; }
.rcpt-words .note p { margin: 0; font-weight: bold; }
.rcpt-words .note ul { padding-left: 12px; margin: 2px 0 0; }

.rcpt-calc { width: 40%; }

.page-wrapper .page-body .rcpt .rcpt-calc table td {
    padding: 2px 8px;
    border-bottom: 1px solid #000;
}

.page-wrapper .page-body .rcpt .rcpt-calc table tr:last-child td { border-bottom: none; }
.page-wrapper .page-body .rcpt .rcpt-calc table .v { text-align: right; }

.page-wrapper .page-body .rcpt .rcpt-calc table .strong td,
.page-wrapper .page-body .rcpt .rcpt-calc table td.strong {
    font-weight: bold;
    font-size: 12px;
}

.page-wrapper .page-body .rcpt .rcpt-calc table .hl td {
    background-color: #e0e0e0;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
}

.page-wrapper .page-body .rcpt .rcpt-calc table .due td { border-top: 2px solid #000; }

/* ---- test report body: department, then test, then parameters ---- */
.rcpt-report { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; }

.rcpt-group {
    background-color: #e0e0e0;
    border-bottom: 1px solid #000;
    padding: 3px 8px;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
}

.rcpt-test {
    padding: 5px 8px 2px;
    font-weight: bold;
    font-size: 11.5px;
    text-decoration: underline;
}

.page-wrapper .page-body .rcpt table.rcpt-params { margin-bottom: 6px; }

.page-wrapper .page-body .rcpt table.rcpt-params th {
    /* section 8 paints every th navy with !important, so matching it is
       the only way to keep the report's header a plain ruled line */
    background-color: transparent !important;
    color: #000 !important;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    padding: 2px 8px;
    font-weight: bold;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    border-radius: 0;
}

.page-wrapper .page-body .rcpt table.rcpt-params td {
    padding: 2px 8px;
    vertical-align: top;
}

.page-wrapper .page-body .rcpt table.rcpt-params .p-name { width: 40%; }
.page-wrapper .page-body .rcpt table.rcpt-params .p-val  { width: 18%; font-weight: bold; }
.page-wrapper .page-body .rcpt table.rcpt-params .p-unit { width: 14%; }
.page-wrapper .page-body .rcpt table.rcpt-params .p-ref  { width: 28%; }

/* a result the lab flagged reads as out of range */
.page-wrapper .page-body .rcpt table.rcpt-params .p-flag {
    font-weight: bold;
    text-transform: uppercase;
}

.rcpt-endline {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.12em;
    padding: 8px 0 4px;
    border-top: 1px solid #000;
    margin-top: 6px;
}

/* ---- signatures ---- */
.rcpt-sign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 15px 15px 5px;
    border-top: 2px solid #000;
}

.rcpt-sign .box { width: 40%; }

.rcpt-sign .ln {
    border-top: 1px solid #000;
    padding-top: 3px;
    text-align: center;
    font-weight: bold;
    font-size: 10px;
}

/* on a narrow screen the columns would be unreadable, so let the
   sheet scroll sideways rather than reflow into something that no
   longer matches what prints */
@media (max-width: 700px) {
    .rcpt { overflow-x: auto; }
    .rcpt-sheet { min-width: 640px; }
}

/* ---- paper ---- */
@media print {
    @page { size: A4 portrait; margin: 6mm 5mm; }

    html, body { background: #fff; margin: 0; padding: 0; }

    .lab-topnav,
    .lab-side,
    .lab-side-backdrop,
    .lab-panel-fab,
    .lab-statusbar,
    .reg-banner,
    .lab-actions-bar,
    .rcpt-toolbar,
    .no-print { display: none !important; }

    .rcpt {
        max-width: none;
        margin: 0;
        overflow: visible;
    }

    .rcpt-sheet { min-width: 0; }
}


/* ============================================================
   15. Responsive
   ------------------------------------------------------------
   Lives in the design system so every page inherits it, rather
   than being bolted onto individual screens.
   ============================================================ */

/* A wide table must scroll inside its card, never push the page
   sideways. Views that wrap their table in .table-responsive already
   do this; card-body covers the many that don't. */
.page-wrapper .card-body { overflow-x: auto; }

.page-wrapper .card-body,
.page-wrapper .table-responsive { -webkit-overflow-scrolling: touch; }

/* ---- tablet ---- */
@media (max-width: 992px) {
    .page-wrapper .card .card-body { padding: 15px; }
    .page-wrapper .card .card-header { padding: 11px 15px; }
    .page-wrapper .page-body-wrapper .page-header { padding-top: 14px; padding-bottom: 11px; }
    .page-wrapper .page-body-wrapper .page-header .row h3 { font-size: 18px; }
}

/* ---- banner stacks ---- */
@media (max-width: 720px) {
    .reg-banner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }

    .reg-banner .bt h3 { font-size: 16px; }
    .reg-banner .ba { width: 100%; }

    .reg-banner .ba a {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
}

/* ---- list toolbar ---- */
@media (max-width: 720px) {
    .lab-toolbar-search { -ms-flex: 1 1 100%; flex: 1 1 100%; }

    .lab-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }

    .lab-toolbar-actions .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
}

/* ---- sticky save bar ---- */
@media (max-width: 620px) {
    .lab-actions-bar {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: 8px;
        padding: 11px 12px;
    }

    .lab-actions-bar .summary {
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
        margin-right: 0;
    }

    .lab-actions-bar .btn,
    .lab-actions-bar input[type="submit"] { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }
}

/* ---- form grids collapse in steps ---- */
@media (max-width: 560px) {
    .lab-form-grid,
    .lab-form-grid.is-tight,
    .lab-form-grid.is-wide { grid-template-columns: 1fr 1fr; }

    .lab-span-2, .lab-span-3, .lab-span-4 { grid-column: span 2; }
}

@media (max-width: 380px) {
    .lab-form-grid,
    .lab-form-grid.is-tight,
    .lab-form-grid.is-wide { grid-template-columns: 1fr; }

    .lab-span-2, .lab-span-3, .lab-span-4 { grid-column: span 1; }
}

/* ---- dashboard stat cards ---- */
@media (max-width: 620px) {
    .lab-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .lab-stat-value { font-size: 21px; }
}

@media (max-width: 380px) {
    .lab-stat-grid { grid-template-columns: 1fr; }
}

/* ---- modals go near full-screen on phones ---- */
@media (max-width: 720px) {
    .modal-header, .modal-footer { padding-left: 14px; padding-right: 14px; }
    .modal-body { padding: 14px; }

    #labEmbedModal .modal-dialog {
        max-width: 100%;
        margin: 0;
    }

    #labEmbedModal .modal-content {
        height: 100vh;
        border-radius: 0;
    }

    #labConfirmModal .modal-dialog { max-width: 100%; margin: 12px; }

    .lab-modal-actions { gap: 6px; }
    .lab-modal-actions .btn { padding: 5px 9px; font-size: 12px; }
}

/* ---- dense tables get a little breathing room back ---- */
@media (max-width: 560px) {
    .page-wrapper .page-body table th { padding: 8px 10px; }
    .page-wrapper .page-body table td { padding: 7px 10px; }
}