/* Стили страниц входа, статусов и админки (этап C, задача 6). Подключается после app.css
   и пользуется его токенами; общие компоненты живут в app.css, у страниц — свои блоки. */

/* ---------- Вход, заявка и статусы ---------- */

/* Телефон и планшет: изображение мира полосой под шапкой (не выше 30% экрана), форма ниже.
   ПК: две колонки — конверт с изображением слева, форма справа. */
.auth { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }

/* Полоса во всю ширину под шапкой: отрицательные поля гасят отступы .page из app.css
   (padding-top: var(--space-5), по бокам var(--gutter)) — меняются вместе с ними. */
.auth-art {
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--gutter)) 0;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
/* Фон растра — тот же матовый #0b0b0b, поэтому contain не даёт видимых полей. */
.auth-art img {
  width: 100%; height: min(30vh, 16rem);
  object-fit: contain;
}

.auth-panel {
  display: flex; flex-direction: column; gap: var(--space-6);
  width: 100%; max-width: 32rem; min-width: 0;
  margin: 0 auto; padding-top: var(--space-6);
  container-type: inline-size; /* заголовок меряется по ширине колонки (cqi) */
}
/* Слова заголовков не рвутся: самое длинное — «рассмотрении», ≈9,14em в Unbounded 500.
   Кегль ограничен шириной колонки (100cqi / 9,6 — с запасом), поэтому слово влезает и на
   320px, и при 200% размере текста; первая строка — запас для браузеров без cqi. */
.auth-title {
  font-size: clamp(1.75rem, 1.5rem + 1.6vw, 2.75rem);
  font-size: min(clamp(1.75rem, 1.5rem + 1.6vw, 2.75rem), 100cqi / 9.6);
  line-height: 1.06; letter-spacing: -0.02em;
  overflow-wrap: normal; hyphens: manual;
}
.auth-title-lg { font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: 1; }
.auth-flash { margin-bottom: calc(-1 * var(--space-3)); }

/* Шаг входа: белый волосок сверху, как у «Моего дня». */
.auth-step {
  display: grid; gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--paper);
}
.auth-step-title {
  font-family: var(--font-text); font-size: var(--text-l); font-weight: 600; line-height: 1.3;
  letter-spacing: 0; text-transform: none;
  overflow-wrap: anywhere;
}
.auth-lead { color: var(--muted); max-width: 34rem; overflow-wrap: anywhere; }
.auth-step, .auth-form { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.auth-form { display: grid; gap: var(--space-5); margin-top: var(--space-3); }
.auth-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* При крупном тексте (200%) подпись кнопки переносится, а не распирает колонку. */
.auth-actions .btn, .adm-list .btn { min-width: 0; white-space: normal; text-align: center; }
@media (max-width: 639px) {
  /* Одна рука: главная кнопка во всю ширину, «Другая почта» рядом ниже. */
  .auth-actions .btn { flex: 1 1 auto; }
  .auth-actions .btn-primary { flex-basis: 100%; }
}

/* Код из письма: одно поле, шесть крупных цифр широким гротеском с разрядкой. */
.code-input {
  max-width: 18.5rem; min-height: 4rem;
  padding: 0 var(--space-4);
  font-family: var(--font-display); font-weight: 500; font-size: 2rem; line-height: 1;
  letter-spacing: 0.5em;
}
@media (pointer: coarse) {
  .code-input { min-height: 4rem; }
}

/* «Выйти» — внизу колонки; в шапке на этих страницах кнопка не дублируется. */
.auth-out { padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.auth-out .btn { margin-left: calc(-1 * var(--space-4)); }
body:has(.auth-out) .shell-bar > .shell-account { display: none; }

@media (min-width: 1024px) {
  /* Высота окна за вычетом шапки (--shell-h + волосок 1px) и отступов .page из app.css
     (сверху var(--space-5), снизу var(--space-8)) — меняются вместе с ними. */
  .auth {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-7);
    align-content: center; align-items: center;
    min-height: calc(100dvh - var(--shell-h) - 1px - var(--space-5) - var(--space-8));
  }
  /* Конверт: изображение в волосяной рамке, как пластинка в каталоге; поля растра уже обрезаны. */
  .auth-art { margin: 0; padding: var(--space-4); border: 1px solid var(--line); }
  .auth-art img { height: auto; }
  .auth-panel { margin: 0; padding: var(--space-6) 0; }
}

/* ---------- Админка ---------- */

#admin { display: flex; flex-direction: column; gap: var(--space-7); min-width: 0; }
#admin > .flash { margin-top: calc(-1 * var(--space-4)); }
.adm-head h1 { overflow-wrap: normal; hyphens: manual; }

.adm-sec { min-width: 0; }
.adm-sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--paper);
}
.adm-sec-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.adm-count { color: var(--muted); font-size: var(--text-s); white-space: nowrap; }
.adm-count .num { color: var(--paper); font-size: var(--text-m); letter-spacing: 0; }
.adm-note { margin-top: var(--space-3); color: var(--muted); font-size: var(--text-s); }

