h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--sp-text-strong);
    font-weight: 720;
    letter-spacing: -.025em;
}

.fas,
.far {
    width: 1.1em;
    display: inline-grid;
    place-items: center;
    font-family: var(--sp-font-sans);
    font-style: normal;
    font-weight: 750;
    line-height: 1;
}

.fa-bell::before { content: "◌"; }
.fa-check::before { content: "✓"; }
.fa-download::before { content: "↓"; }
.fa-edit::before { content: "✎"; }
.fa-exclamation-triangle::before { content: "△"; }
.fa-external-link-alt::before { content: "↗"; }
.fa-file-export::before { content: "⇥"; }
.fa-file-import::before { content: "⇤"; }
.fa-history::before { content: "↶"; }
.fa-plus::before { content: "+"; }
.fa-save::before { content: "✓"; }
.fa-sync-alt::before { content: "↻"; }
.fa-trash::before,
.fa-trash-alt::before { content: "×"; }
.fa-undo::before { content: "↶"; }

.text-muted,
.form-text {
    color: var(--sp-muted) !important;
}

.sp-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.sp-page-eyebrow {
    margin-bottom: .22rem;
    color: var(--sp-accent);
    font-size: .62rem;
    font-weight: 760;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.sp-page-header h1,
.sp-page-header h2 {
    margin: 0;
    font-size: clamp(1.2rem, 1.55vw, 1.5rem);
    line-height: 1.15;
}

.sp-page-header p {
    max-width: 52rem;
    margin: .25rem 0 0;
    color: var(--sp-muted);
    font-size: .78rem;
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.accordion-item,
.list-group-item {
    border-color: var(--sp-border);
    color: var(--sp-text);
    background: var(--sp-panel);
    box-shadow: none;
}

.card {
    border-radius: var(--sp-radius-md);
    backdrop-filter: blur(16px) saturate(115%);
}

.card-body {
    padding: .75rem;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.offcanvas-header {
    border-color: var(--sp-border);
    background: transparent;
}

.table {
    --bs-table-color: var(--sp-text);
    --bs-table-bg: transparent;
    --bs-table-striped-color: var(--sp-text);
    --bs-table-striped-bg: var(--sp-panel-soft);
    --bs-table-hover-color: var(--sp-text-strong);
    --bs-table-hover-bg: color-mix(in srgb, var(--sp-accent) 7%, transparent);
    --bs-table-border-color: var(--sp-border);
    margin-bottom: 0;
    font-size: .74rem;
}

.table > :not(caption) > * > * {
    padding: .45rem .55rem;
}

.table > thead th,
.table-light {
    --bs-table-bg: color-mix(in srgb, var(--sp-panel-solid) 86%, transparent);
    --bs-table-color: var(--sp-muted);
    border-bottom-color: var(--sp-border-strong);
    color: var(--sp-muted);
    font-size: .7rem;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.form-label {
    color: var(--sp-text);
    font-size: .7rem;
    font-weight: 650;
}

.form-control,
.form-select,
.form-check-input,
.input-group-text {
    border-color: var(--sp-border);
    color: var(--sp-text);
    background-color: color-mix(in srgb, var(--sp-bg-elevated) 75%, transparent);
    font-size: .74rem;
}

.form-control,
.form-select {
    min-height: 2rem;
    padding: .34rem .52rem;
}

.form-control::placeholder {
    color: color-mix(in srgb, var(--sp-muted) 72%, transparent);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: color-mix(in srgb, var(--sp-accent) 65%, var(--sp-border));
    color: var(--sp-text);
    background-color: var(--sp-bg-elevated);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--sp-accent) 17%, transparent);
}

.form-select {
    color-scheme: inherit;
}

.btn {
    --bs-btn-border-radius: .7rem;
    --bs-btn-padding-x: .68rem;
    --bs-btn-padding-y: .34rem;
    --bs-btn-font-size: .72rem;
    font-weight: 650;
    transition: color var(--sp-fast), background var(--sp-fast), border-color var(--sp-fast), box-shadow var(--sp-fast), transform var(--sp-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    --bs-btn-color: #071014;
    --bs-btn-bg: var(--sp-accent);
    --bs-btn-border-color: var(--sp-accent);
    --bs-btn-hover-color: #071014;
    --bs-btn-hover-bg: var(--sp-accent-strong);
    --bs-btn-hover-border-color: var(--sp-accent-strong);
    --bs-btn-active-color: #071014;
    --bs-btn-active-bg: var(--sp-accent-strong);
    --bs-btn-active-border-color: var(--sp-accent-strong);
    box-shadow: 0 .7rem 1.6rem color-mix(in srgb, var(--sp-accent) 18%, transparent);
}

[data-theme="ocean"] .btn-primary,
[data-theme="ember"] .btn-primary,
[data-theme="forest"] .btn-primary,
[data-theme="sand"] .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--sp-text);
    --bs-btn-bg: var(--sp-panel-soft);
    --bs-btn-border-color: var(--sp-border-strong);
    --bs-btn-hover-color: var(--sp-text-strong);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sp-accent) 10%, var(--sp-panel));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--sp-accent) 36%, var(--sp-border));
    border-color: var(--sp-border-strong) !important;
    color: var(--sp-text) !important;
    background: var(--sp-panel-soft) !important;
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    border-color: color-mix(in srgb, var(--sp-accent) 36%, var(--sp-border)) !important;
    color: var(--sp-text-strong) !important;
    background: color-mix(in srgb, var(--sp-accent) 10%, var(--sp-panel)) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--sp-accent);
    --bs-btn-border-color: color-mix(in srgb, var(--sp-accent) 55%, var(--sp-border));
    --bs-btn-hover-color: var(--sp-bg);
    --bs-btn-hover-bg: var(--sp-accent);
    --bs-btn-hover-border-color: var(--sp-accent);
}

