:root {
    /* ── Sidebar width (mirrored from MainLayout.razor.css) ── */
    --sidebar-width: 0px;

    /* ── Spacing scale ─────────────────────────────────────── */
    --spacing-xs:  0.25rem;
    --spacing-sm:  0.5rem;
    --spacing-md:  1rem;
    --spacing-lg:  1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;

    /* ── Shadow scale ──────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* ── Transition presets ────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease;

    /* ── Border radius scale ───────────────────────────────── */
    --radius-sm:     0.375rem;
    --radius-md:     0.75rem;
    --radius-lg:     1rem;
    --radius-xl:     50rem;   /* pill / full-round (Bootstrap rounded-pill equivalent) */
    --radius-circle: 50%;

    /* ── Layout offsets ────────────────────────────────────── */
    --header-height:    3.5rem;
    --auth-page-offset: 120px;   /* space subtracted for auth page min-height */

    /* Bootstrap semantic colors */
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --light-bg: #f8f9fa;
    --dark-text: #212529;
    --border-color: #dee2e6;

    /* Brand navy palette (sidebar, Clara, admin card headers) */
    --brand-navy: #1a2d5a;
    --brand-dark: #0a1a3a;
    --brand-mid: #0d1f40;

    /* Gray scale tokens */
    --gray-dark: #333333;                /* login display user text */
    --gray-medium: #495057;
    --gray-subtle: #e9ecef;
    --gray-muted: #adb5bd;
    --gray-600: #5c636a;                 /* logout btn hover */
    --table-stripe-bg: #f1f3f5;
    --table-hover-bg: #e2e6ea;

    /* Danger dark — exit/delete actions */
    --danger-dark: #b02a37;

    /* Notification badge */
    --badge-notify: #ff5722;
    --whatsapp-green: #25d366;          /* WhatsApp brand green — messaging channel badge/icon */

    /* Clara / ChatBot surface & blue-gray palette */
    --surface-cool: #fafbfc;             /* panel & messages background */
    --surface-slate: #f8fafc;            /* card header background */
    --blue-gray-50: #eceff1;             /* lang chip background */
    --blue-gray-100: #e8edf6;            /* hover bg, voice btn default */
    --blue-gray-300: #90a4ae;            /* lang chip text */
    --blue-gray-500: #78909c;            /* status/toggle/nav muted text */
    --toggle-off: #cfd8dc;               /* toggle switch off-state */
    --disabled-bg: #f5f5f5;              /* disabled input background */
    --gray-300: #e0e0e0;                 /* nav progress bar track */
    --scrollbar-thumb: #cccccc;
    --scrollbar-thumb-hover: #aaaaaa;
    --slate-700: #334155;                /* form label dark slate */
    --slate-500: #64748b;                /* table header muted text */
    --slate-border: #e2e8f0;             /* card/table border */
    --activity-accent: #667eea;          /* activity section indigo accent */

    /* Proactive / notification accent (deep orange) */
    --proactive-bg: #fff8e1;             /* proactive message bubble */
    --proactive-badge: #e65100;          /* proactive badge text */
    --amber: #ff9800;                    /* thinking status colour */

    /* Login inline button (blue-800) */
    --blue-800: #1565c0;
    --code-color: #c02d76;               /* inline <code> element text */

    /* Sidebar nav link colors */
    --nav-link-color: #d7d7d7;          /* default sidebar nav link text */
    --nav-glow-rgb: 77, 166, 255;       /* brand name text-shadow glow */

    /* White / base surface */
    --white: #fff;

    /* Input / form control */
    --input-focus-border: #86b7fe;       /* Bootstrap input focus ring border */
    --card-border: #e0e4e8;              /* auth card border */

    /* Primary button hover states */
    --primary-hover: #0b5ed7;
    --primary-active: #0a58ca;

    /* Google OAuth button */
    --google-btn-text: #3c4043;
    --google-btn-border: #dadce0;
    --google-btn-hover: #f7f8f8;
    --divider-text: #8b95a2;

    /* Wound / media card tints */
    --media-hover-bg: #f0f4ff;
    --media-active-bg: #e8f0ff;

    /* Subtle state backgrounds */
    --warning-subtle-bg: #fffdf0;        /* active hospital context row */
    --success-subtle-bg: #f0f9f6;        /* success alert background */
    --danger-subtle-bg: #fff5f6;         /* listening / danger state bg start */
    --danger-light-bg: var(--danger-subtle-bg); /* alias — same pale-red tint */
    --danger-lighter-bg: #ffe5e5;        /* listening state bg end */
    --muted-light-bg: var(--table-stripe-bg); /* alias — same #f1f3f5 */
    --primary-light-bg: #e7f1ff;         /* speaking state bg start */
    --info-light-bg2: #e7fafb;           /* photo analysing state bg start */
    --info-lighter-bg: #cff4fc;          /* photo analysing state bg end */
    --success-btn: #28a745;              /* microphone active button */
    --transcript-divider: #f0f0f0;       /* transcript review entry divider */

    /* Consultation / speaker-chip palette */
    --surface-off-white: #fafafa;         /* transcript area resting background */
    --surface-blue-tint: #f8f9ff;         /* transcript area while live */
    --surface-warm-white: #fffff8;        /* private notes panel background */
    --chip-doctor-bg: #cfe2ff;            /* Bootstrap blue-100 */
    --chip-doctor-text: #084298;          /* Bootstrap blue-800 */
    --chip-patient-bg: #d1e7dd;           /* Bootstrap green-100 */
    --chip-patient-text: #0f5132;         /* Bootstrap green-800 */
    --chip-attender-text: var(--warning-dark-text); /* Bootstrap yellow-900 — same as --warning-dark-text */
    --chip-unknown-bg: #e2e3e5;           /* Bootstrap gray-200 */
    --chip-unknown-text: #41464b;         /* Bootstrap gray-700 */

    /* Hero section (HomeHeroSection) */
    --hero-badge-text-rgb: 214, 228, 255;
    --hero-desc-text-rgb: 225, 234, 249;
    --hero-btn-primary-bg: #f8fbff;
    --hero-btn-primary-text: #10264d;
    --hero-btn-secondary-bg-rgb: 184, 208, 255;
    --hero-btn-secondary-border-rgb: 196, 219, 255;
    --hero-video-dark: #111827;

    /* RGB component tokens — use with rgba(var(--*-rgb), alpha) */
    --black-rgb: 0, 0, 0;                /* shadow and overlay blacks */
    --white-rgb: 255, 255, 255;          /* white overlays on dark backgrounds */
    --brand-navy-rgb: 26, 45, 90;       /* #1a2d5a */
    --brand-blue-rgb: 37, 99, 235;      /* #2563eb — logo glow, slot picker */
    --primary-rgb: 13, 110, 253;        /* #0d6efd — button shadows, focus rings */
    --brand-gold-rgb: 255, 215, 0;      /* #ffd700 — brand logo border/glow */
    --danger-rgb: 220, 53, 69;          /* #dc3545 — pulse glow, animations */
    --info-rgb: 13, 202, 240;           /* #0dcaf0 — photo analyse glow */
    --listen-red-rgb: 255, 82, 82;      /* #ff5252 — Clara listening ring */
    --voice-active-rgb: 229, 57, 53;    /* #e53935 — mic active pulse */
    --success-active-rgb: 40, 167, 69;  /* #28a745 — voice session active breathe */
    --secondary-rgb: 108, 117, 125;     /* #6c757d — muted/secondary tones */

    /* Hospital badge component colors */
    --hospital-badge-color: #1c3f91;
    --hospital-badge-icon: #2450b2;
    --hospital-badge-border-rgb: 54, 96, 194;   /* rgba border & icon border */
    --hospital-badge-shadow-rgb: 24, 56, 133;   /* rgba box-shadow */

    /* Sidebar gradient (MainLayout) */
    --sidebar-start: #052767;
    --sidebar-end: #3a0647;

    /* Top-row / header strip */
    --top-row-bg: #f7f7f7;
    --top-row-border: #d6d5d5;

    /* Info (blue-tint) state colors — impersonation banner & pill */
    --info-light-bg: var(--chip-doctor-bg); /* Bootstrap blue-100 — same as --chip-doctor-bg */
    --info-border: #9ec5fe;
    --info-dark-text: #052c65;

    /* Warning (yellow-tint) state colors — hospital context pill, voice status */
    --warning-light-bg: #fff3cd;         /* Bootstrap warning-100  (canonical) */
    --warning-dark-text: #664d03;        /* Bootstrap yellow-900   (canonical — see --chip-attender-text) */

    /* Clara UI accent colors */
    --brand-blue: #2563eb;          /* sound waves, input focus, nav progress */
    --voice-active: #e53935;        /* mic active, retry button, listening status */

    /* ── Feature card palette — Appointment (emerald) */
    --fc-appt-300: #34d399;
    --fc-appt-500: #10b981;
    --fc-appt-600: #059669;
    --fc-appt-700: #047857;
    --fc-appt-50:  #ecfdf5;

    /* ── Feature card palette — Symptom Assessment (indigo) */
    --fc-symptom-400: #818cf8;
    --fc-symptom-500: #6366f1;
    --fc-symptom-600: #4f46e5;
    --fc-symptom-700: #4338ca;
    --fc-symptom-50:  #eef2ff;

    /* ── Feature card palette — Wound Analysis (red) */
    --fc-wound-300: #f87171;
    --fc-wound-500: #ef4444;
    --fc-wound-600: #dc2626;
    --fc-wound-700: #b91c1c;
    --fc-wound-50:  #fef2f2;

    /* ── Feature card palette — Discharge (amber) */
    --fc-discharge-300: #fbbf24;
    --fc-discharge-500: #f59e0b;
    --fc-discharge-600: #d97706;
    --fc-discharge-700: #b45309;
    --fc-discharge-50:  #fffbeb;

    /* ── Feature card palette — Reports (blue) */
    --fc-reports-300: #60a5fa;
    --fc-reports-500: #3b82f6;
    --fc-reports-700: #1d4ed8;
    --fc-reports-50:  #eff6ff;
    --fc-reports-100: #dbeafe;

    /* ── Activity page — category icon & badge palette ─────────────────── */
    /* Icon circle backgrounds */
    --act-icon-bg-appointments:  #e8f4fd;
    --act-icon-bg-diagnosis:     #f3e8fd;
    --act-icon-bg-prescriptions: #fde8f3;
    --act-icon-bg-reports:       #e8fdf3;
    --act-icon-bg-notifications: #fdf8e8;
    --act-icon-bg-users:         #e8fde8;
    --act-icon-bg-symptom:       #e8fdfd;
    /* Icon text colours that lack a global token */
    --act-color-diagnosis:       #6f42c1;   /* Bootstrap purple-600 */
    --act-color-prescriptions:   #d63384;   /* Bootstrap pink-600   */
    --act-color-notifications:   #fd7e14;   /* Bootstrap orange-500 */
    --act-color-clinical:        #856404;   /* Bootstrap yellow-700 */
    /* Bootstrap purple subtle (badge backgrounds / borders) */
    --purple-subtle-bg:          #e9d8fd;   /* Bootstrap purple-100 */
    --purple-subtle-border:      #c4a0e8;   /* Bootstrap purple-200 */
    /* Clinical report section headers */
    --medical-blue:              #005eb8;   /* NHS blue — doctor report header */
    --medical-green:             #00875a;   /* Medical green — patient report header */
    /* Warning / amber semantic tints */
    --warning-bg-subtle:         var(--proactive-bg);  /* same amber-50 as --proactive-bg */
    --warning-border-subtle:     #ffe69c;   /* amber badge border (Bootstrap warning-border-subtle) */
    --warning-text-em:           #d4a000;   /* amber emphasis text — badge labels */
    --warning-text-mid:          #b08d0a;   /* amber body text — reason / secondary */
    /* Success / green semantic tints */
    --success-bg-subtle:         #f0fdf4;   /* pale green bg — consent/success states */
    --success-border-subtle:     #bbf7d0;   /* green border */
    --success-text-dark:         #166534;   /* dark green text — green-800 */
    --success-hover-subtle:      #dcfce7;   /* green hover bg — green-100 */
    --success-icon:              #16a34a;   /* green icon colour — green-600 */
    /* Danger semantic tints */
    --danger-bg-subtle:          #fff1f2;   /* pale red bg — logout hover, error bg */
    --danger-text-dark:          #842029;   /* dark red text — error messages */
    /* Feedback / toast palette — canonical Bootstrap alert tints (bg + border + text).
       Shared by .save-toast and .centered-toast so all transient feedback matches. */
    --feedback-success-bg:       #d1e7dd;   /* Bootstrap green-100 */
    --feedback-success-border:   #a3cfbb;   /* Bootstrap success-border-subtle */
    --feedback-error-bg:         #f8d7da;   /* Bootstrap red-100 */
    --feedback-error-border:     #f1aeb5;   /* Bootstrap danger-border-subtle */
    --feedback-info-bg:          #cff4fc;   /* Bootstrap cyan-100 */
    --feedback-info-border:      #9eeaf9;   /* Bootstrap info-border-subtle */
    --feedback-warning-bg:       #fff3cd;   /* Bootstrap warning-100 */
    --feedback-warning-border:   #ffe69c;   /* Bootstrap warning-border-subtle */
    --feedback-warning-text:     #997404;   /* Bootstrap warning-text-emphasis */
    /* Category badge fills, texts, and borders */
    --act-badge-bg-appointments:           var(--chip-doctor-bg);   /* same as --info-light-bg / --chip-doctor-bg */
    --act-badge-text-appointments:         var(--chip-doctor-text); /* same as --chip-doctor-text */
    --act-badge-border-appointments:       #b6d4fe;
    --act-badge-bg-diagnosis:              #e8d5fb;
    --act-badge-text-diagnosis:            #4a1a73;
    --act-badge-border-diagnosis:          #d1a8f8;
    --act-badge-bg-prescriptions:          #f7d6e8;
    --act-badge-text-prescriptions:        #801f4f;
    --act-badge-border-prescriptions:      #f1aece;
    --act-badge-bg-notifications:          #ffe5b4;
    --act-badge-text-notifications:        #7d3e00;
    --act-badge-border-notifications:      #ffcc80;
    --act-badge-text-reports:              #0a3622;
    --act-badge-border-reports:            #a3cfbb;
    --act-badge-text-auth:                 #343a40;
    --act-badge-border-clinical:           var(--warning-border-subtle);  /* same amber border as --warning-border-subtle */
    --act-badge-text-symptom:              #055160;
    --act-badge-border-symptom:            #9eeaf9;
    /* Timeline structural colours */
    --act-day-label-bg:                    var(--media-hover-bg);  /* same as --media-hover-bg */
    --act-day-label-border:                #d0dbff;
    --act-content-hover-border:            #c5cae9;

    /* ── Capability icon backgrounds */
    --cap-reports-bg:  #fef3c7;
    --cap-voice-bg:    var(--fc-reports-100);  /* same blue-100 as --fc-reports-100 */
    --cap-ai-bg:       #ede9fe;
    --cap-ai-text:     #7c3aed;
    --cap-doctor-bg:   #d1fae5;
    --cap-wound-bg:    #fee2e2;

    /* ── Capabilities section (HomeCapabilitiesSection) — dark navy panel */
    --cap-section-eyebrow:   #a8c7ff;       /* eyebrow / kicker text */
    --cap-section-icon:      #b7d2ff;       /* feature icon color */
    --cap-card-bg-rgb:       230, 238, 255; /* card translucent bg */
    --cap-card-border-rgb:   170, 196, 255; /* card translucent border */
    --cap-card-shadow-rgb:   5, 12, 30;     /* card deep navy shadow */
    --cap-card-text-rgb:     226, 232, 240; /* card descriptive text */
    --cap-radial-accent-rgb: 82, 124, 220;  /* bottom-left radial accent */

    /* Home page hero / avatar-video section */
    --hero-radial-start-rgb: 102, 153, 255;  /* top-right radial highlight */
    --hero-radial-end-rgb: 76, 126, 228;     /* bottom-left radial highlight */
    --hero-border-rgb: 143, 181, 255;        /* hero section border glow */
    --hero-shadow-dark-rgb: 9, 20, 45;       /* hero deep navy shadow */
    --hero-video-start: #0a2463;
    --hero-video-mid: #1e3a8a;
    --hero-video-end: #3b5fad;
    --sky-blue-rgb: 96, 165, 250;   /* avatar badge bg/border */
    --sky-blue-light: #93c5fd;      /* avatar badge text */
    --hero-brand-start: var(--fc-reports-300); /* same as --fc-reports-300 #60a5fa */
    --hero-brand-end: #a5b4fc;
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Handle iOS safe areas */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    text-decoration: underline;
}

