/* /sprava — phone-first admin styling.
   Carried ~1:1 from the bazar-mock demo (_bakeoff/bazar-mock/sprava.html) and
   recoloured onto the MARKIS tokens (tokens.css). Everything is scoped under
   .mk-sprava so it never leaks into the theme header/footer that wrap this page.
   New vs. the demo: a full-bleed framed phone column under the site chrome, the
   per-photo upload states (uploading / error + retry), and the empty/load notes. */

.mk-sprava {
	--sage: var(--ink-500);
	background: var(--bg-page);
	padding: 0;
}
@media (min-width: 480px) {
	.mk-sprava { padding: 18px 0; }
}

/* The phone column. On a phone it fills the screen; on small tablets (480-899px)
   it stays a clean, capped, full-width column (no rounded device frame, no desk).
   The desktop two-pane layout is the @media (min-width: 900px) block far below. */
.mk-sprava .sprava-phone {
	max-width: 440px;
	margin: 0 auto;
	background: var(--bg-page);
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	min-height: 70vh;
}

.mk-sprava * { -webkit-tap-highlight-color: transparent; }
.mk-sprava img { display: block; max-width: 100%; }
.mk-sprava button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.mk-sprava input,
.mk-sprava textarea,
.mk-sprava select { font-family: var(--font-body); font-size: 16px; }

/* ---- top bar ---- */
.mk-sprava .topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 13px 16px; background: var(--bg-page);
	border-bottom: 1px solid var(--border-soft);
}
.mk-sprava .topbar .brand { display: flex; align-items: center; gap: 9px; }
.mk-sprava .topbar .brand .ic {
	width: 30px; height: 30px; border-radius: 8px; background: var(--ink-900);
	color: var(--bg-page); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mk-sprava .topbar .brand b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-strong); }
.mk-sprava .topbar .who { font-size: 11px; color: var(--text-muted); }

/* ---- tabs ---- */
.mk-sprava .tabs {
	display: flex; background: var(--bg-page);
	border-bottom: 1px solid var(--border-soft);
	position: sticky; top: 0; z-index: 5;
}
.mk-sprava .tabs button {
	flex: 1; padding: 13px 0; font-weight: 700; font-size: 14px; color: var(--text-muted);
	border-bottom: 2.5px solid transparent;
	display: flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--tap-min);
}
.mk-sprava .tabs button.on { color: var(--text-strong); border-bottom-color: var(--accent); }

/* ---- section switch (Nábytek / Textil) — sits above the view tabs ---- */
.mk-sprava .secswitch {
	display: flex; gap: 8px; padding: 12px 14px 4px; background: var(--bg-page);
}
.mk-sprava .secswitch button {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--tap-min); padding: 11px; border-radius: 11px;
	border: 1.5px solid var(--border-soft); background: var(--surface-card);
	font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-muted);
}
.mk-sprava .secswitch button svg { width: 16px; height: 16px; stroke: var(--text-muted); flex-shrink: 0; }
.mk-sprava .secswitch button:hover { border-color: var(--border-mid); }
.mk-sprava .secswitch button.on {
	background: var(--ink-900); color: #fff; border-color: var(--ink-900); box-shadow: var(--shadow-sm);
}
.mk-sprava .secswitch button.on svg { stroke: #fff; }

/* ---- views ---- */
.mk-sprava .view { flex: 1; padding: 16px; }
.mk-sprava .view.hide { display: none; }

.mk-sprava .vhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 13px; }
.mk-sprava .vhead h2 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text-strong); }
.mk-sprava .vhead span { font-size: 12.5px; color: var(--text-muted); }

.mk-sprava .loadnote { font-size: 13px; color: var(--text-muted); text-align: center; padding: 18px 0; }
.mk-sprava .loadnote.hide { display: none; }

