/* ════════════════════════════════════════════════════════════════════
   COMPAT — старые браузеры (iPhone 7 / iOS Safari <15.4, и т.п.)
   ────────────────────────────────────────────────────────────────────
   Лежит в public/ → Vite копирует ПОБАЙТОВО (Tailwind/lightningcss не
   трогают) → синтаксис не переписывается в range-медиа и @supports не
   вырезается. Подключается <link>'ом в index.html.

   ПРОБЛЕМА: вся дизайн-система NeuroCRM на oklch() (Tailwind v4, ~modern-only).
   Safari <15.4 не знает oklch → ВСЕ цвет-токены невалидны → текст падает в
   чёрный на белом, тёмная тема рушится. Здесь даём полноценный rgb-фолбэк:
   тёмное фиолетовое стекло + белый текст, на десктопе И мобиле.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Нет поддержки oklch → полный rgb-фолбэк тёмной темы (весь UI) ── */
@supports not (color: oklch(0% 0 0)) {
  :root {
    /* поверхности */
    --surface-0: #1b1226;
    --surface-1: #271836;
    --surface-2: #341f47;
    --surface-3: #412857;
    --color-bg-primary: #1b1226;
    --color-bg-secondary: #271836;
    --color-bg-tertiary: #140d1d;
    --color-bg-hover: #341f47;
    --background: #1b1226;
    --card: #271836;
    --popover: #271836;
    --secondary: #271836;
    --muted: #271836;
    /* текст — светлый */
    --text-primary: #f5f3f8;
    --text-secondary: #cdc6d6;
    --text-muted: #a79fb3;
    --text-subtle: #8b8497;
    --color-text-primary: #f5f3f8;
    --color-text-secondary: #cdc6d6;
    --color-text-muted: #a79fb3;
    --foreground: #f5f3f8;
    --muted-foreground: #b7b0c4;
    --card-foreground: #f5f3f8;
    --popover-foreground: #f5f3f8;
    /* стекло liquid (lg2-*) */
    --lg2-text: #f5f3f8;
    --lg2-text-muted: #cdc6d6;
    --lg2-bg: rgba(40, 28, 60, 0.55);
    --lg2-bg-soft: rgba(40, 28, 60, 0.40);
    --lg2-bg-strong: rgba(40, 28, 60, 0.72);
    --lg2-accent: #a17ae8;
    --lg2-edge: rgba(255, 255, 255, 0.18);
    --lg2-edge-strong: rgba(255, 255, 255, 0.28);
    /* стекло apple/light (lg-*) */
    --lg-text: #f7f5fc;
    --lg-bg: rgba(40, 28, 60, 0.45);
    --lg-bg-strong: rgba(40, 28, 60, 0.62);
    /* акценты/обводки/washes */
    --accent-primary: #a17ae8;
    --accent-secondary: #b79aef;
    --accent-tertiary: #e9c08a;
    --color-accent-purple: #a17ae8;
    --color-accent-gold: #e9c08a;
    --color-accent-blue: #6f9be6;
    --color-accent-pink: #e87ab8;
    --border: rgba(255, 255, 255, 0.14);
    --border-subtle: rgba(255, 255, 255, 0.10);
    --border-default: rgba(255, 255, 255, 0.16);
    --border-strong: rgba(255, 255, 255, 0.26);
    --input: rgba(255, 255, 255, 0.16);
    --ring: #a17ae8;
    --glass-border: rgba(170, 140, 235, 0.24);
    --violet-wash-1: rgba(161, 122, 232, 0.10);
    --violet-wash-2: rgba(161, 122, 232, 0.18);
    --violet-wash-3: rgba(161, 122, 232, 0.28);
    color-scheme: dark;
  }

  body {
    background-color: #160f20 !important;
    background-image: none !important;
    color: #f5f3f8 !important;
  }

  /* Любая стеклянная поверхность — тёмная полупрозрачная + светлый текст */
  .glass, .glass-strong, .lg-panel, .lg-bed, .lg-row,
  .bubble-3d, .sidebar-velvet, .ambient-gradient {
    background-color: rgba(40, 28, 60, 0.55) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f5f3f8 !important;
  }

  /* Поля ввода — тёмные с белым текстом */
  input, textarea, select {
    background-color: rgba(40, 28, 60, 0.55) !important;
    color: #f5f3f8 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }
  input::placeholder, textarea::placeholder { color: rgba(245, 243, 248, 0.55) !important; }

  /* Кнопки с акцентным фоном — белый текст гарантированно */
  [class*="bg-[var(--color-accent-"], [class*="bg-[var(--accent-"] { color: #fff !important; }
}

/* ── 2. Мобайл (legacy max-width — НЕ range-синтаксис) ── */
/* Дублирует bundle-патч читаемости в синтаксисе, который понимает ЛЮБОЙ Safari
   (range-форма (width<=767px) требует Safari 16.4+). Только plain rgb. */
@media (max-width: 767px) {
  :root {
    --lg2-text: rgb(246, 243, 252) !important;
    --lg2-text-muted: rgb(225, 219, 243) !important;
    --lg-text: rgb(247, 245, 252) !important;
    --text-primary: rgb(246, 243, 252) !important;
    --text-secondary: rgb(228, 222, 244) !important;
    --text-muted: rgb(210, 203, 230) !important;
    --color-text-primary: rgb(246, 243, 252) !important;
    --color-text-secondary: rgb(228, 222, 244) !important;
    --color-text-muted: rgb(210, 203, 230) !important;
    --foreground: rgb(246, 243, 252) !important;
    --muted-foreground: rgb(210, 203, 230) !important;
  }
  body { color: rgb(246, 243, 252) !important; }
  /* Для светлых тем на мобиле — тёмное стекло (liquid-dark не трогаем) */
  :is([data-theme="light-glass"], [data-theme="liquid-light"], [data-theme="apple-liquid-glass"]) .glass,
  :is([data-theme="light-glass"], [data-theme="liquid-light"], [data-theme="apple-liquid-glass"]) .glass-strong,
  :is([data-theme="light-glass"], [data-theme="liquid-light"], [data-theme="apple-liquid-glass"]) .lg-panel,
  :is([data-theme="light-glass"], [data-theme="liquid-light"], [data-theme="apple-liquid-glass"]) .lg-bed,
  :is([data-theme="light-glass"], [data-theme="liquid-light"], [data-theme="apple-liquid-glass"]) .lg-row,
  :is([data-theme="light-glass"], [data-theme="liquid-light"], [data-theme="apple-liquid-glass"]) .sidebar-velvet {
    background-color: rgba(40, 31, 58, 0.60) !important;
    background-image: none !important;
  }
}