/* Ředitelna — vlastní styly projektu. */

/* Web Awesome: reset html/body, viz skills/webawesome-design/references/layouts-page.md */
html,
body {
	min-height: 100%;
	padding: 0;
	margin: 0;
}

/* Mírná úprava výchozího tématu (wa-theme-default / wa-palette-default): o něco měkčí rohy. */
:root {
	--wa-border-radius-scale: 1.15;
}

/* Vlastní odvozené tokeny projektu — ne WA (proto vlastní `--app-*` jmenný prostor, aby se nepletly
   s oficiálními `--wa-*`). Mezikrok mezi brand-fill-normal a brand-fill-loud, který škála quiet/normal/loud
   sama nemá (viz doc/spec/AKVZ-A06.md) — na jednom místě, ať se dá použít na víc místech v šabloně a
   upravovat jednotně. */
:root {
	--app-color-brand-hover: color-mix(in oklab, var(--wa-color-brand-fill-normal), var(--wa-color-brand-fill-loud) 15%);
}

body {
	background-color: var(--wa-color-surface-lowered);
}

/* Rozvržení shellu (wa-page): pevná šířka levého menu, resetovaná na mobilu. */
wa-page {
	--menu-width: 15rem;
}

wa-page[view='mobile'] {
	--menu-width: auto;
}

/* Pozadí hlavičky/menu/patičky se nastavuje na slotovaných elementech samotných (<header>/<nav>/<footer>),
   ne na ::part() obalu — ten by libovolné pozadí okamžitě překreslil. Ověřeno přímo ve vendorovaném
   chunk.KCUYOW2Z.js (styly <wa-page>): `slot[name]:not([name=skip-to-content],[name=navigation-toggle])
   ::slotted(*) { background-color: var(--wa-color-surface-default) }` — toto pravidlo z shadow DOM
   <wa-page> má na `background-color` stejnou nebo vyšší specificitu a podle CSS Scoping specifikace při
   shodné specificitě vyhrává pravidlo z shadow stromu, takže i vlastní pravidlo se stejnou specificitou
   prohraje. `!important` je proto jediný spolehlivý způsob, jak zde `background-color` přebít — netýká
   se žádné jiné vlastnosti ani komponenty, jen tohoto konkrétního, ověřeného konfliktu. */
header[slot='header'] {
	background-color: var(--wa-color-brand-fill-loud) !important;
	border-block-end: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud);
	box-shadow: var(--wa-shadow-s);
}

nav[slot='navigation'] {
	background-color: var(--wa-color-surface-lowered) !important;
	border-inline-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

footer[slot='footer'] {
	/* --app-color-brand-hover viz :root výše — stejná barva jako hover v menu/hlavičce, na tomto pozadí
	   se osvědčil černý text (--wa-color-text-normal), ne namíchaný/dokumentovaný `on-*` pár (ten
	   vycházel nečitelně, viz doc/spec/AKVZ-A06.md). */
	background-color: var(--app-color-brand-hover) !important;
	border-block-start: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal);
	padding-inline: var(--wa-space-l);
	padding-block: var(--wa-space-s);
	color: var(--wa-color-text-normal);
	font-size: var(--wa-font-size-s);
	text-align: center;
	/* wa-page nastavuje slotovaným elementům i display: flex (stejné pravidlo jako u pozadí výše),
	   takže samotné text-align nestačí — bez justify-content by se text zarovnal na začátek řádku. */
	justify-content: center;
}

/* Hlavička */
.app-header {
	padding-inline: var(--wa-space-l);
	padding-block: var(--wa-space-s);
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	color: var(--wa-color-brand-on-loud);
	text-decoration: none;
}

.brand-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wa-space-2xl);
	block-size: var(--wa-space-2xl);
	font-size: var(--wa-font-size-l);
	color: var(--wa-color-brand-on-loud);
}

