/* ==========================================================================
   Nonotami Table Builder — Frontend Styles
   ========================================================================== */

.ntb-frontend-wrap {
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Scroll container — fixed height, scrolls inside */
.ntb-frontend-wrap .ntb-scroll-box {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/* ~11 rows at 36px each + header */
	max-height: 432px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	position: relative;
}

.ntb-mobile-scroll .ntb-scroll-box {
	overflow-x: auto;
}

/* Table */
.ntb-frontend-table {
	border-collapse: collapse;
	table-layout: fixed;
	min-width: 100%;
	background: #fff;
}

.ntb-frontend-table td {
	border: 1px solid #e0e0e0;
	padding: 6px 10px;
	overflow: hidden;
	word-break: break-word;
	font-size: 14px;
	color: #1a1a1a;
	line-height: 1.45;
	box-sizing: border-box;
}

/* First row: sticky header */
.ntb-frontend-table tbody tr:first-child td {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #f5f5f7;
	font-weight: 600;
	border-bottom: 2px solid #c0c0c0;
}

/* First column: sticky */
.ntb-frontend-table td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: #f9f9fb;
	border-right: 2px solid #c0c0c0;
}

/* Top-left corner cell: both sticky */
.ntb-frontend-table tbody tr:first-child td:first-child {
	z-index: 3;
	background: #f0f0f2;
}

/* Sort indicator */
.ntb-frontend-table td[data-sortable-col] {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.ntb-frontend-table td[data-sortable-col]:hover {
	background: rgba(0,0,0,.04) !important;
}

.ntb-frontend-table td[data-sortable-col]::after  { content: ' ⇅'; font-size: 11px; opacity: .4; }
.ntb-frontend-table td[data-sortable-col].ntb-sort-asc::after  { content: ' ↑'; opacity: .8; }
.ntb-frontend-table td[data-sortable-col].ntb-sort-desc::after { content: ' ↓'; opacity: .8; }

/* Links and images */
.ntb-frontend-table td a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ntb-frontend-table td a:hover { opacity: .75; }
.ntb-frontend-table td img { max-width: 100%; height: auto; display: block; }

/* Mobile stack */
@media (max-width: 600px) {
	.ntb-mobile-stack .ntb-scroll-box { overflow: visible; max-height: none; border: none; }
	.ntb-mobile-stack .ntb-frontend-table,
	.ntb-mobile-stack .ntb-frontend-table tbody,
	.ntb-mobile-stack .ntb-frontend-table tr,
	.ntb-mobile-stack .ntb-frontend-table td { display: block; width: 100% !important; }
	.ntb-mobile-stack .ntb-frontend-table td:first-child,
	.ntb-mobile-stack .ntb-frontend-table tbody tr:first-child td { position: static; }
}