/* Overrides of Bootstrap's own classes and --bs-* variables. Must load after bootstrap.min.css. */

/* Dark mode: this app's --jas-* palette replaces Bootstrap's stock dark greys, which would not match
kendo-dark.css. Each rule below was kept because disabling it in the browser changed the dark rendering;
check the same way before deleting one. */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--jas-bg);
    --bs-body-color: var(--jas-text);
    --bs-border-color: var(--jas-border);
    --bs-secondary-bg: var(--jas-bg-subtle);
    --bs-tertiary-bg: var(--jas-bg-subtle);
    /* Bootstrap derives --bs-secondary-color (.text-muted) from these -rgb companions, not the hex. */
    --bs-body-color-rgb: var(--jas-text-rgb);
    --bs-body-bg-rgb: var(--jas-bg-rgb);
}

[data-bs-theme="dark"] #mainNav.bg-light {
    /* #mainNav (_Layout.cshtml) uses Bootstrap's .bg-light utility directly, which is a flat
    background-color, not a variable - overriding --bs-body-bg above doesn't reach it. */
    background-color: var(--jas-bg-subtle) !important;
}

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-color: var(--jas-text);
    --bs-dropdown-bg: var(--jas-bg-subtle);
    --bs-dropdown-link-color: var(--jas-text);
    --bs-dropdown-link-hover-color: var(--jas-text);
    --bs-dropdown-link-hover-bg: var(--jas-border);
    --bs-dropdown-header-color: var(--jas-text-muted);
    --bs-dropdown-divider-bg: var(--jas-border);
}

[data-bs-theme="dark"] .modal {
    --bs-modal-bg: var(--jas-bg-subtle);
    --bs-modal-color: var(--jas-text);
}

[data-bs-theme="dark"] .card {
    --bs-card-bg: var(--jas-bg-subtle);
    --bs-card-color: var(--jas-text);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    --bs-body-color: var(--jas-text);
    background-color: var(--jas-bg);
    border-color: var(--jas-border);
    color: var(--jas-text);
}

/* Excludes the eight contextual variants for the reason given on the .table rule below. */
[data-bs-theme="dark"] .table:not(:is(.table-primary, .table-secondary, .table-success, .table-danger,
                                      .table-warning, .table-info, .table-light, .table-dark)) {
    --bs-table-bg: var(--jas-bg);
    --bs-table-color: var(--jas-text);
    --bs-table-striped-bg: var(--jas-bg-subtle);
    --bs-table-border-color: var(--jas-border);
}

/* Both themes. Bootstrap 5.3 colours table text with --bs-emphasis-color (#000 / #fff), which does not
match the body text beside it; this puts tables back on --jas-text, odd rows included.
The :not() is required: the contextual variants (.table-warning etc.) set these variables at the same
specificity, and this file loads later, so a bare .table rule would repaint them with body text (light
text on light amber in dark mode). .table-active/.table-hover use --bs-table-color-state and need no
exclusion. */
.table:not(:is(.table-primary, .table-secondary, .table-success, .table-danger,
               .table-warning, .table-info, .table-light, .table-dark)) {
    --bs-table-color: var(--jas-text, #212529);
    --bs-table-striped-color: var(--jas-text, #212529);
}

/* .bg-white/.bg-light are flat utility classes (background-color: <literal>), not variable-driven, so
overriding --bs-body-bg etc. above doesn't reach them - same reason #mainNav needed its own rule. Used
directly in markup (input-group-text addons, card-like sections) on several pages including
Accounts/Details.cshtml. */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--jas-bg) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--jas-bg-subtle) !important;
}

/* .text-dark is Bootstrap's flat --bs-dark-rgb literal (bootstrap.css ~line 47, rgb(33,37,41)) with
!important - not variable-backed by this app's shim above, same class of problem as .bg-white/.bg-light.
Only the .bg-light pairing is broken: bg-light's own dark-mode override (above) turns the badge surface
dark while text-dark stays hardcoded near-black. The navbar's lone bg-warning/text-dark badge is
deliberately untouched - like alert-warning below, that surface keeps its light-mode look in both themes,
so dark text on it is still correct. */
[data-bs-theme="dark"] .bg-light.text-dark {
    color: var(--jas-text) !important;
}

/* Bootstrap alerts keep their light-mode pastel bg/dark text (a small badge reads fine unstyled
regardless of theme, but a full-width alert banner does not - the passkey offer banner on every page was
the case that surfaced this). Each variant keeps its own hue, just inverted for a dark surface. */
[data-bs-theme="dark"] .alert-primary {
    --bs-alert-color: #9ec5fe;
    --bs-alert-bg: #1a2744;
    --bs-alert-border-color: #2a3b5c;
}

[data-bs-theme="dark"] .alert-secondary {
    --bs-alert-color: var(--jas-text-muted);
    --bs-alert-bg: var(--jas-bg-subtle);
    --bs-alert-border-color: var(--jas-border);
}

[data-bs-theme="dark"] .alert-success {
    --bs-alert-color: #9ee6b8;
    --bs-alert-bg: #143d24;
    --bs-alert-border-color: #1f5a35;
}

[data-bs-theme="dark"] .alert-danger {
    --bs-alert-color: #f5a3ab;
    --bs-alert-bg: #3d1418;
    --bs-alert-border-color: #5a1f25;
}

[data-bs-theme="dark"] .alert-warning {
    --bs-alert-color: #ffda8a;
    --bs-alert-bg: #3d3212;
    --bs-alert-border-color: #5a4a1e;
}

[data-bs-theme="dark"] .alert-info {
    --bs-alert-color: #9eeaf9;
    --bs-alert-bg: #123a42;
    --bs-alert-border-color: #1e5560;
}

[data-bs-theme="dark"] .alert-light {
    --bs-alert-color: var(--jas-text-muted);
    --bs-alert-bg: var(--jas-bg-subtle);
    --bs-alert-border-color: var(--jas-border);
}

[data-bs-theme="dark"] .alert-dark {
    --bs-alert-color: var(--jas-text-muted);
    --bs-alert-bg: #141619;
    --bs-alert-border-color: #2a2d31;
}

.nav {
    --bs-nav-link-padding-x: .7rem;
}

.btn-outline-primary {
    --bs-btn-color: var(--jas-primary, #337ab7);
    --bs-btn-border-color: var(--jas-primary, #337ab7);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jas-primary, #337ab7);
    --bs-btn-hover-border-color: var(--jas-primary, #337ab7);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--jas-primary, #337ab7);
    --bs-btn-active-border-color: var(--jas-primary, #337ab7);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--jas-primary, #337ab7);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--jas-primary, #337ab7);
    --bs-gradient: none;
}


.text-bg-info {
    background: rgba(34,193,255,.9) !important;
    color: #fff !important;
}

.text-bg-success {
    background: rgba(38,181,115,.9) !important;
    color: #fff !important;
}

.text-bg-primary {
    background: rgba(24,118,255,.9) !important;
    color: #fff !important;
}

.text-bg-light {
    background: rgba(219,219,219,.9) !important;
    color: #111 !important;
}

.text-bg-dark {
    background: rgba(57,57,57,.9) !important;
    color: #fff !important;
}

.text-bg-secondary {
    background: rgba(90,90,90,.9) !important;
    color: #fff !important;
}

.text-bg-warning {
    background: rgba(233,185,47,.9) !important;
    color: #111 !important;
}

.text-bg-danger {
    background: rgba(229,60,60,.9) !important;
    color: #fff !important;
}