.d-contents {
    display: contents;
}

.fixed {
    position: fixed;
}

.inset-0 {
    inset: 0;
}

.z-max {
    z-index: 9999;
}

.min-h-0 {
    min-height: 0;
}

.min-w-0 {
    min-width: 0;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.flex-1 {
    flex: 1 1 auto;
}

.flex-fill {
    flex: 1 1 0%;
}

.bg-primary {
    background-color: var(--mud-palette-primary);
}

.bg-secondary {
    background-color: var(--mud-palette-secondary);
}

.bg-surface {
    background-color: var(--mud-palette-surface);
}

.bg-background {
    background-color: var(--mud-palette-background);
}

.text-primary {
    color: var(--mud-palette-primary);
}

/* NsTable structural layout: the scroll area grows so the pager stays pinned
   at the bottom when the table fills a flex container. */
.ns-table .mud-table-container {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Zebra banding already gives every row an edge, so MudBlazor's per-row hairline
   would only double it. The stacked layout below the breakpoint keeps its own
   separator (a more specific MudBlazor rule), which is the one that divides records
   there — the header hairline is restored below because it divides head from body. */
.ns-table .mud-table-body .mud-table-cell {
    border-bottom: none;
}

/* Column headers left at text-primary weigh exactly as much as the data underneath;
   dropping them to secondary is what gives the grid a spine. */
.ns-table .mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

/* NsDrawer: never wider than the viewport; width follows Surface.Size (animated for runtime resizes). */
.ns-drawer {
    max-width: 100vw;
    transition: width 200ms ease;
}

/* An end-anchored drawer casts sideways onto the page it covers, which the elevation
   levels — vertical offsets, for stacked paper — cannot express. */
.ns-drawer.mud-drawer {
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* MudBlazor paints every paper with Surface, so a menu opening over a card lands on
   the exact tone it floats above. These take the raised step of the brand's ladder
   (see BrandMudTheme: the brand's SurfaceRaised travels in BackgroundGray). */
.mud-popover.mud-paper,
.mud-dialog.mud-paper {
    background-color: var(--mud-palette-background-gray);
}

/* A floating label is promoted to text-primary by MudBlazor, which puts the name of a
   field at the same weight as its value. The focus rule is restated because it has the
   same specificity and would otherwise lose to the rule above it; the error rule wins
   on its own (MudBlazor marks it !important). */
.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-text-secondary);
}

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-primary);
}

/* The spin behind NsIcons.Progress. fill-box puts the origin at the centre of the shape
   itself, so it keeps spinning true whatever viewBox the icon is rendered into. Reduced
   motion slows it rather than stopping it — a frozen spinner still claims to be working. */
.ns-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: ns-spin 900ms linear infinite;
}

@keyframes ns-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ns-spin {
        animation-duration: 2.4s;
    }
}

/* Search box in a page-header toolbar: a comfortable width that can shrink on a
   narrow toolbar but never stretches end to end — the spacer past it holds the gap. */
.ns-toolbar-search {
    flex: 0 1 22rem;
}

/* The app's icon scale, in one place: NsIcon maps NsSize onto the vendor's three steps and
   this is what those steps measure. Material's own (20/24/36) are drawn for touch — beside
   14px text they read as illustrations. Set here rather than per control because a nav link,
   a button and a field adornment each render their own icon and never ask NsIcon. */
.mud-icon-size-small {
    font-size: 1rem;
}

.mud-icon-size-medium {
    font-size: 1.25rem;
}

.mud-icon-size-large {
    font-size: 1.5rem;
}

/* NsText Secondary: the muted rank of body text. Not Color.Secondary — that is the
   brand's spare accent, a different meaning of the same word. */
.ns-text-muted {
    color: var(--mud-palette-text-secondary);
}

/* A line that flags a broken record inline (a row whose stored document could not be
   loaded) — the same severity colour NsAlert's Danger uses, without the block-level
   padding an alert would force into a table cell. */
.ns-text-danger {
    color: var(--mud-palette-error);
}

/* A node whose template is more than a name (NsTree stacks a fact and the row's actions
   under it) makes the row tall, and MudBlazor centres both the toggle and the row against
   that whole height. The row carries the same surface as a grid so the tree reads as one
   list of records rather than text on the page. Selection and hover are more specific
   rules of MudBlazor's own, so they still win over this background. */
.ns-tree .mud-treeview-item-content {
    align-items: flex-start;
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 6px;
    padding: 10px 12px;
}

/* MudBlazor indents a level by 17px, which is less than the toggle column (2rem plus its
   margins) — a child ends up beside its parent instead of under it. 48px is where the
   parent's own title starts, so a child card hangs off the name it belongs to. Both
   properties, because MudBlazor sets both and logical-vs-physical order decides otherwise. */
.ns-tree .mud-treeview-group {
    margin-left: 48px;
    margin-inline-start: 48px;
}

/* The toggle's button box is 32px against a 24px title line: aligning the boxes leaves the
   glyph half that difference too low, so it comes back up by exactly that. */
.ns-tree .mud-treeview-item-arrow {
    margin-top: -4px;
}

/* Container queries: a screen's chrome (NsPanel, NsCard) declares itself the
   measuring reference, so the d-c-* utilities below react to the width a control
   actually gets — a 960px aside drawer is narrow even on a 1920px viewport, which
   a plain media query cannot see. inline-size contains the horizontal axis only:
   these are flex columns whose width comes from the parent, never from content. */
.ns-container {
    container-type: inline-size;
}

/* Container-width display utilities, mirroring MudBlazor's d-{breakpoint}-{value}
   (which measures the viewport) at MudBlazor's own breakpoints. Deliberately only
   the values in use: the full 9-values x 6-breakpoints grid is 54 rules nobody reads. */
.d-c-none {
    display: none;
}

@container (min-width: 600px) {
    .d-c-sm-inline {
        display: inline;
    }

    .d-c-sm-flex {
        display: flex;
    }

    .d-c-sm-table-cell {
        display: table-cell;
    }
}

@container (min-width: 960px) {
    .d-c-md-inline {
        display: inline;
    }

    .d-c-md-flex {
        display: flex;
    }

    .d-c-md-table-cell {
        display: table-cell;
    }
}

@container (min-width: 1280px) {
    .d-c-lg-inline {
        display: inline;
    }

    .d-c-lg-flex {
        display: flex;
    }

    .d-c-lg-table-cell {
        display: table-cell;
    }
}

@container (min-width: 1920px) {
    .d-c-xl-inline {
        display: inline;
    }

    .d-c-xl-flex {
        display: flex;
    }

    .d-c-xl-table-cell {
        display: table-cell;
    }
}

/* Collapsed icon+label control (see NsButton/NsLink Breakpoint): MudBlazor gives the
   start icon asymmetric margins (-4px left to offset the button's padding, 8px right to
   clear the label). With the label hidden those 8px are left over and the icon sits off
   centre, so the margin is neutralised — not restated — below each breakpoint, keeping
   MudBlazor free to change its own spacing. */
@container (max-width: 599.98px) {
    .ns-collapse-sm .mud-button-icon-start {
        margin-inline: 0;
    }
}

@container (max-width: 959.98px) {
    .ns-collapse-md .mud-button-icon-start {
        margin-inline: 0;
    }
}

@container (max-width: 1279.98px) {
    .ns-collapse-lg .mud-button-icon-start {
        margin-inline: 0;
    }
}

@container (max-width: 1919.98px) {
    .ns-collapse-xl .mud-button-icon-start {
        margin-inline: 0;
    }
}