/*
 * Mobilní appka pro makléře (Freelo #31101382).
 *
 * SVĚTLÝ režim. Jedna výjimka: hledáček kamery zůstává tmavý (třída .camera přepíše
 * tokeny ve svém scope). Není to nedůslednost — světlý rám kolem živého náhledu posouvá
 * vnímaný jas fotky, makléř by pak interiéry přeexponoval. Tmavé UI fotoaparátu je navíc
 * konvence, kterou zná z telefonu.
 *
 * V tmavém režimu nesl hierarchii rozdíl jasu ploch. Tady ho není z čeho vzít (bílá karta
 * na světlém pozadí je 1,2:1), takže hierarchii nese OBRYS a STÍN — proto mají karty,
 * inputy i chipy explicitní rámeček.
 *
 * Systémové písmo — žádný webfont, appka musí naskočit i na LTE.
 * Všechno ovládací patří do dolní třetiny obrazovky (thumb-zone).
 */

:root {
	/* plochy */
	--bg: #F1F3F6;             /* lehce studená off-white: neoslňuje v interiéru, ale nechá karty vystoupit */
	--surface: #FFFFFF;        /* karty a panely jsou tu SVĚTLEJŠÍ než pozadí (obráceně proti tmavému) */
	--surface-2: #E7EBF0;      /* výplň chipů a stavových pruhů */
	--border: #CBD3DD;         /* dekorativní linky — nikdy jako obrys ovládacího prvku (1,5:1) */
	--border-strong: #7C8AA0;  /* obrys inputů a chipů, jediný splňuje 3:1 */

	/* text */
	--text: #10151C;           /* skoro-černá s modrým nádechem, 16,5:1 na pozadí */
	--text-dim: #5A6675;       /* meta údaje; nejsvětlejší odstín, co ještě dá 4,5:1 */

	/* akce */
	--accent: #0F5AD8;         /* ztmavený modrý akcent — unese bílý text (6:1), původní #2D7FF9 ne */
	--accent-press: #0A47AE;   /* ve světlém se stisk ZTMAVÍ */
	--accent-soft: #E4EDFC;

	/* pracovní galerie */
	--work: #B45309;           /* jantar musel ztmavnout: #F5A524 má na bílé 2:1 a je nečitelný */
	--work-bright: #F5A524;    /* původní jantar zůstává jen pro tmavý hledáček */
	--work-soft: #FDF0DC;
	--work-ink: #92500A;

	/* stavy */
	--ok: #15803D;
	--ok-soft: #E3F5E9;
	--ok-ink: #12652F;
	--err: #C02626;
	--err-soft: #FDE8E8;
	--wait: #5B6B84;
	--wait-soft: #E9EDF3;
	--wait-ink: #47546B;

	/* elevace — ve světlém nahrazuje „světlejší plocha = výš" */
	--shadow-card: 0 1px 2px rgba(16,21,28,.08), 0 4px 12px rgba(16,21,28,.05);
	--shadow-sheet: 0 -10px 32px rgba(16,21,28,.18);
	--focus-ring: 0 0 0 3px rgba(15,90,216,.32);

	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * Hledáček kamery a skeneru — tmavý ostrov ve světlé appce. Přepisuje tokeny ve svém
 * scope, takže komponenty uvnitř nemusí o výjimce vědět.
 */
.camera {
	--bg: #06090D;
	--surface: rgba(10,13,18,.62);
	--surface-2: rgba(255,255,255,.14);
	--border: rgba(255,255,255,.18);
	--text: #FFFFFF;
	--text-dim: #C7CED8;
	--work: var(--work-bright);
	--accent: #4A93FF;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	overscroll-behavior-y: contain;
}

body { min-height: 100vh; min-height: 100dvh; }

a { color: var(--accent); text-decoration: none; }

button, input {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: var(--focus-ring); }

/* ---------- základní layout obrazovky ---------- */

.screen {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	padding-top: var(--safe-top);
}

.screen-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 10px;
}

.screen-title {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
	flex: 1;
}

.screen-body {
	flex: 1;
	padding: 0 16px calc(24px + var(--safe-bottom));
}

/* ---------- přihlášení ---------- */

