/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

:root,
[data-theme="light"] {
    /* Surfaces */
    --color-bg-body: #f0f4f8;
    --color-bg-surface: #ffffff;
    --color-bg-surface-hover: #f7fafc;
    --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;

    /* Borders */
    --color-border: #e2e8f0;
    --color-border-light: #edf2f7;
    --color-border-strong: #cbd5e0;

    /* Primary (brand blue) — synced with sidebar */
    --color-primary: #345e91;
    --color-primary-hover: #2a4d7a;
    --color-primary-light: #ebf8ff;
    --color-primary-focus-ring: rgba(52, 94, 145, 0.2);
    --color-primary-focus-ring-sm: rgba(52, 94, 145, 0.15);
    --color-primary-subtle: rgba(52, 94, 145, 0.08);
    --color-primary-subtle-border: rgba(52, 94, 145, 0.1);

    /* 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 */
    --color-info: #3182ce;
    --color-info-bg: #ebf8ff;
    --color-info-text: #2a4365;

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

    /* Sidebar */
    --color-sidebar-bg: #345e91;
    --color-sidebar-text: #ffffff;
    --color-sidebar-accent: #90cdf4;
    --color-sidebar-hover: rgba(255, 255, 255, 0.15);
    --color-sidebar-active: rgba(255, 255, 255, 0.2);
    --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 */
    --color-badge-scheduled-bg: #bee3f8;
    --color-badge-scheduled-text: #2a4365;
    --color-badge-completed-bg: #c6f6d5;
    --color-badge-completed-text: #276749;
    --color-badge-cancelled-bg: #e2e8f0;
    --color-badge-cancelled-text: #718096;

    /* Dashboard glass */
    --color-glass-bg: rgba(255, 255, 255, 0.75);
    --color-glass-border: rgba(255, 255, 255, 0.6);
    --color-glass-bg-subtle: rgba(255, 255, 255, 0.6);
    --color-glass-border-subtle: rgba(255, 255, 255, 0.5);

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

    /* 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-dropdown: 30;
    --z-sidebar: 50;
    --z-sidebar-placeholder: 49;
    --z-modal: 100;
    --z-view-as: 200;
    --z-upload-modal: 9000;
    --z-upload-dropdown: 9010;
    --z-lightbox: 10000;
    --z-lightbox-controls: 10001;
}

[data-theme="dark"] {
    /* Surfaces — layered: body < sidebar < surface < hover < active */
    --color-bg-body: #16151f;
    --color-bg-surface: #151b30;
    --color-bg-surface-hover: #1d2440;
    --color-bg-surface-active: #262e4a;
    --color-bg-muted: #151b30;

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

    /* Borders — brighter for visibility */
    --color-border: #3e4a64;
    --color-border-light: #2e3650;
    --color-border-strong: #546380;

    /* Primary */
    --color-primary: #60a5fa;
    --color-primary-hover: #93bbfd;
    --color-primary-light: rgba(96, 165, 250, 0.15);
    --color-primary-focus-ring: rgba(96, 165, 250, 0.3);
    --color-primary-focus-ring-sm: rgba(96, 165, 250, 0.2);
    --color-primary-subtle: rgba(96, 165, 250, 0.1);
    --color-primary-subtle-border: rgba(96, 165, 250, 0.15);

    /* 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 */
    --color-info: #60a5fa;
    --color-info-bg: rgba(96, 165, 250, 0.15);
    --color-info-text: #93bbfd;

    /* Table — same surface color as cards/panels */
    --color-table-header-bg: #1d2440;
    --color-table-header-text: #94a3b8;
    --color-table-row-hover: #1d2440;
    --color-table-row-active: rgba(96, 165, 250, 0.1);
    --color-table-header-bg-translucent: rgba(29, 36, 64, 0.85);

    /* Sidebar — clearly distinct from body with a warm navy tone */
    --color-sidebar-bg: #151b30;
    --color-sidebar-text: #e2e8f0;
    --color-sidebar-accent: #60a5fa;
    --color-sidebar-hover: rgba(255, 255, 255, 0.07);
    --color-sidebar-active: rgba(96, 165, 250, 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(255, 255, 255, 0.08);
    --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 — slightly stronger for depth on dark surfaces */
    --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.2);

    /* 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 */
    --color-badge-scheduled-bg: rgba(96, 165, 250, 0.18);
    --color-badge-scheduled-text: #93bbfd;
    --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;

    /* Dashboard glass */
    --color-glass-bg: rgba(26, 31, 46, 0.8);
    --color-glass-border: rgba(46, 54, 80, 0.6);
    --color-glass-bg-subtle: rgba(26, 31, 46, 0.6);
    --color-glass-border-subtle: rgba(46, 54, 80, 0.5);

    /* Hover tint */
    --color-hover-tint: rgba(96, 165, 250, 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: #3e4a64;
    --color-cal-half-line: #2e3650;
    --color-cal-drop-target: rgba(96, 165, 250, 0.1);
}

/* Dot grid background */
[data-theme="dark"] body {
    background: var(--color-bg-body)
        radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

[data-theme="light"] body {
    background: var(--color-bg-body)
        radial-gradient(circle, rgba(43, 108, 176, 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Font options */
[data-font="inter"] body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[data-font="serif"] body {
    font-family: Georgia, "Times New Roman", Times, serif;
}

[data-font="mono"] body {
    font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
}