/* Theme variables — loaded before all other stylesheets */

:root,
[data-theme="light"],
[data-theme="plain"] {
    /* Typography — Urbanist (display) + DM Sans (body), from landing page brand */
    --font-display: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Border radius scale */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 50%;

    /* Transition timing */
    --duration-fast: 0.1s;       /* row hover, button press */
    --duration-base: 0.15s;      /* color, background, opacity */
    --duration-moderate: 0.2s;   /* box-shadow, multi-property */
    --duration-slow: 0.25s;      /* sidebar, container width */
    --ease-standard: ease-out;
    --ease-layout: ease;

    /* Surfaces */
    --color-bg-body: #f0f5f8;
    --color-bg-surface: #ffffff;
    --color-bg-surface-hover: #f5f9fc;
    --color-bg-surface-active: #edf2f7;
    --color-bg-muted: #fafbfc;

    /* Text */
    --color-text-primary: #1a202c;
    --color-text-heading: #2d3748;
    --color-text-secondary: #4a5568;
    --color-text-muted: #718096;
    --color-text-placeholder: #a0aec0;
    --color-text-subtle: #64748b;

    /* Shorthand aliases (used by booking/portal pages) */
    --color-text: var(--color-text-primary);
    --color-surface: var(--color-bg-surface);

    /* Borders — light blue tint */
    --color-border: #c4d8e8;
    --color-border-light: #d6e4f0;
    --color-border-strong: #a8c4da;

    /* Primary (brand cyan-blue) — derived from landing #00d4ff, muted for clinical use */
    --color-primary: #2b8cb5;
    --color-primary-hover: #237499;
    --color-primary-contrast: #ffffff;
    --color-primary-light: #e8f6fb;
    --color-primary-focus-ring: rgba(43, 140, 181, 0.2);
    --color-primary-focus-ring-sm: rgba(43, 140, 181, 0.15);
    --color-primary-subtle: rgba(43, 140, 181, 0.08);
    --color-primary-subtle-border: rgba(43, 140, 181, 0.1);

    /* Secondary accent (purple) — from landing #a855f7, for gradients/highlights only */
    --color-accent-purple: #6d45c8;
    --color-gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple));

    /* Secondary button */
    --color-btn-secondary-bg: #e2e8f0;
    --color-btn-secondary-text: #4a5568;
    --color-btn-secondary-hover: #cbd5e0;

    /* Danger */
    --color-danger: #e53e3e;
    --color-danger-hover: #c53030;
    --color-danger-bg: #fff5f5;
    --color-danger-text: #9b2c2c;
    --color-danger-border: #c53030;

    /* Success */
    --color-success: #38a169;
    --color-success-hover: #2f855a;
    --color-success-bg: #c6f6d5;
    --color-success-bg-light: #f0fff4;
    --color-success-text: #276749;

    /* Warning */
    --color-warning: #d69e2e;

    /* Info — aligned with primary hue */
    --color-info: #2b8cb5;
    --color-info-bg: #e8f6fb;
    --color-info-text: #1a5d7a;
    --color-primary-dark: #1a5f80;

    /* Table */
    --color-table-header-bg: #edf2f7;
    --color-table-header-text: #718096;
    --color-table-row-hover: #f5f9fc;
    --color-table-row-active: #e8f6fb;
    --color-table-header-bg-translucent: rgba(237, 242, 247, 0.6);

    /* Sidebar — darker cyan-navy */
    --color-sidebar-bg: #1e3a52;
    --color-sidebar-gradient-start: #1b6ea3;
    --color-sidebar-gradient-end: #2bafd4;
    --color-sidebar-text: #ffffff;
    --color-sidebar-accent: #7dd3e8;
    --color-sidebar-hover: rgba(255, 255, 255, 0.12);
    --color-sidebar-active: rgba(255, 255, 255, 0.18);
    --color-sidebar-muted: rgba(255, 255, 255, 0.6);
    --color-sidebar-text-muted: rgba(255, 255, 255, 0.85);
    --color-sidebar-role: rgba(255, 255, 255, 0.5);
    --color-sidebar-divider: rgba(255, 255, 255, 0.15);
    --color-sidebar-view-as-bg: rgba(255, 255, 255, 0.1);
    --color-sidebar-view-as-hover: rgba(255, 255, 255, 0.18);
    --color-sidebar-view-as-active-bg: rgba(237, 137, 54, 0.25);
    --color-sidebar-view-as-active-text: #fbd38d;

    /* Shadows */
    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.18);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.07);
    --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);

    /* Overlays */
    --color-overlay: rgba(0, 0, 0, 0.4);
    --color-overlay-heavy: rgba(0, 0, 0, 0.5);
    --color-overlay-lightbox: rgba(0, 0, 0, 0.85);

    /* Badges — scheduled/active aligned with primary cyan-blue */
    --color-badge-scheduled-bg: #daf2fa;
    --color-badge-scheduled-text: #1a5d7a;
    --color-badge-completed-bg: #c6f6d5;
    --color-badge-completed-text: #276749;
    --color-badge-cancelled-bg: #e2e8f0;
    --color-badge-cancelled-text: #718096;
    --color-badge-confirmed-bg: #c6f6d5;
    --color-badge-confirmed-text: #276749;
    --color-badge-pending-bg: #fefcbf;
    --color-badge-pending-text: #975a16;
    --color-badge-declined-bg: #fed7d7;
    --color-badge-declined-text: #9b2c2c;
    --color-badge-paid-bg: #c6f6d5;
    --color-badge-paid-text: #276749;
    --color-badge-partial-bg: #fefcbf;
    --color-badge-partial-text: #975a16;
    --color-badge-unpaid-bg: #fed7d7;
    --color-badge-unpaid-text: #9b2c2c;
    --color-badge-active-bg: #daf2fa;
    --color-badge-active-text: #1a5d7a;
    --color-badge-skipped-bg: #f3f4f6;
    --color-badge-skipped-text: #6b7280;
    --color-badge-dental-bg: #dbeafe;
    --color-badge-dental-text: #1d4ed8;
    --color-badge-hygiene-bg: #ccfbf1;
    --color-badge-hygiene-text: #0f766e;

    /* Semantic colors for schedule/calendar badges */
    --color-danger-light: #fee2e2;
    --color-neutral-bg: #f3f4f6;
    --color-warning-bg: #fef3c7;
    --color-warning-border: #fde68a;
    --color-warning-text: #b45309;
    --color-muted-bg: #f3f4f6;
    --color-holiday: #c05621;
    --color-drag-border: rgba(0, 0, 0, 0.8);
    --color-drag-handle: rgba(0, 0, 0, 0.15);

    /* Hover tint */
    --color-hover-tint: #eef8fb;

    /* Error message */
    --color-error-msg-bg: #fed7d7;
    --color-error-msg-text: #9b2c2c;
    --color-error-text: #dc2626;

    /* Calendar specific */
    --color-cal-now-line: #c53030aa;
    --color-cal-hour-line: #a0aec0;
    --color-cal-half-line: #cbd5e0;
    --color-cal-drop-target: #ebf8ff;

    /* Z-index scale */
    --z-base: 1;
    --z-sticky: 2;
    --z-sticky-header: 10;
    --z-resizing: 20;
    --z-dropdown: 30;
    --z-sidebar: 50;
    --z-sidebar-placeholder: 49;
    --z-modal: 100;
    --z-view-as: 200;
    --z-overlay: 900;
    --z-upload-modal: 9000;
    --z-upload-dropdown: 9010;
    --z-chat-panel: 9060;
    --z-lightbox: 10000;
    --z-lightbox-controls: 10001;
}

