:root,
[data-bs-theme="light"] {
    color-scheme: light;

    /*
     * CompuSport brand tokens
     */
    --cs-theme-primary: #faa41d;
    --cs-theme-primary-rgb: 250, 164, 29;
    --cs-theme-primary-hover: #e4931a;
    --cs-theme-primary-active: #c67a0f;
    --cs-theme-primary-subtle: #fff0d6;
    --cs-theme-primary-emphasis: #5f3a00;
    --cs-theme-primary-border-subtle: #ffd18a;
    --cs-theme-primary-contrast: #111111;

    --cs-theme-secondary: #1b7996;
    --cs-theme-secondary-rgb: 27, 121, 150;
    --cs-theme-secondary-hover: #176a83;
    --cs-theme-secondary-active: #12566b;
    --cs-theme-secondary-subtle: #d9f1f8;
    --cs-theme-secondary-emphasis: #073340;
    --cs-theme-secondary-border-subtle: #9cd5e5;
    --cs-theme-secondary-contrast: #ffffff;

    --cs-theme-surface: #ffffff;
    --cs-theme-surface-rgb: 255, 255, 255;
    --cs-theme-surface-alt: #f7f7f9;
    --cs-theme-surface-alt-rgb: 247, 247, 249;
    --cs-theme-text: #212529;
    --cs-theme-text-rgb: 33, 37, 41;
    --cs-theme-text-muted: #6c757d;
    --cs-theme-border: #dee2e6;
    --cs-theme-border-translucent: rgba(0, 0, 0, 0.175);

    /*
     * Bootstrap global theme colors
     */
    --bs-blue: var(--cs-theme-primary);
    --bs-primary: var(--cs-theme-primary);
    --bs-primary-rgb: var(--cs-theme-primary-rgb);
    --bs-primary-text-emphasis: var(--cs-theme-primary-emphasis);
    --bs-primary-bg-subtle: var(--cs-theme-primary-subtle);
    --bs-primary-border-subtle: var(--cs-theme-primary-border-subtle);

    --bs-secondary: var(--cs-theme-secondary);
    --bs-secondary-rgb: var(--cs-theme-secondary-rgb);
    --bs-secondary-text-emphasis: var(--cs-theme-secondary-emphasis);
    --bs-secondary-bg-subtle: var(--cs-theme-secondary-subtle);
    --bs-secondary-border-subtle: var(--cs-theme-secondary-border-subtle);

    --bs-info: var(--cs-theme-secondary);
    --bs-info-rgb: var(--cs-theme-secondary-rgb);
    --bs-info-text-emphasis: var(--cs-theme-secondary-emphasis);
    --bs-info-bg-subtle: var(--cs-theme-secondary-subtle);
    --bs-info-border-subtle: var(--cs-theme-secondary-border-subtle);

    /*
     * Bootstrap base surface, text, links and focus
     */
    --bs-body-bg: var(--cs-theme-surface);
    --bs-body-bg-rgb: var(--cs-theme-surface-rgb);
    --bs-body-color: var(--cs-theme-text);
    --bs-body-color-rgb: var(--cs-theme-text-rgb);

    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0, 0, 0;

    --bs-secondary-color: rgba(var(--cs-theme-text-rgb), 0.75);
    --bs-secondary-color-rgb: var(--cs-theme-text-rgb);
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;

    --bs-tertiary-color: rgba(var(--cs-theme-text-rgb), 0.5);
    --bs-tertiary-color-rgb: var(--cs-theme-text-rgb);
    --bs-tertiary-bg: var(--cs-theme-surface-alt);
    --bs-tertiary-bg-rgb: var(--cs-theme-surface-alt-rgb);

    --bs-heading-color: inherit;

    --bs-link-color: var(--cs-theme-primary);
    --bs-link-color-rgb: var(--cs-theme-primary-rgb);
    --bs-link-hover-color: var(--cs-theme-primary-hover);
    --bs-link-hover-color-rgb: var(--cs-theme-primary-rgb);
    --bs-link-decoration: none;

    --bs-border-color: var(--cs-theme-border);
    --bs-border-color-translucent: var(--cs-theme-border-translucent);

    --bs-focus-ring-color: rgba(var(--cs-theme-primary-rgb), 0.25);
    --bs-focus-ring-opacity: 0.25;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    /*
     * CompuSport brand tokens
     */
    --cs-theme-primary: #faa41d;
    --cs-theme-primary-rgb: 250, 164, 29;
    --cs-theme-primary-hover: #ffb84d;
    --cs-theme-primary-active: #ffc46f;
    --cs-theme-primary-subtle: #392402;
    --cs-theme-primary-emphasis: #ffc46f;
    --cs-theme-primary-border-subtle: #95620f;
    --cs-theme-primary-contrast: #111111;

    --cs-theme-secondary: #1b7996;
    --cs-theme-secondary-rgb: 27, 121, 150;
    --cs-theme-secondary-hover: #2394b8;
    --cs-theme-secondary-active: #35a8cc;
    --cs-theme-secondary-subtle: #062832;
    --cs-theme-secondary-emphasis: #86d6ec;
    --cs-theme-secondary-border-subtle: #176a83;
    --cs-theme-secondary-contrast: #ffffff;

    --cs-theme-surface: #17171c;
    --cs-theme-surface-rgb: 23, 23, 28;
    --cs-theme-surface-alt: #24232b;
    --cs-theme-surface-alt-rgb: 36, 35, 43;
    --cs-theme-text: #dbdbe1;
    --cs-theme-text-rgb: 219, 219, 225;
    --cs-theme-text-muted: #92929f;
    --cs-theme-border: rgba(255, 255, 255, 0.12);
    --cs-theme-border-translucent: rgba(255, 255, 255, 0.15);

    /*
     * Bootstrap global theme colors
     */
    --bs-blue: var(--cs-theme-primary);
    --bs-primary: var(--cs-theme-primary);
    --bs-primary-rgb: var(--cs-theme-primary-rgb);
    --bs-primary-text-emphasis: var(--cs-theme-primary-emphasis);
    --bs-primary-bg-subtle: var(--cs-theme-primary-subtle);
    --bs-primary-border-subtle: var(--cs-theme-primary-border-subtle);

    --bs-secondary: var(--cs-theme-secondary);
    --bs-secondary-rgb: var(--cs-theme-secondary-rgb);
    --bs-secondary-text-emphasis: var(--cs-theme-secondary-emphasis);
    --bs-secondary-bg-subtle: var(--cs-theme-secondary-subtle);
    --bs-secondary-border-subtle: var(--cs-theme-secondary-border-subtle);

    --bs-info: var(--cs-theme-secondary);
    --bs-info-rgb: var(--cs-theme-secondary-rgb);
    --bs-info-text-emphasis: var(--cs-theme-secondary-emphasis);
    --bs-info-bg-subtle: var(--cs-theme-secondary-subtle);
    --bs-info-border-subtle: var(--cs-theme-secondary-border-subtle);

    /*
     * Bootstrap base surface, text, links and focus
     */
    --bs-body-bg: var(--cs-theme-surface);
    --bs-body-bg-rgb: var(--cs-theme-surface-rgb);
    --bs-body-color: var(--cs-theme-text);
    --bs-body-color-rgb: var(--cs-theme-text-rgb);

    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-color: rgba(var(--cs-theme-text-rgb), 0.75);
    --bs-secondary-color-rgb: var(--cs-theme-text-rgb);
    --bs-secondary-bg: #2f2f38;
    --bs-secondary-bg-rgb: 47, 47, 56;

    --bs-tertiary-color: rgba(var(--cs-theme-text-rgb), 0.5);
    --bs-tertiary-color-rgb: var(--cs-theme-text-rgb);
    --bs-tertiary-bg: var(--cs-theme-surface-alt);
    --bs-tertiary-bg-rgb: var(--cs-theme-surface-alt-rgb);

    --bs-heading-color: inherit;

    --bs-link-color: var(--cs-theme-primary);
    --bs-link-color-rgb: var(--cs-theme-primary-rgb);
    --bs-link-hover-color: var(--cs-theme-primary-hover);
    --bs-link-hover-color-rgb: var(--cs-theme-primary-rgb);
    --bs-link-decoration: none;

    --bs-border-color: var(--cs-theme-border);
    --bs-border-color-translucent: var(--cs-theme-border-translucent);

    --bs-focus-ring-color: rgba(var(--cs-theme-primary-rgb), 0.35);
    --bs-focus-ring-opacity: 0.35;
}

