/*
 * mobile.css — mobilní vrstva nad produkčním výpisem domén
 *
 * Cíl: co nejvíc se přiblížit chování a vzhledu POC mobilní PWA
 * (~/Sites/vashosting/12-mobile-pwa, src/app.css + Screen/TabBar/Domains.svelte)
 * jen pomocí CSS, bez zásahu do produkčního markupu.
 *
 * Platí jen pod 768 px (telefony), desktop zůstává 1:1 produkční.
 * Vědomá výjimka z pravidla „žádné vlastní styly" — vyžádaný experiment.
 *
 * Co převzato z POC:
 *   - tokeny barev (center), systémové písmo, 17px základ, tap highlight off
 *   - kompaktní horní lišta s titulkem (1.3rem/700) a akcí vpravo
 *   - sticky vyhledávání (šedé pole 44 px bez rámečku)
 *   - tabulka → vložený seskupený seznam (.group/.row): bílé karty s radius 12,
 *     řádek min. 52 px, šipka vpravo, celý řádek je odkaz na detail
 *   - složka domén → section title (malý šedý nadpis)
 *   - spodní tab bar: světlý, ikona 22 px + popisek, aktivní zeleně, safe area
 *   - modaly a dropdown „Výběr akcí" → bottom sheet s úchytem
 *   - tlačítka a inputy: min. 44 px, inputy 16 px (iOS nezoomuje)
 *
 *   - detail domény (domain-dashboard.html): lišta se šipkou zpět a titulkem
 *     1.05rem/600 (POC vnořená obrazovka), sekce jako seskupené karty, řádky
 *     „popisek … hodnota", akce jako tlačítka pod hodnotou
 *   - přechod seznam ↔ detail: cross-document View Transitions — detail přijede
 *     zprava, seznam se při návratu odsune doprava, tab bar stojí (POC app.css)
 *   - přehled serverů (server-list.html): obecný datagrid → seskupený seznam,
 *     ⋯ u řádku jako action sheet; objednávka domény (domain-order.html) jako
 *     vnořená obrazovka; chování (šipka zpět, směr přechodů) je v mobile.js
 *   - nástěnka (dashboard.html): „Faktury k úhradě" nahoře, grid jako karta;
 *     barvy pozadí a linek z design systému, globální hlavička s hledáním zůstává
 *
 * Co CSS neumí (jen v POC): keep-alive obrazovek (návrat = nové načtení stránky),
 * pull-to-refresh, swipe-to-dismiss sheetu, optimistic UI, offline stav.
 * Přechody stránek běží v Chrome 126+ a Safari 18.2+, jinde se stránka jen vymění.
 */

/* Šipka zpět v detailu existuje jen v mobilní vrstvě */
.m-back { display: none; }

