/* ============================================
   ORBIT DESIGN SYSTEM - v2.0
   ============================================

   A comprehensive, professional design system inspired by:
   Linear, Asana, ClickUp, Monday.com, and modern SaaS best practices.

   Features:
   - CSS Custom Properties for easy theming
   - 5-level elevation system for dark mode
   - Enhanced glassmorphism with subtle blue tints
   - Rich animation timing functions
   - WCAG AA compliant contrast ratios
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
    /* ===== COLOR PALETTE - LIGHT MODE ===== */

    /* Page & Surface Colors (subtle blue tint for professional feel) */
    --color-page-bg: #F8FAFC;           /* Very subtle blue-gray */
    --color-page-bg-alt: #F1F5F9;       /* Slightly darker for contrast */
    --color-surface-primary: #FFFFFF;    /* Cards, panels */
    --color-surface-secondary: #F8FAFC;  /* Nested surfaces */
    --color-surface-tertiary: #F1F5F9;   /* Deeper nesting */
    --color-surface-hover: #EFF6FF;      /* Hover state - subtle blue */
    --color-surface-active: #DBEAFE;     /* Active/selected - blue tint */

    /* Text Colors */
    --color-text-primary: #0F172A;       /* slate-900 - main text */
    --color-text-secondary: #475569;     /* slate-600 - secondary */
    --color-text-tertiary: #64748B;      /* slate-500 - tertiary */
    --color-text-muted: #94A3B8;         /* slate-400 - muted/placeholder */
    --color-text-heading: #1E293B;       /* slate-800 - headings */
    --color-text-inverse: #FFFFFF;       /* On dark backgrounds */

    /* Border Colors */
    --color-border-primary: #E2E8F0;     /* slate-200 */
    --color-border-secondary: #CBD5E1;   /* slate-300 */
    --color-border-subtle: #F1F5F9;      /* Very subtle */
    --color-border-focus: #3B82F6;       /* blue-500 */

    /* Accent Colors */
    --color-accent-primary: #3B82F6;     /* blue-500 */
    --color-accent-primary-hover: #2563EB; /* blue-600 */
    --color-accent-secondary: #6366F1;   /* indigo-500 */
    --color-accent-secondary-hover: #4F46E5; /* indigo-600 */

    /* Semantic Colors */
    --color-success: #16A34A;            /* green-600 */
    --color-success-bg: #DCFCE7;         /* green-100 */
    --color-warning: #D97706;            /* amber-600 */
    --color-warning-bg: #FEF3C7;         /* amber-100 */
    --color-error: #DC2626;              /* red-600 */
    --color-error-bg: #FEE2E2;           /* red-100 */
    --color-info: #0284C7;               /* sky-600 */
    --color-info-bg: #E0F2FE;            /* sky-100 */

    /* Shadow Colors */
    --shadow-color: rgba(15, 23, 42, 0.08);
    --shadow-color-md: rgba(15, 23, 42, 0.12);
    --shadow-color-lg: rgba(15, 23, 42, 0.16);

    /* Glassmorphism (Light - subtle) */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: blur(12px);

    /* ===== ANIMATION TIMING ===== */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;

    /* ===== SPACING ===== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
}

/* ===== DARK MODE OVERRIDES ===== */
.dark {
    /* 5-Level Elevation System */
    --color-elevation-0: #0C1222;        /* Deepest - page background */
    --color-elevation-1: #0F172A;        /* Sidebar, fixed panels */
    --color-elevation-2: #1E293B;        /* Cards, content areas */
    --color-elevation-3: #334155;        /* Dropdowns, popovers */
    --color-elevation-4: #475569;        /* Tooltips, highest elevation */

    /* Page & Surface Colors */
    --color-page-bg: var(--color-elevation-0);
    --color-page-bg-alt: var(--color-elevation-1);
    --color-surface-primary: var(--color-elevation-2);
    --color-surface-secondary: var(--color-elevation-1);
    --color-surface-tertiary: var(--color-elevation-3);
    --color-surface-hover: rgba(59, 130, 246, 0.1);
    --color-surface-active: rgba(59, 130, 246, 0.2);

    /* Text Colors (optimized for eye comfort during long sessions) */
    --color-text-primary: #E2E8F0;       /* slate-200 - softer than pure white */
    --color-text-secondary: #94A3B8;     /* slate-400 */
    --color-text-tertiary: #64748B;      /* slate-500 */
    --color-text-muted: #475569;         /* slate-600 */
    --color-text-heading: #F1F5F9;       /* slate-100 - headings slightly brighter */
    --color-text-inverse: #0F172A;       /* On light backgrounds */

    /* Border Colors (subtle for dark mode) */
    --color-border-primary: rgba(255, 255, 255, 0.1);
    --color-border-secondary: rgba(255, 255, 255, 0.15);
    --color-border-subtle: rgba(255, 255, 255, 0.05);
    --color-border-focus: #60A5FA;       /* blue-400 */

    /* Accent Colors (lighter for dark backgrounds) */
    --color-accent-primary: #60A5FA;     /* blue-400 */
    --color-accent-primary-hover: #3B82F6; /* blue-500 */
    --color-accent-secondary: #818CF8;   /* indigo-400 */
    --color-accent-secondary-hover: #6366F1; /* indigo-500 */

    /* Semantic Colors (lighter for dark backgrounds) */
    --color-success: #4ADE80;            /* green-400 */
    --color-success-bg: rgba(34, 197, 94, 0.15);
    --color-warning: #FBBF24;            /* amber-400 */
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-error: #F87171;              /* red-400 */
    --color-error-bg: rgba(239, 68, 68, 0.15);
    --color-info: #38BDF8;               /* sky-400 */
    --color-info-bg: rgba(14, 165, 233, 0.15);

    /* Shadow Colors (deeper for dark mode) */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-color-md: rgba(0, 0, 0, 0.4);
    --shadow-color-lg: rgba(0, 0, 0, 0.5);

    /* Glassmorphism (Enhanced for dark mode) */
    --glass-bg-subtle: rgba(255, 255, 255, 0.03);
    --glass-bg-medium: rgba(255, 255, 255, 0.05);
    --glass-bg-strong: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.12);
    --glass-border-active: rgba(255, 255, 255, 0.18);
    --glass-blur-subtle: blur(8px);
    --glass-blur-medium: blur(12px);
    --glass-blur-strong: blur(20px);
    --glass-glow: 0 0 30px rgba(59, 130, 246, 0.1);
    --glass-glow-accent: 0 0 40px rgba(99, 102, 241, 0.15);
}

/* ============================================
   WIKI MODULE - ORANGE THEME
   ============================================ */

/* Wiki Orange Theme - Light Mode */
.wiki-theme {
    /* Primary Orange Palette */
    --wiki-primary: #F97316;           /* orange-500 */
    --wiki-primary-hover: #EA580C;     /* orange-600 */
    --wiki-primary-light: #FFEDD5;     /* orange-100 */
    --wiki-primary-lighter: #FFF7ED;   /* orange-50 */
    --wiki-accent: #FB923C;            /* orange-400 */
    --wiki-accent-dark: #C2410C;       /* orange-700 */

    /* Surface Colors (orange tint) */
    --wiki-surface-hover: #FFF7ED;     /* orange-50 */
    --wiki-surface-active: #FFEDD5;    /* orange-100 */
    --wiki-surface-selected: #FED7AA;  /* orange-200 */

    /* Border Colors */
    --wiki-border-focus: #F97316;      /* orange-500 */
    --wiki-border-active: #FB923C;     /* orange-400 */

    /* Gradient */
    --wiki-gradient-start: #F97316;    /* orange-500 */
    --wiki-gradient-end: #FB923C;      /* orange-400 */

    /* Glow Effects */
    --wiki-glow: 0 0 30px rgba(249, 115, 22, 0.15);
    --wiki-glow-strong: 0 0 40px rgba(249, 115, 22, 0.25);
}

/* Wiki Orange Theme - Dark Mode */
.wiki-theme.dark {
    /* Primary Orange Palette (lighter for dark backgrounds) */
    --wiki-primary: #FB923C;           /* orange-400 */
    --wiki-primary-hover: #F97316;     /* orange-500 */
    --wiki-primary-light: rgba(249, 115, 22, 0.15);
    --wiki-primary-lighter: rgba(249, 115, 22, 0.08);
    --wiki-accent: #FDBA74;            /* orange-300 */
    --wiki-accent-dark: #EA580C;       /* orange-600 */

    /* Surface Colors */
    --wiki-surface-hover: rgba(249, 115, 22, 0.1);
    --wiki-surface-active: rgba(249, 115, 22, 0.2);
    --wiki-surface-selected: rgba(249, 115, 22, 0.25);

    /* Border Colors */
    --wiki-border-focus: #FB923C;      /* orange-400 */
    --wiki-border-active: #FDBA74;     /* orange-300 */

    /* Gradient */
    --wiki-gradient-start: #FB923C;    /* orange-400 */
    --wiki-gradient-end: #FDBA74;      /* orange-300 */

    /* Glow Effects */
    --wiki-glow: 0 0 30px rgba(251, 146, 60, 0.15);
    --wiki-glow-strong: 0 0 40px rgba(251, 146, 60, 0.25);
}

/* Wiki Utility Classes */
.wiki-btn-primary {
    background-color: var(--wiki-primary);
    color: white;
    transition: background-color 0.2s ease;
}
.wiki-btn-primary:hover {
    background-color: var(--wiki-primary-hover);
}

.wiki-text-primary {
    color: var(--wiki-primary);
}

.wiki-bg-primary {
    background-color: var(--wiki-primary);
}

.wiki-bg-primary-light {
    background-color: var(--wiki-primary-light);
}

.wiki-border-primary {
    border-color: var(--wiki-primary);
}

.wiki-ring-primary:focus {
    --tw-ring-color: var(--wiki-primary);
}

.wiki-gradient {
    background: linear-gradient(135deg, var(--wiki-gradient-start), var(--wiki-gradient-end));
}

.wiki-glow {
    box-shadow: var(--wiki-glow);
}

.wiki-glow-strong {
    box-shadow: var(--wiki-glow-strong);
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fade In Up (for modals, dropdowns) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Scale (for tooltips, popovers) */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scale In (for buttons, cards) */
@keyframes scaleIn {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
}

/* Slide In Left (for sidebars) */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Pulse (for notifications, indicators) */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Shimmer (for skeleton loading) */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Spin (for loading spinners) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bounce (subtle, for icons) */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* Wiggle (for error states) */
@keyframes wiggle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Progress bar */
@keyframes progressIndeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

/* Glow pulse (for focus states in dark mode) */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
    }
    50% {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.25);
    }
}

