/**
 * Kommunale Exzellenz Suite - Theme Variables
 * =============================================
 * Central theme configuration for colors and typography
 * Future: Customer-customizable branding
 * Created: September 2025
 */

:root {
    /* =================================================================
       BRAND COLORS - Core identity
       ================================================================= */

    /* Primary Brand Colors */
    --primary-color: #003D83;           /* Professional dark blue */
    --primary-color-dark: #002956;      /* Darker variant */
    --primary-color-light: #0056b3;     /* Lighter variant */
    --secondary-color: #002a5c;         /* Secondary blue for gradients */
    --accent-color: #FFD700;            /* Gold - excellence */

    /* CTA/Action Colors */
    --cta-start: #FF6B35;               /* Orange gradient start */
    --cta-end: #FFA500;                 /* Orange gradient end */

    /* =================================================================
       RAINBOW WORKFLOW MODEL - Content type identification system
       ================================================================= */
    /*
       Workflow Order (Top to Bottom):
       1. Directives (Red) - Rules/Framework
       2. Departments (Orange) - Organizational Structure
       3. Positions (Yellow) - Who does the work
       4. Tasks (Green) - What needs to be done
       5. Subtasks (Cyan) - Detailed breakdown
       6. Processes (Blue) - How to execute
       7. Documents (Purple) - Output/Evidence
    */

    /* Visual Treatment Standards */
    --border-accent-width: 3px;           /* Standard left border accent width for all entity-colored borders */
    --border-accent-tint: 50%;             /* Standard tint percentage for entity-colored borders */

    /* Base Rainbow Workflow Colors */
    --color-directives: #F44336;       /* Red - Rules/regulations (top of chain) */
    --color-departments: #FF9800;      /* Orange - Organizational structure */
    --color-grade-limits: #FFCD32;     /* Golden Yellow - Grade limit groupings (between departments and positions) */
    --color-positions: #FFEB3B;        /* Yellow - Job positions/roles (brighter for distinction) */
    --color-tasks: #4CAF50;            /* Green - Work items/assignments */
    --color-subtasks: #00BCD4;         /* Cyan - Task breakdowns */
    --color-processes: #2196F3;        /* Blue - Execution procedures */
    --color-documents: #9C27B0;        /* Purple - Output/evidence (end of chain) */
    --color-system: #424242;           /* Dark gray - System/admin */

    /* Rainbow Workflow Colors - Full intensity solid colors (no opacity variations) */

    /* 1. Directives (Red) - Rules Framework */
    --color-directives-100: #F44336;                      /* All levels: Full intensity solid red */
    --color-directives-80: #F44336;                       /* All levels: Full intensity solid red */
    --color-directives-60: #F44336;                       /* All levels: Full intensity solid red */
    --color-directives-40: #F44336;                       /* All levels: Full intensity solid red */

    /* 2. Departments (Orange) - Organizational Structure */
    --color-departments-100: #FF9800;                     /* All levels: Full intensity solid orange */
    --color-departments-80: #FF9800;                      /* All levels: Full intensity solid orange */
    --color-departments-60: #FF9800;                      /* All levels: Full intensity solid orange */
    --color-departments-40: #FF9800;                      /* All levels: Full intensity solid orange */

    /* 3. Positions (Yellow) - Job Roles */
    --color-positions-100: #FFEB3B;                       /* All levels: Full intensity solid yellow */
    --color-positions-80: #FFEB3B;                        /* All levels: Full intensity solid yellow */
    --color-positions-60: #FFEB3B;                        /* All levels: Full intensity solid yellow */
    --color-positions-40: #FFEB3B;                        /* All levels: Full intensity solid yellow */

    /* 4. Tasks (Green) - Work Items */
    --color-tasks-100: #4CAF50;                           /* All levels: Full intensity solid green */
    --color-tasks-80: #4CAF50;                            /* All levels: Full intensity solid green */
    --color-tasks-60: #4CAF50;                            /* All levels: Full intensity solid green */
    --color-tasks-40: #4CAF50;                            /* All levels: Full intensity solid green */

    /* 5. Subtasks (Cyan) - Task Breakdowns */
    --color-subtasks-100: #00BCD4;                        /* All levels: Full intensity solid cyan */
    --color-subtasks-80: #00BCD4;                         /* All levels: Full intensity solid cyan */
    --color-subtasks-60: #00BCD4;                         /* All levels: Full intensity solid cyan */
    --color-subtasks-40: #00BCD4;                         /* All levels: Full intensity solid cyan */

    /* 6. Processes (Blue) - Execution Procedures */
    --color-processes-100: #2196F3;                       /* All levels: Full intensity solid blue */
    --color-processes-80: #2196F3;                        /* All levels: Full intensity solid blue */
    --color-processes-60: #2196F3;                        /* All levels: Full intensity solid blue */
    --color-processes-40: #2196F3;                        /* All levels: Full intensity solid blue */

    /* 7. Documents (Purple) - Output/Evidence */
    --color-documents-100: #9C27B0;                       /* All levels: Full intensity solid purple */
    --color-documents-80: #9C27B0;                        /* All levels: Full intensity solid purple */
    --color-documents-60: #9C27B0;                        /* All levels: Full intensity solid purple */
    --color-documents-40: #9C27B0;                        /* All levels: Full intensity solid purple */

    /* 8. Employees (Purple) - Personnel/Workforce (Main Purple) */
    --color-employees: #9C27B0;                           /* Purple - Personnel management */
    --color-employees-100: #9C27B0;                       /* All levels: Full intensity solid purple */
    --color-employees-80: #9C27B0;                        /* All levels: Full intensity solid purple */
    --color-employees-60: #9C27B0;                        /* All levels: Full intensity solid purple */
    --color-employees-40: #9C27B0;                        /* All levels: Full intensity solid purple */

    /* 9. Users (Light Purple) - Technical User Accounts (IT/Auth) */
    --color-users: #BA68C8;                               /* Light Purple - User authentication/accounts */
    --color-users-100: #BA68C8;                           /* All levels: Full intensity solid light purple */
    --color-users-80: #BA68C8;                            /* All levels: Full intensity solid light purple */
    --color-users-60: #BA68C8;                            /* All levels: Full intensity solid light purple */
    --color-users-40: #BA68C8;                            /* All levels: Full intensity solid light purple */

    /* 10. Services (Dark Blue) - Bookable Services/Resources */
    --color-services: #1565C0;                            /* Dark Blue - Bookable services */
    --color-services-100: #1565C0;                        /* All levels: Full intensity solid dark blue */
    --color-services-80: #1565C0;                         /* All levels: Full intensity solid dark blue */
    --color-services-60: #1565C0;                         /* All levels: Full intensity solid dark blue */
    --color-services-40: #1565C0;                         /* All levels: Full intensity solid dark blue */

    /* 11. Data (Indigo) - Master Data Management */
    --color-data: #3F51B5;                                /* Indigo - Data management pages */
    --color-data-100: #3F51B5;                            /* All levels: Full intensity solid indigo */
    --color-data-80: #3F51B5;                             /* All levels: Full intensity solid indigo */
    --color-data-60: #3F51B5;                             /* All levels: Full intensity solid indigo */
    --color-data-40: #3F51B5;                             /* All levels: Full intensity solid indigo */

    /* Template Liste (Uses directive colors - same as directives) */
    --color-template-liste: #F44336;                      /* Red - Same as directives */

    /* System (Dark Gray) - Admin/System */
    --color-system-100: #424242;                          /* All levels: Full intensity solid dark gray */
    --color-system-80: #424242;                           /* All levels: Full intensity solid dark gray */
    --color-system-60: #424242;                           /* All levels: Full intensity solid dark gray */
    --color-system-40: #424242;                           /* All levels: Full intensity solid dark gray */

    /* =================================================================
       UI COLORS - Interface elements
       ================================================================= */

    /* Status Colors */
    --color-success: #28a745;          /* Success green */
    --color-danger: #dc3545;           /* Error/danger red */
    --color-warning: #ffc107;          /* Warning yellow */
    --color-info: #17a2b8;             /* Info blue */

    /* Neutral Colors */
    --color-white: #ffffff;
    --color-gray-light: #f8f9fa;
    --color-gray: #e9ecef;
    --color-gray-medium: #ced4da;
    --color-gray-dark: #6c757d;
    --color-text: #212529;
    --color-text-muted: #6c757d;

    /* Legacy neutral names (for backward compatibility) */
    --background-white: #ffffff;
    --background-light: #e5e7eb;
    --text-dark: #1a202c;
    --text-gray: #718096;
    --text-light: #a0aec0;
    --border-gray: #e2e8f0;
    --error-red: #e53e3e;
    --success-green: #38a169;

    /* =================================================================
       TYPOGRAPHY - Font configuration
       ================================================================= */

    /* Font Families */
    --font-primary: 'Inter', Arial, sans-serif;
    --font-mono: 'Courier New', monospace;

    /* Font Sizes - Base scale */
    --font-size-xs: 0.75rem;       /* 12px */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-md: 1rem;          /* 16px - alias */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.5rem;       /* 24px */
    --font-size-3xl: 1.875rem;     /* 30px */
    --font-size-4xl: 2.25rem;      /* 36px */

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* =================================================================
   BAD ZWISCHENAHN THEME - Municipal branding customization
   ================================================================= */
[data-theme="bad-zwischenahn"] {
    /* Primary Brand Colors - Bad Zwischenahn specific */
    --primary-color: #0061AB;           /* Bad Zwischenahn blue */
    --primary-color-dark: #004580;      /* Darker variant */
    --primary-color-light: #9fbbda;     /* Lighter variant (semi) */
    --secondary-color: #6AB558;         /* Bad Zwischenahn green accent */
    --accent-color: #6AB558;            /* Green - nature/sustainability */

    /* CTA/Action Colors - Green theme */
    --cta-start: #6AB558;               /* Green gradient start */
    --cta-end: #5da34a;                 /* Green gradient end */

    /* UI Colors - Adjusted for Bad Zwischenahn */
    --color-success: #6AB558;           /* Match green accent */
    --color-info: #0061AB;              /* Match primary blue */

    /* Neutral Colors - Warmer tones */
    --color-gray-light: #F4F4F4;        /* Lighter backgrounds */
    --color-gray: #e8ebe8;              /* Slightly greenish tint */
    --border-gray: #cccccc;             /* Softer borders */

    /* Legacy neutral names */
    --background-white: #FFFFFF;
    --background-light: #F4F4F4;
    --text-dark: #2c3e50;               /* Slightly softer black */
    --border-gray: #cccccc;
    --success-green: #6AB558;           /* Match theme green */

    /* Typography - Jost font for Bad Zwischenahn */
    --font-primary: 'Jost', Arial, sans-serif;

    /* Additional Bad Zwischenahn specific colors */
    --bz-color-white: #FFFFFF;
    --bz-color-lighter: #F4F4F4;
    --bz-color-light: #cccccc;
    --bz-color-semi: #9fbbda;
    --bz-blue-dark: #004580;
    --bz-green-accent: #6AB558;
    --bz-green-dark: #5da34a;
}

/* Override specific UI elements with hardcoded colors */
[data-theme="bad-zwischenahn"] .btn-primary,
[data-theme="bad-zwischenahn"] button[type="submit"],
[data-theme="bad-zwischenahn"] .button-primary {
    background: #0061AB !important;
}

[data-theme="bad-zwischenahn"] .btn-primary:hover,
[data-theme="bad-zwischenahn"] button[type="submit"]:hover {
    background: #004580 !important;
}

[data-theme="bad-zwischenahn"] .top-header {
    background: #0061AB !important;
}

[data-theme="bad-zwischenahn"] .brand {
    color: #FFFFFF !important;
}

[data-theme="bad-zwischenahn"] .tenant-name {
    color: #FFFFFF !important;
}

[data-theme="bad-zwischenahn"] .tenant-separator {
    color: #FFFFFF !important;
}

[data-theme="bad-zwischenahn"] .sidebar {
    border: none !important;
}

[data-theme="bad-zwischenahn"] .stat-card {
    border-color: #0061AB !important;
}

[data-theme="bad-zwischenahn"] .btn-primary-active {
    background-color: #0061AB !important;
    border-color: #0061AB !important;
}

[data-theme="bad-zwischenahn"] .btn-primary-active:hover:not(:disabled) {
    background-color: #004580 !important;
    border-color: #004580 !important;
}

/* Make header icons white so they're visible on blue background */
[data-theme="bad-zwischenahn"] .header-icon-btn {
    color: #FFFFFF !important;
}

[data-theme="bad-zwischenahn"] a {
    color: #0061AB !important;
}

[data-theme="bad-zwischenahn"] a:hover {
    color: #004580 !important;
}

[data-theme="bad-zwischenahn"] .nav-item.active,
[data-theme="bad-zwischenahn"] .nav-item:hover {
    background: #6AB558 !important;
    border-left-color: #6AB558 !important;
    color: #FFFFFF !important;
}

[data-theme="bad-zwischenahn"] .nav-item.active .nav-text,
[data-theme="bad-zwischenahn"] .nav-item:hover .nav-text {
    color: #FFFFFF !important;
}

/* Product menu items - parent toggles */
[data-theme="bad-zwischenahn"] .sidebar .nav-product > button.nav-item {
    color: #0061AB !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
}

[data-theme="bad-zwischenahn"] .sidebar .nav-product > button.nav-item .nav-text {
    color: #0061AB !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
}

[data-theme="bad-zwischenahn"] .sidebar .nav-product > button.nav-item:hover,
[data-theme="bad-zwischenahn"] .sidebar .nav-product > button.nav-item:focus-visible {
    background: #6AB558 !important;
    color: #FFFFFF !important;
}

[data-theme="bad-zwischenahn"] .sidebar .nav-product > button.nav-item:hover .nav-text,
[data-theme="bad-zwischenahn"] .sidebar .nav-product > button.nav-item:focus-visible .nav-text {
    color: #FFFFFF !important;
}

/* Submenu items - using correct .nav-subitem class */
[data-theme="bad-zwischenahn"] .sidebar .nav-subitem {
    color: var(--text-gray) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 400 !important;
}

[data-theme="bad-zwischenahn"] .sidebar .nav-subitem .nav-text {
    color: var(--text-gray) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 400 !important;
}

[data-theme="bad-zwischenahn"] .sidebar .nav-subitem:hover,
[data-theme="bad-zwischenahn"] .sidebar .nav-subitem:focus,
[data-theme="bad-zwischenahn"] .sidebar .nav-subitem.active {
    background: #6AB558 !important;
    color: #FFFFFF !important;
}

[data-theme="bad-zwischenahn"] .sidebar .nav-subitem:hover .nav-text,
[data-theme="bad-zwischenahn"] .sidebar .nav-subitem:focus .nav-text,
[data-theme="bad-zwischenahn"] .sidebar .nav-subitem.active .nav-text {
    color: #FFFFFF !important;
}

[data-theme="bad-zwischenahn"] .status-active {
    background: #e8f5e9 !important;
    color: #6AB558 !important;
}

[data-theme="bad-zwischenahn"] input:focus,
[data-theme="bad-zwischenahn"] textarea:focus,
[data-theme="bad-zwischenahn"] select:focus {
    border-color: #0061AB !important;
    box-shadow: 0 0 0 3px rgba(0, 97, 171, 0.1) !important;
}

[data-theme="bad-zwischenahn"] .info-tab.active {
    color: #0061AB !important;
    border-bottom-color: #0061AB !important;
}

[data-theme="bad-zwischenahn"] .demo-button {
    background: #6AB558 !important;
}

[data-theme="bad-zwischenahn"] .demo-button:hover {
    background: #5da34a !important;
}

/* Top action buttons only (the 3 big ones) */
[data-theme="bad-zwischenahn"] .actions-add-root-button button,
[data-theme="bad-zwischenahn"] .actions-level-names-button button,
[data-theme="bad-zwischenahn"] .actions-export-button button {
    background: #0061AB !important;
    border-color: #0061AB !important;
}

[data-theme="bad-zwischenahn"] .actions-add-root-button button:hover,
[data-theme="bad-zwischenahn"] .actions-level-names-button button:hover,
[data-theme="bad-zwischenahn"] .actions-export-button button:hover {
    background: #004580 !important;
    border-color: #004580 !important;
}

/* =================================================================
   EDEWECHT THEME - Municipal branding customization
   ================================================================= */
[data-theme="edewecht"] {
    /* Primary Brand Colors - Edewecht specific */
    --primary-color: #003768;           /* Edewecht blue (darker) */
    --primary-color-dark: #002549;      /* Darker variant */
    --primary-color-light: #77C2E4;     /* Light blue accent */
    --secondary-color: #00703D;         /* Edewecht green accent */
    --accent-color: #00703D;            /* Green - nature/sustainability */

    /* CTA/Action Colors - Green theme */
    --cta-start: #00703D;               /* Green gradient start */
    --cta-end: #005a31;                 /* Green gradient end */

    /* UI Colors - Adjusted for Edewecht */
    --color-success: #00703D;           /* Match green accent */
    --color-info: #003768;              /* Match primary blue */

    /* Neutral Colors - Clean tones */
    --color-gray-light: #F5F7FA;        /* Light backgrounds */
    --color-gray: #E8ECEF;              /* Subtle gray */
    --border-gray: #CCCCCC;             /* Softer borders */

    /* Legacy neutral names */
    --background-white: #FFFFFF;
    --background-light: #F5F7FA;
    --text-dark: #333333;               /* Edewecht dark text */
    --border-gray: #CCCCCC;
    --success-green: #00703D;           /* Match theme green */

    /* Typography - Open Sans for Edewecht */
    --font-primary: 'Open Sans', Arial, sans-serif;

    /* Additional Edewecht specific colors */
    --edewecht-color-white: #FFFFFF;
    --edewecht-color-lighter: #F5F7FA;
    --edewecht-color-light: #CCCCCC;
    --edewecht-color-light-blue: #77C2E4;
    --edewecht-color-light-cyan: #C4EEFF;
    --edewecht-blue-dark: #002549;
    --edewecht-green-accent: #00703D;
    --edewecht-green-dark: #005a31;
    --edewecht-gold: #E1A317;
}

/* Override specific UI elements with hardcoded colors */
[data-theme="edewecht"] .btn-primary,
[data-theme="edewecht"] button[type="submit"],
[data-theme="edewecht"] .button-primary {
    background: #003768 !important;
}

[data-theme="edewecht"] .btn-primary:hover,
[data-theme="edewecht"] button[type="submit"]:hover {
    background: #002549 !important;
}

[data-theme="edewecht"] .top-header {
    background: #003768 !important;
}

[data-theme="edewecht"] .brand {
    color: #FFFFFF !important;
}

[data-theme="edewecht"] .tenant-name {
    color: #FFFFFF !important;
}

[data-theme="edewecht"] .tenant-separator {
    color: #FFFFFF !important;
}

[data-theme="edewecht"] .sidebar {
    border: none !important;
}

[data-theme="edewecht"] .stat-card {
    border-color: #003768 !important;
}

[data-theme="edewecht"] .btn-primary-active {
    background-color: #003768 !important;
    border-color: #003768 !important;
}

[data-theme="edewecht"] .btn-primary-active:hover:not(:disabled) {
    background-color: #002549 !important;
    border-color: #002549 !important;
}

/* Make header icons white so they're visible on blue background */
[data-theme="edewecht"] .header-icon-btn {
    color: #FFFFFF !important;
}

[data-theme="edewecht"] a {
    color: #003768 !important;
}

[data-theme="edewecht"] a:hover {
    color: #002549 !important;
}

[data-theme="edewecht"] .nav-item.active,
[data-theme="edewecht"] .nav-item:hover {
    background: #00703D !important;
    border-left-color: #00703D !important;
    color: #FFFFFF !important;
}

[data-theme="edewecht"] .nav-item.active .nav-text,
[data-theme="edewecht"] .nav-item:hover .nav-text {
    color: #FFFFFF !important;
}

/* Product menu items - parent toggles */
[data-theme="edewecht"] .sidebar .nav-product > button.nav-item {
    color: #003768 !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
}

[data-theme="edewecht"] .sidebar .nav-product > button.nav-item .nav-text {
    color: #003768 !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
}

[data-theme="edewecht"] .sidebar .nav-product > button.nav-item:hover,
[data-theme="edewecht"] .sidebar .nav-product > button.nav-item:focus-visible {
    background: #00703D !important;
    color: #FFFFFF !important;
}

[data-theme="edewecht"] .sidebar .nav-product > button.nav-item:hover .nav-text,
[data-theme="edewecht"] .sidebar .nav-product > button.nav-item:focus-visible .nav-text {
    color: #FFFFFF !important;
}

/* Submenu items - using correct .nav-subitem class */
[data-theme="edewecht"] .sidebar .nav-subitem {
    color: var(--text-gray) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 400 !important;
}

[data-theme="edewecht"] .sidebar .nav-subitem .nav-text {
    color: var(--text-gray) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 400 !important;
}

[data-theme="edewecht"] .sidebar .nav-subitem:hover,
[data-theme="edewecht"] .sidebar .nav-subitem:focus,
[data-theme="edewecht"] .sidebar .nav-subitem.active {
    background: #00703D !important;
    color: #FFFFFF !important;
}

[data-theme="edewecht"] .sidebar .nav-subitem:hover .nav-text,
[data-theme="edewecht"] .sidebar .nav-subitem:focus .nav-text,
[data-theme="edewecht"] .sidebar .nav-subitem.active .nav-text {
    color: #FFFFFF !important;
}

[data-theme="edewecht"] .status-active {
    background: #e6f2ec !important;
    color: #00703D !important;
}

[data-theme="edewecht"] input:focus,
[data-theme="edewecht"] textarea:focus,
[data-theme="edewecht"] select:focus {
    border-color: #003768 !important;
    box-shadow: 0 0 0 3px rgba(0, 55, 104, 0.1) !important;
}

[data-theme="edewecht"] .info-tab.active {
    color: #003768 !important;
    border-bottom-color: #003768 !important;
}

[data-theme="edewecht"] .demo-button {
    background: #00703D !important;
}

[data-theme="edewecht"] .demo-button:hover {
    background: #005a31 !important;
}

/* Top action buttons only (the 3 big ones) */
[data-theme="edewecht"] .actions-add-root-button button,
[data-theme="edewecht"] .actions-level-names-button button,
[data-theme="edewecht"] .actions-export-button button {
    background: #003768 !important;
    border-color: #003768 !important;
}

[data-theme="edewecht"] .actions-add-root-button button:hover,
[data-theme="edewecht"] .actions-level-names-button button:hover,
[data-theme="edewecht"] .actions-export-button button:hover {
    background: #002549 !important;
    border-color: #002549 !important;
}

/* =================================================================
   SCHWARZENBEK THEME - Municipal branding customization
   Slate blue-gray from website + gold accents from coat of arms
   ================================================================= */
[data-theme="schwarzenbek"] {
    /* Primary Brand Colors - Schwarzenbek specific */
    --primary-color: #5A6C7C;           /* Schwarzenbek slate blue-gray */
    --primary-color-dark: #445564;      /* Darker variant */
    --primary-color-light: #8A9DAD;     /* Lighter variant */
    --secondary-color: #C8A84E;         /* Muted gold accent (coat of arms) */
    --accent-color: #C8A84E;            /* Gold - coat of arms */

    /* CTA/Action Colors - Gold theme */
    --cta-start: #C8A84E;               /* Gold gradient start */
    --cta-end: #B08F3A;                 /* Gold gradient end */

    /* UI Colors - Adjusted for Schwarzenbek */
    --color-success: #5A8A5A;           /* Muted green */
    --color-info: #5A6C7C;              /* Match primary */

    /* Neutral Colors - Clean tones */
    --color-gray-light: #F5F6F7;        /* Light backgrounds */
    --color-gray: #E8EAED;             /* Subtle gray */
    --border-gray: #CCCCCC;             /* Softer borders */

    /* Legacy neutral names */
    --background-white: #FFFFFF;
    --background-light: #F5F6F7;
    --text-dark: #2C3E50;               /* Softer dark text */
    --border-gray: #CCCCCC;
    --success-green: #5A8A5A;           /* Match muted green */

    /* Typography - Inter (keep default) */
    --font-primary: 'Inter', Arial, sans-serif;

    /* Additional Schwarzenbek specific colors */
    --sbk-color-white: #FFFFFF;
    --sbk-color-lighter: #F5F6F7;
    --sbk-color-light: #CCCCCC;
    --sbk-color-semi: #8A9DAD;
    --sbk-slate-dark: #445564;
    --sbk-gold-accent: #C8A84E;
    --sbk-gold-dark: #B08F3A;
}

/* Override specific UI elements with hardcoded colors */
[data-theme="schwarzenbek"] .btn-primary,
[data-theme="schwarzenbek"] button[type="submit"],
[data-theme="schwarzenbek"] .button-primary {
    background: #5A6C7C !important;
}

[data-theme="schwarzenbek"] .btn-primary:hover,
[data-theme="schwarzenbek"] button[type="submit"]:hover {
    background: #445564 !important;
}

[data-theme="schwarzenbek"] .top-header {
    background: #5A6C7C !important;
}

[data-theme="schwarzenbek"] .brand {
    color: #FFFFFF !important;
}

[data-theme="schwarzenbek"] .tenant-name {
    color: #FFFFFF !important;
}

[data-theme="schwarzenbek"] .tenant-separator {
    color: #FFFFFF !important;
}

[data-theme="schwarzenbek"] .sidebar {
    border: none !important;
}

[data-theme="schwarzenbek"] .stat-card {
    border-color: #5A6C7C !important;
}

[data-theme="schwarzenbek"] .btn-primary-active {
    background-color: #5A6C7C !important;
    border-color: #5A6C7C !important;
}

[data-theme="schwarzenbek"] .btn-primary-active:hover:not(:disabled) {
    background-color: #445564 !important;
    border-color: #445564 !important;
}

/* Make header icons white so they're visible on slate background */
[data-theme="schwarzenbek"] .header-icon-btn {
    color: #FFFFFF !important;
}

[data-theme="schwarzenbek"] a {
    color: #5A6C7C !important;
}

[data-theme="schwarzenbek"] a:hover {
    color: #445564 !important;
}

[data-theme="schwarzenbek"] .nav-item.active,
[data-theme="schwarzenbek"] .nav-item:hover {
    background: #C8A84E !important;
    border-left-color: #C8A84E !important;
    color: #FFFFFF !important;
}

[data-theme="schwarzenbek"] .nav-item.active .nav-text,
[data-theme="schwarzenbek"] .nav-item:hover .nav-text {
    color: #FFFFFF !important;
}

/* Product menu items - parent toggles */
[data-theme="schwarzenbek"] .sidebar .nav-product > button.nav-item {
    color: #5A6C7C !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
}

[data-theme="schwarzenbek"] .sidebar .nav-product > button.nav-item .nav-text {
    color: #5A6C7C !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
}

[data-theme="schwarzenbek"] .sidebar .nav-product > button.nav-item:hover,
[data-theme="schwarzenbek"] .sidebar .nav-product > button.nav-item:focus-visible {
    background: #C8A84E !important;
    color: #FFFFFF !important;
}

[data-theme="schwarzenbek"] .sidebar .nav-product > button.nav-item:hover .nav-text,
[data-theme="schwarzenbek"] .sidebar .nav-product > button.nav-item:focus-visible .nav-text {
    color: #FFFFFF !important;
}

/* Submenu items - using correct .nav-subitem class */
[data-theme="schwarzenbek"] .sidebar .nav-subitem {
    color: var(--text-gray) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 400 !important;
}

[data-theme="schwarzenbek"] .sidebar .nav-subitem .nav-text {
    color: var(--text-gray) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 400 !important;
}

[data-theme="schwarzenbek"] .sidebar .nav-subitem:hover,
[data-theme="schwarzenbek"] .sidebar .nav-subitem:focus,
[data-theme="schwarzenbek"] .sidebar .nav-subitem.active {
    background: #C8A84E !important;
    color: #FFFFFF !important;
}

[data-theme="schwarzenbek"] .sidebar .nav-subitem:hover .nav-text,
[data-theme="schwarzenbek"] .sidebar .nav-subitem:focus .nav-text,
[data-theme="schwarzenbek"] .sidebar .nav-subitem.active .nav-text {
    color: #FFFFFF !important;
}

[data-theme="schwarzenbek"] .status-active {
    background: #f0ead6 !important;
    color: #B08F3A !important;
}

[data-theme="schwarzenbek"] input:focus,
[data-theme="schwarzenbek"] textarea:focus,
[data-theme="schwarzenbek"] select:focus {
    border-color: #5A6C7C !important;
    box-shadow: 0 0 0 3px rgba(90, 108, 124, 0.1) !important;
}

[data-theme="schwarzenbek"] .info-tab.active {
    color: #5A6C7C !important;
    border-bottom-color: #5A6C7C !important;
}

[data-theme="schwarzenbek"] .demo-button {
    background: #C8A84E !important;
}

[data-theme="schwarzenbek"] .demo-button:hover {
    background: #B08F3A !important;
}

/* Top action buttons only (the 3 big ones) */
[data-theme="schwarzenbek"] .actions-add-root-button button,
[data-theme="schwarzenbek"] .actions-level-names-button button,
[data-theme="schwarzenbek"] .actions-export-button button {
    background: #5A6C7C !important;
    border-color: #5A6C7C !important;
}

[data-theme="schwarzenbek"] .actions-add-root-button button:hover,
[data-theme="schwarzenbek"] .actions-level-names-button button:hover,
[data-theme="schwarzenbek"] .actions-export-button button:hover {
    background: #445564 !important;
    border-color: #445564 !important;
}

/* =================================================================
   HIGH CONTRAST LIGHT THEME - WCAG AAA Compliance
   Black text on white background with maximum contrast
   ================================================================= */
[data-theme="hoher-kontrast-hell"] {
    /* Core colors - maximum contrast */
    --primary-color: #000000;
    --primary-color-dark: #000000;
    --primary-color-light: #333333;
    --secondary-color: #000000;
    --accent-color: #0000EE;

    /* CTA/Action Colors */
    --cta-start: #000000;
    --cta-end: #333333;

    /* Status Colors - darker for contrast */
    --color-success: #006400;
    --color-danger: #8B0000;
    --color-warning: #996600;
    --color-info: #000080;

    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-gray-light: #FFFFFF;
    --color-gray: #EEEEEE;
    --color-gray-medium: #666666;
    --color-gray-dark: #000000;
    --color-text: #000000;
    --color-text-muted: #333333;

    /* Legacy neutral names */
    --background-white: #FFFFFF;
    --background-light: #FFFFFF;
    --text-dark: #000000;
    --text-gray: #000000;
    --text-light: #333333;
    --border-gray: #000000;
    --error-red: #8B0000;
    --success-green: #006400;
}

/* High Contrast Light - Enhanced UI elements */
[data-theme="hoher-kontrast-hell"] .top-header {
    background: #000000 !important;
    border-bottom: 3px solid #000000 !important;
}

[data-theme="hoher-kontrast-hell"] a {
    color: #0000EE !important;
    text-decoration: underline !important;
}

[data-theme="hoher-kontrast-hell"] a:visited {
    color: #551A8B !important;
}

[data-theme="hoher-kontrast-hell"] a:hover {
    color: #000000 !important;
}

[data-theme="hoher-kontrast-hell"] .btn-primary,
[data-theme="hoher-kontrast-hell"] button[type="submit"] {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
}

[data-theme="hoher-kontrast-hell"] .btn-primary:hover,
[data-theme="hoher-kontrast-hell"] button[type="submit"]:hover {
    background: #333333 !important;
}

[data-theme="hoher-kontrast-hell"] input,
[data-theme="hoher-kontrast-hell"] select,
[data-theme="hoher-kontrast-hell"] textarea {
    border: 2px solid #000000 !important;
    background: #FFFFFF !important;
    color: #000000 !important;
}

[data-theme="hoher-kontrast-hell"] input:focus,
[data-theme="hoher-kontrast-hell"] select:focus,
[data-theme="hoher-kontrast-hell"] textarea:focus {
    outline: 3px solid #000000 !important;
    outline-offset: 2px !important;
}

[data-theme="hoher-kontrast-hell"] .profile-card,
[data-theme="hoher-kontrast-hell"] .theme-option,
[data-theme="hoher-kontrast-hell"] .language-option,
[data-theme="hoher-kontrast-hell"] .counter-option {
    border: 2px solid #000000 !important;
}

[data-theme="hoher-kontrast-hell"] .sidebar {
    border-right: 2px solid #000000 !important;
}

[data-theme="hoher-kontrast-hell"] .nav-item:hover,
[data-theme="hoher-kontrast-hell"] .nav-item.active {
    background: #000000 !important;
    color: #FFFFFF !important;
}

/* =================================================================
   HIGH CONTRAST DARK THEME - Classic Yellow on Black
   Optimal for visual impairments and low light
   ================================================================= */
[data-theme="hoher-kontrast-dunkel"] {
    /* Core colors - yellow on black */
    --primary-color: #FFFF00;
    --primary-color-dark: #CCCC00;
    --primary-color-light: #FFFF66;
    --secondary-color: #FFFF00;
    --accent-color: #00FFFF;

    /* CTA/Action Colors */
    --cta-start: #FFFF00;
    --cta-end: #FFFF66;

    /* Status Colors - bright for dark background */
    --color-success: #00FF00;
    --color-danger: #FF0000;
    --color-warning: #FFFF00;
    --color-info: #00FFFF;

    /* Neutral Colors */
    --color-white: #000000;
    --color-gray-light: #111111;
    --color-gray: #222222;
    --color-gray-medium: #888888;
    --color-gray-dark: #CCCCCC;
    --color-text: #FFFFFF;
    --color-text-muted: #CCCCCC;

    /* Legacy neutral names */
    --background-white: #000000;
    --background-light: #111111;
    --text-dark: #FFFFFF;
    --text-gray: #FFFF00;
    --text-light: #CCCCCC;
    --border-gray: #FFFF00;
    --error-red: #FF0000;
    --success-green: #00FF00;
}

/* High Contrast Dark - Complete dark theme overrides */
[data-theme="hoher-kontrast-dunkel"] body {
    background: #000000 !important;
    color: #FFFFFF !important;
}

[data-theme="hoher-kontrast-dunkel"] .app-layout {
    background: #000000 !important;
}

[data-theme="hoher-kontrast-dunkel"] .top-header {
    background: #000000 !important;
    border-bottom: 3px solid #FFFF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] .brand,
[data-theme="hoher-kontrast-dunkel"] .tenant-name,
[data-theme="hoher-kontrast-dunkel"] .tenant-separator {
    color: #FFFF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] .header-icon-btn {
    color: #FFFF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] .sidebar {
    background: #000000 !important;
    border-right: 2px solid #FFFF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] .nav-item {
    color: #FFFF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] .nav-item:hover,
[data-theme="hoher-kontrast-dunkel"] .nav-item.active {
    background: #FFFF00 !important;
    color: #000000 !important;
}

[data-theme="hoher-kontrast-dunkel"] .nav-subitem {
    color: #FFFFFF !important;
}

[data-theme="hoher-kontrast-dunkel"] .nav-subitem:hover,
[data-theme="hoher-kontrast-dunkel"] .nav-subitem.active {
    background: #FFFF00 !important;
    color: #000000 !important;
}

[data-theme="hoher-kontrast-dunkel"] .main-content {
    background: #000000 !important;
    color: #FFFFFF !important;
}

[data-theme="hoher-kontrast-dunkel"] .page-header-card,
[data-theme="hoher-kontrast-dunkel"] .profile-card {
    background: #111111 !important;
    border: 2px solid #FFFF00 !important;
    color: #FFFFFF !important;
}

[data-theme="hoher-kontrast-dunkel"] h1,
[data-theme="hoher-kontrast-dunkel"] h2,
[data-theme="hoher-kontrast-dunkel"] h3 {
    color: #FFFF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] a {
    color: #00FFFF !important;
}

[data-theme="hoher-kontrast-dunkel"] a:hover {
    color: #FFFFFF !important;
}

[data-theme="hoher-kontrast-dunkel"] .btn-primary,
[data-theme="hoher-kontrast-dunkel"] button[type="submit"],
[data-theme="hoher-kontrast-dunkel"] .save-theme-btn {
    background: #FFFF00 !important;
    color: #000000 !important;
    border: 2px solid #FFFF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] .btn-primary:hover,
[data-theme="hoher-kontrast-dunkel"] button[type="submit"]:hover,
[data-theme="hoher-kontrast-dunkel"] .save-theme-btn:hover {
    background: #FFFFFF !important;
    color: #000000 !important;
}

[data-theme="hoher-kontrast-dunkel"] input,
[data-theme="hoher-kontrast-dunkel"] select,
[data-theme="hoher-kontrast-dunkel"] textarea {
    background: #111111 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] input::placeholder,
[data-theme="hoher-kontrast-dunkel"] textarea::placeholder {
    color: #888888 !important;
}

[data-theme="hoher-kontrast-dunkel"] input:focus,
[data-theme="hoher-kontrast-dunkel"] select:focus,
[data-theme="hoher-kontrast-dunkel"] textarea:focus {
    outline: 3px solid #00FFFF !important;
    outline-offset: 2px !important;
}

[data-theme="hoher-kontrast-dunkel"] .theme-option,
[data-theme="hoher-kontrast-dunkel"] .language-option,
[data-theme="hoher-kontrast-dunkel"] .counter-option {
    background: #111111 !important;
    border: 2px solid #FFFF00 !important;
    color: #FFFFFF !important;
}

[data-theme="hoher-kontrast-dunkel"] .theme-option.active,
[data-theme="hoher-kontrast-dunkel"] .language-option.active,
[data-theme="hoher-kontrast-dunkel"] .counter-option.active {
    border-color: #00FFFF !important;
    background: #222222 !important;
}

[data-theme="hoher-kontrast-dunkel"] .theme-name,
[data-theme="hoher-kontrast-dunkel"] .language-name,
[data-theme="hoher-kontrast-dunkel"] .counter-name {
    color: #FFFF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] .theme-description,
[data-theme="hoher-kontrast-dunkel"] .language-description,
[data-theme="hoher-kontrast-dunkel"] .counter-description {
    color: #CCCCCC !important;
}

[data-theme="hoher-kontrast-dunkel"] .app-footer {
    background: #000000 !important;
    border-top: 2px solid #FFFF00 !important;
    color: #FFFFFF !important;
}

[data-theme="hoher-kontrast-dunkel"] .footer-link {
    color: #00FFFF !important;
}

[data-theme="hoher-kontrast-dunkel"] .status-active {
    background: #003300 !important;
    color: #00FF00 !important;
}

[data-theme="hoher-kontrast-dunkel"] .status-inactive {
    background: #330000 !important;
    color: #FF0000 !important;
}

/* =================================================================
   LESEHILFE THEME - OpenDyslexic Font for Dyslexia Support
   Standard colors, special font for improved readability
   ================================================================= */

/* OpenDyslexic font-face declaration */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('/fonts/OpenDyslexic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('/fonts/OpenDyslexic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

[data-theme="lesehilfe"] {
    /* Override font family only */
    --font-primary: 'OpenDyslexic', Arial, sans-serif;

    /* Slightly increased letter spacing for readability */
    letter-spacing: 0.05em;
}

[data-theme="lesehilfe"] body,
[data-theme="lesehilfe"] input,
[data-theme="lesehilfe"] select,
[data-theme="lesehilfe"] textarea,
[data-theme="lesehilfe"] button {
    font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

/* Increased line height for better readability */
[data-theme="lesehilfe"] .main-content {
    line-height: 1.8;
}

[data-theme="lesehilfe"] p,
[data-theme="lesehilfe"] li,
[data-theme="lesehilfe"] td,
[data-theme="lesehilfe"] th {
    line-height: 1.8;
}