.login {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 24px 22px calc(24px + var(--safe-bottom));
	gap: 18px;
}

.login-brand {
	text-align: center;
	margin-bottom: 22px;
}

.login-brand strong {
	display: block;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.login-brand span {
	color: var(--text-dim);
	font-size: 15px;
}

.login-brand strong { color: var(--text); }

.field {
	display: block;
	width: 100%;
	height: 56px;
	padding: 0 16px;
	background: var(--surface);
	border: 1.5px solid var(--border-strong);
	border-radius: 12px;
	color: var(--text);
	font-size: 17px;
}

.field::placeholder { color: var(--text-dim); }

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: var(--accent);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
}

.btn:active { transform: scale(0.985); background: var(--accent-press); }
.btn-ghost:active { background: #E7EBF0; }

.btn-ghost {
	background: var(--surface);
	color: var(--accent);
	border: 1.5px solid var(--border-strong);
}

.msg {
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
}

.msg-err { background: var(--err-soft); color: var(--err); border-left: 3px solid var(--err); }

/* ---------- hledání ---------- */

.search {
	position: relative;
	margin: 0 16px 18px;
}

.search input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	background: var(--surface);
	border: 1.5px solid var(--border-strong);
	border-radius: 12px;
	color: var(--text);
	font-size: 16px; /* pod 16px iOS při fokusu zoomuje */
}

/* ---------- sekce a karty zakázek ---------- */

.section-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin: 22px 0 10px;
}

.card {
	background: var(--surface);
	border: 1px solid #E4E8EE;
	border-radius: 14px;
	padding: 14px;
	margin-bottom: 10px;
	box-shadow: var(--shadow-card);
}

.card-name {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 2px;
}

.card-meta {
	color: var(--text-dim);
	font-size: 13px;
	margin: 0 0 12px;
	font-variant-numeric: tabular-nums;
}

.card-actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.card-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 11px;
	background: var(--work);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.empty {
	color: var(--text-dim);
	text-align: center;
	padding: 40px 20px;
}

/* ---------- focení ---------- */

.camera {
	position: fixed;
	inset: 0;
	background: #000;
	display: flex;
	flex-direction: column;
}

.camera-view {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.camera-head {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: calc(10px + var(--safe-top)) 16px 10px;
	background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
	color: #fff;
}

.camera .icon-btn { background: rgba(0, 0, 0, 0.4); color: #fff; }

.camera-head .name {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--text);
	font-size: 22px;
	cursor: pointer;
	flex: none;
}

.camera-foot {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 12px 16px calc(16px + var(--safe-bottom));
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
}

/* proužek miniatur nahraných fotek */
.strip {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 8px;
	min-height: 56px;
	-webkit-overflow-scrolling: touch;
}

.strip::-webkit-scrollbar { display: none; }

.thumb {
	position: relative;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--surface-2);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-page { box-shadow: inset 0 0 0 1px rgba(16,21,28,.14); }

.thumb .state {
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
}

.thumb .state.wait { background: var(--wait); }
.thumb .state.up { background: var(--accent); }
.thumb .state.ok { background: var(--ok); }
.thumb .state.err { background: var(--err); }

.shutter-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
}

.shutter {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #fff;
	border: 5px solid var(--work);
	cursor: pointer;
	padding: 0;
	justify-self: center;
	/* Explicitní sloupec: boční tlačítka se skrývají (zpět/hotovo u skenu) a bez tohohle
	   by spoušť sklouzla doleva. */
	grid-column: 2;
}

.shutter:active { transform: scale(0.94); }
.shutter:disabled { opacity: 0.4; }

