/* The component rules that took over from the removed theme provider.
 *
 * The brand colour used to live as a C# string in ThemeSelector.cs, went to that provider and
 * was turned into CSS at runtime - which is why searching the stylesheets for it found
 * nothing, and why it could not be changed without touching C#. The variables are next door
 * in nimbus-vars.css; this file holds what has to be written as rules because Bootstrap 5.3
 * declares those custom properties on component classes rather than on :root.
 *
 * ORDER MATTERS. This file has to be linked after bootstrap.min.css and after the Syncfusion
 * theme; NimbusAppHead is what guarantees that order. Do not link it from App.razor's own
 * head, which renders before HeadOutlet.
 *
 * MainLayout links it too, which is not an oversight. The provider's generated block sat in
 * the body and therefore beat the landing template's own stylesheet as well: buttons, cards,
 * alerts, form controls and badges on the public site were Nimbus-coloured and .25rem-round,
 * not the template's #05f and its own radii. Measured by intersecting the generated selectors
 * with the classes the landing pages write - 27 of them overlap. The variables live in
 * nimbus-vars.css precisely so that they can stay out of there.
 *
 * Values are measured, not guessed. Every colour was either read out of the generated
 * <style id="b-theme-styles"> block of the running application or computed with the
 * generator's own formulas and then checked against it; the formula table is in
 * nimbus-vars.css.
 */

.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #235695;
    --bs-btn-border-color: #235695;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #1D497E;
    --bs-btn-hover-border-color: #4F77AA;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #1C4477;
    --bs-btn-active-border-color: #5A80AF;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #235695;
    --bs-btn-disabled-border-color: #235695;
    --bs-btn-focus-shadow-rgb: 68, 111, 164;
}

.btn-outline-primary {
    --bs-btn-color: #235695;
    --bs-btn-border-color: #235695;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #235695;
    --bs-btn-hover-border-color: #235695;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #235695;
    --bs-btn-active-border-color: #235695;
    --bs-btn-disabled-color: #235695;
    --bs-btn-focus-shadow-rgb: 35, 86, 149;
}
.btn-secondary {
    --bs-btn-color: #343A40;
    --bs-btn-bg: #7ec3ef;
    --bs-btn-border-color: #7ec3ef;
    --bs-btn-hover-color: #343A40;
    --bs-btn-hover-bg: #6BA5CB;
    --bs-btn-hover-border-color: #97CFF2;
    --bs-btn-active-color: #343A40;
    --bs-btn-active-bg: #649CBF;
    --bs-btn-active-border-color: #9ED2F3;
    --bs-btn-disabled-color: #343A40;
    --bs-btn-disabled-bg: #7ec3ef;
    --bs-btn-disabled-border-color: #7ec3ef;
    --bs-btn-focus-shadow-rgb: 114, 174, 212;
}

.btn-outline-secondary {
    --bs-btn-color: #7ec3ef;
    --bs-btn-border-color: #7ec3ef;
    --bs-btn-hover-color: #343A40;
    --bs-btn-hover-bg: #7ec3ef;
    --bs-btn-hover-border-color: #7ec3ef;
    --bs-btn-active-color: #343A40;
    --bs-btn-active-bg: #7ec3ef;
    --bs-btn-active-border-color: #7ec3ef;
    --bs-btn-disabled-color: #7ec3ef;
    --bs-btn-focus-shadow-rgb: 126, 195, 239;
}
.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #23C02E;
    --bs-btn-border-color: #23C02E;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #1DA327;
    --bs-btn-hover-border-color: #4FCC57;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #1C9924;
    --bs-btn-active-border-color: #5ACF62;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #23C02E;
    --bs-btn-disabled-border-color: #23C02E;
    --bs-btn-focus-shadow-rgb: 68, 201, 77;
}