.alert {
    border-radius: var(--sp-radius-sm);
    border-color: var(--sp-border);
    color: var(--sp-text);
    background: var(--sp-panel);
}

.alert-success {
    border-color: color-mix(in srgb, var(--sp-success) 35%, var(--sp-border));
    background: color-mix(in srgb, var(--sp-success) 10%, var(--sp-panel));
}

.alert-danger {
    border-color: color-mix(in srgb, var(--sp-danger) 38%, var(--sp-border));
    background: color-mix(in srgb, var(--sp-danger) 10%, var(--sp-panel));
}

.alert-info {
    border-color: color-mix(in srgb, var(--sp-info) 38%, var(--sp-border));
    background: color-mix(in srgb, var(--sp-info) 9%, var(--sp-panel));
}

.badge.bg-success {
    color: #062318 !important;
    background: var(--sp-success) !important;
}

.badge.bg-warning {
    color: #251903 !important;
    background: var(--sp-warning) !important;
}

.badge.bg-danger {
    background: var(--sp-danger) !important;
}

.badge.bg-info {
    color: #051a23 !important;
    background: var(--sp-info) !important;
}

.badge-outline-secondary,
.badge-outline-info,
.badge-outline-primary,
.badge-outline-warning,
.badge-outline-success {
    border: 1px solid var(--sp-border-strong) !important;
    color: var(--sp-text) !important;
    background: var(--sp-panel-soft) !important;
}

.incident-card .badge-outline-primary {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

.sp-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sp-metric-card {
    position: relative;
    min-height: 8.5rem;
    padding: 1.1rem 1.2rem;
    overflow: hidden;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--sp-accent) 7%, transparent), transparent 60%),
        var(--sp-panel);
    box-shadow: var(--sp-shadow);
}

.sp-metric-card::after {
    content: "";
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sp-accent) 10%, transparent);
    filter: blur(12px);
}

