/* Фирменные акценты Ивритикса поверх темы: светло-синий, белый,
   пастельно-розовый. Основной синий задаётся в settings.py (COLORS),
   здесь только розовые детали и мелкая доводка. */

/* Место под полосу прокрутки держим всегда: без этого страница, ставшая
   выше экрана (например, когда раскрыли фильтр), сдвигает всё содержимое
   влево на ширину полосы, и кнопки «гуляют» вбок. */
html {
  scrollbar-gutter: stable;
}

:root {
  --ivritix-pink: #f472b6;
  --ivritix-pink-soft: #fbcfe8;
  --ivritix-pink-bg: #fdf2f8;
  --ivritix-line: rgba(148, 163, 184, .22);
  --ivritix-card: #fff;
}

/* Иконки пунктов меню — светло-синие, активный пункт в розовой подложке */
#nav-sidebar-inner a .material-symbols-outlined {
  color: #38bdf8;
}

#nav-sidebar-inner a[class*="bg-primary-50"],
#nav-sidebar-inner a[class*="bg-base-100"] {
  background-color: var(--ivritix-pink-bg);
}

/* Круглая кнопка «добавить» — розовая, единственная кнопка такого цвета */
a[class*="rounded-full"][class*="bg-primary-600"] {
  background-color: var(--ivritix-pink);
}

/* Шапки таблиц — голубые: названия столбцов должны читаться как подписи,
   а не как предупреждение */
thead tr {
  background-color: #F0F9FF !important;
}

thead th,
thead th a,
.grid-table thead th {
  color: #0369A1 !important;
}

/* Тонкая розовая полоска сверху карточек дашборда */
#content .rounded-default > div:first-child > h2 {
  border-left: 3px solid var(--ivritix-pink-soft);
  padding-left: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ivritix-pink-bg: rgba(244, 114, 182, 0.08);
    --ivritix-line: rgba(148, 163, 184, .18);
    --ivritix-card: rgba(255, 255, 255, .03);
  }
}

/* Кнопка «Фильтры» — справа в строке, вид общий для всех кнопок */
.filter-open-button {
  margin-left: auto;
}

.filter-open-button + .addlink {
  margin-left: 0;
}

.filter-open-button:hover {
  opacity: .9;
}

/* Круглая кнопка «добавить» из темы больше не используется */
a.addlink.rounded-full {
  display: none;
}


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

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
  transition: transform .13s ease, filter .13s ease;
}

a > .tag,
a.tag {
  cursor: pointer;
}

a:hover > .tag,
a.tag:hover {
  transform: scale(1.05);
  filter: brightness(.97);
}

