/* 491166ee: the team areas (backoffice, kitchen, driver, platform admin, setup, landing and registration of the platform
   host). MainLayout puts the class ff-team on .page only there (Markenbereiche) – no rule matches a guest page.
   Colours come from PlattformMarke (C#: TeamStil.razor, the MudTheme of these areas); here only what MudBlazor cannot do: the wide cut
   of headings and key figures, the accent of the active navigation and the key figure, calm shadows.
   The accent is never a surface and never text. */

/* --team-akzent comes from TeamStil.razor (PlattformMarke.Gelb), the shadow colour from the standard --ff-shadow-rgb */
.ff-team {
    --team-breit: 112%;
}

/* Headings and key figures: the wide cut of the variable font (font-stretch on its width axis) */
.ff-team :is(h1, h2, h3, h4, h5, h6),
.ff-team :is(.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6),
.ff-team .ff-kennzahl {
    font-stretch: var(--team-breit);
    letter-spacing: -0.02em;
}

.ff-team .ff-kennzahl {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

/* The one key figure of a page (revenue, saved commission): an accent bar under the number, the number stays black */
.ff-team .ff-kennzahl--akzent {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 4px solid var(--team-akzent);
}

/* Active navigation: an accent bar at the start, text and background from the theme */
.ff-team .mud-nav-link.active:not(.mud-nav-link-disabled) {
    box-shadow: inset 3px 0 0 var(--team-akzent);
    font-weight: 600;
}

/* Calm surfaces: a hairline instead of stacked shadows */
.ff-team .mud-paper:not(.mud-elevation-0):not(.mud-appbar):not(.mud-drawer) {
    box-shadow: 0 1px 2px rgba(var(--ff-shadow-rgb), 0.05), 0 0 0 1px var(--mud-palette-lines-default);
}

/* Primary buttons as pills */
.ff-team .mud-button-filled.mud-button-filled-primary {
    border-radius: 999px;
}

/* The word mark in the drawer */
.ff-team-logo {
    display: block;
    height: 28px;
    width: auto;
    color: var(--mud-palette-text-primary);
}