/* ===== BdsAvatar.razor.css ===== */
.bds-avatar-root {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    color: var(--bds-color-text-tertiary);
    border-radius: 9999px;
    background-color: var(--bds-color-neutral-20);
    user-select: none;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.bds-avatar-root.bg-light {
    background-color: var(--bds-color-neutral-10);
}

.bds-avatar-root.x-small { width: 16px; height: 16px; }
.bds-avatar-root.small { width: 28px; height: 28px; }
.bds-avatar-root.medium { width: 32px; height: 32px; }
.bds-avatar-root.large { width: 40px; height: 40px; }

.bds-avatar-root.patient { border-radius: 12px; }
.bds-avatar-root.patient.x-small { border-radius: 6px; }
.bds-avatar-root.patient.small { border-radius: 8px; }
.bds-avatar-root.patient.medium { border-radius: 10px; }
.bds-avatar-root.patient.large { border-radius: 12px; }

.bds-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bds-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: var(--bds-typography-font-weight-bold);
    font-family: var(--bds-typography-font-family-default);
}

.bds-avatar-root.x-small .bds-avatar-fallback { font-size: 9px; }
.bds-avatar-root.small .bds-avatar-fallback { font-size: 12px; }
.bds-avatar-root.medium .bds-avatar-fallback { font-size: 14px; }
.bds-avatar-root.large .bds-avatar-fallback { font-size: 16px; }

.bds-avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.bds-avatar-root.interactive {
    cursor: pointer;
}

.bds-avatar-root.interactive:hover {
    filter: brightness(0.98);
}

.bds-avatar-root.interactive:active::after {
    opacity: 0.2;
}

.bds-avatar-root.interactive:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}


/* ===== BdsBadge.razor.css ===== */
.bds-badge-container {
    display: inline-flex;
    align-items: baseline;
    position: relative;
}

.bds-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    padding: 4px;
    color: var(--bds-color-text-on-color);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 14px;
    background-color: var(--bds-color-accent-bold-10);
    user-select: none;
}

.bds-badge.x-small {
    width: 8px;
    height: 8px;
    padding: 0;
}

.bds-badge.small {
    min-width: 16px;
    height: 16px;
    padding: 2px 3px;
    font-size: var(--bds-typography-font-size-1);
    line-height: var(--bds-typography-line-height-1);
}

.bds-badge.medium {
    min-width: 24px;
    height: 24px;
    padding: 4px 3.5px;
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
}

.bds-badge.large {
    min-width: 28px;
    height: 28px;
    padding: 2px 4.5px;
    font-size: var(--bds-typography-font-size-5);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
}

.bds-badge.primary { background-color: var(--bds-color-accent-bold-10); }
.bds-badge.warn { background-color: var(--bds-color-danger-bold-10); }
.bds-badge.neutral { background-color: var(--bds-color-neutral-bold-10); }
.bds-badge.draft { color: var(--bds-color-text-primary); background-color: var(--bds-color-warning-50); }
.bds-badge.success { background-color: var(--bds-color-success-bold-10); }
.bds-badge.magic { background-color: var(--bds-color-magic-bold-10); }

.bds-badge.absolute {
    position: absolute;
    z-index: 1;
}

.bds-badge.absolute.top-right {
    top: -11px;
    left: 100%;
}

.bds-badge.absolute.small.top-right {
    top: -8px;
    left: calc(100% + 1px);
}

.bds-badge.absolute.large.top-right {
    top: -14px;
}

.bds-badge.absolute.top-left {
    top: -11px;
    right: 100%;
    left: auto;
}

.bds-badge.absolute.bottom-right {
    top: auto;
    bottom: -11px;
    left: 100%;
}

.bds-badge.absolute.bottom-left {
    top: auto;
    right: 100%;
    bottom: -11px;
    left: auto;
}


/* ===== BdsBanner.razor.css ===== */
.bds-banner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bds-spacer-layout-2);
    box-sizing: border-box;
    width: var(--bds-banner-width, 672px);
    min-width: 200px;
    padding: var(--bds-spacer-content-2) var(--bds-spacer-content-2) var(--bds-spacer-content-2) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
}

.bds-banner.small {
    padding: var(--bds-spacer-content-1) var(--bds-spacer-content-1) var(--bds-spacer-content-1) var(--bds-spacer-content-2);
}

.bds-banner-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-banner-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--bds-color-text-on-color);
    border-radius: 9999px;
    background-color: var(--bds-color-neutral-bold-10);
}

.bds-banner.small .bds-banner-icon {
    width: 20px;
    height: 20px;
}

.bds-banner-message-text {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-banner.small .bds-banner-message-text {
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
}

.bds-banner-actions {
    display: flex;
    gap: var(--bds-spacer-layout-1);
}

/* Neutral */
.bds-banner.neutral { background: var(--bds-color-neutral-20); }

/* Primary */
.bds-banner.primary { background: var(--bds-color-accent-10); }
.bds-banner.primary .bds-banner-message-text { color: var(--bds-color-accent-bold-10); }
.bds-banner.primary .bds-banner-icon { background-color: var(--bds-color-accent-bold-10); }
.bds-banner.primary.outline { outline-color: var(--bds-color-accent-bold-10); background-color: var(--bds-color-background-10); }

/* Warn */
.bds-banner.warn { background: var(--bds-color-danger-10); }
.bds-banner.warn .bds-banner-message-text { color: var(--bds-color-danger-bold-10); }
.bds-banner.warn .bds-banner-icon { background-color: var(--bds-color-danger-bold-10); }
.bds-banner.warn.outline { outline-color: var(--bds-color-danger-bold-10); background-color: var(--bds-color-background-10); }

/* Draft */
.bds-banner.draft { background: var(--bds-color-warning-10); }
.bds-banner.draft .bds-banner-message-text { color: var(--bds-color-warning-bold-20); }
.bds-banner.draft .bds-banner-icon { background-color: var(--bds-color-warning-50); }

/* Success */
.bds-banner.success { background: var(--bds-color-success-10); }
.bds-banner.success .bds-banner-message-text { color: var(--bds-color-success-bold-20); }
.bds-banner.success .bds-banner-icon { background-color: var(--bds-color-success-bold-20); }

/* Magic */
.bds-banner.magic { background: var(--bds-color-magic-10); }
.bds-banner.magic .bds-banner-message-text { color: var(--bds-color-magic-bold-20); }
.bds-banner.magic .bds-banner-icon { background-color: var(--bds-color-magic-bold-20); }

/* Outline kind */
.bds-banner.outline {
    outline: var(--bds-border-width-m) solid var(--bds-color-divider-20);
    background-color: var(--bds-color-background-10);
}


/* ===== BdsBreadcrumb.razor.css ===== */
.bds-breadcrumb {
    display: flex;
}

.bds-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    color: var(--bds-color-text-tertiary);
}


/* ===== BdsBreadcrumbItem.razor.css ===== */
.bds-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-breadcrumb-link {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    text-decoration: none;
    transition: color 0.15s ease;
}

.bds-breadcrumb-link:hover {
    color: var(--bds-color-link-hover);
    text-decoration: underline;
}

.bds-breadcrumb-current {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
}

.bds-breadcrumb-separator {
    display: inline-flex;
    align-items: center;
    color: var(--bds-color-text-tertiary);
}


/* ===== BdsButton.razor.css ===== */
.bds-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bds-button-width, auto);
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    word-break: normal;
    overflow-wrap: normal;
    border: none;
    border-radius: var(--bds-border-shape-m);
    background-color: var(--bds-color-neutral-20);
    cursor: pointer;
    gap: var(--bds-spacer-layout-1);
    text-decoration: none;
    box-sizing: border-box;
}

.bds-button:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}

.bds-button.full-span {
    width: 100%;
}

.bds-button.x-small {
    gap: var(--bds-spacer-layout-1);
    padding: 2px;
    border-radius: var(--bds-border-shape-xs);
    font-size: var(--bds-typography-font-size-3);
}

.bds-button.small {
    gap: var(--bds-spacer-layout-1);
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-2);
    border-radius: var(--bds-border-shape-s);
}

.bds-button.large {
    gap: var(--bds-spacer-layout-1);
    padding: var(--bds-spacer-inset-l) var(--bds-spacer-content-4);
    font-size: var(--bds-typography-font-size-5);
    line-height: var(--bds-typography-line-height-5);
    border-radius: var(--bds-border-shape-l);
}

.bds-button.disabled,
.bds-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Basic kind */
.bds-button.primary.basic {
    color: var(--bds-color-accent-bold-10);
    background-color: var(--bds-color-neutral-20);
}
.bds-button.warn.basic {
    color: var(--bds-color-danger-bold-10);
    background-color: var(--bds-color-neutral-20);
}

.bds-button.neutral.basic:not(.disabled):hover {
    background-color: var(--bds-color-neutral-30);
}
.bds-button.primary.basic:not(.disabled):hover {
    color: var(--bds-color-accent-bold-20);
    background-color: var(--bds-color-neutral-30);
}
.bds-button.warn.basic:not(.disabled):hover {
    color: var(--bds-color-danger-bold-20);
    background-color: var(--bds-color-neutral-30);
}
.bds-button.neutral.basic:not(.disabled):active {
    background-color: var(--bds-color-neutral-40);
}
.bds-button.primary.basic:not(.disabled):active {
    color: var(--bds-color-accent-bold-30);
    background-color: var(--bds-color-neutral-40);
}

/* Raised kind */
.bds-button.raised {
    color: var(--bds-color-text-on-color);
    background-color: var(--bds-color-accent-bold-10);
}
.bds-button.raised:not(.disabled):hover {
    background-color: var(--bds-color-accent-bold-20);
}
.bds-button.raised:not(.disabled):active {
    background-color: var(--bds-color-accent-bold-30);
}
.bds-button.warn.raised {
    background-color: var(--bds-color-danger-bold-10);
}
.bds-button.warn.raised:not(.disabled):hover {
    background-color: var(--bds-color-danger-bold-20);
}

/* Flat kind */
.bds-button.flat {
    background-color: var(--bds-color-background-10);
}
.bds-button.primary.flat {
    color: var(--bds-color-accent-bold-10);
    background-color: var(--bds-color-background-10);
}
.bds-button.warn.flat {
    color: var(--bds-color-danger-bold-10);
    background-color: var(--bds-color-background-10);
}
.bds-button.flat:not(.disabled):hover {
    background-color: var(--bds-color-neutral-30);
}

/* Stroked kind */
.bds-button.neutral.stroked {
    border: var(--bds-border-width-m) solid var(--bds-color-neutral-bold-10);
    background-color: var(--bds-color-background-10);
}
.bds-button.primary.stroked {
    color: var(--bds-color-accent-bold-10);
    border: var(--bds-border-width-m) solid var(--bds-color-accent-bold-10);
    background-color: var(--bds-color-background-10);
}
.bds-button.warn.stroked {
    color: var(--bds-color-danger-bold-10);
    border: var(--bds-border-width-m) solid var(--bds-color-danger-bold-10);
    background-color: var(--bds-color-background-10);
}
.bds-button.primary.stroked:not(.disabled):hover {
    color: var(--bds-color-accent-bold-20);
    border-color: var(--bds-color-accent-bold-20);
    background-color: var(--bds-color-accent-20);
}
.bds-button.warn.stroked:not(.disabled):hover {
    color: var(--bds-color-danger-bold-20);
    border-color: var(--bds-color-danger-bold-20);
    background-color: var(--bds-color-danger-20);
}

