/* =============================================================================
   InspireWebApp EHR2 — Redesign Stylesheet
   Spec: /EHR_UI_REDESIGN.md
   Namespace: every selector here is prefixed `ehr2-` / `btn-ehr2-` so it never
   collides with the legacy purple system in css/ehr.css. Pages migrate to this
   file one at a time — see EHR_UI_REDESIGN.md Section 9 for the rollout process.
   ============================================================================= */

/* ─── Brand tokens (EHR_UI_REDESIGN.md Section 1) ──────────────────────────── */
:root {
  --color-primary:        #015B3A;
  --color-primary-hover:  #013E28;
  --color-primary-active: #012B1C;
  --color-primary-light:  #E6F2EC;
  --color-primary-lighter:#F2F9F6;
  --color-on-primary:     #FFFFFF;

  --color-success:    #1E8E5A;
  --color-success-bg: #E8F6EE;
  --color-warning:    #B8860B;
  --color-warning-bg: #FFF6E0;
  --color-danger:     #C62828;
  --color-danger-bg:  #FDEAEA;
  --color-info:       #2563EB;
  --color-info-bg:    #EAF1FE;

  --color-text:          #1A1F1C;
  --color-text-muted:    #6B7670;
  --color-border:        #E1E6E3;
  --color-border-strong: #C7CFC9;
  --color-bg:            #F6F8F7;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #FAFBFA;

  /* Page-local aliases — kept so the ported component rules below read the
     way they did in the original system, just remapped to the tokens above. */
  --ehr2-primary:     var(--color-primary);
  --ehr2-primary-dk:  var(--color-primary-hover);
  --ehr2-primary-lt:  var(--color-primary-light);
  --ehr2-primary-lighter: var(--color-primary-lighter);
  --ehr2-success:     var(--color-success);
  --ehr2-success-lt:  var(--color-success-bg);
  --ehr2-warning:     var(--color-warning);
  --ehr2-warning-lt:  var(--color-warning-bg);
  --ehr2-danger:      var(--color-danger);
  --ehr2-danger-lt:   var(--color-danger-bg);
  --ehr2-info:        var(--color-info);
  --ehr2-info-lt:     var(--color-info-bg);
  --ehr2-surface:     var(--color-bg);
  --ehr2-card:        var(--color-surface);
  --ehr2-border:      var(--color-border);
  --ehr2-text:        var(--color-text);
  --ehr2-muted:       var(--color-text-muted);
  --ehr2-font:        -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ehr2-radius-sm:   8px;
  --ehr2-radius:      12px;
  --ehr2-radius-lg:   16px;
  --ehr2-shadow:      0 2px 15px rgba(15,23,18,.06);
  --ehr2-shadow-md:   0 4px 24px rgba(1,91,58,.14);
  --ehr2-transition:  .18s ease;
}

/* =============================================================================
   Progress Measurement and Audit Binder pages
   ============================================================================= */
.ehr-progress-shell,
.ehr-audit-binder-shell { width: 100%; max-width: 1480px; margin: 0 auto; }

.ehr2-page-title { margin: 0; color: var(--ehr2-text); font-size: 1.3rem; font-weight: 700; }
.ehr2-helper { color: var(--ehr2-muted); font-size: .78rem; }
.ehr-progress-hero,
.ehr-audit-hero { display: flex; align-items: center;  gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding: 22px 24px; background: linear-gradient(135deg, var(--ehr2-card) 65%, var(--ehr2-primary-lt)); border: 1px solid var(--ehr2-border); border-left: 5px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); }
.ehr-progress-hero-copy { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ehr-progress-hero-icon,
.ehr-audit-hero-icon { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: var(--ehr2-primary-lt); color: var(--ehr2-primary); font-size: 1.3rem; }
.ehr-progress-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ehr-progress-filter .ehr2-select { min-width: 150px; }
.ehr-progress-filter-note { flex-basis: 100%; padding-top: 12px; border-top: 1px solid var(--ehr2-border); color: var(--ehr2-muted); font-size: .78rem; }
.ehr-progress-filter-note i { margin-right: 6px; color: var(--ehr2-primary); }
.ehr-progress-stat { height: 100%; padding: 18px 20px; display: flex; align-items: center; gap: 14px; background: var(--ehr2-card); border: 1px solid var(--ehr2-border); border-top: 3px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); transition: transform var(--ehr2-transition), box-shadow var(--ehr2-transition); }
.ehr-progress-stat:hover { transform: translateY(-2px); box-shadow: var(--ehr2-shadow-md); }
.ehr-progress-stat-icon { width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; background: var(--ehr2-primary-lt); color: var(--ehr2-primary); font-size: 1.1rem; }
.ehr-progress-stat-info { border-top-color: var(--ehr2-info); }
.ehr-progress-stat-info .ehr-progress-stat-icon { color: var(--ehr2-info); background: var(--ehr2-info-lt); }
.ehr-progress-stat-success { border-top-color: var(--ehr2-success); }
.ehr-progress-stat-success .ehr-progress-stat-icon { color: var(--ehr2-success); background: var(--ehr2-success-lt); }
.ehr-progress-stat-warning { border-top-color: var(--ehr2-warning); }
.ehr-progress-stat-warning .ehr-progress-stat-icon { color: #92580a; background: var(--ehr2-warning-lt); }
.ehr-progress-stat-suffix { font-size: .875rem; color: var(--ehr2-muted); }
.ehr-progress-page canvas { max-height: 360px; }

.ehr-audit-selector { max-width: 660px; }
.ehr-audit-programs { min-height: 26px; }
.ehr-audit-program-filter { max-width: 320px; }
.ehr-audit-validation { display: none; color: #92580a; font-size: .78rem; }
.ehr-audit-binder-page .card { margin-bottom: 20px; overflow: hidden; border-color: var(--ehr2-border); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); }
.ehr-audit-binder-page .card-header { padding: 16px 20px; background: var(--ehr2-card); border-bottom-color: var(--ehr2-border); border-left: 4px solid var(--ehr2-primary); }
.ehr-audit-binder-page .card-header h5 { margin: 0; color: var(--ehr2-text); font-size: .95rem; font-weight: 700; }
.ehr-audit-binder-page .card-header h5 i { margin-right: 7px; color: var(--ehr2-primary); }
.ehr2-page .ehr-audit-binder-page .ab-section-title { color: var(--ehr2-text); border-bottom-color: var(--ehr2-primary); }
.ehr2-page .ehr-audit-binder-page .ab-section-title i { color: var(--ehr2-primary); }
.ehr2-page .ehr-audit-binder-page .ab-label,
.ehr2-page .ehr-audit-binder-page .ab-empty { color: var(--ehr2-muted); }
.ehr2-page .ehr-audit-binder-page .ab-value { color: var(--ehr2-text); }
.ehr2-page .ehr-audit-binder-page .ab-goal-box,
.ehr2-page .ehr-audit-binder-page .ab-plan-box,
.ehr2-page .ehr-audit-binder-page .ab-stat-box { border-color: var(--ehr2-border); background: var(--color-surface-alt); }
.ehr2-page .ehr-audit-binder-page .ab-goal-domain { color: var(--ehr2-primary); background: var(--ehr2-primary-lt); }
.ehr2-page .ehr-audit-binder-page .ab-stat-number { color: var(--ehr2-primary); }
.ehr-audit-binder-page .table-responsive { border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); }
.ehr-audit-binder-page .table thead th { background: var(--color-surface-alt); color: var(--ehr2-muted); }
.ehr-audit-binder-page .table tbody tr:hover { background: var(--ehr2-primary-lighter); }

@media (max-width: 576px) {
  .ehr-progress-hero, .ehr-audit-hero { padding: 18px; align-items: flex-start; }
  .ehr-progress-hero-icon, .ehr-audit-hero-icon { width: 40px; height: 40px; }
  .ehr-progress-filter { width: 100%; align-items: flex-start; flex-direction: column; }
  .ehr-progress-filter .ehr2-select { width: 100%; }
  .ehr-audit-program-filter { max-width: none; }
}

/* =============================================================================
   AI Operational Assistant
   ============================================================================= */
.ehr2-ai-shell { width: 100%; max-width: 1480px; margin: 0 auto; }
.ehr2-ai-hero { margin-bottom: 20px; padding: 24px; background: linear-gradient(135deg, var(--ehr2-card) 65%, var(--ehr2-primary-lt)); border: 1px solid var(--ehr2-border); border-left: 5px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); }
.ehr2-ai-hero-icon { width: 50px; height: 50px; display: grid; place-items: center; flex-shrink: 0; border-radius: 13px; background: var(--ehr2-primary-lt); color: var(--ehr2-primary); font-size: 1.35rem; }
.ehr2-ai-stat { height: 100%; min-height: 92px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; background: var(--ehr2-card); border: 1px solid var(--ehr2-border); border-top: 3px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); transition: transform var(--ehr2-transition), box-shadow var(--ehr2-transition); }
.ehr2-ai-stat:hover { transform: translateY(-2px); box-shadow: var(--ehr2-shadow-md); }
.ehr2-ai-stat.is-info { border-top-color: var(--ehr2-info); }
.ehr2-ai-stat.is-success { border-top-color: var(--ehr2-success); }
.ehr2-ai-stat.is-warning { border-top-color: var(--ehr2-warning); }
.ehr2-ai-stat-value { color: var(--ehr2-text); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.ehr2-ai-stat-label { margin-top: 4px; color: var(--ehr2-muted); font-size: .75rem; }
.ehr2-ai-chat { min-height: 360px; max-height: 520px; overflow-y: auto; padding: 18px; background: var(--color-surface-alt); border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); scroll-behavior: smooth; }
.ehr2-ai-message { width: fit-content; max-width: 86%; margin-bottom: 10px; padding: 11px 14px; border-radius: 12px; color: var(--ehr2-text); font-size: .86rem; line-height: 1.55; white-space: pre-wrap; }
.ehr2-ai-message.is-question { margin-left: auto; background: var(--ehr2-primary); color: #fff; border-bottom-right-radius: 4px; }
.ehr2-ai-message.is-answer { margin-right: auto; background: var(--ehr2-card); border: 1px solid var(--ehr2-border); border-bottom-left-radius: 4px; box-shadow: var(--ehr2-shadow); }
.ehr2-ai-loading { display: none; align-items: center; gap: 8px; padding: 10px 12px; color: var(--ehr2-muted); font-size: .8rem; background: var(--ehr2-primary-lighter); border-radius: var(--ehr2-radius-sm); }
.ehr2-ai-loading.is-active { display: flex; }
.ehr2-ai-suggestion { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); background: var(--ehr2-card); color: var(--ehr2-text); font-size: .82rem; line-height: 1.4; transition: background var(--ehr2-transition), border-color var(--ehr2-transition), color var(--ehr2-transition); }
.ehr2-ai-suggestion:hover { background: var(--ehr2-primary-lt); border-color: var(--ehr2-primary); color: var(--ehr2-primary); }
.ehr2-ai-suggestion:focus-visible { outline: 2px solid var(--ehr2-primary); outline-offset: 2px; }

@media (max-width: 767.98px) {
  .ehr2-ai-hero { padding: 18px; }
  .ehr2-ai-hero .d-flex { align-items: flex-start !important; }
  .ehr2-ai-hero-icon { width: 42px; height: 42px; }
  .ehr2-ai-chat { min-height: 300px; max-height: 440px; }
  .ehr2-ai-message { max-width: 94%; }
}

/* =============================================================================
   Staff directory, profile, and HR compliance
   ============================================================================= */
