/**
 * Povinné zverejňovanie — frontend
 *
 * Vizuál podľa design systému VisitBratislava:
 *   - Space Grotesk (nadpisy, čísla, sumy) + Inter (text)
 *   - pill ovládacie prvky vysoké 48 px, rámčeky 1,5 px, karty s rohmi 12 px
 *   - farby výhradne cez tokeny
 *
 * Rozloženie podľa visitkosice.org/dokumenty: filtre nad tabuľkou,
 * zoraďovateľné hlavičky, päta s počtom riadkov a stránkovaním.
 * Každý riadok tabuľky má jednu linku — dlhší text sa skráti na „…".
 *
 * Responzívnosť: flex-wrap, auto-fit mriežky a container queries — žiadne
 * media queries (okrem prefers-reduced-motion). Tabuľka sa mení na karty
 * podľa šírky sekcie, nie okna, takže funguje aj v užšom stĺpci šablóny.
 *
 * NAPOJENIE NA TÉMU
 * -----------------
 * Každá hodnota je `var(<token design systému>, fallback)`. Ak téma definuje
 * tokeny VisitBratislava (--brand, --text, --border, --font-heading…),
 * prevezmú sa automaticky. Fallbacky sú hodnoty z design systému, takže
 * sekcia vyzerá správne aj v téme, ktorá tokeny nedefinuje.
 * Fonty načítava téma, nie tento súbor.
 *
 * JEDNOTKY
 * --------
 * Žiadne `rem`. Téma VisitBratislava nastavuje `html { font-size: 10px }`
 * (Tailwind), takže `1rem` je 10 px, nie 16 px — šírky stĺpcov by boli o 38 %
 * užšie a hlavičky by sa skracovali. Rozmery sú v px, typografia cez tokeny.
 * Platí to aj pre container queries: `rem` sa v nich počíta z koreňa dokumentu.
 */