.counter {
	color: #fff;
	font-size: 13px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.counter b { display: block; font-size: 20px; font-weight: 700; }

/* stavový pruh (offline / fronta) */
.bar {
	position: relative;
	z-index: 3;
	padding: 8px 16px;
	font-size: 13px;
	text-align: center;
	background: var(--accent-soft);
	color: var(--accent);
	border-left: 3px solid var(--accent);
}

/* Offline NENÍ chyba, je to stav — červený pruh přes celou šířku by budil dojem,
   že makléř přišel o data. */
.bar.warn { background: var(--wait-soft); color: var(--wait-ink); border-left-color: var(--wait); }
.bar.err { background: var(--err); color: #fff; border-left-color: var(--err); }
.bar[hidden] { display: none; }

/* fullscreen náhled fotky s mazáním */
.viewer {
	position: fixed;
	inset: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0.94);
	display: flex;
	flex-direction: column;
	padding-top: var(--safe-top);
}

.viewer[hidden] { display: none; }

.viewer img {
	flex: 1;
	min-height: 0;
	width: 100%;
	object-fit: contain;
}

.viewer-foot {
	display: flex;
	gap: 10px;
	padding: 14px 16px calc(16px + var(--safe-bottom));
}

.btn-danger { background: var(--err); }

/* fallback, když prohlížeč nepustí kameru */
.fallback-note {
	color: #fff;
	text-align: center;
	padding: 24px;
	font-size: 15px;
}

.hidden-input { display: none; }

/* zvýrazněná karta sekce „Pokračovat" — makléř se k ní vrací nejčastěji */
.card-lead {
	background: var(--work-soft);
	border: 1px solid #F0D6A8;
	border-left: 4px solid var(--work);
}

.card-lead .card-name { font-size: 19px; }

/* ---------- výzva „Přidat na plochu" ---------- */

.install-tip {
	position: relative;
	margin: 0 16px 16px;
	padding: 14px 44px 14px 16px;
	background: var(--accent-soft);
	border: 1px solid #C6DBFA;
	border-radius: 12px;
	font-size: 14px;
	color: var(--text-dim);
	line-height: 1.5;
}

.install-tip strong { color: var(--text); font-weight: 600; }

.install-tip[hidden] { display: none; }

/* Lišta po vzdáleném odhlášení zařízení. Drží se dole nad vším ostatním — appka v tu chvíli
   nefunguje a zpráva nesmí zapadnout pod hledáček kamery ani pod fotky ve stripu. */
.revoked-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
	background: #B3261E;
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
}

.revoked-bar a { color: #fff; font-weight: 600; }

/* Užší než plnohodnotné tlačítko — je to nabídka, ne hlavní akce obrazovky. Výšku ale
   držíme na 44 px, což je nejmenší cíl, který se dá na telefonu spolehlivě trefit. */
.install-tip-btn {
	width: auto;
	min-height: 44px;
	margin-top: 12px;
	font-size: 15px;
}

.install-tip-btn[hidden] { display: none; }

.install-tip .close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	color: var(--text-dim);
	font-size: 18px;
	cursor: pointer;
}

/* ---------- skenování dokumentů ---------- */

/* Vodicí rámeček A4 místo automatické detekce hran — člověk zamíří sám za sekundu
   a appka nemusí tahat osmimegabajtovou knihovnu na počítačové vidění. */
/*
 * Rámeček se MUSÍ vejít do viditelné plochy. Když přetekl (široké okno, notebook),
 * ořez pak dostal oblast větší než obraz, ořízl ji na výšku videa a vracel svislý pruh
 * místo stránky. Proto max-height — šířku dopočítá aspect-ratio.
 */
.scan-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -54%);
	/* Rozměr řídíme VÝŠKOU a šířku dopočítá aspect-ratio. `max-height` na šířkou
	   určený rámeček nefunguje — výšku ořízne, ale poměr stran se pak neuplatní
	   a z rámečku je široký pruh (a ořez pak vrací svislý výsek místo stránky). */
	height: min(74vh, calc(92vw / 0.7071));
	width: auto;
	aspect-ratio: 210 / 297;
	transition: height 0.15s, width 0.15s;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 4px;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.28);
	pointer-events: none;
	z-index: 1;
}

.scan-frame[hidden] { display: none; }

