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

/* STATUS-TAG - kleurgecodeerd label voor een status-waarde (achtergrond via ColorMappings, tekstkleur via
   ColorMappings.ContrastColor). Gedeeld patroon uit de portal, in Brein (nog) niet gebruikt; plaatsing
   volgens .claude/rules/blazor-ui-patterns.md (sectie 2). .clickable is een modifier voor de variant die als knop
   fungeert (de chip in de bewerken-dialoog); de statische kolomweergave in het grid gebruikt hem niet. */
.status-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}

.status-tag.clickable {
    cursor: pointer;
}

/* 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 .claude/rules/blazor-ui-patterns.md (sectie 4).
   Gebruikt door: Beheer, QueueStatus, StagingOverview, Terminology. */
.delete-action:not(:disabled) .mud-icon-root {
    color: var(--mud-palette-error) !important;
}

/* STATUS-DOT - round status marker; the colour comes inline from ColorMappings.
   Shared pattern from the portal; not used by a Brein page yet. */
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 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);
}