.btn-outline-success {
    --bs-btn-color: #23C02E;
    --bs-btn-border-color: #23C02E;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #23C02E;
    --bs-btn-hover-border-color: #23C02E;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #23C02E;
    --bs-btn-active-border-color: #23C02E;
    --bs-btn-disabled-color: #23C02E;
    --bs-btn-focus-shadow-rgb: 35, 192, 46;
}
.btn-info {
    --bs-btn-color: #343A40;
    --bs-btn-bg: #9BD8FE;
    --bs-btn-border-color: #9BD8FE;
    --bs-btn-hover-color: #343A40;
    --bs-btn-hover-bg: #83B7D7;
    --bs-btn-hover-border-color: #AFDFFE;
    --bs-btn-active-color: #343A40;
    --bs-btn-active-bg: #7CACCB;
    --bs-btn-active-border-color: #B4E1FE;
    --bs-btn-disabled-color: #343A40;
    --bs-btn-disabled-bg: #9BD8FE;
    --bs-btn-disabled-border-color: #9BD8FE;
    --bs-btn-focus-shadow-rgb: 139, 192, 225;
}

.btn-outline-info {
    --bs-btn-color: #9BD8FE;
    --bs-btn-border-color: #9BD8FE;
    --bs-btn-hover-color: #343A40;
    --bs-btn-hover-bg: #9BD8FE;
    --bs-btn-hover-border-color: #9BD8FE;
    --bs-btn-active-color: #343A40;
    --bs-btn-active-bg: #9BD8FE;
    --bs-btn-active-border-color: #9BD8FE;
    --bs-btn-disabled-color: #9BD8FE;
    --bs-btn-focus-shadow-rgb: 155, 216, 254;
}
.btn-warning {
    --bs-btn-color: #343A40;
    --bs-btn-bg: #F8B86C;
    --bs-btn-border-color: #F8B86C;
    --bs-btn-hover-color: #343A40;
    --bs-btn-hover-bg: #D29C5B;
    --bs-btn-hover-border-color: #F9C689;
    --bs-btn-active-color: #343A40;
    --bs-btn-active-bg: #C69356;
    --bs-btn-active-border-color: #F9C990;
    --bs-btn-disabled-color: #343A40;
    --bs-btn-disabled-bg: #F8B86C;
    --bs-btn-disabled-border-color: #F8B86C;
    --bs-btn-focus-shadow-rgb: 218, 165, 101;
}

.btn-outline-warning {
    --bs-btn-color: #F8B86C;
    --bs-btn-border-color: #F8B86C;
    --bs-btn-hover-color: #343A40;
    --bs-btn-hover-bg: #F8B86C;
    --bs-btn-hover-border-color: #F8B86C;
    --bs-btn-active-color: #343A40;
    --bs-btn-active-bg: #F8B86C;
    --bs-btn-active-border-color: #F8B86C;
    --bs-btn-disabled-color: #F8B86C;
    --bs-btn-focus-shadow-rgb: 248, 184, 108;
}
.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #F95741;
    --bs-btn-border-color: #F95741;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #D34937;
    --bs-btn-hover-border-color: #FA7867;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #C74534;
    --bs-btn-active-border-color: #FA8170;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #F95741;
    --bs-btn-disabled-border-color: #F95741;
    --bs-btn-focus-shadow-rgb: 249, 112, 93;
}

.btn-outline-danger {
    --bs-btn-color: #F95741;
    --bs-btn-border-color: #F95741;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #F95741;
    --bs-btn-hover-border-color: #F95741;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #F95741;
    --bs-btn-active-border-color: #F95741;
    --bs-btn-disabled-color: #F95741;
    --bs-btn-focus-shadow-rgb: 249, 87, 65;
}
.btn-light {
    --bs-btn-color: #343A40;
    --bs-btn-bg: #F0F0F0;
    --bs-btn-border-color: #F0F0F0;
    --bs-btn-hover-color: #343A40;
    --bs-btn-hover-bg: #CCCCCC;
    --bs-btn-hover-border-color: #F3F3F3;
    --bs-btn-active-color: #343A40;
    --bs-btn-active-bg: #C0C0C0;
    --bs-btn-active-border-color: #F3F3F3;
    --bs-btn-disabled-color: #343A40;
    --bs-btn-disabled-bg: #F0F0F0;
    --bs-btn-disabled-border-color: #F0F0F0;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
}