.adm-email { min-width: 0; overflow-wrap: anywhere; }
.adm-role { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted); font-size: var(--text-s); }
.adm-roles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.adm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.adm-acts form { display: flex; margin: 0; }
.adm-acts .muted { font-size: var(--text-s); }

/* Телефон и планшет: строка — карточка без рамки: имя, почта и дата, действия в ряд. */
.adm-item {
  display: grid; gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-soft);
}
.adm-main { display: grid; gap: var(--space-1); min-width: 0; }
.adm-name { font-size: var(--text-l); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
a.adm-name { text-decoration: none; }
a.adm-name:hover { text-decoration: underline; }
.adm-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.adm-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); color: var(--muted); font-size: var(--text-s); }
.adm-meta .num { font-size: var(--text-xs); letter-spacing: 0.02em; }
/* Зоны нажатия в списке — 44px при любом указателе. */
.adm-list .btn { --control-h: 2.75rem; }
.adm-list .adm-acts > form { flex: 1 1 0; }
.adm-list .adm-acts .btn { width: 100%; }
@media (min-width: 640px) {
  .adm-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-5); }
  .adm-list .adm-acts > form { flex: 0 0 auto; }
  .adm-list .adm-acts .btn { width: auto; }
}

/* Пусто: ровная линия-пульс и слово вместо пустой таблицы. */
.adm-empty { display: grid; gap: var(--space-3); padding-top: var(--space-3); }
/* Вектор: штрих 1px при любой ширине (non-scaling-stroke), не шире 30rem. */
.adm-empty-pulse { display: block; width: 100%; max-width: 30rem; height: 1.5rem; color: var(--paper); overflow: visible; }

/* ПК: таблицы с заголовками столбцов; списки скрыты. */
.adm-table-wrap { display: none; }
@media (min-width: 1024px) {
  .adm-list { display: none; }
  .adm-table-wrap { display: block; overflow-x: auto; }
}
/* Ширины столбцов общие для всех таблиц — столбцы разделов стоят по одной линии. */
.adm-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.adm-table thead th:nth-child(1) { width: 30%; }
.adm-table thead th:nth-child(2) { width: 30%; }
.adm-table thead th:nth-child(3) { width: 16%; }
/* Линии строк — на <tr>, а не на ячейках: при дробных ширинах столбцов линии ячеек
   стыкуются со швами разной яркости; линия строки идёт одним отрезком. */
.adm-table thead tr { border-bottom: 1px solid var(--line); }
.adm-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.adm-table thead th {
  padding: var(--space-4) var(--space-3) var(--space-2);
  border: 0;
  color: var(--muted); text-align: left; vertical-align: bottom;
  font-size: var(--text-xs); font-weight: 600; line-height: 1.3;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.adm-table tbody th, .adm-table td {
  padding: var(--space-3);
  border: 0;
  text-align: left; vertical-align: middle;
  font-size: var(--text-m);
}
.adm-table tbody th {
  color: var(--paper); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  overflow-wrap: anywhere;
}
.adm-table tbody th a { text-decoration: none; }
.adm-table tbody th a:hover { text-decoration: underline; }
.adm-table thead th:first-child, .adm-table tbody th { padding-left: 0; }
.adm-table thead th:last-child, .adm-table td:last-child { padding-right: 0; }
.adm-table td:last-child .adm-acts { justify-content: flex-end; flex-wrap: nowrap; }
.adm-table .adm-email { color: var(--muted); }
.adm-table .adm-date { color: var(--muted); font-size: var(--text-s); letter-spacing: 0.02em; white-space: nowrap; }
.adm-table tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
.adm-table tbody tr:hover { background: var(--ink-raised); }