/* ════════════════════════════════════════════════════════════════════════════
   LEVINDESK · GLASS AURORA  —  инъекционный редизайн (id="levindesk-redesign")
   ----------------------------------------------------------------------------
   Кардинально другой визуальный язык: матовое стекло (frosted glass) поверх
   живого цветного aurora-фона, полупрозрачные панели, мягкое сияние, фиолетовый
   акцент. Эстетика современного macOS / visionOS. Реализовано как ИНЪЕКЦИЯ
   поверх приложения — токены/классы переопределяются, логика/разметка не тронуты.

   ИНЖЕНЕРНЫЕ ПРИНЦИПЫ
   - Стекло адаптивно к теме: фон поверхности = rgb(var(--c-paper) / α) — одно
     правило работает и в light, и в dark (paper меняет значение по теме).
   - Читаемость > эффект: непрозрачность стекла держим 0.6–0.8 (классические
     0.15 нечитаемы для плотного текста). Контраст текста проверен по WCAG AA.
   - Производительность: тяжёлый backdrop-blur — только на КРУПНЫХ поверхностях
     (сайдбар/шапка/колонки/модалки). Часто повторяющиеся карточки сделок —
     полупрозрачная заливка БЕЗ blur (они и так лежат на уже размытой колонке).
   - !important — т.к. Tailwind v3 уплощает @layer и порядок загрузки в dev ненадёжен.
   - Темы: существующий тумблер (localStorage['theme'] → html.dark/:root[data-theme]).
   ════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. ТОКЕНЫ · LIGHT
   ───────────────────────────────────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  color-scheme: light !important;

  --c-bg: 244 242 255 !important;             /* #F4F2FF — лавандовая база (под aurora) */
  --c-paper: 255 255 255 !important;          /* surface (используется как rgb(var/α) → стекло) */
  --c-paper-elevated: 245 243 255 !important; /* #F5F3FF */
  --c-ink: 30 27 46 !important;               /* #1E1B2E — глубокий индиго-уголь, читаемо на стекле */
  --c-muted: 86 81 110 !important;            /* #56516E */
  --c-line: 226 220 247 !important;           /* #E2DCF7 */

  --c-accent: 110 75 242 !important;          /* #6E4BF2 — фиолет (AA как текст и как фон-кнопка на стекле) */
  --c-accent-fill: 110 75 242 !important;
  --c-accent-2: 99 64 230 !important;         /* #6340E6 — вторая точка градиента / hover */
  --c-accent-contrast: 255 255 255 !important;

  --c-success: 12 126 90 !important;          /* #0C7E5A — изумруд (AA 4.75 на стекле) */
  --c-warn: 148 96 16 !important;             /* #946010 — янтарь (AA 5.0 на стекле) */
  --c-danger: 200 59 94 !important;           /* #C83B5E — малиновый (AA 4.65) */
  --c-pencil: 200 59 94 !important;

  --c-chart: 110 75 242 !important;
  --c-cyan: 38 160 200 !important;            /* #26A0C8 */
  --c-violet: 168 110 240 !important;         /* #A86EF0 */

  --c-accent-soft: 236 231 255;               /* #ECE7FF */
  --c-border-strong: 205 195 240;             /* #CDC3F0 */
  --c-text-tertiary: 122 116 150;             /* #7A7496 (AA ~4.6 на белом) */

  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace !important;

  /* Крупные «стеклянные» скругления */
  --radius-control: 12px !important;
  --radius-card: 18px !important;
  --radius-surface: 24px !important;
  --dash-radius: 18px !important;

  /* Мягкие цветные тени-сияния */
  --shadow-card: 0 8px 30px rgb(80 60 170 / 0.10) !important;
  --shadow-pop: 0 20px 50px rgb(60 40 140 / 0.22), 0 2px 8px rgb(60 40 140 / 0.10) !important;
  --shadow-focus: 0 0 0 3px rgb(var(--c-accent) / 0.30) !important;
  --shadow-glow: 0 0 0 1px rgb(var(--c-accent) / 0.22) !important;

  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  --ease-premium: cubic-bezier(0.2, 0.8, 0.2, 1) !important;

  /* Параметры стекла (переопределяются в dark) */
  --glass-edge: 255 255 255;                  /* светлая кромка */
  --glass-edge-a: 0.55;
  --glass-hi-a: 0.30;                         /* верхний внутренний блик */
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. ТОКЕНЫ · DARK
   ───────────────────────────────────────────────────────────────────────────── */
