XFESystem

:root {
    --theme: "light";
    --bg-color: #ffffff;
    --text-color: #111111;
    --text-secondary-color: #6e6e6e;
    --link-color: #512db4;
    --main-color: #512db4;
    --main-deep-color: #1b0f48;
    --on-main-color: #ffffff;
    --focus-main-color: #512db410;
    --footer-bg: color-mix(in srgb, var(--bg-color) 96%, #000000 4%);
    --footer-border: color-mix(in srgb, var(--text-color) 12%, transparent);
    --code-block-bg: #2b2b2b;
    --code-block-surface: #323232;
    --code-block-gutter: #252525;
    --code-block-border: #454545;
}

.dark {
    --theme: "dark";
    --bg-color: #181a1b;
    --text-color: #e0e0e0;
    --text-secondary-color: #aeaeae;
    --link-color: #ac99ea;
    --main-color: #ac99ea;
    --main-deep-color: #c6b7e5;
    --on-main-color: #181a1b;
    --focus-main-color: #ac99ea10;
    --footer-bg: color-mix(in srgb, var(--bg-color) 90%, #ffffff 10%);
    --footer-border: rgba(255, 255, 255, 0.18);
}

/* Shared Bootstrap theme contract ---------------------------------------
   Keep these rules in the shared theme sheet: every application shell
   loads it after Bootstrap, so Git, Account, NuGet and the main site do
   not silently fall back to Bootstrap's blue buttons and white controls. */
html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    scrollbar-color: color-mix(in srgb, var(--main-color) 50%, transparent) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--main-color) 50%, transparent);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--main-deep-color);
}

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

.btn-close,
.btn-close-white {
    filter: var(--text-color, 0);
}

