/* Černobílý, střídmý vzhled. */
* { box-sizing: border-box; }
html { font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #000; background: #fff; }
body { margin: 0; }
a { color: #000; }
main { max-width: 1800px; margin: 0 auto; padding: 1rem 16px 3rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; border-bottom: 1px solid #000; padding-bottom: .25rem; }

.top { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between;
       padding: .6rem 16px; border-bottom: 2px solid #000; }
.brand { font-weight: 700; text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }

form.narrow { max-width: 420px; }
form.inline { display: inline; }
label { display: block; margin: 0 0 .8rem; }
input, select, textarea { display: block; width: 100%; margin-top: .2rem; padding: .45rem .5rem;
       font: inherit; color: #000; background: #fff; border: 1px solid #000; border-radius: 0; }
input:focus, select:focus, textarea:focus, button:focus { outline: 2px solid #000; outline-offset: 1px; }
button { font: inherit; padding: .45rem 1rem; color: #fff; background: #000; border: 1px solid #000; border-radius: 0; cursor: pointer; }
button:hover { background: #333; }
button.link { padding: 0; color: #000; background: none; border: 0; text-decoration: underline; }

table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
th, td { text-align: left; padding: .35rem .5rem; border: 1px solid #000; vertical-align: top; white-space: nowrap; }
th { background: #eee; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.flash { padding: .5rem .75rem; border: 1px solid #000; }
.flash.error { border-width: 2px; font-weight: 600; }
.small { font-size: .85rem; }
code { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
code.secret { font-size: 1.1rem; font-weight: 700; }

@media (max-width: 640px) {
  table { display: block; overflow-x: auto; }
}
@media print {
  .top nav, .flash { display: none; }
  .top { border: 0; }
}

.qr { margin: 1rem 0; }
.qr svg { display: block; width: 240px; max-width: 100%; height: auto; border: 1px solid #000; }

h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
form.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; max-width: 900px; }
form.grid .wide { grid-column: 1 / -1; }
form.grid table input, form.grid table select { margin: 0; }
form.grid input[type=radio] { width: auto; margin: .6rem auto; }
form.search { display: flex; gap: .5rem; max-width: 520px; margin-bottom: 1rem; }
form.search input { margin: 0; }

form.filters { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin-bottom: 1rem; }
form.filters label { margin: 0; }
table.tx tr.unmatched td { border-width: 2px; }
table.tx td { font-size: .92rem; }
form.assign select { min-width: 14rem; }
form.assign { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; }
form.assign select, form.assign button { margin: 0; width: auto; }
label.check { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
label.check input { width: auto; margin: 0; }
details pre { white-space: pre-wrap; font-size: .8rem; background: #f4f4f4; padding: .5rem; }
details form input { display: inline-block; width: auto; }

p.big { font-size: 1.2rem; }
.doc-preview { border: 1px solid #000; padding: 1.5rem 2rem; max-width: 800px; font-family: "Times New Roman", Georgia, serif; }
.doc-preview h1 { text-align: center; }
.doc-preview .doc-number { text-align: right; }
.doc-preview .doc-sub { text-align: center; font-size: .85rem; }
.doc-preview .doc-head { border-bottom: 1px solid #000; padding-bottom: .5rem; margin-bottom: 1.5rem; }
.doc-preview .doc-owner { font-weight: bold; margin-left: 2rem; }
.doc-preview table.doc-facts { width: auto; }
.doc-preview table.doc-facts td { border: 0; padding: .1rem 1.5rem .1rem 0; }
.doc-preview .doc-sign-line { margin-top: 2.5rem; }

table.months td, table.months th { text-align: right; }
table.months th:first-child { text-align: left; }

form.toolbar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 1rem 0; }
.badge { display: inline-block; padding: 0 .4rem; color: #fff; background: #000; font-size: .8rem; font-weight: 700; letter-spacing: .03em; }


input.w-num { width: 5rem; margin: 0; }
input.w-name { width: 18rem; margin: 0; display: inline-block; }
input.w-note { width: 16rem; margin: 0; }
td > input[type=checkbox] { width: auto; margin: .4rem auto; }
td select { width: auto; margin: 0; }

p.pager { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }

/* Záporné částky červeně; zvýraznění celých řádků (vratka, doplatek). */
.neg { color: #c00; }
tr.refund td, tr.refund th { background: #d9d9d9; font-weight: 700; border-top-width: 3px; border-bottom-width: 3px; }
tr.settle td, tr.settle th { background: #f2f2f2; font-style: italic; border-top-style: dashed; border-bottom-style: dashed; }
.legend span { display: inline-block; padding: 0 .5rem; margin-right: .5rem; border: 1px solid #000; }
.legend span.refund { background: #d9d9d9; font-weight: 700; border-width: 3px 1px; }
.legend span.settle { background: #f2f2f2; font-style: italic; border-style: dashed; }
.legend span.neg { border-color: #c00; }

/* Řaditelné tabulky (assets/app.js) */
th.sort { cursor: pointer; user-select: none; }
th.sort::after { content: " ↕"; font-weight: 400; color: #888; }
th.sort[aria-sort=ascending]::after { content: " ▲"; color: #000; }
th.sort[aria-sort=descending]::after { content: " ▼"; color: #000; }

/* Zvýraznění řádku pod myší (ztmaví i podbarvené řádky – vratky, doplatky) */
tr:hover > td { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .06); }
.doc-preview tr:hover > td { box-shadow: none; }
@media print { tr:hover > td { box-shadow: none; } }

/* Seznam výpisů: řádek měsíce */
tr.month th { background: #fff; border-top-width: 2px; padding-top: .6rem; }
tr.month .neg { font-weight: 700; }
ul.tight { margin: .25rem 0 0; padding-left: 1.25rem; }
ul.checks li { margin: .15rem 0; }
ul.checks label.check { margin-right: 1rem; font-weight: 400; }
form.flash .assign { margin-top: .5rem; }
.waived { font-weight: 400; }

/* Evidenční listy */
div.toolbar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 1rem 0; }
div.toolbar input, td input.w-date, input.w-date { width: auto; display: inline-block; margin: 0; }
input.w-dec { width: 7rem; margin: 0; text-align: right; }
input.w-room { width: 12rem; margin: 0; }
table.compact td, table.compact th { padding: .2rem .4rem; }
.grid-inline { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0 1rem; max-width: 1200px; }

/* Široká tabulka vycentrovaná na stránku (může přesahovat obsah, při nedostatku místa se posouvá) */
.center-wide { position: relative; width: 100vw; left: 50%; margin-left: -50vw; padding: 0 16px; overflow-x: auto; }
.center-wide > table { width: auto; margin: .5rem auto 1rem; }
tr.old td { color: #555; }

/* Termíny */
tr.overdue td { font-weight: 700; }
tr.overdue td:first-child, tr.overdue td:nth-child(2) { color: #c00; }
tr.soon td { background: #f2f2f2; }
ul.deadlines { padding-left: 1.2rem; }
ul.deadlines li.overdue { font-weight: 700; }
ul.deadlines li.overdue .when { color: #c00; }

/* Formulář s bočním panelem (šablony dokladů) */
.with-side { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-start; }
.with-side > form.grid { flex: 1 1 560px; }
.side-panel { flex: 0 1 300px; border-left: 2px solid #000; padding-left: 1rem; }
.side-panel h3 { margin-top: 0; }
ul.tpl-list { list-style: none; padding: 0; margin: 0 0 .5rem; }
ul.tpl-list li { padding: .35rem 0; border-bottom: 1px solid #ccc; }
ul.tpl-list li.active { background: #f2f2f2; }
form.tpl-save input { margin: .25rem 0; }
@media (max-width: 640px) { .side-panel { border-left: 0; padding-left: 0; border-top: 2px solid #000; } }

/* Formulář rozpočtu: políčka v tabulce zarovnaná do sloupců, jednotky za políčkem v pevné šířce */
.grid-inline { align-items: end; }
table.budget-form td { vertical-align: middle; }
table.budget-form td.num { white-space: nowrap; }
table.budget-form input.w-num, table.budget-form input.w-dec { display: inline-block; width: 8rem; text-align: right; vertical-align: middle; }
table.budget-form input.w-note { display: inline-block; width: 16rem; }
table.budget-form .unit { display: inline-block; width: 3.2rem; padding-left: .35rem; text-align: left; font-size: .85rem; }
.grid-inline label { white-space: nowrap; }

/* Hlavička rozpočtu: všech pět polí v jedné řadě (na úzké obrazovce se zalomí) */
.budget-head { display: flex; flex-wrap: wrap; gap: 0 1rem; max-width: none; align-items: flex-end; }
.budget-head label { flex: 0 0 auto; }
.budget-head label:has(input[name=name]), .budget-head label:has(input[name=approved_by]) { flex: 1 1 18rem; }
.budget-head input[type=date] { width: 10rem; }
.budget-head input[type=number] { width: 6rem; }

/* Nápověda „i“ v kolečku (help_html()) */
.help { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; margin-left: .3em;
  border: 1px solid #000; border-radius: 50%; font: italic 700 .75rem/1 Georgia, serif; cursor: help; position: relative;
  vertical-align: .1em; user-select: none; white-space: normal; }
.help:hover, .help:focus, .help.open { background: #000; color: #fff; outline: none; }
.help::after { content: attr(data-help); display: none; position: absolute; z-index: 20; left: calc(100% + .5rem); top: 50%;
  transform: translateY(-50%); width: max-content; max-width: min(22rem, 80vw); padding: .5rem .6rem; background: #fff; color: #000;
  border: 1px solid #000; box-shadow: 2px 2px 0 #000; font: 400 .85rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left; white-space: normal; }
.help:hover::after, .help:focus::after, .help.open::after { display: block; }
/* u pravého okraje okna se bublina otevře vlevo (třídu nastaví app.js) */
.help.help-left::after { left: auto; right: calc(100% + .5rem); }

/* Náhled vyúčtování účetní */
.settle-sheet { border: 1px solid #000; padding: .5rem 1rem 1rem; margin: 1rem 0; max-width: 1100px; }
.settle-sheet h2 { margin-top: .5rem; }
table.settle-sum { width: auto; }
table.settle-sum td, table.settle-sum th { border: 0; padding: .15rem 1.5rem .15rem 0; }

/* Navigace: hlavní menu (oblasti) a záložky oblasti */
.top nav a { text-decoration: none; padding: .15rem 0; border-bottom: 2px solid transparent; }
.top nav a:hover { border-bottom-color: #000; }
.top nav a.active { font-weight: 700; border-bottom-color: #000; }
nav.tabs { display: flex; flex-wrap: wrap; gap: 0 1.5rem; padding: .4rem 16px 0; border-bottom: 1px solid #000; background: #f4f4f4; }
nav.tabs a { text-decoration: none; padding: .3rem 0 .35rem; border-bottom: 3px solid transparent; margin-bottom: -1px; }
nav.tabs a:hover { border-bottom-color: #888; }
nav.tabs a.active { font-weight: 700; border-bottom-color: #000; }
p.subtabs { padding: .4rem .6rem; border: 1px solid #000; background: #fafafa; }
p.actions { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
@media print { nav.tabs, p.subtabs, p.actions { display: none; } }
.mail-preview .mail-intro { border-bottom: 2px solid #000; padding-bottom: .75rem; margin-bottom: 1rem; font-family: Georgia, serif; }

/* Pohyby na účtech: každý pohyb na jeden řádek */
table.tx td { vertical-align: middle; padding-top: .2rem; padding-bottom: .2rem; }
table.tx td.cp { max-width: 34rem; width: 34rem; }
table.tx .cp-line { display: flex; align-items: center; gap: .5rem; min-width: 0; }
table.tx .cp-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tx .cp-detail { flex: none; }
table.tx form.assign { flex-wrap: nowrap; }
table.tx form.assign select { width: 19rem; min-width: 19rem; max-width: 19rem; padding: .2rem .3rem; }
table.tx form.assign button { padding: .2rem .6rem; }
table.tx tr.tx-detail td { background: #f8f8f8; white-space: normal; }
table.tx tr.tx-detail pre { margin: 0 0 .5rem; }
table.tx tr.tx-detail form.toolbar { margin: 0; }
form.filters input.w-num, form.filters input.w-dec, form.filters input.w-note { display: block; }

/* Detailní filtrování (Pohyby na účtech) */
details.filter-more { flex-basis: 100%; order: 10; }
details.filter-more > summary { cursor: pointer; display: inline-block; padding: .25rem .6rem; border: 1px solid #000; user-select: none; }
details.filter-more[open] > summary { background: #000; color: #fff; }
.filter-more-fields { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin-top: .5rem; }
.filter-more-fields label { margin: 0; }
input.w-amt { width: 7.5rem; text-align: right; }
input.w-vs { width: 8.5rem; }
input.w-acct { width: 14rem; }
input.w-text { width: 18rem; }
/* Detailní filtrování: tlačítko vedle „Filtrovat“, pole na samostatném řádku formuláře */
form.filters .filter-more-fields { flex-basis: 100%; order: 10; margin-top: 0; }
form.filters .filter-more-fields[hidden] { display: none; }
button.secondary { color: #000; background: #fff; }
button.secondary:hover, button.secondary[aria-expanded=true] { color: #fff; background: #000; }
/* Stránkování a počet řádků na stránku v jednom řádku (počet vpravo) */
.pager-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1.5rem; margin: .5rem 0; }
.pager-row p.pager { margin: 0; }
p.per-page { margin-left: auto; }

/* Oblast jen ke čtení: odkazy na úpravy (třída .write) se skryjí */
body[data-readonly] .write { display: none; }
.readonly-note { margin-top: -.5rem; }
.perm-table td, .perm-table th { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }
.perm-table .l { text-align: left; }
tr.muted td { color: #777; }

/* Dokument DOCX zobrazený na webu (archive-view) */
.docx { max-width: 46rem; line-height: 1.5; }
.docx p { margin: .35rem 0; white-space: normal; }
.docx p.c { text-align: center; }
.docx p.r { text-align: right; }
.docx p.ind1 { padding-left: 1.5rem; }
.docx p.ind2 { padding-left: 3rem; }
.docx p.ind3, .docx p.ind4 { padding-left: 4.5rem; }
.docx h2, .docx h3, .docx h4 { margin: 1.2rem 0 .4rem; }
.docx .docx-title { text-align: center; }
.docx-table td { vertical-align: top; white-space: normal; }
@media print { .noprint, header.top, nav.tabs { display: none; } .docx { max-width: none; } }

/* Formulář schovaný pod tlačítkem (např. zápis převodu na kartě jednotky) – ohraničený, aby bylo jasné, co k němu patří */
.form-box { border: 1px solid #000; padding: .25rem 1rem 1rem; margin: .5rem 0 1.5rem; }
.form-box h3 { margin-top: .5rem; }

/* Splátkový kalendář – vzhled jako dokument dodavatele */
.sched-doc { max-width: 52rem; border: 1px solid #000; padding: 1rem 1.5rem; margin: .5rem 0 1rem; background: #fff; }
.sched-top, .sched-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sched-title h2 { margin: .75rem 0 .25rem; }
.sched-sub { margin: 0 0 .75rem; }
.sched-table { width: 100%; margin: .75rem 0; }
.sched-table .sched-sum td { font-weight: 700; }
.sched-table tr.sched-overdue td { font-weight: 700; }
.sched-table tr.sched-soon td { background: #f2f2f2; }
@media print { .sched-doc { border: 0; padding: 0; } }
.sched-table tr.sched-pair td { background: #f8f8f8; white-space: normal; }
.sched-table tr.sched-pair select { width: auto; max-width: 100%; display: inline-block; margin: 0 .5rem 0 0; }
.sched-doc { overflow-x: auto; } /* široká tabulka nesmí přetéct rámeček dokumentu */

/* Popis postupu na stránce (rozbalovací) */
details.process { border: 1px solid #000; padding: .5rem 1rem; margin: .5rem 0 1rem; max-width: 60rem; }
details.process summary { cursor: pointer; }
details.process li { margin: .5rem 0; }

/* Souvislý text (popis systému na úvodní stránce) – čitelná délka řádku */
.prose { max-width: 48rem; line-height: 1.55; }
.prose p { margin: 0 0 .75rem; }