/* ============================================================================================================================
	rm-adapter-bootstrap.css - our adapter for Bootstrap (Step 4, 5 Oct 2026: rm-adapter-bootstrap.css until then, plus the
	Bootstrap-specific rules of the old site.css at its end): keeps the site's look on Bootstrap 5.3.8 (5 Oct 2026; it replaces bootstrap-4.1-look.css, which kept the
	Bootstrap 4.1.3 look on 4.6.2 - its rules are carried over here where they still apply).

	Loaded right after assets/vendor/bootstrap-5.3.8/css/bootstrap.min.css, so these rules sit where Bootstrap's own rules sit in
	the cascade (the rm- layers after it, rm-components.css and rm-brand-states.css still override them as before). Each rule puts back the value the site
	showed with Bootstrap 4.6.2 + bootstrap-4.1-look.css where Bootstrap 5 changed it; found by comparing the computed styles of every
	element of every page and dialog, at 8 screen sizes, before and after (the migration's cs.py, see the progress document). Where
	Bootstrap 5 draws a component from its own CSS variables, the variables are set; otherwise the old declarations are repeated.
	Section 1 maps Bootstrap's colours to our brand tokens (assets/tokens/rm-brand-tokens.css). Remove a rule to adopt Bootstrap 5's own.
	J-42 (14 Oct 2026): the Bootstrap 4 greys the rules below repeated are the nearest brand token each - #212529 --rm-darker,
	#495057 / #545b62 / #4e555b --rm-grey-55, #6c757d --rm-grey-77, #ced4da --rm-light, #dee2e6 --rm-grey-e5, #e9ecef / #ebebeb
	--rm-lighter, #f7f7f7 --rm-grey-f5, #16181b --rm-page-dark; the custom select's arrow (a data: URI, which cannot read a variable)
	is --rm-grey-38's #383838 written out (was #343a40).
============================================================================================================================ */

/* ---- 1. Bootstrap 5's variables: the brand tokens, and the Bootstrap 4 values the site was laid out with ---- */
:root {
	--bs-primary: var(--rm-orange);
	--bs-primary-rgb: var(--rm-orange-rgb);
	--bs-link-color: var(--rm-orange);					/* links take their colours from rm-base.css / rm-components-theme.css; Bootstrap 4 had blue here */
	--bs-link-color-rgb: var(--rm-orange-rgb);
	--bs-link-hover-color: var(--rm-orange-hover);
	--bs-link-hover-color-rgb: 218, 98, 11;
	--bs-focus-ring-color: var(--rm-orange-focus-soft);
	/* (owner's colour rule, 6 Oct 2026: no Bootstrap blue, no green outside the API code - the semantic colours on the brand, ready
	   for any component that uses them; none does today) */
	--bs-success: var(--rm-orange);
	--bs-success-rgb: var(--rm-orange-rgb);
	--bs-info: var(--rm-orange);
	--bs-info-rgb: var(--rm-orange-rgb);
	--bs-success-text-emphasis: var(--rm-dark);
	--bs-info-text-emphasis: var(--rm-dark);
	--bs-primary-text-emphasis: var(--rm-dark);
	--bs-success-bg-subtle: var(--rm-lighter);
	--bs-info-bg-subtle: var(--rm-lighter);
	--bs-primary-bg-subtle: var(--rm-lighter);
	--bs-success-border-subtle: var(--rm-light);
	--bs-info-border-subtle: var(--rm-light);
	--bs-primary-border-subtle: var(--rm-light);
	--bs-form-valid-color: var(--rm-orange);
	--bs-form-valid-border-color: var(--rm-orange);
	--bs-body-text-align: left;
	--bs-border-radius: 0.25rem;
	--bs-border-radius-sm: 0.2rem;
	--bs-border-radius-lg: 0.3rem;
	--bs-border-color-translucent: var(--rm-black-20);
	--bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	scroll-behavior: auto;		/* Bootstrap 5 scrolls smoothly: our own scrolling (go-to-top, dialogs) is animated by rm-site.js */
}

