/* BypassWL Hub - вход, регистрация, кабинет. Грузится после console.css.
   Отдельный файл, чтобы консоль осталась ровно такой, как в дизайне:
   ни одно правило отсюда на index.html не попадает. */

/* В дизайне класс .muted не описан, поэтому включаем его только здесь. */
.auth-page .muted {
  color: var(--muted);
}

.auth {
  padding: 2.5rem 0 3.5rem;
}

.auth__layout {
  display: grid;
  gap: 1rem;
}

/* Логин и регистрация - узкая колонка по центру, кабинет во всю ширину. */
.auth__layout--narrow {
  width: min(480px, calc(100% - 2rem));
}

.auth-head {
  text-align: center;
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.auth-head h1 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
}

.auth-head p {
  color: var(--muted);
  font-size: 0.95rem;
}

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-card);
  backdrop-filter: blur(10px);
}

.auth-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  min-height: var(--ctl-h-sm);
  margin-bottom: 1rem;
}

.auth-card__head h2 {
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Несколько кнопок в шапке карточки: на узком экране переносятся, но остаются
   справа от заголовка, а не растягиваются в столбец на всю ширину. */
.auth-card__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.auth-form {
  display: grid;
  gap: 0.9rem;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.auth-actions .btn {
  flex: 0 0 auto;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.auth-links a {
  color: var(--accent);
}

/* --- баннеры ------------------------------------------------------------- */

.auth-note {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(79, 140, 255, 0.12);
  color: #cfe0ff;
  font-size: 0.93rem;
  line-height: 1.45;
}

.auth-note--warn {
  border-color: rgba(255, 170, 80, 0.5);
  background: rgba(140, 70, 20, 0.28);
  color: #ffe2c4;
}

.auth-note--bad {
  border-color: rgba(232, 93, 93, 0.55);
  background: rgba(232, 93, 93, 0.14);
  color: #ffd4d4;
  white-space: pre-wrap;
  word-break: break-word;
}

.auth-note--ok {
  border-color: rgba(0, 229, 168, 0.45);
  background: rgba(0, 229, 168, 0.12);
  color: #b7f5e2;
}

/* Свой display у класса перебивает [hidden] из таблицы браузера, поэтому в
   дизайне такие правила пишут поштучно (.user-bar[hidden], .admin-only[hidden]).
   Здесь перечислены классы страниц входа, которые прячутся атрибутом. */
.auth-note[hidden],
.auth-form[hidden],
.auth-actions[hidden],
.auth-codes[hidden],
.auth-enroll[hidden],
.auth-page .btn[hidden] {
  display: none !important;
}

/* --- подсказки к паролю -------------------------------------------------- */

.auth-rules {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--muted);
}

.auth-rules li::before {
  content: "○ ";
  color: var(--muted);
}

.auth-rules li[data-ok="1"] {
  color: var(--accent);
}

.auth-rules li[data-ok="1"]::before {
  content: "● ";
  color: var(--accent);
}

/* --- 2FA ----------------------------------------------------------------- */

.auth-enroll {
  display: grid;
  gap: 1rem;
}

.auth-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: #ffffff;
}

.auth-qr svg {
  display: block;
  width: 200px;
  height: 200px;
}

.auth-qr--empty {
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  font-size: 0.9rem;
  min-height: 120px;
  text-align: center;
}

.auth-secret {
  display: grid;
  gap: 0.4rem;
}

.auth-secret code {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  word-break: break-all;
}

.auth-secret__uri {
  font-size: 0.82rem;
  letter-spacing: 0;
  color: var(--muted);
}

/* --- коды восстановления ------------------------------------------------- */

.auth-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.9rem 0;
  padding: 0;
  list-style: none;
}

.auth-codes li {
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--mono);
  font-size: 0.92rem;
  text-align: center;
  letter-spacing: 0.04em;
}

@media (max-width: 520px) {
  .auth-codes {
    grid-template-columns: 1fr;
  }
}

/* --- кабинет ------------------------------------------------------------- */

.acc-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .acc-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.acc-facts {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.acc-facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(120, 160, 220, 0.12);
  font-size: 0.93rem;
}

.acc-facts div:last-child {
  border-bottom: 0;
}

.acc-facts dt {
  color: var(--muted);
}

.acc-facts dd {
  margin: 0;
  text-align: right;
  word-break: break-word;
}

.acc-sessions {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.acc-session {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
}

.acc-session--current {
  border-color: rgba(0, 229, 168, 0.4);
  background: rgba(0, 229, 168, 0.08);
}

.acc-session__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.acc-session__ip {
  font-family: var(--mono);
  font-weight: 600;
}

.acc-session__ua {
  color: var(--muted);
  font-size: 0.84rem;
  word-break: break-word;
}

.acc-session__tag {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 229, 168, 0.15);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.acc-2fa-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(232, 93, 93, 0.16);
  color: #ffb4b4;
}

.acc-2fa-state--on {
  background: rgba(0, 229, 168, 0.15);
  color: var(--accent);
}

/* --- утилиты админки ------------------------------------------------------
   Раньше это были inline-стили в admin.html и admin-page.js: одни и те же
   ряды кнопок и поисковые строки описывались по-разному, и отступы в карточках
   не совпадали. Теперь всё через классы и общую шкалу из site.css. */

