/* =========================================================
   ELEVITA THEME VARIABLES 
   ========================================================= */
:root {
    /* =====================================================
       Secondary / Teal Accent (used in gradients & highlights)
       ===================================================== */
    --elevita-accent-teal: #2fa4a0;
    --elevita-accent-teal-dark: #1f7a74;
    --elevita-accent-teal-darker: #155e63;
    /* =====================================================
       Status Colors
       ===================================================== */
    --elevita-success: #10b981;
    --elevita-warning: #f59e0b;
    --elevita-warning-text: #fcd34d;
    --elevita-warning-border: #a16207;
    --elevita-danger: #dc3545;
    /* =====================================================
       Focus Rings / Glow Effects
       ===================================================== */
    --elevita-focus-ring-blue: rgba(37, 140, 251, 0.25);
    --elevita-focus-ring-teal: rgba(47, 164, 160, 0.25);
    /* =====================================================
       Shadows
       ===================================================== */
    --elevita-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --elevita-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
    --elevita-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
    --elevita-shadow-xl-dark: 0 30px 60px rgba(0, 0, 0, 0.6);
    /* =====================================================
       Utility Grays (only missing shades)
       ===================================================== */
    --elevita-gray-900: #111827;
    --elevita-gray-800: #1f2937;
    --elevita-gray-700: #374151;
    --elevita-gray-500: #6b7280;
    /* =====================================================
       Dark Mode Surfaces
       ===================================================== */
    --elevita-surface-dark-950: #020617; /* page background */
    --elevita-surface-dark-900: #0f172a; /* primary dark surface */
    --elevita-surface-dark-800: #1e293b; /* borders / chrome */
    --elevita-surface-dark-700: #334155; /* elevated accents */
    /* =====================================================
       Dark Warning Surface
       ===================================================== */
    --elevita-warning-bg-dark: #3b2a13;
    /* =====================================================
    Focus / Accent Blue (base color)
    ===================================================== */
    --elevita-focus-blue: #258cfb;
    /* =====================================================
    Background.
    ===================================================== */
    --elevita-bg-page: #f5f7fb;
    --elevita-body-bg: var(--elevita-bg-page);
    --elevita-brand-text: #427978;
}

:root[data-bs-theme] {
    --elevita-bg-page: #f5f7fb; /* default */
    --bs-body-bg: var(--elevita-body-bg);
}

/* ============================================
   Elevita Theme → Bootstrap Variable Bridge
============================================ */

:root {
    --bs-primary: var(--elevita-primary);
    --bs-secondary: var(--elevita-secondary);
    --bs-success: var(--elevita-success);
    --bs-danger: var(--elevita-danger);
    --bs-warning: var(--elevita-warning);
    --bs-info: var(--elevita-info);
    --bs-body-bg: var(--elevita-bg-page);
    --bs-body-color: var(--elevita-text-primary);
    --bs-border-color: var(--elevita-border);
}

.elevita-brand {
    color: var(--elevita-brand-text);
}

.elevita-brand:hover,
.elevita-brand:focus,
.elevita-brand:hover i,
.elevita-brand:focus i {
    color: var(--elevita-brand-text);
}

/* Elevita brand color (links + buttons) */
.elevita-brand {
    color: var(--elevita-brand-text);
}

/* Button-based links (Logout) */
button.elevita-brand,
button.elevita-brand.btn-link {
    color: var(--elevita-brand-text);
}

/* focus consistency */
.elevita-brand:focus,
button.elevita-brand:focus {
    color: var(--elevita-brand-text);
    text-decoration: none;
}

button.elevita-brand.btn-link {
    text-decoration: none;
}

.elevita-brand:hover {
    filter: brightness(0.92);
}

/* Logout button (Bootstrap btn-link override) */
.navbar .btn.btn-link.elevita-brand {
    color: var(--elevita-brand-text);
}

/* Navbar brand text + links */
.navbar .nav-link.elevita-brand {
    color: var(--elevita-brand-text);
}

/* Icons inside brand links */
.navbar .nav-link.elevita-brand i,
.navbar .nav-link.elevita-brand span {
    color: var(--elevita-brand-text);
}


/* =========================================
   Base typography / layout
   ========================================= */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@font-face {
    font-family: "Inter";
    src: url("/css/fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
    font-weight: 100 900; /* variable range */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("/css/fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Theme-aware page background */
body {
    margin-bottom: 0;
    min-height: 100vh;
}

.surface {
    overflow: visible;
}

/* Focus rings */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--elevita-focus-blue) !important;
}

.form-check-input[type="checkbox"][role="switch"]:focus-visible {
    box-shadow: 0 0 0 2px var(--elevita-focus-blue);
}

/* [2026-02-25 MKO] Keep add encounter button icon visible on hover */
.enc-add-btn:hover,
.enc-add-btn:focus {
    color: var(--elevita-gray-700);
}


.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Optionally make TomSelect inputs match the height of .form-control */
.ts-control.form-control {
    min-height: calc(2em + .75rem + 2px);
    padding: .375rem .75rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* =========================================
   Theme variables (light + dark)
   ========================================= */

/* LIGHT */
html[data-bs-theme="light"] {
    --bs-body-bg: var(--elevita-bg-page); /* light page bg */
    --elevita-surface-bg: var(--elevita-surface-bg, #f7f7f7);
    --elevita-surface-border: #e5e7eb;
    --elevita-surface-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.10);
    --elevita-muted-600: #667085;
    --elevita-muted-700: #475467;
    --elevita-hairline: #e5e7eb;
    --elevita-hairline-2: #eceff3;
    --elevita-gray-50: #f8fafc;
    --elevita-permission-bg-on: rgb(110 231 183 / 0.5);
    --elevita-permission-color-on: rgb(71 85 105);
    --elevita-permission-border-on: solid rgb(52 211 153) 1px;
    --elevita-permission-bg-off: rgb(203 213 225);
    --elevita-permission-color-off: rgb(71 85 105);
    --elevita-permission-border-off: solid rgb(148 163 184) 1px;
    --elevita-permission-bg-inherited: rgb(110 183 231 / 0.5);
    --elevita-permission-color-inherited: rgb(71 85 105);
    --elevita-permission-border-inherited: dashed rgb(52 153 211) 2px;
}

/* DARK */
html[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: var(--elevita-bg-page);
    --elevita-surface-bg: var(--elevita-surface-bg, #2b2b2b);
    --elevita-surface-border: var(--elevita-gray-800);
    --elevita-surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.35);
    --elevita-muted-600: #9aa3b2;
    --elevita-muted-700: #cbd5e1;
    --elevita-hairline: var(--elevita-gray-800);
    --elevita-hairline-2: var(--elevita-gray-900);
    --elevita-gray-50: var(--elevita-surface-dark-950);
    --elevita-permission-bg-on: rgb(110 231 183 / 0.5);
    --elevita-permission-border-on: solid rgb(52 211 153) 1px;
    --elevita-permission-color-on: rgb(255 255 255);
    --elevita-permission-bg-off: rgb(203 213 225);
    --elevita-permission-color-off: rgb(71 85 105);
    --elevita-permission-border-off: solid rgb(148 163 184) 1px;
    --elevita-permission-bg-inherited: rgb(110 183 231 / 0.5);
    --elevita-permission-color-inherited: rgb(255 255 255);
    --elevita-permission-border-inherited: dashed rgb(52 153 211) 2px;
}

/* =========================================
   Tailwind-like look & feel on top of BS
   ========================================= */

/* Dot / accent colors */
.bg-emerald-500 {
    background-color: var(--elevita-success);
}
/* green */
.bg-amber-500 {
    background-color: var(--elevita-warning);
}
/* amber */
.bg-indigo-500 {
    background-color: #6366f1;
}
/* indigo */
.bg-rose-500 {
    background-color: #f43f5e;
}
/* rose */
.bg-gray-400 {
    background-color: #9ca3af;
}

/* Core surfaces use theme vars */
.card,
.list-group,
.alert,
.navbar,
.dropdown-menu {
    border-radius: 1rem; /* rounded-2xl-ish */
    box-shadow: var(--elevita-bg-card);
}

/* Section padding */
.card-body {
    padding: 1.25rem;
    background: transparent;
    border-radius: 0;
}

/* Section header labels (CLIENT, ADDRESS…) */
.text-kicker {
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .72rem;
    color: var(--elevita-badge-primary);
    font-weight: 600;
}

/* List-group edges like Tailwind lists */
.list-group-item {
    border-left: 0;
    border-right: 0;
}

.list-group-item:first-child {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-top: 1px solid var(--elevita-hairline);
}

.list-group-item:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom: 1px solid var(--elevita-hairline);
}

/* Soft chips/badges (light theme defaults) */
.badge-soft-warning {
    background: #fff7e6;
    color: #a15c07;
    border: 1px solid #fde4b6;
}

.badge-soft-primary {
    background: var(--elevita-brand-primary-soft);
    color: #3730a3;
    border: 1px solid var(--elevita-brand-primary-border);
}

.badge-soft-neutral {
    background: #ffffff;
    color: #344054;
    border: 1px solid #d0d5dd;
}

.badge-soft-crosswalk {
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #5eead4;
}

.pn-diagnosis-codeset-pill {
    font-size: 0.68rem;
    line-height: 1;
}

.badge-soft-danger {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

/* [2026-03-11 MKO] Greyed-out badge for Inactive/Not-in-use states */
.badge-soft-muted {
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
}

/* [2026-02-07 MKO] Clinical Settings status badges */
.badge-status-notstarted {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
}

.badge-status-inprogress {
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #93c5fd !important;
}

.badge-status-completed {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #6ee7b7 !important;
}

/* Active sidebar item feel */
.list-group-item.active {
    background: var(--elevita-brand-primary-soft);
    color: #3730a3;
    border-color: var(--elevita-brand-primary-border);
}

/* Pills instead of tabs */
.nav-pills .nav-link {
    border-radius: 999px;
    padding: .5rem 1rem;
}


/* Tiny dot bullet */
.dot-6 {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    display: inline-block;
    background: #6c757d;
}

/* Rounded helpers */
.rounded-xl {
    border-radius: .75rem !important;
}

.rounded-2xl {
    border-radius: 1rem !important;
}

.rounded-3xl {
    border-radius: 1.5rem !important;
}

/* Shadow helpers */
.shadow-soft {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 1px 3px rgba(16, 24, 40, 0.16) !important;
}

.shadow-soft-lg {
    box-shadow: 0 10px 15px rgba(16, 24, 40, 0.16), 0 4px 6px rgba(16, 24, 40, 0.12) !important;
}

/* Gap helpers */
.gap-1 {
    gap: .25rem !important;
}

.gap-2 {
    gap: .5rem !important;
}

.gap-3 {
    gap: .75rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-6 {
    gap: 1.5rem !important;
}

.gap-8 {
    gap: 2rem !important;
}

/* Padding helpers */
.px-3p {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.px-4p {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.py-3p {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4p {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Subtle text tones */
.text-muted-600 {
    color: var(--elevita-muted-600) !important;
}

.text-muted-700 {
    color: var(--elevita-muted-700) !important;
}

/* Status text colors */
.elevita-text-danger {
    color: var(--elevita-danger);
}

/* Panel bg (light vs dark) */
.bg-panel {
    background: var(--elevita-gray-50) !important;
}

/* Soft container for full-width layouts */
.container-soft {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 992px) {
    .container-soft {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Font size */
.fs-xs {
    font-size: 0.75rem;
}

/* =========================================
   Shared surfaces & “soft” trays
   ========================================= */

/* Generic surface card */
.surface {
    background: var(--elevita-surface-bg);
    border: 1px solid var(--elevita-hairline);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.10);
}

/* Breadcrumb bar */
.breadcrumb-wrap {
    border-bottom: 1px solid var(--elevita-hairline-2);
    background: var(--elevita-surface-bg);
}

/* “Soft tray” around To-Do list */
.list-soft {
    background: var(--elevita-gray-50);
    border: 1px solid var(--elevita-hairline);
    border-radius: 1rem;
    padding: .5rem;
}

.list-soft .list-group {
    border-radius: .875rem;
    overflow: hidden;
    background: var(--elevita-surface-bg);
    border: 1px solid var(--elevita-hairline);
}

.list-soft .list-group-item {
    border-color: var(--elevita-hairline-2);
    padding: .9rem 1rem;
}

.list-soft .list-group-item:first-child {
    border-top-color: var(--elevita-hairline-2);
}

.list-soft .list-group-item:last-child {
    border-bottom-color: var(--elevita-hairline-2);
}

/* Badges a bit bolder */
.badge {
    font-weight: 600;
    padding: .35em .6em;
}

/* Avatar in summary card */
.avatar-soft {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
    border-radius: .75rem;
}

/* =========================================
   Sidenav (Tailwind-like)
   ========================================= */

.sidenav {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.sidenav .item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    border-radius: .85rem;
    color: #344054;
    text-decoration: none;
}

.sidenav .item:hover {
    background: #f3f4f6;
}

.sidenav .item.active {
    background: var(--elevita-brand-primary-soft);
    color: var(--elevita-brand-primary);
    box-shadow: inset 0 0 0 1px #e5e7eb;
}

.sidenav .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #9ca3af;
    flex: 0 0 8px;
}

.sidenav .item.active .dot {
    background: #8b5cf6;
}

:root {
    --leftnav-width: 12rem; /* expanded */
    --leftnav-collapsed: 1.75rem; /* collapsed */
}

/* Dark-mode tweaks for sidenav */
:root[data-bs-theme="dark"] .sidenav .item {
    color: #e5e7eb;
}

:root[data-bs-theme="dark"] .sidenav .item:hover {
    background: var(--elevita-gray-800);
}

/*:root[data-bs-theme="dark"] .sidenav .item.active {
    background: var(--elevita-surface-dark-800);
    color: var(--elevita-brand-primary-border);
    box-shadow: inset 0 0 0 1px var(--elevita-surface-dark-700);
}*/

:root[data-bs-theme="dark"] .sidenav .dot {
    background: #64748b;
}

:root[data-bs-theme="dark"] .sidenav .item.active .dot {
    background: #a855f7;
}

/* =========================================
   Dark-mode specific component tweaks
   ========================================= */

/* List group items */
:root[data-bs-theme="dark"] .list-group-item {
    background-color: transparent;
    border-color: var(--elevita-surface-border);
}

/* Active list-group item (non-sidenav) */
:root[data-bs-theme="dark"] .list-group-item.active {
    background: var(--elevita-surface-dark-800);
    color: var(--elevita-brand-primary-border);
    border-color: var(--elevita-surface-dark-700);
}

/* Pills */
:root[data-bs-theme="dark"] .nav-pills .nav-link {
    color: #e5e7eb;
    background: transparent;
    border: 1px solid transparent;
}

:root[data-bs-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--elevita-brand-primary);
    color: var(--elevita-nav-selected-text);
}

/* Chips / badges in dark */
:root[data-bs-theme="dark"] .badge-soft-warning {
    background: var(--elevita-warning-bg-dark);
    color: var(--elevita-warning-text);
    border: 1px solid var(--elevita-warning-border);
}

:root[data-bs-theme="dark"] .badge-soft-primary {
    background: #1e1b4b;
    color: var(--elevita-brand-primary-border);
    border: 1px solidvar(--elevita-brand-primary-hover);
}

/* Dropdowns in dark mode – lighter text */
:root[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--elevita-surface-dark-950);
    color: #e5e7eb;
    border-color: var(--elevita-gray-800);
}

:root[data-bs-theme="dark"] .dropdown-item {
    color: #e5e7eb;
}

:root[data-bs-theme="dark"] .dropdown-item:hover,
:root[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--elevita-gray-800);
    color: #f9fafb;
}

:root[data-bs-theme="dark"] .badge-soft-neutral {
    background: #0b1220;
    color: #e5e7eb;
    border: 1px solid var(--elevita-surface-dark-700);
}

:root[data-bs-theme="dark"] .badge-soft-crosswalk {
    background: #134e4a;
    color: #99f6e4;
    border: 1px solid #0f766e;
}

:root[data-bs-theme="dark"] .badge-soft-danger {
    background: #4c0519;
    color: #fda4af;
    border: 1px solid #9f1239;
}

/* [2026-05-22 MKO] */
:root[data-bs-theme="dark"] .badge-soft-success {
    background: #052e16;
    color: #86efac;
    border: 1px solid #166534;
}

/* [2025-07-17 MKO] Greyed-out badge dark-mode for Inactive/Not-in-use states */
:root[data-bs-theme="dark"] .badge-soft-muted {
    background: #1f2937;
    color: #6b7280;
    border: 1px solid #374151;
}

/* [2026-02-07 MKO] Clinical Settings status badges in dark mode */
:root[data-bs-theme="dark"] .badge-status-notstarted {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border: 1px solid #991b1b !important;
}

:root[data-bs-theme="dark"] .badge-status-inprogress {
    background: #1e3a8a !important;
    color: #93c5fd !important;
    border: 1px solid #1e40af !important;
}

:root[data-bs-theme="dark"] .badge-status-completed {
    background: #064e3b !important;
    color: #6ee7b7 !important;
    border: 1px solid #065f46 !important;
}

/* Dot bullets */
:root[data-bs-theme="dark"] .dot-6 {
    background: #94a3b8;
}

/* Alerts */
:root[data-bs-theme="dark"] .alert-light {
    background: #0b1220;
    border-color: var(--elevita-gray-800);
    color: #cbd5e1;
}

/* Breadcrumb links */
:root[data-bs-theme="dark"] .breadcrumb .breadcrumb-item a {
    color: var(--elevita-brand-primary-border);
}

:root[data-bs-theme="dark"] .breadcrumb .breadcrumb-item.active {
    color: #9aa3b2;
}

/* === FINAL DARK-MODE OVERRIDES (put at very bottom of site.css) === */

/* Make the whole page background truly dark */
:root[data-bs-theme="dark"] html,
:root[data-bs-theme="dark"] body {
    background-color: var(--elevita-surface-dark-950) !important; /* deep slate */
}

/* Make Bootstrap containers transparent so they don't reintroduce light bg */
:root[data-bs-theme="dark"] .container,
:root[data-bs-theme="dark"] .container-fluid {
    background-color: transparent !important;
}

/* Sidebar column stays dark as well */
:root[data-bs-theme="dark"] .layout-sidebar {
    background-color: var(--elevita-surface-dark-950) !important;
    border-right-color: var(--elevita-gray-800);
}

/* === Footer override so it doesn't cover content === */
.footer {
    position: static !important; /* no fixed/absolute footer */
    width: 100%;
    line-height: normal;
}

/* === Locked-viewport layout (set ViewData["LockViewport"] = true) ===
   Pins the page contents to the viewport size so the page never
   scrolls — inner content below the header fills exactly the
   remaining area. Used for views like the scheduler where an
   inner widget owns its own scroll. Pairs naturally with
   ViewData["HideFooter"] = true, but the two are independent. */
body.layout-locked-viewport {
    height: 100vh;
    overflow: hidden;
}

body.layout-locked-viewport .app-shell {
    min-height: 0;
    height: 100vh;
    overflow: hidden;
}

body.layout-locked-viewport .app-main {
    min-height: 0 !important;
    height: calc(100vh - var(--app-header-height));
    overflow: hidden;
}

/* Make sure the outer gutters follow the theme too */
html[data-bs-theme="light"],
html[data-bs-theme="light"] body {
    background-color: var(--bs-body-bg) !important;
}

html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg) !important;
}

/* Ensure outer gutters match theme background */
html[data-bs-theme="light"],
html[data-bs-theme="light"] body {
    background-color: var(--elevita-body-bg) !important;
}

html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    background-color: var(--elevita-body-bg) !important;
}

/* Navbar auth links (Login/Logout) */
.navbar .nav-link.btn-link {
    text-decoration: none;
}

/* Dark mode: default navbar link text (non-branded only) */
html[data-bs-theme="dark"] .navbar .nav-link.btn-link:not(.elevita-brand) {
    color: #e5e7eb;
}

html[data-bs-theme="dark"] .navbar .nav-link.btn-link.elevita-brand {
    color: var(--elevita-brand-text) !important;
}

/* =========================================
   GLOBAL DARK-MODE FORM & DROPDOWN FIXES
   ========================================= */

/* Make ALL basic inputs light with dark text in dark mode */
html[data-bs-theme="dark"] input,
html[data-bs-theme="dark"] textarea,
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] .ts-control.form-control {
    background-color: #e5e7eb !important; /* light slate */
    color: var(--elevita-gray-900) !important; /* dark text */
    border-color: var(--elevita-surface-dark-800) !important;
}