.btn-primary {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: var(--on-main-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:first-child:active,
.btn-primary.show {
    border-color: var(--main-deep-color);
    background-color: var(--main-deep-color);
    color: var(--on-main-color);
}

.btn-outline-primary {
    border-color: var(--main-color);
    color: var(--main-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:first-child:active,
.btn-outline-primary.show {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: var(--on-main-color);
}

.btn-secondary {
    border-color: var(--main-color);
    background-color: var(--bg-color);
    color: var(--main-color);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:first-child:active,
.btn-secondary.show {
    border-color: var(--main-deep-color);
    background-color: var(--bg-color);
    color: var(--main-deep-color);
}

.btn-outline-secondary {
    border-color: var(--footer-border);
    color: var(--text-secondary-color);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:first-child:active,
.btn-outline-secondary.show {
    border-color: var(--text-color);
    background-color: var(--text-color);
    color: var(--bg-color);
}

.btn-link {
    color: var(--link-color);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--main-deep-color);
}

.form-control,
.form-select {
    border-color: var(--footer-border);
    background-color: var(--bg-color);
    color: var(--text-color);
}

.form-control::placeholder {
    color: var(--text-secondary-color);
    opacity: .8;
}

.form-label {
    color: var(--text-secondary-color);
    font-weight: 500;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--main-color);
    background-color: var(--bg-color);
    box-shadow: 0 0 0 .25rem var(--focus-main-color);
    color: var(--text-color);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    border-color: var(--footer-border);
    background-color: color-mix(in srgb, var(--bg-color) 95%, #fff 5%);
    color: var(--text-secondary-color);
    opacity: 1;
}

.input-group-text {
    border-color: var(--footer-border);
    background-color: color-mix(in srgb, var(--bg-color) 96%, #000 4%);
    color: var(--text-color);
}

.form-check-input {
    border-color: color-mix(in srgb, var(--text-color) 35%, transparent);
    background-color: var(--bg-color);
}

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

.form-check-input:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 .25rem var(--focus-main-color);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--footer-border);
    --bs-table-color: var(--text-color);
    --bs-table-hover-bg: color-mix(in srgb, var(--text-color) 5%, transparent);
    --bs-table-hover-color: var(--text-color);
    color: var(--text-color);
}

.list-group-item,
.card,
.card-header {
    border-color: var(--footer-border);
    background-color: var(--bg-color);
    color: var(--text-color);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: color-mix(in srgb, var(--text-color) 4%, var(--bg-color));
    color: var(--text-color);
}

.bg-white,
.card-header {
    background-color: var(--bg-color) !important;
}

.bg-light {
    background-color: color-mix(in srgb, var(--text-color) 5%, transparent) !important;
    color: var(--text-color) !important;
}

.text-dark {
    color: var(--text-color) !important;
}

.nav-tabs {
    border-bottom-color: var(--footer-border);
}

.nav-tabs .nav-link {
    color: var(--text-secondary-color);
}

.nav-tabs .nav-link.active {
    border-color: var(--footer-border) var(--footer-border) var(--bg-color);
    background-color: var(--bg-color);
    color: var(--main-color);
}

input[type="file"] {
    color: var(--text-secondary-color);
}

input[type="file"]::file-selector-button {
    margin: -.45rem .8rem -.45rem -.75rem;
    padding: .58rem 1rem;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--main-color) 45%, transparent);
    background: var(--main-color);
    color: var(--on-main-color);
    font-weight: 650;
    cursor: pointer;
    transition: filter .15s ease;
}

input[type="file"]::file-selector-button:hover {
    filter: brightness(1.08);
}

/* Bootstrap's solid primary states default to white text. Keep their foreground
   in sync with the active theme so light accent colors remain readable. */
.text-bg-primary {
    background-color: var(--main-color) !important;
    color: var(--on-main-color) !important;
}

.page-item.active .page-link,
.page-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.list-group-item.active,
.dropdown-item.active {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: var(--on-main-color);
}

.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary:first-child:active,
:not(.btn-check) + .btn-outline-primary:active {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: var(--on-main-color);
}

/* Shared pagination ----------------------------------------------------- */
.xfe-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.xfe-pagination > a,
.xfe-pagination > span {
    display: inline-flex;
    min-width: 2.5rem;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: .4rem .72rem;
    border: 1px solid var(--footer-border);
    border-radius: .65rem;
    background: color-mix(in srgb, var(--bg-color) 95%, var(--text-color) 5%);
    color: var(--text-secondary-color);
    font-size: .9rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 .15rem .45rem color-mix(in srgb, #000 7%, transparent);
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.xfe-pagination > a:hover {
    border-color: color-mix(in srgb, var(--main-color) 58%, var(--footer-border));
    background: color-mix(in srgb, var(--main-color) 11%, var(--bg-color));
    color: var(--main-color);
    text-decoration: none;
    box-shadow: 0 .3rem .8rem color-mix(in srgb, var(--main-color) 12%, transparent);
    transform: translateY(-1px);
}

.xfe-pagination > a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--main-color) 32%, transparent);
    outline-offset: 2px;
}

.xfe-pagination > .active {
    border-color: var(--main-color);
    background: var(--main-color);
    color: var(--on-main-color);
    box-shadow: 0 .35rem 1rem color-mix(in srgb, var(--main-color) 24%, transparent);
}

.xfe-pagination > .xfe-pagination-ellipsis {
    min-width: 1.65rem;
    padding-inline: .2rem;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary-color);
    letter-spacing: .08em;
}

.xfe-pagination > .disabled {
    opacity: .42;
    box-shadow: none;
    cursor: not-allowed;
}

.xfe-pagination.compact > a,
.xfe-pagination.compact > span {
    min-width: 2.2rem;
    min-height: 2.2rem;
    padding: .34rem .58rem;
    border-radius: .55rem;
    font-size: .82rem;
}

@media (max-width: 575.98px) {
    .xfe-pagination {
        gap: .3rem;
    }

    .xfe-pagination > a,
    .xfe-pagination > span {
        min-width: 2.15rem;
        min-height: 2.15rem;
        padding: .32rem .52rem;
        border-radius: .52rem;
        font-size: .82rem;
    }

    .xfe-pagination > .xfe-pagination-ellipsis {
        min-width: 1.1rem;
        padding-inline: 0;
    }
}