/* ---- list actions: big add button + the Kategorie pill ---- */
.mk-sprava .list-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.mk-sprava .addbtn {
	flex: 1; background: var(--accent); color: var(--text-on-red);
	font-weight: 700; font-size: 15px; border-radius: 13px; padding: 14px;
	display: flex; align-items: center; justify-content: center; gap: 9px;
	box-shadow: var(--shadow-red); min-height: var(--tap-comfortable);
}
.mk-sprava .addbtn:hover { background: var(--accent-hover); }
.mk-sprava .addbtn:active { transform: translateY(1px); }
.mk-sprava .catbtn {
	flex-shrink: 0; background: var(--bg-page); color: var(--text-strong);
	border: 1.5px solid var(--border-soft); border-radius: 13px;
	padding: 14px 15px; font-weight: 700; font-size: 14px;
	display: flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--tap-comfortable);
}
.mk-sprava .catbtn svg { stroke: var(--text-muted); flex-shrink: 0; }
.mk-sprava .catbtn:hover { border-color: var(--border-mid); }
.mk-sprava .catbtn:active { transform: translateY(1px); }

/* ---- catalogue search + sold filter ---- */
.mk-sprava .mk-find {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;
}
.mk-sprava .mk-find[hidden] { display: none; }
.mk-sprava .mk-find__input {
	flex: 1; min-width: 0; height: var(--tap-min); font-size: 16px;
	border: 1.5px solid var(--border-soft); border-radius: var(--radius-md);
	background: var(--surface-card); color: var(--ink-900); padding: 0 12px;
}
.mk-sprava .mk-find__input:focus { outline: none; border-color: var(--accent); }
.mk-sprava .mk-find__clear {
	width: 44px; min-width: 44px; height: 44px; border: 1.5px solid var(--border-soft);
	border-radius: var(--radius-md); background: var(--surface-card); color: var(--ink-500);
	font-size: 25px; line-height: 1;
}
.mk-sprava .mk-find__toggle {
	flex-shrink: 0; min-height: var(--tap-min); padding: 10px 14px;
	border: 1.5px solid var(--border-soft); border-radius: var(--radius-md);
	background: var(--surface-card); color: var(--ink-900); font-weight: 700; font-size: 14px;
}
.mk-sprava .mk-find__toggle:hover { border-color: var(--border-mid); }
.mk-sprava .mk-find__toggle.on {
	background: var(--accent); border-color: var(--accent); color: var(--text-on-red);
}
.mk-sprava .mk-find__note {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px;
	padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
	background: var(--surface-card); color: var(--text-muted); font-size: 13px; line-height: 1.35;
}
.mk-sprava .mk-find__note[hidden] { display: none; }
.mk-sprava .mk-find__note button {
	min-height: var(--tap-min); margin-left: auto; padding: 8px 12px;
	border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
	background: var(--surface-card); color: var(--ink-900); font-weight: 700;
}
.mk-sprava .mk-find__note.mk-draghint {
	position: sticky; top: 48px; z-index: 4; border-color: var(--accent);
	color: var(--ink-900); font-weight: 700; box-shadow: var(--shadow-sm);
}
.mk-sprava .mk-find__empty p { margin-bottom: 12px; }
.mk-sprava .mk-find__empty button {
	width: 100%; min-height: var(--tap-min); padding: 10px 14px;
	border-radius: var(--radius-md); background: var(--accent); color: var(--text-on-red); font-weight: 700;
}
@media (max-width: 380px) {
	.mk-sprava .mk-find__toggle { flex-basis: 100%; }
}

/* ---- list rows ---- */
.mk-sprava #rows { position: relative; }
.mk-sprava .arow {
	background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 13px;
	padding: 10px; margin-bottom: 10px; display: flex; gap: 11px; align-items: center; box-shadow: var(--shadow-sm);
}
/* Shared touch-first reorder grip. The icon stays small while the button keeps the
   project's 44px minimum tap target. Pointer motion is owned by the grip only. */
