/* ════════════════════════════════════════════════════════════════
   JIT Order Platform — Theme V2
   Версия: v3_6_3

   Загружается ПОСЛЕ theme_bridge.css как последний слой.
   Полностью совместим с Design Constructor:
   все цвета читаются из CSS-переменных, заданных theme_css_vars().
   Не меняет HTML-структуру, работает поверх существующих стилей.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. САЙДБАР ─────────────────────────────────────────────────

   Цели:
   - Flex-колонка → lang-switch/logout прилипают к низу
   - Активный пункт: акцентная полоска слева (var(--accent))
   - Плавный hover-переход
   - Иконки + метки в nav-ссылках
   - Кнопка сворачивания (collapsed state: 64px, только иконки)
   ──────────────────────────────────────────────────────────────── */

.sidebar {
  display: flex;
  flex-direction: column;
  transition: width 0.22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

/* Шапка сайдбара: бренд + кнопка сворачивания */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 22px;
  min-height: 44px;
}

.sidebar-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  min-width: 0;
  margin-bottom: 0; /* сбросить legacy margin-bottom: 36px */
}

/* Кнопка сворачивания */
.sidebar-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 5px;
  border-radius: 8px;
  color: var(--menu-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.13s ease, color 0.13s ease;
  opacity: 0.7;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--menu-text);
  opacity: 1;
}

.sidebar-toggle .toggle-arrow {
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
}

/* nav занимает всё свободное место */
.sidebar nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Nav-ссылки: иконка + метка */
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 12px;
  transition: background 0.13s ease, color 0.13s ease;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  text-decoration: none;
}

/* Иконка в nav */
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0.75;
  transition: opacity 0.13s ease;
  color: var(--menu-text);
}

/* SVG внутри .nav-icon — явный цвет и размер, независимо от currentColor */
.nav-icon svg {
  display: block;
  width: 17px;
  height: 17px;
  stroke: var(--menu-text);
  fill: none;
  overflow: visible;
  flex-shrink: 0;
}

.sidebar nav a:hover .nav-icon,
.sidebar nav a.v2-active .nav-icon {
  opacity: 1;
}

.sidebar nav a:hover .nav-icon svg,
.sidebar nav a.v2-active .nav-icon svg {
  stroke: var(--menu-active-text);
}

/* Метка — анимированная ширина при сворачивании */
.nav-label {
  overflow: hidden;
  transition: opacity 0.18s ease, max-width 0.22s cubic-bezier(.4,0,.2,1);
  max-width: 200px;
  white-space: nowrap;
}

/* Активный пункт меню: цветная полоска слева */
.sidebar nav a.v2-active {
  background: var(--menu-active-bg);
  color: var(--menu-active-text);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* lang-switch автоматически уходит вниз */
.sidebar nav .lang-switch {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sidebar nav .lang-switch a {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* Logout ссылка */
.sidebar nav a.nav-logout {
  font-size: 12px;
  color: var(--menu-muted);
  margin-top: 4px;
}

.sidebar nav a.nav-logout:hover {
  color: var(--menu-text);
}

/* ── 1b. COLLAPSED SIDEBAR ──────────────────────────────────────
   Сворачивается до 64px: только иконки, подсказки через title.
   ──────────────────────────────────────────────────────────────── */

.sidebar.is-collapsed {
  width: 64px;
  padding-left: 13px;
  padding-right: 13px;
}

/* В свёрнутом меню — только кнопка раскрытия в шапке */
.sidebar.is-collapsed .sidebar-header {
  justify-content: center;
  margin-bottom: 18px;
}

.sidebar.is-collapsed .brand {
  display: none;
}

/* Языковой переключатель полностью скрыт */
.sidebar.is-collapsed nav .lang-switch {
  display: none;
}

.sidebar.is-collapsed .nav-label {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
  margin: 0;
}

.sidebar.is-collapsed .sidebar-toggle .toggle-arrow {
  transform: rotate(180deg);
}

.sidebar.is-collapsed nav a {
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
  gap: 0;
}

.sidebar.is-collapsed nav a.v2-active {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Logout — отступ от nav-блока в свёрнутом виде */
.sidebar.is-collapsed nav a.nav-logout {
  margin-top: auto;
}

/* Сдвигаем .main при свёрнутом сайдбаре — используем sibling selector */
.sidebar.is-collapsed + .main,
.sidebar.is-collapsed + main {
  margin-left: 64px;
  transition: margin-left 0.22s cubic-bezier(.4,0,.2,1);
}

/* Плавный переход .main при разворачивании */
.main {
  transition: margin-left 0.22s cubic-bezier(.4,0,.2,1);
}

/* ── 2. КАСТОМНЫЕ SELECT ─────────────────────────────────────────

   Убираем родной вид macOS/Windows.
   SVG-стрелка через data-URI, цвет совпадает с --muted.
   ──────────────────────────────────────────────────────────────── */

select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2364748B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
  cursor: pointer;
  line-height: 1.4;
}

/* Убираем Firefox outline на select */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--text);
}

/* ── 3. ФОКУС ПОЛЕЙ ──────────────────────────────────────────────

   Единый стиль focus для input / select / textarea.
   Акцентная рамка + мягкое свечение.
   ──────────────────────────────────────────────────────────────── */

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.13);
}