.ehr2-staff-page {
  --ehr-primary: var(--ehr2-primary); --ehr-primary-dk: var(--ehr2-primary-dk); --ehr-primary-lt: var(--ehr2-primary-lt);
  --ehr-success: var(--ehr2-success); --ehr-success-lt: var(--ehr2-success-lt); --ehr-warning: var(--ehr2-warning); --ehr-warning-lt: var(--ehr2-warning-lt);
  --ehr-danger: var(--ehr2-danger); --ehr-danger-lt: var(--ehr2-danger-lt); --ehr-info: var(--ehr2-info); --ehr-info-lt: var(--ehr2-info-lt);
  --ehr-border: var(--ehr2-border); --ehr-text: var(--ehr2-text); --ehr-muted: var(--ehr2-muted); --ehr-shadow: var(--ehr2-shadow);
  width: 100%; max-width: 1480px; margin: 0 auto;
}
.ehr2-staff-hero,
.ehr2-staff-page .ehr-profile-header { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px !important; padding: 22px 24px; background: linear-gradient(135deg, var(--ehr2-card) 65%, var(--ehr2-primary-lt)); border: 1px solid var(--ehr2-border); border-left: 5px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); }
.ehr2-staff-hero-icon,
.ehr2-staff-page .ehr-avatar { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: var(--ehr2-primary-lt); color: var(--ehr2-primary); font-size: 1.25rem; box-shadow: none; }
.ehr2-staff-page .ehr-profile-meta { flex: 1; min-width: 0; }
.ehr2-staff-page .ehr-profile-name { color: var(--ehr2-text); font-size: 1.3rem; font-weight: 700; }
.ehr2-staff-page .ehr-profile-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.ehr2-staff-page .ehr-profile-quick-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ehr2-staff-page .ehr-card { margin-bottom: 20px; overflow: hidden; background: var(--ehr2-card); border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); }
.ehr2-staff-page .ehr-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; background: var(--ehr2-card); border-bottom: 1px solid var(--ehr2-border); border-left: 4px solid var(--ehr2-primary); }
.ehr2-staff-page .ehr-card-title { margin: 0; color: var(--ehr2-text); font-size: .95rem; font-weight: 700; }
.ehr2-staff-page .ehr-card-title i { margin-right: 6px; color: var(--ehr2-primary); }
.ehr2-staff-page .ehr-card-body { padding: 20px; }
.ehr2-staff-page .ehr-card-body-flush { padding: 0; }
.ehr2-staff-page .ehr-form-group { margin-bottom: 14px; }
.ehr2-staff-page .ehr-label { display: block; margin-bottom: 6px; color: var(--ehr2-text); font-size: .8rem; font-weight: 600; }
.ehr2-staff-page .ehr-input,
.ehr2-staff-page .ehr-select,
.ehr2-staff-page .ehr-textarea { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); background: var(--ehr2-card); color: var(--ehr2-text); }
.ehr2-staff-page .ehr-input:focus,
.ehr2-staff-page .ehr-select:focus,
.ehr2-staff-page .ehr-textarea:focus { outline: none; border-color: var(--ehr2-primary); box-shadow: 0 0 0 .2rem var(--ehr2-primary-lt); }
.ehr2-staff-page .ehr-field-hint { color: var(--ehr2-muted); font-size: .76rem; }
.ehr-bs5 .ehr2-staff-page .btn-ehr-primary,
.ehr-bs5 .ehr2-staff-page .btn-ehr-secondary { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 16px; border: 2px solid transparent; border-radius: var(--ehr2-radius-sm); font-size: .82rem; font-weight: 600; text-decoration: none; }
.ehr-bs5 .ehr2-staff-page .btn-ehr-primary { background: var(--ehr2-primary); border-color: var(--ehr2-primary); color: #fff; }
.ehr-bs5 .ehr2-staff-page .btn-ehr-secondary { background: var(--ehr2-card); border-color: var(--ehr2-primary); color: var(--ehr2-primary); }
.ehr-bs5 .ehr2-staff-page .btn-ehr-secondary:hover { background: var(--ehr2-primary-lt); }
.ehr-bs5 .ehr2-staff-page .btn-ehr-sm { min-height: 34px; padding: 5px 12px; font-size: .78rem; }
.ehr2-staff-page .ehr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--ehr2-primary-lt); color: var(--ehr2-primary); font-size: .72rem; font-weight: 600; }
.ehr2-staff-page .ehr-badge-cred-ok,
.ehr2-staff-page .ehr-badge-enroll-enrolled { background: var(--ehr2-success-lt); color: #155a39; }
.ehr2-staff-page .ehr-badge-cred-expiring,
.ehr2-staff-page .ehr-badge-enroll-pending { background: var(--ehr2-warning-lt); color: #92580a; }
.ehr2-staff-page .ehr-badge-cred-expired,
.ehr2-staff-page .ehr-badge-cred-missing { background: var(--ehr2-danger-lt); color: var(--ehr2-danger); }
.ehr2-staff-page .ehr-table-wrapper { width: 100%; overflow-x: auto; }
.ehr2-staff-page .ehr-table { width: 100%; min-width: 900px; border-collapse: collapse; color: var(--ehr2-text); }
.ehr2-staff-page .ehr-table th { padding: 11px 14px; background: var(--color-surface-alt); border-bottom: 2px solid var(--ehr2-border); color: var(--ehr2-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.ehr2-staff-page .ehr-table td { padding: 12px 14px; border-bottom: 1px solid var(--ehr2-border); vertical-align: middle; font-size: .82rem; }
.ehr2-staff-page .ehr-table tbody tr:hover { background: var(--ehr2-primary-lighter); }
.ehr2-staff-page .ehr-table-actions { text-align: right; white-space: nowrap; }
.ehr2-staff-page .ehr-empty-state { padding: 40px 20px; text-align: center; color: var(--ehr2-muted); }
.ehr2-staff-page progress { overflow: hidden; border: 0; border-radius: 999px; background: var(--ehr2-border); accent-color: var(--ehr2-primary); }
.ehr2-staff-page .ehr-stat-number { color: var(--ehr2-primary); }
.ehr2-staff-page .ehr2-hr-stats .ehr-card { height: 100%; border-top: 3px solid var(--ehr2-primary); }
.ehr2-staff-page .ehr2-hr-stats .col-6:nth-child(2) .ehr-card { border-top-color: var(--ehr2-success); }
.ehr2-staff-page .ehr2-hr-stats .col-6:nth-child(3) .ehr-card { border-top-color: var(--ehr2-danger); }
.ehr2-staff-page .ehr2-hr-stats .col-6:nth-child(4) .ehr-card { border-top-color: var(--ehr2-warning); }
.ehr2-staff-page .ehr2-hr-stats .ehr-card-body > div:first-child { color: var(--ehr2-text) !important; font-size: 1.6rem !important; }

@media (max-width: 767.98px) {
  .ehr2-staff-hero, .ehr2-staff-page .ehr-profile-header { align-items: flex-start; padding: 18px; }
  .ehr2-staff-page .ehr-profile-quick-actions { width: 100%; }
  .ehr2-staff-page .ehr-profile-quick-actions a,
  .ehr2-staff-page .ehr-profile-quick-actions button { flex: 1 1 100%; justify-content: center; }
}

/* =============================================================================
   Billing suite: claims, denials, fee schedules, and service codes
   ============================================================================= */
.ehr2-billing-page {
  --ehr-primary: var(--ehr2-primary); --ehr-primary-dk: var(--ehr2-primary-dk); --ehr-primary-lt: var(--ehr2-primary-lt);
  --ehr-success: var(--ehr2-success); --ehr-success-lt: var(--ehr2-success-lt); --ehr-warning: var(--ehr2-warning); --ehr-warning-lt: var(--ehr2-warning-lt);
  --ehr-danger: var(--ehr2-danger); --ehr-danger-lt: var(--ehr2-danger-lt); --ehr-info: var(--ehr2-info); --ehr-info-lt: var(--ehr2-info-lt);
  --ehr-border: var(--ehr2-border); --ehr-text: var(--ehr2-text); --ehr-muted: var(--ehr2-muted); --ehr-card: var(--ehr2-card); --ehr-shadow: var(--ehr2-shadow);
  width: 100%; max-width: 1540px; margin: 0 auto;
}
.ehr2-billing-page .ehr-profile-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px !important; padding: 22px 24px; background: linear-gradient(135deg, var(--ehr2-card) 65%, var(--ehr2-primary-lt)); border: 1px solid var(--ehr2-border); border-left: 5px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); }
.ehr2-billing-page .ehr-avatar { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: var(--ehr2-primary-lt) !important; color: var(--ehr2-primary); box-shadow: none; }
.ehr2-billing-page .ehr-avatar i { color: var(--ehr2-primary) !important; font-size: 1.25rem !important; }
.ehr2-billing-page .ehr-profile-meta { min-width: 0; }
.ehr2-billing-page .ehr-profile-name { color: var(--ehr2-text); font-size: 1.3rem !important; font-weight: 700 !important; line-height: 1.25; }
.ehr2-billing-page .ehr-profile-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; color: var(--ehr2-muted) !important; font-size: .8rem; }
.ehr2-billing-page .ehr-profile-quick-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ehr-bs5 .ehr2-billing-page .btn-ehr-primary,
.ehr-bs5 .ehr2-billing-page .btn-ehr-secondary,
.ehr-bs5 .ehr2-billing-page .btn-ehr-success,
.ehr-bs5 .ehr2-billing-page .btn-ehr-danger,
.ehr-bs5 .ehr2-billing-page .btn-ehr-submit { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 18px; border: 2px solid transparent; border-radius: var(--ehr2-radius-sm) !important; font-size: .84rem; font-weight: 600; text-decoration: none; transition: var(--ehr2-transition); }
.ehr-bs5 .ehr2-billing-page .btn-ehr-primary,
.ehr-bs5 .ehr2-billing-page .btn-ehr-submit { background: var(--ehr2-primary) !important; border-color: var(--ehr2-primary) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(1,91,58,.25) !important; }
.ehr-bs5 .ehr2-billing-page .btn-ehr-primary:hover,
.ehr-bs5 .ehr2-billing-page .btn-ehr-submit:hover { background: var(--ehr2-primary-dk) !important; border-color: var(--ehr2-primary-dk) !important; box-shadow: 0 6px 16px rgba(1,91,58,.32) !important; }
.ehr-bs5 .ehr2-billing-page .btn-ehr-secondary { background: var(--ehr2-card); border-color: var(--ehr2-primary); color: var(--ehr2-primary); }
.ehr-bs5 .ehr2-billing-page .btn-ehr-secondary:hover { background: var(--ehr2-primary-lt); }
.ehr-bs5 .ehr2-billing-page .btn-ehr-success { background: var(--ehr2-success); border-color: var(--ehr2-success); color: #fff; }
.ehr-bs5 .ehr2-billing-page .btn-ehr-danger { background: #fff; border-color: var(--ehr2-danger); color: var(--ehr2-danger); }
.ehr-bs5 .ehr2-billing-page .btn-ehr-sm { min-height: 34px; padding: 5px 12px; font-size: .78rem; }
.ehr2-billing-page .ehr-card,
.ehr2-billing-page .ehr-detail-card { margin-bottom: 20px; overflow: hidden; background: var(--ehr2-card) !important; border: 1px solid var(--ehr2-border) !important; border-radius: var(--ehr2-radius) !important; box-shadow: var(--ehr2-shadow) !important; }
.ehr2-billing-page .ehr-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px !important; background: var(--ehr2-card); border-bottom: 1px solid var(--ehr2-border) !important; border-left: 4px solid var(--ehr2-primary); }
.ehr2-billing-page .ehr-card-title { margin: 0; color: var(--ehr2-text) !important; font-size: .95rem !important; font-weight: 700 !important; }
.ehr2-billing-page .ehr-card-title i { color: var(--ehr2-primary) !important; }
.ehr2-billing-page .ehr-card-body { padding: 20px !important; }
.ehr2-billing-page .ehr-alert { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--ehr2-radius-sm); font-size: .84rem; }
.ehr2-billing-page .ehr-alert-success { background: var(--ehr2-success-lt); color: #155a39; border: 1px solid #b9e3cd; }
.ehr2-billing-page .ehr-alert-danger { background: var(--ehr2-danger-lt); color: var(--ehr2-danger); border: 1px solid #f3c4c4; }
.ehr2-billing-page .ehr-alert-warning { background: var(--ehr2-warning-lt); color: #92580a; border: 1px solid #f0d8a3; }
.ehr2-billing-page .ehr-alert-close { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 1.2rem; }
.ehr2-billing-page .ehr-label { display: block; margin-bottom: 6px; color: var(--ehr2-text) !important; font-size: .8rem !important; font-weight: 600; }
.ehr2-billing-page .ehr-required { color: var(--ehr2-danger); }
.ehr2-billing-page .ehr-input,
.ehr2-billing-page .ehr-textarea,
.ehr2-billing-page .form-control,
.ehr2-billing-page .form-select { min-height: 42px; border-color: var(--ehr2-border); border-radius: var(--ehr2-radius-sm) !important; color: var(--ehr2-text); }
.ehr2-billing-page .ehr-input:focus,
.ehr2-billing-page .ehr-textarea:focus,
.ehr2-billing-page .form-control:focus,
.ehr2-billing-page .form-select:focus { border-color: var(--ehr2-primary) !important; box-shadow: 0 0 0 .2rem var(--ehr2-primary-lt) !important; }
.ehr2-billing-page .ehr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: .73rem; font-weight: 600; }
.ehr2-billing-page [class*="ehr-badge-claim-draft"],
.ehr2-billing-page [class*="ehr-badge-claim-voided"] { background: #f1f3f2; color: #51594f; }
.ehr2-billing-page [class*="ehr-badge-claim-submitted"],
.ehr2-billing-page [class*="ehr-badge-claim-pending"] { background: var(--ehr2-warning-lt); color: #92580a; }
.ehr2-billing-page [class*="ehr-badge-claim-paid"],
.ehr2-billing-page [class*="ehr-badge-line-paid"] { background: var(--ehr2-success-lt); color: #155a39; }
.ehr2-billing-page [class*="ehr-badge-claim-denied"],
.ehr2-billing-page [class*="ehr-badge-line-denied"] { background: var(--ehr2-danger-lt); color: var(--ehr2-danger); }
.ehr2-billing-page [class*="ehr-badge-appeal-filed"] { background: var(--ehr2-info-lt); color: #1d4ed8; }
.ehr2-billing-page [class*="ehr-badge-appeal-overturned"] { background: var(--ehr2-success-lt); color: #155a39; }
.ehr2-billing-page [class*="ehr-badge-appeal-upheld"] { background: var(--ehr2-danger-lt); color: var(--ehr2-danger); }
.ehr2-billing-page .table-responsive { width: 100%; overflow-x: auto; border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); }
.ehr2-billing-page .ehr-table,
.ehr2-billing-page .ehr-table-compact { width: 100% !important; min-width: 900px; border-collapse: collapse; color: var(--ehr2-text); }
.ehr2-billing-page .ehr-table th,
.ehr2-billing-page .ehr-table-compact th { padding: 11px 14px !important; color: var(--ehr2-muted) !important; background: var(--color-surface-alt) !important; border-bottom: 2px solid var(--ehr2-border) !important; font-size: .72rem !important; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.ehr2-billing-page .ehr-table td,
.ehr2-billing-page .ehr-table-compact td { padding: 12px 14px !important; color: var(--ehr2-text) !important; border-bottom: 1px solid var(--ehr2-border) !important; vertical-align: middle; }
.ehr2-billing-page .ehr-tr-hover:hover,
.ehr2-billing-page .ehr-table tbody tr:hover { background: var(--ehr2-primary-lighter) !important; }
.ehr2-billing-page .ehr-btn-action-view,
.ehr2-billing-page .ehr-btn-action-edit { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--ehr2-border) !important; border-radius: 50% !important; }
.ehr2-billing-page .ehr-btn-action-view { background: var(--ehr2-primary-lt) !important; color: var(--ehr2-primary) !important; }
.ehr2-billing-page .ehr-btn-action-edit { background: var(--ehr2-warning-lt) !important; color: #92580a !important; }
.ehr2-billing-page .ehr-detail-row { padding: 12px 0; border-bottom-color: var(--ehr2-border); }
.ehr2-billing-page .ehr-link { color: var(--ehr2-primary) !important; }
.ehr2-billing-page .ehr-aging-bucket { background: var(--color-surface-alt); border-color: var(--ehr2-border); }
.ehr2-billing-page .ehr-card-body { overflow-x: auto; }
.ehr2-billing-page .bg-icon-billed,
.ehr2-billing-page .bg-icon-winrate { background: var(--ehr2-primary-lt) !important; color: var(--ehr2-primary) !important; }
.ehr2-billing-page .bg-icon-paid,
.ehr2-billing-page .bg-icon-overturned { background: var(--ehr2-success-lt) !important; color: var(--ehr2-success) !important; }
.ehr2-billing-page .bg-icon-denied,
.ehr2-billing-page .bg-icon-open { background: var(--ehr2-danger-lt) !important; color: var(--ehr2-danger) !important; }
.ehr2-billing-page .bg-icon-pending,
.ehr2-billing-page .bg-icon-aging { background: var(--ehr2-warning-lt) !important; color: #92580a !important; }

@media (max-width: 767.98px) {
  .ehr2-billing-page .ehr-profile-header { align-items: flex-start; padding: 18px; }
  .ehr2-billing-page .ehr-profile-quick-actions { width: 100%; }
  .ehr2-billing-page .ehr-profile-quick-actions > * { flex: 1 1 100%; }
  .ehr2-billing-page .ehr-profile-quick-actions a,
  .ehr2-billing-page .ehr-profile-quick-actions button { width: 100%; justify-content: center; }
}

/* =============================================================================
   Authorizations page family
   ============================================================================= */
.ehr2-authorizations-page {
  --ehr-primary: var(--ehr2-primary); --ehr-primary-dk: var(--ehr2-primary-dk); --ehr-primary-lt: var(--ehr2-primary-lt);
  --ehr-success: var(--ehr2-success); --ehr-warning: var(--ehr2-warning); --ehr-danger: var(--ehr2-danger); --ehr-info: var(--ehr2-info);
  --ehr-border: var(--ehr2-border); --ehr-text: var(--ehr2-text); --ehr-muted: var(--ehr2-muted); --ehr-shadow: var(--ehr2-shadow);
  width: 100%; max-width: 1480px; margin: 0 auto;
}
.ehr2-authorizations-page .ehr-profile-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px !important; padding: 22px 24px; background: linear-gradient(135deg, var(--ehr2-card) 65%, var(--ehr2-primary-lt)); border: 1px solid var(--ehr2-border); border-left: 5px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); }
.ehr2-authorizations-page .ehr-avatar { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: var(--ehr2-primary-lt) !important; color: var(--ehr2-primary); box-shadow: none; }
.ehr2-authorizations-page .ehr-avatar i { color: var(--ehr2-primary) !important; font-size: 1.25rem !important; }
.ehr2-authorizations-page .ehr-profile-meta { min-width: 0; }
.ehr2-authorizations-page .ehr-profile-name { color: var(--ehr2-text); font-size: 1.3rem !important; font-weight: 700 !important; line-height: 1.25; }
.ehr2-authorizations-page .ehr-profile-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; color: var(--ehr2-muted) !important; font-size: .8rem; }
.ehr2-authorizations-page .ehr-profile-quick-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-primary,
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-secondary,
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-submit { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 18px; border: 2px solid transparent; border-radius: var(--ehr2-radius-sm) !important; font-size: .84rem; font-weight: 600; text-decoration: none; transition: var(--ehr2-transition); }
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-primary,
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-submit { background: var(--ehr2-primary) !important; border-color: var(--ehr2-primary) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(1,91,58,.25) !important; }
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-primary:hover,
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-submit:hover { background: var(--ehr2-primary-dk) !important; border-color: var(--ehr2-primary-dk) !important; box-shadow: 0 6px 16px rgba(1,91,58,.32) !important; }
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-secondary { background: var(--ehr2-card); border-color: var(--ehr2-primary); color: var(--ehr2-primary); }
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-secondary:hover { background: var(--ehr2-primary-lt); }
.ehr-bs5 .ehr2-authorizations-page .btn-ehr-sm { min-height: 34px; padding: 5px 12px; font-size: .78rem; }
.ehr2-authorizations-page .ehr-card,
.ehr2-authorizations-page .ehr-detail-card { margin-bottom: 20px; overflow: hidden; background: var(--ehr2-card) !important; border: 1px solid var(--ehr2-border) !important; border-radius: var(--ehr2-radius) !important; box-shadow: var(--ehr2-shadow) !important; }
.ehr2-authorizations-page .ehr-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px !important; background: var(--ehr2-card); border-bottom: 1px solid var(--ehr2-border) !important; border-left: 4px solid var(--ehr2-primary); }
.ehr2-authorizations-page .ehr-card-title { margin: 0; color: var(--ehr2-text) !important; font-size: .95rem !important; font-weight: 700 !important; }
.ehr2-authorizations-page .ehr-card-title i { color: var(--ehr2-primary) !important; }
.ehr2-authorizations-page .ehr-card-body { padding: 20px !important; }
.ehr2-authorizations-page .ehr-alert { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--ehr2-radius-sm); font-size: .84rem; }
.ehr2-authorizations-page .ehr-alert-success { background: var(--ehr2-success-lt); color: #155a39; border: 1px solid #b9e3cd; }
.ehr2-authorizations-page .ehr-alert-close { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 1.2rem; }
.ehr2-authorizations-page .ehr-label { display: block; margin-bottom: 6px; color: var(--ehr2-text) !important; font-size: .8rem !important; font-weight: 600; }
.ehr2-authorizations-page .ehr-required { color: var(--ehr2-danger); }
.ehr2-authorizations-page .ehr-input,
.ehr2-authorizations-page .ehr-textarea,
.ehr2-authorizations-page .form-control,
.ehr2-authorizations-page .form-select { min-height: 42px; border-color: var(--ehr2-border); border-radius: var(--ehr2-radius-sm) !important; color: var(--ehr2-text); }
.ehr2-authorizations-page .ehr-input:focus,
.ehr2-authorizations-page .ehr-textarea:focus,
.ehr2-authorizations-page .form-control:focus,
.ehr2-authorizations-page .form-select:focus { border-color: var(--ehr2-primary) !important; box-shadow: 0 0 0 .2rem var(--ehr2-primary-lt) !important; }
.ehr2-authorizations-page .ehr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: .73rem; font-weight: 600; }
.ehr2-authorizations-page .ehr-badge-auth-active { background: var(--ehr2-success-lt); color: #155a39; }
.ehr2-authorizations-page .ehr-badge-auth-pending { background: var(--ehr2-warning-lt); color: #92580a; }
.ehr2-authorizations-page .ehr-badge-auth-denied,
.ehr2-authorizations-page .ehr-badge-alert-critical,
.ehr2-authorizations-page .ehr-badge-cred-expired { background: var(--ehr2-danger-lt); color: var(--ehr2-danger); }
.ehr2-authorizations-page .ehr-badge-alert-warning { background: var(--ehr2-warning-lt); color: #92580a; }
.ehr2-authorizations-page .ehr-badge-alert-notice,
.ehr2-authorizations-page .ehr-badge-record-id { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); }
.ehr2-authorizations-page .table-responsive { overflow-x: auto; border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); }
.ehr2-authorizations-page .ehr-table-compact th { color: var(--ehr2-muted) !important; background: var(--color-surface-alt) !important; border-bottom-color: var(--ehr2-border) !important; }
.ehr2-authorizations-page .ehr-table-compact td { color: var(--ehr2-text) !important; border-bottom-color: var(--ehr2-border) !important; }
.ehr2-authorizations-page .ehr2-auth-table-wrapper { width: 100%; overflow-x: auto; border-radius: 0; }
.ehr2-authorizations-page .ehr2-auth-table { width: 100% !important; min-width: 1120px; table-layout: fixed; }
.ehr2-authorizations-page .ehr2-auth-table th,
.ehr2-authorizations-page .ehr2-auth-table td { padding: 12px 14px !important; overflow-wrap: anywhere; }
.ehr2-authorizations-page .ehr2-auth-table th { white-space: nowrap; }
.ehr2-authorizations-page .ehr2-auth-table td:nth-child(5),
.ehr2-authorizations-page .ehr2-auth-table td:nth-child(6),
.ehr2-authorizations-page .ehr2-auth-table td:nth-child(8),
.ehr2-authorizations-page .ehr2-auth-table td:nth-child(9) { white-space: nowrap; }
.ehr2-authorizations-page .ehr2-auth-col-patient { width: 17%; }
.ehr2-authorizations-page .ehr2-auth-col-payer { width: 14%; }
.ehr2-authorizations-page .ehr2-auth-col-number { width: 10%; }
.ehr2-authorizations-page .ehr2-auth-col-program { width: 10%; }
.ehr2-authorizations-page .ehr2-auth-col-units { width: 9%; }
.ehr2-authorizations-page .ehr2-auth-col-date { width: 11%; }
.ehr2-authorizations-page .ehr2-auth-col-expiry { width: 14%; }
.ehr2-authorizations-page .ehr2-auth-col-status { width: 9%; }
.ehr2-authorizations-page .ehr2-auth-col-actions { width: 88px; }
.ehr2-authorizations-page .ehr2-auth-table td:last-child { text-align: right; }
.ehr2-authorizations-page .ehr-tr-hover:hover { background: var(--ehr2-primary-lighter) !important; }
.ehr2-authorizations-page .ehr-btn-action-view { background: var(--ehr2-primary-lt) !important; color: var(--ehr2-primary) !important; }
.ehr2-authorizations-page .ehr-btn-action-edit { background: var(--ehr2-warning-lt) !important; color: #92580a !important; }
.ehr2-authorizations-page .ehr-detail-group { gap: 16px; }
.ehr2-authorizations-page .ehr-detail-row { padding: 12px 0; border-bottom-color: var(--ehr2-border); }
.ehr2-authorizations-page .ehr-link { color: var(--ehr2-primary) !important; }
.ehr2-authorizations-page .bg-icon-active,
.ehr2-authorizations-page .bg-icon-remaining { background: var(--ehr2-success-lt); color: var(--ehr2-success); }
.ehr2-authorizations-page .bg-icon-pending,
.ehr2-authorizations-page .bg-icon-authorized { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); }
.ehr2-authorizations-page .bg-icon-expiring-7,
.ehr2-authorizations-page .bg-icon-remaining-zero { background: var(--ehr2-danger-lt); color: var(--ehr2-danger); }
.ehr2-authorizations-page .bg-icon-expiring-30,
.ehr2-authorizations-page .bg-icon-used { background: var(--ehr2-warning-lt); color: #92580a; }

@media (max-width: 767.98px) {
  .ehr2-authorizations-page .ehr-profile-header { align-items: flex-start; padding: 18px; }
  .ehr2-authorizations-page .ehr-profile-quick-actions { width: 100%; }
  .ehr2-authorizations-page .ehr-profile-quick-actions > * { flex: 1 1 100%; }
  .ehr2-authorizations-page .ehr-profile-quick-actions a,
  .ehr2-authorizations-page .ehr-profile-quick-actions button { width: 100%; justify-content: center; }
}

/* =============================================================================
   Appointments page family
   ============================================================================= */
.ehr2-appointments-page {
  --ehr-primary: var(--ehr2-primary);
  --ehr-primary-dk: var(--ehr2-primary-dk);
  --ehr-primary-lt: var(--ehr2-primary-lt);
  --ehr-success: var(--ehr2-success);
  --ehr-warning: var(--ehr2-warning);
  --ehr-danger: var(--ehr2-danger);
  --ehr-info: var(--ehr2-info);
  --ehr-border: var(--ehr2-border);
  --ehr-text: var(--ehr2-text);
  --ehr-muted: var(--ehr2-muted);
  --ehr-shadow: var(--ehr2-shadow);
  --ehr-transition: var(--ehr2-transition);
  width: 100%; max-width: 1480px; margin: 0 auto;
}
.ehr2-appointments-page .ehr-profile-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px !important; padding: 22px 24px; background: linear-gradient(135deg, var(--ehr2-card) 65%, var(--ehr2-primary-lt)); border: 1px solid var(--ehr2-border); border-left: 5px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); }
.ehr2-appointments-page .ehr-avatar { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: var(--ehr2-primary-lt) !important; color: var(--ehr2-primary); box-shadow: none; }
.ehr2-appointments-page .ehr-avatar i { color: var(--ehr2-primary) !important; font-size: 1.25rem !important; }
.ehr2-appointments-page .ehr-profile-meta { min-width: 0; }
.ehr2-appointments-page .ehr-profile-name { color: var(--ehr2-text); font-size: 1.3rem !important; font-weight: 700 !important; line-height: 1.25; }
.ehr2-appointments-page .ehr-profile-sub { margin-top: 4px; color: var(--ehr2-muted) !important; font-size: .8rem; }
.ehr2-appointments-page .ehr-profile-quick-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ehr-bs5 .ehr2-appointments-page .btn-ehr-primary,
.ehr-bs5 .ehr2-appointments-page .btn-ehr-secondary,
.ehr-bs5 .ehr2-appointments-page .btn-ehr-danger,
.ehr-bs5 .ehr2-appointments-page .btn-ehr-submit { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 18px; border: 2px solid transparent; border-radius: var(--ehr2-radius-sm) !important; font-size: .84rem; font-weight: 600; text-decoration: none; transition: var(--ehr2-transition); }
.ehr-bs5 .ehr2-appointments-page .btn-ehr-primary,
.ehr-bs5 .ehr2-appointments-page .btn-ehr-submit { background: var(--ehr2-primary) !important; border-color: var(--ehr2-primary) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(1,91,58,.25) !important; }
.ehr-bs5 .ehr2-appointments-page .btn-ehr-primary:hover,
.ehr-bs5 .ehr2-appointments-page .btn-ehr-submit:hover { background: var(--ehr2-primary-dk) !important; border-color: var(--ehr2-primary-dk) !important; box-shadow: 0 6px 16px rgba(1,91,58,.32) !important; }
.ehr-bs5 .ehr2-appointments-page .btn-ehr-secondary { background: var(--ehr2-card); border-color: var(--ehr2-primary); color: var(--ehr2-primary); }
.ehr-bs5 .ehr2-appointments-page .btn-ehr-secondary:hover { background: var(--ehr2-primary-lt); }
.ehr-bs5 .ehr2-appointments-page .btn-ehr-sm { min-height: 34px; padding: 5px 12px; font-size: .78rem; }
.ehr2-appointments-page .ehr-card { margin-bottom: 20px; overflow: hidden; background: var(--ehr2-card); border: 1px solid var(--ehr2-border) !important; border-radius: var(--ehr2-radius) !important; box-shadow: var(--ehr2-shadow) !important; }
.ehr2-appointments-page .ehr-card-header,
.ehr2-appointments-page .ehr-detail-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--ehr2-card); border-bottom: 1px solid var(--ehr2-border); border-left: 4px solid var(--ehr2-primary); }
.ehr2-appointments-page .ehr-card-title { margin: 0; color: var(--ehr2-text) !important; font-size: .95rem !important; font-weight: 700 !important; }
.ehr2-appointments-page .ehr-card-title i { color: var(--ehr2-primary) !important; }
.ehr2-appointments-page .ehr-card-body { padding: 20px !important; }
.ehr2-appointments-page .ehr-alert { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--ehr2-radius-sm); font-size: .84rem; }
.ehr2-appointments-page .ehr-alert-success { background: var(--ehr2-success-lt); color: #155a39; border: 1px solid #b9e3cd; }
.ehr2-appointments-page .ehr-alert-close { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 1.2rem; }
.ehr2-appointments-page .ehr-form-group { margin-bottom: 4px; }
.ehr2-appointments-page .ehr-label,
.ehr2-appointments-page .ehr-label-bold { display: block; margin-bottom: 6px; color: var(--ehr2-text) !important; font-size: .8rem !important; font-weight: 600; letter-spacing: .02em; text-transform: none; }
.ehr2-appointments-page .ehr-required { color: var(--ehr2-danger); }
.ehr2-appointments-page .form-control,
.ehr2-appointments-page .form-select { min-height: 42px; border-color: var(--ehr2-border); border-radius: var(--ehr2-radius-sm) !important; color: var(--ehr2-text); }
.ehr2-appointments-page .form-control:focus,
.ehr2-appointments-page .form-select:focus { border-color: var(--ehr2-primary) !important; box-shadow: 0 0 0 .2rem var(--ehr2-primary-lt) !important; }
.ehr2-appointments-page .ehr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px !important; font-size: .73rem !important; font-weight: 600; }
.ehr2-appointments-page .ehr-badge-appt-status-scheduled { background: var(--ehr2-info-lt); color: #1d4ed8; }
.ehr2-appointments-page .ehr-badge-appt-status-completed { background: var(--ehr2-success-lt); color: #155a39; }
.ehr2-appointments-page .ehr-badge-appt-status-no_show,
.ehr2-appointments-page .ehr-badge-appt-status-cancelled { background: var(--ehr2-danger-lt); color: var(--ehr2-danger); }
.ehr2-appointments-page .ehr-badge-info,
.ehr2-appointments-page .ehr-badge-appt-individual,
.ehr2-appointments-page .ehr-badge-appt-group,
.ehr2-appointments-page .ehr-badge-appt-field_visit,
.ehr2-appointments-page .ehr-badge-appt-telehealth { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); }
.ehr2-appointments-page .table-responsive { overflow-x: auto; border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); }
.ehr2-appointments-page .ehr-table-compact th { color: var(--ehr2-muted) !important; background: var(--color-surface-alt) !important; border-bottom-color: var(--ehr2-border) !important; }
.ehr2-appointments-page .ehr-table-compact td { color: var(--ehr2-text) !important; border-bottom-color: var(--ehr2-border) !important; }
.ehr2-appointments-page .ehr-tr-hover:hover { background: var(--ehr2-primary-lighter) !important; }
.ehr2-appointments-page .ehr-btn-action-view { background: var(--ehr2-primary-lt) !important; color: var(--ehr2-primary) !important; }
.ehr2-appointments-page .ehr-btn-action-view:hover { background: var(--ehr2-primary) !important; color: #fff !important; box-shadow: 0 4px 8px rgba(1,91,58,.2); }
.ehr2-appointments-page .ehr-btn-action-edit { background: var(--ehr2-warning-lt) !important; color: #92580a !important; }
.ehr2-appointments-page .ehr-btn-action-noshow { background: var(--ehr2-danger-lt) !important; color: var(--ehr2-danger) !important; }
.ehr2-appointments-page .ehr-detail-item { height: 100%; padding: 14px; background: var(--color-surface-alt); border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); }
.ehr2-appointments-page .ehr-link { color: var(--ehr2-primary) !important; }

@media (max-width: 767.98px) {
  .ehr2-appointments-page .ehr-profile-header { align-items: flex-start; padding: 18px; }
  .ehr2-appointments-page .ehr-profile-quick-actions { width: 100%; }
  .ehr2-appointments-page .ehr-profile-quick-actions > * { flex: 1 1 100%; }
  .ehr2-appointments-page .ehr-profile-quick-actions a,
  .ehr2-appointments-page .ehr-profile-quick-actions button { width: 100%; justify-content: center; }
}

/* =============================================================================
   Scheduling Calendar
   ============================================================================= */
.ehr2-calendar-page { width: 100%; max-width: 1600px; margin: 0 auto; }
.ehr2-calendar-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; padding: 22px 24px; background: linear-gradient(135deg, var(--ehr2-card) 65%, var(--ehr2-primary-lt)); border: 1px solid var(--ehr2-border); border-left: 5px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); }
.ehr2-calendar-hero-icon { width: 48px; height: 48px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; background: var(--ehr2-primary-lt); color: var(--ehr2-primary); font-size: 1.3rem; }
.ehr2-calendar-actions { flex-wrap: wrap; }
.ehr2-calendar-page .nd-cal-card { margin-top: 0; }
.ehr2-calendar-page .btn-nd-icon { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); background: var(--ehr2-card); color: var(--ehr2-text); }
.ehr2-calendar-page .btn-nd-ghost { min-height: 44px; padding: 8px 14px; border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); background: var(--ehr2-card); color: var(--ehr2-text); font-weight: 600; }
.ehr2-calendar-page .btn-nd-ghost:hover,
.ehr2-calendar-page .btn-nd-icon:hover { background: var(--ehr2-primary-lt); border-color: var(--ehr2-primary); color: var(--ehr2-primary); }
.ehr2-calendar-page .nd-cal-view-tab { min-height: 40px; padding: 7px 14px; border-radius: var(--ehr2-radius-sm); }
.ehr2-calendar-page .nd-cal-view-tab.active { background: var(--ehr2-primary); color: #fff; font-weight: 600; }
.ehr2-calendar-page .nd-cal-chip-dot-all { background: var(--ehr2-muted); }

@media (max-width: 767.98px) {
  .ehr2-calendar-hero { align-items: flex-start; padding: 18px; }
  .ehr2-calendar-actions { width: 100%; }
  .ehr2-calendar-actions .btn-ehr2-primary,
  .ehr2-calendar-actions .btn-ehr2-secondary { flex: 1 1 100%; justify-content: center; }
}

.ehr2-page * { font-family: var(--ehr2-font); }
.ehr2-page-bg { background: var(--ehr2-surface); min-height: 100vh; }

/* =============================================================================
   GENUINE BOOTSTRAP 5 VARIABLE OVERRIDES (EHR_UI_REDESIGN.md Section 1)
   Scoped under .ehr-bs5 — the real, uncorrupted Bootstrap 5 bundle
   (css/ehr-bs5-scoped.css) that ehr2LayoutMaster loads instead of the
   Vuexy-recompiled-purple css/core.css. Any page using plain .btn-primary /
   .btn-outline-primary / form focus rings picks up green automatically —
   no !important needed since core.css is no longer in the cascade for
   pages on this layout.
   ============================================================================= */
.ehr-bs5 {
  --bs-primary: #015B3A;
  --bs-primary-rgb: 1, 91, 58;
  /* Bootstrap 5.3's actual link rule renders from the *-rgb variables
     (color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1))) —
     the plain hex variables below are kept for anything that reads them
     directly, but the rgb ones are what actually paints <a> tags green. */
  --bs-link-color: #015B3A;
  --bs-link-color-rgb: 1, 91, 58;
  --bs-link-hover-color: #013E28;
  --bs-link-hover-color-rgb: 1, 62, 40;
  /* Bootstrap's "subtle"/"emphasis" utility variants (.bg-primary-subtle,
     .text-primary-emphasis — used for tag-style badges) read from their own
     separate variables, not from --bs-primary. Without these, those classes
     silently render Bootstrap's stock blue even with everything else green. */
  --bs-primary-bg-subtle: #E6F2EC;
  --bs-primary-text-emphasis: #013E28;
  --bs-primary-border-subtle: #cfe3da;
}
.ehr-bs5 .btn-primary {
  --bs-btn-bg: #015B3A;
  --bs-btn-border-color: #015B3A;
  --bs-btn-hover-bg: #013E28;
  --bs-btn-hover-border-color: #013E28;
  --bs-btn-active-bg: #012B1C;
  --bs-btn-active-border-color: #012B1C;
  --bs-btn-disabled-bg: #015B3A;
  --bs-btn-disabled-border-color: #015B3A;
  --bs-btn-focus-shadow-rgb: 1, 91, 58;
}
.ehr-bs5 .btn-outline-primary {
  --bs-btn-color: #015B3A;
  --bs-btn-border-color: #015B3A;
  --bs-btn-hover-bg: #015B3A;
  --bs-btn-hover-border-color: #015B3A;
  --bs-btn-active-bg: #015B3A;
  --bs-btn-active-border-color: #015B3A;
  --bs-btn-disabled-color: #015B3A;
  --bs-btn-disabled-border-color: #015B3A;
  --bs-btn-focus-shadow-rgb: 1, 91, 58;
}
.ehr-bs5 .form-control:focus,
.ehr-bs5 .form-select:focus {
  border-color: #6fae96;
  box-shadow: 0 0 0 .25rem rgba(1, 91, 58, .18);
}

/* =============================================================================
   PATIENT PROFILE HEADER
   ============================================================================= */
.ehr2-profile-header {
  background: var(--ehr2-card);
  border-radius: var(--ehr2-radius);
  box-shadow: var(--ehr2-shadow);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-left: 5px solid var(--ehr2-primary);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.ehr2-profile-header::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 100%;
  background: linear-gradient(135deg, transparent 60%, var(--ehr2-primary-lt) 100%);
  pointer-events: none;
}

.ehr2-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ehr2-primary), var(--ehr2-primary-dk));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(1,91,58,.35);
}
.ehr2-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

