:root {
  /* Тёмная тема. color-scheme нужен, чтобы нативные контролы — календарик
     у <input type="date"> и часы у <input type="time"> — рисовались тёмными,
     иначе они остаются белыми пятнами. */
  color-scheme: dark;

  --bg: #111318;
  --card: #1a1d23;
  --ink: #e7e9ee;
  --muted: #9aa1ad;
  --accent: #7aa2ff;
  --border: #2b3039;

  /* Подсветка строки/ячейки под курсором: на тёмной теме она СВЕТЛЕЕ
     поверхности, а не темнее, как было на светлой. */
  --hover: #23272f;

  /* Текст поверх заливки. Кнопка акцента светлая, поэтому текст на ней
     тёмный; у красной заливки — светлый. */
  --on-accent: #0d1017;
  --on-danger: #ffffff;

  --danger: #c9524b;
  --danger-ink: #ff8b84; /* текст ошибок: заливка на тёмном фоне не читается */
  --ok: #5fcf8f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, sans-serif;
}

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
  display: flex;
  gap: 8px 16px;
  align-items: center;
  /* На узком экране меню переносится, а не уезжает за край. */
  flex-wrap: wrap;
}
.topbar .brand { font-weight: 700; text-decoration: none; color: var(--accent); }
.topbar nav { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.topbar nav a { color: var(--ink); text-decoration: none; }
.topbar .who { color: var(--muted); }
.topbar .year {
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
}

main { max-width: 860px; margin: 28px auto; padding: 0 16px; }

h1 { font-size: 22px; margin-top: 8px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Кнопка — флекс-элемент карточки, поэтому по умолчанию растягивается на всю
   ширину. В строке (.inline) растягивать нечего: там кнопка идёт рядом с полем. */
.card:not(.inline) > button { align-self: flex-start; }
.card input[type="number"] { max-width: 160px; }

.inline { flex-direction: row; align-items: center; }

label { display: flex; flex-direction: column; gap: 4px; }
label span, label { font-size: 14px; color: var(--muted); }

input, textarea, select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}

button {
  font: inherit;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 6px;
  cursor: pointer;
}
button.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
button.link { background: none; border: none; color: var(--accent); cursor: pointer; }
button.link:hover { text-decoration: underline; }

table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-size: 14px; }
tr:hover td { background: var(--hover); }

.actions { width: 1%; white-space: nowrap; }
.actions a { color: var(--accent); }
.actions form { display: inline; }
/* В таблице кнопка — не главный элемент строки: уменьшаем, чтобы столбец
   действий не перетягивал ширину на себя. */
.actions button { padding: 4px 10px; font-size: 13px; }

.error { color: var(--danger-ink); }
.ok { color: var(--ok); }
.muted { color: var(--muted); font-size: 14px; }
a { color: var(--accent); }

.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
/* Превью вставки: дней может быть 2, а не 7 — растягивать их по фиксированным
   столбцам значит оставить пустую дыру справа и раздавить текст. */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* На узком экране семь столбцов «своего времени» нечитаемы. */