.btn-primary {
    color: var(--white);
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    font-weight: 600;
    letter-spacing: 0.025em;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.32);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    border-color: #1e40af;
    color: var(--white);
    box-shadow: 0 5px 18px rgba(37, 99, 235, 0.42);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    border-color: #1e3a8a;
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--primary-rgb), 0.5);
}

.content {
    padding-top: 1.1rem;
    min-height: calc(100vh - 200px);
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Ensure container-fluid takes full available height */
.content > .container-fluid {
    height: 100%;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success-color);
}

.invalid {
    outline: 1px solid var(--danger-color);
}

.validation-message {
    color: var(--danger-color);
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--black-rgb), 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Jumbotron replacement for Bootstrap 5 */
.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: var(--light-bg);
    border-radius: 0.3rem;
}

.jumbotron .display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.jumbotron .lead {
    font-size: 1.25rem;
    font-weight: 300;
}

/* Footer Styling */
.footer {
    background-color: var(--light-bg);
    border-top: 1px solid var(--border-color);
}

/* Top Row Header */
.top-row {
    background-color: var(--top-row-bg);
    border-bottom: 1px solid var(--border-color);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

/* Card Enhancements */
.card {
    border: 1px solid var(--border-color);
    box-shadow: 0 0.125rem 0.25rem rgba(var(--black-rgb), 0.075);
    transition: box-shadow 0.3s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(var(--black-rgb), 0.15);
}

.card-header {
    background-color: var(--light-bg);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

/* Badge Enhancements */
.badge {
    padding: 0.35em 0.65em;
    font-weight: 500;
}

/* Table Enhancements */
.table {
    margin-bottom: 0;
}

.table-hover tbody tr:hover {
    background-color: rgba(var(--black-rgb), 0.02);
}

/* Loading Progress */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(var(--black-rgb), 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--white);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--gray-300);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--primary-color);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* Responsive Design */
@media (max-width: 768px) {
    .jumbotron .display-4 {
        font-size: 2rem;
    }

    .card {
        margin-bottom: 1rem;
    }
    
    /* Improve touch targets on mobile */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing on mobile */
    .content {
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }
    
    /* Reduce header size on mobile */
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
}