.mk-sprava .grip {
	width: var(--tap-min); min-width: var(--tap-min); height: var(--tap-min); min-height: var(--tap-min);
	padding: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	border: 0; border-radius: 9px; background: transparent; color: var(--text-muted);
	cursor: grab; touch-action: none;
}
.mk-sprava .grip svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.mk-sprava .grip.is-dragging { cursor: grabbing; }
.mk-sprava .is-saving-order .grip { opacity: 0.45; cursor: progress; }
.mk-sprava .arow,
.mk-sprava .crow,
.mk-sprava .photos .ph { transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease; }
/* Categories and photo tiles just lift in place. */
.mk-sprava .crow.is-dragging,
.mk-sprava .photos .ph.is-dragging {
	z-index: 3; transform: translateY(-2px); opacity: 0.88;
	box-shadow: 0 8px 20px rgba(56, 40, 24, 0.16);
}
/* An item row instead follows the finger, so JS owns its transform and shadow.
   `position` is what makes z-index apply at all; the transition would lag the
   finger; and without pointer-events:none the row under the finger hit-tests as
   itself and the reordering stops dead. */
.mk-sprava .arow.is-dragging {
	position: relative; z-index: 3; transition: none; pointer-events: none;
	transform-origin: top center;
}
.mk-sprava .is-reordering { user-select: none; }
.mk-sprava #rows.is-reordering .arow:not(.is-dragging) { opacity: 0.45; }
.mk-sprava .mk-droptarget {
	position: absolute; left: 0; right: 0; height: 4px; z-index: 4;
	background: var(--accent); border-radius: 999px; pointer-events: none; transform: translateY(-2px);
}
@keyframes mk-row-dropped {
	0%, 45% { background-color: color-mix(in srgb, var(--accent) 16%, var(--surface-card)); }
	100% { background-color: var(--surface-card); }
}
.mk-sprava .arow.just-dropped { animation: mk-row-dropped 700ms ease-out; }
.mk-sprava .arow .th { width: 56px; height: 56px; border-radius: 9px; overflow: hidden; flex-shrink: 0; background: var(--bg-panel); }
.mk-sprava .arow .th img { width: 100%; height: 100%; object-fit: cover; }
.mk-sprava .arow.sold .th img,
.mk-sprava .arow.hidden .th img { opacity: 0.5; }
.mk-sprava .arow .meta { flex: 1; min-width: 0; }
.mk-sprava .arow .meta b { display: block; font-size: 14px; line-height: 1.25; color: var(--text-strong); overflow-wrap: anywhere; }
.mk-sprava .arow .meta .pr { font-weight: 700; color: var(--accent-hover); font-size: 14px; margin-top: 1px; }
.mk-sprava .arow .meta .st { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 3px; display: inline-block; }
.mk-sprava .arow .meta .pc { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-top: 3px; margin-left: 9px; }
.mk-sprava .arow .meta .pc svg { width: 12px; height: 12px; stroke: var(--text-muted); stroke-width: 2; fill: none; }
.mk-sprava .arow.sold .meta b { opacity: 0.6; }
.mk-sprava .st.s-live { color: var(--status-instock-text); }
.mk-sprava .st.s-sold { color: var(--sold); }
.mk-sprava .st.s-hidden { color: var(--text-muted); }
/* Row action buttons — shared by the offer rows (.arow) and the category rows
   (.crow); .on / .on svg are offer-only (sold/hidden toggles). */
.mk-sprava .arow .acts,
.mk-sprava .crow .acts { display: flex; gap: 4px; flex-shrink: 0; }
.mk-sprava .arow .acts button,
.mk-sprava .crow .acts button {
	width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-soft); background: var(--bg-page);
}
.mk-sprava .arow .acts button svg,
.mk-sprava .crow .acts button svg { width: 16px; height: 16px; stroke: var(--text-muted); stroke-width: 2; fill: none; }
.mk-sprava .arow .acts button.on { background: var(--accent); border-color: var(--accent); }
.mk-sprava .arow .acts button.on svg { stroke: var(--text-on-red); }
.mk-sprava .arow .acts button.del svg,
.mk-sprava .crow .acts button.del svg { stroke: var(--sold); }
.mk-sprava .arow .acts button:disabled,
.mk-sprava .crow .acts button:disabled { opacity: 0.5; cursor: progress; }

@media (max-width: 599px) {
	.mk-sprava .arow { flex-wrap: wrap; }
	.mk-sprava .arow .acts { flex-basis: 100%; justify-content: flex-end; }
}