@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.day { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.day h3 { margin-top: 0; font-size: 15px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.addrow input, .addrow select { flex: 0 0 auto; }
.addrow button { flex: 0 0 auto; }
/* Текстовые поля строки делят остаток ширины между собой: иначе они уезжают
   на вторую строку, а плейсхолдер обрезается по краю поля. */
.addrow input[type="text"], .addrow input[type="url"] { flex: 1 1 200px; min-width: 0; }
.card.inline input[type="text"] { flex: 1 1 auto; min-width: 0; }

.lesson { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin: 4px 0; font-size: 13px; }
.lesson strong { display: block; }
.lesson-actions { display: flex; gap: 8px; align-items: center; }
.lesson-actions a { font-size: 12px; }
.lesson-actions form { display: inline; }
.lesson-actions button { font-size: 12px; padding: 2px 8px; }

/* Сетка расписания: строки — пары 1–8, столбцы — дни недели.
   table-layout: fixed — иначе 7 столбцов с min-width распирают таблицу шире
   карточки и она вылезает за её границу. min-width таблицы + прокрутка
   (обёртка .table-scroll) спасают узкие экраны. */
.table-scroll { min-width: 0; overflow-x: auto; }
.pairgrid { table-layout: fixed; min-width: 700px; }
.pairgrid th, .pairgrid td { padding: 6px 6px; text-align: center; vertical-align: top; }
.pairgrid th { font-size: 13px; }
.pairgrid th.pairno { width: 84px; text-align: left; white-space: nowrap; font-weight: 600; }
/* height, а не min-height: у ячеек таблицы min-height не работает. */
.pairgrid td.cell { height: 56px; }
.pairgrid td.cell:hover { background: var(--hover); }
.cell a.add { display: block; color: var(--muted); text-decoration: none; font-size: 18px; line-height: 1; }
.cell a.add:hover { color: var(--accent); }
/* Предмет — своей строкой, ссылка и кнопки — одной строкой под ним: иначе
   ячейка превращалась в столбик из трёх этажей и строки сетки раздувались. */
.lesson-cell { font-size: 12px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.lesson-cell strong { flex: 1 0 100%; font-size: 12px; overflow-wrap: break-word; }
.lesson-cell .lesson-actions { justify-content: center; }
.lesson-cell .lesson-actions button { padding: 1px 6px; }

/* flex-direction обязателен: базовое правило label делает колонку, и без
   этого чекбокс встаёт НАД подписью, а не рядом с ней. */
.check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin-right: 6px; font-size: 13px; color: var(--ink); }
.check input[type="checkbox"] { padding: 0; margin: 0; }
.check-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* Форма — не флекс-контейнер карточки, поэтому её строки клеятся друг к другу. */
.adduser-form { display: flex; flex-direction: column; gap: 10px; }

/* Инлайн-форма в ячейке сетки: раскрывается скриптом вместо перехода на
   отдельную страницу. Атрибут hidden — это no-JS фолбэк, поэтому правило
   ниже обязательно: иначе display:flex победит hidden. */
.inline-form { display: flex; flex-direction: column; gap: 4px; text-align: left; margin-top: 4px; }
.inline-form[hidden] { display: none; }
.inline-form input { font-size: 12px; padding: 3px 5px; width: 100%; box-sizing: border-box; }
.inline-form-actions { display: flex; gap: 6px; align-items: center; }
.inline-form-actions button { font-size: 12px; padding: 2px 8px; }
.lesson-cell a[data-open][hidden] { display: none; }

/* Вставка расписания текстом.
   label — block, textarea — block и на всю ширину: иначе inline-block textarea
   встаёт на одну строку с подписью и она уезжает под него по базовой линии. */
.paste-form label { display: block; margin-bottom: 8px; }
.paste-form label.check { display: inline-flex; margin-bottom: 8px; }
.paste-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 240px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  white-space: pre;
}
.preview-day { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.preview-day h4 { margin: 0 0 6px; font-size: 14px; }
.preview-lesson { font-size: 13px; border-top: 1px solid var(--border); padding: 4px 0; overflow-wrap: anywhere; }
.preview-lesson:first-of-type { border-top: none; }
/* Время и метка пары — своими строками: в узком столбце они сливались с
   предметом в одну кашу. */
.preview-lesson b { display: block; color: var(--muted); }
.preview-lesson .muted { display: block; }
.counts { font-size: 15px; }
.warnings { border-left: 3px solid var(--danger-ink); }
.warning { font-size: 13px; color: var(--danger-ink); margin: 4px 0; }
.warning code { font-size: 12px; }
pre.muted { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }

/* Календарь недель */
.weeknav { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.weeknav a { text-decoration: none; }
.weeklist { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.daycard {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.daycard header { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.daycard h3 { margin: 0; font-size: 15px; }
.daycard.today { border-color: var(--accent); border-left-color: var(--accent); }
/* Полоса слева показывает, откуда день взялся */
.daycard.state-template { border-left-color: var(--border); }
.daycard.state-replaced { border-left-color: var(--accent); }
.daycard.state-cancelled { border-left-color: var(--danger); }
.daycard.state-holiday { border-left-color: var(--muted); }

.badge {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 10px;
  white-space: nowrap;
}

.daylessons { list-style: none; margin: 8px 0; padding: 0; }
.daylessons li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; padding: 2px 0; }
.daylessons b { color: var(--muted); font-weight: 600; white-space: nowrap; }

.dayactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.dayactions form { display: inline-flex; gap: 6px; align-items: center; }
.dayactions button { font-size: 13px; padding: 4px 10px; }
.transfer input[type="date"] { padding: 4px 8px; font-size: 13px; }
.transfer select { padding: 4px 8px; font-size: 13px; }