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

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

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

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

.tbp-scrollable .tbp-scroll-region {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

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

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

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

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

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

.tbp-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;
}

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

/* Alternate-row background/font color is applied via a per-table <style> block
   (see TBP_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). */
table.tbp-fixed-header thead th {
	position: sticky;
	top: 0;
	z-index: 5;
}

/* Freeze first column while scrolling horizontally. Needs a solid background
   (not just transparent) or the scrolling columns behind it will show through. */
table.tbp-freeze-col th:first-child,
table.tbp-freeze-col td:first-child {
	position: sticky;
	left: 0;
	z-index: 6;
	background-color: var(--tbp-freeze-bg, #fff);
}

/* The frozen first column's stripe-matching background is now handled in the
   same per-table !important style block as the rest of the alt-row styling
   (see TBP_Render::render()), so it always reflects the real configured color. */

table.tbp-freeze-col.tbp-fixed-header th:first-child {
	z-index: 7;
}

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

.tbp-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.tbp-sort-asc .tbp-sort-arrow {
	opacity: 1;
	transform: rotate(180deg);
}

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

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

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

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

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

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

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