/* Стилі панелі.
 *
 * Орієнтир з about.md — DirectAdmin Evolution: великі плитки, все велике й
 * очевидне. Панеллю користуються діти, тому дрібного тексту й тонких сірих
 * підписів тут не буде.
 *
 * Збірки фронтенду немає й не буде: один css-файл, який можна прочитати. */

:root {
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --ink: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f1f5f9;
  --white: #fff;
  /* Текст НА кольоровій кнопці. Окремо від --white, хоч у світлій темі вони
   * збігаються, — і це не педантизм.
   *
   * --white означає «колір поверхні», і в темній темі він стає темним. Поки
   * кнопки брали колір тексту звідси, у темній темі КОЖНА кнопка панелі
   * малювалась темним по синьому — «Увійти», «Створити», «Скинути пароль».
   * Знайдено очима у фазі 2; тест такого не бачить, бо текст на місці.
   *
   * Кнопка синя (або червона) в обох темах, тому й текст на ній білий у
   * обох. Ця змінна не має перевизначатись у темній темі ніколи. */
  --on-accent: #fff;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

/* Сторінки, де вміст не картка по центру, а список на всю ширину: кабінет
 * і екран вчителя. Центрування вище правильне рівно для однієї картки
 * входу — списку класу воно робить колонку завширшки в найдовше прізвище. */
body.wide {
  display: block;
  align-items: initial;
}

.card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgb(15 23 42 / 8%), 0 12px 32px rgb(15 23 42 / 8%);
}

h1 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: -0.02em;
}

.lead {
  margin: 0 0 28px;
  color: var(--muted);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  margin-top: 12px;
  font-weight: 600;
}

/* select разом з input, а не окремо: без цього список класів у пошуку
 * (фаза 2) лишався б білим у темній темі — браузер малює його по-своєму,
 * поки колір не заданий явно. */
input, select {
  padding: 13px 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--white);
  color: var(--ink);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--blue);
}

/* Поля вимкнені, поки фаза 1 не зробить вхід справжнім. */
input:disabled {
  background: var(--bg);
  cursor: not-allowed;
}

