/* Base element layer.
 *
 * Gives BARE elements (no Bootstrap class) Bootstrap 5's look, for markup that
 * predates Bootstrap 5 (written for the old CSS framework) and for HTML that JavaScript builds at runtime.
 *
 * Specificity is kept at (0,0,1) or lower: element selectors with every
 * condition inside :where(), e.g. button:where(:not(.btn)). That ties with
 * Bootstrap's Reboot (which loads earlier, so this file wins the tie) and LOSES
 * to any class selector - Bootstrap components, vendor stylesheets (Mapbox,
 * Select2, bootstrap-table, GridStack...) and page rules all win without
 * !important. Keep it that way - if a rule here needs to win a fight, the fix
 * belongs elsewhere.
 */

/* ---- typography ------------------------------------------------------------ */
:where(small) { color: inherit; }
:where(hr) { border-color: var(--bs-border-color); opacity: 1; }
:where(code, kbd) { font-size: .875em; }
:where(kbd) { padding: .1em .35em; border-radius: var(--bs-border-radius-sm); }
mark {
    background: var(--bm-mark-background-color);
    color: var(--bm-mark-color);
    padding: 0 .2em;
}

/* ---- buttons: bare <button> and submit/button inputs look like .btn-primary -- */
button:where(:not(.btn, .btn-close, .navbar-toggler, .accordion-button, .nav-link, .dropdown-item, .page-link, .list-group-item, .carousel-control-prev, .carousel-control-next, [class*=mapboxgl-], [class*=leaflet-], [class*=select2-], [class*=gs-], [class*=e-btn])),
input:where([type=submit], [type=button], [type=reset]):where(:not(.btn)),
a:where([role=button]):where(:not(.btn, .dropdown-toggle, .nav-link, .dropdown-item)) {
    display: inline-block;
    padding: var(--bm-form-element-spacing-vertical) var(--bm-form-element-spacing-horizontal);
    font-family: inherit;
    font-size: var(--bm-font-size);
    font-weight: 400;
    line-height: var(--bm-line-height);
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    border-radius: var(--bs-border-radius);
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
button:where([data-bs-theme=dark] *):where(:not(.btn, .btn-close, .navbar-toggler, .accordion-button, .nav-link, .dropdown-item, .page-link, .list-group-item, .carousel-control-prev, .carousel-control-next, [class*=mapboxgl-], [class*=leaflet-], [class*=select2-], [class*=gs-], [class*=e-btn])),
input:where([data-bs-theme=dark] *):where([type=submit], [type=button], [type=reset]):where(:not(.btn)),
a:where([data-bs-theme=dark] *):where([role=button]):where(:not(.btn, .dropdown-toggle, .nav-link, .dropdown-item)) {
    background-color: #2f4f4f;
    border-color: #3d5555;
}
button:where(:not(.btn, .btn-close, .navbar-toggler, .accordion-button, .nav-link, .dropdown-item, .page-link, .list-group-item, .carousel-control-prev, .carousel-control-next, [class*=mapboxgl-], [class*=leaflet-], [class*=select2-], [class*=gs-], [class*=e-btn])):where(:hover),
input:where([type=submit], [type=button], [type=reset]):where(:not(.btn)):where(:hover) {
    filter: brightness(1.08);
}
button:where(:not(.btn, .btn-close, .navbar-toggler, .accordion-button, .nav-link, .dropdown-item, .page-link, .list-group-item, .carousel-control-prev, .carousel-control-next, [class*=mapboxgl-], [class*=leaflet-], [class*=select2-], [class*=gs-], [class*=e-btn])):where(:focus-visible),
input:where([type=submit], [type=button], [type=reset]):where(:not(.btn)):where(:focus-visible) {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--bm-primary-focus);
}
button:where(:disabled), input:where(:disabled), select:where(:disabled), textarea:where(:disabled) { cursor: not-allowed; opacity: .65; }

