/* ===========================================================================
   polish.css — визуальная полировка и неоновая подсветка.

   Здесь живут классы, которых нет в Tailwind CDN: кнопки (btn-primary,
   btn-ghost), карточки (card), неоновые ореолы (glow-*), кастомный скроллбар
   и ::selection. Все цвета берутся из переменных тем --c-*, которые
   генерирует scripts/build_theme_css.py, поэтому файл ничего не дублирует и
   работает во всех семи темах: сменилась палитра — сменилась и подсветка.

   ── Почему неон живёт именно здесь ──────────────────────────────────────────
   Неон — это box-shadow, а тени не участвуют в контрасте текста. Это
   единственное место в интерфейсе, где тема может быть громкой, не ломая
   проверку читаемости (scripts/verify_theme_css.py, scripts/shoot_themes.py).
   Сила свечения зависит от режима: на тёмном холсте насыщенный ореол читается
   как неон, на белом тот же ореол выглядит наклейкой — там он вдвое тише.

   ── Порядок важен ───────────────────────────────────────────────────────────
   Блок «Неоновая подсветка» стоит В КОНЦЕ файла. `.card`, `.card-hover:hover`
   и `.glow-*` задают одно и то же свойство box-shadow с близкой
   специфичностью, поэтому побеждает то правило, что ниже; если перенести
   неон выше карточек, подсветка молча исчезнет.
   =========================================================================== */

/* ── Канва и появление контента ───────────────────────────────────────── */
.bg-canvas { background: rgb(var(--c-canvas)); }

/* Декоративные пятна на странице входа. Громкость привязана к тому же
   переключателю, что и неон: на белом крупные цветные пятна читаются как
   незагруженная картинка, на тёмном — как подсветка. */
.bg-orb { opacity: calc(.09 + .21 * var(--glow-strength)); }

/* Лёгкое появление блоков при загрузке — визуальный ритм, не отвлекающий. */
.fade-in { animation: crmFadeIn .4s ease both; }
@keyframes crmFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Кнопки: единая иерархия поверх разрозненных вариаций в шаблонах ────
   ВНИМАНИЕ: переменные --c-* в theme.css — это ТРИПЛЕТЫ («79 70 229»), а не
   готовые цвета. Подставлять их в color/background/border без rgb() нельзя:
   объявление становится невалидным и отбрасывается ЦЕЛИКОМ — кнопка
   отрисуется белой с белым текстом, то есть невидимой. Внутри rgb() триплет
   раскрывается, поэтому там же работает и альфа через calc(). */
.btn-primary {
  /* background-color и background-image заданы РАЗДЕЛЬНО, а не сокращением
     `background:`: сокращение сбрасывает цвет в transparent, и там, где
     градиент не отрисован (или его не учитывает анализатор контраста), кнопка
     становится белой с белым текстом. Солидная база делает её читаемой
     всегда, градиент лишь добавляет объём. */
  background-color: rgb(var(--c-indigo-600));
  background-image: linear-gradient(180deg, rgb(var(--c-indigo-600)), rgb(var(--c-indigo-700)));
  color: #fff;
  box-shadow:
    0 1px 2px rgb(15 23 42 / .12),
    0 0 0 1px rgb(var(--c-indigo-500) / calc(.35 * var(--glow-strength))),
    0 4px 16px -4px rgb(var(--c-indigo-500) / calc(.75 * var(--glow-strength)));
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover {
  filter: brightness(1.07);
  box-shadow:
    0 2px 4px rgb(15 23 42 / .14),
    0 0 0 1px rgb(var(--c-indigo-500) / calc(.55 * var(--glow-strength))),
    0 8px 26px -6px rgb(var(--c-indigo-500) / calc(.95 * var(--glow-strength)));
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) scale(.98); }

.btn-ghost {
  background: transparent;
  color: rgb(var(--c-ink-soft));
  border: 1px solid rgb(var(--c-border));
  transition: background .15s ease, border-color .2s ease, transform .12s ease,
              box-shadow .2s ease;
}
.btn-ghost:hover {
  background: rgb(var(--c-hover));
  border-color: rgb(var(--c-border-strong));
  box-shadow: 0 0 0 1px rgb(var(--c-border-strong) / .5);
}
.btn-ghost:active { transform: scale(.98); }

