/*
 * MTRAF.IO brand theme layer — зеркало config.ktui.css из брендбука (§7.2,
 * «Интерфейс личного кабинета — Metronic 9»). Источник значений: текстовая
 * версия брендбука v1.0 (октябрь 2026).
 *
 * Как это работает: токены Metronic объявлены в styles.css внутри @layer
 * theme; этот файл подключается ПОСЛЕ styles.css и custom.css и не лежит
 * ни в одном layer, поэтому его правила выигрывают каскад без правок
 * verbatim-билда (который менять нельзя, см. AGENTS.md).
 *
 * Блок "@theme inline" из брендбука здесь невозможен (он требует пересборки
 * styles.css): вместо утилит вида bg-brand-accent используются явные классы
 * ниже (.kt-btn-accent, .text-success, .bg-success-9, ...).
 *
 * Правила бренда: индиго #321C86 — основа; лайм #9AC255 — только действие и
 * результат (≤10% площади, текст на лайме — тёмный #1A1052); нейтральные —
 * с фиолетовым подтоном; успех #15803D отличён от лайма.
 */

/* --- Токены темы: светлая (§7.2 :root) --- */
/* Отступ от §7.2 по решению владельца: фон страницы не белоснежный #FFFFFF,
   а Mist #F4F3FA — как в стоковой теме (zinc-100), но с фирменным фиолетовым
   подтоном; карточки остаются белыми. §7.2 не задаёт --popover* и
   --card-foreground — они добронены из палитры (popover = card,
   card-foreground = foreground), иначе выпадающие меню и текст карточек
   остаются на стоковых серых. */
:root {
  --background: #F4F3FA;
  --foreground: #1E1A33;
  --card: #FFFFFF;
  --card-foreground: #1E1A33;
  --popover: #FFFFFF;
  --popover-foreground: #1E1A33;
  --muted: #F4F3FA;
  --muted-foreground: #6B6785;
  --border: #ECEAF5;
  --input: #E3E0F0;
  --ring: #C9C2F0;
  --primary: #321C86;
  --primary-foreground: #FFFFFF;
  --secondary: #F4F3FA;
  --secondary-foreground: #4B4670;
  --accent: #F0EEFA;
  --accent-foreground: #321C86;
  --mono: #120C2E;
  --mono-foreground: #FFFFFF;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --brand-accent: #9AC255;
  --brand-accent-foreground: #1A1052;
  --success: #15803D;
  --warning: #F5A524;
  --info: #2563EB;
  --radius: 0.5rem;
}

/* --- Токены темы: тёмная --- */
/* Отступ от §7.2 по итогам подбора цветов (октябрь 2026): нейтральная
   серая шкала (пресет «Средний серый» временного подборщика, удалён вместе
   с подборщиком) вместо фиолетового фона брендбука. --primary/--ring и
   семантика (--mono*, --destructive*) — из брендбука. */
.dark {
  --background: #1E1E1E;
  --foreground: #D6D6D6;
  --card: #252525;
  --card-foreground: #D6D6D6;
  --popover: #252525;
  --popover-foreground: #D6D6D6;
  --muted: #2A2A2A;
  --muted-foreground: #909090;
  --border: #343434;
  --input: #3D3D3D;
  --ring: #4837A2;
  --primary: #6D55EE;
  --primary-foreground: #FFFFFF;
  --secondary: #2D2D2D;
  --secondary-foreground: #BCBCBC;
  --accent: #2D2D2D;
  --accent-foreground: #D6D6D6;
  --mono: #D6D2E6;
  --mono-foreground: #120C2E;
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
}
/* --success/--warning/--info/--brand-accent* в тёмной теме наследуются из :root (§7.2). */

/* --- Accent: одно главное действие экрана (§7.1, §7.3) --- */
/* Solid-кнопкой в этом билде является базовый .kt-btn (фон --primary);
   kt-btn-primary — лишь маркер для outline/ghost. Акцент повторяет ту же
   схему: цвет поверх базовой геометрии .kt-btn. */
.kt-btn.kt-btn-accent {
  background-color: var(--brand-accent);
  color: var(--brand-accent-foreground);
}
.kt-btn.kt-btn-accent:hover,
.kt-btn.kt-btn-accent.active {
  background-color: color-mix(in oklab, var(--brand-accent) 88%, black);
  color: var(--brand-accent-foreground);
}