/* ---- form controls: bare inputs/selects/textareas look like .form-control --- */
input:where(:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=image], [type=hidden], [class*=form-], .select2-search__field)),
select:where(:not([class*=form-])),
textarea:where(:not([class*=form-], [class*=select2-])) {
    display: block;
    width: 100%;
    padding: var(--bm-form-element-spacing-vertical) var(--bm-form-element-spacing-horizontal);
    font-family: inherit;
    font-size: var(--bm-font-size);
    font-weight: 400;
    line-height: 1.25;
    color: var(--bm-form-element-color);
    background-color: var(--bm-form-element-background-color);
    background-clip: padding-box;
    border: 1px solid var(--bm-form-element-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 0 0 1rem;
}
select:where(:not([class*=form-], [multiple], [size])) {
    appearance: none;
    padding-right: 2.25rem;
    background-image: var(--bm-select-chevron);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}
textarea:where(:not([class*=form-], [class*=select2-])) { resize: vertical; }
input:where(:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=image], [type=hidden], [class*=form-], .select2-search__field)):where(:focus),
select:where(:not([class*=form-])):where(:focus),
textarea:where(:not([class*=form-])):where(:focus) {
    border-color: var(--bm-form-element-focus-color);
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--bm-primary-focus);
    background-color: var(--bm-form-element-active-background-color);
}
input:where(:not([class*=form-]))::placeholder,
textarea:where(:not([class*=form-]))::placeholder { color: var(--bm-form-element-placeholder-color); opacity: 1; }
input:where(:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=reset], [type=image], [type=hidden], [class*=form-], .select2-search__field)):where(:disabled, [readonly]),
select:where(:not([class*=form-])):where(:disabled),
textarea:where(:not([class*=form-])):where(:disabled, [readonly]) {
    background-color: var(--bm-form-element-disabled-background-color);
}
input:where([aria-invalid=true]), select:where([aria-invalid=true]), textarea:where([aria-invalid=true]) { border-color: var(--bm-form-element-invalid-color); }
input:where([type=search]):where(:not([class*=form-])) {
    border-radius: 2rem;
    padding-left: 2.25rem;
    background-image: var(--bm-search-icon);
    background-repeat: no-repeat;
    background-position: .85rem center;
    background-size: 1rem;
}
input:where([type=file]):where(:not([class*=form-])) { display: block; margin-bottom: 1rem; max-width: 100%; }
input:where([type=range]):where(:not([class*=form-])) { width: 100%; accent-color: var(--bs-primary); }
progress { width: 100%; height: .5rem; accent-color: var(--bs-primary); vertical-align: middle; }

/* checkboxes / radios keep native widgets, tinted to the brand */
input:where([type=checkbox], [type=radio]):where(:not([class*=form-])) {
    width: 1.1em;
    height: 1.1em;
    margin: 0 .4em 0 0;
    vertical-align: -.15em;
    accent-color: var(--bs-primary);
    cursor: pointer;
}
/* Legacy role=switch checkbox (codemodded to .form-switch where static; this covers JS) */
input:where([type=checkbox][role=switch]):where(:not(.form-check-input)) {
    appearance: none;
    flex: 0 0 auto;
    width: 2.1em;
    height: 1.15em;
    border-radius: 2em;
    border: 1px solid var(--bm-form-element-border-color);
    background-color: var(--bm-form-element-background-color);
    background-image: var(--bm-switch-knob-off);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    transition: background-position .15s ease-in-out;
    cursor: pointer;
}
input:where([type=checkbox][role=switch]):where(:not(.form-check-input)):where(:checked) {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}
input:where([type=checkbox][role=switch]):where(:not(.form-check-input)):where(:focus-visible) {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--bm-primary-focus);
}
label { margin-bottom: .25rem; }
label:where(:has(> input[type=checkbox], > input[type=radio])) { display: inline-flex; align-items: center; gap: .1em; cursor: pointer; }
fieldset { margin-bottom: 1rem; }
legend { font-size: 1em; font-weight: 600; }