[data-theme="dark"],
[data-theme="night-sky"] {
    color-scheme: dark;
    /* Surfaces — layered: body < sidebar < surface < hover < active */
    --color-bg-body: #0d1525;
    --color-bg-surface: #152042;
    --color-bg-surface-hover: #1c2952;
    --color-bg-surface-active: #243362;
    --color-bg-muted: #152042;

    /* Text */
    --color-text-primary: #e2e8f0;
    --color-text-heading: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-placeholder: #64748b;
    --color-text-subtle: #94a3b8;

    /* Shorthand aliases */
    --color-text: var(--color-text-primary);
    --color-surface: var(--color-bg-surface);

    /* Borders — glass style with cyan tint (matches landing page) */
    --color-border: rgba(0, 212, 255, 0.2);
    --color-border-light: rgba(0, 212, 255, 0.12);
    --color-border-strong: rgba(0, 212, 255, 0.3);

    /* Primary — cyan-blue, brighter for dark backgrounds */
    --color-primary: #5bb8d9;
    --color-primary-hover: #7ecce5;
    --color-primary-contrast: #0d1a24;
    --color-primary-light: rgba(91, 184, 217, 0.15);
    --color-primary-focus-ring: rgba(91, 184, 217, 0.3);
    --color-primary-focus-ring-sm: rgba(91, 184, 217, 0.2);
    --color-primary-subtle: rgba(91, 184, 217, 0.1);
    --color-primary-subtle-border: rgba(91, 184, 217, 0.15);

    /* Secondary accent (purple) */
    --color-accent-purple: #8b5cf6;
    --color-gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple));

    /* Secondary button */
    --color-btn-secondary-bg: #2e3546;
    --color-btn-secondary-text: #e2e8f0;
    --color-btn-secondary-hover: #3e4a64;

    /* Danger */
    --color-danger: #f87171;
    --color-danger-hover: #fca5a5;
    --color-danger-bg: rgba(248, 113, 113, 0.1);
    --color-danger-text: #fca5a5;
    --color-danger-border: #f87171;

    /* Success */
    --color-success: #34d399;
    --color-success-hover: #6ee7b7;
    --color-success-bg: rgba(52, 211, 153, 0.15);
    --color-success-bg-light: rgba(52, 211, 153, 0.1);
    --color-success-text: #6ee7b7;

    /* Warning */
    --color-warning: #fbbf24;

    /* Info — aligned with primary */
    --color-info: #5bb8d9;
    --color-info-bg: rgba(91, 184, 217, 0.15);
    --color-info-text: #7ecce5;
    --color-primary-dark: #3a8fa8;

    /* Table */
    --color-table-header-bg: #1c2952;
    --color-table-header-text: #94a3b8;
    --color-table-row-hover: #1c2952;
    --color-table-row-active: rgba(91, 184, 217, 0.1);
    --color-table-header-bg-translucent: rgba(30, 39, 66, 0.85);

    /* Sidebar — slightly darker than surface for visual separation */
    --color-sidebar-bg: #121828;
    --color-sidebar-gradient-start: #121828;
    --color-sidebar-gradient-end: #1c2952;
    --color-sidebar-text: #e2e8f0;
    --color-sidebar-accent: #5bb8d9;
    --color-sidebar-hover: rgba(255, 255, 255, 0.07);
    --color-sidebar-active: rgba(91, 184, 217, 0.18);
    --color-sidebar-muted: rgba(255, 255, 255, 0.45);
    --color-sidebar-text-muted: rgba(255, 255, 255, 0.7);
    --color-sidebar-role: rgba(255, 255, 255, 0.35);
    --color-sidebar-divider: rgba(0, 212, 255, 0.1);
    --color-sidebar-view-as-bg: rgba(255, 255, 255, 0.05);
    --color-sidebar-view-as-hover: rgba(255, 255, 255, 0.1);
    --color-sidebar-view-as-active-bg: rgba(251, 191, 36, 0.2);
    --color-sidebar-view-as-active-text: #fbbf24;

    /* Shadows — depth + subtle cyan ambient glow */
    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 212, 255, 0.03);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 10px rgba(0, 212, 255, 0.04);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 14px rgba(0, 212, 255, 0.04);
    --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.05);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 212, 255, 0.06);
    --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 8px rgba(0, 212, 255, 0.04);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 212, 255, 0.03);

    /* Overlays */
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-overlay-heavy: rgba(0, 0, 0, 0.7);
    --color-overlay-lightbox: rgba(0, 0, 0, 0.92);

    /* Badges — scheduled/active aligned with primary cyan-blue */
    --color-badge-scheduled-bg: rgba(91, 184, 217, 0.18);
    --color-badge-scheduled-text: #7ecce5;
    --color-badge-completed-bg: rgba(52, 211, 153, 0.18);
    --color-badge-completed-text: #6ee7b7;
    --color-badge-cancelled-bg: rgba(148, 163, 184, 0.18);
    --color-badge-cancelled-text: #94a3b8;
    --color-badge-confirmed-bg: rgba(52, 211, 153, 0.18);
    --color-badge-confirmed-text: #6ee7b7;
    --color-badge-pending-bg: rgba(251, 191, 36, 0.18);
    --color-badge-pending-text: #fbbf24;
    --color-badge-declined-bg: rgba(248, 113, 113, 0.18);
    --color-badge-declined-text: #f87171;
    --color-badge-paid-bg: rgba(52, 211, 153, 0.18);
    --color-badge-paid-text: #6ee7b7;
    --color-badge-partial-bg: rgba(251, 191, 36, 0.18);
    --color-badge-partial-text: #fbbf24;
    --color-badge-unpaid-bg: rgba(248, 113, 113, 0.18);
    --color-badge-unpaid-text: #f87171;
    --color-badge-active-bg: rgba(91, 184, 217, 0.18);
    --color-badge-active-text: #7ecce5;
    --color-badge-skipped-bg: rgba(148, 163, 184, 0.18);
    --color-badge-skipped-text: #94a3b8;
    --color-badge-dental-bg: rgba(96, 165, 250, 0.18);
    --color-badge-dental-text: #93c5fd;
    --color-badge-hygiene-bg: rgba(45, 212, 191, 0.18);
    --color-badge-hygiene-text: #5eead4;

    /* Semantic colors for schedule/calendar badges */
    --color-danger-light: rgba(248, 113, 113, 0.12);
    --color-neutral-bg: rgba(148, 163, 184, 0.12);
    --color-warning-bg: rgba(251, 191, 36, 0.18);
    --color-warning-border: rgba(251, 191, 36, 0.35);
    --color-warning-text: #fbbf24;
    --color-muted-bg: rgba(148, 163, 184, 0.12);
    --color-holiday: #f6ad55;
    --color-drag-border: rgba(255, 255, 255, 0.7);
    --color-drag-handle: rgba(255, 255, 255, 0.15);

    /* Hover tint */
    --color-hover-tint: rgba(91, 184, 217, 0.08);

    /* Error message */
    --color-error-msg-bg: rgba(248, 113, 113, 0.15);
    --color-error-msg-text: #fca5a5;
    --color-error-text: #f87171;

    /* Calendar specific */
    --color-cal-now-line: rgba(248, 113, 113, 0.7);
    --color-cal-hour-line: rgba(130, 180, 220, 0.18);
    --color-cal-half-line: rgba(130, 180, 220, 0.08);
    --color-cal-drop-target: rgba(91, 184, 217, 0.1);
}

