/*
 * Стили админки Hobby Guru.
 * Токены взяты из app.hobby-guru.by, чтобы админка и клиентское
 * приложение выглядели одной системой.
 */

:root {
  --accent: #ff296a;
  --accent-hover: #ef155b;
  --accent-soft: #ffe9f0;

  --ink: #1e1e1e;
  --muted: #828282;
  --icon-muted: #969696;
  --icon-faint: #b3b3b3;

  --surface: #f7f7f7;
  --surface-muted: #fafafa;
  --surface-elevated: #f4f4f4;
  --field: #f6f6f6;
  --line: #eeeeee;
  --line-strong: #dddddd;

  --success: #2ac281;
  --success-soft: #e8f8f1;
  --warning: #f5a524;
  --warning-soft: #fdf3e2;
  --danger: #ff2200;
  --danger-soft: #ffeceb;

  --radius-card: 20px;
  --radius-box: 16px;
  --radius-strip: 12px;
  --radius-pill: 999px;

  /*
   * ⚠️ Радиус тегов и статусов — ПРОПОРЦИОНАЛЬНЫЙ кнопке, а не 999px.
   *
   * Эталон — кнопка верхнего меню: 44px высоты при радиусе 12px. У бейджа
   * высота ~24px, и те же пропорции дают 7px. Полное скругление (999px) рядом
   * с прямоугольной кнопкой выглядит инородно — на экране партнёров это видно
   * сразу: таблетки статусов спорят с кнопкой «Добавить партнёра».
   */
  --radius-tag: 7px;

  /* Мелкие элементы: иконки-кнопки, флажки, переключатели */
  --radius-chip: 9px;

  --shadow-panel: 0 4px 22px -4px #00000012;

  --sidebar-w: 250px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Логотип ---------- */

.logo {
  font-family: 'VAG World', 'SF Pro Display', system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.63px;
}

.logo--sm {
  font-size: 17px;
  letter-spacing: 0.4px;
}

/* ---------- Шапка и навигация ---------- */

.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  /* 16px вместо 24: три больших разрыва отнимали место у меню */
  gap: 16px;
  margin: 0 auto;
  max-width: 1400px;
  height: 64px;
  padding: 0 16px;
}

/*
 * ⚠️ FLEX ОБЯЗАТЕЛЕН: внутри ДВА элемента — колокольчик и кнопка пользователя.
 *
 * Без него они шли потоком, колокольчик выпадал НАД шапкой и висел
 * оторванным значком под верхней кромкой окна.
 */
.header__user {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.topnav {
  display: none;
  align-items: center;
  gap: 2px;
}

.topnav__item {
  display: inline-flex;
  align-items: center;
  /*
   * ⚠️ Компактнее прежнего (было gap 7px / padding 9px 12px).
   *
   * Семь пунктов верхнего уровня с широкими полями съедали строку целиком:
   * колокольчик не помещался и выпадал НАД шапкой. Ужимаем отступы, а не
   * прячем пункты — искать раздел в «ещё» хуже, чем читать плотный ряд.
   */
  gap: 6px;
  border: 0;
  border-radius: var(--radius-strip);
  background: none;
  padding: 8px 10px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.topnav__item:hover {
  background: var(--surface-elevated);
  color: var(--ink);
}

.topnav__item.is-active,
.topnav__group.is-active > .topnav__item {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.topnav__group {
  position: relative;
}

.topnav__group.is-open > .topnav__item svg:last-child {
  rotate: 180deg;
}

.topnav__trigger svg:last-child {
  color: var(--icon-faint);
  transition: rotate 0.18s;
}

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  display: none;
  min-width: 208px;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: #fff;
  padding: 6px;
  box-shadow: 0 12px 32px -8px #00000024;
}

.dropdown--right {
  left: auto;
  right: 0;
}

.topnav__group.is-open .dropdown {
  display: block;
}

.dropdown__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-strip);
  background: none;
  padding: 9px 10px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}

.dropdown__item:hover {
  background: var(--surface-elevated);
  color: var(--ink);
}

.dropdown__item.is-active {
  color: var(--accent);
  font-weight: 500;
}

/* Кнопка пользователя */

.user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  padding: 6px 10px 6px 6px;
  cursor: pointer;
  font: inherit;
  transition: background-color 0.15s;
}

.user-btn:hover {
  background: var(--surface-elevated);
}

.user-btn__avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}

.user-btn__text {
  display: none;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.user-btn__name {
  font-weight: 500;
}

/*
 * ⚠️ РОЛЬ СКРЫТА: у большинства она дублирует имя — «Администратор» под
 * «Администратор». Две строки занимали место, которого не хватило
 * колокольчику, и ничего не сообщали.
 *
 * Роль осталась в выпадающем меню, где она и нужна — при переключении
 * аккаунта.
 */
.user-btn__role {
  display: none;
}

.user-btn svg {
  display: none;
  color: var(--icon-faint);
}

.burger {
  display: flex;
  margin-left: auto;
  cursor: pointer;
  padding: 6px;
}

/* Мобильное меню */

.mobilenav {
  display: none;
  border-top: 1px solid var(--line);
  padding: 8px 12px 16px;
}

.nav-toggle:checked ~ .header .mobilenav {
  display: block;
}

.mobilenav__group {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
}

/* Одиночные пункты меню не должны читаться как часть предыдущей группы */
.mobilenav__group--titled + .mobilenav__item,
.mobilenav > .mobilenav__item + .mobilenav__group--titled {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 8px;
}

.mobilenav__title {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--icon-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.mobilenav__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: var(--radius-strip);
  background: none;
  padding: 12px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.mobilenav__item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.scrim {
  position: fixed;
  inset: 64px 0 0;
  z-index: 20;
  display: none;
  background: rgb(0 0 0 / 0.25);
}

.nav-toggle:checked ~ .scrim {
  display: block;
}

.main {
  margin: 0 auto;
  max-width: 1400px;
  padding: 20px 16px 48px;
}

@media (min-width: 900px) {
  .topnav {
    display: flex;
  }

  .burger,
  .mobilenav,
  .scrim {
    display: none !important;
  }

  /*
   * ⚠️ ИМЯ ПОКАЗЫВАЕМ ТОЛЬКО ОТ 1200px.
   *
   * На 900–1200px в строку уже не влезали семь пунктов меню, колокольчик и
   * имя — колокольчик выпадал НАД шапкой. Ниже порога остаётся аватар с
   * буквой: кто вошёл, видно и по нему, а имя есть в выпадающем меню.
   */
  .user-btn svg {
    display: flex;
  }

  .main {
    padding: 28px 24px 56px;
  }
}

/* ---------- Заголовок страницы ---------- */

.page {
  margin: 0 auto;
}

.page--narrow {
  max-width: 640px;
}

/*
 * Форма с текстовым редактором: шире обычной.
 *
 * ⚠️ 640px хватает анкете из коротких полей, но не форме, где есть описание с
 * панелью редактора и вкладки языков — на 1440px она выглядела узким колодцем
 * при пустом экране справа. Заказчик просил «форму на десктопе сделать шире».
 */
.page--form {
  max-width: 900px;
}

.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.page__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.19px;
}

.page__subtitle {
  margin: 2px 0 0;
  color: var(--muted);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 0;
  color: var(--muted);
}

.back-link:hover {
  color: var(--ink);
}

/* ---------- Карточка ---------- */

.card {
  border-radius: var(--radius-card);
  background: #fff;
  padding: 20px;
  box-shadow: var(--shadow-panel);
}

/*
 * ⚠️ ОТСТУП МЕЖДУ ЛЮБЫМИ БЛОКАМИ, а не только между двумя карточками.
 *
 * Правило было одно — .card + .card. Стоило поставить рядом плитки
 * статистики или сетку из двух карточек, и блоки слипались вплотную:
 * на вкладке «Отчёт» фильтр упирался в плитки, а график — в таблицы.
 *
 * Перечисляем пары явно, а не через универсальный * + *: последний задел бы
 * содержимое внутри карточек, где свои отступы.
 */
.card + .card,
.card + .stats,
.card + .grid,
.stats + .card,
.stats + .grid,
.grid + .card,
.grid + .grid,
.grid + .stats,
.table-wrap + .card,
.card + .table-wrap {
  margin-top: 16px;
}

.card__title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}

.grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .grid--2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid--2 .card + .card {
    margin-top: 0;
  }

  .span-2 {
    grid-column: span 2;
  }
}

/* ---------- Формы ---------- */

.field {
  display: block;
  margin-bottom: 16px;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.input,
.select,
.textarea {
  width: 100%;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-strip);
  background: var(--field);
  padding: 0 14px;
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s, background-color 0.15s;
}

.textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
}

.select {
  appearance: none;
  background-color: var(--field);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}

.input::placeholder {
  color: var(--icon-faint);
}

.input.is-invalid,
.select.is-invalid {
  border-color: var(--danger);
}

.field__error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger);
}

.field__hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--icon-muted);
}

/*
 * Форма-строка: поле и кнопка рядом.
 *
 * ⚠️ Нужна там, где действие требует одного уточнения — например, дата
 * доставки при отгрузке. Отдельный экран ради одного поля заставлял бы
 * лишний раз перезагружать страницу.
 *
 * align-items: flex-end — кнопка встаёт по нижней границе поля, а не по
 * центру вместе с подписью над ним.
 */
/*
 * Колокольчик в шапке.
 *
 * ⚠️ position: relative обязателен: счётчик позиционируется от него. Без
 * этого цифра улетала бы к краю страницы, а не к иконке.
 */
.bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--muted);
  transition: background-color .15s;
}

.bell:hover {
  background: var(--surface);
}

/* Счётчик, а не точка: «три новых» и «одно» — разный повод открыть */
.bell__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* Точка «новое» в списках */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}

.dot--accent {
  background: var(--accent);
}

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

/* Внутри строки нижний отступ поля лишний: его заменяет gap */
.field--inline {
  margin-bottom: 0;
}

.fieldset {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 16px;
  padding: 20px 0 0;
}

.fieldset__legend {
  /*
   * ⚠️ БЫЛО float: left — и оно ломало grid внутри fieldset: строка «Добавить
   * от себя» схлопывалась в НОЛЬ ширины, а выпадающий список уезжал за правый
   * край экрана вместе с горизонтальным скроллом.
   *
   * float у <legend> ставят, чтобы вернуть ему обычное поведение блока
   * (браузер рисует легенду поверх рамки). Но рамки у нас нет — border: 0, —
   * и обычный display: block делает то же самое, ничего не ломая.
   */
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--icon-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Скрытые поля формы (например неактивный режим роялти) */
.field[hidden] {
  display: none;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Миниатюра загруженной картинки в списках: обложки историй, фото категорий */
.thumb {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-chip);
}

.thumb--round {
  border-radius: 50%;
}

/* Кнопки в ячейке таблицы: «Изменить» и «Удалить» в строку */
.row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Экзамен: вопрос с вариантами ответа. Рамка отделяет вопросы друг от друга —
   без неё длинный тест читается как сплошная простыня полей. */
.question {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-chip);
}

.question__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Радиокнопка, поле и «×» в одну строку: поле тянется, кнопки — по содержимому */
.answer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.answer .input {
  flex: 1;
}

/* Список галок: партнёры, которым назначен урок. Колонка, чтобы длинные
   названия не расползались, и с прокруткой — сеть растёт. */
.partner-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-chip);
}

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-strip);
  padding: 0 20px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--secondary {
  border-color: var(--line-strong);
  background: #fff;
  color: var(--ink);
}

.btn--secondary:hover {
  border-color: var(--icon-muted);
}

/*
 * ⚠️ Класс стоял в 23 местах шаблонов, а в стилях его НЕ БЫЛО: кнопки
 * «Назад» и «Изменить» рисовались голым текстом без фона и границы и
 * не читались как кнопки.
 */
/*
 * ⚠️ Прозрачная кнопка СЛИВАЛАСЬ с таблицей: фона нет, цвет --muted — ровно
 * как у соседних ячеек. «Открыть» читалось как ещё одна колонка данных, а не
 * как действие: человек не понимал, что туда можно нажать.
 *
 * Даём слабую подложку и цвет чернил: на белой строке это уже кнопка, но она
 * не спорит с основной розовой.
 */
.btn--ghost {
  background: var(--surface);
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--field);
  color: var(--accent);
}

/*
 * ⚠️ Стрелка чуть бледнее подписи, но НЕ на уровне --icon-muted: на сером фоне
 * кнопки контраст был 2.76 — ниже порога 3:1, который нужен графике, чтобы её
 * вообще было видно. Заказчик решил, что иконки нет. --muted даёт 3.59.
 */
.btn--ghost svg {
  color: var(--muted);
}

.btn--ghost:hover svg {
  color: inherit;
  transform: translateX(2px);
}

/* Стрелка уезжает вправо при наведении — подсказка, что это переход */
.btn--ghost svg {
  transition: transform 0.15s;
}

/* Квадратная кнопка под одну иконку */
.btn--icon {
  width: 44px;
  padding: 0;
}

.btn--sm {
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
}

.btn--icon.btn--sm {
  width: 40px;
}

/* Ссылки-кнопки должны попадать под палец, а не быть тонкой полоской */
.back-link {
  min-height: 40px;
}

.btn--block {
  width: 100%;
}

/* ---------- Таблица ---------- */

.table-wrap {
  margin: 0 -20px;
  overflow-x: auto;
  padding: 0 20px;
}

.table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.table th {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--icon-muted);
  text-align: left;
}

.table td {
  border-bottom: 1px solid var(--line);
  padding: 14px 12px 14px 0;
  vertical-align: top;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table__row:hover {
  background: var(--surface-muted);
}

.table__link {
  font-weight: 500;
}

.table__sub {
  font-size: 12px;
  color: var(--icon-muted);
}

.muted {
  color: var(--muted);
}

/* На узком экране таблица превращается в карточки:
   горизонтальный скролл в списке — плохой опыт на телефоне */
@media (max-width: 767px) {
  .table-wrap {
    margin: 0;
    overflow: visible;
    padding: 0;
  }

  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .table thead {
    display: none;
  }

  .table tr {
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
  }

  .table tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .table tr:first-child {
    padding-top: 0;
  }

  .table td {
    border: 0;
    padding: 0;
  }

  /*
   * ⚠️ Поля в СТРОКУ, а не столбиком.
   *
   * Поймано глазами: каждое поле шло отдельной строкой с подписью — одна
   * карточка каталога занимала весь экран телефона, и чтобы увидеть три
   * мастер-класса, приходилось листать. Подпись слева, значение справа —
   * плотнее и читается как список, а не как форма.
   */
  .table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .table td + td {
    margin-top: 4px;
  }

  /* Подписываем ячейки, раз заголовков таблицы не видно */
  .table td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    color: var(--icon-muted);
    font-size: 13px;
  }

  /* Первая ячейка — название: крупно и без подписи, это заголовок карточки */
  .table td:first-child {
    display: block;
    font-weight: 600;
  }

  .table td:first-child::before,
  .table td[data-label='Партнёр']::before {
    content: none;
  }
}

/* ---------- Бейдж ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-tag);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-elevated);
  color: var(--muted);
}

.badge--success {
  background: var(--success-soft);
  color: var(--success);
}

.badge--warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

/*
 * ⚠️ ЭТОГО КЛАССА НЕ БЫЛО ВОВСЕ, хотя разметка его уже использовала
 * в шести местах («выключен» у курсов и уроков, код валюты у партнёра).
 * Несуществующий класс ничего не ломает и ничего не делает — поэтому
 * пропажа и не замечалась: бейджи выглядели как обычные.
 *
 * Совпадает с базовым .badge по виду, но задан явно: так намерение видно
 * в разметке, и базовый вид можно менять, не трогая эти шесть мест.
 */
.badge--muted {
  background: var(--surface-elevated);
  color: var(--muted);
}

/* ---------- Панель фильтров ---------- */

.filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.search {
  position: relative;
  flex: 1;
}

.search svg {
  position: absolute;
  top: 50%;
  left: 14px;
  translate: 0 -50%;
  color: var(--icon-faint);
}

.search .input {
  padding-left: 40px;
}

@media (min-width: 640px) {
  .filters {
    flex-direction: row;
  }

  .filters .select {
    width: 210px;
  }
}

/* ---------- Список свойств ---------- */

.props {
  margin: 0;
}

.props div + div {
  margin-top: 14px;
}

.props dt {
  font-size: 12px;
  color: var(--icon-muted);
}

.props dd {
  margin: 2px 0 0;
}

/* ---------- Список студий ---------- */

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

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

.items li:first-child {
  padding-top: 0;
}

.items li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.items__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--icon-muted);
}

.items__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Прочее ---------- */

.alert {
  margin-bottom: 20px;
  border-radius: var(--radius-strip);
  padding: 12px 16px;
}

.alert--success {
  background: var(--success-soft);
  color: var(--success);
}

.alert--error {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Не ошибка, а незаконченная настройка: МК без тарифа или без материалов
   работать будет, но не так, как ожидают */
.alert--warning {
  background: var(--warning-soft);
  color: #b06f00;
}

.empty {
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
}

.pagination {
  display: flex;
  gap: 6px;
  margin-top: 20px;
}

.pagination a,
.pagination span {
  display: inline-flex;
  min-width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-strip);
  padding: 0 10px;
  color: var(--muted);
}

.pagination a:hover {
  background: var(--surface-elevated);
  color: var(--ink);
}

.pagination .is-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

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

.login {
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login__box {
  width: 100%;
  max-width: 380px;
}

.login__head {
  margin-bottom: 28px;
  text-align: center;
}

.login__head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.login__card {
  border-radius: var(--radius-card);
  background: #fff;
  padding: 24px;
  box-shadow: var(--shadow-panel);
}

/* ---------- Ошибка формы ---------- */

.form-error {
  margin: 14px 0 0;
  border-radius: var(--radius-strip);
  background: var(--danger-soft);
  padding: 11px 14px;
  color: var(--danger);
  text-align: center;
}

.login__remember {
  margin-bottom: 20px;
}

/* ---------- Вкладки ---------- */

.tabs {
  display: flex;
  gap: 4px;
  margin: 0 -16px 20px;
  overflow-x: auto;
  padding: 0 16px 2px;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__item {
  /* ⚠️ Вкладки теперь <button>: у него своя рамка и фон от браузера —
     без сброса неактивные вкладки обведены серым, как поля ввода */
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-strip);
  padding: 10px 14px;
  color: var(--muted);
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.tabs__item:hover {
  background: var(--surface-elevated);
  color: var(--ink);
}

.tabs__item.is-active {
  background: var(--ink);
  color: #fff;
  font-weight: 500;
}

.tabs__count {
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  padding: 1px 7px;
  color: var(--muted);
  font-size: 12px;
}

.tabs__item.is-active .tabs__count {
  background: rgb(255 255 255 / 0.2);
  color: #fff;
}

/* ---------- Плитки статистики ---------- */

.stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ⚠️ Отступ снизу — только когда дальше НЕ блок, который сам его добавит:
   иначе между плитками и следующей карточкой выйдет 32px вместо 16. */
.stats:last-child {
  margin-bottom: 0;
}

.stat {
  border-radius: var(--radius-card);
  background: #fff;
  padding: 18px 20px;
  box-shadow: var(--shadow-panel);
}

.stat--warn {
  background: linear-gradient(#fff, var(--warning-soft));
}

.stat__label {
  color: var(--icon-muted);
  font-size: 13px;
}

.stat__value {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.15;
}

.stat__unit {
  color: var(--icon-muted);
  font-size: 15px;
  font-weight: 500;
}

.stat__hint {
  margin-top: 4px;
  color: var(--icon-muted);
  font-size: 12px;
}

.stat__hint.is-up {
  color: var(--success);
}

.stat__hint.is-down {
  color: var(--danger);
}

.text-warn {
  color: var(--warning);
}

/* ---------- Шапка карточки ---------- */

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

.card__head .card__title {
  margin: 0;
}

.props--rows div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.props--rows div + div {
  margin-top: 10px;
}

.props--rows div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.props--rows dd {
  margin: 0;
  text-align: right;
}

.page__meta {
  margin-left: 10px;
  color: var(--muted);
}

/*
 * Колонка действий — последняя в строке, прижата вправо.
 * Несколько кнопок выстраиваются в ряд: у историй рядом с «Изменить»
 * стоит «Удалить», а форма — блочный элемент и без flex падала вниз.
 */
/*
 * Числовая колонка таблицы.
 *
 * ⚠️ Числа выравниваем ПО ПРАВОМУ КРАЮ: так разряды встают друг под другом
 * и суммы можно сравнить взглядом, не вчитываясь. При левом выравнивании
 * «1 200,00» и «980,50» начинаются с одной позиции, и меньшее число
 * выглядит длиннее большего.
 *
 * ⚠️ tabular-nums: в пропорциональном шрифте цифры разной ширины, и
 * столбик всё равно пляшет. Табличные цифры дают одинаковую ширину.
 */
.ta-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table__actions {
  text-align: right;
  white-space: nowrap;
}

.table__actions > * {
  vertical-align: middle;
}

/* Два и более действия — в ряд, а не столбиком */
.table__actions--row,
.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 767px) {
  .table__actions {
    text-align: left;
  }

  /* На телефоне строка — карточка, действия читаются слева */
  .table__actions--row,
  .row-actions {
    justify-content: flex-start;
  }

  .empty .btn {
    margin-top: 12px;
  }
}

.form-actions {
  display: flex;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

@media (max-width: 520px) {
  .form-actions {
    flex-direction: column-reverse;
  }

  .form-actions .btn {
    width: 100%;
  }
}

/* ---------- Заказы поставок ---------- */

/* Компактные поля прямо в таблице состава заказа */
.input--sm {
  height: 38px;
  max-width: 110px;
  padding: 0 10px;
}

/*
 * Сетка формы: поля в ряд, кнопка на всю ширину под ними.
 *
 * ⚠️ Класса НЕ БЫЛО В CSS, хотя разметка на него ссылалась — форма условий
 * по позициям рисовалась без сетки: поля растягивались на всю ширину
 * страницы и уезжали за правый край.
 *
 * auto-fit с minmax: на широком экране четыре поля встают в ряд, на узком
 * переносятся сами — без отдельного медиазапроса.
 */
.form-grid {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}

/* ⚠️ min-width: 0 обязателен: grid-ячейка не уже содержимого, и длинное
   название материала в селекте распирало бы колонку наружу. */
.form-grid > * {
  min-width: 0;
  margin-bottom: 0;
}

/* Кнопка — отдельной строкой во всю ширину: действие завершает форму */
.form-grid__actions {
  grid-column: 1 / -1;
}

.add-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .add-row {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* ⚠️ min-width: 0 обязателен: grid-ячейка по умолчанию не уже своего
   содержимого, и длинное название материала распирало бы колонку наружу. */
.add-row > * {
  min-width: 0;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 520px) {
  .actions-row,
  .actions-row form {
    width: 100%;
  }

  .actions-row .btn {
    width: 100%;
  }

  .input--sm {
    max-width: 100%;
  }
}

/* Плитка-ссылка на дашборде заказов */
a.stat {
  display: block;
  transition: box-shadow 0.15s;
}

a.stat:hover {
  box-shadow: 0 6px 26px -6px #0000001f;
}

/* ---------- Отчёты ---------- */

/* Простой столбчатый график: без библиотек, на flex */
.chart {
  display: flex;
  align-items: flex-end;
  /* 8px вместо 3: при шести столбиках на всю ширину зазор в 3px не читался,
     полосы выглядели одним слипшимся блоком */
  gap: 8px;
  height: 180px;
  margin-top: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/*
 * ⚠️ ПОДПИСЬ ВЫНЕСЕНА ИЗ ПОТОКА, место под неё держит padding-bottom.
 *
 * Раньше подпись была обычным блоком внутри колонки, а столбик получал
 * height в процентах ОТ ВСЕЙ колонки — вместе с подписью. Самый высокий
 * месяц (100%) не помещался и обрезался верхним краем карточки.
 *
 * С padding-bottom проценты считаются от content-box, то есть от высоты
 * без подписи, и столбик встаёт целиком.
 */
.chart__col {
  position: relative;
  display: flex;
  min-width: 22px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding-bottom: 22px;
}

.chart__bar {
  width: 100%;
  /* ⚠️ Ограничение ширины: на шести месяцах столбик растягивался до 200px и
     график читался как заливка, а не как сравнение величин */
  max-width: 64px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  transition: opacity 0.15s;
}

.chart__bar:hover {
  opacity: 0.75;
}

.chart__bar.is-weekend {
  background: #ffa8c2;
}

.chart__label {
  position: absolute;
  bottom: 0;
  margin-top: 6px;
  color: var(--icon-muted);
  /* ⚠️ Не ниже 12px: подписи дат на графике читают бегло, и 10px заставляют
     щуриться. Правило доступности, поймано аудитом. */
  font-size: 12px;
  white-space: nowrap;
}

/* Полоска заполняемости */
.bar {
  overflow: hidden;
  width: 100px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
}

.bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--success);
}

.bar__fill.is-low {
  background: var(--warning);
}

@media (max-width: 767px) {
  .chart {
    height: 140px;
  }

  .chart__col {
    min-width: 16px;
  }

  .chart__label {
    display: none;
  }

  .bar {
    width: 100%;
    max-width: 160px;
  }
}

/* ── Свой выпадающий список вместо нативного ──────────────────────────
   Нативный <select> рисует ОС: чужая подсветка, шрифт и отступы —
   в стиль админки его не привести. Разметку строит public/js/select.js,
   исходный <select> остаётся в форме и хранит значение. */

.sel {
  position: relative;
}

/* Нативный список прячем, но оставляем в DOM: он и есть значение формы */
.sel__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.sel__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-strip);
  background: var(--field);
  padding: 0 14px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.sel__button:hover:not(:disabled) {
  background: var(--surface-elevated);
}

.sel__button:focus-visible {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}

.sel__button[aria-expanded='true'] {
  border-color: var(--accent);
  background: #fff;
}

.sel__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sel__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sel__label--empty {
  color: var(--icon-faint);
}

.sel__caret {
  display: flex;
  flex-shrink: 0;
  color: var(--icon-faint);
  transition: transform 0.15s;
}

.sel__button[aria-expanded='true'] .sel__caret {
  transform: rotate(180deg);
}

.sel__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow: hidden;
  border-radius: var(--radius-box);
  background: #fff;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
  animation: sel-in 0.14s ease-out;
}

@keyframes sel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.sel__search {
  border-bottom: 1px solid var(--line);
  padding: 8px;
}

.sel__search input {
  width: 100%;
  height: 38px;
  border: 0;
  border-radius: var(--radius-strip);
  background: var(--field);
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
}

.sel__search input:focus {
  background: var(--surface);
  outline: none;
}

.sel__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 260px;
  padding: 4px 0;
}

.sel__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  border: 0;
  background: none;
  padding: 8px 14px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sel__option[hidden] {
  display: none;
}

.sel__option--cursor {
  background: var(--surface);
}

.sel__option--selected {
  color: var(--accent);
  font-weight: 500;
}

.sel__option-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sel__check {
  flex-shrink: 0;
}

.sel__empty {
  margin: 0;
  padding: 22px 14px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.sel__backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(30 30 30 / 0.4);
  animation: sel-fade 0.22s ease-out;
}

/* На телефоне — шторка снизу: попадать в мелкие строки неудобно */
.sel__panel--sheet {
  position: fixed;
  z-index: 71;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  animation: sel-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.sel__panel--sheet .sel__list {
  max-height: 52vh;
}

.sel__panel--sheet .sel__option {
  min-height: 52px;
  padding-inline: 16px;
  font-size: 15px;
}

.sel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 4px 16px;
  font-size: 15px;
  font-weight: 600;
}

.sel__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.sel-locked {
  overflow: hidden;
}

@keyframes sel-up {
  from {
    transform: translateY(100%);
  }
}

@keyframes sel-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sel__panel,
  .sel__backdrop {
    animation: none;
  }
}

/* Пустой вариант — подсказка, а не выбор */
.sel__option--placeholder {
  color: var(--icon-faint);
}

/* ── Свой выбор даты вместо нативного input[type=date] ────────────────
   Нативное поле рисует браузер: свой вид, своя иконка, свой календарь.
   Разметку строит public/js/datepicker.js, значение хранит исходный
   input (скрытый), формат YYYY-MM-DD — сервер ничего не замечает. */

.dp {
  position: relative;
}

.dp__native {
  display: none;
}

.dp__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-strip);
  background: var(--field);
  padding: 0 14px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.dp__button:hover:not(:disabled) {
  background: var(--surface-elevated);
}

.dp__button:focus-visible,
.dp__button[aria-expanded='true'] {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}

.dp__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp__label--empty {
  color: var(--icon-faint);
}

.dp__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--icon-faint);
}

.dp__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
  animation: sel-in 0.14s ease-out;
}

.dp__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
}

.dp__month {
  font-size: 15px;
  font-weight: 600;
}

.dp__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.dp__arrow:hover {
  background: var(--surface);
}

.dp__weekdays,
.dp__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 8px;
}

.dp__weekdays span {
  padding-bottom: 4px;
  color: var(--icon-faint);
  font-size: 12px;
  text-align: center;
}

.dp__grid {
  padding-bottom: 8px;
  justify-items: center;
}

.dp__day {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.12s;
}

.dp__day:hover:not(:disabled) {
  background: var(--surface);
}

.dp__day--weekend {
  color: var(--muted);
}

.dp__day--today {
  color: var(--accent);
  font-weight: 600;
}

.dp__day--selected,
.dp__day--selected:hover {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.dp__day:disabled {
  color: var(--line-strong);
  cursor: default;
}

.dp__shortcuts {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
}

.dp__shortcuts button {
  flex: 1;
  height: 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.dp__shortcuts button:hover {
  background: var(--surface);
}

/* На телефоне — шторка снизу с крупными клетками */
.dp__panel--sheet {
  position: fixed;
  z-index: 71;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  animation: sel-up 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.dp__panel--sheet .dp__day {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.dp__panel--sheet .dp__grid {
  row-gap: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .dp__panel {
    animation: none;
  }
}

/* ==========================================================================
   Кнопки под формой

   ⚠️ Класс использовался в четырёх формах, но в стилях его НЕ БЫЛО: блок
   получал нулевые отступы и кнопка «Сохранить» липла к нижнему краю карточки.
   ========================================================================== */
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* На телефоне главное действие тянется на всю ширину — попасть пальцем проще */
@media (max-width: 639px) {
  .form__actions .btn {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Переключатель языка в форме

   Перевод — не отдельная страница, а тот же документ на другом языке: поля
   лежат в одной форме и сохраняются одной кнопкой. Вкладки только показывают
   нужную пару полей, скрытые остаются в DOM и уходят на сервер как обычно.
   ========================================================================== */
.lang-switch {
  display: inline-flex;
  gap: 4px;
  border-radius: var(--radius-strip);
  background: var(--field);
  padding: 4px;
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  padding: 8px 14px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.lang-switch__item.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}

/* Точка — «перевод не заполнен». Видно до того, как откроешь вкладку */
.lang-switch__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.lang-pane[hidden] {
  display: none;
}

/* ==========================================================================
   Редактор текста

   Своя панель над contenteditable, без внешних библиотек: страницы — это
   политика и оферта, там нужны заголовки, списки, ссылки и жирный текст.
   Сырой HTML в textarea редактирует разработчик, а не юрист.
   ========================================================================== */
.editor {
  border: 1px solid var(--line);
  border-radius: var(--radius-strip);
  background: #fff;
  overflow: hidden;
}

.editor:focus-within {
  border-color: var(--accent);
}

.editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  background: var(--field);
  padding: 6px;
}

.editor__btn {
  display: inline-flex;
  height: 32px;
  min-width: 32px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  padding: 0 7px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.editor__btn:hover {
  background: #fff;
  color: var(--ink);
}

.editor__btn.is-active {
  background: #fff;
  color: var(--accent);
}

.editor__sep {
  width: 1px;
  margin: 4px 4px;
  background: var(--line-strong);
}

.editor__area {
  min-height: 320px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 14px 16px;
  line-height: 1.6;
  outline: none;
}

/* Пустой редактор показывает подсказку — иначе белое поле без объяснения */
.editor__area:empty::before {
  content: attr(data-placeholder);
  color: var(--icon-faint);
}

.editor__area > :first-child {
  margin-top: 0;
}

.editor__area > :last-child {
  margin-bottom: 0;
}

.editor__area h2 {
  margin: 20px 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.editor__area h3 {
  margin: 16px 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.editor__area p {
  margin: 0 0 10px;
}

.editor__area ul,
.editor__area ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.editor__area a {
  color: var(--accent);
  text-decoration: underline;
}

/* Режим правки HTML: тот же блок, но моноширинным — для разработчика */
.editor__source {
  display: block;
  width: 100%;
  min-height: 320px;
  border: 0;
  background: #fff;
  padding: 14px 16px;
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  outline: none;
  resize: vertical;
}

/* ==========================================================================
   Строки состава МК: тарифы и материалы

   Правятся прямо в карточке — форма из нескольких полей в ряд.
   ========================================================================== */
.rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.row-edit {
  display: flex;
  gap: 8px;
}

/* Название тянется, числа остаются узкими: иначе поле цены занимает
   половину строки и читается как главное */
.row-edit > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.input--num {
  width: 110px;
  flex: 0 0 auto;
}

@media (max-width: 639px) {
  .row-edit {
    flex-wrap: wrap;
  }

  .input--num {
    width: calc(50% - 4px);
  }
}

/* ==========================================================================
   Галерея мастер-класса
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.gallery__item {
  border: 2px solid transparent;
  border-radius: var(--radius-strip);
  background: var(--field);
  overflow: hidden;
}

/* Обложку видно сразу: она попадёт на витрину */
.gallery__item.is-main {
  border-color: var(--accent);
}

.gallery__item img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.gallery__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px 8px;
}

/* Правка справочника прямо в строке таблицы: отдельная страница ради двух
   полей заставляла бы уходить со списка и терять место */
.row-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.input--sm {
  height: 36px;
  max-width: 220px;
  padding: 0 10px;
  font-size: 13px;
}

@media (max-width: 767px) {
  .row-inline {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/*
 * Цены мастер-класса у партнёров.
 *
 * ⚠️ Валюта подписана у КАЖДОГО партнёра: без неё «130» и «4500» в одном
 * списке выглядят как ошибка ввода, хотя это разные деньги.
 */
.price-group {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.price-group:last-of-type {
    border-bottom: 0;
}

.price-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
}

.price-group__currency {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.price-row__label {
    flex: 1;
    color: var(--muted);
    font-size: 14px;
}

/* Поле уже строки: цена — короткое число, растянутое поле читается хуже */
.price-row .input--num {
    width: 140px;
}

@media (max-width: 640px) {
    .price-row {
        gap: 8px;
    }

    .price-row .input--num {
        width: 110px;
    }
}

/*
 * Панели вкладок карточки мастер-класса.
 *
 * ⚠️ Скрываем через display:none, а не visibility: скрытая панель не должна
 * занимать место и ловить фокус — иначе Tab уводит в невидимые поля.
 */
.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: block;
}

/* ⚠️ На телефоне вкладка — цель для пальца: ниже 44px в неё промахиваются */
@media (max-width: 640px) {
    .tabs__item {
        min-height: 44px;
    }
}

/*
 * Флажок в стиле проекта.
 *
 * ⚠️ Системный чекбокс рисует браузер — он синий и в каждой ОС свой, рядом с
 * акцентом проекта выглядит чужим элементом. Та же причина, по которой в
 * проекте не используются нативные <select> и <input type="date">.
 */
.checkbox input[type='checkbox'],
.checkbox--plain input[type='checkbox'] {
    appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.checkbox input[type='checkbox']:hover,
.checkbox--plain input[type='checkbox']:hover {
    border-color: var(--accent);
}

.checkbox input[type='checkbox']:checked,
.checkbox--plain input[type='checkbox']:checked {
    border-color: var(--accent);
    background: var(--accent)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E")
        center / 13px no-repeat;
}

/* Клавиатура: без видимого фокуса по таблице прав не пройти */
.checkbox input[type='checkbox']:focus-visible,
.checkbox--plain input[type='checkbox']:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* В таблице флажок стоит один, без подписи рядом */
.checkbox--plain {
    display: inline-flex;
    justify-content: center;
}

/*
 * Базовые правила интерактивности — те же, что в кабинете партнёра.
 *
 * ⚠️ Проверено аудитом по чек-листу UI/UX на iPhone: до 192 кликабельных
 * элементов на странице выходили ниже 44px. В такую цель промахиваются:
 * человек жмёт второй раз, попадает в соседнюю строку или считает, что
 * интерфейс не отвечает. В админке это правки справочников и статусы
 * заказов — цена промаха выше, чем кажется.
 */
@media (max-width: 640px) and (pointer: coarse) {
    button,
    a[href],
    [role='button'] {
        position: relative;
    }

    button::after,
    a[href]::after,
    [role='button']::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 44px;
        min-height: 44px;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        pointer-events: auto;
    }

    /*
     * ⚠️ Гасим ТОЛЬКО там, где ссылка оборачивает содержимое: псевдоэлемент
     * перекрыл бы вложенные кнопки и съел их нажатия.
     *
     * Ссылки в таблицах НЕ исключаем: правка справочника и переход в карточку
     * идут именно через них, а высота строки 19px — гарантированный промах.
     * Первая попытка исключала `.table a` целиком, и 38 целей остались
     * мелкими — поймано повторным аудитом.
     */
    .card::after,
    a[href] > *::after {
        content: none;
    }
}

/*
 * ⚠️ Видимый фокус: без него по админке нельзя пройти с клавиатуры, а
 * заполнение справочников с клавиатуры — обычный способ работы.
 * :focus-visible не мешает мыши — кольцо видно только при Tab.
 */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/*
 * Переписка с клиентом.
 *
 * ⚠️ Свои и чужие сообщения по разным сторонам: в сплошном списке не видно,
 * кто что писал, и оператор отвечает на собственный текст.
 */
.chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.chat__row {
    display: flex;
    justify-content: flex-start;
}

.chat__row--own {
    justify-content: flex-end;
}

.chat__bubble {
    max-width: 70%;
    border-radius: 14px;
    background: var(--surface);
    padding: 10px 14px;
}

.chat__bubble--own {
    background: var(--accent-soft, #ffe8ef);
}

.chat__text {
    white-space: pre-line;
    font-size: 14px;
}

.chat__time {
    margin-top: 4px;
    color: var(--icon-muted);
    font-size: 12px;
}

@media (max-width: 640px) {
    .chat__bubble {
        max-width: 88%;
    }
}

/*
 * Плотная шапка карточки.
 *
 * ⚠️ Было ЧЕТЫРЕ яруса: крошка, название, статус, вкладки — 88px пустоты до
 * первой полезной строки. На ноутбуке это треть экрана, и таблица начиналась
 * за сгибом: человек скроллил, чтобы увидеть то, за чем пришёл.
 */
.page__head--tight {
  align-items: center;
  margin-bottom: 14px;
}

.page__head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Стрелка «назад» — в строке заголовка, без своего яруса */
.back-link--inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ⚠️ 40px: стрелка осталась единственной кнопкой возврата, и мелкий
     хитбокс сделал бы уход со страницы лотереей на телефоне. */
  width: 40px;
  height: 40px;
  margin: 0 -8px 0 0;
  padding: 0;
  border-radius: 999px;
}

.back-link--inline:hover {
  background: var(--surface);
}

.page__head--tight + .tabs {
  margin-bottom: 16px;
}

/* Несколько кнопок в шапке страницы */
.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Простая строка «слева название — справа пояснение» */
.row-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

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

/* Список флажков в форме (какие студии обслуживает склад) */
.checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 4px;
}

/* Поле, которое нельзя менять — показываем значение, а не отключённый input:
   серый input выглядит как «сломалось», а текст читается как факт */
.field__static {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0 2px;
  font-weight: 500;
}

/*
 * Полоса пути заказа.
 *
 * ⚠️ Без неё непонятно, где заказ сейчас и что будет дальше: человек видел
 * набор кнопок и не понимал, в каком они порядке — а порядок жёсткий.
 */
.flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.flow__step {
  border-radius: var(--radius-tag);
  background: var(--surface);
  padding: 6px 12px;
  color: var(--icon-muted);
  font-size: 13px;
}

/* Пройденные шаги гасим, но не прячем: по ним видно, что уже сделано */
.flow__step--done {
  background: #eaf7ef;
  color: #1c7a43;
}

.flow__step--now {
  background: var(--ink);
  color: #fff;
  font-weight: 500;
}

.card__hint {
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 14px;
}

/* Поле с единицей измерения справа внутри */
.input-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.input-unit .input {
  padding-right: 46px;
}

.input-unit__label {
  position: absolute;
  right: 12px;
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}

/* Предупреждение под полем — не ошибка, но требует внимания */
.field__hint--warn {
  color: var(--warning);
}

/*
 * Матрица доступа: строки — мастер-классы, столбцы — партнёры.
 *
 * ⚠️ Раньше доступ настраивался внутри каждого МК — чтобы открыть партнёру
 * каталог, надо было обойти все 18 карточек.
 */
.table--matrix th.matrix__head {
  min-width: 108px;
  text-align: center;
  vertical-align: bottom;
}

.matrix__partner {
  display: block;
  color: var(--ink);
  font-weight: 500;
}

.matrix__all {
  margin-top: 4px;
  border: 0;
  border-radius: var(--radius-tag);
  background: var(--surface);
  padding: 2px 8px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.matrix__all:hover {
  background: var(--field);
  color: var(--accent);
}

.matrix__cell {
  text-align: center;
}

/* ⚠️ Область нажатия на всю ячейку: попасть в флажок 20px мышью тяжело,
   а ошибка здесь — закрытый доступ у партнёра */
.matrix__cell .checkbox {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 6px 0;
}

/* Подпись только для чтения с экрана: флажок в матрице без неё безымянный */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Обучение: программа курса и материалы урока ---------- */

/*
 * Программа курса: уроки с их материалами одним списком.
 *
 * ⚠️ Нумерация СОБСТВЕННАЯ (.program__number), а не маркерами ol: у списка
 * маркер стоит по левому краю строки и «отрывается» от заголовка, когда урок
 * переносится на вторую строку.
 */
.program {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.program__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.program__item:last-child {
  border-bottom: 0;
}

.program__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.program__number {
  min-width: 24px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.program__title {
  font-weight: 600;
}

/* Материалы урока чипами: видно состав, не открывая урок */
.program__blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-left: 34px; /* по левому краю заголовка, а не номера */
}

.block-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-tag);
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
}

.block-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Список материалов на карточке урока */
.blocks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.blocks__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.blocks__item:last-child {
  border-bottom: 0;
}

.blocks__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-chip);
  background: var(--surface-elevated);
  color: var(--icon-muted);
}

.blocks__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.blocks__title {
  font-weight: 600;
}

.blocks__meta {
  font-size: 13px;
}

.blocks__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

/* Кнопки «добавить материал» по типам: видео, текст, файл, тест */
.blocks__add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

/* ⚠️ На телефоне действия уезжают под текст: в одну строку с названием они
   сжимают его до пары слов, а тапы становятся меньше 44px. */
@media (max-width: 640px) {
  .blocks__item {
    flex-wrap: wrap;
  }

  .blocks__actions {
    width: 100%;
    padding-left: 44px;
  }

  .program__blocks {
    padding-left: 0;
  }
}

/*
 * Поле перевода рядом с исходником.
 *
 * ⚠️ Приглушено НАМЕРЕННО: перевод стоит вторым полем в той же строке, и
 * одинаковый вид двух полей заставляет вчитываться, где русский, а где
 * английский. Фон подсказывает это без подписи — подписи на каждый вариант
 * ответа удвоили бы высоту формы.
 */
.input--muted {
  background: var(--surface-muted);
  color: var(--muted-strong, #555);
}

.input--muted::placeholder {
  color: var(--icon-faint);
}

/* Вариант ответа: радиокнопка, два поля и «×». Перевод чуть уже исходника —
   он короче и реже заполняется. */
.answer .input--muted {
  flex: 0 1 38%;
}

/* ---------- Перетаскивание порядка ---------- */

/*
 * Ручка захвата.
 *
 * ⚠️ Тянем ТОЛЬКО за неё, а не за всю строку: иначе нельзя ни выделить текст,
 * ни попасть по ссылке внутри строки — каждый клик превращался бы в попытку
 * перетащить.
 */
.sortable__grip {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: -4px;
  border-radius: var(--radius-chip);
  color: var(--icon-faint);
  cursor: grab;
}

.sortable__grip:hover {
  background: var(--surface-elevated);
  color: var(--muted);
}

.sortable__grip:active {
  cursor: grabbing;
}

/* Строка под курсором: приподнята и полупрозрачна — видно, что именно тянем */
.sortable__item.is-dragging {
  opacity: 0.5;
  background: var(--surface-muted);
  border-radius: var(--radius-chip);
}

/* Пока запрос в пути — список неактивен: повторное перетаскивание отправило бы
   второй запрос с промежуточным порядком */
[data-sortable].is-saving {
  pointer-events: none;
  opacity: 0.7;
}

.sortable__note {
  padding: 6px 0;
  color: var(--success);
  font-size: 13px;
}

.sortable__note--error {
  color: var(--danger);
}

/* ⚠️ На телефоне ручку ПРЯЧЕМ: HTML5 drag-and-drop не работает на тач-экранах
   вовсе, и видимая, но бесполезная ручка — обещание, которого интерфейс не
   выполняет. Порядок правится с компьютера. */
@media (max-width: 640px) {
  .sortable__grip {
    display: none;
  }
}

/*
 * МАТЕРИАЛЫ КУРСА НА ТЕЛЕФОНЕ.
 *
 * ⚠️ Чипы становятся СТРОКАМИ, а не плитками вразброс.
 *
 * На 390px название вроде «Памятка нового партнёра · не обязателен» не влезало
 * в таблетку: текст ломался на две строки, пометка отъезжала к правому краю, и
 * чип раздувался с дырой посередине.
 */
@media (max-width: 640px) {
  .program__blocks {
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
  }

  .block-chip {
    justify-content: flex-start;
  }

}

/*
 * Кнопки «выше / ниже».
 *
 * ⚠️ Размер контейнера ФИКСИРОВАН: на краях списка одна кнопка скрыта, и без
 * жёсткой ширины соседние элементы прыгали бы по горизонтали от строки к
 * строке.
 */
.move {
  display: inline-flex;
  flex: none;
  gap: 2px;
  min-width: 56px;
  justify-content: flex-end;
}

.move__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--icon-faint);
  cursor: pointer;
}

.move__btn:hover {
  background: var(--surface-elevated);
  color: var(--ink);
}

/* ⚠️ Видимый фокус обязателен: этими кнопками пользуются именно с клавиатуры,
   и без обводки человек не понимает, где находится */
.move__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Кнопка «Открыть» и стрелки порядка — одной группой у правого края */
.program__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (max-width: 640px) {
  .program__open {
    margin-left: 0;
  }
}

/* ---------- Опасная зона: удаление ---------- */

/*
 * ⚠️ Необратимое действие — В КАРТОЧКЕ С ОБЪЯСНЕНИЕМ, а не голой кнопкой на
 * фоне страницы. Раньше «Удалить урок» висела в пустоте под карточкой и
 * читалась как остаток вёрстки — рядом с ней не было ни заголовка, ни
 * предупреждения о последствиях.
 */
.card--danger {
  border: 1px solid var(--danger-soft);
}

.danger-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.danger-zone__title {
  font-weight: 600;
}

.danger-zone__note {
  margin: 4px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* На телефоне кнопка уходит под текст и тянется на всю ширину */
@media (max-width: 640px) {
  .danger-zone {
    flex-direction: column;
    align-items: stretch;
  }

  .danger-zone form,
  .danger-zone .btn {
    width: 100%;
  }
}

/* ---------- Вложение в списке материалов ---------- */

/*
 * ⚠️ ФАЙЛ ПОСЛЕ МАТЕРИАЛА — ЕГО ВЛОЖЕНИЕ, и это должно быть видно.
 *
 * В кабинете сервер склеивает такой файл с предыдущим блоком и показывает
 * кнопкой скачивания ПОД лекцией. Админка же рисовала его равной строкой:
 * человек не понимал, почему в кабинете шагов меньше, чем материалов здесь.
 *
 * Отступ и полоска слева показывают подчинение, не пряча саму строку —
 * порядок всё ещё нужно менять и файл нужно открывать.
 */
.blocks__item--attached {
  margin-left: 34px;
  padding-left: 14px;
  border-left: 2px solid var(--line-strong);
}

@media (max-width: 640px) {
  .blocks__item--attached {
    margin-left: 16px;
    padding-left: 10px;
  }
}

/*
 * ⚠️ КНОПКИ В ШАПКЕ КАРТОЧКИ — С РАМКОЙ.
 *
 * У .btn--ghost заливка --surface (#f7f7f7), а фон страницы — тот же самый.
 * На белой карточке кнопка видна, а в шапке над фоном страницы две кнопки
 * подряд сливались в одно серое пятно: «Изменить урок» и «Дублировать»
 * читались как одна широкая полоса.
 *
 * Рамка отделяет их друг от друга и от фона, не делая тяжёлыми.
 */
.page__actions .btn--ghost {
  border: 1px solid var(--line-strong);
  background: #fff;
}

.page__actions .btn--ghost:hover {
  border-color: var(--accent);
}

/*
 * Кнопка необратимого действия.
 *
 * ⚠️ Класс .btn--danger использовался в разметке, но СТИЛЯ НЕ БЫЛО — кнопка
 * «Удалить урок» выглядела обычной серой, ничем не отличаясь от «Изменить».
 *
 * ⚠️ НЕ СПЛОШНАЯ ЗАЛИВКА: красная кнопка на виду притягивает случайный клик и
 * делает удаление самым заметным действием на странице. Здесь оно — крайняя
 * мера, поэтому спокойный контур, который краснеет при наведении.
 */
.btn--danger {
  border: 1px solid var(--danger-soft);
  background: #fff;
  color: var(--danger);
}

.btn--danger:hover {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

/* ---------- Текущее изображение рядом с полем загрузки ---------- */

/*
 * ⚠️ БЫЛО ТОЛЬКО СЛОВО «фото» в подсказке: человек не видел, какая картинка
 * загружена сейчас, и не понимал, что именно заменяет. Показываем сам файл.
 */
.current-file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: #fff;
}

.current-file__thumb {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--radius-chip);
  object-fit: cover;
  background: var(--surface-elevated);
}

.current-file__text {
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Обложка в ячейке таблицы ---------- */

/*
 * ⚠️ Картинка и текст ОДНОЙ ГРУППОЙ: без обёртки название прыгало вверх, а
 * подпись категории уезжала под картинку.
 */
.cell-media {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cell-media__body {
  min-width: 0;
}

/*
 * Заглушка вместо фото.
 *
 * ⚠️ Занимает столько же места, сколько картинка: без неё строки без фото
 * были ниже остальных, и таблица «дышала» по высоте.
 */
.thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-strong);
  background: var(--surface-muted);
  color: var(--icon-faint);
}

/*
 * Заголовки колонок над строками правки.
 *
 * ⚠️ Нужны, потому что placeholder ИСЧЕЗАЕТ при вводе: у заполненных тарифов
 * стояло три поля с числами без единой подписи, и «где цена, а где
 * себестоимость» приходилось угадывать по порядку.
 *
 * Ширины наследуются от .row-edit — заголовок и поля стоят одной сеткой.
 */
.row-edit--head {
  margin-bottom: 6px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
}

.row-edit--head > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.row-edit--head > :not(:first-child) {
  flex: 0 0 110px;
}

/* ⚠️ На телефоне поля правки встают в столбик, и общая шапка теряет смысл —
   там подписью служит placeholder и aria-label */
@media (max-width: 640px) {
  .row-edit--head {
    display: none;
  }
}

/* ---------- Поле загрузки файла ---------- */

/*
 * Своя кнопка вместо системной.
 *
 * ⚠️ ЗАЧЕМ: текст «Выберите файл» и «Файл не выбран» рисует БРАУЗЕР по языку
 * ОС — стилями их не изменить. У человека с английской системой посреди
 * русской админки было «Choose File · No file chosen». Настоящий input уводим
 * за пределы видимости, подпись рисуем сами (js/file-input.js).
 */
.file-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  /* Пунктир — узнаваемый знак зоны загрузки: сплошная рамка читалась как
     обычное текстовое поле, и заказчик не понимал, куда нажимать */
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-box);
  background: var(--surface-muted);
  cursor: pointer;
}

.file-field:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/*
 * ⚠️ input НЕ display:none — скрытое поле нельзя сфокусировать с клавиатуры,
 * и загрузка стала бы недоступна без мыши. Растягиваем его на всю зону
 * прозрачным: клик по любому месту открывает выбор файла.
 */
.file-field__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-field__button {
  flex: none;
  padding: 7px 14px;
  border-radius: var(--radius-chip);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.file-field:hover .file-field__button {
  background: var(--accent);
}

/* Имя файла: пока не выбран — приглушено, после выбора читается как значение */
.file-field__name {
  min-width: 0;
  overflow: hidden;
  color: var(--icon-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-field__name.is-filled {
  color: var(--ink);
}

/* ⚠️ Видимый фокус обязателен: поле прозрачное, и без обводки человек,
   идущий по форме с клавиатуры, не понимает, где находится */
.file-field:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Матрица цен у партнёров ---------- */

/*
 * ⚠️ ТАБЛИЦА ВМЕСТО СПИСКА ГРУПП.
 *
 * Было: блок на каждого партнёра, внутри — строка на каждый тариф. При пяти
 * партнёрах и двух тарифах это десять строк подряд с повтором названий, и
 * сравнить цены двух городов можно было только прокруткой туда-сюда.
 *
 * Стало: партнёры — строки, тарифы — колонки. Разница между городами читается
 * по столбцу, вся матрица видна разом.
 */
.price-matrix {
  margin: 0 -4px;
  overflow-x: auto;
}

/* Колонка цены узкая: поле на 110px, остальное отдаём названию партнёра */
.price-matrix__col {
  width: 130px;
}

.price-matrix .input {
  width: 100%;
}

.table--compact td,
.table--compact th {
  padding-top: 8px;
  padding-bottom: 8px;
}

/*
 * ⚠️ На телефоне таблица превращается в карточки (общее правило проекта:
 * td[data-label]). Поле цены тянется на всю ширину — попасть пальцем в
 * 110-пиксельное поле у правого края тяжело.
 */
@media (max-width: 640px) {
  .price-matrix__col {
    width: auto;
  }
}

/*
 * Имя пользователя — на широком экране, где хватает места рядом с меню.
 */
@media (min-width: 1200px) {
  .user-btn__text {
    display: flex;
  }
}