/*
 * fale — styly podle design systému „fale“ (tokeny, komponenty ik-*).
 * Princip: fialová `accent` = značka a akce (jedno primární tlačítko), stavy mají vlastní barvy a vždy ikonu + slovo.
 * Systémové písmo, nic se nestahuje. Vše lokálně, žádné CDN.
 */

/* ---------- tokeny ---------- */
:root {
	--paper: #f7f8fc;
	--surface: #ffffff;
	--surface-tint: #f8f7fc;
	--row-hover: #fcfaff;
	--line: #e8e8f0;
	--line-soft: #efedf4;
	--line-strong: #d9d2e6;
	--ink: #182230;
	--ink-muted: #667085;
	--ink-faint: #84818e;
	--accent: #6941c6;
	--accent-hover: #5331a5;
	--accent-soft: #f4f0ff;
	--accent-line: #d0bfea;
	--focus: #9e77ed;
	/* atmosféra: jen hlavička stránky, karta nahrání a web, nikdy pod řádky */
	--glow: #e3d7ff;
	--peach: #ffeadf;
	--night: #272035;
	--night-2: #483066;
	--night-ink: #c7bcd6;
	--pending: #5d6170;
	--pending-soft: #f1f2f6;
	--ok: #307544;
	--ok-soft: #edf9f0;
	--review: #82532c;
	--review-soft: #fff3d6;
	--review-tint: #fffaee;
	--review-line: #ecddbd;
	--error: #b42318;
	--error-soft: #fef3f2;
	/* částky pohybů na účtu: lehký nádech, ne stav (stavové barvy patří fakturám) */
	--money-in: #2c7140;
	--money-out: #9c3a2f;

	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-10: 40px;

	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;

	--shadow-card: 0 3px 8px #2d214408;
	--shadow-primary: 0 3px 7px #6941c61a;
	--gutter: 40px;
	/* obsah má max. šířku (web 1240 px, aplikace 1440 px); pozadí pásů jde dál přes celou šířku,
	   proto okraj místo obalu: aspoň 80 px / gutter, na širokém monitoru zbytek do stran */
	--site-pad: max(80px, calc((100% - 1240px) / 2));
	--app-pad: max(var(--gutter), calc((100% - 1440px) / 2));
	color-scheme: light;
}

/* ---------- základ ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 24px;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
p { margin: 0 0 var(--space-4); }
img, iframe { max-width: 100%; }
h1, h2, h3 { margin: 0; }
.h1 { font-size: 32px; line-height: 38px; font-weight: 750; letter-spacing: -0.034em; margin: 0 0 var(--space-4); }
.h2 { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.018em; margin: 0 0 var(--space-3); }
.h3 { font-size: 15px; line-height: 22px; font-weight: 700; margin: var(--space-6) 0 var(--space-2); }
.lbl { display: inline-block; font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.ik-muted { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.ik-data, .input-data { font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.icon { flex-shrink: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.spacer { flex-grow: 1; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* logo: slovo „fale“ a za ním čtvereček v accent se světlým posunutým stínem */
.logo { display: inline-flex; align-items: flex-start; font-size: 28px; line-height: 1; font-weight: 850; letter-spacing: -0.055em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.logo::after { content: ""; width: 8px; height: 8px; margin: 1px 0 0 5px; border-radius: 2px; background: var(--accent); box-shadow: -3px 3px 0 #d6bbfb; }
.logo:hover { color: var(--ink); }
.logo-hl { color: var(--accent); }

/* ---------- tlačítka ---------- */
.ik-btn {
	font: inherit; font-size: 15px; font-weight: 600; line-height: 20px;
	min-height: 44px; padding: 0 var(--space-4);
	border-radius: var(--radius-md); border: 1px solid var(--line-strong);
	background: var(--surface); color: var(--ink);
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	text-decoration: none; white-space: nowrap;
}
.ik-btn:hover { background: var(--accent-soft); color: var(--ink); }
.ik-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--surface); box-shadow: var(--shadow-primary); }
.ik-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--surface); }
/* akce v řádku nebo kartě (Zkontrolovat, Detail): text accent, světle fialový obrys */
.ik-btn-action { color: var(--accent); border-color: var(--accent-line); }
.ik-btn-action:hover { color: var(--accent); }
.ik-btn-quiet { border-color: transparent; background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ik-btn-quiet:hover { border-color: transparent; background: transparent; color: var(--accent-hover); }
.ik-btn-danger { color: var(--error); }
.ik-btn-danger:hover { color: var(--error); }
.ik-btn-s { min-height: 36px; font-size: 14px; padding: 0 var(--space-3); }
.ik-btn-lg { min-height: 52px; font-size: 18px; padding: 0 var(--space-6); }

/* ---------- štítky stavů ---------- */
.ik-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 600; line-height: 16px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.ik-badge .icon { width: 13px; height: 13px; }
.ik-badge-pending { background: var(--pending-soft); color: var(--pending); }
.ik-badge-ok { background: var(--ok-soft); color: var(--ok); }
.ik-badge-review { background: var(--review-soft); color: var(--review); }
.ik-badge-error { background: var(--error-soft); color: var(--error); }
.is-spinning .icon { animation: ik-spin 1.2s linear infinite; }
@keyframes ik-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-spinning .icon { animation: none; } }

