:root {
    --matrix-color-primary: #245a91;
    --matrix-color-primary-hover: #174a7d;
    --matrix-color-surface: #ffffff;
    --matrix-color-surface-muted: #cedde8;
    --matrix-color-border: #b9c5d1;
    --matrix-color-text: #1f2933;
    --matrix-color-text-muted: #52606d;
    --matrix-color-danger: #b42318;
    --matrix-color-danger-surface: #fff1f0;
    --matrix-color-info-surface: #eaf3fc;
    --matrix-focus-ring: 0 0 0 2px rgba(36, 90, 145, 0.25);
    --matrix-radius-sm: 3px;
    --matrix-radius-md: 5px;
    --matrix-shadow-card: 0 8px 24px rgba(31, 41, 51, 0.14);
    --matrix-control-height: 30px;
    --matrix-font-size: 13px;
    --matrix-space-1: 4px;
    --matrix-space-2: 8px;
    --matrix-space-3: 12px;
    --matrix-space-4: 16px;
}

.matrix-v2,
.matrix-v2 * {
    box-sizing: border-box;
}

.matrix-v2 {
    --bs-primary: var(--matrix-color-primary);
    --bs-primary-rgb: 36, 90, 145;
    --bs-body-color: var(--matrix-color-text);
    --bs-body-font-family: Tahoma, Arial, sans-serif;
    --bs-body-font-size: var(--matrix-font-size);
    --bs-border-color: var(--matrix-color-border);
    --bs-border-radius: var(--matrix-radius-sm);
    --bs-border-radius-sm: var(--matrix-radius-sm);
    margin: 0;
    color: var(--matrix-color-text);
    font: var(--matrix-font-size)/1.35 Tahoma, Arial, sans-serif;
    min-height: 100vh;
    background-color: var(--matrix-color-surface-muted) !important;
}

html:has(body.matrix-v2),
body.matrix-v2,
body.matrix-v2 #PageFrame {
    min-height: 100%;
    background-color: var(--matrix-color-surface-muted) !important;
}

.matrix-v2 button,
.matrix-v2 input,
.matrix-v2 select,
.matrix-v2 textarea {
    font: inherit;
}

.matrix-v2 .card-header {
    min-height: 34px;
    padding: var(--matrix-space-1) var(--matrix-space-2) var(--matrix-space-1) var(--matrix-space-3);
    color: #ffffff;
    background: var(--matrix-color-primary);
}

.matrix-v2 .card-body {
    padding: var(--matrix-space-4);
    background: #f4f8fb;
}

.matrix-v2 .FormPanel,
.matrix-v2 .panel,
.matrix-v2 .card:not(.matrix-shell__navigation) {
    background-color: #f4f8fb;
}

.matrix-v2 .col-form-label {
    color: var(--matrix-color-text-muted);
    font-weight: 600;
}

.matrix-v2 .form-control-sm,
.matrix-v2 .form-select-sm {
    min-height: var(--matrix-control-height);
    height: var(--matrix-control-height);
    padding: 3px 7px;
    font-size: var(--matrix-font-size);
}

.matrix-v2 .form-control:hover,
.matrix-v2 .form-select:hover {
    border-color: #66788a;
}

.matrix-v2 .form-control:focus,
.matrix-v2 .form-select:focus,
.matrix-v2 .btn:focus-visible,
.matrix-v2 .btn-close:focus-visible {
    border-color: var(--matrix-color-primary);
    outline: none;
    box-shadow: var(--matrix-focus-ring);
}

.matrix-v2 .btn-sm {
    min-height: var(--matrix-control-height);
    padding: 3px 12px;
    font-size: var(--matrix-font-size);
    font-weight: 600;
}

.matrix-v2 .btn-primary {
    --bs-btn-bg: var(--matrix-color-primary);
    --bs-btn-border-color: var(--matrix-color-primary);
    --bs-btn-hover-bg: var(--matrix-color-primary-hover);
    --bs-btn-hover-border-color: var(--matrix-color-primary-hover);
    --bs-btn-active-bg: var(--matrix-color-primary-hover);
    --bs-btn-active-border-color: var(--matrix-color-primary-hover);
}

.matrix-v2 .alert {
    padding: var(--matrix-space-2) var(--matrix-space-3);
    font-size: 12px;
    border-radius: var(--matrix-radius-sm);
}

.matrix-v2 #cygnus-notifications .alert-dismissible {
    position: relative;
    padding-right: 38px;
}

.matrix-v2 #cygnus-notifications .alert-dismissible > .btn-close {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 1em;
    height: 1em;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
}

/* Shared title treatment for migrated and legacy-backed views. */
.matrix-v2 .title,
.matrix-v2 .card-header,
.matrix-v2 .matrix-page-heading,
.matrix-v2 .modal-header {
    color: var(--matrix-color-text) !important;
    background: #f8fafc !important;
    border-color: #9aa8b6 !important;
}

.matrix-v2 .title a,
.matrix-v2 .title span,
.matrix-v2 .card-header a,
.matrix-v2 .card-header span,
.matrix-v2 .modal-header .modal-title {
    color: inherit !important;
}