/* ============================================================
   vz-adopt.css — СЛОЙ-МОСТ (adoption layer)
   Применяет визуал из demo/styleguide (волны 500+1000) к УЖЕ
   существующей разметке портала (ds-*, .card, .stat-card и т.д.).
   Загружается ПОСЛЕДНИМ — побеждает в конфликтах.
   Только цвет/фон/тень/радиус/анимация/типошкала — без изменения
   display/grid/flex/position, чтобы не ломать раскладку и логику.
   ============================================================ */

/* — глобальная плавность интерактива — */
.ds-btn, .btn,
.card, .ds-card, .chart-wrap,
.kpi, .metric, .stat-card, .ds-stat-card,
.ds-input, .ds-select, .ds-nav-link, .pill, .tag, .ds-badge,
.ds-table-wrap {
  transition:
    transform var(--vz-dur-fast, 140ms) var(--vz-ease-out, cubic-bezier(.16,1,.3,1)),
    box-shadow var(--vz-dur-normal, 240ms) var(--vz-ease-out, cubic-bezier(.16,1,.3,1)),
    border-color var(--vz-dur-normal, 240ms) ease,
    background-color var(--vz-dur-normal, 240ms) ease;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* — амбиентный фон портала (глубина без шума) — */
.ds-main {
  background:
    radial-gradient(1200px 420px at 78% -8%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 360px at 8% 0%, rgba(34,211,238,.06), transparent 55%);
  background-attachment: fixed;
}

/* — каркас: чуть больше глубины у сайдбара и топбара — */
.ds-sidebar {
  background:
    linear-gradient(180deg, rgba(59,130,246,.06), transparent 220px),
    var(--card, #181b22);
  border-right: 1px solid var(--border, #272b35);
}
.ds-topbar {
  background: linear-gradient(180deg, rgba(24,27,34,.92), rgba(24,27,34,.72));
  border-bottom: 1px solid var(--border, #272b35);
}

/* — активный пункт навигации: акцентная подсветка слева — */
.ds-nav-link.is-active {
  background: linear-gradient(90deg, rgba(59,130,246,.16), rgba(59,130,246,.04));
  box-shadow: inset 3px 0 0 var(--accent, #3b82f6);
}
.ds-nav-link:hover { background: rgba(59,130,246,.08); }

/* — карточки и контейнеры: surface + акцентный кант + подъём — */
.card, .ds-card, .chart-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    var(--card, #181b22);
  border: 1px solid var(--border, #272b35);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.card:hover, .ds-card:hover, .chart-wrap:hover {
  border-color: rgba(96,165,250,.30);
  box-shadow: 0 18px 46px rgba(0,0,0,.30);
}

/* — KPI / stat-card: акцентная полоса сверху, свечение, крупное число — */
.kpi, .metric, .stat-card, .ds-stat-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 150px at 100% -40%, rgba(59,130,246,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent),
    var(--card, #181b22);
  border: 1px solid var(--border, #272b35);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
}
.kpi::before, .metric::before, .stat-card::before, .ds-stat-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent, #3b82f6), #22d3ee);
  opacity: .9;
}
.kpi:hover, .metric:hover, .stat-card:hover, .ds-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.32);
  box-shadow: 0 20px 52px rgba(0,0,0,.34);
}
.ds-stat-value {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* — кнопки: главная градиентом + акцентная тень + подъём/нажатие — */
.ds-btn-primary, .btn-primary {
  background: linear-gradient(180deg, #4f8cf7, var(--accent-700, #2563eb));
  border-color: var(--accent-700, #2563eb);
  box-shadow: 0 8px 20px rgba(37,99,235,.30);
}
.ds-btn-primary:hover, .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(37,99,235,.40);
}
.ds-btn, .btn { border-radius: var(--r-md, 10px); }
.ds-btn:active, .btn:active { transform: translateY(0) scale(.985); }

/* — поля ввода: фокус-ринг свечением — */
.ds-input:focus, .ds-select:focus, textarea:focus, .ds-field:focus-within {
  border-color: var(--accent, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.28);
  outline: none;
}

/* — таблицы: округлённый контейнер, глубже шапка — */
.ds-table-wrap {
  border: 1px solid var(--border, #272b35);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.ds-table thead th {
  background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(255,255,255,.02));
  border-bottom: 1px solid var(--border, #272b35);
  position: sticky; top: 0; z-index: 1;
}
.ds-table tbody tr:hover td { background: rgba(59,130,246,.07); }

/* — пилюли / теги / бейджи: pill-радиус + мягкий фон — */
.pill, .tag, .ds-badge {
  border-radius: var(--r-pill, 999px);
}

/* — прогресс-бары НЕ трогаем: у них своя семантика цветов (low/mid/high) — */

/* — заголовок страницы: крупнее, акцентная подложка — */
.ds-main h1 {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin-bottom: var(--sp-4, 16px);
}

/* — пустые состояния: мягче — */
.ds-empty {
  background:
    radial-gradient(500px 180px at 50% -20%, rgba(59,130,246,.10), transparent 60%),
    var(--card, #181b22);
  border: 1px dashed rgba(96,165,250,.30);
  border-radius: var(--r-lg, 14px);
}

/* — видимый фокус для клавиатуры везде — */
:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}