.tag-group { background: #E0F2FE; color: #0369A1; }
.tag-quiet { background: #F1F5F9; color: #475569; }

/* Группа — без цвета вовсе: серая обводка, впереди буква уровня */
.tag-outline {
  background: transparent;
  border: 1px solid #E2E8F0;
  color: #475569;
  padding: 2px 8px;
}

.tag-outline b {
  font-weight: 600;
}

/* Преподаватель — та же форма, но без заливки: только голубая обводка */
.tag-teacher {
  background: transparent;
  color: #0369A1;
  border: 1px solid #7DD3FC;
  padding: 2px 8px;
}


/* --- Наведение ---------------------------------------------------------------
   Карточку под курсором видно сразу: обводка чуть толще, сама карточка
   слегка приподнимается. */

.hover-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hover-card:hover {
  transform: translateY(-2px) scale(1.012);
  border-color: #7DD3FC;
  box-shadow: 0 0 0 1px #7DD3FC, 0 8px 20px rgba(2, 132, 199, .10);
}

/* Большие рамки (например, группа в посещаемости) не двигаем: под курсором
   там таблица, по которой кликают. Только подсвечиваем обводку. */
.hover-frame {
  transition: box-shadow .15s ease, border-color .15s ease;
}

.hover-frame:hover {
  border-color: #7DD3FC;
  box-shadow: 0 0 0 1px #7DD3FC;
}

/* Строки таблиц не увеличиваем — вместо этого голубая метка слева */
#changelist-form tbody tr,
.attendance-table tbody tr {
  transition: background-color .13s ease, box-shadow .13s ease;
}

#changelist-form tbody tr:hover,
.attendance-table tbody tr:hover {
  background-color: #E0F2FE;  /* голубее шапки, чтобы строка выделялась */
  box-shadow: inset 3px 0 0 #38BDF8;
}

@media (prefers-color-scheme: dark) {
  #changelist-form tbody tr:hover,
  .attendance-table tbody tr:hover {
    background-color: rgba(56, 189, 248, .10);
  }
}

/* голубая метка не должна наезжать на первую букву имени */
.attendance-table tbody td:first-child {
  padding-left: 10px;
}

/* --- Кнопки -------------------------------------------------------------------
   Розовые (--ivritix-pink) — только две кнопки над списком: «Добавить …»
   и «Фильтры». Все остальные кнопки платформы голубые, как и были. */

a.addlink,
.filter-open-button {
  background: var(--ivritix-pink) !important;
  border-color: var(--ivritix-pink) !important;
  color: #fff !important;
}

/* Все кнопки строки над списком одной высоты — 36 точек */
a.addlink,
.import-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Кнопка поиска стоит между ними и нарочно тихая: белая с рамкой.
   Высота у всех кнопок строки одна — 36 точек, иначе соседние отступы
   съезжают и строка выглядит криво. */
.ivr-button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #fff;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.ivr-button:hover {
  border-color: #7DD3FC;
  background: #F0F9FF;
}

/* Удаление — та же кнопка, только бледно-розовая: красного в платформе нет */
a.deletelink,
a.bg-red-600,
button.bg-red-600 {
  background: var(--ivritix-pink-soft) !important;
  border-color: var(--ivritix-pink-soft) !important;
  color: #9D174D !important;
}

/* Кнопки ведут себя как карточки: под курсором приподнимаются */
.ivr-button,
.filter-open-button,
a.addlink,
.import-button,
.stu-button,
#changelist-form .button,
.eco-page button[type="submit"] {
  transition: transform .13s ease, box-shadow .13s ease, opacity .13s ease;
}

.ivr-button:hover,
.filter-open-button:hover,
a.addlink:hover,
.import-button:hover,
.stu-button:hover,
#changelist-form .button:hover,
.eco-page button[type="submit"]:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 16px rgba(2, 132, 199, .18);
}

.filter-open-button:hover,
a.addlink:hover {
  box-shadow: 0 6px 16px rgba(244, 114, 182, .28);
}


/* Обязательные поля и кнопки удаления в таблицах — кремово-розовые.
   Красный читался как «ошибка», хотя ничего не сломано. */
.required:after,
label .text-red-600,
form .text-red-500,
form .text-red-600,
.field-line .text-red-600 {
  color: #F472B6 !important;
}

.inline-deletelink,
.inline-related .material-symbols-outlined.text-red-600,
a[class*="delete"] .material-symbols-outlined {
  color: #F472B6 !important;
}


/* --- Плашки уровней ---------------------------------------------------------- */

.level-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .13s ease, border-color .13s ease, background-color .13s ease;
}

.level-chip:hover {
  border-color: #7DD3FC;
  background: #F0F9FF;
  transform: translateY(-1px);
}

.level-chip-active {
  background: #38BDF8;
  border-color: #38BDF8;
  color: #fff;
}


/* --- Вкладки раздела ----------------------------------------------------------
   Корешки папки: вкладки сидят на общей линии, активная — розовая во всю
   высоту, без полей сверху и снизу. */

#tabs-wrapper {
  margin-bottom: 16px;
  border-bottom: 1px solid #E2E8F0;
}

#tabs-items {
  margin-bottom: -1px;
  padding: 0 !important;
  gap: 2px;
  background: transparent !important;
  border-radius: 0;
}

#tabs-items > a {
  padding: 10px 18px !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 14px;
}

#tabs-items > a:hover {
  background: #F1F5F9;
}

#tabs-items > .active,
#tabs-items > .active:hover {
  background: var(--ivritix-pink);
  color: #fff;
  box-shadow: none;
}


/* --- Переход между вкладками и страницами ------------------------------------
   Анимации появления страницы здесь нет намеренно (убрана 08.09.2026).
   Раньше содержимое подъезжало снизу за 0,34 с — на ноутбуке, где страница
   открывалась мгновенно, это выглядело живо, а на сервере легло сверху
   настоящей загрузки, и переход между разделами стал ощущаться вязким.
   Владелец: «сделай открытие страниц без анимации оттягивания».

   Плавность внутри страницы осталась: панель фильтров, поиск и окошки
   по-прежнему раскрываются через .fold — там анимация отвечает на нажатие,
   а не задерживает то, чего человек уже ждёт. */

/* сама вкладка отвечает на касание: под курсором чуть приподнимается,
   в момент нажатия — приседает */
#tabs-items > a {
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

