/* ============================================================
   table-redesign-test.css  —  TEST OVERRIDE (1a "Finomított mátrix")
   ------------------------------------------------------------
   Loaded AFTER components.css in _head.php; overrides ONLY the
   visual look of .specs-table. Touches no positioning/JS hooks
   (position, left, z-index, sticky, min-width stay inherited),
   so filters, sticky columns and scroll-fades keep working.
   TO REVERT: remove the <link> for this file in
   hu/includes/_head.php (and delete this file). Nothing else.
   Source: Claude Design "Arizona table redesign", variant 1a.
   ============================================================ */

/* New tones from the mockup that have no site variable yet.
   All removable with this file. On-brand tones reuse existing
   :root vars (--accent-blue, --text-*, --radius, --bg-*). */
:root {
	--tbl-card-border: #e7e9ee;   /* card outline           */
	--tbl-hairline:    #eef0f3;   /* row separators         */
	--tbl-band-bg:     #f7f8fa;   /* group band background  */
	--tbl-head-label:  #98a1af;   /* header label (uppercase) */
	--tbl-dash:        #c9ced6;   /* incompatible "–" cells */
	--tbl-frozen-shadow: rgba(20, 25, 40, 0.16); /* frozen-column edge */
}

/* ── Card wrapper: white rounded card, hairline outline ── */
.specs-scroll-inner {
	background: var(--bg-white);
	border: 1px solid var(--tbl-card-border);
	border-radius: var(--radius);
}

/* ── Table: strip the full-grid borders ── */
.specs-table {
	border: none;
}
.specs-table th,
.specs-table td {
	border: none;                 /* remove vertical + full borders   */
	border-top: 1px solid var(--tbl-hairline);  /* horizontal lines only */
	padding: 11px 16px;
}

/* ── Header: light, borderless, uppercase label style ── */
.specs-th-model,
.specs-th-axis,
.specs-th-name {
	background: var(--bg-white);
	color: var(--text-primary);
	border-top: none;
}

/* Header cells: share ONE baseline so the small uppercase label
   ("Vezérlő", 0.75rem) sits on the same line as the larger model names
   ("RC800-A", 0.9375rem). Uses `thead th` (specificity 0,0,1,2) so it
   outranks both base ".specs-table th,td{vertical-align:middle}" and the
   controller's ".specs-table--fixed th,td{vertical-align:top}" (both
   0,0,1,1) — that top-align was the real cause of the misalignment. */
.specs-table thead th {
	vertical-align: baseline;
}
/* Exception: when the header is two lines tall (stacked axis label over
   the model name, i.e. the GX1 table with .specs-th-group), baseline
   pins "Modell" to the top line. Center it vertically instead. Scoped
   via :has() so it only touches stacked headers — the controller and
   single-line headers keep their baseline alignment. */
.specs-table thead tr:has(.specs-th-group) .specs-th-model {
	vertical-align: middle;
}
.specs-th-model {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tbl-head-label);
	text-align: left;
}
.specs-th-name {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--text-primary);
}
.specs-th-axis {
	color: var(--text-muted);
	font-weight: 600;
}
/* drop the white divider between axis groups (no dark header now) */
.specs-th-axis + .specs-th-axis {
	border-left: none;
}

/* ── TRUE section band (full-width header, e.g. RC+ "Programozás"):
   quiet uppercase strip. Only the full-width labels get this. ── */
.specs-table td.specs-label {
	background: var(--tbl-band-bg);
	color: var(--text-secondary);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding-top: 9px;
	padding-bottom: 9px;
}
.specs-label-fill {
	background: var(--tbl-band-bg);
}

/* ── Single-value spec rows (label spans only the 2 label columns,
   colspan="2", data follows): these are NOT section headers, so the
   first column must match a normal spec label (.specs-cat), not the
   band. e.g. Sztenderd ciklusidő, Berakó erő, Környezet. ── */
.specs-table td.specs-label[colspan="2"] {
	background: var(--bg-white);
	color: var(--text-primary);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* ── First column (spec group) + sub column: clean, quiet ── */
.specs-cat {
	background: var(--bg-white);
	font-weight: 500;
	font-size: 0.8125rem;
	padding: 8px 16px;
}
/* Links anywhere inside a spec table (label column AND data cells,
   e.g. the controller "Robot szoftver verziója" RC+ links): blue, no
   underline, and unchanged after visiting — matches the 1a sample. */
.specs-table a,
.specs-table a:visited,
.specs-table a:hover,
.specs-table a:focus {
	color: var(--accent-blue);
	text-decoration: none;
}
.specs-sub {
	background: var(--bg-white);
	font-weight: 500;
}

/* stacked axis-group label above each model name (light header) */
.specs-th-group {
	color: var(--text-muted);
}

/* ── Data cells: light weight, calm text ── */
.specs-table td:not(.specs-cat):not(.specs-sub):not(.specs-label) {
	color: var(--text-primary);
	font-weight: 300;
}

/* First data row under a header has no band above it — soften the
   top hairline against the rounded corner */
.specs-table thead th {
	border-top: none;
}

/* ── Frozen-column scroll shadow (option A) ──────────────────────────
   A soft shadow on the right edge of the frozen label column, shown ONLY
   once the table is scrolled sideways (.tbl-scrolled toggled by
   js/table-redesign-test.js). Applied to every sticky-left cell; the
   interior one (.specs-cat) is covered by the opaque .specs-sub beside
   it, so only the frozen region's true right edge casts a visible shadow.
   Desktop only — on mobile the columns aren't frozen (whole table scrolls). */
@media (min-width: 769px) {
	.specs-cat,
	.specs-sub,
	.specs-table td.specs-label[colspan="2"],
	.specs-th-model {
		transition: box-shadow 0.18s ease;
	}
	.specs-scroll-inner.tbl-scrolled .specs-cat,
	.specs-scroll-inner.tbl-scrolled .specs-sub,
	.specs-scroll-inner.tbl-scrolled td.specs-label[colspan="2"],
	.specs-scroll-inner.tbl-scrolled .specs-th-model {
		box-shadow: 8px 0 12px -8px var(--tbl-frozen-shadow);
	}
}
@media (prefers-reduced-motion: reduce) {
	.specs-cat,
	.specs-sub,
	.specs-table td.specs-label[colspan="2"],
	.specs-th-model {
		transition: none;
	}
}