/* ── Карточки: мягкая тень, деликатный подъём и неоновая кромка ──────── */
.card {
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-border-faint));
  box-shadow: 0 1px 2px rgb(15 23 42 / .05), 0 1px 1px rgb(15 23 42 / .03);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
/* Наведение берёт цвет у карточки (--glow), если он задан: подсвеченная
   изумрудом карточка не должна на наведении становиться индиговой. */
.card-hover:hover {
  box-shadow:
    0 8px 30px -8px rgb(15 23 42 / .18),
    0 0 0 1px rgb(var(--glow, var(--c-indigo-500)) / calc(.30 * var(--glow-strength))),
    0 0 26px -8px rgb(var(--glow, var(--c-indigo-500)) / calc(.55 * var(--glow-strength)));
  transform: translateY(-2px);
  border-color: rgb(var(--c-border-strong));
}

/* Карточка с постоянной подсветкой: для блоков, на которые нужно смотреть
   в первую очередь (итоги дня, предупреждения). */
.card-neon {
  border-color: rgb(var(--glow, var(--c-indigo-500)) / calc(.35 * var(--glow-strength)));
}

/* ── Поля ввода ── */
.in-field {
  border: 1px solid rgb(var(--c-border));
  background: rgb(var(--c-canvas));
  color: rgb(var(--c-ink));
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.in-field:hover { border-color: rgb(var(--c-border-strong)); }
.in-field:focus {
  border-color: rgb(var(--c-indigo-500));
  box-shadow:
    0 0 0 3px rgb(var(--c-indigo-500) / .18),
    0 0 20px -6px rgb(var(--c-indigo-500) / calc(.6 * var(--glow-strength)));
  outline: none;
}
.in-field::placeholder { color: rgb(var(--c-ink-fainter)); }

/* ── Доступность: неоновое кольцо для клавиатуры ──────────────────────
   :focus-visible, а не :focus — мышь не должна оставлять ореолы на каждом
   клике, клавиатура — должна, и заметно. */
:focus-visible {
  outline: 2px solid rgb(var(--c-indigo-500));
  outline-offset: 2px;
}

/* ── Скроллбар: тонкий, в тон теме ────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--c-border-strong)) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--c-border-strong)); border-radius: 8px; border: 2.5px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-ink-fainter)); border: 2.5px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Выделение текста — в акцент темы. */
::selection { background: rgb(var(--c-indigo-500) / .28); color: inherit; }

/* ── Логотип: градиентная «капля» с неоновым ореолом ──────────────────── */
.logo-orb {
  /* Как и у кнопки: солидная база отдельно от градиента — буква на логотипе
     белая и не должна оказаться белой на белом. */
  background-color: rgb(var(--c-indigo-500));
  background-image: linear-gradient(135deg, rgb(var(--c-indigo-500)), rgb(var(--c-violet-500)));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .25),
    0 0 0 1px rgb(var(--c-indigo-500) / calc(.4 * var(--glow-strength))),
    0 0 20px -4px rgb(var(--c-indigo-500) / calc(.9 * var(--glow-strength)));
}

/* Медленное «дыхание» ореола — признак живого интерфейса. Отключается
   системной настройкой «уменьшить движение» (см. блок ниже). */
.logo-pulse { animation: crmGlowPulse 3.6s ease-in-out infinite; }
@keyframes crmGlowPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .25),
      0 0 0 1px rgb(var(--c-indigo-500) / calc(.40 * var(--glow-strength))),
      0 0 18px -4px rgb(var(--c-indigo-500) / calc(.75 * var(--glow-strength)));
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .25),
      0 0 0 1px rgb(var(--c-indigo-500) / calc(.55 * var(--glow-strength))),
      0 0 30px -2px rgb(var(--c-indigo-500) / calc(1.05 * var(--glow-strength)));
  }
}

/* ── Активный пункт меню: неоновая левая полоса и заливка ────────────── */
.nav-active {
  background: linear-gradient(90deg,
    rgb(var(--c-indigo-500) / calc(.16 * var(--glow-strength))) 0%,
    rgb(var(--c-indigo-500) / calc(.05 * var(--glow-strength))) 60%,
    transparent 100%);
  box-shadow:
    inset 3px 0 0 0 rgb(var(--c-indigo-500)),
    0 0 18px -8px rgb(var(--c-indigo-500) / calc(.9 * var(--glow-strength)));
}

/* ── Разделитель с подсветкой: тонкая линия под шапкой ───────────────── */
.neon-rule {
  background: linear-gradient(90deg,
    rgb(var(--c-indigo-500) / calc(.75 * var(--glow-strength))) 0%,
    rgb(var(--c-violet-500) / calc(.45 * var(--glow-strength))) 45%,
    transparent 100%);
  height: 1px;
}

/* ===========================================================================
   НЕОН: подсветка блоков. Идёт последней — см. «Порядок важен» выше.
   ===========================================================================

   --glow-strength — единственный переключатель громкости. Светлые темы
   получают мягкую цветную тень, тёмные — полноценное свечение. Цвет ореола
   задаёт класс .glow-<семейство>, беря СВОЙ акцент темы (--c-indigo-500 и
   т.д.), поэтому «неон» в Nord голубой, в Mocha — лавандовый, в Сепии —
   приглушённо-синий, и ни один из них не задан здесь вручную. */

:root { --glow-strength: .60; }      /* светлые: мягкая цветная тень */
html.dark { --glow-strength: 1; }    /* тёмные: неон */

/* Цвет ореола: по одному классу на семейство. Значение — триплет RGB из
   палитры темы, поэтому альфу можно считать в calc(). */
.glow-indigo  { --glow: var(--c-indigo-500); }
.glow-emerald { --glow: var(--c-emerald-500); }
.glow-amber   { --glow: var(--c-amber-500); }
.glow-violet  { --glow: var(--c-violet-500); }
.glow-rose    { --glow: var(--c-rose-500); }
.glow-sky     { --glow: var(--c-sky-500); }
.glow-teal    { --glow: var(--c-teal-500); }

/* Одна тень на все семейства: класс .glow-<fam> задаёт --glow выше, это
   правило превращает его в ореол. Двойная тень — тонкая обводка по контуру
   плюс размытый ореол: так блок читается как «подсвеченный», а не как
   залитый цветом. */
.glow-indigo, .glow-emerald, .glow-amber, .glow-violet,
.glow-rose, .glow-sky, .glow-teal {
  box-shadow:
    0 0 0 1px rgb(var(--glow) / calc(.32 * var(--glow-strength))),
    0 0 28px -6px rgb(var(--glow) / calc(.70 * var(--glow-strength)));
}

/* Неоновая кромка сверху блока: цветная полоса, повторяющая цвет ореола.
   Нужна там, где ореол теряется при масштабировании или на светлом фоне —
   цвет блока читается мгновенно, без разглядывания тени. */
.neon-top { position: relative; overflow: hidden; }
.neon-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgb(var(--glow, var(--c-indigo-500)) / calc(.95 * var(--glow-strength))) 30%,
    rgb(var(--glow, var(--c-indigo-500)) / calc(.95 * var(--glow-strength))) 70%,
    transparent 100%);
  box-shadow: 0 0 14px rgb(var(--glow, var(--c-indigo-500)) / calc(.85 * var(--glow-strength)));
}

/* Усиление для интерактивных элементов: кнопок, активного пункта меню,
   наведения на карточку. */
.glow-strong.glow-indigo, .glow-strong.glow-emerald, .glow-strong.glow-amber,
.glow-strong.glow-violet, .glow-strong.glow-rose, .glow-strong.glow-sky,
.glow-strong.glow-teal {
  box-shadow:
    0 0 0 1px rgb(var(--glow) / calc(.50 * var(--glow-strength))),
    0 0 40px -6px rgb(var(--glow) / calc(.95 * var(--glow-strength)));
}

