/* Spolecny styl kostry uzivatelske vrstvy - zadna zavislost na externim CDN,
   vse lokalne (zavazny pozadavek davky #469). Mobil first, velke plochy
   pro palec - obrazovky se pouzivaji hlavne z telefonu ve staji. */

:root {
  color-scheme: light;
  /* Barvy REKOMA podle Agent Monitoru (tools/agentsmon/dashboard.py,
     ukoly#1049) - stejna cervena a stejne svetle ruzove plochy. */
  --barva-text: #1b2733;
  --barva-pozadi: #f7eef0;
  --barva-plocha: #fdf1f2;
  --barva-okraj: #f0d6d8;
  --barva-zvyrazneni: #cf222e;
  --barva-zvyrazneni-tmava: #b3141d;
  --barva-chyba: #b3261e;
  --barva-chyba-pozadi: #fbe4e4;
  --mezera: 1rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: var(--barva-text);
  background: var(--barva-pozadi);
}

.hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mezera);
  padding: var(--mezera);
  background: linear-gradient(135deg, var(--barva-zvyrazneni) 0%, var(--barva-zvyrazneni-tmava) 100%);
  color: #fff;
  border-bottom: 1px solid var(--barva-zvyrazneni-tmava);
}

.hlavicka a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.logo-rekoma {
  display: block;
  flex-shrink: 0;
  height: 40px;
  width: auto;
  padding: 0.25rem 0.5rem;
  background: #fff;
  border-radius: 0.6rem;
}

/* Demo instance (ukoly#630) - vykresli se jen kdyz je PROVOZ_DEMO_BANNER
   zapnuty. Zamerne vyrazna barva: demo bezi na produkcnich settings, takze
   tenhle pruh je jediny rozdil, ktery clovek na obrazovce vidi. */
.pruh-demo {
  margin: 0;
  padding: 0.6rem var(--mezera);
  background: #8a2f0f;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
}

.hlavicka-demo {
  background: #f6e2d8;
  border-bottom: 3px solid #8a2f0f;
}

/* Demo hlavicka ma svetle pozadi (trida vyse se nemeni, ukoly#1049) - bily
   text ze zakladni .hlavicka by na nem nebyl citelny, proto slozeny
   selektor s vlastnim pravidlem jen na barvu textu. */
.hlavicka.hlavicka-demo {
  color: var(--barva-text);
}

.znacka {
  font-weight: 700;
  font-size: 1.2rem;
}

main {
  padding: var(--mezera);
  max-width: 40rem;
  margin: 0 auto;
}

/* Stranky s tabulkou (napr. seznam objednavek) potrebuji vic mista nez
   formulare a karty - zadani "Intranet zobrazeni podle rozliseni", krok 1
   (ukoly#1090). */
main.tabulka {
  max-width: 80rem;
}

h1 {
  font-size: 1.4rem;
}

.seznam-terminu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.karta-terminu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mezera);
  background: var(--barva-plocha);
  border: 1px solid var(--barva-okraj);
  border-radius: 0.75rem;
  padding: var(--mezera);
  margin-bottom: var(--mezera);
}

.cas {
  font-size: 1.4rem;
  font-weight: 700;
  min-width: 4rem;
}

.udaje {
  flex: 1 1 12rem;
}

.udaje .pacient {
  font-weight: 600;
}

.udaje .detail {
  color: #444;
  font-size: 0.95rem;
}

.tlacitko,
button,
summary,
input[type="submit"] {
  display: inline-block;
  min-height: 3rem;
  padding: 0.6rem 1.2rem;
  font-size: 1.05rem;
  border-radius: 0.6rem;
  border: 1px solid var(--barva-zvyrazneni);
  background: var(--barva-zvyrazneni);
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tlacitko-velke {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1.2rem;
}

.tlacitko-druhotne {
  background: var(--barva-plocha);
  color: var(--barva-zvyrazneni);
}

form {
  margin: 0.5rem 0;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 0.5rem;
}

legend {
  font-weight: 600;
  padding: 0;
}

label {
  display: block;
  margin: 0.4rem 0;
}

textarea,
select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"] {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.4rem;
  border: 1px solid var(--barva-okraj);
  background: var(--barva-plocha);
  color: var(--barva-text);
  font-family: inherit;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--barva-plocha);
}

