/* ── weeeepn: накладка поверх стоковой темы Remnawave ──────────────────────
   Панель на Mantine, но переменные темы он вставляет НЕ из css-файла, а тегом
   <style> уже во время работы — то есть позже нашей ссылки. Побеждает тот, кто
   объявлен последним, поэтому здесь повышенная специфичность (html:root) и
   !important. Без этого накладка молча ничего не меняет.
   Сам фронтенд не трогаем.                                                  */

html:root {
  --mantine-font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif !important;
  --mantine-font-family-headings: var(--mantine-font-family) !important;
  --mantine-font-family-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, monospace !important;

  /* скругления как в фирменном наборе: .625rem вместо .5rem */
  --mantine-radius-xs: calc(0.25rem * var(--mantine-scale)) !important;
  --mantine-radius-sm: calc(0.4rem * var(--mantine-scale)) !important;
  --mantine-radius-md: calc(0.625rem * var(--mantine-scale)) !important;
  --mantine-radius-default: calc(0.625rem * var(--mantine-scale)) !important;
  --mantine-radius-lg: calc(0.875rem * var(--mantine-scale)) !important;
  --mantine-radius-xl: calc(1.25rem * var(--mantine-scale)) !important;
}

/* ── тёмная схема ───────────────────────────────────────────────────────── */
html:root[data-mantine-color-scheme="dark"] {
  --mantine-color-dark-0: #fafafa !important;   /* основной текст   */
  --mantine-color-dark-1: #e9e9ea !important;
  --mantine-color-dark-2: #9e9e9e !important;   /* приглушённый     */
  --mantine-color-dark-3: #757575 !important;
  --mantine-color-dark-4: #2c2c2e !important;   /* рамки            */
  --mantine-color-dark-5: #1e1e20 !important;   /* наведение        */
  --mantine-color-dark-6: #161616 !important;   /* карточки, поля   */
  --mantine-color-dark-7: #121212 !important;   /* фон страницы     */
  --mantine-color-dark-8: #0e0e0f !important;
  --mantine-color-dark-9: #0a0a0b !important;

  /* акцент: инверсия, как на сайте — светлая кнопка на тёмном */
  --mantine-primary-color-filled: #fafafa !important;
  --mantine-primary-color-filled-hover: #e5e5e5 !important;
  --mantine-primary-color-contrast: #121212 !important;
  --mantine-primary-color-light: rgba(250, 250, 250, 0.08) !important;
  --mantine-primary-color-light-hover: rgba(250, 250, 250, 0.14) !important;
  --mantine-primary-color-light-color: #fafafa !important;

  --mantine-color-anchor: #fafafa !important;
}

/* ── светлая схема ──────────────────────────────────────────────────────── */
html:root[data-mantine-color-scheme="light"] {
  --mantine-color-body: #ffffff !important;
  --mantine-color-text: #141414 !important;
  --mantine-color-dimmed: #707070 !important;
  --mantine-color-default: #ffffff !important;
  --mantine-color-default-hover: #f6f6f7 !important;
  --mantine-color-default-border: rgba(0, 0, 0, 0.09) !important;

  --mantine-primary-color-filled: #141414 !important;
  --mantine-primary-color-filled-hover: #2a2a2c !important;
  --mantine-primary-color-contrast: #ffffff !important;
  --mantine-primary-color-light: rgba(20, 20, 20, 0.06) !important;
  --mantine-primary-color-light-hover: rgba(20, 20, 20, 0.1) !important;
  --mantine-primary-color-light-color: #141414 !important;

  --mantine-color-anchor: #141414 !important;
}

/* ── мелочи, которые переменными не берутся ─────────────────────────────── */

/* заголовки — плотный трекинг фирменного набора */
h1, h2, h3, .mantine-Title-root {
  letter-spacing: -0.03em;
}

/* тени карточек: три слоя, как на сайте */
html[data-mantine-color-scheme="dark"] .mantine-Paper-root,
html[data-mantine-color-scheme="dark"] .mantine-Card-root {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 1px rgba(0, 0, 0, 0.26), 0 10px 26px rgba(0, 0, 0, 0.22);
}
html[data-mantine-color-scheme="light"] .mantine-Paper-root,
html[data-mantine-color-scheme="light"] .mantine-Card-root {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 1px 1px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.04);
}

/* моноширинный там, где цифры и идентификаторы */
code, kbd, pre, .mantine-Code-root {
  font-family: var(--mantine-font-family-monospace);
}

