/* ClinicalPlus design system (doc 03 §1).
   One stylesheet on top of Bootstrap 5.1: colour tokens with light and dark themes, a dense type scale for
   data entry, the application shell, and restyled Bootstrap components so every screen picks the look up
   without per-page markup. Print and PDF output (Chromium print media) always uses the light, shell-free view.
   Theme: <html data-theme="light|dark">; without the attribute it follows the operating system. */

/* ================================================================ tokens */
:root {
    color-scheme: light;
    --cp-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --cp-font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

    --cp-canvas: #f3f5f9;
    --cp-surface: #ffffff;
    --cp-surface-2: #f7f9fc;
    --cp-surface-3: #eef2f7;
    --cp-border: #e1e6ee;
    --cp-border-strong: #c9d2de;
    --cp-text: #142033;
    --cp-text-2: #3d4b5f;
    --cp-text-3: #66758b;
    --cp-link: #0b62b8;

    --cp-primary: #0b67c2;
    --cp-primary-hover: #0956a3;
    --cp-primary-soft: #e8f1fc;
    --cp-primary-soft-text: #0a4c8f;
    --cp-on-primary: #ffffff;

    --cp-success: #12805c;
    --cp-success-soft: #e5f5ee;
    --cp-warning: #9a5a00;
    --cp-warning-soft: #fff3dc;
    --cp-danger: #c0312a;
    --cp-danger-soft: #fdecea;
    --cp-info: #0b6f86;
    --cp-info-soft: #e2f4f8;
    --cp-neutral-soft: #edf0f5;

    /* chart series: categorical slots in a fixed order, validated for colour-vision deficiency on both surfaces */
    --cp-s1: #2a78d6; --cp-s2: #eb6834; --cp-s3: #1baf7a; --cp-s4: #eda100; --cp-s5: #e87ba4; --cp-s6: #008300; --cp-s7: #6250d6;
    --cp-grid: #e9edf3;

    --cp-field-bg: #ffffff;
    --cp-field-focus-bg: #f5f9ff;
    --cp-field-disabled-bg: #f1f4f8;
    --cp-focus-ring: 0 0 0 3px rgba(11, 103, 194, .22);
    --cp-row-hover: #f3f7fd;
    --cp-row-stripe: #fafbfd;

    --cp-sidebar-bg: #0f2740;
    --cp-sidebar-text: #c3d1e2;
    --cp-sidebar-title: #7d93ad;
    --cp-sidebar-hover: rgba(255, 255, 255, .07);
    --cp-sidebar-active: rgba(90, 167, 255, .18);
    --cp-sidebar-accent: #5aa7ff;

    --cp-shadow-1: 0 1px 2px rgba(16, 32, 56, .06), 0 1px 1px rgba(16, 32, 56, .04);
    --cp-shadow-2: 0 6px 20px rgba(16, 32, 56, .10), 0 2px 6px rgba(16, 32, 56, .06);
    --cp-radius-sm: 4px;
    --cp-radius: 6px;
    --cp-radius-lg: 10px;

    --cp-space-1: 4px;
    --cp-space-2: 8px;
    --cp-space-3: 12px;
    --cp-space-4: 16px;
    --cp-space-5: 24px;
    --cp-space-6: 32px;

    --cp-topbar-h: 52px;
    --cp-footer-h: 31px;
    --cp-sidebar-width: 252px;
    --cp-control-h: 34px;
    --cp-control-h-sm: 30px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --cp-canvas: #0d1117;
        --cp-surface: #151b23;
        --cp-surface-2: #1a212b;
        --cp-surface-3: #212a36;
        --cp-border: #29323e;
        --cp-border-strong: #3b4655;
        --cp-text: #e5eaf1;
        --cp-text-2: #bac4d1;
        --cp-text-3: #8693a5;
        --cp-link: #73b4ff;
        --cp-primary: #2d7fd6;
        --cp-primary-hover: #3f8fe6;
        --cp-primary-soft: #16283d;
        --cp-primary-soft-text: #94c6ff;
        --cp-success: #46c48f;
        --cp-success-soft: #12291f;
        --cp-warning: #e6a645;
        --cp-warning-soft: #2c2312;
        --cp-danger: #f3766d;
        --cp-danger-soft: #331a1b;
        --cp-info: #4dbcd4;
        --cp-info-soft: #10282f;
        --cp-neutral-soft: #222b37;
    --cp-s1: #3987e5; --cp-s2: #d95926; --cp-s3: #199e70; --cp-s4: #c98500; --cp-s5: #d55181; --cp-s6: #008300; --cp-s7: #9085e9;
    --cp-grid: #222a35;
        --cp-field-bg: #10151c;
        --cp-field-focus-bg: #132235;
        --cp-field-disabled-bg: #1a2029;
        --cp-focus-ring: 0 0 0 3px rgba(77, 155, 239, .35);
        --cp-row-hover: #1b2532;
        --cp-row-stripe: #171d26;
        --cp-sidebar-bg: #0a0e14;
        --cp-sidebar-text: #b4c1d1;
        --cp-sidebar-title: #6c7c90;
        --cp-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
        --cp-shadow-2: 0 8px 24px rgba(0, 0, 0, .5);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --cp-canvas: #0d1117;
    --cp-surface: #151b23;
    --cp-surface-2: #1a212b;
    --cp-surface-3: #212a36;
    --cp-border: #29323e;
    --cp-border-strong: #3b4655;
    --cp-text: #e5eaf1;
    --cp-text-2: #bac4d1;
    --cp-text-3: #8693a5;
    --cp-link: #73b4ff;
    --cp-primary: #2d7fd6;
    --cp-primary-hover: #3f8fe6;
    --cp-primary-soft: #16283d;
    --cp-primary-soft-text: #94c6ff;
    --cp-success: #46c48f;
    --cp-success-soft: #12291f;
    --cp-warning: #e6a645;
    --cp-warning-soft: #2c2312;
    --cp-danger: #f3766d;
    --cp-danger-soft: #331a1b;
    --cp-info: #4dbcd4;
    --cp-info-soft: #10282f;
    --cp-neutral-soft: #222b37;
    --cp-s1: #3987e5; --cp-s2: #d95926; --cp-s3: #199e70; --cp-s4: #c98500; --cp-s5: #d55181; --cp-s6: #008300; --cp-s7: #9085e9;
    --cp-grid: #222a35;
    --cp-field-bg: #10151c;
    --cp-field-focus-bg: #132235;
    --cp-field-disabled-bg: #1a2029;
    --cp-focus-ring: 0 0 0 3px rgba(77, 155, 239, .35);
    --cp-row-hover: #1b2532;
    --cp-row-stripe: #171d26;
    --cp-sidebar-bg: #0a0e14;
    --cp-sidebar-text: #b4c1d1;
    --cp-sidebar-title: #6c7c90;
    --cp-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --cp-shadow-2: 0 8px 24px rgba(0, 0, 0, .5);
}

/* ================================================================ base */
@media screen {
    html { font-size: 14px; }
}

html { height: 100%; }
body { min-height: 100%; }

body {
    font-family: var(--cp-font);
    background: var(--cp-canvas);
    color: var(--cp-text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cp-link); text-underline-offset: 2px; }
a:hover { color: var(--cp-primary-hover); }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--cp-text); font-weight: 600; letter-spacing: -.005em; }
.h4, h4 { font-size: 1.36rem; }
.h5, h5 { font-size: 1.14rem; }
.h6, h6 { font-size: 1rem; }
.small, small { font-size: .875em; }
code { color: var(--cp-primary-soft-text); font-family: var(--cp-font-mono); font-size: .9em; }
kbd { background: var(--cp-surface-3); color: var(--cp-text-2); border: 1px solid var(--cp-border-strong); border-bottom-width: 2px; border-radius: var(--cp-radius-sm); padding: 0 5px; font-size: .78em; font-family: var(--cp-font); box-shadow: none; }
hr { border-color: var(--cp-border); opacity: 1; }
.text-muted, .text-body-secondary { color: var(--cp-text-3) !important; }
.text-danger { color: var(--cp-danger) !important; }
.text-success { color: var(--cp-success) !important; }
.text-warning { color: var(--cp-warning) !important; }
.text-primary { color: var(--cp-primary) !important; }
.bg-light, .bg-white { background-color: var(--cp-surface-2) !important; color: var(--cp-text); }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--cp-border) !important; }
.table-responsive, td, th { font-variant-numeric: tabular-nums; }
.text-end { font-variant-numeric: tabular-nums; }
::selection { background: rgba(11, 103, 194, .2); }

.cp-icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.cp-icon-sm { width: 15px; height: 15px; vertical-align: -2px; }

.cp-skip-link { position: absolute; left: 8px; top: 8px; z-index: 2000; background: var(--cp-surface); color: var(--cp-text); padding: 6px 10px; border-radius: var(--cp-radius); box-shadow: var(--cp-shadow-2); }

/* ================================================================ shell */
/* min-height, not height: the sticky topbar and sidebar need the body to grow with the page */
body.cp-app { display: flex; flex-direction: column; min-height: 100vh; }

.cp-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    height: var(--cp-topbar-h);
    padding: 0 var(--cp-space-4);
    background: var(--cp-surface);
    color: var(--cp-text);
    border-bottom: 1px solid var(--cp-border);
    box-shadow: var(--cp-shadow-1);
}

.cp-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--cp-text); font-weight: 700; text-decoration: none; font-size: 1.08rem; letter-spacing: -.01em; white-space: nowrap; }
.cp-brand:hover { color: var(--cp-text); }
.cp-brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #0b67c2, #0e9f8f); color: #fff; }
.cp-brand-mark svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; }
.cp-brand-name b { color: var(--cp-primary); font-weight: 700; }
.cp-topbar-spacer { flex: 1; }
.cp-org-name { font-weight: 600; padding-left: var(--cp-space-3); border-left: 1px solid var(--cp-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; color: var(--cp-text-2); }
.cp-branch-name { font-size: .86rem; color: var(--cp-text-3); white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--cp-surface-3); }
.cp-topbar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px;
    border: 1px solid var(--cp-border); border-radius: var(--cp-radius);
    background: var(--cp-surface); color: var(--cp-text-2); font-size: .9rem;
}
.cp-topbar-btn:hover, .cp-topbar-btn:focus-visible { background: var(--cp-surface-3); color: var(--cp-text); }
.cp-topbar-btn.dropdown-toggle::after { margin-left: 2px; }
.cp-icon-btn { width: 32px; padding: 0; justify-content: center; }
.cp-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cp-primary-soft); color: var(--cp-primary-soft-text); font-size: .72rem; font-weight: 700; }
.cp-user-name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme-icon] { display: none; }
:root:not([data-theme]) [data-theme-icon="auto"], :root[data-theme="light"] [data-theme-icon="light"], :root[data-theme="dark"] [data-theme-icon="dark"] { display: inline; }

.cp-shell { display: flex; flex: 1; min-height: 0; }

.cp-sidebar {
    position: sticky;
    top: var(--cp-topbar-h);
    height: calc(100vh - var(--cp-topbar-h) - var(--cp-footer-h));
    width: var(--cp-sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--cp-sidebar-bg);
    color: var(--cp-sidebar-text);
}

.cp-nav-search { padding: var(--cp-space-3); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cp-nav-search-box { position: relative; }
.cp-nav-search-box .cp-icon { position: absolute; left: 9px; top: 8px; color: var(--cp-sidebar-title); }
.cp-nav-search input {
    width: 100%; height: 32px; padding: 0 44px 0 32px;
    border-radius: var(--cp-radius); border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .06); color: #fff; font-size: .9rem;
}
.cp-nav-search input::placeholder { color: var(--cp-sidebar-title); }
.cp-nav-search input:focus { outline: none; border-color: var(--cp-sidebar-accent); background: rgba(255, 255, 255, .1); }
.cp-nav-search kbd { position: absolute; right: 7px; top: 7px; background: transparent; color: var(--cp-sidebar-title); border-color: rgba(255, 255, 255, .15); }
.cp-nav-scroll { flex: 1; overflow-y: auto; padding: var(--cp-space-2) 0 var(--cp-space-4); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }

.cp-nav-group { margin: 2px 0; }
.cp-nav-group-title {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 7px 14px 7px 16px; border: 0; background: none;
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--cp-sidebar-title); text-align: left;
}
.cp-nav-group-title:hover { color: #fff; }
.cp-nav-group-title:focus-visible { outline: 2px solid var(--cp-sidebar-accent); outline-offset: -2px; }
.cp-nav-group-title .cp-chevron { margin-left: auto; transition: transform .15s; width: 14px; height: 14px; }
.cp-nav-group.collapsed .cp-chevron { transform: rotate(-90deg); }
.cp-nav-group.collapsed .cp-nav-list { display: none; }
.cp-nav-list { list-style: none; margin: 0; padding: 0 8px; }
.cp-nav-link {
    display: block; padding: 6px 10px 6px 36px; margin: 1px 0;
    color: var(--cp-sidebar-text); text-decoration: none; border-radius: var(--cp-radius);
    font-size: .93rem; position: relative;
}
.cp-nav-link:hover, .cp-nav-link:focus { background: var(--cp-sidebar-hover); color: #fff; outline: none; }
.cp-nav-link:focus-visible { box-shadow: inset 0 0 0 2px var(--cp-sidebar-accent); }
.cp-nav-link.active { background: var(--cp-sidebar-active); color: #fff; font-weight: 600; }
.cp-nav-link.active::before { content: ""; position: absolute; left: 14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--cp-sidebar-accent); }
.cp-nav-link mark { background: rgba(90, 167, 255, .35); color: #fff; padding: 0; border-radius: 2px; }
.cp-nav-filtering .cp-nav-group .cp-nav-list { display: block; }
.cp-nav-filtering .cp-nav-group .cp-chevron { visibility: hidden; }
.cp-nav-empty { padding: 12px 16px; color: var(--cp-sidebar-title); font-size: .88rem; }

.cp-main { flex: 1; min-width: 0; padding: var(--cp-space-5) 28px var(--cp-space-6); }
.cp-main:focus { outline: none; }
.cp-main > .alert:first-child { margin-top: 0; }

.cp-footer {
    display: flex; gap: var(--cp-space-4); align-items: center; flex-wrap: wrap;
    padding: 6px var(--cp-space-4); font-size: .8rem; color: var(--cp-text-3);
    border-top: 1px solid var(--cp-border); background: var(--cp-surface);
    position: sticky; bottom: 0; z-index: 1010;
}
.cp-footer kbd { margin: 0 1px; }

/* ================================================================ page header, toolbar, sections */
.cp-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--cp-space-3); margin-bottom: var(--cp-space-4); flex-wrap: wrap; min-height: 34px; }
.cp-page-header h1, .cp-page-header .h4 { margin: 0; font-size: 1.43rem; font-weight: 650; letter-spacing: -.015em; }
.cp-page-header .cp-page-subtitle { color: var(--cp-text-3); font-size: .93rem; margin-top: 2px; }
.cp-page-actions { display: flex; gap: var(--cp-space-2); flex-wrap: wrap; align-items: center; }

.cp-filter-bar, .cp-toolbar {
    display: flex; gap: var(--cp-space-2); flex-wrap: wrap; align-items: center;
    margin-bottom: var(--cp-space-3); padding: 10px var(--cp-space-3);
    background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-1);
}
.cp-filter-bar .form-control, .cp-filter-bar .form-select { max-width: 280px; }
.cp-filter-bar .form-control[type="date"] { max-width: 170px; }
.cp-filter-bar .form-check { margin: 0 4px; }
.cp-filter-bar > label { margin: 0; color: var(--cp-text-3); font-size: .86rem; }
.cp-toolbar-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.cp-toolbar-search .cp-icon { position: absolute; left: 10px; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--cp-text-3); pointer-events: none; }
.cp-toolbar-search .form-control { padding-left: 32px; max-width: none !important; }
.cp-toolbar-spacer { flex: 1; }

.cp-section, .card {
    background: var(--cp-surface); color: var(--cp-text);
    border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-1);
}
.cp-section { margin-bottom: var(--cp-space-4); }
.cp-section-header { display: flex; align-items: center; gap: var(--cp-space-2); justify-content: space-between; padding: 11px var(--cp-space-4); border-bottom: 1px solid var(--cp-border); }
.cp-section-header h2 { margin: 0; font-size: 1rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.cp-section-header h2 .cp-icon { color: var(--cp-primary); }
.cp-section-header .cp-section-hint { color: var(--cp-text-3); font-size: .86rem; }
.cp-section-body { padding: var(--cp-space-4); }
.cp-section-body > :last-child { margin-bottom: 0; }
.cp-section-flush .cp-section-body { padding: 0; }
.card-header, .card-footer { background: var(--cp-surface-2); border-color: var(--cp-border); }
.card-title { font-weight: 650; }

/* ================================================================ forms */
.cp-form { max-width: 1080px; }
.cp-form > .mb-2 > .form-control, .cp-form > .mb-3 > .form-control,
.cp-form > .mb-2 > .form-select, .cp-form > .mb-3 > .form-select,
.cp-form > .cp-field > .form-control, .cp-form > .cp-field > .form-select,
.cp-form > .cp-field > .input-group { max-width: 36rem; }
.cp-form > .mb-2 > textarea.form-control, .cp-form > .mb-3 > textarea.form-control, .cp-form > .cp-field > textarea.form-control { max-width: none; }
fieldset > legend.h6, fieldset > legend { font-size: .82rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-text-3); margin: var(--cp-space-3) 0 var(--cp-space-2); padding-bottom: 6px; border-bottom: 1px solid var(--cp-border); float: none; width: 100%; }

.form-label, .col-form-label { font-size: .86rem; font-weight: 600; color: var(--cp-text-2); margin-bottom: 4px; }
.form-label.small, label.small { font-size: .82rem; }
.cp-required::after, .form-label.required::after { content: " *"; color: var(--cp-danger); font-weight: 700; }
.form-text, .cp-hint { color: var(--cp-text-3); font-size: .82rem; margin-top: 3px; }
.cp-field { margin-bottom: var(--cp-space-3); }
.row > .cp-field { margin-bottom: var(--cp-space-2); }
.cp-field:focus-within > .form-label, .mb-2:focus-within > .form-label, .mb-3:focus-within > .form-label { color: var(--cp-primary); }

.form-control, .form-select {
    min-height: var(--cp-control-h);
    padding: 5px 10px;
    font-size: .95rem;
    color: var(--cp-text);
    background-color: var(--cp-field-bg);
    border: 1px solid var(--cp-border-strong);
    border-radius: var(--cp-radius);
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.form-select { padding-right: 30px; background-position: right 9px center; }
.form-control-sm, .form-select-sm { min-height: var(--cp-control-h-sm); padding-top: 3px; padding-bottom: 3px; font-size: .9rem; border-radius: var(--cp-radius); }
.form-select-sm { padding-left: 8px; }
textarea.form-control { min-height: 64px; line-height: 1.45; }
.form-control::placeholder { color: var(--cp-text-3); opacity: .8; }
.form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: var(--cp-text-3); }
.form-control:focus, .form-select:focus {
    color: var(--cp-text);
    background-color: var(--cp-field-focus-bg);
    border-color: var(--cp-primary);
    box-shadow: var(--cp-focus-ring);
    outline: 0;
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--cp-field-disabled-bg); color: var(--cp-text-2); opacity: 1; }
.form-control-plaintext { color: var(--cp-text); padding: 5px 0; min-height: var(--cp-control-h); }
input[type="number"].form-control, .cp-money input, input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { opacity: .35; }
input[type="date"].form-control, input[type="datetime-local"].form-control, input[type="time"].form-control { font-variant-numeric: tabular-nums; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
input[type="color"].form-control { padding: 3px; width: 56px; }
.form-control.input-validation-error, .form-select.input-validation-error, .was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--cp-danger); background-color: var(--cp-danger-soft); }
.form-control.input-validation-error:focus, .form-select.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(192, 49, 42, .2); }
.field-validation-error { display: block; color: var(--cp-danger); font-size: .82rem; margin-top: 3px; font-weight: 500; }
.field-validation-error::before { content: "! "; font-weight: 700; }
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

.form-select:not([multiple]) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2366758b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6l5 5 5-5'/%3e%3c/svg%3e"); background-size: 12px 12px; }

.form-check { min-height: 1.4rem; }
.form-check-input { width: 1.05em; height: 1.05em; margin-top: .2em; background-color: var(--cp-field-bg); border: 1px solid var(--cp-border-strong); }
.form-check-input:checked { background-color: var(--cp-primary); border-color: var(--cp-primary); }
.form-check-input:focus { border-color: var(--cp-primary); box-shadow: var(--cp-focus-ring); }
.form-check-label { color: var(--cp-text); }
.form-switch .form-check-input { width: 2em; }

.input-group-text { background: var(--cp-surface-3); border-color: var(--cp-border-strong); color: var(--cp-text-3); font-size: .9rem; padding: 0 10px; }
.input-group > .form-control:focus, .input-group > .form-select:focus { z-index: 3; }
.input-group-sm > .input-group-text { font-size: .84rem; }

/* money field: currency prefix */
.cp-money .input-group-text { font-weight: 600; min-width: 32px; justify-content: center; }

/* date field: quick "today" button */
.cp-date .btn { border-color: var(--cp-border-strong); color: var(--cp-text-3); background: var(--cp-surface-2); font-size: .82rem; }
.cp-date .btn:hover { color: var(--cp-primary); background: var(--cp-primary-soft); }

/* sticky action bar at the end of an entry form */
.cp-form-actions {
    position: sticky; bottom: 34px; z-index: 5;
    display: flex; gap: var(--cp-space-2); align-items: center; flex-wrap: wrap;
    margin-top: var(--cp-space-4); padding: 10px var(--cp-space-3);
    background: color-mix(in srgb, var(--cp-surface) 92%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-2);
}
.cp-form-actions .cp-form-actions-hint { margin-left: auto; color: var(--cp-text-3); font-size: .8rem; }

/* ================================================================ lookup (searchable combobox) */
.cp-lookup { position: relative; }
.cp-lookup-input { padding-right: 30px !important; }
.cp-lookup-icon { position: absolute; right: 9px; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--cp-text-3); pointer-events: none; }
/* The list is moved to <body> and placed with fixed coordinates by data-entry.js, so a table or card that
   scrolls or clips never hides it. */
