/* Plateforme TI — global stylesheet.
 *
 * Deliberately tiny. The design system is Fluent UI Blazor v4: layout, spacing, colour and
 * typography come from Fluent components and the design tokens they expose as CSS custom
 * properties. There is no house CSS framework and no Tailwind, and the previous project's
 * `.gs-*` system is explicitly NOT ported here (blazor-ui.md §2.3).
 *
 * Nothing below redeclares the look of a button, a badge or a field. What is here is the
 * three things a stylesheet still has to do:
 *   1. make the shell fill the viewport,
 *   2. style the classes handed to CHILD components — CSS isolation cannot reach those,
 *      because the scope attribute is stamped on a component's own markup only,
 *   3. keep Blazor's framework-owned elements (validation classes, error boundary) legible.
 *
 * No colour literal: every colour is a Fluent token, so light and dark themes both work
 * without a second rule.
 */

html,
body {
    height: 100%;
    margin: 0;
    font-family: var(--body-font);
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-layer-1);
}

/* FocusOnNavigate targets the page heading; the outline it would draw is noise on a
   non-interactive element. */
h1:focus {
    outline: none;
}

/* --- Shell rows owned by MainLayout, styled here because they belong to child
       components (see the comment at the top of MainLayout.razor.css). ------------- */

/* The middle row of FluentLayout: takes the space header and footer leave, and scrolls
   internally rather than growing the page. */
.pti-main {
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
}

.pti-body {
    flex-grow: 1;
    min-width: 0;
    overflow-y: auto;
    background-color: var(--neutral-layer-2);
}

@media (max-width: 700px) {
    /* Nav above content instead of beside it. FluentStack renders a flex row; flipping
       the direction here is cheaper than swapping its Orientation from C#. */
    .pti-main {
        flex-direction: column;
        overflow: auto;
    }
}

/* --- Blazor framework-owned classes ------------------------------------------------ */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--error);
}

.validation-message {
    color: var(--error);
}

/* Last-resort surface: it renders precisely when something else failed, possibly before
   the design system has applied its tokens. Hence the literal fallbacks — the only two in
   this file — and no generated ::after text, which could not go through Messages.T. */
.blazor-error-boundary {
    color-scheme: light only;
    background: var(--error, #b32121);
    color: #ffffff;
    padding: 1rem;
}