/* ---- 2. Reboot: what Bootstrap 4 set on the page's elements ---- */
html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
label { margin-bottom: 0.5rem; }
small, .small { font-size: 80%; }
hr { box-sizing: content-box; height: 0; overflow: visible; margin-top: 1rem; margin-bottom: 1rem; color: inherit; border: 0; border-top: var(--rm-border-width) solid var(--rm-black-10); opacity: 1; }
pre { color: var(--rm-darker); font-size: 87.5%; }
/* (4.1.3) code wraps as break-word (the API samples on the developer page) */
code { word-wrap: normal; overflow-wrap: normal; word-break: break-word; }
/* (4.1.3) only .btn shows the pointer; other buttons the arrow */
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: default; }
tbody, td, tfoot, th, thead, tr { border: none; }
table { caption-side: top; }

/* ---- 3. Grid: rows had 15 px gutters and left their children alone ---- */
.row { --bs-gutter-x: 30px; --bs-gutter-y: 0; }
.row > * { flex-shrink: 1; width: auto; max-width: none; padding-right: 0; padding-left: 0; margin-top: 0; }
.container, .container-fluid { --bs-gutter-x: 30px; }
/* the columns DataTables lays its controls out with (col-sm-12, col-md-5/6/7): Bootstrap 4's 15 px padding and percentages */
.row > [class*="col-"] { position: relative; flex: 0 1 auto; width: 100%; max-width: none; padding-right: var(--rm-space-3); padding-left: var(--rm-space-3); }
@media (min-width: 576px) {
	.row > .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
	.row > .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.row > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.row > .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
}

/* ---- 4. Buttons ---- */
/* the colours Bootstrap 5 gives a pressed button: those the site showed with Bootstrap 4 (primary: our orange with the white
   border, as rm-brand-states.css shows it, also when a .disabled one is pressed; secondary: Bootstrap 4's darker grey) */
.btn-primary { --bs-btn-active-color: var(--rm-white); --bs-btn-active-bg: var(--rm-accent); --bs-btn-active-border-color: var(--rm-white); }
.btn-secondary { --bs-btn-active-color: var(--rm-white); --bs-btn-active-bg: var(--rm-grey-55); --bs-btn-active-border-color: var(--rm-grey-55); }
.btn { white-space: nowrap; }		/* (4.1.3) captions stay on one line */
/* a disabled button still gets the pointer (its title shows; a .disabled one gets its clicks: our handlers check the class) */
.btn:disabled, .btn.disabled, fieldset:disabled .btn { pointer-events: auto; }
a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; }
button.btn, input.btn { cursor: default; }
.btn:not(:disabled):not(.disabled), .btn-close:not(:disabled):not(.disabled) { cursor: pointer; }

/* ---- 5. Close buttons: the Bootstrap 4 "x" (the × text) instead of Bootstrap 5's drawn cross ---- */
.btn-close {
	box-sizing: border-box; width: auto; height: auto; padding: 0; float: right; font-size: 1.5rem; font-weight: var(--rm-font-weight-bold); line-height: 1;
	color: var(--rm-black); text-shadow: 0 1px 0 var(--rm-white); background: transparent none; border: 0; border-radius: 0; opacity: 0.75; filter: none;
}
/* (black at 75 %: 5.2:1 on the title bar's lower grey #969696 - at 50 % it was 2.95:1, J-41; under the pointer or focused: black) */
.btn-close:hover { color: var(--rm-black); text-decoration: none; opacity: 0.75; }
.btn-close:not(:disabled):not(.disabled):hover, .btn-close:not(:disabled):not(.disabled):focus { opacity: 1; }
.btn-close:focus { box-shadow: none; }
.modal-header .btn-close { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; }

/* ---- 6. Fields ---- */
.form-control { height: calc(1.5em + 0.75rem + 2px); -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; color: var(--rm-grey-55); background-color: var(--rm-white); border-color: var(--rm-light); }
textarea.form-control { height: auto; }
.form-control-sm { height: calc(1.5em + 0.5rem + 2px); }
.form-control-lg { height: calc(1.5em + 1rem + 2px); }
textarea.form-control, textarea.form-control-sm, textarea.form-control-lg, .form-control-sm, .form-control-lg { min-height: 0; }
select.form-control[size], select.form-control[multiple] { height: auto; }
[type="search"] { -webkit-appearance: none; appearance: none; }		/* (Bootstrap 5: textfield) */
.form-control:focus { color: var(--rm-grey-55); background-color: var(--rm-white); border-color: var(--rm-grey-99); box-shadow: 0 0 0 0.2rem var(--rm-orange-focus-soft); }		/* (the grey it computed to under rm-components-theme.css; Bootstrap 4's blue #80bdff before) */

