/* ═══════════════════════════════════════════════════════════════════════════
   Единые правила оформления.

   Зачем: по замерам в шаблонах было 48 разных размеров шрифта, 20 скруглений
   и 97 отступов. Каждая страница задавала своё, из-за чего разделы выглядели
   по-разному и глаз при переходах каждый раз перестраивался. Здесь заданы
   ступени, из которых можно выбирать, — и ничего сверх них.

   Цвета сюда не входят: они живут в config/colors.py (словарь THEMES) и
   приходят переменными --text, --bg-card, --ok, --accent-text и так далее.

   ─── Два акцента ──────────────────────────────────────────────────────────
   Жёлтый (--today-bg) — «сейчас» и «сегодня»: идущая пара, отсчёт, сегодняшняя
   дата. На странице таких мест единицы, поэтому взгляд находит их сразу.
   Синий (--accent-text) — всё остальное, что нужно выделить: кабинеты,
   активные кнопки, ссылки.

   Если пометить жёлтым много всего, он перестанет значить «сейчас».
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Отступы. Шаг кратен 4px: промежуточных значений быть не должно, иначе
     блоки на соседних страницах выравниваются по-разному. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Скругления: мелкие элементы, карточки, крупные блоки, «таблетка». */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Размеры текста. Шесть ступеней вместо сорока восьми.
     Подписи (badge/caption) намеренно не мельче 0.72rem — ниже этого текст
     на телефоне читается с трудом. */
  --fs-xs: 0.72rem;   /* бейджи, мелкие подписи */
  --fs-sm: 0.82rem;   /* второстепенный текст */
  --fs-md: 0.94rem;   /* основной текст */
  --fs-lg: 1.06rem;   /* названия в карточках */
  --fs-xl: 1.35rem;   /* заголовки разделов */
  --fs-2xl: 1.9rem;   /* заголовок страницы */

  /* Насыщенность: обычный, выделенный, сильный. */
  --fw-normal: 500;
  --fw-bold: 700;
  --fw-heavy: 800;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-pop: 0 10px 34px rgba(0, 0, 0, .22);
}

/* ─── Карточка ─────────────────────────────────────────────────────────────
   Основной строительный блок: список пар, настройки, журналы. */
.u-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

/* Карточка «сейчас»: жёлтая рамка вместо заливки — заливка спорила бы с
   цветом типа занятия, который пользователь настраивает под себя. */
.u-card.is-now {
  border-color: var(--today-bg);
  border-width: 2px;
  padding: calc(var(--sp-4) - 1px);   /* компенсируем толщину рамки */
}

/* ─── Заголовок страницы ───────────────────────────────────────────────── */
.u-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heavy);
  color: var(--text);
  margin: 0 0 var(--sp-3);
  line-height: 1.15;
}

.u-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ─── Номер пары ───────────────────────────────────────────────────────── */
.u-num {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--bg-card2);
  color: var(--text-muted);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* У идущей пары номер заливаем — это единственное пятно жёлтого в списке */
.u-num.is-now {
  background: var(--today-bg);
  color: var(--today-fg);
}

/* ─── Бейдж ────────────────────────────────────────────────────────────── */
.u-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: .3px;
  white-space: nowrap;
}

/* ─── Бейдж типа занятия ───────────────────────────────────────────────────
   Один размер на весь сайт. Раньше размера у него не было вовсе: bootstrap
   задаёт .badge в em, то есть бейдж принимал размер родителя — на расписании
   выходило 9.75px (ниже порога читаемости), на сравнении 11.5px, и одно и то
   же обозначение выглядело по-разному на соседних страницах. */
.type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;          /* одинаковая ширина: то, что идёт следом, встаёт
                               на одну линию независимо от длины «Лек»/«Конс» */
  padding: 2px var(--sp-1);
  border-radius: 6px;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-heavy);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* ─── Кабинет ──────────────────────────────────────────────────────────── */
.u-room {
  color: var(--accent-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  white-space: nowrap;   /* «УК 1, 330» — одно значение, рвать нельзя */
}

/* ─── Отсчёт до конца пары ─────────────────────────────────────────────── */
.u-countdown {
  color: var(--today-bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-heavy);
}

/* ─── Переключатель разделов ───────────────────────────────────────────── */
.u-seg {
  display: inline-flex;
  gap: var(--sp-1);
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--sp-1);
}

.u-seg > a,
.u-seg > button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.u-seg > a.active,
.u-seg > button.active {
  background: var(--bs-primary);
  color: #fff;
}

/* ─── Разделитель списка ───────────────────────────────────────────────── */
.u-divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--sp-3) 0;
}

/* ─── Строка со скруглением для мелких блоков ──────────────────────────── */
.u-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--bg-card2);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text);
}

