/* ════════════════════════════════════════════════════════════
   MetaMax Theme — централизованные дизайн-токены и базовые стили.
   Подключается во ВСЕ страницы первым CSS-файлом (раньше любого
   локального <style>), поэтому правила здесь имеют МЕНЬШИЙ
   приоритет в каскаде, и существующие inline-стили остаются.

   План очистки страниц: по одной странице удаляются локальные
   объявления, и тогда правила отсюда начинают действовать.
   ──────────────────────────────────────────────────────────── */

/* ── Plus Jakarta Sans (загружается асинхронно, fallback внизу) ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ════════════════════ ДИЗАЙН-ТОКЕНЫ ════════════════════ */
:root {
  /* Типографика */
  --font-sans: 'Plus Jakarta Sans', 'DejaVu Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  /* Палитра — чернила */
  --mm-ink:        #0D1117;
  --mm-ink-2:      #3D444D;
  --mm-ink-3:      #656D76;
  --mm-ink-4:      #9198A1;

  /* Синий акцент */
  --mm-blue:       #1B6FEE;
  --mm-blue-dark:  #0D4BC4;
  --mm-blue-hover: #1560D4;
  --mm-blue-bg:    #EEF4FF;
  --mm-blue-bd:    #80AAFF;

  /* Тёмная навигация */
  --mm-navy:       #0D1117;

  /* Фоны */
  --mm-surface:    #FFFFFF;
  --mm-bg:         #F6F8FA;
  --mm-bg-2:       #EAEEF2;

  /* Бордеры */
  --mm-border:     #D1D9E0;
  --mm-border-lt:  #E8EDF2;

  /* Семантические цвета */
  --mm-success:    #1A7F37;
  --mm-success-bg: #DAFBE1;
  --mm-success-bd: #82E09A;

  --mm-warning:    #9A6700;
  --mm-warning-bg: #FFF8C5;
  --mm-warning-bd: #E3B341;

  --mm-danger:     #CF222E;
  --mm-danger-bg:  #FFEBE9;
  --mm-danger-bd:  #FF9492;

  --mm-info:       #0D4BC4;
  --mm-info-bg:    #EEF4FF;
  --mm-info-bd:    #80AAFF;

  /* Дополнительный акцент */
  --mm-purple:     #6641C4;
  --mm-purple-bg:  #F1EFF8;

  /* Радиусы */
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-full: 9999px;

  /* Высоты */
  --h-input:   34px;
  --h-btn:     34px;
  --h-btn-sm:  28px;
  --h-btn-lg:  40px;

  /* Тени */
  --shadow-sm: 0 1px 3px rgba(13,17,23,.08);
  --shadow-md: 0 4px 16px rgba(13,17,23,.10), 0 1px 3px rgba(13,17,23,.06);
  --shadow-lg: 0 8px 32px rgba(13,17,23,.12), 0 2px 6px rgba(13,17,23,.08);

  /* Кривые/времена */
  --ease:     cubic-bezier(.16, 1, .3, 1);
  --t-fast:   120ms;
  --t-normal: 180ms;
  --t-slow:   260ms;
}

/* ════════════════════ БАЗА ════════════════════ */

html, body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--mm-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--mm-bg);
  /* Анти-FOUC: страница скрыта пока шрифт и стили грузятся. JS должен
     поставить document.body.style.visibility='visible' после auth-проверки.
     Если на странице ЕСТЬ <body class="visible"> — она видна сразу
     (используется для public-страниц без auth). */
  visibility: hidden;
}
body.visible { visibility: visible; }

/* Табличные цифры — для всего что в .num */
.num, td.num, [data-num] {
  font-variant-numeric: tabular-nums;
}

/* Единый цвет плейсхолдеров — очень светлый серый, едва заметный.
   Не отвлекает от текста, который пользователь вводит, и не
   доминирует визуально на странице. */
input::placeholder, textarea::placeholder { color: #B0B0B0 !important; opacity: 1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #B0B0B0 !important; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #B0B0B0 !important; opacity: 1; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #B0B0B0 !important; }

/* Уберём фон autofill в Chrome который добавляет светло-голубой/жёлтый оттенок */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--mm-ink);
  -webkit-box-shadow: 0 0 0 30px var(--mm-surface) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ════════════════════ КНОПКИ ════════════════════ */
