/) ---- */
.impuls-pos{color:#237a44;font-variant-numeric:tabular-nums}
.impuls-neg{color:#c02a2a;font-variant-numeric:tabular-nums}
/* ============================================================
КАСТОМНЫЕ КОМПОНЕНТЫ (этап 2)
Классы для экранов, которых нет в стоковом Tabler: секции длинных
форм, календарь месяца, доска планирования, плитка медиатеки.
Разметку см. в handoff/examples/. Все значения — токены системы.
============================================================ */
/* ---- Секции длинной формы (lesson-form) ---- */
.impuls-form-section{border:1px solid #e6e6ee;border-radius:8px;padding:20px;margin-bottom:16px;background:#fcfcfe}
.impuls-form-section:last-child{margin-bottom:0}
.impuls-form-section__title{font-size:18px;font-weight:600;margin:0 0 16px;color:#1b1930}
.impuls-form-section__hint{font-size:13px;color:#8b8a9c;margin:-8px 0 14px}
.impuls-form-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;background:#fff;border-top:1px solid #e6e6ee;border-radius:0 0 8px 8px}
/* ---- Календарь месяца (calendar) ---- */
.impuls-cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid #e6e6ee;border-bottom:0;border-radius:8px 8px 0 0;background:#fff}
.impuls-cal-title{font-size:18px;font-weight:600}
.impuls-cal{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid #e6e6ee;border-top:0;border-radius:0 0 8px 8px;overflow:hidden;background:#fff}
.impuls-cal__dow{padding:9px 8px;text-align:center;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#8b8a9c;background:#f7f7fb;border-bottom:1px solid #e6e6ee;border-right:1px solid #e6e6ee}
.impuls-cal__dow:nth-child(7n){border-right:0}
.impuls-cal__cell{min-height:104px;padding:6px 7px;border-right:1px solid #e6e6ee;border-bottom:1px solid #e6e6ee;display:flex;flex-direction:column;gap:4px}
.impuls-cal__cell:nth-child(7n){border-right:0}
.impuls-cal__cell--we{background:#f3f8f3}
.impuls-cal__cell--other{background:#f7f7fb}
.impuls-cal__num{font-size:13px;color:#47445c;text-align:right;font-variant-numeric:tabular-nums}
.impuls-cal__cell--other .impuls-cal__num{color:#b3b2c3}
.impuls-cal__ev{font-size:12px;border-radius:5px;padding:4px 6px;line-height:1.3;color:#fff;overflow:hidden;cursor:pointer}
.impuls-cal__ev-time{font-weight:600}
.impuls-cal__ev--corp{background:#2680c2}
.impuls-cal__ev--team{background:#2e9e5b}
.impuls-cal__ev--draft{background:#e0a100}
.impuls-cal__more{font-size:12px;color:#7b52d6;font-weight:600}
/* ---- Доска планирования (planning-board) ----
Матрица доступности (слева) + дни + лейны помещений. Шапка и
левый блок (инструкторы + дата) заморожены (position:sticky). */
.impuls-board-wrap{overflow:auto;max-height:78vh;border:1px solid #e6e6ee;border-radius:8px;background:#fff;overscroll-behavior-x:contain}
.impuls-board{border-collapse:separate;border-spacing:0;font-size:12px;width:max-content;min-width:100%}
.impuls-board th,.impuls-board td{border-right:1px solid #ececf2;border-bottom:1px solid #ececf2;padding:5px 7px;vertical-align:top;background:#fff}
.impuls-board thead th{position:sticky;top:0;z-index:3;background:#f7f7fb;font-weight:600;color:#47445c;text-align:left;white-space:nowrap}
.impuls-board__group{text-align:center!important;background:#e4f0fa;color:#1b6ba6;font-weight:700}
.impuls-board__group--out{background:#e6f4eb;color:#237a44}
.impuls-board__sticky{position:sticky;z-index:2}
.impuls-board thead .impuls-board__sticky{z-index:4}
.impuls-board__daycol{font-variant-numeric:tabular-nums;text-align:center;color:#47445c;white-space:nowrap}
.impuls-board__num{font-weight:600}
.impuls-board tr.is-we td{background:#f3f8f3}
.impuls-board tr.is-we .impuls-board__av{background:inherit}
.impuls-board__av{width:22px;min-width:22px;padding:0!important}
.impuls-board__av--off{background:#f0a9a9!important}
.impuls-board__av--part{background:#c6b6ec!important}
.impuls-board__avhead{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-weight:600;color:#47445c;height:104px;text-align:left;padding:6px 3px!important;vertical-align:bottom}
.impuls-board__chip{background:#eaf1fb;border:1px solid #cfe0f5;border-radius:4px;padding:3px 5px;line-height:1.25;color:#1b1930;min-width:120px}
.impuls-board__chip b{display:block;font-weight:600}
.impuls-board__chip--team{background:#e6f4eb;border-color:#c6e6d2}
/* Доску нельзя показывать на телефоне как на десктопе. Два условия
разные, поэтому и медиазапроса два.
1. Вложенный вертикальный скролл (max-height + overflow-y) внутри
уже скроллящейся страницы ломает жест на iOS: WebKit запирает
направление, и свайп уходит вбок вместо прокрутки вниз. Это беда
любого пальца, а не узкого экрана (телефон на боку — те же 844px),
поэтому условие по вводу. Вертикаль отдаём странице, внутри блока
остаётся только горизонталь. Ценой липкой шапки: при overflow-x:auto
блок остаётся scroll container и по Y, sticky top работать не будет.
2. Матрица преподавателей и колонка месяца съедают всю ширину экрана
(9 преподавателей + мес/день/число ≈ 330px из 360px), расписание
становится нечитаемым — но только на узком экране. Месяц при этом
не теряется: он продублирован строкой .impuls-board__monthrow. */
@media (hover:none) and (pointer:coarse){
.impuls-board-wrap{max-height:none;overflow-y:hidden}
}
@media (max-width:767.98px){
.impuls-board__av,.impuls-board__avhead,.impuls-board__moncol{display:none}
}
/* ---- Плитка медиатеки (media-library) ---- */
.impuls-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.impuls-media-tile{border:1px solid #e6e6ee;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(27,25,48,.04),0 1px 3px rgba(27,25,48,.07);transition:box-shadow .12s ease}
.impuls-media-tile:hover{box-shadow:0 4px 12px rgba(27,25,48,.1)}
.impuls-media-tile__thumb{position:relative;aspect-ratio:4/3;background:#ece6fa;display:flex;align-items:center;justify-content:center;color:#9370d6}
.impuls-media-tile__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.impuls-media-tile__badges{position:absolute;top:8px;left:8px;display:flex;gap:4px;flex-wrap:wrap}
.impuls-media-tile__body{padding:10px 12px}
.impuls-media-tile__title{font-size:13px;font-weight:600;color:#1b1930;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impuls-media-tile__meta{font-size:12px;color:#8b8a9c;margin-top:2px}
/* ---- Правки проекта поверх handoff-темы ----
1. Сплошные бейджи: в beta20 текст бейджа наследует --tblr-secondary,
после переопределения токена текст сливался с фоном (bg-secondary). */
.badge.bg-secondary,.badge.bg-success,.badge.bg-warning,.badge.bg-danger{color:#fff}
/* 2. Заголовки групп сайдбара: выровнять с пунктами и дать воздух сверху. */
.navbar-vertical .navbar-heading{margin:1rem 0 .25rem;padding:0 .75rem;font-size:11px;text-transform:uppercase}
/* 3. Симметричные поля сайдбара: у него overflow-y:scroll, и полоса
прокрутки съедала 15px справа, а содержимое шло от самого левого
края — плашки пунктов «прилипали» к нему. Даём одинаковый отступ с
обеих сторон, а полосу делаем тонкой и только при переполнении.
Внутренние padding пунктов уменьшены на столько же, чтобы текст
остался на прежнем расстоянии от края. */
@media (min-width:992px){
.navbar-vertical.navbar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.navbar-vertical.navbar::-webkit-scrollbar{width:6px}
.navbar-vertical.navbar::-webkit-scrollbar-track{background:transparent}
.navbar-vertical.navbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.navbar-vertical.navbar-expand-lg>[class^=container]{padding-left:.5rem;padding-right:.5rem}
.navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link{padding-left:.5rem;padding-right:.5rem}
.navbar-vertical.navbar-expand-lg .navbar-heading{padding:0 .5rem}
/* Место под полосу резервируется с ОБЕИХ сторон, поэтому отступы
одинаковы и когда меню прокручивается, и когда влезает целиком.
Свой padding контейнера тут уже не нужен — иначе поля удвоятся. */
@supports (scrollbar-gutter:stable both-edges){
.navbar-vertical.navbar{scrollbar-gutter:stable both-edges}
.navbar-vertical.navbar-expand-lg>[class^=container]{padding-left:0;padding-right:0}
}
}
/* 4. Телефон: шапка с логотипом и кнопкой меню остаётся на виду при
прокрутке — иначе, чтобы вернуться в меню, приходится крутить всю
страницу наверх. Своего скроллера не заводим: вложенный скролл уже
ломал жест на доске планирования. */
@media (max-width: 991.98px) {
.navbar-vertical.navbar {
position: sticky;
top: 0;
z-index: 1030;
}
}