/* Utility Classes */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}


code {
    color: var(--code-color);
}

/* Recording Indicator Animation */
.recording-indicator {
    position: relative;
    display: inline-block;
}

.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 3px solid var(--danger-color);
    border-radius: var(--radius-circle);
    animation: pulse-ring-expand 1.5s ease-out infinite;
    opacity: 0.8;
}

@keyframes pulse-ring-expand {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* ── Shared Admin / Page Components ──────────────────────────────────────── */
/* Used across admin and profile pages. Defined once here to avoid duplication
   in scoped *.razor.css files. */

/* Card */
.admin-card {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 1px 8px rgba(var(--black-rgb), 0.07);
    border: 1px solid var(--gray-subtle);
    overflow: hidden;
}

.admin-card-header {
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-navy) 100%);
    color: var(--white);
    padding: 0.85rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.admin-card-body {
    padding: 1rem 1.25rem;
}

/* Collapsible section banner (shared) — pairs with .admin-card-header for the strong
   navy banner; makes it clickable, right-aligns the chevron, and rotates it smoothly.
   Pages with their own scoped .section-toggle-header (lighter variants) still override. */
.section-toggle-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.section-chevron {
    transition: transform var(--transition-base);
}

/* Appointment reference chip (APT-{n}) — one readable, eye-catching style site-wide.
   Dark blue bold text on a pale-blue fill: far higher contrast than the old cyan
   `text-info`. Use everywhere an APT reference is shown so it reads the same. */
