/* Auto-generated bundle from .razor.css files */
/* DO NOT EDIT - This file is automatically generated */
/* NOTE: This file is included in source control because the GitHub build & publish action does not publish it */
/* ========================================= */
/* File: CoreAlert.razor.css */
/* ========================================= */
.core-alert {
    border-radius: var(--quipu-borderRadius-xs);
    padding: var(--quipu-padding-sm);
    display: flex;
}

.core-alert .mud-alert-message{
    gap: var(--quipu-gap-md);
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    justify-content: center;
}

.mud-alert-close-button{
    border-radius: var(--quipu-button-borderRadius-md);
}

.core-alert--variant-info {
    background-color: var(--quipu-color-bg-info-subtle);
}

.core-alert--variant-error {
    background-color: var(--quipu-color-bg-error-subtle);
}

.core-alert--variant-warning {
    background-color: var(--quipu-color-bg-warning-subtle);
}

.core-alert--variant-success {
    background-color: var(--quipu-color-bg-success-subtle);
}

.core-alert--variant-neutral {
    background-color: var(--quipu-color-bg-neutral-subtle);
}

.core-alert--variant-info .mud-alert-icon {
    color: var(--quipu-color-graphic-info);
}

.core-alert--variant-error .mud-alert-icon {
    color: var(--quipu-color-graphic-error);
}

.core-alert--variant-warning .mud-alert-icon {
    color: var(--quipu-color-graphic-warning);
}

.core-alert--variant-success .mud-alert-icon {
    color: var(--quipu-color-graphic-success);
}

.core-alert--variant-neutral .mud-alert-icon {
    color: var(--quipu-color-fg-strong);
}

.core-alert .mud-alert-close{
    align-items: start;
}
.core-alert .mud-alert-close-button{
    width: 40px;
    height: 40px;
}
.core-alert .mud-alert-close-button:hover {
    background-color: var(--quipu-color-bg-neutral-subtle-hover);
}

.core-alert__title{
    font: var(--quipu-label-md-emphasis);
    letter-spacing: var(--quipu-letterSpacing-label-md);
}

.core-alert__text {
    font: var(--quipu-body-sm);
    letter-spacing: var(--quipu-letterSpacing-body-sm);
}
/* ========================================= */
/* File: CoreAvatar.razor.css */
/* ========================================= */
/* Base Avatar Styles */
.core-avatar {
    color: var(--quipu-color-fg-inverse);
    text-transform: uppercase;
}

/* Size Modifiers */
.core-avatar--size-xs {
    width: var(--quipu-size-xl) !important;
    height: var(--quipu-size-xl) !important;
    font: var(--quipu-label-xs) !important;
    letter-spacing: var(--quipu-letterSpacing-label-sm);
}

.core-avatar--size-sm {
    width: var(--quipu-size-2xl) !important;
    height: var(--quipu-size-2xl) !important;
    font: var(--quipu-label-sm-emphasis) !important;
    letter-spacing: var(--quipu-letterSpacing-label-sm);
}

.core-avatar--size-md {
    width: var(--quipu-size-4xl) !important;
    height: var(--quipu-size-4xl) !important;
    font: var(--quipu-label-sm-emphasis) !important;
    letter-spacing: var(--quipu-letterSpacing-label-sm);
}

.core-avatar--size-lg {
    width: var(--quipu-size-6xl) !important;
    height: var(--quipu-size-6xl) !important;
    font: var(--quipu-label-md-emphasis) !important;
    letter-spacing: var(--quipu-letterSpacing-label-md);
}

.core-avatar--size-xl {
    width: var(--quipu-size-7xl) !important;
    height: var(--quipu-size-7xl) !important;
    font: var(--quipu-label-lg-emphasis) !important;
    letter-spacing: var(--quipu-letterSpacing-label-lg);
}

/* Variant Modifiers */
.core-avatar--variant-circular {
    border-radius: var(--quipu-borderRadius-pill) !important;
}

.core-avatar--variant-rounded {
    border-radius: var(--quipu-borderRadius-sm) !important;
}

/* Color Modifiers */
.core-avatar--color-main {
    background-color: var(--quipu-color-bg-main);
}
/* ========================================= */
/* File: CoreButton.razor.css */
/* ========================================= */
/* MudBlazor's filled variants ship with a default elevation we don't want;
   Quipu reserves the level2 shadow for Elevated and large-button hover only. */
.core-button.mud-button-filled {
    box-shadow: unset;
}

.core-button.mud-button-filled:hover {
    box-shadow: unset;
}

/* MudBlazor's .mud-button-root has min-width:64px, which adds visible empty
   space on short labels. Quipu sizes purely from inline-flex + padding. */
.core-button {
    min-width: unset;
}

/* === Quipu per-size tokens === */
/* Sizing flows entirely through .core-button--size-{xs|sm|md|lg} modifiers
   added in CoreButton.razor.cs. MudButton's Size prop is not passed, so
   MudBlazor defaults to Medium and ships .mud-button-icon-size-medium on
   every icon wrapper — we override the icon font-size per size below. */

/* Xs. */
.core-button.core-button--size-xs {
    font: var(--quipu-label-xs-emphasis);
    letter-spacing: normal;
    height: var(--quipu-size-3xl);
    border-radius: var(--quipu-button-borderRadius-sm);
    padding: 0 var(--quipu-control-padding-edgetotext-xs);
}
.core-button.core-button--size-xs:has(.mud-button-icon-start) {
    padding-left: var(--quipu-control-padding-edgetoicon-xs);
}
.core-button.core-button--size-xs:has(.mud-button-icon-end) {
    padding-right: var(--quipu-control-padding-edgetoicon-xs);
}
.core-button.core-button--size-xs .mud-button-icon-start {
    margin-left: 0;
    margin-right: var(--quipu-control-gap-xs);
}
.core-button.core-button--size-xs .mud-button-icon-end {
    margin-left: var(--quipu-control-gap-xs);
    margin-right: 0;
}
.core-button.core-button--size-xs .mud-button-icon-size-medium > *:first-child {
    font-size: var(--quipu-icon-size-labelXs);
    width: var(--quipu-icon-size-labelXs);
    height: var(--quipu-icon-size-labelXs);
}

/* Sm. */
.core-button.core-button--size-sm {
    font: var(--quipu-label-sm-emphasis);
    letter-spacing: var(--quipu-letterSpacing-label-sm);
    height: var(--quipu-control-size-sm);
    border-radius: var(--quipu-button-borderRadius-sm);
    padding: 0 var(--quipu-control-padding-edgetotext-sm);
}
.core-button.core-button--size-sm:has(.mud-button-icon-start) {
    padding-left: var(--quipu-control-padding-edgetoicon-sm);
}
.core-button.core-button--size-sm:has(.mud-button-icon-end) {
    padding-right: var(--quipu-control-padding-edgetoicon-sm);
}
.core-button.core-button--size-sm .mud-button-icon-start {
    margin-left: 0;
    margin-right: var(--quipu-control-gap-sm);
}
.core-button.core-button--size-sm .mud-button-icon-end {
    margin-left: var(--quipu-control-gap-sm);
    margin-right: 0;
}
.core-button.core-button--size-sm .mud-button-icon-size-medium > *:first-child {
    font-size: var(--quipu-icon-size-labelSm);
    width: var(--quipu-icon-size-labelSm);
    height: var(--quipu-icon-size-labelSm);
}

/* Md (default). */
.core-button.core-button--size-md {
    font: var(--quipu-label-md-emphasis);
    letter-spacing: var(--quipu-letterSpacing-label-md);
    height: var(--quipu-control-size-md);
    border-radius: var(--quipu-button-borderRadius-md);
    padding: 0 var(--quipu-control-padding-edgetotext-md);
}
.core-button.core-button--size-md:has(.mud-button-icon-start) {
    padding-left: var(--quipu-control-padding-edgetoicon-md);
}
.core-button.core-button--size-md:has(.mud-button-icon-end) {
    padding-right: var(--quipu-control-padding-edgetoicon-md);
}
.core-button.core-button--size-md .mud-button-icon-start {
    margin-left: 0;
    margin-right: var(--quipu-control-gap-md);
}
.core-button.core-button--size-md .mud-button-icon-end {
    margin-left: var(--quipu-control-gap-md);
    margin-right: 0;
}
.core-button.core-button--size-md .mud-button-icon-size-medium > *:first-child {
    font-size: var(--quipu-icon-size-labelMd);
    width: var(--quipu-icon-size-labelMd);
    height: var(--quipu-icon-size-labelMd);
}

/* Lg. */
.core-button.core-button--size-lg {
    font: var(--quipu-label-lg-emphasis);
    letter-spacing: var(--quipu-letterSpacing-label-lg);
    height: var(--quipu-control-size-lg);
    border-radius: var(--quipu-button-borderRadius-lg);
    padding: 0 var(--quipu-control-padding-edgetotext-lg);
}
.core-button.core-button--size-lg:has(.mud-button-icon-start) {
    padding-left: var(--quipu-control-padding-edgetoicon-lg);
}
.core-button.core-button--size-lg:has(.mud-button-icon-end) {
    padding-right: var(--quipu-control-padding-edgetoicon-lg);
}
.core-button.core-button--size-lg .mud-button-icon-start {
    margin-left: 0;
    margin-right: var(--quipu-control-gap-lg);
}
.core-button.core-button--size-lg .mud-button-icon-end {
    margin-left: var(--quipu-control-gap-lg);
    margin-right: 0;
}
.core-button.core-button--size-lg .mud-button-icon-size-medium > *:first-child {
    font-size: var(--quipu-icon-size-labelLg);
    width: var(--quipu-icon-size-labelLg);
    height: var(--quipu-icon-size-labelLg);
}

/* === Quipu variant rest colors === */
/* Each CoreButtonVariant maps to MudBlazor (Variant + Color) classes.
   Neutral and Elevated both map to Text+Default; the .mud-elevation-1
   class added in code-behind distinguishes Elevated. */

/* Primary → Filled + Primary. */
.core-button.mud-button-filled-primary {
    background-color: var(--quipu-color-bg-main);
    color: var(--quipu-color-fg-inverse);
}

/* Secondary → Outlined + Primary. */
.core-button.mud-button-outlined-primary {
    background-color: var(--quipu-color-bg-surface);
    color: var(--quipu-color-fg-main);
    border-color: var(--quipu-color-border-main);
}

/* Tertiary → Text + Primary. */
.core-button.mud-button-text-primary {
    background-color: var(--quipu-color-bg-surface);
    color: var(--quipu-color-fg-main);
}

/* Neutral → Text + Default (no elevation class). */
.core-button.mud-button-text-default:not(.mud-elevation-1) {
    background-color: var(--quipu-color-bg-surface);
    color: var(--quipu-color-fg-default);
}

/* Elevated → Text + Default with elevation, using Quipu level2 shadow. */
.core-button.mud-button-text-default.mud-elevation-1 {
    background-color: var(--quipu-color-bg-surface);
    color: var(--quipu-color-fg-default);
    box-shadow: var(--quipu-elevation-level2);
}

/* NeutralOutlined → Outlined + Default. */
.core-button.mud-button-outlined-default {
    background-color: var(--quipu-color-bg-surface);
    color: var(--quipu-color-fg-default);
    border-color: var(--quipu-color-border-default);
}

/* === Quipu variant hover + active states === */
/* :not(:disabled) on every hover/active rule keeps disabled buttons visually
   static. MudBlazor sets pointer-events:none on :disabled today so :hover/:active
   never fire there, but the explicit guard survives a future MudBlazor change. */

/* Primary. */
.core-button.mud-button-filled-primary:not(:disabled):hover {
    background-color: var(--quipu-color-bg-main-hover);
}
.core-button.mud-button-filled-primary:not(:disabled):active {
    background-color: var(--quipu-color-bg-main-active);
}

/* Secondary. */
.core-button.mud-button-outlined-primary:not(:disabled):hover {
    background-color: var(--quipu-color-bg-main-subtle-hover);
    border-color: var(--quipu-color-border-main);
}
.core-button.mud-button-outlined-primary:not(:disabled):active {
    background-color: var(--quipu-color-bg-main-subtle-active);
    border-color: var(--quipu-color-border-main-active);
}

/* Tertiary. */
.core-button.mud-button-text-primary:not(:disabled):hover {
    background-color: var(--quipu-color-bg-main-subtle-hover);
}
.core-button.mud-button-text-primary:not(:disabled):active {
    background-color: var(--quipu-color-bg-main-subtle-active);
}

