/* Table Stack Rules - Bulma Compatible with CSS Variables */

/* Default state - hide stack captions */
.stack-caption {
	display: none;
}

/* Mobile and Tablet (Bulma's touch breakpoint - up to 1023px) */
@media screen and (max-width: 1023px) {
	/* Hide table header and footer on mobile */
	.table.is-stacked thead {
		display: none;
	}
	
	.table.is-stacked tfoot {
		display: none;
	}
	
	/* Stack table elements */
	.table.is-stacked tbody tr,
	.table.is-stacked tbody th,
	.table.is-stacked tbody td {
		display: block;
		width: 100%;
	}
	
	/* Remove default Bulma table borders */
	.table.is-stacked tbody td {
		border: none;
		border-top: 0;
	}

	/* Style stack captions */
	.table.is-stacked .stack-caption {
		display: block;
		font-weight: var(--bulma-weight-bold, 700);
		background-color: var(--bulma-background, var(--bulma-grey-lightest, #f5f5f5));
		padding: 0.5em 0.75em;
		border-radius: var(--bulma-radius, 4px) var(--bulma-radius, 4px) 0 0;
		color: var(--bulma-text, inherit);
	}
	
	/* Alternate row styling */
	.table.is-stacked tbody tr:nth-child(even) .stack-caption {
		background-color: var(--bulma-grey-lighter, #e8e8e8);
	}

	/* Add separator between stacked rows */
	.table.is-stacked tbody tr:nth-child(n+2) {
		border-top: 3px solid var(--bulma-border, var(--bulma-grey-light, #dbdbdb));
		margin-top: var(--bulma-block-spacing, 1rem);
		padding-top: var(--bulma-block-spacing, 1rem);
	}

	/* Add padding to rows */
	.table.is-stacked tbody tr {
		padding: var(--bulma-block-spacing, 1rem) 0;
		margin-bottom: var(--bulma-block-spacing, 1rem);
	}

	/* Add padding to cells */
	.table.is-stacked tbody td {
		padding: 0.5em 0.75em;
	}

	/* Handle tables with no header */
	.table.is-stacked.no-head th {
		display: none;
	}
}

/* For mobile only (up to 768px) */
@media screen and (max-width: 768px) {
	/* Additional mobile-specific styling if needed */
	.table.is-stacked tbody td {
		padding-left: var(--bulma-block-spacing, 1rem);
		padding-right: var(--bulma-block-spacing, 1rem);
	}
}

/* Optional: Bulma modifier classes for better integration */
.table.is-stacked.is-striped tbody tr:nth-child(even) {
	background-color: transparent;
}

.table.is-stacked.is-bordered tbody tr {
	border: none;
}

.table.is-stacked.is-hoverable tbody tr:hover {
	background-color: transparent;
}

/* Dark mode support if using Bulma's theme variables */
@media (prefers-color-scheme: dark) {
	.table.is-stacked .stack-caption {
		background-color: var(--bulma-scheme-main-ter, var(--bulma-background, #242424));
		color: var(--bulma-text, inherit);
	}
	
	.table.is-stacked tbody tr:nth-child(even) .stack-caption {
		background-color: var(--bulma-scheme-main-bis, #363636);
	}
	
	.table.is-stacked tbody tr:nth-child(n+2) {
		border-top-color: var(--bulma-border, var(--bulma-grey-dark, #4a4a4a));
	}
}