/* ==========================================================================
   GDCONF Table Tabs — frontend styles
   ========================================================================== */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.gdconf-table-tabs-block {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* alignfull bleed */
.wp-block-gdconf-table-tabs.alignfull,
.gdconf-table-tabs-block.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ── Tab nav — iOS-style segmented control ────────────────────────────────── */
/* A single inset track holding the segments; the active one lifts up as a
   white thumb with a soft shadow. No nested boxes, no hard borders. */

.gdconf-tabs__nav {
	display: inline-flex;
	max-width: 100%;
	gap: 2px;
	padding: 4px;
	margin-bottom: 22px;
	background: #eef2f6;
	border-radius: 13px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.gdconf-tabs__nav::-webkit-scrollbar { display: none; }

/* ── Kill Blocksy/WP default button chrome ────────────────────────────────── */
.gdconf-tabs__nav .gdconf-tabs__tab,
.gdconf-tabs__nav .gdconf-tabs__tab:hover,
.gdconf-tabs__nav .gdconf-tabs__tab:focus,
.gdconf-tabs__nav .gdconf-tabs__tab:active {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	background-image: none !important;
	text-decoration: none;
}

/* ── Segment ──────────────────────────────────────────────────────────────── */
.gdconf-tabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 20px !important;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: .01em;
	white-space: nowrap;
	line-height: 1;

	color: #64748b !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 9px !important;
	box-shadow: none !important;

	transition: color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
.gdconf-tabs__tab:hover {
	color: #0f172a !important;
}

/* Active segment — elevated white thumb */
.gdconf-tabs__tab.is-active,
.gdconf-tabs__tab[aria-selected="true"] {
	background: #ffffff !important;
	color: #2563eb !important;
	box-shadow: 0 1px 3px rgba(15,23,42,.14), 0 1px 1px rgba(15,23,42,.04) !important;
}
.gdconf-tabs__tab:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: 2px;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
[data-color-mode="dark"] .gdconf-tabs__nav {
	background: #1e293b;
}
[data-color-mode="dark"] .gdconf-tabs__tab {
	background: transparent !important;
	color: #94a3b8 !important;
}
[data-color-mode="dark"] .gdconf-tabs__tab:hover {
	color: #e2e8f0 !important;
}
[data-color-mode="dark"] .gdconf-tabs__tab.is-active,
[data-color-mode="dark"] .gdconf-tabs__tab[aria-selected="true"] {
	background: #0b1220 !important;
	color: #60a5fa !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.45) !important;
}

/* ── Panels ───────────────────────────────────────────────────────────────── */

.gdconf-tabs__panels {
	position: relative;
}

.gdconf-tabs__panel {
	display: none;
}

.gdconf-tabs__panel.is-active {
	display: block;
}

/* Remove top margin from the data-table-block that lives inside a panel */
.gdconf-tabs__panel .gdconf-data-table-block {
	margin-top: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	/* Stretch the control to the full width; segments share the space evenly
	   and scroll horizontally only if the labels genuinely don't fit. */
	.gdconf-tabs__nav {
		display: flex;
		width: 100%;
	}
	.gdconf-tabs__tab {
		flex: 1 0 auto;
		padding: 0 14px !important;
	}
}