/* style-class.css
   Ziel: iOS-Glas-Effekt für dein Dashboard, ohne einzelne Cards mit Klassen zu versehen.
   Voraussetzung: Wrapper-Klasse "dashboard-glass" am MudContainer (1x Änderung).
*/

/* =========================
   Dashboard Background Glow
   ========================= */
.dashboard-glass {
    position: relative;
    isolation: isolate;
}

    /* Glow layer hinter allen Cards */
    .dashboard-glass::before {
        content: "";
        position: absolute;
        /*inset: -70px;*/
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(720px 420px at 18% 18%, rgba(0, 255, 255, 0.10), transparent 62%), radial-gradient(640px 380px at 82% 22%, rgba(90, 160, 255, 0.12), transparent 64%), radial-gradient(860px 520px at 55% 88%, rgba(0, 255, 180, 0.08), transparent 64%);
        filter: blur(2px);
        opacity: 0.9;
    }

    /* Content über Glow */
    .dashboard-glass > * {
        position: relative;
        z-index: 1;
    }

    /* =========================
   Glassmorphism für alle MudCards im Dashboard
   (überschreibt bestehende Styles)
   ========================= */
    .dashboard-glass .mud-card {
        position: relative;
        overflow: hidden;
        /* Glasfläche */
        background: rgba(18, 28, 40, 0.38) !important;
        /* Frost */
        backdrop-filter: blur(18px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
        /* iOS-artige Kante + Tiefe */
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
        border-radius: 14px !important;
    }

        /* MudBlazor Outlined cards: Border/Background vereinheitlichen */
        .dashboard-glass .mud-card.mud-card-outlined {
            border-width: 1px !important;
        }

        /* Highlightschicht oben */
        .dashboard-glass .mud-card::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
            background: linear-gradient( to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.00) 42% );
        }

        /* Dezentes Grain (optional, sieht mehr nach iOS-Material aus) */
        .dashboard-glass .mud-card::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: inherit;
            opacity: 0.06;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
        }

/* Hover (optional) */
@media (hover:hover) {
    .dashboard-glass .mud-card:hover {
        border-color: rgba(255, 255, 255, 0.16) !important;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    }
}

/* =========================
   Inneres der Cards transparent lassen
   ========================= */
.dashboard-glass .mud-card-header,
.dashboard-glass .mud-card-content,
.dashboard-glass .mud-card-actions {
    background: transparent !important;
}

/* Tabellen/Divider Linien weicher */
.dashboard-glass .mud-simple-table,
.dashboard-glass .mud-simple-table *,
.dashboard-glass .mud-divider {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Typo etwas klarer auf Glas */
.dashboard-glass .mud-typography,
.dashboard-glass .mud-input,
.dashboard-glass .mud-field,
.dashboard-glass .mud-table-cell {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.30);
}

/* Dein vorhandenes "blurred" sinnvoll belegen (falls du es nutzt) */
.dashboard-glass .blurred {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.30);
}

/* =========================
   Fallback (ohne backdrop-filter)
   ========================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dashboard-glass .mud-card {
        background: rgba(18, 28, 40, 0.78) !important;
    }
}