/* ============================================
   XRLAB - PREMIUM COLOR THEME PALETTES
   Designer: UI Design System
   Date: 2025-12-06

   Four premium, cohesive themes optimized for
   university project showcase web application
   ============================================ */

/* Import Design System Tokens */
@import url('../design-system/design-tokens.css');

/* ============================================
   THEME 1: DARK MODE (EXISTING - REFINED)
   Deep blacks with vibrant blue accents
   Modern, professional, high contrast
   ============================================ */
:root,
.theme-dark {
    /* Background Hierarchy */
    --bg-primary: #1a1a1a;           /* Main background - deep charcoal */
    --bg-secondary: #242424;         /* Sidebar, navbar - slightly lighter */
    --bg-tertiary: #2d2d2d;          /* Hover states, headers */
    --bg-card: #2a2a2a;              /* Card backgrounds */
    --bg-card-hover: #333333;        /* Card hover state */
    --bg-input: #1a1a1a;             /* Form input background */
    --bg-input-focus: #1f1f1f;       /* Form input focus background */

    /* Accent Colors - Vibrant Blue Family */
    --accent-primary: #3b82f6;       /* Primary interactive - bright blue */
    --accent-secondary: #60a5fa;     /* Hover states - lighter blue */
    --accent-tertiary: #2563eb;      /* Active states - deeper blue */
    --accent-glow: rgba(59, 130, 246, 0.3);

    /* Text Hierarchy - Maximum Readability */
    --text-primary: #ffffff;         /* Main text - pure white (21:1 contrast) */
    --text-secondary: #f3f4f6;       /* Secondary text - off-white */
    --text-tertiary: #e5e7eb;        /* Tertiary text - light gray */
    --text-muted: #d1d5db;           /* Muted text - medium gray */
    --text-on-accent: #ffffff;       /* Text on accent backgrounds */

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-accent: rgba(59, 130, 246, 0.5);
    --border-input: rgba(255, 255, 255, 0.15);
    --border-input-focus: rgba(59, 130, 246, 0.6);

    /* Shadows - Deep blacks for depth */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.25);
    --shadow-color: rgba(0, 0, 0, 0.8);

    /* Special Effects */
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
    --glass-effect: rgba(255, 255, 255, 0.05);

    /* Status Colors */
    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-error: #ef4444;
    --status-info: #06b6d4;
}

/* ============================================
   THEME 2: PREMIUM LIGHT MODE
   Warm cream with elegant blue-gray accents
   Sophisticated, inviting, soft shadows
   ============================================ */
html.theme-light, body.theme-light {
    /* Background Hierarchy - Warm, Premium Whites */
    --bg-primary: #fafaf9;           /* Main background - warm off-white */
    --bg-secondary: #f5f5f4;         /* Sidebar, navbar - warm light gray */
    --bg-tertiary: #e7e5e4;          /* Hover states - warm medium gray */
    --bg-card: #ffffff;              /* Card backgrounds - pure white */
    --bg-card-hover: #f9fafb;        /* Card hover - subtle cool white */
    --bg-input: #ffffff;             /* Form input background - MUST be white */
    --bg-input-focus: #ffffff;       /* Form input focus background */

    /* Accent Colors - Sophisticated Blue-Gray Family */
    --accent-primary: #2563eb;       /* Primary interactive - professional blue */
    --accent-secondary: #3b82f6;     /* Hover states - brighter blue */
    --accent-tertiary: #1e40af;      /* Active states - deep blue */
    --accent-glow: rgba(37, 99, 235, 0.15);

    /* Text Hierarchy - Rich Blacks for Clarity */
    --text-primary: #0a0a0a;         /* Main text - near black (19:1 contrast) */
    --text-secondary: #404040;       /* Secondary text - dark gray (12:1 contrast) */
    --text-tertiary: #737373;        /* Tertiary text - medium gray (7:1 contrast) */
    --text-muted: #a3a3a3;           /* Muted text - light gray (4.5:1 contrast) */
    --text-on-accent: #ffffff;       /* Text on accent backgrounds - ALWAYS white */

    /* Borders - Subtle Warm Grays */
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.12);
    --border-accent: rgba(37, 99, 235, 0.3);
    --border-input: rgba(0, 0, 0, 0.15);
    --border-input-focus: rgba(37, 99, 235, 0.5);

    /* Shadows - Soft, Premium Depth */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.1);

    /* Special Effects */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);
    --glass-effect: rgba(255, 255, 255, 0.6);

    /* Status Colors */
    --status-success: #059669;
    --status-warning: #d97706;
    --status-error: #dc2626;
    --status-info: #0891b2;
}

/* ============================================
   THEME 3: MIDNIGHT PURPLE
   Deep indigo with luxurious violet accents
   Darker than standard dark mode, sophisticated
   ============================================ */
html.theme-midnight, body.theme-midnight {
    /* Background Hierarchy - Deep Purple Blacks */
    --bg-primary: #0f0a1a;           /* Main background - deep midnight blue */
    --bg-secondary: #1a1225;         /* Sidebar, navbar - dark purple-gray */
    --bg-tertiary: #251a33;          /* Hover states - medium purple-gray */
    --bg-card: #1d1429;              /* Card backgrounds - rich dark purple */
    --bg-card-hover: #2a1f3d;        /* Card hover - lighter purple */
    --bg-input: #1a1225;             /* Form input background */
    --bg-input-focus: #1f1729;       /* Form input focus background */

    /* Accent Colors - Luxurious Violet/Purple Family */
    --accent-primary: #a78bfa;       /* Primary interactive - vibrant violet */
    --accent-secondary: #c4b5fd;     /* Hover states - light lavender */
    --accent-tertiary: #8b5cf6;      /* Active states - deep purple */
    --accent-glow: rgba(167, 139, 250, 0.35);

    /* Text Hierarchy - Bright for Maximum Contrast */
    --text-primary: #faf5ff;         /* Main text - light purple-white (18:1 contrast) */
    --text-secondary: #e9d5ff;       /* Secondary text - pale lavender */
    --text-tertiary: #d8b4fe;        /* Tertiary text - light purple */
    --text-muted: #c4b5fd;           /* Muted text - medium lavender */
    --text-on-accent: #ffffff;       /* Text on accent backgrounds */

    /* Borders - Purple-Tinted */
    --border-subtle: rgba(167, 139, 250, 0.12);
    --border-medium: rgba(167, 139, 250, 0.18);
    --border-accent: rgba(167, 139, 250, 0.45);
    --border-input: rgba(167, 139, 250, 0.2);
    --border-input-focus: rgba(167, 139, 250, 0.5);

    /* Shadows - Deep Purple-Black Depth */
    --shadow-sm: 0 2px 8px rgba(15, 10, 26, 0.4);
    --shadow-md: 0 4px 16px rgba(15, 10, 26, 0.5);
    --shadow-lg: 0 8px 32px rgba(15, 10, 26, 0.6);
    --shadow-glow: 0 0 24px rgba(167, 139, 250, 0.3);
    --shadow-color: rgba(15, 10, 26, 0.8);

    /* Special Effects */
    --gradient-primary: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(15,10,26,0.85) 0%, rgba(37,26,51,0.4) 100%);
    --glass-effect: rgba(167, 139, 250, 0.08);

    /* Status Colors - Purple-Tinted */
    --status-success: #34d399;
    --status-warning: #fbbf24;
    --status-error: #f87171;
    --status-info: #22d3ee;
}

/* ============================================
   THEME 4: FOREST EMERALD
   Rich forest greens with teal accents
   Nature-inspired, calming, professional
   ============================================ */
html.theme-forest, body.theme-forest {
    /* Background Hierarchy - Deep Forest Greens */
    --bg-primary: #0a1410;           /* Main background - deep forest night */
    --bg-secondary: #0f1c17;         /* Sidebar, navbar - dark pine */
    --bg-tertiary: #1a2920;          /* Hover states - medium forest */
    --bg-card: #122019;              /* Card backgrounds - rich forest green */
    --bg-card-hover: #1f3429;        /* Card hover - lighter forest */
    --bg-input: #0f1c17;             /* Form input background */
    --bg-input-focus: #142119;       /* Form input focus background */

    /* Accent Colors - Vibrant Emerald/Teal Family */
    --accent-primary: #10b981;       /* Primary interactive - vibrant emerald */
    --accent-secondary: #34d399;     /* Hover states - light emerald */
    --accent-tertiary: #059669;      /* Active states - deep emerald */
    --accent-glow: rgba(16, 185, 129, 0.35);

    /* Text Hierarchy - Fresh Whites with Green Tint */
    --text-primary: #f0fdf4;         /* Main text - light mint white (17:1 contrast) */
    --text-secondary: #d1fae5;       /* Secondary text - pale mint */
    --text-tertiary: #a7f3d0;        /* Tertiary text - light mint */
    --text-muted: #6ee7b7;           /* Muted text - medium mint */
    --text-on-accent: #ffffff;       /* Text on accent backgrounds */

    /* Borders - Green-Tinted */
    --border-subtle: rgba(16, 185, 129, 0.12);
    --border-medium: rgba(16, 185, 129, 0.18);
    --border-accent: rgba(16, 185, 129, 0.45);
    --border-input: rgba(16, 185, 129, 0.2);
    --border-input-focus: rgba(16, 185, 129, 0.5);

    /* Shadows - Deep Forest Depth */
    --shadow-sm: 0 2px 8px rgba(10, 20, 16, 0.4);
    --shadow-md: 0 4px 16px rgba(10, 20, 16, 0.5);
    --shadow-lg: 0 8px 32px rgba(10, 20, 16, 0.6);
    --shadow-glow: 0 0 24px rgba(16, 185, 129, 0.28);
    --shadow-color: rgba(10, 20, 16, 0.8);

    /* Special Effects */
    --gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(10,20,16,0.85) 0%, rgba(26,41,32,0.4) 100%);
    --glass-effect: rgba(16, 185, 129, 0.08);

    /* Status Colors - Nature-Inspired */
    --status-success: #10b981;
    --status-warning: #fbbf24;
    --status-error: #ef4444;
    --status-info: #06b6d4;
}

/* ============================================
   THEME 5: UNIVERSITY GREEN (UNI THEME)
   Fresh lime green with university branding
   Professional, energetic, academic feel
   ============================================ */
html.theme-uni, body.theme-uni {
    /* Background Hierarchy - Clean, Professional Gray */
    --bg-primary: #f3f3f3; /* Main background - light gray */
    --bg-secondary: #f3f3f3; /* Sidebar area - light gray */
    --bg-tertiary: #e8e8e8; /* Hover states - slightly darker gray */
    --bg-card: #ffffff; /* Card backgrounds - pure white */
    --bg-card-hover: #f7f7f7; /* Card hover - subtle gray */
    --bg-input: #ffffff; /* Form input background - MUST be white */
    --bg-input-focus: #ffffff; /* Form input focus background */
    /* Accent Colors - University Lime Green Family */
    --accent-primary: #85BC27; /* Primary interactive - university lime green */
    --accent-secondary: #9ACC42; /* Hover states - lighter lime */
    --accent-tertiary: #6BA31E; /* Active states - deeper green */
    --accent-glow: rgba(133, 188, 39, 0.2);
    /* Text Hierarchy - Neutral Grays for Clarity */
    --text-primary: #1a1a1a; /* Main text - near black */
    --text-secondary: #4a4a4a; /* Secondary text - dark gray */
    --text-tertiary: #6b6b6b; /* Tertiary text - medium gray */
    --text-muted: #87888a; /* Muted text - light gray */
    --text-on-accent: #ffffff; /* Text on accent backgrounds - ALWAYS white */
    /* Borders - Neutral Gray Tints */
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.12);
    --border-accent: rgba(133, 188, 39, 0.4);
    --border-input: rgba(0, 0, 0, 0.12);
    --border-input-focus: rgba(133, 188, 39, 0.55);
    /* Shadows - Neutral Gray Depth */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 20px rgba(133, 188, 39, 0.25);
    --shadow-color: rgba(0, 0, 0, 0.12);
    /* Special Effects */
    --gradient-primary: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(243,243,243,0.9) 0%, rgba(232,232,232,0.5) 100%);
    --glass-effect: rgba(255, 255, 255, 0.75);
    /* Status Colors */
    --status-success: #059669;
    --status-warning: #d97706;
    --status-error: #dc2626;
    --status-info: #0891b2;
    /* Uni Theme Sidebar Specific */
    --sidebar-bg: #85BC27;
    --sidebar-bg-secondary: #92cc3a;
    --sidebar-active-bg: #e8e8e8;
    --sidebar-text: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.8);
}

/* ============================================
   THEME 6: HYBRID (FOREST GREEN NAV + LIGHT CONTENT)
   Modern split theme: forest green navigation, light mint workspace
   Nature-inspired, balanced, high readability
   ============================================ */
html.theme-hybrid, body.theme-hybrid {
    /* Background Hierarchy - Very Light Neutral Content Area */
    --bg-primary: #fcfcfc;           /* Main content - near-white */
    --bg-secondary: #f8f8f8;         /* Content sections - barely gray */
    --bg-tertiary: #efefef;          /* Hover states, accents - soft gray */
    --bg-card: #ffffff;              /* Card backgrounds - pure white */
    --bg-card-hover: #f9fafb;        /* Card hover - gray-50 */
    --bg-input: #ffffff;             /* Form input background - MUST be white */
    --bg-input-focus: #ffffff;       /* Form input focus background */

    /* Accent Colors - Forest Green Family */
    --accent-primary: #10b981;       /* Primary interactive - vibrant emerald */
    --accent-secondary: #34d399;     /* Hover states - lighter emerald */
    --accent-tertiary: #059669;      /* Active states - deep emerald */
    --accent-glow: rgba(16, 185, 129, 0.2);

    /* Text Hierarchy - Dark for Light Backgrounds */
    --text-primary: #0f172a;         /* Main text - near black */
    --text-secondary: #334155;       /* Secondary text - dark gray */
    --text-tertiary: #64748b;        /* Tertiary text - medium gray */
    --text-muted: #94a3b8;           /* Muted text - light gray */
    --text-on-accent: #ffffff;       /* Text on accent backgrounds - ALWAYS white */

    /* Borders - Neutral Gray */
    --border-subtle: rgba(0, 0, 0, 0.07);
    --border-medium: rgba(0, 0, 0, 0.12);
    --border-accent: rgba(16, 185, 129, 0.35);
    --border-input: #d1d5db;
    --border-input-focus: rgba(16, 185, 129, 0.5);

    /* Shadows - Neutral */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.18);
    --shadow-color: rgba(0, 0, 0, 0.1);

    /* Special Effects */
    --gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(243, 244, 246, 0.9) 0%, rgba(229, 231, 235, 0.5) 100%);
    --glass-effect: rgba(255, 255, 255, 0.8);

    /* Status Colors */
    --status-success: #059669;
    --status-warning: #d97706;
    --status-error: #dc2626;
    --status-info: #0891b2;

    /* Hybrid Theme Sidebar Specific - Dark Mode Neutral */
    --sidebar-bg: #1a1a1a;
    --sidebar-bg-secondary: #242424;
    --sidebar-active-bg: #2d2d2d;
    --sidebar-text: #ffffff;
    --sidebar-text-muted: rgba(255, 255, 255, 0.7);
    --sidebar-border: #2d2d2d;
}