.cs-vsa-ui[data-bs-theme="light"] {
    color-scheme: light;

    /*
     * CompuSport brand tokens
     */
    --cs-theme-primary: #faa41d;
    --cs-theme-primary-rgb: 250, 164, 29;
    --cs-theme-primary-hover: #e4931a;
    --cs-theme-primary-active: #c67a0f;
    --cs-theme-primary-subtle: #fff0d6;
    --cs-theme-primary-emphasis: #5f3a00;
    --cs-theme-primary-border-subtle: #ffd18a;
    --cs-theme-primary-contrast: #111111;

    --cs-theme-secondary: #1b7996;
    --cs-theme-secondary-rgb: 27, 121, 150;
    --cs-theme-secondary-hover: #176a83;
    --cs-theme-secondary-active: #12566b;
    --cs-theme-secondary-subtle: #d9f1f8;
    --cs-theme-secondary-emphasis: #073340;
    --cs-theme-secondary-border-subtle: #9cd5e5;
    --cs-theme-secondary-contrast: #ffffff;

    --cs-theme-surface: #ffffff;
    --cs-theme-surface-rgb: 255, 255, 255;
    --cs-theme-surface-alt: #f7f7f9;
    --cs-theme-surface-alt-rgb: 247, 247, 249;
    --cs-theme-text: #212529;
    --cs-theme-text-rgb: 33, 37, 41;
    --cs-theme-text-muted: #6c757d;
    --cs-theme-border: #dee2e6;
    --cs-theme-border-translucent: rgba(0, 0, 0, 0.175);

    /*
     * Bootstrap global theme colors
     */
    --bs-blue: var(--cs-theme-primary);
    --bs-primary: var(--cs-theme-primary);
    --bs-primary-rgb: var(--cs-theme-primary-rgb);
    --bs-primary-text-emphasis: var(--cs-theme-primary-emphasis);
    --bs-primary-bg-subtle: var(--cs-theme-primary-subtle);
    --bs-primary-border-subtle: var(--cs-theme-primary-border-subtle);

    --bs-secondary: var(--cs-theme-secondary);
    --bs-secondary-rgb: var(--cs-theme-secondary-rgb);
    --bs-secondary-text-emphasis: var(--cs-theme-secondary-emphasis);
    --bs-secondary-bg-subtle: var(--cs-theme-secondary-subtle);
    --bs-secondary-border-subtle: var(--cs-theme-secondary-border-subtle);

    --bs-info: var(--cs-theme-secondary);
    --bs-info-rgb: var(--cs-theme-secondary-rgb);
    --bs-info-text-emphasis: var(--cs-theme-secondary-emphasis);
    --bs-info-bg-subtle: var(--cs-theme-secondary-subtle);
    --bs-info-border-subtle: var(--cs-theme-secondary-border-subtle);

    /*
     * Bootstrap base surface, text, links and focus
     */
    --bs-body-bg: var(--cs-theme-surface);
    --bs-body-bg-rgb: var(--cs-theme-surface-rgb);
    --bs-body-color: var(--cs-theme-text);
    --bs-body-color-rgb: var(--cs-theme-text-rgb);

    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0, 0, 0;

    --bs-secondary-color: rgba(var(--cs-theme-text-rgb), 0.75);
    --bs-secondary-color-rgb: var(--cs-theme-text-rgb);
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;

    --bs-tertiary-color: rgba(var(--cs-theme-text-rgb), 0.5);
    --bs-tertiary-color-rgb: var(--cs-theme-text-rgb);
    --bs-tertiary-bg: var(--cs-theme-surface-alt);
    --bs-tertiary-bg-rgb: var(--cs-theme-surface-alt-rgb);

    --bs-heading-color: inherit;

    --bs-link-color: var(--cs-theme-primary);
    --bs-link-color-rgb: var(--cs-theme-primary-rgb);
    --bs-link-hover-color: var(--cs-theme-primary-hover);
    --bs-link-hover-color-rgb: var(--cs-theme-primary-rgb);
    --bs-link-decoration: none;

    --bs-border-color: var(--cs-theme-border);
    --bs-border-color-translucent: var(--cs-theme-border-translucent);

    --bs-focus-ring-color: rgba(var(--cs-theme-primary-rgb), 0.25);
    --bs-focus-ring-opacity: 0.25;
}

