/* ==========================================================================
   Sejan Table Widget — base stylesheet
   Loaded conditionally (only on pages using this widget) via get_style_depends().
   Colors/typography/borders are controlled per-instance from the Elementor
   Style tab (injected separately by Elementor) — this file only handles
   STRUCTURE, so it stays valid no matter how a table instance is styled.
   ========================================================================== */

.st-table-wrap {
	width: 100%;
	overflow: hidden;
}

.st-table-scroll {
	width: 100%;
}

.st-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

/* Reset default browser/theme cell borders so ONLY the widget's own
   Row Divider / Table Border controls ever draw a line. */
.st-table th,
.st-table td {
	border: none;
}

.st-table-caption.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------------
   Horizontal Scroll mode
   ------------------------------------------------------------------------ */
.st-mode-scroll .st-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	.st-mode-scroll .st-table {
		min-width: 600px;
	}
}

/* ------------------------------------------------------------------------
   Stacked Card mode — mobile only. Desktop keeps a normal table layout;
   these rules only apply under the breakpoint.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
	.st-mode-stack thead {
		display: none;
	}

	.st-mode-stack .st-table,
	.st-mode-stack .st-table tbody,
	.st-mode-stack .st-table tr {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.st-mode-stack .st-table td {
		width: 100%;
		box-sizing: border-box;
	}

	.st-mode-stack .st-table {
		border: none;
		background: transparent;
	}

	.st-mode-stack tbody tr {
		margin-bottom: 14px;
		overflow: hidden;
		background-color: var(--st-card-bg, #ffffff);
	}

	/* First cell acts as the card's title/header */
	.st-mode-stack td:first-child {
		display: block;
		font-weight: 700;
		font-size: 15px;
		padding: 14px 16px;
		background-color: var(--st-card-title-bg, #f0f7ff);
		color: var(--st-card-title-color, #0056b3);
	}
	.st-mode-stack td:first-child::before {
		display: none;
	}

	/* Remaining cells: label + value inside the card.
	   !important guards these because the desktop Row Divider color/style
	   is set by a separate Elementor-generated stylesheet whose load order
	   relative to this file isn't guaranteed — the mobile card look must
	   always win inside this breakpoint regardless of that order. */
	.st-mode-stack td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 4px 10px;
		padding: 12px 16px;
		border-bottom-style: dashed !important;
		border-bottom-width: 1px !important;
		border-bottom-color: var(--st-card-divider-color, #e2e8f0) !important;
	}
	.st-mode-stack td:last-child {
		border-bottom: none !important;
	}

	/* Stacked field layout: label sits above the value instead of beside it —
	   better for long labels/values that don't comfortably fit on one line. */
	.st-field-stacked.st-mode-stack td {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.st-mode-stack td::before {
		content: attr(data-label);
		font-weight: 500;
		font-size: 13px;
		flex-shrink: 0;
		color: var(--st-card-label-color, #64748b);
	}
}