/* ===== Aktualizace 2.0 – Kalendář =====
 * Načítá se AŽ za screens.css, takže tady stačí stejná specificita, aby se
 * původní pravidla .pl-week-* přebila. Do screens.css se záměrně nesahá.
 */

/* --- BOD 15: přepínač zobrazení týdne (Mřížka / Seznam) --- */
/* Vzhledově vychází ze .sub-nav / .sub-btn, ale je nižší, ať to nevypadá jako
 * druhá hlavní navigace pod tou pohledovou. */
.pl-week-prep {
  display: flex; gap: 6px; margin: 0 0 12px; padding: 4px;
  background: var(--surface-raised); border: 1px solid var(--border-hairline);
  border-radius: var(--r-md);
}
.pl-week-prep-btn {
  flex: 1; min-height: 38px; padding: 8px 4px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--muted); font-family: inherit; font-size: 13px;
  font-weight: 510; cursor: pointer;
  transition: background .15s ease-out, color .15s ease-out;
}
.pl-week-prep-btn:hover { color: var(--text); }
.pl-week-prep-btn.aktivni { background: var(--surface-control); color: var(--text); }

/* --- BOD 15: Týden → Mřížka --- */
/* Širší mřížka: po odečtení osy zbylo dřív ~64 px na den a do bloku se nevešlo
 * ani jedno slovo. Vodorovný scroll (.pl-week-scroll) už existoval. */
.pl-week-grid { min-width: 700px; }
@media (max-width: 430px) { .pl-week-grid { min-width: 640px; } }

/* PC: Kalendář dostane víc šířky než ostatní „úzké" obrazovky (screens.css mu
 * dává 740px = po odečtení paddingu ~628px obsahu). Sedmý sloupec (neděle) by
 * se jinak schoval za vodorovný scroll a týden by na velkém monitoru vypadal
 * useknutě. Cap 1040px drží symetrické okraje i na širokých displejích. */
@media (min-width: 820px) {
  #screen[data-tab="kalendar"] { max-width: 1040px; }
  .pl-week-grid { min-width: 0; }
}

/* Hodinová osa se při vodorovném scrollu drží u levého okraje – jinak uživatel
 * po odscrollování nevidí, kolik je v tom sloupci hodin. */
.pl-week-osa, .pl-week-rohbunka, .pl-week-celyden-lbl {
  position: sticky; left: 0; z-index: 4; background: var(--bg);
}
.pl-week-rohbunka { z-index: 7; }
.pl-week-osa-h { font-size: 11px; }

/* Sloupec je jen position:relative (screens.css), takže NEDĚLÁ stacking context
 * a jeho potomci soutěží s osou přímo: čára „teď" (z-index 5) i odznak „+N"
 * (z-index 6) osu přebily a po odscrollování doprava běžely přes čísla hodin.
 * isolation uzavře ty z-indexy dovnitř sloupce – lepší než osu jen přečíslovat,
 * protože příští blok se z-indexem uvnitř sloupce ji už nemá jak přebít. */
.pl-week-sloupec { isolation: isolate; }

/* Pruh „Celý den" NAD mřížkou (stejné sloupce jako .pl-week-telo). Dřív byly
 * celodenní chipy uvnitř sloupce a překrývaly první hodinu. */