.sp-metric-label {
    color: var(--sp-muted);
    font-size: .7rem;
    font-weight: 720;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sp-metric-value {
    display: block;
    margin-top: .55rem;
    color: var(--sp-text-strong);
    font-size: 2rem;
    font-weight: 760;
    letter-spacing: -.05em;
    line-height: 1;
}

.sp-metric-meta {
    display: block;
    margin-top: .65rem;
    color: var(--sp-muted);
    font-size: .75rem;
}

.sp-status-dot {
    width: .65rem;
    height: .65rem;
    display: inline-block;
    border-radius: 50%;
    background: var(--sp-success);
    box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--sp-success) 12%, transparent), 0 0 1rem color-mix(in srgb, var(--sp-success) 55%, transparent);
}

.sp-status-dot.warning {
    background: var(--sp-warning);
    box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--sp-warning) 12%, transparent), 0 0 1rem color-mix(in srgb, var(--sp-warning) 55%, transparent);
}

.sp-status-dot.danger {
    background: var(--sp-danger);
    box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--sp-danger) 12%, transparent), 0 0 1rem color-mix(in srgb, var(--sp-danger) 55%, transparent);
}

.sp-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--sp-muted);
}

.sp-empty-state h3 {
    font-size: 1.1rem;
}

/* Existing admin page compatibility */
.admin-dashboard,
.admin-page .container-fluid {
    color: var(--sp-text);
}

.admin-header,
.admin-page .container-fluid > .d-flex:first-child {
    margin-bottom: .9rem !important;
}

.admin-header h1,
.admin-page .container-fluid > .d-flex:first-child h2 {
    margin: 0;
    font-size: clamp(1.2rem, 1.55vw, 1.5rem);
}

.overall-status-panel {
    padding: .8rem !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: var(--sp-radius-lg) !important;
    color: var(--sp-text) !important;
    background: var(--sp-panel) !important;
    box-shadow: var(--sp-shadow);
}

.overall-status-panel.status-operational {
    border-color: color-mix(in srgb, var(--sp-success) 32%, var(--sp-border)) !important;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--sp-success) 10%, transparent), transparent 55%),
        var(--sp-panel) !important;
}

.overall-status-panel.status-major-outage,
.overall-status-panel.status-partial-outage {
    border-color: color-mix(in srgb, var(--sp-danger) 34%, var(--sp-border)) !important;
}

.status-metric,
.affected-inline-card,
.service-card,
.incident-card {
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
    background: var(--sp-panel-soft) !important;
}

.metric-value {
    color: var(--sp-text-strong) !important;
}

.admin-page .overall-status-grid {
    gap: .8rem;
}

.admin-page .overall-status-panel h2 {
    margin-bottom: .55rem;
    font-size: 1.05rem;
    line-height: 1.2;
}

.admin-page .status-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    margin-bottom: .55rem;
}

.admin-page .status-metric {
    min-width: 0;
    padding: .48rem .6rem;
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-sm);
    background: var(--sp-panel-soft);
}

.admin-page .metric-value {
    font-size: 1.1rem;
    line-height: 1.1;
}

.admin-page .metric-label,
.admin-page .last-updated {
    font-size: .7rem;
}

.admin-page .alert-sync-status {
    gap: .35rem;
    margin-top: .45rem;
    font-size: .7rem;
}

.admin-page .alert-sync-badge {
    min-height: 1.35rem;
    padding: .18rem .5rem;
}

.admin-page .affected-inline-card {
    padding: .7rem;
}

.admin-page .affected-inline-header {
    gap: .45rem;
    margin-bottom: .5rem;
    font-size: .74rem;
}

.admin-page .affected-count-badge,
.admin-page .ignored-count-badge,
.admin-page .affected-inline-link,
.admin-page .affected-inline-meta,
.admin-page .affected-inline-footer {
    font-size: .68rem;
}

.admin-page .affected-inline-list {
    gap: .4rem;
    max-height: 126px;
}

.admin-page .affected-inline-list li {
    min-height: 68px;
    padding: .45rem .55rem;
}

.admin-page .affected-inline-name {
    margin-bottom: .12rem;
    font-size: .76rem;
}