/* ---- form ---- */
.mk-sprava .form { display: none; }
.mk-sprava .form.show { display: block; }
.mk-sprava .list.hide { display: none; }
.mk-sprava .fhead { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mk-sprava .fhead button {
	width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-soft);
	display: flex; align-items: center; justify-content: center; color: var(--text-strong);
}
.mk-sprava .fhead h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-strong); }
.mk-sprava .field { margin-bottom: 14px; }
.mk-sprava .field label,
.mk-sprava .field .field-label {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--text-muted); margin-bottom: 6px;
}
.mk-sprava .field input,
.mk-sprava .field textarea,
.mk-sprava .field select {
	width: 100%; border: 1.5px solid var(--border-soft); border-radius: 11px; padding: 12px 13px;
	background: var(--white); color: var(--text-strong);
}
.mk-sprava .field input:focus,
.mk-sprava .field textarea:focus,
.mk-sprava .field select:focus { outline: none; border-color: var(--accent); }
.mk-sprava .field textarea { resize: vertical; min-height: 72px; }

.mk-sprava .fhelp { font-size: 11.5px; color: var(--text-muted); margin: -2px 0 8px; line-height: 1.4; }

/* ---- photo grid ---- */
.mk-sprava .photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-sprava .photos .ph { aspect-ratio: 1; border-radius: 11px; overflow: hidden; position: relative; border: 1px solid var(--border-soft); background: var(--bg-panel); }
.mk-sprava .photos .ph img { width: 100%; height: 100%; object-fit: cover; }
.mk-sprava .photos .ph > .grip {
	position: absolute; z-index: 2; top: 4px; left: 4px;
	background: rgba(255, 255, 255, 0.86);
}
.mk-sprava .photos .ph .x {
	position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%;
	background: rgba(26, 26, 26, 0.82); color: #fff; font-size: 18px;
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
.mk-sprava .photos .ph .main-badge {
	position: absolute; left: 4px; bottom: 4px; background: var(--ink-900); color: var(--bg-page);
	font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; border-radius: 6px; padding: 3px 7px;
}
/* shared "add photo" tile (item grid + hero photo): identical chrome, per-context layout */
.mk-sprava .addph {
	position: relative; border: 1.5px dashed var(--border-mid); border-radius: 11px;
	display: flex; align-items: center; justify-content: center;
	color: var(--accent); font-weight: 700; background: var(--white);
}
.mk-sprava .addph svg { stroke: var(--accent); stroke-width: 1.7; fill: none; flex: none; }
.mk-sprava .addph input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mk-sprava .addph:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.mk-sprava .photos .addph {
	aspect-ratio: 1; flex-direction: column; gap: 5px;
	font-size: 11px; text-align: center; padding: 4px; line-height: 1.15; word-break: keep-all;
}
.mk-sprava .photos .addph svg { width: 22px; height: 22px; }

/* per-photo upload state (NEW: status overlay + error/retry) */
.mk-sprava .photos .ph .ph-state {
	position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
	gap: 7px; text-align: center; padding: 6px; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.3;
}
.mk-sprava .photos .ph.is-uploading img { opacity: 0.4; }
.mk-sprava .photos .ph.is-uploading .ph-state { display: flex; background: rgba(26, 26, 26, 0.5); }
.mk-sprava .photos .ph.is-error img { opacity: 0.4; }
.mk-sprava .photos .ph.is-error .ph-state { display: flex; background: rgba(168, 0, 0, 0.72); }
.mk-sprava .photos .ph .ph-state .retry {
	background: #fff; color: var(--red-600); border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 700;
}
.mk-sprava .photos .ph .spin {
	width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff; animation: mk-spin 0.8s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.mk-sprava .photos .ph .spin { animation: none; }
	.mk-sprava .arow.just-dropped { animation: none; }
}

/* ---- save ---- */
.mk-sprava .savebtn {
	width: 100%; background: var(--accent); color: var(--text-on-red);
	font-weight: 700; font-size: 15px; border-radius: 13px; padding: 14px; margin-top: 6px;
	box-shadow: var(--shadow-red); min-height: var(--tap-comfortable);
}
.mk-sprava .savebtn:hover { background: var(--accent-hover); }
.mk-sprava .savebtn:active { transform: translateY(1px); }
.mk-sprava .savebtn:disabled { opacity: 0.6; cursor: progress; }

/* ---- category mini-view ---- */
.mk-sprava .crow {
	background: var(--surface-card); border: 1px solid var(--border-soft); border-radius: 13px;
	padding: 8px 10px; margin-bottom: 10px; display: flex; gap: 9px; align-items: center; box-shadow: var(--shadow-sm);
}
.mk-sprava .crow .crow-name {
	flex: 1; min-width: 0; border: 1.5px solid transparent; border-radius: 9px; padding: 9px 10px;
	background: var(--white); color: var(--text-strong); font-size: 15px;
}
.mk-sprava .crow .crow-name:focus { outline: none; border-color: var(--accent); }
.mk-sprava .crow .crow-count {
	flex-shrink: 0; min-width: 26px; text-align: center; font-size: 12px; font-weight: 700;
	color: var(--text-muted); background: var(--surface-sunk); border-radius: var(--radius-pill); padding: 4px 9px;
}
/* .crow .acts buttons share the .arow .acts rules above. */

.mk-sprava .catadd { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.mk-sprava .catadd-row { display: flex; gap: 8px; align-items: stretch; }
.mk-sprava .catadd-row input {
	flex: 1; min-width: 0; border: 1.5px solid var(--border-soft); border-radius: 11px; padding: 12px 13px;
	background: var(--white); color: var(--text-strong); font-size: 16px;
}
.mk-sprava .catadd-row input:focus { outline: none; border-color: var(--accent); }
.mk-sprava .catadd-btn {
	flex-shrink: 0; width: var(--tap-comfortable); border-radius: 11px; background: var(--accent); color: var(--text-on-red);
	display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-red);
}
.mk-sprava .catadd-btn svg { stroke: var(--text-on-red); }
.mk-sprava .catadd-btn:hover { background: var(--accent-hover); }
.mk-sprava .catadd-btn:active { transform: translateY(1px); }
.mk-sprava .catadd-btn:disabled { opacity: 0.6; cursor: progress; }

/* ---- branded auth card (login / forgot password / reset / no-permission) ---- */
.mk-sprava--auth .sprava-phone { min-height: auto; }
.mk-sprava .sprava-auth { padding: 28px 20px 32px; }
.mk-sprava .sprava-auth__title {
	font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--text-strong); margin: 0 0 8px;
}
.mk-sprava .sprava-auth__lead { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 0 0 18px; }
.mk-sprava .sprava-auth__form { display: flex; flex-direction: column; }
.mk-sprava .sprava-auth__label {
	font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--text-muted); margin-bottom: 6px;
}
.mk-sprava .sprava-auth__input {
	width: 100%; border: 1.5px solid var(--border-soft); border-radius: 11px; padding: 13px;
	background: var(--white); color: var(--text-strong); font-size: 16px; margin-bottom: 16px;
}
.mk-sprava .sprava-auth__input:focus { outline: none; border-color: var(--accent); }
.mk-sprava .sprava-auth__btn {
	display: flex; align-items: center; justify-content: center; text-align: center;
	width: 100%; background: var(--accent); color: var(--text-on-red);
	font-weight: 700; font-size: 15px; border-radius: 13px; padding: 14px;
	box-shadow: var(--shadow-red); min-height: var(--tap-comfortable); margin-top: 2px;
}
.mk-sprava .sprava-auth__btn:hover { background: var(--accent-hover); }
.mk-sprava .sprava-auth__btn:active { transform: translateY(1px); }
.mk-sprava .sprava-auth__btn--ghost {
	background: var(--bg-page); color: var(--text-strong); border: 1.5px solid var(--border-soft); box-shadow: none;
}
.mk-sprava .sprava-auth__btn--ghost:hover { background: var(--surface-sunk); }
.mk-sprava .sprava-auth__link {
	display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--accent);
}
.mk-sprava .sprava-auth__link:hover { color: var(--accent-hover); text-decoration: underline; }
.mk-sprava .sprava-auth__err {
	font-size: 13.5px; font-weight: 600; color: var(--red-600);
	background: var(--red-50); border: 1px solid var(--red-100); border-radius: 10px; padding: 11px 13px; margin: 0 0 16px;
}
.mk-sprava .sprava-auth__ok {
	display: block; /* <output> defaults to inline; keep the block padding box */
	font-size: 13.5px; font-weight: 600; color: var(--status-instock-text);
	background: var(--status-instock-bg); border-radius: 10px; padding: 11px 13px; margin: 0 0 16px;
}