.cs-vsa-ui[data-bs-theme="dark"] {
    color-scheme: dark;

    /*
     * CompuSport brand tokens
     */
    --cs-theme-primary: #faa41d;
    --cs-theme-primary-rgb: 250, 164, 29;
    --cs-theme-primary-hover: #ffb84d;
    --cs-theme-primary-active: #ffc46f;
    --cs-theme-primary-subtle: #392402;
    --cs-theme-primary-emphasis: #ffc46f;
    --cs-theme-primary-border-subtle: #95620f;
    --cs-theme-primary-contrast: #111111;

    --cs-theme-secondary: #1b7996;
    --cs-theme-secondary-rgb: 27, 121, 150;
    --cs-theme-secondary-hover: #2394b8;
    --cs-theme-secondary-active: #35a8cc;
    --cs-theme-secondary-subtle: #062832;
    --cs-theme-secondary-emphasis: #86d6ec;
    --cs-theme-secondary-border-subtle: #176a83;
    --cs-theme-secondary-contrast: #ffffff;

    --cs-theme-surface: #17171c;
    --cs-theme-surface-rgb: 23, 23, 28;
    --cs-theme-surface-alt: #24232b;
    --cs-theme-surface-alt-rgb: 36, 35, 43;
    --cs-theme-text: #dbdbe1;
    --cs-theme-text-rgb: 219, 219, 225;
    --cs-theme-text-muted: #92929f;
    --cs-theme-border: rgba(255, 255, 255, 0.12);
    --cs-theme-border-translucent: rgba(255, 255, 255, 0.15);

    /*
     * Bootstrap global theme colors
     */
    --bs-blue: var(--cs-theme-primary);
    --bs-primary: var(--cs-theme-primary);
    --bs-primary-rgb: var(--cs-theme-primary-rgb);
    --bs-primary-text-emphasis: var(--cs-theme-primary-emphasis);
    --bs-primary-bg-subtle: var(--cs-theme-primary-subtle);
    --bs-primary-border-subtle: var(--cs-theme-primary-border-subtle);

    --bs-secondary: var(--cs-theme-secondary);
    --bs-secondary-rgb: var(--cs-theme-secondary-rgb);
    --bs-secondary-text-emphasis: var(--cs-theme-secondary-emphasis);
    --bs-secondary-bg-subtle: var(--cs-theme-secondary-subtle);
    --bs-secondary-border-subtle: var(--cs-theme-secondary-border-subtle);

    --bs-info: var(--cs-theme-secondary);
    --bs-info-rgb: var(--cs-theme-secondary-rgb);
    --bs-info-text-emphasis: var(--cs-theme-secondary-emphasis);
    --bs-info-bg-subtle: var(--cs-theme-secondary-subtle);
    --bs-info-border-subtle: var(--cs-theme-secondary-border-subtle);

    /*
     * Bootstrap base surface, text, links and focus
     */
    --bs-body-bg: var(--cs-theme-surface);
    --bs-body-bg-rgb: var(--cs-theme-surface-rgb);
    --bs-body-color: var(--cs-theme-text);
    --bs-body-color-rgb: var(--cs-theme-text-rgb);

    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-color: rgba(var(--cs-theme-text-rgb), 0.75);
    --bs-secondary-color-rgb: var(--cs-theme-text-rgb);
    --bs-secondary-bg: #2f2f38;
    --bs-secondary-bg-rgb: 47, 47, 56;

    --bs-tertiary-color: rgba(var(--cs-theme-text-rgb), 0.5);
    --bs-tertiary-color-rgb: var(--cs-theme-text-rgb);
    --bs-tertiary-bg: var(--cs-theme-surface-alt);
    --bs-tertiary-bg-rgb: var(--cs-theme-surface-alt-rgb);

    --bs-heading-color: inherit;

    --bs-link-color: var(--cs-theme-primary);
    --bs-link-color-rgb: var(--cs-theme-primary-rgb);
    --bs-link-hover-color: var(--cs-theme-primary-hover);
    --bs-link-hover-color-rgb: var(--cs-theme-primary-rgb);
    --bs-link-decoration: none;

    --bs-border-color: var(--cs-theme-border);
    --bs-border-color-translucent: var(--cs-theme-border-translucent);

    --bs-focus-ring-color: rgba(var(--cs-theme-primary-rgb), 0.35);
    --bs-focus-ring-opacity: 0.35;
}

