/*
 * carems-ui.css — CAREMS design system layer.
 *
 * Loads after Tabler (pinned in App.razor) and before app.css, and is the single place
 * that decides how Tabler's primitives look: surfaces, badges, alerts, tabs, forms, tables,
 * the sidebar and the topbar. Page CSS should compose these tokens, not redefine them.
 *
 * Direction: quiet, light, "glass". Chrome that floats over the page (sidebar, topbar,
 * dropdowns) is translucent and blurred; dialogs and content cards are solid white surfaces
 * with a hairline and a soft shadow.
 *
 * backdrop-filter is deliberately NOT applied to .card. A backdrop-filter makes the element
 * the containing block for position:fixed descendants, so any modal rendered inside a card
 * would be positioned relative to the card instead of the viewport.
 *
 * Colour rule: one accent for actions. Status colour appears only as a soft tinted pill (.badge),
 * a soft callout (.alert) or a small icon chip (.stat-tile, .queue-tile) — never as a coloured
 * card. Neutral metric chips take one of a few soft hues (--hue-*) so a row of tiles stays lively
 * without any single colour shouting.
 */

:root {
    --c-accent: #0071e3;
    --c-accent-hover: #0058b0;
    --c-accent-ink: #0058b0;
    --c-accent-soft: rgba(0, 113, 227, .10);
    --c-accent-ring: rgba(0, 113, 227, .22);

    --c-ink: #1d1d1f;
    --c-ink-2: #4b4b50;
    --c-ink-3: #86868b;
    --c-line: rgba(60, 60, 67, .12);
    --c-line-strong: rgba(60, 60, 67, .2);
    --c-fill: rgba(120, 120, 128, .1);

    --c-surface: #fff;
    --c-surface-2: rgba(248, 249, 252, .9);   /* a panel inside a card */
    --c-glass: rgba(255, 255, 255, .68);
    --c-glass-strong: rgba(255, 255, 255, .9);
    --c-glass-soft: rgba(255, 255, 255, .55);
    --c-canvas: #eef1f6;

    --c-ok: #1a7f43;
    --c-ok-soft: rgba(52, 199, 89, .15);
    --c-warn: #9a5b00;
    --c-warn-soft: rgba(255, 159, 10, .13);
    --c-danger: #c42b2b;
    --c-danger-soft: rgba(255, 69, 58, .13);
    --c-info: #0058b0;
    --c-info-soft: rgba(0, 113, 227, .12);
    --c-neutral: #55555a;
    --c-neutral-soft: rgba(120, 120, 128, .15);

    /* Soft hues for metric chips: ink on a 12% tint of the same colour. */
    --hue-blue: #1d6fd8;   --hue-blue-soft: rgba(29, 111, 216, .11);
    --hue-violet: #6a4bd6; --hue-violet-soft: rgba(106, 75, 214, .11);
    --hue-teal: #0f8a83;   --hue-teal-soft: rgba(15, 138, 131, .12);
    --hue-amber: #b0640a;  --hue-amber-soft: rgba(240, 150, 30, .14);
    --hue-rose: #c2366b;   --hue-rose-soft: rgba(214, 54, 112, .11);
    --hue-green: #1f8a4c;  --hue-green-soft: rgba(40, 170, 90, .13);

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05);
    --shadow-2: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 34px rgba(16, 24, 40, .09);

    /* Tabler hooks — everything below this block inherits from these. */
    --tblr-primary: var(--c-accent);
    --tblr-primary-rgb: 0, 113, 227;
    --tblr-link-color: var(--c-accent);
    --tblr-link-color-rgb: 0, 113, 227;
    --tblr-link-hover-color: var(--c-accent-ink);
    --tblr-body-color: var(--c-ink);
    --tblr-body-bg: var(--c-canvas);
    --tblr-border-color: var(--c-line);
    --tblr-border-radius: var(--r-sm);
    --tblr-border-radius-lg: var(--r-md);
    --tblr-font-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
    --tblr-card-border-radius: var(--r-lg);
    --tblr-card-border-color: var(--c-line);
    --tblr-card-box-shadow: var(--shadow-1);
}

/* ── Dark theme ─────────────────────────────────────────────────────────────
 * Set on <html data-bs-theme="dark"> by js/carems/appearance.js (System follows the OS). Only the tokens
 * change; Tabler's own dark variables cover what it draws itself. */
:root[data-bs-theme="dark"] {
    color-scheme: dark;
    --c-accent: #3d93ff;
    --c-accent-hover: #287bdc;
    --c-accent-ink: #7ab4ff;
    --c-accent-soft: rgba(61, 147, 255, .16);
    --c-accent-ring: rgba(61, 147, 255, .38);

    --c-ink: #f1f2f5;
    --c-ink-2: #c3c6ce;
    --c-ink-3: #8f939c;
    --c-line: rgba(255, 255, 255, .1);
    --c-line-strong: rgba(255, 255, 255, .18);
    --c-fill: rgba(255, 255, 255, .08);

    --c-surface: #1b1e24;
    --c-surface-2: rgba(255, 255, 255, .04);
    --c-glass: rgba(27, 30, 36, .72);
    --c-glass-strong: rgba(27, 30, 36, .92);
    --c-glass-soft: rgba(255, 255, 255, .06);
    --c-canvas: #0f1115;

    --c-ok: #4fd187;
    --c-ok-soft: rgba(52, 199, 89, .18);
    --c-warn: #ffb547;
    --c-warn-soft: rgba(255, 159, 10, .18);
    --c-danger: #ff6d63;
    --c-danger-soft: rgba(255, 69, 58, .18);
    --c-info: #7ab4ff;
    --c-info-soft: rgba(61, 147, 255, .18);
    --c-neutral: #b4b7bf;
    --c-neutral-soft: rgba(255, 255, 255, .1);

    --hue-blue: #6aa8ff;   --hue-blue-soft: rgba(106, 168, 255, .16);
    --hue-violet: #a78bfa; --hue-violet-soft: rgba(167, 139, 250, .16);
    --hue-teal: #3cc8bf;   --hue-teal-soft: rgba(60, 200, 191, .16);
    --hue-amber: #f5b14c;  --hue-amber-soft: rgba(245, 177, 76, .16);
    --hue-rose: #f07aa6;   --hue-rose-soft: rgba(240, 122, 166, .16);
    --hue-green: #5ed39a;  --hue-green-soft: rgba(94, 211, 154, .16);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .45);

    --tblr-primary-rgb: 61, 147, 255;
    --tblr-link-color-rgb: 61, 147, 255;
    --tblr-bg-surface: var(--c-surface);
    --tblr-bg-surface-secondary: var(--c-surface-2);
    --tblr-card-bg: var(--c-surface);
    --tblr-secondary-color: var(--c-ink-3);
}

/* ── Canvas ─────────────────────────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; }

body {
    color: var(--c-ink);
    font-feature-settings: "cv11", "ss01";
    /* Soft tinted light behind the glass chrome, so the blur has something to pick up. */
    background:
        radial-gradient(1100px 600px at 8% -10%, rgba(0, 113, 227, .10), transparent 60%),
        radial-gradient(900px 520px at 100% 0%, rgba(94, 92, 230, .07), transparent 55%),
        radial-gradient(900px 600px at 60% 110%, rgba(52, 199, 89, .06), transparent 60%),
        var(--c-canvas);
    background-attachment: fixed;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { letter-spacing: -.012em; }
h1, .h1 { font-size: 1.65rem; font-weight: 650; }
h2, .h2 { font-size: 1.3rem; font-weight: 650; }
h3, .h3 { font-size: 1.1rem; font-weight: 600; }
.h5, h5 { font-size: 1.02rem; font-weight: 600; }
.text-muted, .text-secondary { color: var(--c-ink-3) !important; }
.small, small { letter-spacing: 0; }
.text-warning { color: var(--c-warn) !important; }
.text-success { color: var(--c-ok) !important; }
.text-danger { color: var(--c-danger) !important; }
.text-primary { color: var(--c-accent) !important; }
.text-info { color: var(--c-info) !important; }

.page-body { padding: 0; min-height: calc(100vh - 56px); }
.page-body > .container-xl { max-width: 1480px; padding-top: 1.25rem !important; padding-bottom: 1.5rem !important; }

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}
.card.shadow-sm, .card.shadow { box-shadow: var(--shadow-1) !important; }
.card.border-0 { border: 1px solid var(--c-line) !important; }
.card .card { box-shadow: none; background: var(--c-surface-2); border-radius: var(--r-md); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--c-line);
    padding: .9rem 1.15rem;
    min-height: 0;
}
.card-header.bg-light, .card-header.bg-white { background: transparent !important; }
.card-title { font-size: 1rem; font-weight: 600; margin: 0; }
.card-body { padding: 1.15rem; }
.card-footer { background: transparent; border-top: 1px solid var(--c-line); }

.bg-light, .bg-light-subtle { background-color: rgba(120, 120, 128, .07) !important; }
.border.rounded-3 { border-color: var(--c-line) !important; border-radius: var(--r-md) !important; }

.list-group { --tblr-list-group-border-color: var(--c-line); --tblr-list-group-action-hover-bg: rgba(120, 120, 128, .07); }
.list-group-item { background: transparent; }

/* Floating layers share one translucent material. */
.dropdown-menu {
    background: var(--c-glass-strong);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    padding: .35rem;
}
.dropdown-item { border-radius: 8px; padding: .45rem .7rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--c-fill); }
.dropdown-item.active, .dropdown-item:active { background: var(--c-accent-soft); color: var(--c-accent-ink); }

