/* ============================================================
   Lyntrix Admin — Design tokens
   Общие переменные (R-S1). Импортируется и web_auth, и admin.
   Светлая тема — :root. Тёмная — [data-theme="dark"].
   ============================================================ */

:root {
  /* Схема оформления для НАТИВНЫХ элементов браузера: скроллбары, выпадающие
     списки, и главное — автозаполнение форм. Без неё Safari и Chrome считают
     страницу светлой и подставляют свой светлый фон в поля логина/пароля,
     который перебивает любой background (026). */
  color-scheme: light;

  /* Surfaces & neutrals */
  --bg:           #E7E9E4;
  --surface:      #F5F5F1;
  --raised:       #E9ECE6;
  --border:       #D8DBD4;
  --border-card:  #DFE2DB;
  --hairline:     rgba(46, 57, 50, .08);

  /* Text */
  --t-strong:     #2E3932;
  --t-body:       #4F5A51;
  --t-muted:      #808981;

  /* Brand & accent */
  --brand:        #0B7756;
  --brand-press:  #08563E;
  --up:           #D8423A;
  --primary-fg:   #FFFFFF;

  /* Price / delta */
  --drop-fg:      #06754F;  --drop-bg:  #BFE9CE;  --drop-bd:  #97D4B0;
  --rise-fg:      #FFFFFF;  --rise-bg:  #D8423A;
  --min-fg:       #7E5300;  --min-bg:   #F5E2A7;  --min-bd:   #E7CA76;

  /* Secondary button */
  --btn2-bg:      #F5F5F1;  --btn2-bd:  #D8DBD4;  --btn2-fg:  #4F5A51;

  /* Danger (soft) */
  --danger-soft:  #F6E0DC;  --danger-bd: #E8A49E;

  /* Nav active / tonal */
  --nav-active-bg: #E2EFE6;  --nav-active-fg: #0B7E5B;

  /* Sparkline track */
  --spark-track:  #EBEDE7;

  /* Marketplace dots */
  --ozon:         #005BFF;
  --wildberries:  #7B2FF7;
  --yandex:       #FC3F1D;

  /* Категориальная палитра графиков (6 слотов, фикс. порядок; проверена на
     CVD-разделение и контраст к --surface валидатором dataviz). */
  --cat-1: #1BAF7A;
  --cat-2: #EDA100;
  --cat-3: #2A78D6;
  --cat-4: #E34948;
  --cat-5: #4A3AA7;
  --cat-6: #1791BC;

  /* Effects */
  --btn-shadow:   0 6px 16px rgba(14,158,114,.30);
  --focus-ring:   0 0 0 3px rgba(14,158,114,.14);
  --shadow-card:  0 1px 3px rgba(20,40,32,.08);
  --shadow-popup: 0 16px 50px rgba(20,40,32,.18);

  /* Typography */
  --font:         'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --r-xs: 6px; --r-sm: 8px; --r-input: 10px; --r-field: 11px;
  --r-btn: 12px; --r-card: 14px; --r-panel: 16px; --r-pill: 999px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #1E2429;
  --surface:      #272E33;
  --raised:       #323A40;
  --border:       #404A51;
  --border-card:  #404A51;
  --hairline:     rgba(255, 255, 255, .06);

  --t-strong:     #F4F7F9;
  --t-body:       #CDD5DB;
  --t-muted:      #939EA6;

  --brand:        #2BD89F;
  --brand-press:  #2BD89F;
  --up:           #F2554D;
  --primary-fg:   #06281E;

  --drop-fg:      #3FE0AA;  --drop-bg:  rgba(63,224,170,.15);  --drop-bd:  rgba(63,224,170,.38);
  --rise-fg:      #FFFFFF;  --rise-bg:  #F2554D;
  --min-fg:       #F6CB5E;  --min-bg:   rgba(246,203,94,.15);  --min-bd:   rgba(246,203,94,.36);

  --btn2-bg:      #323A40;  --btn2-bd:  #485259;  --btn2-fg:  #CDD5DB;

  --danger-soft:  rgba(242,85,77,.13);  --danger-bd: rgba(242,85,77,.42);

  --nav-active-bg: rgba(43,216,159,.12);  --nav-active-fg: #2BD89F;

  --spark-track:  #323A40;

  --cat-1: #189567;
  --cat-2: #C68200;
  --cat-3: #4A8FE0;
  --cat-4: #E5544D;
  --cat-5: #8B7BE8;
  --cat-6: #2399BF;

  --btn-shadow:   none;
  --focus-ring:   0 0 0 3px rgba(43,216,159,.20);
  --shadow-card:  0 1px 3px rgba(0,0,0,.30);
  --shadow-popup: 0 16px 50px rgba(0,0,0,.50);
}

/* Фирменный знак — маска, залитая цветом бренда: всегда совпадает
   со словом «Lyntrix» в обеих темах (как в lyntrix-frontend). */
.logo-mask {
  display: block; flex: none;
  background: var(--brand);
  mask: url("/assets/logo-mask-70238b77.webp") center / contain no-repeat;
  -webkit-mask: url("/assets/logo-mask-70238b77.webp") center / contain no-repeat;
}

/* ============================================================
   Единый переключатель темы (toggle) — общий для всего проекта
   (admin, веб-вход; идентичен профилю Chrome-расширения).
   Состояние «ночь» — класс .on (ставится при data-theme="dark").
   ============================================================ */
.theme-switch {
  position: relative; display: inline-flex; align-items: center; flex: none;
  width: 52px; height: 30px; padding: 0; border: none; border-radius: 999px;
  background: #bcd7f5; /* день — голубое небо */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  cursor: pointer; transition: background .18s ease, box-shadow .18s ease;
}
.theme-switch.on,
html[data-theme="dark"] .theme-switch { /* раннее «ночь»-состояние по теме — без мигания свитча */
  background: #1e293b; /* ночь — тёмное небо */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.theme-switch-thumb {
  position: absolute; left: 3px; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .18s ease;
}
.theme-switch.on .theme-switch-thumb,
html[data-theme="dark"] .theme-switch .theme-switch-thumb { transform: translateX(22px); }
.theme-switch-icon {
  position: absolute; width: 15px; height: 15px; pointer-events: none; transition: opacity .18s ease;
}
.theme-switch-icon.icon-sun  { color: #ef7c0a; }
.theme-switch-icon.icon-moon { color: #475569; opacity: 0; }
.theme-switch.on .icon-sun,
html[data-theme="dark"] .theme-switch .icon-sun  { opacity: 0; }
.theme-switch.on .icon-moon,
html[data-theme="dark"] .theme-switch .icon-moon { opacity: 1; }
.theme-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }