/* Jazi Site Suite — Table
 *
 * Every colour a skin (design template) touches is a CSS custom property, and the
 * widget's own style controls write those same properties on {{WRAPPER}} .jss-tbl-wrap.
 * That way an untouched control contributes nothing and the skin's look survives,
 * while any control the user does set wins on specificity — no !important anywhere.
 */

.jss-tbl-wrap {
	--jss-tbl-bg: #ffffff;
	--jss-tbl-radius: 10px;
	--jss-tbl-shadow: none;
	--jss-tbl-border-color: #e6e3ee;
	--jss-tbl-border-width: 1px;
	--jss-tbl-divider-x: #ece9f4;   /* row separators   */
	--jss-tbl-divider-y: transparent; /* column separators */

	--jss-tbl-head-bg: #f7f6fb;
	--jss-tbl-head-color: #14121a;
	--jss-tbl-head-weight: 600;
	--jss-tbl-head-transform: none;
	--jss-tbl-head-spacing: normal;
	--jss-tbl-head-border: #e6e3ee;

	--jss-tbl-cell-color: #55505f;
	--jss-tbl-cell-pad-y: 14px;
	--jss-tbl-cell-pad-x: 18px;

	--jss-tbl-row-bg: transparent;
	--jss-tbl-row-alt-bg: transparent;
	--jss-tbl-row-hover-bg: #faf9fe;
	--jss-tbl-row-hover-color: inherit;
	--jss-tbl-row-hl-bg: #f4efff;
	--jss-tbl-row-hl-color: inherit;

	--jss-tbl-firstcol-bg: transparent;
	--jss-tbl-firstcol-color: #14121a;
	--jss-tbl-firstcol-weight: 600;

	--jss-tbl-foot-bg: #f7f6fb;
	--jss-tbl-foot-color: #14121a;

	--jss-tbl-accent: #6129d4;
	--jss-tbl-link: #6129d4;
	--jss-tbl-check: #16a34a;
	--jss-tbl-cross: #d4483b;
	--jss-tbl-dash: #a9a4b5;
	--jss-tbl-badge-bg: #f0eaff;
	--jss-tbl-badge-color: #6129d4;
	--jss-tbl-badge-radius: 999px;

	--jss-tbl-tool-bg: #ffffff;
	--jss-tbl-tool-color: #14121a;
	--jss-tbl-tool-border: #ddd9e8;
	--jss-tbl-muted: #8a8598;

	--jss-tbl-btn-bg: #ffffff;
	--jss-tbl-btn-color: #55505f;
	--jss-tbl-btn-border: #e2e4e7;
	--jss-tbl-btn-active-bg: #6129d4;
	--jss-tbl-btn-active-color: #ffffff;

	width: 100%;
	box-sizing: border-box;
}

.jss-tbl-wrap *,
.jss-tbl-wrap *::before,
.jss-tbl-wrap *::after { box-sizing: border-box; }

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

.jss-tbl-scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--jss-tbl-bg);
	border: var(--jss-tbl-border-width) solid var(--jss-tbl-border-color);
	border-radius: var(--jss-tbl-radius);
	box-shadow: var(--jss-tbl-shadow);
}

.jss-tbl {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	color: var(--jss-tbl-cell-color);
	background: transparent;
	margin: 0;
}
.jss-tbl--fixed { table-layout: fixed; }

.jss-tbl caption {
	caption-side: top;
	text-align: left;
	color: var(--jss-tbl-muted);
	padding: 0 0 10px;
}
.jss-tbl--caption-bottom caption { caption-side: bottom; padding: 10px 0 0; }

.jss-tbl th,
.jss-tbl td {
	padding: var(--jss-tbl-cell-pad-y) var(--jss-tbl-cell-pad-x);
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--jss-tbl-divider-x);
	border-right: 1px solid var(--jss-tbl-divider-y);
	word-break: break-word;
}
.jss-tbl th:last-child,
.jss-tbl td:last-child { border-right: 0; }
.jss-tbl tbody tr:last-child > * { border-bottom: 0; }

.jss-tbl thead th {
	background: var(--jss-tbl-head-bg);
	color: var(--jss-tbl-head-color);
	font-weight: var(--jss-tbl-head-weight);
	text-transform: var(--jss-tbl-head-transform);
	letter-spacing: var(--jss-tbl-head-spacing);
	border-bottom: 1px solid var(--jss-tbl-head-border);
	white-space: nowrap;
}