.scan-page-label {
	color: #fff;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 8px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.shutter-scan { border-color: #fff; }

/* Vstup „mám to už nafocené". Sedí vpravo od spouště, kde bylo dosud prázdno — je to
   druhořadá akce, tak nesmí přebít hlavní tlačítko, ale musí být na první pohled vidět. */
.gallery-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-self: center;
	gap: 2px;
	padding: 6px 10px;
	min-width: 76px;
	min-height: 56px;
	justify-content: center;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.gallery-btn:active { transform: scale(0.96); }
.gallery-btn:disabled { opacity: 0.5; }
.gallery-btn[hidden] { display: none; }
.gallery-icon { font-size: 20px; line-height: 1; }

/* ---------- natáčení videa ---------- */

/* Spoušť videa má uvnitř červený terč, který se za záznamu změní v čtverec — stejné gesto
   jako v systémové kameře, takže nikdo nepotřebuje vysvětlení, co které tlačítko dělá. */
.shutter-rec {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
}

.rec-dot {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #E5342B;
	transition: border-radius 0.15s ease, width 0.15s ease, height 0.15s ease;
}

.rec-dot.is-recording {
	width: 30px;
	height: 30px;
	border-radius: 6px;
}

/* Za záznamu tepe obrys, ne celé tlačítko — pulzující plocha pod prstem je nepříjemná. */
.shutter-rec.is-recording { border-color: #E5342B; animation: recPulse 1.6s ease-in-out infinite; }

@keyframes recPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(229, 52, 43, 0.55); }
	50% { box-shadow: 0 0 0 10px rgba(229, 52, 43, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.shutter-rec.is-recording { animation: none; }
}

.btn-plain {
	background: none;
	border: 0;
	color: #fff;
	font-size: 15px;
	padding: 10px 6px;
	cursor: pointer;
	white-space: nowrap;
}

.btn-plain-strong { font-weight: 700; text-align: right; }

/* místo `hidden` držíme prostor — jinak lišta při první stránce poskočí */
.btn-plain[hidden] { display: block; visibility: hidden; }

.thumb-page {
	width: 46px;
	height: 62px;
	border-radius: 6px;
	background: var(--surface-2);
	position: relative;
	flex: none;
	overflow: hidden;
}

.thumb-page img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb-page .page-no {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: rgba(0, 0, 0, 0.6);
	border-top-right-radius: 5px;
}

.strip-lg { min-height: 74px; margin-bottom: 6px; }

/* ---------- potvrzovací panel skenu ---------- */

.sheet {
	position: fixed;
	inset: 0;
	z-index: 20;
	background: var(--bg);
	box-shadow: var(--shadow-sheet);
	display: flex;
	flex-direction: column;
	padding-top: var(--safe-top);
}

.sheet[hidden] { display: none; }

.sheet-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
}

.sheet-title { font-size: 17px; font-weight: 600; margin: 0; flex: 1; text-align: center; padding-right: 44px; }

.icon-btn-plain { background: var(--surface-2); color: var(--text); font-size: 18px; }

.sheet-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; -webkit-overflow-scrolling: touch; }

.sheet-foot {
	padding: 12px 16px calc(14px + var(--safe-bottom));
	border-top: 1px solid var(--border);
}

.field-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-dim);
	margin: 18px 0 8px;
}

.field-note { font-size: 12px; color: var(--text-dim); margin: 8px 0 0; word-break: break-all; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
	min-height: 44px;
	padding: 0 14px;
	border-radius: 22px;
	border: 1.5px solid var(--border-strong);
	background: var(--surface);
	color: var(--text);
	font-size: 14px;
	cursor: pointer;
}

.chip-on {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	font-weight: 600;
}

.check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	font-size: 15px;
	cursor: pointer;
}

.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.check em { color: var(--text-dim); font-style: normal; font-size: 13px; }

/* dvě akce vedle sebe na kartě zakázky */
.card-actions-2 { grid-template-columns: 1fr 1fr; }

/* Tři akce vedle sebe se na úzkém telefonu vejdou jen s menším písmem — kartu je lepší
   nechat nízkou než mít tlačítka pod sebou a vidět na obrazovku o zakázku míň. */
.card-actions-3 { grid-template-columns: 1fr 1fr 1fr; }
.card-actions-3 .btn { padding: 0 8px; font-size: 15px; gap: 4px; }

.msg-ok { background: var(--ok-soft); color: var(--ok-ink); border-left: 3px solid var(--ok); }

/* ---------- varování o rozmazané stránce ---------- */

