/* 🎨 VZHLED UČITELSKÉHO ROZHRANÍ — ZÁKLAD + paleta „Světlá" (výchozí).
 *
 * Předloha: `Dashboard skoly.dc.html` od grafika a schválená klikací maketa
 * `templates/admin_navrh_vzhled.html` (/admin/navrh-vzhled). Zelenobílá plocha,
 * bílé karty s měkkým stínem, Nunito na nadpisy a čísla, Inter na text.
 *
 * 🎨 DVĚ PALETY (Honza 6. 9. 2026: „přepínač vzhledů v nastavení učitele").
 * Tenhle soubor je ZÁKLAD — tvary, rozvržení, typografie — a zároveň nese hodnoty
 * palety „Světlá", kterou dnes učitelé znají. Druhá paleta („Teplá", od Bětky:
 * zelený levý sloupec, hnědá lišta, krémové karty) žije v samostatném
 * `static/ucitel-vzhled-tepla.css` a JEN PŘEBÍJÍ PROMĚNNÉ — žádné pravidlo se
 * nekopíruje. Kdo si ji v /teacher/ucet nezvolí, ten její soubor vůbec nestáhne,
 * takže dnešní vzhled se přepínačem nemůže rozbít.
 * ⚠️ Barvy se proto v pravidlech smí brát VÝHRADNĚ z proměnných (bloky 1–3).
 * Napevno zapsaný hex nebo rgba v pravidle = díra, kterou teplá paleta nepřebarví;
 * na stíny je proto proměnná `--stin` (trojice RGB do `rgba(var(--stin), …)`).
 * Hlídá to `tests/test_vzhled_ucitele.py`.
 *
 * ⚠️ PROČ TENHLE SOUBOR EXISTUJE — a proč v něm nejsou přepsané šablony:
 * v šablonách je ~2600 pevných Tailwind barev a `static/paleta.css` je přemapovává
 * na proměnné palety. Nový vzhled se proto dělá STEJNĚ: přenastaví se proměnné,
 * šablony zůstanou. Tenhle soubor se navíc vkládá JEN NA UČITELSKÝCH STRÁNKÁCH
 * (base.html ho linkuje pod stejnou podmínkou, pod jakou dává `<html class="zn-ucitel">`),
 * takže:
 *   • ŽÁKOVSKÁ HRA se nezmění ani o pixel — soubor se jí vůbec nenačte,
 *   • ADMIN rozhraní (admin_base.html) taky ne — má vlastní shell.
 *
 * Selektory jsou `html.zn-ucitel:not(.dark)` / `html.zn-ucitel.dark`, aby přebily
 * `:root` i `html.dark` z paleta.css bez ohledu na pořadí souborů (specificita 0,2,1).
 * TMAVÝ REŽIM musí fungovat dál a je NEZÁVISLÝ na volbě palety: obě palety mají
 * vlastní světlou i tmavou podobu (matice 2×2).
 */

/* ─────────────────────────────────────────────────────────────────────────
   1) SVĚTLÁ PALETA UČITELE — paleta „Světlá", světlý režim
   ───────────────────────────────────────────────────────────────────────── */
html.zn-ucitel:not(.dark) {
  --page: #FBFDFC;           /* plocha stránky — zesvětleno 9. 9. 2026 */
  --card: #FFFFFF;           /* karty */
  --card-line: #E3ECE7;      /* linky a rámečky */
  --card-line-2: #DCE5E0;    /* tišší linka (pole, oddělovače) */

  --inset: #F1F7F4;          /* jemná ploška uvnitř karty */
  /* 🛟 Bublina protistrany v chatu podpory. Musí být zřetelně SVĚTLEJŠÍ než karta,
     na které leží (Honza 9. 9. 2026: „moje odpovědi zesvětlit, takhle to splývá").
     Ve „Světlé" je karta bílá, takže se bublina naopak jemně odliší plochou. */
  --zprava-cizi: var(--inset);
  --zprava-cizi-ram: var(--card-line-2);
  --inset-strong: #E3ECE7;   /* tmavší ploška uvnitř karty */

  /* Ztmaveno 9. 9. 2026 (Honza: „ztmav písmo všude"). Sekundární a tlumený text
     byly na hraně čitelnosti — teď mají na kartě 7,4:1 a 5,2:1. */
  --ink: #131A26;            /* text */
  --muted: #4B5565;          /* sekundární text */
  --faint: #6B7583;          /* tlumený text */
  --ink-2: #344054;          /* sekundární tmavší (nadpisy karet v předloze) */

  --green: #19A56F;
  --green-dark: #11855A;
  --green-strong: #19A56F;
  --green-soft: #DDF5EA;     /* zelené informační pole */
  --green-faint: #F1F9F5;    /* nejjemnější zelený panel */
  --green-ram: #C8EBDA;      /* zelený rámeček */

  --btn: var(--green);
  --btn-hover: var(--green-dark);
  --btn-ink: #FFFFFF;

  /* Horní lišta zůstává zelená (jako na přihlašovacích stránkách), jen v novém
     odstínu. Text je ČERNÝ: na #19A56F má kontrast 6,7:1, bílá jen 3,1:1. */
  --bar: var(--btn);
  --bar-ink: #000000;
  --subbar: #DDF5EA;
  --subbar-ink: #1D2433;
  --subbar-link: #0B6B47;    /* 5,7:1 na #DDF5EA */

  --ink-surface: #1D2433;    /* tmavá plocha (tlačítko „stáhnout vše") */
  --ink-surface-text: #FFFFFF;

  --tag: #F0B429;            /* odznak pásma / plná jantarová tlačítka */
  --tag-ink: #3B2A08;

  --amber-soft: #FCE7C7;
  --amber-ink: #B45309;

  --red-soft: #FEE4E2;
  --red-ink: #B42318;

  --info-bg: #DCEBFF;
  --info-ink: #1D4ED8;       /* 5,5:1 na #DCEBFF (samotná #3B82F6 by měla 3,0:1) */
  --info-line: #C6DDFC;
  --info-strong: #2563EB;    /* plné modré tlačítko — bílý text má 5,2:1 */
  --info-strong-hover: #1D4ED8;
  --info-strong-ink: #FFFFFF;

  --fial-soft: #EDE4FF;
  --fial-ink: #6D28D9;

  --okno-stin: rgba(16, 24, 40, .55);

  /* horní panel žáka (proměnné z paleta.css) — ať se učiteli neveze béžová */
  --avatar-bg: #DDF5EA;
  --bar-track: #E3ECE7;
  --panel-muted: #667085;
  --low-bg: #FEE4E2;  --low-ink: #B42318;
  --avg-bg: #FCE7C7;  --avg-ink: #B45309;
  --high-bg: #DCEBFF; --high-ink: #1D4ED8;
  --sezonni-bg: #FCE7C7; --sezonni-ram: #F5D9AE; --sezonni-text: #B45309;
}

/* ─────────────────────────────────────────────────────────────────────────
   2) TMAVÁ PALETA UČITELE
   Honza: „vyjdi z dnešní tmavé palety, jen slaď zelenou a tvary." Plochy, karty
   a text proto zůstávají přesně jako dnes (mají odzkoušený kontrast); mění se
   zelená rodina a doplňkové barvy, aby navazovaly na světlou variantu.
   ───────────────────────────────────────────────────────────────────────── */
html.zn-ucitel.dark {
  --card-line-2: var(--card-line);
  --ink-2: var(--ink);
  --zprava-cizi: var(--inset);
  --zprava-cizi-ram: var(--card-line-2);

  --green: #2FBF87;
  --green-dark: #6FDCAE;
  --green-strong: #2FBF87;
  --green-soft: #123326;
  --green-faint: #16261F;
  --green-ram: #27503E;

  --btn: #2FBF87;
  --btn-hover: #6FDCAE;
  --btn-ink: #04160F;        /* 8,9:1 na #2FBF87 */
  --bar: var(--btn);
  --bar-ink: #04160F;

  --amber-soft: #2E2312;
  --amber-ink: #F3C784;
  --red-soft: #33191A;
  --red-ink: #FDA29B;

  --info-bg: #17273C;
  --info-ink: #9CC3FF;
  --info-line: #24405F;
  --info-strong: #2B4FA8;
  --info-strong-hover: #3A64C8;
  --info-strong-ink: #F2F4FF;

  --fial-soft: #241D38;
  --fial-ink: #C9B4FF;
}

