/* ================================================================
   COUPLINK THEME SYSTEM - Zentrales Stylesheet
   ================================================================
   
   Einbindung:  <link rel="stylesheet" href="couplink-theme.css" />
   Theme-JS:    <script src="couplink-theme.js"></script>
   
   Verfügbare Themes: dark, light, classic, custom
   
   Verwendung der Variablen:
     background: var(--cl-bg-primary);
     color: var(--cl-text-primary);
     border: 1px solid var(--cl-border);
   
   ================================================================ */

/* ============================================
   DEFAULT: Dark Theme
   ============================================ */
:root {
    /* --- Core Palette (aus DispoCenter NG) --- */
    --cl-bg-primary:      #0a0e14;
    --cl-bg-secondary:    #111820;
    --cl-bg-card:         #151d28;
    --cl-border:          #2a3a4d;
    --cl-text-primary:    #e8eef5;
    --cl-text-secondary:  #8b9db5;
    --cl-accent:          #00b4d8;
    --cl-success:         #38b000;
    --cl-warning:         #f77f00;
    --cl-danger:          #d62828;

    /* --- Sidebar --- */
    --cl-sidebar-bg:          linear-gradient(180deg, #111820 0%, #0a0e14 100%);
    --cl-sidebar-text:        #e8eef5;
    --cl-sidebar-text-muted:  rgba(232, 238, 245, 0.7);
    --cl-sidebar-hover:       rgba(255, 255, 255, 0.08);
    --cl-sidebar-active-bg:   rgba(0, 180, 216, 0.2);
    --cl-sidebar-active-border: #00b4d8;
    --cl-sidebar-divider:     rgba(255, 255, 255, 0.08);
    --cl-sidebar-input-bg:    rgba(255, 255, 255, 0.08);
    --cl-sidebar-input-border: rgba(255, 255, 255, 0.15);
    --cl-sidebar-submenu-bg:  rgba(0, 0, 0, 0.2);
    --cl-sidebar-submenu-deep: rgba(0, 0, 0, 0.15);
    --cl-sidebar-shadow:      4px 0 12px rgba(0, 0, 0, 0.3);
    --cl-sidebar-scrollbar:   rgba(255, 255, 255, 0.15);

    /* --- Cards / Glassmorphism --- */
    --cl-glass-bg:            rgba(21, 29, 40, 0.85);
    --cl-glass-border:        rgba(42, 58, 77, 0.5);
    --cl-glass-shadow:        0 4px 12px rgba(0, 0, 0, 0.3);
    --cl-glass-blur:          blur(10px);

    /* --- Buttons --- */
    --cl-btn-bg:              #151d28;
    --cl-btn-border:          #2a3a4d;
    --cl-btn-hover-bg:        #1e2a3a;
    --cl-btn-primary-bg:      #00b4d8;
    --cl-btn-primary-text:    #ffffff;
    --cl-btn-danger-bg:       #d62828;
    --cl-btn-danger-hover:    #b52020;

    /* --- Inputs --- */
    --cl-input-bg:            #0a0e14;
    --cl-input-border:        #2a3a4d;
    --cl-input-text:          #e8eef5;
    --cl-input-placeholder:   #8b9db5;
    --cl-input-focus-border:  #00b4d8;

    /* --- Scrollbar --- */
    --cl-scrollbar-track:     transparent;
    --cl-scrollbar-thumb:     rgba(255, 255, 255, 0.15);
    --cl-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);

    /* --- Logo Gradient --- */
    --cl-logo-gradient:       linear-gradient(135deg, #00b4d8 0%, #667eea 100%);

    /* --- Misc --- */
    --cl-spinner-color:       #00b4d8;
    --cl-badge-bg:            #d62828;
    --cl-badge-text:          #ffffff;
    --cl-shadow-sm:           0 2px 4px rgba(0, 0, 0, 0.2);
    --cl-shadow-md:           0 4px 12px rgba(0, 0, 0, 0.3);
    --cl-shadow-lg:           0 8px 24px rgba(0, 0, 0, 0.4);
    --cl-radius-sm:           6px;
    --cl-radius-md:           8px;
    --cl-radius-lg:           12px;
    --cl-transition:          all 0.2s ease;

    /* --- Backward Compatibility: DispoCenter --color-* Mapping --- */
    --color-bg-primary:       var(--cl-bg-primary);
    --color-bg-secondary:     var(--cl-bg-secondary);
    --color-bg-card:          var(--cl-bg-card);
    --color-border-primary:   var(--cl-border);
    --color-text-primary:     var(--cl-text-primary);
    --color-text-secondary:   var(--cl-text-secondary);
    --color-accent-primary:   var(--cl-accent);
    --color-accent-success:   var(--cl-success);
    --color-accent-warning:   var(--cl-warning);
    --color-accent-danger:    var(--cl-danger);
}


/* ============================================
   LIGHT Theme
   ============================================ */
[data-theme="light"] {
    --cl-bg-primary:      #f0f2f5;
    --cl-bg-secondary:    #ffffff;
    --cl-bg-card:         #ffffff;
    --cl-border:          #e2e8f0;
    --cl-text-primary:    #1a202c;
    --cl-text-secondary:  #4a5568;
    --cl-accent:          #3b82f6;
    --cl-success:         #48bb78;
    --cl-warning:         #ed8936;
    --cl-danger:          #f56565;

    --cl-sidebar-bg:          linear-gradient(180deg, #ffffff 0%, #f0f2f5 100%);
    --cl-sidebar-text:        #1a202c;
    --cl-sidebar-text-muted:  #4a5568;
    --cl-sidebar-hover:       rgba(59, 130, 246, 0.08);
    --cl-sidebar-active-bg:   rgba(59, 130, 246, 0.12);
    --cl-sidebar-active-border: #3b82f6;
    --cl-sidebar-divider:     #e2e8f0;
    --cl-sidebar-input-bg:    #f1f5f9;
    --cl-sidebar-input-border: #e2e8f0;
    --cl-sidebar-submenu-bg:  #f8fafc;
    --cl-sidebar-submenu-deep: #f1f5f9;
    --cl-sidebar-shadow:      4px 0 12px rgba(0, 0, 0, 0.08);
    --cl-sidebar-scrollbar:   rgba(0, 0, 0, 0.15);

    --cl-glass-bg:            rgba(255, 255, 255, 0.90);
    --cl-glass-border:        rgba(226, 232, 240, 0.5);
    --cl-glass-shadow:        0 4px 12px rgba(0, 0, 0, 0.1);
    --cl-glass-blur:          blur(10px);

    --cl-btn-bg:              #f8fafc;
    --cl-btn-border:          #e2e8f0;
    --cl-btn-hover-bg:        #3b82f6;
    --cl-btn-primary-bg:      #3b82f6;
    --cl-btn-primary-text:    #ffffff;
    --cl-btn-danger-bg:       #ef4444;
    --cl-btn-danger-hover:    #dc2626;

    --cl-input-bg:            #ffffff;
    --cl-input-border:        #e2e8f0;
    --cl-input-text:          #1a202c;
    --cl-input-placeholder:   #a0aec0;
    --cl-input-focus-border:  #3b82f6;

    --cl-scrollbar-thumb:     rgba(0, 0, 0, 0.15);
    --cl-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

    --cl-logo-gradient:       linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

    --cl-spinner-color:       #3b82f6;
    --cl-badge-bg:            #ef4444;
    --cl-badge-text:          #ffffff;
    --cl-shadow-sm:           0 2px 4px rgba(0, 0, 0, 0.06);
    --cl-shadow-md:           0 4px 12px rgba(0, 0, 0, 0.1);
    --cl-shadow-lg:           0 8px 24px rgba(0, 0, 0, 0.15);
}


/* ============================================
   CLASSIC Theme
   ============================================ */
[data-theme="classic"] {
    --cl-bg-primary:      #e4e4e4;
    --cl-bg-secondary:    #f5f5f5;
    --cl-bg-card:         #ffffff;
    --cl-border:          #b0b0b0;
    --cl-text-primary:    #333333;
    --cl-text-secondary:  #555555;
    --cl-accent:          #154273;
    --cl-success:         #2e7d32;
    --cl-warning:         #ed6c02;
    --cl-danger:          #c62828;

    --cl-sidebar-bg:          linear-gradient(180deg, #f5f5f5 0%, #e4e4e4 100%);
    --cl-sidebar-text:        #333333;
    --cl-sidebar-text-muted:  #666666;
    --cl-sidebar-hover:       rgba(21, 66, 115, 0.08);
    --cl-sidebar-active-bg:   rgba(21, 66, 115, 0.12);
    --cl-sidebar-active-border: #154273;
    --cl-sidebar-divider:     #c8c8c8;
    --cl-sidebar-input-bg:    #ffffff;
    --cl-sidebar-input-border: #b0b0b0;
    --cl-sidebar-submenu-bg:  #ebebeb;
    --cl-sidebar-submenu-deep: #e0e0e0;
    --cl-sidebar-shadow:      4px 0 12px rgba(0, 0, 0, 0.1);
    --cl-sidebar-scrollbar:   rgba(0, 0, 0, 0.2);

    --cl-glass-bg:            rgba(255, 255, 255, 0.92);
    --cl-glass-border:        rgba(176, 176, 176, 0.5);
    --cl-glass-shadow:        0 4px 12px rgba(0, 0, 0, 0.12);
    --cl-glass-blur:          blur(10px);

    --cl-btn-bg:              #f5f5f5;
    --cl-btn-border:          #b0b0b0;
    --cl-btn-hover-bg:        #154273;
    --cl-btn-primary-bg:      #154273;
    --cl-btn-primary-text:    #ffffff;
    --cl-btn-danger-bg:       #c62828;
    --cl-btn-danger-hover:    #a52020;

    --cl-input-bg:            #ffffff;
    --cl-input-border:        #b0b0b0;
    --cl-input-text:          #333333;
    --cl-input-placeholder:   #999999;
    --cl-input-focus-border:  #154273;

    --cl-scrollbar-thumb:     rgba(0, 0, 0, 0.2);
    --cl-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);

    --cl-logo-gradient:       linear-gradient(135deg, #154273 0%, #2c3e50 100%);

    --cl-spinner-color:       #154273;
    --cl-badge-bg:            #c62828;
    --cl-badge-text:          #ffffff;
    --cl-shadow-sm:           0 2px 4px rgba(0, 0, 0, 0.08);
    --cl-shadow-md:           0 4px 12px rgba(0, 0, 0, 0.12);
    --cl-shadow-lg:           0 8px 24px rgba(0, 0, 0, 0.18);
}


/* ============================================
   CUSTOM Theme - per JS gesetzt
   ============================================ */
[data-theme="custom"] {
    --cl-bg-primary:      var(--custom-bg-primary, #0a0e14);
    --cl-bg-secondary:    var(--custom-bg-secondary, #111820);
    --cl-bg-card:         var(--custom-bg-card, #151d28);
    --cl-border:          var(--custom-border-primary, #2a3a4d);
    --cl-text-primary:    var(--custom-text-primary, #e8eef5);
    --cl-text-secondary:  var(--custom-text-secondary, #8b9db5);
    --cl-accent:          var(--custom-accent-primary, #00b4d8);
    --cl-success:         var(--custom-accent-success, #38b000);
    --cl-warning:         var(--custom-accent-warning, #f77f00);
    --cl-danger:          var(--custom-accent-danger, #d62828);

    /* Sidebar wird automatisch vom Accent abgeleitet */
    --cl-sidebar-active-bg:     rgba(var(--custom-accent-primary-rgb, 0, 180, 216), 0.2);
    --cl-sidebar-active-border: var(--custom-accent-primary, #00b4d8);

    --cl-btn-primary-bg:  var(--custom-accent-primary, #00b4d8);
    --cl-input-focus-border: var(--custom-accent-primary, #00b4d8);
    --cl-spinner-color:   var(--custom-accent-primary, #00b4d8);
}


/* ============================================
   SHARED UTILITY STYLES (optional einbinden)
   ============================================ */

/* Scrollbar Styling */
.cl-scrollbar::-webkit-scrollbar,
.menu::-webkit-scrollbar {
    width: 6px;
}

.cl-scrollbar::-webkit-scrollbar-track,
.menu::-webkit-scrollbar-track {
    background: var(--cl-scrollbar-track);
}

.cl-scrollbar::-webkit-scrollbar-thumb,
.menu::-webkit-scrollbar-thumb {
    background: var(--cl-sidebar-scrollbar, var(--cl-scrollbar-thumb));
    border-radius: 3px;
}

.cl-scrollbar::-webkit-scrollbar-thumb:hover,
.menu::-webkit-scrollbar-thumb:hover {
    background: var(--cl-scrollbar-thumb-hover);
}

/* Focus Styles */
.cl-focus:focus,
input:focus,
select:focus {
    outline: none;
    border-color: var(--cl-input-focus-border);
}

/* Toast Base */
.cl-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: var(--cl-radius-md);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--cl-shadow-lg);
    z-index: 10000;
    animation: cl-toast-slide-in 0.3s ease-out;
}

@keyframes cl-toast-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Spinner */
.cl-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--cl-spinner-color);
    border-radius: 50%;
    animation: cl-spin 1s linear infinite;
}

@keyframes cl-spin {
    to { transform: rotate(360deg); }
}