/* Split position */
.bds-button.split-left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.bds-button.split-right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.slot-icon, .slot-prefix, .slot-suffix {
    display: inline-flex;
    align-items: center;
}


/* ===== BdsButtonToggle.razor.css ===== */
.bds-button-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bds-spacer-layout-1);
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    border: none;
    border-radius: var(--bds-border-shape-m);
    background-color: var(--bds-color-neutral-20);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.bds-button-toggle:hover:not(:disabled):not(.toggled) {
    background-color: var(--bds-color-neutral-30);
}

.bds-button-toggle.toggled {
    color: var(--bds-color-text-on-color);
    background-color: var(--bds-color-accent-bold-40);
}

.bds-button-toggle.toggled:hover {
    background-color: var(--bds-color-accent-bold-30);
}

.bds-button-toggle:disabled {
    color: var(--bds-color-text-disabled);
    background-color: var(--bds-color-neutral-disabled);
    cursor: not-allowed;
}

.bds-button-toggle.toggled:disabled {
    background-color: var(--bds-color-accent-bold-disabled);
}

.bds-button-toggle.small {
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-2);
    border-radius: var(--bds-border-shape-s);
}

.bds-button-toggle.medium {
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
}

.bds-button-toggle.large {
    padding: var(--bds-spacer-inset-l) var(--bds-spacer-content-4);
    font-size: var(--bds-typography-font-size-5);
    line-height: var(--bds-typography-line-height-5);
    border-radius: var(--bds-border-shape-l);
}

.bds-button-toggle.icon-only {
    padding: var(--bds-spacer-content-2);
}

.bds-button-toggle:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}

.bds-button-toggle-icon,
.bds-button-toggle-prefix,
.bds-button-toggle-suffix {
    display: inline-flex;
    align-items: center;
}


/* ===== BdsCard.razor.css ===== */
.bds-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: var(--bds-card-width, 100%);
    min-width: var(--bds-card-min-width, 336px);
    height: var(--bds-card-height, auto);
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-background-10);
    box-shadow:
        0px 2px 8px 0px var(--bds-color-popover-shadow),
        0px 1px 4px 0px var(--bds-color-popover-shadow),
        0px 0px 2px 0px var(--bds-color-popover-shadow);
}

.bds-card.flat {
    border: 1px solid var(--bds-color-divider-10);
    box-shadow: none;
}

.bds-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bds-card-header-collapsable {
    display: flex;
    flex-shrink: 0;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    padding: var(--bds-spacer-content-2) var(--bds-spacer-content-3);
    cursor: pointer;
}

.bds-card-header-collapsable .bds-card-header {
    flex: 1;
}

.bds-card-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--bds-spacer-content-1);
    border-radius: var(--bds-border-shape-s);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bds-color-text-primary);
}

.bds-card-chevron {
    transition: transform 0.15s ease;
}

.bds-card-chevron.expanded {
    transform: rotate(-180deg);
}

.bds-card-header-wrapper {
    flex-shrink: 0;
    align-self: stretch;
    padding: var(--bds-spacer-content-4) var(--bds-spacer-content-3) 0;
}

.bds-card-thumbnail {
    width: 100%;
    padding: var(--bds-spacer-content-3) var(--bds-spacer-content-3) var(--bds-spacer-content-2);
}

.bds-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--bds-spacer-layout-2) var(--bds-spacer-content-3) var(--bds-spacer-content-3);
}

.bds-card-body.no-header-content {
    padding-top: var(--bds-spacer-content-4);
}

.bds-card-content {
    width: 100%;
    /*max-height: var(--bds-card-content-height, none);*/
}

.bds-card-header {
    display: block;
    padding-right: var(--bds-spacer-content-2);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-font-size-5);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-5);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    word-break: normal;
    overflow-wrap: break-word;
    margin: 0px !important;
}

.bds-card-description{
    display: block;
    padding-right: var(--bds-spacer-content-2);
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    word-break: normal;
    overflow-wrap: break-word;
    margin: 0px !important;
}

.bds-card-actions-wrapper {
    width:100%;
}


/* ===== BdsCheckbox.razor.css ===== */
.bds-checkbox-with-label {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
}

.bds-label {
    display: flex;
    align-items: center;
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--bds-spacer-layout-1);
    font-weight: var(--bds-typography-font-weight-bold);
    cursor: pointer;
    outline: none;
}

.bds-checkbox-wrapper:focus-visible .bds-checkbox-frame {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}

.bds-checkbox-wrapper.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.bds-checkbox-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    height: 14px;
    margin-top: 2px;
    border: var(--bds-border-width-m) solid var(--bds-color-neutral-bold-10);
    border-radius: 6px;
    flex-shrink: 0;
    color: white;
}

.bds-checkbox-frame.selected {
    border-color: var(--bds-color-icon-primary);
    background-color: var(--bds-color-icon-primary);
}

.bds-checkbox-frame:not(.selected) {
    background-color: var(--bds-color-background-10);
}

.bds-checkbox-value {
    display: flex;
    gap: var(--bds-spacer-layout-1);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    cursor: pointer;
}

.bds-checkbox-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-3);
}


/* ===== BdsCheckboxGroup.razor.css ===== */
.bds-checkbox-group {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
    border: none;
    padding: 0;
    margin: 0;
}

.bds-checkbox-group-label {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    margin-bottom: var(--bds-spacer-layout-1);
}

.bds-checkbox-group-items {
    display: flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
}

.bds-checkbox-group-items.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--bds-spacer-layout-2);
}

.bds-checkbox-group-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
}


/* ===== BdsChip.razor.css ===== */
.bds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--bds-spacer-content-1);
    padding: 2px var(--bds-spacer-content-2);
    border-radius: var(--bds-border-shape-3xl);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    white-space: nowrap;
    border: var(--bds-border-width-m) solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.bds-chip.clickable {
    cursor: pointer;
    outline: none;
}

.bds-chip.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.bds-chip.neutral {
    color: var(--bds-color-text-primary);
    background-color: var(--bds-color-neutral-20);
    border-color: var(--bds-color-neutral-40);
}

.bds-chip.neutral.selected,
.bds-chip.neutral.clickable:hover:not(.disabled) {
    background-color: var(--bds-color-neutral-30);
    border-color: var(--bds-color-neutral-bold-10);
}

.bds-chip.primary {
    color: var(--bds-color-accent-bold-10);
    background-color: var(--bds-color-accent-20);
    border-color: var(--bds-color-accent-40);
}

.bds-chip.primary.selected,
.bds-chip.primary.clickable:hover:not(.disabled) {
    background-color: var(--bds-color-accent-30);
    border-color: var(--bds-color-accent-bold-10);
}

.bds-chip.warn {
    color: var(--bds-color-danger-bold-10);
    background-color: var(--bds-color-danger-20);
    border-color: var(--bds-color-danger-40);
}

.bds-chip.success {
    color: var(--bds-color-success-bold-20);
    background-color: var(--bds-color-success-20);
    border-color: var(--bds-color-success-40);
}

.bds-chip-icon {
    display: inline-flex;
    align-items: center;
}

.bds-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    border-radius: 50%;
    line-height: 1;
    margin-left: 2px;
}

.bds-chip-remove:hover {
    opacity: 1;
}


/* ===== BdsCombobox.razor.css ===== */
.bds-combobox-wrapper {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-combobox-width, 336px);
    position: relative;
}

.bds-combobox-label {
    color: var(--bds-color-text-secondary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-wide);
}

.bds-combobox-required {
    color: var(--bds-color-danger-bold-10);
    margin-left: 2px;
}

.bds-combobox-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    min-height: 40px;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    outline: var(--bds-border-width-m) solid var(--bds-color-divider-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-m));
    background: var(--bds-color-field);
    box-sizing: border-box;
    cursor: text;
}

.bds-combobox-container.focused {
    outline: var(--bds-border-width-l) solid var(--bds-color-focus-primary);
    outline-offset: calc(-1 * var(--bds-border-width-l));
}

.bds-combobox-container:not(.disabled):not(.readonly):not(.focused):hover {
    outline-color: var(--bds-color-divider-bold-20);
}

.bds-combobox-container.disabled {
    outline-color: var(--bds-color-divider-10);
    background-color: var(--bds-color-neutral-20);
    cursor: not-allowed;
}

.bds-combobox-container.readonly {
    outline-color: var(--bds-color-divider-10);
    background-color: var(--bds-color-neutral-10);
}

.bds-combobox-container.invalid {
    outline-color: var(--bds-color-danger-bold-10);
    outline-width: var(--bds-border-width-l);
}

.bds-combobox-selected-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bds-spacer-layout-1);
    width: 100%;
    margin-bottom: var(--bds-spacer-layout-1);
}

.bds-combobox-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--bds-border-shape-pill);
    background: var(--bds-color-accent-subtle-10);
    color: var(--bds-color-accent-bold-10);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
}

.bds-combobox-tag-remove {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
}

.bds-combobox-input-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.bds-combobox-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    cursor: pointer;
}

.bds-combobox-input::placeholder {
    color: var(--bds-color-text-placeholder);
    font-weight: var(--bds-typography-font-weight-normal);
}

.bds-combobox-input:disabled {
    cursor: not-allowed;
    color: var(--bds-color-text-disabled);
}

.bds-combobox-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--bds-color-text-tertiary);
    flex-shrink: 0;
}

.bds-combobox-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-background-10);
    box-shadow:
        0 10px 30px 0 var(--bds-color-popover-shadow),
        0 4px 40px 0 var(--bds-color-popover-shadow),
        0 0 2px 0 var(--bds-color-popover-shadow);
    padding: var(--bds-spacer-content-1);
}

.bds-combobox-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    cursor: pointer;
}

.bds-combobox-option:hover {
    background: var(--bds-color-background-20);
}

.bds-combobox-option.selected {
    color: var(--bds-color-accent-bold-10);
    font-weight: var(--bds-typography-font-weight-bold);
}

.bds-combobox-check {
    color: var(--bds-color-accent-bold-10);
    flex-shrink: 0;
}

.bds-combobox-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
}

.bds-combobox-validation {
    color: var(--bds-color-danger-bold-10);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
}


/* ===== BdsDataList.razor.css ===== */
.bds-data-list {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
    width: 100%;
}

.bds-data-list.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}


/* ===== BdsDataListItem.razor.css ===== */
.bds-data-list-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bds-data-list-item-label {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-data-list-item-value {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}


/* ===== BdsDatePicker.razor.css ===== */
.bds-date-picker {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-date-picker-width, 336px);
}

