/* 06-pages-2026.css — часть дизайн-системы портала (см. docs/design_system.md).
*
* ⚠ ПОРЯДОК ПОДКЛЮЧЕНИЯ ЗНАЧИМ. Файлы грузятся по номеру в имени, и поздние
* правила перекрывают ранние. Список — в templates/base.html; менять
* порядок или вставлять файл в середину нельзя, не проверив каскад.
*
* Дизайн-система 2026: страничные блоки (дашборд, сотрудники, обучение, кадры, ЛК, курс, редактор) и батч 2026-b.
*/
/* ============================================================================
ГЛАВНАЯ — настраиваемый дашборд (сетка, «Мой день», панель настройки)
============================================================================ */
.dash-date {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-xs);
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
}
.dash-cog {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 11px;
background: var(--surface); color: var(--muted); cursor: pointer;
}
.dash-cog:hover { background: var(--brand-lighter); color: var(--ink); border-color: var(--line-strong); }
.dash-cog svg { width: 19px; height: 19px; }
/* Сетка виджетов: 3 колонки, span из data-w */
.dash-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch; /* блоки одной строки выравниваются по высоте */
margin-top: 16px;
}
.dash-item { min-width: 0; display: flex; flex-direction: column; }
.dash-item > * { flex: 1 1 auto; min-height: 0; }
.dash-item > .panel { margin-bottom: 0; height: 100%; }
.dash-item[data-w="myday"] { grid-column: span 2; }
.dash-item[data-w="news"] { grid-column: span 3; }
@media (max-width: 991.98px) {
.dash-grid { grid-template-columns: repeat(2, 1fr); }
.dash-item[data-w="myday"], .dash-item[data-w="news"] { grid-column: span 2; }
}
@media (max-width: 575.98px) {
.dash-grid { grid-template-columns: 1fr; }
.dash-item[data-w] { grid-column: span 1 !important; }
}
/* --- «Мой день» — тёмно-зелёная градиентная карта (§5.8) --- */
.myday {
height: 100%;
background: var(--hero-grad);
border-radius: var(--radius-panel);
padding: 22px 26px;
color: #eaf3ee;
box-shadow: var(--shadow-sm);
}
.myday-cap {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
color: #7fb99a; margin-bottom: 16px;
}
.myday-cols { display: flex; gap: 44px; flex-wrap: wrap; }
.myday-k { font-size: var(--fs-sm); color: #9dc4ac; margin-bottom: 4px; }
.myday-v { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; }
.myday-v-late { color: #ffb877; }
.myday-dash { color: #6ea888; margin: 0 2px; }
.myday-status { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xl); font-weight: 700; color: #fff; }
.myday-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.myday-status[data-kind="absent"] .myday-dot,
.myday-status[data-kind="noshow"] .myday-dot { background: #ffb877; }
/* «Ушёл» — приглушённый, не тревожный: рабочий день закончился штатно. */
.myday-status[data-kind="left"] .myday-dot,
.myday-status[data-kind="off"] .myday-dot,
.myday-status[data-kind="none"] .myday-dot { background: #6ea888; }
.myday-foot {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-top: 20px; padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, .12);
}
.myday-train { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); color: #d5e8dd; min-width: 0; }
.myday-train svg { width: 18px; height: 18px; flex-shrink: 0; color: #7fb99a; }
.myday-go {
flex-shrink: 0;
background: var(--accent); color: var(--brand-deep);
font-weight: 700; font-size: var(--fs-body); text-decoration: none;
padding: 9px 18px; border-radius: var(--radius-pill);
}
.myday-go:hover { filter: brightness(1.05); color: var(--brand-deep); }
/* --- Панель настройки дашборда --- */
.dash-settings {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow-md);
padding: 18px 20px; margin-top: 14px; max-width: 460px;
}
.dash-settings-head { font-weight: 700; font-size: var(--fs-body); margin-bottom: 12px; }
.dash-settings-list { list-style: none; margin: 0 0 14px; padding: 0; }
.dash-settings-row {
display: flex; align-items: center; gap: 6px;
padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px;
background: var(--brand-lighter);
}
.dash-settings-toggle { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; font-weight: 500; }
.dash-settings-toggle input { width: 16px; height: 16px; }
/* Ручка перетаскивания: тянуть строку мышью для смены порядка. */
.dash-settings-grip {
display: flex; align-items: center; color: var(--muted); cursor: grab; flex: 0 0 auto;
}
.dash-settings-grip:active { cursor: grabbing; }
.dash-settings-grip svg { width: 18px; height: 18px; }
.dash-settings-row.dragging { opacity: .5; box-shadow: var(--shadow-md); }
.dash-settings-actions { display: flex; gap: 8px; }
/* --- Новости: сетка обложек 4:3 --- */
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.news-mini { text-decoration: none; color: var(--ink); display: block; }
.news-mini-cover {
aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden;
background: repeating-linear-gradient(45deg, #eef2f0, #eef2f0 10px, #e7ece9 10px, #e7ece9 20px);
display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.news-mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.news-mini-ph { font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.news-mini-date { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); color: var(--muted); margin-bottom: 4px; }
.news-mini-title { font-weight: 700; font-size: var(--fs-md); line-height: 1.3; }
.news-mini:hover .news-mini-title { color: var(--brand); }
@media (max-width: 991.98px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .news-grid { grid-template-columns: 1fr; } }
.panel-head-meta { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); color: var(--muted); font-weight: 500; text-transform: uppercase; }
.wd-dot-off { background: #c9d3ce; }
/* --- Бургер как марка бренда «П» (зелёный квадрат) --- */
.app-topbar .app-burger {
width: auto; height: auto; padding: 0; border: 0; background: transparent;
}
.app-topbar .app-burger:hover { background: transparent; }
.app-burger-mark {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px;
background: var(--brand); color: #fff;
font-weight: 800; font-size: 20px; line-height: 1;
transition: filter .12s, transform .12s;
}
.app-topbar .app-burger:hover .app-burger-mark { filter: brightness(1.08); }
.app-topbar .app-burger:active .app-burger-mark { transform: scale(.94); }
/* --- Фикс раскладки дашборда: заполнять пустоты, чтобы сетка не «плыла» --- */
.dash-grid { grid-auto-flow: row dense; }
/* Иконки в шапках панелей — размер обязателен, иначе inline-SVG раздувается
на всю панель (была причина «поплывшей» главной). */
.panel-head svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand); }
/* --- Правки по обратной связи: попап настройки, бренд-кнопка, бургер --- */
/* Панель настройки дашборда — всплывающий попап у шестерёнки */
.dash-cog-wrap { position: relative; }
.dash-settings {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 50;
width: 380px;
max-width: calc(100vw - 40px);
margin-top: 0;
}
/* Бренд-кнопка «П ПНЕВМАКС» в сайдбаре (теперь это переключатель, не ссылка) */
.app-brand {
width: 100%;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
}
.app-brand:hover .app-brand-mark { filter: brightness(1.08); }
/* Бургер в топбаре — только на мобильном; на десктопе меню сворачивается «П» */
.app-topbar .app-burger { display: none; }
.app-topbar .app-burger svg { width: 22px; height: 22px; }
@media (max-width: 991.98px) {
.app-topbar .app-burger {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line);
background: var(--surface); color: var(--muted); padding: 0;
}
.app-topbar .app-burger:hover { background: var(--brand-lighter); color: var(--ink); }
}
/* Счётчик «ещё N курсов» в «Мой день» */
.myday-more {
display: inline-block; margin-left: 4px; padding: 1px 7px;
border-radius: var(--radius-pill); background: rgba(255, 255, 255, .16);
font-size: var(--fs-xs); font-weight: 600;
}
/* --- 3 блока в верхнем ряду: «Мой день» = 1/3, как остальные --- */
.dash-item[data-w="myday"] { grid-column: span 1; }
@media (max-width: 991.98px) {
.dash-item[data-w="myday"] { grid-column: span 2; }
}
/* Числа «Моего дня» компактнее, чтобы приход/график/статус влезали в 1/3 */
.myday { padding: 20px 22px; }
.myday-cols { gap: 22px; }
.myday-v { font-size: var(--fs-2xl); white-space: nowrap; }
.myday-status { font-size: var(--fs-lg); }
.myday-k { font-size: var(--fs-xs); }
.myday-foot { margin-top: 16px; padding-top: 14px; }
.myday-train { font-size: var(--fs-sm); }
.myday-go { padding: 8px 15px; font-size: var(--fs-sm); }
/* --- График опозданий (спарклайн из баров) --- */
.late-chart {
display: flex;
align-items: flex-end;
gap: 10px;
height: 118px;
margin: 6px 0 14px;
}
/* Столбик = один день опоздания: полоса + минуты + дата под ней. */
.late-col {
flex: 0 1 56px; min-width: 34px; height: 100%;
display: flex; flex-direction: column;
}
.late-bar-wrap { flex: 1 1 auto; display: flex; align-items: flex-end; }
.late-bar {
width: 100%;
border-radius: 7px 7px 4px 4px;
background: #eef1ef;
}
.late-mins {
font-size: var(--fs-label); font-weight: 700; color: var(--ink);
text-align: center; margin-top: 5px; white-space: nowrap;
}
.late-date {
font-size: var(--fs-label); color: var(--muted); text-align: center;
font-family: 'IBM Plex Mono', monospace; white-space: nowrap; margin-top: 1px;
}
.late-bar-warn { background: #f4c430; }
.late-bar-bad { background: #e8590c; }
/* --- Регистр «метрика»: виджет, отвечающий на вопрос «сколько» ---
Крупное число первым уровнем, подпись вторым, детализация (график, список)
третьим. Цвет числа несёт состояние: зелёное — норма, оранжевое — есть чему
уделить внимание. Блок переиспользуемый: любой счётный виджет берёт .metric,
а не изобретает свою пару «число + подпись». */
.metric { margin-bottom: 4px; }
.metric-v {
font-size: var(--fs-4xl);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.metric-v-ok { color: var(--brand); }
.metric-v-warn { color: var(--warn); }
.metric-k { font-size: var(--fs-xs); color: var(--muted); margin-top: 7px; }
.metric-k b { color: var(--warn); }
/* Горизонтальный вариант — там, где под метрику нет высоты (карточка сотрудника) */
.metric-inline { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.metric-inline .metric-k { font-size: var(--fs-body); margin-top: 0; }
/* График под метрикой — вспомогательный, поэтому ниже и компактнее прежнего */
.metric + .late-chart { margin-top: 16px; height: 96px; }
html.theme-dark .late-bar { background: #38463f; } /* видимый серо-зелёный */
html.theme-dark .late-bar-warn { background: #f4c430; } /* палитра сохраняется */
html.theme-dark .late-bar-bad { background: #e8590c; }
/* Карточки дашборда — по своей высоте (короткие не растягиваются до высокой
в ряду). Ряд сетки всё равно выравнивает по верху (align-items: start). */
.dash-item > .panel, .dash-item > .myday { height: auto; }
/* ============================================================================
СОТРУДНИКИ — отделы-панели, карточки с SVG-иконками контактов (§5.4)
============================================================================ */
.dept-list { display: flex; flex-direction: column; gap: 14px; }
/* Отдел верхнего уровня — карточка-панель */
.dept {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-panel);
box-shadow: var(--shadow-sm);
margin-bottom: 0;
overflow: hidden;
}
.dept-title {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
cursor: pointer;
user-select: none;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--ink);
font-weight: 700;
margin-bottom: 0;
}
.dept.collapsed > .dept-title { border-bottom-color: transparent; }
.dept-title:hover { background: var(--brand-lighter); }
/* ⚠ .dept-title сидит вплотную к краю карточки .dept, у которой overflow:hidden
(клипует скруглённые углы под свёрнутым содержимым). Общее правило
`outline-offset:2px` (04-themes.css) рисует рамку фокуса ЗА пределами
карточки — overflow:hidden её срезает, и Tab делает заголовок отдела
фокусируемым, но невидимо сфокусированным. Рисуем рамку внутрь. */
.dept-title:focus-visible { outline-offset: -2px; }
.dept-name { font-size: var(--fs-md); }
.dept-caret {
width: 18px; height: 18px; flex-shrink: 0;
color: var(--brand);
transition: transform .15s;
}
.dept.collapsed > .dept-title .dept-caret { transform: rotate(-90deg); }
.dept-count {
margin-left: auto;
background: var(--brand-light);
color: var(--brand);
font-size: var(--fs-xs); font-weight: 600;
padding: 3px 12px;
border-radius: var(--radius-pill);
white-space: nowrap;
}
.dept-content { padding: 16px 20px; }
.dept.collapsed > .dept-content { display: none; }
/* Вложенные отделы — без второй рамки, лёгким отступом */
.dept-children { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 0; border: 0; }
.dept-children .dept {
box-shadow: none;
border-color: var(--line);
border-radius: var(--radius-card);
background: var(--brand-lighter);
}
.dept-children .dept-title { padding: 11px 16px; }
.dept-children .dept-content { padding: 12px 16px; }
/* Сетка карточек */
.people-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(384px, 1fr));
gap: 14px;
margin-bottom: 0;
}
/* ⚠ Вернувшаяся ошибка: в 02-legacy.css уже чинили карточку шириной 340px,
которая не влезала на 375px и уводила страницу в горизонтальную прокрутку.
Сетка 2026 подняла минимальную колонку до 384px — того же эффекта хватило
и без фиксированной ширины карточки (see .emp-card ниже, width:auto).
На узких экранах переходим на одну колонку, которая тянется по контейнеру. */
@media (max-width: 575.98px) {
.people-grid { grid-template-columns: 1fr; }
}
/* Карточка сотрудника */
.emp-card {
position: relative;
display: flex;
gap: 14px;
width: auto;
max-width: none;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
padding: 14px;
min-width: 0;
/* Единый «пол» высоты: карточки с меньшим числом контактов не выглядят
ниже соседних. Строки грида и так тянутся по высоте (stretch). */
min-height: 160px;
align-items: center;
}
.dept-children .emp-card { background: var(--surface); }
/* --- Состояние сотрудника на сегодня (data-presence) ---
Подсветка карточки: «на месте» — зелёный тинт, «отсутствует» — тёплый.
Берём самые светлые тинты палитры: карточек на экране десятки, и заливка
средней плотности превратила бы список в пёстрое полотно. Границу красим
на шаг заметнее фона — она и держит форму карточки.
⚠ Цвет не единственный признак: рядом с фамилией стоит точка с подписью
(WCAG 1.4.1), а у отсутствующих на фото ещё и значок типа отсутствия. */
/* ⚠ Селектор начинается с html не для красоты: тёмная тема красит карточку
правилом `html.theme-dark .emp-card` (специфичность 0,2,1), и без `html`
подсветка проигрывала бы ему — в тёмной теме все карточки были одинаковыми.
С `html` специфичности равны, а наш файл идёт позже, поэтому выигрываем.
Сами цвета берём токенами, так что каждая тема подставляет свои. */
html .emp-card[data-presence="in"] {
background: var(--brand-lighter);
border-color: var(--line-strong);
}
html .emp-card[data-presence="left"] {
background: var(--bg);
border-color: var(--line);
}
html .emp-card[data-presence="absent"] {
background: var(--warn-bg);
border-color: var(--warn-line);
}
/* Строка отсутствия в карточке: чип типа + срок. Чип переиспользуем из Кадров
(.abs-type-*), чтобы «Отпуск» везде выглядел одинаково. */
.emp-absence { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.emp-absence-when { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
/* Точка-индикатор в углу фото. Белое кольцо отделяет её от снимка любой
яркости — без него зелёная точка терялась бы на светлой рубашке. */
.emp-photo-wrap .emp-dot {
position: absolute;
right: -3px;
top: -3px;
width: 15px;
height: 15px;
border-radius: 50%;
border: 3px solid var(--surface);
background: var(--muted);
}
.emp-card[data-presence="in"] .emp-dot { background: var(--brand); }
.emp-card[data-presence="left"] .emp-dot { background: var(--muted); }
.emp-card[data-presence="absent"] .emp-dot { background: var(--warn); }
.emp-photo-wrap { width: 128px; height: 128px; }
.emp-photo { width: 128px; height: 128px; border-radius: 20px; }
.emp-photo-empty { width: 128px; height: 128px; border-radius: 20px; font-size: 36px; }
.emp-body { min-width: 0; flex: 1 1 auto; }
.emp-name {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-weight: 700; font-size: var(--fs-md); line-height: 1.25; padding-right: 18px;
}
.head-badge, .head-badge-static {
position: static; /* сброс старого absolute — иначе бейдж налезал на имя */
background: var(--brand); color: #fff;
font-size: var(--fs-label); font-weight: 600;
padding: 2px 9px; border-radius: var(--radius-pill);
white-space: nowrap;
}
.emp-pos { color: var(--muted); font-size: var(--fs-sm); margin: 3px 0 8px; }
.emp-city, .emp-c {
display: flex; align-items: center; gap: 7px;
font-size: var(--fs-sm); color: var(--ink);
text-decoration: none; margin: 0;
min-width: 0;
}
.emp-city { color: var(--muted); margin-bottom: 6px; }
.emp-city svg, .emp-c svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.emp-contacts { display: flex; flex-direction: column; gap: 5px; }
.emp-c span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.emp-c:hover { color: var(--brand); }
a.emp-c:hover svg { color: var(--brand); }
/* Внутренний номер — кнопка звонка (сброс вида button, вид как ссылка) */
.emp-c-call { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.emp-c-call:hover { color: var(--brand); }
.emp-c-call:hover svg { color: var(--brand); }
.emp-c-call svg { color: var(--brand); }
/* Уголок «открыть карточку» */
.emp-info {
position: absolute; top: 12px; right: 12px;
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--muted); text-decoration: none; border-radius: 8px;
}
.emp-info svg { width: 16px; height: 16px; }
.emp-info:hover { background: var(--brand-lighter); color: var(--brand); }
/* Тёмная тема */
html.theme-dark .dept-title:hover { background: rgba(255,255,255,.04); }
html.theme-dark .dept-children .dept { background: var(--dk-surface); }
/* ============================================================================
ОБУЧЕНИЕ — «Мой прогресс», назначенное, каталог курсов (§5.8)
============================================================================ */
/* Мой прогресс — тёмно-зелёная градиентная полоса */
.tr-progress {
background: var(--hero-grad);
border-radius: var(--radius-panel);
padding: 22px 26px;
color: #eaf3ee;
box-shadow: var(--shadow-sm);
}
.tr-progress-cap {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
color: #7fb99a; margin-bottom: 16px;
}
.tr-progress-cols { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.tr-progress-v { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; }
.tr-progress-k { font-size: var(--fs-sm); color: #9dc4ac; margin-top: 4px; }
.tr-progress-ach { margin-left: auto; }
.tr-ach {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255, 255, 255, .1); border-radius: var(--radius-pill);
padding: 8px 16px; font-weight: 700; font-size: var(--fs-md); color: #fff;
}
.tr-ach svg { width: 20px; height: 20px; color: var(--accent); }
/* Назначено мне — строки с прогресс-баром */
.assigned-row {
display: flex; align-items: center; gap: 16px;
padding: 12px 14px; margin-bottom: 8px;
border: 1px solid var(--line); border-radius: var(--radius-card);
text-decoration: none; color: var(--ink);
background: var(--surface);
}
.assigned-row:last-child { margin-bottom: 0; }
.assigned-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.assigned-row-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.assigned-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-md); margin-bottom: 8px; }
.assigned-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.assigned-pct { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.tr-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.tr-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.tr-bar-warn { background: var(--warn); }
.tr-tag {
font-size: var(--fs-label); font-weight: 600; padding: 2px 9px;
border-radius: var(--radius-pill); background: var(--brand-light); color: var(--brand);
white-space: nowrap;
}
.tr-tag-warn { background: #ffe8cc; color: var(--warn); }
.tr-tag-ok { background: var(--brand-light); color: var(--brand); }
.tr-tag-bad { background: #ffe3e3; color: var(--danger); }
/* Каталог: основная колонка + меню направлений справа */
.tr-catalog { display: flex; gap: 20px; align-items: flex-start; }
.tr-catalog-main { flex: 1 1 auto; min-width: 0; }
.tr-catalog-side { flex: 0 0 230px; }
@media (max-width: 991.98px) {
.tr-catalog { flex-direction: column; }
.tr-catalog-side { flex: 1 1 auto; width: 100%; order: -1; }
}
.tr-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.tr-course {
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); overflow: hidden;
text-decoration: none; color: var(--ink);
transition: transform .14s, box-shadow .14s, border-color .14s;
}
.tr-course:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.tr-course-cover {
position: relative;
aspect-ratio: 16 / 10;
/* ⚠ overflow: hidden обязателен: без него квадратная/портретная обложка
(img — replaced-элемент со своим intrinsic-соотношением) продавливает
flex-контейнер выше заданного aspect-ratio, и карточка выбивается из
ряда каталога (реальный кейс — «Курс по 1с», обложка 447×447). */
overflow: hidden;
background: repeating-linear-gradient(45deg, #eef2f0, #eef2f0 10px, #e7ece9 10px, #e7ece9 20px);
display: flex; align-items: center; justify-content: center;
}
.tr-course-cover img { width: 100%; height: 100%; object-fit: cover; }
.tr-course-ph { font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tr-course-dir {
position: absolute; top: 10px; left: 10px;
background: rgba(255, 255, 255, .92); color: var(--brand);
font-size: var(--fs-label); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill);
}
.tr-course-draft {
position: absolute; top: 10px; right: 10px;
background: var(--muted); color: #fff;
font-size: var(--fs-label); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill);
}
.tr-course-body { padding: 14px 16px; }
.tr-course-title { font-weight: 700; font-size: var(--fs-md); line-height: 1.3; margin-bottom: 6px; }
.tr-course-meta { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 8px; }
.tr-course-status { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.tr-course-done { color: var(--brand); }
html.theme-dark .tr-bar { background: #2a332e; }
html.theme-dark .tr-course-cover { background: #222a26; }
html.theme-dark .tr-course-dir { background: rgba(0,0,0,.6); color: #7fd6a2; }
/* SVG в метках разделов и шевроне карточки курса */
.section-mark svg { width: 14px; height: 14px; }
.section-chevron { width: 18px; height: 18px; flex-shrink: 0; }
/* Оргсхема — привести к общим токенам (поверхность, мягкая тень, hover) */
.org-box {
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: box-shadow .14s, transform .14s;
}
.org-box:hover { box-shadow: var(--shadow-md); }
.org-head:hover .org-head-name { color: var(--brand); }
/* Результат теста — крупная иконка вместо эмодзи */
.result-mark { display: flex; justify-content: center; margin-bottom: 8px; }
.result-mark svg { width: 56px; height: 56px; }
.result-mark-ok { color: var(--brand); }
.result-mark-bad { color: var(--danger); }
/* Плейсхолдер обложки в «Информации» (нет картинки) */
.info-card-ph {
display: flex; align-items: center; justify-content: center;
background: repeating-linear-gradient(45deg, #eef2f0, #eef2f0 10px, #e7ece9 10px, #e7ece9 20px);
}
.info-card-ph span { font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
html.theme-dark .info-card-ph { background: #222a26; }
/* ============================================================================
КАДРЫ / ОТЧЁТЫ — статы, плитки с иконками, сайдбар
============================================================================ */
/* Ряд статов (крупное число + подпись) */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-tile {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
padding: 18px 22px;
}
.stat-v { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.stat-v-ok { color: var(--brand); }
.stat-v-warn { color: var(--warn); }
.stat-v-bad { color: var(--danger); }
.stat-k { font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; }
@media (max-width: 991.98px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
/* Плитки Кадров: иконка в тинт-кружке + текст */
.kadry-layout { display: flex; gap: 20px; align-items: flex-start; }
.kadry-tiles { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.kadry-side { flex: 0 0 320px; }
@media (max-width: 1199.98px) {
.kadry-layout { flex-direction: column; }
.kadry-side { width: 100%; }
}
@media (max-width: 575.98px) { .kadry-tiles { grid-template-columns: 1fr; } }
.ktile {
display: flex; align-items: center; gap: 14px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
padding: 16px 18px; text-decoration: none; color: var(--ink);
transition: transform .14s, box-shadow .14s, border-color .14s;
}
.ktile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.ktile-ico {
flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
background: var(--brand-light); color: var(--brand);
display: flex; align-items: center; justify-content: center;
}
.ktile-ico svg { width: 22px; height: 22px; }
.ktile-ico-warn { background: var(--info-bg); color: var(--info); }
.ktile-ico-bad { background: #ffe3e3; color: var(--danger); }
.ktile-title { font-weight: 700; font-size: var(--fs-md); }
.ktile-desc { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; line-height: 1.35; }
/* Сайдбар «Отсутствия сейчас» */
.ksd-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ksd-row:last-child { border-bottom: 0; }
.ksd-ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ksd-ava-empty { display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }
.ksd-body { min-width: 0; flex: 1 1 auto; }
.ksd-name { font-weight: 600; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksd-dept { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ksd-tag {
flex-shrink: 0; font-size: var(--fs-label); font-weight: 600;
padding: 2px 9px; border-radius: var(--radius-pill);
background: var(--brand-light); color: var(--brand); white-space: nowrap;
}
/* Заголовок группы плиток в «Кадрах» — мелкий капс-лейбл в духе .page-eyebrow.
Сетка .kadry-tiles одна на все группы (не отдельный грид под каждую, как
в «Отчётах» с .rep-group), поэтому заголовок сам — её элемент и должен
растягиваться на всю ширину: grid-column:1/-1. Отступ сверху разводит
группы, у первой он не нужен — над ней уже стоит отступ .kadry-layout. */
.kadry-group-title {
grid-column: 1 / -1;
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-label);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--brand);
margin: 18px 0 4px;
}
.kadry-group-title:first-child { margin-top: 0; }
/* --- Отчёты: группы плиток + тинт-статы --- */
.rep-group {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); margin: 0 0 10px;
}
.rep-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 991.98px) { .rep-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .rep-tiles { grid-template-columns: 1fr; } }
/* Иконка плитки отчёта — в тинт-кружке (как в Кадрах) */
.report-card > svg, .report-card > .report-ico-warn {
flex-shrink: 0; box-sizing: border-box;
width: 44px; height: 44px; padding: 11px;
border-radius: 12px; background: var(--brand-light); color: var(--brand);
}
.report-card > .report-ico-warn { display: inline-flex; align-items: center; justify-content: center; background: #fff4e6; color: var(--warn); }
.report-card > .report-ico-warn svg { width: 22px; height: 22px; }
html.theme-dark .report-card > .report-ico-warn { background: #33291c; }
.stat-tile-green { background: var(--brand-lighter); border-color: #cfe6d8; }
.stat-tile-blue { background: #f0f3fb; border-color: #d6def5; }
.stat-tile-red { background: #fff5f5; border-color: #f3d6d6; }
html.theme-dark .stat-tile-green { background: #1a2620; border-color: #2a4535; }
html.theme-dark .stat-tile-blue { background: #1a2033; border-color: #2a3450; }
html.theme-dark .stat-tile-red { background: #2a1c1c; border-color: #4a2c2c; }
/* --- Переключатель Список/Схема (сегментированный) --- */
.view-toggle {
display: inline-flex; gap: 3px; padding: 3px;
background: #e9edeb; border-radius: 12px;
}
.view-toggle-btn {
padding: 6px 16px; border-radius: 9px; font-size: var(--fs-sm); font-weight: 600;
color: var(--muted); text-decoration: none;
}
.view-toggle-btn:hover { color: var(--ink); }
.view-toggle-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
html.theme-dark .view-toggle { background: #223029; }
html.theme-dark .view-toggle-btn.active { background: var(--dk-surface); }
/* --- Оргсхема: заглушки-инициалы + «и ещё» --- */
.org-head-ph, .org-emp-ph {
display: flex; align-items: center; justify-content: center;
background: var(--brand-light); color: var(--brand); font-weight: 700;
}
.org-head-ph { width: 34px; height: 34px; border-radius: 8px; font-size: 12px; flex-shrink: 0; }
.org-emp-more { font-size: var(--fs-xs); color: var(--muted); padding-left: 37px; }
.org-emps-label {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase;
color: #4d7360; margin: 10px 0 6px; /* 5.3:1 на белом; было #5f8a70 — 3.9:1 */
}
.org-dept { font-weight: 700; font-size: var(--fs-md); color: var(--ink); margin-bottom: 10px; }
/* ============================================================================
ЛИЧНЫЙ КАБИНЕТ / КАРТОЧКА — градиентная шапка
============================================================================ */
.person-hero {
display: flex; gap: 24px; align-items: center;
background: var(--hero-grad);
border-radius: var(--radius-panel);
padding: 26px 30px;
color: #eaf3ee;
box-shadow: var(--shadow-sm);
margin-bottom: 22px;
}
.person-hero-photo {
width: 160px; height: 160px; border-radius: 20px; object-fit: cover;
object-position: top center; flex-shrink: 0;
border: 3px solid rgba(255, 255, 255, .15);
}
.person-hero-photo-empty {
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .12); color: #fff; font-size: 48px; font-weight: 800;
}
.person-hero-body { min-width: 0; flex: 1 1 auto; }
.person-hero-name {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; color: #fff;
}
.person-hero-badge {
background: var(--accent); color: var(--brand-deep);
font-size: var(--fs-label); font-weight: 700; padding: 3px 11px; border-radius: var(--radius-pill);
}
.person-hero-pos { color: #9dc4ac; font-size: var(--fs-md); margin: 6px 0 12px; }
/* Статус «сейчас»: на месте / отпуск / не отметился. Цвет точки — как в «Моём
дне» на главной, чтобы значение читалось одинаково по всему порталу. */
.person-status {
display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--radius-pill); padding: 6px 15px;
}
.person-status-dot {
width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}
.person-status[data-kind="left"] .person-status-dot { background: #9dc4ac; }
.person-status[data-kind="absent"] .person-status-dot,
.person-status[data-kind="noshow"] .person-status-dot { background: #ffb877; }
.person-status[data-kind="off"] .person-status-dot,
.person-status[data-kind="none"] .person-status-dot { background: #6ea888; }
.person-status-text { color: #fff; font-weight: 700; font-size: var(--fs-body); }
.person-status-extra { color: #9dc4ac; font-size: var(--fs-sm); }
.person-hero-contacts {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px;
max-width: 720px;
}
.phc { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); color: #d5e8dd; min-width: 0; }
.phc svg { width: 17px; height: 17px; flex-shrink: 0; color: #7fb99a; }
.phc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phc a { color: #eaf3ee; text-decoration: none; }
.phc a:hover { text-decoration: underline; }
/* Внутренний номер как кнопка обратного звонка (в тёмном hero карточки) */
.phc-call {
border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08);
border-radius: var(--radius-pill); padding: 5px 13px; cursor: pointer;
color: #eaf3ee; font-weight: 600; transition: background .14s, border-color .14s;
width: fit-content;
}
.phc-call:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.phc-call svg { color: #a7e0c1; }
@media (max-width: 767.98px) {
.person-hero { flex-direction: column; align-items: flex-start; text-align: left; }
.person-hero-contacts { grid-template-columns: 1fr; }
}
/* Бейдж-чип обучения — SVG-иконка */
.badge-chip svg { width: 16px; height: 16px; }
/* ============================================================================
СТРАНИЦА КУРСА — 2 колонки, правая панель, плашка сертификата
============================================================================ */
.course-layout { display: flex; gap: 20px; align-items: flex-start; }
.course-main { flex: 1 1 auto; min-width: 0; }
.course-side { flex: 0 0 300px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 991.98px) {
.course-layout { flex-direction: column; }
/* align-items:flex-start остаётся column-контейнеру нужен только по main-axis;
по cross-axis (здесь — горизонтали) элементы не растягиваются сами и садятся
по ширине содержимого. .course-side это уже держал явным width, а .course-main
нет — самая длинная строка внутри (линейка вкладок) раздвигала колонку шире
экрана и уводила страницу вбок. */
.course-main, .course-side { width: 100%; }
}
.course-side .panel { margin-bottom: 0; }
.course-hd-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tr-course-dir-inline { position: static; background: var(--brand-light); }
.course-rating { color: var(--warn); font-weight: 600; font-size: var(--fs-body); }
.panel-head-mini {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
padding: 14px 18px 0;
}
.cside-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body);
}
.cside-row:last-child { border-bottom: 0; }
.cside-row span { color: var(--muted); }
.cside-row .text-warn { color: var(--warn); }
.cside-trainer { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.cside-trainer img, .cside-trainer-ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.cside-trainer-ph { display: flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand); font-weight: 700; }
.cside-trainer-name { display: block; font-weight: 700; font-size: var(--fs-body); }
.cside-trainer-dept { display: block; color: var(--muted); font-size: var(--fs-xs); }
.cside-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.cside-badge {
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-light); color: var(--brand);
}
.cside-badge svg { width: 22px; height: 22px; }
.cside-badge img { width: 26px; height: 26px; object-fit: contain; }
/* Плашка сертификата — зелёный градиент */
.cert-bar {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
background: var(--hero-grad);
border-radius: var(--radius-card); padding: 18px 24px; color: #eaf3ee; margin-top: 8px;
}
.cert-bar-muted { background: var(--hero-grad); opacity: .92; }
.cert-bar-text { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.cert-bar-text svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.cert-bar-text strong { color: #fff; }
.cert-bar-btn {
background: var(--accent); color: var(--brand-deep); font-weight: 700; font-size: 14px;
padding: 9px 18px; border-radius: var(--radius-pill); border: 0; text-decoration: none; cursor: pointer;
}
.cert-bar-btn:hover { filter: brightness(1.05); color: var(--brand-deep); }
.cert-bar-btn-off { background: rgba(255,255,255,.18); color: #cfe3d6; cursor: default; }
/* ============================================================================
РЕДАКТОР КУРСА
============================================================================ */
.page-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
.panel-head-count {
background: var(--brand-light); color: var(--brand);
font-size: var(--fs-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--radius-pill);
}
/* Тумблеры-статусы (визуальные; правятся в «Настройках») */
.edit-toggles {
display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.edit-toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: var(--fs-body); color: var(--muted); }
.edit-switch {
width: 40px; height: 22px; border-radius: 11px; background: #cdd5d1; position: relative;
transition: background .15s; flex-shrink: 0;
}
.edit-switch::after {
content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.edit-toggle.on { color: var(--ink); }
.edit-toggle.on .edit-switch { background: var(--accent); }
.edit-toggle.on .edit-switch::after { transform: translateX(18px); }
.edit-toggle-hint { font-size: var(--fs-xs); color: var(--muted); text-decoration: none; margin-left: auto; }
.edit-toggle-hint:hover { color: var(--brand); text-decoration: underline; }
/* Строки содержания курса */
.builder-type {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: #eef1f0; color: var(--muted);
}
.builder-type svg { width: 20px; height: 20px; }
.builder-type-video { background: var(--info-bg); color: var(--info); }
.builder-type-test { background: #fff4e6; color: var(--warn); }
.builder-type-assignment { background: #f3eefe; color: #7048e8; }
.builder-type-scorm { background: var(--brand-light); color: var(--brand); }
.builder-sub { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
/* Иконочные кнопки (вверх/вниз/удалить) */
.ibtn {
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 9px; color: var(--muted); text-decoration: none; background: var(--surface);
}
.ibtn:hover { background: var(--brand-lighter); color: var(--ink); }
.ibtn svg { width: 16px; height: 16px; }
.ibtn-danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
/* Добавить раздел — кнопки типов */
.add-section { display: flex; flex-wrap: wrap; gap: 10px; }
.add-type {
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 16px; border: 1px dashed var(--line); border-radius: var(--radius-card);
color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--fs-body); background: var(--surface);
}
.add-type:hover { border-color: var(--brand); border-style: solid; color: var(--brand); background: var(--brand-lighter); }
.add-type svg { width: 18px; height: 18px; color: var(--brand); }
/* ============================================================================
БАТЧ 2026-b — единые кнопки, редакторы Кадров, Заявки, логотип сертификата
============================================================================ */
/* --- Кнопки: единый стиль на весь портал --- */
.btn {
font-weight: 600; border-radius: 10px; padding: 9px 18px; font-size: var(--fs-body);
border: 1px solid transparent; line-height: 1.2;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.btn-sm { padding: 6px 13px; font-size: var(--fs-sm); border-radius: 9px; gap: 6px; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm svg { width: 15px; height: 15px; }
/* Основная (акцентная) — средний зелёный */
.btn-success, .btn-primary {
background: var(--brand); border-color: var(--brand); color: #fff;
}
.btn-success:hover, .btn-primary:hover,
.btn-success:focus, .btn-primary:focus {
background: #0a5f30; border-color: #0a5f30; color: #fff;
}
/* Крупная CTA / «Сохранить» — тёмно-зелёная */
.btn-deep { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn-deep:hover, .btn-deep:focus { background: #0a2f1a; border-color: #0a2f1a; color: #fff; }
/* Вторичные — белые с тонкой рамкой */
.btn-outline-success {
background: var(--surface); border-color: var(--line); color: var(--brand);
}
.btn-outline-success:hover, .btn-outline-success:focus {
background: var(--brand-light); border-color: var(--line-strong); color: var(--brand);
}
.btn-outline-secondary {
background: var(--surface); border-color: var(--line); color: var(--ink);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
background: var(--brand-lighter); border-color: var(--line-strong); color: var(--ink);
}
.btn-light, .btn-outline-light { font-weight: 600; }
/* Опасные действия */
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #c92a2a; border-color: #c92a2a; color: #fff; }
.btn-outline-danger {
background: var(--surface); border-color: var(--line); color: var(--danger);
}
.btn-outline-danger:hover { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.btn-secondary { background: #eceff0; border-color: #eceff0; color: var(--ink); }
.btn-secondary:hover { background: #e0e4e2; border-color: #e0e4e2; color: var(--ink); }
html.theme-dark .btn-outline-success,
html.theme-dark .btn-outline-secondary,
html.theme-dark .btn-outline-danger { background: var(--dk-surface); border-color: var(--line); }
html.theme-dark .btn-outline-secondary { color: var(--ink); }
html.theme-dark .btn-secondary { background: #2a332d; border-color: #2a332d; color: var(--dk-ink); }
/* --- Кадры: двухколоночный экран «список + панель редактирования» --- */
.kadry-editor { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 20px; align-items: start; }
@media (max-width: 1199.98px) { .kadry-editor { grid-template-columns: 1fr; } }
.kedit { position: sticky; top: 84px; }
.kedit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kedit-head h2 { font-size: var(--fs-lg); font-weight: 800; margin: 0; }
.kedit-close {
width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
background: var(--surface); color: var(--muted); display: inline-flex;
align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0;
}
.kedit-close:hover { background: var(--brand-lighter); color: var(--ink); }
.kedit-empty { color: var(--muted); font-size: var(--fs-body); text-align: center; padding: 40px 10px; }
.kedit-empty svg { width: 34px; height: 34px; color: var(--line); display: block; margin: 0 auto 12px; }
.kform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.kform-grid .mb-3 { margin-bottom: 0 !important; }
.kform-grid .kfield-wide { grid-column: 1 / -1; }
.kform-grid .form-label {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 4px; display: block;
}
.kform-grid .form-check .form-label { text-transform: none; font-family: inherit; letter-spacing: 0; font-size: var(--fs-sm); }
.kform-grid .mb-3:has(#id_email),
.kform-grid .mb-3:has(#id_extra_departments),
.kform-grid .mb-3:has(.form-check) { grid-column: 1 / -1; }
/* Телефоны — TextField → textarea; в панели держим их однострочными */
.kform-grid textarea { min-height: 42px; height: 42px; resize: vertical; }
.kform-actions { display: flex; gap: 10px; margin-top: 18px; }
/* --- Широкая панель редактирования: только «Кадры → Сотрудники» ---
В форме сотрудника 15 полей в сетке (фото рисуется отдельно сверху).
В общей панели 380 px колонка выходила ~180 px: подписи и селекты
переносились, форма росла вниз, и «Сохранить» оказывалась ниже экрана —
приходилось скроллить мимо всего списка. У остальных разделов Кадров
в форме 1–3 поля, поэтому ширину меняем модификатором, а не общим правилом. */
@media (min-width: 1200px) {
.kadry-editor-wide { grid-template-columns: minmax(0, 1fr) 520px; }
.kadry-editor-wide .kform-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
/* ⚠ Без этого прилипание ниже НЕ РАБОТАЕТ. У `.panel` стоит `overflow: hidden`
(клип по скруглённым углам), а любой предок с overflow != visible отменяет
`position: sticky` у потомка — проверено: кнопка уезжала на 2270 px при
экране 1215. Здесь клип не нужен: поля лежат внутри отступов панели и до
скруглений не достают. */
.kadry-editor-wide .kedit,
.kadry-editor-wide .kedit .panel-body { overflow: visible; }
/* Кнопки прилипают к низу панели: даже когда форма длиннее экрана, «Сохранить»
остаётся на виду и не требует докручивать страницу до конца списка. */
.kadry-editor-wide .kform-actions {
position: sticky;
bottom: 0;
background: var(--surface);
padding: 12px 0 2px;
margin-top: 14px;
border-top: 1px solid var(--line);
}
.kedit-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.kedit-ava, .kedit-ava-ph {
width: 62px; height: 62px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
}
.kedit-ava-ph {
background: var(--brand); color: #fff; font-weight: 800; font-size: 20px;
display: flex; align-items: center; justify-content: center;
}
.emp-table { width: 100%; border-collapse: collapse; }
.emp-table thead th {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: .09em;
text-transform: uppercase; color: var(--muted); font-weight: 600;
text-align: left; padding: 0 14px 12px; border-bottom: 1px solid var(--line);
}
.emp-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.emp-table tbody tr:last-child td { border-bottom: 0; }
.emp-table tbody tr:hover { background: var(--brand-lighter); }
.emp-table tbody tr.is-selected { background: var(--brand-lighter); }
.emp-person { display: flex; align-items: center; gap: 12px; }
.emp-ava, .emp-ava-ph {
width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.emp-ava-ph {
background: var(--brand-light); color: var(--brand); font-weight: 700; font-size: 13px;
display: flex; align-items: center; justify-content: center;
}
.emp-ava-ph.tone1 { background: var(--brand); color: #fff; }
.emp-name-b { font-weight: 700; font-size: var(--fs-body); color: var(--ink); }
.emp-pos { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.emp-dept-c { color: var(--brand); font-size: var(--fs-body); }
.emp-int { font-weight: 600; color: var(--brand); }
.emp-edit-btn {
width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line);
background: var(--surface); color: var(--muted); display: inline-flex;
align-items: center; justify-content: center; text-decoration: none;
}
.emp-edit-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.emp-edit-btn svg { width: 16px; height: 16px; }
.kfilter { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.kfilter .kf-grow { flex: 1 1 260px; min-width: 200px; }
.kfilter label {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 5px; display: block;
}
/* --- Кадры: дерево отделов с иконками-домиками + счётчиками --- */
.dtree { list-style: none; margin: 0; padding: 0; }
.dtree ul { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; }
.dtree ul::before {
content: ''; position: absolute; left: 13px; top: 0; bottom: 18px; width: 1px; background: var(--line);
}
.dtree-row {
display: flex; align-items: center; gap: 10px; padding: 9px 12px;
border-radius: 11px; position: relative;
}
.dtree-row:hover { background: var(--brand-lighter); }
.dtree-row.is-selected { background: var(--brand-lighter); box-shadow: inset 0 0 0 1px var(--line-strong); }
.dtree-toggle {
width: 20px; flex-shrink: 0; color: var(--muted); background: none; border: 0;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.dtree-toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.dtree-toggle.collapsed svg { transform: rotate(-90deg); }
.dtree-ico {
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
background: var(--brand-light); color: var(--brand);
display: inline-flex; align-items: center; justify-content: center;
}
.dtree-ico.dtree-ico-root { background: var(--brand-deep); color: #fff; font-weight: 800; font-size: var(--fs-sm); }
.dtree-ico svg { width: 17px; height: 17px; }
.dtree-name { font-weight: 700; font-size: var(--fs-body); color: var(--ink); }
.dtree-sub .dtree-name { font-weight: 500; }
.dtree-head { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.dtree-dot { width: 6px; height: 6px; border-radius: 50%; background: #c3d3c9; flex-shrink: 0; margin: 0 7px; }
.dtree-count {
margin-left: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
background: #eef2f0; border-radius: var(--radius-pill); padding: 3px 11px;
}
.dtree-count-big { background: var(--brand-light); color: var(--brand); }
.dtree-act {
width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent;
color: var(--muted); background: none; display: inline-flex; align-items: center;
justify-content: center; text-decoration: none; flex-shrink: 0;
}
.dtree-act:hover { background: var(--surface); border-color: var(--line); color: var(--brand); }
.dtree-act.dtree-act-danger:hover { color: var(--danger); border-color: var(--danger-line); }
.dtree-act svg { width: 15px; height: 15px; }
.dtree-count + .dtree-act { margin-left: 6px; }
.kedit-count {
display: flex; align-items: center; gap: 9px; padding: 11px 14px;
background: var(--brand-lighter); border: 1px solid var(--line);
border-radius: 11px; font-size: var(--fs-sm); color: var(--ink); margin-top: 4px;
}
.kedit-count svg { width: 17px; height: 17px; color: var(--brand); flex-shrink: 0; }
/* --- Заявки (service desk): статы + сгруппированные таблицы --- */
/* ⚠ auto-fit, а не repeat(4, 1fr): плиток бывает и пять (табель). С жёсткими
четырьмя пятая падала в новый ряд одна, и получалась дыра в пол-экрана.
При четырёх плитках раскладка не меняется — пустые дорожки схлопываются. */
.sd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
@media (max-width: 991.98px) { .sd-stats { grid-template-columns: repeat(2, 1fr); } }
.sd-stat {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); box-shadow: var(--shadow-sm); padding: 18px 22px;
}
.sd-stat-v { font-size: var(--fs-3xl); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.sd-stat-k { font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; }
.sd-v-open { color: var(--info); } .sd-v-prog { color: var(--warn); }
.sd-v-done { color: var(--brand); } .sd-v-total { color: var(--ink); }
.sd-group-head { display: flex; align-items: center; gap: 10px; }
.sd-group-ico {
width: 34px; height: 34px; border-radius: 10px; background: var(--brand-light);
color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sd-group-ico.sd-ico-blue { background: var(--info-bg); color: var(--info); }
.sd-group-ico svg { width: 18px; height: 18px; }
.sd-group-title { font-weight: 700; font-size: var(--fs-md); }
.sd-group-count { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: #eef2f0; border-radius: var(--radius-pill); padding: 2px 10px; }
.sd-table { width: 100%; border-collapse: collapse; }
.sd-table thead th {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: .09em;
text-transform: uppercase; color: var(--muted); font-weight: 600;
text-align: left; padding: 0 16px 12px; border-bottom: 1px solid var(--line);
}
.sd-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sd-table tbody tr:last-child td { border-bottom: 0; }
.sd-table tbody tr:hover { background: var(--brand-lighter); }
.sd-key { font-family: 'IBM Plex Mono', monospace; color: var(--muted); font-size: var(--fs-sm); }
.sd-subj { font-weight: 600; color: var(--ink); }
.sd-date { color: var(--muted); font-size: var(--fs-sm); }
/* Описание заявки: приглушённый цвет и кегль меньше основного, обрезка в
2 строки — иначе длинное описание растянет строку и таблица перестанет
читаться. Полный текст — во всплывающей подсказке (title, см. list.html).
Цвет через var(--muted) — тема наследуется автоматически, отдельного
правила для html.theme-dark не нужно (переопределена в 04-themes.css). */
/* ⚠ Обрезка висит на ВНУТРЕННЕМ элементе, а не на самой ячейке: у `td`
браузер не принимает режим `-webkit-box`, нужный для обрезки по строкам
(вычисленный display остаётся `flow-root`). Правило на ячейке выглядело
верным, но текст просто резался посередине третьей строки — видно только
глазами, ни один серверный тест этого не покажет. */
.sd-desc { color: var(--muted); font-size: var(--fs-sm); max-width: 360px; }
.sd-desc span {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.sd-badge { font-size: var(--fs-xs); font-weight: 700; padding: 3px 11px; border-radius: var(--radius-pill); white-space: nowrap; }
.sd-badge-open { background: var(--info-bg); color: var(--info); }
.sd-badge-prog { background: #fff4e6; color: var(--warn); }
.sd-badge-done { background: var(--brand-light); color: var(--brand); }
html.theme-dark .sd-badge-prog { background: #33291c; }
/* --- Кадры: Должности / Города (счётчик-бейдж, строка добавления) --- */
.pos-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; padding: 3px 10px; border-radius: var(--radius-pill);
background: var(--brand-light); color: var(--brand); font-weight: 700; font-size: var(--fs-xs);
}
.pos-count.is-zero { background: #eef2f0; color: var(--muted); }
.emp-edit-btn.is-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.pos-addbar { display: flex; gap: 12px; align-items: center; }
.pos-addbar .form-control { flex: 1 1 auto; }
.pos-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* --- Календарь отдела: шапка-навигация + пилюли отсутствий --- */
.cal-nav {
display: inline-flex; align-items: center; gap: 4px; padding: 3px;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.cal-nav a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 32px; border-radius: 9px; color: var(--muted); text-decoration: none;
}
.cal-nav a:hover { background: var(--brand-lighter); color: var(--ink); }
.cal-nav a svg { width: 16px; height: 16px; }
.cal-nav .cal-nav-label { font-weight: 700; color: var(--ink); padding: 0 12px; min-width: 120px; text-align: center; }
.cal-emp-role { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.cal-legend-square { width: 13px; height: 13px; border-radius: 4px; display: inline-block; vertical-align: -1px; }
.cal-legend-square.is-off { background: #eef2f0; border: 1px solid var(--line); }
/* Календарь — освежение таблицы под макет (переопределяет старые правила) */
.cal-table { font-size: var(--fs-sm); }
.cal-table th, .cal-table td { border-color: var(--line); }
.cal-emp-head { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; background: var(--brand-lighter); }
.cal-emp { min-width: 220px; padding: 12px 14px !important; font-weight: 700; color: var(--ink); }
.cal-day-head { padding: 9px 4px; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.cal-day-head .cal-dow { font-size: var(--fs-label); font-weight: 600; color: var(--muted); margin-top: 2px; letter-spacing: .04em; }
.cal-day-head.cal-today { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; color: var(--brand); }
.cal-cell { height: 48px; }
.cal-weekend { background: #f4f6f5; }
.cal-absent { border-radius: 0; }
html.theme-dark .cal-emp { background: var(--dk-surface); color: var(--ink); }
html.theme-dark .cal-emp-head { background: #17201a; }
/* --- Настройки курса (двухколоночная форма, тумблеры, обложка) --- */
.course-set-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cset-h { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 18px; }
.cset-field { margin-bottom: 16px; }
.cset-field:last-child { margin-bottom: 0; }
.cset-field > label, .cset-label {
display: block; font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label);
letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.cset-field textarea { min-height: 90px; }
.cset-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 575.98px) { .cset-grid2 { grid-template-columns: 1fr; } }
.cset-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
/* Обложка курса */
.cover-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cover-prev {
width: 190px; height: 118px; border-radius: 12px; flex-shrink: 0;
background: repeating-linear-gradient(45deg, #eef2f0, #eef2f0 8px, #e7ede9 8px, #e7ede9 16px);
display: flex; align-items: center; justify-content: center; overflow: hidden;
color: var(--muted); font-size: var(--fs-xs);
}
.cover-prev img { width: 100%; height: 100%; object-fit: cover; }
/* Тумблеры-переключатели (реальные чекбоксы) */
.tgl { display: flex; align-items: center; gap: 14px; padding: 15px 0; cursor: pointer; margin: 0; }
.tgl + .tgl, .tgl + .tgl-static, .tgl-static + .tgl { border-top: 1px solid var(--line); }
.tgl-static { display: flex; align-items: center; gap: 14px; padding: 15px 0; }
.tgl input { position: absolute; opacity: 0; width: 0; height: 0; }
.tgl-track {
position: relative; width: 44px; height: 24px; border-radius: 999px;
background: #d3dad6; transition: background .15s; flex-shrink: 0;
}
.tgl-thumb {
position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.tgl input:checked + .tgl-track,
.tgl-static.is-on .tgl-track { background: var(--brand); }
.tgl input:checked + .tgl-track .tgl-thumb,
.tgl-static.is-on .tgl-track .tgl-thumb { transform: translateX(20px); }
.tgl-text b { display: block; font-size: var(--fs-body); color: var(--ink); font-weight: 700; }
.tgl-text small { color: var(--muted); font-size: var(--fs-xs); }
.tgl-static.is-locked { opacity: .75; }
html.theme-dark .tgl-track { background: #3a423d; }
/* --- Не отметившиеся: баннер-предупреждение + статусы ---
Фон/рамка/текст — на токенах --warn-bg/--warn-line/--warn-ink (01-tokens.css),
тёмная тема их уже переопределяет (04-themes.css) — отдельный
html.theme-dark .warn-banner{...} не нужен и раньше не совпадал в точности
с этими токенами (2a2115 вместо 2a2318 и т.п.), теперь одно место правды. */
.warn-banner {
display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-card); margin-bottom: 18px;
}
.warn-banner-ico {
width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: #fdecd3; color: var(--warn);
display: inline-flex; align-items: center; justify-content: center;
}
.warn-banner-ico svg { width: 20px; height: 20px; }
.warn-banner-t { font-weight: 700; color: var(--ink); }
.warn-banner-d { color: var(--warn-ink); font-size: var(--fs-sm); margin-top: 2px; }
.emp-status { font-size: var(--fs-xs); font-weight: 700; padding: 3px 11px; border-radius: var(--radius-pill); white-space: nowrap; }
.emp-status-bad { background: #ffe3e3; color: var(--danger); }
.emp-status-ok { background: var(--ok-bg); color: var(--ok-ink); }
.emp-status-warn { background: #fff3e0; color: var(--warn); }
html.theme-dark .emp-status-warn { background: #33291c; }
/* Тип отсутствия — цветная пилюля */
.abs-type { font-size: var(--fs-xs); font-weight: 700; padding: 3px 11px; border-radius: var(--radius-pill); white-space: nowrap; display: inline-block; }
.abs-type-vac { background: var(--brand-light); color: var(--brand); }
.abs-type-sick { background: #ffe3e3; color: var(--danger); }
.abs-type-trip { background: var(--info-bg); color: var(--info); }
.abs-type-off { background: #fff3e0; color: var(--warn); }
.abs-type-other { background: #eef2f0; color: var(--muted); }
.emp-table.th-center thead th,
.emp-table.th-center tbody td { text-align: center; }
.emp-table.th-center thead th:first-child,
.emp-table.th-center tbody td:first-child { text-align: left; }
.emp-table.th-center .pos-actions { justify-content: center; }
.emp-edit-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
html.theme-dark .abs-type-off { background: #33291c; }
/* На тёмном тинте --brand (#2e9e63) давал 4.3:1 — чуть ниже нормы. Осветляем
только текст чипа: фон и семантика цвета остаются прежними. */
html.theme-dark .abs-type-vac { color: #3fae73; }
/* --- Новости: «главная» новость крупным блоком --- */
.news-featured {
display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-panel); overflow: hidden; margin-bottom: 10px;
box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
}
@media (max-width: 767.98px) { .news-featured { grid-template-columns: 1fr; } }
/* На широких экранах «главная» новость занимает половину ширины, а не тянется
от левого края до правого (просьба владельца). Высота прежняя. Ниже 992px —
во всю ширину: при двух колонках уже половины текст становится тесным. */
@media (min-width: 992px) { .news-featured { max-width: 50%; } }
.news-feat-cover {
position: relative; min-height: 270px;
background: repeating-linear-gradient(45deg, #eef2f0, #eef2f0 10px, #e7ece9 10px, #e7ece9 20px);
display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--fs-sm);
}
.news-feat-cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.news-feat-badge {
position: absolute; top: 16px; left: 16px; z-index: 2;
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); font-weight: 700;
padding: 4px 11px; border-radius: 7px; background: var(--brand-light); color: var(--brand);
}
.news-feat-body { padding: 30px 34px; display: flex; flex-direction: column; }
.news-feat-meta { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-xs); color: var(--muted); letter-spacing: .04em; margin-bottom: 12px; }
.news-feat-title { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 12px; }
.news-feat-text { color: var(--muted); font-size: var(--fs-md); line-height: 1.55; }
.news-feat-more { color: var(--brand); font-weight: 700; margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 6px; }
.news-feat-more svg { width: 16px; height: 16px; }
.news-section-label { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 22px 0 14px; }
html.theme-dark .news-feat-cover { background: repeating-linear-gradient(45deg, #1a221d, #1a221d 10px, #202a24 10px, #202a24 20px); }
/* --- Новая заявка: карточки типа обращения --- */
.sd-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 575.98px) { .sd-type-grid { grid-template-columns: 1fr; } }
.sd-type-card { display: flex; align-items: center; gap: 12px; border: 2px solid var(--line); border-radius: 14px; padding: 13px 16px; cursor: pointer; margin: 0; background: var(--surface); transition: border-color .14s, background .14s; }
.sd-type-card.sel { border-color: var(--brand); background: var(--brand-lighter); }
.sd-type-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.sd-type-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sd-type-ico.warn { background: #ffe3e3; color: var(--danger); }
.sd-type-ico.info { background: var(--info-bg); color: var(--info); }
html.theme-dark .sd-type-ico.info { background: #1e2740; color: #8ea6f0; }
.sd-type-ico svg { width: 18px; height: 18px; }
.sd-type-card b { display: block; font-size: var(--fs-md); color: var(--ink); }
.sd-type-card small { color: var(--muted); font-size: var(--fs-xs); }
.sd-type-empty { color: var(--muted); font-size: var(--fs-sm); padding: 8px 2px; }
/* --- Аналитика обучения --- */
.an-two { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 20px; align-items: start; }
@media (max-width: 991.98px) { .an-two { grid-template-columns: 1fr; } }
.an-bar-row { margin-bottom: 18px; }
.an-bar-row:last-child { margin-bottom: 0; }
.an-bar-head { display: flex; justify-content: space-between; font-size: var(--fs-body); margin-bottom: 7px; }
.an-bar-head b { font-weight: 600; color: var(--ink); }
.an-bar-head > span { color: var(--muted); font-weight: 700; }
.an-bar { height: 9px; border-radius: 6px; background: #e9edeb; overflow: hidden; }
html.theme-dark .an-bar { background: #2a332d; }
.an-bar-fill { height: 100%; border-radius: 6px; }
.an-fill-ok { background: #40c057; }
.an-fill-warn { background: #f0a020; }
.an-fill-bad { background: #e64980; }
.an-rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.an-rank-row:first-child { border-top: 0; }
.an-rank-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; background: #eef2f0; color: var(--muted); flex-shrink: 0; }
html.theme-dark .an-rank-num { background: #2a332d; }
.an-rank-num.top1 { background: #f5b301; color: #fff; }
.an-rank-num.top2 { background: #adb5bd; color: #fff; }
.an-rank-num.top3 { background: #cd7f32; color: #fff; }
.an-rank-body { flex: 1 1 auto; min-width: 0; }
.an-rank-name { font-weight: 600; font-size: var(--fs-body); }
.an-rank-dept { font-size: var(--fs-xs); color: var(--muted); }
.an-rank-pts { font-weight: 800; color: var(--brand); font-size: var(--fs-md); }
.an-tbar { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.an-tbar .an-bar { flex: 1 1 auto; max-width: 240px; }
.an-tbar > span { font-weight: 700; color: var(--muted); font-size: var(--fs-sm); min-width: 36px; text-align: right; }
/* --- Рейтинг обучения: подиум-герой --- */
.rk-hero { background: var(--hero-grad); border-radius: var(--radius-panel); padding: 26px; margin-bottom: 24px; }
.rk-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 18px; align-items: end; }
@media (max-width: 767.98px) { .rk-podium { grid-template-columns: 1fr; } }
.rk-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 22px 18px; text-align: center; color: #fff; }
.rk-card.win { background: rgba(255,255,255,.10); border-color: rgba(245,179,1,.55); padding-top: 12px; }
.rk-cup { color: #f5b301; margin-bottom: 6px; }
.rk-cup svg { width: 24px; height: 24px; }
.rk-ava, .rk-ava-ph { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
.rk-ava-ph { background: rgba(255,255,255,.16); color: #fff; font-weight: 800; font-size: 18px; border: 2px solid rgba(255,255,255,.4); }
.rk-card.win .rk-ava-ph, .rk-card.win .rk-ava { border: 3px solid #f5b301; }
.rk-place { font-size: var(--fs-xs); color: rgba(255,255,255,.7); margin-bottom: 3px; }
.rk-name { font-weight: 700; font-size: var(--fs-md); }
.rk-pts { font-size: var(--fs-3xl); font-weight: 800; margin-top: 6px; }
/* --- Личный кабинет: три стат-карточки, обучение, подписки, модалка --- */
/* Верхний ряд карточки: «Звонки» + «Опоздания» + «График».
⚠ auto-fit, а не repeat(3, 1fr): блок «Звонки» скрыт у руководителей, а
«Опоздания» — вне личного кабинета. С жёсткими тремя колонками на их месте
оставалась дыра в половину экрана, и карточка выглядела разрозненной.
Теперь оставшиеся панели делят ряд поровну, сколько бы их ни было. */
.lk-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
align-items: stretch;
}
/* Нижний ряд: «Обучение» — список с датами, ему нужна ширина; «Благодарности»
рядом узкой колонкой. Раньше обе шли полноширинными полосами, и блок с одной
строкой текста занимал всю ширину экрана. */
.lk-grid-wide {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 20px;
align-items: start;
margin-top: 20px;
}
@media (max-width: 991.98px) {
.lk-grid, .lk-grid-wide { grid-template-columns: 1fr; }
}
.lk-panel-head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: var(--fs-md); margin-bottom: 14px; }
.lk-panel-head svg { width: 18px; height: 18px; color: var(--brand); }
.lk-panel-head .lk-month { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lk-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.lk-row + .lk-row { border-top: 1px solid var(--line); }
.lk-row-label { color: var(--muted); font-size: var(--fs-body); }
.lk-row-val { font-weight: 700; font-size: var(--fs-md); }
.lk-miss { background: #ffe3e3; color: var(--danger); border-radius: var(--radius-pill); padding: 1px 10px; font-size: var(--fs-sm); font-weight: 700; }
html.theme-dark .lk-miss { background: #2a1c1c; }
/* Блок опозданий в карточке использует общий регистр .metric (см. выше). */
.sched-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-light); color: var(--brand); font-weight: 700; font-size: var(--fs-body); padding: 8px 14px; border-radius: var(--radius-pill); margin-bottom: 14px; }
.sched-chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.lk-points { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); background: var(--brand-light); border-radius: var(--radius-pill); padding: 4px 12px; }
.lk-course-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.lk-course-date { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-xs); color: var(--muted); flex-shrink: 0; width: 88px; }
.lk-course-title { font-weight: 600; color: var(--ink); flex: 1 1 auto; }
.lk-course-title a { color: var(--ink); text-decoration: none; }
.lk-course-title a:hover { color: var(--brand); }
.lk-course-pts { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); background: var(--brand-light); border-radius: var(--radius-pill); padding: 3px 11px; flex-shrink: 0; }
.sub-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--brand-lighter); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 8px 7px 16px; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.sub-chip form { margin: 0; }
.sub-chip-off { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--danger); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; padding: 3px 8px; border-radius: var(--radius-pill); }
.sub-chip-off:hover { background: var(--danger-bg); }
.sub-add-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-pill); padding: 8px 16px; font-size: var(--fs-body); font-weight: 600; color: var(--brand); cursor: pointer; }
.sub-add-btn:hover { border-color: var(--brand); background: var(--brand-lighter); }
.sub-add-btn svg { width: 15px; height: 15px; }
.lk-modal-overlay { position: fixed; inset: 0; background: rgba(18,33,26,.5); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.lk-modal-overlay.open { display: flex; }
.lk-modal { background: var(--surface); border-radius: var(--radius-panel); box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; padding: 24px; }
/* Окно набора номера — уже обычного: в нём одно поле. */
.lk-modal-narrow { max-width: 380px; }
.dial-input {
font-size: var(--fs-xl); font-weight: 600; letter-spacing: .02em;
font-family: 'IBM Plex Mono', monospace; text-align: center;
}
.lk-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.lk-modal-head svg { width: 20px; height: 20px; color: var(--brand); }
.lk-modal-head h2 { font-size: var(--fs-lg); font-weight: 800; margin: 0; }
.lk-modal-close { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lk-modal-close:hover { background: var(--brand-lighter); color: var(--ink); }
.lk-modal-note { display: flex; align-items: center; gap: 9px; background: var(--brand-lighter); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; font-size: var(--fs-sm); color: var(--muted); margin: 4px 0 18px; }
.lk-modal-note svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }
/* Окно для длинной формы (правка книги — 10 полей + вложения): шире узкого
.lk-modal-narrow и самого .lk-modal (440px не помещает форму без ужасной
тесноты), и — в отличие от них — со своей прокруткой: .lk-modal-overlay даёт
только 20px отступа сверху/снизу (padding: 20px), высокую форму без этого
обрезало бы окном браузера, а не показывало календарём вниз. `calc(100vh - 40px)`
— те же 20px с обеих сторон, что уже держит сам оверлей, число не с потолка. */
.lk-modal-lg { max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; }
/* --- Информация: подзаголовок, чипы категорий, бейджи карточек --- */
.info-head-sub { color: var(--muted); font-size: var(--fs-body); margin-top: 2px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.cat-chip {
padding: 7px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line);
background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.cat-chip:hover { border-color: var(--line-strong); background: var(--brand-lighter); color: var(--ink); }
.cat-chip.active { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.info-card { position: relative; }
.info-cat-badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px;
background: var(--brand-light); color: var(--brand);
}
.info-card-foot { display: flex; align-items: center; gap: 9px; padding: 0 18px 14px; margin-top: auto; }
.info-doc-badge {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); font-weight: 700;
padding: 2px 8px; border-radius: 5px; background: #eef2f0; color: var(--muted);
}
.info-updated { color: var(--muted); font-size: var(--fs-xs); }
html.theme-dark .info-doc-badge { background: #222a26; }
/* --- Страница входа: сплит-экран --- */
.app-guest:has(.login-split) { padding: 0; background: #eef1ef; align-items: stretch; min-height: 100vh; }
.login-split { display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 100vh; }
@media (max-width: 767.98px) { .login-split { grid-template-columns: 1fr; } .login-hero { display: none; } }
.login-hero { background: var(--hero-grad-page); color: #fff; padding: 48px; display: flex; flex-direction: column; }
.login-hero-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .02em; font-size: var(--fs-lg); }
.login-hero-brand .lh-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--accent); color: var(--brand-deep); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.login-hero-body { margin-top: auto; }
.login-hero-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.login-hero-title { font-size: 40px; font-weight: 800; line-height: 1.12; margin: 14px 0 16px; letter-spacing: -.02em; }
.login-hero-sub { color: rgba(255,255,255,.75); font-size: var(--fs-md); max-width: 380px; line-height: 1.5; }
.login-hero-foot { margin-top: 44px; font-size: var(--fs-xs); color: rgba(255,255,255,.45); font-family: 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.login-right { display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-box { width: 100%; max-width: 380px; background: #fff; border-radius: 20px; padding: 34px 32px; box-shadow: 0 20px 50px rgba(20,40,30,.10); }
.login-box h1 { font-size: 24px; font-weight: 800; text-align: center; margin: 0; color: var(--ink); }
.login-box .lb-sub { text-align: center; color: var(--muted); font-size: var(--fs-body); margin: 6px 0 22px; }
.lb-field { margin-bottom: 16px; }
.lb-field > label { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
.lb-input { position: relative; }
.lb-input > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); }
.lb-input input { width: 100%; padding: 12px 14px 12px 40px; border: 1px solid var(--line); border-radius: 11px; font-size: var(--fs-md); color: var(--ink); background: #fff; }
.lb-input input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(13,122,62,.12); }
.lb-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); cursor: pointer; padding: 5px; display: flex; }
.lb-eye svg { width: 18px; height: 18px; }
.lb-submit { width: 100%; margin-top: 6px; }
.lb-help { text-align: center; margin-top: 18px; font-size: var(--fs-sm); color: var(--muted); }
.lb-help a { color: var(--brand); font-weight: 600; text-decoration: none; }
.lb-error { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); border-radius: 10px; padding: 10px 12px; font-size: var(--fs-sm); margin-bottom: 16px; text-align: center; }
/* --- Профиль: AD-бейдж, фото-панель, тема-пикер --- */
.ad-badge { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); font-weight: 700; letter-spacing: .05em; background: #eef2f0; color: var(--muted); padding: 1px 6px; border-radius: 5px; margin-left: 6px; vertical-align: 1px; }
html.theme-dark .ad-badge { background: #222a26; }
.prof-photo { display: flex; align-items: center; gap: 18px; }
.prof-ava, .prof-ava-ph { width: 92px; height: 92px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.prof-ava-ph { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; font-weight: 800; font-size: 28px; display: flex; align-items: center; justify-content: center; }
.theme-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 575.98px) { .theme-pick { grid-template-columns: 1fr; } }
.theme-pick-card { border: 2px solid var(--line); border-radius: 14px; padding: 13px; cursor: pointer; display: block; margin: 0; transition: border-color .14s; }
.theme-pick-card.sel { border-color: var(--brand); }
.theme-pick-swatch { height: 42px; border-radius: 9px; margin-bottom: 11px; border: 1px solid rgba(0,0,0,.06); }
.theme-sw-light { background: #eef1ef; position: relative; }
.theme-sw-light::before { content: ''; position: absolute; inset: 8px 10px auto 10px; height: 8px; border-radius: 4px; background: var(--brand-deep); }
.theme-sw-light::after { content: ''; position: absolute; left: 10px; right: 10px; top: 22px; height: 10px; border-radius: 4px; background: #fff; }
.theme-sw-glass { background: linear-gradient(120deg, #b6e6d4, #a8ccf0); }
.theme-sw-dark { background: #141816; position: relative; }
.theme-sw-dark::before { content: ''; position: absolute; inset: 8px 10px auto 10px; height: 10px; border-radius: 4px; background: var(--brand); }
.theme-pick-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-body); }
.theme-pick-label input { accent-color: var(--brand); }
/* --- Дни рождения: оранжевый баннер «сегодня» --- */
.bd-hero { background: linear-gradient(120deg, #b5610f 0%, #e2870f 100%); border-radius: var(--radius-panel); padding: 22px 24px; margin-bottom: 26px; color: #fff; }
.bd-hero-head { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.85); margin-bottom: 16px; }
.bd-hero-head svg { width: 18px; height: 18px; }
.bd-hero-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.bd-hero-card { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.14); border-radius: 14px; padding: 13px 16px; }
.bd-hero-ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.22); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid rgba(255,255,255,.5); }
.bd-hero-name { font-weight: 700; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-hero-sub { color: rgba(255,255,255,.85); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-hero-btn { margin-left: auto; background: #fff; color: #b45f0a; font-weight: 700; padding: 8px 18px; border-radius: 10px; text-decoration: none; font-size: var(--fs-body); white-space: nowrap; flex-shrink: 0; }
.bd-hero-btn:hover { background: #fff4e6; color: #b45f0a; }
/* На узкой карточке (минимум трека — 330px) аватар (46px) и кнопка
«Поздравить» (~110px, flex-shrink:0) забирали почти всю строку — колонке
с ФИО/должностью оставалось ~105px, обрезало текст почти сразу.
Переносим кнопку на отдельную строку: аватар с именем занимают всю первую
строку без соперника за место, кнопка уходит вниз (margin-left:auto
выше по-прежнему прижимает её вправо). */
@media (max-width: 575.98px) {
.bd-hero-card { flex-wrap: wrap; row-gap: 10px; }
.bd-hero-card > div { flex: 1 1 0%; }
.bd-hero-btn { flex-basis: 100%; }
}
/* --- Чипы дней недели (график) --- */
.day-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chip {
min-width: 40px; text-align: center; padding: 7px 6px; border-radius: 9px;
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); font-weight: 700; letter-spacing: .04em;
background: #eef2f0; color: var(--muted);
}
.day-chip.on { background: var(--brand-light); color: var(--brand); }
html.theme-dark .day-chip { background: #222a26; }
/* --- Контекст-строка отчётов (дата/период) --- */
.rep-context { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-sm); }
.rep-context svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }
/* --- Ширина страниц раздела «Отчёты» --- */
/* ⚠ На широком мониторе строки таблиц и плитки иначе растягиваются на весь экран —
глаз теряет начало следующей строки, а плитки стоят с пустым воздухом внутри.
Число намеренно то же, что у .book-page-width (06-pages-2026.css, блок карточки
книги): свою величину не заводим, оба места — это одна и та же по смыслу колонка
контента с прокруткой (там текст и таблица свойств, здесь таблицы отчётов), просто
классы разные — отчёты и библиотека меняются разными правками, и объединять их
в один класс означало бы иногда чинить один раздел и получать сюрприз в другом.
.se-page (1080) и .cset-page (1000) — про другой, более узкий контент (карточки
раздела курса), они с этим числом не связаны и трогать их не нужно.
Проверено живьём на «Приходах и уходах» и «Опозданиях» — самых широких таблицах
раздела (8 колонок с двумя группами, раскрывающиеся дни): при 1180px горизонтальная
прокрутка (.table-scroll) не понадобилась ни на одной странице отчётов, содержимое
просто плотнее, но не теснее исходного. На узких экранах ограничение не действует
(браузер и так уже теснее 1180px), боковых полей не добавляет. */
/* ⚠ Прижато к ЛЕВОМУ краю, а не по центру, — решение владельца по виду
раздела. Центрирование оставляем странице книги: там содержимое читают,
а отчёт просматривают, и его столбцы удобнее держать на одном месте, чтобы
они не переезжали при смене ширины окна. Прижимаем весь раздел, а не только
плитки: иначе при переходе с плиток в отчёт содержимое прыгало бы вбок. */
.rep-page-width { max-width: 1180px; margin-left: 0; margin-right: auto; }
/* --- Назначение на курс --- */
.asg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.asg-head-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.asg-head-ico svg { width: 24px; height: 24px; }
.asg-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.asg-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 991.98px) { .asg-layout { grid-template-columns: 1fr; } }
.asg-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.asg-toolbar .asg-title { font-weight: 800; font-size: var(--fs-md); margin-right: auto; }
/* ⚠ Поиск занимает всю свободную ширину, а не жмётся в угол: сотрудников
больше двухсот, и найти человека — обычный путь на этой странице, а не
редкий случай. Узкое поле в углу читалось как необязательная мелочь. */
.asg-search { position: relative; flex: 1 1 260px; min-width: 220px; max-width: 420px; }
.asg-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.asg-search input { padding-left: 34px; width: 100%; text-overflow: ellipsis; }
.asg-found { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.asg-selectall { display: flex; align-items: center; gap: 11px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.asg-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.asg-row:last-child { border-bottom: 0; }
.asg-check { width: 20px; height: 20px; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; margin: 0; }
.asg-ava { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--brand-light); color: var(--brand); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.asg-name { font-weight: 700; font-size: var(--fs-body); color: var(--ink); }
.asg-pos { font-size: var(--fs-xs); color: var(--muted); }
.asg-assigned { margin-left: auto; font-size: var(--fs-label); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--brand-light); color: var(--brand); white-space: nowrap; }
.asg-side { position: sticky; top: 84px; }
.asg-count { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.asg-count-n { font-size: var(--fs-3xl); font-weight: 800; color: var(--brand); line-height: 1; }
.asg-count-k { color: var(--muted); font-size: var(--fs-body); }
.asg-empty-list { padding: 24px 4px; color: var(--muted); text-align: center; font-size: var(--fs-body); }
/* --- Новый материал: дроп-зоны обложки и вложений --- */
.mat-drops { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 575.98px) { .mat-drops { grid-template-columns: 1fr; } }
.mat-drop {
border: 2px dashed var(--line); border-radius: var(--radius-card);
background: var(--brand-lighter); padding: 26px; text-align: center; cursor: pointer;
display: block; transition: border-color .14s, background .14s;
}
.mat-drop:hover { border-color: var(--brand); background: var(--brand-light); }
.mat-drop svg { width: 26px; height: 26px; color: var(--brand); }
.mat-drop b { display: block; margin-top: 8px; font-size: var(--fs-body); color: var(--ink); }
.mat-drop small { color: var(--muted); font-size: var(--fs-xs); }
.mat-files { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.mat-file { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; font-size: var(--fs-sm); }
.mat-file-badge { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); font-weight: 700; background: var(--brand-light); color: var(--brand); padding: 2px 7px; border-radius: 6px; text-transform: uppercase; }
.mat-file-size { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
/* --- Тёмная тема: доводка новых компонентов (серые чипы, синие тинты) --- */
html.theme-dark .dtree-count,
html.theme-dark .sd-group-count,
html.theme-dark .pos-count.is-zero,
html.theme-dark .day-chip { background: #222a26; color: var(--muted); }
html.theme-dark .sd-group-ico.sd-ico-blue,
html.theme-dark .sd-stat .sd-v-open { color: #8ea6f0; }
html.theme-dark .sd-group-ico.sd-ico-blue { background: #1e2740; }
html.theme-dark .emp-table thead th,
html.theme-dark .sd-table thead th { color: var(--muted); }
html.theme-dark .cover-prev,
html.theme-dark .mat-drop { background: #1a221d; }
/* «Назначено мне»: обязательная строка не должна оставаться светло-кремовой */
html.theme-dark .assigned-row-warn { background: #2a2115; border-color: #4a3a1f; }
html.theme-dark .assigned-row { background: var(--dk-surface); }
/* --- Сертификат: логотип на тёмном чипе (как в макете) --- */
.cert-logo-chip {
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand-deep); border-radius: 10px; padding: 11px 18px; margin-bottom: 4px;
}
.cert-logo-chip img { display: block; height: 34px; width: auto; }
/* --- Статус сотрудника в результатах поиска (страница и живая выдача) --- */
.sr-status {
display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
margin-left: 8px; padding: 2px 9px; border-radius: var(--radius-pill);
font-size: var(--fs-label); font-weight: 600; white-space: nowrap;
background: var(--brand-lighter); color: var(--muted);
}
.sr-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.sr-status-in { background: var(--brand-light); color: var(--brand); }
.sr-status-absent { background: #fff3e0; color: #b26a00; }
html.theme-dark .sr-status-in { background: #1c2d22; }
html.theme-dark .sr-status-absent { background: #33291c; color: #f0a350; }
/* --- Отчёт «Учёт моего времени»: табель по дням --- */
.ts-table td { vertical-align: middle; }
.ts-date { font-weight: 700; font-variant-numeric: tabular-nums; }
/* День недели мелко рядом с датой: помогает глазом находить выходные,
не вводя отдельную колонку. */
.ts-dow {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label);
color: var(--muted); text-transform: uppercase; margin-left: 7px;
}
/* Выходные и дни без графика — приглушены: строк за месяц три десятка,
и без этого рабочие дни в них теряются. */
.ts-off, .ts-none { background: var(--bg); }
.ts-off .ts-date, .ts-none .ts-date { color: var(--muted); font-weight: 600; }
.ts-absent { background: var(--warn-bg); }
.ts-noshow .ts-date { color: var(--danger); }
.ts-note { font-size: var(--fs-xs); color: var(--muted); margin-left: 8px; }
.ts-late { font-size: var(--fs-xs); font-weight: 600; color: var(--danger); margin-left: 8px; }
/* Неполные данные СКУД (одна отметка за день) — предупреждение, не ошибка. */
.ts-warn { font-size: var(--fs-xs); font-weight: 600; color: var(--warn); margin-left: 8px; }
.ts-manual {
display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
font-size: var(--fs-xs); color: var(--muted);
}
.ts-manual svg { flex-shrink: 0; color: var(--info); }
/* Дробь «7/20» в плитке итогов — вторая часть тише первой */
.ts-of { color: var(--muted); font-size: var(--fs-lg); font-weight: 600; }
/* Вторая величина в ячейке табеля («в офисе», «обед 60 мин») — тише основной */
.ts-gross { display: block; font-size: var(--fs-label); color: var(--muted); margin-top: 2px; }
/* --- Отчёт «Опоздания»: раскрывающиеся дни по сотруднику --- */
.lt-hint { font-size: var(--fs-xs); color: var(--muted); margin-left: 10px; letter-spacing: .02em; }
.lt-row { cursor: pointer; }
.lt-row:hover { background: var(--brand-lighter); }
.lt-row td:first-child { display: flex; align-items: center; gap: 8px; }
.lt-chev {
display: inline-flex; color: var(--muted); flex: 0 0 auto;
transition: transform .15s;
}
.lt-chev svg { width: 15px; height: 15px; }
.lt-row.is-open .lt-chev { transform: rotate(180deg); color: var(--brand); }
.lt-row.is-open { background: var(--brand-lighter); }
.lt-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Вложенная таблица дней — визуально «внутри» строки сотрудника */
.lt-days { width: 100%; border-collapse: collapse; background: var(--brand-lighter); }
.lt-days thead th {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label);
letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
font-weight: 600; text-align: left; padding: 8px 14px 6px;
}
.lt-days thead th:last-child, .lt-days tbody td:last-child { text-align: right; }
.lt-days tbody td { padding: 6px 14px; font-size: var(--fs-sm); border-top: 1px solid var(--line); }
.lt-days tbody tr:hover { background: var(--surface); }
.lt-arrival { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--ink); }
html.theme-dark .lt-days { background: #1c241f; }
/* Телефон в результатах поиска — кнопка вызова через АТС */
.sr-phones { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.sr-call {
border: 0; background: none; padding: 0; cursor: pointer;
color: var(--brand); font: inherit; text-decoration: underline dotted;
text-underline-offset: 3px;
}
.sr-call:hover { color: var(--brand-deep); text-decoration-style: solid; }
/* --- Разбор ответов после теста (ТЗ 2026, пп. 2-3) -------------------------
Показывается только при включённых тумблерах теста. Два уровня раскрытия
независимы: статус вопроса и подсветка выбранных вариантов. Цвет — не
единственный признак: у вердикта есть слово, у варианта — знак ✓/✕
(WCAG 1.4.1, см. docs/ui_audit_2026.md). */
.tr-q { padding: 16px 0; border-bottom: 1px solid var(--line); }
.tr-q:last-child { border-bottom: 0; padding-bottom: 0; }
.tr-q:first-child { padding-top: 0; }
.tr-q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tr-q-num {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label);
letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.tr-q-points { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
.tr-verdict {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; border-radius: var(--radius-pill);
font-size: var(--fs-label); font-weight: 600; white-space: nowrap;
}
.tr-verdict-ok { background: var(--ok-bg); color: var(--ok-ink); }
.tr-verdict-bad { background: var(--danger-tint); color: var(--danger-ink); }
.tr-verdict-wait { background: var(--bg); color: var(--muted); }
.tr-q-text { color: var(--ink); font-weight: 600; margin-bottom: 10px; }
.tr-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tr-choice {
display: flex; align-items: flex-start; gap: 9px;
padding: 8px 12px; border-radius: var(--radius-sm);
border: 1px solid var(--line); color: var(--ink); font-size: var(--fs-body);
}
.tr-choice-mark {
width: 16px; flex-shrink: 0; font-weight: 700; line-height: 1.45; text-align: center;
}
/* Оценка стоит только у выбранных вариантов: отмечать невыбранные правильные —
это и есть выдача ответа, ради чего тумблеры и разделены. */
.tr-choice-ok { border-color: var(--ok-ink); background: var(--ok-bg); }
.tr-choice-ok .tr-choice-mark { color: var(--ok-ink); }
.tr-choice-bad { border-color: var(--danger-line); background: var(--danger-tint); }
.tr-choice-bad .tr-choice-mark { color: var(--danger-ink); }
.tr-choice-you {
margin-left: auto; flex-shrink: 0; color: var(--muted);
font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em;
}
.tr-text-answer {
padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--bg); color: var(--ink); font-size: var(--fs-body);
white-space: pre-wrap;
}
/* Подсказка-разбор: приглушённая врезка слева, чтобы не спорить с самим ответом. */
.tr-hint {
margin-top: 10px; padding: 10px 14px;
border-left: 3px solid var(--line-strong); background: var(--bg);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--ink); font-size: var(--fs-sm);
}
.tr-hint-label {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label);
letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
margin-bottom: 4px;
}
.tr-hint-img, .tr-hint-video {
display: block; margin-top: 8px; max-width: 100%; border-radius: var(--radius-sm);
}
.tr-hint-video { max-height: 320px; }
.tr-hint-file {
display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
color: var(--brand); font-weight: 600; text-decoration: none;
}
.tr-hint-file:hover { text-decoration: underline; }
/* --- Прохождение теста: сопоставление и последовательность (ТЗ 2026, пп. 4-5) */
.tq-match { display: grid; gap: 8px; }
.tq-match-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center;
padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface);
}
.tq-match-left { color: var(--ink); font-size: var(--fs-body); }
@media (max-width: 575.98px) {
/* На узком экране пара складывается в две строки: две колонки по 150 px
режут текст соответствия до нечитаемого. */
.tq-match-row { grid-template-columns: 1fr; gap: 6px; }
}
.tq-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: none; }
.tq-order-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface);
}
.tq-order-num {
width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px;
background: var(--brand-light);
/* ⚠ Цифру красим в --ink, а не в --brand: в тёмной теме зелёный на зелёном
тинте давал 4.34:1 — ниже порога 4.5. Замерено на странице, не на глаз.
Тинт остаётся зелёным, акцент сохраняется, а номер читается в обеих темах. */
color: var(--ink);
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-xs); font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.tq-order-text { flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: var(--fs-body); }
.tq-order-btns { display: flex; gap: 4px; flex-shrink: 0; }
.tq-order-btn {
width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
border: 1px solid var(--line); background: var(--surface); color: var(--muted);
font-size: 15px; line-height: 1;
}
.tq-order-btn:hover:not(:disabled) { background: var(--brand-lighter); color: var(--brand); }
.tq-order-btn:disabled { opacity: .35; cursor: default; }
/* Ширина чтения для прохождения теста и разбора результата.
Без неё на широком мониторе строка вопроса растягивалась на две тысячи
пикселей, а у сопоставления половины пары разъезжались на пол-экрана и
переставали читаться как пара. 780 px — примерно 90 знаков в 14 px и при
этом хватает на две колонки сопоставления. Прохождение и разбор — один
сценарий, поэтому ширина у них общая. */
.tr-sheet { max-width: 780px; margin-left: auto; margin-right: auto; }
/* --- Настройки теста (редактор тренера) ---
⚠ Никакого выравнивания по нижнему краю. Раньше три колонки стояли в
`align-items-end`, содержимое у них разной высоты — и поля вставали
лесенкой, а сверху зияла пустая полоса. Числовые поля выравниваем по
ВЕРХУ, тумблеры выносим в отдельный блок: это другая по смыслу настройка. */
.ts-nums {
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px; align-items: start; max-width: 560px;
}
.ts-toggles {
margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
max-width: 720px;
}
.ts-toggles-title {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label);
letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
margin-bottom: 12px;
}
.ts-toggle { margin-bottom: 14px; }
.ts-toggle:last-child { margin-bottom: 0; }
.ts-toggle .form-text { margin-top: 2px; }
/* ============================================================================
Редактор раздела курса — каркас из дизайн-передачи
docs/design_handoff_course_admin (экраны 02-06: это ОДНА страница, тело
меняется по типу раздела).
Карточки берём проектные (.panel), новыми делаем то, чего в системе не было:
крошки с моно-меткой, переключатель типа, двухколоночную сетку со
«липкой» правой панелью и список программы курса.
============================================================================ */
.se-crumbs {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.se-crumb { color: var(--muted); font-size: var(--fs-sm); text-decoration: none; }
.se-crumb:hover { color: var(--ink); }
.se-mark {
font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--brand);
}
.se-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.se-sub { color: var(--muted); font-size: 13.5px; margin: 4px 0 18px; }
/* Две колонки: содержимое и «липкие» параметры. Ниже 900px — одна колонка,
панель уезжает под контент (иначе 300px съедают половину экрана). */
.se-grid {
display: grid; grid-template-columns: minmax(0, 1fr) 300px;
gap: 20px; align-items: start;
}
.se-side { position: sticky; top: 88px; display: grid; gap: 18px; }
@media (max-width: 899.98px) {
.se-grid { grid-template-columns: 1fr; }
.se-side { position: static; }
}
/* Переключатель типа раздела: пять карточек-кнопок. */
.se-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.se-type {
display: flex; flex-direction: column; gap: 8px;
padding: 12px 14px; border-radius: var(--radius-sm);
border: 1.5px solid var(--line); background: var(--surface);
color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none;
transition: border-color .12s, background .12s;
}
.se-type svg { width: 19px; height: 19px; color: var(--muted); }
.se-type:hover { border-color: var(--line-strong); background: var(--bg); }
.se-type.is-active { border-color: var(--brand); background: var(--brand-lighter); }
.se-type.is-active svg { color: var(--brand); }
/* Моно-метка над полем — из дизайн-системы портала. */
.se-label {
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label);
letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
margin-bottom: 5px; display: block;
}
/* Программа курса в правой панели: текущий раздел выделен пунктиром. */
.se-program { display: grid; gap: 2px; }
.se-program-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 7px 9px; border-radius: 9px;
border: 1px dashed transparent; color: var(--ink); font-size: var(--fs-sm);
text-decoration: none;
}
.se-program-row:hover { background: var(--bg); }
.se-program-row.is-current {
border-color: var(--line-strong); background: var(--brand-lighter);
}
/* ⚠ margin-top на кружке — компенсация для align-items:flex-start у строки
(см. .se-program-row): без неё номер прилипает к верхнему краю блока и
у двухстрочных названий выглядит задранным, а не «на высоте текста». */
.se-program-num {
width: 22px; height: 22px; flex-shrink: 0; border-radius: 7px;
margin-top: 1px;
background: var(--bg); color: var(--muted);
font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.se-program-row.is-current .se-program-num { background: var(--brand-light); color: var(--brand); }
/* ⚠ Название переносится в 2 строки, а не обрезается многоточием: у длинных
названий (курс «Информационная безопасность…») в один ряд читался только
обрывок («Пароль: почему один на всё — плохая и…»), а панель нарочно не
расширяем — эту ширину отдаём редактору материала (см. .se-grid ниже).
align-items: flex-start у строки — иначе номер «плавает» по центру двух строк. */
.se-program-name { flex: 1 1 auto; min-width: 0; white-space: normal; line-height: 1.3; }
.se-program-total {
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
color: var(--muted); font-size: var(--fs-xs);
}
.se-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.se-card-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.se-addfile { max-width: 420px; margin-top: 4px; }
/* Полоса редактора раздела — из дизайн-передачи было 1080 px, расширено до
1260: правая панель («Параметры» + «Программа курса») по-прежнему 300px
(.se-grid), вся добавленная ширина уходит колонке с материалом раздела —
владелец просил поле шире, а не панель. На узких экранах .se-page по-прежнему
просто заполняет доступную ширину контента (max-width — верхний предел,
не фиксированный размер), так что на 1366px и уже ничего не съезжает. */
.se-page { max-width: 1260px; }
/* ⚠ Высота редактора «Материал урока / текст задания» — CSS-переопределение
инлайнового style, который TinyMCE проставляет из TINYMCE_DEFAULT_CONFIG
(400px, corppnx/settings.py, общий для всех полей на портале). Править
его точечно только для этой формы средствами Python нельзя — конфиг один
на весь сайт; !important в стиле автора перебивает инлайновый стиль без
!important, это штатный способ, а не хак. Тулбар/статусбар TinyMCE сами
fixed-height внутри flex-колонки, редактируемая область — flex:1, поэтому
вся добавленная высота уходит именно тексту, а не рамке вокруг тулбара. */
.se-page .tox-tinymce { height: 640px !important; }
/* --- Настройка курса: шапка, вкладки, программа (дизайн-передача, экран 01) */
.cset-page { max-width: 1000px; }
.cset-title-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin: 4px 0 16px;
}
.cset-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.cset-pill {
padding: 3px 10px; border-radius: var(--radius-pill);
font-size: var(--fs-label); font-weight: 600; white-space: nowrap;
}
.cset-pill-draft { background: var(--warn-bg, #fdf3e6); color: #8a5a12; }
.cset-pill-live { background: var(--ok-bg); color: var(--ok-ink); }
.cset-stats { color: var(--muted); font-size: var(--fs-sm); }
.cset-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cset-tabs { margin-bottom: 16px; }
.cset-card-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.cset-add {
border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
padding: 7px 13px; color: var(--brand); font-size: var(--fs-sm); font-weight: 600;
text-decoration: none; background: var(--surface);
}
.cset-add:hover { background: var(--brand-lighter); border-color: var(--brand); }
/* Строка программы: номер, название, тип, баллы, карандаш. Название режем
многоточием — длинные заголовки иначе ломают строку и ряд «плывёт». */
.cset-row {
display: flex; align-items: center; gap: 12px;
padding: 9px 12px; border-radius: var(--radius-sm);
border: 1px solid var(--line); margin-bottom: 6px; background: var(--surface);
}
.cset-row.is-test { background: var(--brand-lighter); }
.cset-row-num {
width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px;
background: var(--bg); color: var(--muted);
font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-xs); font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.cset-row.is-test .cset-row-num { background: var(--brand-deep); color: #fff; }
.cset-row-name {
flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: var(--fs-body);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cset-row-type {
flex-shrink: 0; padding: 2px 9px; border-radius: var(--radius-pill);
background: var(--bg); color: var(--muted); font-size: var(--fs-label); white-space: nowrap;
}
.cset-row-points {
flex-shrink: 0; width: 90px; text-align: right;
color: var(--muted); font-size: var(--fs-xs);
}
.cset-row-edit {
width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); color: var(--muted); background: var(--surface);
}
.cset-row-edit svg { width: 14px; height: 14px; }
.cset-row-edit:hover { background: var(--brand-lighter); color: var(--brand); border-color: var(--brand); }
.cset-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cset-chip {
padding: 4px 11px; border-radius: var(--radius-pill);
background: var(--brand-light); color: var(--brand-deep);
font-size: var(--fs-xs); font-weight: 600;
}
@media (max-width: 575.98px) {
/* Тип и баллы уходят: на узком экране они съедают место у названия. */
.cset-row-type, .cset-row-points { display: none; }
}
/* --- SCORM-раздел (дизайн-передача, экран 06) --- */
.se-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scorm-drop {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 32px 20px; cursor: pointer;
border: 1.5px dashed var(--line-strong); border-radius: 16px;
background: var(--brand-lighter); color: var(--muted); text-align: center;
}
.scorm-drop:hover { border-color: var(--brand); background: var(--brand-light); }
.scorm-drop svg { width: 30px; height: 30px; color: var(--brand); margin-bottom: 4px; }
.scorm-drop-main { color: var(--ink); font-size: var(--fs-md); font-weight: 700; }
.scorm-drop-sub { font-size: var(--fs-xs); }
.scorm-file {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.scorm-badge {
flex-shrink: 0; padding: 4px 9px; border-radius: 7px;
background: var(--bg); color: var(--muted);
font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
}
.scorm-file-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.scorm-ok, .scorm-bad {
flex-shrink: 0; padding: 3px 10px; border-radius: var(--radius-pill);
font-size: var(--fs-label); font-weight: 600;
}
.scorm-ok { background: var(--brand-light); color: var(--brand-deep); }
.scorm-bad { background: var(--danger-tint); color: var(--danger-ink); }
/* Таблица сведений из манифеста: подпись — значение. */
.scorm-info {
display: grid; grid-template-columns: minmax(140px, auto) 1fr;
gap: 8px 18px; margin: 16px 0 0;
}
.scorm-info dt { color: var(--muted); font-size: var(--fs-sm); }
.scorm-info dd { margin: 0; color: var(--ink); font-size: var(--fs-sm); word-break: break-all; }
.scorm-info dd.mono { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-xs); }
@media (max-width: 575.98px) {
.scorm-info { grid-template-columns: 1fr; gap: 2px 0; }
.scorm-info dd { margin-bottom: 10px; }
.se-two { grid-template-columns: 1fr; }
}
/* --- Раздел-задание (дизайн-передача, экран 05) --- */
.se-three { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
@media (max-width: 575.98px) { .se-three { grid-template-columns: 1fr; } }
/* Переключатель формата сдачи на радиокнопках: работает с клавиатуры и
уходит в форму без единой строки JS. Сам кружок прячем, состояние
показываем рамкой и заливкой. */
.fmt-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fmt-btn {
position: relative; cursor: pointer;
padding: 10px 16px; border-radius: var(--radius-sm);
border: 1.5px solid var(--line); background: var(--surface);
color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
}
.fmt-btn input { position: absolute; opacity: 0; pointer-events: none; }
.fmt-btn:hover { border-color: var(--line-strong); background: var(--bg); }
.fmt-btn:has(input:checked) { border-color: var(--brand); background: var(--brand-lighter); }
/* Фокус с клавиатуры виден, хотя сам кружок скрыт. */
.fmt-btn:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.crit-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.crit-del { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
/* ============================================================================
Библиотека — дизайн-направление (docs/library_plan.md). Раздела ещё нет,
классы заводятся заранее для фронтенда. Три экрана: каталог (.book-catalog),
карточка книги (.book-layout), читатели — переиспользуют .kadry-editor/.kedit
из Кадров (см. templates/kadry/absences.html) без единого нового класса.
Меню направлений — общий .dir-menu (03-modules.css), уже не training-specific.
============================================================================ */
/* --- Каталог: сетка книг + меню направлений справа, как в «Обучении» --- */
.book-catalog { display: flex; gap: 20px; align-items: flex-start; }
.book-catalog-main { flex: 1 1 auto; min-width: 0; }
.book-catalog-side { flex: 0 0 230px; }
@media (max-width: 991.98px) {
.book-catalog { flex-direction: column; }
.book-catalog-side { flex: 1 1 auto; width: 100%; order: -1; }
}
/* Поиск и сортировка раздела — своя строка над сеткой, ⚠ НЕ поле в шапке
(используют параметр ?q=, шапка подхватывает его только на странице
результатов глобального поиска — см. задачу 4 плана). Макет просит вид
отдельной карточки-полосы, а не голых полей вразброс — добавлена рамка. */
.book-toolbar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.book-toolbar .book-search { flex: 1 1 260px; min-width: 200px; position: relative; }
.book-toolbar .book-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.book-toolbar .book-search input { padding-left: 34px; }
/* ⚠ .form-select — width:100% из выжимки Bootstrap (00-base.css). Внутри флекс-
строки это становится flex-basis (auto наследует width), и селект без своей
явной базы разворачивается на всю ширину строки — ровно то, из-за чего
.kfilter каждое поле оборачивает в свой div (kf-grow/min-width). Здесь без
обёртки — фиксируем базу самим правилом, а не шириной, тем же приёмом,
что .book-search { flex: 1 1 260px }. */
.book-toolbar select { flex: 0 1 200px; min-width: 160px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.book-card {
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-card); overflow: hidden;
text-decoration: none; color: var(--ink);
transition: transform .14s, box-shadow .14s, border-color .14s;
}
.book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
/* ⚠ Обложка — 3:4 (портрет книги), не 16:10 как у курсов: у книжной обложки
иные пропорции, растянутая под альбомный формат выглядела бы чужой.
⚠ Фон плейсхолдера — ПЛОСКАЯ заливка (как .info-card-ph у статей), не
штриховка, как у .tr-course-cover: на реальных данных в каталоге библиотеки
284 книги подряд без обложек (импорт от 2026-08-05), и диагональные полосы
одной фазы у соседних карточек сливаются в сплошное рябящее поле — на глаз
заметно сильнее, чем то же самое у курса, где рядом редко больше 2–3 карточек
без картинки одновременно. Проверено на живых данных. */
.book-cover {
position: relative; aspect-ratio: 3 / 4;
/* ⚠ overflow: hidden — тот же приём, что у .tr-course-cover (06-pages-2026.css,
см. комментарий там): без него обложка с «неудобным» соотношением сторон
(квадратный скан, узкий портретный корешок) продавливает flex-контейнер
выше заданных 3:4, и карточка выбивается из ряда каталога. */
overflow: hidden;
background: #f1f3f5;
display: flex; align-items: center; justify-content: center;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover-ph { font-size: var(--fs-label); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 0 12px; }
.book-dir {
position: absolute; top: 10px; left: 10px;
background: rgba(255, 255, 255, .92); color: var(--brand);
font-size: var(--fs-label); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill);
}
.book-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
/* Длинное название — 2 строки с обрезкой, а не «наезд» на низ карточки */
.book-title {
font-weight: 700; font-size: var(--fs-body); line-height: 1.3; min-height: calc(var(--fs-body) * 1.3 * 2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.book-authors { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Тонкая линия над рейтингом/комментариями — макет просит их отдельной
строкой, а не просто нижним краем тела карточки. */
.book-card-foot {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line);
}
/* Оценки нет — не «0», а приглушённая подпись (§ average_rating может быть None) */
.book-rating { color: var(--warn); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.book-rating-empty { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.book-comments-n { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.book-comments-n svg { width: 13px; height: 13px; }
html.theme-dark .book-cover { background: #222a26; }
html.theme-dark .book-dir { background: rgba(0, 0, 0, .6); color: #7fd6a2; }
/* ⚠ .book-card — ссылка (весь блок кликабелен), и html.theme-dark a { color: #7fd6a2 }
(04-themes.css) специфичнее голого .book-card { color: var(--ink) } (2 типа+класс
против одного класса) — без этой строки название каждой из 284 книг в тёмной теме
красится акцентным зелёным, а не обычным текстом. Тот же фикс, что уже стоит
у .info-card в 04-themes.css:171 — только в другом модуле (следствие правила
§10: правило кладём в конец своего модуля, а не переносим строку в чужой). */
html.theme-dark .book-card { color: var(--ink); }
/* --- Карточка книги: обложка и факты слева, содержимое справа (как .course-layout) --- */
/* ⚠ Страница книги не растягивается во всю ширину монитора: на широком экране
строка описания и таблица свойств уезжали бы на полтора метра, и глаз терял
бы начало следующей строки. Колонка держит ширину макета и стоит по центру.
Ограничение — на .book-page-width, его несут и шапка с крошками, и сама
раскладка: иначе крошки прижимались бы к краю окна, а книга стояла по
центру, и они разъезжались бы между собой. */
.book-page-width { max-width: 1180px; margin-left: auto; margin-right: auto; }
.book-layout { display: flex; gap: 20px; align-items: flex-start; }
.book-layout-main { flex: 1 1 auto; min-width: 0; }
.book-layout-side { flex: 0 0 280px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 991.98px) {
.book-layout { flex-direction: column; }
.book-layout-main, .book-layout-side { width: 100%; }
}
.book-layout-side .panel { margin-bottom: 0; }
.book-cover-lg {
display: flex; align-items: center; justify-content: center;
width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-card); overflow: hidden;
background: #f1f3f5; /* та же плоская заливка, что .book-cover — единый вид карточки и детали */
}
.book-cover-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover-lg-ph { font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 0 16px; }
html.theme-dark .book-cover-lg { background: #222a26; }
/* Превью текущей обложки в форме добавления/правки книги (одиночная книга —
не сетка, поэтому фиксированный размер, а не aspect-ratio-плейсхолдер, как
у .book-cover). 96×128 — те же 3:4, что и у остальных обложек книги.
⚠ Плейсхолдера намеренно нет: блок рисуется только когда обложка уже есть
(book.cover истинен) — просить показать «нет обложки» тут нечему. */
.book-cover-preview { width: 96px; height: 128px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
/* Направление + средняя оценка над заголовком, как .course-hd-top */
.book-hd-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
/* ⚠ .book-dir — оверлей на обложке (position:absolute), в шапке карточки книги
съезжает. Здесь нужен обычный инлайновый бейдж — тот же приём, что
.tr-course-dir-inline у курса: тот же .book-dir плюс этот модификатор,
а не отдельный класс с нуля. Токены, а не bg-light/text-dark (§9 дизайн-системы:
бутстраповские литералы в 00-base.css не наследуют темизацию — на этом уже
дважды спотыкались пагинация и плашки сообщений). */
.book-dir-inline { position: static; background: var(--brand-light); }
/* ⚠ Без этой строки в тёмной теме побеждает html.theme-dark .book-dir (rgba(0,0,0,.6)) —
у неё выше специфичность (html+класс против одного класса), .book-dir-inline её не
перебивает сам по себе. Проверил замером: без этой строки бейдж в шапке карточки
книги полупрозрачно-чёрный вместо мятного чипа, почти сливается с тёмной панелью.
⚠ Цвет текста — литерал #7fd6a2, тот же, что у .book-dir/.tr-course-dir в тёмной
теме (не var(--brand)): var(--brand) в тёмной теме — #2e9e63, на --brand-light
(#1e2b24) даёт только 4.34:1 — ниже порога 4.5:1 для обычного текста. #7fd6a2 —
established акцент тёмной темы (см. html.theme-dark a, .page-link:hover и т.д.),
на этом фоне даёт заметно больше запаса. */
html.theme-dark .book-dir-inline { background: var(--brand-light); color: #7fd6a2; }
.book-rating-hero { color: var(--warn); font-weight: 700; font-size: var(--fs-lg); }
.book-rating-hero-n { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; margin-left: 4px; }
/* Факты (издательство, год, ISBN, направление) — метка слева, значение справа,
как .cside-row у курса. Своя копия: разные разделы, менять будут порознь. */
.book-side-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.book-side-row:last-child { border-bottom: 0; }
.book-side-row span { color: var(--muted); }
.book-side-row strong { color: var(--ink); text-align: right; font-weight: 600; word-break: break-word; }
/* Оценка книги — переиспользует .star-input (04-themes.css), своей CSS не требует.
Файлы — переиспользуют .article-files/.article-file/.pdf-frame (articles), тем же
приёмом с book_file вместо прямой /media/-ссылки. Добавлен только размер файла. */
.book-file-size { color: var(--muted); font-size: var(--fs-xs); font-family: 'IBM Plex Mono', monospace; margin-left: 8px; white-space: nowrap; }
/* Комментарии к книге — НЕ своя копия. Пересмотрено: лента идентична «Спасибо,
коллега» (thx-item в 07-late.css) — карточка-строка с аватаром, автором, датой
и текстом через тот же бордер-разделитель. Разница в данных (один автор вместо
пары «кому/от кого»), а не в вёрстке, поэтому переиспользуем классы как есть,
без переименования (07-late.css — чужой активный экран, его не трогаем):
.thx-item — строка комментария целиком
.thx-ava/.thx-ava-ph — аватар 44px / инициалы
.thx-body, .thx-head — тело и шапка строки
.thx-to — автор комментария (жирным, ссылка на профиль)
.thx-date — дата, .thx-head .thx-date прижимает её вправо
.thx-comment — текст комментария
.thx-del — кнопка удаления (модерация: автор или библиотекарь —
видимость решает сервер, кнопка та же самая)
Что НЕ переносим: .thx-from («от кого») — у книжного комментария один автор,
этой строки просто нет в разметке. Форма ввода — обычные .form-control
(textarea) + .btn, тем же приёмом, что форма отзыва в course_detail.html,
отдельного класса-обёртки не требует. */
/* --- Окно «Добавить/Править книгу» (templates/library/_book_form_modal.html) —
вёрстка по макету владельца: двухколоночная шапка (обложка-дропзона +
поля), пары полей во всю ширину, широкая дропзона файла, подвал с тремя
действиями. Дропзоны — тот же приём дашбордной рамки, что .scorm-drop
(SCORM-раздел курса, чуть выше): дашед-рамка на var(--line-strong),
заливка var(--brand-lighter), тот же hover в var(--brand-light) — только
своя копия, а не класс-модификатор поверх .scorm-drop: там раскладка
строго вертикальная и с фиксированным padding, здесь одна дропзона
квадратная (3:4) с абсолютным разметкой поверх, другая — широкая
горизонтальная с кнопкой, ни то ни другое в .scorm-drop не влезает без
переписывания под два новых модификатора, что рискованнее отдельных
классов на 4 связанных полях. */
/* Шапка: под .lk-modal-close остаётся тот же margin-left:auto, здесь только
ставим текстовый блок (мелкий капс .page-eyebrow + h2) в колонку — сам
.lk-modal-head трогать нельзя, это общий класс ещё двух модалок
(_thanks_modal.html, person_detail.html), где вместо надзаголовка иконка
в одну строку с заголовком, и её вертикальное центрирование ломать нельзя. */
.lk-modal-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lk-modal-head-text h2 { font-size: var(--fs-xl); }
/* Верхняя пара «обложка + поля». 160px — 3:4 даёт ~213px высоты, укладывается
рядом с «Название»+«Авторы»+строкой «Год/Издательство» без лишнего пустого
поля снизу у самой дропзоны (align-items:start — она не тянется на высоту
всей правой колонки). */
.book-form-top { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: start; margin-bottom: 16px; }
.book-form-cover-col, .book-form-fields-col { min-width: 0; }
/* Дропзона обложки — сама