/* Ряд кнопок/селектов в шапке карточки. */
.card-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-tools);
}

/* Строка поиска или запроса: поле тянется, кнопка держит свою ширину. */
.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.filter-row .input {
  flex: 1 1 12rem;
  width: auto;
  min-width: 0;
}

/* Компактный контрол в шапке карточки - мелкая шкала, как у .btn--sm. */
.input--compact {
  width: auto;
  min-height: var(--ctl-h-sm);
  padding: 0.25rem 0.7rem;
  font-size: 0.88rem;
}

select.input--compact {
  padding-right: 2rem;
  background-position:
    calc(100% - 15px) calc(50% - 3px),
    calc(100% - 9px) calc(50% - 3px);
}

/* Пояснение под заголовком карточки. */
.card-note {
  margin: 0 0 0.8rem;
}

/* Страничная навигация под списком (в паре с .auth-actions). */
.pager {
  margin-top: 0.8rem;
}

/* Чекбокс с подписью в одну строку. */
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.check-inline input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--accent);
  cursor: inherit;
}

/* Таблицы логов, реестра адресов и кэша ASN: типографику задаёт таблица,
   ячейки только помечают роль. Раньше у каждого <td> был свой inline-стиль,
   и одинаковые колонки в разных таблицах разъезжались по размеру. */
.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.data-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

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

.cell-mono {
  font-family: var(--mono);
  font-size: 0.82rem;
}

.cell-nowrap {
  white-space: nowrap;
}

.cell-break {
  word-break: break-all;
}

.cell-dim {
  color: var(--muted);
  font-size: 0.82rem;
}

.cell-bad {
  color: var(--danger);
  font-size: 0.82rem;
}

/* Уровень системного лога: цвет фона классом, а не подстановкой в style. */
.log-level {
  color: var(--text);
  background: rgba(100, 116, 139, 0.3);
}

.log-level--debug { background: rgba(100, 116, 139, 0.35); }
.log-level--info { background: rgba(0, 229, 168, 0.15); }
.log-level--warning { background: rgba(255, 170, 80, 0.22); }
.log-level--error { background: rgba(255, 107, 138, 0.22); }
.log-level--critical { background: rgba(220, 38, 38, 0.3); }

/* Мелкие подписи в заголовке строки списка: 2FA, онлайн, «заблокирован». */
.row-tag {
  font-size: 0.82rem;
  font-weight: 600;
}

.row-tag--ok { color: var(--accent); }
.row-tag--bad { color: var(--danger); }
.row-tag--dim { color: var(--muted); }

/* Иконка оператора в строке списка. */
.op-inline-logo {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 5px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.4rem;
}

.op-inline-emoji {
  margin-right: 0.35rem;
}

/* Настройка-флаг: подпись справа от чекбокса. У .field стоит display:grid,
   поэтому inline-овый flex-direction:row тут никогда не работал и чекбокс
   стоял над подписью - теперь это честные две колонки. */
.field--switch {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.field--switch input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.field--switch span {
  color: var(--text);
}

.field-hint {
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Диагностика ноды под строкой списка. */
.node-diag {
  margin-top: 0.6rem;
}

.text-bad {
  color: var(--danger);
  font-size: 0.9rem;
}

/* Подпись под таблицей (TTL кэша и т.п.). */
.table-note {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
}

/* Ответ RIPEstat под строкой запроса. */
.lookup-result p {
  margin: 0;
}

.lookup-result p + p {
  margin-top: 0.3rem;
}

.lookup-result__sample {
  font-size: 0.8rem;
  word-break: break-all;
}

/* ==========================================================================
   Телефон: вход, профиль и админка. Общие панели правит console.css.
   ========================================================================== */

@media (max-width: 640px) {
  .auth {
    padding-bottom: 4.5rem;
  }

  .auth__layout {
    gap: 0.8rem;
  }

  .auth-card {
    padding: 0.9rem 0.8rem;
    border-radius: 16px;
  }

  .auth-card__head {
    margin-bottom: 0.8rem;
  }

  .auth-card__head h2 {
    font-size: 1.05rem;
  }

  .auth-head h1 {
    font-size: 1.5rem;
  }

  /* Кнопки в шапке карточки и в формах - во всю ширину строки. */
  .auth-card__head-actions,
  .card-tools {
    flex: 1 1 100%;
    gap: 0.4rem;
  }

  .auth-card__head-actions .btn,
  .card-tools .btn {
    flex: 1 1 auto;
  }

  .auth-actions .btn {
    flex: 1 1 100%;
  }

  .filter-row {
    gap: 0.5rem;
  }

  .filter-row .input {
    flex: 1 1 100%;
    font-size: 16px;
  }

  .filter-row .btn {
    flex: 1 1 auto;
  }

  /* Таблицы логов и пользователей: горизонтальный скролл вместо каши. */
  .table-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .data-table {
    font-size: 0.76rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.4rem 0.45rem;
  }

  .cell-mono,
  .cell-dim,
  .cell-bad {
    font-size: 0.74rem;
  }

  .acc-session__top {
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .auth-qr svg {
    width: 100%;
    height: auto;
  }

  .auth-secret code,
  .auth-secret__uri {
    word-break: break-all;
  }

  .check-inline {
    min-height: 40px;
  }

  .check-inline input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
  }
}