/* плавность переходов из фирменного набора */
.mantine-Button-root, .mantine-ActionIcon-root, .mantine-NavLink-root {
  transition: background-color 0.18s cubic-bezier(0.23, 1, 0.32, 1),
    color 0.18s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── название в шапке ───────────────────────────────────────────────────────
   Сам текст задаётся штатно: Настройки → Брендинг (branding.title в базе),
   поэтому здесь только типографика — подмену псевдоэлементом убрали.       */
[class*="logoTitle"] {
  font-family: "Geist", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* ── убираем голубые градиенты ──────────────────────────────────────────────
   Панель расцвечена бирюзой: полоса-акцент сверху, кнопки сохранения,
   превью иконок. Переводим в нейтраль фирменного набора.                    */
[class*="topAccent"] {
  background: var(--mantine-color-dark-4) !important;
}
[class*="saveButton"],
[class*="iconSelectPreview"],
[class*="joinButton"] {
  background: var(--mantine-color-dark-6) !important;
  border-color: var(--mantine-color-dark-4) !important;
}
html:root[data-mantine-color-scheme="light"] [class*="topAccent"] {
  background: rgba(0, 0, 0, 0.12) !important;
}
html:root[data-mantine-color-scheme="light"] [class*="saveButton"],
html:root[data-mantine-color-scheme="light"] [class*="iconSelectPreview"],
html:root[data-mantine-color-scheme="light"] [class*="joinButton"] {
  background: #f6f6f7 !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
}

/* бирюзовые акценты кнопки выхода и бейджа версии — в нейтраль */
[class*="logout"], [class*="newVersion"] {
  color: var(--mantine-color-dark-2) !important;
  border-color: var(--mantine-color-dark-4) !important;
}

/* ── бирюза панели в нейтраль ───────────────────────────────────────────────
   Основной цвет панели — cyan, и полоски разделов, активный пункт меню и
   логотип берут пронумерованные оттенки (--mantine-primary-color-6 и др.).
   Переопределяем всю шкалу, иначе бирюза остаётся.                        */
html:root[data-mantine-color-scheme="dark"] {
  --mantine-primary-color-0: #ffffff !important;
  --mantine-primary-color-1: #fafafa !important;
  --mantine-primary-color-2: #f0f0f1 !important;
  --mantine-primary-color-3: #dcdcde !important;
  --mantine-primary-color-4: #c2c3c6 !important;
  --mantine-primary-color-5: #aaaaaa !important;
  --mantine-primary-color-6: #9e9e9e !important;
  --mantine-primary-color-7: #868686 !important;
  --mantine-primary-color-8: #fafafa !important;
  --mantine-primary-color-9: #707070 !important;
  --mantine-color-cyan-0: #f5f5f5 !important;
  --mantine-color-cyan-1: #e5e5e5 !important;
  --mantine-color-cyan-2: #c9c9c9 !important;
  --mantine-color-cyan-3: #a6a6a6 !important;
  --mantine-color-cyan-4: #8b8b8b !important;
  --mantine-color-cyan-5: #707070 !important;
  --mantine-color-cyan-6: #585858 !important;
  --mantine-color-cyan-7: #464646 !important;
  --mantine-color-cyan-8: #363636 !important;
  --mantine-color-cyan-9: #282828 !important;
  --mantine-color-teal-0: #e6fcf5 !important;
  --mantine-color-teal-1: #c3fae8 !important;
  --mantine-color-teal-2: #96f2d7 !important;
  --mantine-color-teal-3: #63e6be !important;
  --mantine-color-teal-4: #38d9a9 !important;
  --mantine-color-teal-5: #20c997 !important;
  --mantine-color-teal-6: #12b886 !important;
  --mantine-color-teal-7: #0ca678 !important;
  --mantine-color-teal-8: #099268 !important;
  --mantine-color-teal-9: #087f5b !important;
  --mantine-color-cyan-filled: #fafafa !important;
  --mantine-color-cyan-light: rgba(250,250,250,.08) !important;
  --mantine-color-cyan-light-color: #fafafa !important;
  --mantine-color-cyan-text: #fafafa !important;
}
html:root[data-mantine-color-scheme="light"] {
  --mantine-primary-color-0: #f6f6f7 !important;
  --mantine-primary-color-1: #ececed !important;
  --mantine-primary-color-2: #dcdcde !important;
  --mantine-primary-color-3: #c2c3c6 !important;
  --mantine-primary-color-4: #9e9e9e !important;
  --mantine-primary-color-5: #737373 !important;
  --mantine-primary-color-6: #4e4e4e !important;
  --mantine-primary-color-7: #363636 !important;
  --mantine-primary-color-8: #141414 !important;
  --mantine-primary-color-9: #0d0d0e !important;
  --mantine-color-cyan-0: #f6f6f7 !important;
  --mantine-color-cyan-1: #ececed !important;
  --mantine-color-cyan-2: #dcdcde !important;
  --mantine-color-cyan-3: #c2c3c6 !important;
  --mantine-color-cyan-4: #9e9e9e !important;
  --mantine-color-cyan-5: #737373 !important;
  --mantine-color-cyan-6: #4e4e4e !important;
  --mantine-color-cyan-7: #363636 !important;
  --mantine-color-cyan-8: #141414 !important;
  --mantine-color-cyan-9: #0d0d0e !important;
  --mantine-color-teal-0: #e6fcf5 !important;
  --mantine-color-teal-1: #c3fae8 !important;
  --mantine-color-teal-2: #96f2d7 !important;
  --mantine-color-teal-3: #63e6be !important;
  --mantine-color-teal-4: #38d9a9 !important;
  --mantine-color-teal-5: #20c997 !important;
  --mantine-color-teal-6: #12b886 !important;
  --mantine-color-teal-7: #0ca678 !important;
  --mantine-color-teal-8: #099268 !important;
  --mantine-color-teal-9: #087f5b !important;
}

/* ── жёстко прописанная бирюза ──────────────────────────────────────────────
   Часть цветов зашита в css шестнадцатеричными значениями (#06b6d4, #22d3ee,
   #6366f1), переменными их не достать. Гасим точечно по классам — имена
   хешированные, поэтому ловим по вхождению.                                 */

/* радиальное свечение боковой панели — то самое */
[class*="sidebarWrapper"]::before {
  background: none !important;
}

/* полоса прокрутки: была teal→cyan */
::-webkit-scrollbar-thumb {
  background: var(--mantine-color-dark-4) !important;
  border-color: var(--mantine-color-dark-7) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mantine-color-dark-3) !important;
}

/* разделители в шапке и подвале меню */
[class*="logoSection"]::after,
[class*="footerSection"]::after {
  background: linear-gradient(90deg, transparent 0%,
    rgba(255, 255, 255, 0.09) 50%, transparent 100%) !important;
}

/* свечение и подсветка управляющих элементов */
[class*="control"]::before {
  background: none !important;
}
[class*="control"]:hover > * {
  filter: none !important;
}

/* карточки и поля: бирюзовые рамки и фон при наведении и фокусе */
[class*="frontendCard"],
[class*="sectionCard"]:hover,
[class*="interactiveCard"]:hover,
[class*="buttonCard"]:hover,
[class*="addButton"]:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--mantine-color-dark-4) !important;
  box-shadow: none !important;
}
[class*="inputDark"]:focus,
[class*="textareaDark"] textarea:focus,
[class*="inputDark"]:focus-within {
  border-color: var(--mantine-color-dark-3) !important;
  box-shadow: none !important;
}