.cs-vsa-ui {
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    /* Keep Bootstrap's baseline when mounted inside a compact legacy host. */
    line-height: var(--bs-body-line-height, 1.5);
}

/*
 * Primary components
 */
.cs-vsa-ui .btn-primary {
    --bs-btn-color: var(--cs-theme-primary-contrast);
    --bs-btn-bg: var(--cs-theme-primary);
    --bs-btn-border-color: var(--cs-theme-primary);
    --bs-btn-hover-color: var(--cs-theme-primary-contrast);
    --bs-btn-hover-bg: var(--cs-theme-primary-hover);
    --bs-btn-hover-border-color: var(--cs-theme-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--cs-theme-primary-rgb);
    --bs-btn-active-color: var(--cs-theme-primary-contrast);
    --bs-btn-active-bg: var(--cs-theme-primary-active);
    --bs-btn-active-border-color: var(--cs-theme-primary-active);
    --bs-btn-disabled-color: var(--cs-theme-primary-contrast);
    --bs-btn-disabled-bg: var(--cs-theme-primary);
    --bs-btn-disabled-border-color: var(--cs-theme-primary);
}

.cs-vsa-ui .btn-outline-primary {
    --bs-btn-color: var(--cs-theme-primary);
    --bs-btn-border-color: var(--cs-theme-primary);
    --bs-btn-hover-color: var(--cs-theme-primary-contrast);
    --bs-btn-hover-bg: var(--cs-theme-primary);
    --bs-btn-hover-border-color: var(--cs-theme-primary);
    --bs-btn-focus-shadow-rgb: var(--cs-theme-primary-rgb);
    --bs-btn-active-color: var(--cs-theme-primary-contrast);
    --bs-btn-active-bg: var(--cs-theme-primary-active);
    --bs-btn-active-border-color: var(--cs-theme-primary-active);
    --bs-btn-disabled-color: var(--cs-theme-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--cs-theme-primary);
}

