/* =============================================================================
   DocForge – hlavní styl aplikace
   -----------------------------------------------------------------------------
   Obsah:
     1. Design tokeny (světlý i tmavý motiv)
     2. Reset a základní typografie
     3. Layout aplikace (sidebar, topbar, obsah)
     4. Komponenty (tlačítka, formuláře, tabulky, panely, dialogy, toasty)
     5. Editor dokumentu (tři sloupce, CKEditor, panely)
     6. Condition builder a proměnné
     7. Náhled dokumentu a tisk
     8. Responzivita
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokeny */
:root {
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--bg: #f4f6f9;
	--surface: #ffffff;
	--surface-2: #f8fafc;
	--surface-3: #eef2f7;
	--border: #dde3ec;
	--border-strong: #c6cfdd;

	--text: #10151f;
	--text-muted: #5b6779;
	--text-soft: #8a94a6;

	--primary: #2563eb;
	--primary-hover: #1d4ed8;
	--primary-soft: #e6edfd;
	--on-primary: #ffffff;

	--success: #15803d;
	--success-soft: #dcfce7;
	--warning: #b45309;
	--warning-soft: #fef3c7;
	--danger: #b91c1c;
	--danger-soft: #fee2e2;
	--info-soft: #e0f2fe;

	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 14px;

	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--shadow: 0 4px 16px rgba(15, 23, 42, .08);
	--shadow-lg: 0 18px 48px rgba(15, 23, 42, .18);

	--sidebar-width: 248px;
	--topbar-height: 60px;
	--panel-left: 260px;
	--panel-right: 330px;

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--bg: #0e131b;
		--surface: #151b25;
		--surface-2: #1a222e;
		--surface-3: #202a38;
		--border: #26303e;
		--border-strong: #354254;

		--text: #e7ecf3;
		--text-muted: #9aa7b8;
		--text-soft: #74829a;

		--primary: #5b8cff;
		--primary-hover: #7aa2ff;
		--primary-soft: #1b2740;
		--on-primary: #0b1220;

		--success: #4ade80;
		--success-soft: #14301f;
		--warning: #fbbf24;
		--warning-soft: #33260c;
		--danger: #f87171;
		--danger-soft: #3a1717;
		--info-soft: #12283a;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		--shadow: 0 4px 16px rgba(0, 0, 0, .45);
		--shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: #0e131b;
	--surface: #151b25;
	--surface-2: #1a222e;
	--surface-3: #202a38;
	--border: #26303e;
	--border-strong: #354254;

	--text: #e7ecf3;
	--text-muted: #9aa7b8;
	--text-soft: #74829a;

	--primary: #5b8cff;
	--primary-hover: #7aa2ff;
	--primary-soft: #1b2740;
	--on-primary: #0b1220;

	--success: #4ade80;
	--success-soft: #14301f;
	--warning: #fbbf24;
	--warning-soft: #33260c;
	--danger: #f87171;
	--danger-soft: #3a1717;
	--info-soft: #12283a;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--shadow: 0 4px 16px rgba(0, 0, 0, .45);
	--shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);

	color-scheme: dark;
}

:root[data-theme="cream"] {
	--bg: #f3eddf;
	--surface: #fffdf7;
	--surface-2: #faf5e9;
	--surface-3: #eee5d4;
	--border: #ddd1bb;
	--border-strong: #cbbda3;
	--text: #302a22;
	--text-muted: #6f6455;
	--text-soft: #968875;
	--primary: #9a5b2f;
	--primary-hover: #7c4523;
	--primary-soft: #f2dfca;
	--on-primary: #fff;
	color-scheme: light;
}

:root[data-theme="lined"],
:root[data-theme="grid"] {
	--bg: #f5f8fb;
	--surface: #fff;
	--surface-2: #f8fbfd;
	--surface-3: #eaf1f6;
	--border: #d5e0e8;
	--border-strong: #bdccd8;
	--text: #17212b;
	--text-muted: #566878;
	--text-soft: #8192a1;
	--primary: #2867a5;
	--primary-hover: #1f5488;
	--primary-soft: #dfecf8;
	--on-primary: #fff;
	color-scheme: light;
}

/* ------------------------------------------------------- 2. reset a základ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}
:root[data-theme="lined"] body {
	background-color: var(--bg);
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(57, 119, 174, .13) 28px);
	background-attachment: fixed;
}
:root[data-theme="grid"] body {
	background-color: var(--bg);
	background-image:
		linear-gradient(rgba(57, 119, 174, .1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(57, 119, 174, .1) 1px, transparent 1px);
	background-size: 24px 24px;
	background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; line-height: 1.3; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre { font-family: var(--font-mono); font-size: .88em; }
code {
	background: var(--surface-3);
	border-radius: 4px;
	padding: .1em .35em;
	word-break: break-word;
}

hr.divider { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.stack > * + * { margin-top: 1rem; }
.link { font-weight: 600; }

/* --------------------------------------------------------------- 3. layout */
.app-shell {
	display: grid;
	grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
	min-height: 100vh;
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem .75rem;
	background: var(--surface);
	border-right: 1px solid var(--border);
	position: sticky;
	top: 0;
	height: 100vh;
}

.sidebar__brand {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem .5rem 1rem;
}

.sidebar__logo {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--primary);
	color: var(--on-primary);
	font-weight: 800;
	font-size: .82rem;
	letter-spacing: .04em;
}

.sidebar__name { font-weight: 700; letter-spacing: -.01em; }

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .7rem;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	font-weight: 550;
	transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.nav-item.is-active { background: var(--primary-soft); color: var(--primary); }
.nav-item__icon { width: 1.1rem; text-align: center; opacity: .85; }

.sidebar__footer { border-top: 1px solid var(--border); padding-top: .75rem; }

.app-main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--topbar-height);
	padding: .5rem 1.25rem;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}

.topbar__title { font-weight: 650; font-size: 1.05rem; flex: 1; min-width: 0; }
.topbar__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.topbar__burger { display: none; }

.user-chip { display: flex; align-items: center; gap: .5rem; padding-left: .5rem; }
.user-chip__avatar {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--surface-3);
	font-weight: 700;
	font-size: .85rem;
}
.user-chip__meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-chip__name { font-weight: 600; font-size: .85rem; }
.user-chip__role { color: var(--text-soft); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }

.content { padding: 1.5rem 1.25rem 3rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* ----------------------------------------------------------- 4. komponenty */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .5rem .9rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--surface-3);
	color: var(--text);
	font: inherit;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
	text-decoration: none;
}
.btn:hover { background: var(--border); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--surface); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-3); color: var(--text); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--sm { padding: .3rem .6rem; font-size: .82rem; }
.btn--block { width: 100%; }
.btn--icon { padding: .35rem .55rem; background: transparent; font-size: 1.1rem; line-height: 1; }
.btn--loading { position: relative; color: transparent !important; }
.btn--loading::after {
	content: "";
	position: absolute;
	width: 14px; height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: df-spin .7s linear infinite;
	color: var(--on-primary);
}
@keyframes df-spin { to { transform: rotate(360deg); } }

.button-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field--grow { flex: 1; min-width: 220px; }
.field--actions { justify-content: flex-end; flex-direction: row; gap: .5rem; align-items: flex-end; }
.field__label { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.field__hint { font-size: .78rem; color: var(--text-soft); margin: 0; }

.input, input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="number"], input[type="file"], select, textarea {
	width: 100%;
	padding: .5rem .65rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: .92rem;
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
textarea { resize: vertical; }
.input--area { min-height: 5rem; }
.input--code { font-family: var(--font-mono); font-size: .84rem; line-height: 1.5; }

.checkbox { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; }
.checkbox input { width: auto; }

.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 1.1rem;
	border-bottom: 1px solid var(--border);
	background: var(--surface-2);
}
.panel__title { font-size: .98rem; }
.panel__meta { color: var(--text-soft); font-size: .82rem; }
.panel__body { padding: 1.1rem; }
.panel__text { color: var(--text-muted); font-size: .9rem; }
.panel__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .6rem;
	padding: .9rem 1.1rem;
	border-top: 1px solid var(--border);
	background: var(--surface-2);
}

/* serverova potvrzovaci obrazovka (app/Presentation/confirm.latte) */
.panel--confirm { max-width: 640px; margin: 0 auto; }
.confirm__question { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text); }
.confirm__details {
	margin: .9rem 0 0;
	padding-left: 1.2rem;
	color: var(--text-muted);
	font-size: .9rem;
	line-height: 1.7;
}
.confirm__warning { margin: .9rem 0 0; color: var(--danger); font-size: .88rem; font-weight: 600; }
.confirm__actions form { margin: 0; }

