@import '_content/PSC.Blazor.Components.MarkdownEditor/PSC.Blazor.Components.MarkdownEditor.xe26l4utcx.bundle.scp.css';

/* /Components/Controls/Clock.razor.rz.scp.css */
.clock[b-b9snnqhdao] {
    position: relative;
    width: 200px;
    height: 200px;
    border: 8px solid #333;
    border-radius: 50%;
    margin: 20px auto;
    background: white;
}

.hand[b-b9snnqhdao] {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom;
    background: #333;
    border-radius: 2px;
}

    .hand.hour[b-b9snnqhdao] {
        height: 50px;
        width: 6px;
        background: #333;
    }

    .hand.minute[b-b9snnqhdao] {
        height: 70px;
        width: 4px;
        background: #555;
    }

    .hand.second[b-b9snnqhdao] {
        height: 90px;
        width: 2px;
        background: red;
    }

.center-dot[b-b9snnqhdao] {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* /Components/Controls/CommandPalette/CommandPalette.razor.rz.scp.css */
.command-palette-backdrop[b-pulz6c8zg6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    z-index: 1301;
    padding-top: 15vh;
    pointer-events: none;
}

[b-pulz6c8zg6] .command-palette-container {
    width: 640px;
    max-height: 480px;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: auto;
    align-self: flex-start;
}

.command-palette-header[b-pulz6c8zg6] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
}

.command-palette-search-icon[b-pulz6c8zg6] {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.command-palette-input[b-pulz6c8zg6] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
}

.command-palette-input[b-pulz6c8zg6]::placeholder {
    color: var(--mud-palette-text-secondary);
}

[b-pulz6c8zg6] .command-palette-esc-chip {
    flex-shrink: 0;
    cursor: default;
}

.command-palette-body[b-pulz6c8zg6] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    min-height: 100px;
    max-height: 360px;
}

.command-palette-section-label[b-pulz6c8zg6] {
    padding: 8px 16px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.command-palette-quick-actions[b-pulz6c8zg6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 16px 8px;
}

[b-pulz6c8zg6] .command-palette-action-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s;
}

[b-pulz6c8zg6] .command-palette-action-card:hover,
[b-pulz6c8zg6] .command-palette-action-card.highlighted {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

[b-pulz6c8zg6] .command-palette-action-card:hover .mud-icon-root,
[b-pulz6c8zg6] .command-palette-action-card.highlighted .mud-icon-root {
    color: var(--mud-palette-primary-text) !important;
}

.command-palette-item[b-pulz6c8zg6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.command-palette-item:hover[b-pulz6c8zg6],
.command-palette-item.highlighted[b-pulz6c8zg6] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.command-palette-item.highlighted[b-pulz6c8zg6] {
    border-left: 3px solid var(--mud-palette-primary);
    padding-left: 13px;
}

.command-palette-item-icon[b-pulz6c8zg6] {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.command-palette-item-text[b-pulz6c8zg6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.command-palette-item-text .mud-typography-body2[b-pulz6c8zg6] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-palette-loading[b-pulz6c8zg6] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
}

.command-palette-empty[b-pulz6c8zg6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

.command-palette-footer[b-pulz6c8zg6] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.command-palette-hint kbd[b-pulz6c8zg6] {
    display: inline-block;
    padding: 1px 5px;
    font-size: 0.7rem;
    font-family: inherit;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--mud-palette-surface);
    margin-right: 4px;
}

@media (max-width: 720px) {
    [b-pulz6c8zg6] .command-palette-container {
        width: calc(100vw - 32px);
        max-height: 70vh;
    }

    .command-palette-backdrop[b-pulz6c8zg6] {
        padding-top: 10vh;
    }
}
/* /Components/Controls/HorizontalBar.razor.rz.scp.css */
/*.percentage-bar-outer {
    width: 100%;
    height: 24px;
    background-color: #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    margin: 0.25rem 0;
    position: relative;
}

.percentage-bar-inner {
    height: 100%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    white-space: nowrap;
    transition: width 0.4s ease;
}

.percentage-bar-text {
    padding: 0 8px;
    font-size: 0.875rem;
}*/

.percentage-bar-wrapper[b-x2m3ckewug] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0;
}

.percentage-bar-label[b-x2m3ckewug] {
    min-width: 100px;
    font-weight: 500;
}

.percentage-bar-container[b-x2m3ckewug] {
    flex: 1;
    height: 16px;
   /* background-color: #e0e0e0;
    border-radius: 8px;*/
    overflow: hidden;
}

.percentage-bar-fill[b-x2m3ckewug] {
    height: 100%;
    transition: width 0.3s ease;
}

.percentage-bar-value[b-x2m3ckewug] {
    min-width: 50px;
    text-align: right;
    font-weight: bold;
}
/* /Components/Dialogs/GroupDialog.razor.rz.scp.css */
.color-box[b-2kwjw5e327] {
    width: 100%;
    height: 50px;
    border: 1px solid #ccc;
}
/* /Components/Dialogs/QuestionDialog.razor.rz.scp.css */
.answer-true-container[b-8l6h2uewna] {
    position: relative; 
    padding: 20px;
    border: 2px solid #a3cfbb;
    background-color: transparent;
    border-radius: 8px;
    text-align: center;
    width: 100%;
}

.answer-false-container[b-8l6h2uewna] {
    position: relative;
    padding: 20px;
    border: 2px solid #f66055;
    background-color: transparent;
    border-radius: 8px;
    text-align: center;
    width: 100%;
}
/* /Components/Dialogs/RandomExamQuestionSelectDialog.razor.rz.scp.css */
.tags-container[b-7lm6pv22sj] {
    max-height: 80px;
    overflow-y: auto
}
/* /Components/Layout/CultureSelector.razor.rz.scp.css */
.culture-selector[b-gy9f8yrn3p] {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.selected-culture[b-gy9f8yrn3p] {
    display: flex;
    align-items: center; /* Chevron und Content vertikal zentrieren */
    justify-content: space-between; /* Chevron nach rechts schieben */
    padding: 5px 10px;
}

    .selected-culture .content-sl[b-gy9f8yrn3p] {
        display: flex;
        align-items: center; /* Flagge und Text vertikal zentrieren */
    }

.flag[b-gy9f8yrn3p] {
    width: 24px;
    height: auto;
    margin-right: 8px;
}

.chevron[b-gy9f8yrn3p] {
    font-size: 22px;
}

/* "Soft Card" (mockup 2a) - a calmer, more premium popover than the previous 4px-radius grey box,
   with room for a real language name instead of just a flag. Not scoped to MainLayout like the
   teal-glass trigger is: this panel is always a plain light popover regardless of what page hosts
   the trigger, so the nicer styling is a straight improvement everywhere CultureSelector is used. */
.dropdown[b-gy9f8yrn3p] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background-color: var(--mud-palette-background);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
    z-index: 9999;
    min-width: 220px;
    padding: 8px;
}

.dropdown-item[b-gy9f8yrn3p] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    cursor: pointer;
}

.dropdown-item .flag[b-gy9f8yrn3p] {
    /* The base .flag rule's own margin-right would double up with this row's flex gap. */
    margin-right: 0;
}

.dropdown-item:hover[b-gy9f8yrn3p] {
    background-color: var(--mud-palette-action-default-hover);
}

.dropdown-item-active[b-gy9f8yrn3p] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-background));
}