#tabs-items > a:hover { transform: translateY(-1px); }
#tabs-items > a:active { transform: translateY(1px); }

/* если человек просил систему не анимировать ничего — не анимируем */
@media (prefers-reduced-motion: reduce) {
  #tabs-items > a:hover,
  #tabs-items > a:active { transform: none; }
}


/* --- Поиск: кнопка со значком, поле выезжает рядом ---------------------------- */

.search-fold {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-fold .search-field {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #fff;
  /* поле выезжает вбок: ширина растёт из нуля, рамка появляется вместе с ним */
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  border-color: transparent;
  opacity: 0;
  overflow: hidden;
  transition: max-width .28s ease, opacity .22s ease, padding .28s ease,
              border-color .28s ease;
}

.search-fold.open .search-field {
  max-width: 320px;
  padding-left: 10px;
  padding-right: 10px;
  border-color: #E2E8F0;
  opacity: 1;
}

.search-fold .search-field .material-symbols-outlined {
  color: #94A3B8;
}

.search-fold .search-field input {
  width: 240px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
}

.search-fold .search-field input:focus {
  outline: none;
}


/* --- «Ведёт группы»: одна строка, остальное под стрелочкой -------------------- */

/* Ширина у колонки своя и постоянная: раскрытие меняет только высоту строки,
   колонка на месте. Плашка длиннее ширины обрезается многоточием. */
.groups-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 210px;
}

.groups-cell .tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.groups-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 6px;
  background: #F1F5F9;
  color: #475569;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.groups-more > summary::-webkit-details-marker { display: none; }

.groups-more > summary::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-size: 16px;
  line-height: 1;
}

.groups-more[open] > summary::after { content: "expand_less"; }

.groups-more > summary:hover { background: #E2E8F0; }

/* развёрнутый список выезжает на свою строку — группы друг под другом */
.groups-drop {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.groups-more[open] + .groups-drop { display: flex; }


/* --- Таблицы: деления на столбцы ---------------------------------------------- */

#changelist-form table td,
#changelist-form table th,
.lined-table td,
.lined-table th,
.grid-table td,
.grid-table th {
  border-right: 1px solid var(--ivritix-line);
}

#changelist-form table td:last-child,
#changelist-form table th:last-child,
.lined-table td:last-child,
.lined-table th:last-child,
.grid-table td:last-child,
.grid-table th:last-child {
  border-right: 0;
}

.lined-table tbody tr {
  border-top: 1px solid var(--ivritix-line);
}

/* Таблица с заданными долями колонок: длинное название группы обрезается
   многоточием, а таблица не вылезает за карточку */
.fixed-table {
  table-layout: fixed;
  width: 100%;
}

.fixed-table td,
.fixed-table th {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fixed-table .tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* --- Список учеников: имя целиком в одну строку -------------------------------
   Имя — то, по чему человека находят глазами, переносить его нельзя.
   Место под него отбираем у соседей: клетки чуть уже. */

#changelist-form table:has(.column-name_cell) .field-name_cell,
#changelist-form table:has(.column-name_cell) .column-name_cell {
  white-space: nowrap;
}

#changelist-form table:has(.column-name_cell) td,
#changelist-form table:has(.column-name_cell) th {
  padding-left: 4px;
  padding-right: 4px;
}

/* Плашки группы и преподавателя — самые широкие в строке: длинное название
   обрезаем многоточием, целиком оно видно в подсказке и в карточке группы */
#changelist-form table:has(.column-name_cell) .field-groups_and_teacher .tag {
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Первая колонка не липнет к разделителю: галочке нужен воздух */
#changelist-form table td:first-child,
#changelist-form table th:first-child {
  padding-left: 12px;
  padding-right: 12px;
}

/* Шапка таблицы едет вместе с прокруткой: видно, что за колонка */
#changelist-form thead th,
.attendance-table thead th,
.grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: #F0F9FF;
}

/* --- Дашборд: одна сетка на все блоки ----------------------------------------
   Все карточки — ячейки одной сетки из 12 колонок, поэтому их края совпадают
   по вертикали. Разнобой границ читается как неряшливость. */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.dash-grid > div { min-width: 0; }
.dash-3 { grid-column: span 3; }
/* боковой блок начинается ровно там же, где четвёртая карточка сверху */
.dash-9 { grid-column: span 9; }
.dash-3-side { grid-column: span 3; }

/* карточка растягивается на всю высоту своей ячейки */
.dash-grid > div > .rounded-default { height: 100%; }

