/* 04-themes.css — часть дизайн-системы портала (см. docs/design_system.md).
*
* ⚠ ПОРЯДОК ПОДКЛЮЧЕНИЯ ЗНАЧИМ. Файлы грузятся по номеру в имени, и поздние
* правила перекрывают ранние. Список — в templates/base.html; менять
* порядок или вставлять файл в середину нельзя, не проверив каскад.
*
* Темы «стекло» и «тёмная» + фокус с клавиатуры + аккордеон разделов курса.
*/
/* ================= Liquid Glass (переключаемая тема) =================
Включается классом .theme-glass на . Все параметры — в переменных
ниже: чтобы подстроить силу размытия / прозрачность / палитру, меняйте
только их. По умолчанию тема выключена, обычный вид не затрагивается. */
html.theme-glass {
/* Значения по docs/liquid_glass_guide.md — сбалансировано по читаемости и «дорогому» виду. */
--glass-blur: 18px; /* 14–22; больше не всегда лучше */
--glass-sat: 180%; /* насыщенность оживляет фон за стеклом */
--glass-surface: rgba(255,255,255,.55); /* плотнее = текст читается */
--glass-border: rgba(255,255,255,.65); /* яркая кромка-блик */
--glass-shadow: 0 12px 34px rgba(16,42,28,.16);
/* ⚠ Плотность сайдбара — не вкусовая настройка, а условие читаемости. При .46
светлый текст меню давал 2.1:1 на светлом фоне под стеклом (норма 4.5),
а подписи групп — 1.3:1, то есть исчезали. При .82 пункты дают 5.5:1,
подписи (см. .side-title ниже) — 4.6:1. Размытие и кромка-блик остаются,
«стекло» читается по-прежнему. Ниже .78 не опускать. */
--glass-side: rgba(13,61,34,.82);
--glass-head: rgba(255,255,255,.34); /* светлые шапки панелей */
/* Роли поверхностей (см. :root) */
--surface-side: var(--glass-side);
--surface-bar: rgba(255,255,255,.55);
--glass-bg: /* фон под стеклом — крупные мягкие пятна */
radial-gradient(1200px 680px at 6% -10%, #9fe6c8 0%, rgba(159,230,200,0) 58%),
radial-gradient(1000px 720px at 112% 2%, #bfe0ff 0%, rgba(191,224,255,0) 55%),
radial-gradient(760px 560px at 48% 120%, #d9c9ff 0%, rgba(217,201,255,0) 55%),
linear-gradient(135deg, #e9f6ee 0%, #edf4f0 45%, #e7eeff 100%);
}
/* Плавный переход при переключении темы */
.app-sidebar, .panel, .panel-head, .article-page,
.comments, .info-card, .app-guest, .login-card {
transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
html.theme-glass body { background: var(--glass-bg); background-attachment: fixed; }
/* Светлые стеклянные поверхности */
html.theme-glass .panel,
html.theme-glass .article-page,
html.theme-glass .comments,
html.theme-glass .info-card,
html.theme-glass .login-card {
background: var(--glass-surface);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
/* Сайдбар — тёмно-зелёное стекло (светлый текст меню остаётся читаемым).
Фон приходит из --surface-side, здесь только размытие и кромка. */
html.theme-glass .app-sidebar {
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border-right: 1px solid rgba(255,255,255,.18);
}
/* Топбар — такое же стекло, как панели. Без этого правила он оставался сплошным
белым посреди прозрачного интерфейса: правила писались для .app-navbar, а после
перехода на .app-topbar тема про него просто не знала. */
html.theme-glass .app-topbar {
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
border-bottom: 1px solid rgba(255,255,255,.35);
}
html.theme-glass .panel-head {
background: var(--glass-head);
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
border-bottom: 1px solid rgba(255,255,255,.25);
}
/* Подписи групп — светлее, чем на глухом сайдбаре: под стеклом фон подмешивает
светлый градиент. #b7d4c1 даёт 4.6:1 в худшем случае, #8fb89c давал бы 3.3:1. */
html.theme-glass .side-menu .side-title { color: #b7d4c1; }
/* Hover писался под прежний белый сайдбар — на тёмном стекле белая заливка
выбивается. Приводим к §5.2: лёгкая подсветка + белый текст. */
html.theme-glass .side-menu a:hover {
background: rgba(255,255,255,.12);
color: #fff;
}
/* Страница входа */
html.theme-glass .app-guest { background: var(--glass-bg); background-attachment: fixed; }
html.theme-glass .login-card { box-shadow: 0 20px 50px rgba(20,40,30,.18); }
/* Фолбэк для браузеров без backdrop-filter — поверхности плотнее */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html.theme-glass .panel,
html.theme-glass .app-topbar,
html.theme-glass .article-page,
html.theme-glass .comments,
html.theme-glass .info-card,
html.theme-glass .login-card { background: rgba(255,255,255,.93); }
/* ⚠ Сайдбару белый фон давать нельзя: текст меню светлый (#cfe3d6) и на белом
исчезает. Здесь он остаётся тёмно-зелёным, просто непрозрачным. */
html.theme-glass .app-sidebar { background: var(--brand-deep); }
}
/* ================= Тёмная тема (переключаемая) =================
Включается классом .theme-dark на (третий вариант в кнопке шапки). */
html.theme-dark {
--brand: #2e9e63;
--brand-light: #1e2b24;
--brand-lighter: #182420; /* тёмный тинт для hover-строк и мягких заливок */
--ink: #e7ece9;
--muted: #9aa79f;
--line: #2c332f;
--bg: #141816;
--surface: #1b211e; /* было #fff — из-за этого топбар и плитки «ехали» белым */
--dk-bg: #141816;
--dk-surface: #1b211e;
--dk-nav: #0c3a1c;
/* Роли поверхностей (см. :root): сайдбар и топбар — та же тёмная поверхность,
что и панели. Перечислять компоненты больше не нужно. */
--surface-side: #1b211e;
--surface-bar: #1b211e;
/* Статусы: тинты темнеют, текст на них — светлее, иначе не читается.
Задаём здесь один раз вместо десятка правил на отдельные компоненты. */
--ok-ink: #7fd6a2;
--ok-bg: #1c2f23;
--info: #8ea6f0;
--info-bg: #1e2740;
--danger-ink: #e0a0a0;
--danger-tint: #3a2323;
--danger-bg: #2a1d1d;
--danger-line: #4a2c2c;
--line-strong: #3a463f;
/* Тёплые тинты: без переопределения --warn-bg (#fff8ee) карточка
отсутствующего светилась бы белым пятном на тёмном фоне. */
--warn-bg: #2a2318;
--warn-line: #4a3a20;
/* --warn (#b25e00) на новом --warn-bg даёт только 3.3:1 — годится для
иконки/точки (порог 3:1), но не для текста абзаца. Отдельный ink,
как у --ok-ink/--danger-ink выше: 5.6:1 на --warn-bg. */
--warn-ink: #d68b3e;
color-scheme: dark;
}
html.theme-dark body { background: var(--dk-bg); color: var(--ink); }
html.theme-dark .app-sidebar { border-right-color: var(--line); }
html.theme-dark .side-menu a { color: #d7ded9; }
html.theme-dark .side-menu .side-title { color: #7f8c84; }
html.theme-dark .side-menu a:hover { background: #223029; color: #7fd6a2; }
html.theme-dark .panel { background: var(--dk-surface); border-color: var(--line); box-shadow: none; }
/* Шапка панели — светлее тела на один шаг, без зелёной заливки: §5.3 требует
светлую шапку, §9 прямо запрещает сплошные зелёные заливки крупных блоков.
Прежний #123f22 остался от оформления до редизайна 2026. */
html.theme-dark .panel-head { background: #212a25; color: var(--ink); border-bottom-color: var(--line); }
html.theme-dark .panel-body { color: var(--ink); }
html.theme-dark .article-page,
html.theme-dark .comments,
html.theme-dark .info-card,
html.theme-dark .login-card { background: var(--dk-surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
html.theme-dark .article-page .article-body,
html.theme-dark .article-body { color: #d7ded9; }
html.theme-dark .article-title,
html.theme-dark h1, html.theme-dark h2, html.theme-dark h3,
html.theme-dark h4, html.theme-dark h5 { color: var(--ink); }
html.theme-dark .info-card { color: var(--ink); }
html.theme-dark .app-guest { background: linear-gradient(135deg, #0c3a1c 0%, #0a2b16 100%); }
html.theme-dark .text-muted { color: var(--muted) !important; }
html.theme-dark a { color: #7fd6a2; }
html.theme-dark a:hover { color: #a5e6c1; }
/* Формы */
html.theme-dark .form-control,
html.theme-dark .form-select,
html.theme-dark textarea,
html.theme-dark input[type="text"],
html.theme-dark input[type="password"],
html.theme-dark input[type="search"],
html.theme-dark input[type="file"] {
background: #151b17; color: var(--ink); border-color: var(--line);
}
html.theme-dark .form-control::placeholder,
html.theme-dark textarea::placeholder { color: #7f8c84; }
/* Подсказка Tom Select (input внутри .ts-control) — из vendor-CSS приходит
светлый серый #757575, на тёмном фоне даёт ~3.8:1 вместо нужных ~4.5:1.
Тот же цвет, что у обычных плейсхолдеров формы выше. */
html.theme-dark .ts-control input::placeholder { color: #7f8c84; }
/* ⚠ Tom Select целиком — тот же класс бага, что у пагинации/плашек сообщений
выше, только не увиденный раньше: список раскрывается в (dropdownParent:
'body', см. partials/tomselect_js.html), поверх всей страницы, и отдельно
в тёмной теме его никто не смотрел. Вендорный tom-select.bootstrap5.min.css
красит текст литералом #343a40 и фон/рамку через var(--bs-body-bg)/
var(--bs-border-color) — первая у нас объявлена (#fff) и просто не
переопределена для тёмной темы, вторая в проекте вообще не объявлена
(термин из Bootstrap 5.3, наш 00-base.css — выжимка 5.1.3) и по умолчанию
даёт border-color: currentColor, то есть у поля с исправленным ниже color
рамка станет верной автоматически, но полагаться на неявный побочный эффект
не стоит — задаём border-color отдельно, как и у .search-dropdown/.page-link.
Раскрытый список, а не только закрытое поле: текст, фон, разделитель групп,
строка «ничего не найдено»/«создать», подсветка активного пункта — ни у
одного из них нет тёмного варианта в вендорном файле. */
html.theme-dark .ts-control,
html.theme-dark .ts-control input,
html.theme-dark .ts-dropdown { color: var(--ink); }
html.theme-dark .ts-control { border-color: var(--line); }
html.theme-dark .ts-dropdown,
html.theme-dark .ts-dropdown.form-control,
html.theme-dark .ts-dropdown.form-select {
background: var(--dk-surface); border-color: var(--line);
}
html.theme-dark .ts-dropdown .optgroup-header { background: var(--dk-surface); color: var(--muted); }
html.theme-dark .ts-dropdown .optgroup:before { border-top-color: var(--line); }
html.theme-dark .ts-dropdown .no-results { color: var(--muted); }
/* «Создать «Название»» (плагин создания направления) — вдвое приглушённый
#343a40 в оригинале, тот же приём здесь тёмным по var(--muted). */
html.theme-dark .ts-dropdown .create { color: var(--muted); }
/* Подсветка наведённого/выбранного клавиатурой пункта — var(--bs-tertiary-bg)
в вендорном файле нигде не объявлена (тоже термин из Bootstrap 5.3), поэтому
подсветки нет ни в одной теме; здесь чинится только для тёмной — на войну
с этим в светлой теме команды не было. */
html.theme-dark .ts-dropdown .active,
html.theme-dark .ts-dropdown .active.create { background: var(--brand-lighter); color: var(--ink); }
/* Часто используемый bg-light — в тёмной теме делаем тёмным */
html.theme-dark .badge.bg-light { background: #2a332e !important; color: #d7ded9 !important; }
/* Крестик закрытия у flash-сообщений (.btn-close, 00-base.css) — чёрный SVG
в background-image, не currentColor. Раньше не мешало: .alert-warning/
-danger были литералами и оставались светлыми в любой теме. После перевода
.alert-* на --warn-bg/--danger-bg/--ok-bg/--info-bg все четыре плашки в
тёмной теме сами стали тёмными — без инверсии крестик пропадал бы на
собственном фоне. Тот же приём, что у .btn-close-white в Bootstrap 5. */
html.theme-dark .alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
/* Вкладки курса */
html.theme-dark .nav-tabs { border-bottom-color: var(--line); }
html.theme-dark .nav-tabs .nav-link { color: #b9c2bc; }
html.theme-dark .nav-tabs .nav-link.active {
background: var(--dk-surface); color: var(--ink);
border-color: var(--line) var(--line) var(--dk-surface);
}
/* Разделители, таблицы, прогресс, дропдаун поиска */
html.theme-dark .border-bottom, html.theme-dark .border-top { border-color: var(--line) !important; }
html.theme-dark table { color: var(--ink); }
/* Полосатые таблицы в тёмной теме.
Bootstrap задаёт цвет текста чётных строк своей переменной --bs-table-striped-color
(по умолчанию #212529 из светлой темы), и она перебивает `color` у table выше —
фамилии в Кадрах становились тёмными на тёмном. Перекрываем сами переменные,
тогда правило работает независимо от того, вешает Bootstrap цвет на tr или на td. */
html.theme-dark .table {
--bs-table-color: var(--ink);
--bs-table-bg: transparent;
--bs-table-border-color: var(--line);
--bs-table-striped-color: var(--ink);
--bs-table-striped-bg: rgba(255, 255, 255, .035);
--bs-table-hover-color: var(--ink);
--bs-table-hover-bg: rgba(255, 255, 255, .065);
--bs-table-active-color: var(--ink);
--bs-table-active-bg: rgba(255, 255, 255, .085);
}
html.theme-dark td, html.theme-dark th { border-color: var(--line); }
html.theme-dark .progress { background: #2a332e; }
html.theme-dark .search-dropdown { background: var(--dk-surface); border-color: var(--line); color: var(--ink); }
html.theme-dark .emp-card,
html.theme-dark .emp-photo,
html.theme-dark .person-photo { background: var(--dk-surface); border-color: var(--line); }
html.theme-dark .dept-title { border-bottom-color: #2a4033; }
/* --- Тёмная тема: доборка оставшихся светлых поверхностей --- */
html.theme-dark .bd-card,
html.theme-dark .person-card,
html.theme-dark .report-card,
html.theme-dark .cal-emp-head,
html.theme-dark .cal-emp,
html.theme-dark .cal-legend,
html.theme-dark .dir-menu,
html.theme-dark .org-box,
html.theme-dark .sd-frame-wrap,
html.theme-dark .bd-face-badge {
background: var(--dk-surface);
border-color: var(--line);
color: var(--ink);
}
html.theme-dark .info-card-img { background: #222a26; }
html.theme-dark .comment-body { color: #d7ded9; }
html.theme-dark .dir-count,
html.theme-dark .kadry-tree-count { background: #2a332e; color: #d7ded9; }
/* Производственный календарь: нейтральные ячейки — тёмные, праздники —
приглушённые (но остаются семантически «жёлтым»/«красным»). */
html.theme-dark .pcal th { background: #10150f; color: var(--muted); }
html.theme-dark .pcal-1 { background: var(--dk-surface); }
html.theme-dark .pcal-out { background: #10150f; color: #5f6a63; }
html.theme-dark .pcal-3, html.theme-dark .pcal-6 { background: #242c27; }
html.theme-dark .pcal-4 { background: #4a4020; color: #f0d98a; }
html.theme-dark .pcal-5 { background: #4a2626; color: #f0a5a5; }
/* Календарь отдела: выходные */
html.theme-dark .cal-weekend { background: #10150f; }
/* --- Тёмная тема: светлые плашки, оставшиеся от светлой темы --- */
/* Раскрытая карточка дня рождения (была #fff7ed / #fdd9b5 — ярко-белая) */
html.theme-dark .bd-detail {
background: #33291c;
border-color: #5a4526;
color: var(--ink);
}
html.theme-dark .bd-detail-photo { border-color: #33291c; }
/* Подпись ячейки в истории рабочего времени (была #fff8e1 / #8a6d3b) */
html.theme-dark .wd-label {
background: #1e2b24;
color: #7fd6a2;
}
/* Направление звонка */
/* Статусные тинты в тёмной теме заданы токенами (--ok-bg / --info-bg / --danger-*)
в блоке html.theme-dark, поэтому .call-in, .mc-dir-*, .sd-badge-* и прочие
компоненты отдельных правил больше не требуют. */
/* Статус рабочего времени. Особенно .wt-off: было --muted на #f1f3f5 —
в тёмной теме светлая плашка со светло-серым текстом. */
html.theme-dark .wt-off { background: #262e29; color: #b0bbb4; }
html.theme-dark .wt-none { background: #3a2a19; color: #f0b078; }
/* Пагинация (templates/partials/pagination.html): .page-link — литералы из
Bootstrap (фон #fff, текст #0d6efd), тема их не знала. html.theme-dark a
(0,1,2) перебивал текст бледно-зелёным (#7fd6a2) на белом фоне из .page-link —
1.7:1, нечитаемо (жалоба с /kadry/employee-schedules/). Активную страницу
не красим var(--brand)+#fff: та же пара уже проваливала контраст у
.section-mark выше (3.4:1) — берём тинт --ok-bg/--ok-ink, как у прочих
статусов (8.1:1). */
html.theme-dark .page-link { background: var(--dk-surface); border-color: var(--line); color: var(--ink); }
html.theme-dark .page-link:hover { background: #223029; color: #7fd6a2; border-color: var(--line); }
html.theme-dark .page-item.disabled .page-link { background: var(--dk-surface); color: var(--muted); }
html.theme-dark .page-item.active .page-link { background: var(--ok-bg); border-color: var(--ok-bg); color: var(--ok-ink); }
/* ==========================================================================
Фокус с клавиатуры.
:focus-visible срабатывает только при навигации с клавиатуры, поэтому
мышиные клики обводкой не «пачкаются». Цвет — фирменный.
========================================================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.side-menu a:focus-visible,
.dir-item:focus-visible,
.th-sort:focus-visible,
.bd-face:focus-visible,
.js-call:focus-visible,
.dept-title:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 4px;
}
/* Карточки-ссылки: обводка повторяет их скругление */
.emp-card:focus-visible,
.bd-card:focus-visible,
.person-card:focus-visible,
.info-card:focus-visible,
.report-card:focus-visible,
.news-mini:focus-visible,
.assigned-row:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: var(--radius-card);
}
/* Поля ввода: обводка вместо смены только цвета рамки */
.form-control:focus-visible,
.form-select:focus-visible,
textarea:focus-visible,
input:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 1px;
}
/* ⚠ Чекбоксы/радио (.form-check-input, выжимка Bootstrap в 00-base.css)
сами задают `:focus { outline: 0; ... }` с той же специфичностью
(класс + псевдокласс), что и общее правило `input:focus-visible` чуть
выше (элемент + псевдокласс — оно слабее и проигрывает). В сумме — по
ним можно пройти табом, но не видно куда: обводки не было вовсе, ни в
одной форме на портале, где есть галочки. Пишем адресно то же зелёное
кольцо. */
.form-check-input:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* Переключатель .tgl (06-pages-2026.css) прячет настоящий input нулевым
размером (width/height: 0) — обводка на самом input была бы не видна.
:has() в файле уже используется (.fmt-btn, дропзоны книги) — тот же
приём, кольцо на видимый трек вместо невидимой точки. */
.tgl:has(input:focus-visible) .tgl-track {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* В тёмной теме фирменный зелёный светлее — обводка остаётся заметной */
html.theme-dark a:focus-visible,
html.theme-dark button:focus-visible,
html.theme-dark .btn:focus-visible {
outline-color: #7fd6a2;
}
html.theme-dark .form-check-input:focus-visible,
html.theme-dark .tgl:has(input:focus-visible) .tgl-track {
outline-color: #7fd6a2;
}
/* Bootstrap глушит обводку у своих кнопок — возвращаем для клавиатуры */
.btn:focus-visible { box-shadow: none; }
/* --- Выбор оценки звёздами (форма отзыва к курсу) --- */
.star-input { display: inline-flex; gap: 4px; font-size: var(--fs-2xl); line-height: 1; cursor: pointer; user-select: none; }
.star-input .star { color: #ccc; transition: color .1s ease, transform .1s ease; }
.star-input .star.on { color: #f5b301; }
.star-input .star:hover { transform: scale(1.15); }
.star-input .star:focus-visible { outline: 2px solid var(--brand); border-radius: 4px; }
html.theme-dark .star-input .star { color: #4a5049; }
html.theme-dark .star-input .star.on { color: #f5b301; }
/* Модификаторы для страницы книги (library/book_detail.html, задача #39):
⚠ Цвета намеренно не задаю заново — .on/пустая звезда уже решены выше для
обеих тем, здесь только форма (нередактируемый показ среднего рейтинга)
и размер (компактная строка в ленте отзывов, где fs-2xl слишком крупно). */
.star-input-static, .star-input-static .star { cursor: default; }
.star-input-static .star:hover { transform: none; }
.star-input-sm { font-size: var(--fs-md); gap: 2px; }
/* --- Уведомления (колокольчик в шапке) --- */
.notif-wrap { position: relative; }
.notif-count {
position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 8px; background: #e03131; color: #fff; font-size: var(--fs-label); line-height: 16px;
text-align: center; font-weight: 700;
}
.notif-dropdown {
position: absolute; right: 0; top: calc(100% + 6px); width: 320px; max-height: 420px;
overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.15); z-index: 1050; padding: 6px 0;
}
.notif-dropdown a { text-decoration: none; color: inherit; display: block; }
/* Строка = текст-ссылка + крестик удаления (соседи, не вложены). */
.notif-item { display: flex; align-items: flex-start; border-bottom: 1px solid var(--line); }
.notif-link { flex: 1 1 auto; min-width: 0; padding: 9px 4px 9px 14px; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--brand-light); }
/* Крестик проявляется на наведении, но всегда доступен с клавиатуры. */
.notif-del {
flex: 0 0 auto; width: 26px; height: 26px; margin: 7px 8px 0 0;
border: 0; border-radius: 7px; background: transparent; color: var(--muted);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s;
}
.notif-item:hover .notif-del { opacity: 1; }
.notif-del:focus-visible { opacity: 1; }
.notif-del:hover { background: #ffe3e3; color: var(--danger); }
.notif-del svg { width: 13px; height: 13px; }
html.theme-dark .notif-del:hover { background: #3a2020; }
.notif-unread { background: #eef6f1; }
.notif-text { font-size: var(--fs-sm); color: var(--ink); }
.notif-time { font-size: var(--fs-label); color: var(--muted); margin-top: 2px; }
.notif-empty { padding: 16px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
html.theme-dark .notif-dropdown { background: var(--dk-surface); border-color: var(--line); }
html.theme-dark .notif-item { border-color: var(--line); }
html.theme-dark .notif-item:hover { background: #223029; }
html.theme-dark .notif-unread { background: #1f2b23; }
/* ==========================================================================
Разделы курса: аккордеон с последовательным прохождением
Пройденные и заблокированные разделы свёрнуты (на без JS).
========================================================================== */
.section-item { overflow: hidden; }
.section-head {
display: flex; align-items: center; gap: 8px; cursor: pointer;
list-style: none; user-select: none;
}
.section-head::-webkit-details-marker { display: none; } /* убрать треугольник Safari/Chrome */
.section-head::marker { content: ''; } /* и Firefox */
.section-title { font-weight: 600; }
.section-mark {
flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .25); font-size: var(--fs-xs); font-weight: 700;
}
.section-chevron { transition: transform .18s ease; opacity: .8; }
.section-item[open] > .section-head .section-chevron { transform: rotate(180deg); }
.section-done > .section-head .section-mark { background: var(--brand); color: #fff; }
.section-locked { opacity: .62; }
.section-locked > .section-head { cursor: default; }
.section-locked > .section-head .section-mark { background: rgba(0, 0, 0, .18); }
.section-locked .section-title { text-decoration: none; }
/* Редактор курса (тренер) */
.builder-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.builder-row:last-child { border-bottom: none; }
.builder-num {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
background: var(--brand-light); color: var(--brand); font-weight: 700; font-size: var(--fs-xs);
display: inline-flex; align-items: center; justify-content: center;
}
.builder-main { flex: 1 1 auto; min-width: 0; }
.builder-title { font-weight: 600; }
.builder-actions { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; }
.builder-add { display: flex; flex-wrap: wrap; gap: 8px; }
html.theme-dark .builder-row { border-color: var(--line); }
html.theme-dark .builder-num { background: #223029; color: #cfe9d9; }
html.theme-dark .section-mark { background: rgba(255, 255, 255, .14); }