.brand-name {
	font-size: var(--wa-font-size-l);
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* <wa-button>'s vlastní label slot (`.label`) je uvnitř nastavený na `display: inline-block` — vlastní
   flex obal uvnitř něj by měl fungovat i bez !important, ale v praxi se ukázalo, že se `display`/`gap`
   neprojevily (mezera mezi textem a avatarem nebyla vidět), proto navíc !important, ať je jisté, že
   nic uvnitř .label to nepřebije. */
.user-trigger-content {
	display: flex !important;
	align-items: center !important;
	gap: var(--wa-space-xs) !important;
}

/* Avatar je poslední prvek v tlačítku (za textem) — nahrazuje samostatný rozbalovací symbol (dřív
   with-caret). Pozadí avataru nemá dokumentovanou vlastní barevnou vlastnost (jen --size, viz avatar.md)
   — :host v avatar.styles.ts čte přímo `background-color: var(--wa-color-neutral-fill-normal)`
   (ověřeno v chunk.NOKRLOIJ.js), proto se přebíjí tenhle token, ne background-color přímo. Záporný
   margin-inline-end přesně o vnitřní odsazení tlačítka (--wa-form-control-padding-inline, dokumentovaný
   token — tokens/component-groups.md) vysune kruh avataru až k zaoblenému okraji pill tlačítka, ať
   zaoblení lícují. */
.user-avatar {
	--size: var(--wa-space-2xl);
	--wa-color-neutral-fill-normal: var(--app-color-brand-hover);
	margin-inline-end: calc(-1 * var(--wa-form-control-padding-inline));
}

/* line-height: 1 — i po flex zarovnání do středu (viz .user-trigger-content) zůstával text opticky
   posunutý nahoru. Běžný jev: zděděný line-height (větší než výška písma) rozkládá prostor kolem řádku
   nesouměrně (u latinky obvykle víc nad znaky než pod nimi), takže vizuální střed textu není totéž co
   geometrický střed jeho boxu, který flexbox centruje. Utažení line-height rozdíl minimalizuje. */
.user-name {
	font-weight: 500;
	color: var(--wa-color-brand-on-loud);
	line-height: 1;
}

/* Tlačítka v hlavičce (appearance="plain") sedí na modrém pozadí. `variant="brand"` (nastaveno v
   PortalPages.html) přemapuje generické tokeny --wa-color-fill-quiet/-on-quiet, ze kterých appearance="plain"
   normálně čte barvu hoveru, na značkovou (modrou) rodinu — ověřeno v chunk.Z2SRJMFV.js/chunk.7NJI7LZ5.js;
   bez toho padne hover na neutrální šedou. Pozadí hoveru se ale přebíjí na `--app-color-brand-hover`
   (stejná barva jako menu/patička, viz :root výše) přes ::part(button), aby bylo sjednocené se zbytkem
   shellu. V klidu je pozadí tlačítka průhledné (prosvítá modrá hlavička), text proto `on-loud`; při
   hoveru na `--app-color-brand-hover` se stejně jako jinde osvědčil černý text (--wa-color-text-normal),
   ne dokumentovaný `on-*` pár (ten je kalibrovaný pro `brand-fill-quiet`, ne pro tento mezikrok) — obojí
   přes dokumentovanou část `::part(button)`, ne přes host (theming.md, „Watch quiet/plain controls on
   colored bands“). */
.app-header wa-button::part(button) {
	color: var(--wa-color-brand-on-loud);
}

.app-header wa-button:hover::part(button) {
	background-color: var(--app-color-brand-hover);
	color: var(--wa-color-text-normal);
}

/* .user-name má vlastní pevné pravidlo barvy (viz výše) — jako přímo se shodující pravidlo pro daný
   element vyhrává nad zděděnou barvou z ::part(button), takže na hover stav musí mít vlastní přepis. */
.app-header wa-button:hover .user-name {
	color: var(--wa-color-text-normal);
}

/* .user-avatar má vlastní pevné pravidlo pozadí (--wa-color-neutral-fill-normal, viz výše) — stejně
   jako u .user-name musí mít i avatar na hover stav tlačítka vlastní přepis, jinak by zůstal na klidové
   --app-color-brand-hover. Žádný dokumentovaný token pro čistě bílou není (viz tokens/color.md — jen
   odstupňované palety a on-barvy), proto přímo `white`. */
.app-header wa-button:hover .user-avatar {
	--wa-color-neutral-fill-normal: white;
}

/* Avatar uživatele (doc/spec/AKVZ-A29.md): barvy z palety předává šablona inline CSS proměnnými --avatar-bg/-fg
   (světlý vzhled) a --avatar-bg-dark/-fg-dark (tmavý vzhled, třída .wa-dark), hodnoty jsou jen hex z RgbColor.hex().
   Styl na hostiteli z vnějšího CSS má přednost před :host pravidly komponenty (background-color, color), proto stačí
   bez ::part. Avatar bez proměnných (obsah bez autora) zůstane na výchozích tokenech WebAwesome — i v hlavičce, kde
   .user-avatar přebíjí token --wa-color-neutral-fill-normal (viz výše). Ikona FontAwesome ve slotu icon (webfont, v SVG
   režimu ji jádro FA nahradí za <svg> a slot zachová) má polovinu velikosti avatara. */
wa-avatar.app-avatar {
	background-color: var(--avatar-bg, var(--wa-color-neutral-fill-normal));
	color: var(--avatar-fg, var(--wa-color-neutral-on-normal));
}

.wa-dark wa-avatar.app-avatar {
	background-color: var(--avatar-bg-dark, var(--wa-color-neutral-fill-normal));
	color: var(--avatar-fg-dark, var(--wa-color-neutral-on-normal));
}

/* Iniciály tučně (část initials komponenty). */
wa-avatar.app-avatar::part(initials) {
	font-weight: var(--wa-font-weight-bold);
}

wa-avatar.app-avatar > [slot="icon"] {
	font-size: calc(var(--size) * 0.5);
}

/* V hlavičce na modrém pozadí odliší barevný avatar tenký bílý okraj. */
.app-header wa-avatar.app-avatar {
	box-shadow: 0 0 0 2px var(--wa-color-brand-on-loud);
}

@media (max-width: 30rem) {
	.user-name {
		display: none;
	}
}

/* Rozbalovací menu (wa-dropdown) — obecně pro celou aplikaci, ne jen hlavičku: stejná světle šedá
   jako levé hlavní menu (--wa-color-surface-lowered), místo výchozí --wa-color-surface-raised. */
wa-dropdown::part(menu) {
	background-color: var(--wa-color-surface-lowered);
}

/* Položky rozbalovacího menu (wa-dropdown-item) — obecně pro celou aplikaci: hover efekt stejný jako
   v levém hlavním menu (.app-menu a:hover), ne výchozí neutrální šedá. Host uvnitř dropdown-item.styles.ts
   (chunk.A764TQYS.js) čte pozadí hoveru/fokusu/otevřeného submenu přes --wa-color-neutral-fill-normal,
   proto se přepisuje tenhle token na --app-color-brand-hover (stejná barva jako menu/hlavička/patička,
   viz :root výše), místo aby se dohledávaly a přebíjely jednotlivé :hover/:focus-visible/:state(...)
   stavy přes ::part(). Barva textu při hoveru zůstává beze změny (--wa-color-text-normal, stejné jako
   v klidu), stejně jako v .app-menu. Variant="danger" (např. Odhlásit se) má vlastní červenou přes
   --wa-color-danger-fill-normal, tohoto přepisu se netýká. */
wa-dropdown-item {
	--wa-color-neutral-fill-normal: var(--app-color-brand-hover);
}

/* Navigace: levé menu s pevnou šířkou. Položky se vykreslují z dat webu (AkvzSite.menus(), PortalPages.html
   přes jp:each, viz doc/spec/AKVZ-A19.md): hlavní menu (#menu) a pod ním sekce „Správa“ (#menu-sprava),
   obě se stejným vzhledem (.app-menu). */
.app-nav {
	padding-block: var(--wa-space-s);
	padding-inline-start: 0;
}

.app-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-3xs);
}

