/* Global Color System - Pastel Theme */
:root {
    /* Primary Pastel Palette */
    --pastel-lavender: #E8E3F5;
    --pastel-lavender-light: #F3F0FA;
    --pastel-lavender-dark: #D4CCE8;
    --pastel-lavender-darker: #C7B8EA;
    --pastel-pink: #FFE8EC;
    --pastel-pink-light: #FFF2F5;
    --pastel-pink-dark: #FFD4DB;
    --pastel-pink-darker: #FFC4D0;
    --pastel-peach: #FFE8E1;
    --pastel-peach-light: #FFF2ED;
    --pastel-peach-dark: #FFD4C4;
    --pastel-peach-darker: #FFC0AA;
    --pastel-mint: #E3F5F1;
    --pastel-mint-light: #F0FAF8;
    --pastel-mint-dark: #D0EDE6;
    --pastel-mint-darker: #B8E5D9;
    --pastel-sky: #E3F0FF;
    --pastel-sky-light: #F0F7FF;
    --pastel-sky-dark: #D0E4FF;
    --pastel-sky-darker: #B8D4FF;
    --pastel-lemon: #FFF5E1;
    --pastel-lemon-light: #FFFAED;
    --pastel-lemon-dark: #FFEDCC;
    --pastel-lemon-darker: #FFE5B4;
    --pastel-lilac: #F5E8FF;
    --pastel-lilac-light: #FAF2FF;
    --pastel-lilac-dark: #EDD4FF;
    --pastel-lilac-darker: #E5C4FF;
    /* Additional Pastel Colors */
    --pastel-coral: #FFE0DB;
    --pastel-coral-light: #FFEEE9;
    --pastel-coral-dark: #FFD0C7;
    --pastel-sage: #D8E5D6;
    --pastel-sage-light: #E8F0E7;
    --pastel-sage-dark: #C8D5C6;
    --pastel-mauve: #E0D5E8;
    --pastel-mauve-light: #F0E8F5;
    --pastel-mauve-dark: #D0C5D8;
    /* Gradient Combinations */
    --gradient-primary: linear-gradient(135deg, #9B8FFF 0%, #FF8FA3 100%);
    --gradient-secondary: linear-gradient(135deg, #8AB4F8 0%, #81C784 100%);
    --gradient-tertiary: linear-gradient(135deg, #FDB462 0%, #FF8FA3 100%);
    --gradient-pastel: linear-gradient(135deg, var(--pastel-lavender) 0%, var(--pastel-pink) 50%, var(--pastel-mint) 100%);
    --gradient-soft: linear-gradient(135deg, var(--pastel-sky) 0%, var(--pastel-lilac) 100%);
    --gradient-warm: linear-gradient(135deg, var(--pastel-peach) 0%, var(--pastel-lemon) 100%);
    --gradient-cool: linear-gradient(135deg, var(--pastel-mint) 0%, var(--pastel-sky) 100%);
    --gradient-vibrant: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --gradient-danger: linear-gradient(135deg, #FF6B7A 0%, #F44336 100%);
    --gradient-success: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
    --gradient-warning: linear-gradient(135deg, #FFCA28 0%, #FF9800 100%);
    --gradient-info: linear-gradient(135deg, #29B6F6 0%, #03A9F4 100%);
    /* Primary Colors */
    --primary-50: #FAF9FF;
    --primary-100: #F5F3FF;
    --primary-200: #EBE7FF;
    --primary-300: #D4CCFF;
    --primary-400: #B8A8FF;
    --primary-500: #9B8FFF;
    --primary-600: #8578F0;
    --primary-700: #7568E0;
    --primary-800: #6558D0;
    --primary-900: #5548C0;
    /* Secondary Colors */
    --secondary-50: #FFF5F7;
    --secondary-100: #FFEBEF;
    --secondary-200: #FFD6DF;
    --secondary-300: #FFB3C3;
    --secondary-400: #FF8FA3;
    --secondary-500: #FF6B87;
    --secondary-600: #FF476B;
    --secondary-700: #E63956;
    --secondary-800: #CC2B41;
    --secondary-900: #B31D2C;
    /* Accent Colors */
    --accent-mint: #7DD3C0;
    --accent-mint-light: #A5E3D4;
    --accent-mint-dark: #5DBBA8;
    --accent-yellow: #FDB462;
    --accent-yellow-light: #FDC689;
    --accent-yellow-dark: #FCA23B;
    --accent-blue: #8AB4F8;
    --accent-blue-light: #A8C9FA;
    --accent-blue-dark: #6C9FF6;
    --accent-purple: #C084FC;
    --accent-purple-light: #D0A2FD;
    --accent-purple-dark: #B066FB;
    --accent-rose: #FDA4AF;
    --accent-rose-light: #FECDD3;
    --accent-rose-dark: #FB7185;
    --accent-teal: #5EEAD4;
    --accent-teal-light: #99F6E4;
    --accent-teal-dark: #2DD4BF;
    /* Status Colors */
    --success-50: #F0FDF4;
    --success-100: #E8F5E9;
    --success-200: #C8E6C9;
    --success-300: #A5D6A7;
    --success-400: #81C784;
    --success-500: #66BB6A;
    --success-600: #4CAF50;
    --success-700: #43A047;
    --success-800: #388E3C;
    --success-900: #2E7D32;
    --danger-50: #FEF2F2;
    --danger-100: #FFEBEE;
    --danger-200: #FFCDD2;
    --danger-300: #FFAAB0;
    --danger-400: #FF8A95;
    --danger-500: #FF6B7A;
    --danger-600: #F44336;
    --danger-700: #E53935;
    --danger-800: #D32F2F;
    --danger-900: #C62828;
    --warning-50: #FFFBEB;
    --warning-100: #FFF8E1;
    --warning-200: #FFECB3;
    --warning-300: #FFE082;
    --warning-400: #FFD54F;
    --warning-500: #FFCA28;
    --warning-600: #FFB74D;
    --warning-700: #FFA726;
    --warning-800: #FF9800;
    --warning-900: #F57C00;
    --info-50: #EFF6FF;
    --info-100: #E1F5FE;
    --info-200: #B3E5FC;
    --info-300: #81D4FA;
    --info-400: #4FC3F7;
    --info-500: #29B6F6;
    --info-600: #03A9F4;
    --info-700: #039BE5;
    --info-800: #0288D1;
    --info-900: #0277BD;
    /* Neutral Colors */
    --gray-50: #FAFBFC;
    --gray-100: #F5F7FA;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-500: #ADB5BD;
    --gray-600: #6C757D;
    --gray-700: #495057;
    --gray-800: #343A40;
    --gray-900: #212529;
    /* Background Colors */
    --bg-primary: #FAFBFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F5F7FA;
    --bg-quaternary: #E9ECEF;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-overlay-light: rgba(255, 255, 255, 0.9);
    /* Text Colors */
    --text-primary: #2D3748;
    --text-secondary: #718096;
    --text-tertiary: #A0AEC0;
    --text-quaternary: #CBD5E0;
    --text-inverse: #FFFFFF;
    --text-on-primary: #FFFFFF;
    --text-on-secondary: #FFFFFF;
    --text-on-accent: #FFFFFF;
    --text-on-dark: #F7FAFC;
    /* Border Colors */
    --border-primary: #E8E8EF;
    --border-secondary: #F0F0F7;
    --border-tertiary: #D4D4E0;
    --border-focus: var(--primary-500);
    --border-error: var(--danger-500);
    --border-success: var(--success-500);
    --border-warning: var(--warning-500);
    /* Shadow Colors */
    --shadow-color: 155, 143, 255;
    --shadow-xs: 0 1px 3px rgba(var(--shadow-color), 0.08);
    --shadow-sm: 0 2px 8px rgba(var(--shadow-color), 0.08);
    --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.1);
    --shadow-lg: 0 8px 24px rgba(var(--shadow-color), 0.12);
    --shadow-xl: 0 12px 32px rgba(var(--shadow-color), 0.14);
    --shadow-2xl: 0 16px 48px rgba(var(--shadow-color), 0.16);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    /* Glow Effects */
    --glow-primary: 0 0 20px rgba(155, 143, 255, 0.4);
    --glow-secondary: 0 0 20px rgba(255, 143, 163, 0.4);
    --glow-success: 0 0 20px rgba(102, 187, 106, 0.4);
    --glow-danger: 0 0 20px rgba(244, 67, 54, 0.4);
    --glow-warning: 0 0 20px rgba(255, 152, 0, 0.4);
    --glow-info: 0 0 20px rgba(3, 169, 244, 0.4);
    /* Animations */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
    /* Spacing */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    /* Z-Index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
}

/* Dark Mode Color Overrides */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #0F0F14;
    --bg-secondary: #1A1A23;
    --bg-tertiary: #23242E;
    --bg-quaternary: #2A2B36;
    /* Text */
    --text-primary: #F7FAFC;
    --text-secondary: #CBD5E0;
    --text-tertiary: #718096;
    --text-quaternary: #4A5568;
    --text-on-primary: #F7FAFC;
    --text-on-secondary: #F7FAFC;
    --text-on-accent: #F7FAFC;
    /* Borders */
    --border-primary: #2D3748;
    --border-secondary: #374151;
    --border-tertiary: #4A5568;
    /* Adjusted Pastels for Dark Mode */
    --pastel-lavender: rgba(232, 227, 245, 0.1);
    --pastel-lavender-light: rgba(243, 240, 250, 0.05);
    --pastel-lavender-dark: rgba(212, 204, 232, 0.15);
    --pastel-lavender-darker: rgba(199, 184, 234, 0.2);
    --pastel-pink: rgba(255, 232, 236, 0.1);
    --pastel-pink-light: rgba(255, 242, 245, 0.05);
    --pastel-pink-dark: rgba(255, 212, 219, 0.15);
    --pastel-pink-darker: rgba(255, 196, 208, 0.2);
    --pastel-mint: rgba(227, 245, 241, 0.1);
    --pastel-mint-light: rgba(240, 250, 248, 0.05);
    --pastel-mint-dark: rgba(208, 237, 230, 0.15);
    --pastel-mint-darker: rgba(184, 229, 217, 0.2);
    --pastel-sky: rgba(227, 240, 255, 0.1);
    --pastel-sky-light: rgba(240, 247, 255, 0.05);
    --pastel-sky-dark: rgba(208, 228, 255, 0.15);
    --pastel-sky-darker: rgba(184, 212, 255, 0.2);
    --pastel-lemon: rgba(255, 245, 225, 0.1);
    --pastel-lemon-light: rgba(255, 250, 237, 0.05);
    --pastel-lemon-dark: rgba(255, 237, 204, 0.15);
    --pastel-lemon-darker: rgba(255, 229, 180, 0.2);
    --pastel-lilac: rgba(245, 232, 255, 0.1);
    --pastel-lilac-light: rgba(250, 242, 255, 0.05);
    --pastel-lilac-dark: rgba(237, 212, 255, 0.15);
    --pastel-lilac-darker: rgba(229, 196, 255, 0.2);
    --pastel-coral: rgba(255, 224, 219, 0.1);
    --pastel-coral-light: rgba(255, 238, 233, 0.05);
    --pastel-coral-dark: rgba(255, 208, 199, 0.15);
    --pastel-sage: rgba(216, 229, 214, 0.1);
    --pastel-sage-light: rgba(232, 240, 231, 0.05);
    --pastel-sage-dark: rgba(200, 213, 198, 0.15);
    --pastel-mauve: rgba(224, 213, 232, 0.1);
    --pastel-mauve-light: rgba(240, 232, 245, 0.05);
    --pastel-mauve-dark: rgba(208, 197, 216, 0.15);
    /* Shadow adjustments */
    --shadow-color: 0, 0, 0;
}

/* Glassmorphism Variables */
:root {
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-blur: blur(10px);
}

[data-theme="dark"] {
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Additional Component-Specific Colors */
:root {
    /* Button States */
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-hover: linear-gradient(135deg, #8A7EEE 0%, #EE7E92 100%);
    --btn-primary-active: linear-gradient(135deg, #7A6EDE 0%, #DE6E82 100%);
    --btn-secondary-bg: var(--bg-secondary);
    --btn-secondary-border: var(--border-secondary);
    --btn-secondary-hover-bg: var(--pastel-lavender-light);
    --btn-secondary-hover-border: var(--pastel-lavender);
    --btn-danger-bg: var(--danger-50);
    --btn-danger-text: var(--danger-600);
    --btn-danger-border: var(--danger-200);
    --btn-danger-hover-bg: var(--danger-100);
    --btn-danger-hover-border: var(--danger-300);
    --btn-danger-hover-text: var(--danger-700);
    /* Form Elements */
    --input-bg: var(--bg-secondary);
    --input-border: var(--border-secondary);
    --input-focus-border: var(--accent-mint);
    --input-focus-shadow: 0 0 0 4px var(--pastel-mint-light);
    --input-placeholder: var(--text-tertiary);
    --select-arrow: var(--text-tertiary);
    /* Table Colors */
    --table-header-bg: var(--bg-tertiary);
    --table-header-text: var(--text-tertiary);
    --table-border: var(--border-secondary);
    --table-row-hover: var(--pastel-mint-light);
    --table-row-selected: var(--pastel-lavender-light);
    /* Badge Colors */
    --badge-default-bg: var(--gray-100);
    --badge-default-text: var(--gray-700);
    --badge-primary-bg: var(--primary-100);
    --badge-primary-text: var(--primary-700);
    --badge-success-bg: var(--success-100);
    --badge-success-text: var(--success-700);
    --badge-warning-bg: var(--warning-100);
    --badge-warning-text: var(--warning-700);
    --badge-danger-bg: var(--danger-100);
    --badge-danger-text: var(--danger-700);
    --badge-info-bg: var(--info-100);
    --badge-info-text: var(--info-700);
    /* Alert Colors */
    --alert-success-bg: var(--success-50);
    --alert-success-border: var(--success-200);
    --alert-success-text: var(--success-800);
    --alert-warning-bg: var(--warning-50);
    --alert-warning-border: var(--warning-200);
    --alert-warning-text: var(--warning-800);
    --alert-danger-bg: var(--danger-50);
    --alert-danger-border: var(--danger-200);
    --alert-danger-text: var(--danger-800);
    --alert-info-bg: var(--info-50);
    --alert-info-border: var(--info-200);
    --alert-info-text: var(--info-800);
}

/* Dark Mode Component Colors */
[data-theme="dark"] {
    /* Button States */
    --btn-secondary-bg: var(--bg-tertiary);
    --btn-secondary-border: var(--border-primary);
    --btn-secondary-hover-bg: var(--bg-quaternary);
    --btn-secondary-hover-border: var(--border-secondary);
    --btn-danger-bg: rgba(244, 67, 54, 0.1);
    --btn-danger-text: var(--danger-400);
    --btn-danger-border: rgba(244, 67, 54, 0.2);
    --btn-danger-hover-bg: rgba(244, 67, 54, 0.2);
    --btn-danger-hover-border: rgba(244, 67, 54, 0.3);
    --btn-danger-hover-text: var(--danger-300);
    /* Form Elements */
    --input-bg: var(--bg-tertiary);
    --input-border: var(--border-primary);
    --input-focus-shadow: 0 0 0 4px rgba(125, 211, 192, 0.2);
    /* Table Colors */
    --table-header-bg: var(--bg-quaternary);
    --table-row-hover: rgba(227, 245, 241, 0.1);
    --table-row-selected: rgba(232, 227, 245, 0.1);
    /* Badge Colors - Dark Mode */
    --badge-default-bg: rgba(229, 231, 235, 0.1);
    --badge-default-text: var(--gray-400);
    --badge-primary-bg: rgba(155, 143, 255, 0.1);
    --badge-primary-text: var(--primary-400);
    --badge-success-bg: rgba(102, 187, 106, 0.1);
    --badge-success-text: var(--success-400);
    --badge-warning-bg: rgba(255, 152, 0, 0.1);
    --badge-warning-text: var(--warning-400);
    --badge-danger-bg: rgba(244, 67, 54, 0.1);
    --badge-danger-text: var(--danger-400);
    --badge-info-bg: rgba(3, 169, 244, 0.1);
    --badge-info-text: var(--info-400);
    /* Alert Colors - Dark Mode */
    --alert-success-bg: rgba(102, 187, 106, 0.1);
    --alert-success-border: rgba(102, 187, 106, 0.3);
    --alert-success-text: var(--success-300);
    --alert-warning-bg: rgba(255, 152, 0, 0.1);
    --alert-warning-border: rgba(255, 152, 0, 0.3);
    --alert-warning-text: var(--warning-300);
    --alert-danger-bg: rgba(244, 67, 54, 0.1);
    --alert-danger-border: rgba(244, 67, 54, 0.3);
    --alert-danger-text: var(--danger-300);
    --alert-info-bg: rgba(3, 169, 244, 0.1);
    --alert-info-border: rgba(3, 169, 244, 0.3);
    --alert-info-text: var(--info-300);
}

/* Dark Mode Color Overrides */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #0F0F14;
    --bg-secondary: #1A1A23;
    --bg-tertiary: #23242E;
    --bg-quaternary: #2A2B36;
    /* Text */
    --text-primary: #F7FAFC;
    --text-secondary: #CBD5E0;
    --text-tertiary: #718096;
    --text-quaternary: #4A5568;
    /* Borders */
    --border-primary: #2D3748;
    --border-secondary: #374151;
    --border-tertiary: #4A5568;
    /* Adjusted Pastels for Dark Mode */
    --pastel-lavender: rgba(232, 227, 245, 0.1);
    --pastel-lavender-light: rgba(243, 240, 250, 0.05);
    --pastel-lavender-dark: rgba(212, 204, 232, 0.15);
    --pastel-lavender-darker: rgba(199, 184, 234, 0.2);
    --pastel-pink: rgba(255, 232, 236, 0.1);
    --pastel-pink-light: rgba(255, 242, 245, 0.05);
    --pastel-pink-dark: rgba(255, 212, 219, 0.15);
    --pastel-pink-darker: rgba(255, 196, 208, 0.2);
    --pastel-mint: rgba(227, 245, 241, 0.1);
    --pastel-mint-light: rgba(240, 250, 248, 0.05);
    --pastel-mint-dark: rgba(208, 237, 230, 0.15);
    --pastel-mint-darker: rgba(184, 229, 217, 0.2);
    --pastel-sky: rgba(227, 240, 255, 0.1);
    --pastel-sky-light: rgba(240, 247, 255, 0.05);
    --pastel-sky-dark: rgba(208, 228, 255, 0.15);
    --pastel-sky-darker: rgba(184, 212, 255, 0.2);
    /* Shadow adjustments */
    --shadow-color: 0, 0, 0;
}

/* Glassmorphism Variables */
:root {
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-blur: blur(10px);
}

[data-theme="dark"] {
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}



/* Page Container */
.page {
    position: relative;
    display: flex;
    min-height: 100vh;
    background: var(--bg-primary);
    transition: var(--transition-slow);
    overflow: hidden;
}

    /* Background Pattern */
    .page::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 80%, var(--pastel-lavender-light) 0%, transparent 50%), radial-gradient(circle at 80% 20%, var(--pastel-pink-light) 0%, transparent 50%), radial-gradient(circle at 40% 40%, var(--pastel-sky-light) 0%, transparent 50%);
        opacity: 0.4;
        pointer-events: none;
        z-index: 0;
    }

[data-theme="dark"] .page::before {
    opacity: 0.1;
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: 280px;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

    .main-content.sidebar-collapsed {
        margin-left: 80px;
    }

/* Content Article */
.content {
    padding: var(--spacing-8);
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    animation: contentFadeIn 0.5s ease-out;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Blazor Error UI */
#blazor-error-ui {
    display: none;
}

.blazor-error {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 2px solid var(--danger-400);
    box-shadow: 0 -8px 32px rgba(244, 67, 54, 0.15);
    z-index: var(--z-notification);
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.blazor-error-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.error-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--danger-100);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--danger-600);
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }
}

.error-details {
    flex: 1;
}

    .error-details h4 {
        margin: 0 0 var(--spacing-2) 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--danger-700);
    }

    .error-details p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.9375rem;
    }

.error-actions {
    flex-shrink: 0;
}

    .error-actions .btn {
        background: var(--gradient-primary);
        color: white;
        border: none;
        padding: var(--spacing-3) var(--spacing-5);
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: 0.9375rem;
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-2);
        text-decoration: none;
        transition: var(--transition-base);
        box-shadow: var(--shadow-md);
    }

        .error-actions .btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .error-actions .btn i {
            font-size: 1rem;
        }