.cp-lookup-menu {
    position: fixed; z-index: 1080; left: 0; top: 0;
    min-width: 260px; max-height: 300px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
    background: var(--cp-surface); border: 1px solid var(--cp-border-strong); border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-2);
}
.cp-lookup-menu[hidden] { display: none; }
.cp-lookup-option { display: flex; gap: 10px; align-items: baseline; padding: 6px 9px; border-radius: var(--cp-radius-sm); cursor: pointer; color: var(--cp-text); font-size: .92rem; }
.cp-lookup-option .cp-lookup-value { font-family: var(--cp-font-mono); font-size: .85em; color: var(--cp-primary-soft-text); white-space: nowrap; }
.cp-lookup-option .cp-lookup-label { color: var(--cp-text-2); overflow: hidden; text-overflow: ellipsis; }
.cp-lookup-option[aria-selected="true"] { background: var(--cp-primary); color: var(--cp-on-primary); }
.cp-lookup-option[aria-selected="true"] .cp-lookup-value, .cp-lookup-option[aria-selected="true"] .cp-lookup-label { color: var(--cp-on-primary); }
.cp-lookup-option mark { background: transparent; color: inherit; font-weight: 700; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.cp-lookup-status { padding: 8px 10px; color: var(--cp-text-3); font-size: .86rem; }
.cp-select-search { position: relative; }
.cp-select-search > select.form-select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cp-select-search > .cp-lookup-input { cursor: default; }
.cp-select-search > .cp-lookup-input:focus { cursor: text; }
.cp-select-inline { display: inline-block; vertical-align: middle; }
.cp-filter-bar .cp-select-search, .cp-toolbar .cp-select-search { min-width: 190px; max-width: 280px; }
.cp-select-search .cp-lookup-icon { width: 12px; height: 12px; margin-top: -6px; }

/* ================================================================ buttons */
.btn { font-weight: 550; border-radius: var(--cp-radius); padding: 5px 14px; font-size: .95rem; min-height: var(--cp-control-h); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s; }
.btn-sm { padding: 3px 10px; font-size: .88rem; min-height: var(--cp-control-h-sm); }
.btn-link { min-height: 0; }
form.d-inline .btn, td .btn { vertical-align: middle; }
.btn:focus-visible, .btn:focus { box-shadow: var(--cp-focus-ring); }
.btn-primary { background: var(--cp-primary); border-color: var(--cp-primary); color: var(--cp-on-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--cp-primary-hover); border-color: var(--cp-primary-hover); color: var(--cp-on-primary); }
.btn-primary:disabled { background: var(--cp-primary); border-color: var(--cp-primary); opacity: .55; }
.btn-success { background: var(--cp-success); border-color: var(--cp-success); color: #fff; }
.btn-success:hover { filter: brightness(1.08); color: #fff; }
.btn-danger { background: var(--cp-danger); border-color: var(--cp-danger); }
.btn-outline-secondary, .btn-secondary, .btn-light { color: var(--cp-text-2); border-color: var(--cp-border-strong); background: var(--cp-surface); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-secondary:hover, .btn-light:hover { color: var(--cp-text); background: var(--cp-surface-3); border-color: var(--cp-border-strong); }
.btn-outline-primary { color: var(--cp-primary); border-color: color-mix(in srgb, var(--cp-primary) 45%, transparent); background: var(--cp-surface); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { color: var(--cp-primary-soft-text); background: var(--cp-primary-soft); border-color: var(--cp-primary); }
.btn-outline-danger { color: var(--cp-danger); border-color: color-mix(in srgb, var(--cp-danger) 45%, transparent); background: var(--cp-surface); }
.btn-outline-danger:hover, .btn-outline-danger:focus { color: var(--cp-danger); background: var(--cp-danger-soft); border-color: var(--cp-danger); }
.btn-outline-success { color: var(--cp-success); border-color: color-mix(in srgb, var(--cp-success) 45%, transparent); }
.btn-outline-success:hover { color: var(--cp-success); background: var(--cp-success-soft); border-color: var(--cp-success); }
.btn-outline-light { color: var(--cp-text-2); border-color: var(--cp-border); }
.btn-outline-light:hover { background: var(--cp-surface-3); color: var(--cp-text); }
.btn-link { color: var(--cp-link); font-weight: 500; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) transparent; border-radius: 50%; animation: cp-spin .7s linear infinite; }
.btn-outline-secondary[aria-busy="true"]::after, .btn-outline-primary[aria-busy="true"]::after { border-color: var(--cp-primary) var(--cp-primary) var(--cp-primary) transparent; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
.btn-close { filter: none; }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ================================================================ tables and lists */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--cp-row-stripe);
    --bs-table-striped-color: var(--cp-text);
    --bs-table-hover-bg: var(--cp-row-hover);
    --bs-table-hover-color: var(--cp-text);
    --bs-table-active-bg: var(--cp-primary-soft);
    --bs-table-accent-bg: transparent;
    color: var(--cp-text);
    border-color: var(--cp-border);
    margin-bottom: var(--cp-space-3);
}
.table > :not(:first-child) { border-top: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--cp-border); padding: 7px 10px; }
.table-sm > :not(caption) > * > * { padding: 7px 9px; }
.table > thead > tr > th, .table > thead th {
    background: var(--cp-surface-2); color: var(--cp-text-3);
    font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap; border-bottom: 1px solid var(--cp-border-strong); vertical-align: bottom;
}
.table > tfoot { font-weight: 650; background: var(--cp-surface-2); }
.table > tfoot > tr > * { border-top: 1px solid var(--cp-border-strong); border-bottom: 0; }
.table-light, .table-light > th, .table-light > td { --bs-table-bg: var(--cp-surface-2); color: var(--cp-text); border-color: var(--cp-border); }
.table-bordered > :not(caption) > * > * { border-color: var(--cp-border); }
.table-borderless > :not(caption) > * > * { border-bottom-width: 0; }
.table-borderless > thead > tr > th { background: transparent; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--cp-row-hover); }
.table td.text-muted { color: var(--cp-text-3) !important; }
.table a { font-weight: 500; text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table code { font-size: .88em; white-space: nowrap; }

/* list pages: a table on its own becomes a card */
.table-responsive {
    background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-1); margin-bottom: var(--cp-space-3);
}
.table-responsive > .table { margin-bottom: 0; }
.table-responsive > .table > thead > tr:first-child > th:first-child { border-top-left-radius: var(--cp-radius-lg); }
.table-responsive > .table > thead > tr:first-child > th:last-child { border-top-right-radius: var(--cp-radius-lg); }
.table-responsive > .table > tbody > tr:last-child > * { border-bottom: 0; }
.card .table-responsive, .cp-section .table-responsive { border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.cp-table th, .cp-nowrap { white-space: nowrap; }
.cp-table tbody tr.text-muted > * { color: var(--cp-text-3); }
.cp-table tbody tr[data-href] { cursor: pointer; }
.cp-table tbody tr.cp-row-focus > * { background: var(--cp-primary-soft); }

.cp-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--cp-space-3); flex-wrap: wrap; padding: 4px 2px; }
.cp-pager-info { color: var(--cp-text-3); font-size: .88rem; }
.pagination { gap: 3px; }
.page-link { color: var(--cp-text-2); background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius) !important; min-width: 32px; text-align: center; padding: 4px 10px; }
.page-link:hover { background: var(--cp-surface-3); color: var(--cp-text); border-color: var(--cp-border-strong); }
.page-link:focus { box-shadow: var(--cp-focus-ring); }
.page-item.active .page-link { background: var(--cp-primary); border-color: var(--cp-primary); color: var(--cp-on-primary); }
.page-item.disabled .page-link { background: var(--cp-surface-2); color: var(--cp-text-3); border-color: var(--cp-border); opacity: .6; }

.cp-empty-state {
    display: block; padding: 36px 24px; text-align: center;
    border: 1px dashed var(--cp-border-strong); border-radius: var(--cp-radius-lg);
    color: var(--cp-text-3); background: var(--cp-surface);
}
.cp-empty-state::before {
    content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%;
    background: var(--cp-surface-3) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366758b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 7h16M4 12h10M4 17h7'/%3e%3c/svg%3e") center / 20px no-repeat;
}

.cp-detail-list { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 18px; margin: 0; }
.cp-detail-list.row { display: flex; }
.cp-detail-list dt { color: var(--cp-text-3); font-weight: 500; font-size: .9rem; }
.cp-detail-list dd { margin: 0; color: var(--cp-text); }
.cp-steps li { margin-bottom: 8px; }
.cp-key code { font-size: 1.05rem; letter-spacing: .05em; }
.cp-recovery-codes { columns: 2; list-style: none; padding: 0; }
.cp-org-picker .btn { padding: 10px 14px; }

.cp-perm-group { border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 10px 14px; margin-bottom: 12px; background: var(--cp-surface); }
.cp-perm-group legend { font-size: .9rem; font-weight: 650; float: none; width: auto; padding: 0 4px; margin: 0 0 4px; text-transform: none; letter-spacing: 0; color: var(--cp-text); border: 0; }
.cp-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 16px; }

/* KPI tiles (dashboard) */
.cp-kpi-label { color: var(--cp-text-3); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.cp-kpi-value { font-size: 1.85rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }

/* ================================================================ badges, alerts, misc components */
.badge { font-weight: 600; font-size: .76em; padding: .32em .6em; border-radius: 999px; letter-spacing: .01em; }
.text-bg-secondary, .badge.bg-secondary { background: var(--cp-neutral-soft) !important; color: var(--cp-text-2) !important; }
.text-bg-light, .badge.bg-light { background: var(--cp-surface-3) !important; color: var(--cp-text-2) !important; border: 1px solid var(--cp-border); }
.text-bg-primary, .badge.bg-primary { background: var(--cp-primary-soft) !important; color: var(--cp-primary-soft-text) !important; }
.text-bg-success, .badge.bg-success { background: var(--cp-success-soft) !important; color: var(--cp-success) !important; }
.text-bg-warning, .badge.bg-warning { background: var(--cp-warning-soft) !important; color: var(--cp-warning) !important; }
.text-bg-danger, .badge.bg-danger { background: var(--cp-danger-soft) !important; color: var(--cp-danger) !important; }
.text-bg-info, .badge.bg-info { background: var(--cp-info-soft) !important; color: var(--cp-info) !important; }
.text-bg-dark, .badge.bg-dark { background: var(--cp-text-2) !important; color: var(--cp-surface) !important; }
.cp-status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }

.alert {
    position: relative; border: 1px solid var(--cp-border); border-left-width: 4px; border-radius: var(--cp-radius);
    background: var(--cp-surface); color: var(--cp-text); padding: 10px 14px 10px 40px; box-shadow: var(--cp-shadow-1);
}
.alert::before { content: ""; position: absolute; left: 13px; top: 12px; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--cp-alert-icon) center / contain no-repeat; mask: var(--cp-alert-icon) center / contain no-repeat; }
.alert-success { --cp-alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M8 12.5l2.7 2.7L16 9.8'/%3e%3c/svg%3e"); border-color: color-mix(in srgb, var(--cp-success) 30%, transparent); border-left-color: var(--cp-success); background: var(--cp-success-soft); }
.alert-success::before { color: var(--cp-success); }
.alert-danger { --cp-alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M12 7.5v5.5M12 16.5v.01'/%3e%3c/svg%3e"); border-color: color-mix(in srgb, var(--cp-danger) 30%, transparent); border-left-color: var(--cp-danger); background: var(--cp-danger-soft); }
.alert-danger::before { color: var(--cp-danger); }
.alert-warning { --cp-alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 3.5l9.5 16.5h-19z'/%3e%3cpath d='M12 10v4M12 17v.01'/%3e%3c/svg%3e"); border-color: color-mix(in srgb, var(--cp-warning) 30%, transparent); border-left-color: var(--cp-warning); background: var(--cp-warning-soft); }
.alert-warning::before { color: var(--cp-warning); }
.alert-info, .alert-primary, .alert-secondary, .alert-light { --cp-alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3e%3ccircle cx='12' cy='12' r='9'/%3e%3cpath d='M12 11v5.5M12 7.5v.01'/%3e%3c/svg%3e"); border-color: color-mix(in srgb, var(--cp-info) 30%, transparent); border-left-color: var(--cp-info); background: var(--cp-info-soft); }
.alert-info::before, .alert-primary::before, .alert-secondary::before, .alert-light::before { color: var(--cp-info); }
.alert .alert-link, .alert a { color: inherit; font-weight: 600; }
.alert.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.alert.py-2::before { top: 10px; }
.alert.small { font-size: .9rem; }
.alert > :last-child { margin-bottom: 0; }

.dropdown-menu { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); box-shadow: var(--cp-shadow-2); padding: 4px; font-size: .93rem; }
.dropdown-item { color: var(--cp-text); border-radius: var(--cp-radius-sm); padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--cp-surface-3); color: var(--cp-text); }
.dropdown-item.active, .dropdown-item:active { background: var(--cp-primary); color: var(--cp-on-primary); }
.dropdown-divider { border-color: var(--cp-border); margin: 4px 0; }
.dropdown-header { color: var(--cp-text-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }

.nav-tabs { border-bottom: 1px solid var(--cp-border); gap: 2px; margin-bottom: var(--cp-space-3); }
.nav-tabs .nav-link { color: var(--cp-text-3); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; font-weight: 550; }
.nav-tabs .nav-link:hover { color: var(--cp-text); border-bottom-color: var(--cp-border-strong); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--cp-primary); background: transparent; border-bottom-color: var(--cp-primary); }
.nav-pills .nav-link.active { background: var(--cp-primary); }

.breadcrumb { font-size: .88rem; margin-bottom: var(--cp-space-2); }
.breadcrumb-item, .breadcrumb-item.active { color: var(--cp-text-3); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cp-text-3); }

.list-group-item { background: var(--cp-surface); color: var(--cp-text); border-color: var(--cp-border); }
.list-group-item-action:hover { background: var(--cp-surface-3); color: var(--cp-text); }
.modal-content { background: var(--cp-surface); color: var(--cp-text); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-2); }
.modal-header, .modal-footer { border-color: var(--cp-border); }
.progress { background: var(--cp-surface-3); border-radius: 999px; }
.progress-bar { background: var(--cp-primary); }
.accordion-item { background: var(--cp-surface); border-color: var(--cp-border); }
.accordion-button { background: var(--cp-surface); color: var(--cp-text); }
.accordion-button:not(.collapsed) { background: var(--cp-primary-soft); color: var(--cp-primary-soft-text); }

