/* ========================================
   SHARED PATTERNS - app-specific herbruikbare class-conventies,
   elk gedeeld door 2+ componenten (niet MudBlazor-overrides, geen los component)
   ======================================== */

/* PMA-afwijking: uit de portalversie zijn .status-tag, .status-dot, .global-search-autocomplete en
   .regex-value weggelaten (geen PMA-gebruikers en geen te porten component dat ze gebruikt).
   .delete-action, .split-pane-content en .bw-dialog-form-row/-label blijven staan voor de
   componenten en pagina's die latere taken overnemen. */

/* Verwijder-/prullenbak-icoonknoppen zijn rood zolang ze aanklikbaar zijn; uitgeschakeld krijgen ze de
   gewone MudBlazor-disabled-kleur. Zet Class="delete-action" op de MudIconButton; de kleur staat hier
   centraal (nooit Color= per icoon). Zie skill boxwise-portal-ui (references/ui-regels.md).
   Gebruikt door: Statuses.razor, CustomerRoutesPage.razor, LoadCarriers.razor, EntitySettingsView.razor. */
.delete-action:not(:disabled) .mud-icon-root {
    color: var(--mud-palette-error) !important;
}

/* SPLIT-VIEW PAGINA-SHELL - gedeeld door de SplitGridLayout-pagina's (Inkomend > Inkooporders,
   Inkomend > Voorontvangsten, Inkomend > Ontvangsten). Stond eerst scoped in
   PurchaseOrders.razor.css; met een tweede consument hoort hij hier (zie
   skill boxwise-portal-ui (references/ui-regels.md): pas promoveren zodra een tweede component dezelfde regel
   nodig heeft). */

/* Paneelinhoud vult zijn SplitGridLayout-paneel, zodat de FilterableGrid erin op hoogte kan flexen. */
.split-pane-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/* DIALOG FORM LABEL-LEFT LAYOUT - reusable label-left form for EditDialog hosts
   (e.g. LoadCarrierDialog, StatusDialog, CustomerRouteDialog). The label sits on the left,
   vertically centred on the field. The label-column width is configurable per dialog via
   --bw-dialog-label-width (default 160px).

   A validation message below a field must NOT change the row height — otherwise the centred label
   would shift relative to the field as soon as an error appears. So the helper-container is taken out
   of flow (absolute, below the field) and the row only reserves space when it actually contains an
   error (:has(.mud-input-error)). This keeps the label/field alignment identical with or without a
   message, for any validated field, without a component-specific class. */
.bw-dialog-form-row {
    display: grid;
    grid-template-columns: var(--bw-dialog-label-width, 160px) 1fr;
    align-items: center;
    gap: 12px;
}

.bw-dialog-form-label {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

/* Anchor for the out-of-flow validation message. */
.bw-dialog-form-row .mud-input-control {
    position: relative;
}

.bw-dialog-form-row .mud-input-control-helper-container {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
}

.bw-dialog-form-row:has(.mud-input-error) {
    margin-bottom: 1.5rem;
}

/* Checkbox rows - generic to "a MudCheckBox in this grid", so no wrapper or per-dialog class needed.
   justify-self/width: label.mud-checkbox is a flex item of .mud-input-control, so a full-width cell
   stretches the clickable area across the whole row; sizing to content keeps it on the box.
   margin-inline-start cancels the two insets that push the box right of the text-field borders: 4px
   hit-area padding + the glyph's 3-of-24 viewBox margin (0.1875rem at the default medium icon).
   Both assume the defaults used here (Dense, medium size); other sizes need other values.
   :has(.mud-checkbox) keeps this off MudSwitch/MudRadio, which share the same wrapper class. */
.bw-dialog-form-row > .mud-input-control-boolean-input:has(.mud-checkbox) {
    justify-self: start;
    width: max-content;
    margin-inline-start: calc(-4px - 0.1875rem);
}

/* Afdrukken: alleen de inhoud, zonder rail, AppBar en zijbalk (o.a. roadmap-afdrukweergave). */
@media print {
    .primary-rail, .mud-appbar, .mud-drawer { display: none !important; }
    .mud-main-content { margin: 0 !important; padding: 0 !important; }
    .pma-content { margin: 0; height: auto; overflow: visible; }
}