.admin-page .alert-sync-label,
.admin-page .alert-sync-detail,
.admin-page .affected-inline-empty,
.admin-page .affected-inline-meta,
.admin-page .affected-inline-footer {
    color: var(--sp-muted) !important;
}

.admin-page .alert-sync-badge,
.admin-page .ignored-count-badge,
.admin-page .affected-count-badge {
    border-color: var(--sp-border-strong) !important;
    color: var(--sp-text-strong) !important;
    background: var(--sp-panel-soft) !important;
}

.admin-page .affected-inline-link {
    color: var(--sp-accent) !important;
}

.admin-page .affected-inline-list li {
    background: var(--sp-panel-soft) !important;
}

.admin-page .services-grid {
    gap: .75rem;
}

.admin-page .service-type-header,
.admin-page .service-type-body {
    padding: .58rem;
}

.admin-page .service-type-header h3 {
    font-size: .84rem;
    color: #071014 !important;
}

.admin-page .service-type-header .status-badge {
    border: 1px solid rgba(7, 16, 20, .12);
    color: #071014 !important;
    background: rgba(255, 255, 255, .58);
    box-shadow: none;
    font-size: .67rem;
    padding: .18rem .4rem;
}

.admin-page .progress-bar {
    color: #071014 !important;
    font-size: .68rem;
}

.admin-page .progress {
    height: 1.1rem;
    margin-bottom: .35rem;
}

.admin-page .percentage-label,
.admin-page .affected-services-info,
.admin-page .alert-summary-link,
.admin-page .regions-list {
    font-size: .7rem;
}

.admin-page .region-tabs-container {
    margin-top: 1rem;
}

.admin-page .region-tabs-container .nav-tabs {
    margin-bottom: .8rem;
}

.admin-page .region-tabs-container .nav-link {
    padding: .38rem .65rem;
    font-size: .72rem;
}

.admin-page .btn {
    --bs-btn-padding-y: .26rem;
    --bs-btn-padding-x: .58rem;
    --bs-btn-font-size: .68rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.05rem;
    border-width: 1.5px;
    font-weight: 760;
    line-height: 1.2;
    box-shadow: 0 .3rem .8rem color-mix(in srgb, var(--sp-text-strong) 9%, transparent);
}

.admin-page .btn-sm {
    min-height: 1.85rem;
    padding: .28rem .62rem;
}

.admin-page .btn:hover:not(:disabled):not(.disabled) {
    box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--sp-text-strong) 13%, transparent);
}

.admin-page .btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sp-accent) 32%, transparent);
    outline-offset: 2px;
    box-shadow: none;
}

.admin-page .btn-outline-primary {
    color: var(--sp-accent-strong) !important;
    border-color: color-mix(in srgb, var(--sp-accent) 68%, var(--sp-border)) !important;
    background: color-mix(in srgb, var(--sp-accent) 11%, var(--sp-panel)) !important;
}

.admin-page .btn-outline-primary:hover,
.admin-page .btn-outline-primary:focus-visible,
.admin-page .btn-outline-primary.active {
    color: var(--sp-bg) !important;
    border-color: var(--sp-accent) !important;
    background: var(--sp-accent) !important;
}

.admin-page .btn-outline-secondary {
    color: var(--sp-text-strong) !important;
    border-color: var(--sp-border-strong) !important;
    background: color-mix(in srgb, var(--sp-panel-solid) 88%, transparent) !important;
}

.admin-page .btn-outline-success {
    color: var(--sp-success) !important;
    border-color: color-mix(in srgb, var(--sp-success) 62%, var(--sp-border)) !important;
    background: color-mix(in srgb, var(--sp-success) 10%, var(--sp-panel)) !important;
}

.admin-page .btn-outline-warning {
    color: var(--sp-warning) !important;
    border-color: color-mix(in srgb, var(--sp-warning) 64%, var(--sp-border)) !important;
    background: color-mix(in srgb, var(--sp-warning) 11%, var(--sp-panel)) !important;
}