.app-menu a {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	color: var(--wa-color-text-normal);
	font-weight: 500;
	text-decoration: none;
}

.app-menu a i {
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-m);
	width: var(--wa-space-l);
	text-align: center;
}

.app-menu a:hover,
.app-menu a.active,
.app-menu a[aria-current="page"] {
	/* --app-color-brand-hover viz :root výše — mezikrok mezi fill-normal a fill-loud (škála quiet/normal/loud
	   ho sama nemá). Text zůstává stejný jako v klidu (--wa-color-text-normal, prakticky černá) — namíchaný
	   on-color vycházel jako nečitelná šedá. Aktivní položka (aktuální stránka) má stejné zvýraznění jako hover. */
	background-color: var(--app-color-brand-hover);
	color: var(--wa-color-text-normal);
}

.app-menu a:hover i,
.app-menu a.active i,
.app-menu a[aria-current="page"] i {
	color: inherit;
}

.app-menu a:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: var(--wa-focus-ring-offset);
}

/* Sekce „Správa“ pod hlavním menu: jen pro administrátory (celý blok skrytý, když je menu prázdné). */
.app-menu-section {
	margin-block-start: var(--wa-space-m);
}

.app-menu-heading {
	margin: 0;
	padding: var(--wa-space-xs) var(--wa-space-s);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Hlavní obsah: wa-page dává slotovanému <main> výchozí padding var(--wa-space-3xl) ze všech stran
   (chunk.KCUYOW2Z.js) — nahoře je to zbytečně moc, zmenšuje se jen horní strana. */
main#content {
	padding-block-start: var(--wa-space-l);
}

/* Jednoduchý layout (SimplePages.html): bez menu, obsah centrovaný vodorovně i svisle mezi hlavičkou
   a patičkou. Sloupec menu má ve <wa-page> pevnou šířku --menu-width (viz výše), i když je prázdný,
   proto se tu nuluje. Slotovaný <main> leží v části main-content, která vyplňuje výšku (řádek 1fr
   gridu v chunk.KCUYOW2Z.js), ale sama je blok — flex na ní nechá <main> roztáhnout na celou výšku. */
wa-page.simple-page {
	--menu-width: 0;
	/* Pozadí za dialogem světle šedé jako levé menu portálu (nav[slot='navigation']). <wa-page> má
	   v :host výchozí --wa-color-surface-default (chunk.KCUYOW2Z.js), které pravidlo stránky na hostu
	   přebije. Dialog (<wa-card>) má vlastní pozadí --wa-color-surface-default, takže zůstává bílý. */
	background-color: var(--wa-color-surface-lowered);
}

wa-page.simple-page::part(main-content) {
	display: flex;
	flex-direction: column;
}

main#content.simple-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-block: var(--wa-space-xl);
}

/* Šířka obsahu: 40 % šířky okna, ale nejméně 28rem; na užším displeji celá dostupná šířka. */
main#content.simple-content > #page {
	inline-size: 100%;
	max-inline-size: max(28rem, 40vw);
}

/* Rozcestníky z dat menu: úvod (HomePage.html, menu „hlavni“ bez Aktualit) a administrace (AdministracePage.html, menu „sprava“). */
.menu-tiles {
	--min-column-size: 16rem;
}

.menu-tile {
	color: inherit;
	text-decoration: none;
}

.menu-tile[hidden] {
	display: none;
}

.menu-tile wa-card {
	height: 100%;
	transition: border-color var(--wa-transition-fast);
}

.menu-tile:hover wa-card,
.menu-tile:focus-visible wa-card {
	border-color: var(--wa-color-brand-border-loud);
}

.menu-tile h2 {
	margin: 0;
	color: var(--wa-color-brand-on-quiet);
}

.menu-tile p {
	margin: 0;
}