/* пульсация бейджа новой версии светилась бирюзой */
[class*="newVersion"] {
  animation: none !important;
  box-shadow: none !important;
}

/* ── светлая тема: там же сидел индиго ──────────────────────────────────── */
html:root[data-mantine-color-scheme="light"] [class*="sidebarWrapper"]::before {
  background: none !important;
}
html:root[data-mantine-color-scheme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18) !important;
  border-color: #ffffff !important;
}
html:root[data-mantine-color-scheme="light"] [class*="logoSection"]::after,
html:root[data-mantine-color-scheme="light"] [class*="footerSection"]::after {
  background: linear-gradient(90deg, transparent 0%,
    rgba(0, 0, 0, 0.1) 50%, transparent 100%) !important;
}
html:root[data-mantine-color-scheme="light"] [class*="frontendCard"],
html:root[data-mantine-color-scheme="light"] [class*="sectionCard"]:hover,
html:root[data-mantine-color-scheme="light"] [class*="interactiveCard"]:hover,
html:root[data-mantine-color-scheme="light"] [class*="buttonCard"]:hover,
html:root[data-mantine-color-scheme="light"] [class*="addButton"]:hover {
  background: rgba(0, 0, 0, 0.035) !important;
  border-color: rgba(0, 0, 0, 0.09) !important;
}

/* ── синий: убираем из палитры ───────────────────────────────────────────────
   Панель красит синим карточку «Total», счётчики inbound'ов и акценты на
   главной. Оттенки 0–9 задают все производные (filled/text/outline), кроме
   light — он в Mantine записан литералом и перекрывается отдельно.          */