.jss-tbl tbody tr { background: var(--jss-tbl-row-bg); }
.jss-tbl tbody tr.jss-tbl-alt { background: var(--jss-tbl-row-alt-bg); }
.jss-tbl tbody tr:hover {
	background: var(--jss-tbl-row-hover-bg);
	color: var(--jss-tbl-row-hover-color);
}
.jss-tbl tbody tr.is-highlight {
	background: var(--jss-tbl-row-hl-bg);
	color: var(--jss-tbl-row-hl-color);
}

.jss-tbl--firstcol tbody tr > *:first-child {
	background: var(--jss-tbl-firstcol-bg);
	color: var(--jss-tbl-firstcol-color);
	font-weight: var(--jss-tbl-firstcol-weight);
}

.jss-tbl tfoot th,
.jss-tbl tfoot td {
	background: var(--jss-tbl-foot-bg);
	color: var(--jss-tbl-foot-color);
	font-weight: 600;
	border-bottom: 0;
	border-top: 1px solid var(--jss-tbl-head-border);
}

.jss-tbl a { color: var(--jss-tbl-link); }

.jss-tbl .ta-left   { text-align: left; }
.jss-tbl .ta-center { text-align: center; }
.jss-tbl .ta-right  { text-align: right; }

/* Sticky header — the scroll box is the scroller, so top:0 is its own top edge. */
.jss-tbl--sticky thead th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;
}

/* ------------------------------------------------------- Header sorting */

.jss-tbl-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: inherit;
	cursor: pointer;
}
.ta-center > .jss-tbl-sort { justify-content: center; }
.ta-right  > .jss-tbl-sort { justify-content: flex-end; }
.jss-tbl-sort:focus-visible { outline: 2px solid var(--jss-tbl-accent); outline-offset: 2px; }

.jss-tbl-sorticon {
	flex: 0 0 auto;
	display: inline-flex;
	line-height: 0;
	opacity: .4;
	transition: opacity .15s ease;
}
.jss-tbl-sorticon svg { width: 1em; height: 1em; fill: currentColor; }
.jss-tbl-si--asc, .jss-tbl-si--desc { display: none; }
th[aria-sort="ascending"]  .jss-tbl-sorticon,
th[aria-sort="descending"] .jss-tbl-sorticon { opacity: 1; color: var(--jss-tbl-accent); }
th[aria-sort="ascending"]  .jss-tbl-si--none,
th[aria-sort="descending"] .jss-tbl-si--none { display: none; }
th[aria-sort="ascending"]  .jss-tbl-si--asc  { display: inline-flex; }
th[aria-sort="descending"] .jss-tbl-si--desc { display: inline-flex; }

.jss-tbl-hcell { display: inline-flex; align-items: center; gap: 8px; }
.jss-tbl-hicon { display: inline-flex; line-height: 0; }
.jss-tbl-hicon svg { width: 1em; height: 1em; fill: currentColor; }

/* ------------------------------------------------ Cell tokens & badges */

/* Own visually-hidden helper rather than Elementor's, so the "Yes"/"No" that sits
   behind a tick or cross for screen readers can never show up as stray text on a
   page where Elementor's frontend stylesheet is missing or deferred. */
.jss-tbl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.jss-tbl-check { color: var(--jss-tbl-check); font-weight: 700; }
.jss-tbl-cross { color: var(--jss-tbl-cross); font-weight: 700; }
.jss-tbl-dash  { color: var(--jss-tbl-dash); }
.jss-tbl-badge {
	display: inline-block;
	padding: 3px 10px;
	font-size: .82em;
	line-height: 1.6;
	background: var(--jss-tbl-badge-bg);
	color: var(--jss-tbl-badge-color);
	border-radius: var(--jss-tbl-badge-radius);
}
.jss-tbl-cimg { max-width: 100%; height: auto; vertical-align: middle; }
.jss-tbl-cicon { display: inline-flex; line-height: 0; margin-right: 8px; vertical-align: middle; }
.jss-tbl-cicon svg { width: 1em; height: 1em; fill: currentColor; }

/* ------------------------------------------------------------- Toolbar */

.jss-tbl-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.jss-tbl-tools--below { margin: 14px 0 0; }
.jss-tbl-tools.al-center { justify-content: center; }
.jss-tbl-tools.al-right  { justify-content: flex-end; }
.jss-tbl-tools.al-between { justify-content: space-between; }

.jss-tbl-search { position: relative; display: inline-flex; align-items: center; width: 280px; max-width: 100%; }
.jss-tbl-search input[type="search"],
.jss-tbl-search input[type="text"] {
	width: 100%;
	padding: 10px 14px 10px 38px;
	background: var(--jss-tbl-tool-bg);
	color: var(--jss-tbl-tool-color);
	border: 1px solid var(--jss-tbl-tool-border);
	border-radius: 8px;
	font: inherit;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}