/* Dialogs are solid: a translucent dialog let the form behind it show through its header wherever the
   blur did not apply, which made them hard to read. The dimmed backdrop already separates them. */
.modal-content {
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    box-shadow: 0 24px 70px rgba(16, 24, 40, .22);
}
.modal-header, .modal-footer { border-color: var(--c-line); }
.modal-backdrop.show { --tblr-backdrop-opacity: .32; --bs-backdrop-opacity: .32; }

/* ── Badges: soft tinted pills ─────────────────────────────────────────── */
.badge {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 999px;
    padding: .3em .75em;
    border: 0;
    background: var(--c-neutral-soft) !important;
    color: var(--c-neutral) !important;
}
.badge.text-bg-success, .badge.bg-success, .badge.bg-green, .badge.bg-lime, .badge.bg-teal, .badge.bg-success-lt, .badge.bg-success-subtle { background: var(--c-ok-soft) !important; color: var(--c-ok) !important; }
.badge.text-bg-warning, .badge.bg-warning, .badge.bg-orange, .badge.bg-yellow, .badge.bg-warning-lt, .badge.bg-warning-subtle { background: var(--c-warn-soft) !important; color: var(--c-warn) !important; }
.badge.text-bg-danger, .badge.bg-danger, .badge.bg-red, .badge.bg-pink, .badge.bg-danger-lt, .badge.bg-danger-subtle { background: var(--c-danger-soft) !important; color: var(--c-danger) !important; }
.badge.text-bg-info, .badge.bg-info, .badge.text-bg-primary, .badge.bg-primary, .badge.bg-azure, .badge.bg-blue, .badge.bg-cyan, .badge.bg-indigo, .badge.bg-purple, .badge.bg-primary-lt, .badge.bg-info-lt, .badge.bg-primary-subtle, .badge.bg-info-subtle { background: var(--c-info-soft) !important; color: var(--c-info) !important; }
.badge.text-bg-secondary, .badge.bg-secondary, .badge.text-bg-light, .badge.bg-light, .badge.text-bg-dark, .badge.bg-dark, .badge.bg-secondary-subtle { background: var(--c-neutral-soft) !important; color: var(--c-neutral) !important; }

/* A visit or appointment status: colour, an icon and words, so the state never depends on colour alone. */
.status-badge { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.status-badge .ti { font-size: .9rem; line-height: 1; }

/* A status pill that carries its own dot, for places a badge stands for a state. */
.status-pill { display: inline-flex; align-items: center; gap: .4rem; }
.status-pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }

/* ── Alerts: quiet inline callouts, not banners ────────────────────────── */
.alert {
    --a-bg: var(--c-neutral-soft);
    --a-ink: var(--c-ink-2);
    --a-bar: var(--c-ink-3);
    background: var(--a-bg);
    color: var(--a-ink);
    border: 0;
    border-radius: 12px;
    padding: .6rem .9rem;
    font-size: .85rem;
    line-height: 1.4;
    box-shadow: none;
}
.alert + .alert { margin-top: -.25rem; }
.alert strong, .alert .alert-title, .alert .fw-semibold { color: var(--c-ink); }
.alert-warning { --a-bg: var(--c-warn-soft); --a-ink: #5c3a00; --a-bar: #ff9f0a; }
.alert-danger { --a-bg: var(--c-danger-soft); --a-ink: #7c1d1d; --a-bar: #ff453a; }
.alert-success { --a-bg: var(--c-ok-soft); --a-ink: #11512b; --a-bar: #34c759; }
.alert-info, .alert-primary { --a-bg: var(--c-info-soft); --a-ink: #0b3d73; --a-bar: var(--c-accent); }
/* Dark theme: the callout text goes light, or it disappears into the tinted background. */
:root[data-bs-theme="dark"] .alert-warning { --a-ink: #ffd08a; }
:root[data-bs-theme="dark"] .alert-danger { --a-ink: #ffb3ad; }
:root[data-bs-theme="dark"] .alert-success { --a-ink: #a8e9c3; }
:root[data-bs-theme="dark"] .alert-info, :root[data-bs-theme="dark"] .alert-primary { --a-ink: #b9d8ff; }

/* Dark mode: blue text reads poorly on the dark surfaces, so text that would be blue is white. Blue stays where it
   marks something without being text: button borders and fills, tab underlines, checkboxes, the active-row tint. */
:root[data-bs-theme="dark"] {
    --c-accent-ink: #fff;   /* active menu items, tab counts, dropdown and card-tab selections */
    --c-info: #fff;         /* info/primary badges, .text-info */
    --tblr-link-color: #fff;
    --tblr-link-hover-color: #fff;
    --tblr-link-color-rgb: 255, 255, 255;
    --tblr-link-hover-color-rgb: 255, 255, 255;
}
:root[data-bs-theme="dark"] .text-primary,
:root[data-bs-theme="dark"] .text-blue,
:root[data-bs-theme="dark"] .text-azure,
:root[data-bs-theme="dark"] .link-primary,
:root[data-bs-theme="dark"] .btn-link,
:root[data-bs-theme="dark"] .seg-tabs button.active,
:root[data-bs-theme="dark"] .nav-tabs .nav-link.active,
:root[data-bs-theme="dark"] .page-link,
:root[data-bs-theme="dark"] .order-result-action { color: #fff !important; }
:root[data-bs-theme="dark"] .btn-outline-primary,
:root[data-bs-theme="dark"] .btn-outline-info {
    --tblr-btn-color: #fff;
    --tblr-btn-hover-color: #fff;
    --tblr-btn-active-color: #fff;
    --tblr-btn-border-color: rgba(61, 147, 255, .5);
}
/* Links are never underlined. Actions are buttons; a link that names a record in a table (a patient, a case) is
   bold, and tints on hover. */
a { text-decoration: none; }
a.cell-link { color: var(--c-ink); font-weight: 600; }
a.cell-link:hover { color: var(--c-accent); }
:root[data-bs-theme="dark"] a.cell-link:hover { color: #b9d8ff; }
.alert .btn-close { padding: .85rem; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    --tblr-btn-border-radius: var(--r-sm);
    border-radius: var(--r-sm);
    font-weight: 500;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active:not(:disabled) { transform: scale(.985); }
.btn-primary {
    --tblr-btn-color: #fff;
    --tblr-btn-bg: var(--c-accent);
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-color: #fff;
    --tblr-btn-hover-bg: var(--c-accent-hover);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-color: #fff;
    --tblr-btn-active-bg: var(--c-accent-hover);
    --tblr-btn-active-border-color: transparent;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--c-accent);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--c-accent-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--c-accent-hover);
    --bs-btn-active-border-color: transparent;
    color: #fff;
    background-color: var(--c-accent);
    border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--c-accent-hover) !important;
    border-color: transparent !important;
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info {
    background: var(--c-glass);
}
.btn-outline-secondary, .btn-outline-dark { --tblr-btn-color: var(--c-ink-2); --tblr-btn-border-color: var(--c-line-strong); --tblr-btn-hover-bg: var(--c-fill); --tblr-btn-hover-color: var(--c-ink); --tblr-btn-hover-border-color: var(--c-line-strong); --tblr-btn-active-bg: var(--c-fill); --tblr-btn-active-color: var(--c-ink); }
.btn-outline-primary { --tblr-btn-color: var(--c-accent); --tblr-btn-border-color: rgba(0, 113, 227, .35); --tblr-btn-hover-bg: var(--c-accent-soft); --tblr-btn-hover-color: var(--c-accent-ink); --tblr-btn-hover-border-color: rgba(0, 113, 227, .5); --tblr-btn-active-bg: var(--c-accent-soft); --tblr-btn-active-color: var(--c-accent-ink); }
.btn-success { --tblr-btn-bg: #1f8a4c; --tblr-btn-hover-bg: #176b3a; --tblr-btn-active-bg: #176b3a; --tblr-btn-border-color: transparent; --tblr-btn-hover-border-color: transparent; }
.btn-danger { --tblr-btn-bg: #d1383b; --tblr-btn-hover-bg: #b02c2f; --tblr-btn-active-bg: #b02c2f; --tblr-btn-border-color: transparent; --tblr-btn-hover-border-color: transparent; }
.btn-warning { --tblr-btn-bg: #f5a524; --tblr-btn-color: #3d2600; --tblr-btn-hover-bg: #dd9318; --tblr-btn-hover-color: #3d2600; --tblr-btn-border-color: transparent; }
.btn-outline-success { --tblr-btn-color: var(--c-ok); --tblr-btn-border-color: rgba(26, 127, 67, .35); --tblr-btn-hover-bg: var(--c-ok-soft); --tblr-btn-hover-color: var(--c-ok); --tblr-btn-hover-border-color: rgba(26, 127, 67, .5); --tblr-btn-active-bg: var(--c-ok-soft); --tblr-btn-active-color: var(--c-ok); }
.btn-outline-danger { --tblr-btn-color: var(--c-danger); --tblr-btn-border-color: rgba(196, 43, 43, .35); --tblr-btn-hover-bg: var(--c-danger-soft); --tblr-btn-hover-color: var(--c-danger); --tblr-btn-hover-border-color: rgba(196, 43, 43, .5); --tblr-btn-active-bg: var(--c-danger-soft); --tblr-btn-active-color: var(--c-danger); }
.btn-outline-info, .btn-outline-warning { --tblr-btn-color: var(--c-ink-2); --tblr-btn-border-color: var(--c-line-strong); --tblr-btn-hover-bg: var(--c-fill); --tblr-btn-hover-color: var(--c-ink); --tblr-btn-hover-border-color: var(--c-line-strong); }
.btn-light { --tblr-btn-bg: var(--c-glass-strong); --tblr-btn-border-color: var(--c-line); --tblr-btn-color: var(--c-ink); }

/* Tabler's outline/light hover defaults use a light solid fill. In dark mode that can leave
   inherited light text sitting on a nearly-white button. Keep every secondary action on the
   same dark-theme surface and set its foreground explicitly. */
:root[data-bs-theme="dark"] .btn-outline-secondary:hover,
:root[data-bs-theme="dark"] .btn-outline-secondary:focus-visible,
:root[data-bs-theme="dark"] .btn-outline-dark:hover,
:root[data-bs-theme="dark"] .btn-outline-dark:focus-visible,
:root[data-bs-theme="dark"] .btn-outline-warning:hover,
:root[data-bs-theme="dark"] .btn-outline-warning:focus-visible,
:root[data-bs-theme="dark"] .btn-outline-info:hover,
:root[data-bs-theme="dark"] .btn-outline-info:focus-visible,
:root[data-bs-theme="dark"] .btn-light:hover,
:root[data-bs-theme="dark"] .btn-light:focus-visible,
:root[data-bs-theme="dark"] .btn-ghost-secondary:hover,
:root[data-bs-theme="dark"] .btn-ghost-secondary:focus-visible {
    color: var(--c-ink) !important;
    background-color: var(--c-fill) !important;
    border-color: var(--c-line-strong) !important;
}
:root[data-bs-theme="dark"] .btn-outline-primary:hover,
:root[data-bs-theme="dark"] .btn-outline-primary:focus-visible {
    color: #fff !important;
    background-color: var(--c-accent-soft) !important;
    border-color: rgba(61, 147, 255, .65) !important;
}
:root[data-bs-theme="dark"] .btn-outline-success:hover,
:root[data-bs-theme="dark"] .btn-outline-success:focus-visible {
    color: var(--c-ok) !important;
    background-color: var(--c-ok-soft) !important;
}
:root[data-bs-theme="dark"] .btn-outline-danger:hover,
:root[data-bs-theme="dark"] .btn-outline-danger:focus-visible {
    color: var(--c-danger) !important;
    background-color: var(--c-danger-soft) !important;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-label { font-size: .8rem; font-weight: 600; color: var(--c-ink-2); margin-bottom: .3rem; }
.form-control, .form-select {
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line-strong);
    background-color: var(--c-glass-strong);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--c-ink-3); }
.form-control:focus, .form-select:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-ring);
    background-color: var(--c-surface);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: rgba(120, 120, 128, .08); }
.form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); }
.input-group > .form-control, .input-group > .form-select { border-radius: var(--r-sm); }
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table { --tblr-table-border-color: var(--c-line); --tblr-table-striped-bg: transparent; --tblr-table-hover-bg: rgba(0, 113, 227, .045); color: var(--c-ink); }
.table > :not(caption) > * > * { border-bottom-color: var(--c-line); padding: .7rem .85rem; }
.table thead th {
    background: transparent;
    color: var(--c-ink-3);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-line-strong);
    white-space: nowrap;
}
.table tbody tr:last-child > * { border-bottom: 0; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --tblr-table-accent-bg: transparent; }
.table-hover > tbody > tr:hover > * { background-color: var(--tblr-table-hover-bg); }
.card > .table-responsive { border-radius: var(--r-lg); }

/* ── Tabs: one segmented control, one row ──────────────────────────────── */
.nav-tabs, .nav-pills {
    gap: .2rem;
    padding: .25rem;
    border: 0;
    background: var(--c-fill);
    border-radius: 12px;
    display: inline-flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
/* Fade the right edge only while a tab strip still has more to scroll to. */
@property --tab-fade { syntax: '<length>'; inherits: false; initial-value: 0px; }
@keyframes tab-fade-end { 0%, 92% { --tab-fade: 32px; } 100% { --tab-fade: 0px; } }
@supports (animation-timeline: scroll()) {
    .nav-tabs, .nav-pills {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--tab-fade)), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - var(--tab-fade)), transparent);
        animation: tab-fade-end linear both;
        animation-timeline: scroll(self inline);
    }
}
.nav-tabs .nav-item, .nav-pills .nav-item { flex: 0 0 auto; margin: 0; }
.nav-tabs .nav-link, .nav-pills .nav-link {
    border: 0;
    margin: 0;
    border-radius: 9px;
    padding: .4rem .95rem;
    font-size: .86rem;
    font-weight: 500;
    color: var(--c-ink-2);
    white-space: nowrap;
    background: transparent;
    transition: background-color .15s ease, color .15s ease;
}
.nav-tabs .nav-link:hover:not(.active), .nav-pills .nav-link:hover:not(.active) { color: var(--c-ink); background: var(--c-glass-soft); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background: var(--c-surface);
    color: var(--c-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);
}

/* Tabbed workspaces. The tab bar sticks under the top bar; each tab body grows with its content and
   the page scrolls as usual (no inner scroll box, which cut long forms off). A tab body is at least
   as tall as the screen below the tab bar, so a short tab never pulls the page up, and
   js/carems/tabs.js keeps the tab bar in place when switching. Together every tab opens at the same
   spot. Wide tables scroll in .table-responsive. */
:root { --carems-topbar: 57px; --carems-tabbar: 3.5rem; }
@media (max-width: 991.98px) { :root { --carems-topbar: 0px; } }
.carems-tabs-sticky {
    position: sticky;
    top: var(--carems-topbar);
    z-index: 20;
    padding: .25rem 0 .75rem;
    background: linear-gradient(to bottom, var(--c-canvas) 85%, transparent);
}
.carems-tabpanel {
    min-height: calc(100vh - var(--carems-topbar) - var(--carems-tabbar));
    scroll-margin-top: calc(var(--carems-topbar) + var(--carems-tabbar));
    /* The browser's scroll anchoring would shift the page to keep an element of the old tab in view. */
    overflow-anchor: none;
}

/* ── Page header ───────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0 0 .15rem; }
.page-head p { margin: 0; color: var(--c-ink-3); }
.page-head .page-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Stat tile ─────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: .9rem; }
.card .stat-grid { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.stat-tile {
    --chip-bg: var(--hue-blue-soft);
    --chip-ink: var(--hue-blue);
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1rem 1.1rem 1.05rem;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
a.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: inherit; }
.stat-tile-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.stat-tile-label { font-size: .8rem; font-weight: 500; color: var(--c-ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-tile-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 11px;
    background: var(--chip-bg);
    color: var(--chip-ink);
    font-size: 1.15rem;
}
.stat-tile-value { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: .1rem; }
.stat-tile-hint { font-size: .76rem; color: var(--c-ink-3); margin-top: .1rem; }
.stat-tile[data-hue="violet"] { --chip-bg: var(--hue-violet-soft); --chip-ink: var(--hue-violet); }
.stat-tile[data-hue="teal"] { --chip-bg: var(--hue-teal-soft); --chip-ink: var(--hue-teal); }
.stat-tile[data-hue="amber"] { --chip-bg: var(--hue-amber-soft); --chip-ink: var(--hue-amber); }
.stat-tile[data-hue="rose"] { --chip-bg: var(--hue-rose-soft); --chip-ink: var(--hue-rose); }
.stat-tile[data-hue="green"] { --chip-bg: var(--hue-green-soft); --chip-ink: var(--hue-green); }
/* A meaningful tone wins over the decorative hue. */
.stat-tile[data-tone="accent"], .stat-tile[data-tone="primary"] { --chip-bg: var(--c-accent-soft); --chip-ink: var(--c-accent); }
.stat-tile[data-tone="ok"], .stat-tile[data-tone="success"] { --chip-bg: var(--c-ok-soft); --chip-ink: var(--c-ok); }
.stat-tile[data-tone="warn"], .stat-tile[data-tone="warning"] { --chip-bg: var(--c-warn-soft); --chip-ink: var(--c-warn); }
.stat-tile[data-tone="danger"] { --chip-bg: var(--c-danger-soft); --chip-ink: var(--c-danger); }

/* A tile that is a grid cell fills the cell, so a row of tiles lines up. */
.row > [class*="col"] > .stat-tile { height: 100%; }

/* ── Facet bar (filter chips with counts) ──────────────────────────────── */
.facet-bar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.facet-bar-label { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); margin-right: .25rem; }
.facet {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--c-line-strong);
    background: var(--c-glass);
    color: var(--c-ink-2);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.facet:hover { background: var(--c-surface); border-color: var(--c-ink-3); color: var(--c-ink); }
.facet-count { padding: 0 .45rem; border-radius: 999px; background: var(--c-fill); font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.facet.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.facet.is-active .facet-count { background: rgba(255, 255, 255, .24); color: #fff; }
.facet:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ── Dashboard trends ──────────────────────────────────────────────────── */
.trends { margin-bottom: 1.5rem; }
.trends-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.trends-periods .nav-link { min-width: 4.5rem; text-align: center; }
.trend-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
/* One or two figures keep a card's width instead of stretching across the page. */
.trend-kpis:not(:has(> :nth-child(3))) { grid-template-columns: repeat(auto-fill, minmax(12rem, 17rem)); }
.trend-kpi {
    display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; min-width: 0;
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg, 14px);
}
.trend-kpi-label { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--c-ink-2); font-weight: 500; }
.trend-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--dot); flex: 0 0 auto; }
.trend-kpi-value { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--c-ink); overflow-wrap: anywhere; }
.trend-change { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; font-weight: 600; color: var(--c-ink-3); flex-wrap: wrap; }
.trend-change .ti { font-size: .95rem; }
.trend-change.is-up { color: var(--c-ok); }
.trend-change.is-down { color: var(--c-danger); }
.trend-change-vs { font-weight: 400; color: var(--c-ink-3); }
.trend-kpi.is-placeholder span, .trend-kpi.is-placeholder strong { display: block; border-radius: 6px; background: var(--c-fill); }
.trend-kpi.is-placeholder span { width: 45%; height: .8rem; }
.trend-kpi.is-placeholder strong { width: 65%; height: 1.5rem; }
.trend-chart { height: 16rem; }
.trend-chart-empty, .trend-donut-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--c-ink-3); font-size: .86rem; pointer-events: none;
}
.trend-donut-empty { position: static; flex: 1 1 auto; min-height: 8.5rem; }
/* While a new period loads, the current one stays in place, slightly faded, and then moves to the new figures. */
.trends .trend-kpis, .trends .row { transition: opacity .2s ease; }
.trends.is-loading .trend-kpis, .trends.is-loading .row { opacity: .55; }
@media (max-width: 575.98px) {
    .trend-kpis, .trend-kpis:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .trend-kpi { padding: .85rem .9rem; }
    .trend-kpi-value { font-size: 1.15rem; }
    .trend-chart { height: 13rem; }
    .trends-periods { width: 100%; }
    .trends-periods .nav-link { flex: 1 1 0; min-width: 0; }
}

