/* ============================================================
   Silent Listener — единый дизайн-код (base.css)
   Источник правды для всех экранов. Подключать в каждый макет.
   Стиль: Light Glassmorphism · Data-Dense Dashboard · Linear/Vercel
   ============================================================ */

:root {
  /* Текст / нейтральные */
  --ink:   #0f172a;   /* основной текст, заголовки */
  --sub:   #64748b;   /* вторичный текст */
  --faint: #94a3b8;   /* подписи, плейсхолдеры */
  --line:  #e2e8f0;   /* бордеры, разделители */

  /* Акцент */
  --accent: #2563eb;  /* основной (кнопки, активная навигация, данные) */

  /* Семантика исходов (НЕ менять — привязана к продукту) */
  --success: #10b981; /* Успех        — emerald */
  --pending: #f59e0b; /* Зависший     — amber   */
  --lost:    #f43f5e; /* Потеря       — rose    */
  --neutral: #94a3b8; /* Нейтрально   — slate   */

  /* Радиусы */
  --r-sm: 10px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
}

body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); }

/* --- Фон: светлый mesh, чтобы стекло читалось --- */
.mesh {
  background-color: #eef2f8;
  background-image:
    radial-gradient(at 8% 6%,   rgba(37,99,235,0.12) 0px, transparent 42%),
    radial-gradient(at 92% 0%,  rgba(139,92,246,0.10) 0px, transparent 40%),
    radial-gradient(at 76% 96%, rgba(16,185,129,0.08) 0px, transparent 45%),
    radial-gradient(at 30% 100%,rgba(244,114,182,0.06) 0px, transparent 40%);
  background-attachment: fixed;
}

/* --- Стекло (основные карточки) --- */
.glass {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 8px 30px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  border-radius: var(--r-lg);
}
/* --- Стекло мягкое (вложенные блоки, чипы, поля) --- */
.glass-soft {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--r-md);
}

/* --- Скроллбар --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.25); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Сайдбар (сворачиваемый в иконки) --- */
#sidebar { transition: width .22s ease; }
#sidebar.collapsed { width: 76px; }
#sidebar.collapsed .lbl,
#sidebar.collapsed .sec,
#sidebar.collapsed .brand-t { display: none; }
#sidebar.collapsed nav a { justify-content: center; }
#sidebar.collapsed .brand { justify-content: center; }
.navlink { transition: background .15s, color .15s; }

/* --- Появление: лёгкий fade БЕЗ сдвига (дашборд не должен «плыть») --- */
.reveal { opacity: 0; transition: opacity .25s ease; }
.reveal.in { opacity: 1; }

/* --- Подъём карточки при наведении --- */
.lift { transition: transform .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(15,23,42,0.11), inset 0 1px 0 rgba(255,255,255,0.9); }

/* --- Графики --- */
.seg { transition: stroke-width .15s ease, opacity .15s ease; cursor: pointer; }
.dot { transition: r .15s ease; cursor: pointer; }

/* --- Тултип (общий, управляется JS) --- */
#tt {
  position: fixed; pointer-events: none; opacity: 0; z-index: 60;
  transition: opacity .12s ease;
  background: var(--ink); color: #fff; font-size: 12px;
  padding: 6px 10px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); white-space: nowrap;
  transform: translate(-50%, -130%);
}

/* --- Иконки Material Symbols Rounded --- */
.material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}