.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.panel-grid--wide { grid-template-columns: 3fr 2fr; }
/* Mrizka pro dvojici panelu vedle sebe. Zakladni .panel-grid sklada sloupce
   pres auto-fit, takze na sirokem monitoru vyrobi tri i vic sloupcu - a kdyz
   jsou panely jen dva, zbyle bunky zustanou prazdne. Auto-fit je nesbali,
   protoze radek pres celou sirku (grid-column: 1 / -1) je obsazeny drzi. */
.panel-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Buňka mřížky se sama nezúží pod šířku svého obsahu (má min-width: auto), takže
   široká tabulka nebo dlouhý řetězec ji roztáhne přes stránku a dole se objeví
   vodorovný posuvník s prázdným místem vpravo. Tohle dovolí buňku zmenšit;
   obsah, který se nevejde, si posouvá vlastní obálka (.table-wrap). */
.panel-grid > * { min-width: 0; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.stat-card {
	padding: 1.1rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.stat-card__label { color: var(--text-muted); font-size: .82rem; margin: 0 0 .35rem; }
.stat-card__value { font-size: 1.9rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.stat-card__meta { color: var(--text-soft); font-size: .8rem; margin: .25rem 0 0; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; padding: 1.1rem; }
.card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
.card__title { font-size: .95rem; }
.card__text { color: var(--text-muted); font-size: .85rem; flex: 1; }
.card__footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card__meta { color: var(--text-soft); font-size: .78rem; }

.option-card { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.option-card__title { font-size: .92rem; margin-bottom: .35rem; }
.option-card__text { color: var(--text-muted); font-size: .86rem; }

/*
 * Datové tabulky rozhraní (přehledy, historie verzí, dialogy).
 *
 * Selektor je schválně `table.table`, ne `.table`: obsah dokumentu obaluje
 * tabulky do <figure class="table">, takže potomkovský selektor by se propsal
 * dovnitř dokumentu a přebil jeho vzhled - poslední řádek tabulky by třeba
 * přišel o spodní rámeček.
 */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.table th, table.table td { padding: .7rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 700; }
table.table tbody tr:hover { background: var(--surface-2); }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table--compact th, table.table--compact td { padding: .4rem .6rem; font-size: .82rem; white-space: nowrap; }
.table__link { font-weight: 600; }
.table__sub { display: block; color: var(--text-soft); font-size: .8rem; margin-top: .15rem; }
.table__col--narrow { width: 1%; white-space: nowrap; }
.table__col--actions { width: 1%; white-space: nowrap; text-align: right; }
.table__actions { text-align: right; white-space: nowrap; }
.table__actions > .menu { margin-left: .35rem; }
.table__empty { color: var(--text-soft); text-align: center; padding: 2rem 1rem; }
table.table .table__col--check { width: 1%; white-space: nowrap; padding-right: 0; }
.table__col--check input { width: 1rem; height: 1rem; accent-color: var(--primary); cursor: pointer; }
table.table tr.is-deleted { opacity: .55; }
table.table tr.is-selected { background: var(--primary-soft); }

/* listek s hromadnymi akcemi nad tabulkou */
.bulk-bar {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	padding: .6rem 1.1rem;
	border-bottom: 1px solid var(--border);
	background: var(--surface-2);
}
.bulk-bar__info { color: var(--text-soft); font-size: .82rem; margin-right: .25rem; }
.bulk-bar__info strong { color: var(--text); }
.bulk-bar__spacer { flex: 1 1 auto; }
.bulk-bar .btn[disabled] { opacity: .45; cursor: not-allowed; }

.badge {
	display: inline-block;
	padding: .15rem .5rem;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 700;
	background: var(--surface-3);
	color: var(--text-muted);
	white-space: nowrap;
}
.badge--draft { background: var(--warning-soft); color: var(--warning); }
.badge--published { background: var(--success-soft); color: var(--success); }
.badge--archived { background: var(--surface-3); color: var(--text-soft); }

.alert {
	padding: .7rem .9rem;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	font-size: .9rem;
}
.alert--success { background: var(--success-soft); color: var(--success); }
.alert--error, .alert--danger { background: var(--danger-soft); color: var(--danger); }
.alert--warning { background: var(--warning-soft); color: var(--warning); }
.alert--info { background: var(--info-soft); color: var(--text); }
.flashes { display: flex; flex-direction: column; gap: .5rem; }
.form-errors { display: flex; flex-direction: column; gap: .4rem; }

.notice { padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .85rem; }
.notice--warning { background: var(--warning-soft); color: var(--warning); }
.notice--success { background: var(--success-soft); color: var(--success); }
.notice--info { background: var(--info-soft); color: var(--text); }

.status { font-weight: 600; font-size: .9rem; margin: 0 0 .35rem; }
.status--ok { color: var(--success); }
.status--off { color: var(--text-soft); }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .55rem 1.1rem;
	border-bottom: 1px solid var(--border);
	font-size: .88rem;
}
.list__item:last-child { border-bottom: 0; }
.list__title { font-weight: 600; }
.list__meta { color: var(--text-soft); font-size: .8rem; text-align: right; }
.list__empty { padding: 1rem 1.1rem; color: var(--text-soft); font-size: .86rem; }

.definition { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: .45rem 1rem; margin: 0; font-size: .88rem; }
.definition dt { color: var(--text-soft); }
.definition dd { margin: 0; }

.filters { padding: 1.1rem; }
.filters__row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.pagination__info { color: var(--text-soft); font-size: .85rem; }

/* Rozbalovaci menu = <details class="menu"> + <summary class="btn">.
   Otevira ho prohlizec sam, JavaScript uz jen dopocitava pozici seznamu,
   aby ho neuriznul vodorovny posuvnik tabulky. */
.menu { position: relative; display: inline-block; }
.menu > summary { display: inline-flex; align-items: center; gap: .3rem; list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }   /* trojuhelnicek Safari/Chrome */
.menu > summary::marker { content: ''; }                     /* trojuhelnicek Firefox */
.menu__list {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 40;
	min-width: 220px;
	padding: .3rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}
.menu__list--viewport {
	position: fixed;
	right: auto;
	z-index: 100;
	max-width: calc(100vw - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.menu__list[hidden] { display: none; }
/* Skryte pole pro vyber souboru - viditelny je misto nej <label class="btn">.
   Pole zustava v layoutu (ne display: none), aby slo ovladat i z klavesnice. */
/* Skryty file input za vlastnim tlacitkem. Selektor musi nest i typ prvku:
   pravidlo pro formularova pole vyse cili na input[type="file"] (specificita
   0-1-1) a nad samotnou tridou (0-1-0) by vyhralo - pole by zustalo siroke
   100 %. Protoze je zaroven position: absolute, clip ho sice skryje, ale z
   rozvrzeni nezmizi a roztahne stranku do sirky s vodorovnym posuvnikem. */
input[type="file"].visually-hidden-file,
.visually-hidden-file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.menu__item {
	display: block;
	width: 100%;
	padding: .45rem .6rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: .87rem;
	text-align: left;
	cursor: pointer;
}
.menu__item:hover { background: var(--surface-3); text-decoration: none; }
.menu__item--danger { color: var(--danger); }

.dialog {
	width: min(560px, 94vw);
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--shadow-lg);
}
.dialog--wide { width: min(760px, 96vw); }
.dialog::backdrop { background: rgba(8, 12, 20, .55); backdrop-filter: blur(2px); }
.dialog__form { display: flex; flex-direction: column; max-height: 88vh; }
.dialog__header {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
}
.dialog__title { font-size: 1rem; }
.dialog__body { padding: 1.2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.dialog__footer {
	display: flex; justify-content: flex-end; gap: .5rem;
	padding: .9rem 1.2rem; border-top: 1px solid var(--border); background: var(--surface-2);
}

.details summary { cursor: pointer; font-size: .87rem; font-weight: 600; color: var(--text-muted); }
.details[open] summary { margin-bottom: .6rem; }

.toast-container {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	max-width: min(380px, 90vw);
}
.toast {
	padding: .7rem .9rem;
	border-radius: var(--radius);
	background: var(--surface);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	font-size: .88rem;
	animation: df-toast-in .18s ease;
}
.toast--success { border-left: 3px solid var(--success); }
.toast--error { border-left: 3px solid var(--danger); }
.toast--warning { border-left: 3px solid var(--warning); }
.toast--info { border-left: 3px solid var(--primary); }
@keyframes df-toast-in { from { opacity: 0; transform: translateY(6px); } }

/* přihlašovací obrazovka */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; background: var(--bg); }
.auth-shell { width: min(430px, 100%); display: flex; flex-direction: column; gap: 1rem; }
/* instalace potrebuje sirsi list - formular ma dva sloupce */
.auth-shell--wide { width: min(48rem, 100%); }
.auth-card {
	padding: 1.75rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}
.auth-card__brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; }
.auth-card__logo {
	display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--primary); color: var(--on-primary); font-weight: 800;
}
.auth-card__title { font-size: 1.25rem; }
.auth-card__subtitle { color: var(--text-soft); font-size: .84rem; margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-card__hint { margin-top: 1.25rem; color: var(--text-soft); font-size: .78rem; }

/* Přehled nastavení. Navigace drží dlouhou administrátorskou stránku čitelnou
   a technické informace mají menší vizuální váhu než běžné volby. */
.settings-page {
	display: block;
	width: min(1120px, 100%);
	margin-inline: auto;
}
.settings-nav {
	position: sticky;
	top: var(--topbar-height);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	overflow-x: auto;
}
.settings-nav a {
	display: block;
	flex: 0 0 auto;
	padding: .8rem 1rem;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--text-muted);
	font-size: .88rem;
	font-weight: 600;
}
.settings-nav a:hover {
	border-bottom-color: var(--border-strong);
	background: transparent;
	color: var(--text);
	text-decoration: none;
}
.settings-nav a.is-active {
	border-bottom-color: var(--primary);
	background: transparent;
	color: var(--primary);
}
.settings-page__content { min-width: 0; }
.settings-page.is-enhanced .settings-page__content { align-self: start; }
.settings-page.is-enhanced .settings-system-grid:not(:has(.settings-section.is-active)) { display: none; }
.settings-page.is-enhanced .settings-section[hidden] { display: none !important; }
.settings-page__content.stack > * + * { margin-top: 1.75rem; }
.settings-section {
	margin: 0;
	width: 100%;
	scroll-margin-top: calc(var(--topbar-height) + 1.25rem);
}
.settings-section .panel__header { padding: 1.15rem 1.35rem; }
.settings-section .panel__body { padding: 1.35rem; }
.settings-system-grid { display: grid; gap: 1.75rem; width: 100%; }
.settings-section--compact { max-width: 760px; }
.settings-disclosure {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
}
.settings-disclosure summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem .9rem;
	cursor: pointer;
	list-style: none;
	font-size: .84rem;
}
.settings-disclosure summary::-webkit-details-marker { display: none; }
.settings-disclosure summary::after { content: "+"; color: var(--text-soft); font-size: 1.2rem; }
.settings-disclosure[open] summary::after { content: "−"; }
.settings-disclosure summary small { display: block; margin-top: .1rem; color: var(--text-soft); font-weight: 400; }
.settings-disclosure__body { padding: .85rem; border-top: 1px solid var(--border); }
.theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
}
.theme-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	min-width: 0;
	padding: .7rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.theme-card:hover { border-color: var(--primary); }
