/* Světlý vzhled. Předměty se liší odstínem: šablona pošle v --h číslo 0-360,
   barvu z něj složí až tohle CSS. */
:root{
  color-scheme:light;          /* scrollbary a formulářové prvky drží světlé */
  --bg:#f2f2f2; --panel:#fff; --sunken:#ededed;
  --ink:#141414; --muted:#6d6d6d; --line:#d4d4d4;
  --bad:#a11; --bad-soft:rgba(170,17,17,.1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1{font-size:17px;margin:0;font-weight:600}
h2{font-size:12px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
code{background:var(--sunken);border:1px solid var(--line);border-radius:3px;padding:1px 5px;font-size:12px}

button,select,input{font:inherit;border:1px solid var(--line);border-radius:4px;
  background:var(--panel);color:var(--ink)}
button{cursor:pointer;padding:6px 11px}
select,input{padding:5px 8px}
button:hover{border-color:var(--ink)}
/* Odkaz, který má vypadat jako tlačítko — hlavička přepíná mezi rozvrhem,
   změnou hesla a správou účtů. */
.btn{display:inline-flex;align-items:center;padding:6px 11px;border:1px solid var(--line);
  border-radius:4px;background:var(--panel);color:var(--ink);text-decoration:none;font:inherit}
.btn:hover{border-color:var(--ink)}
button.primary{background:var(--ink);border-color:var(--ink);color:#fff}
button.danger:hover{border-color:var(--bad);color:var(--bad)}
:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ---------- hlavička ---------- */
header{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);
  padding:10px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sub{color:var(--muted);font-size:12px;font-weight:400}
.stats{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.stat{background:var(--sunken);border:1px solid var(--line);border-radius:4px;padding:4px 10px;line-height:1.25}
.stat b{display:block;font-size:16px;font-weight:600}
.stat span{font-size:11px;color:var(--muted)}
.stat.bad b{color:var(--bad)}
.tools{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- rozvržení ---------- */
main{display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px;padding:14px;align-items:start}
main.single{grid-template-columns:minmax(0,1fr)}
.panel{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px}
aside{position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto}
@media (max-width:1100px){
  main{grid-template-columns:minmax(0,1fr)}
  aside{position:static;max-height:none;overflow:visible}
}

/* ---------- karty předmětů ---------- */
.card{border:1px solid var(--line);border-left:3px solid hsl(var(--h) 55% 48%);border-radius:4px;
  padding:8px 10px;margin-bottom:8px}
.card.off{opacity:.45;border-left-color:var(--line)}
.card-h{display:flex;align-items:baseline;gap:7px}
.card-h .zk{font-weight:700}
.card-h .cr{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.card .nm{font-size:12px;color:var(--muted);margin:1px 0 6px}
.card label{display:flex;gap:6px;align-items:center;cursor:pointer;user-select:none}
/* Zaškrtávátko zápisu se nekreslí — stav karty už říká barevný proužek vlevo
   a zšednutí. Zůstává ale v DOM a v pořadí tabulátoru, jinak by se předmět
   nedal zapsat z klávesnice ani odečítačem. Proto ne display:none. */
.card-h input[type=checkbox]{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.card-h label{position:relative}
.card-h label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px;
  border-radius:3px}
.tags{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.tag{font-size:11px;padding:1px 7px;border-radius:20px;border:1px solid var(--line);
  background:var(--sunken);color:var(--muted)}
.tag.pov{border-color:var(--ink);color:var(--ink)}
.tag.miss{border-color:var(--bad);color:var(--bad)}
.picked{font-size:11px;color:var(--muted);margin-top:6px;display:flex;flex-direction:column;gap:2px}
.picked b{color:var(--ink);font-weight:600}
.picked .row{display:flex;gap:6px;align-items:center}
.picked .none{color:var(--bad)}
.picked button{padding:0 5px;font-size:11px;line-height:16px}

/* ---------- lišty nad rozvrhem ---------- */
.progbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line);font-size:12.5px}
.progbar .sub{margin-left:auto}
.progbar label{display:flex;gap:5px;align-items:center;color:var(--muted)}
.progbar select,.rules select{font-size:12.5px;padding:3px 6px}

/* ---------- hlášky ---------- */
.warnbox,.okbox,.infobox{border:1px solid var(--line);border-left-width:3px;border-radius:4px;
  padding:8px 10px;margin-bottom:10px;font-size:12.5px;background:var(--sunken)}
.warnbox{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.warnbox.warn{border-color:var(--line);border-left-color:var(--ink);background:var(--sunken);color:var(--ink)}
.okbox{border-left-color:var(--ink)}
.infobox{border-left-color:var(--muted)}
.warnbox ul{margin:4px 0 0;padding-left:18px}
.unmet,.nostore{color:var(--bad)}
.hint{font-size:12px;color:var(--muted);margin-bottom:10px}

/* ---------- mřížka ---------- */
.gridwrap{overflow-x:auto}
.grid{display:grid;gap:3px;min-width:1080px;grid-template-columns:52px repeat(16,minmax(58px,1fr))}
.th{font-size:11px;color:var(--muted);text-align:center;padding:2px 0;border-bottom:1px solid var(--line)}
.daylbl{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;
  writing-mode:vertical-rl;transform:rotate(180deg);background:var(--sunken);
  border:1px solid var(--line);border-radius:4px}
.slot{border-radius:3px;background:var(--sunken);min-height:46px}

/* Vybrané bloky jsou vyplněné, nevybrané jen obrysy — v režimu „všechno“ je
   na ploše 76 bloků a rozdíl v odstínu výplně by zanikl. Cvičení zůstávají
   světlá, přednášky tmavé. Výplň, silnější rám a stín stačí; fajfka v rohu
   říkala totéž potřetí a přetahovala se o místo se značkou obsazenosti. */
.ev{border-radius:3px;padding:4px 6px;font-size:11px;line-height:1.25;overflow:hidden;cursor:pointer;
  position:relative;min-height:46px;border:1px solid hsl(var(--h) 45% 62%);
  background:hsl(var(--h) 60% 98%);color:hsl(var(--h) 45% 42%)}
.ev .c{font-weight:700;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .m{opacity:.8;font-size:10px;display:flex;gap:5px;flex-wrap:wrap}
.ev.alt{border-style:dashed;opacity:.5}
.ev.alt:hover{opacity:1;box-shadow:0 1px 3px rgba(0,0,0,.2);z-index:3}
.ev.sel:not(.fixed):hover{filter:brightness(.93)}
.ev.sel{font-weight:600;z-index:2;border:2px solid hsl(var(--h) 55% 35%);
  background:hsl(var(--h) 70% 80%);color:hsl(var(--h) 70% 18%);
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ev.sel:not(.cv){background:hsl(var(--h) 52% 35%);color:#fff}
.ev.fixed{cursor:default}
.ev.conflict{border-color:var(--bad);
  background-image:repeating-linear-gradient(-45deg,transparent 0 5px,var(--bad-soft) 5px 10px)}
.ev.clash{outline:2px solid var(--bad);outline-offset:-2px}

/* ---------- legenda ---------- */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:10px}
.legend i{--h:215;display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-2px;
  margin-right:4px;border:1px solid hsl(var(--h) 45% 62%);background:hsl(var(--h) 60% 98%)}
.legend i.key-lecture{background:hsl(var(--h) 52% 35%);border:2px solid hsl(var(--h) 55% 35%)}
.legend i.key-sel{background:hsl(var(--h) 70% 80%);border:2px solid hsl(var(--h) 55% 35%)}
.legend i.key-alt{border-style:dashed;opacity:.5}
.legend i.key-conflict{border-color:var(--bad);
  background-image:repeating-linear-gradient(-45deg,transparent 0 3px,var(--bad-soft) 3px 6px)}
.legend i.key-clash{outline:2px solid var(--bad);outline-offset:-2px}

/* ---------- dialogy ---------- */
dialog{border:1px solid var(--line);border-radius:6px;padding:16px;max-width:560px;
  background:var(--panel);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog h3{margin:0 0 12px;font-size:15px}
dialog label{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:12.5px;
  margin-bottom:8px}
dialog input{width:100%}
dialog .or{color:var(--muted);font-size:12.5px;margin:0 0 8px}
dialog .sub{margin:10px 0 0}
dialog .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.rules{display:flex;flex-direction:column;gap:8px}
.rules label{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin:0}
.rules label:has(input){justify-content:flex-start}   /* jediný input je zaškrtávátko */

/* ---------- přihlášení ---------- */
.login{max-width:380px;margin:12vh auto}
.login h1{margin-bottom:4px}
.login form{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.login label{display:flex;flex-direction:column;gap:3px;color:var(--muted);font-size:12.5px}
.login button{align-self:flex-start}
.tools form{display:contents}

.busy{opacity:.6;pointer-events:none}

/* ---------- správa účtů ---------- */
table.users{width:100%;border-collapse:collapse;font-size:12.5px}
table.users th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--line)}
table.users td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.users tr.locked{opacity:.55}
table.users tr.pending td:first-child{box-shadow:inset 3px 0 0 var(--muted)}
table.users .dim{color:var(--muted)}
table.users .num{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
table.users .row-actions{text-align:right;white-space:nowrap}
table.users .row-actions button{padding:3px 8px;font-size:11.5px;margin-left:4px}
.ok{color:#1a7f37}
.warn{color:#8a5a00}
.bad{color:var(--bad)}

/* ---------- hlášení obsazené skupiny ---------- */
/* Značka v rohu, ne tlačítko — hlásí se režimem v horní liště. */
.ev .cap{position:absolute;top:2px;right:2px;line-height:0;color:var(--bad);opacity:.85}
.ev.sel .cap{color:#fff}
.ev.full .c{text-decoration:line-through;text-decoration-thickness:1px}
.ev.full:not(.sel){opacity:.4}
.ev.full:not(.sel):hover{opacity:.85}

#capBtn{display:inline-flex;align-items:center;gap:5px}
#capBtn[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:#fff}

/* V režimu hlášení je klikání jinde: kurzor i zvýraznění to musí dát najevo,
   jinak by uživatel čekal výběr skupiny. */
body.mode-capacity .grid{outline:2px dashed var(--bad);outline-offset:4px;border-radius:4px}
body.mode-capacity .ev.cv{cursor:crosshair}
body.mode-capacity .ev.cv:hover{outline:2px solid var(--bad);outline-offset:-2px;opacity:1}
body.mode-capacity .ev:not(.cv){cursor:not-allowed;opacity:.3}

/* Odsune zbytek lišty doprava — vlevo práce s rozvrhem, vpravo účet. */
.tools .spacer{flex:1;min-width:12px}