/* Jednotný styl celé appky. Stavové barvy: zelená = vyřešeno,
   oranžová = špatný pokus, modrá = zatím neřešeno. */
:root {
  --green: #c4ffd5;
  --blue: #e5f0ff;
  --orange: #ffe4b2;
  --red: #ffd2d2;
  --main: #232323;
  --accent: #0074d9;
  --radius: 0.7em;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: #fafcff;
  color: var(--main);
}

/* --- hlavička + navigace --- */
header {
  background: linear-gradient(120deg, var(--accent), #00b3d9);
  color: #fff;
  padding: 0.9em 1.2em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5em;
}
header h1 { margin: 0; font-size: 1.5em; }
header a { color: #fff; text-decoration: none; }
header nav { display: flex; gap: 1.1em; font-weight: 600; align-items: baseline; flex-wrap: wrap; }
header nav a:hover { text-decoration: underline; }
.nav-tym { opacity: 0.9; font-weight: 400; }
header nav form { margin: 0; }
.linkbtn {
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

main { max-width: 900px; margin: 1.5em auto 3em auto; padding: 0 1em; }

.flash {
  background: var(--orange);
  border-radius: var(--radius);
  padding: 0.6em 1em;
  font-weight: 600;
}
.konec-banner {
  background: gold;
  border-radius: var(--radius);
  padding: 0.6em 1em;
  font-weight: 600;
}

/* --- karty --- */
.card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 8px #0002;
  padding: 1em 1.3em;
  margin-bottom: 1.2em;
  overflow-x: auto;
}
.card h2 { margin: 0.1em 0 0.6em 0; font-size: 1.25em; }
.card h3 { margin: 0.8em 0 0.3em 0; font-size: 1em; }
.card pre { background: #f4f7fb; border-radius: 0.4em; padding: 0.6em 0.8em; white-space: pre-wrap; margin: 0.3em 0; }

.login-card, .start-card { max-width: 480px; margin: 3em auto; text-align: center; }
.login-card form, .start-card form { justify-content: center; }
.drobek { font-size: 0.85em; color: #667; }
.chyba { color: #c00; font-weight: 600; }
.ok-badge { color: #157347; font-weight: 600; }

/* --- karta šifry --- */
.sifra-card { border-left: 6px solid var(--blue); }
.okraj-vyreseno { border-left-color: #3fbf6f; }
.okraj-spatne { border-left-color: #f0a830; }
.okraj-vzdano { border-left-color: #9aa5b1; }
.vzdano-badge { color: #667; font-weight: 600; }
.sifra-hlava { display: flex; align-items: baseline; gap: 0.9em; flex-wrap: wrap; }
.sifra-hlava h2 { margin: 0; }
.pokusy { font-family: monospace; color: #667; letter-spacing: 2px; }
.hlava-odkazy { margin-left: auto; display: flex; gap: 0.9em; }
.akce { display: flex; gap: 0.6em; flex-wrap: wrap; margin-top: 0.7em; }
.akce form { margin: 0; }

/* --- formuláře --- */
form.radek { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; margin: 0.6em 0; }
form.radek input[type="text"], form.radek input[type="password"] { flex: 1; min-width: 10em; }
input[type="text"], input[type="password"], select {
  font-size: 1em;
  border: 1px solid #c5d1e2;
  border-radius: 0.4em;
  padding: 0.5em 0.7em;
  background: #f4f7fb;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}
button {
  font-size: 1em;
  padding: 0.45em 1em;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: #005fa3; }
button.big { font-size: 1.3em; padding: 0.7em 2em; letter-spacing: 1px; }
button.sekundarni { background: #eef2f7; color: var(--main); }
button.sekundarni:hover { background: #dde5ee; }
button.mini { padding: 0.15em 0.6em; font-size: 0.85em; background: #e05555; }
button.mini:hover { background: #c03d3d; }

/* --- tabulky --- */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #e1e6ef; padding: 0.45em 0.8em; text-align: center; }
th { background: #f5f8fa; }
td.tym { text-align: left; font-family: monospace; font-weight: 600; }

.bar {
  position: relative;
  background: var(--blue);
  border-radius: 0.4em;
  height: 1.25em;
  min-width: 90px;
  overflow: hidden;
}
.bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  opacity: 0.75;
}
.bar > b {
  position: relative;
  font-size: 0.85em;
  line-height: 1.5em;
}

/* --- časová osa --- */
.timeline-row { display: flex; align-items: center; gap: 0.7em; margin: 0.35em 0; }
.timeline-row .tym { width: 7em; text-align: right; font-family: monospace; font-weight: 600; flex-shrink: 0; }
.timeline-track {
  position: relative;
  flex: 1;
  height: 1.4em;
  background: var(--blue);
  border-radius: 0.7em;
}
.mark {
  position: absolute;
  top: 50%;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #0003;
}
.mark.start { background: #23a8e0; }
.mark.solve { background: #3fbf6f; }
.mark.fail { background: #e05555; width: 0.45em; height: 0.45em; }
.mark.hint { background: #f0a830; }
.mark.postup { background: #b06fd9; }
.mark.vzdat { background: #9aa5b1; }
.mark.win { background: gold; width: 1em; height: 1em; border-color: #b8860b; }
.timeline-legend { display: flex; flex-wrap: wrap; gap: 1em; font-size: 0.9em; margin-top: 0.7em; }
.timeline-legend .mark { position: static; display: inline-block; transform: none; margin-right: 0.3em; vertical-align: middle; }
.timeline-span { display: flex; justify-content: space-between; font-size: 0.85em; color: #667; margin-top: 0.3em; }

/* --- feed --- */
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { padding: 0.35em 0.2em; border-bottom: 1px solid #eef1f6; display: flex; gap: 0.8em; align-items: baseline; }
.feed time { font-size: 0.85em; color: #667; white-space: nowrap; font-family: monospace; }
.chip {
  display: inline-block;
  padding: 0.05em 0.55em;
  border-radius: 1em;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}
.chip.start { background: var(--blue); }
.chip.solve { background: var(--green); }
.chip.fail { background: var(--red); }
.chip.hint, .chip.postup { background: var(--orange); }
.chip.vzdat { background: #e8ebef; }
.chip.win { background: gold; }
.chip.org { background: var(--orange); }
.chip.tym { background: var(--green); }

/* --- chat --- */
.chat-thread { display: flex; flex-direction: column; gap: 0.45em; margin-bottom: 0.8em; }
.bubble { max-width: 85%; padding: 0.45em 0.85em; border-radius: 0.8em; }
.bubble.cizi { align-self: flex-start; background: var(--blue); border-bottom-left-radius: 0.2em; }
.bubble.moje { align-self: flex-end; background: var(--green); border-bottom-right-radius: 0.2em; }
.bubble .meta { font-size: 0.8em; color: #556; margin-bottom: 0.15em; display: flex; gap: 0.7em; align-items: baseline; }
.bubble .meta form { margin: 0; }

tr.bez-ceny { background: var(--orange); }

.filtr { display: flex; gap: 0.7em; flex-wrap: wrap; margin-bottom: 0.7em; font-size: 0.95em; }
.filtr a { color: var(--accent); text-decoration: none; padding: 0.1em 0.5em; border-radius: 1em; }
.filtr a.aktivni { background: var(--accent); color: #fff; }

/* --- přehledová tabulka šifer --- */
.sifry-tabulka td { padding: 0; }
.sifry-tabulka td.nazev { text-align: left; }
.sifry-tabulka td.nazev a {
  display: block;
  padding: 0.7em 1em;
  font-weight: 600;
  color: var(--main);
  text-decoration: none;
}
.sifry-tabulka td.pokusy, .sifry-tabulka td:last-child { padding: 0.7em 1em; font-family: monospace; letter-spacing: 2px; }
.sifry-tabulka td:last-child a { text-decoration: none; }
.sifry-tabulka tr.stav-vyreseno { background: var(--green); }
.sifry-tabulka tr.stav-spatne { background: var(--orange); }
.sifry-tabulka tr.stav-neryseno { background: var(--blue); }
.sifry-tabulka tr.stav-vzdano { background: #e8ebef; }

.sipka { float: right; color: #8899aa; font-weight: 400; }

/* --- zadání na stránce šifry --- */
.pdf-odkaz {
  display: inline-block;
  background: #eef2f7;
  border-radius: var(--radius);
  padding: 0.5em 1em;
  font-weight: 600;
  color: var(--main);
  text-decoration: none;
}
.pdf-odkaz:hover { background: #dde5ee; }

/* zpráva orgů v chatu k šifře */
.bubble.org { background: var(--orange); }

@media (max-width: 600px) {
  .sifra-hlava { gap: 0.5em; }
  .hlava-odkazy { margin-left: 0; }
  .bubble { max-width: 95%; }
}