/* components.css — подэтап D.6: единые компоненты (design-plan.md §1–§3).
   Один компонент на всё: кнопки (.btn), поля (.field), бейджи (.badge),
   модалки (.modal), тосты (.toast), пустые состояния (.empty-state),
   скелетоны (.skeleton). Новые экраны этапа 5 собираются только из этих классов.
   Ни одного hex — только var(--…). */

/* ── Кнопки: .btn + модификаторы ─────────────────────────────────────
   .btn--primary  — акцентная (одно действие на экран)
   .btn--default  — нейтральная с рамкой (по умолчанию)
   .btn--ghost    — без рамки, для второстепенных действий в тулбарах
   .btn--danger   — текст краснеет, заливка только при наведении
   Размеры: .btn--sm (28px), по умолчанию 32px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--control-height);
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
  background-color: var(--bg);
  border: var(--line-1) solid var(--border-field);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.btn:hover:not(:disabled) {
  background-color: var(--bg-hover);
}

.btn:disabled {
  color: var(--text-3);
  background-color: var(--bg-panel);
  box-shadow: var(--shadow-none);
  cursor: not-allowed;
}

.btn--sm {
  height: var(--icon-button);
  padding: 0 var(--space-2);
}

.btn--primary {
  color: var(--accent);
  background-color: transparent;
  border-color: var(--accent);
  box-shadow: none;
}

.btn--primary:hover:not(:disabled) {
  color: var(--accent-hover);
  background-color: var(--accent-soft);
  border-color: var(--accent-hover);
}

.btn--primary:disabled {
  color: var(--accent);
  background-color: transparent;
  border-color: var(--accent);
  opacity: 0.45;
}

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  box-shadow: var(--shadow-none);
  color: var(--text-2);
}

.btn--ghost:hover:not(:disabled) {
  color: var(--text);
  background-color: var(--bg-hover);
}

.btn--danger {
  color: var(--danger);
}

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

/* ── Поля: .field ───────────────────────────────────────────────────── */
.field {
  display: block;
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-2);
  font-family: inherit;
  font-size: var(--fs-14);
  color: var(--text);
  background-color: var(--bg);
  border: var(--line-1) solid var(--border-field);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.field:hover {
  border-color: var(--text-3);
}

.field:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.field::placeholder {
  color: var(--text-3);
}

textarea.field {
  height: auto;
  min-height: 76px;
  padding: var(--space-2);
  line-height: var(--lh-base);
  resize: vertical;
}

select.field {
  cursor: pointer;
}

/* Группа «подпись + поле» */
.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

/* ── Бейдж-«таблетка» ───────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  font-size: var(--fs-12);
  line-height: 20px;
  color: var(--text-2);
  background-color: var(--bg-code);
  border-radius: var(--radius-pill);
}

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

/* ── Модальное окно: .modal > .modal__content ────────────────────────
   .modal — фиксированный слой по центру; .modal[hidden] скрывает целиком.
   Внутри: .modal__title, .modal__actions, поля .field и .btn. */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--modal-gap);
}

.modal[hidden] {
  display: none;
}

.modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--modal-gap) * 2);
  overflow-y: auto;
  padding: var(--space-6);
  background-color: var(--bg);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.modal__title {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Список с чекбоксами в модалке шаблона (этап 5.3): столбцы и пользователи */
.view-editor-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 200px;
  overflow-y: auto;
}

.view-editor-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-13);
  color: var(--text);
}

/* Кнопка «Удалить» в футере — слева, остальные справа */
#view-editor-delete {
  margin-right: auto;
}

/* Редактор шаблона: выбор иконки (только admin) + предпросмотр иконки с цветом */
.view-editor-icon-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.view-editor-icon-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--control-height);
  height: var(--control-height);
  color: var(--text);
  background-color: var(--bg-panel);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-md);
}

.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.icon-picker-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  color: var(--text-2);
  background-color: var(--bg);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.icon-picker-item:hover {
  color: var(--text);
  background-color: var(--bg-hover);
}

.icon-picker-item.selected {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* Средняя модалка (интеграции, палитра): уже широкой, шире узкой */
.modal__content--md {
  width: min(760px, 94vw);
  max-width: min(760px, 94vw);
}

/* Узкая модалка подтверждения (удаление базы и т.п.) */
.modal__content--sm {
  width: min(460px, 92vw);
  max-width: min(460px, 92vw);
}

/* Подтверждение всегда поверх других модалок: оно открывается из админ-панели,
   у которой тот же z-index, но она позже в DOM (иначе окно уходило бы под неё). */
#confirm-modal {
  z-index: calc(var(--z-modal) + 10);
}

/* Настройки базы открываются из окна «Базы данных» — тоже поднимаем поверх него. */
#admin-base-edit-modal {
  z-index: calc(var(--z-modal) + 5);
}

/* Текст предупреждения: переносы строк из сообщения сохраняются */
.confirm-text {
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-2);
  white-space: pre-line;
}

/* Админ-панель — пользователи (этап 5.4).
   Панель заметно шире обычной модалки: в ней таблица пользователей (7 колонок),
   таблица токенов и палитра, поэтому 480/760px не хватало — данные «съедались».
   ВАЖНО: max-width обязателен — у базового .modal__content стоит max-width: 480px,
   и без переопределения модификатор ширины не работал (панель оставалась 480px). */
.modal__content--wide {
  width: min(1180px, 96vw);
  max-width: min(1180px, 96vw);
}

.admin-panel-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-2);
}

/* Форма пользователя: поля в несколько колонок (панель широкая) */
.admin-user-form {
  flex-shrink: 0;
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

/* Скрытие формы атрибутом hidden: у `.field-group` задан display:flex, и он перебивает [hidden]
   из base.css (components.css подключён позже) — форма показывалась всегда. */
.admin-user-form[hidden] {
  display: none;
}

.admin-user-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2) var(--space-3);
}

