/* =====================================================================
   TJ Nivnice, vlastní ovládací prvky

   Jeden soubor pro web i administraci. Barvy, poloměry a stíny se berou
   z proměnných, které si každé prostředí nastaví po svém, proto se
   komponenta chová všude stejně a vypadá tam, kam patří.
   ===================================================================== */

:root{
  --k-plocha:#fff;
  --k-podklad:#F6F1E9;
  --k-text:#191627;
  --k-text-tlumeny:#776E92;
  --k-linka:rgba(25,22,39,.12);
  --k-hlavni:#F4501C;
  --k-hlavni-svetla:#FFF2ED;
  --k-r:10px;
  --k-r-velky:14px;
  --k-stin:0 10px 34px rgba(38,32,56,.16),0 2px 6px rgba(38,32,56,.08);
  --k-dur:.22s;
  --k-ease:cubic-bezier(.22,1,.36,1);
}

/* Původní prvek zůstává ve stránce, jen ho není vidět. Nesmí zmizet
   úplně, formulář, validace i čtečky ho pořád potřebují. */
.tj-schovany,.pole .tj-schovany{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;min-width:0!important;max-width:none!important;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;
  box-shadow:none!important
}

/* ---------------------------------------------------------------
   1. Rozbalovátko
   --------------------------------------------------------------- */

.tj-select{position:relative;display:block;width:100%}

.tj-select-tl{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:11px 14px;border:0;border-radius:var(--k-r);background:var(--k-podklad);
  box-shadow:inset 0 0 0 1px var(--k-linka);font:inherit;color:var(--k-text);
  text-align:left;cursor:pointer;transition:box-shadow var(--k-dur) var(--k-ease)
}
.tj-select-tl:hover{box-shadow:inset 0 0 0 1px rgba(244,80,28,.4)}
.tj-select-tl:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--k-hlavni)}
.tj-select.otevreno .tj-select-tl{box-shadow:inset 0 0 0 2px var(--k-hlavni)}

