/* school-schedule.css — «Расписание школы» (blox61 #8). Скин третьего вида расписания у
   методиста: сетка КОМНАТА × ДЕНЬ, цвет плашки — педагог.

   Почему сетка, а не таблица: ячейка держит СТОПКУ занятий разной высоты, и ряд обязан тянуться
   по самой длинной. CSS-grid делает это сам, таблице пришлось бы помогать скриптом.

   Ширина: шесть дней не влезают в телефон, поэтому на узком экране модуль рисует ОДИН день
   (--ss-cols приезжает из JS) — вёрстка та же, колонок меньше. На широком экране сетка всё же
   может перерасти окно (шесть дней × четыре комнаты), поэтому она лежит в своей полосе
   с горизонтальной прокруткой: страница целиком вбок не едет. */

.ss-bar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ss-chip{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:var(--r-pill);padding:7px 14px;font:inherit;font-size:var(--fs-sm);font-weight:600;
  /* 44px — минимальная цель для пальца (§10 G-правила); padding + строка дают её без min-height,
     но на мелком шрифте страховка нужна */
  min-height:40px;cursor:pointer}
.ss-chip.on{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-ink)}
@media (hover:hover){.ss-chip:hover{background:var(--accent-tint)}}

/* переключатель дней нужен ТОЛЬКО там, где показан один день */
.ss-days{display:none}
@media (max-width:900px){.ss-days{display:flex}}

.ss-legend{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.ss-leg{
  border-radius:var(--r-xs);padding:4px 10px;font-size:var(--fs-sm);font-weight:700;
  color:var(--sched-ink)}

.ss-alarm{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--sched-clash);border-radius:var(--r-md);
  background:color-mix(in srgb, var(--sched-clash) 8%, var(--card));
  color:var(--ink);padding:10px 12px;margin:12px 0;font-size:var(--fs-sm)}

/* ---- сама сетка ---------------------------------------------------------- */
#ss-grid{overflow-x:auto}
.ss-grid{
  display:grid;
  /* первая колонка — подписи комнат, дальше по дню; 150px — минимум, при котором плашка
     «16.00 – 17.30 / Pr.2 Eggplant / Angie» не ломает время пополам */
  --ss-cols:6;
  grid-template-columns:minmax(96px,auto) repeat(var(--ss-cols,6),minmax(150px,1fr));
  gap:8px;min-width:min-content;padding-bottom:4px}
.ss-cell{min-width:0}
.ss-day,.ss-room{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  padding:8px 10px;font-weight:700;font-size:var(--fs-sm)}
.ss-room{justify-content:flex-start}
/* ---- правка комнат (blox63 #6) ------------------------------------------------------------
   Подпись комнаты у методиста — кнопка: за ней меню «кто здесь занимается». Выглядит так же,
   как подпись у учителя (иначе сетка читалась бы двумя разными языками), и отличается ровно
   тем, чем должна: курсором, карандашом и откликом. */
.ss-roomedit{
  gap:6px;font:inherit;font-weight:700;font-size:var(--fs-sm);color:var(--ink);
  min-height:44px;cursor:pointer;text-align:left}
.ss-roomedit .ic{color:var(--muted);flex:0 0 auto}
@media (hover:hover){.ss-roomedit:hover{border-color:var(--accent);background:var(--accent-tint)}}
.ss-newroom{min-height:40px}

/* шторка комнаты: список жильцов, подселение, удаление */
.ss-sheet .ss-sub{margin:14px 0 8px;font-weight:800;font-size:var(--fs-sm);color:var(--muted)}
/* список растёт вниз внутри СВОЕЙ прокрутки: в комнате бывает восемь групп, и шторка не имеет
   права вырасти выше экрана (lingo-ui §3 — самая переоткрываемая беда проекта) */
.ss-tenants{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow:auto}
.ss-tenant{display:flex;align-items:center;gap:8px}
.ss-tname{flex:1 1 auto;min-width:0;font-weight:700;font-size:var(--fs-sm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* .btn-ghost по умолчанию во всю ширину (так он живёт в меню-гамбургере) — в строке жильца это
   съедало имя группы до «Sec.2/1 Bea…» ради кнопки в три четверти строки */
.ss-tenant .btn-ghost{width:auto;flex:0 0 auto;min-height:40px}
.ss-twho{font-weight:600;color:var(--muted)}
.ss-house{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* список групп занимает строку целиком и обрезает длинную подпись: «(сейчас: Garden Room)»
   не должно выталкивать кнопку за край шторки */
.ss-house select{flex:1 1 200px;min-width:0;min-height:44px;font:inherit;font-size:var(--fs-sm);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);
  padding:8px 10px}
.ss-house .btn-primary{flex:0 0 auto}
/* .hint глобально сидит на margin-top:-4px (он рассчитан на подпись ПОД полем формы) — под
   кнопкой это даёт наезд текста на её нижний край. Здесь подпись объясняет последствие нажатия,
   поэтому ей нужен воздух, а не подтяжка. */
.ss-sheet .hint{margin-top:10px}
.ss-danger{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft)}
.ss-box{display:flex;flex-direction:column;gap:8px}

.ss-slot{
  display:block;width:100%;text-align:center;font:inherit;cursor:pointer;
  border:1px solid color-mix(in srgb, var(--sched-ink) 22%, transparent);
  border-radius:var(--r-sm);padding:8px 8px;color:var(--sched-ink);
  /* цвет задаётся классом tone-N ниже; здесь только форма */
  background:var(--card)}
.ss-slot>span{display:block}
.ss-time{font-size:var(--fs-sm);opacity:.85}
.ss-name{font-weight:800;margin:1px 0}
.ss-par{font-weight:700;opacity:.8}
.ss-sub{
  display:inline-block;margin-left:5px;padding:0 6px;border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--sched-ink) 14%, transparent);font-size:var(--fs-xs)}
.ss-teacher{font-size:var(--fs-sm);opacity:.9}
@media (hover:hover){.ss-slot:not(.ss-static):hover{filter:brightness(.97)}}
/* смотровой режим (учитель, blox63 #5): та же плашка, но не кнопка — ни курсора, ни отклика */
.ss-slot.ss-static{cursor:default}

/* НАКЛАДКА обводится, а не перекрашивается: цвет плашки уже занят педагогом, и подмена
   заливки стёрла бы главный признак сетки. */
.ss-slot.is-clash{
  border-color:var(--sched-clash);box-shadow:0 0 0 2px color-mix(in srgb, var(--sched-clash) 45%, transparent);
  position:relative}
.ss-clash{
  position:absolute;top:-7px;right:-7px;width:20px;height:20px;line-height:19px;
  border-radius:50%;background:var(--sched-clash);color:var(--on-dark);
  font-weight:800;font-size:var(--fs-xs)}

.tone-1{background:var(--sched-t1)} .tone-2{background:var(--sched-t2)}
.tone-3{background:var(--sched-t3)} .tone-4{background:var(--sched-t4)}
.tone-5{background:var(--sched-t5)} .tone-6{background:var(--sched-t6)}
.tone-7{background:var(--sched-t7)} .tone-8{background:var(--sched-t8)}