.culture-name[b-gy9f8yrn3p] {
    flex: 1;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
}

.dropdown-check[b-gy9f8yrn3p] {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

/* Inline mode (FabNavMenu's mobile drawer) - flat row of flags, nothing to position/overflow. */
.culture-selector-inline[b-gy9f8yrn3p] {
    display: flex;
    gap: 8px;
}

.flag-btn[b-gy9f8yrn3p] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    opacity: .5;
}

.flag-btn .flag[b-gy9f8yrn3p] {
    margin-right: 0;
}

.flag-btn-active[b-gy9f8yrn3p] {
    opacity: 1;
    border-color: var(--mud-palette-primary);
}
/* /Components/Layout/FabNavMenu.razor.rz.scp.css */
/* MudPaper/MudIconButton/MudIcon/MudText/MudList/MudFab are child components: Blazor
   CSS isolation never stamps our scope attribute on a child component's own root
   element, only on literal HTML written directly in this file - so every rule below
   that targets a class we pass via Class="..." on one of those components uses
   ::deep, or it silently never matches (confirmed via raw server HTML: the scope
   attribute was present on our literal <div>s but absent on MudPaper's root <div>). */

/* pointer-events: none on the container, not just the panel - on mobile this box stretches
   the full viewport height (top:0 below) even while the panel inside it sits fully
   off-screen via transform, and its "empty" area was silently swallowing clicks meant for
   the AppBar's burger button underneath (confirmed via elementFromPoint at the burger's own
   coordinates). Both interactive children re-enable pointer-events on themselves. */
.wu-fab-nav[b-94hhzkxgb6] {
    position: fixed !important;
    left: 24px;
    bottom: 24px;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    pointer-events: none;
}