.bds-date-picker-label {
    color: var(--bds-color-text-secondary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-wide);
}

.bds-date-picker-required {
    color: var(--bds-color-danger-bold-10);
    margin-left: 2px;
}

.bds-date-picker-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    outline: var(--bds-border-width-m) solid var(--bds-color-divider-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-m));
    background: var(--bds-color-field);
    transition: outline-color 0.15s ease;
}

.bds-date-picker-input-wrapper:not(.disabled):not(.readonly):hover {
    outline-color: var(--bds-color-divider-bold-20);
}

.bds-date-picker-input-wrapper:focus-within {
    outline: var(--bds-border-width-l) solid var(--bds-color-focus-primary);
    outline-offset: calc(-1 * var(--bds-border-width-l));
}

.bds-date-picker-input-wrapper.invalid {
    outline-color: var(--bds-color-danger-bold-10);
    outline-width: var(--bds-border-width-l);
}

.bds-date-picker-input-wrapper.disabled {
    outline-color: var(--bds-color-divider-10);
    background-color: var(--bds-color-neutral-20);
    cursor: not-allowed;
}

.bds-date-picker-input-wrapper.readonly {
    outline-color: var(--bds-color-divider-10);
    background-color: var(--bds-color-neutral-10);
}

.bds-date-picker-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    width: 100%;
}

.bds-date-picker-input:disabled {
    color: var(--bds-color-text-disabled);
    cursor: not-allowed;
}

.bds-date-picker-input::placeholder {
    color: var(--bds-color-text-placeholder);
    font-weight: var(--bds-typography-font-weight-normal);
}

.bds-date-picker-icon {
    display: inline-flex;
    align-items: center;
    color: var(--bds-color-text-tertiary);
    flex-shrink: 0;
    margin-left: var(--bds-spacer-layout-1);
}

.bds-date-picker-prefix {
    display: inline-flex;
    align-items: center;
    color: var(--bds-color-text-tertiary);
    margin-right: var(--bds-spacer-layout-1);
    flex-shrink: 0;
}

.bds-date-picker-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
}

.bds-date-picker-validation {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    color: var(--bds-color-danger-bold-10);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
}


/* ===== BdsDialog.razor.css ===== */
@keyframes bds-dialog-show {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bds-dialog-hide {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.8); }
}

.bds-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    animation: bds-dialog-show 250ms ease forwards;
}

.bds-dialog-backdrop.closing {
    animation: bds-dialog-hide 250ms ease forwards;
}

.bds-dialog-backdrop.no-backdrop {
    background: transparent;
}

dialog.bds-dialog {
    position: fixed;
    transform: translate(-50%, -50%);
    overflow: hidden;
    padding: 0;
    border: none;
    border-radius: var(--bds-border-shape-2xl);
    outline: none;
    background: var(--bds-color-background-10);
    box-shadow:
        0px 2px 8px 0px var(--bds-color-popover-shadow),
        0px 1px 4px 0px var(--bds-color-popover-shadow),
        0px 0px 2px 0px var(--bds-color-popover-shadow);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: bds-dialog-show 250ms ease forwards;
    max-height: 90vh;
}

dialog.bds-dialog.closing {
    animation: bds-dialog-hide 250ms ease forwards;
    pointer-events: none;
}

dialog.bds-dialog.small { max-width: 218px; }
dialog.bds-dialog.medium { max-width: 454px; }
dialog.bds-dialog.large { max-width: 688px; }
dialog.bds-dialog.x-large { max-width: 1158px; }
dialog.bds-dialog.full-span { width: 100%; max-width: 100%; }

.bds-dialog-content {
    display: grid;
    overflow: hidden;
    align-items: start;
    grid-template-rows: auto 1fr auto;
    box-sizing: border-box;
    padding: var(--bds-spacer-content-6);
    max-height: 90vh;
}

.bds-dialog-header {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: var(--bds-spacer-content-2);
}

.bds-dialog-label {
    display: flex;
    width: 100%;
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
}

.bds-dialog-title-content {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-dialog-title {
    color: var(--bds-color-text-primary);
    font-size: var(--bds-typography-font-size-6);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-6);
    letter-spacing: var(--bds-typography-letter-spacing-wide);
}

.bds-dialog-section {
    display: grid;
    overflow-y: auto;
    gap: var(--bds-spacer-layout-2);
    padding: var(--bds-spacer-content-4) 0;
    color: var(--bds-color-text-primary);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    overscroll-behavior-y: contain;
}

.bds-dialog-footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--bds-spacer-layout-2);
    margin-left: auto;
    padding-top: var(--bds-spacer-content-4);
}

.bds-dialog-footer.full-span {
    margin-left: 0;
}

.bds-dialog-close {
    position: absolute;
    top: var(--bds-spacer-content-2);
    right: var(--bds-spacer-content-2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bds-spacer-content-1);
    background: none;
    border: none;
    border-radius: var(--bds-border-shape-s);
    cursor: pointer;
    color: var(--bds-color-text-tertiary);
}

.bds-dialog-close:hover {
    color: var(--bds-color-text-primary);
    background-color: var(--bds-color-neutral-20);
}


/* ===== BdsDivider.razor.css ===== */
.bds-divider {
    display: flex;
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
}

.bds-divider::before,
.bds-divider::after {
    flex-grow: 1;
    flex-shrink: 1;
    background-color: var(--bds-color-divider-10);
    content: '';
}

.bds-divider.dark::before,
.bds-divider.dark::after {
    background-color: var(--bds-color-divider-20);
}

.bds-divider.horizontal {
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    width: 100%;
    margin-top: var(--bds-divider-spacing, var(--bds-spacer-layout-2));
    margin-bottom: var(--bds-divider-spacing, var(--bds-spacer-layout-2));
    white-space: nowrap;
}

.bds-divider.horizontal::before,
.bds-divider.horizontal::after {
    width: 100%;
    height: var(--bds-divider-size, 1px);
}

.bds-divider.vertical {
    flex-direction: column;
    align-items: center;
    width: auto;
    height: 100%;
    min-height: 24px;
}

.bds-divider.vertical::before,
.bds-divider.vertical::after {
    width: var(--bds-divider-size, 1px);
    height: 100%;
}

.bds-divider-text {
    display: inline-block;
    overflow: hidden;
    flex-shrink: 0;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 var(--bds-spacer-layout-2);
}


/* ===== BdsDropdown.razor.css ===== */
.bds-dropdown {
    position: relative;
    display: inline-block;
}

.bds-dropdown-trigger {
    cursor: pointer;
}

.bds-dropdown-content {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1000;
    min-width: 200px;
    max-height: var(--bds-dropdown-max-height, 300px);
    overflow-y: auto;
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-background-10);
    box-shadow:
        0 10px 30px 0 var(--bds-color-popover-shadow),
        0 4px 40px 0 var(--bds-color-popover-shadow),
        0 0 2px 0 var(--bds-color-popover-shadow);
    padding: var(--bds-spacer-content-1);
}


/* ===== BdsEmptyState.razor.css ===== */
.bds-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bds-spacer-layout-2);
    padding: var(--bds-spacer-content-6) var(--bds-spacer-content-4);
    text-align: center;
}

.bds-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bds-color-text-tertiary);
    margin-bottom: var(--bds-spacer-layout-1);
}

.bds-empty-state-title {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-6);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-6);
    letter-spacing: var(--bds-typography-letter-spacing-wide);
}

.bds-empty-state-description {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    max-width: 400px;
}

.bds-empty-state-actions {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-2);
    margin-top: var(--bds-spacer-layout-1);
}


/* ===== BdsExpansionPanel.razor.css ===== */
.bds-expansion-panel {
    display: flex;
    flex-direction: column;
    /*border-radius: var(--bds-border-shape-m);*/
    background: var(--bds-color-background-10);
    /*box-shadow:*/
    /*    0px 1px 4px 0px var(--bds-color-popover-shadow),*/
    /*    0px 0px 2px 0px var(--bds-color-popover-shadow);*/
    overflow: hidden;
    border-bottom: 0.666667px solid rgb(225, 226, 236);
}

.bds-expansion-panel-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--bds-spacer-content-3);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.bds-expansion-panel-header:hover {
    background-color: var(--bds-color-neutral-20);
}

.bds-expansion-panel-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
}

.bds-expansion-panel-title {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-expansion-panel-chevron {
    transition: transform 0.15s ease;
    color: var(--bds-color-text-tertiary);
    flex-shrink: 0;
}

.bds-expansion-panel-chevron.expanded {
    transform: rotate(-180deg);
}

.bds-expansion-panel-body {
    padding: var(--bds-spacer-content-1) var(--bds-spacer-content-3) var(--bds-spacer-content-3);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
}


/* ===== BdsExpansionPanelGroup.razor.css ===== */
.bds-expansion-panel-group {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--bds-expansion-panel-group-width, 100%);
}

.bds-expansion-panel-group[aria-disabled="true"] {
    cursor: not-allowed;
}


/* ===== BdsFormButton.razor.css ===== */
.bds-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-form-button-width, auto);
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    background: var(--bds-color-background-10);
    border: var(--bds-border-width-m) solid var(--bds-color-divider-bold-10);
    border-radius: var(--bds-border-shape-m);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    outline: none;
    box-sizing: border-box;
}

.bds-form-button:hover:not(:disabled):not(.selected) {
    background: var(--bds-color-background-20);
    border-color: var(--bds-color-divider-bold-20);
}

.bds-form-button.selected {
    background: var(--bds-color-accent-subtle-10);
    border-color: var(--bds-color-accent-bold-10);
    color: var(--bds-color-accent-bold-10);
    font-weight: var(--bds-typography-font-weight-bold);
}

.bds-form-button:disabled {
    color: var(--bds-color-text-disabled);
    background: var(--bds-color-neutral-20);
    border-color: var(--bds-color-divider-10);
    cursor: not-allowed;
}

.bds-form-button.full-span {
    width: 100%;
}

.bds-form-button.small {
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-2);
    border-radius: var(--bds-border-shape-s);
    font-size: var(--bds-typography-font-size-3);
}

.bds-form-button.large {
    padding: var(--bds-spacer-inset-l) var(--bds-spacer-content-4);
    font-size: var(--bds-typography-font-size-5);
    border-radius: var(--bds-border-shape-l);
}

.bds-form-button.left {
    justify-content: flex-start;
}

.bds-form-button:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}

.bds-form-button-icon,
.bds-form-button-check {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.bds-form-button-check {
    margin-left: auto;
    color: var(--bds-color-accent-bold-10);
}


/* ===== BdsFormButtonGroup.razor.css ===== */
.bds-form-button-group {
    display: flex;
    gap: var(--bds-spacer-layout-1);
    flex-wrap: wrap;
}

.bds-form-button-group.horizontal {
    flex-direction: row;
}

.bds-form-button-group.vertical {
    flex-direction: column;
}

.bds-form-button-group.full-span {
    width: 100%;
}

.bds-form-button-group.full-span.bds-form-button {
    flex: 1;
}


/* ===== BdsGenderTag.razor.css ===== */
.bds-gender-tag {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--bds-spacer-content-2);
    border-radius: var(--bds-border-shape-3xl);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    white-space: nowrap;
    user-select: none;
}