/* Scrollbars — thin, matching surface palette */
[data-theme="light"],
[data-theme="plain"] {
    scrollbar-color: #cbd5e0 #f0f5f8;
}
[data-theme="light"] *::-webkit-scrollbar,
[data-theme="plain"] *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="light"] *::-webkit-scrollbar-track,
[data-theme="plain"] *::-webkit-scrollbar-track {
    background: #f0f5f8;
}
[data-theme="light"] *::-webkit-scrollbar-thumb,
[data-theme="plain"] *::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}
[data-theme="light"] *::-webkit-scrollbar-thumb:hover,
[data-theme="plain"] *::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

[data-theme="dark"],
[data-theme="night-sky"] {
    scrollbar-color: #546380 #152042;
}
[data-theme="dark"] *::-webkit-scrollbar,
[data-theme="night-sky"] *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="dark"] *::-webkit-scrollbar-track,
[data-theme="night-sky"] *::-webkit-scrollbar-track {
    background: #152042;
}
[data-theme="dark"] *::-webkit-scrollbar-thumb,
[data-theme="night-sky"] *::-webkit-scrollbar-thumb {
    background: #546380;
    border-radius: 4px;
}
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover,
[data-theme="night-sky"] *::-webkit-scrollbar-thumb:hover {
    background: #6b7fa0;
}

