/* Doplněk k navrh.css.
   Základ (písma, barvy, .btn, .quiet) je vyříznutý z artboardu; tady je
   jen to, co web ServisWP nemá — formuláře zóny a výpis nálezů. */

/* Na krátkých stránkách (samotný formulář kontroly) je obsah nižší než
   okno a patička pak končí v půlce obrazovky, pod ní pruh pozadí. Web to
   řeší Astrou; v zóně na to musí být tohle. */
body {
	background: #F1F4F6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.zona-obsah {
	flex: 1 0 auto;
}

/* Telefon a hamburger jsou z mobilního artboardu — na širokém displeji
   je místo nich v hlavičce nabídka a tlačítko „Nezávazná poptávka". */
#swp-mobil {
	display: none;
}

/* kotva pro rozbalenou nabídku na mobilu */
#swp-zahlavi {
	position: relative;
}

.zona-obsah {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 32px 72px;
}

/* Veřejná kontrola je užší schválně: formulář ani seznam nálezů se přes
   1336 px nečte dobře. */
.zona-sloupec {
	max-width: 900px;
	margin: 0 auto;
}

/* Administrace i klientská zóna jsou něco jiného: tabulky s pěti sloupci
   ani čtyři dlaždice vedle sebe se do 900 px nevejdou. 1240 px je hodnota
   z návrhu (serviswp-design/Klient.dc.html). */
.zona-sloupec--siroko {
	max-width: 1240px;
}

.karta {
	background: #fff;
	border: 1px solid #DDE3E8;
	border-radius: 8px;
	padding: 30px 32px;
}

.karta + .karta { margin-top: 20px; }

.hlaska {
	padding: 14px 18px;
	border-radius: 6px;
	margin-bottom: 20px;
	background: #E6F4EC;
	border: 1px solid #B7E0C9;
}

.hlaska--chyba { background: #FDECE7; border-color: #F2C3B2; }

/* ---------------------------------------------------------------- formulář */

label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }

/* Všechna pole vypadají stejně. Číselné a datumové vstupy se sem musí
   vyjmenovat taky — jinak zůstanou na výchozím vzhledu prohlížeče
   a v řádku formuláře trčí. */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=url],
input[type=search],
input[type=date],
select,
textarea {
	width: 100%;
	height: 56px;
	padding: 0 16px;
	border: 1px solid #C4CDD5;
	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;
	color: #14202B;
	background: #fff;
}

select {
	padding: 0 12px;
	appearance: auto;
}

textarea {
	height: auto;
	min-height: 96px;
	padding: 12px 16px;
	line-height: 1.5;
	resize: vertical;
}

/* Vícenásobný výběr je seznam, ne řádek — pevná výška by ho uřízla. */
select[multiple] {
	height: auto;
	padding: 8px 12px;
}