@media (max-width: 1100px) {
  .dash-3 { grid-column: span 6; }
  .dash-9, .dash-3-side { grid-column: span 12; }
}

@media (max-width: 640px) {
  .dash-3 { grid-column: span 12; }
}

/* Экономика: всё в один экран. Сверху сравнение цен и настройки,
   под ними — три коротких блока в ряд, а не длинный столбец сбоку. */
/* Правило оформления: соседние карточки одной высоты, а кнопки в них —
   на одной линии. Разнобой по высоте читается как неряшливость. */
/* Оба ряда с одинаковыми колонками: границы карточек совпадают по вертикали */
/* Слева расчёты, справа настройки на всю высоту — под таблицами не остаётся
   пустых белых полей */
.eco-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 10px;
  align-items: start;
}

.eco-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.eco-plan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  align-items: start;
}

/* --- Экономика: карточки одного вида ------------------------------------------
   Заголовок у всех одинаковый по размеру и на бледно-розовой полосе, как
   у карточек темы. Цель по прибыли выделена голубым — она главная. */
.eco-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  margin-bottom: 10px;
}

.eco-card-head {
  font-size: 15px;
  font-weight: 600;
  color: #0F172A;
  background: var(--ivritix-pink-bg);
  border-bottom: 1px solid #E2E8F0;
  border-radius: 12px 12px 0 0;
  padding: 9px 14px;
}

