/* Дизайн-токены Web CRM — система MODERN AUTOMOTIVE (2026-09-23).

   Светлая тема — тема ПО УМОЛЧАНИЮ (:root). Тёмная — [data-theme="dark"],
   включается кнопкой в шапке (core/theme.js); выбор пользователя хранится
   в localStorage (autoskolmsk_theme) и не сбрасывается.

   Все компоненты берут цвета/радиусы/тени только отсюда. Старые имена
   (--card, --card-2, --card-elevated, --text-dim, --accent*, --on-accent,
   --green*) оставлены АЛИАСАМИ на новые токены — экраны и JS-строки со
   style="color:var(--accent)" продолжают работать без правок.

   Предыдущая тёмная тема Black Glass Premium (золотой акцент #e3a565,
   декоративный слой «стекла») снята: основной акцент — синий в обеих темах.
   Mini App (/opt/bots/autoskol_buh/webapp) этим файлом не затрагивается. */

/* ---------- Общие (не зависят от темы) ---------- */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* радиусы */
  --radius-lg: 18px;   /* карточки, модалки */
  --radius: 14px;      /* блоки, панели */
  --radius-sm: 10px;   /* поля ввода, кнопки */
  --radius-pill: 999px;

  /* отступы */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* типографика */
  --fs-page: 24px;       /* заголовок страницы */
  --fs-section: 17px;    /* заголовок раздела */
  --fs-card: 15px;       /* заголовок карточки */
  --fs-body: 14px;
  --fs-secondary: 13px;
  --fs-caption: 12px;
  --fs-kpi: 28px;        /* цифры показателей */

  /* высота контролов: 40px десктоп / 44px мобильный (см. медиа ниже) */
  --control-h: 40px;
  --topbar-h: 60px;
}
@media (max-width: 860px) {
  :root { --control-h: 44px; --fs-page: 22px; --fs-kpi: 24px; }
}

/* ---------- Светлая тема (по умолчанию) ---------- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* фон — холодный серо-синий, заметно темнее карточек (именно этот
     контраст даёт глубину); белый как фон приложения НЕ используется */
  --bg: #e5eaf0;
  --bg-2: #d8e0e9;                       /* более глубокий серо-синий внизу/по краям */
  --bg-glow: rgba(37, 99, 235, 0.07);    /* мягкий холодный блик сверху */

  --surface: #f9fbfd;                    /* карточки — почти белые, чистые */
  --surface-solid: #ffffff;              /* модалки, всплывающие панели, secondary-кнопки */
  --surface-field: #ffffff;              /* поля ввода — белые (отделены рамкой) */
  --surface-hover: #eef3f8;
  --surface-muted: #edf2f7;              /* подложки чипов, мелких кнопок, бейджей */
  --border: rgba(15, 23, 42, 0.09);
  --border-strong: rgba(15, 23, 42, 0.15);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);   /* светлая кромка сверху карточки */

  /* навигация — тёмный сине-графитовый */
  --nav-bg: #17324d;
  --nav-bg-2: #10283f;
  --nav-text: rgba(226, 236, 247, 0.74);
  --nav-text-strong: #ffffff;
  --nav-hover: rgba(255, 255, 255, 0.07);
  --nav-border: rgba(255, 255, 255, 0.08);

  /* левая панель (меню) — светлая серо-синяя, не белая; --nav-* выше
     остаются для тёмной шапки на телефоне и hero на Главной */
  --sidebar-bg: #e8eef5;
  --sidebar-text: #334155;
  --sidebar-text-strong: #0f172a;
  --sidebar-hover: rgba(15, 23, 42, 0.05);
  --sidebar-border: rgba(15, 23, 42, 0.09);
  --sidebar-active-bg: rgba(37, 99, 235, 0.11);
  --sidebar-active-text: #2563eb;

  --text: #0f172a;
  --text-secondary: #475569;
  --text-faint: #64748b;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --primary-wash: rgba(37, 99, 235, 0.08);
  --primary-border: rgba(37, 99, 235, 0.28);
  --on-primary: #ffffff;

  --success: #16a34a;
  --success-text: #15803d;
  --success-wash: rgba(22, 163, 74, 0.1);
  --warning: #d97706;
  --warning-text: #b45309;
  --warning-wash: rgba(217, 119, 6, 0.1);
  --danger: #dc2626;
  --danger-text: #b91c1c;
  --danger-wash: rgba(220, 38, 38, 0.08);
  --info: #0891b2;
  --info-text: #0e7490;
  --info-wash: rgba(8, 145, 178, 0.1);
  --neutral-wash: rgba(100, 116, 139, 0.12);

  --shadow-sm: var(--card-highlight), 0 1px 2px rgba(15, 35, 60, 0.05), 0 6px 18px -10px rgba(15, 35, 60, 0.14);
  --shadow-md: var(--card-highlight), 0 2px 4px rgba(15, 35, 60, 0.05), 0 14px 30px -14px rgba(15, 35, 60, 0.2);
  --shadow-lg: 0 24px 60px -20px rgba(15, 35, 60, 0.4);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
  --shadow-primary: 0 1px 2px rgba(37, 99, 235, 0.25), 0 6px 16px -8px rgba(37, 99, 235, 0.55);
  --backdrop: rgba(10, 25, 41, 0.45);
  --topbar-bg: rgba(240, 244, 248, 0.86);   /* светлый серо-синий, полупрозрачный — в тон левой панели */
}

