/* Стили Mini App. Цвета берутся из темы Telegram, запасные — для обычного браузера. */

/* Скрытое остаётся скрытым: display из правил ниже сильнее браузерного [hidden],
   а этим атрибутом прячутся и экраны, и кнопка «Управление», и строки ошибок. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 24px 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  background: var(--tg-theme-bg-color, #ffffff);
  color: var(--tg-theme-text-color, #1a1a1a);
}

.card-page {
  max-width: 480px;
  margin: 0 auto;
}

h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 20px;
}

h2 {
  margin: 0;
  font-size: 18px;
}

.hint {
  margin: 0 0 8px;
  color: var(--tg-theme-hint-color, #707579);
}

/* --- иконки ------------------------------------------------------------------
   Файлы лежат в app/web/icons, внешних адресов нет. Сами иконки — плитки со своим
   синим фоном, поэтому они одинаково видны и в светлой, и в тёмной теме Telegram;
   подложка нужна только на случай прозрачного или почти белого значка. */

.icon {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 7px;
  background: rgb(0 0 0 / 6%);
}

.icon-title {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.icon-small {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

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

.label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--tg-theme-hint-color, #707579);
}

input,
select {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  font: inherit;
  color: var(--tg-theme-text-color, #1a1a1a);
  background: var(--tg-theme-secondary-bg-color, #f4f4f5);
  border: 1px solid var(--tg-theme-secondary-bg-color, #e0e0e2);
  border-radius: 10px;
}

input:focus,
select:focus {
  outline: 2px solid var(--tg-theme-button-color, #2481cc);
  outline-offset: 1px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.button:disabled {
  opacity: 0.6;
  cursor: default;
}

.primary {
  color: var(--tg-theme-button-text-color, #ffffff);
  background: var(--tg-theme-button-color, #2481cc);
}

.secondary {
  color: var(--tg-theme-text-color, #1a1a1a);
  background: var(--tg-theme-secondary-bg-color, #f4f4f5);
}

/* Опасные действия: отключить регион, исключить человека, удалить. */
.danger {
  color: var(--tg-theme-destructive-text-color, #d14836);
  background: var(--tg-theme-secondary-bg-color, #f4f4f5);
}

.buttons {
  display: grid;
  gap: 8px;
}

.spaced {
  margin-top: 12px;
}

/* Предпросмотр: моноширинный блок с переносами, как сообщение в чате. */
.preview {
  margin: 0 0 16px;
  padding: 12px;
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--tg-theme-secondary-bg-color, #f4f4f5);
  border-radius: 10px;
}

.error {
  margin: 0 0 16px;
  color: var(--tg-theme-destructive-text-color, #d14836);
}

.success {
  margin: 0;
  font-weight: 600;
  color: var(--tg-theme-link-color, #2481cc);
}

/* --- экраны управления ------------------------------------------------------ */

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

.back-link {
  padding: 8px 10px 8px 0;
  font: inherit;
  color: var(--tg-theme-link-color, #2481cc);
  background: none;
  border: none;
  cursor: pointer;
}

/* Итог удачного действия: тем же местом, что и ошибка, но спокойным цветом. */
.status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--tg-theme-link-color, #2481cc);
}

/* Предупреждение об отключённом регионе и о том, что удаление необратимо. */
.warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--tg-theme-destructive-text-color, #d14836);
}

.group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 8px;
  font-size: 15px;
  color: var(--tg-theme-hint-color, #707579);
}

#admin-body > .button {
  margin-bottom: 8px;
}

/* Карточка региона или человека. Регион — кнопка: на телефоне нажимается вся карточка. */
.card {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 12px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--tg-theme-secondary-bg-color, #f4f4f5);
  border: none;
  border-radius: 10px;
}

.tappable {
  cursor: pointer;
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.card-name {
  font-weight: 600;
}

.card-note {
  margin-top: 4px;
  font-size: 14px;
  color: var(--tg-theme-hint-color, #707579);
  overflow-wrap: anywhere;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.card-actions:empty {
  display: none;
}

/* Кнопки внутри карточек и строк: по содержимому, а не во всю ширину.
   Фон прозрачный с рамкой — так они видны и на карточке, и на странице, в любой теме. */
.button.small {
  width: auto;
  padding: 8px 12px;
  font-size: 14px;
  background: transparent;
  border: 1px solid var(--tg-theme-hint-color, #c8c9cc);
}

.button.small.primary {
  color: var(--tg-theme-button-text-color, #ffffff);
  background: var(--tg-theme-button-color, #2481cc);
  border-color: var(--tg-theme-button-color, #2481cc);
}

/* Отдельно стоящая кнопка действия выглядит как остальные на экране. */
#admin-body > .button.small {
  width: 100%;
  padding: 14px;
  font-size: inherit;
}

/* Раскрывающийся блок под карточкой: правка ФИО, перенос в регион. */
.card-form {
  margin-top: 10px;
}

.input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.input-row .button {
  width: auto;
  white-space: nowrap;
}

/* Пометки «исключён» и «нет в чате» — рядом с именем. */
.badge {
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 999px;
  color: var(--tg-theme-destructive-text-color, #d14836);
  border: 1px solid currentColor;
}

/* Название региона, которое нужно повторить для подтверждения удаления. */
.confirm-name {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-weight: 600;
  background: var(--tg-theme-secondary-bg-color, #f4f4f5);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

/* Переход по страницам истории: «Новее» слева, «Раньше» справа. */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}