/* MOoO v2 -- vizualni identita prevzata z puvodni Power Apps aplikace.
   Barvy a pismo jsou zavazne, viz zadani kapitola 9. NEMENIT. */

:root {
  --zluta:      #FFBF00;
  --zluta-svit: rgba(255, 191, 0, 0.18);
  --modra:      #3860B2;
  --tlacitko:   #2771C2;
  --tmava:      #00126B;
  --svetla:     #EDF1F9;
  --cervena:    #A32D2D;
  --cervena-bg: #FCEBEB;
  --text:       #1a1a1a;
  --sedy:       #555;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Atribut hidden musi prebit vlastni display. Bez tohohle pravidla
   je #dialog s `display: flex` videt hned po nacteni a jeho tmavy
   prekryv lezi pres celou stranku. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--svetla);
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
  border-left: 2px solid var(--tmava);
  border-right: 2px solid var(--tmava);
}

/* ---------- hlavicka ---------- */

#hlavicka {
  background: var(--zluta);
  border-bottom: 2px solid var(--tmava);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.hl-vlevo { display: flex; align-items: center; gap: 10px; min-width: 0; }

#nadpis {
  font-family: 'Patrick Hand', cursive;
  font-size: 30px;
  color: var(--tmava);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.znacka {
  background: #fff;
  border: 1px solid var(--tmava);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  color: var(--tmava);
  flex-shrink: 0;
}

.ikona {
  background: none;
  border: 0;
  color: var(--tmava);
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

/* ---------- lista ---------- */

#lista {
  background: var(--modra);
  display: flex;
  gap: 5px;
  padding: 8px 6px;
}

#lista button {
  flex: 1;
  background: var(--tlacitko);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 9px 2px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

#lista button.aktivni { background: var(--zluta); color: var(--tmava); }

/* ---------- obsah ---------- */

#obsah { padding-bottom: 28px; }

.nacita { padding: 40px; text-align: center; color: var(--sedy); }

.sekce { padding: 14px 16px; border-bottom: 1px solid var(--tmava); }
.sekce:last-child { border-bottom: 0; }

h2.nadpis-sekce {
  font-size: 15px;
  font-weight: 600;
  color: var(--tmava);
  margin: 0 0 8px;
}

.popisek { font-size: 12px; color: var(--sedy); margin: 0 0 4px; }
.drobne  { font-size: 11px; color: var(--sedy); margin: 6px 0 0; line-height: 1.5; }
.text    { font-size: 13px; line-height: 1.6; margin: 0; }

/* ---------- ramecky ---------- */

