/**
 * EMR Correctional Healthcare — Compiled Overrides
 * =================================================
 * Compiled from: ui/emr-scss/emr-overrides.scss
 *   imports: _emr-variables.scss, _emr-correctional.scss
 *
 * Default branding colors (overridden at runtime via Layout::renderBrandingCss):
 *   Primary:   #1F5FAF
 *   Secondary: #5BAE2E
 */

/* -------------------------------------------------------------------------
   Default branding (compile-time) — overridden per-tenant at runtime
   ------------------------------------------------------------------------- */
:root {
    --vz-primary: #1F5FAF;
    --vz-primary-rgb: 31, 95, 175;
    --vz-secondary: #5BAE2E;
    --vz-secondary-rgb: 91, 174, 46;
    --emr-avatar-radius: 8px;
    /* Foreground variant of primary that reads on the current bg.
       Same as --vz-primary in light mode; lightened in dark mode below.
       Use this anywhere primary-color text or borders need to stay readable
       across themes (active tab, accent borders, soft buttons, pencil
       affordances). */
    --emr-primary-fg: var(--vz-primary);
}
[data-bs-theme="dark"] {
    --emr-primary-fg: #74A8E0;
}

/* Prevent horizontal scrollbar from sub-pixel overflow */
body {
    overflow-x: hidden;
}

/* -------------------------------------------------------------------------
   Avatar / profile photo — unified border-radius via CSS variable
   ------------------------------------------------------------------------- */
.emr-avatar {
    border-radius: var(--emr-avatar-radius) !important;
    object-fit: cover;
}

/* Override rounded-circle on avatar elements to use our variable */
.header-profile-user {
    border-radius: var(--emr-avatar-radius) !important;
}

/* -------------------------------------------------------------------------
   Font override — Poppins instead of IBM Plex Sans
   ------------------------------------------------------------------------- */
body,
.navbar-menu .navbar-nav .nav-link,
.navbar-menu .navbar-nav .nav-sm .nav-link,
.form-control, .form-select, .btn,
.dropdown-menu, .modal-content,
.card, .table {
    font-family: "Poppins", sans-serif;
}

/* -------------------------------------------------------------------------
   Flatpickr — subtle theme, compact header, inherit app font
   ------------------------------------------------------------------------- */
.flatpickr-calendar {
    font-family: "Poppins", sans-serif;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: .375rem;
}
/* Month/year header: tighten padding, muted colors */
.flatpickr-months {
    padding: 4px 0;
}
.flatpickr-months .flatpickr-month {
    height: 32px;
}
.flatpickr-current-month {
    font-size: .8125rem;
    padding-top: 4px;
    color: var(--vz-body-color, #495057);
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vz-body-color, #495057);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 4px 8px;
    top: 2px;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: var(--vz-body-color, #495057);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--vz-primary, #1F5FAF);
}
/* Weekday header */
span.flatpickr-weekday {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--vz-secondary-color, #878a99);
}
/* Day cells */
.flatpickr-day {
    font-size: .8125rem;
    line-height: 36px;
    height: 36px;
    max-width: 36px;
    border-radius: .25rem;
    color: var(--vz-body-color, #495057);
}
.flatpickr-day:hover {
    background: var(--vz-light, #f3f6f9);
    border-color: var(--vz-light, #f3f6f9);
}
.flatpickr-day.today {
    border-color: var(--vz-secondary-color, #878a99);
}
.flatpickr-day.today:hover {
    background: var(--vz-light, #f3f6f9);
    border-color: var(--vz-secondary-color, #878a99);
    color: var(--vz-body-color, #495057);
}
/* Selected day — use subtle primary tint instead of bright blue */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--vz-primary, #1F5FAF);
    border-color: var(--vz-primary, #1F5FAF);
    color: #fff;
    opacity: .8;
}
.flatpickr-day.inRange {
    background: rgba(var(--vz-primary-rgb, 31,95,175), .1);
    border-color: rgba(var(--vz-primary-rgb, 31,95,175), .1);
    box-shadow: -5px 0 0 rgba(var(--vz-primary-rgb, 31,95,175), .1),
                 5px 0 0 rgba(var(--vz-primary-rgb, 31,95,175), .1);
    color: var(--vz-body-color, #495057);
}
/* Alt input (display input) styling */
.flatpickr-alt-input,
input.flatpickr-input[readonly] {
    background-color: var(--vz-input-bg, #fff) !important;
}
/* Flatpickr dark mode */
[data-bs-theme="dark"] .flatpickr-calendar {
    background: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .flatpickr-current-month,
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: var(--vz-card-bg, #2a2f34);
}
[data-bs-theme="dark"] span.flatpickr-weekday {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .flatpickr-day {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .flatpickr-day.prevMonthDay,
[data-bs-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .flatpickr-day:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .05);
}
[data-bs-theme="dark"] .flatpickr-day.today {
    border-color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] input.flatpickr-input[readonly],
[data-bs-theme="dark"] .flatpickr-alt-input {
    background-color: var(--vz-input-bg, #2b3039) !important;
    color: var(--vz-input-color, #ced4da);
    border-color: var(--vz-input-border, #3c4147);
}

/* -------------------------------------------------------------------------
   Sidebar override
   ------------------------------------------------------------------------- */
[data-sidebar="dark"] .navbar-menu {
    background-color: #171818;
}
[data-sidebar="dark"] .navbar-brand-box {
    background-color: #171818;
}

/* -------------------------------------------------------------------------
   Patient status badges (Velzon badge-soft equivalents via CSS vars)
   ------------------------------------------------------------------------- */
.badge-status-booked {
    color: var(--vz-primary);
    background-color: rgba(var(--vz-primary-rgb), 0.1);
}
.badge-status-active {
    color: var(--vz-success);
    background-color: rgba(var(--vz-success-rgb), 0.1);
}
.badge-status-released {
    color: var(--vz-secondary);
    background-color: rgba(var(--vz-secondary-rgb), 0.1);
}
.badge-status-transferred {
    color: var(--vz-warning);
    background-color: rgba(var(--vz-warning-rgb), 0.1);
}
.badge-status-deceased {
    color: var(--vz-dark);
    background-color: rgba(var(--vz-dark-rgb), 0.1);
}

/* -------------------------------------------------------------------------
   MRN display — monospaced for readability
   ------------------------------------------------------------------------- */
.mrn-display {
    font-family: monospace;
    font-size: 0.9em;
    letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------
   Medication pass — status colors
   ------------------------------------------------------------------------- */
.med-pass-status-given   { color: var(--vz-success); }
.med-pass-status-refused { color: var(--vz-danger); }
.med-pass-status-held    { color: var(--vz-warning); }
.med-pass-status-not-due { color: var(--vz-secondary); }

/* -------------------------------------------------------------------------
   Clinical data density — tighter table rows for MAR/med pass views
   ------------------------------------------------------------------------- */
.table-clinical {
    font-size: 0.8125rem;
}
.table-clinical td,
.table-clinical th {
    padding: 0.4rem 0.6rem;
}

/* -------------------------------------------------------------------------
   Invoice scan — low confidence field highlighting
   ------------------------------------------------------------------------- */
.scan-low-confidence {
    border-color: var(--vz-warning) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--vz-warning-rgb), 0.25) !important;
    background-color: rgba(var(--vz-warning-rgb), 0.06) !important;
}
.scan-low-confidence:focus {
    border-color: var(--vz-warning) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--vz-warning-rgb), 0.35) !important;
}

/* -------------------------------------------------------------------------
   Controlled substance indicator
   ------------------------------------------------------------------------- */
.controlled-substance-badge::before {
    content: "C-II";
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--vz-danger);
    border: 1px solid var(--vz-danger);
    border-radius: 3px;
    padding: 0 3px;
    margin-right: 4px;
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Permission level pills (used in role/permission views)
   ------------------------------------------------------------------------- */
.perm-none {
    color: var(--vz-secondary);
    background-color: rgba(var(--vz-secondary-rgb), 0.1);
}
.perm-read {
    color: var(--vz-info);
    background-color: rgba(var(--vz-info-rgb), 0.1);
}
.perm-write {
    color: var(--vz-primary);
    background-color: rgba(var(--vz-primary-rgb), 0.1);
}
.perm-delete {
    color: var(--vz-danger);
    background-color: rgba(var(--vz-danger-rgb), 0.1);
}

/* =========================================================================
   EMR Density Overrides — Compact layout for data-heavy correctional EHR
   ========================================================================= */

.navbar-header {height:49px;}
.header-item {height:49px;}
.card-header-tabs {margin-bottom:0;}
.footer {border-top:1px solid var(--vz-header-border);}

/* ── Card density ──────────────────────────────────────────────────────── */
.card {
    --vz-card-spacer-y: 0.625rem;
    --vz-card-spacer-x: 0.75rem;
    margin-bottom: 0.75rem;
}
.card-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}
.card-footer {
    padding: 0.375rem 0.75rem;
}

/* ── Page shell ────────────────────────────────────────────────────────── */
.page-content {padding:calc(60px + 0.75rem) 0.5rem 70px 0.5rem !important;}
.page-title-box {
    padding-bottom: 0.5rem !important;
    /*margin-bottom: 0 !important;*/
}

/* ── Tables (global tighter) ───────────────────────────────────────────── */
.table > :not(caption) > * > * {
    padding: 0.25rem 0.45rem;
}
.table {
    font-size: 0.75rem;
    line-height: 1.35;
}
.table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Buttons / badges / forms ──────────────────────────────────────────── */
.btn-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}
.badge {
    font-size: 0.7rem;
    padding: 0.2em 0.45em;
}
.form-control-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    min-height: 28px;
}
.form-select-sm {
    padding: 0.2rem 2rem 0.2rem 0.5rem;
    font-size: 0.75rem;
    min-height: 28px;
    background-size: 14px 10px;
}
.form-select {
    padding-right: 2.7rem;
}
.alert {
    padding: 0.375rem 0.625rem;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

/* =========================================================================
   EMR Utility Classes — Compact dashboard, MAR, and patient components
   ========================================================================= */

/* ── emr-kpi-strip — equal-height horizontal KPI cards ─────────────────── */
.emr-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}
.emr-kpi-card.card {
    margin-bottom: 0;
}
.emr-kpi-card .card-body {
    padding: 0.5rem 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}
.emr-kpi-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.emr-kpi-icon-primary  { background: rgba(64,81,137,.1);  color: var(--vz-primary); }
.emr-kpi-icon-success  { background: rgba(25,135,84,.1);  color: var(--vz-success); }
.emr-kpi-icon-danger   { background: rgba(220,53,69,.1);  color: var(--vz-danger); }
.emr-kpi-icon-warning  { background: rgba(255,193,7,.1);  color: var(--vz-warning); }
.emr-kpi-icon-info     { background: rgba(53,119,241,.1); color: var(--vz-info); }
.emr-kpi-icon-secondary{ background: rgba(108,117,125,.1);color: var(--vz-secondary); }

.emr-kpi-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--vz-heading-color, var(--vz-body-color));
}
.emr-kpi-frac {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--vz-secondary-color);
}
.emr-kpi-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vz-secondary-color);
    line-height: 1.2;
}
.emr-kpi-detail {
    font-size: 0.675rem;
    margin-top: auto;
    padding-top: 0.375rem;
    border-top: 1px solid var(--vz-border-color, #e9ebec);
    line-height: 1.3;
}
/* Consistent detail inner structure: text on top, visual below */
.emr-kpi-detail-text {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 14px;
}
.emr-kpi-detail-viz {
    margin-top: 0.25rem;
}
.emr-kpi-detail-viz .progress,
.emr-kpi-detail-viz .emr-sparkline {
    display: block;
}
/* Sparkline */
.emr-sparkline {
    width: 100%;
    height: 16px;
}
/* Segment bar (stacked horizontal bar) */
.emr-segment-bar {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
}
.emr-segment-bar > .emr-segment {
    height: 4px;
    min-width: 3px;
    flex-shrink: 0;
}
/* Pulsing status dot */
.emr-pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.emr-pulse-dot-danger {
    background: var(--vz-danger);
    animation: emrPulse 1.5s ease-in-out infinite;
}
.emr-pulse-dot-warning {
    background: var(--vz-warning);
    animation: emrPulse 1.5s ease-in-out infinite;
}
@keyframes emrPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,53,69,.4); }
    50%      { opacity: .7; box-shadow: 0 0 0 3px rgba(220,53,69,0); }
}
@media (max-width: 575.98px) {
    .emr-kpi-strip { grid-template-columns: 1fr 1fr; }
}

/* ── emr-quick-actions — horizontal icon action bar ────────────────────── */
.emr-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.625rem;
}
.emr-qa-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 0.25rem;
    text-decoration: none;
    color: var(--vz-body-color);
    background: var(--vz-card-bg, #fff);
    transition: background-color 0.1s, border-color 0.1s;
    white-space: nowrap;
}
.emr-qa-item i { font-size: 0.8rem; color: var(--vz-primary); }
.emr-qa-item:hover {
    background: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.06);
    border-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.25);
    color: var(--vz-primary);
}

