/* APCO Data Table – widget styles. Colours come from CSS variables set by the widget controls. */
.apco-dt {
	--apco-dt-header-bg: #182221;
	--apco-dt-header-color: #F2F2F0;
	--apco-dt-accent: #E89C33;
	--apco-dt-text: #182221;
	--apco-dt-bg: #FFFFFF;
	--apco-dt-stripe: #F5F6F2;
	--apco-dt-hover: #E8F0E6;
	--apco-dt-border: #E3E6E0;
	--apco-dt-align: center;
	color: var(--apco-dt-text);
	font-family: inherit;
}

.apco-dt__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--apco-dt-bg);
	border: 1px solid var(--apco-dt-border);
	border-top: 3px solid var(--apco-dt-accent);
	scrollbar-width: thin;
}
.apco-dt__scroll:focus-visible {
	outline: 2px solid var(--apco-dt-accent);
	outline-offset: 2px;
}

.apco-dt__table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 15px;
	line-height: 1.35;
}

.apco-dt__table th,
.apco-dt__table td {
	padding: 13px 16px;
	text-align: var(--apco-dt-align);
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid var(--apco-dt-border);
	border-right: 1px solid var(--apco-dt-border);
	background: var(--apco-dt-bg);
}
.apco-dt__table th:last-child,
.apco-dt__table td:last-child {
	border-right: 0;
}

/* header row */
.apco-dt__table thead th {
	background: var(--apco-dt-header-bg);
	color: var(--apco-dt-header-color);
	font-weight: 600;
	font-size: 0.87em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-right-color: rgba(255, 255, 255, 0.12);
	border-bottom: 0;
}

/* body */
/* opaque odd-row background: outranks the Hello theme reset's translucent
   `table tbody > tr:nth-child(2n+1) > th/td` stripe, which shows scrolled
   columns through the sticky first column */
.apco-dt__table tbody tr:nth-child(odd) th,
.apco-dt__table tbody tr:nth-child(odd) td {
	background: var(--apco-dt-bg);
}
.apco-dt__table tbody tr:nth-child(even) th,
.apco-dt__table tbody tr:nth-child(even) td {
	background: var(--apco-dt-stripe);
}
.apco-dt__table tbody tr:hover th,
.apco-dt__table tbody tr:hover td {
	background: var(--apco-dt-hover);
}
.apco-dt__table tbody tr:last-child th,
.apco-dt__table tbody tr:last-child td {
	border-bottom: 0;
}
.apco-dt__table tbody th {
	font-weight: 600;
	text-align: left;
}
.apco-dt--nowrap .apco-dt__table th,
.apco-dt--nowrap .apco-dt__table td {
	white-space: nowrap;
}

/* footnote */
.apco-dt__note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #647568;
}

/* editor-only empty state */
.apco-dt__empty {
	padding: 18px 20px;
	border: 1px dashed #B7C9BB;
	background: #F5F6F2;
	color: #647568;
	font-size: 14px;
}

/* small screens: first column stays put while the rest scrolls */
@media (max-width: 1024px) {
	.apco-dt--first-col .apco-dt__table th:first-child,
	.apco-dt--first-col .apco-dt__table td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		box-shadow: 4px 0 8px -4px rgba(24, 34, 33, 0.18);
	}
	.apco-dt__table {
		font-size: 14px;
	}
	.apco-dt__table th,
	.apco-dt__table td {
		padding: 11px 12px;
	}
	/* keep data cells on one line and give headers room so they wrap into 2–3 lines instead of one word per line */
	.apco-dt__table tbody th,
	.apco-dt__table tbody td {
		white-space: nowrap;
	}
	.apco-dt__table thead th {
		min-width: 7em;
	}
}