details { margin-bottom: var(--cp-space-2); }
details > summary { cursor: pointer; color: var(--cp-link); font-weight: 550; padding: 4px 0; }
details > summary:focus-visible { outline: 2px solid var(--cp-primary); outline-offset: 2px; border-radius: 3px; }
details[open] > summary { margin-bottom: var(--cp-space-2); }

/* keyboard help overlay (F1 or ?) */
.cp-keys-help { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(8, 15, 26, .45); }
.cp-keys-help[hidden] { display: none; }
.cp-keys-help-card { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow-y: auto; background: var(--cp-surface); color: var(--cp-text); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-2); padding: 18px 22px; }
.cp-keys-help-card h2 { font-size: 1.1rem; margin-bottom: 10px; }
.cp-keys-help-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: .93rem; }
.cp-keys-help-card dt { text-align: right; white-space: nowrap; font-weight: 400; }
.cp-keys-help-card dd { margin: 0; color: var(--cp-text-2); }

/* ================================================================ sign-in pages */
body.cp-auth {
    display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 16px;
    background:
        radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--cp-primary) 22%, transparent), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(14, 159, 143, .18), transparent 60%),
        var(--cp-canvas);
}
.cp-auth-card { width: 100%; max-width: 420px; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 14px; padding: 32px 32px 26px; box-shadow: var(--cp-shadow-2); }
.cp-auth-brand { display: flex; align-items: center; gap: 10px; font-size: 1.36rem; font-weight: 700; color: var(--cp-text); margin-bottom: 22px; letter-spacing: -.015em; }
.cp-auth-brand .cp-brand-mark { width: 36px; height: 36px; border-radius: 10px; }
.cp-auth-brand .cp-brand-mark svg { width: 20px; height: 20px; }
.cp-auth-card h2 { font-size: 1.2rem; }
.cp-auth-card .form-control { min-height: 40px; font-size: 1rem; }
.cp-auth-card .btn-primary.w-100 { min-height: 40px; font-size: 1rem; }
.cp-auth-brand[data-cp-reload-settings] { user-select: none; }
.cp-auth-reload { margin: -12px 0 14px; padding: 6px 10px; border-radius: var(--cp-radius); font-size: .84rem; background: var(--cp-info-soft); color: var(--cp-info); }
.cp-auth-reload-ok { background: var(--cp-success-soft); color: var(--cp-success); }
.cp-auth-reload-error { background: var(--cp-danger-soft); color: var(--cp-danger); }
.cp-auth-footer { margin-top: 18px; text-align: center; color: var(--cp-text-3); font-size: .8rem; }