@media (max-width: 767.98px) {

	/* ---------- Tokeny (POC src/app.css, světlý motiv) ---------- */
	:root {
		--m-primary: #17ab4b;
		--m-link: #0079b8;
		/* pozadí, linky a šedé plochy z design systému (POC má modravé #f1f6f8) */
		--m-bg: var(--bs-body-bg, #f5f5f5);
		--m-surface: #fff;
		--m-surface-2: var(--bs-secondary-bg, #e9ecef);
		--m-text: #1f3137;
		--m-muted: #5c7078;
		--m-line: var(--bs-border-color, #ddd);
		--m-warn: #8a6700;
		--m-warn-soft: #fff7d3;
		--m-scrim: rgb(15 25 28 / 0.45);
		--m-sat: env(safe-area-inset-top, 0px);
		--m-sab: env(safe-area-inset-bottom, 0px);
		--m-tabbar-h: 52px;
		--m-bar-h: 52px;
		--m-ease: cubic-bezier(0.32, 0.72, 0, 1);
		--m-font: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	}

	html {
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
		overscroll-behavior: none;
	}
	body {
		font-family: var(--m-font);
		font-size: 17px;
		line-height: 1.35;
		color: var(--m-text);
		background: var(--m-bg);
		overscroll-behavior-y: none;
		/* místo pro spodní tab bar */
		padding-bottom: calc(var(--m-tabbar-h) + var(--m-sab));
	}
	a, button { touch-action: manipulation; }
	input, select, textarea, .form-control, .form-select { font-size: max(16px, 1rem) !important; }

	/* ---------- Horní upozornění: tenký pruh, ne blok ---------- */
	.c_top-alert {
		font-size: 0.8rem;
		line-height: 1.3;
		background: var(--m-warn-soft);
		color: var(--m-warn);
		border-bottom: 1px solid var(--m-line);
	}
	.c_top-alert__in {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: calc(6px + var(--m-sat)) 4px 6px 12px;
	}
	.c_top-alert__text { flex: 1; min-width: 0; }
	.c_top-alert__link { color: inherit; font-weight: 600; white-space: nowrap; }
	.c_top-alert__close {
		flex: none;
		width: 44px;
		height: 32px;
		border: 0;
		background: none;
		color: inherit;
	}

	/* ---------- Layout: bez okrajů, obsah až ke krajům ---------- */
	.s_layout__in,
	.s_layout__in > #snippet--layoutContent > .container-xl {
		padding-left: 0;
		padding-right: 0;
	}
	.s_layout__in { padding-top: 0; }

	/* Globální hlavička (hamburger, hledání v administraci, uživatel) v POC není,
	   pro první verzi ale zůstává — vyhledávání v administraci je potřeba.
	   Odscrolluje se, sticky lišty obrazovek se pak drží nahoře. */
	.s_header { padding-left: 12px; padding-right: 12px; }
	/* Plovoucí lupa produkce (#_search-btn) — hledání je v hlavičce, lupa jen
	   překrývá tab bar */
	.p_search-btn { display: none !important; }

	/* ---------- Horní lišta obrazovky (POC Screen .bar) ---------- */
	section > .d-flex:first-child {
		position: sticky;
		top: 0;
		/* pod sticky hledáním (15), aby ho scrim action sheetu z „Výběr akcí" překryl */
		z-index: 14;
		flex-wrap: nowrap !important;
		align-items: center !important;
		min-height: calc(var(--m-bar-h) + var(--m-sat));
		margin: 0 !important;
		padding: var(--m-sat) 8px 0 16px;
		background: var(--m-bg);
		border-bottom: 1px solid var(--m-line);
		user-select: none;
		-webkit-user-select: none;
	}
	section > .d-flex:first-child h1 {
		font-family: var(--m-font);
		font-size: 1.3rem;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	section > .d-flex:first-child > .d-flex:first-child { min-width: 0; flex: 1; }
	section > .d-flex:first-child > .d-flex:last-child { flex: none; flex-wrap: nowrap !important; gap: 0 !important; }

	/* Akce v liště = ikonová tlačítka 44×44 v barvě primary (POC .icon-btn).
	   „Hromadná objednávka" na mobilu schovaná — v POC je jen „Přidat doménu". */
	.js-gtm-DomainList-link-domainBulkOrder { display: none !important; }
	.js-gtm-DomainList-link-domainOrder,
	section > .d-flex:first-child > .d-flex:last-child > .btn:has(> i.bi):not(.js-gtm-DomainList-link-domainBulkOrder) {
		display: grid !important;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: var(--m-primary) !important;
		font-size: 0 !important;
	}
	.js-gtm-DomainList-link-domainOrder i,
	section > .d-flex:first-child > .d-flex:last-child > .btn:has(> i.bi) > i {
		font-size: 26px;
		margin: 0 !important;
	}

	/* ---------- Box výpisu: bez karty, na pozadí ---------- */
	.s_domains.p_box {
		background: transparent;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		margin: 0;
	}

	/* Hledání + Výběr akcí: sticky pod lištou (POC Domains .search) */
	.s_domains > .d-sm-flex:first-child {
		position: sticky;
		top: calc(var(--m-bar-h) + var(--m-sat));
		z-index: 15;
		display: flex !important;
		flex-direction: row-reverse;
		align-items: center;
		gap: 8px;
		margin: 0 !important;
		padding: 8px 12px 6px !important;
		background: var(--m-bg);
	}
	.s_domains > .d-sm-flex:first-child > div:first-child { flex: none; }
	#frm-searchDomainForm { flex: 1; min-width: 0; margin: 0 !important; }
	#frm-searchDomainForm-query {
		min-height: 44px;
		padding: 0 14px;
		border: 0;
		border-radius: 10px;
		background: var(--m-surface-2);
		box-shadow: none !important;
		color: var(--m-text);
	}
	#frm-searchDomainForm-query::placeholder { color: var(--m-muted); }
	#context-actions {
		min-height: 44px;
		margin: 0 !important;
		border: 0;
		border-radius: 10px;
		background: var(--m-surface-2);
		color: var(--m-text);
		font-size: 0.85rem;
		font-weight: 600;
	}
	#context-actions.disabled { opacity: 0.45; }

	/* ---------- Tabulka → seskupený seznam ---------- */
	.s_domains .table-responsive {
		overflow: visible;
		margin: 0 !important;
		padding: 0 0 24px !important;
	}
	.s_domains .table,
	.s_domains .table > tbody { display: block; width: auto; margin: 0; background: none; }
	.s_domains .table > thead { display: none; }
	.s_domains .table > tbody > tr {
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 52px;
		margin: 0 12px;
		padding: 8px 40px 8px 14px;
		background: var(--m-surface);
		border-top: 1px solid var(--m-line);
		--bs-table-accent-bg: transparent;
		--bs-table-bg-state: transparent;
		--bs-table-striped-bg: transparent;
	}
	.s_domains .table > tbody > tr > td {
		display: block;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		vertical-align: initial;
	}
	.s_domains .table > tbody > tr:active { background: var(--m-surface-2); }

	/* Zaoblení skupiny: první řádek po složce a poslední před další složkou */
	.s_domains .table > tbody > tr:has(.p_folder) + tr {
		border-top: 0;
		border-radius: 12px 12px 0 0;
	}
	.s_domains .table > tbody > tr:not(:has(.p_folder)):has(+ tr .p_folder),
	.s_domains .table > tbody > tr:not(:has(.p_folder)):last-child {
		border-radius: 0 0 12px 12px;
	}
	.s_domains .table > tbody > tr:has(.p_folder) + tr:has(+ tr .p_folder),
	.s_domains .table > tbody > tr:has(.p_folder) + tr:last-child {
		border-radius: 12px;
	}

	/* Složka = section title (POC .section-title), checkbox pro výběr celé složky zůstává */
	.s_domains .table > tbody > tr:has(.p_folder) {
		position: static;
		display: block;
		min-height: 0;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
	}
	.s_domains .table > tbody > tr:has(.p_folder):active { background: none; }
	.s_domains .p_folder {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 18px 16px 6px;
	}
	.s_domains .p_folder__input {
		position: static !important;
		flex: none;
		margin: 0 !important;
	}
	.s_domains .p_folder__btn {
		padding: 0 !important;
		background: none !important;
		font-size: 0.82rem;
		font-weight: 600;
		color: var(--m-muted);
	}
	.s_domains .p_folder__btn::after { display: none; }

	/* 1. buňka: checkbox + název + popis. Bootstrap .row/.col tu jen překáží. */
	.s_domains tr > td:first-child {
		flex: 1;
		min-width: 0;
		order: 1;
	}
	.s_domains tr > td:first-child .text-nowrap { min-width: 0; white-space: normal !important; }
	.s_domains tr > td:first-child .row { --bs-gutter-x: 12px; flex-wrap: nowrap; margin: 0; }
	.s_domains tr > td:first-child .row:not(.g-2) { display: block; }
	.s_domains tr > td:first-child .row > * { padding: 0; }
	.s_domains tr > td:first-child .row.g-2 { gap: 12px; }
	.s_domains tr > td:first-child .col-auto:last-child { flex: 1; min-width: 0; }
	.s_domains tr > td:first-child .fw-bold {
		display: block;
		font-weight: 500 !important;
		color: var(--m-text);
		text-decoration: none;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0 !important;
	}
	/* Ikona „otevřít web" v POC není */
	.s_domains tr > td:first-child a[target="_blank"] { display: none; }
	.s_domains tr > td:first-child .col-12 { display: block; }
	.s_domains tr > td:first-child .text-muted {
		/* místo pro datum expirace vpravo */
		padding-right: 130px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 0.82rem;
		color: var(--m-muted) !important;
	}
	/* Checkbox nad roztaženým odkazem na detail */
	.s_domains tr input[type="checkbox"] {
		position: relative;
		z-index: 2;
		width: 22px;
		height: 22px;
		margin: 0 !important;
	}

	/* 2. buňka: nastavení DNS — v seznamu POC není, patří do detailu */
	.s_domains tr > td:nth-child(2) { display: none !important; }

	/* 3. buňka: expirace jako detail vpravo na řádku popisu (dvouřádková buňka
	   iOS/Android: název nahoře, vlevo typ, vpravo datum) */
	.s_domains tr > td:nth-child(3) {
		position: absolute !important;
		right: 40px;
		bottom: 9px;
		z-index: 0;
		text-align: right;
		white-space: nowrap;
	}
	.s_domains tr > td:nth-child(3) .row { display: block; margin: 0; }
	.s_domains tr > td:nth-child(3) .row > div { padding: 0; }
	.s_domains tr > td:nth-child(3) small {
		font-size: 0.82rem;
		color: var(--m-muted) !important;
	}

	/* 4. buňka: tlačítko Detail → celý řádek je odkaz + šipka (POC a.row.nav::after) */
	.s_domains tr > td:last-child:not(:first-child) { position: static; order: 3; }
	.s_domains tr > td:last-child .btn {
		position: absolute;
		inset: 0;
		z-index: 1;
		width: auto;
		height: auto;
		padding: 0;
		border: 0;
		border-radius: inherit;
		background: transparent !important;
		box-shadow: none !important;
		font-size: 0;
		color: transparent;
	}
	.s_domains tr > td:last-child .btn i { display: none; }
	.s_domains tr > td:last-child .btn::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 18px;
		width: 8px;
		height: 8px;
		margin-top: -4px;
		border-top: 2px solid var(--m-muted);
		border-right: 2px solid var(--m-muted);
		transform: rotate(45deg);
		opacity: 0.6;
	}

	/* ---------- Datagrid (contributte, např. přehled serverů) → seskupený seznam ----------
	   Obecně: checkbox | buňky pod sebou | akce. Konkrétní výpisy níž doladí,
	   co je titulek a co se schová. */
	.c_grid-selectable.p_box,
	.datagrid-container.p_box {
		margin: 0 !important;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	.datagrid-container { overflow: visible !important; }
	.datagrid { min-height: 0 !important; height: auto !important; background: transparent !important; }

	/* Hlavička gridu: hledání + Vybrat/Výběr akcí v jednom sticky řádku */
	.c_datagrid-header {
		position: sticky;
		top: calc(var(--m-bar-h) + var(--m-sat));
		z-index: 15;
		display: flex !important;
		flex-direction: row-reverse;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 8px;
		margin: 0 !important;
		padding: 8px 12px 6px !important;
		background: var(--m-bg);
	}
	.c_datagrid-header > div:first-child { display: flex; flex: none; gap: 6px; width: auto; }
	.c_datagrid-header > div:first-child .btn { margin: 0 !important; }
	.c_grid-select {
		min-height: 44px;
		border: 0;
		border-radius: 10px;
		background: var(--m-surface-2);
		color: var(--m-text);
		font-size: 0.85rem;
		font-weight: 600;
	}
	.c_search-bar-form { display: flex; align-items: center; flex: 1; min-width: 0; margin: 0 !important; }
	.c_search-bar {
		min-height: 44px;
		padding: 11px 14px;
		border: 0;
		border-radius: 10px;
		background: var(--m-surface-2);
		box-shadow: none !important;
		color: var(--m-text);
		white-space: nowrap;
		overflow: hidden;
	}
	/* Nápověda ke štítkům (popover) — na mobilu jen místo bere */
	.c_search-bar-form > .p_circle { display: none; }

	.datagrid table.table,
	.datagrid table.table > tbody { display: block; width: auto; margin: 0; background: none; border: 0; }
	.datagrid table.table > thead,
	.datagrid table.table > tfoot { display: none; }
	.datagrid table.table > tbody > tr {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 0;
		min-height: 56px;
		margin: 0 12px;
		padding: 8px 6px 8px 14px;
		background: var(--m-surface);
		border-top: 1px solid var(--m-line);
		--bs-table-accent-bg: transparent;
		--bs-table-bg-state: transparent;
		--bs-table-striped-bg: transparent;
		--bs-table-hover-bg: transparent;
	}
	.datagrid table.table > tbody > tr:first-child { border-top: 0; border-radius: 12px 12px 0 0; }
	.datagrid table.table > tbody > tr:last-child { border-radius: 0 0 12px 12px; }
	.datagrid table.table > tbody > tr:only-child { border-radius: 12px; }
	.datagrid table.table > tbody > tr:active { background: var(--m-surface-2); }
	.datagrid table.table > tbody > tr > td {
		grid-column: 2;
		display: block;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		font-size: 0.82rem;
		color: var(--m-muted);
		text-align: left !important;
	}
	.datagrid table.table > tbody > tr > td.col-checkbox { grid-column: 1; grid-row: 1 / span 12; }
	.datagrid table.table > tbody > tr > td.col-action { grid-column: 3; grid-row: 1 / span 12; }
	.c_grid-selectable:not(.is-selecting) .datagrid td.col-checkbox { display: none !important; }
	.datagrid tr input[type="checkbox"] { position: relative; z-index: 2; margin: 0 12px 0 0 !important; }
	.datagrid table.table > tbody > tr > td.col-action { width: auto !important; margin-left: 8px; }

	/* Akce řádku: „Detail" → celý řádek je odkaz, ⋯ zůstává jako ikona (action sheet) */
	.datagrid td.col-action > div { display: flex; align-items: center; }
	.datagrid td.col-action .btn.d-none.d-sm-inline-block {
		display: block !important;
		position: absolute;
		inset: 0;
		z-index: 1;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: inherit;
		background: transparent !important;
		box-shadow: none !important;
		font-size: 0;
		color: transparent;
	}
	.datagrid td.col-action .btn.d-none.d-sm-inline-block i { display: none; }
	.datagrid td.col-action .dropdown-toggle:has(> .bi-three-dots) {
		position: relative;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin: 0 !important;
		padding: 0;
		border: 0;
		background: none !important;
		box-shadow: none !important;
		color: var(--m-muted);
		font-size: 20px;
	}
	.datagrid td.col-action .dropdown-toggle:has(> .bi-three-dots)::after { display: none; }


	/* Přehled serverů (POC Servers.svelte: název, pod ním host, stav vpravo) */
	body[data-presenter="ServerList"] {
		& td.col-clientNote > div { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
		& td.col-clientNote .fw-bold {
			flex: 0 1 auto;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 1rem;
			font-weight: 500 !important;
			color: var(--m-text);
			text-decoration: none;
		}
		& td.col-clientNote a[target="_blank"] { position: relative; z-index: 2; margin: 0 !important; }
		& td.col-clientNote .p_circle { order: -1; flex: none; margin: 0 !important; opacity: 1 !important; }
		& td.col-clientNote > div > div { flex-basis: 100%; order: 3; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
		& td.col-clientNote .p_badge { margin: 0 !important; font-size: 0.7rem; }
		/* IP: jen IPv4 jako podtitulek, kopírování až v detailu */
		& td[class*="col-mainIpv4Address"] { order: 2; }
		& td[class*="col-mainIpv4Address"] .d-flex + .d-flex,
		& td[class*="col-mainIpv4Address"] .p_copy { display: none !important; }
		& td.col-distroShortName,
		& td.col-ramSize,
		& td.col-hddSize,
		& td.col-monthPrice,
		& td.col-expiration { display: none !important; }
	}

	/* Nástěnka: „Faktury k úhradě" úplně nahoru, pod hlavičku (jen když tam jsou) */
	body[data-presenter="Dashboard"] {
		& #snippet--layoutContent > .container-xl { display: flex; flex-direction: column; }
		& #snippet--layoutContent > .container-xl > .s_header { order: -3; }
		& .row:has(> div > .datagrid-container [data-datagrid-name="unpaidProformaInvoiceGrid"]) { display: contents; }
		& div:has(> .datagrid-container [data-datagrid-name="unpaidProformaInvoiceGrid"]) {
			order: -2;
			margin: 0 0 8px !important;
			padding: 0;
		}
		& div:has(> .datagrid-container [data-datagrid-name="unpaidProformaInvoiceGrid"]) > h2 {
			margin: 0;
			padding: 12px 16px 6px;
			font-size: 0.82rem;
			font-weight: 600;
			color: var(--m-muted);
		}
		/* Řádek: částka nahoře, pod ní položka; Zaplatit vpravo jako malé tlačítko */
		& [data-datagrid-name="unpaidProformaInvoiceGrid"] td.col-price > div {
			display: flex;
			align-items: baseline;
			gap: 8px;
			font-size: 1rem;
			font-weight: 600;
			color: var(--m-text);
		}
		& [data-datagrid-name="unpaidProformaInvoiceGrid"] td.col-price small { font-weight: 400; font-size: 0.78rem; }
		& [data-datagrid-name="unpaidProformaInvoiceGrid"] td.col-items .mb-2 { margin: 0 !important; }
		& [data-datagrid-name="unpaidProformaInvoiceGrid"] td.col-items > div > div:last-child small {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		& [data-datagrid-name="unpaidProformaInvoiceGrid"] td.col-items a { position: relative; z-index: 2; }
		& [data-datagrid-name="unpaidProformaInvoiceGrid"] td.col-action .btn {
			min-height: 36px;
			margin: 0 !important;
			padding: 0 14px;
			border-radius: 999px;
			font-weight: 600;
		}
	}

	/* ---------- Obrazovka bez lišty: holý h1 (objednávka domény apod.) ---------- */
	section > h1:first-child {
		position: sticky;
		top: 0;
		z-index: 14;
		display: flex;
		align-items: center;
		gap: 2px;
		min-height: calc(var(--m-bar-h) + var(--m-sat));
		margin: 0 0 4px !important;
		padding: var(--m-sat) 16px 0;
		background: var(--m-bg);
		border-bottom: 1px solid var(--m-line);
		font-family: var(--m-font);
		font-size: 1.3rem;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		user-select: none;
		-webkit-user-select: none;
	}

	/* Objednávka domény: formulář nahoře, shrnutí s tlačítkem pod ním */
	body[data-presenter="DomainOrder"] {
		& section { padding-bottom: 24px; }
		& section > .row { margin: 0; }
		& section > .row > [class*="col-"] { padding: 0; }
		& section > .row > .order-md-2 { order: 2; }
		& .p_box {
			margin: 12px !important;
			padding: 16px;
			border: 0;
			border-radius: 12px;
			box-shadow: none;
		}
		& .p_box > h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; }
		& .form-check { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-left: 0; }
		& .form-check-input { float: none; flex: none; margin: 0 !important; order: -1; }
		& .c_recap .btn { min-height: 48px; border-radius: 12px; font-weight: 600; }
	}

	/* ---------- Spodní tab bar (POC TabBar.svelte) ---------- */
	.c_menu-bar {
		background: var(--m-surface);
		border-top: 1px solid var(--m-line);
		padding-bottom: var(--m-sab);
		user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
	}
	.c_menu-bar ul li,
	.c_menu-bar ul li:first-child,
	.c_menu-bar ul li:last-child { flex: 1 1 0; }
	.c_menu-bar ul li a,
	.c_menu-bar .p_burger-menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		width: 100%;
		height: auto;
		min-height: var(--m-tabbar-h);
		padding: 4px 2px;
		background: none;
		border: 0;
		color: var(--m-muted);
		font-family: var(--m-font);
		font-size: 0.65rem;
		font-weight: 500;
		line-height: 1.1;
	}
	.c_menu-bar ul li a > span:first-child,
	.c_menu-bar .p_burger-menu__ico { display: block; height: 22px; line-height: 0; transition: transform 90ms; }
	.c_menu-bar ul li a:active > span:first-child,
	.c_menu-bar .p_burger-menu:active .p_burger-menu__ico { transform: scale(0.88); }
	.c_menu-bar svg { width: 22px; height: 22px; }
	/* Produkční ilustrační ikony jsou pro tmavý pruh; ve světlém je ztlumíme do šedé */
	.c_menu-bar svg path { fill: currentColor; }
	.c_menu-bar .p_badge { font-size: 0.6rem; padding: 1px 4px; vertical-align: 1px; }
	.c_menu-bar .p_burger-menu__ico { width: 22px; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
	.c_menu-bar .p_burger-menu__ico > span,
	.c_menu-bar .p_burger-menu__ico > span + span { display: block; height: 2px; width: 18px; margin: 0 auto; background: currentColor; border-radius: 1px; animation: none; top: 0; transform: none; }
	.c_menu-bar .p_burger-menu > span { display: block; color: inherit; font-size: inherit; font-weight: inherit; }

	/* Aktivní tab podle presenteru (produkce třídu .active na tab bar nedává) */
	body[data-presenter^="Domain"] .c_menu-bar ul li:nth-child(2) a,
	body[data-presenter^="Dashboard"] .c_menu-bar ul li:nth-child(1) a,
	body[data-presenter^="Server"] .c_menu-bar ul li:nth-child(3) a,
	.c_menu-bar ul li a.active {
		background: none;
		color: var(--m-primary);
		font-weight: 500;
	}

	/* Chat podpory nesmí ležet přes tab bar */
	#vh-chat-launcher {
		bottom: calc(var(--m-tabbar-h) + var(--m-sab) + 12px) !important;
		right: 12px !important;
		width: 48px !important;
		height: 48px !important;
	}

	/* ---------- Modaly → bottom sheet (POC Sheet.svelte) ---------- */
	.modal { --bs-modal-margin: 0; }
	.modal-backdrop.show { --bs-backdrop-opacity: 1; background: var(--m-scrim); }
	.modal-dialog {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		display: flex;
		align-items: flex-end;
		min-height: 0;
	}
	.modal.fade .modal-dialog {
		transform: translateY(100%);
		transition: transform 280ms var(--m-ease);
	}
	.modal.show .modal-dialog { transform: none; }
	.modal-content {
		max-height: calc(100dvh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 0;
		border-radius: 16px 16px 0 0;
		padding-bottom: var(--m-sab);
		background: var(--m-surface);
	}
	/* úchyt */
	.modal-content::before {
		content: '';
		display: block;
		flex: none;
		width: 36px;
		height: 5px;
		margin: 8px auto 0;
		border-radius: 3px;
		background: var(--m-line);
	}
	.modal-header { border: 0; padding: 8px 16px 4px; }
	.modal-title { font-size: 1.05rem !important; font-weight: 600; }
	.modal-body { padding: 8px 16px; }
	.modal-footer {
		display: grid;
		gap: 8px;
		padding: 12px 16px 16px;
		border: 0;
	}
	.modal-footer > * { margin: 0; }
	/* Primární akce nahoře, Zrušit dole (iOS action sheet) */
	.modal-footer > .btn-primary { order: -1; }
	.modal-footer .btn {
		width: 100%;
		min-height: 48px;
		border-radius: 12px;
		font-weight: 600;
	}
	.modal-footer .btn-light { background: var(--m-surface-2); border: 0; }
	/* Nette renderer dává submit do těla modalu, ne do footeru */
	.modal-body input[type="submit"].btn,
	.modal-body button[type="submit"].btn {
		width: 100%;
		min-height: 48px;
		margin-bottom: 16px;
		border-radius: 12px;
		font-weight: 600;
	}
	.modal-header .btn-close { width: 44px; height: 44px; padding: 0; margin: -8px -12px -8px auto; }

	/* Při otevřeném sheetu chat podpory nepřekáží */
	body.modal-open #vh-chat-launcher,
	body:has(:is(.s_domains, .c_grid-selectable, .datagrid, .dropdown-portal) .dropdown-menu.show) #vh-chat-launcher { display: none !important; }

	/* Dropdown „Výběr akcí" → action sheet. !important přebíjí inline styly Popperu.
	   .dropdown-portal = kontejner v <body>, kam produkční JS přesouvá menu z gridů (Zaplatit na nástěnce).  */
	:is(.s_domains, .c_grid-selectable, .datagrid, .dropdown-portal) .dropdown-menu.show {
		position: fixed !important;
		inset: auto 0 0 0 !important;
		transform: none !important;
		z-index: 1080;
		margin: 0 !important;
		padding: 8px 0 calc(8px + var(--m-sab));
		border: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 0 0 100vmax var(--m-scrim);
		animation: m-sheet-in 280ms var(--m-ease);
	}
	:is(.s_domains, .c_grid-selectable, .datagrid, .dropdown-portal) .dropdown-menu .dropdown-item {
		min-height: 52px;
		padding: 0 20px;
		font-size: 1rem;
		white-space: normal;
	}
	:is(.s_domains, .c_grid-selectable, .datagrid, .dropdown-portal) .dropdown-menu .dropdown-item + .dropdown-item { border-top: 1px solid var(--m-line); }

	@keyframes m-sheet-in { from { transform: translateY(100%); } }

	/* ---------- Obecné ovládací prvky ---------- */
	.btn { min-height: 44px; }
	.form-control, .form-select { min-height: 46px; border-radius: 10px; }
	.form-check-input { width: 22px; height: 22px; }

	@media (prefers-reduced-motion: reduce) {
		.modal.fade .modal-dialog, :is(.s_domains, .c_grid-selectable, .datagrid, .dropdown-portal) .dropdown-menu.show { transition: none; animation: none; }
	}

	/* =====================================================================
	   PŘECHODY MEZI STRÁNKAMI (POC: View Transitions push/pop stacku)
	   ===================================================================== */
	@view-transition { navigation: auto; }

	/* Animuje se celá viditelná plocha (root = snímek viewportu, jako POC .view).
	   Dřív to byl .s_layout__in — ten je vysoký jako celá stránka, Chrome jeho snímek
	   ořízne a po odscrollování ho posadí jinam, takže obrazovky poskakovaly.
	   Tab bar a chat mají vlastní jména, aby z animace vypadly a stály. */
	.c_menu-bar { view-transition-name: m-tabbar; }
	#vh-chat-launcher { view-transition-name: m-chat; }

	::view-transition-group(root) { animation: none; }
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 280ms;
		animation-timing-function: var(--m-ease);
		animation-fill-mode: both;
		mix-blend-mode: normal;
		/* Výchozí crossfade s normal blendingem v půlce prosvítá pozadím (záblesk),
		   proto mimo push/pop žádná animace — stránka se jen vymění, tab bar stojí. */
		animation-name: none;
	}
	::view-transition-group(m-tabbar),
	::view-transition-group(m-chat) { animation: none; z-index: 5; }
	::view-transition-old(m-tabbar),
	::view-transition-old(m-chat) { display: none; }
	::view-transition-new(m-tabbar),
	::view-transition-new(m-chat) { animation: none; }

	/* Směr určuje cílová stránka: na detail/objednávku = push, na seznam = pop.
	   Pop jen z vnořené obrazovky — přepnutí tabem na seznam domén ruší mobile.js. */
	:root:has(body:is([data-presenter="Domain_Dashboard"], [data-presenter="DomainOrder"]))::view-transition-old(root) { animation-name: m-out-left; }
	:root:has(body:is([data-presenter="Domain_Dashboard"], [data-presenter="DomainOrder"]))::view-transition-new(root) { animation-name: m-in-right; z-index: 2; }
	:root:has(body[data-presenter="DomainList"])::view-transition-old(root) { animation-name: m-out-right; z-index: 2; }
	:root:has(body[data-presenter="DomainList"])::view-transition-new(root) { animation-name: m-in-left; }
	@keyframes m-out-left { to { transform: translateX(-28%); filter: brightness(0.82); } }
	@keyframes m-in-right { from { transform: translateX(100%); } }
	@keyframes m-out-right { to { transform: translateX(100%); } }
	@keyframes m-in-left { from { transform: translateX(-28%); filter: brightness(0.82); } }

	/* =====================================================================
	   VNOŘENÁ OBRAZOVKA (POC Screen s back): detail domény, objednávka domény
	   ===================================================================== */
	body:is([data-presenter="Domain_Dashboard"], [data-presenter="DomainOrder"]) {
		/* Lišta vnořené obrazovky: zpět + titulek */
		& section > h1 {
			position: sticky;
			top: 0;
			z-index: 14;
			display: flex;
			align-items: center;
			gap: 2px;
			min-height: calc(var(--m-bar-h) + var(--m-sat));
			margin: 0 0 4px !important;
			padding: var(--m-sat) 16px 0 4px;
			background: var(--m-bg);
			border-bottom: 1px solid var(--m-line);
			font-family: var(--m-font);
			font-size: 1.05rem;
			font-weight: 600;
			line-height: 1.2;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			user-select: none;
			-webkit-user-select: none;
		}
		& .m-back {
			display: grid;
			place-items: center;
			flex: none;
			width: 44px;
			height: 44px;
			color: var(--m-primary);
			font-size: 22px;
			text-decoration: none;
		}
		& .m-back:active { opacity: 0.5; }
	}

	/* =====================================================================
	   DETAIL DOMÉNY (domain-dashboard.html, POC DomainDetail.svelte)
	   ===================================================================== */
	body[data-presenter="Domain_Dashboard"] {

		& section { padding-bottom: 24px; }

		& section > h1 > a[target="_blank"] { display: none; }

		/* Bootstrap mřížka sloupců na mobilu jen překáží */
		& section > .row { margin: 0; }
		& section > .row > [class*="col-"] { padding: 0; }

		/* Box = sekce: nadpis nad kartou, bloky jako bílé skupiny */
		& .p_box {
			margin: 0 !important;
			padding: 0;
			background: none;
			border: 0;
			border-radius: 0;
			box-shadow: none;
		}
		& .c_sum-card__pricing {
			display: block;
			margin: 0;
			padding: 18px 16px 6px;
		}
		& .c_sum-card__pricing-img { display: none; }
		& .c_sum-card__pricing-content > strong {
			font-size: 0.82rem;
			font-weight: 600;
			color: var(--m-muted);
		}
		& .p_block {
			margin: 0 12px 8px;
			padding: 4px 14px;
			background: var(--m-surface);
			border-radius: 12px;
			font-size: 0.95rem;
			line-height: 1.35;
		}
		& .p_block > * { margin: 0 !important; }
		& .p_block > :is(p, div, h3) { padding: 10px 0; }
		& .p_block > :is(p, div, h3) + :is(p, div, h3) { border-top: 1px solid var(--m-line); }
		/* Loose „Expirace + badge" za nadpisem (blok Fakturace) */
		& .p_block > h3 ~ span,
		& .p_block > h3 ~ a.p_badge { display: inline-block; margin-bottom: 10px !important; }
		/* Skrytý formulář jen se submitem pro aktivaci free hostingu */
		& #frm-activateFreeHostingForm { display: none; }

		& .p_block h3 {
			font-size: 0.95rem !important;
			font-weight: 600;
		}
		& .p_block h3 strong { font-weight: 600; }

		/* Řádek „popisek … hodnota" (POC .row: Platnost do … 2. 6. 2027) */
		& .p_block > p {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 6px 12px;
			min-height: 44px;
			line-height: 1.35;
		}
		& .p_block > p > * { margin: 0 !important; line-height: 1.35; }
		& .p_block > p > span.me-3:first-child,
		& .p_block > p > strong.mb-4:first-child {
			flex: 1 1 auto;
			color: var(--m-muted);
			font-weight: 400;
		}
		& .p_block > p > strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
		& .p_block > p > strong:not(:first-child) { margin-left: auto !important; }
		& .p_block > p > strong.mb-4:first-child { text-align: left; }
		/* Samostatná hodnota (adresa, NS servery) zůstává vlevo */
		& .p_block > p > strong:only-child { flex: 1; text-align: left; font-weight: 500; }

		/* Akce v řádku: zalomí se pod hodnotu, tlačítka na šířku */
		& .p_block > p:has(.btn)::after { content: ''; flex-basis: 100%; order: 9; }
		& .p_block .btn,
		& .p_block > p > a:not(.p_badge) {
			order: 10;
			flex: 1 1 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 40px;
			padding: 0 12px;
			border: 0;
			border-radius: 10px;
			background: var(--m-surface-2);
			color: var(--m-primary);
			font-size: 0.9rem;
			font-weight: 600 !important;
			text-decoration: none;
		}
		& .p_block > div > a.btn { width: 100%; margin-top: 8px; }

		/* DNS záznamy: typ v badge + hodnota (POC .row.dns) */
		& .p_block > p:has(.p_badge--ring-light) {
			display: grid;
			grid-template-columns: 54px 1fr;
			gap: 8px 10px;
		}
		& .p_block > p:has(.p_badge--ring-light) > span.me-3:first-child { grid-column: 1 / -1; }
		& .p_badge--ring-light { text-align: center; justify-self: stretch; }
		& .p_block > p:has(.p_badge--ring-light) > strong {
			text-align: left;
			margin-left: 0 !important;
			font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
			font-size: 0.85rem;
			font-weight: 400;
		}

		/* Odkaz „Změnit DNS záznamy" jako řádek se šipkou */
		& .text-arrow-link {
			display: flex !important;
			align-items: center;
			justify-content: space-between;
			min-height: 44px;
			border-top: 1px solid var(--m-line);
			color: var(--m-link) !important;
			text-decoration: none;
		}

		/* „Mohlo by se hodit" → karta s tlačítkem na šířku */
		& .c_blank-state {
			display: flex !important;
			flex-direction: column;
			align-items: stretch !important;
			gap: 8px;
			margin: 8px 12px 0;
			padding: 14px;
			background: var(--m-surface);
			border: 0;
			border-radius: 12px;
		}
		& .c_blank-state > * { margin: 0 !important; text-align: left !important; }
		& .c_blank-state .btn {
			width: 100%;
			min-height: 48px;
			margin: 0 !important;
			border-radius: 12px;
			font-weight: 600;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		::view-transition-old(root), ::view-transition-new(root) { animation: none; }
	}
}