.jss-tbl-search input:focus {
	outline: none;
	border-color: var(--jss-tbl-accent);
	box-shadow: 0 0 0 3px rgba(97, 41, 212, .12);
}
.jss-tbl-search input::placeholder { color: var(--jss-tbl-muted); opacity: 1; }
.jss-tbl-sicon {
	position: absolute;
	left: 13px;
	display: inline-flex;
	line-height: 0;
	color: var(--jss-tbl-muted);
	pointer-events: none;
}
.jss-tbl-sicon svg { width: 1em; height: 1em; fill: currentColor; }
.jss-tbl-search--noicon input { padding-left: 14px; }

.jss-tbl-perpage {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--jss-tbl-muted);
}
.jss-tbl-perpage select {
	padding: 8px 10px;
	background: var(--jss-tbl-tool-bg);
	color: var(--jss-tbl-tool-color);
	border: 1px solid var(--jss-tbl-tool-border);
	border-radius: 8px;
	font: inherit;
}

/* --------------------------------------------------- Footer / pagination */

.jss-tbl-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.jss-tbl-foot.al-center { justify-content: center; }
.jss-tbl-foot.al-left   { justify-content: flex-start; }
.jss-tbl-foot.al-right  { justify-content: flex-end; }
.jss-tbl-foot:empty { display: none; }

.jss-tbl-info { color: var(--jss-tbl-muted); font-size: .92em; }