/* Panel Aktualit na úvodu (HomePage.html): pod dlaždicemi přes celou šířku obsahu, nejnovější příspěvky oddělené
   linkou; badge sekce se na úzkém displeji zalomí pod název (wa-split). */
.home-aktuality h2,
.home-akce h2 {
	margin: 0;
	color: var(--wa-color-brand-on-quiet);
}

.home-aktuality-seznam,
.home-akce-seznam {
	list-style: none;
	margin: 0;
	padding: 0;
}

.home-aktuality-seznam li,
.home-akce-seznam li {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-3xs);
	padding-block: var(--wa-space-s);
	border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.home-aktuality-seznam li:first-child,
.home-akce-seznam li:first-child {
	padding-block-start: 0;
	border-block-start: none;
}

.home-aktuality-seznam a,
.home-akce-seznam a {
	overflow-wrap: anywhere;
}

/* Panel Nejbližší akce na úvodu (HomePage.html, AKVZ-A27): stejný vzhled jako panel Aktualit, datum vlevo jako
   v seznamu kalendáře. */
.home-akce-seznam li {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wa-space-s);
}

.home-akce-seznam li > .wa-stack {
	flex: 1;
	min-width: 0;
}

/* Administrace uživatelů (UzivatelePage.html, UzivatelDetailPage.html). */
.table-scroll {
	overflow-x: auto;
}

.users-table {
	inline-size: 100%;
}

.user-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--wa-space-xs) var(--wa-space-l);
	margin: 0;
}

.user-facts dt {
	color: var(--wa-color-text-quiet);
}

.user-facts dd {
	margin: 0;
}

/* Hlavička stránky (PortalPages.html): drobečková navigace, titulek a na stejném řádku kontextové menu;
   na úzkém displeji se akce zalomí pod titulek. Prázdná navigace se nezobrazí. */
.page-header {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-2xs);
}

.page-breadcrumb {
	margin: 0;
}

.page-breadcrumb:empty {
	display: none;
}

.page-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-s) var(--wa-space-m);
}

.page-title-row h1 {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Příspěvek diskuze (DiskuzeTemaPage.html): odsazení kotvy pod hlavičku stránky při skoku na #komentar-… */
.prispevek {
	scroll-margin-top: var(--wa-space-3xl);
}

/* Vykreslený Markdown příspěvků (Markdown.java: odstavce, nadpisy 2–5, seznamy, citace, zvýrazněný blok, přeškrtnutí,
   kód ze starších textů, odkazy; AKVZ-A28). */
.markdown {
	overflow-wrap: anywhere;
}

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

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

.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote,
.markdown pre {
	margin: 0 0 var(--wa-space-s);
}

.markdown ul,
.markdown ol {
	padding-left: var(--wa-space-l);
}

/* Nadpisy v textu jsou menší než nadpis stránky (h1) i nadpisy sekcí stránky. */
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5 {
	margin: var(--wa-space-l) 0 var(--wa-space-xs);
	font-weight: var(--wa-font-weight-heading);
	line-height: var(--wa-line-height-condensed);
	color: var(--wa-color-text-normal);
}

.markdown h2 {
	font-size: var(--wa-font-size-xl);
}

.markdown h3 {
	font-size: var(--wa-font-size-l);
}

.markdown h4 {
	font-size: var(--wa-font-size-m);
}

.markdown h5 {
	font-size: var(--wa-font-size-m);
	color: var(--wa-color-text-quiet);
}

.markdown del {
	color: var(--wa-color-text-quiet);
}

.markdown wa-callout {
	margin: 0 0 var(--wa-space-s);
}

.markdown wa-callout > :last-child {
	margin-bottom: 0;
}

/* Úvod (perex) článku, tématu a akce: text před oddělovačem (Markdown.html, AKVZ-A28). */
.markdown > .perex {
	margin: 0 0 var(--wa-space-m);
	font-size: var(--wa-font-size-l);
}

.markdown > .perex > :last-child {
	margin-bottom: 0;
}

.markdown blockquote {
	padding: var(--wa-space-2xs) var(--wa-space-m);
	border-left: var(--wa-border-width-l) solid var(--wa-color-surface-border);
	color: var(--wa-color-text-quiet);
}

.markdown code {
	font-family: var(--wa-font-family-code);
	font-size: 0.9em;
	padding: 0 var(--wa-space-3xs);
	background-color: var(--wa-color-surface-lowered);
	border-radius: var(--wa-border-radius-s);
}

.markdown pre {
	padding: var(--wa-space-s);
	overflow-x: auto;
	background-color: var(--wa-color-surface-lowered);
	border-radius: var(--wa-border-radius-m);
}

.markdown pre code {
	padding: 0;
	background: none;
}

.markdown-napoveda {
	margin: 0;
}

/* Wysiwyg editor textu příspěvků (AkvzEditorCore.js, AKVZ-A24, AKVZ-A28): popisek, rámeček a fokus jako wa-textarea, plocha
   jako vykreslený text (.markdown), lišta z nativních tlačítek WebAwesome. */
.editor {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-2xs);
}

.editor-popisek {
	font-size: var(--wa-form-control-label-font-size, var(--wa-font-size-m));
	font-weight: var(--wa-form-control-label-font-weight);
	line-height: var(--wa-form-control-label-line-height);
	color: var(--wa-form-control-label-color);
	cursor: default;
}

