/* ============================================
   RehabDox - Main Stylesheet
   Modern Healthcare Light Theme
   Updated: December 2024
   ============================================ */

:root {
    /* Primary Brand Colors - Modern Indigo */
    --primary-color: #6366F1;
    --primary-hover: #4F46E5;
    --primary-light: #EEF2FF;
    --primary-dark: #4338CA;

    /* Secondary Colors - Teal/Cyan for wellness */
    --secondary-color: #06B6D4;
    --secondary-hover: #0891B2;
    --secondary-light: #CFFAFE;

    /* Accent Colors */
    --accent-emerald: #10B981;
    --accent-emerald-light: #D1FAE5;
    --accent-coral: #F97316;
    --accent-coral-light: #FFEDD5;

    /* Background Colors - Clean, Clinical */
    --body-bg: #F9FAFB;
    --card-bg: #FFFFFF;
    --bg-secondary: #F3F4F6;
    --bg-tertiary: #E5E7EB;
    --bg-light: #FAFAFA;

    /* Text Colors - High Readability */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-white: #FFFFFF;

    /* Status & Semantic Colors */
    --success-color: #10B981;
    --success-bg: #D1FAE5;
    --success-text: #065F46;
    --warning-color: #F59E0B;
    --warning-bg: #FEF3C7;
    --warning-text: #92400E;
    --danger-color: #EF4444;
    --danger-bg: #FEE2E2;
    --danger-text: #991B1B;
    --info-color: #3B82F6;
    --info-bg: #DBEAFE;
    --info-text: #1E40AF;
    --pending-bg: #FEF3C7;
    --pending-text: #854D0E;

    /* Border Colors */
    --border-color: #E5E7EB;
    --border-medium: #D1D5DB;
    --border-focus: #2563EB;
    --border-disabled: #D1D5DB;

    /* Sidebar - Modern Light Theme */
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #E5E7EB;
    --sidebar-text: #4B5563;
    --sidebar-text-muted: #9CA3AF;
    --sidebar-hover-bg: #F3F4F6;
    --sidebar-active-bg: #DBEAFE;
    --sidebar-active-text: #2563EB;
    --sidebar-active-border: #2563EB;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--body-bg);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Typography Scale - Crisp & Modern */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

small, .small {
    font-size: 0.8125rem;
}

.text-xs { font-size: 0.6875rem; }
.text-sm { font-size: 0.8125rem; }
.text-base { font-size: 0.875rem; }
.text-lg { font-size: 1rem; }
.text-xl { font-size: 1.125rem; }

/* ============================================
   Login Page - Modern Healthcare Design
   ============================================ */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #BFDBFE 100%);
    padding: 20px;
    position: relative;
}

