:root{
  --brand:#0a7ec2;--brand-dk:#075c8e;--ink:#12181f;--muted:#5b6572;
  --line:#e3e7ec;--tint:#eef6fb;--bg:#f6f8fa;--ok:#0d7d55;--warn:#b45309;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,'Segoe UI',system-ui,sans-serif;color:var(--ink);background:#eef1f4}

label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin:10px 0 3px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;
  font:14px/1.3 inherit;color:var(--ink);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
textarea{resize:vertical;min-height:52px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;
  border-radius:7px;border:1px solid var(--line);background:#fff;font:600 13px/1 inherit;
  color:var(--ink);cursor:pointer}
.btn:hover{background:var(--bg)}
.btn:disabled{opacity:.55;cursor:default}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover:not(:disabled){background:var(--brand-dk)}
.btn.sm{padding:6px 10px;font-size:12px}
.btn.dgr{color:#b91c1c;border-color:#f3d0d0}

/* ---------------- rozloženie aplikácie ---------------- */
.app{display:grid;grid-template-columns:430px 1fr;min-height:100vh}
.side{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.sidehd{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;gap:10px}
.sidehd h1{font-size:14px;font-weight:800;letter-spacing:-.02em}
.sidehd h1 span{color:var(--brand)}
.sidehd .who{font-size:10.5px;color:var(--muted);text-align:right;line-height:1.35}
.sidehd .who b{display:block;color:var(--ink);font-size:11.5px}
.tabs{display:flex;border-bottom:1px solid var(--line);background:var(--bg)}
.tabs button{flex:1;padding:10px 4px;border:0;background:none;font:600 12px/1 inherit;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand);background:#fff}
.tabs button[hidden]{display:none}
.panes{flex:1;overflow-y:auto;padding:16px 20px 40px}
.pane{display:none}.pane.on{display:block}

fieldset{border:1px solid var(--line);border-radius:8px;padding:12px 14px 14px;margin-bottom:14px}
legend{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);padding:0 6px}
fieldset label:first-of-type{margin-top:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.chk{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:12px;color:var(--ink)}
.chk input{width:auto;margin-top:2px}
.hint{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.itemrow{display:grid;grid-template-columns:1fr 62px 84px 30px;gap:6px;margin-bottom:6px;align-items:start}
.itemrow input{padding:6px 8px;font-size:12.5px}

.flag{padding:8px 10px;border-radius:6px;font-size:11.5px;line-height:1.45;margin-top:10px}
.flag.ok{background:#e8f7f0;color:var(--ok);border:1px solid #bfe8d6}
.flag.warn{background:#fef3c7;color:var(--warn);border:1px solid #fde68a}
.flag.err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}

.olist{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.olist:hover{background:var(--bg)}
.olist b{font-size:13px;display:block}
.olist small{font-size:11px;color:var(--muted);display:block;margin-top:1px}
.olist .meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:8px}
.pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.pill.rozpracovana{background:#f1f5f9;color:#475569}
.pill.odoslana{background:var(--tint);color:var(--brand)}
.pill.vyhrata{background:#e8f7f0;color:var(--ok)}
.pill.prehrata{background:#fef2f2;color:#b91c1c}
.pill.stornovana{background:#f5f5f5;color:#8a94a1;text-decoration:line-through}
.sum{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}

table.adm{width:100%;border-collapse:collapse;font-size:12px}
table.adm th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:0 6px 6px;border-bottom:1px solid var(--line)}
table.adm td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle}
table.adm input,table.adm select{padding:4px 6px;font-size:12px}

.stage{padding:26px;display:flex;justify-content:center;align-items:flex-start}
.paper{box-shadow:0 10px 40px rgba(18,24,31,.16);background:#fff}

/* ---------------- A4 dokument ---------------- */
@page{size:A4;margin:0}
.page{position:relative;width:210mm;min-height:297mm;padding:11mm 13mm 10mm;
  background:#fff;display:flex;flex-direction:column;overflow:hidden}
.hd{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:1.5px solid var(--line);padding-bottom:3mm;margin-bottom:3.5mm}
.logo{font-size:13pt;font-weight:800;letter-spacing:-.02em}
.logo .dots{color:var(--brand)}
.logo small{display:block;font-size:6.8pt;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-top:1.2mm}
.hd .doc{text-align:right}
.hd .doc h2{font-size:13.5pt;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.hd .doc .meta{font-size:7.4pt;color:var(--muted);margin-top:1.2mm;line-height:1.45}
.hd .doc .meta b{color:var(--ink);font-weight:650}

.parties{display:grid;grid-template-columns:1fr 1fr;gap:4mm;margin-bottom:3.5mm}
.party{border:1px solid var(--line);border-radius:2mm;padding:2.6mm 3.5mm;background:#fff}
.party.od{background:var(--bg)}
.party .l{font-size:6.6pt;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);font-weight:700;margin-bottom:1.4mm}
.party .nm{font-size:9.4pt;font-weight:750;letter-spacing:-.01em;margin-bottom:.8mm}
.party .ad{font-size:7.6pt;line-height:1.45;color:var(--muted)}
.party .ids{margin-top:1.5mm;font-size:7.2pt;color:var(--muted);line-height:1.45}
.party .ids b{color:var(--ink);font-weight:600}

.subject{background:var(--tint);border-left:2.5px solid var(--brand);
  border-radius:0 2mm 2mm 0;padding:2.4mm 3.5mm;margin-bottom:3.5mm;
  display:flex;align-items:baseline;gap:3.5mm}
.subject .l{font-size:6.6pt;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);font-weight:700;white-space:nowrap}
.subject .t{font-size:9.2pt;font-weight:700;letter-spacing:-.015em}

h3.sec{font-size:9pt;font-weight:750;letter-spacing:-.01em;margin-bottom:2mm;
  display:flex;align-items:center;gap:2.5mm}
h3.sec::before{content:"";width:2.5mm;height:2.5mm;border-radius:50%;background:var(--brand);flex:none}
h3.sec span{font-size:7.6pt;font-weight:500;color:var(--muted)}

table.doc{width:100%;border-collapse:collapse}
table.doc th{font-size:6.8pt;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:0 2.5mm 1.8mm;border-bottom:1.5px solid var(--line)}
table.doc th.n{text-align:right}
table.doc td{font-size:8.2pt;line-height:1.3;padding:1.5mm 2.5mm;border-bottom:1px solid var(--line);
  vertical-align:top}
table.doc td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.doc td .d{font-size:7pt;color:var(--muted);line-height:1.3;margin-top:.5mm}
table.doc tr.srow td{border-bottom:0;font-weight:650;background:#fafbfc}
table.doc tr.total td{border-top:1.5px solid var(--ink);border-bottom:0;font-weight:800;
  font-size:9.2pt;padding-top:2.2mm}
table.doc tr.total td.n{color:var(--brand)}
table.doc tr.hi td{background:var(--tint)}
.badge{display:inline-block;background:#e8f7f0;color:var(--ok);border:1px solid #bfe8d6;
  border-radius:99px;padding:.5mm 2mm;font-size:6.6pt;font-weight:700;vertical-align:1px}

.feat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.8mm 4mm;margin-top:.5mm}
.feat div{position:relative;padding-left:4mm;font-size:7.5pt;line-height:1.35;color:var(--muted)}
.feat div::before{content:"";position:absolute;left:0;top:1.1mm;width:1.8mm;height:1.8mm;
  border-radius:50%;background:var(--brand)}
.feat div b{color:var(--ink);font-weight:650}

.terms{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin-top:1mm}
.terms>div{border:1px solid var(--line);border-radius:2mm;padding:1.9mm 3mm;background:var(--bg)}
.terms .l{font-size:6.6pt;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:1mm}
.terms .v{font-size:8pt;font-weight:650;line-height:1.25}

.notes{font-size:6.9pt;line-height:1.45;color:#8a94a1;margin-top:2mm}
.notes b{color:var(--muted);font-weight:650}

.sign{display:grid;grid-template-columns:1fr 1fr;gap:8mm;margin-top:auto;padding-top:5mm}
.sign>div{border-top:1px solid var(--line);padding-top:2mm;font-size:7.6pt;color:var(--muted)}
.sign b{display:block;color:var(--ink);font-size:8.4pt;font-weight:650;margin-bottom:.8mm}

.foot{border-top:1px solid var(--line);margin-top:3mm;padding-top:2mm;
  display:flex;justify-content:space-between;font-size:7.2pt;color:#9aa3ad}
.foot b{color:var(--brand);font-weight:650}
.block{margin-bottom:3mm}

@media print{
  body{background:#fff}
  .app{display:block}
  .side{display:none!important}
  .stage{padding:0;display:block}
  .paper{box-shadow:none}
  .page{width:auto;min-height:auto}
}
@media (max-width:1100px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto}
  .stage{overflow-x:auto;justify-content:flex-start}
}