.theme-card.is-selected {
	border-color: var(--primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}
.theme-card > span:nth-child(2) { padding-inline: .15rem; }
.theme-card strong, .theme-card small { display: block; }
.theme-card strong { font-size: .9rem; }
.theme-card small { margin-top: .15rem; color: var(--text-soft); font-size: .75rem; }
.theme-card__check {
	position: absolute;
	top: .95rem;
	right: .95rem;
	display: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--on-primary);
	font-size: .75rem;
	font-weight: 800;
}
.theme-card.is-selected .theme-card__check { display: grid; }
.theme-card__preview {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 92px;
	padding: 14px 12px 10px 30%;
	border: 1px solid rgba(80, 95, 115, .18);
	border-radius: 7px;
	box-shadow: inset 24% 0 rgba(37, 99, 235, .12);
	overflow: hidden;
}
.theme-card__preview i { display: block; height: 8px; border-radius: 2px; background: currentColor; opacity: .16; }
.theme-card__preview i:nth-child(2) { width: 72%; }
.theme-card__preview i:nth-child(3) { width: 86%; }
.theme-card__preview--light { background: #f6f8fb; color: #17212b; }
.theme-card__preview--dark { background: #151b25; color: #e7ecf3; box-shadow: inset 24% 0 #202a38; }
.theme-card__preview--cream { background: #faf5e9; color: #6f4b30; box-shadow: inset 24% 0 #eee5d4; }
.theme-card__preview--lined {
	background-color: #fbfdff;
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 15px, rgba(57, 119, 174, .18) 16px);
	color: #285f92;
}
.theme-card__preview--grid {
	background-color: #fbfdff;
	background-image: linear-gradient(rgba(57, 119, 174, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 119, 174, .14) 1px, transparent 1px);
	background-size: 16px 16px;
	color: #285f92;
}

/* Profil a tým používá stejné prosté členění jako hlavní nastavení. */
.profile-page {
	display: block;
	width: min(1040px, 100%);
	margin-inline: auto;
}
.profile-tabs {
	position: sticky;
	top: var(--topbar-height);
	z-index: 20;
	display: flex;
	align-items: center;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	overflow-x: auto;
}
.profile-tabs a {
	display: block;
	flex: 0 0 auto;
	padding: .8rem 1rem;
	border-bottom: 2px solid transparent;
	color: var(--text-muted);
	font-size: .88rem;
	font-weight: 600;
}
.profile-tabs a:hover {
	border-bottom-color: var(--border-strong);
	color: var(--text);
	text-decoration: none;
}
.profile-tabs a.is-active {
	border-bottom-color: var(--primary);
	color: var(--primary);
}
.profile-page__content { min-width: 0; }
.profile-page.is-enhanced .profile-section[hidden] { display: none !important; }
.profile-section { width: 100%; margin: 0; scroll-margin-top: calc(var(--topbar-height) + 1rem); }

@media (max-width: 640px) {
	.profile-tabs { margin-inline: -.75rem; padding-inline: .25rem; }
	.profile-tabs a { padding-inline: .75rem; }
}

@media (max-width: 640px) {
	.settings-nav { margin-inline: -.75rem; padding-inline: .25rem; }
	.settings-nav a { padding-inline: .75rem; }
	.settings-section .panel__header,
	.settings-section .panel__body { padding: 1rem; }
}

/* Samostatne nastaveni profilu a 2FA. */
.profile-settings { width: min(920px, 100%); margin-inline: auto; gap: 1.25rem; }
.profile-settings__nav { display: flex; }
.profile-settings__intro {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .25rem .15rem;
}
.profile-settings__intro h2 { margin: 0; font-size: 1.35rem; }
.profile-settings__intro p { margin: .15rem 0 0; color: var(--text-muted); font-size: .88rem; }
.profile-settings__avatar {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--primary);
	color: var(--on-primary);
	font-size: 1.2rem;
	font-weight: 800;
}
.profile-settings__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-settings__security { gap: 1.25rem; }
.security-status {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: 1rem;
	border: 1px solid var(--success);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--success) 9%, var(--surface));
}
.security-status__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--success);
	color: #fff;
	font-weight: 800;
	flex: none;
}
.security-status p, .profile-settings__danger p, .security-setup p {
	margin: .2rem 0 0;
	color: var(--text-muted);
	font-size: .84rem;
}
.profile-settings__danger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}
.security-setup { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(280px, 1.2fr); gap: 2rem; }
.security-setup__qr, .security-setup__verify { position: relative; padding-left: 2.8rem; }
.security-setup__step {
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--primary-soft);
	color: var(--primary);
	font-weight: 800;
}
.security-setup h3 { margin: .15rem 0 0; font-size: 1rem; }
.security-setup__qr-image {
	display: inline-flex;
	margin-top: 1rem;
	padding: .7rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: #fff;
}
.security-code {
	max-width: 15rem;
	font-family: var(--font-mono);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-align: center;
}
.security-manual-key { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.security-manual-key summary { cursor: pointer; color: var(--primary); font-size: .83rem; font-weight: 600; }
.security-manual-key code { display: block; width: fit-content; max-width: 100%; margin: .6rem 0; padding: .45rem .6rem; overflow-wrap: anywhere; background: var(--surface-3); border-radius: var(--radius-sm); letter-spacing: .1em; }

@media (max-width: 720px) {
	.security-setup { grid-template-columns: 1fr; }
	.profile-settings__danger { align-items: flex-start; flex-direction: column; }
}

.error-card { text-align: center; }
.error-card__code { font-size: 3rem; font-weight: 800; color: var(--text-soft); margin: 0; }
.error-card__title { font-size: 1.2rem; margin: .25rem 0 .5rem; }
.error-card__text { color: var(--text-muted); margin-bottom: 1.25rem; }

/* ---------------------------------------------------------- 5. editor */
.app-body--editor .content { padding: 0; gap: 0; flex: 1; min-height: 0; }

.editor-titlebar { display: flex; align-items: center; gap: .6rem; }
.document-title {
	flex: 1; min-width: 0;
	padding: .35rem .6rem;
	border: 1px solid transparent; border-radius: var(--radius-sm);
	background: transparent; color: var(--text);
	font: inherit; font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em;
}
.document-title:hover { background: var(--surface-2); border-color: var(--border); }
.document-title:focus { background: var(--surface); border-color: var(--primary); outline: none; }

.save-state { font-size: .8rem; color: var(--text-soft); min-width: 6.5rem; text-align: right; }
.save-state[data-state="saving"] { color: var(--warning); }
.save-state[data-state="saved"] { color: var(--success); }
.save-state[data-state="error"] { color: var(--danger); }

.editor-layout {
	display: grid;
	grid-template-columns: var(--panel-left) minmax(0, 1fr) var(--panel-right);
	height: calc(100vh - var(--topbar-height));
	min-height: 0;
}

.editor-panel {
	display: flex; flex-direction: column;
	min-height: 0; overflow-y: auto;
	background: var(--surface); padding: 1.1rem; gap: .85rem;
}
.editor-panel--left { border-right: 1px solid var(--border); }
.editor-panel--right { border-left: 1px solid var(--border); }
.editor-panel__header { display: flex; align-items: center; justify-content: space-between; }
.editor-panel__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 700; }
.editor-panel__subtitle { font-size: .84rem; margin-bottom: .35rem; }
.editor-panel__hint { font-size: .78rem; color: var(--text-soft); margin: 0; }
.editor-panel__empty { font-size: .82rem; color: var(--text-soft); }

