/*
 * Sheet Sync Tables
 * Appearance settings write CSS custom properties + modifier classes onto .sst-wrap.
 * You can also override any --sst-* property yourself in Custom CSS.
 */

.sst-wrap {
	--sst-border: rgba(127, 127, 127, 0.25);
	--sst-head-bg: rgba(127, 127, 127, 0.08);
	--sst-stripe: rgba(127, 127, 127, 0.05);
	--sst-radius: 8px;
	--sst-pad: 0.6em 0.85em;

	container-type: inline-size; /* Lets the phone layout respond to the table's own width. */
	width: 100%;
	margin: 1.5em 0;
}

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

.sst-toolbar { margin-bottom: 0.75em; }

.sst-search {
	box-sizing: border-box;
	width: 100%;
	max-width: 320px;
	padding: 0.5em 0.75em;
	border: 1px solid var(--sst-border);
	border-radius: min(var(--sst-radius), 8px);
	font: inherit;
	background: transparent;
	color: var(--sst-text, inherit);
}

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

.sst-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--sst-border);
	border-radius: var(--sst-radius);
	background: var(--sst-row-bg, transparent);
}
.sst-scroll:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.sst-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--sst-font-size, 0.95em);
	color: var(--sst-text, inherit);
}

.sst-table th,
.sst-table td {
	padding: var(--sst-pad);
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--sst-border);
	background: transparent;
}

.sst-table thead th {
	background: var(--sst-head-bg);
	color: var(--sst-head-color, inherit);
	font-weight: 600;
	white-space: nowrap;
}

.sst-table tbody tr { background: var(--sst-row-bg, transparent); }
.sst-wrap:not(.sst-no-stripes) .sst-table tbody tr:nth-child(even) { background: var(--sst-stripe); }
.sst-wrap.sst-hover .sst-table tbody tr:hover { background: var(--sst-hover); }
.sst-table tbody tr:last-child td { border-bottom: 0; }
.sst-table tr[hidden] { display: none; }

.sst-link-color .sst-table a { color: var(--sst-link); }

/* ---------- Sort buttons ---------- */

/*
 * Header sort buttons. Themes and page builders (e.g. Elementor's global button
 * style: ".elementor-kit-N button") style every <button>, often with higher
 * specificity than a single class — so this reset is deliberately specific.
 */
.sst-wrap .sst-table th .sst-sort,
.sst-wrap .sst-table th .sst-sort:hover,
.sst-wrap .sst-table th .sst-sort:focus,
.sst-wrap .sst-table th .sst-sort:active {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
	padding: 0;
	min-height: 0;
	width: auto;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: inherit;
	text-transform: inherit;
	text-decoration: none;
	letter-spacing: inherit;
	cursor: pointer;
	transition: none;
}
.sst-wrap .sst-table th .sst-sort:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sst-sort::after { content: "\2195"; opacity: 0.35; font-size: 0.85em; }
th[aria-sort="ascending"] .sst-sort::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"] .sst-sort::after { content: "\2193"; opacity: 1; }

/* ---------- Presets ---------- */

.sst-preset-minimal { --sst-head-bg: transparent; }
.sst-preset-minimal .sst-scroll { border: 0; border-radius: 0; }
.sst-preset-minimal .sst-table thead th { border-bottom: 2px solid var(--sst-border); }

.sst-preset-bordered .sst-scroll { border: 0; }
.sst-preset-bordered .sst-table th,
.sst-preset-bordered .sst-table td,
.sst-preset-bordered .sst-table tbody tr:last-child td { border: 1px solid var(--sst-border); }

.sst-preset-card { --sst-radius: 14px; }
.sst-preset-card .sst-scroll {
	border: 0;
	background: var(--sst-row-bg, #fff);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ---------- Spacing, alignment, text ---------- */

.sst-density-compact { --sst-pad: 0.35em 0.6em; }
.sst-density-comfortable { --sst-pad: 0.9em 1.15em; }

.sst-align-center .sst-table th,
.sst-align-center .sst-table td { text-align: center; }
.sst-align-right .sst-table th,
.sst-align-right .sst-table td { text-align: right; }

.sst-nowrap .sst-table td { white-space: nowrap; }

.sst-upper .sst-table thead th {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85em;
}

/* ---------- Max height + sticky header ---------- */

.sst-has-max .sst-scroll { max-height: var(--sst-max-h); overflow: auto; }

.sst-sticky .sst-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	/* Header color layered over an opaque base so rows don't show through. */
	background: linear-gradient(var(--sst-head-bg), var(--sst-head-bg)), var(--sst-row-bg, var(--sst-sticky-base, #fff));
}

/* ---------- Phones: stacked cards ---------- */

@container (max-width: 640px) {
	.sst-stack .sst-scroll {
		overflow: visible;
		max-height: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	.sst-stack .sst-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.sst-stack .sst-table,
	.sst-stack .sst-table tbody,
	.sst-stack .sst-table tr,
	.sst-stack .sst-table td { display: block; width: 100%; box-sizing: border-box; }

	.sst-stack .sst-table tbody tr,
	.sst-wrap.sst-stack:not(.sst-no-stripes) .sst-table tbody tr:nth-child(even) {
		margin-bottom: 0.75em;
		border: 1px solid var(--sst-border);
		border-radius: var(--sst-radius);
		background: var(--sst-row-bg, transparent);
		overflow: hidden;
	}
	/* Extra specificity so presets (e.g. Bordered) can't leak grid lines into the cards. */
	.sst-wrap.sst-stack .sst-table tbody tr td {
		display: grid;
		grid-template-columns: minmax(6em, 38%) 1fr;
		gap: 0.75em;
		text-align: left;
		white-space: normal;
		border: 0;
		border-bottom: 1px solid var(--sst-border);
	}
	.sst-wrap.sst-stack .sst-table tbody tr td:last-of-type { border-bottom: 0; }
	.sst-wrap.sst-stack .sst-table tbody tr td:empty { display: none; }
	.sst-stack .sst-table td::before {
		content: attr(data-label);
		font-weight: 600;
		/* Body text color — the header color is usually meant for a dark header bar. */
		color: var(--sst-text, inherit);
		opacity: 0.75;
	}
	.sst-wrap.sst-stack .sst-table tbody tr td[data-label=""] { grid-template-columns: 1fr; }
	.sst-stack .sst-table td[data-label=""]::before { display: none; }
}

/* ---------- Messages ---------- */

.sst-empty,
.sst-updated { margin: 0.6em 0 0; font-size: 0.85em; opacity: 0.7; }

.sst-notice {
	padding: 0.75em 1em;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	color: #1d2327;
	font-size: 0.9em;
}

.sst-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}