html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

/* ── AppBar (MainLayout, "Flat & native" direction) ─────────────────────────
   MudAppBar has no Color enum value that maps to a Surface-toned
   background - MudBlazor's Color.Surface produces a "mud-theme-surface"
   class that has NO matching CSS rule anywhere in MudBlazor.min.css (it's
   a silent no-op; confirmed by grepping the shipped stylesheet). MudAppBar
   always falls back to its own base rule, background-color: var(--mud-
   palette-appbar-background), which this app's theme deliberately sets to
   a strong teal (WiseUpThemeOptions.Light.AppbarBackground) - separate
   from --mud-palette-surface on purpose. So the light/soft AppBar surface
   has to be set explicitly here; Elevation="0" is set via the markup (no
   shadow wanted - a border-bottom does the separation instead, added here
   since border isn't parameterized on MudAppBar either).
   Targets a class passed via Class="..." directly on a MudBlazor component
   (no literal HTML wrapper around it in MainLayout.razor), so Blazor's CSS
   isolation ::deep combinator has no ancestor to scope from and never
   matches (verified against raw server-rendered HTML) - kept global here
   instead of in MainLayout.razor.css for that reason. */
/* "Aurora Glass" direction (mockup A) - a soft radial glow instead of a flat fill, derived from
   the theme's own appbar color via color-mix() so light AND dark mode each get a glow toned from
   their own base color instead of one hardcoded gradient that would look wrong in the other. */
.wu-appbar.mud-appbar {
    background: radial-gradient(140% 220% at 14% -60%,
        color-mix(in srgb, var(--mud-palette-appbar-background) 75%, white) 0%,
        var(--mud-palette-appbar-background) 40%,
        color-mix(in srgb, var(--mud-palette-appbar-background) 78%, black) 100%) !important;
    color: var(--mud-palette-appbar-text) !important;
    border-bottom: 1px solid var(--mud-palette-primary-darken);
    /* The theme's default toolbar height (64px, set inline by MudThemeProvider)
       only leaves ~12px above a medium icon button before the toolbar's own
       top edge - a non-overlap TopRight MudBadge needs ~16px there, so it was
       clipped. --mud-appbar-height is a CSS custom property MudBlazor exposes
       specifically so consumers can redefine it (.mud-toolbar-appbar reads it
       via height:var(--mud-appbar-height)); redefining it here cascades to
       that inner toolbar and gives every icon uniformly more clearance,
       instead of guessing at padding/margin tricks against a fixed height. */
    --mud-appbar-height: 76px;
}

/* MudIcon/MudIconButton set color directly on their own svg element
   (.mud-icon-root { color: var(--mud-palette-action-default) } in
   MudBlazor.min.css) - the ambient "color" set above on .wu-appbar does NOT
   get inherited by them because of that, the same issue already found and
   fixed for the admin dashboard's register icons this session. Overriding
   .mud-icon-root directly (matching class specificity + !important, since
   the rest of this block already relies on !important) makes every icon in
   the toolbar (search, recycle bin, culture, feedback, dark mode, user)
   actually pick up the light appbar text color instead of staying dark. */
.wu-appbar .mud-icon-root {
    color: var(--mud-palette-appbar-text) !important;
}

/* Exception: UserControl's dropdown menu (UserControl.razor.css, class="dropdown") is a light
   popover, not part of the teal toolbar itself, even though it's a DOM descendant of .wu-appbar -
   its icons must stay dark. The search button no longer needs this exception now that it's a
   translucent glass pill (see .wu-search-btn below) instead of an opaque white box - its icon
   correctly picks up the general light color from the rule above instead. */
.wu-appbar .dropdown .mud-icon-root {
    color: var(--mud-palette-text-primary) !important;
}

.wu-appbar.mud-appbar .mud-toolbar {
    gap: 20px;
}

.wu-title-strong.mud-typography {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    white-space: nowrap;
}

/* "Aurora Glass, ein Dock" (mockup 1b) - Suche/Sprache/Feedback/Avatar used to each be their own
   glass pill (mockup A), which read as four loose islands instead of one system (user feedback:
   "unruhig", "keine Einheit"). Now one continuous glass container (.wu-dock) holds all four
   segments, with thin hairline dividers between them instead of gaps between separate pills - the
   segments themselves carry no background/border of their own anymore. Every per-element flourish
   that used to compete for attention is gone too (avatar gradient ring, flag ring, badge glow) -
   one calm, consistent "material" instead of several simultaneous effects. */