.blok-zluty {
  border: 2px solid var(--zluta);
  background: var(--zluta-svit);
  border-radius: 6px;
  padding: 12px;
  margin: 14px 16px;
}
.blok-zluty .popisek { color: #7a5a00; }

.blok-modry {
  background: var(--svetla);
  border: 1px solid var(--modra);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 12px 16px;
}
.blok-modry .popisek { color: var(--modra); }

.blok-cerveny {
  border: 3px solid var(--cervena);
  background: var(--cervena-bg);
  border-radius: 6px;
  padding: 12px;
  margin: 14px 16px;
}
.blok-cerveny h3 { font-size: 15px; color: var(--cervena); margin: 0 0 6px; font-weight: 600; }
.blok-cerveny p  { font-size: 12px; color: #791F1F; margin: 0 0 10px; line-height: 1.6; }

.cislo-velke {
  font-size: 23px;
  color: var(--tmava);
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}

.kod {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 17px;
  color: var(--tmava);
}

/* ---------- tlacitka ---------- */

button.tl, .tl {
  display: block;
  width: 100%;
  background: var(--tlacitko);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 13px;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  margin-bottom: 10px;
}
button.tl:active { opacity: 0.85; }

.tl-obrys {
  display: block; width: 100%;
  background: #fff; color: var(--tlacitko);
  border: 1px solid var(--tlacitko);
  border-radius: 4px; padding: 11px;
  font-size: 13px; font-family: inherit; cursor: pointer;
  margin-bottom: 10px;
}

.tl-cerveny {
  display: block; width: 100%;
  background: #fff; color: var(--cervena);
  border: 2px solid var(--cervena);
  border-radius: 4px; padding: 11px;
  font-size: 13px; font-family: inherit; cursor: pointer;
}

.tl-radek { display: flex; gap: 8px; }
.tl-radek > * { margin-bottom: 0; }

/* ---------- formulare ---------- */

label.pole {
  display: block;
  font-size: 15px;
  color: var(--tmava);
  font-weight: 600;
  margin: 0 0 6px;
}

input[type=text], input[type=date], input[type=tel], textarea, select {
  width: 100%;
  border: 1px solid var(--tmava);
  border-radius: 4px;
  padding: 9px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}
input:focus, textarea:focus {
  outline: 0;
  border: 2px solid var(--tlacitko);
  background: var(--svetla);
  padding: 8px 9px;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.6; }

.pocitadlo { font-size: 12px; text-align: right; margin: 6px 0 0; }
.pocitadlo b { color: var(--tlacitko); font-weight: 600; }
.pocitadlo.pretecen b { color: var(--cervena); }

.stitky { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.stitek {
  font-size: 12px; padding: 5px 11px; border-radius: 12px;
  border: 1px solid var(--modra); color: var(--modra);
  background: #fff; cursor: pointer; font-family: inherit;
}
.stitek.aktivni { background: var(--modra); color: #fff; }

.pin-pole { display: flex; gap: 8px; }
.pin-pole input {
  flex: 1; height: 48px; text-align: center;
  font-size: 21px; padding: 0;
}

/* ---------- seznamy ---------- */

.radek {
  padding: 12px 16px;
  border-bottom: 1px solid var(--tmava);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.radek:last-child { border-bottom: 0; }
.radek .telo { flex: 1; min-width: 0; }
.radek .hlavni { font-size: 15px; color: var(--tmava); font-weight: 600; margin: 0 0 3px; }
.radek .vedlejsi { font-size: 12px; color: var(--sedy); margin: 0; }
.radek.tlumeny { opacity: 0.65; }
.radek.zvyrazneny { background: var(--zluta-svit); border-left: 5px solid var(--zluta); }

.odznak {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--tlacitko); color: #fff; white-space: nowrap;
}
.odznak.obrys { background: #fff; color: var(--tlacitko); border: 1px solid var(--tlacitko); }
.odznak.sedy  { background: #eee; color: var(--sedy); }
.odznak.zluty { background: var(--zluta); color: #5a4200; }
.odznak.cerveny { background: var(--cervena); color: #fff; }

.odkaz { font-size: 12px; color: var(--tlacitko); cursor: pointer; margin-right: 14px; }
.odkaz.cerveny { color: var(--cervena); }

.zaskrt {
  width: 22px; height: 22px; border: 1px solid var(--tmava);
  border-radius: 4px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; background: #fff;
}
.zaskrt.hotovo { background: var(--tlacitko); border-color: var(--tlacitko); }

.statistiky { display: flex; gap: 10px; }
.statistika {
  flex: 1; background: var(--svetla); border: 1px solid var(--modra);
  border-radius: 4px; padding: 10px; text-align: center;
}
.statistika .popisek { color: var(--modra); font-size: 11px; }
.statistika .cislo { font-size: 22px; color: var(--tmava); font-weight: 600; }

.prazdno { padding: 34px 22px; text-align: center; }
.prazdno h3 { font-size: 16px; color: var(--tmava); margin: 10px 0 5px; font-weight: 600; }
.prazdno p  { font-size: 13px; color: var(--sedy); margin: 0 0 14px; line-height: 1.6; }

.pruh { height: 6px; background: var(--svetla); border: 1px solid var(--modra); border-radius: 3px; overflow: hidden; }
.pruh > div { height: 100%; background: var(--tlacitko); }

/* ---------- dialog ---------- */

#dialog {
  position: fixed; inset: 0; background: rgba(0, 18, 107, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 100;
}
.dialog-panel {
  background: #fff; border: 2px solid var(--tmava); border-radius: 8px;
  width: 100%; max-width: 380px; overflow: hidden;
}
.dialog-hlavicka {
  background: var(--zluta); border-bottom: 2px solid var(--tmava);
  padding: 12px 14px;
  font-family: 'Patrick Hand', cursive; font-size: 22px; color: var(--tmava);
}
.dialog-telo { padding: 14px; }
.dialog-telo p { font-size: 13px; line-height: 1.6; margin: 0 0 14px; }
.dialog-tlacitka { display: flex; gap: 8px; }
.dialog-tlacitka > * { flex: 1; margin-bottom: 0; }

/* ---------- hlaska ---------- */

#hlaska {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--tmava); color: #fff; padding: 11px 18px;
  border-radius: 4px; font-size: 13px; z-index: 200; max-width: 88%;
  text-align: center;
}
#hlaska.chyba { background: var(--cervena); }

/* ---------- kráva ---------- */

.krava { display: block; margin: 0 auto; }