/* Stronger placeholder in dark mode */
html[data-bs-theme="dark"] input::placeholder,
html[data-bs-theme="dark"] textarea::placeholder {
    color: #9ca3af !important; /* slate-400 */
    opacity: 1;
}

/* [2026-02-09 MKO] Enhanced checkbox visibility in dark mode */
html[data-bs-theme="dark"] .form-check-input {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
}

html[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #258cfb !important;
    border-color: #258cfb !important;
    box-shadow: 0 0 0 0.25rem rgba(37, 140, 251, 0.5);
}

html[data-bs-theme="dark"] .form-check-input:checked:focus {
    background-color: #258cfb !important;
    border-color: #258cfb !important;
    box-shadow: 0 0 0 0.25rem rgba(37, 140, 251, 0.5);
}

/* Generic popup/dropdown list containers (covers Bootstrap, bootstrap-table,
   bootstrap-select, and many ARIA listbox-style widgets) */
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] [role="listbox"],
html[data-bs-theme="dark"] ul[role="listbox"],
html[data-bs-theme="dark"] .show > ul[role="listbox"] {
    background-color: var(--elevita-surface-dark-900) !important; /* dark background */
    color: #e5e7eb !important;
    border-color: var(--elevita-surface-dark-800) !important;
}

/* Items inside those lists */
html[data-bs-theme="dark"] .dropdown-menu li,
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item,
html[data-bs-theme="dark"] [role="listbox"] li,
html[data-bs-theme="dark"] [role="option"] {
    color: #e5e7eb !important;
}

/* Hover / active state for list items */
html[data-bs-theme="dark"] .dropdown-menu li:hover,
html[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-bs-theme="dark"] [role="listbox"] li:hover,
html[data-bs-theme="dark"] [role="option"].active,
html[data-bs-theme="dark"] [role="option"]:hover {
    background-color: var(--elevita-surface-dark-800) !important;
    color: #ffffff !important;
}

/* =========================================
   BOOTSTRAP-TABLE FILTER SELECT FIX
   (These menus should stay LIGHT in dark mode)
   ========================================= */

/* The dropdown list background */
html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu.inner {
    background-color: #ffffff !important; /* pure white */
    color: #000000 !important;
}

/* Each list item */
html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu.inner .text {
    color: #000000 !important; /* black text */
}

/* Hover / active */
html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu.inner li:hover .text,
html[data-bs-theme="dark"] .bootstrap-select .dropdown-menu.inner li.active .text {
    color: #000000 !important;
    background-color: #e5e7eb !important; /* light gray hover */
}

/* The toggle button (the thing you click to open it) */
html[data-bs-theme="dark"] .bootstrap-select .dropdown-toggle {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #d1d5db !important; /* gray-300 */
}


/* =========================================
   Locations UI
   ========================================= */
.locations {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.locations > span {
    flex: 0 0 auto;
}

.location-pill {    
    background-color: #eef2f6;
    color: #000;    
}

.location-pill-primary {    
    background-color: var(--elevita-permission-bg-on);
    color: var(--elevita-permission-color-on) !important;    
}

.location-pill,
.location-pill-primary {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 9999px; /* full pill shape */
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
}

.location-select {
    min-width: 320px; /* adjust to taste */
}


/* =========================================
   Permissions UI
   ========================================= */
.permission-pill.inactive {
    opacity: .5;
}

.permission-pill-off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    width: 9em;
    background-color: var(--elevita-permission-bg-off);
    color: var(--elevita-permission-color-off) !important;
    border: var(--elevita-permission-border-off);
    border-radius: var(--bs-border-radius-xl) !important;
    white-space: nowrap;
    font-weight: 600 !important;
    padding: .25em !important;
    padding-right: .5em !important;
    padding-left: .5em !important;
    border: solid var(--elevita-muted-600) 1px;
}

.permission-pill-off .permission-dot {
    display: inline-block;
    background-color: rgb(71 85 105);
    border-radius: 9999px;
    width: 1em;
    height: 1em;
}

.permission-pill-inherited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    width: 9em;
    background-color: var(--elevita-permission-bg-inherited);
    color: var(--elevita-permission-color-inherited) !important;
    border: var(--elevita-permission-border-inherited);
    border-radius: var(--bs-border-radius-xl) !important;
    white-space: nowrap;
    font-weight: 600 !important;
    padding: .25em !important;
    padding-right: .5em !important;
    padding-left: .5em !important;
}

.permission-pill-inherited .permission-dot {
    display: inline-block;
    background-color: transparent;
    border-radius: 9999px;
    width: 1em;
    height: 1em;
}

.permission-pill-inherited .permission-dot::before {
    content: "\f4cf";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    vertical-align: .125em;
    -webkit-font-smoothing: antialiased;
}

.permission-pill-on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    width: 9em;
    background-color: var(--elevita-permission-bg-on);
    color: var(--elevita-permission-color-on) !important;
    border: var(--elevita-permission-border-on);
    border-radius: var(--bs-border-radius-xl) !important;
    white-space: nowrap;
    font-weight: 600 !important;
    padding: .25em !important;
    padding-right: .5em !important;
    padding-left: .5em !important;
}

.permission-pill-on .permission-dot {
    display: inline-block;
    background-color: rgb(255 255 255);
    border-radius: 9999px;
    width: 1em;
    height: 1em;
}

.permission-status-dot {
    display: inline-block;
    vertical-align: top;
    background-color: rgb(52 211 153);
    width: .5em;
    height: .5em;
    border-radius: 50%;
    margin-top: .17em;
}

.accessGroupCard {
    transition: box-shadow 200ms linear;
}

.accessGroupCard.selected {
    border: solid rgb(59 130 246) 1px;
    box-shadow: 0 0 7px rgb(59 130 246 / .5);
}

/* 2026-06-24 — LOC category card selection highlight (blue border, matches Permissions screen) */
/* overflow:hidden clips the inner list items to the card radius; the parent #locList must be overflow:visible for the outset shadow to show */
.loc-category-card {
    border-radius: 1rem;
    overflow: hidden;
}

.loc-category-card.loc-category-selected {
    border: 1px solid rgb(59 130 246);
    box-shadow: 0 0 7px rgb(59 130 246 / .5);
}

/* =========================================
   Tailwind-like form controls (Bootstrap + Elevita)
   ========================================= */

/* Theme-aware input tokens */
html[data-bs-theme="light"] {
    --elevita-input-bg: #ffffff;
    --elevita-input-text: var(--elevita-gray-900); /* slate-900 */
    --elevita-input-border: #d1d5db; /* gray-300 */
    --elevita-input-border-hover: #cbd5e1; /* slate-300 */
    --elevita-input-placeholder: #9ca3af; /* slate-400 */
}

html[data-bs-theme="dark"] {
    /* NOTE: your file already forces inputs/selects to be light in dark mode. Keep consistent. */
    --elevita-input-bg: #e5e7eb; /* light slate */
    --elevita-input-text: var(--elevita-gray-900); /* slate-900 */
    --elevita-input-border: var(--elevita-surface-dark-800); /* slate-800 */
    --elevita-input-border-hover: var(--elevita-surface-dark-700); /* slate-700 */
    --elevita-input-placeholder: #64748b; /* slate-500 */
}

/* Inputs + selects: rounded, clean, “Tailwind-y” */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm {
    border-radius: .75rem; /* ~rounded-xl */
    border: 1px solid var(--elevita-input-border);
    background-color: var(--elevita-input-bg);
    color: var(--elevita-input-text);
    padding: .55rem .75rem;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.form-control-sm,
.form-select-sm {
    padding: .35rem .6rem;
    border-radius: .6rem;
}

.form-control::placeholder {
    color: var(--elevita-input-placeholder);
    opacity: 1;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--elevita-input-border-hover);
}

/* Focus ring: use your existing focus ring idea, but keep it subtle */
.form-control:focus,
.form-select:focus {
    border-color: var(--elevita-focus-blue);
    box-shadow: 0 0 0 0.2rem var(--elevita-focus-ring-blue);
}

/* [2026-01-27 MKO] Match disabled select styling to readonly inputs in view mode */
.form-select:disabled {
    background-color: var(--elevita-input-bg);
    color: var(--elevita-input-text);
    opacity: 1;
}

/* Labels: slightly more “product UI” */
.form-label,
label {
    font-weight: 600;
}

/* Buttons: slightly more Tailwind-ish without fighting Bootstrap */
.btn {
    border-radius: .75rem;
    font-weight: 600;
    box-shadow: none;
}

.btn-sm {
    border-radius: .6rem;
}

/* Signature Pads */

.signaturePad {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 4 / 1;
    display: block;
    touch-action: none;
}

.initialPad {
    width: 50%;
    /*max-width: 400px;*/

    aspect-ratio: 2 / 1;
    display: block;
    touch-action: none;
}
 
/* =========================================
   Tom Select skin (matches Elevita)
   ========================================= */

/* Wrapper */
.ts-wrapper {
    min-height: 0;
}

/* The visible control (looks like an input) */
.ts-control {
    border-radius: .75rem;
    border: 1px solid var(--elevita-input-border);
    background-color: var(--elevita-input-bg);
    color: var(--elevita-input-text);
    padding: .45rem .65rem;
    box-shadow: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* The search input inside Tom Select */
.ts-control input {
    color: var(--elevita-input-text) !important;
}

/* Focus state */
.ts-wrapper.focus .ts-control {
    border-color: var(--elevita-focus-blue);
    box-shadow: 0 0 0 0.2rem var(--elevita-focus-ring-blue);
}

/* Dropdown */
.ts-dropdown {
    border-radius: .75rem;
    border: 1px solid var(--elevita-input-border);
    background: var(--elevita-surface-bg);
    box-shadow: var(--elevita-surface-shadow);
    overflow: hidden;
}

/* Options */
.ts-dropdown .option {
    padding: .5rem .75rem;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background: rgba(79, 70, 229, 0.12); /* indigo tint */
}

/* Multi-select “chips” */
.ts-wrapper.multi .ts-control > .item {
    border-radius: 999px;
    padding: .2rem .55rem;
    margin: .15rem .25rem .15rem 0;
    border: 1px solid var(--elevita-hairline);
    background: rgba(79, 70, 229, 0.10);
    color: var(--elevita-input-text);
}

/* Chip remove button */
.ts-wrapper.multi .ts-control > .item .remove {
    border-left: none;
    margin-left: .35rem;
    opacity: .8;
}

/* Ensure Tom Select fills the column like a normal .form-select */
.ts-wrapper,
.ts-control {
    width: 100%;
}

/* Placeholder text tone */
.ts-control input::placeholder {
    color: var(--elevita-input-placeholder) !important;
    opacity: 1;
}

/* Tom Select chips — Tailwind-style */
.ts-wrapper.multi .ts-control > .item {
    background-color: rgba(37, 99, 235, 0.10); /* blue-600 @ 10% */
    border: 1px solid rgba(37, 99, 235, 0.25);
    color: #1e3a8a; /* blue-900 */
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.ts-wrapper.multi .ts-control > .item .remove {
    color: #1e3a8a;
}

/* Inline admin links */
a.js-manage-picklist {
    font-size: 0.75rem;
    color: #2563eb; /* blue-600 */
    text-decoration: none;
}

a.js-manage-picklist:hover {
    text-decoration: underline;
}

/* [2026-01-19 MKO] Picklist drag handle - use CSS to reliably display hamburger icon
   This bypasses font/encoding issues when JS creates new rows dynamically */
.picklist-drag-handle {
    font-size: 0;
    line-height: 0;
    cursor: grab;
}

.picklist-drag-handle::before {
    content: "\2630"; /* ☰ hamburger icon via Unicode escape */
    font-size: 1rem;
    line-height: normal;
}

.bg-elevita-gradient {
    background: linear-gradient(160deg, var(--elevita-accent-teal-dark) 0%, var(--elevita-accent-teal) 100%);
}

.logo-tile {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--elevita-shadow-sm), var(--elevita-shadow-md);
}

.logo-tile img {
    max-width: 120px;
}

.login-form-panel {
    background-color: #ffffff;
}

.card {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.login-form-panel {
    background-color: #ffffff;
}

:root[data-bs-theme="dark"] .login-form-panel {
    background-color: rgba(30, 41, 59, 0.92); /* slate-800 w/ lift */
    color: #e5e7eb;
    /* Subtle separation from background */
    backdrop-filter: blur(2px);
}

:root[data-bs-theme="dark"] .card {
    box-shadow: var(--elevita-shadow-xl-dark);
}

/* Headings */
:root[data-bs-theme="dark"] h3 {
    color: #f9fafb;
}

/* Muted text */
:root[data-bs-theme="dark"] .text-muted {
    color: #9ca3af !important;
}

:root[data-bs-theme="dark"] .form-control {
    background-color: var(--elevita-surface-dark-800); /* slate-800 */
    border-color: var(--elevita-surface-dark-700); /* slate-700 */
    color: #f9fafb;
}

:root[data-bs-theme="dark"] .form-control::placeholder {
    color: #94a3b8;
}

:root[data-bs-theme="dark"] .form-control:focus {
    background-color: var(--elevita-surface-dark-800);
    border-color: var(--elevita-accent-teal);
    box-shadow: 0 0 0 0.2rem var(--elevita-focus-ring-teal);
    color: #ffffff;
}

/* [2026-05-14 MKO] form-select dark mode — mirrors form-control overrides above */
:root[data-bs-theme="dark"] .form-select {
    background-color: var(--elevita-surface-dark-800);
    border-color: var(--elevita-surface-dark-700);
    color: #f9fafb;
}

:root[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--elevita-surface-dark-800);
    border-color: var(--elevita-accent-teal);
    box-shadow: 0 0 0 0.2rem var(--elevita-focus-ring-teal);
    color: #ffffff;
}

:root[data-bs-theme="dark"] .bg-elevita-gradient {
    background: linear-gradient(160deg, var(--elevita-accent-teal-darker) 0%, var(--elevita-accent-teal-dark) 100%);
}

/* Optional: soften logo background if PNG has white */
:root[data-bs-theme="dark"] .bg-elevita-gradient img {
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 0.75rem;
    padding: 0.75rem;
}

:root[data-bs-theme="dark"] .login-form-panel {
    background-color: rgb(71 85 105) !important;
}

/* ===============================
   LIGHT MODE (default)
================================ */
.btn-primary-login {
    background-color: #2fa4a0;
    border-color: #2fa4a0;
    color: #ffffff !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .btn-primary-login:hover {
        background-color: #3fb5b1;
        border-color: #3fb5b1;
    }

    .btn-primary-login:focus,
    .btn-primary-login:active,
    .btn-primary-login:focus-visible {
        background-color: #278f8b;
        border-color: #278f8b;
        color: #ffffff !important;
        box-shadow: none;
    }

/* ===============================
   DARK MODE
================================ */
[data-bs-theme="dark"] .btn-primary-login {
    background-color: #238b88;
    border-color: #238b88;
    color: #ffffff !important;
}

    [data-bs-theme="dark"] .btn-primary-login:hover {
        background-color: #2fa4a0;
        border-color: #2fa4a0;
    }

    [data-bs-theme="dark"] .btn-primary-login:focus,
    [data-bs-theme="dark"] .btn-primary-login:active,
    [data-bs-theme="dark"] .btn-primary-login:focus-visible {
        background-color: #1f7774;
        border-color: #1f7774;
        color: #ffffff !important;
        box-shadow: none;
    }



/* Logo frame (works in light + dark) */
.logo-frame {
    display: inline-flex;
    padding: 7px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 2px rgba(46, 163, 155, 0.45), 0 12px 28px rgba(0, 0, 0, 0.25);
}

.logo-img {
    display: block;
    max-width: 200px;
    height: auto;
    border-radius: 18px;
    background: #ffffff;
}

/* ================================
   LOGIN – Dark mode input fix
   ================================ */

:root[data-bs-theme="dark"] .login-form-panel .form-control {
    background-color: #475771 !important; /* slate-800 */
    color: #f9fafb !important;
    border-color: var(--elevita-surface-dark-700) !important;
}

:root[data-bs-theme="dark"] .login-form-panel .form-control::placeholder {
    color: #94a3b8 !important;
}

/* ================================
   LOGIN – Dark mode links
   ================================ */

:root[data-bs-theme="dark"] .login-form-panel a {
    color: #7dd3c7; /* soft teal */
    font-weight: 500;
}

:root[data-bs-theme="dark"] .login-form-panel a:hover {
    color: #a7f3e8;
    text-decoration: underline;
}

/* =========================================================
   APP SHELL + LEFT NAV (AUTHORITATIVE)
   ========================================================= */

:root {
    --app-header-height: 48px;
}

/* =========================================================
   App Header — STRUCTURE ONLY (NO COLOR)
   ========================================================= */
.app-auth .app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
}

