/* Barevné palety hry — zadání Bětky 29. 7. 2026 („dvě palety + přepínač").
 *
 * PROČ TAKHLE: v šablonách je ~2600 pevných Tailwind barev (bg-white, text-slate-500…).
 * Přepsat je ručně by znamenalo 67 souborů a jistotu, že se na něco zapomene a v tmavém
 * režimu zůstane svítivě bílý kus. Místo toho tady jednou provždy PŘEMAPUJU Tailwind třídy
 * na proměnné palety. Šablony zůstávají beze změny a přepne se úplně všechno.
 *
 * Hexy jsou PŘESNĚ ze zadání, nic vlastního. Selektory začínají `html`, aby přebily
 * Tailwind (ten se vkládá do stránky až za běhu, takže na pořadí souborů se nedá spolehnout).
 */

:root {                     /* světlý režim = výchozí (paleta A, béžová) */
  --page: #cabfa6;
  --card: #fffdf8;
  --card-line: #c9bb9f;
  --inset: #faf6ec;
  --ink: #3a3226;
  --muted: #8f8065;
  --faint: #a89a82;
  --green: #1a9e6f;
  --green-dark: #158a60;
  --green-strong: #10b981;   /* sytá zelená tmavé palety (tady ji drží jen kvůli jednomu zdroji) */
  --bar: var(--btn);         /* lišta = přesně barva tlačítka „Zaplatit a uzavřít" (#1a9e6f) */
  --bar-ink: #000000;        /* na zelené má černá kontrast 6,1:1, bílá jen 3,4:1 */
  --subbar: #b89f7d;         /* informační pruh pod lištou — jiná úroveň než navigace */
  --subbar-ink: #3a3226;
  --subbar-link: #5f2708;    /* rezavá z náhledu (#7a3410) ztmavená: 3,5:1 → 4,6:1 kontrast */

  /* odvozené (v tabulce nejsou, ale plochy je potřebují) */
  --inset-strong: #efe7d6;   /* tmavší ploška uvnitř karty */
  --ink-surface: #3a3226;    /* tmavá plocha (tlačítko „stáhnout vše“) */
  --ink-surface-text: #fffdf8;
  --btn: var(--green);
  --btn-hover: var(--green-dark);
  --btn-ink: #ffffff;
  --tag: #f0b429;            /* odznak pásma */
  --tag-ink: #3a3226;
  --green-soft: #e4f4ec;     /* zelené informační pole */
  --amber-soft: #f8edd4;     /* upozornění */
  --amber-ink: #8a6212;
  --red-soft: #f7e0dc;       /* chyba / dluh */
  --red-ink: #a03225;
  --info-bg: #e6ecfb;        /* modré informační plochy (bankovní příkazy, tipy) */
  --info-ink: #2c3f8f;
  --info-line: #b9c6f0;
  --info-strong: #4f46e5;         /* plné modré tlačítko (debrief, nastavit zůstatek) */
  --info-strong-hover: #4338ca;
  --info-strong-ink: #ffffff;
  /* závoj pod oknem, které překrývá obsah — MUSÍ zůstat průhledný (Bětka 17. 8. 2026:
     „pásky by byly v pozadí"). Tailwindí bg-slate-900/70 se níž přemapovává na
     neprůhlednou plochu, tady se tedy nedá použít. */
  --okno-stin: rgba(58, 50, 38, .62);
}

html.dark {                 /* tmavý režim (paleta B, vysoký kontrast) */
  --page: #0e111c;
  --card: #313850;
  --card-line: #454d70;
  --inset: #3d4563;
  --ink: #e8eaf2;
  --muted: #8b90ab;
  --faint: #6b7095;
  --green: #34d399;
  --green-strong: #10b981;
  --tag: #fcd34d;
  --bar: var(--btn);            /* i tady lišta = tlačítko (v tmavé paletě #10b981) */
  --bar-ink: #000000;
  --subbar: #1a2536;
  --subbar-ink: #c3c8db;
  --subbar-link: #fcd34d;

  --inset-strong: #485073;
  --ink-surface: #1c2133;
  --ink-surface-text: #e8eaf2;
  --btn: var(--green-strong);
  --btn-hover: #34d399;
  --btn-ink: #04160f;        /* velmi tmavý text na syté zelené (viz zadání) */
  --tag-ink: #2a220a;
  --green-soft: #24503f;
  --amber-soft: #4a3c14;
  --amber-ink: #fcd34d;
  --red-soft: #4b2521;
  --red-ink: #fca5a5;
  --info-bg: #1e2740;        /* v tmavém režimu tlumená modrá, ne svítivá (kontrast 7,9:1) */
  --info-ink: #a9bcff;
  --info-line: #3c4a7a;
  --info-strong: #3b4bb5;         /* v tmavém režimu tlumenější, ať nesvítí */
  --info-strong-hover: #4a5ad0;
  --info-strong-ink: #f2f4ff;
  --okno-stin: rgba(4, 6, 14, .72);
}