th,
td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border: 1px solid var(--barva-okraj);
}

th {
  background: var(--barva-okraj);
}

.hlasky {
  list-style: none;
  padding: 0;
}

.hlaska {
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.hlaska-success {
  background: #e2f3e8;
  color: #1c5c34;
}

.hlaska-error {
  background: var(--barva-chyba-pozadi);
  color: var(--barva-chyba);
  border: 1px solid var(--barva-chyba);
}

.prazdno {
  color: #666;
}

.odhlaseni {
  flex-shrink: 0;
}

.odhlaseni button {
  min-height: 2.2rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.95rem;
}

section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--barva-okraj);
}

.navigace-hipo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem var(--mezera);
  background: var(--barva-plocha);
  border-bottom: 1px solid var(--barva-okraj);
}

.navigace-hipo a {
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  color: var(--barva-zvyrazneni);
  text-decoration: none;
  font-size: 0.95rem;
}

/* Spolecna lista modulu (ukoly#873, styl ukoly#878) - vlastni trida vedle
   `navigace-hipo`, aby zvyrazneni aktivniho modulu neslo menit nezavisle na
   puvodni hipo navigaci. */
.menu-modulu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.menu-modulu a.aktivni {
  background: var(--barva-zvyrazneni);
  color: #fff;
  font-weight: 600;
}

.karta-terminu.kolize {
  border-color: var(--barva-chyba);
  border-width: 2px;
  background: var(--barva-chyba-pozadi);
}

.dira {
  color: var(--barva-zvyrazneni);
  font-weight: 600;
}

.vyber-kone {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera);
  align-items: flex-end;
}

.cekaci-sloupce {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mezera);
  margin-top: 0.5rem;
}

.cekaci-sloupec {
  flex: 1 1 10rem;
}

.cekaci-sloupec h3 {
  font-size: 1rem;
  margin: 0 0 0.3rem;
}

.cekaci-sloupec ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cekaci-sloupec li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

/* Modul objednavky - potvrzovaci panel pred odeslanim (ukoly#1018). */
.panel-potvrzeni {
  width: min(28rem, calc(100% - 2rem));
  background: var(--barva-plocha);
  color: var(--barva-text);
  border: 1px solid var(--barva-okraj);
  border-radius: 0.75rem;
  padding: var(--mezera);
}

.panel-potvrzeni::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.panel-potvrzeni h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.panel-potvrzeni ul {
  padding-left: 1.2rem;
}

.panel-potvrzeni-tlacitka {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--mezera);
}

.panel-potvrzeni-tlacitka .tlacitko {
  flex: 1 1 auto;
}

/* Modul objednavky - nakupni seznam na obrazovce nove objednavky
   (ukoly#1028). Atribut `hidden` musi vyhrat i nad `.tlacitko`
   (display: inline-block) a nad flex radky polozek. */
#formular-nova-objednavka [hidden] {
  display: none;
}

input[type="search"] {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem;
  font-size: 1.1rem;
  border-radius: 0.4rem;
  border: 1px solid var(--barva-okraj);
  background: var(--barva-plocha);
  color: var(--barva-text);
  font-family: inherit;
}

.nakup-napoveda {
  color: #444;
  font-size: 0.95rem;
  margin: 0.3rem 0;
}