/* ── Donut ─────────────────────────────────────────────────────────────── */
.donut { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.card-body.donut-body { display: flex; flex-direction: column; }
.card-body.donut-body > .donut { flex: 1 1 auto; }
.donut-figure { position: relative; flex: 0 0 auto; width: var(--donut-size, 8.5rem); height: var(--donut-size, 8.5rem); }
.donut-figure svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.donut-track { fill: none; stroke: var(--c-fill); }
.donut-seg { fill: none; stroke-linecap: butt; transition: stroke-dasharray .5s cubic-bezier(.22, 1, .36, 1), stroke-dashoffset .5s cubic-bezier(.22, 1, .36, 1); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-total { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.donut-caption { font-size: .7rem; color: var(--c-ink-3); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; flex: 1 1 8rem; min-width: 0; }
.donut-legend li { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--c-ink-2); min-width: 0; }
.donut-legend a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: .55rem; width: 100%; }
.donut-legend a:hover { color: var(--c-ink); }
.donut-dot { flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 50%; background: var(--dot); }
.donut-legend .donut-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend .donut-val { font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* ── Queue tiles (replace long label/count/badge rows) ─────────────────── */
.queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .75rem; }
.queue-tile {
    --chip-bg: var(--c-neutral-soft);
    --chip-ink: var(--c-neutral);
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .95rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-surface-2);
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.queue-tile:hover { background: var(--c-surface); border-color: var(--c-line-strong); transform: translateY(-1px); color: inherit; }
.queue-tile-chip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--chip-bg); color: var(--chip-ink); font-size: 1.05rem; }
.queue-tile-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.queue-tile-name { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-tile-status { font-size: .74rem; color: var(--chip-ink); font-weight: 500; }
.queue-tile-count { flex: 0 0 auto; font-size: 1.4rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.queue-tile[data-tone="primary"] { --chip-bg: var(--c-accent-soft); --chip-ink: var(--c-accent); }
.queue-tile[data-tone="success"] { --chip-bg: var(--c-ok-soft); --chip-ink: var(--c-ok); }
.queue-tile[data-tone="warning"] { --chip-bg: var(--c-warn-soft); --chip-ink: var(--c-warn); }
.queue-tile[data-tone="danger"] { --chip-bg: var(--c-danger-soft); --chip-ink: var(--c-danger); }

/* Tiles that sit inside a card go flat so the card is the only raised surface. */
.card .stat-tile { background: var(--c-surface-2); box-shadow: none; border-radius: var(--r-md); }
.card a.stat-tile:hover { background: var(--c-surface); box-shadow: none; }
a.facet { text-decoration: none; }

/* ── Chart box: a fixed-height frame so a chart and its empty state take the same room ── */
.chart-box { position: relative; height: 15rem; }
/* In a stretched card (beside a taller neighbour) the chart takes the spare height instead of leaving a gap. */
.card-body.d-flex.flex-column > .chart-box { flex: 1 1 auto; min-height: 15rem; }
.chart-box > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.chart-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: var(--c-ink-3); font-size: .86rem; border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); }
.chart-empty i { font-size: 1.6rem; opacity: .6; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.card-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.card-head-meta { font-size: .78rem; color: var(--c-ink-3); }
.chart-total { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* ── Link list (quick links / quick actions) ───────────────────────────── */
.link-list { display: flex; flex-direction: column; gap: .15rem; }
.link-list a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    border-radius: var(--r-sm);
    color: var(--c-ink-2);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}
.link-list a .ti { font-size: 1.05rem; color: var(--c-ink-3); }
.link-list a:hover { background: var(--c-fill); color: var(--c-ink); }
.link-list a:hover .ti { color: var(--c-accent); }
.link-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
/* Dark mode: quick links are white like the text around them, so each one is outlined to show it can be clicked. */
:root[data-bs-theme="dark"] .link-list { gap: .45rem; }
:root[data-bs-theme="dark"] .link-list a { border: 1px solid var(--c-line-strong); color: var(--c-ink); }
:root[data-bs-theme="dark"] .link-list a .ti { color: #b9d8ff; }
:root[data-bs-theme="dark"] .link-list a:hover { border-color: rgba(61, 147, 255, .6); background: rgba(61, 147, 255, .08); }

/* ── Workspace header (patient / visit banner) ─────────────────────────── */
.workspace-header { margin-bottom: 1rem; }
.workspace-header .card-body { padding: 1.1rem 1.25rem; }
.ws-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ws-id { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.ws-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
    font-weight: 650;
    font-size: 1rem;
}
.ws-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.ws-title h1 { margin: 0; font-size: 1.35rem; }
.ws-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ws-meta { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin: .9rem 0 0; padding-top: .85rem; border-top: 1px solid var(--c-line); }
.ws-meta > div { display: flex; flex-direction: column; min-width: 0; }
.ws-meta dt { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); }
.ws-meta dd { margin: 0; font-size: .9rem; font-weight: 500; color: var(--c-ink); }

/* ── Vitals grid ───────────────────────────────────────────────────────── */
.vitals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; }
.vital { padding: .6rem .7rem; border-radius: var(--r-sm); background: rgba(120, 120, 128, .07); }
.vital dt { font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-3); margin: 0; }
.vital dd { margin: .1rem 0 0; font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: normal; word-break: normal; }
.vital.is-warn { background: var(--c-warn-soft); }
.vital.is-warn dd { color: #8a5300; }
.vital.is-alert { background: var(--c-danger-soft); }
.vital.is-alert dd { color: #b42318; }
.vital.is-alert dt::after { content: " \2022 check"; letter-spacing: 0; text-transform: none; color: #b42318; }
.vitals-grid { margin: 0; }

/* ── Sidebar (glass) ───────────────────────────────────────────────────── */
aside.navbar-vertical {
    background: var(--c-glass);
    -webkit-backdrop-filter: saturate(190%) blur(28px);
    backdrop-filter: saturate(190%) blur(28px);
    border-right: 1px solid var(--c-line);
    box-shadow: none;
}
aside.navbar-vertical .navbar-brand { padding: 1rem 1rem .5rem; }
.carems-logo-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    padding: .25rem;
    border-radius: 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}
.carems-logo-frame-lg { width: 5rem; height: 3.5rem; padding: .35rem; }
.carems-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.carems-brand-name { font-size: .98rem; font-weight: 650; letter-spacing: -.01em; color: var(--c-ink); display: block; line-height: 1.2; }
.carems-brand-tag { font-size: .7rem; color: var(--c-ink-3); display: block; }

.navbar-vertical .navbar-collapse { padding: 0 .6rem .6rem; }
.navbar-vertical .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .32rem .6rem;
    margin: .06rem 0;
    border-radius: 10px;
    color: var(--c-ink-2);
    font-size: .875rem;
    font-weight: 500;
    min-height: 2.15rem;
    line-height: 1.25;
    transition: background-color .15s ease, color .15s ease;
}
/* !important: the markup carries Bootstrap's d-lg-inline-block utility, which is itself !important. */
.navbar-vertical .navbar-nav .nav-link .nav-link-icon {
    margin: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 8px;
    color: var(--c-ink-3);
    font-size: 1.05rem;
    flex: 0 0 auto;
    transition: background-color .15s ease, color .15s ease;
}
.navbar-vertical .navbar-nav .nav-link .nav-link-icon > svg { width: 1.05rem; height: 1.05rem; }
.navbar-vertical .navbar-nav .nav-link:hover { background: rgba(60, 60, 67, .07); color: var(--c-ink); }
.navbar-vertical .navbar-nav .nav-link:hover .nav-link-icon { color: var(--c-ink-2); }
.navbar-vertical .navbar-nav .nav-link.active { background: var(--c-accent-soft); color: var(--c-accent-ink); font-weight: 600; }
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon { background: var(--c-accent); color: #fff; }
/* The current page still answers the pointer: a deeper tint on hover. */
.navbar-vertical .navbar-nav .nav-link.active:hover { background: rgba(0, 113, 227, .2); color: var(--c-accent-ink); }
/* Dark mode: hover lightens rather than darkens, and the current page stands out clearly. */
:root[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, .08); color: var(--c-ink); }
:root[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-link.active { background: rgba(61, 147, 255, .22); color: #fff; }
:root[data-bs-theme="dark"] .navbar-vertical .navbar-nav .nav-link.active:hover { background: rgba(61, 147, 255, .32); color: #fff; }
.navbar-vertical .navbar-nav .nav-link:not(.collapsed)[data-bs-toggle="collapse"] { color: var(--c-ink); }
.navbar-vertical .navbar-nav .nav-link:not(.collapsed)[data-bs-toggle="collapse"] .nav-link-icon { background: var(--c-fill); color: var(--c-ink); }
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]::after { display: none; }

.carems-nav-section {
    padding: .9rem .65rem .3rem !important;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-ink-3) !important;
    pointer-events: none;
    cursor: default;
    min-height: 0 !important;
}
li.nav-item.mt-2 { margin-top: 0 !important; }

.navbar-vertical .nav-link-arrow { margin-left: auto; display: inline-flex; align-items: center; }
.navbar-vertical .nav-link-arrow .ti { font-size: .8rem; color: var(--c-ink-3); transition: transform .2s ease; }
.navbar-vertical .nav-link:not(.collapsed)[data-bs-toggle="collapse"] .nav-link-arrow .ti { transform: rotate(90deg); }

/* Sub-menus: indented under a hairline rail instead of a second block of icons. */
.navbar-vertical .collapse > .navbar-nav,
.navbar-vertical .collapsing > .navbar-nav {
    margin: .1rem 0 .35rem 1.3rem;
    padding-left: .6rem;
    border-left: 1px solid var(--c-line);
}
.navbar-vertical .collapse .navbar-nav .nav-link { padding: .3rem .6rem; min-height: 2rem; font-size: .83rem; font-weight: 450; margin: .05rem 0; }
.navbar-vertical .collapse .navbar-nav .nav-link.active { background: var(--c-accent-soft); color: var(--c-accent-ink); font-weight: 600; }
.navbar-vertical .collapse .navbar-nav .nav-link.active:hover { background: rgba(0, 113, 227, .2); }
:root[data-bs-theme="dark"] .navbar-vertical .collapse .navbar-nav .nav-link.active { background: rgba(61, 147, 255, .22); color: #fff; }
:root[data-bs-theme="dark"] .navbar-vertical .collapse .navbar-nav .nav-link.active:hover { background: rgba(61, 147, 255, .32); }
.navbar-vertical .collapse .collapse > .navbar-nav { margin-left: .6rem; }

.carems-sidebar-user {
    margin-top: auto;
    flex-shrink: 0;
    padding: .65rem .6rem;
    margin: 0 -.6rem -.6rem;
    border-top: 1px solid var(--c-line);
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #f7f8fb;
}
:root[data-bs-theme="dark"] .carems-sidebar-user { background: var(--c-surface); }
/* The logo is dark artwork; it keeps a light tile in the dark theme so it stays visible. */
:root[data-bs-theme="dark"] .carems-logo-frame { background: #fff; border-color: transparent; }
.carems-sidebar-user .btn-icon { color: var(--c-ink-3); }
.carems-sidebar-user .btn-icon:hover { color: var(--c-ink); background: var(--c-fill); }

.carems-brand-avatar { background: linear-gradient(135deg, #0a84ff, #5e5ce6) !important; }
.carems-user-avatar { color: #fff !important; }

@media (min-width: 992px) {
    .navbar-vertical .navbar-collapse {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 68px);
        scrollbar-width: thin;
        scrollbar-color: rgba(60, 60, 67, .22) transparent;
    }
}
@media (max-width: 991.98px) {
    .navbar-vertical .navbar-collapse { overflow-y: auto; max-height: calc(100vh - 56px); }
    /* A wide gutter's negative margins are larger than the page padding here and pushed the page 4px sideways. */
    .page-body .row.g-4 { --tblr-gutter-x: 1rem; --bs-gutter-x: 1rem; }
}

/* ── Topbar (glass) ────────────────────────────────────────────────────── */
header.navbar.sticky-top {
    background: var(--c-glass);
    -webkit-backdrop-filter: saturate(190%) blur(24px);
    backdrop-filter: saturate(190%) blur(24px);
    border-bottom: 1px solid var(--c-line);
    box-shadow: none;
    min-height: 56px;
}

.page.page-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

.carems-footer { padding: .5rem 0 1rem; }

@media (prefers-reduced-motion: reduce) {
    .stat-tile, .queue-tile, .facet, .btn, .nav-link, .donut-seg, .trends .trend-kpis, .trends .row { transition: none !important; }
}
@media print {
    body { background: #fff; }
    .card, .stat-tile { box-shadow: none; }
}

/* ── Search: compact field, results as you type ────────────────────────── */
.carems-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; }
.carems-toolbar-search { flex: 1 1 16rem; max-width: 26rem; }
.carems-toolbar-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.carems-lookup-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.carems-lookup-input { flex: 1 1 16rem; max-width: 28rem; }

@media (max-width: 767.98px) {
    /* Tables scroll sideways inside their card rather than crushing columns into letters. */
    .table-responsive > .table { min-width: 38rem; }
    /* ...except short tables (three columns or fewer), which fit as they are. */
    .table-responsive > .table:not(:has(> thead > tr > th:nth-child(4))) { min-width: 0; }
    /* Cells keep to one line and the table scrolls sideways, instead of dates and names breaking over three lines. */
    .table-responsive > .table > :not(caption) > * > * { white-space: nowrap; }
    .carems-toolbar { flex-direction: column; align-items: stretch; }
    .carems-toolbar-search, .carems-lookup-input { flex: 1 1 100%; max-width: none; width: 100%; }
    .carems-toolbar-actions { margin-left: 0; }
    .carems-toolbar-actions .btn, .carems-lookup-row > .btn { flex: 1 1 100%; }
    .form-control, .form-select { min-height: 2.75rem; }
}

/* Tablets: a sidebar plus a seven-column table is tight, so trim cell padding. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .table > :not(caption) > * > * { padding-left: .6rem; padding-right: .6rem; }
}
/* A search field beside buttons: takes the free width (up to 26rem) instead of a full line of its own. */
.carems-search-md { flex: 1 1 16rem; width: auto; min-width: 0; max-width: 26rem; }
@media (max-width: 575.98px) { .carems-search-md { max-width: none; } }

/* Selectable option cards (e.g. user roles): the box is the label, so keep the control inside it. */
label.form-check.border { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: start; padding: .8rem 1rem; cursor: pointer; }
label.form-check.border > .form-check-input { float: none; margin: .2rem 0 0; grid-row: 1 / span 2; grid-column: 1; }
label.form-check.border > span { grid-column: 2; }

/* No coloured edges: status is carried by the soft tint, text and icon, not by a coloured border. */
.card[class*="border-primary"], .card[class*="border-success"], .card[class*="border-warning"],
.card[class*="border-danger"], .card[class*="border-info"], .card[class*="border-secondary"] {
    border-color: var(--c-line) !important;
}
.carems-toast { border: 0 !important; box-shadow: var(--shadow-2, 0 8px 28px rgba(16, 24, 40, .14)) !important; }

/* Date and time pickers need room for the native format and the picker icon. */
.form-control[type="date"], .form-control[type="month"], .form-control[type="time"], .form-control[type="datetime-local"] {
    min-width: 9.75rem;
    padding-right: .5rem;
}
.form-control:is([type="date"], [type="month"], [type="time"], [type="datetime-local"])::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .72;
}
.form-control:is([type="date"], [type="month"], [type="time"], [type="datetime-local"]):hover::-webkit-calendar-picker-indicator,
.form-control:is([type="date"], [type="month"], [type="time"], [type="datetime-local"]):focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* Flatpickr progressively enhances every date/month/date-time control. The bound input keeps
   its ISO value for Blazor while users see a friendly, consistent calendar in both themes. */
.carems-date-picker {
    cursor: pointer;
    padding-right: 2.5rem;
    color: var(--c-ink);
    background-color: var(--c-glass-strong);
    border-color: var(--c-line-strong);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235f6670' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1.1rem;
}
.carems-date-picker[readonly]:not(:disabled) {
    cursor: pointer;
    color: var(--c-ink);
    background-color: var(--c-glass-strong);
    border-color: var(--c-line-strong);
    opacity: 1;
}
.carems-date-picker[readonly]:not(:disabled):hover {
    background-color: var(--c-surface);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.carems-date-picker:disabled {
    cursor: not-allowed;
    color: var(--c-ink-3);
    background-color: var(--c-fill);
    opacity: .68;
}
:root[data-bs-theme="dark"] .carems-date-picker {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c3c6ce' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}
.flatpickr-calendar {
    width: min(19.5rem, calc(100vw - 1.5rem));
    padding: .55rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-md);
    color: var(--c-ink);
    background: var(--c-surface);
    box-shadow: var(--shadow-2);
    font-family: inherit;
    font-size: .9rem;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--c-surface); }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--c-surface); }
.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.flatpickr-time,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: var(--c-ink);
    background: var(--c-surface);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: var(--c-ink-2); fill: currentColor; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: var(--c-accent); }
.flatpickr-weekdays,
span.flatpickr-weekday { color: var(--c-ink-3); background: transparent; }
.flatpickr-day { color: var(--c-ink); border-radius: 9px; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--c-ink-3); opacity: .58; }
.flatpickr-day:hover,
.flatpickr-day:focus { color: var(--c-ink); background: var(--c-fill); border-color: var(--c-fill); }
.flatpickr-day.today { border-color: var(--c-accent); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--c-ink-3); opacity: .35; background: transparent; }
.flatpickr-time { border-top-color: var(--c-line); }
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus { background: var(--c-fill); }
.flatpickr-monthSelect-month { color: var(--c-ink); border-radius: 9px; }
.flatpickr-monthSelect-month:hover,
.flatpickr-monthSelect-month:focus { color: var(--c-ink); background: var(--c-fill); }
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.selected:hover { color: #fff; background: var(--c-accent); }
@media (max-width: 575.98px) {
    .flatpickr-calendar { padding: .4rem; }
}
/* A very narrow grid column (col-1/col-2) whose only control is a date picker keeps a usable width.
   Direct child only: a large layout column that merely contains a date field must not be shrunk. */
@media (min-width: 768px) {
    .row > :is(.col-1, .col-2, .col-md-1, .col-md-2, .col-lg-1, .col-lg-2, .col-xl-1, .col-xl-2):has(> input[type="date"]),
    .row > :is(.col-1, .col-2, .col-md-1, .col-md-2, .col-lg-1, .col-lg-2, .col-xl-1, .col-xl-2):has(> input[type="datetime-local"]) { flex: 0 0 auto; width: 11rem; }
}

/* Ward workspace: compact latest-vitals strip */
.vitals-grid-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem; margin: 0; }
.vital dd small { font-size: .7em; font-weight: 500; color: var(--c-ink-3); margin-left: .1rem; }
.ward-status .status-pill { white-space: nowrap; }