[b-94hhzkxgb6] .wu-fab-panel {
    width: 288px;
    border-radius: 18px !important;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 20px 44px -18px rgba(15, 23, 25, .38);
    transform: translateY(8px) scale(.98);
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

[b-94hhzkxgb6] .wu-fab-panel.wu-open {
    opacity: 1;
    max-height: none;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.wu-fab-panel-header[b-94hhzkxgb6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

[b-94hhzkxgb6] .wu-back-btn {
    margin-left: -4px;
}

[b-94hhzkxgb6] .wu-panel-group-icon {
    color: var(--mud-palette-primary);
}

[b-94hhzkxgb6] .wu-panel-title {
    font-weight: 700;
}

[b-94hhzkxgb6] .wu-fab-panel-list {
    display: flex;
    flex-direction: column;
    padding: 6px !important;
    max-height: 55vh;
    overflow-y: auto;
}

[b-94hhzkxgb6] .wu-fab-panel-list .mud-list-item {
    display: block;
    width: 100%;
    border-radius: 10px;
    padding: 8px 10px;
}

[b-94hhzkxgb6] .wu-fab-panel-list .wu-row-active {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.wu-row-content[b-94hhzkxgb6] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.wu-row-label[b-94hhzkxgb6] {
    flex: 1;
    line-height: 1.3;
    font-size: .875rem;
}

.wu-row-badge[b-94hhzkxgb6] {
    flex: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--mud-palette-primary);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-94hhzkxgb6] .wu-row-chevron {
    color: var(--mud-palette-text-secondary);
}

[b-94hhzkxgb6] .wu-fab-main {
    box-shadow: 0 14px 28px -8px rgba(15, 118, 110, .5) !important;
    pointer-events: auto;
}

.wu-fab-panel-footer[b-94hhzkxgb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.wu-fab-footer-link[b-94hhzkxgb6] {
    display: block;
    padding: 10px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    text-decoration: none;
    color: inherit;
}

/* UserControl renders Inline here (its own dropdown-inline is a flat block, not the floating
   .dropdown popup) - override the shared .wu-fab-panel-footer's flex-row layout (built for the
   one-line language row) so its stacked name/email + menu items lay out normally. Left padding
   is 16px (not the shared 14px) to match the nav rows' own left edge exactly - 6px list padding
   + 10px row padding above (UserControl.razor.css drops its own item padding to line up here). */
.wu-fab-user-footer[b-94hhzkxgb6] {
    display: block;
    padding-left: 16px;
    padding-right: 16px;
}

.wu-footer-label[b-94hhzkxgb6] {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.wu-fab-backdrop[b-94hhzkxgb6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1299;
}

/* Below md, opened via the AppBar's burger button (not the FAB, which is desktop-only -
   see .wu-fab-main's d-none d-md-flex) - the small popup becomes a full-height drawer. */
@media (max-width: 959.98px) {
    .wu-fab-nav[b-94hhzkxgb6] {
        left: 0;
        bottom: 0;
        top: 0;
    }

    [b-94hhzkxgb6] .wu-fab-panel {
        width: min(320px, 85vw);
        height: 100%;
        max-height: none;
        border-radius: 0 !important;
        transform: translateX(-100%);
        display: flex;
        flex-direction: column;
    }

    [b-94hhzkxgb6] .wu-fab-panel.wu-open {
        transform: translateX(0);
    }

    [b-94hhzkxgb6] .wu-fab-panel-list {
        flex: 1;
        max-height: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-56d6y1k4lp] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-56d6y1k4lp] {
    flex: 1;
}

.sidebar[b-56d6y1k4lp] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-56d6y1k4lp] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-56d6y1k4lp]  a, .top-row[b-56d6y1k4lp]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-56d6y1k4lp]  a:hover, .top-row[b-56d6y1k4lp]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-56d6y1k4lp]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-56d6y1k4lp] {
        justify-content: space-between;
    }

    .top-row[b-56d6y1k4lp]  a, .top-row[b-56d6y1k4lp]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-56d6y1k4lp] {
        flex-direction: row;
    }

    .sidebar[b-56d6y1k4lp] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-56d6y1k4lp] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-56d6y1k4lp]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-56d6y1k4lp], article[b-56d6y1k4lp] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-56d6y1k4lp] {
    background: lightyellow;
    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[b-56d6y1k4lp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ── Flat & native AppBar ─────────────────────────────────────────────── */
/* MudAppBar/MudText/MudButton/MudChip classes are styled globally in
   app.css, not here: ::deep only works when a literal HTML ancestor in
   this file wraps the target, and MudAppBar has none (it sits directly
   under MudLayout) - confirmed via raw server HTML, the scope attribute
   never reaches its root element from this file. See app.css. */

@media (max-width: 640px) {
    .wu-search-hint[b-56d6y1k4lp] {
        display: none;
    }
}
/* /Components/Layout/UserControl.razor.rz.scp.css */
.user-selector[b-3utu4t0dl6] {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.selected-user[b-3utu4t0dl6] {
    display: flex;
    align-items: center; /* Chevron und Content vertikal zentrieren */
    justify-content: space-between; /* Chevron nach rechts schieben */
    padding: 5px 10px;
}

    .selected-user .content-sl[b-3utu4t0dl6] {
        display: flex;
        align-items: center; /* Flagge und Text vertikal zentrieren */
    }

/*.flag {
    width: 24px;
    height: auto;
    margin-right: 8px;
}*/

.chevron[b-3utu4t0dl6] {
    font-size: 22px;
}

/* Compact mode's avatar (mockup "1b - ein Dock, ruhiger") - a flat translucent circle with
   initials, replacing the generic person-icon MudAvatar. An earlier pass used a conic gradient
   ring here, but that was one decorative technique too many competing with the rest of the dock -
   dropped in favor of the same flat glass look as everything else. Only rendered when
   Compact="true" (MainLayout's desktop app bar), so no other consumer of this component is
   affected. */
.wu-avatar-ring[b-3utu4t0dl6] {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 8px;
    background: rgba(255, 255, 255, 0.22);
}

.wu-avatar-initials[b-3utu4t0dl6] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

/* "Soft Card" (mockup 2a) - a calmer, more premium popover than the previous 4px-radius grey box,
   with room for the profile header below. Not scoped to MainLayout like the teal-glass trigger
   is: this panel is always a plain light popover regardless of what page hosts the trigger, so
   the nicer styling is a straight improvement everywhere UserControl is used. */
.dropdown[b-3utu4t0dl6] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background-color: var(--mud-palette-background);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
    z-index: 9999;
    min-width: 240px;
    white-space: nowrap;
    padding: 8px;
}

/* Profile header (Compact && !Inline only) - brings back the full name/email/role that the
   compact trigger (mockup "A - Aurora Glass") hides, right where the reviewer actually opens the
   menu to look for it. */
.dropdown-header[b-3utu4t0dl6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 14px;
}

.dropdown-header-avatar[b-3utu4t0dl6] {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary-darken);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.dropdown-header-text[b-3utu4t0dl6] {
    flex: 1;
    min-width: 0;
}

.dropdown-header-name[b-3utu4t0dl6] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.dropdown-header-email[b-3utu4t0dl6] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-header-role.mud-chip[b-3utu4t0dl6] {
    flex: none;
    align-self: flex-start;
    font-size: 10px;
    height: 20px;
}

/* Inline mode (FabNavMenu's mobile drawer): same items, laid out flat directly above the
   name/email instead of as a floating popup - no positioning/elevation needed. */
.dropdown-inline[b-3utu4t0dl6] {
    padding-bottom: 4px;
}

.user-selector-inline[b-3utu4t0dl6] {
    width: 100%;
}

/* Name/email renders last in Inline mode (directly above the language row that follows this
   component in FabNavMenu.razor) - the separator that used to sit above the items block now
   sits above this instead. */
.user-selector-inline .selected-user[b-3utu4t0dl6] {
    padding-left: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 4px;
    padding-top: 8px;
}

/* Left edge matches the nav rows above (FabNavMenu.razor.css: 6px list padding + 10px row
   padding = 16px) - the footer wrapper (FabNavMenu.razor.css, .wu-fab-user-footer) already
   supplies that 16px, so these items drop their own left/right padding to line up with it. */
.dropdown-inline .dropdown-item[b-3utu4t0dl6] {
    padding-left: 0;
    padding-right: 0;
}

.dropdown-item[b-3utu4t0dl6] {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
}

.dropdown-item:hover[b-3utu4t0dl6] {
    background-color: var(--mud-palette-action-default-hover);
}
/* /Components/Pages/ExamMonitorPage.razor.rz.scp.css */
.overlay[b-i4t470o827] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* halbtransparent weiß */
    z-index: 10;
}

.tile[b-i4t470o827] {
    /*background-color: #BDBDBD;*/
    width: 32px;
    height: 32px;
    /*border-radius: 4px;*/
    /*border: 1px solid #ccc;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    transition: background-color 0.3s ease;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-width: 1px;
}

.flip[b-i4t470o827] {
    animation: flipY-b-i4t470o827 0.6s forwards;
    /*background-color: #4CAF50 !important;*/ /* grün */
}

@keyframes flipY-b-i4t470o827 {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(90deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}
/* /Components/Pages/HomeAdmin.razor.rz.scp.css */
/* ── Bento-Anordnung: benannte Grid-Areas statt MudGrid, weil MudGrid
       (Flexbox-basiert) keine echte Grössen-Asymmetrie (7|2|3 Spalten,
       eine Kachel über 2 Zeilen) abbilden kann. Alle Klassen sind mit
       "hadmin-" präfixiert, weil dieser style-Block unscoped/global ist
       (kein CSS-Isolation-Scope-Attribut auf literalen HTML-Elementen in
       einem reinen style-Tag - bestätigt via Debug-Route in dieser Session). ── */

/* hadmin-page liegt als eigener Block AUSSERHALB des MudContainer, damit
       die volle verfügbare Breite genutzt wird statt nur der schmalen
       zentrierten MaxWidth-Box (Grauton als Seitenhintergrund wieder
       entfernt - kein "getönte Seite, weisse Karten"-Kontrast mehr, Nutzer-
       Feedback). Kein eigenes padding-bottom mehr: das kam zusätzlich zu
       MainLayouts eigenem "pb-20" auf dessen Container obendrauf - macht
       zusammen den grossen Abstand unten aus, den ein User bemängelte.
       Dieser MainLayout-Abstand ist app-weit einheitlich (jede Seite
       bekommt ihn), also hier nicht nochmal draufsetzen.

       Volle Seitenhöhe auf kurzen/leeren Zuständen: hadmin-page bekommt eine
       Mindesthöhe = Viewport minus AppBar (--mud-appbar-height, in app.css
       auf 76px gesetzt) minus das eigene Top-Padding von MainLayouts
       MudContainer ("pt-6" = 24px, MainLayout.razor). Bei einer erneuten
       Änderung von MainLayouts "pt-6" muss der Wert hier mitgezogen werden.

       Soll ohne Seiten-Scroll aufs Fenster passen, WENN genug Platz da ist
       (explizite Vorgabe) - dafür bekommt .hadmin-page eine ECHTE Höhe (nicht
       nur min-height) und reicht sie per Flex-Kette (.mud-container ->
       .mud-grid -> .hadmin-content-item -> .hadmin-bento) bis zum Bento-Grid
       durch. Die Bento-Zeilen selbst nutzen "fr" mit einer minmax()-
       Untergrenze statt fixer px-Werte, damit sich Hero/Trendkarten/
       Timeline-Zeile gemeinsam an die tatsächlich verfügbare Resthöhe
       anpassen, statt einen von drei fest verdrahteten Werten zu raten, der
       nur auf EINER Fenstergrösse passt (frühere Version: 450+250+350px,
       immer zu hoch für kleinere Fenster).

       Reicht selbst die Fensterhöhe für die Summe der minmax()-Untergrenzen
       nicht (sehr kleines Fenster), soll NICHT unsichtbar etwas abgeschnitten
       werden (das wurde ausprobiert und wieder verworfen) - stattdessen wächst
       .hadmin-bento bewusst über seine flex-zugeteilte Höhe hinaus und die
       Seite scrollt ganz normal (kein overflow:hidden auf .hadmin-bento oder
       .hadmin-page). Timeline hat zusätzlich ihren eigenen internen Scroll
       (.hadmin-tl-scroll) für viele Einträge; die einzelnen .hadmin-cells
       behalten ihr overflow:hidden nur für den Fall, dass EINE Karte für
       sich genommen zu wenig Höhe bekommt (z. B. Umsatz-Tabelle mit sehr
       vielen Abo-Typen) - das betrifft nur diese eine Karte, nicht die Seite.

       WICHTIG bei erneuten Anpassungen: NICHT flex-direction:column direkt
       auf .mud-grid ohne den Breiten-Fix darunter setzen - MudGrids xs="12"
       drückt "volle Breite" über flex-basis/max-width relativ zur
       Zeilen-Richtung aus, das kollidiert sonst mit column-Layout (Header
       und Bento landen nebeneinander statt untereinander). Der Fix dafür
       ist die explizite width:100%-Regel auf .mud-grid-item weiter unten. */
.hadmin-page[b-etnt54ltqd] {
    height: calc(100vh - var(--mud-appbar-height, 76px) - 24px);
    display: flex;
    flex-direction: column;
    /* MudBlazor setzt global "*{box-sizing:border-box}", darum zählt dieses
           Padding INNERHALB der obigen height mit statt sie zu vergrössern -
           kein erneutes Überlaufen, nur echter Abstand unten, damit die
           unterste Bento-Zeile nicht am Browserrand klebt. */
    padding-bottom: 8px;
}

/* ::deep ist hier zwingend: HomeAdmin.razor.css ist eine CSS-Isolation-Datei,
       Blazor scoped ihre Selektoren automatisch auf Elemente, die LITERAL in
       HomeAdmin.razor stehen. .mud-container/.mud-grid/.mud-grid-item werden
       von MudBlazors eigenen Komponenten gerendert und tragen dieses
       Scope-Attribut nicht - ohne ::deep würden diese Regeln lautlos nie
       greifen (per getBoundingClientRect nachgewiesen: display blieb "block"/
       "row" trotz dieser Regeln). */
.hadmin-page[b-etnt54ltqd]  .mud-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hadmin-page[b-etnt54ltqd]  .mud-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Breiten-Fix für die obige flex-direction:column (siehe Kommentar oben):
       MudGrids eigene Breitenberechnung über flex-basis/max-width erwartet
       flex-direction:row und wird hier explizit überschrieben. */
.hadmin-page[b-etnt54ltqd]  .mud-grid > .mud-grid-item {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
}

/* Nur der Content-Block (Bento bzw. Loading/Error/Empty-State) wächst in
       die verbleibende Höhe, der Header darüber bleibt bei seiner
       Inhaltsgrösse (siehe .mud-grid-item Regel oben). */
.hadmin-page[b-etnt54ltqd]  .mud-grid > .hadmin-content-item {
    flex: 1;
    display: flex;
    min-height: 0;
}

.hadmin-hairline[b-etnt54ltqd] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

/* Mobile-only header controls (mockup C) - a date pill filling the row's
       remaining width (the action a reviewer reaches for constantly) next to
       the kebab menu for Intelligente Einblicke/Exportieren, instead of the
       desktop row's three text buttons wrapping onto extra lines. */
.hadmin-mobile-controls[b-etnt54ltqd] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.hadmin-date-pill[b-etnt54ltqd] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-background);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.num[b-etnt54ltqd] {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.hadmin-bento[b-etnt54ltqd] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* fr-Anteile mit minmax()-Untergrenze statt fixer px: die drei Bänder
           (Hero/Donut/Micro, Trendkarten, Timeline/Umsatz) teilen sich die von
           der Flex-Kette oben durchgereichte Resthöhe proportional - passt
           alles ohne Scroll, wenn genug Platz da ist. Reicht die Fensterhöhe
           selbst für die minmax()-Untergrenzen nicht (sehr kleines Fenster),
           wächst .hadmin-bento bewusst über seine flex-zugeteilte Höhe hinaus
           (kein eigenes overflow:hidden hier) und die Seite scrollt normal -
           besser als Karteninhalt unsichtbar abzuschneiden. Hero/Donut/Micro
           brauchten früher 2 identische Zeilen nur wegen des alten
           4-Zeilen-Grids - jetzt 1 Zeile, macht die fr-Aufteilung einfacher. */
    grid-template-rows: minmax(480px, 1.6fr) minmax(260px, 0.9fr) minmax(200px, 1.1fr);
    grid-template-areas:
        "hero hero hero hero hero hero hero donut donut micro micro micro"
        "mini1 mini1 mini1 mini1 mini2 mini2 mini2 mini2 mini3 mini3 mini3 mini3"
        "timeline timeline timeline timeline table table table table table table table table";
    gap: 16px;
}

@media (max-width: 980px) {
    .hadmin-bento[b-etnt54ltqd] {
        grid-template-columns: repeat(2,1fr);
        grid-template-areas: "hero hero" "donut micro" "mini1 mini2" "mini3 mini3" "timeline timeline" "table table";
    }
}

/* Mobile-only segmented control (Übersicht/Aktivität/Umsatz) - groups the SAME
       bento cells above into three focused screens instead of one long scroll,
       for real phone widths where even the 980px 2-column fallback above is
       still too cramped (Nutzer-Feedback: "diese Seite ist noch nicht
       responsive"). Hidden on desktop via Bootstrap's d-md-none. */
.hadmin-mobile-tabs[b-etnt54ltqd] {
    display: flex;
    gap: 4px;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}

    .hadmin-mobile-tabs button[b-etnt54ltqd] {
        flex: 1;
        border: none;
        background: none;
        font: inherit;
        cursor: pointer;
        padding: 9px 4px;
        border-radius: 9px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }

    .hadmin-mobile-tabs button.active[b-etnt54ltqd] {
        background: var(--mud-palette-background);
        color: var(--mud-palette-text-primary);
        box-shadow: 0 1px 2px rgba(16,22,28,.08);
    }

/* display:contents on desktop - the wrapper itself takes no part in the CSS
       Grid, so every cell inside keeps reaching its own named grid-area exactly
       as if this wrapper didn't exist. Only below the mobile breakpoint does it
       become a real (flex) box that the tabs show/hide as a whole. */
.hadmin-mobile-group[b-etnt54ltqd] {
    display: contents;
}

.hadmin-cell[b-etnt54ltqd] {
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}
/* Achtung: in diesem Theme (WiseUpTheme.cs) ist --mud-palette-surface ein
       Hellgrau (#F3F4F6) und --mud-palette-background weiss - umgekehrt zur
       üblichen Material-Konvention. Karten nutzen daher bewusst "background"
       für weisse Flächen, "surface" nur für die leicht abgesetzten inneren
       Kacheln (Register-Block). */
.hadmin-panel[b-etnt54ltqd] {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16,22,28,.04);
    padding: 18px;
}