/* Neutral. */
.core-button.mud-button-text-default:not(.mud-elevation-1):not(:disabled):hover {
    background-color: var(--quipu-color-bg-neutral-subtle-hover);
}
.core-button.mud-button-text-default:not(.mud-elevation-1):not(:disabled):active {
    background-color: var(--quipu-color-bg-neutral-subtle-active);
}

/* Elevated. */
.core-button.mud-button-text-default.mud-elevation-1:not(:disabled):hover {
    background-color: var(--quipu-color-bg-neutral-subtle-hover);
}
.core-button.mud-button-text-default.mud-elevation-1:not(:disabled):active {
    background-color: var(--quipu-color-bg-neutral-subtle-active);
}

/* NeutralOutlined. */
.core-button.mud-button-outlined-default:not(:disabled):hover {
    background-color: var(--quipu-color-bg-neutral-subtle-hover);
    border-color: var(--quipu-color-border-hover);
}
.core-button.mud-button-outlined-default:not(:disabled):active {
    background-color: var(--quipu-color-bg-neutral-subtle-active);
    border-color: var(--quipu-color-border-active);
}

/* === Quipu focus ring === */
/* The Quipu spec references --quipu-focus-outline / --quipu-focus-outline-offset
   which our token file does not yet emit. Compose from existing tokens. */
.core-button:focus-visible {
    outline: var(--quipu-borderWidth-thick) solid var(--quipu-color-border-focus);
    outline-offset: 2px;
}

/* === Quipu disabled state === */
/* color carries !important because MudBlazor's .mud-button-root:disabled
   rule uses !important on color. background-color on filled buttons gets the
   same treatment because .mud-button-filled:disabled also uses !important.
   border-color is plain — MudBlazor's outlined:disabled border rule has no
   !important, so specificity alone is enough to win. */

/* Primary disabled. */
.core-button.mud-button-filled-primary:disabled {
    background-color: var(--quipu-color-bg-disabled) !important;
    color: var(--quipu-color-fg-disabled) !important;
    box-shadow: none;
}

/* Secondary, NeutralOutlined disabled. */
.core-button.mud-button-outlined-primary:disabled,
.core-button.mud-button-outlined-default:disabled {
    color: var(--quipu-color-fg-disabled) !important;
    border-color: var(--quipu-color-border-disabled);
}

/* Tertiary, Neutral, Elevated disabled (all Text variants). */
.core-button.mud-button-text-primary:disabled,
.core-button.mud-button-text-default:disabled {
    color: var(--quipu-color-fg-disabled) !important;
}

/* Elevated disabled drops the level2 shadow. */
.core-button.mud-button-text-default.mud-elevation-1:disabled {
    box-shadow: none;
}

/* === Lg Primary/Secondary elevation === */
/* Quipu's button-elevation-* tokens are currently 0-value placeholders;
   wiring them now means upstream changes flow through without code edits.
   Hover and rest both exclude :active so the pressed state stays flat
   (Quipu spec: active drops the shadow entirely). */
.core-button.core-button--size-lg.mud-button-filled-primary:not(:disabled):not(:active) {
    box-shadow: var(--quipu-button-elevation-primary);
}
.core-button.core-button--size-lg.mud-button-filled-primary:not(:disabled):not(:active):hover {
    box-shadow: var(--quipu-button-elevation-primary-hover);
}
.core-button.core-button--size-lg.mud-button-filled-primary:active {
    box-shadow: none;
}
.core-button.core-button--size-lg.mud-button-outlined-primary:not(:disabled):not(:active) {
    box-shadow: var(--quipu-button-elevation-secondary);
}
.core-button.core-button--size-lg.mud-button-outlined-primary:not(:disabled):not(:active):hover {
    box-shadow: var(--quipu-button-elevation-secondary-hover);
}
.core-button.core-button--size-lg.mud-button-outlined-primary:active {
    box-shadow: none;
}

/* === Quipu Destructive modifier === */
/* Composes with any variant. Disabled state takes precedence and falls back
   to gray (no red) because :disabled rules carry higher specificity + !important. */

/* Primary destructive: solid red. */
.core-button.core-button--destructive.mud-button-filled-primary {
    background-color: var(--quipu-color-fg-error);
    color: var(--quipu-color-fg-inverse);
}
.core-button.core-button--destructive.mud-button-filled-primary:hover {
    background-color: var(--quipu-color-fg-error-hover);
}
.core-button.core-button--destructive.mud-button-filled-primary:active {
    background-color: var(--quipu-color-fg-error-active);
}

/* Secondary destructive: red text, red border, subtle red hover/active. */
.core-button.core-button--destructive.mud-button-outlined-primary {
    color: var(--quipu-color-bg-error);
    border-color: var(--quipu-color-border-error);
}
.core-button.core-button--destructive.mud-button-outlined-primary:hover {
    background-color: var(--quipu-color-bg-error-subtle-hover);
    border-color: var(--quipu-color-border-error);
}
.core-button.core-button--destructive.mud-button-outlined-primary:active {
    background-color: var(--quipu-color-bg-error-subtle-active);
    border-color: var(--quipu-color-border-error);
}

/* Tertiary, Neutral, Elevated destructive: red text + subtle red hover/active. */
.core-button.core-button--destructive.mud-button-text-primary,
.core-button.core-button--destructive.mud-button-text-default {
    color: var(--quipu-color-bg-error);
}
.core-button.core-button--destructive.mud-button-text-primary:hover,
.core-button.core-button--destructive.mud-button-text-default:hover {
    background-color: var(--quipu-color-bg-error-subtle-hover);
}
.core-button.core-button--destructive.mud-button-text-primary:active,
.core-button.core-button--destructive.mud-button-text-default:active {
    background-color: var(--quipu-color-bg-error-subtle-active);
}

/* NeutralOutlined destructive: red text, red border, subtle red hover/active. */
.core-button.core-button--destructive.mud-button-outlined-default {
    color: var(--quipu-color-bg-error);
    border-color: var(--quipu-color-border-error);
}
.core-button.core-button--destructive.mud-button-outlined-default:hover {
    background-color: var(--quipu-color-bg-error-subtle-hover);
    border-color: var(--quipu-color-border-error);
}
.core-button.core-button--destructive.mud-button-outlined-default:active {
    background-color: var(--quipu-color-bg-error-subtle-active);
    border-color: var(--quipu-color-border-error);
}
/* ========================================= */
/* File: CoreCard.razor.css */
/* ========================================= */
.core-card__media {
    position: relative;
    overflow: hidden;
    display: flex;
    border-radius: var(--quipu-borderRadius-sm);
}

.core-card__media--cover {
    background-size: cover;
}

.core-card__media--contain {
    background-size: contain;
}

.core-card__elements {
    display: flex;
    gap: var(--quipu-control-gap-md);
    flex-direction: column;
    flex-grow: 1;
}

.core-card-base .core-card__content.mud-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--quipu-gap-xl);
    padding: var(--quipu-padding-xs);
    flex-grow: 1;
}

.core-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--quipu-gap-md);
    min-width: 0;
}

.core-card__titles {
    display: flex;
    flex-direction: column;
    gap: var(--quipu-gap-xs);
}

.core-card__title {
    order: 1;
    color: var(--quipu-color-fg-default);
}

.core-card__subtitle {
    color: var(--quipu-color-fg-subtle);
}

.core-card__actions.mud-card-actions {
    padding: 0 var(--quipu-padding-xs) var(--quipu-padding-xs) var(--quipu-padding-xs);
    gap: var(--quipu-gap-sm);
}
/* ========================================= */
/* File: CoreCardBase.razor.css */
/* ========================================= */
.core-card-base {
    --local-border: var(--quipu-borderWidth-thinnest) solid var(--quipu-color-border-default);
    --local-shadow: var(--quipu-elevation-level1);
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: var(--quipu-padding-xs);
    border: var(--local-border);
    border-radius: var(--quipu-borderRadius-md);
    background: var(--quipu-color-bg-surface);
    box-shadow: var(--local-shadow);
    gap: var(--quipu-control-gap-xl);
}

.core-card-base .mud-card-content {
    padding: 0px;
}

.core-card-base--hoverable {
    cursor: pointer;
}

    .core-card-base--hoverable:hover {
        border-color: var(--quipu-color-border-hover);
    }

.core-card-base--selected {
    --local-shadow-selected: 0 0 0 var(--quipu-borderWidth-thick) var(--quipu-color-fg-supportive);
    --local-border: var(--quipu-borderWidth-thinnest) solid transparent;
    --local-shadow: var(--quipu-elevation-level1), var(--local-shadow-selected);
}

.core-card-base--hoverable.core-card-base--selected:hover {
    --local-border: var(--quipu-borderWidth-thinnest) solid var(--quipu-color-border-hover);
    --local-shadow: var(--quipu-elevation-level4), var(--local-shadow-selected);
}

.core-card-base--hoverable.core-card-base--selected:active {
    --local-border: var(--quipu-borderWidth-thinnest) solid var(--quipu-color-border-hover);
    --local-shadow: var(--local-shadow-selected);
}
/* ========================================= */
/* File: CoreCheckbox.razor.css */
/* ========================================= */
.core-checkbox {
    --local-helpertext-color: var(--quipu-color-fg-subtle);
    --local-helpertext-letterspacing: var(--quipu-letterSpacing-label-md);
    --local-helpertext: var(--quipu-label-md-subtle);
    --local-checkbox-label-font: var(--quipu-label-md-subtle);
    --local-checkbox-label-letter-spacing: var(--quipu-letterSpacing-label-md);
    --local-checkbox-label-height: var(--quipu-size-6xl);
    --local-checkbox-size: var(--quipu-size-xl);
    --local-hit-area-size: var(--quipu-size-6xl);
}

    .core-checkbox.size-sm {
        --local-helpertext: var(--quipu-label-sm-subtle);
        --local-helpertext-letterspacing: var(--quipu-letterSpacing-label-sm);
        --local-checkbox-label-font: var(--quipu-label-sm-subtle);
        --local-checkbox-label-letter-spacing: var(--quipu-letterSpacing-label-sm);
        --local-checkbox-label-height: var(--quipu-size-4xl);
        --local-checkbox-size: var(--quipu-size-lg);
        --local-hit-area-size: var(--quipu-size-4xl);
    }

    .core-checkbox.size-lg {
        --local-helpertext: var(--quipu-label-lg-subtle);
        --local-helpertext-letterspacing: var(--quipu-letterSpacing-label-lg);
        --local-checkbox-label-font: var(--quipu-label-lg-subtle);
        --local-checkbox-label-letter-spacing: var(--quipu-letterSpacing-label-lg);
        --local-checkbox-label-height: var(--quipu-size-7xl);
        --local-checkbox-size: var(--quipu-size-2xl);
        --local-hit-area-size: var(--quipu-size-7xl);
    }

.core-checkbox .mud-typography-body1 {
    font: var(--local-checkbox-label-font);
    letter-spacing: var(--local-checkbox-label-letter-spacing);
    min-height: var(--local-checkbox-label-height);
    display: inline-flex;
    align-items: center;
}

.core-checkbox .mud-icon-button .mud-icon-root.mud-svg-icon {
    fill: var(--quipu-color-fg-subtle);
}

.core-checkbox .mud-icon-button.mud-checkbox-null .mud-icon-root.mud-svg-icon,
.core-checkbox .mud-icon-button.mud-checkbox-true .mud-icon-root.mud-svg-icon {
    fill: var(--quipu-color-bg-supportive);
}

    .core-checkbox.disabled .mud-icon-button .mud-icon-root.mud-svg-icon {
        fill: var(--quipu-color-bg-disabled);
    }

    /* The checkmark/dash is a separate path in CoreCheckbox's custom icons (see CheckedIcon /
       IndeterminateIcon in CoreCheckbox.razor.cs), unfilled unless disabled. */
    .core-checkbox.disabled .core-checkbox__mark {
        fill: var(--quipu-color-fg-subtle);
    }

    .core-checkbox.disabled .mud-checkbox.mud-disabled * {
        color: var(--quipu-color-fg-subtle);
    }

    .core-checkbox.disabled {
        --local-helpertext-color: var(--quipu-color-fg-disabled);
    }

.core-checkbox .mud-icon-button {
    border-radius: var(--quipu-borderRadius-md);
    padding: calc((var(--local-hit-area-size) - var(--local-checkbox-size)) / 2);
    margin-left: calc((var(--local-hit-area-size) - var(--local-checkbox-size)) / -2);
}

    .core-checkbox:not(.disabled) .mud-icon-button:hover,
    .core-checkbox:not(.disabled) .mud-icon-button:active {
        background-color: var(--quipu-color-bg-supportive-subtle-hover) !important;
    }