.wu-dock {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    /* No overflow:hidden - the language/user dropdown panels are absolutely positioned
       descendants that open BELOW this 76px bar, so clipping the dock's own overflow silently
       clipped them to nothing too (they were technically "open", just invisible - not a click
       handler bug). The search button's own left corner is rounded explicitly below instead, so
       it doesn't need clipping to look right against the dock's rounded end. */
}
.wu-dock-divider {
    width: 1px;
    align-self: stretch;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.22);
}

/* MudButton sets its own text color from Color="Color.Default" (--mud-palette-text-primary,
   near-black) rather than inheriting the ambient .wu-appbar color the way plain elements do -
   that made sense on the old opaque white search box, but leaves near-invisible dark text once
   it sits on the dock's translucent glass, so the label and the "Ctrl+K" chip both need an
   explicit override here. */
.wu-search-btn.mud-button-root {
    background-color: transparent !important;
    /* Matches the dock's own left end now that the dock no longer clips its overflow - any hover
       fill this button shows stays rounded on the left instead of relying on the dock to hide a
       square corner poking past it. */
    border-radius: 999px 0 0 999px;
    text-transform: none;
}
.wu-search-btn.mud-button-root .mud-button-label,
.wu-search-btn .wu-search-hint {
    color: var(--mud-palette-appbar-text) !important;
}
.wu-search-btn .mud-chip.mud-chip-text {
    background-color: rgba(255, 255, 255, 0.20) !important;
    color: var(--mud-palette-appbar-text) !important;
}

/* ── Dock segments (MainLayout) ───────────────────────────────────────────
   CultureSelector and UserControl are shared components also used on
   LandingPageLayout/TenantLayout with plain (non-teal) backgrounds, so their
   own scoped CSS stays neutral - these overrides only apply when MainLayout
   wraps them in .wu-culture-glass/.wu-user-glass, keeping every other
   consumer of those components visually untouched. */
.wu-culture-glass .selected-culture {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px !important;
}
.wu-culture-glass .selected-culture .content-sl {
    gap: 7px;
}
.wu-culture-glass .selected-culture .culture-code {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
/* The dropdown itself is the shared light popover (CultureSelector.razor.css, "Soft Card" -
   mockup 2a) - it already shows each language's full name there, unrelated to this pill. */
.wu-feedback-glass.mud-button-root {
    background-color: transparent !important;
}

.wu-user-glass .selected-user {
    gap: 9px;
    padding: 7px 16px 7px 10px !important;
}

/* ── Kanban view (CoursesPage) ─────────────────────────────────────────── */

/* Each column paper stretches to the bottom of the viewport and scrolls */
.kanban-column-paper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Drop zone is a wrapping flex container; items in each row share height */
.kanban-drop-zone {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    align-items: stretch !important;
    flex: 1 1 auto;
    min-height: 100px;
}

/* xs / sm  (<960 px): 1 card per row */
.kanban-drop-zone .mud-drop-item:not(.mud-drop-item-preview-start) {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 4px;
}

/* md / lg  (960 px – 1919 px): 2 cards per row */
@media (min-width: 960px) and (max-width: 1919.98px) {
    .kanban-drop-zone .mud-drop-item:not(.mud-drop-item-preview-start) {
        width: 50%;
    }
}

/* xl / xxl  (>=1920 px): 2 cards per row */
@media (min-width: 1920px) {
    .kanban-drop-zone .mud-drop-item:not(.mud-drop-item-preview-start) {
        width: 50%;
    }
}

/* Card fills the full item width/height so all cards in a row are equal size.
   A shared min-height plus pinning the content row to the bottom (below) keeps
   cards visually aligned even when the header (title wrap, tag chips) varies. */
.kanban-drop-zone .mud-drop-item .mud-card {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 148px;
}

/* Completed column cards: same responsive layout as mud-drop-item */
.kanban-drop-zone .kanban-card-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 4px;
}

@media (min-width: 960px) and (max-width: 1919.98px) {
    .kanban-drop-zone .kanban-card-item {
        width: 50%;
    }
}

@media (min-width: 1920px) {
    .kanban-drop-zone .kanban-card-item {
        width: 50%;
    }
}

.kanban-drop-zone .kanban-card-item .mud-card {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 148px;
}

/* Push the date/duration row to the bottom of the card so it lines up across
   cards in the same row regardless of how tall the header (title + tags) is. */