.btn-outline-light {
    --bs-btn-color: #F0F0F0;
    --bs-btn-border-color: #F0F0F0;
    --bs-btn-hover-color: #343A40;
    --bs-btn-hover-bg: #F0F0F0;
    --bs-btn-hover-border-color: #F0F0F0;
    --bs-btn-active-color: #343A40;
    --bs-btn-active-bg: #F0F0F0;
    --bs-btn-active-border-color: #F0F0F0;
    --bs-btn-disabled-color: #F0F0F0;
    --bs-btn-focus-shadow-rgb: 240, 240, 240;
}
.btn-dark {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #535353;
    --bs-btn-border-color: #535353;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #464646;
    --bs-btn-hover-border-color: #757575;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #424242;
    --bs-btn-active-border-color: #7E7E7E;
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: #535353;
    --bs-btn-disabled-border-color: #535353;
    --bs-btn-focus-shadow-rgb: 108, 108, 108;
}

.btn-outline-dark {
    --bs-btn-color: #535353;
    --bs-btn-border-color: #535353;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #535353;
    --bs-btn-hover-border-color: #535353;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #535353;
    --bs-btn-active-border-color: #535353;
    --bs-btn-disabled-color: #535353;
    --bs-btn-focus-shadow-rgb: 83, 83, 83;
}

/* The generator writes these two directly rather than through a variable, so they need a
 * rule rather than a token. */
.form-check-input:checked {
    background-color: var(--nimbus-primary);
    border-color: var(--nimbus-primary);
}

.progress-bar {
    background-color: var(--nimbus-primary);
}

/* Corner radii.
 *
 * The theme provider rounds these and touches nothing else about them - never their colours.
 * Bootstrap 5.3 rounds more generously (.375rem where this uses .25rem, .5rem for the large
 * button), so every one visibly changes shape the moment the provider goes unless it is
 * carried here.
 *
 * The list is read out of the generated block rather than assembled by hand: an earlier
 * version of this file carried three of them, which would have left the rest to spring open in
 * BZ-37. A first reading counted fifteen by looking only for a whole-property border-radius,
 * and so missed the four corner-specific rules further down, which the computed-style probe in
 * BZ-37 then caught on the pager. Written as border-radius rather than through
 * --bs-border-radius so it matches the provider exactly, including the way .rounded-circle and
 * .rounded-pill still win over it through !important. */
.btn,
.dropdown-menu,
.form-control,
.form-select,
.input-group-text,
.card,
.modal-content,
.nav-pills .nav-link,
.progress,
.alert,
.breadcrumb {
    border-radius: .25rem;
}

.btn-sm {
    border-radius: .2rem;
}

.btn-lg {
    border-radius: .3rem;
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
    border-radius: .25rem;
}

/* The provider spells the exception out, and it matters: a pill badge must stay a pill. */
.badge:not(.rounded-pill) {
    border-radius: .25rem;
}

/* Only the outer corners of a pager, and only the top corners of a tab - the provider is
   specific about both. .pagination-lg carries the same pair in the generated block and is left
   out: nothing in this codebase renders a large pager. */