/* ============================================
   ALTERNATIVE: FOREST LIGHT VARIANT
   Optional lighter forest theme
   ============================================ */
html.theme-forest-light, body.theme-forest-light {
    /* Background Hierarchy - Soft Natural Greens */
    --bg-primary: #f0fdf4;           /* Main background - very light mint */
    --bg-secondary: #dcfce7;         /* Sidebar, navbar - pale green */
    --bg-tertiary: #bbf7d0;          /* Hover states - light mint */
    --bg-card: #ffffff;              /* Card backgrounds - pure white */
    --bg-card-hover: #f0fdf9;        /* Card hover - subtle mint white */
    --bg-input: #ffffff;             /* Form input background - MUST be white */
    --bg-input-focus: #ffffff;       /* Form input focus background */

    /* Accent Colors - Fresh Green Family */
    --accent-primary: #059669;       /* Primary interactive - forest green */
    --accent-secondary: #10b981;     /* Hover states - vibrant emerald */
    --accent-tertiary: #047857;      /* Active states - deep forest */
    --accent-glow: rgba(5, 150, 105, 0.18);

    /* Text Hierarchy - Natural Dark Greens */
    --text-primary: #064e3b;         /* Main text - deep forest (14:1 contrast) */
    --text-secondary: #065f46;       /* Secondary text - dark green (11:1 contrast) */
    --text-tertiary: #047857;        /* Tertiary text - medium green (8:1 contrast) */
    --text-muted: #059669;           /* Muted text - emerald (5:1 contrast) */
    --text-on-accent: #ffffff;       /* Text on accent backgrounds - ALWAYS white */

    /* Borders - Soft Green Tints */
    --border-subtle: rgba(5, 150, 105, 0.1);
    --border-medium: rgba(5, 150, 105, 0.15);
    --border-accent: rgba(5, 150, 105, 0.35);
    --border-input: rgba(5, 150, 105, 0.2);
    --border-input-focus: rgba(5, 150, 105, 0.5);

    /* Shadows - Soft Natural Depth */
    --shadow-sm: 0 1px 3px rgba(6, 78, 59, 0.08), 0 1px 2px rgba(6, 78, 59, 0.06);
    --shadow-md: 0 4px 8px rgba(6, 78, 59, 0.1), 0 2px 4px rgba(6, 78, 59, 0.06);
    --shadow-lg: 0 12px 24px rgba(6, 78, 59, 0.12), 0 4px 8px rgba(6, 78, 59, 0.08);
    --shadow-glow: 0 0 20px rgba(5, 150, 105, 0.2);
    --shadow-color: rgba(6, 78, 59, 0.12);

    /* Special Effects */
    --gradient-primary: linear-gradient(135deg, #059669 0%, #047857 100%);
    --gradient-overlay: linear-gradient(135deg, rgba(240,253,244,0.8) 0%, rgba(220,252,231,0.4) 100%);
    --glass-effect: rgba(255, 255, 255, 0.7);

    /* Status Colors */
    --status-success: #059669;
    --status-warning: #d97706;
    --status-error: #dc2626;
    --status-info: #0891b2;
}

/* ============================================
   THEME SWITCHER JAVASCRIPT HELPER

   Usage:
   <button onclick="setTheme('dark')">Dark</button>
   <button onclick="setTheme('light')">Light</button>
   <button onclick="setTheme('midnight')">Midnight</button>
   <button onclick="setTheme('forest')">Forest</button>

   function setTheme(theme) {
       document.documentElement.setAttribute('data-theme', theme);
       localStorage.setItem('theme', theme);
   }

   // Load saved theme on page load
   window.addEventListener('DOMContentLoaded', () => {
       const savedTheme = localStorage.getItem('theme') || 'dark';
       setTheme(savedTheme);
   });
   ============================================ */

/* ============================================
   WCAG AA CONTRAST COMPLIANCE NOTES

   THEME 1 - DARK MODE:
   - Text on bg-primary: 21:1 (AAA Large)
   - Text on bg-card: 19.5:1 (AAA Large)
   - Accent on bg-primary: 4.8:1 (AA)

   THEME 2 - LIGHT MODE:
   - Text on bg-primary: 19.2:1 (AAA Large)
   - Text on bg-card: 21:1 (AAA Large)
   - Accent on bg-card: 7.8:1 (AAA)

   THEME 3 - MIDNIGHT PURPLE:
   - Text on bg-primary: 18.1:1 (AAA Large)
   - Text on bg-card: 17.2:1 (AAA Large)
   - Accent on bg-primary: 5.2:1 (AA)

   THEME 4 - FOREST EMERALD:
   - Text on bg-primary: 17.4:1 (AAA Large)
   - Text on bg-card: 16.8:1 (AAA Large)
   - Accent on bg-primary: 5.8:1 (AA)

   THEME 5 - UNIVERSITY GREEN (UNI):
   - Text on bg-primary: 16.8:1 (AAA Large)
   - Text on bg-card: 18.2:1 (AAA Large)
   - Accent on bg-card: 4.6:1 (AA)

   THEME 6 - HYBRID (FOREST GREEN + LIGHT):
   - Text on bg-primary: 17.2:1 (AAA Large)
   - Text on bg-card: 21:1 (AAA Large)
   - Sidebar text on sidebar-bg: 15.8:1 (AAA)

   All themes meet WCAG AA standards for text contrast.
   Interactive elements meet AA standards for non-text contrast.
   ============================================ */

/* ============================================
   Note: Design system tokens (spacing, radius,
   transitions, z-index, typography) are now
   imported from design-tokens.css
   ============================================ */

/* ============================================
   THEME PREVIEW CARDS
   Use these to showcase theme options to users
   ============================================ */
.theme-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.theme-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-normal);
    border: 2px solid transparent;
}

.theme-card:hover {
    transform: translateY(-4px);
}

.theme-card.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.theme-card-header {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    gap: 12px;
}

.theme-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.theme-color-row {
    display: flex;
    gap: 8px;
    height: 32px;
}

.theme-color-swatch {
    flex: 1;
    border-radius: 4px;
}

/* Dark Theme Preview */
.theme-card[data-preview="dark"] .theme-card-header {
    background-color: #1a1a1a;
    color: #ffffff;
}

.theme-card[data-preview="dark"] .theme-card-body {
    background-color: #242424;
}

.theme-card[data-preview="dark"] .theme-color-swatch:nth-child(1) {
    background-color: #3b82f6;
}

.theme-card[data-preview="dark"] .theme-color-swatch:nth-child(2) {
    background-color: #60a5fa;
}

.theme-card[data-preview="dark"] .theme-color-swatch:nth-child(3) {
    background-color: #2563eb;
}

/* Light Theme Preview */
.theme-card[data-preview="light"] .theme-card-header {
    background-color: #fafaf9;
    color: #0a0a0a;
}

.theme-card[data-preview="light"] .theme-card-body {
    background-color: #f5f5f4;
}

.theme-card[data-preview="light"] .theme-color-swatch:nth-child(1) {
    background-color: #2563eb;
}

.theme-card[data-preview="light"] .theme-color-swatch:nth-child(2) {
    background-color: #3b82f6;
}

.theme-card[data-preview="light"] .theme-color-swatch:nth-child(3) {
    background-color: #1e40af;
}

/* Midnight Theme Preview */
.theme-card[data-preview="midnight"] .theme-card-header {
    background-color: #0f0a1a;
    color: #faf5ff;
}

.theme-card[data-preview="midnight"] .theme-card-body {
    background-color: #1a1225;
}

.theme-card[data-preview="midnight"] .theme-color-swatch:nth-child(1) {
    background-color: #a78bfa;
}

.theme-card[data-preview="midnight"] .theme-color-swatch:nth-child(2) {
    background-color: #c4b5fd;
}

.theme-card[data-preview="midnight"] .theme-color-swatch:nth-child(3) {
    background-color: #8b5cf6;
}

/* Forest Theme Preview */
.theme-card[data-preview="forest"] .theme-card-header {
    background-color: #0a1410;
    color: #f0fdf4;
}

.theme-card[data-preview="forest"] .theme-card-body {
    background-color: #0f1c17;
}

.theme-card[data-preview="forest"] .theme-color-swatch:nth-child(1) {
    background-color: #10b981;
}

.theme-card[data-preview="forest"] .theme-color-swatch:nth-child(2) {
    background-color: #34d399;
}

.theme-card[data-preview="forest"] .theme-color-swatch:nth-child(3) {
    background-color: #059669;
}

/* Uni Theme Preview */
.theme-card[data-preview="uni"] .theme-card-header {
    background-color: #85BC27;
    color: #ffffff;
}

.theme-card[data-preview="uni"] .theme-card-body {
    background-color: #f3f3f3;
}

.theme-card[data-preview="uni"] .theme-color-swatch:nth-child(1) {
    background-color: #85BC27;
}

.theme-card[data-preview="uni"] .theme-color-swatch:nth-child(2) {
    background-color: #9ACC42;
}

.theme-card[data-preview="uni"] .theme-color-swatch:nth-child(3) {
    background-color: #6BA31E;
}

/* Hybrid Theme Preview */
.theme-card[data-preview="hybrid"] .theme-card-header {
    background: linear-gradient(135deg, #0f1c17 0%, #0f1c17 50%, #f3f4f6 50%, #f3f4f6 100%);
    color: #ffffff;
    position: relative;
}

.theme-card[data-preview="hybrid"] .theme-card-header::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-card[data-preview="hybrid"] .theme-card-body {
    background-color: #f3f4f6;
}

.theme-card[data-preview="hybrid"] .theme-color-swatch:nth-child(1) {
    background-color: #0f1c17;
}

.theme-card[data-preview="hybrid"] .theme-color-swatch:nth-child(2) {
    background-color: #10b981;
}

.theme-card[data-preview="hybrid"] .theme-color-swatch:nth-child(3) {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
}

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #f5f5f5;
        --text-primary: #000000;
        --text-secondary: #333333;
    }
}

/* ============================================
   THEME 5 - UNI THEME COMPONENT OVERRIDES
   Green sidebar with white content
   ============================================ */

/* Uni Theme: Additional CSS Variables */
html.theme-uni,
body.theme-uni {
    --accent-primary-rgb: 133, 188, 39;
    --cta-accent: #85BC27;
}

/* Uni Theme: Green Sidebar */
html.theme-uni .app-sidebar,
body.theme-uni .app-sidebar {
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-secondary) 100%) !important;
    border-right-color: rgba(0, 0, 0, 0.1) !important;
}

/* Uni Theme: Sidebar text MUST be white */
html.theme-uni .app-sidebar .sidebar-nav-item,
body.theme-uni .app-sidebar .sidebar-nav-item {
    color: #ffffff !important;
}

html.theme-uni .app-sidebar .sidebar-nav-item:hover,
body.theme-uni .app-sidebar .sidebar-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

html.theme-uni .app-sidebar .sidebar-nav-item.active,
body.theme-uni .app-sidebar .sidebar-nav-item.active {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Uni Theme: White active indicator bar on left */
html.theme-uni .app-sidebar .sidebar-nav-item.active::before,
body.theme-uni .app-sidebar .sidebar-nav-item.active::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 36px !important;
    background-color: #ffffff !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Uni Theme: Sidebar icons - Semi-transparent dark circles on green */
html.theme-uni .app-sidebar .sidebar-nav-icon,
body.theme-uni .app-sidebar .sidebar-nav-icon {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.15) !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
    position: relative;
    z-index: 5;
}

/* Uni Theme: Sidebar labels - ensure they appear above pseudo-elements */
html.theme-uni .app-sidebar .sidebar-nav-label,
body.theme-uni .app-sidebar .sidebar-nav-label {
    position: relative;
    z-index: 5;
}

html.theme-uni .app-sidebar .sidebar-nav-item:hover .sidebar-nav-icon,
body.theme-uni .app-sidebar .sidebar-nav-item:hover .sidebar-nav-icon {
    background: rgba(0, 0, 0, 0.25) !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.2) !important;
}

html.theme-uni .app-sidebar .sidebar-nav-item.active .sidebar-nav-icon,
body.theme-uni .app-sidebar .sidebar-nav-item.active .sidebar-nav-icon {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}

html.theme-uni .app-sidebar .sidebar-nav-item.active .sidebar-nav-icon i,
body.theme-uni .app-sidebar .sidebar-nav-item.active .sidebar-nav-icon i {
    color: #85BC27 !important;
}

html.theme-uni .app-sidebar .sidebar-nav-item.active .sidebar-nav-label,
body.theme-uni .app-sidebar .sidebar-nav-item.active .sidebar-nav-label {
    color: #ffffff !important;
}

html.theme-uni .app-sidebar .sidebar-nav-icon i,
body.theme-uni .app-sidebar .sidebar-nav-icon i,
html.theme-uni .app-sidebar .sidebar-nav-icon svg,
body.theme-uni .app-sidebar .sidebar-nav-icon svg {
    color: #ffffff !important;
}

/* Uni Theme: Social links in sidebar */
html.theme-uni .app-sidebar .social-link,
body.theme-uni .app-sidebar .social-link {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

html.theme-uni .app-sidebar .social-link:hover,
body.theme-uni .app-sidebar .social-link:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #85BC27 !important;
}

html.theme-uni .app-sidebar .social-link:hover i,
body.theme-uni .app-sidebar .social-link:hover i {
    color: #85BC27 !important;
}

/* Uni Theme: Logo area should EXACTLY match sidebar green - NO border, NO gap */
html.theme-uni .header-logo,
body.theme-uni .header-logo {
    background: #85BC27 !important;
    background-color: #85BC27 !important;
    border: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-right-color: transparent !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: none !important;
}

html.theme-uni .sidebar-logo,
body.theme-uni .sidebar-logo {
    background: transparent !important;
}