.core-checkbox .mud-checkbox-false.mud-primary-text {
    color: var(--quipu-color-fg-subtle) !important;
}

.core-checkbox .mud-primary-text:hover {
    color: var(--quipu-color-fg-default) !important;
}


    .core-checkbox .core-checkbox__helpertext {
        font: var(--local-helpertext);
        color: var(--local-helpertext-color);
        letter-spacing: var(--local-helpertext-letterspacing);
    }

.core-checkbox-error .mud-icon-button .mud-icon-root.mud-svg-icon {
    fill: var(--quipu-color-border-error);
}

.core-checkbox-error .core-checkbox__helpertext {
    --local-helpertext-color: var(--quipu-color-fg-error);
}
/* ========================================= */
/* File: CoreCheckboxGroup.razor.css */
/* ========================================= */
.core-checkbox-group {
    --local-helpertext: var(--quipu-label-md-subtle);
    --local-helpertext-letterspacing: var(--quipu-letterSpacing-label-md);
}

.core-checkbox-group .mud-input-helper-text {
    font: var(--local-helpertext);
    color: var(--local-helpertext-color);
    letter-spacing: var(--local-helpertext-letterspacing);
}

.core-checkbox-group.disabled .mud-input-helper-text {
    --local-helpertext-color: var(--quipu-color-fg-disabled);
}

.core-checkbox-group legend {
    font-size: inherit;
    margin-bottom: 0;
}
/* ========================================= */
/* File: CoreDatePicker.razor.css */
/* ========================================= */
.core-datepicker {
    --local-helpertext-letterspacing: var(--quipu-letterSpacing-label-md);
    --local-helpertext: var(--quipu-label-md-subtle);
    --local-helpertext-color: var(--quipu-color-fg-subtle);
    --local-input-font: var(--quipu-body-md);
    --local-input-height: var(--quipu-control-size-md);
    --local-input-hpadding: var(--quipu-control-padding-edgetotext-sm);
    --local-input-letterspacing: var(--quipu-letterSpacing-body-md);
    --local-input-border-radius: var(--quipu-borderRadius-sm);
    --local-icon-size: var(--quipu-icon-size-md);
}

    .core-datepicker.size-sm {
        --local-input-font: var(--quipu-body-sm);
        --local-input-height: var(--quipu-control-size-sm);
        --local-input-hpadding: var(--quipu-control-padding-edgetotext-xs);
        --local-input-letterspacing: var(--quipu-letterSpacing-body-sm);
        --local-input-border-radius: var(--quipu-borderRadius-xs);
        --local-icon-size: var(--quipu-icon-size-sm);
    }

    .core-datepicker.size-lg {
        --local-input-font: var(--quipu-body-lg);
        --local-input-height: var(--quipu-control-size-lg);
        --local-input-hpadding: var(--quipu-control-padding-edgetotext-md);
        --local-input-letterspacing: var(--quipu-letterSpacing-body-lg);
        --local-input-border-radius: var(--quipu-borderRadius-md);
        --local-icon-size: var(--quipu-icon-size-lg);
    }

    .core-datepicker .mud-input > input.mud-input-root::placeholder,
    .core-datepicker .mud-input.mud-disabled > input.mud-input-root::placeholder {
        color: var(--quipu-color-fg-subtle);
        opacity: 1;
    }

    .core-datepicker .mud-input.mud-input-outlined > input.mud-input-root-outlined,
    .core-datepicker .mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined {
        padding-left: var(--local-input-hpadding);
        padding-right: 0;
    }

    .core-datepicker .mud-input > input.mud-input-root {
        font: var(--local-input-font);
        letter-spacing: var(--local-input-letterspacing);
    }