.kanban-drop-zone .mud-card-content {
    margin-top: auto;
}

/* Tag chip row on Kanban cards (Exam topic tags) */
.kanban-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.kanban-tag-chip.mud-chip {
    height: 20px;
    font-size: 0.6875rem;
    padding: 0 8px;
}

/* ── end Kanban view ───────────────────────────────────────────────────── */

/* ── Schedule view ─────────────────────────────────────────────────────── */

.schedule-page-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    overflow: hidden;
}

.schedule-calendar-grid-wrapper {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.schedule-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: 2px;
    min-height: 100%;
}

.schedule-day-add-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.schedule-day-cell:hover .schedule-day-add-btn {
    opacity: 1;
}

.schedule-time-grid-scroll {
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
}

/* ── end Schedule view ──────────────────────────────────────────────────── */

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


.image-container {
    position: relative;
    /*display: inline-block;*/
    width: auto;
    border: 1px solid #ccc;
}

    .image-container .bottom-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
    }

    .image-container img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 4px;
    }

    .image-container .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        border-radius: 0px;
        cursor: pointer;
    }

    .image-container:hover .overlay {
        opacity: 1;
    }

    .image-container .overlay .mud-icon-root {
        color: white;
        opacity: 0.9;
    }

.answer-icon {
    position: absolute;
    top: -1.5rem; /* H�lft �ber der Border */
    left: 50%; /* Zentriert */
    transform: translateX(-50%); /* Exakte Zentrierung */
    background-color: white; /* Optional: Hintergrundfarbe f�r sauberen Effekt */
    border-radius: 50%; /* Falls das Icon eine runde Form hat */
}

.correct-row {
    background-color: lightgreen !important;
}

.select-no-underline .mud-input.mud-input-underline::before {
    border-bottom: 0px !important;
}

.mud-table.flat-table {
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

    .mud-table.flat-table .mud-table-container {
        border: none !important;
    }

.mud-paper.flat {
    box-shadow: none !important;
    background-color: transparent !important;
}


.paper-max-height {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 295px);
    overflow-y: auto;
    background-color: transparent !important;
}

.paper-max-height-dialog {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 260px);
    overflow-y: auto;
    background-color: transparent !important;
}

@media screen and (max-height: 1080px) {
    .paper-max-height-dialog {
        height: calc(100vh - 175px);
    }
}

.bordered-table th,
.bordered-table td {
    border-right: 1px solid white;
}

    /* Optional: letztes Element ohne Rand */
.bordered-table th:last-child,
.bordered-table td:last-child {
        border-right: none;
    }

.user-data-grid .mud-table-container {
    width: auto !important;
}

.add-bank-paper {
    cursor: pointer;
    /*transition: box-shadow 150ms ease, transform 120ms ease, background-color 150ms ease;*/
}

    /* Hover */
/*    .add-bank-paper:hover {
        box-shadow: var(--mud-elevation-3);
        transform: translateY(-1px);
    }*/

    .add-bank-paper:hover .mud-typography {
        color: var(--mud-palette-warning) !important;
    }

    .add-bank-paper:hover .mud-icon-root {
        fill: var(--mud-palette-warning);
    }

    /* Active / Click */
    .add-bank-paper:active {
        transform: translateY(0px) scale(0.98);
        box-shadow: var(--mud-elevation-2);
    }

/* DateRangeSelector-Komponente (Components/Controls/DateRangeSelector.razor): MudDateRangePicker
   setzt auf seinem Wurzel-Element selbst "flex: 1 1 auto", wodurch es in einer Flex-Toolbar jeden
   uebrigen Platz einnimmt. Muss global (nicht CSS-isoliert) sein, da Blazors Scope-Attribut nicht
   in das Wurzel-Element einer MudBlazor-Komponente (anderes Assembly) durchgereicht wird.
   Nutzer-Wunsch: das Control soll (fest) klein bleiben, das Suchfeld (.qs-search, bereits
   flex:1) soll den dadurch frei werdenden Platz uebernehmen. Standard-Schriftgroesse/-Padding der
   Felder liess sich nicht unter ~275px pressen, ohne das Datum abzuschneiden - mit etwas kleinerer
   Schrift und Padding passt es auch bei 240px noch ueberschneidungsfrei. */
.date-range-selector.mud-picker {
    flex: 0 0 auto !important;
    width: 240px;
}

.date-range-selector input {
    font-size: 13px !important;
    padding-left: 8px !important;
}