/* ---------- Тёмная тема (по кнопке) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1a28;
  --bg-2: #0a1320;
  --bg-glow: rgba(59, 130, 246, 0.1);

  --surface: #152334;
  --surface-solid: #182839;
  --surface-field: #1b2c3f;
  --surface-hover: #1d3046;
  --surface-muted: #1c2d41;
  --border: rgba(148, 176, 210, 0.13);
  --border-strong: rgba(148, 176, 210, 0.22);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --nav-bg: #0f2238;
  --nav-bg-2: #0a1a2c;
  --nav-text: rgba(214, 228, 244, 0.7);
  --nav-text-strong: #ffffff;
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-border: rgba(255, 255, 255, 0.07);

  --sidebar-bg: #13202f;
  --sidebar-text: rgba(214, 228, 244, 0.76);
  --sidebar-text-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --sidebar-border: rgba(148, 176, 210, 0.12);
  --sidebar-active-bg: rgba(59, 130, 246, 0.16);
  --sidebar-active-text: #93c5fd;

  --text: #e7edf4;
  --text-secondary: #a7b4c4;
  --text-faint: #8190a3;

  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-wash: rgba(59, 130, 246, 0.16);
  --primary-border: rgba(96, 165, 250, 0.4);
  --on-primary: #ffffff;

  --success: #22c55e;
  --success-text: #4ade80;
  --success-wash: rgba(34, 197, 94, 0.14);
  --warning: #f59e0b;
  --warning-text: #fbbf24;
  --warning-wash: rgba(245, 158, 11, 0.14);
  --danger: #ef4444;
  --danger-text: #f87171;
  --danger-wash: rgba(239, 68, 68, 0.14);
  --info: #06b6d4;
  --info-text: #22d3ee;
  --info-wash: rgba(6, 182, 212, 0.14);
  --neutral-wash: rgba(148, 163, 184, 0.14);

  --shadow-sm: var(--card-highlight), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: var(--card-highlight), 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.3);
  --shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -8px rgba(59, 130, 246, 0.6);
  --backdrop: rgba(3, 9, 16, 0.62);
  --topbar-bg: rgba(14, 26, 40, 0.86);
}

/* ---------- Алиасы старых имён (используются экранами и JS) ---------- */
:root {
  --card: var(--surface);
  --card-2: var(--surface-muted);
  --card-elevated: var(--surface);
  --text-dim: var(--text-secondary);
  --accent: var(--primary);
  --accent-dark: var(--primary-hover);
  --accent-wash: var(--primary-wash);
  --on-accent: var(--on-primary);
  --green: var(--success);
  --green-wash: var(--success-wash);
}

/* ---------- База ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  /* Живой, но спокойный фон: мягкий вертикальный переход тона + едва
     заметный холодный блик сверху-слева. Без шума и декоративных фигур. */
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 620px at 0% -12%, var(--bg-glow), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-repeat: no-repeat;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
::selection { background: var(--primary-wash); }

