.dc-button {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: var(--dc-space-4);
    padding: 0.625rem var(--dc-space-6);
    color: var(--dc-color-text);
    background: var(--dc-color-surface);
    border: var(--dc-border);
    border-radius: var(--dc-radius-sm);
    box-shadow: var(--dc-shadow-sm);
    font-size: var(--dc-text-md);
    font-weight: var(--dc-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        color var(--dc-duration-fast) var(--dc-ease-standard),
        background-color var(--dc-duration-fast) var(--dc-ease-standard),
        border-color var(--dc-duration-fast) var(--dc-ease-standard),
        box-shadow var(--dc-duration-fast) var(--dc-ease-standard);
}

.dc-button:hover {
    color: var(--dc-color-text);
    background: var(--dc-color-surface-subtle);
    border-color: var(--dc-color-border-strong);
}

.dc-button:active {
    background: var(--dc-color-surface-muted);
    box-shadow: none;
}

.dc-button--primary {
    color: #ffffff;
    background: #245a8d;
    border-color: #245a8d;
}

.dc-button--primary:hover {
    color: #ffffff;
    background: #1b4770;
    border-color: #1b4770;
}

.dc-button--primary:active {
    color: #ffffff;
    background: #143956;
    border-color: #143956;
}

.dc-button--block {
    width: 100%;
}

.dc-button--icon {
    width: 2.5rem;
    padding-inline: 0;
}

.dc-button:disabled,
.dc-button[aria-disabled="true"] {
    color: var(--dc-color-text-muted);
    background: var(--dc-color-surface-muted);
    border-color: var(--dc-color-border);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.68;
}

.dc-field {
    display: grid;
    gap: var(--dc-space-3);
}

.dc-field__label {
    color: var(--dc-color-text);
    font-size: var(--dc-text-sm);
    font-weight: var(--dc-weight-semibold);
}

.dc-field__control {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5625rem 0.75rem;
    color: var(--dc-color-text);
    background: var(--dc-color-surface);
    border: var(--dc-border);
    border-radius: var(--dc-radius-sm);
    box-shadow: var(--dc-shadow-sm);
    line-height: 1.35;
    transition:
        border-color var(--dc-duration-fast) var(--dc-ease-standard),
        box-shadow var(--dc-duration-fast) var(--dc-ease-standard),
        background-color var(--dc-duration-fast) var(--dc-ease-standard);
}

.dc-field__control:hover {
    border-color: var(--dc-color-border-strong);
}

.dc-field__control:focus {
    background: var(--dc-color-surface);
    border-color: var(--dc-color-focus);
    outline: 0;
    box-shadow: var(--dc-focus-ring);
}

.dc-field__control::placeholder {
    color: var(--dc-color-text-muted);
    opacity: 1;
}

.dc-field__control:disabled {
    color: var(--dc-color-text-muted);
    background: var(--dc-color-surface-muted);
    cursor: not-allowed;
}

.dc-input-action {
    position: relative;
}

.dc-input-action .dc-field__control {
    padding-right: 2.75rem;
}

.dc-input-action__button {
    position: absolute;
    top: 50%;
    right: var(--dc-space-3);
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    color: var(--dc-color-text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--dc-radius-xs);
    transform: translateY(-50%);
    cursor: pointer;
}

.dc-input-action__button .login-password-icon--hide {
    display: none;
}

.dc-input-action__button[aria-pressed="true"] .login-password-icon--show {
    display: none;
}

.dc-input-action__button[aria-pressed="true"] .login-password-icon--hide {
    display: inline-block;
}

.dc-check {
    display: inline-flex;
    align-items: center;
    gap: var(--dc-space-4);
    color: var(--dc-color-text-secondary);
    font-size: var(--dc-text-sm);
    cursor: pointer;
}

.dc-check input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--dc-color-primary);
}

.dc-alert {
    display: flex;
    gap: var(--dc-space-4);
    padding: var(--dc-space-5) var(--dc-space-6);
    color: var(--dc-color-text);
    background: var(--dc-color-surface-subtle);
    border: var(--dc-border);
    border-radius: var(--dc-radius-sm);
    font-size: var(--dc-text-sm);
}

.dc-alert--danger {
    color: var(--dc-color-danger);
    background: var(--dc-color-danger-soft);
    border-color: color-mix(in srgb, var(--dc-color-danger) 28%, transparent);
}

.dc-status {
    display: inline-flex;
    align-items: center;
    gap: var(--dc-space-3);
    color: var(--dc-color-text-secondary);
    font-size: var(--dc-text-xs);
    font-weight: var(--dc-weight-semibold);
}

.dc-status::before {
    width: 0.375rem;
    height: 0.375rem;
    background: var(--dc-color-success);
    border-radius: 50%;
    content: "";
}

