/**
 * Modularis Global CSS Variables
 * Zentrale Verwaltung aller globalen CSS-Einstellungen
 */

:root {
    /* ========================================
       PRIMÄRE FARBEN (Branding)
       ======================================== */
    --color-primary: #2EC4C9;           /* Türkis/Mint */
    --color-primary-dark: #25B2B7;      /* Dunkleres Türkis */
    --color-primary-light: rgba(46, 196, 201, 0.25);
    --color-primary-ultra-light: rgba(46, 196, 201, 0.15);
    --color-primary-soft: rgba(46, 196, 201, 0.08);
    --color-primary-medium: rgba(46, 196, 201, 0.28);
    --color-primary-strong: rgba(46, 196, 201, 0.45);
    --color-primary-opacity-18: rgba(46, 196, 201, 0.18);
    --color-primary-opacity-20: rgba(46, 196, 201, 0.2);
    --color-primary-opacity-30: rgba(46, 196, 201, 0.3);
    --color-primary-opacity-40: rgba(46, 196, 201, 0.4);
    --color-primary-opacity-48: rgba(46, 196, 201, 0.48);
    --color-primary-opacity-50: rgba(46, 196, 201, 0.5);
    
    /* ========================================
       SEKUNDÄRE FARBEN
       ======================================== */
    --color-secondary-text: #5A4A6F;    /* Dunkelviolett (Text) */
    --color-secondary-text-light: rgba(90, 74, 111, 0.6);
    --color-secondary-text-lighter: rgba(90, 74, 111, 0.5);
    --color-secondary-opacity-10: rgba(90, 74, 111, 0.1);
    --color-secondary-opacity-15: rgba(90, 74, 111, 0.15);
    --color-secondary-opacity-20: rgba(90, 74, 111, 0.2);
    --color-secondary-opacity-30: rgba(90, 74, 111, 0.3);
    --color-secondary-opacity-40: rgba(90, 74, 111, 0.4);
    --color-secondary-opacity-50: rgba(90, 74, 111, 0.5);
    --color-secondary-opacity-70: rgba(90, 74, 111, 0.7);
    
    /* ========================================
       STATUS FARBEN
       ======================================== */
    --color-success: #0073AA;           /* WordPress Blau */
    --color-warning: #F57C00;           /* Orange */
    --color-danger: #D32F2F;            /* Rot */
    --color-danger-dark: #C62828;       /* Dunkelrot */
    --color-warning-dark: #E65100;      /* Dunkelorange */
    
    /* ========================================
       NEUTRAL FARBEN
       ======================================== */
    --color-white: #FFFFFF;
    --color-white-transparent: rgba(255, 255, 255, 0.7);
    --color-white-semi-transparent: rgba(255, 255, 255, 0.3);
    --color-gray: #999999;
    --color-gray-light: rgba(160, 160, 160, 0.32);
    
    /* ========================================
       HINTERGRUND FARBEN
       ======================================== */
    --color-bg-sidebar: linear-gradient(
        135deg,
        rgba(255, 234, 207, 0.7) 0%,
        rgba(230, 217, 255, 0.55) 100%
    );
    --color-bg-chatarea: rgba(245, 241, 253, 0.80);
    --color-bg-message-light: rgba(255, 255, 255, 0.63);
    --color-bg-overlay: rgba(255, 255, 255, 0.85);
    
    --color-bg-item-light: rgba(250, 247, 242, 0.05);
    --color-bg-item-medium: rgba(250, 247, 242, 0.25);
    --color-bg-item-dark: rgba(250, 247, 242, 0.45);
    --color-bg-item-soft: rgba(250, 247, 242, 0.5);
    --color-bg-item-strong: rgba(250, 247, 242, 0.9);
    
    --color-bg-purple-light: #F5F1FD;       /* Hellvioletter Hintergrund */
    --color-bg-purple-medium: rgba(245, 241, 253, 0.60);
    --color-bg-orange-light: #FFEACF;       /* Hellorange Hintergrund */
    --color-bg-soft: #FAF7F2;               /* Sehr weicher Hintergrund */
    
    /* ========================================
       AKZENT FARBEN
       ======================================== */
    --color-accent-orange: #FF9966;
    --color-accent-orange-light: #FFD4B8;
    --color-accent-orange-opacity-08: rgba(255, 153, 102, 0.08);
    --color-accent-orange-opacity-18: rgba(255, 153, 102, 0.18);
    --color-accent-orange-opacity-25: rgba(255, 153, 102, 0.25);
    --color-accent-orange-opacity-35: rgba(255, 153, 102, 0.35);
    --color-accent-orange-opacity-40: rgba(255, 153, 102, 0.4);
    --color-accent-orange-opacity-45: rgba(255, 153, 102, 0.45);
    --color-accent-orange-opacity-28: rgba(255, 153, 102, 0.28);
    --color-accent-purple: #C9B7E7;
    --color-accent-purple-dark: #8E79C7;    /* Dunkleres Violett */
    --color-accent-purple-opacity-55: rgba(201, 183, 231, 0.55);
    
    /* ========================================
       TYPOGRAPHIE
       ======================================== */
    --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-size-base: 0.875rem; /* 14px */
    --font-size-small: 0.75rem; /* 12px */
    --font-size-large: 1rem; /* 16px */
    --font-size-xl: 1.125rem; /* 18px */
    --font-size-xxl: 1.25rem; /* 20px */
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ========================================
       SPACING
       ======================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 15px;
    --spacing-xl: 20px;
    --spacing-2xl: 30px;
    
    /* ========================================
       BORDER RADIUS
       ======================================== */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    
    /* ========================================
       SCHATTEN
       ======================================== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    
    /* ========================================
       Z-INDEX
       ======================================== */
    --z-index-popup: 999999;
    --z-index-modal: 1200;
    --z-index-overlay: 9999;
    
    /* ========================================
       LAYOUT DIMENSIONEN
       ======================================== */
    --header-height: 110px;
    --header-bg: rgba(245, 241, 253, 0.80);
    --sidebar-width: 300px;
    --sidebar-width-collapsed: 60px;
    --popup-max-width: 1400px;
    --popup-margin-top: 110px;
    --content-max-width: 1200px;
    --popup-max-height: calc(100vh - var(--popup-margin-top) - 10px);
    
    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.35s ease;
}

