/* ── Platforma Linda — komponentní vrstva (podklad pro krok D-3) ─────────────
   Ručně psané CSS, ne React: Linda je Django + HTMX a komponenty design systému
   jsou React s inline styly, takže je NELZE použít přímo. Přenositelné jsou jen
   tokeny. Názvy variant se proto drží design systému (primary / secondary /
   ghost / danger, tone=success|warning|danger), aby šlo obojí porovnávat.

   Žádná zadrátovaná barva — vše přes proměnné z tokens/platforma.css.
   Tento soubor je určený ke zkopírování do static/css/ v repozitáři. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.pl{font-family:var(--font-sans);font-size:var(--pl-font-size);line-height:var(--pl-line-height);color:var(--pl-text);background:var(--pl-bg);-webkit-font-smoothing:antialiased}
/* Nativní prvky (zaškrtávací políčka, posuvníky, rozbalovací seznamy) se řídí
   color-scheme, ne našimi proměnnými — bez tohoto řádku by zůstaly světlé. */
.pl.is-dark{color-scheme:dark}
/* Barva textu si vlastní plášťová vrstva, ne tokens/base.css.
   Ten drží h1..h6 a strong/b na --text-heading, což je WEBOVý token (#333333)
   deklarovaný jen na :root — v tmavém režimu se nemá jak překlopit. Ve světlém
   se #333333 shodou okolností rovná --pl-text, takže to šlo přehlédnout; v tmavém
   z toho byl černý nadpis na černém. Všechno, co v .pl nese barvu, ji proto bere
   z --pl-* — web se do dílny nesmí prosakovat. */
.pl h1,.pl h2,.pl h3,.pl h4,.pl h5,.pl h6{color:var(--pl-text)}
.pl b,.pl strong{color:var(--pl-text)}
.pl small{color:var(--pl-muted)}
.pl h1{font-family:var(--font-display);font-size:var(--pl-h1);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pl h2{font-family:var(--font-display);font-size:var(--pl-h2);font-weight:600;line-height:1.3}
.pl h3{font-family:var(--font-sans);font-size:var(--pl-font-size);font-weight:700;line-height:1.35}
/* Odkazy přes :where() — nulová specificita elementu. `.pl a` (0,1,1) by jinak
   přebilo každý jednotřídový odkaz-tlačítko ((0,1,0), např. a.pl-btn.primary
   nebo modulové .ev-btn-pri): nápis na tyrkysové výplni pak dědil akcent
   a splýval s podkladem. Takhle plný odkaz zůstává akcentový a jakákoli
   třída — z vrstvy i ze šablony — vyhrává remízu pořadím. */
.pl :where(a){color:var(--pl-accent);text-decoration:none}
.pl :where(a:hover){text-decoration:underline}
.pl .sub{color:var(--pl-muted);font-size:var(--pl-font-sm)}
.pl .muted{color:var(--pl-muted)}
.pl .none{color:var(--pl-danger)}
.pl .ok{color:var(--pl-success)}
.pl .num{text-align:right;font-variant-numeric:tabular-nums}
.pl .bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pl .spacer{flex:1}

/* ── Panel / card ── */
.pl-card{background:var(--pl-panel);border:1px solid var(--pl-border);border-radius:var(--pl-radius-card);padding:var(--pl-panel-pad);box-shadow:var(--pl-shadow-card)}
/* flush = karta bez vnitřního odsazení, obvykle s tabulkou přes celou šířku.
   overflow-x:auto, ne hidden: široká tabulka (8–9 sloupců) se v užším okně
   jinak uřízne a poslední sloupec — typicky Akce — je nedosažitelný, protože
   stránka se posouvá jen svisle. V šabloně to řeší vlastní obal na každé
   stránce (.bdg-wrap, .rent-wrap); tady je to jednou v komponentní vrstvě.
   Svisle zůstává hidden, aby se držely zakulacené rohy. */
.pl-card.flush{padding:0;overflow:hidden;overflow-x:auto}
.pl-card.link{display:block;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pl-card.link:hover{border-color:var(--pl-accent-fill);box-shadow:var(--pl-shadow-hover);text-decoration:none}

/* ── Tlačítka ──
   Pilulka JEN pro hlavní akci (.primary). Řádkové akce mají 8px rádius —
   v tabulce o stovkách řádků je pilulka vizuální šum. */
.pl-btn{display:inline-flex;align-items:center;gap:6px;height:var(--pl-control-h);padding:0 14px;border:1px solid var(--pl-border);border-radius:var(--pl-radius-control);background:var(--pl-panel);color:var(--pl-text);font-family:inherit;font-size:var(--pl-font-sm);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s,color .12s}
.pl-btn:hover{border-color:var(--pl-accent-fill);background:var(--pl-accent-bg);text-decoration:none}
.pl-btn:focus-visible{outline:none;box-shadow:var(--pl-ring)}
.pl-btn.primary{border-radius:999px;background:var(--pl-accent-fill);border-color:var(--pl-accent-fill);color:var(--pl-on-accent-fill)}
.pl-btn.primary:hover{background:var(--pl-accent-fill-hover);border-color:var(--pl-accent-fill-hover)}
.pl-btn.primary:active{background:var(--pl-accent-fill-active);border-color:var(--pl-accent-fill-active)}
.pl-btn.secondary{border-color:var(--pl-accent-fill);color:var(--pl-accent)}
.pl-btn.ghost{border-color:transparent;background:transparent;color:var(--pl-muted)}
.pl-btn.ghost:hover{background:var(--pl-accent-bg);color:var(--pl-accent);border-color:transparent}
.pl-btn.danger{color:var(--pl-danger)}
.pl-btn.danger:hover{background:var(--pl-danger-bg);border-color:var(--pl-danger)}
.pl-btn.sm{height:var(--pl-control-h-sm);padding:0 9px;font-size:var(--pl-font-xs)}
.pl-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── Odznaky a chipy ──
   Odznak = stav (obdélníkový, 6px — sedí v buňce). Chip = filtr (pilulka). */
.pl-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--pl-radius-badge);font-size:var(--pl-font-xs);font-weight:700;white-space:nowrap;background:var(--pl-accent-bg);color:var(--pl-accent)}
.pl-badge.success{background:var(--pl-success-bg);color:var(--pl-success)}
/* Výstražné odznaky musí být patrné na první pohled — rámeček v plné stavové
   barvě je odlišuje od tichých tónovaných štítků (osoby, kategorie). */
