@font-face { font-family: 'Lib Sans'; src: url(fonts/LiberationSans-Regular.ttf) format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Lib Sans'; src: url(fonts/LiberationSans-Bold.ttf) format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Lib Sans'; src: url(fonts/LiberationSans-Italic.ttf) format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Lib Sans'; src: url(fonts/LiberationSans-BoldItalic.ttf) format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Lib Serif'; src: url(fonts/LiberationSerif-Regular.ttf) format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Lib Serif'; src: url(fonts/LiberationSerif-Bold.ttf) format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Lib Serif'; src: url(fonts/LiberationSerif-Italic.ttf) format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Lib Serif'; src: url(fonts/LiberationSerif-BoldItalic.ttf) format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Lib Mono'; src: url(fonts/LiberationMono-Regular.ttf) format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Lib Mono'; src: url(fonts/LiberationMono-Bold.ttf) format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Lib Mono'; src: url(fonts/LiberationMono-Italic.ttf) format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Lib Mono'; src: url(fonts/LiberationMono-BoldItalic.ttf) format('truetype'); font-weight: 700; font-style: italic; }

:root {
  --cervena: #E31D1A; --cervena-tm: #b91512; --sede: #6b7a89; --linka: #d9dee4; --pozadi: #e9ecf0;
  --karta: #fff; --text: #1e293b; --radius: 8px; --modra: #2563eb;
  --top-h: 52px; --tools-h: 46px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: var(--text); background: var(--pozadi); display: flex; flex-direction: column; overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; }

/* ── Horní lišta ── */
.top { height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--karta); border-bottom: 1px solid var(--linka); flex: none; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
/* přepínač modulů – zobrazí se, když editor běží jako součást ISDOC (/isdoc/editor/); vzhled shodný s ISDOC */
.moduly { display: inline-flex; border: 1px solid var(--linka); border-radius: .5rem; overflow: hidden; }
.modul { padding: .4rem .95rem; text-decoration: none; color: var(--text); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.modul + .modul { border-left: 1px solid var(--linka); }
.modul:hover:not(.aktivni) { background: #f3f4f6; }
.modul.aktivni { background: var(--cervena); color: #fff; }
body.v-isdoc .top { border-bottom: 3px solid var(--cervena); }
body.v-isdoc .brand { display: none; }
.brand-badge { background: var(--cervena); color: #fff; border-radius: 6px; padding: 3px 7px; font-size: 12px; letter-spacing: .5px; }
.brand-name { font-size: 15px; }
.file-info { display: flex; align-items: center; gap: 6px; color: var(--sede); min-width: 0; }
.file-name { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dirty { color: var(--cervena); font-size: 12px; }
.spacer { flex: 1; }
.group { display: flex; align-items: center; gap: 6px; }
.sep { width: 1px; height: 24px; background: var(--linka); margin: 0 4px; }
.btn { white-space: nowrap; border: 1px solid var(--linka); background: #fff; color: var(--text); border-radius: 6px; padding: 6px 10px; cursor: pointer; line-height: 1.2; min-width: 32px; }
.btn:hover:not(:disabled) { background: #f3f4f6; border-color: #c5ccd4; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sm { padding: 4px 7px; min-width: 28px; }
.btn-primary { background: var(--cervena); border-color: var(--cervena); color: #fff; font-weight: 600; }
.btn-primary:hover:not(:disabled) { background: var(--cervena-tm) !important; border-color: var(--cervena-tm); }
.btn-danger { color: var(--cervena); }
.btn-zoom { min-width: 64px; font-variant-numeric: tabular-nums; }
.page-nav { display: flex; align-items: center; gap: 5px; color: var(--sede); }
.page-nav input { width: 56px; padding: 5px 6px; border: 1px solid var(--linka); border-radius: 6px; font: inherit; text-align: center; }
.menu-wrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--linka); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 300px; padding: 6px; z-index: 50; display: flex; flex-direction: column; }
.menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.menu-item:hover { background: #f3f4f6; }
.menu-sep { height: 1px; background: var(--linka); margin: 4px 0; }
.menu-check { cursor: pointer; }

/* ── Nástroje ── */
.tools { height: var(--tools-h); display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #f8fafc; border-bottom: 1px solid var(--linka); flex: none; overflow: hidden; }
.tool-group { display: flex; align-items: center; gap: 4px; }
.tool { border: 1px solid transparent; background: none; border-radius: 6px; padding: 5px 9px; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--text); white-space: nowrap; }
.tool:hover { background: #eef2f6; }
.tool.active { background: #fff; border-color: var(--cervena); color: var(--cervena); font-weight: 600; }
.tool .ico { font-size: 14px; width: 16px; text-align: center; }
.tool .ico.hl { color: #d9b800; }
.props { border-left: 1px solid var(--linka); padding-left: 12px; gap: 12px; }
.prop { display: flex; align-items: center; gap: 5px; color: var(--sede); white-space: nowrap; }
.prop input[type=number] { width: 58px; padding: 4px 6px; border: 1px solid var(--linka); border-radius: 6px; font: inherit; }
.prop input[type=color] { width: 32px; height: 26px; padding: 0 2px; border: 1px solid var(--linka); border-radius: 6px; background: #fff; cursor: pointer; }
.prop input[type=range] { width: 90px; }
.hint { margin-left: auto; color: var(--sede); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 60px; text-align: right; }

/* ── Hlavní plocha ── */
.main { flex: 1; display: flex; min-height: 0; }
.sidebar { width: 170px; flex: none; background: #f1f3f6; border-right: 1px solid var(--linka); display: flex; flex-direction: column; }
.side-tools { display: flex; gap: 4px; padding: 8px; justify-content: center; border-bottom: 1px solid var(--linka); flex-wrap: wrap; }
.side-hint { font-size: 10.5px; color: var(--sede); padding: 6px 10px; line-height: 1.3; border-bottom: 1px solid var(--linka); }
.thumbs { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 10px; }
.thumb { position: relative; cursor: pointer; border-radius: 6px; padding: 6px 6px 2px; border: 2px solid transparent; text-align: center; user-select: none; }
.thumb:hover { background: #e6e9ee; }
.thumb.selected { border-color: var(--cervena); background: #fdecec; }
.thumb.current .thumb-num { color: var(--cervena); font-weight: 700; }
.thumb canvas { width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.25); background: #fff; display: block; }
.thumb-num { font-size: 11px; color: var(--sede); margin-top: 4px; }
.thumb.drop-before::before, .thumb.drop-after::after { content: ''; position: absolute; left: 6px; right: 6px; height: 3px; background: var(--modra); border-radius: 2px; }
.thumb.drop-before::before { top: -7px; }
.thumb.drop-after::after { bottom: -7px; }
.thumb.dragging { opacity: .4; }

.viewer { flex: 1; overflow: auto; padding: 20px 0 60px; position: relative; outline: none; }
.page { position: relative; margin: 0 auto 16px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.2); overflow: hidden;
  --user-unit: 1; --total-scale-factor: calc(var(--scale-factor) * var(--user-unit)); --scale-round-x: 1px; --scale-round-y: 1px; }
.page canvas.pg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.page .textLayer, .page .annotationLayer { position: absolute; left: 0; top: 0; }
.page .ovl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.page .ovl.draw { pointer-events: all; cursor: crosshair; }
.page .ovl.select { pointer-events: none; }
.page .ovl.select .ov { pointer-events: all; cursor: move; }
.page.drawing .textLayer, .page.drawing .annotationLayer { pointer-events: none; }
.page.replace .ovl.draw { cursor: text; }
.page.replace .textLayer { user-select: none; }
.prop select { padding: 4px 6px; border: 1px solid var(--linka); border-radius: 6px; font: inherit; background: #fff; }
.ov.selected .box { stroke: var(--modra); stroke-width: 1px; stroke-dasharray: 4 3; fill: none; vector-effect: non-scaling-stroke; }
.ov .box { fill: transparent; stroke: none; }
.ov .handle { fill: #fff; stroke: var(--modra); stroke-width: 1.5px; cursor: nwse-resize; vector-effect: non-scaling-stroke; }
.ov text { white-space: pre; }
.ov image { pointer-events: all; }
.text-editor { position: absolute; z-index: 20; line-height: 1.2; border: 1px dashed var(--modra); background: rgba(255,255,255,.75); padding: 0; margin: 0; resize: none; overflow: hidden; outline: none; white-space: pre; transform-origin: 0 0; }
.page.blank { background: #fff; }
.page-num-badge { position: absolute; left: 50%; transform: translateX(-50%); bottom: -14px; font-size: 11px; color: var(--sede); }

/* ── Prázdný stav (úvodní stránka s návodem) ── */
.empty { flex: 1; overflow-y: auto; padding: 1.5rem 1rem 3rem; }
.empty-in { max-width: 760px; margin: 0 auto; }
.drop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drop.ocr { grid-column: 1 / -1; }
@media (max-width: 700px) { .drop-grid { grid-template-columns: 1fr; } .drop.ocr { grid-column: auto; } }
.drop.ocr { border-color: #86efac; background: #f4fdf7; }
.drop.ocr.over, body.dragover .drop.ocr { border-color: #15803d; background: #e6f9ec; }
.ocr-lang { font-size: 13px; color: var(--sede); margin-top: 2px; }
.ocr-lang select { font: inherit; padding: 3px 6px; border: 1px solid var(--linka); border-radius: 6px; background: #fff; }
.drop { background: var(--karta); border: 2px dashed #c5ccd4; border-radius: 14px; padding: 22px 20px 18px; text-align: center; transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; }
.drop.server { border-color: #93c5fd; background: #f7fbff; }
.drop.server.over, body.dragover .drop.server { border-color: var(--modra); background: #eaf3ff; }
.mode-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #e8f0fe; color: #1d4ed8; white-space: nowrap; }
.mode-badge.local { background: #ecfdf5; color: #047857; }
.drop.over, body.dragover .drop { border-color: var(--cervena); background: #fff5f5; }
.drop-ico { font-size: 44px; }
.drop h1 { margin: 4px 0 8px; font-size: 19px; }
.drop p { color: var(--sede); margin: 8px 0; }
.link { border: 0; background: none; color: var(--cervena); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.note { font-size: 12.5px; line-height: 1.45; max-width: 560px; margin: 8px auto 0 !important; }
.karta { background: #fff; border: 1px solid var(--linka); border-radius: 10px; padding: 18px 22px; }
.odstup { margin-top: 16px; }
.karta h2 { font-size: 16px; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--linka); }
.omezeni h2 { border-color: var(--cervena); }
.body-list { margin: 10px 0 0 18px; padding: 0; line-height: 1.5; }
.body-list li { margin-bottom: 7px; }
.body-list ul { margin: 6px 0 6px 16px; padding: 0; }
.body-list ul li { margin-bottom: 4px; }
.body-list code { background: var(--pozadi); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.foot { text-align: center; color: var(--sede); padding: 18px 0 0; font-size: 12px; }

/* ── Pomocné ── */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; box-shadow: 0 6px 20px rgba(0,0,0,.3); max-width: 90vw; }
.toast.err { background: var(--cervena); }
.overlay-busy { position: fixed; inset: 0; background: rgba(255,255,255,.6); z-index: 90; display: flex; align-items: center; justify-content: center; }
.busy-box { background: #fff; border: 1px solid var(--linka); border-radius: 10px; padding: 20px 28px; display: flex; align-items: center; gap: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.15); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--linka); border-top-color: var(--cervena); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .sidebar { width: 120px; }
  .side-hint { display: none; }
  .file-name { max-width: 18vw; }
  .hint { display: none; }
}
@media (max-width: 640px) {
  .sidebar { display: none; }
  .brand-name { display: none; }
  .page-nav { display: none; }
}