/* ============================================================
   Dr Perfect Report — Clinical Teal theme override
   Loaded AFTER style.css to retint the Kanakku template.
   Primary  teal  #0D9488   |  Secondary  navy  #0F2A3F
   ============================================================ */

:root {
    --primary: #0D9488;
    --primary-hover: #0B7E73;
    --primary-rgb: 13, 148, 136;
    --primary-transparent: #EAF7F5;

    --secondary: #0F2A3F;
    --secondary-hover: #0A1F2F;
    --secondary-rgb: 15, 42, 63;
    --secondary-transparent: #E5EAEE;

    --heading-color: #0F2A3F;
    --dpr-accent: #14B8A6;
    --primary-light: #14B8A6;   /* light end of the primary gradient; white-label overrides it */
    --dpr-bg: #F4F8FA;
}

:root[data-bs-theme=dark] {
    --primary: #14B8A6;
    --primary-hover: #0D9488;
    --primary-rgb: 20, 184, 166;
    --primary-transparent: #08312D;
}

/* App background */
body {
    background-color: var(--dpr-bg);
}

/* ---- Teal gradients (template ships purple literals) ---- */
.bg-primary-gradient,
.bg-primary-gradient-200 {
    /* Derived from the primary vars so white-label branding themes it too. Defaults reproduce the
       original teal gradient exactly (#0B7E73 → #0D9488 → #14B8A6). */
    background-image: linear-gradient(120deg,
        var(--primary-hover) 0%, var(--primary) 60%, var(--primary-light) 100%) !important;
}

/* ============================================================
   NAVY SIDEBAR
   ------------------------------------------------------------
   The Kanakku sidebar is authored for a WHITE surface: it paints
   its dividers with --border-color / --gray-100 (both #E2E4E6).
   On navy those read as bright white bars that shout louder than
   the nav labels themselves, which is what made the menu look
   broken. Everything below re-tints those surfaces for a dark
   panel and rebuilds the hover / open / active states.

   SELECTOR TRAP — do not "simplify" these to `ul ul li a`:
   the markup nests every group's links in their own <ul>, so a
   TOP-LEVEL link is `#sidebar-menu > ul > li > ul > li > a`
   (i.e. `ul ul li a`) and a real submenu child is one level
   deeper (`ul ul ul li a`). A rule written as `ul ul li a` hits
   every link in the sidebar — that is exactly how the active
   pill got a `background: transparent !important` and silently
   disappeared.
   ============================================================ */
.sidebar,
.sidebar .sidebar-logo,
.sidebar-inner {
    background-color: var(--secondary) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Colour tokens, authored FOR the navy panel -------------
   Never let sidebar text fall back to the template's --menu-item-*
   variables: those are near-black values (--menu-item-heading is
   #051321) chosen for a WHITE sidebar. Every colour below is a
   solid hex picked against #0F2A3F, not white-with-alpha, so what
   you read here is what actually lands on screen. Measured ratios
   are in the comments — keep them if you retune. */
.sidebar {
    --nav-fg: #C9D7E2;         /* idle label            9.9:1 */
    --nav-fg-strong: #FFFFFF;  /* hover / open / active      */
    --nav-fg-muted: #93A7B8;   /* section title, nested 5.9:1 */
    --nav-icon: #A3B7C7;       /* idle icon             7.2:1 */
    --nav-accent: #5EEAD4;     /* teal on navy          9.9:1 */
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.sidebar .sidebar-menu {
    padding: 8px 12px 24px;
}

/* Reclaim the template's very loose rhythm (24px between groups,
   8px under every row, plus a 16px+8px gap under each list) — it
   only fit ~9 rows on a 950px viewport. */
.sidebar .sidebar-menu > ul > li {
    margin-bottom: 2px;
}

.sidebar .sidebar-menu > ul li,
#sidebar-menu ul li {
    margin-bottom: 1px;
}

/* ---- Section headings ------------------------------------- */
.sidebar .menu-title,
#sidebar-menu .menu-title {
    padding: 0 10px;
    margin: 18px 0 6px !important;
}

/* The rule belongs to the START of a section, not trailing the
   previous one — and at 6% white it separates without banding. */
.sidebar .sidebar-menu > ul > li.menu-title::before,
#sidebar-menu > ul > li.menu-title::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: -10px;
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
}

.sidebar .sidebar-menu > ul > li.menu-title:first-child {
    margin-top: 4px !important;
}

.sidebar .sidebar-menu > ul > li.menu-title:first-child::before {
    display: none;
}

.sidebar .menu-title span,
#sidebar-menu .menu-title span {
    color: var(--nav-fg-muted) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10.5px;
    font-weight: 700;
}

/* ---- Kill the white-surface dividers ----------------------- */
#sidebar-menu ul li ul,
.sidebar .sidebar-menu > ul > li ul {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ---- Rows -------------------------------------------------- */
#sidebar-menu ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 0 !important;   /* template's 2px transparent border shifts rows */
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color .16s ease, color .16s ease;
}

#sidebar-menu > ul > li > ul > li > a {
    padding: 9px 28px 9px 10px;  /* right side reserves the chevron's column */
}

/* ⚠️ THE LABEL LIVES IN A <span> WITH ITS OWN COLOUR.
   The template ships `.sidebar .sidebar-menu > ul > li ul li a span
   { color: var(--menu-item-heading) }` — i.e. #051321, near-black,
   because the stock sidebar is white. Colouring only the <a> leaves
   every label at 1.27:1 on navy: technically painted, effectively
   invisible. So each state below must set the span (and the icon)
   explicitly, not rely on inheritance from the anchor. */
#sidebar-menu ul li a,
#sidebar-menu ul li a span:not(.menu-arrow) {
    color: var(--nav-fg) !important;
}

#sidebar-menu ul li a i {
    color: var(--nav-icon) !important;
    font-size: 17px;
    flex-shrink: 0;
    transition: color .16s ease;
}

/* the template adds its own 8px gutter on top of our flex gap */
#sidebar-menu ul li a span:not(.menu-arrow) {
    margin-left: 0;
    font-size: 13.5px;
}

#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:hover span:not(.menu-arrow) {
    color: var(--nav-fg-strong) !important;
}

#sidebar-menu ul li a:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

#sidebar-menu ul li a:hover i {
    color: var(--nav-accent) !important;
}

/* Open parent group: readable, but deliberately quieter than the
   active pill so the two never compete for attention. */
#sidebar-menu ul li a.subdrop,
#sidebar-menu ul li a.subdrop span:not(.menu-arrow) {
    color: var(--nav-fg-strong) !important;
}

#sidebar-menu ul li a.subdrop {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

#sidebar-menu ul li a.subdrop i {
    color: var(--nav-accent) !important;
}

/* Current page: the one saturated element in the panel.
   The fill is a DEEPER teal than brand #0D9488 on purpose — white
   text over #0D9488 is only 3.75:1, under AA. #0A6E65→#0C8579 keeps
   the label at 6.1:1→4.5:1 while still reading as brand teal. */
#sidebar-menu ul li a.active,
#sidebar-menu ul li a.active span:not(.menu-arrow),
#sidebar-menu ul li a.active i {
    color: var(--nav-fg-strong) !important;
}

#sidebar-menu ul li a.active,
#sidebar-menu > ul > li > ul > li > a.active {
    background: linear-gradient(90deg, #0A6E65 0%, #0C8579 100%) !important;
    box-shadow: 0 2px 10px rgba(10, 110, 101, 0.38);
    font-weight: 600;
}

/* ---- Nested submenu links (third level) -------------------- */
#sidebar-menu ul ul ul li a,
#sidebar-menu ul ul ul li a span:not(.menu-arrow) {
    color: var(--nav-fg-muted) !important;
}

#sidebar-menu ul ul ul li a {
    background: transparent !important;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 10px 7px 40px !important;
    border-radius: 6px;
}

#sidebar-menu ul ul ul li a:hover,
#sidebar-menu ul ul ul li a:hover span:not(.menu-arrow) {
    color: var(--nav-fg-strong) !important;
}

#sidebar-menu ul ul ul li a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* The guide rail: template paints it #E2E4E6 (near-white on navy). */
#sidebar-menu ul li .submenu > ul li a::before,
.sidebar .sidebar-menu > ul li .submenu > ul li a::before {
    background: rgba(255, 255, 255, 0.20) !important;
    left: 21px !important;
    width: 2px !important;
}

/* Active child: teal label plus a lit segment of the rail, which
   reads as "you are here" without a second heavy pill. */
#sidebar-menu ul ul ul li a.active,
#sidebar-menu ul ul ul li a.active span:not(.menu-arrow) {
    color: var(--nav-accent) !important;
}

#sidebar-menu ul ul ul li a.active {
    background: rgba(20, 184, 166, 0.12) !important;
    font-weight: 600;
}

#sidebar-menu ul li .submenu > ul li a.active::before {
    background: var(--nav-accent) !important;
}

/* ---- Chevron ----------------------------------------------- */
.sidebar .menu-arrow::after,
.sidebar .menu-arrow::before {
    border-color: rgba(255, 255, 255, 0.45);
}

#sidebar-menu a:hover .menu-arrow::before,
#sidebar-menu a.subdrop .menu-arrow::before,
#sidebar-menu a.active .menu-arrow::before {
    border-color: #fff;
}

/* ---- Collapsed rail (#toggle_btn) --------------------------
   At 56px there is no room for our label padding or the chevron
   column, so the icon would sit off-centre. `:not(.expand-menu)`
   matters: hovering a collapsed sidebar re-expands it to 216px
   and must get the full-width styling back. */
@media (min-width: 992px) {
    .mini-sidebar:not(.expand-menu) .sidebar .sidebar-menu {
        padding: 8px 6px 24px;
    }

    .mini-sidebar:not(.expand-menu) #sidebar-menu ul li a {
        justify-content: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0;
    }

    .mini-sidebar:not(.expand-menu) #sidebar-menu .menu-arrow,
    .mini-sidebar:not(.expand-menu) #sidebar-menu li.menu-title::before,
    .mini-sidebar:not(.expand-menu) #sidebar-menu ul li .submenu > ul li a::before {
        display: none;
    }
}

/* ---- Scrollbar (default light bar looks broken on navy) ----- */
.sidebar .sidebar-inner {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.sidebar .sidebar-inner::-webkit-scrollbar {
    width: 6px;
}

.sidebar .sidebar-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
}

.sidebar .sidebar-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

.sidebar .sidebar-inner::-webkit-scrollbar-track {
    background: transparent;
}

/* sidebar search box */
.sidebar-search .form-control {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.sidebar-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* ---- Topbar (white) ---- */
.header,
.main-header {
    background-color: #fff;
    border-bottom: 1px solid #E3EBEF;
}

/* ---- Misc polish ---- */
.page-header h4,
.page-header h6,
h1, h2, h3, h4, h5 {
    color: var(--heading-color);
}

a {
    color: var(--primary);
}

.badge.bg-soft-primary {
    background-color: var(--primary-transparent);
    color: var(--primary);
}

/* ---------------------------------------------------------------------------
   BLAZOR + KANAKKU LAYOUT FIX — do not remove, do not weaken.

   style.css ships an unconditional
       #horizontal-menu, #horizontal-single, #stacked-sidebar, #sidebar { display: none; }
   and relies on the template's layout JS to un-hide the right one at page load.
   Blazor renders the sidebar AFTER those scripts run, so it stays hidden forever.

   Keep BOTH selectors and the !important: a bare `.sidebar` (specificity 0,1,0)
   LOSES to the template's `#sidebar` (1,0,0) and the sidebar disappears again.
   --------------------------------------------------------------------------- */
#sidebar,
.sidebar {
    display: flex !important;
}

/* simplebar also initialises at load against a DOM Blazor hasn't rendered yet,
   so give the menu a plain scroll fallback. */
.sidebar .sidebar-inner {
    overflow-y: auto;
}

/* The template drops the .menu-arrow on top of the label without reserving any
   room, so a long label ("Collection Centers") ran underneath the chevron.
   Row padding-right (see the sidebar block above) reserves the chevron's column;
   anything still too long ellipsizes rather than collides. */
#sidebar-menu .menu-arrow {
    right: 8px;
}

#sidebar-menu ul li a > span:not(.menu-arrow) {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Blazor error toast.
   The stock #blazor-error-ui styles live in app.css, which this app never links
   (the Kanakku bundle replaced it) — so the markup sat permanently visible as
   raw text at the bottom of every page. Blazor flips display:block on error.
   --------------------------------------------------------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20000;
    padding: 12px 20px;
    background: #FEF3E2;
    border-top: 2px solid #F59E0B;
    color: #7C2D12;
    font-size: 13px;
    box-shadow: 0 -4px 16px rgba(15, 42, 63, .12);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    padding: 0 6px;
}

