:root {
  color-scheme: light dark;
  --pozadi: #ffffff;
  --pozadi-2: #f4f5f7;
  --pozadi-3: #e9ecf0;
  --text: #1a1c1e;
  --text-tlumeny: #5c6470;
  --ram: #d9dde3;
  --hlavni: #1976d2;
  --agent: #6d4c41;
  --vlastni: #00695c;
  --chyba: #c62828;
  --bezi: #f9a825;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadi: #16181c;
    --pozadi-2: #1e2127;
    --pozadi-3: #272b33;
    --text: #e6e8ea;
    --text-tlumeny: #9aa3ad;
    --ram: #2c313a;
    --hlavni: #64b5f6;
  }
}

* { box-sizing: border-box; }

/* MUSÍ být tady a s !important.
 *
 * Atribut `hidden` má jen `display: none` s nízkou specificitou, takže
 * ho přebije jakékoli vlastní pravidlo nastavující display - třeba
 * `.prihlaseni { display: grid }`. Bez tohohle zůstalo přihlašovací
 * okno viset nad odemčenou aplikací. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--pozadi);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.2rem; margin: 0; }
h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: .9rem; margin: .75rem 0 .4rem; }

code { background: var(--pozadi-2); padding: .1em .35em; border-radius: 3px; font-size: .9em; }
.popis { color: var(--text-tlumeny); font-size: .875rem; margin: .25rem 0 .75rem; }
.chyba { color: var(--chyba); font-size: .875rem; }

/* --- Ovládací prvky ---
 *
 * font-size 16px na vstupech je POVINNÉ. Safari na iOS při focusu
 * přiblíží stránku, kdykoli je písmo menší - a zpátky se neoddálí.
 * Tohle je jediný spolehlivý způsob, jak tomu zabránit, aniž by se
 * zakázal zoom (což by bylo nepřístupné). */
button, input, select, textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--pozadi);
  border: 1px solid var(--ram);
  border-radius: 8px;
  padding: .45rem .7rem;
  min-height: 2.4rem;
}
button {
  cursor: pointer;
  background: var(--hlavni);
  color: #fff;
  border-color: transparent;
  font-size: .9rem;
  white-space: nowrap;
}
button:active { transform: translateY(1px); }
button.tise { background: transparent; color: var(--text-tlumeny); border-color: var(--ram); }
button.nebezpecne { background: var(--chyba); }
button.ikona { padding: .45rem .6rem; }
button[disabled] { opacity: .5; cursor: default; }
textarea { width: 100%; resize: vertical; min-height: 6rem; line-height: 1.5; }
input[type="search"] { min-width: 8rem; }
.roste { flex: 1; min-width: 6rem; }

/* --- Přihlášení --- */
.prihlaseni { display: grid; place-items: center; min-height: 100dvh; padding: 1rem; }
.prihlaseni form {
  display: grid;
  gap: .75rem;
  width: min(22rem, 100%);
  padding: 1.75rem;
  background: var(--pozadi-2);
  border: 1px solid var(--ram);
  border-radius: 12px;
}
.prihlaseni label { display: grid; gap: .25rem; font-size: .85rem; color: var(--text-tlumeny); }
.prihlaseni h1 { font-size: 1.6rem; letter-spacing: -.02em; }

