.orkitbp-wrapper {
	margin: 1.5em 0;
	font-size: 15px;
}

.orkitbp-filter-bar {
	margin-bottom: 8px;
}

.orkitbp-filter-input {
	width: 100%;
	max-width: 320px;
	padding: 6px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.orkitbp-scroll-region {
	width: 100%;
}

/* overflow-y: visible is explicit and load-bearing here, not decorative: per
   the CSS spec, setting overflow-x to anything other than visible while
   overflow-y is left at its visible default causes overflow-y to be
   implicitly computed as auto too. That would silently turn this wrapper
   into its own vertical scroll container, which breaks position: sticky
   (Fixed Header, Fixed Footer) against the actual page/viewport — the
   sticky element would stick to this wrapper's own bounds instead, and
   since the wrapper has no height limit and just grows to fit the table,
   sticking never visibly happens at all. The one case where a contained
   vertical scroll is actually wanted (Max table height set) uses an inline
   style further down, which correctly overrides this via specificity. */
.orkitbp-scrollable .orkitbp-scroll-region {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}

/* Fixed left/right columns only make sense with horizontal scrolling
   available, so this applies regardless of the separate Mobile-friendly
   scrolling setting above. */
.orkitbp-has-fixed-left .orkitbp-scroll-region,
.orkitbp-has-fixed-right .orkitbp-scroll-region {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}

table.orkitbp-table {
	border-collapse: collapse;
	width: 100%;
	max-width: 100%;
}

table.orkitbp-table th,
table.orkitbp-table td {
	border: var(--orkitbp-border-width, 1px) solid inherit;
	border-color: inherit;
	padding: 8px 12px;
	text-align: left;
}

table.orkitbp-table {
	border: var(--orkitbp-border-width, 1px) solid;
}

table.orkitbp-table th,
table.orkitbp-table td {
	border-width: var(--orkitbp-border-width, 1px);
	border-style: solid;
}

.orkitbp-table-name {
	margin: 0 0 10px;
}

.orkitbp-file-button {
	display: inline-block;
	padding: 5px 16px;
	background-color: #2271b1;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.4;
}

.orkitbp-file-button:hover,
.orkitbp-file-button:focus,
.orkitbp-file-button:visited {
	color: #fff;
}

/* Alternate-row background/font color is applied via a per-table <style> block
   (see ORKITBP_Render::render()) with !important, so it can take priority over any
   per-cell Fill/Font color — a plain class-based rule here couldn't do that,
   since inline per-cell styles always win over an ordinary stylesheet rule. */

/* Fixed header: sticks to the top of the table's own scroll area (or the
   viewport, if no max height is set and the page scrolls past it). A
   configured Header Offset (for sites with a sticky nav) overrides this
   "top" value with a per-table inline rule — see ORKITBP_Render::render(). */
table.orkitbp-fixed-header thead th {
	position: sticky;
	top: 0;
	z-index: 5;
}

/* Fixed footer: sticks to the bottom of the table's own scroll area. The
   .orkitbp-fixed-footer-row class is applied by fixed-columns.js to
   whichever row is currently last in tbody, since that can change after a
   sort/filter/page action. */
tr.orkitbp-fixed-footer-row td {
	position: sticky;
	bottom: 0;
	z-index: 5;
	background-color: var(--orkitbp-freeze-bg, #fff);
}

/* Fixed left/right columns. left/right pixel offsets and which specific
   cells get orkitbp-fixed-col-left / orkitbp-fixed-col-right are computed
   and applied by fixed-columns.js, since column widths vary and the
   correct offset for the 2nd+ fixed column depends on the actual rendered
   width of the ones before it — not something CSS alone can express. */
td.orkitbp-fixed-col,
th.orkitbp-fixed-col {
	position: sticky;
	z-index: 6;
	background-color: var(--orkitbp-freeze-bg, #fff);
}

.orkitbp-fixed-col-left {
	box-shadow: 3px 0 8px rgba(0, 0, 0, 0.08);
}

.orkitbp-fixed-col-right {
	box-shadow: -3px 0 8px rgba(0, 0, 0, 0.08);
}

/* Fixed header + a fixed left/right column overlapping in the same corner
   cell needs to sit above both. */
table.orkitbp-fixed-header thead th.orkitbp-fixed-col {
	z-index: 7;
}

/* Sortable header cells */
th.orkitbp-sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.orkitbp-sort-arrow {
	display: inline-block;
	margin-left: 6px;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.5;
	vertical-align: middle;
}

th.orkitbp-sort-asc .orkitbp-sort-arrow {
	opacity: 1;
	transform: rotate(180deg);
}

th.orkitbp-sort-desc .orkitbp-sort-arrow {
	opacity: 1;
}

/* Pagination */
.orkitbp-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}

.orkitbp-pagination button {
	padding: 4px 10px;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 4px;
	cursor: pointer;
}

.orkitbp-pagination button.orkitbp-active-page {
	background: #2271b1;
	color: #fff;
	border-color: #2271b1;
}

.orkitbp-pagination button:disabled {
	opacity: 0.4;
	cursor: default;
}

.orkitbp-row-hidden {
	display: none !important;
}

@media (max-width: 600px) {
	.orkitbp-wrapper {
		font-size: 14px;
	}
	table.orkitbp-table th,
	table.orkitbp-table td {
		padding: 6px 8px;
	}
}

/* ================================================================
   Responsive layouts (Scroll / Collapse / Modal /
   Stack / Flip). Only active when a table's "Responsive options"
   setting picks one of these — otherwise none of the
   selectors below match anything.
   ================================================================ */

/* ---- Scroll mode: sticky arrow buttons, shown only while a table
   actually has more to scroll to. ---- */
.orkitbp-wrapper.orkitbp-has-scroll-buttons {
	position: relative;
}

.orkitbp-responsive-scroll .orkitbp-scroll-region {
	overflow-x: auto;
	overflow-y: visible; /* see the load-bearing comment on the base rule near the top of this file */
	-webkit-overflow-scrolling: touch;
}

.orkitbp-scroll-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 8;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: none;
}

.orkitbp-scroll-btn-prev {
	left: 4px;
}

.orkitbp-scroll-btn-next {
	right: 4px;
}

/* ---- Collapse & Modal: hidden columns, the +/- toggle column, and
   the label/value list shown in the detail row or the modal. ---- */
.orkitbp-responsive-collapse .orkitbp-scroll-region,
.orkitbp-responsive-modal .orkitbp-scroll-region {
	overflow-x: auto;
	overflow-y: visible; /* see the load-bearing comment on the base rule near the top of this file */
	-webkit-overflow-scrolling: touch;
}

td.orkitbp-col-hidden,
th.orkitbp-col-hidden {
	display: none !important;
}

.orkitbp-toggle-col {
	width: 32px;
	text-align: center !important;
}

.orkitbp-toggle-btn {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	border: 1px solid #ccc;
	background: #f6f7f7;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
}

tr.orkitbp-detail-row td {
	background: #fafbfc;
}

.orkitbp-detail-list {
	margin: 4px 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
}

.orkitbp-detail-list dt {
	font-weight: 600;
	white-space: nowrap;
}

.orkitbp-detail-list dd {
	margin: 0;
}

.orkitbp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}