.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563EB' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.login-card {
    background: var(--card-bg);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header .logo {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.login-header .logo .logo-img {
    height: 90px;
    object-fit: contain;
    border-radius: var(--radius-xl);
}

.login-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

.login-header p.text-muted {
    color: var(--text-secondary);
    font-size: 14px;
}

.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.login-footer small {
    color: var(--text-muted);
    font-size: 12px;
}

/* Tenant Selection UI */
.tenant-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tenant-option {
    display: block;
    width: 100%;
    padding: 16px 20px;
    background: var(--body-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tenant-option:hover {
    border-color: var(--primary-color);
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.tenant-option .tenant-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 4px;
}

.tenant-option .tenant-subdomain {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ============================================
   Main Layout - Modern Light Theme
   ============================================ */

#mainApp {
    display: flex;
    min-height: 100vh;
    background: var(--body-bg);
}

/* Sidebar - Light Theme */
.sidebar {
    width: 260px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 1000;
    transition: transform var(--transition-slow);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: var(--shadow-sm);
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
}

.sidebar-header .logo {
    text-align:center;
    border-radius: var(--radius-lg);
 
}

.sidebar-header .logo .sidebar-logo-img {
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-lg);
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.sidebar-tenant {
    padding: 16px 20px;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-tenant-logo {
    display: flex;
    justify-content: center;
}

.sidebar-clinic-logo-img {
    max-height: 48px;
    max-width: 180px;
    object-fit: contain;
    border-radius: var(--radius-sm, 4px);
}

.sidebar-tenant strong {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
}

.sidebar-tenant span {
    font-size: 12px;
    color: var(--text-muted);
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
    background: var(--card-bg);
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: var(--radius-lg);
    margin-bottom: 4px;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    font-weight: 500;
}

.sidebar-nav .nav-item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--text-primary);
}

.sidebar-nav .nav-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    border-left-color: var(--sidebar-active-border);
    font-weight: 600;
}

.sidebar-nav .nav-item i {
    font-size: 18px;
    width: 24px;
    text-align: center;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.sidebar-nav .nav-item:hover i {
    color: var(--primary-color);
}

.sidebar-nav .nav-item.active i {
    color: var(--primary-color);
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    color: white;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.user-details {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.user-role {
    font-size: 12px;
    color: var(--text-muted);
}

/* Sidebar Footer Buttons - Light Theme */
.sidebar-footer .btn-outline-light {
    color: var(--text-secondary);
    border-color: var(--border-color);
    background: var(--card-bg);
}

.sidebar-footer .btn-outline-light:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: var(--primary-light);
}

/* Role-based visibility */
body:not(.super-admin) .requires-super-admin { display: none !important; }
body:not(.admin):not(.super-admin) .requires-admin { display: none !important; }

/* Billing access: visible for super-admin, admin, and biller */
body:not(.super-admin):not(.admin):not(.biller) .requires-billing-access { display: none !important; }

/* Hide clinical actions from Biller and Read-Only */
body.biller .requires-clinical,
body.read-only .requires-clinical { display: none !important; }

/* Read-only users can only view, not modify */
body.read-only .requires-write { display: none !important; }

/* Biller-specific: hide patient editing and appointment creation */
body.biller .hide-from-biller { display: none !important; }

/* Read-only: hide all edit/create buttons */
body.read-only .hide-from-biller { display: none !important; }

/* Front Desk: hide clinical-only actions (e.g. e-Prescribe) */
body.front-desk .hide-from-frontdesk { display: none !important; }

/* Therapist/Clinician-specific: hide appointment management and patient editing */
body.clinician:not(.admin) .hide-from-therapist { display: none !important; }

/* Show only for therapists - hidden by default, shown only for clinician role */
.show-only-therapist { display: none !important; }
body.clinician .show-only-therapist { display: block !important; }

/* Medical Assistant and Nurse: hide specific elements */
body.medical-assistant .hide-from-ma-nurse,
body.nurse .hide-from-ma-nurse { display: none !important; }

/* MA/Nurse: hide clinical write actions (notes, orders, rx creation) */
body.medical-assistant .requires-clinical-write,
body.nurse .requires-clinical-write { display: none !important; }

/* MA/Nurse: show therapist-specific dashboard widgets (Missing Notes, Signatures) */
body.medical-assistant .show-only-therapist { display: block !important; }
body.nurse .show-only-therapist { display: block !important; }

/* ──────────────────────────────────────────────────────────────────
 * Encounter Patient Intake (Step 1 — iframe in Clinical Note step
 * for provider; FORMS sidebar group entry for nurse/MA).
 * Spec: rules/technical/intake-on-clinical-note.md §3.
 * ────────────────────────────────────────────────────────────────── */

/* Iframe wrapper inside Clinical Note step (provider's view).
   The .hide-from-ma-nurse class on the wrapper itself hides the entire
   block (heading + iframe) from MA/Nurse via the rule above. */
.cn-intake-frame-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 720px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.cn-intake-frame-header {
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.cn-intake-frame {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 720px;
    border: 0;
    display: block;
}

/* ===========================================================================
   Dashboard — Today Appointments (row-card layout, replaces the table)
   ---------------------------------------------------------------------------
   Each appointment is a card with a colored left-edge stripe (visit type),
   patient + provider avatars, and a flat info grid. Click anywhere on the
   card opens the appointment detail modal (delegated handler on the row
   class `.dashboard-appointment-row`, preserved from the previous table).
   2026-05.
   =========================================================================== */
.ew-today-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}
.ew-today-empty {
    text-align: center;
    color: #94a3b8;
    padding: 32px 12px;
    font-size: 14px;
}
.ew-today-empty i {
    font-size: 36px;
    color: #cbd5e1;
}
.ew-today-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1.6fr) minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #4f46e5; /* default = Follow-Up indigo */
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.ew-today-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    border-color: #cbd5e1;
}
/* Stripe color modifiers (matches DashboardModule._typeStripClass) */
.ew-today-card.is-newpatient   { border-left-color: #10b981; }
.ew-today-card.is-annual       { border-left-color: #9333ea; }
.ew-today-card.is-wellness     { border-left-color: #06b6d4; }
.ew-today-card.is-consultation { border-left-color: #f97316; }
.ew-today-card.is-telehealth   { border-left-color: #8b5cf6; }
.ew-today-card.is-procedure    { border-left-color: #ec4899; }
.ew-today-card.is-urgent       { border-left-color: #ef4444; }
.ew-today-card.is-labreview    { border-left-color: #a16207; }
.ew-today-card.is-medreview    { border-left-color: #2563eb; }
.ew-today-card.is-longevity    { border-left-color: #14b8a6; }

.ew-today-time {
    line-height: 1.1;
}
.ew-today-time-main {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}
.ew-today-time-ampm {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    margin-top: 2px;
}

.ew-today-patient {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.ew-today-patient-info {
    min-width: 0;
    flex: 1;
}
.ew-today-patient-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    line-height: 1.25;
}
.ew-today-patient-mrn {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

.ew-today-provider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    min-width: 140px;
}

.ew-today-type .badge,
.ew-today-status .badge {
    font-size: 12px;
    padding: 5px 10px;
}

.ew-today-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ew-today-sticky {
    color: #94a3b8;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.ew-today-sticky:hover { background: #f1f5f9; }
.ew-today-sticky.has-notes {
    color: #92400e;
    background: #fef3c7;
}
.ew-today-sticky.has-notes:hover { background: #fde68a; }

/* On narrow screens, collapse the columns to wrap nicely */
@media (max-width: 1100px) {
    .ew-today-card {
        grid-template-columns: 64px 1fr;
        gap: 10px 14px;
    }
    .ew-today-card > .ew-today-patient { grid-column: 2; }
    .ew-today-card > .ew-today-provider,
    .ew-today-card > .ew-today-type,
    .ew-today-card > .ew-today-status,
    .ew-today-card > .ew-today-actions {
        grid-column: 1 / -1;
        margin-left: 84px; /* align under patient name */
    }
}
@media (max-width: 640px) {
    .ew-today-card > .ew-today-provider,
    .ew-today-card > .ew-today-type,
    .ew-today-card > .ew-today-status,
    .ew-today-card > .ew-today-actions {
        margin-left: 0;
    }
}

/* FORMS sidebar group (renamed from TOOLS).
   2026-05: visible to ALL clinical roles (nurse, MA, provider, clinic admin) —
   the earlier role-gated rule was removed when the Clinical Note auto-embed
   was retired, so every role now reaches Patient Intake the same way. */
.ew-forms-group {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}
.ew-forms-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.06em;
    padding: 0 12px 6px;
}

/* Soft background tint on the Patient Intake Form FORMS-group entry
   so it stands out for nurse/MA as the primary form-completion task. */
.ew-forms-group .ew-step-item[data-form="patient-intake"] {
    background-color: rgba(13, 110, 253, 0.08);
    border-radius: 6px;
}
.ew-forms-group .ew-step-item[data-form="patient-intake"]:hover,
.ew-forms-group .ew-step-item[data-form="patient-intake"].active {
    background-color: rgba(13, 110, 253, 0.16);
}

/* On encounter pages only, move the global floating Help + Chat toggle
   buttons to the LEFT edge so they don't overlap the intake iframe's
   Save & Continue button at the bottom-right. The Help widget popup
   anchors off the same edge as its toggle, so flip it too — otherwise
   the panel would open from the right while the button sits on the left
   (visually disconnected). The chat modal is a Bootstrap modal opened
   center-screen, so only the toggle button needs to move there.
   Body class .on-encounter-page is added by EncounterWorkspaceModule
   on init; every other page uses the default right-edge positioning. */
body.on-encounter-page .imehr-help-toggle-btn,
body.on-encounter-page .imehr-help-widget,
body.on-encounter-page .chat-toggle-btn {
    right: auto !important;
    left: 24px;
}

/* Dashboard CSS Grid Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    align-items: start;
}

/* Appointments spans 2 columns */
.dashboard-grid .grid-appointments {
    grid-column: span 2;
}

/* Sidebar spans column 3, all rows */
    .dashboard-grid .grid-sidebar {
        grid-column: 3;
        grid-row: 1 / span 3;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

/* Responsive: stack on smaller screens */
@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-grid .grid-appointments,
    .dashboard-grid .grid-sidebar {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Main Content - Light Theme */
.main-content {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* A flex item defaults to min-width:auto, so a wide table (the 12-column Claims list) stretched the
       whole page past the window on a 1366px laptop. 0 lets the table scroll inside its own card. */
    min-width: 0;
    background: var(--body-bg);
}

.main-header {
    background: var(--card-bg);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

/* Page Title in Header */
.page-title {
    flex: 1;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.header-actions {
    display: flex;
    gap: 12px;
}

/* Super Admin Clinic Filter */
.clinic-filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
}

.clinic-filter-label {
    font-size: 13px;
    font-weight: 500;
    color: #92400e;
    white-space: nowrap;
}

.clinic-filter-container .form-select {
    min-width: 180px;
    font-size: 13px;
    border-color: #fbbf24;
}

/* Hide clinic filter for non-super-admin by default */
body:not(.super-admin) .requires-super-admin {
    display: none !important;
}

/* ============================================
   Global Patient Search - Header Bar
   ============================================ */

.header-patient-search {
    position: relative;
    width: 320px;
    min-width: 200px;
    flex-shrink: 1;
}

.header-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.header-search-input {
    padding-left: 36px !important;
    padding-right: 60px !important;
    height: 38px;
    font-size: 13px !important;
    border-radius: var(--radius-full) !important;
    background-color: var(--bg-secondary) !important;
    border-color: transparent !important;
    transition: all var(--transition-fast);
    width: 100%;
}

.header-search-input:hover {
    background-color: var(--bg-tertiary) !important;
}

.header-search-input:focus {
    background-color: var(--card-bg) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.header-search-shortcut {
    position: absolute;
    right: 10px;
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: inherit;
    pointer-events: none;
    line-height: 1.4;
}

.header-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1060;
    margin-top: 6px;
    min-width: 360px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-height: 400px;
    overflow-y: auto;
}

.header-search-results .autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.header-search-results .autocomplete-item:last-child {
    border-bottom: none;
}

.header-search-results .autocomplete-item:hover,
.header-search-results .autocomplete-item.active {
    background: var(--primary-light);
}

.header-search-result-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);
}

.header-search-result-mrn {
    font-size: 12px;
    color: var(--primary-color);
    margin-left: 8px;
    font-weight: 500;
}

.header-search-result-details {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.header-search-results .autocomplete-loading,
.header-search-results .autocomplete-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Payer autocomplete dropdown (insurance form) */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1080;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
}

.autocomplete-dropdown .autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.autocomplete-dropdown .autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-dropdown .autocomplete-item:hover,
.autocomplete-dropdown .autocomplete-item.active {
    background: var(--primary-light, #e8f4fd);
}

.autocomplete-dropdown .autocomplete-item .payer-name {
    font-weight: 500;
}

.autocomplete-dropdown .autocomplete-item .payer-id {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
}

.autocomplete-dropdown .autocomplete-loading,
.autocomplete-dropdown .autocomplete-empty {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-muted);
}

/* PayerPicker (shared/components/PayerPicker.js): 44px minimum touch targets */
.payer-picker .payer-picker-input,
.payer-picker .payer-picker-chosen .btn {
    min-height: 44px;
}
.payer-picker .autocomplete-dropdown .autocomplete-item {
    min-height: 44px;
}
.payer-picker .autocomplete-dropdown .autocomplete-item.payer-picker-add,
.payer-picker .autocomplete-dropdown .autocomplete-item.payer-picker-create {
    font-weight: 500;
}
.payer-picker .min-w-0 {
    min-width: 0;
}

.content-area {
    flex: 1;
    padding: 24px;
}

/* ============================================
   Pages - Modern Healthcare Design
   ============================================ */

.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 24px;
}

.page-header .text-muted {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ============================================
   Schedule Filters - Modern Design
   ============================================ */

.schedule-filters-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}

.schedule-filters-card .card-body {
    padding: 16px 20px;
}

/* Filter Dropdown Buttons */
.schedule-filter-btn {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
}

.schedule-filter-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.schedule-filter-btn:focus {
    box-shadow: 0 0 0 3px var(--primary-light);
    border-color: var(--primary-color);
}

.schedule-filter-btn i {
    color: var(--text-muted);
    font-size: 14px;
}

.schedule-filter-btn:hover i {
    color: var(--primary-color);
}

/* Active filter state */
.schedule-filter-btn.has-filters {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.schedule-filter-btn.has-filters i {
    color: var(--primary-color);
}

/* Filter Dropdown Menu */
.schedule-filter-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    margin-top: 4px;
}

.schedule-filter-menu hr {
    border-color: var(--border-color);
    opacity: 0.5;
}

/* Filter Options */
.schedule-filter-option {
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    padding-left: 2rem;
}

.schedule-filter-option:hover {
    background: var(--bg-secondary);
}

.schedule-filter-option .form-check-input {
    margin-top: 0.2em;
    width: 16px;
    height: 16px;
    margin-left: -1.5rem;
    cursor: pointer;
}

.schedule-filter-option .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.schedule-filter-option .form-check-label {
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    line-height: 1.4;
}

/* Filter Groups */
.schedule-filter-group {
    padding: 0;
}

/* Filter Search Input */
.schedule-filter-search {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    font-size: 13px;
    padding: 8px 12px;
}

.schedule-filter-search:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Filter List */
.schedule-filter-list {
    border-radius: var(--radius-md);
}

.schedule-filter-list .form-check {
    padding: 8px 10px;
    margin: 0;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.schedule-filter-list .form-check:hover {
    background: var(--bg-secondary);
}

/* Clear Filters Button */
.schedule-filter-clear-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-md);
}

.schedule-filter-clear-btn:hover {
    background: var(--danger-bg);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* Schedule Filter Items (Patient/Provider selectable items) */
.schedule-filter-item {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-light);
}

.schedule-filter-item:last-child {
    border-bottom: none;
}

.schedule-filter-item:hover {
    background: var(--bg-secondary);
}

.schedule-filter-item .fw-medium {
    font-size: 13px;
    color: var(--text-primary);
}

.schedule-filter-item small {
    font-size: 11px;
}

/* Active filter button state */
.schedule-filter-btn.active {
    background: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.schedule-filter-btn.active i {
    color: var(--primary-color);
}

/* ============================================
   Cards - Modern Healthcare Design
   ============================================ */

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.card-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-light);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Stat Cards */
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-card.small-stat {
    padding: 16px 20px;
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-icon.bg-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1D4ED8 100%);
}

.stat-icon.bg-success {
    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
}

.stat-icon.bg-warning {
    background: linear-gradient(135deg, var(--warning-color) 0%, #D97706 100%);
}

.stat-icon.bg-danger {
    background: linear-gradient(135deg, var(--danger-color) 0%, #DC2626 100%);
}

.stat-icon.bg-info {
    background: linear-gradient(135deg, var(--info-color) 0%, #1D4ED8 100%);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 500;
}

/* ============================================
   Tables - Modern Healthcare Design
   ============================================ */

.table {
    margin: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table th {
    font-weight: 600;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    background: var(--bg-secondary);
}

.table td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 13px;
}

.table tbody tr {
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background: rgba(37, 99, 235, 0.04);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Variants */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-light);
}

.table-striped tbody tr:nth-of-type(odd):hover {
    background-color: rgba(37, 99, 235, 0.06);
}

/* Selected Row */
.table tbody tr.selected,
.table tbody tr.table-active {
    background-color: var(--primary-light) !important;
}

/* Table inside cards */
.card .table {
    margin: 0;
}

.card .table th:first-child,
.card .table td:first-child {
    padding-left: 20px;
}

.card .table th:last-child,
.card .table td:last-child {
    padding-right: 20px;
}

/* ============================================
   Status Badges - Modern Healthcare Design
   ============================================ */

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: all 0.15s ease;
    border: none;
}

/* Appointment Status Badges */
.status-scheduled {
    background: #EFF6FF;
    color: #1E40AF;
}

.status-confirmed {
    background: #F0FDF4;
    color: #166534;
}

.status-checkedin {
    background: #FEF3C7;
    color: #92400E;
}

.status-inprogress {
    background: #EDE9FE;
    color: #5B21B6;
}

.status-completed {
    background: #ECFDF5;
    color: #047857;
}

.status-noshow {
    background: #FEE2E2;
    color: #991B1B;
}

.status-cancelled {
    background: #F3F4F6;
    color: #6B7280;
}

/* Patient Status Badges */
.status-active {
    background: #ECFDF5;
    color: #047857;
}

.status-discharged {
    background: #FCE7F3;
    color: #BE185D;
}

.status-no-episode {
    background: #DBEAFE;
    color: #1D4ED8;
}

.status-inactive {
    background: #F3F4F6;
    color: #6B7280;
}

/* General Status Badges */
.status-pending {
    background: #FEF3C7;
    color: #92400E;
}

.status-approved {
    background: #ECFDF5;
    color: #047857;
}

.status-denied {
    background: #FEE2E2;
    color: #991B1B;
}

/* Bootstrap Badge Overrides - Modern Soft Design */
.badge {
    font-weight: 500;
    font-size: 11px;
    padding: 10px 12px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    text-transform: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.badge.bg-primary {
    background: #EEF2FF !important;
    color: #4338CA !important;
}

.badge.bg-success {
    background: #ECFDF5 !important;
    color: #047857 !important;
}

.badge.bg-warning {
    background: #FFFBEB !important;
    color: #B45309 !important;
}

.badge.bg-danger {
    background: #FEF2F2 !important;
    color: #B91C1C !important;
}

.badge.bg-info {
    background: #EFF6FF !important;
    color: #1D4ED8 !important;
}

.badge.bg-secondary {
    background: #F3F4F6 !important;
    color: #4B5563 !important;
}

.badge.bg-light {
    background: #F9FAFB !important;
    color: #6B7280 !important;
    border: 1px solid #E5E7EB !important;
}

.badge.bg-dark {
    background: #1F2937 !important;
    color: #F9FAFB !important;
}

/* Text-based badge variants for tables */
.badge.text-dark {
    color: #374151 !important;
}

/* ============================================
   Buttons - Modern Healthcare Design
   ============================================ */

.btn {
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
    font-size: 13px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.btn i,
.btn .bi {
    font-size: 13px;
    line-height: 1;
}

.btn:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    outline: none;
}

/* Primary Button - Modern Indigo */
.btn-primary {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4F46E5, #4338CA);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.btn-primary:active {
    background: #4338CA;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2);
}

.btn-primary:disabled {
    background: #A5B4FC;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Secondary Button - Soft Style */
.btn-secondary {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #475569;
}

.btn-secondary:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #334155;
}

/* Outline Primary - Modern Indigo */
.btn-outline-primary {
    background: transparent;
    border: 1.5px solid #6366F1;
    color: #6366F1;
}

.btn-outline-primary:hover {
    background: #EEF2FF;
    border-color: #4F46E5;
    color: #4F46E5;
}

/* Success Button - Modern Emerald */
.btn-success {
    background: linear-gradient(135deg, #10B981, #059669);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

/* Outline Success */
.btn-outline-success {
    background: transparent;
    border: 1.5px solid #10B981;
    color: #10B981;
}

.btn-outline-success:hover {
    background: #ECFDF5;
    border-color: #059669;
    color: #059669;
}

/* Danger Button - Modern Rose */
.btn-danger {
    background: linear-gradient(135deg, #F43F5E, #E11D48);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(244, 63, 94, 0.2);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #E11D48, #BE123C);
    color: white;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.35);
    transform: translateY(-1px);
}

/* Outline Danger */
.btn-outline-danger {
    background: transparent;
    border: 1.5px solid #F43F5E;
    color: #F43F5E;
}

.btn-outline-danger:hover {
    background: #FFF1F2;
    border-color: #E11D48;
    color: #E11D48;
}

/* Warning Button - Modern Amber */
.btn-warning {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #D97706, #B45309);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}

/* Info Button - Modern Sky */
.btn-info {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.2);
}

.btn-info:hover {
    background: linear-gradient(135deg, #0284C7, #0369A1);
    color: white;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
    transform: translateY(-1px);
}

/* Outline Info - Modern Sky */
.btn-outline-info {
    background: transparent;
    border: 1.5px solid #0EA5E9;
    color: #0EA5E9;
}

.btn-outline-info:hover {
    background: #F0F9FF;
    border-color: #0284C7;
    color: #0284C7;
}

.btn-outline-info:focus {
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25);
}

/* Light Button */
.btn-light {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    color: #475569;
}

.btn-light:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #334155;
}

/* Outline Secondary */
.btn-outline-secondary {
    background: transparent;
    border: 1.5px solid #CBD5E1;
    color: #64748B;
}

.btn-outline-secondary:hover {
    background: #F8FAFC;
    border-color: #94A3B8;
    color: #475569;
}

/* Action Buttons - Compact Style */
.btn-action {
    padding: 6px 12px;
    margin-right: 4px;
    border-radius: 8px;
}

.btn-action:last-child {
    margin-right: 0;
}

/* Button Sizes */
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 8px;
    gap: 5px;
}

.btn-sm i,
.btn-sm .bi {
    font-size: 11px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 12px;
}

/* Disabled State */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================
   Calendar - Modern Healthcare Design
   ============================================ */

#calendar {
    min-height: 600px;
}

.fc {
    --fc-border-color: var(--border-color);
    --fc-today-bg-color: rgba(37, 99, 235, 0.05);
    --fc-neutral-bg-color: var(--bg-light);
    --fc-page-bg-color: var(--card-bg);
}

.fc .fc-toolbar-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.fc .fc-button {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.2s ease;
    gap: 6px;
}

.fc .fc-button-primary {
    background: linear-gradient(135deg, #6366F1, #4F46E5);
    border: none;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.fc .fc-button-primary:not(:disabled):hover {
    background: linear-gradient(135deg, #4F46E5, #4338CA);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: #4338CA;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fc .fc-day-today {
    background: var(--primary-light) !important;
}

.fc .fc-col-header-cell {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}

.fc .fc-daygrid-day-number {
    color: var(--text-primary);
    font-weight: 500;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Calendar Events - Modern Light Block Display */
.fc-event,
.fc-daygrid-event,
.fc-daygrid-block-event {
    border-radius: 6px !important;
    padding: 0 !important;
    font-size: 11px !important;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin: 2px 0 4px 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
    overflow: hidden !important;
}

.fc-event:hover,
.fc-daygrid-event:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Event content styling */
.fc-daygrid-block-event .fc-event-main {
    padding: 6px 8px;
    overflow: hidden;
}

/* Hide default time display since we show it custom */
.fc-event-time {
    display: none !important;
}

/* Hide default title - we use custom rendering */
.fc-event-title {
    display: none !important;
}

/* Modern Event Content Layout - Light Theme */
.event-content-modern {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}

.event-provider {
    font-weight: 600;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Color inherited from parent textColor */
}

.event-patient {
    font-weight: 500;
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.event-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.event-type {
    font-size: 9px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.event-time {
    font-size: 9px;
    font-weight: 500;
    margin-top: 3px;
    opacity: 0.9;
}

/* Event Status Badges */
.event-status-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 5px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.badge-missed {
    background: #FEE2E2;
    color: #991B1B;
}

.badge-rescheduled {
    background: #FEF3C7;
    color: #92400E;
}

.badge-cancelled {
    background: #E5E7EB;
    color: #374151;
}

/* Claim status 9, Accepted: the PAYER took the claim into adjudication.
   Deliberately sits between Acknowledged (bg-secondary, grey, still at the
   clearinghouse) and Paid (bg-success, solid green, money received). Teal reads
   as progress toward green without being mistaken for either, and it does not
   reuse bg-info, which already means Ready far earlier in the workflow. */
.badge-claim-accepted {
    background: #CCFBF1;
    color: #115E59;
}

/* EDI 837P preview: raw X12, wraps rather than scrolling horizontally so
   long segments (loop 2400 in particular) stay readable without a second
   scrollbar inside the modal. */
.claim-edi-preview {
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 4px;
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 0;
}

/* Cancelled appointment styling */
.fc-event.cancelled-appointment {
    opacity: 0.7;
}

.cancelled-appointment .event-provider,
.cancelled-appointment .event-patient {
    text-decoration: line-through;
}

/* Missed appointment styling */
.fc-event.missed-appointment {
    box-shadow: 0 0 0 1px #DC2626, 0 1px 3px rgba(220, 38, 38, 0.2);
}

/* Calendar Legend */
#calendarLegend {
    background: var(--card-bg);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.legend-item {
    margin-right: 16px;
}

/* ============================================================
   CUSTOM SCHEDULE GRID (Google Calendar inspired)
   Lives at /Schedule. Rendered by ScheduleGridModule.js.
   Replaces FullCalendar on this page. See mocks/schedule-google-style.html
   for the static reference of the design.
   ============================================================ */
.sg-card {
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 10px;
    overflow: hidden;
}
.sg-topbar {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #dadce0;
    gap: 8px;
}
.sg-nav-btn {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3c4043;
    font-size: 15px;
}
.sg-nav-btn:hover { background: #f1f3f4; }
.sg-today {
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    color: #3c4043;
    font-weight: 500;
    cursor: pointer;
}
.sg-today:hover { background: #f1f3f4; }
.sg-title {
    flex: 1;
    padding-left: 10px;
    font-size: 17px;
    color: #202124;
    font-weight: 400;
}
.sg-view-toggle {
    display: inline-flex;
    border: 1px solid #dadce0;
    border-radius: 4px;
    overflow: hidden;
}
.sg-view-toggle button {
    background: #fff;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    color: #3c4043;
    font-weight: 500;
    cursor: pointer;
}
.sg-view-toggle button + button { border-left: 1px solid #dadce0; }
.sg-view-toggle button:hover { background: #f1f3f4; }
.sg-view-toggle button.active { background: #E8F0FE; color: #1B72BE; }

/* The grid itself — set by JS via inline grid-template-columns. */
.sg-grid {
    display: grid;
    position: relative;
}
.sg-grid.loading {
    display: block;
    min-height: 200px;
}

/* Sticky day headers */
.sg-dh {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: 10px 4px 12px;
    text-align: center;
    border-right: 1px solid #e8eaed;
    border-bottom: 1px solid #dadce0;
}
.sg-dh.sg-dh-corner { border-right: 1px solid #dadce0; }
.sg-dh .sg-dh-name {
    font-size: 11px;
    color: #5f6368;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.sg-dh .sg-dh-num {
    font-size: 22px;
    font-weight: 400;
    color: #3c4043;
    margin-top: 2px;
    line-height: 1;
}
.sg-dh.today .sg-dh-name { color: #1B72BE; font-weight: 600; }
.sg-dh.today .sg-dh-num {
    color: #fff;
    background: #1B72BE;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px auto 0;
    font-weight: 500;
    font-size: 16px;
}

/* Time column on the left */
.sg-time-col {
    background: #fff;
    border-right: 1px solid #dadce0;
}
.sg-time-label {
    height: 72px; /* must equal --sg-hour-height; we hard-code for safety */
    text-align: right;
    padding: 0 8px;
    font-size: 10px;
    color: #80868b;
    font-weight: 500;
    position: relative;
    top: -6px;
}
/* First label has no gridline above it; without this the -6px shift pushes
   its top half under the sticky day-header row and the card's overflow clip */
.sg-time-label:first-child { top: 0; }

/* Day column wrapper — relative for absolute-positioned cards */
.sg-day {
    position: relative;
    background: #fff;
    border-right: 1px solid #e8eaed;
}
.sg-day:last-child { border-right: 0; }
.sg-day.today { background: #f8fbff; }
.sg-day .sg-hour-cell {
    height: 72px;
    border-bottom: 1px solid #e8eaed;
    cursor: pointer;
}
.sg-day .sg-hour-cell:hover { background: rgba(27, 114, 190, 0.04); }

/* Red now-line on today's column */
.sg-now-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #ea4335;
    z-index: 4;
    pointer-events: none;
}
.sg-now-line::before {
    content: '';
    position: absolute;
    left: -4px; top: -4px;
    width: 10px; height: 10px;
    background: #ea4335;
    border-radius: 50%;
}

/* ===== APPOINTMENT CARD ===== */
.sg-appt {
    position: absolute;
    left: 2px;
    right: 2px;
    background: var(--sg-tint-bg, #DDF4FF);
    color: var(--sg-tint-text, #1A4264);
    border-left: 3px solid var(--sg-tint-edge, #1B72BE);
    border-radius: 4px;
    padding: 4px 6px 4px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 1px;
    transition: filter 0.15s, box-shadow 0.15s;
    /* overflow visible so hover popovers can escape; child text wraps own clip */
}
.sg-appt:hover {
    filter: brightness(0.96);
    z-index: 8;
    box-shadow: 0 1px 3px rgba(60,64,67,0.15), 0 4px 8px rgba(60,64,67,0.15);
}
.sg-appt .sg-a-head {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}
.sg-appt .sg-a-name {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.sg-appt .sg-a-time {
    font-size: 10.5px;
    opacity: 0.85;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Avatar — small initials circle. Reuses AvatarUtils class names where possible. */
.sg-av {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 8px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px #fff;
    overflow: hidden;
}
.sg-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sg-av.sg-av-lg { width: 26px; height: 26px; font-size: 10px; box-shadow: 0 0 0 2px #fff; }
.sg-av.sg-av-xs { width: 14px; height: 14px; font-size: 7px; box-shadow: 0 0 0 1px #fff; }
/* Deterministic per-id gradients (avatar without profile picture) */
.sg-av-c1 { background: linear-gradient(135deg, #38BDF8, #0284C7); }
.sg-av-c2 { background: linear-gradient(135deg, #34D399, #059669); }
.sg-av-c3 { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.sg-av-c4 { background: linear-gradient(135deg, #FB7185, #E11D48); }
.sg-av-c5 { background: linear-gradient(135deg, #FBBF24, #D97706); }
.sg-av-c6 { background: linear-gradient(135deg, #2DD4BF, #0D9488); }
.sg-av-c7 { background: linear-gradient(135deg, #818CF8, #4F46E5); }
.sg-av-c8 { background: linear-gradient(135deg, #F472B6, #BE185D); }

/* Tiny status dot — orange In Progress / green Completed / red missing-intake */
.sg-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9);
}
.sg-dot-ip   { background: #F59E0B; }
.sg-dot-done { background: #10B981; }
.sg-dot-miss { background: #DC2626; }

/* Tall card extras (60min+ cards get extra row) */
.sg-appt.sg-tall { padding: 6px 8px 6px 10px; gap: 4px; }
.sg-appt.sg-tall .sg-a-name { font-size: 13px; }
.sg-appt.sg-tall .sg-a-time { font-size: 11px; }
.sg-appt .sg-a-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    font-size: 10px;
    gap: 4px;
    overflow: hidden;
}
.sg-appt .sg-a-provider {
    display: flex; align-items: center; gap: 4px;
    opacity: 0.75;
    min-width: 0;
}
.sg-appt .sg-a-provider .sg-prov-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-appt .sg-a-chips { display: inline-flex; gap: 3px; flex-shrink: 0; }
.sg-appt .sg-a-chip {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.7);
    letter-spacing: 0.2px;
    display: inline-flex; align-items: center; gap: 2px;
}

/* ===== TYPE COLOUR PALETTES =====
   Mapped to AppointmentType enum (0=New Patient, 1=Follow-Up,
   2=Annual Physical, 3=Wellness, 4=Consultation, 5=Telehealth,
   6=Procedure, 7=Urgent, 8=Lab Review, 9=Medication Review,
   10/11=Longevity). Side strip + tint stay in sync. */
.sg-appt.sg-t-followup   { --sg-tint-bg: #DDF4FF; --sg-tint-text: #1A4264; --sg-tint-edge: #1B72BE; }
.sg-appt.sg-t-newpatient { --sg-tint-bg: #D9F5E2; --sg-tint-text: #0F4023; --sg-tint-edge: #16A34A; }
.sg-appt.sg-t-telehealth { --sg-tint-bg: #E7DEFC; --sg-tint-text: #3D1F87; --sg-tint-edge: #7C3AED; }
.sg-appt.sg-t-procedure  { --sg-tint-bg: #FBDDE9; --sg-tint-text: #6B1442; --sg-tint-edge: #DB2777; }
.sg-appt.sg-t-physical   { --sg-tint-bg: #FBECC7; --sg-tint-text: #5C3A08; --sg-tint-edge: #D97706; }
.sg-appt.sg-t-consult    { --sg-tint-bg: #C7EEF6; --sg-tint-text: #0E4759; --sg-tint-edge: #0891B2; }
.sg-appt.sg-t-urgent     { --sg-tint-bg: #FEE2E2; --sg-tint-text: #7F1D1D; --sg-tint-edge: #DC2626; }
.sg-appt.sg-t-labreview  { --sg-tint-bg: #E0F2FE; --sg-tint-text: #075985; --sg-tint-edge: #0EA5E9; }
.sg-appt.sg-t-medreview  { --sg-tint-bg: #FCE7F3; --sg-tint-text: #831843; --sg-tint-edge: #DB2777; }
.sg-appt.sg-t-longevity  { --sg-tint-bg: #ECFCCB; --sg-tint-text: #365314; --sg-tint-edge: #65A30D; }

/* States */
.sg-appt.sg-is-missed {
    --sg-tint-bg: #FCE8E8;
    --sg-tint-text: #7F1D1D;
    --sg-tint-edge: #DC2626;
    background-image: repeating-linear-gradient(
        -45deg, transparent 0 6px, rgba(220,38,38,0.06) 6px 12px);
}
.sg-appt.sg-is-cancelled { opacity: 0.55; filter: grayscale(0.5); }
.sg-appt.sg-is-cancelled .sg-a-name { text-decoration: line-through; }

/* Corner overlay badge (top-right of card) */
.sg-corner-chip {
    position: absolute;
    top: 3px; right: 4px;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.4px;
    color: #fff;
    background: #DC2626;
    z-index: 2;
}
.sg-corner-chip.sg-cancel  { background: #6b7280; }
.sg-corner-chip.sg-resched { background: #92400E; }

/* ===== OVERLAP HANDLING ===== */
.sg-appt.sg-col-2-l { right: calc(50% + 1px); }
.sg-appt.sg-col-2-r { left: calc(50% + 1px); }
.sg-appt.sg-col-3-l { right: calc(66.66% + 1px); }
.sg-appt.sg-col-3-m { left: calc(33.33% + 1px); right: calc(33.33% + 1px); }
.sg-appt.sg-col-3-r { left: calc(66.66% + 1px); }

.sg-more {
    position: absolute;
    background: rgba(60,64,67,0.08);
    border-radius: 4px;
    font-size: 11px;
    color: #3c4043;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 4px;
    padding: 0 6px;
    z-index: 3;
    /* overflow:visible so hover popover can escape — same trick as .sg-appt */
}
.sg-more:hover { background: rgba(60,64,67,0.14); }
.sg-more .sg-av-stack { display: inline-flex; }
.sg-more .sg-av-stack .sg-av {
    margin-left: -4px;
    width: 14px; height: 14px;
    font-size: 7px;
    box-shadow: 0 0 0 1.5px #fff;
}
.sg-more .sg-av-stack .sg-av:first-child { margin-left: 0; }

/* ===== HOVER POPOVER ===== */
.sg-pop {
    position: absolute;
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(60,64,67,0.22), 0 4px 12px rgba(60,64,67,0.14);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
    pointer-events: none;
    overflow: hidden;
    /* If somehow the popover is taller than viewport (lots of content) it
       scrolls internally instead of getting clipped */
    max-height: calc(100vh - 24px);
    /* default direction set by JS via classes below */
    top: -8px;
    left: calc(100% + 10px);
    transform: translateX(-6px);
}
.sg-pop.sg-pop-right { top: -8px;   left: calc(100% + 10px); right: auto; bottom: auto; transform: translateX(-6px); }
.sg-pop.sg-pop-left  { top: -8px;   right: calc(100% + 10px); left: auto; bottom: auto; transform: translateX(6px); }
.sg-pop.sg-pop-below { top: calc(100% + 8px); left: 0; right: auto; bottom: auto; transform: translateY(-6px); }
.sg-pop.sg-pop-above { bottom: calc(100% + 8px); left: 0; right: auto; top: auto; transform: translateY(6px); }
.sg-appt:hover .sg-pop {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    transition-delay: 0.18s;
    pointer-events: auto;
}

.sg-pop-header {
    background: var(--sg-tint-bg, #DDF4FF);
    color: var(--sg-tint-text, #1A4264);
    padding: 14px 16px 12px;
    border-bottom: 1px solid #e8eaed;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sg-pop-header .sg-av {
    width: 38px; height: 38px;
    font-size: 12px;
    box-shadow: 0 0 0 2px #fff;
}
.sg-pop-id { flex: 1; min-width: 0; }
.sg-pop-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--sg-tint-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sg-pop-mrn {
    font-size: 11px;
    margin-top: 1px;
    opacity: 0.72;
    font-weight: 500;
}
.sg-pop-status-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff;
}

.sg-pop-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 13px;
}
.sg-pop-time {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: #202124;
}
.sg-pop-time i { color: #5f6368; font-size: 14px; }
.sg-pop-duration { font-size: 12px; font-weight: 500; color: #5f6368; }
.sg-pop-type {
    align-self: flex-start;
    background: var(--sg-tint-bg);
    color: var(--sg-tint-text);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.1px;
}
.sg-pop-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #e8eaed;
}
.sg-pop-row:first-of-type { border-top: 0; padding-top: 0; }
.sg-pop-row .sg-pop-ico {
    color: #80868b;
    font-size: 16px;
    width: 18px;
    text-align: center;
    margin-top: 1px;
    flex-shrink: 0;
}
.sg-pop-row .sg-pop-content { flex: 1; min-width: 0; }
.sg-pop-row .sg-pop-label {
    font-size: 11px;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 3px;
}
.sg-pop-row .sg-pop-value {
    font-size: 13px;
    color: #202124;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.sg-pop-notes {
    font-size: 12px;
    color: #3c4043;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2px;
}
.sg-pop-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.sg-pop-chip {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
}
.sg-pop-chip.intake     { background: #FEF3C7; color: #92400E; }
.sg-pop-chip.intake-bad { background: #FEE2E2; color: #991B1B; }
.sg-pop-chip.intake-ok  { background: #DCFCE7; color: #166534; }
.sg-pop-chip.ip         { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; }
.sg-pop-chip.done       { background: linear-gradient(135deg, #10B981, #059669); color: #fff; }
.sg-pop-chip.missed     { background: #FEE2E2; color: #991B1B; }
.sg-pop-chip.cancel     { background: #E5E7EB; color: #374151; }

/* ===== "+N MORE" HOVER LIST POPOVER =====
   When 4+ appointments overlap a time slot, the "+N more" pill replaces
   the 3rd card. Hovering it opens a list popover showing every hidden
   appointment with patient avatar + name + time + type accent. Clicking
   a row opens that appointment's detail. Reuses the same .sg-pop-{dir}
   classes for smart 4-direction positioning. */
.sg-more-pop {
    position: absolute;
    width: 280px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(60,64,67,0.22), 0 4px 12px rgba(60,64,67,0.14);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
    pointer-events: none;
    overflow: hidden;
    max-height: calc(100vh - 24px);
    /* default direction set by JS via .sg-pop-{right|left|above|below} */
    top: -8px;
    left: calc(100% + 10px);
    transform: translateX(-6px);
    text-align: left;
    font-weight: 400;
    color: #202124;
    cursor: default;
}
.sg-more-pop.sg-pop-right { top: -8px;   left: calc(100% + 10px); right: auto; bottom: auto; transform: translateX(-6px); }
.sg-more-pop.sg-pop-left  { top: -8px;   right: calc(100% + 10px); left: auto; bottom: auto; transform: translateX(6px); }
.sg-more-pop.sg-pop-below { top: calc(100% + 8px); left: 0; right: auto; bottom: auto; transform: translateY(-6px); }
.sg-more-pop.sg-pop-above { bottom: calc(100% + 8px); left: 0; right: auto; top: auto; transform: translateY(6px); }
.sg-more:hover .sg-more-pop {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    transition-delay: 0.18s;
    pointer-events: auto;
}
.sg-mp-header {
    padding: 11px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid #e8eaed;
    background: #fafbfc;
}
.sg-mp-list {
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
}
.sg-mp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 14px;
    cursor: pointer;
    transition: background 0.12s;
    border-left: 3px solid transparent;
    font-size: 13px;
    line-height: 1.3;
}
.sg-mp-row:hover { background: #f1f3f4; }
.sg-mp-row.sg-t-followup   { border-left-color: #1B72BE; }
.sg-mp-row.sg-t-newpatient { border-left-color: #16A34A; }
.sg-mp-row.sg-t-telehealth { border-left-color: #7C3AED; }
.sg-mp-row.sg-t-procedure  { border-left-color: #DB2777; }
.sg-mp-row.sg-t-physical   { border-left-color: #D97706; }
.sg-mp-row.sg-t-consult    { border-left-color: #0891B2; }
.sg-mp-row.sg-t-urgent     { border-left-color: #DC2626; }
.sg-mp-row.sg-t-labreview  { border-left-color: #0EA5E9; }
.sg-mp-row.sg-t-medreview  { border-left-color: #DB2777; }
.sg-mp-row.sg-t-longevity  { border-left-color: #65A30D; }
.sg-mp-row.is-missed       { background: rgba(220,38,38,0.04); }
.sg-mp-row.is-missed:hover { background: rgba(220,38,38,0.08); }
.sg-mp-row .sg-av { width: 26px; height: 26px; font-size: 10px; }
.sg-mp-info { flex: 1; min-width: 0; }
.sg-mp-name {
    font-size: 13px;
    font-weight: 600;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.1px;
}
.sg-mp-meta {
    font-size: 11px;
    color: #5f6368;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sg-mp-tag {
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
.sg-mp-tag.missed { background: #DC2626; }
.sg-mp-tag.cancel { background: #6b7280; }

/* ===== MONTH VIEW =====
   Simple 6×7 grid. Each cell shows date number + 2-3 appointment chips +
   "+N more" overflow link. Click an appointment opens detail modal. */
.sg-grid.sg-month {
    grid-template-columns: repeat(7, 1fr) !important;
    grid-auto-rows: minmax(110px, 1fr);
    border-bottom: 1px solid #dadce0;
}
.sg-month-dow {
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    color: #5f6368;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    background: #fff;
    border-right: 1px solid #e8eaed;
    border-bottom: 1px solid #dadce0;
}
.sg-month-dow:last-child { border-right: 0; }
.sg-month-cell {
    background: #fff;
    border-right: 1px solid #e8eaed;
    border-bottom: 1px solid #e8eaed;
    padding: 4px 6px 6px;
    min-height: 110px;
    overflow: hidden;
    position: relative;
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sg-month-cell.outside { background: #fafbfc; }
.sg-month-cell.outside .sg-month-day { color: #cbd5e1; }
.sg-month-cell.today { background: #f8fbff; }
.sg-month-cell:hover { background: rgba(27, 114, 190, 0.03); }
.sg-month-cell .sg-month-day {
    font-size: 13px;
    font-weight: 500;
    color: #3c4043;
    text-align: right;
    padding: 2px 4px;
    line-height: 1;
    margin-bottom: 2px;
}
.sg-month-cell.today .sg-month-day {
    color: #fff;
    background: #1B72BE;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    font-weight: 600;
    font-size: 12px;
}
.sg-month-chip {
    background: var(--sg-tint-bg, #DDF4FF);
    color: var(--sg-tint-text, #1A4264);
    border-left: 3px solid var(--sg-tint-edge, #1B72BE);
    border-radius: 3px;
    padding: 2px 5px 2px 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: filter 0.12s;
}
.sg-month-chip:hover { filter: brightness(0.95); }
.sg-month-chip .sg-month-chip-time { opacity: 0.7; font-size: 10px; flex-shrink: 0; }
.sg-month-chip .sg-month-chip-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sg-month-chip.sg-is-missed { background: #FCE8E8; color: #7F1D1D; border-left-color: #DC2626; }
.sg-month-chip.sg-is-cancelled { opacity: 0.6; text-decoration: line-through; }
.sg-month-chip.sg-t-followup   { --sg-tint-bg: #DDF4FF; --sg-tint-text: #1A4264; --sg-tint-edge: #1B72BE; }
.sg-month-chip.sg-t-newpatient { --sg-tint-bg: #D9F5E2; --sg-tint-text: #0F4023; --sg-tint-edge: #16A34A; }
.sg-month-chip.sg-t-telehealth { --sg-tint-bg: #E7DEFC; --sg-tint-text: #3D1F87; --sg-tint-edge: #7C3AED; }
.sg-month-chip.sg-t-procedure  { --sg-tint-bg: #FBDDE9; --sg-tint-text: #6B1442; --sg-tint-edge: #DB2777; }
.sg-month-chip.sg-t-physical   { --sg-tint-bg: #FBECC7; --sg-tint-text: #5C3A08; --sg-tint-edge: #D97706; }
.sg-month-chip.sg-t-consult    { --sg-tint-bg: #C7EEF6; --sg-tint-text: #0E4759; --sg-tint-edge: #0891B2; }
.sg-month-chip.sg-t-urgent     { --sg-tint-bg: #FEE2E2; --sg-tint-text: #7F1D1D; --sg-tint-edge: #DC2626; }
.sg-month-more {
    font-size: 11px;
    color: #1B72BE;
    cursor: pointer;
    padding: 2px 4px;
    font-weight: 500;
}
.sg-month-more:hover { text-decoration: underline; }

/* Calendar Event Status Ribbons - Modern Design */
.fc-event.has-status-ribbon,
.fc-daygrid-event.has-status-ribbon,
.fc-timegrid-event.has-status-ribbon {
    position: relative;
    overflow: visible;
}

.calendar-event-ribbon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3px 6px;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0 0 8px 8px;
    z-index: 1;
    line-height: 1;
    backdrop-filter: blur(4px);
}

/* In Progress - Amber */
.calendar-ribbon-in-progress {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #ffffff;
    box-shadow: 0 -1px 2px rgba(217, 119, 6, 0.3);
}

/* Completed - Soft Green */
.calendar-ribbon-completed {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #ffffff;
    box-shadow: 0 -1px 2px rgba(5, 150, 105, 0.3);
}

/* =============================================
   Care Episode Appointment Ribbons
   - Matches calendar/schedule status ribbons
   ============================================= */
.ce-appointment-item {
    position: relative;
    border-bottom: 1px solid #dee2e6;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ce-appointment-item:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.ce-appointment-item.has-ribbon {
    padding-bottom: 0;
}

.ce-appointment-ribbon {
    position: relative;
    width: 100%;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Missing Notes - Red */
.ce-ribbon-missing-notes {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: #ffffff;
}

/* Requires Signature - Purple */
.ce-ribbon-requires-signature {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #ffffff;
}

/* Completed - Green */
.ce-ribbon-completed {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #ffffff;
}

/* Adjust event padding when ribbon is present */
.fc-event.has-status-ribbon .fc-event-main,
.fc-daygrid-event.has-status-ribbon .fc-event-main {
    padding-bottom: 22px !important;
}

/* Status legend items */
.status-legend-item {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

.status-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 6px;
    display: inline-block;
}

/* ============================================
   Patient Autocomplete - KEY STYLING
   ============================================ */

.patient-autocomplete-container {
    position: relative;
}

.patient-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-height: 350px;
    overflow-y: auto;
    z-index: 1050;
    margin-top: 4px;
}

.patient-search-result {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.patient-search-result:last-child {
    border-bottom: none;
}

.patient-search-result:hover {
    background: rgba(59, 130, 246, 0.08);
}

.patient-result-main {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.patient-result-main strong {
    font-size: 14px;
    color: var(--text-primary);
}

.patient-result-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.selected-patient-card {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 12px 16px;
}

.selected-patient-card strong {
    color: #0369a1;
}

/* ============================================
   Clinical Notes
   ============================================ */

.note-content {
    background: #fafafa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    min-height: 300px;
    font-size: 14px;
    line-height: 1.7;
}

.note-content h1, .note-content h2, .note-content h3, 
.note-content h4, .note-content h5, .note-content h6 {
    margin-top: 24px;
    margin-bottom: 12px;
}

.note-content h1:first-child, .note-content h2:first-child {
    margin-top: 0;
}

.note-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.note-content th, .note-content td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}

.note-content th {
    background: #f5f5f5;
    font-weight: 600;
}

/* Trumbowyg Editor Customization */
.trumbowyg-box {
    border-radius: 8px;
    border-color: var(--border-color);
}

.trumbowyg-editor {
    min-height: 400px;
    font-size: 14px;
    line-height: 1.6;
    padding: 16px;
}

.trumbowyg-button-pane {
    background: #f8fafc;
}

/* Tabbed Clinical Notes Modal */
#tabbedClinicalNoteModal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

#tabbedClinicalNoteModal .nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

#tabbedClinicalNoteModal .nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

#tabbedClinicalNoteModal .nav-tabs .nav-link:hover {
    color: var(--primary-color);
    border-color: transparent;
}

#tabbedClinicalNoteModal .nav-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: transparent;
    border-bottom-color: var(--primary-color);
}

#tabbedClinicalNoteModal .tab-content {
    padding-top: 1rem;
}

#tabbedClinicalNoteModal .signed-note-view .note-content,
#tabbedClinicalNoteModal .draft-note-view .note-content {
    max-height: 60vh;
    overflow-y: auto;
}

/* Signature placeholder styling */
.signature-placeholder {
    border-bottom: 2px solid #333 !important;
    min-width: 250px !important;
    height: 50px !important;
    display: inline-block !important;
    margin: 10px 0;
}

/* ============================================
   Providers Grid - Modern Healthcare Design
   ============================================ */

.provider-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 24px;
    text-align: center;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.provider-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.provider-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.provider-card h5 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.provider-card .specialty {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 4px;
}

.provider-card .credentials {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 12px;
}

.provider-card .btn {
    margin-top: 8px;
}

/* ============================================
   Patient Detail Modal - Modern Healthcare Design
   ============================================ */

.patient-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.patient-avatar-lg {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.25);
}

/* ============================================
   PROFILE PICTURE AVATAR SYSTEM
   ============================================ */
.profile-avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    font-weight: 700;
    color: white;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 700;
    color: white;
}

/* Avatar sizes */
.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

.avatar-md {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.avatar-lg {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

.avatar-xl {
    width: 80px;
    height: 80px;
    font-size: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Initials fallback backgrounds */
.avatar-initials-patient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.avatar-initials-provider {
    /* background set inline via provider.Color */
    background: #2196F3;
}

/* Profile picture upload section */
.profile-picture-upload {
    margin-bottom: 1rem;
}

.profile-picture-preview {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-weight: 700;
    color: white;
}

.profile-picture-preview .profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ============================================
   EDITABLE AVATAR (Instagram/Facebook Style)
   ============================================ */

/* Clickable wrapper */
.avatar-upload-trigger {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.avatar-upload-trigger:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    transform: scale(1.03);
}

/* Dark hover overlay with camera icon */
.avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
    pointer-events: none;
    gap: 2px;
}

.avatar-upload-trigger:hover .avatar-overlay {
    opacity: 1;
}

.avatar-overlay i {
    color: white;
    font-size: 18px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.avatar-overlay-text {
    color: white;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    white-space: nowrap;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Persistent edit badge (bottom-right camera circle) */
.avatar-edit-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-color, #0d6efd);
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.avatar-edit-badge i {
    color: white;
    font-size: 12px;
}

.avatar-upload-trigger:hover .avatar-edit-badge {
    transform: scale(1.1);
}

/* Remove button (top-right red ×) */
.avatar-remove-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dc3545;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.avatar-remove-btn i {
    color: white;
    font-size: 11px;
}

.avatar-upload-trigger:hover .avatar-remove-btn {
    opacity: 1;
}

.avatar-remove-btn:hover {
    background: #bb2d3b;
    transform: scale(1.15);
}

/* Loading spinner overlay */
.avatar-loading-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.avatar-loading-overlay .spinner-border {
    width: 28px;
    height: 28px;
    color: white;
    border-width: 3px;
}

/* Success flash animation */
@keyframes avatarSuccessFlash {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.6); }
    50% { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.avatar-upload-success {
    animation: avatarSuccessFlash 1s ease-out;
}

/* Hidden file input */
.avatar-file-input {
    display: none !important;
}

/* Patient list avatar (small clickable in table) */
.patient-list-avatar {
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 50%;
}

.patient-list-avatar:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Avatar Zoom Modal */
.avatar-zoom-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    position: relative;
}

.avatar-zoom-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 50%;
    padding: 6px;
    filter: invert(1);
}

.avatar-zoom-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-zoom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-zoom-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: white;
}

/* Placeholder person icon for new entities (instead of "?") */
.avatar-placeholder-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.avatar-placeholder-icon i {
    font-size: 32px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1;
}

.avatar-sm .avatar-placeholder-icon i { font-size: 16px; }
.avatar-md .avatar-placeholder-icon i { font-size: 20px; }
.avatar-lg .avatar-placeholder-icon i { font-size: 28px; }
.avatar-xl .avatar-placeholder-icon i { font-size: 36px; }

.patient-info h3 {
    margin: 0 0 4px;
    font-size: 24px;
    color: var(--text-primary);
    font-weight: 600;
}

.patient-info .mrn {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
    font-family: 'Roboto Mono', 'SF Mono', monospace;
}

.patient-meta {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

.patient-meta i {
    margin-right: 4px;
    color: var(--primary-color);
}

/* ============================================
   Alerts - Modern Healthcare Design
   ============================================ */

/* Bootstrap Alert Overrides */
.alert {
    border-radius: var(--radius-lg);
    border: none;
    border-left: 4px solid;
    padding: 16px 20px;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
    border-left-color: var(--success-color);
}

.alert-danger {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-left-color: var(--danger-color);
}

.alert-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-left-color: var(--warning-color);
}

.alert-info {
    background: var(--info-bg);
    color: var(--info-text);
    border-left-color: var(--info-color);
}

.alert-primary {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-left-color: var(--primary-color);
}

.alert .btn-close {
    padding: 16px;
    opacity: 0.5;
}

.alert .btn-close:hover {
    opacity: 1;
}

/* Alert Items */
.alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-fast);
}

.alert-item:hover {
    background-color: var(--bg-light);
    margin: 0 -12px;
    padding: 12px;
    border-radius: var(--radius-md);
}

.alert-item:last-child {
    border-bottom: none;
}

.alert-item i {
    font-size: 18px;
    color: var(--text-muted);
}

.alert-item span {
    flex: 1;
    color: var(--text-secondary);
}

.alert-item strong {
    font-size: 18px;
    color: var(--text-primary);
}

/* A/R Aging */
.aging-bucket {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.aging-bucket:last-child {
    border-bottom: none;
}

/* Billing Summary Cards */
.billing-summary-cards {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.billing-summary-card {
    flex: 1;
    min-width: 200px;
    border-radius: var(--radius-xl, 16px);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}

.billing-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* Click-to-filter summary cards (UI Parity Audit P2 #17) */
.billing-summary-card-clickable {
    cursor: pointer;
}

.billing-summary-card-clickable:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.billing-summary-card-clickable.active {
    box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd) inset;
}

.billing-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.billing-card-content {
    flex: 1;
}

.billing-card-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.billing-card-label {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.8;
    margin-top: 2px;
}

.billing-card-blue {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}
.billing-card-blue .billing-card-icon {
    background: rgba(25,118,210,0.15);
    color: #1976d2;
}
.billing-card-blue .billing-card-value {
    color: #1565c0;
}

.billing-card-green {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}
.billing-card-green .billing-card-icon {
    background: rgba(56,142,60,0.15);
    color: #388e3c;
}
.billing-card-green .billing-card-value {
    color: #2e7d32;
}

.billing-card-teal {
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
}
.billing-card-teal .billing-card-icon {
    background: rgba(0,137,123,0.15);
    color: #00897b;
}
.billing-card-teal .billing-card-value {
    color: #00796b;
}

.billing-card-orange {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}
.billing-card-orange .billing-card-icon {
    background: rgba(239,108,0,0.15);
    color: #ef6c00;
}
.billing-card-orange .billing-card-value {
    color: #e65100;
}

/* Billing summary cards, RehabDox look (gradient fill, white text, compact).
   Scoped to .billing-cards-vivid (the Claims and EOB rows) so IMEHR-only screens that
   reuse the same card classes, such as the patient ledger, keep their own pastel style.
   Values mirror RehabDox styles.css "Billing Summary Cards - Gradient Style". */
.billing-cards-vivid .billing-summary-card {
    flex: none;
    min-width: 0;
    gap: 0;
    padding: 14px 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 72px;
}
.billing-cards-vivid .billing-summary-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.billing-cards-vivid .billing-card-blue   { background: linear-gradient(135deg, #4facfe 0%, #2c7be5 100%); }
.billing-cards-vivid .billing-card-green  { background: linear-gradient(135deg, #43e97b 0%, #38a169 100%); }
.billing-cards-vivid .billing-card-teal   { background: linear-gradient(135deg, #38f9d7 0%, #0d9488 100%); }
.billing-cards-vivid .billing-card-orange { background: linear-gradient(135deg, #fda085 0%, #f5603d 100%); }
.billing-cards-vivid .billing-summary-card .billing-card-icon {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    display: block;
    color: inherit;
    font-size: 32px;
    opacity: 0.85;
    margin-right: 16px;
    flex-shrink: 0;
}
.billing-cards-vivid .billing-summary-card .billing-card-content {
    flex: 1;
    min-width: 0;
}
.billing-cards-vivid .billing-summary-card .billing-card-value {
    color: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.billing-cards-vivid .billing-summary-card .billing-card-label {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
@media (max-width: 768px) {
    .billing-cards-vivid .billing-summary-card { padding: 14px 16px; min-height: 76px; }
    .billing-cards-vivid .billing-summary-card .billing-card-icon { font-size: 24px; margin-right: 12px; }
    .billing-cards-vivid .billing-summary-card .billing-card-value { font-size: 18px; }
    .billing-cards-vivid .billing-summary-card .billing-card-label { font-size: 11px; }
}

/* Billing Pagination */
.billing-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.billing-pagination-info {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
}

.billing-pagination-pages {
    display: flex;
    gap: 4px;
}

.billing-page-btn {
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--card-bg, #fff);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary, #1f2937);
}

.billing-page-btn:hover {
    background: var(--bg-secondary, #f3f4f6);
}

.billing-page-btn.active {
    background: var(--primary-color, #6366f1);
    color: white;
    border-color: var(--primary-color, #6366f1);
}

.billing-page-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Billing date inputs */
.billing-date-input {
    width: 140px;
}

/* Claim comment thread (UI Parity Audit P0 #4) */
.claim-comment-thread {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 8px);
}

.claim-comment-item {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.claim-comment-item:last-child {
    border-bottom: none;
}

.claim-comment-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.claim-comment-time {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
}

.claim-comment-text {
    font-size: 13px;
    color: var(--text-primary, #1f2937);
    white-space: pre-wrap;
    word-break: break-word;
}

.claim-comment-legacy {
    background: var(--bg-secondary, #f3f4f6);
    border-left: 3px solid var(--text-muted, #9ca3af);
}

.claim-comment-legacy-author {
    color: var(--text-muted, #6b7280);
}

.claim-comment-legacy-text {
    color: var(--text-muted, #6b7280);
    font-style: italic;
}

.claim-comment-locked {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

.claim-comment-count {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

.claim-comment-count-warn {
    color: #b45309;
}

.claim-comment-count-max {
    color: #dc2626;
    font-weight: 600;
}

@media (max-width: 768px) {
    .billing-summary-card {
        min-width: calc(50% - 12px);
        padding: 14px 16px;
    }
    .billing-card-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .billing-card-value {
        font-size: 18px;
    }
    .billing-card-label {
        font-size: 11px;
    }
    .billing-date-input {
        width: 120px;
    }
}

/* ============================================
   Form Styles - Modern Healthcare Design
   ============================================ */

.form-label {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-label.required::after {
    content: '*';
    color: var(--danger-color);
    margin-left: 4px;
    font-weight: 600;
}

.form-control, .form-select {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 10px 12px;
    font-size: 14px;
    background-color: var(--card-bg);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

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

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background-color: var(--card-bg);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-control-plaintext {
    padding: 10px 0;
    font-weight: 500;
    color: var(--text-primary);
}

/* Form Validation States */
.form-control.is-valid {
    border-color: var(--success-color);
}

.form-control.is-valid:focus {
    border-color: var(--success-color);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-control.is-invalid {
    border-color: var(--danger-color);
    background-color: var(--danger-bg);
}

.form-control.is-invalid:focus {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.invalid-feedback {
    color: var(--danger-text);
    font-size: 12px;
    margin-top: 4px;
}

.valid-feedback {
    color: var(--success-text);
    font-size: 12px;
    margin-top: 4px;
}

/* Checkbox and Radio */
.form-check-input {
    border-color: var(--border-medium);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-check-label {
    color: var(--text-primary);
}

/* Input Groups */
.input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* ============================================
   Modal Styles - Modern Healthcare Design
   ============================================ */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.show {
    opacity: 1;
}

.modal-content {
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: var(--shadow-xl);
    background: var(--card-bg);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 24px;
    background: var(--bg-light);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 18px;
}

.modal-header .btn-close {
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 24px;
    color: var(--text-primary);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    background: var(--bg-light);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    gap: 12px;
}

.modal-xl {
    max-width: 1140px;
}

.modal-lg {
    max-width: 800px;
}

/* Modal Animation */
.modal.fade .modal-dialog {
    transform: scale(0.95) translateY(-20px);
    transition: transform var(--transition-slow);
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

/* ============================================
   Toast - Modern Healthcare Design
   Enhanced for better readability
   ============================================ */

.toast {
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    min-width: 350px;
    max-width: 500px;
}

.toast.show-toast {
    border-width: 2px;
    border-style: solid;
}

.toast-header {
    padding: 12px 16px;
    font-weight: 700;
    font-size: 1.1rem;
    border-bottom-width: 2px;
}

.toast-header .btn-close {
    font-size: 1rem;
    padding: 8px;
}

.toast-body {
    padding: 16px;
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 500;
}

/* Toast container is click-through so a toast never swallows clicks on the page behind it (e.g. a modal Close button).
   Only the toast's own controls take pointer events again. */
.toast-container,
.toast-container .toast {
    pointer-events: none;
}

.toast-container .btn-close,
.toast-container button,
.toast-container a {
    pointer-events: auto;
}

/* Toast Container Positioning */
.toast-container {
    z-index: 9999;
}

/* Success Toast - Green theme */
.toast.toast-success {
    background: #d4edda !important;
    border-color: #28a745 !important;
}

.toast.toast-success .toast-header {
    background: #28a745;
    color: #ffffff;
    border-bottom-color: #1e7e34;
}

.toast.toast-success .toast-body {
    color: #155724;
    background: #d4edda;
}

/* Danger/Error Toast - Red theme */
.toast.toast-danger,
.toast.toast-error {
    background: #f8d7da !important;
    border-color: #dc3545 !important;
}

.toast.toast-danger .toast-header,
.toast.toast-error .toast-header {
    background: #dc3545;
    color: #ffffff;
    border-bottom-color: #c82333;
}

.toast.toast-danger .toast-body,
.toast.toast-error .toast-body {
    color: #721c24;
    background: #f8d7da;
}

/* Warning Toast - Yellow/Orange theme */
.toast.toast-warning {
    background: #fff3cd !important;
    border-color: #ffc107 !important;
}

.toast.toast-warning .toast-header {
    background: #e0a800;
    color: #000000;
    border-bottom-color: #d39e00;
}

.toast.toast-warning .toast-body {
    color: #856404;
    background: #fff3cd;
}

/* Info Toast - Blue theme */
.toast.toast-info {
    background: #d1ecf1 !important;
    border-color: #17a2b8 !important;
}

.toast.toast-info .toast-header {
    background: #17a2b8;
    color: #ffffff;
    border-bottom-color: #138496;
}

.toast.toast-info .toast-body {
    color: #0c5460;
    background: #d1ecf1;
}

/* Primary Toast - Blue theme */
.toast.toast-primary {
    background: #cce5ff !important;
    border-color: #007bff !important;
}

.toast.toast-primary .toast-header {
    background: #007bff;
    color: #ffffff;
    border-bottom-color: #0069d9;
}

.toast.toast-primary .toast-body {
    color: #004085;
    background: #cce5ff;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        /* Use dvh for mobile browsers that support it, fallback to vh */
        height: 100vh;
        height: 100dvh;
        max-height: -webkit-fill-available;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    /* Ensure sidebar navigation is scrollable and footer stays visible */
    .sidebar-nav {
        flex: 1;
        overflow-y: auto;
        min-height: 0; /* Important for flexbox scrolling */
    }

    /* Ensure sidebar footer (logout) is always visible */
    .sidebar-footer {
        flex-shrink: 0;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .header-patient-search {
        width: 200px;
        min-width: 150px;
    }

    .header-search-shortcut {
        display: none !important;
    }

    .header-search-input {
        padding-right: 12px !important;
    }
}

@media (max-width: 767.98px) {

    .main-header {
        flex-wrap: wrap;
    }

    .header-patient-search {
        order: 10;
        width: 100%;
        min-width: unset;
        margin-top: 0;
    }

    .header-search-results {
        min-width: unset;
    }
    .content-area {
        padding: 16px;
    }
    
    .page-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    .patient-header {
        flex-direction: column;
        text-align: center;
    }
    
    .patient-meta {
        flex-direction: column;
        gap: 8px;
    }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .sidebar,
    .main-header,
    .modal-header .btn-close,
    .modal-footer {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
    }

    .modal {
        position: static;
        display: block;
    }

    .modal-dialog {
        margin: 0;
        max-width: 100%;
    }

    .modal-content {
        border: none;
        box-shadow: none;
    }

    .note-content {
        border: none;
        background: white;
    }
}

/* ============================================
   Global Loading Overlay
   ============================================ */

.global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.global-loader.d-none {
    display: none !important;
}

.loader-content {
    background: var(--card-bg);
    padding: 40px 60px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.loader-content .spinner-border {
    width: 3rem;
    height: 3rem;
}

.loader-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 0;
}

/* ============================================
   Initial App Loading Screen - Light Theme
   ============================================ */

.app-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #BFDBFE 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-loading-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563EB' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.app-loading-screen.d-none {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-loading-content {
    text-align: center;
    color: var(--text-primary);
    position: relative;
    z-index: 1;
}

.app-loading-logo {
    width: 100px;
    height: 100px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: pulse 2s infinite;
}

.app-loading-logo .app-loading-logo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 24px;
}

.app-loading-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.app-loading-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

.app-loading-status {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 0;
}

.app-loading-screen .spinner-border {
    color: var(--primary-color) !important;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 12px 40px rgba(37, 99, 235, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 16px 50px rgba(37, 99, 235, 0.4);
    }
}

/* ============================================
   Admin Dashboard - Redesign
   ============================================ */

/* Clickable summary widgets */
.stat-card.dashboard-widget.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
}

.stat-card.dashboard-widget.clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-card.dashboard-widget.clickable:active {
    transform: translateY(-2px);
}

/* Compact dashboard widgets */
.stat-card.dashboard-widget.compact {
    padding: 0.5rem 0.75rem;
    min-height: auto;
}

.stat-card.dashboard-widget.compact .stat-icon-sm {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: white;
    flex-shrink: 0;
}

.stat-card.dashboard-widget.compact .stat-content {
    display: flex;
    flex-direction: column;
}

.stat-card.dashboard-widget.compact .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-card.dashboard-widget.compact .stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Dashboard header compact */
.dashboard-header-compact {
    padding: 0.5rem 0;
}

.dashboard-header-compact h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Dashboard card compact */
.dashboard-card-compact {
    max-height: 280px;
}

.dashboard-card-compact .card-body {
    max-height: 220px;
    overflow-y: auto;
}

.dashboard-card-compact .card-header h6 {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Add spacing between dashboard cards in sidebar */
.grid-sidebar .dashboard-card-compact + .dashboard-card-compact,
.show-only-therapist .dashboard-card-compact + .dashboard-card-compact {
    margin-top: 5px;
}

/* Orange and Purple colors for new widgets */
.bg-orange {
    background-color: #f97316 !important;
}

.bg-orange-light {
    background-color: #fff7ed !important;
}

.text-orange {
    color: #ea580c !important;
}

.bg-purple {
    background-color: #8b5cf6 !important;
}

.bg-purple-light {
    background-color: #f5f3ff !important;
}

.text-purple {
    color: #7c3aed !important;
}

.bg-info-light {
    background-color: #ecfeff !important;
}

.text-info {
    color: #0891b2 !important;
}

.stat-icon-sm.bg-orange {
    background-color: #f97316 !important;
}

.stat-icon-sm.bg-purple {
    background-color: #8b5cf6 !important;
}

/* Orange and Purple button variants - Modern Style */
.btn-outline-orange {
    color: #EA580C;
    border: 1.5px solid #FB923C !important;
    background-color: transparent;
}

.btn-outline-orange:hover,
.btn-outline-orange:focus {
    color: #EA580C;
    background-color: #FFF7ED;
    border-color: #EA580C !important;
}

.btn-outline-purple {
    color: #7C3AED;
    border: 1.5px solid #A78BFA !important;
    background-color: transparent;
}

.btn-outline-purple:hover,
.btn-outline-purple:focus {
    color: #7C3AED;
    background-color: #F5F3FF;
    border-color: #7C3AED !important;
}

/* Solid color variants */
.btn-orange {
    background: linear-gradient(135deg, #F97316, #EA580C);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.2);
}

.btn-orange:hover {
    background: linear-gradient(135deg, #EA580C, #C2410C);
    color: white;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
    transform: translateY(-1px);
}

.btn-purple {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    border: none;
    color: white;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
}

.btn-purple:hover {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
    transform: translateY(-1px);
}

/* Dashboard widget item card (for use in cards) */
.dashboard-widget-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: white;
    transition: all 0.2s ease;
}

.dashboard-widget-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-widget-item:last-child {
    margin-bottom: 0;
}

.dashboard-widget-item .item-title {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.dashboard-widget-item .item-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dashboard-widget-item .item-contact {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.dashboard-widget-item .item-contact .contact-link {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.dashboard-widget-item .item-contact .contact-link:hover {
    color: var(--primary-color);
}

.dashboard-widget-item .patient-link {
    color: var(--primary-color) !important;
    transition: color 0.2s ease;
}

.dashboard-widget-item .patient-link:hover {
    color: var(--primary-dark, #0056b3) !important;
    text-decoration: underline !important;
}

/* Patient link in modal tables */
.patient-link-modal {
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.patient-link-modal:hover {
    color: var(--primary-color) !important;
    text-decoration: underline !important;
}

.dashboard-widget-item .item-action {
    font-size: 0.75rem;
}

/* Missing Notes Action Buttons */
.missing-notes-actions {
    min-width: fit-content;
}

.missing-notes-btn-primary {
    font-size: 0.75rem;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-color: var(--primary-color);
    color: var(--primary-color);
    min-width: fit-content;
}

.missing-notes-btn-primary:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.missing-notes-btn-view {
    font-size: 0.75rem;
    padding: 0.3rem 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #6c757d;
    color: #6c757d;
}

.missing-notes-btn-view:hover {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

.missing-notes-btn-text {
    font-size: 0.75rem;
}

/* Responsive behavior for Missing Notes buttons */
@media (max-width: 768px) {
    .missing-notes-btn-text {
        display: none;
    }

    .missing-notes-btn-primary {
        padding: 0.3rem 0.45rem;
        justify-content: center;
    }
}

/* Ensure buttons don't wrap on smaller screens */
@media (max-width: 576px) {
    .dashboard-widget-item .d-flex.gap-2 {
        gap: 0.5rem !important;
    }

    .missing-notes-actions {
        min-width: auto;
    }
}

/* Dashboard section cards */
.dashboard-section {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.dashboard-section .card-header {
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.dashboard-section .card-body {
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

.dashboard-section .table {
    margin-bottom: 0;
}

.dashboard-section .table th {
    background-color: #f8fafc;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    padding: 0.75rem 1rem;
}

.dashboard-section .table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

/* Section highlight animation */
.section-highlight {
    animation: sectionHighlight 2s ease-out;
}

@keyframes sectionHighlight {
    0% {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
    }
    100% {
        box-shadow: none;
    }
}

/* Care episode details row */
.episode-details-row {
    background-color: #f8fafc;
}

.episode-details-row td {
    padding: 0 !important;
}

.care-episode-row {
    cursor: pointer;
}

.care-episode-row:hover {
    background-color: #f1f5f9;
}

/* Badge improvements */
/*.badge {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}
*/
/* Action buttons in tables */
.btn-action {
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
}

.btn-group-sm > .btn {
    padding: 0.35rem 0.5rem;
}

/* Table row hover effect */
.table-hover tbody tr:hover {
    background-color: #f8fafc;
}

/* Loading spinner in buttons */
.btn .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Dashboard empty state */
.text-center.text-muted.py-3 {
    padding: 2rem !important;
    font-size: 0.95rem;
}

/* Responsive adjustments for dashboard */
@media (max-width: 768px) {
    .dashboard-section .card-body {
        max-height: 300px;
    }

    .stat-card.dashboard-widget.clickable {
        margin-bottom: 0.5rem;
    }

    .btn-group-sm > .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.8rem;
    }
}

/* Smooth scrolling for section navigation */
html {
    scroll-behavior: smooth;
}

/* ============================================
   Reports Section Styles
   ============================================ */

/* Report Card */
.report-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.report-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.report-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* Visit Grid Styles */
.visit-grid-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    max-height: calc(100vh - 400px);
    min-height: 300px;
}

.visit-grid-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.visit-grid-table thead {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
}

.visit-grid-table th {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 6px;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

/* Frozen columns (Patient, Therapist) */
.visit-grid-table th.frozen,
.visit-grid-table td.frozen {
    position: sticky;
    background: #fff;
    z-index: 10;
}

.visit-grid-table th.frozen {
    z-index: 25;
}

.visit-grid-table th.frozen-patient,
.visit-grid-table td.frozen-patient {
    left: 0;
    min-width: 180px;
    max-width: 180px;
}

.visit-grid-table th.frozen-therapist,
.visit-grid-table td.frozen-therapist {
    left: 180px;
    min-width: 100px;
    max-width: 100px;
}

.visit-grid-table td {
    border: 1px solid #e2e8f0;
    padding: 6px;
    text-align: center;
    vertical-align: middle;
    background: #fff;
}

/* Clickable cells */
.visit-grid-table td.clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.visit-grid-table td.clickable:hover {
    background-color: #f0f9ff;
}

/* Day column cells */
.visit-grid-table td.day-cell {
    min-width: 28px;
    max-width: 28px;
    padding: 4px 2px;
    font-weight: 600;
}

/* Visit code colors */
.visit-code {
    display: inline-block;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0 4px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}

/* Appointment Type Colors - V (Visit/Follow Up) = Green */
.visit-code-V {
    background-color: #dcfce7;
    color: #166534;
}

/* Appointment Type Colors - E (Initial Evaluation) = Blue */
.visit-code-E {
    background-color: #dbeafe;
    color: #1e40af;
}

/* Appointment Type Colors - I (Re-Evaluation/Interim) = Purple */
.visit-code-I {
    background-color: #f3e8ff;
    color: #6b21a8;
}

/* Appointment Type Colors - D (Discharge) = Orange */
.visit-code-D {
    background-color: #ffedd5;
    color: #9a3412;
}

/* Status Indicator Colors - (C) Cancelled = Gray */
.visit-code-cancelled {
    background-color: #e5e7eb;
    color: #6b7280;
}

/* Status Indicator Colors - (M) Missed = Red */
.visit-code-missed {
    background-color: #fee2e2;
    color: #b91c1c;
}

.visit-code-A {
    background-color: #fef9c3;
    color: #854d0e;
}

.visit-code-C {
    background-color: #fee2e2;
    color: #b91c1c;
}

.visit-code-F {
    background-color: #cffafe;
    color: #0e7490;
}

.visit-code-H {
    background-color: #ccfbf1;
    color: #0f766e;
}

.visit-code-N {
    background-color: #e5e7eb;
    color: #4b5563;
}

.visit-code-R {
    background-color: #ffedd5;
    color: #c2410c;
}

/* Legend codes */
.visit-code-legend {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 11px;
    margin-right: 2px;
}

/* Summary columns */
.visit-grid-table td.summary-cell {
    background-color: #f8fafc;
    font-weight: 600;
}

/* Row hover */
.visit-grid-table tbody tr:hover td {
    background-color: #f0f9ff;
}

.visit-grid-table tbody tr:hover td.frozen {
    background-color: #e0f2fe;
}

/* Alternating rows */
.visit-grid-table tbody tr:nth-child(even) td {
    background-color: #fafafa;
}

.visit-grid-table tbody tr:nth-child(even):hover td {
    background-color: #f0f9ff;
}

/* Patient and therapist name cells */
.patient-name-cell {
    text-align: left !important;
    font-weight: 500;
}

.patient-name-link {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.patient-name-link:hover {
    text-decoration: underline;
}

.therapist-name-link {
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
}

.therapist-name-link:hover {
    color: var(--primary-color);
}

/* Insurance cell */
.insurance-cell {
    font-size: 10px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Report header info */
.report-header-info {
    font-size: 14px;
}

/* Report footer */
.report-footer {
    font-size: 13px;
}

.report-legend {
    line-height: 2;
}

/* Print styles for reports */
@media print {
    .sidebar,
    .main-header,
    .page-header,
    .btn,
    .card-header .btn-group,
    #reportsListView,
    .report-card {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .card {
        border: none !important;
        box-shadow: none !important;
    }

    .visit-grid-wrapper {
        max-height: none !important;
        overflow: visible !important;
    }

    .visit-grid-table {
        font-size: 10px;
    }

    .visit-grid-table th,
    .visit-grid-table td {
        padding: 4px 3px;
    }

    .visit-code {
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 9px;
    }

    .report-footer {
        display: block !important;
    }

    @page {
        size: landscape;
        margin: 0.5cm;
    }
}

/* Full width mode for reports (hides sidebar) */
.main-content.report-fullwidth {
    margin-left: 0 !important;
    width: 100% !important;
}

.main-content.report-fullwidth .visit-grid-wrapper {
    max-height: calc(100vh - 320px);
}

/* Responsive adjustments for reports */
@media (max-width: 768px) {
    .visit-grid-wrapper {
        max-height: calc(100vh - 350px);
    }

    .visit-grid-table {
        font-size: 11px;
    }

    .visit-grid-table th.frozen-patient,
    .visit-grid-table td.frozen-patient {
        min-width: 120px;
        max-width: 120px;
    }

    .visit-grid-table th.frozen-therapist,
    .visit-grid-table td.frozen-therapist {
        left: 120px;
        min-width: 80px;
        max-width: 80px;
    }
}

/* ============================================
   Analytical Reports Layout
   ============================================ */

.reports-layout {
    display: flex;
    height: calc(100vh - 70px);
    margin: -24px;
    overflow: hidden;
}

.reports-sidebar {
    width: 220px;
    min-width: 220px;
    background: #fff;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.reports-sidebar-header {
    padding: 12px 12px 8px;
}

.reports-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fa;
}

.reports-nav {
    padding: 0 8px;
}

.reports-nav-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    margin-bottom: 2px;
}

.reports-nav-item:hover {
    background: #f0f4f8;
    color: var(--text-primary, #212529);
    text-decoration: none;
}

.reports-nav-item.active {
    background: var(--primary-color, #0d6efd);
    color: #fff;
}

.reports-nav-item.active .reports-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff;
}

.reports-nav-item i {
    font-size: 16px;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.reports-nav-item span:first-of-type {
    flex: 1;
}

.reports-badge {
    font-size: 11px;
}

.report-list-card {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    background: #fff;
}

.report-list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color, #0d6efd);
}

.report-list-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.report-kpi-card {
    background: #fff;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.report-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary, #212529);
    line-height: 1.2;
}

.report-kpi-label {
    font-size: 12px;
    color: var(--text-secondary, #6c757d);
    margin-top: 4px;
}

.report-kpi-change {
    font-size: 11px;
    margin-top: 4px;
}

.report-kpi-change.positive {
    color: #198754;
}

.report-kpi-change.negative {
    color: #dc3545;
}

.report-kpi-change.neutral {
    color: var(--text-secondary, #6c757d);
}

/* Print overrides for analytical reports */
@media print {
    .reports-sidebar,
    .reports-sidebar-header,
    #reportFiltersCard,
    #exitReportsBtn,
    .reports-search {
        display: none !important;
    }

    .reports-layout {
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    .reports-content {
        padding: 0 !important;
        overflow: visible !important;
    }

    .report-kpi-card {
        border: 1px solid #ccc !important;
    }
}

/* Responsive for analytical reports */
@media (max-width: 768px) {
    .reports-layout {
        flex-direction: column;
        height: auto;
    }

    .reports-sidebar {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color, #dee2e6);
    }

    .reports-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .reports-nav-item {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ============================================
   Cancelled Appointment Styling
   ============================================ */
.cancelled-appointment {
    opacity: 0.7;
    text-decoration: line-through;
    position: relative;
}

.cancelled-appointment::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 5px,
        rgba(0, 0, 0, 0.05) 5px,
        rgba(0, 0, 0, 0.05) 10px
    );
    pointer-events: none;
}

/* Cancelled appointment indicator banner */
.cancelled-appointment-banner {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cancelled-appointment-banner i {
    font-size: 1.2em;
}

/* ============================================
   Missed Appointment Styling (RED theme)
   ============================================ */
.missed-appointment {
    opacity: 0.9;
    position: relative;
}

.missed-appointment::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 5px,
        rgba(198, 40, 40, 0.1) 5px,
        rgba(198, 40, 40, 0.1) 10px
    );
    pointer-events: none;
}

/* Missed appointment badge (red for urgency) */
.bg-missed {
    background-color: #C62828 !important;
    color: #ffffff !important;
}

/* Missed appointment badge - rescheduled (light red) */
.bg-missed-rescheduled {
    background-color: #EF9A9A !important;
    color: #B71C1C !important;
}

/* Missed appointment indicator banner (red theme) */
.missed-appointment-banner {
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    color: #c62828;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.missed-appointment-banner i {
    font-size: 1.2em;
}

/* ============================================
   Dashboard Appointment Row Click
   ============================================ */
.dashboard-appointment-row {
    transition: background-color 0.15s ease-in-out;
}

.dashboard-appointment-row:hover {
    background-color: rgba(37, 99, 235, 0.08) !important;
}

.dashboard-appointment-row:active {
    background-color: rgba(37, 99, 235, 0.15) !important;
}

/* ============================================
   System-Wide Font Size Reduction
   For a more professional, compact appearance
   ============================================ */

/* Base font size reduction */
html {
    font-size: 14px;
}

body {
    font-size: 0.875rem; /* 14px */
    line-height: 1.45;
}

/* Headings - reduced proportionally */
h1, .h1 {
    font-size: 1.5rem !important; /* 21px instead of 24px */
}

h2, .h2 {
    font-size: 1.35rem !important; /* 18.9px instead of 20px */
}

h3, .h3 {
    font-size: 1.15rem !important; /* 16.1px instead of 18px */
}

h4, .h4 {
    font-size: 1rem !important; /* 14px instead of 16px */
}

h5, .h5 {
    font-size: 0.95rem !important; /* 13.3px instead of 14px */
}

h6, .h6 {
    font-size: 0.85rem !important; /* 11.9px instead of 12px */
}

/* Form elements */
.form-control, .form-select {
    font-size: 0.875rem;
    padding: 0.375rem 0.65rem;
}

.form-label {
    font-size: 0.8125rem; /* 13px */
    margin-bottom: 0.25rem;
}

.form-check-label {
    font-size: 0.8125rem;
}

.input-group-text {
    font-size: 0.8125rem;
    padding: 0.375rem 0.6rem;
}


.btn-sm {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}

.btn-lg {
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
}

/* Tables */
.table {
    font-size: 0.8125rem;
}

.table th,
.table td {
    padding: 0.5rem 0.65rem;
}

.table-sm th,
.table-sm td {
    padding: 0.3rem 0.5rem;
}

/* Cards */
.card-title {
    font-size: 0.95rem;
}

.card-body {
    padding: 0.85rem;
}

.card-header,
.card-footer {
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
}

/* Modal */
.modal-title {
    font-size: 1.05rem;
}

.modal-body {
    font-size: 0.875rem;
}

.modal-header,
.modal-footer {
    padding: 0.75rem 1rem;
}

/* Badges */
/*.badge {
    font-size: 0.7rem;
    padding: 0.25em 0.5em;
}*/

/* Alerts */
.alert {
    font-size: 0.8125rem;
    padding: 0.6rem 0.85rem;
}

/* Dropdowns */
.dropdown-item {
    font-size: 0.8125rem;
    padding: 0.35rem 1rem;
}

.dropdown-header {
    font-size: 0.75rem;
}

/* List groups */
.list-group-item {
    font-size: 0.875rem;
    padding: 0.5rem 0.85rem;
}

/* Sidebar navigation */
.sidebar .nav-link {
    font-size: 0.8125rem;
    padding: 0.55rem 0.85rem;
}

.sidebar-header h4 {
    font-size: 1rem !important;
}

/* Calendar events - smaller text */
.fc-event-title {
    font-size: 0.7rem;
    line-height: 1.2;
}

.fc-daygrid-event {
    font-size: 0.7rem;
}

.fc-timegrid-event .fc-event-title {
    font-size: 0.7rem;
}

/* Dashboard widgets */
.dashboard-stat {
    font-size: 0.875rem;
}

.dashboard-stat .stat-value {
    font-size: 1.3rem;
}

.dashboard-stat .stat-label {
    font-size: 0.75rem;
}

/* Tabs */
.nav-tabs .nav-link {
    font-size: 0.8125rem;
    padding: 0.45rem 0.85rem;
}

.nav-pills .nav-link {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
}

/* Pagination */
.page-link {
    font-size: 0.8125rem;
    padding: 0.35rem 0.65rem;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: 0.8125rem;
}

/* Tooltips and popovers */
.tooltip-inner {
    font-size: 0.75rem;
}

.popover-body {
    font-size: 0.8125rem;
}

/* Toast notifications - larger font for readability */
.toast {
    font-size: 1rem;
}

/* Small and text utilities */
small, .small {
    font-size: 0.75rem;
}

.text-muted {
    font-size: inherit;
}

/* FullCalendar specific sizing */
.fc .fc-toolbar-title {
    font-size: 1.1rem;
}

.fc .fc-button {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}

.fc .fc-col-header-cell-cushion {
    font-size: 0.75rem;
}

.fc .fc-daygrid-day-number {
    font-size: 0.75rem;
}

/* Accordion */
.accordion-button {
    font-size: 0.875rem;
    padding: 0.65rem 1rem;
}

.accordion-body {
    font-size: 0.875rem;
    padding: 0.85rem;
}

/* Progress bars */
.progress {
    height: 0.5rem;
}

/* Legends and labels */
.legend-item {
    font-size: 0.75rem;
}

/* Selected patient card */
.selected-patient-card {
    font-size: 0.875rem;
}

/* Patient search results */
.patient-search-result {
    font-size: 0.8125rem;
    padding: 0.45rem 0.65rem;
}

/* Trumbowyg editor */
.trumbowyg-box {
    font-size: 0.875rem;
}

/* Care episode cards */
.care-episode-card {
    font-size: 0.875rem;
}

/* Reports */
.report-title {
    font-size: 1.15rem;
}

.report-table {
    font-size: 0.8rem;
}

/* Minimize margins and padding globally */
.mb-3 {
    margin-bottom: 0.75rem !important;
}

.mb-4 {
    margin-bottom: 1rem !important;
}

.p-3 {
    padding: 0.75rem !important;
}

.p-4 {
    padding: 1rem !important;
}

/* Compact row spacing */
.row.g-3 {
    --bs-gutter-y: 0.75rem;
    --bs-gutter-x: 0.75rem;
}

/* More compact fs-5 and fs-6 */
.fs-5 {
    font-size: 1rem !important;
}

.fs-6 {
    font-size: 0.875rem !important;
}




.urgency-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.urgency-warning {
    background-color: #fd7e14; /* Orange */
    box-shadow: 0 0 4px rgba(253, 126, 20, 0.5);
}

.urgency-critical {
    background-color: #dc3545; /* Red */
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.5);
}

/* ============================================
   PATIENT VALIDATION STYLES
   ============================================ */

/* Validation badge in patient list */
.validation-badge {
    transition: all 0.2s ease;
}

.validation-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Highlight for missing/invalid fields */
.validation-highlight {
    border-color: #fd7e14 !important;
    background-color: rgba(253, 126, 20, 0.1) !important;
    box-shadow: 0 0 0 0.2rem rgba(253, 126, 20, 0.25) !important;
}

/* Validation status card for dashboard */
.validation-summary-card {
    border-left: 4px solid #fd7e14;
}

.validation-summary-card.complete {
    border-left-color: #28a745;
}

.validation-summary-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
}

.validation-summary-card .stat-label {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Incomplete profiles indicator */
.incomplete-profiles-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.incomplete-profiles-badge .badge-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #fd7e14;
    color: white;
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Section highlight animation */
@keyframes sectionHighlight {
    0% {
        background-color: rgba(253, 126, 20, 0.2);
    }
    100% {
        background-color: transparent;
    }
}

.section-highlighted {
    animation: sectionHighlight 2s ease-out;
}

/* ============================================
   Patient Filter Buttons (Modern UI)
   ============================================ */

.patient-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0;
}

.filter-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 2px solid transparent;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-light);
    color: var(--text-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.filter-btn:active {
    transform: translateY(0);
}

.filter-btn-check {
    display: none;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}

.filter-btn-check i {
    font-size: 0.75rem;
}

.filter-btn.selected .filter-btn-check {
    display: inline-flex;
}

/* Status Filter Button Colors */
.filter-btn-active {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
}

.filter-btn-active:hover {
    background: #c8e6c9;
    border-color: #a5d6a7;
}

.filter-btn-active.selected {
    background: #2e7d32;
    color: #fff;
    border-color: #2e7d32;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.35);
}

.filter-btn-discharged {
    background: #fce4ec;
    color: #c2185b;
    border-color: #f8bbd9;
}

.filter-btn-discharged:hover {
    background: #f8bbd9;
    border-color: #f48fb1;
}

.filter-btn-discharged.selected {
    background: #c2185b;
    color: #fff;
    border-color: #c2185b;
    box-shadow: 0 2px 8px rgba(194, 24, 91, 0.35);
}

.filter-btn-no-episode {
    background: #e3f2fd;
    color: #1565c0;
    border-color: #bbdefb;
}

.filter-btn-no-episode:hover {
    background: #bbdefb;
    border-color: #90caf9;
}

.filter-btn-no-episode.selected {
    background: #1565c0;
    color: #fff;
    border-color: #1565c0;
    box-shadow: 0 2px 8px rgba(21, 101, 192, 0.35);
}

.filter-btn-archived {
    background: #eceff1;
    color: #546e7a;
    border-color: #cfd8dc;
}

.filter-btn-archived:hover {
    background: #cfd8dc;
    border-color: #b0bec5;
}

.filter-btn-archived.selected {
    background: #546e7a;
    color: #fff;
    border-color: #546e7a;
    box-shadow: 0 2px 8px rgba(84, 110, 122, 0.35);
}

/* Profile Filter Button Colors */
.filter-btn-all {
    background: #f5f5f5;
    color: #616161;
    border-color: #e0e0e0;
}

.filter-btn-all:hover {
    background: #eeeeee;
    border-color: #bdbdbd;
}

.filter-btn-all.selected {
    background: #616161;
    color: #fff;
    border-color: #616161;
    box-shadow: 0 2px 8px rgba(97, 97, 97, 0.35);
}

.filter-btn-incomplete {
    background: #fff8e1;
    color: #f57c00;
    border-color: #ffecb3;
}

.filter-btn-incomplete:hover {
    background: #ffecb3;
    border-color: #ffe082;
}

.filter-btn-incomplete.selected {
    background: #f57c00;
    color: #fff;
    border-color: #f57c00;
    box-shadow: 0 2px 8px rgba(245, 124, 0, 0.35);
}

.filter-btn-complete {
    background: #e0f2f1;
    color: #00796b;
    border-color: #b2dfdb;
}

.filter-btn-complete:hover {
    background: #b2dfdb;
    border-color: #80cbc4;
}

.filter-btn-complete.selected {
    background: #00796b;
    color: #fff;
    border-color: #00796b;
    box-shadow: 0 2px 8px rgba(0, 121, 107, 0.35);
}

/* Active Filters Count Badge */
.filter-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--primary-color);
    color: #fff;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-left: auto;
    align-self: flex-end;
}

.filter-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-clear-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.filter-clear-btn i {
    font-size: 0.625rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .patient-filters-row {
        flex-direction: column;
        gap: 1rem;
    }

    .filter-btn-group {
        flex-wrap: wrap;
    }

    .filter-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }

    .filter-count-badge {
        margin-left: 0;
        align-self: flex-start;
    }
}

/* ============================================
   Location Switcher (Multi-Location Support) - Light Theme
   ============================================ */

.sidebar-location {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
}

.location-current {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.location-current:hover {
    background: var(--bg-light);
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}

.location-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: var(--radius-md);
    color: white;
    font-size: 1rem;
}

.location-info {
    flex: 1;
    min-width: 0;
}

.location-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.location-name {
    display: block;
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-arrow {
    color: var(--text-muted);
    font-size: 0.875rem;
    transition: transform var(--transition-fast);
}

.location-current:hover .location-arrow {
    color: var(--primary-color);
}

/* Location List in Modal */
.location-list {
    max-height: 400px;
    overflow-y: auto;
}

.location-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--card-bg);
}

.location-item:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
    box-shadow: var(--shadow-sm);
}

.location-item.active {
    border-color: var(--primary-color);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.location-item-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.location-item-info {
    flex: 1;
    min-width: 0;
}

.location-item-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.location-item-address {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.location-item-badge {
    flex-shrink: 0;
}

.location-item .check-icon {
    color: var(--success-color);
    font-size: 1.25rem;
    display: none;
}

.location-item.active .check-icon {
    display: block;
}

/* Location Management List */
.location-management-list .location-item {
    cursor: default;
}

.location-management-list .location-item:hover {
    border-color: var(--border-color);
    background: transparent;
}

.location-management-actions {
    display: flex;
    gap: 0.5rem;
}

.location-management-actions .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Location primary badge */
.badge-primary-location {
    background: var(--success-color);
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.badge-inactive-location {
    background: var(--secondary-color);
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Scheduling Button in Calendar Header */
.btn-schedule-appointment {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.btn-schedule-appointment:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: white;
}

/* ============================================
   Appointment Modal - Three State Workflow
   ============================================ */

/* Patient Required Highlight (Orange) */
.appt-patient-required {
    position: relative;
}

.appt-patient-required::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #f97316;
    border-radius: 10px;
    animation: pulseOrange 2s infinite;
    pointer-events: none;
}

.appt-patient-required .form-control {
    border-color: #f97316;
    background-color: #fff7ed;
}

.appt-patient-required .form-control:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
}

@keyframes pulseOrange {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4);
    }
    50% {
        box-shadow: 0 0 8px 4px rgba(249, 115, 22, 0.2);
    }
}

/* Available Slots Container */
.appt-slots-container {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    min-height: 350px;
    max-height: 450px;
    overflow-y: auto;
}

.appt-slots-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    color: var(--text-muted);
    text-align: center;
}

.appt-slots-placeholder i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.appt-slots-placeholder p {
    font-size: 14px;
    margin: 0;
}

/* Slots Loading State */
.appt-slots-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

/* Slots List */
.appt-slots-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Slot Card */
.slot-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slot-card:hover {
    border-color: var(--primary-color);
    background: #f0f9ff;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.slot-card.selected {
    border-color: var(--primary-color);
    background: #dbeafe;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.slot-card .slot-time {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 110px;
}

.slot-card .slot-provider {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.slot-card .provider-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.slot-card .provider-name {
    font-size: 13px;
    color: var(--text-secondary);
}

.slot-card .slot-location {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}

.slot-card .slot-check {
    display: none;
    color: var(--primary-color);
    font-size: 18px;
}

.slot-card.selected .slot-check {
    display: block;
}

/* Empty Slots State */
.appt-slots-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
}

.appt-slots-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* Preview Panel */
.appt-preview-panel {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.appt-preview-panel h6 {
    color: #166534;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.appt-preview-panel h6 i {
    font-size: 20px;
}

.preview-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.preview-item {
    display: flex;
    flex-direction: column;
}

.preview-item .preview-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4ade80;
    font-weight: 600;
    margin-bottom: 2px;
}

.preview-item .preview-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.preview-item.full-width {
    grid-column: span 2;
}

/* Preview Actions */
.preview-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #86efac;
}

.preview-actions .btn {
    flex: 1;
}

/* Modal State Transitions */
#appointmentModal .form-section,
#appointmentModal .slots-section {
    transition: opacity 0.3s ease;
}

#appointmentModal .form-section.state-preview,
#appointmentModal .slots-section.state-preview {
    opacity: 0.6;
    pointer-events: none;
}

/* Duration field disabled state */
#appointmentModal #apptDuration:disabled {
    background-color: #f1f5f9;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Selected Patient Card in Modal */
#appointmentModal .selected-patient-card {
    background: #ecfeff;
    border: 1px solid #06b6d4;
    border-radius: 8px;
    padding: 12px;
}

#appointmentModal .selected-patient-card .patient-name {
    font-weight: 600;
    color: #0891b2;
    font-size: 14px;
}

#appointmentModal .selected-patient-card .patient-details {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Two-Panel Layout - only apply to main row, not nested rows */
#appointmentModal .modal-body > .row {
    min-height: 400px;
}

#appointmentModal .form-panel {
    border-right: 1px solid var(--border-color);
    padding-right: 24px;
}

#appointmentModal .slots-panel {
    padding-left: 24px;
}

/* Responsive for Modal */
@media (max-width: 991.98px) {
    #appointmentModal .form-panel {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 12px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    #appointmentModal .slots-panel {
        padding-left: 12px;
    }

    .preview-details {
        grid-template-columns: 1fr;
    }

    .preview-item.full-width {
        grid-column: span 1;
    }
}

/* Slot Date Header */
.slot-date-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

/* Slot Groups by Time Period */
.slot-group {
    margin-bottom: 16px;
}

.slot-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-left: 4px;
}

/* Quick Filter Buttons */
.slot-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.slot-filter-btn {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slot-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.slot-filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* ============================================
   Dropdown Menus - Modern Light Theme
   ============================================ */

.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 8px 0;
    background: var(--card-bg);
    animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--primary-light);
    color: var(--primary-color);
}

.dropdown-item i {
    margin-right: 8px;
    color: var(--text-muted);
}

.dropdown-item:hover i {
    color: var(--primary-color);
}

.dropdown-divider {
    border-top-color: var(--border-color);
    margin: 8px 0;
}

.dropdown-header {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   Nav Tabs & Pills - Modern Healthcare Theme
   ============================================ */

.nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 20px;
    font-weight: 500;
    transition: all var(--transition-fast);
    margin-bottom: -2px;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: transparent;
    background: var(--bg-secondary);
}

.nav-tabs .nav-link.active {
    color: var(--primary-color);
    background: transparent;
    border-color: transparent transparent var(--primary-color) transparent;
    border-bottom-width: 3px;
}

.nav-pills .nav-link {
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.nav-pills .nav-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.nav-pills .nav-link.active {
    background: var(--primary-color);
    color: white;
}

/* ============================================
   Pagination - Modern Healthcare Theme
   ============================================ */

.pagination {
    gap: 4px;
}

.page-link {
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.page-link:hover {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.page-item.disabled .page-link {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* ============================================
   Progress Bars - Modern Healthcare Theme
   ============================================ */

.progress {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
    height: 8px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.progress-bar.bg-success {
    background: linear-gradient(90deg, var(--success-color) 0%, #059669 100%) !important;
}

.progress-bar.bg-warning {
    background: linear-gradient(90deg, var(--warning-color) 0%, #D97706 100%) !important;
}

.progress-bar.bg-danger {
    background: linear-gradient(90deg, var(--danger-color) 0%, #DC2626 100%) !important;
}

/* ============================================
   Tooltips & Popovers - Modern Healthcare Theme
   ============================================ */

.tooltip-inner {
    background: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 13px;
    box-shadow: var(--shadow-md);
}

.popover {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.popover-header {
    background: var(--bg-light);
    border-bottom-color: var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
}

.popover-body {
    color: var(--text-secondary);
}

/* ============================================
   Accordion - Modern Healthcare Theme
   ============================================ */

.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg) !important;
    margin-bottom: 8px;
    overflow: hidden;
}

.accordion-item:first-of-type,
.accordion-item:last-of-type {
    border-radius: var(--radius-lg) !important;
}

.accordion-button {
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 500;
    padding: 16px 20px;
}

.accordion-button:not(.collapsed) {
    background: var(--bg-light);
    color: var(--primary-color);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.accordion-button::after {
    transition: transform var(--transition-normal);
}

.accordion-body {
    padding: 20px;
    color: var(--text-secondary);
}

/* ============================================
   List Groups - Modern Healthcare Theme
   ============================================ */

.list-group-item {
    border-color: var(--border-color);
    padding: 14px 20px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.list-group-item:first-child {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.list-group-item-action:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.list-group-item.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* ============================================
   Scrollbar Styling - Modern Light Theme
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) var(--bg-secondary);
}

/* ============================================
   Print Styles Override for Light Theme
   ============================================ */

@media print {
    body {
        background: white !important;
        color: black !important;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    .btn {
        border: 1px solid #ddd !important;
    }
}

/* ============================================
   Recording Session Modal Styles
   ============================================ */

/* Record Session Modal Header */
#recordSessionModal .modal-header.bg-primary {
    background-color: #3b82f6 !important;
}

#recordSessionModal .modal-header.bg-primary .modal-title,
#recordSessionModal .modal-header.bg-primary .modal-title i,
#recordSessionModal .modal-header.bg-primary span {
    color: #ffffff !important;
}

#recordSessionModal .modal-header.bg-primary .btn-close-white {
    filter: brightness(0) invert(1);
}

/* Recording Status Badge - Improved Pill Style */
#recordingStatusBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-weight: 500;
    font-size: 0.875rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#recordingStatusBadge.status-not-started {
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
    border: 1px solid #e5e7eb;
}

#recordingStatusBadge.status-not-started i {
    color: #9ca3af;
}

/* Recording Timer Container */
.recording-timer-container {
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.recording-timer-container.recording-active {
    border-color: #dc3545;
    background-color: #fff5f5 !important;
}

.recording-timer-container.recording-paused {
    border-color: #ffc107;
    background-color: #fffbeb !important;
}

/* Recording Pulse Animation */
.recording-pulse-container {
    position: relative;
    display: inline-block;
}

.recording-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(220, 53, 69, 0.3);
    animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.4); }
    50% { box-shadow: 0 0 20px rgba(25, 135, 84, 0.8); }
}

/* Recording Status Badge Colors - Additional States */
#recordingStatusBadge.status-recording {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca;
    animation: badge-pulse 1.5s ease-in-out infinite;
}

#recordingStatusBadge.status-recording i {
    color: #dc2626;
}

#recordingStatusBadge.status-paused {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
    border: 1px solid #fde68a;
}

#recordingStatusBadge.status-paused i {
    color: #d97706;
}

@keyframes badge-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Recording Modal Responsive Adjustments */
@media (max-width: 768px) {
    #recordSessionModal .row > .col-md-4 {
        margin-bottom: 0.5rem;
    }

    #recordingTimer {
        font-size: 3rem !important;
    }

    #recordingControlButtons .btn-lg {
        padding: 0.75rem 1.5rem !important;
    }
}

/* ============================================
   Floating Recording Bar
   Shown during active recording so doctor can
   navigate the encounter workspace freely.
   ============================================ */

.floating-recording-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1055;
    padding: 0 12px 12px;
    pointer-events: none;
}

.floating-recording-bar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 12px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    pointer-events: auto;
    max-width: 750px;
    margin: 0 auto;
}

/* Recording dot indicator */
.floating-rec-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.floating-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: floatingRecPulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

.floating-recording-bar.floating-bar-paused .floating-rec-dot {
    background: #fbbf24;
    animation: none;
}

.floating-rec-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #ef4444;
    text-transform: uppercase;
}

.floating-recording-bar.floating-bar-paused .floating-rec-label {
    color: #fbbf24;
}

/* Patient info */
.floating-rec-info {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.floating-rec-patient {
    font-size: 13px;
    font-weight: 500;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Timer */
.floating-rec-timer {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    min-width: 60px;
    text-align: center;
    flex-shrink: 0;
}

/* Controls */
.floating-rec-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.floating-rec-controls .btn {
    font-size: 12px;
    padding: 4px 12px;
    font-weight: 600;
}

/* Icon-only bar buttons (Save & Continue later, Discard) */
.floating-rec-icon-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.75);
}

.floating-rec-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.floating-rec-discard:hover {
    background: rgba(220, 53, 69, 0.85);
    border-color: #dc3545;
    color: #ffffff;
}

@keyframes floatingRecPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* Responsive: floating bar on small screens */
@media (max-width: 576px) {
    .floating-recording-bar-inner {
        gap: 10px;
        padding: 8px 14px;
    }

    .floating-rec-info {
        display: none;
    }

    .floating-rec-timer {
        font-size: 16px;
    }
}

/* Floating bar warning badges */
.floating-rec-warnings {
    display: flex;
    align-items: center;
    gap: 4px;
}

.floating-rec-warnings .badge {
    font-size: 11px;
    padding: 3px 6px;
    animation: warningPulse 2s infinite;
}

@keyframes warningPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Scribe Top Progress Bar (non-blocking note generation progress) */
.scribe-top-progress {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.scribe-top-progress-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

/* Template Selection Overlay (shown on Stop to pick note templates) */
.template-selection-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.template-selection-popup {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 520px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.template-selection-header {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a56db;
}

.template-selection-popup .form-check {
    padding: 12px 16px 12px 40px;
    border-radius: 8px;
    transition: background 0.15s;
    font-size: 15px;
}

.template-selection-popup .form-check:hover {
    background: #f0f4ff;
}

.template-selection-popup .form-check-input {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.2em;
}

/* Recording Progress Modal */
#recordingProgressModal .modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#recordingProgressModal .progress-bar {
    transition: width 0.5s ease-in-out;
}

#recordingProgressModal #progressMessage {
    transition: opacity 0.3s ease;
}

#recordingProgressModal .badge {
    font-weight: 500;
    padding: 0.5em 1em;
}

/* Progress animation pulse effect when waiting */
@keyframes progress-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

#recordingProgressModal .progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite, progress-pulse 2s ease-in-out infinite;
}

/* ============================================
   Bootstrap Modal Scrolling Fix
   Ensures modal body scrolls while header/footer stay fixed
   ============================================ */

/* Ensure modal can extend and body scrolls properly */
.modal-dialog-scrollable {
    max-height: calc(100vh - 1rem);
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

/* For centered dialogs with scrollable content */
.modal-dialog-centered.modal-dialog-scrollable {
    min-height: calc(100% - 1rem);
}

/* Ensure proper height constraints for different modal sizes */
.modal-xl.modal-dialog-scrollable .modal-body,
.modal-lg.modal-dialog-scrollable .modal-body,
.modal-md.modal-dialog-scrollable .modal-body,
.modal-sm.modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 200px); /* Account for header, footer, and margins */
    overflow-y: auto;
}

/* Fix for modals without modal-dialog-scrollable class - apply scrolling behavior globally */
.modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 210px);
}

/* Ensure modal header and footer stay fixed */
.modal-header,
.modal-footer {
    flex-shrink: 0;
}

/* Smooth scrolling for modal content */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: var(--bg-secondary, #f1f1f1);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--text-muted, #888);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #555);
}

/* Fullscreen modals should use full height — no max-height constraint */
.modal-fullscreen .modal-body {
    max-height: none;
}

/* ============================================
   Appointment Wizard Styles
   Step-by-Step Booking Modal
   ============================================ */

/* Wizard Progress Indicator */
.wizard-progress {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 10px;
}

.wizard-step .step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.wizard-step .step-label {
    font-size: 12px;
    color: #64748b;
    margin-top: 6px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.wizard-step.active .step-circle {
    background: var(--primary-color, #2563eb);
    color: white;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.wizard-step.active .step-label {
    color: var(--primary-color, #2563eb);
    font-weight: 600;
}

.wizard-step.completed .step-circle {
    background: var(--success-color, #10b981);
    color: white;
}

.wizard-step.completed .step-label {
    color: var(--success-color, #10b981);
}

.wizard-connector {
    flex: 1;
    height: 3px;
    background: #e2e8f0;
    margin: 0 8px;
    margin-top: -18px;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.wizard-connector.completed {
    background: var(--success-color, #10b981);
}

/* Wizard Summary Header */
.wizard-summary {
    background: linear-gradient(to right, #fafafa, #f5f5f5);
}

.wizard-summary .summary-item {
    font-size: 14px;
}

.wizard-summary .btn-link {
    color: var(--primary-color, #2563eb);
    text-decoration: none;
}

.wizard-summary .btn-link:hover {
    color: var(--primary-hover, #1d4ed8);
}

/* Wizard Step Content */
.wizard-step-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Appointment Type Cards */
.appt-type-card {
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.appt-type-card:hover {
    border-color: var(--primary-color, #2563eb);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.appt-type-card.selected {
    border-color: var(--primary-color, #2563eb);
    background: var(--primary-light, #dbeafe);
}

.appt-type-card.selected .type-icon {
    transform: scale(1.1);
}

/* Disabled Appointment Type Cards (requires Care Episode) */
.appt-type-card.disabled {
    cursor: not-allowed;
    opacity: 0.6;
    filter: grayscale(40%);
    position: relative;
}

.appt-type-card.disabled:hover {
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

/* Lock badge for disabled appointment type cards - positioned at top-right */
.care-episode-lock-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background-color: #6c757d;
    color: white;
    font-size: 0.6rem;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: 500;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.care-episode-lock-badge i {
    font-size: 0.55rem;
}

/* Schedule Choice Cards */
.schedule-choice-card {
    cursor: pointer;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

.schedule-choice-card:hover {
    border-color: var(--primary-color, #2563eb);
    background: var(--bg-light, #fafafa);
    transform: translateX(4px);
}

.schedule-choice-card:hover .bi-chevron-right {
    color: var(--primary-color, #2563eb) !important;
}

/* Slot Cards in Wizard */
.slot-card {
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition: all 0.15s ease;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: white;
}

.slot-card:hover {
    border-color: var(--primary-color, #2563eb);
    background: var(--primary-light, #dbeafe);
}

.slot-card.selected {
    border-color: var(--primary-color, #2563eb);
    background: var(--primary-light, #dbeafe);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* Recent Patient Cards */
.recent-patient-card {
    cursor: pointer;
    border: 1px solid #e2e8f0;
    padding: 12px;
    border-radius: 8px;
    transition: all 0.15s ease;
    background: white;
}

.recent-patient-card:hover {
    border-color: var(--primary-color, #2563eb);
    background: var(--primary-light, #dbeafe);
}

/* Selected Patient Card */
.selected-patient-card .card {
    transition: all 0.2s ease;
}

.selected-patient-card .patient-avatar {
    transition: transform 0.2s ease;
}

.selected-patient-card:hover .patient-avatar {
    transform: scale(1.05);
}

/* Duration Button Group */
#durationButtonGroup .btn {
    flex: 1;
    font-size: 13px;
    padding: 8px 4px;
}

#durationButtonGroup .btn-check:checked + .btn {
    background: var(--primary-color, #2563eb);
    border-color: var(--primary-color, #2563eb);
    color: white;
}

/* Recurring Date List Items */
.recurring-date-item {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recurring-date-item:last-child {
    border-bottom: none;
}

.recurring-date-item.unavailable {
    background: #fef2f2;
    color: #991b1b;
}

.recurring-date-item.available {
    background: #f0fdf4;
}

/* Review Card Styling */
#wizardStep4 .card {
    overflow: hidden;
}

#wizardStep4 .card-body {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-radius: inherit;
}

/* Responsive adjustments for wizard */
@media (max-width: 768px) {
    .wizard-step .step-label {
        display: none;
    }
    
    .wizard-step .step-circle {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .wizard-connector {
        margin-top: -16px;
    }
    
    .appt-type-card .card-body {
        padding: 16px 12px;
    }
    
    .appt-type-card .type-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    .schedule-choice-card .choice-icon {
        width: 50px !important;
        height: 50px !important;
    }
    
    .schedule-choice-card .card-body {
        padding: 16px !important;
    }
    
    #wizardStep3 .row {
        flex-direction: column;
    }
    
    #wizardStep3 .col-md-4,
    #wizardStep3 .col-md-8 {
        width: 100%;
    }
}

/* Wizard Navigation Buttons */
#wizardNextBtn, #wizardBackBtn {
    min-width: 100px;
    transition: all 0.2s ease;
}

#wizardNextBtn:not(:disabled):hover {
    transform: translateX(2px);
}

#wizardBackBtn:hover {
    transform: translateX(-2px);
}

/* Patient Search Results in Wizard */
#patientSearchResults {
    position: absolute;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    margin-top: 4px;
}

#patientSearchResults .patient-result-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}

#patientSearchResults .patient-result-item:hover {
    background: var(--primary-light, #dbeafe);
}

#patientSearchResults .patient-result-item:last-child {
    border-bottom: none;
}

/* Fix for selected patient card - ensure border-radius is respected */
.selected-patient-card .card {
    overflow: hidden;
}

.selected-patient-card .card-body {
    background: transparent;
}

/* Ensure wizard cards have proper overflow handling */
#wizardStep1 .card {
    overflow: hidden;
}

/* Appointment Wizard - Patient Selection Hover Effects */
.recent-patient-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.recent-patient-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #0d6efd;
}

.recent-patient-card:active {
    transform: translateY(0);
}

.patient-search-item {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.patient-search-item:hover {
    background-color: #f8f9fa;
}

.patient-search-item:active {
    background-color: #e9ecef;
}

/* ============================================
   Patient Appointments/Notes Tab Styles
   ============================================ */

/* Hover shadow effect for cards */
.hover-shadow {
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hover-shadow:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Visit/Appointment/Note cards */
.visit-card,
.appointment-card,
.note-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
}

.visit-card:hover,
.appointment-card:hover,
.note-card:hover {
    border-color: var(--primary-color);
}

/* Sub-tab pills styling */
#apptNotesSubTabs .nav-link {
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--transition-fast);
}

#apptNotesSubTabs .nav-link:hover:not(.active) {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

#apptNotesSubTabs .nav-link.active {
    background-color: var(--primary-color);
    color: white;
}

#apptNotesSubTabs .nav-link .badge {
    font-size: 11px;
    padding: 2px 6px;
}

/* List containers */
.visits-list,
.upcoming-list,
.notes-list {
    max-height: 500px;
    overflow-y: auto;
}

/* Patient appointments notes container */
.patient-appt-notes-container {
    min-height: 400px;
}

/* View note button styling */
.view-note-btn,
.view-note-detail-btn {
    font-size: 12px;
    padding: 4px 10px;
}

/* Appointment detail modal z-index fix - ensure it appears above patient detail modal */
#appointmentDetailModal {
    z-index: 1060 !important;
}

#appointmentDetailModal + .modal-backdrop {
    z-index: 1059 !important;
}

/* Confirm/overlay modals z-index fix - ensure they appear above all other modals (stacked modal support) */
#confirmModal,
#genericConfirmModal {
    z-index: 1070 !important;
}

/* Collect Copay modal z-index is handled programmatically in GlobalBridge.js openCollectPaymentModal() */

/* ============================================
   Internal Messaging System Styles
   ============================================ */

/* Chat Toggle Button (Fixed position) */
.chat-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #4f46e5 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4);
    cursor: pointer;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-toggle-btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.5);
}

.chat-toggle-btn:active {
    transform: scale(0.95);
}

.chat-toggle-btn .unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Messaging Panel (Slide-out) */
.messaging-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: var(--card-bg);
    box-shadow: -8px 0 40px rgba(0,0,0,0.15);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--border-color);
}

.messaging-panel.open {
    right: 0;
}

/* Backdrop for messaging panel */
.messaging-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.messaging-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* Messaging Header */
.messaging-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #4f46e5 100%);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.messaging-header h6 {
    font-weight: 600;
    color: white !important;
    margin: 0;
}

.messaging-header h6 i {
    color: white !important;
}

.messaging-header .btn-outline-primary,
.messaging-header .btn-outline-secondary {
    border-color: rgba(255,255,255,0.4);
    color: white;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px 10px;
    transition: all 0.2s ease;
}

.messaging-header .btn-outline-primary:hover,
.messaging-header .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.6);
    transform: scale(1.05);
}

/* Messaging Body */
.messaging-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Conversation Search */
.conversation-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: #fafbfc;
}

.conversation-search .input-group {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.2s ease;
}

.conversation-search .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.conversation-search .input-group-text {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding-left: 14px;
}

.conversation-search .form-control {
    border: none;
    padding-left: 4px;
}

.conversation-search .form-control:focus {
    box-shadow: none;
}

/* Conversations List */
.conversations-list {
    flex: 1;
    overflow-y: auto;
}

/* Conversation Item */
.conversation-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-color);
}

.conversation-item:hover {
    background: var(--bg-secondary);
}

.conversation-item.active {
    background: var(--primary-light);
}

.conversation-item.unread {
    background: var(--bg-light);
}

.conversation-item.unread .conversation-name {
    font-weight: 600;
}

.conversation-item.unread .conversation-preview {
    font-weight: 500;
    color: var(--text-primary);
}

/* Avatar */
.avatar-sm {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    position: relative;
    margin-right: 12px;
}

/* Online/Offline status indicator on avatar */
.avatar-sm::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9ca3af; /* Gray for offline */
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.avatar-sm.online::after {
    background: #22c55e; /* Green for online */
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}

/* Conversation Info */
.conversation-info {
    flex: 1;
    min-width: 0;
}

.conversation-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-preview {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Conversation Meta */
.conversation-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: 8px;
}

.conversation-time {
    font-size: 11px;
    color: var(--text-muted);
}

.conversation-meta .unread-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--primary-color);
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chat Window */
.chat-window {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Chat Header */
.chat-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-shrink: 0;
}

.chat-user-info {
    flex: 1;
    min-width: 0;
}

.chat-user-name {
    font-weight: 600;
    color: var(--text-primary);
}

.chat-user-status {
    font-size: 12px;
}

.status-online {
    color: #22c55e;
    font-weight: 500;
}

.status-online::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}

.status-offline {
    color: #9ca3af;
}

.status-offline::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    margin-right: 6px;
    vertical-align: middle;
}

/* Messages Container */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-light);
}

/* Message Bubble */
.message {
    max-width: 80%;
    display: flex;
    flex-direction: column;
}

.message.mine {
    align-self: flex-end;
}

.message.theirs {
    align-self: flex-start;
}

.message-text {
    padding: 10px 14px;
    border-radius: 18px;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.message.mine .message-text {
    background: var(--primary-color);
    color: white;
    border-bottom-right-radius: 4px;
}

.message.theirs .message-text {
    background: var(--card-bg);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border-color);
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 0 8px;
}

.message.mine .message-meta {
    justify-content: flex-end;
}

.message-status {
    display: flex;
    align-items: center;
}

/* Voice Note */
.voice-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 18px;
    min-width: 180px;
}

.message.mine .voice-note {
    background: var(--primary-color);
}

.message.theirs .voice-note {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

.voice-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.message.mine .voice-play-btn {
    background: rgba(255,255,255,0.2);
    color: white;
}

.message.theirs .voice-play-btn {
    background: var(--primary-light);
    color: var(--primary-color);
}

.voice-play-btn:hover {
    transform: scale(1.1);
}

.voice-waveform {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
}

.message.theirs .voice-waveform {
    background: var(--border-color);
}

.voice-progress {
    height: 100%;
    width: 0;
    background: white;
    transition: width 0.1s linear;
}

.message.theirs .voice-progress {
    background: var(--primary-color);
}

.voice-duration {
    font-size: 12px;
    font-weight: 500;
}

.message.mine .voice-duration {
    color: rgba(255,255,255,0.9);
}

.message.theirs .voice-duration {
    color: var(--text-secondary);
}

/* File Attachment */
.file-attachment {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--transition-fast);
    min-width: 200px;
}

.message.mine .file-attachment {
    background: var(--primary-color);
    color: white;
}

.message.theirs .file-attachment {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

.file-attachment:hover {
    opacity: 0.9;
}

.file-icon {
    font-size: 24px;
    opacity: 0.9;
}

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 12px;
    opacity: 0.8;
}

/* Typing Indicator */
.typing-indicator {
    padding: 4px 16px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
}

/* Recording Mode UI */
.message-input-area.recording-mode {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-top: 2px solid #ef4444;
}

.recording-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.recording-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
}

.recording-pulse-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ef4444;
    animation: recording-pulse 1s ease-in-out infinite;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

.recording-time {
    font-size: 18px;
    font-weight: 600;
    color: #dc2626;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
}

.recording-label {
    font-size: 14px;
    color: #b91c1c;
    font-weight: 500;
}

.btn-cancel-recording {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 2px solid #ef4444 !important;
    transition: all 0.2s ease;
}

.btn-cancel-recording:hover {
    background: #ef4444 !important;
    color: white !important;
    transform: scale(1.1);
}

.btn-send-recording {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    transition: all 0.2s ease;
}

.btn-send-recording:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

@keyframes recording-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.9);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.1);
    }
}

/* Legacy Recording Indicator (kept for backward compatibility) */
.recording-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--danger-bg);
    color: var(--danger-color);
    font-size: 13px;
}

.recording-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--danger-color);
    animation: recording-pulse 1s ease-in-out infinite;
}

#recordingTimer {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Message Input Area */
.message-input-area {
    padding: 12px 16px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.message-input-area .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9fa;
    border-radius: 24px;
    padding: 4px 4px 4px 8px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.message-input-area .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.message-input-area .btn-light {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.message-input-area .btn-light:hover {
    color: var(--primary-color);
    background: var(--primary-light);
    transform: scale(1.1);
}

.message-input-area .form-control {
    border: none;
    background: transparent;
    resize: none;
    max-height: 100px;
    min-height: 36px;
    padding: 8px 12px;
    line-height: 1.4;
    flex: 1;
}

.message-input-area .form-control:focus {
    box-shadow: none;
    outline: none;
}

.message-input-area .form-control::placeholder {
    color: var(--text-muted);
}

.message-input-area .btn-primary {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, #4f46e5 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    transition: all 0.2s ease;
}

.message-input-area .btn-primary:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

/* =============================================
   Patient Mention Dropdown
   ============================================= */
.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1060;
    margin-bottom: 4px;
}

.mention-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.mention-item:last-child {
    border-bottom: none;
}

.mention-item:hover,
.mention-item.active {
    background: var(--primary-light);
}

.mention-item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.mention-item-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.mention-empty,
.mention-loading {
    padding: 12px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.mention-loading .spinner-border {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* Patient Mention Links in Messages */
.patient-mention {
    color: #4F46E5;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    padding: 0 2px;
}

.patient-mention:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

.message.mine .patient-mention {
    color: #c7d2fe;
    font-weight: 600;
}

.message.mine .patient-mention:hover {
    color: #e0e7ff;
    text-decoration: underline;
}

/* New Conversation Modal */
#newConversationModal .list-group-item {
    border-radius: 0;
    padding: 12px 16px;
}

#newConversationModal .list-group-item:hover {
    background: var(--bg-secondary);
}

#newConversationModal .avatar-sm {
    width: 40px;
    height: 40px;
}

/* Responsive Styles for Messaging */
@media (max-width: 480px) {
    .messaging-panel {
        width: 100%;
        right: -100%;
        /* Use dvh for mobile browsers that support it, fallback to vh */
        height: 100vh;
        height: 100dvh;
        max-height: -webkit-fill-available;
    }

    .messaging-panel.open {
        right: 0;
    }

    /* Ensure messages container is scrollable */
    .messages-container {
        flex: 1;
        overflow-y: auto;
        min-height: 0; /* Important for flexbox scrolling */
    }

    /* Ensure message input area is always visible at bottom */
    .message-input-area {
        flex-shrink: 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        position: relative;
        z-index: 10;
    }

    .chat-toggle-btn {
        bottom: 16px;
        right: 16px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Messaging Notification Banner */
.messaging-notification-banner {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 9999;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 360px;
    min-width: 280px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    border-left: 4px solid var(--primary-color, #4f46e5);
}

.messaging-notification-banner.show {
    transform: translateX(0);
    opacity: 1;
}

.messaging-notification-banner.hiding {
    transform: translateX(120%);
    opacity: 0;
}

.messaging-notification-banner .notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
}

.messaging-notification-banner .notification-content:hover {
    background: #f8f9fa;
}

.messaging-notification-banner .notification-icon {
    font-size: 24px;
    color: var(--primary-color, #4f46e5);
    flex-shrink: 0;
}

.messaging-notification-banner .notification-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.messaging-notification-banner .notification-text strong {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.messaging-notification-banner .notification-text span {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messaging-notification-banner .notification-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.messaging-notification-banner .notification-close:hover {
    background: #f3f4f6;
    color: #6b7280;
}

/* Upload Indicator */
.upload-indicator {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
    border-top: 1px solid #e5e7eb;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-indicator-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4f46e5;
    font-size: 13px;
    font-weight: 500;
}

.upload-indicator .spinner-border {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.upload-indicator .upload-filename {
    color: #6b7280;
    font-weight: 400;
}

/* High contrast/accessibility */
@media (prefers-reduced-motion: reduce) {
    .messaging-panel,
    .chat-toggle-btn,
    .message,
    .conversation-item,
    .messaging-notification-banner {
        transition: none;
    }

    .recording-pulse,
    .chat-toggle-btn .unread-badge {
        animation: none;
    }
}


/* ============================================
   Encounter Workspace
   Guided visit workflow UI
   ============================================ */

/* Header bar */
.ew-header {
    background: #fff;
    border-bottom: 2px solid var(--primary-color, #6366F1);
    padding: 12px 24px;
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ew-header h5 {
    font-size: 1.15rem;
}

/* Body layout: sidebar + main */
#encounterBody {
    min-height: calc(100vh - 180px);
}

/* Sidebar wizard */
.ew-sidebar {
    width: 220px;
    min-width: 220px;
    background: #f8f9fc;
    border-right: 1px solid #e5e7eb;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ew-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    position: relative;
}

.ew-step-item:hover {
    background: #eef0f6;
    color: #374151;
    text-decoration: none;
}

.ew-step-item.active {
    background: #eef2ff;
    color: var(--primary-color, #6366F1);
    border-left-color: var(--primary-color, #6366F1);
    font-weight: 600;
}

.ew-step-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5e7eb;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ew-step-item.active .ew-step-icon {
    background: var(--primary-color, #6366F1);
    color: #fff;
}

.ew-step-label {
    flex-grow: 1;
}

.ew-step-check {
    font-size: 0.85rem;
}

/* COMING SOON: generic styling for any encounter step flagged comingSoon (no step uses it right now) */
.ew-step-coming-soon { opacity: 0.42; cursor: not-allowed; }
.ew-step-coming-soon:hover { background: transparent !important; color: inherit !important; box-shadow: none !important; }
.ew-step-coming-soon.active { background: transparent !important; border-left-color: transparent !important; }
.ew-step-coming-soon .ew-step-icon { background: #e9ecef !important; color: #adb5bd !important; }
/* END COMING SOON */

/* DoseSpot e-prescribing modal (DoseSpotPrescribeModal.js): wide dialog, edge-to-edge iframe */
.dosespot-modal .modal-dialog { width: 95vw; max-width: 1400px; }
.dosespot-modal .modal-body { position: relative; }
.dosespot-modal .dosespot-frame { display: block; width: 100%; height: calc(100vh - 180px); min-height: 480px; border: 0; }
/* SSO page still loading: laid out at full size (so it renders correctly) but invisible under the spinner */
.dosespot-modal .dosespot-frame.dosespot-frame-pending { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.dosespot-modal .dosespot-register { max-width: 760px; margin: 0 auto; }

/* Main content area */
.ew-main-content {
    padding: 0;
    width: 100%;
}

.ew-step-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.ew-step-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

.ew-step-body {
    padding: 24px;
    background: #fafbfc;
    min-height: calc(100vh - 280px);
}

/* ============================================
   Encounter Workspace — Focused Mode
   Hides main sidebar & top nav for distraction-free workflow
   ============================================ */

body.encounter-focus-mode .sidebar {
    display: none !important;
}

body.encounter-focus-mode .main-header {
    display: none !important;
}

body.encounter-focus-mode .main-content {
    margin-left: 0;
}

/* Encounter header — prominent back button */
.ew-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--primary-color, #6366F1);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.ew-back-btn:hover {
    background: #4f46e5;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.ew-back-btn i {
    font-size: 1rem;
}

/* ============================================
   Encounter Workspace — Consolidated Note Layout
   Reference panel + Note editor side-by-side
   ============================================ */

.ew-consolidated-layout {
    display: flex;
    min-height: calc(100vh - 280px);
}

.ew-ref-panel {
    width: 320px;
    min-width: 320px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    transition: width 0.2s ease, min-width 0.2s ease, opacity 0.2s ease;
}

.ew-ref-panel.collapsed {
    width: 0;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    border-right: none;
}

.ew-ref-panel-content {
    padding: 0;
}

.ew-note-main {
    flex: 1;
    padding: 24px;
    background: #fafbfc;
    min-height: calc(100vh - 280px);
    overflow-y: auto;
}

/* Reference panel sections */
.ew-ref-section {
    border-bottom: 1px solid #e5e7eb;
}

.ew-ref-section.collapsed .ew-ref-section-body {
    display: none;
}

.ew-ref-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8f9fc;
    cursor: pointer;
    user-select: none;
}

.ew-ref-section-header:hover {
    background: #eef0f6;
}

.ew-ref-section-header h6 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.ew-ref-edit-link {
    color: var(--primary-color, #6366F1);
    font-size: 13px;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.ew-ref-edit-link:hover {
    opacity: 1;
}

.ew-ref-section-body {
    padding: 10px 14px;
}

/* Vitals grid in reference panel */
.ew-ref-vitals-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ew-ref-vital {
    display: inline-block;
    padding: 3px 8px;
    background: #f0f4ff;
    border-radius: 4px;
    font-size: 12px;
    color: #374151;
    white-space: nowrap;
}

.ew-ref-vital strong {
    color: #6b7280;
    font-weight: 600;
    margin-right: 3px;
}

/* HPI text truncation */
.ew-ref-hpi-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

/* History groups in reference panel */
.ew-ref-history-group {
    margin-bottom: 8px;
}

.ew-ref-history-group:last-child {
    margin-bottom: 0;
}

.ew-ref-history-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.ew-ref-history-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ew-ref-chip {
    display: inline-block;
    padding: 2px 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 11px;
    color: #374151;
    white-space: normal;
    word-break: break-word;
}

/* ========================================
   Ask Medocs AI Button (Header)
   ======================================== */
.ask-ai-btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(45deg, #007BFF, #6A00FF, #FF0080);
    background-size: 300% 300%;
    padding: 7px 16px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 3px 12px rgba(0, 123, 255, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: askAiGradientFlow 5s ease infinite;
    white-space: nowrap;
    flex-shrink: 0;
}

.ask-ai-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0, 123, 255, 0.55);
    text-decoration: none;
}

.ask-ai-stars {
    display: inline-flex;
    align-items: center;
    animation: askAiSparkle 2s infinite ease-in-out;
}

.ask-ai-stars svg {
    fill: #fff;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));
}

@keyframes askAiGradientFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes askAiSparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.15); }
}

/* Hide text on small screens, keep icon only */
@media (max-width: 767px) {
    .ask-ai-btn {
        padding: 7px 10px;
    }
}

/* ============================================
   FILE VIEWER MODAL
   ============================================ */
/* Ensure file viewer appears above all other modals (patient details, messaging, etc.) */
#fileViewerModal { z-index: 1070 !important; }
.fv-modal-content { height: 100%; display: flex; flex-direction: column; }
.fv-modal-header { background: #f8f9fa; border-bottom: 1px solid #e9ecef; padding: 12px 20px; flex-shrink: 0; }
.fv-modal-title { font-weight: 600; font-size: 14px; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.fv-modal-body { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #f0f0f0; }
.fv-iframe { width: 100%; height: 100%; border: none; }
.fv-image-container { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fv-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
.fv-video-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; background: #000; }
.fv-video { max-width: 100%; max-height: 100%; }
.fv-text-container { width: 100%; height: 100%; overflow: auto; padding: 20px; background: #fff; }
.fv-text-content { margin: 0; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 13px; line-height: 1.6; color: #333; white-space: pre-wrap; word-wrap: break-word; }
.fv-loading { text-align: center; padding: 60px 20px; }
.fv-error { text-align: center; padding: 60px 20px; }
.fv-unsupported { text-align: center; padding: 60px 20px; }

/* ═══════════════════════════════════════════════════════════════════
   Medication & Prescription Cards (Patient Profile)
═══════════════════════════════════════════════════════════════════ */
.rx-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6B7280;
  margin: 16px 4px 10px;
}
.rx-group-label:first-child { margin-top: 0; }
.rx-group-label-muted { color: #9CA3AF; }

.rx-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rx-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.rx-card:hover {
  border-color: #D1D5DB;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.rx-card.discontinued {
  opacity: 0.75;
  background: #FAFAFA;
  border-style: dashed;
}
.rx-card.draft { border-left: 4px solid #9CA3AF; }
.rx-card.active-link { border-left: 4px solid #10B981; }
.rx-card.active-unlinked { border-left: 4px solid #6366F1; }

/* Medication card variant: single column, buttons below in horizontal row */
.rx-card.med-layout {
  grid-template-columns: 1fr;
  gap: 0;
}
.rx-card.med-layout .rx-card-actions {
  flex-direction: row;
  min-width: 0;
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E5E7EB;
  flex-wrap: wrap;
}
.rx-card.med-layout .rx-btn {
  flex: 1 1 auto;
  min-width: 110px;
  max-width: 180px;
  justify-content: center;
}
.rx-card.med-layout.discontinued .rx-card-actions {
  justify-content: flex-end;
}
.rx-card.med-layout.discontinued .rx-btn {
  flex: 0 0 auto;
  min-width: 130px;
}

.rx-card-body { min-width: 0; }

.rx-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rx-card-head .drug-icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: #EEF2FF; color: #6366F1;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.rx-card-head .drug-name {
  font-size: 15px;
  font-weight: 600;
  color: #1F2937;
}
.rx-card-head .drug-name small {
  font-size: 12px;
  font-weight: 400;
  color: #9CA3AF;
  display: block;
  margin-top: 1px;
}

.rx-card-notes {
  font-size: 13px;
  color: #6B7280;
  margin-top: 4px;
  margin-left: 44px;
  line-height: 1.5;
}
.rx-card-notes strong { color: #1F2937; font-weight: 600; }

.rx-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  margin-left: 44px;
  font-size: 12px;
  color: #9CA3AF;
}
.rx-card-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.rx-card-meta i { color: #9CA3AF; }
.rx-card-meta strong { color: #6B7280; font-weight: 600; }

/* Action buttons on cards */
.rx-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.rx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #1F2937;
  text-decoration: none;
  justify-content: flex-start;
  line-height: 1.2;
}
.rx-btn i { font-size: 14px; width: 16px; text-align: center; }
.rx-btn:hover { background: #F3F4F6; border-color: #D1D5DB; }

.rx-btn-primary {
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}
.rx-btn-primary:hover {
  background: linear-gradient(135deg, #4F46E5, #4338CA);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
  color: #fff;
}
.rx-btn-link { color: #6366F1; border-color: #C7D2FE; background: #EEF2FF; }
.rx-btn-link:hover { background: #E0E7FF; }
.rx-btn-warn { color: #B45309; border-color: #FDE68A; background: #FFFBEB; }
.rx-btn-warn:hover { background: #FEF3C7; }
.rx-btn-danger { color: #B91C1C; border-color: #FECACA; background: #FEF2F2; }
.rx-btn-danger:hover { background: #FEE2E2; }
.rx-btn-success { color: #047857; border-color: #A7F3D0; background: #ECFDF5; }
.rx-btn-success:hover { background: #D1FAE5; }

/* Responsive: stack buttons vertically on narrow screens */
@media (max-width: 640px) {
  .rx-card { grid-template-columns: 1fr; }
  .rx-card-actions { min-width: 0; }
  .rx-card.med-layout .rx-btn { max-width: none; }
}

/* === Patient Intake (Phase 4) === */
/* Shared Option C styles for Profile accordion + Encounter right-side panel */

/* --- Summary card (panel top) --- */
.summary-card { margin: 12px 14px; padding: 14px; background: linear-gradient(135deg, #eff6ff, #f0f9ff); border: 1px solid #bae6fd; border-radius: 10px; }
.summary-counts { display: flex; gap: 8px; margin-bottom: 10px; }
.summary-count { flex: 1; text-align: center; padding: 6px 4px; background: #fff; border-radius: 6px; }
.summary-count .num { font-size: 18px; font-weight: 700; color: #0d6efd; }
.summary-count .lbl { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.summary-flags { padding-top: 8px; border-top: 1px solid #bae6fd; }
.flag-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #374151; padding: 4px 0; }
.flag-row:hover { color: #0d6efd; }

/* --- Drill-down list (both panel + profile accordion) --- */
.drill-list { padding: 0 14px; }
.drill-item { border-bottom: 1px solid #f1f5f9; }
.drill-row { display: flex; align-items: center; gap: 10px; padding: 12px 4px; cursor: pointer; font-size: 13px; }
.drill-row:hover { background: #f9fafb; }
.drill-row .drill-name { flex: 1; color: #111827; font-weight: 500; }
.drill-row .drill-count { font-size: 11px; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 10px; }
.drill-row .drill-arrow { color: #9ca3af; font-size: 11px; transition: transform 0.15s; }
.drill-item.open .drill-arrow { transform: rotate(90deg); color: #0d6efd; }
.drill-row.has-alert { background: #fef2f2; margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-left: 3px solid #dc2626; }
.drill-row.has-alert:hover { background: #fee2e2; }
.drill-item.open .drill-row { background: #e7f1ff; color: #0d6efd; }
.drill-item.open .drill-row.has-alert { background: #fee2e2; }
.drill-body { display: none; padding: 8px 4px 14px; }
.drill-item.open .drill-body { display: block; }

/* --- Chips --- */
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chip { display: inline-block; padding: 3px 10px; background: #eef2ff; color: #3730a3; border-radius: 12px; font-size: 11px; font-weight: 500; }

/* --- Key-value rows --- */
.kv-row { font-size: 12px; color: #4b5563; padding: 3px 0; display: flex; align-items: flex-start; gap: 8px; }
.kv-row > i { color: #9ca3af; width: 14px; margin-top: 2px; flex-shrink: 0; }

/* --- Item card --- */
.intake-item { display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; margin-bottom: 6px; background: #f9fafb; border-left: 3px solid #e5e7eb; }
.intake-item .item-icon { width: 30px; height: 30px; border-radius: 6px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.intake-item .item-content { flex: 1; min-width: 0; }
.intake-item .item-title { font-size: 12.5px; font-weight: 600; color: #111827; margin-bottom: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.intake-item .item-notes { font-size: 11.5px; color: #6b7280; line-height: 1.45; }

/* Category tints */
.intake-item.cat-allergy { background: #fef2f2; border-left-color: #dc2626; }
.intake-item.cat-allergy .item-icon { background: #fee2e2; color: #b91c1c; }
.intake-item.cat-meds { background: #eff6ff; border-left-color: #2563eb; }
.intake-item.cat-meds .item-icon { background: #dbeafe; color: #1d4ed8; }
.intake-item.cat-supp { background: #f0fdf4; border-left-color: #16a34a; }
.intake-item.cat-supp .item-icon { background: #dcfce7; color: #15803d; }
.intake-item.cat-history { background: #faf5ff; border-left-color: #9333ea; }
.intake-item.cat-history .item-icon { background: #f3e8ff; color: #7e22ce; }
.intake-item.cat-family { background: #fdf4ff; border-left-color: #c026d3; }
.intake-item.cat-family .item-icon { background: #fae8ff; color: #a21caf; }
.intake-item.cat-lifestyle { background: #f0fdfa; border-left-color: #0d9488; }
.intake-item.cat-lifestyle .item-icon { background: #ccfbf1; color: #0f766e; }

/* Concerns blockquote */
.concern-quote { display: flex; gap: 10px; padding: 10px 12px; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 6px; margin-bottom: 8px; }
.concern-num { width: 24px; height: 24px; background: #f59e0b; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.concern-text { flex: 1; min-width: 0; }
.concern-title { font-size: 12.5px; font-weight: 700; color: #78350f; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.concern-words { font-size: 12px; color: #92400e; font-style: italic; line-height: 1.45; padding-left: 8px; border-left: 2px solid #fde68a; }

/* Severity pills */
.sev { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.sev.mild { background: #dcfce7; color: #15803d; }
.sev.mod  { background: #fef3c7; color: #92400e; }
.sev.sev  { background: #fee2e2; color: #b91c1c; }
.sev.active { background: #d1fae5; color: #065f46; }

/* --- Right-side drawer panel --- */
.intake-panel.intake-panel--drawer {
    position: fixed;
    top: 65px;
    right: 0;
    bottom: 0;
    width: 440px;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1040;
}
.intake-panel.intake-panel--drawer.intake-panel--open { display: flex; }
.intake-panel-header {
    flex-shrink: 0;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.intake-panel-header .panel-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.intake-panel-header .panel-tools { display: flex; gap: 4px; }
.intake-panel .panel-btn-icon {
    width: 30px; height: 30px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    cursor: pointer;
    font-size: 12px;
}
.intake-panel .panel-btn-icon:hover { background: #e7f1ff; color: #0d6efd; border-color: #0d6efd; }
.intake-panel-body { flex: 1; overflow-y: auto; padding: 0; }

/* Pinned indicator */
.intake-panel.intake-panel--pinned .panel-btn-icon[data-panel-pin] { background: #e7f1ff; color: #0d6efd; border-color: #0d6efd; }

/* Profile-side drill-list should not add horizontal padding twice */
.intake-profile-drill { padding: 0 14px 10px; }

/* Encounter sidebar tools group */
.ew-tools-group { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.ew-tools-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: #9ca3af; font-weight: 700; padding: 4px 14px 6px; }
.ew-tool-item .ew-step-icon { color: #0d6efd; }

/* Responsive: drawer becomes full-screen overlay on narrow screens */
@media (max-width: 1024px) {
    .intake-panel.intake-panel--drawer { width: 100%; top: 0; z-index: 1055; }
}

/* =====================================================================
   Intake Status Indicator (chip + sidebar label + calendar strip)
   Spec: rules/technical/intake-status-indicator.md
   Renderer: wwwroot/js/modules/intake/IntakeStatusIndicator.js
   ===================================================================== */

/* Compact chip used in Dashboard + Appointments lists */
.intake-info {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border-radius: 14px;
    font-size: .78rem;
    margin-left: .4rem;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
    vertical-align: middle;
    font-weight: 500;
    white-space: nowrap;
}
.intake-info i { font-size: .85rem; }
.intake-info.empty   { background: #fff5f5; color: #b71c1c; border-color: #f5c6cb; }
.intake-info.partial { background: #fff8e1; color: #8a5a00; border-color: #ffd54f; }
.intake-info.done    { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }

/* Tight strip used inside FullCalendar event card */
.ce-intake {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .2rem .25rem;
    border-radius: 3px;
    font-size: .68rem;
    margin-top: .25rem;
    line-height: 1.1;
    border: 1px solid transparent;
    font-weight: 500;
    cursor: pointer;
}
.ce-intake i { font-size: .7rem; }
.ce-intake.empty   { background: #fff5f5; color: #b71c1c; border-color: #f5c6cb; }
.ce-intake.partial { background: #fff8e1; color: #8a5a00; border-color: #ffd54f; }
.ce-intake.done    { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }

/* Plain text label in patient profile sidebar nav-link.
   margin-left:auto pushes the label to the right edge of the flex nav-link. */
.intake-sidebar-label { font-size: .78rem; margin-left: auto; }
.intake-text-partial { color: #8a5a00 !important; }

/* ============================================================
   ENCOUNTER SUMMARY (R-D)
   - Staff Patient Profile: .encounter-summary-block sits inside
     each expanded encounter accordion row, between Procedures
     and the Note row. Soft background + left accent stripe.
   - Patient Portal: .portal-visit-summary renders the AI summary
     paragraph in the visit detail modal.
   Spec: rules/technical/encounter-summary.md
============================================================ */
.encounter-summary-block {
    background: #FAFBFF;
    border: 1px solid #E0E7FF;
    border-left: 3px solid #4F46E5;
    border-radius: 6px;
    padding: 10px 14px;
}
.encounter-summary-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #1F2937;
    white-space: pre-wrap;
}
.portal-visit-meta {
    background: #EFF6FF;
    border-radius: 8px;
    padding: 12px 16px;
}
.portal-visit-summary {
    font-size: 15px;
    line-height: 1.65;
    color: #212529;
    background: #fafbfc;
    border-left: 3px solid #1B72BE;
    padding: 14px 18px;
    border-radius: 4px;
    white-space: pre-wrap;
}

/* ============================================================
   CARE NOTES
   ------------------------------------------------------------
   Top-nav bell + dropdown (clinician-only) and patient profile
   Care Notes tab. Visibility for the bell is enforced by JS
   in GlobalBridge.js -- the .clinician-only class flips display
   to none for non-clinician roles.
   ============================================================ */

/* Top-nav bell dropdown */
.cn-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    width: 360px;
    max-height: 440px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1060;
}

.cn-dd-header {
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    background: #f8f9fc;
    border-radius: 8px 8px 0 0;
}

.cn-dd-body {
    max-height: 380px;
    overflow-y: auto;
}

.cn-dd-empty {
    padding: 24px 16px;
    text-align: center;
    color: #6b7280;
}
.cn-dd-empty i {
    font-size: 28px;
    color: #10b981;
    display: block;
    margin-bottom: 8px;
}
.cn-dd-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}
.cn-dd-empty-sub {
    font-size: 12px;
    color: #6b7280;
}

.cn-dd-item {
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.1s;
}
.cn-dd-item:hover { background: rgba(99, 102, 241, 0.05); }
.cn-dd-item:last-child { border-bottom: none; }

.cn-dd-patient {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.cn-dd-mrn {
    font-weight: 400;
    color: #6b7280;
    font-size: 11px;
    margin-left: 6px;
}
.cn-dd-preview {
    font-size: 12px;
    color: #4b5563;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cn-dd-time {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

.cn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366F1;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 5px;
}

/* Care Notes tab in patient profile */
.cn-tab {
    padding: 4px;
}

.cn-add-card {
    background: #f8f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
}

.cn-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.cn-list-header strong {
    font-size: 14px;
    color: #111827;
}

.cn-empty {
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

.cn-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fff;
    transition: box-shadow 0.15s;
}
.cn-item:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.cn-item.cn-unseen {
    border-left: 3px solid #6366F1;
    background: #fafafe;
}

.cn-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 6px;
}
.cn-meta strong { color: #111827; font-weight: 600; }

.cn-tag-new {
    font-size: 11px;
    font-weight: 700;
    color: #6366F1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cn-tag-seen { font-size: 11px; color: #10b981; font-weight: 600; }
.cn-tag-for {
    font-size: 11px;
    background: #ede9fe;
    color: #7c3aed;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 500;
}
.cn-edited {
    font-size: 11px;
    font-style: italic;
    color: #9ca3af;
    margin-left: 4px;
}

.cn-content {
    font-size: 13px;
    line-height: 1.5;
    color: #111827;
    white-space: pre-wrap;
    word-break: break-word;
}

.cn-actions .btn-link {
    font-size: 12px;
    text-decoration: none;
}
.cn-actions .btn-link:hover { text-decoration: underline; }

/* Care Notes mic button (used inside the add form) */
.btn-mic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 2px solid #ef4444;
    color: #ef4444;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-mic:hover { background: #ef4444; color: #fff; }
.btn-mic.recording {
    background: #ef4444;
    color: #fff;
    animation: cnMicPulse 1s ease infinite;
}
@keyframes cnMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}


/* ═══════════════════════════════════════════════
   Patient Conversations Tab  (pc- prefix)
   ═══════════════════════════════════════════════ */

/* Two-pane layout (multiple providers) */
.pc-layout {
    display: flex;
    height: 480px;
    min-height: 0;
}

/* Single-provider layout */
.pc-single {
    display: flex;
    flex-direction: column;
    height: 480px;
}

/* Provider list (left pane) */
.pc-provider-list {
    width: 230px;
    min-width: 230px;
    border-right: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pc-list-header {
    padding: 10px 14px 8px;
    font-size: .7rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.pc-list-body {
    overflow-y: auto;
    flex: 1;
}
.pc-provider-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background .1s;
}
.pc-provider-row:hover { background: #f8f9fa; }
.pc-provider-row.active { background: #e8f0fe; }
.pc-provider-row.active .pc-pr-name { color: #1a56db; }
.pc-pr-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
}
.pc-pr-info { flex: 1; min-width: 0; }
.pc-pr-name {
    font-size: .8rem;
    font-weight: 600;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-pr-role {
    font-size: .7rem;
    color: #9ca3af;
    margin-top: 1px;
}
.pc-pr-preview {
    font-size: .72rem;
    color: #6c757d;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-pr-time {
    font-size: .67rem;
    color: #adb5bd;
    white-space: nowrap;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Thread pane (right) */
.pc-thread-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pc-thread-header {
    padding: 10px 14px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}
.pc-thread-header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pc-th-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.pc-th-name {
    font-size: .85rem;
    font-weight: 600;
    color: #212529;
}
.pc-th-role {
    font-size: .7rem;
    color: #9ca3af;
}

/* Message scroll area */
.pc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8f9fb;
}

/* Date divider */
.pc-date-divider {
    text-align: center;
    font-size: .68rem;
    color: #adb5bd;
    position: relative;
    margin: 2px 0;
}
.pc-date-divider::before,
.pc-date-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: #e9ecef;
}
.pc-date-divider::before { left: 0; }
.pc-date-divider::after  { right: 0; }

/* Message rows */
.pc-msg-row {
    display: flex;
    gap: 7px;
}
.pc-msg-row.from-patient {
    flex-direction: row-reverse;
}
.pc-msg-avatar {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 700;
    color: #fff;
    margin-top: 2px;
    flex-shrink: 0;
}
.pc-msg-wrap {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}
.pc-msg-row.from-patient .pc-msg-wrap { align-items: flex-end; }
.pc-msg-sender {
    font-size: .66rem;
    color: #9ca3af;
    margin-bottom: 2px;
    padding-left: 2px;
}
.pc-msg-row.from-patient .pc-msg-sender {
    padding-left: 0;
    padding-right: 2px;
}
.pc-msg-bubble {
    padding: 8px 12px;
    border-radius: 4px 14px 14px 14px;
    font-size: .8rem;
    line-height: 1.5;
    color: #212529;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    word-break: break-word;
}
.pc-msg-row.from-patient .pc-msg-bubble {
    background: #1a56db;
    color: #fff;
    border-radius: 14px 4px 14px 14px;
}
.pc-msg-time {
    font-size: .63rem;
    color: #adb5bd;
    margin-top: 2px;
    padding-left: 2px;
}
.pc-msg-row.from-patient .pc-msg-time {
    padding-left: 0;
    padding-right: 2px;
}

/* Footer info line */
.pc-footer {
    padding: 7px 14px;
    border-top: 1px solid #f0f0f0;
    font-size: .71rem;
    color: #adb5bd;
    text-align: center;
    background: #fff;
    flex-shrink: 0;
}
.pc-footer strong { color: #6c757d; }

/* Empty state */
.pc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #adb5bd;
    text-align: center;
}
.pc-empty i {
    font-size: 2.4rem;
    margin-bottom: 12px;
    color: #dee2e6;
}

/* Secondary KPI figure. Keeps a related number on its parent card instead of
   spawning a fifth card that orphans onto a second row. */
.report-kpi-pill {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 20px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

/* ============================================
   A/R AGING REPORT
   Grouped payor > patient sheet, plus the print
   header the clinic asked for on paper output.
   ============================================ */

/* Payor group heading */
#reportDataTable tr.ar-payer td {
    background: #f1f5f9;
    border-top: 2px solid #cbd5e1;
    font-size: 0.95rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Patient detail line (all that patient's claims with the payor, summed) */
#reportDataTable tr.ar-detail td:first-child {
    padding-left: 2rem;
}

/* Total by payor */
#reportDataTable tr.ar-subtotal td {
    background: #fffbeb;
    border-top: 1px solid #e2e8f0;
    border-bottom: 2px solid #cbd5e1;
}

/* Grand total lives in tfoot */
#reportDataTable tfoot tr.ar-grand td {
    background: #1e293b;
    color: #fff;
    border-top: 2px solid #0f172a;
}

/* Practice header: print only, never on screen */
.ar-print-header {
    display: none;
}

.ar-print-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
}

.ar-practice {
    font-size: 1.05rem;
    font-weight: 700;
}

.ar-practice-sub {
    font-size: 0.75rem;
    color: #333;
}

.ar-print-meta {
    text-align: right;
    font-size: 0.72rem;
    color: #333;
    line-height: 1.6;
}

.ar-print-title {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: 10px;
}

.ar-print-range {
    text-align: center;
    font-size: 0.75rem;
    color: #333;
}

.ar-print-note {
    text-align: center;
    font-size: 0.72rem;
    font-style: italic;
    color: #444;
    margin-bottom: 10px;
}

@media print {
    /* Landscape: seven money columns do not fit portrait at a readable size.
       Page numbering is left to the browser's own print header/footer option,
       because Chrome does not support @page margin boxes (@bottom-right etc). */
    @page {
        size: landscape;
        margin: 12mm 10mm 14mm 10mm;
    }

    .ar-aging-active .ar-print-header {
        display: block;
        margin-bottom: 10px;
    }

    /* Chrome that must not reach paper */
    .ar-aging-active #reportFiltersCard,
    .ar-aging-active #reportChartCard,
    .ar-aging-active #reportKpiCards,
    .ar-aging-active #reportTableCard .card-header,
    .ar-aging-active .reports-sidebar,
    .ar-aging-active .btn-group,
    .ar-aging-active .page-header,
    .ar-aging-active #reportDetailLoading,
    .ar-aging-active #reportDetailEmpty {
        display: none !important;
    }

    .ar-aging-active #reportTableCard {
        border: none !important;
    }

    .ar-aging-active #reportDataTable {
        font-size: 10.5pt;
        width: 100%;
    }

    /* Repeat column headers on every printed page */
    .ar-aging-active #reportDataTable thead {
        display: table-header-group;
    }

    .ar-aging-active #reportDataTable tfoot {
        display: table-footer-group;
    }

    /* Never split a patient line or a payor total across a page break */
    .ar-aging-active #reportDataTable tr {
        page-break-inside: avoid;
    }

    .ar-aging-active #reportDataTable tr.ar-payer td {
        page-break-after: avoid;
    }

    /* Grey fills do not survive most printers; use rules instead */
    .ar-aging-active #reportDataTable tr.ar-payer td,
    .ar-aging-active #reportDataTable tr.ar-subtotal td {
        background: none !important;
        border-top: 1px solid #000 !important;
    }

    .ar-aging-active #reportDataTable tr.ar-subtotal td {
        border-bottom: 1px solid #000 !important;
    }

    .ar-aging-active #reportDataTable tfoot tr.ar-grand td {
        background: none !important;
        color: #000 !important;
        border-top: 2px solid #000 !important;
        border-bottom: 3px double #000 !important;
    }
}

/* Claim note quick-view: preserve the biller's own line breaks, and keep a long
   note scrollable instead of stretching the modal off-screen. */
.claim-note-text {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 55vh;
    overflow-y: auto;
    font-size: 0.925rem;
    line-height: 1.55;
}

/* Claims list Actions button: RehabDox draws it as a small icon-only button (btn-sm).
   Same metrics as the effective .btn-sm, as a class of its own (btn-sm is not used here). */
.claims-action-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 8px;
    gap: 5px;
}

.claims-action-btn i,
.claims-action-btn .bi {
    font-size: 11px;
}

/* Claims filter bar Print button: the same size and weight as Clear beside it. */
.schedule-filter-print-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-md);
}

/* Note indicator next to the claim number in the claims list. */
.claim-note-badge {
    cursor: pointer;
    vertical-align: middle;
}

/* Finance tab: the visits a payment cleared, listed inside the payment row. */
.finance-applied-line {
    padding: 1px 0;
    line-height: 1.45;
    white-space: nowrap;
}

.finance-applied-line + .finance-applied-line {
    border-top: 1px dotted #e9ecef;
}

/* ============================================
   DRAGGABLE FLOATING BUTTONS
   Help and Messages can be parked anywhere.
   Position is applied inline by DraggableFab.js;
   these rules only cover the grab affordance.
   ============================================ */
/* The selector has to out-specify three things, hence the :not(:disabled):
     .chat-toggle-btn / .imehr-help-toggle-btn   cursor:pointer   (0,1,0)
     Bootstrap [type="button"]:not(:disabled)    cursor:pointer   (0,2,0)
   A bare .fab-draggable (0,1,0) loses to all of them, and plain
   button.fab-draggable (0,1,1) still loses to Bootstrap. This is (0,2,1).
   The chat button carries type="button" and the Help button does not, which is
   why only one of the two looked wrong before. */
button.fab-draggable:not(:disabled) {
    cursor: grab;
    /* Stops the browser turning a drag into a scroll or a text selection,
       which otherwise makes the buttons impossible to move on a touchscreen. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

button.fab-draggable:not(:disabled):active,
button.fab-dragging:not(:disabled) {
    cursor: grabbing;
}

.fab-dragging {
    /* Lift it above the panels while it is being moved. */
    z-index: 1060 !important;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.55) !important;
    /* No easing mid-drag: the button must track the pointer exactly. */
    transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   EOB posting screen - stacked sections, no tabs, the fixed-column posting
   grid. Adapted from RehabDox's equivalent classes so the biller sees the
   same screen; the section band is deliberately light (house rule: no dark
   card-header backgrounds) where RehabDox's own version uses a dark #111827
   band. Values below are RehabDox's, class for class.
   ═══════════════════════════════════════════════════════════════════════ */

.eob-section-band {
    background: #F3F4F6;
    border: 1px solid var(--border-color, #E5E7EB);
    color: var(--bs-primary, #0d6efd);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    margin: 1.25rem 0 0.75rem;
}

.eob-section-band:first-child {
    margin-top: 0;
}

.eob-field-note {
    font-size: 0.75rem;
    color: #9CA3AF;
    margin-top: 0.2rem;
}

/* The card-last-4 warning has to survive being read at a glance, so it is not
   the same muted grey as the ordinary field hints around it. */
.eob-field-warn {
    color: #92400E;
}

/* Remaining balance pill, header bar. Neutral by default so a batch whose
   figure has not arrived yet does not claim to be either settled or
   outstanding; .zero/.open colour it once the figure is known. */
.eob-remaining-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

.eob-remaining-pill.zero {
    border-color: #A7F3D0;
    color: #059669;
    background: #ECFDF5;
}

.eob-remaining-pill.open {
    border-color: #FDE68A;
    color: #D97706;
    background: #FFFBEB;
}

.eob-patient-row {
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.5rem;
    background: #fff;
}

.eob-patient-row.posted {
    border-color: #A7F3D0;
    background: #F0FDF4;
}

/* A reversed posting is still ON the check list, tinted red rather than green so
   it is read as the record of a correction and not as money that stayed applied.
   Hiding it would remove the only evidence that the correction happened. */
.eob-patient-row.posted.reversed {
    border-color: #FECACA;
    background: #FEF2F2;
}

.eob-patient-row .amt {
    font-weight: 700;
}

/* The amount on a reversed row: struck through, because the figure is true of
   what was posted and no longer true of the check. */
.eob-amt-reversed {
    text-decoration: line-through;
}

/* One posting inside the read-only "what was posted" dialog. A claim can carry
   more than one under a single check, so each gets its own boxed block. */
.eob-posted-detail {
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: #fff;
}

.eob-posted-detail.reversed {
    border-color: #FECACA;
    background: #FEF2F2;
}

/* The per-line pick list in the reverse dialog. Scrolls at a height that still
   shows several lines, so a claim with twenty of them does not push the reason
   box and the confirm button off the dialog. */
.eob-reverse-lines {
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    max-height: 190px;
    overflow-y: auto;
}

.eob-reverse-line {
    font-size: 0.82rem;
    padding: 0.15rem 0;
}

/* Dense posting grid: the row height is the whole point, since a biller tabs
   through dozens of these per check. */
.eob-post-grid td {
    padding: 0.35rem 0.4rem;
    vertical-align: middle;
}

.eob-post-grid th {
    padding: 0.5rem 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.eob-post-grid .form-control,
.eob-post-grid .form-select {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* Unapplied-balance-on-close panel. */
.eob-unapplied-box {
    border: 1px dashed #FCD34D;
    background: #FFFBEB;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.eob-badge-unapplied {
    background: #FEF3C7;
    color: #92400E;
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.3em 0.55em;
    border-radius: 5px;
}

.eob-note-thread {
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 10px;
    background: #fff;
    max-height: 420px;
    overflow-y: auto;
}

.eob-note-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #F3F4F6;
}

.eob-note-item:last-child {
    border-bottom: none;
}

.eob-note-author {
    font-weight: 600;
    font-size: 0.85rem;
    color: #111827;
}

.eob-note-time {
    font-size: 0.75rem;
    color: #9CA3AF;
}

.eob-note-locked {
    font-size: 0.7rem;
    color: #9CA3AF;
}

/* The "what you are about to reverse" panel. Tinted rather than plain so the
   claim and the amount read as the subject of the dialog, not as more body copy
   above the reason box. */
.eob-reverse-target {
    border: 1px solid #FECACA;
    background: #FEF2F2;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

/* The check being voided, named at the top of the void dialog. */
.eob-void-target {
    background: #F0FDF4;
    border: 1px solid #A7F3D0;
    border-radius: 7px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

/* A refused entry, as opposed to .eob-field-note which is standing guidance.
   Same size as the notes it sits under so the field does not jump when it
   appears, but coloured and weighted so it is not mistaken for more advice. */
.eob-field-error {
    font-size: 0.75rem;
    font-weight: 600;
    color: #B91C1C;
    margin-top: 0.25rem;
}

/* The reverse dialog is short and must not scroll internally.
   styles.css sets a GLOBAL `.modal-body { overflow-y:auto; max-height: calc(100vh - 210px) }`
   for big data modals. `.modal-fullscreen` already has a carve-out from it; a plain
   centred dialog does not, so this one had its explanatory text sliced off
   mid-sentence behind a scrollbar. Releasing the cap does NOT put the confirm button
   out of reach on a short screen: Bootstrap's own `.modal` is overflow-y:auto, so an
   oversized dialog scrolls as a whole. */
#eobReverseModal .modal-body {
    max-height: none;
    overflow-y: visible;
}

/* ─────────────────────────────────────────────────────────────────────────
   EOB adjustment rows, deny, and the computed footer strip

   The four typed boxes (Deduct., Copay, Coins., Adj.) plus the Adj. Code
   dropdown. Everything those boxes used to total lives in the strip under the
   table and is computed, so nothing on this screen is both typed and totalled
   in two places.

   TYPED CELLS ARE PAPER WHITE, COMPUTED CELLS ARE GREY. That one distinction
   is the only thing that tells a biller which numbers she owns.
   ───────────────────────────────────────────────────────────────────────── */

/* The three patient-responsibility boxes in the inline edit panel: Deductible,
   Copay, Coinsurance. Each is one pinned PR adjustment row under the hood. */
.eob-prbox-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.eob-prbox-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.eob-prbox-label {
    width: 78px;
    flex: 0 0 78px;
    font-size: 0.76rem;
    color: #6B7280;
    text-align: right;
}

.eob-prbox-amount {
    width: 90px;
    flex: 0 0 90px;
    text-align: right;
}

.eob-adj-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}

.eob-deny-btn {
    font-size: 0.74rem;
    color: #6B7280;
    background: #fff;
    border: 1px solid #D5DDE6;
    border-radius: 3px;
    padding: 0.18rem 0.45rem;
    white-space: nowrap;
}

.eob-deny-btn:hover {
    color: #9B2C2C;
    border-color: #E9C3C0;
}

/* A denied line is a decision, so the whole row carries it rather than one
   badge in one cell. */
.eob-post-grid tr.eob-denied-row > td {
    background: #FBEDEC;
}

.eob-chip-denied {
    background: #FBEDEC;
    color: #9B2C2C;
    border: 1px solid #E9C3C0;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    white-space: nowrap;
}

.eob-deny-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    width: 100%;
}

.eob-deny-note .eob-deny-reason {
    font-size: 0.78rem;
    max-width: 220px;
}

.eob-undo {
    color: #1F5FA8;
    border: none;
    background: none;
    padding: 0;
    font-size: 0.78rem;
    text-decoration: underline;
}

/* Says out loud that Deny is about to overwrite what she typed. It is not done
   silently, and the sentence stays on screen until she picks a reason. */
.eob-deny-warning {
    font-size: 0.74rem;
    color: #92400E;
    width: 100%;
}

/* Computed, read only. Same grey as the strip below, so "not yours to type"
   means one thing on this screen. */
.eob-computed-head,
.eob-post-grid td.eob-computed {
    background: #F3F4F6;
    color: #4A5765;
}

.eob-totals-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--border-color, #E5E7EB);
    background: #F3F4F6;
}

.eob-total {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.15rem 0;
}

.eob-total-key {
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #7A8797;
}

.eob-total-value {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: #4A5765;
}

.eob-total.strong .eob-total-value {
    color: #111827;
    font-weight: 600;
}

.eob-total-value.good {
    color: #1D6B4B;
}

/* The edit-one-posted-line panel.

   Tinted like the reverse panel because it ends in the same place: saving it
   reverses the posted line and reposts it. Opening it does NOT, and nothing in
   this file should ever be read as saying otherwise. */
.eob-line-edit {
    border: 1px solid #BFDBFE;
    background: #EFF6FF;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-top: 0.5rem;
}

.eob-line-edit .eob-line-edit-note {
    font-size: 0.75rem;
    color: #4A5765;
}

.eob-edit-line-btn {
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
}

/* ============================================
   Billing > Claims: Print button output
   BillingModule._printClaims appends #claimsPrintArea straight to <body>
   and sets body.printing-claims for the print. Every other direct child of
   <body> is display:none while printing, so it takes no space on paper.
   Scoped to that class, so the Reports print styles above are untouched.
   ============================================ */

.claims-print-area {
    display: none;
}

/* The paper matches RehabDox's biller-approved Claims printout (its _printHtml
   styles): Arial 11px, grey header row, tfoot total row, status words in small
   grey under the balance. Kept IMEHR specific: it prints through the page itself
   (body.printing-claims) and not an iframe, and it covers every filtered page. */
@media print {
    @page { size: portrait; margin: 12mm; }

    body.printing-claims > *:not(.claims-print-area) { display: none !important; }
    body.printing-claims > .claims-print-area { display: block !important; }

    #claimsPrintArea {
        font-family: Arial, Helvetica, sans-serif;
        color: #000;
        font-size: 11px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #claimsPrintArea .claims-print-title {
        font-size: 18px;
        font-weight: bold;
        margin: 0 0 4px;
    }

    #claimsPrintArea .claims-print-meta {
        color: #444;
        margin-bottom: 4px;
    }

    /* Only IMEHR: the cap note ("Showing the first N of M") for a print that was cut off. */
    #claimsPrintArea .claims-print-note {
        font-weight: bold;
        margin-bottom: 4px;
    }

    #claimsPrintArea .claims-print-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
    }

    /* Repeat column headers on every printed page; the total row prints once, at the end. */
    #claimsPrintArea .claims-print-table thead { display: table-header-group; }
    #claimsPrintArea .claims-print-table tfoot { display: table-row-group; }

    #claimsPrintArea .claims-print-table tr {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    #claimsPrintArea .claims-print-table th,
    #claimsPrintArea .claims-print-table td {
        border: 0;
        border-bottom: 1px solid #ccc;
        padding: 5px 6px;
        text-align: left;
        vertical-align: top;
    }

    #claimsPrintArea .claims-print-table th {
        background: #f0f0f0;
        border-bottom: 2px solid #888;
        font-weight: bold;
    }

    #claimsPrintArea .claims-print-table .claims-print-num {
        text-align: right;
        white-space: nowrap;
    }

    #claimsPrintArea .claims-print-status {
        font-size: 10px;
        color: #555;
        white-space: normal;
    }

    #claimsPrintArea .claims-print-table tfoot td {
        font-weight: bold;
        border-top: 2px solid #888;
        border-bottom: none;
    }

    #claimsPrintArea .claims-print-empty {
        text-align: center;
        color: #666;
        padding: 20px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   INFO HINT - the house (i) pattern (js/shared/ui/InfoHint.js)
   Ported byte for byte from RehabDox (first used by the Claims list Status
   column header, RehabDox spec 2026-09-28 Req 6).
   ══════════════════════════════════════════════════════════════════════════ */

/* The icon. Sized to sit on a label line without pushing it taller, and given a
   real hit area on touch via padding rather than a bigger circle. */
.info-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #9CA3AF;
    color: #6B7280;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    margin-left: 0.3rem;
    vertical-align: middle;
    user-select: none;
}

.info-hint:hover,
.info-hint[aria-expanded="true"] {
    background: #4F46E5;
    border-color: #4F46E5;
    color: #fff;
}

.info-hint:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
}

/* The panel is appended to document.body, not to the card that owns the icon, so
   a modal with its own overflow cannot clip it. z-index clears the stacked claim
   dialogs, because a hint that opens behind the dialog it explains is worse than none. */
.info-hint-panel {
    position: absolute;
    z-index: 2000;
    max-width: 340px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    padding: 0.75rem 0.9rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #111827;
}

.info-hint-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 0.35rem; }
.info-hint-list { margin: 0.35rem 0 0 0.9rem; padding: 0; }
.info-hint-list li { margin-bottom: 0.18rem; }

/* ============================================
   Patient Finance tab, Balance details modal, Collect Payment summary
   Spec: Docs/specs/2026-10-03_Hammas-Patient-Finance-Tab_SPEC.md
   Mockup: Docs/mockups/patient-finance-tab.html
   Container queries so the real modal width decides the layout, not the window.
   ============================================ */
.fin-ft { container-type: inline-size; container-name: fin-ft; }
.fin-head { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; }
.fin-owes { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.fin-owes.zero { color: #065F46; }
.fin-owes.some { color: #DC2626; }
.fin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.fin-soon-wrap { display: inline-flex; align-items: center; gap: 6px; }
.fin-soon-note { font-size: .8rem; color: #6B7280; }
.fin-calc-link { font-size: .88rem; }
.fin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.fin-tile { border: 1px solid #E5E7EB; border-radius: 10px; padding: 12px 14px; background: #fff; }
.fin-tile .t-label { font-size: .82rem; color: #6B7280; }
.fin-tile .t-val { font-size: 1.4rem; font-weight: 700; }
.fin-tile .t-sub { font-size: .8rem; color: #6B7280; }
.fin-tile.today { border-color: #C7D2FE; background: #EEF2FF; }
.fin-credit-line { margin-top: 12px; border: 1px solid #A5F3FC; background: #ECFEFF; border-radius: 10px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; }
.fin-credit-line i { color: #0891B2; font-size: 1.2rem; }
.fin-credit-amt { font-weight: 700; color: #155E75; }

.fin-chip { display: inline-block; font-size: .76rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.fin-chip.ins { background: #D1FAE5; color: #065F46; }
.fin-chip.est { background: #FEF3C7; color: #92400E; }
.fin-chip.self { background: #CFFAFE; color: #155E75; }
.fin-chip.st-due { background: #FEE2E2; color: #991B1B; }
.fin-chip.st-partly { background: #FEF3C7; color: #92400E; }
.fin-chip.st-paid { background: #D1FAE5; color: #065F46; }
.fin-chip.st-credit { background: #CFFAFE; color: #155E75; }
.fin-chip.today { background: #6366F1; color: #fff; }
.fin-chip.void { background: #E5E7EB; color: #374151; }

.fin-pay-row { border: 1px solid #E5E7EB; border-radius: 10px; padding: 12px 14px; background: #fff; margin-bottom: 10px; display: grid; grid-template-columns: 130px 1fr auto; gap: 8px 16px; align-items: start; }
.fin-pay-row .pay-amt { font-weight: 700; font-size: 1.2rem; }
.fin-pay-row .pay-date { font-size: .8rem; color: #6B7280; }
.fin-pay-row .pay-went { font-weight: 600; }
.fin-pay-row .pay-why { font-size: .88rem; color: #6B7280; }
.fin-pay-row .pay-meta { font-size: .82rem; color: #6B7280; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fin-pay-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.fin-pay-row.voided .pay-amt, .fin-pay-row.voided .pay-went, .fin-pay-row.voided .pay-why { text-decoration: line-through; color: #9CA3AF; }
.fin-pay-row.voided .fin-chip { text-decoration: none; }
.fin-pay-row.voided { background: #FAFAFA; }
.fin-pay-row.held { border-color: #A5F3FC; background: #F5FEFF; }
.fin-void-reason { color: #991B1B; }
.fin-rcpt-lines { display: flex; flex-direction: column; gap: 4px; }
.fin-rcpt-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 12px; font-size: .92rem; }
.fin-rcpt-line .fl-what { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.fin-rcpt-line .fl-amt { font-weight: 700; margin-left: auto; min-width: 6rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-rcpt-line .fl-type { font-size: .8rem; color: #6B7280; }
.fin-rcpt-line.voided .fl-what, .fin-rcpt-line.voided .fl-amt { text-decoration: line-through; color: #9CA3AF; }
.fin-receipt.voided .fin-rcpt-line .fl-what, .fin-receipt.voided .fin-rcpt-line .fl-amt { text-decoration: line-through; color: #9CA3AF; }
.fin-pay-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.fin-filter-panel { border: 1px dashed #E5E7EB; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }

.fin-bd-sec { margin-top: 18px; }
.fin-bd-sec:first-child { margin-top: 0; }
.fin-bd-sec h6 { font-weight: 700; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.fin-why-box { background: #F3F4F6; border-radius: 10px; padding: 10px 14px; }
.fin-credit-note { background: #ECFEFF; border: 1px solid #A5F3FC; border-radius: 10px; padding: 10px 14px; font-size: .92rem; }
.fin-dn-line { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid #FEE2E2; }
.fin-dn-line:first-child { border-top: 0; }
.fin-dn-line .dn-date { font-weight: 600; min-width: 110px; }
.fin-dn-line .dn-prov { color: #6B7280; font-size: .9rem; flex: 1 1 140px; }
.fin-dn-line .dn-num { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .88rem; color: #6B7280; }
.fin-dn-line .dn-num b { color: #1F2937; }
.fin-visit-card { border: 1px solid #E5E7EB; border-left-width: 4px; border-radius: 10px; padding: 8px 12px; background: #fff; margin-bottom: 8px; }
.fin-visit-card.s-due { border-left-color: #DC2626; }
.fin-visit-card.s-partly { border-left-color: #F59E0B; }
.fin-visit-card.s-paid { border-left-color: #10B981; }
.fin-visit-card.s-credit { border-left-color: #0891B2; }
.fin-visit-card .v-top { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.fin-visit-card .v-date { font-weight: 700; }
.fin-visit-card .v-prov { color: #6B7280; font-size: .9rem; }
.fin-visit-card .v-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin-top: 6px; }
.fin-visit-card .f-label { font-size: .76rem; color: #6B7280; text-transform: uppercase; letter-spacing: .03em; }
.fin-visit-card .f-val { font-weight: 600; font-size: .95rem; }
.fin-receipt-preview { border: 1px dashed #9CA3AF; border-radius: 8px; padding: 12px 16px; background: #fff; font-size: .9rem; }
.fin-receipt-preview .r-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }

@container fin-ft (max-width: 820px) {
    .fin-head { grid-template-columns: 1fr; }
    .fin-actions { justify-content: flex-start; }
    .fin-pay-row { grid-template-columns: 110px 1fr; }
    .fin-pay-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@container fin-ft (max-width: 560px) {
    .fin-pay-row { grid-template-columns: 1fr; }
    .fin-owes { font-size: 1.7rem; }
}

/* Collect Payment: one-line summary, three separate lines, collapsed visit override */
.cp-sum-box { background: #EEF2FF; border: 1px solid #C7D2FE; border-radius: 10px; padding: 12px 14px; font-size: 1.02rem; }
.cp-sum-box.hold { background: #ECFEFF; border-color: #A5F3FC; }
.cp-three-lines .row-l { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #E5E7EB; }
.cp-three-lines .row-l:last-child { border-bottom: 0; }
.cp-three-lines .lbl { color: #6B7280; }
.cp-three-lines .lbl small { display: block; font-size: .78rem; }
.cp-three-lines .amt { font-weight: 700; white-space: nowrap; }
.cp-warn-line { background: #FEF3C7; color: #92400E; border-radius: 8px; padding: 8px 12px; font-size: .88rem; margin-top: 8px; }
.cp-visit-pick { border: 1px solid #E5E7EB; border-radius: 8px; padding: 8px 12px 8px 2.2rem; margin-bottom: 6px; }
.cp-visit-pick-label { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; width: 100%; }
.cp-visit-pick-label .grow { flex: 1 1 200px; }

/* ============================================================================
   CLAIM SCREEN COMPACT MODE (.claim-compact)
   CTO request 2026-10-03: the claim screen (CMS-1500 and UB-04) was too roomy.

   SCOPE: every rule below starts with .claim-compact, a class carried only by
   #claimDetailModal (Views/Shared/_ModalsAdmin.cshtml). Nothing else in the app
   changes. Styling only: no ids, data attributes, markup order, labels or colours.

   REFERENCE: RehabDox's claim screen. It shares this stylesheet's globals, so its
   density comes from markup utilities that this port did not carry over:
     card mb-2 (7px), card-body p-2 (7px), a small h6 card-title instead of a
     card-header band, btn-sm buttons, modal-header py-2, modal-body p-3 (10.5px),
     labels at .small (10.5px). The rules here reproduce those effective metrics.

   BUTTONS: the project rule forbids the btn-sm class in markup. The buttons in here
   get the metrics of the effective .btn-sm (the later .btn-sm rule: padding .2rem
   .5rem, font .75rem; radius 8px, gap 5px and 11px icons from the earlier one),
   same precedent as .claims-action-btn. Do not add btn-sm to the markup.

   Utilities carry !important, so the overrides of mb-3 / py-2 / py-3 / g-3 style
   utilities below need it too.
   ============================================================================ */

/* Modal chrome: header py-2, body p-3 (was 24px + the container's own 10.5px). */
.claim-compact .modal-header {
    padding: 0.5rem 1rem;
}

.claim-compact .modal-body {
    padding: 0.75rem;
}

.claim-compact #claimDetailBody > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Buttons: the effective .btn-sm metrics, without the btn-sm class. */
.claim-compact .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 8px;
    gap: 5px;
}

.claim-compact .btn i,
.claim-compact .btn .bi {
    font-size: 11px;
}

/* Sections: card gap 10.5px -> 7px, card padding 11.9px -> 7px. Cards that hold a
   table (card-body p-0) keep zero padding so the table meets the card edge. */
.claim-compact .mb-3 {
    margin-bottom: 0.5rem !important;
}

.claim-compact .pb-3 {
    padding-bottom: 0.5rem !important;
}

.claim-compact .mt-3 {
    margin-top: 0.5rem !important;
}

.claim-compact .gap-3 {
    gap: 0.5rem !important;
}

.claim-compact .card-body:not(.p-0) {
    padding: 0.5rem !important;
}

/* The section title band (RehabDox draws the title inside the body as a small h6). */
.claim-compact .card-header {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.85rem;
}

/* Field rows: horizontal gutter 21px (default .row) or 10.5px (g-3) -> 7px. */
.claim-compact .row {
    --bs-gutter-x: 0.5rem;
}

.claim-compact .row.g-3 {
    --bs-gutter-y: 0.5rem;
}

/* Field labels: the text-muted class on them resets .small back to full size (the
   global .text-muted { font-size: inherit }), so they read 12.25px against
   RehabDox's 10.5px. Same size as RehabDox. */
.claim-compact .form-label.small {
    font-size: 0.75rem;
}

/* Alerts inside the screen (readiness strip, resubmission, denial, Office Ally notes). */
.claim-compact .alert {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Comments thread: same metrics as RehabDox's thread (cap 220px, tighter rows and type). */
.claim-compact .claim-comment-thread {
    max-height: 220px;
}

.claim-compact .claim-comment-item {
    padding: 0.5rem 0.65rem;
}

.claim-compact .claim-comment-author {
    font-size: 0.8rem;
}

.claim-compact .claim-comment-time {
    font-size: 0.72rem;
}

.claim-compact .claim-comment-text {
    font-size: 0.82rem;
}

.claim-compact .claim-comment-locked,
.claim-compact .claim-comment-count {
    font-size: 0.7rem;
}
/* END CLAIM SCREEN COMPACT MODE */

/* ============================================
   Co-Sign (provider form box, dashboard chips, review panel)
   ============================================ */
.cosign-settings-box {
    background: var(--bs-body-bg, #fff);
}

.stat-card.cosign-chip.has-items {
    border-color: #ffc107;
    background: #fff8e1;
    box-shadow: 0 0 0 1px #ffc107;
}

.cosign-chip:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.cosign-table .cosign-row[data-action="review"] {
    cursor: pointer;
}

.cosign-table .cosign-comment-cell {
    max-width: 280px;
    white-space: pre-wrap;
    word-break: break-word;
}

.cosign-review-panel {
    background: #f8f9fa;
}

.cosign-code-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.cosign-code-list li {
    padding: 0.125rem 0;
}

.cosign-events {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.cosign-event {
    padding: 0.25rem 0;
}

.cosign-event-comment {
    margin: 0.25rem 0 0 1.5rem;
    padding: 0.375rem 0.625rem;
    background: #fff;
    border-left: 3px solid #ffc107;
    white-space: pre-wrap;
    word-break: break-word;
}


/* PsyEHR: psychiatry-only UI. Hidden unless the tenant runs the Psychiatry edition (body.psy-enabled, set in _Layout.cshtml). */
body:not(.psy-enabled) .psy-only { display: none !important; }
/* PRODUCT DECISION (Oct 2026): structured notes, risk and safety plan, and the crisis button were intentionally switched off; notes are plain HTML templates like IMEHR.
   To bring them back set Psychiatry:StructuredNotesEnabled / RiskAndSafetyPlanEnabled / CrisisButtonEnabled = true (see appsettings.example.json). */
body:not(.psy-feat-structured) .psy-needs-structured { display: none !important; }
body:not(.psy-feat-risk) .psy-needs-risk { display: none !important; }
body:not(.psy-feat-crisis) .psy-needs-crisis { display: none !important; }

/* PsyEHR Phase 1A: the sensitivity selector (notes, documents) is for Clinician, Clinician Director
   and Behavioral Care Manager only (body classes from UserCapabilitiesDto). The server enforces it. */
body:not(.clinician):not(.care-manager) .psy-sensitivity-control { display: none !important; }