/* ---- tables --------------------------------------------------------------- */
table:where(:not(.table)) { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
:where(table:not(.table)) :where(th, td) {
    padding: 5px 10px;  /* pre-migration cell spacing */
    border-bottom: 1px solid var(--bm-table-border-color);
    text-align: start;
    vertical-align: top;
}
:where(table:not(.table)) :where(thead th) { font-weight: 600; border-bottom-width: 2px; }

/* ---- article = card ----------------------------------------------------------- */
:where(article) {
    display: block;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background-color: var(--bm-card-background-color);
    border: 1px solid var(--bm-muted-border-color);
    border-radius: calc(var(--bs-border-radius) * 2);
    color: var(--bs-body-color);
}
:where(article) > :where(header, footer) {
    margin: -1rem -1.25rem 1rem;
    padding: .75rem 1.25rem;
    background-color: var(--bm-card-sectioning-background-color);
    border-bottom: 1px solid var(--bm-muted-border-color);
    border-radius: calc(var(--bs-border-radius) * 2) calc(var(--bs-border-radius) * 2) 0 0;
}
:where(article) > :where(footer) {
    margin: 1rem -1.25rem -1rem;
    border-bottom: 0;
    border-top: 1px solid var(--bm-muted-border-color);
    border-radius: 0 0 calc(var(--bs-border-radius) * 2) calc(var(--bs-border-radius) * 2);
}
:where(article) > :where(:last-child) { margin-bottom: 0; }

/* ---- <dialog> (legacy modal pattern: <dialog><article>...) ----------------------- */
:where(dialog) {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    max-width: min(720px, calc(100vw - 2rem));
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow: visible;
}
:where(dialog)::backdrop { background: rgba(0, 0, 0, .5); }
:where(dialog > article) {
    margin: 0;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}
:where(dialog:not(:has(> article))) {
    padding: 1rem 1.25rem;
    background: var(--bm-card-background-color);
    border: 1px solid var(--bm-muted-border-color);
    border-radius: calc(var(--bs-border-radius) * 2);
}
:where(dialog article > header .close, dialog article > header [rel=prev], a.close[aria-label=Close]) {
    float: right;
    width: 1rem;
    height: 1rem;
    background: var(--bm-icon-close) center / 1rem no-repeat;
    border: 0;
    opacity: .6;
}

/* ---- <details>: native disclosure marker (as before the migration) ------------------ */
details { margin-bottom: 1rem; }
summary { cursor: pointer; }

/* ---- Legacy .grid: equal columns from 768px ---------------------------------------- */
:where(.grid) { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
    :where(.grid) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

/* ---- aria-busy spinner ---------------------------------------------------------------- */
:where([aria-busy=true]):not(input, select, textarea, html)::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .4em;
    vertical-align: -.125em;
    border: .15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bm-spin .75s linear infinite;
}
@keyframes bm-spin { to { transform: rotate(360deg); } }

/* ---- data-tooltip (CSS only) ------------------------------------------------------------ */
:where([data-tooltip]) { position: relative; }
:where([data-tooltip])::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    padding: 4px 8px;
    border-radius: var(--bs-border-radius);
    background: #212529;
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
:where([data-tooltip]):where(:hover, :focus-visible)::after { opacity: 1; }
:where([data-tooltip][data-placement=bottom])::after { bottom: auto; top: calc(100% + 6px); }

/* ---- layout ------------------------------------------------------------------------------- */
:where(main) { display: block; padding-block: 1rem; }
:where(section) { margin-bottom: 1.5rem; }
:where(.btn-group, [role=group]) > :where(button, a[role=button]) { margin: 0; }

/* ---- Legacy button variants still used in markup (.secondary / .outline / .contrast)
   Same (0,0,1) specificity rule: any page or component class wins. ------------------- */
button:where(.secondary):where(:not(.btn)),
a:where([role=button].secondary):where(:not(.btn)),
input:where(.secondary):where([type=submit], [type=button]):where(:not(.btn)) {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}
button:where(.contrast):where(:not(.btn)),
a:where([role=button].contrast):where(:not(.btn)) {
    background-color: var(--bs-emphasis-color);
    border-color: var(--bs-emphasis-color);
    color: var(--bs-body-bg);
}
button:where(.outline):where(:not(.btn)),
a:where([role=button].outline):where(:not(.btn)),
input:where(.outline):where([type=submit], [type=button]):where(:not(.btn)) {
    background-color: transparent;
    border-color: var(--bs-primary);
    color: var(--bs-link-color);
}
button:where(.outline.secondary):where(:not(.btn)),
a:where([role=button].outline.secondary):where(:not(.btn)) {
    background-color: transparent;
    border-color: var(--bs-secondary-color);
    color: var(--bs-secondary-color);
}
button:where(.outline.contrast):where(:not(.btn)),
a:where([role=button].outline.contrast):where(:not(.btn)) {
    background-color: transparent;
    border-color: var(--bs-emphasis-color);
    color: var(--bs-emphasis-color);
}
button:where([data-bs-theme=dark] *):where(.outline):where(:not(.btn)),
a:where([data-bs-theme=dark] *):where([role=button].outline):where(:not(.btn)) {
    background-color: transparent;
}

/* Legacy role="group": joined button row */
:where([role=group]:not(.btn-group)) {
    display: inline-flex;
    vertical-align: middle;
}
:where([role=group]:not(.btn-group)) > :where(button, a[role=button], input[type=button]) { border-radius: 0; margin: 0; }
:where([role=group]:not(.btn-group)) > :where(:first-child) { border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); }
:where([role=group]:not(.btn-group)) > :where(:last-child) { border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }