/**
 * Plugin-Branding System - CSS Variablen und Styles
 * Definiert Plugin-spezifische Farben und Styles
 */

:root {
    /* Default Plugin-Farben (Neufeld) */
    --plugin-primary: #6F42C1;
    --plugin-secondary: #E83E8C;
    --plugin-accent: #17A2B8;
    --plugin-logo: url('/images/neufeld-logo.png');
    --plugin-logo-dark: url('/images/neufeld-logo-dark.png');

    /* Alias für alte Loading-Screen Kompatibilität */
    /* Diese werden von plugin-branding.js überschrieben */
    --loading-primary: #6F42C1;
    --loading-secondary: #E83E8C;
    --loading-accent: #17A2B8;
}

/* Plugin-spezifische Überschreibungen */

/* Nidoa Plugin - Dark Teal Theme */
[data-plugin="nidoa"] {
    --plugin-primary: #296d78;      /* Dunkles Teal/Grün */
    --plugin-secondary: #255470;    /* Dunkles Blau */
    --plugin-accent: #16444b;       /* Sehr dunkles Teal */
    --plugin-logo: url('/images/Icon-nidoa.png');
    --plugin-logo-dark: url('/images/Icon-nidoa.png');
}

/* Pavol Plugin - Blue Theme */
[data-plugin="pavol"] {
    --plugin-primary: #007BFF;
    --plugin-secondary: #0056B3;
    --plugin-accent: #17A2B8;
    --plugin-logo: url('/favicon.png');
    --plugin-logo-dark: url('/favicon.png');
}

/* Famio Plugin - Blue/Orange Theme */
[data-plugin="famio"] {
    --plugin-primary: #7ab8d8;      /* Hellblau */
    --plugin-secondary: #f2b94f;    /* Orange/Gold */
    --plugin-accent: #5ea874;       /* Grün */
    --plugin-logo: url('/images/famio-logo-cropped.png');
    --plugin-logo-dark: url('/images/famio-logo-cropped.png');
}

/* Syno Plugin - Dark Blue Theme */
[data-plugin="syno"] {
    --plugin-primary: #0f3a4a;      /* Dunkelblau */
    --plugin-secondary: #56707a;    /* Graublau */
    --plugin-accent: #d9eef1;       /* Hellblau */
    --plugin-logo: url('/images/syno-chat-big.png');
    --plugin-logo-dark: url('/images/syno-chat-big.png');
}

/* Memra Plugin - Indigo Theme */
[data-plugin="memra"] {
    --plugin-primary: #6610F2;
    --plugin-secondary: #6F42C1;
    --plugin-accent: #5A6FD8;
    --plugin-logo: url('/favicon.png');
    --plugin-logo-dark: url('/favicon.png');
}

/**
 * Loading Screen - Plugin-Branding
 */
.neufeld-loading-container {
    background: linear-gradient(135deg, var(--plugin-primary, #6F42C1) 0%, var(--plugin-secondary, #E83E8C) 100%);
}

.loading-dots .dot {
    background-color: var(--plugin-accent, #17A2B8);
}

.loading-progress-modern .progress-bar {
    background-color: var(--plugin-accent, #17A2B8);
}

/**
 * Navbar - Plugin-Branding
 */
.navbar {
    border-bottom: 3px solid var(--plugin-primary, #6F42C1);
}

.navbar-brand {
    color: var(--plugin-primary, #6F42C1) !important;
}

/**
 * Buttons - Plugin-Branding
 */
.btn-primary {
    background-color: var(--plugin-primary, #6F42C1);
    border-color: var(--plugin-primary, #6F42C1);
}

.btn-primary:hover {
    background-color: var(--plugin-secondary, #E83E8C);
    border-color: var(--plugin-secondary, #E83E8C);
}

/**
 * Links - Plugin-Branding
 */
a {
    color: var(--plugin-primary, #6F42C1);
}

a:hover {
    color: var(--plugin-secondary, #E83E8C);
}

/**
 * Badges - Plugin-Branding
 */
.badge-primary {
    background-color: var(--plugin-primary, #6F42C1);
}

.badge-secondary {
    background-color: var(--plugin-secondary, #E83E8C);
}

/**
 * Cards - Plugin-Branding
 */
.card {
    border-top: 4px solid var(--plugin-accent, #17A2B8);
}

/**
 * Radzen Components - Plugin-Branding
 */
.rz-button-primary {
    background-color: var(--plugin-primary, #6F42C1) !important;
}

.rz-button-primary:hover {
    background-color: var(--plugin-secondary, #E83E8C) !important;
}

/**
 * Dark Mode Support
 */
@media (prefers-color-scheme: dark) {
    .neufeld-loading-container {
        background: linear-gradient(135deg, var(--plugin-secondary, #E83E8C) 0%, var(--plugin-primary, #6F42C1) 100%);
    }

    .loading-logo-image {
        content: var(--plugin-logo-dark, var(--plugin-logo));
    }
}

/**
 * Plugin Logo Animation - Smooth Transition
 */
.loading-logo-image,
.logo-circle {
    transition: opacity 0.3s ease-in-out;
}

/**
 * Loading Logo Sizing - Proper constraints to prevent oversized display
 */
.loading-logo-image {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.neufeld-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/**
 * Responsive Anpassungen
 */
@media (max-width: 768px) {
    .navbar {
        border-bottom-width: 2px;
    }

    .card {
        border-top-width: 3px;
    }
}

/**
 * Accessibilty - Fokus-Styling mit Plugin-Farbe
 */
.btn:focus,
a:focus,
button:focus {
    outline: 2px solid var(--plugin-accent, #17A2B8);
    outline-offset: 2px;
}

/**
 * Animations für Brand-Updates
 */
@keyframes fadeInBrand {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

[data-plugin] .loading-logo-image {
    animation: fadeInBrand 0.5s ease-out;
}