.pl-badge.warning{background:var(--pl-warning-bg);color:var(--pl-warning);border:1.5px solid var(--pl-warning-fill)}
.pl-badge.danger{background:var(--pl-danger-bg);color:var(--pl-danger);border:1.5px solid var(--pl-danger)}
.pl-badge.neutral{background:var(--pl-bg);color:var(--pl-muted)}
.pl-badge.fill{background:var(--pl-accent-fill);color:var(--pl-on-accent-fill)}
/* Uvnitř barevných výplní a hlášek dědí b/strong barvu rodiče, ne --pl-text. */
.pl-badge b,.pl-badge strong,.pl-btn b,.pl-btn strong,.pl-chip b,.pl-chip strong,.pl-alert b,.pl-alert strong,.pl-count b{color:inherit}
.pl-count{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--pl-accent-fill);color:var(--pl-on-accent-fill);font-size:10.5px;font-weight:700;line-height:18px;text-align:center}
.pl-chip{display:inline-flex;align-items:center;gap:6px;height:var(--pl-control-h-sm);padding:0 11px;border:1px solid var(--pl-border);border-radius:999px;background:var(--pl-panel);color:var(--pl-text);font-size:var(--pl-font-xs);font-weight:600;cursor:pointer;white-space:nowrap}
.pl-chip:hover{background:var(--pl-accent-bg)}
.pl-chip.on{background:var(--pl-accent-fill);border-color:var(--pl-accent-fill);color:var(--pl-on-accent-fill)}

/* ── Tabulka ──
   Řádek drží ~27px jako dnes. th je 11px kapitálkami, td 12px — z toho pochází
   většina úspory proti webové stupnici. */