.apt-ref-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    background-color: var(--fc-reports-50);
    color: var(--fc-reports-700);
    border: 1px solid var(--fc-reports-300);
}

/* Stat summary cards */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 1px 6px rgba(var(--black-rgb), 0.06);
    border: 1px solid var(--gray-subtle);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

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

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dark-text);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--secondary-color);
    font-weight: 500;
}

/* Setting rows */
.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--transcript-divider);
}

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

.setting-label {
    font-weight: 500;
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.setting-value {
    color: var(--secondary-color);
    font-size: 0.9rem;
}

/* Access-denied panel */
.admin-access-denied {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.access-denied-card {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(var(--black-rgb), 0.08);
    width: 100%;
    max-width: 440px;
}

.access-denied-icon {
    font-size: 3.5rem;
    color: var(--danger-color);
    display: block;
    margin-bottom: 1rem;
}

/* Shared table styles for admin tables */
.admin-table th {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-medium);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-table td {
    font-size: 0.9rem;
    vertical-align: middle;
}

/* Profile avatar */
.profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-navy) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 2.6rem;
}

/* Spin animation (used in admin action buttons) */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* ── Shared keyframes ─────────────────────────────────────────────────────── */

/* Entry animation — used by transcript entries in Conversation & SymptomAssessment */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Shared form styles (consistent across all pages) ────────────────────── */

