/* Слой оформления под фирменный стиль НГУ поверх Pico.css.
 *
 * Разделение труда: Pico берёт типографику, формы, таблицы и адаптивность,
 * этот файл — фирменные цвета и те элементы, которых у Pico нет: шапка,
 * горизонтальное меню, карточки-строки, табы-переключатели.
 *
 * Цвета взяты из официальных файлов НГУ, а не подобраны на глаз:
 * #72C81F — из логотипа NSU_Russian_logo_Green.png,
 * #1DBFEA и #434343 — из NSU_Russian_logo_Blue.svg.
 */

:root {
  /* --- фирменные цвета --- */

  /* Официальный зелёный НГУ. Контраст с белым текстом — 2.10 при норме
   * 4.5 по WCAG, поэтому НЕ используется под белым текстом: только рамки,
   * иконки, полосы, активные состояния. */
  --nsu-green: #72c81f;

  /* Затемнённый вариант того же тона для кнопок и ссылок: контраст
   * с белым текстом 5.05 — норму проходит. */
  --nsu-green-dark: #477c13;
  --nsu-green-darker: #3e6d11;

  /* Бирюза звезды в логотипе. Как текст на белом даёт 2.17 — только декор. */
  --nsu-cyan: #1dbfea;

  /* Серый текста логотипа. На белом 9.89 — годится для основного текста. */
  --nsu-text: #434343;

  /* Красный отказа. Контраст с белым 6.54 — норму проходит.
   * Тот же цвет, что у сообщений об ошибке: отказ и кнопка, ведущая
   * к отказу, обязаны читаться как одно. */
  --nsu-red: #b3261e;

  /* Синий возврата — фирменная бирюза, затемнённая до 65 %. Сама бирюза
   * даёт с белым 2.17 и под белым текстом нечитаема; на 65 % выходит
   * #137c98 и контраст 4.81. Считано, а не подобрано на глаз. */
  --nsu-blue-dark: #137c98;
  --nsu-blue-darker: #0f6b84;

  --nsu-border: #e0e0e0;
  --nsu-surface: #f5f5f5;

  /* --- перекраска Pico в фирменные цвета --- */
  --pico-font-family: "PT Sans", system-ui, -apple-system, sans-serif;
  --pico-primary: var(--nsu-green-dark);
  --pico-primary-background: var(--nsu-green-dark);
  --pico-primary-border: var(--nsu-green-dark);
  --pico-primary-hover: var(--nsu-green-darker);
  --pico-primary-hover-background: var(--nsu-green-darker);
  --pico-primary-hover-border: var(--nsu-green-darker);
  --pico-primary-focus: rgba(114, 200, 31, 0.35);
  --pico-primary-inverse: #fff;
  --pico-color: var(--nsu-text);
  --pico-border-radius: 4px;
}

/* Тёмную тему Pico отключаем: решение по Ф-2 — только светлая.
 * Иначе у пользователя с тёмной системной темой страница поедет
 * в цвета, которые мы не проверяли. */
:root:not([data-theme="light"]) {
  color-scheme: light;
}

body {
  background: #fff;
}

/* Предел ширины контента.
 *
 * Pico на мониторе шире 1536 px разводит контейнер почти во всю ширину,
 * и страница деканата расползается: вкладки уходят к краям экрана, строки
 * таблиц тянутся так, что взгляд теряет строку между столбцами. 1100 px —
 * ширина, на которой таблица из пяти столбцов ещё помещается целиком,
 * а текст остаётся читаемым. */
.container {
  max-width: 1100px;
}

/* --- шапка --- */

/* Логотип, меню и пользователь стоят одной строкой. Меню занимает
 * свободное место между ними и прижимается к логотипу. */
.site-header {
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--nsu-border);
  margin-bottom: 1rem;
}

.site-header__logo {
  flex: 0 0 auto;
}

.site-header__logo img {
  height: 52px;
  width: auto;
  display: block;
}

.site-header__user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-left: auto;
}

.site-header__user a {
  color: var(--nsu-green-dark);
}

/* Форма выхода стоит в строке с именем и не должна занимать
 * собственный блок — иначе шапка разъезжается по вертикали. */
.site-header__logout {
  display: inline;
  margin: 0;
}

/* Кнопка, выглядящая ссылкой. Выход обязан быть POST-формой (по GET его
 * дёрнет чужая картинка), но визуально это пункт шапки, а не действие
 * уровня «отправить заявление» — зелёная кнопка Pico была бы тут громче
 * всего остального на странице. */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: auto;
  font: inherit;
  color: var(--nsu-green-dark);
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--nsu-green-darker);
  background: none;
}

/* --- страница входа --- */

/* Единственный экран без меню. Узкая колонка по центру: на форме из двух
 * полей взгляд не должен ездить по всей ширине экрана. */
.login {
  max-width: 24rem;
  margin: 3rem auto;
}

