/**
 * Glassmorphism Settings System
 * Dynamically controlled glass effects for UI panels
 * Updated: January 30, 2026
 *
 * NOTE: design-tokens.css is already loaded in index.html - no @import needed here!
 */

/* CSS Variables for Glassmorphism */
:root {
    --glass-blur: 10px;
    --glass-bg-opacity: 0.70;
    --glass-border-opacity: 0.3;
    --glass-shadow-depth: 20px;
    --glass-enabled: 1; /* 1 = enabled, 0 = disabled */
    --glass-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    /*
     * WICHTIG: Farben kommen aus dem aktiven Theme (window-themes.css)!
     * Fallback-Werte nur für den Fall dass kein Theme aktiv ist.
     * --theme-active-bg-start und --theme-active-primary werden in window-themes.css
     * pro Theme (global-theme-default, global-theme-blue, etc.) definiert.
     */
    --glass-color: var(--theme-active-bg-start, 20, 25, 40);
    --glass-border-color: var(--theme-active-primary, 121, 211, 255);
}

/*
 * Theme Integration: Übernimmt automatisch die Farben des aktiven Global-Themes
 * Die Theme-Variablen werden in window-themes.css gesetzt (body.global-theme-*)
 */

/* Apply glassmorphism to all panels when enabled - Higher specificity to override existing styles */
#scenery-settings-panel,
#audio-settings-panel,
#brain-window,
#dna-window,
#digital-twin-window,
#expertaizer-window,
#intelligainzer-window,
#chat-window,
.unified-window,
#color-wheel-container,
#audio-controls,
#search-container,
/* Investor Dashboard specific elements */
.content-section,
.hero-section,
.dashboard-card,
.chart-container,
.stat-card,
.kpi-card,
.section-card,
.modal-content,
.panel-container,
#ai-consultant-modal .modal-container,
#pdf-export-modal .modal-body,
#qa-audit-modal .modal-body,
#scenario-validator-modal .modal-body,
.bmc-box,
.metric-card,
.feature-card {
    background: rgba(var(--glass-color), calc(var(--glass-bg-opacity) * var(--glass-enabled))) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled))) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled))) !important;
    /* Border is always visible - either glass border or default border */
    border: 1px solid rgba(var(--glass-border-color), calc(0.2 + var(--glass-border-opacity) * var(--glass-enabled))) !important;
    box-shadow: 0 8px calc(var(--glass-shadow-depth) * var(--glass-enabled)) rgba(0, 0, 0, 0.3),
                0 0 40px rgba(var(--glass-border-color), 0.1) !important;
}

/* Entity Details Modal - glassmorphism */
.entity-details-overlay {
    background: rgba(var(--glass-color), calc(var(--glass-bg-opacity) * var(--glass-enabled) * 0.5)) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.5)) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.5)) !important;
}

.entity-details-modal {
    background: rgba(var(--glass-color), calc(var(--glass-bg-opacity) * var(--glass-enabled) * 1.5)) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled))) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled))) !important;
    border: 1px solid rgba(var(--glass-border-color), calc(var(--glass-border-opacity) * var(--glass-enabled))) !important;
    box-shadow: 0 8px calc(var(--glass-shadow-depth) * var(--glass-enabled)) rgba(0, 0, 0, 0.3) !important;
}

/* Quick Capture FAB - allow FAB stylesheet to control blur, color and animations */
.quick-capture-fab {
    /* noop: FAB visual styling is controlled by quick-capture-fab.css */
    /* prevents global overrides while keeping this file explicit about the FAB */
    pointer-events: auto; /* harmless default to satisfy linter */
}

.qc-panel {
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 2)) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 2)) !important;
    /* Don't override background - preserve panel colors */
}

/* Entity Table - glassmorphism */
#entity-table-window {
    background: rgba(var(--glass-color), calc(var(--glass-bg-opacity) * var(--glass-enabled) * 1.5)) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled))) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled))) !important;
    border: 1px solid rgba(var(--glass-border-color), calc(var(--glass-border-opacity) * var(--glass-enabled))) !important;
    box-shadow: 0 8px calc(var(--glass-shadow-depth) * var(--glass-enabled)) rgba(0, 0, 0, 0.3) !important;
}

/* Tooltips and dropdowns - glassmorphism */
.tippy-box {
    background: rgba(var(--glass-color), calc(var(--glass-bg-opacity) * var(--glass-enabled) * 2)) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.4)) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.4)) !important;
    border: 1px solid rgba(var(--glass-border-color), calc(var(--glass-border-opacity) * var(--glass-enabled))) !important;
}

/* Fallback when glass effects disabled */
:root[data-glass-disabled="true"] .scenery-settings-panel,
:root[data-glass-disabled="true"] .entity-details-modal,
:root[data-glass-disabled="true"] #entity-table-window,
:root[data-glass-disabled="true"] #brain-window,
:root[data-glass-disabled="true"] #dna-window,
:root[data-glass-disabled="true"] #digital-twin-window,
:root[data-glass-disabled="true"] #expertaizer-window,
:root[data-glass-disabled="true"] #intelligainzer-window,
:root[data-glass-disabled="true"] #chat-window,
:root[data-glass-disabled="true"] #color-wheel-container,
:root[data-glass-disabled="true"] #audio-controls,
:root[data-glass-disabled="true"] #search-container,
:root[data-glass-disabled="true"] #scenery-settings-panel,
:root[data-glass-disabled="true"] #ai-company-builder-window,
:root[data-glass-disabled="true"] #context-graph-window,
:root[data-glass-disabled="true"] #dashboard-window,
:root[data-glass-disabled="true"] #framework-universe-window,
:root[data-glass-disabled="true"] .unified-window {
    background: var(--glass-bg-dark);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important;
}

