/* Fakturace: jednoduché čisté UI, mobil první. */

:root {
  --pozadi: #f5f6f8;
  --plocha: #ffffff;
  --text: #1d2330;
  --tlumene: #6b7280;
  --okraj: #dde1e7;
  --akcent: #2457c5;
  --zelena: #1f7a3f;
  --zelena-svetla: #e3f4e8;
  --zluta: #8a5a00;
  --zluta-svetla: #fdf1d6;
  --modra: #1d4f9c;
  --modra-svetla: #e2ecfb;
  --oranzova: #9a3d0a;
  --oranzova-svetla: #fde7d9;
  --cervena: #a51d1d;
  --cervena-svetla: #fbe1e1;
  --seda: #4b5563;
  --seda-svetla: #eceef1;
  --polomer: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--pozadi);
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--akcent); }
h1 { font-size: 1.35rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; }

.lista {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  padding: .6rem 1rem; background: var(--plocha); border-bottom: 1px solid var(--okraj);
  position: sticky; top: 0; z-index: 5;
}
.lista[hidden] { display: none; }
.logo { font-weight: 700; text-decoration: none; color: var(--text); }
.lista nav { display: flex; gap: 1rem; flex: 1; }
.lista nav a { text-decoration: none; color: var(--tlumene); padding: .2rem 0; border-bottom: 2px solid transparent; }
.lista nav a.aktivni { color: var(--text); border-bottom-color: var(--akcent); }
.uzivatel { display: flex; align-items: center; gap: .6rem; color: var(--tlumene); font-size: .9rem; }

main { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.nacitani, .prazdne { color: var(--tlumene); }

.panel { background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--polomer); padding: 1rem; }

/* Přihlášení */
.prihlaseni { max-width: 360px; margin: 12vh auto 0; }
.prihlaseni form { display: grid; gap: .8rem; }

label { display: grid; gap: .25rem; font-size: .88rem; color: var(--tlumene); }
input, select {
  font: inherit; color: var(--text); padding: .45rem .55rem; border: 1px solid var(--okraj);
  border-radius: 6px; background: #fff; min-width: 0;
}
input:focus, select:focus, .tlacitko:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; }
label.zaskrtavatko { display: flex; align-items: center; gap: .4rem; color: var(--text); }

.tlacitko {
  font: inherit; cursor: pointer; padding: .45rem .9rem; border-radius: 6px;
  border: 1px solid var(--akcent); background: var(--akcent); color: #fff;
}
.tlacitko:disabled { opacity: .55; cursor: default; }
.tlacitko-tiche { background: transparent; color: var(--akcent); }
.tlacitko-male { padding: .25rem .6rem; font-size: .88rem; }

.hlaska { padding: .6rem .8rem; border-radius: 6px; margin: 0 0 1rem; }
.hlaska-chyba { background: var(--cervena-svetla); color: var(--cervena); }
.hlaska-ok { background: var(--zelena-svetla); color: var(--zelena); }

/* Dlaždice počtů */
.dlazdice { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.dlazdice button {
  font: inherit; text-align: left; cursor: pointer; padding: .6rem .8rem; border-radius: var(--polomer);
  border: 1px solid var(--okraj); background: var(--plocha); color: var(--text);
}
.dlazdice button.vybrana { outline: 2px solid var(--akcent); }
.dlazdice .pocet { display: block; font-size: 1.5rem; font-weight: 700; }
.dlazdice .nazev { font-size: .85rem; color: var(--tlumene); }
.dlazdice .nevyreseno { font-size: .78rem; color: var(--cervena); }

/* Filtry */
.filtry { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; align-items: end; margin-bottom: 1rem; }
.filtry .hledani { grid-column: span 2; }
.filtry .prepinace { display: flex; flex-wrap: wrap; gap: .4rem 1rem; grid-column: 1 / -1; }

/* Stav */
.stav {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem;
  font-weight: 600; white-space: nowrap;
}
.stav-importovano, .stav-ok { background: var(--zelena-svetla); color: var(--zelena); }
.stav-varovani { background: var(--zluta-svetla); color: var(--zluta); }
.stav-ceka_na_import { background: var(--modra-svetla); color: var(--modra); }
.stav-odmitnuto { background: var(--oranzova-svetla); color: var(--oranzova); }
.stav-chyba, .stav-tichy { background: var(--cervena-svetla); color: var(--cervena); }
.stav-zkusebni, .stav-duplicita, .stav-nesledovano { background: var(--seda-svetla); color: var(--seda); }
.znacka { font-size: .75rem; color: var(--tlumene); border: 1px solid var(--okraj); border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; }

/* Tabulky */
.tabulka { width: 100%; border-collapse: collapse; background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--polomer); overflow: hidden; }
.tabulka th, .tabulka td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--okraj); vertical-align: top; }
.tabulka th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tlumene); background: #fafbfc; }
.tabulka tbody tr:last-child td { border-bottom: 0; }
.tabulka tr.odkaz { cursor: pointer; }
.tabulka tr.odkaz:hover { background: #f8f9fb; }
.tabulka .cislo { text-align: right; white-space: nowrap; }
.tabulka .zprava { color: var(--tlumene); font-size: .88rem; max-width: 28rem; }
.vyreseno { color: var(--zelena); font-size: .8rem; }

.strankovani { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; color: var(--tlumene); }

/* Detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; }
.detail-hlava { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.detail-hlava h1 { margin: 0; }
.akce { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
dl.udaje { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.udaje dt { color: var(--tlumene); }
dl.udaje dd { margin: 0; overflow-wrap: anywhere; }
.pdf { width: 100%; height: 80vh; border: 1px solid var(--okraj); border-radius: var(--polomer); background: #fff; }
.historie { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.historie li { background: var(--plocha); border: 1px solid var(--okraj); border-radius: 6px; padding: .5rem .7rem; }
.historie .cas { color: var(--tlumene); font-size: .82rem; }
.historie .neuplatneno { font-size: .78rem; color: var(--tlumene); }
.historie p { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 800px) {
  main { padding: .75rem; }
  .detail { grid-template-columns: 1fr; }
  .pdf { height: 70vh; }
  .filtry .hledani { grid-column: 1 / -1; }

  /* Tabulka dokladů se na mobilu skládá do karet. */
  .tabulka-karty thead { display: none; }
  .tabulka-karty, .tabulka-karty tbody, .tabulka-karty tr, .tabulka-karty td { display: block; width: 100%; }
  .tabulka-karty { border: 0; background: transparent; }
  .tabulka-karty tr { background: var(--plocha); border: 1px solid var(--okraj); border-radius: var(--polomer); margin-bottom: .6rem; padding: .4rem .2rem; }
  .tabulka-karty td { border: 0; padding: .2rem .6rem; }
  .tabulka-karty td[data-popis]::before { content: attr(data-popis) ": "; color: var(--tlumene); font-size: .82rem; }
  .tabulka-karty .cislo { text-align: left; }
}