html:root,
html:root[data-mantine-color-scheme="dark"] {
  --mantine-color-blue-0: #f5f5f5 !important;
  --mantine-color-blue-1: #e5e5e5 !important;
  --mantine-color-blue-2: #c9c9c9 !important;
  --mantine-color-blue-3: #a6a6a6 !important;
  --mantine-color-blue-4: #8b8b8b !important;
  --mantine-color-blue-5: #707070 !important;
  --mantine-color-blue-6: #585858 !important;
  --mantine-color-blue-7: #464646 !important;
  --mantine-color-blue-8: #363636 !important;
  --mantine-color-blue-9: #282828 !important;
  --mantine-color-blue-light: rgba(250,250,250,.06) !important;
  --mantine-color-blue-light-hover: rgba(250,250,250,.10) !important;
}

/* ── индикатор «активен» ─────────────────────────────────────────────────────
   Mantine берёт --indicator-color из .m_e5262200 (значение по умолчанию —
   primary), а явный color=".." кладёт инлайном на тот же элемент. Поэтому
   правило НАМЕРЕННО без !important: так оно меняет только дефолт, а
   <Indicator color="red"> остаётся красным — инлайн-стиль сильнее.
   Primary у нас нейтрально-серый, поэтому точка потеряла цвет; возвращаем
   зелёный из teal — тем же, каким панель метит статус ACTIVE.              */
[class*="mantine-Indicator-root"] {
  --indicator-color: var(--mantine-color-teal-6);
}

/* ── вариант soft: цвет считается в JS ───────────────────────────────────────
   variantColorResolver для soft берёт theme.colors[color][6..7] из объекта
   темы и кладёт готовый градиент инлайном, поэтому CSS-переменные на него не
   действуют. Ловим по подстроке инлайнового стиля: Mantine печатает альфу
   как rgba(r, g, b, a) — с пробелами после запятых.
   34,139,230 = blue.6 (#228be6), 28,126,214 = blue.7 (#1c7ed6).            */
[style*="rgba(34, 139, 230"],
[style*="rgba(28, 126, 214"] {
  background: linear-gradient(135deg,
              rgba(158,158,158,.15) 0%,
              rgba(134,134,134,.10) 100%) !important;
  border-color: rgba(158,158,158,.30) !important;
}

/* ── indigo: тёмно-синий на кнопках «Общие списки» и «Шаблоны» ───────────────
   В шапке таблицы пользователей и в верхней панели это именно indigo
   (#4c6ef5), а не blue. Вариант тот же soft, поэтому нужны обе меры:
   переменные — для filled/light/text, перехват инлайна — для soft.
   76,110,245 = indigo.6 (#4c6ef5), 66,99,235 = indigo.7 (#4263eb).         */
html:root,
html:root[data-mantine-color-scheme="dark"] {
  --mantine-color-indigo-0: #f5f5f5 !important;
  --mantine-color-indigo-1: #e5e5e5 !important;
  --mantine-color-indigo-2: #c9c9c9 !important;
  --mantine-color-indigo-3: #a6a6a6 !important;
  --mantine-color-indigo-4: #8b8b8b !important;
  --mantine-color-indigo-5: #707070 !important;
  --mantine-color-indigo-6: #585858 !important;
  --mantine-color-indigo-7: #464646 !important;
  --mantine-color-indigo-8: #363636 !important;
  --mantine-color-indigo-9: #282828 !important;
  --mantine-color-indigo-light: rgba(250,250,250,.06) !important;
  --mantine-color-indigo-light-hover: rgba(250,250,250,.10) !important;
}

[style*="rgba(76, 110, 245"],
[style*="rgba(66, 99, 235"] {
  background: linear-gradient(135deg,
              rgba(158,158,158,.15) 0%,
              rgba(134,134,134,.10) 100%) !important;
  border-color: rgba(158,158,158,.30) !important;
}

/* ── шапка таблиц: панель зашивает синевато-серый литералом ──────────────────
   MRT берёт фон из --mrt-base-background-color, а панель проставляет его
   ИНЛАЙНОМ на трёх элементах сразу:
       mantineTopToolbarProps / mantineTableHeadProps / mantineBottomToolbarProps
           style: { "--mrt-base-background-color": "#1b2027" }
   #1b2027 — синеватый, на фоне #121212 шапка отсвечивает синим. Ловим ровно
   те элементы, где этот литерал стоит; !important нужен, чтобы перебить
   инлайн-стиль. Оставляем лёгкий подъём (dark-6), а не сливаем с фоном —
   иначе шапка перестанет отделяться от тела таблицы.                        */