.page-item:first-child .page-link {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.page-item:last-child .page-link {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.nav-tabs .nav-link {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

/* ---------------------------------------------------------------------------------------
 * Colours the theme provider wrote and Bootstrap does not (BZ-37).
 *
 * These rules exist because the provider's generated block is going away, not because the
 * design changes. Every value below was read out of that block on the running application and
 * checked afterwards with a computed-style probe over 58 class combinations; the only
 * deviations left are named in the pull request.
 *
 * Scope follows the same rule as the compatibility layer in BZ-07: carry what this codebase
 * actually renders, not the generator's full output. Of the 416 generated rules, 175 distinct
 * classes, 71 appear in this repository's own markup at all, and the ones below are those
 * whose value differs from what Bootstrap 5.3.3 produces once nimbus-tokens.css has set
 * --bs-primary. Measured and deliberately left out:
 *   - .list-group-item-{variant} and .list-group-item-action - no markup uses them.
 *   - .navbar.bg-{variant} .navbar-brand .nav-item .nav-link - the three navbar-brand elements
 *     in this codebase contain a link or an image, never a nav-item, so the selector never
 *     matched anything.
 *   - .form-check-input.is-valid - the one was-validated block wraps a Syncfusion dropdown
 *     tree, not a check input.
 *   - .form-check-input-{variant} on switches - a class of the removed library; nothing emits
 *     it. The plain .form-check-input:checked rule above covers the switches that exist.
 *   - .step-*, .rating-*, .jumbotron-*, .flatpickr-* and the progress internals - components
 *     of the removed library, none of them rendered here.
 * ------------------------------------------------------------------------------------- */

/* Surfaces. Bootstrap resolves these through --bs-{variant}-rgb, which stays at its own
   values on purpose, so each one needs the colour written out. Primary is absent: it already
   resolves correctly through --bs-primary-rgb. */
.bg-secondary { background-color: var(--nimbus-secondary) !important; }
.bg-success { background-color: var(--nimbus-success) !important; }
.bg-info { background-color: var(--nimbus-info) !important; }
.bg-warning { background-color: var(--nimbus-warning) !important; }
.bg-danger { background-color: var(--nimbus-danger) !important; }
.bg-light { background-color: var(--nimbus-light) !important; }
.bg-dark { background-color: var(--nimbus-dark) !important; }

/* .border-1 is a full border in the removed library and only a WIDTH in Bootstrap:
 *
 *     library:   .border-1 { border: 1px solid #dee2e6 !important }
 *     Bootstrap: .border-1 { border-width: 1px !important }
 *
 * Markup that writes `border-1 border-dark-subtle` without also writing `border` therefore
 * keeps border-style: none under Bootstrap alone, and the line simply is not drawn. Measured:
 * the two rules in NotificationSidebar went from `1px solid rgb(222,226,230)` to `0px none`,
 * and the whole grid of the storage-class compatibility matrix - 31 cells that name border-1
 * and never name border - lost every line.
 *
 * Its POSITION is load-bearing and is why it sits here rather than in nimbus-bootstrap.css.
 * Both this and the .border-{variant} rules below carry !important, so the later one wins the
 * colour. In the old cascade the library's stylesheet came first and the generated theme block
 * last, so `border-light border-1` drew the variant colour (#F0F0F0, measured) while a bare
 * border-1 drew #dee2e6. Putting this above the variants reproduces exactly that; putting it
 * in nimbus-bootstrap.css, which loads last, would paint every one of them grey. */
.border-1 {
    border: 1px solid #dee2e6 !important;
}

/* Primary is in this list although --bs-primary-rgb already carries it: .border-1 above sets
 * a colour too, and it loads after Bootstrap, so without this line it would paint the brand
 * border grey. Measured on the "Neues Element" button of the organization page, which writes
 * `border-1 border-primary`. */
.border-primary { border-color: var(--nimbus-primary) !important; }
.border-secondary { border-color: var(--nimbus-secondary) !important; }
.border-success { border-color: var(--nimbus-success) !important; }
.border-info { border-color: var(--nimbus-info) !important; }
.border-warning { border-color: var(--nimbus-warning) !important; }
.border-danger { border-color: var(--nimbus-danger) !important; }
.border-light { border-color: var(--nimbus-light) !important; }
.border-dark { border-color: var(--nimbus-dark) !important; }

/* A badge takes its text colour from --bs-badge-color, which Bootstrap leaves at white for
   every variant. On these four surfaces white text fails to read; the provider applied its
   YIQ rule and put dark text there instead. Status badges on the mail list are exactly this
   case. */
.badge.bg-secondary,
.badge.bg-info,
.badge.bg-warning,
.badge.bg-light {
    color: var(--nimbus-on-light-surface);
}

/* Alerts. Bootstrap 5.3 derives its own palette from -text-emphasis/-bg-subtle/-border-subtle,
   which have nothing to do with these colours - an alert-warning would go from sand to
   Bootstrap's yellow. Written through Bootstrap's own variables so the .alert-link rule keeps
   working without a second selector. */
.alert-primary {
    --bs-alert-color: #2B486C;
    --bs-alert-bg: #D3DDE9;
    --bs-alert-border-color: #9EB4D0;
    --bs-alert-link-color: #264061;
}

.alert-secondary {
    --bs-alert-color: #5A819B;
    --bs-alert-bg: #E5F3FB;
    --bs-alert-border-color: #C6E4F7;
    --bs-alert-link-color: #51748B;
}

.alert-success {
    --bs-alert-color: #2B7F36;
    --bs-alert-bg: #D3F2D5;
    --bs-alert-border-color: #9EE3A3;
    --bs-alert-link-color: #267230;
}

.alert-info {
    --bs-alert-color: #698CA2;
    --bs-alert-bg: #EBF7FE;
    --bs-alert-border-color: #D3EDFE;
    --bs-alert-link-color: #5E7E91;
}

.alert-warning {
    --bs-alert-color: #997B56;
    --bs-alert-bg: #FDF0E1;
    --bs-alert-border-color: #FBDFBE;
    --bs-alert-link-color: #896E4D;
}

.alert-danger {
    --bs-alert-color: #9A4940;
    --bs-alert-bg: #FDDDD9;
    --bs-alert-border-color: #FCB5AB;
    --bs-alert-link-color: #8A4139;
}

.alert-light {
    --bs-alert-color: #95989B;
    --bs-alert-bg: #FCFCFC;
    --bs-alert-border-color: #F8F8F8;
    --bs-alert-link-color: #86888B;
}

.alert-dark {
    --bs-alert-color: #444749;
    --bs-alert-bg: #DCDCDC;
    --bs-alert-border-color: #B3B3B3;
    --bs-alert-link-color: #3D3F41;
}

/* Bootstrap declares these three on the component, not on :root, and hardcodes #0d6efd for
   all of them - a :root override would do nothing. */
.pagination {
    --bs-pagination-color: var(--nimbus-primary);
    --bs-pagination-hover-color: var(--nimbus-primary-hover);
    --bs-pagination-active-bg: var(--nimbus-primary);
    --bs-pagination-active-border-color: var(--nimbus-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--nimbus-primary);
}

/* Nothing marks a list entry as current today, so this changes no pixel now. It is here
   because the provider covered it and the next list that needs a selected row should get the
   brand colour rather than Bootstrap's blue by default. */
.list-group {
    --bs-list-group-active-bg: var(--nimbus-primary);
    --bs-list-group-active-border-color: var(--nimbus-primary);
}

/* Reached by :active on every dropdown entry, not only by an .active one - which is why it
   matters even though nothing in this codebase marks a dropdown item as current. */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--nimbus-primary);
}

/* The focus ring of an input. Bootstrap derives it from --bs-primary and lands on the brand
   blue; the provider used a much paler grey-blue, and every text field in the application
   focused in it. .25rem rather than the generator's .2rem, because the ring width was already
   named as a deliberate change for buttons and the two should not disagree. */
.form-control:focus,
.form-select:focus {
    border-color: #C8D4E4;
    box-shadow: 0 0 0 .25rem #C8D4E4;
}

/* The selected row of the tenant billing snapshots is the one place .table-primary renders,
   and it is a table the provider coloured. */
.table-primary {
    --bs-table-bg: #C1CFE1;
    --bs-table-border-color: #8CA7C7;
    --bs-table-hover-bg: #B7C4D5;
}

/* The provider tinted the light table row a shade warmer than Bootstrap and darkened it less
   on hover. */
.table-light {
    --bs-table-bg: #FAFAFA;
    --bs-table-border-color: #F7F7F7;
    --bs-table-hover-bg: #EDEDED;
}

/* The notification panel has no edge.
 *
 * Between bootstrap5.css and bootstrap5.3.css Syncfusion changed its own rule from
 *     .e-sidebar.e-right { border-left: 0 solid rgba(0,0,0,0) }
 * to  .e-sidebar.e-right { border-left: 1px solid rgba(0,0,0,0) }
 * The colour is transparent, so what shows through is the panel's own #f8f9fa: a one pixel
 * light strip down the left edge, with the content shifted one pixel right inside it.
 *
 * The theme swap was a named change in BZ-01, but this was not one of the things it was named
 * for - that list is grid and list selection and the pressed state of flyouts. Put back the
 * way it rendered before. */
.e-sidebar.e-right {
    border-left-width: 0;
}

.e-sidebar.e-left {
    border-right-width: 0;
}