/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   df6cb12f (P2, architecture §5): static base rules of the layout – formerly FoodFlowTheme.AdditionalCss, a
   <HeadContent> that never reached MAUI (no HeadOutlet). Linked after MudBlazor in the Client and App shells.
   - Static and the same for every host (BuildAsset): var() only, no colour values, no url(), no @import, no own
     custom properties – surfaces and text come from the theme (--mud-palette-*), brand and system values from the
     :root block of BrandingCss (--ff-*, server head and <BrandStyle>). BrandColorSourceTests.
   - The former light/dark rules (button glow, focus ring, scroll bars, hero gradient) hung on mode classes as
     ancestors that MudBlazor 8 never sets on a container (they are the utility classes of Color.Dark/Light): they never
     applied and are gone.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── smooth borders on all cards ── */
.mud-paper {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── card hover (subtle lift) ── */
.mud-paper[role='button']:hover,
.restaurant-card:hover {
    border-color: var(--mud-palette-text-secondary) !important;
}

/* ── app bar bottom border ── */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ── drawer border ── */
.mud-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* ── illustrations (Components/Common/EmptyState): tints of the brand on an opaque light disc – readable in light and
      dark mode like the former fixed orange. SVG presentation attributes take no var(), hence classes. ── */
.ff-illu-grund { fill: color-mix(in srgb, var(--ff-primary) 8%, var(--ff-surface)); }
.ff-illu-papier { fill: var(--ff-surface); }
.ff-illu-voll { fill: var(--ff-primary); }
.ff-illu-strich { stroke: var(--ff-primary); }
.ff-illu-hell { fill: color-mix(in srgb, var(--ff-primary) 30%, var(--ff-surface)); }
.ff-illu-hell-strich { stroke: color-mix(in srgb, var(--ff-primary) 30%, var(--ff-surface)); }
.ff-illu-zart { fill: color-mix(in srgb, var(--ff-primary) 15%, var(--ff-surface)); }
.ff-illu-zart-strich { stroke: color-mix(in srgb, var(--ff-primary) 15%, var(--ff-surface)); }

/* ── 4c466f50: drawer navigation – sections with a small label instead of collapsed groups, calm 14px rows; the brand
      of the area comes from the theme (team areas: accent in ff-team.css, guest pages: the restaurant's colours) ── */
/* the logo (or the restaurant's name) centred above the account card */
.ff-nav-kopf {
    justify-content: center;
}
.mud-drawer-content:has(> .ff-nav) {
    display: flex;
    flex-direction: column;
}
.ff-nav {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px 12px;
}
.ff-nav-menue {
    flex: 1 1 auto;
}
.ff-nav-abschnitt {
    padding: 16px 12px 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-secondary);
}
.ff-nav .mud-nav-link {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}
.ff-nav .mud-nav-link .mud-nav-link-icon {
    font-size: 1.25rem;
    color: var(--mud-palette-text-secondary);
}
.ff-nav .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}
.ff-nav .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-text-primary);
}
.ff-nav .mud-nav-group > .mud-nav-link {
    font-size: 0.875rem;
}
.ff-nav-fuss {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* MudNavLink puts the class on its item wrapper, MudMenuItem on the item itself */
.ff-nav .ff-nav-abmelden .mud-nav-link,
.ff-nav .ff-nav-abmelden .mud-nav-link .mud-nav-link-icon,
.ff-nav-abmelden.mud-menu-item,
.ff-nav-abmelden .mud-icon-root {
    color: var(--mud-palette-error);
}

/* ── 4c466f50: the signed-in account – initials disc, card in the drawer, button in the app bar ── */
.ff-konto-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ff-konto-avatar--gross {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}
.ff-konto-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 4px 0;
    padding: 12px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}
.ff-konto-text,
.ff-konto-knopf-text,
.ff-konto-menue-kopf {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.ff-konto-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ff-konto-rolle {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ff-konto-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-success);
}
.ff-konto-punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-success);
}
.ff-konto-knopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
}
.ff-konto-knopf:hover {
    background: var(--mud-palette-background-gray);
}
.ff-konto-knopf:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.ff-konto-pfeil {
    color: var(--mud-palette-text-secondary);
}
.ff-konto-menue-kopf {
    padding: 12px 16px 8px;
    max-width: 280px;
}
@media (max-width: 599.98px) {
    .ff-konto-knopf-text,
    .ff-konto-pfeil {
        display: none;
    }
    .ff-konto-knopf {
        padding: 3px;
    }
}

/* ── 4c466f50 / cdf9e882: the open drawer stays beside the page from the md breakpoint on (DrawerVariant.Responsive is
      persistent there) – MainLayout.razor.css had this rule, but the scoped bundle is not loaded ── */
@media (min-width: 960px) {
    .main-content.drawer-open {
        margin-left: var(--mud-drawer-width-left);
    }
}