/* ═══════════════════════════════════════════════════════
   ZBH 3D THEME — единый стиль для всех модулей v1.0
   Подключается во всех sub-app index.html
   Не переопределяет акцентные цвета (у каждого модуля свои)
═══════════════════════════════════════════════════════ */

/* ─── ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ─── */
:root {
  --zbh-radius: 12px;
  --zbh-radius-sm: 8px;
  --zbh-shadow-sm:  0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --zbh-shadow:     0 2px 10px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --zbh-shadow-md:  0 4px 18px rgba(0,0,0,.1),  0 2px 6px rgba(0,0,0,.06);
  --zbh-shadow-lg:  0 8px 28px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.07);
  --zbh-transition: all .22s cubic-bezier(.34,1.56,.64,1);
  --zbh-transition-fast: all .15s ease;
}

/* ─── КАРТОЧКИ ─── */
.card {
  border-radius: var(--zbh-radius) !important;
  box-shadow: var(--zbh-shadow) !important;
  border: 1.5px solid rgba(0,0,0,.06) !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease !important;
  background: #fff !important;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--zbh-shadow-lg) !important;
}

/* KPI карточки */
.kpi, .kpi-card, .stat-card, .sum-card {
  border-radius: var(--zbh-radius) !important;
  box-shadow: var(--zbh-shadow) !important;
  border: 1.5px solid rgba(0,0,0,.06) !important;
  transition: var(--zbh-transition) !important;
  background: #fff !important;
  position: relative;
  overflow: hidden;
}
.kpi:hover, .kpi-card:hover, .stat-card:hover, .sum-card:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: var(--zbh-shadow-lg) !important;
}

/* Блик сверху на KPI */
.kpi::after, .kpi-card::after, .stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  pointer-events: none;
  border-radius: var(--zbh-radius) var(--zbh-radius) 0 0;
}

/* ─── ТАБЛИЦЫ ─── */
table {
  border-collapse: collapse;
  width: 100%;
}
thead th {
  background: rgba(0,0,0,.025) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  padding: 10px 14px;
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
}
tbody tr {
  transition: background .12s ease, box-shadow .12s ease;
}
tbody tr:hover td {
  background: rgba(59,130,246,.035) !important;
}
tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--accent, #3b82f6);
}
td {
  padding: 9px 14px;
  border-top: 1px solid rgba(0,0,0,.05);
  font-size: 12.5px;
}

/* ─── КНОПКИ ─── */
.btn, button.btn {
  border-radius: var(--zbh-radius-sm) !important;
  transition: var(--zbh-transition-fast) !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .12s;
}
.btn:hover::after { background: rgba(255,255,255,.12); }
.btn:active { transform: scale(.97) !important; }

.btn-primary, .btn-primary:not(:disabled) {
  box-shadow: 0 2px 8px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.15) !important;
}
.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.15) !important;
  transform: translateY(-1px) !important;
}

/* ─── НАВИГАЦИЯ (nav-item / nav-link) ─── */
.nav-item, .nav-link, .tab-btn {
  border-radius: var(--zbh-radius-sm) !important;
  transition: var(--zbh-transition-fast) !important;
}
.nav-item.active, .nav-item:global(.active) {
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}

/* ─── БЕЙДЖИ ─── */
.badge-green  { box-shadow: 0 0 0 1px rgba(22,163,74,.18) !important; }
.badge-red    { box-shadow: 0 0 0 1px rgba(220,38,38,.18) !important; }
.badge-yellow { box-shadow: 0 0 0 1px rgba(202,138,4,.18) !important; }
.badge-blue   { box-shadow: 0 0 0 1px rgba(59,130,246,.18) !important; }

/* ─── МОДАЛЬНЫЕ ОКНА ─── */
.modal, .modal-content {
  border-radius: var(--zbh-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.15) !important;
}

/* ─── ИНПУТЫ ─── */
input, select, textarea {
  border-radius: var(--zbh-radius-sm) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 59,130,246),.15) !important;
}

/* ─── ПРОГРЕСС-БАРЫ ─── */
.progress-bar, .progress-fill {
  border-radius: 99px !important;
  overflow: hidden;
}
.progress-fill {
  transition: width .4s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
}
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: rgba(255,255,255,.25);
  border-radius: 99px 99px 0 0;
}

/* ─── ТОПБАР МОДУЛЕЙ ─── */
.nav, .topbar, #wh-header, .header {
  box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
  backdrop-filter: blur(12px);
}

/* ─── СКРОЛЛ ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.3); }

/* ─── АНИМАЦИИ ПОЯВЛЕНИЯ ─── */
@keyframes zbhFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .kpi, .kpi-card, .stat-card {
  animation: zbhFadeUp .3s ease both;
}

/* ─── ПУСТЫЕ СОСТОЯНИЯ ─── */
.empty, [class*="empty"] {
  color: #94a3b8 !important;
  font-style: italic;
}

/* ─── СТРОКИ ТАБЛИЦЫ — 3D-эффект при наведении ─── */
tbody tr:hover {
  position: relative;
  z-index: 1;
}