.tj-select-popisek{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tj-select-sipka{flex:none;width:18px;height:18px;color:var(--k-text-tlumeny);
  transition:transform var(--k-dur) var(--k-ease)}
.tj-select-sipka svg{width:100%;height:100%;display:block}
.tj-select.otevreno .tj-select-sipka{transform:rotate(180deg);color:var(--k-hlavni)}

.tj-select-seznam{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;
  max-height:260px;overflow-y:auto;padding:6px;
  background:var(--k-plocha);border-radius:var(--k-r-velky);
  box-shadow:var(--k-stin),inset 0 0 0 1px var(--k-linka);
  animation:tj-sjed var(--k-dur) var(--k-ease)
}
.tj-select.nahoru .tj-select-seznam{top:auto;bottom:calc(100% + 6px);animation:tj-vyjed var(--k-dur) var(--k-ease)}
@keyframes tj-sjed{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes tj-vyjed{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.tj-select-polozka{
  padding:9px 12px;border-radius:8px;cursor:pointer;font-size:.95rem;
  transition:background var(--k-dur) var(--k-ease),color var(--k-dur) var(--k-ease)
}
.tj-select-polozka:hover,.tj-select-polozka.kurzor{background:var(--k-hlavni-svetla);color:var(--k-hlavni)}
.tj-select-polozka.vybrano{font-weight:600;background:var(--k-hlavni);color:#fff}
.tj-select-polozka.vybrano.kurzor{background:var(--k-hlavni);color:#fff}
.tj-select-polozka.nelze{opacity:.45;cursor:not-allowed}
.tj-select-polozka.nelze:hover{background:none;color:inherit}
.tj-select-skupina{padding:10px 12px 4px;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--k-text-tlumeny);cursor:default}
.tj-select-skupina:first-child{padding-top:4px}
.tj-select-polozka.ve-skupine{padding-left:18px}

/* ---------------------------------------------------------------
   2. Kalendář
   --------------------------------------------------------------- */

.tj-datum{position:relative;display:block;width:100%}

.tj-datum-tl{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 14px;border:0;border-radius:var(--k-r);background:var(--k-podklad);
  box-shadow:inset 0 0 0 1px var(--k-linka);font:inherit;color:var(--k-text);
  text-align:left;cursor:pointer;transition:box-shadow var(--k-dur) var(--k-ease)
}
.tj-datum-tl:hover{box-shadow:inset 0 0 0 1px rgba(244,80,28,.4)}
.tj-datum-tl:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--k-hlavni)}
.tj-datum-tl.prazdne .tj-datum-popisek{color:var(--k-text-tlumeny)}
.tj-datum-ikona{flex:none;width:18px;height:18px;color:var(--k-hlavni)}
.tj-datum-ikona svg{width:100%;height:100%;display:block}
.tj-datum.otevreno .tj-datum-tl{box-shadow:inset 0 0 0 2px var(--k-hlavni)}

.tj-datum-panel{
  position:absolute;left:0;top:calc(100% + 6px);z-index:80;width:min(310px,92vw);padding:14px;
  background:var(--k-plocha);border-radius:var(--k-r-velky);
  box-shadow:var(--k-stin),inset 0 0 0 1px var(--k-linka);
  animation:tj-sjed var(--k-dur) var(--k-ease)
}
.tj-datum.nahoru .tj-datum-panel{top:auto;bottom:calc(100% + 6px)}

.tj-datum-hlava{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.tj-datum-mesic{font-size:.98rem;font-weight:600;text-transform:capitalize}
.tj-datum-sip{
  width:32px;height:32px;flex:none;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:var(--k-podklad);color:var(--k-text);font-size:18px;line-height:1;
  transition:background var(--k-dur) var(--k-ease),color var(--k-dur) var(--k-ease)
}
.tj-datum-sip:hover{background:var(--k-hlavni);color:#fff}

.tj-datum-mriz{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tj-datum-dz{
  display:grid;place-items:center;height:26px;font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--k-text-tlumeny)
}
.tj-datum-prazdno{height:34px}
.tj-datum-den{
  height:34px;border:0;border-radius:8px;cursor:pointer;background:0;font:inherit;font-size:.9rem;
  color:var(--k-text);transition:background var(--k-dur) var(--k-ease),color var(--k-dur) var(--k-ease)
}
.tj-datum-den:hover:not(:disabled){background:var(--k-hlavni-svetla);color:var(--k-hlavni)}
/* Den mimo povolený rozsah (atributy min/max) se nedá vybrat. */
.tj-datum-den.mimo{opacity:.3;cursor:not-allowed}
.tj-datum-den.mimo:hover{background:none;color:inherit}
.tj-datum-den.dnes{box-shadow:inset 0 0 0 1px var(--k-hlavni);font-weight:600}
.tj-datum-den.vybrany{background:var(--k-hlavni);color:#fff;font-weight:600}
.tj-datum-den:focus-visible{outline:2px solid var(--k-hlavni);outline-offset:1px}

.tj-datum-cas{margin-top:12px;padding-top:12px;border-top:1px solid var(--k-linka)}
.tj-datum-cas label{display:flex;align-items:center;gap:10px;font-size:.84rem;font-weight:600;color:var(--k-text-tlumeny)}
.tj-datum-cas input{
  flex:1;padding:8px 10px;border:0;border-radius:8px;background:var(--k-podklad);
  box-shadow:inset 0 0 0 1px var(--k-linka);font:inherit;color:var(--k-text)
}

.tj-datum-patka{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--k-linka)}
.tj-datum-akce{
  flex:1;padding:8px 6px;border:0;border-radius:8px;cursor:pointer;background:var(--k-podklad);
  font:inherit;font-size:.84rem;font-weight:600;color:var(--k-text);
  transition:background var(--k-dur) var(--k-ease),color var(--k-dur) var(--k-ease)
}
.tj-datum-akce:hover{background:var(--k-hlavni-svetla);color:var(--k-hlavni)}
.tj-datum-akce.hlavni{background:var(--k-hlavni);color:#fff}
.tj-datum-akce.hlavni:hover{filter:brightness(1.08);color:#fff}

/* ---------------------------------------------------------------
   3. Textový editor
   --------------------------------------------------------------- */

.tj-editor{
  border-radius:var(--k-r);overflow:hidden;background:var(--k-plocha);
  box-shadow:inset 0 0 0 1px var(--k-linka)
}
.tj-editor:focus-within{box-shadow:inset 0 0 0 2px var(--k-hlavni)}

.tj-editor-listva{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;
  background:var(--k-podklad);border-bottom:1px solid var(--k-linka);position:sticky;top:0;z-index:2
}
.tj-editor-tl{
  min-width:32px;height:32px;padding:0 8px;border:0;border-radius:7px;cursor:pointer;
  background:0;font:inherit;font-size:.86rem;font-weight:700;color:var(--k-text);line-height:1;
  transition:background var(--k-dur) var(--k-ease),color var(--k-dur) var(--k-ease)
}
.tj-editor-tl:hover{background:var(--k-hlavni-svetla);color:var(--k-hlavni)}
.tj-editor-tl.aktivni{background:var(--k-hlavni);color:#fff}
.tj-editor-tl:focus-visible{outline:2px solid var(--k-hlavni);outline-offset:-2px}
.tj-editor-delic{width:1px;height:20px;margin:0 4px;background:var(--k-linka)}

.tj-editor-plocha{
  min-height:200px;max-height:60vh;overflow-y:auto;padding:16px 18px;
  font-size:1rem;line-height:1.7;color:var(--k-text);outline:0
}
.tj-editor-plocha:empty::before{content:attr(data-prazdne);color:var(--k-text-tlumeny)}
.tj-editor-plocha p{margin:0 0 .9em}
.tj-editor-plocha h2{font-size:1.35rem;margin:1.1em 0 .4em;line-height:1.25}
.tj-editor-plocha h3{font-size:1.12rem;margin:1em 0 .35em;line-height:1.3}
.tj-editor-plocha ul,.tj-editor-plocha ol{margin:0 0 .9em;padding-left:1.4em}
.tj-editor-plocha li{margin:.25em 0}
.tj-editor-plocha a{color:var(--k-hlavni);text-decoration:underline}
.tj-editor-plocha blockquote{
  margin:1em 0;padding:.6em 1em;border-left:3px solid var(--k-hlavni);
  background:var(--k-hlavni-svetla);border-radius:0 8px 8px 0
}
.tj-editor-plocha blockquote p:last-child{margin-bottom:0}

@media (prefers-reduced-motion: reduce){
  .tj-select-seznam,.tj-datum-panel{animation:none}
  .tj-select-sipka,.tj-select-polozka,.tj-datum-den,.tj-editor-tl{transition:none}
}

/* Tlačítko lišty editoru s ikonou místo písmene. */
.tj-editor-tl-ikona{display:inline-grid;place-items:center}
.tj-editor-tl-ikona svg{width:17px;height:17px;display:block}