/* ============================================================================================================================
	rm-table.css - the sortable, searchable, paged tables (assets/js/ui/rm-table.js, Step 3a, 5 Oct 2026; DataTables 1.13.11 + its
	Bootstrap 5 styling + datatables-look.css before). The same layout and look: "Show N entries" and the export buttons at the
	top left, "Search:" at the top right, the info at the bottom left, the pages at the bottom right (centred below 768 px); the
	sort arrows of DataTables 1.10 (an up and a down arrow, the active one bright); the Bootstrap table, its hover and our dark
	dialogs' colours as they are; a selected row in the accent colour. Colours from the brand tokens.
============================================================================================================================ */

.rm-table-wrapper {
	--rm-table-arrow-dim: 0.3;
	--rm-table-selected: var(--rm-orange-rgb);
	--rm-table-selected-text: var(--rm-white);
}

/* ---- top and bottom bars ---- */
.rm-table__top,
.rm-table__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}
.rm-table__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.rm-table__length,
.rm-table__search {
	margin: 0;
	font-weight: normal;
	white-space: nowrap;
	text-align: left;
}
/* "Show N entries" is one of our lists (rm-select), compact as the search field next to it (!important: beats rm-select.css's own
   !important padding of the field, which beats Tom Select's) */
.rm-table__length .rm-select { width: auto; margin: 0 0.25em; }
.rm-table__length .rm-select > .rm-select__control { min-height: 0; padding: 3px 26px 3px 8px !important; font-size: inherit; line-height: 1.5; }
.rm-table__search input { display: inline-block; width: auto; margin-left: 0.5em; }
.rm-table__info { padding-top: 0.85em; }
.rm-table__paging .pagination { margin: 2px 0; white-space: nowrap; justify-content: flex-end; }
.rm-table__export[hidden], .rm-table__export.hidden { display: none; }

@media (max-width: 767.98px) {
	.rm-table__top,
	.rm-table__bottom,
	.rm-table__controls { justify-content: center; text-align: center; }
	.rm-table__info,
	.rm-table__paging { width: 100%; text-align: center; }
	.rm-table__paging .pagination { justify-content: center; }
}
/* touch screens: 16 px in the search field - iOS Safari zooms the page into a smaller field when it is tapped */
@media (pointer: coarse) {
	.rm-table__search input { font-size: 16px; }
}
/* phones: the search field takes the room that is left; the paging (‹ 1 … 6 … 120 ›) a little tighter */
@media (max-width: 575.98px) {
	.rm-table__search { display: flex; align-items: center; max-width: 100%; }
	.rm-table__search input { flex: 1 1 auto; width: auto; min-width: 0; }
	.rm-table__paging .page-link { padding: 0.375rem 0.6rem; }
}

/* ---- the table ---- */
table.rm-table {
	clear: both;
	margin-top: 6px !important;
	margin-bottom: 6px !important;
	max-width: none !important;
	border-collapse: separate !important;
	border-spacing: 0;
}
table.rm-table > thead > tr > th,
table.rm-table > tbody > tr > td { box-sizing: content-box; }
table.rm-table td.rm-table__empty { text-align: center; }

/* sort arrows (DataTables 1.10: an up and a down arrow at the right of the head, the active direction bright) */
table.rm-table > thead > tr > th.rm-table__sort {
	position: relative;
	padding-right: var(--rm-space-5);
	cursor: pointer;
	user-select: none;
}
table.rm-table > thead > tr > th.rm-table__sort::before,
table.rm-table > thead > tr > th.rm-table__sort::after {
	position: absolute;
	display: block;
	bottom: 0.9em;
	opacity: var(--rm-table-arrow-dim);
	line-height: inherit;
	font-size: inherit;
}
table.rm-table > thead > tr > th.rm-table__sort::before { right: 1em; content: "\2191"; }
table.rm-table > thead > tr > th.rm-table__sort::after { right: 0.5em; content: "\2193"; }
/* (the arrows are decoration: an empty alternative text keeps them out of the column names screen readers read; aria-sort says it) */
@supports (content: "x" / "") {
	table.rm-table > thead > tr > th.rm-table__sort::before { content: "\2191" / ""; }
	table.rm-table > thead > tr > th.rm-table__sort::after { content: "\2193" / ""; }
}
table.rm-table > thead > tr > th.rm-table__sort--asc::before,
table.rm-table > thead > tr > th.rm-table__sort--desc::after { opacity: 1; }
/* (keyboard focus: a ring in the accent - a box-shadow, as rm-base.css removes outlines - over Bootstrap's own cell shadow) */
table.rm-table > thead > tr > th.rm-table__sort:focus-visible {
	box-shadow: inset 0 0 0 2px var(--rm-accent), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

/* small tables (all of ours are .table-sm) */
table.rm-table.table-sm > thead > tr > th.rm-table__sort { padding-right: var(--rm-space-4); }
table.rm-table.table-sm > thead > tr > th.rm-table__sort::before { top: 5px; bottom: auto; right: 0.85em; }
table.rm-table.table-sm > thead > tr > th.rm-table__sort::after { top: 5px; bottom: auto; right: 0.5em; }

/* a selected row (none of our tables selects rows today; the colours are ready): the accent with white text */
table.rm-table > tbody > tr.selected > * {
	box-shadow: inset 0 0 0 9999px rgba(var(--rm-table-selected), 0.9);
	color: var(--rm-table-selected-text);
}