/* ═══════════════════════════════════════════════════════════════════════
   ОФОРМЛЕНИЕ ПОРТАЛА (визуальный слой, 17.09.2026)
   Тот же дизайн-язык, что в виджете Битрикса: нейтрали и тени TailAdmin (MIT),
   шрифты Inter (интерфейс, цифры) + Manrope (заголовки) — как на сайте компании.
   Файл подключается последним в index.html и только переопределяет app.css:
   убрать строку подключения — и портал вернётся к прежнему виду.
   Полная точка возврата: backups/restore-2026-09-17_before-portal-ui/ОТКАТ.command
   ═══════════════════════════════════════════════════════════════════════ */

/* Шрифты лежат у нас (public/fonts): CSP портала запрещает Google Fonts.
   Вариативные — один файл на все начертания; кириллица и латиница отдельно,
   браузер качает только нужный набор. Лицензия SIL OFL — fonts/OFL-LICENSE.txt */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Палитра ----------
   Имена переменных прежние — на них завязаны все вкладки (и montage.css/goods.css),
   поэтому новые цвета расходятся по порталу сами. */
:root {
  --gray-25: #fcfcfd; --gray-50: #f9fafb; --gray-100: #f2f4f7; --gray-200: #e4e7ec; --gray-300: #d0d5dd;
  --gray-400: #98a2b3; --gray-500: #667085; --gray-600: #475467; --gray-700: #344054; --gray-800: #1d2939; --gray-900: #101828;

  --bg: var(--gray-50);
  --panel: #ffffff;
  --panel-2: var(--gray-100);
  --text: var(--gray-800);
  --muted: var(--gray-500);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  --brand: #465fff;
  --brand-600: #3641f5;
  --brand-ink: #ffffff;
  --brand-soft: #ecf3ff;
  --brand-ring: rgba(70, 95, 255, .14);

  --danger: #d92d20;
  --ok: #039855;
  --warn: #dc6803;

  --sh-xs: 0 1px 2px 0 rgba(16, 24, 40, .05);
  --sh-sm: 0 1px 3px 0 rgba(16, 24, 40, .10), 0 1px 2px 0 rgba(16, 24, 40, .06);
  --sh-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --sh-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
  --sh-xl: 0 20px 24px -4px rgba(16, 24, 40, .10), 0 8px 8px -4px rgba(16, 24, 40, .04);
  --shadow: var(--sh-xs);
  --radius: 12px;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Типографика ----------
   Главное для таблиц — цифры одной ширины (tabular-nums): суммы в столбик
   встают ровно друг под другом, а не «пляшут» построчно. */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
  letter-spacing: -0.006em;
}
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
table, input, select, .stat .v, .badge, .chip, .dl-sum, .pl-sum {
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, .page-head h2, .card h3, .modal h3, .login-card h1, .brand .name, .stat .v, .mobile-bar .title {
  font-family: var(--font-head); letter-spacing: -0.015em;
}
.page-head h2 { font-size: 22px; font-weight: 700; color: var(--gray-900); }
.page-head .sub { color: var(--muted); margin-top: 2px; }
.card h3, .modal h3 { font-weight: 700; color: var(--gray-900); }
::selection { background: var(--brand-soft); color: var(--gray-900); }

/* ---------- Кнопки ---------- */
button, .btn {
  border-radius: 8px; font-weight: 500;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, filter .15s;
}
/* Лёгкая тень — только у обычных кнопок; у иконок в таблицах (удалить, ручки) её быть не должно */
button:not([class]), .btn, .btn-ghost, .btn-danger, .btn-block { box-shadow: var(--sh-xs); }
/* Затемнение, а не осветление: у кнопок с цветом прямо в разметке (зелёная «Товар»,
   оранжевая «Услуга») нет своего hover — фильтр работает для любой. */
button:hover, .btn:hover { filter: brightness(.94); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-ring); }
.btn-ghost {
  background: var(--panel); color: var(--gray-700); border-color: var(--border-strong);
}
.btn-ghost:hover { filter: none; background: var(--gray-50); color: var(--gray-800); }
.btn-danger { background: var(--danger); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
button:disabled, button:disabled:hover { filter: none; }
/* Синие «＋ Группа» / «＋ Добавить поставщика» покрашены прежним фирменным цветом прямо
   в разметке products.js — подменяем здесь, чтобы не трогать сам products.js */
.pc-btn-new[style*="#2563eb"] { background: var(--brand) !important; }

/* ---------- Поля ввода ---------- */
label { font-weight: 500; color: var(--gray-700); }
input[type=text], input[type=password], input[type=number], select, textarea {
  border-color: var(--border-strong); border-radius: 8px; box-shadow: var(--sh-xs);
  transition: border-color .15s, box-shadow .15s;
}
/* Эти типы app.css не оформлял вовсе — поиск в «Товарах» выглядел системным полем.
   Ширину не трогаем: они стоят в тулбарах со своими размерами. */
input[type=search], input[type=email], input[type=tel], input[type=url], input[type=date],
input[type=datetime-local], input[type=month], input[type=time] {
  padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--panel); color: var(--text); font-size: 14px; outline: none; box-shadow: var(--sh-xs);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }
input:focus, select:focus, textarea:focus {
  border-color: #9cb9ff; box-shadow: 0 0 0 4px var(--brand-ring);
}
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }

/* ---------- Оболочка ---------- */
.sidebar { border-right-color: var(--border); }
.brand .name { font-weight: 800; font-size: 17px; color: var(--gray-900); }
.nav a {
  padding: 9px 12px; border-radius: 8px; font-weight: 500; color: var(--gray-700);
  transition: background-color .15s, color .15s;
}
.nav a:hover { background: var(--gray-100); color: var(--gray-900); }
.nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-group-title { font-size: 11px; font-weight: 600; color: var(--gray-400); letter-spacing: .06em; }
.userbox .u-name { font-weight: 600; color: var(--gray-900); }
.userbox .u-role { color: var(--muted); }
.nav-toggle, .mobile-bar .burger { box-shadow: none; }
.nav-toggle:hover { filter: none; background: var(--gray-100); color: var(--gray-800); }
.mobile-bar .title { font-weight: 700; }

/* Линейные иконки разделов (js/icons.js) */
.svg-ic { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.nav a .ic, .nav-group-title .ic { display: inline-flex; align-items: center; justify-content: center; }
.nav a .ic { color: var(--gray-500); transition: color .15s; }
.nav a.nav-sub .svg-ic { width: 18px; height: 18px; }
.nav a:hover .ic { color: var(--gray-700); }
.nav a.active .ic { color: var(--brand); }
.nav-group-title .ic { color: var(--gray-400); }
.nav-toggle .svg-ic, .mobile-bar .burger .svg-ic { width: 18px; height: 18px; }
.nav-toggle, .mobile-bar .burger { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 860px) { .nav-toggle { display: none; } }   /* на телефоне сворачивать нечего — как в app.css */
.shell.nav-collapsed .nav a .svg-ic, .shell.nav-collapsed .nav-group-title .svg-ic { width: 20px; height: 20px; }

/* Плитки разделов на главной */
.dash-ic {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 24px;
}
.dash-ic .svg-ic { width: 24px; height: 24px; }
.dash-tile { transition: border-color .15s, box-shadow .15s; }
.dash-tile:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); }
.dash-tile .v { margin-top: 14px !important; }

/* ---------- Карточки, плитки ---------- */
.card, .stat { border-color: var(--border); box-shadow: var(--sh-xs); }
.stat .v { font-weight: 700; color: var(--gray-900); }
.stat .l { color: var(--muted); }
.login-card { border-radius: 16px; box-shadow: var(--sh-lg); border-color: var(--border); }
.login-card h1 { font-weight: 800; color: var(--gray-900); }

/* ---------- Таблицы ---------- */
th { color: var(--muted); font-size: 11.5px; font-weight: 600; }
/* Разрядка нужна только заголовкам капсом; у списка товаров они обычным регистром */
.pc-tbl th { letter-spacing: 0; }
td { border-bottom-color: var(--gray-100); }
th { border-bottom-color: var(--border); }

/* ---------- Подвкладки ---------- */
.subtabs { border-bottom-color: var(--border); gap: 2px; }
.subtab { font-weight: 500; color: var(--muted); box-shadow: none; transition: color .15s, border-color .15s; }
.subtab:hover { color: var(--gray-800); }
.subtab.active { color: var(--brand); font-weight: 600; }

/* ---------- Бейджи и чипсы ---------- */
.badge { font-weight: 500; padding: 2px 10px; }
.badge-ok { background: #d1fadf; color: #05603a; }
.badge-off { background: var(--gray-100); color: var(--gray-700); }
.badge-admin { background: #fef0c7; color: #93370d; }
.chip { background: #dde9ff; color: var(--brand-600); font-weight: 500; }

/* ---------- Модальные окна ---------- */
.modal-back { background: rgba(16, 24, 40, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { border-radius: 16px; box-shadow: var(--sh-xl); border: 1px solid var(--border); }
.rule-row { border-color: var(--border); background: var(--gray-50); border-radius: 12px; }

/* ---------- Мелочи ---------- */
.switch span { background: var(--gray-200); }
.empty { color: var(--gray-500); }
.error-msg { color: var(--danger); }
.ok-msg { color: var(--ok); }