/* ── emr-stat-row — key-value rows in stat cards ──────────────────────── */
.emr-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
}
.emr-stat-row:last-child { border-bottom: none; }

/* ── emr-alert-row — alert items in alerts widget ─────────────────────── */
.emr-alert-row {
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
    font-size: 0.75rem;
}
.emr-alert-row:last-child { border-bottom: none; }

/* ── emr-pass-active / emr-pass-next — med pass time highlighting ──── */
.emr-pass-active {
    background: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.06) !important;
    border-left: 3px solid var(--vz-primary) !important;
}
.emr-pass-active td:first-child { padding-left: calc(0.5rem - 3px); }
.emr-pass-next {
    background: rgba(var(--vz-info-rgb, 53, 119, 241), 0.04) !important;
}

/* ── emr-empty-state — full-card empty state ───────────────────────────── */
.emr-empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--vz-secondary-color);
}
.emr-empty-state i {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}
.emr-empty-state div {
    font-size: 0.75rem;
}

/* ── emr-empty-state-inline — inline empty state ───────────────────────── */
.emr-empty-state-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    color: var(--vz-secondary-color);
    font-size: 0.75rem;
}
.emr-empty-state-inline i {
    font-size: 1.125rem;
    opacity: 0.6;
}

/* ── emr-stat-mini (legacy, kept for global/vendor dashboards) ─────────── */
.emr-stat-mini {
    text-align: center;
    padding: 0.5rem 0.375rem;
}
.emr-stat-mini .stat-icon {
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}
.emr-stat-mini .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}
.emr-stat-mini .stat-label {
    font-size: 0.675rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vz-secondary-color);
    margin-top: 0.125rem;
}

/* ── emr-page-header — compact page heading ────────────────────────────── */
.emr-page-header {
    margin-bottom: 0.75rem;
}
.emr-page-header h1,
.emr-page-header .h1 {
    font-size: 1.1rem;
    margin-bottom: 0;
}
.emr-page-header .subtitle {
    font-size: 0.75rem;
    color: var(--vz-secondary-color);
}

/* ── emr-dash-grid — 3-column dashboard grid ───────────────────────────── */
.emr-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 991.98px) {
    .emr-dash-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .emr-dash-grid { grid-template-columns: 1fr; }
}

/* ── Vitals grid — compact cell layout (EHR dashboard style) ───────────── */
.vitals-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.375rem;
}
.vitals-cell {
    text-align: center;
    padding: 0.375rem 0.25rem;
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 0.25rem;
    background: var(--vz-card-bg, #fff);
}
.vitals-cell-label {
    font-size: 0.625rem;
    color: var(--vz-secondary-color, #878a99);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}
.vitals-cell-value {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}
.vitals-cell-unit {
    font-size: 0.5625rem;
    color: var(--vz-secondary-color, #878a99);
    line-height: 1.2;
}
.vitals-cell-abnormal {
    background: rgba(var(--vz-warning-rgb, 247, 184, 75), 0.08);
    border-color: rgba(var(--vz-warning-rgb, 247, 184, 75), 0.3);
}
.vitals-cell-critical {
    background: rgba(var(--vz-danger-rgb, 239, 71, 111), 0.08);
    border-color: rgba(var(--vz-danger-rgb, 239, 71, 111), 0.3);
}
@media (max-width: 1199.98px) {
    .vitals-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575.98px) {
    .vitals-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Medication list rows — overview widget ────────────────────────────── */
.med-list-row {
    padding: 0.3125rem 0;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
}
.med-list-row:last-child { border-bottom: none; }
.med-list-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--vz-body-color);
}
.med-list-detail {
    font-size: 0.6875rem;
    color: var(--vz-secondary-color, #878a99);
    line-height: 1.3;
}

/* ── MAR split-pane — patient list + medications ───────────────────────── */
.mar-split-pane {
    display: flex;
    min-height: calc(100vh - 200px);
    gap: 0.75rem;
}
.mar-patient-list {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
}
.mar-patient-item {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.1s;
}
.mar-patient-item:hover {
    background-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.04);
}
.mar-patient-item.active {
    background-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.08);
    border-left: 3px solid var(--vz-primary, #405189);
}
.mar-patient-item .patient-thumb {
    width: 36px;
    height: 36px;
    border-radius: var(--emr-avatar-radius);
    object-fit: cover;
    flex-shrink: 0;
}
.mar-patient-item .patient-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}
.mar-patient-item .patient-meta {
    font-size: 0.7rem;
    color: var(--vz-secondary-color);
}
.mar-patient-item .med-count {
    margin-left: auto;
    flex-shrink: 0;
}
.mar-medications-panel {
    flex: 1;
    overflow-y: auto;
}

/* ── emr-med-card — medication card (not table row) ────────────────────── */
.emr-med-card {
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}
.emr-med-card .med-name {
    font-size: 0.8125rem;
    font-weight: 600;
}
.emr-med-card .med-details {
    font-size: 0.725rem;
    color: var(--vz-secondary-color);
}

/* ── emr-patient-header — integrated patient identity card ─────────────── */
.emr-patient-header .card-body {
    padding: 0.875rem 1rem;
}
.emr-patient-header .patient-photo {
    width: 88px;
    height: 88px;
    border-radius: var(--emr-avatar-radius);
    object-fit: cover;
    flex-shrink: 0;
}
.emr-patient-header-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.emr-patient-header-namerow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.emr-patient-header-name {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--vz-heading-color);
}
.emr-patient-header-state {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.emr-patient-header-state .badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
}
.emr-chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}
.emr-patient-header-actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 9.5rem;
}
.emr-patient-header-actions .btn {
    justify-content: flex-start;
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    .emr-patient-header-actions {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
    }
}

/* ── Clickable header chip rows (demographics, housing) ───────────────── */
.emr-demo-link,
.emr-housing-link {
    cursor: pointer;
    color: inherit;
}
.emr-housing-link:hover .emr-field-tag {
    background: rgba(var(--vz-primary-rgb), 0.08);
    border-color: rgba(var(--vz-primary-rgb), 0.18);
}
[data-bs-theme="dark"] .emr-housing-link:hover .emr-field-tag {
    background: rgba(var(--vz-primary-rgb), 0.18);
    border-color: rgba(var(--vz-primary-rgb), 0.28);
}
.emr-demo-edit-icon {
    color: var(--vz-secondary-color);
    font-size: 0.75rem;
    margin-left: 0.25rem;
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.emr-demo-link:hover .emr-demo-edit-icon,
.emr-demo-edit-icon:hover {
    opacity: 1;
    color: var(--vz-primary);
}
[data-bs-theme="dark"] .emr-demo-edit-icon {
    color: var(--vz-body-color);
}
[data-bs-theme="dark"] .emr-demo-link:hover .emr-demo-edit-icon,
[data-bs-theme="dark"] .emr-demo-edit-icon:hover {
    color: var(--emr-primary-fg);
}

/* ── emr-field-tag — labeled icon+value chip for data records ─────────────
   Pattern: each demographic / metadata field is a self-contained chip with
   a leading icon (acting as field label) and the value as text. Codes
   (IDs, booking numbers, etc.) take .is-code for monospace.
   Used in: patient-header demographics. Reusable for any "data record"
   header block in the future (vendor / facility / staff cards). */
.emr-field-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--vz-body-color);
    background: var(--vz-light);
    border: 1px solid transparent;
    border-radius: 0.25rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.emr-field-tag > i {
    color: var(--vz-secondary-color);
    font-size: 0.875rem;
    line-height: 1;
}
.emr-field-tag.is-code {
    font-family: var(--vz-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.01em;
}
.emr-demo-link:hover .emr-field-tag {
    background: rgba(var(--vz-primary-rgb), 0.08);
    border-color: rgba(var(--vz-primary-rgb), 0.18);
}

[data-bs-theme="dark"] .emr-field-tag {
    background: rgba(255, 255, 255, 0.08);
    color: var(--vz-body-color);
}
[data-bs-theme="dark"] .emr-demo-link:hover .emr-field-tag {
    background: rgba(var(--vz-primary-rgb), 0.18);
    border-color: rgba(var(--vz-primary-rgb), 0.28);
}

/* ── emr-tabs-pro — professional clinical tab strip ──────────────────────
   Pattern: tabs as label+icon with active state indicated by a thick
   primary bottom border and slightly heavier weight, not by box outlines.
   Inactive tabs are muted; hover lifts color toward primary. Tabs may
   carry an inline count badge (.emr-tab-count).
   Used in: patient chart top tabs. Apply to any nav-tabs that represent
   section navigation inside a working chart or record. */
.emr-tabs-pro {
    border-bottom: 1px solid var(--vz-border-color);
    margin-bottom: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}
.emr-tabs-pro::-webkit-scrollbar {
    height: 4px;
}
.emr-tabs-pro::-webkit-scrollbar-thumb {
    background: var(--vz-border-color);
    border-radius: 999px;
}
.emr-tabs-pro .nav-item {
    margin-bottom: -1px;
    flex-shrink: 0;
}
.emr-tabs-pro .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: var(--vz-secondary-color);
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.emr-tabs-pro .nav-link:hover {
    color: var(--vz-primary);
    border-color: transparent;
    background: transparent;
}
.emr-tabs-pro .nav-link.active,
[data-bs-theme="dark"] .emr-tabs-pro .nav-link.active {
    color: var(--emr-primary-fg) !important;
    background: transparent !important;
    border-color: transparent !important;
    border-bottom-color: var(--emr-primary-fg) !important;
    font-weight: 600;
}
.emr-tabs-pro .nav-link > i {
    font-size: 1rem;
    line-height: 1;
}
.emr-tab-count {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.0625rem 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--vz-secondary-color);
    background: var(--vz-light);
    border-radius: 999px;
    line-height: 1.4;
}
.emr-tabs-pro .nav-link.active .emr-tab-count {
    color: var(--vz-primary);
    background: rgba(var(--vz-primary-rgb), 0.12);
}