.hadmin-eyebrow[b-etnt54ltqd] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--mud-palette-text-secondary);
}

/* Hero: helle Fläche wie alle anderen Kacheln, keine Farbfläche und keine
       Akzentkontur mehr (auch die störte noch) - die Prominenz kommt allein
       aus Grösse/Weissraum. */
.hadmin-hero[b-etnt54ltqd] {
    grid-area: hero;
    padding: 28px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 10px 28px -14px rgba(16,22,28,.16);
    display: flex;
    flex-direction: column;
}

.hadmin-hero-top[b-etnt54ltqd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.hadmin-hero-badges[b-etnt54ltqd] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

    .hadmin-hero-badges b[b-etnt54ltqd] {
        color: var(--mud-palette-text-primary);
        font-weight: 600;
    }

.hadmin-hero-badge-delta[b-etnt54ltqd] {
    opacity: .75;
}

.hadmin-hero-divider[b-etnt54ltqd] {
    width: 1px;
    height: 12px;
    background: var(--mud-palette-lines-default);
}

.hadmin-hero-body[b-etnt54ltqd] {
    display: flex;
    flex-direction: column;
    /* Zentriert den Inhalt, wenn die Zeile (siehe .hadmin-bento
           grid-template-rows) mehr Höhe gibt, als Zahl+Chart+Legende
           brauchen - sonst bliebe auf hohen Fenstern unten Leerraum stehen. */
    flex: 1;
    justify-content: center;
    min-height: 0;
}

.hadmin-hero-number[b-etnt54ltqd] {
    font-size: 56px;
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.01em;
    margin: 18px 0 3px;
    color: var(--mud-palette-text-primary);
}

.hadmin-hero-delta[b-etnt54ltqd] {
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
    vertical-align: middle;
    color: var(--mud-palette-primary);
}

.hadmin-hero-label[b-etnt54ltqd] {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.hadmin-hero-chart[b-etnt54ltqd] {
    margin-top: 14px;
}

.hadmin-hero-legend[b-etnt54ltqd] {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 10px;
}

    .hadmin-hero-legend i[b-etnt54ltqd] {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        display: inline-block;
        margin-right: 5px;
    }

/* Geräteplattformen: Gesamtzahl-Zeile + Donut (Info/Success statt
       Primary/Grau) + Zeilen mit Name/Zahl/Prozent statt kompakter Legende -
       hebt sich bewusst farblich vom Rest der Seite ab. */
.hadmin-platform-cell[b-etnt54ltqd] {
    grid-area: donut;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

    .hadmin-platform-cell h4[b-etnt54ltqd] {
        font-size: 11.5px;
        font-weight: 600;
        margin: 0;
        color: var(--mud-palette-text-secondary);
    }

.hadmin-platform-total[b-etnt54ltqd] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

    .hadmin-platform-total .num[b-etnt54ltqd] {
        font-size: 20px;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        margin-right: 4px;
    }

.hadmin-platform-donut[b-etnt54ltqd] {
    align-self: center;
}

.hadmin-platform-rows[b-etnt54ltqd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hadmin-platform-row[b-etnt54ltqd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hadmin-platform-name[b-etnt54ltqd] {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    flex: 1;
}

    .hadmin-platform-name i[b-etnt54ltqd] {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        display: inline-block;
        margin-right: 8px;
    }

.hadmin-platform-count[b-etnt54ltqd] {
    font-size: 16px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.hadmin-platform-pct[b-etnt54ltqd] {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    width: 34px;
    text-align: right;
}

/* Benutzer/Aktive Abos pro Land - Nutzer-Wunsch: keine eigenen Kacheln, sondern
       direkt in die Gesamtbenutzer-Box (Flagge+Zahl in der bestehenden Badge-
       Zeile) bzw. in die Umsatzmetriken (Flagge+Zahl als weitere Spalte im
       bestehenden hadmin-rev-strip) integriert. */
.hadmin-flag-badges[b-etnt54ltqd] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.hadmin-flag-badge[b-etnt54ltqd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* .hadmin-flag-img wird von RegionImage auf das <img>/<span>(SVG) gesetzt (echtes
       Flaggen-Bild/eingebettetes SVG - dieselbe Komponente wie auf CountriesPage, da
       Emoji-Flaggen unter Windows nicht als Bild gerendert werden, nur als
       Buchstaben-Platzhalter). Fehlt ein Bild, rendert RegionImage stattdessen ein
       MudIcon - die Groesse gilt fuer alle drei Faelle. ::deep ist noetig, weil
       RegionImage eine eigene Komponente ist - ohne ::deep erreicht CSS-Isolation von
       HomeAdmin.razor.css deren gerendertes Markup gar nicht (galt unbemerkt auch
       schon fuer das alte <img>, dessen Groesse zufaellig durch den Browser-eigenen
       "Bild fehlt"-Platzhalter kaschiert wurde). */
.hadmin-flag-badge[b-etnt54ltqd]  .hadmin-flag-img {
    width: 16px;
    height: 11px;
    object-fit: cover;
    border-radius: 2px;
    flex: none;
}

/* Laender-Spalten in der Umsatzmetriken-Tabelle (eine Flagge pro Land als Spaltenkopf statt
   Namenstext - spart Breite, die Tabelle hat ohnehin schon Typ/Anzahl/MRR). */
.hadmin-revtab th[b-etnt54ltqd]  .hadmin-flag-img {
    display: inline-block;
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
}

.hadmin-micro-cell[b-etnt54ltqd] {
    grid-area: micro;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3,1fr);
    gap: 8px;
    padding: 12px;
}

.hadmin-micro-stat[b-etnt54ltqd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    padding: 10px 4px;
    border-radius: 11px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Fragen/Memory-Quizze/Duelle/Artikel/Gruppen navigieren zur jeweiligen
       Listenseite (siehe @@onclick in HomeAdmin.razor) - Hover/Transition
       gibt dem Klick eine sichtbare Affordanz, PlatformHealthScore bleibt
       ohne diese Klasse unklickbar (keine eigene Seite dafür). */
.hadmin-micro-stat.is-clickable[b-etnt54ltqd] {
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

    .hadmin-micro-stat.is-clickable:hover[b-etnt54ltqd] {
        background: var(--mud-palette-action-default-hover, rgba(0,0,0,.04));
        border-color: var(--mud-palette-primary);
    }
    /* Kein Icon mehr - die Zahl selbst trägt jetzt die Farbe, noch etwas
       grösser (21px auf 27px) mit grösserem Label. */
    .hadmin-micro-stat .hadmin-n[b-etnt54ltqd] {
        font-size: 27px;
        font-weight: 700;
    }

    .hadmin-micro-stat .hadmin-l[b-etnt54ltqd] {
        font-size: 10.5px;
        color: var(--mud-palette-text-secondary);
        text-transform: uppercase;
        letter-spacing: .03em;
        font-weight: 600;
    }

/* Umsatz-Zusammenfassung + Aufschlüsselung nach Abo-Typ jetzt EIN Block
       statt zwei getrennter Zellen - die Zusammenfassung läuft horizontal
       über der Tabelle statt gestapelt in einer schmalen Spalte. */
.hadmin-rev-strip[b-etnt54ltqd] {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.hadmin-rl[b-etnt54ltqd] {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    display: block;
    margin-bottom: 3px;
}

.hadmin-rv[b-etnt54ltqd] {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    font-size: 15px;
}
/* Anerkannter Umsatz ist die Headline-Zahl, der Rest sind Detailwerte -
       grösser, fetter, in der Akzentfarbe, per Trennlinie abgesetzt. */
.hadmin-rev-primary-group[b-etnt54ltqd] {
    padding-right: 28px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.hadmin-rv-primary[b-etnt54ltqd] {
    font-size: 26px;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.hadmin-mini1[b-etnt54ltqd] {
    grid-area: mini1;
}

.hadmin-mini2[b-etnt54ltqd] {
    grid-area: mini2;
}

.hadmin-mini3[b-etnt54ltqd] {
    grid-area: mini3;
}
/* Höhe kommt jetzt aus der Grid-Zeile (siehe .hadmin-bento
       grid-template-rows) statt einem festen px-Wert - Grid-Items strecken
       sich per Default (align-items:stretch) auf die Zeilenhöhe. Grid-Items
       bekommen laut Spec zwar automatisch min-height:auto (schützt vor
       Kompression unter die Inhaltsgrösse), aber dieser Schutz ist laut Spec
       deaktiviert, sobald das Element non-"visible" overflow hat (.hadmin-cell
       hat overflow:hidden) - genau das ist hier gewollt: unterschreitet das
       Fenster die minmax()-Untergrenze der Zeile, wird der Karteninhalt
       sauber abgeschnitten statt die ganze Seite zum Scrollen zu zwingen.
       display:flex + justify-content:center zentriert den Inhalt, falls die
       Zeile mehr Höhe gibt als Titel+Zahl+Trend+Chart brauchen. */
.hadmin-mini-cell[b-etnt54ltqd] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .hadmin-mini-cell h4[b-etnt54ltqd] {
        font-size: 11.5px;
        font-weight: 600;
        margin: 0 0 8px;
        color: var(--mud-palette-text-secondary);
    }
    /* Absolute Summe über den gewählten Zeitraum - vorher stand auf der Karte
       nur die Trend-Prozentzahl, nirgendwo eine echte Zahl. */
    .hadmin-mini-cell .hadmin-mini-value[b-etnt54ltqd] {
        font-size: 26px;
        font-weight: 700;
        color: var(--mud-palette-text-primary);
        line-height: 1.1;
    }

    .hadmin-mini-cell .hadmin-trend[b-etnt54ltqd] {
        font-size: 14px;
        font-weight: 600;
        margin: 2px 0 10px;
    }
/* Feste Pixel-Höhe statt "füllt die Karte über CSS-Overrides auf der SVG"
       (position:absolute/inset:0 + !important) - das erzwang zwar optisch die
       richtige Grösse, griff aber offenbar in etwas ein, das MudChart intern
       selbst über JS-Interop verwaltet (Tooltip-Positionierung/Hit-Testing):
       Nutzer-Feedback "wenn ich auf die Linie gehe mit der Maus, stürzt die
       Anwendung ab". Der Crash liess sich zwar nicht direkt reproduzieren,
       aber das Risiko, MudCharts eigene Grössen-Vorstellung per CSS zu
       überschreiben, ist real - eine normale, unangetastete Chart-Höhe ist
       hier wichtiger als exaktes Ausfüllen der Karte. */
.hadmin-mini-chart[b-etnt54ltqd] {
    margin-top: 4px;
}

/* Höhe kommt aus der Grid-Zeile (siehe .hadmin-bento grid-template-rows),
       nicht mehr aus einem festen px-Wert - "wächst mit der Anzahl
       Einträge/bis zum Seitenrand" bleibt trotzdem ausgeschlossen: bei vielen
       Aktivitäten soll NUR .hadmin-tl-scroll intern scrollen, die Karte selbst
       bleibt immer so hoch wie die Grid-Zeile vorgibt. */
.hadmin-timeline[b-etnt54ltqd] {
    grid-area: timeline;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .hadmin-timeline h4[b-etnt54ltqd], .hadmin-table-cell h4[b-etnt54ltqd] {
        font-size: 12.5px;
        font-weight: 600;
        margin: 0 0 12px;
        color: var(--mud-palette-text-primary);
    }

.hadmin-tl-scroll[b-etnt54ltqd] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.hadmin-tl-item[b-etnt54ltqd] {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    font-size: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

    .hadmin-tl-item:first-child[b-etnt54ltqd] {
        border-top: none;
        padding-top: 0;
    }

.hadmin-tl-dot[b-etnt54ltqd] {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--mud-palette-text-secondary);
    margin-top: 6px;
    flex-shrink: 0;
}

.hadmin-meta[b-etnt54ltqd] {
    color: var(--mud-palette-text-secondary);
    display: block;
    font-size: 10.5px;
    margin-top: 2px;
}

/* Höhe kommt wie bei .hadmin-timeline aus der Grid-Zeile (liegen in
       derselben Bento-Zeile nebeneinander). Bei vielen Abo-Typen oder einem
       geschrumpften Browserfenster reicht die Zeilenhöhe nicht immer für
       Kennzahlen-Streifen + Tabelle - overflow:hidden hat das dann still
       abgeschnitten (Nutzer-Feedback). Gleiches Muster wie .hadmin-tl-scroll:
       .hadmin-table-scroll bekommt den internen Scroll, die Karte selbst
       bleibt immer so hoch wie die Grid-Zeile vorgibt. */
.hadmin-table-cell[b-etnt54ltqd] {
    grid-area: table;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hadmin-table-scroll[b-etnt54ltqd] {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.hadmin-revtab[b-etnt54ltqd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .hadmin-revtab th[b-etnt54ltqd] {
        text-align: left;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--mud-palette-text-secondary);
        font-weight: 700;
        padding: 0 4px 8px;
    }

        .hadmin-revtab th.num-col[b-etnt54ltqd], .hadmin-revtab td.num-col[b-etnt54ltqd] {
            text-align: right;
        }

    .hadmin-revtab td[b-etnt54ltqd] {
        padding: 9px 4px;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

.hadmin-bar-track[b-etnt54ltqd] {
    height: 4px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
    margin-top: 6px;
    overflow: hidden;
    width: 100%;
}

.hadmin-bar-fill[b-etnt54ltqd] {
    height: 100%;
    border-radius: 2px;
}

/* Placed after every rule it needs to beat (same specificity, later in the
       cascade wins) - .hadmin-cell/.hadmin-tl-scroll/.hadmin-table-scroll are
       each redefined further up with overflow:hidden/auto and flex:1 relying on
       a grid-imposed height; this block only takes effect below the mobile
       breakpoint, where that height no longer exists.
       959.98px, not 768px - .d-md-none/.d-md-flex (used above for the mobile
       header controls and the tab bar) turned out to come from MudBlazor's own
       CSS on this page (its "md" breakpoint is 960px), not Bootstrap's 768px -
       confirmed by inspecting the actual matched CSSMediaRule at runtime. Using
       a different threshold here would open a dead zone between 768-960px
       where the header switches to mobile but the bento grouping doesn't
       (or vice versa). */
@media (max-width: 959.98px) {
    /* The desktop chain (.hadmin-page -> .mud-container -> .mud-grid ->
           .hadmin-content-item -> .hadmin-bento) forces everything into a fixed
           "fits the viewport, no page scroll" height. A phone needs the opposite:
           normal document flow that scrolls as far as the content requires.
           Overriding the root of that chain to an intrinsic height is enough -
           every flexed descendant below simply falls back to sizing itself by
           content once there is no longer a fixed height to distribute. */
    .hadmin-page[b-etnt54ltqd] {
        height: auto;
    }

    /* .hadmin-content-item now wraps TWO siblings (.hadmin-mobile-tabs and
           .hadmin-bento) instead of the single .hadmin-bento it had when this
           flex:1/display:flex rule was written - without flex-direction:column
           here, its default row direction placed the tab bar and the bento
           side by side instead of stacked (the squeezed grey box a screenshot
           caught this as). */
    .hadmin-page[b-etnt54ltqd]  .mud-grid > .hadmin-content-item {
        flex-direction: column;
    }

    .hadmin-bento[b-etnt54ltqd] {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        gap: 16px;
    }

    .hadmin-mobile-group[b-etnt54ltqd] {
        display: none;
        flex-direction: column;
        gap: 16px;
    }

        .hadmin-mobile-group.active[b-etnt54ltqd] {
            display: flex;
        }

    /* Cells no longer sit in a grid row with a minmax() height floor - let each
           one size to its own content instead of relying on overflow:hidden to
           silently clip whatever didn't fit (that clipping was itself a bug on
           narrow/short windows, not just a desktop convenience). */
    .hadmin-cell[b-etnt54ltqd], .hadmin-tl-scroll[b-etnt54ltqd], .hadmin-table-scroll[b-etnt54ltqd] {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    /* The micro-stat grid (Register) is 2 columns x 3 rows regardless of the
           outer breakpoint already - keep it, it already reads fine at phone
           width (mockup C validated this). */
    .hadmin-mini-chart[b-etnt54ltqd] {
        margin-top: 8px;
    }
}
/* /Components/Pages/LeaderboardPage.razor.rz.scp.css */
/* Leaderboard Top 3 Podium Bottom-Alignment Styles */

/* Container for top 3 podium - ensures bottom alignment */
[b-c1ii9in5kp] .podium-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 1rem;
}

/* Individual podium item wrapper */
[b-c1ii9in5kp] .podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/* Podium card styling with hover effect */
[b-c1ii9in5kp] .podium-card {
    transition: transform 0.2s ease-in-out;
    border-radius: 8px;
}

[b-c1ii9in5kp] .podium-card:hover {
    transform: translateY(-5px);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 959px) {
    [b-c1ii9in5kp] .podium-container {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    [b-c1ii9in5kp] .podium-item {
        width: 100%;
        max-width: 400px;
    }
}