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

/* ── Block wrapper ────────────────────────────────────────────────────────── */

.gdconf-data-table-block {
	box-sizing: border-box;
	font-family: var(--gcg-font, inherit);
	/* em, not px: the block inherits the theme's base font, so when Blocksy's
	   Base Font Size changes, the whole table/filters scale with it. 0.875 x the
	   16px default = the former 14px, so nothing moves at the default setting.
	   Every font-size below is in em relative to its parent, for the same reason. */
	font-size: 0.875em;
	line-height: 1.5;
	color: #1e293b;
	/* One width for the tables, the tabs and the partner banner (emitted by
	   gdconf_print_label_vars), so the three line up by construction instead of
	   by three separate numbers that drift apart. */
	width: 100%;
	max-width: var(--gcg-shell-max, 1200px);
	margin-inline: auto;
}

.gdconf-data-table-block *,
.gdconf-data-table-block *::before,
.gdconf-data-table-block *::after {
	box-sizing: inherit;
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */

.gdconf-dt-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 14px;
	padding: 16px;
	margin-bottom: 20px;
	background: #fff;
	border: 1px solid #e6eaf0;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15,23,42,.05);
}

.gdconf-dt-filter-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 132px;
}

.gdconf-dt-filter-item label {
	font-family: inherit;   /* the filter boxes already inherit; the labels did not */
	font-size: 0.75em;      /* 10.5px at the 14px block root */
	font-weight: 700;
	color: #8792a5;
	text-transform: uppercase;
	letter-spacing: .07em;
	line-height: 1;
	padding-left: 2px;
}

.gdconf-dt-filter-select,
.gdconf-dt-search {
	height: 40px;
	padding: 8px 12px;
	font-size: 0.964em;     /* 13.5px at the 14px block root */
	font-family: inherit;
	color: #1e293b;
	border: 1px solid #dde3ec;
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none;
	appearance: none;
}
.gdconf-dt-filter-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	padding-right: 30px;
	cursor: pointer;
}
.gdconf-dt-filter-select:hover,
.gdconf-dt-search:hover {
	border-color: #c6cfdd;
}
.gdconf-dt-filter-select:focus,
.gdconf-dt-search:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,.14);
	outline: none;
}

.gdconf-dt-filter-item--search {
	flex: 1;
	min-width: 200px;
	flex-direction: row;
	align-items: center;
}
.gdconf-dt-filter-item--search .gdconf-dt-search {
	width: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 10px center;
	padding-left: 34px;
}

.gdconf-dt-filter-item--reset {
	min-width: auto;
	flex-direction: row;
	align-items: flex-end;
}

.gdconf-dt-reset {
	height: 40px;
	padding: 0 18px;
	font-size: 0.893em;     /* 12.5px at the 14px block root */
	font-weight: 600;
	font-family: inherit;
	color: #64748b;
	background: #fff;
	border: 1px solid #dde3ec;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
	white-space: nowrap;
}
.gdconf-dt-reset:hover {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #b91c1c;
}

/* Mobile-only collapse toggle — revealed by the media query below. */
.gdconf-dt-filter-toggle {
	display: none;
	align-items: center;
	gap: 11px;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	margin-bottom: 14px;
	font-family: inherit;
	font-size: 1em;         /* 14px at the 14px block root */
	font-weight: 600;
	color: #0f172a;
	background: #fff;
	border: 1px solid #e6eaf0;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gdconf-dt-filter-toggle:hover {
	border-color: #d3dae5;
	box-shadow: 0 2px 6px rgba(15,23,42,.07);
}
.gdconf-dt-filter-toggle__icon {
	width: 18px;
	height: 18px;
	flex: none;
	color: #2563eb;
}
.gdconf-dt-filter-toggle__label {
	flex: 1;
	text-align: left;
}
.gdconf-dt-filter-toggle__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 0.786em;     /* 11px, parent toggle is 14px */
	font-weight: 700;
	color: #fff;
	background: #2563eb;
	border-radius: 100px;
}
.gdconf-dt-filter-toggle__count[hidden] {
	display: none;
}
.gdconf-dt-filter-toggle__chevron {
	font-size: 0.786em;     /* 11px, parent toggle is 14px */
	color: #94a3b8;
	transition: transform .2s ease;
}
.gdconf-filters-open .gdconf-dt-filter-toggle__chevron {
	transform: rotate(180deg);
}

/* Panel entrance when expanded on mobile. */
@keyframes gdconf-filters-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* ── Table wrapper + AJAX loading state ───────────────────────────────────── */

.gdconf-dt-table-wrap {
	overflow-x: auto;
	border-radius: 8px;
	position: relative;
	min-height: 80px;
}

.gdconf-dt-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px 16px;
	color: #94a3b8;
	font-size: 0.929em;     /* 13px at the 14px block root */
}

.gdconf-dt-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid #e2e8f0;
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: gdconf-spin .7s linear infinite;
	flex-shrink: 0;
}

@keyframes gdconf-spin {
	to { transform: rotate(360deg); }
}

table.gdconf-dt {
	/* DataTables wraps the table in .dt-container (0.929em), so this is relative
	   to THAT, not the block: 0.929 x 1.038 = 0.964 of the block = the 13.5px we
	   want. Cells inherit this; thead th + chips below are relative to it. */
	font-size: 1.038em;
	border-collapse: collapse;
	width: 100% !important;
	margin: 0 !important;
}

