/* FotímeDěti — designový systém.
   Barvy zatím vycházejí z návrhu; až klientka dodá logo, mění se jen
   proměnné v :root a nic jiného. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  color-scheme: light;
  --tmava: #2e4a52; --tmava2: #243b42; --teal: #4e838c; --oranz: #d9743f;
  --text: #24343a; --sedy: #6b8087; --linka: #e3eaec; --plocha: #f5f8f9;
  --karta: #fff; --zelena: #2f6b4d; --cervena: #93412f;
}
html, body { height: 100%; }
body {
  font-family: "Avenir Next", "Lato", -apple-system, "Helvetica Neue", sans-serif;
  background: var(--plocha); color: var(--text); font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------- layout */
.app { display: flex; min-height: 100vh; }
.side { width: 208px; background: var(--tmava2); color: #cfdee1; flex: none;
        padding: 20px 0; display: flex; flex-direction: column; }
.logo { display: flex; align-items: center; gap: 9px; padding: 0 18px 22px; }
.logo-znak { width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--oranz); position: relative; }
.logo-znak::after { content: ""; position: absolute; inset: 8px 8px auto 8px;
  height: 8px; border-radius: 99px; background: #fff; opacity: .85; }
.logo-text { color: #fff; font-weight: 600; font-size: 14.5px;
  letter-spacing: -.2px; line-height: 1.15; }
.logo-text small { display: block; color: #7e9aa1; font-size: 9.5px;
  font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase;
  margin-top: 2px; }
.nav-lbl { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #6d878f; padding: 14px 18px 6px; font-weight: 700; }
.nav a { display: block; padding: 8px 18px; color: #b8ccd0; font-size: 12.8px;
  border-left: 3px solid transparent; }
.nav a:hover { background: rgba(255,255,255,.04); color: #e4eef0; }
.nav a.on { background: rgba(255,255,255,.07); color: #fff; font-weight: 600;
  border-left-color: var(--oranz); }
.side-pata { margin-top: auto; padding: 14px 18px 0;
  border-top: 1px solid rgba(255,255,255,.08); font-size: 11px;
  color: #7e9aa1; }
.side-pata b { color: #dbe7e9; display: block; font-size: 12px; }
.side-pata a { color: #7e9aa1; font-size: 11px; display: inline-block;
  margin-top: 6px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { background: #fff; border-bottom: 1px solid var(--linka);
  padding: 12px 24px; display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; }
.top h1 { font-size: 19px; letter-spacing: -.3px; color: var(--tmava);
  font-weight: 600; }
.top .drobky { font-size: 11px; color: var(--sedy); }
.top .vpravo { margin-left: auto; display: flex; align-items: center;
  gap: 10px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--teal); color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.obsah { padding: 20px 24px 40px; flex: 1; }

/* ------------------------------------------------------- ovládání */
.pole { display: block; }
.pole > span { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .7px; color: var(--sedy); font-weight: 700;
  margin-bottom: 4px; }
input[type=text], input[type=date], input[type=time], input[type=number],
input[type=search], select, textarea {
  width: 100%; background: #fff; border: 1px solid var(--linka);
  border-radius: 7px; padding: 7px 10px; font-size: 13px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #cfe0e3;
  border-color: var(--teal); }
textarea { min-height: 64px; resize: vertical; }
.tl { border: 1px solid var(--linka); background: #fff; color: var(--tmava);
  border-radius: 7px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; }
.tl:hover { background: var(--plocha); }
.tl.prim { background: var(--oranz); border-color: var(--oranz); color: #fff; }
.tl.prim:hover { filter: brightness(1.06); }
.tl.mini { padding: 4px 9px; font-size: 11.5px; }
.tl:disabled { opacity: .5; cursor: default; }
.filtry { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px; }
.filtry .pole { min-width: 150px; }
.filtry .pole.siroke { flex: 1; min-width: 220px; }

/* --------------------------------------------------------- dlaždice */
.dlazdice { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 13px; margin-bottom: 20px; }
.dl { background: var(--karta); border: 1px solid var(--linka);
  border-radius: 9px; padding: 13px 15px 14px; position: relative;
  overflow: hidden; }
.dl::before { content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2.5px; background: var(--teal); }
.dl.o::before { background: var(--oranz); }
.dl .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--sedy); font-weight: 700; }
.dl .cis { font-size: 27px; font-weight: 600; letter-spacing: -.8px;
  color: var(--tmava); margin-top: 5px; line-height: 1; }
.dl .pod { font-size: 11px; color: var(--sedy); margin-top: 5px; }

/* ------------------------------------------------------------ karty */
.mrizka { display: grid; gap: 16px; }
.mrizka.dve { grid-template-columns: 1.55fr 1fr; }
.mrizka.dve-rovne { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .mrizka.dve, .mrizka.dve-rovne
  { grid-template-columns: 1fr; } }
.karta { background: var(--karta); border: 1px solid var(--linka);
  border-radius: 9px; overflow: hidden; margin-bottom: 16px; }
.karta-hlava { padding: 11px 16px; border-bottom: 1px solid var(--linka);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.karta-hlava h2 { font-size: 13.5px; color: var(--tmava); font-weight: 600; }
.karta-hlava .vpravo { margin-left: auto; display: flex; gap: 8px;
  align-items: center; }
.karta-telo { padding: 14px 16px; }
.karta-telo.mrizka2 { display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; }
@media (max-width: 700px) { .karta-telo.mrizka2 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- tabulky */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--sedy); font-weight: 700;
  padding: 9px 16px; background: #fafcfc;
  border-bottom: 1px solid var(--linka); white-space: nowrap; }
td { padding: 9px 16px; border-bottom: 1px solid #eef3f4; font-size: 12.5px;
  vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr.klik:hover { background: #f7fafb; cursor: pointer; }
td.hl { font-weight: 600; color: var(--tmava); }
td.c, th.c { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.podtext { display: block; font-size: 10.8px; color: var(--sedy);
  font-weight: 400; margin-top: 1px; }
.prazdno { padding: 26px 16px; text-align: center; color: var(--sedy);
  font-size: 12.5px; }

/* --------------------------------------------------------- štítky */
.stitek { display: inline-block; font-size: 10.8px; font-weight: 700;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.s-domluveno { background: #e4f0ea; color: var(--zelena); }
.s-cekame-na-odpoved { background: #fdf0e2; color: #9a5a22; }
.s-nabidka-odeslana { background: #e8eff7; color: #2f5480; }
.s-novy-kontakt { background: #eef3f4; color: var(--teal); }
.s-odmitli { background: #f7e9e7; color: var(--cervena); }
.s-ozvat-pozdeji { background: #f4eef7; color: #6b4a80; }
.s-neaktivni, .s-archivovany-kontakt { background: #f2f4f5; color: #85949a; }
.s-aktivni { background: #e4f0ea; color: var(--zelena); }
.stitek.mini { font-size: 10px; padding: 2px 7px; }
.stitek.hist { background: #f2f4f5; color: #85949a; }

/* --------------------------------------------------- proužek kroků */
.kroky { display: flex; gap: 2.5px; }
.krok-t { width: 11px; height: 5px; border-radius: 2px; background: #e3eaec; }
.krok-t.ok { background: var(--teal); }

/* -------------------------------------------------------- kalendář */
.kal-hlava { display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--linka); flex-wrap: wrap; }
.kal-hlava h2 { font-size: 15px; color: var(--tmava); font-weight: 600;
  min-width: 150px; }
.kal-mrizka { display: grid; grid-template-columns: repeat(7, 1fr); }
.kal-den-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--sedy); font-weight: 700; padding: 8px 10px; background: #fafcfc;
  border-bottom: 1px solid var(--linka); border-right: 1px solid var(--linka); }
.kal-den-lbl:nth-child(7n) { border-right: 0; }
.kal-den { min-height: 92px; border-right: 1px solid #eef3f4;
  border-bottom: 1px solid #eef3f4; padding: 5px 6px; }
.kal-den:nth-child(7n) { border-right: 0; }
.kal-den .cd { font-size: 11.5px; color: var(--sedy); font-weight: 600;
  margin-bottom: 4px; }
.kal-den.mimo { background: #fafcfc; }
.kal-den.mimo .cd { color: #c3cfd2; }
.kal-den.dnes .cd { color: var(--oranz); }
.udalost { background: #eaf2f3; border-left: 2.5px solid var(--teal);
  border-radius: 3px; padding: 3px 5px; margin-bottom: 3px; display: block; }
.udalost.hist { background: #f4f6f7; border-left-color: #b9c7ca; }
.udalost b { display: block; font-size: 10.6px; color: var(--tmava);
  font-weight: 600; line-height: 1.25; }
.udalost span { font-size: 9.8px; color: var(--sedy); }

/* ---------------------------------------------------------- nástěnka */
.kan { display: grid; grid-template-columns: repeat(6, minmax(150px,1fr));
  gap: 10px; align-items: start; overflow-x: auto; }
.kan-sl { background: #eef3f4; border-radius: 9px; padding: 9px; }
.kan-hl { display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  padding: 0 2px; }
.kan-hl b { font-size: 11px; color: var(--tmava); text-transform: uppercase;
  letter-spacing: .5px; }
.pocet { background: #d6e1e3; color: #4a6a72; font-size: 10px;
  font-weight: 700; padding: 1px 6px; border-radius: 20px; margin-left: auto; }
.kan-k { background: #fff; border: 1px solid var(--linka); border-radius: 7px;
  padding: 9px 10px; margin-bottom: 8px; display: block; }
.kan-k:hover { border-color: var(--teal); }
.kan-k b { display: block; font-size: 12px; color: var(--tmava);
  font-weight: 600; line-height: 1.3; }
.kan-k .meta { font-size: 10.5px; color: var(--sedy); margin-top: 3px; }
.kan-k .cena { font-size: 11.5px; font-weight: 700; color: var(--teal);
  margin-top: 5px; }

/* ------------------------------------------------------ „co řešit“ */
.res { display: flex; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid #eef3f4; }
.res:last-child { border-bottom: 0; }
.res .tecka { width: 7px; height: 7px; border-radius: 50%; flex: none;
  margin-top: 4px; background: var(--oranz); }
.res .tecka.t { background: var(--teal); }
.res b { display: block; font-size: 12.3px; color: var(--tmava); }
.res span { font-size: 11.3px; color: var(--sedy); }

/* ------------------------------------------------------ zaškrtávátka */
.ch { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid #eef3f4; font-size: 13px; cursor: pointer; }
.ch:last-child { border-bottom: 0; }
.box { width: 19px; height: 19px; border-radius: 5px; flex: none;
  border: 1.5px solid #c6d4d7; background: #fff; position: relative; }
.box.ok { background: var(--teal); border-color: var(--teal); }
.box.ok::after { content: ""; position: absolute; left: 5px; top: 3px;
  width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(40deg); }
.ch.hot { color: var(--sedy); }
.ch .faze-lbl { margin-left: auto; font-size: 10px; color: #9aabb0;
  text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }

/* ---------------------------------------------------------- odznaky */
.info { background: #eef4f5; border-left: 3px solid var(--teal);
  padding: 9px 12px; border-radius: 0 6px 6px 0; margin-bottom: 14px;
  font-size: 12.3px; }
.info.varovani { border-left-color: var(--oranz); }
.info b { color: var(--tmava); }

/* ----------------------------------------------------------- dialog */
.zaves { position: fixed; inset: 0; background: rgba(36,59,66,.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow: auto; z-index: 50; }
.dialog { background: #fff; border-radius: 12px; width: 100%;
  max-width: 720px; box-shadow: 0 24px 60px rgba(22,38,43,.28); }
.dialog .karta-hlava h2 { font-size: 15px; }
.dialog-pata { padding: 12px 16px; border-top: 1px solid var(--linka);
  display: flex; gap: 9px; justify-content: flex-end; }
.zavrit { border: 0; background: transparent; color: var(--sedy);
  font-size: 20px; line-height: 1; padding: 0 4px; }

/* -------------------------------------------------------- přihlášení */
.login-strana { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px; }
.login { background: #fff; border-radius: 14px; padding: 32px;
  width: 100%; max-width: 360px; text-align: center;
  box-shadow: 0 16px 44px rgba(36,59,66,.10); }
.login .logo { justify-content: center; padding-bottom: 18px; }
.login .logo-text { color: var(--tmava); }
.login h1 { font-size: 17px; color: var(--tmava); margin-bottom: 4px; }
.login p { font-size: 12.5px; color: var(--sedy); margin-bottom: 18px; }
.login input { text-align: center; font-size: 22px; letter-spacing: 8px;
  padding: 11px; }
.login .tl { width: 100%; margin-top: 11px; padding: 11px; }
.chyba { color: var(--cervena); font-size: 12.3px; margin-top: 10px;
  min-height: 18px; }

/* -------------------------------------------------------- mobil */
/* Zuzana bude zapisovat z telefonu, takže mobil není druhá liga. */
@media (max-width: 820px) {
  .app { flex-direction: column; }

  /* navigace: jeden řádek, vodorovně posuvný, nic se nezlomí */
  .side { width: 100%; flex-direction: row; align-items: center;
    padding: 9px 12px; gap: 10px; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .side::-webkit-scrollbar { display: none; }
  .logo { padding: 0; flex: none; }
  .logo-text { font-size: 13px; }
  .logo-text small, .nav-lbl { display: none; }
  .side-pata { display: none; }
  /* obal navigace je blok, na mobilu z něj musí být řádek,
     jinak se skupiny „Provoz“ a „Peníze“ zlomí pod sebe */
  [data-nav] { display: flex; flex-wrap: nowrap; flex: none; }
  .nav { display: flex; gap: 2px; flex-wrap: nowrap; flex: none; }
  .nav a { border-left: 0; border-bottom: 3px solid transparent;
    white-space: nowrap; padding: 6px 10px; font-size: 12.5px; }
  .nav a.on { border-left: 0; border-bottom-color: var(--oranz); }

  /* hlavička: název na řádek, tlačítka pod něj */
  .top { padding: 11px 14px; gap: 9px; }
  .top h1 { font-size: 17px; }
  .top .vpravo { margin-left: 0; width: 100%; order: 3;
    flex-wrap: wrap; gap: 7px; }
  .top .vpravo .tl { flex: 1; min-width: 0; text-align: center;
    padding: 9px 8px; }
  .top .vpravo .avatar { order: 9; flex: none; width: 28px; height: 28px; }
  .obsah { padding: 13px; }

  /* filtry na celou šířku */
  .filtry { gap: 8px; }
  .filtry .pole, .filtry .pole.siroke { min-width: 0; flex: 1 1 100%; }

  /* Tabulky se rozpadnou na kartičky. Na 375 px se sloupce nevejdou
     a vodorovné posouvání se na telefonu ovládá špatně. Tabulky, které
     posuv opravdu potřebují (matice oprávnění), dostanou třídu „siroka“. */
  table:not(.siroka) { display: block; }
  table:not(.siroka) th { display: none; }
  table:not(.siroka) tbody { display: block; }
  table:not(.siroka) tr { display: block; padding: 11px 14px;
    border-bottom: 1px solid var(--linka); }
  table:not(.siroka) tr:last-child { border-bottom: 0; }
  table:not(.siroka) td { display: block; border: 0; padding: 1px 0;
    font-size: 12.8px; }
  table:not(.siroka) td:empty { display: none; }
  table:not(.siroka) td.c { text-align: left; }
  table:not(.siroka) td:first-child { font-size: 14px; font-weight: 600;
    color: var(--tmava); margin-bottom: 3px; }
  table:not(.siroka) td[colspan] { font-weight: 700; }
  table.siroka { display: table; }
  .karta { overflow-x: auto; }

  /* nástěnka: sloupce na šířku prstu, posouvá se */
  .kan, .kan.kan9 { grid-template-columns: repeat(9, 76vw); gap: 9px; }

  /* kalendář: menší buňky, ať se měsíc vejde */
  .kal-den { min-height: 62px; padding: 3px 3px; }
  .kal-den-lbl { padding: 6px 3px; font-size: 9px; }
  .kal-den .cd { font-size: 10.5px; margin-bottom: 2px; }
  .udalost { padding: 2px 3px; }
  .udalost b { font-size: 9.5px; }
  .udalost span { display: none; }

  /* dialogy na celou obrazovku */
  .zaves { padding: 0; }
  .dialog { max-width: 100%; border-radius: 0; min-height: 100vh; }
  .karta-telo.mrizka2 { grid-template-columns: 1fr; }
  .dialog-pata { position: sticky; bottom: 0; background: #fff; }
  .dialog-pata .tl { flex: 1; padding: 11px; }

  /* dlaždice po dvou */
  .dlazdice { grid-template-columns: 1fr 1fr; gap: 9px; }
  .dl .cis { font-size: 22px; }

  /* zaškrtávátka větší, aby se dala odškrtnout prstem */
  .ch { padding: 12px 0; font-size: 14px; }
  .box { width: 24px; height: 24px; }
  .box.ok::after { left: 7px; top: 4px; width: 7px; height: 12px; }
  .ch .faze-lbl { font-size: 9.5px; }
}

/* nástěnka s devíti fázemi */
.kan.kan9 { grid-template-columns: repeat(9, minmax(148px,1fr)); }
@media (max-width: 1400px) { .kan.kan9 { grid-template-columns: repeat(9, 168px); } }

/* stavy komunikace podle seznamu klientky ze 4. 9. 2026 */
.s-nove-oslovena     { background: #e8eff7; color: #2f5480; }
.s-cekame-na-odpoved { background: #fdf0e2; color: #9a5a22; }
.s-pripomenout-se    { background: #f9e9d8; color: #a2551b; }
.s-termin-domluveny  { background: #e4f0ea; color: var(--zelena); }
.s-letos-nema-zajem  { background: #f7e9e7; color: var(--cervena); }
.s-neaktivni-kontakt { background: #f2f4f5; color: #85949a; }
/* stavy skladu */
.s-mame-dost { background: #e4f0ea; color: var(--zelena); }
.s-dochazi   { background: #fdf0e2; color: #9a5a22; }
.s-doslo     { background: #f7e9e7; color: var(--cervena); }