/* Vzhled aplikace – stejné barvy jako kalkulace (kraftový karton). */
:root {
  --kraft: #8a5a2b;
  --kraft-svetla: #f6efe6;
  --text: #1f1c19;
  --text-2: #6b625a;
  --linka: #e2d9cf;
  --pozadi: #faf8f5;
  --karta: #ffffff;
  --chyba: #b3261e;
  --chyba-pozadi: #fbe9e7;
  --polomer: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--pozadi); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[hidden] { display: none !important; }

.hlavicka {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 24px; background: var(--karta); border-bottom: 3px solid var(--kraft);
}
.hlavicka .domu { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.hlavicka .logo { height: 32px; }
.hlavicka .znacka { font-weight: 700; color: var(--kraft); letter-spacing: .02em; }
.hlavicka .znacka small { font-weight: 500; color: var(--text-2, #6b5f53); margin-left: 4px; letter-spacing: 0; }
.hlavicka .kdo { margin-left: auto; display: flex; gap: 12px; align-items: baseline; color: var(--text-2); }

.obsah { max-width: 960px; margin: 0 auto; padding: 32px 16px; }
.nacitani { color: var(--text-2); }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 16px; }

.karta { background: var(--karta); border: 1px solid var(--linka); border-radius: var(--polomer); padding: 24px; }
.formular { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.formular .popis { margin: 0; color: var(--text-2); }
.formular label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.formular input {
  font: inherit; font-weight: 400; color: inherit; background: #fff;
  border: 1px solid #cfc5ba; border-radius: 6px; padding: 9px 10px;
}
.formular input:focus { outline: 2px solid var(--kraft); outline-offset: 0; border-color: var(--kraft); }
.chyba { margin: 0; padding: 8px 10px; border-radius: 6px; background: var(--chyba-pozadi); color: var(--chyba); }

.tlacitko {
  font: inherit; font-weight: 600; color: #fff; background: var(--kraft);
  border: 0; border-radius: 6px; padding: 10px 16px; cursor: pointer;
}
.tlacitko:disabled { opacity: .6; cursor: default; }
.odkaz { font: inherit; color: var(--kraft); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

.dlazdice { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.dlazdice a, .dlazdice div {
  display: block; padding: 18px; border-radius: var(--polomer); border: 1px solid var(--linka);
  background: var(--karta); color: var(--text); text-decoration: none;
}
.dlazdice a { border-color: var(--kraft); }
.dlazdice a:hover { background: var(--kraft-svetla); }
.dlazdice strong { display: block; font-size: 17px; margin-bottom: 4px; }
.dlazdice span { color: var(--text-2); font-size: 13px; }
.dlazdice div { opacity: .55; }

.radek-nadpis { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.radek-nadpis h1 { margin: 0; }
.radek-nadpis .tlacitko { margin-left: auto; text-decoration: none; }
.filtr { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.filtr input[type=search] {
  flex: 1; min-width: 220px; font: inherit; border: 1px solid #cfc5ba; border-radius: 6px; padding: 9px 10px; background: #fff;
}
.filtr label { display: flex; gap: 6px; align-items: center; color: var(--text-2); }
.tabulka-obal { overflow-x: auto; }
.tabulka { width: 100%; border-collapse: collapse; background: var(--karta); border: 1px solid var(--linka); border-radius: var(--polomer); }
.tabulka th, .tabulka td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linka); vertical-align: top; }
.tabulka th { font-size: 13px; color: var(--text-2); font-weight: 600; background: var(--kraft-svetla); }
.tabulka tbody tr { cursor: pointer; }
.tabulka tbody tr:hover { background: var(--kraft-svetla); }
.tabulka td.cislo { white-space: nowrap; font-weight: 600; }
.tabulka td small { color: var(--text-2); }
.tabulka td.ceny { white-space: nowrap; font-variant-numeric: tabular-nums; }
.obsah:has(#seznam:not([hidden])) { max-width: 1200px; }

/* zákazníci */
.tlacitko.druhe { background: #fff; color: var(--kraft); border: 1px solid var(--kraft); }
.radek-nadpis .tlacitko + .tlacitko { margin-left: 0; }
.radek-nadpis { flex-wrap: wrap; }
.filtr input.rozmer { flex: 0 1 280px; min-width: 200px; }
.drobecky { margin: 0 0 8px; }
.drobecky a { color: var(--kraft); }
h2 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
h2 small { font-weight: 400; color: var(--text-2); font-size: 13px; }
.udaje { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 16px; padding: 14px 16px;
  background: var(--karta); border: 1px solid var(--linka); border-radius: var(--polomer); }
.udaje dt { color: var(--text-2); }
.udaje dd { margin: 0; }
.hlaska-kontrola { margin: 0 0 12px; padding: 8px 10px; border-radius: 6px; background: #fff3c4; color: #8a5d00; }
.stitek { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; background: #fff3c4; color: #8a5d00; white-space: nowrap; }
.tabulka tr.neaktivni td { color: var(--text-2); }
.volba { display: flex; gap: 6px; align-items: center; color: var(--text-2); margin-top: 8px; }
.napoveda { color: var(--text-2); font-size: 13px; margin: 0; }
.obsah:has(#zakaznici:not([hidden])), .obsah:has(#zakaznik:not([hidden])), .obsah:has(#karta:not([hidden])) { max-width: 1200px; }

/* karta zákazníka */
.karta-formular fieldset {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px;
  border: 1px solid var(--linka); border-radius: var(--polomer); background: var(--karta); padding: 16px; margin: 0 0 16px;
}
.karta-formular legend { font-weight: 600; padding: 0 6px; }
.karta-formular label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 14px; }
.karta-formular label small { font-weight: 400; color: var(--text-2); }
.karta-formular .siroke { grid-column: 1 / -1; }
.karta-formular .zaskrtavatko { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; }
.karta-formular input:not([type=checkbox]), .karta-formular select, .karta-formular textarea {
  font: inherit; font-weight: 400; color: inherit; background: #fff; border: 1px solid #cfc5ba; border-radius: 6px; padding: 8px 9px; width: 100%;
}
.karta-formular textarea { resize: vertical; }
.karta-formular :is(input, select, textarea):focus { outline: 2px solid var(--kraft); outline-offset: 0; border-color: var(--kraft); }
.karta-formular > .chyba { margin-bottom: 16px; }
.seznam-radku { display: flex; flex-direction: column; gap: 8px; }
.seznam-radku .radek { display: flex; gap: 8px; align-items: center; }
.seznam-radku .radek input { flex: 1; min-width: 0; font: inherit; border: 1px solid #cfc5ba; border-radius: 6px; padding: 7px 8px; }
.seznam-radku .radek button { font-size: 20px; text-decoration: none; padding: 0 6px; }
.karta-formular fieldset > .odkaz { justify-self: start; }
.tlacitka-dole { display: flex; gap: 12px; position: sticky; bottom: 0; padding: 12px 0; background: var(--pozadi); }
.tlacitka-dole .tlacitko { text-decoration: none; }
@media (max-width: 700px) { .seznam-radku .radek { flex-wrap: wrap; } .seznam-radku .radek input { flex: 1 1 40%; } }

/* historie faktur */
.tabulka.historie tbody tr { cursor: default; }
.tabulka td.vpravo { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabulka.historie td { font-size: 14px; }

/* místa vykládky */
.seznam-radku .radek.adresa { align-items: flex-start; padding: 10px; border: 1px solid var(--linka); border-radius: 6px; background: var(--pozadi); }
.pole-adresy { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; }
.pole-adresy label { font-size: 13px; }
.pole-adresy input:not([type=checkbox]) { width: 100%; }
.pole-adresy .zaskrtavatko { flex-direction: row; align-items: center; gap: 6px; align-self: end; padding-bottom: 8px; }
.seznam-radku .radek.adresa input { flex: none; }
.pole-adresy input[type=checkbox] { width: auto; }

.tabulka.historie tr.souhrn { cursor: pointer; }
.tabulka.historie tr.souhrn.otevreny { background: var(--kraft-svetla); font-weight: 600; }
.tabulka.historie tr.dodavka td { font-size: 13px; color: var(--text-2); background: #fdfbf8; padding-top: 4px; padding-bottom: 4px; }
.tabulka.historie tr.dodavka td:first-child { padding-left: 28px; }

/* artikly */
.tabulka td.chybi { color: #8a5d00; }
.tabulka tr.detail { cursor: default; }
.tabulka tr.detail:hover { background: none; }
.tabulka tr.detail > td { background: #fdfbf8; padding: 12px 14px; }
.artikl-detail .udaje { margin-bottom: 10px; }
.artikl-uprava { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; }
.artikl-uprava label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 500; }
.artikl-uprava .siroke { grid-column: 1 / -1; }
.artikl-uprava input { font: inherit; border: 1px solid #cfc5ba; border-radius: 6px; padding: 7px 8px; background: #fff; }
#tForm input { flex: 0 1 280px; font: inherit; border: 1px solid #cfc5ba; border-radius: 6px; padding: 9px 10px; background: #fff; }

.dva-sloupce { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .dva-sloupce { grid-template-columns: 1fr; } }
.obsah:has(#vyhodnoceni:not([hidden])), .obsah:has(#zakazky:not([hidden])), .obsah:has(#uzivatele:not([hidden])) { max-width: 1300px; }
.filtr input[type=month] { font: inherit; border: 1px solid #cfc5ba; border-radius: 6px; padding: 7px 8px; background: #fff; }

/* IČO + tlačítko ARES (karta zákazníka) */
.ico-radek { display: flex; gap: 6px; align-items: center; }
.ico-radek input { flex: 1; min-width: 0; }
.tlacitko.male { padding: 6px 10px; font-size: 13px; white-space: nowrap; }