.blur-warn {
	position: fixed;
	inset: 0;
	z-index: 30;
	background: rgba(6, 9, 13, 0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	padding-bottom: calc(20px + var(--safe-bottom));
}

.blur-warn[hidden] { display: none; }

.blur-card {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 16px;
	max-width: 420px;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	text-align: center;
}

.blur-card img {
	width: 100%;
	max-height: 42vh;
	object-fit: contain;
	border-radius: 10px;
	background: #E7EBF0;
	margin-bottom: 14px;
}

.blur-title {
	font-size: 18px;
	font-weight: 600;
	color: #10151C;
	margin: 0 0 4px;
}

.blur-text {
	font-size: 14px;
	color: #5A6675;
	margin: 0 0 16px;
}

.blur-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- ruční úprava rohů ---------- */

.corners {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: #06090D;
	display: flex;
	flex-direction: column;
	padding-top: var(--safe-top);
}

.corners[hidden] { display: none; }

.corners-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
}

.corners-head .icon-btn { background: rgba(255, 255, 255, 0.16); color: #fff; }

.corners-title { color: #fff; font-size: 15px; font-weight: 600; flex: 1; text-align: center; padding-right: 44px; }

/* plocha s obrázkem — táhla se pozicují absolutně vůči ní */
.corners-stage {
	position: relative;
	flex: 1;
	min-height: 0;
	margin: 0 12px;
}

.corners-stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.corners-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.corners-lines polygon {
	fill: rgba(45, 127, 249, 0.14);
	stroke: #4A93FF;
	stroke-width: 2;
}

/* Táhlo je záměrně velké (44 px dotyková plocha), ale vizuálně malé kolečko —
   prst nesmí zakrývat roh, který zarovnává. */
.corner-handle {
	position: absolute;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: grab;
	touch-action: none;
}

.corner-handle::after {
	content: '';
	position: absolute;
	inset: 13px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #4A93FF;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.corner-handle:active::after { inset: 10px; }

.corners-foot {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 16px calc(14px + var(--safe-bottom));
}

.corners-foot .btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.3); }

.corners-reset { color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.corners-foot .btn-plain { min-height: 40px; }

/*
 * Sken na šířku. Kamera je 16:9 na šířku, takže A4 nastojato v ní zabírá sotva třetinu
 * plochy — a z toho pak není co ořezávat. Otočený dokument vyplní obraz zhruba dvakrát
 * líp; výsledek se při narovnání otočí zpátky na výšku, takže v PDF je to jedno.
 */
.scan-frame.landscape {
	height: auto;
	width: min(92vw, calc(74vh / 0.7071));
	aspect-ratio: 297 / 210;
}

.rotate-btn {
	position: absolute;
	right: 14px;
	top: calc(10px + var(--safe-top));
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 22px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* rozlišení kamery v hlavičce skeneru — ať je hned vidět, s čím se pracuje */
.caminfo {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.65);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	margin-right: 90px;
}

/* lupa při tažení rohu — ukazuje výřez z originálu, aby šla hrana papíru trefit přesně */
.corner-loupe {
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 5;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 6px 20px rgba(0, 0, 0, 0.5);
	background: #fff;
}

.corner-loupe[hidden] { display: none; }

/* upozornění, že odhad rohů selhal — bez něj by uživatel oříznul celou fotku i se stolem */
.corners-hint {
	margin: 0 16px 6px;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(245, 165, 36, 0.18);
	color: #F5A524;
	font-size: 13px;
	text-align: center;
}

.corners-hint[hidden] { display: none; }

.check-light { color: #fff; justify-content: center; margin: 0 0 4px; }
.check-light span { font-size: 14px; }

/* ============================================================================
   Detail zakázky (Freelo #31101382)

   Rozcestník, ne galerie. Všechno níž jsou NOVÉ třídy — hledáček ani výpis
   zakázek se nemění, aby se do otestovaných obrazovek nedostala regrese.
   ============================================================================ */

.detail-title { flex: 1; min-width: 0; }

.detail-title .screen-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.detail-order {
	margin: 1px 0 0;
	font-size: 13px;
	color: var(--text-dim);
	font-variant-numeric: tabular-nums;
}

/* prostor pro fixní patičku, ať poslední řádek nezůstane pod tlačítky */
.detail-body { padding-bottom: calc(96px + var(--safe-bottom)); }

.detail-foot {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: grid;
	gap: 10px;
	padding: 12px 16px calc(12px + var(--safe-bottom));
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: 0 -4px 12px rgba(16, 21, 28, 0.06);
}

.section-count {
	font-variant-numeric: tabular-nums;
	color: var(--text-dim);
	font-weight: 700;
}

/* počet čekajících ve frontě — jediné, co je na detailu opravdu naléhavé */
.section-count-wait { color: var(--work); }
.section-count-wait[hidden] { display: none; }

.empty-line {
	margin: 0 0 4px;
	padding: 12px 14px;
	border: 1px dashed var(--border);
	border-radius: 12px;
	color: var(--text-dim);
	font-size: 14px;
	text-align: center;
}

/* ---------- mřížka fotek ---------- */

.grid-photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 10px;
}

.thumb-photo {
	position: relative;
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	padding: 0;
	border: none;
	border-radius: 10px;
	overflow: hidden;
	background: var(--surface-2);
	cursor: pointer;
}

/* zbytek mřížky nad 12 dlaždic: skryté obrázky prohlížeč nestahuje */
.thumb-photo.is-hidden { display: none; }

/* „ještě to není na serveru" — odbarvení funguje i pro barvoslepé a na slunci */
.thumb-photo.is-wait img { filter: grayscale(0.7); }

.thumb-photo .state {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
}

/* ---------- řádky dokumentů a videí ---------- */

.rows {
	background: var(--surface);
	border: 1px solid #E4E8EE;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 10px;
	box-shadow: var(--shadow-card);
}

.row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 12px 14px;
	background: none;
	border: none;
	border-top: 1px solid #EEF1F5;
	text-align: left;
	font: inherit;
	color: var(--text);
	text-decoration: none;
	cursor: pointer;
}

.row:first-child { border-top: none; }
.row:active { background: var(--surface-2); }

.row-icon { font-size: 20px; flex: none; }

.row-text { flex: 1; min-width: 0; display: block; }

.row-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.row-meta {
	display: block;
	font-size: 13px;
	color: var(--text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.row-go { flex: none; color: var(--text-dim); font-size: 18px; }

/* ---------- fronta a chyby ---------- */

.queue-item {
	background: var(--surface);
	border: 1px solid #E4E8EE;
	border-left: 4px solid var(--wait);
	border-radius: 12px;
	padding: 11px 13px;
	margin-bottom: 8px;
}

.queue-item.is-up { border-left-color: var(--accent); }
.queue-item.is-retry { border-left-color: var(--work); background: var(--work-soft); }
.queue-item.is-err { border-left-color: var(--err); background: var(--err-soft); }

.queue-name { font-size: 15px; font-weight: 600; margin: 0; }

.queue-meta { font-size: 13px; color: var(--text-dim); margin: 2px 0 0; }

.queue-item.is-err .queue-meta { color: var(--err); }

.queue-progress {
	height: 4px;
	margin-top: 8px;
	border-radius: 2px;
	background: var(--surface-2);
	overflow: hidden;
}

.queue-progress span {
	display: block;
	height: 100%;
	background: var(--accent);
	transition: width .2s linear;
}

.queue-actions { display: flex; gap: 8px; margin-top: 9px; }

.queue-actions .btn { padding: 7px 12px; font-size: 13px; }

/* ---------- prohlížeče ---------- */

.viewer-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 48px;
	height: 64px;
	border: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }
.viewer-nav[hidden] { display: none; }

.viewer-info {
	color: #C7CED8;
	font-size: 13px;
	text-align: center;
	margin: 0;
	padding: 8px 16px 0;
	font-variant-numeric: tabular-nums;
}

.viewer-video { justify-content: center; }

.viewer-video video {
	width: 100%;
	max-height: 76vh;
	background: #000;
}

/* ---------- historie ---------- */

.history { margin-bottom: 10px; }

.history-row {
	margin: 0;
	padding: 8px 2px;
	border-top: 1px solid #EEF1F5;
	font-size: 13px;
	color: var(--text-dim);
	line-height: 1.45;
}

.history-row:first-child { border-top: none; }
.history-row.is-hidden { display: none; }

.history-when {
	display: inline-block;
	min-width: 82px;
	color: var(--text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Prohlížeče na detailu kryjí naplno. Sdílená `.viewer` má 94% černou, což v hledáčku
   nevadí (pod ní je černá kamera), ale na světlém detailu by prosvítal obsah stránky. */
#detail-viewer, #scan-viewer, #video-viewer { background: #06090D; }

/* ---------- vstup do detailu z karty zakázky ---------- */

.card-open {
	display: block;
	color: inherit;
	text-decoration: none;
	/* aktivní plocha sahá k okrajům karty, ať se trefí i palec v rukavici */
	margin: -14px -14px 0;
	padding: 14px 14px 0;
}

.card-open:active { background: var(--surface-2); }

.card-open .card-name { display: flex; align-items: baseline; gap: 8px; }

.card-go {
	margin-left: auto;
	color: var(--text-dim);
	font-size: 20px;
	line-height: 1;
	flex: none;
}

/* ---------- postup nahrávání (Freelo #31101382) ---------- */

/* Proužek má 6 px, ne 4 — na slunci se tenčí linka ztratí. Barva je vždy shodná s levým
   okrajem karty, aby stav šel přečíst i bez rozlišování odstínů. */
.queue-progress { height: 6px; }

.queue-item.is-up .queue-progress span { background: var(--accent); }
.queue-item.is-retry .queue-progress span { background: var(--work); }

/* Offline: proužek ztuhne na dosažené hodnotě a zešedne. Nehýbající se pixely nežerou
   baterku a zamrzlý proužek je sám o sobě sdělení „stojí to". */
.queue-item:not(.is-up):not(.is-retry):not(.is-finishing) .queue-progress span {
	background: var(--wait);
	transition: none;
}

/* Server skládá výsledek — všechno je odesláno, ale hotovo ještě není. Bez pulzu by
   ukazatel u velkého videa stál několik minut na plné hodnotě a vypadal zaseklý. */
.queue-item.is-finishing { border-left-color: var(--accent); }
.queue-item.is-finishing .queue-progress span {
	background: var(--accent);
	animation: queue-pulse 1.4s ease-in-out infinite;
}

@keyframes queue-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Postup i v liště — 3px na spodní hraně, jen když je co měřit. */
.bar.has-progress { position: relative; }

.bar.has-progress::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: var(--bar-progress, 0%);
	background: var(--accent);
	transition: width .2s linear;
}

/* Čerstvě dokreslená položka — oko jde za změnou barvy, text není potřeba. */
.row.is-new, .queue-item.is-new {
	box-shadow: inset 3px 0 0 var(--accent);
	background: var(--accent-soft);
	transition: background .4s ease, box-shadow .4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.queue-item.is-finishing .queue-progress span { animation: none; }
	.queue-progress span, .bar.has-progress::after { transition: none; }
}

/* ---------- obnovení obsahu ---------- */

/* Tlačítko ↻ v hlavičce. Rotace během načítání běží nejméně 400 ms (v JS), jinak by rychlý
   refresh vypadal, že tlačítko nefunguje. */
.icon-btn.is-busy { animation: refresh-spin .9s linear infinite; }

@keyframes refresh-spin { to { transform: rotate(360deg); } }

/* Zelená varianta lišty pro potvrzení ručního obnovení — appka jinde zelenou nemá. */
.bar.ok {
	background: var(--ok-soft);
	color: var(--ok-ink);
	border-left-color: var(--ok);
}

@media (prefers-reduced-motion: reduce) {
	.icon-btn.is-busy { animation: none; opacity: .55; }
}

/* karta v sekci „Odesílá se" na výpisu — vede na detail zakázky */
.card-uploading {
	display: block;
	color: inherit;
	text-decoration: none;
	border-left: 4px solid var(--accent);
}

.card-uploading:active { background: var(--surface-2); }
.card-uploading .card-meta { margin-bottom: 8px; }

/* stejné rozvržení jako u karet vykreslených serverem, aby šipka nesedla na název */
.card-uploading .card-name { display: flex; align-items: baseline; gap: 8px; }