/**
 * WPFlexStudio — HTML Table widget.
 *
 * Breakpoint (max-width: 767px) matches Elementor's own default Mobile
 * breakpoint, same convention as the Members Grid and Accordion widgets
 * in this suite — see the widget PHP docblock for why this is a static
 * value rather than read from Elementor's Breakpoints_Manager.
 *
 * Column widths/alignment are per-instance (Elementor {{WRAPPER}} inline
 * styles + PHP-computed <th> width), NOT set here. This stylesheet only
 * owns structural/layout rules that apply to every instance.
 */

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

/*
 * --wpflexstudio-table-align is written by the Style tab's "Default Cell
 * Alignment" control (Table section). It only takes effect on columns
 * whose own per-column Alignment (Content tab → Columns) is left at
 * "inherit" — those columns get no inline text-align of their own, so
 * this custom property is their only source of alignment.
 */
.wpflexstudio-table {
	--wpflexstudio-table-align: left;
	width: 100%;
	border-spacing: 0;
}

.wpflexstudio-table__head-cell,
.wpflexstudio-table__cell {
	text-align: var(--wpflexstudio-table-align);
	vertical-align: top;
	word-break: break-word;
}

.wpflexstudio-table__caption {
	caption-side: top;
	text-align: left;
	font-weight: 600;
	padding-bottom: 0.5em;
}

/*
 * Mobile behaviour: "scroll" — the table keeps its normal grid; the
 * wrapper scrolls horizontally when content is wider than the viewport.
 * -webkit-overflow-scrolling: touch keeps momentum scrolling on older
 * iOS Safari (harmless no-op on browsers that ignore it).
 */
.wpflexstudio-table__wrap--scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Mobile behaviour: "stacked" — only takes effect below the Mobile
 * breakpoint; above it, a stacked-mode table renders exactly like a
 * normal table (no cards, no data-label prefixes), matching "scroll"
 * mode on desktop/tablet.
 */
@media (max-width: 767px) {
	.wpflexstudio-table__wrap--stacked table.wpflexstudio-table,
	.wpflexstudio-table__wrap--stacked .wpflexstudio-table__body,
	.wpflexstudio-table__wrap--stacked .wpflexstudio-table__body tr,
	.wpflexstudio-table__wrap--stacked .wpflexstudio-table__cell {
		display: block;
		width: 100% !important;
	}

	.wpflexstudio-table__wrap--stacked .wpflexstudio-table__head {
		/* Headers are re-shown per-cell via data-label below instead. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.wpflexstudio-table__wrap--stacked .wpflexstudio-table__body tr {
		margin-bottom: 1em;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.wpflexstudio-table__wrap--stacked .wpflexstudio-table__cell {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1em;
		text-align: right;
	}

	.wpflexstudio-table__wrap--stacked .wpflexstudio-table__cell::before {
		content: attr(data-label);
		font-weight: 600;
		text-align: left;
		flex: 0 0 auto;
	}

	/* Cells with no header text (blank column label) skip the prefix. */
	.wpflexstudio-table__wrap--stacked .wpflexstudio-table__cell[data-label=""]::before {
		content: none;
	}
}

.wpflexstudio-table__editor-notice {
	padding: 16px;
	border: 1px dashed #d0d0d0;
	color: #6d6d6d;
	font-style: italic;
}