.editor-main {
	display: flex; flex-direction: column;
	min-width: 0; min-height: 0;
	background: var(--bg);
}

.editor-surface {
	flex: 1; min-height: 0; overflow-y: auto; overflow-x: auto;
	padding: 1.5rem clamp(.75rem, 2.5vw, 2rem) 3.5rem;
	display: flex; flex-direction: column; align-items: center;
	background: #eef1f5;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .editor-surface { background: #141a23; }
}
:root[data-theme="dark"] .editor-surface { background: #141a23; }

.editor-status {
	display: flex; gap: .6rem; align-items: center;
	padding: .45rem 1.25rem; border-top: 1px solid var(--border);
	background: var(--surface); color: var(--text-soft); font-size: .78rem;
}

/* Tabulka návrhu parametrů v dialogu */
.ai-parameters th, .ai-parameters td { vertical-align: top; white-space: normal; }
.ai-parameters td:first-child { width: 32%; }
.ai-parameters td:nth-child(2) { width: 24%; }
.ai-parameters td:last-child { width: 44%; }
.ai-parameters code { font-size: .8rem; overflow-wrap: anywhere; }
.ai-parameters select { font-size: .84rem; }

/* Poznámka ve stavové liště (např. zmenšená tabulka) */
.editor-status__note { color: var(--warning); }
.editor-status__note[hidden] { display: none; }

/* Přepínač orientace listu ve stavové liště */
.page-orientation { display: inline-flex; gap: .35rem; align-items: center; }
.page-orientation__label { color: var(--text-soft); }
.page-orientation__select {
	height: 1.6rem;
	padding: 0 .3rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: .78rem;
	cursor: pointer;
}
.page-orientation__select:focus { border-color: var(--primary); outline: none; }

/* Rozmery listu A4 - prepina je orientace dokumentu (data-orientation) */
:root {
	--page-width: 210mm;
	--page-height: 297mm;
	--page-margin: 20mm;   /* vnitrni okraj listu */
	--page-gap: 12mm;      /* mezera mezi listy vedle sebe */
	--pages: 1;            /* pocet stran, dopocita JS */
}
[data-orientation="landscape"] {
	--page-width: 297mm;
	--page-height: 210mm;
}


/* S1Edit obal a lišta (styl MS Word Ribbon / Dokument) */
.df-editor,
.editor-surface .df-editor {
	width: calc(var(--page-width) * var(--page-zoom, 1));
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	position: relative;
}

.df-editor__toolbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .35rem;
	align-items: center;
	padding: .45rem .65rem;
	margin-bottom: 0;
	border: 1px solid #cfd7df;
	border-bottom: 2px solid #2563eb;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background: #ffffff;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .df-editor__toolbar { background: #1e2633; border-color: #313d4f; border-bottom-color: #5b8cff; }
}
:root[data-theme="dark"] .df-editor__toolbar { background: #1e2633; border-color: #313d4f; border-bottom-color: #5b8cff; }

.df-editor--s1edit .df-editor__toolbar.is-busy { opacity: .6; pointer-events: none; }
.df-editor__group { display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; }
.df-editor__group + .df-editor__group { padding-left: .35rem; margin-left: .2rem; border-left: 1px solid var(--border); }

.df-editor__button {
	min-width: 2rem;
	height: 2rem;
	padding: 0 .45rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: .88rem;
	font-weight: 550;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .12s, border-color .12s, color .12s;
}
.df-editor__button:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.df-editor__button.is-active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.df-editor__button--wide { min-width: 2.6rem; font-family: var(--font-mono); }
.df-editor__button:disabled { opacity: .35; cursor: not-allowed; }

.df-editor__select {
	height: 2rem;
	padding: 0 .5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: .82rem;
	font-weight: 500;
	cursor: pointer;
}
.df-editor__select:focus { border-color: var(--primary); outline: none; }

/* Editovatelný list A4 (na výšku 210 × 297 mm, na šířku 297 × 210 mm) */
.editor-surface .df-editable,
.df-editable,
.editor-fallback {
	box-sizing: border-box !important;
	zoom: var(--page-zoom, 1);
	width: var(--page-width) !important;
	min-width: var(--page-width) !important;
	max-width: var(--page-width) !important;
	/* pod sebou je list vysoky tolik stran, kolik jich dokument ma */
	min-height: calc(var(--pages) * var(--page-height) + (var(--pages) - 1) * 24px) !important;
	margin: 0 auto 2.5rem auto !important;
	padding: var(--page-margin) !important;
	background: #ffffff !important;
	color: #1a1f2c !important;
	border: 1px solid #d1d5db;
	border-top: 0;
	border-radius: 0 0 2px 2px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .13), 0 1px 5px rgba(0, 0, 0, .08);
	/* Carlito je zdarma dostupna nahrada Calibri se stejnymi metrikami */
	font-family: Calibri, Carlito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 11pt;
	line-height: 1.45;
	text-rendering: optimizeLegibility;
	outline: none;
	position: relative;
	background-image: none !important;
}

.editor-surface .df-editable:focus {
	box-shadow: 0 4px 24px rgba(37, 99, 235, .18), 0 0 0 2px rgba(37, 99, 235, .35), 0 1px 4px rgba(0, 0, 0, .08);
}

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

/* Word typografie v editoru */
.df-editable h1 {
	color: #1f4e78;
	font-size: 18pt;
	font-weight: 700;
	margin-top: 14pt;
	margin-bottom: 6pt;
	border-bottom: 1.5pt solid #1f4e78;
	padding-bottom: 3pt;
	page-break-after: avoid;
}
.df-editable h2 {
	color: #2e75b6;
	font-size: 14pt;
	font-weight: 600;
	margin-top: 12pt;
	margin-bottom: 4pt;
	page-break-after: avoid;
}
.df-editable h3 {
	color: #5b9bd5;
	font-size: 12pt;
	font-weight: 600;
	margin-top: 10pt;
	margin-bottom: 3pt;
	page-break-after: avoid;
}
.df-editable h4, .df-editable h5, .df-editable h6 {
	color: #242424;
	font-size: 11pt;
	font-weight: 700;
	margin-top: 8pt;
	margin-bottom: 2pt;
}

.df-editable p { margin: 0 0 8pt; }
.df-editable ul, .df-editable ol { margin: 0 0 8pt; padding-left: 24pt; }
.df-editable li { margin-bottom: 2.5pt; }