/* ─────────────────────────────────────────────────────────────────────────
   2b) ROLE BAREV LEVÉHO SLOUPCE A LIŠTY — společné oběma paletám

   Levý sloupec a horní lišta jsou jediná místa, kde se palety liší i ROLÍ barvy,
   ne jen odstínem: „Světlá" je má bílé jako karty, „Teplá" je maluje na plocho
   (zelený sloupec, hnědá lišta). Pravidla níž proto sahají jen sem a paleta
   rozhoduje, co se do proměnné dosadí.

   Hodnoty tady jsou ODKAZY na proměnné palety (`var(--card)`, `var(--ink)`…),
   takže platí pro světlý i tmavý režim naráz — nemá smysl je psát dvakrát.
   Specificita je 0,1,1, tedy nižší než u bloků 1 a 2 i než u teplé palety;
   ta je proto přebije bez ohledu na pořadí souborů.
   ───────────────────────────────────────────────────────────────────────── */
html.zn-ucitel {
  /* Stín: trojice RGB, ne hotová barva — teplá paleta si ho posune do hněda. */
  --stin: 16, 24, 40;

  --bok-bg: var(--card);            /* plocha levého sloupce */
  --bok-ram: var(--card-line);      /* jeho pravá hrana (teplá ji nemá — barva stačí) */
  --bok-text: var(--ink-2);         /* položky nabídky */
  --bok-tlum: var(--faint);         /* nadskupiny („VÝUKA", „ŠKOLA") */
  --bok-heslo: var(--green);        /* motto pod názvem */
  --bok-hover: var(--green-faint);  /* podbarvení pod myší */
  --bok-hover-ink: var(--green-dark);
  --bok-oddel: var(--card-line);    /* vodorovná linka mezi skupinami */
  --bok-akt-bg: var(--green-soft);  /* aktivní položka */
  --bok-akt-ink: var(--green-dark);

  --lista-bg: var(--card);          /* horní lišta (a pruh nad sloupcem s názvem) */
  --lista-spodek: var(--card-line); /* její spodní hrana */
  --lista-ink: var(--ink);          /* text a ikony v liště */
  --lista-tlum: var(--muted);       /* popisky v liště */
  --lista-pole: var(--card);        /* hledání a pilulka režimu v liště */
  --lista-line: var(--card-line-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   3) TYPOGRAFIE — nadpisy a čísla Nunito 700–800, běžný text Inter
   ───────────────────────────────────────────────────────────────────────── */
html.zn-ucitel {
  --pismo-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pismo-nadpis: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
/* 🔠 Honza 9. 9. 2026: „ztmav písmo všude a všude zvětši." Velikost se řídí
   JEDNÍM místem — kořenovým písmem učitelského rozhraní. Všechno ostatní je v rem
   (naše třídy i Tailwind), takže se zvětší celé rozhraní najednou a poměry zůstanou.
   Žákovská hra `zn-ucitel` nemá, takže se jí to netýká. */
html.zn-ucitel { font-size: 17.5px; }
html.zn-ucitel body { font-family: var(--pismo-text); }
/* Nadpisy a VELKÁ ČÍSLA. `font-extrabold`/`font-black` jsou v našich šablonách
   spolehlivý znak „tohle je nadpis nebo číslo", takže se nemusí přepisovat stovky
   tříd. Kód a přihlašovací kódy zůstávají monospace (výjimka níž). */
html.zn-ucitel h1, html.zn-ucitel h2, html.zn-ucitel h3, html.zn-ucitel h4,
html.zn-ucitel .font-extrabold, html.zn-ucitel .font-black,
html.zn-ucitel .zn-nadpis, html.zn-ucitel .zn-cislo-v,
html.zn-ucitel .ucitel-nazev, html.zn-ucitel .ucitel-start-nadpis,
html.zn-ucitel .panel-jmeno, html.zn-ucitel .panel-val, html.zn-ucitel .prijem-val {
  font-family: var(--pismo-nadpis);
  letter-spacing: -.01em;
}
html.zn-ucitel .font-mono, html.zn-ucitel code, html.zn-ucitel pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   4) TVARY — karty 14 px (velké 20–24), štítky 999 px, měkké stíny
   ───────────────────────────────────────────────────────────────────────── */
html.zn-ucitel .rounded-lg { border-radius: 10px; }
html.zn-ucitel .rounded-xl { border-radius: 14px; }
html.zn-ucitel .rounded-2xl { border-radius: 20px; }
html.zn-ucitel .rounded-3xl { border-radius: 24px; }
html.zn-ucitel .shadow { box-shadow: 0 2px 10px rgba(var(--stin), .04) !important; }
html.zn-ucitel .shadow-md, html.zn-ucitel .hover\:shadow-md:hover {
  box-shadow: 0 8px 24px rgba(var(--stin), .07) !important;
}
html.zn-ucitel .shadow-lg { box-shadow: 0 8px 24px rgba(var(--stin), .10) !important; }
html.zn-ucitel.dark .shadow { box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important; }
html.zn-ucitel.dark .shadow-md, html.zn-ucitel.dark .hover\:shadow-md:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
}
html.zn-ucitel.dark .shadow-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important; }

/* Fialová a syté červené tlačítko: paleta.css je posílá do modré/cihlové, protože
   pro celou hru stačí jedna informační barva. V učitelském vzhledu má předloha
   fialovou (štítek „testovací") i vlastní červenou, tak je sem vracíme. */