/* ===========================================================================
   ЖИВЫЕ СТРОКИ И БЛОКИ: подсветка наведения и выделения везде.
   Идёт после неона — правила ниже держат box-shadow тем же приоритетом.
   ===========================================================================

   У строк таблиц свои ограничения, из-за которых обычный box-shadow молча не
   работает: при `border-collapse: collapse` (значение по умолчанию из
   preflight) тень строки не рисуется вообще. Поэтому таблица получает
   `.table-live`, который разводит ячейки нулевым `border-spacing`, и только
   тогда `.row-live` оживает. Без этого стили бы «применились» и не дали
   ничего — ровно тот же класс молчаливой поломки, что и голые триплеты.

   Tailwind-хувер (`hover:bg-slate-50`) у этих строк убран из шаблонов
   намеренно: CDN-скрипт Tailwind инжектирует свои стили ПОСЛЕ этого файла, и
   при равной специфичности его утилита перебила бы наведённую подсветку.
   Здесь ховером владеет только polish.css.

   Цвет ореола у строки берёт класс `.glow-<семейство>` через `--glow`
   (см. выше), поэтому в списке кандидатов строка «Принят» светится изумрудом,
   «Отказ» — розовым, «Интервью» — янтарным: цвет сам говорит статус, ещё до
   чтения бейджа. */

/* Таблица, готовая нести подсветку строк. */
.table-live { border-collapse: separate; border-spacing: 0; }
.table-live > tbody > tr { transition: background-color .18s ease, box-shadow .18s ease; }

/* Строка и «строка-блок» (список div'ами, например сообщения) живут одним
   правилом: одинаковая механика, разная разметка. */
.row-live,
.panel-live { transition: background-color .18s ease, box-shadow .18s ease, color .15s ease; }
/* Нужен для акцентной полосы выделения (::before ниже). */
.panel-live { position: relative; }

/* Наведение: цветная подложка + неоновая рамка по контуру + ореол внутрь и
   наружу. Прозрачность считает calc(), сила та же, что у неона сверху файла.

   Альфы подобраны по живому прогону: при .10/.30/.80 в светлых темах строка
   почти не отличалась от обычной — рамка сливалась с белым фоном и «неон»
   читался как случайный оттенок. Отсюда отдельные пороги для наведения и для
   выделения: выделенная строка обязана отличаться даже без курсора на ней. */
.row-live:hover,
.panel-live:hover {
  background-color: rgb(var(--glow, var(--c-indigo-500)) / calc(.16 * var(--glow-strength)));
  box-shadow:
    inset 0 0 0 1px rgb(var(--glow, var(--c-indigo-500)) / calc(.55 * var(--glow-strength))),
    inset 0 0 34px -14px rgb(var(--glow, var(--c-indigo-500)) / calc(.95 * var(--glow-strength))),
    0 6px 22px -14px rgb(var(--glow, var(--c-indigo-500)) / calc(.75 * var(--glow-strength)));
}
/* Выделенная строка — заметно ярче наведения, и подсветка не гаснет. */
.row-live.is-active,
.panel-live.is-active {
  background-color: rgb(var(--glow, var(--c-indigo-500)) / calc(.18 * var(--glow-strength)));
  box-shadow:
    inset 0 0 0 1px rgb(var(--glow, var(--c-indigo-500)) / calc(.70 * var(--glow-strength))),
    inset 0 0 36px -12px rgb(var(--glow, var(--c-indigo-500)) / calc(.95 * var(--glow-strength))),
    0 8px 26px -12px rgb(var(--glow, var(--c-indigo-500)) / calc(.85 * var(--glow-strength)));
}

/* Выделенная строка (галочка в списке кандидатов) — акцентная полоса слева,
   чтобы выделение было видно и когда курсор уже ушёл со строки.
   Полоса рисуется псевдоэлементом первой ячейки, а не самой ячейкой: абсолютно
   позиционированная ячейка выпадает из таблицы и весь ряд разъезжается.
   Псевдоэлементы на самом <tr> браузеры не создают, поэтому и обход через td. */
