/* neo42 visual identity — see docs/neo42-style-reference.md */

:root {
    /* Brand */
    --neo42-rot: #e3000f;
    --neo42-blau: #0071aa;
    --neo42-gruen: #08ab97;
    --neo42-gelb: #f7d111;
    --neo42-orange: #ec6935;

    /* Neutrals */
    --neo42-schwarz: #000;
    --neo42-schwarz-72: #474747;
    --neo42-schwarz-42: #c2c2c2;
    --neo42-schwarz-16: #d6d6d6;
    --neo42-schwarz-12: #e0e0e0;
    --neo42-hellgrau: #f0f0f0;
    --neo42-weiss: #fff;
    --neo42-navy: #141428;

    /* MudBlazor overrides — hard 0-radius corners across the entire UI */
    --mud-default-borderradius: 0px;

    /* Diffuse drop-shadow elevation, matching neo42.de */
    --mud-elevation-1: 0 1px 2px rgba(0, 0, 0, .08);
    --mud-elevation-2: 0 4px 8px rgba(0, 0, 0, .12);
    --mud-elevation-4: 0 12px 24px 0 rgba(0, 0, 0, .2);
    --mud-elevation-8: 0 15px 30px rgba(0, 0, 0, .2);
    --mud-elevation-24: 0 0 24px rgba(0, 0, 0, .2);
}

html, body {
    font-family: "Unit Pro", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: var(--neo42-hellgrau);
    color: var(--neo42-schwarz);
}

/* Bold weight inherits the body family — "Unit Pro" is the loaded face via
   neo42-mudblazor.css @font-face. The previous UnitWeb-Bold override pointed
   at a family with no matching @font-face, which forced a serif/cursive
   fallback on every heading. */
b, strong, h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.mud-typography-subtitle2, .mud-typography-button, .mud-typography-overline,
.mud-button-root, .mud-nav-link-text, .neo42-brand {
    font-family: inherit;
    font-weight: 700;
}

/* Brand accent in the appbar — bold red wordmark over white surface */
.neo42-brand {
    color: var(--neo42-navy);
    letter-spacing: -0.01em;
}

.neo42-brand::first-letter {
    color: var(--neo42-rot);
}

/* Hard square corners on every MudBlazor surface that defaults to a radius */
.mud-paper, .mud-card, .mud-button-root, .mud-input, .mud-input-outlined,
.mud-input-control, .mud-input-slot, .mud-select, .mud-chip, .mud-alert,
.mud-tabs-toolbar, .mud-tab, .mud-table, .mud-dialog, .mud-popover, .mud-menu,
.mud-tooltip, .mud-snackbar, .mud-list-item, .mud-nav-link, .mud-expansion-panel {
    border-radius: 0 !important;
}

/* Avatars and dot indicators stay round per the spec */
.mud-avatar, .mud-rating-item, .mud-progress-circular {
    border-radius: 50% !important;
}

/* AppBar over white surface — navy ink, thin bottom hairline */
.neo42-appbar.mud-appbar {
    background-color: var(--neo42-weiss);
    color: var(--neo42-navy);
    border-bottom: 1px solid var(--neo42-schwarz-12);
}

/* Drawer with a hairline divider rather than a colored gradient */
.mud-drawer {
    border-right: 1px solid var(--neo42-schwarz-12);
}

/* Primary buttons flip to red on hover — the load-bearing brand gesture */
.mud-button-filled-primary {
    background-color: var(--neo42-navy);
    color: var(--neo42-weiss);
    transition: background-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out;
}

.mud-button-filled-primary:hover {
    background-color: var(--neo42-rot);
    color: var(--neo42-weiss);
}

.mud-button-text-primary,
.mud-button-outlined-primary {
    color: var(--neo42-navy);
}

.mud-button-text-primary:hover,
.mud-button-outlined-primary:hover {
    color: var(--neo42-rot);
    border-color: var(--neo42-rot);
}