.core-datepicker .mud-input.mud-input-outlined {
    height: var(--local-input-height);
    border-radius: var(--local-input-border-radius);
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 0;
}

    .core-datepicker .mud-input.mud-input-outlined > input.mud-input-root {
        flex: 1 1 0;
        min-width: 0;
    }

    .core-datepicker .mud-input.mud-input-outlined > div.mud-input-slot {
        position: absolute;
        pointer-events: none;
    }

    .core-datepicker .mud-input.mud-input-outlined > .mud-icon-button {
        flex-shrink: 0;
        padding: 0;
        margin-right: 0;
        border-radius: var(--local-input-border-radius);
        width: var(--local-input-height);
        height: var(--local-input-height);
    }

    .core-datepicker.spacing-sm .mud-input.mud-input-outlined > .mud-icon-button {
        width: calc(var(--local-input-height) * 0.85);
        height: calc(var(--local-input-height) * 0.85);
    }

    .core-datepicker .mud-input-adornment-end {
        margin-left: 0;
        flex-shrink: 0;
    }

    .core-datepicker .mud-input-adornment-end .mud-icon-button {
        border-radius: var(--local-input-border-radius);
        width: var(--local-input-height);
        height: var(--local-input-height);
        padding: 0;
        margin-right: calc(var(--quipu-borderWidth-thin) * -1);
    }

    .core-datepicker.spacing-sm .mud-input-adornment-end .mud-icon-button {
        width: calc(var(--local-input-height) * 0.85);
        height: calc(var(--local-input-height) * 0.85);
    }

    .core-datepicker .mud-input .mud-icon-root {
        width: var(--local-icon-size);
        height: var(--local-icon-size);
        font-size: var(--local-icon-size);
    }

    .core-datepicker .mud-input.mud-input-outlined .mud-input-outlined-border {
        border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-default);
        border-radius: var(--local-input-border-radius);
    }

    .core-datepicker .mud-input-error.mud-input-outlined .mud-input-outlined-border {
        border-color: var(--quipu-color-border-error);
    }

    .core-datepicker .mud-input.mud-disabled.mud-input-outlined .mud-input-outlined-border {
        border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-disabled);
    }

    .core-datepicker .mud-input.mud-disabled > input.mud-input-root {
        background-color: var(--quipu-color-bg-disabled);
    }

    .core-datepicker .mud-input-helper-text {
        font: var(--local-helpertext);
        color: var(--local-helpertext-color);
        letter-spacing: var(--local-helpertext-letterspacing);
    }

    .core-datepicker .mud-input-helper-text.mud-input-error {
        font: var(--local-helpertext);
        color: var(--quipu-color-fg-error);
        letter-spacing: var(--local-helpertext-letterspacing);
    }

    .core-datepicker.disabled .mud-input-helper-text {
        --local-helpertext-color: var(--quipu-color-fg-disabled);
    }

    .core-datepicker .core-datepicker-error {
        display: block;
        --local-helpertext-color: var(--quipu-color-fg-error);
        margin-top: var(--quipu-control-gap-xs);
        padding-left: var(--local-input-hpadding);
        padding-right: var(--local-input-hpadding);
        font: var(--local-helpertext);
        color: var(--local-helpertext-color);
        letter-spacing: var(--local-helpertext-letterspacing);
    }

    .core-datepicker.disabled .core-datepicker-error {
        --local-helpertext-color: var(--quipu-color-fg-disabled);
    }

    .core-datepicker.has-error .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-color: var(--quipu-color-border-error);
    }

    .core-datepicker.spacing-sm {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-sm) * 0.75);
    }

    .core-datepicker.spacing-sm.size-sm {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-xs) * 0.75);
    }

    .core-datepicker.spacing-sm.size-lg {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-md) * 0.75);
    }
    .core-datepicker.spacing-sm .mud-input-control {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .core-datepicker.spacing-sm .mud-input.mud-input-outlined {
        height: calc(var(--local-input-height) * 0.85);
    }

    .core-datepicker.spacing-sm .mud-input > input.mud-input-root {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
/* ========================================= */
/* File: CoreDialog.razor.css */
/* ========================================= */
.core-dialog--xs {
    max-width: min(440px, 90vw);
}

.core-dialog--sm {
    min-width: min(440px, 90vw);
    max-width: min(640px, 90vw);
}

.core-dialog--md {
    min-width: min(640px, 90vw);
    max-width: min(900px, 90vw);
}

.core-dialog--lg {
    min-width: min(900px, 90vw);
    max-width: min(1200px, 90vw);
}

.core-dialog--xl {
    min-width: min(1200px, 90vw);
    max-width: min(1500px, 90vw);
}

.core-dialog .core-dialog__icon {
    font-size: var(--quipu-icon-size-md);
}

.core-dialog .core-dialog__content {
    gap: var(--quipu-gap-xl);
    padding: 0 var(--quipu-padding-xl);
    padding-bottom: var(--quipu-padding-xl);
}

.core-dialog .core-dialog__actions {
    padding: var(--quipu-padding-lg);
    border-top: 1px solid var(--quipu-color-border-subtle);
    gap: var(--quipu-control-gap-md);
}

.core-dialog.mud-dialog .mud-dialog-title {
    padding: var(--quipu-padding-xl);
}

    .core-dialog.mud-dialog .mud-dialog-title .mud-button-close {
        border-radius: var(--quipu-button-borderRadius-md);
        top: calc(var(--quipu-padding-md) - 2px);
        right: calc(var(--quipu-padding-md) - 2px);
    }

        .core-dialog.mud-dialog .mud-dialog-title .mud-button-close .mud-icon-root.mud-svg-icon {
            font-size: var(--quipu-icon-size-md);
        }

/* Draggable */

.core-dialog.core-dialog--draggable .mud-dialog-title {
    cursor: move;
    user-select: none;
    touch-action: none;
}

/* Content mode: the content brings its own app bar and sits flush against the dialog edge.
   MudBlazor pads .mud-dialog-content even without gutters, which left a white strip above the bar. */

.core-dialog.core-dialog--content .mud-dialog-content.core-dialog__content--flush {
    padding: 0;
}

.core-dialog.core-dialog--content.core-dialog--draggable .mud-appbar {
    cursor: move;
    user-select: none;
    touch-action: none;
}
/* ========================================= */
/* File: CoreGrid.razor.css */
/* ========================================= */
.core-grid {
    padding: 0 var(--quipu-borderWidth-thick);
}
/* ========================================= */
/* File: CoreIconButton.razor.css */
/* ========================================= */
/* Button size overrides */
/* Aligns with the sizes quipu uses */
.core-icon-button.mud-icon-button {
    --_dimension-to-font-ratio: 0.95;
    padding: 0;
}

.core-icon-button.mud-button-filled {
    box-shadow: unset;
}

.core-icon-button.mud-button-filled:hover {
    box-shadow: unset;
}

.core-icon-button--variant-elevated {
    box-shadow: var(--quipu-elevation-level2);
}

/* === NeutralOutlined → Outlined + Default ===
   Mirrors CoreButton's .mud-button-outlined-default rules so the icon variant
   has the same surface, border and interaction tokens as its labelled cousin
   (Quipu spec: neutral surface, subtle hover, neutral border). */
.core-icon-button.mud-button-outlined-default {
    background-color: var(--quipu-color-bg-surface);
    color: var(--quipu-color-fg-default);
    border-color: var(--quipu-color-border-default);
}
.core-icon-button.mud-button-outlined-default:not(:disabled):hover {
    background-color: var(--quipu-color-bg-neutral-subtle-hover);
    border-color: var(--quipu-color-border-hover);
}
.core-icon-button.mud-button-outlined-default:not(:disabled):active {
    background-color: var(--quipu-color-bg-neutral-subtle-active);
    border-color: var(--quipu-color-border-active);
}
.core-icon-button.mud-button-outlined-default:disabled {
    color: var(--quipu-color-fg-disabled) !important;
    border-color: var(--quipu-color-border-disabled);
}

/* IconColor: colours the glyph itself, so the variant's text colour on the button does not win.
   A disabled button keeps the disabled colour. */
.core-icon-button--icon-color.mud-icon-button:not(:disabled) .mud-icon-root {
    color: var(--core-icon-button-icon-color);
}

/* Quipu 2xs: 24px button with sm icon */
.core-icon-button--size-2xs.mud-icon-button {
    width: var(--quipu-size-2xl);
    height: var(--quipu-size-2xl);
    border-radius: var(--quipu-button-borderRadius-sm);
}

/* Quipu xs: 28px button with sm icon */
.core-icon-button--size-xs.mud-icon-button {
    width: var(--quipu-size-3xl);
    height: var(--quipu-size-3xl);
    border-radius: var(--quipu-button-borderRadius-sm);
}

.core-icon-button--size-sm.mud-icon-button-size-small {
    width: var(--quipu-control-size-sm);
    height: var(--quipu-control-size-sm);
    border-radius: var(--quipu-button-borderRadius-sm);
}

.core-icon-button--size-md.mud-icon-button {
    width: var(--quipu-control-size-md);
    height: var(--quipu-control-size-md);
    border-radius: var(--quipu-button-borderRadius-md);
}

.core-icon-button--size-lg.mud-icon-button-size-large {
    width: var(--quipu-control-size-lg);
    height: var(--quipu-control-size-lg);
    border-radius: var(--quipu-button-borderRadius-lg);
}

/* Icon size overrides */
.core-icon-button--size-2xs .mud-icon-root {
    width: var(--quipu-icon-size-sm);
    height: var(--quipu-icon-size-sm);
    font-size: calc(var(--quipu-icon-size-sm)*var(--_dimension-to-font-ratio)) !important;
}

.core-icon-button--size-xs .mud-icon-root {
    width: var(--quipu-icon-size-sm);
    height: var(--quipu-icon-size-sm);
    font-size: calc(var(--quipu-icon-size-sm)*var(--_dimension-to-font-ratio)) !important;
}

.core-icon-button--size-sm .mud-icon-size-small {
    width: var(--quipu-icon-size-sm);
    height: var(--quipu-icon-size-sm);
    font-size: calc(var(--quipu-icon-size-sm)*var(--_dimension-to-font-ratio)) !important;
}

.core-icon-button--size-md .mud-icon-size-medium {
    width: var(--quipu-icon-size-md);
    height: var(--quipu-icon-size-md);
    font-size: calc(var(--quipu-icon-size-md)*var(--_dimension-to-font-ratio)) !important;
}

.core-icon-button--size-lg .mud-icon-size-large {
    width: var(--quipu-icon-size-lg);
    height: var(--quipu-icon-size-lg);
    font-size: calc(var(--quipu-icon-size-lg)*var(--_dimension-to-font-ratio)) !important;
}

.core-icon-button--size-sm .mud-icon-size-small,
.core-icon-button--size-md .mud-icon-size-medium,
.core-icon-button--size-lg .mud-icon-size-large,
.core-icon-button--size-xs .mud-icon-root,
.core-icon-button--size-2xs .mud-icon-root {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* These only have relevance in case of font-awesome icons when they are text content */
.core-icon-button--size-2xs .mud-icon-root::before,
.core-icon-button--size-xs .mud-icon-root::before,
.core-icon-button--size-md .mud-icon-size-medium::before,
.core-icon-button--size-sm .mud-icon-size-small::before,
.core-icon-button--size-lg .mud-icon-size-large::before{
    letter-spacing: 0;
    text-box: auto;
}
/* ========================================= */
/* File: CoreInputChip.razor.css */
/* ========================================= */
/* Local custom properties — set per variant and size */
.core-input-chip {
    --local-background: unset;
    --local-border: none;
    --local-box-shadow: unset;
    --local-delete-icon-color: unset;
    --local-delete-icon-color-hover: unset;
    --local-font: unset;
    --local-height: unset;
    --local-label-color: unset;
    --local-letter-spacing: unset;
    --local-padding-left: unset;
    --local-deleteIcon-hitarea: unset;
    --local-deleteIcon-size: unset;
    --local-deleteIcon-max-width: unset;
}

/* Root element */
.core-input-chip {
    display: inline-flex;
    flex-shrink: 1;
    gap: var(--quipu-control-gap-xs);
    align-items: center;
    justify-content: center;
    height: var(--local-height);
    min-height: var(--quipu-size-2xl);
    padding: 0 var(--quipu-control-padding-edgetoicon-xs) 0 var(--local-padding-left);
    border: var(--local-border);
    border-radius: var(--quipu-borderRadius-pill);
    font: var(--local-font);
    letter-spacing: var(--local-letter-spacing);
    background: var(--local-background);
    box-shadow: var(--local-box-shadow);
}

/* When there is no delete button, match right padding to left for visual balance */
.core-input-chip:not(:has(.core-input-chip__delete-button)) {
    padding-right: var(--local-padding-left);
}

/* Label */
.core-input-chip__label {
    overflow: hidden;
    flex-shrink: 1;
    min-width: 0;
    color: var(--local-label-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Delete button */
.core-input-chip__delete-button {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    max-width: var(--local-deleteIcon-max-width);
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    outline: none;
    color: var(--local-delete-icon-color);
    width: var(--local-deleteIcon-size);
    height: var(--local-deleteIcon-size);
    font-size: calc(var(--local-deleteIcon-size) * 0.79);
    line-height: 1;
}

/* Extended hit area */
.core-input-chip__delete-button::after {
    content: "";
    position: absolute;
    inset: calc(var(--local-deleteIcon-hitarea) * -1);
    display: block;
    border-radius: var(--quipu-borderRadius-pill);
}

/* Focus ring */
.core-input-chip__delete-button:focus,
.core-input-chip__delete-button:focus-visible {
    outline: var(--quipu-focus-outline);
    outline-offset: var(--quipu-focus-outline-offset);
}

/* Icon hover */
.core-input-chip__delete-button:hover {
    color: var(--local-delete-icon-color-hover);
}

/* Simulated hover via data-state (used for visual testing) */
[data-state="hover"] .core-input-chip__delete-button {
    color: var(--local-delete-icon-color-hover);
}

/* Elevated variant */
.core-input-chip.core-input-chip--variant-elevated {
    --local-box-shadow: var(--quipu-elevation-level2);
    --local-background: var(--quipu-color-bg-surface);
    --local-delete-icon-color: var(--quipu-color-bg-neutral);
    --local-delete-icon-color-hover: var(--quipu-color-bg-neutral-hover);
    --local-label-color: var(--quipu-color-fg-default);
}

/* Subtle variant */
.core-input-chip.core-input-chip--variant-subtle {
    --local-background: var(--quipu-color-bg-supportive-subtle);
    --local-delete-icon-color: var(--quipu-color-fg-supportive);
    --local-delete-icon-color-hover: var(--quipu-color-fg-supportive-hover);
    --local-label-color: var(--quipu-color-fg-supportive-strong);
}

/* Error styles */
.core-input-chip--variant-subtle.core-input-chip--error {
    --local-background: var(--quipu-color-bg-error-subtle);
    --local-label-color: var(--quipu-color-fg-error);
    --local-delete-icon-color: var(--quipu-color-fg-error);
    --local-delete-icon-color-hover: var(--quipu-color-fg-error);
}

.core-input-chip--variant-elevated.core-input-chip--error {
    --local-background: var(--quipu-color-bg-surface);
    --local-border: 1px solid var(--quipu-color-border-error);
    --local-label-color: var(--quipu-color-fg-error);
    --local-delete-icon-color: var(--quipu-color-fg-error);
    --local-delete-icon-color-hover: var(--quipu-color-fg-error);
}

/* Size: sm */
.core-input-chip.core-input-chip--size-sm {
    --local-padding-left: var(--quipu-control-padding-edgetotext-xs);
    --local-height: var(--quipu-size-2xl);
    --local-deleteIcon-hitarea: var(--quipu-padding-2xs);
    --local-deleteIcon-size: var(--quipu-icon-size-sm);
    --local-font: var(--quipu-label-sm-emphasis);
    --local-letter-spacing: var(--quipu-letterSpacing-label-sm);
}

/* Size: md */
.core-input-chip.core-input-chip--size-md {
    --local-padding-left: var(--quipu-control-padding-edgetotext-sm);
    --local-height: var(--quipu-size-4xl);
    --local-deleteIcon-hitarea: var(--quipu-padding-xs);
    --local-deleteIcon-max-width: var(--quipu-size-6xl);
    --local-deleteIcon-size: var(--quipu-icon-size-md);
    --local-font: var(--quipu-label-md-emphasis);
    --local-letter-spacing: var(--quipu-letterSpacing-label-md);
}
/* ========================================= */
/* File: CoreInputChipField.razor.css */
/* ========================================= */
.core-input-chip-field {
    --local-helpertext-letterspacing: var(--quipu-letterSpacing-label-md);
    --local-helpertext: var(--quipu-label-md-subtle);
    --local-helpertext-color: var(--quipu-color-fg-subtle);
}

/* Inner wrapper: flex layout for chips and the bare input */
.core-input-chip-field__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--quipu-control-gap-xs);
    align-items: center;
    width: 100%;
}

/* Makes the input chip field the same height as the coretextfield's input in the margin-dense case 
    padding + size of the small input chip made it 5px taller it should have been */
.core-input-chip-field div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 40px;
}

/* Bare input: no styling of its own — blends into the MudField container */
.core-input-chip-field__input {
    flex: 1 1 120px;
    min-width: 60px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

.core-input-chip-field__input::placeholder {
    color: var(--quipu-color-fg-subtle);
    opacity: 1;
}

.core-input-chip-field__input:disabled {
    cursor: not-allowed;
}

.core-input-chip-field .mud-input.mud-input-outlined .mud-input-outlined-border {
    border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-default);
}

.core-input-chip-field .mud-input.mud-disabled.mud-input-outlined .mud-input-outlined-border {
    border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-disabled);
}

.core-input-chip-field .mud-input.mud-disabled {
    background-color: var(--quipu-color-bg-disabled);
}

.core-input-chip-field .mud-input-helper-text {
    font: var(--local-helpertext);
    color: var(--local-helpertext-color);
    letter-spacing: var(--local-helpertext-letterspacing);
}

.core-input-chip-field.disabled .mud-input-helper-text {
    --local-helpertext-color: var(--quipu-color-fg-disabled);
}
/* ========================================= */
/* File: CoreLabel.razor.css */
/* ========================================= */
.core-label {
    --local-label-font: var(--quipu-label-md);
    --local-label-letterspacing: var(--quipu-letterSpacing-label-md);
    --local-label-color: var(--quipu-color-fg-default);
    --local-label-color-optional: var(--quipu-color-fg-subtle);
    --local-icon-size: var(--quipu-icon-size-md);
    --local-icon-gap: var(--quipu-control-gap-md);
    font: var(--local-label-font);
    color: var(--local-label-color);
    letter-spacing: var(--local-label-letterspacing);
    /* Centre the row, as Quipu's form-field header does for its text and tooltip. With the default stretch, the
       tooltip wrapper below sets the row height, which at Lg pushed the field ~7px further from the label text than
       without a tooltip. (Quipu also baseline-aligns label and secondary label in a nested group; that needs a
       markup change, so the secondary label can still sit up to ~1.5px off the label baseline at Lg.) */
    align-items: center;
}

.core-label--sm {
    --local-label-font: var(--quipu-label-sm);
    --local-label-letterspacing: var(--quipu-letterSpacing-label-sm);
    --local-icon-size: var(--quipu-icon-size-sm);
    --local-icon-gap: var(--quipu-control-gap-sm);
}

.core-label--lg {
    --local-label-font: var(--quipu-label-lg);
    --local-label-letterspacing: var(--quipu-letterSpacing-label-lg);
    --local-icon-size: var(--quipu-icon-size-lg);
    --local-icon-gap: var(--quipu-control-gap-lg);
}

.core-label .mud-svg-icon {
    font-size: var(--local-icon-size);
    width: var(--local-icon-size);
    height: var(--local-icon-size);
}

.core-label.disabled {
    --local-label-color: var(--quipu-color-fg-subtle);
    --local-label-color-optional: var(--quipu-color-fg-subtle);
}

.core-label.subtle {
    --local-label-color: var(--quipu-color-fg-subtle);
}

.core-label-required {
    color: var(--local-label-color-optional);
    margin-left: var(--quipu-control-gap-xs);
}

.core-label-secondary {
    font: var(--quipu-label-xs);
    color: var(--local-label-color-optional);
    letter-spacing: var(--quipu-letterSpacing-label-sm);
    margin-left: var(--quipu-control-gap-sm);
}

.core-label.disabled .mud-svg-icon {
    color: var(--quipu-color-fg-disabled);
}

.core-label .mud-tooltip-root {
    /* inline-flex so the wrapper is as tall as the icon, not the icon plus an inherited line box. */
    display: inline-flex;
    margin-left: var(--local-icon-gap);
}
/* ========================================= */
/* File: CoreLabelValue.razor.css */
/* ========================================= */
.core-label-value {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.core-label-value .core-label {
    margin-bottom: 0 !important;
    align-items: center;
}

.core-label-value .core-label .mud-tooltip-root {
    height: var(--local-icon-size);
}

.core-label-value__value {
    color: var(--quipu-color-fg-default);
    display: block;
}

.core-label-value--sm .core-label-value__value {
    font: var(--quipu-body-sm);
}

.core-label-value--md .core-label-value__value {
    font: var(--quipu-body-md);
}
/* ========================================= */
/* File: CoreLink.razor.css */
/* ========================================= */
/* Local CSS variables — resolved per size and modifier */
.core-link {
    --local-color: unset;
    --local-color-hover: unset;
    --local-color-active: unset;
    --local-font: unset;
    --local-icon-size: unset;
    --local-letter-spacing: unset;

    display: inline-flex;
    align-items: center;
    gap: var(--quipu-control-gap-xs);
    font: var(--local-font);
    color: var(--local-color) !important;
    letter-spacing: var(--local-letter-spacing);
    text-decoration: underline;
}

/* Override MudIcon dimensions to match Quipu body-proportional icon sizes */
.core-link .mud-icon-root {
    flex-shrink: 0;
    width: var(--local-icon-size);
    height: var(--local-icon-size);
    font-size: var(--local-icon-size) !important; /* !important needed to beat MudBlazor's own !important */
}

/* FA icon letter-spacing reset (prevents character spacing from inflating icon width) */
.core-link .mud-icon-root::before {
    letter-spacing: 0;
    text-box: auto;
}

/* Hover / Active */
.core-link:hover {
    color: var(--local-color-hover) !important;
}

.core-link:active {
    color: var(--local-color-active) !important;
}

/* Focus visible */
.core-link:focus-visible {
    outline: 2px solid var(--quipu-color-border-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Color variants ─────────────────────────────────────────────────────────── */

.core-link--color-main {
    --local-color: var(--quipu-color-fg-main);
    --local-color-hover: var(--quipu-color-fg-main-hover);
    --local-color-active: var(--quipu-color-fg-main-active);
}

.core-link--color-supportive {
    --local-color: var(--quipu-color-fg-supportive);
    --local-color-hover: var(--quipu-color-fg-supportive-hover);
    --local-color-active: var(--quipu-color-fg-supportive-active);
}

.core-link--color-neutral {
    --local-color: var(--quipu-color-fg-default);
    --local-color-hover: var(--quipu-color-fg-default);
    --local-color-active: var(--quipu-color-fg-default);
}

.core-link--color-inherit {
    --local-color: currentcolor;
}

/* ── Size + typography combinations ─────────────────────────────────────────── */
/* Each size sets the base font (body) and icon size. Typography modifiers override only the font. */

.core-link--size-sm {
    --local-font: var(--quipu-body-sm);
    --local-icon-size: var(--quipu-icon-size-bodySm);
    --local-letter-spacing: var(--quipu-letterSpacing-body-sm);
}

.core-link--size-sm.core-link--typography-label {
    --local-font: var(--quipu-label-sm);
    --local-letter-spacing: var(--quipu-letterSpacing-label-sm);
}

.core-link--size-sm.core-link--typography-label-subtle {
    --local-font: var(--quipu-label-sm-subtle);
    --local-letter-spacing: var(--quipu-letterSpacing-label-sm);
}

.core-link--size-md {
    --local-font: var(--quipu-body-md);
    --local-icon-size: var(--quipu-icon-size-bodyMd);
    --local-letter-spacing: var(--quipu-letterSpacing-body-md);
}

.core-link--size-md.core-link--typography-label {
    --local-font: var(--quipu-label-md);
    --local-letter-spacing: var(--quipu-letterSpacing-label-md);
}

.core-link--size-md.core-link--typography-label-subtle {
    --local-font: var(--quipu-label-md-subtle);
    --local-letter-spacing: var(--quipu-letterSpacing-label-md);
}

.core-link--size-lg {
    --local-font: var(--quipu-body-lg);
    --local-icon-size: var(--quipu-icon-size-bodyLg);
    --local-letter-spacing: var(--quipu-letterSpacing-body-lg);
}

.core-link--size-lg.core-link--typography-label {
    --local-font: var(--quipu-label-lg);
    --local-letter-spacing: var(--quipu-letterSpacing-label-lg);
}

.core-link--size-lg.core-link--typography-label-subtle {
    --local-font: var(--quipu-label-lg-subtle);
    --local-letter-spacing: var(--quipu-letterSpacing-label-lg);
}

.core-link--size-inherit {
    --local-icon-size: 1em;
    font: inherit;
}

/* ── Underline variants ─────────────────────────────────────────────────────── */

.core-link--underline-always {
    text-decoration: underline;
}

.core-link--underline-hover {
    text-decoration: none;
}

.core-link--underline-hover:hover {
    text-decoration: underline;
}

/* ── Inline modifier ────────────────────────────────────────────────────────── */

.core-link--inline {
    --local-color: currentcolor;
    --local-color-hover: currentcolor;
    --local-color-active: currentcolor;
    --local-icon-size: 1em;
    font: inherit;
    text-decoration: underline;
}

/* ── Disabled ───────────────────────────────────────────────────────────────── */
/* MudLink adds .mud-link-disabled; MudButton renders a native disabled button */

.core-link.mud-link-disabled,
.core-link:disabled {
    --local-color: var(--quipu-color-fg-disabled);
    --local-color-hover: var(--quipu-color-fg-disabled);
    --local-color-active: var(--quipu-color-fg-disabled);
    pointer-events: none;
    text-decoration: none;
}

/* ── MudButton-as-link reset (OnClick-only rendering mode) ──────────────────── */

.mud-button-text.core-link {
    min-width: unset;
    padding: 0;
    height: auto;
    font: var(--local-font);
    letter-spacing: var(--local-letter-spacing);
    text-transform: none;
    vertical-align: baseline;
    color: var(--local-color);
    background-color: transparent;
    box-shadow: none;
}

.mud-button-text.core-link:hover {
    color: var(--local-color-hover);
    background-color: transparent;
}

.mud-button-text.core-link:active {
    color: var(--local-color-active);
    background-color: transparent;
}

.core-link .mud-link-icon-start,
.core-link .mud-link-icon-end {
    margin: 0;
}

.mud-button-text.core-link .mud-button-label {
    gap: var(--quipu-control-gap-xs);
}

.mud-button-text.core-link .mud-button-icon-start,
.mud-button-text.core-link .mud-button-icon-end {
    padding: 0;
    margin: 0;
    height: auto;
}
/* ========================================= */
/* File: CoreSelectionFrontend.razor.css */
/* ========================================= */
.core-selection {
    --local-helpertext-letterspacing: var(--quipu-letterSpacing-label-md);
    --local-helpertext: var(--quipu-label-md-subtle);
    --local-helpertext-color: var(--quipu-color-fg-subtle);
    --local-border-color: var(--quipu-color-border-default);
    --local-input-font: var(--quipu-body-md);
    --local-input-height: var(--quipu-control-size-md);
    --local-input-hpadding: var(--quipu-control-padding-edgetotext-sm);
    --local-input-letterspacing: var(--quipu-letterSpacing-body-md);
    --local-input-border-radius: var(--quipu-borderRadius-sm);
    --local-icon-size: var(--quipu-icon-size-md);
}

    .core-selection .core-selection-size-sm {
        --local-input-font: var(--quipu-body-sm);
        --local-input-height: var(--quipu-control-size-sm);
        --local-input-hpadding: var(--quipu-control-padding-edgetotext-xs);
        --local-input-letterspacing: var(--quipu-letterSpacing-body-sm);
        --local-input-border-radius: var(--quipu-borderRadius-xs);
        --local-icon-size: var(--quipu-icon-size-sm);
    }

    .core-selection .core-selection-size-lg {
        --local-input-font: var(--quipu-body-lg);
        --local-input-height: var(--quipu-control-size-lg);
        --local-input-hpadding: var(--quipu-control-padding-edgetotext-md);
        --local-input-letterspacing: var(--quipu-letterSpacing-body-lg);
        --local-input-border-radius: var(--quipu-borderRadius-md);
        --local-icon-size: var(--quipu-icon-size-lg);
    }


    .core-selection .core-selection-input {
        font: var(--local-input-font);
        letter-spacing: var(--local-input-letterspacing);
        min-height: var(--local-input-height);
        padding-left: var(--local-input-hpadding);
        padding-right: var(--local-input-hpadding);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 4px;
    }

    .core-selection .core-selection-text-values {
        overflow: hidden;
        display: flex;
        flex: 1 1 0;
        gap: var(--quipu-control-gap-xs);
        align-items: center;
        min-width: 0;
    }

    .core-selection .core-selection-text-selected {
        overflow: hidden;
        display: block;
        flex-shrink: 1;
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        font: var(--local-input-font);
        letter-spacing: var(--local-input-letterspacing);
    }

    .core-selection .core-selection-text-overflow {
        display: inline-flex;
        flex-shrink: 0;
        font: var(--quipu-label-md-subtle);
        color: var(--quipu-color-fg-default);
    }

    .core-selection .core-selection-input .mud-input-root,
    .core-selection .core-selection-input input.mud-input-root {
        font: var(--local-input-font);
        letter-spacing: var(--local-input-letterspacing);
    }

    .core-selection .core-selection-input .mud-input {
        margin: 0;
        padding: 0;
    }

    .core-selection .core-selection-input .mud-input .mud-input-slot {
        padding: 0;
    }

    .core-selection .core-selection-input .mud-icon-button {
        border-radius: var(--quipu-borderRadius-xs);
        width: var(--local-input-height);
        height: var(--local-input-height);
        padding: 0;
    }

    .core-selection .core-selection-input .mud-icon-button:last-child {
        margin-right: calc(var(--local-input-hpadding) * -1);
    }

    .core-selection .core-selection-input .mud-icon-button .mud-icon-root,
    .core-selection .core-selection-input .mud-input-adornment .mud-icon-root {
        width: calc(var(--local-icon-size) * 0.8);
        height: calc(var(--local-icon-size) * 0.8);
        font-size: calc(var(--local-icon-size) * 0.8);
    }

    .core-selection .core-selection-input.mud-paper-outlined {
        border: var(--quipu-borderWidth-thin) solid var(--local-border-color);
        border-radius: var(--local-input-border-radius);
        background-color: var(--quipu-color-bg-default);
        transition: border-color 0.15s ease;
    }

    .core-selection .core-selection-input.mud-paper-outlined:hover {
        --local-border-color: var(--quipu-color-border-hover);
    }

    .core-selection.focused .core-selection-input.mud-paper-outlined {
        --local-border-color: transparent;
        outline: var(--quipu-borderWidth-thick) solid var(--quipu-color-border-focus);
        outline-offset: -1px;
    }

    .core-selection.focused.error .core-selection-input.mud-paper-outlined {
        outline-color: var(--quipu-color-border-error);
    }

    .core-selection .core-selection-input [tabindex="0"]:focus {
        outline: none;
    }

    .core-selection:has([tabindex="0"]:focus) .core-selection-input.mud-paper-outlined,
    .core-selection:has(input:focus) .core-selection-input.mud-paper-outlined {
        --local-border-color: transparent;
        outline: var(--quipu-borderWidth-thick) solid var(--quipu-color-border-focus);
        outline-offset: -1px;
    }

    .core-selection.error .core-selection-input.mud-paper-outlined {
        --local-border-color: var(--quipu-color-border-error);
    }

    .core-selection.error:has([tabindex="0"]:focus) .core-selection-input.mud-paper-outlined,
    .core-selection.error:has(input:focus) .core-selection-input.mud-paper-outlined {
        --local-border-color: transparent;
        outline: var(--quipu-borderWidth-thick) solid var(--quipu-color-border-error);
        outline-offset: -1px;
    }

    .core-selection.disabled .core-selection-input.mud-paper-outlined {
        --local-border-color: var(--quipu-color-border-disabled);
        background-color: var(--quipu-color-bg-disabled);
        color: var(--quipu-color-fg-subtle);
    }

    .core-selection.disabled .mud-input > input.mud-input-root,
    .core-selection.disabled .mud-input.mud-disabled > input.mud-input-root {
        color: var(--quipu-color-fg-subtle);
    }

    .core-selection .mud-input > input.mud-input-root::placeholder,
    .core-selection .mud-input.mud-disabled > input.mud-input-root::placeholder {
        color: var(--quipu-color-fg-subtle);
        opacity: 1;
    }

    /* Quipu Select/Autocomplete (18.2+, #2451): max-width: max(trigger, --quipu-dropdown-width-lg). MudBlazor's Adaptive
       mode sets an inline min-width equal to the input, and min-width wins over max-width, so this one declaration gives
       the same result. The fallback is the token's value (25rem); our token snapshot predates it. */
    .core-selection-popover--fit-content {
        max-width: var(--quipu-dropdown-width-lg, 25rem);
    }

    .core-selection-dropdown.mud-paper-outlined {
        border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-default);
        border-radius: var(--quipu-borderRadius-md);
        box-shadow: var(--quipu-shadow-md);
        background-color: var(--quipu-color-bg-default);
    }

    .core-selection-dropdown .mud-list-item {
        border-radius: var(--quipu-borderRadius-sm);
    }

    .core-selection-dropdown .mud-list-item:hover {
        background-color: var(--quipu-color-bg-neutral-subtle-hover);
    }

    .core-selection-dropdown .mud-list-item.mud-list-item-disabled {
        opacity: 1;
        color: var(--quipu-color-fg-disabled);
    }

    .core-selection-dropdown .mud-list-item.core-selection-option-active,
    .core-selection-dropdown .mud-list-item.core-selection-option-active:hover {
        background-color: var(--quipu-color-bg-neutral-subtle-hover) !important;
    }

    .core-selection-dropdown .mud-list-item.core-selection-option-selected,
    .core-selection-dropdown .mud-list-item.core-selection-option-selected:hover {
        background-color: var(--quipu-color-bg-neutral-subtle-active) !important;
    }

    .core-selection .core-selection-error {
        /* fg-error, not fg-danger: the latter is not a Quipu token, so the variable resolved to nothing
           and the message inherited the ordinary text colour instead of rendering red. */
        --local-helpertext-color: var(--quipu-color-fg-error);
        margin-top: var(--quipu-control-gap-xs);
        padding-left: var(--local-input-hpadding);
        padding-right: var(--local-input-hpadding);
        font: var(--local-helpertext);
        color: var(--local-helpertext-color);
        letter-spacing: var(--local-helpertext-letterspacing);
    }

    .core-selection.disabled .core-selection-error {
        --local-helpertext-color: var(--quipu-color-fg-disabled);
    }

    .core-selection-helpertext {
        margin-top: var(--quipu-control-gap-xs);
        padding-left: var(--local-input-hpadding);
        padding-right: var(--local-input-hpadding);
        font: var(--local-helpertext);
        color: var(--local-helpertext-color);
        letter-spacing: var(--local-helpertext-letterspacing);
        display: block;
    }

    /* Validation=Error without a message still has to read as an error, so the hint turns red like MudTextField's.
       Only then: with an error message shown, a red hint under it would read as a second error. */
    .core-selection.error:not(:has(.core-selection-error)) .core-selection-helpertext {
        --local-helpertext-color: var(--quipu-color-fg-error);
    }

    .core-selection.disabled .core-selection-helpertext {
        --local-helpertext-color: var(--quipu-color-fg-disabled);
    }

    /* Small Spacing — reduces height and horizontal padding without affecting font size */
    .core-selection.spacing-sm {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-sm) * 0.75);
        --local-input-height: calc(var(--quipu-control-size-md) * 0.85);
    }

    .core-selection.spacing-sm .core-selection-input {
        height: var(--local-input-height) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .core-selection.spacing-sm .core-selection-input .mud-input > input.mud-input-root,
    .core-selection.spacing-sm .core-selection-input .mud-input-slot > input.mud-input-root {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .core-selection.spacing-sm .core-selection-size-sm {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-xs) * 0.75);
        --local-input-height: calc(var(--quipu-control-size-sm) * 0.85);
    }

    .core-selection.spacing-sm .core-selection-input.core-selection-size-sm {
        height: var(--local-input-height) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .core-selection.spacing-sm .core-selection-size-lg {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-md) * 0.75);
        --local-input-height: calc(var(--quipu-control-size-lg) * 0.85);
    }

    .core-selection.spacing-sm .core-selection-size-lg.core-selection-input {
        height: var(--local-input-height) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .core-selection.spacing-sm .mud-list-item {
        min-height: 32px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
/* ========================================= */
/* File: CoreSplitter.razor.css */
/* ========================================= */
.core-splitter {
    width: 100%;
    height: 100%;
    /* Token-based spacing around the divider. Applied as a flex gap so the panels keep
       their full size (no content is eaten by padding). Works for both orientations. */
    gap: var(--quipu-gap-md);
}

.core-splitter__divider {
    background-color: transparent;
    position: relative;
}

.core-splitter__divider::after {
    content: '';
    position: absolute;
    background-color: var(--quipu-color-border-subtle);
    transition: background-color 120ms ease;
    pointer-events: none;
}

.core-splitter__divider--horizontal::after {
    top: 8px;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
}

.core-splitter__divider--vertical::after {
    left: 8px;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
}

.core-splitter__divider:hover::after {
    background-color: var(--quipu-color-border-hover);
}

.core-splitter__divider--disabled {
    pointer-events: none;
}

.core-splitter__divider--disabled::after {
    background-color: var(--quipu-color-border-disabled);
}
/* ========================================= */
/* File: CoreStack.razor.css */
/* ========================================= */
.core-stack {
    --local-gap: unset;
    display: flex;
    gap: var(--local-gap);
    margin: 0;
    padding: 0;
}

/* Space variants */
.core-stack--space-none {
    --local-gap: 0;
}

.core-stack--space-xxs {
    --local-gap: var(--quipu-gap-2xs);
}

.core-stack--space-xs {
    --local-gap: var(--quipu-gap-xs);
}

.core-stack--space-sm {
    --local-gap: var(--quipu-gap-sm);
}

.core-stack--space-md {
    --local-gap: var(--quipu-gap-md);
}

.core-stack--space-lg {
    --local-gap: var(--quipu-gap-lg);
}

.core-stack--space-xl {
    --local-gap: var(--quipu-gap-xl);
}

.core-stack--space-xxl {
    --local-gap: var(--quipu-gap-2xl);
}

.core-stack--space-xxxl {
    --local-gap: var(--quipu-gap-3xl);
}

/* Direction variants */
.core-stack--direction-horizontal {
    flex-direction: row;
}

.core-stack--direction-vertical {
    flex-direction: column;
}

/* Alignment variants */
.core-stack--alignment-flex-start {
    align-items: flex-start;
}

.core-stack--alignment-flex-end {
    align-items: flex-end;
}

.core-stack--alignment-center {
    align-items: center;
}

.core-stack--alignment-stretch {
    align-items: stretch;
}

.core-stack--alignment-baseline {
    align-items: baseline;
}

/* Wrap variants */
.core-stack--wrap-no-wrap {
    flex-wrap: nowrap;
}

.core-stack--wrap-wrap {
    flex-wrap: wrap;
}

/* Direct list item children should display as block */
.core-stack > li {
    display: block;
}
/* ========================================= */
/* File: CoreSwitchList.razor.css */
/* ========================================= */
.core-switch-list {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.core-switch-list__panel {
    flex: 1;
}

.core-switch-list__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 0 8px;
}

/* Fix filter header cell positioning in dense MudDataGrid with sticky headers */
.core-switch-list .mud-table-dense .filter-header-cell {
    top: 35px;
}
/* ========================================= */
/* File: CoreTabs.razor.css */
/* ========================================= */
.core-tabs {
    gap: var(--quipu-control-gap-xl);
}

.core-tabs__tabbar .mud-tabs-tabbar-content {
    box-shadow: inset 0 calc(var(--quipu-borderWidth-thin) * -1) 0 0 var(--quipu-color-border-subtle);
}

.core-tabs__tabbar .mud-tabs-tabbar-inner {
    min-height: 40px;
}

.core-tabs__tabbar .mud-tabs-header.mud-tabs-header-after {
    display: flex;
    align-items: center;
    padding-left: var(--quipu-padding-2xl);
    white-space: nowrap;
}

.core-tabs__tabbar .mud-tab {
    font-family: var(--quipu-fontFamily-body);
    font-size: var(--quipu-fontSize-label-md);
    font-weight: var(--quipu-fontWeight-labelSubtle);
    font-style: normal;
    line-height: var(--quipu-lineHeight-label-md);
    color: var(--quipu-color-fg-default);
    text-align: center;
    letter-spacing: var(--quipu-letterSpacing-label-md);
    text-transform: none;
    min-height: 40px;
}

.core-tabs__tabbar .mud-tab.mud-tab-active {
    font-weight: var(--quipu-fontWeight-labelEmphasis);
    color: var(--quipu-color-fg-default);
}

.core-tabs__tabbar .mud-tab:hover,
.core-tabs__tabbar .mud-tab.mud-tab-active:hover {
    background-color: var(--quipu-tabs-color-bg-hover);
}

.core-tabs__tabbar .mud-tab.mud-disabled {
    color: var(--quipu-color-fg-disabled);
}

.core-tabs__tabbar :has(> .mud-tab.mud-disabled) {
    cursor: not-allowed;
}

.core-tabs__tabbar .mud-tab-slider {
    background: var(--quipu-color-graphic-info);
}

.core-tabs__tabbar--spacing-sm .mud-tabs-tabbar-inner {
    min-height: 32px;
}

.core-tabs__tabbar--spacing-sm .mud-tab {
    min-height: 32px;
}

.core-tabs__tabbar--spacing-xs .mud-tabs-tabbar-inner {
    min-height: 28px;
}

.core-tabs__tabbar--spacing-xs .mud-tab {
    min-height: 28px;
}

/* The gap between the tab bar and the panel is part of the tabstrip footprint, so the compact
   variants scale it down too. A 28px bar with the default 14px gap below it is still a 42px tabstrip.
   (14px, not 16px: the Sims theme sets the root font size to 14px via `--sims-root-font-size`, and
   these tokens are rem. Under a theme that leaves the root at 16px the numbers below scale up.)

   The token names deliberately do NOT track the variant names: Md uses gap-xl, Sm uses gap-md, Xs uses
   gap-xs. The variants halve the gap — 14px / 7px / 3.5px at the app's 14px root — and gap-md (0.5rem)
   is the token that lands on half of gap-xl (1rem). The same-named gap-sm is 0.375rem = 5.25px, which
   breaks that progression. Do not "fix" `--spacing-sm` to `--quipu-control-gap-sm` on naming grounds. */
.core-tabs--spacing-sm {
    gap: var(--quipu-control-gap-md);
}

.core-tabs--spacing-xs {
    gap: var(--quipu-control-gap-xs);
}

.fill-no-scroll {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* ========================================= */
/* File: CoreTag.razor.css */
/* ========================================= */
.mud-chip.core-tag {
    align-items: center;
    justify-content: center;
    gap: var(--local-gap);
    height: var(--local-height);
    padding-right: var(--local-padding);
    padding-left: var(--local-padding);
    border-radius: var(--local-border-radius);
    font: var(--local-font);
    margin: 0;
}

.mud-chip.core-tag--size-sm {
    --local-height: var(--quipu-size-lg);
    --local-padding: var(--quipu-control-padding-edgetotext-3xs);
    --local-border-radius: var(--quipu-borderRadius-xs);
    --local-gap: var(--quipu-control-gap-2xs);
    --local-font: var(--quipu-label-xs);
    --local-icon-size: var(--quipu-icon-size-labelXs);
}

.mud-chip.core-tag--size-md {
    --local-height: var(--quipu-size-xl);
    --local-padding: var(--quipu-control-padding-edgetotext-2xs);
    --local-border-radius: var(--quipu-borderRadius-sm);
    --local-gap: var(--quipu-control-gap-2xs);
    --local-font: var(--quipu-label-sm);
    --local-icon-size: var(--quipu-icon-size-labelSm);
}

.mud-chip.core-tag--size-lg {
    --local-height: var(--quipu-size-2xl);
    --local-padding: var(--quipu-control-padding-edgetotext-xs);
    --local-border-radius: var(--quipu-borderRadius-sm);
    --local-gap: var(--quipu-control-gap-xs);
    --local-font: var(--quipu-label-md);
    --local-icon-size: var(--quipu-icon-size-labelMd);
}

.core-tag .mud-chip-icon {
    height: var(--local-icon-size);
    margin-left: -2px;
    margin-right: 0;
}

.core-tag.mud-chip.core-tag--icon-only {
    padding-left: 0;
    padding-right: 0;
    width: var(--local-height);
    gap: 0;
}

.core-tag.mud-chip.core-tag--icon-only .mud-chip-icon {
    margin-left: 0;
}

/* Color classes */
.core-tag--color-neutral {
    color: var(--quipu-color-fg-strong);
}

.core-tag--color-assistant {
    color: var(--quipu-color-fg-assistant-strong);
}

.core-tag--color-info {
    color: var(--quipu-color-fg-info-strong);
}

.core-tag--color-success {
    color: var(--quipu-color-fg-success-strong);
}

.core-tag--color-warning {
    color: var(--quipu-color-fg-warning-strong);
}

.core-tag--color-error {
    color: var(--quipu-color-fg-error-strong);
}

/* Variant classes */
.core-tag--variant-strong {
    color: var(--quipu-color-fg-inverse);
}

    .core-tag--variant-strong.core-tag--color-neutral {
        background-color: var(--quipu-color-bg-neutral-strong);
    }

    .core-tag--variant-strong.core-tag--color-assistant {
        background-color: var(--quipu-color-bg-assistant);
    }

    .core-tag--variant-strong.core-tag--color-info {
        background-color: var(--quipu-color-bg-info);
    }

    .core-tag--variant-strong.core-tag--color-success {
        background-color: var(--quipu-color-bg-success);
    }

    .core-tag--variant-strong.core-tag--color-warning {
        background-color: var(--quipu-color-bg-warning);
    }

    .core-tag--variant-strong.core-tag--color-error {
        background-color: var(--quipu-color-bg-error);
    }

.core-tag--variant-subtle.core-tag--color-neutral {
    background-color: var(--quipu-color-bg-neutral-subtle);
}

.core-tag--variant-subtle.core-tag--color-assistant {
    background-color: var(--quipu-color-bg-assistant-subtle);
}

.core-tag--variant-subtle.core-tag--color-info {
    background-color: var(--quipu-color-bg-info-subtle);
}

.core-tag--variant-subtle.core-tag--color-success {
    background-color: var(--quipu-color-bg-success-subtle);
}

.core-tag--variant-subtle.core-tag--color-warning {
    background-color: var(--quipu-color-bg-warning-subtle);
}

.core-tag--variant-subtle.core-tag--color-error {
    background-color: var(--quipu-color-bg-error-subtle);
}
/* ========================================= */
/* File: CoreTextArea.razor.css */
/* ========================================= */
.core-textarea {
    --local-helpertext-letterspacing: var(--quipu-letterSpacing-label-md);
    --local-helpertext: var(--quipu-label-md-subtle);
    --local-helpertext-color: var(--quipu-color-fg-subtle);
    --local-input-font: var(--quipu-body-md);
    --local-input-hpadding: var(--quipu-control-padding-edgetotext-sm);
    --local-input-letterspacing: var(--quipu-letterSpacing-body-md);
    --local-input-border-radius: var(--quipu-borderRadius-sm);
}

    .core-textarea.size-sm {
        --local-input-font: var(--quipu-body-sm);
        --local-input-hpadding: var(--quipu-control-padding-edgetotext-xs);
        --local-input-letterspacing: var(--quipu-letterSpacing-body-sm);
        --local-input-border-radius: var(--quipu-borderRadius-xs);
    }

    .core-textarea.size-lg {
        --local-input-font: var(--quipu-body-lg);
        --local-input-hpadding: var(--quipu-control-padding-edgetotext-md);
        --local-input-letterspacing: var(--quipu-letterSpacing-body-lg);
        --local-input-border-radius: var(--quipu-borderRadius-md);
    }

    .core-textarea .mud-input > textarea.mud-input-root::placeholder,
    .core-textarea .mud-input.mud-disabled > textarea.mud-input-root::placeholder {
        color: var(--quipu-color-fg-subtle);
        opacity: 1;
    }

    .core-textarea .mud-input > textarea.mud-input-root {
        font: var(--local-input-font);
        letter-spacing: var(--local-input-letterspacing);
    }

    .core-textarea .mud-input.mud-input-outlined {
        border-radius: var(--local-input-border-radius);
    }

    .core-textarea .mud-input.mud-input-outlined .mud-input-outlined-border {
        border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-default);
        border-radius: var(--local-input-border-radius);
    }

    .core-textarea .mud-input.mud-disabled.mud-input-outlined .mud-input-outlined-border {
        border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-disabled);
    }

    .core-textarea .mud-input.mud-disabled > textarea.mud-input-root {
        background-color: var(--quipu-color-bg-disabled);
        mask-image: none;
    }

    .core-textarea .mud-input.mud-input-outlined > textarea.mud-input-root-outlined,
    .core-textarea .mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined {
        padding-left: var(--local-input-hpadding);
        padding-right: var(--local-input-hpadding);
    }

    .core-textarea .mud-input-helper-text {
        font: var(--local-helpertext);
        color: var(--local-helpertext-color);
        letter-spacing: var(--local-helpertext-letterspacing);
    }

    .core-textarea.disabled .mud-input-helper-text {
        --local-helpertext-color: var(--quipu-color-fg-disabled);
    }

    .core-textarea .mud-input.mud-input-outlined:hover:not(:focus-within):not(.mud-input-error):not(.mud-disabled) .mud-input-outlined-border {
        border-color: var(--quipu-color-border-hover);
    }

    .core-textarea .mud-input.mud-input-outlined:focus-within {
        outline: var(--quipu-borderWidth-thick) solid var(--quipu-color-border-focus);
        border-radius: var(--mud-default-borderradius);
    }

    .core-textarea .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
        border-color: transparent !important;
    }

    .core-textarea .mud-input.mud-input-outlined:focus-within:hover:not(.mud-input-error) .mud-input-outlined-border {
        border-color: var(--quipu-color-border-hover) !important;
    }

    .core-textarea .mud-input.mud-input-outlined.mud-input-error:focus-within:hover .mud-input-outlined-border {
        border-color: var(--quipu-color-border-error-hover) !important;
    }

    .core-textarea .mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
        border-color: var(--quipu-color-border-error);
    }

    .core-textarea .mud-input.mud-input-outlined.mud-input-error:focus-within {
        outline-color: var(--quipu-color-border-error);
    }

    .core-textarea .mud-input-helper-text.mud-input-error {
        --local-helpertext-color: var(--quipu-color-fg-error);
    }

    /* Small Spacing — reduces horizontal padding without affecting font size */
    .core-textarea.spacing-sm {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-sm) * 0.75);
    }

    .core-textarea.spacing-sm.size-sm {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-xs) * 0.75);
    }

    .core-textarea.spacing-sm.size-lg {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-md) * 0.75);
    }

    .core-textarea.spacing-sm .mud-input-control {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .core-textarea.spacing-sm .mud-input > textarea.mud-input-root {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .core-textarea.spacing-sm.size-sm .mud-input > textarea.mud-input-root {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
/* ========================================= */
/* File: CoreTextField.razor.css */
/* ========================================= */
.core-textfield {
    --local-helpertext-letterspacing: var(--quipu-letterSpacing-label-md);
    --local-helpertext: var(--quipu-label-md-subtle);
    --local-helpertext-color: var(--quipu-color-fg-subtle);
    --local-input-font: var(--quipu-body-md);
    --local-input-height: var(--quipu-control-size-md);
    --local-input-hpadding: var(--quipu-control-padding-edgetotext-sm);
    --local-input-letterspacing: var(--quipu-letterSpacing-body-md);
    --local-input-border-radius: var(--quipu-borderRadius-sm);
}

    .core-textfield.size-sm {
        --local-input-font: var(--quipu-body-sm);
        --local-input-height: var(--quipu-control-size-sm);
        --local-input-hpadding: var(--quipu-control-padding-edgetotext-xs);
        --local-input-letterspacing: var(--quipu-letterSpacing-body-sm);
        --local-input-border-radius: var(--quipu-borderRadius-xs);
    }

    .core-textfield.size-lg {
        --local-input-font: var(--quipu-body-lg);
        --local-input-height: var(--quipu-control-size-lg);
        --local-input-hpadding: var(--quipu-control-padding-edgetotext-md);
        --local-input-letterspacing: var(--quipu-letterSpacing-body-lg);
        --local-input-border-radius: var(--quipu-borderRadius-md);
    }

    .core-textfield .mud-input > input.mud-input-root::placeholder,
    .core-textfield .mud-input.mud-disabled > input.mud-input-root::placeholder {
        color: var(--quipu-color-fg-subtle);
        opacity: 1;
    }

    .core-textfield .mud-input.mud-input-outlined > input.mud-input-root-outlined,
    .core-textfield .mud-input.mud-input-outlined > div.mud-input-slot.mud-input-root-outlined {
        padding-left: var(--local-input-hpadding);
        padding-right: var(--local-input-hpadding);
    }

    .core-textfield .mud-input > input.mud-input-root {
        font: var(--local-input-font);
        letter-spacing: var(--local-input-letterspacing);
    }

    .core-textfield .mud-input.mud-input-outlined {
        height: var(--local-input-height);
        border-radius: var(--local-input-border-radius);
    }

    .core-textfield .mud-input.mud-input-outlined .mud-input-outlined-border {
        border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-default);
        border-radius: var(--local-input-border-radius);
    }

    .core-textfield .mud-input.mud-disabled.mud-input-outlined .mud-input-outlined-border {
        border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-disabled);
    }

    .core-textfield .mud-input.mud-input-outlined.mud-disabled {
        background-color: var(--quipu-color-bg-disabled);
    }

    .core-textfield .mud-input-helper-text {
        font: var(--local-helpertext);
        color: var(--local-helpertext-color);
        letter-spacing: var(--local-helpertext-letterspacing);
    }

    .core-textfield.disabled .mud-input-helper-text {
        --local-helpertext-color: var(--quipu-color-fg-disabled);
    }

    .core-textfield .mud-input.mud-input-outlined:hover:not(:focus-within):not(.mud-input-error):not(.mud-disabled) .mud-input-outlined-border {
        border-color: var(--quipu-color-border-hover);
    }

    .core-textfield .mud-input.mud-input-outlined:focus-within {
        outline: var(--quipu-borderWidth-thick) solid var(--quipu-color-border-focus);
        border-radius: var(--mud-default-borderradius);
    }

    .core-textfield .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
        border-color: transparent !important;
    }

    .core-textfield .mud-input.mud-input-outlined:focus-within:hover:not(.mud-input-error) .mud-input-outlined-border {
        border-color: var(--quipu-color-border-hover) !important;
    }

    .core-textfield .mud-input.mud-input-outlined.mud-input-error:focus-within:hover .mud-input-outlined-border {
        border-color: var(--quipu-color-border-error-hover) !important;
    }

    .core-textfield .mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border {
        border-color: var(--quipu-color-border-error);
    }

    .core-textfield .mud-input.mud-input-outlined.mud-input-error:focus-within {
        outline-color: var(--quipu-color-border-error);
    }

    .core-textfield .mud-input-helper-text.mud-input-error {
        --local-helpertext-color: var(--quipu-color-fg-error);
    }

    .core-textfield.spacing-sm {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-sm) * 0.75);
    }

    .core-textfield.spacing-sm.size-sm {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-xs) * 0.75);
    }

    .core-textfield.spacing-sm.size-lg {
        --local-input-hpadding: calc(var(--quipu-control-padding-edgetotext-md) * 0.75);
    }
    .core-textfield.spacing-sm .mud-input-control {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .core-textfield.spacing-sm .mud-input.mud-input-outlined {
        height: calc(var(--local-input-height) * 0.85);
        display: flex;
        align-items: center;
    }

    .core-textfield.spacing-sm .mud-input > input.mud-input-root {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
/* ========================================= */
/* File: CoreTextFieldFilter.razor.css */
/* ========================================= */
/*
 * Quipu design-system styling for CoreTextFieldFilter.
 *
 * All colors, border widths, and radii bind to Quipu CSS custom properties
 * (--quipu-color-border-*, --quipu-borderWidth-*, --quipu-borderRadius-*),
 * matching the treatment used by CoreTextField.razor.css and
 * CoreSelectionFrontend.razor.css so a CoreTextFieldFilter renders identically
 * to a sibling CoreSelect on a filter row.
 *
 * Two MudBlazor gaps were closed here:
 *   1. `mud-input-control-margin-dense` adds a 4px top+bottom margin (with
 *      !important on MudBlazor's side, so we need !important to win — same
 *      technique as `.core-textfield.spacing-sm .mud-input-control` in
 *      CoreTextField.razor.css).
 *   2. MudBlazor's outlined variant paints the border on an inner <fieldset>
 *      that spans `.mud-input-outlined`. Padding that element by 1px
 *      vertically stretches the fieldset to 42px, matching CoreSelect's
 *      `mud-paper-outlined` outer 1px border box.
 */

.core-text-field-filter {
    margin: 0 !important;
}

.core-text-field-filter .mud-input-outlined {
    padding: 1px 0;
    box-sizing: content-box;
    border-radius: var(--quipu-borderRadius-sm);
}

.core-text-field-filter .mud-input-outlined .mud-input-outlined-border {
    border: var(--quipu-borderWidth-thin) solid var(--quipu-color-border-default);
    border-radius: var(--quipu-borderRadius-sm);
}

.core-text-field-filter .mud-input-outlined:hover:not(:focus-within):not(.mud-input-error):not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--quipu-color-border-hover);
}

