/* ─────────────────────────────────────────────────────────────────────────
   Страницы кафедры: «Расписание кафедры» и «Нагрузка кафедры».
   Общее с остальным сайтом берём из system.css (.u-daycard, .u-grid,
   .type-badge); здесь только то, что есть исключительно на этих двух
   страницах. Цвета — строго переменные темы, своих значений не заводим.
   ───────────────────────────────────────────────────────────────────── */

/* ─── Выбор кафедры ──────────────────────────────────────────────────── */
.dept-pick { position: relative; }

.dept-current {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: left;
  cursor: pointer;
}

.dept-current:hover { border-color: var(--loc); }
.dept-current-name { flex: 1 1 auto; min-width: 0; }
.dept-current-chev { flex: 0 0 auto; color: var(--text-muted); font-size: var(--fs-xs); }

.dept-menu {
  width: 100%;
  min-width: 260px;
  max-width: 420px;
  padding: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.dept-search { position: relative; margin-bottom: var(--sp-2); }
.dept-search i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.dept-search .search-input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-sm);
}

.dept-list { max-height: 300px; overflow-y: auto; }

.dept-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  border-radius: var(--r-sm);
}
.dept-row:hover { background: var(--bg-card2); }
.dept-row.is-current { background: var(--loc-strong); }
.dept-row.is-current .dept-row-name,
.dept-row.is-current .dept-pin { color: #fff; }

.dept-row-name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  color: var(--text);
  font-size: var(--fs-sm);
  text-decoration: none;
}

/* Закрепление — булавка, а не красный крестик: на всём сайте красный значит
   «удалить насовсем», а здесь кафедра никуда не девается. */
.dept-pin {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.dept-pin.is-on { color: var(--loc); }
.dept-pin:hover { color: var(--text); }

.dept-empty {
  padding: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.dept-pinned {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.dept-chip {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.dept-chip:hover { border-color: var(--loc); color: var(--loc); }
.dept-chip.active { background: var(--loc-strong); border-color: var(--loc-strong); color: #fff; }

/* ─── Расписание кафедры: матрица «преподаватель × пара» ─────────────── */
.dept-matrix { table-layout: fixed; }

/* Столбец с фамилией не прокручивается вбок: без него ячейки в правой части
   таблицы превращаются в набор цифр без владельца. */
.dept-matrix .col-fio {
  width: 150px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  text-align: left;
  vertical-align: middle;
}

.dept-matrix tbody .col-fio { background: var(--bg-card); }

.dept-matrix .col-fio a {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.dept-matrix .col-fio a:hover { color: var(--loc); }

.dept-matrix td.is-empty { vertical-align: middle; }

/* Строки плотнее: в матрице важна не высота ячейки, а то, сколько
   преподавателей видно за раз. */
.dept-matrix td { padding: 5px; }
.dept-matrix .col-fio { padding: 5px var(--sp-2); }

/* Ячейка занятия — та же, что на «Сравнении»: кабинет крупно, под ним
   бейдж типа и группа. Заливку по типу занятия убрали: цвет держит бейдж,
   иначе на экране семь разноцветных прямоугольников в ряд. */
.dept-cell {
  min-height: 42px;
  padding: var(--sp-1) 6px;
  border-radius: var(--r-sm);
  background: var(--bg-card2);
  border: 1px solid var(--divider);
  line-height: 1.25;
  cursor: pointer;
}
.dept-cell:hover { outline: 1px solid var(--loc); }

.dept-cell-room {
  font-size: 15px;
  font-weight: var(--fw-heavy);
  color: var(--loc);
  white-space: nowrap;
}

.dept-cell-line {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  min-width: 0;
}

.dept-cell-who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-strong);
  font-size: 11px;
}

.dept-matrix .type-badge { min-width: 0; padding: 1px 5px; }

/* Идущая и ближайшая пара. Жёлтая рамка — «сейчас», синяя — «дальше»;
   те же два значения, что на странице расписания. */
.dept-cell.is-now { border-color: var(--today-bg); border-width: 2px; }
.dept-cell.is-next { border-color: var(--loc); }

/* ─── Нагрузка кафедры ───────────────────────────────────────────────── */
/* Фиксированная раскладка: иначе ширину столбца с именем задаёт самый
   длинный список групп, и на телефоне имя занимало пол-экрана, а числа
   часов уезжали за край. */
.dw-table { table-layout: fixed; min-width: 760px; }

.dw-table .col-hours { width: 58px; text-align: center; vertical-align: middle; }
.dw-table .col-total { width: 70px; text-align: center; vertical-align: middle; }
.dw-table .col-more  { width: 118px; text-align: right;  vertical-align: middle; }

.dw-table tbody td { vertical-align: middle; }

/* Имя — слева: это единственный столбец с текстом, а не с числом. Общее
   правило .u-grid центрует заголовки, и «Преподаватель» уезжало на середину
   пустой половины таблицы.

   Столбец закреплён: на телефоне таблица прокручивается вбок, и без этого
   числа часов оказываются в отрыве от того, чьи они. */
.dw-table .col-fio {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card);
}
.dw-table thead .col-fio { vertical-align: middle; background: var(--surface); }
.dw-table tfoot .col-fio { background: var(--surface); }

.dw-fio { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); }
/* Список групп занимает ровно ту ширину, что осталась: на широком экране
   он читается целиком, на узком обрезается многоточием, а не рвёт вёрстку. */
.dw-groups {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Часы — обычные цифры. Раньше каждое число сидело в растянутой на всю
   ширину «таблетке»: строка читалась как ряд полей ввода, а в столбце «Пр+»
   тёмный текст на тёмной подложке был почти не виден. */
.dw-num { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); }
.dw-num.is-zero { color: var(--text-muted); font-weight: var(--fw-normal); }
.dw-total { font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: var(--text); }

/* Цвет типа занятия живёт в шапке — один раз на столбец, а не в каждой
   из сотни ячеек. */
.dw-table thead .type-badge { min-width: 0; padding: 1px 6px; }

.dw-more {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  white-space: nowrap;
}
.dw-more:hover { border-color: var(--loc); color: var(--loc); }

.dw-details { background: var(--surface); padding: var(--sp-3); }

.dw-details-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: var(--sp-2);
}

.dw-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--sp-2);
}

.dw-group {
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
}

.dw-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.dw-group-hours { color: var(--loc); }
.dw-group-types { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }

.dw-foot td {
  background: var(--surface);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-sm);
  color: var(--text);
  vertical-align: middle;
}

/* Итог по кафедре в шапке карточки */
/* На подложке --surface второстепенный текст — muted-strong (см. system.css) */
.dw-sum { font-size: var(--fs-sm); color: var(--muted-strong); margin-left: auto; white-space: nowrap; }
.dw-sum b { color: var(--text); font-size: var(--fs-md); }

@media (max-width: 575.98px) {
  .dept-matrix .col-fio { width: 108px; }
  /* Имя не должно занимать пол-экрана: за ним идут числа, ради которых
     на страницу и заходят. */
  .dw-table { min-width: 660px; }
  .dw-table .col-fio { width: 142px; }
  .dw-table .col-more { width: 44px; }
  .dw-more span { display: none; }
  .u-daycard-head { flex-wrap: wrap; }
}