/* ---------- hlášky ---------- */
.flashes { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); margin: 0 0 var(--space-4); }
.alert p:last-child, .alert:last-child { margin-bottom: 0; }
.flashes .alert { margin: 0; }
.alert-success { background: var(--ok-soft); border-color: #c4e6cd; color: var(--ok); }
.alert-error { background: var(--error-soft); border-color: #f5c6c0; color: var(--error); }
.alert-review { background: var(--review-soft); border-color: var(--review-line); color: var(--review); }
.alert-info { background: var(--accent-soft); border-color: var(--accent-line); }
ul.alert { padding-left: var(--space-6); }

/* ---------- formuláře ---------- */
.form-fields { display: flex; flex-direction: column; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label label { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ink); }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 24px; }
.input, .field input[type=text], .field input[type=email], .field input[type=password], .field select {
	font: inherit; font-size: 16px; height: 44px; width: 100%;
	padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
	background: var(--surface); color: var(--ink);
}
.input.input-data { font-size: 16px; }
.input:hover { border-color: var(--accent-line); }
.has-error .input, .has-error input { border-color: var(--error); }
.field-error { color: var(--error); font-size: 14px; line-height: 20px; }
.hint { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
/* pole, kde je na tahu uživatel: oranžová kontroly, ne akční fialová */
.has-issue { background: var(--review-tint); border-radius: var(--radius-md); padding: var(--space-3); margin: calc(var(--space-3) * -1); }
.has-issue .input { border: 2px solid var(--review); }
.has-issue .hint { color: var(--review); }
.field input[type=checkbox], .field input[type=radio] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0 var(--space-2) 0 0; vertical-align: -4px; }
.field label:has(input[type=checkbox]), .field label:has(input[type=radio]) { text-transform: none; letter-spacing: 0; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink); cursor: pointer; }
/* zaškrtávací pole jako řádek .choices: políčko vlevo, dlouhý text se zalomí vedle něj */
.field > label:has(> input[type=checkbox]) { display: flex; align-items: flex-start; gap: var(--space-2); }
.field > label > input[type=checkbox] { margin: 2px 0 0; flex: none; }
/* zaškrtávací pole pod sebou mají rozestup jako volby v .choices */
.form-fields > .field:has(> label > input[type=checkbox]) + .field:has(> label > input[type=checkbox]) { margin-top: calc(var(--space-2) - var(--space-4)); }
.form-fields .field:has(input[type=submit]) { flex-direction: row; }
.form-errors { margin: 0; padding: 0; list-style: none; color: var(--error); font-size: 14px; }
/* skupina voleb (radio) pod sebou; `hidden` z přepínačů netteForms musí vyhrát nad display */
.choices { display: flex; flex-direction: column; gap: var(--space-2); }
.choices[hidden] { display: none; }
.choices label { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.choices input[type=radio] { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.form-group { border: 0; padding: 0; margin: 0 0 var(--space-6); min-width: 0; }
.form-group > legend { margin-bottom: var(--space-3); padding: 0; }
.form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-3); }
@media (min-width: 561px) { .cell .input-data { font-size: 14px; } }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-2); }
.ik-btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* ---------- Nastavení → Export: název souboru z bloků a náhled ZIPu stromem ---------- */
.page-wide { max-width: 1120px; }
/* široký displej: náhled vedle bloků a při posouvání zůstane na očích */
@media (min-width: 1100px) {
	.name-builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--space-10); align-items: start; }
	.name-builder-preview { position: sticky; top: var(--space-4); }
	.name-builder-preview > .h3:first-child { margin-top: 0; }
}
/* složený název stromem: řádek = složka (končí štítkem „/“), další úroveň odsazená linkou jako file-tree */
.name-builder-path { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-tint); }
.name-tree .name-tree { margin-left: 8px; padding-left: var(--space-3); border-left: 1px solid var(--line); }
/* ikona vlevo mimo tok: zalomené štítky lícují se štítky prvního řádku, ne s ikonou */
.name-line { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: 40px; padding: 4px 0 4px 24px; }
[data-name-builder] .name-line { cursor: text; }
.name-line-icon { position: absolute; left: 0; top: 4px; display: flex; align-items: center; height: 32px; color: var(--ink-muted); }
@media (pointer: coarse) { [data-name-builder] .name-line-icon { height: 44px; } }
.name-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; line-height: 20px; }
.name-chip.is-text, .name-chip.is-folder { border-style: dashed; }
.name-chip.is-text, .name-chip.is-folder { min-width: 28px; justify-content: center; padding: 0 6px; }
/* s JS jsou štítky tlačítka: přetáhnout, šipky, Delete */
button.name-chip { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
button.name-chip:hover { border-color: var(--ink); }
.ik-btn.name-block { user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) { button.name-chip { min-height: 44px; } }
/* kam se přidá další blok; při přetahování místo, kam blok spadne */
.name-slot { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 var(--space-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 13px; line-height: 16px; white-space: nowrap; }
.name-slot.is-drop { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); }
.name-ghost { position: fixed; left: 0; top: 0; z-index: 100; margin: 0; pointer-events: none; border-color: var(--accent); opacity: 0.92; }
.name-ghost.is-removing { opacity: 0.5; text-decoration: line-through; }
.name-builder.is-dragging, .name-builder.is-dragging * { cursor: grabbing; }
/* akce s názvem pod boxem, tiché: box ukazuje jen název */
.name-builder-tools { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.name-builder-tools .ik-btn { padding: 0 var(--space-1); }
/* náhled se donačítá ze serveru (app.js): mezitím ztlumený */
[data-name-preview] #snippet--preview { transition: opacity 160ms ease; }
[data-name-preview].is-loading #snippet--preview { opacity: 0.45; }
.name-builder-groups { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.name-builder-group-title { margin: 0 0 var(--space-2); font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.name-builder-blocks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ik-btn.name-block { min-height: 44px; }
.name-block-example { font-size: 13px; color: var(--ink-muted); }
.file-tree-box { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.file-tree { list-style: none; margin: 0; padding: 0; }
.file-tree .file-tree { margin-left: 8px; padding-left: var(--space-3); border-left: 1px solid var(--line); }
/* dlouhý název se na telefonu zalomí, ikona zůstane u prvního řádku */
.file-tree-item { display: flex; align-items: flex-start; gap: var(--space-2); padding: 5px 0; font-size: 14px; line-height: 20px; }
.file-tree-item .icon { flex: none; margin-top: 1px; }
.file-tree-item .ik-data { min-width: 0; overflow-wrap: anywhere; }
.file-tree-item.is-file .icon { color: var(--ink-muted); }
.name-builder-hint { margin: var(--space-2) 0 0; }
.name-builder .form-actions { margin-top: var(--space-6); }

/* ---------- úvodní stránka (prototyp fale-homepage.html; zlomy 1100 a 760 px jako v něm) ---------- */
.page-landing { background: var(--surface); font-size: 17px; line-height: 1.6; }
.site-header { display: flex; align-items: center; gap: 64px; min-height: 88px; padding: 0 var(--site-pad); border-bottom: 1px solid #f0edf5; }
.site-nav { display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 600; }
.site-nav-link, .site-login { text-decoration: none; }
.site-nav-link:hover, .site-login:hover, .site-footer-nav a:hover { color: var(--accent); }
.site-account { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 15px; font-weight: 600; }
.lp-eyebrow { display: inline-block; font-size: 12px; line-height: 18px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.lp-tag { padding: 7px 13px; border: 1px solid var(--surface); border-radius: 30px; background: #ffffffb8; box-shadow: 0 3px 12px #6941c609; }
.lp-quiet { margin: 0; font-size: 14px; color: var(--ink-muted); }

.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 54px; align-items: center; min-height: 650px; padding: 68px var(--site-pad) 86px; background: radial-gradient(ellipse at 76% 22%, #c8b8ff 0%, #c8b8ff00 45%), radial-gradient(ellipse at 98% 90%, #ffcfc1 0%, #ffcfc100 45%), radial-gradient(ellipse at 5% 90%, #e4ddff 0%, #e4ddff00 50%), #faf8ff; }
/* jemná mřížka v pravé půlce */
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff50 1px, #ffffff00 1px), linear-gradient(90deg, #ffffff50 1px, #ffffff00 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, #0000 40%, #000); pointer-events: none; }
.hero > * { position: relative; }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.hero-title { margin: 22px 0; font-size: 64px; line-height: 1.09; font-weight: 750; letter-spacing: -0.045em; }
.hero-title .logo-hl { background: linear-gradient(105deg, #5130b6, #9353d9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-lead { margin: 0; max-width: 535px; font-size: 20px; line-height: 1.65; color: #596579; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 17px; }
.hero-formats { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 24px; font-size: 12px; color: #635875; }
.hero-formats span { padding: 3px 8px; border: 1px solid #d7cae6; border-radius: 5px; background: #ffffff60; font-weight: 650; }
.page-landing .ik-btn-lg { min-height: 48px; padding: 0 23px; font-size: 16px; }

/* ukázka aplikace v hero */
.hero-product { position: relative; padding-top: 2px; }
.lp-mail { display: flex; align-items: center; gap: 16px; width: 340px; margin: 0 0 28px 28px; padding: 17px 23px; background: var(--surface); border: 1px solid #e9e2f7; border-radius: 13px; box-shadow: 0 8px 20px #34215c08; transform: rotate(-2deg); }
.lp-mail .icon { color: var(--accent); }
.lp-mail small { display: block; font-size: 12px; color: var(--ink-muted); }
.lp-mail strong { font-size: 17px; }
.lp-arrow { position: absolute; left: 390px; top: 28px; width: 68px; height: 72px; color: var(--accent); }
.lp-preview { padding: 24px 22px 12px; background: var(--surface); border: 1px solid var(--surface); border-radius: 14px; box-shadow: 0 25px 70px #49358225, 0 3px 6px #34215c08; }
.lp-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.lp-preview-head strong { font-size: 21px; letter-spacing: -0.02em; }
.lp-preview-head span { font-size: 11px; color: var(--ink-faint); }
.lp-preview-row { display: grid; grid-template-columns: 1.15fr 0.7fr 1.4fr; align-items: center; gap: 12px; min-height: 64px; border-top: 1px solid #edf0f4; font-size: 14px; }
.lp-preview-row .ik-data { text-align: right; }
.lp-preview-state { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.lp-mini { padding: 4px 7px; border: 1px solid var(--accent-line); border-radius: 5px; font-size: 11px; color: var(--accent); white-space: nowrap; }
.lp-preview-foot { display: flex; justify-content: space-between; align-items: center; padding: 13px 0 3px; border-top: 1px solid #edf0f4; font-size: 11px; color: var(--ink-muted); }
.lp-preview-foot span:last-child { color: var(--accent); font-weight: 650; }
.lp-file { display: flex; align-items: center; gap: 15px; width: 340px; margin: 20px 12px 0 auto; padding: 16px 20px; background: #ffffffd9; border: 1px solid #e4dcf3; border-radius: 12px; box-shadow: 0 8px 24px #34215c08; font-size: 15px; }
.lp-file > .icon { color: var(--accent); }
.lp-file-download { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; background: var(--accent-soft); border: 1px solid #e9e2f7; border-radius: 7px; color: var(--accent); }

/* pás schopností přes spodní hranu hero */
.lp-band { position: relative; margin-top: -25px; padding: 0 var(--site-pad); }
.lp-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 23px 0; list-style: none; background: var(--surface); border: 1px solid #ece7f3; border-radius: 14px; box-shadow: 0 12px 32px #30224e08; }
.lp-capabilities li { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 42px; font-size: 16px; font-weight: 600; }
.lp-capabilities li + li { border-left: 1px solid var(--line); }
.lp-capabilities .icon { color: var(--accent); }

.lp-section { padding: 64px var(--site-pad); scroll-margin-top: 28px; }
.section-title { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 730; letter-spacing: -0.034em; text-wrap: balance; }
.lp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.lp-section-head .section-title { margin-top: 14px; }
.lp-section-head > p { max-width: 315px; margin: 0; font-size: 15px; color: var(--ink-muted); }
.lp-icon-box { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; background: var(--accent-soft); color: var(--accent); border-radius: 13px; }
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 30px 0 0; padding: 0; list-style: none; }
.lp-step { padding: 25px; background: linear-gradient(140deg, #faf8ff, var(--surface)); border: 1px solid #eae5f2; border-radius: 14px; }
.lp-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
.lp-number { font-size: 32px; line-height: 1; font-weight: 650; letter-spacing: -0.03em; color: #b2a0d2; }
.lp-step h3 { margin: 0 0 9px; font-size: 21px; line-height: 1.4; letter-spacing: -0.02em; }
.lp-step p { margin: 0; max-width: 340px; font-size: 16px; color: var(--ink-muted); }

/* dovnitř / ven */
.lp-workflow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding-top: 0; }
.lp-flow { overflow: hidden; padding: 30px; background: radial-gradient(ellipse at 100% 100%, #e4d6ff, #e4d6ff00 70%), #f9f6ff; border: 1px solid #e7dff3; border-radius: 18px; }
.lp-flow.is-warm { background: radial-gradient(ellipse at 100% 100%, #ffe5cf, #ffe5cf00 70%), #fffbf7; border-color: #f0e4d7; }
.lp-flow h3 { margin: 13px 0 10px; font-size: 25px; line-height: 1.25; letter-spacing: -0.028em; }
.lp-flow > p { max-width: 460px; margin: 0; font-size: 16px; color: var(--ink-muted); }
.lp-upload { display: flex; align-items: center; gap: 15px; margin-top: 24px; padding: 21px; background: #ffffffa6; border: 1px dashed #bca1e3; border-radius: 12px; }
.lp-upload .icon { color: var(--accent); }
.lp-upload strong { display: block; font-size: 15px; }
.lp-upload small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-muted); }
.lp-export { display: flex; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp-export li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 17px 13px; background: #ffffffb8; border: 1px solid #ecdfd3; border-radius: 10px; font-size: 14px; font-weight: 650; }
.lp-export .icon { color: #9b653e; }

/* tmavý pás s ukázkou kontroly */
.lp-dark { padding: 66px var(--site-pad); background: radial-gradient(ellipse at 80% 20%, #61419b, #61419b00 58%), linear-gradient(120deg, #211736, #33204f); color: var(--surface); }
.lp-dark-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.lp-dark .lp-eyebrow { color: #cebaff; }
.lp-dark .section-title { max-width: 530px; margin: 16px 0 19px; }
.lp-dark p { max-width: 500px; margin: 0; font-size: 18px; color: #d4cbe2; }
.lp-checks { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 16px; font-weight: 550; }
.lp-checks li { display: flex; align-items: center; gap: 11px; }
.lp-check { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); }
.lp-review { justify-self: center; width: 100%; max-width: 470px; padding: 24px; background: var(--surface); color: var(--ink); border: 1px solid #e5dff0; border-radius: 14px; box-shadow: 0 22px 50px #12072035; transform: rotate(1deg); }
.lp-review-head { display: flex; align-items: center; gap: 10px; margin: -24px -24px 22px; padding: 17px 24px; background: var(--review-tint); border-bottom: 1px solid #f6e9c8; border-radius: 14px 14px 0 0; color: var(--review); font-size: 19px; font-weight: 700; }
.lp-review h3 { margin: 0 0 14px; font-size: 19px; }
.lp-review-alert { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--review-soft); color: var(--review); border-radius: 6px; font-size: 14px; }
.lp-review-label { display: block; margin: 17px 0 6px; font-size: 13px; font-weight: 600; }
.lp-review-input { padding: 9px 12px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 15px; }
.lp-review-save { width: 100%; margin-top: 18px; min-height: 42px; }

.lp-audiences { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.lp-audience { display: flex; align-items: flex-start; gap: 23px; padding: 29px; background: linear-gradient(125deg, #faf7ff, var(--surface)); border: 1px solid #e5ddf0; border-radius: 12px; }
.lp-audience.is-warm { background: linear-gradient(125deg, #fff8f3, var(--surface)); border-color: #f0e3da; }
.lp-audience h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -0.02em; }
.lp-audience p { max-width: 470px; margin: 0; font-size: 16px; color: var(--ink-muted); }
#pro-koho .section-title { font-size: 35px; }

.lp-faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; padding-top: 0; }
.lp-faq .section-title { margin-top: 13px; font-size: 34px; }
.lp-faq > div > p { margin: 15px 0 0; font-size: 16px; color: var(--ink-muted); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary { position: relative; padding: 19px 30px 19px 0; font-size: 16px; font-weight: 650; list-style: none; cursor: pointer; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 15px; font-size: 23px; font-weight: 400; color: var(--accent); }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { margin: 0; padding: 0 20px 20px 0; font-size: 15px; color: var(--ink-muted); }

.cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 var(--site-pad) 70px; padding: 46px 40px; background: radial-gradient(ellipse at 100% 0%, #bc89e8, #bc89e800 55%), linear-gradient(120deg, #452486, #7044c4); color: var(--surface); border-radius: 20px; box-shadow: 0 15px 40px #6941c61a; }
.cta::after { content: ""; position: absolute; right: -140px; bottom: -175px; width: 230px; height: 230px; background: #bfa4ed; border-radius: 48px; transform: rotate(-30deg); }
.cta h2 { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 730; letter-spacing: -0.028em; }
.cta p { margin: 10px 0 0; font-size: 17px; color: #e4dcf5; }
.cta-action { position: relative; z-index: 1; flex-shrink: 0; text-align: center; }
.cta-action p { margin-top: 10px; font-size: 12px; }
/* na fialovém pásu je primární světlé, ať nesplyne */
.cta .ik-btn-primary { background: #e9ddff; border-color: #e9ddff; color: #472581; box-shadow: none; }
.cta .ik-btn-primary:hover { background: var(--surface); border-color: var(--surface); color: #472581; }

/* odběr novinek (NewsletterControl) */
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; margin: 0 var(--site-pad) 70px; padding: var(--space-10); background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.newsletter-title { font-size: 28px; line-height: 34px; font-weight: 750; letter-spacing: -0.03em; margin-bottom: var(--space-3); }
.newsletter-text p { margin: 0; color: var(--ink-muted); }
.newsletter-row { display: flex; gap: var(--space-2); }
.newsletter-row input[type=email] { flex: 1 1 auto; min-width: 0; }
.newsletter-form.is-sending .ik-btn { opacity: 0.6; pointer-events: none; }
.newsletter-sent { display: flex; gap: var(--space-4); align-items: flex-start; }
.newsletter-sent .step-icon { margin: 0; flex-shrink: 0; }
.newsletter-sent p:last-child { margin: 0; }
.step-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent); }
.step-icon-soft { margin-bottom: var(--space-4); }

.site-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 32px; min-height: 106px; padding: 0 var(--site-pad); border-top: 1px solid var(--line); }
.site-footer .logo { font-size: 24px; }
.site-footer p { margin: 0; font-size: 13px; color: var(--ink-muted); }
.site-footer-nav { display: flex; gap: 26px; margin-left: auto; font-size: 13px; }
.site-footer-nav a { text-decoration: none; color: var(--ink-muted); }

@media (max-width: 1100px) {
	:root { --site-pad: 24px; }
	.hero { gap: 30px; }
	.hero-title { font-size: 48px; letter-spacing: -0.04em; }
	.hero-lead { font-size: 18px; }
	.lp-preview { padding: 19px 16px 10px; }
	.lp-preview-row { grid-template-columns: 1fr 0.7fr 1fr; gap: 8px; }
	.lp-mini { display: none; }
	.lp-mail, .lp-file { width: 290px; }
	.lp-arrow { left: 310px; width: 48px; }
	.lp-dark-inner { gap: 45px; }
	.lp-step { padding: 22px; }
	.section-title { font-size: 34px; }
	.lp-section-head > p { max-width: 250px; }
	.lp-export li { padding: 14px 10px; font-size: 12px; }
	.cta { padding: 36px; }
	.cta h2 { font-size: 27px; }
}

@media (max-width: 760px) {
	:root { --site-pad: 20px; }
	.site-header { min-height: 74px; gap: 20px; }
	.site-nav { display: none; }
	.site-account { gap: 15px; font-size: 13px; }
	.site-account .ik-btn { min-height: 40px; padding: 0 12px; font-size: 13px; }
	.hero { grid-template-columns: minmax(0, 1fr); gap: 34px; min-height: 0; padding-top: 45px; padding-bottom: 60px; }
	.hero-title { margin: 20px 0; font-size: 43px; letter-spacing: -0.04em; }
	.hero-lead { font-size: 17px; }
	.hero-actions { gap: 10px; margin-top: 24px; }
	.hero-actions .ik-btn { padding: 0 15px; font-size: 14px; }
	.hero-formats { margin-top: 18px; }
	.lp-mail { width: 255px; margin-left: 10px; padding: 12px 16px; }
	.lp-mail strong { font-size: 14px; }
	.lp-arrow { left: auto; right: 5px; top: 26px; width: 42px; height: 55px; }
	.lp-preview-head strong { font-size: 18px; }
	.lp-preview-row, .lp-preview-row strong { font-size: 12px; }
	.lp-preview-row { min-height: 58px; }
	.lp-file { width: 245px; padding: 12px 15px; font-size: 13px; }
	.lp-capabilities { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 22px; }
	.lp-capabilities li { justify-content: flex-start; gap: 12px; min-height: 34px; font-size: 14px; }
	.lp-capabilities li + li { border-left: 0; }
	.lp-section { padding-top: 45px; padding-bottom: 45px; }
	.lp-workflow, .lp-faq { padding-top: 0; }
	.section-title, #pro-koho .section-title, .lp-faq .section-title { font-size: 31px; letter-spacing: -0.03em; }
	.lp-section-head { display: block; }
	.lp-section-head > p { max-width: none; margin-top: 16px; }
	.lp-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.lp-step { padding: 23px; }
	.lp-step-top { margin-bottom: 16px; }
	.lp-step p { max-width: none; }
	.lp-workflow, .lp-audiences { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.lp-flow { padding: 24px; }
	.lp-flow h3 { font-size: 24px; }
	.lp-export { flex-wrap: wrap; }
	.lp-dark { padding-top: 45px; padding-bottom: 45px; }
	.lp-dark-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.lp-dark p { font-size: 16px; }
	.lp-review { padding: 20px; transform: none; }
	.lp-review-head { margin: -20px -20px 20px; padding: 15px 20px; }
	.lp-audiences { margin-top: 25px; }
	.lp-audience { gap: 16px; padding: 22px; }
	.lp-audience .lp-icon-box { width: 44px; height: 44px; }
	.lp-audience h3 { font-size: 19px; }
	.lp-audience p { font-size: 15px; }
	.lp-faq { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.lp-faq summary { font-size: 15px; }
	.cta { flex-direction: column; align-items: flex-start; gap: 26px; margin-bottom: 45px; padding: 30px 24px; }
	.cta h2 { font-size: 29px; }
	.cta p { font-size: 16px; }
	.cta-action { text-align: left; }
	.newsletter { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-bottom: 45px; padding: var(--space-6); }
	.newsletter-row { flex-direction: column; }
	.site-footer { gap: 20px; padding-top: 26px; padding-bottom: 26px; }
	.site-footer p { font-size: 12px; }
	.site-footer-nav { width: 100%; flex-wrap: wrap; gap: 20px; margin: 0; font-size: 12px; }
}


/* ---------- přihlášení a registrace ---------- */
.auth-header { padding: 20px var(--app-pad); border-bottom: 1px solid var(--line); background: var(--surface); }
.auth-main { display: flex; flex-direction: column; align-items: center; padding: 64px var(--space-4); }
.auth-card { width: 100%; max-width: 460px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.auth-card .form-fields input[type=submit] { width: 100%; margin-top: var(--space-2); }
.auth-links { margin: var(--space-4) 0 0; }
.auth-footer { margin-top: var(--space-6); color: var(--ink-muted); font-size: 15px; }

/* ---------- aplikace ---------- */
.app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px var(--app-pad); background: var(--surface); border-bottom: 1px solid var(--line); }
.app-header-left, .app-header-right { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.app-header-left { gap: var(--space-10); }
.app-nav { display: flex; gap: var(--space-2); }
.app-nav a { text-decoration: none; padding: 10px 16px; border-radius: var(--radius-md); white-space: nowrap; color: var(--ink-muted); font-size: 15px; font-weight: 600; }
.app-nav a:hover { color: var(--ink); }
.app-nav a.is-current { color: var(--accent); background: var(--accent-soft); }
/* hamburger a profil/odhlášení v menu jen na mobilu */
.app-menu-toggle, .app-nav-extra, .app-menu-close { display: none; }
/* jméno + avatar rozbalí nabídku Profil / Nastavení / Odhlásit se */
.user-menu { position: relative; }
.user-menu summary { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 4px 0 10px; border-radius: var(--radius-md); list-style: none; cursor: pointer; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--accent-soft); }
.user-menu summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.user-menu .ik-menu { min-width: 200px; }
.user-menu .ik-menu a { gap: var(--space-3); min-height: 44px; }
.user-menu .ik-menu .icon { color: var(--ink-muted); }
.user-menu .user-menu-out { margin-top: var(--space-1); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.app-user-name { color: var(--ink-muted); font-size: 14px; }
.avatar { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: #eee6ff; color: var(--accent); align-items: center; justify-content: center; font-weight: 650; font-size: 14px; }
.account-switch { position: relative; }
.account-switch summary { cursor: pointer; font-weight: 600; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); list-style: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-switch summary::after { content: " ▾"; color: var(--ink-muted); }
.account-switch-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-1); display: flex; flex-direction: column; }
.account-switch-menu a { padding: 10px 12px; text-decoration: none; border-radius: var(--radius-sm); }
.account-switch-menu a:hover { background: var(--accent-soft); }
.account-switch-menu a.is-current { font-weight: 650; }
.account-switch-menu .account-switch-all { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; margin-top: var(--space-1); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--ink-muted); }

/* výběr firmy (Accounts) */
.account-row { display: flex; align-items: center; gap: var(--space-4); padding: 14px 20px; border-top: 1px solid var(--line); }
.account-row.is-current { background: var(--surface-tint); }
.account-row-main { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.account-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-row-current { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.page-foot { margin-top: var(--space-6); }

/* atmosféra za nadpisem stránky: levandulová a broskvová skvrna nahoře vpravo, dál čisté paper */
.app-main { padding: 32px var(--app-pad) 64px; background: radial-gradient(ellipse 60% 240px at 80% 0, var(--glow), #e3d7ff00), radial-gradient(ellipse 40% 200px at 100% 160px, var(--peach), #ffeadf00), var(--paper) no-repeat; }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: var(--space-6); align-items: start; }
.page-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; container: page-main / inline-size; }
.page-aside { display: flex; flex-direction: column; gap: 17px; }
/* hlavička stránky jako pás přes celou šířku (Přijaté faktury): drobečky, nadpis, věta, akce vpravo */
.page-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); margin: -32px calc(var(--app-pad) * -1) 26px; padding: 31px var(--app-pad) 29px; background: radial-gradient(ellipse at 80% 0%, var(--glow), #e3d7ff00 60%), radial-gradient(ellipse at 100% 85%, var(--peach), #ffeadf00 50%), linear-gradient(110deg, var(--paper), #f6f2ff); border-bottom: 1px solid #ece6f4; }
.page-top .h1 { margin: 0; }
.page-crumb { margin-bottom: var(--space-2); font-size: 12px; color: var(--ink-faint); }
.page-crumb span { margin: 0 6px; color: #bdb2c8; }
.page-sub { margin: 9px 0 0; font-size: 15px; color: var(--ink-muted); }
.page-sub strong { color: var(--review); font-weight: 600; }
.page-top-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page-top-actions .ik-btn { min-height: 40px; }
.app-main:has(> .page-top) { background: var(--paper); }
.page-narrow { max-width: 760px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.page-head .h1 { margin-bottom: var(--space-1); }
.page-head + p { margin-top: var(--space-3); }
/* nastavení seznamu (pravidla): vpravo tlačítko s textem; na mobilu by se zalomilo, tam místo něj ikonka za nadpisem */
.page-title { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1); }
.page-head .page-title .h1 { margin-bottom: 0; }
.ik-icon-btn.page-title-setting { display: none; }
/* vysvětlivka na klik (data-inline-help): věta + „Co to je“, text se rozbalí pod ní; bez JS je rozbalená */
.inline-help-toggle { display: none; padding: 10px 2px; margin: -10px 0; border: 0; background: none; font: inherit; color: var(--ink-muted); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.inline-help-toggle:hover { color: var(--ink); }
.inline-help-text { display: flex; align-items: flex-start; gap: var(--space-2); max-width: 640px; margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); }
.inline-help-text > span { flex: 1; padding: 7px 0; }
.ik-icon-btn.inline-help-close { display: none; }
.js .inline-help-toggle { display: inline; }
.js .ik-icon-btn.inline-help-close { display: inline-flex; }
.js .inline-help-text { cursor: pointer; }
.js .inline-help:not(.is-open) .inline-help-text { display: none; }
.search { display: flex; align-items: flex-end; gap: var(--space-2); }
.field-inline { display: flex; flex-direction: column; gap: 4px; }
.search .input { width: 280px; height: 40px; font-size: 15px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); margin-bottom: var(--space-6); }
.card-highlight { border-color: var(--accent-line); }
/* přidávací formulář u seznamu (vzor v DESIGN.md): .with-add > details.add-panel + .with-add-main.
   Zavřený vypadá jako sekundární tlačítko „+ …“, otevřený (atribut open, např. u prázdného seznamu nebo s chybami) jako karta.
   Vedle seznamu jen tam, kde seznam (max. 760 px) zabere méně než 60 % šířky obsahu: 760 / 0,6 + 2 × 40 px okraj = 1347 px. */
.add-panel { margin-bottom: var(--space-6); }
.add-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); list-style: none; cursor: pointer; }
.add-panel > summary::-webkit-details-marker { display: none; }
.add-panel > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.add-panel > summary h2 { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: inherit; }
.add-panel:not([open]) > summary { width: fit-content; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); font-weight: 650; line-height: 20px; }
.add-panel:not([open]) > summary:hover { border-color: var(--ink); }
.add-panel:not([open]) > summary > .icon, .add-panel[open] > summary h2 .icon { display: none; }
.add-panel[open] { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); background: var(--surface); }
.add-panel[open] > summary { min-height: 44px; margin: -8px 0 var(--space-3); border-radius: var(--radius-sm); font-size: 20px; line-height: 28px; font-weight: 600; }
.add-panel-title { display: none; }
@media (min-width: 1347px) {
	.page-narrow:has(> .with-add) { max-width: 1160px; }
	.with-add { display: grid; grid-template-columns: minmax(0, 760px) 368px; gap: 0 32px; align-items: start; }
	.with-add > .add-panel { grid-column: 2; grid-row: 1; }
	.with-add > .add-panel .form-cols { align-items: end; }
	@supports selector(::details-content) {
		.with-add > .add-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); background: var(--surface); }
		.with-add > .add-panel::details-content { content-visibility: visible; }
		.with-add > .add-panel > summary { display: none; }
		.with-add > .add-panel > .add-panel-title { display: block; }
	}
}
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; text-decoration: none; min-height: 32px; margin-bottom: var(--space-3); }

/* adresa pro příjem */
.address-card { display: flex; flex-direction: column; gap: var(--space-3); padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); align-items: flex-start; }
.address-value { font-size: 15px; word-break: break-all; }
.address-card-inline { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface-tint); box-shadow: none; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.address-card-inline .address-value { font-size: 16px; }

/* postranní karty: nahrání, adresa e-mailem, další krok */
.aside-card { padding: 21px 19px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.aside-upload { padding-top: 22px; background: radial-gradient(ellipse at 90% 0%, #eadfff, #eadfff00 60%), var(--surface); border-color: #e4d8f3; scroll-margin-top: var(--space-4); }
.aside-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -0.018em; }
.aside-title .icon { color: var(--accent); }
.aside-copy { margin: 9px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-muted); }
.aside-meta { margin: 13px 0 0; text-align: center; font-size: 12px; line-height: 1.7; color: var(--ink-faint); }
.aside-address { margin-top: 14px; padding: 12px; background: #f8f5fd; border: 1px solid #eee6f7; border-radius: 7px; font-size: 14px; font-weight: 650; color: #55416f; overflow-wrap: anywhere; }
.aside-copy-btn { width: 100%; min-height: 40px; margin-top: 10px; font-size: 14px; }
.aside-note { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 12px; color: var(--ink-faint); }
.aside-note .icon { color: #9b86bb; }
.ik-next { position: relative; overflow: hidden; padding: 19px; background: linear-gradient(125deg, var(--night), var(--night-2)); border: 1px solid #493561; border-radius: 11px; color: var(--surface); }
.ik-next::after { content: ""; position: absolute; right: -28px; bottom: -55px; width: 140px; height: 140px; border: 1px solid #ffffff17; border-radius: 50%; box-shadow: 0 0 0 20px #ffffff05; }
.ik-next-eyebrow { font-size: 11px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: #cbb5eb; }
.ik-next h2 { max-width: 220px; margin: 7px 0 0; font-size: 15px; line-height: 1.45; }
.ik-next p { max-width: 235px; margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--night-ink); }
.ik-next a { position: relative; z-index: 1; display: inline-block; padding-top: 12px; font-size: 13px; font-weight: 650; color: #e8d6ff; text-decoration: none; }
.ik-next a:hover { color: var(--surface); text-decoration: underline; }

/* dropzóna */
.ik-drop { display: flex; flex-direction: column; align-items: center; margin-top: 18px; padding: 24px 14px 20px; text-align: center; border: 1px dashed #bba0e0; border-radius: 9px; background: #ffffffa8; }
.ik-drop.is-over { background: #e7d9ff; border-color: var(--accent); }
.ik-drop-icon { display: grid; place-items: center; width: 47px; height: 52px; margin: 0 auto 12px; background: linear-gradient(140deg, #ede3ff, var(--surface)); border: 1px solid #e5d8f8; border-radius: 10px; color: var(--accent); }
.ik-drop strong { display: block; font-size: 14px; }
.ik-drop p { margin: 5px 0 15px; color: var(--ink-faint); font-size: 12px; line-height: 18px; }
.ik-drop-pick { width: 100%; min-height: 40px; font-size: 14px; }
.ik-drop-pick:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.ik-drop.has-js [data-dropzone-submit] { display: none; }
.ik-drop.is-uploading { opacity: 0.6; pointer-events: none; }

/* seznam faktur */
.ik-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.ik-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 20px; font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.018em; margin: 0; }
h2.ik-list-head { justify-content: flex-start; gap: var(--space-2); }
.ik-list-head h2 { font-size: inherit; font-weight: inherit; }
/* počet v nadpisu seznamu: tichý čtvereček vedle nadpisu */
.ik-list-head .ik-data { display: inline-grid; place-items: center; min-width: 23px; height: 23px; margin-left: var(--space-1); padding: 0 6px; border-radius: var(--radius-sm); background: #f0edf7; color: #6c5d80; font-size: 12px; line-height: 1; font-weight: 650; letter-spacing: 0; vertical-align: 2px; }
/* „Na vás čeká“: teplá hlavička, na tahu je uživatel */
.ik-list-review { border-color: var(--review-line); }
.ik-list-review > .ik-list-head { background: linear-gradient(100deg, var(--review-tint), #fffdf8); border-bottom: 1px solid var(--review-line); color: var(--review); }
.ik-list-review > .ik-list-head .ik-data { background: var(--review-soft); color: var(--review); }
.ik-list-review > .ik-row-cols { background: var(--review-tint); border-top: 0; }
.ik-list-review > .ik-list-head + .ik-row:not(.ik-row-cols) { border-top: 0; }
/* nástroje v hlavičce seznamu: řazení a ZIP */
.ik-list-tools { display: flex; align-items: center; gap: var(--space-2); }
.ik-list-note { color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 400; }
.ik-list-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.ik-list-review > .ik-list-head .ik-list-note { font-size: 12px; color: var(--review); }
.ik-list-sub { margin: 5px 0 0; font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }
.ik-btn-xs { min-height: 30px; padding: 0 9px; gap: 6px; font-size: 12px; border-radius: var(--radius-sm); }

/* „Co znamenají stavy“: vysvětlivka (data-inline-help) pod hlavičkou seznamu, přepínač jako tlačítko */
.ik-list-top .ik-list-head { padding-top: 20px; padding-bottom: 15px; align-items: flex-start; }
.ik-list-top .inline-help-toggle { margin: 0; padding: 0 12px; gap: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; }
.js .ik-list-top .inline-help-toggle { display: inline-flex; }
.ik-list-top .inline-help-text { max-width: none; margin: 0 20px 16px; font-size: 14px; line-height: 21px; }

/* hledání, filtr a řazení v kartě seznamu (GET formulář, s JS se odešle po změně) */
.ik-toolbar { display: flex; gap: 9px; padding: 0 20px 17px; }
.ik-search { position: relative; flex: 1; min-width: 140px; }
.ik-search .icon { position: absolute; left: 11px; top: 11px; color: var(--ink-faint); pointer-events: none; }
.ik-search input { width: 100%; height: 40px; padding: 8px 12px 8px 36px; border: 1px solid #dfdce7; border-radius: 7px; background: #fcfbfe; font: inherit; font-size: 14px; color: var(--ink); }
.ik-toolbar select { min-width: 140px; max-width: 190px; height: 40px; padding: 7px 10px; border: 1px solid #dfdce7; border-radius: 7px; background: var(--surface); font: inherit; font-size: 14px; color: #514b60; }
.js .ik-toolbar-submit { display: none; }
.ik-toolbar .ik-btn { min-height: 40px; }

/* tabulka načtených faktur */
.ik-table-wrap { margin: 0; }
.ik-table { width: 100%; border-collapse: collapse; text-align: left; }
.ik-table th { padding: 10px 12px; background: var(--surface-tint); border-block: 1px solid var(--line-soft); font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.ik-table td { padding: 13px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ik-table th:first-child, .ik-table td:first-child { padding-left: 20px; }
.ik-table th:last-child, .ik-table td:last-child { padding-right: 20px; }
.ik-table tbody tr:not(.ik-panel-row):hover { background: var(--row-hover); }
.ik-table .is-num, .ik-cell-amt { text-align: right; }
.ik-cell-date { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.ik-cell-vs { font-size: 13px; color: var(--ink-faint); }
.ik-cell-amt { font-size: 14px; font-weight: 600; white-space: nowrap; }
.ik-vendor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ik-initials { display: grid; place-items: center; flex-shrink: 0; width: 31px; height: 31px; background: #f6f3fb; border: 1px solid #e9e4f2; border-radius: var(--radius-md); font-size: 10px; font-weight: 650; color: #8b7b9f; }
.ik-vendor-text { min-width: 0; }
.ik-cell-who { width: 100%; max-width: 0; } /* vezme zbylé místo, dlouhý popis se zkrátí elipsou */
.ik-vendor-text .ik-row-title { display: block; font-size: 14px; }
.ik-vendor-text small { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-muted); }
.ik-vendor .ik-row-issued .icon { vertical-align: -2px; margin-right: 4px; }
/* platba: tichá ikonka + krátký text (ne štítek); nespárovaná v money-out, počet návrhů v bublině */
.ik-pay { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; font-size: 12px; font-weight: 550; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
a.ik-pay:hover { color: var(--accent); }
.ik-pay.is-unpaired, a.ik-pay.is-unpaired:hover { color: var(--money-out); }
.ik-pay-count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: var(--surface); font-size: 10px; font-weight: 700; }
a.ik-badge { text-decoration: none; }
.ik-panel-row td { padding: 0; border: 0; }
.ik-panel-row .ik-move-panel:not([hidden]) { border-bottom: 1px solid var(--line-soft); }
.ik-list-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding: 14px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-faint); }
.ik-list-foot .pager { padding: 0; border: 0; gap: var(--space-3); }
.ik-table-wrap + .ik-list-foot { border-top-color: var(--line-soft); }

/* řádek karty „Na vás čeká“ */
.ik-wait-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 150px 132px; align-items: center; gap: 13px 17px; padding: 17px 20px; }
.ik-wait-row + .ik-wait-row { border-top: 1px solid #f0ebe1; }
.ik-doc { display: grid; place-items: center; width: 38px; height: 42px; background: #fff9ed; border: 1px solid #efdfc4; border-radius: var(--radius-md); color: #ba8a42; }
.ik-wait-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ik-wait-main .ik-row-title { font-size: 15px; }
.ik-wait-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font-size: 13px; color: var(--review); }
.ik-wait-note small { font-size: 12px; color: var(--ink-faint); }
.ik-wait-amt { text-align: right; }
.ik-wait-amt .ik-data { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ik-wait-amt small { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-faint); }
.ik-wait-row > .ik-btn { justify-self: end; }
.sort-menu { position: relative; }
.sort-menu summary { list-style: none; cursor: pointer; gap: 4px; text-decoration: none; }
.sort-menu summary::-webkit-details-marker { display: none; }
.sort-menu .ik-menu { min-width: 200px; font-size: 16px; font-weight: 400; }
.sort-menu .ik-menu a { min-height: 44px; }
.sort-menu .ik-menu a.is-current { font-weight: 650; }
.ik-inv { display: grid; grid-template-columns: minmax(0, 1fr) 140px 190px 214px; grid-template-areas: "main amt state action"; gap: var(--space-4); align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
.ik-inv:hover { background: var(--row-hover); }
.ik-inv-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ik-inv-title { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-inv-title:hover { text-decoration: underline; }
.ik-amt { grid-area: amt; text-align: right; font-size: 15px; white-space: nowrap; }
.ik-inv-state { grid-area: state; }
.ik-inv-action { grid-area: action; display: flex; justify-content: flex-end; gap: var(--space-2); }
/* řádek přijaté faktury: přijato | firma + poznámka | (obsah, has-info) | VS | částka | tlačítko nebo tiché ikonky */
.ik-row {
	--ik-row-action: calc(var(--ik-row-icons, 1) * 36px + (var(--ik-row-icons, 1) - 1) * var(--space-1));
	display: grid; grid-template-columns: 84px minmax(0, 1fr) 112px 128px var(--ik-row-action);
	grid-template-areas: "date main vs amt action"; gap: var(--space-4); align-items: center;
	padding: 10px 20px; border-top: 1px solid var(--line);
}
.ik-row.has-action { --ik-row-action: 132px; }
.ik-row.has-actions-2 { --ik-row-action: 216px; }
.ik-row:not(.ik-row-cols):hover { background: var(--row-hover); }
.ik-row-cols { padding-top: 10px; padding-bottom: 10px; background: var(--surface-tint); font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.ik-row-date { grid-area: date; color: var(--ink-muted); white-space: nowrap; }
.ik-row-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ik-row-title { font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ik-row-title:hover { text-decoration: underline; }
/* externí odkaz za názvem (faktury u poskytovatele); dotykový cíl 44 px přes ::after */
.ik-row-name { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.ik-row-ext { position: relative; display: inline-flex; flex-shrink: 0; margin-top: 4px; color: var(--ink-muted); } /* na střed prvního řádku (24 px) */
.ik-row-ext::after { content: ""; position: absolute; inset: -14px; }
a.ik-row-ext:hover { color: var(--ink); }
.ik-row-issued .icon { vertical-align: -2px; margin-right: var(--space-1); }
.ik-row-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
/* po splatnosti: tlumená červená jako odchozí platby, ne stav faktury */
.ik-overdue { color: var(--money-out); }
/* tichý sloupec (has-info): co faktura / pohyb obsahuje; jen na širokém sloupci, viz @container níž */
.ik-row-info { display: none; grid-area: info; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
@container page-main (min-width: 860px) {
	.ik-row.has-info { grid-template-columns: 84px minmax(0, 260px) minmax(0, 1fr) 112px 128px var(--ik-row-action); grid-template-areas: "date main info vs amt action"; }
	.ik-row.has-info .ik-row-info { display: block; }
	/* co je v tichém sloupci, se pod názvem neopakuje (na úzkém sloupci tam zůstává) */
	.ik-row.has-info .is-info-dup { display: none; }
}
.ik-row-vs { grid-area: vs; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-row-vs-label { display: none; }
.ik-row-amt { grid-area: amt; text-align: right; font-size: 15px; white-space: nowrap; }
.ik-row-cols .ik-row-amt { font-size: inherit; }
.ik-row-action { grid-area: action; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
/* tichá ikonka v řádku: odkaz bez rámečku, rámeček až při najetí */
.ik-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; }
a.ik-icon-btn:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.ik-icon-btn.is-muted { color: var(--ink-muted); }
.ik-icon-btn.is-error { color: var(--error); }
/* nespárováno (link-off): tlumená červená jako odchozí platby, ne stav faktury */
.ik-icon-btn.is-unpaired, a.ik-icon-btn.is-unpaired:hover, .ik-legend .is-unpaired { color: var(--money-out); }
.ik-icon-btn.is-error:hover { color: var(--error); }
.ik-icon-btn[hidden] { display: none; }
/* řádek, který uživatel právě ignoroval (nebo vrátil) bez přenačtení: ztlumený, jen s opačnou akcí */
.ik-row.is-dimmed > :not(.ik-row-action) { opacity: 0.4; }
.ik-row.is-dimmed .is-unpaired[data-panel] { visibility: hidden; }
/* počet návrhů plateb: limetková = je co udělat */
.ik-count { position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border: 1px solid var(--surface); border-radius: 9px; background: var(--accent); color: var(--surface); font-size: 11px; line-height: 15px; font-weight: 700; text-align: center; }
/* legenda ikonek pod posledním seznamem, přitažená k němu (page-main má gap space-6) */
.ik-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) 18px; margin: calc(var(--space-3) - var(--space-6)) 0 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.ik-legend li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ik-legend .is-error { color: var(--error); }
.ik-icon-count { position: relative; display: inline-flex; margin-right: 10px; }
.ik-icon-count .ik-count { top: -7px; right: -10px; min-width: 15px; height: 15px; font-size: 10px; line-height: 13px; }
/* první kandidát, kterého párovač doporučil */
.ik-recommended { font-size: 13px; font-weight: 600; color: var(--ink); }
.ik-panel-foot { margin: var(--space-2) 0 0; }
/* karta Platba: „Zaplaceno jinak“ se přepíná zaškrtnutím (AJAX) */
.pay-other { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
.ik-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: 16px; line-height: 24px; cursor: pointer; }
.ik-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.pay-other.is-sending { opacity: .6; }
.ik-empty { padding: var(--space-4) 20px var(--space-6); margin: 0; color: var(--ink-muted); border-top: 1px solid var(--line); }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4); border-top: 1px solid var(--line); }

/* přijaté e-maily: řádek jako faktura, bez částky, s hláškami pod textem */
.page-mails { max-width: 1040px; }
.page-mails .ik-list { margin-top: var(--space-6); }
.ik-mail { grid-template-columns: minmax(0, 1fr) 190px 170px; grid-template-areas: "main state action"; }
.ik-mail-messages { margin: var(--space-1) 0 0; padding-left: 18px; font-size: 14px; line-height: 20px; }

/* export: průběh nahrávání do iDokladu (po jedné faktuře, app.js) */
.upload-progress { margin-top: var(--space-4); }
.upload-progress-track { height: 8px; border-radius: var(--radius-sm); background: var(--accent-soft); overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s ease-out; }
.upload-progress-text { margin: var(--space-2) 0 0; font-weight: 600; }
.upload-progress-current { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .upload-progress-fill { transition: none; } }

/* export: faktury, které se do iDokladu nepodařilo poslat (co opravit + odkaz na detail) */
.export-failed { margin-top: var(--space-6); }
.ik-failed { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main action"; }

/* pohyby na účtu: řádky .ik-row jako u faktur, částky s nádechem příchozí / odchozí */
.movements-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); margin: 0; }
.ik-amt.is-in, .ik-row-amt.is-in { color: var(--money-in); }
.ik-amt.is-out, .ik-row-amt.is-out { color: var(--money-out); }
/* nespárovaný pohyb: proužek vlevo mimo tok, ať se data v řádcích nerozjedou; skrytý (is-dimmed) ho nemá */
.ik-row.is-unpaired { position: relative; }
.ik-row.is-unpaired::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--money-out); }
.ik-row.is-unpaired.is-dimmed::before { display: none; }
.ik-move-panel { padding: var(--space-3) 20px var(--space-4); background: var(--surface-tint); border-top: 1px solid var(--line-soft); }
.ik-panel-title { margin: 0 0 var(--space-2); font-size: 15px; color: var(--ink-muted); }
.ik-candidates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ik-candidates li { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: var(--space-4); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.ik-candidates li:first-child { border-top: 0; }
.ik-candidate-main { display: flex; flex-direction: column; min-width: 0; }
.ik-candidate-amt { text-align: right; font-size: 15px; white-space: nowrap; }
/* šipka v řádku pohybu (detail): rozbalená míří nahoru */
.ik-expand .icon { transition: transform .15s ease-out; }
.ik-expand[aria-expanded="true"] .icon { transform: rotate(180deg); }
.ik-row.has-actions-2.has-expand { --ik-row-action: 256px; }
@media (prefers-reduced-motion: reduce) { .ik-expand .icon { transition: none; } }
/* ukazatel načítání panelu (app.js showLoading): 2px proužek přes horní čáru panelu, ukáže se až po 150 ms */
.ik-move-panel { position: relative; }
.ik-loader { position: absolute; top: -1px; left: 0; right: 0; height: 2px; opacity: 0; animation: ik-loader-in 0s linear 150ms forwards; }
.ik-loader-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.ik-loader-fill.is-done { transition: transform .15s ease-out; }
.ik-loader-text { display: none; }
@keyframes ik-loader-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.ik-loader { position: static; height: auto; }
	.ik-loader-fill { display: none; }
	.ik-loader-text { display: block; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
}
/* detail pohybu: popisek (a odkud v řádku je) → hodnota, vlevo zaškrtnutí do pravidla */
.move-fields { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.move-fields th, .move-fields td { padding: 7px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.move-fields tr:first-of-type > * { border-top: 0; }
.move-fields th[scope="row"] { width: 240px; padding-right: var(--space-4); font-weight: 600; }
.move-fields th[scope="row"] label { cursor: pointer; }
.move-field-use { width: 36px; }
.move-field-check { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -11px 0 -11px -12px; cursor: pointer; }
.move-field-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.move-field-src { display: block; font-weight: 400; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.move-field-value { overflow-wrap: anywhere; }
.move-fields-head th { padding: var(--space-4) 0 6px; font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.move-detail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; }
@container page-main (max-width: 620px) {
	/* telefon: popisek nad hodnotou, zaškrtnutí vlevo vedle obou */
	.move-fields tr:not(.move-fields-head) { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "use label" "use value"; padding: 7px 0; border-top: 1px solid var(--line); }
	.move-fields tr:first-of-type { border-top: 0; }
	.move-fields tr:not(.move-fields-head) > * { padding: 0; border-top: 0; }
	.move-fields th[scope="row"] { grid-area: label; width: auto; font-size: 14px; line-height: 20px; }
	.move-field-src { display: inline; margin-left: var(--space-1); }
	.move-field-use { grid-area: use; }
	.move-field-value { grid-area: value; }
	.move-fields-head { display: block; }
	.move-fields-head th { display: block; }
}
/* rozbalovací nabídka (řazení faktur, menu uživatele) */
.ik-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-1); box-shadow: 0 12px 32px #30224e14; }
.ik-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; }
.ik-menu a:hover { background: var(--accent-soft); }
/* pravidla pro pohyby */
.rules-list { margin-bottom: var(--space-6); }
.rule-row { display: flex; align-items: center; gap: var(--space-4); padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rule-row:first-child { border-top: 0; }
.rule-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rule-form .field { margin-bottom: var(--space-4); }
/* pravidla pro faktury: přetahování, řádky „Když / Pak“ */
.rule-handle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 calc(var(--space-3) * -1) 0 calc(var(--space-2) * -1); padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: grab; touch-action: none; }
.rule-handle:hover { color: var(--ink); }
.rule-handle[hidden], .rule-move[hidden], [data-rule-add][hidden], .rule-cond[hidden], [data-rule-value][hidden] { display: none; }
.rule-row.is-dragging { background: var(--accent-soft); }
.rule-row.is-dragging .rule-handle { cursor: grabbing; color: var(--ink); }
.rule-move { display: inline-flex; gap: var(--space-1); }
.rule-rows { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.rule-cond { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-2); width: 100%; }
.rule-cell-field:only-child, .rule-cond:has([data-rule-value][hidden]) .rule-cell-field { grid-column: span 2; }
.rule-error { grid-column: 1 / -1; }

/* výběr ze seznamu s hledáním (select[data-combobox]) */
.ik-combobox { position: relative; }
.ik-combobox-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px; max-height: 300px; overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none; background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--radius-md); box-shadow: 0 12px 32px #30224e14; }
.ik-combobox-list [role=option] { display: flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
.ik-combobox-list [role=option].is-active { background: var(--accent-soft); }
.ik-combobox-list [aria-selected=true] { font-weight: 600; }
.ik-combobox-group { color: var(--ink-muted); }
.ik-combobox-empty { padding: var(--space-3); color: var(--ink-muted); }
.choices-row { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* Fio: návod a formuláře */
.fio-steps { margin: 0 0 var(--space-6); padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-2); }
.fio-token .field, .fio-tracking .field { margin-bottom: var(--space-3); }
.fio-replace { margin-bottom: var(--space-4); }
.fio-replace summary { cursor: pointer; padding: 10px 0; }

/* detail faktury */
.invoice-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.invoice-head .h1 { margin: 0; }
.invoice-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.invoice-source { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: var(--space-4); }
.invoice-source-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.invoice-source-head .ik-muted { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-source-view { width: 100%; height: 760px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); object-fit: contain; object-position: top; }
.invoice-side { display: flex; flex-direction: column; min-width: 0; }
.invoice-form { margin-bottom: var(--space-6); }

/* karta „Zkontrolujte“: pole, kde je na tahu uživatel, rovnou k úpravě */
.inv-attention { padding: var(--space-6); background: var(--surface); border: 1px solid var(--review-line); border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--review-tint), var(--surface) 60%); box-shadow: var(--shadow-card); margin-bottom: var(--space-4); }
.inv-attention .h2 { margin-bottom: var(--space-1); }
.inv-attention > p { color: var(--ink-muted); }
.inv-attention .form-cols { gap: var(--space-3); }
.inv-attention .has-issue { margin: 0; }
.inv-attention .form-actions { padding-top: var(--space-4); }
html:not(.js) .field-mirror { display: none; }

/* sbalené boxy: hlavička s „Upravit“, pod ní náhled; otevřený box ukáže pole a náhled schová */
.inv-boxes { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.inv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.inv-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; }
.inv-box-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; padding: var(--space-1) var(--space-2) var(--space-1) 20px; cursor: pointer; list-style: none; border-radius: var(--radius-md); }
.inv-box-head::-webkit-details-marker { display: none; }
.inv-box-title { font-size: 11px; line-height: 16px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.inv-box-toggle { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.inv-box-head:hover .inv-box-toggle { background: var(--accent-soft); }
.inv-box-toggle .icon { transition: transform 0.15s; }
.inv-details[open] .inv-box-toggle .icon { transform: rotate(180deg); }
.inv-details:not([open]) .when-open, .inv-details[open] .when-closed { display: none; }
.inv-box:has(> .inv-details[open]) > .inv-view { display: none; }
.inv-edit { padding: var(--space-2) 20px 20px; }
.inv-view { padding: 0 20px 20px; cursor: pointer; }
.inv-view [hidden] { display: none; }
.inv-view > :last-child, .inv-view .table-wrap { margin-bottom: 0; }
.inv-subhead { margin: var(--space-6) 0 var(--space-3); }

.inv-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; }
.inv-facts > div { display: contents; }
.inv-facts dt { color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.inv-facts dd { margin: 0; overflow-wrap: anywhere; }
.inv-amounts { grid-template-columns: minmax(0, 1fr) max-content; }
.inv-amounts dd { text-align: right; }
.inv-amounts .is-total dt, .inv-amounts .is-total dd { font-weight: 700; color: var(--ink); }
.inv-amounts + .inv-vat { margin-top: var(--space-4); }
.inv-address { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.inv-ids { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-2); }
.inv-view .is-attention { background: var(--review-soft); color: var(--review); border-radius: var(--radius-sm); padding: 0 var(--space-1); }
.inv-view .is-attention:empty::before { content: "doplňte"; font-family: var(--font-sans); font-style: italic; }
[data-suffix]:not(:empty)::after { content: "\00a0" attr(data-suffix); }
tr.is-removed td { text-decoration: line-through; color: var(--ink-muted); }

/* hustá tabulka polí (položky, rekapitulace DPH): řádek = pole ve sloupcích podle šablony --cells; popisky nese jen první
   řádek, v dalších jsou jen pro čtečky. Nález/chyba zvýrazní pole a text jde pod řádek. */
.cells { --cells: repeat(3, minmax(0, 1fr)); }
.cells-row { display: grid; grid-template-columns: var(--cells); gap: var(--space-2); align-items: end; min-width: 0; }
.cells-row + .cells-row { padding-top: var(--space-2); }
.cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.cell-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cells-row + .cells-row .cell-label { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); }
.cell .input { padding: 0 var(--space-2); }
.cell .input-num { text-align: right; }
.cell.has-issue { background: none; border-radius: 0; padding: 0; margin: 0; }
.cell.has-issue .input { background: var(--review-tint); border: 2px solid var(--review); }
.cell-note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--space-1); }
.hint.cell-note { color: var(--review); }
.cell-note .icon { flex: none; margin-top: 3px; }
.cell-note b { font-weight: 600; }
.vat-edit { --cells: 96px minmax(0, 1fr) minmax(0, 1fr); }

/* položka = dva řádky: popis + kód (+ odebrat), pod nimi čísla; sloupce čísel drží šířku pro částky i na 583 px */
.lines-edit { --cells: minmax(0, 1fr) 80px minmax(0, 1.25fr) 56px minmax(0, 1.25fr) minmax(0, 1.25fr); }
.lines-edit .line-description { grid-area: 1 / 1 / 2 / 5; }
.lines-edit .line-code { grid-area: 1 / 5; }
.lines-edit .line-remove { grid-area: 1 / 6; justify-self: end; }
.lines-edit .line-quantity { grid-area: 2 / 1; }
.lines-edit .line-unit { grid-area: 2 / 2; }
.lines-edit .line-unit_price { grid-area: 2 / 3; }
.lines-edit .line-vat_percent { grid-area: 2 / 4; }
.lines-edit .line-net { grid-area: 2 / 5; }
.lines-edit .line-gross { grid-area: 2 / 6; }
/* každá druhá položka na tichém pásu paper: oba řádky položky drží pohromadě a položky se od sebe oddělí */
.lines-edit .line-edit { padding: var(--space-3); margin: 0 calc(var(--space-3) * -1); border-radius: var(--radius-sm); }
.lines-edit .line-edit:nth-child(even) { background: var(--surface-tint); }
.line-legend { display: none; }
.line-remove { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--ink-muted); cursor: pointer; }
.line-remove:hover { color: var(--ink); }
.line-remove input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.line-remove:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.line-remove > span { display: inline-flex; }
.line-remove:not(:has(:checked)) .when-checked, .line-remove:has(:checked) .when-unchecked { display: none; }
.line-remove:has(:checked) { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.line-edit.is-removed .cell, .line-edit:has(.line-remove :checked) .cell { opacity: 0.5; }
.table-wrap { overflow-x: auto; margin-bottom: var(--space-3); }
.lines { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.lines th { text-align: left; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); font-weight: 650; padding: var(--space-2); border-bottom: 1px solid var(--line); }
.lines td { padding: var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.lines .num { text-align: right; white-space: nowrap; }
/* historie faktury: svislá linka, od nejstarší */
.events { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-4); }
.events li { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.events time { white-space: nowrap; }
.events-fields { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; display: flex; flex-direction: column; gap: var(--space-1); }
.events-fields div { display: flex; flex-wrap: wrap; column-gap: var(--space-2); }
.events-fields dt { color: var(--ink-muted); }
.events-fields dd { margin: 0; }
.notes summary { cursor: pointer; margin-top: var(--space-4); color: var(--ink-muted); font-size: 14px; }
.notes ul { font-size: 14px; color: var(--ink-muted); }

/* lidé s přístupem */
.members { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.member { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.member:first-child { border-top: 0; }
.member-main { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.member-role { min-width: 140px; }
.member-edit { flex-basis: 100%; }
.member-edit summary { cursor: pointer; padding: 10px 0; }
.member-edit[open] summary { margin-bottom: var(--space-2); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-3); }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; }

/* nastavení: záložky a propojení */
.ik-tabs { display: flex; gap: var(--space-6); margin: 0 0 var(--space-6); border-bottom: 1px solid var(--line); }
.ik-tabs a { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -1px; text-decoration: none; color: var(--ink-muted); border-bottom: 2px solid transparent; }
.ik-tabs a:hover { color: var(--ink); }
.ik-tabs a.is-current { color: var(--accent); font-weight: 650; border-bottom-color: var(--accent); }
.integration-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 20px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.integration-row:first-child { border-top: 0; }
.integration-row:hover { background: var(--row-hover); color: var(--ink); }
.integration-row > .icon { color: var(--ink-muted); }
.integration-logo { display: inline-flex; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.integration-logo img { display: block; width: 40px; height: 40px; }
.integration-state { display: inline-flex; align-items: center; gap: var(--space-1); }
.integration-ok { display: inline-flex; color: var(--money-in); }
.integration-main { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.integration-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- menší obrazovky ---------- */
@media (max-width: 1100px) {
	.invoice-grid { grid-template-columns: minmax(0, 1fr); }
	.invoice-source { position: static; order: 2; }
	.invoice-source-view { height: 60vh; }
	.page-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
	.ik-initials { display: none; }
	.ik-table td, .ik-table th { padding-inline: 9px; }
	.ik-wait-row { grid-template-columns: 38px minmax(0, 1fr) 100px 120px; gap: 12px; }
}

/* řádek faktury v úzkém sloupci (telefon, úzké okno vedle panelu): firma + částka, pod tím datum · VS, dole ikonky */
@container page-main (max-width: 620px) {
	.ik-row { grid-template-columns: max-content minmax(0, 1fr) auto; grid-template-areas: "main main amt" "date vs vs" "action action action"; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); }
	.ik-row-cols { display: none; }
	.ik-row-title { white-space: normal; overflow-wrap: anywhere; }
	.ik-row-amt { align-self: start; }
	.ik-row-date, .ik-row-vs { color: var(--ink-muted); font-size: 13px; }
	.ik-row-vs { text-align: left; }
	.ik-row-vs-label { display: inline; }
	.ik-row-action { justify-content: flex-start; margin: var(--space-1) 0 0 -10px; }
	.ik-row-action:empty { display: none; }
	.ik-row.has-action .ik-row-action { margin-left: 0; }
	.ik-icon-btn { width: 44px; height: 44px; }
	.ik-icon-btn.is-empty { display: none; }
}

@media (max-width: 860px) {
	:root { --gutter: 20px; }

	.search, .field-inline, .search .input { width: 100%; }
	.page-head { align-items: stretch; flex-direction: column; }
	.page-head-setting { display: none; }
	.ik-icon-btn.page-title-setting { display: inline-flex; }

	.ik-inv { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main amt" "state action"; gap: var(--space-3) var(--space-2); padding: var(--space-3) var(--space-4); }
	.ik-inv-title { white-space: normal; }
	.ik-mail { grid-template-areas: "main main" "state action"; }
	.ik-failed { grid-template-areas: "main main" "action action"; }
	.ik-failed .ik-inv-action { justify-content: flex-start; }
	.ik-list-head { padding: var(--space-3) var(--space-4); }
	.ik-move-panel { padding: var(--space-3) var(--space-4); }
	.ik-candidates li { grid-template-columns: minmax(0, 1fr) auto; }
	.ik-candidates li .ik-btn { grid-column: 1 / -1; justify-self: start; }

	.form-cols, .form-cols-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.inv-attention { padding: 20px; }
	.inv-pair { grid-template-columns: minmax(0, 1fr); }
	/* záložky nastavení se na šířku nevejdou: posouvají se uvnitř, čára je stínem, ať ji posun neořízne */
	.ik-tabs { gap: var(--space-4); overflow-x: auto; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
	.ik-tabs a { margin-bottom: 0; white-space: nowrap; }
}

@media (max-width: 560px) {
	.ik-list-head:has(.ik-list-tools) { flex-wrap: wrap; }
	.ik-list-head h2 { white-space: nowrap; }
	.ik-list-tools { width: 100%; justify-content: space-between; }
	.app-header { padding: 12px var(--space-4); flex-wrap: wrap; }
	.app-header-left { gap: var(--space-4); width: 100%; justify-content: space-between; }
	/* menu pod hamburgerem: položky pod sebou přes celou šířku; bez JS zůstane rozbalené */
	.app-nav { flex-direction: column; gap: 2px; padding-top: var(--space-2); }
	.js .app-nav { display: none; }
	.js .app-header.is-open .app-nav { display: flex; }
	.app-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); }
	.app-nav .app-nav-extra { display: flex; }
	.app-nav a:not(.app-nav-extra) + .app-nav-extra { margin-top: var(--space-2); border-top: 1px solid var(--line); border-radius: 0; }
	.user-menu { display: none; }
	.app-menu-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--ink); border-radius: var(--radius-md); cursor: pointer; }
	.app-menu-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
	.app-menu-open { display: inline-flex; }
	.is-open .app-menu-open { display: none; }
	.is-open .app-menu-close { display: inline-flex; }
	.app-header-right { position: absolute; top: 2px; right: var(--space-4); gap: var(--space-2); }
	.app-header { position: relative; }
	.app-header-left .app-nav { order: 2; width: 100%; }
	.app-header-left { flex-wrap: wrap; }
	.app-main { padding: 20px var(--space-4) 48px; }
	.auth-card { padding: 20px; }
	.form-cols { grid-template-columns: minmax(0, 1fr); }
	.form-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
	.inv-box-head { padding-left: var(--space-4); }
	.inv-view, .inv-edit { padding-left: var(--space-4); padding-right: var(--space-4); }
	/* položky na telefonu: tři sloupce, popisky u polí v každé položce; „Položka N“ s odebráním nad popisem */
	.lines-edit { --cells: repeat(3, minmax(0, 1fr)); }
	.lines-edit .cells-row + .cells-row .cell-label { position: static; width: auto; height: auto; margin: 0; clip: auto; }
	.lines-edit .cell { grid-area: auto; }
	.lines-edit .line-description { grid-column: span 2; }
	.line-legend { display: block; grid-column: span 2; align-self: center; }
	.lines-edit .line-remove { grid-area: 1 / 3; }
	.lines-edit .line-edit { padding: var(--space-4) var(--space-3); }
	.vat-edit { --cells: 80px minmax(0, 1fr) minmax(0, 1fr); }
	.card { padding: var(--space-4); }
	.account-switch summary { max-width: 140px; }
	.integration-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); }
	.integration-logo { grid-row: 1 / span 2; }
	.integration-state { grid-column: 2; }
	.integration-row > .icon { grid-column: 3; grid-row: 1 / span 2; }
	.rule-row { padding: var(--space-3) var(--space-4); gap: var(--space-2) var(--space-3); }
	.rule-main { flex-basis: calc(100% - 56px); }
	.rule-handle:not([hidden]) ~ .rule-usage { margin-left: 36px; } /* pod textem, ne pod úchytem */
	.rule-cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: var(--space-2); border-top: 1px solid var(--line); }
	.rule-cond:first-of-type { border-top: 0; padding-top: 0; }
	.rule-cell-field, .rule-cond:has([data-rule-value][hidden]) .rule-cell-field { grid-column: 1 / -1; }
}

/* Přijaté faktury (víc sloupců než prototyp, proto už od 1100 px): postranní karty pod seznam (2 sloupce), na telefonu vše pod sebou a řádek tabulky jako blok */
@media (max-width: 1100px) {
	.page-grid { grid-template-columns: minmax(0, 1fr); }
	.page-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	.page-aside .ik-next { grid-column: 1 / -1; }
	.ik-next h2, .ik-next p { max-width: none; }
}

@media (max-width: 600px) {
	.page-top { margin-bottom: 18px; padding-top: 22px; padding-bottom: 22px; flex-direction: column; align-items: stretch; gap: 17px; }
	.page-top .h1 { font-size: 28px; line-height: 34px; }
	.page-crumb { display: none; }
	.page-sub { font-size: 14px; }
	.page-top-actions .ik-btn { flex: 1; }
	.page-aside { grid-template-columns: minmax(0, 1fr); }
	.ik-list-head { padding-inline: 14px; }
	.ik-list-review > .ik-list-head .ik-list-note { display: none; }
	.ik-list-top .inline-help-toggle { display: none !important; }
	.ik-list-top .inline-help-text { margin-inline: 14px; }
	.ik-toolbar { flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
	.ik-search { flex-basis: 100%; }
	.ik-toolbar select { flex: 1; min-width: 0; max-width: none; }
	.ik-wait-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 15px 14px; }
	.ik-doc { width: 30px; height: 35px; }
	.ik-wait-amt { align-self: start; }
	.ik-wait-row > .ik-btn { grid-column: 1 / -1; justify-self: stretch; }
	.ik-wait-row > span:empty { display: none; }
	/* tabulka → bloky: dodavatel + částka nahoře, datum · VS, dole stavy a detail */
	.ik-table, .ik-table tbody { display: block; width: 100%; }
	.ik-table thead { display: none; }
	.ik-table tr:not(.ik-panel-row) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who amt" "date vs" "pay detail" "idoklad detail"; gap: 6px 10px; padding: 14px; border-bottom: 1px solid var(--line-soft); }
	.ik-table tr.ik-panel-row { display: block; }
	.ik-table td, .ik-table td:first-child, .ik-table td:last-child { padding: 0; border: 0; }
	.ik-cell-who { grid-area: who; width: auto; max-width: none; min-width: 0; }
	.ik-cell-amt { grid-area: amt; }
	.ik-cell-date { grid-area: date; font-size: 12px; }
	.ik-cell-vs { grid-area: vs; text-align: right; font-size: 12px; }
	.ik-cell-pay { grid-area: pay; }
	.ik-cell-idoklad { grid-area: idoklad; }
	.ik-cell-detail { grid-area: detail; align-self: end; justify-self: end; }
	.ik-cell-detail .ik-btn { min-height: 44px; }
	.ik-row-vs-label { display: inline; }
	.ik-vendor-text small { display: -webkit-box; max-width: none; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	.ik-list-foot { padding: 14px; }
}