.core-text-field-filter .mud-input-outlined:focus-within {
    outline: var(--quipu-borderWidth-thick) solid var(--quipu-color-border-focus);
    outline-offset: -1px;
    border-radius: var(--quipu-borderRadius-sm);
}

.core-text-field-filter .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: transparent !important;
}

.core-text-field-filter .mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: var(--quipu-color-border-error);
}

.core-text-field-filter .mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--quipu-color-border-disabled);
}

.core-text-field-filter .mud-input-outlined.mud-disabled {
    background-color: var(--quipu-color-bg-disabled);
}
/* ========================================= */
/* File: CoreTooltip.razor.css */
/* ========================================= */
.core-tooltip-content.mud-tooltip {
    background-color: var(--quipu-color-bg-neutral-strong);
    padding: var(--quipu-padding-xs);
    border-radius: var(--quipu-borderRadius-xs);
    font: var(--quipu-label-sm-subtle);
    color: var(--quipu-color-fg-inverse);
    letter-spacing: var(--quipu-letterSpacing-label-sm);
    box-shadow: #0000003d 0 3px 8px;
}

    .core-tooltip-content.mud-tooltip.mud-tooltip-arrow::after {
        border-color: var(--quipu-color-bg-neutral-strong) transparent transparent transparent;
    }