/* Базовый ресет — применяется только если у элемента есть .btn
   (не трогаем безымянные <button> чтобы не сломать локальные
   стили существующих страниц). Очистка inline-стилей идёт
   постранично. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--h-btn);
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), opacity var(--t-fast);
}
.btn:active { transform: scale(.98); }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--mm-blue);
  color: #fff;
  border-color: var(--mm-blue);
}
.btn-primary:hover { background: var(--mm-blue-hover); border-color: var(--mm-blue-hover); }

.btn-dark, .btn-black {
  background: var(--mm-navy);
  color: #fff;
  border-color: var(--mm-navy);
}
.btn-dark:hover, .btn-black:hover { background: #21262D; }

.btn-secondary, .btn-outline {
  background: var(--mm-surface);
  color: var(--mm-ink);
  border-color: var(--mm-border);
}
.btn-secondary:hover, .btn-outline:hover { background: var(--mm-bg); border-color: #B0B8C1; }

.btn-ghost {
  background: transparent;
  color: var(--mm-ink-3);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--mm-bg); color: var(--mm-ink); }

.btn-danger, .btn-delete, .btn-remove {
  background: var(--mm-danger-bg);
  color: var(--mm-danger);
  border-color: var(--mm-danger-bd);
}
.btn-danger:hover { background: #FFD7D5; }

.btn-success {
  background: var(--mm-success);
  color: #fff;
  border-color: var(--mm-success);
}
.btn-success:hover { background: #166429; }

.btn-sm {
  height: var(--h-btn-sm);
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--r-sm);
}

.btn-lg {
  height: var(--h-btn-lg);
  padding: 0 18px;
  font-size: 14px;
}

.btn-icon, .action-btn.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--mm-ink-4);
  border-radius: var(--r-sm);
}
.btn-icon:hover { background: var(--mm-bg); color: var(--mm-ink-2); }
.btn-icon.danger:hover { background: var(--mm-danger-bg); color: var(--mm-danger); }

/* ════════════════════ ПОЛЯ ════════════════════ */
/* По умолчанию не трогаем все input/select — они на страницах уже
   имеют локальные стили. Активируется только когда у поля есть
   класс .mm-field (явный opt-in) или для NEW элементов добавленных
   после очистки. Для нативных <select> работает mm-select.js. */

.mm-field, input.mm-field, select.mm-field, textarea.mm-field {
  height: var(--h-input);
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--mm-ink);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
  box-sizing: border-box;
}
.mm-field::placeholder, textarea.mm-field::placeholder { color: var(--mm-ink-4); }
.mm-field:hover { border-color: #B0B8C1; }
.mm-field:focus {
  border-color: var(--mm-blue);
  box-shadow: 0 0 0 3px rgba(27,111,238,.12);
}
.mm-field:disabled {
  background: var(--mm-bg);
  color: var(--mm-ink-4);
  cursor: not-allowed;
}
input[type="date"].mm-field, input[type="number"].mm-field {
  font-variant-numeric: tabular-nums;
}
textarea.mm-field { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }

.search-wrapper, .input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.search-wrapper input, .input-with-icon input { padding-left: 34px; }
.search-wrapper .icon, .input-with-icon .icon,
.search-wrapper > svg, .input-with-icon > svg {
  position: absolute;
  left: 10px;
  color: var(--mm-ink-4);
  width: 15px;
  height: 15px;
  pointer-events: none;
}

/* ════════════════════ СТАТУСНЫЕ ПИЛЮЛИ ════════════════════ */
.pill, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.pill-success, .status-accepted { background: var(--mm-success-bg); color: var(--mm-success); }
.pill-warning, .status-in-progress { background: var(--mm-warning-bg); color: var(--mm-warning); }
.pill-danger, .status-error { background: var(--mm-danger-bg); color: var(--mm-danger); }
.pill-info, .status-fbo { background: var(--mm-info-bg); color: var(--mm-info); }
.pill-neutral { background: var(--mm-bg); border: 1px solid var(--mm-border); color: var(--mm-ink-3); }

/* ── Toolbar buttons (.btn-filter / .btn-select) ──
   Унифицирует высоту и общий вид «Фильтр» и «Показать: 50» на всех
   страницах со списками (закупки, склад, себестоимость, KPI и т.д.).
   Перебивает локальные стили !important чтобы избежать постраничной
   правки CSS. */
.btn-filter, .btn-select {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--h-input) !important;
  padding: 0 14px !important;
  border-radius: var(--r-lg) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  border: 1px solid var(--mm-border-lt) !important;
  background: #fff !important;
  color: var(--mm-ink-2) !important;
  font-family: var(--font-sans);
  transition: all var(--t-fast);
  box-sizing: border-box !important;
  gap: 7px;
}
.btn-filter:hover, .btn-select:hover {
  background: var(--mm-bg) !important;
  border-color: #B0B8C1 !important;
}
.btn-filter.active {
  background: var(--mm-ink) !important;
  border-color: var(--mm-ink) !important;
  color: #fff !important;
}
.btn-filter svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Кастомный select внутри .btn-select растворяется: внешняя обёртка
   рисует рамку/фон, внутренний триггер делается прозрачным. */