input::placeholder { color: #949EA8; }
input:focus,
select:focus,
textarea:focus { outline: 2px solid var(--brand, #0B7A4B); outline-offset: -1px; }

.tlacitko {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: 6px;
	background: var(--brand, #0B7A4B);
	color: #fff;
	font-family: Archivo, sans-serif;
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: filter .15s ease;
}

.tlacitko:hover { filter: brightness(.92); color: #fff; }

.radek-formulare { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.radek-formulare > div { flex: 1 1 280px; }

.souhlas { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }

.souhlas input {
	width: 18px;
	height: 18px;
	margin-top: 4px;
	accent-color: var(--brand, #0B7A4B);
	flex-shrink: 0;
}

.souhlas label { font-weight: 400; font-size: 15px; color: #566571; margin: 0; }

.chyba-pole { color: #C2470B; font-size: 15px; margin-top: 8px; }

/* ---------------------------------------------------------------- výsledek */

.znacky { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.znacka-pocet {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
}

.znacka-pocet--kriticky { background: #FDECE7; color: #A8320B; }
.znacka-pocet--vysoky { background: #FDF3E3; color: #A15A0B; }
.znacka-pocet--stredni { background: #EEF2F5; color: #45566A; }
.znacka-pocet--ok { background: #E6F4EC; color: #0B7A4B; }

.nalez { padding: 18px 0; border-top: 1px solid #E4E8EC; }
.nalez:first-of-type { border-top: 0; padding-top: 12px; }
.nalez-hlava { display: flex; align-items: flex-start; gap: 12px; }

.stitek {
	flex-shrink: 0;
	margin-top: 3px;
	padding: 3px 9px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.stitek--kriticky { background: #C2270B; color: #fff; }
.stitek--vysoky { background: #FDECE7; color: #A8320B; }
.stitek--stredni { background: #FDF3E3; color: #A15A0B; }
.stitek--nizky { background: #EEF2F5; color: #45566A; }
.stitek--info { background: #EEF2F5; color: #7C8794; }

.nalez-titulek { font-size: 18px; font-weight: 600; }
.nalez-popis { margin-top: 6px; font-size: 16px; color: #566571; }
.nalez-doporuceni { margin-top: 8px; font-size: 16px; }
.nalez-zdroj { margin-top: 6px; font-size: 14px; color: #667685; }

/* ------------------------------------------------------------------- zámek */

.zamek {
	margin-top: 24px;
	background: #FDF3E3;
	border: 1px solid #E0CFA8;
	border-radius: 8px;
	padding: 26px 30px;
}

.zamek h3 { font-size: 21px; }
.zamek p { margin-top: 8px; color: #566571; }
.zamek form { margin-top: 18px; }

.tabulka { width: 100%; border-collapse: collapse; margin-top: 16px; }

.tabulka th {
	text-align: left;
	padding: 12px 16px;
	background: #12202E;
	color: #fff;
	font-family: Archivo, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.tabulka td {
	padding: 12px 16px;
	border-bottom: 1px solid #EDF0F3;
	font-size: 15px;
	vertical-align: top;
}

.tabulka tr:last-child td { border-bottom: 0; }

.cekame { display: flex; align-items: center; gap: 16px; }

.kolecko {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 3px solid #DDE3E8;
	border-top-color: var(--brand, #0B7A4B);
	animation: toc .9s linear infinite;
}

@keyframes toc { to { transform: rotate(360deg); } }

/* ------------------------------------------------- dlaždice klientské zóny
   Rozměry a barvy z serviswp-design/Klient.dc.html. */

.dlazdice-klient {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 24px;
}

.dlazdice-popis {
	display: block;
	font-size: 15px;
	color: #667685;
}

.dlazdice-cislo {
	display: block;
	margin-top: 4px;
	font-family: Archivo, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

.dlazdice-pod {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: #667685;
}

/* Karty v detailu webu si nesou odsazení z návrhu (v inline stylu nebo
   ve vnitřních sekcích). Bez tohohle se sečte s mým a vypadá to jako
   box v boxu. */
.zona-detail .karta {
	padding: 0;
}

/* Kontejner z návrhu má vlastní 1240 px i odsazení — sloupec kolem něj
   by ho jinak odsadil podruhé. */
.zona-detail {
	max-width: none !important;
	padding: 0 !important;
}

/* --------------------------------------------- štítek na časové ose
   Návrh má jen zelenou variantu s fajfkou; stavy jsou tři. */

.stitek-udalost {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 4px;
	white-space: nowrap;
}

.stitek-udalost--ok { background: #E6F4EC; color: #0B7A4B; }
.stitek-udalost--pozor { background: #FDF3E3; color: #A15A0B; }
.stitek-udalost--chyba { background: #FDECE7; color: #A8320B; }

/* ---------------------------------------------- proužek dostupnosti */

.prouzek {
	display: flex;
	gap: 3px;
	margin-top: 16px;
}

.prouzek-den {
	min-width: 5px;
	position: relative;
}

/* Bublina nad sloupečkem místo prohlížečové nápovědy. Dělaná jen CSS —
   na tohle nemá cenu tahat do zóny skript. */
.prouzek-den::after {
	content: attr(data-den) ' — ' attr(data-popis);
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%) translateY(3px);
	padding: 7px 11px;
	border-radius: 6px;
	background: #12202E;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease, transform .12s ease;
	z-index: 5;
}

/* špička bubliny */
.prouzek-den::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%) translateY(3px);
	border: 6px solid transparent;
	border-top-color: #12202E;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease, transform .12s ease;
	z-index: 5;
}

.prouzek-den:hover::after,
.prouzek-den:hover::before,
.prouzek-den:focus-visible::after,
.prouzek-den:focus-visible::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* U krajních sloupečků by bublina vytekla z karty. */
.prouzek-den:first-child::after { left: 0; transform: translateX(0) translateY(3px); }
.prouzek-den:first-child:hover::after,
.prouzek-den:first-child:focus-visible::after { transform: translateX(0) translateY(0); }

.prouzek-den:last-child::after { left: auto; right: 0; transform: translateX(0) translateY(3px); }
.prouzek-den:last-child:hover::after,
.prouzek-den:last-child:focus-visible::after { transform: translateX(0) translateY(0); }

.prouzek-den:focus-visible { outline: 2px solid #12202E; outline-offset: 2px; }

.prouzek-legenda {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	vertical-align: -1px;
	margin-right: 4px;
}

.prouzek-den--ok { background: #2FA36B; }
.prouzek-den--vypadek { background: #C2270B; }
.prouzek-den--nic { background: #E4E8EC; }

/* ------------------------------------------------------ časová osa */

.udalost {
	display: grid;
	grid-template-columns: 70px 1fr auto;
	gap: 16px;
	align-items: start;
	padding: 14px 0;
	border-top: 1px solid #EDF0F3;
}

.udalost:first-of-type { border-top: 0; }

.udalost-datum {
	font-family: Archivo, sans-serif;
	font-weight: 600;
	color: var(--popisek);
}

.udalost-nadpis { font-weight: 600; }
.udalost-popis { margin-top: 2px; color: var(--tlumeny); }
.udalost-stitek { white-space: nowrap; }

/* ------------------------------------------------------------- zpráva */

.karta--hlava { padding-bottom: 26px; }

.hlava-mrizka {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 30px;
	align-items: start;
}

/* Náhled je snímek z měření – schválně se zobrazuje jen shora, celá
   stránka by tu byla dlouhá jak nudle a nikdo by ji nečetl. */
.nahled {
	border: 1px solid #DDE3E8;
	border-radius: 8px;
	overflow: hidden;
	max-height: 300px;
	background: #F1F4F6;
}

.nahled img { display: block; width: 100%; height: auto; }

.odkaz-vedle { margin-left: 14px; font-size: 15px; color: var(--tlumeny); }

.tlacitko--tichy {
	background: #fff;
	color: #14202B;
	border: 1px solid #C4CDD5;
}

.tlacitko--tichy:hover { background: #F1F4F6; color: #14202B; filter: none; }

/* ---------------------------------------------------------- dlaždice */

.dlazdice { display: flex; gap: 28px; margin-top: 18px; align-items: center; flex-wrap: wrap; }

.dlazdice-hlavni { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }

/* Kruh se vykresluje kuželovým přechodem podle --podil (0–100), aby
   nemusel být v HTML žádný SVG ani skript. */
.prstenec {
	position: relative;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--barva) calc(var(--podil) * 1%), #E4E8EC 0);
}

.prstenec::after {
	content: '';
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	background: #fff;
}

.prstenec span {
	position: relative;
	z-index: 1;
	font-family: Archivo, sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: var(--barva);
}

.prstenec--ok { --barva: #0B7A4B; }
.prstenec--vysoky { --barva: #C2870B; }
.prstenec--kriticky { --barva: #C2270B; }
.prstenec--nizky { --barva: #7C8794; }

.dlazdice-popisek { font-size: 14px; color: var(--popisek); text-align: center; line-height: 1.4; }

.dlazdice-mrizka {
	flex: 1 1 380px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px 20px;
}

.dlazdice-udaj {
	padding: 12px 14px;
	border: 1px solid #E4E8EC;
	border-radius: 6px;
	background: #FAFBFC;
}

.udaj-cislo {
	display: block;
	font-family: Archivo, sans-serif;
	font-size: 21px;
	font-weight: 600;
}

.udaj-popis { display: block; margin-top: 3px; font-size: 13px; color: var(--popisek); line-height: 1.45; }
.udaj-popis i { font-style: normal; color: #949EA8; }

/* ------------------------------------------------------------- výzvy */

/* Ke každé části zprávy patří jedna věta o tom, co s tím uděláme my.
   Bez toho je to jen seznam špatných zpráv. */
.pruh-akce {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding: 20px 24px;
	background: var(--brand-soft, #e9f3ef);
	border-radius: 8px;
}

.pruh-akce strong { display: block; font-size: 17px; }
.pruh-akce span { display: block; margin-top: 4px; font-size: 15px; color: #3C5248; max-width: 62ch; }
.pruh-akce .tlacitko { flex-shrink: 0; }

.nalez-akce { margin-top: 8px; }
.nalez-akce a { font-size: 15px; font-weight: 600; color: var(--brand, #0B7A4B); }

.karta--vyzva { background: #12202E; border-color: #12202E; color: #fff; }
.karta--vyzva h2 { color: #fff; }
.karta--vyzva p { color: #A9B6C2 !important; }
.vyzva-odkazy { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 767px) {
	/* Kontaktní lišta je kreslená na jeden řádek 44 px. Na 390 px se do něj
	   obojí nevejde, takže se skupiny rozloží pod sebe — stejně jako na webu.
	   Puntík u havarijní linky musí zůstat na řádku s textem. */
	#swp-lista > div {
		height: auto !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 6px !important;
		padding: 10px 16px !important;
		font-size: 14px;
	}

	#swp-lista > div > div:first-child { gap: 16px; }

	#swp-lista > div > div:last-child {
		align-items: flex-start;
		flex-wrap: nowrap !important;
	}

	#swp-lista > div > div:last-child > span:first-child {
		margin-top: 7px;
		flex-shrink: 0;
	}

	/* ------------------------------------------------- mobilní hlavička
	   Stejná skladba jako na webu podle Mobil.dc.html: jeden řádek 64 px,
	   logo bez podtitulku vlevo, telefon a hamburger vpravo, nabídka se
	   rozbaluje pod hlavičku. */
	#swp-hlavicka {
		height: 64px !important;
		padding: 0 16px !important;
		flex-wrap: nowrap !important;
	}

	#swp-hlavicka > a { flex: 0 0 auto; }
	#swp-hlavicka > a[style*="gap: 12px"] { gap: 9px !important; }

	#swp-hlavicka [style*="width: 40px"] {
		width: 34px !important;
		height: 34px !important;
		border-radius: 7px !important;
	}

	#swp-hlavicka [style*="width: 40px"] svg { width: 19px; height: 19px; }
	#swp-hlavicka [style*="font-size: 24px"] { font-size: 20px !important; }

	/* podtitulek „servis a správa WordPressu" mobilní návrh nemá */
	#swp-hlavicka [style*="font-size: 13px"] { display: none !important; }

	#swp-mobil {
		display: flex !important;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
		margin-left: auto;
	}

	/* Nabídka z desktopu se překlopí do panelu pod hlavičkou. Světle šedý,
	   ať nesplyne s bílým obsahem stránky pod ní. */
	#swp-nav {
		position: absolute !important;
		top: 100%;
		left: 0;
		right: 0;
		display: none !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		padding: 6px 0 10px;
		background: #F1F4F6;
		border-bottom: 1px solid #C9D2D9;
		box-shadow: 0 10px 24px rgba(12, 22, 32, .12);
		z-index: 99;
	}

	#swp-zahlavi.otevreno #swp-nav { display: flex !important; }

	#swp-nav > a {
		padding: 13px 18px;
		border-bottom: 1px solid #DFE5EA;
	}

	#swp-nav > a:last-child {
		border-bottom: 0;
		margin: 12px 18px 2px;
		height: 48px;
	}

	.zona-obsah { padding: 24px 18px 48px; }
	.karta { padding: 22px 20px; }
	/* Tabulka se na 390 px nevejde. Řádek se rozloží pod sebe a ke každé
	   buňce se vypíše popisek sloupce z data-hlavicka. */
	.dlazdice-klient { grid-template-columns: 1fr 1fr; gap: 12px; }
	.tarif-mrizka { grid-template-columns: 1fr !important; }
	.udalost { grid-template-columns: 60px 1fr; gap: 10px; }
	.udalost-stitek { grid-column: 2; }
	.prouzek-den { height: 32px; }
	.tabulka { display: block; }
	.tabulka thead { display: none; }
	.tabulka tbody { display: block; }

	.tabulka tr {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid #EDF0F3;
	}

	.tabulka tr:last-child { border-bottom: 0; }

	.tabulka td {
		display: block;
		padding: 0 0 10px;
		border: 0;
	}

	.tabulka tr td:last-child { padding-bottom: 0; }

	.tabulka td[data-hlavicka]::before {
		content: attr(data-hlavicka);
		display: block;
		margin-bottom: 2px;
		font-family: Archivo, sans-serif;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: #8A96A3;
	}
	.hlava-mrizka { grid-template-columns: 1fr; gap: 20px; }
	.nahled { max-width: 300px; }
	.odkaz-vedle { display: block; margin: 12px 0 0; }
	.dlazdice { gap: 20px; }
	.pruh-akce { padding: 18px 20px; }

	/* hlavička a patička z návrhu jsou kreslené na 1440 px */
	[style*="max-width: 1400px"] { padding-left: 18px !important; padding-right: 18px !important; }
	[style*="display: flex"] { flex-wrap: wrap; }
	[style*="display: grid"] { grid-template-columns: 1fr !important; }
	[style*="height: 84px"] { height: auto !important; padding-top: 14px !important; padding-bottom: 14px !important; }
}