/* ================================================================ lab result designer (LabTemplates/Design) */
.cp-lrd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); position: sticky; top: calc(var(--cp-topbar-h) + 4px); z-index: 20; }
.cp-lrd-tool { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--cp-text-2); margin: 0; }
.cp-lrd-tool .form-control { width: 64px; }
.cp-lrd-tool .form-select { width: auto; }
.cp-lrd-sep { width: 1px; height: 22px; background: var(--cp-border); }
.cp-lrd-status { font-size: .82rem; color: var(--cp-text-3); min-width: 10ch; font-variant-numeric: tabular-nums; }
.cp-lrd-workspace { display: grid; grid-template-columns: 220px minmax(0, 1fr) 290px; gap: 10px; align-items: start; }
.cp-lrd-panel { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 10px; position: sticky; top: calc(var(--cp-topbar-h) + 64px); max-height: calc(100vh - var(--cp-topbar-h) - 110px); overflow-y: auto; }
.cp-lrd-panel-title { font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-text-3); margin: 0 0 6px; }
.cp-lrd-hint { font-size: .82rem; color: var(--cp-text-3); margin: 0 0 8px; }
.cp-lrd-group { margin-bottom: 8px; }
.cp-lrd-group-title { font-size: .78rem; font-weight: 600; color: var(--cp-text-2); margin: 4px 0; }
.cp-lrd-tool-item { display: block; width: 100%; text-align: left; padding: 4px 8px; margin: 1px 0; font-size: .86rem; border: 1px solid transparent; border-radius: var(--cp-radius-sm); background: none; color: var(--cp-text); cursor: grab; }
.cp-lrd-tool-item:hover, .cp-lrd-tool-item:focus-visible { background: var(--cp-primary-soft); border-color: color-mix(in srgb, var(--cp-primary) 30%, transparent); color: var(--cp-primary-soft-text); outline: none; }
.cp-lrd-count { font-weight: 500; text-transform: none; letter-spacing: 0; }
.cp-lrd-outline { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.cp-lrd-outline-item { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; padding: 4px 6px; border-radius: var(--cp-radius-sm); cursor: pointer; }
.cp-lrd-outline-item:hover { background: var(--cp-surface-3); }
.cp-lrd-outline-item.selected { background: var(--cp-primary-soft); color: var(--cp-primary-soft-text); }
.cp-lrd-outline-type { color: var(--cp-text-3); }
.cp-lrd-outline-name { font-family: var(--cp-font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-lrd-outline-text { grid-column: 1 / -1; color: var(--cp-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-lrd-canvas { overflow: auto; height: calc(100vh - var(--cp-topbar-h) - 120px); min-height: 420px; padding: 16px; background: var(--cp-surface-3); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); outline: none; }
.cp-lrd-canvas:focus-visible { box-shadow: var(--cp-focus-ring); }
.cp-lrd-design-page { margin: 0; background-color: #fff; background-image: linear-gradient(#eef1f5 1px, transparent 1px), linear-gradient(90deg, #f3f5f8 1px, transparent 1px); background-size: 16px 24px; user-select: none; touch-action: none; }
.cp-lrd-el { position: absolute; box-sizing: border-box; overflow: visible; cursor: move; color: #000; line-height: 1.2; font-family: "Microsoft Sans Serif", sans-serif; font-size: 8.25pt; outline: 1px dashed rgba(11, 103, 194, .25); }
.cp-lrd-el > span:not(.cp-lrd-handle) { display: block; overflow: hidden; height: 100%; }
.cp-lrd-el:hover { outline-color: rgba(11, 103, 194, .6); }
.cp-lrd-el.selected { outline: 2px solid #0b67c2; z-index: 2; }
.cp-lrd-d-text { white-space: pre-wrap; padding: 2px; }
.cp-lrd-d-box { border: 1px solid #9aa6b5; background: #fbfcfe; padding: 1px 4px; white-space: nowrap; text-overflow: ellipsis; color: #44505f; }
.cp-lrd-d-info { color: #0b5394; padding: 2px; white-space: nowrap; text-overflow: ellipsis; }
.cp-lrd-d-check { padding: 2px; white-space: nowrap; }
.cp-lrd-d-list > span { display: block; padding: 0 2px; white-space: nowrap; }
.cp-lrd-el > span.cp-lrd-d-rule { border-top: 1px solid #000; margin-top: 1px; height: 0; }
.cp-lrd-d-break { border-top: 2px dashed #c0312a; color: #c0312a; font-size: 9px; padding-top: 1px; }
.cp-lrd-el > span.cp-lrd-d-result { display: grid; grid-template-columns: 88fr 127fr 135fr 175fr; gap: 4px; align-items: center; }
.cp-lrd-d-result > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cp-lrd-handle { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #0b67c2; border-radius: 2px; z-index: 3; }
.cp-lrd-h-n { top: -5px; left: calc(50% - 4px); cursor: ns-resize; }
.cp-lrd-h-s { bottom: -5px; left: calc(50% - 4px); cursor: ns-resize; }
.cp-lrd-h-e { right: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.cp-lrd-h-w { left: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.cp-lrd-h-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.cp-lrd-h-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.cp-lrd-h-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.cp-lrd-h-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.cp-lrd-props-group { border: 0; border-top: 1px solid var(--cp-border); margin: 0 0 6px; padding: 6px 0 0; }
.cp-lrd-props-group legend { float: none; width: auto; font-size: .8rem; font-weight: 650; color: var(--cp-text); margin: 0 0 4px; padding: 0; text-transform: none; letter-spacing: 0; border: 0; }
.cp-lrd-props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.cp-lrd-props-grid legend { grid-column: 1 / -1; }
.cp-lrd-prop { display: block; margin-bottom: 5px; font-size: .8rem; color: var(--cp-text-2); }
.cp-lrd-prop > span { display: block; margin-bottom: 2px; }
.cp-lrd-prop .form-control, .cp-lrd-prop .form-select { min-height: 28px; height: 28px; font-size: .85rem; }
.cp-lrd-prop .form-control[readonly] { background: var(--cp-field-disabled-bg); }
.cp-lrd-styles { display: flex; gap: 4px; margin-bottom: 6px; }
.cp-lrd-styles .btn { min-width: 32px; min-height: 28px; font-weight: 700; }
.cp-lrd-styles .btn.active { background: var(--cp-primary-soft); color: var(--cp-primary-soft-text); border-color: var(--cp-primary); }
.cp-lrd-choice { display: grid; grid-template-columns: 1fr auto auto; gap: 4px; align-items: center; margin-bottom: 4px; }
.cp-lrd-choice .form-control { min-height: 28px; height: 28px; }
.cp-lrd-choice-default { display: inline-flex; gap: 3px; align-items: center; font-size: .76rem; color: var(--cp-text-3); margin: 0; }
@media (max-width: 1199.98px) {
    .cp-lrd-workspace { grid-template-columns: 200px minmax(0, 1fr); }
    .cp-lrd-right { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 767.98px) {
    .cp-lrd-workspace { grid-template-columns: 1fr; }
    .cp-lrd-panel { position: static; max-height: 260px; }
    .cp-lrd-toolbar { position: static; }
}

/* ================================================================ theatre calendar (Inpatient/Theatre) */
.cp-cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.cp-cal-nav { display: flex; align-items: center; gap: 6px; }
.cp-cal-title { margin: 0 0 0 6px; font-size: 1.05rem; font-weight: 650; white-space: nowrap; }
.cp-cal-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cp-cal-filters .form-control, .cp-cal-filters .form-select { width: auto; }
.cp-cal-legend { margin: 0 0 6px; }
.cp-cal-hint { font-size: .82rem; color: var(--cp-text-3); margin: 0 0 8px; }
.cp-cal-hint span + span::before { content: " · "; }
.cp-calendar { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); overflow: hidden; box-shadow: var(--cp-shadow-1); }

/* day and week */
.cp-cal-head, .cp-cal-body { display: grid; grid-template-columns: 64px repeat(var(--cp-cal-days), minmax(110px, 1fr)); }
.cp-cal-head { position: sticky; top: 0; z-index: 7; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); }
.cp-cal-dayhead { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; color: var(--cp-text-2); text-decoration: none; border-left: 1px solid var(--cp-border); font-size: .8rem; }
.cp-cal-dayhead b { font-size: 1.15rem; color: var(--cp-text); line-height: 1.2; }
.cp-cal-dayhead small { color: var(--cp-text-3); font-size: .72rem; }
.cp-cal-dayhead:hover { background: var(--cp-surface-3); color: var(--cp-text); }
.cp-cal-dayhead.cp-cal-today b { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; background: var(--cp-primary); color: var(--cp-on-primary); }
.cp-cal-scroll { max-height: calc(100vh - var(--cp-topbar-h) - 250px); min-height: 360px; overflow-y: auto; overflow-x: auto; }
.cp-cal-body { position: relative; }
.cp-cal-gutter { display: grid; grid-template-rows: repeat(24, var(--cp-cal-hour)); }
.cp-cal-hour { font-size: .72rem; color: var(--cp-text-3); text-align: right; padding: 0 6px; transform: translateY(-.55em); font-variant-numeric: tabular-nums; }
.cp-cal-hour:first-child { visibility: hidden; }
.cp-cal-col {
    position: relative; height: calc(var(--cp-cal-rows) * var(--cp-cal-row)); border-left: 1px solid var(--cp-border); cursor: cell; touch-action: none;
    background-image: linear-gradient(to bottom, var(--cp-border) 1px, transparent 1px), linear-gradient(to bottom, var(--cp-grid) 1px, transparent 1px);
    background-size: 100% var(--cp-cal-hour), 100% var(--cp-cal-row);
}
.cp-cal-col.cp-cal-today { background-color: color-mix(in srgb, var(--cp-primary) 4%, transparent); }
.cp-cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--cp-danger); z-index: 3; pointer-events: none; }
.cp-cal-now::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--cp-danger); }
.cp-cal-event {
    position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden; padding: 3px 6px; border-radius: 6px;
    background: color-mix(in srgb, var(--cp-cal-c) 16%, var(--cp-surface)); border: 1px solid color-mix(in srgb, var(--cp-cal-c) 45%, transparent);
    border-left: 4px solid var(--cp-cal-c); color: var(--cp-text); text-decoration: none; font-size: .76rem; line-height: 1.25;
}
.cp-cal-event:hover, .cp-cal-event:focus-visible { color: var(--cp-text); box-shadow: var(--cp-shadow-2); z-index: 4; outline: none; }
.cp-cal-event:focus-visible { box-shadow: var(--cp-focus-ring), var(--cp-shadow-2); }
.cp-cal-event > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-cal-time { color: var(--cp-text-2); font-variant-numeric: tabular-nums; }
.cp-cal-who { font-weight: 650; }
.cp-cal-what { color: var(--cp-text-3); }
.cp-cal-draggable { cursor: grab; }
.cp-cal-dragging { cursor: grabbing; opacity: .85; box-shadow: var(--cp-shadow-2); z-index: 5; }
.cp-cal-saving { opacity: .6; }
.cp-cal-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.cp-cal-resize::after { content: ""; position: absolute; left: calc(50% - 10px); bottom: 2px; width: 20px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--cp-cal-c) 60%, transparent); }
.cp-cal-selection { position: absolute; left: 2px; right: 2px; z-index: 1; border-radius: 6px; background: color-mix(in srgb, var(--cp-primary) 16%, transparent); border: 1.5px dashed var(--cp-primary); color: var(--cp-primary-soft-text); font-size: .74rem; font-weight: 600; padding: 2px 6px; pointer-events: none; }
.cp-cal-popup { position: absolute; left: 4px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); box-shadow: var(--cp-shadow-2); font-size: .8rem; cursor: default; }
.cp-cal-toast { position: fixed; right: 16px; bottom: 44px; z-index: 1090; padding: 8px 12px; border-radius: var(--cp-radius); background: var(--cp-surface); color: var(--cp-text); border: 1px solid var(--cp-border); border-left: 4px solid var(--cp-success); box-shadow: var(--cp-shadow-2); font-size: .86rem; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; pointer-events: none; }
.cp-cal-toast.show { opacity: 1; transform: none; }
.cp-cal-toast-error { border-left-color: var(--cp-danger); }
.cp-cal-event.cp-s1, .cp-cal-chip.cp-s1 { --cp-cal-c: var(--cp-s1); } .cp-cal-event.cp-s2, .cp-cal-chip.cp-s2 { --cp-cal-c: var(--cp-s2); }
.cp-cal-event.cp-s3, .cp-cal-chip.cp-s3 { --cp-cal-c: var(--cp-s3); } .cp-cal-event.cp-s4, .cp-cal-chip.cp-s4 { --cp-cal-c: var(--cp-s4); }
.cp-cal-event.cp-s5, .cp-cal-chip.cp-s5 { --cp-cal-c: var(--cp-s5); } .cp-cal-event.cp-s6, .cp-cal-chip.cp-s6 { --cp-cal-c: var(--cp-s6); }
.cp-cal-event.cp-s7, .cp-cal-chip.cp-s7 { --cp-cal-c: var(--cp-s7); }
.cp-cal-event[class*="cp-s"], .cp-cal-chip[class*="cp-s"] { background-color: color-mix(in srgb, var(--cp-cal-c) 16%, var(--cp-surface)); }

/* month */
.cp-cal-month-head, .cp-cal-month-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cp-cal-month-head { background: var(--cp-surface-2); border-bottom: 1px solid var(--cp-border); }
.cp-cal-month-head > div { padding: 6px 8px; font-size: .78rem; font-weight: 600; color: var(--cp-text-3); text-transform: uppercase; letter-spacing: .04em; }
.cp-cal-cell { min-height: 112px; padding: 4px 6px 6px; border-left: 1px solid var(--cp-border); border-bottom: 1px solid var(--cp-border); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-cal-month-row > .cp-cal-cell:first-child, .cp-cal-month-head > div:first-child { border-left: 0; }
.cp-cal-other { background: var(--cp-surface-2); }
.cp-cal-other .cp-cal-daynum { color: var(--cp-text-3); }
.cp-cal-cell-head { display: flex; justify-content: space-between; align-items: center; }
.cp-cal-daynum { font-weight: 650; color: var(--cp-text); text-decoration: none; font-size: .86rem; min-width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; }
.cp-cal-today .cp-cal-daynum { background: var(--cp-primary); color: var(--cp-on-primary); }
.cp-cal-add { visibility: hidden; text-decoration: none; font-weight: 700; color: var(--cp-primary); width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 6px; }
.cp-cal-cell:hover .cp-cal-add, .cp-cal-add:focus-visible { visibility: visible; background: var(--cp-primary-soft); }
.cp-cal-chip { display: block; padding: 1px 6px; border-radius: 4px; border-left: 3px solid var(--cp-cal-c); font-size: .74rem; color: var(--cp-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-cal-chip:hover { color: var(--cp-text); filter: brightness(.96); }
.cp-cal-more { font-size: .74rem; color: var(--cp-text-3); }
@media (pointer: coarse) { .cp-cal-add { visibility: visible; } }
@media (max-width: 767.98px) {
    .cp-cal-head, .cp-cal-body { grid-template-columns: 48px repeat(var(--cp-cal-days), minmax(96px, 1fr)); }
    .cp-cal-cell { min-height: 76px; padding: 2px 3px; }
    .cp-cal-chip b { display: none; }
}
@media print { .cp-cal-toolbar, .cp-cal-hint, .cp-cal-popup { display: none !important; } .cp-cal-scroll { max-height: none; overflow: visible; } }

/* ================================================================ line-item entry (.cp-lines, line-items.js)
   One table: the header line and the entry line stay at the top while the rows scroll beneath, so the inputs line up
   under their headers. The list has a fixed height; totals sit outside it in .cp-lines-foot. */
.cp-lines {
    --cp-lines-head: 32px;
    position: relative; height: var(--cp-lines-height, clamp(250px, 42vh, 440px)); overflow: auto; overscroll-behavior: contain;
    background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg) var(--cp-radius-lg) 0 0; box-shadow: var(--cp-shadow-1);
}
.cp-lines-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.cp-lines-table > thead > tr > th, .cp-lines-table > thead > tr > td { position: sticky; z-index: 3; }
.cp-lines-table > thead > tr:first-child > th {
    top: 0; height: var(--cp-lines-head); padding: 0 8px; white-space: nowrap; vertical-align: middle;
    background: var(--cp-surface-2); border-bottom: 1px solid var(--cp-border); color: var(--cp-text-3);
    font-size: .74rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
}
.cp-lines-entry > td, .cp-lines-entry > th {
    top: var(--cp-lines-head); padding: 6px 4px; vertical-align: middle; font-weight: 400;
    background: color-mix(in srgb, var(--cp-primary) 5%, var(--cp-surface)); border-bottom: 2px solid color-mix(in srgb, var(--cp-primary) 35%, var(--cp-border));
}
.cp-lines-entry > td:first-child { padding-left: 8px; }
.cp-lines-entry > td:last-child { padding-right: 8px; }
.cp-lines-entry .form-control, .cp-lines-entry .form-select { min-height: 30px; }
.cp-lines-entry-editing > td { background: color-mix(in srgb, var(--cp-warning) 12%, var(--cp-surface)); border-bottom-color: var(--cp-warning); }
.cp-lines-show { display: block; min-height: 1.3em; padding: 0 4px; color: var(--cp-text-2); white-space: nowrap; }
.cp-lines-table > tbody > tr > td { padding: 6px 8px; vertical-align: middle; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface); }
.cp-lines-table > tbody > tr:hover > td { background: var(--cp-row-hover); }
.cp-lines-table > tbody > tr.cp-line-editing > td { background: color-mix(in srgb, var(--cp-warning) 14%, var(--cp-surface)); }
.cp-lines-table > tbody > tr.cp-line-editing > td:first-child { box-shadow: inset 3px 0 0 var(--cp-warning); }
.cp-lines-table > tbody > tr.table-warning > td { background: var(--cp-warning-soft); }
.cp-lines-empty > td { padding: 28px 12px !important; text-align: center; color: var(--cp-text-3); }
.cp-lines-table > tbody:has(> tr:not(.cp-lines-empty)) > .cp-lines-empty { display: none; }
.cp-lines-no { width: 1%; color: var(--cp-text-3); text-align: right; white-space: nowrap; }
.cp-lines-actions { width: 1%; white-space: nowrap; text-align: right; }
.cp-line-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--cp-radius); background: none; color: var(--cp-text-3); vertical-align: middle; }
.cp-line-btn:hover, .cp-line-btn:focus-visible { background: var(--cp-surface-3); border-color: var(--cp-border); color: var(--cp-text); outline: none; }
.cp-line-btn:focus-visible { box-shadow: var(--cp-focus-ring); }
.cp-line-btn-danger:hover, .cp-line-btn-danger:focus-visible { background: var(--cp-danger-soft); border-color: color-mix(in srgb, var(--cp-danger) 35%, transparent); color: var(--cp-danger); }
.cp-lines-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding: 8px 12px; margin-bottom: 14px;
    background: var(--cp-surface-2); border: 1px solid var(--cp-border); border-top: 0; border-radius: 0 0 var(--cp-radius-lg) var(--cp-radius-lg); font-size: .88rem; font-variant-numeric: tabular-nums;
}
.cp-lines-foot b { font-size: 1rem; }
@media (pointer: coarse) { .cp-line-btn { width: 38px; height: 36px; } }
@media print { .cp-lines { height: auto; overflow: visible; box-shadow: none; } .cp-lines-entry, .cp-lines-actions { display: none !important; } }

/* the pharmacy bill's drug and batch picker (drug-batch-picker.js) */
.cp-dbp { position: fixed; z-index: 1080; display: none; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-height: 320px; background: var(--cp-surface); border: 1px solid var(--cp-border-strong); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-2); overflow: hidden; font-size: .88rem; }
.cp-dbp.show { display: grid; }
.cp-dbp-col { display: flex; flex-direction: column; min-width: 0; max-height: 320px; }
.cp-dbp-batches { border-left: 1px solid var(--cp-border); }
.cp-dbp-head { flex: none; padding: 6px 10px; background: var(--cp-surface-2); border-bottom: 1px solid var(--cp-border); color: var(--cp-text-3); font-size: .72rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.cp-dbp-list { list-style: none; margin: 0; padding: 3px; overflow-y: auto; flex: 1; }
.cp-dbp-option { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: var(--cp-radius-sm); cursor: pointer; }
.cp-dbp-option.active { background: var(--cp-surface-3); }
.cp-dbp-option.current { background: var(--cp-primary); color: var(--cp-on-primary); }
.cp-dbp-option.current .cp-dbp-meta { color: inherit; opacity: .85; }
.cp-dbp-batch-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 66px 72px; gap: 8px; font-variant-numeric: tabular-nums; }
.cp-dbp-batch-row > span:nth-child(n+3) { text-align: right; }
.cp-dbp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dbp-meta { color: var(--cp-text-3); font-size: .8rem; white-space: nowrap; }
.cp-dbp-auto { grid-column: 1 / -1; font-style: italic; }
.cp-dbp-expired { color: var(--cp-danger); cursor: not-allowed; }
.cp-dbp-empty { padding: 14px 10px; color: var(--cp-text-3); text-align: center; }
@media (max-width: 575.98px) { .cp-dbp { grid-template-columns: 1fr; max-height: 70vh; overflow-y: auto; } .cp-dbp-batches { border-left: 0; border-top: 1px solid var(--cp-border); } }

/* ================================================================ discharge screen */
.cp-discharge-tabs { padding: 12px; margin-bottom: 16px; background: var(--cp-surface); border: 1px solid var(--cp-border); border-top: 0; border-radius: 0 0 var(--cp-radius-lg) var(--cp-radius-lg); }
.cp-doc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.cp-doc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cp-border); }
.tox-tinymce-aux { z-index: 1090; }

/* ================================================================ list row actions (cp-row-menu) */
.cp-actions-col { width: 1%; white-space: nowrap; text-align: right; }
td.cp-actions-col { padding-top: 2px !important; padding-bottom: 2px !important; }
.cp-row-actions { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.cp-row-actions > .btn { padding: 2px 8px; font-size: .82rem; }
.cp-row-menu { display: inline-block; }
.cp-more {
    display: inline-grid; place-items: center; width: 30px; height: 28px; padding: 0;
    border: 1px solid transparent; border-radius: var(--cp-radius); background: transparent; color: var(--cp-text-3);
}
.cp-more:hover, .cp-more[aria-expanded="true"] { background: var(--cp-surface-3); border-color: var(--cp-border); color: var(--cp-text); }
.cp-more:focus-visible { outline: none; box-shadow: var(--cp-focus-ring); color: var(--cp-text); }
/* fixed from the first frame (Popper also uses the fixed strategy), so opening never lays the menu out inside a scrolling table */
.cp-row-menu .dropdown-menu { min-width: 190px; position: fixed; max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.cp-row-menu .dropdown-item .cp-icon { color: var(--cp-text-3); }
.cp-row-menu .dropdown-item.text-danger, .cp-row-menu .dropdown-item.text-danger .cp-icon { color: var(--cp-danger) !important; }
.cp-row-menu .dropdown-item.text-danger:hover, .cp-row-menu .dropdown-item.text-danger:focus { background: var(--cp-danger-soft); }
.cp-row-menu form { margin: 0; }
.cp-row-menu button.dropdown-item { width: 100%; text-align: left; border: 0; background: none; }
.cp-row-menu button.dropdown-item:hover, .cp-row-menu button.dropdown-item:focus { background: var(--cp-surface-3); }
@media (pointer: coarse) { .cp-more { width: 40px; height: 36px; } }

/* ================================================================ dashboard */
.cp-dash-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cp-dash-eyebrow { margin: 0; font-size: .82rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-primary); }
.cp-dash-title { margin: 2px 0 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -.025em; }
.cp-dash-date { margin: 2px 0 0; color: var(--cp-text-3); }
.cp-dash-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-dash-tools .form-control { width: auto; }
.cp-dash-status { font-size: .82rem; color: var(--cp-text-3); min-width: 9ch; }
.cp-spinning .cp-icon { animation: cp-spin .8s linear infinite; }

.cp-dash-enter { animation: cp-rise .35s ease-out both; }
@keyframes cp-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* KPI tiles */
.cp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cp-kpi {
    position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 148px; padding: 16px 18px 14px;
    background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 14px; box-shadow: var(--cp-shadow-1);
    color: var(--cp-text); text-decoration: none; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.cp-kpi:hover { color: var(--cp-text); transform: translateY(-2px); box-shadow: var(--cp-shadow-2); border-color: var(--cp-border-strong); }
a.cp-kpi:focus-visible { outline: none; box-shadow: var(--cp-focus-ring), var(--cp-shadow-2); }
.cp-kpi-hero {
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--cp-s1) 16%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--cp-s1) 5%, var(--cp-surface)), var(--cp-surface));
    border-color: color-mix(in srgb, var(--cp-s1) 28%, var(--cp-border));
}
.cp-kpi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cp-kpi-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--cp-s1); background: color-mix(in srgb, var(--cp-s1) 13%, transparent); }
.cp-kpi-icon-2 { color: var(--cp-s2); background: color-mix(in srgb, var(--cp-s2) 13%, transparent); }
.cp-kpi-icon-3 { color: var(--cp-s3); background: color-mix(in srgb, var(--cp-s3) 13%, transparent); }
.cp-kpi-icon-4 { color: var(--cp-s7); background: color-mix(in srgb, var(--cp-s7) 13%, transparent); }
.cp-kpi-icon-5 { color: var(--cp-s5); background: color-mix(in srgb, var(--cp-s5) 15%, transparent); }
.cp-kpi .cp-kpi-value { font-size: 1.75rem; }
.cp-kpi-hero .cp-kpi-value { font-size: 2.05rem; }
.cp-kpi-value small { font-size: .9rem; font-weight: 500; color: var(--cp-text-3); letter-spacing: 0; }
.cp-kpi-sub { font-size: .85rem; color: var(--cp-text-3); }
.cp-delta { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; margin-top: 2px; padding: 1px 8px 1px 5px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.cp-delta-up { color: var(--cp-success); background: var(--cp-success-soft); }
.cp-delta-down { color: var(--cp-danger); background: var(--cp-danger-soft); }
.cp-delta-flat { color: var(--cp-text-3); background: var(--cp-surface-3); padding-left: 8px; }
.cp-kpi .cp-spark { position: absolute; right: 14px; top: 16px; width: 96px; height: 36px; pointer-events: none; }
.cp-meter { display: block; height: 6px; margin-top: auto; border-radius: 999px; background: var(--cp-surface-3); overflow: hidden; }
.cp-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--cp-s3); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.cp-meter-2 > span { background: var(--cp-s5); }

