/* Темы оформления. Тёмная — по умолчанию (её значения живут в :root каждой
   страницы), светлая — переопределением на html[data-theme="light"].

   Селектор html[data-theme=...] специфичнее, чем :root страницы (0,1,1 против
   0,1,0), поэтому порядок подключения не важен — светлая тема выигрывает всегда.

   Цвета МЕНЮ вынесены в собственные --nav-*: страницы имеют разные палитры
   (у 3D-вьювера свой тёмно-коричневый :root), а меню обязано выглядеть
   одинаково везде. */

:root {
  --nav-bg: #23262d;
  --nav-panel2: #2c2f37;
  --nav-line: #3a3f4a;
  --nav-txt: #dad8d3;
  --nav-txt2: #9498a1;
  --nav-accent: #c8a26a;
}

html[data-theme="light"] {
  /* Палитра ERP (Tailwind): фон slate-50, карточки белые, границы slate-200,
     текст slate-900/500, основной цвет blue-900. Латунь остаётся акцентом бренда
     только в тёмной теме — в светлой она проигрывала по контрасту и выбивалась
     из общего вида с ERP. */
  --bg: #f8fafc;        /* slate-50  */
  --panel: #ffffff;
  --panel2: #f1f5f9;    /* slate-100 */
  --line: #e2e8f0;      /* slate-200 */
  --txt: #0f172a;       /* slate-900 */
  --txt2: #64748b;      /* slate-500 */
  --accent: #1e3a8a;    /* blue-900  */
  --danger: #dc2626;    /* red-600   */
  --ok: #16a34a;        /* green-600 */

  /* имена переменных 3D-вьювера отличаются от остальных страниц */
  --text: #0f172a;
  --muted: #64748b;

  --nav-bg: #ffffff;
  --nav-panel2: #f1f5f9;
  --nav-line: #e2e8f0;
  --nav-txt: #0f172a;
  --nav-txt2: #64748b;
  --nav-accent: #1e3a8a;
}

/* Кнопки и бейджи в светлой теме — сплошной blue-900 вместо латунного градиента.
   Градиент задан прямо в разметке страниц, поэтому перекрываем адресно. */
html[data-theme="light"] button.primary,
html[data-theme="light"] .go,
html[data-theme="light"] .tabs button.on,
html[data-theme="light"] .models button.on,
html[data-theme="light"] .anims-head button.on {
  background: #1e3a8a; color: #ffffff; border-color: #1e3a8a; font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,23,42,.12);
}
html[data-theme="light"] button.primary:hover,
html[data-theme="light"] .go:hover { background: #1e40af; }   /* blue-800 */
html[data-theme="light"] .chip.admin,
html[data-theme="light"] .kind.manual { background: #1e3a8a; color: #ffffff; }
html[data-theme="light"] .chip.off { background: #cbd5e1; color: #0f172a; }   /* slate-300 */
/* green-600 с белым текстом даёт всего 3.3 — берём green-700 (4.5+) */
html[data-theme="light"] .chip.on  { background: #15803d; color: #ffffff; }
/* инициалы в заглушке аватара: slate-500 на slate-100 — 4.34, поднимаем до slate-600 */
html[data-theme="light"] .ava.ph { color: #475569; }
html[data-theme="light"] .kind.auto { background: #bfdbfe; color: #0f172a; }
html[data-theme="light"] .kind.prerestore { background: #e9d5ff; color: #0f172a; }

/* Тёмные поверхности, зашитые мимо переменных (код, монопанели, заметки).
   Их немного, и держать их здесь дешевле, чем переводить каждую страницу
   на новые переменные. */
html[data-theme="light"] #simcode,
html[data-theme="light"] .codebar textarea,
html[data-theme="light"] pre,
html[data-theme="light"] code,
html[data-theme="light"] .bit {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: var(--line) !important;
}
html[data-theme="light"] .note { background: #eff6ff; }   /* blue-50 */
html[data-theme="light"] #codewrap .codehead { background: var(--panel2); }
html[data-theme="light"] .modal { background: rgba(120,116,108,.35); }
html[data-theme="light"] .digit-thumb canvas { background: #f1f5f9; }
/* сообщения на странице входа: тёмно-бордовый/тёмно-зелёный фон на белом читался пятном */
html[data-theme="light"] .msg.err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
html[data-theme="light"] .msg.ok  { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
/* всплывающая подсказка остаётся тёмной намеренно — так она читается на любом фоне */

/* «Опасные» кнопки рассчитаны на тёмный фон: светло-розовый текст #f0c2c2 на
   белом не читается. В светлой теме — red-700 на светлой рамке, как в ERP. */
html[data-theme="light"] button.danger,
html[data-theme="light"] .who .out:hover { color: #b91c1c; border-color: #fecaca; }

/* Панель 3D-вьювера объявляет свой --accent, поэтому активную кнопку красим
   адресно. Круглые свотчи (button.color) НЕ трогаем — это реальные цвета изделия. */
html[data-theme="light"] #appnav #panel button.active:not(.color) {
  background: #1e3a8a; border-color: #1e3a8a; color: #ffffff;
}

/* На время переключения темы глушим ВСЕ переходы.
   Причина та же, что у ширины меню (см. sidebar.css): если у свойства есть
   transition, а его значение приходит из var(), изменённой на предке
   (html[data-theme]), Chrome не перезапускает переход и свойство НАВСЕГДА
   застревает на старом значении. Без этого правила кнопки редактора
   оставались тёмными в светлой теме — 24 штуки. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after { transition: none !important; }

/* Кнопка переключения темы */
.themebtn {
  cursor: pointer; flex: none;
  width: 26px; height: 26px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nav-panel2); color: var(--nav-txt2);
  border: 1px solid var(--nav-line); border-radius: 7px; font-size: 13px;
  transition: background .15s ease, color .15s ease, transform .08s ease;
}
.themebtn:hover { background: var(--nav-line); color: var(--nav-txt); }
.themebtn:active { transform: scale(.9); }
/* на странице входа меню нет — кнопка висит в углу карточки */
.themebtn.corner { position: absolute; top: 14px; right: 14px; }