/* Combined tag (birth + preferred) */
.bds-gender-tag.combined {
    gap: 4px;
    padding: 1px var(--bds-spacer-content-1) 1px var(--bds-spacer-content-1);
    background-color: var(--bds-color-neutral-20);
    border: var(--bds-border-width-m) solid var(--bds-color-neutral-40);
    color: var(--bds-color-text-tertiary);
}

.bds-gender-tag-code {
    opacity: 0.6;
    font-size: var(--bds-typography-font-size-3);
}

.bds-gender-tag-separator {
    opacity: 0.4;
    font-size: 10px;
}

.bds-gender-tag-preferred {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--bds-spacer-content-1);
    border-radius: var(--bds-border-shape-3xl);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
}

/* Variants */
.bds-gender-tag.primary,
.bds-gender-tag-preferred.primary {
    color: var(--bds-color-accent-bold-30);
    background-color: var(--bds-color-accent-30);
}

.bds-gender-tag.warn,
.bds-gender-tag-preferred.warn {
    color: var(--bds-color-danger-bold-30);
    background-color: var(--bds-color-danger-30);
}

.bds-gender-tag.neutral,
.bds-gender-tag-preferred.neutral {
    color: var(--bds-color-text-primary);
    background-color: var(--bds-color-neutral-20);
}

.bds-gender-tag.draft,
.bds-gender-tag-preferred.draft {
    color: var(--bds-color-warning-bold-30);
    background-color: var(--bds-color-warning-30);
}


/* ===== BdsInput.razor.css ===== */
.bds-input-host {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-input-width, auto);
    min-width:100px;
    color: var(--bds-color-text-primary);
}

.bds-input-host.full-span {
    width: 100%;
}

.bds-input-label {
    display: flex;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-input-wrapper {
    display: flex;
    align-items: center;
    align-self: stretch;
    min-height: 40px;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    outline: var(--bds-border-width-m) solid var(--bds-color-divider-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-m));
    background: var(--bds-color-field);
    transition: outline-color 0.1s ease-in-out;
    /* The whole box focuses its input on click, so it should read as a text target. */
    cursor: text;
    gap: var(--bds-spacer-layout-1);
    width: 100%;
    box-sizing: border-box;
}

.bds-input-wrapper:focus-within {
    outline: var(--bds-border-width-l) solid var(--bds-color-focus-primary);
    outline-offset: calc(-1 * var(--bds-border-width-l));
    z-index: 10;
}

.bds-input-wrapper:not(.invalid):not(.readonly):hover {
    outline: var(--bds-border-width-m) solid var(--bds-color-divider-bold-20);
}

.bds-input-wrapper.invalid {
    outline: var(--bds-border-width-l) solid var(--bds-color-danger-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-l));
}

.bds-input-wrapper.disabled {
    outline-color: var(--bds-color-divider-10);
    background-color: var(--bds-color-neutral-20);
    background-image: repeating-linear-gradient(
        135deg,
        var(--bds-color-neutral-20) 0%,
        var(--bds-color-neutral-20) 5px,
        var(--bds-color-field) 5px,
        var(--bds-color-field) 10px
    );
    cursor: not-allowed;
    pointer-events: none;
}

.bds-input-wrapper.readonly {
    outline-color: var(--bds-color-divider-10);
    background-color: var(--bds-color-neutral-10);
}

.bds-input-wrapper.small {
    min-height: 32px;
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-1);
    border-radius: var(--bds-border-shape-s);
}

.bds-input-wrapper.large {
    min-height: 48px;
    padding: var(--bds-spacer-inset-l) var(--bds-spacer-content-4);
    border-radius: var(--bds-border-shape-l);
}

.bds-input-wrapper input {
    flex: 1;
    width: 100%;
    padding: 0;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    border: none;
    outline: none;
    background-color: transparent;
    min-width: 0;
}

.bds-input-wrapper input::placeholder {
    color: var(--bds-color-text-placeholder);
    font-weight: var(--bds-typography-font-weight-normal);
}

.bds-input-wrapper input.large {
    font-size: var(--bds-typography-font-size-5);
    line-height: var(--bds-typography-line-height-5);
}

.bds-input-wrapper.disabled input {
    color: var(--bds-color-text-disabled);
}

.bds-input-suffix-text {
    color: var(--bds-color-text-placeholder);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    white-space: nowrap;
}

.bds-input-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bds-color-text-tertiary);
    font-size: 16px;
    line-height: 1;
}

.bds-input-clear:hover {
    color: var(--bds-color-text-primary);
}

.bds-input-prefix,
.bds-input-action {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.bds-input-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-3);
}

.bds-input-validation {
    color: var(--bds-color-danger-bold-10);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-3);
}

.no-spin-buttons::-webkit-inner-spin-button,
.no-spin-buttons::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.no-spin-buttons[type='number'] {
    appearance: textfield;
}


/* ===== BdsLink.razor.css ===== */
.bds-link {
    display: inline-flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    color: var(--bds-color-link-default);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    text-decoration: underline;
    cursor: pointer;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.bds-link:hover:not(.disabled) {
    color: var(--bds-color-link-hover);
    text-decoration-color: var(--bds-color-link-hover);
}

.bds-link:active:not(.disabled) {
    color: var(--bds-color-link-active);
}

.bds-link:visited {
    color: var(--bds-color-link-visited);
}

.bds-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.bds-link-prefix,
.bds-link-suffix {
    display: inline-flex;
    align-items: center;
}


/* ===== BdsList.razor.css ===== */
.bds-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}


/* ===== BdsListItem.razor.css ===== */
.bds-list-item {
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    padding: var(--bds-spacer-content-3);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    border-bottom: var(--bds-border-width-m) solid var(--bds-color-divider-10);
}

.bds-list-item.selectable:hover {
    background: var(--bds-color-background-20);
    cursor: pointer;
}

.bds-list-item:not(.selectable):hover {
    background: var(--bds-color-background-20);
}

.bds-list-item.selected {
    background: var(--bds-color-background-30);
}

.bds-list-item:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: -2px;
}

.bds-list-item-prefix {
    margin-right: var(--bds-spacer-layout-1);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.bds-list-item-suffix {
    display: flex;
    align-items: center;
    margin-right: var(--bds-spacer-layout-2);
    margin-left: auto;
    flex-shrink: 0;
}

.bds-list-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.bds-list-item-title {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-list-item-meta {
    color: var(--bds-color-text-tertiary);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
}


/* ===== BdsMenu.razor.css ===== */
.bds-menu-host {
    position: relative;
    display: inline-block;
}

.bds-menu-wrapper {
    position: absolute;
    z-index: 1000;
    box-sizing: border-box;
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-background-10);
    box-shadow:
        0 10px 30px 0 var(--bds-color-popover-shadow),
        0 4px 40px 0 var(--bds-color-popover-shadow),
        0 0 2px 0 var(--bds-color-popover-shadow);
}

.bds-menu-wrapper--bottom-start {
    top: 100%;
    left: 0;
    margin-top: 4px;
}

.bds-menu-wrapper--bottom-end {
    top: 100%;
    right: 0;
    margin-top: 4px;
}

.bds-menu-wrapper--top-start {
    bottom: 100%;
    left: 0;
    margin-bottom: 4px;
}

.bds-menu-wrapper--top-end {
    bottom: 100%;
    right: 0;
    margin-bottom: 4px;
}

.bds-menu {
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bds-spacer-content-1);
    box-sizing: border-box;
    width: 214px;
    max-height: var(--bds-menu-max-height, 300px);
    margin: 0;
    padding: var(--bds-spacer-content-2);
    list-style: none;
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-background-10);
}


/* ===== BdsMenuItem.razor.css ===== */
.bds-menu-item {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--bds-spacer-layout-1);
    box-sizing: border-box;
    width: 100%;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    list-style: none;
    outline: none;
    cursor: pointer;
}

.bds-menu-item.hidden {
    display: none;
}

.bds-menu-item:not(.disabled):hover {
    background: var(--bds-color-background-20);
}

.bds-menu-item.disabled {
    color: var(--bds-color-text-disabled);
    cursor: not-allowed;
}

.bds-menu-item:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
}

.bds-menu-item-content {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--bds-spacer-layout-1);
    box-sizing: border-box;
    width: 100%;
}

.bds-menu-item-content a {
    display: flex;
    width: 100%;
    color: inherit;
    text-decoration: none;
}


/* ===== BdsMessage.razor.css ===== */
.bds-message {
    display: flex;
    align-items: flex-start;
    gap: var(--bds-spacer-layout-1);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    text-align: left;
}

.bds-message--warning {
    color: var(--bds-color-danger-bold-10);
}

.bds-message-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--bds-color-danger-bold-10);
}

.bds-message-content {
    flex: 1;
}


/* ===== BdsNavigationLink.razor.css ===== */
.bds-navigation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bds-spacer-layout-1);
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    text-decoration: none;
    border: none;
    border-radius: var(--bds-border-shape-m);
    background-color: var(--bds-color-background-10);
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.bds-navigation-link:hover {
    background-color: var(--bds-color-neutral-30);
}

.bds-navigation-link.active {
    color: var(--bds-color-accent-bold-10);
    background-color: var(--bds-color-background-30);
}

.bds-navigation-link.active:hover {
    color: var(--bds-color-accent-bold-20);
    background-color: var(--bds-color-neutral-40);
}

.bds-navigation-link.small {
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-2);
    border-radius: var(--bds-border-shape-s);
}

.bds-navigation-link.large {
    padding: var(--bds-spacer-inset-l) var(--bds-spacer-content-4);
    font-size: var(--bds-typography-font-size-5);
    line-height: var(--bds-typography-line-height-5);
    border-radius: var(--bds-border-shape-l);
}

.bds-navigation-link.full-span {
    width: 100%;
}

.bds-navigation-link.icon-only {
    padding: var(--bds-spacer-content-2);
}

.bds-navigation-link-icon,
.bds-navigation-link-prefix,
.bds-navigation-link-suffix {
    display: inline-flex;
    align-items: center;
}

.bds-navigation-link:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}


/* ===== BdsOption.razor.css ===== */
.bds-option {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.bds-option:hover:not(.disabled) {
    background-color: var(--bds-color-neutral-20);
}

.bds-option.selected {
    background-color: var(--bds-color-accent-20);
    color: var(--bds-color-accent-bold-10);
    font-weight: var(--bds-typography-font-weight-bold);
}

.bds-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* ===== BdsPaginator.razor.css ===== */
.bds-paginator-container {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 var(--bds-spacer-layout-4);
    width: 100%;
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-paginator-container.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.bds-paginator-counter {
    margin: 0;
}

.bds-paginator-items-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-paginator-items-controls p {
    margin: 0;
    white-space: nowrap;
}

.bds-paginator-select {
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-2);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    border: var(--bds-border-width-m) solid var(--bds-color-divider-bold-10);
    border-radius: var(--bds-border-shape-s);
    background: var(--bds-color-field);
    cursor: pointer;
    outline: none;
    width: 80px;
}

.bds-paginator-select:focus {
    border-color: var(--bds-color-focus-primary);
    outline: var(--bds-border-width-l) solid var(--bds-color-focus-primary);
    outline-offset: calc(-1 * var(--bds-border-width-l));
}

.bds-paginator-page-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-paginator-page-controls p {
    margin: 0;
    white-space: nowrap;
}

.bds-paginator-nav-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-paginator-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--bds-border-shape-s);
    cursor: pointer;
    color: var(--bds-color-text-primary);
    transition: background-color 0.1s ease;
}