/* panels */
.cp-dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.cp-panel {
    grid-column: span 6; min-width: 0; display: flex; flex-direction: column; padding: 16px 18px;
    background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 14px; box-shadow: var(--cp-shadow-1);
}
.cp-panel-wide { grid-column: span 8; }
.cp-panel-wide + .cp-panel { grid-column: span 4; }
.cp-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cp-panel-title { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.cp-panel-sub { margin: 2px 0 0; font-size: .83rem; color: var(--cp-text-3); }
.cp-panel-link { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cp-panel-link:hover .cp-icon { transform: translateX(2px); }
.cp-panel-link .cp-icon { transition: transform .15s; }
.cp-dash-table td { vertical-align: middle; }
.cp-dash-patient { display: block; font-weight: 550; }
.cp-dash-emr { display: block; font-size: .78rem; color: var(--cp-text-3); }

/* legend and swatches (labels stay in text colours; the swatch carries the identity) */
.cp-s1 { background: var(--cp-s1); } .cp-s2 { background: var(--cp-s2); } .cp-s3 { background: var(--cp-s3); } .cp-s4 { background: var(--cp-s4); }
.cp-s5 { background: var(--cp-s5); } .cp-s6 { background: var(--cp-s6); } .cp-s7 { background: var(--cp-s7); }
.cp-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; flex-shrink: 0; vertical-align: 0; }
.cp-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: -4px 0 10px; padding: 0; font-size: .82rem; color: var(--cp-text-2); }
.cp-legend li { display: inline-flex; align-items: center; }
.cp-legend-list { flex-direction: column; gap: 0; margin: 12px 0 0; font-size: .88rem; }
.cp-legend-list li { display: flex; gap: 2px; padding: 6px 0; border-top: 1px solid var(--cp-border); }
.cp-legend-list li:first-child { border-top: 0; }
.cp-legend-list b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cp-text); }
.cp-legend-meta { color: var(--cp-text-3); font-size: .8rem; margin-left: 8px; }

/* charts */
.cp-chart { position: relative; width: 100%; outline: none; }
.cp-chart:focus-visible { box-shadow: var(--cp-focus-ring); border-radius: var(--cp-radius); }
.cp-chart-lg { height: 270px; }
[data-chart="columns"] { height: 230px; }
.cp-chart-donut { display: flex; justify-content: center; min-height: 200px; }
.cp-chart-svg { display: block; overflow: visible; }
.cp-grid line { stroke: var(--cp-grid); stroke-width: 1; shape-rendering: crispEdges; }
.cp-grid line.cp-baseline { stroke: var(--cp-border-strong); }
.cp-axis { fill: var(--cp-text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.cp-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cp-line-spark { stroke-width: 1.75; }
.cp-dot { stroke: var(--cp-surface); stroke-width: 2; }
.cp-hover-dot, .cp-cross { opacity: 0; transition: opacity .12s; pointer-events: none; }
.cp-cross { stroke: var(--cp-border-strong); stroke-width: 1; }
.cp-hovering .cp-hover-dot, .cp-hovering .cp-cross { opacity: 1; }
.cp-hit { fill: transparent; cursor: crosshair; }
.cp-bar { transition: opacity .15s; }
.cp-col-group.cp-dim .cp-bar { opacity: .35; }
.cp-enter-draw { transition: stroke-dashoffset 1s cubic-bezier(.3, .7, .2, 1) var(--cp-delay, 0ms); }
.cp-enter-fade { animation: cp-fade .9s ease-out .25s both; }
.cp-enter-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: cp-grow .6s cubic-bezier(.2, .8, .2, 1) var(--cp-delay, 0ms) both; }
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.cp-hbars { display: flex; flex-direction: column; gap: 9px; }
.cp-hbar { display: grid; grid-template-columns: minmax(80px, 32%) 1fr auto; align-items: center; gap: 10px; font-size: .86rem; padding: 2px 4px; margin: 0 -4px; border-radius: var(--cp-radius-sm); }
.cp-hbar.cp-active { background: var(--cp-surface-2); }
.cp-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-text-2); }
.cp-hbar-track { position: relative; height: 12px; }
.cp-hbar-fill { display: flex; gap: 2px; height: 100%; min-width: 2px; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.cp-hbar-seg { height: 100%; min-width: 2px; }
.cp-hbar-seg:first-child { border-radius: 0; }
.cp-hbar-seg:last-child { border-radius: 0 4px 4px 0; }
.cp-hbar-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cp-text); min-width: 4ch; text-align: right; }

