/* Сабақ кестесі */

:root { --sch-z: 1; }   /* масштаб сетки, меняется кнопками зума */

/* ── компактная панель: всё в одну строку ── */

.sch-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.sch-sp { flex: 1; }

.sch-seg { display: flex; }
.sch-tab {
  padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-right: none; cursor: pointer;
  white-space: nowrap;
}
.sch-seg .sch-tab:first-child { border-radius: 7px 0 0 7px; }
.sch-seg .sch-tab:last-child { border-radius: 0 7px 7px 0; border-right: 1px solid var(--line); }
.sch-tab:hover { color: var(--ink); }
.sch-tab.on { color: #fff; background: var(--green); border-color: var(--green); }
.sch-tab.on + .sch-tab { border-left-color: var(--green); }

.sch-sel {
  padding: 4px 8px; font: inherit; font-size: 12px;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.sch-sel:focus { outline: none; border-color: var(--green); }

.sch-stat { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.sch-stat b { color: var(--ink); }

.sch-ic {
  width: 28px; height: 26px; padding: 0;
  font: inherit; font-size: 14px; line-height: 1;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.sch-ic:hover { color: var(--green-dark); border-color: var(--green); background: var(--green-soft); }

.sch-zoom {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
}
.sch-zoom button {
  width: 22px; height: 24px; font: inherit; font-size: 14px; line-height: 1;
  color: var(--ink-2); background: none; border: none; cursor: pointer;
}
.sch-zoom button:hover { color: var(--green-dark); }
.sch-zoom span {
  min-width: 34px; text-align: center;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.sch-k-join { color: var(--violet); }
.sch-k-err  { color: var(--low); }

.sch-warn {
  margin-bottom: 10px; padding: 9px 13px;
  font-size: 12.5px; line-height: 1.6; color: #8a2b21;
  background: var(--low-bg); border: 1px solid #f3c7c1; border-radius: 10px;
}
.sch-warn b { color: var(--low); }

/* ── сетка ── */

.sch-grid-card { padding: 0; overflow: hidden; }

/* Прокрутка только вбок. Вертикальную убрал: она была второй поверх
   страничной, и «прилипшая» шапка наезжала на первую строку. Каждый день
   и так со своей шапкой, ориентироваться есть по чему. */
.sch-scroll { overflow-x: auto; }

/* Каждый день — своя таблица, а ширину колонки таблица берёт по своему
   содержимому. День с уроками получался шире пустого, и дни разъезжались.
   Фиксированная раскладка задаёт ширину заранее, одинаково для всех. */
.sch-table {
  table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  font-size: calc(11px * var(--sch-z));
  margin-bottom: calc(10px * var(--sch-z));
}
.sch-table th, .sch-table td {
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}

.sch-table thead th {
  z-index: 3;
  padding: calc(5px * var(--sch-z)) calc(6px * var(--sch-z));
  background: var(--surface-2); font-weight: 700; white-space: nowrap;
}
.sch-gh {
  width: calc(120px * var(--sch-z)); min-width: calc(120px * var(--sch-z));
  text-align: center; cursor: pointer; user-select: none;
}
.sch-gh b { display: block; font-size: calc(11.5px * var(--sch-z)); }
.sch-gh small { font-size: calc(9.5px * var(--sch-z)); font-weight: 500; opacity: .7; }
.sch-gh.sel { outline: 2px solid var(--green); outline-offset: -2px; }
.sch-gh[draggable="true"]:active { cursor: grabbing; }

/* цвет шапки по классу группы */
.sch-gh.cls-5     { background: #e6f5da; color: #33691e; }
.sch-gh.cls-6     { background: #dcedfc; color: #14507e; }
.sch-gh.cls-9     { background: #fdf0d8; color: #8a5a12; }
.sch-gh.cls-10-11 { background: #ece0fa; color: #533291; }

/* день слева и справа, как в привычной таблице */
.sch-daycol {
  width: calc(26px * var(--sch-z)); min-width: calc(26px * var(--sch-z));
  background: var(--surface-2); text-align: center; vertical-align: middle;
  font-size: calc(10px * var(--sch-z)); color: var(--ink-2);
}
tbody .sch-daycol-l { position: sticky; left: 0; z-index: 2; }
.sch-daycol span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; font-weight: 700; letter-spacing: .03em;
}

.sch-time-h, .sch-time {
  width: calc(62px * var(--sch-z)); min-width: calc(62px * var(--sch-z));
  background: var(--surface-2); text-align: center;
  padding: calc(2px * var(--sch-z));
}
/* по горизонтали держатся, иначе «Күн/Уақыт» уезжают при прокрутке вбок */
thead .sch-daycol-l { position: sticky; left: 0; z-index: 5; }
thead .sch-time-h-l { position: sticky; left: calc(26px * var(--sch-z)); z-index: 5; }
tbody .sch-time-l { position: sticky; left: calc(26px * var(--sch-z)); z-index: 2; }
.sch-time b { display: block; font-size: calc(12px * var(--sch-z)); color: var(--ink); }
.sch-time small { font-size: calc(9px * var(--sch-z)); color: var(--ink-3); white-space: nowrap; }

/* ── клетка ── */

.sch-cell {
  position: relative;
  padding: calc(2px * var(--sch-z)); vertical-align: top;
  background: var(--surface);
}
.sch-cell.joined { box-shadow: inset 0 0 0 2px var(--violet); }

.sch-cell select {
  display: block; width: 100%;
  padding: calc(1px * var(--sch-z)) calc(4px * var(--sch-z));
  margin-bottom: 1px;
  font: inherit; font-size: calc(10.5px * var(--sch-z));
  line-height: calc(15px * var(--sch-z));
  color: var(--ink); background: transparent;
  border: 1px solid transparent; border-radius: 4px;
  appearance: none; -webkit-appearance: none;
  text-align: center; text-overflow: ellipsis;
}
.sch-cell select:last-of-type { margin-bottom: 0; }
.sch-cell select:hover { border-color: var(--line); }
.sch-cell select:focus { outline: none; border-color: var(--green); background: #fff; }

.sch-subj { font-weight: 700 !important; }
.sch-room { color: var(--ink-2); }
.sch-teacher { color: var(--ink-3); }

.sch-room.bad {
  color: #fff !important; background: var(--low) !important; font-weight: 700;
}
.sch-teacher.bad { color: var(--low) !important; font-weight: 700; background: var(--low-bg) !important; }
.sch-room.join { font-weight: 700; }

/* пустая клетка — плюсик по наведению */
.sch-cell.empty { background: var(--surface); }
.sch-add {
  display: block; width: 100%; height: calc(48px * var(--sch-z));
  font: inherit; font-size: calc(14px * var(--sch-z));
  color: var(--ink-3); background: none; border: none;
  opacity: 0; cursor: pointer; transition: opacity .12s, background .12s;
}
.sch-cell.empty:hover .sch-add { opacity: 1; background: var(--green-soft); color: var(--green-dark); }

/* крестик в углу */
.sch-del {
  position: absolute; top: 1px; right: 1px;
  width: calc(13px * var(--sch-z)); height: calc(13px * var(--sch-z));
  padding: 0; line-height: 1;
  font-size: calc(11px * var(--sch-z)); color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  opacity: 0; cursor: pointer; transition: opacity .12s;
}
.sch-cell:hover .sch-del { opacity: 1; }
.sch-del:hover { color: #fff; background: var(--low); border-color: var(--low); }

.sch-addrow td { background: var(--surface); }
.sch-add-ord {
  width: 100%; padding: calc(2px * var(--sch-z));
  font: inherit; font-size: calc(13px * var(--sch-z));
  color: var(--ink-3); background: none;
  border: 1px dashed var(--line); border-radius: 5px; cursor: pointer;
}
.sch-add-ord:hover { color: var(--green-dark); border-color: var(--green); background: var(--green-soft); }

/* ── панели ── */

.sch-bells { padding: 12px 14px; margin-bottom: 12px; }
.sch-bell-h {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.sch-bell-grid { display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sch-bell-row { display: flex; align-items: center; gap: 6px; }
.sch-bell-row > span { width: 20px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sch-bell-row input, .sch-inp {
  flex: 1; padding: 5px 8px; font: inherit; font-size: 12px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink);
}
.sch-bell-row input:focus, .sch-inp:focus { outline: none; border-color: var(--green); }
.sch-bell-acts { display: flex; gap: 6px; margin-top: 12px; align-items: center; }
.sch-bell-acts .sch-inp { max-width: 170px; flex: none; }

.sch-rooms { display: flex; flex-wrap: wrap; gap: 6px; }
.sch-room-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px 4px 11px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px;
}
.sch-room-tag button {
  width: 16px; height: 16px; padding: 0; line-height: 1;
  font-size: 12px; color: var(--ink-3);
  background: none; border: none; border-radius: 50%; cursor: pointer;
}
.sch-room-tag button:hover { color: #fff; background: var(--low); }

.sch-tcolors { display: grid; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sch-tcolor {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.sch-tcolor:hover { border-color: var(--green); }
.sch-sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); flex: none; }
.sch-tname { font-size: 12.5px; color: var(--ink-2); }

.sch-pal {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.sch-pal-h {
  width: 100%; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.sch-pc {
  width: 24px; height: 24px; padding: 0;
  border: 1px solid rgba(0,0,0,.12); border-radius: 5px; cursor: pointer;
}
.sch-pc:hover { transform: scale(1.12); border-color: var(--ink-3); }
.sch-pal-acts { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; }
.sch-pal-acts input[type="color"] {
  width: 38px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer;
}

.sch-hint { margin: 10px 2px 0; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.sch-hint kbd {
  padding: 1px 5px; font-family: inherit; font-size: 11px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px;
}

@media print {
  .sidebar, .sch-filters, .sch-toolbar, .sch-hint, .sch-bells, .sch-warn { display: none; }
  .sch-scroll { max-height: none; overflow: visible; }
  .sch-del, .sch-add, .sch-addrow { display: none; }
  .sch-cell select { border-color: transparent; }
}

/* ── блок: уголок для выделения и переноса ── */

.sch-grip {
  position: absolute; top: 1px; left: 1px; z-index: 1;
  width: calc(13px * var(--sch-z)); height: calc(13px * var(--sch-z));
  padding: 0; line-height: 1;
  font-size: calc(9px * var(--sch-z)); color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  opacity: 0; cursor: grab; transition: opacity .12s;
}
.sch-cell:hover .sch-grip, .sch-cell.sel .sch-grip { opacity: 1; }
.sch-grip:hover { color: var(--green-dark); border-color: var(--green); }
.sch-grip:active { cursor: grabbing; }

.sch-cell.sel { box-shadow: inset 0 0 0 2px var(--green); }
.sch-cell.sel.joined { box-shadow: inset 0 0 0 2px var(--green), inset 0 0 0 4px var(--violet); }
.sch-cell.drop { box-shadow: inset 0 0 0 2px var(--green); background: var(--green-soft); }

.sch-ic:disabled { opacity: .35; cursor: default; }
.sch-ic:disabled:hover { color: var(--ink-2); border-color: var(--line); background: var(--surface); }
.sch-cell.drop-bad { box-shadow: inset 0 0 0 2px var(--low); background: var(--low-bg); }

/* подвал колонки: сколько уроков не поставлено */
.sch-footrow th, .sch-footrow td {
  background: var(--surface-2); vertical-align: top;
}
.sch-foot-h { text-align: center; }
.sch-foot-h b { display: block; font-size: calc(10.5px * var(--sch-z)); color: var(--ink-2); }
.sch-foot-h small { font-size: calc(9px * var(--sch-z)); color: var(--ink-3); }

.sch-foot {
  padding: calc(3px * var(--sch-z)) calc(5px * var(--sch-z));
  font-size: calc(9.5px * var(--sch-z)); line-height: 1.5; text-align: center;
}
.sch-foot.none { color: var(--ink-3); }
.sch-foot.ok { color: var(--green-dark); font-weight: 700; }
.sch-foot.left { text-align: left; }
.sch-foot-n {
  display: inline-block; min-width: calc(16px * var(--sch-z));
  margin-bottom: 2px; padding: 0 calc(5px * var(--sch-z));
  font-size: calc(11px * var(--sch-z)); font-weight: 700;
  color: #fff; background: var(--mid); border-radius: 999px;
}
.sch-foot span {
  display: flex; align-items: baseline; gap: 4px;
  color: var(--ink-2);
}
.sch-foot i { flex: 1; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sch-foot b { font-variant-numeric: tabular-nums; color: var(--ink); }
.sch-foot-more { color: var(--ink-3); }
.sch-foot-over { color: var(--low); font-weight: 600; }

/* Кабинет не выбран: строка остаётся без заливки — на фоне раскрашенных
   предмета и учителя это и есть предупреждение. */
.sch-cell.noroom .sch-room {
  color: var(--mid); font-weight: 600;
  border-color: #f0dcb4; border-style: dashed;
}

/* кнопки строк уроков */
.sch-ord-btns { display: flex; gap: 3px; justify-content: center; }
.sch-del-ord {
  width: calc(22px * var(--sch-z)); padding: calc(2px * var(--sch-z));
  font: inherit; font-size: calc(13px * var(--sch-z));
  color: var(--ink-3); background: none;
  border: 1px dashed var(--line); border-radius: 5px; cursor: pointer;
}
.sch-del-ord:hover { color: var(--low); border-color: var(--low); background: var(--low-bg); }
.sch-add-ord { flex: 1; }

/* ── окно «жаңа мұғалім» ──
   Учителя заводят и из расписания: собирая кестені, проще добавить
   пропавшего на месте, чем уходить на «Басқару» и терять набранное. */

.sch-dlg {
  width: min(560px, calc(100vw - 32px));
  padding: 0; border: none; border-radius: 16px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 18px 50px rgba(16, 24, 40, .22);
}
.sch-dlg::backdrop { background: rgba(16, 24, 40, .38); }
.sch-dlg form { padding: 16px 18px 14px; }

.sch-dlg-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.sch-dlg-h b { font-size: 15px; }
.sch-dlg-x {
  width: 26px; height: 26px; padding: 0; line-height: 1;
  font-size: 18px; color: var(--ink-3);
  background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.sch-dlg-x:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line); }

.sch-dlg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
}
.sch-dlg-full { grid-column: 1 / -1; }
.sch-dlg .field > span { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.sch-dlg input[type="text"], .sch-dlg input[type="search"] {
  width: 100%; padding: 7px 10px;
  font: inherit; font-size: 13px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px;
}
.sch-dlg input:focus { outline: none; border-color: var(--green); }

.sch-seg { display: flex; gap: 4px; }
.sch-seg button {
  flex: 1; padding: 6px 8px;
  font: inherit; font-size: 12px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
}
.sch-seg button.on {
  color: #fff; font-weight: 600;
  background: var(--green); border-color: var(--green);
}

.sch-dlg-note { font-style: normal; font-weight: 600; color: var(--green-dark); }
.sch-dlg-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  max-height: 132px; overflow-y: auto;
  margin-top: 6px; padding: 7px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.sch-dlg-chips button {
  padding: 3px 9px;
  font: inherit; font-size: 11.5px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; cursor: pointer;
}
.sch-dlg-chips button:hover { border-color: var(--ink-3); }
.sch-dlg-chips button.on {
  color: #fff; font-weight: 600;
  background: var(--green); border-color: var(--green);
}

.sch-dlg-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.sch-dlg-msg { flex: 1; font-size: 12px; color: var(--ink-3); }
.sch-dlg-msg.bad { color: var(--low); font-weight: 600; }
.sch-dlg-msg.ok  { color: var(--green-dark); font-weight: 600; }
.sch-dlg-save { padding: 8px 18px; font-size: 13px; }

/* ── личное расписание учителя и ученика ──
   Все звонки смены, а не только занятые: видно, где урок стоит в дне.
   Смены разделены полосой. Ученику показываем только его смену.
   Шесть дней должны помещаться в ширину телефона, поэтому сетка
   фиксированная, а кабинет уходит под группу. */

.pw { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.pw th, .pw td {
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  vertical-align: top;
}
.pw thead th {
  padding: 8px 4px; font-size: 13px; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); text-align: center;
}
.pw-time {
  width: 54px; padding: 7px 2px; text-align: center; background: var(--surface-2);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3;
}
.pw-time i { display: block; font-style: normal; font-weight: 500; color: var(--ink-3); }
.pw td { padding: 5px 6px; background: var(--surface); text-align: center; }
.pw tr.pw-idle .pw-time { color: var(--ink-3); font-weight: 500; }
.pw tr.pw-idle td { background: var(--surface-2); }

.pw tr.pw-sep td {
  padding: 6px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2); background: #e7ebe8; text-transform: uppercase;
}
.pw tr.pw-sep th { background: #e7ebe8; }

.pw-les + .pw-les { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line); }
/* Названия вроде «Қолданбалы математика» в узкую колонку не влезают —
   переносим по слогам, а не режем. */
.pw-les b {
  display: block; font-size: 12.5px; line-height: 1.25;
  overflow-wrap: break-word;              /* рвём слово, только если иначе никак */
  text-align: center;
}
.pw-les small { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.35; text-align: center; }
.pw-les .pw-room { color: var(--ink-2); font-weight: 600; }

@media (max-width: 900px) {
  .sch-grid-card { padding: 4px; }
  /* Своя неделя помещается в экран целиком, поэтому прокрутка ей не нужна.
     Общая сетка широкая — там прокрутка обязана остаться. */
  .sched-my:not(.all-mode) .sch-scroll { overflow-x: visible; }
  /* Колонка дня — примерно 52 px, и «Математика» помещается в строку
     только при этом кегле. Время ужимаем, оно короче. */
  .pw-time { width: 34px; font-size: 9px; padding: 5px 0; }
  .pw thead th { padding: 6px 1px; font-size: 10.5px; }
  .pw td { padding: 4px 1px; }
  .pw-les b { font-size: 10px; line-height: 1.2; letter-spacing: -.02em; }
  .pw-les small { font-size: 8.5px; line-height: 1.25; }
}

/* Звонок задаётся на всю неделю сразу — на каждый день его больше
   не разносят руками. */
.sch-bell-note { margin: 10px 2px 0; font-size: 12px; color: var(--ink-3); }

/* Черновик: сколько правок ждёт сохранения. Пока не нажата кнопка,
   учителя видят прежнее расписание. */
.sch-draft {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 10px 14px;
  background: #fff8e6; border: 1px solid #f0dfae; border-radius: 12px;
}
.sch-draft b { font-size: 13.5px; color: #7a5b12; }
/* Сохранено — полоса меняет цвет: осталось сообщить людям. */
.sch-draft.saved { background: var(--green-soft); border-color: #cfe6d8; }
.sch-draft.saved b { color: var(--green-dark); }
.sch-draft-note { flex: 1; font-size: 12.5px; color: var(--ink-3); }
.sch-draft .btn { padding: 6px 14px; font-size: 13px; }

/* Своё расписание — отдельная страница, и панель редактора ей не нужна
   с самого начала, а не после того, как отработает скрипт. */
.sched-my .sch-bar, .sched-my .sch-hint { display: none; }

/* Переключатель «своё / всё» и выгрузка на личной странице. */
.sch-modes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
.sch-modes .sch-btn.on {
  color: #fff; background: var(--green); border-color: var(--green); font-weight: 600;
}
/* В общем виде нужны только переключатели дня, смены и класса. */
/* В просмотре нужен только выбор смены: дни показываются все сразу,
   а фильтр класса лишь прячет часть колонок — искать в нём нечего. */
.sched-my.all-mode .sch-bar { display: flex; }
.sched-my.all-mode #dayChips,
.sched-my.all-mode #classChips,
.sched-my.all-mode .sch-bar > .sch-sp ~ * { display: none; }

/* Подпись смены, когда показаны обе. */
.sch-shift-cap {
  margin: 14px 0 6px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.sch-shift-cap:first-child { margin-top: 0; }