.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gray-medium);
}

.form-control:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.15);
}

/* ── Auth page layout (Login, Register, ForgotPassword, ResetPassword, Verify) */

.login-page,
.register-page,
.forgot-password-page,
.reset-password-page,
.verify-page {
    min-height: calc(100vh - var(--auth-page-offset));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* ── Auth card (shared shape across all auth pages) ───────────────────────── */

.login-card,
.register-card,
.forgot-password-card,
.reset-password-card,
.verify-card {
    width: 100%;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl) 2.25rem;
    box-shadow: var(--shadow-md);
}

/* Auth card primary button — inherits global .btn-primary styles */

.forgot-password-card .btn-primary:disabled,
.reset-password-card .btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Auth card links */
.forgot-password-card a,
.reset-password-card a {
    color: var(--primary-color);
    font-weight: 500;
}

.forgot-password-card a:hover,
.reset-password-card a:hover {
    color: var(--primary-hover);
}

/* ── Auth channel tabs (Email / WhatsApp — shared across login + forgot-password) ── */

.login-tab-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.login-tab {
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    background: var(--surface-cool);
    border: none;
    cursor: pointer;
    color: #6b7280;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.login-tab:hover:not(.active) {
    background: var(--blue-gray-50);
}

.login-tab.active {
    background: var(--primary-color);
    color: #fff;
}