.cp-donut-track { fill: none; stroke: var(--cp-surface-3); }
.cp-donut-seg { fill: none; transition: stroke-dasharray .9s cubic-bezier(.3, .7, .2, 1), opacity .15s; cursor: pointer; }
.cp-donut-seg.cp-dim { opacity: .3; }
.cp-donut-value { fill: var(--cp-text); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-donut-label { fill: var(--cp-text-3); font-size: 12px; }

.cp-tip {
    position: absolute; z-index: 5; min-width: 150px; max-width: 260px; padding: 8px 10px; pointer-events: none;
    background: var(--cp-surface); color: var(--cp-text); border: 1px solid var(--cp-border); border-radius: 8px; box-shadow: var(--cp-shadow-2);
    font-size: .82rem; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.cp-tip.show { opacity: 1; transform: none; }
.cp-tip-title { font-weight: 650; margin-bottom: 4px; }
.cp-tip-row { display: flex; align-items: center; gap: 2px; padding: 1px 0; }
.cp-tip-row b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.cp-tip-name { color: var(--cp-text-2); }

.cp-chart-table { margin-top: 10px; font-size: .85rem; }
.cp-chart-table summary { display: inline-block; cursor: pointer; color: var(--cp-text-3); font-size: .8rem; font-weight: 600; }
.cp-chart-table summary:hover { color: var(--cp-link); }
.cp-chart-table[open] summary { margin-bottom: 6px; }

/* skeleton placeholders */
.cp-skel-card { gap: 12px; }
.cp-skel {
    display: block; border-radius: 6px;
    background: linear-gradient(90deg, var(--cp-surface-3) 0%, var(--cp-surface-2) 40%, var(--cp-surface-3) 80%) 0 0 / 300% 100%;
    animation: cp-shimmer 1.4s ease-in-out infinite;
}
.cp-skel-line { height: 12px; }
.cp-skel-value { height: 28px; width: 55%; }
.cp-skel-circle { width: 32px; height: 32px; border-radius: 10px; }
.cp-skel-chart { height: 220px; border-radius: 10px; }
.cp-skel-donut { width: 170px; height: 170px; border-radius: 50%; margin: 10px auto; }
.cp-skel-bar { height: 12px; }
@keyframes cp-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* empty states */
.cp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; margin: auto 0; }
.cp-empty-compact { padding: 18px 12px 12px; }
.cp-empty-art { width: 132px; height: 106px; margin-bottom: 8px; }
.cp-empty-compact .cp-empty-art { width: 104px; height: 84px; }
.cp-empty-halo { fill: color-mix(in srgb, var(--cp-primary) 8%, transparent); }
.cp-empty-shadow { fill: color-mix(in srgb, var(--cp-text) 7%, transparent); }
.cp-empty-card { fill: var(--cp-surface); stroke: var(--cp-border-strong); stroke-width: 1.2; }
.cp-empty-icon { stroke: var(--cp-primary); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cp-empty-dot-1 { fill: var(--cp-s3); } .cp-empty-dot-2 { fill: var(--cp-s4); } .cp-empty-dot-3 { fill: var(--cp-s5); }
.cp-empty-spark { stroke: var(--cp-s1); stroke-width: 1.8; stroke-linecap: round; }
.cp-empty-art .cp-empty-card, .cp-empty-art .cp-empty-icon { animation: cp-float 4s ease-in-out infinite; }
@keyframes cp-float { 50% { transform: translateY(-3px); } }
.cp-empty-title { margin: 0 0 4px; font-weight: 650; font-size: 1.05rem; color: var(--cp-text); }
.cp-empty-compact .cp-empty-title { font-size: .95rem; }
.cp-empty-text { margin: 0 0 14px; max-width: 42ch; color: var(--cp-text-3); font-size: .9rem; }
.cp-empty .btn { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 1199.98px) {
    .cp-panel, .cp-panel-wide, .cp-panel-wide + .cp-panel { grid-column: span 12; }
    .cp-panel-wide + .cp-panel { grid-column: span 12; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .cp-panel:not(.cp-panel-wide) { grid-column: span 6; }
}
@media (max-width: 575.98px) {
    .cp-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cp-kpi { min-height: 0; padding: 12px; }
    .cp-kpi-hero { grid-column: 1 / -1; }
    .cp-kpi .cp-kpi-value { font-size: 1.3rem; }
    .cp-kpi-hero .cp-kpi-value { font-size: 1.7rem; }
    .cp-kpi:not(.cp-kpi-hero) .cp-spark { display: none; }
    .cp-kpi-sub { font-size: .78rem; }
    .cp-dash-title { font-size: 1.4rem; }
    .cp-dash-tools { width: 100%; }
    .cp-dash-tools .form-control { flex: 1; }
    .cp-panel { padding: 14px; }
    .cp-chart-lg { height: 220px; }
}

/* ================================================================ sidebar: icon rail on desktop (html[data-nav="rail"]) */
.cp-rail-toggle { display: none; }
@media (min-width: 992px) {
    .cp-rail-toggle { display: inline-flex; }
    .cp-sidebar { transition: width .2s ease, margin .2s ease, box-shadow .2s ease; z-index: 1020; }
    :root[data-nav="rail"] .cp-sidebar { width: 64px; overflow: hidden; }
    :root[data-nav="rail"] .cp-sidebar:hover, :root[data-nav="rail"] .cp-sidebar:focus-within {
        width: var(--cp-sidebar-width); margin-right: calc(64px - var(--cp-sidebar-width)); box-shadow: var(--cp-shadow-2); transition-delay: .12s;
    }
    :root[data-nav="rail"] .cp-sidebar:not(:hover):not(:focus-within) .cp-nav-group-title > span,
    :root[data-nav="rail"] .cp-sidebar:not(:hover):not(:focus-within) .cp-chevron,
    :root[data-nav="rail"] .cp-sidebar:not(:hover):not(:focus-within) .cp-nav-list,
    :root[data-nav="rail"] .cp-sidebar:not(:hover):not(:focus-within) .cp-nav-search kbd { display: none; }
    :root[data-nav="rail"] .cp-sidebar:not(:hover):not(:focus-within) .cp-nav-search input { padding: 0; color: transparent; cursor: pointer; }
    :root[data-nav="rail"] .cp-sidebar:not(:hover):not(:focus-within) .cp-nav-search input::placeholder { color: transparent; }
    :root[data-nav="rail"] .cp-sidebar:not(:hover):not(:focus-within) .cp-nav-group-title { justify-content: center; padding: 9px 0; margin: 2px 10px; width: auto; border-radius: var(--cp-radius); }
    :root[data-nav="rail"] .cp-sidebar:not(:hover):not(:focus-within) .cp-nav-group-title:hover { background: var(--cp-sidebar-hover); }
    :root[data-nav="rail"] .cp-sidebar:not(:hover):not(:focus-within) .cp-nav-group:has(.cp-nav-link.active) .cp-nav-group-title { background: var(--cp-sidebar-active); color: #fff; }
    :root[data-nav="rail"] .cp-nav-group-title > .cp-icon:first-child { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-kpi, .cp-meter > span, .cp-hbar-fill, .cp-donut-seg, .cp-enter-draw, .cp-tip { transition: none; }
    .cp-skel, .cp-enter-fade, .cp-enter-grow, .cp-dash-enter, .cp-empty-art *, .cp-spinning .cp-icon { animation: none; }
}
@media print {
    .cp-kpi, .cp-panel { box-shadow: none; break-inside: avoid; }
    .cp-dash-tools, .cp-chart-table summary, .cp-tip, .cp-empty .btn { display: none !important; }
    .cp-chart-table > div { display: block; }
}

/* ================================================================ inpatient patient list / ward view
   Legacy colour key (UI/InPatient/PatientList and WardView): free light cyan, discharging light yellow (pale violet red
   on the ward view), bed not ready orange red, new admission without a bed light gray, occupied white on the list and
   light green on the ward view, medico-legal misty rose. Each state is also written in words. */
:root {
    --cp-bed-free: #dcf6f6; --cp-bed-free-edge: #1aa3a3;
    --cp-bed-discharging: #fbf4c9; --cp-bed-discharging-edge: #c9a400;
    --cp-bed-notready: #fde0d3; --cp-bed-notready-edge: #e5532a;
    --cp-bed-new: #eceff3; --cp-bed-new-edge: #8a96a8;
    --cp-bed-occupied: #ffffff; --cp-bed-occupied-edge: #c9d2de;
    --cp-ward-occupied: #e1f4e4; --cp-ward-occupied-edge: #2f9e4f;
    --cp-ward-discharging: #f7dbe5; --cp-ward-discharging-edge: #c2557a;
    --cp-bed-mlc: #fde6e6; --cp-bed-mlc-edge: #d64545;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cp-bed-free: #10302f; --cp-bed-free-edge: #3fc2c2;
        --cp-bed-discharging: #332f12; --cp-bed-discharging-edge: #e0c040;
        --cp-bed-notready: #3a2016; --cp-bed-notready-edge: #f07a52;
        --cp-bed-new: #232a34; --cp-bed-new-edge: #8a96a8;
        --cp-bed-occupied: #151b23; --cp-bed-occupied-edge: #3a4554;
        --cp-ward-occupied: #13291a; --cp-ward-occupied-edge: #4cc070;
        --cp-ward-discharging: #351c27; --cp-ward-discharging-edge: #e07ea0;
        --cp-bed-mlc: #3a1c1f; --cp-bed-mlc-edge: #f07070;
    }
}
:root[data-theme="dark"] {
    --cp-bed-free: #10302f; --cp-bed-free-edge: #3fc2c2;
    --cp-bed-discharging: #332f12; --cp-bed-discharging-edge: #e0c040;
    --cp-bed-notready: #3a2016; --cp-bed-notready-edge: #f07a52;
    --cp-bed-new: #232a34; --cp-bed-new-edge: #8a96a8;
    --cp-bed-occupied: #151b23; --cp-bed-occupied-edge: #3a4554;
    --cp-ward-occupied: #13291a; --cp-ward-occupied-edge: #4cc070;
    --cp-ward-discharging: #351c27; --cp-ward-discharging-edge: #e07ea0;
    --cp-bed-mlc: #3a1c1f; --cp-bed-mlc-edge: #f07070;
}
.cp-bed-occupied { --cp-bed-bg: var(--cp-bed-occupied); --cp-bed-edge: var(--cp-bed-occupied-edge); }
.cp-bed-discharging { --cp-bed-bg: var(--cp-bed-discharging); --cp-bed-edge: var(--cp-bed-discharging-edge); }
.cp-bed-free { --cp-bed-bg: var(--cp-bed-free); --cp-bed-edge: var(--cp-bed-free-edge); }
.cp-bed-notready { --cp-bed-bg: var(--cp-bed-notready); --cp-bed-edge: var(--cp-bed-notready-edge); }
.cp-bed-new { --cp-bed-bg: var(--cp-bed-new); --cp-bed-edge: var(--cp-bed-new-edge); }

.cp-bed-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; font-size: .86rem; color: var(--cp-text-2); }
.cp-bed-key { display: inline-flex; align-items: center; gap: 6px; }
.cp-bed-key b { color: var(--cp-text); font-variant-numeric: tabular-nums; }
.cp-bed-swatch { width: 14px; height: 14px; border-radius: 4px; background: var(--cp-bed-bg); border: 1px solid var(--cp-bed-edge); }
.cp-bed-key.cp-bed-mlc .cp-bed-swatch { background: var(--cp-bed-mlc); border-color: var(--cp-bed-mlc-edge); }
.cp-bed-paymodes { color: var(--cp-text-3); padding-left: 14px; border-left: 1px solid var(--cp-border); }

.cp-bed-table > tbody > tr > td { background: var(--cp-bed-bg, transparent); }
.cp-bed-table > tbody > tr > td:first-child { box-shadow: inset 4px 0 0 var(--cp-bed-edge, transparent); }
/* Hover shading as an inset shadow, not a filter: a filter makes each cell the containing block of fixed elements,
   which trapped the row menu inside the scrolling table (it grew the scrollbar and jumped while placed). */
.cp-bed-table > tbody > tr:not(.cp-bed-ward):hover > td { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .035); }
.cp-bed-table > tbody > tr:not(.cp-bed-ward):hover > td:first-child { box-shadow: inset 4px 0 0 var(--cp-bed-edge, transparent), inset 0 0 0 100vmax rgba(0, 0, 0, .035); }
.cp-bed-table tr.cp-bed-ward > th { background: var(--cp-surface-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cp-text-2); padding-top: 9px; }
.cp-bed-ward-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 2px; border: 0; border-radius: var(--cp-radius-sm); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.cp-bed-ward-toggle:hover { background: var(--cp-surface-3); color: var(--cp-text); }
.cp-bed-ward-toggle:focus-visible { outline: none; box-shadow: var(--cp-focus-ring); }
.cp-bed-ward-toggle .cp-icon { transition: transform .15s; }
.cp-bed-collapsed .cp-bed-ward-toggle .cp-icon { transform: rotate(-90deg); }
.cp-bed-table > tbody.cp-bed-collapsed > tr:not(.cp-bed-ward) { display: none; }
.cp-bed-table tr.cp-bed-ward span { margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--cp-text-3); }
.cp-bed-state { display: inline-block; font-size: .78rem; font-weight: 650; padding: 1px 8px; border-radius: 999px; color: var(--cp-text); background: color-mix(in srgb, var(--cp-bed-edge, var(--cp-border)) 22%, transparent); border: 1px solid color-mix(in srgb, var(--cp-bed-edge, var(--cp-border)) 55%, transparent); white-space: nowrap; }
.cp-bed-notes { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cp-text-2); }