/* ─── Карточка дня и таблица внутри неё ────────────────────────────────────
   Один блок на «Сравнение», «Расписание кафедры» и «Нагрузку кафедры»:
   раньше каждая страница рисовала свою рамку, свою шапку и свои линии сетки,
   и соседние страницы выглядели как разные сайты. */
.u-daycard {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}

/* Ровная подложка вместо градиента — та же, что у дня в расписании */
.u-daycard-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

/* Сегодняшний день отмечаем точкой слева, а не цветом всей шапки */
.u-daycard-head.is-today::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--today-bg);
  flex: 0 0 auto;
}

.u-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.u-grid { width: 100%; border-collapse: collapse; }

.u-grid th,
.u-grid td {
  border: 1px solid var(--divider);
  padding: var(--sp-2);
  vertical-align: top;
}

.u-grid thead th {
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
  vertical-align: middle;
}

/* Подпись под заголовком столбца (время пары, единица измерения).

   Цвет — muted-strong, а не text-muted. Это общее правило: подложка
   --surface в светлой теме светлее карточки, и --text-muted на ней даёт
   4.26 при норме 4.5. На --surface второстепенный текст всегда
   --muted-strong; --text-muted годится только на --bg-card. */
.u-grid thead th .th-sub {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--muted-strong);
}


/* На телефоне ступени текста на одну меньше: крупные заголовки съедают
   высоту, которой и так мало. */
@media (max-width: 575.98px) {
  :root {
    --fs-2xl: 1.6rem;
    --fs-xl: 1.2rem;
  }
  .u-card { padding: var(--sp-3); }
  .u-card.is-now { padding: calc(var(--sp-3) - 1px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Полоски-объявления под шапкой (.notice)
   ───────────────────────────────────────────────────────────────────────────
   Одна заготовка на все случаи: «укажите почту», «сайт обновился», «нет
   связи», «есть новая версия приложения», любое будущее объявление. Раньше
   каждая полоска писалась заново своей разметкой и своими цветами: жёлтый
   #fff3cd и синий #0d6efd были вписаны числом мимо тем, а полоска «нет связи»
   висела position: fixed и, когда шапка меняла высоту, наезжала на неё.

   Как пользоваться:
     — из шаблона: {% include "timetable/partials/_notice.html" with kind="warn"
       text="…" url="…" action="Открыть" key="email-missing" %}
     — из кода:    AtriumNotices.show({kind, text, action, onAction, key})
   Полоски живут в #noticeStack внутри липкой шапки: ничего не перекрывают и
   уезжают вместе с ней.

   key — тема объявления. Если он задан, у полоски есть «×»: нажали — эта тема
   больше не показывается (запоминается в localStorage).
   ═══════════════════════════════════════════════════════════════════════════ */
.notice-stack {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 50vh;
  max-height: 50dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notice {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  background: var(--bg-card);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
/* Скрытая полоска не должна занимать место: у .notice display:flex, и одного
   атрибута hidden ему не хватает. */
.notice[hidden] { display: none; }

.notice-ico { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
.notice-text { flex: 1 1 auto; min-width: 0; }
.notice-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }

.notice-btn {
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.notice-btn:hover { background: rgba(127,127,127,.18); color: inherit; }

/* Крестик берёт цвет полоски целиком: приглушение прозрачностью роняло
   контраст до 3.13 при норме 4.5 — а это кнопка, по которой надо попасть. */
.notice-x {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.notice-x:hover { background: rgba(127,127,127,.22); }

/* Виды. Цвета — смысловые переменные тем, поэтому тёмная тема работает сама. */
.notice.is-info   { background: var(--surface);   color: var(--text); }
.notice.is-info   .notice-ico { color: var(--accent-text); }
.notice.is-ok     { background: var(--ok-bg);     color: var(--ok); }
.notice.is-warn   { background: var(--warn-bg);   color: var(--warn); }
.notice.is-danger { background: var(--danger-bg); color: var(--danger); }
/* Заметное объявление — сплошная заливка фирменным синим. */
.notice.is-brand  { background: var(--loc-strong); color: #fff; border-bottom-color: transparent; }
.notice.is-brand .notice-btn { border-color: rgba(255,255,255,.55); }
.notice.is-brand .notice-btn:hover { background: rgba(255,255,255,.18); }

@media (max-width: 575.98px) {
  .notice { padding: 6px 10px; font-size: var(--fs-xs); gap: var(--sp-1); flex-wrap: wrap; }
  .notice-text { flex-basis: calc(100% - 1.5rem); }
  .notice-actions { margin-left: auto; }
  .notice-ico { font-size: .95rem; }
}