/* ═══ ДИЗАЙН-ТОКЕНЫ ZBH (П7) ══════════════════════════════════════════════
   Единый источник: цвет текста, радиусы, тени, шрифт, easing.
   Слой подключён на всех 14 страницах — модули берут переменные отсюда. */
:root {
  --zbh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --ink:        #1a2233;   /* основной текст — «дорогой» графит, не #000 */
  --ink-soft:   #475569;
  --ink-dim:    #94a3b8;
  --radius-s:   8px;
  --radius-m:   12px;
  --radius-l:   16px;
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out:    cubic-bezier(.22,.8,.36,1);
}

/* ════════════════════════════════════════════════════════════════════
   ZBH POLISH — единый слой «лёгкого, свежего» UI для всей ERP
   Подключается последним во всех модулях. Только дополняет, ничего не ломает:
   селекторы по типам элементов и по подстроке класса работают везде.
   ──────────────────────────────────────────────────────────────────── */

/* ── Чёткие, аккуратные шрифты (антиалиасинг) ───────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { font-feature-settings: "kern" 1, "liga" 1; }
h1, h2, h3, .title, [class*="title"] { letter-spacing: -0.011em; }

/* ── Плавность переходов на интерактиве (по типам — работает во всех модулях) ── */
a, button, input, select, textarea, label,
.btn, [class*="btn-"], [class*="-btn"], [class*="chip"],
.card, [class*="card"], .tab, [class*="tab"], [class*="nav"] {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .22s cubic-bezier(.4,0,.2,1), transform .15s cubic-bezier(.4,0,.2,1),
              filter .18s ease, opacity .18s ease;
}

/* ── Мягкие тени и подъём у карточек (только тень — без сдвига, чтобы не дёргать большие блоки) ── */
.card:hover, [class*="card"]:hover {
  box-shadow: 0 10px 28px -10px rgba(30, 41, 59, .20),
              0 3px 8px -3px rgba(30, 41, 59, .08);
}

/* ── Кнопки: лёгкий подъём + тень-подсветка ─────────────────────────── */
button:hover, .btn:hover, [class*="btn-"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px -5px rgba(30, 41, 59, .26);
}
button:active, .btn:active, [class*="btn-"]:active { transform: translateY(0); }
button:disabled, .btn:disabled { transform: none !important; box-shadow: none !important; }

/* ── Цветные подсветки у акцентных кнопок ───────────────────────────── */
.btn-primary:hover, [class*="primary"]:hover {
  box-shadow: 0 7px 20px -5px rgba(59, 130, 246, .50);
}
[class*="success"]:hover, [class*="green"]:hover {
  box-shadow: 0 7px 20px -5px rgba(34, 197, 94, .45);
}
[class*="danger"]:hover, [class*="del"]:hover, [class*="red"]:hover {
  box-shadow: 0 7px 20px -5px rgba(239, 68, 68, .42);
}

/* ── Аккуратный фокус на полях ввода ────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .22);
}

/* ── Строки таблиц — мягкая подсветка при наведении ─────────────────── */
tbody tr { transition: background-color .14s ease, box-shadow .14s ease; }

/* ── Плавное появление модалок/оверлеев, где используется класс open ──── */
.modal, [class*="overlay"], [class*="lightbox"] { transition: opacity .2s ease; }

/* ── Тонкие современные скроллбары ──────────────────────────────────── */
* { scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .32);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .55); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ════════════════════════════════════════════════════════════════════
   ПАСТЕЛЬНЫЕ ФОНЫ ОТДЕЛОВ — еле заметные, у каждого модуля свой оттенок
   ──────────────────────────────────────────────────────────────────── */