.pl-table{width:100%;border-collapse:collapse}
.pl-table th{padding:7px var(--pl-cell-x);border-bottom:1px solid var(--pl-border);text-align:left;font-size:var(--pl-font-2xs);font-weight:700;color:var(--pl-muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;background:var(--pl-panel)}
.pl-table td{padding:var(--pl-cell-y) var(--pl-cell-x);border-bottom:1px solid var(--pl-border);font-size:var(--pl-font-xs);vertical-align:top}
.pl-table tbody tr:last-child td{border-bottom:none}
.pl-table tbody tr:hover td{background:var(--pl-bg)}
.pl-table th.num,.pl-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.pl-table .sticky th{position:sticky;top:0;z-index:2}
.pl-table tr.group-row td{background:var(--pl-bg);font-weight:700;font-size:var(--pl-font-xs);color:var(--pl-muted);text-transform:none;letter-spacing:0}
.pl-table tr.row-warn td{background:var(--pl-danger-bg)}
.pl-empty{padding:26px;text-align:center;color:var(--pl-muted);font-size:var(--pl-font-sm)}

/* Podbarvení předmětů — jediné místo, kde se výjimka z §6 používá. */
.pl-subj-fyzika>td{background:var(--pl-subj-fyzika)}
.pl-subj-chemie>td{background:var(--pl-subj-chemie)}
.pl-subj-biologie>td{background:var(--pl-subj-biologie)}
.pl-subj-numericko>td,.pl-subj-tsp>td{background:var(--pl-subj-numericko)}
.pl-subj-kriticke>td{background:var(--pl-subj-kriticke)}
.pl-subj-psychologie>td{background:var(--pl-subj-psychologie)}
.pl-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:var(--pl-font-xs);color:var(--pl-muted)}
.pl-legend span{display:inline-flex;align-items:center;gap:5px}
.pl-legend i{width:12px;height:12px;border-radius:3px;border:1px solid var(--pl-border);display:inline-block}

/* ── Formulářové prvky ── */
.pl-field{display:flex;flex-direction:column;gap:4px}
.pl-field>label{font-size:var(--pl-font-xs);color:var(--pl-muted);font-weight:600}
.pl-input,.pl-select{height:var(--pl-control-h);padding:0 10px;border:1px solid var(--pl-border);border-radius:var(--pl-radius-input);background:var(--pl-panel);color:var(--pl-text);font-family:inherit;font-size:var(--pl-font-sm)}
.pl-select{padding-right:26px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--pl-accent) 50%),linear-gradient(135deg,var(--pl-accent) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer}
.pl-input:focus,.pl-select:focus{outline:none;border-color:var(--pl-accent-fill);box-shadow:var(--pl-ring)}
/* Pole jen ke čtení — na registraci tak stojí e-mail z pozvánky: hodnotu
   nese kvůli správci hesel (autocomplete="username"), ale měnit se nedá,
   a tak nemá vypadat jako pole, do kterého lze psát. */
.pl-input[readonly]{background:var(--pl-bg);color:var(--pl-muted);cursor:default}
.pl-input[readonly]:focus{border-color:var(--pl-border);box-shadow:none}
.pl-filters{display:flex;gap:var(--pl-gap);align-items:flex-end;flex-wrap:wrap}

/* ── Hlášky ── */
.pl-alert{display:flex;gap:9px;align-items:flex-start;padding:9px 13px;border-radius:10px;font-size:var(--pl-font-sm);border:1px solid var(--pl-border);background:var(--pl-panel)}
.pl-alert.success{background:var(--pl-success-bg);border-color:var(--pl-success-border);color:var(--pl-success)}
.pl-alert.warning{background:var(--pl-warning-bg);border-color:var(--pl-warning-border);color:var(--pl-warning)}
.pl-alert.danger{background:var(--pl-danger-bg);border-color:var(--pl-danger-border);color:var(--pl-danger)}
.pl-alert.info{background:var(--pl-accent-bg);border-color:var(--pl-info-border);color:var(--pl-accent)}

/* ── Taby ── */
.pl-tabs{display:flex;gap:2px;border-bottom:1px solid var(--pl-border)}
.pl-tab{padding:8px 12px;margin-bottom:-1px;border:none;background:transparent;font-family:inherit;font-size:var(--pl-font-sm);font-weight:600;color:var(--pl-muted);cursor:pointer;border-bottom:2px solid transparent}
.pl-tab:hover{color:var(--pl-text)}
.pl-tab.on{color:var(--pl-accent);border-bottom-color:var(--pl-accent-fill)}