.row-live.is-active > td:first-child { position: relative; }
.row-live.is-active > td:first-child::before,
.panel-live.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgb(var(--glow, var(--c-indigo-500)));
  box-shadow: 0 0 12px rgb(var(--glow, var(--c-indigo-500)) / calc(.9 * var(--glow-strength)));
}

/* Живое маркирование активного пункта меню: точка пульсирует. */
.nav-active::after {
  content: "";
  position: absolute;
  right: .55rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 9999px;
  background: rgb(var(--c-indigo-500));
  box-shadow: 0 0 10px rgb(var(--c-indigo-500) / calc(.9 * var(--glow-strength)));
  animation: crmDotPulse 2.8s ease-in-out infinite;
}
@keyframes crmDotPulse {
  0%, 100% { opacity: .45; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Неактивный пункт меню тоже отвечает на наведение — тему задаёт неон. */
.nav-link { transition: background-color .18s ease, box-shadow .18s ease, color .15s ease; }
.nav-link:hover {
  background-color: rgb(var(--c-indigo-500) / calc(.14 * var(--glow-strength)));
  box-shadow:
    inset 0 0 0 1px rgb(var(--c-indigo-500) / calc(.40 * var(--glow-strength))),
    inset 0 0 24px -12px rgb(var(--c-indigo-500) / calc(.90 * var(--glow-strength)));
}

/* ── Живые блоки ──────────────────────────────────────────────────────────
   Дыхание кромки: анимируется только opacity псевдоэлемента. Это композитное
   свойство, поэтому дышать могут десятки блоков без просадки кадров — в
   отличие от box-shadow, который на том же числе элементов съел бы анимацию.
   Отсюда и два разных механизма: кромка дышит дешево, ореол пульсирует
   только там, где блок действительно один. */
.neon-top-live::before { animation: crmEdgeBreathe 4.2s ease-in-out infinite; }
@keyframes crmEdgeBreathe {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* Единичный блок, которому нужен именно дышащий ореол: входная форма,
   итоги дня. box-shadow здесь перебивает тень .card — применяется точечно. */
.live { animation: crmBlockBreathe 5s ease-in-out infinite; }
@keyframes crmBlockBreathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgb(var(--glow, var(--c-indigo-500)) / calc(.20 * var(--glow-strength))),
      0 0 20px -10px rgb(var(--glow, var(--c-indigo-500)) / calc(.40 * var(--glow-strength)));
  }
  50% {
    box-shadow:
      0 0 0 1px rgb(var(--glow, var(--c-indigo-500)) / calc(.34 * var(--glow-strength))),
      0 0 30px -8px rgb(var(--glow, var(--c-indigo-500)) / calc(.75 * var(--glow-strength)));
  }
}

/* ── Мелочи, которые тоже должны отзываться на курсор ───────────────────── */
/* Теги и бейджи: подъём и ореол, чтобы чипы не выглядели мёртвым текстом. */
.chip-live { transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.chip-live:hover {
  box-shadow:
    0 0 0 1px rgb(var(--glow, var(--c-indigo-500)) / calc(.40 * var(--glow-strength))),
    0 0 18px -5px rgb(var(--glow, var(--c-indigo-500)) / calc(.85 * var(--glow-strength)));
  transform: translateY(-1px);
}

/* Призрачная кнопка: цветное кольцо вместо серого. */
.btn-ghost:hover {
  background: rgb(var(--c-hover));
  border-color: rgb(var(--c-indigo-500) / calc(.45 * var(--glow-strength)));
  box-shadow:
    0 0 0 1px rgb(var(--c-indigo-500) / calc(.28 * var(--glow-strength))),
    0 4px 18px -8px rgb(var(--c-indigo-500) / calc(.75 * var(--glow-strength)));
}

/* Уважение к системной настройке: никакого движения. */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .logo-pulse { animation: none !important; }
  .nav-active::after, .neon-top-live::before, .live { animation: none !important; }
  .card-hover:hover { transform: none; }
  .btn-primary:hover { transform: none; }
  .chip-live:hover { transform: none; }
}