/* ═══════════════════════════════════════════════════════════════════════════
   Расписание. Размеры, отступы и скругления берутся из system.css — здесь
   только то, что свойственно именно этой странице.

   Раньше карточка пары описывалась дважды: отдельный блок для компьютера и
   отдельный для телефона, каждый со своими размерами. Теперь разметка одна,
   а различия — в паре правил на узком экране.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Шапка страницы ───────────────────────────────────────────────────── */
.page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Переключатель вида — крупный, как на макете: это основной выбор на
   странице, а не мелкая настройка. */
.page-head .u-seg > a { padding: var(--sp-2) var(--sp-6); font-size: var(--fs-md); }

@media (max-width: 575.98px) {
  .page-head .u-seg { width: 100%; }
  .page-head .u-seg > a { flex: 1; text-align: center; padding: var(--sp-2) var(--sp-3); }
}

/* Кнопка «В виджет» — рядом с заголовком, неброская: это разовое действие. */
.page-head .u-chip { cursor: pointer; font-weight: var(--fw-bold); }
.page-head .u-chip.is-on { border-color: var(--loc); color: var(--loc); }

/* ─── День ─────────────────────────────────────────────────────────────── */
.week-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

/* Номер недели. На подложке --surface приглушённый цвет даёт 4.26 при нужных
   4.5, а bootstrap-класс opacity-75 сверху ронял его до 2.77. */
.week-header .wk-num {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 400;
}

/* ─── Пара ─────────────────────────────────────────────────────────────── */
/* Три колонки: номер, содержимое, правый столбец. Именно сетка, а не поток —
   тогда кабинет и кнопки у всех пар стоят на одной вертикальной линии, и
   взгляд ищет их в одном месте, а не бегает по строке. */
.lesson-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 10px;
  row-gap: 6px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--divider);
}

.lesson-row:last-child { border-bottom: none; }

.lesson-content { min-width: 0; }   /* иначе длинное название распирает колонку */

/* Правый столбец: кабинет сверху, действия под ним */
/* Кабинет и значки держим вместе у верхнего края. Раньше столбец
   растягивался на всю высоту карточки и разносил их по краям — из-за этого
   в середине зияла пустота, которой нет в макете. */
/* Правый столбец: кабинет сверху, действия под ним. Отдельной колонкой —
   в общем ряду со строкой «тип · время · группы» они отнимали у неё ширину,
   и та рассыпалась на три строки. Высоту карточки задаёт содержимое слева. */
.lesson-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  align-self: start;
}

.lesson-acts { display: flex; align-items: center; gap: 2px; }
.lesson-acts .journal-link-area,
.lesson-acts .compare-link-area { display: flex; gap: 2px; margin: 0 !important; }


.lesson-room {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;      /* жирный везде, а не только у активной */
  color: var(--loc);
  white-space: nowrap;   /* «УК 1, 201» — одно значение */
}
.lesson-row.is-active .lesson-room { font-size: 14px; }
.lesson-side .journal-link-area,
.lesson-side .compare-link-area { display: flex; gap: 2px; margin: 0 !important; }

/* Действия — просто значки. Синие рамки-«таблетки» спорили с кабинетом за
   внимание, хотя это второстепенные кнопки. */
/* Значки есть у КАЖДОЙ пары, просто у обычных они приглушены.
   Сам значок мелкий, но нажимаемая область — 40x40: пальцем по 16px не
   попасть, а увеличивать рисунок значило бы утяжелить строку. */
.lesson-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 40px;
  min-height: 40px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  opacity: .55;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: opacity .12s, color .12s, background .12s;
}
.lesson-act:hover { opacity: 1; color: var(--loc); background: var(--surface); }

/* Подписи «Журнал» и «Сравнить» убраны: они занимали до 180px в правом
   столбце, из-за чего название пары ползло на третью строку. Значки понятны
   сами по себе, а наведение показывает подсказку. */
.lesson-act .act-label { display: none; }
.lesson-row.is-active .lesson-act { opacity: .8; }
.lesson-side .journal-link-area { display: flex; gap: var(--sp-1); }