.editor-ramecek {
	background-color: var(--wa-form-control-background-color);
	border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
	border-radius: var(--wa-form-control-border-radius);
	transition: outline var(--wa-transition-fast) var(--wa-transition-easing);
}

.editor-ramecek:focus-within {
	outline: var(--wa-focus-ring);
	outline-offset: var(--wa-focus-ring-offset);
}

.editor-neplatny .editor-ramecek {
	border-color: var(--wa-color-danger-border-loud);
}

.editor-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-3xs);
	padding: var(--wa-space-3xs);
	border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.editor-tlacitko {
	min-width: var(--wa-form-control-height);
	padding-inline: var(--wa-space-xs);
	color: var(--wa-color-text-normal);
}

.editor-tlacitko[aria-pressed="true"] {
	color: var(--wa-color-brand-on-quiet);
	background-color: var(--wa-color-brand-fill-quiet);
}

.editor-tlacitko:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Výběr v liště (styl odstavce, druh zvýrazněného bloku) — nativní select se styly WebAwesome. */
.editor-vyber {
	width: auto;
	min-width: 9rem;
}

.editor-vyber[hidden] {
	display: none;
}

.editor-oddelovac {
	align-self: stretch;
	width: var(--wa-border-width-s);
	margin: var(--wa-space-2xs) var(--wa-space-3xs);
	background-color: var(--wa-color-surface-border);
}

.editor-text {
	position: relative;
	min-height: calc(var(--editor-rows, 5) * 1.5em);
	padding: var(--wa-space-s) var(--wa-form-control-padding-inline);
	outline: none;
	white-space: pre-wrap;
	white-space: break-spaces;
	word-wrap: break-word;
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0;
}

.editor-text.editor-prazdny::before {
	content: attr(data-placeholder);
	position: absolute;
	pointer-events: none;
	color: var(--wa-form-control-placeholder-color);
}

.editor-text li {
	position: relative;
}

.editor-text a {
	cursor: text;
}

/* Oddělovač perexu v editoru: čárkovaná čára s popiskem (v zobrazení se nevykreslí). */
.editor-text hr.editor-konec-uvodu {
	position: relative;
	margin: var(--wa-space-l) 0;
	border: none;
	border-top: var(--wa-border-width-m) dashed var(--wa-color-brand-border-normal);
	overflow: visible;
}

.editor-text hr.editor-konec-uvodu::after {
	content: "konec úvodu";
	position: absolute;
	top: -0.75em;
	left: var(--wa-space-s);
	padding: 0 var(--wa-space-2xs);
	font-size: var(--wa-font-size-xs);
	color: var(--wa-color-brand-on-quiet);
	background-color: var(--wa-form-control-background-color);
}

.editor-text hr.ProseMirror-selectednode {
	outline: var(--wa-focus-ring);
}

/* Zvýrazněný blok v editoru: barva podle druhu jako wa-callout při zobrazení, název druhu nad obsahem. */
.editor-callout {
	margin: 0 0 var(--wa-space-s);
	padding: var(--wa-space-s) var(--wa-space-m);
	border: var(--wa-border-width-s) solid var(--callout-border);
	border-radius: var(--wa-border-radius-m);
	background-color: var(--callout-fill);
}

.editor-callout::before {
	display: block;
	margin-bottom: var(--wa-space-2xs);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-semibold);
	color: var(--callout-text);
}

.editor-callout > :last-child {
	margin-bottom: 0;
}

.editor-callout-note {
	--callout-border: var(--wa-color-brand-border-quiet);
	--callout-fill: var(--wa-color-brand-fill-quiet);
	--callout-text: var(--wa-color-brand-on-quiet);
}

.editor-callout-note::before {
	content: "Poznámka";
}

.editor-callout-important {
	--callout-border: var(--wa-color-warning-border-quiet);
	--callout-fill: var(--wa-color-warning-fill-quiet);
	--callout-text: var(--wa-color-warning-on-quiet);
}

.editor-callout-important::before {
	content: "Důležité";
}

.editor-callout-warning {
	--callout-border: var(--wa-color-danger-border-quiet);
	--callout-fill: var(--wa-color-danger-fill-quiet);
	--callout-text: var(--wa-color-danger-on-quiet);
}

.editor-callout-warning::before {
	content: "Upozornění";
}

.editor-napoveda {
	color: var(--wa-form-control-hint-color);
}

.editor-chyba {
	margin: 0;
	font-size: var(--wa-font-size-s);
	color: var(--wa-color-danger-on-quiet);
}

/* Ze stylů prosemirror-view (style/prosemirror.css) — skrytý výběr a náhradní kurzor. */
.ProseMirror-hideselection *::selection {
	background: transparent;
}

.ProseMirror-hideselection {
	caret-color: transparent;
}

img.ProseMirror-separator {
	display: inline !important;
	border: none !important;
	margin: 0 !important;
}

/* Přílohy příspěvku (AKVZ-A23): seznam na detailu (DiskuzeTemaPage.html, InformaceClanekPage.html) a pole ve formuláři. */
.prilohy-seznam {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prilohy-seznam li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wa-space-2xs) var(--wa-space-xs);
	padding: var(--wa-space-2xs) 0;
	overflow-wrap: anywhere;
}