body[data-zbh="planner"]     { background: #f6f9ff; }
body[data-zbh="varka"]       { background: #fff8f2; }
body[data-zbh="supply"]      { background: #f3fbf8; }
body[data-zbh="warehouse"]   { background: #fffaf2; }
body[data-zbh="analytics"]   { background: #f6f6fe; }
body[data-zbh="quality"]     { background: #faf6fe; }
body[data-zbh="personnel"]   { background: #f2fbfd; }
body[data-zbh="maintenance"] { background: #f5f8fd; }
body[data-zbh="education"]   { background: #f4fcf6; }
body[data-zbh="tickets"]     { background: #fef6f8; }
body[data-zbh="business"]    { background: #0a0f1a; }  /* тёмный модуль */


/* ════════════════════════════════════════════════════════════════════
   ЛИПКИЕ ШАПКИ ТАБЛИЦ — базовое правило (position/фон) живёт в zbh3d.css.
   Здесь только тёмная тема Логова Админа: непрозрачный фон под цвет панелей,
   иначе при скролле строки просвечивают сквозь светлую шапку.
   ──────────────────────────────────────────────────────────────────── */
body[data-zbh="admin"] thead th {
  background: var(--bg2, #fff) !important;
}


/* ═══ П6 (дизайн-пакет 27.07.2026) ═══════════════════════════════════════ */

/* Кольцо фокуса — ни одного :focus-visible в проекте не было */
button:focus-visible, .btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb, 59, 130, 246), .9);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Единый системный шрифт вместо зоопарка (Rubik/Inter/Segoe по модулям) */
body[data-zbh] {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* Пастельные фоны отделов — route и ohrana выпадали из ряда */
body[data-zbh="route"]  { background: #111318; }  /* тёмный модуль */
body[data-zbh="ohrana"] { background: #fff8f3; }
body[data-zbh="chat"]   { background: #fff7f1; }

/* --accent-rgb: свечение инпутов/фокуса в ЦВЕТ отдела (zbh3d ждёт RGB) */
body[data-zbh="varka"]       { --accent-rgb: 234, 88, 12; }
body[data-zbh="ohrana"]      { --accent-rgb: 234, 88, 12; }
body[data-zbh="supply"]      { --accent-rgb: 2, 132, 199; }
body[data-zbh="warehouse"]   { --accent-rgb: 217, 119, 6; }
body[data-zbh="analytics"]   { --accent-rgb: 79, 142, 247; }
body[data-zbh="quality"]     { --accent-rgb: 79, 142, 247; }
body[data-zbh="personnel"]   { --accent-rgb: 8, 145, 178; }
body[data-zbh="maintenance"] { --accent-rgb: 71, 105, 148; }
body[data-zbh="education"]   { --accent-rgb: 22, 163, 74; }
body[data-zbh="tickets"]     { --accent-rgb: 219, 39, 119; }
body[data-zbh="business"]    { --accent-rgb: 202, 138, 4; }
body[data-zbh="route"]       { --accent-rgb: 202, 138, 4; }
body[data-zbh="chat"]        { --accent-rgb: 232, 114, 12; }


/* ═══ П7: унификация кнопок ═══════════════════════════════════════════════
   В модулях три разных .btn (радиусы 6/7/9, разные transition). Селектор
   body[data-zbh] .btn специфичнее модульного .btn — выравнивает геометрию
   и отклик, не трогая цвета и паддинги модуля. */
body[data-zbh] .btn, body[data-zbh] button.btn {
  border-radius: 10px;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out),
              border-color .18s var(--ease-out), box-shadow .18s var(--ease-out),
              transform .18s var(--ease-spring), filter .18s var(--ease-out);
}
body[data-zbh] .btn:hover  { transform: translateY(-1px); }
body[data-zbh] .btn:active { transform: translateY(0) scale(.97); }

/* ═══ П7: планшетный слой для модулей без @media ══════════════════════════ */
@media (max-width: 1024px) {
  body[data-zbh] .toolbar, body[data-zbh] .sku-toolbar,
  body[data-zbh] .cal-toolbar, body[data-zbh] .sp-toolbar,
  body[data-zbh] .head, body[data-zbh] .topbar {
    flex-wrap: wrap; row-gap: 8px;
  }
  body[data-zbh] table { font-size: 0.7812rem; }
}
@media (max-width: 768px) {
  body[data-zbh] .wrap, body[data-zbh] .container, body[data-zbh] .content {
    padding-left: 12px; padding-right: 12px;
  }
}


/* ═══ П8 (дизайн-пакет 28.07.2026) ═══════════════════════════════════════ */

/* П8.1: кастомные select — убираем нативную ОС-стрелку во всех модулях */
body[data-zbh] select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  padding-right: 30px !important;
}
body[data-zbh] select:not([multiple]):not([size]):hover { filter: brightness(1.02); }

/* П8.3: чекбоксы и радио — в акцентный цвет отдела */
body[data-zbh] input[type="checkbox"],
body[data-zbh] input[type="radio"] {
  accent-color: rgb(var(--accent-rgb, 59, 130, 246));
}

/* П8.6: input[type=date] — аккуратная иконка календаря */
body[data-zbh] input[type="date"]::-webkit-calendar-picker-indicator,
body[data-zbh] input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s ease;
}
body[data-zbh] input[type="date"]:hover::-webkit-calendar-picker-indicator,
body[data-zbh] input[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: .95; }

/* П8.5: единый скелетон-шиммер (вместо текста «Загрузка…») */
.zbh-skel {
  position: relative;
  overflow: hidden;
  display: block;
  background: rgba(148,163,184,.16);
  border-radius: 8px;
  min-height: 13px;
  color: transparent !important;
}
.zbh-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: zbhShimmer 1.15s infinite;
}
@keyframes zbhShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* П8.7: пустые состояния — иконка и воздух вместо голого серого текста */
.empty::before, .cal-empty::before {
  content: '🗂️';
  display: block;
  font-size: 1.875rem;
  line-height: 1;
  margin: 0 auto 9px;
  opacity: .55;
  filter: grayscale(.25) drop-shadow(0 4px 8px rgba(26,34,51,.12));
  font-style: normal;
}
.empty, .cal-empty { text-align: center; padding-top: 18px !important; padding-bottom: 18px !important; }
.empty:empty::before, .cal-empty:empty::before { content: none; }
.zbh-skel::before { content: none !important; }
td.empty:has(.zbh-skel)::before, .cal-empty:has(.zbh-skel)::before { content: none; }


/* ═══ П9 (дизайн-пакет 28.07.2026, часть 2) ══════════════════════════════ */

/* П9.1: тёмные модули (Бизнес-блок, Маршрут) — общий тёмный контекст,
   чтобы читались как «братья», а не как исключения */
body[data-zbh="business"] thead th,
body[data-zbh="route"] thead th {
  background: #1b2436 !important;
  color: #cbd5e1;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08) !important;
}
body[data-zbh="business"] td,
body[data-zbh="route"] td {
  border-top-color: rgba(255,255,255,.06);
}
body[data-zbh="business"] select:not([multiple]):not([size]),
body[data-zbh="route"] select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body[data-zbh="business"] .zbh-skel,
body[data-zbh="route"] .zbh-skel {
  background: rgba(148,163,184,.13);
}
body[data-zbh="business"] .zbh-skel::after,
body[data-zbh="route"] .zbh-skel::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
}
body[data-zbh="business"] .empty, body[data-zbh="business"] .cal-empty,
body[data-zbh="route"] .empty, body[data-zbh="route"] .cal-empty {
  color: #64748b !important;
}

/* П9.3: KPI-карточки тёмных модулей — zbh3d красит .kpi-card в белый !important,
   из-за чего светлые цифры (var(--text)) на них не видны. Возвращаем тёмный фон. */
body[data-zbh="business"] .kpi-card, body[data-zbh="business"] .kpi,
body[data-zbh="business"] .stat-card, body[data-zbh="business"] .sum-card,
body[data-zbh="route"] .kpi-card, body[data-zbh="route"] .kpi,
body[data-zbh="route"] .stat-card, body[data-zbh="route"] .sum-card {
  background: var(--surf, #141b2b) !important;
  border-color: rgba(255,255,255,.09) !important;
}
body[data-zbh="business"] .kpi-card::after, body[data-zbh="route"] .kpi-card::after {
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}

body[data-zbh="business"] tbody tr:hover td,
body[data-zbh="route"] tbody tr:hover td {
  background: rgba(148,163,184,.07) !important;
}

/* П9.2: spring-открытие модальных окон (как у zbh-ui и чата).
   Только flex-центрированные оверлеи — модалки с transform-центрированием
   (education) не трогаем, у них transform занят позиционированием. */
.modal-overlay.open .modal,
.modal-overlay.open .modal-content,
.modal.open .modal-box {
  animation: zbhModalIn .26s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
}
@keyframes zbhModalIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}


/* ═══ П5 (аудит 05.08): видимый фокус для клавиатурной навигации ═══ */
:focus-visible{outline:2px solid var(--zbh-accent,#f28c28);outline-offset:2px;}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,
.tab:focus-visible,.card:focus-visible,.chan:focus-visible,.btn:focus-visible,
.sb-item:focus-visible,.icon-btn:focus-visible{
  outline:2px solid var(--zbh-accent,#f28c28);outline-offset:2px;border-radius:6px;
}