/* GULAS.TECH – vzhled Norton Commanderu podle schváleného návrhu obrazovek */
@font-face {
  font-family: "VT323";
  src: url("fonts/VT323-Regular.ttf?v=1") format("truetype");
  font-display: block;
}
:root {
  --blue: #0000aa;
  --cyan: #00aaaa;
  --lcyan: #55ffff;
  --white: #ffffff;
  --yellow: #ffff55;
  --green: #55ff55;
  --gray: #aaaaaa;
  --black: #000000;
  --row: 26px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--blue);
  color: var(--lcyan);
  font: 22px/var(--row) "VT323", monospace;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }

/* horní menu */
.menubar {
  flex-shrink: 0; height: 30px; background: var(--cyan); color: var(--black);
  display: flex; align-items: center; gap: 4px; padding: 0 12px; white-space: nowrap;
}
.menubar > * { padding: 0 10px; }
.menubar a:hover { background: var(--black); color: var(--cyan); }
.menubar .off { opacity: .55; }
.menubar .brand { font-weight: normal; }
.grow { flex-grow: 1; }

.work { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; }

/* panely */
.panels { flex-grow: 1; min-height: 0; display: flex; gap: 8px; padding: 14px 8px 4px; }
.panel {
  position: relative; flex: 1 1 0; min-width: 0; border: 4px double var(--lcyan);
  display: flex; flex-direction: column;
}
.ptitle {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%); margin: 0; padding: 0 8px;
  background: var(--blue); color: var(--lcyan); font-size: 22px; font-weight: normal; white-space: nowrap;
}
.ptitle.active { background: var(--cyan); color: var(--black); }
.empty { padding: 8px; margin: 0; }

/* seznam dokladů */
.list { position: relative; flex-grow: 1; min-height: 0; overflow-y: auto; padding-top: 6px; }
.sep { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--lcyan); pointer-events: none; }
.sep.s1 { left: 111px; } .sep.s2 { right: 319px; } .sep.s3 { right: 213px; } .sep.s4 { right: 43px; }
.row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 106px 170px 44px; color: var(--white); }
.row > span { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .num { text-align: right; }
.row .code { padding: 0 4px; text-align: center; }
.row.head { color: var(--yellow); text-align: center; }
a.row:hover { background: #0000cc; }
.s-uhr { color: var(--green); }
.s-vys { color: var(--white); }
.s-sp { color: var(--yellow); }
.s-sto { color: var(--gray); }
.s-roz { color: var(--lcyan); }
.row.sel, a.row.sel:hover { background: var(--cyan); color: var(--black); position: relative; z-index: 1; }
.pfoot { border-top: 2px solid var(--lcyan); padding: 4px 8px; }
.pfoot .hi { color: var(--white); min-height: var(--row); }
.legend { color: var(--gray); }

/* náhled dokladu */
.dbody { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 10px; }
.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); margin: 0; }
.kv dt { color: var(--yellow); }
.kv dd { margin: 0; }
.hi { color: var(--white); }
.rule { border-top: 2px solid var(--lcyan); }
.items { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px 120px; column-gap: 8px; }
.items > span:not(:nth-child(4n+1)) { text-align: right; }
.items.head { color: var(--yellow); margin-bottom: -10px; }
.totals { display: grid; grid-template-columns: minmax(0, 1fr) 200px; text-align: right; }
.totals .big { color: var(--white); font-size: 30px; line-height: 38px; }
.note { color: var(--white); text-align: right; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-block; background: var(--cyan); color: var(--black); border: 0; padding: 2px 12px;
  box-shadow: 4px 4px 0 var(--black); cursor: pointer;
}
.btn:hover { background: var(--lcyan); }
.btn.primary { background: var(--blue); color: var(--yellow); }
.btn.primary:hover { background: var(--black); }