.eco-card-goal { background: #F0F9FF; border-color: #BAE6FD; }
.eco-card-goal .eco-card-head { background: #E0F2FE; border-bottom-color: #BAE6FD; }

/* тревожная карточка — перерасход бюджета, пустой кабинет */
.eco-card-alert { background: #FFF5F8; border-color: #FBCFE8; }
.eco-card-alert .eco-card-head { background: #FBCFE8; color: #9D174D; border-bottom-color: #F9A8D4; }

/* шапки карточек темы — та же бледно-розовая полоса */
.eco-page .p-6 > .-mx-6 {
  background: var(--ivritix-pink-bg);
}

.eco-page .p-6 > .-mx-6 h2 {
  font-size: 15px !important;
}

.eco-goal {
  /* !important: тема делает все формы флексом и ломает раскладку */
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
}

.eco-goal-main { grid-column: 1; }

.eco-goal-owners {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  border-left: 1px solid #BAE6FD;
  padding-left: 16px;
}

.eco-be-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 12px 14px;
}

@media (prefers-color-scheme: dark) {
  .eco-card { background: transparent; border-color: #1E293B; }
  .eco-card-head { background: rgba(244, 114, 182, .08); border-bottom-color: #1E293B; color: #E2E8F0; }
  .eco-card-goal { background: rgba(56, 189, 248, .06); border-color: #164E63; }
  .eco-card-goal .eco-card-head { background: rgba(56, 189, 248, .12); }
  .eco-goal-owners { border-left-color: #164E63; }
}

/* Страница-калькулятор должна помещаться целиком, поэтому здесь всё плотнее
   обычного: поля карточек, строки таблиц и подписи. */
.eco-page .p-6 {
  padding: 12px !important;
}

.eco-page .p-6 > .-mx-6 {
  margin: -12px -12px 8px !important;
  padding: 7px 12px !important;
}

.eco-page .grid-table thead th {
  padding: 3px 8px;
}

.eco-page .grid-table tbody td {
  padding: 4px 8px;
  font-size: 13px;
}

/* Разделитель между вариантом А, вариантом Б и разницей: без него
   «разница» читается как часть варианта Б. */
.eco-sep {
  border-left: 2px solid #E2E8F0 !important;
  padding-left: 12px !important;
}

@media (prefers-color-scheme: dark) {
  .eco-sep { border-left-color: #334155 !important; }
}

/* Верхняя строка с главными цифрами */
.eco-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

.eco-strip-label { font-size: 12px; color: #64748B; }
.eco-strip-value { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 2px 0; }
.eco-strip-hint { font-size: 11px; color: #94A3B8; line-height: 1.3; }

@media (prefers-color-scheme: dark) {
  .eco-strip { background: transparent; border-color: #1E293B; }
  .eco-strip-value { color: #E2E8F0; }
}

.eco-fields label {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  line-height: 1.25;
}

@media (max-width: 1180px) {
  .eco-columns { grid-template-columns: minmax(0, 1fr); }
  .eco-goal { grid-template-columns: minmax(0, 1fr); }
  .eco-goal-owners { border-left: 0; padding-left: 0; }
}

/* Поля ввода в калькуляторе экономики: узкие, число по центру */
.calc-input {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 5px 8px;
  width: 78px;
  font-size: 14px;
  text-align: center;
  transition: border-color .13s ease;
}

.calc-input:focus {
  border-color: #38BDF8;
  outline: none;
}

@media (prefers-color-scheme: dark) {
  .calc-input { background: transparent; border-color: #334155; color: #E2E8F0; }
}

/* числа в таблицах читаются, когда стоят по центру своей колонки */
.num {
  display: block;
  text-align: center;
}


/* --- Ставка за урок: правится прямо в строке ---------------------------------- */

#changelist-form th.column-rate_per_lesson > div { justify-content: center; }

#changelist-form td.field-rate_per_lesson {
  text-align: center;
  cursor: text;
}

#changelist-form td.field-rate_per_lesson input {
  width: 74px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  text-align: center;
  transition: border-color .13s ease, background-color .13s ease;
}

#changelist-form td.field-rate_per_lesson input:hover {
  border-color: #E2E8F0;
  background: #F8FAFC;
}

#changelist-form td.field-rate_per_lesson input:focus {
  border-color: #7DD3FC;
  background: #fff;
  outline: none;
}

/* карандашик рядом — подсказка, что число правится прямо здесь */
#changelist-form td.field-rate_per_lesson::after {
  content: "edit";
  font-family: "Material Symbols Outlined";
  font-size: 16px;
  color: #CBD5E1;
  vertical-align: middle;
}

#changelist-form td.field-rate_per_lesson:hover::after { color: #38BDF8; }


/* --- Статус ученика прямо в списке -------------------------------------------- */

#changelist-form select[data-status] {
  border-radius: 6px;
  border: 0;
  font-weight: 400;
  padding: 4px 10px;
  background-color: #F1F5F9;
  color: #475569;
}

#changelist-form select[data-status="lead"] { background-color: #FEF9C3; color: #A16207; }
#changelist-form select[data-status="active"] { background-color: #DCFCE7; color: #15803D; }
#changelist-form select[data-status="paused"] { background-color: #E0F2FE; color: #0369A1; }
#changelist-form select[data-status="quit"] { background-color: #FBCFE8; color: #9D174D; }
#changelist-form select[data-status="archived"] { background-color: transparent; color: #94A3B8; }
/* те же правила для скидок: действует — зелёная, отключена — розовая */
#changelist-form select[data-status="on"] { background-color: #DCFCE7; color: #15803D; }
#changelist-form select[data-status="off"] { background-color: #FBCFE8; color: #9D174D; }


/* --- Плавное раскрытие: один приём на всю платформу ---------------------------
   Ничего не появляется рывком. Блок растёт из нуля за 0,28 с — так же
   разворачивается панель фильтров, поля своих дат, поле поиска, таблица
   группы в посещаемости и поле «Что не так» в карточке ученика. */

.fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .28s ease, opacity .22s ease;
}

.fold.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.fold-clip {
  min-height: 0;
  overflow: hidden;
}

/* полосой во всю ширину — когда блок должен встать на свою строку */
.fold-wide { width: 100%; }

/* строка формы, которую нельзя обернуть: выезжает по высоте */
.fold-row {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .28s ease, opacity .22s ease;
}

.fold-row.open {
  max-height: 240px;
  opacity: 1;
}


/* --- Посещаемость: каждая группа в своей рамке -------------------------------- */

.attendance-group {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #fff;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.attendance-group-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
  user-select: none;
  transition: padding-bottom .28s ease, margin-bottom .28s ease,
              border-color .28s ease;
}

/* Свёрнутая группа — одна строка: уровень, расписание, преподаватель и цифры.
   Черта под заголовком нужна только когда под ней что-то есть. */
.attendance-group:not(.open) .attendance-group-head {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom-color: transparent;
}

.attendance-arrow {
  background: none;
  border: none;
  padding: 2px 2px 2px 0;
  font-size: 13px;
  line-height: 1;
  color: #94A3B8;
  cursor: pointer;
  transition: transform .28s ease, color .13s ease;
}

.attendance-group-head:hover .attendance-arrow { color: #38BDF8; }
.attendance-group.open .attendance-arrow { transform: rotate(180deg); }


/* Ширины колонок фиксированные: у всех групп имя, «куплено» и клетки занятий
   стоят на одних и тех же местах, даже когда занятий разное число. */
.attendance-table {
  table-layout: fixed;
  border-collapse: collapse;
}

.attendance-date,
.attendance-head {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  padding-left: 2px;
  padding-right: 2px;
}

.attendance-table td,
.attendance-table th {
  border-right: 1px solid var(--ivritix-line);
}

.attendance-table td:last-child,
.attendance-table th:last-child {
  border-right: 0;
}


/* --- Дашборд и выплаты: ровные колонки ---------------------------------------- */

.grid-table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}

.grid-table thead th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94A3B8;
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

.grid-table tbody td {
  padding: 8px 10px;
  border-top: 1px solid var(--ivritix-line);
  vertical-align: middle;
}

.grid-table .right { text-align: right; }
.grid-table .center { text-align: center; }

.grid-table thead th.right { text-align: right; }
.grid-table thead th.center { text-align: center; }


@media (prefers-color-scheme: dark) {
  .attendance-group { background: transparent; border-color: #1E293B; }
  .attendance-group-head { border-bottom-color: #1E293B; }
  .level-chip { background: transparent; border-color: #334155; color: #CBD5E1; }
  .level-chip:hover { background: rgba(56, 189, 248, .12); }
  .level-chip-active { background: #38BDF8; color: #fff; }
}


/* Выбранный пункт фильтра — синяя плашка. Невыбранные остаются белыми. */
#filter-column a[class*="bg-primary-50"],
#filter-column a[class*="bg-base-100"],
#filter-column a[aria-current],
#filter-column .selected > a {
  background-color: #38BDF8 !important;
  color: #fff !important;
  border-radius: 8px;
}

/* Выпадающий статус прямо в списке — чтобы название влезало целиком */
#changelist-form td select,
#changelist-form td .select2-container {
  min-width: 160px;
}


/* --- Календарь собеседований --------------------------------------------------
   Месяц целиком вместо простыни строк: неделя начинается с воскресенья,
   в каждом дне свои окна — зелёные свободны, розовые заняты. */

.cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cal-title {
  min-width: 150px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #E2E8F0;
  overflow: hidden;
}

.cal-weekday {
  padding: 7px 10px;
  background: #F0F9FF;
  color: #0369A1;
  font-size: 12px;
  font-weight: 600;
}

.cal-day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  padding: 6px;
  background: #fff;
}

.cal-out { background: #F8FAFC; }

.cal-today .cal-num {
  background: var(--ivritix-pink);
  color: #fff;
}

.cal-num {
  align-self: flex-start;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 6px;
  color: #64748B;
  font-size: 12px;
  text-align: center;
}

.cal-empty {
  color: #CBD5E1;
  font-size: 12px;
}

/* Окно: время плашкой, по нажатию раскрывается карточка с кнопкой */
.cal-slot {
  position: relative;
}

.cal-slot > summary {
  display: block;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  list-style: none;
}

.cal-slot > summary::-webkit-details-marker { display: none; }

.cal-free > summary { background: #DCFCE7; color: #15803D; }
.cal-taken > summary { background: #FCE7F3; color: #9D174D; }

.cal-slot > summary:hover { filter: brightness(.97); }

.cal-pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 230px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}


/* --- Перенос учеников из таблицы --------------------------------------------- */

.import-button,
.import-button-quiet {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .13s ease, opacity .13s ease, background-color .13s ease;
}

.import-button {
  background: #38BDF8;
  color: #fff;
}

.import-button-quiet {
  background: #fff;
  border-color: #E2E8F0;
  color: #475569;
}

.import-button:hover,
.import-button-quiet:hover {
  transform: translateY(-1px);
  opacity: .95;
}

.import-button-quiet:hover {
  border-color: #7DD3FC;
  background: #F0F9FF;
}


/* --- Карточка ученика ---------------------------------------------------------
   Сверху дашборд теми же карточками, что на главной странице, ниже контакты
   одной строкой, в самом низу оплаты. Таблиц в карточке нет: длинная история
   заменена значками, а редкие действия спрятаны за кнопку. */

.dash-6 { grid-column: span 6; }

/* ряд одинаковых карточек, когда их не делится на 12: экономика группы */
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.dash-12 { grid-column: span 12; }

@media (max-width: 1100px) {
  .dash-6 { grid-column: span 12; }
}

/* строка «подпись — значение» внутри карточки */
.stu-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ivritix-line);
  font-size: 13px;
}

.stu-line:last-of-type { border-bottom: 0; }
.stu-line > span:first-child { opacity: .6; white-space: nowrap; }
.stu-line > span:last-child { min-width: 0; text-align: right; }

.stu-note { margin-top: 10px; font-size: 12px; opacity: .6; line-height: 1.5; }
.stu-link { color: #0369A1; }
.stu-link:hover { text-decoration: underline; }

.stu-copy {
  width: 100%;
  max-width: 240px;
  padding: 4px 8px;
  border: 1px solid var(--ivritix-line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 12px;
}

.stu-button {
  margin-top: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: #38BDF8;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .13s ease, filter .13s ease;
}

.stu-button:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* --- посещаемость значками: те же квадратики, что в общей сетке --- */

.stu-cells { display: flex; flex-wrap: wrap; gap: 6px; }

.stu-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .13s ease, filter .13s ease;
}

.stu-cell:hover { transform: translateY(-2px); filter: brightness(.97); }
.stu-cell small { font-weight: 400; font-size: 10px; opacity: .75; }

.stu-legends { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }

.stu-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: .75;
}

.stu-legend i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-style: normal;
  font-weight: 700;
}

/* Блок во всю ширину: подпись поля не нужна, содержимое начинается слева */
.stu-flat .form-row > div { display: block !important; }
.stu-flat .form-row label { display: none; }
.stu-flat .readonly { max-width: none !important; }

/* --- контакты одной строкой --------------------------------------------------- */

.stu-inline .form-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stu-inline .form-row > div { display: block !important; }
.stu-inline .form-row label { width: auto !important; margin-bottom: 2px; }
.stu-inline .form-row { border-bottom: 0 !important; }

/* --- заморозка: окошко поверх страницы ---------------------------------------- */

.stu-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .35);
}

.stu-modal[hidden] { display: none; }

/* появляется мягко: подложка проявляется, окошко чуть подъезжает снизу */
.stu-modal {
  opacity: 0;
  transition: opacity .22s ease;
}

.stu-modal.open { opacity: 1; }

.stu-modal .stu-modal-card {
  transform: translateY(10px) scale(.98);
  transition: transform .28s ease;
}

.stu-modal.open .stu-modal-card { transform: none; }

.stu-modal-card {
  width: min(680px, 92vw);
  padding: 18px;
  border-radius: 14px;
  background: var(--ivritix-card);
  box-shadow: 0 20px 50px rgba(2, 132, 199, .25);
}

.stu-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: #0369A1;
  font-weight: 700;
  letter-spacing: .06em;
}

.stu-close {
  border: 0;
  background: transparent;
  color: #94A3B8;
  font-size: 18px;
  cursor: pointer;
}

.stu-modal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.stu-modal-row input {
  padding: 9px 11px;
  border: 1px solid var(--ivritix-line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 14px;
}

.stu-modal-row input[type=text] { flex: 1; min-width: 180px; }
.stu-modal-row .stu-button { margin-top: 0; }

/* Имя ученика на заморозке — голубым: видно, не читая статус */
.stu-frozen {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #E0F2FE;
  color: #0369A1;
}


/* --- Кнопка сохранения --------------------------------------------------------
   Стоит сразу под блоками страницы. Полоса, приклеенная к низу экрана,
   закрывала содержимое и заставляла целиться в самый край монитора. */

.ivritix-submit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 48px;
}

.ivritix-submit .save-button,
.ivritix-submit .quiet-button {
  padding: 10px 20px;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .13s ease, filter .13s ease;
}

.ivritix-submit .save-button { background: #38BDF8; color: #fff; }
.ivritix-submit .quiet-button { background: #F1F5F9; color: #475569; }

.ivritix-submit .save-button:hover,
.ivritix-submit .quiet-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.ivritix-submit .delete-link {
  margin-left: auto;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--ivritix-pink-soft);
  color: #9D174D;
  font-size: 13px;
  text-decoration: none;
  transition: filter .13s ease;
}

.ivritix-submit .delete-link:hover { filter: brightness(.97); }


/* --- Страницы под списком -----------------------------------------------------
   Обычная строка, а не приклеенная к низу экрана полоса: она закрывала
   последнюю строку таблицы. */

.ivritix-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 40px;
  padding: 0 4px;
  font-size: 13px;
  color: #64748B;
}

.ivritix-pages a { color: #0369A1; }
.ivritix-pages a:hover { text-decoration: underline; }


/* --- Панель фильтров ----------------------------------------------------------
   Разворачивается прямо под кнопками, список от этого съезжает вниз. Никаких
   шторок и затемнения: таблица всё время на виду. */

/* Строка кнопок над списком. Зазор только по горизонтали: свёрнутая панель
   фильтров стоит второй строкой нулевой высоты и не должна оставлять под
   кнопками пустого места — иначе отступ снизу больше, чем сверху. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 12px;
  row-gap: 0;
}

.filter-open {
  height: 36px;
  /* ширина под самую длинную подпись: «Фильтр» и «Свернуть» разной длины,
     и без этого соседние кнопки дёргались вбок при каждом нажатии */
  min-width: 104px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #38BDF8;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .13s ease, box-shadow .13s ease, filter .13s ease;
}

/* под курсором кнопка не меняет цвет — только чуть приподнимается,
   как все кнопки платформы */
.filter-open:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, .18);
}

.filter-open.open {
  background: #F1F5F9;
  color: #475569;
}

/* Панель стоит в одной рамке с кнопками — открытая кнопка и поле читаются
   как один блок. Разворачивается плавно: строка сетки растёт от нуля до
   своей высоты, а обёртка-ножницы прячет то, что ещё не поместилось.
   Поля вокруг кнопок даёт сама рамка: ровно 12 точек со всех сторон. */

.filter-wrap {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  /* панель ложится вплотную под кнопку — они читаются как одна фигура.
     Зазора между строками у ряда нет, поэтому свёрнутая панель не оставляет
     под кнопками пустого места. */
  opacity: 0;
  transition: grid-template-rows .28s ease, opacity .22s ease;
}

.filter-wrap.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.filter-clip {
  min-height: 0;
  overflow: hidden;
}

.filter-panel {
  background: #F1F5F9;
  border-radius: 8px;
  /* воздух до строки кнопок — тот же шаг, что и между всеми блоками.
     Отступ внутри раскрывающейся области: свёрнутая панель места не занимает */
  margin-top: 16px;
  padding: 12px 14px;
  /* по содержимому: растянутая на весь экран панель заставляет тянуться
     через полстола ради одной галочки */
  width: fit-content;
  max-width: 100%;
}

.filter-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ivritix-line);
}