.btb-pz {
	/* --- Farby ------------------------------------------------------- */
	--pz-brand:         var(--brand, #b3000c);
	--pz-brand-hover:   var(--brand-hover, #8f0009);
	--pz-brand-ink:     var(--brand-ink, #b3000c);
	--pz-on-brand:      var(--text-on-brand, #ffffff);

	--pz-ink:           var(--text, #141414);
	--pz-ink-2:         var(--ink-700, #3a3a3a);
	/* Sivý text len na bielej (4,5 : 1). Na sivom pozadí má 4,1 : 1 — tam ink-2. */
	--pz-muted:         var(--text-muted, #767676);

	--pz-surface:       var(--surface-card, #ffffff);
	--pz-sunken:        var(--surface-sunken, #f4f4f4);
	--pz-tint:          var(--surface-muted, #e4e5f4);

	--pz-border:        var(--border, #d6d6d6);
	--pz-border-strong: var(--border-strong, #141414);
	--pz-focus:         var(--focus, #1a5fb4);

	--pz-warn-bg:       var(--red-100, #f7dcdd);
	--pz-warn-ink:      var(--red-700, #8f0009);

	/* --- Typografia -------------------------------------------------- */
	--pz-font-heading:  var(--font-heading, "Space Grotesk", -apple-system, "Segoe UI", sans-serif);
	--pz-font-body:     var(--font-body, "Inter", -apple-system, "Segoe UI", Roboto, sans-serif);

	--pz-text-overline: var(--text-overline-size, 12px);
	--pz-text-caption:  var(--text-caption-size, 13px);
	--pz-text-s:        var(--text-body-s-size, 14px);
	--pz-text-m:        var(--text-body-m-size, 16px);
	--pz-text-ui:       15px;

	/*
	 * Prehľad aj detail záznamu majú dve úrovne písma, bez výnimiek
	 * (feedback BTB 16. 10. 2026):
	 *   hodnota — 15 px, Inter, normálna hrúbka (číslo, suma, dodávateľ, popis…)
	 *   štítok  — 13 px, Inter, polotučné (hlavičky stĺpcov, nadpisy kariet, popisky polí)
	 * Tučné sú len nadpisy (názov záznamu) a ovládacie prvky.
	 */
	--pz-text-value:    var(--pz-text-ui);
	--pz-text-label:    var(--pz-text-caption);
	--pz-weight-value:  400;
	--pz-weight-label:  600;
	--pz-text-title:    var(--text-h4-size, clamp(22px, 2.4vw, 28px));

	/* --- Tvary ------------------------------------------------------- */
	--pz-radius-sm:     var(--radius-sm, 4px);
	--pz-radius-card:   var(--radius-card, 12px);
	--pz-radius-pill:   var(--radius-pill, 999px);
	--pz-shadow-1:      var(--shadow-1, 0 1px 2px rgb(20 20 20 / 0.08));
	--pz-line:          1.5px;

	--pz-control:       48px;
	--pz-control-sm:    40px;
	--pz-ease:          .16s ease;

	container: pz / inline-size;

	color: var(--pz-ink);
	font-family: var(--pz-font-body);
	font-size: var(--pz-text-m);
	line-height: 1.5;
}

.btb-pz *,
.btb-pz *::before,
.btb-pz *::after {
	box-sizing: border-box;
}

.btb-pz__icon {
	flex: none;
	width: 1.125em;
	height: 1.125em;
}

/* ====================================================================
   Záložky sekcií — segmentový prepínač cez celú šírku
   ==================================================================== */

.btb-pz__tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 6px;
	margin-bottom: clamp(24px, 3vw, 40px);
	padding: 4px;
	background: var(--pz-sunken);
	border-radius: var(--pz-radius-pill);
}

.btb-pz__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	font-size: var(--pz-text-ui);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--pz-ink-2);
	text-decoration: none;
	border-radius: var(--pz-radius-pill);
	transition: background-color var(--pz-ease), color var(--pz-ease);
}

.btb-pz__tab:hover {
	color: var(--pz-ink);
}

.btb-pz__tab[aria-current="page"] {
	color: var(--pz-ink);
	background: var(--pz-surface);
	box-shadow: var(--pz-shadow-1);
}

/* ====================================================================
   Filtre
   ==================================================================== */

.btb-pz__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 12px;
	margin-bottom: 20px;
}

.btb-pz__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.btb-pz__field--search { flex: 3 1 288px; }
.btb-pz__field--date   { flex: 1 1 152px; }
.btb-pz__field--sort   { flex: 1.6 1 192px; }

.btb-pz__field label {
	font-size: var(--pz-text-label);
	font-weight: var(--pz-weight-label);
	line-height: 18px;
	color: var(--pz-ink-2);
}

.btb-pz__control {
	width: 100%;
	min-height: var(--pz-control);
	padding: 0 18px;
	font: inherit;
	font-size: var(--pz-text-ui);
	color: var(--pz-ink);
	background: var(--pz-surface);
	border: var(--pz-line) solid var(--pz-border);
	border-radius: var(--pz-radius-pill);
	transition: border-color var(--pz-ease), box-shadow var(--pz-ease);
}

.btb-pz__control:hover {
	border-color: var(--pz-ink-2);
}

.btb-pz__control:focus,
.btb-pz__control:focus-within {
	border-color: var(--pz-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pz-focus) 20%, transparent);
	outline: none;
}

/* Vyhľadávanie — ikona v poli, ako v MICE tabuľke kapacít */
.btb-pz__control--search {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--pz-muted);
}

.btb-pz__control--search input {
	flex: 1;
	min-width: 0;
	height: calc(var(--pz-control) - 2 * var(--pz-line));
	padding: 0;
	font: inherit;
	color: var(--pz-ink);
	background: none;
	border: 0;
	outline: none;
}

.btb-pz__control--search input::placeholder {
	color: var(--pz-muted);
	opacity: 1;
}

/* Šípka výberu kreslená gradientom — preberá farbu textu, žiadna farba natvrdo. */
.btb-pz__control--select {
	appearance: none;
	padding-right: 42px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 22px) 50%,
		calc(100% - 17px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.btb-pz__control--sm {
	min-height: var(--pz-control-sm);
	padding-left: 14px;
	font-size: var(--pz-text-s);
}

input[type="date"].btb-pz__control {
	font-variant-numeric: tabular-nums;
}

.btb-pz__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	min-height: var(--pz-control);
}

/* ====================================================================
   Tlačidlá a odkazy
   ==================================================================== */

.btb-pz__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--pz-control);
	padding: 0 28px;
	font-family: var(--pz-font-body);
	font-size: var(--pz-text-ui);
	font-weight: 600;
	line-height: 1;
	color: var(--pz-on-brand);
	background: var(--pz-brand);
	border: 2px solid transparent;
	border-radius: var(--pz-radius-pill);
	cursor: pointer;
	transition: background-color var(--pz-ease), color var(--pz-ease), border-color var(--pz-ease);
}

.btb-pz__btn:hover {
	background: var(--pz-brand-hover);
}

.btb-pz__btn--outline {
	color: var(--pz-ink);
	background: transparent;
	border-color: var(--pz-border-strong);
}

.btb-pz__btn--outline:hover {
	color: var(--pz-surface);
	background: var(--pz-ink);
}

.btb-pz__btn--sm {
	min-height: var(--pz-control-sm);
	padding: 0 18px;
	font-size: var(--pz-text-s);
}

.btb-pz__textlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--pz-text-ui);
	font-weight: 600;
	color: var(--pz-brand-ink);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	text-decoration-color: color-mix(in srgb, var(--pz-brand-ink) 35%, transparent);
	transition: text-decoration-color var(--pz-ease);
}

.btb-pz__textlink:hover {
	text-decoration-color: var(--pz-brand-ink);
}

/* ====================================================================
   Tabuľka
   ==================================================================== */

.btb-pz__box {
	background: var(--pz-surface);
	border: var(--pz-line) solid var(--pz-border);
	border-radius: var(--pz-radius-card);
	overflow: hidden;
}

.btb-pz__scroll {
	overflow-x: auto;
}

/*
 * Pevné rozloženie: šírky stĺpcov určuje hlavička, nie obsah. Bez toho by sa
 * bunky roztiahli podľa najdlhšieho textu a skrátenie na „…" by nefungovalo.
 */
.btb-pz__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: var(--pz-text-value);
	line-height: 22px;
}

.btb-pz__table thead tr {
	background: var(--pz-sunken);
}

.btb-pz__table thead th {
	padding: 0;
	text-align: left;
	vertical-align: bottom;
	font-size: var(--pz-text-label);
	font-weight: var(--pz-weight-label);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pz-ink-2);
	white-space: nowrap;
	border-bottom: var(--pz-line) solid var(--pz-border);
}

.btb-pz__th-label {
	display: block;
	min-width: 0;
	padding: 13px 16px;
	line-height: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Celá bunka hlavičky je cieľ radenia */
.btb-pz__sort {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	min-height: 44px;
	padding-right: 12px;
	color: inherit;
	text-decoration: none;
	transition: color var(--pz-ease), background-color var(--pz-ease);
}

.btb-pz__sort .btb-pz__th-label {
	padding-right: 0;
}

.btb-pz__sort:hover {
	color: var(--pz-ink);
	background: color-mix(in srgb, var(--pz-ink) 4%, transparent);
}

.btb-pz__sort .btb-pz__icon {
	width: 15px;
	height: 15px;
	opacity: 0;
	transition: opacity var(--pz-ease), transform var(--pz-ease);
}

.btb-pz__sort:hover .btb-pz__icon {
	opacity: .45;
}

th.is-sorted .btb-pz__sort {
	color: var(--pz-ink);
}

th.is-sorted .btb-pz__icon {
	opacity: 1;
}

th.is-asc .btb-pz__icon {
	transform: rotate(180deg);
}

/* Jeden riadok na záznam — čo sa nezmestí, skončí „…" */
.btb-pz__table tbody th,
.btb-pz__table tbody td {
	height: 50px;
	padding: 0 16px;
	text-align: left;
	vertical-align: middle;
	font-weight: var(--pz-weight-value);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: 1px solid var(--pz-border);
}

.btb-pz__cell {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.btb-pz__table tbody tr:last-child > * {
	border-bottom: 0;
}

.btb-pz__table tbody tr {
	transition: background-color .12s ease;
}

.btb-pz__table tbody tr:hover {
	background: var(--pz-sunken);
}

/*
 * Šírky stĺpcov — popis dostane, čo zvýši. Pri table-layout: fixed ich
 * určuje hlavička, preto sú len na `thead` a nezasahujú do kariet.
 */

.btb-pz__table thead .btb-pz__col-number   { width: 136px; }
.btb-pz__table thead .btb-pz__col-supplier { width: 22%; }
.btb-pz__table thead .btb-pz__col-amount   { width: 152px; }
.btb-pz__table thead .btb-pz__col-date     { width: 208px; }
.btb-pz__table thead .btb-pz__col-document { width: 104px; }

.btb-pz__col-supplier,
.btb-pz__col-date {
	color: var(--pz-ink-2);
}

.btb-pz__col-amount,
.btb-pz__col-date {
	font-variant-numeric: tabular-nums;
}

.btb-pz__table .btb-pz__col-amount {
	text-align: right;
}

.btb-pz__table thead .btb-pz__col-amount .btb-pz__sort {
	flex-direction: row-reverse;
	padding-right: 0;
	padding-left: 12px;
}

.btb-pz__table thead .btb-pz__col-amount .btb-pz__th-label {
	padding-left: 0;
	padding-right: 16px;
}

.btb-pz__table .btb-pz__col-document {
	text-align: center;
}

.btb-pz__table thead .btb-pz__col-document .btb-pz__th-label {
	padding-inline: 8px;
}

/* Číslo záznamu — hlavný preklik na detail */
.btb-pz__id {
	font-variant-numeric: tabular-nums;
	color: var(--pz-brand-ink);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	text-decoration-color: color-mix(in srgb, var(--pz-brand-ink) 35%, transparent);
	transition: text-decoration-color var(--pz-ease);
}

.btb-pz__id:hover {
	text-decoration-color: var(--pz-brand-ink);
}

.btb-pz__doc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	vertical-align: middle;
	color: var(--pz-ink);
	border: var(--pz-line) solid var(--pz-border);
	border-radius: var(--pz-radius-pill);
	transition: border-color var(--pz-ease), background-color var(--pz-ease);
}

.btb-pz__doc:hover {
	border-color: var(--pz-ink);
	background: var(--pz-surface);
}

.btb-pz__doc .btb-pz__icon {
	width: 16px;
	height: 16px;
}

.btb-pz__nil {
	color: var(--pz-muted);
}

.btb-pz__badge {
	display: inline-block;
	margin-right: 8px;
	padding: 3px 6px;
	font-family: var(--pz-font-body);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .03em;
	text-transform: uppercase;
	vertical-align: 2px;
	color: var(--pz-warn-ink);
	background: var(--pz-warn-bg);
	border-radius: var(--pz-radius-sm);
}

.btb-pz__table tr.is-cancelled .btb-pz__col-description,
.btb-pz__table tr.is-cancelled .btb-pz__col-amount {
	color: var(--pz-ink-2);
}

/* ====================================================================
   Päta tabuľky — počet riadkov, rozsah, stránkovanie
   ==================================================================== */

.btb-pz__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding: 12px 16px;
	border-top: var(--pz-line) solid var(--pz-border);
}

.btb-pz__perpage {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.btb-pz__perpage label {
	font-size: var(--pz-text-s);
	color: var(--pz-ink-2);
	white-space: nowrap;
}

.btb-pz__perpage .btb-pz__control {
	width: auto;
}

/* So skriptom sa výber odošle sám — tlačidlo ostáva len pre prehliadač bez JS. */
.btb-pz__perpage.is-auto .btb-pz__btn {
	display: none;
}

.btb-pz__range {
	margin: 0 0 0 auto;
	font-size: var(--pz-text-s);
	color: var(--pz-ink-2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.btb-pz__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.btb-pz__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	font-family: var(--pz-font-heading);
	font-size: var(--pz-text-ui);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--pz-ink);
	text-decoration: none;
	border-radius: var(--pz-radius-pill);
	transition: background-color var(--pz-ease), color var(--pz-ease);
}

a.btb-pz__page:hover {
	background: var(--pz-sunken);
}

.btb-pz__page.is-current {
	color: var(--pz-surface);
	background: var(--pz-ink);
}

.btb-pz__page--arrow {
	border: var(--pz-line) solid var(--pz-border);
}

a.btb-pz__page--arrow:hover {
	border-color: var(--pz-ink);
	background: none;
}

.btb-pz__page--arrow.is-disabled {
	color: var(--pz-muted);
	opacity: .45;
}

.btb-pz__page--gap {
	min-width: 24px;
	padding: 0;
	color: var(--pz-muted);
}

/* ====================================================================
   Prázdny stav, archív, obsahové bloky
   ==================================================================== */

.btb-pz__empty {
	padding: clamp(40px, 6vw, 72px) 24px;
	text-align: center;
	font-size: var(--pz-text-ui);
	color: var(--pz-muted);
}

.btb-pz__empty p {
	margin: 0;
}

.btb-pz__empty-title {
	margin-bottom: 8px !important;
	font-family: var(--pz-font-heading);
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--pz-ink);
}

.btb-pz__archive,
.btb-pz__content {
	padding: clamp(20px, 2.4vw, 28px);
	font-size: var(--pz-text-ui);
	line-height: 1.6;
	background: var(--pz-tint);
	border-radius: var(--pz-radius-card);
}

.btb-pz__archive {
	margin-top: 24px;
}

.btb-pz__archive > :first-child {
	margin-top: 0;
}

.btb-pz__archive > :last-child {
	margin-bottom: 0;
}

/* Zmluvy — súvislý text na čítanie, nie popisok: väčšie písmo, vzdušnejšie
   riadky a zreteľné odstupy medzi odsekmi. */
.btb-pz__content {
	padding: clamp(24px, 3.2vw, 40px);
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.7;
	color: var(--pz-ink);
}

.btb-pz__content > * {
	max-width: 760px;
	margin-top: 0;
	margin-bottom: 0;
}

.btb-pz__content > * + * {
	margin-top: clamp(16px, 2vw, 24px);
}

.btb-pz__archive a,
.btb-pz__content a {
	font-weight: 600;
	color: var(--pz-brand-ink);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

/* ====================================================================
   Detail záznamu
   ==================================================================== */

.btb-pz__back {
	margin: 0 0 16px;
}

.btb-pz__back .btb-pz__textlink {
	min-height: 44px;
}

.btb-pz__detail-title {
	margin: 0 0 24px;
	font-family: var(--pz-font-heading);
	font-size: var(--pz-text-title);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--pz-ink);
}

.btb-pz__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
	gap: 16px;
	align-items: start;
}

.btb-pz__card {
	min-width: 0;
	padding: clamp(20px, 2.2vw, 28px);
	font-size: var(--pz-text-value);
	font-weight: var(--pz-weight-value);
	line-height: 1.6;
	background: var(--pz-surface);
	border: var(--pz-line) solid var(--pz-border);
	border-radius: var(--pz-radius-card);
}

.btb-pz__card h3 {
	margin: 0 0 12px;
	font-family: var(--pz-font-body);
	font-size: var(--pz-text-label);
	font-weight: var(--pz-weight-label);
	line-height: 18px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pz-brand-ink);
}

.btb-pz__card h4 {
	margin: 20px 0 6px;
	font-size: var(--pz-text-label);
	font-weight: var(--pz-weight-label);
	color: var(--pz-ink-2);
}

.btb-pz__card p {
	margin: 0;
}

.btb-pz__approvers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.btb-pz__approvers li + li {
	margin-top: 8px;
}

.btb-pz__approvers span {
	display: block;
	color: var(--pz-ink-2);
}

.btb-pz__dl {
	margin: 0;
}

.btb-pz__dl dt {
	margin-top: 14px;
	font-size: var(--pz-text-label);
	font-weight: var(--pz-weight-label);
	color: var(--pz-ink-2);
}

.btb-pz__dl dt:first-child {
	margin-top: 0;
}

.btb-pz__dl dd {
	margin: 2px 0 0;
}

.btb-pz__dd-amount {
	font-variant-numeric: tabular-nums;
}

.btb-pz__notice {
	margin: 0 0 20px;
	padding: 12px 18px;
	font-size: var(--pz-text-ui);
	font-weight: 600;
	color: var(--pz-warn-ink);
	background: var(--pz-warn-bg);
	border-radius: var(--pz-radius-card);
}

.btb-pz__attachment {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding: 12px 16px;
	font-weight: 600;
	color: var(--pz-ink);
	text-decoration: none;
	border: var(--pz-line) solid var(--pz-border);
	border-radius: var(--pz-radius-card);
	transition: border-color var(--pz-ease);
}

.btb-pz__attachment:hover {
	border-color: var(--pz-ink);
}

.btb-pz__attachment .btb-pz__icon {
	width: 22px;
	height: 22px;
	color: var(--pz-brand-ink);
}

.btb-pz__attachment-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.btb-pz__attachment-text small {
	font-size: var(--pz-text-caption);
	font-weight: 400;
	color: var(--pz-muted);
}

/* ====================================================================
   Prístupnosť
   ==================================================================== */

.btb-pz :focus-visible {
	outline: 3px solid var(--pz-focus);
	outline-offset: 3px;
	border-radius: 2px;
}

.btb-pz .btb-pz__control :focus-visible {
	outline: none;
}

/* Bunky orezávajú obsah — obrys fokusu odkazu v tabuľke kreslíme dovnútra. */
.btb-pz__table tbody :focus-visible {
	outline-offset: -3px;
}

/* Trieda z jadra WP — dopĺňame ju, aby sekcia nezávisela od témy. */
.btb-pz .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.btb-pz * {
		transition: none !important;
	}
}

/* ====================================================================
   Stredný kontajner — tabuľka sa mení na karty
   Pri pevných stĺpcoch by pod touto šírkou ostal popisu len úzky pruh.
   Container query, nie media query: reaguje na šírku sekcie.
   ==================================================================== */

@container pz (max-width: 1024px) {

	.btb-pz__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.btb-pz__table,
	.btb-pz__table tbody {
		display: block;
	}

	/* Karta: číslo a suma v hlavičke, zvyšok ako riadky „štítok — hodnota". */
	.btb-pz__table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 6px 16px;
		padding: 16px;
		border-bottom: 1px solid var(--pz-border);
	}

	.btb-pz__table tbody tr:last-child {
		border-bottom: 0;
	}

	.btb-pz__table tbody tr:hover {
		background: none;
	}

	.btb-pz__table tbody th,
	.btb-pz__table tbody td {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		align-items: center;
		gap: 12px;
		grid-column: 1 / -1;
		width: auto;
		height: auto;
		min-width: 0;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.btb-pz__table tbody td::before {
		content: attr(data-label);
		font-size: var(--pz-text-label);
		font-weight: var(--pz-weight-label);
		line-height: 22px;
		color: var(--pz-muted);
	}

	.btb-pz__table tbody .btb-pz__col-number {
		display: block;
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 6px;
	}

	.btb-pz__table tbody .btb-pz__col-amount {
		display: block;
		grid-column: 2;
		grid-row: 1;
		text-align: right;
	}

	.btb-pz__table tbody .btb-pz__col-amount::before {
		content: none;
	}

	.btb-pz__table tbody .btb-pz__col-document {
		justify-items: start;
		text-align: left;
	}

	/* Riadok „Dokument" bez prílohy je na karte len šum. */
	.btb-pz__table tbody .btb-pz__col-document:has(.btb-pz__nil) {
		display: none;
	}
}

/* ====================================================================
   Úzky kontajner — mobil
   ==================================================================== */

@container pz (max-width: 640px) {

	/* Štyri záložky sa vedľa seba nezmestia — mriežka 2 × 2. */
	.btb-pz__tabs {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
		border-radius: var(--pz-radius-card);
	}

	.btb-pz__tab {
		padding-inline: 8px;
		border-radius: calc(var(--pz-radius-card) - 4px);
	}

	.btb-pz__actions,
	.btb-pz__actions .btb-pz__btn {
		width: 100%;
	}

	.btb-pz__foot {
		gap: 12px;
	}

	.btb-pz__range {
		margin-left: 0;
	}

	.btb-pz__pages {
		width: 100%;
	}
}


/* ====================================================================
   Šablóna stránky „Povinné zverejňovanie (celá šírka)"
   Obal obsahu, keď stránka používa šablónu pluginu namiesto šablóny
   témy. Hlavičku a pätu dáva téma; toto je len stredná časť — bez
   úzkeho stĺpca a bez štýlov, ktoré téma vnucuje odkazom v texte.
   Šírka kontajnera je rovnaká ako široké bloky témy (1256 px).
   ==================================================================== */

.btb-pz-page {
	background: var(--surface-page, #ffffff);
	color: var(--text, #141414);
	font-family: var(--font-body, "Inter", -apple-system, "Segoe UI", Roboto, sans-serif);
	font-size: 16px;
	line-height: 1.5;
}

.btb-pz-page__inner {
	width: min(100% - 32px, 1256px);
	margin-inline: auto;
	padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 96px);
}

.btb-pz-page__title {
	margin: 0 0 clamp(20px, 3vw, 32px);
	font-family: var(--font-heading, "Space Grotesk", -apple-system, "Segoe UI", sans-serif);
	font-size: var(--text-h1-size, clamp(36px, 5vw, 56px));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--text, #141414);
}

/* Text stránky pred/za shortcodom — bežný odsek, nie prose obal témy. */
.btb-pz-page__content > p {
	max-width: 70ch;
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.6;
}

.btb-pz-page__content > p a {
	color: var(--pz-page-link, var(--brand, #b3000c));
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Viac záznamov s rovnakým číslom v jednom detaile. */
.btb-pz__record + .btb-pz__record {
	margin-top: clamp(32px, 4vw, 56px);
	padding-top: clamp(32px, 4vw, 56px);
	border-top: var(--pz-line) solid var(--pz-border);
}


/* ====================================================================
   Sekcia B2B (Professional) — modrá namiesto červenej
   Triedy .btb-pz--b2b a .btb-pz-page--b2b pridáva PHP, keď téma hlási
   B2B sekciu (BTB_PZ_Frontend::is_b2b()). Odtiene sú tie, ktorými téma
   prefarbuje B2B: tmavá modrá #005f88 pre text, tlačidlá a odkazy
   (6,6 : 1 na bielej, biely text na nej tiež), na plochy štítkov svetlá
   modrá #e3f4fd — svetlá #9ddcf9 z témy by s textom nemala kontrast.
   Tokeny --b2b-* téma zatiaľ nedefinuje; keď ich zavedie, prevezmú sa.
   ==================================================================== */

.btb-pz--b2b {
	--pz-brand:       var(--b2b-brand, #005f88);
	--pz-brand-hover: var(--b2b-brand-hover, #00435f);
	--pz-brand-ink:   var(--b2b-brand-ink, #005f88);
	--pz-on-brand:    var(--b2b-text-on-brand, #ffffff);
	--pz-warn-bg:     var(--b2b-tint, #e3f4fd);
	--pz-warn-ink:    var(--b2b-brand-ink, #005f88);
}

.btb-pz-page--b2b {
	--pz-page-link: var(--b2b-brand-ink, #005f88);
}