/* The Kanakku demo "Theme Customizer" gear floats over page content on every screen.
   It is a template showcase widget, not a product feature. */
.sidebar-contact,
.sidebar-themesettings {
    display: none !important;
}

/* Topbar search sat at the browser's default input width (~190px) inside a 1100px bar. */
.header .header-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 440px;
}

.header .header-search .input-icon-start {
    width: 100%;
}

.header .header-search .form-control {
    width: 100%;
    min-width: 0;
}

/* ============================================================
   Brand lockup (BrandLogo.razor)
   Mark is inline SVG; the wordmark is HTML text so it can never
   be clipped by a viewBox and always uses the site font.
   ============================================================ */
.dpr-brand {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--dpr-mark, 36px) * 0.3);
    line-height: 1;
    text-decoration: none;
}

/* White-label logo: a tenant's uploaded lockup, sized to the mark height. */
.dpr-brand--custom { display: inline-flex; align-items: center; }
.dpr-brand__img {
    max-height: calc(var(--dpr-mark, 36px) * 1.15);
    max-width: 190px;
    object-fit: contain;
    display: block;
}

.dpr-brand__mark {
    width: var(--dpr-mark, 36px);
    height: var(--dpr-mark, 36px);
    flex-shrink: 0;
    display: block;
}

.dpr-brand__text {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dpr-mark, 36px) * 0.09);
    min-width: 0;
}

.dpr-brand__name {
    font-size: calc(var(--dpr-mark, 36px) * 0.46);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--secondary);
    white-space: nowrap;
}

.dpr-brand__accent {
    color: #16A34A;   /* brand green — matches the "Report" in the logo */
}

.dpr-brand__tag {
    font-size: max(8px, calc(var(--dpr-mark, 36px) * 0.215));
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5D6772;
    white-space: nowrap;
}

.dpr-brand--dark .dpr-brand__name {
    color: #fff;
}

.dpr-brand--dark .dpr-brand__accent {
    color: #4ADE80;
}

.dpr-brand--dark .dpr-brand__tag {
    color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   Signed-out screens (AuthShell.razor + login / register / reset)

   Two panels: a decorative brand half that disappears below 992px,
   and the form half that is the only thing carrying controls.
   ============================================================ */
.dpr-auth {
    display: flex;
    min-height: 100vh;
    background: #fff;
}

/* ── brand half ───────────────────────────────────────────── */
.dpr-auth__brand {
    display: none;
}

@media (min-width: 992px) {
    .dpr-auth__brand {
        position: relative;
        overflow: hidden;
        flex: 0 0 46%;
        max-width: 620px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 44px 48px;
        background: linear-gradient(155deg, #0B2B3C 0%, #0E3D48 46%, #0B7E73 100%);
        color: #fff;
    }

    /* a soft teal light source top-right, so the flat gradient gains depth */
    .dpr-auth__brand::before {
        content: "";
        position: absolute;
        top: -180px;
        right: -160px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(45, 212, 191, .34) 0%, rgba(45, 212, 191, 0) 68%);
        pointer-events: none;
    }

    /* faint lab-grid, kept under 4% so it reads as texture, never as lines */
    .dpr-auth__brand::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
        background-size: 44px 44px;
        pointer-events: none;
    }
}

.dpr-auth__brandtop,
.dpr-auth__pitch,
.dpr-auth__trust {
    position: relative;
    z-index: 1;
}

.dpr-auth__pitch h1 {
    margin: 0 0 14px;
    font-size: 38px;
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #fff;
}

.dpr-auth__pitch > p {
    margin: 0 0 30px;
    max-width: 44ch;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .74);
}

.dpr-auth__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dpr-auth__features li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .70);
}

.dpr-auth__features b {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.dpr-auth__fic {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
}

.dpr-auth__fic i {
    font-size: 17px;
    color: #5EEAD4;
}

.dpr-auth__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.dpr-auth__trust span {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
}

/* ── form half ────────────────────────────────────────────── */
.dpr-auth__panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 20px;
    background: #fff;
}

.dpr-auth__form {
    width: 100%;
    max-width: 408px;
    margin: auto;
}

.dpr-auth__formlogo {
    margin-bottom: 26px;
}

@media (min-width: 992px) {
    .dpr-auth__formlogo {
        display: none;
    }
}

.dpr-auth__head {
    margin-bottom: 22px;
}

.dpr-auth__head h2 {
    margin: 0 0 5px;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: #0F2A3F;
}

.dpr-auth__head p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #6E7A87;
}

/* method switch: password vs OTP. A segmented control, not tabs — there are only
   ever two, and they change the SAME form rather than navigating anywhere. */
.dpr-auth__methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    background: #F1F4F6;
    border-radius: 11px;
}

.dpr-auth__method {
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6E7A87;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.dpr-auth__method.is-on {
    background: #fff;
    color: #0F2A3F;
    box-shadow: 0 1px 2px rgba(15, 42, 63, .10);
}

.dpr-auth__form .form-label {
    font-size: 13px;
    font-weight: 500;
    color: #46525E;
    margin-bottom: 6px;
}

.dpr-auth__form .input-group-text {
    background: #fff;
    color: #93A0AC;
}

.dpr-auth__form .form-control,
.dpr-auth__form .input-group-text {
    padding-top: .62rem;
    padding-bottom: .62rem;
}

.dpr-auth__submit {
    padding: .72rem 1rem;
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 10px;
}

.dpr-auth__reveal,
.dpr-auth__reveal:hover,
.dpr-auth__reveal:focus {
    border-color: var(--border-color);
    background: #fff;
    color: #93A0AC;
    box-shadow: none;
}

/* "Or" rule */
.dpr-auth__or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 12px;
    color: #93A0AC;
}

.dpr-auth__or::before,
.dpr-auth__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.dpr-auth__google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: .62rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #3C4854;
    transition: background-color .15s ease, border-color .15s ease;
}

.dpr-auth__google:hover:not(:disabled) {
    background: #F7F9FA;
    border-color: #C9D2DA;
}

.dpr-auth__google:disabled {
    opacity: .55;
}

.dpr-auth__foot {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 13px;
    color: #6E7A87;
}

.dpr-auth__copy {
    margin: 26px 0 0;
    font-size: 11.5px;
    color: #A3AEB8;
    text-align: center;
}

/* a value the user must keep — the generated lab code after sign-up */
.dpr-auth__keep {
    margin-top: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(13, 148, 136, .07);
    border: 1px solid rgba(13, 148, 136, .22);
}

.dpr-auth__keepcode {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0B7E73;
}

/* OTP entry */
.dpr-auth__sent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    margin-bottom: 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #0B7E73;
    background: rgba(13, 148, 136, .07);
    border: 1px solid rgba(13, 148, 136, .20);
}

.dpr-auth__code {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 22px;
    letter-spacing: 8px;
    text-align: center;
    font-weight: 600;
}

:root[data-bs-theme=dark] .dpr-auth,
:root[data-bs-theme=dark] .dpr-auth__panel {
    background: #0F1B24;
}

:root[data-bs-theme=dark] .dpr-auth__head h2 {
    color: #E8EDF1;
}

:root[data-bs-theme=dark] .dpr-auth__methods {
    background: rgba(255, 255, 255, .05);
}

:root[data-bs-theme=dark] .dpr-auth__method.is-on {
    background: #17242E;
    color: #E8EDF1;
}

:root[data-bs-theme=dark] .dpr-auth__google,
:root[data-bs-theme=dark] .dpr-auth__form .input-group-text,
:root[data-bs-theme=dark] .dpr-auth__reveal {
    background: #17242E;
    color: #C7D2DA;
    border-color: rgba(255, 255, 255, .12);
}

/* ── login layout variants (from the Login Page Designer) ── */
@media (min-width: 992px) {
    /* brand panel on the right instead of the left */
    .dpr-auth--right {
        flex-direction: row-reverse;
    }
}

/* centered: a floating form card over the (branded) background */
.dpr-auth--center {
    align-items: center;
    justify-content: center;
}

.dpr-auth--center .dpr-auth__panel {
    flex: 1 1 auto;
    background: transparent;
    padding: 40px 20px;
}

.dpr-auth--center .dpr-auth__form {
    background: #fff;
    border-radius: 18px;
    padding: 34px 30px 28px;
    box-shadow: 0 30px 70px rgba(8, 20, 30, .28), 0 4px 14px rgba(8, 20, 30, .12);
}

/* the lockup sits inside the card, so show it at every width in centered mode */
.dpr-auth--center .dpr-auth__formlogo {
    display: block !important;
    text-align: center;
}

