/* ============================================
   Synergene Advanced Table Widget - Frontend Styles
   Version: 1.0.0
   ============================================ */

.synergene-table-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---- Table Title ---- */
.synergene-table-title {
	font-size: 16px;
	font-weight: 700;
	color: #1a3c5e;
	padding: 12px 16px;
	background-color: #f0f4f8;
	border: 1px solid #d0dce8;
	border-bottom: 2px solid #1a3c5e;
	display: block;
	box-sizing: border-box;
}

/* ---- Table Base ---- */
.synergene-advanced-table {
	width: 100%;
	border-collapse: collapse;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	table-layout: auto;
}

/* ---- Header Cells ---- */
.synergene-advanced-table thead th {
	background-color: #ffffff;
	color: #1a3c5e;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 16px;
	text-align: left;
	border: 1px solid #d0dce8;
	border-bottom: 2px solid #d0dce8;
	vertical-align: middle;
	white-space: nowrap;
}

/* ---- Body Cells ---- */
.synergene-advanced-table tbody td {
	padding: 10px 16px;
	color: #4a5568;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	border: 1px solid #e2e8f0;
	vertical-align: middle;
	background-color: #ffffff;
}

/* ---- Odd Row Background ---- */
.synergene-advanced-table tbody tr.synergene-row-odd td {
	background-color: #ffffff;
}

/* ---- Even Row Background ---- */
.synergene-advanced-table tbody tr.synergene-row-even td {
	background-color: #f8fafc;
}

/* ---- Row Hover ---- */
.synergene-advanced-table tbody tr:hover td {
	background-color: #eef3f9;
	transition: background-color 0.2s ease;
}

/* ---- Hover Disabled ---- */
.synergene-advanced-table.synergene-no-hover tbody tr:hover td {
	background-color: inherit;
	transition: none;
}

/* ---- Responsive ---- */
@media screen and (max-width: 768px) {
	.synergene-table-wrapper {
		overflow-x: scroll;
	}

	.synergene-advanced-table thead th,
	.synergene-advanced-table tbody td {
		white-space: nowrap;
		min-width: 120px;
	}
}

/* ---- Cell Inner Content ---- */
.synergene-cell-content {
	display: block;
}