/* ============================================
   ANIMATION UTILITY CLASSES
   ============================================ */

/* Fade animations */
.animate-fade-in {
    animation: fadeIn var(--duration-normal) var(--ease-out-expo) forwards;
}

.animate-fade-in-up {
    animation: fadeInUp var(--duration-normal) var(--ease-out-expo) forwards;
}

.animate-fade-in-down {
    animation: fadeInDown var(--duration-normal) var(--ease-out-expo) forwards;
}

.animate-fade-in-scale {
    animation: fadeInScale var(--duration-fast) var(--ease-out-back) forwards;
}

/* Slide animations */
.animate-slide-in-left {
    animation: slideInLeft var(--duration-normal) var(--ease-out-expo) forwards;
}

.animate-slide-in-right {
    animation: slideInRight var(--duration-normal) var(--ease-out-expo) forwards;
}

/* Scale animation */
.animate-scale-in {
    animation: scaleIn var(--duration-fast) var(--ease-out-back) forwards;
}

/* Loading animations */
.animate-pulse {
    animation: pulse 2s var(--ease-in-out-smooth) infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-bounce {
    animation: bounce 1s var(--ease-out-back) infinite;
}

/* Skeleton loading shimmer */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-surface-tertiary) 0%,
        var(--color-surface-secondary) 50%,
        var(--color-surface-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.dark .skeleton {
    background: linear-gradient(
        90deg,
        rgba(51, 65, 85, 0.6) 0%,
        rgba(71, 85, 105, 0.6) 50%,
        rgba(51, 65, 85, 0.6) 100%
    );
    background-size: 200% 100%;
}

/* Progress bar indeterminate */
.progress-indeterminate {
    position: relative;
    overflow: hidden;
    background-color: var(--color-surface-tertiary);
}

.progress-indeterminate::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: var(--color-accent-primary);
    animation: progressIndeterminate 1.5s var(--ease-in-out-smooth) infinite;
}

.dark .progress-indeterminate {
    background-color: var(--color-elevation-2);
}

/* Error wiggle */
.animate-wiggle {
    animation: wiggle 0.3s var(--ease-in-out-smooth);
}

/* ============================================
   MICRO-INTERACTION CLASSES
   ============================================ */

/* Interactive lift on hover */
.hover-lift {
    transition: transform var(--duration-fast) var(--ease-out-expo),
                box-shadow var(--duration-fast) var(--ease-out-expo);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-color-md);
}

.dark .hover-lift:hover {
    box-shadow: 0 8px 25px var(--shadow-color-lg), var(--glass-glow);
}

/* Subtle scale on hover */
.hover-scale {
    transition: transform var(--duration-fast) var(--ease-out-back);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Interactive glow (dark mode) */
.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-out-expo);
}

.dark .hover-glow:hover {
    box-shadow: var(--glass-glow);
}

/* Active press effect */
.active-press:active {
    transform: scale(0.98);
    transition: transform var(--duration-instant) var(--ease-in-out-smooth);
}

/* Focus glow animation */
.focus-glow:focus {
    animation: glowPulse 2s var(--ease-in-out-smooth) infinite;
}

/* Smooth color transitions */
.transition-colors {
    transition: color var(--duration-fast) var(--ease-in-out-smooth),
                background-color var(--duration-fast) var(--ease-in-out-smooth),
                border-color var(--duration-fast) var(--ease-in-out-smooth);
}

/* Smooth all transitions */
.transition-all {
    transition: all var(--duration-normal) var(--ease-in-out-smooth);
}

/* Quick transitions (for instant feedback) */
.transition-quick {
    transition: all var(--duration-instant) var(--ease-in-out-smooth);
}

/* Delayed animation (for staggered effects) */
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }

/* ============================================
   ELEVATION SYSTEM CLASSES
   ============================================ */

/* Elevation Level 0 - Page Background */
.elevation-0 {
    background-color: var(--color-page-bg);
}

/* Elevation Level 1 - Sidebar, Fixed Panels */
.elevation-1 {
    background-color: var(--color-surface-secondary);
    box-shadow: 0 1px 2px var(--shadow-color);
}
.dark .elevation-1 {
    background-color: var(--color-elevation-1);
    border: 1px solid var(--glass-border);
}

/* Elevation Level 2 - Cards, Content Areas */
.elevation-2 {
    background-color: var(--color-surface-primary);
    box-shadow: 0 1px 3px var(--shadow-color), 0 1px 2px var(--shadow-color);
}
.dark .elevation-2 {
    background-color: var(--color-elevation-2);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-bg-subtle);
}

/* Elevation Level 3 - Dropdowns, Popovers */
.elevation-3 {
    background-color: var(--color-surface-primary);
    box-shadow: 0 4px 6px -1px var(--shadow-color-md), 0 2px 4px -2px var(--shadow-color);
}
.dark .elevation-3 {
    background-color: var(--color-elevation-3);
    border: 1px solid var(--glass-border-hover);
    box-shadow: 0 10px 30px var(--shadow-color-md);
}

/* Elevation Level 4 - Modals, Tooltips */
.elevation-4 {
    background-color: var(--color-surface-primary);
    box-shadow: 0 10px 25px -5px var(--shadow-color-lg), 0 8px 10px -6px var(--shadow-color-md);
}
.dark .elevation-4 {
    background-color: var(--color-elevation-4);
    border: 1px solid var(--glass-border-active);
    box-shadow: 0 20px 50px var(--shadow-color-lg), var(--glass-glow);
}

/* ============================================
   ENHANCED GLASSMORPHISM CLASSES
   ============================================ */

/* Glass Card - Subtle */
.glass-subtle {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}
.dark .glass-subtle {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.9),
        rgba(15, 23, 42, 0.95)
    );
    backdrop-filter: var(--glass-blur-subtle);
    -webkit-backdrop-filter: var(--glass-blur-subtle);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-bg-subtle);
}

/* Glass Card - Medium */
.glass-medium {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}
.dark .glass-medium {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.95),
        rgba(15, 23, 42, 0.98)
    );
    backdrop-filter: var(--glass-blur-medium);
    -webkit-backdrop-filter: var(--glass-blur-medium);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-bg-medium);
}

/* Glass Card - Strong (for modals, elevated content) */
.glass-strong {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}
.dark .glass-strong {
    background: linear-gradient(
        145deg,
        rgba(30, 41, 59, 0.98),
        rgba(15, 23, 42, 1)
    );
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--glass-border-hover);
    box-shadow:
        inset 0 1px 0 var(--glass-bg-strong),
        0 20px 40px var(--shadow-color-lg);
}

/* Glass Card with Glow (interactive hover) */
.glass-glow {
    transition: all var(--duration-normal) var(--ease-out-expo);
}
.dark .glass-glow:hover {
    border-color: var(--glass-border-active);
    box-shadow:
        inset 0 1px 0 var(--glass-bg-strong),
        var(--glass-glow),
        0 20px 40px var(--shadow-color-md);
    transform: translateY(-2px);
}

/* Glass Card with Accent Glow */
.glass-accent-glow {
    transition: all var(--duration-normal) var(--ease-out-expo);
}
.dark .glass-accent-glow:hover {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow:
        inset 0 1px 0 var(--glass-bg-strong),
        var(--glass-glow-accent),
        0 20px 40px var(--shadow-color-md);
}

/* ============================================
   SEMANTIC THEME CLASSES
   ============================================

   These classes provide theme-aware styling using the .dark parent class.
   Instead of: darkMode ? 'text-gray-400' : 'text-gray-600'
   Use: className="text-secondary"

   This eliminates ~2,600 darkMode ternaries across the codebase.
   ============================================ */

/* ============================================
   TEXT COLORS
   ============================================ */

/* Primary text - main content */
.text-theme-primary {
    color: var(--color-text-primary);
}
.dark .text-theme-primary {
    color: var(--color-text-primary);
}

/* Secondary text - less prominent content */
.text-theme-secondary {
    color: var(--color-text-secondary);
}
.dark .text-theme-secondary {
    color: var(--color-text-secondary);
}

/* Tertiary text - subtle/muted content */
.text-theme-tertiary {
    color: var(--color-text-tertiary);
}
.dark .text-theme-tertiary {
    color: var(--color-text-tertiary);
}

/* Muted text - labels, placeholders */
.text-theme-muted {
    color: var(--color-text-muted);
}
.dark .text-theme-muted {
    color: var(--color-text-muted);
}

/* Heading text */
.text-theme-heading {
    color: var(--color-text-heading);
}
.dark .text-theme-heading {
    color: var(--color-text-heading);
}

/* Label text */
.text-theme-label {
    color: var(--color-text-secondary);
}
.dark .text-theme-label {
    color: var(--color-text-secondary);
}

/* Inverse/contrast text */
.text-theme-inverse {
    color: var(--color-text-inverse);
}
.dark .text-theme-inverse {
    color: var(--color-text-inverse);
}

/* Link text */
.text-theme-link {
    color: var(--color-accent-primary);
    transition: color var(--duration-fast) var(--ease-in-out-smooth);
}
.dark .text-theme-link {
    color: var(--color-accent-primary);
}

.text-theme-link:hover {
    color: var(--color-accent-primary-hover);
}
.dark .text-theme-link:hover {
    color: var(--color-accent-primary-hover);
}

/* Success text */
.text-theme-success {
    color: var(--color-success);
}
.dark .text-theme-success {
    color: var(--color-success);
}

/* Error/danger text */
.text-theme-error {
    color: var(--color-error);
}
.dark .text-theme-error {
    color: var(--color-error);
}

/* Warning text */
.text-theme-warning {
    color: var(--color-warning);
}
.dark .text-theme-warning {
    color: var(--color-warning);
}

/* Accent/highlight text */
.text-theme-accent {
    color: var(--color-accent-secondary);
}
.dark .text-theme-accent {
    color: var(--color-accent-secondary);
}

/* ============================================
   BACKGROUND COLORS
   ============================================ */

/* Primary background - main surfaces */
.bg-theme-primary {
    background-color: var(--color-surface-primary);
}
.dark .bg-theme-primary {
    background-color: var(--color-surface-primary);
}

/* Secondary background - cards, panels */
.bg-theme-secondary {
    background-color: var(--color-surface-secondary);
}
.dark .bg-theme-secondary {
    background-color: var(--color-surface-secondary);
}