.dpr-auth--center .dpr-auth__copy {
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* ============================================================
   Login Page Designer
   ============================================================ */
/* the live preview renders the real .dpr-auth at desktop width, zoomed to fit */
.dpr-loginprev {
    border: 1px solid var(--dpr-border, #E2E4E6);
    border-radius: 14px;
    overflow: auto;
    background: #EEF1F4;
    max-height: 660px;
}

.dpr-loginprev__frame {
    width: 1180px;
    zoom: 0.52;
}

.dpr-loginprev__frame .dpr-auth {
    min-height: 640px;
}

/* layout picker cards */
.dpr-laycard {
    display: block;
    width: 100%;
    border: 1.5px solid var(--dpr-border, #E2E4E6);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    text-align: center;
}

.dpr-laycard:hover {
    border-color: var(--primary, #0D9488);
}

.dpr-laycard.is-on {
    border-color: var(--primary, #0D9488);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 13, 148, 136), .16);
}

.dpr-laycard__art {
    height: 46px;
    border-radius: 8px;
    display: flex;
    gap: 4px;
    overflow: hidden;
    margin-bottom: 7px;
    background: #F1F4F6;
}

.dpr-laycard__art i {
    display: block;
    height: 100%;
}

.dpr-laycard__art .art-brand {
    flex: 0 0 46%;
    background: linear-gradient(155deg, #0B2B3C, #0B7E73);
}

.dpr-laycard__art .art-form {
    flex: 1 1 auto;
    background:
        linear-gradient(#cfd8de 0 0) no-repeat 8px 12px / 60% 4px,
        linear-gradient(#dde4e9 0 0) no-repeat 8px 22px / 42% 4px,
        linear-gradient(var(--primary, #0D9488) 0 0) no-repeat 8px 32px / 50% 5px;
}

.dpr-laycard__art--right {
    flex-direction: row-reverse;
}

.dpr-laycard__art--center {
    justify-content: center;
    align-items: center;
    background: linear-gradient(155deg, #0B2B3C, #0B7E73);
}

.dpr-laycard__art--center .art-card {
    width: 52%;
    height: 60%;
    border-radius: 5px;
    background:
        #fff
        linear-gradient(#cfd8de 0 0) no-repeat 7px 9px / 60% 3px,
        linear-gradient(var(--primary, #0D9488) 0 0) no-repeat 7px 18px / 46% 4px;
}

.dpr-laycard__lbl {
    font-size: 12.5px;
    font-weight: 500;
    color: #46525E;
}

/* feature-highlight editor rows */
.dpr-feat {
    border: 1px solid var(--dpr-border, #E2E4E6);
    border-radius: 11px;
    padding: 10px 11px;
    margin-bottom: 10px;
    background: #fff;
}

/* trust-badge chips */
.dpr-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    background: #F1F4F6;
    border: 1px solid var(--dpr-border, #E2E4E6);
    font-size: 13px;
}

.dpr-badge-chip button {
    border: 0;
    background: transparent;
    color: #93A0AC;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.dpr-badge-chip button:hover {
    color: #D14343;
}

/* locked (non-white-label) state */
.dpr-lockcard {
    text-align: center;
    padding: 48px 24px;
}

.dpr-lockcard__ic {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    background: rgba(var(--primary-rgb, 13, 148, 136), .10);
    color: var(--primary, #0D9488);
    font-size: 28px;
}

:root[data-bs-theme=dark] .dpr-laycard,
:root[data-bs-theme=dark] .dpr-feat {
    background: #17242E;
    border-color: rgba(255, 255, 255, .12);
}

:root[data-bs-theme=dark] .dpr-badge-chip {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
}

:root[data-bs-theme=dark] .dpr-loginprev {
    background: #0B141B;
    border-color: rgba(255, 255, 255, .12);
}

/* ============================================================
   Dashboard
   ============================================================ */
.dpr-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

/* ---- KPI tiles ---- */
.dpr-kpi .card-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.dpr-kpi__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.dpr-kpi__body {
    min-width: 0;
    flex: 1;
}

.dpr-kpi__label {
    margin: 0 0 2px;
    font-size: 13px;
    color: #5D6772;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpr-kpi__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.dpr-kpi__value {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}

.dpr-kpi__trend {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---- Revenue card ----
   NOTE: Bootstrap's `bg-white bg-opacity-25` does NOT work here — the template
   overrides `.bg-white` with `background-color: var(--white) !important`, which
   ignores --bs-bg-opacity. On a coloured card that paints a solid white block and
   swallows the white text/progress inside it. Hence these explicit rgba classes. */
.dpr-revenue {
    border: 0;
    background-image: linear-gradient(135deg, #0B7E73 0%, #0D9488 55%, #14B8A6 100%);
}

.dpr-glass {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

.dpr-glass-track {
    background: rgba(255, 255, 255, 0.22) !important;
}

.dpr-glass-track .progress-bar {
    background: #fff;
}

.dpr-revenue hr {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    opacity: 1;
}

.dpr-revenue .card-body {
    padding: 22px;
}

.dpr-revenue .btn-white-10 {
    background: rgba(255, 255, 255, 0.16);
    border: 0;
    color: #fff;
    font-weight: 500;
}

.dpr-revenue .btn-white-10:hover {
    background: rgba(255, 255, 255, 0.26);
    color: #fff;
}

.dpr-revenue .btn-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
}

/* ---- Visit overview ---- */
.dpr-visit-total {
    padding: 16px;
    border-radius: 12px;
    background: var(--primary-transparent);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
}

.dpr-status__label {
    margin: 0 0 2px;
    font-size: 13px;
    color: #5D6772;
}

.dpr-status__value {
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--heading-color);
}

.dpr-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

.dpr-status__pct {
    margin: 0;
    font-size: 12px;
    color: #8A94A0;
}

/* ---- Tables ---- */
.dpr-table > thead th {
    background: #F7FAFB;
    border-bottom: 1px solid #E3EBEF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #5D6772;
    white-space: nowrap;
    padding: 10px 16px;
}

.dpr-table > tbody td {
    padding: 12px 16px;
    white-space: nowrap;   /* narrow screens scroll the table instead of shredding cells */
    font-size: 14px;
}

.dpr-table > tbody tr:last-child td {
    border-bottom: 0;
}

/* Column-heavy admin lists (9+ columns): the default 16px side padding alone costs
   ~290px and pushed the actions column off the right edge at 1440px. Trimming the
   gutter fits the table without hiding data or shrinking the type.

   ⚠️ `!important` is REQUIRED, not sloppiness: Kanakku's style.css ships
   `.table tbody tr td { padding: 8px 16px !important; }`, which beats any normal
   rule regardless of specificity. (That is also why `.dpr-table`'s own padding
   above has never actually applied — the template overrides it.) */
.dpr-table--dense > thead th {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.dpr-table--dense > tbody td {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ---- Critical values ---- */
.dpr-critical {
    border-color: rgba(220, 38, 38, .28);
}

.dpr-critical__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color, #E3EBEF);
}

.dpr-critical__row:last-child {
    border-bottom: 0;
}

.dpr-critical__value {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FDECEC;
    color: #DC2626;
}

/* ---- Activity feed ---- */
.dpr-activity__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

/* ============================================================
   Patients (list / form / detail)
   ============================================================ */

/* ---- Empty / loading / error states inside a card body ---- */
.dpr-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px;
}

.dpr-state__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.dpr-state__icon--muted {
    background: #F1F5F7;
    color: #8A94A0;
}

.dpr-state__icon--danger {
    background: #FDECEC;
    color: #DC2626;
}

/* ---- Sortable table headers ---- */
.dpr-th-sort {
    cursor: pointer;
    user-select: none;
}

.dpr-th-sort:hover {
    color: var(--primary);
}

.dpr-sort {
    font-size: 11px;
    margin-left: 3px;
    vertical-align: middle;
}

/* the idle glyph must read as "sortable" without competing with the active one */
.dpr-sort--idle {
    opacity: .35;
}

/* ---- Row avatar ---- */
.dpr-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---- Row action buttons ---- */
.dpr-rowactions {
    display: inline-flex;
    gap: 6px;
}

.dpr-rowactions .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dpr-rowactions .btn i {
    font-size: 15px;
}

/* ---- Pager ---- */
.dpr-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid #E3EBEF;
}

.dpr-pager .page-link {
    border: 0;
    min-width: 30px;
    text-align: center;
}

/* ---- Segmented control (age entry mode) ---- */
.dpr-segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: #F1F5F7;
    gap: 3px;
}

.dpr-segmented__btn {
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #5D6772;
    line-height: 1.2;
    transition: background .15s ease, color .15s ease;
}

.dpr-segmented__btn:hover {
    color: var(--heading-color);
}

.dpr-segmented__btn.is-active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(15, 42, 63, .12);
}

/* ---- Validation message ----
   Blazor stamps `.validation-message` on ValidationMessage; the template has no
   styling for it, so an invalid field would otherwise show plain black body text. */
.dpr-invalid,
.validation-message {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #DC2626;
}

/* ---- Detail fields ---- */
.dpr-field__label {
    margin: 0 0 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #8A94A0;
}

.dpr-field__value {
    margin: 0;
    font-size: 14px;
    color: var(--heading-color);
    word-break: break-word;
}

.dpr-field__value--empty {
    color: #A9B2BC;
}

/* ---- Clinical note blocks ---- */
.dpr-note {
    padding: 10px 12px;
    border-radius: 10px;
    background: #F7FAFB;
    border: 1px solid #E3EBEF;
    font-size: 13px;
    color: var(--heading-color);
    white-space: pre-wrap;
}

.dpr-note--danger {
    background: #FDECEC;
    border-color: rgba(220, 38, 38, .22);
    color: #B91C1C;
}

/* ---- Profile header ---- */
.dpr-profile {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.dpr-profile__avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

.dpr-profile__id {
    flex: 1;
    min-width: 220px;
}

.dpr-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* ---- Confirm dialog ---- */
.dpr-confirm__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.dpr-confirm__icon--danger {
    background: #FDECEC;
    color: #DC2626;
}

.dpr-confirm__icon--primary {
    background: #EAF7F5;
    color: #0D9488;
}

/* ---- Larger avatar (picked patient, detail sidebar) ---- */
.dpr-avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

/* A visit has no person to initial, so its header tile carries the type icon. */
.dpr-profile__avatar--square {
    border-radius: 16px;
    background: #EAF7F5;
    color: #0D9488;
}

/* ---- Picked record (a chosen patient inside a form) ---- */
.dpr-picked {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #F7FAFB;
    border: 1px solid #E3EBEF;
}

/* ---- Search-and-select results ---- */
.dpr-picker {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #E3EBEF;
    border-radius: 12px;
    overflow: hidden;
}

.dpr-picker li + li {
    border-top: 1px solid #EDF2F5;
}

.dpr-picker__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    transition: background .15s ease;
}

.dpr-picker__item:hover,
.dpr-picker__item:focus-visible {
    background: #F1F7F8;
}

/* ---- Workflow stepper ---- */
.dpr-steps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0;
    padding: 0;
}

.dpr-steps__item {
    position: relative;
    flex: 1 1 0;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

/* The connector sits behind the markers and stops short of them on both sides. */
.dpr-steps__item::before {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(-50% + 18px);
    width: calc(100% - 36px);
    height: 2px;
    background: #E3EBEF;
}

.dpr-steps__item:first-child::before {
    display: none;
}

.dpr-steps__item.is-done::before,
.dpr-steps__item.is-current::before {
    background: var(--primary);
}

.dpr-steps__marker {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    border: 2px solid #E3EBEF;
    color: #8A97A3;
}

.dpr-steps__item.is-done .dpr-steps__marker {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-size: 15px;
}

.dpr-steps__item.is-current .dpr-steps__marker {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, .14);
}

.dpr-steps__label {
    font-size: 12px;
    line-height: 1.3;
    color: #6B7885;
}

.dpr-steps__item.is-current .dpr-steps__label {
    color: var(--heading-color);
    font-weight: 600;
}

/* ============================================================
   Orders (ordering screen / visit orders panel)
   ============================================================ */

/* ---- Square icon tile that stands in for a test / profile / package ---- */
.dpr-itemicon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, .10);
    color: var(--primary);
    font-size: 16px;
}

/* ---- Catalog list (left half of the ordering screen) ---- */
.dpr-catalog {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dpr-catalog__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #EEF3F5;
}

.dpr-catalog__row:last-child {
    border-bottom: 0;
}

.dpr-catalog__row:hover {
    background: #F8FBFC;
}

/* min-width:0 lets a long test name ellipsis instead of pushing the price out */
.dpr-catalog__main {
    flex: 1 1 auto;
    min-width: 0;
}

.dpr-catalog__price {
    flex-shrink: 0;
    text-align: right;
    font-size: 13px;
    white-space: nowrap;
}

/* ---- Basket (right half) ---- */
.dpr-basket {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dpr-basket__row {
    padding: 12px;
    border: 1px solid #E3EBEF;
    border-radius: 10px;
    background: #FCFDFE;
}

.dpr-basket__row + .dpr-basket__row {
    margin-top: 10px;
}

.dpr-basket__totals {
    padding: 14px;
    border-radius: 10px;
    background: #F4F9FA;
    border: 1px solid #E1EDEF;
}

/* ---- Ordered-tests table (visit detail) ---- */
/* Seven columns have to fit inside the visit's main column, so the due date
   stacks (date over time) and neither line is allowed to wrap. */
.dpr-col-due {
    white-space: nowrap;
}

/* A cancelled line stays on the record but must not read as live work. */
.dpr-row--void td {
    opacity: .55;
}

.dpr-row--void td:first-child p:first-child {
    text-decoration: line-through;
}

.dpr-row--total td {
    background: #F7FAFB;
    border-top: 1px solid #E3EBEF !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* The table sets its own bottom radius when it is the last thing in the card. */
.dpr-row--total td:first-child {
    border-bottom-left-radius: 8px;
}

.dpr-row--total td:last-child {
    border-bottom-right-radius: 8px;
}

/* ============================================================
   SAMPLES — cap swatches, barcodes, inline card search
   ============================================================ */

/* The cap colour is how a phlebotomist recognises a tube at a glance, so the swatch
   carries the meaning here — not an icon. Sits in the same slot as .dpr-itemicon. */
.dpr-cap {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* A pale cap (grey/white) would vanish on the card, hence the ring. */
    box-shadow: inset 0 0 0 1px rgba(15, 42, 63, .18);
}

/* Barcodes are read character by character and compared against a printed label:
   tabular figures and a touch of tracking make that possible. */
.dpr-barcode {
    display: inline-block;
    font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    color: var(--dpr-navy, #0F2A3F);
    text-decoration: none;
    word-break: break-all;
}

a.dpr-barcode:hover {
    color: var(--dpr-teal, #0D9488);
    text-decoration: underline;
}

.dpr-barcode--lg {
    font-size: 18px;
    font-weight: 600;
}

/* Logo / favicon preview tile on the branding screen. */
.dpr-brand-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 10px 14px;
    background: var(--dpr-surface-2, #f6f8fa);
    border: 1px dashed var(--dpr-border, #e2e4e6);
    border-radius: 8px;
}
.dpr-brand-preview img { max-height: 64px; max-width: 100%; object-fit: contain; }
.dpr-brand-preview--sm { min-height: 60px; }
.dpr-brand-preview--sm img { max-height: 40px; }

:root[data-theme="dark"] .dpr-brand-preview,
[data-bs-theme="dark"] .dpr-brand-preview {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
}

/* Rough "how the report will look" preview for CC white-label branding. */
.dpr-brand-doc {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--dpr-border, #e2e4e6);
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    padding: 14px 16px;
    font-size: 13px;
}
.dpr-brand-doc__logo { max-height: 48px; max-width: 60%; object-fit: contain; margin-bottom: 8px; }
.dpr-brand-doc__hdr { border-bottom: 1px solid #e2e4e6; padding-bottom: 8px; margin-bottom: 10px; }
.dpr-brand-doc__body { padding: 14px 0; text-align: center; }
.dpr-brand-doc__ftr { border-top: 1px solid #e2e4e6; padding-top: 8px; margin-top: 10px; }
.dpr-brand-doc img { max-width: 100%; }
/* Uploaded header/footer banner strip in the preview — full width, replaces the composed head/foot. */
.dpr-brand-doc__banner { display: block; width: 100%; margin: 4px 0; position: relative; z-index: 1; }
/* Watermark drawn faintly behind the preview content. */
.dpr-brand-doc__wm {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    max-width: 70%; max-height: 70%; opacity: .12; pointer-events: none; z-index: 0;
}
.dpr-brand-doc > :not(.dpr-brand-doc__wm) { position: relative; z-index: 1; }
/* Signature row at the foot of the preview. */
.dpr-brand-doc__signs { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.dpr-brand-doc__sign { text-align: center; min-width: 70px; }
.dpr-brand-doc__sign img { max-height: 34px; max-width: 110px; object-fit: contain; display: block; margin: 0 auto 2px; }

/* Wallet balance pill shown in a page head (right-aligned). */
.dpr-wallet-chip {
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25;
    padding: 6px 14px; border-radius: 10px;
    background: var(--dpr-surface-2, #f6f8fa);
    border: 1px solid var(--dpr-border, #e2e4e6);
}

/* Compact stat tile (register confirmation: Visit / Tests / Charged / Wallet now). */
.dpr-statbox {
    border: 1px solid var(--dpr-border, #e2e4e6);
    border-radius: 8px; padding: 8px 12px; height: 100%;
}

/* Search input with a leading magnifier icon (pair the input with .ps-5). */
.dpr-search-wrap { position: relative; }
.dpr-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--dpr-muted, #7a8794); font-size: 15px; pointer-events: none;
}

/* Monospace for raw machine payloads (ASTM/HL7) and serialized order messages. */
.dpr-mono {
    font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* The raw ASTM/HL7 message block on a message-log detail: scrolls rather than stretches. */
.dpr-rawmsg {
    max-height: 60vh;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 12px 14px;
    background: var(--dpr-surface-2, #f6f8fa);
    border: 1px solid var(--dpr-border, #e2e4e6);
    border-radius: 8px;
    color: var(--dpr-navy, #0F2A3F);
}

:root[data-theme="dark"] .dpr-rawmsg,
[data-bs-theme="dark"] .dpr-rawmsg {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .10);
    color: #C9D7E2;
}

/* A search box that lives in a card header next to the title. */
.dpr-search-inline {
    position: relative;
    flex: 1 1 200px;
    max-width: 260px;
}

.dpr-search-inline i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #94A3B8;
    pointer-events: none;
}

.dpr-search-inline .form-control {
    padding-left: 30px;
}

/* A void row is dimmed to .55, but the one action it still offers (re-collect a rejected
   tube) is the whole point of that row — keep the actions cell at full strength. */
.dpr-row--void td:last-child {
    opacity: 1;
}

/* ============================================================
   Results (worklist + entry sheet)
   ============================================================ */

/* ---- Thin progress bar used in the worklist row and the validation card ---- */
.dpr-progress {
    height: 5px;
    border-radius: 999px;
    background: #E7EDF2;
}

:root[data-bs-theme=dark] .dpr-progress {
    background: rgba(255, 255, 255, .12);
}

.dpr-progress .progress-bar {
    border-radius: 999px;
}

/* ---- One test's block on the entry sheet ----
   The sheet renders edge-to-edge inside the card (card-body p-0), so each group draws
   its own separator instead of leaning on the card's padding. */
.dpr-sheetgroup + .dpr-sheetgroup {
    border-top: 1px solid var(--border-color, #E2E4E6);
}

.dpr-sheetgroup__title {
    margin: 0;
    padding: 12px 16px 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--primary);
}

/* A section-heading parameter (e.g. "DIFFERENTIAL LEUCOCYTE COUNT") — a read-only, full-width
   label grouping the parameters below it, mirroring how it prints on the report. Cell-level
   background to survive the template's `.table tbody tr td` rule. */
.dpr-sheet-heading > td {
    background: rgba(15, 42, 63, .05);
    color: var(--primary);
    font-weight: 600;
    letter-spacing: .01em;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
:root[data-bs-theme=dark] .dpr-sheet-heading > td { background: rgba(255, 255, 255, .05); }

/* A row whose value fell outside the reference range. The tint has to survive the
   template's own `.table tbody tr td` background, hence the cell-level rule. */
.dpr-result--abnormal > td {
    background: rgba(245, 158, 11, .07);
}

.dpr-result--critical > td {
    background: rgba(239, 68, 68, .09);
}

:root[data-bs-theme=dark] .dpr-result--abnormal > td {
    background: rgba(245, 158, 11, .12);
}

:root[data-bs-theme=dark] .dpr-result--critical > td {
    background: rgba(239, 68, 68, .16);
}

/* ---- Calculated parameter's formula, shown so the bench can see where it came from ---- */
.dpr-formula {
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(13, 148, 136, .08);
    color: var(--primary);
    font-size: 11px;
}

/* ---- Narrative (Memo) parameter: a paragraph, not a table cell ---- */
.dpr-memo {
    padding: 12px 16px 16px;
}

.dpr-sheetgroup .table + .dpr-memo {
    padding-top: 16px;
}

.dpr-memo__text {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--gray-100, #F1F4F6);
    white-space: pre-wrap;
}

:root[data-bs-theme=dark] .dpr-memo__text {
    background: rgba(255, 255, 255, .06);
}

/* The Impression — a per-item conclusion, set off from the parameter table with a top rule
   and a primary accent so it reads as the pathologist's summary of the whole test. */
.dpr-impression {
    border-top: 1px solid var(--gray-200, #E2E4E6);
    margin-top: 4px;
}
.dpr-impression > label {
    color: var(--primary, #0D9488);
    font-weight: 600;
}
:root[data-bs-theme=dark] .dpr-impression {
    border-top-color: rgba(255, 255, 255, .1);
}

/* Seven columns only fit at 1440 if the progress cell is pinned — left to itself its
   caption stretches the column and pushes the Actions button out of the scroll box
   (where the page-overflow probe cannot see it). */
.dpr-col-progress {
    width: 128px;
    min-width: 128px;
}

/* Scoped to the grouped worklist on purpose — .dpr-col-due is shared with the sample,
   order, report and delivery tables, which size it themselves. */
.dpr-grouped .dpr-col-due {
    width: 132px;
    min-width: 132px;
}

/* ============================================================
   Worklist grouped by patient
   ------------------------------------------------------------
   One <tbody> per patient-visit, each opening with a full-width band carrying the patient
   and the visit's roll-up, then that patient's tests on the shared column grid.
   ============================================================ */

.dpr-grouped > tbody + tbody {
    border-top: 8px solid var(--gray-100, #F1F4F6);
}

:root[data-bs-theme=dark] .dpr-grouped > tbody + tbody {
    border-top-color: rgba(255, 255, 255, .05);
}

/* The band itself. Beats the template's `.table tbody tr td { padding: 8px 16px !important }`
   the same way .dpr-table--dense has to. */
.dpr-grouprow > td {
    padding: 12px 16px !important;
    background: #F7FAFB;
    border-bottom: 1px solid var(--border-color, #E2E4E6);
}

:root[data-bs-theme=dark] .dpr-grouprow > td {
    background: rgba(255, 255, 255, .04);
}

.dpr-grouped > tbody.is-open .dpr-grouprow > td {
    border-bottom-color: transparent;
}

.dpr-grouphead {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.dpr-grouphead__toggle {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, #E2E4E6);
    border-radius: 9px;
    background: var(--white, #fff);
    color: var(--gray-600, #5C6B75);
    font-size: 14px;
    transition: background .15s, color .15s;
}

.dpr-grouphead__toggle:hover {
    background: var(--soft-primary, #EAF7F5);
    color: var(--primary, #0D9488);
}

:root[data-bs-theme=dark] .dpr-grouphead__toggle {
    background: transparent;
    border-color: rgba(255, 255, 255, .14);
}

/* The identity block is the click target as well — a 32px chevron is a small thing to
   aim at on a queue this dense. The links inside stop the event. */
.dpr-grouphead__id {
    flex: 1 1 300px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    cursor: pointer;
}

.dpr-grouphead__id .min-w-0 {
    min-width: 0;
}

.dpr-grouphead__id a {
    cursor: pointer;
}

.dpr-grouphead__tests {
    color: var(--primary, #0D9488);
}

.dpr-grouphead__progress {
    flex: 0 0 200px;
    max-width: 200px;
}

.dpr-grouphead__actions {
    flex: 0 0 auto;
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .dpr-grouphead__progress {
        flex-basis: 100%;
        max-width: none;
    }

    .dpr-grouphead__actions {
        margin-left: 0;
    }
}

/* ============================================================
   Visit-wide result sheet (every test for one patient)
   ============================================================ */

/* The summary rail follows a long stack of test cards down the page. */
@media (min-width: 1200px) {
    .dpr-sticky {
        position: sticky;
        top: 84px;
    }
}

/* A patient can be carrying a dozen tests — the rail scrolls rather than growing taller
   than the viewport and dragging the sticky summary out of view with it. */
.dpr-raillist {
    max-height: 300px;
    overflow-y: auto;
}

.dpr-railitem + .dpr-railitem {
    border-top: 1px solid var(--border-color, #E2E4E6);
}

:root[data-bs-theme=dark] .dpr-railitem + .dpr-railitem {
    border-top-color: rgba(255, 255, 255, .08);
}

.dpr-railitem a {
    padding: 8px 0;
    color: inherit;
    text-decoration: none;
}

.dpr-railitem a:hover .flex-grow-1 {
    color: var(--primary, #0D9488);
}

.dpr-railitem__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-300, #CBD5DC);
}

.dpr-railitem__dot.is-partial {
    background: var(--primary, #0D9488);
}

.dpr-railitem__dot.is-ready {
    background: #0EA5E9;
}

.dpr-railitem__dot.is-done {
    background: #16A34A;
}

/* ============================================================
   REPORTS
   ============================================================ */

/* ---- Inline PDF viewer ----
   The document is the point of the screen, so it gets real height rather than a
   thumbnail. Capped by viewport height so the side rail stays reachable without
   scrolling past a full page of PDF. */
.dpr-pdf {
    display: block;
    width: 100%;
    height: clamp(420px, calc(100vh - 320px), 900px);
    border: 0;
    border-radius: 0 0 10px 10px;
    background: var(--gray-100, #F1F4F6);
}

:root[data-bs-theme=dark] .dpr-pdf {
    background: rgba(255, 255, 255, .04);
}

/* ---- Delivery timeline (report detail side rail) ---- */
.dpr-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dpr-timeline__item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #E2E4E6);
}

.dpr-timeline__item:first-child {
    padding-top: 0;
}

.dpr-timeline__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

:root[data-bs-theme=dark] .dpr-timeline__item {
    border-bottom-color: rgba(255, 255, 255, .08);
}

.dpr-timeline__dot {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--soft-primary, #E6F4F2);
    color: var(--primary, #0D9488);
    font-size: 15px;
}

:root[data-bs-theme=dark] .dpr-timeline__dot {
    background: rgba(13, 148, 136, .18);
}

/* ---- Compact empty state (side-rail cards) ---- */
.dpr-state--sm {
    padding: 20px 12px;
}

.dpr-state--sm .dpr-state__icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
}

/* Seven columns fit the 1114px content area only if the status cell is pinned: a
   provider's failure message ("SMS gateway rejected the message.") is long enough to
   stretch the column to 570px on its own and push Actions out of the scroll box —
   where the page-overflow probe cannot see it. Wrap the reason instead. */
.dpr-col-status {
    width: 220px;
    min-width: 220px;
}

.dpr-col-status [data-testid=delivery-error] {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============================================================
   Billing (invoice detail, raise-invoice, register)
   ============================================================ */

/* ---- Totals block under a line-item table ---- */
.dpr-totals {
    padding: 14px 16px;
    border-top: 1px solid #E3EBEF;
    background: #F7FAFB;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* The figures belong beside the Amount column, not across the whole card. */
    margin-left: auto;
    max-width: 420px;
}

/* Inside a side-rail card the block is the card, so it drops its own chrome. */
.dpr-totals--flush {
    padding: 0;
    border-top: 0;
    background: transparent;
    max-width: none;
}

.dpr-totals__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.dpr-totals__row > span:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dpr-totals__row--grand {
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid #E3EBEF;
    font-size: 15px;
    font-weight: 600;
    color: var(--dpr-ink, #051321);
}

:root[data-bs-theme=dark] .dpr-totals {
    background: rgba(255, 255, 255, .03);
    border-top-color: rgba(255, 255, 255, .08);
}

:root[data-bs-theme=dark] .dpr-totals__row--grand {
    border-top-color: rgba(255, 255, 255, .08);
    color: #E9EFF3;
}

/* ---- Headline figure (what is owed) ---- */
.dpr-amount {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid #E3EBEF;
    background: #F7FAFB;
}

.dpr-amount__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6B7A85;
}

.dpr-amount__value {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.dpr-amount__hint {
    font-size: 12px;
    color: #6B7A85;
}

/* Money still owed reads red; a cleared bill reads green. */
.dpr-amount--due {
    border-color: rgba(220, 53, 69, .25);
    background: rgba(220, 53, 69, .06);
}

.dpr-amount--due .dpr-amount__value {
    color: #C0392B;
}

.dpr-amount--clear {
    border-color: rgba(25, 135, 84, .25);
    background: rgba(25, 135, 84, .06);
}

.dpr-amount--clear .dpr-amount__value {
    color: #157347;
}

:root[data-bs-theme=dark] .dpr-amount {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
}

:root[data-bs-theme=dark] .dpr-amount--due .dpr-amount__value {
    color: #F1948A;
}

:root[data-bs-theme=dark] .dpr-amount--clear .dpr-amount__value {
    color: #7DCEA0;
}

/* A cancelled invoice keeps its number struck through wherever it is listed. */
.dpr-row--void [data-testid=visit-invoice-number],
.dpr-row--void td:first-child > a {
    text-decoration: line-through;
}

/* ============================================================================
   Catalog masters — tests, profiles, packages
   ========================================================================= */

/* Bootstrap has no min-width utility; a flex child needs one to be able to
   truncate instead of pushing its row wider. */
.min-w-0 {
    min-width: 0;
}

/* ---- Repeatable parameter editor (test form) ---- */
.dpr-paramcard {
    border: 1px solid #E3EBEF;
    border-radius: 12px;
    background: var(--white);
    margin-bottom: 10px;
}

.dpr-paramcard.is-invalid {
    border-color: rgba(220, 38, 38, .35);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .07);
}

.dpr-paramcard__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.dpr-paramcard__toggle {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #E3EBEF;
    background: #F7FAFB;
    color: var(--heading-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dpr-paramcard__toggle:hover,
.dpr-paramcard__toggle:focus-visible {
    background: #EAF7F5;
    color: #0D9488;
}

.dpr-paramcard__actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.dpr-paramcard__actions .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dpr-paramcard__body {
    padding: 12px;
    border-top: 1px dashed #E3EBEF;
}

/* ---- One reference range inside a parameter ---- */
.dpr-range {
    border: 1px solid #EDF2F5;
    border-radius: 10px;
    background: #FBFDFD;
    padding: 10px 12px;
    margin-bottom: 8px;
}

/* ---- Catalog picker (search-and-add, profile + package forms) ---- */
.dpr-catpicker {
    border: 1px solid #E3EBEF;
    border-radius: 12px;
    background: #FBFDFD;
    padding: 10px;
}

.dpr-catpicker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #E3EBEF;
    border-radius: 10px;
    background: var(--white);
    overflow: hidden;
}

.dpr-catpicker__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.dpr-catpicker__item + .dpr-catpicker__item {
    border-top: 1px solid #EDF2F5;
}

/* Pushes the trailing control (Add button / row actions) to the right edge. */
.dpr-catpicker__item > :last-child {
    margin-left: auto;
    flex-shrink: 0;
}

.dpr-catpicker__item.is-added {
    background: #F5FAF9;
}

.dpr-note--success {
    background: #EAF7F5;
    border-color: rgba(13, 148, 136, .25);
    color: #0F766E;
}

:root[data-bs-theme=dark] .dpr-paramcard,
:root[data-bs-theme=dark] .dpr-catpicker__list {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .08);
}

:root[data-bs-theme=dark] .dpr-paramcard__head + .dpr-paramcard__body,
:root[data-bs-theme=dark] .dpr-catpicker__item + .dpr-catpicker__item {
    border-color: rgba(255, 255, 255, .08);
}

:root[data-bs-theme=dark] .dpr-paramcard__toggle,
:root[data-bs-theme=dark] .dpr-range,
:root[data-bs-theme=dark] .dpr-catpicker,
:root[data-bs-theme=dark] .dpr-catpicker__item.is-added {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .08);
    color: inherit;
}

/* Scrollable checkbox list — e.g. the dispatch-manifest sample picker. */
.dpr-picklist {
    border: 1px solid #E3EBEF;
    border-radius: 10px;
    background: var(--white);
    max-height: 420px;
    overflow-y: auto;
}

.dpr-pickrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 0;
    cursor: pointer;
}

.dpr-pickrow + .dpr-pickrow {
    border-top: 1px solid #EDF2F5;
}

.dpr-pickrow.is-on {
    background: #F5FAF9;
}

.dpr-pickrow .form-check-input {
    flex-shrink: 0;
    margin: 0;
}

:root[data-bs-theme=dark] .dpr-picklist {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .08);
}

:root[data-bs-theme=dark] .dpr-pickrow + .dpr-pickrow {
    border-color: rgba(255, 255, 255, .08);
}

:root[data-bs-theme=dark] .dpr-pickrow.is-on {
    background: rgba(255, 255, 255, .03);
}

/* Grouped variant used by the generate-report dialog: department heading rows on top of a
   thin tinted band, child items indented under. The partial state (some items on) borrows
   the "is-on" tint so the group toggle still reads at a glance. */
.dpr-pickrow--group {
    background: #F0F5F7;
    font-size: 13px;
}

.dpr-pickrow--group.is-partial {
    background: #EAF3F1;
}

.dpr-pickrow--child {
    padding-left: 32px;
}

:root[data-bs-theme=dark] .dpr-pickrow--group {
    background: rgba(255, 255, 255, .04);
}

:root[data-bs-theme=dark] .dpr-pickrow--group.is-partial {
    background: rgba(94, 234, 212, .07);
}

/* Report tab bar (nav-pills) — teal active pill, wraps on small screens. */
.dpr-reporttabs {
    flex-wrap: wrap;
    gap: 6px;
}

.dpr-reporttabs .nav-link {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dpr-text-muted, #64748B);
    background: transparent;
    border: 1px solid #E3EBEF;
    border-radius: 8px;
    cursor: pointer;
}

.dpr-reporttabs .nav-link:hover {
    color: #0D9488;
    border-color: rgba(13, 148, 136, .35);
}

.dpr-reporttabs .nav-link.active {
    color: #fff;
    background: #0D9488;
    border-color: #0D9488;
}

:root[data-bs-theme=dark] .dpr-reporttabs .nav-link {
    border-color: rgba(255, 255, 255, .1);
}

/* ============================================================================
   Drag to reorder — display order is a position, never a typed number
   ========================================================================= */

/* The grip is drawn here rather than set as an icon: this build's iconsax subset
   renders an unknown name as an empty box, and there is no grip glyph in it. */
.dpr-draghandle {
    display: inline-block;
    flex-shrink: 0;
    width: 12px;
    height: 18px;
    color: #9AA9B4;
    cursor: grab;
    background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
    background-size: 6px 6px;
    /* Dragging must start from the handle, not from a text selection inside it. */
    user-select: none;
    -webkit-user-drag: element;
}

.dpr-draghandle:hover {
    color: #0D9488;
}

.dpr-draghandle:active {
    cursor: grabbing;
}

.dpr-draghandle.is-disabled {
    opacity: .3;
    cursor: not-allowed;
}

/* Table cell that holds nothing but the grip. The padding override is needed because
   the template ships `.table tbody tr td { padding: 8px 16px !important }`. */
.dpr-col-drag {
    width: 30px;
    padding-left: 12px !important;
    padding-right: 4px !important;
}

.dpr-drag.is-dragging,
.dpr-drag.is-dragging > td {
    opacity: .45;
}

/* Where the row would land. Painted on the cells too — a box-shadow on a <tr> is
   dropped by border-collapse: collapse. */
.dpr-drag.is-over-above,
.dpr-drag.is-over-above > td {
    box-shadow: inset 0 2px 0 0 #0D9488;
}

.dpr-drag.is-over-below,
.dpr-drag.is-over-below > td {
    box-shadow: inset 0 -2px 0 0 #0D9488;
}

:root[data-bs-theme=dark] .dpr-draghandle {
    color: rgba(255, 255, 255, .38);
}

:root[data-bs-theme=dark] .dpr-draghandle:hover {
    color: #5EEAD4;
}

:root[data-bs-theme=dark] .dpr-drag.is-over-above,
:root[data-bs-theme=dark] .dpr-drag.is-over-above > td {
    box-shadow: inset 0 2px 0 0 #5EEAD4;
}

:root[data-bs-theme=dark] .dpr-drag.is-over-below,
:root[data-bs-theme=dark] .dpr-drag.is-over-below > td {
    box-shadow: inset 0 -2px 0 0 #5EEAD4;
}

/* ============================================================================
   Permission picker — one row per module, its verbs as inline checkboxes

   A fixed column per action was the obvious layout and the wrong one: the
   catalog's modules carry different verbs (Patient has four, Collection Center
   has eight), so a grid would be mostly empty cells.
   ========================================================================= */
.dpr-permlist {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.dpr-permrow {
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.dpr-permrow + .dpr-permrow {
    border-top: 1px solid var(--border-color);
}

.dpr-permrow.is-on {
    background: #F5FAF9;
}

.dpr-permrow__head {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    /* Fixed, so every row's verbs begin at the same x — the common Create/Read/
       Update/Delete then line up as columns and can be scanned down. */
    flex: 0 0 250px;
}

/* Wraps under the module name when there is no room, rather than squeezing it. */
.dpr-permrow__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
}

.dpr-permrow__actions .form-check-inline {
    margin-right: 10px;
}

:root[data-bs-theme=dark] .dpr-permlist,
:root[data-bs-theme=dark] .dpr-permrow + .dpr-permrow {
    border-color: rgba(255, 255, 255, .08);
}

:root[data-bs-theme=dark] .dpr-permrow.is-on {
    background: rgba(94, 234, 212, .06);
}

/* Date over relative age, so the pair stays on two short lines instead of
   stretching the column and pushing the row actions out of the scroll box. */
.dpr-col-signin {
    white-space: nowrap;
}

/* ============================================================
   SETTINGS
   The screen is a form whose rows are data, so each row has to carry its own
   state: which lab set it, which is still on the shipped default, and which
   has an unsaved edit sitting on it.
   ============================================================ */

/* Category tile in the card header — same weight as the row avatars elsewhere. */
.dpr-setgroup__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EAF7F5;
    color: var(--primary);
    font-size: 16px;
}

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

.dpr-setrow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 24px;
    padding: 16px 20px;
    /* Transparent by default so the "changed" accent can slot in without the
       row shifting sideways when it lights up. */
    border-left: 3px solid transparent;
}

.dpr-setrow + .dpr-setrow {
    border-top: 1px solid var(--border-color);
}

.dpr-setrow__head {
    flex: 1 1 320px;
    min-width: 0;
}

/* Fixed, so every control in a category starts at the same x and the column can
   be scanned straight down instead of zig-zagging with the label lengths. */
.dpr-setrow__control {
    flex: 0 0 300px;
    max-width: 100%;
}

.dpr-setrow__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: #8A94A0;
}

.dpr-setrow__meta code {
    font-size: 12px;
    color: #64748B;
    background: #F1F5F7;
    padding: 1px 6px;
    border-radius: 5px;
}

.dpr-setrow__hint {
    margin-top: 6px;
    font-size: 12px;
    color: #8A94A0;
}

.dpr-setrow__hint .btn-link {
    font-size: 12px;
}

.dpr-setrow__error {
    margin-top: 6px;
    font-size: 12px;
    color: #DC2626;
}

/* An unsaved edit stays findable after scrolling past it — the save bar counts
   changes, this is how you locate the ones it means. */
.dpr-setrow.is-dirty {
    border-left-color: var(--primary);
    background: #F7FCFB;
}

.dpr-setrow.is-locked .dpr-setrow__head {
    opacity: .75;
}

/* Follows the user down a long list, because the header's Save scrolls away.
   Last in the flow, so it rests at the end of the page once reached. */
.dpr-savebar {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
}

:root[data-bs-theme=dark] .dpr-setgroup__icon {
    background: rgba(94, 234, 212, .10);
    color: #5EEAD4;
}

:root[data-bs-theme=dark] .dpr-setrow + .dpr-setrow {
    border-top-color: rgba(255, 255, 255, .08);
}

:root[data-bs-theme=dark] .dpr-setrow.is-dirty {
    background: rgba(94, 234, 212, .06);
}

:root[data-bs-theme=dark] .dpr-setrow__meta code {
    background: rgba(255, 255, 255, .07);
    color: #C9D7E2;
}

:root[data-bs-theme=dark] .dpr-savebar {
    background: #1B2431;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

/* ---- Leaderboard rank badge ---- */
.dpr-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: #EEF2F5;
    color: #51606B;
}

/* The top three get a metal — the colour carries the podium, the weight keeps it legible. */
.dpr-rank--gold {
    background: #FBE7A6;
    color: #7A5A05;
}

.dpr-rank--silver {
    background: #E3E8EC;
    color: #55606A;
}

.dpr-rank--bronze {
    background: #F0D6BE;
    color: #7A4C25;
}

:root[data-bs-theme=dark] .dpr-rank {
    background: rgba(255, 255, 255, .08);
    color: #AEBecC;
}

:root[data-bs-theme=dark] .dpr-rank--gold {
    background: rgba(251, 231, 166, .18);
    color: #F3D689;
}

:root[data-bs-theme=dark] .dpr-rank--silver {
    background: rgba(227, 232, 236, .15);
    color: #CDD6DE;
}

:root[data-bs-theme=dark] .dpr-rank--bronze {
    background: rgba(240, 214, 190, .16);
    color: #E0B48C;
}

/* ============================================================
   DOCTOR / PARTNER SELF-SERVICE PORTAL SHELL
   A clean B2B top bar instead of the lab sidebar — see
   DoctorPortalLayout.razor. Self-contained (literal colours) so
   it never depends on the lab shell's classes.
   ============================================================ */
.dpr-portal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--dpr-bg, #F4F8FA);
}

.dpr-portal__bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    /* One row on desktop — the nav scrolls if it ever outgrows the width, so the brand and
       user block are never pushed onto a second line. Mobile re-enables wrap below. */
    flex-wrap: nowrap;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(15, 42, 63, .05);
}

.dpr-portal__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dpr-portal__tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0D9488;
    background: rgba(13, 148, 136, .10);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.dpr-portal__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;            /* allow it to shrink instead of shoving the user block off */
    overflow-x: auto;        /* scroll the nav itself if it outgrows the row */
    scrollbar-width: none;   /* keep it clean — no bar for a handful of items */
    margin-right: auto;      /* push the user block to the far right */
}
.dpr-portal__nav::-webkit-scrollbar { display: none; }

.dpr-portal__link {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    color: #51606E;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.dpr-portal__link:hover {
    background: rgba(13, 148, 136, .08);
    color: #0D9488;
}

.dpr-portal__link.active {
    background: linear-gradient(120deg, #0D9488 0%, #14B8A6 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(13, 148, 136, .28);
}

.dpr-portal__user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dpr-portal__whoami {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.dpr-portal__name {
    font-size: 13px;
    font-weight: 600;
    color: #0F2A3F;
}

.dpr-portal__sub {
    font-size: 11px;
    color: #7A8794;
}

.dpr-portal__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(120deg, #0D9488 0%, #14B8A6 100%);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.dpr-portal__body {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px;
    flex: 1;
}

@media (max-width: 640px) {
    /* Small screens: brand + user share row 1, the nav drops to its own full-width scrollable row. */
    .dpr-portal__bar { gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
    .dpr-portal__brand { order: 1; flex: 1 1 auto; min-width: 0; gap: 8px; }
    .dpr-portal__tag { display: none; }               /* lab name repeats on the page — drop it to save the row */
    .dpr-portal__user { order: 2; margin-left: auto; gap: 8px; }
    .dpr-portal__whoami { display: none; }            /* the avatar is enough; name shown on the Overview */
    .dpr-portal__nav {
        order: 3; width: 100%; margin-right: 0;
        overflow-x: auto; flex-wrap: nowrap;          /* one scrollable row of chips */
        padding-bottom: 2px; -webkit-overflow-scrolling: touch;
    }
    .dpr-portal__body { padding: 16px; }

    /* A 3-option segmented control (e.g. the booking payment choice) overflows a phone width
       as an inline-flex — make it a full-width row of equal cells that can shrink. */
    .dpr-portal .dpr-segmented { display: flex; width: 100%; }
    .dpr-portal .dpr-segmented__btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 12px; text-align: center; }
}

/* Dark theme */
:root[data-bs-theme=dark] .dpr-portal__bar {
    background: #14202B;
    border-bottom-color: rgba(255, 255, 255, .08);
}
:root[data-bs-theme=dark] .dpr-portal__link { color: #AEBECC; }
:root[data-bs-theme=dark] .dpr-portal__link:hover { color: #14B8A6; }
:root[data-bs-theme=dark] .dpr-portal__name { color: #EAF1F6; }

/* ===========================================================================
   Wallet top-up — quick-amount chips + selectable payment-gateway tiles
   (CC portal). Each tile is a radio-style button; --pay-accent is set inline
   per provider (Razorpay/Cashfree/PayU). No color-mix, for broad support.
   =========================================================================== */
.dpr-amountchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dpr-amountchip {
    border: 1px solid var(--border-color, #E2E4E6);
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.dpr-amountchip:hover { border-color: #14B8A6; color: #0F766E; }
.dpr-amountchip.is-active {
    border-color: #0D9488;
    background: rgba(13, 148, 136, .10);
    color: #0F766E;
}

.dpr-paytiles { display: flex; flex-direction: column; gap: 8px; }
.dpr-paytile {
    --pay-accent: #475569;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 1.5px solid var(--border-color, #E2E4E6);
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.dpr-paytile:hover { border-color: var(--pay-accent); }
.dpr-paytile.is-active {
    border-color: var(--pay-accent);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .14);
    background: #F8FAFC;
}
.dpr-paytile__icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: var(--pay-accent);
    color: #fff;
    font-size: 18px;
}
.dpr-paytile__body { flex: 1 1 auto; min-width: 0; }
.dpr-paytile__name { display: block; font-weight: 600; color: #1a1f36; font-size: 14px; }
.dpr-paytile__tag {
    display: block;
    font-size: 11.5px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dpr-paytile__check {
    flex: 0 0 auto;
    color: var(--pay-accent);
    font-size: 18px;
    opacity: 0;
    transition: opacity .15s;
}
.dpr-paytile.is-active .dpr-paytile__check { opacity: 1; }

/* Dark theme */
:root[data-bs-theme=dark] .dpr-amountchip {
    background: #16232F; border-color: rgba(255, 255, 255, .12); color: #C9D7E2;
}
:root[data-bs-theme=dark] .dpr-amountchip:hover { color: #5EEAD4; }
:root[data-bs-theme=dark] .dpr-amountchip.is-active {
    background: rgba(20, 184, 166, .16); border-color: #14B8A6; color: #5EEAD4;
}
:root[data-bs-theme=dark] .dpr-paytile {
    background: #16232F; border-color: rgba(255, 255, 255, .12);
}
:root[data-bs-theme=dark] .dpr-paytile.is-active { background: #1B2A38; }
:root[data-bs-theme=dark] .dpr-paytile__name { color: #EAF1F6; }
:root[data-bs-theme=dark] .dpr-paytile__tag { color: #93A7B8; }

/* Quick-action tiles — the CC portal overview's entry points to its main tasks. */
.dpr-quickaction {
    display: flex; flex-direction: column; align-items: flex-start;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--border-color, #E2E4E6);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dpr-quickaction:hover {
    border-color: #14B8A6;
    box-shadow: 0 4px 14px rgba(13, 148, 136, .12);
    transform: translateY(-1px);
}
.dpr-quickaction__icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(13, 148, 136, .10); color: #0D9488;
    font-size: 18px; margin-bottom: 8px;
}
.dpr-quickaction__title { font-weight: 600; color: #1a1f36; font-size: 14px; }
.dpr-quickaction__sub { font-size: 12px; color: #64748B; }
:root[data-bs-theme=dark] .dpr-quickaction { background: #16232F; border-color: rgba(255, 255, 255, .12); }
:root[data-bs-theme=dark] .dpr-quickaction:hover { border-color: #14B8A6; }
:root[data-bs-theme=dark] .dpr-quickaction__title { color: #EAF1F6; }
:root[data-bs-theme=dark] .dpr-quickaction__sub { color: #93A7B8; }
:root[data-bs-theme=dark] .dpr-quickaction__icon { background: rgba(20, 184, 166, .16); color: #5EEAD4; }

/* ===========================================================================
   Formula builder (test master → calculated parameter)

   The pad and the try-it panel sit inside an already-dense parameter card, so
   everything here is deliberately compact: one label column, keys that wrap,
   and a result line that reads at a glance.
   =========================================================================== */

.dpr-formula__input .form-control {
    font-size: 14px;
    letter-spacing: .3px;
}

.dpr-formula__pad {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--gray-100);
}

.dpr-formula__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}

.dpr-formula__row + .dpr-formula__row {
    border-top: 1px dashed var(--border-color);
    padding-top: 8px;
    margin-top: 4px;
}

.dpr-formula__label {
    flex: 0 0 78px;
    font-size: 12px;
    color: var(--text-muted, #6c757d);
    padding-top: 4px;
}

.dpr-formula__keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.dpr-formula__search {
    flex: 1 1 180px;
    max-width: 260px;
    font-size: 12px;
}

/* A key is small on purpose — there are up to ~30 of them in view. */
.dpr-key {
    border: 1px solid var(--border-color);
    background: var(--white, #fff);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-color, #1f2937);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dpr-key:hover {
    background: var(--primary, #0d9488);
    border-color: var(--primary, #0d9488);
    color: #fff;
}

/* Codes are the thing being inserted most, so they read as data, not chrome. */
.dpr-key--code {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-weight: 500;
    color: #0f766e;
    background: rgba(13, 148, 136, .08);
    border-color: rgba(13, 148, 136, .25);
}

/* Honeypot bot-trap: off-screen for people, present in the DOM for scrapers. Not display:none —
   some bots skip hidden fields, but they do fill a positioned-away one. */
.dpr-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Dashboard period picker — native date inputs sized to content, not full width. */
.dpr-range-date { width: auto; min-width: 140px; }

/* Critical-values panel wears a red left edge so it reads as an alert at a glance. */
.dpr-critical { border-left: 3px solid var(--bs-danger, #dc2626); }

/* The if-helper toggle stays lit while its panel is open. */
.dpr-key--active {
    background: var(--primary, #0d9488);
    border-color: var(--primary, #0d9488);
    color: #fff;
}

.dpr-formula__preset {
    flex: 1 1 260px;
    max-width: 420px;
    font-size: 12px;
}

/* if() builder: condition on one line, then/else on the next. */
.dpr-formula__ifgrid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    align-items: center;
    width: 100%;
    max-width: 460px;
    margin-bottom: 6px;
}

.dpr-formula__ifgrid--te {
    grid-template-columns: auto 1fr auto 1fr;
}

.dpr-formula__try {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
}

.dpr-formula__vars {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dpr-formula__var {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 116px;
}

.dpr-formula__varcode {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    font-weight: 600;
    color: #0f766e;
    margin: 0;
}

.dpr-formula__varsrc {
    font-size: 11px;
    color: var(--text-muted, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpr-formula__out {
    display: flex;
    align-items: baseline;
    gap: 8px;
    border-top: 1px dashed var(--border-color);
    padding-top: 8px;
}

.dpr-formula__outlabel {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    color: var(--text-muted, #6c757d);
}

.dpr-formula__outvalue {
    font-size: 20px;
    font-weight: 600;
    color: #0f766e;
}

:root[data-bs-theme=dark] .dpr-formula__pad {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .12);
}

:root[data-bs-theme=dark] .dpr-formula__try,
:root[data-bs-theme=dark] .dpr-formula__row + .dpr-formula__row,
:root[data-bs-theme=dark] .dpr-formula__out {
    border-color: rgba(255, 255, 255, .12);
}

:root[data-bs-theme=dark] .dpr-key {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: #e5e7eb;
}

:root[data-bs-theme=dark] .dpr-key--code,
:root[data-bs-theme=dark] .dpr-formula__varcode,
:root[data-bs-theme=dark] .dpr-formula__outvalue {
    color: #5eead4;
}

:root[data-bs-theme=dark] .dpr-key--code {
    background: rgba(94, 234, 212, .10);
    border-color: rgba(94, 234, 212, .28);
}

/* the "what you get" list on the sign-up success screen */
.dpr-auth__readylist {
    list-style: none;
    margin: 18px 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dpr-auth__readylist li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: #46525E;
}

.dpr-auth__readylist i {
    color: #0D9488;
    font-size: 16px;
    margin-top: 1px;
}

:root[data-bs-theme=dark] .dpr-auth__readylist li {
    color: #C7D2DA;
}

/* ============================================================
   Rich-text editor (dpr-richtext.js + RichTextEditor.razor)
   ------------------------------------------------------------
   A contenteditable box + a toolbar restricted to what the PDF renderer can draw. The box
   below the bar is the working copy; only supported formatting is offered so screen = PDF.
   ============================================================ */

.dpr-rte {
    border: 1px solid var(--border-color, #E2E4E6);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.dpr-rte__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 7px 9px;
    background: var(--gray-100, #F5F8FA);
    border-bottom: 1px solid var(--border-color, #E2E4E6);
}

.dpr-rte__group {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* A slim divider between toolbar groups. */
.dpr-rte__group + .dpr-rte__group {
    padding-left: 10px;
    border-left: 1px solid var(--border-color, #E2E4E6);
}

.dpr-rte__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--dpr-ink, #051321);
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

.dpr-rte__btn--icon {
    padding: 0;
    font-size: 14px;
}

.dpr-rte__btn:hover {
    background: #fff;
    border-color: var(--border-color, #E2E4E6);
}

.dpr-rte__btn:active {
    background: rgba(13, 148, 136, .10);
    border-color: var(--primary, #0D9488);
}

.dpr-rte__btn i {
    font-size: 15px;
}

/* Colour swatches — the exact report palette. */
.dpr-rte__swatch {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 50%;
    cursor: pointer;
}

.dpr-rte__swatch:hover {
    transform: scale(1.12);
}

.dpr-rte__area {
    min-height: 120px;
    max-height: 360px;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--dpr-ink, #051321);
    outline: none;
}

/* Placeholder — dpr-richtext.js keeps data-empty in sync so a lone <br> still shows it. */
.dpr-rte__area[data-empty="true"]::before {
    content: attr(data-placeholder);
    color: var(--gray-500, #8A96A3);
    pointer-events: none;
}

/* Tame the author's headings/lists to the box; the PDF renderer applies its own scale. */
.dpr-rte__area h1, .dpr-rte__area h2, .dpr-rte__area h3,
.dpr-rte__area h4, .dpr-rte__area h5, .dpr-rte__area h6 {
    margin: .35em 0 .25em;
    line-height: 1.3;
}

.dpr-rte__area h2 { font-size: 17px; }
.dpr-rte__area h3 { font-size: 15px; }

.dpr-rte__area p { margin: 0 0 .5em; }

.dpr-rte__area ul, .dpr-rte__area ol {
    margin: 0 0 .5em;
    padding-left: 22px;
}

/* Tables + images draw the same way here as on the PDF (HtmlToQuestPdf). */
.dpr-rte__area table {
    border-collapse: collapse;
    width: 100%;
    margin: 6px 0;
}

.dpr-rte__area td, .dpr-rte__area th {
    border: 1px solid #B7BEC6;
    padding: 4px 7px;
    min-width: 28px;
    vertical-align: top;
}

.dpr-rte__area th {
    background: #EEF2F5;
    font-weight: 600;
}

.dpr-rte__area img {
    max-width: 100%;
    height: auto;
    margin: 4px 0;
}

/* Active toolbar button (table menu open). */
.dpr-rte__btn.is-on {
    background: rgba(13, 148, 136, .12);
    border-color: var(--primary, #0D9488);
    color: var(--primary, #0D9488);
}

/* Table menu popover. */
.dpr-rte__tablewrap {
    position: relative;
}

.dpr-rte__pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: 250px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border-color, #E2E4E6);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 42, 63, .16);
}

.dpr-rte__poprow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.dpr-rte__poprow label {
    font-size: 12px;
    color: var(--gray-600, #616161);
    margin: 0;
}

.dpr-rte__poprow input {
    width: 52px;
}

.dpr-rte__popnote {
    font-size: 11.5px;
    color: var(--gray-500, #8A96A3);
    margin: 6px 0 5px;
}

.dpr-rte__popgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.dpr-rte__popgrid button {
    padding: 5px 6px;
    border: 1px solid var(--border-color, #E2E4E6);
    border-radius: 6px;
    background: #fff;
    color: var(--dpr-ink, #051321);
    font-size: 11.5px;
    cursor: pointer;
}

.dpr-rte__popgrid button:hover {
    background: var(--gray-100, #F5F8FA);
}

.dpr-rte__popgrid .dpr-rte__popdanger {
    grid-column: 1 / -1;
    color: #D32F2F;
    border-color: rgba(211, 47, 47, .35);
}

.dpr-rte__popgrid .dpr-rte__popdanger:hover {
    background: rgba(211, 47, 47, .06);
}

/* Font-size dropdown. */
.dpr-rte__size {
    width: auto;
    min-width: 74px;
    height: 30px;
    padding: 0 24px 0 8px;
    font-size: 12px;
}

/* Small icon that labels a run of swatches. */
.dpr-rte__swatchlabel {
    display: inline-flex;
    align-items: center;
    color: var(--gray-600, #616161);
    font-size: 14px;
    margin-right: 1px;
}

/* Highlight swatches are square-ish to read as a highlighter, not a text colour. */
.dpr-rte__swatch--hi {
    border-radius: 3px;
}

/* Word-style table size picker. */
.dpr-rte__gridpick {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.dpr-rte__gridrow {
    display: flex;
    gap: 2px;
}

.dpr-rte__gridcell {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color, #D4D9DE);
    border-radius: 2px;
    background: #fff;
    cursor: pointer;
}

.dpr-rte__gridcell.is-lit {
    background: rgba(13, 148, 136, .28);
    border-color: var(--primary, #0D9488);
}

.dpr-rte__gridlabel {
    font-size: 12px;
    color: var(--gray-600, #616161);
    margin-bottom: 8px;
    text-align: center;
}

/* Contextual image toolbar (shown when an image is selected). */
.dpr-rte__imgbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: rgba(13, 148, 136, .07);
    border-bottom: 1px solid var(--border-color, #E2E4E6);
    font-size: 12px;
}

.dpr-rte__imgbarlabel {
    color: var(--primary, #0D9488);
    font-weight: 600;
    margin-right: 2px;
}

.dpr-rte__imgbar button {
    padding: 4px 9px;
    border: 1px solid var(--border-color, #E2E4E6);
    border-radius: 6px;
    background: #fff;
    color: var(--dpr-ink, #051321);
    font-size: 12px;
    cursor: pointer;
}

.dpr-rte__imgbar button:hover {
    background: var(--gray-100, #F5F8FA);
}

.dpr-rte__imgbar .dpr-rte__imgbar-danger {
    color: #D32F2F;
    border-color: rgba(211, 47, 47, .35);
    margin-left: auto;
}

/* An image the author has clicked reads as selected. */
.dpr-rte__area img {
    cursor: pointer;
}

/* ---- dark: tables / popover ---- */
:root[data-bs-theme=dark] .dpr-rte__area th {
    background: rgba(255, 255, 255, .06);
}

:root[data-bs-theme=dark] .dpr-rte__pop {
    background: #1b2b36;
    border-color: rgba(255, 255, 255, .12);
}

:root[data-bs-theme=dark] .dpr-rte__popgrid button {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: #C7D2DA;
}

:root[data-bs-theme=dark] .dpr-rte__gridcell {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
}

:root[data-bs-theme=dark] .dpr-rte__imgbar {
    border-bottom-color: rgba(255, 255, 255, .10);
}

:root[data-bs-theme=dark] .dpr-rte__imgbar button {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: #C7D2DA;
}

/* ---- dark ---- */
:root[data-bs-theme=dark] .dpr-rte {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .10);
}

:root[data-bs-theme=dark] .dpr-rte__bar {
    background: rgba(255, 255, 255, .04);
    border-bottom-color: rgba(255, 255, 255, .10);
}

:root[data-bs-theme=dark] .dpr-rte__group + .dpr-rte__group {
    border-left-color: rgba(255, 255, 255, .10);
}

:root[data-bs-theme=dark] .dpr-rte__btn {
    color: #C7D2DA;
}

:root[data-bs-theme=dark] .dpr-rte__btn:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
}

:root[data-bs-theme=dark] .dpr-rte__area {
    color: #D6DEE4;
}

/* ── Full-screen (expand) mode ──
   The expand button pushes the editor into a centred modal so a long interpretation
   gets a roomy canvas. Only positioning changes — the same .dpr-rte is repositioned. */
.dpr-rte__group--end {
    margin-left: auto;   /* keep the expand toggle at the far right of the toolbar */
}

.dpr-rte__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 19, 33, .45);
    z-index: 1080;
    animation: dpr-rte-fade .12s ease;
}

.dpr-rte--full {
    position: fixed;
    z-index: 1081;
    top: 3vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(1040px, 94vw);
    height: 94vh;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(5, 19, 33, .35);
    background: #fff;
    animation: dpr-rte-pop .14s ease;
}

/* Toolbar keeps its height; the editing area grows to fill the rest and scrolls. */
.dpr-rte--full .dpr-rte__bar {
    flex: 0 0 auto;
}

.dpr-rte--full .dpr-rte__area {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 22px 30px;
    font-size: 14.5px;
    line-height: 1.6;
}

@keyframes dpr-rte-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dpr-rte-pop {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Dark: the modal needs an opaque surface so the dimmed page can't bleed through. */
:root[data-bs-theme=dark] .dpr-rte--full {
    background: #16232e;
    border: 1px solid rgba(255, 255, 255, .10);
}

/* ── Machine traffic dashboard (Phase 5) ── */
.dpr-traffic { border-left: 3px solid #CBD5E1; transition: box-shadow .15s; }
.dpr-traffic--ok      { border-left-color: #16A34A; }
.dpr-traffic--warning { border-left-color: #D97706; }
.dpr-traffic--error   { border-left-color: #DC2626; }
.dpr-traffic--idle    { border-left-color: #94A3B8; }
.dpr-hdot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; background:#94A3B8; }
.dpr-hdot--ok      { background:#16A34A; }
.dpr-hdot--warning { background:#D97706; }
.dpr-hdot--error   { background:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.15); }
.dpr-hdot--idle    { background:#94A3B8; }

/* ── Branch "view as" switcher (top bar) ───────────────────────────────── */
.dpr-branchswitch{display:inline-flex;align-items:center;gap:6px;margin-right:12px;padding:2px 6px 2px 10px;
  border:1px solid var(--dpr-border,#dee2e6);border-radius:8px;background:var(--dpr-surface,#fff);white-space:nowrap;}
.dpr-branchswitch>i{color:var(--dpr-muted,#8a94a6);font-size:15px;flex:none;}
.dpr-branchswitch select{border:none;box-shadow:none;background:transparent;min-width:120px;max-width:200px;
  font-size:13px;padding:2px 20px 2px 2px;color:inherit;}
.dpr-branchswitch select:focus{box-shadow:none;}
.dpr-branchswitch.is-active{border-color:var(--dpr-primary,#0d9488);background:rgba(13,148,136,.07);}
.dpr-branchswitch.is-active>i{color:var(--dpr-primary,#0d9488);}
:root[data-bs-theme=dark] .dpr-branchswitch{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);}
:root[data-bs-theme=dark] .dpr-branchswitch select{color:#e6e9ef;}
:root[data-bs-theme=dark] .dpr-branchswitch select option{background:#1b2130;color:#e6e9ef;}
@media (max-width:900px){.dpr-branchswitch select{max-width:130px;}}
/* ==== Global error boundary card (AppErrorBoundary.razor) ==== */
.dpr-errorwrap { min-height: 60vh; }
.dpr-errorcard {
    max-width: 460px;
    background: #fff;
    border: 1px solid #E6EAEE;
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 8px 30px rgba(16, 24, 40, .06);
}
.dpr-errorcard__icon {
    width: 60px; height: 60px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    background: #FDECEC; color: #DC2626;
}
.dpr-errorcard__detail {
    margin-top: 16px;
    text-align: left;
    font-size: 12px;
    background: #F7F9FB;
    border: 1px solid #E6EAEE;
    border-radius: 8px;
    padding: 10px 12px;
    color: #64748B;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 160px;
    overflow: auto;
}
[data-bs-theme="dark"] .dpr-errorcard {
    background: #1B2431;
    border-color: #2A3646;
    box-shadow: none;
}
[data-bs-theme="dark"] .dpr-errorcard__detail {
    background: #141C27;
    border-color: #2A3646;
    color: #94A3B8;
}
/* ==== Notification bell dropdown (NotificationBell.razor) ==== */
.dpr-notiflist { max-height: 380px; overflow-y: auto; }
.dpr-notifitem {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #EEF1F4;
}
.dpr-notifitem:last-child { border-bottom: 0; }
.dpr-notifitem.is-unread { background: #F3FAF9; }
.dpr-notifitem__dot {
    width: 8px; height: 8px; border-radius: 50%;
    margin-top: 6px; flex: 0 0 auto;
}
.dpr-notifitem__dot.is-info     { background: #0EA5A2; }
.dpr-notifitem__dot.is-warning  { background: #F59E0B; }
.dpr-notifitem__dot.is-critical { background: #DC2626; }
.dpr-notifitem__dot.is-promo    { background: #7C3AED; }
.dpr-notifitem__body { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.dpr-notifitem__title { font-size: 13px; font-weight: 600; color: #1E293B; }
.dpr-notifitem__text  { font-size: 12px; color: #64748B; margin-top: 1px; }
.dpr-notifitem__time  { font-size: 11px; color: #94A3B8; margin-top: 3px; }
.dpr-notifitem__x {
    border: 0; background: transparent; color: #94A3B8;
    padding: 2px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.dpr-notifitem__x:hover { color: #DC2626; }
[data-bs-theme="dark"] .dpr-notifitem { border-color: #2A3646; }
[data-bs-theme="dark"] .dpr-notifitem.is-unread { background: rgba(14,165,162,.10); }
[data-bs-theme="dark"] .dpr-notifitem__title { color: #E2E8F0; }
/* ==== Global omni-search (GlobalSearch.razor) ==== */
.dpr-omni { position: relative; width: 100%; max-width: 440px; }
.dpr-omni__panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff;
    border: 1px solid #E6EAEE;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(16,24,40,.12);
    padding: 6px;
    z-index: 1050;
    max-height: 420px; overflow-y: auto;
}
.dpr-omni__msg { padding: 14px 12px; text-align: center; color: #94A3B8; font-size: 13px; }
.dpr-omni__row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px;
    text-decoration: none; color: inherit;
}
.dpr-omni__row:hover { background: #F1FAF9; }
.dpr-omni__icon {
    width: 34px; height: 34px; flex: 0 0 auto;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #E9F6F5; color: #0E8F8B; font-size: 17px;
}
.dpr-omni__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.dpr-omni__title { font-size: 13px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpr-omni__sub { font-size: 12px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpr-omni__type {
    font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: #94A3B8; flex: 0 0 auto;
}
[data-bs-theme="dark"] .dpr-omni__panel { background: #1B2431; border-color: #2A3646; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .dpr-omni__row:hover { background: rgba(14,143,139,.14); }
[data-bs-theme="dark"] .dpr-omni__title { color: #E2E8F0; }
[data-bs-theme="dark"] .dpr-omni__icon { background: rgba(14,143,139,.18); color: #5EEAD4; }
/* ==== Toasts (ToastHost.razor) ==== */
.dpr-toasts {
    position: fixed; bottom: 20px; right: 20px;
    z-index: 1080;
    display: flex; flex-direction: column; gap: 10px;
    max-width: 360px;
}
.dpr-toast {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff;
    border: 1px solid #E6EAEE;
    border-left: 4px solid #64748B;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(16,24,40,.12);
    animation: dpr-toast-in .18s ease-out;
}
@keyframes dpr-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dpr-toast.is-success { border-left-color: #0E9F6E; }
.dpr-toast.is-info    { border-left-color: #0EA5A2; }
.dpr-toast.is-warning { border-left-color: #F59E0B; }
.dpr-toast.is-danger  { border-left-color: #DC2626; }
.dpr-toast__icon { font-size: 18px; margin-top: 1px; }
.dpr-toast.is-success .dpr-toast__icon { color: #0E9F6E; }
.dpr-toast.is-info .dpr-toast__icon    { color: #0EA5A2; }
.dpr-toast.is-warning .dpr-toast__icon { color: #F59E0B; }
.dpr-toast.is-danger .dpr-toast__icon  { color: #DC2626; }
.dpr-toast__msg { flex: 1 1 auto; font-size: 13px; color: #1E293B; }
.dpr-toast__x { border: 0; background: transparent; color: #94A3B8; padding: 0; line-height: 1; cursor: pointer; }
.dpr-toast__x:hover { color: #475569; }
[data-bs-theme="dark"] .dpr-toast { background: #1B2431; border-color: #2A3646; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .dpr-toast__msg { color: #E2E8F0; }
/* ==== Public booking page (BookingPage.razor) ==== */
.dpr-book { min-height: 100vh; background: #F4F7F9; }
.dpr-book__bar { background: #0E8F8B; color: #fff; padding: 14px 20px; }
.dpr-book__brand { display: flex; align-items: center; gap: 12px; max-width: 980px; margin: 0 auto; }
.dpr-book__brand img { height: 40px; max-width: 140px; object-fit: contain; background:#fff; border-radius:6px; padding:2px; }
.dpr-book__lab { font-size: 18px; font-weight: 700; }
.dpr-book__loc { font-size: 12px; opacity: .9; }
.dpr-book__wrap { max-width: 980px; margin: 0 auto; padding: 18px 16px 40px; }
.dpr-book__grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
@media (max-width: 800px) { .dpr-book__grid { grid-template-columns: 1fr; } }
.dpr-book__card { background: #fff; border: 1px solid #E6EAEE; border-radius: 14px; padding: 18px; }
.dpr-book__cart { align-self: start; position: sticky; top: 16px; }
.dpr-book__steps { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12px; color: #94A3B8; }
.dpr-book__steps .is-on { color: #0E8F8B; font-weight: 700; }
.dpr-book__cat { max-height: 460px; overflow-y: auto; }
.dpr-book__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #EEF1F4; }
.dpr-book__iname { font-weight: 600; font-size: 14px; }
.dpr-book__imeta { font-size: 12px; color: #94A3B8; text-transform: capitalize; }
.dpr-book__tick { font-size: 46px; color: #0E9F6E; }
.dpr-book__ref { background: #F7F9FB; border: 1px solid #E6EAEE; border-radius: 10px; padding: 12px 16px; margin: 12px auto; max-width: 360px; }
.dpr-book__ref > div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; }
.dpr-book__ref span { color: #64748B; }

/* ============================================================
   Patient self-service portal
   ============================================================ */

/* Sign-in screen (phone + OTP) — a centred card on a soft ground. */
.dpr-patient-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(160deg, #EAF3F3 0%, #F5F8FA 60%);
}
.dpr-patient-auth__card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid #E3EBEF;
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 12px 40px rgba(15, 42, 63, .08);
}
.dpr-patient-auth__logo { height: 48px; max-width: 160px; object-fit: contain; }
.dpr-patient-auth__mark {
    width: 56px; height: 56px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; font-size: 26px;
    color: #0E8F8B; background: rgba(14, 143, 139, .12);
}
.dpr-otp { letter-spacing: .5em; font-weight: 600; }

:root[data-bs-theme=dark] .dpr-patient-auth {
    background: linear-gradient(160deg, #0C1B24 0%, #0F2A3F 100%);
}
:root[data-bs-theme=dark] .dpr-patient-auth__card {
    background: #142A38; border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

/* Overview stat tiles — icon on the left, value + label on the right; the whole tile links. */
.dpr-stat {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; height: 100%;
    border: 1px solid #E3EBEF; border-radius: 12px;
    background: #fff; text-decoration: none; color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dpr-stat:hover {
    border-color: #C7DAD9; box-shadow: 0 6px 18px rgba(15, 42, 63, .06);
    transform: translateY(-1px); color: inherit;
}
.dpr-stat__icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.dpr-stat__value { display: block; font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dpr-stat__label { display: block; font-size: 12px; color: #6B7A85; }

:root[data-bs-theme=dark] .dpr-stat {
    background: #142A38; border-color: rgba(255, 255, 255, .08);
}
:root[data-bs-theme=dark] .dpr-stat:hover { border-color: rgba(255, 255, 255, .18); }
:root[data-bs-theme=dark] .dpr-stat__label { color: #93A7B8; }

/* Ledger dashboard — stat tiles, chart legend dot, and the chart frame. */
.dpr-statcard {
    border: 1px solid var(--gray-200, #E2E4E6);
    border-radius: 12px;
    padding: 14px 16px;
    height: 100%;
    background: var(--white, #fff);
}
.dpr-statcard__label { font-size: 12px; color: var(--gray-600, #6B7280); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.dpr-statcard__value { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.1; }
.dpr-statcard__hint { font-size: 11px; color: var(--gray-500, #9CA3AF); margin: 6px 0 0; }
.dpr-legdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dpr-chart { width: 100%; overflow: hidden; }
:root[data-bs-theme=dark] .dpr-statcard { background: #142A38; border-color: rgba(255, 255, 255, .08); }
:root[data-bs-theme=dark] .dpr-statcard__label { color: #93A7B8; }
:root[data-bs-theme=dark] .dpr-statcard__hint { color: #6B7C8A; }

/* Read-only medical-history summary (bench) — small section label above each chip group. */
.dpr-mh__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500, #9CA3AF); margin: 0 0 4px; font-weight: 600; }
:root[data-bs-theme=dark] .dpr-mh__label { color: #93A7B8; }

/* "Book another test" call-to-action strip. */
.dpr-cta {
    border: 1px dashed #B9D3D2; border-radius: 12px;
    padding: 16px 18px; margin-top: 4px;
    background: rgba(14, 143, 139, .05);
}
:root[data-bs-theme=dark] .dpr-cta {
    border-color: rgba(94, 234, 212, .25); background: rgba(94, 234, 212, .06);
}

/* "Share with patients" card icon badge (Settings). */
.dpr-share__icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    color: #0E8F8B; background: rgba(14, 143, 139, .12);
}
:root[data-bs-theme=dark] .dpr-share__icon { color: #5EEAD4; background: rgba(94, 234, 212, .12); }

/* Patient sample-tracking stepper (vertical) */
.dpr-track { list-style: none; margin: 0; padding: 0; }
.dpr-track__step { position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.dpr-track__step:last-child { padding-bottom: 0; }
/* connector line */
.dpr-track__step:not(:last-child)::before {
    content: ""; position: absolute; left: 17px; top: 34px; bottom: 0; width: 2px; background: #E3EBEF;
}
.dpr-track__dot {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 17px; z-index: 1;
    background: #EEF2F5; color: #94A3B8; border: 2px solid #E3EBEF;
}
.dpr-track__body { padding-top: 5px; }
.dpr-track__label { display: block; font-weight: 600; font-size: 14px; color: #0F2A3F; }
.dpr-track__hint { display: block; font-size: 12px; color: #6B7A85; }
/* done */
.dpr-track__step--done .dpr-track__dot { background: rgba(14,143,139,.12); color: #0E8F8B; border-color: rgba(14,143,139,.4); }
.dpr-track__step--done:not(:last-child)::before { background: #0E8F8B; }
/* current */
.dpr-track__step--current .dpr-track__dot { background: #0E8F8B; color: #fff; border-color: #0E8F8B; box-shadow: 0 0 0 4px rgba(14,143,139,.15); }
.dpr-track__step--current .dpr-track__label { color: #0E8F8B; }
/* todo */
.dpr-track__step--todo .dpr-track__label { color: #94A3B8; font-weight: 500; }

:root[data-bs-theme=dark] .dpr-track__dot { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #6B7A85; }
:root[data-bs-theme=dark] .dpr-track__step:not(:last-child)::before { background: rgba(255,255,255,.10); }
:root[data-bs-theme=dark] .dpr-track__label { color: #C9D7E2; }

/* "Add to home screen" banner (patient portal) */
.dpr-install {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 16px; border-radius: 12px;
    background: rgba(14, 143, 139, .07); border: 1px solid rgba(14, 143, 139, .22);
}
.dpr-install__icon {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    background: #0E8F8B; color: #fff;
}
:root[data-bs-theme=dark] .dpr-install { background: rgba(94,234,212,.08); border-color: rgba(94,234,212,.25); }

/* Mobile: turn a data table into stacked cards (label from data-label). Scope with .dpr-mtable
   so only the patient-portal lists change — lab tables keep their horizontal scroll. */
@media (max-width: 640px) {
    .dpr-mtable { border: 0; }
    .dpr-mtable thead { display: none; }
    .dpr-mtable tbody tr {
        display: block;
        border: 1px solid #E3EBEF;
        border-radius: 12px;
        margin: 0 0 10px;
        padding: 6px 14px;
        background: #fff;
    }
    .dpr-mtable tbody tr:last-child { margin-bottom: 0; }
    .dpr-mtable tbody td {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 8px 0 !important;
        border: 0 !important;
        text-align: right;
        white-space: normal !important;
    }
    .dpr-mtable tbody td::before {
        content: attr(data-label);
        font-size: 12px; font-weight: 600; color: #6B7A85;
        text-align: left; flex: 0 0 auto;
    }
    /* First cell = the card's title row: full width, no label, a divider under it. */
    .dpr-mtable tbody td:first-child {
        display: block; text-align: left;
        border-bottom: 1px solid #EEF1F4 !important;
        padding-bottom: 8px !important; margin-bottom: 2px;
    }
    .dpr-mtable tbody td:first-child::before { content: none; }
    /* Cells flagged as their own block (name+sub-line, action buttons). */
    .dpr-mtable tbody td.dpr-mcell-block { display: block; text-align: left; }
    .dpr-mtable tbody td.dpr-mcell-block::before {
        display: block; margin-bottom: 2px;
    }
    .dpr-mtable tbody td.dpr-mcell-actions { justify-content: flex-end; flex-wrap: wrap; }
}
:root[data-bs-theme=dark] .dpr-mtable tbody tr { background: #142A38; border-color: rgba(255,255,255,.08); }