.btn-select { padding-right: 6px !important; }
.btn-select select { border: none; outline: none; background: none; font: inherit; color: inherit; cursor: pointer; }
.btn-select .mm-select { width: auto; flex: none; }
.btn-select .mm-select-btn {
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 22px 0 0 !important;
  font: inherit !important;
  color: inherit !important;
  min-width: 30px;
}
.btn-select .mm-select-chevron { color: var(--mm-ink-3); }

/* Бейдж "магазин (ИП)" — единый стиль для всех страниц.
   Используем inline-flex + фиксированную высоту чтобы вид не зависел
   от line-height родителя (в плотных строках барcode и в просторных
   заголовках бейдж выглядит одинаково). */
.store-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  height: 18px;
  padding: 0 8px;
  background: var(--mm-blue-bg);
  color: var(--mm-blue-dark);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

/* ════════════════════ ТОСТЫ / УВЕДОМЛЕНИЯ ════════════════════ */
.toast, .notification, .alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid;
  font-size: 13px;
  line-height: 1.5;
  animation: mmToastIn var(--t-normal) var(--ease);
}
@keyframes mmToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast-success { background: var(--mm-success-bg); border-color: var(--mm-success-bd); color: #1A3D22; }
.toast-error   { background: var(--mm-danger-bg);  border-color: var(--mm-danger-bd);  color: #7D1111; }
.toast-warning { background: var(--mm-warning-bg); border-color: var(--mm-warning-bd); color: #5A3C00; }
.toast-info    { background: var(--mm-info-bg);    border-color: var(--mm-info-bd);    color: var(--mm-info); }

/* ════════════════════ СКРОЛЛБАР ════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mm-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B0B8C1; }

/* ════════════════════ ПУСТЫЕ СОСТОЯНИЯ ════════════════════ */
.empty-state, .no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--mm-ink-4);
}
.empty-state .icon { font-size: 36px; margin-bottom: 12px; opacity: .4; }
.empty-state .title { font-size: 15px; font-weight: 600; color: var(--mm-ink-3); margin-bottom: 6px; }
.empty-state .desc  { font-size: 13px; }

/* ════════════════════ CATEGORY / MULTI FILTER PANEL ═══════════════
   Общие стили для многоселектного фильтра (эталон: pages/moy_sklad.html).
   Используется через компонент assets/js/category-filter.js. */
.btn-filter:hover { background: var(--mm-bg); border-color: #B0B8C1; }
.btn-filter.active { background: var(--mm-ink); border-color: var(--mm-ink); color: #fff; }

.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--mm-danger); color: #fff; font-size: 11px; font-weight: 700;
}

.filter-panel {
  display: none; position: fixed; background: #fff;
  border: 1px solid var(--mm-border-lt); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); z-index: 900; width: 260px;
}
.filter-panel.open { display: block; }
.filter-search { padding: 10px 12px; border-bottom: 1px solid var(--mm-bg); }
.filter-search input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--mm-border-lt);
  border-radius: var(--r-md); font-family: var(--font-sans); font-size: 13px;
  color: var(--mm-ink); outline: none; background: var(--mm-bg);
}
.filter-search input:focus { border-color: var(--mm-ink-4); background: #fff; }
.filter-list { max-height: 240px; overflow-y: auto; }
.filter-list::-webkit-scrollbar { width: 4px; }
.filter-list::-webkit-scrollbar-thumb { background: var(--mm-border-lt); border-radius: var(--r-xs); }
.filter-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  cursor: pointer; font-size: 13px; color: var(--mm-ink);
  transition: background var(--t-fast);
}
.filter-item:hover { background: var(--mm-bg); }
.filter-item input[type=checkbox] {
  width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--mm-ink);
}
.filter-footer {
  padding: 10px 14px; border-top: 1px solid var(--mm-border-lt);
  display: flex; flex-direction: column; gap: 7px;
}
.btn-apply {
  width: 100%; padding: 9px; border: none; border-radius: var(--r-lg);
  background: var(--mm-blue); color: #fff; font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.btn-apply:hover { background: var(--mm-blue-hover); }
.btn-reset-filter {
  width: 100%; padding: 8px; border: 1px solid var(--mm-border-lt);
  border-radius: var(--r-lg); background: #fff; color: var(--mm-ink-3);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn-reset-filter:hover { background: var(--mm-bg); color: var(--mm-ink); }