.pl-week-celyden {
  display: grid; grid-template-columns: 38px repeat(7, 1fr); gap: 4px;
  align-items: start; padding-bottom: 6px;
}
.pl-week-celyden-lbl {
  font-size: 10px; line-height: 1.7; color: var(--muted);
  text-align: right; padding-right: 4px;
}
.pl-week-celyden-bunka { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Celodenní pilulka: bez position/margin z původního pravidla (patřilo do sloupce). */
.pl-week-cele {
  position: static; margin: 0; padding: 3px 6px;
  font-size: 11px; font-weight: 600; line-height: 1.3;
}

/* Blok události: inline left/width počítá rozvrhniSloupce() podle překryvů,
 * proto musí `right` přestat platit – jinak by se šířka ignorovala a bloky by
 * dál ležely přes sebe. */
.pl-week-blok {
  right: auto; padding: 3px 5px; font-size: 11px; font-weight: 600; line-height: 1.25;
  white-space: normal; display: flex; flex-direction: column; gap: 1px;
}
.pl-week-blok-nazev {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.pl-week-blok-cas { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }

/* Odznak „+N" = události, které se do sloupců nevešly (klik → denní pohled).
 * Musí být nad absolutně pozicovanými bloky, jinak ho překryjí. */
.pl-week-blok-vic {
  position: absolute; top: 1px; right: 2px; z-index: 6;
  padding: 0 4px; border-radius: 6px; font-size: 9.5px; font-weight: 700;
  background: var(--surface-control, var(--card2)); color: var(--text); cursor: pointer;
}
/* stejný odznak v pruhu „Celý den" (tam je to normální tlačítko v proudu) */
.pl-week-vic {
  border: 0; border-radius: 6px; padding: 2px 6px; text-align: left;
  background: var(--surface-control, var(--card2)); color: var(--muted);
  font-family: inherit; font-size: 10px; font-weight: 700; cursor: pointer;
}

/* --- BOD 15: Týden → Seznam (agenda po dnech) --- */
/* Na 375px displeji je tohle jediné čitelné zobrazení dne s víc událostmi –
 * každá událost dostane celou šířku obrazovky. */
.pl-week-agenda { display: flex; flex-direction: column; gap: 10px; }
.pl-week-agenda-den {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
/* dnešek: accent rámeček + jemně podbarvená hlavička (stejný vzor jako .pl-mcell.dnes) */
.pl-week-agenda-den.dnes { border-color: var(--accent); }
.pl-week-agenda-den.dnes .pl-week-agenda-hl {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.pl-week-agenda-hl {
  width: 100%; min-height: 44px; padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  border: 0; background: none; color: var(--text); cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; text-align: left;
}
.pl-week-agenda-hl .ic { color: var(--muted); }
.pl-week-agenda-pocet {
  margin-left: auto; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pl-week-agenda-volno { padding: 0 12px 12px; font-size: 13px; font-style: italic; }
.pl-week-agenda-radek {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 9px 12px; border-top: 1px solid var(--line);
  border-left: 3px solid var(--pl-barva, var(--accent));
  cursor: pointer; transition: background .15s ease-out;
}
.pl-week-agenda-radek:hover { background: var(--card2); }
.pl-week-agenda-radek.done { opacity: .55; }
.pl-week-agenda-radek.done .pl-week-agenda-nazev { text-decoration: line-through; }
.pl-week-agenda-cas {
  flex: 0 0 auto; min-width: 74px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pl-week-agenda-ikona { flex: 0 0 auto; font-size: 15px; }
.pl-week-agenda-nazev {
  flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* jemný nájezd agendy stejně jako u ostatních pohledů kalendáře */
.pl-week-agenda { animation: anim-pl-in .2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .pl-week-agenda { animation: none !important; }
  .pl-week-prep-btn, .pl-week-agenda-radek { transition: none !important; }
}

/* ===== Kalendář na PC (dávka B) ================================== */

/* --- C: nápověda k rychlému přidání jen při psaní --- */
/* Odstavec s příklady („zítra", „pá"…) se vykresloval pod polem POKAŽDÉ, když
 * byl otevřený denní pohled. Pro denního uživatele je to balast a na telefonu
 * ukrojí dva řádky nad timeline. Text zůstává v DOM (input na něj ukazuje přes
 * aria-describedby), jen se vizuálně objeví až při fokusu v poli.
 * Selektor sedí na pořadí v planner.js: .pl-rychle a hned za ním .pl-rychle-hint. */
.pl-rychle-hint { display: none; }
.pl-rychle:focus-within + .pl-rychle-hint {
  display: block;
  animation: anim-pl-in .18s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .pl-rychle:focus-within + .pl-rychle-hint { animation: none !important; }
}

/* --- D: náhled nové události při tažení myší ve sloupci týdne --- */
/* Vykresluje pripojTazeniNova() ve views.js. pointer-events:none, ať náhled
 * nepřebírá pointermove ani závěrečný klik. */
.pl-week-nova {
  position: absolute; left: 2px; right: 2px; z-index: 3;
  border-radius: var(--r-sm); pointer-events: none; overflow: hidden;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--accent) 26%, var(--card));
  border: 1px solid var(--accent);
  color: var(--text); font-size: 10px; font-weight: 700; line-height: 1.3;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (min-width: 820px) {
  /* --- A: přepínač Mřížka/Seznam je berlička úzkého displeje --- */
  /* Na monitoru je mřížka vždycky lepší, druhá lišta pod pohledovou navigací jen
   * mate. Režim natvrdo vrací rezimTydne() ve views.js (stejná hranice 820px);
   * uložená volba v localStorage se nemaže, mobilu zůstane jeho „Seznam". */
  .pl-week-prep { display: none; }

  /* --- B: nižší hodina v denním pohledu --- */
  /* Se 64px se do okna vešlo ~7,5 hodiny a den se musel scrollovat. 44px ukáže
   * skoro celý den najednou. MUSÍ sedět s PXH_PC ve views.js (JS počítá pozice
   * bloků v px z minut), jinak bloky přestanou sedět na linkách. */
  .pl-hod { height: 44px; }

  /* Blok úkolu je pak nižší → sevřenější vnitřní rozestupy, ať se název i čas
   * vejdou. Rozpočet hodinového bloku (40 px = 44 − 4 px mezera):
   * 2 rámeček + 6 padding + 16,3 řádek názvu + 1 + 13,2 čas = 38,5 px.
   * Kdo tyhle hodnoty mění, ať přepočítá i prahy zobrazCas/minVyska ve views.js.
   * Dotykové cíle to nezmenšuje – klikací je celá karta, ne její padding. */
  .pl-task { padding: 3px 10px 3px 13px; }
  .pl-task .pl-t-h { font-size: 13px; line-height: 1.25; }
  .pl-task .pl-check { width: 16px; height: 16px; }
  .pl-task .pl-t-cas { margin-top: 1px; font-size: 11px; line-height: 1.2; }
  .pl-start-trenink { margin-top: 2px; min-height: 22px; padding: 2px 9px; }
}