.admin-page .btn-outline-danger {
    color: var(--sp-danger) !important;
    border-color: color-mix(in srgb, var(--sp-danger) 68%, var(--sp-border)) !important;
    background: color-mix(in srgb, var(--sp-danger) 10%, var(--sp-panel)) !important;
}

.admin-page .btn-outline-success:hover,
.admin-page .btn-outline-warning:hover,
.admin-page .btn-outline-danger:hover {
    color: var(--sp-text-strong) !important;
    border-color: currentColor !important;
    filter: saturate(1.15);
}

.admin-page .btn:disabled,
.admin-page .btn.disabled,
.admin-page [aria-disabled="true"].btn {
    cursor: not-allowed;
    opacity: .68;
    box-shadow: none;
    transform: none;
}

.admin-page .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
    padding: .25rem .4rem;
    border-radius: .55rem;
}

.admin-page .form-check-input {
    float: none;
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    border: 2px solid color-mix(in srgb, var(--sp-muted) 78%, var(--sp-border));
    cursor: pointer;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--sp-text-strong) 10%, transparent);
}

.admin-page .form-switch .form-check-input {
    width: 2.45rem;
    height: 1.3rem;
    margin-left: 0;
}

.admin-page .form-check-input:checked {
    border-color: var(--sp-accent);
    background-color: var(--sp-accent);
}

.admin-page .form-check-input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--sp-accent) 28%, transparent);
    outline-offset: 2px;
    box-shadow: none;
}

.admin-page .form-check-label,
.admin-page label:has(> .form-check-input) {
    cursor: pointer;
    user-select: none;
}

.admin-page .form-check:has(.form-check-input:checked) {
    background: color-mix(in srgb, var(--sp-accent) 10%, transparent);
}

.admin-page .form-check-input:disabled,
.admin-page .form-check-input:disabled + .form-check-label {
    cursor: not-allowed;
    opacity: .62;
}

.service-uptime-sort-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: inherit;
    text-decoration: none;
}

.service-uptime-sort-link:hover {
    color: var(--sp-text-strong);
}

.bg-light {
    color: var(--sp-text) !important;
    background: var(--sp-panel-soft) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--sp-border) !important;
}

.pagination {
    --bs-pagination-color: var(--sp-text);
    --bs-pagination-bg: var(--sp-panel);
    --bs-pagination-border-color: var(--sp-border);
    --bs-pagination-hover-color: var(--sp-text-strong);
    --bs-pagination-hover-bg: var(--sp-panel-soft);
    --bs-pagination-hover-border-color: var(--sp-border-strong);
    --bs-pagination-active-color: var(--sp-bg);
    --bs-pagination-active-bg: var(--sp-accent);
    --bs-pagination-active-border-color: var(--sp-accent);
}

.modal-backdrop {
    --bs-backdrop-opacity: .72;
}

.accordion-button {
    color: var(--sp-text);
    background: var(--sp-panel);
}

.accordion-button:not(.collapsed) {
    color: var(--sp-text-strong);
    background: color-mix(in srgb, var(--sp-accent) 9%, var(--sp-panel));
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--sp-border);
}

.accordion-button::after,
.btn-close {
    filter: var(--sp-icon-filter, invert(1));
}

/* DNS inventory owns a large interaction stylesheet in its Razor view. These
   semantic overrides keep those surfaces theme-aware without changing its IDs. */
.admin-page .dns-summary-card,
.admin-page .dns-filter-pane,
.admin-page .dns-record-panel,
.admin-page .dns-record-card,
.admin-page .dns-detail-card,
.admin-page .dns-change-log-item {
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
    background: var(--sp-panel) !important;
}

.admin-page .dns-summary-card:hover,
.admin-page .dns-summary-card.is-active {
    border-color: color-mix(in srgb, var(--sp-accent) 55%, var(--sp-border)) !important;
    box-shadow: 0 .8rem 2rem color-mix(in srgb, var(--sp-accent) 12%, transparent) !important;
}