/* Uni Theme: Sidebar should EXACTLY match logo green - NO border, NO gap */
html.theme-uni .app-sidebar,
body.theme-uni .app-sidebar {
    background: #85BC27 !important;
    background-color: #85BC27 !important;
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    box-shadow: none !important;
}

/* Uni Theme: Remove any spacing between header and sidebar */
html.theme-uni .top-header,
body.theme-uni .top-header {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

html.theme-uni .header-logo::after,
body.theme-uni .header-logo::after {
    display: none !important;
}

/* Uni Theme: Hide Adiqu logos - BUW logo is used instead */
html.theme-uni .header-logo .logo-dark,
body.theme-uni .header-logo .logo-dark,
html.theme-uni .header-logo .logo-light,
body.theme-uni .header-logo .logo-light {
    display: none !important;
}

/* Uni Theme: App wrapper - remove any gaps */
html.theme-uni .app-wrapper,
body.theme-uni .app-wrapper {
    gap: 0 !important;
}

/* Uni Theme: When sidebar is expanded, also use solid green */
html.theme-uni body.sidebar-expanded .header-logo,
body.theme-uni.sidebar-expanded .header-logo,
html.theme-uni .sidebar-expanded .header-logo {
    background: #85BC27 !important;
    background-color: #85BC27 !important;
}

html.theme-uni body.sidebar-expanded .app-sidebar,
body.theme-uni.sidebar-expanded .app-sidebar,
html.theme-uni .sidebar-expanded .app-sidebar {
    background: #85BC27 !important;
    background-color: #85BC27 !important;
}

/* Uni Theme: Toggle button styling */
html.theme-uni .app-sidebar .sidebar-toggle-btn svg,
body.theme-uni .app-sidebar .sidebar-toggle-btn svg {
    color: rgba(255, 255, 255, 0.8) !important;
    stroke: rgba(255, 255, 255, 0.8) !important;
}

html.theme-uni .app-sidebar .sidebar-toggle-btn:hover svg,
body.theme-uni .app-sidebar .sidebar-toggle-btn:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

html.theme-uni .app-sidebar .sidebar-nav-label,
body.theme-uni .app-sidebar .sidebar-nav-label {
    color: #ffffff !important;
}

html.theme-uni .app-sidebar .sidebar-toggle-btn,
body.theme-uni .app-sidebar .sidebar-toggle-btn {
    color: rgba(255, 255, 255, 0.8) !important;
}

html.theme-uni .app-sidebar .sidebar-toggle-btn:hover,
body.theme-uni .app-sidebar .sidebar-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

html.theme-uni .app-sidebar .sidebar-divider,
body.theme-uni .app-sidebar .sidebar-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Uni Theme: Sidebar branding logos - keep white */
html.theme-uni .app-sidebar .sidebar-brand-logo,
body.theme-uni .app-sidebar .sidebar-brand-logo {
    filter: brightness(1) !important;
}

/* Uni Theme: Breadcrumb - visible background for contrast */
html.theme-uni .breadcrumb,
body.theme-uni .breadcrumb {
    background-color: rgba(133, 188, 39, 0.1) !important;
    border: 1px solid rgba(133, 188, 39, 0.2) !important;
}

html.theme-uni .breadcrumb-item a,
body.theme-uni .breadcrumb-item a {
    color: #85BC27 !important;
}

html.theme-uni .breadcrumb-item a:hover,
body.theme-uni .breadcrumb-item a:hover {
    color: #6BA31E !important;
}

html.theme-uni .breadcrumb-item.active,
body.theme-uni .breadcrumb-item.active {
    color: #333333 !important;
}

/* Uni Theme: KI Labor Button - green with white hover */
html.theme-uni .ki-labor-btn,
body.theme-uni .ki-labor-btn {
    background: #85BC27 !important;
    color: #ffffff !important;
    border: 1px solid #85BC27 !important;
}

html.theme-uni .ki-labor-btn span,
body.theme-uni .ki-labor-btn span,
html.theme-uni .ki-labor-btn i.bi-stars,
body.theme-uni .ki-labor-btn i.bi-stars {
    color: #ffffff !important;
}

html.theme-uni .ki-labor-btn:hover,
body.theme-uni .ki-labor-btn:hover {
    background: #ffffff !important;
    border-color: #85BC27 !important;
    color: #85BC27 !important;
}

html.theme-uni .ki-labor-btn:hover span,
body.theme-uni .ki-labor-btn:hover span,
html.theme-uni .ki-labor-btn:hover i,
body.theme-uni .ki-labor-btn:hover i {
    color: #85BC27 !important;
}

html.theme-uni .ki-labor-btn.ki-labor-active,
body.theme-uni .ki-labor-btn.ki-labor-active {
    background: #85BC27 !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

html.theme-uni .ki-labor-btn.ki-labor-active:hover,
body.theme-uni .ki-labor-btn.ki-labor-active:hover {
    background: #ffffff !important;
    color: #85BC27 !important;
}

html.theme-uni .ki-labor-btn.ki-labor-active:hover span,
body.theme-uni .ki-labor-btn.ki-labor-active:hover span,
html.theme-uni .ki-labor-btn.ki-labor-active:hover i,
body.theme-uni .ki-labor-btn.ki-labor-active:hover i {
    color: #85BC27 !important;
}

/* Uni Theme: Admin Dropdown - BLACK text on light background */
html.theme-uni .sidebar-admin-dropdown,
body.theme-uni .sidebar-admin-dropdown {
    background-color: #ffffff !important;
}

html.theme-uni .admin-dropdown-item,
body.theme-uni .admin-dropdown-item,
html.theme-uni a.admin-dropdown-item,
body.theme-uni a.admin-dropdown-item,
html.theme-uni a.admin-dropdown-item:link,
body.theme-uni a.admin-dropdown-item:link,
html.theme-uni a.admin-dropdown-item:visited,
body.theme-uni a.admin-dropdown-item:visited {
    color: #1a1a1a !important;
}

html.theme-uni .admin-dropdown-item:hover,
body.theme-uni .admin-dropdown-item:hover,
html.theme-uni a.admin-dropdown-item:hover,
body.theme-uni a.admin-dropdown-item:hover {
    background-color: #f3f3f3 !important;
    color: #1a1a1a !important;
}

html.theme-uni .admin-dropdown-item i,
body.theme-uni .admin-dropdown-item i {
    color: #6b6b6b !important;
}

html.theme-uni .dropdown-menu,
body.theme-uni .dropdown-menu {
    background-color: #ffffff !important;
}

html.theme-uni .dropdown-item,
body.theme-uni .dropdown-item {
    color: #1a1a1a !important;
}

html.theme-uni .dropdown-item:hover,
body.theme-uni .dropdown-item:hover {
    background-color: #f3f3f3 !important;
    color: #1a1a1a !important;
}

/* Uni Theme: ALL Buttons use green accent with WHITE text */
html.theme-uni .btn-primary,
body.theme-uni .btn-primary,
html.theme-uni .btn-accent,
body.theme-uni .btn-accent,
html.theme-uni .btn-create,
body.theme-uni .btn-create,
html.theme-uni .btn-submit,
body.theme-uni .btn-submit,
html.theme-uni .btn-add,
body.theme-uni .btn-add,
html.theme-uni [class*="btn-accent"],
body.theme-uni [class*="btn-accent"] {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(133, 188, 39, 0.3) !important;
}

html.theme-uni .btn-primary:hover,
body.theme-uni .btn-primary:hover,
html.theme-uni .btn-accent:hover,
body.theme-uni .btn-accent:hover,
html.theme-uni .btn-create:hover,
body.theme-uni .btn-create:hover,
html.theme-uni .btn-submit:hover,
body.theme-uni .btn-submit:hover,
html.theme-uni .btn-add:hover,
body.theme-uni .btn-add:hover,
html.theme-uni [class*="btn-accent"]:hover,
body.theme-uni [class*="btn-accent"]:hover {
    background: linear-gradient(135deg, #6BA31E 0%, #5A8F18 100%) !important;
    border-color: #6BA31E !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(133, 188, 39, 0.4) !important;
}

/* Uni Theme: Page-specific buttons (MyProjects, Raum, KIAssistant) */
html.theme-uni .btn-create-project,
body.theme-uni .btn-create-project {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

html.theme-uni .btn-create-project:hover,
body.theme-uni .btn-create-project:hover {
    background: linear-gradient(135deg, #6BA31E 0%, #5A8F18 100%) !important;
    color: #ffffff !important;
}

html.theme-uni .btn-modal-publish,
body.theme-uni .btn-modal-publish {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

html.theme-uni .btn-edit-project,
body.theme-uni .btn-edit-project {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

/* Uni Theme: Headers and accent elements */
html.theme-uni .page-header,
body.theme-uni .page-header,
html.theme-uni .section-header,
body.theme-uni .section-header {
    border-color: #85BC27 !important;
}

html.theme-uni .page-header::after,
body.theme-uni .page-header::after {
    background: linear-gradient(90deg, #85BC27, #6BA31E) !important;
}

/* Uni Theme: Gradients using accent color */
html.theme-uni [style*="linear-gradient"][style*="accent-primary"],
body.theme-uni [style*="linear-gradient"][style*="accent-primary"] {
    background: linear-gradient(90deg, #85BC27, #6BA31E) !important;
}

/* Uni Theme: Active pills and chips */
html.theme-uni .pill.active,
body.theme-uni .pill.active,
html.theme-uni .chip.active,
body.theme-uni .chip.active,
html.theme-uni .filter-btn.active,
body.theme-uni .filter-btn.active,
html.theme-uni .filter-chip.active,
body.theme-uni .filter-chip.active {
    background-color: #85BC27 !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

/* Uni Theme: Links and interactive elements */
html.theme-uni a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-nav-item):not(.modern-card-link),
body.theme-uni a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-nav-item):not(.modern-card-link) {
    color: #6BA31E;
}

html.theme-uni a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-nav-item):not(.modern-card-link):hover,
body.theme-uni a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-nav-item):not(.modern-card-link):hover {
    color: #5A8F18;
}

/* Uni Theme: Focus rings */
html.theme-uni .form-control:focus,
body.theme-uni .form-control:focus,
html.theme-uni input:focus,
body.theme-uni input:focus,
html.theme-uni select:focus,
body.theme-uni select:focus,
html.theme-uni textarea:focus,
body.theme-uni textarea:focus {
    border-color: #85BC27 !important;
    box-shadow: 0 0 0 3px rgba(133, 188, 39, 0.15) !important;
}

/* Uni Theme: Raum/Room specific elements */
html.theme-uni .room-card-header,
body.theme-uni .room-card-header,
html.theme-uni .raum-header,
body.theme-uni .raum-header {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    color: #ffffff !important;
}

html.theme-uni .btn-create-room,
body.theme-uni .btn-create-room,
html.theme-uni .btn-raum-create,
body.theme-uni .btn-raum-create {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

/* Uni Theme: KI Assistant specific elements */
html.theme-uni .ki-chat-header,
body.theme-uni .ki-chat-header,
html.theme-uni .assistant-header,
body.theme-uni .assistant-header {
    background: linear-gradient(90deg, #85BC27, #6BA31E) !important;
    color: #ffffff !important;
}

html.theme-uni .ki-send-btn,
body.theme-uni .ki-send-btn,
html.theme-uni .chat-send-btn,
body.theme-uni .chat-send-btn {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    color: #ffffff !important;
}

/* Uni Theme: Bootstrap btn-primary override */
html.theme-uni .btn.btn-primary,
body.theme-uni .btn.btn-primary {
    background-color: #85BC27 !important;
    background-image: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

html.theme-uni .btn.btn-primary:hover,
body.theme-uni .btn.btn-primary:hover,
html.theme-uni .btn.btn-primary:focus,
body.theme-uni .btn.btn-primary:focus {
    background-color: #6BA31E !important;
    background-image: linear-gradient(135deg, #6BA31E 0%, #5A8F18 100%) !important;
    border-color: #6BA31E !important;
    color: #ffffff !important;
}

/* Uni Theme: Card action buttons */
html.theme-uni .btn-card-action,
body.theme-uni .btn-card-action,
html.theme-uni .btn-card-action:hover,
body.theme-uni .btn-card-action:hover {
    color: #ffffff !important;
}

/* Uni Theme: Raum page buttons */
html.theme-uni .btn-create-raum,
body.theme-uni .btn-create-raum,
html.theme-uni .btn-join-raum,
body.theme-uni .btn-join-raum,
html.theme-uni .btn-create-code,
body.theme-uni .btn-create-code,
html.theme-uni .btn.btn-create,
body.theme-uni .btn.btn-create,
html.theme-uni .btn.btn-save,
body.theme-uni .btn.btn-save,
html.theme-uni .btn.btn-join,
body.theme-uni .btn.btn-join {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

html.theme-uni .btn-create-raum:hover,
body.theme-uni .btn-create-raum:hover,
html.theme-uni .btn-join-raum:hover,
body.theme-uni .btn-join-raum:hover,
html.theme-uni .btn-create-code:hover,
body.theme-uni .btn-create-code:hover,
html.theme-uni .btn.btn-create:hover,
body.theme-uni .btn.btn-create:hover,
html.theme-uni .btn.btn-save:hover,
body.theme-uni .btn.btn-save:hover,
html.theme-uni .btn.btn-join:hover,
body.theme-uni .btn.btn-join:hover {
    background: linear-gradient(135deg, #6BA31E 0%, #5A8F18 100%) !important;
    border-color: #6BA31E !important;
    color: #ffffff !important;
}

/* Uni Theme: MyProjects/Upsert page buttons */
html.theme-uni .btn-save-project,
body.theme-uni .btn-save-project,
html.theme-uni .project-form-actions .btn-primary,
body.theme-uni .project-form-actions .btn-primary {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

/* Uni Theme: View toggle buttons active state */
html.theme-uni .view-toggle-btn.active,
body.theme-uni .view-toggle-btn.active {
    background-color: #85BC27 !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

/* Uni Theme: Page titles and section headers with accent underline */
html.theme-uni .page-title::after,
body.theme-uni .page-title::after,
html.theme-uni .section-title::after,
body.theme-uni .section-title::after,
html.theme-uni h1::after,
body.theme-uni h1::after {
    background: linear-gradient(90deg, #85BC27, #6BA31E) !important;
}

/* Uni Theme: Upsert form accent elements */
html.theme-uni .form-section-title,
body.theme-uni .form-section-title {
    border-left-color: #85BC27 !important;
}

html.theme-uni .tab-link.active,
body.theme-uni .tab-link.active,
html.theme-uni .nav-tabs .nav-link.active,
body.theme-uni .nav-tabs .nav-link.active {
    border-bottom-color: #85BC27 !important;
    color: #85BC27 !important;
}

/* Uni Theme: Right sidebar - clean minimal icons like Hell theme with green accent */
html.theme-uni .app-sidebar-right .sidebar-nav-label,
body.theme-uni .app-sidebar-right .sidebar-nav-label {
    color: var(--text-primary) !important;
}

html.theme-uni .app-sidebar-right .sidebar-nav-icon,
body.theme-uni .app-sidebar-right .sidebar-nav-icon {
    background: #F5F5F5 !important;
    border: 1px solid #E0E0E0 !important;
    color: #555555 !important;
}

html.theme-uni .app-sidebar-right .sidebar-nav-icon i,
body.theme-uni .app-sidebar-right .sidebar-nav-icon i {
    color: #555555 !important;
}

html.theme-uni .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon,
body.theme-uni .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon {
    background: rgba(133, 188, 39, 0.1) !important;
    border-color: #85BC27 !important;
    transform: scale(1.08);
}

html.theme-uni .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon i,
body.theme-uni .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon i {
    color: #6BA31E !important;
}

html.theme-uni .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon,
body.theme-uni .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon {
    background: #85BC27 !important;
    border-color: #6BA31E !important;
}

html.theme-uni .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon i,
body.theme-uni .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon i {
    color: #ffffff !important;
}

/* Uni Theme: KI Assistant page - override hardcoded blue colors */
html.theme-uni .assistant-card::before,
body.theme-uni .assistant-card::before {
    background: linear-gradient(90deg, #85BC27, #6BA31E) !important;
}

html.theme-uni .assistant-card:hover,
body.theme-uni .assistant-card:hover {
    border-color: #85BC27 !important;
    box-shadow: 0 12px 40px rgba(133, 188, 39, 0.15) !important;
}

html.theme-uni .assistant-icon-wrapper,
body.theme-uni .assistant-icon-wrapper {
    background: linear-gradient(135deg, rgba(133, 188, 39, 0.15) 0%, rgba(107, 163, 30, 0.05) 100%) !important;
}

html.theme-uni .assistant-icon-wrapper i,
body.theme-uni .assistant-icon-wrapper i {
    color: #85BC27 !important;
}

html.theme-uni .model-badge,
body.theme-uni .model-badge {
    background-color: rgba(133, 188, 39, 0.1) !important;
    color: #6BA31E !important;
}

/* Uni Theme: All accent-primary related colors */
html.theme-uni [class*="accent-primary"]:not([class*="btn-"]):not(button),
body.theme-uni [class*="accent-primary"]:not([class*="btn-"]):not(button),
html.theme-uni [class*="text-primary-accent"]:not([class*="btn-"]):not(button),
body.theme-uni [class*="text-primary-accent"]:not([class*="btn-"]):not(button) {
    color: #85BC27 !important;
}

html.theme-uni [class*="bg-accent"],
body.theme-uni [class*="bg-accent"],
html.theme-uni [class*="bg-primary-accent"],
body.theme-uni [class*="bg-primary-accent"] {
    background-color: #85BC27 !important;
}

/* Uni Theme: Progress bars and indicators */
html.theme-uni .progress-bar,
body.theme-uni .progress-bar {
    background-color: #85BC27 !important;
}

/* Uni Theme: Badges and tags */
html.theme-uni .badge-primary,
body.theme-uni .badge-primary,
html.theme-uni .badge.bg-primary,
body.theme-uni .badge.bg-primary {
    background-color: #85BC27 !important;
    color: #ffffff !important;
}

/* Uni Theme: Checkbox and radio accent */
html.theme-uni input[type="checkbox"]:checked,
body.theme-uni input[type="checkbox"]:checked,
html.theme-uni input[type="radio"]:checked,
body.theme-uni input[type="radio"]:checked {
    accent-color: #85BC27 !important;
}

/* Uni Theme: Card headers (MyProjects/Upsert) - override hardcoded blue */
html.theme-uni .card-header,
body.theme-uni .card-header {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
}

html.theme-uni .card-header h3,
body.theme-uni .card-header h3,
html.theme-uni .card-header h4,
body.theme-uni .card-header h4,
html.theme-uni .card-header h5,
body.theme-uni .card-header h5 {
    color: #ffffff !important;
}

/* Uni Theme: Save button in forms */
html.theme-uni .saveBtn,
body.theme-uni .saveBtn {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
}

html.theme-uni .saveBtn:hover,
body.theme-uni .saveBtn:hover {
    background: linear-gradient(135deg, #6BA31E 0%, #5A8F18 100%) !important;
    box-shadow: 0 4px 12px rgba(133, 188, 39, 0.4) !important;
}

/* Uni Theme: btn-outline-primary - filled default, outline on hover */
html.theme-uni .btn-outline-primary,
body.theme-uni .btn-outline-primary {
    background: #85BC27 !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

html.theme-uni .btn-outline-primary:hover,
body.theme-uni .btn-outline-primary:hover {
    background: transparent !important;
    border-color: #85BC27 !important;
    color: #6BA31E !important;
}

html.theme-uni .btn-check + .btn-outline-primary,
body.theme-uni .btn-check + .btn-outline-primary {
    background: transparent !important;
    border-color: #85BC27 !important;
    color: #6BA31E !important;
}

html.theme-uni .btn-check + .btn-outline-primary:hover,
body.theme-uni .btn-check + .btn-outline-primary:hover {
    background: rgba(133, 188, 39, 0.1) !important;
    color: #5a8f1a !important;
}

html.theme-uni .btn-check:checked + .btn-outline-primary,
body.theme-uni .btn-check:checked + .btn-outline-primary {
    background-color: #85BC27 !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

/* Uni Theme: Tag bubble buttons use green accent */
html.theme-uni .tag-button:hover,
body.theme-uni .tag-button:hover {
    border-color: #85BC27 !important;
    color: #85BC27 !important;
}

html.theme-uni .btn-check.tag-check:checked + .tag-button,
body.theme-uni .btn-check.tag-check:checked + .tag-button {
    background-color: #85BC27 !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(133, 188, 39, 0.3) !important;
}

html.theme-uni .btn-check.tag-check:checked + .tag-button:hover,
body.theme-uni .btn-check.tag-check:checked + .tag-button:hover {
    background-color: #6BA31E !important;
    border-color: #6BA31E !important;
}

html.theme-uni .custom-tag-pill,
body.theme-uni .custom-tag-pill {
    background: #85BC27 !important;
}

/* ========== Uni Theme: Tags use neutral gray backgrounds ========== */
html.theme-uni .modern-card-tag,
body.theme-uni .modern-card-tag {
    background: #e8e8e8 !important;
    color: #4a4a4a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

html.theme-uni .modern-card-tag:nth-child(2),
body.theme-uni .modern-card-tag:nth-child(2) {
    background: #e0e0e0 !important;
    color: #4a4a4a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

html.theme-uni .modern-card-tag:nth-child(3),
body.theme-uni .modern-card-tag:nth-child(3) {
    background: #d8d8d8 !important;
    color: #4a4a4a !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

html.theme-uni .highlight-card-tag,
body.theme-uni .highlight-card-tag {
    background: #e8e8e8 !important;
    color: #4a4a4a !important;
}

/* ========== Uni Theme: Favorite/Bookmark buttons use green ========== */
html.theme-uni .favorite-btn.favorited,
body.theme-uni .favorite-btn.favorited {
    background: linear-gradient(135deg, #85BC27, #6BA31E) !important;
    border-color: transparent !important;
}

html.theme-uni .favorite-btn.favorited:hover,
body.theme-uni .favorite-btn.favorited:hover {
    background: linear-gradient(135deg, #6BA31E, #5A8F18) !important;
}

html.theme-uni .favorite-btn:hover,
body.theme-uni .favorite-btn:hover {
    background: linear-gradient(135deg, #85BC27, #6BA31E) !important;
    box-shadow: 0 4px 15px rgba(133, 188, 39, 0.4) !important;
}

html.theme-uni .modern-card-image .favorite-btn:hover,
body.theme-uni .modern-card-image .favorite-btn:hover {
    background: linear-gradient(135deg, #85BC27, #6BA31E) !important;
    box-shadow: 0 4px 15px rgba(133, 188, 39, 0.4) !important;
}

html.theme-uni .modern-card-image .favorite-btn.active,
body.theme-uni .modern-card-image .favorite-btn.active {
    background: linear-gradient(135deg, #85BC27, #6BA31E) !important;
    box-shadow: 0 4px 15px rgba(133, 188, 39, 0.4) !important;
}

/* ========== Uni Theme: Hero banners use neutral gray backgrounds ========== */
html.theme-uni .referenzen-hero,
body.theme-uni .referenzen-hero {
    background: linear-gradient(135deg, rgba(200, 200, 200, 0.15) 0%, rgba(180, 180, 180, 0.08) 100%) !important;
}

html.theme-uni .referenzen-hero::before,
body.theme-uni .referenzen-hero::before {
    background: radial-gradient(circle, rgba(180, 180, 180, 0.15) 0%, transparent 70%) !important;
}

html.theme-uni .referenzen-hero::after,
body.theme-uni .referenzen-hero::after {
    background: radial-gradient(circle, rgba(180, 180, 180, 0.15) 0%, transparent 70%) !important;
}

html.theme-uni .referenzen-hero .hero-icon,
body.theme-uni .referenzen-hero .hero-icon {
    color: var(--accent-primary) !important;
}

/* Uni Theme: Partner card header gradient - neutral gray */
html.theme-uni .partner-header,
body.theme-uni .partner-header {
    background: linear-gradient(135deg, rgba(200, 200, 200, 0.1) 0%, transparent 100%) !important;
}

/* ========== Uni Theme: Raum Pages Complete Override ========== */

/* Raum/Index - Page header icon */
html.theme-uni .raum-page-header-icon,
body.theme-uni .raum-page-header-icon {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
}

/* Raum/Index - Create button */
html.theme-uni .btn-create-raum,
body.theme-uni .btn-create-raum {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
}

html.theme-uni .btn-create-raum:hover,
body.theme-uni .btn-create-raum:hover {
    box-shadow: 0 4px 12px rgba(133, 188, 39, 0.4) !important;
}

/* Raum/Index - View toggle buttons */
html.theme-uni .view-toggle-btn.active,
body.theme-uni .view-toggle-btn.active {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
}

/* Raum/Index - Card accent line */
html.theme-uni .raum-card::before,
body.theme-uni .raum-card::before {
    background: linear-gradient(90deg, #85BC27, #6BA31E, #9ACC42) !important;
}

html.theme-uni .raum-card:hover,
body.theme-uni .raum-card:hover {
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(133, 188, 39, 0.2) !important;
}

/* Raum/Index - Card badge */
html.theme-uni .raum-card-badge,
body.theme-uni .raum-card-badge {
    background: rgba(133, 188, 39, 0.15) !important;
    color: #6BA31E !important;
    border: 1px solid rgba(133, 188, 39, 0.3) !important;
}

/* Raum/Index - Meta info colors */
html.theme-uni .raum-meta-item i,
body.theme-uni .raum-meta-item i,
html.theme-uni .raum-member-count,
body.theme-uni .raum-member-count {
    color: #85BC27 !important;
}

/* Raum/Index - Action links */
html.theme-uni .raum-action-link,
body.theme-uni .raum-action-link {
    color: #85BC27 !important;
}

html.theme-uni .raum-action-link:hover,
body.theme-uni .raum-action-link:hover {
    color: #6BA31E !important;
}

/* Raum/Index - List item accent */
html.theme-uni .raum-list-item,
body.theme-uni .raum-list-item {
    border-left-color: #85BC27 !important;
}

/* Raum/Index - Empty state */
html.theme-uni .empty-state-icon,
body.theme-uni .empty-state-icon {
    color: #85BC27 !important;
}

html.theme-uni .empty-state-btn,
body.theme-uni .empty-state-btn {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    color: #ffffff !important;
}

/* Raum/Create - Header with WHITE text */
html.theme-uni .create-header,
body.theme-uni .create-header {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    color: #ffffff !important;
}

html.theme-uni .create-header h1,
body.theme-uni .create-header h1,
html.theme-uni .create-header h2,
body.theme-uni .create-header h2,
html.theme-uni .create-header h3,
body.theme-uni .create-header h3,
html.theme-uni .create-header p,
body.theme-uni .create-header p,
html.theme-uni .create-header span,
body.theme-uni .create-header span {
    color: #ffffff !important;
}

html.theme-uni .create-header-icon,
body.theme-uni .create-header-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

html.theme-uni .create-header-icon i,
body.theme-uni .create-header-icon i {
    color: #ffffff !important;
}

/* Raum/Create - Form focus states */
html.theme-uni .form-control:focus,
body.theme-uni .form-control:focus,
html.theme-uni .form-select:focus,
body.theme-uni .form-select:focus {
    border-color: #85BC27 !important;
    box-shadow: 0 0 0 3px rgba(133, 188, 39, 0.1) !important;
}

/* Raum/Create - Image preview hover */
html.theme-uni .image-preview:hover,
body.theme-uni .image-preview:hover {
    border-color: #85BC27 !important;
}

/* Raum/Create - Create button */
html.theme-uni .btn.btn-create,
body.theme-uni .btn.btn-create {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    color: #ffffff !important;
}

html.theme-uni .btn.btn-create:hover,
body.theme-uni .btn.btn-create:hover {
    box-shadow: 0 4px 12px rgba(133, 188, 39, 0.4) !important;
}

/* ========== Uni Theme: MyProjects Pages Complete Override ========== */

/* MyProjects/Index - Page header icon */
html.theme-uni .page-header-icon,
body.theme-uni .page-header-icon {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
}

/* MyProjects/Index - Create button */
html.theme-uni .btn-create-project,
body.theme-uni .btn-create-project {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
}

html.theme-uni .btn-create-project:hover,
body.theme-uni .btn-create-project:hover {
    box-shadow: 0 4px 12px rgba(133, 188, 39, 0.4) !important;
}

/* MyProjects/Index - Project card accent line */
html.theme-uni .project-card::before,
body.theme-uni .project-card::before {
    background: linear-gradient(90deg, #85BC27, #6BA31E, #9ACC42) !important;
}

html.theme-uni .project-card:hover,
body.theme-uni .project-card:hover {
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(133, 188, 39, 0.2) !important;
}

/* MyProjects/Index - Project badge/status */
html.theme-uni .project-card-badge,
body.theme-uni .project-card-badge,
html.theme-uni .project-status-badge,
body.theme-uni .project-status-badge {
    background: rgba(133, 188, 39, 0.15) !important;
    color: #6BA31E !important;
    border-color: rgba(133, 188, 39, 0.3) !important;
}

/* MyProjects/Index - Meta info colors */
html.theme-uni .project-meta-item i,
body.theme-uni .project-meta-item i {
    color: #85BC27 !important;
}

/* MyProjects/Index - View button colors */
html.theme-uni .btn-view,
body.theme-uni .btn-view {
    color: #ffffff !important;
}

html.theme-uni .btn-view:hover,
body.theme-uni .btn-view:hover {
    color: #ffffff !important;
}

/* MyProjects/Index - Modal publish button */
html.theme-uni .btn-modal-publish,
body.theme-uni .btn-modal-publish {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    border-color: #85BC27 !important;
}

/* MyProjects/Index - Edit project button */
html.theme-uni .btn-edit-project,
body.theme-uni .btn-edit-project {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
}

/* MyProjects/Index - Filter active state */
html.theme-uni .filter-btn.active,
body.theme-uni .filter-btn.active,
html.theme-uni .filter-chip.active,
body.theme-uni .filter-chip.active {
    background: #85BC27 !important;
    border-color: #85BC27 !important;
    color: #ffffff !important;
}

/* MyProjects/Upsert - Tab active state */
html.theme-uni .tab-btn.active,
body.theme-uni .tab-btn.active,
html.theme-uni .form-tab.active,
body.theme-uni .form-tab.active {
    border-bottom-color: #85BC27 !important;
    color: #85BC27 !important;
}

/* MyProjects/Upsert - Card header override */
html.theme-uni .card-header,
body.theme-uni .card-header {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
}

/* ========== Uni Theme: CTA Sections (Home/Index, Home/Home - Portfolio) ========== */

/* Portfolio CTA section - override inline blue styles with max specificity */
html.theme-uni .portfolio-cta,
body.theme-uni .portfolio-cta,
html.theme-uni section.portfolio-cta,
body.theme-uni section.portfolio-cta,
html.theme-uni .cta-section,
body.theme-uni .cta-section,
html.theme-uni section.cta-section,
body.theme-uni section.cta-section {
    background: linear-gradient(135deg, #85BC27 0%, #6BA31E 100%) !important;
    box-shadow: 0 8px 32px rgba(133, 188, 39, 0.25) !important;
    color: #ffffff !important;
}

/* CTA ALL TEXT MUST BE WHITE */
html.theme-uni .portfolio-cta *,
body.theme-uni .portfolio-cta *,
html.theme-uni .cta-section *,
body.theme-uni .cta-section * {
    color: #ffffff !important;
}

html.theme-uni .portfolio-cta-title,
body.theme-uni .portfolio-cta-title,
html.theme-uni .portfolio-cta h2,
body.theme-uni .portfolio-cta h2,
html.theme-uni .cta-section h2,
body.theme-uni .cta-section h2 {
    color: #ffffff !important;
}

html.theme-uni .portfolio-cta-subtitle,
body.theme-uni .portfolio-cta-subtitle,
html.theme-uni .portfolio-cta p,
body.theme-uni .portfolio-cta p,
html.theme-uni .cta-section p,
body.theme-uni .cta-section p {
    color: #ffffff !important;
    opacity: 1 !important;
}

html.theme-uni .portfolio-cta-icon,
body.theme-uni .portfolio-cta-icon,
html.theme-uni .portfolio-cta-icon i,
body.theme-uni .portfolio-cta-icon i,
html.theme-uni .cta-section .cta-icon,
body.theme-uni .cta-section .cta-icon {
    color: #ffffff !important;
}

/* CTA Button - white background with green text */
html.theme-uni .portfolio-cta-btn,
body.theme-uni .portfolio-cta-btn,
html.theme-uni a.portfolio-cta-btn,
body.theme-uni a.portfolio-cta-btn,
html.theme-uni .portfolio-cta .portfolio-cta-btn,
body.theme-uni .portfolio-cta .portfolio-cta-btn,
html.theme-uni .cta-section .btn-cta,
body.theme-uni .cta-section .btn-cta {
    background: white !important;
    background-color: white !important;
    color: #6BA31E !important;
}

html.theme-uni .portfolio-cta-btn i,
body.theme-uni .portfolio-cta-btn i,
html.theme-uni a.portfolio-cta-btn i,
body.theme-uni a.portfolio-cta-btn i {
    color: #6BA31E !important;
}

html.theme-uni .portfolio-cta-btn:hover,
body.theme-uni .portfolio-cta-btn:hover,
html.theme-uni .cta-section .btn-cta:hover,
body.theme-uni .cta-section .btn-cta:hover {
    background: #f3f3f3 !important;
    background-color: #f3f3f3 !important;
    color: #5A8F18 !important;
}

/* Highlights section accent color */
html.theme-uni .highlights-section,
body.theme-uni .highlights-section {
    --highlight-accent: #85BC27 !important;
}

html.theme-uni [style*="--highlight-accent"],
body.theme-uni [style*="--highlight-accent"] {
    --highlight-accent: #85BC27 !important;
}

/* ============================================
   THEME 6 - HYBRID THEME COMPONENT OVERRIDES
   Forest green sidebar with light mint content - Premium Design
   ============================================ */

/* Hybrid Theme: Card headers - Emerald gradient */
html.theme-hybrid .card-header,
body.theme-hybrid .card-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

html.theme-hybrid .card-header h3,
body.theme-hybrid .card-header h3,
html.theme-hybrid .card-header h4,
body.theme-hybrid .card-header h4,
html.theme-hybrid .card-header h5,
body.theme-hybrid .card-header h5 {
    color: #ffffff !important;
}

/* Hybrid Theme: Dark Sidebar Base */
html.theme-hybrid .app-sidebar,
body.theme-hybrid .app-sidebar {
    background: #1a1a1a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar Nav Items */
html.theme-hybrid .app-sidebar .sidebar-nav-item,
body.theme-hybrid .app-sidebar .sidebar-nav-item {
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-sidebar .sidebar-nav-item:hover,
body.theme-hybrid .app-sidebar .sidebar-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.theme-hybrid .app-sidebar .sidebar-nav-item.active,
body.theme-hybrid .app-sidebar .sidebar-nav-item.active {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, transparent 100%) !important;
}

html.theme-hybrid .app-sidebar .sidebar-nav-item.active::before,
body.theme-hybrid .app-sidebar .sidebar-nav-item.active::before {
    background: linear-gradient(180deg, #10b981 0%, #34d399 100%) !important;
}

/* Sidebar Icons - Dark Mode Glass Style */
html.theme-hybrid .app-sidebar .sidebar-nav-icon,
body.theme-hybrid .app-sidebar .sidebar-nav-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e5e7eb !important;
    backdrop-filter: blur(8px);
}

html.theme-hybrid .app-sidebar .sidebar-nav-icon i,
body.theme-hybrid .app-sidebar .sidebar-nav-icon i {
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-sidebar .sidebar-nav-item:hover .sidebar-nav-icon,
body.theme-hybrid .app-sidebar .sidebar-nav-item:hover .sidebar-nav-icon {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3) !important;
}

html.theme-hybrid .app-sidebar .sidebar-nav-item:hover .sidebar-nav-icon i,
body.theme-hybrid .app-sidebar .sidebar-nav-item:hover .sidebar-nav-icon i {
    color: #ffffff !important;
}

html.theme-hybrid .app-sidebar .sidebar-nav-item.active .sidebar-nav-icon,
body.theme-hybrid .app-sidebar .sidebar-nav-item.active .sidebar-nav-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

html.theme-hybrid .app-sidebar .sidebar-nav-item.active .sidebar-nav-icon i,
body.theme-hybrid .app-sidebar .sidebar-nav-item.active .sidebar-nav-icon i {
    color: #ffffff !important;
}

/* Sidebar Labels - Neutral Light Text */
html.theme-hybrid .app-sidebar .sidebar-nav-label,
body.theme-hybrid .app-sidebar .sidebar-nav-label {
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-sidebar .sidebar-nav-item:hover .sidebar-nav-label,
body.theme-hybrid .app-sidebar .sidebar-nav-item:hover .sidebar-nav-label {
    color: #ffffff !important;
}

html.theme-hybrid .app-sidebar .sidebar-nav-item.active .sidebar-nav-label,
body.theme-hybrid .app-sidebar .sidebar-nav-item.active .sidebar-nav-label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Toggle Button */
html.theme-hybrid .app-sidebar .sidebar-toggle-btn,
body.theme-hybrid .app-sidebar .sidebar-toggle-btn {
    color: #d1d5db !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.theme-hybrid .app-sidebar .sidebar-toggle-btn:hover,
body.theme-hybrid .app-sidebar .sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.theme-hybrid .app-sidebar .sidebar-toggle-btn svg,
body.theme-hybrid .app-sidebar .sidebar-toggle-btn svg {
    color: #d1d5db !important;
    stroke: #d1d5db !important;
}

/* Divider */
html.theme-hybrid .app-sidebar .sidebar-divider,
body.theme-hybrid .app-sidebar .sidebar-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
    border: none !important;
    height: 1px !important;
}

/* Footer */
html.theme-hybrid .app-sidebar .sidebar-footer,
body.theme-hybrid .app-sidebar .sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Close Button (mobile) */
html.theme-hybrid .app-sidebar .sidebar-close-btn,
body.theme-hybrid .app-sidebar .sidebar-close-btn {
    color: #d1d5db !important;
}

html.theme-hybrid .app-sidebar .sidebar-close-btn:hover,
body.theme-hybrid .app-sidebar .sidebar-close-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Hybrid Theme: Header - Dark mode matching */
html.theme-hybrid .app-header,
body.theme-hybrid .app-header {
    background: #1a1a1a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.theme-hybrid .header-logo,
body.theme-hybrid .header-logo {
    background: #242424 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.theme-hybrid .top-header,
body.theme-hybrid .top-header {
    background: #242424 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.theme-hybrid .header-navbars,
body.theme-hybrid .header-navbars {
    background: transparent !important;
}

html.theme-hybrid .header-navbar,
body.theme-hybrid .header-navbar {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Toolbar Links and Buttons - Ensure ALL text/icons are visible */
html.theme-hybrid .toolbar-link,
body.theme-hybrid .toolbar-link,
html.theme-hybrid .toolbar-link *,
body.theme-hybrid .toolbar-link *,
html.theme-hybrid .toolbar-link span,
body.theme-hybrid .toolbar-link span,
html.theme-hybrid .toolbar-link i,
body.theme-hybrid .toolbar-link i {
    color: #f3f4f6 !important;
}

html.theme-hybrid .toolbar-link:hover,
body.theme-hybrid .toolbar-link:hover,
html.theme-hybrid .toolbar-link:hover *,
body.theme-hybrid .toolbar-link:hover * {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

html.theme-hybrid .toolbar-btn,
body.theme-hybrid .toolbar-btn,
html.theme-hybrid .toolbar-btn *,
body.theme-hybrid .toolbar-btn *,
html.theme-hybrid .toolbar-btn span,
body.theme-hybrid .toolbar-btn span,
html.theme-hybrid .toolbar-btn i,
body.theme-hybrid .toolbar-btn i {
    color: #f3f4f6 !important;
}

html.theme-hybrid .toolbar-btn:hover,
body.theme-hybrid .toolbar-btn:hover,
html.theme-hybrid .toolbar-btn:hover *,
body.theme-hybrid .toolbar-btn:hover * {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Header Navbar specific overrides */
html.theme-hybrid .header-navbar,
body.theme-hybrid .header-navbar {
    background: transparent !important;
}

html.theme-hybrid .header-navbar *,
body.theme-hybrid .header-navbar * {
    color: #f3f4f6;
}

html.theme-hybrid .navbar-left,
body.theme-hybrid .navbar-left,
html.theme-hybrid .navbar-right,
body.theme-hybrid .navbar-right {
    color: #f3f4f6 !important;
}

/* Dropdown menus in header - keep them readable */
html.theme-hybrid .header-navbar .dropdown-menu,
body.theme-hybrid .header-navbar .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

html.theme-hybrid .header-navbar .dropdown-menu *,
body.theme-hybrid .header-navbar .dropdown-menu * {
    color: #1f2937 !important;
}

html.theme-hybrid .header-navbar .dropdown-item:hover,
body.theme-hybrid .header-navbar .dropdown-item:hover {
    background: #f3f4f6 !important;
}

html.theme-hybrid .header-navbar .dropdown-header,
body.theme-hybrid .header-navbar .dropdown-header {
    color: #6b7280 !important;
}

html.theme-hybrid .app-header .header-nav-item,
body.theme-hybrid .app-header .header-nav-item {
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-header .header-user-btn,
body.theme-hybrid .app-header .header-user-btn {
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-header .header-user-btn:hover,
body.theme-hybrid .app-header .header-user-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Theme Dropdown in Hybrid */
html.theme-hybrid .theme-dropdown-toggle,
body.theme-hybrid .theme-dropdown-toggle {
    color: #d1d5db !important;
}

html.theme-hybrid .theme-dropdown-toggle:hover,
body.theme-hybrid .theme-dropdown-toggle:hover {
    color: #ffffff !important;
}

/* Social Links - Hybrid Theme (in sidebar dark bg) */
html.theme-hybrid .app-sidebar .social-link,
body.theme-hybrid .app-sidebar .social-link {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #d1d5db !important;
}

html.theme-hybrid .app-sidebar .social-link:hover,
body.theme-hybrid .app-sidebar .social-link:hover {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

/* Hybrid Theme: Navbar matches dark mode */
html.theme-hybrid .app-navbar,
body.theme-hybrid .app-navbar {
    background-color: #242424 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-navbar *,
body.theme-hybrid .app-navbar * {
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-navbar a:hover,
body.theme-hybrid .app-navbar a:hover {
    color: #ffffff !important;
}

/* Hybrid Theme: Scrollbar for forest green sidebar */
html.theme-hybrid .app-sidebar::-webkit-scrollbar-track,
body.theme-hybrid .app-sidebar::-webkit-scrollbar-track {
    background: #1a1a1a !important;
}

html.theme-hybrid .app-sidebar::-webkit-scrollbar-thumb,
body.theme-hybrid .app-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
}

html.theme-hybrid .app-sidebar::-webkit-scrollbar-thumb:hover,
body.theme-hybrid .app-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Mobile Menu Buttons */
html.theme-hybrid .mobile-menu-btn,
body.theme-hybrid .mobile-menu-btn {
    color: #e5e7eb !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html.theme-hybrid .mobile-menu-btn:hover,
body.theme-hybrid .mobile-menu-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* KI Labor Button - Emerald accent with white hover for hybrid */
html.theme-hybrid .ki-labor-btn,
body.theme-hybrid .ki-labor-btn {
    background: #10b981 !important;
    color: #ffffff !important;
    border: 1px solid #10b981 !important;
}

html.theme-hybrid .ki-labor-btn span,
body.theme-hybrid .ki-labor-btn span,
html.theme-hybrid .ki-labor-btn i.bi-stars,
body.theme-hybrid .ki-labor-btn i.bi-stars {
    color: #ffffff !important;
}

html.theme-hybrid .ki-labor-btn:hover,
body.theme-hybrid .ki-labor-btn:hover {
    background: #34d399 !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
}

html.theme-hybrid .ki-labor-btn:hover span,
body.theme-hybrid .ki-labor-btn:hover span,
html.theme-hybrid .ki-labor-btn:hover i,
body.theme-hybrid .ki-labor-btn:hover i {
    color: #ffffff !important;
}

/* Secondary Navbar (Social Links) - dark mode neutral */
html.theme-hybrid .header-navbar-secondary,
body.theme-hybrid .header-navbar-secondary {
    background: linear-gradient(180deg, #242424 0%, #1a1a1a 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.theme-hybrid .header-navbar-secondary a:not(.social-link),
body.theme-hybrid .header-navbar-secondary a:not(.social-link),
html.theme-hybrid .header-navbar-secondary i,
body.theme-hybrid .header-navbar-secondary i {
    color: #d1d5db !important;
}

html.theme-hybrid .header-navbar-secondary a:not(.social-link):hover,
body.theme-hybrid .header-navbar-secondary a:not(.social-link):hover,
html.theme-hybrid .header-navbar-secondary a:not(.social-link):hover i,
body.theme-hybrid .header-navbar-secondary a:not(.social-link):hover i {
    color: #ffffff !important;
}

/* Social Links in secondary navbar - dark mode neutral */
html.theme-hybrid .header-navbar-secondary .social-link,
body.theme-hybrid .header-navbar-secondary .social-link {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f3f4f6 !important;
}

html.theme-hybrid .header-navbar-secondary .social-link i,
body.theme-hybrid .header-navbar-secondary .social-link i {
    color: #f3f4f6 !important;
}

html.theme-hybrid .header-navbar-secondary .social-link:hover,
body.theme-hybrid .header-navbar-secondary .social-link:hover {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

html.theme-hybrid .header-navbar-secondary .social-link:hover i,
body.theme-hybrid .header-navbar-secondary .social-link:hover i {
    color: #ffffff !important;
}

/* Leichte Sprache button */
html.theme-hybrid .leichte-sprache-btn,
body.theme-hybrid .leichte-sprache-btn,
html.theme-hybrid a[href*="Leichtesprache"],
body.theme-hybrid a[href*="Leichtesprache"] {
    color: #f3f4f6 !important;
}

html.theme-hybrid .leichte-sprache-btn *,
body.theme-hybrid .leichte-sprache-btn * {
    color: #f3f4f6 !important;
    stroke: #f3f4f6 !important;
}

/* Hybrid Theme: Form inputs with white background */
html.theme-hybrid .form-control,
body.theme-hybrid .form-control,
html.theme-hybrid .form-select,
body.theme-hybrid .form-select,
html.theme-hybrid input[type="text"],
body.theme-hybrid input[type="text"],
html.theme-hybrid input[type="email"],
body.theme-hybrid input[type="email"],
html.theme-hybrid input[type="password"],
body.theme-hybrid input[type="password"],
html.theme-hybrid input[type="search"],
body.theme-hybrid input[type="search"],
html.theme-hybrid input[type="number"],
body.theme-hybrid input[type="number"],
html.theme-hybrid input[type="url"],
body.theme-hybrid input[type="url"],
html.theme-hybrid input[type="tel"],
body.theme-hybrid input[type="tel"],
html.theme-hybrid textarea,
body.theme-hybrid textarea,
html.theme-hybrid select,
body.theme-hybrid select {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Hybrid Theme: Cards with clean white */
html.theme-hybrid .admin-project-card,
body.theme-hybrid .admin-project-card,
html.theme-hybrid .card,
body.theme-hybrid .card {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ============================================
   HYBRID THEME: ACCENT COLOR OVERRIDES
   Use forest green accent for consistency
   ============================================ */

/* Page Headers - Dark text for readability */
html.theme-hybrid h1,
body.theme-hybrid h1,
html.theme-hybrid h2,
body.theme-hybrid h2,
html.theme-hybrid .page-title,
body.theme-hybrid .page-title,
html.theme-hybrid .section-title,
body.theme-hybrid .section-title {
    color: #0f172a !important;
}

/* Hero slider text must stay white on dark overlay */
html.theme-hybrid .hero-overlay .hero-title,
body.theme-hybrid .hero-overlay .hero-title,
html.theme-hybrid .hero-overlay .hero-title *,
body.theme-hybrid .hero-overlay .hero-title *,
html.theme-hybrid .hero-overlay .hero-description,
body.theme-hybrid .hero-overlay .hero-description {
    color: #ffffff !important;
}

/* Accent-colored page titles (like "Events – Termine") */
html.theme-hybrid .page-header h1,
body.theme-hybrid .page-header h1,
html.theme-hybrid .content-header h1,
body.theme-hybrid .content-header h1,
html.theme-hybrid .werke-title,
body.theme-hybrid .werke-title,
html.theme-hybrid .events-title,
body.theme-hybrid .events-title,
html.theme-hybrid .ki-assistant-title,
body.theme-hybrid .ki-assistant-title,
html.theme-hybrid .my-projects-title,
body.theme-hybrid .my-projects-title,
html.theme-hybrid .raum-title,
body.theme-hybrid .raum-title {
    color: #059669 !important;
}

/* ============================================
   HYBRID THEME: BUTTON OVERRIDES
   All buttons: filled with white text by default,
   outline on hover for clear visibility on light bg
   ============================================ */

/* Primary Buttons - Forest Green, white text */
html.theme-hybrid .btn-primary,
body.theme-hybrid .btn-primary,
html.theme-hybrid .btn-accent,
body.theme-hybrid .btn-accent {
    background: #10b981 !important;
    border: 2px solid #10b981 !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-primary:hover,
body.theme-hybrid .btn-primary:hover,
html.theme-hybrid .btn-accent:hover,
body.theme-hybrid .btn-accent:hover {
    background: transparent !important;
    border-color: #10b981 !important;
    color: #059669 !important;
}

/* Success Buttons - most used across views */
html.theme-hybrid .btn-success,
body.theme-hybrid .btn-success {
    background: var(--accent-primary) !important;
    border: 2px solid var(--accent-primary) !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-success:hover,
body.theme-hybrid .btn-success:hover {
    background: transparent !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* Override text-light on btn-success (used in views like MyProjects/Upsert) */
html.theme-hybrid .btn-success.text-light,
body.theme-hybrid .btn-success.text-light {
    color: #ffffff !important;
}

html.theme-hybrid .btn-success.text-light:hover,
body.theme-hybrid .btn-success.text-light:hover {
    color: var(--accent-primary) !important;
}

/* Outline Success Buttons - filled by default, outline on hover */
html.theme-hybrid .btn-outline-success,
body.theme-hybrid .btn-outline-success {
    background: #10b981 !important;
    border: 2px solid #10b981 !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-outline-success:hover,
body.theme-hybrid .btn-outline-success:hover {
    background: transparent !important;
    border-color: #10b981 !important;
    color: #059669 !important;
}

/* Outline Primary Buttons - filled by default, outline on hover */
html.theme-hybrid .btn-outline-primary,
body.theme-hybrid .btn-outline-primary {
    background: #10b981 !important;
    border: 2px solid #10b981 !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-outline-primary:hover,
body.theme-hybrid .btn-outline-primary:hover {
    background: transparent !important;
    border-color: #10b981 !important;
    color: #059669 !important;
}

/* Info Buttons */
html.theme-hybrid .btn-info,
body.theme-hybrid .btn-info {
    background: #06b6d4 !important;
    border: 2px solid #06b6d4 !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-info:hover,
body.theme-hybrid .btn-info:hover {
    background: transparent !important;
    border-color: #06b6d4 !important;
    color: #0e7490 !important;
}

html.theme-hybrid .btn-outline-info,
body.theme-hybrid .btn-outline-info {
    background: #06b6d4 !important;
    border: 2px solid #06b6d4 !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-outline-info:hover,
body.theme-hybrid .btn-outline-info:hover {
    background: transparent !important;
    border-color: #06b6d4 !important;
    color: #0e7490 !important;
}

/* Warning Buttons */
html.theme-hybrid .btn-warning,
body.theme-hybrid .btn-warning {
    background: #f59e0b !important;
    border: 2px solid #f59e0b !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-warning:hover,
body.theme-hybrid .btn-warning:hover {
    background: transparent !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
}

html.theme-hybrid .btn-outline-warning,
body.theme-hybrid .btn-outline-warning {
    background: #f59e0b !important;
    border: 2px solid #f59e0b !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-outline-warning:hover,
body.theme-hybrid .btn-outline-warning:hover {
    background: transparent !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
}

/* Danger Buttons */
html.theme-hybrid .btn-danger,
body.theme-hybrid .btn-danger {
    background: #ef4444 !important;
    border: 2px solid #ef4444 !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-danger:hover,
body.theme-hybrid .btn-danger:hover {
    background: transparent !important;
    border-color: #ef4444 !important;
    color: #dc2626 !important;
}

html.theme-hybrid .btn-outline-danger,
body.theme-hybrid .btn-outline-danger {
    background: #ef4444 !important;
    border: 2px solid #ef4444 !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-outline-danger:hover,
body.theme-hybrid .btn-outline-danger:hover {
    background: transparent !important;
    border-color: #ef4444 !important;
    color: #dc2626 !important;
}

/* Secondary Buttons */
html.theme-hybrid .btn-secondary,
body.theme-hybrid .btn-secondary {
    background: #64748b !important;
    border: 2px solid #64748b !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-secondary:hover,
body.theme-hybrid .btn-secondary:hover {
    background: transparent !important;
    border-color: #64748b !important;
    color: #475569 !important;
}

html.theme-hybrid .btn-outline-secondary,
body.theme-hybrid .btn-outline-secondary {
    background: #64748b !important;
    border: 2px solid #64748b !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-outline-secondary:hover,
body.theme-hybrid .btn-outline-secondary:hover {
    background: transparent !important;
    border-color: #64748b !important;
    color: #475569 !important;
}

/* Dark Buttons */
html.theme-hybrid .btn-dark,
body.theme-hybrid .btn-dark {
    background: #1e293b !important;
    border: 2px solid #1e293b !important;
    color: #ffffff !important;
}

html.theme-hybrid .btn-dark:hover,
body.theme-hybrid .btn-dark:hover {
    background: transparent !important;
    border-color: #1e293b !important;
    color: #1e293b !important;
}

/* Light Buttons - inverted: outline by default, filled on hover */
html.theme-hybrid .btn-light,
body.theme-hybrid .btn-light {
    background: #ffffff !important;
    border: 2px solid #d1d5db !important;
    color: #0f172a !important;
}

html.theme-hybrid .btn-light:hover,
body.theme-hybrid .btn-light:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Checked state for btn-check (tag toggles like Schlagworte) */
html.theme-hybrid .btn-check:checked + .btn-outline-success,
body.theme-hybrid .btn-check:checked + .btn-outline-success,
html.theme-hybrid .btn-check:checked + .btn-outline-primary,
body.theme-hybrid .btn-check:checked + .btn-outline-primary {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

/* Ensure button icons and spans inherit color */
html.theme-hybrid .btn-success i,
body.theme-hybrid .btn-success i,
html.theme-hybrid .btn-success span:not(.badge),
body.theme-hybrid .btn-success span:not(.badge),
html.theme-hybrid .btn-primary i,
body.theme-hybrid .btn-primary i,
html.theme-hybrid .btn-primary span:not(.badge),
body.theme-hybrid .btn-primary span:not(.badge) {
    color: inherit !important;
}

/* Links - Use Forest Green */
html.theme-hybrid a:not([class*="btn-"]):not(.btn):not(.modern-card-link),
body.theme-hybrid a:not([class*="btn-"]):not(.btn):not(.modern-card-link) {
    color: #059669;
}

html.theme-hybrid a:not([class*="btn-"]):not(.btn):not(.modern-card-link):hover,
body.theme-hybrid a:not([class*="btn-"]):not(.btn):not(.modern-card-link):hover {
    color: #047857;
}

/* Breadcrumb - neutral background */
html.theme-hybrid .breadcrumb,
body.theme-hybrid .breadcrumb {
    background-color: #e5e7eb !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Breadcrumb Links */
html.theme-hybrid .breadcrumb a,
body.theme-hybrid .breadcrumb a,
html.theme-hybrid .breadcrumb-item a,
body.theme-hybrid .breadcrumb-item a {
    color: #059669 !important;
}

html.theme-hybrid .breadcrumb a:hover,
body.theme-hybrid .breadcrumb a:hover,
html.theme-hybrid .breadcrumb-item a:hover,
body.theme-hybrid .breadcrumb-item a:hover {
    color: #047857 !important;
}

html.theme-hybrid .breadcrumb-item.active,
body.theme-hybrid .breadcrumb-item.active {
    color: #334155 !important;
}

/* Event Cards, Project Cards - Forest Green Accent */
html.theme-hybrid .event-card .btn,
body.theme-hybrid .event-card .btn,
html.theme-hybrid .project-card .btn,
body.theme-hybrid .project-card .btn {
    background: #10b981 !important;
    border: 2px solid #10b981 !important;
    color: #ffffff !important;
}

html.theme-hybrid .event-card .btn:hover,
body.theme-hybrid .event-card .btn:hover,
html.theme-hybrid .project-card .btn:hover,
body.theme-hybrid .project-card .btn:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

/* Badge/Tag Accents */
html.theme-hybrid .badge-primary,
body.theme-hybrid .badge-primary,
html.theme-hybrid .tag-primary,
body.theme-hybrid .tag-primary {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

/* Focus States */
html.theme-hybrid input:focus,
body.theme-hybrid input:focus,
html.theme-hybrid select:focus,
body.theme-hybrid select:focus,
html.theme-hybrid textarea:focus,
body.theme-hybrid textarea:focus,
html.theme-hybrid .form-control:focus,
body.theme-hybrid .form-control:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* Active/Selected States */
html.theme-hybrid .active,
body.theme-hybrid .active,
html.theme-hybrid .selected,
body.theme-hybrid .selected {
    border-color: #10b981;
}

/* Profile/Account Page Sidebar */
html.theme-hybrid .account-sidebar .nav-link.active,
body.theme-hybrid .account-sidebar .nav-link.active,
html.theme-hybrid .profile-sidebar .active,
body.theme-hybrid .profile-sidebar .active,
html.theme-hybrid .settings-nav .active,
body.theme-hybrid .settings-nav .active {
    background: #10b981 !important;
    color: #ffffff !important;
}

/* Tab Navigation */
html.theme-hybrid .nav-tabs .nav-link.active,
body.theme-hybrid .nav-tabs .nav-link.active {
    border-color: #10b981 !important;
    color: #059669 !important;
}

html.theme-hybrid .nav-pills .nav-link.active,
body.theme-hybrid .nav-pills .nav-link.active {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

/* Icon Accents */
html.theme-hybrid .icon-accent,
body.theme-hybrid .icon-accent,
html.theme-hybrid .feature-icon,
body.theme-hybrid .feature-icon {
    color: #10b981 !important;
}

/* Progress Bars */
html.theme-hybrid .progress-bar,
body.theme-hybrid .progress-bar {
    background-color: #10b981 !important;
}

/* Alerts Info */
html.theme-hybrid .alert-info,
body.theme-hybrid .alert-info {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: #065f46 !important;
}

/* Dropdown Active Items */
html.theme-hybrid .dropdown-item.active,
body.theme-hybrid .dropdown-item.active,
html.theme-hybrid .dropdown-item:active,
body.theme-hybrid .dropdown-item:active {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

/* Pagination */
html.theme-hybrid .page-link,
body.theme-hybrid .page-link {
    color: #059669 !important;
}

html.theme-hybrid .page-item.active .page-link,
body.theme-hybrid .page-item.active .page-link {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

/* Checkboxes and Radio Buttons */
html.theme-hybrid input[type="checkbox"]:checked,
body.theme-hybrid input[type="checkbox"]:checked,
html.theme-hybrid input[type="radio"]:checked,
body.theme-hybrid input[type="radio"]:checked {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}

/* Switch/Toggle */
html.theme-hybrid .form-switch .form-check-input:checked,
body.theme-hybrid .form-switch .form-check-input:checked {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}

/* Loading Spinners */
html.theme-hybrid .spinner-border,
body.theme-hybrid .spinner-border {
    color: #10b981 !important;
}

/* Specific Page Styles */

/* KI Assistant Page */
html.theme-hybrid .ki-assistant-header,
body.theme-hybrid .ki-assistant-header,
html.theme-hybrid .ai-chat-header,
body.theme-hybrid .ai-chat-header {
    background: linear-gradient(135deg, #0f1c17 0%, #142119 100%) !important;
}

/* Resources Page */
html.theme-hybrid .resource-card .btn,
body.theme-hybrid .resource-card .btn {
    background: #10b981 !important;
    border: 2px solid #10b981 !important;
    color: #ffffff !important;
}

html.theme-hybrid .resource-card .btn:hover,
body.theme-hybrid .resource-card .btn:hover {
    background: transparent !important;
    color: #059669 !important;
}

/* My Projects Page */
html.theme-hybrid .project-actions .btn-primary,
body.theme-hybrid .project-actions .btn-primary {
    background: #10b981 !important;
    border: 2px solid #10b981 !important;
    color: #ffffff !important;
}

/* Room/Raum Page */
html.theme-hybrid .room-card .btn,
body.theme-hybrid .room-card .btn,
html.theme-hybrid .raum-card .btn,
body.theme-hybrid .raum-card .btn {
    background: #10b981 !important;
    border: 2px solid #10b981 !important;
    color: #ffffff !important;
}

html.theme-hybrid .room-card .btn:hover,
body.theme-hybrid .room-card .btn:hover,
html.theme-hybrid .raum-card .btn:hover,
body.theme-hybrid .raum-card .btn:hover {
    background: transparent !important;
    color: #059669 !important;
}

/* Spotlight/Werke Page */
html.theme-hybrid .spotlight-header,
body.theme-hybrid .spotlight-header,
html.theme-hybrid .werke-header,
body.theme-hybrid .werke-header {
    color: #059669 !important;
}

html.theme-hybrid .spotlight-btn,
body.theme-hybrid .spotlight-btn,
html.theme-hybrid .werk-btn,
body.theme-hybrid .werk-btn {
    background: #10b981 !important;
    border: 2px solid #10b981 !important;
    color: #ffffff !important;
}

html.theme-hybrid .spotlight-btn:hover,
body.theme-hybrid .spotlight-btn:hover,
html.theme-hybrid .werk-btn:hover,
body.theme-hybrid .werk-btn:hover {
    background: transparent !important;
    color: #059669 !important;
}

/* ============================================
   HYBRID THEME: PAGE-SPECIFIC OVERRIDES
   Override inline blue styles in views with forest green
   ============================================ */

/* Event Page Header - Override inline blue gradient */
html.theme-hybrid .event-page-heading,
body.theme-hybrid .event-page-heading {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.theme-hybrid .calendar-icon-blue,
body.theme-hybrid .calendar-icon-blue {
    color: #10b981 !important;
    -webkit-text-fill-color: #10b981 !important;
}

/* Event Entry Buttons */
html.theme-hybrid .event-entry .btn,
body.theme-hybrid .event-entry .btn,
html.theme-hybrid .event-btn,
body.theme-hybrid .event-btn {
    background: #10b981 !important;
    border: 2px solid #10b981 !important;
    color: #ffffff !important;
}

html.theme-hybrid .event-entry .btn:hover,
body.theme-hybrid .event-entry .btn:hover,
html.theme-hybrid .event-btn:hover,
body.theme-hybrid .event-btn:hover {
    background: transparent !important;
    color: #059669 !important;
}

/* Werke/Spotlight Page */
html.theme-hybrid .werke-page-heading,
body.theme-hybrid .werke-page-heading,
html.theme-hybrid .spotlight-page-heading,
body.theme-hybrid .spotlight-page-heading {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* KI Assistant Page */
html.theme-hybrid .ki-page-heading,
body.theme-hybrid .ki-page-heading,
html.theme-hybrid .ki-assistant-page-heading,
body.theme-hybrid .ki-assistant-page-heading {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* My Projects Page */
html.theme-hybrid .my-projects-heading,
body.theme-hybrid .my-projects-heading,
html.theme-hybrid .projects-page-heading,
body.theme-hybrid .projects-page-heading {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Raum Page */
html.theme-hybrid .raum-page-heading,
body.theme-hybrid .raum-page-heading,
html.theme-hybrid .room-page-heading,
body.theme-hybrid .room-page-heading {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Override ALL blue gradient text in hybrid theme */
html.theme-hybrid [style*="background: linear-gradient"][style*="3b82f6"],
body.theme-hybrid [style*="background: linear-gradient"][style*="3b82f6"],
html.theme-hybrid [style*="background:linear-gradient"][style*="3b82f6"],
body.theme-hybrid [style*="background:linear-gradient"][style*="3b82f6"] {
    background: linear-gradient(to right, #059669, #10b981) !important;
}

/* Icons using accent-primary color */
html.theme-hybrid [style*="color: var(--accent-primary)"]:not([class*="btn-"]):not(button),
body.theme-hybrid [style*="color: var(--accent-primary)"]:not([class*="btn-"]):not(button),
html.theme-hybrid [style*="color:var(--accent-primary)"]:not([class*="btn-"]):not(button),
body.theme-hybrid [style*="color:var(--accent-primary)"]:not([class*="btn-"]):not(button) {
    color: #10b981 !important;
}

/* MakerSpace Page */
html.theme-hybrid .makerspace-page-heading,
body.theme-hybrid .makerspace-page-heading {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* IdeenPool Page */
html.theme-hybrid .ideenpool-page-heading,
body.theme-hybrid .ideenpool-page-heading {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Lesezeichen Page */
html.theme-hybrid .lesezeichen-page-heading,
body.theme-hybrid .lesezeichen-page-heading {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Generic Page Headings with Gradients */
html.theme-hybrid h1[style*="gradient"],
body.theme-hybrid h1[style*="gradient"],
html.theme-hybrid h2[style*="gradient"],
body.theme-hybrid h2[style*="gradient"] {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Skills/Ressourcen Page */
html.theme-hybrid .skills-page-heading,
body.theme-hybrid .skills-page-heading,
html.theme-hybrid .ressourcen-page-heading,
body.theme-hybrid .ressourcen-page-heading {
    background: linear-gradient(to right, #059669, #10b981) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Card Borders - Use Forest Green */
html.theme-hybrid .card[style*="border-left"],
body.theme-hybrid .card[style*="border-left"],
html.theme-hybrid .event-entry[style*="border-left"],
body.theme-hybrid .event-entry[style*="border-left"] {
    border-left-color: #10b981 !important;
}

/* Feature Icons */
html.theme-hybrid .feature-icon,
body.theme-hybrid .feature-icon,
html.theme-hybrid .icon-box,
body.theme-hybrid .icon-box {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}

/* Quote/Highlight Borders */
html.theme-hybrid blockquote,
body.theme-hybrid blockquote {
    border-left-color: #10b981 !important;
}

/* Selection Color */
html.theme-hybrid ::selection,
body.theme-hybrid ::selection {
    background: rgba(16, 185, 129, 0.3) !important;
}

/* CTA Sections */
html.theme-hybrid .cta-section,
body.theme-hybrid .cta-section {
    background: linear-gradient(135deg, #0f1c17 0%, #142119 100%) !important;
}

/* Contact/Kontakt Icons */
html.theme-hybrid .contact-icon,
body.theme-hybrid .contact-icon {
    color: #10b981 !important;
}

/* Profile/Account Active Tab */
html.theme-hybrid .list-group-item.active,
body.theme-hybrid .list-group-item.active {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

/* Accent Border Colors */
html.theme-hybrid .border-primary,
body.theme-hybrid .border-primary {
    border-color: #10b981 !important;
}

/* Text using accent-primary variable */
html.theme-hybrid .text-primary,
body.theme-hybrid .text-primary {
    color: #059669 !important;
}

/* Background using accent-primary variable */
html.theme-hybrid .bg-primary,
body.theme-hybrid .bg-primary {
    background-color: #10b981 !important;
}

/* ============================================
   HYBRID THEME: RIGHT SIDEBAR
   Forest green background matching left sidebar
   ============================================ */

/* Right Sidebar - Dark mode matching left sidebar */
html.theme-hybrid .app-sidebar-right,
body.theme-hybrid .app-sidebar-right {
    background: #1a1a1a !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item,
body.theme-hybrid .app-sidebar-right .sidebar-nav-item {
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-label,
body.theme-hybrid .app-sidebar-right .sidebar-nav-label {
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-icon,
body.theme-hybrid .app-sidebar-right .sidebar-nav-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e5e7eb !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-icon i,
body.theme-hybrid .app-sidebar-right .sidebar-nav-icon i {
    color: #f3f4f6 !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item:hover,
body.theme-hybrid .app-sidebar-right .sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item:hover .sidebar-nav-label,
body.theme-hybrid .app-sidebar-right .sidebar-nav-item:hover .sidebar-nav-label {
    color: #ffffff !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon,
body.theme-hybrid .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.08);
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon i,
body.theme-hybrid .app-sidebar-right .sidebar-nav-item:hover:not(.active) .sidebar-nav-icon i {
    color: #ffffff !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item.active,
body.theme-hybrid .app-sidebar-right .sidebar-nav-item.active {
    background: rgba(16, 185, 129, 0.2) !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item.active::before {
    background: linear-gradient(180deg, #10b981 0%, #34d399 100%) !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon,
body.theme-hybrid .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon i,
body.theme-hybrid .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-icon i {
    color: #ffffff !important;
}

html.theme-hybrid .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-label,
body.theme-hybrid .app-sidebar-right .sidebar-nav-item.active .sidebar-nav-label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Right sidebar toggle button */
html.theme-hybrid .sidebar-right-toggle-btn,
body.theme-hybrid .sidebar-right-toggle-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #d1d5db !important;
}

html.theme-hybrid .sidebar-right-toggle-btn svg,
body.theme-hybrid .sidebar-right-toggle-btn svg {
    stroke: #d1d5db !important;
}

/* Right sidebar divider */
html.theme-hybrid .app-sidebar-right .sidebar-divider,
body.theme-hybrid .app-sidebar-right .sidebar-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   HYBRID THEME: ADMIN DROPDOWN
   White background with dark text (matches content area)
   ============================================ */

html.theme-hybrid .sidebar-admin-dropdown,
body.theme-hybrid .sidebar-admin-dropdown {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
}

html.theme-hybrid .admin-panel-header,
body.theme-hybrid .admin-panel-header {
    background: linear-gradient(135deg, #0f1c17 0%, #142119 100%) !important;
    color: #ffffff !important;
}

html.theme-hybrid .admin-panel-header i,
body.theme-hybrid .admin-panel-header i,
html.theme-hybrid .admin-panel-header span,
body.theme-hybrid .admin-panel-header span {
    color: #ffffff !important;
}

html.theme-hybrid .admin-section-header,
body.theme-hybrid .admin-section-header {
    color: #6b7280 !important;
}

html.theme-hybrid .admin-dropdown-item,
body.theme-hybrid .admin-dropdown-item,
html.theme-hybrid a.admin-dropdown-item,
body.theme-hybrid a.admin-dropdown-item,
html.theme-hybrid a.admin-dropdown-item:link,
body.theme-hybrid a.admin-dropdown-item:link,
html.theme-hybrid a.admin-dropdown-item:visited,
body.theme-hybrid a.admin-dropdown-item:visited {
    color: #374151 !important;
}

html.theme-hybrid .admin-dropdown-item i,
body.theme-hybrid .admin-dropdown-item i {
    color: #6b7280 !important;
}

html.theme-hybrid .admin-dropdown-item:hover,
body.theme-hybrid .admin-dropdown-item:hover,
html.theme-hybrid a.admin-dropdown-item:hover,
body.theme-hybrid a.admin-dropdown-item:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}

html.theme-hybrid .admin-dropdown-item:hover i,
body.theme-hybrid .admin-dropdown-item:hover i {
    color: #10b981 !important;
}

html.theme-hybrid .admin-dropdown-divider,
body.theme-hybrid .admin-dropdown-divider {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Admin dropdown scrollbar */
html.theme-hybrid .sidebar-admin-dropdown::-webkit-scrollbar-track,
body.theme-hybrid .sidebar-admin-dropdown::-webkit-scrollbar-track {
    background: #f9fafb !important;
}

html.theme-hybrid .sidebar-admin-dropdown::-webkit-scrollbar-thumb,
body.theme-hybrid .sidebar-admin-dropdown::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
}

/* Logout button in admin dropdown */
html.theme-hybrid .sidebar-logout-btn,
body.theme-hybrid .sidebar-logout-btn {
    color: #ef4444 !important;
}

html.theme-hybrid .sidebar-logout-btn i,
body.theme-hybrid .sidebar-logout-btn i {
    color: #ef4444 !important;
}

html.theme-hybrid .sidebar-logout-btn:hover,
body.theme-hybrid .sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

/* ================================================================
   HYBRID THEME - Create/Edit Page Headers
   Ensure white text on gradient backgrounds
   ================================================================ */

html.theme-hybrid .create-header,
body.theme-hybrid .create-header {
    color: #ffffff !important;
}

html.theme-hybrid .create-header h1,
html.theme-hybrid .create-header h2,
html.theme-hybrid .create-header h3,
html.theme-hybrid .create-header p,
html.theme-hybrid .create-header span,
body.theme-hybrid .create-header h1,
body.theme-hybrid .create-header h2,
body.theme-hybrid .create-header h3,
body.theme-hybrid .create-header p,
body.theme-hybrid .create-header span {
    color: #ffffff !important;
}

html.theme-hybrid .create-header-icon,
body.theme-hybrid .create-header-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

html.theme-hybrid .create-header-icon i,
body.theme-hybrid .create-header-icon i {
    color: #ffffff !important;
}

/* ================================================================
   HYBRID THEME - CTA Sections (Adiqu & Portfolio)
   Ensure white text on dark/gradient backgrounds
   ================================================================ */

html.theme-hybrid .portfolio-cta,
html.theme-hybrid .cta-theme-adaptive,
html.theme-hybrid section.portfolio-cta,
body.theme-hybrid .portfolio-cta,
body.theme-hybrid .cta-theme-adaptive,
body.theme-hybrid section.portfolio-cta {
    color: #ffffff !important;
}

html.theme-hybrid .portfolio-cta h2,
html.theme-hybrid .portfolio-cta h3,
html.theme-hybrid .portfolio-cta p,
html.theme-hybrid .portfolio-cta span,
html.theme-hybrid .portfolio-cta .cta-title,
html.theme-hybrid .portfolio-cta .cta-subtitle,
body.theme-hybrid .portfolio-cta h2,
body.theme-hybrid .portfolio-cta h3,
body.theme-hybrid .portfolio-cta p,
body.theme-hybrid .portfolio-cta span,
body.theme-hybrid .portfolio-cta .cta-title,
body.theme-hybrid .portfolio-cta .cta-subtitle {
    color: #ffffff !important;
}

html.theme-hybrid .cta-theme-adaptive h2,
html.theme-hybrid .cta-theme-adaptive h3,
html.theme-hybrid .cta-theme-adaptive p,
html.theme-hybrid .cta-theme-adaptive span,
html.theme-hybrid .cta-theme-adaptive .cta-title,
html.theme-hybrid .cta-theme-adaptive .cta-subtitle,
body.theme-hybrid .cta-theme-adaptive h2,
body.theme-hybrid .cta-theme-adaptive h3,
body.theme-hybrid .cta-theme-adaptive p,
body.theme-hybrid .cta-theme-adaptive span,
body.theme-hybrid .cta-theme-adaptive .cta-title,
body.theme-hybrid .cta-theme-adaptive .cta-subtitle {
    color: #ffffff !important;
}

/* CTA buttons in hybrid theme */
html.theme-hybrid .portfolio-cta .cta-btn,
html.theme-hybrid .cta-theme-adaptive .cta-btn,
body.theme-hybrid .portfolio-cta .cta-btn,
body.theme-hybrid .cta-theme-adaptive .cta-btn {
    background: #ffffff !important;
    color: #374151 !important;
}

html.theme-hybrid .portfolio-cta .cta-btn:hover,
html.theme-hybrid .cta-theme-adaptive .cta-btn:hover,
body.theme-hybrid .portfolio-cta .cta-btn:hover,
body.theme-hybrid .cta-theme-adaptive .cta-btn:hover {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* ================================================================
   HYBRID THEME - Form/Page Headers
   Use forest green gradient for headers
   ================================================================ */

html.theme-hybrid .referenz-form-header,
html.theme-hybrid .header-edit-header,
html.theme-hybrid .event-header,
html.theme-hybrid .skill-form-header,
html.theme-hybrid .admin-form-header,
html.theme-hybrid .page-header-gradient,
html.theme-hybrid .upsert-header,
html.theme-hybrid .create-header,
body.theme-hybrid .referenz-form-header,
body.theme-hybrid .header-edit-header,
body.theme-hybrid .event-header,
body.theme-hybrid .skill-form-header,
body.theme-hybrid .admin-form-header,
body.theme-hybrid .page-header-gradient,
body.theme-hybrid .upsert-header,
body.theme-hybrid .create-header {
    background: linear-gradient(135deg, #0f1c17 0%, #142119 100%) !important;
    color: #ffffff !important;
}

html.theme-hybrid .referenz-form-header h1,
html.theme-hybrid .referenz-form-header h2,
html.theme-hybrid .referenz-form-header h3,
html.theme-hybrid .header-edit-header h1,
html.theme-hybrid .header-edit-header h2,
html.theme-hybrid .header-edit-header h3,
html.theme-hybrid .event-header h1,
html.theme-hybrid .event-header h2,
html.theme-hybrid .event-header p,
html.theme-hybrid .event-header .event-date,
html.theme-hybrid .event-header .event-title,
html.theme-hybrid .skill-form-header h1,
html.theme-hybrid .skill-form-header h2,
html.theme-hybrid .admin-form-header h1,
html.theme-hybrid .admin-form-header h2,
html.theme-hybrid .page-header-gradient h1,
html.theme-hybrid .page-header-gradient h2,
html.theme-hybrid .upsert-header h1,
html.theme-hybrid .upsert-header h2,
html.theme-hybrid .create-header h1,
html.theme-hybrid .create-header h2,
body.theme-hybrid .referenz-form-header h1,
body.theme-hybrid .referenz-form-header h2,
body.theme-hybrid .referenz-form-header h3,
body.theme-hybrid .header-edit-header h1,
body.theme-hybrid .header-edit-header h2,
body.theme-hybrid .header-edit-header h3,
body.theme-hybrid .event-header h1,
body.theme-hybrid .event-header h2,
body.theme-hybrid .event-header p,
body.theme-hybrid .event-header .event-date,
body.theme-hybrid .event-header .event-title,
body.theme-hybrid .skill-form-header h1,
body.theme-hybrid .skill-form-header h2,
body.theme-hybrid .admin-form-header h1,
body.theme-hybrid .admin-form-header h2,
body.theme-hybrid .page-header-gradient h1,
body.theme-hybrid .page-header-gradient h2,
body.theme-hybrid .upsert-header h1,
body.theme-hybrid .upsert-header h2,
body.theme-hybrid .create-header h1,
body.theme-hybrid .create-header h2 {
    color: #ffffff !important;
}

/* ================================================================
   UNI/GREEN THEME - Sidebar Navigation
   ================================================================ */

/* Add divider container to sidebar nav */
html.theme-uni .app-sidebar .sidebar-nav,
body.theme-uni .app-sidebar .sidebar-nav {
    position: relative;
}

/* Hide all dividers in uni theme */
html.theme-uni .app-sidebar .sidebar-nav-item::after,
body.theme-uni .app-sidebar .sidebar-nav-item::after {
    display: none !important;
}

html.theme-uni .app-sidebar .sidebar-nav-item::before,
body.theme-uni .app-sidebar .sidebar-nav-item::before {
    display: none !important;
}

/* ================================================================
   BUW Logo Sizing - ALL THEMES
   Logo display rules are in site.css, sizing rules here
   ================================================================ */

/* BUW Logo collapsed state sizing */
.header-logo .logo-uni-collapsed {
    max-height: 55px;
    height: 55px;
    width: auto;
    object-fit: contain;
}

/* BUW Logo expanded state sizing (273 × 91 px) */
body.sidebar-expanded .header-logo .logo-uni-expanded {
    max-height: 91px;
    height: 91px;
    width: auto;
    max-width: 273px;
    object-fit: contain;
}

/* Ensure header-logo container fits properly */
.header-logo {
    min-height: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

/* Sidebar navigation spacing */
html.theme-uni .app-sidebar .sidebar-nav,
body.theme-uni .app-sidebar .sidebar-nav {
    border-top: none;
    margin-top: 0;
    padding-top: 50px;
    position: relative;
}

/* Sidebar toggle button - centered when collapsed */
html.theme-uni .app-sidebar .sidebar-toggle-btn,
body.theme-uni .app-sidebar .sidebar-toggle-btn {
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    z-index: 100;
}

/* Sidebar toggle button - right side when expanded */
html.theme-uni body.sidebar-expanded .app-sidebar .sidebar-toggle-btn,
html.theme-uni.sidebar-expanded .app-sidebar .sidebar-toggle-btn,
body.theme-uni.sidebar-expanded .app-sidebar .sidebar-toggle-btn {
    left: auto !important;
    right: 12px !important;
    transform: none;
}

/* Make sure nav items have proper spacing */
html.theme-uni .app-sidebar .sidebar-nav-item,
body.theme-uni .app-sidebar .sidebar-nav-item {
    position: relative;
    z-index: 5;
}

/* ================================================================
   MOBILE LOGO OVERRIDES - ALL THEMES
   Ensure only the no-text logo is shown on mobile devices
   ================================================================ */
@media (max-width: 992px) {
    /* Hide ALL full-size logos on mobile for ALL themes */
    .header-logo .logo-uni-collapsed,
    .header-logo .logo-uni-expanded,
    html.theme-uni .header-logo .logo-uni-collapsed,
    html.theme-uni .header-logo .logo-uni-expanded,
    html.theme-hybrid .header-logo .logo-uni-collapsed,
    html.theme-hybrid .header-logo .logo-uni-expanded,
    html.theme-dark .header-logo .logo-uni-collapsed,
    html.theme-dark .header-logo .logo-uni-expanded,
    html.theme-light .header-logo .logo-uni-collapsed,
    html.theme-light .header-logo .logo-uni-expanded,
    body.theme-uni .header-logo .logo-uni-collapsed,
    body.theme-uni .header-logo .logo-uni-expanded,
    body.theme-hybrid .header-logo .logo-uni-collapsed,
    body.theme-hybrid .header-logo .logo-uni-expanded,
    body.theme-dark .header-logo .logo-uni-collapsed,
    body.theme-dark .header-logo .logo-uni-expanded,
    body.theme-light .header-logo .logo-uni-collapsed,
    body.theme-light .header-logo .logo-uni-expanded,
    body.sidebar-expanded .header-logo .logo-uni-collapsed,
    body.sidebar-expanded .header-logo .logo-uni-expanded,
    body.sidebar-expanded.theme-uni .header-logo .logo-uni-expanded,
    body.sidebar-expanded.theme-hybrid .header-logo .logo-uni-expanded,
    body.sidebar-expanded.theme-dark .header-logo .logo-uni-expanded,
    body.sidebar-expanded.theme-light .header-logo .logo-uni-expanded {
        display: none !important;
    }

    /* Show only the mobile logo for ALL themes */
    .header-logo .logo-mobile,
    html.theme-uni .header-logo .logo-mobile,
    html.theme-hybrid .header-logo .logo-mobile,
    html.theme-dark .header-logo .logo-mobile,
    html.theme-light .header-logo .logo-mobile,
    body.theme-uni .header-logo .logo-mobile,
    body.theme-hybrid .header-logo .logo-mobile,
    body.theme-dark .header-logo .logo-mobile,
    body.theme-light .header-logo .logo-mobile,
    body.sidebar-expanded .header-logo .logo-mobile {
        display: block !important;
        width: 45px !important;
        height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
    }
}

/* ========================
   UNIVERSAL: Accent-filled buttons must always have white text
   Covers all custom button classes across user views.
========================= */
html.theme-uni .btn-card-action,
body.theme-uni .btn-card-action,
html.theme-uni .btn-card-action:hover,
body.theme-uni .btn-card-action:hover,
html.theme-hybrid .btn-card-action,
body.theme-hybrid .btn-card-action,
html.theme-hybrid .btn-card-action:hover,
body.theme-hybrid .btn-card-action:hover {
    color: #ffffff !important;
}

html.theme-uni .btn-card-action i,
body.theme-uni .btn-card-action i,
html.theme-hybrid .btn-card-action i,
body.theme-hybrid .btn-card-action i {
    color: #ffffff !important;
}

/* ========================
   UNIVERSAL: Highlight card action buttons — solid background + white text on hover
   Prevents transparent hover that makes text invisible on accent backgrounds.
========================= */
html.theme-dark .highlight-card:hover .highlight-card-action,
body.theme-dark .highlight-card:hover .highlight-card-action {
    background: #2563eb !important;
    color: #ffffff !important;
}

html.theme-light .highlight-card:hover .highlight-card-action,
body.theme-light .highlight-card:hover .highlight-card-action {
    background: #1e40af !important;
    color: #ffffff !important;
}

html.theme-violett .highlight-card:hover .highlight-card-action,
body.theme-violett .highlight-card:hover .highlight-card-action {
    background: #8b5cf6 !important;
    color: #ffffff !important;
}

html.theme-uni .highlight-card:hover .highlight-card-action,
body.theme-uni .highlight-card:hover .highlight-card-action {
    background: #6BA31E !important;
    color: #ffffff !important;
}

html.theme-nature .highlight-card:hover .highlight-card-action,
body.theme-nature .highlight-card:hover .highlight-card-action {
    background: #059669 !important;
    color: #ffffff !important;
}

html.theme-hybrid .highlight-card:hover .highlight-card-action,
body.theme-hybrid .highlight-card:hover .highlight-card-action {
    background: #047857 !important;
    color: #ffffff !important;
}

/* UNIVERSAL: Card action links — keep white text on accent background across all themes */
.modern-card-link:hover,
.werke-card-link:hover,
.werke-card:hover .werke-card-link,
.highlight-card:hover .highlight-card-action,
.highlight-card:hover .highlight-card-footer,
.skill-card:hover .skill-card-action {
    color: #ffffff !important;
}