.nakup-oddil h2 {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.nakup-seznam {
  list-style: none;
  padding: 0;
  margin: 0;
}

.polozka-nakupu,
.radek-mimo-katalog {
  background: var(--barva-plocha);
  border: 1px solid var(--barva-okraj);
  border-radius: 0.6rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
}

.polozka-nakupu-radek {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.polozka-nakupu-nazev {
  flex: 1 1 auto;
  margin: 0;
  min-height: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4rem;
}

.polozka-nakupu-jednotka {
  color: #555;
  font-size: 0.95rem;
}

.polozka-nakupu-radek input.polozka-nakupu-mnozstvi {
  flex: 0 0 6rem;
  width: 6rem;
  min-height: 3rem;
  font-size: 1.2rem;
  text-align: center;
}

.radek-mimo-katalog-nadpis {
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.radek-mimo-katalog input {
  min-height: 3rem;
}

.radek-mimo-katalog .tlacitko {
  margin-top: 0.5rem;
}

/* Dlazdice na Rozcestniku (ukoly#1005) - velke odkazy, palec na telefonu
   proste netrefi vedle. */
.dlazdice-rozcestnik {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dlazdice-rozcestnik li {
  margin-bottom: var(--mezera);
}

.dlazdice-odkaz {
  display: block;
  padding: var(--mezera);
  background: var(--barva-plocha);
  border: 1px solid var(--barva-okraj);
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--barva-text);
}

.dlazdice-nazev {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--barva-zvyrazneni);
}

.dlazdice-popis {
  display: block;
  margin-top: 0.3rem;
  color: #444;
  font-size: 0.95rem;
}

/* Modul objednavky - strankovani seznamu (ukoly#1084). */
.strankovani p {
  margin: 0.4rem 0;
}

.jmeno-uzivatele {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Obal jmena v zahlavi (`sablony/zaklad.html`) nesmi na PC vytlacit
   Odhlasit - `display: contents` ho vyradi z box tree flexu `.hlavicka`,
   takze primo flex-item je odkaz `.jmeno-uzivatele` s vlastnim min-width: 0
   a zalamovanim (ukoly#1111, navazuje na ukoly#1108). Na mobilu se to
   prepisuje zpet na `display: block` (viz media dotaz nize). */
.hlavicka-uzivatel {
  display: contents;
}

/* Zobrazeni podle rozliseni pro tabulky a filtr (ukoly#1090, krok 1). */
.nezalamovat {
  white-space: nowrap;
}

.razeni-mobil {
  margin: 0 0 0.6rem;
}

@media (min-width: 48rem) {
  table {
    font-size: 0.95rem;
  }

  th,
  td {
    padding: 0.45rem 0.7rem;
  }

  .filtr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-end;
  }

  .filtr-pole {
    flex: 1 1 14rem;
  }

  .filtr button {
    flex: 0 0 auto;
  }

  .razeni-mobil {
    display: none;
  }

  /* Rozcestnik na PC/tabletu (ukoly#1106, krok 2) - dlazdice vedle sebe
     misto jednoho sloupce, mobil (viz media dotaz nize) zustava beze zmeny. */
  main.rozcestnik {
    max-width: 64rem;
  }

  .dlazdice-rozcestnik {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--mezera);
  }

  .dlazdice-rozcestnik li {
    margin-bottom: 0;
  }

  /* Hipo seznamy na PC (ukoly#1106, krok 2) - jen sirsi `main`, karty a
     sloupce uvnitr zustavaji beze zmeny. */
  main.siroky-seznam {
    max-width: 56rem;
  }
}

@media (max-width: 47.99rem) {
  table.karty-na-mobilu thead {
    display: none;
  }

  table.karty-na-mobilu tr {
    display: block;
    margin-bottom: 0.8rem;
    border: 1px solid var(--barva-okraj);
    border-radius: 0.4rem;
    background: var(--barva-plocha);
  }

  table.karty-na-mobilu td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 0;
    border-bottom: 1px solid var(--barva-okraj);
    padding: 0.45rem 0.7rem;
  }

  table.karty-na-mobilu td:last-child {
    border-bottom: 0;
  }

  table.karty-na-mobilu td::before {
    content: attr(data-label);
    font-weight: 600;
  }

  /* Zahlavi na mobilu (ukoly#1108, krok 2 - sablona misto jen CSS) - jmeno
     uzivatele se dnes zkracuje ("Ladislav Ton..."), misto toho se zalomi na
     vlastni radek pod logo/znacku a tlacitko Odhlasit zustane vpravo nahore
     (ma order 0 jako logo i znacka, obal jmena se dostane na dalsi radek diky
     flex-basis: 100%). Pravidla stoji na `.hlavicka-uzivatel`
     (`sablony/zaklad.html`), ne na `.jmeno-uzivatele` primo - ten nese jen
     zalamovani textu uvnitr obalu. */
  .hlavicka {
    flex-wrap: wrap;
  }

  .hlavicka-uzivatel {
    display: block;
    flex-basis: 100%;
    order: 3;
    text-align: center;
    font-size: 0.95rem;
  }

  .hlavicka-uzivatel .jmeno-uzivatele {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
  }
}