/* Dot grid background — light mode */
[data-theme="light"] body,
[data-theme="plain"] body {
    background: var(--color-bg-body)
        radial-gradient(circle, rgba(43, 140, 181, 0.12) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Starry night sky background — dark mode */
@keyframes sky-mesh-shift {
    0%, 100% { background-position: 0% 50%, 100% 50%, 50% 100%; }
    33%      { background-position: 100% 0%, 0% 100%, 50% 0%; }
    66%      { background-position: 50% 100%, 50% 0%, 0% 50%; }
}

[data-theme="dark"] body,
[data-theme="night-sky"] body {
    background: var(--color-bg-body);
}

[data-theme="dark"] body::before,
[data-theme="night-sky"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 15% 20%, rgba(80, 40, 160, 0.08), transparent 50%),
        radial-gradient(ellipse 50% 40% at 75% 65%, rgba(0, 160, 255, 0.06), transparent 50%),
        radial-gradient(ellipse 60% 35% at 50% 85%, rgba(120, 50, 180, 0.05), transparent 50%),
        radial-gradient(ellipse 40% 30% at 85% 15%, rgba(0, 212, 255, 0.04), transparent 50%);
    background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%;
    animation: sky-mesh-shift 25s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    will-change: background-position;
}

/* Dark vignette — edges fade to black */
[data-theme="dark"] .container::before,
[data-theme="dark"] .login-wrapper::before,
[data-theme="night-sky"] .container::before,
[data-theme="night-sky"] .login-wrapper::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 65% 60% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: -1;
}