/* příkazová řádka a funkční klávesy */
.cmdline { flex-shrink: 0; height: 28px; background: var(--black); color: var(--gray); padding: 0 10px; display: flex; align-items: center; }
.cursor { display: inline-block; width: 11px; height: 20px; background: var(--gray); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.fkeys { flex-shrink: 0; height: 32px; display: flex; background: var(--black); }
.fk { flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; padding: 0; border: 0; background: var(--black); cursor: pointer; }
.fk .n { color: var(--white); padding: 0 4px 0 8px; display: flex; align-items: center; }
.fk .l { flex-grow: 1; background: var(--cyan); color: var(--black); display: flex; align-items: center; padding-left: 4px; white-space: nowrap; overflow: hidden; }
.fk:hover .l { background: var(--lcyan); }
.fk.off { cursor: default; }
.fk.off .l { color: #005555; }
.fk.off:hover .l { background: var(--cyan); }

/* dialogy (přihlášení, chyba) */
.center { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.logo { font-size: 120px; line-height: 110px; color: var(--yellow); text-shadow: 6px 6px 0 var(--black); }
.tagline { color: var(--white); margin: 10px 0 44px; text-align: center; }
.dialog { width: 100%; max-width: 480px; background: var(--gray); color: var(--black); padding: 12px; box-shadow: 14px 14px 0 var(--black); }
.dialog .frame { position: relative; border: 4px double var(--white); padding: 22px 18px 14px; }
.dialog h1 {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%); margin: 0; padding: 0 10px;
  background: var(--gray); font-size: 22px; font-weight: normal; white-space: nowrap;
}
.dialog p { margin: 10px 0 0; }
.form { display: grid; grid-template-columns: 100px minmax(0, 1fr); row-gap: 10px; align-items: center; }
.form input { background: var(--cyan); color: var(--black); border: 0; padding: 0 6px; height: 30px; }
.form .err, .form .buttons { grid-column: 1 / -1; }
.err { background: var(--yellow); padding: 2px 8px; margin: 0; }
.buttons { display: flex; justify-content: center; gap: 18px; padding-top: 8px; }

/* telefon */
@media (max-width: 800px) {
  body { display: block; height: auto; overflow: auto; }
  .menubar { position: sticky; top: 0; z-index: 2; }
  .work { display: block; }
  .panels { flex-direction: column; padding: 20px 6px 6px; gap: 24px; }
  .panel { flex: none; }
  .dbody { overflow: visible; }
  .list { overflow: visible; }
  .sep, .row.head { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n c" "u a"; padding: 4px 0; border-bottom: 1px dashed #0055aa; }
  .row > span:nth-child(1) { grid-area: n; }
  .row > span:nth-child(2) { grid-area: u; }
  .row > span:nth-child(3) { display: none; }
  .row > span:nth-child(4) { grid-area: a; }
  .row > span:nth-child(5) { grid-area: c; }
  .items { grid-template-columns: minmax(0, 1fr) auto auto; }
  .items > span:nth-child(4n+3) { display: none; }
  .menubar .off, .menubar .who, .cmdline { display: none; }
  .kv { grid-template-columns: 110px minmax(0, 1fr); }
  .fkeys { position: sticky; bottom: 0; z-index: 3; height: auto; flex-wrap: wrap; gap: 4px; padding: 4px; }
  .fk { flex: 1 1 45%; height: 48px; }
  .fk.off { display: none; }
  .logo { font-size: 64px; line-height: 64px; }
}

/* --- formuláře a dialogy (verze 2) --- */
.menubar a.on { background: var(--black); color: var(--cyan); }
.menubar a:focus-visible { outline: 0; background: var(--black); color: var(--yellow); }
.center.top { justify-content: flex-start; overflow-y: auto; padding-top: 28px; padding-bottom: 28px; }
.dialog.wide { max-width: 1080px; }
.dialog.reg { max-width: 580px; }
.dialog.mid { max-width: 640px; }
.dialog .frame > p { margin: 0 0 10px; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.form { grid-template-columns: 140px minmax(0, 1fr); align-content: start; }
.form select, .form input:not([type=checkbox]):not([type=radio]), .items-form input, .items-form select {
  background: var(--cyan); color: var(--black); border: 0; padding: 0 6px; height: 30px; min-width: 0;
}
.form input.short, .form input.date { width: 150px; }
.form input.ro:not([type=checkbox]):not([type=radio]) { background: var(--gray); border: 2px solid var(--black); }
.form .buttons, .form .hint { grid-column: 1 / -1; }
.with-btn { display: flex; gap: 8px; align-items: center; min-width: 0; }
.with-btn > input, .with-btn > select { flex: 1 1 auto; }
.with-btn > input.short { flex: 0 0 auto; }
.mini {
  flex-shrink: 0; background: var(--blue); color: var(--white); border: 0; padding: 0 10px; height: 30px;
  display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap;
}
.mini:hover { background: var(--black); }
.check, .radios label { display: flex; gap: 8px; align-items: center; }
.radios { display: flex; gap: 24px; }
input[type=checkbox], input[type=radio] { accent-color: var(--black); width: 18px; height: 18px; margin: 0; }
.msg { background: var(--cyan); color: var(--black); padding: 4px 10px; margin: 0 0 12px; }
.err { margin: 0 0 12px; }
.hint { margin: 12px 0 0; text-align: center; }
.note-dark { color: #222; }
.defsubmit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rule.dark { border-top-color: var(--black); margin: 14px 0; }
input.copy { width: 100%; margin-top: 6px; background: var(--white); color: var(--black); border: 2px solid var(--black); height: 32px; padding: 0 6px; }
.btn.dark { background: var(--black); color: var(--yellow); }

/* položky dokladu */
.items-form { display: grid; grid-template-columns: 30px minmax(0, 1fr) 110px 70px 150px 80px; gap: 6px 8px; align-items: center; }
.items-form.pdp { grid-template-columns: 30px minmax(0, 1fr) 100px 60px 140px 80px 150px; }
.items-form .th { border-bottom: 2px solid var(--black); }
.items-form .r, .items-form input.r { text-align: right; }
.items-form .pos { text-align: right; }
.doc-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 12px; }
.sum { display: grid; grid-template-columns: auto 200px; column-gap: 20px; text-align: right; }
.sum .big { font-size: 30px; line-height: 38px; }
.span2 { grid-column: 1 / -1; }

/* adresář */
.crow { grid-template-columns: minmax(0, 1fr) 130px 170px; }
.sep.c1 { right: 299px; } .sep.c2 { right: 169px; }
.box { position: relative; border: 2px solid var(--lcyan); padding: 16px 12px 8px; margin-top: 10px; }
.box h3 { position: absolute; top: -15px; left: 12px; margin: 0; padding: 0 6px; background: var(--blue); font-size: 22px; font-weight: normal; }
.kv3 { display: grid; grid-template-columns: 150px 50px minmax(0, 1fr); }
.kv3 .lbl { color: var(--yellow); }
.warn { background: var(--yellow); color: var(--black); padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.kv.wide { grid-template-columns: 200px minmax(0, 1fr); }
.kv.wide dt { color: var(--yellow); }

/* pozvánky */
.tbl.inv { display: grid; grid-template-columns: minmax(0, 1fr) 140px 120px; column-gap: 12px; }
.tbl .th { border-bottom: 2px solid var(--black); }
.span3 { grid-column: 1 / -1; }

@media (max-width: 800px) {
  .cols { grid-template-columns: 1fr; row-gap: 10px; }
  .form { grid-template-columns: 1fr; }
  .form input.short, .form input.date { width: 100%; }
  .items-form { grid-template-columns: 1fr 1fr; }
  .items-form .th, .items-form .pos { display: none; }
  .items-form input[name=popis] { grid-column: 1 / -1; margin-top: 8px; }
  .doc-foot { flex-direction: column; }
  .kv3 { grid-template-columns: 110px 40px minmax(0, 1fr); }
  .crow { grid-template-columns: minmax(0, 1fr) auto; }
  .crow > span:nth-child(3) { display: none; }
  .dialog { padding: 6px; }
  .dialog .frame { padding: 22px 10px 12px; }
}

.link-dark { color: var(--black); text-decoration: underline; align-self: center; }
.form input.code:not([type=checkbox]) { font-size: 30px; height: 40px; letter-spacing: 8px; width: 170px; }

.exp { color: var(--yellow); text-decoration: underline; }
.exp:hover { color: var(--white); }

.deposits { border: 2px solid var(--black); margin: 12px 0 0; padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.deposits legend { padding: 0 6px; }

/* nápověda a příspěvek */
.help h2 { font-size: 22px; font-weight: normal; margin: 14px 0 6px; border-bottom: 2px solid var(--black); }
.tbl.keys { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; }
.steps { margin: 0; padding-left: 28px; }
.donate-box { display: flex; gap: 20px; align-items: center; background: var(--white); padding: 12px; margin: 10px 0; }
.donate-box img { image-rendering: pixelated; }
.menubar .donate { color: var(--black); }
/* rychlé hledání v seznamu */
.qsearch { display: flex; gap: 8px; align-items: center; background: var(--black); color: var(--yellow); padding: 0 8px; }
.qsearch input { background: var(--cyan); color: var(--black); border: 0; padding: 0 6px; font: inherit; height: 26px; flex: 1 1 auto; }
a.row.hidden { display: none; }
@media (max-width: 800px) { .tbl.keys { grid-template-columns: 1fr; } .tbl.keys .th:nth-child(2) { display: none; } .menubar .donate { display: none; } }
.foot-note { color: var(--white); margin-top: 40px; }
.foot-note a { color: var(--yellow); text-decoration: underline; }

/* přehledy OSVČ */
.pform { display: grid; grid-template-columns: 160px minmax(0, 1fr); row-gap: 8px; align-items: center; }
.pform select, .pform input:not([type=radio]) { background: var(--cyan); color: var(--black); border: 0; padding: 0 6px; height: 28px; min-width: 0; font: inherit; }
.pform input.r { text-align: right; }
.pform .btn { justify-self: start; }
.pform .with-btn > select { flex: 0 0 auto; }
.res { display: grid; grid-template-columns: minmax(0, 1fr) 200px; }
.res > span:nth-child(2n) { text-align: right; }
.box .res { margin-top: 4px; }
.kv4 { display: grid; grid-template-columns: minmax(0, 1fr) 110px 130px; column-gap: 8px; }
.kv4 > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv4 > span:nth-child(3) { text-align: right; }
.kv4.head { color: var(--yellow); }
.incomes { overflow-y: auto; min-height: 60px; }
.small { font-size: 20px; line-height: 22px; }
.small .legend { margin-top: 6px; }
.msg-blue { background: var(--cyan); color: var(--black); padding: 2px 8px; margin: 0; }
@media (max-width: 800px) { .pform { grid-template-columns: 1fr; } .res { grid-template-columns: 1fr auto; } }

/* --- šablony faktur --- */
.gallery-wrap { max-width: 1240px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin: 12px 0; }
.tpl { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 2px solid transparent; }
.tpl.on { border-color: var(--yellow); }
.tpl .thumb { display: block; background: var(--white); box-shadow: 4px 4px 0 var(--black); line-height: 0; }
.tpl .thumb img { width: 100%; height: auto; aspect-ratio: 210 / 297; }
.tpl .thumb:focus-visible { outline: 2px solid var(--yellow); }
.tname { color: var(--white); }
.tname .year { color: var(--yellow); }
.tdesc { font-size: 0.85em; line-height: 1.2; flex: 1; }
.tpl .btn { align-self: flex-start; }
.tpl .btn.on { background: var(--yellow); box-shadow: none; }
.restyle { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.restyle select { background: var(--cyan); color: var(--black); border: 0; height: 26px; flex: 1; min-width: 0; }

/* --- DPH: přenesená daň a EU --- */
h2.sub { font-size: inherit; color: var(--white); margin: 18px 0 6px; font-weight: normal; }
.res.narrow { max-width: 760px; }
.tbl { display: grid; gap: 2px 14px; align-items: baseline; }
.tbl.pdp { grid-template-columns: 150px 120px 110px 60px 150px minmax(0, 1fr); }
.tbl.ec { grid-template-columns: 60px 150px 120px 70px 150px minmax(0, 1fr); }
.tbl .th { border-bottom: 2px solid var(--black); color: var(--white); }
.tbl .r { text-align: right; }
@media (max-width: 760px) { .tbl.pdp, .tbl.ec { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tplpick .tplname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.form.wide-row { margin-top: 10px; }
[hidden] { display: none !important; }
.follow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding: 8px; }
.follow.hi { background: var(--yellow); color: var(--black); }
.yearnav a { color: inherit; text-decoration: none; padding: 0 6px; }
.yearnav a:hover, .yearnav a:focus-visible { background: var(--black); color: var(--yellow); outline: 0; }
.tbl.a4 { grid-template-columns: 150px 120px 110px repeat(4, minmax(0, 1fr)); }
.exports { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
@media (max-width: 760px) { .tbl.a4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.res.narrow { grid-template-columns: minmax(0, 1fr) 300px; }

/* --- telefon: průchod všech obrazovek (verze 3) --- */
@media (max-width: 800px) {
  html, body { overflow-x: clip; }
  .menubar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 0 4px; gap: 0; height: 36px; }
  .menubar::-webkit-scrollbar { display: none; }
  .menubar > * { padding: 0 8px; line-height: 36px; flex-shrink: 0; }
  .menubar .brand, .menubar .clock, .menubar .grow { display: none; }
  .ptitle { max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
  .panel { border-width: 3px; }
  .dbody { padding: 14px 8px 8px; }
  .center.top { padding: 20px 6px 110px; }
  .dialog { box-shadow: 6px 6px 0 var(--black); }
  .dialog h1 { max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
  .buttons { flex-wrap: wrap; gap: 12px; }
  .actions .btn, .exports .btn { flex: 1 1 auto; text-align: center; }
  .fkeys { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .fk { flex: 1 1 30%; height: 40px; }
  .fk[data-fkey=F1], .fk[data-fkey=F9] { display: none; }
  .fk .l { white-space: normal; line-height: 18px; font-size: 19px; }
  .detail-panel { scroll-margin-top: 52px; }
  input, select, textarea { font-size: 20px; }
}

::placeholder { color: #006666; opacity: 1; }
.items-form input::placeholder { color: transparent; }
@media (max-width: 800px) {
  .kbd { display: none; }
  .with-btn > input.short { flex: 1 1 auto; width: auto; }
  .items-form { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .items-form input::placeholder { color: #006666; }
  .items-form .pos { display: block; grid-column: 1 / -1; text-align: left; margin-top: 10px; border-bottom: 2px solid var(--black); }
  .items-form .pos::before { content: "Položka "; }
  .items-form input[name=popis], .items-form select[name=kod] { grid-column: 1 / -1; margin-top: 0; }
  .doc-foot > .mini { align-self: stretch; justify-content: center; height: 40px; }
  .sum { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .res.narrow { grid-template-columns: minmax(0, 1fr); }
  .res.narrow > span:nth-child(2n) { border-bottom: 1px dashed #555; padding-bottom: 2px; margin-bottom: 4px; }
  .exports { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .restyle .btn.mini { height: 30px; }
}
@media (max-width: 800px) {
  body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; height: auto; overflow-y: visible; }
  .work { display: block; flex-grow: 1; }
  .menubar .donate { display: block; }
  .kv4 { grid-template-columns: minmax(0, 1fr) auto; }
  .kv4 > span:nth-child(2) { display: none; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tpl { padding: 3px; }
  .tdesc { font-size: 17px; line-height: 19px; }
  .tpl .btn { align-self: stretch; text-align: center; padding: 2px 4px; }
  .tbl.keys > span:nth-child(odd):not(.th) { color: var(--blue); margin-top: 6px; }
}
.tpl .btn.on { color: var(--black); }

/* --- správa serveru --- */
.admin .dbody { overflow-y: auto; }
.admin .kv.wide { grid-template-columns: 170px minmax(0, 1fr); }
.admin .kv dd { overflow-wrap: anywhere; }
.bfiles { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; margin: 6px 0; }
.bfiles .r { text-align: right; }
.admin .actions { margin-top: 8px; }
.ulist { margin-top: 6px; }
.urow { display: grid; grid-template-columns: minmax(0, 1fr) 180px 70px; column-gap: 10px; padding: 4px 0; border-bottom: 1px dashed #0055aa; }
.urow.head { color: var(--yellow); border-bottom: 2px solid var(--lcyan); }
.urow > span { overflow-wrap: anywhere; }
.urow .r { text-align: right; }
.mlabel { display: none; }
.restyle input.inv { background: var(--cyan); color: var(--black); border: 0; height: 26px; padding: 0 6px; flex: 1; min-width: 0; font: inherit; }
@media (max-width: 800px) {
  .admin .kv.wide { grid-template-columns: 120px minmax(0, 1fr); }
  .urow { grid-template-columns: minmax(0, 1fr) auto; }
  .urow > span:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--gray); }
  .urow.head > span:nth-child(2) { display: none; }
  .mlabel { display: inline; }
  .urow > span:nth-child(3) { grid-column: 2; grid-row: 1; }
}