/* Platform-eigen CSS. De huisstijl zelf komt uit de sectie StarrukDesignSystem
   (--s-*-tokens, gerenderd door <StarrukThemeRoot />); zet hier alleen wat echt van dit
   platform is, en gebruik de tokens in plaats van vaste kleuren.

   BEWUST GEEN h1-regel meer. De koppen van dit platform komen uit <PageHeader />, dus de
   grootte en de inkt van een <h1> horen bij het ontwerpsysteem (.s-page-header-title) en
   niet hier: een elementregel hier zou stilletjes met dat component gaan onderhandelen.

   Handboekregel U1 — een hex- of rgb()-waarde staat uitsluitend in de tokenblokken. Een
   kleurletterlijke hier omzeilt het thema en verft in de donkere stand witte tekst op een
   wit vlak. Lees dus var(--s-...) en schrijf nooit een kleur op. */

html, body {
    margin: 0;
}

body {
    background: var(--s-page-background);
}

/* Beheeracties moeten ook in de hostversie van MudBlazor een zichtbare
   toetsenbordfocus houden. De ring gebruikt dezelfde gepubliceerde huisstijltoken. */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible {
    outline: 3px solid var(--s-focus-ring);
    outline-offset: 3px;
}

/* Suppressiescherm (Beheer > Suppressie, alleen met IncludeFeedbackSuppression). Op 390px passen
   vijf kolommen niet naast elkaar; zonder minimumbreedte werd een adres midden in een woord
   gebroken. De minimumbreedte houdt elke rij heel en geeft de overloop aan de s-table-scroll
   eromheen, hetzelfde patroon als IntakeMailboxList. Hier en niet in een razor.css: die pagina
   wordt zonder de opt-in uit de build gehaald, en een scoped stylesheet zonder pagina is een
   bouwfout (BLAZOR102). */
.suppression-table { min-width: 44rem; }
.suppression-table th,
.suppression-table td:first-child { white-space: nowrap; }

/* De gewone GET-zoekbalk leeft in het AppBarExtras-renderfragment. Daardoor kan Razor CSS
   isolation hem niet bereiken; deze platformstylesheet is de geladen hostscope voor de balk. */
.s-app-shell-search {
    flex-wrap: nowrap;
}

.s-app-shell-search input[type="search"] {
    inline-size: clamp(7rem, 20vw, 14rem);
    min-inline-size: 0;
    padding: var(--s-space-compact) var(--s-space-inline);
    border: 1px solid currentColor;
    border-radius: var(--s-r-tile);
    background: transparent;
    color: inherit;
    font: inherit;
}

.s-app-shell-search input[type="search"]::placeholder {
    color: color-mix(in srgb, currentColor 72%, transparent);
}

.s-app-shell-search input[type="search"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}