/* ========================================= */
/* File: CoreTreeView.razor.css */
/* ========================================= */
.core-tree-view__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--quipu-gap-xs);
}

.core-tree-view__node {
    display: flex;
    align-items: center;
    gap: var(--quipu-gap-xs);
}

.core-tree-view__node-icon,
.core-tree-view__trailing-icon {
    flex-shrink: 0;
}

/* The trailing icon is a hint next to the label, so it is smaller and lighter than the label and
   keeps some distance from it. TrailingIconColor overrides the colour through an inline style. */
.core-tree-view .core-tree-view__trailing-icon {
    color: var(--quipu-color-fg-subtle);
    font-size: var(--quipu-icon-size-sm);
    margin-inline-start: var(--quipu-gap-md);
}

.core-tree-view__node-text {
    display: flex;
    flex-direction: column;
}

.core-tree-view__segment--italic {
    font-style: italic;
}

.core-tree-view__node-subtitle {
    font-style: italic;
    font-size: var(--quipu-fontSize-body-sm);
    color: var(--quipu-color-fg-subtle);
}

.core-tree-view__record-actions {
    display: flex;
    align-items: center;
    gap: var(--quipu-gap-xs);
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

/* MudTreeViewItem puts its Class on the li that also holds the children, so a rule that checks a
   node's own class on its li MUST use the child combinator to stay off the nested nodes. */
.core-tree-view--hover-supportive .mud-treeview-item-content:hover {
    background-color: var(--quipu-color-bg-supportive-subtle);
}

.core-tree-view--hover-main .mud-treeview-item-content:hover {
    background-color: var(--quipu-color-bg-main-subtle);
}

.core-tree-view .mud-treeview-item:not(.core-tree-view__item--static) > .mud-treeview-item-content:hover .core-tree-view__node-text {
    text-decoration: underline;
}

.mud-treeview-item-content:hover .core-tree-view__record-actions,
.core-tree-view__record-actions:focus-within {
    opacity: 1;
}
/* ========================================= */
/* File: CoreTypography.razor.css */
/* ========================================= */
/* Default style */
.core-text {
    margin: 0;
    word-wrap: break-word;
}

/* Heading variants */
.core-text--variant-heading-2-xl {
    font: var(--quipu-heading-2xl);
    letter-spacing: var(--quipu-letterSpacing-heading-2xl);
}

.core-text--variant-heading-xl {
    font: var(--quipu-heading-xl);
    letter-spacing: var(--quipu-letterSpacing-heading-xl);
}

.core-text--variant-heading-lg {
    font: var(--quipu-heading-lg);
    letter-spacing: var(--quipu-letterSpacing-heading-lg);
}

.core-text--variant-heading-md {
    font: var(--quipu-heading-md);
    letter-spacing: var(--quipu-letterSpacing-heading-md);
}

.core-text--variant-heading-sm {
    font: var(--quipu-heading-sm);
    letter-spacing: var(--quipu-letterSpacing-heading-sm);
}

.core-text--variant-heading-xs {
    font: var(--quipu-heading-xs);
    letter-spacing: var(--quipu-letterSpacing-heading-xs);
}

/* Label variants - Large */
.core-text--variant-label-lg-emphasis {
    font: var(--quipu-label-lg-emphasis);
    letter-spacing: var(--quipu-letterSpacing-label-lg);
}

.core-text--variant-label-lg {
    font: var(--quipu-label-lg);
    letter-spacing: var(--quipu-letterSpacing-label-lg);
}

.core-text--variant-label-lg-subtle {
    font: var(--quipu-label-lg-subtle);
    letter-spacing: var(--quipu-letterSpacing-label-lg);
}

/* Label variants - Medium */
.core-text--variant-label-md-emphasis {
    font: var(--quipu-label-md-emphasis);
    letter-spacing: var(--quipu-letterSpacing-label-md);
}

.core-text--variant-label-md {
    font: var(--quipu-label-md);
    letter-spacing: var(--quipu-letterSpacing-label-md);
}

.core-text--variant-label-md-subtle {
    font: var(--quipu-label-md-subtle);
    letter-spacing: var(--quipu-letterSpacing-label-md);
}

/* Label variants - Small */
.core-text--variant-label-sm-emphasis {
    font: var(--quipu-label-sm-emphasis);
    letter-spacing: var(--quipu-letterSpacing-label-sm);
}

.core-text--variant-label-sm {
    font: var(--quipu-label-sm);
    letter-spacing: var(--quipu-letterSpacing-label-sm);
}

.core-text--variant-label-sm-subtle {
    font: var(--quipu-label-sm-subtle);
    letter-spacing: var(--quipu-letterSpacing-label-sm);
}

/* Label variants - Extra small */
.core-text--variant-label-xs-emphasis {
    font: var(--quipu-label-xs-emphasis);
}

.core-text--variant-label-xs {
    font: var(--quipu-label-xs);
}

/* Body variants */
.core-text--variant-body-lg {
    font: var(--quipu-body-lg);
    letter-spacing: var(--quipu-letterSpacing-body-lg);
}

.core-text--variant-body-md {
    font: var(--quipu-body-md);
    letter-spacing: var(--quipu-letterSpacing-body-md);
}

.core-text--variant-body-sm {
    font: var(--quipu-body-sm);
    letter-spacing: var(--quipu-letterSpacing-body-sm);
}

/* Color classes */
.core-text--color-default {
    color: var(--quipu-color-fg-default);
}

.core-text--color-inverse {
    color: var(--quipu-color-fg-inverse);
}

.core-text--color-subtle {
    color: var(--quipu-color-fg-subtle);
}

.core-text--color-strong {
    color: var(--quipu-color-fg-strong);
}

.core-text--color-disabled {
    color: var(--quipu-color-fg-disabled);
}

.core-text--color-main {
    color: var(--quipu-color-fg-main);
}

.core-text--color-assistant {
    color: var(--quipu-color-fg-assistant);
}

.core-text--color-assistant-strong {
    color: var(--quipu-color-fg-assistant-strong);
}

.core-text--color-info {
    color: var(--quipu-color-fg-info-strong);
}

.core-text--color-supportive {
    color: var(--quipu-color-fg-supportive);
}

.core-text--color-supportive-strong {
    color: var(--quipu-color-fg-supportive-strong);
}

.core-text--color-warning {
    color: var(--quipu-color-fg-warning);
}

.core-text--color-warning-strong {
    color: var(--quipu-color-fg-warning-strong);
}

.core-text--color-error {
    color: var(--quipu-color-fg-error);
}

.core-text--color-error-strong {
    color: var(--quipu-color-fg-error-strong);
}

.core-text--color-success {
    color: var(--quipu-color-fg-success);
}

.core-text--color-success-strong {
    color: var(--quipu-color-fg-success-strong);
}

/* Alignment classes */
.core-text--align-inherit {
    text-align: inherit;
}

.core-text--align-left {
    text-align: left;
}

.core-text--align-center {
    text-align: center;
}

.core-text--align-right {
    text-align: right;
}

.core-text--align-justify {
    text-align: justify;
}

/* Text formatting modes */
.core-text--text-formatting-standard {
    white-space: normal;
}

.core-text--text-formatting-preserve-line-breaks {
    white-space: pre-line;
}

.core-text--text-formatting-preserve-all {
    white-space: pre-wrap;
}

/* Modifiers */
.core-text--gutter-bottom {
    margin-bottom: .5em;
}

.core-text--legible-line-width {
    max-width: 65ch;
}

.core-text--max-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--dynamic-max-lines);
    text-overflow: ellipsis;
}
/* ========================================= */
/* File: CoreDataGrid.razor.css */
/* ========================================= */
/* Anchor for most classes here for isolation, also makes sure the grid always fills available area.
 - width is necessary for start-sized-columns, otherwise wrong width is used for initial width setup
 - height is there so that the grid always fills the available area, otherwise grids with not enough data to fill will be smaller
 */