[data-theme="dark"] body::after,
[data-theme="night-sky"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 60% 30%, rgba(0, 140, 220, 0.04), transparent 50%),
        radial-gradient(ellipse 40% 50% at 30% 70%, rgba(100, 40, 160, 0.035), transparent 50%);
    background-size: 200% 200%, 200% 200%;
    animation: sky-mesh-shift 35s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 0;
    will-change: background-position;
}

#star-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Demo environment banner (MIC-324) — in theme.css so all pages get it */
.demo-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-sidebar) + 10);
    background: var(--color-info-bg);
    border-bottom: 1px solid var(--color-info);
    color: var(--color-info-text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .demo-banner {
        font-size: 0.75rem;
        padding: 0.35rem 0.75rem;
    }
}

[data-theme="dark"] .demo-banner,
[data-theme="night-sky"] .demo-banner {
    background: rgba(22, 30, 60, 0.35);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    color: #dce8f5;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: 0 1px 8px rgba(0, 212, 255, 0.12);
}

[data-theme="light"] .demo-banner,
[data-theme="plain"] .demo-banner {
    background: rgba(240, 245, 248, 0.65);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom-color: rgba(43, 140, 181, 0.2);
    box-shadow: 0 1px 8px rgba(43, 140, 181, 0.08);
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
    [data-theme="dark"] .demo-banner,
    [data-theme="night-sky"] .demo-banner {
        background: #264060;
    }
    [data-theme="light"] .demo-banner,
    [data-theme="plain"] .demo-banner {
        background: var(--color-info-bg);
    }
}

/* Reduced motion — respects user OS/browser preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}