/* The single place Bootstrap is coupled to our tokens; tokens.css stays pure --ist-*.
   Unlayered and loaded after bootstrap.min.css, so these win by source order. */

:root {
    --bs-primary: var(--ist-primary);
    --bs-primary-rgb: var(--ist-primary-rgb);
    --bs-link-color: var(--ist-primary-700);
    --bs-link-color-rgb: var(--ist-primary-rgb);
    --bs-link-hover-color: var(--ist-primary-800);
}

/* BS 5.3 .btn-* hardcode --bs-btn-*, not var(--bs-primary), so each variant is remapped below. */

.btn-primary {
    --bs-btn-bg: var(--ist-primary-600);
    --bs-btn-border-color: var(--ist-primary-600);
    --bs-btn-hover-bg: var(--ist-primary-800);
    --bs-btn-hover-border-color: var(--ist-primary-800);
    --bs-btn-active-bg: var(--ist-primary-900);
    --bs-btn-active-border-color: var(--ist-primary-900);
    --bs-btn-disabled-bg: var(--ist-primary-600);
    --bs-btn-disabled-border-color: var(--ist-primary-600);
    --bs-btn-focus-shadow-rgb: var(--ist-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ist-primary-700);
    --bs-btn-border-color: var(--ist-primary-600);
    --bs-btn-hover-bg: var(--ist-primary-600);
    --bs-btn-hover-border-color: var(--ist-primary-600);
    --bs-btn-active-bg: var(--ist-primary-700);
    --bs-btn-active-border-color: var(--ist-primary-700);
    --bs-btn-disabled-color: var(--ist-primary-600);
    --bs-btn-disabled-border-color: var(--ist-primary-600);
    --bs-btn-focus-shadow-rgb: var(--ist-primary-rgb);
}

.btn-danger {
    --bs-btn-bg: var(--ist-danger);
    --bs-btn-border-color: var(--ist-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ist-danger) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ist-danger) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--ist-danger) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ist-danger) 75%, black);
    --bs-btn-disabled-bg: var(--ist-danger);
    --bs-btn-disabled-border-color: var(--ist-danger);
}

.btn-success {
    --bs-btn-bg: var(--ist-success);
    --bs-btn-border-color: var(--ist-success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ist-success) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ist-success) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--ist-success) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ist-success) 75%, black);
    --bs-btn-disabled-bg: var(--ist-success);
    --bs-btn-disabled-border-color: var(--ist-success);
}

.btn-warning {
    --bs-btn-bg: var(--ist-warning);
    --bs-btn-border-color: var(--ist-warning);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ist-warning) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ist-warning) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--ist-warning) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ist-warning) 75%, black);
    --bs-btn-disabled-bg: var(--ist-warning);
    --bs-btn-disabled-border-color: var(--ist-warning);
}

.btn-info {
    --bs-btn-color: var(--ist-text-on-brand);
    --bs-btn-hover-color: var(--ist-text-on-brand);
    --bs-btn-active-color: var(--ist-text-on-brand);
    --bs-btn-disabled-color: var(--ist-text-on-brand);
    --bs-btn-bg: var(--ist-info);
    --bs-btn-border-color: var(--ist-info);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ist-info) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ist-info) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--ist-info) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ist-info) 75%, black);
    --bs-btn-disabled-bg: var(--ist-info);
    --bs-btn-disabled-border-color: var(--ist-info);
}

/* Outline semantics snap the hover/active fill onto the same --ist-* token as their solid
   counterparts, so both styles show one hue. outline-secondary is deliberately absent —
   it stays Bootstrap neutral gray (neutral-first, single brand accent). outline-primary is
   handled above with the rest of the primary family. */
.btn-outline-danger {
    --bs-btn-color: var(--ist-danger);
    --bs-btn-border-color: var(--ist-danger);
    --bs-btn-hover-bg: var(--ist-danger);
    --bs-btn-hover-border-color: var(--ist-danger);
    --bs-btn-active-bg: var(--ist-danger);
    --bs-btn-active-border-color: var(--ist-danger);
    --bs-btn-disabled-color: var(--ist-danger);
    --bs-btn-disabled-border-color: var(--ist-danger);
}

.btn-outline-success {
    --bs-btn-color: var(--ist-success);
    --bs-btn-border-color: var(--ist-success);
    --bs-btn-hover-bg: var(--ist-success);
    --bs-btn-hover-border-color: var(--ist-success);
    --bs-btn-active-bg: var(--ist-success);
    --bs-btn-active-border-color: var(--ist-success);
    --bs-btn-disabled-color: var(--ist-success);
    --bs-btn-disabled-border-color: var(--ist-success);
}

.btn-outline-warning {
    --bs-btn-color: var(--ist-warning);
    --bs-btn-border-color: var(--ist-warning);
    --bs-btn-hover-bg: var(--ist-warning);
    --bs-btn-hover-border-color: var(--ist-warning);
    --bs-btn-active-bg: var(--ist-warning);
    --bs-btn-active-border-color: var(--ist-warning);
    --bs-btn-disabled-color: var(--ist-warning);
    --bs-btn-disabled-border-color: var(--ist-warning);
}

.btn-outline-info {
    --bs-btn-color: var(--ist-info);
    --bs-btn-border-color: var(--ist-info);
    --bs-btn-hover-color: var(--ist-text-on-brand);
    --bs-btn-hover-bg: var(--ist-info);
    --bs-btn-hover-border-color: var(--ist-info);
    --bs-btn-active-color: var(--ist-text-on-brand);
    --bs-btn-active-bg: var(--ist-info);
    --bs-btn-active-border-color: var(--ist-info);
    --bs-btn-disabled-color: var(--ist-info);
    --bs-btn-disabled-border-color: var(--ist-info);
}

/* BS 5.3 hardcodes .form-check-input:checked to #0d6efd (it ignores --bs-primary),
   the same gap as the buttons above — remap it to the brand so switches, checkboxes
   and radios read teal, not Bootstrap blue. */
.form-check-input:checked {
    background-color: var(--ist-primary-600);
    border-color: var(--ist-primary-600);
}

.form-check-input:focus {
    border-color: var(--ist-primary-400);
    box-shadow: 0 0 0 .25rem rgba(var(--ist-primary-rgb), .25);
}

/* Toggle switches larger than BS 5.3's small default, app-wide so every .form-switch reads clearly.
   rem (not em) so the size is absolute — a switch inside a smaller-font container (e.g. a DevExtreme
   dxList item) stays the same size as one in a normal form, instead of scaling with inherited font-size. */
.form-switch {
    padding-left: 2.75rem;
}

.form-switch .form-check-input {
    width: 2.25rem;
    height: 1.15rem;
    margin-left: -2.75rem;
    margin-top: 0.15rem;
}

.accordion {
    --bs-accordion-active-color: var(--ist-primary-800);
    --bs-accordion-active-bg: var(--ist-primary-50);
    --bs-accordion-btn-focus-border-color: var(--ist-primary-400);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--ist-primary-rgb), .25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23166A7B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}