/**
 * Advanced Table — Common base CSS (loads for every style).
 *
 * Shared mechanics only: wrapper, horizontal scroll, base table reset, header /
 * cell layout, alignment helpers, tick / cross / dash marks, sort affordance,
 * search toolbar, sticky header and the mobile card-stack. Each style file paints
 * the visual skin on top (borders, colours, striping, highlight column, etc).
 *
 * @package captain-widgets-kit
 * @since   1.4.0
 */

.captwiki-table {
	--captwiki-table-accent: #6366f1;
	--captwiki-table-border: #e6e8ee;
	--captwiki-table-header-border: rgba( 255, 255, 255, 0.18 );
	display: block;
	box-sizing: border-box;
	width: 100%;
}

.captwiki-table *,
.captwiki-table *::before,
.captwiki-table *::after {
	box-sizing: border-box;
}

/* ── Horizontal scroll wrapper ─────────────────────────── */
.captwiki-table__scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ── Table base reset ──────────────────────────────────── */
.captwiki-table__table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	font-size: 15px;
	color: #374151;
	background: transparent;
}

.captwiki-table__caption {
	caption-side: top;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	color: #111827;
	padding: 0 0 14px;
}

/* ── Header ────────────────────────────────────────────── */
.captwiki-table__th {
	position: relative;
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
}

.captwiki-table__th-inner {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.captwiki-table__th-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}

.captwiki-table__th-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-table__th-icon i {
	font-size: inherit;
	font-style: normal;
}

/* Heading badge ( e.g. "Most Popular" ) */
.captwiki-table__badge {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
	color: #ffffff;
	background: var( --captwiki-table-accent );
	border-radius: 999px;
}

/* ── Body cells ────────────────────────────────────────── */
.captwiki-table__cell {
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
	vertical-align: middle;
}

.captwiki-table__cell--rowhead {
	font-weight: 600;
	color: #111827;
}

.captwiki-table__cell a {
	color: var( --captwiki-table-accent );
	text-decoration: none;
}

.captwiki-table__cell a:hover {
	text-decoration: underline;
}

/* ── Alignment helpers ─────────────────────────────────── */
.captwiki-table__th--center,
.captwiki-table__cell--center {
	text-align: center;
}

.captwiki-table__th--center .captwiki-table__th-inner {
	justify-content: center;
}

.captwiki-table__th--right,
.captwiki-table__cell--right {
	text-align: right;
}

.captwiki-table__th--right .captwiki-table__th-inner {
	justify-content: flex-end;
}

/* ── Tick / cross / dash marks ─────────────────────────── */
.captwiki-table__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.55em;
	height: 1.55em;
	font-size: 0.95em;
	line-height: 1;
	border-radius: 50%;
}

.captwiki-table__mark--check {
	color: #16a34a;
	background: rgba( 22, 163, 74, 0.12 );
}

.captwiki-table__mark--cross {
	color: #dc2626;
	background: rgba( 220, 38, 38, 0.1 );
}

.captwiki-table__mark--dash {
	color: #9ca3af;
	background: rgba( 156, 163, 175, 0.14 );
}

/* ── Sortable headers ──────────────────────────────────── */
.captwiki-table__th--sortable {
	cursor: pointer;
	user-select: none;
}

.captwiki-table__th--sortable:focus-visible {
	outline: 2px solid var( --captwiki-table-accent );
	outline-offset: -2px;
}

.captwiki-table__sort-arrow {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.35;
	transform: rotate( 45deg );
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.captwiki-table__th.is-sorted-asc .captwiki-table__sort-arrow {
	opacity: 1;
	transform: rotate( -135deg );
}

.captwiki-table__th.is-sorted-desc .captwiki-table__sort-arrow {
	opacity: 1;
	transform: rotate( 45deg );
}

/* ── Striping & hover ( colours set per-style / by controls ) ── */
.captwiki-table--stripe .captwiki-table__tbody .captwiki-table__row:nth-child( even ) {
	background-color: #f8f9fc;
}

.captwiki-table--hover .captwiki-table__tbody .captwiki-table__row {
	transition: background-color 0.18s ease;
}

.captwiki-table--hover .captwiki-table__tbody .captwiki-table__row:hover {
	background-color: #eef0f7;
}

/* ── Sticky header ─────────────────────────────────────── */
.captwiki-table--sticky .captwiki-table__scroll {
	max-height: 520px;
	overflow-y: auto;
}

.captwiki-table--sticky .captwiki-table__thead .captwiki-table__th {
	position: sticky;
	top: 0;
	z-index: 2;
}

/* ── Search toolbar ────────────────────────────────────── */
.captwiki-table__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 14px;
}

.captwiki-table__search-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 100%;
	max-width: 320px;
}

.captwiki-table__search-icon {
	position: absolute;
	left: 12px;
	display: inline-flex;
	color: #9ca3af;
	pointer-events: none;
}

.captwiki-table__search {
	width: 100%;
	padding: 10px 14px 10px 38px;
	font-size: 14px;
	color: #374151;
	background: #ffffff;
	border: 1px solid var( --captwiki-table-border );
	border-radius: 10px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.captwiki-table__search:focus {
	border-color: var( --captwiki-table-accent );
	box-shadow: 0 0 0 3px rgba( 99, 102, 241, 0.15 );
}

.captwiki-table__empty {
	margin: 16px 0 0;
	padding: 18px;
	text-align: center;
	font-size: 14px;
	color: #6b7280;
	background: #f8f9fc;
	border-radius: 10px;
}

.captwiki-table__row[hidden] {
	display: none;
}

/* ── Mobile card stack ─────────────────────────────────── */
@media ( max-width: 767px ) {

	.captwiki-table--stack .captwiki-table__scroll {
		overflow-x: visible;
	}

	.captwiki-table--stack .captwiki-table__table,
	.captwiki-table--stack .captwiki-table__tbody,
	.captwiki-table--stack .captwiki-table__row,
	.captwiki-table--stack .captwiki-table__cell {
		display: block;
		width: 100%;
	}

	.captwiki-table--stack .captwiki-table__thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
		border: 0;
	}

	.captwiki-table--stack .captwiki-table__row {
		margin-bottom: 16px;
		border: 1px solid var( --captwiki-table-border );
		border-radius: 12px;
		overflow: hidden;
	}

	.captwiki-table--stack .captwiki-table__cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		text-align: right;
	}

	.captwiki-table--stack .captwiki-table__cell::before {
		content: attr( data-label );
		flex: 0 0 auto;
		font-size: 13px;
		font-weight: 600;
		text-align: left;
		color: #6b7280;
	}

	.captwiki-table--stack .captwiki-table__cell--rowhead {
		justify-content: center;
		font-size: 16px;
		text-align: center;
	}

	.captwiki-table--stack .captwiki-table__cell--rowhead::before {
		display: none;
	}
}

/* ── Reduced motion ────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {

	.captwiki-table__sort-arrow,
	.captwiki-table--hover .captwiki-table__tbody .captwiki-table__row {
		transition: none;
	}
}