/* Оболочка админки площадки: графитовый сайдбар.
 *
 * Различие площадки и кабинета сделано светлотой, а не тоном. Тон
 * пришлось бы брать из семантики — зелёный уже значит «успешно»,
 * охра «внимание», — а разница в светлоте видна всем, включая тех,
 * кто не различает красный и зелёный, и переживает чёрно-белый
 * скриншот.
 *
 * Правило живёт в отдельном файле, а не в общем orta.css: иначе
 * приходится отменять его в кабинете селектором-исключением, а
 * такие отмены рано или поздно промахиваются мимо какой-нибудь
 * страницы. Здесь площадка просто не знает про кабинет.
 *
 * Разметка — unfold 0.62 (admin/nav_sidebar.html и
 * unfold/helpers/navigation.html):
 *
 *   #nav-sidebar            — внешняя колонна, сюда кладём графит;
 *     #nav-sidebar-inner    — <nav> со СВОЕЙ светлой заливкой bg-base-50;
 *       шапка с названием, поиск, группы h2 + ol > li > a.
 *
 * Прежняя версия красила `#nav-sidebar` и `aside nav`. Второго
 * селектора в этой версии unfold нет вовсе, а светлая заливка
 * `#nav-sidebar-inner` ложилась поверх графита — и светло-серые
 * пункты меню (base-300) оказывались на почти белом фоне: контраст
 * ~1.4:1, меню площадки почти не читалось. Поэтому внутренняя панель
 * здесь прозрачна, а каждый текст внутри сайдбара перекрашен под
 * тёмный фон явно: утилиты unfold рассчитаны на светлый.
 *
 * Селекторы с id намеренно: утилиты unfold (`text-primary-600`,
 * `hover:…`) — классы, и перебить их без !important можно только
 * весом id. Цифры контраста ниже — к фону base-900 (24, 24, 27).
 */

#nav-sidebar {
  background: rgb(var(--color-base-900));
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* В тёмной теме страница сама base-900, и сайдбар того же тона слился
   бы с ней: держим его на ступень темнее. */
.dark #nav-sidebar {
  background: rgb(var(--color-base-950));
}

#nav-sidebar-inner {
  background: transparent;
  color: rgb(var(--color-base-300));
}

/* --- Шапка: значок и «ORTA · Администрирование» --- */

/* Название сайта у unfold — text-font-important-light, то есть почти
   чёрный: на графите его не было видно вовсе. base-50 — 17:1. Тем же
   классом помечены и заголовки групп (h2), поэтому правило сужено до
   div: иначе по весу оно перебило бы их приглушённый цвет ниже. */
#nav-sidebar-inner div.text-font-important-light {
  color: rgb(var(--color-base-50));
}

#nav-sidebar-inner hr,
#nav-sidebar-inner .border-b {
  border-color: rgba(255, 255, 255, 0.08);
}

/* --- Поиск по меню --- */

/* Белое поле посреди графита читалось как дыра в колонне; тёмное поле
   с рамкой 3:1 остаётся полем. */
#nav-sidebar-inner #nav-filter,
#nav-sidebar-inner .bg-white:has(> #nav-filter) {
  background: rgb(var(--color-base-800));
  color: rgb(var(--color-base-100));
}

#nav-sidebar-inner .bg-white:has(> #nav-filter) {
  border-color: rgba(255, 255, 255, 0.28);
}

#nav-sidebar-inner #nav-filter::placeholder {
  color: rgb(var(--color-base-400));
}

/* Выпадающий список результатов поиска — светлая карточка поверх
   меню. Ей возвращаем тёмный текст: иначе она унаследовала бы светлый
   цвет панели и стала бы нечитаемой уже сама. */
#nav-sidebar-inner #search-results ul {
  color: rgb(var(--color-base-700));
}
.dark #nav-sidebar-inner #search-results ul {
  color: rgb(var(--color-base-200));
}

/* --- Группы и пункты --- */

/* Заголовки групп: base-500 на графите даёт 3.4:1 и для мелкой подписи
   не хватает; base-400 — 6.9:1. Стрелка свёрнутой группы при
   наведении красилась в primary-600 (графит по графиту) — держим её
   цветом заголовка. */
#nav-sidebar-inner h2,
#nav-sidebar-inner h2 .material-symbols-outlined {
  color: rgb(var(--color-base-400));
}

#nav-sidebar-inner h2:hover,
#nav-sidebar-inner h2:hover .material-symbols-outlined {
  color: rgb(var(--color-base-200));
}

/* Пункты: base-300 — 12.6:1. */
#nav-sidebar-inner ol a {
  color: rgb(var(--color-base-300));
}

#nav-sidebar-inner ol a:hover {
  color: rgb(var(--color-base-50));
  background: rgba(255, 255, 255, 0.06);
}

/* Активный пункт. unfold рисует его светлой плашкой bg-base-100 с
   текстом text-primary-600; правило выше (по id) перебило бы цвет
   текста на светло-серый, и активный пункт стал бы самым
   нечитаемым в меню. Плашка — полупрозрачная светлая, текст белый. */
#nav-sidebar-inner ol a.bg-base-100 {
  color: rgb(var(--color-base-50));
  background: rgba(255, 255, 255, 0.10);
}