.lesson-side .journal-link-area { margin: 0 !important; }

.lesson-name {
  font-size: 13px;
  font-weight: 400;
  opacity: .85;
  color: var(--text);
  line-height: 1.35;
  min-width: 0;
}

.lesson-row.is-active .lesson-name {
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
}

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-muted);
}

.lesson-row.is-active .lesson-meta { font-size: 12px; }

/* Разделителей-точек нет вовсе. Перед следующим куском точка повисала в
   начале новой строки, после предыдущего — в конце. Промежутка достаточно,
   чтобы куски читались раздельно, и он не ломается при переносе. */
.lesson-meta { column-gap: 10px; }

/* Время не должно разрываться посередине: «8:30–10:05» — одно значение. */
.lesson-meta > span { white-space: nowrap; }

/* Ничего не обрезаем: длинный список групп переносится на новую строку.
   Многоточие скрывало бы данные, а расписание читают ради них. */



/* Окно и выходной — без лишнего веса, это отсутствие пары, а не событие */
.lesson-off {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  letter-spacing: .4px;
}
.lesson-off.is-holiday { color: var(--ok); }

.lesson-row.is-window { opacity: .65; }

/* ─── Идёт сейчас ──────────────────────────────────────────────────────────
   Жёлтый значит «прямо сейчас», и таких мест на странице одно: если пометить
   им что-то ещё, смысл потеряется. */
.lesson-row.is-active {
  border: 1.5px solid var(--now);
  border-radius: 10px;
  padding: 12px;
  margin: 8px 10px;
  background: var(--now-bg);
}

.lesson-row .pair-square {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 700;
  background: var(--surface);
  color: var(--muted-strong);
}

.lesson-row.is-active .pair-square {
  background: var(--now-fill);
  color: var(--now-fill-text);
  font-size: 16px;
}

.active-timer {
  color: var(--now);
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

/* ─── Прогресс идущей пары ─────────────────────────────────────────────── */
.lesson-progress-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.lesson-progress-bar {
  height: 100%;
  width: 0;
  background: var(--today-bg);
  transition: width 1s linear;
}

.lesson-row { position: relative; }

/* ─── Широкий экран ────────────────────────────────────────────────────────
   Размеры из спецификации рассчитаны на телефон. На компьютере строка вдвое
   шире, и тот же 13px текст теряется в пустом поле — поднимаем на ступень. */
@media (min-width: 768px) {
  .lesson-name { font-size: 15px; }
  .lesson-row.is-active .lesson-name { font-size: 16px; }
  .lesson-meta { font-size: 13px; }
  .lesson-row.is-active .lesson-meta { font-size: 13px; }
  .lesson-room { font-size: 15px; }
  .lesson-row.is-active .lesson-room { font-size: 16px; }
  .lesson-row .pair-square { width: 32px; height: 32px; font-size: 16px; }
  .week-header { font-size: 15px; padding: 12px 16px; }
  .lesson-row { padding: 12px 16px; }
  .active-timer { font-size: 13px; }
}

/* ─── Узкий экран ───────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  /* Колонки сохраняем: кабинет остаётся справа сверху, на своей линии.
     Уводить его вниз нельзя — тогда теряется всё, ради чего сетка и нужна. */
  .lesson-row { padding: 10px 4px; }
  .lesson-row.is-active { padding: 12px; }
  .week-header { padding: var(--sp-2) var(--sp-3); }
}

/* ─── Печать ─────────────────────────────────────────────────────────────
   Заголовок с ФИО и периодом нужен только на бумаге: на экране всё это уже
   есть в шапке и в панели фильтров. Правило потерялось, когда я переписывал
   этот файл, и заголовок начал дублироваться на экране. */
.print-only-header { display: none; }

@media print {
  .print-only-header { display: block; }
  .week-card { box-shadow: none; border: 1px solid #000; }
  .lesson-row { border-bottom: 1px solid #000; }
  .lesson-row.is-active { background: none; box-shadow: none; }
}