/* ── plochy stránky ─────────────────────────────────────────────────────── */
html, body { background: var(--page); color: var(--ink); }
html .bg-slate-100, html .bg-slate-50, html .bg-gray-50, html .bg-gray-100 { background-color: var(--inset); }
html body.bg-slate-100, html body.bg-slate-50 { background-color: var(--page); }
html .bg-white { background-color: var(--card); }
html .bg-slate-200, html .bg-gray-200 { background-color: var(--inset-strong); }
html .bg-slate-700, html .bg-slate-800, html .bg-slate-900 { background-color: var(--ink-surface); }
html .bg-slate-700, html .bg-slate-800, html .bg-slate-900 { color: var(--ink-surface-text); }
html .hover\:bg-slate-800:hover, html .hover\:bg-slate-900:hover { background-color: var(--ink-surface); }
html .bg-slate-300 { background-color: var(--card-line); }

/* horní lišta — zelená jako hlavní tlačítko (zadání Bětky 30. 7. 2026).
 * Dřív byla fialová (--bar: #5548c8 / #4c3fb0). Barva se BERE z --btn, ne natvrdo:
 * lišta je pak vždycky přesně to, co tlačítko „Zaplatit a uzavřít" (Bětka 15:21 —
 * „#1a9e6f sjednoť je na tento odstín"), a nemůžou se rozejít ani po úpravě palety.
 * Text je černý v OBOU paletách — na #1a9e6f má kontrast 6,1:1, na #10b981 8,2:1
 * (bílá by měla 3,4:1 resp. 2,6:1, tedy propadla by).
 * Odznaky (název hry, „Učitel …") jsou bez podkladu a rámečku: zůstává jen text. */
html .app-bar { background: var(--bar); color: var(--bar-ink); }
html .app-bar a, html .app-bar span, html .app-bar button { color: var(--bar-ink); }
html .app-bar .app-bar-chip { background: transparent; border: 0; padding: 0; }
/* přepínač režimu musí na zelené zůstat vidět → jemný světlý kruh (zadání, bod 4) */
html .app-bar .rezim-prepinac { background: rgba(0,0,0,.22); }
html .app-bar .rezim-volba { color: var(--bar-ink); }

/* informační pruh pod lištou — schválně JINÁ barva než hlavní zelená, ať je poznat,
 * že nejde o navigaci (zadání: „nech odlišný … tmavší neutrální odstín").
 * Tmavá linka nahoře: světlá hnědá #b89f7d má NÁHODOU skoro stejný jas jako zelená
 * (kontrast 1,0), takže bez ní by hranice stála jen na barevném tónu — a při barvosleposti
 * by zmizela. S linkou je předěl vidět vždycky. */
html .app-subbar { background: var(--subbar); color: var(--subbar-ink);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.28); }
html .app-subbar a { color: var(--subbar-link); }

/* ── text ───────────────────────────────────────────────────────────────── */
html .text-slate-900, html .text-slate-800, html .text-slate-700,
html .text-gray-900, html .text-gray-800, html .text-gray-700 { color: var(--ink); }
html .text-slate-600, html .text-slate-500, html .text-gray-600, html .text-gray-500 { color: var(--muted); }
html .text-slate-400, html .text-slate-300, html .text-gray-400 { color: var(--faint); }

/* ── linky a rámečky ────────────────────────────────────────────────────── */
html .border-slate-100, html .border-slate-200, html .border-slate-300,
html .border-gray-100, html .border-gray-200, html .border-gray-300 { border-color: var(--card-line); }
html .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
html .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--card-line); }

/* ── zelená: akce, částky, tlačítka ─────────────────────────────────────── */
html .text-emerald-500, html .text-emerald-600, html .text-emerald-700,
html .text-emerald-800, html .text-emerald-900, html .text-green-600, html .text-green-700 { color: var(--green); }
html .bg-emerald-600, html .bg-emerald-700, html .bg-emerald-800, html .bg-green-600 { background-color: var(--btn); }
html .bg-emerald-600, html .bg-emerald-700, html .bg-emerald-800, html .bg-green-600 { color: var(--btn-ink); }
html .hover\:bg-emerald-700:hover, html .hover\:bg-emerald-800:hover,
html .hover\:bg-emerald-600:hover, html .hover\:bg-green-700:hover { background-color: var(--btn-hover); }
html .bg-emerald-50, html .bg-emerald-100, html .bg-green-50, html .bg-green-100 { background-color: var(--green-soft); }
html .bg-emerald-50, html .bg-emerald-100, html .bg-green-50, html .bg-green-100 { color: var(--ink); }
html .border-emerald-200, html .border-emerald-300, html .border-emerald-400 { border-color: var(--green); }

