.ui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-6);
}

.ui-page-header__subtitle {
    margin: var(--ui-space-1) 0 0;
    color: var(--ui-color-text-muted);
}

.ui-card {
    background: var(--ui-color-surface);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-sm);
}

.ui-form-field {
    display: grid;
    gap: var(--ui-space-2);
}

.ui-form-field__label {
    font-weight: 600;
    color: var(--ui-color-text);
}

.ui-form-field__control {
    min-height: var(--ui-control-height);
    border: 1px solid var(--ui-color-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-color-surface);
    padding: 0 var(--ui-space-3);
}

.ui-form-field__error {
    color: var(--ui-color-danger);
    font-size: 0.875rem;
}

.ui-button-loading {
    pointer-events: none;
    opacity: 0.75;
}

.ui-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin 700ms linear infinite;
}

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

.ui-toast-region {
    position: fixed;
    right: var(--ui-space-4);
    bottom: var(--ui-space-4);
    z-index: var(--ui-z-toast);
    display: grid;
    gap: var(--ui-space-2);
    width: min(24rem, calc(100vw - 2rem));
}

.ui-toast {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-radius-md);
    background: var(--ui-color-text);
    color: #fff;
    box-shadow: var(--ui-shadow-md);
}

.ui-toast--success { background: var(--ui-color-success); }
.ui-toast--warning { background: var(--ui-color-warning); }
.ui-toast--danger { background: var(--ui-color-danger); }

/* Subtle status backgrounds need text-emphasis, not the bright accent colour.
   Match only those semantic pairs; Bootstrap text utilities use !important.
   Theme-aware emphasis variables preserve both light and dark palettes. */
.badge.bg-success-subtle.text-success { color: var(--bs-success-text-emphasis, var(--ui-color-success)) !important; }
.badge.bg-warning-subtle.text-warning { color: var(--bs-warning-text-emphasis, var(--ui-color-warning)) !important; }
.badge.bg-danger-subtle.text-danger { color: var(--bs-danger-text-emphasis, var(--ui-color-danger)) !important; }
.badge.bg-info-subtle.text-info { color: var(--bs-info-text-emphasis, var(--ui-color-info)) !important; }
.badge.bg-primary-subtle.text-primary { color: var(--bs-primary-text-emphasis, var(--ui-color-text)) !important; }

/* Filled warning badges also need a dark foreground on the bright accent. */
.badge.bg-warning.text-white { color: var(--ui-color-text) !important; }

/* Use the existing danger emphasis tone for text/outline actions on light cards.
   Keep hover/active filled states readable; dark mode keeps its native variables. */
:root:not([data-bs-theme="dark"]) .btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis, var(--ui-color-danger));
    --bs-btn-border-color: var(--bs-danger-text-emphasis, var(--ui-color-danger));
    --bs-btn-hover-bg: var(--bs-danger-text-emphasis, var(--ui-color-danger));
    --bs-btn-hover-border-color: var(--bs-danger-text-emphasis, var(--ui-color-danger));
    --bs-btn-active-bg: var(--bs-danger-text-emphasis, var(--ui-color-danger));
    --bs-btn-active-border-color: var(--bs-danger-text-emphasis, var(--ui-color-danger));
}

/* Authentication uses the same hierarchy while retaining its public card layout. */
.authentication-bg .auth-card :is(h1, h2) {
    font-size: var(--ui-text-title);
    line-height: var(--ui-leading-heading);
    font-weight: var(--ui-weight-heading);
}
.authentication-bg .auth-card { line-height: var(--ui-leading-body); }
.authentication-bg .auth-form-content { padding-inline: var(--ui-space-4); }
@media (max-width: 575.98px) {
    .authentication-bg .auth-form-content { padding-inline: 0; }
}