.jss-tbl-pager { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jss-tbl-pager button,
.jss-tbl-more {
	cursor: pointer;
	min-width: 36px;
	padding: 8px 12px;
	border: 1px solid var(--jss-tbl-btn-border);
	background: var(--jss-tbl-btn-bg);
	color: var(--jss-tbl-btn-color);
	border-radius: 8px;
	font: inherit;
	line-height: 1.2;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.jss-tbl-pager button:hover:not([disabled]),
.jss-tbl-more:hover:not([disabled]),
.jss-tbl-pager button.active {
	background: var(--jss-tbl-btn-active-bg);
	color: var(--jss-tbl-btn-active-color);
	border-color: var(--jss-tbl-btn-active-bg);
}
.jss-tbl-pager button[disabled],
.jss-tbl-more[disabled] { opacity: .5; cursor: default; }
.jss-tbl-gap { padding: 0 4px; color: var(--jss-tbl-muted); }

.jss-tbl-empty {
	padding: 26px 18px;
	text-align: center;
	color: var(--jss-tbl-muted);
	border: var(--jss-tbl-border-width) solid var(--jss-tbl-border-color);
	border-top: 0;
	background: var(--jss-tbl-bg);
	border-radius: 0 0 var(--jss-tbl-radius) var(--jss-tbl-radius);
}
[hidden] { display: none !important; }

/* ---------------------------------------------------------- Responsive */

.jss-tbl-nowrap th, .jss-tbl-nowrap td { white-space: nowrap; }

@media (max-width: 767px) {
	.jss-tbl-hide-m { display: none; }
}
@media (max-width: 1024px) {
	.jss-tbl-hide-t { display: none; }
}

/* Stacked cards. Each cell prints its column name from data-label. */
@media (max-width: 767px) {
	.jss-tbl-stack-mobile .jss-tbl-scroll { border: 0; background: none; border-radius: 0; box-shadow: none; }
	.jss-tbl-stack-mobile .jss-tbl thead {
		position: absolute; width: 1px; height: 1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}
	.jss-tbl-stack-mobile .jss-tbl,
	.jss-tbl-stack-mobile .jss-tbl tbody,
	.jss-tbl-stack-mobile .jss-tbl tfoot,
	.jss-tbl-stack-mobile .jss-tbl tr,
	.jss-tbl-stack-mobile .jss-tbl td,
	.jss-tbl-stack-mobile .jss-tbl tbody th { display: block; width: 100%; }
	.jss-tbl-stack-mobile .jss-tbl tbody tr,
	.jss-tbl-stack-mobile .jss-tbl tfoot tr {
		margin-bottom: 12px;
		background: var(--jss-tbl-bg);
		border: var(--jss-tbl-border-width) solid var(--jss-tbl-border-color);
		border-radius: var(--jss-tbl-radius);
		overflow: hidden;
	}
	.jss-tbl-stack-mobile .jss-tbl td,
	.jss-tbl-stack-mobile .jss-tbl tbody th {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		text-align: right;
		border-right: 0;
	}
	.jss-tbl-stack-mobile .jss-tbl td[data-label]::before,
	.jss-tbl-stack-mobile .jss-tbl tbody th[data-label]::before {
		content: attr(data-label);
		flex: 0 0 auto;
		text-align: left;
		font-weight: 600;
		color: var(--jss-tbl-stack-label, var(--jss-tbl-head-color));
	}
	.jss-tbl-stack-mobile .jss-tbl--firstcol tbody tr > *:first-child { background: var(--jss-tbl-head-bg); }
}
@media (max-width: 1024px) {
	.jss-tbl-stack-tablet .jss-tbl-scroll { border: 0; background: none; border-radius: 0; box-shadow: none; }
	.jss-tbl-stack-tablet .jss-tbl thead {
		position: absolute; width: 1px; height: 1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}
	.jss-tbl-stack-tablet .jss-tbl,
	.jss-tbl-stack-tablet .jss-tbl tbody,
	.jss-tbl-stack-tablet .jss-tbl tfoot,
	.jss-tbl-stack-tablet .jss-tbl tr,
	.jss-tbl-stack-tablet .jss-tbl td,
	.jss-tbl-stack-tablet .jss-tbl tbody th { display: block; width: 100%; }
	.jss-tbl-stack-tablet .jss-tbl tbody tr,
	.jss-tbl-stack-tablet .jss-tbl tfoot tr {
		margin-bottom: 12px;
		background: var(--jss-tbl-bg);
		border: var(--jss-tbl-border-width) solid var(--jss-tbl-border-color);
		border-radius: var(--jss-tbl-radius);
		overflow: hidden;
	}
	.jss-tbl-stack-tablet .jss-tbl td,
	.jss-tbl-stack-tablet .jss-tbl tbody th {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		text-align: right;
		border-right: 0;
	}
	.jss-tbl-stack-tablet .jss-tbl td[data-label]::before,
	.jss-tbl-stack-tablet .jss-tbl tbody th[data-label]::before {
		content: attr(data-label);
		flex: 0 0 auto;
		text-align: left;
		font-weight: 600;
		color: var(--jss-tbl-stack-label, var(--jss-tbl-head-color));
	}
}

/* ------------------------------------------------------------- Skins */

/* Minimal — hairline rules only, no chrome. */
.jss-tbl-skin--minimal {
	--jss-tbl-radius: 0;
	--jss-tbl-border-color: transparent;
	--jss-tbl-border-width: 0;
	--jss-tbl-head-bg: transparent;
	--jss-tbl-head-border: #14121a;
	--jss-tbl-divider-x: #eceaf2;
	--jss-tbl-cell-pad-x: 12px;
	--jss-tbl-row-hover-bg: #fafafa;
}

/* Bordered — a full grid. */
.jss-tbl-skin--bordered {
	--jss-tbl-radius: 6px;
	--jss-tbl-border-color: #d9d5e4;
	--jss-tbl-divider-x: #e6e3ee;
	--jss-tbl-divider-y: #e6e3ee;
	--jss-tbl-head-bg: #f2f0f7;
}

/* Striped — zebra rows, quiet head. */
.jss-tbl-skin--striped {
	--jss-tbl-head-bg: #ffffff;
	--jss-tbl-head-border: #d9d5e4;
	--jss-tbl-row-alt-bg: #f8f7fc;
	--jss-tbl-divider-x: transparent;
	--jss-tbl-row-hover-bg: #f0ecfb;
}

/* Dark. */
.jss-tbl-skin--dark {
	--jss-tbl-bg: #17151f;
	--jss-tbl-border-color: #2c2839;
	--jss-tbl-divider-x: #26222f;
	--jss-tbl-divider-y: transparent;
	--jss-tbl-head-bg: #1f1c2a;
	--jss-tbl-head-color: #ffffff;
	--jss-tbl-head-border: #322d42;
	--jss-tbl-cell-color: #c9c4d6;
	--jss-tbl-firstcol-color: #ffffff;
	--jss-tbl-row-hover-bg: #221e2d;
	--jss-tbl-row-hl-bg: #2a2140;
	--jss-tbl-row-hl-color: #ffffff;
	--jss-tbl-foot-bg: #1f1c2a;
	--jss-tbl-foot-color: #ffffff;
	--jss-tbl-accent: #a78bfa;
	--jss-tbl-link: #c4b5fd;
	--jss-tbl-badge-bg: #2f2745;
	--jss-tbl-badge-color: #c4b5fd;
	--jss-tbl-tool-bg: #1f1c2a;
	--jss-tbl-tool-color: #ffffff;
	--jss-tbl-tool-border: #322d42;
	--jss-tbl-muted: #8f88a3;
	--jss-tbl-btn-bg: #1f1c2a;
	--jss-tbl-btn-color: #c9c4d6;
	--jss-tbl-btn-border: #322d42;
	--jss-tbl-btn-active-bg: #7c3aed;
}

/* Soft — rounded, shadowed, roomy. */
.jss-tbl-skin--soft {
	--jss-tbl-radius: 16px;
	--jss-tbl-border-color: transparent;
	--jss-tbl-border-width: 0;
	--jss-tbl-shadow: 0 10px 30px rgba(20, 18, 26, .08);
	--jss-tbl-head-bg: #ffffff;
	--jss-tbl-head-border: #efedf5;
	--jss-tbl-divider-x: #f3f1f8;
	--jss-tbl-cell-pad-y: 18px;
	--jss-tbl-cell-pad-x: 22px;
	--jss-tbl-row-hover-bg: #faf8ff;
}

/* Modern — accent header. */
.jss-tbl-skin--modern {
	--jss-tbl-radius: 12px;
	--jss-tbl-border-color: #e6e3ee;
	--jss-tbl-head-bg: #6129d4;
	--jss-tbl-head-color: #ffffff;
	--jss-tbl-head-border: #6129d4;
	--jss-tbl-head-transform: uppercase;
	--jss-tbl-head-spacing: .04em;
	--jss-tbl-divider-x: #eeebf6;
	--jss-tbl-row-hover-bg: #f7f4ff;
	--jss-tbl-foot-bg: #f7f4ff;
}

/* Compact — dense data. */
.jss-tbl-skin--compact {
	--jss-tbl-cell-pad-y: 8px;
	--jss-tbl-cell-pad-x: 12px;
	--jss-tbl-radius: 6px;
	--jss-tbl-divider-x: #eeebf6;
	--jss-tbl-head-bg: #f4f2fa;
}
.jss-tbl-skin--compact .jss-tbl { font-size: .92em; }

/* Spreadsheet — every line drawn, tight. */
.jss-tbl-skin--spreadsheet {
	--jss-tbl-radius: 4px;
	--jss-tbl-border-color: #c9ccd1;
	--jss-tbl-divider-x: #dcdfe6;
	--jss-tbl-divider-y: #dcdfe6;
	--jss-tbl-head-bg: #eef1f5;
	--jss-tbl-head-border: #c9ccd1;
	--jss-tbl-cell-pad-y: 9px;
	--jss-tbl-cell-pad-x: 12px;
	--jss-tbl-row-alt-bg: #fafbfc;
	--jss-tbl-accent: #1c6fd4;
	--jss-tbl-link: #1c6fd4;
	--jss-tbl-btn-active-bg: #1c6fd4;
}

/* Elegant — editorial, spaced small-caps head. */
.jss-tbl-skin--elegant {
	--jss-tbl-radius: 0;
	--jss-tbl-border-color: transparent;
	--jss-tbl-border-width: 0;
	--jss-tbl-head-bg: transparent;
	--jss-tbl-head-color: #14121a;
	--jss-tbl-head-transform: uppercase;
	--jss-tbl-head-spacing: .14em;
	--jss-tbl-head-border: #14121a;
	--jss-tbl-divider-x: #e7e4ee;
	--jss-tbl-cell-pad-y: 18px;
	--jss-tbl-row-hover-bg: transparent;
	--jss-tbl-accent: #14121a;
	--jss-tbl-link: #14121a;
}
.jss-tbl-skin--elegant .jss-tbl thead th { font-size: .78em; }

/* Ocean — cool tinted rows. */
.jss-tbl-skin--ocean {
	--jss-tbl-radius: 12px;
	--jss-tbl-border-color: #cfe3ef;
	--jss-tbl-head-bg: #0e7490;
	--jss-tbl-head-color: #ffffff;
	--jss-tbl-head-border: #0e7490;
	--jss-tbl-divider-x: #e2f0f6;
	--jss-tbl-row-alt-bg: #f4fbfd;
	--jss-tbl-row-hover-bg: #e6f4f9;
	--jss-tbl-accent: #0e7490;
	--jss-tbl-link: #0e7490;
	--jss-tbl-badge-bg: #dcf1f7;
	--jss-tbl-badge-color: #0e7490;
	--jss-tbl-btn-active-bg: #0e7490;
	--jss-tbl-foot-bg: #eff9fc;
	--jss-tbl-foot-color: #0e7490;
}

@media (prefers-reduced-motion: reduce) {
	.jss-tbl-pager button, .jss-tbl-more, .jss-tbl-sorticon { transition: none; }
}