.filter-line:last-child { border-bottom: 0; }

.filter-title {
  width: 132px;
  /* еле заметная черта, как между колонками таблицы: название строки читается
     отдельно от самих условий */
  border-right: 1px solid var(--ivritix-line);
  padding-right: 12px;
  margin-right: 4px;
  font-size: 13px;
  color: #64748B;
}

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--ivritix-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  user-select: none;
  transition: all .13s ease;
}

.fchip:hover { border-color: #7DD3FC; color: #0369A1; }

.fchip.on {
  background: #E0F2FE;
  border-color: #7DD3FC;
  color: #0369A1;
  font-weight: 500;
}

.fchip input { accent-color: #0EA5E9; margin: 0; }

.fselect {
  padding: 6px 10px;
  border: 1px solid var(--ivritix-line);
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 13px;
}

/* «Сбросить всё» стоит сразу за условиями, а не улетает к краю экрана:
   всё, с чем человек работает, должно быть под рукой */
.filter-reset {
  font-size: 13px;
  color: #0369A1;
}

.filter-reset:hover { text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  .filter-panel { background: rgba(255, 255, 255, .03); }
  .fchip, .fselect { background: transparent; }
}

/* Темы уроков — плашки с превью, а не строки таблицы: урок выбирают
   глазами. Шаг между плашками тот же, что везде, — 16 точек. */

.topic-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.topic-tile {
  background: var(--ivritix-card);
  border: 1px solid var(--ivritix-line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.topic-open {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.topic-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  background: linear-gradient(140deg, #E0F2FE, var(--ivritix-pink-bg));
  overflow: hidden;
}

.topic-preview img { width: 100%; height: 100%; object-fit: cover; }

.topic-letter {
  font-size: 46px;
  font-weight: 600;
  color: var(--ivritix-pink);
}

.topic-draft {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #fff;
  color: #64748B;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
}

.topic-body { display: block; flex: 1; padding: 12px 14px 4px; }
.topic-name { display: block; font-size: 16px; font-weight: 600; }
.topic-sub { display: block; font-size: 13px; color: #64748B; margin-bottom: 8px; }
.topic-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.topic-count { font-size: 13px; color: #64748B; }

/* «Редактировать урок» — плашка внизу карточки: сама карточка открывает
   урок, а в конструктор ведёт только эта кнопка */
.topic-edit {
  display: block;
  margin: 12px 14px 14px;
  padding: 7px 12px;
  border: 1px solid var(--ivritix-line);
  border-radius: 8px;
  background: #fff;
  color: #0369A1;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}

.topic-edit:hover {
  transform: translateY(-1px);
  border-color: #38BDF8;
  box-shadow: 0 4px 12px rgba(2, 132, 199, .1);
}