/**
 * 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 + non-rainbow entities (e.g. Ressourcen rooms/services/equipment) */

    /* 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. Process Steps (Dark Blue) */
    --color-process-steps: #1565C0;                            /* Dark Blue - Process steps */
    --color-process-steps-100: #1565C0;                        /* All levels: Full intensity solid dark blue */
    --color-process-steps-80: #1565C0;                         /* All levels: Full intensity solid dark blue */
    --color-process-steps-60: #1565C0;                         /* All levels: Full intensity solid dark blue */
    --color-process-steps-40: #1565C0;                         /* All levels: Full intensity solid dark blue */

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

    /* Functional Action Colors — universal interaction (hover/focus/active/on) */
    --color-action: #FF6B35;           /* Action orange — any user interaction */
    --color-action-hover: #e55a20;     /* Press/click feedback */
    --primary-color-tint: #e8f0fe;     /* Passive location highlight — nav hover bg, active-tab bg */

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

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

/* =================================================================
   UI SHAPE PRESETS - Global corner-radius dial
   =================================================================
   Applied via data-ui-shape on <html>. Default "soft" matches the
   base variables in utilities.css. --radius-pill is never overridden
   so pill-shaped elements stay pill-shaped across all presets.
*/
body[data-ui-shape="sharp"] {
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
}

body[data-ui-shape="rounded"] {
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* =================================================================
   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 */
    --color-action: #FF6B35;            /* Action orange — universal interaction */
    --color-action-hover: #e55a20;      /* Press/click feedback */
    --primary-color-tint: #e8f0fe;      /* Passive location highlight */

    /* 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 */
    --color-text-muted: #6c757d;        /* Secondary/muted text — tune per tenant if desired */
    --border-gray: #cccccc;

    /* 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"] .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;
}

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

/* 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"] .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 */
    --color-action: #FF6B35;            /* Action orange — universal interaction */
    --color-action-hover: #e55a20;      /* Press/click feedback */
    --primary-color-tint: #e8f0fe;      /* Passive location highlight */

    /* 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 */
    --color-text-muted: #6c757d;        /* Secondary/muted text — tune per tenant if desired */
    --border-gray: #CCCCCC;

    /* 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"] .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;
}

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

/* 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"] .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;
}

/* =================================================================
   BELM THEME - Municipal branding (Gemeinde Belm)
   Navy header/structure + GREEN buttons, links & active states.
   belm.de uses green buttons (custom.css .btn -> #008839); navy stays
   for header, focus rings and borders. Font: Open Sans.
   ================================================================= */
[data-theme="belm"] {
    /* Primary Brand Colors - Belm navy (belm.de #0b2d73) */
    --primary-color: #0b2d73;           /* Belm navy - header/nav/headings */
    --primary-color-dark: #08214f;      /* Darker variant (hover) */
    --primary-color-light: #9dabc7;     /* Muted blue-grey accent from site */
    --secondary-color: #008839;         /* Belm green accent ("mitten im Grünen") */
    --accent-color: #008839;            /* Green - nature/sustainability */

    /* CTA/Action Colors - Green theme */
    --cta-start: #008839;               /* Green gradient start */
    --cta-end: #006e2e;                 /* Green gradient end */

    /* UI Colors - Adjusted for Belm */
    --color-success: #008839;           /* Match green accent */
    --color-info: #0b2d73;              /* Match primary navy */
    --color-action: #FF6B35;            /* Action orange — universal interaction */
    --color-action-hover: #e55a20;      /* Press/click feedback */
    --primary-color-tint: #e8f0fe;      /* Passive location highlight */

    /* 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;               /* Dark text */
    --color-text-muted: #6c757d;        /* Secondary/muted text */
    --border-gray: #CCCCCC;

    /* Typography - Open Sans for Belm (matches belm.de) */
    --font-primary: 'Open Sans', Arial, sans-serif;

    /* Source palette from belm.de (documentation) */
    --belm-navy: #0b2d73;
    --belm-navy-dark: #08214f;
    --belm-blue-link: #014493;
    --belm-blue-grey: #9dabc7;
    --belm-blue-grey-light: #ced5e3;
    --belm-green: #008839;
    --belm-green-dark: #006e2e;
    --belm-color-white: #FFFFFF;
}

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

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

[data-theme="belm"] .top-header {
    background: #0b2d73 !important;
}

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

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

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

[data-theme="belm"] .stat-card {
    border-color: #0b2d73 !important;
}

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

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

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

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

[data-theme="belm"] a:hover {
    color: #006e2e !important;
}

/* All top-level sidebar nav entries stay navy so the navigation reads uniformly.
   Products are <button class="nav-item">, while Start + the utility links
   (Suche/Meldungen/Hilfe/Profil/Einstellungen/Abmelden) are <a class="nav-item"> —
   target both via .nav-item so the generic green `a` rule above can't split them.
   Green is reserved for buttons, content links and active states. */
[data-theme="belm"] .sidebar .nav-item {
    color: #0b2d73 !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
}

[data-theme="belm"] .sidebar .nav-item .nav-text {
    color: #0b2d73 !important;
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
}

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

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

[data-theme="belm"] .status-active {
    background: #e6f4ec !important;
    color: #008839 !important;
}

[data-theme="belm"] input:focus,
[data-theme="belm"] textarea:focus,
[data-theme="belm"] select:focus {
    border-color: #0b2d73 !important;
    box-shadow: 0 0 0 3px rgba(11, 45, 115, 0.1) !important;
}

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

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

[data-theme="belm"] .demo-button:hover {
    background: #006e2e !important;
}

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

[data-theme="belm"] .actions-add-root-button button:hover,
[data-theme="belm"] .actions-level-names-button button:hover,
[data-theme="belm"] .actions-export-button button:hover {
    background: #006e2e !important;
    border-color: #006e2e !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 */
    --color-action: #FF6B35;            /* Action orange — universal interaction */
    --color-action-hover: #e55a20;      /* Press/click feedback */
    --primary-color-tint: #e8f0fe;      /* Passive location highlight */

    /* 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 */
    --color-text-muted: #6c757d;        /* Secondary/muted text — tune per tenant if desired */
    --border-gray: #CCCCCC;

    /* 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"] .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;
}

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

/* 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"] .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;
    --color-action: #FF6B35;            /* Action orange — tune later for contrast */
    --color-action-hover: #e55a20;      /* Press/click feedback */
    --primary-color-tint: #D0E0FF;      /* Passive location highlight — stronger for contrast */

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

/* 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;
    --color-action: #FF6B35;            /* Action orange — tune later for contrast */
    --color-action-hover: #e55a20;      /* Press/click feedback */
    --primary-color-tint: #1a2847;      /* Passive location highlight — darker tint for dark bg */

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

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

/* @font-face declarations relocated to public/css/fonts/opendyslexic.css on May 8, 2026 */

[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;
}