/*
    Layout comes from FluentLayout / FluentLayoutItem, and colour and typography
    from Fluent UI v5's CSS variables — v5 removed FluentDesignTheme and
    FluentDesignSystemProvider in favour of them, so overriding here would fight
    the theme rather than extend it.

    What remains is what scoped CSS cannot express: body-level custom properties,
    and patterns genuinely shared across pages.
*/

/*
    The layout height variables. The pinned Fluent UI 5.0.0-rc.4-26180.1 ships
    ONLY --layout-height (100dvh, set on .fluent-layout); the component
    documentation lists the other three as defaults, but they are not in the
    package. Verified by grepping the package assets.

    They must therefore be defined here, or `Height="var(--layout-body-height)"`
    on the navigation resolves to `auto` and the nav's independent scrollbar
    works only by grid-stretch accident. Keep these in sync with the header's
    Height="44px" and the footer's rendered height.
*/
.fluent-layout {
    --layout-header-height: 44px;
    --layout-footer-height: 36px;
    --layout-body-height: calc(var(--layout-height)
                               - var(--layout-header-height)
                               - var(--layout-footer-height));
}

/*
    Routes.razor runs <FocusOnNavigate Selector="h1" />, so every navigation moves
    focus to the page heading — which is right for screen readers, and is why the
    heading also carries tabindex="-1". Without this rule the browser then paints
    its default focus ring around that heading: a hard rectangle the full width of
    the content area, on every page, after every navigation. Nothing but a browser
    shows it; bUnit has no layout engine and the markup is correct either way.

    Suppressing it costs keyboard users nothing. tabindex="-1" means the heading is
    not in the tab order, so no one can reach it by keyboard and be left without an
    indicator — WCAG 2.4.7 applies to keyboard-operable controls, which this is not.
    The stock Blazor template ships the same rule for the same reason.
*/
h1:focus,
h1:focus-visible {
    outline: none;
}

/*
    There is deliberately no shared table style here any more. Every table in this
    host is a FluentDataGrid, which brings its own borders, padding and row height
    (RowSize="DataGridRowSize.Medium"), so a hand-rolled .data-grid would only
    fight it.

    The screens with per-row editors — the two mapping screens — set
    MultiLine="true". That is not optional: the grid's default cell rule is
    `white-space: nowrap` with an ellipsis, which would silently truncate an
    autocomplete, a badge stack, or the payslip-text validation message down to
    one clipped line. MultiLine and Virtualize are mutually exclusive; nothing
    here virtualises, so that costs us nothing.
*/

/*
    Moved out of Onboarding.razor.css so the onboarding cards can be separate
    components. Scoped CSS is per-component: a rule that lives with the page
    cannot reach markup a child component renders, so extracting a card would
    have silently unstyled it.

    FluentCard is width:100%, so an unconstrained input grows to the full page on
    a wide screen and becomes an unreadable 2000px line. A max-width caps it while
    leaving the field free to shrink on a phone, so one rule covers every
    breakpoint and no media query is needed.
*/
.setup-form {
    max-width: 32rem;
}

/* Every setup card owns exactly one layer of padding: FluentCard's. */
.onboarding-step {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalL);
}

.onboarding-step > h2 {
    margin-block: 0;
}

/* The stack owns the vertical rhythm; the paragraph must not add its own. */
.setup-form p {
    margin-block: 0;
}

/*
    No ::deep. That is a Blazor scoped-CSS construct and is not valid CSS in a
    global stylesheet — it would silently kill the rule. Nothing is scoped here,
    so the plain descendant selector reaches <fluent-field> whichever component
    rendered it.

    The library gives every field a vertical margin of its own. Inside a
    gap-spaced flex column that stacks with the gap, so fields would sit further
    apart than the button sits from the last field. Targeting the element rather
    than the utility class keeps this working if the library renames it.
*/
.setup-form fluent-field {
    margin-block: 0;
}

/* The two DataLøn routes are co-equal, so neither sub-heading outweighs the other. */
.connect-option {
    margin-block: 0;
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
}

/*
    A labelled rule between the two options. Both routes reach the same place, so
    the separator has to read as "or", not as "and then".
*/
.connect-or {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalM);
    color: var(--colorNeutralForeground3);
}

.connect-or::before,
.connect-or::after {
    content: "";
    flex: 1;
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}