/* ============================================================================
   X.SUP UI-kit — БАЗА И ШЕСТЬ РЕЦЕПТУР.
   Подключать ПОСЛЕ tokens.css и ДО собственного CSS модуля.

   Выгружено из X.CRM 10.08.2026 (DESIGN_SYSTEM.md §2.5, §3). Из канона взяты
   только канонические имена классов; легаси-псевдонимы X.CRM (.csc-primary,
   .om-cancel, .rm-btn, .ms-btn и прочие) остались в самом X.CRM — в общий кит
   им нельзя, они ничего не значат для других модулей.

   ГЕОМЕТРИЯ — ВСЕГДА В БАЗОВОМ КЛАССЕ, МОДИФИКАТОРЫ — ТОЛЬКО ЦВЕТ.
   Цветовой модификатор у кнопки ОБЯЗАТЕЛЕН: голая .btn — это геометрия без
   окраски, она намеренно выглядит «никак» (так же в X.CRM: голой .btn там нет).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* ---- Сброс и база ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
html {
  -webkit-tap-highlight-color: transparent;
  /* Полоса прокрутки не должна дёргать вёрстку при появлении (Windows). */
  scrollbar-gutter: stable;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Атрибут hidden сильнее любого display в наших правилах (иначе блок с
   display:flex остаётся видимым, хотя JS проставил hidden). */
[hidden] { display: none !important; }

/* Базовая нормализация контролов: без неё кнопка получает шрифт Arial от UA
   и padding:0 от звёздочки выше — именно так и появлялись «ущербные» кнопки. */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* Иконка внутри кнопки/ссылки. ИДЁТ ДО ВСЕГО ОСТАЛЬНОГО:
   1) не перехватывает клик — иначе e.target это <svg>, и обработчики вида
      e.target.closest/hasAttribute промахиваются;
   2) РАЗМЕР ПО УМОЛЧАНИЮ. Обязателен: <svg> без width/height и без CSS-размера
      разворачивается в дефолтные 300×150 и рвёт/скрывает кнопку. Перечислять
      классы нельзя — новый компонент в список не попадёт (так и пропали кнопки
      количества в X.CRM). Точечные размеры — оверрайдами модуля, они специфичнее. */
button svg, a svg {
  pointer-events: none;
  width: 16px; height: 16px; flex: 0 0 auto;
}

/* Числа, меняющиеся на месте, не должны «прыгать» по ширине. */
.num, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-dim); }
.dim { color: var(--text-dim2); }
.small { font-size: var(--fs-md); }

/* ============================================================================
   1. КНОПКА. Геометрия — всегда в .btn; модификаторы — только цвет.
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1h);
  min-height: var(--h-ctl); padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent; border-radius: var(--radius-ctl);
  font: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1.2;
  text-align: center; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background 120ms, border-color 120ms, color 120ms, transform 80ms, opacity 120ms;
}
.btn:active:not(:disabled) { transform: scale(0.98); }

/* --- Цветовые варианты (легаси-имена через дефис — те же кнопки) --- */
.btn--primary, .btn-primary {
  background: var(--accent); color: var(--surface); border-color: var(--accent);
}
.btn--primary:hover, .btn-primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--surface);
}
.btn--secondary, .btn-secondary {
  background: var(--surface); color: var(--text); border-color: var(--border);
}
.btn--secondary:hover, .btn-secondary:hover {
  border-color: var(--border-hover); color: var(--text);
}
.btn--danger, .btn-danger {
  background: transparent; color: var(--danger); border-color: var(--danger-border);
  font-weight: 500;
}
.btn--danger:hover, .btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn--ghost {
  background: transparent; color: var(--text-dim); border-color: transparent;
}
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* --- Размерные модификаторы --- */
.btn--sm, .btn-sm {
  min-height: var(--h-ctl-sm); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-md); font-weight: 500;
}
.btn--block { display: flex; width: 100%; }

/* --- Иконочная кнопка: одна геометрия на все (было 4 размера крестика) --- */
.btn--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--h-ctl-sm); height: var(--h-ctl-sm); min-height: 0; padding: 0;
  border-radius: var(--radius-sm); color: var(--text-dim);
  background: transparent; border-color: transparent;
}
.btn--icon:hover { background: var(--surface-2); color: var(--text); }

/* --- Текстовая кнопка-ссылка --- */
.btn--link, .btn-link {
  min-height: 0; padding: 0; border: 0; background: none;
  color: var(--accent); font-size: var(--fs-md); font-weight: 500;
}
.btn--link:hover, .btn-link:hover { color: var(--accent-hover); }

/* ============================================================================
   2. ПОЛЕ ВВОДА. Стилизуем по ТИПУ ЭЛЕМЕНТА — класс не нужен, поэтому ни одно
   поле не может «забыть» стиль (в X.CRM их успело накопиться 19 разных).
   ============================================================================ */