/* Tertiary background - nested elements */
.bg-theme-tertiary {
    background-color: var(--color-surface-tertiary);
}
.dark .bg-theme-tertiary {
    background-color: var(--color-surface-tertiary);
}

/* Hover background for interactive elements */
.bg-theme-hover {
    background-color: transparent;
    transition: background-color var(--duration-fast) var(--ease-in-out-smooth);
}
.bg-theme-hover:hover {
    background-color: var(--color-surface-hover);
}
.dark .bg-theme-hover:hover {
    background-color: var(--color-surface-hover);
}

/* Card background */
.bg-theme-card {
    background-color: var(--color-surface-primary);
}
.dark .bg-theme-card {
    background-color: var(--color-elevation-2);
}

/* Elevated/modal background */
.bg-theme-elevated {
    background-color: var(--color-surface-primary);
}
.dark .bg-theme-elevated {
    background-color: var(--color-elevation-1);
}

/* Input background */
.bg-theme-input {
    background-color: var(--color-surface-primary);
}
.dark .bg-theme-input {
    background-color: var(--color-elevation-2);
}

/* Muted/subtle background */
.bg-theme-muted {
    background-color: var(--color-surface-tertiary);
}
.dark .bg-theme-muted {
    background-color: rgba(51, 65, 85, 0.5);
}

/* Success background */
.bg-theme-success-subtle {
    background-color: var(--color-success-bg);
}
.dark .bg-theme-success-subtle {
    background-color: var(--color-success-bg);
}

/* Error background */
.bg-theme-error-subtle {
    background-color: var(--color-error-bg);
}
.dark .bg-theme-error-subtle {
    background-color: var(--color-error-bg);
}

/* Warning background */
.bg-theme-warning-subtle {
    background-color: var(--color-warning-bg);
}
.dark .bg-theme-warning-subtle {
    background-color: var(--color-warning-bg);
}

/* ============================================
   BORDER COLORS
   ============================================ */

/* Primary border */
.border-theme-primary {
    border-color: var(--color-border-primary);
}
.dark .border-theme-primary {
    border-color: var(--color-border-primary);
}

/* Secondary border */
.border-theme-secondary {
    border-color: var(--color-border-secondary);
}
.dark .border-theme-secondary {
    border-color: var(--color-border-secondary);
}

/* Input border */
.border-theme-input {
    border-color: var(--color-border-secondary);
    transition: border-color var(--duration-fast) var(--ease-in-out-smooth);
}
.dark .border-theme-input {
    border-color: var(--color-border-primary);
}

/* Focus border */
.border-theme-focus:focus {
    border-color: var(--color-border-focus);
}
.dark .border-theme-focus:focus {
    border-color: var(--color-border-focus);
}

/* Divider */
.border-theme-divider {
    border-color: var(--color-border-subtle);
}
.dark .border-theme-divider {
    border-color: var(--color-border-subtle);
}

/* ============================================
   COMBINED COMPONENT CLASSES
   ============================================ */

/* Card component - Base */
.card-theme {
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-in-out-smooth);
}
.dark .card-theme {
    background-color: var(--color-elevation-2);
    border-color: var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-bg-subtle);
}

/* Card - Interactive (with hover effects) */
.card-interactive {
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: all var(--duration-normal) var(--ease-out-expo);
    cursor: pointer;
}
.card-interactive:hover {
    border-color: var(--color-border-secondary);
    box-shadow: 0 8px 30px var(--shadow-color-md);
    transform: translateY(-2px);
}
.dark .card-interactive {
    background-color: var(--color-elevation-2);
    border-color: var(--glass-border);
}
.dark .card-interactive:hover {
    border-color: var(--glass-border-hover);
    box-shadow: 0 8px 30px var(--shadow-color-lg), var(--glass-glow);
}

/* Card - Outlined (minimal) */
.card-outlined {
    background-color: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: all var(--duration-fast) var(--ease-in-out-smooth);
}
.card-outlined:hover {
    border-color: var(--color-border-secondary);
}
.dark .card-outlined {
    border-color: var(--glass-border);
}
.dark .card-outlined:hover {
    border-color: var(--glass-border-hover);
}

/* Card - Elevated (with shadow) */
.card-elevated {
    background-color: var(--color-surface-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px var(--shadow-color);
    transition: all var(--duration-normal) var(--ease-out-expo);
}
.card-elevated:hover {
    box-shadow: 0 8px 30px var(--shadow-color-md);
    transform: translateY(-2px);
}
.dark .card-elevated {
    background-color: var(--color-elevation-2);
    border-color: var(--glass-border);
    box-shadow: 0 4px 20px var(--shadow-color-md);
}
.dark .card-elevated:hover {
    box-shadow: 0 12px 40px var(--shadow-color-lg), var(--glass-glow);
}

/* Card - Feature (highlighted/premium) */
.card-feature {
    background: linear-gradient(135deg, var(--color-surface-primary) 0%, var(--color-surface-hover) 100%);
    border: 1px solid var(--color-accent-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
    transition: all var(--duration-normal) var(--ease-out-expo);
}
.card-feature:hover {
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}
.dark .card-feature {
    background: linear-gradient(145deg, var(--color-elevation-2) 0%, var(--color-elevation-3) 100%);
    border-color: var(--color-accent-primary);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15), var(--glass-glow);
}
.dark .card-feature:hover {
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.25), var(--glass-glow-accent);
}

/* Input component */
.input-theme {
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-secondary);
    color: var(--color-text-primary);
    transition: all var(--duration-fast) var(--ease-in-out-smooth);
}
.dark .input-theme {
    background-color: var(--color-elevation-2);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.input-theme::placeholder {
    color: var(--color-text-muted);
}
.dark .input-theme::placeholder {
    color: var(--color-text-muted);
}

.input-theme:focus {
    border-color: var(--color-border-focus);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.dark .input-theme:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Select component */
.select-theme {
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-secondary);
    color: var(--color-text-primary);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-in-out-smooth);
}
.dark .select-theme {
    background-color: var(--color-elevation-2);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

.select-theme:focus {
    border-color: var(--color-border-focus);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.dark .select-theme:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Input - Large variant */
.input-lg {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
}

/* Input - Small variant */
.input-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

/* Input with icon (left) */
.input-with-icon {
    padding-left: 2.5rem;
}

/* Input with icon (right) */
.input-with-icon-right {
    padding-right: 2.5rem;
}

/* Input - Error state */
.input-error {
    border-color: var(--color-error) !important;
    background-color: var(--color-error-bg);
}
.input-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
.dark .input-error {
    border-color: var(--color-error) !important;
    background-color: var(--color-error-bg);
}

/* Input - Success state */
.input-success {
    border-color: var(--color-success) !important;
    background-color: var(--color-success-bg);
}
.input-success:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1) !important;
}
.dark .input-success {
    border-color: var(--color-success) !important;
    background-color: var(--color-success-bg);
}

/* Form Label */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 0.375rem;
}
.dark .form-label {
    color: var(--color-text-secondary);
}

/* Form Helper Text */
.form-helper {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Form Error Text */
.form-error {
    font-size: 0.75rem;
    color: var(--color-error);
    margin-top: 0.25rem;
}

/* Checkbox/Radio - Custom styling */
.checkbox-theme {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--color-border-secondary);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-primary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out-smooth);
}
.checkbox-theme:checked {
    background-color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
}
.checkbox-theme:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.dark .checkbox-theme {
    background-color: var(--color-elevation-2);
    border-color: var(--glass-border-hover);
}
.dark .checkbox-theme:checked {
    background-color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}