/* --- Семантические утилиты (в verbatim-билде отсутствуют, см. AGENTS.md) --- */
.text-success { color: var(--success); }
.text-info    { color: var(--info); }
/* Перекрывает литерал #a16207 из custom.css: warning теперь бренд-токен. */
.text-warning { color: var(--warning); }

/* Плашки статуса по §7.4: фон — 9% цвета, рамка — 25%. */
.bg-success-9    { background-color: color-mix(in oklab, var(--success) 9%, transparent); }
.border-success-25 { border-color: color-mix(in oklab, var(--success) 25%, transparent); }

/* --- Совместимость: остаточные emerald-классы → бренд-токен успеха --- */
/* Шаблоны переведены на .text-success/.bg-success-9/.border-success-25, но
   классы emerald-* ещё встречаются в незакоммиченном WIP-пользователя JS
   (manager/billing*.js, manager/transactions.js — не редактируем). Эти
   правила перекрашивают их каскадом, файлы не трогая. Удалить вместе с
   последним использованием emerald-*. */
.text-emerald-600  { color: var(--success); }
.bg-emerald-50     { background-color: color-mix(in oklab, var(--success) 9%, transparent); }
.border-emerald-200 { border-color: color-mix(in oklab, var(--success) 25%, transparent); }

/* --- Логотип в тёмной теме: акцент темы, фиолетовый #6D55EE --- */
/* Класс ставится шаблоном только на ДЕФОЛТНЫЙ монохромный логотип (когда
   override network.logo_url пуст): brightness(0) сводит любой исходный цвет
   в чёрный силуэт, остальная цепочка перекрашивает его точно в --primary
   тёмной темы #6D55EE = rgb(109,85,238) (цепочка подобрана пересчётом
   матриц CSS-фильтров, погрешность < 0.02/255 на канал; при смене --primary
   тёмной темы цепочку надо пересчитывать). Загруженный кастомный логотип
   не фильтруется — он показывается как есть в обеих темах. display не
   трогаем: видимость default-logo/small-logo управляется collapse-логикой
   styles.css. */
.dark .logo-auto {
  filter: brightness(0) invert(18.57%) sepia(42.35%) saturate(410.22%)
    hue-rotate(-150.72deg) brightness(225.4%) contrast(238.86%);
}

/* --- Скобки фокуса (§5.1) --- */
/* Фирменный элемент из знака: рамка из четырёх угловых скоб вокруг объекта,
   на который нужно обратить внимание. Угол — L-скоба толщиной t, плечо
   L = 3,3 t, концы срезаны под 45°. Отступ от содержимого 3 t (минимум 2 t).
   Размеры: S t=2/L=7px, M t=4/L=13px, L t=6/L=20px, XL t=8/L=26px.
   Цвет один на рамку: индиго на светлом, лайм на тёмном (§5.1).
   Правила НЕЛЬЗЯ: скруглять, прямые концы, <4 углов, t > L/3, поворот.
   Не больше одной рамки на экран. Анимация — только появление
   (opacity 0→1 + scale 0.96→1, 150 мс). */
.focus-frame {
  --t: 4px;                  /* толщина */
  --l: calc(var(--t) * 3.3); /* плечо */
  --c: #321C86;              /* индиго на светлом */
  position: relative;
  display: inline-block;
  padding: calc(var(--t) * 3);
}
.dark .focus-frame { --c: #9AC255; } /* лайм на тёмном */
.focus-frame > i {
  position: absolute;
  width: var(--l); height: var(--l);
  background: var(--c);
  clip-path: polygon(0 0, 100% 0,
    calc(100% - var(--t)) var(--t), var(--t) var(--t),
    var(--t) calc(100% - var(--t)), 0 100%);
}
.focus-frame > i:nth-child(1) { top: 0; left: 0 }
.focus-frame > i:nth-child(2) { top: 0; right: 0; transform: scaleX(-1) }
.focus-frame > i:nth-child(3) { bottom: 0; left: 0; transform: scaleY(-1) }
.focus-frame > i:nth-child(4) { bottom: 0; right: 0; transform: scale(-1) }
@media (prefers-reduced-motion: no-preference) {
  .focus-frame { animation: focus-frame-in 150ms ease-out; }
}
@keyframes focus-frame-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}