.df-editable blockquote {
	margin: 10pt 0;
	padding: 6pt 12pt;
	border-left: 3pt solid #2e75b6;
	background: #f4f8fb;
	color: #4b5563;
	font-style: italic;
}
.df-editable pre {
	margin: 10pt 0;
	padding: 8pt 12pt;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	font-family: Consolas, "Courier New", monospace;
	font-size: 9.5pt;
	line-height: 1.45;
	overflow-x: auto;
}
.df-editable code {
	font-family: Consolas, "Courier New", monospace;
	font-size: 9.5pt;
	padding: 1pt 3pt;
	background: #f1f5f9;
	border-radius: 3px;
}
.df-editable a { color: #2563eb; text-decoration: underline; }

/* Callouty / Informační boxy ve Word stylu */
.callout {
	margin: 12pt 0;
	padding: 8pt 12pt;
	border-radius: 3px;
	border-left: 4pt solid;
	page-break-inside: avoid;
}
.callout p { margin: 0; }
.callout .callout__title {
	display: block;
	font-weight: 700;
	font-size: 10.5pt;
	margin-bottom: 3pt;
}
.callout--info { border-left-color: #0284c7; background: #f0f9ff; color: #0c4a6e; }
.callout--tip { border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }
.callout--warning { border-left-color: #d97706; background: #fffbeb; color: #78350f; }
.callout--danger { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }

/* Konec stránky (Word Page Break styl) */
.df-editable .page-break,
.document-render .page-break {
	display: block !important;
	width: calc(100% + 40mm) !important;
	margin: 20mm -20mm 20mm -20mm !important;
	height: 24px !important;
	background: #eef1f5 !important;
	border: 0 !important;
	border-top: 1px solid #cbd5e1 !important;
	border-bottom: 1px solid #cbd5e1 !important;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .07) !important;
	position: relative !important;
	text-align: center !important;
	clear: both !important;
	page-break-after: always !important;
	break-after: page !important;
}
.df-editable .page-break::after {
	content: "✂ Konec stránky (A4)";
	position: absolute;
	top: -9px;
	right: 2rem;
	padding: 1px 8px;
	background: #ffffff;
	color: #2563eb;
	border: 1px solid #cbd5e1;
	font-size: 8pt;
	font-weight: 700;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* Tabulky v editoru */
.df-editable table {
	width: 100%;
	border-collapse: collapse;
	margin: 10pt 0;
	page-break-inside: auto;
}
.df-editable tr { page-break-inside: avoid; }
.df-editable th, .df-editable td {
	padding: 5pt 8pt;
	border: 1px solid #94a3b8;
	text-align: left;
	vertical-align: top;
	font-size: 10pt;
}
.df-editable th {
	background: #f1f5f9;
	font-weight: 700;
	color: #0f172a;
}
.df-editable caption {
	font-size: 9pt;
	color: #64748b;
	margin-bottom: 4pt;
	text-align: left;
}

/* Dialogy editoru */
.df-editor__dialog { max-width: 32rem; }
.df-editor__dialog--wide { max-width: min(60rem, 92vw); }
.df-editor__dialog--wide .input--code { width: 100%; box-sizing: border-box; }
.df-editor__symbols { display: flex; flex-direction: column; gap: .4rem; max-height: 22rem; overflow-y: auto; }
.df-editor__symbol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr)); gap: .25rem; }
.df-editor__symbol {
	height: 2.2rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: var(--surface); color: var(--text); font: inherit; font-size: 1.05rem; cursor: pointer;
}
.df-editor__symbol:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

.df-editable figure.is-selected,
.df-editable img.is-selected { outline: 2px solid #2563eb; outline-offset: 3px; }
.df-editable figure.df-signature { page-break-inside: avoid; }

/* Obrázek se nikdy nevysází větší, než je, a nikdy nevyleze z listu: velkou
   předlohu (výřez z PDF, foto z mobilu) zmenší na šířku své obálky, malé logo
   z Wordu nechá být. Šířku obálky drží styl u figure (viz ImageCommand). */
.df-editable figure.image img,
.document-render figure.image img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.editor-surface { padding-inline: 8px; }
	/* preserve 210mm */
}
\n\n.outline { display: flex; flex-direction: column; gap: 1px; }
.outline__item {
	display: block;
	width: 100%;
	padding: .3rem .5rem;
	border: 0;
	border-left: 2px solid transparent;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-size: .84rem;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.outline__item:hover { background: var(--surface-3); color: var(--text); }
.outline__item.is-active { border-left-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.outline__item[data-level="1"] { font-weight: 700; }
.outline__item[data-level="2"] { padding-left: 1.1rem; }
.outline__item[data-level="3"] { padding-left: 1.8rem; }
.outline__item[data-level="4"] { padding-left: 2.5rem; }
.outline__item[data-level="5"], .outline__item[data-level="6"] { padding-left: 3.1rem; font-size: .8rem; }

.tabs { display: flex; gap: 2px; padding: 2px; background: var(--surface-3); border-radius: var(--radius-sm); }
.tab {
	flex: 1;
	padding: .35rem .5rem;
	border: 0;
	border-radius: calc(var(--radius-sm) - 2px);
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
}
.tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* prepinac pohledu (Dokumenty / Kos) - odkazy misto tlacitek, sirka podle obsahu */
.tabs--scope { display: inline-flex; }
.tabs--scope .tab { flex: 0 0 auto; text-decoration: none; white-space: nowrap; }
.tabs--scope .tab:hover { color: var(--text); }
.tab-panel { display: none; flex-direction: column; gap: .75rem; }
.tab-panel.is-active { display: flex; }

/* Dokumentovy rentgen – zivy preflight bez zasahu do obsahu. */
.quality-head { display: flex; align-items: center; gap: .75rem; }
.quality-head .editor-panel__subtitle { margin: 0; }
.quality-head .editor-panel__hint { margin: .15rem 0 0; }
.quality-score {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 3px solid var(--border-strong);
	border-radius: 50%;
	font-size: 1rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	flex: none;
}
.quality-score[data-grade="good"] { border-color: var(--success); color: var(--success); }
.quality-score[data-grade="warning"] { border-color: var(--warning); color: var(--warning); }
.quality-score[data-grade="danger"] { border-color: var(--danger); color: var(--danger); }
.quality-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.quality-metrics span {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: .4rem .2rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-soft);
	font-size: .65rem;
}
.quality-metrics b { color: var(--text); font-size: .9rem; }
.quality-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: .4rem; }
.quality-check-state { display: flex; justify-content: space-between; gap: .5rem; color: var(--text-soft); font-size: .64rem; }
.quality-check-state span:first-child { color: var(--primary); font-weight: 600; }
.quality-issues { display: flex; flex-direction: column; gap: .4rem; }
.quality-issue {
	display: grid;
	grid-template-columns: 5px minmax(0, 1fr) auto;
	gap: .55rem;
	width: 100%;
	padding: .55rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	color: var(--text);
}
.quality-issue:has(.quality-issue__locate:hover) { border-color: var(--primary); background: var(--primary-soft); }
.quality-issue__mark { width: 4px; height: 100%; min-height: 28px; border-radius: 2px; background: var(--text-soft); }
.quality-issue--error .quality-issue__mark { background: var(--danger); }
.quality-issue--warning .quality-issue__mark { background: var(--warning); }
.quality-issue--note .quality-issue__mark { background: var(--primary); }
.quality-issue__locate { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.quality-issue__locate:disabled { cursor: default; }
.quality-issue strong, .quality-issue small { display: block; }
.quality-issue__level { display: block; margin-bottom: .08rem; color: var(--text-soft); font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.quality-issue--error .quality-issue__level { color: var(--danger); }
.quality-issue--warning .quality-issue__level { color: var(--warning); }
.quality-issue--note .quality-issue__level { color: var(--primary); }
.quality-issue strong { font-size: .76rem; line-height: 1.35; }
.quality-issue small { margin-top: .12rem; color: var(--text-muted); font-size: .68rem; line-height: 1.4; }
.quality-issue__fix { align-self: center; padding: .25rem .45rem; font-size: .68rem; }
.quality-issue__fix:disabled, .quality-actions .btn:disabled { cursor: wait; opacity: .55; }
.quality-empty { padding: .75rem; border: 1px solid var(--success); border-radius: var(--radius-sm); color: var(--success); background: color-mix(in srgb, var(--success) 7%, var(--surface)); font-size: .78rem; }
.quality-fingerprint { padding-top: .65rem; border-top: 1px solid var(--border); }
.quality-fingerprint > span, .quality-fingerprint > small { display: block; color: var(--text-soft); font-size: .66rem; }
.quality-fingerprint code { display: block; margin: .25rem 0; color: var(--primary); font-size: .76rem; letter-spacing: .08em; }
.quality-target-overlay { position: absolute; z-index: 1000; border: 3px solid var(--warning); border-radius: var(--radius-sm); pointer-events: none; animation: quality-pulse .8s ease 2; }
@keyframes quality-pulse { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .quality-target-overlay { animation: none; } }

/* Pet karet se v uzkem pravem panelu sklada do dvou radku. */
.editor-panel--right > .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.variable-list { display: flex; flex-direction: column; gap: .75rem; }
.variable-group__title {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--text-soft);
	margin-bottom: .25rem;
}
.variable-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	width: 100%;
	padding: .3rem .5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	font: inherit;
	font-size: .83rem;
	text-align: left;
	cursor: pointer;
	color: var(--text);
}
.variable-item:hover { background: var(--primary-soft); border-color: var(--primary); }
.variable-item__path { font-family: var(--font-mono); font-size: .78rem; }
.variable-item__label { color: var(--text-soft); font-size: .76rem; }

.variable-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.variable-catalog__group { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.variable-catalog__title { padding: .5rem .8rem; background: var(--surface-2); font-size: .85rem; }

.condition-list { display: flex; flex-direction: column; gap: .5rem; }
.condition-card {
	padding: .6rem .7rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	font-size: .83rem;
}
.condition-card__title { font-weight: 650; margin-bottom: .2rem; }
.condition-card__summary { font-family: var(--font-mono); font-size: .76rem; color: var(--text-muted); word-break: break-word; }
.condition-card__actions { display: flex; gap: .35rem; margin-top: .45rem; }

.ai-outline { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; background: var(--surface-2); }
.ai-outline__list { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0; }
.ai-outline__row { display: flex; gap: .35rem; align-items: center; }
.ai-outline__row input { flex: 1; font-size: .84rem; padding: .3rem .45rem; }

.spreadsheet-preview { display: flex; flex-direction: column; gap: .5rem; font-size: .82rem; }
.spreadsheet-preview table { width: 100%; border-collapse: collapse; }
.spreadsheet-preview th, .spreadsheet-preview td {
	border: 1px solid var(--border);
	padding: .2rem .35rem;
	font-size: .75rem;
	max-width: 8rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------- 6. condition builder */
.condition-builder { display: flex; flex-direction: column; gap: .6rem; }
.condition-group {
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
	padding: .7rem;
	background: var(--surface-2);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.condition-group__header { display: flex; align-items: center; gap: .5rem; }
.condition-group__label { font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--text-soft); }
.condition-group__body { display: flex; flex-direction: column; gap: .4rem; }
.condition-row {
	display: grid;
	grid-template-columns: minmax(120px, 1.3fr) minmax(110px, 1fr) minmax(100px, 1fr) auto;
	gap: .4rem;
	align-items: center;
}
.condition-row select, .condition-row input { font-size: .84rem; padding: .35rem .45rem; }
.condition-row__glue {
	grid-column: 1 / -1;
	font-size: .74rem;
	font-weight: 700;
	color: var(--text-soft);
	letter-spacing: .05em;
}
.condition-preview {
	padding: .5rem .7rem;
	background: var(--surface-3);
	border-radius: var(--radius-sm);
	font-size: .82rem;
	display: flex;
	gap: .5rem;
	align-items: baseline;
	flex-wrap: wrap;
}
.condition-preview__label { color: var(--text-soft); font-size: .78rem; }

/* vizualizace podmíněného bloku v náhledu dokumentu */
.document-render .df-conditional {
	border: 1px dashed var(--primary);
	border-radius: var(--radius);
	padding: .6rem .8rem;
	margin: .8rem 0;
	background: color-mix(in srgb, var(--primary) 6%, transparent);
	position: relative;
}
.document-render .df-conditional::before {
	content: "PODMÍNĚNÝ BLOK";
	position: absolute;
	top: -.62rem;
	left: .6rem;
	padding: 0 .35rem;
	background: var(--surface);
	color: var(--primary);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .08em;
}
.document-render .df-conditional__else {
	border-top: 1px dashed var(--border-strong);
	margin-top: .5rem;
	padding-top: .5rem;
}

/* --------------------------------------------- 6b. podpisy a razítka */
.signature-list { display: flex; flex-direction: column; gap: .5rem; }
.signature-list--page { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }

.signature-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .6rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
.signature-card__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 76px;
	padding: .4rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	/* šachovnice pod otiskem, aby byla vidět průhlednost */
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%),
		linear-gradient(45deg, #eceff4 25%, transparent 25%, transparent 75%, #eceff4 75%);
	background-size: 14px 14px;
	background-position: 0 0, 7px 7px;
}
.signature-card__preview img { max-width: 100%; max-height: 96px; object-fit: contain; }
.signature-card__title { margin: 0; font-size: .88rem; font-weight: 650; }
.signature-card__meta { margin: 0; font-size: .76rem; color: var(--text-soft); }
.signature-card__actions { display: flex; flex-wrap: wrap; gap: .35rem; }

.signature-pad {
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
	background: #fff;
}
.signature-pad__canvas {
	display: block;
	width: 100%;
	height: 220px;
	border-radius: var(--radius);
	cursor: crosshair;
	touch-action: none;
}
.signature-pad__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.signature-pad__control { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-muted); }
.signature-pad__control input[type="range"] { width: 110px; }
.signature-pad__control input[type="color"] {
	width: 44px;
	height: 30px;
	padding: 2px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface);
}

