/* ===== Farby a veľkosti – tu sa upravuje vzhľad =====
   Paleta je odvodená z loga: červená (hlavná), čierna (doplnková), teplé neutrálne pozadie.
   Jednotka --u = 1/100 šírky obrazovky, ale najviac 1/56,25 výšky (aby to sedelo aj na 16:10). */
:root {
  --red: #b00000;
  --red-dark: #8a0000;
  --red-soft: #fbeeee;
  --ink: #1c1b1f;
  --muted: #6a6670;
  --bg: #f1eeea;
  --card: #ffffff;
  --line: #e6e0da;
  --row-alt: #faf4f3;

  --u: min(1vw, 1.7778vh);
  --gap: calc(var(--u) * 1.1);
  --radius: calc(var(--u) * 1.3);
  --shadow: 0 calc(var(--u) * .25) calc(var(--u) * 1.2) rgba(40, 20, 20, .10);

  --fs-base: calc(var(--u) * 1.5);     /* ≈ 29 px na Full HD */
  --fs-title: calc(var(--u) * 2.3);
  --fs-big: calc(var(--u) * 3.6);

  --font: "Segoe UI", "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; cursor: none !important; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.25;
}
.board {
  width: 100vw; height: 100vh;
  display: grid;
  grid-template-rows: 14vh minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--gap);
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0; min-height: 0;
}
/* ---------- Hlavička ---------- */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 1.2);
  overflow: hidden;
}
.logo { height: 12.2vh; width: auto; justify-self: start; display: block; }
.today {
  font-size: var(--fs-title);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  text-transform: none;
}
.clock {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  white-space: nowrap;
}
.clock-hm { font-size: calc(var(--u) * 5.6); letter-spacing: .02em; }
.clock-s  { font-size: calc(var(--u) * 2.6); color: var(--muted); font-weight: 700; }
/* ---------- Hlavná časť ---------- */
.main {
  display: grid;
  grid-template-columns: 68fr 32fr;
  gap: var(--gap);
  min-height: 0;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6) calc(var(--u) * .8);
}
.card-head h1, .card-head h2 {
  font-size: calc(var(--u) * 3);
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.card-head h1::before, .card-head h2::before {
  content: ""; display: inline-block;
  width: calc(var(--u) * .6); height: .8em;
  background: var(--red); border-radius: 99px;
  margin-right: calc(var(--u) * .8);
  vertical-align: -.05em;
}
.chip {
  background: var(--red-soft);
  color: var(--red-dark);
  font-weight: 700;
  padding: calc(var(--u) * .35) calc(var(--u) * 1);
  border-radius: 99px;
  font-size: var(--fs-base);
  white-space: nowrap;
}
.chip:empty { display: none; }
/* ---------- Suplovanie ---------- */
.subs {
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
:root { --cols: minmax(0,15fr) repeat(8, minmax(0,10.6fr)); }
.table-head, .row {
  display: grid;
  grid-template-columns: var(--cols);
  column-gap: calc(var(--u) * .8);
  align-items: center;
  padding: 0 calc(var(--u) * .8);
  margin: 0 calc(var(--u) * 1);
}
.table-head {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--u) * 1.2);
  text-transform: none;
  letter-spacing: 0;
  padding-top: calc(var(--u) * .7);
  padding-bottom: calc(var(--u) * .7);
  border-radius: calc(var(--u) * .8);
}
.table-view {
  flex: 1; min-height: 0;
  overflow: hidden;
  position: relative;
  margin-top: calc(var(--u) * .4);
}
.table-body { will-change: transform; }
.row {
  padding-top: calc(var(--u) * .8);
  padding-bottom: calc(var(--u) * .8);
  border-bottom: 1px solid var(--line);
  min-height: calc(var(--u) * 4.1);
}
.row:nth-child(even) { background: var(--row-alt); }
.row > span { overflow-wrap: anywhere; }
.day-sep {
  background: var(--ink) !important;
  color: #fff;
  font-weight: 700;
  padding: calc(var(--u) * .55) calc(var(--u) * 1.6);
  margin: calc(var(--u) * .6) calc(var(--u) * 1) 0;
  border-radius: calc(var(--u) * .8);
  font-size: calc(var(--u) * 1.35);
  letter-spacing: .03em;
}
.empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: var(--fs-big);
  font-weight: 700;
  color: var(--muted);
  padding: calc(var(--u) * 3);
  background: var(--card);
}
.empty[hidden] { display: none; }
.empty-in small { display: block; margin-top: .5em; font-size: .55em; font-weight: 600; }
/* ---------- Pravý rotujúci panel ---------- */
.panel {
  display: flex; flex-direction: column;
  overflow: hidden;
}
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.slide.active { opacity: 1; }
.slide-body {
  flex: 1; min-height: 0; overflow: hidden;
  padding: 0 calc(var(--u) * 1.6) calc(var(--u) * 1);
  display: flex; flex-direction: column; gap: calc(var(--u) * .8);
}
/* jedálny lístok */
.no-data {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--muted); font-weight: 700; font-size: calc(var(--u) * 2);
}
/* akcie */
.event {
  flex: 1; min-height: 0;
  display: flex; align-items: center; gap: calc(var(--u) * 1.3);
  border-bottom: 1px solid var(--line);
}
.event:last-child { border-bottom: 0; }
.date-badge {
  flex: 0 0 calc(var(--u) * 6.2);
  height: calc(var(--u) * 6.2);
  border-radius: calc(var(--u) * 1);
  background: var(--red); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.date-badge b { font-size: calc(var(--u) * 2.6); font-weight: 800; }
.date-badge small { font-size: calc(var(--u) * 1.1); text-transform: uppercase; letter-spacing: .08em; margin-top: .2em; }
.event .name { font-size: calc(var(--u) * 1.8); font-weight: 800; line-height: 1.15; }
.event .meta { color: var(--muted); font-size: calc(var(--u) * 1.3); margin-top: .15em; }
.event .meta.kto { color: var(--red-dark); font-weight: 700; }
/* fotka */
/* ---------- Bežiaci oznam ---------- */
/* ---------- Chyba načítania ---------- */
.error {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--ink); color: #fff;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border-radius: var(--radius);
  font-size: calc(var(--u) * 1.6); text-align: center; max-width: 80vw;
  z-index: 10;
}
.error[hidden] { display: none; }
/* ---------- Suplovanie: meno chýbajúceho, predmet + trieda, pod tým zastupujúci ---------- */
.row .lesson { font-weight: 800; font-size: calc(var(--u) * 2); }
.row .sub { color: var(--muted); font-weight: 600; font-size: calc(var(--u) * 1.5); }
.subs .row { padding-top: calc(var(--u) * .4); padding-bottom: calc(var(--u) * .4); min-height: 0; }
.row .lesson { font-size: calc(var(--u) * 1.9); }
.row .sub { font-size: calc(var(--u) * 1.4); }
/* ---------- Suplovanie ako tabuľka: riadok = chýbajúci učiteľ, stĺpce = hodiny ---------- */
.table-head { font-size: calc(var(--u) * 1.15); text-align: center; }
.table-head span:first-child { text-align: left; }
.subs .row { align-items: stretch; padding-top: calc(var(--u) * .5); padding-bottom: calc(var(--u) * .5); column-gap: calc(var(--u) * .3); }
.row .who { align-self: center; font-weight: 800; font-size: calc(var(--u) * 1.6); color: var(--red-dark); overflow-wrap: anywhere; }
.row .cell { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .1em; min-height: calc(var(--u) * 4); border-radius: calc(var(--u) * .5); }
.row .cell:not(:empty) { background: var(--red-soft); padding: calc(var(--u) * .3) calc(var(--u) * .2); }
.row .lesson { font-weight: 800; font-size: calc(var(--u) * 1.35); line-height: 1.1; }
.row .sub { font-weight: 600; font-size: calc(var(--u) * 1.15); color: var(--ink); line-height: 1.1; overflow-wrap: anywhere; }
.table-head, .row { padding-left: calc(var(--u) * .5); padding-right: calc(var(--u) * .5); margin-left: calc(var(--u) * .6); margin-right: calc(var(--u) * .6); column-gap: calc(var(--u) * .2); }
.row .who { font-size: calc(var(--u) * 1.45); overflow-wrap: normal; }
.row .cell:not(:empty) { padding: calc(var(--u) * .3) 0; }
.row .sub { font-size: calc(var(--u) * 1.1); overflow-wrap: normal; }
.row .lesson { font-size: calc(var(--u) * 1.3); }
.row .lesson { font-size: calc(var(--u) * 1.7); line-height: 1.05; }
.row .sub { font-size: calc(var(--u) * 1.15); margin-top: .2em; }
.row .who { font-size: calc(var(--u) * 1.5); }
.row .cell { min-height: calc(var(--u) * 6); }
/* ---------- Pravý stĺpec: Oznamy + menší rotujúci panel ---------- */
.side { display: grid; grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap); min-height: 0; min-width: 0; }
.side .card-head { padding: calc(var(--u) * .9) calc(var(--u) * 1.2) calc(var(--u) * .5); }
.side .card-head h1, .side .card-head h2 { font-size: calc(var(--u) * 2.2); }
.side .chip { font-size: calc(var(--u) * 1.1); padding: calc(var(--u) * .2) calc(var(--u) * .7); }
.notices { display: flex; flex-direction: column; overflow: hidden; }
.notices-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 calc(var(--u) * 1.2) calc(var(--u) * 1); display: flex; flex-direction: column; gap: calc(var(--u) * .7); }
.notice { background: var(--red-soft); border-radius: calc(var(--u) * .8); padding: calc(var(--u) * .7) calc(var(--u) * 1); font-size: calc(var(--u) * 1.4); font-weight: 600; line-height: 1.25; }
.notice.muted { background: transparent; color: var(--muted); }
.panel .slide-body { padding: 0 calc(var(--u) * 1.2) calc(var(--u) * .6); gap: calc(var(--u) * .5); }
.panel .event { gap: calc(var(--u) * .9); }
.panel .date-badge { flex-basis: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border-radius: calc(var(--u) * .7); }
.panel .date-badge b { font-size: calc(var(--u) * 1.9); }
.panel .date-badge small { font-size: calc(var(--u) * .9); }
.panel .event .name { font-size: calc(var(--u) * 1.35); }
.panel .event .meta { font-size: calc(var(--u) * 1.05); }
.panel .no-data { font-size: calc(var(--u) * 1.5); }
/* ---------- Hustota tabuľky pri veľa chýbajúcich ---------- */
.dense-1 .row { padding-top: calc(var(--u) * .25); padding-bottom: calc(var(--u) * .25); }
.dense-1 .row .cell { min-height: calc(var(--u) * 4.6); }
.dense-1 .row .lesson { font-size: calc(var(--u) * 1.4); }
.dense-1 .row .sub { font-size: calc(var(--u) * 1.05); margin-top: 0; }
.dense-1 .row .who { font-size: calc(var(--u) * 1.4); }
.dense-2 .row { padding-top: calc(var(--u) * .15); padding-bottom: calc(var(--u) * .15); }
.dense-2 .row .cell { min-height: calc(var(--u) * 3.6); flex-direction: row; flex-wrap: wrap; gap: 0 .35em; }
.dense-2 .row .lesson { font-size: calc(var(--u) * 1.15); display: inline; }
.dense-2 .row .sub { font-size: calc(var(--u) * .95); flex-basis: 100%; }
.dense-2 .row .who { font-size: calc(var(--u) * 1.25); }
.notice { font-size: calc(var(--u) * 1.3); padding: calc(var(--u) * .55) calc(var(--u) * .9); }
/* ---------- Bunka: zastupujúci učiteľ výrazne, predmet a trieda menej ---------- */
.row .cell { flex-direction: column; justify-content: center; gap: .05em; min-height: calc(var(--u) * 5.2); padding: calc(var(--u) * .25) 0; }
.row .cell:empty { padding: 0; }
.row .cell .sub { order: 1; font-size: calc(var(--u) * 1.5); font-weight: 800; color: var(--ink); margin: 0; line-height: 1.05; }
.row .cell .lesson { order: 2; display: block; font-size: calc(var(--u) * 1.1); font-weight: 600; color: var(--muted); line-height: 1.05; }
.dense-1 .row .cell { min-height: calc(var(--u) * 4.2); padding: calc(var(--u) * .15) 0; }
.dense-1 .row .cell .sub { font-size: calc(var(--u) * 1.4); }
.dense-1 .row .cell .lesson { font-size: calc(var(--u) * 1); }
.dense-2 .row .cell { min-height: 0; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: calc(var(--u) * .12) 0; }
.dense-2 .row .cell .sub { font-size: calc(var(--u) * 1.3); flex-basis: auto; }
.dense-2 .row .cell .lesson { font-size: calc(var(--u) * .95); display: block; }
/* Meno sa nikdy nezalomí ani nepretečie do vedľajšej bunky: veľkosť sa prispôsobí šírke bunky. */
.row .cell { container-type: inline-size; min-width: 0; }
.row .cell .sub { white-space: nowrap; font-size: min(calc(var(--u) * 1.5), 15cqw); }
.row .cell .lesson { white-space: nowrap; font-size: min(calc(var(--u) * 1.1), 16cqw); }
.dense-1 .row .cell .sub { font-size: min(calc(var(--u) * 1.4), 15cqw); }
.dense-1 .row .cell .lesson { font-size: min(calc(var(--u) * 1), 16cqw); }
.dense-2 .row .cell .sub { font-size: min(calc(var(--u) * 1.3), 15cqw); }
.dense-2 .row .cell .lesson { font-size: min(calc(var(--u) * .95), 16cqw); }
.dense-2 .row .cell { padding: calc(var(--u) * .2) 0; }
.dense-2 .row .cell .sub { font-size: min(calc(var(--u) * 1.4), 15cqw); }
.dense-2 .row .cell .lesson { font-size: min(calc(var(--u) * 1), 16cqw); }
/* ---------- Najbližšie akcie: pevný panel bez rotácie ---------- */
.panel .slide { position: relative; flex: 1; min-height: 0; opacity: 1; transition: none; pointer-events: auto; }
.panel .event .name { font-size: calc(var(--u) * 1.5); }
.panel .event .meta { font-size: calc(var(--u) * 1.15); }
.panel .date-badge { flex-basis: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8); }
.panel .date-badge b { font-size: calc(var(--u) * 2.1); }
.panel .date-badge { flex-basis: calc(var(--u) * 4); height: calc(var(--u) * 4); }
.panel .date-badge b { font-size: calc(var(--u) * 1.8); }
.panel .event .name { font-size: calc(var(--u) * 1.4); line-height: 1.1; }
.panel .event .meta { font-size: calc(var(--u) * 1.1); }
.panel .event { border-bottom: 1px solid var(--line); }
/* ---------- Náhrada a odpadnutá hodina ---------- */
:root { --amber: #fff0c2; --amber-ink: #7a4d00; --grey: #e4e0dc; }
.row .cell.nahrada:not(:empty) { background: var(--amber); box-shadow: inset 0 0 0 calc(var(--u) * .12) #e6b800; }
.row .cell .tag { order: 3; white-space: nowrap; font-weight: 800; font-style: italic; color: var(--amber-ink); font-size: min(calc(var(--u) * 1), 15cqw); line-height: 1.05; }
.row .cell.odpadla:not(:empty) { background: var(--grey); }
.row .cell.odpadla .sub { color: var(--muted); font-style: italic; }
.row .cell.spojene:not(:empty) { background: #dcebff; box-shadow: inset 0 0 0 calc(var(--u) * .12) #3b82c4; }
.row .cell.spojene .tag { color: #14508c; }
.row .cell.spojene .sub { color: #14508c; }
.row .cell.nahrada.spojene:not(:empty) { background: #dcebff; box-shadow: inset 0 0 0 calc(var(--u) * .12) #e6b800; }
.row .cell .tag.tag-spojene { color: #14508c; }