/* Radio - Custom styling */
.radio-theme {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--color-border-secondary);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-primary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out-smooth);
}
.radio-theme:checked {
    border-color: var(--color-accent-primary);
    background-color: var(--color-surface-primary);
    box-shadow: inset 0 0 0 4px var(--color-accent-primary);
}
.radio-theme:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.dark .radio-theme {
    background-color: var(--color-elevation-2);
    border-color: var(--glass-border-hover);
}
.dark .radio-theme:checked {
    border-color: var(--color-accent-primary);
    box-shadow: inset 0 0 0 4px var(--color-accent-primary);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background-color: var(--color-border-primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px var(--shadow-color);
    transition: all var(--duration-fast) var(--ease-out-back);
}
.toggle-switch.active {
    background-color: var(--color-accent-primary);
}
.toggle-switch.active::after {
    transform: translateX(1.25rem);
}
.dark .toggle-switch {
    background-color: var(--color-elevation-3);
}
.dark .toggle-switch.active {
    background-color: var(--color-accent-primary);
}

/* Button - Primary */
.btn-theme-primary {
    background-color: var(--color-accent-primary);
    color: var(--color-text-inverse);
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.btn-theme-primary:hover {
    background-color: var(--color-accent-primary-hover);
    transform: translateY(-1px);
}
.dark .btn-theme-primary {
    background-color: var(--color-accent-primary-hover);
}
.dark .btn-theme-primary:hover {
    background-color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Button - Secondary */
.btn-theme-secondary {
    background-color: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.btn-theme-secondary:hover {
    background-color: var(--color-border-primary);
}
.dark .btn-theme-secondary {
    background-color: var(--color-elevation-3);
    color: var(--color-text-primary);
}
.dark .btn-theme-secondary:hover {
    background-color: var(--color-elevation-2);
}

/* Button - Ghost/Subtle */
.btn-theme-ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
    transition: all var(--duration-fast) var(--ease-in-out-smooth);
}
.btn-theme-ghost:hover {
    background-color: var(--color-surface-hover);
}
.dark .btn-theme-ghost {
    color: var(--color-text-secondary);
}
.dark .btn-theme-ghost:hover {
    background-color: var(--color-surface-hover);
}

/* Button - Danger */
.btn-theme-danger {
    background-color: var(--color-error);
    color: var(--color-text-inverse);
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.btn-theme-danger:hover {
    background-color: #dc2626;
    transform: translateY(-1px);
}
.dark .btn-theme-danger {
    background-color: #dc2626;
}
.dark .btn-theme-danger:hover {
    background-color: #b91c1c;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Button - Success */
.btn-theme-success {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.btn-theme-success:hover {
    background-color: #15803d;
    transform: translateY(-1px);
}
.dark .btn-theme-success {
    background-color: #16a34a;
}
.dark .btn-theme-success:hover {
    background-color: #15803d;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Button - Outline Primary */
.btn-outline-primary {
    background-color: transparent;
    border: 1px solid var(--color-accent-primary);
    color: var(--color-accent-primary);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.btn-outline-primary:hover {
    background-color: var(--color-accent-primary);
    color: var(--color-text-inverse);
}
.dark .btn-outline-primary {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}
.dark .btn-outline-primary:hover {
    background-color: var(--color-accent-primary);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Button - Outline Secondary */
.btn-outline-secondary {
    background-color: transparent;
    border: 1px solid var(--color-border-secondary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out-expo);
}
.btn-outline-secondary:hover {
    border-color: var(--color-text-secondary);
    background-color: var(--color-surface-hover);
}
.dark .btn-outline-secondary {
    border-color: var(--glass-border-hover);
    color: var(--color-text-secondary);
}
.dark .btn-outline-secondary:hover {
    border-color: var(--glass-border-active);
    background-color: var(--color-surface-hover);
}

/* Button - Gradient (premium action) */
.btn-gradient {
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-secondary) 100%);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}
.btn-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-accent-primary-hover) 0%, #4F46E5 100%);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-in-out-smooth);
}
.btn-gradient:hover::before {
    opacity: 1;
}
.btn-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
.btn-gradient span {
    position: relative;
    z-index: 1;
}

/* Icon button */
.icon-btn-theme {
    color: var(--color-text-tertiary);
    transition: all var(--duration-fast) var(--ease-in-out-smooth);
}
.icon-btn-theme:hover {
    color: var(--color-accent-primary);
    background-color: var(--color-surface-hover);
}
.dark .icon-btn-theme {
    color: var(--color-text-tertiary);
}
.dark .icon-btn-theme:hover {
    color: var(--color-accent-primary);
    background-color: var(--color-surface-hover);
}

/* Icon button - danger variant */
.icon-btn-theme-danger:hover {
    color: var(--color-error);
    background-color: var(--color-error-bg);
}
.dark .icon-btn-theme-danger:hover {
    color: var(--color-error);
    background-color: var(--color-error-bg);
}

/* Dropdown/menu */
.dropdown-theme {
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: 0 10px 25px -5px var(--shadow-color-md), 0 8px 10px -6px var(--shadow-color);
    transition: opacity var(--duration-fast) var(--ease-out-expo),
                transform var(--duration-fast) var(--ease-out-expo);
}
.dark .dropdown-theme {
    background-color: var(--color-elevation-3);
    border-color: var(--glass-border-hover);
    box-shadow: 0 10px 40px var(--shadow-color-lg);
    backdrop-filter: blur(12px);
}

/* Dropdown item */
.dropdown-item-theme {
    color: var(--color-text-primary);
    transition: all var(--duration-instant) var(--ease-in-out-smooth);
}
.dropdown-item-theme:hover {
    background-color: var(--color-surface-hover);
}
.dark .dropdown-item-theme {
    color: var(--color-text-primary);
}
.dark .dropdown-item-theme:hover {
    background-color: var(--color-surface-hover);
}

/* Modal overlay */
.modal-overlay-theme {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.dark .modal-overlay-theme {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

/* Modal content */
.modal-content-theme {
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: 0 20px 50px -12px var(--shadow-color-lg);
}
.dark .modal-content-theme {
    background-color: var(--color-elevation-2);
    border-color: var(--glass-border);
    box-shadow: 0 25px 50px var(--shadow-color-lg), var(--glass-glow);
    backdrop-filter: blur(20px);
}

/* Table header */
.table-header-theme {
    background-color: var(--color-surface-secondary);
    border-bottom: 1px solid var(--color-border-primary);
}
.dark .table-header-theme {
    background-color: var(--color-elevation-3);
    border-bottom-color: var(--glass-border);
}

/* Table row */
.table-row-theme {
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background-color var(--duration-instant) var(--ease-in-out-smooth);
}
.table-row-theme:hover {
    background-color: var(--color-surface-hover);
}
.dark .table-row-theme {
    border-bottom-color: var(--color-border-subtle);
}
.dark .table-row-theme:hover {
    background-color: var(--color-surface-hover);
}

/* Sidebar */
.sidebar-theme {
    background-color: var(--color-surface-primary);
    border-right: 1px solid var(--color-border-primary);
}
.dark .sidebar-theme {
    background-color: var(--color-elevation-1);
    border-right-color: var(--glass-border);
}

/* Header */
.header-theme {
    background-color: var(--color-surface-primary);
    border-bottom: 1px solid var(--color-border-primary);
}
.dark .header-theme {
    background-color: var(--color-elevation-1);
    border-bottom-color: var(--glass-border);
}

/* Badge - default */
.badge-theme {
    background-color: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    transition: all var(--duration-fast) var(--ease-in-out-smooth);
}
.dark .badge-theme {
    background-color: var(--color-elevation-3);
    color: var(--color-text-secondary);
}

/* Badge - primary/blue */
.badge-theme-primary {
    background-color: #dbeafe;
    color: #1e40af;
}
.dark .badge-theme-primary {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

/* Badge - success/green */
.badge-theme-success {
    background-color: #dcfce7;
    color: #15803d;
}
.dark .badge-theme-success {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

/* Badge - warning/amber */
.badge-theme-warning {
    background-color: #fef3c7;
    color: #92400e;
}
.dark .badge-theme-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

/* Badge - error/red */
.badge-theme-error {
    background-color: #fee2e2;
    color: #991b1b;
}
.dark .badge-theme-error {
    background-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* Badge - purple */
.badge-theme-purple {
    background-color: #f3e8ff;
    color: #6b21a8;
}
.dark .badge-theme-purple {
    background-color: rgba(168, 85, 247, 0.2);
    color: #c4b5fd;
}

/* Badge - blue */
.badge-theme-blue {
    background-color: #dbeafe;
    color: #1e40af;
}
.dark .badge-theme-blue {
    background-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

/* Badge - red */
.badge-theme-red {
    background-color: #fee2e2;
    color: #991b1b;
}
.dark .badge-theme-red {
    background-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* Badge - green */
.badge-theme-green {
    background-color: #dcfce7;
    color: #166534;
}
.dark .badge-theme-green {
    background-color: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

/* Badge - yellow */
.badge-theme-yellow {
    background-color: #fef3c7;
    color: #92400e;
}
.dark .badge-theme-yellow {
    background-color: rgba(234, 179, 8, 0.2);
    color: #fcd34d;
}

/* Badge - gray */
.badge-theme-gray {
    background-color: #f3f4f6;
    color: #374151;
}
.dark .badge-theme-gray {
    background-color: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Toggle switch - off state */
.toggle-off-theme {
    background-color: #d1d5db; /* gray-300 */
}
.dark .toggle-off-theme {
    background-color: #475569; /* slate-600 */
}

/* Tooltip */
.tooltip-theme {
    background-color: #1f2937;
    color: #ffffff;
}
.dark .tooltip-theme {
    background-color: #f9fafb;
    color: #1f2937;
}

/* Section label */
.section-label-theme {
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dark .section-label-theme {
    color: #6b7280;
}

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.shadow-theme-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.dark .shadow-theme-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.shadow-theme {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.dark .shadow-theme {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
}

.shadow-theme-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.dark .shadow-theme-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
}

.shadow-theme-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.dark .shadow-theme-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   RING/FOCUS UTILITIES
   ============================================ */

.ring-theme-focus:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}
.dark .ring-theme-focus:focus {
    box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #6366f1, 0 0 15px rgba(99, 102, 241, 0.4);
}

/* Hub focus ring with indigo glow */
.ring-hub-focus:focus {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(15, 23, 42, 0.9),
        0 0 0 4px #6366f1,
        0 0 20px rgba(99, 102, 241, 0.5);
}

/* Hub focus for inputs - Light mode */
.focus-hub:focus {
    outline: none;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Hub focus for inputs - Dark mode */
.dark .focus-hub:focus {
    outline: none;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25), 0 0 15px rgba(99, 102, 241, 0.2);
}

/* Focus visible variant (keyboard navigation) - Light mode */
.focus-hub:focus-visible {
    outline: none;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Focus visible variant (keyboard navigation) - Dark mode */
.dark .focus-hub:focus-visible {
    outline: none;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3), 0 0 20px rgba(99, 102, 241, 0.35);
}

/* Universal focus ring for interactive elements */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}
.dark .focus-ring:focus {
    box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #6366f1;
}

/* Focus visible only (keyboard navigation only) */
.focus-ring-visible:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}
.dark .focus-ring-visible:focus-visible {
    box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #6366f1;
}

/* ============================================
   PLACEHOLDER UTILITIES
   ============================================ */

.placeholder-theme::placeholder {
    color: #9ca3af; /* gray-400 - 3.0:1 contrast for placeholder text */
}
.dark .placeholder-theme::placeholder {
    color: #6b7280;
}

/* ============================================
   STATUS INDICATOR THEME CLASSES
   ============================================ */

/* Status text colors - for SaveIndicator, SyncStatusIndicator etc. */
.text-status-saving {
    color: #2563eb; /* blue-600 */
}
.dark .text-status-saving {
    color: #60a5fa; /* blue-400 */
}

.text-status-saved {
    color: #16a34a; /* green-600 */
}
.dark .text-status-saved {
    color: #4ade80; /* green-400 */
}

.text-status-error {
    color: #dc2626; /* red-600 */
}
.dark .text-status-error {
    color: #f87171; /* red-400 */
}

.text-status-pending {
    color: #2563eb; /* blue-600 */
}
.dark .text-status-pending {
    color: #60a5fa; /* blue-400 */
}

.text-status-warning {
    color: #d97706; /* amber-600 */
}
.dark .text-status-warning {
    color: #fbbf24; /* amber-400 */
}

.text-status-muted {
    color: #6b7280; /* gray-500 */
}
.dark .text-status-muted {
    color: #9ca3af; /* gray-400 */
}

/* Status background badges */
.bg-status-pending {
    background-color: #dbeafe; /* blue-100 */
}
.dark .bg-status-pending {
    background-color: rgba(59, 130, 246, 0.2);
}

/* ============================================
   PAGINATION THEME CLASSES
   ============================================ */

/* Pagination container border */
.pagination-border {
    border-color: #e5e7eb; /* gray-200 */
}
.dark .pagination-border {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Pagination text */
.pagination-text {
    color: #374151; /* gray-700 */
}
.dark .pagination-text {
    color: #d1d5db; /* gray-300 */
}

/* Pagination button - default state */
.pagination-btn {
    background-color: #ffffff;
    color: #374151; /* gray-700 */
    border: 1px solid #d1d5db; /* gray-300 */
}
.pagination-btn:hover {
    background-color: #f9fafb; /* gray-50 */
}
.dark .pagination-btn {
    background-color: rgba(255, 255, 255, 0.05);
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark .pagination-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Pagination button - disabled state */
.pagination-btn-disabled {
    background-color: #f3f4f6; /* gray-100 */
    color: #9ca3af; /* gray-400 */
    cursor: not-allowed;
}
.dark .pagination-btn-disabled {
    background-color: rgba(255, 255, 255, 0.05);
    color: #6b7280; /* gray-500 */
    cursor: not-allowed;
}

/* Pagination button - active state */
.pagination-btn-active {
    background-color: #4f46e5; /* indigo-600 */
    color: #ffffff;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.dark .pagination-btn-active {
    background-color: #6366f1; /* indigo-500 */
    color: #ffffff;
}

/* Pagination ellipsis */
.pagination-ellipsis {
    color: #6b7280; /* gray-500 */
}
.dark .pagination-ellipsis {
    color: #9ca3af; /* gray-400 */
}

/* ============================================
   COMMAND PALETTE (Cmd+K / Ctrl+K)
   ============================================ */

/* Backdrop overlay */
.command-palette-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9999;
    animation: fadeIn var(--duration-fast) var(--ease-out-expo);
}
.dark .command-palette-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

/* Main container */
.command-palette {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 10000;
    animation: fadeInUp var(--duration-normal) var(--ease-out-expo);
}
.dark .command-palette {
    background-color: var(--color-elevation-2);
    border-color: var(--glass-border);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), var(--glass-glow);
}

/* Search input container */
.command-palette-input-wrapper {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border-primary);
    gap: 0.75rem;
}
.dark .command-palette-input-wrapper {
    border-bottom-color: var(--glass-border);
}

/* Search icon */
.command-palette-search-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Search input */
.command-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.125rem;
    color: var(--color-text-primary);
}
.command-palette-input::placeholder {
    color: var(--color-text-muted);
}
.dark .command-palette-input {
    color: var(--color-text-primary);
}

/* Keyboard shortcut badge */
.command-palette-shortcut {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.command-palette-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background-color: var(--color-surface-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}
.dark .command-palette-kbd {
    background-color: var(--color-elevation-3);
    border-color: var(--glass-border);
}

/* Results container */
.command-palette-results {
    max-height: calc(70vh - 80px);
    overflow-y: auto;
    padding: 0.5rem;
}

/* Group label */
.command-palette-group {
    padding: 0.5rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/* Result item */
.command-palette-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-instant) var(--ease-in-out-smooth);
    gap: 0.75rem;
}
.command-palette-item:hover,
.command-palette-item.selected {
    background-color: var(--color-surface-hover);
}
.dark .command-palette-item:hover,
.dark .command-palette-item.selected {
    background-color: var(--color-surface-hover);
}

/* Item icon */
.command-palette-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background-color: var(--color-surface-tertiary);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.dark .command-palette-item-icon {
    background-color: var(--color-elevation-3);
}

/* Item content */
.command-palette-item-content {
    flex: 1;
    min-width: 0;
}

.command-palette-item-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-palette-item-description {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Item shortcut */
.command-palette-item-shortcut {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Arrow indicator for selected item */
.command-palette-item.selected .command-palette-item-icon {
    background-color: var(--color-accent-primary);
    color: white;
}

/* No results state */
.command-palette-empty {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-muted);
}

.command-palette-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.command-palette-empty-text {
    font-size: 0.875rem;
}

/* Footer with hints */
.command-palette-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--color-border-primary);
    background-color: var(--color-surface-secondary);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}
.dark .command-palette-footer {
    border-top-color: var(--glass-border);
    background-color: var(--color-elevation-1);
}

.command-palette-footer-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */

.scroll-to-top-btn {
    background-color: rgba(255, 255, 255, 0.8);
    color: #374151; /* gray-700 */
    border: 1px solid rgba(229, 231, 235, 0.5); /* gray-200/50 */
}
.scroll-to-top-btn:hover {
    background-color: rgba(255, 255, 255, 0.95);
}
.dark .scroll-to-top-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark .scroll-to-top-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   TOAST NOTIFICATION SYSTEM
   ============================================ */

/* Toast container (positioned at top-right) */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
    max-width: 420px;
    width: 100%;
}

/* Individual toast */
.toast {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    background-color: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px var(--shadow-color-lg);
    pointer-events: auto;
    animation: toastSlideIn var(--duration-normal) var(--ease-out-expo);
    gap: 0.75rem;
}
.dark .toast {
    background-color: var(--color-elevation-3);
    border-color: var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), var(--glass-glow);
}

/* Toast exit animation */
.toast.exiting {
    animation: toastSlideOut var(--duration-fast) var(--ease-in-out-smooth) forwards;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Toast icon */
.toast-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
}

/* Toast content */
.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
}

.toast-message {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
    line-height: 1.5;
}

/* Toast close button */
.toast-close {
    flex-shrink: 0;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--duration-instant) var(--ease-in-out-smooth);
}
.toast-close:hover {
    color: var(--color-text-secondary);
    background-color: var(--color-surface-hover);
}

/* Toast progress bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--color-accent-primary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    animation: toastProgress linear forwards;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Toast variants */
.toast-success .toast-icon {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.toast-error .toast-icon {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

.toast-warning .toast-icon {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

.toast-info .toast-icon {
    background-color: var(--color-info-bg);
    color: var(--color-info);
}

/* ============================================
   NOTIFICATION BADGES
   ============================================ */

/* Notification dot */
.notification-dot {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-error);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-surface-primary);
}
.dark .notification-dot {
    border-color: var(--color-elevation-2);
}

/* Notification count badge */
.notification-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background-color: var(--color-error);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-surface-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark .notification-badge {
    border-color: var(--color-elevation-2);
}

/* Pulsing notification badge */
.notification-badge-pulse {
    animation: notificationPulse 2s var(--ease-in-out-smooth) infinite;
}

@keyframes notificationPulse {
    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);
    }
}

/* ============================================
   ENHANCED LOADING STATES
   ============================================ */

/* Spinner - Small */
.spinner-sm {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-border-primary);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Spinner - Medium */
.spinner-md {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--color-border-primary);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Spinner - Large */
.spinner-lg {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-border-primary);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.dark .spinner-sm,
.dark .spinner-md,
.dark .spinner-lg {
    border-color: var(--glass-border);
    border-top-color: var(--color-accent-primary);
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}
.dark .loading-overlay {
    background-color: rgba(15, 23, 42, 0.8);
}

/* Loading text with dots animation */
.loading-dots::after {
    content: '';
    animation: loadingDots 1.5s steps(4, end) infinite;
}

@keyframes loadingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* Skeleton variants */
.skeleton-text {
    height: 1rem;
    border-radius: var(--radius-sm);
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    border-radius: var(--radius-sm);
}

.skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
}

.skeleton-button {
    height: 2.25rem;
    width: 6rem;
    border-radius: var(--radius-md);
}

.skeleton-card {
    height: 8rem;
    border-radius: var(--radius-lg);
}

/* ============================================
   EMPTY STATES
   ============================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.empty-state-description {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    max-width: 20rem;
    margin-bottom: 1.5rem;
}

/* ============================================
   TOOLTIP ENHANCEMENTS
   ============================================ */

.tooltip-enhanced {
    position: relative;
}

.tooltip-enhanced::before,
.tooltip-enhanced::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-fast) var(--ease-out-expo);
    z-index: 9999;
}

/* Tooltip content */
.tooltip-enhanced::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.5rem 0.75rem;
    background-color: var(--color-text-primary);
    color: var(--color-surface-primary);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px var(--shadow-color-md);
}