/* ── KPI kachle ── */
.pl-kpis{display:flex;gap:var(--pl-gap);flex-wrap:wrap}
.pl-kpi{border:1px solid var(--pl-border);border-radius:var(--pl-radius-card);padding:9px 15px;background:var(--pl-panel);min-width:88px}
.pl-kpi .n{font-family:var(--font-display);font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;color:var(--pl-text)}
.pl-kpi .l{font-size:var(--pl-font-2xs);color:var(--pl-muted)}

/* ── Mobil ──
   Dnes má pravidla pro malé displeje 8 šablon ze 163 a každý modul si to řeší
   sám. Tady je to jednou v pláštové vrstvě: tabulka se láme na kartičky podle
   data-l, ovládací prvky rostou na 40px (dotyk), vstupy na 16px (iOS nezoomuje). */
/* V kitu jsou mobilní pravidla dvakrát (@media + .pl.is-mobile pro náhledový
   rám 390 px). Tady je jen @media verze — .pl je přímo <body>, takže šířka
   viewportu JE šířka telefonu a duplikát pro kit by byl mrtvý kód. */
@media (max-width:760px){
  .pl-table thead{display:none}
  .pl-table tr{display:block;border-bottom:1px solid var(--pl-border);padding:9px 0}
  .pl-table tbody tr:hover td{background:transparent}
  .pl-table td{display:block;border:0;padding:2px 0;font-size:var(--pl-font-sm)}
  .pl-table td[data-l]::before{content:attr(data-l) ": ";color:var(--pl-muted);font-size:var(--pl-font-xs)}
  .pl-table td.num{text-align:left}
  .pl-table tr.group-row td{padding:8px 0 2px}
  .pl-table tr[class*="pl-subj-"]>td{background:transparent}
  .pl-table tr[class*="pl-subj-"]{border-left:3px solid var(--pl-border);padding-left:9px}
  /* Dotykové cíle: řádkové akce se na telefonu NEZMENŠUJÍ. .sm je hustota pro
     myš na desktopu; na lektorských obrazovkách (Služby, Plán PR) jsou to hlavní
     ovládací prvky, takže dědí --tap-min z design systému. */
  .pl-btn,.pl-btn.sm{height:var(--tap-min);padding:0 16px}
  .pl-btn.sm{padding:0 14px}
  .pl-input,.pl-select{height:40px;font-size:16px}
  .pl-filters{flex-direction:column;align-items:stretch}
  .pl-field{width:100%}

  /* Kalendářní mřížka je 7×N matice, ne seznam záznamů — lámání na kartičky
     jí nesedí (týden by se rozpadl na osm bezkontextových bloků a dny by
     ztratily Po/Út/St). Na telefonu si proto drží tabulkovou podobu a posouvá
     se vodorovně; min-width brání zmáčknutí buněk pod čitelnou šířku. */
  .pl-cal{min-width:620px}
  .pl-cal thead{display:table-header-group}
  .pl-cal tr{display:table-row;padding:0;border-bottom:none}
  .pl-cal td{display:table-cell;border:0;padding:3px;font-size:var(--pl-font-2xs)}
  .pl-cal td::before{content:none}
  .pl-cal td.wk{text-align:center;vertical-align:middle}
}

/* ── Otevřený select ──
   Prohlížeče s customizable select (::picker) dostanou zaoblený seznam
   ve stylu vrstvy; jinde zůstává nativní picker. */
@supports selector(::picker(select)){
  .pl-select,.pl-select::picker(select){appearance:base-select}
  .pl-select{background-image:none}
  .pl-select::picker-icon{color:var(--pl-accent)}
  .pl-select::picker(select){border:1px solid var(--pl-border);border-radius:var(--pl-radius-input);background:var(--pl-panel);color:var(--pl-text);box-shadow:var(--pl-shadow-pop);padding:4px;margin-top:4px}
  .pl-select option{padding:6px 10px;border-radius:calc(var(--pl-radius-input) - 3px);font-size:var(--pl-font-sm)}
  .pl-select option:hover,.pl-select option:focus{background:var(--pl-accent-bg)}
  .pl-select option:checked{font-weight:700;color:var(--pl-accent)}
  .pl-select option::checkmark{color:var(--pl-accent)}
}