.cs-vsa-ui .alert-primary {
    --bs-alert-color: var(--cs-theme-primary-emphasis);
    --bs-alert-bg: var(--cs-theme-primary-subtle);
    --bs-alert-border-color: var(--cs-theme-primary-border-subtle);
    --bs-alert-link-color: var(--cs-theme-primary-emphasis);
}

.cs-vsa-ui .list-group {
    --bs-list-group-active-color: var(--cs-theme-primary-contrast);
    --bs-list-group-active-bg: var(--cs-theme-primary);
    --bs-list-group-active-border-color: var(--cs-theme-primary);
}

.cs-vsa-ui .list-group-item-primary {
    --bs-list-group-color: var(--cs-theme-primary-emphasis);
    --bs-list-group-bg: var(--cs-theme-primary-subtle);
    --bs-list-group-border-color: var(--cs-theme-primary-border-subtle);
    --bs-list-group-action-hover-color: var(--cs-theme-primary-emphasis);
    --bs-list-group-action-hover-bg: var(--cs-theme-primary-border-subtle);
    --bs-list-group-action-active-color: var(--cs-theme-primary-emphasis);
    --bs-list-group-action-active-bg: var(--cs-theme-primary-border-subtle);
    --bs-list-group-active-color: var(--cs-theme-primary-contrast);
    --bs-list-group-active-bg: var(--cs-theme-primary);
    --bs-list-group-active-border-color: var(--cs-theme-primary);
}

.cs-vsa-ui .table-primary {
    --bs-table-color: var(--cs-theme-primary-emphasis);
    --bs-table-bg: var(--cs-theme-primary-subtle);
    --bs-table-border-color: var(--cs-theme-primary-border-subtle);
    --bs-table-striped-bg: var(--cs-theme-primary-border-subtle);
    --bs-table-striped-color: var(--cs-theme-primary-emphasis);
    --bs-table-active-bg: var(--cs-theme-primary-border-subtle);
    --bs-table-active-color: var(--cs-theme-primary-emphasis);
    --bs-table-hover-bg: var(--cs-theme-primary-border-subtle);
    --bs-table-hover-color: var(--cs-theme-primary-emphasis);
}