[data-bs-theme="dark"] .emr-tabs-pro .nav-link:hover {
    color: var(--emr-primary-fg);
}
[data-bs-theme="dark"] .emr-tab-count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--vz-body-color);
}
[data-bs-theme="dark"] .emr-tabs-pro .nav-link.active .emr-tab-count {
    background: rgba(116, 168, 224, 0.18);
    color: var(--emr-primary-fg);
}

/* ── btn-soft-primary in dark mode ────────────────────────────────────────
   Bootstrap/Velzon's btn-soft-* variants use a tinted background with
   primary-colored text. Against dark cards the tint is barely visible.
   Lift it using --emr-primary-fg. Same logic for btn-outline-primary. */
[data-bs-theme="dark"] .btn-soft-primary {
    background: rgba(var(--vz-primary-rgb), 0.18);
    color: var(--emr-primary-fg);
    border-color: transparent;
}
[data-bs-theme="dark"] .btn-soft-primary:hover,
[data-bs-theme="dark"] .btn-soft-primary:focus {
    background: rgba(var(--vz-primary-rgb), 0.28);
    color: var(--emr-primary-fg);
    border-color: transparent;
}
[data-bs-theme="dark"] .btn-outline-primary {
    color: var(--emr-primary-fg);
    border-color: var(--emr-primary-fg);
}
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus {
    background: var(--emr-primary-fg);
    color: var(--vz-card-bg);
    border-color: var(--emr-primary-fg);
}

/* ── emr-allergy-banner ────────────────────────────────────────────────── */
.emr-allergy-banner {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

/* ── emr-stats-bar — inline stat strip ─────────────────────────────────── */
.emr-stats-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
    padding: 0.375rem 0;
    margin-bottom: 0.75rem;
}

/* ── emr-section-title — small section heading ─────────────────────────── */
.emr-section-title {
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    color: var(--vz-secondary-color);
}

/* ── emr-quick-links (legacy, kept for backward compat) ────────────────── */
.emr-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}
.emr-quick-links a {
    display: block;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 0.375rem;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.1s;
}
.emr-quick-links a:hover {
    background-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.06);
}

/* ── Progress thin variant ─────────────────────────────────────────────── */
.progress-thin {
    height: 4px;
}