[style*="#1b2027"],
[style*="#1B2027"] {
  --mrt-base-background-color: var(--mantine-color-dark-6) !important;
}

/* ── шапка панели: убираем промо Remnawave ───────────────────────────────────
   В хедере штатно висят: телеграм проекта (t.me/remnawave), корона «RW Prime»
   и сердце-донат (docs.rw/docs/donate). Классы — CSS-модули с хешем, который
   меняется между сборками, поэтому цепляемся за стабильный префикс модуля и
   дублируем привязкой по href. В панели всего два класса с префиксом
   _support_ — корона и сердце, оба сюда и попадают.                         */
[class*="_support_"],
[class*="_telegram_"],
a[href*="t.me/remnawave"],
a[href*="docs.rw/docs/donate"] {
  display: none !important;
}

/* ── серая палитра: штатная Mantine холодная ─────────────────────────────────
   gray не переопределялся, поэтому бордеры фильтров брали #495057 (r73 g80
   b87 — синева +14). Ряд заменён на нейтральный той же светлоты.           */
html:root,
html:root[data-mantine-color-scheme="dark"] {
  --mantine-color-gray-0: #f5f5f5 !important;
  --mantine-color-gray-1: #e5e5e5 !important;
  --mantine-color-gray-2: #c9c9c9 !important;
  --mantine-color-gray-3: #a6a6a6 !important;
  --mantine-color-gray-4: #8b8b8b !important;
  --mantine-color-gray-5: #707070 !important;
  --mantine-color-gray-6: #585858 !important;
  --mantine-color-gray-7: #464646 !important;
  --mantine-color-gray-8: #363636 !important;
  --mantine-color-gray-9: #282828 !important;
}

/* ── шапка модалок ───────────────────────────────────────────────────────────
   Локальный CSS-модуль приложения (не Mantine и не MRT) красит её
   rgba(22, 27, 35, .95) = #161B23 — синеватый. Хеш модуля меняется между
   сборками, цепляемся за префикс.                                          */
[class*="_modalHeader_"] {
  background: rgba(22, 22, 22, .95) !important;
}

/* ── синие литералы, зашитые числами прямо в компоненты ──────────────────────
   Часть цветов панель пишет не через палитру, а числами в инлайн-стилях,
   поэтому переменные на них не действуют. Перечень найден сплошным обходом
   бандлов, все литералы записаны с пробелами после запятых:
   34, 139, 230     mantine blue.6
   28, 126, 214     mantine blue.7
   21, 170, 191     mantine cyan.6
   16, 152, 173     mantine cyan.7
   76, 110, 245     mantine indigo.6
   66, 99, 235      mantine indigo.7
   59, 130, 246     tailwind blue-500
   99, 102, 241     tailwind indigo-500
   6, 182, 212      tailwind cyan-500
   49, 120, 198     синий графиков
   59, 78, 171      синий графиков
   22, 27, 35       синеватый тёмный фон
   Правим и итоговые свойства, и сами переменные Mantine (--ti-* у ThemeIcon,
   --badge-* у Badge): иначе в DevTools переменная остаётся синей и сбивает
   с толку, хотя элемент уже перекрашен.                                    */
[style*="rgba(34, 139, 230"],
[style*="rgba(28, 126, 214"],
[style*="rgba(21, 170, 191"],
[style*="rgba(16, 152, 173"],
[style*="rgba(76, 110, 245"],
[style*="rgba(66, 99, 235"],
[style*="rgba(59, 130, 246"],
[style*="rgba(99, 102, 241"],
[style*="rgba(6, 182, 212"],
[style*="rgba(49, 120, 198"],
[style*="rgba(59, 78, 171"],
[style*="rgba(22, 27, 35"] {
  --ti-bg: linear-gradient(135deg, rgba(158,158,158,.15) 0%, rgba(134,134,134,.10) 100%) !important;
  --ti-bd: 1px solid rgba(158,158,158,.30) !important;
  --badge-bg: linear-gradient(135deg, rgba(158,158,158,.15) 0%, rgba(134,134,134,.10) 100%) !important;
  --badge-bd: 1px solid rgba(158,158,158,.30) !important;
  background: linear-gradient(135deg, rgba(158,158,158,.15) 0%, rgba(134,134,134,.10) 100%) !important;
  border-color: rgba(158,158,158,.30) !important;
}