/* ── jantar: upozornění, odznaky ────────────────────────────────────────── */
html .bg-amber-50, html .bg-amber-100, html .bg-yellow-50, html .bg-yellow-100 { background-color: var(--amber-soft); }
html .text-amber-500, html .text-amber-600, html .text-amber-700,
html .text-amber-800, html .text-amber-900, html .text-yellow-700, html .text-yellow-800 { color: var(--amber-ink); }
html .border-amber-200, html .border-amber-300, html .border-amber-400 { border-color: var(--amber-ink); }
html .bg-amber-400, html .bg-amber-500, html .bg-yellow-400 { background-color: var(--tag); }
html .bg-amber-400, html .bg-amber-500, html .bg-yellow-400 { color: var(--tag-ink); }

/* ── červená: dluh, chyba ───────────────────────────────────────────────── */
html .bg-red-50, html .bg-red-100, html .bg-rose-50 { background-color: var(--red-soft); }
html .text-red-500, html .text-red-600, html .text-red-700, html .text-red-800, html .text-rose-600 { color: var(--red-ink); }
html .border-red-200, html .border-red-300, html .border-red-400 { border-color: var(--red-ink); }
html .bg-red-600, html .bg-red-700 { background-color: #c0392b; color: #fff; }
html .hover\:bg-red-700:hover { background-color: #a93226; }

/* ── modré informační plochy (Bětka 30. 7. 2026: „přesvícené rozhraní v tmavém režimu")
 * Rámeček „Tento měsíc si účty platíš sám" a spol. používaly indigo/sky/blue třídy, které
 * paleta vůbec nepřepisovala — v tmavém režimu tak zůstaly svítivě světlé (#eef2ff) a
 * tlačítka v nich měla fialový text na tmavém podkladu. Teď jdou z jedné proměnné. */
html .bg-indigo-50, html .bg-indigo-100, html .bg-sky-50, html .bg-sky-100,
html .bg-blue-50, html .bg-blue-100, html .bg-purple-50, html .bg-purple-100,
html .bg-violet-50, html .bg-violet-100 { background-color: var(--info-bg); }
html .text-indigo-400, html .text-indigo-500, html .text-indigo-600, html .text-indigo-700,
html .text-indigo-800, html .text-indigo-900, html .text-sky-600, html .text-sky-700,
html .text-sky-800, html .text-sky-900, html .text-blue-600, html .text-blue-700, html .text-blue-800,
html .text-purple-700, html .text-purple-800, html .text-violet-700 { color: var(--info-ink); }
html .border-indigo-200, html .border-indigo-300, html .border-indigo-400,
html .border-indigo-500, html .border-sky-200, html .border-sky-300,
html .border-blue-200, html .border-blue-300, html .border-blue-400 { border-color: var(--info-line); }
html .hover\:bg-indigo-100:hover, html .hover\:bg-sky-100:hover,
html .hover\:bg-blue-100:hover { background-color: var(--inset-strong); }

/* dodatečné odstíny, které v mapování chyběly a v tmavém režimu splývaly */
html .bg-orange-50, html .bg-orange-100 { background-color: var(--amber-soft); }
html .bg-orange-200 { background-color: var(--inset-strong); }
html .hover\:bg-orange-100:hover { background-color: var(--amber-soft); }
html .text-orange-600, html .text-orange-700, html .text-orange-800,
html .text-orange-900, html .text-amber-400, html .text-amber-950 { color: var(--amber-ink); }
html .text-green-800, html .text-green-900, html .text-emerald-400 { color: var(--green); }
html .text-red-400, html .text-red-900 { color: var(--red-ink); }
html .border-emerald-500, html .border-emerald-600, html .border-green-500,
html .border-green-600 { border-color: var(--green); }
html .border-red-500, html .border-red-600 { border-color: var(--red-ink); }
html .border-amber-500, html .border-amber-600 { border-color: var(--amber-ink); }

/* Sytá modrá tlačítka a pruhy (debrief na projektor, „Nastavit zůstatek", dvojrole).
 * Plné indigo v tmavém režimu doslova svítí, proto ho tlumíme — bílý text na něm zůstává. */
html .bg-indigo-600, html .bg-indigo-700, html .bg-blue-500,
html .bg-blue-600 { background-color: var(--info-strong); color: var(--info-strong-ink); }
html .hover\:bg-indigo-700:hover, html .hover\:bg-indigo-800:hover,
html .hover\:bg-blue-600:hover { background-color: var(--info-strong-hover); }

/* Varianty s průhledností (Tailwind je generuje jako vlastní třídy „bg-indigo-50/60").
 * Selektor bez lomítka je nezasáhne — přesně proto zůstal v učitelském rozhraní
 * světlý pruh „Nastavit zůstatek na účtu" (Bětka, fotka 30. 7. 19:41). */
html .bg-indigo-50\/60, html .bg-indigo-50\/40 { background-color: var(--info-bg); }
/* Bětka 4. 8. 2026: „uprav tyto přesvícené dlaždice napříč hrou." Poloprůhledná bílá
 * (bg-white/60, /70…) je stejný případ: v tmavém režimu svítila jako bílá skvrna uvnitř
 * tmavé karty — třeba dlaždice „Tvoje řešení: Půjčka od rodiny" v rozpadu měsíce.
 * Jsou to VNOŘENÉ dlaždice uvnitř barevných boxů, proto --inset (o odstín jinak než karta). */
html .bg-white\/50, html .bg-white\/60, html .bg-white\/70,
html .bg-white\/80, html .bg-white\/90 { background-color: var(--inset); }
html .bg-slate-900\/70 { background-color: var(--ink-surface); }
html .text-emerald-700\/80, html .text-emerald-800\/80 { color: var(--green); }
html .text-red-700\/80 { color: var(--red-ink); }
html .border-slate-700\/60 { border-color: var(--card-line); }

/* Zvýraznění VYBRANÉ volby v košíku dělá JS třídami s vykřičníkem (Tailwind „important").
 * Bez těchhle dvou řádků zůstala vybraná dlaždice bíle svítivá a světlý text na ní zmizel —
 * přesně to Bětka vyfotila. Musí být taky !important, jinak Tailwind přebije paletu. */
html .\!bg-emerald-50 { background-color: var(--green-soft) !important; }
html .\!border-emerald-500 { border-color: var(--green) !important; }

/* Bětka 5. 8. 2026: „pořád se přesvěcují některé dlaždice." Dva zbylé případy:
 * 1) GRADIENT — dlaždice „Napište mi cokoli" na nástěnce vývoje skládá pozadí
 *    z --tw-gradient-* proměnných, takže remap bg-tříd na ni nedosáhl a v tmavém
 *    režimu svítila celá. Přemapované zastávky = stejný vzhled ve světlé paletě,
 *    tlumený v tmavé. */
html .from-emerald-50 {
  --tw-gradient-from: var(--green-soft) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html .to-white { --tw-gradient-to: var(--card) var(--tw-gradient-to-position); }
/* 2) SVĚTLÉ HOVERY — dlaždice/řádky v tmavém režimu při najetí „blikly" bílou
 *    (hover:bg-slate-50 má 24 výskytů). Mapování drží stejné páry jako klidové třídy. */
html .hover\:bg-slate-50:hover, html .hover\:bg-slate-100:hover,
html .hover\:bg-gray-50:hover, html .hover\:bg-gray-100:hover { background-color: var(--inset); }
html .hover\:bg-slate-200:hover, html .hover\:bg-slate-300:hover { background-color: var(--inset-strong); }
html .hover\:bg-emerald-50:hover, html .hover\:bg-emerald-100:hover,
html .hover\:bg-green-50:hover, html .hover\:bg-green-100:hover { background-color: var(--green-soft); }
html .hover\:bg-amber-50:hover, html .hover\:bg-amber-100:hover { background-color: var(--amber-soft); }
html .hover\:bg-red-50:hover, html .hover\:bg-red-100:hover { background-color: var(--red-soft); }
/* žluté plovoucí tlačítko (nástěnka vývoje) — hover drží odznakovou žlutou, jen ji nezesvětlí */
html .hover\:bg-amber-300:hover { background-color: var(--tag); filter: brightness(1.08); }

/* ── formulářová pole ───────────────────────────────────────────────────── */
html input, html select, html textarea {
  background-color: var(--card); color: var(--ink); border-color: var(--card-line);
}
html input::placeholder, html textarea::placeholder { color: var(--faint); }

/* ── texty nápověd a dokumentace ────────────────────────────────────────────
 * Dřív byl stejný blok zkopírovaný ve třech šablonách (admin_project, admin_help,
 * help_page) s pevnými barvami. Je tu jednou, barvy jdou z palety.
 */
.prose-like h1, .prose-help h1 { font-size: 1.5rem; font-weight: 800; margin: .3rem 0 .7rem;
  color: var(--green); border-bottom: 2px solid var(--green); padding-bottom: .3rem; }
.prose-like h2, .prose-help h2 { font-size: 1.18rem; font-weight: 700; margin: 1.2rem 0 .4rem;
  color: var(--green); border-bottom: 1px solid var(--card-line); padding-bottom: .2rem; }
.prose-like h3, .prose-help h3 { font-size: 1.02rem; font-weight: 700; margin: .85rem 0 .3rem;
  color: var(--green); }
.prose-like p, .prose-help p { margin: .5rem 0; line-height: 1.6; color: var(--ink); }
.prose-like ul, .prose-help ul { list-style: disc; padding-left: 1.3rem; margin: .4rem 0; }
.prose-like ol, .prose-help ol { list-style: decimal; padding-left: 1.3rem; margin: .4rem 0; }
.prose-like li, .prose-help li { margin: .2rem 0; color: var(--ink); }
.prose-like strong, .prose-help strong { color: var(--ink); font-weight: 700; }
.prose-like a, .prose-help a { color: var(--green); text-decoration: underline; }
.prose-like code, .prose-help code { background: var(--inset); color: var(--ink);
  padding: .1rem .3rem; border-radius: .25rem; font-size: .88em; }
.prose-like pre { background: var(--inset); color: var(--ink); padding: .6rem .8rem;
  border-radius: .4rem; overflow-x: auto; margin: .5rem 0; }
.prose-like pre code { background: none; padding: 0; }
.prose-like table, .prose-help table { width: 100%; border-collapse: collapse;
  font-size: .88rem; margin: .6rem 0; }
.prose-like th, .prose-like td, .prose-help th, .prose-help td {
  border: 1px solid var(--card-line); padding: .3rem .6rem; text-align: left; vertical-align: top; }
.prose-like th, .prose-help th { background: var(--inset); color: var(--ink); }
.prose-like hr { border: 0; border-top: 1px solid var(--card-line); margin: 1rem 0; }
.prose-like blockquote { border-left: 3px solid var(--card-line); padding-left: .8rem;
  color: var(--muted); font-style: italic; }
.prose-help blockquote { border-left: 4px solid var(--green); background: var(--green-soft);
  padding: .4rem .8rem; margin: .6rem 0; color: var(--ink); }

/* ── přepínač režimu ──────────────────────────────────────────────────────
 * Bětka 3. 8. 2026: dvě volby vedle sebe v pilulce, aktivní podbarvená.
 * Který režim běží, se pozná z třídy `dark` na <html> — čistě CSS, bez JS stavu. */
.rezim-prepinac {
  display: inline-flex; align-items: center; gap: .15rem;
  background: rgba(0,0,0,.28); border-radius: 9999px; padding: .16rem;
}
.rezim-volba {
  display: inline-flex; align-items: center; gap: .3rem;
  background: transparent; border: 0; color: #fff; cursor: pointer;
  border-radius: 9999px; padding: .28rem .75rem; font-size: .82rem; font-weight: 600;
  line-height: 1.2; white-space: nowrap; opacity: .72; transition: background .12s, opacity .12s;
}
.rezim-volba:hover { opacity: 1; background: rgba(255,255,255,.14); }
/* aktivní volba: ve světlém režimu „Světlý", v tmavém „Tmavý" */
html:not(.dark) .rezim-volba--svetly,
html.dark .rezim-volba--tmavy { background: rgba(255,255,255,.92); color: #1f2937; opacity: 1; }
@media (max-width: 640px) { .rezim-volba span { display: none; } .rezim-volba { padding: .28rem .5rem; } }

/* ── horní panel studenta (zadání Bětky 30. 7. 2026) ─────────────────────────
 * Avatar · identita rodiny · sezónní kalendář, pod tím tři dlaždice s čísly.
 * Barvy odznaků pásma jsou přesně ze zadání; v tmavém režimu je odznak jantarový
 * (červená by na tmavém pozadí zapadla) a popis rodiny světlejší, ať je čitelný.
 */
:root {
  --low-bg: #f6e2d5;  --low-ink: #a5451f;
  --avg-bg: #f7ecd3;  --avg-ink: #8a6212;
  --high-bg: #e3edf7; --high-ink: #2c5d8a;
  --avatar-bg: #e8f3ee;
  --bar-track: #e6dcc9;
  --panel-muted: #8f8065;
  --sezonni-bg: #fdf3e3;  --sezonni-ram: #e6c48a;  --sezonni-text: #8a5a12;
}
html.dark {
  --low-bg: #3a2f14;  --low-ink: #fcd34d;
  --avg-bg: #3a2f14;  --avg-ink: #fcd34d;
  --high-bg: #1c2e44; --high-ink: #7db8e8;
  --avatar-bg: #123326;
  --bar-track: #454d70;
  --panel-muted: #c3c8db;
  --sezonni-bg: #3a2f14;  --sezonni-ram: #7a6428;  --sezonni-text: #fcd34d;
}

.panel-rodiny {
  background: var(--card); border: 1px solid var(--card-line); border-radius: 1rem;
  overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); margin-bottom: 1rem;
}
.panel-radek { display: flex; gap: 1rem; padding: 1rem 1.1rem 0; align-items: center; }
.panel-stred { flex: 1; text-align: center; min-width: 0; }

.panel-avatar {
  flex: none; padding: .5rem; border-radius: .9rem;
  border: 2px solid var(--card-line); background: var(--avatar-bg);
}
.panel-avatar img { width: 76px; height: 76px; object-fit: contain; display: block; }
/* Uvítání nové rodiny — obrázek je tam hlavní prvek, tak je větší (Bětka 3. 8. 2026). */
.panel-avatar--velky img { width: 132px; height: 132px; }

.panel-tag {
  display: inline-block; font-size: .66rem; font-weight: 700; padding: .18rem .62rem;
  border-radius: 1.25rem; text-transform: uppercase; letter-spacing: .3px;
}
.panel-tag--low { background: var(--low-bg); color: var(--low-ink); }
.panel-tag--avg { background: var(--avg-bg); color: var(--avg-ink); }
.panel-tag--above { background: var(--high-bg); color: var(--high-ink); }

.panel-jmeno { font-weight: 800; font-size: 1.2rem; margin: .3rem 0 .2rem; color: var(--ink); }
.panel-meta { color: var(--panel-muted); font-size: .8rem; line-height: 1.45; }
.panel-pozn { color: var(--panel-muted); font-size: .72rem; margin-top: .25rem; }

.panel-kalendar { flex: none; text-align: center; padding: .6rem .75rem; }
.panel-ikona { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; margin: 0 auto .25rem; }
.panel-ikona img { width: 100%; height: 100%; object-fit: contain; }
.panel-emoji { font-size: 3.2rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
.panel-mesic { font-size: .78rem; font-weight: 800; color: var(--green); }
.panel-poradi { font-size: .78rem; font-weight: 700; color: var(--ink); }
.panel-poradi b { font-size: .95rem; }

.panel-dlazdice { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: .6rem; padding: .9rem 1.1rem 1rem; }
/* účty už nejsou tři dlaždice — spokojenost je vlastní pruh pod panelem (Bětka 3. 8. 2026) */
.panel-dlazdice--ucty { grid-template-columns: 1fr 1fr; }
.panel-dlazdice-box { background: var(--inset); border-radius: .65rem; padding: .6rem .8rem; }
.panel-lbl { font-size: .66rem; color: var(--panel-muted); text-transform: uppercase; letter-spacing: .3px; }
.panel-lbl--cil { margin-top: .3rem; text-transform: none; }
.panel-val { font-weight: 800; font-size: 1.1rem; margin-top: .12rem; color: var(--ink); }
.panel-val--minus, .panel-val--nizka { color: var(--red-ink); }
.panel-val--stredni { color: var(--amber-ink); }
.panel-val--vysoka { color: var(--green); }
.panel-pruh { height: 8px; background: var(--bar-track); border-radius: 5px; overflow: hidden; margin-top: .45rem; }
.panel-pruh > span { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.panel-pruh > .panel-pruh--nizka { background: var(--red-ink); }
.panel-pruh > .panel-pruh--stredni { background: var(--amber-ink); }

/* ── rozklad příjmu (Bětka 3. 8. 2026) ──────────────────────────────────────
 * „ZACHOVAT OBA PŘÍJMY ZVLÁŠŤ… NA KONCI SEČÍST." Každý vydělávající má svůj řádek
 * hrubá − odvody = čistá; pod nimi součet. Znaménka mezi dlaždicemi říkají, jak
 * se k čisté částce došlo. */
.panel-prijmy { padding: 0 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.prijem-radek { display: flex; flex-direction: column; gap: .3rem; }
/* jméno je vlastní řádek NAD poli — pole tak zůstanou tři stejně široká vedle sebe
   (Bětka 3. 8. 2026: „přizpůsob ty vnitřní panely, aby byly jednotné a vedle sebe") */
.prijem-kdo { display: flex; align-items: baseline; gap: .4rem; }
.prijem-ikona { font-size: .95rem; }
.prijem-jmeno { font-weight: 800; font-size: .88rem; color: var(--ink); }
.prijem-role { font-size: .68rem; color: var(--panel-muted); }
.prijem-mriz { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: .45rem; align-items: stretch; margin-bottom: .35rem; }
.prijem-mriz:last-child { margin-bottom: 0; }
/* 4 pole = obrat/zisk − pojistné − daň = čistý (Bětka 4. 8. 2026: „daň rozděl") */
.prijem-mriz--4 { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
.prijem-box { background: var(--inset); border-radius: .55rem; padding: .45rem .65rem;
  display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.prijem-box--cisty { background: var(--green-soft); }
/* mezivýsledek (zisk živnostníka) — vede do dalšího řádku, tak je odlišený jemně */
.prijem-box--mezi { background: var(--inset); box-shadow: inset 0 0 0 1px var(--card-line); }
.prijem-poznamka { text-transform: none; letter-spacing: 0; opacity: .85; }
.prijem-val--bonus { color: var(--green); }
.prijem-val--nula { color: var(--panel-muted); }
.prijem-lbl { font-size: .62rem; color: var(--panel-muted); text-transform: uppercase;
  letter-spacing: .3px; }
.prijem-val { font-weight: 800; font-size: .98rem; color: var(--ink); }
.prijem-val--minus { color: var(--red-ink); }
.prijem-box--cisty .prijem-val { color: var(--green); }
.prijem-znak { font-weight: 800; color: var(--panel-muted); align-self: center; }
.prijem-soucet { display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--card-line); padding-top: .5rem; font-size: .85rem;
  color: var(--ink); }
.prijem-soucet strong { font-size: 1.05rem; color: var(--green); }

/* ── spokojenost jako samostatný pruh pod panelem ─────────────────────────── */
.spokojenost-lista { display: flex; align-items: center; gap: 1rem;
  background: var(--card); border: 1px solid var(--card-line); border-radius: .75rem;
  padding: .8rem 1.1rem; margin-bottom: .9rem; }
.spokojenost-popis { font-weight: 800; font-size: .85rem; color: var(--ink); white-space: nowrap; }
.spokojenost-drah { flex: 1; height: 12px; background: var(--bar-track); border-radius: 7px;
  overflow: hidden; }
.spokojenost-vypln { display: block; height: 100%; border-radius: 7px; background: var(--green); }
.spokojenost-vypln--nizka { background: var(--red-ink); }
.spokojenost-vypln--stredni { background: var(--amber-ink); }
.spokojenost-pct { font-weight: 800; font-size: 1.05rem; color: var(--green); }
.spokojenost-pct--nizka { color: var(--red-ink); }
.spokojenost-pct--stredni { color: var(--amber-ink); }

/* mobil: tři horní bloky pod sebe, dlaždice na jeden sloupec */
@media (max-width: 640px) {
  .panel-radek { flex-direction: column; padding-bottom: .5rem; }
  .panel-dlazdice { grid-template-columns: 1fr; }
  .prijem-mriz, .prijem-mriz--4 { grid-template-columns: 1fr; }
  .prijem-znak { display: none; }
  .spokojenost-lista { flex-wrap: wrap; }
}

/* Sezónní nákup v košíku (Bětka 4. 8. 2026) — odliší blok, který je jen tenhle měsíc,
   a upozornění na příští měsíc, ať se dá naspořit. */
.basket-sezonni { border-color: var(--sezonni-ram); background-color: var(--sezonni-bg); }
.basket-predem { background-color: var(--sezonni-bg); color: var(--sezonni-text);
                 border: 1px solid var(--sezonni-ram); }

/* ── Volný čas 2.0: dlaždice (Bětka 4. 8. 2026, podle jejího náhledu) ──────────
   Dřív to byla mřížka zaškrtávátek, kde byla vidět jen cena. Teď má každá aktivita
   obrázek (nebo emoji), cenu za celou rodinu, typ zážitku a počet bodů. */
.akce-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .6rem; }
.akce-dlazdice { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .15rem; background: var(--inset); border: 2px solid var(--card-line);
  border-radius: .75rem; padding: .7rem .5rem .55rem; text-align: center;
  transition: border-color .12s, background-color .12s; }
.akce-dlazdice:hover { border-color: var(--green); }
.akce-dlazdice:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
/* Vybraná dlaždice: `--vybrana` přijde ze serveru po načtení stránky, `:has(input:checked)`
   drží barvu HNED po kliknutí. Bez toho dítě klikalo naslepo a nevšimlo si, že se mu peníze
   odečítají (Honza 14. 8. 2026, poznámka #20). Stejné pravidlo má u voleb karty `.ev-opt`. */
.akce-dlazdice--vybrana,
.akce-dlazdice:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.akce-fajfka { position: absolute; top: .35rem; right: .4rem; font-size: .6rem; font-weight: 800;
  color: var(--green); opacity: 0; }
.akce-dlazdice--vybrana .akce-fajfka,
.akce-dlazdice:has(input:checked) .akce-fajfka { opacity: 1; }
.akce-obrazek { width: 4.5rem; height: 4.5rem; object-fit: contain; margin-bottom: .1rem; }
.akce-emoji { font-size: 2.6rem; line-height: 4.5rem; height: 4.5rem; }
.akce-nazev { font-weight: 700; font-size: .78rem; color: var(--ink); line-height: 1.15; }
.akce-cena { font-weight: 800; font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.akce-zaosobu { font-size: .62rem; color: var(--panel-muted); }
.akce-paticka { display: flex; align-items: center; justify-content: center; gap: .35rem;
  flex-wrap: wrap; margin-top: .3rem; }
.akce-typ { font-size: .6rem; color: var(--panel-muted); }
.akce-body { font-size: .65rem; font-weight: 800; color: var(--green);
  background: var(--green-soft); border-radius: .5rem; padding: .05rem .35rem; }
.akce-body--bonus { box-shadow: inset 0 0 0 1px var(--green); }
@media (max-width: 640px) {
  .akce-mrizka { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .45rem; }
  .akce-obrazek, .akce-emoji { width: 3.4rem; height: 3.4rem; line-height: 3.4rem; font-size: 2rem; }
}

/* ── Učitelská úvodní strana (Bětka 4. 8. 2026) ────────────────────────────────
   „Učitelská část je na počítači dost nepřehledná, většina učitelů bude na notebooku."
   Drobné odkazy v jedné řádce nahradily dlaždice, formulář má mřížku s pevnou šířkou
   a učitel bez třídy dostane rozcestník místo prázdného boxu. */
.ucitel-rozcestnik { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .7rem; }
.ucitel-dlazdice { display: flex; flex-direction: column; gap: .1rem;
  background: var(--card); border: 1px solid var(--card-line); border-radius: .75rem;
  padding: .85rem 1rem; text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s; }
.ucitel-dlazdice:hover { border-color: var(--green); box-shadow: 0 2px 10px rgba(0,0,0,.10);
  transform: translateY(-1px); }
.ucitel-ikona { font-size: 1.35rem; line-height: 1.5; }
.ucitel-nazev { font-weight: 800; font-size: .92rem; color: var(--ink); }
.ucitel-popis { font-size: .72rem; color: var(--panel-muted); line-height: 1.3; }

.ucitel-start { background: var(--card); border: 1px solid var(--card-line);
  border-radius: 1rem; padding: 1.4rem 1.6rem; max-width: 56rem; }
.ucitel-start-nadpis { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin-bottom: .4rem; }
.ucitel-start-text { font-size: .92rem; color: var(--panel-muted); line-height: 1.55;
  max-width: 44rem; }
.ucitel-kroky { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.ucitel-kroky li { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem;
  color: var(--ink); line-height: 1.45; }
.ucitel-krok-cislo { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; }
.ucitel-start-tip { margin-top: 1.1rem; font-size: .82rem; color: var(--panel-muted);
  background: var(--inset); border-radius: .6rem; padding: .6rem .8rem; }

/* Formulář nové třídy — mřížka místo jedné dlouhé řady.
   Honza 16. 8. 2026: „založit třídu je takové nedotažené na šířku". Karta měla
   max-width 56rem, zatímco seznam tříd pod ní jde přes celou šířku, takže na
   monitoru končila dřív a vypadalo to rozbitě. Omezení se proto přesunulo na
   MŘÍŽKU POLÍ uvnitř — původní důvod (pole se nemají roztáhnout přes celou
   obrazovku, Bětka 4. 8. 2026) platí dál, ale karta už lícuje se třídami. */
.ucitel-form-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .9rem 1rem; align-items: start; max-width: 56rem; }
.ucitel-pole-siroke { grid-column: span 2; min-width: 0; }
.ucitel-pole { min-width: 0; }
@media (max-width: 640px) {
  .ucitel-rozcestnik { grid-template-columns: 1fr; }
  .ucitel-start { padding: 1.1rem; }
  .ucitel-pole-siroke { grid-column: span 1; }
}