/* ============================================================
   ДИЗАЙН-ПЛАН — доска расписания (монитор в коридоре школы)

   Предмет: официальное школьное расписание, читаемое с расстояния
   нескольких метров идущими мимо учениками. Российская школьная
   "классная доска / приказ" эстетика — отсюда мотив штампа
   ("предварительно" / "утверждено") как единственный акцентный
   элемент.

   Палитра:
     --bg          #0F2136  тёмно-синий "школьная доска ночью"
     --bg-panel    #16314D  панели/шапка таблицы
     --ink         #F4F1E8  тёплый белый (мел)
     --ink-dim     #9FB1C4  вторичный текст
     --accent-today #E4A63B  тёплая амбра — "сегодня"
     --accent-next  #4FB6A8  холодная бирюза — "предварительно"
   Функциональные цвета замен заданы техзаданием и не меняются:
     зелёный = замена учителя, оранжевый = замена кабинета,
     жёлтый = деление на группы, синий = обратить внимание.

   Типографика: крупный уплотнённый гротеск для заголовков/штампа
   (системный стек, без внешних шрифтов — надёжность на школьном
   киоске без гарантированного интернета), нейтральный гротеск для
   тела таблицы, табличные цифры для часов.

   Layout (широкий монитор, альбомная ориентация):
   +---------------------------------------------------+
   | школа           ЧЕТВЕРГ 30 АПРЕЛЯ         14:32:07 |
   +---------------------------------------------------+
   |             [ ШТАМП: ПРЕДВАРИТЕЛЬНО ]              |
   +---------------------------------------------------+
   | Урок | 1а | 1б | 2а | ... (пагинация колонок)      |
   +---------------------------------------------------+
   | легенда цветов                                     |
   +---------------------------------------------------+
   | замены на день (таблица)                           |
   +---------------------------------------------------+
   ============================================================ */

:root {
  --bg: #0f2136;
  --bg-panel: #16314d;
  --bg-panel-2: #1c3a5c;
  --ink: #f4f1e8;
  --ink-dim: #9fb1c4;
  --rule: rgba(244, 241, 232, 0.14);
  --accent-today: #e4a63b;
  --accent-next: #4fb6a8;

  --c-teacher: #63b56a;
  --c-teacher-bg: rgba(99, 181, 106, 0.28);
  --c-room: #e0912f;
  --c-room-bg: rgba(224, 145, 47, 0.28);
  --c-split: #e0c62f;
  --c-split-bg: rgba(224, 198, 47, 0.28);
  --c-attention: #4f9fd8;
  --c-attention-bg: rgba(79, 159, 216, 0.28);
  --c-cancelled: #e0615a;

  --font-display: "Bahnschrift", "Segoe UI Semibold", "Arial Narrow", "PT Sans Narrow", Arial, sans-serif;
  --font-body: "Segoe UI", "PT Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
}

.board {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: clamp(10px, 1.4vw, 22px) clamp(16px, 2.2vw, 36px);
  gap: clamp(8px, 1vw, 16px);
}

/* ---------- header ---------- */
.board__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid var(--rule);
  padding-bottom: clamp(6px, 0.8vw, 12px);
}

.school-name {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 22px);
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.date-block {
  text-align: center;
  flex: 1;
}
.date-block__weekday {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.date-block__date {
  font-size: clamp(13px, 1.2vw, 18px);
  color: var(--ink-dim);
}

.clock {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.6vw, 38px);
  color: var(--accent-today);
  min-width: 3ch;
  text-align: right;
}

/* ---------- stamp (signature element) ---------- */
.stamp-row {
  display: flex;
  justify-content: center;
}
.stamp {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(14px, 1.5vw, 22px);
  padding: 0.5em 1.4em;
  border-radius: 999px;
  border: 3px solid currentColor;
  transform: rotate(-1.5deg);
}
.stamp--today {
  color: var(--accent-today);
  background: rgba(228, 166, 59, 0.1);
}
.stamp--preliminary {
  color: var(--accent-next);
  background: rgba(79, 182, 168, 0.08);
  border-style: dashed;
  transform: rotate(-2.5deg);
}
.stamp--confirmed {
  color: #7fd68a;
  background: rgba(127, 214, 138, 0.1);
  transform: rotate(1.5deg);
}
.stamp--confirmed::before { content: "✓ "; }