.orkitbp-modal-box {
	background: #fff;
	border-radius: 6px;
	padding: 26px 20px 20px;
	max-width: 480px;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.orkitbp-modal-close {
	position: absolute;
	top: 6px;
	right: 8px;
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #555;
	padding: 6px;
}

/* ---- Stack mode: each row becomes a card, each cell labeled from
   its data-label attribute. Activated by JS (orkitbp-stack-active)
   once the viewport crosses the table's configured breakpoint. ---- */
.orkitbp-stack-active table.orkitbp-table,
.orkitbp-stack-active table.orkitbp-table tbody,
.orkitbp-stack-active table.orkitbp-table tr,
.orkitbp-stack-active table.orkitbp-table td {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.orkitbp-stack-active table.orkitbp-table thead {
	display: none;
}

.orkitbp-stack-active table.orkitbp-table tbody tr {
	margin-bottom: 12px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
}

.orkitbp-stack-active table.orkitbp-table td {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	border: none !important;
	border-bottom: 1px solid #eee !important;
}

.orkitbp-stack-active table.orkitbp-table td:last-child {
	border-bottom: none !important;
}

.orkitbp-stack-active table.orkitbp-table td[data-label]::before {
	content: attr(data-label);
	font-weight: 600;
	margin-right: 12px;
	flex-shrink: 0;
}

.orkitbp-stack-active table td.orkitbp-fixed-col,
.orkitbp-stack-active table th.orkitbp-fixed-col,
.orkitbp-stack-active table tr.orkitbp-fixed-footer-row td {
	position: static;
}

/* ---- Flip mode: original table is swapped out for a transposed one
   while flipped, then the (now wide) result scrolls horizontally. ---- */
.orkitbp-is-flipped .orkitbp-scroll-region {
	overflow-x: auto;
	overflow-y: visible; /* see the load-bearing comment on the base rule near the top of this file */
	-webkit-overflow-scrolling: touch;
}

table.orkitbp-flipped-table th {
	text-align: left;
	white-space: nowrap;
}

/* ---- JS-driven sticky header/footer (assets/js/sticky-header.js).
   Positioning (top/bottom/left/width) is set inline by that file, since it
   depends on this specific table's live layout — only visual styling
   belongs here. ---- */
.orkitbp-sticky-clone-wrap {
	z-index: 30;
	background: #fff;
}

.orkitbp-sticky-clone-top {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.orkitbp-sticky-clone-bottom {
	box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.12);
}

.orkitbp-sticky-clone-wrap table {
	border-collapse: collapse;
}