/* Small count pill inside a tab label */
.nav-tabs .tab-count { display: inline-block; min-width: 1.25rem; margin-left: .4rem; padding: 0 .4rem; border-radius: 999px; background: rgba(60, 60, 67, .12); color: var(--c-ink-2); font-size: .72rem; font-weight: 600; line-height: 1.25rem; text-align: center; }
.nav-tabs .nav-link.active .tab-count { background: var(--c-accent-soft); color: var(--c-accent-ink); }

/* Selectable cards: click one and its detail renders below; click another and that one shows instead. */
.card-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.card-tab {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    padding: .85rem 1rem; text-align: left; cursor: pointer;
    background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
    box-shadow: var(--shadow-1); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.card-tab:hover { border-color: var(--c-line-strong); }
.card-tab:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--c-accent-ring); }
.card-tab.is-active { background: var(--c-accent-soft); border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent) inset; }
.card-tab-label { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.card-tab-value { font-size: 1rem; font-weight: 600; color: var(--c-ink); }
.card-tab.is-active .card-tab-label { color: var(--c-accent-ink); }
td.is-warn { background: var(--c-warn-soft); color: #8a5300; font-weight: 600; }
td.is-alert { background: var(--c-danger-soft); color: #b42318; font-weight: 600; }

/* Stat tiles carry no icon chip; only warn/danger tint the number. */
.stat-tile[data-tone="warn"] .stat-tile-value { color: #8a5300; }
.stat-tile[data-tone="danger"] .stat-tile-value { color: #b42318; }

/* No hover underlines on links, card links or card text (Tabler default adds them) */
a:hover, a:focus, a:active,
.card a:hover, a.card:hover, a.card-link:hover,
.link-list a:hover, .stat-tile:hover, a:hover * { text-decoration: none !important; }

/* ── Organization tree ─────────────────────────────────────────────────── */
.min-w-0 { min-width: 0; }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--c-ink-3); }
.btn-ghost:hover { background: var(--c-fill); color: var(--c-ink); }

.org-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .3rem; font-size: .84rem; color: var(--c-ink-3); }
.org-summary span { display: inline-flex; align-items: center; gap: .35rem; }
.org-summary i { font-size: 1rem; }

.org-tree-card { overflow: hidden; }
.org-tree-toolbar { display: flex; align-items: center; gap: .35rem; padding: .75rem .85rem; border-bottom: 1px solid var(--c-line); }
.org-tree-search { position: relative; flex: 1 1 auto; }
.org-tree-search i { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.org-tree-search .form-control { padding-left: 2rem; border-radius: 999px; background: var(--c-fill); border-color: transparent; }
.org-tree-search .form-control:focus { background: var(--c-surface); border-color: var(--c-accent-ring); }

.org-tree { padding: .4rem; max-height: calc(100vh - 15rem); overflow-y: auto; }
.org-tree-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.35rem;
    padding: 0 .45rem 0 .3rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    position: relative;
    color: var(--c-ink);
}
.org-tree-row:hover { background: rgba(120, 120, 128, .07); }
.org-tree-row.is-selected { background: var(--c-accent-soft); }
.org-tree-row.is-selected::before { content: ""; position: absolute; left: 0; top: .45rem; bottom: .45rem; width: 3px; border-radius: 3px; background: var(--c-accent); }
.org-tree-row.is-archived .org-tree-name { color: var(--c-ink-3); text-decoration: line-through; }
/* One guide per ancestor level: a hairline down the middle of the indent. */
.org-tree-guide { flex: 0 0 1.15rem; align-self: stretch; position: relative; }
.org-tree-guide::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--c-line-strong); }
.org-tree-toggle { flex: 0 0 1.15rem; height: 1.15rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--c-ink-3); font-size: .85rem; }
.org-tree-toggle:hover { background: var(--c-fill); color: var(--c-ink); }
.org-tree-toggle.is-empty { pointer-events: none; }
.org-tree-icon { flex: 0 0 auto; width: 1.65rem; height: 1.65rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--c-fill); color: var(--c-ink-2); font-size: .95rem; }
.org-tree-icon.is-branch { background: var(--hue-blue-soft); color: var(--hue-blue); }
.org-tree-icon.is-group { background: var(--hue-violet-soft); color: var(--hue-violet); }
.org-tree-icon.is-lg { width: 2.6rem; height: 2.6rem; border-radius: 12px; font-size: 1.3rem; }
.org-tree-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 500; }
.org-tree-label { flex: 0 0 auto; font-size: .72rem; color: var(--c-ink-3); }
.org-tree-modules { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .45rem; border-radius: 999px; background: var(--hue-teal-soft); color: var(--hue-teal); font-size: .72rem; font-weight: 600; }
.org-tree-add { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--c-ink-3); opacity: 0; transition: opacity .12s ease; }
.org-tree-row:hover .org-tree-add, .org-tree-row.is-selected .org-tree-add, .org-tree-add:focus-visible { opacity: 1; }
.org-tree-add:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.org-tree-none { padding: 1.5rem; text-align: center; color: var(--c-ink-3); font-size: .86rem; }

