/*
 * Ark-owned rules that a scoped `.razor.css` cannot express. Almost everything an Ark component needs belongs in its own `.razor.css`; two things cannot live there, and those two are all this file holds: 1. a custom property more than one component reads, since scoped sheets cannot see each other; 2. a rule that has to match a root element MudBlazor renders itself, since Blazor CSS isolation only stamps its `[b-hash]` attribute onto markup a component wrote in its own template, so a class passed through `Class="..."` lands on an element no scoped selector can reach.
 * Load order matters: both hosts link this after `ark-tokens.css` (so its tokens are defined) and after `MudBlazor.min.css` (so these rules win the cascade) - these selectors carry no `[b-hash]`, so source order is what keeps MudBlazor from overriding them.
 */

/* ---- NotificationBell, and the room each bar leaves for it ---- */

/* How much space a bar keeps clear on its trailing edge for the bell: the bell sits hard against that edge and each shell steps inward by this much, since the bell is the only one of the two whose width is the same in both apps - the profile control is a bare avatar on the phone and an avatar plus the signed-in name in the portal. An earlier version reserved room for THAT instead, guessed 2.5rem, and put the bell straight on top of "Demo Administrator". 2.25rem of button plus a 0.5rem gap; lives here rather than in a scoped .razor.css because the bell and both bars all need to read it. */
:root {
    --ark-bell-reserve: 2.75rem;
}

/* ---- ArkForm ---- */

.ark-form {
    display: grid;
    gap: var(--spacing-md);
}

/* Fields reflow by available width rather than a fixed column count; ArkForm.razor.cs sets --ark-form-field-min inline from its FieldMinWidth parameter. */
.ark-form__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ark-form-field-min, 16rem), 1fr));
    gap: var(--spacing-md);
    align-items: start;
}

.ark-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.ark-form__summary {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.ark-form__summary:empty,
.ark-form__summary:has(ul:empty) {
    display: none;
}

/* ---- ArkDateTimePicker ---- */

/* The root only; the children are MudBlazor's, so the rules that reach them need `::deep` and live in ArkDateTimePicker.razor.css. */
.ark-date-time-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: flex-start;
}