.login-tab--whatsapp.active {
    background: #25D366;
    color: #fff;
}

/* Auth page responsive */
@media (max-width: 576px) {
    .login-page,
    .register-page,
    .forgot-password-page,
    .reset-password-page,
    .verify-page {
        padding: var(--spacing-md);
    }

    .login-card,
    .register-card,
    .forgot-password-card,
    .reset-password-card,
    .verify-card {
        padding: 1.5rem 1.25rem;
    }
}

/* ── Mobile card list (shared across admin pages) ─────────────────────────── */

.user-card-list {
    display: flex;
    flex-direction: column;
}

.user-card {
    padding: 0.85rem var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--white);
}

.user-card:last-child {
    border-bottom: none;
}

/* ── Responsive sidebar-width token (matches MainLayout.razor.css breakpoints) */
@media (min-width: 641px) {
    :root { --sidebar-width: 250px; }
}

@media (min-width: 641px) and (max-width: 767.98px) {
    :root { --sidebar-width: 200px; }
}

/* ── Sticky action bar — respects sidebar so it never overlaps nav ───────── */
.sticky-action-bar {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    background: var(--blue-gray-50);
    border-top: 1px solid var(--blue-gray-300);
    box-shadow: var(--shadow-md);
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 1030;
}

/* Toast anchored above the sticky save bar */
.save-toast {
    position: absolute;
    bottom: calc(100% + var(--spacing-sm));
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: toast-in var(--transition-fast);
    z-index: 1031;
    pointer-events: none;
}
.save-toast--success {
    background: var(--feedback-success-bg);
    color: var(--success-color);
    border: 1px solid var(--feedback-success-border);
}
.save-toast--error {
    background: var(--feedback-error-bg);
    color: var(--danger-color);
    border: 1px solid var(--feedback-error-border);
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}