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

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

/* Same max-width variable as the tables and the partner banner (see
   gdconf_print_label_vars), so all three line up by construction. */
.gdconf-table-tabs-block {
	max-width: var(--gcg-shell-max, 1200px);
	margin-inline: auto;
	font-family: var(--gcg-font, inherit);
	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;
	/* Was #eef2f6, which on a white page is all but invisible. A light blue
	   tint keeps the control quiet but gives it an edge of its own. */
	background: #dbeafe;
	border-radius: 15px;
	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: 44px;
	padding: 0 24px !important;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .01em;
	white-space: nowrap;
	line-height: 1;

	color: #1e4ba8 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 11px !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: #1d4ed8 !important;
	box-shadow: 0 1px 3px rgba(15,23,42,.18), 0 1px 1px rgba(15,23,42,.06) !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) {
	/* On phones the table breaks out of the theme's side padding so the columns
	   aren't cramped. The tab strip used to stay behind in the narrower
	   container, so Events / Deadlines / Showcases sat visibly inset from the
	   filters and the table below them.

	   The breakout now belongs to the tabs block, once, and everything inside
	   simply fills it (see the rule that neutralises the table's own breakout
	   below). One element owns the full-bleed, so the strip, the filters and the
	   table share exactly one set of edges. */
	.gdconf-table-tabs-block {
		width: 100vw;
		max-width: 100vw;
		margin-left:  calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 0 6px;
	}

	/* The table inside a panel must not break out a second time - nested
	   breakouts would push it 6px past the strip on each side, which is the
	   mismatch this rule exists to prevent. */
	.gdconf-tabs__panel .gdconf-data-table-block {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}

	/* 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;
	}
}

/* === generated: dark mode when the site follows the OS === */
/* Blocksy writes data-color-mode="os-default" when the visitor has not
   picked a mode and the site simply follows their device. Every rule above
   is keyed on ="dark" and so missed that case entirely: on a phone set to
   dark, the page went dark while these stayed light - which is how striped
   rows ended up painted near-white on a dark table.

   This block mirrors them for the follow-the-OS case, and for a theme that
   sets no attribute at all. It is generated, and a test asserts every dark
   rule above has both twins here, so the two cannot drift apart. Edit the
   rules above, then regenerate. */
@media (prefers-color-scheme: dark) {
		:root[data-color-mode="os-default"] .gdconf-tabs__nav,
		:root:not([data-color-mode]) .gdconf-tabs__nav {
	background: #1e293b;
		}

		:root[data-color-mode="os-default"] .gdconf-tabs__tab,
		:root:not([data-color-mode]) .gdconf-tabs__tab {
	background: transparent !important;
	color: #94a3b8 !important;
		}

		:root[data-color-mode="os-default"] .gdconf-tabs__tab:hover,
		:root:not([data-color-mode]) .gdconf-tabs__tab:hover {
	color: #e2e8f0 !important;
		}

		:root[data-color-mode="os-default"] .gdconf-tabs__tab.is-active,
		:root:not([data-color-mode]) .gdconf-tabs__tab.is-active,
		:root[data-color-mode="os-default"] .gdconf-tabs__tab[aria-selected="true"],
		:root:not([data-color-mode]) .gdconf-tabs__tab[aria-selected="true"] {
	background: #0b1220 !important;
	color: #60a5fa !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.45) !important;
		}
}