/* ---- web preview header ---- */
.mk-sprava .pweb-head { text-align: center; margin-bottom: 14px; }
.mk-sprava .pweb-head .k { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-hover); }
.mk-sprava .pweb-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-top: 3px; color: var(--text-strong); }
.mk-sprava .pweb-head span { font-size: 12px; color: var(--text-muted); }

/* Two-column grid so the public cards read inside the narrow phone width.
   Scoped to < 900px: at >= 900px the preview hands the grid back to webview's
   own responsive repeat(4/3/2) layout (the desktop customer's real view). */
@media (max-width: 899px) {
	.mk-sprava #view-web .grid-items { grid-template-columns: 1fr 1fr; gap: 11px; }
}

/* ---- desktop-only right-pane placeholder ----
   A calm "nothing open yet" note shown in the form column on desktop when neither
   the add/edit form nor the category manager is open. Hidden by default (mobile
   has no second pane); the >= 900px block below reveals it. Decorative + inert. */
.mk-sprava .form-placeholder { display: none; }
.mk-sprava .form-placeholder .fp-icon { color: var(--text-faint); margin-bottom: 14px; }
.mk-sprava .form-placeholder .fp-icon svg { width: 40px; height: 40px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.mk-sprava .form-placeholder h2 {
	font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-strong); margin-bottom: 6px;
}
.mk-sprava .form-placeholder p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); max-width: 30ch; }

