/*
 * Kompatible Glassmorphism-Schicht fuer die eigenstaendigen DWH-Demos.
 * Dashboard-Struktur, Chart-Groessen und Interaktionen bleiben unveraendert.
 */

:root {
    --glass-bg: #e8f2f7;
    --glass-surface: rgba(255, 255, 255, 0.62);
    --glass-surface-strong: rgba(255, 255, 255, 0.80);
    --glass-border: rgba(255, 255, 255, 0.88);
    --glass-line: rgba(49, 90, 120, 0.16);
    --glass-text: #102f4d;
    --glass-muted: #587087;
    --glass-accent: #8b4049;
    --glass-shadow: 0 18px 48px rgba(29, 62, 84, 0.14);
}

body {
    color: var(--glass-text);
    background-color: var(--glass-bg) !important;
    background-image:
        linear-gradient(rgba(246, 251, 253, 0.72), rgba(232, 242, 247, 0.80)),
        repeating-linear-gradient(90deg, transparent 0 79px, rgba(49, 90, 120, 0.055) 80px),
        repeating-linear-gradient(0deg, transparent 0 79px, rgba(49, 90, 120, 0.045) 80px),
        linear-gradient(125deg, rgba(205, 235, 242, 0.74), rgba(255, 255, 255, 0.90) 48%, rgba(139, 64, 73, 0.08)) !important;
    background-attachment: fixed !important;
}

.header,
header,
.topbar,
.top-nav,
.sidebar,
.sidebar-inner,
.nav-panel,
.filter-bar,
.toolbar {
    border-color: var(--glass-border) !important;
    background: rgba(248, 252, 253, 0.70) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
    box-shadow: 0 10px 30px rgba(29, 62, 84, 0.10) !important;
}

.card,
.kpi-card,
.chart-card,
.panel,
.table-card,
.content-card,
.insight-card,
.forecast-card,
.comparison-card,
.filter-card,
.modal-content,
.intro-card {
    border: 1px solid var(--glass-border) !important;
    background: var(--glass-surface) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    box-shadow: var(--glass-shadow) !important;
}

.kpi-card::before {
    opacity: 0.82;
}

.card:hover,
.kpi-card:hover,
.chart-card:hover,
.panel:hover {
    border-color: rgba(139, 64, 73, 0.22) !important;
    box-shadow: 0 22px 58px rgba(29, 62, 84, 0.18) !important;
}

h1,
h2,
h3,
h4,
.title,
.page-title,
.kpi-value {
    color: var(--glass-text) !important;
}

.subtitle,
.muted,
.kpi-label,
.kpi-sub {
    color: var(--glass-muted) !important;
}

table {
    border-color: var(--glass-border) !important;
    background: rgba(255, 255, 255, 0.52) !important;
}

th {
    color: var(--glass-text) !important;
    background: rgba(205, 235, 242, 0.54) !important;
}

td,
th {
    border-color: var(--glass-line) !important;
}

input,
select,
textarea,
button {
    border-color: rgba(49, 90, 120, 0.22) !important;
}

input,
select,
textarea {
    color: var(--glass-text) !important;
    background: rgba(255, 255, 255, 0.72) !important;
}

button.primary,
.btn-primary,
.primary-btn,
.cta-button {
    color: #fff !important;
    background: linear-gradient(135deg, #a54852, #6f2833) !important;
    border-color: rgba(255, 255, 255, 0.56) !important;
    box-shadow: 0 10px 24px rgba(139, 64, 73, 0.24) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(139, 64, 73, 0.38) !important;
    outline-offset: 3px !important;
}

.modal,
.overlay {
    background: rgba(16, 47, 77, 0.46) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body {
        background: #fff !important;
    }

    .card,
    .kpi-card,
    .chart-card,
    .panel,
    .table-card,
    .content-card {
        background: #fff !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}