.error-dismiss {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    width: 36px;
    height: 36px;
    border: none;
    background: var(--danger-100);
    color: var(--danger-600);
    border-radius: var(--radius-md);
    font-size: 1.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

    .error-dismiss:hover {
        background: var(--danger-200);
        transform: scale(1.1);
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .main-content {
        margin-left: 0;
    }

    .content {
        padding: var(--spacing-6);
    }
}

@media (max-width: 768px) {
    .content {
        padding: var(--spacing-4);
    }

        .content h1 {
            font-size: 2rem;
        }

        .content h2 {
            font-size: 1.5rem;
        }

        .content h3 {
            font-size: 1.25rem;
        }

    .blazor-error-content {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-4);
        gap: var(--spacing-4);
    }

    .error-actions {
        width: 100%;
    }

        .error-actions .btn {
            width: 100%;
            justify-content: center;
        }
}

/* Scrollbar Styling */
.main-content::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}

.main-content::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin: 10px;
}

.main-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--pastel-lavender-dark) 0%, var(--pastel-pink-dark) 100%);
    border-radius: var(--radius-md);
    border: 3px solid var(--bg-tertiary);
    transition: var(--transition-fast);
}

    .main-content::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--primary-400) 0%, var(--secondary-400) 100%);
        border-width: 2px;
    }

/* Print Styles */
@media print {
    .page::before {
        display: none;
    }

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

    .blazor-error {
        display: none !important;
    }
}

/* Loading States */
.content-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

    .content-loading::after {
        content: '';
        width: 48px;
        height: 48px;
        border: 4px solid var(--pastel-lavender);
        border-top-color: var(--primary-500);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Utility Classes for Content */
.content .section-divider {
    height: 1px;
    background: var(--gradient-soft);
    margin: var(--spacing-10) 0;
    opacity: 0.3;
}

.content .highlight-box {
    background: var(--pastel-lavender-light);
    border-left: 4px solid var(--primary-500);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    margin: var(--spacing-4) 0;
}

[data-theme="dark"] .content .highlight-box {
    background: var(--bg-tertiary);
    border-left-color: var(--primary-400);
}

/* Animations for Page Transitions */
.page-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease-out;
}

.page-transition-exit {
    opacity: 1;
}

.page-transition-exit-active {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}