.login h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.login__hint {
  font-size: 0.9rem;
  color: #6b6b6b;
  margin-top: 1.5rem;
}

/* Сообщение об ошибке входа. Красный, а не фирменный зелёный: зелёным
 * покрашено всё удачное, и отказ в этом же цвете читался бы как успех. */
.form-error {
  background: #fdecea;
  border-left: 3px solid #b3261e;
  color: #7f1d17;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--pico-border-radius);
}

/* Успешный итог действия — не отказ, но и не обычный текст.
   Заведён на этапе 9: закрытие периода сообщает, сколько заявлений
   сгорело (В-34), и красная плашка тут читалась бы как ошибка,
   хотя человек получил ровно то, что просил. Форма та же, что
   у .form-error, разный только цвет — так их родство видно глазом. */
.form-notice {
  background: #eaf4ec;
  border-left: 3px solid #2e7d4f;
  color: #1c5334;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--pico-border-radius);
}

/* --- полоса заполнения на дашбордах деканата (этап 9) ---
   Весь «график» из В-92: два вложенных span и процентная ширина.
   Библиотеки нет намеренно — CDN запрещён, а локальный chart.js весил бы
   на два порядка больше, чем эти четырнадцать строк. */
.bar {
  display: inline-block;
  width: 8rem;
  height: 0.6rem;
  background: var(--nsu-surface);
  border: 1px solid var(--nsu-border);
  border-radius: 0.3rem;
  overflow: hidden;
  vertical-align: middle;
}

.bar__fill {
  display: block;
  height: 100%;
  background: var(--nsu-green-dark);
}

.bar__fill.is-full {
  background: #b3261e;
}

/* --- горизонтальное меню --- */

.main-nav {
  flex: 1 1 auto;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--nsu-text);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.main-nav a:hover {
  color: var(--nsu-green-dark);
}

/* Раздел, в котором человек сейчас находится.
 *
 * Одним цветом обойтись нельзя: зелёным в шапке покрашены и наведённые
 * ссылки, и текущий раздел, и на глаз они не различаются. Подчёркивание
 * снизу делает текущее положение видимым сразу — у совместителя,
 * видящего два раздела, это единственный признак, где он. */
.main-nav a[aria-current="page"] {
  color: var(--nsu-green-dark);
  border-bottom: 3px solid var(--nsu-green);
  padding-bottom: 0.25rem;
}

/* --- хлебные крошки --- */

.breadcrumbs {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 1.5rem;
}

.breadcrumbs a {
  color: #777;
}

.breadcrumbs span::before {
  content: "›";
  margin: 0 0.5rem;
  color: #aaa;
}

/* --- табы-переключатели --- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.tabs a {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--nsu-green-dark);
  border-radius: 4px;
  color: var(--nsu-green-dark);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.tabs a.is-active {
  background: var(--nsu-green-dark);
  color: #fff;
}

/* --- карточка-строка ---
 * Основной элемент списков: преподаватель в перечне (этап 7), заявление
 * во входящих (этап 8), строка дашборда (этап 9). Слева название,
 * справа счётчики и действие. */

.row-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--nsu-border);
  border-radius: 4px;
  margin-bottom: 1rem;
  background: #fff;
}

.row-card__title {
  font-weight: 700;
  margin: 0;
  flex: 1 1 14rem;
}

.row-card__meta {
  color: #666;
  font-size: 0.95rem;
}

/* Занятость «4 из 7». Число выделено цветом, но сам текст остаётся
 * тёмным: зелёным красится только акцентная часть, иначе не читается. */
.row-card__count strong {
  color: var(--nsu-green-dark);
}

/* Заполненный преподаватель остаётся в списке с пометкой (В-05),
 * а не исчезает: цель системы — показать спектр руководителей. */
.row-card.is-full {
  background: var(--nsu-surface);
}

.row-card.is-full .row-card__count strong {
  color: #b03030;
}

/* --- разделы на главной --- */

/* Имя вошедшего вместо «Вы вошли в систему»: факт входа виден по самому
 * наличию страницы, а имя отвечает на единственный полезный вопрос —
 * под кем я сижу, если учёток несколько. */
.home__greeting {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Ссылка-карточка: кликается вся площадь, а не слово внутри.
 *
 * flex-basis в 18rem с ростом до 26rem — чтобы у человека с одной ролью
 * карточка не растянулась во всю ширину экрана (одинокая кнопка шириной
 * в монитор выглядит ошибкой вёрстки), а у совместителя две встали в ряд
 * и свернулись в колонку на узком экране. */
.section-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 18rem;
  max-width: 26rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--nsu-border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--nsu-text);
  background: #fff;
}

.section-link:hover {
  border-color: var(--nsu-green-dark);
  background: var(--nsu-surface);
}

.section-link__title {
  font-weight: 700;
  color: var(--nsu-green-dark);
}