.core-data-grid {
    height: 100%;
    width: 100%;
    overflow: auto;
}

/* These 2 modifications moves the scroll from the mud-table-container to the mud-data-grid. 
It is significant when the sum width of the columns is bigger than space available. If the table container scrolls then the
vertical scrollbar is not visible until the user scrolls all the way to the right.
*/
.core-data-grid .mud-table-container {
    overflow-y: unset !important;
}

.core-data-grid.mud-table-sticky-header .mud-table-container {
    overflow-x: unset !important;
}

/* Container queries enable percentage-based starting column widths;
   ColumnStartingSize.GetStartWidth(ratio) reads var(--one-percent). */
.core-data-grid.start-sized-columns {
    container-type: inline-size;
    scrollbar-gutter: stable;
    --one-percent: 1cqw;
}

.core-data-grid .ellipsis-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* required so text-overflow:ellipsis applies inside a table cell */
    max-width: 0;
}

@media (max-width: 599px) {
    .core-data-grid .ellipsis-cell {
        max-width: 80vw;
        display: block !important;
    }
}

/* Filter-row workarounds — https://github.com/MudBlazor/MudBlazor/discussions/6939
   top:35px keeps the filter row sticky below the header; width:unset undoes
   MudBlazor copying the header width onto the filter cell, which was blocking
   columns from being resized smaller. */