.app-header,
.navbar {
    height: var(--app-header-height);
}

.app-shell {
    padding-top: var(--app-header-height);
}

/* Shell container */
.app-auth .app-shell {
    display: flex;
    min-height: 100vh;
}

/* Header should align flush with left nav */
.app-auth .app-header {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.app-auth .app-header .navbar {
    border-radius: 0 !important;
}

/* Left navigation */
.app-auth .left-nav {
    position: fixed;
    top: var(--app-header-height);
    left: 0;
    bottom: 0;
    width: var(--leftnav-width);
    background: var(--elevita-sidebar-bg);
    border-right: 1px solid var(--elevita-surface-border);
    z-index: 40;
    transition: width 0.2s ease;
    overflow: hidden;
}

.left-nav.collapsed {
    width: var(--leftnav-collapsed);
}

.left-nav.collapsed .nav-label {
    display: none;
}

.left-nav.collapsed .nav-badge {
    margin-left: auto;
}

/* Main content */
.app-auth .app-main {
    flex: 1;
    background: var(--elevita-body-bg) !important;
    margin-left: var(--leftnav-width);
    padding: 0;
    transition: margin-left 0.2s ease;
    border-left: 1px solid var(--elevita-hairline);
}

.app-auth .left-nav.collapsed + .app-main {
    margin-left: var(--leftnav-collapsed);
}

/* Nav items */
.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .75rem;
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--elevita-gray-700);
    text-decoration: none;
}

.nav-item:hover {
    background: #f3f4f6;
}

/* Dark mode nav */
html[data-bs-theme="dark"] .nav-item {
    color: #e5e7eb;
}

html[data-bs-theme="dark"] .nav-item:hover {
    background: var(--elevita-gray-800);
}

/*html[data-bs-theme="dark"] .nav-item.active {
    background: var(--elevita-surface-dark-800);
    color: var(--elevita-brand-primary-border);
    border-color: var(--elevita-surface-dark-700);
}*/

/* Collapse toggle (larger + easier to hit) */
.collapse-btn {
    position: absolute;
    top: 16px;
    right: 1px;
    height: 24px; /* ↓ from 32px */
    width: 24px; /* ↓ from 32px */
    border-radius: 999px;
    background: var(--elevita-surface-bg);
    border: 1px solid var(--elevita-surface-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.collapse-btn:hover {
    background: rgba(37, 99, 235, 0.08);
}

.collapse-icon {
    font-size: 18px; /* ↑ bigger */
    font-weight: 800; /* bold */
    color: #2563eb; /* blue */
    line-height: 1;
    transition: transform 0.2s ease;
}


.left-nav.collapsed .collapse-icon {
    transform: rotate(180deg);
}


.left-nav.collapsed {
    padding-left: 0;
    padding-right: 0;
}

.left-nav.collapsed .nav-item {
    justify-content: center;
    padding: .5rem 0;
}

.left-nav.collapsed .nav-label,
.left-nav.collapsed .nav-badge {
    display: none;
}

/* HARD collapse: hide ALL sidebar text/content */
.left-nav.collapsed * {
    opacity: 0;
    pointer-events: none;
}

/* Re-enable collapse button */
.left-nav.collapsed .collapse-btn,
.left-nav.collapsed .collapse-btn * {
    opacity: 1;
    pointer-events: auto;
}

.left-nav-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 3rem; /* 16px */
}

/*.nav-pill {
    display: flex;
    padding: 0.5rem 0.75rem;*/ /* px-3 py-2 */
    /*border-radius: 0.75rem;*/ /* rounded-xl */
    /*font-size: 0.875rem;*/ /* text-sm */
    /*text-decoration: none;
}*/

/* KEEP in site.css */
/*.nav-pill {
    color: #374151;*/ /* gray-700 */
/*}*/

/*.nav-pill:hover {
    background-color: #f9fafb;*/ /* gray-50 */
/*}

.nav-pill:hover {
    text-decoration: none;
}

.nav-pill-active {
    display: flex;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    border-width: 1px;
    border-style: solid;
}

.nav-pill-active {
    background-color: #eef2ff;*/ /* indigo-50 */
    /*color: #4338ca;*/ /* indigo-700 */
    /*border-color: #e0e7ff;*/ /* indigo-100 */
/*}*/

.badge-primary {
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* text-xs */
    padding: 0.125rem 0.5rem; /* px-2 */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.badge-primary {
    background-color: #4f46e5; /* indigo-600 */
    color: #ffffff;
}

/* ============================= */
/* Tailwind-like utility helpers */
/* ============================= */

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.shadow-sm {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.bg-gray-50 {
    background-color: #f9fafb;
}

.text-xs {
    font-size: 0.75rem;
}

.text-gray-500 {
    color: var(--elevita-gray-500);
}

.text-gray-600 {
    color: #4b5563;
}


/* ============================= */
/* Tailwind-style grid utilities */
/* ============================= */

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-6 {
    gap: 1.5rem;
}

/* xl breakpoint (matches Tailwind: 1280px) */
@media (min-width: 1280px) {
    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* Status pills */

.bg-amber-50 {
    background-color: #fffbeb;
}

.border-amber-200 {
    border-color: #fde68a;
}

.text-amber-700 {
    color: #b45309;
}

.bg-rose-50 {
    background-color: #fff1f2;
}

.border-rose-200 {
    border-color: #fecdd3;
}

.text-rose-700 {
    color: #be123c;
}

.bg-indigo-50 {
    background-color: var(--elevita-brand-primary-soft);
}

.border-indigo-200 {
    border-color: var(--elevita-brand-primary-border);
}

.text-indigo-700 {
    color:var(--elevita-brand-primary-hover);
}

.bg-emerald-50 {
    background-color: #ecfdf5;
}

.border-emerald-200 {
    border-color: #a7f3d0;
}

.text-emerald-700 {
    color: #047857;
}

.rounded-full {
    border-radius: 9999px;
    line-height: 1;
}

html {
    font-size: 14px;
}

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

.card {
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
}

.bg-gray-50 {
    background-color: #f8fafc;
}

.border {
    border-color: #e5e7eb;
}

.text-gray-900 {
    color: var(--elevita-surface-dark-900);
}

.text-gray-500 {
    color: #64748b;
}

.text-gray-600 {
    color: #475569;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    display: inline-block;
}

/* Tighten top app header to match legacy look */
.app-auth .app-header .navbar {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 48px;
}

/* Work queue filter pills */
.workqueue-filter {
    font-weight: 600;
}

/* Rotate when collapsed */
.left-nav.collapsed i {
    transform: rotate(180deg);
}

/* === DARK MODE CANVAS === */
html[data-bs-theme="dark"] body {
    background-color: var(--elevita-surface-dark-950); /* slate-950 */
}

/* Main app canvas */
html[data-bs-theme="dark"] .app-main {
    background-color: var(--elevita-surface-dark-950); /* deep slate */
}

html[data-bs-theme="dark"] .list-group-item {
    background-color: #0b1220; /* slate-950-ish */
    border-color: var(--elevita-gray-800);
}

/* Dark mode – tables */
html[data-bs-theme="dark"] table {
    background-color: var(--elevita-surface-dark-900);
}

html[data-bs-theme="dark"] thead {
    background-color: var(--elevita-surface-dark-950);
    color: #cbd5e1;
}

html[data-bs-theme="dark"] tbody tr {
    background-color: var(--elevita-surface-dark-900);
    border-color: var(--elevita-gray-800);
}

html[data-bs-theme="dark"] tbody tr:hover {
    background-color: #162036;
}

/* Kill hard-coded white backgrounds in dark mode */
html[data-bs-theme="dark"] .bg-white {
    background-color: var(--elevita-surface-bg) !important;
}

html[data-bs-theme="dark"] {
    --elevita-surface-bg: #2b2b2b; /* deep slate */
    --elevita-surface-border: rgba(255, 255, 255, 0.06);
}

/*html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .surface,
html[data-bs-theme="dark"] .bg-panel {
    background-color: var(--elevita-bg-card) !important;
    border-color: var(--elevita-surface-border) !important;
}*/

html[data-bs-theme="dark"] .border {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-bs-theme="dark"] .bg-gray-50,
html[data-bs-theme="dark"] .list-soft,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .workqueue-item {
    background-color: var(--elevita-surface-dark-950) !important; /* slate-950 */
    border-color: var(--elevita-surface-dark-800) !important;
}

html[data-bs-theme="dark"] .list-group-item:hover,
html[data-bs-theme="dark"] .workqueue-item:hover {
    background-color: var(--elevita-surface-dark-950);
}

/* ===============================
DARK MODE – TEXT HIERARCHY
=============================== */

html[data-bs-theme="dark"] .text-gray-900,
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3 {
    color: #f8fafc !important;
}

html[data-bs-theme="dark"] .text-gray-600,
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-muted-600 {
    color: #94a3b8 !important; /* slate-400 */
}

html[data-bs-theme="dark"] .text-gray-500,
html[data-bs-theme="dark"] .fs-xs {
    color: #64748b !important; /* slate-500 */
}


html[data-bs-theme="dark"] table {
    background-color: var(--elevita-surface-dark-950);
}

html[data-bs-theme="dark"] thead th {
    color: #cbd5e1;
    border-bottom: 1px solid var(--elevita-surface-dark-800);
}

html[data-bs-theme="dark"] tbody tr {
    border-bottom: 1px solid var(--elevita-surface-dark-800);
}

html[data-bs-theme="dark"] tbody tr:hover {
    background-color: var(--elevita-surface-dark-950);
}

html[data-bs-theme="dark"] table {
    background-color: var(--elevita-surface-dark-950);
}

html[data-bs-theme="dark"] thead th {
    color: #cbd5e1;
    border-bottom: 1px solid var(--elevita-surface-dark-800);
}

html[data-bs-theme="dark"] tbody tr {
    border-bottom: 1px solid var(--elevita-surface-dark-800);
}

html[data-bs-theme="dark"] tbody tr:hover {
    background-color: var(--elevita-surface-dark-950);
}

/* =========================================
FINAL DARK MODE FOOTER / PAGE BOTTOM FIX
========================================= */

/* Anything at the very bottom of the page */
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] body > *,
html[data-bs-theme="dark"] main,
html[data-bs-theme="dark"] footer,
html[data-bs-theme="dark"] .footer,
html[data-bs-theme="dark"] .container,
html[data-bs-theme="dark"] .container-fluid,
html[data-bs-theme="dark"] .row {
    background-color: var(--elevita-surface-dark-950) !important; /* slate-950 */
}

/* Footer text */
html[data-bs-theme="dark"] footer,
html[data-bs-theme="dark"] .footer {
    color: #94a3b8 !important;
    border-top: 1px solid var(--elevita-surface-dark-800);
}

/* ===============================
Anonymous pages – DARK MODE
=============================== */
html[data-bs-theme="dark"] body.app-anon {
    background: radial-gradient( 1200px 600px at 50% -200px, var(--elevita-gray-800) 0%, var(--elevita-surface-dark-950) 60% );
}

/* ===============================
   Anonymous pages – LIGHT MODE
   =============================== */
html[data-bs-theme="light"] body.app-anon {
    background: linear-gradient( 180deg, #f8fafc 0%, #eef2f7 100% );
}

/* Tailwind-style tab bar */
.tabbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
    padding: .25rem;
    border-radius: .75rem;
    background: var(--elevita-gray-50);
}

.tabbar .nav-link {
    width: 100%;
    border: 0;
    border-radius: .6rem;
    padding: .375rem .75rem;
    font-weight: 600;
    font-size: .875rem;
    color: var(--elevita-muted-600);
    background: transparent;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.tabbar .nav-link.active,
.tabbar .show > .nav-link {
    background: var(--elevita-surface-bg);
    color: var(--elevita-muted-700);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.tabbar .nav-link:hover {
    color: var(--elevita-muted-700);
}

.tabbar .nav-link:focus,
.tabbar .nav-link:active:focus {
    outline: 0;
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb !important;
}

/* Space between action buttons in modals */
.space-y-1 > * + * {
    margin-top: 0.25rem;
}

/* Client Demographics specific spacing */
.client-demographics-section {
    margin-bottom: 1.5rem;
}

.client-demographics-section:last-child {
    margin-bottom: 0;
}

/* =========================================
   Portal Sync Banner Styles
   ========================================= */
.portal-sync-banner {
    background-color: var(--elevita-brand-primary-soft);
    border-color: var(--elevita-brand-primary-border);
}

html[data-bs-theme="dark"] .portal-sync-banner {
    background-color: #1e1b4b;
    border-color:var(--elevita-brand-primary-hover);
}

html[data-bs-theme="dark"] .portal-sync-banner .fw-medium {
    color: var(--elevita-brand-primary-border) !important;
}

html[data-bs-theme="dark"] .portal-sync-banner .portal-badge {
    background-color: var(--elevita-surface-dark-900) !important;
    border-color:var(--elevita-brand-primary-hover) !important;
    color: #a5b4fc !important;
}

html[data-bs-theme="dark"] .portal-sync-banner .btn {
    background-color: var(--elevita-brand-primary) !important;
}

/* Portal Mode Toggle */
.portal-mode-toggle .btn {
    font-size: 11px;
}

/* =========================================
   DARK MODE – COUNT / STATUS BADGES FIX
   ========================================= */

html[data-bs-theme="dark"] .badge,
html[data-bs-theme="dark"] .badge.rounded-pill {
    background-color: #6366f1 !important; /* indigo-500 */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-weight: 600;
}

/* Smaller numeric badges (work queue counts) */
html[data-bs-theme="dark"] .badge.fs-xs,
html[data-bs-theme="dark"] .badge.text-xs {
    background-color: var(--elevita-brand-primary) !important; /* indigo-600 */
    color: #ffffff !important;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.25);
}

.user-chip {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
}

[data-bs-theme="dark"] .user-avatar {
    border-color: rgba(255,255,255,.35);
}

/* =========================================
   User Management Table Fix
   [2026-01-26 MKO] Fix column layout for 6-column user table
   ========================================= */
#Setup_UserManagementTable > .row {
    flex-wrap: nowrap !important;
}

#Setup_UserManagementTable > .row > .col {
    flex: 1;
    white-space: normal;
    word-wrap: break-word;
}

/* [2025-02-25 MKO] Prevent role select options from being clipped in the new-user row */
#Setup_UserManagementTable .role select {
    min-width: max-content;
    width: 100%;
}


.modal-xxl {
    --bs-modal-width: 95vw;
}

/* =========================================
   Dim modal background when loading
   [2026-01-29 KLS] Add grayscale filter for extra visual de-emphasis
   ========================================= */
.modal.modal-dimmed {
    pointer-events: none;
    opacity: 0.35;
    filter: grayscale(0.4);
}

.modal.modal-dimmed .modal-footer {
    opacity: 0.25;
}

/* [2026-06-22 MKO] Shadow must sit on .modal-content (the visible card), not
   .modal-dialog. With centerVertical:true bootbox adds .modal-dialog-centered,
   which stretches the dialog to full viewport height — shadowing the dialog
   then draws a tall "ghost surface" outline behind the centered card
   (seen on Delete Progress Note confirm and Screening "Print Not Available"). */
.bootbox .modal-content {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
}

/* [2026-03-11 MKO] Ensure bootbox confirmations render above stacked modals (z-index 1065)
   without participating in the JS stacking state which would corrupt dimmedModal/stackedModal. */
.bootbox.modal {
    z-index: 1070 !important;
}

.form-discard-confirm.modal {
    background: rgba(15, 23, 42, 0.26);
}

.form-discard-confirm .modal-dialog {
    max-width: 520px;
}

.form-discard-confirm .modal-content {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 0.5rem;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    color: #111827;
    opacity: 1;
}

.form-discard-confirm .modal-header,
.form-discard-confirm .modal-footer {
    background: #fff;
}

.form-discard-confirm .modal-body {
    background: #fff;
    color: #374151;
}

html[data-bs-theme="dark"] .form-discard-confirm.modal {
    background: rgba(2, 6, 23, 0.46);
}

html[data-bs-theme="dark"] .form-discard-confirm .modal-content,
html[data-bs-theme="dark"] .form-discard-confirm .modal-header,
html[data-bs-theme="dark"] .form-discard-confirm .modal-footer,
html[data-bs-theme="dark"] .form-discard-confirm .modal-body {
    background: #0f172a;
    color: #e5e7eb;
    border-color: #334155;
}

/* Never visually dim when a Bootbox modal is open */
body:has(.bootbox.modal.show) .modal.modal-dimmed {
    filter: none !important;
    pointer-events: none;
}

/* =========================================================
   MODAL BACKDROP — HARD OPAQUE LAYER
   ========================================================= */

.modal-backdrop {
    background-color: #000 !important;
}

.modal-backdrop.show {
    opacity: 0.75 !important;
}

/* =========================================================
   SLOT-SIGNING MODALS — STACK ABOVE FULLSCREEN PARENT
   [2026-06-03 MKO] data-bs-backdrop="false" prevents a second backdrop div.
   The .modal element itself provides the dim overlay via background.
   z-index 1075 places these above the parent fullscreen modal (1055).
   ========================================================= */

.sign-slot-modal.modal {
    z-index: 1075;
    background: rgba(0, 0, 0, 0.45);
}

.sign-slot-modal .modal-content {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   APP SHELL — STOP DOUBLE DIMMING UNDER MODALS
   ========================================================= */

body.modal-open .app-auth,
body.modal-open .app-main,
body.modal-open .app-shell {
    filter: none !important;
    opacity: 1 !important;
}


/* =========================================
   Editable Picklist Icon Button
   [2026-01-30 MKO] Consistent icon for editable picklists
   Displays pencil icon to right of label, opens picklist manager
   ========================================= */
.btn-picklist-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    font-size: 0.7rem;
    color: var(--elevita-muted-600, #6c757d);
    background-color: transparent;
    border: 1px solid transparent; /* [2026-01-30 MKO] Invisible border by default, visible on hover */
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.btn-picklist-edit:hover,
.btn-picklist-edit:focus {
    color: #4f46e5;
    background-color: rgba(79, 70, 229, 0.08);
    border-color: #4f46e5; /* Border appears on hover */
    outline: none;
}

.btn-picklist-edit:active {
    background-color: rgba(79, 70, 229, 0.15);
}

/* Dark mode adjustments */
html[data-bs-theme="dark"] .btn-picklist-edit {
    color: #94a3b8;
}

    html[data-bs-theme="dark"] .btn-picklist-edit:hover,
    html[data-bs-theme="dark"] .btn-picklist-edit:focus {
        color: #a5b4fc;
        background-color: rgba(99, 102, 241, 0.15);
        border-color: #6366f1; /* Border appears on hover in dark mode */
    }

/* =========================================
   Preview Watermark
   [2026-01-31] Diagonal watermark for form preview mode
   Fixed position, stays visible during scroll, non-interactive
   ========================================= */
.preview-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 8rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.08);
    pointer-events: none;
    user-select: none;
    z-index: 9999;
    white-space: nowrap;
}

/* Dark mode watermark */
html[data-bs-theme="dark"] .preview-watermark {
    color: rgba(255, 255, 255, 0.08);
}

/* =========================================
   Profile Breadcrumb Navigation
   [2026-01-30 MKO] Replaced sticky back arrow with breadcrumb
   [2026-01-31 MKO] Darker active text, shorter arrow separator
   ========================================= */
.profile-breadcrumb {
    font-size: 0.8125rem;
    font-weight: 500;
}

.profile-breadcrumb .breadcrumb-item a {
    color: var(--elevita-muted-600);
    text-decoration: none;
    transition: color 150ms ease, text-decoration 150ms ease;
}

.profile-breadcrumb .breadcrumb-item a:hover {
    color: var(--elevita-focus-blue);
    text-decoration: underline;
}

.profile-breadcrumb .breadcrumb-item.active {
    color: var(--elevita-gray-900);
    font-weight: 600;
}

.profile-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--elevita-muted-600);
    font-size: 1.3em;
    vertical-align: 0.05em;
    font-weight: 300;
    line-height: 1;
}