.prilohy-seznam li + li {
	border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.prilohy-seznam i,
.priloha-radek > i {
	width: 1.25em;
	text-align: center;
	color: var(--wa-color-text-quiet);
}

.prilohy-label {
	font-weight: var(--wa-font-weight-semibold);
}

.priloha-radek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-xs) var(--wa-space-s);
}

.priloha-radek wa-input {
	flex: 1 1 16rem;
	min-width: 0;
}

.prilohy-pole input[type="file"] {
	max-width: 100%;
	font: inherit;
}

/* Položka seznamu příspěvků (InformaceSeznamPage.html, DiskuzeSeznamPage.html, AktualityPage.html): avatar autora přes
   dva řádky, vedle něj 1. řádek titulek a vpravo počty a rubrika, 2. řádek autor a datum a vpravo štítky; perex pod
   avatarem přes celou šířku, o stupeň větším písmem. Kompaktní seznam na úvodu (HomePage.html) používá jen řádky .polozka-radek bez avataru. Pravá část řádku
   (poslední prvek) zůstane vpravo i po zalomení na úzkém displeji. */
.polozka {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wa-space-3xs) var(--wa-space-s);
}

.polozka > wa-avatar {
	grid-row: span 2;
}

.polozka-radek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-2xs) var(--wa-space-s);
	min-width: 0;
}

.polozka-radek > :first-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.polozka-radek > :last-child {
	margin-inline-start: auto;
}

/* Dvě varianty umístění štítků: výchozí ve 2. řádku vpravo (.stitky-pod-titulkem), s třídou .znacky-v-titulku na
   kontejneru seznamu v 1. řádku mezi ostatními značkami (přílohy, komentáře, štítky, rubrika — .stitky-v-titulku).
   Šablona vykreslí štítky na obou místech, zobrazí se jen jedno. */
.stitky.stitky-v-titulku,
.znacky-v-titulku .stitky.stitky-pod-titulkem {
	display: none;
}

.znacky-v-titulku .stitky.stitky-v-titulku {
	display: inline-flex;
}

.polozka > .polozka-perex {
	grid-column: 1 / -1;
	margin-block-start: var(--wa-space-2xs);
	font-size: var(--wa-font-size-l);
}

/* Perex článku a ukázka textu (InformaceSeznamPage.html, AktualityPage.html): prostý text. */
.perex {
	margin: 0;
	overflow-wrap: anywhere;
	color: var(--wa-color-text-quiet);
}

/* Datum akce v kalendáři (KalendarSeznamPage.html, panel na úvodu): den výrazně, měsíc drobně pod ním. */
.udalost-datum {
	min-width: 3.5rem;
	text-align: center;
	color: var(--wa-color-brand-on-quiet);
	text-transform: uppercase;
	font-size: var(--wa-font-size-s);
}

.udalost-datum strong {
	display: block;
	font-size: var(--wa-font-size-2xl);
	line-height: 1;
}

/* Kalendář akcí (AKVZ-A27): seznam po měsících, detail s termínem, formulář a měsíční přehled. */
.kalendar-mesic h2 {
	margin: 0;
	color: var(--wa-color-brand-on-quiet);
}

.kalendar-termin .wa-flank > .wa-stack {
	min-width: 0;
}

.akce-terminy {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-2xs);
	font-size: var(--wa-font-size-l);
}

.akce-terminy li {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-2xs) var(--wa-space-l);
}

.akce-terminy i {
	color: var(--wa-color-brand-on-quiet);
	width: 1.25em;
}

.akce-termin-casy {
	--min-column-size: 14rem;
}

/* Měsíční přehled (KalendarMesicPage.html): mřížka 7 sloupců od pondělí, akce jako barevné štítky podle prvního
   štítku akce (inline proměnná --stitek-barva prvního štítku, AKVZ-A32). Na úzkém displeji seznam dní, které mají akce. */
.kalendar-mrizka {
	display: flex;
	flex-direction: column;
	border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	overflow: hidden;
}