/* Bootstrap 4's custom select: the tables' "Show N entries" (ui/rm-table.js gives it the Bootstrap 4 classes, as datatables-config.js did); (4.1.3) its size */
.custom-select { display: inline-block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 1.75rem 0.375rem 0.75rem; font-size: var(--rm-font-size-body);
	font-weight: 400; line-height: var(--rm-line-height); color: var(--rm-grey-55); vertical-align: middle;
	background: var(--rm-white) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23383838' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") right 0.75rem center/8px 10px no-repeat;
	border: var(--rm-border-width) solid var(--rm-light); border-radius: 0.25rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.custom-select:focus { border-color: var(--rm-grey-99); outline: 0; box-shadow: 0 0 0 0.2rem var(--rm-orange-focus-soft); }		/* (as .form-control:focus) */
.btn-link { --bs-btn-focus-shadow-rgb: var(--rm-orange-rgb); }		/* (Bootstrap's own focus ring of .btn-link is blue) */
/* (a valid field shows no green tick - none of our forms marks fields valid; Bootstrap draws the tick as a green SVG) */
.form-control.is-valid, .was-validated .form-control:valid { background-image: none; }
.form-select.is-valid, .was-validated .form-select:valid { --bs-form-select-bg-icon: none; }
.custom-select[multiple], .custom-select[size]:not([size="1"]) { height: auto; padding-right: 0.75rem; background-image: none; }
.custom-select:disabled { color: var(--rm-grey-77); background-color: var(--rm-lighter); }
.custom-select-sm { height: calc(1.8125rem + 2px); padding-top: 0.375rem; padding-bottom: 0.375rem; padding-left: 0.75rem; font-size: 75%; }

/* ---- 7. Dialogs ---- */
.modal { --bs-modal-zindex: 1050; overflow: hidden; right: 0; bottom: 0; width: auto; height: auto; }	/* (4.1.3) right/bottom/width/height: the four edges, not 100 % */
.modal-open { overflow: hidden; }			/* also after a dialog on top of another one closes (our code puts the class back) */
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.modal-backdrop { --bs-backdrop-zindex: 1040; }
.modal-content { color: inherit; }
.modal-header { flex-shrink: 1; align-items: flex-start; justify-content: space-between; }
/* (4.1.3) the footer: no wrapping, a .25rem gap between its children, square corners, the lighter top border */
.modal-footer { flex-shrink: 1; flex-wrap: nowrap; padding: 1rem; border-top-color: var(--rm-lighter); border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.modal-footer > * { margin: 0; }
.modal-footer > :not(:first-child) { margin-left: 0.25rem; }
.modal-footer > :not(:last-child) { margin-right: 0.25rem; }

/* ---- 8. Drop-down menus (Bootstrap's; bootstrap-select's lists until Step 3a, now assets/css/ui/rm-select.css) ---- */
.dropdown-menu { --bs-dropdown-item-padding-x: 1.5rem; --bs-dropdown-link-hover-color: var(--rm-page-dark); --bs-dropdown-link-hover-bg: var(--rm-lighter);
	--bs-dropdown-link-active-bg: var(--rm-orange); --bs-dropdown-divider-bg: var(--rm-lighter); --bs-dropdown-border-color: var(--rm-black-15);
	top: 100%; left: 0; float: left; margin: 0.125rem 0 0; }

/* ---- 9. Tabs ---- */
/* (4.1.3) the -1px overlap on .nav-item (the 28 tab rows on the developer page) */
.nav-tabs .nav-item { margin-bottom: -1px; }
.nav-tabs .nav-link { margin-bottom: 0; }
.nav-link { background-position: 0% 0%; }
.nav-link:focus-visible { box-shadow: none; }		/* (Bootstrap 5 adds a blue ring) */

/* ---- 9a. Paging (DataTables) ---- */
.pagination { border-radius: 0.25rem; }
.page-link { padding: 0.5rem 0.75rem; font-size: inherit; line-height: 1.25; }
.page-item.disabled .page-link { cursor: auto; }

/* ---- 9b. Tables: Bootstrap 4's cells (borders on top, .75rem / .3rem padding, the table's own text colour, no cell background) ---- */
.table { vertical-align: baseline; border-color: currentcolor; }
.table > tbody, .table > thead { vertical-align: middle; }
.table > :not(caption) > * > * { padding: 0.75rem; color: inherit; background-color: transparent; border-bottom-width: 0; box-shadow: none; }
.table-sm > :not(caption) > * > * { padding: 0.3rem; }
.table th, .table td { vertical-align: top; border-top: var(--rm-border-width) solid var(--rm-grey-e5); }
.table thead th { vertical-align: bottom; border-bottom: 2px solid var(--rm-grey-e5); }
.table tbody + tbody { border-top: 2px solid var(--rm-grey-e5); }
.table-responsive { display: block; width: 100%; }
@media (max-width: 575.98px) { .table-responsive-sm { display: block; width: 100%; } }
@media (max-width: 767.98px) { .table-responsive-md { display: block; width: 100%; } }
@media (max-width: 991.98px) { .table-responsive-lg { display: block; width: 100%; } }
@media (max-width: 1199.98px) { .table-responsive-xl { display: block; width: 100%; } }
/* (4.1.3 + our fix of 5 Oct 2026) a hovered row is shaded, its text keeps the table's colour */
.table-hover tbody tr:hover { color: inherit; background-color: rgba(0, 0, 0, 0.075); }

/* ---- 10. Progress bars ---- */
/* (4.1.3) our percent labels inside the bars (disk usage, luminance/saturation/quality) are not cut */
.progress { line-height: inherit; }
.progress-bar { overflow: visible; }
/* (4.1.3) the stripes keep moving when the system asks for reduced motion */
@keyframes progress-bar-stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
	.progress-bar-animated { animation: var(--rm-duration-slow) linear infinite progress-bar-stripes; }
}

/* ---- 11. Alerts (the cookie banner) ---- */
.alert { --bs-alert-padding-x: 1.25rem; --bs-alert-padding-y: 0.75rem; }

/* ---- 12. Cards ---- */
.card { --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.25rem; --bs-card-border-color: rgba(0, 0, 0, 0.125); --bs-card-cap-padding-y: 0.75rem;
	--bs-card-cap-padding-x: 1.25rem; --bs-card-cap-bg: rgba(0, 0, 0, 0.03); --bs-card-bg: var(--rm-white); color: inherit; }
.card-body { min-height: auto; color: inherit; }		/* (4.1.3) */

/* ---- 12a. Everything Popper places (open lists, tooltips, popovers) is drawn on its own layer, as Popper 1 asked for (Popper 2
   moves it with a 2D transform: the text then got coloured edges from subpixel smoothing, e.g. the trash icons of the preset list) */
[data-popper-placement] { will-change: transform; }

/* ---- 12b. Tooltips and popovers ---- */
.tooltip { --bs-tooltip-zindex: 1070; }
.popover { --bs-popover-zindex: 1060; --bs-popover-header-padding-x: 0.75rem; --bs-popover-header-padding-y: 0.5rem; --bs-popover-header-bg: var(--rm-grey-f5);
	--bs-popover-body-padding-x: 0.75rem; --bs-popover-body-padding-y: 0.5rem; --bs-popover-body-color: var(--rm-darker); }
.popover-header { border-bottom-color: var(--rm-lighter); }

/* ---- site.css: Bootstrap Specific ---- */

.btn-link:hover,
.btn-link:focus { color: var(--theme-color); }
.page-item.active .page-link,
.page-link:hover,
.page-link:focus {
	color: var(--rm-white) !important;
	background-color: var(--rm-accent) !important;
	border-color: var(--rm-accent) !important;
}
label.radio,
label.checkbox { padding-left: var(--rm-space-4); }