/* Bootstrap-compatible primitives used by the existing Razor pages. */
.dc-app-main :where(.btn) {
    display: inline-flex;
    min-height: 2.375rem;
    align-items: center;
    justify-content: center;
    gap: var(--dc-space-4);
    padding: 0.5rem 0.875rem;
    border-width: 1px;
    border-radius: var(--dc-radius-sm) !important;
    box-shadow: none !important;
    font-size: var(--dc-text-sm);
    font-weight: var(--dc-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    transition:
        color var(--dc-duration-fast) var(--dc-ease-standard),
        background-color var(--dc-duration-fast) var(--dc-ease-standard),
        border-color var(--dc-duration-fast) var(--dc-ease-standard);
}

.dc-app-main :where(.btn-sm) {
    min-height: 2.125rem;
    padding: 0.4375rem 0.75rem;
    font-size: var(--dc-text-xs);
}

.dc-app-main :where(.btn-primary) {
    color: #ffffff;
    background: #245a8d;
    border-color: #245a8d;
}

.dc-app-main :where(.btn-primary:hover, .btn-primary:focus-visible) {
    color: #ffffff;
    background: #1b4770;
    border-color: #1b4770;
}

.dc-app-main :where(.btn-secondary, .btn-outline-secondary) {
    color: var(--dc-color-text-secondary);
    background: var(--dc-color-surface);
    border-color: var(--dc-color-border);
}

.dc-app-main :where(.btn-secondary:hover, .btn-outline-secondary:hover) {
    color: var(--dc-color-text);
    background: var(--dc-color-surface-subtle);
    border-color: var(--dc-color-border-strong);
}

.dc-app-main :where(.btn-outline-primary) {
    color: var(--dc-color-primary);
    background: transparent;
    border-color: color-mix(in srgb, var(--dc-color-primary) 56%, var(--dc-color-border));
}

.dc-app-main :where(.btn-outline-primary:hover) {
    color: #ffffff;
    background: #245a8d;
    border-color: #245a8d;
}

.dc-app-main :where(.btn-danger, .btn-outline-danger) {
    color: var(--dc-color-danger);
    background: var(--dc-color-danger-soft);
    border-color: color-mix(in srgb, var(--dc-color-danger) 34%, var(--dc-color-border));
}

.dc-app-main :where(.btn-danger:hover, .btn-outline-danger:hover) {
    color: #ffffff;
    background: var(--dc-color-danger);
    border-color: var(--dc-color-danger);
}

.dc-app-main :where(.btn-info, .btn-success) {
    color: #ffffff !important;
    background: var(--dc-color-primary);
    border-color: var(--dc-color-primary);
}

.dc-app-main :where(.btn:disabled, .btn.disabled, .btn[aria-disabled="true"]) {
    color: var(--dc-color-text-muted) !important;
    background: var(--dc-color-surface-muted) !important;
    border-color: var(--dc-color-border) !important;
    cursor: not-allowed;
    opacity: 0.72;
}

.dc-app-main :where(.form-label) {
    margin-bottom: var(--dc-space-3);
    color: var(--dc-color-text);
    font-size: var(--dc-text-sm);
    font-weight: var(--dc-weight-semibold);
}

.dc-app-main :where(.form-control, .form-select) {
    min-height: 2.5rem;
    padding: 0.5625rem 0.75rem;
    color: var(--dc-color-text);
    background-color: var(--dc-color-surface);
    border: var(--dc-border);
    border-radius: var(--dc-radius-sm) !important;
    box-shadow: none !important;
    font-size: var(--dc-text-md);
    line-height: 1.35;
    transition:
        border-color var(--dc-duration-fast) var(--dc-ease-standard),
        box-shadow var(--dc-duration-fast) var(--dc-ease-standard),
        background-color var(--dc-duration-fast) var(--dc-ease-standard);
}

.dc-app-main :where(.form-control:hover, .form-select:hover) {
    border-color: var(--dc-color-border-strong);
}

.dc-app-main :where(.form-control:focus, .form-select:focus) {
    color: var(--dc-color-text);
    background-color: var(--dc-color-surface);
    border-color: var(--dc-color-focus);
    box-shadow: var(--dc-focus-ring) !important;
}

.dc-app-main :where(.form-control::placeholder) {
    color: var(--dc-color-text-muted);
    opacity: 1;
}

.dc-app-main :where(.form-control:disabled, .form-control[readonly], .form-select:disabled) {
    color: var(--dc-color-text-secondary);
    background-color: var(--dc-color-surface-muted);
    border-color: var(--dc-color-border);
    opacity: 1;
}

.dc-app-main :where(textarea.form-control) {
    min-height: 6rem;
    resize: vertical;
}

.dc-app-main :where(.form-check-input) {
    border-color: var(--dc-color-border-strong);
    box-shadow: none;
    accent-color: var(--dc-color-primary);
}

.dc-app-main :where(.form-check-input:checked) {
    background-color: var(--dc-color-primary);
    border-color: var(--dc-color-primary);
}

.dc-app-main :where(.alert) {
    margin-bottom: var(--dc-space-6);
    padding: var(--dc-space-5) var(--dc-space-6);
    color: var(--dc-color-text);
    background: var(--dc-color-surface-subtle);
    border: var(--dc-border);
    border-left-width: 3px;
    border-radius: var(--dc-radius-sm) !important;
    box-shadow: none !important;
    font-size: var(--dc-text-sm);
}

.dc-app-main :where(.alert-success) {
    color: var(--dc-color-success);
    background: var(--dc-color-success-soft);
    border-color: color-mix(in srgb, var(--dc-color-success) 30%, var(--dc-color-border));
}

.dc-app-main :where(.alert-danger) {
    color: var(--dc-color-danger);
    background: var(--dc-color-danger-soft);
    border-color: color-mix(in srgb, var(--dc-color-danger) 30%, var(--dc-color-border));
}

.dc-app-main :where(.alert-warning) {
    color: var(--dc-color-warning);
    background: var(--dc-color-warning-soft);
    border-color: color-mix(in srgb, var(--dc-color-warning) 30%, var(--dc-color-border));
}

.dc-app-main :where(.alert-info) {
    color: var(--dc-color-info);
    background: var(--dc-color-info-soft);
    border-color: color-mix(in srgb, var(--dc-color-info) 30%, var(--dc-color-border));
}

.dc-app-main :where(.text-danger, .field-validation-error) {
    color: var(--dc-color-danger) !important;
    font-size: var(--dc-text-xs);
}

.dc-app-main :where(.validation-summary-errors) {
    padding: var(--dc-space-5) var(--dc-space-6);
    color: var(--dc-color-danger) !important;
    background: var(--dc-color-danger-soft);
    border: 1px solid color-mix(in srgb, var(--dc-color-danger) 30%, var(--dc-color-border));
    border-radius: var(--dc-radius-sm);
}

.dc-app-main :where(.validation-summary-errors ul) {
    margin: 0;
    padding-left: var(--dc-space-7);
}

.dc-app-main :where(.badge) {
    padding: var(--dc-space-3) var(--dc-space-4);
    border-radius: var(--dc-radius-pill) !important;
    font-size: var(--dc-text-xs);
    font-weight: var(--dc-weight-semibold);
    letter-spacing: 0;
}

.dc-app-main :where(.modal-content, .offcanvas) {
    color: var(--dc-color-text);
    background: var(--dc-color-surface);
    border: var(--dc-border);
    border-radius: var(--dc-radius-md) !important;
    box-shadow: var(--dc-shadow-overlay) !important;
}

.dc-app-main :where(.modal-header, .modal-footer, .offcanvas-header) {
    padding: var(--dc-space-6) var(--dc-space-7);
    border-color: var(--dc-color-border);
}

.dc-app-main :where(.modal-body, .offcanvas-body) {
    padding: var(--dc-space-7);
}

.dc-app-main :where(.modal-title, .offcanvas-title) {
    color: var(--dc-color-text);
    font-size: var(--dc-text-lg);
    font-weight: var(--dc-weight-semibold);
}

.dc-app-main :where(.dropdown-menu) {
    padding: var(--dc-space-3);
    color: var(--dc-color-text);
    background: var(--dc-color-surface);
    border: var(--dc-border);
    border-radius: var(--dc-radius-sm);
    box-shadow: var(--dc-shadow-overlay);
}

.dc-app-main :where(.dropdown-item) {
    padding: var(--dc-space-4) var(--dc-space-5);
    color: var(--dc-color-text-secondary);
    border-radius: var(--dc-radius-xs);
    font-size: var(--dc-text-sm);
}

.dc-app-main :where(.dropdown-item:hover, .dropdown-item:focus) {
    color: var(--dc-color-text);
    background: var(--dc-color-surface-subtle);
}

.dc-app-main :where(button, .btn)[aria-busy="true"],
.dc-app-main :where(button, .btn).is-loading {
    position: relative;
    cursor: wait;
}

.dc-app-main :where(button, .btn)[aria-busy="true"]::after,
.dc-app-main :where(button, .btn).is-loading::after {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    animation: dc-spin 700ms linear infinite;
}

.dc-empty-state,
.empty-state-inline {
    display: grid;
    min-height: 10rem;
    place-items: center;
    align-content: center;
    gap: var(--dc-space-3);
    padding: var(--dc-space-8);
    color: var(--dc-color-text-muted);
    background: var(--dc-color-surface-subtle);
    border: var(--dc-border);
    border-radius: var(--dc-radius-sm);
    text-align: center;
}

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

@media (prefers-reduced-motion: reduce) {
    .dc-app-main :where(button, .btn)[aria-busy="true"]::after,
    .dc-app-main :where(button, .btn).is-loading::after {
        animation: none;
    }
}