input[type="text"], input[type="tel"], input[type="email"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"],
input[type="date"], input[type="datetime-local"],
select, textarea, .input {
  width: 100%;
  min-height: var(--h-ctl-sm);
  padding: var(--sp-2) var(--sp-2h);
  border: 1px solid var(--border); border-radius: var(--radius-ctl);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-base);
  transition: border-color 120ms, box-shadow 120ms;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, .input:focus {
  outline: none; border-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: var(--text-dim2); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }

/* Цифры: везде вправо, нативный спиннер скрыт — это и была причина «гуляющих
   цифр» (спиннер съедал ~16px справа на полях разной ширины). */
input[type="number"] {
  text-align: right;
  appearance: textfield; -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0; display: none;
}

/* Селект: единый chevron во всех браузерах. Обводка записана как %236B6B6B —
   это --text-dim; CSS-переменные внутри url() не работают, это единственная
   легальная утечка цвета из токенов (DESIGN_SYSTEM §1.5в). */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-2h) center;
}
/* Чекбокс/радио/файл — не наши поля: возвращаем нативный вид (иначе общий
   селектор ловит их и выдаёт им рамку и min-height). */
input[type="checkbox"], input[type="radio"], input[type="file"] {
  width: auto; min-height: 0; padding: 0; border: 0; background: none; border-radius: 0;
}
.field {
  display: flex; flex-direction: column; gap: var(--sp-1);
  font-size: var(--fs-md); color: var(--text-dim);
}
.form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ============================================================================
   3. КАРТОЧКА. Одна рецептура на все поверхности.
   ============================================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
}
.card:hover { border-color: var(--border-hover); }

/* Внутренняя строка карточки («колодец»). */
.card--inner {
  padding: var(--sp-2h) var(--sp-3);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--surface-3);
}

/* Пустое состояние — всегда текстом по центру, никаких иллюстраций. */
.empty-hint {
  text-align: center; font-size: var(--fs-md);
  padding: var(--sp-6) var(--sp-3); color: var(--text-dim);
}

/* ============================================================================
   4. БЕЙДЖ — статичная метка (статус, остаток, роль).
   ============================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  white-space: nowrap;
}
.badge--blue  { background: var(--accent-bg);  color: var(--accent-hover); }
.badge--green { background: var(--success-bg); color: var(--success); }
.badge--amber { background: var(--warning-bg); color: var(--warning); }
.badge--red   { background: var(--danger-bg);  color: var(--danger); }
.badge--gray  { background: var(--surface-2);  color: var(--text-dim); }

/* ============================================================================
   5. ПИЛЮЛЯ — кликабельная (фильтр, таб, канал, чип).
   ============================================================================ */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  padding: var(--sp-1h) var(--sp-3); border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  font: inherit; font-size: var(--fs-md); font-weight: 500; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.pill:hover:not(:disabled) { border-color: var(--border-hover); color: var(--text); }
/* Активное состояние — одно на все пилюли-переключатели. */
.pill.is-active, .pill.is-selected {
  background: var(--text); color: var(--surface); border-color: var(--text);
}
.pill:disabled, .pill.is-empty { opacity: .45; cursor: default; }
/* Пилюля-действие — акцент на ховере. */
.pill--action { color: var(--text); }
.pill--action:hover { border-color: var(--accent); color: var(--accent); }
.pill--ok   { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.pill--warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.pill--err  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.pill--info { background: var(--accent-bg);  color: var(--accent);  border-color: var(--accent); }
.filter-pills { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ============================================================================
   6. АВАТАР (один, с размерным модификатором).
   ============================================================================ */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); cursor: pointer;
  font: inherit; font-size: var(--fs-md); font-weight: 700;
  transition: background 120ms, border-color 120ms;
}
.avatar:hover { border-color: var(--border-hover); }
.avatar--sm { width: 20px; height: 20px; font-size: var(--fs-xs); }
.avatar--accent { background: var(--accent-bg); color: var(--accent); border-color: transparent; }

/* ============================================================================
   МОДАЛКА И ШТОРКА. Один каркас: подложка + карточка + шапка/тело/футер.
   Центрует ТОЛЬКО флекс родителя. Никаких top/transform — двойная центровка
   утаскивает карточку вниз экрана (DESIGN_SYSTEM §4).
   ============================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--scrim);
}
.modal {
  position: relative; background: var(--surface);
  width: 100%; max-width: 520px; padding: var(--sp-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sheet);
  display: flex; flex-direction: column; gap: var(--sp-3);
  max-height: 90vh; overflow-y: auto;
}
/* Десктоп: шторка снизу становится обычной центрованной модалкой. */
@media (min-width: 640px) {
  .modal-overlay { align-items: center; }
  .modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-weight: 600;
}
.modal-title { font-size: var(--fs-lg); font-weight: 600; }
.modal-body { display: flex; flex-direction: column; gap: var(--sp-2h); }
.modal-actions {
  display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-1);
}
.modal-error {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: var(--danger-bg); color: var(--danger); font-size: var(--fs-md);
}

/* ============================================================================
   ФЛЕШ-СООБЩЕНИЯ.
   ============================================================================ */
.flash {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-ctl);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-md);
}
.flash--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.flash--error   { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }
.flash--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }

/* ============================================================================
   ДВИЖЕНИЕ. Всё интерактивное — 120ms; ничего медленнее 350ms в переходах.
   Уважаем системную настройку «меньше движения».
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}