.org-detail-head { padding: 1.1rem 1.25rem 0; border-bottom: 1px solid var(--c-line); }
.org-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-size: .78rem; color: var(--c-ink-3); margin-bottom: .6rem; }
.org-crumbs button { border: 0; background: none; padding: 0; color: var(--c-ink-3); }
.org-crumbs button:hover { color: var(--c-accent); }
.org-crumbs span { color: var(--c-ink-2); }
.org-crumbs i { font-size: .7rem; opacity: .6; }
.org-detail-title { display: flex; align-items: center; gap: .8rem; }
.org-detail-title h2 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
.org-detail-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.org-detail-modules { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .9rem 0 .2rem; }
.org-module-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; background: var(--hue-teal-soft); color: var(--hue-teal); font-size: .78rem; font-weight: 500; }
.org-detail-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2.5rem 1rem; text-align: center; }
.org-detail-empty .org-tree-icon { margin-bottom: .35rem; }

/* Segmented tabs: an underline row that sits on the card's header divider. */
.seg-tabs { display: flex; gap: .25rem; overflow-x: auto; margin-top: .75rem; margin-bottom: -1px; }
.seg-tabs button { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .75rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--c-ink-3); font-size: .85rem; font-weight: 500; white-space: nowrap; }
.seg-tabs button:hover { color: var(--c-ink); }
.seg-tabs button.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.org-labels > summary { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; cursor: pointer; list-style: none; font-weight: 600; font-size: .92rem; }
.org-labels > summary::-webkit-details-marker { display: none; }
.org-labels-caret { color: var(--c-ink-3); margin-left: .6rem; transition: transform .15s ease; }
.org-labels[open] .org-labels-caret { transform: rotate(180deg); }
.org-labels > summary > span:first-child { flex: 1 1 auto; }

/* ── Summary list: label / value rows, label column fixed so values line up ── */
.summary-list { display: grid; gap: .65rem; margin: 0; }
.summary-list > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.summary-list dt { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; font-weight: 500; color: var(--c-ink-3); }
.summary-list dt i { font-size: 1rem; }
.summary-list dd { margin: 0; font-size: .92rem; color: var(--c-ink); }
@media (max-width: 575.98px) { .summary-list > div { grid-template-columns: 1fr; gap: .1rem; } }

/* A dropdown never stretches across a wide card: past ~34rem the options are no easier to read and the
   field stops looking like a choice. Narrow columns are unaffected; in an input group the group is capped. */
.form-select { max-width: 34rem; }
.input-group > .form-select { max-width: none; }
.input-group:has(> .form-select) { max-width: 40rem; }
table .form-select, .table .form-select { max-width: none; }