.cs-vsa-ui .text-bg-primary {
    color: var(--cs-theme-primary-contrast) !important;
    background-color: rgba(var(--cs-theme-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

/*
 * Secondary / info components
 */
.cs-vsa-ui .btn-secondary,
.cs-vsa-ui .btn-info {
    --bs-btn-color: var(--cs-theme-secondary-contrast);
    --bs-btn-bg: var(--cs-theme-secondary);
    --bs-btn-border-color: var(--cs-theme-secondary);
    --bs-btn-hover-color: var(--cs-theme-secondary-contrast);
    --bs-btn-hover-bg: var(--cs-theme-secondary-hover);
    --bs-btn-hover-border-color: var(--cs-theme-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--cs-theme-secondary-rgb);
    --bs-btn-active-color: var(--cs-theme-secondary-contrast);
    --bs-btn-active-bg: var(--cs-theme-secondary-active);
    --bs-btn-active-border-color: var(--cs-theme-secondary-active);
    --bs-btn-disabled-color: var(--cs-theme-secondary-contrast);
    --bs-btn-disabled-bg: var(--cs-theme-secondary);
    --bs-btn-disabled-border-color: var(--cs-theme-secondary);
}

.cs-vsa-ui .btn-outline-secondary,
.cs-vsa-ui .btn-outline-info {
    --bs-btn-color: var(--cs-theme-secondary);
    --bs-btn-border-color: var(--cs-theme-secondary);
    --bs-btn-hover-color: var(--cs-theme-secondary-contrast);
    --bs-btn-hover-bg: var(--cs-theme-secondary);
    --bs-btn-hover-border-color: var(--cs-theme-secondary);
    --bs-btn-focus-shadow-rgb: var(--cs-theme-secondary-rgb);
    --bs-btn-active-color: var(--cs-theme-secondary-contrast);
    --bs-btn-active-bg: var(--cs-theme-secondary-active);
    --bs-btn-active-border-color: var(--cs-theme-secondary-active);
    --bs-btn-disabled-color: var(--cs-theme-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--cs-theme-secondary);
}

.cs-vsa-ui .btn:disabled,
.cs-vsa-ui .btn.disabled,
.cs-vsa-ui fieldset:disabled .btn {
    --bs-btn-disabled-border-color: transparent;
}

.cs-vsa-ui .alert-secondary,
.cs-vsa-ui .alert-info {
    --bs-alert-color: var(--cs-theme-secondary-emphasis);
    --bs-alert-bg: var(--cs-theme-secondary-subtle);
    --bs-alert-border-color: var(--cs-theme-secondary-border-subtle);
    --bs-alert-link-color: var(--cs-theme-secondary-emphasis);
}

.cs-vsa-ui .text-bg-secondary,
.cs-vsa-ui .text-bg-info {
    color: var(--cs-theme-secondary-contrast) !important;
    background-color: rgba(var(--cs-theme-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}

/*
 * Links, navs, dropdowns and pagination
 */
.cs-vsa-ui a {
    text-decoration: var(--bs-link-decoration);
}

.cs-vsa-ui a:hover,
.cs-vsa-ui a:focus {
    text-decoration: var(--bs-link-decoration);
}

.cs-vsa-ui .btn-link {
    text-decoration: var(--bs-link-decoration);
}

.cs-vsa-ui .btn-link:hover,
.cs-vsa-ui .btn-link:focus-visible {
    text-decoration: var(--bs-link-decoration);
}

.cs-vsa-ui .link-primary {
    color: rgba(var(--cs-theme-primary-rgb), var(--bs-link-opacity, 1)) !important;
    text-decoration-color: rgba(var(--cs-theme-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.cs-vsa-ui .link-primary:hover,
.cs-vsa-ui .link-primary:focus {
    color: var(--cs-theme-primary-hover) !important;
}

.cs-vsa-ui .nav-pills {
    --bs-nav-pills-link-active-color: var(--cs-theme-primary-contrast);
    --bs-nav-pills-link-active-bg: var(--cs-theme-primary);
}

.cs-vsa-ui .dropdown-menu {
    --bs-dropdown-link-active-color: var(--cs-theme-primary-contrast);
    --bs-dropdown-link-active-bg: var(--cs-theme-primary);
}

.cs-vsa-ui .pagination {
    --bs-pagination-color: var(--cs-theme-primary);
    --bs-pagination-hover-color: var(--cs-theme-primary-hover);
    --bs-pagination-focus-color: var(--cs-theme-primary-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--cs-theme-primary-rgb), 0.25);
    --bs-pagination-active-color: var(--cs-theme-primary-contrast);
    --bs-pagination-active-bg: var(--cs-theme-primary);
    --bs-pagination-active-border-color: var(--cs-theme-primary);
}

/*
 * Forms and focus states
 */
.cs-vsa-ui .form-control:focus,
.cs-vsa-ui .form-select:focus {
    border-color: var(--cs-theme-primary-border-subtle);
    box-shadow: 0 0 0 0.25rem rgba(var(--cs-theme-primary-rgb), 0.25);
}

.cs-vsa-ui .form-check-input:focus {
    border-color: var(--cs-theme-primary-border-subtle);
    box-shadow: 0 0 0 0.25rem rgba(var(--cs-theme-primary-rgb), 0.25);
}

.cs-vsa-ui .form-check-input:checked {
    background-color: var(--cs-theme-primary);
    border-color: var(--cs-theme-primary);
}

.cs-vsa-ui .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.cs-vsa-ui .form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.cs-vsa-ui .form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--cs-theme-primary);
    border-color: var(--cs-theme-primary);
}

.cs-vsa-ui .form-range::-webkit-slider-thumb {
    background-color: var(--cs-theme-primary);
}

.cs-vsa-ui .form-range::-moz-range-thumb {
    background-color: var(--cs-theme-primary);
}

.cs-vsa-ui .form-range:focus::-webkit-slider-thumb {
    box-shadow:
        0 0 0 1px var(--bs-body-bg),
        0 0 0 0.25rem rgba(var(--cs-theme-primary-rgb), 0.25);
}

.cs-vsa-ui .form-range:focus::-moz-range-thumb {
    box-shadow:
        0 0 0 1px var(--bs-body-bg),
        0 0 0 0.25rem rgba(var(--cs-theme-primary-rgb), 0.25);
}

/*
 * Accordions, progress and misc active states
 */
.cs-vsa-ui .accordion {
    --bs-accordion-active-color: var(--cs-theme-primary-emphasis);
    --bs-accordion-active-bg: var(--cs-theme-primary-subtle);
    --bs-accordion-btn-focus-border-color: var(--cs-theme-primary-border-subtle);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--cs-theme-primary-rgb), 0.25);
}

.cs-vsa-ui .progress,
.cs-vsa-ui .progress-stacked {
    --bs-progress-bar-bg: var(--cs-theme-primary);
}

.cs-vsa-ui .progress-bar {
    background-color: var(--cs-theme-primary);
}

.cs-vsa-ui .page-link:focus,
.cs-vsa-ui .btn:focus-visible,
.cs-vsa-ui .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--cs-theme-primary-rgb), 0.25);
}