/* Tooltip arrow */
.tooltip-enhanced::before {
    content: '';
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 4px solid transparent;
    border-top-color: var(--color-text-primary);
}

.tooltip-enhanced:hover::before,
.tooltip-enhanced:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dark .tooltip-enhanced::after {
    background-color: var(--color-surface-primary);
    color: var(--color-text-primary);
}
.dark .tooltip-enhanced::before {
    border-top-color: var(--color-surface-primary);
}

/* ============================================
   FOCUS VISIBLE UTILITIES
   ============================================ */

/* Only show focus ring on keyboard navigation */
.focus-visible-only:focus {
    outline: none;
}
.focus-visible-only:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

/* Accessible focus ring */
.focus-ring-accessible:focus-visible {
    outline: 3px solid var(--color-accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================================
   ALERT/INFO BOXES
   ============================================ */

/* Warning alert */
.alert-theme-warning {
    background-color: #fffbeb; /* amber-50 */
    color: #92400e; /* amber-800 */
}
.dark .alert-theme-warning {
    background-color: rgba(180, 83, 9, 0.2); /* amber-700/20 */
    color: #fcd34d; /* amber-300 */
}

/* Info alert */
.alert-theme-info {
    background-color: #eff6ff; /* blue-50 */
    border-color: #bfdbfe; /* blue-200 */
    color: #1e40af; /* blue-800 */
}
.dark .alert-theme-info {
    background-color: rgba(30, 58, 138, 0.3); /* blue-900/30 */
    border-color: #1d4ed8; /* blue-700 */
    color: #93c5fd; /* blue-300 */
}

/* Purple text */
.text-theme-purple {
    color: #7c3aed; /* purple-600 */
}
.dark .text-theme-purple {
    color: #a78bfa; /* purple-400 */
}

/* Icon button - success/restore variant */
.icon-btn-theme-success:hover {
    color: #16a34a;
    background-color: #f0fdf4;
}
.dark .icon-btn-theme-success:hover {
    color: #60a5fa; /* blue-400 for restore */
    background-color: rgba(51, 65, 85, 0.5);
}

/* ============================================
   DIGITAL HUB DARK THEME STYLES
   ============================================ */

/* Main app background - hub style gradient */
.bg-hub-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

/* Background pattern overlay */
.bg-hub-pattern {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Grid overlay */
.bg-hub-grid {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Light mode background */
.bg-hub-light {
    background: linear-gradient(135deg, #e9eef4 0%, #dbe2eb 50%, #e2e8f0 100%);
}

/* Light mode background pattern overlay */
.bg-hub-pattern-light {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Light mode grid overlay */
.bg-hub-grid-light {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Glassmorphism card - hub style */
.card-hub {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card-hub:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Elevated card with stronger inner glow */
.card-hub-elevated {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 20px rgba(0, 0, 0, 0.3);
}

.card-hub-elevated:hover {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Hub card with subtle glow on hover */
.card-hub-glow {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hub-glow:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
                0 0 30px rgba(59, 130, 246, 0.15);
}

/* Hub style input */
.input-hub {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    transition: all 0.3s ease;
}

.input-hub:focus {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    outline: none;
}

.input-hub::placeholder {
    color: #64748b;
}

/* Hub style button */
.btn-hub-primary {
    background: linear-gradient(to right, #3b82f6, #6366f1);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-hub-primary:hover {
    background: linear-gradient(to right, #2563eb, #4f46e5);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* Hub MenuBar style */
.menubar-hub {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Hub sidebar style */
.sidebar-hub {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hub modal style */
.modal-hub {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Hub dropdown/menu style */
.dropdown-hub {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Hub table styles */
.table-hub-header {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-hub-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table-hub-row:hover {
    background: rgba(51, 65, 85, 0.5);
}

/* Hub text colors */
.text-hub-primary {
    color: #ffffff; /* Pure white for better contrast */
}

.text-hub-secondary {
    color: #94a3b8;
}

.text-hub-muted {
    color: #64748b;
}

.text-hub-accent {
    color: #818cf8; /* indigo-400 - consistent accent */
}

/* Hub accent colors - standardized indigo palette */
.bg-hub-accent {
    background: linear-gradient(to right, #6366f1, #818cf8); /* indigo-500 to indigo-400 */
}

.border-hub-accent {
    border-color: #6366f1; /* indigo-500 */
}

.border-hub-accent-subtle {
    border-color: rgba(99, 102, 241, 0.3); /* indigo-500/30 */
}

/* Hub border colors */
.border-hub {
    border-color: rgba(255, 255, 255, 0.1);
}

.border-hub-light {
    border-color: rgba(255, 255, 255, 0.05);
}

/* Hub divider - enhanced gradient */
.divider-hub {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 80%, transparent 100%);
    height: 1px;
}

/* Accented divider with indigo glow */
.divider-hub-accent {
    background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.2) 20%, rgba(99, 102, 241, 0.4) 50%, rgba(99, 102, 241, 0.2) 80%, transparent 100%);
    height: 1px;
}

/* Section divider with more prominence */
.divider-hub-section {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 90%, transparent 100%);
    height: 2px;
    margin: 1rem 0;
}

/* Update existing dark theme backgrounds to use hub style */
.dark .bg-theme-primary {
    background-color: transparent;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
}

.dark .bg-theme-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .bg-theme-elevated {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.99));
}

.dark .bg-theme-secondary {
    background: rgba(51, 65, 85, 0.6);
}

.dark .bg-theme-tertiary {
    background: rgba(71, 85, 105, 0.5);
}

.dark .modal-content-theme {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

.dark .dropdown-theme {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark .header-theme {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .sidebar-theme {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .input-theme {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.dark .input-theme:focus {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.dark .select-theme {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.dark .table-header-theme {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.9));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .table-row-theme {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dark .table-row-theme:hover {
    background: rgba(51, 65, 85, 0.5);
}

/* ============================================
   DATE INPUT DARK MODE STYLING
   ============================================ */

/* Style the date input itself - force dark color scheme */
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"],
.dark input[type="month"],
.dark input[type="week"] {
    color-scheme: dark;
    color: #f1f5f9;
}

/* WebKit-based browsers (Chrome, Safari, Edge) - Calendar Icon */
/* Full invert + brightness boost for maximum visibility */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="month"]::-webkit-calendar-picker-indicator,
.dark input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.dark input[type="time"]::-webkit-calendar-picker-indicator:hover,
.dark input[type="month"]::-webkit-calendar-picker-indicator:hover,
.dark input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(1) brightness(2);
}

/* Style the date picker popup - WebKit */
.dark input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.dark input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    color: #f1f5f9;
}

.dark input[type="date"]::-webkit-datetime-edit-text,
.dark input[type="datetime-local"]::-webkit-datetime-edit-text {
    color: #94a3b8;
}

.dark input[type="date"]::-webkit-datetime-edit-month-field,
.dark input[type="date"]::-webkit-datetime-edit-day-field,
.dark input[type="date"]::-webkit-datetime-edit-year-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
    color: #f1f5f9;
}

/* Clear button */
.dark input[type="date"]::-webkit-clear-button,
.dark input[type="datetime-local"]::-webkit-clear-button {
    filter: invert(1) brightness(1.5);
}

/* Inner spin button */
.dark input[type="date"]::-webkit-inner-spin-button,
.dark input[type="datetime-local"]::-webkit-inner-spin-button,
.dark input[type="time"]::-webkit-inner-spin-button {
    filter: invert(1) brightness(1.5);
}

/* Specific styling for input-theme and input-hub date inputs */
.dark .input-theme[type="date"],
.dark .input-theme[type="datetime-local"],
.dark .input-theme[type="time"],
.dark .input-hub[type="date"],
.dark .input-hub[type="datetime-local"],
.dark .input-hub[type="time"] {
    color-scheme: dark;
    color: #f1f5f9;
}

.dark .input-theme[type="date"]::-webkit-calendar-picker-indicator,
.dark .input-theme[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark .input-theme[type="time"]::-webkit-calendar-picker-indicator,
.dark .input-hub[type="date"]::-webkit-calendar-picker-indicator,
.dark .input-hub[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark .input-hub[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.5);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.dark .input-theme[type="date"]::-webkit-calendar-picker-indicator:hover,
.dark .input-theme[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.dark .input-theme[type="time"]::-webkit-calendar-picker-indicator:hover,
.dark .input-hub[type="date"]::-webkit-calendar-picker-indicator:hover,
.dark .input-hub[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.dark .input-hub[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(1) brightness(2);
}

/* ============================================
   QUILL EDITOR DARK MODE STYLING
   ============================================ */

/* Quill toolbar buttons in dark mode */
.dark .ql-toolbar button {
    color: #94a3b8 !important;
}

.dark .ql-toolbar button:hover {
    color: #f1f5f9 !important;
}

.dark .ql-toolbar button.ql-active {
    color: #60a5fa !important;
}

/* Quill toolbar SVG icons */
.dark .ql-toolbar button svg,
.dark .ql-toolbar .ql-picker-label svg {
    stroke: #94a3b8 !important;
}

.dark .ql-toolbar button:hover svg,
.dark .ql-toolbar .ql-picker-label:hover svg {
    stroke: #f1f5f9 !important;
}

.dark .ql-toolbar button.ql-active svg {
    stroke: #60a5fa !important;
}

/* Quill toolbar fill-based icons (color picker, etc.) */
.dark .ql-toolbar .ql-stroke {
    stroke: #94a3b8 !important;
}

.dark .ql-toolbar .ql-fill {
    fill: #94a3b8 !important;
}

.dark .ql-toolbar button:hover .ql-stroke,
.dark .ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: #f1f5f9 !important;
}

.dark .ql-toolbar button:hover .ql-fill,
.dark .ql-toolbar .ql-picker-label:hover .ql-fill {
    fill: #f1f5f9 !important;
}

.dark .ql-toolbar button.ql-active .ql-stroke {
    stroke: #60a5fa !important;
}

.dark .ql-toolbar button.ql-active .ql-fill {
    fill: #60a5fa !important;
}

/* Quill picker dropdown */
.dark .ql-picker {
    color: #94a3b8 !important;
}

.dark .ql-picker-label {
    color: #94a3b8 !important;
}

.dark .ql-picker-label:hover {
    color: #f1f5f9 !important;
}

.dark .ql-picker-options {
    background: rgba(15, 15, 25, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.dark .ql-picker-item {
    color: #94a3b8 !important;
}

.dark .ql-picker-item:hover {
    color: #f1f5f9 !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.dark .ql-picker-item.ql-selected {
    color: #60a5fa !important;
}

/* Quill container and editor */
.dark .ql-container {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .ql-toolbar {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .ql-editor {
    color: #e2e8f0 !important;
}

.dark .ql-editor.ql-blank::before {
    color: #64748b !important;
}

/* Quill snow theme specific */
.dark .ql-snow .ql-stroke {
    stroke: #94a3b8 !important;
}

.dark .ql-snow .ql-fill,
.dark .ql-snow .ql-stroke.ql-fill {
    fill: #94a3b8 !important;
}

.dark .ql-snow .ql-picker {
    color: #94a3b8 !important;
}

.dark .ql-snow .ql-picker-options {
    background: rgba(15, 15, 25, 0.98) !important;
}

.dark .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.dark .ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   CUSTOM SCROLLBAR STYLING
   ============================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
.dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.dark ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 5px;
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.5);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.6);
    background-clip: padding-box;
}

.dark ::-webkit-scrollbar-thumb:active {
    background: rgba(148, 163, 184, 0.8);
    background-clip: padding-box;
}

.dark ::-webkit-scrollbar-corner {
    background: rgba(15, 23, 42, 0.5);
}

/* Firefox */
.dark * {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.5) rgba(15, 23, 42, 0.5);
}

/* Thin scrollbar variant */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
}

/* ============================================
   TEXT SELECTION STYLING
   ============================================ */

.dark ::selection {
    background: rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

.dark ::-moz-selection {
    background: rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

/* Input/textarea selection */
.dark input::selection,
.dark textarea::selection {
    background: rgba(99, 102, 241, 0.5);
    color: #ffffff;
}

/* ============================================
   LOADING & SKELETON STATES
   ============================================ */

/* Skeleton loading animation */
@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

/* Light mode skeleton */
.skeleton-hub {
    background: linear-gradient(90deg,
        #e2e8f0 0%,
        #f1f5f9 50%,
        #e2e8f0 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Dark mode skeleton */
.dark .skeleton-hub {
    background: linear-gradient(90deg,
        rgba(51, 65, 85, 0.3) 0%,
        rgba(71, 85, 105, 0.4) 50%,
        rgba(51, 65, 85, 0.3) 100%);
    background-size: 200% 100%;
}

/* Shimmer effect */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Light mode shimmer */
.skeleton-hub-shimmer {
    background: linear-gradient(90deg,
        #e2e8f0 0%,
        #ffffff 25%,
        #e2e8f0 50%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Dark mode shimmer */
.dark .skeleton-hub-shimmer {
    background: linear-gradient(90deg,
        rgba(51, 65, 85, 0.3) 0%,
        rgba(100, 116, 139, 0.3) 25%,
        rgba(51, 65, 85, 0.3) 50%);
    background-size: 200% 100%;
}

/* Loading spinner - Light mode */
.spinner-hub {
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Loading spinner - Dark mode */
.dark .spinner-hub {
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #6366f1;
}

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

/* ============================================
   DISABLED STATES
   ============================================ */

/* Light mode disabled states */
.disabled-hub,
[disabled],
:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3af !important;
    cursor: not-allowed;
}

input:disabled::placeholder,
textarea:disabled::placeholder {
    color: #cbd5e1 !important;
}

/* Disabled button specific - light mode */
button:disabled {
    background: #e2e8f0 !important;
    color: #94a3af !important;
    box-shadow: none !important;
}

/* Dark mode disabled states */
.dark .disabled-hub,
.dark [disabled],
.dark :disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled,
.dark button:disabled {
    background: rgba(51, 65, 85, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #64748b !important;
    cursor: not-allowed;
}

.dark input:disabled::placeholder,
.dark textarea:disabled::placeholder {
    color: #475569 !important;
}

/* Disabled button specific - dark mode */
.dark button:disabled {
    background: rgba(51, 65, 85, 0.4) !important;
    color: #64748b !important;
    box-shadow: none !important;
}

/* ============================================
   ENHANCED SHADOWS FOR DARK MODE
   Modern, slick shadows with subtle blue glow
   ============================================ */

/* Ambient shadow for elevated elements */
.shadow-hub-ambient {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(0, 0, 0, 0.1);
}

/* Glow shadow for interactive elements */
.shadow-hub-glow {
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.2),
        0 4px 15px rgba(99, 102, 241, 0.15),
        0 0 30px rgba(99, 102, 241, 0.1);
}

/* Deep shadow for modals/dropdowns */
.shadow-hub-deep {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 10px 40px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 0, 0, 0.2);
}

/* Card shadow with subtle blue glow for modern feel */
.dark .shadow-card-modern {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(59, 130, 246, 0.03);
}

/* Hover state for cards - subtle lift effect */
.dark .shadow-card-hover {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(59, 130, 246, 0.06);
}

/* Focus ring with glow for accessibility */
.dark .focus-glow:focus {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(59, 130, 246, 0.4),
        0 0 16px rgba(59, 130, 246, 0.2);
}

/* Button glow on hover */
.dark .btn-glow:hover {
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.3),
        0 4px 12px rgba(59, 130, 246, 0.2),
        0 0 20px rgba(59, 130, 246, 0.1);
}

/* Subtle inset shadow */
.shadow-hub-inset {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* ============================================
   HOVER STATE ENHANCEMENTS
   ============================================ */

/* Interactive list item - Light mode */
.hover-hub-item {
    transition: all 0.2s ease;
}

.hover-hub-item:hover {
    background: #f1f5f9; /* slate-100 */
    transform: translateX(2px);
}

.dark .hover-hub-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
}

/* Button hover glow - Light mode */
.hover-hub-glow:hover {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.dark .hover-hub-glow:hover {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}

/* Card hover lift - Light mode */
.hover-hub-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.dark .hover-hub-lift:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* Link hover effect - Light mode */
.hover-hub-link:hover {
    color: #2563eb; /* blue-600 */
    text-decoration-color: rgba(37, 99, 235, 0.5);
}

.dark .hover-hub-link:hover {
    color: #818cf8;
    text-decoration-color: rgba(129, 140, 248, 0.5);
}

/* Button transition utility */
.btn-transition {
    transition: all 0.15s ease;
}

.btn-transition:hover {
    transform: translateY(-1px);
}

.btn-transition:active {
    transform: translateY(0);
}

/* ============================================
   TOOLTIP STYLING
   ============================================ */

/* Light mode tooltip */
.tooltip-hub {
    background: #1f2937;
    border: 1px solid #374151;
    color: #f9fafb;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Dark mode tooltip */
.dark .tooltip-hub {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Light mode tooltip arrow */
.tooltip-hub::after {
    border-color: #1f2937 transparent transparent transparent;
}

/* Dark mode tooltip arrow */
.dark .tooltip-hub::after {
    border-color: rgba(30, 41, 59, 0.98) transparent transparent transparent;
}

/* ============================================
   GRADIENT ACCENT UTILITIES
   ============================================ */

/* Primary gradient - Blue accent */
.gradient-accent-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Secondary gradient - Indigo accent */
.gradient-accent-secondary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* Success gradient */
.gradient-accent-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* Warning gradient */
.gradient-accent-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Error gradient */
.gradient-accent-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Subtle gradient backgrounds for cards */
.gradient-card-light {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.dark .gradient-card-light {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
}

/* Accent border with gradient */
.gradient-border-accent {
    border-image: linear-gradient(135deg, #3b82f6, #6366f1) 1;
}

/* Text gradient */
.gradient-text-accent {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   TRANSITION UTILITIES
   ============================================ */

.transition-hub {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-hub-slow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-hub-fast {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   PROFESSIONAL MODE ENHANCEMENTS
   Monday.com / ClickUp / Linear Inspired
   ============================================ */

/* Enhanced Surface Hierarchy - 4 distinct levels */
/* Light mode surface hierarchy */
.surface-level-0 {
    background: #f8fafc; /* slate-50 - app background */
}

.surface-level-1 {
    background: #ffffff;
    border: 1px solid #e2e8f0; /* slate-200 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.surface-level-2 {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.surface-level-3 {
    background: #ffffff;
    border: 1px solid #cbd5e1; /* slate-300 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Dark mode surface hierarchy */
.dark .surface-level-0 {
    background: linear-gradient(180deg, #0d1117 0%, #010409 100%);
}

.dark .surface-level-1 {
    background: rgba(22, 27, 34, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dark .surface-level-2 {
    background: rgba(33, 38, 45, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 0 1px rgba(255, 255, 255, 0.1);
}

.dark .surface-level-3 {
    background: rgba(48, 54, 61, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Professional Badge Styles with Subtle Glows */
.dark .badge-pro-success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.1);
}

.dark .badge-pro-warning {
    background: rgba(234, 179, 8, 0.12);
    color: #fcd34d;
    border: 1px solid rgba(234, 179, 8, 0.2);
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.08);
}

.dark .badge-pro-error {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.08);
}

.dark .badge-pro-info {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.08);
}

.dark .badge-pro-neutral {
    background: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

/* Light mode badge variants */
.badge-pro-success {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-pro-warning {
    background: rgba(234, 179, 8, 0.1);
    color: #a16207;
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.badge-pro-error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-pro-info {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-pro-neutral {
    background: rgba(107, 114, 128, 0.1);
    color: #4b5563;
    border: 1px solid rgba(107, 114, 128, 0.15);
}

/* Enhanced Focus Ring Styling (Linear/ClickUp style) */
.dark .focus-ring-pro:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.4),
        0 0 0 4px rgba(99, 102, 241, 0.1),
        0 0 20px rgba(99, 102, 241, 0.15);
}

.focus-ring-pro:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.3),
        0 0 0 4px rgba(59, 130, 246, 0.08);
}

/* Professional Table Styling */
.dark .table-pro {
    background: transparent;
}

.dark .table-pro thead {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dark .table-pro th {
    color: #64748b;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.dark .table-pro tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.1s ease;
}

.dark .table-pro tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.dark .table-pro tbody tr.selected {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
}

/* Light mode table */
.table-pro thead {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.table-pro th {
    color: #64748b;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.table-pro tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s ease;
}

.table-pro tbody tr:hover {
    background: #f8fafc;
}

.table-pro tbody tr.selected {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Subtle Border Classes */
.dark .border-subtle {
    border-color: rgba(255, 255, 255, 0.05);
}

.dark .border-interactive {
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .border-active {
    border-color: rgba(255, 255, 255, 0.15);
}

.border-subtle {
    border-color: #f1f5f9;
}

.border-interactive {
    border-color: #e2e8f0;
}

.border-active {
    border-color: #cbd5e1;
}

/* Select Dropdown Options Dark Mode Fix */
.dark select option {
    background-color: #1e293b;
    color: #e2e8f0;
}

.dark select option:hover,
.dark select option:focus {
    background-color: #334155;
}

.dark select option:checked {
    background-color: #3b82f6;
    color: white;
}

/* Improved Hover States */
.dark .hover-pro:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dark .hover-pro-interactive:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.hover-pro:hover {
    background: rgba(0, 0, 0, 0.02);
}

.hover-pro-interactive:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: #d1d5db;
}

/* Ghost Button Professional */
.dark .btn-ghost-pro {
    background: transparent;
    color: #94a3b8;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.dark .btn-ghost-pro:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .btn-ghost-pro:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

.btn-ghost-pro {
    background: transparent;
    color: #64748b;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.btn-ghost-pro:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1e293b;
    border-color: #e2e8f0;
}

.btn-ghost-pro:active {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(0.98);
}

/* Improved Icon Button Styling */
.dark .icon-btn-pro {
    color: #64748b;
    background: transparent;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.dark .icon-btn-pro:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
}

.dark .icon-btn-pro:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.95);
}

.dark .icon-btn-pro.danger:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
}

.icon-btn-pro {
    color: #64748b;
    background: transparent;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.icon-btn-pro:hover {
    color: #1e293b;
    background: #f1f5f9;
}

.icon-btn-pro:active {
    background: #e2e8f0;
    transform: scale(0.95);
}

.icon-btn-pro.danger:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* Card Professional Styling */
.dark .card-pro {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.dark .card-pro:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.card-pro {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.card-pro:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Selectable Item with Left Accent */
.dark .selectable-item {
    position: relative;
    transition: all 0.15s ease;
}

.dark .selectable-item.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #6366f1, #818cf8);
    border-radius: 0 2px 2px 0;
}

.dark .selectable-item.selected {
    background: rgba(99, 102, 241, 0.06);
}

.selectable-item {
    position: relative;
    transition: all 0.15s ease;
}

.selectable-item.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #3b82f6, #60a5fa);
    border-radius: 0 2px 2px 0;
}

.selectable-item.selected {
    background: rgba(59, 130, 246, 0.05);
}

/* Input Professional Styling */
.dark .input-pro {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.dark .input-pro::placeholder {
    color: #64748b;
}

.dark .input-pro:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.dark .input-pro:focus {
    background: rgba(15, 23, 42, 0.7);
    border-color: #6366f1;
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.15),
        0 0 20px rgba(99, 102, 241, 0.1);
    outline: none;
}

.input-pro {
    background: white;
    border: 1px solid #d1d5db;
    color: #1e293b;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.input-pro::placeholder {
    color: #9ca3af;
}

.input-pro:hover {
    border-color: #9ca3af;
}

.input-pro:focus {
    border-color: #3b82f6;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.1),
        0 0 15px rgba(59, 130, 246, 0.05);
    outline: none;
}

/* Dropdown Professional */
.dark .dropdown-pro {
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 1px rgba(255, 255, 255, 0.1);
}

.dark .dropdown-pro-item {
    color: #94a3b8;
    transition: all 0.1s ease;
}

.dark .dropdown-pro-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

.dark .dropdown-pro-item.active {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
}

.dropdown-pro {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.dropdown-pro-item {
    color: #475569;
    transition: all 0.1s ease;
}

.dropdown-pro-item:hover {
    background: #f8fafc;
    color: #1e293b;
}

.dropdown-pro-item.active {
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
}

/* Modal Professional */
.dark .modal-pro-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dark .modal-pro-content {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(255, 255, 255, 0.1);
}

.modal-pro-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.modal-pro-content {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
}

/* Status Dot Animations */
@keyframes status-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 currentColor;
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px transparent;
    }
}

.status-dot-animated {
    animation: status-pulse 2s ease-in-out infinite;
}

/* Improved RAG Status Colors for Dark Mode */
.dark .rag-green {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.dark .rag-amber {
    background: rgba(234, 179, 8, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.dark .rag-red {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.rag-green {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.rag-amber {
    background: #fef3c7;
    color: #a16207;
    border: 1px solid #fcd34d;
}

.rag-red {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

/* Long Session Comfort - Reduced Blue Light Option */
.dark.night-mode {
    --accent-color: #a78bfa;
    --accent-hover: #c4b5fd;
}

.dark.night-mode .btn-theme-primary {
    background: linear-gradient(to right, #7c3aed, #a78bfa);
}

.dark.night-mode .text-theme-accent {
    color: #a78bfa;
}

/* Smoother page transitions */
.page-transition {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-transition-enter {
    opacity: 0;
    transform: translateY(8px);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   PHASE 4: PREMIUM POLISH & MICRO-INTERACTIONS
   ========================================== */

/* --- Micro-Interaction Animations --- */

/* Button press effect */
.btn-press {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-press:active {
    transform: scale(0.97);
}

/* Checkbox animation */
@keyframes checkbox-check {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.checkbox-animated:checked::before {
    animation: checkbox-check 0.2s ease-out;
}

/* Toggle switch animation */
@keyframes toggle-slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

.toggle-animated {
    transition: background-color 0.2s ease;
}

.toggle-animated .toggle-knob {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ripple effect for buttons */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
}

.btn-ripple:active::after {
    animation: ripple 0.4s ease-out;
}

/* Icon rotation animation */
@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.icon-spin {
    animation: icon-spin 1s linear infinite;
}

.icon-spin-slow {
    animation: icon-spin 2s linear infinite;
}

/* Bounce animation for notifications */
@keyframes bounce-gentle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.animate-bounce-gentle {
    animation: bounce-gentle 0.5s ease-in-out;
}

/* --- Card Hover Effects --- */

/* Light mode card hover - subtle lift */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
    border-color: #c7d2fe;
}

.dark .card-hover:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

/* Card with glow effect */
.card-glow {
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.card-glow:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(99, 102, 241, 0.1),
        0 0 20px rgba(99, 102, 241, 0.08);
}

.dark .card-glow:hover {
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(99, 102, 241, 0.3),
        0 0 30px rgba(99, 102, 241, 0.15);
}

/* Interactive card with border highlight */
.card-interactive {
    position: relative;
    transition: all 0.2s ease;
}

.card-interactive::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent 0%, transparent 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-interactive:hover::before {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    opacity: 1;
}

/* Row hover for tables */
.row-hover {
    transition: background-color 0.15s ease;
}

.row-hover:hover {
    background-color: #f8fafc;
}

.dark .row-hover:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* --- Empty State Styling --- */

/* Empty state container */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    color: #94a3b8;
    opacity: 0.6;
}

.dark .empty-state-icon {
    color: #64748b;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.dark .empty-state-title {
    color: #e2e8f0;
}

.empty-state-description {
    font-size: 0.875rem;
    color: #6b7280;
    max-width: 20rem;
    margin-bottom: 1.5rem;
}

.dark .empty-state-description {
    color: #94a3b8;
}

.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.empty-state-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

/* Empty state illustration placeholder */
.empty-state-illustration {
    width: 10rem;
    height: 8rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark .empty-state-illustration {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.5) 0%, rgba(30, 41, 59, 0.5) 100%);
}

/* --- Focus & Accessibility Enhancements --- */

/* Improved focus visible ring */
.focus-ring-theme:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1;
}

.dark .focus-ring-theme:focus-visible {
    box-shadow: 0 0 0 2px #1e293b, 0 0 0 4px #818cf8;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: #4f46e5;
    color: #ffffff;
    font-weight: 500;
    border-radius: 0 0 0.5rem 0.5rem;
    z-index: 9999;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* --- Polished Input States --- */

/* Input with icon */
.input-with-icon {
    position: relative;
}

.input-with-icon input {
    padding-left: 2.5rem;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    transition: color 0.2s ease;
}

.input-with-icon input:focus + .input-icon,
.input-with-icon input:focus ~ .input-icon {
    color: #6366f1;
}

.dark .input-with-icon .input-icon {
    color: #64748b;
}

.dark .input-with-icon input:focus + .input-icon,
.dark .input-with-icon input:focus ~ .input-icon {
    color: #818cf8;
}

/* Input error state */
.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1);
}

.input-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Input success state */
.input-success {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1);
}

.input-success:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* --- Final Consistency Classes --- */

/* Text color consistency */
.text-theme-heading {
    color: #111827;
}

.dark .text-theme-heading {
    color: #f1f5f9;
}

.text-theme-body {
    color: #374151;
}

.dark .text-theme-body {
    color: #cbd5e1;
}

.text-theme-caption {
    color: #6b7280;
}

.dark .text-theme-caption {
    color: #94a3b8;
}

/* Border consistency */
.border-theme-light {
    border-color: #f1f5f9;
}

.dark .border-theme-light {
    border-color: rgba(255, 255, 255, 0.05);
}

.border-theme-medium {
    border-color: #e2e8f0;
}

.dark .border-theme-medium {
    border-color: rgba(255, 255, 255, 0.1);
}

.border-theme-strong {
    border-color: #cbd5e1;
}

.dark .border-theme-strong {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Background consistency */
.bg-theme-page {
    background-color: #f8fafc;
}

.dark .bg-theme-page {
    background-color: #0f172a;
}

.bg-theme-card {
    background-color: #ffffff;
}

.dark .bg-theme-card {
    background-color: #1e293b;
}

.bg-theme-input {
    background-color: #ffffff;
}

.dark .bg-theme-input {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Shadow consistency */
.shadow-theme-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .shadow-theme-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.shadow-theme-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.dark .shadow-theme-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.shadow-theme-lg {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.05);
}

.dark .shadow-theme-lg {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 6px 10px rgba(0, 0, 0, 0.3);
}

/* Divider styling */
.divider-theme {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e2e8f0 20%, #e2e8f0 80%, transparent 100%);
}

.dark .divider-theme {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent 100%);
}

/* Selection styling */
::selection {
    background-color: rgba(99, 102, 241, 0.2);
    color: inherit;
}

.dark ::selection {
    background-color: rgba(129, 140, 248, 0.3);
}

/* Scrollbar styling - light mode */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Scrollbar styling - dark mode */
.dark ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ==========================================
   STATUS SIDEBAR CARDS - Dark Mode Enhanced
   ========================================== */

/* Base sidebar card with left border */
.sidebar-card-red {
    border-left-color: #ef4444;
}
.dark .sidebar-card-red {
    border-left-color: #f87171;
    background-color: rgba(239, 68, 68, 0.1);
}

.sidebar-card-yellow {
    border-left-color: #eab308;
}
.dark .sidebar-card-yellow {
    border-left-color: #fbbf24;
    background-color: rgba(234, 179, 8, 0.1);
}

.sidebar-card-green {
    border-left-color: #22c55e;
}
.dark .sidebar-card-green {
    border-left-color: #4ade80;
    background-color: rgba(34, 197, 94, 0.1);
}

.sidebar-card-blue {
    border-left-color: #3b82f6;
}
.dark .sidebar-card-blue {
    border-left-color: #60a5fa;
    background-color: rgba(59, 130, 246, 0.1);
}

.sidebar-card-orange {
    border-left-color: #f97316;
}
.dark .sidebar-card-orange {
    border-left-color: #fb923c;
    background-color: rgba(249, 115, 22, 0.1);
}

.sidebar-card-red-dark {
    border-left-color: #b91c1c;
}
.dark .sidebar-card-red-dark {
    border-left-color: #ef4444;
    background-color: rgba(185, 28, 28, 0.15);
}

.sidebar-card-red-medium {
    border-left-color: #dc2626;
}
.dark .sidebar-card-red-medium {
    border-left-color: #f87171;
    background-color: rgba(220, 38, 38, 0.12);
}

/* ============================================
   NAVIGATION SIDEBAR
   ============================================
   Collapsible, resizable sidebar for main app navigation
   Supports keyboard shortcut (Cmd/Ctrl + B) to toggle
*/

.nav-sidebar {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.nav-sidebar-item {
    position: relative;
}

/* Active indicator animation */
.nav-sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--color-accent-primary);
    border-radius: 0 2px 2px 0;
    animation: nav-indicator-in 0.2s ease-out;
}

@keyframes nav-indicator-in {
    from {
        opacity: 0;
        transform: translateY(-50%) scaleY(0);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scaleY(1);
    }
}

/* Subtab container animation */
.nav-subtabs {
    animation: subtabs-expand 0.2s ease-out;
}

@keyframes subtabs-expand {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Collapsed state icon-only styles */
.nav-sidebar[style*="width: 56px"] .nav-sidebar-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Tooltip for collapsed state */
.nav-sidebar[style*="width: 56px"] .nav-sidebar-item[title]::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background: #1e293b;
    color: white;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-sidebar[style*="width: 56px"] .nav-sidebar-item[title]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Light mode tooltip */
.nav-sidebar[style*="width: 56px"] .nav-sidebar-item[title]::after {
    background: #1e293b;
    color: white;
}

/* App layout with sidebar */
.app-layout-with-sidebar {
    display: flex;
    min-height: calc(100vh - var(--menubar-height, 48px));
}

.app-main-content {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* Transition when sidebar collapses/expands */
.app-main-content {
    transition: margin-left 0.2s ease-out;
}

/* Scrollbar styling for sidebar */
.nav-sidebar::-webkit-scrollbar {
    width: 4px;
}

.nav-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.nav-sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 2px;
}

.nav-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

.dark .nav-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.dark .nav-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}