.ehr2-profile-meta { flex: 1; min-width: 0; }
.ehr2-profile-name {
  font-size: 1.2rem; font-weight: 700; color: var(--ehr2-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ehr2-profile-name small { font-size: .85rem; font-weight: 400; color: var(--ehr2-muted); margin-left: 6px; }
.ehr2-profile-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ehr2-profile-dob { font-size: .8rem; color: var(--ehr2-muted); margin-top: 2px; }
.ehr2-profile-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* =============================================================================
   BADGES
   ============================================================================= */
.ehr2-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px;
  font-size: .73rem; font-weight: 600; letter-spacing: .3px;
  white-space: nowrap; line-height: 1.4;
}
.ehr2-badge-record-id { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); border: 1px solid #cfe3da; }
.ehr2-badge-program    { background: var(--color-info-bg); color: #1e4f9c; border: 1px solid #c7d9f7; }

.ehr2-badge-risk-low      { background: var(--ehr2-success-lt); color: var(--ehr2-success); border: 1px solid #b9e3cd; }
.ehr2-badge-risk-moderate { background: var(--ehr2-info-lt);    color: #1d4ed8;             border: 1px solid #c7d9f7; }
.ehr2-badge-risk-high     { background: var(--ehr2-warning-lt); color: #92580a;             border: 1px solid #f0d8a3; }
.ehr2-badge-risk-critical { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger);  border: 1px solid #f3c4c4; }

.ehr2-badge-status-referral   { background: #f1f3f2; color: #51594f; border: 1px solid #dfe4e0; }
.ehr2-badge-status-intake     { background: var(--ehr2-warning-lt); color: #92580a; border: 1px solid #f0d8a3; }
.ehr2-badge-status-active     { background: var(--ehr2-success-lt); color: #155a39; border: 1px solid #b9e3cd; }
.ehr2-badge-status-discharged { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger); border: 1px solid #f3c4c4; }
.ehr2-badge-status-inactive   { background: #ececec; color: #424242; border: 1px solid #cfd2cf; }
.ehr2-badge-status-waitlist   { background: var(--ehr2-info-lt); color: #1d4ed8; border: 1px solid #c7d9f7; }

.ehr2-badge-dx-primary     { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger); border: 1px solid #f3c4c4; }
.ehr2-badge-dx-secondary   { background: var(--ehr2-warning-lt); color: #92580a;            border: 1px solid #f0d8a3; }
.ehr2-badge-dx-comorbidity { background: var(--ehr2-success-lt); color: #155a39;            border: 1px solid #b9e3cd; }

.ehr2-badge-ins-primary   { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); border: 1px solid #cfe3da; }
.ehr2-badge-ins-secondary { background: var(--color-info-bg);   color: #1e4f9c;             border: 1px solid #c7d9f7; }
.ehr2-badge-ins-tertiary  { background: #f3e8ff;                color: #6b21a8;             border: 1px solid #e1bee7; }

.ehr2-badge-active   { background: var(--ehr2-success-lt); color: #155a39; border: 1px solid #b9e3cd; }
.ehr2-badge-inactive { background: #ececec;               color: #424242; border: 1px solid #cfd2cf; }
.ehr2-badge-info     { background: var(--ehr2-info-lt);   color: var(--ehr2-info); border: 1px solid #c7d9f7; }
.ehr2-badge-stopped  { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger); border: 1px solid #f3c4c4; }

.ehr2-badge-plan-draft        { background: #f1f3f2; color: #51594f; border: 1px solid #dfe4e0; }
.ehr2-badge-plan-active       { background: var(--ehr2-success-lt); color: #155a39; border: 1px solid #b9e3cd; }
.ehr2-badge-plan-under_review { background: var(--ehr2-warning-lt); color: #92580a; border: 1px solid #f0d8a3; }
.ehr2-badge-plan-completed    { background: var(--ehr2-info-lt);    color: #1d4ed8; border: 1px solid #c7d9f7; }
.ehr2-badge-plan-discontinued { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger); border: 1px solid #f3c4c4; }

.ehr2-badge-review-pending      { background: #f1f3f2;             color: #51594f;             border: 1px solid #dfe4e0; }
.ehr2-badge-review-approved     { background: var(--ehr2-success-lt); color: var(--ehr2-success); border: 1px solid #b9e3cd; }
.ehr2-badge-review-returned     { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger);  border: 1px solid #f3c4c4; }
.ehr2-badge-review-not_approved { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger);  border: 1px solid #f3c4c4; }
.ehr2-badge-review-flagged      { background: var(--ehr2-warning-lt); color: #92580a;             border: 1px solid #f0d8a3; }
.ehr2-badge-review-non_billable { background: var(--ehr2-warning-lt); color: #92580a;             border: 1px solid #f0d8a3; }
.ehr2-badge-review-billed       { background: var(--ehr2-primary-lt); color: var(--ehr2-primary);  border: 1px solid #cfe3da; }

.ehr2-badge-readiness-ready             { background: var(--ehr2-success-lt); color: var(--ehr2-success); border: 1px solid #b9e3cd; }
.ehr2-badge-readiness-needs_correction  { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger);  border: 1px solid #f3c4c4; }
.ehr2-badge-readiness-supervisor_review { background: var(--ehr2-warning-lt); color: #92580a;             border: 1px solid #f0d8a3; }
.ehr2-badge-readiness-not_billable      { background: #f1f3f2;               color: #51594f;             border: 1px solid #dfe4e0; }

.ehr2-readiness-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ehr2-readiness-checklist li { font-size: .78rem; padding: 6px 10px; border-radius: 6px; border-left: 3px solid transparent; display: flex; align-items: center; gap: 8px; }
.ehr2-readiness-checklist li.ehr2-check-pass { background: var(--ehr2-success-lt); color: var(--ehr2-success); border-left-color: var(--ehr2-success); }
.ehr2-readiness-checklist li.ehr2-check-fail { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger);  border-left-color: var(--ehr2-danger); }

/* Supervisor QA — distinguishes a note just pushed into the review queue
   (via the note detail page's Submit button) from one that's been sitting
   pending for a while, so supervisors can prioritize the freshest work. */
.review-status-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ehr2-badge-recently-submitted {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
  font-size: .68rem; font-weight: 700; letter-spacing: .2px; text-transform: uppercase;
  padding: 2px 8px 2px 6px; border-radius: 999px; line-height: 1.6;
}
.ehr2-badge-recently-submitted .recent-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #f97316; flex-shrink: 0;
  animation: ehr2RecentDotPulse 1.8s ease-in-out infinite;
}
@keyframes ehr2RecentDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, .55); }
  70%  { box-shadow: 0 0 0 5px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

/* Services page — one color per record type so the mixed feed scans quickly. */
.ehr2-type-badge { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:3px 9px; border-radius:6px; white-space:nowrap; display:inline-block; }
.ehr2-type-badge-diagnosis      { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger); }
.ehr2-type-badge-program        { background: var(--ehr2-info-lt);    color: #1d4ed8; }
.ehr2-type-badge-insurance      { background: var(--ehr2-warning-lt); color: #92580a; }
.ehr2-type-badge-consent-form   { background: #f1e9fb; color: #7c3aed; }
.ehr2-type-badge-screener       { background: #e0f2fe; color: #0369a1; }
.ehr2-type-badge-assessment     { background: #e0f2fe; color: #0369a1; }
.ehr2-type-badge-treatment-plan { background: var(--ehr2-success-lt); color: var(--ehr2-success); }
.ehr2-type-badge-intervention   { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); }
.ehr2-type-badge-progress-note  { background: #fce7f3; color: #be185d; }

/* Quality / readiness score pill (Supervisor & QA dashboard) */
.ehr2-quality-score { font-weight: 700; font-size: .9rem; padding: 3px 10px; border-radius: 999px; }
.ehr2-quality-score-high   { background: var(--ehr2-success-lt); color: var(--ehr2-success); border: 1px solid #b9e3cd; }
.ehr2-quality-score-medium { background: var(--ehr2-warning-lt); color: #92580a;            border: 1px solid #f0d8a3; }
.ehr2-quality-score-low    { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger);  border: 1px solid #f3c4c4; }

.ehr2-badge-progress-not_started { background: #f1f3f2;            color: #51594f;            border: 1px solid #dfe4e0; }
.ehr2-badge-progress-in_progress { background: var(--ehr2-info-lt); color: #1d4ed8;            border: 1px solid #c7d9f7; }
.ehr2-badge-progress-no_progress { background: var(--ehr2-danger-lt); color: var(--ehr2-danger); border: 1px solid #f3c4c4; }
.ehr2-badge-progress-minimal     { background: var(--ehr2-warning-lt); color: #92580a;          border: 1px solid #f0d8a3; }
.ehr2-badge-progress-moderate    { background: var(--ehr2-warning-lt); color: #92580a;          border: 1px solid #f0d8a3; }
.ehr2-badge-progress-significant { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); border: 1px solid #cfe3da; }
.ehr2-badge-progress-achieved    { background: var(--ehr2-success-lt); color: var(--ehr2-success); border: 1px solid #b9e3cd; }
.ehr2-badge-progress-regression  { background: var(--ehr2-danger-lt); color: var(--ehr2-danger);  border: 1px solid #f3c4c4; }

.ehr2-badge-sev-mild     { background: var(--ehr2-success-lt); color: #155a39; }
.ehr2-badge-sev-moderate { background: var(--ehr2-warning-lt); color: #92580a; }
.ehr2-badge-sev-severe   { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger); }
.ehr2-badge-sev-life     { background: #7a1538; color: #fff; }

.ehr2-badge-risk-large {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
  font-size: .75rem; font-weight: 700; border: 1px solid;
}
.ehr2-badge-risk-large.risk-low      { background: var(--ehr2-success-lt); color: #155a39; border-color: #b9e3cd; }
.ehr2-badge-risk-large.risk-moderate { background: var(--ehr2-warning-lt); color: #92580a; border-color: #f0d8a3; }
.ehr2-badge-risk-large.risk-high     { background: var(--ehr2-danger-lt);  color: #b91c1c; border-color: #f3c4c4; }
.ehr2-badge-risk-large.risk-critical { background: #ffe4e6; color: #e11d48; border-color: #fecdd3; }

/* =============================================================================
   LAYOUT: PROFILE — SIDENAV + CONTENT
   ============================================================================= */
.ehr2-profile-layout { display: flex; gap: 20px; align-items: flex-start; }

.ehr2-sidenav {
  width: 240px; flex-shrink: 0;
  background: var(--ehr2-card);
  border-radius: var(--ehr2-radius);
  box-shadow: var(--ehr2-shadow);
  overflow: hidden;
  position: sticky;
  top: 80px;
}
.ehr2-sidenav-label {
  font-size: .68rem; font-weight: 700; letter-spacing: 1px;
  color: var(--ehr2-muted); text-transform: uppercase;
  padding: 14px 16px 6px;
}
/* .ehr-bs5 prefix required — see the BUTTONS block comment above for why
   (these render as <a>, and a bare single-class selector loses to the
   genuine Bootstrap bundle's `.ehr-bs5 a{}` link-color rule). */
.ehr-bs5 .ehr2-sidenav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; min-height: 44px;
  color: var(--ehr2-text); text-decoration: none;
  font-size: .845rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: all var(--ehr2-transition);
  cursor: pointer;
  border-bottom: 1px solid var(--color-surface-alt);
}
.ehr-bs5 .ehr2-sidenav-item i { font-size: 1rem; color: var(--ehr2-muted); transition: color var(--ehr2-transition); width: 18px; text-align: center; }
.ehr-bs5 .ehr2-sidenav-item:hover { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); text-decoration: none; }
.ehr-bs5 .ehr2-sidenav-item:hover i { color: var(--ehr2-primary); }
.ehr-bs5 .ehr2-sidenav-item.active { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); border-left-color: var(--ehr2-primary); font-weight: 600; }
.ehr-bs5 .ehr2-sidenav-item.active i { color: var(--ehr2-primary); }

.ehr2-sidenav-count {
  margin-left: auto; background: var(--ehr2-border); color: var(--ehr2-muted);
  font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  min-width: 22px; text-align: center;
}
.ehr-bs5 .ehr2-sidenav-item.active .ehr2-sidenav-count { background: var(--ehr2-primary); color: #fff; }

.ehr-bs5 .ehr2-sidenav-item-locked { color: var(--ehr2-muted); opacity: .65; cursor: not-allowed; }
.ehr-bs5 .ehr2-sidenav-item-locked i { color: var(--ehr2-muted); }
.ehr-bs5 .ehr2-sidenav-item-locked:hover { background: var(--color-surface-alt); color: var(--ehr2-muted); }
.ehr-bs5 .ehr2-sidenav-item-locked:hover i { color: var(--ehr2-muted); }

.ehr2-profile-content { flex: 1; min-width: 0; }

.ehr2-tab-panel { display: none; }
.ehr2-tab-panel.active { display: block; }

/* =============================================================================
   CARDS
   ============================================================================= */
.ehr2-card {
  background: var(--ehr2-card);
  border-radius: var(--ehr2-radius);
  box-shadow: var(--ehr2-shadow);
  border: 1px solid var(--ehr2-border);
  overflow: hidden;
  margin-bottom: 20px;
}
.ehr2-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--ehr2-border);
  background: var(--ehr2-card); gap: 12px; flex-wrap: wrap;
}
.ehr2-card-title {
  font-size: .95rem; font-weight: 700; color: var(--ehr2-text);
  margin: 0; display: flex; align-items: center; gap: 8px;
}
.ehr2-card-title i { color: var(--ehr2-primary); font-size: 1rem; }
.ehr2-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ehr2-card-body { padding: 20px; }
.ehr2-card-body-flush { padding: 0; }

/* =============================================================================
   BUTTONS — themed via Bootstrap's --bs-btn-* variable contract
   (EHR_UI_REDESIGN.md Section 5.2)

   Every selector below is prefixed `.ehr-bs5` (always present on <body> —
   see ehr2LayoutMaster) even though that looks redundant for a button that's
   a real <button> element. It's not redundant for the ones rendered as <a>
   (most of them, throughout the app): the genuine Bootstrap bundle's base
   rule is `.ehr-bs5 a { color: ...; text-decoration: underline; }` — one
   class + one element, specificity (0,1,1). A bare `.btn-ehr2-primary`
   selector is only (0,1,0), so without the `.ehr-bs5` prefix here, every
   anchor-rendered button would lose its color/no-underline to that link
   rule. Don't drop this prefix when adding new variants.
   ============================================================================= */
.ehr-bs5 .btn-ehr2-primary,
.ehr-bs5 .btn-ehr2-secondary,
.ehr-bs5 .btn-ehr2-success,
.ehr-bs5 .btn-ehr2-danger,
.ehr-bs5 .btn-ehr2-ghost,
.ehr-bs5 .btn-ehr2-warning,
.ehr-bs5 .btn-ehr2-info,
.ehr-bs5 .btn-ehr2-icon {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--ehr2-radius-sm);
  font-family: var(--ehr2-font); font-weight: 600; font-size: .845rem;
  padding: 8px 20px; cursor: pointer;
  transition: all var(--ehr2-transition);
  border: 2px solid transparent; line-height: 1.4;
  text-decoration: none; white-space: nowrap;
  min-height: 38px;
}
.ehr-bs5 .btn-ehr2-primary { background: var(--ehr2-primary); color: #fff; border-color: var(--ehr2-primary); box-shadow: 0 4px 12px rgba(1,91,58,.25); }
.ehr-bs5 .btn-ehr2-primary:hover { background: var(--ehr2-primary-dk); border-color: var(--ehr2-primary-dk); color: #fff; box-shadow: 0 6px 16px rgba(1,91,58,.32); transform: translateY(-1px); }

.ehr-bs5 .btn-ehr2-secondary { background: #fff; color: var(--ehr2-primary); border-color: var(--ehr2-primary); }
.ehr-bs5 .btn-ehr2-secondary:hover { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); text-decoration: none; }

.ehr-bs5 .btn-ehr2-success { background: var(--ehr2-success); color: #fff; border-color: var(--ehr2-success); box-shadow: 0 4px 12px rgba(30,142,90,.22); }
.ehr-bs5 .btn-ehr2-success:hover { background: #176b44; border-color: #176b44; color: #fff; transform: translateY(-1px); }

.ehr-bs5 .btn-ehr2-danger { background: #fff; color: var(--ehr2-danger); border-color: var(--ehr2-danger); }
.ehr-bs5 .btn-ehr2-danger:hover { background: var(--ehr2-danger); color: #fff; }

.ehr-bs5 .btn-ehr2-ghost { background: transparent; color: var(--ehr2-muted); border-color: transparent; padding: 8px 12px; }
.ehr-bs5 .btn-ehr2-ghost:hover { background: var(--ehr2-surface); color: var(--ehr2-text); }

/* Full-button warning/info variants (e.g. "Renew Plan" on an expired-plan
   banner) — same two colors as the icon variants further down, just usable
   standalone with a text label, not only paired with .btn-ehr2-icon. */
.ehr-bs5 .btn-ehr2-warning { background: #fff; color: #92580a; border-color: var(--ehr2-warning); }
.ehr-bs5 .btn-ehr2-warning:hover { background: var(--ehr2-warning); color: #fff; }

.ehr-bs5 .btn-ehr2-info { background: #fff; color: var(--ehr2-info); border-color: var(--ehr2-info); }
.ehr-bs5 .btn-ehr2-info:hover { background: var(--ehr2-info); color: #fff; }

.ehr-bs5 .btn-ehr2-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; justify-content: center; font-size: .9rem; border-width: 1px; }

/* Icon-button color coding — EHR_UI_REDESIGN.md Section 5.2a.
   Pick by what the action DOES (open/view, inform, caution, destroy), not
   by page — "View" is always green, "Delete" is always red, everywhere. */
.ehr-bs5 .btn-ehr2-edit  { color: var(--ehr2-primary); border-color: var(--ehr2-border); background: #fff; }
.ehr-bs5 .btn-ehr2-edit:hover  { background: var(--ehr2-primary-lt); border-color: var(--ehr2-primary); color: var(--ehr2-primary); }
.ehr-bs5 .btn-ehr2-icon.btn-ehr2-warning { color: #92580a; border-color: var(--ehr2-border); background: #fff; }
.ehr-bs5 .btn-ehr2-icon.btn-ehr2-warning:hover { background: var(--ehr2-warning-lt); border-color: var(--ehr2-warning); color: #92580a; }
.ehr-bs5 .btn-ehr2-icon.btn-ehr2-info { color: var(--ehr2-info); border-color: var(--ehr2-border); background: #fff; }
.ehr-bs5 .btn-ehr2-icon.btn-ehr2-info:hover { background: var(--ehr2-info-lt); border-color: var(--ehr2-info); color: var(--ehr2-info); }
.ehr-bs5 .btn-ehr2-delete { color: var(--ehr2-danger);  border-color: var(--ehr2-border); background: #fff; }
.ehr-bs5 .btn-ehr2-delete:hover { background: var(--ehr2-danger-lt); border-color: var(--ehr2-danger); color: var(--ehr2-danger); }

.ehr-bs5 .btn-ehr2-sm { padding: 5px 14px; font-size: .8rem; min-height: 32px; }
.ehr-bs5 .btn-ehr2-icon.btn-ehr2-sm { width: 32px; height: 32px; font-size: .8rem; }

.ehr-bs5 .btn-ehr2-loading { opacity: .7; pointer-events: none; }
.ehr-bs5 .btn-ehr2-loading::after {
  content: ''; display: inline-block; width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
  animation: ehr2-spin .6s linear infinite; margin-left: 6px;
}
@keyframes ehr2-spin { to { transform: rotate(360deg); } }

.ehr-bs5 .btn-ehr2-primary:focus-visible,
.ehr-bs5 .btn-ehr2-secondary:focus-visible,
.ehr-bs5 .btn-ehr2-success:focus-visible,
.ehr-bs5 .btn-ehr2-danger:focus-visible {
  outline: 2px solid var(--ehr2-primary);
  outline-offset: 2px;
}

/* =============================================================================
   FORMS
   ============================================================================= */
.ehr2-form-section { margin-bottom: 28px; --ehr2-field-min: 240px; }
.ehr2-form-section-title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ehr2-primary); padding-bottom: 8px; margin-bottom: 16px;
  border-bottom: 2px solid var(--ehr2-primary-lt);
  display: flex; align-items: center; gap: 8px;
}
.ehr2-form-section .row > [class*="col-"]:not(.col-md-auto):not(.col-auto) { min-width: min(100%, var(--ehr2-field-min)); }
.ehr2-form-section .row > .col-md-2:not(.col-md-auto),
.ehr2-form-section .row > .col-md-3:not(.col-md-auto),
.ehr2-form-section .row > .col-lg-4,
.ehr2-form-section .row > .col-xl-3 { flex: 1 1 var(--ehr2-field-min); max-width: 100%; }
.ehr2-form-section .row > .col-md-4,
.ehr2-form-section .row > .col-md-5,
.ehr2-form-section .row > .col-lg-8,
.ehr2-form-section .row > .col-xl-6 { flex: 1 1 calc(var(--ehr2-field-min) * 1.35); max-width: 100%; }

.ehr2-form-group { min-width: 0; margin-bottom: 16px; }
.ehr2-label { display: block; font-size: .8rem; font-weight: 600; color: var(--ehr2-text); margin-bottom: 5px; }
.ehr2-required { color: var(--ehr2-danger); margin-left: 2px; }
.ehr2-label p, .ehr2-label div { display: inline; margin: 0; padding: 0; }
.ehr2-label.d-flex { gap: 8px; }

.ehr2-input, .ehr2-select, .ehr2-textarea {
  display: block; width: 100%; padding: 9px 13px; font-size: .845rem;
  font-family: var(--ehr2-font); color: var(--ehr2-text); background: #fff;
  border: 1.5px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm);
  transition: border-color var(--ehr2-transition), box-shadow var(--ehr2-transition);
  outline: none; appearance: none; min-width: 0; min-height: 38px;
}
.ehr2-input:focus, .ehr2-select:focus, .ehr2-textarea:focus {
  border-color: var(--ehr2-primary);
  box-shadow: 0 0 0 3px var(--ehr2-primary-lt);
}
.ehr2-input::placeholder, .ehr2-textarea::placeholder { color: #aab6ae; }
.ehr2-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7670' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer;
}
.ehr2-textarea { resize: vertical; min-height: 80px; }
.ehr2-field-hint { font-size: .75rem; color: var(--ehr2-muted); margin-top: 4px; }

/* Bootstrap form-control inside ehr2 modals matches the ehr2-input look */
.ehr2-modal .form-control, .ehr2-modal .form-select {
  border: 1.5px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm);
  font-family: var(--ehr2-font); font-size: .845rem; padding: 9px 13px;
  transition: border-color var(--ehr2-transition), box-shadow var(--ehr2-transition);
}
.ehr2-modal .form-control:focus, .ehr2-modal .form-select:focus {
  border-color: var(--ehr2-primary); box-shadow: 0 0 0 3px var(--ehr2-primary-lt);
}
.ehr2-modal label { font-size: .8rem; font-weight: 600; color: var(--ehr2-text); margin-bottom: 5px; }
.ehr2-modal .form-select { padding-right: 36px; }

/* =============================================================================
   MODALS — single pattern, used by every ehr2 modal (Section 5.3)
   ============================================================================= */
.ehr2-modal .modal-content { border: none; border-radius: var(--ehr2-radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.15); overflow: hidden; }
.ehr2-modal-header {
  padding: 18px 24px 14px; background: #fff; border-bottom: 1px solid var(--ehr2-border);
  display: flex; align-items: center; justify-content: space-between;
}
.ehr2-modal-title { font-size: 1rem; font-weight: 700; color: var(--ehr2-text); margin: 0; display: flex; align-items: center; gap: 8px; }
.ehr2-modal-title i { color: var(--ehr2-primary); }
.ehr2-modal-body { padding: 20px 24px; background: #fff; max-height: 70vh; overflow-y: auto; }
.ehr2-modal-footer { padding: 14px 24px; background: var(--color-surface-alt); border-top: 1px solid var(--ehr2-border); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

.ehr2-confirm-icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto; }
.ehr2-confirm-danger { background: var(--ehr2-danger-lt); color: var(--ehr2-danger); }
.ehr2-confirm-warning { background: var(--ehr2-warning-lt); color: var(--ehr2-warning); }

/* =============================================================================
   TABLES
   ============================================================================= */
.ehr2-table-wrapper { overflow-x: auto; border-radius: 0 0 var(--ehr2-radius) var(--ehr2-radius); }
.ehr2-table { width: 100%; border-collapse: collapse; font-size: .835rem; color: var(--ehr2-text); }
.ehr2-table thead tr { background: var(--ehr2-surface); border-bottom: 2px solid var(--ehr2-border); }
.ehr2-table thead th { padding: 11px 16px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ehr2-muted); white-space: nowrap; }
.ehr2-table tbody tr { border-bottom: 1px solid var(--color-surface-alt); transition: background var(--ehr2-transition); }
.ehr2-table tbody tr:hover { background: var(--ehr2-primary-lighter); }
.ehr2-table tbody tr:last-child { border-bottom: none; }
.ehr2-table tbody td { padding: 12px 16px; vertical-align: middle; font-size: .835rem; }
.ehr2-table-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }

/* Sticky actions column — add .ehr2-table-sticky to the <table>; the
   .ehr2-table-wrapper ancestor already has overflow-x: auto. */
.ehr2-table-sticky thead th:last-child,
.ehr2-table-sticky tbody td:last-child {
  position: sticky; right: 0; z-index: 2; background: var(--ehr2-card);
}
.ehr2-table-sticky thead th:last-child { background: var(--ehr2-surface); box-shadow: -3px 0 8px rgba(0,0,0,.07); }
.ehr2-table-sticky tbody td:last-child { box-shadow: -3px 0 8px rgba(0,0,0,.05); }
.ehr2-table-sticky tbody tr:hover td:last-child { background: var(--ehr2-primary-lighter); }
.ehr2-table-sticky tbody td:last-child:has(.dropdown-menu.show) { z-index: 1001; }
.ehr2-table-sticky .dropdown-menu.show { z-index: 1050; }

/* Patient row cell (avatar + name) — reused on the Patients list and the
   Dashboard's recent-patients widget. One definition, both pages. */
.ehr2-patient-cell { display: flex; align-items: center; gap: 10px; }
.ehr2-patient-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}

/* =============================================================================
   EMPTY STATE
   ============================================================================= */
.ehr2-empty-state { text-align: center; padding: 40px 20px; color: var(--ehr2-muted); }
.ehr2-empty-icon { font-size: 2.5rem; color: var(--color-border-strong); margin-bottom: 12px; line-height: 1; }
.ehr2-empty-title { font-size: .9rem; font-weight: 600; color: #7c887e; margin-bottom: 4px; }
.ehr2-empty-sub { font-size: .8rem; color: #aab6ae; }

/* =============================================================================
   READ-ONLY FIELD DISPLAY — used by "show" pages presenting saved data as
   inert fields (looks like a disabled input, but is plain text underneath).
   ============================================================================= */
.ehr2-readonly-label { font-size: .78rem; font-weight: 600; color: var(--ehr2-text); margin-bottom: 4px; display: block; }
.ehr2-readonly-field {
  background: var(--ehr2-surface); border: 1px solid var(--ehr2-border);
  border-radius: var(--ehr2-radius-sm); padding: 8px 12px;
  font-size: .86rem; min-height: 38px; color: var(--ehr2-text);
}

/* AI-generated rich-text document content (clinical document show page,
   treatment plan's AI-drafted formulation) — was never styled even in the
   legacy system, so this content rendered with bare browser defaults
   despite being the main thing the page exists to show. */
.ehr2-document-content,
.ehr2-document-content .section {
  color: var(--ehr2-text);
  line-height: 1.6;
}
.ehr2-document-content .section {
  background: var(--ehr2-card) !important;
  border: 1.5px solid var(--ehr2-border) !important;
  border-radius: var(--ehr2-radius-sm) !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--ehr2-shadow) !important;
}
.ehr2-document-content h2,
.ehr2-document-content .section h2 {
  font-weight: 700 !important;
  font-size: .95rem !important;
  color: var(--ehr2-primary) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--ehr2-primary-lt) !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
}
.ehr2-document-content p {
  font-size: .845rem !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
  color: var(--ehr2-text) !important;
}
.ehr2-document-content ul {
  margin: 10px 0 10px 24px !important;
  padding: 0 !important;
  list-style-type: disc !important;
}
.ehr2-document-content li {
  font-size: .845rem !important;
  line-height: 1.6 !important;
  margin-bottom: 6px !important;
  color: var(--ehr2-text) !important;
}
.ehr2-document-content strong {
  color: var(--ehr2-text) !important;
  font-weight: 600 !important;
}

/* Section title inside a card body — groups related fields without the
   weight of a full nested card (replaces the old numbered rainbow-color
   card-header-1..7 pattern; one calm style for every sub-section, everywhere). */
.ehr2-section-title {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ehr2-primary); margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--ehr2-primary-lt);
  display: flex; align-items: center; gap: 6px;
}

/* Signature preview/status — clinician/client/supervisor sign-off blocks */
.ehr2-sig-preview img { max-height: 100px; border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); background: #fff; padding: 4px; }
.ehr2-sig-status { font-size: .8rem; font-weight: 600; }
.ehr2-sig-status.signed { color: var(--ehr2-success); }
.ehr2-sig-status.unsigned { color: var(--ehr2-muted); }

/* Signature drawing pad (Edit page — capturing a new signature, as opposed
   to .ehr2-sig-preview which displays an already-captured one). */
.ehr2-sig-pad-wrap { border: 2px dashed var(--ehr2-border); border-radius: var(--ehr2-radius); padding: 14px; text-align: center; margin-bottom: 10px; }
.ehr2-sig-pad {
  border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm);
  background: var(--ehr2-surface); cursor: crosshair;
  width: 100%; max-width: 480px; height: 160px; touch-action: none;
}

/* Expired-plan "Expand" toggle — collapses a card body to a peek-height
   preview with a fade mask; toggling .ehr2-card-expanded removes the cap. */
.ehr2-card-collapsed .ehr2-card-body {
  max-height: 90px; overflow: hidden; position: relative;
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.ehr2-card-collapsed.ehr2-card-expanded .ehr2-card-body { max-height: none; overflow: visible; mask-image: none; }

/* Compact progress-note rows — used anywhere a goal/objective/intervention
   needs to list its linked progress notes (treatment plan show + edit
   pages). Date + type + status badge + a clear "View" icon button, instead
   of a bare <ul><li><a>View</a></li></ul> link list. */
.ehr2-pn-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.ehr2-pn-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--ehr2-border); border-radius:6px;
  padding:6px 10px; font-size:.8rem;
}
.ehr2-pn-row i.bi-journal-text { color:var(--ehr2-muted); }
.ehr2-pn-date { font-weight:600; color:var(--ehr2-text); white-space:nowrap; }
.ehr2-pn-type { color:var(--ehr2-muted); }

/* =============================================================================
   FLASH ALERTS
   ============================================================================= */
.ehr2-alert {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  border-radius: var(--ehr2-radius-sm); font-size: .845rem; font-weight: 500;
  margin-bottom: 14px; animation: ehr2-fadein .3s ease;
}
@keyframes ehr2-fadein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ehr2-alert-success { background: var(--ehr2-success-lt); color: #155a39; border: 1px solid #b9e3cd; }
.ehr2-alert-danger  { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger); border: 1px solid #f3c4c4; }
.ehr2-alert-warning { background: var(--ehr2-warning-lt); color: #92580a; border: 1px solid #f0d8a3; }
.ehr2-alert-info    { background: var(--ehr2-info-lt);    color: #1d4ed8; border: 1px solid #c7d9f7; }
.ehr2-alert-bar { border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; display: flex; gap: 12px; align-items: center; font-size: .84rem; font-weight: 500; }
.ehr2-alert-bar.overdue { background: var(--ehr2-danger-lt); border: 1.5px solid #f3c4c4; color: #b91c1c; }
.ehr2-alert-close {
  margin-left: auto; background: none; border: none; font-size: 1.1rem; cursor: pointer;
  color: inherit; opacity: .6; padding: 0 4px; transition: opacity var(--ehr2-transition);
}
.ehr2-alert-close:hover { opacity: 1; }

/* =============================================================================
   KPI CARDS + ATTENTION LIST (Overview tab)
   ============================================================================= */
.ehr2-kpi-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid var(--ehr2-border); border-radius: 12px;
  padding: 14px 16px; height: 100%;
}
.ehr2-kpi-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; font-size: 1.25rem; flex-shrink: 0; }
.ehr2-kpi-icon.risk-low { background: var(--ehr2-success-lt); color: #155a39; }
.ehr2-kpi-icon.risk-moderate { background: var(--ehr2-warning-lt); color: #92580a; }
.ehr2-kpi-icon.risk-high { background: var(--ehr2-danger-lt); color: #b91c1c; }
.ehr2-kpi-icon.risk-critical { background: #ffe4e6; color: #e11d48; }
.ehr2-kpi-info { flex: 1; min-width: 0; }
.ehr2-kpi-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ehr2-muted); margin-bottom: 2px; }
.ehr2-kpi-value { font-size: 1.05rem; font-weight: 700; color: var(--ehr2-text); line-height: 1.2; }

.ehr2-attention-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--ehr2-border); border-left: 3px solid transparent;
  transition: background-color .15s ease, border-left-color .15s ease;
}
.ehr2-attention-item:last-child { border-bottom: none; }
.ehr2-attention-item:hover { background: var(--ehr2-surface); }
.ehr2-attention-item.border-danger { border-left-color: var(--ehr2-danger); }
.ehr2-attention-item.border-warning { border-left-color: var(--ehr2-warning); }
.ehr2-attention-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; font-size: 1.05rem; flex-shrink: 0; }
.ehr2-attention-icon.text-danger { background: var(--ehr2-danger-lt); }
.ehr2-attention-icon.text-warning { background: var(--ehr2-warning-lt); }

.ehr2-snapshot-card { border: 1px solid var(--ehr2-border); border-radius: var(--ehr2-radius-sm); padding: 12px 14px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }

.ehr2-clamp-2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
}

/* =============================================================================
   RESPONSIVE — sidenav collapses to a horizontally-scrollable tab bar
   (EHR_UI_REDESIGN.md Section 1a — checked at 375 / 768 / 1440)
   ============================================================================= */
@media (max-width: 1199.98px) {
  .ehr2-profile-layout { flex-direction: column; }
  .ehr2-profile-content, .ehr2-sidenav { width: 100%; }
  .ehr2-sidenav {
    position: static; display: flex; overflow-x: auto; background: #fff;
    border-radius: var(--ehr2-radius-sm); padding: 4px; gap: 2px; flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .ehr2-sidenav::-webkit-scrollbar { display: none; }
  .ehr2-sidenav-label { display: none; }
  .ehr2-sidenav-item {
    flex-shrink: 0; padding: 8px 14px; border-left: none; border-bottom: 3px solid transparent;
    border-radius: 6px; font-size: .78rem; flex-direction: column; gap: 4px; text-align: center;
  }
  .ehr2-sidenav-item i { width: auto; }
  .ehr2-sidenav-item.active { border-left: none; border-bottom-color: var(--ehr2-primary); }
}

@media (max-width: 768px) {
  .ehr2-sidenav-count { display: none; }
  .ehr2-profile-header { padding: 14px 16px; }
  .ehr2-avatar { width: 48px; height: 48px; font-size: 1.1rem; }
  .ehr2-avatar img { width: 48px; height: 48px; }
  .ehr2-profile-name { font-size: 1rem; }
  .ehr2-table-wrapper { font-size: .78rem; }
  .ehr2-table thead th, .ehr2-table tbody td { padding: 8px 10px; }
  .ehr2-modal-body { max-height: 60vh; }
  .ehr2-card-header { padding: 14px 16px; }
  .ehr2-card-body { padding: 16px; }
  .ehr2-profile-quick-actions { width: 100%; }
  .ehr2-profile-quick-actions .btn-ehr2-sm { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 575.98px) {
  .ehr2-modal-footer { flex-direction: column-reverse; }
  .ehr2-modal-footer .btn-ehr2-primary,
  .ehr2-modal-footer .btn-ehr2-secondary,
  .ehr2-modal-footer .btn-ehr2-danger { width: 100%; justify-content: center; }
}
/* ===========================================================================
   Workforce & administration pages
   Supervision, productivity, payroll by note, and access control
   ========================================================================== */
.ehr2-workforce-page {
    --ehr-primary: var(--ehr2-primary, #015b3a);
    --ehr-primary-hover: var(--ehr2-primary-dark, #00452c);
    --ehr-primary-lt: var(--ehr2-primary-soft, #e5f3ed);
    --ehr-card: #fff;
    --ehr-bg: #f7f9f8;
    --ehr-border: #dce5e1;
    --ehr-text: #14201b;
    --ehr-muted: #61706a;
    --ehr-success: #15803d;
    --ehr-success-lt: #e8f7ee;
    --ehr-warning: #b45309;
    --ehr-warning-lt: #fff5dc;
    --ehr-danger: #b42318;
    --ehr-danger-lt: #feeeee;
    --ehr-info-lt: #e7f4f6;
    --ehr-radius: 14px;
    --ehr-shadow: 0 2px 8px rgba(18, 48, 36, .06);
    --ehr-transition: .2s ease;
    color: var(--ehr-text);
}

.ehr2-workforce-page .ehr-profile-header,
.ehr2-workforce-page .ehr-card {
    background: var(--ehr-card);
    border: 1px solid var(--ehr-border);
    border-radius: var(--ehr-radius);
    box-shadow: var(--ehr-shadow);
}

.ehr2-workforce-page .ehr-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    margin-bottom: 20px;
}

.ehr2-workforce-page .ehr-profile-main,
.ehr2-workforce-page .ehr-profile-actions,
.ehr2-workforce-page .ehr-card-header,
.ehr2-workforce-page .ehr-card-actions,
.ehr2-workforce-page .ehr-table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ehr2-workforce-page .ehr-profile-main { min-width: 0; }
.ehr2-workforce-page .ehr-profile-actions { flex-wrap: wrap; justify-content: flex-end; }
.ehr2-workforce-page .ehr-profile-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    border-radius: 12px;
    background: var(--ehr-primary-lt);
    color: var(--ehr-primary);
    font-size: 1.25rem;
}
.ehr2-workforce-page .ehr-profile-name,
.ehr2-workforce-page .ehr-page-title {
    margin: 0;
    color: var(--ehr-text);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
}
.ehr2-workforce-page .ehr-profile-meta,
.ehr2-workforce-page .ehr-profile-subtitle,
.ehr2-workforce-page .ehr-text-muted { color: var(--ehr-muted); }

.ehr2-workforce-page .ehr-card { margin-bottom: 18px; overflow: hidden; }
.ehr2-workforce-page .ehr-card-header {
    min-height: 62px;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ehr-border);
}
.ehr2-workforce-page .ehr-card-title {
    margin: 0;
    color: var(--ehr-text);
    font-size: 1.05rem;
    font-weight: 700;
}
.ehr2-workforce-page .ehr-card-title i,
.ehr2-workforce-page .ehr-page-title i { color: var(--ehr-primary); }
.ehr2-workforce-page .ehr-card-body { padding: 20px; }
.ehr2-workforce-page .ehr-card-body-flush { overflow-x: auto; }
.ehr2-workforce-page .ehr-card-success { border-left: 4px solid var(--ehr-success); }
.ehr2-workforce-page .ehr-card-danger { border-left: 4px solid var(--ehr-danger); }

.ehr2-workforce-page .ehr-form-group { margin-bottom: 16px; }
.ehr2-workforce-page .ehr-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ehr-text);
    font-size: .82rem;
    font-weight: 650;
}
.ehr2-workforce-page .ehr-input,
.ehr2-workforce-page .ehr-select,
.ehr2-workforce-page .ehr-textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    color: var(--ehr-text);
    background: #fff;
    border: 1px solid #ccd8d3;
    border-radius: 9px;
    outline: 0;
    transition: border-color var(--ehr-transition), box-shadow var(--ehr-transition);
}
.ehr2-workforce-page .ehr-textarea { min-height: 110px; resize: vertical; }
.ehr2-workforce-page .ehr-input:focus,
.ehr2-workforce-page .ehr-select:focus,
.ehr2-workforce-page .ehr-textarea:focus {
    border-color: var(--ehr-primary);
    box-shadow: 0 0 0 3px rgba(1, 91, 58, .12);
}
.ehr2-workforce-page .ehr-form-hint { margin-top: 5px; color: var(--ehr-muted); font-size: .76rem; }

.ehr2-workforce-page .btn-ehr-primary,
.ehr2-workforce-page .btn-ehr-outline,
.ehr2-workforce-page .btn-ehr-danger,
.ehr2-workforce-page .btn-ehr-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 9px;
    font-weight: 650;
    text-decoration: none;
    transition: var(--ehr-transition);
}
.ehr2-workforce-page .btn-ehr-primary {
    color: #fff !important;
    background: var(--ehr-primary) !important;
    border: 1px solid var(--ehr-primary) !important;
}
.ehr2-workforce-page .btn-ehr-primary:hover { background: var(--ehr-primary-hover) !important; }
.ehr2-workforce-page .btn-ehr-outline,
.ehr2-workforce-page .btn-ehr-sm {
    color: var(--ehr-primary) !important;
    background: #fff !important;
    border: 1px solid var(--ehr-primary) !important;
}
.ehr2-workforce-page .btn-ehr-danger { color: var(--ehr-danger); background: #fff; border: 1px solid #efb8b4; }
.ehr2-workforce-page .btn-ehr-sm { min-height: 34px; padding: 6px 10px; font-size: .8rem; }
.ehr2-workforce-page .ehr-btn-group { display: flex; }

.ehr2-workforce-page .ehr-alert {
    position: relative;
    padding: 12px 42px 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
}
.ehr2-workforce-page .ehr-alert-success { color: #166534; background: var(--ehr-success-lt); border: 1px solid #b9e2c8; }
.ehr2-workforce-page .ehr-alert-danger { color: var(--ehr-danger); background: var(--ehr-danger-lt); border: 1px solid #f3c0bc; }
.ehr2-workforce-page .ehr-alert-warning { color: #92400e; background: var(--ehr-warning-lt); border: 1px solid #f2d18a; }
.ehr2-workforce-page .ehr-alert-info { color: #155e75; background: var(--ehr-info-lt); border: 1px solid #b9dce2; }
.ehr2-workforce-page .ehr-alert-close { position: absolute; top: 9px; right: 12px; border: 0; background: transparent; }

.ehr2-workforce-page .ehr-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}
.ehr2-workforce-page .ehr-table th {
    padding: 12px 14px;
    color: #405049;
    background: #f5f8f7;
    border-bottom: 1px solid var(--ehr-border);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ehr2-workforce-page .ehr-table td {
    padding: 13px 14px;
    color: var(--ehr-text);
    border-bottom: 1px solid #e8eeeb;
    vertical-align: middle;
}
.ehr2-workforce-page .ehr-table tbody tr:last-child td { border-bottom: 0; }
.ehr2-workforce-page .ehr-table tbody tr:hover { background: #f8fbf9; }
.ehr2-workforce-page .ehr-table-compact td { padding-top: 10px; padding-bottom: 10px; }
.ehr2-workforce-page .ehr-badge,
.ehr2-workforce-page [class*="ehr-badge-"] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 650;
    line-height: 1;
}
.ehr2-workforce-page .ehr-badge-payroll-approved,
.ehr2-workforce-page .ehr-badge-payroll-paid { color: #166534; background: var(--ehr-success-lt); }
.ehr2-workforce-page .ehr-badge-payroll-under_review { color: #92400e; background: var(--ehr-warning-lt); }
.ehr2-workforce-page .ehr-badge-payroll-draft { color: #4b5563; background: #edf1ef; }

.ehr2-workforce-page .bg-icon-notes,
.ehr2-workforce-page .bg-icon-appts { color: var(--ehr-primary) !important; background: var(--ehr-primary-lt) !important; }

/* Access control */
.ehr2-workforce-page .ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.ehr2-workforce-page .ac-stat { display: flex; align-items: center; gap: 12px; padding: 17px; background: #fff; border: 1px solid var(--ehr-border); border-radius: 12px; box-shadow: var(--ehr-shadow); }
.ehr2-workforce-page .ac-stat-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 10px; color: var(--ehr-primary) !important; background: var(--ehr-primary-lt) !important; }
.ehr2-workforce-page .ac-stat-value { color: var(--ehr-text); font-size: 1.25rem; font-weight: 750; line-height: 1.2; }
.ehr2-workforce-page .ac-stat-label { color: var(--ehr-muted); font-size: .78rem; }
.ehr2-workforce-page .ac-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ehr2-workforce-page .ac-search { position: relative; width: min(100%, 340px); }
.ehr2-workforce-page .ac-search i { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--ehr-muted); }
.ehr2-workforce-page .ac-search .ehr-input { padding-left: 36px; }
.ehr2-workforce-page .ac-create-card .ehr-card-header,
.ehr2-workforce-page .ac-role-card .ehr-card-header { cursor: pointer; user-select: none; }
.ehr2-workforce-page .ac-chevron { color: var(--ehr-muted); transition: transform var(--ehr-transition); }
.ehr2-workforce-page .ac-create-card.is-open .ac-chevron,
.ehr2-workforce-page .ac-role-card.is-open .ac-chevron { transform: rotate(180deg); }
.ehr2-workforce-page .ac-create-card .ehr-card-body,
.ehr2-workforce-page .ac-role-card .ehr-card-body { display: none; }
.ehr2-workforce-page .ac-create-card.is-open .ehr-card-body,
.ehr2-workforce-page .ac-role-card.is-open .ehr-card-body { display: block; }
.ehr2-workforce-page .ac-role-card .ehr-card-title { display: flex; align-items: center; gap: 8px; }
.ehr2-workforce-page .ac-perm-group { margin-bottom: 20px; }
.ehr2-workforce-page .ac-perm-group-title { padding-bottom: 7px; margin-bottom: 10px; color: var(--ehr-muted); border-bottom: 1px solid var(--ehr-border); font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.ehr2-workforce-page .ac-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px; }
.ehr2-workforce-page .ac-perm-toggle { display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer; background: #fafcfb; border: 1px solid var(--ehr-border); border-radius: 9px; transition: var(--ehr-transition); }
.ehr2-workforce-page .ac-perm-toggle:hover,
.ehr2-workforce-page .ac-perm-toggle.is-checked { background: var(--ehr-primary-lt); border-color: var(--ehr-primary); }
.ehr2-workforce-page .ac-perm-label { color: var(--ehr-text); font-size: .82rem; }
.ehr2-workforce-page .ac-switch { position: relative; width: 36px; height: 20px; flex: 0 0 36px; }
.ehr2-workforce-page .ac-switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.ehr2-workforce-page .ac-switch-track { position: absolute; inset: 0; background: #cbd5d1; border-radius: 999px; transition: var(--ehr-transition); }
.ehr2-workforce-page .ac-switch-track::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: var(--ehr-transition); }
.ehr2-workforce-page .ac-switch input:checked + .ac-switch-track { background: var(--ehr-primary); }
.ehr2-workforce-page .ac-switch input:checked + .ac-switch-track::before { transform: translateX(16px); }
.ehr2-workforce-page .ac-card-footer { display: flex; align-items: center; gap: 10px; padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--ehr-border); }
.ehr2-workforce-page .ac-save-status { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; }
.ehr2-workforce-page .ac-save-status.is-success { color: var(--ehr-success); }
.ehr2-workforce-page .ac-save-status.is-error { color: var(--ehr-danger); }
.ehr2-workforce-page .ac-no-match { padding: 6px 2px; color: var(--ehr-muted); font-size: .82rem; }

@media (max-width: 991.98px) {
    .ehr2-workforce-page .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .ehr2-workforce-page .ehr-profile-header { align-items: flex-start; flex-direction: column; padding: 17px; }
    .ehr2-workforce-page .ehr-profile-actions { width: 100%; justify-content: flex-start; }
    .ehr2-workforce-page .ehr-card-header { align-items: flex-start; flex-wrap: wrap; padding: 14px 16px; }
    .ehr2-workforce-page .ehr-card-body { padding: 16px; }
    .ehr2-workforce-page .ac-stats { grid-template-columns: 1fr; }
    .ehr2-workforce-page .ac-search { width: 100%; max-width: none; }
}

/* Referral pipeline */
.ehr2-referrals-page { --ehr-primary-dk: var(--ehr-primary-hover); }
.ehr2-referrals-page .ehr-avatar,
.ehr2-referrals-page .ehr-avatar-circle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--ehr-primary);
    background: var(--ehr-primary-lt);
}
.ehr2-referrals-page .ehr-profile-header > .ehr-avatar { color: #fff; background: var(--ehr-primary) !important; }
.ehr2-referrals-page .ehr-profile-meta { min-width: 0; }
.ehr2-referrals-page .ehr-profile-sub { margin-top: 4px; color: var(--ehr-muted); }
.ehr2-referrals-page .ehr-profile-quick-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ehr2-referrals-page .btn-ehr,
.ehr2-referrals-page .btn-ehr-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 16px;
    color: #fff !important;
    font-weight: 650;
    text-decoration: none;
    background: var(--ehr-primary) !important;
    border: 1px solid var(--ehr-primary) !important;
    border-radius: 9px;
    box-shadow: 0 3px 10px rgba(1, 91, 58, .16) !important;
}
.ehr2-referrals-page .btn-ehr:hover,
.ehr2-referrals-page .btn-ehr-submit:hover { background: var(--ehr-primary-hover) !important; transform: none; }
.ehr2-referrals-page .btn-ehr-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 14px;
    color: var(--ehr-primary) !important;
    background: #fff !important;
    border: 1px solid var(--ehr-primary) !important;
    border-radius: 9px;
    text-decoration: none;
}
.ehr2-referrals-page .section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 9px;
    margin: 4px 0 16px;
    color: var(--ehr-text);
    border-bottom: 1px solid var(--ehr-border);
    font-size: .8rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ehr2-referrals-page .section-heading i,
.ehr2-referrals-page .text-primary { color: var(--ehr-primary) !important; }
.ehr2-referrals-page .ehr-required,
.ehr2-referrals-page .ehr-field-error { color: var(--ehr-danger); }
.ehr2-referrals-page .ehr-field-error { font-size: .78rem; }
.ehr2-referrals-page .ehr-input.is-invalid { border-color: var(--ehr-danger); }
.ehr2-referrals-page .ehr-link { color: var(--ehr-primary); }

.ehr2-referrals-page .ehr-pipeline-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
}
.ehr2-referrals-page .ehr-pipeline-stage {
    display: block;
    min-width: 110px;
    padding: 12px 10px;
    color: var(--ehr-muted);
    text-align: center;
    text-decoration: none;
    background: #f7faf8;
    border: 1px solid var(--ehr-border);
    border-radius: 10px;
    transition: var(--ehr-transition);
}
.ehr2-referrals-page .ehr-pipeline-stage:hover,
.ehr2-referrals-page .ehr-pipeline-stage.ehr-pipeline-active {
    color: var(--ehr-primary);
    background: var(--ehr-primary-lt);
    border-color: var(--ehr-primary);
}
.ehr2-referrals-page .ehr-pipeline-count { color: var(--ehr-text); font-size: 1.15rem; font-weight: 750; }
.ehr2-referrals-page .ehr-pipeline-label { margin-top: 3px; font-size: .7rem; font-weight: 650; }
.ehr2-referrals-page .conv-card {
    height: 100%;
    padding: 15px;
    background: #fafcfb;
    border: 1px solid var(--ehr-border);
    border-radius: 10px;
}
.ehr2-referrals-page .ehr-btn-action {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--ehr-primary);
    background: var(--ehr-primary-lt);
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
}
.ehr2-referrals-page .ehr-btn-action:hover { color: #fff; background: var(--ehr-primary); transform: none; }
.ehr2-referrals-page .detail-label { color: var(--ehr-muted); font-size: .75rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.ehr2-referrals-page .detail-label i { color: var(--ehr-primary); }
.ehr2-referrals-page .qa-btn-primary { background: var(--ehr-primary) !important; border-color: var(--ehr-primary) !important; }
.ehr2-referrals-page .stage-node.active .stage-dot { box-shadow: 0 0 0 4px rgba(1, 91, 58, .16) !important; }

@media (max-width: 767.98px) {
    .ehr2-referrals-page .ehr-profile-header { align-items: flex-start; }
    .ehr2-referrals-page .ehr-profile-quick-actions { width: 100%; margin-left: 0 !important; }
    .ehr2-referrals-page .ehr-profile-quick-actions > * { flex: 1 1 auto; }
    .ehr2-referrals-page .ehr-card-body[style*="padding:28px"] { padding: 18px !important; }
    .ehr2-referrals-page .stage-track { min-width: 680px; }
    .ehr2-referrals-page .ehr-card:has(.stage-track) { overflow-x: auto; }
}

/* =============================================================================
   GENERIC MODULE HERO + STAT TILE — shared page-header band for module pages
   migrated to ehr2LayoutMaster (Interoperability, Training/LMS, Group
   Services, ...). Same visual treatment as .ehr2-ai-hero / .ehr2-staff-hero
   but page-agnostic, so new modules stop cloning hero CSS per page family.
   ============================================================================= */
.ehr2-module-hero { margin-bottom: 20px; padding: 24px; background: linear-gradient(135deg, var(--ehr2-card) 65%, var(--ehr2-primary-lt)); border: 1px solid var(--ehr2-border); border-left: 5px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ehr2-module-hero-icon { width: 50px; height: 50px; display: grid; place-items: center; flex-shrink: 0; border-radius: 13px; background: var(--ehr2-primary-lt); color: var(--ehr2-primary); font-size: 1.35rem; }
.ehr2-module-hero-sub { margin: 2px 0 0; color: var(--ehr2-muted); font-size: .85rem; }
.ehr2-module-hero-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.ehr2-module-stat { height: 100%; min-height: 92px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; background: var(--ehr2-card); border: 1px solid var(--ehr2-border); border-top: 3px solid var(--ehr2-primary); border-radius: var(--ehr2-radius); box-shadow: var(--ehr2-shadow); transition: transform var(--ehr2-transition), box-shadow var(--ehr2-transition); }
.ehr2-module-stat:hover { transform: translateY(-2px); box-shadow: var(--ehr2-shadow-md); }
.ehr2-module-stat.is-info { border-top-color: var(--ehr2-info); }
.ehr2-module-stat.is-success { border-top-color: var(--ehr2-success); }
.ehr2-module-stat.is-warning { border-top-color: var(--ehr2-warning); }
.ehr2-module-stat.is-danger { border-top-color: var(--ehr2-danger); }
.ehr2-module-stat-value { color: var(--ehr2-text); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.ehr2-module-stat-label { margin-top: 4px; color: var(--ehr2-muted); font-size: .75rem; }

@media (max-width: 575.98px) {
  .ehr2-module-hero { padding: 18px; }
  .ehr2-module-hero-icon { width: 42px; height: 42px; }
  .ehr2-module-hero-actions { margin-left: 0; width: 100%; }
  .ehr2-module-hero-actions > * { flex: 1 1 auto; justify-content: center; }
}

/* Generic five-bucket status badges — EHR_UI_REDESIGN.md Section 5.5.
   ehr2-badge-info already exists above; these complete the set (plus
   bootstrap-named aliases so model badge-class helpers returning
   'primary'/'secondary' map cleanly without per-page translation). */
.ehr2-badge-success   { background: var(--ehr2-success-lt); color: #155a39; border: 1px solid #b9e3cd; }
.ehr2-badge-warning   { background: var(--ehr2-warning-lt); color: #92580a; border: 1px solid #f0d8a3; }
.ehr2-badge-danger    { background: var(--ehr2-danger-lt);  color: var(--ehr2-danger); border: 1px solid #f3c4c4; }
.ehr2-badge-neutral,
.ehr2-badge-secondary { background: #f1f3f2; color: #51594f; border: 1px solid #dfe4e0; }
.ehr2-badge-primary   { background: var(--ehr2-primary-lt); color: var(--ehr2-primary); border: 1px solid #cfe3da; }