/* Blokovy monospace styl: #111 podklad, 5px ramy, zadne zaobleni, zadne stiny.
   Zadny externi zdroj: pismo je systemove, nic se nestahuje. */

:root{
  --podklad:#111;
  --text:#eee;
  --akcent:#f44;
  --panel:hsl(0,0%,16%);
  --zalozka:hsl(0,0%,13.2%);
  --zalozka-aktivni:hsl(0,0%,30%);
  --vstup:#1d1d1d;
  --druhy-text:hsl(0,0%,70%);
  --ticho:hsl(0,0%,28%);
  --cara:#303030;
  --sedy:#777;
  --sedy-ram:rgb(64.6,64.6,64.6);
  --hover-podklad:rgb(96.9,0,0);
  --mono:ui-monospace,"Cascadia Mono","DejaVu Sans Mono",Consolas,monospace;
  color-scheme:dark;
}

::selection{background-color:var(--text);color:var(--podklad)}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}

body{
  background-color:var(--podklad);
  color:var(--text);
  display:flex;
  flex-direction:column;
  font-family:var(--mono);
  font-size:16px;
  line-height:1.6;
  margin:0 auto;
  max-width:1000px;
  min-height:100vh;
  padding:30px;
  width:100%;
}

h1{font-size:35px}
/* znacka: logo a napis na spolecne ose */
h1:has(.glyph),.brand{align-items:center;display:flex;gap:12px}
h1 .napis{flex:1;text-align:center}
h2{font-size:30px}
h3{font-size:25px}
h4{font-size:20px}
h1,h2,h3,h4{line-height:1.2}

a{color:var(--akcent);outline:0;text-decoration:none}
a:hover,a:focus{text-decoration:underline}

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

button{
  background-color:var(--panel);
  border:solid 5px var(--text);
  color:var(--text);
  font-family:inherit;
  font-size:inherit;
  outline:none;
  overflow:hidden;
  padding:10px 15px;
  text-align:center;
  text-overflow:ellipsis;
  transition:all .1s;
  white-space:nowrap;
  width:min-content;
}
button:disabled{background-color:var(--panel);border-color:var(--sedy-ram);color:var(--sedy)}
button:not(:disabled){cursor:pointer}
button:not(:disabled):active{transform:translateY(2px)}
button:not(:disabled):hover,
button:not(:disabled):focus-visible{background-color:hsl(0,0%,20%)}
/* druhotne tlacitko: tmavsi vypln jako neaktivni zalozka */
button.tise{background-color:var(--zalozka)}
button.tise:disabled{background-color:var(--zalozka)}

/* ---------- vstupy ---------- */

input,textarea{
  background-color:var(--vstup);
  border:5px solid var(--text);
  color:var(--text);
  font-family:inherit;
  font-size:inherit;
  outline:none;
  padding:10px 15px;
  transition:background-color .5s;
  width:100%;
}
textarea{line-height:1.6;resize:vertical}
input:hover,input:focus,textarea:hover,textarea:focus{background-color:var(--panel)}
input::placeholder,textarea::placeholder{color:var(--sedy);opacity:1}

/* ---------- hlasky ---------- */

.chyba,.hotovo-text{
  background-image:linear-gradient(90deg,rgba(255,68,68,.2),rgba(255,68,68,0));
  border-left:solid 5px var(--akcent);
  padding:10px 15px;
}
.hotovo-text{
  background-image:linear-gradient(90deg,rgba(238,238,238,.15),rgba(238,238,238,0));
  border-left-color:var(--text);
}
.prazdno{color:var(--druhy-text)}

/* ---------- brana a volba jmena ---------- */

.brana{align-items:center;display:flex;flex:1;justify-content:center}
.panel{display:flex;flex-direction:column;width:min(460px,100%)}
.panel h1{margin-bottom:40px;word-break:break-word}
.panel .chyba{margin-top:30px}
.glyph{color:var(--akcent);flex:none;height:2.6em;width:2.6em}

.jmena{display:flex;flex-direction:column}
.jmena button{text-align:left;width:100%}
.jmena button:not(:first-child){margin-top:-5px}

#volba-form{display:flex;flex-direction:column}
#volba-form .kdo{color:var(--akcent);font-size:20px;margin-bottom:30px;word-break:break-word}
#volba-form button{width:100%}
#volba-form input+button,#volba-form button+button{margin-top:-5px}

#brana-form button[type=submit]{margin-top:-5px;width:100%}

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

#app{display:flex;flex:1;flex-direction:column;width:100%}

#hud{
  align-items:center;
  border-bottom:dashed 2px var(--cara);
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:space-between;
  padding-bottom:30px;
}
.brand{font-size:25px;white-space:nowrap}
.ucet{display:flex;max-width:100%}
#ja{
  background-color:var(--zalozka-aktivni);
  border:solid 5px var(--text);
  overflow:hidden;
  padding:10px 15px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ucet button{margin-left:-5px}

/* ---------- rozvrh a chat ---------- */

#obsah{
  align-items:start;
  display:grid;
  flex:1;
  gap:30px;
  grid-template-columns:1fr 1fr;
  margin-top:30px;
}
.karta{
  background-color:var(--podklad);
  border:solid 5px var(--text);
  display:flex;
  flex-direction:column;
  gap:15px;
  min-width:0;
  padding:15px;
}