/* Ensure backdrop-filter is disabled globally when glass is off */
:root[data-glass-disabled="true"] *,
:root[data-glass-disabled="true"] *::before,
:root[data-glass-disabled="true"] *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Quick Capture FAB fallback - preserve colors when disabled */
:root[data-glass-disabled="true"] .quick-capture-fab {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Don't override the FAB background here so the original gradient (from quick-capture-fab.css)
       is preserved. Keep high-contrast support via border/box-shadow and icon color. */
    color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.3) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important;
    opacity: 1 !important;
}

:root[data-glass-disabled="true"] .quick-capture-fab i {
    color: #ffffff !important;
    font-size: 20px !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
}

/* Preserve readability of text */
.scenery-settings-panel,
.entity-details-modal,
#entity-table-window,
#brain-window,
#dna-window,
#digital-twin-window,
#expertaizer-window,
#intelligainzer-window,
#chat-window,
#color-wheel-container,
#audio-controls,
#search-container {
    color: rgb(var(--theme-active-text));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Fallback for no-theme */
:root:not([class*="global-theme-"]) .scenery-settings-panel,
:root:not([class*="global-theme-"]) .entity-details-modal,
:root:not([class*="global-theme-"]) #entity-table-window {
    color: #ffffff;
}

/* Settings panel header glassmorphism - Reduced transparency for better readability */
.scenery-settings-header {
    background: rgba(255, 255, 255, calc(var(--glass-bg-opacity) * var(--glass-enabled) * 0.15)) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.5)) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.5)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, calc(0.2 + var(--glass-border-opacity) * var(--glass-enabled))) !important;
}

/* Settings sections glassmorphism */
.settings-section summary {
    background: rgba(255, 255, 255, calc(var(--glass-bg-opacity) * var(--glass-enabled) * 0.3)) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.2)) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.2)) !important;
}

/* Button glassmorphism - Only apply to generic buttons, exclude colored action buttons */
/* Exclude buttons with specific classes that have their own styling */
/* IMPORTANT: Exclude BIF action buttons AND tabs which have their own gradient styling */
.scenery-settings-panel button:not(.close-btn):not([class*="-btn"]):not(.bif-pitchplan-action):not(.bif-launcher-action):not(.bif-pitchplan-tab):not(.bif-launcher-tab),
.brain-content button:not(.close-btn):not([class*="-btn"]):not(.bif-pitchplan-action):not(.bif-launcher-action):not(.bif-pitchplan-tab):not(.bif-launcher-tab),
.entity-details-modal button:not(.close-btn):not([class*="-btn"]):not(.bif-pitchplan-action):not(.bif-launcher-action):not(.bif-pitchplan-tab):not(.bif-launcher-tab),
button.filter-btn,
button.mode-checkbox,
button.search-action-btn {
    background: rgba(var(--glass-color), calc(var(--glass-bg-opacity) * var(--glass-enabled) * 1.5)) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.5)) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.5)) !important;
    border: 1px solid rgba(var(--glass-border-color), calc(var(--glass-border-opacity) * var(--glass-enabled))) !important;
}

.scenery-settings-panel button:hover:not(.close-btn):not([class*="-btn"]):not(.bif-pitchplan-tab):not(.bif-launcher-tab),
.brain-content button:hover:not(.close-btn):not([class*="-btn"]):not(.bif-pitchplan-tab):not(.bif-launcher-tab),
.entity-details-modal button:hover:not(.close-btn):not([class*="-btn"]):not(.bif-pitchplan-tab):not(.bif-launcher-tab),
button.filter-btn:hover,
button.mode-checkbox:hover,
button.search-action-btn:hover {
    background: rgba(var(--glass-color), calc(var(--glass-bg-opacity) * var(--glass-enabled) * 2)) !important;
    box-shadow: 0 4px calc(var(--glass-shadow-depth) * var(--glass-enabled) * 0.5) rgba(0, 0, 0, 0.3) !important;
}

/* Input fields glassmorphism */
input[type="range"],
select,
input[type="text"],
input[type="number"],
textarea {
    background: rgba(var(--glass-color), calc(var(--glass-bg-opacity) * var(--glass-enabled) * 0.8)) !important;
    backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.3)) !important;
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * var(--glass-enabled) * 0.3)) !important;
    border: 1px solid rgba(var(--glass-border-color), calc(var(--glass-border-opacity) * var(--glass-enabled) * 0.5)) !important;
}

/* Smooth transitions */
.scenery-settings-panel,
.entity-details-modal,
#quick-capture-fab,
#entity-table-window,
#brain-window,
#dna-window,
#digital-twin-window,
#expertaizer-window,
#intelligainzer-window,
#chat-window,
#color-wheel-container,
#audio-controls,
#search-container,
button,
input,
select,
textarea {
    transition: background 0.3s ease, backdrop-filter 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}