.bds-paginator-btn:hover:not(:disabled) {
    background-color: var(--bds-color-neutral-20);
}

.bds-paginator-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bds-paginator-btn:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}


/* ===== BdsPanel.razor.css ===== */
.bds-panel {
    display: block;
    width: 100%;
}


/* ===== BdsPanelTitle.razor.css ===== */
.bds-panel-title {
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #505052;
    line-height: 32px;
    letter-spacing: .04em;
    height:32px;
}

/* ===== BdsPanelTitleContainer.razor.css ===== */
.bds-panel-title-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap:1rem;
    margin-top:28px;
    margin-bottom: .5em;
    line-height: 2rem;
}

/* ===== BdsPopover.razor.css ===== */
.bds-popover-host {
    position: relative;
    display: inline-flex;
}

.bds-popover {
    position: absolute;
    z-index: 100;
    width: var(--bds-popover-width, 368px);
    min-width: 200px;
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-background-10);
    box-shadow:
        0 10px 30px 0 var(--bds-color-popover-shadow),
        0 4px 40px 0 var(--bds-color-popover-shadow),
        0 0 2px 0 var(--bds-color-popover-shadow);
}

.bds-popover--top,
.bds-popover--top-start,
.bds-popover--top-end {
    bottom: calc(100% + 8px);
}

.bds-popover--bottom,
.bds-popover--bottom-start,
.bds-popover--bottom-end {
    top: calc(100% + 8px);
}

.bds-popover--top-end,
.bds-popover--bottom-end {
    right: 0;
}

.bds-popover--top-start,
.bds-popover--bottom-start {
    left: 0;
}

.bds-popover--top,
.bds-popover--bottom {
    left: 50%;
    transform: translateX(-50%);
}

.bds-popover--right,
.bds-popover--right-start,
.bds-popover--right-end {
    left: calc(100% + 8px);
}

.bds-popover--left,
.bds-popover--left-start,
.bds-popover--left-end {
    right: calc(100% + 8px);
}

.bds-popover-heading {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--bds-spacer-content-4) var(--bds-spacer-content-4) var(--bds-spacer-content-2);
}

.bds-popover-heading-text {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-5);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-5);
    letter-spacing: var(--bds-typography-letter-spacing-wide);
    word-break: break-all;
    overflow-wrap: break-word;
}

.bds-popover-description {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-popover-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 4px;
    background: none;
    border: none;
    border-radius: var(--bds-border-shape-s);
    cursor: pointer;
    color: var(--bds-color-text-primary);
    flex-shrink: 0;
}

.bds-popover-close:hover {
    background: var(--bds-color-background-20);
}

.bds-popover-content {
    padding: var(--bds-spacer-content-4);
    color: var(--bds-color-text-primary);
    overflow: hidden;
    border-bottom-right-radius: var(--bds-border-shape-m);
    border-bottom-left-radius: var(--bds-border-shape-m);
}


/* ===== BdsProgressBar.razor.css ===== */
.bds-progress-bar-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background-color: var(--bds-color-accent-20);
}

.bds-progress-bar-container.warn {
    background-color: var(--bds-color-danger-20);
}

.bds-progress-bar {
    height: 100%;
    border-radius: 99px;
    background-color: var(--bds-color-accent-bold-10);
    transition: width 0.3s ease-in-out;
}

.bds-progress-bar.warn {
    background-color: var(--bds-color-danger-bold-10);
}

.bds-progress-bar-indeterminate {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.bds-progress-bar-indeterminate::after {
    position: absolute;
    left: -50%;
    width: 50%;
    height: 100%;
    background-color: var(--bds-color-accent-bold-10);
    animation: bds-indeterminate 2.5s ease-in 0.5s infinite;
    content: '';
}

.bds-progress-bar-indeterminate.warn::after {
    background-color: var(--bds-color-danger-bold-10);
}

@keyframes bds-indeterminate {
    0% { transform: translateX(0); }
    100% { transform: translateX(400%); }
}


/* ===== BdsProportionField.razor.css ===== */
.bds-proportion-field-label {
    display: block;
    margin-bottom: var(--bds-spacer-layout-1);
    color: var(--bds-color-text-secondary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-wide);
}

.bds-proportion-field-wrapper {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-proportion-field-width, auto);
    min-width:100px;
}

.bds-proportion-field-left,
.bds-proportion-field-right {
    /*flex: 1;*/
}

.bds-proportion-field-separator {
    color: var(--bds-color-text-secondary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    flex-shrink: 0;
}

.bds-proportion-field-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
    margin-top: var(--bds-spacer-layout-1);
}

.bds-proportion-field-validation {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    color: var(--bds-color-danger-bold-10);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
    margin-top: var(--bds-spacer-layout-1);
}


/* ===== BdsRadio.razor.css ===== */
.bds-radio-wrapper {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--bds-spacer-layout-1);
    cursor: pointer;
    outline: none;
}

.bds-radio-wrapper:focus-visible .bds-radio-frame {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}

.bds-radio-wrapper.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.bds-radio-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    height: 14px;
    margin-top: 2px;
    border: var(--bds-border-width-m) solid var(--bds-color-neutral-bold-10);
    border-radius: 50%;
    background-color: var(--bds-color-background-10);
    flex-shrink: 0;
}

.bds-radio-frame.selected {
    border-color: var(--bds-color-icon-primary);
}

.bds-radio-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bds-color-icon-primary);
}

.bds-radio-value {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    cursor: pointer;
}


/* ===== BdsRadioGroup.razor.css ===== */
.bds-radio-group {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
}

.bds-radio-group-label {
    display: block;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    padding: 0;
    border: none;
    margin-bottom: var(--bds-spacer-layout-1);
}

.bds-radio-group-items {
    display: flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
}

.bds-radio-group-items.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--bds-spacer-layout-2);
}

.bds-radio-group-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
}


/* ===== BdsRadioGroupItem.razor.css ===== */
.bds-radio-wrapper {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--bds-spacer-layout-1);
    cursor: pointer;
    outline: none;
}

.bds-radio-wrapper:focus-visible .bds-radio-frame {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}

.bds-radio-wrapper.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.bds-radio-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    height: 14px;
    margin-top: 2px;
    border: var(--bds-border-width-m) solid var(--bds-color-neutral-bold-10);
    border-radius: 50%;
    background-color: var(--bds-color-background-10);
    flex-shrink: 0;
}

.bds-radio-frame.selected {
    border-color: var(--bds-color-icon-primary);
}

.bds-radio-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bds-color-icon-primary);
}

.bds-radio-value {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    cursor: pointer;
}


/* ===== BdsSearch.razor.css ===== */
.bds-search-host {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-input-width, 336px);
}

.bds-search-host.full-span {
    width: 100%;
}

.bds-search-label {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
}

.bds-search-wrapper {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    width: 100%;
    min-height: 40px;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    outline: var(--bds-border-width-m) solid var(--bds-color-divider-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-m));
    background: var(--bds-color-field);
    box-sizing: border-box;
    transition: outline-color 0.1s ease;
}

.bds-search-wrapper:focus-within {
    outline: var(--bds-border-width-l) solid var(--bds-color-focus-primary);
    outline-offset: calc(-1 * var(--bds-border-width-l));
}

.bds-search-wrapper:not(.invalid):not(.disabled):hover {
    outline-color: var(--bds-color-divider-bold-20);
}

.bds-search-wrapper.invalid {
    outline: var(--bds-border-width-l) solid var(--bds-color-danger-bold-10);
}

.bds-search-wrapper.disabled {
    background-color: var(--bds-color-neutral-20);
    background-image: repeating-linear-gradient(
        135deg,
        var(--bds-color-neutral-20) 0%,
        var(--bds-color-neutral-20) 5px,
        var(--bds-color-field) 5px,
        var(--bds-color-field) 10px
    );
    pointer-events: none;
}

.bds-search-wrapper.small { min-height: 32px; padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-1); border-radius: var(--bds-border-shape-s); }
.bds-search-wrapper.large { min-height: 48px; padding: var(--bds-spacer-inset-l) var(--bds-spacer-content-4); border-radius: var(--bds-border-shape-l); }

.bds-search-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--bds-color-text-tertiary);
}

.bds-search-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-search-input::placeholder {
    color: var(--bds-color-text-placeholder);
    font-weight: var(--bds-typography-font-weight-normal);
}

.bds-search-input::-webkit-search-decoration,
.bds-search-input::-webkit-search-cancel-button {
    appearance: none;
}

.bds-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bds-color-text-tertiary);
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

.bds-search-clear:hover { color: var(--bds-color-text-primary); }

.bds-search-validation {
    color: var(--bds-color-danger-bold-10);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
}


/* ===== BdsSegmentedControl.razor.css ===== */
.bds-segmented-control-host {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bds-spacer-layout-1);
}

.bds-segmented-label {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
}

.bds-segmented-control-wrapper {
    display: inline-flex;
    padding: var(--bds-spacer-content-1);
    align-items: flex-start;
    border-radius: var(--bds-border-shape-m);
    gap: 2px;
    background-color: var(--bds-color-neutral-20);
}

.bds-segmented-control-wrapper.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.bds-segmented-control-wrapper.readonly {
    cursor: default;
    pointer-events: none;
}

.bds-segmented-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
}


/* ===== BdsSegmentedControlItem.razor.css ===== */
.bds-segmented-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bds-spacer-layout-1);
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-3);
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    border: none;
    border-radius: var(--bds-border-shape-s);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
}

.bds-segmented-item:hover:not(:disabled) {
    color: var(--bds-color-text-primary);
}

.bds-segmented-item.selected {
    color: var(--bds-color-text-primary);
    background-color: var(--bds-color-background-10);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
    font-weight: var(--bds-typography-font-weight-bold);
}

.bds-segmented-item:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: -2px;
}


/* ===== BdsSelect.razor.css ===== */
.bds-select-host {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-select-width, auto);
    min-width:100px;
    position: relative;
    color: var(--bds-color-text-primary);
}

.bds-select-host.full-span {
    width: 100%;
}

.bds-select-label {
    display: flex;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-select-wrapper {
    display: flex;
    align-items: center;
    align-self: stretch;
    min-height: 40px;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    outline: var(--bds-border-width-m) solid var(--bds-color-divider-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-m));
    background: var(--bds-color-field);
    cursor: pointer;
    gap: var(--bds-spacer-layout-1);
    width: 100%;
    box-sizing: border-box;
}

.bds-select-wrapper:hover:not(.disabled):not(.readonly):not(.invalid) {
    outline-color: var(--bds-color-divider-bold-20);
}

.bds-select-wrapper.invalid {
    outline: var(--bds-border-width-l) solid var(--bds-color-danger-bold-10);
}

.bds-select-wrapper.disabled {
    outline-color: var(--bds-color-divider-10);
    background-color: var(--bds-color-neutral-20);
    background-image: repeating-linear-gradient(
        135deg,
        var(--bds-color-neutral-20) 0%,
        var(--bds-color-neutral-20) 5px,
        var(--bds-color-field) 5px,
        var(--bds-color-field) 10px
    );
    cursor: not-allowed;
    pointer-events: none;
}

.bds-select-wrapper.readonly {
    outline-color: var(--bds-color-divider-10);
    background-color: var(--bds-color-neutral-10);
    cursor: default;
    pointer-events: none;
}

.bds-select-wrapper.small {
    min-height: 32px;
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-1);
    border-radius: var(--bds-border-shape-s);
}

.bds-select-wrapper.large {
    min-height: 48px;
    padding: var(--bds-spacer-inset-l) var(--bds-spacer-content-4);
    border-radius: var(--bds-border-shape-l);
}

.bds-select-display {
    flex: 1;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.bds-select-display.placeholder {
    color: var(--bds-color-text-placeholder);
    font-weight: var(--bds-typography-font-weight-normal);
}

.bds-select-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bds-color-text-tertiary);
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

.bds-select-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--bds-color-text-tertiary);
    transition: transform 0.15s ease;
}

.bds-select-arrow.open {
    transform: rotate(180deg);
}

.bds-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bds-color-background-10);
    border-radius: var(--bds-border-shape-m);
    box-shadow:
        0px 4px 16px 0px var(--bds-color-popover-shadow),
        0px 2px 8px 0px var(--bds-color-popover-shadow);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    padding: var(--bds-spacer-content-1) 0;
    margin-top: var(--bds-spacer-layout-1);
}

.bds-select-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-3);
}

.bds-select-validation {
    color: var(--bds-color-danger-bold-10);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
}


/* ===== BdsSidenav.razor.css ===== */
.bds-sidenav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--bds-sidenav-z-index-backdrop, 999);
    background: var(--bds-color-dialog-backdrop, rgba(0,0,0,0.3));
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.bds-sidenav-backdrop.open {
    opacity: 1;
    transition: opacity 0.15s ease-out;
    pointer-events: auto;
}

.bds-sidenav-backdrop.closing {
    opacity: 0;
    transition: opacity 0.18s ease-in;
}

.bds-sidenav {
    position: fixed;
    top: var(--bds-sidenav-top, 0px);
    bottom: var(--bds-sidenav-bottom, 0px);
    z-index: var(--bds-sidenav-z-index, 1000);
    display: flex;
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: var(--bds-sidenav-width, 360px);
    min-width: 200px;
    max-width: 80vw;
    background: var(--bds-color-background-10);
    font-family: var(--bds-typography-font-family-default);
    pointer-events: auto;
}

.bds-sidenav.left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
    transition: transform 0.18s ease-in;
    border-right: 1px transparent solid;
}

.bds-sidenav.right {
    right: 0;
    left: auto;
    transform: translateX(100%);
    transition: transform 0.18s ease-in;
    border-left: 1px transparent solid;
}

.bds-sidenav.left.open {
    transform: translateX(0);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
    border-right-color: var(--bds-color-divider-10);
    box-shadow:
        0px 10px 30px 0px var(--bds-color-popover-shadow),
        0px 4px 40px 0px var(--bds-color-popover-shadow),
        0px 0px 2px 0px var(--bds-color-popover-shadow);
}

.bds-sidenav.right.open {
    transform: translateX(0);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
    border-left-color: var(--bds-color-divider-10);
    box-shadow:
        0px 10px 30px 0px var(--bds-color-popover-shadow),
        0px 4px 40px 0px var(--bds-color-popover-shadow),
        0px 0px 2px 0px var(--bds-color-popover-shadow);
}

.bds-sidenav.closing {
    transition: transform 0.18s ease-in !important;
    transform: translateX(-100%) !important;
}

.bds-sidenav.right.closing {
    transform: translateX(100%) !important;
}

@media screen and (max-width: 768px) {
    .bds-sidenav { max-width: 95vw; }
}

.bds-sidenav-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    padding: var(--bds-spacer-content-4);
    flex-shrink: 0;
}

.bds-sidenav-title {
    margin: 0;
    color: var(--bds-color-text-primary);
    font-size: var(--bds-typography-font-size-6);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-6);
    letter-spacing: var(--bds-typography-letter-spacing-wide);
}

.bds-sidenav-close {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bds-spacer-content-1);
    background: none;
    border: none;
    border-radius: var(--bds-border-shape-s);
    cursor: pointer;
    color: var(--bds-color-text-tertiary);
    flex-shrink: 0;
}

.bds-sidenav-close:hover {
    color: var(--bds-color-text-primary);
    background-color: var(--bds-color-neutral-20);
}

.bds-sidenav-content {
    overflow: auto;
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100%;
    padding: 0 var(--bds-spacer-content-4) var(--bds-spacer-content-4);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bds-spacer-layout-2);
    color: var(--bds-color-text-primary);
}


/* ===== BdsSlideToggle.razor.css ===== */
.bds-slide-toggle-wrapper {
    display: inline-flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-slide-toggle-width, auto);
}

.bds-slide-toggle-label {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
}

.bds-slide-toggle-container {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-slide-toggle-container.left { flex-direction: row-reverse; }
.bds-slide-toggle-container.right { flex-direction: row; }
.bds-slide-toggle-container.top { flex-direction: column-reverse; align-items: flex-start; }
.bds-slide-toggle-container.bottom { flex-direction: column; align-items: flex-start; }

.bds-slide-toggle-value {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-toggle {
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 24px;
    border-radius: var(--bds-border-shape-2xl);
    outline: 0;
    background-color: var(--bds-color-neutral-bold-10);
    transition: background-color 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.bds-toggle::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: var(--bds-border-shape-2xl);
    background-color: var(--bds-palette-white);
    transition: transform 0.2s ease;
    content: '';
}

.bds-toggle.small {
    width: 28px;
    min-width: 28px;
    height: 16px;
}

.bds-toggle.small::after {
    width: 12px;
    height: 12px;
}

.bds-toggle.checked {
    background-color: var(--bds-color-accent-bold-10);
}

.bds-toggle.checked::after {
    transform: translateX(20px);
}

.bds-toggle.small.checked::after {
    transform: translateX(12px);
}

.bds-toggle.alternative {
    background-color: var(--bds-color-danger-bold-10);
}

.bds-toggle.alternative.checked {
    background-color: var(--bds-color-success-bold-10);
}

.bds-toggle:hover:not([aria-disabled="true"]):not(.alternative) {
    background-color: var(--bds-color-neutral-bold-20);
}

.bds-toggle.checked:hover:not([aria-disabled="true"]):not(.alternative) {
    background-color: var(--bds-color-accent-bold-20);
}

.bds-toggle:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}

.bds-toggle[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ===== BdsSlider.razor.css ===== */
.bds-slider-container {
    display: flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
    box-sizing: border-box;
    width: var(--bds-slider-width, 336px);
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
}

.bds-slider-container.full-span {
    width: 100%;
}

.bds-slider-label-row {
    display: flex;
    justify-content: space-between;
    color: var(--bds-color-text-primary);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bds-spacer-layout-1);
}

.bds-slider-min-value,
.bds-slider-max-value {
    padding: var(--bds-spacer-layout-1);
    color: var(--bds-color-text-primary);
    font-size: var(--bds-typography-font-size-4);
    line-height: var(--bds-typography-line-height-5);
    white-space: nowrap;
    flex-shrink: 0;
}

.bds-slider-min-value.disabled,
.bds-slider-max-value.disabled {
    color: var(--bds-color-neutral-bold-disabled);
}

.bds-slider-range-container {
    position: relative;
    flex: 1;
    height: 30px;
    display: flex;
    align-items: center;
}

.bds-slider-track {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-neutral-bold-10);
    z-index: 1;
    pointer-events: none;
}

.bds-slider-range-container:not(.disabled):hover .bds-slider-track {
    background: var(--bds-color-neutral-bold-20);
}

.bds-slider-range-container.disabled .bds-slider-track {
    background: var(--bds-color-neutral-bold-disabled);
}

.bds-slider-fill-track {
    position: absolute;
    left: 0;
    height: 4px;
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-accent-bold-10);
    transition: width 0.1s ease;
    z-index: 2;
    pointer-events: none;
}

.bds-slider-range-container.disabled .bds-slider-fill-track {
    background: var(--bds-color-accent-bold-disabled);
}

.bds-slider-range-container input[type='range'] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    appearance: none;
    cursor: pointer;
}

.bds-slider-range-container input[type='range']:disabled {
    cursor: not-allowed;
}

.bds-slider-range-container input[type='range']:focus {
    outline: none;
}

.bds-slider-range-container input[type='range']::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--bds-color-accent-bold-10);
    border-radius: 50%;
    background: var(--bds-color-background-10);
    appearance: none;
    position: relative;
    z-index: 5;
    transition: width 0.1s ease, height 0.1s ease;
}

.bds-slider-range-container:not(.disabled):hover input[type='range']::-webkit-slider-thumb,
.bds-slider-range-container input[type='range']:focus-visible::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
}

.bds-slider-range-container input[type='range']:disabled::-webkit-slider-thumb {
    border-color: var(--bds-color-accent-bold-disabled);
}

.bds-slider-range-container.empty input[type='range']::-webkit-slider-thumb {
    border-color: var(--bds-color-neutral-bold-10);
}

.bds-slider-range-container input[type='range']::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--bds-color-accent-bold-10);
    border-radius: 50%;
    background: var(--bds-color-background-10);
    appearance: none;
}

.bds-slider-value-input {
    width: 64px;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-2);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    border: none;
    border-radius: var(--bds-border-shape-m);
    outline: var(--bds-border-width-m) solid var(--bds-color-divider-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-m));
    background-color: transparent;
    text-align: center;
    appearance: textfield;
    flex-shrink: 0;
}

.bds-slider-value-input:focus {
    outline: var(--bds-border-width-l) solid var(--bds-color-focus-primary);
}

.bds-slider-helper {
    color: var(--bds-color-text-tertiary);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
}


/* ===== BdsSnackbar.razor.css ===== */
.bds-snackbar {
    display: inline-flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    padding: var(--bds-spacer-content-2) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-background-inverse);
    color: var(--bds-color-text-on-color);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    box-shadow:
        0px 4px 16px 0px var(--bds-color-popover-shadow),
        0px 2px 8px 0px var(--bds-color-popover-shadow);
    animation: bds-snackbar-slide-in 0.2s ease forwards;
    z-index: 2000;
    max-width: 480px;
    min-width: 200px;
}

.bds-snackbar.closing {
    animation: bds-snackbar-slide-out 0.2s ease forwards;
}

/* Variants */
.bds-snackbar.neutral { background: var(--bds-color-neutral-bold-10); }
.bds-snackbar.primary { background: var(--bds-color-accent-bold-10); }
.bds-snackbar.warn { background: var(--bds-color-danger-bold-10); }
.bds-snackbar.success { background: var(--bds-color-success-bold-10); }
.bds-snackbar.draft { background: var(--bds-color-warning-50); color: var(--bds-color-text-primary); }
.bds-snackbar.magic { background: var(--bds-color-magic-bold-10); }

.bds-snackbar-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.bds-snackbar-message {
    flex: 1;
}

.bds-snackbar-actions {
    display: inline-flex;
    gap: var(--bds-spacer-layout-1);
    flex-shrink: 0;
}

.bds-snackbar-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    flex-shrink: 0;
    border-radius: var(--bds-border-shape-xs);
}

.bds-snackbar-close:hover {
    opacity: 1;
    background-color: rgba(255,255,255,0.15);
}

@keyframes bds-snackbar-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bds-snackbar-slide-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(8px); }
}


/* ===== BdsSortHeader.razor.css ===== */
.bds-sort-header {
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-wider);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--bds-color-background-10);
    vertical-align: middle;
}

.bds-sort-header.sortable {
    cursor: pointer;
    user-select: none;
}

.bds-sort-header.sortable:hover {
    color: var(--bds-color-text-primary);
    background-color: var(--bds-color-neutral-10);
}

.bds-sort-header.sortable:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: calc(-1 * var(--bds-border-width-l));
}

.bds-sort-header.sorted-asc,
.bds-sort-header.sorted-desc {
    color: var(--bds-color-accent-bold-10);
}

.bds-sort-header-content {
    display: inline-flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-sort-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.1s ease;
}

.bds-sort-header.sortable:hover .bds-sort-icon,
.bds-sort-header.sorted-asc .bds-sort-icon,
.bds-sort-header.sorted-desc .bds-sort-icon {
    opacity: 1;
}

.bds-sort-header.sorted-asc .bds-sort-icon,
.bds-sort-header.sorted-desc .bds-sort-icon {
    color: var(--bds-color-accent-bold-10);
}


/* ===== BdsSpinner.razor.css ===== */
.bds-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-spinner.position-left {
    flex-direction: row;
}

.bds-spinner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bds-spinner.position-left .bds-spinner-content {
    align-items: flex-start;
}

.bds-spinner-message {
    color: var(--bds-color-text-primary);
    font-size: var(--bds-typography-font-size-5);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-5);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-spinner-description {
    color: var(--bds-color-text-tertiary);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
}

.bds-spinner svg {
    animation: bds-spinner-rotate 2s linear infinite;
}

.bds-spinner circle {
    animation: bds-spinner-dash32 1.4s ease-in-out infinite;
    fill: none;
    stroke: var(--bds-color-accent-bold-10);
}

.bds-spinner.size-large circle {
    animation: bds-spinner-dash64 1.4s ease-in-out infinite;
}

.bds-spinner.size-small circle {
    animation: bds-spinner-dash16 1.4s ease-in-out infinite;
}

@keyframes bds-spinner-rotate {
    100% { transform: rotate(360deg); }
}

@keyframes bds-spinner-dash64 {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; }
    100% { stroke-dasharray: 90, 200; stroke-dashoffset: -180px; }
}

@keyframes bds-spinner-dash32 {
    0% { stroke-dasharray: 0.5, 100; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 45, 100; stroke-dashoffset: -18px; }
    100% { stroke-dasharray: 45, 100; stroke-dashoffset: -90px; }
}

@keyframes bds-spinner-dash16 {
    0% { stroke-dasharray: 0.25, 50; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 22.5, 50; stroke-dashoffset: -9px; }
    100% { stroke-dasharray: 22.5, 50; stroke-dashoffset: -45px; }
}


/* ===== BdsSplitButton.razor.css ===== */
.bds-split-button {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
}

.bds-split-button-left.bds-button,
.bds-split-button-left button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bds-split-button-right.bds-button,
.bds-split-button-right button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/* ===== BdsSplitField.razor.css ===== */
.bds-split-field-label {
    display: block;
    margin-bottom: var(--bds-spacer-layout-1);
    color: var(--bds-color-text-secondary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-wide);
}

.bds-split-field-wrapper {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    width: 100%;
}

.bds-split-field-left,
.bds-split-field-right {
    /*//flex: 1;*/
}

.bds-split-field-separator {
    color: var(--bds-color-text-secondary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    flex-shrink: 0;
}

.bds-split-field-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
    margin-top: var(--bds-spacer-layout-1);
}

.bds-split-field-validation {
    color: var(--bds-color-danger-bold-10);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
    margin-top: var(--bds-spacer-layout-1);
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
}


/* ===== BdsStepper.razor.css ===== */
.bds-stepper {
    display: inline-flex;
    align-items: flex-start;
}

.bds-stepper.horizontal {
    flex-direction: row;
    align-items: center;
}

.bds-stepper.vertical {
    flex-direction: column;
}


/* ===== BdsStepperItem.razor.css ===== */
.bds-stepper-item {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-stepper-step {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    flex-shrink: 0;
}

.bds-stepper-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--bds-color-neutral-20);
    border: var(--bds-border-width-m) solid var(--bds-color-neutral-bold-10);
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bds-stepper-item.active .bds-stepper-indicator {
    background-color: var(--bds-color-accent-bold-10);
    border-color: var(--bds-color-accent-bold-10);
    color: var(--bds-color-text-on-color);
}

.bds-stepper-item.completed .bds-stepper-indicator {
    background-color: var(--bds-color-accent-20);
    border-color: var(--bds-color-accent-bold-10);
    color: var(--bds-color-accent-bold-10);
}

.bds-stepper-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bds-stepper-label {
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    white-space: nowrap;
}

.bds-stepper-item.active .bds-stepper-label {
    color: var(--bds-color-accent-bold-10);
}

.bds-stepper-description {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
}

.bds-stepper-connector {
    flex: 1;
    height: 1px;
    min-width: var(--bds-spacer-layout-2);
    background-color: var(--bds-color-divider-10);
    margin: 0 var(--bds-spacer-layout-1);
}

.bds-stepper-connector.completed {
    background-color: var(--bds-color-accent-bold-10);
}


/* ===== BdsTable.razor.css ===== */
.bds-table-container {
    display: block;
    width: 100%;
    overflow-x: auto;
    /*border-radius: var(--bds-border-shape-m);*/
    /*border: 1px solid var(--bds-color-divider-10);*/
}

.bds-table {
    width: auto;
    border-collapse: collapse;
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    color: var(--bds-color-text-primary);
}

.bds-table.full-width {
    width: 100%;
}

/* thead */
.bds-table > thead tr {
    border-bottom: 1px solid var(--bds-color-divider-10);
}

.bds-table > thead th {
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    color: var(--bds-color-text-tertiary);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    font-style: normal;
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-wider);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--bds-color-background-10);
    vertical-align: middle;
}

.bds-table.sticky-header > thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* tbody */
.bds-table tbody > tr {
    border-bottom: 1px solid var(--bds-color-divider-10);
    transition: background-color 0.1s ease;
    height: 52px;
}

.bds-table tbody > tr:last-child {
    border-bottom: none;
}

.bds-table > tbody tr:hover {
    background-color: var(--bds-color-background-20);
}

.bds-table > td {
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    vertical-align: middle;
    color: var(--bds-color-text-primary);
}

/* tfoot */
.bds-table > tfoot td {
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    border-top: 2px solid var(--bds-color-divider-10);
    background: var(--bds-color-background-10);
}


/* ===== BdsTabs.razor.css ===== */
.bds-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.bds-tabs.position-below {
    flex-direction: column-reverse;
}

.bds-tabs-list {
    display: flex;
    flex-direction: row;
    /*border-bottom: var(--bds-border-width-m) solid var(--bds-color-divider-10);*/
    gap: var(--bds-spacer-layout-1);
}

.bds-tabs.position-below .bds-tabs-list {
    border-bottom: none;
    border-top: var(--bds-border-width-m) solid var(--bds-color-divider-10);
}

.bds-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.bds-tab:hover:not(.disabled) {
    /*color: var(--bds-color-text-primary);*/
    /*background-color: var(--bds-color-neutral-20);*/
    /*border-radius: var(--bds-border-shape-s) var(--bds-border-shape-s) 0 0;*/
}

.bds-tab.active {
    color: var(--bds-color-accent-bold-10);
    border-bottom-color: var(--bds-color-accent-bold-10);
}

.bds-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bds-tab:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}

.bds-tabs-panels {
    padding-top: var(--bds-spacer-layout-2);
}


/* ===== BdsTag.razor.css ===== */
.bds-tag-wrapper {
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    align-self: center;
    gap: var(--bds-spacer-content-1);
    width: min-content;
    max-width: 95%;
    margin: 0;
    padding: 0 var(--bds-spacer-content-2);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    font-family: var(--bds-typography-font-family-default);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--bds-border-shape-3xl);
}

.bds-tag-wrapper.has-icon {
    padding-left: var(--bds-spacer-content-1);
}

.bds-tag-wrapper.clickable {
    cursor: pointer;
    outline: none;
}

.bds-tag-wrapper.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* Neutral */
.bds-tag-wrapper.neutral { color: var(--bds-color-text-primary); background-color: var(--bds-color-neutral-20); }
.bds-tag-wrapper.neutral.clickable:hover { outline: var(--bds-border-width-m) solid var(--bds-color-text-primary); }
.bds-tag-wrapper.neutral.bold { color: var(--bds-color-text-on-color); background-color: var(--bds-color-neutral-bold-10); }
.bds-tag-wrapper.neutral.bold.clickable:hover { background-color: var(--bds-color-neutral-bold-20); outline: none; }

/* Primary */
.bds-tag-wrapper.primary { color: var(--bds-color-accent-bold-30); background-color: var(--bds-color-accent-30); }
.bds-tag-wrapper.primary.clickable:hover { outline: var(--bds-border-width-m) solid var(--bds-color-accent-bold-30); }
.bds-tag-wrapper.primary.bold { color: var(--bds-color-text-on-color); background-color: var(--bds-color-accent-bold-10); }
.bds-tag-wrapper.primary.bold.clickable:hover { background-color: var(--bds-color-accent-bold-20); outline: none; }

/* Warn */
.bds-tag-wrapper.warn { color: var(--bds-color-danger-bold-30); background-color: var(--bds-color-danger-30); }
.bds-tag-wrapper.warn.clickable:hover { outline: var(--bds-border-width-m) solid var(--bds-color-danger-bold-30); }
.bds-tag-wrapper.warn.bold { color: var(--bds-color-text-on-color); background-color: var(--bds-color-danger-bold-10); }
.bds-tag-wrapper.warn.bold.clickable:hover { background-color: var(--bds-color-danger-bold-20); outline: none; }