.core-data-grid.mud-table-sticky-header .filter-header-cell {
    top: 35px !important;
    width: unset !important;
}

/* Header <tr> owns the bottom border, but only <th> can be sticky, so the
   border scrolls out. Re-apply it via inset box-shadow on each <th>. */
.core-data-grid.mud-table-sticky-header > div > div > table > thead > tr > th {
    box-shadow: inset 0 -1px 0 var(--mud-palette-table-lines);
}

/* Makes the most right resizer wider for easier visibility, matches the grab area */
@media (hover: hover) and (pointer: fine) {
    .core-data-grid th.mud-table-cell:last-child .mud-resizer:hover {
        border-right-width: 8px;
    }
}
/* ========================================= */
/* File: QuipuThemeProvider.razor.css */
/* ========================================= */
/* Root font size - the value of 1rem, owned by the active theme.

   This lives here rather than in a host's app.css because it has to reach Storybook as well:
   this file is bundled into CoreComponents.bundle.css, which all three hosts AND
   src/Storybook/Client/wwwroot/iframe.html load. The theme token generator only carries CSS
   custom properties into {theme}-tokens.g.css, so a plain `html { font-size: 14px }` in a
   theme's overrides file would apply in the app but be dropped for Storybook. Hence a token
   plus this one rule that consumes it.

   Each theme that wants a non-default root declares its own prefixed token, per the naming
   convention in .claude/rules/theming.md. Themes that declare nothing fall through to 100%, which is
   the browser default (and, unlike a hardcoded 16px, respects a user who raised their font size).

   Add a level to the fallback chain when a new theme needs one, and mind the order: two themes'
   override files CAN be live on one page. The IdP pages run inside the Frontoffice host, which links
   frontoffice-overrides.css, while IdpLoginLayout links idplogin-overrides.css on top - so a token
   declared by both themes would be arbitrated by this chain, not by which theme is "active". That is
   why Frontoffice declares nothing rather than an explicit 16px.

   For the same reason a theme MUST NOT hardcode `font-size` on html/body in its overrides file:
   those files load after this bundle and would win. Frontoffice did exactly that and silently held
   the IdP pages at 16px.

   Sims and IdpLogin sit at 14px while the Quipu tokens are authored against a 16px root, so
   those themes render every rem-based token at 87.5% of its design value. That is pre-existing
   and deliberate; see issue #15291 for why moving to 16px is a separate call. */
html {
    font-size: var(--sims-root-font-size, var(--idplogin-root-font-size, 100%));
}