.cs-vsa-ui .selection,
.cs-vsa-ui ::selection {
    color: var(--cs-theme-primary-contrast);
    background-color: var(--cs-theme-primary);
}

.cs-vsa-ui .card,
.cs-vsa-ui .modal-content,
.cs-vsa-ui .dropdown-menu {
    background-color: var(--cs-theme-surface-alt);
}

/*
 * Tables
 */
.cs-vsa-ui .table > :not(caption):last-child > tr:last-child > * {
    border-bottom-width: 0;
}

.cs-vsa-ui .table {
    margin-bottom: initial;
}

/*
 * Legacy compatibility
 *
 * CS.App hides every <a> globally (`a { display: none; }` in Styles/html.less) so its own
 * anchors stay hidden until legacy script reveals/handles them. `.cs-vsa-ui a` has higher
 * specificity (0,1,1) than that bare element selector (0,0,1), so this rule always wins
 * regardless of stylesheet load order and reverts anchors back to their normal display inside
 * the modern UI boundary. Bootstrap component classes (`.nav-link`, `.dropdown-item`,
 * `.page-link`, `.btn`, etc.) still apply their own `display` on top of this as needed.
 */
.cs-vsa-ui a {
    display: revert;
}

/*
 * CS.Web styles every <select> and <option> globally (Global/Style/cs/cs.dropdown.less, shipped in
 * bundles/css/CS.min.css): `height: 100%` and yellow options. Bootstrap's `.form-select` sets
 * neither property, so they leak in: a select inside a stretched grid column takes the full height
 * of the column and covers the help below it. Like the rule above, these win through specificity
 * whatever the load order. Add a rule here only for a leak traced to its legacy source.
 */
.cs-vsa-ui select {
    height: auto;
}

.cs-vsa-ui option,
.cs-vsa-ui optgroup {
    color: inherit;
}