.signature-preview {
	display: flex;
	justify-content: center;
	padding: .6rem;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.signature-preview img { max-width: 100%; max-height: 170px; object-fit: contain; }

/* otisk vložený do dokumentu - v náhledu (v editoru zůstává bez vlastního stylu) */
.document-render .df-signature {
	margin: 1.4rem 0 .6rem;
	break-inside: avoid;
	page-break-inside: avoid;
}
.document-render .df-signature img {
	display: block;
	width: 100%;
	height: auto;
}
.document-render .df-signature figcaption {
	margin-top: .2rem;
	padding-top: .3rem;
	border-top: 1px solid var(--text);
	background: none;
	color: var(--text-muted);
	font-size: .84rem;
	text-align: center;
}

/* ------------------------------------------------ 7. náhled dokumentu (Word styl) */
.preview-layout {
	display: grid;
	grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}
.preview-layout--wide { grid-template-columns: minmax(0, 1fr); }
.preview-layout--wide .preview-panel { display: none; }
.preview-panel { position: sticky; top: calc(var(--topbar-height) + 1rem); }
.preview-report { font-size: .84rem; }

.preview-document {
	min-width: 0;
	background: #eef1f5;
	padding: 2rem 1.5rem 4rem;
	border: 1px solid #cfd7df;
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: auto;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .preview-document { background: #141a23; border-color: #2a3443; }
}
:root[data-theme="dark"] .preview-document { background: #141a23; border-color: #2a3443; }

.preview-document .panel__header {
	width: calc(var(--page-width) * var(--page-zoom, 1));
	max-width: 100%;
	margin-bottom: 1.25rem;
	padding: .5rem 0;
	background: transparent;
	border-bottom: 0;
}

/* Autentický list dokumentu A4 v náhledu (na výšku i na šířku) */
.document-render {
	box-sizing: border-box !important;
	zoom: var(--page-zoom, 1);
	width: var(--page-width) !important;
	min-width: var(--page-width) !important;
	max-width: var(--page-width) !important;
	min-height: calc(var(--pages) * var(--page-height) + (var(--pages) - 1) * 24px) !important;
	margin: 0 auto !important;
	padding: var(--page-margin) !important;
	background: #ffffff !important;
	color: #1a1f2c !important;
	border: 1px solid #d1d5db;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .13), 0 1px 5px rgba(0, 0, 0, .08);
	/* Carlito je zdarma dostupna nahrada Calibri se stejnymi metrikami */
	font-family: Calibri, Carlito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 11pt;
	line-height: 1.45;
	text-rendering: optimizeLegibility;
	position: relative;
	background-image: none !important;
}

.document-render h1 {
	color: #1f4e78;
	font-size: 18pt;
	font-weight: 700;
	margin: 0 0 8pt;
	border-bottom: 1.5pt solid #1f4e78;
	padding-bottom: 3pt;
	page-break-after: avoid;
}
.document-render h2 {
	color: #2e75b6;
	font-size: 14pt;
	font-weight: 600;
	margin: 14pt 0 4pt;
	page-break-after: avoid;
}
.document-render h3 {
	color: #5b9bd5;
	font-size: 12pt;
	font-weight: 600;
	margin: 10pt 0 3pt;
	page-break-after: avoid;
}
.document-render h4, .document-render h5, .document-render h6 {
	color: #242424;
	font-size: 11pt;
	font-weight: 700;
	margin: 8pt 0 2pt;
}

.document-render p { margin: 0 0 8pt; }
.document-render ul, .document-render ol { margin: 0 0 8pt; padding-left: 24pt; }
.document-render li { margin-bottom: 2.5pt; }

.document-render blockquote {
	margin: 10pt 0;
	padding: 6pt 12pt;
	border-left: 3pt solid #2e75b6;
	background: #f4f8fb;
	color: #4b5563;
	font-style: italic;
}

.document-render table {
	width: 100%;
	border-collapse: collapse;
	margin: 10pt 0;
	font-size: 10pt;
	page-break-inside: auto;
}
.document-render tr { page-break-inside: avoid; }
.document-render th, .document-render td {
	border: 1px solid #94a3b8;
	padding: 5pt 8pt;
	text-align: left;
	vertical-align: top;
}
.document-render th {
	background: #f1f5f9;
	font-weight: 700;
	color: #0f172a;
}
.document-render figure { margin: 10pt 0; }

.document-render .page-break {
	display: block;
	margin: 20pt -25.4mm;
	height: 18px;
	background: #eef1f5;
	border: 0;
	border-top: 1px solid #cbd5e1;
	border-bottom: 1px solid #cbd5e1;
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, .05);
	position: relative;
	text-align: center;
	clear: both;
	page-break-after: always;
	break-after: page;
}
.document-render .page-break::after {
	content: "✂ Konec stránky (A4)";
	position: absolute;
	top: -9px;
	right: 2rem;
	padding: 1px 8px;
	background: #ffffff;
	color: #2563eb;
	border: 1px solid #cbd5e1;
	font-size: 8pt;
	font-weight: 700;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.document-render .callout {
	margin: 12pt 0;
	padding: 8pt 12pt;
	border-radius: 3px;
	border-left: 4pt solid;
	page-break-inside: avoid;
}
.document-render .callout p { margin: 0; }
.document-render .callout--info { border-left-color: #0284c7; background: #f0f9ff; color: #0c4a6e; }
.document-render .callout--tip { border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }
.document-render .callout--warning { border-left-color: #d97706; background: #fffbeb; color: #78350f; }
.document-render .callout--danger { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
\n\n.dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: 2rem 1rem;
	border: 2px dashed var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface-2);
	text-align: center;
}
.dropzone.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
.dropzone__title { font-weight: 650; margin: 0; }
.dropzone__hint { color: var(--text-soft); font-size: .84rem; margin: 0; }
.dropzone input[type="file"] { max-width: 320px; }

/*
 * Strany vedle sebe.
 *
 * Delsi dokument se nemusi sazet pod sebe - kdyz je na obrazovce misto, jdou
 * strany vedle sebe jako v nahledu tisku. Delaji to sloupce CSS: list je
 * vysoky jednu stranu a siroky tolik stran, kolik jich dokument ma, a obsah
 * se do nich prelije sam. Mezera mezi sloupci nese vnitrni okraje obou stran,
 * bile listy pod nimi kresli prechod na pozadi.
 *
 * Rezim zapina JS (page-layout.js) az kdyz se strany vedle sebe opravdu vejdou.
 */
[data-layout="side-by-side"] .df-editable,
[data-layout="side-by-side"] .document-render {
	width: calc(var(--pages) * var(--page-width) + (var(--pages) - 1) * var(--page-gap)) !important;
	min-width: calc(var(--pages) * var(--page-width) + (var(--pages) - 1) * var(--page-gap)) !important;
	max-width: calc(var(--pages) * var(--page-width) + (var(--pages) - 1) * var(--page-gap)) !important;
	height: var(--page-height) !important;
	min-height: var(--page-height) !important;
	column-width: calc(var(--page-width) - 2 * var(--page-margin));
	column-gap: calc(2 * var(--page-margin) + var(--page-gap));
	column-fill: auto;
	border: 0 !important;
	box-shadow: none !important;
	background: repeating-linear-gradient(
		to right,
		#ffffff 0 calc(var(--page-width) - 1px),
		#d1d5db calc(var(--page-width) - 1px) var(--page-width),
		rgba(0, 0, 0, 0) var(--page-width) calc(var(--page-width) + var(--page-gap))
	) !important;
}

/* obal editoru (s listvou) musi byt siroky jako vsechny strany dohromady */
[data-layout="side-by-side"] .df-editor,
[data-layout="side-by-side"] .editor-surface .df-editor {
	width: calc(
		(var(--pages) * var(--page-width) + (var(--pages) - 1) * var(--page-gap)) * var(--page-zoom, 1)
	);
}

/* rucni konec stranky zalomi sloupec, at zacne novou stranu */
[data-layout="side-by-side"] .df-editable .page-break,
[data-layout="side-by-side"] .document-render .page-break { break-before: column; }

/* vodici cary stran davaji smysl jen pod sebou */
[data-layout="side-by-side"] .df-a4-guides { display: none; }

/* Predel mezi stranami pri sazbe pod sebou */
.df-a4-guides {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}
.df-a4-guide {
	position: absolute;
	border-top: 1px dashed #94a3b8;
}
.df-a4-guide__label {
	position: absolute;
	top: -.65rem;
	right: .75rem;
	padding: 0 .35rem;
	background: #ffffff;
	color: #64748b;
	font-size: .68rem;
	letter-spacing: .03em;
}


@page { size: A4 portrait; margin: 20mm; }

@media print {
	/* lupa i strany vedle sebe jsou jen pro obrazovku - na papir jde list ve skutecne velikosti */
	:root, .editor-surface, .preview-document, .version-preview, .df-editable, .document-render { --page-zoom: 1 !important; }
	[data-layout="side-by-side"] .df-editable,
	[data-layout="side-by-side"] .document-render {
		columns: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		background: #fff !important;
	}
	.preview-layout { display: block !important; }
	.preview-document { width: 100% !important; max-width: none !important; overflow: visible !important; }
	.document-render { width: 100% !important; max-width: none !important; overflow: visible !important; box-sizing: border-box; }
	.document-render figure.table { width: 100% !important; break-inside: auto; }
	.document-render table { width: 100% !important; table-layout: fixed; }
	.document-render th, .document-render td { overflow-wrap: anywhere; }
	.document-render img { max-width: 100% !important; height: auto !important; }
	.document-render .df-signature { break-inside: avoid; page-break-inside: avoid; }
	.document-render .df-signature figcaption { border-top-color: #000; color: #000; }
	.sidebar, .topbar, .preview-panel, .toast-container, .editor-panel { display: none !important; }
	.app-shell { display: block; }
	.content { padding: 0; }
	.panel, .document-render { border: 0; box-shadow: none; padding: 0; }
	.document-render { font-size: 11pt; }
	body { background: #fff; color: #000; }
}

/* ------------------------------------------------------- 8. responzivita */
@media (max-width: 1280px) {
	.editor-layout { grid-template-columns: 220px minmax(0, 1fr) 300px; }
	.panel-grid--wide { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
	.panel-grid--pair { grid-template-columns: 1fr; }
}

@media (max-width: 1080px) {
	.app-shell { grid-template-columns: 1fr; }
	.sidebar {
		position: fixed;
		z-index: 60;
		width: var(--sidebar-width);
		transform: translateX(-100%);
		transition: transform .18s ease;
	}
	.sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
	.topbar__burger { display: inline-flex; }
	.editor-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
	.editor-panel { max-height: 340px; border-top: 1px solid var(--border); }
	.editor-panel--left { order: 2; }
	.editor-panel--right { order: 3; }
	.editor-main { order: 1; }
	.editor-surface { padding: 1rem .5rem 2rem; }
	.preview-layout { grid-template-columns: 1fr; }
	.preview-panel { position: static; }
	/* preserve 210mm */
}

@media (max-width: 640px) {
	.content { padding: 1rem .75rem 2.5rem; }
	.user-chip__meta { display: none; }
	.filters__row { flex-direction: column; align-items: stretch; }
	.button-grid { grid-template-columns: 1fr; }
}


/* Obsah dokumentu (TOC) */
.table-of-contents,
.document-render .table-of-contents {
	margin: 14pt 0;
	padding: 10pt 14pt;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-left: 4pt solid #1f4e78;
	border-radius: 4px;
	page-break-inside: avoid;
}
.table-of-contents .toc__title {
	font-weight: 700;
	color: #1f4e78;
	margin-bottom: 6pt;
	font-size: 11pt;
}
.table-of-contents ul.toc__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.table-of-contents ul.toc__list li {
	margin-bottom: 3pt;
	font-size: 10pt;
}
.table-of-contents ul.toc__list a {
	color: #2563eb;
	text-decoration: none;
	border-bottom: 1px dotted #93c5fd;
}

/* Vodoznak na stránce */
.df-watermark {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-35deg);
	font-size: 54pt;
	font-weight: 900;
	color: rgba(220, 38, 38, 0.12);
	pointer-events: none;
	user-select: none;
	z-index: 2;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: 4pt solid rgba(220, 38, 38, 0.12);
	padding: 8pt 28pt;
	border-radius: 6pt;
	white-space: nowrap;
}

/* Vícesloupcový layout pro A4 */
.df-columns,
.document-render .df-columns {
	display: flex;
	gap: 18pt;
	margin: 10pt 0;
}
.df-columns--2 .df-column { flex: 1; min-width: 0; }
.df-columns--3 .df-column { flex: 1; min-width: 0; }
.df-column > :first-child { margin-top: 0; }


/* =============================================================================
   Normy a formáty papíru: ISO 216, ANSI / ASME Y14.1, US Traditional
   ============================================================================= */

/* ISO 216 (Evropské normy) */
.df-editable[data-paper="a4"], .document-render[data-paper="a4"] { width: 210mm !important; min-width: 210mm !important; max-width: 210mm !important; min-height: 297mm !important; }
.df-editable[data-paper="a4"][data-orientation="landscape"], .document-render[data-paper="a4"][data-orientation="landscape"] { width: 297mm !important; min-width: 297mm !important; max-width: 297mm !important; min-height: 210mm !important; }

.df-editable[data-paper="a3"], .document-render[data-paper="a3"] { width: 297mm !important; min-width: 297mm !important; max-width: 297mm !important; min-height: 420mm !important; }
.df-editable[data-paper="a3"][data-orientation="landscape"], .document-render[data-paper="a3"][data-orientation="landscape"] { width: 420mm !important; min-width: 420mm !important; max-width: 420mm !important; min-height: 297mm !important; }

.df-editable[data-paper="a5"], .document-render[data-paper="a5"] { width: 148mm !important; min-width: 148mm !important; max-width: 148mm !important; min-height: 210mm !important; }
.df-editable[data-paper="a5"][data-orientation="landscape"], .document-render[data-paper="a5"][data-orientation="landscape"] { width: 210mm !important; min-width: 210mm !important; max-width: 210mm !important; min-height: 148mm !important; }

.df-editable[data-paper="a6"], .document-render[data-paper="a6"] { width: 105mm !important; min-width: 105mm !important; max-width: 105mm !important; min-height: 148mm !important; }
.df-editable[data-paper="a6"][data-orientation="landscape"], .document-render[data-paper="a6"][data-orientation="landscape"] { width: 148mm !important; min-width: 148mm !important; max-width: 148mm !important; min-height: 105mm !important; }

.df-editable[data-paper="b5"], .document-render[data-paper="b5"] { width: 176mm !important; min-width: 176mm !important; max-width: 176mm !important; min-height: 250mm !important; }
.df-editable[data-paper="b5"][data-orientation="landscape"], .document-render[data-paper="b5"][data-orientation="landscape"] { width: 250mm !important; min-width: 250mm !important; max-width: 250mm !important; min-height: 176mm !important; }

.df-editable[data-paper="b4"], .document-render[data-paper="b4"] { width: 250mm !important; min-width: 250mm !important; max-width: 250mm !important; min-height: 353mm !important; }
.df-editable[data-paper="b4"][data-orientation="landscape"], .document-render[data-paper="b4"][data-orientation="landscape"] { width: 353mm !important; min-width: 353mm !important; max-width: 353mm !important; min-height: 250mm !important; }

/* ANSI / ASME Y14.1 (Americké a technické výkresové normy) */
.df-editable[data-paper="ansi_a"], .document-render[data-paper="ansi_a"] { width: 215.9mm !important; min-width: 215.9mm !important; max-width: 215.9mm !important; min-height: 279.4mm !important; }
.df-editable[data-paper="ansi_a"][data-orientation="landscape"], .document-render[data-paper="ansi_a"][data-orientation="landscape"] { width: 279.4mm !important; min-width: 279.4mm !important; max-width: 279.4mm !important; min-height: 215.9mm !important; }

.df-editable[data-paper="ansi_b"], .document-render[data-paper="ansi_b"] { width: 279.4mm !important; min-width: 279.4mm !important; max-width: 279.4mm !important; min-height: 431.8mm !important; }
.df-editable[data-paper="ansi_b"][data-orientation="landscape"], .document-render[data-paper="ansi_b"][data-orientation="landscape"] { width: 431.8mm !important; min-width: 431.8mm !important; max-width: 431.8mm !important; min-height: 279.4mm !important; }

.df-editable[data-paper="ansi_c"], .document-render[data-paper="ansi_c"] { width: 431.8mm !important; min-width: 431.8mm !important; max-width: 431.8mm !important; min-height: 558.8mm !important; }
.df-editable[data-paper="ansi_c"][data-orientation="landscape"], .document-render[data-paper="ansi_c"][data-orientation="landscape"] { width: 558.8mm !important; min-width: 558.8mm !important; max-width: 558.8mm !important; min-height: 431.8mm !important; }

.df-editable[data-paper="ansi_d"], .document-render[data-paper="ansi_d"] { width: 558.8mm !important; min-width: 558.8mm !important; max-width: 558.8mm !important; min-height: 863.6mm !important; }
.df-editable[data-paper="ansi_d"][data-orientation="landscape"], .document-render[data-paper="ansi_d"][data-orientation="landscape"] { width: 863.6mm !important; min-width: 863.6mm !important; max-width: 863.6mm !important; min-height: 558.8mm !important; }

.df-editable[data-paper="ansi_e"], .document-render[data-paper="ansi_e"] { width: 863.6mm !important; min-width: 863.6mm !important; max-width: 863.6mm !important; min-height: 1117.6mm !important; }
.df-editable[data-paper="ansi_e"][data-orientation="landscape"], .document-render[data-paper="ansi_e"][data-orientation="landscape"] { width: 1117.6mm !important; min-width: 1117.6mm !important; max-width: 1117.6mm !important; min-height: 863.6mm !important; }

/* US Traditional */
.df-editable[data-paper="us_legal"], .document-render[data-paper="us_legal"] { width: 215.9mm !important; min-width: 215.9mm !important; max-width: 215.9mm !important; min-height: 355.6mm !important; }
.df-editable[data-paper="us_legal"][data-orientation="landscape"], .document-render[data-paper="us_legal"][data-orientation="landscape"] { width: 355.6mm !important; min-width: 355.6mm !important; max-width: 355.6mm !important; min-height: 215.9mm !important; }

.df-editable[data-paper="us_executive"], .document-render[data-paper="us_executive"] { width: 184.15mm !important; min-width: 184.15mm !important; max-width: 184.15mm !important; min-height: 266.7mm !important; }
.df-editable[data-paper="us_executive"][data-orientation="landscape"], .document-render[data-paper="us_executive"][data-orientation="landscape"] { width: 266.7mm !important; min-width: 266.7mm !important; max-width: 266.7mm !important; min-height: 184.15mm !important; }

/* Zámek ukotvení lišty editoru: odemčený stav = roluje s obsahem */
.df-editor.is-unpinned .df-editor__toolbar {
	position: relative !important;
	top: auto !important;
	box-shadow: none !important;
}
.df-editor__group--lock .df-editor__button.is-active {
	background: #eff6ff !important;
	border-color: #3b82f6 !important;
	color: #1d4ed8 !important;
}

/* Styl pop-up potvrzovaciho dialogu a danger tlacitka */
.btn--danger {
	background: var(--danger, #dc2626);
	color: #ffffff !important;
	border-color: var(--danger, #dc2626);
}
.btn--danger:hover {
	background: #b91c1c;
	border-color: #b91c1c;
	color: #ffffff !important;
}
.confirm-dialog {
	width: min(440px, 94vw);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg, 10px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
	animation: confirmPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
	overflow: hidden;
}
.confirm-dialog::backdrop {
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(4px);
	animation: confirmFadeIn 0.18s ease-out;
}
@keyframes confirmPopIn {
	from { opacity: 0; transform: scale(0.94) translateY(-8px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes confirmFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Navrat z prihlaseni na verejnou hlavni stranku. */
.auth-back { display: inline-flex; align-items: center; width: fit-content; gap: .35rem; color: var(--text-muted); font-size: .86rem; font-weight: 600; text-decoration: none; }
.auth-back:hover { color: var(--primary); }
.auth-back:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--radius-sm); }