/**
 * Port Tables — frontend
 *
 * Every colour and typeface resolves from custom properties written inline by
 * PHP, so the Branding settings screen controls the whole surface.
 */

.ptbl {
	--ptbl-radius: 10px;
	--ptbl-gap: clamp(1.5rem, 4vw, 2.25rem);

	font-family: var(--ptbl-font-body, system-ui, sans-serif);
	color: var(--ptbl-ink, #0d1b4f);
	margin-block: clamp(2rem, 6vw, 4rem);
	container-type: inline-size;
}

/* ---------- Section header ---------- */

.ptbl__intro {
	margin-bottom: var(--ptbl-gap);
	max-width: 46rem;
}

.ptbl__eyebrow {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.4em 0.85em;
	border-radius: 5px;
	background: var(--ptbl-accent, #00adbb);
	color: #fff;
	font-family: var(--ptbl-font-display, inherit);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ptbl__heading {
	margin: 0 0 0.75rem;
	font-family: var(--ptbl-font-display, inherit);
	font-size: clamp(1.75rem, 3.4vw, 2.35rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ptbl-ink, #0d1b4f);
	text-wrap: balance;
}

.ptbl__lede {
	max-width: 34rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
}

.ptbl__lede p { margin: 0 0 0.5em; }
.ptbl__lede p:last-child { margin-bottom: 0; }

/* ---------- Table ---------- */

.ptbl__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--ptbl-radius);
}

.ptbl__scroll:focus-visible {
	outline: 3px solid var(--ptbl-accent, #00adbb);
	outline-offset: 3px;
}

.ptbl__table {
	width: 100%;
	min-width: 46rem;
	border-collapse: collapse;
	background: var(--ptbl-paper, #fff);
	table-layout: auto;
}

.ptbl__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ptbl__table thead tr {
	background: var(--ptbl-accent, #00adbb);
}

.ptbl__th {
	padding: 1.15rem 1.15rem;
	font-family: var(--ptbl-font-display, inherit);
	font-size: var(--ptbl-th-size, 18px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: #fff;
	text-align: left;
	vertical-align: middle;
}

/* Header labels stay left even when the column's data is centred or right
   aligned — a right-aligned money column still wants a left-aligned label. */
.ptbl__th,
.ptbl__th.ptbl--align-center,
.ptbl__th.ptbl--align-right { text-align: left; }

.ptbl__th .ptbl__sort { justify-content: flex-start; }

.ptbl__th:first-child { border-start-start-radius: var(--ptbl-radius); padding-inline-start: 1.5rem; }
.ptbl__th:last-child { border-start-end-radius: var(--ptbl-radius); padding-inline-end: 1.5rem; }

.ptbl__td {
	padding: 1.35rem 1.15rem;
	font-size: var(--ptbl-td-size, 15px);
	font-weight: 600;
	line-height: 1.45;
	color: var(--ptbl-ink, #0d1b4f);
	border-bottom: 1px solid var(--ptbl-rule, #d5d8e0);
	vertical-align: top;
}

.ptbl__row:first-child .ptbl__td { padding-top: 1.5rem; }
.ptbl__td:first-child { padding-inline-start: 1.5rem; }
.ptbl__td:last-child { padding-inline-end: 1.5rem; }

.ptbl--align-center { text-align: center; }
.ptbl--align-right { text-align: right; }

/* ---------- Sortable headers ---------- */

.ptbl__sort {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

.ptbl__sort:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
	border-radius: 3px;
}

.ptbl__sort-icon {
	flex: 0 0 auto;
	line-height: 0;
	opacity: 0.55;
}

.ptbl__sort:hover .ptbl__sort-icon { opacity: 0.9; }

/* Dim the arrow the current direction is not pointing at. */
.ptbl__th[aria-sort="ascending"] .ptbl__sort-icon,
.ptbl__th[aria-sort="descending"] .ptbl__sort-icon { opacity: 1; }

.ptbl__th[aria-sort="ascending"] .ptbl__sort-down,
.ptbl__th[aria-sort="descending"] .ptbl__sort-up { opacity: 0.3; }

/* Detail mode hides columns rather than scrolling, so drop the floor width. */
.ptbl--detail .ptbl__table { min-width: 0; }

/* Rows are clickable at every width now, not only where a column is hidden. */
.ptbl__row.is-expandable { cursor: pointer; }

.ptbl-modal-open { overflow: hidden; }

/* ---------- Responsive column visibility ---------- */

@media (max-width: 639px) {
	.ptbl__table .ptbl--hide-mobile { display: none; }
}

@media (min-width: 640px) and (max-width: 1023px) {
	.ptbl__table .ptbl--hide-tablet { display: none; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
	.ptbl__table .ptbl--hide-laptop { display: none; }
}

@media (min-width: 1440px) {
	.ptbl__table .ptbl--hide-desktop { display: none; }
}

/* ---------- Row details ---------- */

.ptbl__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * No visible indicator: the whole row is the control. The button stays in the
 * DOM but sits off-screen, because it is the only way a keyboard or screen
 * reader user can reach the popup — a click handler on a <tr> is not focusable.
 * It surfaces on keyboard focus so tabbing through the table is not invisible.
 */
.ptbl__more {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ptbl__more:focus-visible {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	display: inline-block;
	margin-inline-end: 0.5rem;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--ptbl-accent, #00adbb);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	outline: 3px solid var(--ptbl-ink, #0d1b4f);
	outline-offset: 2px;
}

.ptbl__more-icon { display: none; }

.ptbl__more:focus-visible .ptbl__sr {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

.ptbl__row.is-expandable { cursor: pointer; }
.ptbl__row.is-expandable:hover .ptbl__td { background: rgba(0, 0, 0, 0.022); }

/* ---------- Details modal ---------- */

.ptbl__modal[hidden] { display: none; }

.ptbl__modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

.ptbl__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 10, 30, 0.55);
}

.ptbl__modal-box {
	position: relative;
	width: min(34rem, 100%);
	max-height: min(80vh, 44rem);
	display: flex;
	flex-direction: column;
	background: var(--ptbl-paper, #fff);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(4, 10, 30, 0.3);
	overflow: hidden;
	animation: ptbl-modal-in 0.16s ease-out;
}

@keyframes ptbl-modal-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.ptbl__modal-head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	background: var(--ptbl-accent, #00adbb);
	color: #fff;
}

.ptbl__modal-title {
	flex: 1;
	margin: 0;
	font-family: var(--ptbl-font-display, inherit);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.ptbl__modal-close {
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.ptbl__modal-close:hover { background: rgba(255, 255, 255, 0.32); }

.ptbl__modal-close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.ptbl__modal-body {
	margin: 0;
	padding: 0.5rem 1.35rem 1.35rem;
	overflow-y: auto;
}

.ptbl__modal-body dt {
	margin-top: 1rem;
	font-family: var(--ptbl-font-display, inherit);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ptbl-accent, #00adbb);
}

.ptbl__modal-body dd {
	margin: 0.2rem 0 0;
	font-size: var(--ptbl-td-size, 15px);
	font-weight: 600;
	line-height: 1.45;
	color: var(--ptbl-ink, #0d1b4f);
}

.ptbl__modal-body dd:empty::after {
	content: "\2014";
	opacity: 0.4;
}

/* ---------- Cell variants ---------- */

.ptbl__td a,
.ptbl__link,
.ptbl__modal-body a {
	color: var(--ptbl-ink, #0d1b4f);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}

.ptbl__td a:hover,
.ptbl__link:hover,
.ptbl__modal-body a:hover,
.ptbl__td a:focus-visible,
.ptbl__link:focus-visible,
.ptbl__modal-body a:focus-visible {
	color: var(--ptbl-accent, #00adbb);
}

.ptbl__link-arrow {
	display: inline;
	margin-inline-start: 0.3em;
	color: var(--ptbl-accent, #00adbb);
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Sized on the SVG itself, in em, and scoped through .ptbl so the selector
 * outweighs the `svg { width: 100%; height: auto }` resets that page builders
 * (Elementor among them) apply to every SVG on the page. Those rules match at
 * the same specificity as a bare `.ptbl__link-arrow svg` and land later in the
 * cascade, which collapsed this icon to zero height.
 */
.ptbl .ptbl__link-arrow > svg {
	width: 0.78em;
	height: 0.78em;
	max-width: none;
	display: inline-block;
	/* Sits the icon on the x-height rather than the baseline, so it reads as
	   level with the words instead of floating above them. */
	vertical-align: -0.1em;
	overflow: visible;
}


.ptbl__badge {
	display: inline-block;
	padding: 0.3em 0.75em;
	border-radius: 999px;
	background: var(--ptbl-accent, #00adbb);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------- Filter bar ---------- */

.ptbl__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.85rem 1.1rem;
	margin-bottom: 1.15rem;
}

.ptbl__filter {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.ptbl__filter label {
	font-family: var(--ptbl-font-display, inherit);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ptbl-accent, #00adbb);
}

.ptbl__filter select,
.ptbl__filter input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.62em 2.2em 0.62em 0.85em;
	border: 2px solid var(--ptbl-rule, #d5d8e0);
	border-radius: 8px;
	background-color: var(--ptbl-paper, #fff);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ptbl-ink, #0d1b4f);
	min-width: 11rem;
	max-width: 100%;
}

.ptbl__filter select {
	background-image: linear-gradient( 45deg, transparent 50%, currentColor 50% ), linear-gradient( 135deg, currentColor 50%, transparent 50% );
	background-position: calc( 100% - 1.1em ) 55%, calc( 100% - 0.75em ) 55%;
	background-size: 0.35em 0.35em, 0.35em 0.35em;
	background-repeat: no-repeat;
	cursor: pointer;
}

.ptbl__filter input[type="search"] {
	padding-right: 0.85em;
	min-width: 14rem;
}

.ptbl__filter select:focus-visible,
.ptbl__filter input[type="search"]:focus-visible {
	outline: 3px solid var(--ptbl-accent, #00adbb);
	outline-offset: 2px;
	border-color: var(--ptbl-accent, #00adbb);
}

.ptbl__clear {
	padding: 0.62em 1.1em;
	border: 2px solid var(--ptbl-rule, #d5d8e0);
	border-radius: 8px;
	background: transparent;
	font-family: var(--ptbl-font-display, inherit);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ptbl-ink, #0d1b4f);
	cursor: pointer;
}

.ptbl__clear:hover,
.ptbl__clear:focus-visible {
	border-color: var(--ptbl-ink, #0d1b4f);
	background: var(--ptbl-ink, #0d1b4f);
	color: #fff;
}

.ptbl__clear[hidden] { display: none; }

.ptbl__count {
	margin: 0 0 0 auto;
	align-self: center;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ptbl-ink, #0d1b4f);
	opacity: 0.7;
}

.ptbl__empty[hidden] { display: none; }

.ptbl__empty .ptbl__td {
	text-align: center;
	font-weight: 600;
	opacity: 0.7;
	padding-block: 2.25rem;
}

.ptbl__row[hidden] { display: none; }

/* ---------- Pagination ---------- */

.ptbl__pager[hidden] { display: none; }

.ptbl__pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin-top: 1.35rem;
}

.ptbl__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.ptbl__page {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	min-width: 2.4rem;
	padding: 0.55em 0.8em;
	border: 2px solid var(--ptbl-rule, #d5d8e0);
	border-radius: 8px;
	background: transparent;
	font-family: var(--ptbl-font-display, inherit);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ptbl-ink, #0d1b4f);
	cursor: pointer;
	justify-content: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ptbl__page:hover:not(:disabled):not(.is-current) {
	border-color: var(--ptbl-accent, #00adbb);
	color: var(--ptbl-accent, #00adbb);
}

.ptbl__page.is-current {
	background: var(--ptbl-accent, #00adbb);
	border-color: var(--ptbl-accent, #00adbb);
	color: #fff;
	cursor: default;
}

.ptbl__page:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ptbl__page:focus-visible {
	outline: 3px solid var(--ptbl-accent, #00adbb);
	outline-offset: 2px;
}

.ptbl__gap {
	padding: 0 0.15rem;
	color: var(--ptbl-ink, #0d1b4f);
	opacity: 0.5;
}

.ptbl__filter--perpage select { min-width: 5.5rem; }

@media (max-width: 782px) {
	.ptbl__page--step span:not([aria-hidden]) { display: none; }
	.ptbl__page { min-width: 2.6rem; padding: 0.55em 0.6em; }
}

/* ---------- Note under the table ---------- */

.ptbl__note {
	margin-top: 1.15rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ptbl-ink, #0d1b4f);
	max-width: 60rem;
}

.ptbl__note p { margin: 0 0 0.4em; }
.ptbl__note p:last-child { margin-bottom: 0; }

/* ---------- Actions ---------- */

.ptbl__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	justify-content: center;
	align-items: center;
	margin-top: 2.25rem;
}

.ptbl__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 1.15em 2.4em;
	border-radius: 999px;
	border: 2px solid transparent;
	font-family: var(--ptbl-font-display, inherit);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.ptbl__btn--primary {
	background: var(--ptbl-cta, #ffa500);
	color: var(--ptbl-cta-text, #fff);
}

.ptbl__btn--primary:hover,
.ptbl__btn--primary:focus-visible {
	background: var(--ptbl-ink, #0d1b4f);
	color: #fff;
	transform: translateY(-1px);
}

.ptbl .ptbl__btn-icon > svg {
	width: 1.05em;
	height: 1.05em;
	max-width: none;
	display: block;
}

.ptbl__btn:focus-visible {
	outline: 3px solid var(--ptbl-accent, #00adbb);
	outline-offset: 3px;
}

.ptbl__btn-icon {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 0.15em;
}

.ptbl__btn.is-working {
	opacity: 0.65;
	pointer-events: none;
}

/* ---------- Stacked card layout on narrow screens ---------- */

@media (max-width: 782px) {
	.ptbl__actions { flex-direction: column; align-items: stretch; }
	.ptbl__btn { justify-content: center; }

	.ptbl__filters { flex-direction: column; align-items: stretch; }
	.ptbl__filter select,
	.ptbl__filter input[type="search"] { min-width: 0; width: 100%; }
	.ptbl__count { margin: 0; align-self: flex-start; }

	.ptbl__th { padding: 0.9rem 0.75rem; }
	.ptbl__td { padding: 1rem 0.75rem; }
	.ptbl__th:first-child,
	.ptbl__td:first-child { padding-inline-start: 1rem; }
	.ptbl__th:last-child,
	.ptbl__td:last-child { padding-inline-end: 1rem; }
}

/* ---------- Editor notice ---------- */

.ptbl-notice {
	padding: 0.85rem 1.1rem;
	border-inline-start: 4px solid #d63638;
	background: #fcf0f1;
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
	.ptbl__btn,
	.ptbl__more { transition: none; }
	.ptbl__btn:hover { transform: none; }
	.ptbl__modal-box { animation: none; }
}

@media print {
	.ptbl__actions,
	.ptbl__filters,
	.ptbl__pager,
	.ptbl__more,
	.ptbl__modal { display: none !important; }

	.ptbl__table .ptbl--hide-mobile,
	.ptbl__table .ptbl--hide-tablet,
	.ptbl__table .ptbl--hide-laptop,
	.ptbl__table .ptbl--hide-desktop { display: table-cell; }
	.ptbl__scroll { overflow: visible; }
	.ptbl__table { min-width: 0; }
}