table.gdconf-dt thead th {
	background: var(--gcg-head-bg, #ced4da);
	color: var(--gcg-head-fg, #111);
	font-size: 0.815em;     /* 11px, parent table is 13.5px */
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 10px 12px;
	border-bottom: 2px solid rgba(0,0,0,.08) !important;
	white-space: nowrap;
	user-select: none;
}
table.gdconf-dt thead th.dt-orderable-asc:hover,
table.gdconf-dt thead th.dt-orderable-desc:hover {
	filter: brightness(.95);
}
table.gdconf-dt thead th.dt-ordering-asc,
table.gdconf-dt thead th.dt-ordering-desc {
	filter: brightness(.95);
}
table.gdconf-dt thead th .dt-column-order {
	opacity: .3;
}
table.gdconf-dt thead th.dt-ordering-asc .dt-column-order,
table.gdconf-dt thead th.dt-ordering-desc .dt-column-order {
	opacity: 1;
}

table.gdconf-dt td {
	padding: 8px 12px;
	border-bottom: 1px solid #f1f5f9;
	color: #1e293b;
	vertical-align: middle;
	line-height: 1.45;
}
table.gdconf-dt tbody tr:last-child td {
	border-bottom: none;
}
table.gdconf-dt tbody tr:nth-child(even) td {
	background: var(--gcg-row-stripe, #f9f9f9);
}
table.gdconf-dt tbody tr {
	cursor: pointer;
}
table.gdconf-dt tbody tr:hover td {
	background: var(--gcg-row-hover, #f3f3f3);
}

/* ── Border reset ─────────────────────────────────────────────────────────────
 * DataTables' default stylesheet (loaded from CDN) and some themes add their
 * own cell borders — vertical column lines and a heavy outer frame — which
 * render inconsistently across Firefox / Safari / Opera. Strip them all and
 * keep only the soft horizontal row dividers defined above, so the table looks
 * identical everywhere and blends into the page.
 * ------------------------------------------------------------------------- */
table.gdconf-dt,
table.gdconf-dt th,
table.gdconf-dt td {
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
}
table.gdconf-dt thead th {
	border-bottom: 2px solid #e8edf3 !important;
}
table.gdconf-dt tbody td {
	border-bottom: 1px solid #f1f5f9 !important;
}
table.gdconf-dt tbody tr:last-child td {
	border-bottom: 0 !important;
}

/* ── Logo column ──────────────────────────────────────────────────────────── */

/* The logo cell hugs the image (width:1% + nowrap) so there's no empty gap
   between it and the neighbouring columns. The sizes come from GDCONF Data →
   Table Display → Logo and name size; the image keeps its aspect ratio. */
/* `1px`, not `1%`: both mean "shrink to the contents", but a percentage is
   resolved against the table and then still takes a share of the leftover
   width, which on phones — where responsive has hidden all but three columns —
   left the logo floating in a wide empty cell. An absolute minimum does not
   take a share. */
.gdconf-dt-col-logo {
	width: 1px !important;
	white-space: nowrap;
	text-align: left;
	/* Breathing room on both sides of the logo so Date, logo and name don't look
	   squished together (owner's note). Kept even with the Date cell's right
	   padding below for a consistent gap. */
	padding: 4px 12px 4px 10px !important;
}

/* Both limits are caps, and the image sizes itself inside them. Forcing an
   exact width instead, with object-fit letterboxing the picture inside it, left
   a 140px-wide box holding an 83px-wide logo — so the rounded corners sat out in
   empty space with no artwork to cut, which is why they never appeared.
   Caps in pixels, never percentages: a percentage would ask the width:1% cell
   how wide it is while the cell is still asking the image, and the browser
   settles that circle at zero. That is what once made every logo vanish. */
.gdconf-dt-logo {
	width: auto;
	height: auto;
	max-width: var(--dt-logo-w, 70px);
	max-height: var(--dt-logo-maxh, none);
	display: block;
	margin: 0;
	/* Same corner as the search box and the filter dropdowns. */
	border-radius: 10px;
	/* The old site gave the logo a small lift on row hover; this restores it.
	   transform-origin left keeps it from drifting into the date cell. */
	transform-origin: left center;
	transition: transform .18s ease;
}

/* The lift itself, on hover. Suppressed under reduced-motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	table.gdconf-dt tbody tr:hover .gdconf-dt-logo {
		transform: scale(1.12);
	}
}

/* ── Column widths: one model for every table ─────────────────────────────
   Left to itself the browser hands the spare width to whichever column has the
   longest content, which differs per table. That is why Events, Deadlines and
   Showcases all used to look different: in one the date column ballooned, in
   another the gap landed in front of the logo, and on phones a date could be
   squeezed into three lines while the table beside it had room to spare.

   So nothing is left to chance. Every column shrinks to its contents, and the
   name column alone takes whatever is left over. That produces the same shape
   everywhere: date, logo and name packed together on the left, one honest gap,
   and the remaining columns grouped on the right. */
table.gdconf-dt thead th,
table.gdconf-dt tbody td {
	width: 1px;
	white-space: nowrap;
}

table.gdconf-dt thead th.gdconf-dt-col-primary,
table.gdconf-dt tbody td.gdconf-dt-col-primary {
	width: 100%;
	white-space: normal;   /* a long name still wraps rather than stretching the row */
}

/* Events puts Date before the logo. Give the Date cell a comfortable right
   padding so Date, logo and name read as three spaced columns rather than one
   squished block (owner's note), while still keeping them grouped on the left. */
.gdconf-dt-table--events table.gdconf-dt td:first-child,
.gdconf-dt-table--events table.gdconf-dt th:first-child {
	padding-right: 12px;
}

/* On phones, break out of the theme's side padding and use the full viewport
   width — the constrained container was cramping the table and clipping the
   Status column. Inside an already full-width parent the margins compute to 0,
   so nesting stays safe. */
@media (max-width: 640px) {
	.gdconf-data-table-block {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding: 0 6px;
	}
}

/* ── Name column + tag chips ──────────────────────────────────────────────── */

.gdconf-dt-name {
	display: block;
	font-weight: 600;
	font-size: var(--dt-name-size, 16px);
	line-height: 1.3;
}

/* The chips used to be a flex row stacked beneath the name. The previous site
   ran them along the same line, which is what the owner is used to and keeps a
   row shorter. `inline` lets them flow straight on from the name and wrap only
   when the column genuinely runs out of room. */
/* Descriptive tags (type, audience, size) sit on their own line UNDER the name.
   The status flags (Featured / New) stay inline beside the name, in the
   .gdconf-dt-nameline span above. */
.gdconf-dt-tags {
	display: block;
	margin-top: 4px;
}

.gdconf-dt-tags .gdconf-dt-tag {
	margin: 0 5px 2px 0;
}



/* ── URL link ─────────────────────────────────────────────────────────────── */

.gdconf-dt-link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 0.889em;     /* 12px, parent cell is 13.5px */
	font-weight: 600;
	color: #2563eb;
	text-decoration: none;
	padding: 3px 9px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 5px;
	white-space: nowrap;
	transition: background 0.12s, border-color 0.12s;
}
.gdconf-dt-link:hover {
	background: #dbeafe;
	border-color: #93c5fd;
	text-decoration: none;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
/* Every label (status, type, audience, size, tags) shares one shape — the
   compact block label from the previous site — and takes its colours from the
   palette in GDCONF Data → Table Display → Appearance (printed as --gcg-l-*).
   Matched by value slug, so the calendar block gets the same colours. */

/* ── Flags column ─────────────────────────────────────────────────────────── */

/* FEATURED / NEW sit on the same line as the name they describe. They used to
   be a column of their own between the logo and the name, which read as if they
   belonged to the logo. `inline` keeps the chips on the name's own baseline and
   lets them wrap with it on a narrow screen. */
.gdconf-dt-nameline {
	display: inline;
}

.gdconf-dt-nameline .gdconf-badge {
	margin-left: 6px;
	vertical-align: 2px;
}

/* The name itself stays inline so the chips can follow it rather than being
   pushed onto a line of their own by a block-level name. */
.gdconf-dt-name {
	display: inline;
}

.gdconf-flag {
	font-size: 1.037em;     /* 14px, parent cell is 13.5px */
	line-height: 1;
	display: inline-block;
}

/* ── Featured / Pinned row highlight ─────────────────────────────────────── */

table.gdconf-dt tbody tr.gdconf-row--pinned > td:first-child,
table.gdconf-dt tbody tr.gdconf-row--featured > td:first-child {
	border-left: 3px solid;
}
table.gdconf-dt tbody tr.gdconf-row--pinned   > td:first-child { border-left-color: #f59e0b; }
table.gdconf-dt tbody tr.gdconf-row--featured > td:first-child { border-left-color: var(--gcg-row-featured-edge, #60a5fa); }

table.gdconf-dt tbody tr.gdconf-row--pinned   td { background: #fffbeb !important; }
table.gdconf-dt tbody tr.gdconf-row--featured td { background: var(--gcg-row-featured, #EFF6FF) !important; }
table.gdconf-dt tbody tr.gdconf-row--pinned:hover   td,
table.gdconf-dt tbody tr.gdconf-row--featured:hover td { filter: brightness(.97); }

/* ── Cancelled / Delayed / Postponed rows ─────────────────────────────────── */
/* A thin left rule in the label colour marks the row; cancelled rows also get
   their date and name struck through. No tinted background — it disappeared
   in the light theme and fought with the label colours. */

table.gdconf-dt tbody tr.gdconf-row--cancelled > td:first-child,
table.gdconf-dt tbody tr.gdconf-row--canceled  > td:first-child { box-shadow: inset 3px 0 0 var(--gcg-l-cancelled-bg, #000); }
table.gdconf-dt tbody tr.gdconf-row--delayed   > td:first-child,
table.gdconf-dt tbody tr.gdconf-row--postponed > td:first-child { box-shadow: inset 3px 0 0 var(--gcg-l-update-bg, #FF9901); }

table.gdconf-dt tbody tr.gdconf-row--cancelled td.gdconf-dt-col-primary .gdconf-dt-name,
table.gdconf-dt tbody tr.gdconf-row--canceled  td.gdconf-dt-col-primary .gdconf-dt-name,
table.gdconf-dt tbody tr.gdconf-row--cancelled td.gdconf-dt-col-primary:not(:has(.gdconf-dt-name)),
table.gdconf-dt tbody tr.gdconf-row--canceled  td.gdconf-dt-col-primary:not(:has(.gdconf-dt-name)),
table.gdconf-dt tbody tr.gdconf-row--cancelled > td:first-child,
table.gdconf-dt tbody tr.gdconf-row--canceled  > td:first-child {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	opacity: .7;
}

/* ── DataTables 2.x layout wrappers ──────────────────────────────────────── */

/* The layout API generates .dt-container > .dt-layout-row > .dt-layout-cell */

.gdconf-data-table-block .dt-container {
	font-size: 0.929em;     /* 13px at the 14px block root; DT controls inherit this */
	font-family: inherit;
}

/* Controls bar (top + bottom) — tight, compact row */
.gdconf-data-table-block .dt-layout-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 12px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

/* Bottom controls row: no top border, reversed border position */
.gdconf-data-table-block .dt-layout-row:last-child {
	border-bottom: none;
	border-top: 1px solid #e2e8f0;
}

/* Row that wraps the actual table — zero padding, no background */
.gdconf-data-table-block .dt-layout-row:has(.dt-layout-full) {
	padding: 0;
	background: none;
	border: none;
}

.gdconf-data-table-block .dt-layout-cell {
	display: flex;
	align-items: center;
}
.gdconf-data-table-block .dt-layout-start { justify-content: flex-start; }
.gdconf-data-table-block .dt-layout-end   { justify-content: flex-end; }
.gdconf-data-table-block .dt-layout-full  { flex: 1 1 100%; }

/* ── Page-length selector ─────────────────────────────────────────────────── */

.gdconf-data-table-block .dt-length label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	font-size: 0.962em;     /* 12.5px, parent .dt-container is 13px */
	font-weight: 500;
	color: #64748b;
}
.gdconf-data-table-block .dt-length select {
	width: auto !important;      /* override any theme width: 100% */
	min-width: 58px;
	max-width: 90px;
	height: 28px;
	padding: 0 22px 0 8px;
	font-size: 1em;         /* 12.5px, parent .dt-length label is 12.5px */
	font-family: inherit;
	border: 1px solid #cbd5e1;
	border-radius: 5px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 6px center;
	-webkit-appearance: none;
	appearance: none;
	color: #1e293b;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.gdconf-data-table-block .dt-length select:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,.12);
	outline: none;
}

/* ── Info text ────────────────────────────────────────────────────────────── */

.gdconf-data-table-block .dt-info {
	font-size: 0.962em;     /* 12.5px, parent .dt-container is 13px */
	color: #94a3b8;
	font-weight: 400;
	white-space: nowrap;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.gdconf-data-table-block .dt-paging {
	display: flex;
	align-items: center;
	gap: 3px;
	flex-wrap: wrap;
}

.gdconf-data-table-block .dt-paging-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	font-size: 1em;         /* 13px, parent .dt-container is 13px */
	font-family: inherit;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 5px;
	cursor: pointer;
	color: #475569;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
	line-height: 1;
}
.gdconf-data-table-block .dt-paging-button:hover:not(.disabled) {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #1e293b;
}
.gdconf-data-table-block .dt-paging-button.current {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
	font-weight: 700;
}
.gdconf-data-table-block .dt-paging-button.current:hover {
	background: #1d4ed8;
	border-color: #1d4ed8;
}
.gdconf-data-table-block .dt-paging-button.disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

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

@media (max-width: 768px) {
	/* Reveal the toggle and collapse the panel until the user opens it. */
	.gdconf-dt-filter-toggle {
		display: flex;
	}
	.gdconf-data-table-block:not(.gdconf-filters-open) .gdconf-dt-filters {
		display: none;
	}
	.gdconf-filters-open .gdconf-dt-filters {
		animation: gdconf-filters-in .22s ease both;
	}

	.gdconf-dt-filters {
		gap: 12px;
		padding: 14px;
	}

	/* Two filters per row; search + reset span the full width. */
	.gdconf-dt-filter-item {
		min-width: calc(50% - 4px);
		flex: 1 1 calc(50% - 4px);
	}
	.gdconf-dt-filter-item--search {
		min-width: 100%;
		flex: 1 1 100%;
	}
	.gdconf-dt-filter-item--reset {
		flex: 1 1 100%;
	}
	.gdconf-dt-filter-item--reset .gdconf-dt-reset {
		width: 100%;
	}
	.gdconf-dt-filter-item label {
		font-size: 0.714em;     /* 10px at the 14px block root */
	}

	table.gdconf-dt thead th,
	table.gdconf-dt td {
		padding: 6px 8px;
		font-size: 0.926em;     /* 12.5px, parent table is 13.5px */
	}

	.gdconf-data-table-block .dt-layout-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.gdconf-data-table-block .dt-layout-end {
		justify-content: flex-start;
	}
}

/* ── Mobile UX enhancements (DataTables Responsive — details:false) ───────── */
/*
 * On small screens DataTables silently hides lower-priority columns.
 * A subtle hint reminds users to tap a row to see full details in the modal.
 */

@media (max-width: 640px) {
	/* Tighter cells */
	table.gdconf-dt td,
	table.gdconf-dt thead th {
		padding: 5px 7px;
		font-size: 0.926em;     /* 12.5px, parent table is 13.5px */
	}

	/* Logo scales down proportionally; cell still hugs the image */
	.gdconf-dt-col-logo {
		width: 1px !important;
		white-space: nowrap;
		padding: 4px 8px 4px 4px !important;
	}
	.gdconf-dt-logo {
		max-width: var(--dt-logo-w-mobile, 49px);
		max-height: var(--dt-logo-maxh-mobile, none);
	}

	/* Tags carry the columns that responsive drops on narrow screens */
	.gdconf-dt-tag { font-size: 0.741em; padding: 0 6px; }   /* 10px, parent cell is 13.5px */

	/* Hint text below table: "tap row for details" */
	.gdconf-data-table-block::after {
		content: 'Tap any row for full details';
		display: block;
		text-align: center;
		font-size: 0.786em;     /* 11px at the 14px block root */
		color: #94a3b8;
		padding: 6px 0 2px;
		letter-spacing: .02em;
	}
}

@media (max-width: 640px) {
	[data-color-mode*="dark"] .gdconf-data-table-block::after {
		color: #475569;
	}
}

/* ==========================================================================
   Dark mode — Blocksy sets [data-color-mode="dark"] on <html>
   ========================================================================== */

[data-color-mode="dark"] .gdconf-data-table-block {
	color: #e2e8f0;
}

/* Filter bar */
[data-color-mode="dark"] .gdconf-dt-filters {
	background: #1e293b;
	border-color: #334155;
}
[data-color-mode="dark"] .gdconf-dt-filter-item label {
	color: #94a3b8;
}
[data-color-mode="dark"] .gdconf-dt-filter-select,
[data-color-mode="dark"] .gdconf-dt-search {
	background: #0f172a;
	border-color: #475569;
	color: #e2e8f0;
}
[data-color-mode="dark"] .gdconf-dt-filter-select:focus,
[data-color-mode="dark"] .gdconf-dt-search:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
[data-color-mode="dark"] .gdconf-dt-reset {
	background: #1e293b;
	border-color: #475569;
	color: #94a3b8;
}
[data-color-mode="dark"] .gdconf-dt-reset:hover {
	background: #450a0a;
	border-color: #7f1d1d;
	color: #fca5a5;
}


/* Mobile filter toggle */
[data-color-mode="dark"] .gdconf-dt-filter-toggle {
	background: #1e293b;
	border-color: #334155;
	color: #e2e8f0;
}

/* Table wrapper */
[data-color-mode="dark"] table.gdconf-dt {
	background: #0f172a;
}
[data-color-mode="dark"] table.gdconf-dt thead th {
	background: #1e293b;
	color: #94a3b8;
	border-bottom-color: #334155 !important;
}
[data-color-mode="dark"] table.gdconf-dt thead th.dt-orderable-asc:hover,
[data-color-mode="dark"] table.gdconf-dt thead th.dt-orderable-desc:hover {
	background: #263348;
}
[data-color-mode="dark"] table.gdconf-dt thead th.dt-ordering-asc,
[data-color-mode="dark"] table.gdconf-dt thead th.dt-ordering-desc {
	color: #60a5fa;
}
[data-color-mode="dark"] table.gdconf-dt tbody td {
	border-bottom-color: #1e293b !important;
}
[data-color-mode="dark"] table.gdconf-dt td {
	color: #e2e8f0;
}
[data-color-mode="dark"] table.gdconf-dt tbody tr:nth-child(even) td {
	background: #111827;
}
[data-color-mode="dark"] table.gdconf-dt tbody tr:hover td {
	background: #1e3a5f;
}

/* DT controls */
[data-color-mode="dark"] .gdconf-data-table-block .dt-layout-row {
	background: #1e293b;
	border-bottom-color: #334155;
}
[data-color-mode="dark"] .gdconf-data-table-block .dt-layout-row:last-child {
	border-top-color: #334155;
}
[data-color-mode="dark"] .gdconf-data-table-block .dt-layout-row:has(.dt-layout-full) {
	background: none;
}
[data-color-mode="dark"] .gdconf-data-table-block .dt-length label {
	color: #94a3b8;
}
[data-color-mode="dark"] .gdconf-data-table-block .dt-length select {
	background-color: #0f172a;
	border-color: #475569;
	color: #e2e8f0;
}
[data-color-mode="dark"] .gdconf-data-table-block .dt-info {
	color: #475569;
}
[data-color-mode="dark"] .gdconf-data-table-block .dt-paging-button {
	background: #1e293b;
	border-color: #334155;
	color: #94a3b8;
}
[data-color-mode="dark"] .gdconf-data-table-block .dt-paging-button:hover:not(.disabled) {
	background: #263348;
	border-color: #475569;
	color: #e2e8f0;
}
[data-color-mode="dark"] .gdconf-data-table-block .dt-paging-button.current {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

/* URL link */
[data-color-mode="dark"] .gdconf-dt-link {
	background: #1e3a5f;
	border-color: #1d4ed8;
	color: #93c5fd;
}
[data-color-mode="dark"] .gdconf-dt-link:hover {
	background: #1e40af;
	border-color: #3b82f6;
}

/* Badges — darken backgrounds slightly */

[data-color-mode="dark"] table.gdconf-dt tbody tr.gdconf-row--pinned   td { background: #292011 !important; }
[data-color-mode="dark"] table.gdconf-dt tbody tr.gdconf-row--featured td { background: var(--gcg-row-featured, #0f1b2e) !important; }

/* ── Row detail modal (shared .gdconf-cal-popup classes) ─────────────────────
   Defined here so the modal works even when the calendar block is absent.
   If the calendar block IS on the page its identical rules just cascade cleanly.
   ─────────────────────────────────────────────────────────────────────────── */

.gdconf-cal-popup {
	font-family: var(--gcg-font, inherit);
	/* Anchor the modal in em too (it sits at body level, outside the block), so its
	   text scales with the theme base font like the table. Children below are em. */
	font-size: 0.875em;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 8px)) scale(.97);
	width: min(500px, calc(100svw - 32px));
	max-height: min(90svh, 640px);
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 4px 6px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.18);
	opacity: 0;
	transition: opacity .18s ease, transform .18s cubic-bezier(.32,.72,0,1);
}
.gdconf-cal-popup[open] {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.gdconf-cal-popup.is-closing {
	opacity: 0;
	transform: translate(-50%, calc(-50% + 8px)) scale(.97);
}
.gdconf-cal-popup::backdrop {
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.gdconf-cal-popup__header {
	display: flex;
	/* Centre the title against the logo instead of top-aligning it: a short name
	   floating at the top of a taller logo read as misaligned. */
	align-items: center;
	gap: 12px;
	padding: 18px 18px 14px;
	border-bottom: 1px solid #e2e8f0;
}
/* Was a forced 38px square that letterboxed a wide logo down to a stamp. Now a
   cap the artwork sizes itself inside, like the table logo, so it reads at the
   size Pavol sees in the table rather than shrunk beside the name. */
.gdconf-cal-popup__logo {
	width: auto;
	height: auto;
	max-width: 64px;
	max-height: 56px;
	border-radius: 6px;
	flex-shrink: 0;
	margin-top: 2px;
}
.gdconf-cal-popup__header-text { flex: 1; min-width: 0; }
.gdconf-cal-popup__title {
	margin: 0;
	font-size: clamp(15px, 3.5cqw, 17px);
	font-weight: 700;
	color: #1e293b;
	line-height: 1.3;
}
.gdconf-cal-popup__close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	font-size: 1em;         /* 14px, parent popup is 14px */
	color: #64748b;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .12s, color .12s;
}
.gdconf-cal-popup__close:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

.gdconf-cal-popup__body {
	padding: 14px 18px 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.gdconf-cal-popup__row {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.929em;     /* 13px, parent popup is 14px */
	color: #1e293b;
	line-height: 1.5;
}
.gdconf-cal-popup__icon {
	flex-shrink: 0;
	font-size: 1.077em;     /* 14px, parent row is 13px */
	line-height: 1.5;
	width: 18px;
	text-align: center;
	color: var(--gcg-icon, #64748b);
}

.gdconf-cal-popup__badges { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 4px; }

.gdconf-cal-popup__desc {
	font-size: 0.929em;     /* 13px, parent popup is 14px */
	color: #475569;
	line-height: 1.6;
	padding: 8px 0 4px;
	border-top: 1px solid #f1f5f9;
	border-bottom: 1px solid #f1f5f9;
	margin: 2px 0;
}
[data-color-mode="dark"] .gdconf-cal-popup__desc {
	color: #94a3b8;
	border-color: #1e293b;
}

.gdconf-cal-popup__footer {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 12px 18px 18px;
	border-top: 1px solid #e2e8f0;
	margin-top: 6px;
}
.gdconf-cal-popup__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	padding: 0 16px;
	font-size: 0.929em;     /* 13px, parent popup is 14px */
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	transition: filter .12s;
	border: 1px solid transparent;
	white-space: nowrap;
}
.gdconf-cal-popup__btn--primary {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}
.gdconf-cal-popup__btn--primary:hover { filter: brightness(1.1); color: #fff; text-decoration: none; }

@media (max-width: 600px) {
	.gdconf-cal-popup {
		top: auto; bottom: 0; left: 0; right: 0;
		width: 100%; max-width: 100%; max-height: 90svh;
		border-radius: 20px 20px 0 0;
		transform: translateY(calc(100% + 8px));
		transition: opacity .22s ease, transform .28s cubic-bezier(.32,.72,0,1);
	}
	.gdconf-cal-popup[open] { transform: translateY(0); }
	.gdconf-cal-popup.is-closing { transform: translateY(100%); }
	.gdconf-cal-popup::before {
		content: '';
		display: block;
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: #e2e8f0;
		margin: 10px auto -4px;
	}
	.gdconf-cal-popup__footer { flex-direction: column; }
	.gdconf-cal-popup__btn { width: 100%; justify-content: center; }
}

/* Dark mode for modal */
[data-color-mode="dark"] .gdconf-cal-popup {
	background: #1e293b;
	border-color: #334155;
	color: #e2e8f0;
}
[data-color-mode="dark"] .gdconf-cal-popup__header,
[data-color-mode="dark"] .gdconf-cal-popup__footer { border-color: #334155; }
[data-color-mode="dark"] .gdconf-cal-popup__title { color: #e2e8f0; }
[data-color-mode="dark"] .gdconf-cal-popup__row   { color: #e2e8f0; }
[data-color-mode="dark"] .gdconf-cal-popup__close { background: #0f172a; border-color: #334155; color: #94a3b8; }
[data-color-mode="dark"] .gdconf-cal-popup__logo  { background: #0f172a; }

/* ── Calendar picker ─────────────────────────────────────────────────────── */

.gdconf-cal-picker {
	position: relative;
}

.gdconf-cal-picker__menu {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	min-width: 210px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.14);
	padding: 4px;
	z-index: 10;
}

.gdconf-cal-picker__opt {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 9px 12px;
	font-size: 0.929em;     /* 13px, parent popup is 14px */
	font-weight: 500;
	font-family: inherit;
	color: #1e293b;
	background: none;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	text-decoration: none;
	transition: background .12s;
	white-space: nowrap;
}
.gdconf-cal-picker__opt:hover {
	background: #f1f5f9;
	text-decoration: none;
	color: #1e293b;
}
.gdconf-cal-picker__opt span { font-size: 1.154em; flex-shrink: 0; }   /* 15px, parent opt is 13px */

[data-color-mode="dark"] .gdconf-cal-picker__menu {
	background: #1e293b;
	border-color: #334155;
}
[data-color-mode="dark"] .gdconf-cal-picker__opt { color: #e2e8f0; }
[data-color-mode="dark"] .gdconf-cal-picker__opt:hover { background: #263348; color: #e2e8f0; }

/* ── Notify-me / watch button ─────────────────────────────────────────────── */

/* "Add to Calendar" and "Notify me" are the same kind of action, so they share
   one secondary look; only "Website" stays the filled primary button. */
.gdconf-cal-popup__btn--ics,
.gdconf-cal-popup__btn--notify {
	background: #eceff3;
	border: 1px solid #dde3ec;
	color: #334155;
}
.gdconf-cal-popup__btn--ics:hover,
.gdconf-cal-popup__btn--notify:hover,
.gdconf-cal-popup__btn--notify.is-active {
	background: #e2e7ee;
	border-color: #cbd5e1;
	color: #1e293b;
}

.gdconf-cal-popup__btn--watching {
	background: #dcfce7;
	border: 1px solid transparent;
	color: #16a34a;
	cursor: default;
	font-size: 0.929em;     /* 13px, parent popup is 14px */
	padding: 7px 14px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.gdconf-watch-expand {
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	padding: 0 14px;
	background: #f8fafc;
	border: 1px solid transparent;
	border-radius: 8px;
	margin-top: 0;
	transition:
		max-height 220ms ease,
		opacity    180ms ease,
		padding    220ms ease,
		margin-top 220ms ease,
		border-color 220ms ease;
}
.gdconf-watch-expand.is-open {
	max-height: 140px;
	opacity: 1;
	padding: 12px 14px;
	margin-top: 8px;
	border-color: #e2e8f0;
}

.gdconf-watch-input-row {
	display: flex;
	gap: 8px;
}

.gdconf-watch-email {
	flex: 1;
	min-width: 0;
	font-size: 0.929em;     /* 13px, parent popup is 14px */
	padding: 7px 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	color: #1e293b;
	font-family: inherit;
}
.gdconf-watch-email:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.gdconf-watch-note {
	font-size: 0.786em;     /* 11px, parent popup is 14px */
	color: #94a3b8;
	margin: 0;
}

[data-color-mode="dark"] .gdconf-cal-popup__btn--ics,
[data-color-mode="dark"] .gdconf-cal-popup__btn--notify { background: #273345; border-color: #334155; color: #cbd5e1; }
[data-color-mode="dark"] .gdconf-cal-popup__btn--ics:hover,
[data-color-mode="dark"] .gdconf-cal-popup__btn--notify:hover,
[data-color-mode="dark"] .gdconf-cal-popup__btn--notify.is-active { background: #31405a; border-color: #475569; color: #e2e8f0; }
[data-color-mode="dark"] .gdconf-cal-popup__btn--watching { background: #14532d; color: #86efac; }
[data-color-mode="dark"] .gdconf-watch-expand.is-open { background: #1e293b; border-color: #334155; }
[data-color-mode="dark"] .gdconf-watch-email { background: #0f172a; border-color: #334155; color: #f1f5f9; }
[data-color-mode="dark"] .gdconf-watch-email:focus { border-color: #2563eb; }

@media (max-width: 540px) {
	.gdconf-watch-input-row { flex-direction: column; }
}

/* ── Editor placeholder ───────────────────────────────────────────────────── */

.gdconf-dt-editor-preview {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 28px;
	background: #f8fafc;
	border: 2px dashed #cbd5e1;
	border-radius: 10px;
	color: #475569;
}

.gdconf-dt-editor-icon .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
	color: #2563eb;
}

.gdconf-dt-editor-label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.gdconf-dt-editor-hint {
	margin-top: 4px;
	font-size: 12px;
	color: #94a3b8;
	font-weight: 400;
}

/* Dateless calendar icon used in popups (see ICON_CAL in view.js) */
.gdconf-ico {
	display: inline-block;
	vertical-align: -0.125em;
	color: var(--gcg-icon, #64748b);
}

/* === 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 (max-width: 640px) and (prefers-color-scheme: dark) {
		:root[data-color-mode="os-default"] .gdconf-data-table-block::after,
		:root:not([data-color-mode]) .gdconf-data-table-block::after {
		color: #475569;
		}
}

@media (prefers-color-scheme: dark) {
		:root[data-color-mode="os-default"] .gdconf-data-table-block,
		:root:not([data-color-mode]) .gdconf-data-table-block {
	color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-dt-filters,
		:root:not([data-color-mode]) .gdconf-dt-filters {
	background: #1e293b;
	border-color: #334155;
		}

		:root[data-color-mode="os-default"] .gdconf-dt-filter-item label,
		:root:not([data-color-mode]) .gdconf-dt-filter-item label {
	color: #94a3b8;
		}

		:root[data-color-mode="os-default"] .gdconf-dt-filter-select,
		:root:not([data-color-mode]) .gdconf-dt-filter-select,
		:root[data-color-mode="os-default"] .gdconf-dt-search,
		:root:not([data-color-mode]) .gdconf-dt-search {
	background: #0f172a;
	border-color: #475569;
	color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-dt-filter-select:focus,
		:root:not([data-color-mode]) .gdconf-dt-filter-select:focus,
		:root[data-color-mode="os-default"] .gdconf-dt-search:focus,
		:root:not([data-color-mode]) .gdconf-dt-search:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59,130,246,.2);
		}

		:root[data-color-mode="os-default"] .gdconf-dt-reset,
		:root:not([data-color-mode]) .gdconf-dt-reset {
	background: #1e293b;
	border-color: #475569;
	color: #94a3b8;
		}

		:root[data-color-mode="os-default"] .gdconf-dt-reset:hover,
		:root:not([data-color-mode]) .gdconf-dt-reset:hover {
	background: #450a0a;
	border-color: #7f1d1d;
	color: #fca5a5;
		}

		:root[data-color-mode="os-default"] .gdconf-dt-filter-toggle,
		:root:not([data-color-mode]) .gdconf-dt-filter-toggle {
	background: #1e293b;
	border-color: #334155;
	color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt,
		:root:not([data-color-mode]) table.gdconf-dt {
	background: #0f172a;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt thead th,
		:root:not([data-color-mode]) table.gdconf-dt thead th {
	background: #1e293b;
	color: #94a3b8;
	border-bottom-color: #334155 !important;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt thead th.dt-orderable-asc:hover,
		:root:not([data-color-mode]) table.gdconf-dt thead th.dt-orderable-asc:hover,
		:root[data-color-mode="os-default"] table.gdconf-dt thead th.dt-orderable-desc:hover,
		:root:not([data-color-mode]) table.gdconf-dt thead th.dt-orderable-desc:hover {
	background: #263348;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt thead th.dt-ordering-asc,
		:root:not([data-color-mode]) table.gdconf-dt thead th.dt-ordering-asc,
		:root[data-color-mode="os-default"] table.gdconf-dt thead th.dt-ordering-desc,
		:root:not([data-color-mode]) table.gdconf-dt thead th.dt-ordering-desc {
	color: #60a5fa;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt tbody td,
		:root:not([data-color-mode]) table.gdconf-dt tbody td {
	border-bottom-color: #1e293b !important;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt td,
		:root:not([data-color-mode]) table.gdconf-dt td {
	color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt tbody tr:nth-child(even) td,
		:root:not([data-color-mode]) table.gdconf-dt tbody tr:nth-child(even) td {
	background: #111827;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt tbody tr:hover td,
		:root:not([data-color-mode]) table.gdconf-dt tbody tr:hover td {
	background: #1e3a5f;
		}

		:root[data-color-mode="os-default"] .gdconf-data-table-block .dt-layout-row,
		:root:not([data-color-mode]) .gdconf-data-table-block .dt-layout-row {
	background: #1e293b;
	border-bottom-color: #334155;
		}

		:root[data-color-mode="os-default"] .gdconf-data-table-block .dt-layout-row:last-child,
		:root:not([data-color-mode]) .gdconf-data-table-block .dt-layout-row:last-child {
	border-top-color: #334155;
		}

		:root[data-color-mode="os-default"] .gdconf-data-table-block .dt-layout-row:has(.dt-layout-full),
		:root:not([data-color-mode]) .gdconf-data-table-block .dt-layout-row:has(.dt-layout-full) {
	background: none;
		}

		:root[data-color-mode="os-default"] .gdconf-data-table-block .dt-length label,
		:root:not([data-color-mode]) .gdconf-data-table-block .dt-length label {
	color: #94a3b8;
		}

		:root[data-color-mode="os-default"] .gdconf-data-table-block .dt-length select,
		:root:not([data-color-mode]) .gdconf-data-table-block .dt-length select {
	background-color: #0f172a;
	border-color: #475569;
	color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-data-table-block .dt-info,
		:root:not([data-color-mode]) .gdconf-data-table-block .dt-info {
	color: #475569;
		}

		:root[data-color-mode="os-default"] .gdconf-data-table-block .dt-paging-button,
		:root:not([data-color-mode]) .gdconf-data-table-block .dt-paging-button {
	background: #1e293b;
	border-color: #334155;
	color: #94a3b8;
		}

		:root[data-color-mode="os-default"] .gdconf-data-table-block .dt-paging-button:hover:not(.disabled),
		:root:not([data-color-mode]) .gdconf-data-table-block .dt-paging-button:hover:not(.disabled) {
	background: #263348;
	border-color: #475569;
	color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-data-table-block .dt-paging-button.current,
		:root:not([data-color-mode]) .gdconf-data-table-block .dt-paging-button.current {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
		}

		:root[data-color-mode="os-default"] .gdconf-dt-link,
		:root:not([data-color-mode]) .gdconf-dt-link {
	background: #1e3a5f;
	border-color: #1d4ed8;
	color: #93c5fd;
		}

		:root[data-color-mode="os-default"] .gdconf-dt-link:hover,
		:root:not([data-color-mode]) .gdconf-dt-link:hover {
	background: #1e40af;
	border-color: #3b82f6;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt tbody tr.gdconf-row--pinned   td,
		:root:not([data-color-mode]) table.gdconf-dt tbody tr.gdconf-row--pinned   td { background: #292011 !important;
		}

		:root[data-color-mode="os-default"] table.gdconf-dt tbody tr.gdconf-row--featured td,
		:root:not([data-color-mode]) table.gdconf-dt tbody tr.gdconf-row--featured td { background: var(--gcg-row-featured, #0f1b2e) !important;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup__desc,
		:root:not([data-color-mode]) .gdconf-cal-popup__desc {
	color: #94a3b8;
	border-color: #1e293b;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup,
		:root:not([data-color-mode]) .gdconf-cal-popup {
	background: #1e293b;
	border-color: #334155;
	color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup__header,
		:root:not([data-color-mode]) .gdconf-cal-popup__header,
		:root[data-color-mode="os-default"] .gdconf-cal-popup__footer,
		:root:not([data-color-mode]) .gdconf-cal-popup__footer { border-color: #334155;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup__title,
		:root:not([data-color-mode]) .gdconf-cal-popup__title { color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup__row,
		:root:not([data-color-mode]) .gdconf-cal-popup__row { color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup__close,
		:root:not([data-color-mode]) .gdconf-cal-popup__close { background: #0f172a; border-color: #334155; color: #94a3b8;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup__logo,
		:root:not([data-color-mode]) .gdconf-cal-popup__logo { background: #0f172a;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-picker__menu,
		:root:not([data-color-mode]) .gdconf-cal-picker__menu {
	background: #1e293b;
	border-color: #334155;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-picker__opt,
		:root:not([data-color-mode]) .gdconf-cal-picker__opt { color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-picker__opt:hover,
		:root:not([data-color-mode]) .gdconf-cal-picker__opt:hover { background: #263348; color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup__btn--ics,
		:root:not([data-color-mode]) .gdconf-cal-popup__btn--ics,
		:root[data-color-mode="os-default"] .gdconf-cal-popup__btn--notify,
		:root:not([data-color-mode]) .gdconf-cal-popup__btn--notify { background: #273345; border-color: #334155; color: #cbd5e1;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup__btn--ics:hover,
		:root:not([data-color-mode]) .gdconf-cal-popup__btn--ics:hover,
		:root[data-color-mode="os-default"] .gdconf-cal-popup__btn--notify:hover,
		:root:not([data-color-mode]) .gdconf-cal-popup__btn--notify:hover,
		:root[data-color-mode="os-default"] .gdconf-cal-popup__btn--notify.is-active,
		:root:not([data-color-mode]) .gdconf-cal-popup__btn--notify.is-active { background: #31405a; border-color: #475569; color: #e2e8f0;
		}

		:root[data-color-mode="os-default"] .gdconf-cal-popup__btn--watching,
		:root:not([data-color-mode]) .gdconf-cal-popup__btn--watching { background: #14532d; color: #86efac;
		}

		:root[data-color-mode="os-default"] .gdconf-watch-expand.is-open,
		:root:not([data-color-mode]) .gdconf-watch-expand.is-open { background: #1e293b; border-color: #334155;
		}

		:root[data-color-mode="os-default"] .gdconf-watch-email,
		:root:not([data-color-mode]) .gdconf-watch-email { background: #0f172a; border-color: #334155; color: #f1f5f9;
		}

		:root[data-color-mode="os-default"] .gdconf-watch-email:focus,
		:root:not([data-color-mode]) .gdconf-watch-email:focus { border-color: #2563eb;
		}
}