/* --- Kostra --- */
header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--ram);
  background: var(--pozadi-2);
  position: sticky;
  top: 0;
  z-index: 3;
}
.logo { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
header nav { display: flex; gap: .2rem; }
nav button { background: transparent; color: var(--text-tlumeny); padding: .4rem .6rem; }
nav button.aktivni { background: var(--hlavni); color: #fff; }
header #menu { margin-left: auto; }

main { padding: 1rem .9rem 3rem; max-width: 74rem; margin: 0 auto; }

.pruh-projektu {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .55rem .9rem;
  border-bottom: 1px solid var(--ram);
  overflow-x: auto;
}
.pruh-projektu select { flex: 1; min-width: 9rem; max-width: 22rem; }

.radek-ovladani { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.celkem { margin-left: auto; font-weight: 600; font-size: 1rem; }
.prepinac { display: flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--text-tlumeny); }
.prepinac input { width: auto; min-height: auto; }

/* --- Běžící časovač --- */
.casovac-pruh { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.casovac {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .5rem;
  background: var(--bezi);
  color: #000;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
}
.casovac button {
  background: rgba(0, 0, 0, .25);
  color: #fff;
  padding: .1rem .4rem;
  min-height: auto;
  font-size: .75rem;
  border-radius: 999px;
}
.casovac.dlouho { background: var(--chyba); color: #fff; }

/* --- Tabulky ---
 *
 * Obal s vlastním posuvníkem: na mobilu se tabulka nevejde a bez něj
 * by přetekla ven ze stránky. */
.posuvnik { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: .5rem; }
.tabulka { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 34rem; }
.tabulka th, .tabulka td { text-align: left; padding: .45rem .55rem; border-bottom: 1px solid var(--ram); white-space: nowrap; }
.tabulka th { color: var(--text-tlumeny); font-weight: 600; font-size: .78rem; }
.tabulka .cislo { text-align: right; font-variant-numeric: tabular-nums; }
.tabulka tbody tr.klikaci { cursor: pointer; }
.tabulka tbody tr.klikaci:active { background: var(--pozadi-2); }

.znacka {
  display: inline-block;
  padding: .05rem .4rem;
  border-radius: 4px;
  font-size: .72rem;
  background: var(--pozadi-3);
  color: var(--text-tlumeny);
  white-space: nowrap;
}
.znacka.agent { color: #fff; background: var(--agent); }
.znacka.vlastni { color: #fff; background: var(--vlastni); }
.znacka.tag { background: var(--hlavni); color: #fff; }
.znacka.stav-bezi { background: var(--bezi); color: #000; }
.znacka.stav-hotovo { background: #2e7d32; color: #fff; }
.znacka.stav-ceka_na_odpoved { background: #7cb342; color: #000; }
.znacka.zive { background: var(--bezi); color: #000; font-weight: 600; }

/* --- Úkoly --- */
.ukoly { display: grid; gap: .45rem; }
.ukol {
  padding: .65rem .8rem;
  background: var(--pozadi-2);
  border: 1px solid var(--ram);
  border-left: 3px solid var(--ram);
  border-radius: 8px;
}
.ukol:active { background: var(--pozadi-3); }
.ukol.stav-hotovo, .ukol.stav-zruseno { opacity: .55; }
.ukol.stav-bezi { border-left-color: var(--bezi); }
.ukol.stav-ceka_na_odpoved { border-left-color: #7cb342; }
.ukol.stav-hotovo { border-left-color: #2e7d32; }

.ukol-hlava { display: flex; align-items: center; gap: .5rem; }
.ukol-nazev { flex: 1; min-width: 0; cursor: pointer; }
.ukol-nazev strong { font-weight: 600; }
.ukol-nazev .doplnek { color: var(--text-tlumeny); font-size: .85rem; display: block; }
.ukol-meta { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; }

/* Stav se mění rovnou v seznamu - je to nejčastější úkon a otevírat
   kvůli němu dialog by bylo zdržení.

   font-size 16px i tady, přestože to prvek zvětší. Menší písmo vypadá
   líp, ale Safari na iOS při focusu přiblíží stránku a zpátky se
   neoddálí - a tenhle select je nově na výchozí obrazovce, takže by na
   to Tomáš narážel několikrát denně. max-width je proto širší, aby se
   do něj vešlo i "Čeká na odpověď". */
.stav-vyber { font-size: 16px; padding: .2rem .4rem; min-height: auto; max-width: 12rem; }

.puntik { width: .55rem; height: .55rem; border-radius: 50%; background: transparent; flex: none; }
.priorita-vysoka { background: #c62828; }
.priorita-stredni { background: #ef6c00; }
.priorita-nizka { background: #00acc1; }

.podukoly { margin: .5rem 0 0 .7rem; display: grid; gap: .35rem; }
.ukol.podukol { background: var(--pozadi); }

/* --- Přehled ---
 *
 * Sekce jsou bloky pod sebou, ne tabulka: na mobilu se čtou bez
 * vodorovného posouvání a karta úkolu je tu stejná jako v seznamu. */
.prehled { display: grid; gap: 1.15rem; }
.prehled-sekce { display: grid; gap: .45rem; }
.prehled-nadpis {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .95rem;
}
.prehled-nadpis .znacka { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Po termínu má bít do očí. Prošlý úkol je jediná věc na téhle
   obrazovce, kterou nejde odložit tím, že se přehlédne. */
.prehled-sekce.naleha .prehled-nadpis { color: var(--chyba); }
.prehled-sekce.naleha .prehled-nadpis .znacka { background: var(--chyba); color: #fff; }
.prehled-sekce.naleha .ukol { border-left-color: var(--chyba); }
.prehled-sekce.bezi .prehled-nadpis .znacka { background: var(--bezi); color: #000; }
.prehled-sekce.dnes .prehled-nadpis .znacka { background: var(--hlavni); color: #fff; }

.ukol-projekt { display: block; font-size: .75rem; color: var(--text-tlumeny); }
.znacka.skupina { background: transparent; border: 1px solid var(--ram); }

.orez {
  margin: 0 0 .9rem;
  padding: .5rem .7rem;
  font-size: .82rem;
  background: var(--pozadi-2);
  border: 1px solid var(--ram);
  border-left: 3px solid var(--bezi);
  border-radius: 6px;
}

/* --- Karty přístupů --- */
.karty { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.karta { padding: .85rem .95rem; background: var(--pozadi-2); border: 1px solid var(--ram); border-radius: 10px; }
.karta h3 { margin: 0 0 .4rem; }
.karta dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; margin: 0; font-size: .85rem; }
.karta dt { color: var(--text-tlumeny); }
.karta dd { margin: 0; word-break: break-all; }
.karta .akce { margin-top: .6rem; display: flex; gap: .4rem; }
.karta button { padding: .25rem .55rem; font-size: .8rem; min-height: auto; }
.heslo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- Dialogy --- */
dialog {
  border: 1px solid var(--ram);
  border-radius: 14px;
  background: var(--pozadi);
  color: var(--text);
  padding: 1.15rem;
  width: min(34rem, 94vw);
  max-height: 88dvh;
  overflow-y: auto;
}
dialog::backdrop { background: rgba(0, 0, 0, .5); }
dialog form { display: grid; gap: .55rem; }
dialog label { display: grid; gap: .2rem; font-size: .82rem; color: var(--text-tlumeny); }
.dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.tlacitka { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; flex-wrap: wrap; }
.tlacitka .nebezpecne { margin-right: auto; }
.komentare { display: grid; gap: .45rem; max-height: 11rem; overflow-y: auto; margin-bottom: .4rem; }
.komentar { padding: .4rem .55rem; background: var(--pozadi-2); border-radius: 6px; font-size: .85rem; }

/* --- Hláška --- */
.hlaska {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  padding: .6rem 1rem;
  background: var(--text);
  color: var(--pozadi);
  border-radius: 999px;
  font-size: .875rem;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.hlaska.spatne { background: var(--chyba); color: #fff; }

/* --- Mobil --- */
@media (max-width: 640px) {
  header { flex-wrap: wrap; padding: .5rem .7rem; gap: .4rem .5rem; }
  header nav { order: 3; width: 100%; }
  /* `flex: 1` (základ 0) tady být nesmí: tlačítka mají `white-space:
     nowrap`, takže se pod svoji šířku nestlačí a čtvrtá záložka by
     vystrčila lištu ven ze stránky. S `auto` se rozdělí jen přebytek. */
  header nav button { flex: 1 1 auto; }
  .casovac-pruh { order: 4; width: 100%; }
  main { padding: .8rem .7rem 3rem; }
  .pruh-projektu { padding: .5rem .7rem; }
  .dvojice { grid-template-columns: 1fr; }
  .celkem { width: 100%; margin-left: 0; text-align: right; }
  dialog { width: 100vw; max-width: 100vw; max-height: 92dvh; border-radius: 14px 14px 0 0; margin: auto auto 0; }
  .karty { grid-template-columns: 1fr; }
}