/* =========================================================
   Responsive Table Generator - Frontend Styles
   ========================================================= */

.rstg-table-wrapper {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	margin: 24px 0;
	border-radius: var(--rstg-table-radius, 12px);
}

/* =========================================================
   Scrollbar
   ========================================================= */

.rstg-table-wrapper::-webkit-scrollbar {
	height: 10px;
}

.rstg-table-wrapper::-webkit-scrollbar-thumb {
	background: rgba(120, 120, 120, 0.45);
	border-radius: 999px;
}

.rstg-table-wrapper::-webkit-scrollbar-track {
	background: transparent;
}

/* =========================================================
   Table Base
   ========================================================= */

.rstg-table {
	width: 100%;
	min-width: max-content;
	border-spacing: 0;
	border-collapse: collapse;
	background: var(--rstg-row-bg, #ffffff);
	color: var(--rstg-row-color, #111827);
	font-size: var(--rstg-font-size, 15px);
	font-family: var(--rstg-font-family, inherit);
	font-weight: var(--rstg-font-weight, 400);
	line-height: var(--rstg-line-height, 1.5);
	box-shadow: var(--rstg-table-shadow, 0 2px 10px rgba(0,0,0,0.06));
	border-radius: var(--rstg-table-radius, 12px);
	overflow: hidden;
	border: var(--rstg-border-width, 1px)
		var(--rstg-border-style, solid)
		var(--rstg-border-color, #e5e7eb);
}

/* =========================================================
   Rows
   ========================================================= */

.rstg-table tr:nth-child(even) td {
	background: var(--rstg-alt-row-color, #f9fafb);
}

.rstg-table tr:hover td {
	background: var(--rstg-hover-bg, #f3f4f6);
	transition: background 0.2s ease;
}

/* =========================================================
   Header Cells
   ========================================================= */

.rstg-table th {
	background: var(--rstg-header-bg, #111827);
	color: var(--rstg-header-color, #ffffff);
	font-weight: 600;
	text-align: var(--rstg-text-align, left);
	padding: var(--rstg-cell-padding, 14px);
	border: var(--rstg-border-width, 1px)
		var(--rstg-border-style, solid)
		var(--rstg-border-color, #e5e7eb);
	vertical-align: middle;
	white-space: nowrap;
}

/* =========================================================
   Body Cells
   ========================================================= */

.rstg-table td {
	background: var(--rstg-row-bg, #ffffff);
	color: var(--rstg-row-color, #111827);
	padding: var(--rstg-cell-padding, 14px);
	text-align: var(--rstg-text-align, left);
	border: var(--rstg-border-width, 1px)
		var(--rstg-border-style, solid)
		var(--rstg-border-color, #e5e7eb);
	vertical-align: middle;
	min-width: 120px;
}

/* =========================================================
   Cell Content
   ========================================================= */

.rstg-cell-content {
	display: block;
	width: 100%;
	word-break: normal;
	overflow-wrap: break-word;
}

/* =========================================================
   Links
   ========================================================= */

.rstg-table a {
	text-decoration: none;
	font-weight: 500;
}

.rstg-table a:hover {
	text-decoration: underline;
}

/* =========================================================
   Images
   ========================================================= */

.rstg-table img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* =========================================================
   Responsive Improvements
   ========================================================= */

@media screen and (max-width: 1024px) {

	.rstg-table {
		font-size: 14px;
	}
}

@media screen and (max-width: 768px) {

	.rstg-table th,
	.rstg-table td {
		padding: 12px;
		font-size: 14px;
	}

	.rstg-table-wrapper {
		border-radius: 10px;
	}
}

@media screen and (max-width: 480px) {

	.rstg-table th,
	.rstg-table td {
		padding: 10px;
		font-size: 13px;
		min-width: 110px;
	}

	.rstg-table {
		border-radius: 8px;
	}
}

/* =========================================================
   Ultra Wide Screens
   ========================================================= */

@media screen and (min-width: 1800px) {

	.rstg-table {
		font-size: 16px;
	}

	.rstg-table th,
	.rstg-table td {
		padding: 16px 18px;
	}
}

/* =========================================================
   Dark Mode Support
   ========================================================= */

@media (prefers-color-scheme: dark) {

	.rstg-table {

		background: #111827;
		color: #f3f4f6;
		border-color: rgba(255,255,255,0.08);
	}

	.rstg-table td {

		background: #111827;
		color: #f3f4f6;
		border-color: rgba(255,255,255,0.08);
	}

	.rstg-table tr:nth-child(even) td {
		background: #1f2937;
	}

	.rstg-table tr:hover td {
		background: #374151;
	}

	.rstg-table-wrapper::-webkit-scrollbar-thumb {
		background: rgba(255,255,255,0.25);
	}
}