/*
 * Beep.DoitAll.Web — app.css
 *
 * MudBlazor handles ~99% of styling via MudTheme + the component classes. This file only holds the
 * handful of host-local overrides that don't belong in a theme object: the loading/error chrome and
 * the centered login card.
 */

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

#app, app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Blazor Server error banner — kept minimal; MudBlazor drives everything else. */
#blazor-error-ui {
    background: #fff1f0;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1rem;
    position: fixed;
    right: 0;
    z-index: 1000;
}

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

/* Login shell — centered card on a tinted backdrop. */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    padding: 1rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
}

.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

/* Apps marketplace (Settings/Apps.razor) — a disabled addon's card reads as visually "off" without
   a hardcoded color: desaturated and dimmed, using plain visual-effect properties rather than a
   theme color override. */
.app-card-disabled {
    opacity: 0.55;
    filter: grayscale(1);
}

/* SVG catalog icon inside the avatar circle — sized to sit inside MudAvatar's default 40px circle
   with a small inset, and inverted to white so it reads against Color.Primary/Color.Default fills
   the same way MudIcon's glyph does (the source SVGs are single-color line/fill art on transparent
   backgrounds, not pre-colored). */
.app-card-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}