/* ── 4. ТАБЛИЦЫ ──────────────────────────────────────────────────

   Thead: маленькие uppercase-заголовки цвета --muted
   Tbody: чуть больше padding, hover-подсветка строк
   Контейнер .table-wrap: overflow-x: auto → горизонтальный скролл
   внутри блока, а не на уровне всей страницы.
   ──────────────────────────────────────────────────────────────── */

/* Предотвращаем горизонтальный скролл страницы */
.main {
  overflow-x: hidden;
}

/* Прокручиваемый контейнер для таблиц */
.table-responsive,
.panel .table-container,
.panel > table,
.card > table,
.orders-page-v31 .panel,
.users-page .panel,
.factories-page .panel,
.action-logs-page .panel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 0;
}

thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--section-bg);
  white-space: normal;
}

tbody td {
  padding: 13px 12px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

tbody tr {
  transition: background 0.1s;
}

tbody tr:hover {
  background: var(--section-bg);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ── 5. СТАТУС-БЕЙДЖИ ────────────────────────────────────────────

   Pill-форма (уже есть border-radius: 999px).
   Чуть компактнее, жирнее текст, без лишнего отступа.
   ──────────────────────────────────────────────────────────────── */

.status,
.readonly-status,
.entity-status-v90 {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

/* ── 6. КАРТОЧКИ И ПАНЕЛИ ────────────────────────────────────────

   Тонкая тень для глубины, border остаётся как есть (var --line).
   ──────────────────────────────────────────────────────────────── */

.panel,
.card,
.entity-card,
.settings-card,
.settings-row-card,
.form-block,
.design-group,
.filters-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ── 7. КАТАЛОГ ──────────────────────────────────────────────────

   Карточки товаров: hover-подъём + лёгкая тень.
   Используем will-change для GPU-ускорения и лёгкую тень,
   чтобы не было задержки/лагов при наведении.
   ──────────────────────────────────────────────────────────────── */

/* v3.8.67: подъём карточки при наведении ВОЗВРАЩЁН (нравится пользователю), но
   теперь ПЛАВНЫЙ. Раньше он был рывком, т.к. transition в catalog_v2/factories_v2
   перекрывал этот и выбивал `transform` из анимируемых — поэтому в тех файлах
   transform добавлен в список (см. v3.8.67). «Прыжок при загрузке» был НЕ от hover,
   а от сплющивания фото из кэша — пофикшено в catalog.css (position:absolute). */
.jit-product-card {
  transition: transform 0.16s cubic-bezier(.4,0,.2,1),
              box-shadow 0.16s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  backface-visibility: hidden;
}

.jit-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* ── 8. КНОПКИ ───────────────────────────────────────────────────

   Переход для всех кнопок. Чуть уменьшенный letter-spacing.
   ──────────────────────────────────────────────────────────────── */

.button,
button.primary,
.icon-action {
  transition: opacity 0.14s ease, background 0.14s ease;
}

.button:hover,
button:hover {
  opacity: 0.88;
}

/* v3_7_0: Все кнопки сайта — единый шрифт/вес/spacing.
   Исключаем разницу между .button, .button.primary, .primary-mini, button. */
.button,
button.primary,
.button.primary,
.bulk-apply,
.bulk-cancel {
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.1px;
  font-size: 12px;
  font-family: inherit;
  min-height: 32px; /* v3.8.56: 38→32 — .button был переростком (остальные CTA ~32px) */
  line-height: 1.2;
}

/* Внутри форм — особенно важно: одинаковая высота/padding */
.form-actions .button,
.sticky-actions .button {
  padding: 9px 18px;
}

/* ── 9. FLASH-СООБЩЕНИЯ ──────────────────────────────────────────

   Чуть меньший radius для согласованности с radius: 10px.
   ──────────────────────────────────────────────────────────────── */

.flash {
  border-radius: 8px;
}

/* ── 10. CONFIRM-ДИАЛОГ ──────────────────────────────────────────

   Обновлённый стиль модального окна подтверждения.
   ──────────────────────────────────────────────────────────────── */

.jit-confirm-dialog {
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

/* ── 12. ORDER VIEW — SECTION HEADERS ───────────────────────────

   Заголовки секций в просмотре заказа: uppercase + muted цвет.
   ──────────────────────────────────────────────────────────────── */

.order-section > h3,
.order-section > .section-title,
.order-section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ── 13. GRID/LABEL В ПРОСМОТРЕ ЗАКАЗА ──────────────────────────

   dt (label): muted + uppercase; dd (value): нормальный текст.
   ──────────────────────────────────────────────────────────────── */

.order-view dt,
.order-view-v87 dt,
dl.order-fields dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── 14. RESPONSIVE: скрыть overflow на мобильном ───────────────── */

@media (max-width: 768px) {
  .sidebar nav {
    overflow-y: auto;
  }
}

/* ── 15. SETTINGS PAGE V3 ────────────────────────────────────────
   Новый дизайн страницы настроек: icon-карточки в сетке.
   ──────────────────────────────────────────────────────────────── */

.settings-v3-page {
  /* v3.8.47: хаб настроек — на всю ширину, как остальной сайт; +24px инсет, чтобы
     крошки/контент начинались на том же x (59), что и панели с padding 24. */
  max-width: none;
  padding: 0 24px;
}

.settings-v3-group {
  margin-bottom: 28px;
}

.settings-v3-group-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.settings-v3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

/* Базовая карточка */
.settings-v3-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.14s ease, transform 0.14s ease, border-color 0.14s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.settings-v3-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
  transform: translateY(-1px);
  border-color: var(--accent);
  text-decoration: none;
  color: var(--text);
}

/* Иконка карточки */
.settings-v3-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: var(--section-bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
  transition: background 0.14s ease;
}

.settings-v3-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  fill: none;
}

.settings-v3-card:hover .settings-v3-icon {
  background: var(--section-bg);
}

/* Текст карточки */
.settings-v3-text {
  flex: 1;
  min-width: 0;
}

.settings-v3-text h3 {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.settings-v3-text p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Стрелка */
.settings-v3-arrow {
  margin-left: auto;
  padding-left: 8px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.13s ease, transform 0.13s ease;
}

.settings-v3-card:hover .settings-v3-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* ── 17. DASHBOARD (Главная) ─────────────────────────────────────
   Виджеты главной страницы: метрики, статусы, последние заказы.
   Работает для всех ролей (clients/factory/admin) — данные
   фильтруются на сервере по правам.
   ──────────────────────────────────────────────────────────────── */

.dashboard-v3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Ряд метрик */
.dashboard-v3-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.dash-metric-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  will-change: transform;
}

.dash-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.dash-metric-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.dash-metric-value {
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}

/* Distribution: разбивка заказов по статусам */
.dash-status-bar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.dash-status-bar h2 {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 12px;
}

.dash-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Двухколоночный нижний ряд: Recent orders + Factories */
.dash-bottom-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

@media (max-width: 980px) {
  .dash-bottom-row {
    grid-template-columns: 1fr;
  }
}

.dash-recent-orders,
.dash-side-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dash-card-head h2 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.dash-card-head a {
  font-size: 12px;
  color: var(--accent);
}

.dash-recent-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dash-recent-row {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr minmax(90px, auto);
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  font-size: 12px;
}

.dash-recent-row:last-child {
  border-bottom: none;
}

.dash-recent-row:hover {
  background: var(--section-bg);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 8px;
}

.dash-recent-num {
  font-weight: 500;
}

.dash-recent-info {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-recent-status {
  text-align: right;
  font-size: 11px;
}

.dash-recent-status .status {
  font-size: 10px;
  padding: 3px 8px;
}

.dash-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px 12px;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════
   ── 19. LAYOUT MODE: TOP NAV (Workspace) ──────────────────────────
   Горизонтальное меню сверху. Включается через [data-layout="top"].
   Сайдбар превращается в полоску сверху, .main сдвигается вниз.
   ════════════════════════════════════════════════════════════════ */

body[data-layout="top"] .sidebar {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: 60px;
  flex-direction: row;
  align-items: center;
  padding: 0 22px;
  border-right: none;
  border-bottom: 1px solid var(--line);
  z-index: 50;
  overflow: visible;
  transition: none;
}

/* Шапка слева: бренд + toggle превращается в просто бренд */
body[data-layout="top"] .sidebar-header {
  margin: 0 22px 0 0;
  padding: 0;
  flex-shrink: 0;
  min-height: auto;
}

body[data-layout="top"] .sidebar-toggle {
  display: none;
}

/* Nav становится горизонтальным */
body[data-layout="top"] .sidebar nav {
  flex-direction: row;
  align-items: center;
  flex: 1;
  overflow: visible;
  gap: 4px;
}

body[data-layout="top"] .sidebar nav a {
  flex-direction: row;
  white-space: nowrap;
  padding: 7px 12px;
  font-size: 12px;
  gap: 7px;
}

body[data-layout="top"] .sidebar nav a.v2-active {
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 8px 8px 0 0;
}

/* lang-switch и logout — справа */
body[data-layout="top"] .sidebar nav .lang-switch {
  margin: 0 0 0 auto;
  padding: 0 8px;
  border: none;
  flex-direction: row;
  flex-wrap: nowrap;
}

body[data-layout="top"] .sidebar nav a.nav-logout {
  margin: 0;
  padding: 7px 12px;
}

body[data-layout="top"] .sidebar nav a.nav-logout .nav-label {
  display: none;
}

/* Контент сдвигается вниз */
body[data-layout="top"] .main {
  margin-left: 0;
  margin-top: 60px;
  padding-top: 6px;
}

/* В Top режиме collapse не имеет смысла */
body[data-layout="top"] .sidebar.is-collapsed {
  width: 100%;
  padding: 0 22px;
}
body[data-layout="top"] .sidebar.is-collapsed + .main {
  margin-left: 0;
}

/* v3_6_9: В Top-режиме топбар прижимается к верхней нав-полосе справа.
   Сайдбар (.sidebar) у нас 60px высоты в Top-режиме, topbar тоже 60px
   и совпадает по вертикали — выглядит как часть единого меню. */
body[data-layout="top"] .jit-topbar {
  top: 0;
  right: 22px;
  height: 60px;
  display: flex;
  align-items: center;
}

body[data-layout="top"] .jit-topbar-search,
body[data-layout="top"] .jit-topbar-link,
body[data-layout="top"] .jit-bell {
  padding: 6px 12px;
  font-size: 12px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--menu-muted);
}

body[data-layout="top"] .jit-topbar-search:hover,
body[data-layout="top"] .jit-topbar-link:hover,
body[data-layout="top"] .jit-bell:hover {
  background: var(--menu-active-bg);
  color: var(--menu-active-text);
  border-color: transparent;
}

body[data-layout="top"] .jit-topbar-search kbd {
  background: var(--menu-active-bg);
  color: var(--menu-muted);
}

body[data-layout="top"] .jit-bell-dropdown {
  top: 64px;
  right: 22px;
}

/* В Top режиме нужно зарезервировать справа место для топбара,
   чтобы nav-пункты не наезжали на него */
body[data-layout="top"] .sidebar nav {
  padding-right: 280px;
}

@media (max-width: 720px) {
  body[data-layout="top"] .sidebar nav {
    padding-right: 0;
  }
  body[data-layout="top"] .jit-topbar {
    position: static;
    height: auto;
    padding: 6px 12px;
    margin: 0;
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  body[data-layout="top"] .sidebar {
    height: auto;
    flex-wrap: wrap;
    padding: 8px 12px;
  }
  body[data-layout="top"] .main {
    margin-top: 96px;
  }
}

/* (Секции 20 SHOWROOM + 21 LAYOUT SELECTOR удалены — конструктор
   дизайна/лейаута снят в v3.7, data-layout заморожен на "top".) */

/* ════════════════════════════════════════════════════════════════
   ── 22. TOP ACTION BAR ────────────────────────────────────────────
   Плавающая панель справа сверху: поиск, уведомления, отчёты.
   ════════════════════════════════════════════════════════════════ */

.jit-topbar {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 60; /* v3_7_0: выше сайдбара (z-index:50) */
  display: flex;
  align-items: center;
  gap: 8px;
}

.jit-topbar-search,
.jit-topbar-link,
.jit-bell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.13s, background 0.13s, color 0.13s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.jit-topbar-search:hover,
.jit-topbar-link:hover,
.jit-bell:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.jit-topbar-search kbd {
  margin-left: 4px;
  padding: 1px 6px;
  background: var(--section-bg);
  border-radius: 8px;
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--muted);
  font-weight: 500;
}

.jit-bell {
  position: relative;
  padding: 7px 9px;
}

.jit-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

/* Hide на login-странице */
body .main-login ~ .jit-topbar,
.main-login + .jit-topbar { display: none; }

/* ── 23. BELL DROPDOWN ─────────────────────────────────────────── */

.jit-bell-dropdown {
  position: fixed;
  top: 56px;
  right: 18px;
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  z-index: 61; /* v3_7_0: выше топбара */
  display: none;
}

.jit-bell-dropdown.is-open {
  display: block;
}

.jit-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
}

.jit-bell-clear {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 6px;
  font-weight: 500;
}

.jit-bell-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition: background 0.1s;
}

.jit-bell-row:hover {
  background: var(--section-bg);
}

.jit-bell-row.is-unread {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.jit-bell-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.jit-bell-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.jit-bell-text b {
  font-size: 12px;
  font-weight: 500;
}

.jit-bell-text em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.jit-bell-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* ── 24. CMD+K OVERLAY ─────────────────────────────────────────── */

.jit-cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: jit-cmdk-in 0.16s ease;
}

@keyframes jit-cmdk-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.jit-cmdk-box {
  width: 100%;
  max-width: 620px;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  transform: translateY(0);
}

.jit-cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.jit-cmdk-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  outline: none;
  padding: 4px 0;
}

.jit-cmdk-esc {
  padding: 2px 8px;
  background: var(--section-bg);
  border-radius: 8px;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

.jit-cmdk-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px;
}

.jit-cmdk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
}

.jit-cmdk-row.is-selected,
.jit-cmdk-row:hover {
  background: var(--section-bg);
}

.jit-cmdk-row-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.jit-cmdk-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.jit-cmdk-row-text b {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jit-cmdk-row-text em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jit-cmdk-row-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  flex-shrink: 0;
}

.jit-cmdk-empty,
.jit-cmdk-hint {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.jit-cmdk-footer {
  display: flex;
  gap: 16px;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}

.jit-cmdk-footer kbd {
  padding: 1px 5px;
  background: var(--section-bg);
  border-radius: 8px;
  font-family: ui-monospace, monospace;
}

/* ── 25. TOAST ────────────────────────────────────────────────── */

.jit-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--panel);
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.jit-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 26. REPORTS PAGE ─────────────────────────────────────────── */