.admin-page .dns-summary-card.is-active {
    background: color-mix(in srgb, var(--sp-accent) 9%, var(--sp-panel)) !important;
}

.admin-page .dns-record-list-scroll,
.admin-page .dns-filter-pane {
    scrollbar-color: var(--sp-border-strong) transparent;
}

[data-theme="aurora"],
[data-theme="ocean"],
[data-theme="ember"],
[data-theme="forest"],
[data-theme="sand"] {
    --sp-icon-filter: none;
}

/* Theme bridge for legacy admin contracts that otherwise retain light-only
   backgrounds or fixed dark text beneath the shared shell. */
.admin-page {
    color: var(--sp-text);
    background-color: transparent !important;
}

.admin-page label,
.admin-page .incident-form label,
.admin-page .uptime-value,
.admin-page .percentage-label,
.admin-page .regions-list,
.admin-page .sort-indicator,
.admin-page .alert-rules-summary-item,
.admin-page .alert-rules-summary-item span,
.admin-page .alert-rules-summary-item small,
.admin-page .alert-rules-pagination {
    color: var(--sp-text) !important;
}

.admin-page .alert-summary-link,
.admin-page .alert-summary-title {
    color: var(--sp-text) !important;
}

.admin-page .alert-summary-muted {
    color: var(--sp-muted) !important;
}

.admin-page .alert-summary-link:hover {
    color: var(--sp-accent) !important;
}

.admin-page .active-incidents-panel,
.admin-page .incident-item,
.admin-page .service-type-body,
.admin-page .no-services-message,
.admin-page .status-card,
.admin-page .filter-tab,
.admin-page .toast-notification,
.admin-page .diagnostics-debug,
.admin-page .alert-rules-bulk-actions,
.admin-page .affected-services-table-wrap,
.admin-page .alert-rules-table-wrap,
.admin-page .alerts-pagination-footer,
.admin-page .uptime-pagination-footer {
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
    background: var(--sp-panel) !important;
}

.admin-page .modal-content,
.admin-page .modal-header,
.admin-page .modal-footer,
.admin-page .affected-services-body,
.admin-page .alert-rules-dialog .modal-body {
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
    background: var(--sp-panel-solid) !important;
}

.admin-page .modal-title,
.admin-page .affected-services-table,
.admin-page .alert-rules-table,
.admin-page .affected-services-table thead th,
.admin-page .alert-rules-table thead th {
    color: var(--sp-text-strong) !important;
}

.admin-page .affected-services-table,
.admin-page .alert-rules-table {
    --bs-table-color: var(--sp-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--sp-border);
}

.admin-page .affected-services-table thead th,
.admin-page .alert-rules-table thead th {
    border-color: var(--sp-border) !important;
    background: var(--sp-bg-elevated) !important;
    box-shadow: 0 1px 0 var(--sp-border) !important;
}

.admin-page .alert-rules-table .alert-rule-disabled,
.admin-page .alert-row.alert-repeat,
.admin-page .service-row.alert-repeat {
    background: color-mix(in srgb, var(--sp-danger) 10%, var(--sp-panel)) !important;
}

.admin-page .alert-rules-table .alert-rule-ignored {
    background: var(--sp-panel-soft) !important;
}

.admin-page .alert-rules-table .alert-rule-missing {
    background: color-mix(in srgb, var(--sp-warning) 10%, var(--sp-panel)) !important;
}

.admin-page .dns-record-item {
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
    background: var(--sp-panel) !important;
}

.admin-page .dns-record-item:hover {
    background: color-mix(in srgb, var(--sp-accent) 7%, var(--sp-panel)) !important;
}

.admin-page .dns-record-label,
.admin-page .dns-record-finding,
.admin-page .dns-empty-row {
    color: var(--sp-muted) !important;
}

.admin-page .dns-bulk-toolbar,
.admin-page .dns-change-log-item,
.admin-page .dns-change-log-pager {
    border-color: var(--sp-border) !important;
}