.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* =========================================================================
   Safety net.
   The product logos are up to 10000px wide. If a rule below ever fails to
   apply, an unconstrained <img> would blow the layout apart, so no image is
   ever allowed to exceed its container.
   ========================================================================= */
img {
    max-width: 100%;
    height: auto;
}

/* =========================================================================
   Route announcement.
   <FocusOnNavigate Selector="h1" /> moves the focus to the heading of every
   page so that assistive technologies announce it. That focus is programmatic
   and the heading is never reachable with the keyboard, so its focus ring is
   only visual noise: it is hidden, while every interactive element keeps its
   own ring.
   ========================================================================= */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* =========================================================================
   Password field with a reveal button.
   Used on the statically rendered login form, where the MudBlazor adornment
   click handler is not available.
   ========================================================================= */
.password-field {
    position: relative;
}

.password-field__toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-secondary, #9e9e9e);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.password-field__toggle:hover,
.password-field__toggle:focus-visible {
    background-color: var(--mud-palette-action-default-hover, rgba(255, 255, 255, 0.08));
    color: var(--mud-palette-text-primary, #ffffff);
}

.password-field__toggle--active {
    color: var(--mud-palette-primary, #17BECF);
}

.password-field__icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

/* =========================================================================
   Authentication pages: login and two-factor.
   The card is centred in the viewport, both horizontally and vertically.
   ========================================================================= */
.auth-content {
    background-color: var(--mud-palette-background);
    min-height: 100vh;
}

.auth-shell {
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px 16px;
}

.auth-card {
    width: 100%;
    max-width: 560px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.auth-card__banner {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.auth-card__body {
    padding: 32px 40px 36px;
}

.auth-card__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.auth-card__subtitle {
    margin: 6px 0 24px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.auth-card__alert {
    margin-bottom: 20px;
}

.auth-card__actions {
    margin-top: 24px;
}

.auth-card__hint {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--mud-palette-divider);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

.auth-footer {
    margin: 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* =========================================================================
   Application shell: app bar, drawer, page frame.
   Colours come from the MudBlazor palette so that both themes stay correct.
   ========================================================================= */
.app-bar {
    border-bottom: 1px solid var(--mud-palette-divider);
}

.app-bar__brand {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* Own stacking context so the logo below blends against this bar and nothing else. */
    isolation: isolate;
    background-color: var(--mud-palette-appbar-background);
}

/* logo_dark.png ships with an opaque black background, which would otherwise show as a
   rectangle on the dark app bar. Lighten blends that black into the bar colour while the
   light artwork of the logo is untouched. The light logo is already transparent and must
   not be blended, so the modifier is only applied in dark mode. */
.app-bar__logo--blend {
    mix-blend-mode: lighten;
}

.app-bar__logo {
    height: 34px;
    width: auto;
    max-width: 160px;
    display: block;
}

/* Title and version share a baseline so the small version text does not float. */
.app-bar__heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-left: 24px;
    min-width: 0;
}

.app-bar__title {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.app-bar__version {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.user-chip:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.user-chip__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.user-chip__name {
    font-size: 0.875rem;
    font-weight: 500;
}

.user-chip__role {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.app-drawer {
    border-right: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
}

.app-drawer .app-drawer__footer {
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-divider);
    padding: 4px 0;
}

/* Active navigation entry: tinted row with a brand coloured marker. */
.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(23, 190, 207, 0.12);
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root {
    color: var(--mud-palette-primary);
}

.app-content {
    background-color: var(--mud-palette-background);
    min-height: 100vh;
}

.app-page {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* =========================================================================
   Product banner cards.
   ========================================================================= */
.product-banner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 24px;
}

.product-card {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px 32px;
    min-height: 172px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-divider);
    overflow: hidden;
}

/* Dark theme: a dark card with only a hint of brand teal on the trailing edge. */
.product-card--dark {
    background-image: linear-gradient(105deg, #0E1720 0%, #121F29 55%, #16323C 100%);
    border-color: #1E2A36;
}

.product-card--light {
    background-image: linear-gradient(105deg, #FFFFFF 0%, #F1F9FB 45%, #C9EBF0 100%);
    border-color: #DCE6EC;
}

.product-card__logo {
    height: var(--product-logo-height, 88px);
    width: auto;
    max-width: 260px;
    flex: 0 0 auto;
    object-fit: contain;
}

.product-card__text {
    min-width: 0;
}

.product-card__brand,
.product-card__title {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.15;
}

.product-card__brand {
    color: #5AD2DE;
}

.product-card__title {
    color: #FFFFFF;
}

.product-card__description {
    margin-top: 10px;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.66);
}

.product-card--light .product-card__title {
    color: #0E2A31;
}

.product-card--light .product-card__brand {
    color: #128794;
}

.product-card--light .product-card__description {
    color: rgba(14, 42, 49, 0.7);
}

/* =========================================================================
   Content panel: rounded card wrapping a toolbar and a table.
   ========================================================================= */
.panel {
    border-radius: 14px;
    border: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
    padding: 20px 24px 8px;
    overflow: hidden;
}

.panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.panel__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.panel__search {
    max-width: 420px;
    min-width: 240px;
}

/* Table: no stripes, quiet separators, muted headers. */
.licenses-table .mud-table-head .mud-table-cell {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.licenses-table .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
}

.licenses-table .mud-table-container {
    overflow-x: auto;
}

.cell-accent {
    color: var(--mud-palette-primary);
}

.cell-mono {
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    font-size: 0.8125rem;
}

.feature-chip {
    min-width: 34px;
    justify-content: center;
    background-color: var(--mud-palette-action-default-hover);
}

/* =========================================================================
   Narrow screens.
   ========================================================================= */
@media (max-width: 960px) {
    .product-card {
        min-height: 0;
        padding: 20px;
        gap: 20px;
    }

    .product-card__logo {
        height: calc(var(--product-logo-height, 88px) * 0.66);
        max-width: 180px;
    }

    .product-card__brand,
    .product-card__title {
        font-size: 1.25rem;
    }
}

@media (max-width: 600px) {
    .app-page {
        padding: 12px;
        gap: 16px;
    }

    .app-bar__heading,
    .user-chip__text {
        display: none;
    }

    .panel {
        padding: 16px 14px 4px;
    }

    .panel__search {
        min-width: 100%;
    }

    .product-card {
        gap: 16px;
        padding: 16px;
        min-height: 0;
    }

    .product-card__logo {
        height: calc(var(--product-logo-height, 88px) * 0.5);
        max-width: 128px;
    }

    .auth-card__body {
        padding: 24px 20px 28px;
    }
}