/* Dark mode adjustments for profile breadcrumb */
html[data-bs-theme="dark"] .profile-breadcrumb .breadcrumb-item a {
    color: #94a3b8;
}

html[data-bs-theme="dark"] .profile-breadcrumb .breadcrumb-item a:hover {
    color: #a5b4fc;
}

html[data-bs-theme="dark"] .profile-breadcrumb .breadcrumb-item.active {
    color: #f1f5f9;
    font-weight: 600;
}

html[data-bs-theme="dark"] .profile-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #64748b;
}

/* === LEFT NAV ACTIVE — FINAL LOCK (dark mode) === */
html[data-bs-theme="dark"] .sidenav .item.active {
    background-color: var(--elevita-nav-selected-bg) !important;
    opacity: 1 !important;
    filter: none !important;
}

html[data-bs-theme="dark"] .sidenav .item.active,
html[data-bs-theme="dark"] .sidenav .item.active span,
html[data-bs-theme="dark"] .sidenav .item.active .nav-label {
    font-weight: 700 !important;
}

html[data-bs-theme="dark"] .sidenav .item.active {
    color: var(--elevita-nav-selected-text) !important;
}

html[data-bs-theme="dark"] .sidenav .item.active .dot {
    background-color: var(--elevita-nav-dot-selected) !important;
    opacity: 1 !important;
}

/* =========================================
   FORM SWITCH — FORCE LIGHT MODE LOOK
   (DARK MODE ONLY)
   ========================================= */

/* Base switch (OFF) */
html[data-bs-theme="dark"]
.form-check-input[type="checkbox"][role="switch"] {
    background-color: rgb(71 85 105) !important; /* grey track */
    border-color: #d1d5db !important;
}

/* ON state */
html[data-bs-theme="dark"]
.form-check-input[type="checkbox"][role="switch"]:checked {
    background-color: #2563eb !important; /* blue */
    border-color: #2563eb !important;
}

/* =========================================
   Clinical Settings Status Badges
   [2026-02-09 MKO] Status badge styles for setup overview pages
   ========================================= */

/* Not Started / Pending */
.badge-status-notstarted {
    background-color: #f8fafc;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

/* In Progress */
.badge-status-inprogress {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* Completed / Done */
.badge-status-completed {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

/* Dark mode status badges */
html[data-bs-theme="dark"] .badge-status-notstarted {
    background-color: #1e293b;
    color: #94a3b8;
    border-color: #475569;
}

html[data-bs-theme="dark"] .badge-status-inprogress {
    background-color: #1e3a5f;
    color: #93c5fd;
    border-color: #3b82f6;
}

html[data-bs-theme="dark"] .badge-status-completed {
    background-color: #14532d;
    color: #86efac;
    border-color: #22c55e;
}

/* =========================================
   Clinical Settings Task Item Styles
   [2026-02-09 MKO] Task item hover and auto-validated states
   ========================================= */

.clinical-task-item {
    cursor: pointer;
    transition: background-color 120ms ease;
}

.clinical-task-item:hover {
    background-color: var(--elevita-gray-50);
}

/* Auto-validated tasks have a subtle disabled appearance */
.clinical-task-item.task-auto {
    cursor: default;
    opacity: 0.85;
}

.clinical-task-item.task-auto:hover {
    background-color: transparent;
}

/* Dark mode task items */
html[data-bs-theme="dark"] .clinical-task-item:hover {
    background-color: var(--elevita-surface-dark-800);
}

html[data-bs-theme="dark"] .clinical-task-item.task-auto:hover {
    background-color: transparent;
}

/* =========================================================
   FORM PICKER — STRUCTURE & BEHAVIOR
   ========================================================= */

.elevita-form-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border-width: 1px;
    border-style: solid;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.elevita-form-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.2;
}

.elevita-form-name {
    font-weight: 600;
}

.elevita-form-title {
    font-size: 0.875rem;
}

.elevita-form-description {
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.elevita-form-checkbox {
    margin-top: 0.2rem;
}


/* =========================================
   HARD OVERRIDE — REMOVE BOOTSTRAP TABLE LINES
   ========================================= */

.table > :not(caption) > * > * {
    border-bottom: none !important;
}

/* Add back soft divider */
.table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Remove header thick line */
.table thead tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Compact spacing */
.table th,
.table td {
    padding: 6px 10px !important;
    font-size: 0.85rem;
}

/* Enterprise Status Pills */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px; /* smaller */
    border-radius: 999px;
    background-color: #f3f4f6; /* soft grey */
    font-size: 0.72rem; /* smaller text */
    font-weight: 500;
    line-height: 1;
}

.status-dot {
    width: 6px; /* smaller dot */
    height: 6px;
    border-radius: 50%;
}


/* Color Variants */
.dot-success {
    background-color: #22c55e;
}

.dot-warning {
    background-color: #f59e0b;
}

.dot-danger {
    background-color: #ef4444;
}

.dot-info {
    background-color: #3b82f6;
}

.dot-muted {
    background-color: #9ca3af;
}

/* Base table */
.bootstrap-table .fixed-table-container table {
    background-color: #ffffff !important;
}

/* Header */
.bootstrap-table thead th {
    background-color: #f8f9fb !important;
}

/* Rows */
.bootstrap-table tbody tr {
    background-color: #ffffff !important;
}

/* Zebra */
.bootstrap-table tbody tr:nth-child(even) {
    background-color: #fbfbfc !important;
}

/* Hover */
.bootstrap-table tbody tr:hover {
    background-color: #f2f4f7 !important;
}

/* =========================================
   FORM PICKER — FLEX CARD ROW
   ========================================= */

#addFormList .form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.35rem;
    transition: all 0.15s ease;
}

/* Remove Bootstrap positioning behavior */
#addFormList .form-check-input {
    position: static;
    margin: 0;
}

/* Make label fill space */
#addFormList .form-check-label {
    flex: 1;
    margin: 0;
}

/* Hover */
#addFormList .form-check:hover {
    background: #eef2f7;
    border-color: #d1d5db;
}

/* Selected */
#addFormList .form-check:has(.form-check-input:checked) {
    background: #e8f0ff;
    border-color: #bcd3ff;
}

/* Center ALL table headers */
.bootstrap-table .table thead th {
    text-align: center !important;
    vertical-align: middle !important;
}

/* =========================================
   Elevita Custom Checkbox + Radio
   ========================================= */

.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.35rem; /* checkbox */
    border: 1.5px solid var(--elevita-input-border);
    background-color: var(--elevita-input-bg);
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

    /* Radios round */
    .form-check-input[type="radio"] {
        border-radius: 50%;
    }

