html, body {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    color: #1f2430;
    /* Thematisches Hintergrundbild (Unsplash-Lizenz) + heller Schleier für Lesbarkeit. */
    background-image:
        linear-gradient(180deg, rgba(245, 247, 251, 0.72) 0%, rgba(245, 247, 251, 0.86) 100%),
        url('bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* ---------------------------------------------------------------------------
   Durchscheinende (frosted) Vordergrund-Flächen. Buttons, aktive Navigation,
   Chips und Dropdowns bleiben deckend – also nur EINIGE Elemente durchscheinend.
   --------------------------------------------------------------------------- */

/* Inhaltskarten/Tabellen */
.mud-paper:not(.mud-popover):not(.mud-popover-paper):not(.mud-picker):not(.mud-menu-paper) {
    background-color: rgba(255, 255, 255, 0.62) !important;
    -webkit-backdrop-filter: saturate(165%) blur(16px);
    backdrop-filter: saturate(165%) blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(80, 80, 140, 0.08) !important;
}

/* Appbar & Drawer: helles Milchglas */
.mud-appbar {
    background-color: rgba(255, 255, 255, 0.6) !important;
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: none !important;
}

.mud-drawer {
    background-color: rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-right: 1px solid rgba(255, 255, 255, 0.6);
}

/* Aktive Navigation als kräftiger Akzent-„Pill" (deckend). */
.mud-nav-link.active {
    background-color: #002EAD !important;
    color: #ffffff !important;
    border-radius: 12px !important;
}
.mud-nav-link.active .mud-icon-root {
    color: #ffffff !important;
}

/* Dialoge deutlich lesbar. */
.mud-dialog {
    background-color: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    backdrop-filter: saturate(160%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 20px !important;
    box-shadow: 0 24px 70px rgba(40, 40, 90, 0.18) !important;
}

/* Tabellen behalten die (leicht transparente) weiße Kartenfläche;
   Header und Daten damit einheitlich. Zeilen dezent hervorheben. */
.mud-table-container {
    background-color: transparent !important;
}
.mud-table-root tbody .mud-table-row:hover {
    background-color: rgba(0, 46, 173, 0.05) !important;
}
/* Inhalt an die runden Ecken clippen -> untere Ecken auch im Leer-Zustand rund. */
.mud-table {
    overflow: hidden !important;
}

/* Buttons etwas runder (Füllung/Farbe bleibt deckend). */
.mud-button-root {
    border-radius: 10px !important;
}

/* Dropdowns/Menüs deckend (Lesbarkeit). */
.mud-popover.mud-popover-open {
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Tooltips: weißer Hintergrund, dunkle Schrift (statt weiß auf weiß). */
.mud-tooltip {
    background-color: #ffffff !important;
    color: #1f2430 !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}
.mud-tooltip .mud-tooltip-arrow::before {
    background-color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   App-Shell: Sidebar + Inhalt zusammen in EINER schwebenden, transparenten Box.
   --------------------------------------------------------------------------- */
.app-shell {
    display: flex;
    margin: 18px;
    min-height: calc(100vh - 36px);
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(40, 40, 90, 0.16);
    overflow: hidden;
}

.app-sidebar {
    width: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
    background-color: rgba(255, 255, 255, 0.28);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.app-brand {
    display: flex;
    justify-content: center;
    padding: 10px 0 16px;
}
.app-brand img { height: 44px; }

.app-nav { flex: 1; overflow-y: auto; }
.app-nav .mud-nav-menu { background: transparent; }

.app-sidebar-footer {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.app-nav-toggle { display: none; }

.app-content {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px;
}

/* Karten INNERHALB der Shell: deckender und ohne zweiten Blur (klar lesbar). */
.app-shell .mud-paper:not(.mud-popover):not(.mud-popover-paper):not(.mud-picker):not(.mud-menu-paper) {
    background-color: rgba(255, 255, 255, 0.74) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Responsiv: schmale Bildschirme -> Sidebar ein-/ausklappbar. */
@media (max-width: 900px) {
    .app-shell { flex-direction: column; margin: 10px; min-height: calc(100vh - 20px); }
    .app-sidebar {
        width: auto;
        display: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    .app-sidebar.open { display: flex; }
    .app-nav-toggle { display: inline-flex; }
}

#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Kalendereinträge über die volle Zellenbreite ziehen (Heron.MudCalendar) */
.mud-calendar .mud-cal-cell-template { width: 100%; }
.mud-calendar .mud-cal-cell-template .mud-tooltip-root { display: block; width: 100%; }
.erapport-cal-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 6px;
    margin: 1px 0;
    font-size: .78rem;
    line-height: 1.2;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Abrechnungs-Umschalter in den Plan-Karten: randlos, etwas mehr Luft */
.erapport-plan-toggle { border: none !important; }
.erapport-plan-toggle .mud-toggle-item { padding: 4px 14px; }