.section-link__hint {
  font-size: 0.95rem;
  color: #666;
}

/* --- подзаголовок под именем ---
 * Должность и степень — часть представления человека, а не сноска.
 * Серым мелким шрифтом (.row-card__meta) они читались как случайная
 * приписка под заголовком; здесь тот же цвет, что у основного текста,
 * и размер чуть крупнее обычного. */

.subtitle {
  margin: -0.75rem 0 1.5rem;
  font-size: 1.05rem;
  color: var(--nsu-text);
}

/* --- список фактов о человеке ---
 * Данные студента в карточке заявления и импортные поля в профиле
 * преподавателя. Обычный `dl` Pico рисует плоско: подпись и значение
 * одним шрифтом, друг под другом, и семь полей сливаются в стену текста.
 * Сетка «подпись | значение» разводит их по колонкам, подпись гасится
 * серым — взгляд идёт по значениям, а не по названиям полей. */

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.75rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--nsu-border);
  border-radius: 4px;
  background: var(--nsu-surface);
}

.facts dt {
  color: #666;
  font-size: 0.9rem;
  padding-top: 0.1rem;
}

.facts dd {
  margin: 0;
}

/* Темы прошлых лет в профиле приходят списком внутри значения.
 * Без сброса Pico отодвигает его от колонки на два сантиметра,
 * и список повисает в стороне от своей подписи. */
.facts dd ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* --- обращение студента ---
 * Чужой текст отделён от нашего: рамкой слева и подложкой. `pre-wrap`
 * обязателен — студент пишет абзацами, а HTML схлопывает переносы,
 * и без него письмо на три абзаца слипается в один ком. */

.quote {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--nsu-green);
  border-radius: 0 4px 4px 0;
  background: var(--nsu-surface);
  white-space: pre-wrap;
}

/* --- ряд действий ---
 * Pico растягивает кнопку внутри формы во всю ширину, а ссылку-кнопку
 * нет: рядом они выглядели как главная кнопка и приписка, хотя это
 * равноправные решения. Здесь у всех троих одна ширина по содержимому,
 * а цвет отвечает за смысл: согласие, отказ, возврат.
 *
 * Цвета взяты не на глаз — каждый проверен на контраст с белым текстом:
 * зелёный 5.05, красный 6.54, синий 4.81 при норме 4.5. */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.actions form {
  margin: 0;
}

.actions button,
.actions a[role="button"] {
  width: auto;
  margin: 0;
  padding: 0.65rem 1.5rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.action-accept {
  background: var(--nsu-green-dark);
  border-color: var(--nsu-green-dark);
  color: #fff;
}

.action-accept:hover {
  background: var(--nsu-green-darker);
  border-color: var(--nsu-green-darker);
}

.action-reject {
  background: var(--nsu-red);
  border-color: var(--nsu-red);
  color: #fff;
}

.action-reject:hover {
  background: #8f1e18;
  border-color: #8f1e18;
}

.action-back {
  background: var(--nsu-blue-dark);
  border-color: var(--nsu-blue-dark);
  color: #fff;
}

.action-back:hover {
  background: var(--nsu-blue-darker);
  border-color: var(--nsu-blue-darker);
}

/* --- подвал --- */

.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--nsu-border);
  color: #777;
  font-size: 0.9rem;
}

/* --- узкий экран (Ф-10: не ломается, но отдельной вёрстки нет) --- */

@media (max-width: 640px) {
  .site-header {
    gap: 0.75rem;
  }

  .site-header__logo img {
    height: 40px;
  }

  /* Меню уходит на свою строку целиком, а не рвётся посередине. */
  .main-nav {
    flex: 1 0 100%;
    order: 3;
  }

  .main-nav ul {
    gap: 0.5rem 1rem;
  }

  .site-header__user {
    font-size: 0.9rem;
  }

  .row-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Две колонки на телефоне не помещаются: подпись переносится
   * по слогам и читать становится нечем. */
  .facts {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .facts dt {
    margin-top: 0.75rem;
  }

  .facts dt:first-child {
    margin-top: 0;
  }

  /* Кнопки решения встают столбиком во всю ширину — попасть пальцем
   * в ряд из трёх на узком экране нельзя. */
  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .actions button,
  .actions a[role="button"] {
    width: 100%;
    text-align: center;
  }
}

/* --- фильтры списка преподавателей (этап 7) ---
 * Простая колонка: подпись, поле, подпись, поле. Отдельной сетки нет
 * намеренно — полей четыре, и на узком экране колонка читается лучше
 * любой раскладки в ряд. */

.filters {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--nsu-border);
  border-radius: 4px;
  background: var(--nsu-surface);
  margin-bottom: 1.5rem;
}

.filters label {
  font-size: 0.95rem;
}

.filters button,
.filters a[role="button"] {
  width: auto;
  margin-right: 0.75rem;
}