.reports-v3 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reports-v3-total {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
}

.reports-v3-total-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
}

.reports-v3-total-value {
  font-size: 38px;
  font-weight: 500;
  line-height: 1.1;
  margin-top: 6px;
}

.reports-v3-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 120px;
  padding-top: 16px;
}

.reports-v3-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  min-width: 0;
}

.reports-v3-bar-fill {
  width: 100%;
  background: var(--accent);
  border-radius: 8px 8px 0 0;
  min-height: 2px;
  transition: opacity 0.13s;
  margin-top: auto;
}

.reports-v3-bar-col:hover .reports-v3-bar-fill {
  opacity: 0.8;
}

.reports-v3-bar-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
}

.reports-v3-bar-cnt {
  font-size: 10px;
  font-weight: 500;
  color: var(--text);
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
}

.reports-v3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

/* v3_7_0: order-timeline-v368 удалён, реализация не пригодилась. */

/* ════════════════════════════════════════════════════════════════
   ── 28. BULK ACTIONS (выбор и массовые операции) ─────────────────
   ════════════════════════════════════════════════════════════════ */

.bulk-actions-bar {
  display: none;
  position: sticky;
  top: 70px;
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  align-items: center;
  gap: 12px;
}

.bulk-actions-bar.is-active {
  display: flex;
}

.bulk-count {
  font-size: 12px;
  color: var(--text);
}

.bulk-count b {
  color: var(--accent);
  font-weight: 500;
  margin-left: 4px;
}

.bulk-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
  margin: 0;
}

.bulk-form select,
.bulk-form button {
  margin: 0;
}

.bulk-action-select,
.bulk-status-select {
  padding: 6px 10px;
  font-size: 12px;
  min-width: 160px;
  width: auto;
}

.bulk-apply {
  padding: 7px 16px;
  min-height: 34px;
  font-size: 12px;
}

.bulk-cancel {
  padding: 7px 12px;
  font-size: 12px;
  background: transparent;
}

.bulk-th,
.bulk-td {
  width: 32px;
  padding-right: 4px;
}

.bulk-checkbox {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--accent);
}

tr.is-bulk-selected {
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

/* v3_7_0: Photo annotations удалены — функция не пригодилась. */