/* Draft */
.bds-tag-wrapper.draft { color: var(--bds-color-warning-bold-30); background-color: var(--bds-color-warning-30); }
.bds-tag-wrapper.draft.bold { color: var(--bds-color-text-secondary); background-color: var(--bds-color-warning-50); }

/* Success */
.bds-tag-wrapper.success { color: var(--bds-color-success-bold-30); background-color: var(--bds-color-success-30); }
.bds-tag-wrapper.success.bold { color: var(--bds-color-text-on-color); background-color: var(--bds-color-success-bold-10); }

/* Magic */
.bds-tag-wrapper.magic { color: var(--bds-color-magic-bold-30); background-color: var(--bds-color-magic-30); }
.bds-tag-wrapper.magic.bold { color: var(--bds-color-text-on-color); background-color: var(--bds-color-magic-bold-10); }

.bds-tag-icon {
    display: inline-flex;
    align-items: center;
}

.bds-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    border-radius: 50%;
    line-height: 1;
}

.bds-tag-remove:hover {
    opacity: 1;
}


/* ===== BdsTextArea.razor.css ===== */
.bds-textarea-host {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-input-width, 336px);
    color: var(--bds-color-text-primary);
}

.bds-textarea-host.full-span {
    width: 100%;
}

.bds-textarea-label {
    display: flex;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
}

.bds-textarea-wrapper {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--bds-spacer-inset-m) var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    outline: var(--bds-border-width-m) solid var(--bds-color-divider-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-m));
    background: var(--bds-color-field);
    width: 100%;
    box-sizing: border-box;
    gap: var(--bds-spacer-layout-1);
}

.bds-textarea-wrapper:focus-within {
    outline: var(--bds-border-width-l) solid var(--bds-color-focus-primary);
    outline-offset: calc(-1 * var(--bds-border-width-l));
}

.bds-textarea-wrapper.invalid {
    outline: var(--bds-border-width-l) solid var(--bds-color-danger-bold-10);
}

.bds-textarea-wrapper.disabled {
    background-color: var(--bds-color-neutral-20);
    background-image: repeating-linear-gradient(
        135deg,
        var(--bds-color-neutral-20) 0%,
        var(--bds-color-neutral-20) 5px,
        var(--bds-color-field) 5px,
        var(--bds-color-field) 10px
    );
    cursor: not-allowed;
    pointer-events: none;
}

.bds-textarea-wrapper.readonly {
    outline-color: var(--bds-color-divider-10);
    background-color: var(--bds-color-neutral-10);
}

.bds-textarea-input {
    flex: 1;
    width: 100%;
    min-height: 80px;
    padding: 0;
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    border: none;
    outline: none;
    background-color: transparent;
    resize: vertical;
}

.bds-textarea-input::placeholder {
    color: var(--bds-color-text-placeholder);
}

.bds-textarea-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bds-color-text-tertiary);
    font-size: 16px;
    padding: 0 4px;
    align-self: flex-start;
    margin-top: 2px;
}

.bds-textarea-clear:hover {
    color: var(--bds-color-text-primary);
}

.bds-textarea-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-3);
}

.bds-textarea-validation {
    color: var(--bds-color-danger-bold-10);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
}

.bds-textarea-counter {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-normal);
    align-self: flex-end;
}


/* ===== BdsTooltip.razor.css ===== */
.bds-tooltip-host {
    display: inline-flex;
    position: relative;
    cursor: pointer;
}

.bds-tooltip-trigger {
    display: inline-flex;
}

.bds-tooltip {
    position: absolute;
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.1s;
    pointer-events: none;
}

.bds-tooltip.visible {
    display: block;
    box-sizing: border-box;
    width: fit-content;
    max-width: 200px;
    padding: var(--bds-spacer-content-1) var(--bds-spacer-content-2);
    color: var(--bds-color-text-on-color);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    border-radius: 4px;
    background: var(--bds-color-background-inverse);
    opacity: 1;
    pointer-events: none;
}

/* Position: top */
.bds-tooltip.visible.top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

/* Position: bottom */
.bds-tooltip.visible.bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

/* Position: left */
.bds-tooltip.visible.left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

/* Position: right */
.bds-tooltip.visible.right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.bds-tooltip-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--bds-color-background-inverse);
    transform: rotate(45deg);
}

.bds-tooltip.top .bds-tooltip-arrow {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
}

.bds-tooltip.bottom .bds-tooltip-arrow {
    top: -5px;
    left: 50%;
    margin-left: -5px;
}

.bds-tooltip.left .bds-tooltip-arrow {
    right: -5px;
    top: 50%;
    margin-top: -5px;
}

.bds-tooltip.right .bds-tooltip-arrow {
    left: -5px;
    top: 50%;
    margin-top: -5px;
}

.bds-tooltip-content {
    position: relative;
    z-index: 1;
}


/* ===== BdsTopNavigation.razor.css ===== */
.bds-top-nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--bds-top-nav-height, 56px);
    padding: 0 var(--bds-spacer-content-4);
    box-sizing: border-box;
    border-bottom: 1px solid var(--bds-color-divider-10);
    background: var(--bds-color-background-10);
    font-family: var(--bds-typography-font-family-default);
    gap: var(--bds-spacer-layout-2);
}

.bds-top-nav-branding {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    flex-shrink: 0;
}

.bds-top-nav-logo {
    display: inline-flex;
    align-items: center;
}

.bds-top-nav-title {
    color: var(--bds-color-text-primary);
    font-size: var(--bds-typography-font-size-5);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-5);
    letter-spacing: var(--bds-typography-letter-spacing-normal);
    white-space: nowrap;
}

.bds-top-nav-start {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
}

.bds-top-nav-spacer {
    flex: 1;
}

.bds-top-nav-end {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    flex-shrink: 0;
}


/* ===== BdsTreeView.razor.css ===== */
.bds-tree-view {
    display: block;
    width: var(--bds-tree-view-width, 304px);
    outline: none;
    font-family: var(--bds-typography-font-family-default);
}

.bds-tree-view:focus-visible {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: 2px;
    border-radius: var(--bds-border-shape-s);
}


/* ===== BdsTreeViewItem.razor.css ===== */
.bds-tree-view-item {
    display: block;
    outline: none;
    width: 100%;
}

.bds-tree-view-item-row {
    display: flex;
    align-items: center;
    gap: var(--bds-spacer-layout-1);
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-2);
    border-radius: var(--bds-border-shape-m);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    cursor: pointer;
    user-select: none;
}

.bds-tree-view-item-row:hover {
    background: var(--bds-color-background-20);
}

.bds-tree-view-item.selected > .bds-tree-view-item-row {
    background: var(--bds-color-accent-subtle-10);
    color: var(--bds-color-accent-bold-10);
    font-weight: var(--bds-typography-font-weight-bold);
}

.bds-tree-view-item.disabled > .bds-tree-view-item-row {
    color: var(--bds-color-text-disabled);
    cursor: not-allowed;
}

.bds-tree-view-item-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    border-radius: var(--bds-border-shape-s);
    cursor: pointer;
    color: var(--bds-color-text-tertiary);
    flex-shrink: 0;
    padding: 0;
}

.bds-tree-view-item-toggle:hover {
    background: var(--bds-color-background-30);
}

.bds-tree-view-item-spacer {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.bds-tree-view-item-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--bds-color-text-tertiary);
}

.bds-tree-view-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bds-tree-view-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.bds-tree-view-item-row:hover .bds-tree-view-item-actions {
    opacity: 1;
}

.bds-tree-view-item-children {
    padding-left: 20px;
}

.bds-tree-view-item-children.with-guide {
    border-left: 1px solid var(--bds-color-divider-10);
    margin-left: 10px;
}

.bds-tree-view-item:focus-visible > .bds-tree-view-item-row {
    outline: var(--bds-border-width-l) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-border-width-l);
}


/* ===== BdsUpload.razor.css ===== */
.bds-upload {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--bds-spacer-layout-1);
    width: var(--bds-upload-width, 336px);
}

.bds-upload-label {
    color: var(--bds-color-text-secondary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    line-height: var(--bds-typography-line-height-3);
    letter-spacing: var(--bds-typography-letter-spacing-wide);
}

.bds-upload-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bds-spacer-layout-1);
    padding: var(--bds-spacer-content-3);
    border-radius: var(--bds-border-shape-m);
    outline: 1px dashed var(--bds-color-divider-bold-10);
    outline-offset: -1px;
    width: 100%;
    box-sizing: border-box;
}

.bds-upload-wrapper.invalid {
    outline: var(--bds-border-width-l) solid var(--bds-color-danger-bold-10);
    outline-offset: calc(-1 * var(--bds-border-width-l));
}

.bds-upload-wrapper.dragover {
    outline: var(--bds-spacer-inset-s) solid var(--bds-focus-outside-2-color);
    outline-offset: var(--bds-spacer-inset-s);
}

.bds-upload-wrapper.disabled {
    background-color: var(--bds-color-neutral-20);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}

.bds-upload-wrapper.readonly {
    background-color: var(--bds-color-neutral-10);
    opacity: 0.7;
}

.bds-upload-dz {
    display: flex;
    align-items: center;
}

.bds-upload-dz-icon {
    display: flex;
    align-items: center;
    color: var(--bds-color-text-tertiary);
}

.bds-upload-dz-text {
    margin-left: var(--bds-spacer-layout-1);
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    cursor: default;
}

.bds-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bds-spacer-inset-s) var(--bds-spacer-content-2);
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-accent-bold-40);
    color: var(--bds-color-text-on-color);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    font-weight: var(--bds-typography-font-weight-bold);
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.bds-upload-button:hover {
    background: var(--bds-color-accent-bold-30);
}

.bds-upload-input {
    display: none;
}

.bds-upload-file-list {
    display: flex;
    flex-direction: column;
    gap: var(--bds-spacer-layout-1);
    width: 100%;
}

.bds-upload-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bds-spacer-layout-2);
    padding: var(--bds-spacer-content-2);
    color: var(--bds-color-text-primary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-4);
    font-weight: var(--bds-typography-font-weight-normal);
    line-height: var(--bds-typography-line-height-4);
    border-radius: var(--bds-border-shape-m);
    background: var(--bds-color-background-20);
}

.bds-upload-file-name {
    display: block;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bds-upload-file-remove {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bds-color-text-tertiary);
    padding: 2px;
    border-radius: var(--bds-border-shape-s);
}

.bds-upload-file-remove:hover {
    color: var(--bds-color-text-primary);
    background: var(--bds-color-background-30);
}

.bds-upload-validation {
    display: flex;
    gap: var(--bds-spacer-layout-1);
    align-items: center;
    color: var(--bds-color-danger-bold-10);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
}

.bds-upload-helper {
    color: var(--bds-color-text-tertiary);
    font-family: var(--bds-typography-font-family-default);
    font-size: var(--bds-typography-font-size-3);
    line-height: var(--bds-typography-line-height-3);
}