/* Таблица пользователей: ячейки не сжимаются, при нехватке ширины — горизонтальный скролл.
   flex-shrink:0 обязателен: .modal__content — flex-колонка, а у блока с overflow высота
   схлопывалась в 0px, и список пользователей был не виден вообще («информация съедалась»). */
.admin-users-table-wrap {
  flex: 0 0 auto;
  max-height: 340px;
  overflow: auto;
}

.admin-users-table th,
.admin-users-table td {
  white-space: nowrap;
}

/* Имя — единственная колонка, которой разрешено переноситься (может быть длинным) */
.admin-users-table td.admin-cell-name {
  white-space: normal;
  min-width: 180px;
}

.admin-row-actions {
  display: flex;
  gap: var(--space-1);
  /* Три кнопки — в одну линию: при переносе они не помещались в строку 36px и наезжали друг на друга */
  flex-wrap: nowrap;
}

/* Страховка: если содержимое всё же выше строки, строка растёт, а не обрезает кнопки */
.admin-users-table tbody tr {
  height: auto;
}

.admin-new-token {
  background-color: var(--bg-panel);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Экран истории (этап 5.6): панель фильтров и пейджер */
.history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
  margin-bottom: var(--space-2);
}

.history-filters .field-group {
  margin: 0;
  min-width: 140px;
}

.history-filter-apply {
  margin-left: auto;
}

.history-pager {
  align-items: center;
}

/* Затемнение под модалкой (общий слой для всех окон) */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background-color: var(--bg-overlay);
}

/* ── Тосты: контейнер справа снизу, карточка с цветной полоской ──────
   Классы: .toast, модификаторы .toast--success / --error / --warn / --info. */
#notifications {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(360px, calc(100vw - var(--space-8)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-13);
  color: var(--text);
  background-color: var(--bg);
  border: var(--line-1) solid var(--border);
  border-left: 3px solid var(--text-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toast-in var(--duration-base) var(--ease-standard);
}

.toast--success { border-left-color: var(--success); }
.toast--error { border-left-color: var(--danger); }
.toast--warn { border-left-color: var(--warn); }
.toast--info { border-left-color: var(--info); }

@keyframes toast-in {
  from { transform: translateY(var(--space-2)); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Пустое состояние: иконка/текст по центру блока ────────────────── */
/* `.empty-text` — историческое имя, которое создаёт JS (main/table/drawer/chat);
   оставлено как алиас `.empty-state`, чтобы не переписывать разметку ради класса. */
.empty-state,
.empty-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-13);
  font-style: normal;
  text-align: center;
  background-color: transparent;
  border-radius: 0;
}

/* Внутри таблицы/ленты отступ поменьше: это не «пустая страница», а блок */
.chat-thread .empty-text,
.chat-collapsed .empty-text,
.drawer-body .empty-text {
  padding: var(--space-4);
}

.empty-state__title {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.empty-state__hint {
  font-size: var(--fs-12);
  color: var(--text-3);
}

/* ── Скелетоны: заглушки на время загрузки ─────────────────────────── */
.skeleton {
  background-color: var(--bg-code);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton--text {
  height: 12px;
  margin: var(--space-1) 0;
}

.skeleton--row {
  height: var(--row-height);
  margin-bottom: var(--line-1);
}

.skeleton--block {
  height: 96px;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Уважение к настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .skeleton {
    animation: none;
  }
}

/* ── Состояние «загружается» для кнопки/блока ───────────────────────
   Было в additional.css как .loading (opacity 0.6) — переписано на токены
   и без !important: неактивная кнопка и так получает cursor: not-allowed. */
.loading {
  opacity: 0.6;
  cursor: progress;
}

/* ── Сообщение об ошибке под полем (вход, формы) ───────────────────── */
.error-message {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-13);
  color: var(--danger);
  background-color: var(--danger-soft);
  border: var(--line-1) solid var(--danger);
  border-radius: var(--radius-md);
}

/* ── Скрытое поле выбора файлов ────────────────────────────────────── */
.files-input[hidden] {
  display: none;
}


/* ── Кастомный календарь (public/js/datepicker.js) ────────────────────
   Заменяет нативный попап input[type=date]: он рисуется браузером/ОС и не
   подчиняется токенам. Значение поля всегда хранится в ISO (YYYY-MM-DD). */
.datepicker-input {
  cursor: pointer;
}

.datepicker {
  position: fixed;
  z-index: var(--z-picker);
  width: 264px;
  padding: var(--space-3);
  background: var(--bg);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  color: var(--text);
}

.datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.datepicker__title {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}

.datepicker__nav {
  width: var(--icon-button);
  height: var(--icon-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-2);
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  cursor: pointer;
}

.datepicker__nav:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.datepicker__dow {
  padding: var(--space-1) 0;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  text-align: center;
}

.datepicker__day {
  height: var(--control-height-sm);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--fs-13);
  font-variant-numeric: var(--font-variant-numeric);
  cursor: pointer;
}

.datepicker__day:hover {
  background: var(--bg-hover);
}

.datepicker__day.is-outside {
  color: var(--text-3);
}

.datepicker__day.is-today {
  box-shadow: inset 0 0 0 var(--line-1) var(--border-field);
}

.datepicker__day.is-selected {
  background: var(--accent);
  color: var(--text-inverse);
}

.datepicker__day.is-selected:hover {
  background: var(--accent-hover);
}

.datepicker__foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--line-1) solid var(--border);
}

.datepicker__link {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-13);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.datepicker__link:hover {
  background: var(--accent-soft);
}