/* ---- toast ---- */
.sprava-toast {
	position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
	background: var(--ink-900); color: #fff; font-weight: 700; font-size: 13.5px;
	padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lg);
	opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
	z-index: 60; display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 32px);
}
.sprava-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sprava-toast svg { width: 17px; height: 17px; stroke: var(--brand-yellow); stroke-width: 2.5; fill: none; flex-shrink: 0; }
.sprava-toast.is-err { background: var(--red-600); }
.sprava-toast.is-err svg { stroke: #fff; }
@media (prefers-reduced-motion: reduce) {
	.sprava-toast { transition: opacity 0.25s; }
}

/* =====================================================================
   DESKTOP (>= 900px) — real two-pane list-detail layout.
   The phone-on-a-desk framing is dropped here: no greige desk, no 440px
   page cap, no device border-radius / shadow card, no 70vh mock sizing.
   Mobile (< 900px) is entirely unaffected — the single phone column and
   the stacked showPanel() view-router stay exactly as they are.
   ===================================================================== */
@media (min-width: 900px) {
	/* background stays var(--bg-page) from the base rule; only the padding grows. */
	.mk-sprava { padding: 24px 0; }

	/* Page-centre the whole app (this is content-column centring, NOT a phone
	   mock: the 440px cap + rounded + shadow + greige desk that made it read
	   as a device are all removed). */
	.mk-sprava .sprava-phone {
		max-width: 1100px;
		margin: 0 auto;
		background: var(--bg-page);
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
		min-height: auto;
	}

	/* The Správa tab body becomes the two-pane grid: list (left) | form (right).
	   :not(.hide) keeps the ID specificity from beating `.view.hide{display:none}`
	   when the Web (náhled) tab hides this pane — without it the grid would force
	   #view-sprava to stay visible under the Web tab.
	   IMPORTANT: this layout relies on the inactive right-pane panes being
	   display:none (#addForm/#catForm default to display:none via .form, and
	   .form-placeholder is display:none unless shown below). CSS Grid skips
	   display:none items, so only ONE of {#addForm, #catForm, .form-placeholder}
	   ever occupies column 2 at a time. The grid-column pins below make the
	   placement robust regardless of which right-pane element is visible. */
	.mk-sprava #view-sprava:not(.hide) {
		display: grid;
		grid-template-columns: minmax(380px, 440px) 1fr;
		gap: 28px;
		align-items: start;
		padding: 24px 28px;
	}

	/* Pin the columns explicitly (MUST-FIX-2): list is always col 1; the form,
	   category manager and placeholder are always col 2. */
	.mk-sprava #adminList { grid-column: 1; max-width: 440px; }
	.mk-sprava #addForm,
	.mk-sprava #catForm,
	.mk-sprava .form-placeholder { grid-column: 2; }

	/* The mobile router sets .list.hide on #adminList when a form opens. On desktop
	   the list must STAY visible next to the form, so un-hide it. The form/cat
	   panels keep their .show toggle (which decides what fills column 2); the list
	   pane simply never disappears. No JS / router state changes. */
	.mk-sprava #adminList.hide { display: block; }

	/* Form pane: a sticky card so it stays in view while the list scrolls. */
	.mk-sprava #addForm,
	.mk-sprava #catForm {
		position: sticky; top: 24px;
		background: var(--surface-card);
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
		padding: 22px 24px;
	}

	/* Roomier form pane: 4-column photo grid (bigger drop target on a PC). */
	.mk-sprava .photos { grid-template-columns: repeat(4, 1fr); }

	/* No "back to list" on desktop — the list never left. Hide the form
	   back-arrows; the form heading stays as the labelled anchor. */
	.mk-sprava #addForm .fhead button,
	.mk-sprava #catForm .fhead button { display: none; }

	/* Calm placeholder in the right pane when neither form is open. The
	   adjacent-sibling rules hide it the moment a form/cat pane is shown. */
	.mk-sprava .form-placeholder {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		text-align: center; min-height: 320px; padding: 40px 28px;
		background: var(--surface-card);
		border: 1px dashed var(--border-mid);
		border-radius: var(--radius-lg);
	}
	.mk-sprava #addForm.show ~ .form-placeholder,
	.mk-sprava #catForm.show ~ .form-placeholder { display: none; }
}