html.dark,
:root[data-theme="dark"],
.dark {
  color-scheme: dark !important;

  --c-bg: 10 9 18 !important;                 /* #0A0912 */
  --c-paper: 24 21 46 !important;             /* #18152E — индиго-стекло */
  --c-paper-elevated: 32 28 58 !important;    /* #201C3A */
  --c-ink: 236 234 255 !important;            /* #ECEAFF */
  --c-muted: 166 162 200 !important;          /* #A6A2C8 */
  --c-line: 48 43 80 !important;              /* #302B50 */

  --c-accent: 155 130 255 !important;         /* #9B82FF — ярче на тёмном */
  --c-accent-fill: 155 130 255 !important;
  --c-accent-2: 179 160 255 !important;       /* #B3A0FF */
  --c-accent-contrast: 12 10 24 !important;   /* тёмный текст на светлом акценте */

  --c-success: 52 211 153 !important;         /* #34D399 */
  --c-warn: 251 191 36 !important;            /* #FBBF24 */
  --c-danger: 251 113 133 !important;         /* #FB7185 */
  --c-pencil: 251 113 133 !important;

  --c-chart: 155 130 255 !important;
  --c-cyan: 96 200 230 !important;
  --c-violet: 196 168 255 !important;

  --c-accent-soft: 36 31 69;                  /* #241F45 */
  --c-border-strong: 70 62 112;
  --c-text-tertiary: 138 132 176;             /* #8A84B0 (AA на surface) */

  --shadow-card: 0 8px 30px rgb(0 0 0 / 0.45) !important;
  --shadow-pop: 0 22px 54px rgb(0 0 0 / 0.60), inset 0 1px 0 rgb(255 255 255 / 0.05) !important;
  --shadow-focus: 0 0 0 3px rgb(var(--c-accent) / 0.40) !important;

  --glass-edge: 255 255 255;
  --glass-edge-a: 0.10;
  --glass-hi-a: 0.06;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. AURORA-ФОН  (фиксированный цветной фон, видимый сквозь стекло)
   ───────────────────────────────────────────────────────────────────────────── */
html { background: rgb(var(--c-bg)) !important; }
body {
  background:
    radial-gradient(60% 50% at 12% 6%, rgb(124 92 255 / 0.24), transparent 62%),
    radial-gradient(55% 45% at 90% 10%, rgb(74 150 255 / 0.20), transparent 60%),
    radial-gradient(60% 55% at 80% 92%, rgb(255 110 190 / 0.16), transparent 62%),
    radial-gradient(55% 45% at 16% 96%, rgb(60 215 195 / 0.16), transparent 60%),
    linear-gradient(180deg, #F6F4FF 0%, #EEEBFB 100%) !important;
  background-attachment: fixed !important;
}
html.dark body,
.dark body {
  background:
    radial-gradient(60% 50% at 12% 6%, rgb(124 92 255 / 0.34), transparent 60%),
    radial-gradient(55% 45% at 90% 10%, rgb(40 120 255 / 0.26), transparent 58%),
    radial-gradient(60% 55% at 80% 92%, rgb(220 60 150 / 0.22), transparent 60%),
    radial-gradient(55% 45% at 16% 96%, rgb(20 180 170 / 0.20), transparent 58%),
    linear-gradient(180deg, #0B0A16 0%, #08070F 100%) !important;
  background-attachment: fixed !important;
}
/* Слои-обёртки прозрачны — пропускают aurora */
#root, .app-shell, .app-content, main { background: transparent !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   4. ТИПОГРАФИКА И ЧИСЛА
   ───────────────────────────────────────────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
}
.section-title, .font-display { letter-spacing: -0.02em !important; font-weight: 700 !important; }

.font-mono, .tnum, .eyebrow, .label, .badge, table, time {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}
.font-mono { font-family: var(--font-mono) !important; letter-spacing: -0.01em !important; }

/* мелкие капс-надписи — полная непрозрачность muted (читаемость) */
.eyebrow, .hl-eyebrow, .hl-period, .topbar-sheet, .topbar-sheet-date,
.metric-card-label, .dash-section-sub { color: rgb(var(--c-muted)) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. СТЕКЛО · КРУПНЫЕ ПОВЕРХНОСТИ (с backdrop-blur)
   ───────────────────────────────────────────────────────────────────────────── */
.app-sidebar,
.app-desktop-topbar,
.app-mobilebar,
.card,
.card-flat,
.settings-card,
.crm-kanban-column,
.hl,
.dash-section-card,
.metric-card,
.planfact-card {
  background: rgb(var(--c-paper) / 0.58) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  border: 1px solid rgb(var(--glass-edge) / var(--glass-edge-a)) !important;
  box-shadow: var(--shadow-card),
              inset 0 1px 0 rgb(var(--glass-edge) / var(--glass-hi-a)) !important;
}
.app-sidebar { border-width: 0 1px 0 0 !important; border-radius: 0 !important; }
.app-desktop-topbar, .app-mobilebar { border-width: 0 0 1px 0 !important; border-radius: 0 !important; }

.card, .card-flat, .settings-card, .planfact-card { border-radius: var(--radius-card) !important; }
.crm-kanban-column { border-radius: var(--radius-card) !important; }
.hl, .dash-section-card { border-radius: var(--radius-card) !important; }
.metric-card { border-radius: var(--radius-card) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. СТЕКЛО · ПЛАВАЮЩИЕ ПОВЕРХНОСТИ (модалки/поповеры — сильнее blur, плотнее)
   ───────────────────────────────────────────────────────────────────────────── */
.modal-surface,
.gsearch-dropdown,
.popover-content,
.site-select-pop,
.profile-drawer {
  background: rgb(var(--c-paper) / 0.80) !important;
  -webkit-backdrop-filter: blur(34px) saturate(180%) !important;
  backdrop-filter: blur(34px) saturate(180%) !important;
  border: 1px solid rgb(var(--glass-edge) / var(--glass-edge-a)) !important;
  box-shadow: var(--shadow-pop),
              inset 0 1px 0 rgb(var(--glass-edge) / var(--glass-hi-a)) !important;
}
.modal-surface, .profile-drawer { border-radius: var(--radius-surface) !important; }
.gsearch-dropdown, .popover-content, .site-select-pop { border-radius: var(--radius-card) !important; }
.modal-header {
  background: transparent !important;
  border-top-left-radius: var(--radius-surface) !important;
  border-top-right-radius: var(--radius-surface) !important;
}
/* скрим под модалкой — мягкое затемнение + блюр (изоляция фона) */
.fixed.inset-0.bg-black\/60, .fixed.inset-0.bg-black\/50, .fixed.inset-0.bg-black\/40 {
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. КАРТОЧКИ СДЕЛОК · полупрозрачная заливка БЕЗ blur (перф; лежат на стекле)
   ───────────────────────────────────────────────────────────────────────────── */
.crm-deal-card {
  background: rgb(var(--c-paper) / 0.72) !important;
  border: 1px solid rgb(var(--glass-edge) / var(--glass-edge-a)) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 2px 10px rgb(60 40 140 / 0.06) !important;
  transition: transform 0.18s var(--ease-snap), box-shadow 0.18s var(--ease-snap),
              border-color 0.18s var(--ease-snap) !important;
}
.crm-deal-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgb(var(--c-accent) / 0.45) !important;
  box-shadow: var(--shadow-pop) !important;
}
.dash-stat-tile, .dash-status-count, .dash-target-row {
  background: rgb(var(--c-paper) / 0.55) !important;
  border: 1px solid rgb(var(--glass-edge) / var(--glass-edge-a)) !important;
  border-radius: var(--radius-control) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. ПОЛЯ ВВОДА · лёгкое стекло
   ───────────────────────────────────────────────────────────────────────────── */
.field, .gsearch-field {
  background: rgb(var(--c-paper) / 0.55) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgb(var(--c-line)) !important;
  border-radius: var(--radius-control) !important;
}
.field:focus, .gsearch-field:focus-within {
  border-color: rgb(var(--c-accent)) !important;
  box-shadow: var(--shadow-focus) !important;
}
.field::placeholder {
  font-style: normal !important;
  color: rgb(var(--c-muted) / 0.6) !important;
  -webkit-text-fill-color: rgb(var(--c-muted) / 0.6) !important;
}
html.dark .field::placeholder, .dark .field::placeholder {
  color: rgb(var(--c-muted) / 0.7) !important;
  -webkit-text-fill-color: rgb(var(--c-muted) / 0.7) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. КНОПКИ · primary = градиентный фиолет с сиянием; secondary = стекло
   ───────────────────────────────────────────────────────────────────────────── */
.btn-accent {
  background: linear-gradient(135deg, rgb(var(--c-accent)), rgb(var(--c-accent-2))) !important;
  border: 1px solid rgb(var(--c-accent) / 0.5) !important;
  border-radius: var(--radius-control) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 20px rgb(var(--c-accent) / 0.40) !important;
}
.btn-accent:hover { filter: brightness(1.06) !important; box-shadow: 0 8px 26px rgb(var(--c-accent) / 0.5) !important; }
html.dark .btn-accent, .dark .btn-accent { color: #0C0A18 !important; }

.btn, .btn-ghost, .btn-danger, .btn-danger-outline, .btn-secondary,
.icon-btn, .theme-toggle, .density-toggle, .badge, .nav-link {
  border-radius: var(--radius-control) !important;
}
.btn-ghost, .icon-btn-ghost {
  background: rgb(var(--c-paper) / 0.5) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgb(var(--glass-edge) / var(--glass-edge-a)) !important;
}
.btn-ghost:hover, .icon-btn-ghost:hover {
  background: rgb(var(--c-accent) / 0.12) !important;
  border-color: rgb(var(--c-accent) / 0.5) !important;
  color: rgb(var(--c-accent)) !important;
}
.btn { background: rgb(var(--c-ink) / 0.9) !important; color: rgb(var(--c-paper)) !important; font-weight: 600 !important; }
/* снять агрессивный пульс «вооружённых» icon-btn */
.icon-btn-accent-armed, .icon-btn-danger-armed, .icon-btn-success-armed,
.icon-btn-warn-armed, .icon-btn-ghost-armed { animation: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   10. ИКОНКИ (Lucide) · штрих 1.5; активная навигация — акцент + duotone-настроение
   ───────────────────────────────────────────────────────────────────────────── */
svg.lucide { stroke-width: 1.5px !important; }
.nav-link-active .nav-link-icon { color: rgb(var(--c-accent)) !important; opacity: 1 !important; }
.preview-placeholder-icon { color: rgb(var(--c-accent)) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   11. НАВИГАЦИЯ · активный пункт = стеклянный акцент-хайлайт + сияние
   ───────────────────────────────────────────────────────────────────────────── */
.nav-link:hover { background: rgb(var(--c-accent) / 0.08) !important; }
.nav-link-active {
  background: linear-gradient(135deg, rgb(var(--c-accent) / 0.22), rgb(var(--c-accent) / 0.10)) !important;
  color: rgb(var(--c-ink)) !important;
  border: 1px solid rgb(var(--c-accent) / 0.30) !important;
  box-shadow: 0 4px 14px rgb(var(--c-accent) / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.2) !important;
}
.nav-link-active:hover { background: linear-gradient(135deg, rgb(var(--c-accent) / 0.26), rgb(var(--c-accent) / 0.12)) !important; }
.nav-link-badge { color: rgb(var(--c-accent-contrast)) !important; background: rgb(var(--c-accent)) !important; border-radius: 999px !important; }
.nav-group-head { letter-spacing: 0.1em !important; color: rgb(var(--c-text-tertiary)) !important; }

/* поиск: моно-чип «Ctrl K» в стекле */
.gsearch-kbd {
  font-family: var(--font-mono) !important; font-size: 10.5px !important; font-weight: 600 !important;
  color: rgb(var(--c-muted)) !important;
  background: rgb(var(--c-paper) / 0.6) !important;
  border: 1px solid rgb(var(--glass-edge) / var(--glass-edge-a)) !important;
  border-radius: 7px !important; padding: 2px 6px !important;
}
.gsearch-row { border-radius: var(--radius-control) !important; }
.gsearch-row:hover, .gsearch-row.is-active { background: rgb(var(--c-accent) / 0.14) !important; }
.density-toggle { font-family: var(--font-mono) !important; background: rgb(var(--c-paper) / 0.5) !important; }
.profile-drawer-hero, .profile-drawer-theme, .profile-drawer-toggle, .profile-drawer-section { border-radius: var(--radius-card) !important; }
.profile-drawer-close { border-radius: var(--radius-control) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   12. ВКЛАДКИ / СЕГМЕНТЫ / БЕЙДЖИ
   ───────────────────────────────────────────────────────────────────────────── */
.partner-tab, .settings-tab, .settings-side-link { border-radius: var(--radius-control) !important; border-color: transparent !important; }
.partner-tab-active, .settings-tab.is-active, .settings-side-link.is-active {
  background: rgb(var(--c-accent) / 0.16) !important;
  background-image: none !important;
  border-color: rgb(var(--c-accent) / 0.30) !important;
  color: rgb(var(--c-accent)) !important;
}
.settings-segmented { border-radius: var(--radius-card) !important; }
.settings-segmented-btn { border-radius: var(--radius-control) !important; }
.settings-device, .settings-device-icon { border-radius: var(--radius-card) !important; }
.badge { letter-spacing: 0.04em !important; font-weight: 600 !important; border-radius: 999px !important; }
.crm-tag-chip { border-radius: 999px !important; }
.settings-toggle-thumb { box-shadow: 0 1px 4px rgb(0 0 0 / 0.25) !important; }
.settings-danger-confirm { border-color: rgb(var(--c-danger) / 0.4) !important; background: rgb(var(--c-danger) / 0.07) !important; }
.cropper-frame { background: rgb(var(--c-bg)) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   13. CRM-ВОРОНКА · датчик-шапка, моно-числа
   ───────────────────────────────────────────────────────────────────────────── */
.crm-kanban-head { border-bottom: 1px solid rgb(var(--glass-edge) / var(--glass-edge-a)) !important; }
.crm-stage-name { font-weight: 650 !important; letter-spacing: -0.01em !important; }
.crm-kanban-counts, .crm-kanban-stage-target span {
  font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums !important;
}
.crm-kanban-counts { font-weight: 600 !important; font-size: 0.72rem !important; color: rgb(var(--c-muted)) !important; }
.crm-kanban-stage-target-bar { height: 4px !important; border-radius: 999px !important; background: rgb(var(--c-line) / 0.7) !important; }
.crm-kanban-stage-target-bar > i { border-radius: 999px !important; }
.crm-deal-amount { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums !important; font-weight: 700 !important; }
.crm-card-footer { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums !important; }
.crm-card-footer .crm-card-icons { font-family: var(--font-sans) !important; }
.crm-risk-dot { width: 0.6rem !important; height: 0.6rem !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   14. ДАШБОРД · hero-число (моно), радиусы, моно-значения, графики
   ───────────────────────────────────────────────────────────────────────────── */
.modern-dashboard { --dash-radius: 18px !important; }
.dash-widget-frame { border-radius: var(--dash-radius) !important; }
.hl-corner { opacity: 0.35 !important; }
.hl-giant {
  font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.03em !important; font-weight: 600 !important;
}
.hl-row-value, .hl-instr:not(.hl-leader) b, .hl-leader i, .hl-pace, .hl-risk {
  font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums !important;
}
.hl-leader b { font-family: var(--font-sans) !important; font-variant-numeric: normal !important; }
.hl-pace, .hl-stamp { border-radius: var(--radius-control) !important; }
.metric-card-icon, .metric-card-spark, .metric-card-rail { border-radius: var(--radius-control) !important; }
.dash-progress, .dash-target-meter { border-radius: 999px !important; }
.metric-card-value, .dash-stat-tile strong, .dash-status-count b, .dash-goal-summary b,
.dash-target-values b, .dash-target-values span, .dash-section-total b,
.completion-ring-pct, .leader-stat-num, .stat-tile-value, .planfact-summary-cell b,
.planfact-item-head .font-mono {
  font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums !important;
}

/* Графики (inline SVG): мягкие заливки, стеклянный тултип, читаемый текст */
.chart-spark-area, .chart-line-area, .ledger-area-fill { fill-opacity: 0.16 !important; }
.ledger-area-tip {
  border-radius: var(--radius-control) !important;
  background: rgb(var(--c-paper) / 0.85) !important;
  -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
  border: 1px solid rgb(var(--glass-edge) / var(--glass-edge-a)) !important;
  box-shadow: var(--shadow-pop) !important; padding: 6px 9px !important;
}
.ledger-area-tip b { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums !important; }
.ledger-area-tip i { font-family: var(--font-mono) !important; color: rgb(var(--c-muted)) !important; }
.ledger-area-axis, .chart-bar-row .font-mono, .funnel-value, .funnel-drop {
  font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums !important;
}
.chart-donut-svg text, .completion-ring svg text { fill: rgb(var(--c-ink)) !important; }

/* пустые состояния — мягкая рамка + акцентная иконка */
.border-dashed.border-line { border-color: rgb(var(--c-line)) !important; border-radius: var(--radius-card) !important; }