a { color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Логотип AutoSkolMSK — единый компонент .brand-logo ----------
   Шапка, боковое меню, экран входа и чат сотрудников. Картинка
   (icons/logo-autoskolmsk.jpg) показывается как есть — круглый знак,
   цвета и пропорции не трогаем.
   Состояния:
     обычное — спокойно, без вращения;
     hover   — лёгкое синее свечение + scale 1.06 (180ms), только на
               устройствах с hover; то же при фокусе с клавиатуры;
     loading — по клику router.js ставит topbar__brand-icon--pop (класс
               уже был, JS не менялся): вокруг знака пробегает световое
               кольцо (::before, синее с оранжевой искрой), сам знак
               слегка подсвечен;
     success — кольцо гаснет, короткая мягкая сине-оранжевая вспышка
               (::after), потом обычное состояние.
   Анимация конечная (1.3s) и навигацию не задерживает: переход по
   href="#home" идёт сразу, кольцо доигрывает поверх. */
.brand-logo {
  --logo-size: 30px;
  --logo-ring: #2563eb;
  --logo-ring-head: #60a5fa;
  --logo-accent: #fb923c;
  --logo-edge: rgba(15, 23, 42, 0.14);
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 50%;
}
/* тёмная тема и тёмно-синие зоны (меню; шапка на телефоне) */
:root[data-theme="dark"] .brand-logo,
.nav-drawer .brand-logo {
  --logo-ring: #3b82f6;
  --logo-ring-head: #93c5fd;
  --logo-edge: rgba(255, 255, 255, 0.16);
}
@media (max-width: 860px) {
  .topbar .brand-logo {
    --logo-ring: #3b82f6;
    --logo-ring-head: #93c5fd;
    --logo-edge: rgba(255, 255, 255, 0.16);
  }
}
.brand-logo--nav { --logo-size: 34px; }
.brand-logo--lg { --logo-size: 56px; display: flex; margin: 0 auto; }

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--logo-edge), var(--shadow-sm);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.brand-logo--lg img { box-shadow: 0 0 0 1px var(--logo-edge), var(--shadow-md); }

/* световое кольцо (loading) и вспышка (success) — вне картинки, по контуру */
.brand-logo::before,
.brand-logo::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.brand-logo::before {
  background: conic-gradient(
    transparent 0turn,
    transparent 0.42turn,
    color-mix(in srgb, var(--logo-ring) 22%, transparent) 0.6turn,
    var(--logo-ring) 0.86turn,
    var(--logo-ring-head) 0.95turn,
    var(--logo-accent) 0.985turn,
    transparent 1turn
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.brand-logo::after {
  inset: -2px;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--logo-ring-head) 70%, transparent),
    0 0 7px 1px color-mix(in srgb, var(--logo-ring) 40%, transparent),
    0 0 10px 1px rgba(251, 146, 60, 0.16);
}

@media (hover: hover) {
  a:hover > .brand-logo img {
    transform: scale(1.06);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--logo-ring-head) 65%, transparent),
      0 0 10px color-mix(in srgb, var(--logo-ring) 40%, transparent);
  }
}
a:focus-visible > .brand-logo img {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--logo-ring-head) 65%, transparent),
    0 0 10px color-mix(in srgb, var(--logo-ring) 40%, transparent);
}

.brand-logo.topbar__brand-icon--pop::before { animation: brand-logo-ring 1.3s linear; }
.brand-logo.topbar__brand-icon--pop::after { animation: brand-logo-success 1.3s ease-out; }
.brand-logo.topbar__brand-icon--pop img { animation: brand-logo-lit 1.3s ease-out; }

@keyframes brand-logo-ring {
  0% { opacity: 0; transform: rotate(-90deg); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  84% { opacity: 0; transform: rotate(360deg); }
  100% { opacity: 0; transform: rotate(360deg); }
}
@keyframes brand-logo-success {
  0%, 68% { opacity: 0; transform: scale(0.96); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}
@keyframes brand-logo-lit {
  0% { filter: brightness(1); }
  15%, 70% { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}

/* reduced motion: без вращения и масштаба — только мягкое появление
   и затухание свечения; клик/переход работают как обычно. Общее правило
   выше (`*`) на ::before/::after не действует, поэтому задано явно. */
@media (prefers-reduced-motion: reduce) {
  .brand-logo img { transform: none !important; }
  .brand-logo.topbar__brand-icon--pop::before { animation: none; }
  .brand-logo.topbar__brand-icon--pop::after { animation: brand-logo-soft 0.9s ease-out; }
}
@keyframes brand-logo-soft {
  0% { opacity: 0; }
  35% { opacity: 0.9; }
  100% { opacity: 0; }
}