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

    /* Base Rainbow Workflow Colors */
    --color-directives: #F44336;       /* Red - Rules/regulations (top of chain) */
    --color-departments: #FF9800;      /* Orange - Organizational structure */
    --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 */

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