/* ---- Obsah webu (site content: hero + contact facts + intro) ---- */
.mk-sprava .obsah { max-width: 560px; margin: 0 auto; padding-bottom: 8px; }
.mk-sprava .obsah-note {
	display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45;
	color: var(--text-muted); background: var(--surface-sunk); border: 1px solid var(--border-soft);
	border-radius: 11px; padding: 10px 12px; margin-bottom: 16px;
}
.mk-sprava .obsah-note svg { flex: none; margin-top: 1px; color: var(--accent); }
.mk-sprava .obsah-group {
	font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--text-strong); margin: 20px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft);
}
.mk-sprava .obsah-group:first-of-type { margin-top: 4px; }
.mk-sprava .obsah-adv { margin: 2px 0 14px; }
.mk-sprava .obsah-adv summary {
	cursor: pointer; font-size: 12px; font-weight: 700; color: var(--accent);
	list-style: none; padding: 6px 0; user-select: none;
}
.mk-sprava .obsah-adv summary::-webkit-details-marker { display: none; }
.mk-sprava .obsah-adv[open] summary { margin-bottom: 6px; }

/* hero photo — one image; preview + a single replace tile (reuses downscale/upload). */
.mk-sprava .hero-photo { display: flex; flex-direction: column; gap: 10px; }
.mk-sprava .hero-photo__cur { border-radius: 11px; overflow: hidden; border: 1px solid var(--border-soft); background: var(--bg-panel); }
.mk-sprava .hero-photo__cur img { display: block; width: 100%; max-height: 200px; object-fit: cover; }
.mk-sprava .hero-photo .addph { gap: 8px; min-height: 52px; font-size: 13px; padding: 10px; }
.mk-sprava .hero-photo .addph svg { width: 20px; height: 20px; }
.mk-sprava .hero-photo.is-uploading { opacity: 0.55; pointer-events: none; }
.mk-sprava .obsah-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); text-align: center; }
.mk-sprava .obsah-foot a { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.mk-sprava .obsah-foot a:hover { color: var(--accent-hover); text-decoration: underline; }
.mk-sprava .obsah-foot svg { flex: none; }