/* =============================================================
   JIT UI — ЕДИНЫЙ КОМПОНЕНТНЫЙ СЛОЙ (v3.8.14+)
   -------------------------------------------------------------
   Единый словарь компонентов: .btn / .badge / .card / .field / .row / .tabs.
   Цель — один источник правды вместо дублей в legacy_overrides / theme_bridge /
   pages/*. Заполняется ПОЭТАПНО, по одному компоненту за коммит.

   ПРАВИЛА ЭТОГО ФАЙЛА:
   1. БЕЗ !important. Каскад решается порядком подключения и специфичностью.
   2. Только РЕАЛЬНЫЕ токены (--text/--muted/--line/--accent/--dark/--panel/
      --section-bg/--field-bg/--button-text/--button-secondary-* /--danger/--radius)
      и уже существующие --jit-* из components.css. Переменных --color-* в проекте НЕТ.
   3. Подключается ПОСЛЕДНИМ из css/* (см. base.html) → при равной специфичности
      выигрывает порядком. Пер-страничные правки бьют его обёрткой-классом
      (напр. .order-view-page-v78 .btn) — это норма на переходный период.
   4. Переходные алиасы: новое и старое имя в одном правиле (.btn, .button { … }),
      чтобы не трогать разметку до финального прохода переименования.

   МИГРАЦИЯ КОМПОНЕНТА = 2 шага в ОДНОМ коммите:
   (a) добавить каноничное правило сюда (визуально no-op — theme_bridge !important
       пока главный);
   (b) удалить соответствующий !important-блок из theme_bridge.css → правит этот файл.
   Откат любого шага = git revert одного коммита.
   ============================================================= */


/* ---------- BADGE — плашки/пиллы ----------
   Единый пилл + палитра тонов. База взята из .order-badge, которая была дословно
   ПРОДУБЛИРОВАНА в pages/dashboard.css и pages/orders_v2.css — теперь источник один
   здесь. Тоны (muted/warning/info/success/danger) — общая палитра статусов.
   Легаси-имена тонов (.order-badge--*, .b-*) пока живут в pages/* и переедут на
   .badge--* в следующих шагах. Без !important. */
.badge,
.order-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.badge--muted   { background: #f1efe8; color: #5f5e5a; }  /* нейтральный / черновик */
.badge--warning { background: #faeeda; color: #854f0b; }  /* ожидание / оплата */
.badge--info    { background: #e6f1fb; color: #185fa5; }  /* в работе / фабрика */
.badge--success { background: #e1f5ee; color: #0f6e56; }  /* готово / отправлено */
.badge--danger  { background: #fdf0f0; color: #CC2200; }  /* проблема / нет в наличии */


/* ---------- BUTTON — кнопки ----------
   Единственный дом базового вида кнопки. БЕЗ !important: ui.css грузится последним
   из css/*, поэтому при равной специфичности выигрывает порядком над legacy/theme_*.
   Пер-страничные правки (order_view/product_fields/settings) держат свой !important
   и продолжают работать; order_form/users со scoped-правилами раскладки «всплывают»
   намеренно (их геометрия). Алиасы старых имён сохранены — разметку не трогаем.
   Иконочные кнопки (.icon-action) — отдельный компонент, мигрируют позже. */
.button,
a.button,
button.button,
.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jit-action-gap, 8px);
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--jit-action-radius, 8px);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  padding: var(--jit-action-padding-y, 11px) var(--jit-action-padding-x, 18px);
  font: inherit;
  font-weight: var(--jit-action-font-weight, 500);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.button:hover,
a.button:hover,
button.button:hover,
.btn:hover,
a.btn:hover,
button.btn:hover {
  text-decoration: none;
  border-color: var(--accent);
}

.button.primary,
a.button.primary,
button.button.primary,
button.primary,
.layout-toggle[data-mode="save"] {
  background: var(--button-bg, var(--dark));
  border-color: var(--button-bg, var(--dark));
  color: var(--button-text, #fff);
}

.button.small,
a.button.small,
button.button.small,
.btn.secondary,
a.btn.secondary,
button.btn.secondary {
  padding: var(--jit-action-small-padding-y, 7px) var(--jit-action-small-padding-x, 12px);
  font-size: var(--jit-action-small-font-size, 13px);
}

.danger-button,
.button.danger-button,
a.button.danger-button,
button.button.danger-button,
.link.danger,
a.link.danger {
  color: var(--danger);
  border-color: var(--danger);
}


/* ---------- CARD — поверхности ----------
   TODO(этап 5): .card (+ --section/--flush), алиас .panel. */


/* ---------- FIELD / ROW — поля и раскладка ----------
   TODO: .field (обёртка-layout), .row. Контролы остаются на element-селекторах
   input/select/textarea. .field-label НЕ трогаем (канон в base.css). */


/* ---------- TABS — табы ----------
   TODO(этап 10): .tabs / .tab / .tab.is-active (унификация mlf-tab/opts-tab). */


/* ---------- ERROR PAGE — v3.8.71 (audit-fix): кастомные 403/404 ---------- */
.error-page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; min-height:50vh; padding:40px 20px;
}
.error-page-code{ font-size:64px; font-weight:700; line-height:1; color:var(--text, #111); }
.error-page-text{ font-size:16px; color:var(--muted, #888); }


/* ---------- FLASH CATEGORIES — v3.8.71 (audit-fix) ----------
   .flash-wrap .flash--* (0,2,0) при загрузке последним файлом перекрывает базовый
   фон .flash из components.css. success/error/warning/info — левая цветная полоса. */
.flash-wrap .flash--success{ background:#eaf7ef; border-color:#bfe6cd; border-left:3px solid #16a34a; }
.flash-wrap .flash--error{   background:#fdecec; border-color:#f3c6c6; border-left:3px solid #dc2626; }
.flash-wrap .flash--warning{ background:#fdf4e3; border-color:#f0dcb0; border-left:3px solid #d97706; }
.flash-wrap .flash--info{    border-left:3px solid var(--accent, #111); }