.navigace{display:flex}
.navigace>*{margin-left:-5px}
.navigace>*:first-child{margin-left:0}
.navigace .tyden{
  background-color:var(--zalozka-aktivni);
  border:solid 5px var(--text);
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  line-height:1.3;
  min-width:0;
  padding:10px 15px;
}
.navigace .tyden b,.navigace .tyden span{overflow-wrap:anywhere}
.navigace .tyden span{color:var(--druhy-text);font-size:14px}
.navigace #tyden-dnes{flex:none}

.ukoly{display:flex;flex-direction:column;list-style:none}
.ukoly li{
  align-items:center;
  border-left:solid 5px rgba(0,0,0,0);
  border-top:dashed 2px var(--cara);
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  padding:15px 0 15px 15px;
}
.ukoly li:first-child{border-top:0}
.ukoly li.moje{border-left-color:var(--akcent)}
/* min-width drzi nazev citelny; kdyz uz se to nevejde, tlacitko spadne pod radek */
.u-text{display:flex;flex:1;flex-direction:column;line-height:1.3;min-width:120px}
.u-nazev{overflow:hidden;text-overflow:ellipsis}
.u-kdo{color:var(--druhy-text);font-size:15px;overflow:hidden;text-overflow:ellipsis}
.ukoly li.moje .u-kdo{color:var(--akcent)}
.u-stav{color:var(--druhy-text);font-size:15px;white-space:nowrap}
.ukoly li.splneno .u-nazev{color:var(--druhy-text);text-decoration:line-through}

/* ---------- chat ---------- */

.starsi{align-self:center}
.zpravy{
  display:flex;
  flex-direction:column;
  list-style:none;
  max-height:52vh;
  overflow-y:auto;
  scrollbar-color:var(--zalozka-aktivni) var(--podklad);
}
.zpravy li{
  align-items:baseline;
  border-left:solid 5px rgba(0,0,0,0);
  display:flex;
  gap:10px;
  line-height:1.5;
  padding:3px 0 3px 10px;
}
.zpravy li.moje{border-left-color:var(--akcent)}
.z-cas{color:var(--ticho);flex:none;font-size:15px}
.z-kdo{
  color:var(--druhy-text);
  flex:none;
  overflow:hidden;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:9ch;
}
.zpravy li.moje .z-kdo{color:var(--akcent)}
.z-text{flex:1;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:560px){
  .z-kdo{width:auto}
}

#chat-form{display:flex}
#chat-form textarea{flex:1;min-width:0}
#chat-form button{margin-left:-5px}

/* ---------- nastaveni ---------- */

#nastaveni{gap:30px;margin-top:30px}
#nastaveni h2:not(:first-child)::before{
  background-color:var(--panel);
  border-radius:5px;
  content:"";
  display:block;
  height:3px;
  margin-bottom:30px;
  width:100%;
}
#seznam-ukolu li{
  border-left:0;
  border-top:0;
  display:flex;
  gap:0;
  padding:0;
}
#seznam-ukolu li:not(:first-child){margin-top:-5px}
#seznam-ukolu li input{flex:1;min-width:0}
#seznam-ukolu li button{margin-left:-5px}

.radek{display:flex}
.radek input{flex:1;min-width:0}
.radek button{margin-left:-5px}

.mrizka{display:flex}
.mrizka input{flex:1;min-width:0}
.mrizka input:not(:first-child),.mrizka button{margin-left:-5px}

#btn-zavrit-nastaveni{align-self:flex-start}

/* ---------- uzsi obrazovky ---------- */

@media only screen and (max-width:860px){
  #obsah{grid-template-columns:1fr}
  .zpravy{max-height:44vh}
  .mrizka{flex-direction:column}
  .mrizka input:not(:first-child),.mrizka button{margin-left:0;margin-top:-5px}
  .mrizka button{width:100%}
}

@media only screen and (max-width:560px){
  .navigace{flex-wrap:wrap}
  .navigace .tyden{flex:1 1 100%;margin-left:0;order:-1}
  .navigace #tyden-zpet{margin-left:0}
  .navigace>button{margin-top:-5px}
  .navigace #tyden-dnes{flex:1}
  #hud{gap:15px}
  .ucet{flex-wrap:wrap}
  #seznam-ukolu li{flex-wrap:wrap}
  #seznam-ukolu li input{flex:1 1 100%}
  #seznam-ukolu li button{flex:1;margin-top:-5px}
  #seznam-ukolu li button:first-of-type{margin-left:0}
  .radek{flex-wrap:wrap}
  .radek input{flex:1 1 100%}
  .radek button{flex:1;margin-left:0;margin-top:-5px}
  #chat-form{flex-wrap:wrap}
  #chat-form textarea{flex:1 1 100%}
  #chat-form button{flex:1;margin-left:0;margin-top:-5px}
}

@media only screen and (max-width:500px){
  body{padding:15px}
  h1{font-size:30px}
  .brand{font-size:20px}
  .zpravy{max-height:40vh}
}