.cp-ward { margin-bottom: 18px; }
.cp-ward-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--cp-border); }
.cp-ward-name { margin: 0; font-size: 1rem; font-weight: 650; }
.cp-ward-count { font-size: .85rem; color: var(--cp-text-3); }
.cp-ward-last { font-size: .82rem; color: var(--cp-text-2); margin-left: auto; }
.cp-ward-beds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cp-ward-bed {
    position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 128px; padding: 8px 10px 10px;
    border: 1px solid var(--cp-border); border-left: 4px solid var(--cp-bed-edge); border-radius: var(--cp-radius-lg);
    background: var(--cp-bed-bg); font-size: .84rem;
}
.cp-ward-bed.cp-bed-occupied { --cp-bed-bg: var(--cp-ward-occupied); --cp-bed-edge: var(--cp-ward-occupied-edge); }
.cp-ward-bed.cp-bed-discharging { --cp-bed-bg: var(--cp-ward-discharging); --cp-bed-edge: var(--cp-ward-discharging-edge); }
.cp-ward-bed.cp-bed-mlc { --cp-bed-bg: var(--cp-bed-mlc); --cp-bed-edge: var(--cp-bed-mlc-edge); }
.cp-ward-bed.cp-bed-free { background: var(--cp-surface); border-style: dashed; border-left-style: solid; }
.cp-ward-bed-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.cp-ward-bedno { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .95rem; }
.cp-ward-bed-top .cp-bed-state { margin-left: auto; }
.cp-ward-bed-top .cp-row-menu { margin-right: -4px; }
.cp-ward-patient { font-weight: 650; color: var(--cp-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-ward-patient:hover { text-decoration: underline; color: var(--cp-link); }
.cp-ward-meta { color: var(--cp-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-ward-notes { margin-top: 2px; color: var(--cp-text-3); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-ward-free { margin: auto 0; color: var(--cp-text-3); font-weight: 600; }
@media (max-width: 575.98px) {
    .cp-ward-beds { grid-template-columns: 1fr 1fr; gap: 8px; }
    .cp-ward-last { margin-left: 0; }
    .cp-bed-paymodes { border-left: 0; padding-left: 0; }
}
@media print {
    .cp-bed-table > tbody > tr > td, .cp-ward-bed { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .cp-ward-bed { break-inside: avoid; }
}

/* inpatient: the admission's menu after its number in the page heading */
.cp-title-menu { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cp-title-menu .cp-more { width: 30px; height: 30px; border-color: var(--cp-border); background: var(--cp-surface); color: var(--cp-text-2); }
.cp-title-menu .dropdown-menu { font-size: .93rem; font-weight: 400; letter-spacing: 0; }

/* ================================================================ responsive */
.cp-nav-backdrop { display: none; }

@media (max-width: 991.98px) {
    .cp-sidebar {
        position: fixed;
        top: var(--cp-topbar-h);
        bottom: 0;
        left: 0;
        height: auto;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .2s ease-in-out;
        box-shadow: var(--cp-shadow-2);
    }

    .cp-sidebar.open { transform: translateX(0); }
    .cp-sidebar.open + .cp-nav-backdrop { display: block; position: fixed; inset: var(--cp-topbar-h) 0 0 0; z-index: 1035; background: rgba(8, 15, 26, .4); }
    .cp-main { padding: var(--cp-space-4) var(--cp-space-4) var(--cp-space-5); }
    .cp-footer { display: none; }
    .cp-form-actions { bottom: 8px; }
}

@media (max-width: 575.98px) {
    .cp-topbar { gap: var(--cp-space-2); padding: 0 10px; }
    .cp-org-name { max-width: 14ch; padding-left: var(--cp-space-2); }
    .cp-branch-name, .cp-user-name, .cp-brand-name, [data-cp-keys-help] { display: none; }
    .cp-page-header h1, .cp-page-header .h4 { font-size: 1.25rem; }
    .cp-filter-bar .form-control, .cp-filter-bar .form-select, .cp-toolbar-search { max-width: none; flex: 1 1 100%; }
    .cp-filter-bar .form-control[type="date"] { max-width: none; flex: 1 1 40%; }
    .cp-auth-card { padding: 24px 20px; }
    .cp-detail-list { grid-template-columns: 1fr; gap: 0; }
    .cp-detail-list dd { margin-bottom: 8px; }
    .cp-form-actions .cp-form-actions-hint { display: none; }
    .table > :not(caption) > * > * { padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-sidebar, .cp-nav-group-title .cp-chevron, .form-control, .form-select, .btn { transition: none; }
}

/* ================================================================ print and PDF
   Only the page content, without the shell, in the light palette whatever theme is on screen. */
@media print {
    :root, :root[data-theme="dark"] {
        color-scheme: light;
        --cp-canvas: #fff; --cp-surface: #fff; --cp-surface-2: #fff; --cp-surface-3: #f2f2f2;
        --cp-border: #bbb; --cp-border-strong: #888;
        --cp-text: #000; --cp-text-2: #111; --cp-text-3: #444; --cp-link: #000;
        --cp-primary: #000; --cp-primary-soft: #fff; --cp-primary-soft-text: #000;
        --cp-field-bg: #fff; --cp-row-stripe: #fff; --cp-row-hover: #fff;
        --cp-shadow-1: none; --cp-shadow-2: none;
    }
    .cp-topbar, .cp-sidebar, .cp-footer, .cp-skip-link, .cp-no-print, .alert[role="status"], .cp-form-actions, .cp-filter-bar, .cp-toolbar, .cp-pager, .cp-keys-help, .cp-nav-backdrop { display: none !important; }
    .cp-shell, .cp-main { display: block !important; margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    a { color: inherit !important; text-decoration: none !important; }
    .table-responsive, .card, .cp-section { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: #fff !important; overflow: visible !important; }
    .table > thead > tr > th, .table > thead th { background: #fff !important; color: #000 !important; text-transform: none; letter-spacing: 0; font-size: .85em; }
    .table > :not(caption) > * > * { border-bottom-color: #ccc !important; }
    .badge { border: 1px solid #999; background: #fff !important; color: #000 !important; }
    .cp-page-header { margin-bottom: 8px; }
}

/* Letterhead on printable pages (Organization > Letterhead). */
.cp-letterhead { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #333; padding-bottom: 6px; margin-bottom: 12px; color: #000; background: #fff; }
.cp-letterhead-logo { max-height: 64px; max-width: 160px; object-fit: contain; }
.cp-letterhead-text { flex: 1; text-align: center; font-size: .8rem; line-height: 1.3; }
.cp-letterhead-title { font-size: 1.25rem; font-weight: 700; color: #000; }
.cp-letterhead-subtitle { font-size: .9rem; font-weight: 600; }
.cp-signature { max-height: 48px; max-width: 160px; display: block; }

/* address partial inside a titled section: the section title replaces the legend */
.cp-section .cp-address > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cp-address { margin-bottom: 0; }

/* plain section headings on pages not yet using <cp-section> */
.cp-main > h2.h6, .cp-main > form > h2.h6, .cp-main > div > h2.h6:not(.card-title), .cp-main fieldset > h2.h6 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 650; margin: 22px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--cp-border); }
.cp-main > h2.h6::before, .cp-main > form > h2.h6::before, .cp-main > div > h2.h6:not(.card-title)::before, .cp-main fieldset > h2.h6::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--cp-primary); }
.cp-section + .cp-section, .cp-section.mt-4 { margin-top: 0 !important; }
@media print { .cp-main h2.h6::before { display: none; } }

/* ================================================================ legacy lab result designer pages
   A template drawn as the desktop draws it: items at their design pixels (96 DPI, 100 px an inch) on a white page. */
.cp-lrd-scroll { overflow-x: auto; margin-bottom: var(--cp-space-4); padding: 12px; background: var(--cp-surface-3); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); }
.cp-lrd-page { position: relative; margin: 0 auto; background: #fff; color: #000; box-shadow: var(--cp-shadow-2); font-family: "Courier New", monospace; font-size: 10pt; color-scheme: light; }
.cp-lrd-item { position: absolute; box-sizing: border-box; margin: 0; overflow: hidden; line-height: 1.2; }
.cp-lrd-label { white-space: pre-wrap; padding: 3px 2px; }
.cp-lrd-line { border-top: 1px solid #000; }
.cp-lrd-break { border-top: 1px dashed #9aa5b4; }
.cp-lrd-info { padding: 3px 2px; white-space: nowrap; text-overflow: ellipsis; font-family: Verdana, sans-serif; font-size: 9pt; }
.cp-lrd-placeholder { color: #6b7a90; font-style: italic; background: #f3f6fa; border: 1px dashed #c9d2de; border-radius: 2px; }
.cp-lrd-input, .cp-lrd-page .cp-lookup-input { font-family: Verdana, sans-serif; font-size: 9.75pt; color: #000; background: #fff; border: 1px solid #9aa5b4; border-radius: 2px; padding: 1px 4px; min-height: 0 !important; }
.cp-lrd-page .form-select.cp-lrd-input { padding: 1px 22px 1px 4px; background-position: right 4px center; }
.cp-lrd-input:focus, .cp-lrd-page .cp-lookup-input:focus { outline: none; border-color: var(--cp-primary); box-shadow: 0 0 0 2px rgba(11, 103, 194, .25); background: #fffbea; }
.cp-lrd-input[readonly] { background: #fafbfc; }
.cp-lrd-number { text-align: right; font-variant-numeric: tabular-nums; }
textarea.cp-lrd-input { resize: none; line-height: 1.3; }
.cp-lrd-flagged { color: #c0312a; font-weight: bold; border-color: #c0312a; }
.cp-lrd-check { display: flex; align-items: center; gap: 4px; font-family: Verdana, sans-serif; font-size: 9pt; }
.cp-lrd-multi { border: 1px solid #9aa5b4; border-radius: 2px; overflow-y: auto; padding: 2px 4px; font-family: Verdana, sans-serif; font-size: 9pt; background: #fff; }
.cp-lrd-multi label { display: block; white-space: nowrap; }
.cp-lrd-other { border: 1px dashed #c9d2de; background: #f6f8fb; color: #6b7a90; font-family: Verdana, sans-serif; font-size: 8.5pt; padding: 3px 4px; }
/* LabResultItem: name, value, unit and reference range in one row (legacy LabResultInput) */
.cp-lrd-result { display: grid; grid-template-columns: 40% 22% 15% 23%; align-items: center; font-family: Verdana, sans-serif; font-size: 9.75pt; }
.cp-lrd-result .cp-lrd-input { position: static; height: 100%; width: 100%; }
.cp-lrd-result-name, .cp-lrd-result-unit, .cp-lrd-result-range { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-lrd-result-range { color: #3d4b5f; }
.cp-lrd-page .cp-lookup-icon { display: none; }
.cp-lrd-page .cp-select-search { position: static; }
.cp-lrd-paper .cp-lrd-item { overflow: visible; }
.cp-lrd-value { padding: 1px 2px; white-space: pre-wrap; font-family: Verdana, sans-serif; font-size: 9.75pt; }
@media print { .cp-lrd-scroll { border: 0; padding: 0; background: #fff; overflow: visible; } .cp-lrd-page { box-shadow: none; } .cp-lrd-placeholder { border: 0; background: none; } }

/* ================================================================ desktop-formatted documents (legacy RichEdit RTF)
   Shown on a white sheet of the document's paper size; the content keeps its own fonts, so the page stays light. */
.cp-doc-scroll { overflow-x: auto; padding: 14px; margin-bottom: var(--cp-space-3); background: var(--cp-surface-3); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); }
.cp-doc-sheet { margin: 0 auto; background: #fff; color: #000; box-shadow: var(--cp-shadow-2); box-sizing: border-box; color-scheme: light; }
.cp-rtf { font-family: Verdana, sans-serif; font-size: 12pt; line-height: 1.25; color: #000; overflow-wrap: break-word; }
.cp-rtf p { margin: 0; min-height: 1em; }
.cp-rtf img { max-width: 100%; }
.cp-rtf-tab { display: inline-block; width: 0.5in; }
.cp-rtf-table { border-collapse: collapse; margin: 2px 0; }
.cp-rtf-table td { border: 1px dashed #777; padding: 1px 4px; vertical-align: top; }
.cp-rtf-picture { display: inline-block; border: 1px dashed #9aa5b4; color: #6b7a90; font-size: 9pt; text-align: center; vertical-align: middle; }
.cp-rtf-pagebreak { border-top: 1px dashed #9aa5b4; margin: 10px 0; }
.cp-merge-field { background: #e8f1fc; color: #0a4c8f; border-radius: 3px; padding: 0 2px; }
@media print { .cp-merge-field { background: none; color: inherit; } .cp-doc-scroll { border: 0; padding: 0; background: #fff; } .cp-doc-sheet { box-shadow: none; width: auto !important; padding: 0 !important; } .cp-rtf-pagebreak { break-after: page; border: 0; } }

/* Patient photo on the registration form: the camera view and the captured picture. */
.cp-photo-frame { display: block; width: 100%; max-width: 320px; height: auto; background: #000; border: 1px solid var(--cp-border-strong); border-radius: 6px; }
img.cp-photo-frame { background: transparent; }