/* [2026-02-18 MKO] Encounter Type – Billing Modifiers stacked table */
.enc-modifier-table {
    border-radius: .75rem;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.enc-modifier-table thead th {
    background: var(--elevita-gray-50, #f9fafb);
    border-bottom: 2px solid var(--elevita-hairline, #e5e7eb);
    font-weight: 600;
    padding: .5rem .75rem;
}

.enc-modifier-table tbody td {
    padding: .6rem .75rem;
    vertical-align: middle;
    border-color: var(--elevita-hairline, #e5e7eb);
}

.enc-modifier-table .form-select-sm {
    min-width: 200px;
}

:root[data-bs-theme="dark"] .enc-modifier-table thead th {
    background: #0f172a;
    border-bottom-color: #334155;
}

:root[data-bs-theme="dark"] .enc-modifier-table tbody td {
    border-color: #1e293b;
}

/* [2026-02-18] Drag handle for billing modifier reorder */
.mod-drag-handle {
    display: inline-block;
    cursor: grab;
    user-select: none;
    padding: .2rem .35rem;
    border-radius: .35rem;
    line-height: 1;
    opacity: .75;
}
.mod-drag-handle:active {
    cursor: grabbing;
}
.enc-modifier-table tr.sortable-ghost {
    opacity: .35;
}

th.sortable {
    cursor: pointer;
    user-select: none;
}

    th.sortable .sort-icon::after {
        content: "⇅";
        font-size: 11px;
        margin-left: 4px;
        opacity: 0.4;
    }

    th.sortable.asc .sort-icon::after {
        content: "↑";
        opacity: 1;
    }

    th.sortable.desc .sort-icon::after {
        content: "↓";
        opacity: 1;
    }

.caseload-row {
    transition: background-color 0.15s ease, transform 0.05s ease;
}

    .caseload-row:hover {
        background-color: var(--elevita-table-hover, #f8fafc);
        transform: scale(1.002);
    }

/* =========================================
   Light tooltip variant
   [2026-02-25 MKO] White background for Users setup screen tooltips
   ========================================= */
.tooltip-light {
    --bs-tooltip-bg: #ffffff;
    --bs-tooltip-color: #344054;
}

.tooltip-light .tooltip-inner {
    border: 1px solid #d0d5dd;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10);
}

/* ============================================
   Elevita Tooltip Theme
============================================ */

.tooltip {
    --bs-tooltip-bg: #ffffff;
    --bs-tooltip-color: #212529;
    --bs-tooltip-border-radius: 4px;
    --bs-tooltip-padding-x: 8px;
    --bs-tooltip-padding-y: 4px;
}

.tooltip-inner {
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.schedule-tab-bar {
    display: flex;
    background: #eef2f6;
    border-radius: 0.5rem;
    padding: 4px;
    gap: 4px;
}

.schedule-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 0.4rem;
    cursor: pointer;
}

    .schedule-tab.active {
        background: white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

.schedule-tab-content {
    display: none;
}

    .schedule-tab-content.active {
        display: block;
    }

.schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-row {
    display: grid;
    grid-template-columns: 140px 160px 160px;
    gap: 16px;
    align-items: center;
}

.schedule-day {
    font-weight: 500;
}

/* Schedule Summary Layout */

.schedule-summary {
    margin-top: 1rem;
}

.schedule-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

    .schedule-summary-row:last-child {
        border-bottom: none;
    }

.schedule-summary-label {
    font-size: 0.75rem;
    color: #6c757d;
    min-width: 150px;
}

.schedule-summary-value {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
    flex: 1;
}

/* Recurring layout tuning */
.recurring-flex input,
.recurring-flex select {
    min-width: 0;
}

/* Recurring layout tuning */
.recurring-label-width {
    width: 160px; /* ↓ reduced from 220 */
}

.recurring-time-width {
    width: 120px;
}

.recurring-pattern-width {
    width: 120px;
}

.recurring-day-width {
    width: 85px;
}
/* Mobile behavior */
@media (max-width: 768px) {
    .recurring-label-width {
        width: 100%;
    }

    .recurring-time-width,
    .recurring-pattern-width,
    .recurring-day-width {
        width: 100%;
    }
}

.recurring-flex {
    width: 100%;
    min-width: 0;
}

/* Label shrinks if needed */
.recurring-label {
    flex: 1 1 140px;
    min-width: 120px;
}

/* Times fixed */
.recurring-time {
    flex: 0 0 110px;
    text-align: center;
}

/* Pattern flexible */
.recurring-pattern {
    flex: 0 1 110px;
    min-width: 95px;
}

/* Day small and fixed */
.recurring-day-container {
    flex: 0 0 75px;
}

/* Delete aligned right */
.btnRemoveRecurring {
    flex: 0 0 auto;
}

/* =========================================
   ELEVITA TABLE HOVER STANDARD (ALL TABLES)
   ========================================= */

.table tbody tr {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

    /* Force hover color for ALL tables */
    .table tbody tr:hover > td {
        background-color: var(--elevita-table-hover) !important;
    }

/* Override Bootstrap Table internal row states */
.bootstrap-table .table tbody tr.hover > td,
.bootstrap-table .table tbody tr.selected > td {
    background-color: var(--elevita-table-hover) !important;
}

/* Row lift */
.table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Remove vertical grid lines so hover color looks identical */
.table td,
.table th {
    border-left: none;
    border-right: none;
}

/* Normalize Bootstrap-table row background */
.bootstrap-table .table tbody tr > td {
    background-color: var(--elevita-table-bg) !important;
}

/* Elevita hover color */
.table tbody tr:hover > td {
    background-color: var(--elevita-table-hover) !important;
}

/* Make Bootstrap hover use Elevita theme color */
.table-hover {
    --bs-table-hover-bg: var(--elevita-table-hover);
}

/*
===================================================
   ELEVITA SELECTABLE ROW HOVER (LISTS / PICKERS)
=================================================== 
*/

.elevita-form-row {
    cursor: pointer;
    padding: .5rem .6rem;
}

.elevita-form-row:hover {
    background: var(--elevita-table-hover);
    border-radius: .35rem;
}

.elevita-form-checkbox {
    appearance: auto !important;
    opacity: 1 !important;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.35rem;
}

/* Remove Bootstrap dropdown arrow */
.no-caret {
    background-image: none !important;
    padding-right: .5rem !important;
}

.sectionRow input:not(:checked) ~ .flex-grow-1 {
    opacity: .45;
}
.icon-placeholder {
    display: inline-block;
    width: 30px;
}
/* De-emphasis classes */

.btnDelete:hover {
    color: #dc3545;
    background-color: #fff5f5;
}

.templateRow {
    cursor: pointer;
}

.templateRow:hover {
    background-color: #f5f8ff;
}

/* ============================================
   Elevita Status Badges
============================================ */

/* Inactive */
.badge-soft-secondary {
    background-color: #ffffff;
    color: #495057;
    border: 1px solid #ced4da;
}

/* [2026-05-22 MKO] Resolved/completed state — soft green */
.badge-soft-success {
    background-color: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.dragHandle {
    opacity: 0.5;
}

tr:hover .dragHandle {
    opacity: 1;
}
.grayscale {
    filter: grayscale();
}

/* Brighten/Darken backgrounds */

html[data-bs-theme=light] .offset-bg-color {
    background-color: #0000000a;
}

html[data-bs-theme=dark] .offset-bg-color {
    background-color: #ffffff0a;
}

.offset-bg-brighten {
    background-color: #ffffff90;
}

.offset-bg-darken {
    background-color: #00000090;
}

/* =========================================
   [2026-03-18 MKO] Contacts Tab — Client Chart
   [2026-03-18 MKO] UI Standards button classes + inline editing styling
   ========================================= */

/* ----- Contact grid — name link styling ----- */
.contact-name-link {
    color: var(--elevita-brand-primary, #4f46e5);
}

.contact-name-link:hover {
    text-decoration: underline !important;
}

/* Phone / Address / ROI inline editable rows */
.phone-inline-row,
.address-inline-card,
.roi-inline-card,
.phone-entry,
.address-entry,
.roi-entry {
    background: var(--elevita-surface-bg, #fff);
    transition: background-color 0.15s ease;
}

.phone-inline-row:hover,
.address-inline-card:hover,
.roi-inline-card:hover,
.phone-entry:hover,
.address-entry:hover,
.roi-entry:hover {
    background: var(--elevita-gray-50, #f9fafb);
}

/* Primary radio in entry rows */
.phone-primary-radio:checked,
.address-primary-radio:checked {
    border-color: var(--elevita-brand-primary, #4f46e5);
    background-color: var(--elevita-brand-primary, #4f46e5);
}

/* KLS - Kill popup effect for all tables Glitch #387 3/30/26 */
.table tbody tr,
.table tbody tr:hover,
.table tbody tr td,
.table tbody tr td:hover {
    transform: none !important;
}

.list-group-item .btn-outline-danger:hover {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
    color: #fff !important;
}

/* KLS - Kill popup effect for all tables Glitch #387 3/23/26 */
.table tbody tr,
.table tbody tr:hover {
    transform: none !important;
}

/* =========================================
   [2026-03-30 MKO] Progress Note time picker
   ========================================= */

.group-progress-display-card {
    background: var(--bs-body-bg, #fff);
}

.group-progress-readonly-field {
    min-height: calc(2.25rem + 2px);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: .75rem;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    padding: .5rem .75rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.group-progress-readonly-field-lg {
    min-height: 8rem;
}

.pn-time-field .form-text {
    min-height: 2rem;
    color: var(--elevita-muted-600, #667085);
}

.pn-time-field .ts-wrapper {
    width: 100%;
}

.pn-time-field .ts-control {
    min-height: calc(2.25rem + 2px);
    border-radius: .75rem;
    border: 1px solid var(--bs-border-color, #ced4da);
    box-shadow: var(--elevita-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
    padding: .375rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.pn-time-field .ts-control,
.pn-time-field .ts-control input {
    font-size: .95rem;
}

.pn-time-field .ts-control.focus {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 .25rem var(--elevita-focus-ring-blue, rgba(37, 140, 251, 0.25));
}

.client-diagnosis-widget {
    --client-diagnosis-surface: var(--bs-body-bg, #fff);
    --client-diagnosis-muted-surface: var(--elevita-gray-50, #f9fafb);
    --client-diagnosis-border: var(--elevita-surface-border, var(--bs-border-color, #dee2e6));
    --client-diagnosis-shadow: var(--elevita-surface-shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.08));
}

.client-diagnosis-shell {
    border: 1px solid var(--client-diagnosis-border) !important;
    background: var(--client-diagnosis-surface);
    box-shadow: var(--client-diagnosis-shadow) !important;
}

.client-diagnosis-shell .card-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.72));
    border-bottom-color: var(--client-diagnosis-border);
}

.client-diagnosis-list-body,
.client-diagnosis-detail-body,
.client-diagnosis-form-body {
    background: var(--client-diagnosis-muted-surface);
}

.client-diagnosis-section-title,
.client-diagnosis-form-title {
    color: var(--bs-body-color, #212529);
}

.client-diagnosis-card.btn,
.client-diagnosis-result.btn {
    color: inherit;
    border-color: var(--client-diagnosis-border);
    background-color: var(--client-diagnosis-surface) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.client-diagnosis-search-results {
    background: var(--client-diagnosis-muted-surface) !important;
}

.client-diagnosis-result.btn {
    background-color: #fff !important;
    border-color: var(--client-diagnosis-border) !important;
    border-radius: .75rem !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.client-diagnosis-search-results .client-diagnosis-result.btn {
    background-color: #fff !important;
    border-color: #dbe2ea !important;
}

.client-diagnosis-result.btn:hover,
.client-diagnosis-result.btn:focus-visible {
    background-color: #fff !important;
}

.client-diagnosis-result.is-selected {
    background-color: var(--bs-primary-bg-subtle, #e7f1ff) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd), 0 8px 18px rgba(13, 110, 253, 0.1) !important;
}

.client-diagnosis-card-title,
.client-diagnosis-detail-title,
.client-diagnosis-result-title {
    color: var(--bs-body-color, #212529);
}

.client-diagnosis-card.btn:hover,
.client-diagnosis-card.btn:focus-visible {
    color: inherit;
    border-color: var(--bs-primary-border-subtle, #9ec5fe);
    background-color: var(--client-diagnosis-surface) !important;
    box-shadow: 0 10px 24px rgba(13, 110, 253, 0.08);
    transform: translateY(-1px);
}

.client-diagnosis-card.btn:active,
.client-diagnosis-result.btn:active {
    color: inherit;
    border-color: var(--bs-primary-border-subtle, #9ec5fe);
    background-color: var(--bs-primary-bg-subtle, #e7f1ff) !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.12);
    transform: translateY(0);
}

.client-diagnosis-result.btn:hover,
.client-diagnosis-result.btn:focus-visible {
    color: inherit;
    border-color: var(--bs-primary-border-subtle, #9ec5fe);
    background-color: #fff !important;
    box-shadow: 0 8px 18px rgba(13, 110, 253, 0.08);
    transform: translateY(-1px);
}

.client-diagnosis-result.is-selected,
.client-diagnosis-result.is-selected:hover,
.client-diagnosis-result.is-selected:focus-visible {
    background-color: var(--bs-primary-bg-subtle, #e7f1ff) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd), 0 8px 18px rgba(13, 110, 253, 0.1) !important;
}

.client-diagnosis-card.is-active {
    border-color: var(--bs-primary, #0d6efd) !important;
    background-color: var(--bs-primary-bg-subtle, #e7f1ff) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.12), 0 12px 24px rgba(13, 110, 253, 0.1);
}

.client-diagnosis-detail-box,
.client-diagnosis-form-section,
.client-diagnosis-history-item,
.client-diagnosis-loading-panel {
    border-color: var(--client-diagnosis-border) !important;
    background-color: var(--client-diagnosis-surface) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.client-diagnosis-choice {
    cursor: pointer;
    background: var(--client-diagnosis-surface);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.client-diagnosis-choice:hover,
.client-diagnosis-choice:focus-within {
    border-color: var(--bs-primary-border-subtle, #9ec5fe) !important;
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, 0.08);
}

.client-diagnosis-empty {
    background: var(--client-diagnosis-surface);
}

.client-diagnosis-selected-box.is-selected {
    background-color: var(--bs-primary-bg-subtle, #e7f1ff) !important;
    border-color: var(--bs-primary-border-subtle, #9ec5fe) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.client-diagnosis-selection-loading .spinner-border {
    width: 1rem;
    height: 1rem;
}

html[data-bs-theme="dark"] .client-diagnosis-widget {
    --client-diagnosis-surface: var(--elevita-surface-dark-900, #0f172a);
    --client-diagnosis-muted-surface: var(--elevita-surface-dark-950, #020617);
    --client-diagnosis-border: var(--elevita-surface-dark-800, #1e293b);
}

html[data-bs-theme="dark"] .client-diagnosis-shell .card-header {
    background: var(--elevita-surface-dark-900, #0f172a);
}

html[data-bs-theme="dark"] .client-diagnosis-result.btn,
html[data-bs-theme="dark"] .client-diagnosis-search-results .client-diagnosis-result.btn {
    background-color: var(--elevita-surface-dark-900, #0f172a) !important;
    border-color: var(--elevita-surface-dark-700, #334155) !important;
}

html[data-bs-theme="dark"] .client-diagnosis-result.btn:hover,
html[data-bs-theme="dark"] .client-diagnosis-result.btn:focus-visible,
html[data-bs-theme="dark"] .client-diagnosis-result.is-selected {
    background-color: var(--elevita-surface-dark-800, #1e293b) !important;
}

.pn-time-field .ts-control.is-invalid,
.pn-time-field.is-invalid .ts-control {
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.12);
}

.pn-time-field.pn-time-mismatch .ts-control,
.pn-time-field .ts-control.pn-time-mismatch,
#pnDurationMinutes.pn-time-mismatch {
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, 0.12);
}

.pn-time-field .ts-dropdown {
    border-radius: .875rem;
    border: 1px solid var(--elevita-hairline, #ddd);
    box-shadow: var(--elevita-shadow-md, 0 6px 16px rgba(0, 0, 0, 0.08));
    padding: .375rem;
}

.pn-time-field .ts-dropdown .option {
    border-radius: .625rem;
    padding: .5rem .625rem;
}

.pn-time-field .ts-dropdown .active {
    background: rgba(13, 110, 253, 0.08);
    color: inherit;
}

.pn-time-field .invalid-feedback {
    display: none;
}

.pn-time-field.is-invalid .invalid-feedback {
    display: block;
}

#pnTimeMismatchAlert {
    margin-top: -.125rem;
}

/* =========================================
   Progress Note modal treatment-plan styling
   ========================================= */

#progressNoteModal .pn-modal-content {
    background: #f0f2f5;
    border: 0;
    border-radius: 0;
}

#progressNoteModal .pn-modal-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

#progressNoteModal .modal-title {
    font-size: 16px;
    color: #111111;
}

#progressNoteModal #pnEditorContainer {
    background: #eef2f6;
    padding: 22px 26px !important;
}

#progressNoteModal .pn-editor-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px 26px 80px 26px;
    color: #111827;
    font-size: 13px;
}

#progressNoteModal .tp-mock-card {
    background: #ffffff;
    border: 1px solid #d9e2ef !important;
    border-radius: 14px !important;
    padding: 22px 24px;
    margin-bottom: 22px;
    box-shadow: none !important;
}

#progressNoteModal .group-progress-display-card {
    background: #ffffff;
    border: 1px solid #d9e2ef !important;
    border-radius: 14px !important;
    margin-bottom: 22px;
    box-shadow: none !important;
    overflow: hidden;
}

#progressNoteModal .tp-mock-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

#progressNoteModal .tp-mock-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

#progressNoteModal .tp-section-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: #eef4ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
}

#progressNoteModal .tp-section-icon.is-safety {
    background: #fff7ed;
    color: #ea580c;
}

#progressNoteModal .tp-mock-title {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 0;
}

#progressNoteModal .tp-mock-hint {
    font-size: 13px;
    color: #64748b;
    margin-top: 5px;
    line-height: 1.35;
}

#progressNoteModal .pn-section-card.is-safety {
    border-color: #fed7aa !important;
    background: #fffaf4;
}

#progressNoteModal .form-label,
#progressNoteModal .tp-mock-label {
    font-size: 12px;
    font-weight: 800 !important;
    color: #111827;
    margin-bottom: 7px;
}

#progressNoteModal .form-control,
#progressNoteModal .form-select,
#progressNoteModal .ts-control {
    border: 1px solid #dbe4f0;
    background: #f8fbff;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    color: #111827;
    box-shadow: none;
}

#progressNoteModal textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

#progressNoteModal .form-control:focus,
#progressNoteModal .form-select:focus,
#progressNoteModal .ts-control.focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .18);
    background: #ffffff;
}

#progressNoteModal .input-group .form-control {
    border-radius: 10px 0 0 10px;
}

#progressNoteModal .input-group .btn {
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    font-weight: 700;
}

/* [2026-06-23 MKO] Removed .pn-linked-items / .pn-subsection-title / .pn-linked-row —
   the "Linked Items" subsection was retired; Diagnosis is now its own card. */

#progressNoteModal .tp-pill-btn,
#progressNoteModal .pn-action-btn {
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: #2563eb;
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
}

#progressNoteModal .tp-pill-btn:hover,
#progressNoteModal .pn-action-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

#progressNoteModal #pnFormatToggle .elevita-tab-pill {
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: #2563eb;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
}

#progressNoteModal #pnFormatToggle .elevita-tab-pill.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

#progressNoteModal .risk-card,
#progressNoteModal .mse-panel {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 14px;
}

#progressNoteModal .risk-card.risk-active {
    background: #fff7ed;
    border-color: #fed7aa;
}

#progressNoteModal .mse-card {
    border-color: #dbeafe;
    border-radius: 10px;
    background: #f8fbff;
}

#progressNoteModal .group-progress-readonly-field {
    min-height: 39px;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #f8fbff;
    padding: 8px 10px;
    font-size: 13px;
    color: #111827;
}

#progressNoteModal .group-progress-readonly-field-lg {
    min-height: 96px;
}

#progressNoteModal .pn-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #eaecf0;
    border-top: 1px solid #d5d8de;
}

@media (max-width: 900px) {
    #progressNoteModal #pnEditorContainer {
        padding: 16px 12px !important;
    }

    #progressNoteModal .pn-editor-shell {
        padding: 12px;
    }

    #progressNoteModal .tp-mock-card {
        padding: 18px;
    }

    #progressNoteModal .tp-mock-card-header {
        flex-direction: column;
    }
}

/* =========================================
   [2026-03-27 MKO] MSE (Mental Status Exam) Progress Notes
   ========================================= */

/* Outer panel wrapping the MSE grid */
.mse-panel {
    border: 1px solid var(--elevita-hairline, #ddd);
    border-radius: 1rem;
    padding: .75rem;
    background: var(--elevita-gray-50, #f9fafb);
}

/* 2-column grid for MSE domain cards */
.mse-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
}

@media (max-width: 980px) {
    .mse-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual MSE domain card */
.mse-card {
    background: var(--elevita-surface-bg, #fff);
    border: 1px solid var(--elevita-hairline, #ddd);
    border-radius: .625rem;
    padding: .75rem;
}

/* Card header row: title + comment icon */
.mse-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .625rem;
    margin-bottom: .5rem;
}

.mse-card-title {
    font-weight: 700;
    font-size: .8125rem;
    margin: 0;
}

.mse-card-sub {
    color: var(--elevita-text-muted, #666);
    font-size: .6875rem;
    margin-top: 2px;
}

/* Radio option grid inside each card */
.mse-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .375rem .625rem;
    margin-top: .375rem;
}

@media (max-width: 520px) {
    .mse-options {
        grid-template-columns: 1fr;
    }
}

/* Individual option label */
.mse-opt {
    display: grid;
    grid-template-columns: 1rem 1fr;
    align-items: start;
    gap: .5rem;
    font-size: .75rem;
    color: var(--elevita-text, #111);
    line-height: 1.25;
    cursor: pointer;
}

.mse-opt input[type="radio"] {
    width: 1rem;
    height: 1rem;
    margin: 2px 0 0 0;
    accent-color: var(--elevita-brand-primary, #4f46e5);
}

/* Comment toggle button */
.mse-comment-btn {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: .625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--elevita-hairline, #ddd);
    background: var(--elevita-gray-50, #f9fafb);
    cursor: pointer;
    flex-shrink: 0;
}

.mse-comment-btn.filled {
    border-color: var(--elevita-brand-primary, #4f46e5);
}

.mse-comment-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Comment textarea wrapper */
.mse-comment {
    margin-top: .5rem;
}

.mse-comment textarea {
    min-height: 4.375rem;
}

/* Inline clear-comment link */
.mse-clear-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--elevita-text-muted, #666);
    font-size: .75rem;
    text-decoration: underline;
    cursor: pointer;
}

/* =========================================
   [2026-03-27 MKO] Risk Assessment section Progress Notes
   ========================================= */

/* Outer card container */
.risk-card {
    border: 1px solid var(--elevita-hairline, #ddd);
    border-radius: 1rem;
    padding: .75rem;
    background: var(--elevita-gray-50, #f9fafb);
    transition: background-color .25s ease, border-color .25s ease;
}

/* Active risk state — red background */
.risk-card.risk-active {
    background: #fff5f5;
    border-color: #f5c6cb;
}

/* Toggleable risk badge pills */
.risk-pill {
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .75rem;
    transition: background-color .15s ease, color .15s ease;
}

.risk-pill.active {
    background-color: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
    color: #fff;
}

/* Dark mode overrides */
:root[data-bs-theme="dark"] .risk-card {
    background: var(--elevita-dark-surface, #1e1e1e);
    border-color: var(--elevita-dark-hairline, #333);
}

:root[data-bs-theme="dark"] .risk-card.risk-active {
    background: #3b1a1a;
    border-color: #6b2c2c;
}
/* Standardize ALL delete buttons */
.btn-outline-danger:hover {
    background-color: #bb2d3b !important;
    border-color: #bb2d3b !important;
    color: #fff !important;
}

/* =========================================
   [2026-05-13 MKO] ROI Module — status badges, list containers
   ========================================= */

/* Base badge — used in Dashboard, _RoiList partial, and edit modal header */
.roi-status-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 9999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: .02em;
    line-height: 1.4;
}

/* Status-specific badge colours */
.roi-badge-draft {
    background-color: #e9ecef;
    color: #495057;
}

.roi-badge-completed {
    background-color: #d1fae5;
    color: #065f46;
}

.roi-badge-expired {
    background-color: #fef3c7;
    color: #92400e;
}

.roi-badge-revoked {
    background-color: #fee2e2;
    color: #991b1b;
}

/* ROI list containers — scoped hover-row effect */
#roiList_Preadmission .table tbody tr:hover,
#roiList_Admission .table tbody tr:hover,
#roiListContainer .table tbody tr:hover,
#roiContactListContainer .table tbody tr:hover,
#RoiList_Dashboard .table tbody tr:hover {
    background-color: var(--elevita-gray-50, #f9fafb);
}

/* [2026-05-14 MKO] ROI emphasise the 42 CFR Part 2 notice when the Part 2
   information type is selected; class toggled by roi.js _syncPart2Reminder(). */
#roiEditModal .part2-notice-active {
    background-color: rgba(234, 179, 8, 0.22) !important;
    border: 1px solid rgba(234, 179, 8, 0.55) !important;
    font-weight: 500;
}

/* =========================================
   [2026-05-14 MKO] ROI modal — modernized visual treatment (brand mockup parity)
   All rules scoped to #roiEditModal to avoid side-effects elsewhere.
   ========================================= */

/* Teal notice strip inserted between modal-header and modal-body */
#roiEditModal .roi-notice-strip {
    background: rgba(47, 164, 160, 0.07);
    border-bottom: 1px solid rgba(47, 164, 160, 0.18);
    padding: 9px 20px;
    font-size: 0.84rem;
    color: var(--elevita-gray-700, #374151);
}

/* Card header — flex row with icon badge + title */
#roiEditModal .roi-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
}

/* Teal icon badge before each section title */
#roiEditModal .roi-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 164, 160, 0.12);
    color: var(--elevita-accent-teal, #2fa4a0);
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1;
}

/* Two-column grid for checkbox / radio option groups */
#roiEditModal .roi-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Each checkbox / radio presented as a bordered card-pill */
#roiEditModal .roi-check-card {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 10px;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    transition: border-color 0.13s ease, background-color 0.13s ease;
    min-height: 42px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--bs-body-color, #212529);
    margin: 0;
    line-height: 1.35;
    user-select: none;
}

#roiEditModal .roi-check-card:hover {
    border-color: var(--elevita-accent-teal, #2fa4a0);
    background: rgba(47, 164, 160, 0.04);
}

#roiEditModal .roi-check-card input[type="checkbox"],
#roiEditModal .roi-check-card input[type="radio"] {
    margin-top: 2px;
    width: 15px;
    height: 15px;
    accent-color: var(--elevita-accent-teal, #2fa4a0);
    flex-shrink: 0;
    cursor: pointer;
}

/* Span a card-pill across the full width of the grid */
#roiEditModal .roi-check-card-wide {
    grid-column: 1 / -1;
}

/* Softer-radius inputs and selects throughout the modal */
#roiEditModal .form-control,
#roiEditModal .form-select {
    border-radius: 9px;
}

/* Uppercase kicker labels for field groups */
#roiEditModal .roi-field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--elevita-gray-500, #6b7280);
    margin-bottom: 5px;
}

/* Dark mode overrides */
html[data-bs-theme="dark"] #roiEditModal .roi-notice-strip {
    background: rgba(47, 164, 160, 0.10);
    border-color: rgba(47, 164, 160, 0.25);
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] #roiEditModal .roi-section-icon {
    background: rgba(47, 164, 160, 0.20);
}

html[data-bs-theme="dark"] #roiEditModal .roi-check-card {
    background: var(--elevita-surface-dark-800, #1e293b);
    border-color: var(--elevita-surface-dark-700, #334155);
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] #roiEditModal .roi-check-card:hover {
    border-color: var(--elevita-accent-teal, #2fa4a0);
    background: rgba(47, 164, 160, 0.10);
}

/* ── ROI Signature Tiles (2026-05-14 MKO) ─────────────────────────── */
#roiEditModal .roi-signature-tile {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 10px;
    padding: 12px;
    background: var(--bs-body-bg, #fff);
    min-height: 60px;
}

#roiEditModal .roi-signature-tile .roi-sig-pane-drawn canvas,
#roiEditModal .roi-signature-tile .roi-sig-pane-stamp canvas {
    display: block;
    width: 100%;
    height: 120px;
    border: 1px solid var(--bs-border-color, #cbd5e1);
    border-radius: 4px;
    background: #fff;
    touch-action: none;
    cursor: crosshair;
}

html[data-bs-theme="dark"] #roiEditModal .roi-signature-tile {
    background: var(--elevita-surface-dark-800, #1e293b);
    border-color: var(--elevita-surface-dark-700, #334155);
}

html[data-bs-theme="dark"] #roiEditModal .roi-signature-tile .roi-sig-pane-drawn canvas,
html[data-bs-theme="dark"] #roiEditModal .roi-signature-tile .roi-sig-pane-stamp canvas {
    background: #fff;
    border-color: var(--elevita-surface-dark-700, #334155);
}

/* =========================================
   [2026-05-18 MKO] Contact modal — card section headers, field labels, rounded inputs
   Scoped to #contactFormModal to match the ROI modal visual treatment.
   ========================================= */

#contactFormModal .contact-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
}

#contactFormModal .contact-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 164, 160, 0.12);
    color: var(--elevita-accent-teal, #2fa4a0);
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1;
}

#contactFormModal .contact-field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--elevita-gray-500, #6b7280);
    margin-bottom: 5px;
}

#contactFormModal .form-control,
#contactFormModal .form-select {
    border-radius: 9px;
}

/* [2026-06-10 MKO] When the empty "State" option is the selected one, show it in
   the muted placeholder color to match the sibling input placeholders (Address,
   City, Zip). Pure CSS via :has() — no JS toggle. Real options stay body color. */
#contactFormModal .address-state-select:has(option[value=""]:checked) {
    color: var(--bs-secondary-color);
}

#contactFormModal .address-state-select option {
    color: var(--bs-body-color);
}

html[data-bs-theme="dark"] #contactFormModal .contact-section-icon {
    background: rgba(47, 164, 160, 0.20);
}

.section-disabled {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

/* =========================================
   [2026-05-26 MKO] Signature Protocols — three-pane setup editor
   Scoped to .sp-panel, .sp-category-btn, .sp-section, .sp-status-pill,
   .sp-notice. No global rules modified.
   ========================================= */

.sp-panel {
    border: 1px solid var(--elevita-border, #dfe7ef);
    border-radius: 18px;
    overflow: hidden;
}

.sp-panel-header {
    padding: 14px 18px;
    background: var(--elevita-surface-soft, #f9fbfd);
    border-bottom: 1px solid var(--elevita-border, #dfe7ef);
}

.sp-panel-title {
    font-weight: 900;
    font-size: 0.9rem;
    margin: 0;
}

.sp-panel-sub {
    font-size: 0.75rem;
    color: var(--elevita-muted, #64748b);
    margin: 3px 0 0;
    line-height: 1.35;
}

.sp-panel-body {
    padding: 14px;
}

/* Category list buttons */
.sp-category-btn {
    background: #fff;
    border: 1px solid var(--elevita-border, #dfe7ef);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sp-category-btn:hover {
    border-color: var(--elevita-primary, #1f7a8c);
    box-shadow: 0 2px 8px rgba(31, 122, 140, 0.10);
}

.sp-category-btn.sp-active {
    border-color: var(--elevita-primary, #1f7a8c);
    background: var(--elevita-primary-soft, #e7f5f7);
    box-shadow: inset 3px 0 0 var(--elevita-primary, #1f7a8c);
}

.sp-cat-name {
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.2;
}

.sp-cat-desc {
    font-size: 0.72rem;
    color: var(--elevita-muted, #64748b);
    margin-top: 4px;
    line-height: 1.35;
}

/* Derived-status pills */
.sp-status-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.sp-status-required {
    color: #17845b;
    background: #eaf8f1;
    border-color: #ccebdd;
}

.sp-status-conditional {
    color: #b7791f;
    background: #fff8e6;
    border-color: #f3dda3;
}

.sp-status-optional {
    color: var(--elevita-primary, #1f7a8c);
    background: var(--elevita-primary-soft, #e7f5f7);
    border-color: #cdeef3;
}

.sp-status-none {
    color: var(--elevita-muted, #64748b);
    background: #f1f5f9;
    border-color: #dce4ed;
}

/* Editor sections */
.sp-section {
    border: 1px solid var(--elevita-border, #dfe7ef);
    border-radius: 16px;
    overflow: hidden;
}

.sp-section-head {
    padding: 12px 14px;
    background: var(--elevita-surface-soft, #f9fbfd);
    border-bottom: 1px solid var(--elevita-border, #dfe7ef);
}

.sp-section-title {
    font-size: 0.85rem;
    font-weight: 900;
}

.sp-section-desc {
    font-size: 0.72rem;
    color: var(--elevita-muted, #64748b);
    margin-top: 2px;
    line-height: 1.35;
}

.sp-section-body {
    padding: 14px;
}

.sp-section-placeholder .sp-section-head {
    background: transparent;
    border-bottom: none;
}

/* Field labels */
.sp-field-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--elevita-gray-600, #334155);
    margin-bottom: 5px;
    display: block;
}

.sp-hint {
    font-size: 0.7rem;
    color: var(--elevita-muted, #64748b);
    margin-top: 4px;
}

.sp-due-number-input {
    max-width: 80px;
    flex-shrink: 0;
}

/* Editor footer */
.sp-editor-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--elevita-border, #dfe7ef);
    background: var(--elevita-surface-soft, #f9fbfd);
}

/* Notices */
.sp-notice {
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 0.75rem;
    line-height: 1.45;
    border: 1px solid;
}

.sp-notice-info {
    background: var(--elevita-primary-soft, #e7f5f7);
    border-color: #cdeef3;
    color: #155e6d;
}

.sp-notice-warn {
    background: #fff8e6;
    border-color: #f3dda3;
    color: #7a4b09;
}

/* Preview card */
.sp-preview-card {
    border: 1px solid var(--elevita-border, #dfe7ef);
    border-radius: 14px;
    padding: 13px;
    background: #fff;
    margin-bottom: 12px;
}

/* Dark mode overrides */
html[data-bs-theme="dark"] .sp-category-btn {
    background: var(--elevita-surface-dark-800, #1e293b);
    border-color: var(--elevita-border-dark, #334155);
    color: var(--elevita-text-dark, #e2e8f0);
}

html[data-bs-theme="dark"] .sp-category-btn.sp-active {
    background: rgba(31, 122, 140, 0.15);
}

html[data-bs-theme="dark"] .sp-panel-header,
html[data-bs-theme="dark"] .sp-section-head,
html[data-bs-theme="dark"] .sp-editor-footer {
    background: var(--elevita-surface-dark-800, #1e293b);
    border-color: var(--elevita-border-dark, #334155);
}

html[data-bs-theme="dark"] .sp-preview-card {
    background: var(--elevita-surface-dark-800, #1e293b);
    border-color: var(--elevita-border-dark, #334155);
}

/* =========================================
   [2026-05-26 MKO] Signature Protocols Phase 3 — Signer Matrix table
   Scoped to .sp-signer-table, .sp-order-col, .sp-order-input.
   ========================================= */

.sp-signer-table {
    font-size: 0.78rem;
}

.sp-signer-table th {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--elevita-muted, #64748b);
    background: var(--elevita-surface-soft, #f9fbfd);
    border-bottom: 1px solid var(--elevita-border, #dfe7ef);
    white-space: nowrap;
    padding: 8px 10px;
}

.sp-signer-table td {
    padding: 6px 10px;
    vertical-align: top;
}

.sp-order-col {
    width: 80px;
}

.sp-order-input {
    width: 64px;
}

html[data-bs-theme="dark"] .sp-signer-table th {
    background: var(--elevita-surface-dark-800, #1e293b);
    border-color: var(--elevita-border-dark, #334155);
}



/* [2026-05-27 MKO] Signature Protocols Phase 6 — Live Preview step list
   Scoped to .sp-preview-list, .sp-preview-step, .sp-step-title, .sp-step-meta.
   No global rules modified. */

.sp-preview-list {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.sp-preview-step {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 11px;
    border: 1px dashed var(--elevita-border, #c8d5e3);
    border-radius: 11px;
    background: var(--elevita-surface-soft, #fbfdfe);
}

.sp-step-title {
    font-weight: 700;
    font-size: 0.78rem;
}

.sp-step-meta {
    font-size: 0.7rem;
    color: var(--elevita-muted, #64748b);
    margin-top: 2px;
    line-height: 1.35;
}

html[data-bs-theme="dark"] .sp-preview-step {
    background: var(--elevita-surface-dark-700, #1a2436);
    border-color: var(--elevita-border-dark, #334155);
}

/* [2026-05-28 MKO] Signature Protocols Phase 10 — v2 Overrides (mini-protocols).
   Scoped to .sp-override-header, .sp-override-detail. No global rules modified. */

.sp-override-header {
    background-color: var(--bs-body-bg);
    cursor: default;
    transition: background-color 0.15s ease;
}

.sp-override-header:hover {
    background-color: rgba(0, 0, 0, 0.025);
}

html[data-bs-theme="dark"] .sp-override-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.sp-override-header .form-select-sm {
    max-width: 320px;
}

.sp-override-detail {
    background-color: rgba(0, 0, 0, 0.02);
}

html[data-bs-theme="dark"] .sp-override-detail {
    background-color: rgba(255, 255, 255, 0.03);
}

/* [2026-05-27 MKO] Signature Protocols Phase 7 — Audit History modal table.
   Scoped to .sp-audit-table, .sp-audit-ts, .sp-audit-field, .sp-audit-val. */

.sp-audit-table {
    font-size: 0.82rem;
}

.sp-audit-ts {
    white-space: nowrap;
    min-width: 170px;
    color: var(--bs-secondary);
}

.sp-audit-field {
    font-family: var(--bs-font-monospace);
    font-size: 0.78rem;
    min-width: 120px;
    max-width: 200px;
}

.sp-audit-val {
    font-size: 0.80rem;
    max-width: 220px;
    word-break: break-word;
}

/* =========================================================
   REQUIRED SIGNATURES PANEL — redesign (2026-06-02 MKO)
   Shared by the Form edit modal and Progress Note modal.
   Self-contained card; no dependency on tp-mock-* styles.
   ========================================================= */
/* [2026-06-04 MKO] req-sig-header: flex layout for icon + title alignment */
.req-sig-panel {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.req-sig-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.req-sig-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin: 0;
}
.req-sig-sub {
    font-size: 12.5px;
    color: #64748b;
    margin-top: 3px;
}
.req-sig-body {
    padding: 4px 18px 8px;
}
.req-sig-loading,
.req-sig-empty {
    font-size: 13px;
    color: #64748b;
    padding: 14px 0;
}
.req-sig-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
.req-sig-slot:last-child {
    border-bottom: none;
}
.req-sig-dot {
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    background: #cbd5e1;
}
.req-sig-slot.is-fulfilled .req-sig-dot {
    background: #16a34a;
}
.req-sig-slot.is-outstanding .req-sig-dot {
    background: #f59e0b;
}
.req-sig-slot-main {
    flex: 1 1 auto;
    min-width: 0;
}
.req-sig-slot-role {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.25;
}
.req-sig-slot-meta {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}
.req-sig-status {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.req-sig-slot.is-fulfilled .req-sig-status {
    background: #dcfce7;
    color: #15803d;
}
.req-sig-slot.is-outstanding .req-sig-status {
    background: #fef3c7;
    color: #b45309;
}
/* [2026-06-03 MKO] is-pending alias for ROI protocol slots pending native-party action */
.req-sig-slot.is-pending .req-sig-dot {
    background: #f59e0b;
}
.req-sig-slot.is-pending .req-sig-status {
    background: #fef3c7;
    color: #b45309;
}
.req-sig-sign-btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 4px 14px;
}

/* [2026-05-22 MKO] Highlight Revoked/Expired ROI rows in Pre-Admission and Admission tabs */
/* !important needed to beat Bootstrap's .table > :not(caption) > * > * background-color declaration */
.table tbody tr.roi-row-invalid > td {
    background-color: #fde8e8 !important;
}

html[data-bs-theme="dark"] .table tbody tr.roi-row-invalid > td {
    background-color: rgba(220, 53, 69, 0.18) !important;
}

/* [2026-05-22 MKO] Highlight contacts with no valid or expired ROI — HIPAA "do not call" indicator */
/* Selector must be more specific than .bootstrap-table .table tbody tr > td (0,2,3) to override its !important */
.bootstrap-table .table tbody tr.contact-row-roi-invalid > td {
    background-color: #fde8e8 !important;
}

html[data-bs-theme="dark"] .bootstrap-table .table tbody tr.contact-row-roi-invalid > td {
    background-color: rgba(220, 53, 69, 0.18) !important;
}

/* =============================================================================
   Elevita — Client Admission & Episode Placement
   All classes prefixed adm- to avoid collisions with Bootstrap or site.css
   ============================================================================= */

/* ── Workflow locked state ─────────────────────────────────────────────────── */
.adm-workflow-locked {
    opacity: .52;
    pointer-events: none;
    filter: grayscale(.04);
    transition: opacity .2s ease;
}

/* ── Service line cards ────────────────────────────────────────────────────── */
.adm-sl-card {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .85rem;
    background: #f8fafc;
    padding: 1rem;
    margin-bottom: .85rem;
}

.adm-sl-card--default {
    border-color: #b4cffa;
    box-shadow: inset 0 0 0 1px #b4cffa;
    background: linear-gradient(0deg, rgba(234,242,255,.55), rgba(234,242,255,.55)), #f8fafc;
}

/* ── Diagnosis rows ────────────────────────────────────────────────────────── */
.adm-dx-row {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: #f8fafc;
    padding: .75rem .85rem;
    margin-bottom: .6rem;
}

/* ── Required form rows ────────────────────────────────────────────────────── */
.adm-form-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: .65rem;
    align-items: start;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: #fff;
    padding: .75rem .85rem;
    margin-bottom: .5rem;
}

.adm-form-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .85rem;
    font-weight: 700;
    background: #e8f0fc;
    color: #1063c5;
    border: 1px solid #b4cffa;
    flex-shrink: 0;
}

/* ── Episode nav (left column) ─────────────────────────────────────────────── */
.adm-nav-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #adb5bd;
    padding: 0 .25rem .4rem;
}

.adm-episode-row {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: #fff;
    padding: .65rem .75rem;
    cursor: pointer;
    margin-bottom: .35rem;
    transition: border-color .12s;
}

    .adm-episode-row:hover {
        border-color: #b4cffa;
    }

.adm-episode-row--active {
    border-color: #b4cffa;
    box-shadow: inset 0 0 0 1px #b4cffa;
    background: linear-gradient(0deg, rgba(234,242,255,.65), rgba(234,242,255,.65)), #fff;
}

.adm-ep-pill {
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #dee2e6;
    color: #495057;
}

/* ── Team chips ────────────────────────────────────────────────────────────── */
.adm-team-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #fff;
    padding: .35rem .75rem .35rem .45rem;
}

.adm-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e8f0fc;
    color: #1063c5;
    border: 1px solid #b4cffa;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Readiness panel ───────────────────────────────────────────────────────── */
.adm-readiness-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: .6rem;
    align-items: center;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: #fff;
    padding: .6rem .8rem;
    margin-bottom: .4rem;
}

.adm-r-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 800;
    flex-shrink: 0;
}

.adm-r-icon--ok {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.adm-r-icon--warn {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
}

.adm-r-icon--blocked {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #fed7d7;
}

/* ── Elly hint ──────────────────────────────────────────────────────────────── */
.adm-elly-hint {
    border: 1px dashed #b4cffa;
    background: #e8f0fc;
    color: #1d4ed8;
    border-radius: .75rem;
    padding: .6rem .8rem;
    font-size: .78rem;
    line-height: 1.5;
}

/* ── Status badges (section header right) ──────────────────────────────────── */
.adm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .71rem;
    font-weight: 700;
    border: 1px solid;
    white-space: nowrap;
}

.adm-status-badge--complete {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.adm-status-badge--warn {
    background: #fffbeb;
    color: #b45309;
    border-color: #fcd34d;
}

.adm-status-badge--blocked {
    background: #fff5f5;
    color: #c53030;
    border-color: #fed7d7;
}

/* ── Dot indicators ────────────────────────────────────────────────────────── */
.adm-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.adm-dot--green {
    background: #059669;
}

.adm-dot--orange {
    background: #f59e0b;
}

.adm-dot--red {
    background: #ef4444;
}

.adm-dot--purple {
    background: #7c3aed;
}

/* ── Pills (form status, readiness badges) ─────────────────────────────────── */
.adm-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .22rem .55rem;
    font-size: .71rem;
    font-weight: 700;
    border: 1px solid;
    white-space: nowrap;
}

.adm-pill--ok {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.adm-pill--warn {
    background: #fffbeb;
    color: #b45309;
    border-color: #fcd34d;
}

.adm-pill--blocked {
    background: #fff5f5;
    color: #c53030;
    border-color: #fed7d7;
}

/* ── Field label ───────────────────────────────────────────────────────────── */
.adm-field-label {
    font-size: .78rem;
    font-weight: 700;
    color: #495057;
    margin-bottom: .3rem;
    display: block;
}

/* ── Info tooltip trigger ──────────────────────────────────────────────────── */
.adm-info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: .3rem;
    border-radius: 50%;
    font-size: .63rem;
    font-weight: 700;
    color: #1063c5;
    background: #e8f0fc;
    border: 1px solid #b4cffa;
    cursor: help;
    vertical-align: middle;
    line-height: 1;
}

/* ── Client search result rows ─────────────────────────────────────────────── */
.adm-client-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    border: 1px solid #dee2e6;
    border-radius: .65rem;
    background: #fff;
    padding: .65rem .85rem;
    margin-bottom: .4rem;
}

    .adm-client-result:last-child {
        margin-bottom: 0;
    }

/* ── Sticky footer ─────────────────────────────────────────────────────────── */
.adm-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid #dee2e6;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px);
}

/* ── Branded card accent (client selection, readiness) ─────────────────────── */
.card-elevita--branded {
    border-color: #b4cffa !important;
}

#admLoadingState {
    display: none !important;
}

/* =============================================================================
   Episode Management — scoped styles (em- prefix)
   ============================================================================= */

/* ── Metric cards ──────────────────────────────────────────────────────────── */
.em-metric-card {
    transition: border-color .13s, box-shadow .13s;
}

    .em-metric-card:hover,
    .em-metric-card.em-active {
        border-color: #b4cffa !important;
        background: #e8f0fc !important;
    }

.em-metric-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7785;
    margin-bottom: 4px;
}

.em-metric-val {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: #16202e;
}

.em-metric-sub {
    font-size: .74rem;
    color: #a0aec0;
    margin-top: 3px;
}

/* ── Census cards ──────────────────────────────────────────────────────────── */
.em-census-card {
    transition: border-color .13s;
}

    .em-census-card:hover,
    .em-census-card.em-active {
        border-color: #b4cffa !important;
        background: #e8f0fc !important;
    }

/* ── Queue table ───────────────────────────────────────────────────────────── */
.em-queue-table th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
}

.em-queue-row:hover td {
    background: #f7fbff !important;
}

.em-queue-row.table-active td {
    background: #e8f0fc !important;
}

.btn-xs {
    padding: .25rem .5rem;
    font-size: .75rem;
    border-radius: .35rem;
}

/* ── Timeline dot ──────────────────────────────────────────────────────────── */
.em-tl-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #1063c5;
    box-shadow: 0 0 0 4px #e8f0fc;
    flex-shrink: 0;
}

/* ── Readiness icons in detail panel ──────────────────────────────────────── */
.em-r-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .74rem;
    font-weight: 800;
    flex-shrink: 0;
}

.em-r-ok {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.em-r-warn {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
}

/* ── Action buttons in detail panel ───────────────────────────────────────── */
.em-action-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #a0aec0;
    margin: 12px 0 6px;
}

.em-action-btn {
    display: block;
    width: 100%;
    text-align: left;
    border-radius: .65rem;
    padding: .55rem .75rem;
    line-height: 1.35;
}

/* ── Edit button in detail panel ───────────────────────────────────────────── */
.em-edit-btn {
    font-size: .75rem;
    padding: .25rem .6rem;
    border-radius: .4rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Episode Management — dark mode fixes ───────────────────── */
[data-bs-theme="dark"] .em-metric-card,
[data-bs-theme="dark"] .em-census-card,
[data-bs-theme="dark"] .card-elevita {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .em-metric-label,
[data-bs-theme="dark"] .em-metric-sub,
[data-bs-theme="dark"] .em-metric-val {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .em-metric-card:hover,
[data-bs-theme="dark"] .em-census-card:hover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), .1) !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
}

[data-bs-theme="dark"] .em-queue-row:hover td {
    background: rgba(255,255,255,.05) !important;
}

[data-bs-theme="dark"] .em-queue-row.table-active td {
    background: rgba(var(--bs-primary-rgb), .15) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .em-tl-dot {
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .2);
}

/* ── Nav dropdown z-index fix ─────────────────────────────────────────────── */
.app-shell,
.app-main {
    overflow: visible !important;
}

.app-header {
    position: relative;
    z-index: 1030;
}

    .app-header .dropdown-menu {
        z-index: 1031;
    }

.elevita-page-header {
    position: relative;
    z-index: 10;
}

.adm-sticky-footer {
    z-index: 10;
}

.sticky-top {
    z-index: 10 !important;
}

/* ── Required form rows ────────────────────────────────────────────────────── */
.adm-form-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: .65rem;
    align-items: start;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: #fff;
    padding: .75rem .85rem;
    margin-bottom: .5rem;
}

/* ============================================================
   [2026-06-17 MKO] Treatment Plan Themes
   Pill-style theme checkboxes on the TP editor: Problem-level
   assignment + inherited display / per-level override below.
   Pills are real checkboxes (keyboard-operable); selected state
   uses a checkmark indicator, not color alone (accessibility).
   ============================================================ */
.tp-theme-panel {
    border: 1px solid #d9e5f7;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin: 12px 0;
}
.tp-theme-head { margin-bottom: 8px; }
.tp-theme-title { font-weight: 700; }
.tp-theme-hint { font-size: 12px; color: #52637a; }
.tp-theme-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 8px;
}
.tp-theme-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 28px 6px 10px;
    border-radius: 999px;
    border: 1px solid #d6dfed;
    background: #f8fbff;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.tp-theme-pill.tp-theme-pill-sm { min-height: 28px; font-size: 11px; }
/* Keep the native input focusable (keyboard a11y) but visually replaced by the pill. */
.tp-theme-pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.tp-theme-pill:has(input:checked) {
    border: 2px solid #2563eb;
    background: #eef4ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.tp-theme-pill:has(input:focus-visible) {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.tp-theme-pill:has(input:checked)::after {
    content: "\2713";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}
.tp-theme-pill-other { background: #f4f1f8; border-color: #b8a6cc; }

.tp-theme-other-details {
    display: none;
    margin-top: 10px;
    border: 1px dashed #cfdcef;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
}
.tp-theme-other-details.is-visible { display: block; }
.tp-theme-other-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.tp-theme-library-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #52637a;
    font-size: 12px;
    font-weight: 700;
}
.tp-theme-library-check input { width: 16px; height: 16px; min-height: 16px; }

/* Lower-level inherited display + override picker. */
.tp-theme-item { margin: 8px 0 4px; }
.tp-theme-inherit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #52637a;
    font-size: 12px;
}
.tp-theme-inherit-label { font-weight: 700; }
.tp-theme-mini-pill {
    border: 1px solid #d6dfed;
    border-radius: 999px;
    padding: 3px 8px;
    background: #fff;
    color: #27364a;
    font-weight: 600;
}
.tp-theme-none { font-style: italic; }
.tp-theme-override {
    display: none;
    margin-top: 8px;
}
.tp-theme-override.is-visible { display: block; }
.tp-theme-edit-btn { background: none; border: none; }

@media (max-width: 900px) {
    .tp-theme-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
    .tp-theme-other-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   [2026-06-17 MKO] Progress Note — Themes / Session Response pills.
   Real checkbox inputs styled as pills; selected state shown with a
   checkmark (not color alone) and keyboard focus is visible.
   ============================================================ */
.pn-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 999px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.pn-pill:hover { border-color: var(--bs-primary, #0d6efd); }
/* Hide the native box but keep it in the layout/accessibility tree. */
.pn-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.pn-pill span::before {
    content: "";
    display: inline-block;
    width: 0;
    margin-right: 0;
    font-weight: 700;
    transition: width .1s ease;
}
.pn-pill:has(input:checked) {
    border-color: var(--bs-primary, #0d6efd);
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 14%, #fff);
    font-weight: 700;
}
.pn-pill:has(input:checked) span::before {
    content: "\2713"; /* checkmark */
    width: auto;
    margin-right: 5px;
}
/* Keyboard focus ring on the pill while tabbing through the group. */
.pn-pill:has(input:focus-visible) {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}
.pn-pill-other { border-style: dashed; }

/* ============================================================
   [2026-06-18 MKO] Progress Note — Treatment Plan item picker (Phase 3).
   Summary tiles, plan hierarchy picker, per-item status radio pills,
   clinical evidence cards. Real radio inputs styled as pills.
   ============================================================ */

/* Summary tiles */
.pn-tp-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.pn-tp-summary-tile {
    background: #f4f7fc;
    border: 1px solid #dce6f5;
    border-radius: 10px;
    padding: 12px 14px;
    text-align: center;
}
.pn-tp-summary-label { font-size: 11px; font-weight: 700; color: #52637a; text-transform: uppercase; letter-spacing: .03em; }
.pn-tp-summary-value { font-size: 20px; font-weight: 800; color: #1c2d44; margin-top: 4px; }

/* Picker toggle */
.pn-tp-picker { margin-top: 12px; }
.pn-tp-picker-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

/* Item list */
.pn-tp-item-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fafbff;
    padding: 6px 0;
}
.pn-tp-picker-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 14px;
    cursor: pointer;
}
.pn-tp-picker-item:hover { background: #eef4ff; }
.pn-tp-picker-item.depth-0 { padding-left: 14px; }
.pn-tp-picker-item.depth-1 { padding-left: 28px; }
.pn-tp-picker-item.depth-2 { padding-left: 42px; }
.pn-tp-picker-item.depth-3 { padding-left: 56px; }
.pn-tp-check { margin-top: 3px; flex-shrink: 0; }
.pn-tp-picker-body { min-width: 0; }
.pn-tp-item-name { font-weight: 600; font-size: 13px; color: #1c2d44; }
.pn-tp-item-path { font-size: 11px; color: #52637a; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-tp-loading { padding: 12px 14px; }

/* Type badge (Problem / Goal / Objective / Intervention) */
.pn-tp-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e8effe;
    color: #2563eb;
    margin-bottom: 3px;
}

/* [2026-06-23 MKO] #4 — "Suggested from session themes" panel: plan items whose assigned themes
   match the note's selected themes, surfaced automatically above the (collapsed) picker. */
.pn-tp-theme-suggestions {
    border: 1px solid #b8ddc8;
    border-radius: 12px;
    background: #f1f8f4;
    padding: 12px;
    margin: 12px 0;
}
.pn-tp-theme-suggest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.pn-tp-theme-suggest-title { font-weight: 800; font-size: 13px; color: #1c2d44; }
.pn-tp-theme-suggest-sub { font-size: 12px; color: #52637a; margin-top: 2px; }
.pn-tp-theme-suggest-empty { font-size: 12px; color: #52637a; }
.pn-tp-theme-suggest-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 760px) { .pn-tp-theme-suggest-list { grid-template-columns: 1fr; } }
.pn-tp-theme-suggest-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #d7e7de;
    border-radius: 10px;
    background: #fff;
    padding: 9px;
    min-width: 0; /* allow the card to shrink within the grid track */
}
/* min-width:0 lets the flex child shrink so the path can ellipsis and the name can wrap
   instead of spilling out of the panel. */
.pn-tp-theme-suggest-info { min-width: 0; }
.pn-tp-theme-suggest-name {
    font-weight: 600; font-size: 13px; color: #1c2d44; margin-top: 2px;
    overflow-wrap: anywhere;
}
.pn-tp-theme-suggest-path {
    font-size: 11px; color: #52637a; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Empty state */
.pn-tp-empty-state {
    padding: 18px 0 6px;
    color: #52637a;
    font-size: 13px;
}

/* Selected item cards */
.pn-tp-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pn-tp-note-card {
    border: 1px solid #dce6f5;
    border-radius: 10px;
    background: #fff;
    padding: 14px;
}
.pn-tp-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.pn-tp-card-meta { flex: 1; min-width: 0; }
.pn-tp-card-name { font-size: 14px; word-break: break-word; }
.pn-tp-card-path { font-size: 11px; margin-top: 2px; }
.pn-tp-card-remove { flex-shrink: 0; margin-top: 2px; }

/* Progress status radio pills */
.pn-tp-inline-doc { margin-top: 4px; }
.pn-tp-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.pn-tp-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #d6dfed;
    background: #f8fbff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color .1s, background .1s;
}
.pn-tp-radio-option:has(input:checked) {
    border: 2px solid #2563eb;
    background: #eef4ff;
}
/* [2026-06-19 MKO] Color-coded progress status pills */
.pn-tp-radio-option[data-status="No Progress"]:has(input:checked) {
    border-color: #dc3545;
    background: #fff5f5;
    color: #b91c1c;
}
.pn-tp-radio-option[data-status="Minimal Progress"]:has(input:checked),
.pn-tp-radio-option[data-status="Moderate Progress"]:has(input:checked) {
    border-color: #d97706;
    background: #fffbeb;
    color: #92400e;
}
.pn-tp-radio-option[data-status="Significant Progress"]:has(input:checked),
.pn-tp-radio-option[data-status="Completed"]:has(input:checked) {
    border-color: #16a34a;
    background: #f0fdf4;
    color: #14532d;
}
/* Overall Progress summary value color states */
.pn-tp-summary-value.pn-tp-progress-red    { color: #b91c1c; }
.pn-tp-summary-value.pn-tp-progress-yellow { color: #92400e; }
.pn-tp-summary-value.pn-tp-progress-green  { color: #15803d; }
.pn-tp-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.pn-tp-radio-option:has(input:focus-visible) {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Clinical evidence textarea */
.pn-tp-evidence { font-size: 13px; resize: vertical; }

@media (max-width: 900px) {
    .pn-tp-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .pn-tp-picker-tools { grid-template-columns: 1fr; }
}

/* ============================================================
   [2026-06-18 MKO] Progress Note — Supporting Documentation cards.
   Status derived from existing note data; no new persistence.
   4-column desktop, 2-column at ≤900px.
   ============================================================ */
.pn-support-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.pn-support-card {
    border: 1px solid #dce6f5;
    border-radius: 12px;
    background: #f8fbff;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
}
.pn-support-card.done {
    border-color: #9dbaf9;
    background: #eef4ff;
}
.pn-support-card-title { font-weight: 800; font-size: 13px; color: #1c2d44; }
.pn-support-card-status { font-size: 12px; color: #52637a; line-height: 1.4; flex: 1; }
/* [2026-06-19 MKO] Responsive grid: 4-col → 2-col at ≤900px → 1-col at ≤767px */
@media (max-width: 900px) {
    .pn-support-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .pn-support-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   [2026-06-18 MKO] Progress Note — Ask Elly TP item suggestions.
   Inline panel inside the TP item picker (pn-tp-elly-box).
   ============================================================ */
.pn-tp-elly-box {
    border: 1px solid #dce6f5;
    border-radius: 10px;
    background: #f8fbff;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.pn-tp-elly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pn-tp-elly-title {
    font-size: 12px;
    font-weight: 800;
    color: #1c2d44;
}
.pn-tp-elly-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.pn-tp-elly-suggestion {
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #fff;
    padding: 8px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}
.pn-tp-elly-suggestion-info { flex: 1; min-width: 0; }
.pn-tp-elly-suggestion-type {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #52637a;
    margin-bottom: 2px;
}
.pn-tp-elly-suggestion-name { font-weight: 700; color: #1c2d44; }
.pn-tp-elly-suggestion-path { font-size: 11px; color: #52637a; margin-top: 2px; }
.pn-tp-elly-suggestion-reason { font-size: 11px; color: #52637a; margin-top: 4px; font-style: italic; }
.pn-tp-elly-suggestion-confidence {
    font-size: 10px;
    font-weight: 700;
    color: #3b82f6;
    white-space: nowrap;
    margin-top: 2px;
}
.pn-tp-elly-suggestion-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

/* ============================================================
   [2026-06-22 MKO] Progress Note ↔ Treatment Plan: type filter pills
   and linked documentation preview.
   ============================================================ */

/* -- Type filter pills (All / Problem / Goal / Objective / Intervention) -- */
.pn-tp-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 10px;
}
.pn-tp-filter-pill {
    border: 1px solid #d6dfed;
    background: #fff;
    color: #52637a;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .1s, background .1s, color .1s;
}
.pn-tp-filter-pill:hover { background: #eef4ff; }
.pn-tp-filter-pill.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* -- Linked Treatment Plan documentation preview -- */
.pn-tp-doc-preview {
    border: 1px solid #dce6f5;
    border-radius: 10px;
    background: #fafbff;
    padding: 12px 14px;
    margin-top: 12px;
}
.pn-tp-doc-preview-title { font-size: 13px; font-weight: 800; color: #1c2d44; }
.pn-tp-doc-preview-sub { margin: 2px 0 8px; }
.pn-tp-doc-preview-item {
    border: 1px solid #e3ebf7;
    border-radius: 8px;
    background: #fff;
    padding: 8px 10px;
    margin-top: 8px;
}
.pn-tp-doc-preview-name { font-weight: 700; font-size: 13px; color: #1c2d44; }
.pn-tp-doc-preview-meta { font-size: 11px; color: #52637a; margin-top: 3px; }
.pn-tp-doc-preview-note { font-size: 12px; color: #1c2d44; margin-top: 4px; white-space: pre-wrap; }

/* ============================================================
   [2026-06-26 MKO] Tasks page — work item cards, status/priority
   badges, assignee chip picker, inline category manager.
   ============================================================ */
.task-card .task-priority-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: .35rem;
}
.task-priority-low { background: #94a3b8; }
.task-priority-normal { background: #3b82f6; }
.task-priority-high { background: #f59e0b; }
.task-priority-critical { background: #ef4444; }

.task-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid #dfe6ef;
    color: #475569;
    background: #f8fafc;
}
.task-status-open { color: #475569; background: #f8fafc; border-color: #dfe6ef; }
.task-status-inprogress { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
.task-status-completed { color: #047857; background: #ecfdf5; border-color: #bbf7d0; }
.task-status-cancelled { color: #be123c; background: #fff1f2; border-color: #fecdd3; }

.task-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: 11px;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #e0e7ff;
}
.task-chip-remove {
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    padding: 0 0 0 .15rem;
    cursor: pointer;
}

/* Assignee chip multi-select */
.task-assignee-picker { position: relative; }
.task-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .35rem;
}
.task-assignee-results {
    position: absolute;
    z-index: 1056; /* above the modal body */
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
    max-height: 14rem;
    overflow-y: auto;
}
.task-assignee-option {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: .4rem .75rem;
    font-size: .875rem;
}
.task-assignee-option:hover { background: #f1f5f9; }

/* ============================================================
   [2026-06-26 MKO] Work Dashboard — comment thread + notification
   bell (collaboration + inbox).
   ============================================================ */

/* -- Comment thread (shared #itemCommentsModal) -- */
.comment-thread {
    max-height: 24rem;
    overflow-y: auto;
}
.comment-item {
    border: 1px solid #e3ebf7;
    border-radius: 10px;
    background: #fafbff;
    padding: .5rem .65rem;
}
.comment-item-mine {
    background: #eef2ff;
    border-color: #e0e7ff;
}
.comment-author { font-size: 12px; font-weight: 700; color: #1c2d44; }
.comment-time { font-size: 11px; color: #52637a; }
.comment-text { font-size: 13px; color: #1c2d44; margin-top: .2rem; white-space: pre-wrap; }
.comment-directed {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: .05rem .4rem;
    border-radius: 999px;
    color: #b45309;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

/* -- Notification bell + dropdown -- */
.notification-badge {
    position: absolute;
    top: 0;
    right: -.35rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .25rem;
    font-size: 10px;
    line-height: 1rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: #ef4444;
    border-radius: 999px;
}
.notification-menu {
    width: 22rem;
    max-width: 90vw;
    padding: 0;
}
#notificationList {
    max-height: 22rem;
    overflow-y: auto;
}
.notification-item {
    border-bottom: 1px solid #eef2f7;
}
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: #f8fafc; }
.notification-item-icon { color: #2563eb; margin-top: .15rem; }
.notification-item-title { font-size: 13px; font-weight: 600; color: #1c2d44; }
.notification-item-meta { font-size: 11px; color: #52637a; margin-top: .1rem; }

/* ===================================================================
   [2026-06-26 Dashboard Work Queues] Pill count badge for the Work
   Queues card pills (All / Inbox / Documentation / Reviews / Tasks).
   Items themselves reuse existing surface-muted / status-pill styling.
   =================================================================== */
.queue-pill-count {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 .35rem;
    margin-left: .15rem;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    color: #475569;
    background: #eef2f7;
    border-radius: 999px;
}
.workqueue-filter.active .queue-pill-count {
    color: #fff;
    background: rgba(255, 255, 255, .25);
}

/* ===================================================================
   [2026-06-30 MKO Dashboard Polish] Production look for the Work Queues
   card: a subtle hover affordance on queue items (they're clickable /
   actionable) and a centered icon on empty states.
   =================================================================== */
.queue-doc-item,
.queue-review-item,
.queue-task-item,
.queue-inbox-item {
    transition: border-color .12s ease, box-shadow .12s ease;
}

.queue-doc-item:hover,
.queue-review-item:hover,
.queue-task-item:hover,
.queue-inbox-item:hover {
    border-color: #c7d2e1;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .06);
}

.queue-empty i {
    font-size: 1.5rem;
    color: #94a3b8;
}

/* [2026-06-30 MKO] Dashboard work-queue secondary filter chips reuse the
   primary pill classes (.workqueue-filter etc.) for an exact color/theme
   match, so no separate chip styling is defined here. */

/* ===================================================================
   [2026-06-30 MKO Dashboard Ask Elly] Ask Elly is an MVP placeholder — no
   service, no data, no actions. The pill is muted to read as "not yet
   active"; selecting it shows a centered coming-soon panel.
   =================================================================== */
.workqueue-elly-placeholder {
    opacity: .65;
}

.workqueue-elly-placeholder:not(.active) {
    color: #94a3b8;
}

.queue-elly-coming-soon i {
    font-size: 1.5rem;
    color: #94a3b8;
}

/* ===================================================================
   [2026-07-06 MKO TP Timelines] "Overdue" badge on Documentation queue
   cards — surfaced when a timeline item (initial-plan due / review due)
   is past its due date. A strong red pill so it reads at a glance next
   to the neutral "Review due" / "Missing required" subtype pill.
   =================================================================== */
.queue-overdue-pill {
    color: #b91c1c !important;
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
    font-weight: 600;
}

/* ===================================================================
   [2026-07-14 MKO Batch Review] Selection on the Work Queues card and
   the full-screen document review modal. The document pane embeds the
   report PDF in an <object> — a PDF cannot render into a <div>, so the
   element is a browser requirement, not a styling choice — and the two
   panes scroll independently rather than the modal body scrolling as a
   whole.
   =================================================================== */
.queue-select {
    margin-top: .35rem;
    flex: 0 0 auto;
}

#batchReviewModal .modal-body {
    overflow: hidden;
}

.br-body {
    display: grid;
    grid-template-columns: 1fr 22rem;
    height: 100%;
    min-height: 0;
}

.br-doc-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
    background-color: #f1f5f9;
}

.br-pdf {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    background-color: #fff;
}

.br-preview-msg {
    margin: auto;
    max-width: 32rem;
    text-align: center;
}

.br-side-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
    background-color: #fff;
}

/* The thread takes the slack so the comment box stays anchored at the bottom
   of the pane no matter how long the conversation gets. */
#batchReviewCommentThread {
    flex: 1 1 auto;
    min-height: 6rem;
    overflow-y: auto;
}

.br-progress {
    max-width: 32rem;
    height: .375rem;
    border-radius: 999px;
    background-color: #e2e8f0;
    overflow: hidden;
}

.br-progress span {
    display: block;
    width: 0;
    height: 100%;
    background-color: var(--bs-primary, #0d6efd);
    transition: width .2s ease;
}

.br-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .5rem;
}

.br-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background-color: #fff;
    color: #64748b;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

.br-step.done {
    color: #047857;
    background-color: #ecfdf5;
    border-color: #bbf7d0;
}

.br-step.now {
    color: #fff;
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}

/* Stacked on narrow screens: the PDF keeps a usable height and the comment
   pane sits beneath it rather than being squeezed into a sliver. */
@media (max-width: 991.98px) {
    .br-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(60vh, 1fr) auto;
    }

    .br-side-pane {
        border-left: 0;
        border-top: 1px solid var(--bs-border-color, #dee2e6);
    }
}

/* ===================================================================
   [2026-07-14 MKO Batch Review] The attestation dialog and its result.
   It stacks above the fullscreen review modal on the existing
   .sign-slot-modal pattern, so nothing here touches z-index.

   The document list is the ceremony: a batch signature is defensible
   because the reviewer confirmed an enumerated set, so the list is
   scrollable rather than truncated — fifty documents must all be
   readable before the button is pressed.
   =================================================================== */
.br-sign-list {
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
}

.br-sign-item {
    padding: .375rem .625rem;
    font-size: .8125rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.br-sign-item:last-child {
    border-bottom: 0;
}

/* A partial batch is a normal outcome, so the skipped rows are marked, not alarming. */
.br-sign-ok {
    border-left: .1875rem solid #10b981;
}

.br-sign-skip {
    border-left: .1875rem solid #f59e0b;
    background-color: #fffbeb;
}

.br-sign-canvas {
    height: 9rem;
    cursor: crosshair;
    touch-action: none;
    background-color: #fff;
}

/* ===================================================================
   [2026-07-14 MKO Batch Review — Decisions] Approve / Send Back in the
   review modal, and the comment indicator on the queue rows. The
   send-back fields sit with the comment box because a send back needs
   both a reason code and the comment explaining it, and the two are
   written together or not at all.
   =================================================================== */
.br-sendback {
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

#batchReviewStatus {
    font-weight: 600;
}

.queue-comment-count {
    display: inline-flex;
    align-items: center;
}

/* ===================================================================
   [2026-07-21 MKO CRM Notifications & Work Queue] The Tasks pill now
   carries CRM follow-ups alongside Task records, so a row needs to say
   which system it came from and how close it is to its due date. The
   "Due today" pill is the amber step below the existing red Overdue
   pill; both carry text, so neither signals by colour alone.
   =================================================================== */
.queue-crm-badge {
    color: #4338ca;
    background: #eef2ff;
    border-color: #c7d2fe;
}

.queue-duetoday-pill {
    color: #b45309 !important;
    background-color: #fff7ed !important;
    border-color: #fed7aa !important;
    font-weight: 600;
}

/* ===================================================================
   [2026-07-22 MKO CRM row click] Inquiry, Follow-up, and Waitlist rows
   open the record from anywhere in the row, matching the Dashboard
   caseload table. The pointer cursor is the only affordance that says
   so, since the row itself is not a link element.
   =================================================================== */
tr.crm-row-link {
    cursor: pointer;
}

/* ===================================================================
   [2026-07-23 MKO Reporting Center] Reports landing page — kicker,
   report cards, and their icon badge. All colors resolve from the
   theme variables so light/dark follow the rest of the system; the
   teal tint on the icon badge gets an explicit dark-mode nudge to
   stay legible on the dark surface.
   =================================================================== */
.reports-kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--elevita-accent-teal);
}

.report-card {
    transition: border-color .15s ease;
}

.report-card:hover {
    border-color: var(--elevita-accent-teal);
}

.report-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    font-size: 1.1rem;
    color: var(--elevita-accent-teal);
    background: rgba(47, 164, 160, 0.12);
}

html[data-bs-theme="dark"] .report-card-icon {
    color: var(--elevita-accent-teal);
    background: rgba(47, 164, 160, 0.20);
}

/* ===================================================================
   [2026-07-27 MKO Audit Log client filter] Client typeahead on the
   Audit Log report card. The results list is absolutely positioned
   under the input so it overlays the date fields instead of pushing
   the card taller as the user types; the card itself is the
   positioning context (.report-card-typeahead).
   =================================================================== */
.report-card-typeahead {
    position: relative;
}

.report-card-typeahead .report-card-typeahead-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
    max-height: 14rem;
    overflow-y: auto;
    margin-top: .125rem;
}

.report-card-typeahead .report-card-typeahead-results .list-group-item {
    font-size: .8rem;
    cursor: pointer;
}

/* ===================================================================
   [2026-07-28 MKO Client Financials] Coverage & funding intake on the
   Client Chart "Client Financials" tab.

   The left rail holds a variable number of coverage cards while the
   detail pane holds a tall form, so the rail is capped and scrolls
   independently instead of stretching the chart tab to the height of
   whichever side is longer.
   =================================================================== */
.client-financials .cf-coverage-list {
    max-height: 22rem;
    overflow-y: auto;
}

.client-financials .cf-coverage-card {
    cursor: pointer;
}

.client-financials .cf-coverage-card.active {
    border-left: 3px solid var(--elevita-accent-teal);
}

/* Tiles sit on one row from lg up and wrap two-up below it. A fixed
   value height keeps the row from jittering as real numbers replace
   the placeholder dashes in later phases. */
.client-financials .cf-tile-value {
    font-size: 1.05rem;
    font-weight: 600;
    min-height: 1.6rem;
}

.client-financials .text-kicker {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
}

/* Validation text sits directly under its own control, so it needs no
   top margin and must not reserve space when empty. */
.client-financials .field-error:empty {
    display: none;
}

.client-financials .field-error {
    margin-top: .15rem;
}

.client-financials .min-w-0 {
    min-width: 0;
}

/* ===================================================================
   [2026-07-29 MKO Client Financials] Client Billing & Responsibility,
   documents, consents and financial notes.

   The Documents & Notes pane stacks three sections in one scroll, so
   the section rules here are about keeping them readable together
   rather than styling each one separately.
   =================================================================== */

/* The billing panel sits under the coverage form inside the same pane.
   A top border reads as "different subject" without a second card
   nested inside the one the form already lives in. */
.client-financials .cf-profile {
    background-color: var(--bs-tertiary-bg);
}

/* Note text is user-entered prose: honour the line breaks it was typed
   with, and wrap long unbroken strings instead of widening the pane. */
.client-financials .cf-note-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A long note list should scroll on its own rather than pushing the
   consent and document sections off the top of the tab. */
.client-financials .cf-note-list {
    max-height: 28rem;
    overflow-y: auto;
}

/* Card slots sit side by side and hold either a file line or an upload
   prompt; equal minimum height stops the row from stepping. */
.client-financials .cf-card-slot {
    min-height: 7rem;
}

/* A revoked consent stays in the list as history, so it is muted rather
   than removed — the record is still the audit trail. */
.client-financials .cf-consent-revoked {
    opacity: .7;
}

/* ===================================================================
   [2026-07-29 MKO Client Financials] Eligibility & Benefits.

   The pane stacks a conflict banner, an entry form, the latest
   response, two collapsibles, a log and a warnings block in one
   scroll, so these rules are about keeping that sequence readable
   rather than styling each section separately.
   =================================================================== */

/* Payer-reported prose (summary, limitations): honour the line breaks
   it was recorded with, and wrap long unbroken strings instead of
   widening the pane. */
.client-financials .cf-elg-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The log can run long; it scrolls on its own rather than pushing the
   warnings block off the bottom of the tab. */
.client-financials .cf-elg-log {
    max-height: 30rem;
    overflow-y: auto;
}

/* The reported column is the one being proposed, so the two values read
   as a comparison rather than a list. */
.client-financials .cf-elg-conflict-table td:last-child {
    white-space: nowrap;
}

/* Collapse toggles use a chevron that turns as the section opens. */
.client-financials [data-bs-toggle="collapse"] .bi-chevron-right {
    transition: transform .15s ease-in-out;
}

.client-financials [data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-right {
    transform: rotate(90deg);
}

/* The printed report is cloned out of the page, so it carries its own
   readable defaults rather than inheriting the pane's compact ones. */
.cf-elg-report {
    font-size: .9rem;
}

/* The tile source line explains where the numbers came from; it sits
   quietly under the row rather than competing with the values. */
.client-financials .cf-tiles-source {
    font-size: .75rem;
}

/* ===================================================================
   [2026-07-29 MKO Client Financials] Authorizations.

   Records stack read-only in one pane, and the service-code picker
   inside an open form can list every billable code in the tenant. Both
   scroll within themselves so a long list never pushes the rest of the
   sub-tab off the bottom.
   =================================================================== */

.client-financials .cf-auth-list {
    max-height: 42rem;
    overflow-y: auto;
}

/* The picker is a fixed-height scrolling list, as prototyped: its
   height must not change as the search filters it, or the buttons
   underneath would move while the user is aiming at them. */
.client-financials .cf-auth-service-list {
    height: 14rem;
    overflow-y: auto;
}

/* Chips wrap; a long service name breaks rather than widening the pane,
   and the remove control stays a comfortable target next to it. */
.client-financials .cf-auth-chip {
    max-width: 100%;
    white-space: normal;
    text-align: left;
}

.client-financials .cf-auth-chip .btn-close {
    font-size: .55rem;
}

/* A record's own comment list scrolls rather than burying the record
   that follows it. */
.client-financials .cf-auth-comments {
    max-height: 20rem;
    overflow-y: auto;
}

/* ===================================================================
   [2026-07-30 MKO Client Financials] Financial Record Status.

   The status tile is the only tile that is a control, so it needs the
   button chrome taken off it and the affordance put back as a hover.
   The drawer it opens can carry thirty-odd rule lines, so its two
   lists scroll within themselves rather than the drawer body.
   =================================================================== */

.client-financials .cf-status-tile {
    background: var(--elevita-surface-bg);
    cursor: pointer;
}

.client-financials .cf-status-tile:hover {
    border-color: var(--elevita-accent-teal);
}

/* The rail sits beside the coverage cards; a long list scrolls there
   rather than pushing the sub-tabs out of line with it. */
.client-financials .cf-issue-panel {
    max-height: 16rem;
    overflow-y: auto;
}

.client-financials .cf-status-drawer {
    width: min(30rem, 100%);
}

/* [2026-07-30 MKO] The two lists deliberately have no max-height of their
   own. The offcanvas body already scrolls, so capping them nested a second
   scroll region inside the first: the item list clipped a sentence in half
   while empty space sat below it, and reaching the rest meant finding the
   inner scrollbar. Showing this list is the whole purpose of the drawer, so
   it gets the full height and the drawer scrolls as one. */

/* Reasons name a payer and a plan, so long unbroken strings wrap
   instead of widening the drawer. */
.client-financials .cf-status-reason {
    overflow-wrap: anywhere;
}

/* The issue code is an identifier staff quote when they ask about a
   rule, so it reads as one rather than as prose. */
.client-financials .cf-status-code {
    font-family: var(--bs-font-monospace);
    font-size: .7rem;
}

/* "Go to field" lands on a control that may look no different from the
   ones around it; a brief ring says which one was meant. */
.client-financials .cf-field-highlight {
    outline: 2px solid var(--elevita-accent-teal);
    outline-offset: 2px;
    border-radius: .25rem;
}