/* Links — navy by default, red on hover, no decoration unless hovered */
a, .mud-link {
    color: var(--neo42-navy);
    text-decoration: none;
    transition: color 120ms ease-out;
}

a:hover, .mud-link:hover {
    color: var(--neo42-rot);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Active nav link rail in red, matching the brand accent */
.mud-nav-link.active {
    color: var(--neo42-rot) !important;
    background-color: var(--neo42-hellgrau);
    box-shadow: inset 3px 0 0 0 var(--neo42-rot);
}

/* Inputs — surface adapts to theme via the dynamic --bg-card token
   (white in light, dark in dark mode). The old hardcoded --neo42-weiss
   pinned inputs white even when the rest of the page went dark. */
.mud-input-outlined,
.mud-input-filled,
.mud-input-text,
.mud-select .mud-input-slot,
.mud-input-slot,
.mud-input-control input,
.mud-input-control textarea {
    background-color: var(--bg-card) !important;
    color: var(--fg-1);
}

/* Floating label sits on top of the outlined border — match the input
   surface so the cutout reads cleanly in either theme. */
.mud-input-label,
.mud-input-label-outlined,
.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense,
label.mud-input-label-outlined {
    background-color: var(--bg-card);
    padding-left: 4px;
    padding-right: 4px;
    /* Extend the surface 2px above and below so the label visually merges
       with the input — no page-color strip between label and top border. */
    box-shadow: 0 -2px 0 0 var(--bg-card), 0 2px 0 0 var(--bg-card);
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--neo42-schwarz-16);
    border-radius: 0 !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--neo42-schwarz-72);
}

.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--neo42-navy);
    box-shadow: 0 0 0 3px rgba(20, 20, 40, .1);
}

.mud-input-error .mud-input-outlined-border,
.mud-input.mud-error .mud-input-outlined-border {
    border-color: var(--neo42-rot) !important;
}

/* Cards — white surface on hellgrau page, lift on hover */
.mud-card {
    background-color: var(--neo42-weiss);
    box-shadow: var(--mud-elevation-4);
    transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}

.mud-card:hover {
    box-shadow: var(--mud-elevation-8);
}

/* Alerts — red for error, blue for info/success follows neo42 mapping */
.mud-alert-filled-error, .mud-alert-text-error { color: var(--neo42-rot); }
.mud-alert-filled-success { background-color: var(--neo42-blau); }

/* Section dividers — section backgrounds alternate white ↔ hellgrau */
.neo42-section-alt {
    background-color: var(--neo42-hellgrau);
}

/* Clickable data-grid rows (navigate on click) show the link cursor on hover. */
.n42-row-clickable { cursor: pointer; }

/* What's New changelog dialog: the body is sanitized Markdown rendered via MarkupString, so its
   lists inherit Bootstrap reboot's `padding-left: 0`, leaving the bullets flush against the dialog
   edge. Restore a readable list indent (and a touch of vertical rhythm) scoped to this content. */
/* One release rendered as a card in the "What's New" dialog (WI 6897): a left accent bar plus a
   version/date header, mirroring the neo42 changelog style. */
.whats-new-card {
    border-inline-start: 3px solid var(--mud-palette-primary);
}

.whats-new-version {
    font-weight: 600;
}

.whats-new-body ul,
.whats-new-body ol {
    padding-inline-start: 1.5rem;
    margin-block: 0.25rem;
}

.whats-new-body li {
    margin-block: 0.15rem;
}

/* The AI draft leads each product area with a bold label paragraph (e.g. **Allgemein**) followed by a
   bulleted list of Feature:/Change:/Bugfix:/Security: items - give those labels a little breathing room
   and drop the outer margins so the card padding controls the edges. */
.whats-new-body p {
    margin-block: 0.35rem;
}

.whats-new-body > :first-child {
    margin-block-start: 0;
}

.whats-new-body > :last-child {
    margin-block-end: 0;
}