/*
 * legacy-bridge.css — replaces wwwroot/css/styles.css (Ynex admin template, 965KB).
 *
 * Audit result (see css-payload report): no view, JS file, or C# helper uses any
 * class, id selector, or CSS custom property that only styles.css provides.
 * The ONLY functional role styles.css still played was re-theming Bootstrap 5.3
 * away from stock blue (#0d6efd): body typography/background, link colour,
 * .btn-primary, form focus/checked states, dropdown active state.
 *
 * This sheet reproduces that skin by mapping Bootstrap 5.3 hooks onto the shared
 * --cdl-* token contract, so it is brand-neutral: it renders violet under
 * cdl-tokens.css and blue under bz-tokens.css with no per-brand rules here.
 *
 * Load order: must come AFTER bootstrap.min.css (it overrides same-specificity
 * element rules such as `a { color }`). Order relative to the token file does
 * not matter (custom properties resolve at computed-value time).
 */

/* ---- Global Bootstrap theme hooks ------------------------------------- */
:root {
    --bs-body-font-family: var(--cdl-font-ui);
    --bs-body-bg: var(--cdl-canvas);
    --bs-body-color: var(--cdl-ink);
    --bs-heading-color: var(--cdl-ink-strong);
    --bs-border-color: var(--cdl-border);
    --bs-border-radius: var(--cdl-radius-control);
    /* Non-rgb link vars feed .nav, .pagination, .btn-link component vars. */
    --bs-link-color: var(--cdl-brand);
    --bs-link-hover-color: var(--cdl-brand-deep);
}

/* Bootstrap 5.3 paints anchors via rgba(var(--bs-link-color-rgb), ...), which
   needs an R,G,B triplet the hex tokens cannot supply — override directly. */
a {
    color: var(--cdl-brand);
}

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

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cdl-font-display);
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--cdl-radius-control);
}

.btn-primary {
    --bs-btn-bg: var(--cdl-brand);
    --bs-btn-border-color: var(--cdl-brand);
    --bs-btn-hover-bg: var(--cdl-brand-deep);
    --bs-btn-hover-border-color: var(--cdl-brand-deep);
    --bs-btn-active-bg: var(--cdl-brand-deep);
    --bs-btn-active-border-color: var(--cdl-brand-deep);
    --bs-btn-disabled-bg: var(--cdl-brand);
    --bs-btn-disabled-border-color: var(--cdl-brand);
}

/* --bs-btn-focus-shadow-rgb also needs a triplet; supply the ring directly. */
.btn-primary:focus-visible,
.btn-primary:active:focus-visible {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cdl-brand) 32%, transparent);
}

/* ---- Text utility (uses --bs-primary-rgb triplet internally) ----------- */
.text-primary {
    color: var(--cdl-brand) !important;
}

/* ---- Forms -------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--cdl-brand);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cdl-brand) 18%, transparent);
}

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

.form-check-input:focus {
    border-color: var(--cdl-brand);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cdl-brand) 18%, transparent);
}

/* ---- Dropdowns (header account menu) ------------------------------------ */
.dropdown-menu {
    --bs-dropdown-border-color: var(--cdl-border);
    --bs-dropdown-border-radius: var(--cdl-radius-control);
    --bs-dropdown-link-hover-bg: var(--cdl-brand-tint);
    --bs-dropdown-link-active-color: var(--cdl-ink-strong);
    --bs-dropdown-link-active-bg: var(--cdl-brand-tint);
}

/* ---- Pagination (search/rankings result paging) -------------------------- */
.pagination {
    --bs-pagination-active-bg: var(--cdl-brand);
    --bs-pagination-active-border-color: var(--cdl-brand);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cdl-brand) 18%, transparent);
}