/* ============================================
   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; }

/* Therapist/Clinician-specific: hide appointment management and patient editing */
body.clinician .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;
    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);
}

.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;
}

/* 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;
}

/* 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);
}

.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 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;
}

@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 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;
}

/* A select paints Bootstrap's chevron as a background image sitting inside its
   own right padding. Both `.form-control, .form-select` blocks in this file use
   the `padding` shorthand, which resets that padding to the horizontal value,
   so any option long enough to fill the control renders its last characters
   underneath the arrow. Restore the room the arrow needs.

   This must stay AFTER the block above: same specificity, so the later rule
   wins. Placed before it, it silently does nothing.

   Every select in the app depends on this, not only the dashboard month picker
   where it was first noticed. */
.form-select {
    padding-right: 2.25rem;
}

.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;
}

/* Expand button */
.floating-rec-expand {
    font-size: 12px;
    padding: 4px 10px;
    flex-shrink: 0;
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.floating-rec-expand:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    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 — remove this block when Prescriptions feature is enabled */
.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; }
/* Shared coming-soon for main sidebar + patient profile tab — remove when Prescriptions is enabled */
.nav-coming-soon { opacity: 0.42 !important; pointer-events: none !important; cursor: not-allowed !important; }
/* END COMING SOON */

/* 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;
}