/* ---------- grid ---------- */
.grid-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.page-indicator {
  display: flex;
  justify-content: center;
  gap: 6px;
  height: 8px;
  margin-bottom: 4px;
}
.page-indicator__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule);
}
.page-indicator__dot.active { background: var(--accent-today); }

.grid {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.grid thead th {
  background: var(--bg-panel);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.15vw, 19px);
  letter-spacing: 0.02em;
  padding: 0.5em 0.3em;
  border: 1px solid var(--rule);
  position: sticky;
  top: 0;
}
.grid .lesson-col { width: 4.2em; }
.grid tbody th {
  background: var(--bg-panel);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(16px, 1.6vw, 24px);
  border: 1px solid var(--rule);
}
.grid td {
  border: 1px solid var(--rule);
  text-align: center;
  vertical-align: middle;
  padding: 0.35em 0.25em;
  font-size: clamp(12px, 1.05vw, 17px);
  line-height: 1.25;
}
.cell__subject { font-weight: 600; }
.cell__teacher { color: var(--ink-dim); font-size: 0.85em; display: block; }
.cell__room { color: var(--ink-dim); font-size: 0.85em; }
.cell__group2 { display: block; margin-top: 0.2em; padding-top: 0.2em; border-top: 1px dashed var(--rule); }

td.is-teacher-changed { background: var(--c-teacher-bg); box-shadow: inset 0 0 0 2px var(--c-teacher); }
td.is-room-changed { background: var(--c-room-bg); box-shadow: inset 0 0 0 2px var(--c-room); }
td.is-teacher-changed.is-room-changed { background: linear-gradient(135deg, var(--c-teacher-bg) 50%, var(--c-room-bg) 50%); }
td.is-split { background: var(--c-split-bg); box-shadow: inset 0 0 0 2px var(--c-split); }
td.is-attention { background: var(--c-attention-bg); box-shadow: inset 0 0 0 2px var(--c-attention); }
td.is-cancelled .cell__subject { text-decoration: line-through; color: var(--c-cancelled); }
td.is-empty { color: var(--rule); }

/* ---------- legend ---------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  justify-content: center;
  font-size: clamp(11px, 0.95vw, 14px);
  color: var(--ink-dim);
}
.legend__item { display: inline-flex; align-items: center; gap: 0.5em; }
.chip { width: 0.9em; height: 0.9em; border-radius: 3px; display: inline-block; }
.chip--teacher { background: var(--c-teacher); }
.chip--room { background: var(--c-room); }
.chip--split { background: var(--c-split); }
.chip--attention { background: var(--c-attention); }
.chip--cancelled { background: var(--c-cancelled); }

/* ---------- substitutions footer ---------- */
.subs {
  background: var(--bg-panel);
  border-radius: 10px;
  padding: clamp(6px, 0.8vw, 12px) clamp(10px, 1.2vw, 18px);
  max-height: 22vh;
  overflow: auto;
}
.subs__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-next);
  font-size: clamp(12px, 1vw, 15px);
  margin-bottom: 0.3em;
}
.subs__table { width: 100%; border-collapse: collapse; font-size: clamp(12px, 1vw, 15px); }
.subs__table th {
  text-align: left; color: var(--ink-dim); font-weight: 500;
  border-bottom: 1px solid var(--rule); padding: 0.3em 0.5em;
}
.subs__table td { padding: 0.3em 0.5em; border-bottom: 1px solid var(--rule); }
.subs__empty { color: var(--ink-dim); text-align: center; padding: 0.6em; }

@media (max-width: 900px) {
  .board__top { flex-wrap: wrap; }
  .clock { order: 3; width: 100%; text-align: center; }
}