.kalendar-hlavicka,
.kalendar-tyden {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.kalendar-hlavicka span {
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: 600;
	text-transform: uppercase;
	background-color: var(--wa-color-surface-lowered);
}

.kalendar-den {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-3xs);
	min-height: 6rem;
	padding: var(--wa-space-2xs);
	border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
	border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.kalendar-den:first-child {
	border-inline-start: none;
}

.kalendar-den.vikend {
	background-color: var(--wa-color-surface-lowered);
}

.kalendar-den.mimo-mesic .kalendar-den-cislo {
	color: var(--wa-color-text-quiet);
	opacity: 0.6;
}

.kalendar-den-cislo {
	font-size: var(--wa-font-size-s);
	font-weight: 600;
}

.kalendar-den.dnes .kalendar-den-cislo {
	align-self: flex-start;
	padding: 0 var(--wa-space-2xs);
	border-radius: var(--wa-border-radius-pill);
	background-color: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
}

.kalendar-den-nazev {
	display: none;
}

.kalendar-akce {
	display: block;
	padding: 0 var(--wa-space-2xs);
	border-radius: var(--wa-border-radius-s);
	border-inline-start: var(--wa-border-width-l) solid var(--stitek-barva, var(--wa-color-brand-fill-loud));
	background-color: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-text-normal);
	font-size: var(--wa-font-size-xs);
	line-height: 1.6;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kalendar-akce.pokracovani {
	opacity: 0.75;
}

.kalendar-akce-cas {
	font-weight: 600;
}

@media (max-width: 48rem) {
	.kalendar-mrizka {
		border: none;
		gap: var(--wa-space-s);
	}
	
	.kalendar-hlavicka {
		display: none;
	}
	
	.kalendar-tyden {
		display: flex;
		flex-direction: column;
		gap: var(--wa-space-s);
	}
	
	.kalendar-den {
		min-height: 0;
		padding: 0;
		border: none;
		background-color: transparent;
	}
	
	.kalendar-den.vikend {
		background-color: transparent;
	}
	
	.kalendar-den.bez-akci,
	.kalendar-den.mimo-mesic,
	.kalendar-den-cislo {
		display: none;
	}
	
	.kalendar-den-nazev {
		display: block;
		font-weight: 600;
		color: var(--wa-color-brand-on-quiet);
	}
	
	.kalendar-akce {
		padding: var(--wa-space-2xs) var(--wa-space-xs);
		font-size: var(--wa-font-size-s);
		white-space: normal;
	}
}

/* Dokumenty (AKVZ-A33): drobečky složek, dlaždice složek s počtem dokumentů, řádek dokumentu v seznamu (ikona typu
   místo avataru, popis prostým textem se zachovanými řádky) a detail s tlačítkem ke stažení. */
.drobky a + a::before {
	content: "/";
	display: inline-block;
	margin-inline: var(--wa-space-2xs);
	color: var(--wa-color-text-quiet);
}

.slozka-pocet {
	color: var(--wa-color-text-quiet);
}

.dokument-ikona {
	grid-row: span 2;
	width: 2.5rem;
	font-size: var(--wa-font-size-2xl);
	text-align: center;
	color: var(--wa-color-brand-on-quiet);
}

.dokument-popis {
	margin: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* Tlačítko ke stažení (seznam i detail): plave vpravo, popis dokumentu ho obtéká a nezabírá řádek navíc; bez popisu
   zůstane tlačítko samotné v pravém dolním rohu bloku. */
.dokument-popis-wrap {
	display: flow-root;
}

.dokument-stahnout {
	float: inline-end;
	margin-inline-start: var(--wa-space-s);
	margin-block-end: var(--wa-space-2xs);
}

.dokument-slozka {
	text-decoration: none;
}

.dokument-soubor {
	margin: 0;
	overflow-wrap: anywhere;
}

.dokument-soubor i {
	color: var(--wa-color-text-quiet);
}

/* Složky dokumentů (DokumentyStromPage.html, AKVZ-A33): plochý seznam složek a dokumentů, odsazení podle hloubky dává
   inline styl řádku (${styl}), tady jen odlišení složky od dokumentu. Popis (typ a velikost, nebo počet dokumentů)
   je hned za názvem, oddělený nevýrazným „···“ — ne zarovnaný doprava, aby na širokém řádku nebylo nejasné, ke
   kterému názvu patří. Mezera před oddělovačem se s ubývajícím místem zmenšuje, pak oddělovač zmizí a nakonec i
   samotný popis (řádek pak nese jen název). */
.strom {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-3xs);
}

.strom li {
	display: flex;
	align-items: baseline;
	column-gap: var(--wa-space-l);
	row-gap: 0;
	flex-wrap: wrap;
}

.strom a {
	text-decoration: none;
}

.strom-slozka > a {
	font-weight: var(--wa-font-weight-bold);
}

.strom-popis {
	color: var(--wa-color-text-quiet);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 20rem;
}

.strom-popis::before {
	content: "···";
	margin-inline-end: var(--wa-space-2xs);
}

@media (max-width: 48rem) {
	.strom li {
		column-gap: var(--wa-space-3xs);
	}
	
	.strom-popis {
		max-width: 8rem;
	}
	
	.strom-popis::before {
		content: "";
		margin-inline-end: 0;
	}
}

@media (max-width: 30rem) {
	.strom-popis {
		display: none;
	}
}

/* Dokumentace z Markdownu — Návody a O asociaci (DokumentacePages.html): vlevo obsah dokumentu (vzhled levého
   menu, při posunu zůstává na místě), vpravo text kapitoly s omezenou délkou řádku. Úvod obsah nemá (dlaždice
   kapitol), sloupec se pak nevyhrazuje. Na úzkém displeji je obsah pod textem. */
.kapitoly {
	display: grid;
	grid-template-columns: 14rem minmax(0, 1fr);
	gap: var(--wa-space-xl);
	align-items: start;
}

.kapitoly:has(> .kapitoly-obsah[hidden]) {
	grid-template-columns: minmax(0, 1fr);
}

.kapitoly-obsah {
	position: sticky;
	top: var(--wa-space-l);
}

.kapitoly-hlavni {
	min-width: 0;
}

.dokumentace {
	max-inline-size: 48rem;
}

.dokumentace h2 {
	margin: var(--wa-space-l) 0 var(--wa-space-xs);
	font-size: var(--wa-font-size-l);
}

.dokumentace h3 {
	margin: var(--wa-space-m) 0 var(--wa-space-2xs);
	font-size: var(--wa-font-size-m);
}

.dokumentace table {
	width: 100%;
	margin: 0 0 var(--wa-space-s);
	border-collapse: collapse;
}

.dokumentace th,
.dokumentace td {
	padding: var(--wa-space-xs) var(--wa-space-s);
	text-align: start;
	vertical-align: top;
	border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.dokumentace th {
	color: var(--wa-color-text-quiet);
	font-weight: 600;
}

.kapitoly-listovani {
	max-inline-size: 48rem;
}

@media (max-width: 48rem) {
	.kapitoly {
		grid-template-columns: minmax(0, 1fr);
	}
	
	.kapitoly-obsah {
		position: static;
		order: 2;
	}
}

/* Jednoduchá datová tabulka (DokumentyPage.html, PredpisyPage.html). */
.app-table {
	width: 100%;
	border-collapse: collapse;
}

.app-table th,
.app-table td {
	padding: var(--wa-space-xs) var(--wa-space-s);
	text-align: start;
	border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.app-table th {
	color: var(--wa-color-text-quiet);
	font-weight: 600;
}

/* Štítky příspěvků (AKVZ-A25): <a class="stitek stitek-<kód>"> v seznamech Informací a Diskuze, na detailu,
   v Aktualitách a na úvodu. Barvu dává štítek (Tag.color, AKVZ-A32) inline proměnnou --stitek-barva
   (style="--stitek-barva: var(--wa-color-<barva>)") na štítku, kartě příspěvku (barva prvního štítku) a na detailu
   na obalu karty .stitky-karta — proměnná se dědí. Obecná pravidla níže ji použijí jako pozadí štítku a levý okraj
   karty; bez ní je štítek neutrální. */
.stitky {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wa-space-3xs);
}

.stitek {
	display: inline-block;
	padding: 0 var(--wa-space-xs);
	border-radius: var(--wa-border-radius-pill);
	background-color: var(--stitek-barva, var(--wa-color-neutral-fill-loud));
	color: white;
	font-size: var(--wa-font-size-xs);
	font-weight: 600;
	line-height: 1.8;
	text-decoration: none;
	white-space: nowrap;
}

.stitek:hover,
.stitek:focus-visible {
	filter: brightness(0.9);
}

wa-card[class*="stitek-"],
.stitky-karta[class*="stitek-"] > article > wa-card {
	border-inline-start: var(--wa-border-width-l) solid var(--stitek-barva, var(--wa-color-neutral-border-loud));
}

/* Atribut hidden (např. hidden="${bezChyby}" v šablonách) musí skrýt i komponenty WebAwesome, jejichž
   :host display by ho jinak přebil. */
[hidden] {
	display: none !important;
}

/* Avatar v profilu (ProfilPage.html, doc/spec/AKVZ-A29.md): ve formuláři aktuální avatar a tlačítko, volby v dialogu
   s velkým náhledem a mřížkami. Barvy, ikony a obrázky jsou nativní <input type="radio"> v <label> (zvolený je
   orámovaný), pole je jen vizuálně skryté, aby zůstalo ovladatelné klávesnicí. Mřížky se zalamují podle šířky. */
.avatar-profil-obrazek {
	--size: 3rem;
	font-size: var(--wa-font-size-l);
}

.avatar-dialog {
	--width: min(46rem, 100vw);
}

/* Pevná výška dialogu, aby neskákal při přepnutí typu (sekce mají různou výšku); obsah (část body) se posouvá. Horní
   a dolní okraj dohromady je polovina z max(100dvh − 48rem, 2 × 2xl): na vysoké obrazovce polovina volného místa nad
   48rem, na nízké 2xl. Vlastní max-height dialogu z WebAwesome (100 % − 2xl, na telefonu 80vh) zůstává jako horní mez. */
.avatar-dialog::part(dialog) {
	height: min(calc(50dvh + 24rem), calc(100dvh - var(--wa-space-2xl)));
}

.avatar-nahled {
	--size: 6rem;
	font-size: var(--wa-font-size-2xl);
}

.avatar-popisek {
	font-weight: var(--wa-form-control-label-font-weight);
	font-size: var(--wa-form-control-label-font-size);
}

.avatar-inicialy {
	max-width: 8rem;
}

.avatar-mrizka {
	/* Volby mají velikost avatara v seznamech příspěvků (výchozí --size <wa-avatar>), ať výběr odpovídá tomu, jak se
	   avatar nejčastěji zobrazí. */
	--avatar-volba: 3rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, var(--avatar-volba));
	gap: calc(var(--wa-space-s) / 2);
}

.avatar-mrizka label {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--avatar-volba);
	height: var(--avatar-volba);
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.avatar-mrizka input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.avatar-mrizka label:has(input:checked) {
	outline-color: var(--wa-color-brand-border-loud);
}

.avatar-mrizka label:has(input:focus-visible) {
	outline: var(--wa-focus-ring);
}

.avatar-barva {
	background-color: var(--swatch);
	border: 1px solid var(--wa-color-neutral-border-quiet);
}

.avatar-ikona {
	font-size: calc(var(--avatar-volba) * 0.5);
	background-color: var(--wa-color-neutral-fill-quiet);
}

.avatar-obrazek img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}