/* ── Order search picker (lab tests, scans, procedures) ────────────────── */
.order-search { position: relative; }
.order-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--c-ink-3); pointer-events: none; }
.order-search .form-control { padding-left: 2.2rem; }
.order-results, .order-selected { margin-top: .6rem; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.order-results { max-height: 24rem; overflow-y: auto; }
.order-selected { margin-top: 0; }
.order-result {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    padding: .6rem .85rem; border: 0; border-bottom: 1px solid var(--c-line); background: transparent; text-align: left; color: inherit;
}
.order-result:last-child { border-bottom: 0; }
.order-result:hover:not(:disabled) { background: var(--c-accent-soft); }
.order-result.is-added { opacity: .55; cursor: default; }
.order-result-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.order-result-name { font-weight: 500; font-size: .9rem; }
.order-result-detail { font-size: .76rem; color: var(--c-ink-3); }
.order-result-price { flex: 0 0 auto; font-size: .8rem; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.order-result-action { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--c-accent-soft); color: var(--c-accent); }
.order-result.is-added .order-result-action { background: var(--c-ok-soft); color: var(--c-ok); }
.order-results-empty, .order-results-more { padding: .9rem; color: var(--c-ink-3); font-size: .86rem; }
.order-results-more { border-top: 1px solid var(--c-line); font-size: .78rem; }
.order-item { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .85rem; border-bottom: 1px solid var(--c-line); }
.order-item:last-child { border-bottom: 0; }
.order-item-body { flex: 1 1 auto; min-width: 0; }
.order-item-name { font-weight: 600; font-size: .9rem; }
.order-item-meta { font-size: .76rem; color: var(--c-ink-3); }
.order-item .form-control { margin-top: .4rem; }

/* ── System Preferences: theme cards and font sizer ─────────────────────── */
.theme-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.theme-option {
    position: relative; display: flex; flex-direction: column; gap: .6rem; padding: .75rem; text-align: left;
    background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink);
}
.theme-option:hover { border-color: var(--c-line-strong); }
.theme-option.is-selected { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-ring); }
.theme-option-text { display: flex; flex-direction: column; gap: .15rem; }
.theme-option-check { position: absolute; top: .55rem; right: .6rem; color: var(--c-accent); font-size: 1.15rem; }
.theme-swatch { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 4.5rem; padding: 6px; border-radius: var(--r-sm); border: 1px solid var(--c-line); }
.theme-swatch span { border-radius: 5px; }
.theme-swatch span:first-child { grid-row: span 2; }
.theme-swatch-light { background: #eef1f6; }
.theme-swatch-light span { background: #fff; }
.theme-swatch-dark { background: #0f1115; }
.theme-swatch-dark span { background: #1b1e24; }
.theme-swatch-system { background: linear-gradient(135deg, #eef1f6 50%, #0f1115 50%); }
.theme-swatch-system span:nth-child(1) { background: #fff; }
.theme-swatch-system span:nth-child(2) { background: #fff; }
.theme-swatch-system span:nth-child(3) { background: #2a2e36; }
.font-sizer { display: flex; align-items: center; gap: .9rem; }
.font-sizer .fs-small { font-size: .75rem; font-weight: 600; }
.font-sizer .fs-large { font-size: 1.2rem; font-weight: 600; }
.font-sizer-value { min-width: 3.25rem; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.font-sizer-step { width: 2.5rem; height: 2.5rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; }

/* A smooth slider: a slim rounded track filled up to the handle (--pct, set as it moves), and a soft round handle. */
.font-sizer-range {
    --pct: 33.3%;
    flex: 1 1 auto;
    min-width: 0;
    height: 1.75rem;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    touch-action: pan-y;
}
.font-sizer-range:focus { outline: none; }
.font-sizer-range::-webkit-slider-runnable-track {
    height: .375rem;
    border-radius: 999px;
    background: linear-gradient(to right, var(--c-accent) 0 var(--pct), var(--c-fill) var(--pct) 100%);
}
.font-sizer-range::-moz-range-track { height: .375rem; border-radius: 999px; background: var(--c-fill); }
.font-sizer-range::-moz-range-progress { height: .375rem; border-radius: 999px; background: var(--c-accent); }
.font-sizer-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -.4375rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--c-accent);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
    transition: transform .12s ease, box-shadow .12s ease;
}
.font-sizer-range::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--c-accent);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .25);
    transition: transform .12s ease, box-shadow .12s ease;
}
.font-sizer-range:hover::-webkit-slider-thumb, .font-sizer-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.font-sizer-range:hover::-moz-range-thumb, .font-sizer-range:active::-moz-range-thumb { transform: scale(1.12); }
.font-sizer-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 .3rem var(--c-accent-ring); }
.font-sizer-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 .3rem var(--c-accent-ring); }
.services-add { padding: .85rem; border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface-2); }
.services-table tr.is-inactive td { color: var(--c-ink-3); }
.services-table tr.is-inactive .fw-semibold { text-decoration: line-through; text-decoration-color: var(--c-ink-3); }
.services-table tr.services-history-row > td { background: var(--c-surface-2); padding: .85rem; }
.price-history-table td, .price-history-table th { vertical-align: top; }
.price-history-table td .badge { font-weight: 600; }
/* Meal menu: one card per meal slot of the chosen diet and day. */
.meal-card { display: flex; flex-direction: column; height: 100%; padding: .85rem; border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.meal-card.is-empty { border-style: dashed; border-color: var(--c-line-strong); background: var(--c-surface-2); }
.meal-card.is-inactive { opacity: .6; }
.meal-card .btn.mt-auto { margin-top: auto !important; }
.meal-card-menu { white-space: pre-line; margin-bottom: .75rem; }
.meal-day-chip { display: inline-flex; align-items: center; padding: .3rem .6rem; border: 1px solid var(--c-line-strong); border-radius: 999px; font-size: .85rem; cursor: pointer; }
.meal-day-chip.is-taken { opacity: .5; cursor: not-allowed; }
.meal-new-diet .form-control { min-width: 9rem; }
/* On a phone each change is a small card: what changed and the price first, then when, who and where. */
@media (max-width: 575.98px) {
    .table-responsive > .price-history-table, .price-history-table tbody { display: block; width: 100%; min-width: 0; }
    .price-history-table thead { display: none; }
    .price-history-table tr {
        display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; row-gap: .2rem;
        grid-template-areas: "service price" "area change" "when by" "where where";
        padding: .65rem 0; border-bottom: 1px solid var(--c-line);
    }
    .price-history-table td { display: block; padding: 0; border: 0; }
    .price-history-table .ph-service { grid-area: service; }
    .price-history-table .ph-price { grid-area: price; }
    .price-history-table .ph-area { grid-area: area; }
    .price-history-table .ph-change { grid-area: change; text-align: right; }
    .price-history-table .ph-when { grid-area: when; }
    .price-history-table .ph-by { grid-area: by; text-align: right; }
    .price-history-table .ph-where { grid-area: where; }
}
/* ── Reports page cards ───────────────────────────────────────────────────
   One per report: icon and title, a line on what it covers, up to three headline figures, then its period and a way
   in. The hue only marks which report it is. */
.report-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.report-card {
    --card-hue: var(--hue-blue); --card-hue-soft: var(--hue-blue-soft);
    display: flex; flex-direction: column; gap: 1rem; height: 100%;
    padding: 1.1rem 1.15rem 1rem; border-radius: var(--r-lg, 16px);
    background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink);
    box-shadow: var(--shadow-1, none); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--card-hue-soft); color: var(--c-ink); }
.report-card[data-hue="violet"] { --card-hue: var(--hue-violet); --card-hue-soft: var(--hue-violet-soft); }
.report-card[data-hue="teal"] { --card-hue: var(--hue-teal); --card-hue-soft: var(--hue-teal-soft); }
.report-card[data-hue="amber"] { --card-hue: var(--hue-amber); --card-hue-soft: var(--hue-amber-soft); }
.report-card[data-hue="rose"] { --card-hue: var(--hue-rose); --card-hue-soft: var(--hue-rose-soft); }
.report-card[data-hue="green"] { --card-hue: var(--hue-green); --card-hue-soft: var(--hue-green-soft); }
.report-card-head { display: flex; gap: .8rem; align-items: flex-start; }
.report-card-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--card-hue-soft); color: var(--card-hue); font-size: 1.3rem;
}
.report-card-title { font-size: 1.02rem; font-weight: 650; line-height: 1.25; }
.report-card-desc { font-size: .82rem; color: var(--c-ink-3); margin-top: .15rem; line-height: 1.4; }
.report-card-figures { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Wide enough for a whole word ("registrations"); three sit on a row where they fit, else two and one below. */
.report-card-figures > .report-card-figure { flex: 1 1 6.25rem; }
/* Money takes the card's width, so an amount is never cut short. */
.report-card-figures > .report-card-figure.is-wide { flex-basis: 100%; }
.report-card-figure { padding: .55rem .65rem; border-radius: 10px; background: var(--c-surface-2); min-width: 0; }
.report-card-value { font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.report-card-label { font-size: .74rem; color: var(--c-ink-3); margin-top: .1rem; }
.report-card-figure.is-warn .report-card-value { color: var(--c-warn); }
.report-card-figure.is-danger .report-card-value { color: var(--c-danger); }
.report-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--c-line); font-size: .78rem; color: var(--c-ink-3); }
.report-card-open { color: var(--card-hue); font-size: 1rem; line-height: 1; }
:root[data-bs-theme="dark"] .report-card-open { color: #fff; }

/* ── Tables on a phone ─────────────────────────────────────────────────────
   Two patterns, chosen by what the table is for:
   • .table-cards — lists you work through (patients, requests, queues, bills). Each row becomes a card: the cell
     marked .tc-title (what the row is) and .tc-status (its state) on top, every other cell below as "Label: value"
     (label from the cell's data-label), and the cell marked .tc-actions as a row of buttons at the bottom. A cell
     marked .tc-hide is left out on a phone. Rows with one cell spanning the table (empty states) stay plain.
     Wide lists (seven or more columns) are cards on a tablet as well.
   • .table-sticky-first — data you compare across columns (reports, results, charts, statements). The table keeps
     its columns and scrolls sideways, with its first column fixed so the row stays named. */
@media (max-width: 575.98px) {
    .table-responsive > .table-cards, .table-cards > tbody { display: block; width: 100%; min-width: 0; }
    .table-cards > thead { display: none; }
    .table-cards > tbody > tr {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: .75rem; row-gap: .3rem;
        padding: .8rem 1rem; border-bottom: 1px solid var(--c-line);
    }
    .table-cards > tbody > tr:last-child { border-bottom: 0; }
    .table-responsive > .table-cards > tbody > tr > td,
    .table-cards > tbody > tr > td { display: block; padding: 0; border: 0; background: none; box-shadow: none; white-space: normal; text-align: left; }
    .table-cards > tbody > tr > td.tc-title { order: 0; flex: 1 1 0; min-width: 0; font-weight: 600; color: var(--c-ink); }
    .table-cards > tbody > tr > td.tc-status { order: 1; flex: 0 1 auto; margin-left: auto; text-align: right; }
    .table-cards > tbody > tr > td:not(.tc-title):not(.tc-status):not(.tc-actions) { order: 2; flex: 1 1 100%; font-size: .86rem; color: var(--c-ink-2); }
    .table-cards > tbody > tr > td[data-label]:not(.tc-title):not(.tc-status):not(.tc-actions)::before { content: attr(data-label) ": "; color: var(--c-ink-3); }
    .table-cards > tbody > tr > td.tc-actions { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; padding-top: .25rem; }
    .table-cards > tbody > tr > td:empty, .table-cards > tbody > tr > td.tc-hide { display: none; }
    .table-cards > tbody > tr > td[colspan] { flex: 1 1 100%; font-size: inherit; }
    .table-cards > tbody > tr > td[colspan]::before { content: none !important; }
    /* A full-width row that follows a record (its notes, its history) belongs to that record's card. */
    .table-cards > tbody > tr:has(+ tr > td[colspan]:only-child) { border-bottom: 0; padding-bottom: .35rem; }
    .table-cards > tbody > tr:has(> td[colspan]:only-child) { padding-top: 0; }
    .table-cards .form-control, .table-cards .form-select { width: 100%; }
    /* A cell holding a field (an entry grid) is labelled like a form field, the field on its own line. */
    .table-cards > tbody > tr > td.tc-title:has(input, select, textarea) { flex: 1 1 100%; font-weight: 400; }
    /* ...and its status sits at the top right, above the fields. */
    .table-cards > tbody > tr:has(> td.tc-title :is(input, select, textarea)) > td.tc-status { order: -1; flex: 1 1 100%; text-align: right; }
    /* Cells centred or right-aligned in the table read left to right in a card. */
    .table-cards > tbody > tr > td:is(.text-center, .text-end):not(.tc-status):not(.tc-actions) { text-align: left !important; }
    .table-cards > tbody > tr > td[data-label][data-label]:not(.tc-status):not(.tc-actions):has(input, select, textarea)::before {
        content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .8rem; font-weight: 600; color: var(--c-ink-2);
    }
}
/* Up to tablet width, a comparison table scrolls sideways with one line per cell (rather than squeezing a dozen
   columns until dates break over three lines), and keeps its first column in view. */
@media (max-width: 991.98px) {
    .table-responsive > .table-sticky-first:has(> thead > tr > th:nth-child(4)) { min-width: 38rem; }
    .table-responsive > .table-sticky-first > :not(caption) > * > * { white-space: nowrap; }
    .table-sticky-first > :not(caption) > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--c-surface); box-shadow: 1px 0 0 var(--c-line); }
}
/* On a tablet, lists of seven or more columns don't fit either, so they are cards there too, with their details two
   to a line. Narrower lists stay tables. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .table-responsive > .table-cards:has(> thead > tr > th:nth-child(7)), .table-cards:has(> thead > tr > th:nth-child(7)) > tbody { display: block; width: 100%; min-width: 0; }
    .table-cards:has(> thead > tr > th:nth-child(7)) > thead { display: none; }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: .75rem; row-gap: .3rem;
        padding: .8rem 1rem; border-bottom: 1px solid var(--c-line);
    }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr:last-child { border-bottom: 0; }
    .table-responsive > .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td,
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td { display: block; padding: 0; border: 0; background: none; box-shadow: none; white-space: normal; text-align: left; }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td.tc-title { order: 0; flex: 1 1 0; min-width: 0; font-weight: 600; color: var(--c-ink); }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td.tc-status { order: 1; flex: 0 1 auto; margin-left: auto; text-align: right; }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td:not(.tc-title):not(.tc-status):not(.tc-actions) { order: 2; flex: 1 1 100%; font-size: .86rem; color: var(--c-ink-2); }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td[data-label]:not(.tc-title):not(.tc-status):not(.tc-actions)::before { content: attr(data-label) ": "; color: var(--c-ink-3); }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td.tc-actions { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; padding-top: .25rem; }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td:empty, .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td.tc-hide { display: none; }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td[colspan] { flex: 1 1 100%; font-size: inherit; }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td[colspan]::before { content: none !important; }
    /* A full-width row that follows a record (its notes, its history) belongs to that record's card. */
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr:has(+ tr > td[colspan]:only-child) { border-bottom: 0; padding-bottom: .35rem; }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr:has(> td[colspan]:only-child) { padding-top: 0; }
    .table-cards:has(> thead > tr > th:nth-child(7)) .form-control, .table-cards:has(> thead > tr > th:nth-child(7)) .form-select { width: 100%; }
    /* A cell holding a field (an entry grid) is labelled like a form field, the field on its own line. */
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td.tc-title:has(input, select, textarea) { flex: 1 1 100%; font-weight: 400; }
    /* ...and its status sits at the top right, above the fields. */
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr:has(> td.tc-title :is(input, select, textarea)) > td.tc-status { order: -1; flex: 1 1 100%; text-align: right; }
    /* Cells centred or right-aligned in the table read left to right in a card. */
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td:is(.text-center, .text-end):not(.tc-status):not(.tc-actions) { text-align: left !important; }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td[data-label][data-label]:not(.tc-status):not(.tc-actions):has(input, select, textarea)::before {
        content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .8rem; font-weight: 600; color: var(--c-ink-2);
    }
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td:not(.tc-title):not(.tc-status):not(.tc-actions):not([colspan]) { flex: 1 1 calc(50% - .75rem); align-self: flex-start; }
    /* The title takes most of the first line, so the details start on the next one. */
    .table-cards:has(> thead > tr > th:nth-child(7)) > tbody > tr > td.tc-title { flex-basis: 60%; }
}
}