html.zn-ucitel .bg-violet-100, html.zn-ucitel .bg-purple-100,
html.zn-ucitel .bg-violet-50, html.zn-ucitel .bg-purple-50 { background-color: var(--fial-soft); }
html.zn-ucitel .text-violet-700, html.zn-ucitel .text-purple-700,
html.zn-ucitel .text-purple-800 { color: var(--fial-ink); }
html.zn-ucitel .bg-red-600, html.zn-ucitel .bg-red-700 { background-color: #DC2626; color: #fff; }
html.zn-ucitel .hover\:bg-red-700:hover { background-color: #B42318; }

/* Formulářová pole — tenká linka a stejný rádius jako karty (předloha).
   ⚠️ Zaškrtávátka a přepínače jsou z toho VEN: `border-radius: 10px` by z 16px
   čtverečku udělal kolečko a zaškrtávátko by vypadalo jako radio. */
html.zn-ucitel input:not([type="checkbox"]):not([type="radio"]),
html.zn-ucitel select, html.zn-ucitel textarea {
  border-color: var(--card-line-2);
  border-radius: 10px;
}
html.zn-ucitel input[type="checkbox"], html.zn-ucitel input[type="radio"] {
  border-color: var(--card-line-2);
}
html.zn-ucitel input:focus-visible, html.zn-ucitel select:focus-visible,
html.zn-ucitel textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 1px;
}

/* Dlaždice rozcestníku (třídy `ucitel-*` z paleta.css) v novém tvaru a stínu. */
html.zn-ucitel .ucitel-dlazdice { border-radius: 14px; box-shadow: 0 2px 10px rgba(var(--stin), .04); }
html.zn-ucitel .ucitel-dlazdice:hover { box-shadow: 0 8px 24px rgba(var(--stin), .07); }
html.zn-ucitel .ucitel-start { border-radius: 20px; }

/* ─────────────────────────────────────────────────────────────────────────
   5) ROZVRŽENÍ KLÍČOVÝCH OBRAZOVEK (Etapa 2)
   Vlastní třídy s prefixem `zn-` — schválně NE Tailwind utility, aby se
   netrefily do hlídače `tests/test_paleta_pokryti.py` a aby bylo na první
   pohled poznat, co je z nového vzhledu.
   ───────────────────────────────────────────────────────────────────────── */

/* ── uvítací pruh („Vítej zpět, Jano! 👋") ── */
.zn-uvitani {
  background: linear-gradient(180deg, var(--green-soft) 0%, var(--green-faint) 60%, var(--page) 100%);
  border-radius: 20px;
  padding: 1.6rem 1.5rem 1.4rem;
  margin-bottom: 1.25rem;
}
.zn-uvitani-radek { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.zn-uvitani h1 {
  font-family: var(--pismo-nadpis); font-weight: 800; font-size: 1.9rem;
  line-height: 1.15; color: var(--ink); margin: 0 0 .35rem;
}
.zn-uvitani p { margin: 0; font-size: .98rem; color: var(--muted); max-width: 46rem; }
.zn-uvitani-akce { margin-left: auto; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* ── pruh se třemi čísly ── */
.zn-cisla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem; margin-top: 1.15rem;
}
.zn-cislo {
  display: flex; align-items: center; gap: .8rem;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 14px;
  padding: .85rem 1rem; box-shadow: 0 2px 10px rgba(var(--stin), .04);
  text-decoration: none; color: inherit;
}
a.zn-cislo:hover { box-shadow: 0 8px 24px rgba(var(--stin), .07); border-color: var(--green-ram); }
.zn-terc {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: var(--green-soft);
}
.zn-terc--modra { background: var(--info-bg); color: var(--info-ink); }
.zn-terc--jantar { background: var(--amber-soft); color: var(--amber-ink); }
.zn-terc--fial { background: var(--fial-soft); color: var(--fial-ink); }
/* 🖊 Terč i dlaždice: čárová ikona bere barvu textu, tak jí ji dáme podle terče
   (maketa má ikony v barvě kolečka, ne černé). Emoji si barvu nese samo a tohle
   ho neovlivní, takže vypnutý přepínač vypadá jako dřív. */
.zn-terc { color: var(--green-dark); }
html.zn-ucitel .ucitel-ikona { display: flex; line-height: 1; margin-bottom: .3rem; color: var(--green); }
.zn-cislo-v { font-family: var(--pismo-nadpis); font-weight: 800; font-size: 1.6rem; line-height: 1.05; color: var(--ink); }
.zn-cislo-l { font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.zn-cislo-s { font-size: .74rem; color: var(--faint); }

/* ── nadskupina („Materiály a příprava") ── */
.zn-nadskupina {
  font-size: .69rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); margin: 0 0 .55rem;
}

/* ── třídy jako karty ── */
.zn-tridy { display: flex; flex-direction: column; gap: .65rem; }
.zn-trida {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 14px;
  padding: .95rem 1.15rem; text-decoration: none; color: inherit;
  box-shadow: 0 2px 10px rgba(var(--stin), .04);
  transition: box-shadow .12s, border-color .12s, transform .12s;
}
.zn-trida:hover { box-shadow: 0 8px 24px rgba(var(--stin), .07); border-color: var(--green-ram); transform: translateY(-1px); }
.zn-trida-hlava { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.zn-trida-jmeno { font-family: var(--pismo-nadpis); font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.zn-trida-pod { font-size: .8rem; color: var(--muted); margin-top: .18rem; }
.zn-trida-sipka { color: var(--green); font-size: 1.35rem; font-weight: 700; flex: none; }
.zn-stitek {
  display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px;
  padding: .12rem .6rem; font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.zn-stitek--sedy { background: var(--inset-strong); color: var(--muted); }
.zn-stitek--zel { background: var(--green-soft); color: var(--green-dark); }
.zn-stitek--fial { background: var(--fial-soft); color: var(--fial-ink); }
.zn-stitek--jantar { background: var(--amber-soft); color: var(--amber-ink); }

/* ── karty akcí v detailu třídy („Než jdu do hodiny" / „Až po hodině") ── */
.zn-akce-mrizka {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  /* `stretch` místo `start` (Honza 10. 9. 2026: „nelíbí se mi ten schod"). Karty mají
     různě dlouhý obsah, takže se dřív každá končila jinde a spodní hrana dělala schod. */
  gap: 1rem; align-items: stretch; margin-bottom: 1rem;
}
@media (max-width: 900px) { .zn-akce-mrizka { grid-template-columns: 1fr; } }
.zn-karta {
  background: var(--card); border: 1px solid var(--card-line); border-radius: 20px;
  box-shadow: 0 2px 10px rgba(var(--stin), .04);
  /* odsazení jako proměnná — zelený pruh nadpisu (`.zn-karta-hlava`, blok 7)
     ho zápornými okraji ruší, ať sedí na krajích karty i na telefonu */
  --zn-karta-pad: 1.25rem; padding: var(--zn-karta-pad);
}
.zn-karta-hlava {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
}
.zn-karta-hlava h2 {
  font-family: var(--pismo-nadpis); font-weight: 800; font-size: 1.15rem; color: var(--ink); margin: 0;
}
.zn-karta-ikona { font-size: 1.2rem; line-height: 1; display: inline-flex; align-items: center; color: var(--green); }

/* ── hlavička třídy: název, štítky, období a model ── */
.zn-hlavicka { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.zn-hlavicka h1 { font-family: var(--pismo-nadpis); font-weight: 800; font-size: 1.8rem; color: var(--ink); margin: 0; }
.zn-hlavicka-pod { margin: .45rem 0 0; font-size: .88rem; color: var(--muted); }
.zn-hlavicka-zpet { margin-left: auto; }

@media (max-width: 640px) {
  .zn-uvitani { padding: 1.15rem 1rem; border-radius: 16px; }
  .zn-uvitani h1 { font-size: 1.45rem; }
  .zn-cisla { grid-template-columns: 1fr; }
  .zn-karta { --zn-karta-pad: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   6) ROZVRŽENÍ CELÉ OBRAZOVKY — LEVÝ SLOUPEC MÍSTO HORNÍ LIŠTY (Etapa 3)
   Honza 4. 9. 2026: „Vypadá to stejně? Kde se stala chyba?" — Etapa 1 a 2
   přinesly barvy, písma a tvary, ale ROZVRŽENÍ zůstalo staré (jedna horní lišta
   přes celou šířku). Maketa `/admin/navrh-vzhled` má levý bílý sloupec 264 px
   a nad obsahem jen tenkou lištu. Tenhle blok to staví doopravdy.

   Pravidla, která z toho plynou:
     • všechny třídy mají prefix `zn-` (mimo Tailwind, mimo `tests/test_paleta_pokryti`),
     • barvy jdou VÝHRADNĚ přes proměnné palety z bloků 1) a 2), takže tmavý režim
       funguje bez jediného extra pravidla,
     • sloupec se vkládá jen v `base.html` pod podmínkou `zn-ucitel` — žákovská hra
       tenhle soubor vůbec nenačte.
   ───────────────────────────────────────────────────────────────────────── */

.zn-shell { display: flex; align-items: flex-start; flex: 1 1 auto; width: 100%; min-width: 0; }

/* ── levý sloupec (264 px, drží se u kraje obrazovky) ── */
.zn-bok {
  /* 296 px místo 264: po zvětšení písma (9. 9. 2026) se „Licence a fakturace"
     a „Oprávnění přístupu" ořezávaly na tři tečky. */
  width: var(--zn-bok-sirka, 296px); flex: none; align-self: flex-start;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--bok-bg); color: var(--bok-text); border-right: 1px solid var(--bok-ram);
  padding: 1.1rem .8rem 1rem; display: flex; flex-direction: column; gap: 1rem;
  z-index: 40;
}
/* Hnědý pruh POKRAČUJE nad panel až k názvu (Honza 4. 9. 2026: „protáhni ten hnědý
   pruh až k názvu Životem nanečisto"). Záporné okraje ruší odsazení panelu, takže
   plocha dosedne na jeho kraje a s lištou vpravo tvoří jeden souvislý pruh; proto
   má i stejnou výšku (56 px) jako `.zn-lista`. */
.zn-znacka {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
  background: var(--lista-bg); color: var(--lista-ink);
  margin: -1.1rem -.8rem 0; padding: .35rem .9rem; min-height: 56px;
}
.zn-znacka-mesec { margin: -3px 0; }        /* měšec smí přesahovat, pruh nezvýší */
.zn-znacka-kolecko {
  width: 44px; height: 44px; border-radius: 50%; flex: none; font-size: 1.3rem;
  background: var(--green-soft); border: 1px solid var(--green-ram);
  display: flex; align-items: center; justify-content: center;
}
/* 💰 Měšec u názvu. Kreslený obrázek stojí na ploše sám, bez kolečka a rámečku —
   to by ho v malé velikosti jen zdusilo. Šířka sedí s výškou bývalého kolečka. */
.zn-znacka-mesec { width: 38px; height: auto; flex: none; display: block; }
.zn-znacka-nazev {
  font-family: var(--pismo-nadpis); font-weight: 800; font-size: 1.05rem;
  /* Název leží V PRUHU, takže bere jeho barvu textu — ne barvu tmavých ploch.
     Jinak by při světlém pruhu zůstal světlý a zmizel (nález 4. 9. 2026). */
  line-height: 1.12; color: var(--lista-ink);
}
.zn-znacka-heslo {
  font-family: var(--pismo-nadpis); font-size: .78rem; font-style: italic; font-weight: 600;
  color: var(--bok-heslo); padding: .6rem 0 0 .5rem;
}

.zn-nav { display: flex; flex-direction: column; gap: .12rem; }
.zn-nav-dole { margin-top: auto; }
.zn-polozka {
  display: flex; align-items: center; gap: .65rem; height: 48px; padding: 0 .8rem;
  border-radius: 14px; font-size: .95rem; font-weight: 600; color: var(--bok-text);
  text-decoration: none; background: none; border: 0; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer; line-height: 1.2;
}
.zn-polozka:hover { background: var(--bok-hover); color: var(--bok-hover-ink); }
/* Aktivní položka je KRÉMOVÁ plocha se zeleným textem — na zeleném panelu by zelené
   podbarvení splynulo. Zelený text na #fffdf8 má 6,4:1. */
.zn-polozka[aria-current="page"] { background: var(--bok-akt-bg); color: var(--bok-akt-ink); font-weight: 700; }
.zn-polozka-ikona {
  flex: none; width: 1.45rem; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 🖊 ČÁROVÉ IKONY z makety (`templates/_ikony.html`, Honza 4. 9. 2026).
   Kreslí `stroke="currentColor"`, takže barvu berou po textu vedle sebe
   a v tmavém režimu se přebarví samy — žádná druhá sada. `flex: none` je
   tu proto, aby se ikona nesmrskla, když je popisek dlouhý; `vertical-align`
   srovná účaří tam, kde kolem ní není flex (tlačítka v textu). */
.zn-ikona { flex: none; display: inline-block; vertical-align: -.18em; }
.zn-akce-ikona { display: inline-flex; align-items: center; justify-content: center; }
.zn-polozka-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Oddělovač uvnitř barevného panelu — linka karet by na něm zmizela. */
.zn-oddel { height: 1px; background: var(--bok-oddel); margin: .55rem .5rem; border: 0; }
.zn-nadskupina-bok {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--bok-tlum); padding: .5rem .8rem .2rem;
}

/* ── pravý sloupec: tenká lišta + obsah ── */
.zn-hlavni { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.zn-lista {
  position: sticky; top: 0; z-index: 30; flex: none;
  display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .35rem .9rem;
  background: var(--lista-bg); color: var(--lista-ink);
  border-bottom: 1px solid var(--lista-spodek); flex-wrap: wrap;
}
.zn-menu-tl {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; border: 1px solid var(--lista-line); background: var(--lista-pole);
  color: var(--lista-ink); font-size: 1.1rem; cursor: pointer; flex: none;
}
.zn-menu-tl:hover { background: var(--bok-hover); }
.zn-hledat { position: relative; flex: 1 1 12rem; max-width: 22rem; min-width: 0; }
.zn-hledat-lupa {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  color: var(--lista-tlum); font-size: .85rem; pointer-events: none;
  display: inline-flex; align-items: center;
}
.zn-hledat input {
  width: 100%; height: 38px; border: 1px solid var(--lista-line); border-radius: 12px;
  background: var(--lista-pole); color: var(--lista-ink); padding: 0 .7rem 0 2rem; font-size: .86rem;
}
.zn-hledat-vysledek { font-size: .78rem; color: var(--lista-tlum); white-space: nowrap; }
.zn-lista .zn-hledat input::placeholder { color: var(--lista-tlum); }
.zn-lista-vpravo { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.zn-zvonek {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; text-decoration: none;
  color: var(--lista-ink); font-size: 1.05rem; flex: none;
}
.zn-zvonek:hover { background: var(--bok-hover); }
.zn-zvonek-odznak {
  position: absolute; top: 1px; right: 1px; min-width: 17px; height: 17px; border-radius: 999px;
  background: #DC2626; color: #FFFFFF; font-size: .62rem; font-weight: 700; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--lista-bg);
}
.zn-ucet {
  display: flex; align-items: center; gap: .5rem; padding: .2rem .5rem .2rem .2rem;
  border-radius: 999px; text-decoration: none; color: inherit; max-width: 15rem;
}
.zn-ucet:hover { background: var(--bok-hover); }
.zn-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--green-soft); border: 1px solid var(--green-ram);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pismo-nadpis); font-weight: 700; font-size: .8rem; color: var(--green-dark);
}
.zn-ucet-texty { display: block; min-width: 0; overflow: hidden; }
.zn-ucet-jmeno {
  display: block; font-family: var(--pismo-nadpis); font-weight: 700; font-size: .85rem;
  color: var(--lista-ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zn-ucet-role {
  display: block; font-size: .71rem; color: var(--lista-tlum); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Přepínač světlý/tmavý je sdílený s žákovskou zelenou lištou (paleta.css), kde má
   tmavé pozadí a bílý text. V bílé učitelské liště by zmizel — tady dostane světlou
   pilulku z předlohy. Role barev se nemění, jen hodnoty, takže tmavý režim jede dál. */
.zn-lista .rezim-prepinac { background: var(--lista-pole); border: 1px solid var(--lista-line); }
.zn-lista .rezim-volba { color: var(--lista-tlum); }
html:not(.dark) .zn-lista .rezim-volba--svetly,
html.dark .zn-lista .rezim-volba--tmavy {
  background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(var(--stin), .10);
}

/* ── mobil: sloupec se složí do tlačítka ☰ ──────────────────────────────────
   Učitelé chodí i z telefonu (Bětka: „počítá se s 50/50"). Pod 1024 px je sloupec
   zásuvka přes obsah; překryv se dá zavřít klepnutím i klávesou Esc (skript
   `static/ucitel-shell.js`). Bez JS zůstane sloupec zavřený, ale VŠECHNY jeho
   odkazy jsou i v patičce stránky — nikdo se nezasekne. */
.zn-bok-zaves { display: none; }
.zn-bok-zavrit { display: none; }
@media (max-width: 1024px) {
  .zn-menu-tl { display: inline-flex; }
  .zn-bok-zavrit { display: inline-flex; }
  .zn-bok {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    width: var(--zn-bok-sirka, 296px); max-width: 86vw;
    transform: translateX(-100%); transition: transform .18s ease; z-index: 60;
    box-shadow: 0 10px 40px rgba(var(--stin), .18);
  }
  .zn-menu-otevreno .zn-bok { transform: none; }
  .zn-menu-otevreno .zn-bok-zaves {
    display: block; position: fixed; inset: 0; z-index: 50; border: 0;
    background: rgba(var(--stin), .45);
  }
}
@media (max-width: 720px) {
  .zn-ucet-texty { display: none; }
  .zn-hledat { flex-basis: 100%; max-width: none; order: 5; }
}

/* Filtr hledání skrývá řádky přes `hidden`. Karty tříd a učitelů mají `display:flex`,
   který by prohlížečovou výchozí `[hidden]{display:none}` přebil — proto tvrdě. */
.zn-shell [hidden] { display: none !important; }

/* ── rozcestník správce školy (maketa, obrazovka „Správa školy") ───────────── */
/* ⚠️ `zn-mrizka3` (tři úzké sloupce) zrušil 4. 9. 2026 Honza výřezem z makety:
   „A učitele a třídy bych roztáhl nějak takto." Pravidlo tu ZŮSTÁVÁ jako zámek —
   kdyby se tři sloupce vrátily, musí se na telefonu pořád složit pod sebe
   (`tests/test_mobil_preteceni.py`). Rozcestník dnes používá `zn-mrizka2`. */
.zn-mrizka3 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 1rem; align-items: start;
}
@media (max-width: 1280px) { .zn-mrizka3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 860px)  { .zn-mrizka3 { grid-template-columns: 1fr; } }

/* Dvě široké karty vedle sebe (Učitelé | Třídy školy) a pod nimi druhá řada
   (Období | Rozhled). Půlka šířky stačí, aby se řádek třídy — název · ročník ·
   štítek · počet žáků · ⋮ — vešel na JEDEN řádek; ve třetině se lámal.
   R7: pod 860 px jde všechno pod sebe, `minmax(0, 1fr)` drží obsah v mřížce,
   takže dlouhý název třídy sloupec neroztáhne ani na 390 px. */
.zn-mrizka2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; align-items: start; margin-bottom: 1rem;
}
@media (max-width: 860px)  { .zn-mrizka2 { grid-template-columns: 1fr; } }
.zn-sloupec { display: flex; flex-direction: column; gap: 1rem; }
.zn-vice { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--green-dark); text-decoration: none; }
.zn-vice:hover { text-decoration: underline; }
.zn-radek { padding: .6rem 0; border-top: 1px solid var(--card-line); }
.zn-radek:first-of-type { border-top: 0; }
.zn-panel-zel {
  background: var(--green-faint); border: 1px solid var(--green-ram); border-radius: 18px;
  padding: 1rem; margin-top: 1rem;
}
.zn-akce {
  display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: .5rem .8rem;
  border: 1px solid var(--card-line-2); border-radius: 14px; background: var(--card);
  color: var(--ink); text-decoration: none; font-size: .89rem; font-weight: 500;
}
.zn-akce:hover { background: var(--green-faint); border-color: var(--green-ram); }
.zn-akce-sipka { margin-left: auto; color: var(--faint); }
.zn-tl-hlavni {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn);
  border-radius: 16px; padding: .8rem 1.2rem; font-family: var(--pismo-nadpis);
  font-weight: 700; font-size: 1rem; text-decoration: none; width: 100%; min-height: 56px;
}
.zn-tl-hlavni:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
/* Druhé tlačítko vedle hlavního („Přidat asistenta", Honza 9. 9. 2026): stejný tvar,
   ale obrysové — dvě plné zelené vedle sebe by si přetahovaly pozornost. */
.zn-tl-druhotne {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--card); color: var(--ink); border: 1px solid var(--card-line);
  border-radius: 16px; padding: .8rem 1.2rem; font-family: var(--pismo-nadpis);
  font-weight: 700; font-size: 1rem; text-decoration: none; width: 100%; min-height: 56px;
}
.zn-tl-druhotne:hover { background: var(--inset); border-color: var(--card-line-2); }

/* ─────────────────────────────────────────────────────────────────────────
   7) ŘÁDKY KARET — AKCE V PEVNÉM SLOUPCI (Honza 4. 9. 2026, po snímku
   s kroužky: „Prosím o uzamknutí tlačítek na pevnou pozici, vypadá to ošklivě.")

   Co bylo špatně: řádky byly `flex … justify-between flex-wrap`, takže pozici
   tlačítek určovala DÉLKA TEXTU vlevo. Delší e-mail nebo delší název třídy
   odsunul ✏️/✉️/🗑 jinam než o řádek výš a sloupec akcí se „třásl".

   Jak je to teď: každý řádek je MŘÍŽKA s pevným posledním sloupcem. Šířku
   sloupce nedělá obsah, ale `--zn-akce-sirka` × počet tlačítek — takže
   „Archivovat" v prvním řádku začíná přesně tam co ve čtvrtém, ať je vlevo
   cokoli. Text vlevo má `min-width: 0` a přeteklé se ořízne třemi tečkami.
   Prázdný sloupec (řádek správce školy, který akce nemá) si šířku drží taky,
   jinak by se u něj text natáhl přes celou kartu.
   ───────────────────────────────────────────────────────────────────────── */

.zn-radek-mrizka {
  --zn-akce-sirka: 6.2rem;
  --zn-akce-mezera: .35rem;
  display: grid; align-items: start; gap: .35rem .75rem;
}
/* text · (počet) · akce — poslední sloupec je JEDNA pevná šířka, ne odvozená z obsahu.
   Tlačítka v něm stojí SVISLE pod sebou: karta Učitelé je jen třetina rozcestníku
   (~300 px) a trojice ✏️/✉️/🗑 vedle sebe by měla 310 px — text vlevo by se scvrkl
   na jedno písmeno. Svisle se sloupec vejde všude a lícuje stejně dobře. */
.zn-radek--akce { grid-template-columns: minmax(0, 1fr) var(--zn-akce-sirka); }
.zn-radek--pocet-akce { grid-template-columns: minmax(0, 1fr) 4.6rem var(--zn-akce-sirka); }

.zn-radek-text { min-width: 0; }
.zn-radek-hlava { display: flex; align-items: center; gap: .35rem; min-width: 0; flex-wrap: wrap; }
/* Dlouhý e-mail / název třídy se ořízne, místo aby roztlačil akce. */
.zn-orez { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Počty žáků mají vlastní úzký sloupec — číslice stejně široké, ať „2 žáci"
   a „28 žáků" neposouvají zbytek řádku. */
.zn-pocet {
  text-align: right; white-space: nowrap; font-size: .76rem; color: var(--muted);
  font-variant-numeric: tabular-nums; padding-top: .1rem;
}
/* druhý řádek pod jménem („3 třídy · 78 žáků") — taky tabulkové číslice */
.zn-radek-detail {
  font-size: .74rem; color: var(--muted); margin-top: .12rem;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Jeden sloupec, pevná šířka a pevná výška řádku — „Archivovat" ve čtvrtém řádku
   začíná přesně tam, co v prvním, a druhé tlačítko je vždy o 35 px níž.
   Třídy `--1/--2/--3` říkají jen POČET tlačítek; využije ho telefon (rozklad níž)
   a test, který kontroluje, že sloupec akcí je v každém řádku stejný. */
.zn-akce-sloupec {
  display: grid; gap: var(--zn-akce-mezera); justify-self: end;
  grid-template-columns: var(--zn-akce-sirka); grid-auto-rows: 30px;
}
.zn-akce-sloupec > * { min-width: 0; }
.zn-akce-sloupec .zn-akce-tl {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  width: 100%; height: 30px; padding: 0 .35rem; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--card-line-2); background: var(--card); color: var(--muted);
  font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; list-style: none; font-family: inherit;
}
.zn-akce-tl:hover { background: var(--green-faint); border-color: var(--green-ram); color: var(--green-dark); }
.zn-akce-tl--cerv { background: var(--red-soft); border-color: var(--red-soft); color: var(--red-ink); }
.zn-akce-tl--cerv:hover { background: var(--red-soft); border-color: var(--red-ink); color: var(--red-ink); }
.zn-akce-tl::-webkit-details-marker { display: none; }
/* Sdílené účty v matici — jedno tlačítko, ale delší popisek („Označit jako sdílený") */
.zn-radek--siroke { --zn-akce-sirka: 9.8rem; }

/* ⋮ NABÍDKA AKCÍ V ŘÁDKU (Honza 4. 9. 2026: „Šlo by Archivovat a Smazat nahradit
   třema tečkama […] a Smazat bude červeně?" + „to samé u učitelů").
   Řádek je pak jednořádkový jako v maketě: název · štítky · počet · ⋮.
   Sloupec akcí se zúží na jedinou ikonu — stačí přepsat proměnnou, mřížku řádku
   i sloupce už řídí ona. Panel je ABSOLUTNÍ a zarovnaný doprava, aby ani na 390px
   displeji nemohl roztáhnout stránku (R7); šířku má stropovanou oknem. */
.zn-radek--nabidka { --zn-akce-sirka: 2rem; }
.zn-akce-sloupec--nabidka { justify-items: end; }
.zn-nabidka { position: relative; }
.zn-nabidka-tl { padding: 0; }
.zn-nabidka-tl::-webkit-details-marker { display: none; }
.zn-nabidka[open] > .zn-nabidka-tl { background: var(--green-faint); border-color: var(--green-ram); color: var(--green-dark); }
.zn-nabidka-panel {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 40;
  width: 16rem; max-width: calc(100vw - 3rem); padding: .25rem; text-align: left;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(var(--stin), .16);
}
.zn-nabidka-panel form { margin: 0; }
.zn-nabidka-pol {
  display: flex; align-items: center; gap: .4rem; width: 100%;
  padding: .45rem .55rem; border: 0; border-radius: 8px; background: none;
  color: var(--ink); font-family: inherit; font-size: .8rem; font-weight: 600;
  text-align: left; cursor: pointer; list-style: none;
}
.zn-nabidka-pol::-webkit-details-marker { display: none; }
.zn-nabidka-pol:hover { background: var(--green-faint); color: var(--green-dark); }
/* 🔴 Destruktivní položka (Smazat / Odebrat) — jediná červená v nabídce. */
.zn-nabidka-pol--cerv { color: var(--red-ink); }
.zn-nabidka-pol--cerv:hover { background: var(--red-soft); color: var(--red-ink); }
/* Potvrzení (opsat název třídy / e-mail) se rozbalí UVNITŘ nabídky — žádné druhé
   plovoucí okno, které by na telefonu vylezlo z karty. */
.zn-nabidka-potvrzeni { padding: .15rem .55rem .5rem; }

/* Rychlé akce: ikona ve vlastním sloupci, ať popisky začínají pod sebou. */
.zn-akce {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center;
}
.zn-akce-ikona { text-align: center; }
.zn-akce-popis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zn-akce-sipka { margin-left: 0; }

/* Období: rok vlevo, termín vpravo ve vlastním sloupci s tabulkovými číslicemi. */
.zn-radek--obdobi { grid-template-columns: minmax(0, 1fr) auto; }
.zn-obdobi-termin { font-size: .74rem; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Třídy na rozcestníku učitele: šipka na pevné pozici, čísla tabulková. */
.zn-trida { display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; }
.zn-trida-pod { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  /* Na telefonu se řádek složí — ale U VŠECH STEJNĚ: text nahoře přes celou šířku,
     akce pod ním v témže počtu stejně širokých sloupců. */
  .zn-radek--akce, .zn-radek--siroke { grid-template-columns: minmax(0, 1fr); }
  .zn-radek--pocet-akce { grid-template-columns: minmax(0, 1fr) 4.6rem; }
  .zn-akce-sloupec { grid-column: 1 / -1; justify-self: stretch; }
  .zn-akce-sloupec--1 { grid-template-columns: minmax(0, 1fr); }
  .zn-akce-sloupec--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zn-akce-sloupec--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Řádek s ⋮ se na telefonu NESKLÁDÁ — ikona 2 rem se vejde vedle textu vždycky
     a řádek tak zůstane jednořádkový i na 390 px. */
  .zn-radek--nabidka.zn-radek--akce { grid-template-columns: minmax(0, 1fr) var(--zn-akce-sirka); }
  .zn-radek--nabidka.zn-radek--pocet-akce { grid-template-columns: minmax(0, 1fr) 4.6rem var(--zn-akce-sirka); }
  .zn-radek--nabidka .zn-akce-sloupec { grid-column: auto; justify-self: end; grid-template-columns: var(--zn-akce-sirka); }
}

/* ─────────────────────────────────────────────────────────────────────────
   8) OKNO NAD STRÁNKOU — „Přidat učitele / asistenta" (Honza 4. 9. 2026)

   Honza: „když kliknu na Přidat učitele, vyskočí mi jen okno, ale na pozadí
   zůstane ta stránka." Stojí to na NATIVNÍM `<dialog>` — žádná knihovna, žádné
   CDN: modální vrstva, ::backdrop, Esc i past na fokus umí prohlížeč sám.

   Pravidla, která z toho plynou:
     • barvy VÝHRADNĚ z proměnných palety (bloky 1 a 2), ať tmavý režim sedí,
     • R7 — okno se nesmí roztáhnout přes okraj na 390 px: šířka je
       `min(30rem, 100vw − 2rem)` a výška `min(88vh, …)` s vlastním rolováním,
       takže na stránku nikdy nepřeteče ani na malém telefonu,
     • zavřený `<dialog>` je `display: none` sám od sebe; otevřený serverem
       (stav „chyba, otevři znovu") se vykreslí i bez skriptu.
   ───────────────────────────────────────────────────────────────────────── */

.zn-okno {
  width: min(30rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: min(88vh, 100% - 2rem);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.35rem;
  border: 1px solid var(--card-line);
  border-radius: 14px;                    /* tvar karty — blok 4) */
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 18px 50px var(--okno-stin);
}
.zn-okno::backdrop { background: var(--okno-stin); }

.zn-okno-hlava { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.zn-okno-hlava h2 {
  font-family: var(--pismo-nadpis); font-weight: 800; font-size: 1.3rem;
  color: var(--ink); margin: 0; min-width: 0;
}
.zn-okno-ikona { display: inline-flex; align-items: center; color: var(--green); }
.zn-okno-krizek { margin-left: auto; }
.zn-okno-krizek button {
  border: 0; background: none; color: var(--faint); font-size: 1.1rem; line-height: 1;
  padding: .25rem .35rem; border-radius: 8px; cursor: pointer;
}
.zn-okno-krizek button:hover { background: var(--inset-strong); color: var(--ink); }

.zn-okno-form { display: flex; flex-direction: column; gap: .8rem; }
.zn-pole { display: flex; flex-direction: column; gap: .3rem; }
.zn-pole-popis { font-size: .88rem; font-weight: 700; color: var(--ink); }
.zn-vstup {
  width: 100%; box-sizing: border-box; padding: .6rem .75rem;
  border: 1px solid var(--card-line-2); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit;
}
.zn-vstup:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.zn-vstup[aria-invalid="true"] { border-color: var(--red-ink); }

.zn-okno-text { font-size: 1.02rem; color: var(--ink); margin: 0 0 .8rem; line-height: 1.55; }
.zn-okno-poznamka {
  /* Byla .78rem v `--muted` — malá a tlumená zároveň, na plátně i na notebooku
     nečitelná. Teď plná barva textu a o dva stupně větší písmo. */
  font-size: .92rem; color: var(--ink); line-height: 1.55;
  background: var(--inset); border: 1px solid var(--card-line); border-radius: 10px;
  padding: .7rem .8rem; margin: 0 0 .9rem;
}
.zn-okno-pod { font-size: .85rem; color: var(--muted); text-align: center; margin: 0; }
.zn-okno-chyba {
  font-size: .8rem; font-weight: 600; color: var(--red-ink);
  background: var(--red-soft); border: 1px solid var(--red-ink); border-radius: 10px;
  padding: .5rem .6rem; margin: 0;
}

/* Záložní STRÁNKA (bez JS) — týž formulář v obyčejné kartě, ne v cizím bílém obdélníku. */
.zn-okno-stranka { max-width: 30rem; margin: 0 auto; }

@media (max-width: 640px) {
  .zn-okno { padding: 1rem; }
}


/* 🔑 Řádek „do všech tříd / 7.A, 8.B" pod jménem učitele. Delší výčet se zalomí,
   nesmí roztáhnout kartu. */
.zn-pristup { white-space: normal; }

/* 📖 Poznámkové dlaždice pod maticí (Honza 9. 9. 2026): nadpis a pod ním odstavce,
   každé pravidlo na svém řádku. Barvy z proměnných, ať drží obě palety i tmavý režim. */
.zn-poznamka {
  background: var(--inset); border: 1px solid var(--card-line); border-radius: 10px;
  padding: .8rem .9rem; font-size: .92rem; color: var(--ink);
  display: flex; flex-direction: column; gap: .45rem;
}
.zn-poznamka--jantar { background: var(--amber-soft); border-color: var(--sezonni-ram, var(--card-line)); }
.zn-poznamka p { margin: 0; }
.zn-poznamka-nadpis {
  margin: 0; font-family: var(--pismo-nadpis); font-weight: 800; font-size: 1.02rem;
  color: var(--green-dark);
}
/* Zelený text (dlaždice „Sdílené účty sborovny") — tmavý odstín, ať se dá číst. */
.zn-zelene { color: var(--green-dark); }

/* 🔑 Matice oprávnění (Honza 9. 9. 2026). Hlavička tabulky bere TUTÉŽ zelenou jako
   dlaždice „Správa školy" a „Výuka" v levém sloupci, ať je vidět, že jde o stejnou
   úroveň členění. Vysvětlivky pod sebou: název verzálkami a zeleně, výklad obyčejně. */
.zn-tab-hlava { background: var(--bok-akt-bg); color: var(--bok-akt-ink); }
.zn-tab-hlava th { color: inherit; font-weight: 800; }

.zn-vysvetlivky {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--inset); border: 1px solid var(--card-line); border-radius: 10px;
  padding: .7rem .85rem; font-size: .92rem; color: var(--ink);
}
.zn-vysvetlivky p { margin: 0; }
.zn-vysv-nazev {
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--green-dark);
}

/* 🛟 Chat podpory: bublina operátora. Barvy jen z proměnných, ať drží obě palety
   i tmavý režim. */
.zn-zprava-cizi {
  background: var(--zprava-cizi); color: var(--ink);
  border: 1px solid var(--zprava-cizi-ram);
}

/* ─────────────────────────────────────────────────────────────────────────
   7) ROZBALOVACÍ SKUPINY, NABÍDKA POD JMÉNEM A SCHOVÁVACÍ PANEL (Honza 7. 9. 2026)
   „Přehoď Správu školy nad Výuku, ostatní kolonky schovej pod ten název… Můj účet,
   podporu, nápovědu, odhlásit schovej pod jméno správce… panel schovávací šipkou…
   Správa školy, Výuka a Ukázkový průvodce označené v dlaždici zelenou… tou samou
   zelenou zvýrazni i nadpisy karet." Barvy VÝHRADNĚ z proměnných (obě palety).
   ───────────────────────────────────────────────────────────────────────── */

/* Šipka = otočený rámeček; směr určuje rotace. */
.zn-sipka {
  flex: none; width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; opacity: .85;
}

/* ── hlavička skupiny: zelená dlaždice, vpravo šipka (dolů = rozbaleno) ──
   Skupina je nativní `<details>`, takže funguje i bez skriptu. */
.zn-nav { gap: .3rem; }
.zn-skupina {
  display: flex; align-items: center; gap: .65rem; height: 48px; padding: 0 .8rem;
  border-radius: 14px; font-size: 1rem; font-weight: 700;
  background: var(--bok-akt-bg); color: var(--bok-akt-ink);
  width: 100%; cursor: pointer; line-height: 1.2; list-style: none;
}
.zn-skupina::-webkit-details-marker { display: none; }   /* vlastní šipka místo trojúhelníku */
.zn-skupina .zn-sipka { margin-left: auto; }
.zn-skupina-obal[open] > .zn-skupina .zn-sipka { transform: rotate(45deg); }
.zn-skupina-obal[open] > .zn-skupina { font-weight: 800; }
.zn-skupina:hover { filter: brightness(.94); }

/* obsah skupiny: odsazené, nižší položky. Otevřená stránka se podbarví SLABĚ zeleně (Bětka 11. 10. 2026:
   „aby bylo vidět, na jaké stránce jsou, třeba slabě zelenou"; dřív Honza: nepodbarvovat), plně až myší */
.zn-skupina-obsah { display: flex; flex-direction: column; gap: .1rem; padding: .15rem 0 .35rem; }
.zn-skupina-obsah .zn-polozka { height: 42px; padding-left: 1.2rem; font-size: .92rem; font-weight: 600; }
.zn-skupina-obsah .zn-polozka .zn-polozka-ikona { width: 1.35rem; }
.zn-skupina-obsah .zn-polozka[aria-current="page"] { background: color-mix(in srgb, var(--bok-akt-bg) 50%, transparent); color: var(--bok-akt-ink); font-weight: 700; }
.zn-skupina-obsah .zn-polozka:hover,
.zn-skupina-obsah .zn-polozka[aria-current="page"]:hover { background: var(--bok-akt-bg); color: var(--bok-akt-ink); }

/* Ukázkový průvodce jako zelená dlaždice pod skupinami */
.zn-dlazdice-bok .zn-polozka,
.zn-dlazdice-bok .zn-polozka[aria-current="page"] { background: var(--bok-akt-bg); color: var(--bok-akt-ink); font-weight: 700; }
.zn-dlazdice-bok .zn-polozka:hover { filter: brightness(.94); }

/* ── pruh s názvem a šipkou přímo v panelu ──
   Přebírá záporné okraje `.zn-znacka` (pruh dosedá na kraje panelu), samotný
   odkaz je pak jen obsah pruhu. */
.zn-znacka-pruh {
  display: flex; align-items: center; gap: .4rem; background: var(--lista-bg); color: var(--lista-ink);
  margin: -1.1rem -.8rem 0; padding: .35rem .6rem .35rem .9rem; min-height: 56px;
}
.zn-znacka-pruh .zn-znacka { margin: 0; padding: 0; min-height: 0; background: none; flex: 1 1 auto; min-width: 0; }
.zn-bok-schovat {
  flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--lista-line);
  background: var(--lista-pole); color: var(--lista-ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.zn-bok-schovat .zn-sipka { margin: 0 -3px 0 0; opacity: 1; transform: rotate(135deg); }   /* doleva */
.zn-bok-schovat:hover { background: var(--bok-hover); color: var(--bok-hover-ink); }

/* ── schovaný panel (jen počítač; na telefonu je panel zásuvka, viz blok 6) ──
   Šířku i její zápornou kompenzaci drží JEDNA proměnná, ať se nerozejdou. */
.zn-shell { --zn-bok-sirka: 296px; }
.zn-menu-tl .zn-sipka { margin: 0 0 0 -3px; opacity: 1; transform: rotate(-45deg); }      /* doprava */
.zn-menu-tl .zn-jen-mobil { display: none; }
.zn-lista-znacka { display: none; margin: 0 .3rem 0 0; padding: 0; min-height: 0; background: none; }
@media (min-width: 1025px) {
  .zn-bok { transition: margin-left .2s ease, visibility .2s; }
  .zn-menu-schovano .zn-bok { margin-left: calc(-1 * var(--zn-bok-sirka)); visibility: hidden; }
  .zn-menu-schovano .zn-menu-tl { display: inline-flex; }
  .zn-menu-schovano .zn-lista-znacka { display: flex; }
}
@media (max-width: 1024px) {
  .zn-menu-tl .zn-sipka { display: none; }
  .zn-menu-tl .zn-jen-mobil { display: inline; }
}
/* Kdo si vypnul animace, ať jimi nemusí procházet ani tady. */
@media (prefers-reduced-motion: reduce) {
  .zn-bok, .zn-sipka { transition: none; }
}

/* ── účet jako rozbalovací nabídka (`details.zn-nabidka`, stejná mechanika jako ⋮) ── */
.zn-ucet-obal { position: relative; }
.zn-ucet-obal > summary { list-style: none; cursor: pointer; }
.zn-ucet-obal > summary::-webkit-details-marker { display: none; }
.zn-ucet .zn-sipka { margin-left: .2rem; opacity: .7; }
.zn-ucet-obal[open] > .zn-ucet { background: var(--bok-hover); color: var(--bok-hover-ink); }
.zn-ucet-obal[open] > .zn-ucet .zn-sipka { transform: rotate(45deg); }
.zn-ucet-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 13rem; z-index: 60;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 14px;
  box-shadow: 0 10px 28px var(--okno-stin); padding: .4rem; display: flex; flex-direction: column; gap: .1rem;
  /* při zvětšeném písmu nebo nízkém okně se nabídka nesmí utnout — roluje se */
  max-width: calc(100vw - 1.5rem); max-height: calc(100vh - 5rem); overflow-y: auto;
}
.zn-ucet-menu a {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.zn-ucet-menu a:hover { background: var(--green-faint); color: var(--green-dark); }
.zn-ucet-menu-oddel { height: 1px; background: var(--card-line); margin: .3rem .4rem; }

/* ── nadpisy karet: zelený pruh přes celou šířku karty, stejná zelená jako dlaždice ──
   Záporné okraje = odsazení karty (`--zn-karta-pad`), proto sedí i na telefonu. */
.zn-karta-hlava {
  background: var(--bok-akt-bg); color: var(--bok-akt-ink);
  margin: calc(-1 * var(--zn-karta-pad)) calc(-1 * var(--zn-karta-pad)) 1rem;
  padding: .7rem var(--zn-karta-pad); border-radius: 19px 19px 0 0;
}
.zn-karta-hlava h2, .zn-karta-hlava .zn-karta-ikona, .zn-karta-hlava .zn-vice { color: var(--bok-akt-ink); }

/* ─────────────────────────────────────────────────────────────────────────
   9) ČASOVÁ OSA TŘÍDY A DLAŽDICE PLÁNU (Honza 18. 9. 2026: „spodní dlaždici
      s plánováním změň na šalvějovou; plán otevírání měsíců, kde je třída
      a vysvětlivky udělej přehledněji")

   Barvy jdou z proměnných palety, ne natvrdo — v Šalvěji vyjdou šalvějově,
   ve Světlé mátově a v tmavém režimu tmavě. Proto tu nejsou žádné Tailwind
   třídy: ty by musely mít remap v `static/paleta.css` (test_paleta_pokryti).
   ───────────────────────────────────────────────────────────────────────── */

/* 🌿 dlaždice „Naplánováno na N. měsíc" — místo bílé karty šalvějová */
.zn-plan { background: var(--green-faint); border: 1px solid var(--green-ram); }
.zn-plan-prazdno {
  background: var(--card); border: 1px dashed var(--green-ram); border-radius: 12px;
}
.zn-plan-hotovo { background: var(--card); border-color: var(--card-line); }

/* 🗓 pruh „Kde třída je" — velké číslo měsíce, vpravo plán otevírání */
.zn-osa-pruh {
  display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
  background: var(--green-faint); border: 1px solid var(--green-ram);
  border-radius: 14px; padding: .65rem .85rem; margin-bottom: .7rem;
}
.zn-osa-kde { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; min-width: 0; }
.zn-osa-stitek { font-weight: 800; font-size: .95rem; color: var(--ink); }
.zn-osa-mesic {
  background: var(--bok-akt-bg); color: var(--bok-akt-ink); border-radius: 999px;
  padding: .25rem .8rem; font-weight: 800; font-size: 1rem; white-space: nowrap;
}
.zn-osa-mesic small { font-weight: 700; opacity: .75; }
.zn-osa-kdy { color: var(--muted); font-size: .9rem; }
.zn-osa-vpravo { margin-left: auto; }

/* 📅 „Plán otevírání měsíců" vypadá jako tlačítko, ne jako nadpis */
details.zn-osa-plan { position: relative; }
details.zn-osa-plan > summary {
  cursor: pointer; list-style: none; white-space: nowrap;
  background: var(--pole, var(--card)); border: 1px solid var(--green-ram); border-radius: 10px;
  padding: .4rem .8rem; font-weight: 700; font-size: .85rem; color: var(--ink);
}
details.zn-osa-plan > summary::-webkit-details-marker { display: none; }
details.zn-osa-plan > summary::after { content: " ▾"; color: var(--muted); }
details.zn-osa-plan[open] > summary::after { content: " ▴"; }
details.zn-osa-plan > summary:hover { background: var(--green-soft); }
.zn-osa-plan-telo {
  background: var(--card); border: 1px solid var(--green-ram); border-radius: 12px;
  padding: .7rem .85rem; margin-top: .5rem;
}
@media (min-width: 900px) {
  /* na počítači se rozbalený plán položí pod pruh a nerozhodí ho */
  details.zn-osa-plan[open] .zn-osa-plan-telo {
    position: absolute; right: 0; top: 100%; z-index: 20; width: min(34rem, 80vw);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
  }
}

/* 🔎 vysvětlivky v mřížce — jeden dlouhý řádek se na šířce rozpadal */
details.zn-legenda { margin-bottom: .75rem; }
details.zn-legenda > summary {
  cursor: pointer; list-style: none; font-size: .8rem; font-weight: 700; color: var(--muted);
  padding: .15rem 0;
}
details.zn-legenda > summary::-webkit-details-marker { display: none; }
details.zn-legenda > summary::after { content: " ▾"; }
details.zn-legenda[open] > summary::after { content: " ▴"; }
.zn-legenda-mrizka {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .9rem;
  border: 1px solid var(--card-line); border-radius: 12px; padding: .6rem .8rem; margin-top: .35rem;
  font-size: .78rem; color: var(--muted);
}
@media (min-width: 720px) { .zn-legenda-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zn-legenda-mrizka > span { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }

/* 💬 Nápověda k tlačítku „Označit jako sdílený / Zrušit sdílení" v matici oprávnění
   (Honza 23. 9. 2026). `position: fixed` + souřadnice z JS — tabulka má
   `overflow-x-auto`, absolutně umístěnou bublinu by ořízla. Barvy z proměnných
   vzhledu, takže sedí ve světlém i tmavém režimu. */
.zn-sdil-tip {
  position: fixed; z-index: 60; width: min(22rem, calc(100vw - 16px));
  padding: .7rem .85rem; border-radius: 12px; white-space: normal; text-align: left;
  background: var(--card); color: var(--ink); border: 1px solid var(--card-line-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18); font-size: .8rem; line-height: 1.4;
  font-weight: 400; pointer-events: none;
}
.zn-sdil-tip[hidden] { display: none; }
.zn-sdil-tip strong { display: block; margin-bottom: .3rem; color: var(--green-dark); font-size: .85rem; }
.zn-sdil-tip p + p { margin-top: .35rem; }
.zn-sdil-tip .zn-sdil-tip-pozn { color: var(--muted); }
/* Kotva nápovědy u zaškrtávátek matice. Zamčené (disabled) políčko v Chromu myš
   neohlásí — proto mu vypínáme pointer-events a událost dostane obal. */
.zn-tip-kotva { display: inline-flex; align-items: center; }
.zn-tip-kotva input:disabled { pointer-events: none; }
.zn-sdil-tip .zn-tip-kdo {
  font-size: .7rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem;
  padding-bottom: .25rem; border-bottom: 1px solid var(--card-line-2);
}