html, body {
    height: 100%;
}

/* MudLayout als flex-container zodat footer onderaan blijft bij weinig content */
.mud-layout {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative;
    z-index: 1;
}

body {
    margin: 0;
    /* Volgt MudBlazor-thema (light/dark) zodat de hele pagina meeschakelt */
    background-color: var(--mud-palette-background);
    /* Schuine metallic gradient (licht linksboven → donkerder rechtsonder), vast bij scroll */
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 40%,
        rgba(200, 200, 210, 0.03) 50%,
        transparent 65%,
        rgba(60, 60, 70, 0.05) 100%
    );
    background-attachment: fixed;
}

/* Eén grote favicon rechtsonder, transparant op de achtergrond */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("favicon.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 500px;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}


/* Home: game-kaarten – knoppen gelijke hoogte, tekst schaalt mee met kaartbreedte */
.home-game-card {
    container-type: inline-size;
}
.home-card-actions .mud-button-root {
    min-height: 48px;
    font-size: clamp(0.7rem, 4cqi, 0.9375rem);
}

/* Appbar iets hoger dan standaard dense */
.appbar-bullseye.mud-appbar {
    min-height: 56px;
}

.appbar-bullseye .mud-appbar-height {
    min-height: 56px;
}

/* Favicon naast titel in appbar */
.appbar-logo-icon {
    width: 36px;
    height: 36px;
    display: block;
    margin-left: 8px;
}

.appbar-title {
    font-size: 1.35rem;
}

/* Hamburger menu-knop alleen op kleine schermen */
.appbar-menu-button {
    display: inline-flex;
}

@media (min-width: 960px) {
    .appbar-menu-button {
        display: none;
    }
}

/* Geselecteerde item in MudSelect-dropdown: Secondary (rood) i.p.v. Primary (grijs) – o.a. dark mode */
.mud-popover .mud-list-item.mud-selected-item.mud-primary-text,
.mud-popover .mud-list-item.mud-selected-item .mud-list-item-text,
.mud-popover .mud-list-item.mud-selected-item .mud-list-item-text p {
    color: var(--mud-palette-secondary) !important;
}

/* Nav-link: geselecteerde link – tekst én icoon rood (BullseyeTheme Secondary) */
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-secondary) !important;
}