/* ── emr-pass-footer — sticky bottom bar ───────────────────────────────── */
.emr-pass-footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--vz-border-color, #e9ebec);
    background: var(--vz-card-bg, #fff);
    padding: 0.375rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Online/Offline Connectivity Indicator ─────────────────────────────── */
.emr-connectivity {
    display: flex;
    align-items: center;
    cursor: default;
    position: relative;
}
.emr-connectivity .connectivity-text {
    display: none;
}
.emr-connectivity.online {
    color: #5BAE2E;
}
.emr-connectivity.offline {
    color: #ef4444;
    animation: offline-pulse 2s ease-in-out infinite;
}
.emr-connectivity .connectivity-icon {
    font-size: 1rem;
    line-height: 1;
}
.emr-connectivity .connectivity-badge {
    font-size: 0.55rem;
    padding: 0.05em 0.3em;
    min-width: 0.85rem;
    text-align: center;
    position: absolute;
    top: -4px;
    right: -6px;
}
@keyframes offline-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ── Sidebar: compact nav item spacing ────────────────────────────────── */
.navbar-menu .navbar-nav .nav-link {
    padding: 0.35rem 1.5rem;
    font-size: 0.8125rem;
}
.navbar-menu .navbar-nav .nav-sm .nav-link {
    padding: 0.2rem 1.5rem !important;
    font-size: 0.775rem;
}
.navbar-menu .navbar-nav .nav-sm .nav-link:before {
    display: none !important;
}
.menu-title span {
    padding: 0.5rem 1.5rem 0.15rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.navbar-menu .navbar-nav .nav-sm {
    margin-bottom:.5rem;
}

/* ── Sidebar: remove collapse animation for snappy dropdowns ──────────── */
.navbar-menu .menu-dropdown.collapsing {
    transition: none !important;
    height: auto !important;
}
.navbar-menu .menu-dropdown.collapse:not(.show) {
    display: none;
}

/* ── Name Alert badge ─────────────────────────────────────────────────── */
.emr-name-alert {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 0.25rem;
    padding: 0.1em 0.4em;
    cursor: help;
    vertical-align: middle;
    white-space: nowrap;
}
.emr-name-alert i {
    font-size: 0.75rem;
}
.emr-name-alert-header {
    font-size: 0.8125rem;
    margin-left: 0.5rem;
}
.emr-name-alert-tooltip {
    max-width: 320px;
}
.emr-name-alert-tooltip .alert-patient-link {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.emr-name-alert-tooltip .alert-patient-link:last-child {
    border-bottom: none;
}
.emr-name-alert-tooltip .alert-patient-link:hover {
    background-color: rgba(0,0,0,0.04);
}

/* ── MAR medication card — end date highlighting ─────────────────────── */
.mar-med-expired {
    background-color: rgba(var(--vz-danger-rgb, 239, 71, 111), 0.1);
    border-color: rgba(var(--vz-danger-rgb, 239, 71, 111), 0.35);
}
.mar-med-ending-soon {
    background-color: rgba(var(--vz-warning-rgb, 247, 184, 75), 0.12);
    border-color: rgba(var(--vz-warning-rgb, 247, 184, 75), 0.4);
}

/* ── Topbar facility switcher — collapsible vendor groups ─────────────── */
.dropdown-menu .emr-collapse-chevron {
    transition: transform 0.2s ease;
}
.dropdown-menu [aria-expanded="true"] .emr-collapse-chevron {
    transform: rotate(180deg);
}

/* ── Topbar search box ────────────────────────────────────────────────── */
.app-search .form-control {
    height: 32px;
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem 0.25rem 2rem;
    border-radius: 6px;
    background-color: rgba(var(--vz-secondary-rgb), 0.06);
    border: 1px solid var(--vz-border-color, #e9ebec);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.app-search .form-control:focus {
    background-color: var(--vz-card-bg, #fff);
    border-color: var(--vz-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--vz-primary-rgb), 0.15);
}
.app-search .search-widget-icon {
    position: absolute !important;
    left: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
    font-size: 1rem !important;
    color: var(--vz-secondary-color);
    pointer-events: none;
}
/* Mobile search expand */
.app-search-mobile {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1050;
    background: var(--vz-card-bg, #fff);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.5rem;
}
.app-search-mobile .form-control {
    height: 36px;
    font-size: 0.85rem;
}

/* ── MAR medication card — icons left of med name ────────────────────── */
.mar-med-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* =========================================================================
   Telehealth Mode — fixed side panel for video call overlay
   ========================================================================= */
.telehealth-zone {
    position: fixed;
    top: 0;
    height: 100vh;
    z-index: 1040;
    background: #1a2332;
    border: 2px dashed rgba(var(--vz-primary-rgb), 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.telehealth-zone-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #111a26;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.telehealth-zone-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #a8c4e0;
    white-space: nowrap;
}

.telehealth-zone-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.telehealth-zone-hint {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    pointer-events: none;
    user-select: none;
}

.telehealth-resize-handle {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 1;
}

.telehealth-resize-handle:hover,
.telehealth-resize-handle:active {
    background: rgba(255, 255, 255, 0.15);
}

.telehealth-zone-toolbar .btn-light {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
    color: #a8c4e0;
}

.telehealth-zone-toolbar .btn-light:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Dark theme — slightly lighter to contrast dark sidebar */
[data-bs-theme="dark"] .telehealth-zone {
    background: #1e2a3a;
    border-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .telehealth-zone-toolbar {
    background: #162030;
}

/* ────────────────────────────────────────────────────────────
   GridJS — Bootstrap/Velzon theme integration
   ──────────────────────────────────────────────────────────── */
.gridjs-wrapper {
    border: none;
    box-shadow: none;
}
.gridjs-table {
    width: 100% !important;
}
.gridjs-wrapper table.gridjs-table {
    border-collapse: collapse;
}
.gridjs-wrapper table.gridjs-table th.gridjs-th {
    background: var(--vz-table-bg, #f3f6f9);
    border-color: var(--vz-border-color, #e9ebec);
    color: var(--vz-table-color, #495057);
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.gridjs-wrapper table.gridjs-table td.gridjs-td {
    border-color: var(--vz-border-color, #e9ebec);
    color: var(--vz-body-color, #495057);
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    vertical-align: middle;
    line-height: 1.35;
}
.gridjs-wrapper table.gridjs-table tr:hover td {
    background: var(--vz-table-hover-bg, rgba(0,0,0,.03));
}
.gridjs-thead th.gridjs-th-sort .gridjs-th-content {
    display: inline;
}
/* Search input */
.gridjs-head .gridjs-search {
    float: none;
    width: auto;
    margin-bottom: 0;
}
.gridjs-head .gridjs-search-input,
select.gridjs-search-input {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--vz-input-border, #ced4da);
    border-radius: 0.25rem;
    color: var(--vz-body-color, #495057);
    background: var(--vz-input-bg, #fff);
    height: auto;
    line-height: 1.5;
}
.gridjs-head .gridjs-search-input {
    width: 100%;
    max-width: 300px;
}
.gridjs-head .gridjs-search-input:focus {
    border-color: var(--vz-primary, #1F5FAF);
    box-shadow: 0 0 0 0.15rem rgba(31, 95, 175, 0.15);
    outline: none;
}
/* Pagination */
.gridjs-footer {
    border-top: 1px solid var(--vz-border-color, #e9ebec);
    background: transparent;
    padding: 0.5rem 0;
    box-shadow: none;
}
.gridjs-pagination .gridjs-pages button {
    font-size: 0.8125rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--vz-border-color, #e9ebec);
    background: var(--vz-card-bg, #fff);
    color: var(--vz-body-color, #495057);
    border-radius: 0.25rem;
    margin: 0 0.1rem;
    cursor: pointer;
}
.gridjs-pagination .gridjs-pages button:hover {
    background: var(--vz-primary, #1F5FAF);
    color: #fff;
    border-color: var(--vz-primary, #1F5FAF);
}
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background: var(--vz-primary, #1F5FAF);
    color: #fff;
    border-color: var(--vz-primary, #1F5FAF);
    font-weight: 600;
}
.gridjs-pagination .gridjs-summary {
    font-size: 0.8125rem;
    color: var(--vz-secondary-color, #74788d);
}
/* Sort icons */
.gridjs-th-sort:not(.gridjs-th-fixed) {
    cursor: pointer;
}
/* Loading */
.gridjs-loading-bar {
    background: var(--vz-primary, #1F5FAF);
}
/* Empty message */
.gridjs-notfound {
    text-align: center;
    padding: 2rem;
    color: var(--vz-secondary-color, #74788d);
}
.gridjs-container {
    overflow: visible;
}
/* Remove default mermaid border-radius */
.gridjs-wrapper {
    border-radius: 0;
}
/* Dark mode */
[data-bs-theme="dark"] .gridjs-container {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .gridjs-wrapper {
    border-color: var(--vz-border-color, #32383e);
    box-shadow: none;
}
[data-bs-theme="dark"] .gridjs-wrapper table.gridjs-table th.gridjs-th {
    background: var(--vz-card-cap-bg, #252a2f);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .gridjs-wrapper table.gridjs-table th.gridjs-th-sort:hover,
[data-bs-theme="dark"] .gridjs-wrapper table.gridjs-table th.gridjs-th-sort:focus {
    background: rgba(255, 255, 255, .05);
}
[data-bs-theme="dark"] .gridjs-tbody,
[data-bs-theme="dark"] .gridjs-wrapper table.gridjs-table td.gridjs-td {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .gridjs-wrapper table.gridjs-table tr:hover td {
    background-color: rgba(255, 255, 255, .03);
}
[data-bs-theme="dark"] .gridjs-head .gridjs-search-input,
[data-bs-theme="dark"] select.gridjs-search-input {
    background: var(--vz-input-bg, #2b3039);
    border-color: var(--vz-input-border, #3c4147);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .gridjs-footer {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
    box-shadow: none;
}
[data-bs-theme="dark"] .gridjs-pagination {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button {
    background: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button:hover {
    background-color: rgba(255, 255, 255, .05);
}
[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button:disabled,
[data-bs-theme="dark"] .gridjs-pagination .gridjs-pages button[disabled] {
    background-color: var(--vz-card-bg, #2a2f34);
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .gridjs-loading-bar {
    background-color: var(--vz-card-bg, #2a2f34);
}
[data-bs-theme="dark"] .gridjs-notfound {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .gridjs-tr-selected td {
    background-color: rgba(64, 81, 137, .2) !important;
}

/* GridJS search box - prevent placeholder overlapping search icon */
.gridjs-head .gridjs-search { position: relative; }
.gridjs-head .gridjs-search-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='%23878a99'%3E%3Cpath d='M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zM16.025 15.87A6.981 6.981 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.981 6.981 0 0 0 4.875-1.975l.15-.155z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    padding-left: 1.75rem;
}

/* ── CS Inventory Table ──────────────────────────────────────────────────── */
.cs-inv-search {
    position: relative;
    width: 280px;
}
.cs-inv-search i {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--vz-secondary-color, #878a99);
    pointer-events: none;
}
.cs-inv-search input {
    padding-left: 1.75rem;
    font-size: 0.8125rem;
}
/* Header dropdown filters */
.cs-inv-th {
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: var(--vz-heading-color, #495057);
    vertical-align: middle;
}
.cs-inv-filter {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: var(--vz-heading-color, #495057);
    cursor: pointer;
    padding: 0;
    padding-right: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%23878a99'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    max-width: 100%;
}
.cs-inv-filter:focus {
    outline: none;
    color: var(--vz-primary, #1F5FAF);
}
.cs-inv-filter option {
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    font-size: 0.8125rem;
}
.cs-inv-col-label {
    font-size: inherit;
    font-weight: inherit;
}
.cs-inv-sort-icon {
    font-size: 0.55rem;
    color: var(--vz-secondary-color, #878a99);
    margin-left: 2px;
}
.cs-inv-sort-icon.active {
    color: var(--vz-primary, #1F5FAF);
}
/* Dark mode */
[data-bs-theme="dark"] .cs-inv-filter {
    color: var(--vz-heading-color, #ced4da);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%23878a99'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .cs-inv-filter option {
    background: var(--vz-card-bg, #1a2232);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .cs-inv-search input {
    background: var(--vz-input-bg, #1a2232);
    border-color: var(--vz-input-border, #32394e);
    color: var(--vz-body-color, #ced4da);
}
/* Status dots */
.cs-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.cs-status-success { background-color: var(--vz-success, #0ab39c); }
.cs-status-warning { background-color: var(--vz-warning, #f7b84b); }
.cs-status-danger  { background-color: var(--vz-danger, #f06548); }
/* ── Detail Modal ──────────────────────────────────────────────────── */
.cs-detail-modal {
    max-width: 92vw;
    margin: 2vh auto;
}
.cs-detail-modal .modal-body {
    max-height: 86vh;
    overflow-y: auto;
}
.cs-detail-info td { padding: 0.2rem 0.5rem; }
.cs-detail-info td:first-child { width: 40%; }
.cs-detail-info tr:last-child td { border-bottom: none; }
/* Collapsible log sections */
.cs-detail-section {
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 0.25rem;
    overflow: hidden;
}
.cs-detail-section-header {
    padding: 0.4rem 0.75rem;
    background: var(--vz-light, #f3f6f9);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.cs-detail-section-header:hover {
    background: var(--vz-light-rgb, #e9ecef);
}
.cs-detail-section-header .cs-collapse-icon {
    transition: transform 0.2s;
}
.cs-detail-section-header[aria-expanded="false"] .cs-collapse-icon,
.cs-detail-section-header.collapsed .cs-collapse-icon {
    transform: rotate(-90deg);
}
.cs-detail-log-scroll {
    max-height: 220px;
    overflow-y: auto;
}
/* Disposition panel */
.cs-disp-panel { max-height: calc(90vh - 80px); overflow-y: auto; }
.cs-disp-panel .table-responsive { max-height: 200px; overflow-y: auto; }
/* Expandable disposition history rows */
.cs-disp-history { font-size: .8125rem; }
.cs-disp-row { cursor: pointer; }
.cs-disp-row:hover { background: var(--vz-light, #f3f6f9); }
.cs-disp-chevron { transition: transform .2s ease; }
.cs-disp-row[aria-expanded="true"] .cs-disp-chevron { transform: rotate(180deg); }
.cs-disp-detail-row { background: none !important; }
.cs-disp-detail-row:hover { background: none !important; }
.cs-disp-detail { background: var(--vz-light, #f8f9fa); border-left: 3px solid var(--vz-primary, #1F5FAF); line-height: 1.6; }
/* Disposition patient search results */
#csDispPatientResults .list-group-item { font-size: .8125rem; }
#csDispPatientResults .list-group-item:hover { background: var(--vz-light, #f3f6f9); }
/* CS admin annotation sub-rows (edits, notes, late admins) */
.cs-admin-annotation { background: rgba(255, 243, 205, 0.45) !important; }
.cs-admin-annotation:hover { background: rgba(255, 243, 205, 0.65) !important; }
.cs-admin-annotation td { font-size: 0.75rem; padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; border-top: none !important; }
/* Custom location dropdown with flat dots */
.cs-loc-dropdown { position: relative; }
.cs-loc-toggle {
    background-color: var(--vz-input-bg, #fff);
    border: 1px solid var(--vz-input-border, #ced4da);
    border-radius: 0.25rem 0 0 0.25rem;
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--vz-body-color, #495057);
}
.cs-loc-toggle:focus { border-color: var(--vz-primary, #1F5FAF); outline: none; box-shadow: 0 0 0 0.15rem rgba(31,95,175,0.15); }
.cs-loc-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--vz-card-bg, #fff);
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 0.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}
.cs-loc-menu.show { display: block; }
.cs-loc-menu-item {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
}
.cs-loc-menu-item:hover {
    background: var(--vz-light, #f3f6f9);
}
/* Dark mode */
[data-bs-theme="dark"] .cs-detail-section {
    border-color: var(--vz-border-color, #32394e);
}
[data-bs-theme="dark"] .cs-detail-section-header {
    background: var(--vz-dark, #212529);
}
[data-bs-theme="dark"] .cs-loc-toggle {
    background: var(--vz-input-bg, #1a2232);
    border-color: var(--vz-input-border, #32394e);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .cs-loc-menu {
    background: var(--vz-card-bg, #1a2232);
    border-color: var(--vz-border-color, #32394e);
}
[data-bs-theme="dark"] .cs-loc-menu-item:hover {
    background: var(--vz-dark, #212529);
}

/* =========================================================================
   DARK MODE — Comprehensive system-wide overrides
   =========================================================================
   Velzon + Bootstrap 5.3 handle most dark mode via [data-bs-theme="dark"]
   CSS variable reassignment. Below covers EMR-custom components, third-party
   libs (GridJS, flatpickr, ApexCharts), and edge cases.
   ========================================================================= */

/* ── Core layout ─────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] body {
    background-color: var(--vz-body-bg, #212529);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] #page-topbar {
    background-color: var(--vz-card-bg, #2a2f34);
    border-bottom: 1px solid var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .topbar-user .user-name-text {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .page-title-box {
    background-color: transparent;
}
[data-bs-theme="dark"] .page-title-box h4 {
    color: var(--vz-heading-color, #e9ecef);
}
[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--vz-body-color, #ced4da);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .card {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .card-header {
    background-color: var(--vz-card-cap-bg, #252a2f);
    border-bottom-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .card-footer {
    background-color: var(--vz-card-cap-bg, #252a2f);
    border-top-color: var(--vz-border-color, #32383e);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .table {
    color: var(--vz-body-color, #ced4da);
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td,
[data-bs-theme="dark"] thead.table-light th {
    background-color: var(--vz-card-cap-bg, #252a2f) !important;
    color: var(--vz-body-color, #ced4da);
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, .03);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .table-borderless td,
[data-bs-theme="dark"] .table-borderless th {
    border-color: transparent;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--vz-input-bg, #2b3039);
    border-color: var(--vz-input-border, #3c4147);
    color: var(--vz-input-color, #ced4da);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--vz-input-bg, #2b3039);
    border-color: var(--vz-primary, #1F5FAF);
    color: var(--vz-input-color, #ced4da);
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly] {
    background-color: var(--vz-input-disabled-bg, #222529);
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .form-label {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .form-text {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .form-check-input {
    background-color: var(--vz-input-bg, #2b3039);
    border-color: var(--vz-input-border, #3c4147);
}
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--vz-card-cap-bg, #252a2f);
    border-color: var(--vz-input-border, #3c4147);
    color: var(--vz-body-color, #ced4da);
}

/* ── Modals ───────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .modal-title {
    color: var(--vz-heading-color, #e9ecef);
}
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Dropdowns ────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .dropdown-item {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, .05);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .dropdown-header {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--vz-border-color, #32383e);
}

/* ── Alerts & badges ──────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(41, 156, 219, .15);
    border-color: rgba(41, 156, 219, .25);
    color: #6edff6;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(247, 184, 75, .15);
    border-color: rgba(247, 184, 75, .25);
    color: #ffda6a;
}
[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, .15);
    border-color: rgba(220, 53, 69, .25);
    color: #ea868f;
}
[data-bs-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, .15);
    border-color: rgba(25, 135, 84, .25);
    color: #75b798;
}

/* ── List groups ──────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .list-group-item-action:hover {
    background-color: rgba(255, 255, 255, .05);
}

/* ── Nav tabs / pills ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e) var(--vz-border-color, #32383e) var(--vz-card-bg, #2a2f34);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .nav-pills .nav-link {
    color: var(--vz-body-color, #ced4da);
}

/* ── Offcanvas (help drawer, etc.) ────────────────────────────────────────── */
[data-bs-theme="dark"] .offcanvas {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-body-color, #ced4da);
}

/* ── Progress bars ────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, .08);
}

/* ── Accordion ────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .accordion-item {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .accordion-button {
    background-color: var(--vz-card-bg, #2a2f34);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--vz-card-cap-bg, #252a2f);
}

/* ── Connectivity indicator ───────────────────────────────────────────────── */
[data-bs-theme="dark"] .emr-connectivity {
    color: var(--vz-body-color, #ced4da);
}

/* ── Search bar ───────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .app-search .form-control {
    background-color: var(--vz-input-bg, #2b3039);
    border-color: var(--vz-input-border, #3c4147);
    color: var(--vz-input-color, #ced4da);
}

/* ── Patient chart header / status badges ─────────────────────────────────── */
[data-bs-theme="dark"] .cs-detail-info td.text-muted {
    color: var(--vz-secondary-color, #878a99) !important;
}

/* ── Disposition panel ────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .cs-disp-panel {
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .cs-disp-row:hover {
    background: rgba(255, 255, 255, .04);
}
[data-bs-theme="dark"] .cs-disp-detail {
    background: var(--vz-card-cap-bg, #252a2f);
    border-left-color: var(--vz-primary, #1F5FAF);
}
[data-bs-theme="dark"] .cs-disp-history {
    color: var(--vz-body-color, #ced4da);
}
/* Admin annotation sub-rows in dark mode */
[data-bs-theme="dark"] .cs-admin-annotation { background: rgba(255, 193, 7, 0.1) !important; }
[data-bs-theme="dark"] .cs-admin-annotation:hover { background: rgba(255, 193, 7, 0.18) !important; }

/* ── Help system ──────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .emr-help-icon {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .emr-help-icon:hover {
    color: var(--vz-primary, #1F5FAF);
}

/* ── Quick stats / counter widgets ────────────────────────────────────────── */
[data-bs-theme="dark"] .counter-value {
    color: var(--vz-heading-color, #e9ecef);
}

/* ── Text utilities ───────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .text-muted {
    color: var(--vz-secondary-color, #878a99) !important;
}
[data-bs-theme="dark"] a {
    color: var(--vz-link-color, #5ea3f8);
}
[data-bs-theme="dark"] hr {
    border-color: var(--vz-border-color, #32383e);
}

/* ── Skeleton / placeholder ───────────────────────────────────────────────── */
[data-bs-theme="dark"] .placeholder {
    background-color: rgba(255, 255, 255, .1);
}

/* ── Sidebar in dark mode (keep dark regardless) ──────────────────────────── */
[data-bs-theme="dark"] .navbar-menu {
    background-color: #171818;
}

/* ── ApexCharts ───────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-text {
    fill: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .apexcharts-canvas .apexcharts-gridline {
    stroke: rgba(255, 255, 255, .06);
}
[data-bs-theme="dark"] .apexcharts-tooltip {
    background: var(--vz-card-bg, #2a2f34) !important;
    border-color: var(--vz-border-color, #32383e) !important;
    color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .apexcharts-tooltip .apexcharts-tooltip-title {
    background: var(--vz-card-cap-bg, #252a2f) !important;
    border-bottom-color: var(--vz-border-color, #32383e) !important;
}
[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-yaxistooltip {
    background: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .apexcharts-legend-text {
    color: var(--vz-body-color, #ced4da) !important;
}

/* ── Choices.js ───────────────────────────────────────────────────────────── */
/* Light mode polish - tighten Choices to match form-control-sm sizing */
.choices-emr {
    margin-bottom: 0;
    font-size: 0.75rem;
}
.choices-emr .choices__inner {
    min-height: 28px;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}
.choices-emr .choices__list--multiple .choices__item {
    font-size: 0.7rem;
    padding: 2px 6px;
    margin: 1px 2px 0 0;
    border-radius: 0.2rem;
    background-color: var(--vz-primary, #1F5FAF);
    border-color: var(--vz-primary, #1F5FAF);
}
.choices-emr .choices__list--dropdown .choices__item {
    font-size: 0.75rem;
    padding: 4px 8px;
}
.choices-emr .choices__placeholder {
    opacity: 0.55;
}
/* Sticky search bar at top of dropdown */
.choices-emr .choices__list--dropdown .choices__input {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    border-bottom: 1px solid var(--vz-border-color, #dee2e6);
    background-color: var(--vz-card-bg, #fff);
}
/* Optgroup header styling */
.choices-emr .choices__group {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vz-secondary-color, #6c757d);
    padding: 6px 8px 2px;
    border-top: 1px solid var(--vz-border-color, #dee2e6);
}
.choices-emr .choices__group:first-child { border-top: 0; }

/* EMR decorators - selection counter & Select All toolbar */
.choices-emr-counter {
    color: var(--vz-secondary-color, #6c757d);
}
.choices-emr-select-all {
    align-items: center;
}
.choices-emr-select-all .btn-link {
    text-decoration: none;
}
.choices-emr-select-all .btn-link:hover {
    text-decoration: underline;
}

/* Render-selected-first decorator headers */
.choices-emr-selfirst-header {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 8px 2px;
    color: var(--vz-secondary-color, #6c757d);
    pointer-events: none;
    user-select: none;
}
.choices-emr-selfirst-selected {
    border-bottom: 1px solid var(--vz-border-color, #dee2e6);
    background-color: rgba(31, 95, 175, 0.04);
}
.choices-emr-selfirst-available {
    border-top: 1px solid var(--vz-border-color, #dee2e6);
    margin-top: 4px;
}

/* Single-select clear button */
.choices-emr-clear-btn {
    line-height: 1;
}
.choices-emr-clear-btn:hover {
    color: var(--vz-danger, #dc3545) !important;
}

/* Validation: Choices.js hides the underlying <select>, so .is-invalid on
   the select alone has no visual effect. Mirror onto the wrapper. */
.choices.is-invalid .choices__inner {
    border-color: var(--vz-danger, #dc3545) !important;
    background-image: none;
    padding-right: 0.75rem;
}
.choices.is-invalid + .invalid-feedback,
.choices.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Phase 10c: High-contrast / forced-colors mode (Windows High Contrast,
   forced-colors media query). When the OS is in high-contrast mode, browsers
   normally strip background-color and force system colors. We need to:
   (a) restore visible borders on chips and focus states using `outline`
       (which `forced-colors` does NOT strip)
   (b) opt out of forced-color overrides on the colored badges so the
       designer's chosen color still conveys meaning */
@media (forced-colors: active) {
    .choices-emr .choices__inner {
        border: 1px solid CanvasText;
    }
    .choices-emr .choices__list--multiple .choices__item {
        outline: 1px solid CanvasText;
        outline-offset: 1px;
    }
    .choices-emr .choices__list--dropdown .choices__item--selectable.is-highlighted {
        outline: 2px solid Highlight;
        background-color: Highlight !important;
        color: HighlightText !important;
    }
    .choices-emr .choices__list--dropdown .choices__item.is-selected {
        outline: 1px dashed CanvasText;
    }
    .choices.is-invalid .choices__inner {
        outline: 2px solid Mark !important;
    }
    /* Badges convey meaning via color - tell the OS not to override */
    .choices-emr-tpl-badge,
    .badge.choices-emr-tpl-badge {
        forced-color-adjust: none;
    }
    /* Single-select clear button - use system button colors */
    .choices-emr-clear-btn {
        color: ButtonText !important;
    }
    .choices-emr-clear-btn:focus,
    .choices-emr-clear-btn:hover {
        outline: 1px solid Highlight;
    }
    /* Select all toolbar - use link colors */
    .choices-emr-select-all .btn-link {
        color: LinkText !important;
    }
}

/* Phase 9d: Sticky chips area for crowded multi-selects.
   When the user has many selections, the chip row can grow tall and push
   the input out of view. Cap the chip area height and let it scroll
   internally while keeping the typing input always reachable. */
.choices-emr.is-flipped .choices__inner,
.choices-emr .choices__inner {
    max-height: 8rem;
    overflow-y: auto;
    /* Smooth scroll for accessibility */
    scroll-behavior: smooth;
}
/* Reset for single-select - they don't have chips, so no scroll needed.
   Choices.js distinguishes via the data-type attribute on .choices */
.choices[data-type="select-one"].choices-emr .choices__inner {
    max-height: none;
    overflow-y: visible;
}
/* Inside the chip area, keep the typing input pinned at the bottom by using
   flex layout so it always stays at end. Choices already uses flex-wrap. */
.choices-emr[data-type="select-multiple"] .choices__list--multiple {
    align-self: flex-start;
}

/* Phase 4: templated options (with_description / with_icon / with_badge) */
.choices-emr .choices__list--dropdown .choices-emr-tpl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.3;
}
.choices-emr-tpl-main {
    width: 100%;
    font-weight: 500;
}
.choices-emr-tpl-desc {
    width: 100%;
    color: var(--vz-secondary-color, #6c757d);
    font-size: 0.65rem;
    margin-top: 1px;
}
.choices-emr-tpl-badge {
    font-size: 0.6rem;
    margin-left: auto;
}
[data-bs-theme="dark"] .choices-emr-tpl-desc {
    color: var(--vz-secondary-color, #878a99);
}

/* Dark mode for new decorators */
[data-bs-theme="dark"] .choices-emr-selfirst-header {
    color: var(--vz-secondary-color, #878a99);
}
[data-bs-theme="dark"] .choices-emr-selfirst-selected {
    background-color: rgba(255,255,255,0.03);
    border-bottom-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .choices-emr-selfirst-available {
    border-top-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .choices-emr-clear-btn {
    color: var(--vz-secondary-color, #878a99);
}

/* Dark mode */
[data-bs-theme="dark"] .choices__inner {
    background-color: var(--vz-input-bg, #2b3039);
    border-color: var(--vz-input-border, #3c4147);
}
[data-bs-theme="dark"] .choices__list--dropdown {
    background-color: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] .choices__input {
    background-color: var(--vz-input-bg, #2b3039);
    color: var(--vz-input-color, #ced4da);
}
[data-bs-theme="dark"] .choices-emr .choices__list--dropdown .choices__input {
    border-bottom-color: var(--vz-border-color, #32383e);
    background-color: var(--vz-card-bg, #2a2f34);
}
[data-bs-theme="dark"] .choices-emr .choices__group {
    color: var(--vz-secondary-color, #878a99);
    border-top-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .choices-emr-counter {
    color: var(--vz-secondary-color, #878a99);
}

/* ── Toastify ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .toastify {
    background: var(--vz-card-bg, #2a2f34) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ── CS Line Editor (MAR Administration) - Mouse-First Design ────────────── */

/* Line rows */
.cs-line-row {
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--vz-light, #f3f6f9);
    transition: box-shadow 150ms ease;
}
.cs-line-admin { border-left: 3px solid var(--vz-success, #0ab39c); }
.cs-line-waste { border-left: 3px solid var(--vz-warning, #f7b84b); }

/* Inventory cards - clickable tiles replacing dropdown */
.cs-inv-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cs-inv-card {
    flex: 1 1 calc(50% - 6px);
    min-width: 180px;
    border: 2px solid var(--vz-border-color, #e9ebec);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    background: var(--vz-card-bg, #fff);
    user-select: none;
}
.cs-inv-card:hover {
    border-color: var(--vz-primary, #405189);
    box-shadow: 0 0 0 1px var(--vz-primary, #405189);
}
.cs-inv-card-selected {
    border-color: var(--vz-primary, #405189) !important;
    box-shadow: 0 0 0 2px rgba(64, 81, 137, .25) !important;
    background: rgba(64, 81, 137, .04);
}
/* "Selected" label below the card content - clear and out of the way */
.cs-inv-card-selected::after {
    content: 'Selected';
    display: block;
    margin-top: 4px;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vz-primary, #405189);
    text-align: center;
}
.cs-inv-group-label {
    width: 100%;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--vz-secondary-color, #878a99);
    margin: 4px 0 2px;
    padding-left: 2px;
}

/* Quantity preset buttons */
.cs-qty-presets { flex-shrink: 0; }
.cs-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 4px;
    background: var(--vz-card-bg, #fff);
    color: var(--vz-body-color, #212529);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    user-select: none;
}
.cs-qty-btn:hover { border-color: var(--vz-primary, #405189); color: var(--vz-primary, #405189); }
.cs-qty-btn.active {
    background: var(--vz-primary, #405189);
    border-color: var(--vz-primary, #405189);
    color: #fff;
}

/* Quantity stepper (+/- buttons flanking the number) */
.cs-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.cs-qty-step-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: var(--vz-card-bg, #fff);
    color: var(--vz-body-color, #212529);
    cursor: pointer;
    transition: background 120ms ease;
    font-size: .85rem;
}
.cs-qty-step-btn:hover { background: var(--vz-light, #f3f6f9); }
.cs-qty-step-btn:active { background: var(--vz-primary, #405189); color: #fff; }
.cs-qty-input {
    width: 44px;
    height: 30px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--vz-border-color, #e9ebec);
    border-right: 1px solid var(--vz-border-color, #e9ebec);
    background: var(--vz-card-bg, #fff);
    color: var(--vz-body-color, #212529);
    font-size: .8rem;
    font-weight: 600;
    -moz-appearance: textfield;
}
.cs-qty-input::-webkit-inner-spin-button,
.cs-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Waste reason chips */
.cs-waste-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 20px;
    background: var(--vz-card-bg, #fff);
    color: var(--vz-body-color, #212529);
    font-size: .75rem;
    cursor: pointer;
    transition: all 120ms ease;
    user-select: none;
}
.cs-waste-chip:hover { border-color: var(--vz-warning, #f7b84b); color: var(--vz-warning, #f7b84b); }
.cs-waste-chip.active {
    background: var(--vz-warning, #f7b84b);
    border-color: var(--vz-warning, #f7b84b);
    color: #000;
    font-weight: 500;
}

/* Remove button (X in top-right) */
.cs-line-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--vz-secondary-color, #878a99);
    cursor: pointer;
    transition: all 120ms ease;
    font-size: 1rem;
}
.cs-line-remove-btn:hover { background: rgba(244, 106, 106, .1); color: var(--vz-danger, #f46a6a); }

/* "Change control #" toggle link */
.cs-inv-change-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--vz-link-color, #405189);
    font-size: .75rem;
    cursor: pointer;
    text-decoration: none;
}
.cs-inv-change-btn:hover { text-decoration: underline; }
[data-bs-theme="dark"] .cs-inv-change-btn { color: #8b9fda; }

/* Add line buttons (larger touch targets) */
.cs-btn-touch {
    min-height: 34px;
    padding: 4px 12px;
    font-size: .8rem;
}

/* ── CS Line Editor Dark Mode ──────────────────────────────────────────── */
[data-bs-theme="dark"] .cs-line-row { background: var(--vz-card-cap-bg, #252a2f); }
[data-bs-theme="dark"] .cs-inv-card { background: var(--vz-input-bg, #2b3039); border-color: var(--vz-border-color, #32383e); }
[data-bs-theme="dark"] .cs-inv-card:hover { border-color: #6075b5; box-shadow: 0 0 0 1px #6075b5; }
[data-bs-theme="dark"] .cs-inv-card-selected { background: rgba(96, 117, 181, .1); border-color: #6075b5 !important; box-shadow: 0 0 0 2px rgba(96, 117, 181, .2) !important; }
[data-bs-theme="dark"] .cs-inv-card-selected::after { color: #8b9fda; }
[data-bs-theme="dark"] .cs-qty-btn { background: var(--vz-input-bg, #2b3039); border-color: var(--vz-border-color, #32383e); }
[data-bs-theme="dark"] .cs-qty-btn:hover { border-color: #6075b5; color: #8b9fda; }
[data-bs-theme="dark"] .cs-qty-btn.active { background: #405189; border-color: #405189; }
[data-bs-theme="dark"] .cs-qty-stepper { border-color: var(--vz-border-color, #32383e); }
[data-bs-theme="dark"] .cs-qty-step-btn { background: var(--vz-input-bg, #2b3039); }
[data-bs-theme="dark"] .cs-qty-step-btn:hover { background: #32383e; }
[data-bs-theme="dark"] .cs-qty-input { background: var(--vz-input-bg, #2b3039); border-color: var(--vz-border-color, #32383e); color: var(--vz-body-color, #ced4da); }
[data-bs-theme="dark"] .cs-waste-chip { background: var(--vz-input-bg, #2b3039); border-color: var(--vz-border-color, #32383e); }
[data-bs-theme="dark"] .cs-waste-chip:hover { border-color: #f7b84b; color: #f7b84b; }
[data-bs-theme="dark"] .cs-waste-chip.active { background: #f7b84b; border-color: #f7b84b; color: #000; }

/* ── Config & Facility pages ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--vz-card-cap-bg, #252a2f) !important;
    border-color: var(--vz-border-color, #32383e) !important;
}
[data-bs-theme="dark"] .badge.bg-light.text-muted {
    color: var(--vz-secondary-color, #878a99) !important;
}
[data-bs-theme="dark"] .badge.bg-light.text-dark {
    color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .bg-light {
    background-color: var(--vz-card-cap-bg, #252a2f) !important;
}
/* Google Places Autocomplete */
[data-bs-theme="dark"] .pac-container {
    background-color: var(--vz-card-bg, #2a2f34) !important;
    color: var(--vz-body-color, #ced4da) !important;
    border-color: var(--vz-border-color, #32383e) !important;
}
[data-bs-theme="dark"] .pac-item {
    background-color: var(--vz-card-bg, #2a2f34) !important;
    color: var(--vz-body-color, #ced4da) !important;
    border-top-color: var(--vz-border-color, #32383e) !important;
}
[data-bs-theme="dark"] .pac-item:hover {
    background-color: rgba(255,255,255,.05) !important;
}
[data-bs-theme="dark"] .pac-item-query {
    color: var(--vz-body-color, #ced4da) !important;
}
[data-bs-theme="dark"] .pac-icon {
    filter: invert(0.8) !important;
}

/* ── Dashboard dark mode ──────────────────────────────────────────────────── */
[data-bs-theme="dark"] .emr-kpi-icon-primary  { background: rgba(94,163,203,.15); }
[data-bs-theme="dark"] .emr-kpi-icon-success  { background: rgba(25,135,84,.15); }
[data-bs-theme="dark"] .emr-kpi-icon-danger   { background: rgba(220,53,69,.15); }
[data-bs-theme="dark"] .emr-kpi-icon-warning  { background: rgba(255,193,7,.15); }
[data-bs-theme="dark"] .emr-kpi-icon-info     { background: rgba(53,119,241,.15); }
[data-bs-theme="dark"] .emr-kpi-icon-secondary{ background: rgba(108,117,125,.15); }
[data-bs-theme="dark"] .emr-kpi-detail {
    border-top-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .emr-pulse-dot-danger {
    animation-name: emrPulseDark;
}
@keyframes emrPulseDark {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,53,69,.3); }
    50%      { opacity: .7; box-shadow: 0 0 0 3px rgba(220,53,69,0); }
}
[data-bs-theme="dark"] .emr-qa-item {
    background: var(--vz-card-bg, #2a2f34);
    border-color: var(--vz-border-color, #32383e);
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .emr-qa-item:hover {
    background: rgba(94,163,203,.1);
    border-color: rgba(94,163,203,.25);
}
[data-bs-theme="dark"] .emr-pass-active {
    background: rgba(94,163,203,.1) !important;
}
[data-bs-theme="dark"] .emr-pass-next {
    background: rgba(53,119,241,.06) !important;
}

/* ── Trigger narrative cards ─────────────────────────────────────────────── */
.trig-card {
    border: 1px solid var(--vz-border-color);
    border-radius: 0.375rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    background: var(--vz-card-bg);
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.trig-card:hover {
    border-color: var(--vz-primary);
    box-shadow: 0 0 0 1px rgba(var(--vz-primary-rgb), 0.12);
}
.trig-card-selected {
    border-color: var(--vz-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--vz-primary-rgb), 0.25);
}
.trig-card-selected .trig-card-actions {
    opacity: 1;
}
.trig-card-inactive {
    opacity: 0.55;
}
.trig-card-inactive:hover {
    opacity: 0.8;
}
.trig-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}
.trig-card-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: 0.8125rem;
}
.trig-card-title .fw-semibold {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trig-card-actions {
    display: flex;
    gap: 0.125rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}
.trig-card:hover .trig-card-actions {
    opacity: 1;
}
.trig-card-actions .btn {
    padding: 0.125rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1;
}

/* Status dot */
.trig-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.trig-dot-active {
    background-color: var(--vz-success);
}
.trig-dot-inactive {
    background-color: var(--vz-secondary);
}

/* Mutex badge */
.trig-mutex-badge {
    font-size: 0.625rem;
    color: var(--vz-warning);
    flex-shrink: 0;
}

/* Narrative text */
.trig-narrative {
    color: var(--vz-secondary-color);
    font-size: 0.75rem;
    line-height: 1.6;
}
/* Truncated narrative in sidebar cards: max 2 lines, fade out */
.trig-narrative-truncated {
    max-height: 2.6em;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}
/* Remove mask/truncation for multi-criteria (has <ul>) since they need more room */
.trig-narrative-truncated:has(.trig-conditions-list) {
    max-height: 4.8em;
}

/* Trigger popover */
.trig-popover {
    max-width: 360px;
    font-size: 0.8125rem;
}
.trig-popover .popover-body {
    padding: 0.75rem;
}
.trig-popover-narrative {
    line-height: 1.65;
    color: var(--vz-body-color);
}
.trig-popover-narrative .trig-conditions-list {
    margin: 0.25rem 0 0.25rem 0.5rem;
}
.trig-popover-footer {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--vz-border-color);
    font-size: 0.6875rem;
    color: var(--vz-secondary-color);
    display: flex;
    align-items: center;
}

/* Keywords: When, if, then */
.trig-keyword {
    font-weight: 600;
    color: var(--vz-body-color);
}

/* Inline tokens */
.trig-token {
    font-weight: 600;
    padding: 0.063rem 0.25rem;
    border-radius: 0.1875rem;
}
.trig-field {
    color: #3577f1;
    background: rgba(53, 119, 241, 0.08);
}
.trig-op {
    color: var(--vz-secondary-color);
    font-style: italic;
    background: none;
    padding: 0;
}
.trig-value {
    color: #0ab39c;
    background: rgba(10, 179, 156, 0.08);
}
.trig-event {
    color: #405189;
    background: rgba(64, 81, 137, 0.08);
}
.trig-action {
    color: #f06548;
    background: rgba(240, 101, 72, 0.08);
}
.trig-logic {
    color: #405189;
    background: rgba(64, 81, 137, 0.08);
    font-style: italic;
}
.trig-severity-warning {
    color: #f7b84b;
}
.trig-severity-critical {
    color: #f06548;
    font-weight: 700;
}

/* Multi-condition bullet list inside narrative */
.trig-conditions-list {
    list-style: none;
    margin: 0.25rem 0 0.25rem 0.5rem;
    padding: 0;
}
.trig-conditions-list li {
    position: relative;
    padding-left: 0.875rem;
    margin-bottom: 0.125rem;
}
.trig-conditions-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--vz-secondary-color);
    font-weight: 700;
}

/* Dark mode overrides */
[data-bs-theme="dark"] .trig-field {
    color: #6ea8fe;
    background: rgba(110, 168, 254, 0.1);
}
[data-bs-theme="dark"] .trig-value {
    color: #4dd4ac;
    background: rgba(77, 212, 172, 0.1);
}
[data-bs-theme="dark"] .trig-event {
    color: #8c9dca;
    background: rgba(140, 157, 202, 0.1);
}
[data-bs-theme="dark"] .trig-action {
    color: #f58e78;
    background: rgba(245, 142, 120, 0.1);
}
[data-bs-theme="dark"] .trig-logic {
    color: #8c9dca;
    background: rgba(140, 157, 202, 0.1);
}

/* ── Trigger sentence builder (modal editor) ────────────────────────────── */
.trig-editor {
    font-size: 0.8125rem;
}
.trig-sentence-box {
    border: 1px solid var(--vz-border-color);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--vz-body-bg);
    line-height: 2.2;
}
.trig-sentence-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}
.trig-sentence-text {
    color: var(--vz-secondary-color);
    white-space: nowrap;
}

/* Inline selects and inputs inside the sentence */
.trig-inline-select {
    width: auto;
    min-width: 6rem;
    display: inline-flex;
    font-weight: 600;
    border-color: transparent;
    background-color: transparent;
    color: var(--vz-body-color);
    padding: 0.15rem 1.75rem 0.15rem 0.5rem;
    font-size: 0.8125rem;
    border-bottom: 2px solid var(--vz-primary);
    border-radius: 0;
    transition: border-color 150ms ease-in-out, background-color 150ms ease-in-out;
}
.trig-inline-select:focus {
    background-color: rgba(var(--vz-primary-rgb), 0.06);
    border-color: var(--vz-primary);
    box-shadow: none;
}
.trig-inline-select:hover {
    background-color: rgba(var(--vz-primary-rgb), 0.04);
}
.trig-inline-input {
    width: auto;
    min-width: 5rem;
    max-width: 10rem;
    display: inline-flex;
    font-weight: 600;
    border-color: transparent;
    background-color: transparent;
    color: var(--vz-body-color);
    padding: 0.15rem 0.5rem;
    font-size: 0.8125rem;
    border-bottom: 2px solid var(--vz-success);
    border-radius: 0;
    transition: border-color 150ms ease-in-out, background-color 150ms ease-in-out;
}
.trig-inline-input:focus {
    background-color: rgba(var(--vz-success-rgb), 0.06);
    border-color: var(--vz-success);
    box-shadow: none;
}
.trig-inline-input::placeholder {
    font-weight: 400;
    font-style: italic;
    color: var(--vz-secondary-color);
    opacity: 0.6;
}
.trig-inline-wide {
    min-width: 10rem;
    max-width: 22rem;
    flex: 1;
}
.trig-inline-narrow {
    min-width: 3rem;
    max-width: 4.5rem;
}

/* Smart value inputs */
.trig-value-select {
    border-color: transparent;
    background-color: transparent;
    border-bottom: 2px solid var(--vz-success);
    border-radius: 0;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.15rem 1.75rem 0.15rem 0.5rem;
    min-width: 6rem;
    width: auto;
}
.trig-value-select:focus {
    background-color: rgba(var(--vz-success-rgb), 0.06);
    border-color: var(--vz-success);
    box-shadow: none;
}
.trig-value-number {
    max-width: 7rem;
}
.trig-value-date {
    max-width: 10rem;
}
.trig-value-in {
    min-width: 12rem;
}
.trig-value-in::placeholder {
    font-size: 0.75rem;
    letter-spacing: -0.01em;
}

/* Multi-condition rows inside sentence builder */
.trig-criteria-list {
    margin: 0.375rem 0 0.375rem 1.25rem;
}
.trig-criteria-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.375rem;
    position: relative;
    border-radius: 0.25rem;
    transition: background-color 150ms ease-in-out;
}
.trig-criteria-row:hover {
    background: rgba(var(--vz-primary-rgb), 0.03);
}
.trig-criteria-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vz-secondary-color);
    flex-shrink: 0;
}
.trig-criteria-row .btn-remove-criteria {
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}
.trig-criteria-row:hover .btn-remove-criteria {
    opacity: 1;
}

/* "+ Add another condition" link */
.trig-add-condition-line {
    margin-top: 0.25rem;
    padding-left: 0.125rem;
}
.trig-btn-add-condition {
    font-size: 0.75rem;
    opacity: 0.7;
    transition: opacity 150ms ease-in-out;
}
.trig-btn-add-condition:hover {
    opacity: 1;
}

/* Condition section transitions */
.trig-condition-section {
    transition: opacity 200ms ease-in-out;
}
.trig-section-enter {
    animation: trigSectionFadeIn 200ms ease-in-out;
}
@keyframes trigSectionFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Criteria row entrance/exit animations */
.trig-row-enter {
    animation: trigRowSlideIn 200ms ease-out;
}
@keyframes trigRowSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.trig-row-exit {
    animation: trigRowSlideOut 150ms ease-in forwards;
    pointer-events: none;
}
@keyframes trigRowSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(8px); }
}

/* Action config inside sentence */
.trig-sentence-action-line {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

/* Action status banners inside sentence builder */
.trig-action-banner {
    font-size: 0.6875rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    line-height: 1.4;
}
.trig-action-banner-planned {
    background: rgba(var(--vz-warning-rgb), 0.1);
    color: var(--vz-warning);
    border: 1px solid rgba(var(--vz-warning-rgb), 0.2);
}
.trig-action-banner-partial {
    background: rgba(var(--vz-info-rgb), 0.08);
    color: var(--vz-info);
    border: 1px solid rgba(var(--vz-info-rgb), 0.15);
}

/* Action status badges in narrative cards */
.trig-action-planned-badge,
.trig-action-partial-badge {
    font-size: 0.5625rem;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.063rem 0.3rem;
    border-radius: 0.1875rem;
    vertical-align: middle;
}
.trig-action-planned-badge {
    color: var(--vz-warning);
    background: rgba(var(--vz-warning-rgb), 0.1);
}
.trig-action-partial-badge {
    color: var(--vz-info);
    background: rgba(var(--vz-info-rgb), 0.08);
}

/* Dark mode overrides for sentence builder */
[data-bs-theme="dark"] .trig-sentence-box {
    background: var(--vz-body-bg, #212529);
    border-color: var(--vz-border-color, #32383e);
}
[data-bs-theme="dark"] .trig-inline-select {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .trig-inline-input {
    color: var(--vz-body-color, #ced4da);
}
[data-bs-theme="dark"] .trig-popover .popover-body {
    background: var(--vz-card-bg, #2a2f34);
    color: var(--vz-body-color, #ced4da);
}

/* ── Draft progress stripe on Continue buttons ───────────────────────────── */
.draft-progress-stripe {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--vz-success);
    border-radius: 0 0 0.25rem 0.25rem;
    transition: width 300ms ease-out;
    pointer-events: none;
}

/* ── Form progress bar ───────────────────────────────────────────────────── */
.form-progress-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 6px;
    background: var(--vz-border-color);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}
.form-progress-required,
.form-progress-optional {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 0;
    transition: width 300ms ease-out;
}
.form-progress-required {
    background: var(--vz-success);
    z-index: 2;
}
.form-progress-optional {
    background: var(--vz-warning);
    z-index: 1;
}

/* Inside modals: stretch to full modal width by negating padding */
.modal-body > .form-progress-bar,
.card-body > .form-progress-bar {
    margin-left: -1rem;
    margin-right: -1rem;
    width: calc(100% + 2rem);
    margin-top: -0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0;
}

/* ── Form view mode (read-only submission rendering) ─────────────────────── */
.form-view-readonly .form-control,
.form-view-readonly .form-select {
    pointer-events: none;
    background-color: var(--vz-input-bg);
    opacity: 1;
    border-color: var(--vz-border-color);
    color: var(--vz-body-color);
}
.form-view-readonly .form-check-input {
    pointer-events: none;
    opacity: 1;
}
.form-view-readonly .choices {
    pointer-events: none;
    opacity: 1;
}
.form-view-readonly .form-control:focus,
.form-view-readonly .form-select:focus {
    box-shadow: none;
    border-color: var(--vz-border-color);
}
.form-view-readonly .invalid-feedback {
    display: none !important;
}

/* ── Options editor: group rows and indentation ──────────────────────────── */
.option-group-row {
    background: var(--vz-light);
    border-radius: 4px;
    padding: 4px 8px;
    font-weight: 600;
}
.option-row-indented {
    padding-left: 24px;
}
[data-bs-theme="dark"] .option-group-row {
    background: rgba(255,255,255,.05);
}

/* ── Color picker dropdown ───────────────────────────────────────────────── */
.emr-color-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border: 1px solid var(--vz-border-color);
    border-radius: 4px;
    padding: 2px 6px;
    background: var(--vz-input-bg);
    font-size: 0.7rem;
    position: relative;
}
.emr-color-picker-trigger:hover {
    border-color: var(--vz-primary);
}
.emr-color-picker-swatch {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.15);
    flex-shrink: 0;
}
.emr-color-picker-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 1090;
    background: var(--vz-card-bg, #fff);
    border: 1px solid var(--vz-border-color);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    padding: 10px;
    width: 232px;
}
.emr-cp-label {
    font-size: 0.6rem;
    color: var(--vz-secondary-color);
    font-weight: 600;
    margin-bottom: 3px;
    margin-top: 6px;
}
.emr-cp-label:first-child {
    margin-top: 0;
}
.emr-cp-grid {
    display: grid;
    gap: 2px;
}
.emr-cp-cell {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,.1);
    cursor: pointer;
    transition: transform 100ms ease;
}
.emr-cp-cell:hover {
    transform: scale(1.3);
    z-index: 1;
    position: relative;
    box-shadow: 0 0 0 2px var(--vz-primary);
}
.emr-cp-cell.selected {
    box-shadow: 0 0 0 2px var(--vz-primary);
}
.emr-cp-advanced {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-size: 0.65rem;
    text-align: center;
    cursor: pointer;
    padding: 3px 0;
    color: var(--vz-primary);
    background: none;
    border: 1px dashed var(--vz-border-color);
    border-radius: 4px;
}
.emr-cp-advanced:hover {
    background: var(--vz-light);
}
/* ── Color picker: advanced HSL view ──────────────────────────────────────── */
.emr-cp-adv-header {
    margin-bottom: 6px;
}
.emr-cp-back {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.65rem;
    color: var(--vz-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
}
.emr-cp-back:hover {
    text-decoration: underline;
}
.emr-cp-spectrum {
    display: block;
    width: 100%;
    height: 130px;
    border-radius: 4px;
    cursor: crosshair;
    border: 1px solid var(--vz-border-color);
}
.emr-cp-slider-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.emr-cp-lightness {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}
.emr-cp-lightness::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #666;
    cursor: pointer;
}
.emr-cp-lightness::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #666;
    cursor: pointer;
}
.emr-cp-hex-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.emr-cp-hex-input {
    flex: 1;
    font-size: 0.7rem;
    font-family: monospace;
    padding: 2px 6px;
    border: 1px solid var(--vz-border-color);
    border-radius: 4px;
    background: var(--vz-input-bg);
    color: var(--vz-body-color);
}
.emr-cp-hex-input:focus {
    outline: none;
    border-color: var(--vz-primary);
}
.emr-cp-preview {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--vz-border-color);
    flex-shrink: 0;
}
.emr-cp-select {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 4px 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: var(--vz-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.emr-cp-select:hover {
    opacity: 0.9;
}

[data-bs-theme="dark"] .emr-cp-cell {
    border-color: rgba(255,255,255,.1);
}
[data-bs-theme="dark"] .emr-color-picker-swatch {
    border-color: rgba(255,255,255,.15);
}
[data-bs-theme="dark"] .emr-cp-lightness::-webkit-slider-thumb {
    background: #ccc;
    border-color: #999;
}
[data-bs-theme="dark"] .emr-cp-lightness::-moz-range-thumb {
    background: #ccc;
    border-color: #999;
}

/* ── Sum/calculated field display ────────────────────────────────────────── */
.form-view-readonly [data-calc] {
    font-weight: 600;
    background: var(--vz-light) !important;
    border-color: var(--vz-border-color);
}
[data-bs-theme="dark"] .form-view-readonly [data-calc] {
    background: rgba(255,255,255,.05) !important;
}

/* ============================================================== */
/* Form Quick Actions - sticky/floating behaviour                  */
/*                                                                  */
/* When the user scrolls past the form's top, the action bar       */
/* leaves flow (position:fixed, top-right), condenses to a         */
/* hamburger via animated max-width / opacity transitions on the   */
/* label and buttons, and re-expands when the user clicks the      */
/* hamburger or scrolls back to the top. The .form-action-bar-     */
/* anchor preserves the bar's vertical space so the form below     */
/* doesn't jump on float-out.                                       */
/* ============================================================== */
.form-action-bar-anchor {
    transition: min-height 250ms ease;
}

.form-action-bar {
    transition: top 0ms,
                right 0ms,
                left 0ms,
                width 350ms cubic-bezier(0.4, 0, 0.2, 1),
                padding 250ms ease,
                box-shadow 250ms ease;
}

.form-action-bar-label,
.form-action-bar-buttons {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: 1200px;
    opacity: 1;
    transition: max-width 350ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 250ms ease,
                margin 250ms ease;
}

.form-action-bar-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Hamburger toggle - present in DOM but visually collapsed in the
   default (inline) state. Becomes visible only when .is-floating
   is added by the IntersectionObserver in form-renderer.js. */
.form-action-bar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    max-width: 0;
    opacity: 0;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    transition: max-width 300ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 250ms ease,
                padding 250ms ease,
                margin 250ms ease;
}

/* Floating state: bar leaves flow, pinned top-right below topbar.
   Background uses --vz-card-bg so it adapts to dark mode without
   needing a separate override (per CLAUDE.md dark-mode rules). */
.form-action-bar.is-floating {
    position: fixed;
    top: 80px;
    right: 1.5rem;
    left: auto;
    z-index: 1020;
    width: auto !important;
    max-width: calc(100vw - 3rem);
    background-color: var(--vz-card-bg) !important;
    border: 1px solid var(--vz-border-color) !important;
    border-radius: 0.5rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* In floating mode the label collapses with the buttons - the
   hamburger is the only persistent affordance. */
.form-action-bar.is-floating .form-action-bar-label {
    max-width: 0;
    opacity: 0;
    margin: 0 !important;
}

/* Condensed (floating, NOT expanded): only the hamburger shows. */
.form-action-bar.is-floating:not(.is-expanded) .form-action-bar-buttons {
    max-width: 0;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

/* Reveal hamburger when floating. */
.form-action-bar.is-floating .form-action-bar-toggle {
    max-width: 60px;
    opacity: 1;
    padding: 0.375rem 0.75rem !important;
}

/* Floating + expanded: animate the buttons back open beside the
   hamburger (label stays hidden to keep the popover compact). */
.form-action-bar.is-floating.is-expanded .form-action-bar-buttons {
    max-width: 800px;
    opacity: 1;
    pointer-events: auto;
}

/* Dark mode shadow override - lighter shadows are invisible on dark
   backgrounds; this gives the floating popover real depth. */
[data-bs-theme="dark"] .form-action-bar.is-floating {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* Mobile: tighter offsets, smaller expanded popover width. */
@media (max-width: 576px) {
    .form-action-bar.is-floating {
        top: 70px;
        right: 0.75rem;
    }
    .form-action-bar.is-floating.is-expanded .form-action-bar-buttons {
        max-width: calc(100vw - 6rem);
    }
}

/* Reduced-motion: cut transition durations so the user isn't forced
   through animations when they've opted out. */
@media (prefers-reduced-motion: reduce) {
    .form-action-bar,
    .form-action-bar-label,
    .form-action-bar-buttons,
    .form-action-bar-toggle,
    .form-action-bar-anchor {
        transition-duration: 0ms !important;
    }
}

/* ── Form Narrative regions (Phase 5a of form-narrative-plan.md) ─────────── */
/* Inline-edit regions inside the chart-note / SOAP / sick-call editors.
   Muted color clearly distinguishes "from a form" prose from clinician
   typing. Both light + dark themes get explicit overrides; print falls
   back to the light palette via the shared @media print block below. */
.fnar-region {
    color: var(--fnar-text-color, #5f6c7b);
    background-color: var(--fnar-bg-color, rgba(95, 108, 123, 0.05));
    padding: 0 2px;
    border-radius: 2px;
    /* The contenteditable parent gets the keyboard-focus outline; we
       suppress the per-region one to keep the tabbing experience
       consistent with the surrounding text. */
    outline: none;
}
.fnar-region.fnar-loading {
    opacity: 0.6;
    font-style: italic;
}
.fnar-region.fnar-unavailable {
    color: var(--vz-danger, #f06548);
    font-style: italic;
}
[data-bs-theme="dark"] .fnar-region {
    color: var(--fnar-text-color-dark, #a4b0c0);
    background-color: var(--fnar-bg-color-dark, rgba(164, 176, 192, 0.08));
}

/* The fnar-editor is the contenteditable root the chart-note editor
   mounts into. Bootstrap's .form-control gives most inputs a border +
   padding, but contenteditable divs aren't inputs - we replicate the
   look explicitly. */
.fnar-editor {
    min-height: 12rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--vz-input-border, #ced4da);
    border-radius: var(--vz-border-radius, 0.25rem);
    background-color: var(--vz-input-bg, #fff);
    color: var(--vz-body-color, #495057);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
}
.fnar-editor:focus {
    outline: 2px solid var(--vz-primary, #405189);
    outline-offset: -1px;
}

/* ── Chart Notes ─────────────────────────────────────────────────────────── */
#chartNotesContent .chart-notes-row td { vertical-align: middle; }
#chartNotesContent .empty-state {
    color: var(--vz-secondary-color);
    padding: 3rem 1rem;
    text-align: center;
}
.chart-note-editor-host {
    min-height: 400px;
}
.chart-note-readonly-tint {
    position: relative;
}
.chart-note-readonly-tint::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--vz-light);
    opacity: 0.4;
    pointer-events: none;
    border-radius: inherit;
}
[data-bs-theme="dark"] .chart-note-readonly-tint::after {
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 1;
}

/* ── Print: always light ──────────────────────────────────────────────────── */
@media print {
    html[data-bs-theme="dark"] { color-scheme: light; }
    [data-bs-theme="dark"] body { background: #fff; color: #000; }
    [data-bs-theme="dark"] .card { background: #fff; border-color: #dee2e6; }
    [data-bs-theme="dark"] .table { color: #000; }
    /* Force quick-actions bar inline + show all buttons on print, hide
       the hamburger toggle (only meaningful in interactive scrolling). */
    .form-action-bar.is-floating {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
    }
    .form-action-bar.is-floating .form-action-bar-buttons,
    .form-action-bar.is-floating .form-action-bar-label {
        max-width: none !important;
        opacity: 1 !important;
    }
    .form-action-bar-toggle { display: none !important; }
}