button {
  margin-top: 24px;
  padding: 14px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:hover:not(:disabled) { background: var(--blue-dark); }

button:disabled {
  background: var(--muted);
  opacity: 0.5;
  cursor: not-allowed;
}

.note {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Сторінки на всю ширину: кабінет і екран вчителя
 * ───────────────────────────────────────────────────────────────────────── */

.page {
  max-width: 900px;
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.topbar h1 { margin: 0; }

/* Кнопка «Вийти» — головний захист спільного шкільного комп'ютера, тому
 * вона є на кожній сторінці й виглядає як кнопка, а не як дрібне сіре
 * посилання в кутку. */
.logout button {
  margin: 0;
  padding: 10px 18px;
  background: var(--white);
  border: 2px solid var(--line);
  color: var(--ink);
}

.logout button:hover:not(:disabled) { background: var(--line); }

.block {
  margin-bottom: 20px;
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
}

.block h2 { margin: 0 0 12px; font-size: 22px; }

/* Клас-код. Великим моноширинним: його переписують з екрана на дошку, а
 * потім з дошки в поле. Кожен крок — шанс сплутати символ. */
.pill {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--bg);
  border: 2px dashed var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.roster {
  list-style: none;
  margin: 0;
  padding: 0;
}

.roster li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.roster .who { font-weight: 600; }
.roster .login { color: var(--muted); font-size: 15px; }
.roster button { margin: 0; padding: 8px 14px; font-size: 15px; }

.inline-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.inline-form button { margin: 0; }
.inline-form input { min-width: 200px; }

/* ─────────────────────────────────────────────────────────────────────────
 * Повідомлення
 * ───────────────────────────────────────────────────────────────────────── */

.msg {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 16px;
}

/* Клас береться з рівня повідомлення ({{ message.tags }}), тому тут мусять
 * бути всі рівні Django, які ми вживаємо. Пропущений рівень — це не збій, а
 * гірше: плашка без кольору, тобто помилка, схожа на звичайний текст. */
.msg-error { background: #fee2e2; color: #991b1b; }
.msg-success { background: #dcfce7; color: #14532d; }
.msg-info { background: #dbeafe; color: #1e3a8a; }
.msg-warning { background: #fef9c3; color: #713f12; }
.msg-debug { background: var(--bg); color: var(--muted); }

/* Помилка поля форми. */
.field-error {
  margin: 4px 0 0;
  color: #b91c1c;
  font-size: 15px;
}

.help {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* Тимчасовий пароль після скидання. Показується один раз, тому має бути
 * помітним настільки, щоб вчитель його не проґавив і не оновив сторінку. */
.secret {
  padding: 20px;
  border-radius: 10px;
  background: #fef9c3;
  color: #713f12;
}

.secret .pill { background: var(--white); border-color: #d9c66a; }

/* ─────────────────────────────────────────────────────────────────────────
 * Фаза 2: керування людьми
 * ───────────────────────────────────────────────────────────────────────── */

/* Навігація вчителя. Однакова на всіх його екранах — інакше він губиться. */
.tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 20px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
}

.tabs a {
  padding: 6px 0;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.tabs a:hover { border-bottom-color: var(--blue); }

/* Кнопка «Оновити» стоїть у тому ж ряду, тому їй не потрібен відступ зверху,
 * який має звичайна кнопка під формою. Скраю — щоб її не натискали замість
 * навігації. */
.tabs form { margin-left: auto; }
.tabs button { margin-top: 0; padding: 8px 16px; }

/* Лічильники. Великими числами, як плитки в about.md: вчитель дивиться на
 * них секунду, між уроками. auto-fit — щоб не ламались на вузькому екрані. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
}

.tile-number { font-size: 34px; font-weight: 700; line-height: 1; }
.tile-label { color: var(--muted); font-size: 14px; }

/* Пошук. Поля в рядок, без відступів зверху, які має звичайна форма. */
.search {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.search input, .search select { margin: 0; flex: 1 1 180px; }
.search button { margin-top: 0; flex: 0 0 auto; }

/* Кілька форм-кнопок в один ряд (на картці учня їх три). */
.row-forms {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.row-forms button { margin-top: 0; }

/* «Вимкнути вхід» і «Вимкнути код» НЕ мають виглядати як «Скинути пароль»:
 * вони поруч, і рука тисне швидше, ніж око читає. */
.btn-danger { background: #b91c1c; }
.btn-danger:hover:not(:disabled) { background: #991b1b; }

/* Стан акаунта в списку. Дрібним не робимо — це найважливіше слово в рядку. */
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.badge-off { background: #fee2e2; color: #991b1b; }

/* Журнал. Рядки, а не таблиця: таблиця на вузькому екрані з'їжджає, а тут
 * усе одно читають зверху вниз. */
.log {
  list-style: none;
  margin: 0;
  padding: 0;
}

.log li {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.log-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.log-who { font-weight: 600; }
.log-target { color: var(--blue); }
.log-note { color: var(--muted); }

/* Банер «ти не в себе».
 *
 * Липкий і кричущий навмисне: вчитель, який забув, що сидить у чужому
 * кабінеті, — це вчитель, який зараз зробить щось від імені дитини. Той
 * самий рівень помітності, що в .secret, і з тієї ж причини. */
.impersonating {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: -24px -24px 24px;
  padding: 12px 24px;
  background: #fde68a;
  color: #422006;
  font-weight: 600;
}

.impersonating button {
  margin-top: 0;
  padding: 8px 16px;
  background: #422006;
  color: #fde68a;   /* банер жовтий в обох темах, тому й кнопка однакова */
}

.impersonating button:hover:not(:disabled) { background: #1c1917; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --line: #334155;
    --bg: #0f172a;
    --white: #1e293b;
  }
  .msg-error { background: #450a0a; color: #fecaca; }
  .msg-success { background: #052e16; color: #bbf7d0; }
  .msg-info { background: #172554; color: #bfdbfe; }
  .msg-warning { background: #422006; color: #fde68a; }
  .field-error { color: #fca5a5; }
  .secret { background: #422006; color: #fde68a; }
  .secret .pill { background: #1e293b; border-color: #713f12; }
  /* Решта фази 2 темної теми не потребує: вона стоїть на змінних вище.
   * Тут — тільки те, де колір зашитий, бо він означає «увага». */
  .badge-off { background: #450a0a; color: #fecaca; }
  .btn-danger { background: #991b1b; }
  .btn-danger:hover:not(:disabled) { background: #7f1d1d; }
}