/* Services & Pricing on a phone: each service is a card (name and price, then status and its buttons), so the
   buttons aren't hidden off the side of a table that scrolls sideways. */
@media (max-width: 575.98px) {
    .table-responsive > .services-table, .services-table tbody { display: block; width: 100%; min-width: 0; }
    .services-table thead { display: none; }
    .services-table tr:not(.services-history-row) {
        display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; row-gap: .45rem; align-items: center;
        padding: .75rem 0; border-bottom: 1px solid var(--c-line);
    }
    .services-table tr:not(.services-history-row) > td { display: block; padding: 0; border: 0; }
    .services-table tr:not(.services-history-row) > td:nth-child(2) { text-align: right; }
    .services-table tr:not(.services-history-row) > td:last-child { text-align: right; white-space: normal; }
    .services-table tr.services-history-row { display: block; }
    .services-table tr.services-history-row > td { display: block; }
}
/* New bill on a phone: each line is a card (what and its total; type and unit price; quantity and remove). */
@media (max-width: 575.98px) {
    .table-responsive > .bill-lines-table, .bill-lines-table tbody { display: block; width: 100%; min-width: 0; }
    .bill-lines-table thead { display: none; }
    .bill-lines-table tr {
        display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; row-gap: .35rem; align-items: center;
        grid-template-areas: "desc total" "type unit" "qty remove";
        padding: .75rem 0; border-bottom: 1px solid var(--c-line);
    }
    .bill-lines-table td { display: block; padding: 0; border: 0; }
    .bill-lines-table .bl-desc { grid-area: desc; font-weight: 600; }
    .bill-lines-table .bl-total { grid-area: total; text-align: right; font-weight: 600; }
    .bill-lines-table .bl-type { grid-area: type; color: var(--c-ink-3); }
    .bill-lines-table .bl-unit { grid-area: unit; text-align: right; color: var(--c-ink-3); font-size: .85rem; }
    .bill-lines-table .bl-unit::before { content: "Unit "; }
    .bill-lines-table .bl-qty { grid-area: qty; max-width: 7rem; }
    .bill-lines-table .bl-remove { grid-area: remove; text-align: right; }
}
/* Amounts carry a currency symbol now; keep "GH₵ 150.00" on one line in right-aligned (money) cells. */
.table td.text-end, .table th.text-end { white-space: nowrap; }

/* ── Queue section titles coloured by stage (lab requests) ──────────────── */
/* Only the stage name is coloured; the card itself stays plain. */
.queue-section .queue-section-title { color: var(--qs-color); }
.queue-section[data-tone="orange"] { --qs-color: #c2570c; --qs-soft: rgba(234, 88, 12, .1); }
.queue-section[data-tone="green"] { --qs-color: var(--c-ok); --qs-soft: var(--c-ok-soft); }
.queue-section[data-tone="blue"] { --qs-color: var(--hue-blue); --qs-soft: var(--hue-blue-soft); }
.queue-section[data-tone="violet"] { --qs-color: var(--hue-violet); --qs-soft: var(--hue-violet-soft); }
.queue-section[data-tone="red"] { --qs-color: var(--c-danger); --qs-soft: var(--c-danger-soft); }
.queue-section[data-tone="neutral"] { --qs-color: var(--c-neutral); --qs-soft: var(--c-neutral-soft); }
:root[data-bs-theme="dark"] .queue-section[data-tone="orange"] { --qs-color: #fb923c; --qs-soft: rgba(251, 146, 60, .16); }