/* ========================================
   BREITE BREAKPOINTS
   ======================================== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 0.8125rem; /* 13px */
        --header-height: 60px;
        --sidebar-width: 250px;
        --popup-max-width: 90%;
        --popup-margin-top: 60px;
        --popup-max-height: calc(100vh - var(--popup-margin-top) - 10px);
    }
}


#main-header > div > div > div {
    height: 0 !important;
}

/* ---------------------------------------------------------
   ORGATEAM COCKPIT – GLOBAL STYLES
   Farbpalette basiert auf Judiths Pastellfarben
--------------------------------------------------------- */

:root {
    /* Primärfarben */
    --otc-primary: #2EC4C9;
    --otc-primary-light: #9BE7E0;
    --otc-primary-bg: #E8F9F4;

    /* Grün */
    --otc-green: #43995C;
    --otc-green-light: #D8F5D0;

    /* Violett */
    --otc-purple: #5A4A6F;
    --otc-purple-light: #C9B7E7;
    --otc-purple-bg: var(--color-bg-purple-light);

    /* Orange / Apricot */
    --otc-orange: var(--color-accent-orange);
    --otc-orange-light: #F7C8A5;
    --otc-orange-bg: var(--color-bg-orange-light);

    /* Gelb */
    --otc-yellow: #F1C40F;
    --otc-yellow-bg: #FFF4C2;

    /* Blau / Grau */
    --otc-blue-bg: #CFE4FF;
    --otc-blue-light: #E6EEF7;

    /* Pink */
    --otc-pink: #F459AC;

    /* Neutrale */
    --otc-white: #FFFFFF;
    --otc-soft-bg: var(--color-bg-soft);
    --otc-border: #E8F1EB;
    --otc-text: #333;
}

/*========================================================
    ORGANIZATION PROFILE STYLES
    Cleaned and reorganized for better maintainability
=========================================================*/

/* Color Palette - deprecated, now use CSS variables from variables.css */
:root {
    --mint: var(--color-primary);
    --apricot: var(--color-accent-orange);
    --purple: var(--color-secondary-text);
    --light-purple: var(--color-accent-purple);
    --pale-mint: var(--color-primary-ultra-light);
    --pale-purple: rgba(201, 183, 231, 0.25);
    --white-glass: rgba(255, 255, 255, 0.35);
    --white-glass-strong: rgba(255, 255, 255, 0.68);
}