/* ============================================================
boom.HVARA — тема редизайна ПОВЕРХ Tabler
Подключать ПОСЛЕДНИМ в link.ejs (после tabler.css / demo.min.css / adaptive.css).
Стратегия: НЕ переопределяем компоненты «в лоб», а ремапим собственные
переменные Tabler (--tblr-*) на наши дизайн-токены — вся система Tabler
сдвигается сама, без борьбы за специфичность и риска разъехать экраны.
Тема переключается атрибутом data-bs-theme на (родной механизм Tabler,
ключ localStorage: tablerTheme). Все цвета — только через var(--*).
============================================================ */
/* ---------- Светлая тема (значения по умолчанию) ---------- */
:root{
/* --- дизайн-токены (используются и при переносе экранов из прототипа) --- */
color-scheme:light; /* нативные контролы (select-попап, скроллбары, дейтпикеры) — светлые */
--canvas:#F4F5F7; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EEF0F4;
--ink-1:#16181D; --ink-2:#5B6473; --ink-3:#919AAB;
--line:#E7E9EF; --line-soft:#EFF1F5;
--primary:#4C6FFF; --primary-ink:#3a5af0; --primary-050:#EEF2FF;
--online:#22C55E; --danger:#E5484D; --amber:#D97706;
/* категории-акценты */
--c-task:#2563EB; --c-col:#0D9488; --c-dept:#7C3AED; --c-group:#D97706; --c-my:#16A34A;
/* радиусы / тени / шрифт */
--r-lg:16px; --r-md:12px; --r-sm:9px;
--shadow-1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
--shadow-2:0 4px 16px rgba(16,24,40,.08),0 2px 6px rgba(16,24,40,.05);
--shadow-pop:0 12px 40px rgba(16,24,40,.16);
--font:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
/* --- ремап Tabler → наши токены --- */
--tblr-font-sans-serif:var(--font);
--tblr-body-font-family:var(--font);
--tblr-primary:var(--primary);
--tblr-primary-rgb:76,111,255;
--tblr-primary-fg:#ffffff;
--tblr-blue:var(--primary);
--tblr-blue-rgb:76,111,255;
--tblr-body-bg:var(--canvas);
--tblr-body-color:var(--ink-1);
--tblr-secondary:var(--ink-2);
--tblr-secondary-color:var(--ink-2);
--tblr-muted:var(--ink-3);
--tblr-border-color:var(--line);
--tblr-border-color-translucent:var(--line);
--tblr-card-bg:var(--surface);
--tblr-card-border-color:var(--line);
--tblr-bg-surface:var(--surface);
--tblr-bg-surface-secondary:var(--surface-2);
--tblr-bg-surface-tertiary:var(--surface-3);
--tblr-link-color:var(--primary);
--tblr-link-color-rgb:76,111,255;
--tblr-link-hover-color:var(--primary-ink);
}
/* ---------- Тёмная тема ----------
Приложение переключает тему классом body.theme-dark (demo.min.js), а Tabler-ядро —
атрибутом data-bs-theme. Поддерживаем ОБА, чтобы живая смена работала полностью. */
[data-bs-theme="dark"], .theme-dark{
color-scheme:dark; /* нативные контролы (выпадашка select, скроллбары, дейтпикеры) — тёмные */
--canvas:#0E1014; --surface:#171A21; --surface-2:#1D2129; --surface-3:#262C37;
--ink-1:#E8EAF0; --ink-2:#9AA3B4; --ink-3:#697084;
--line:#252A34; --line-soft:#1F242D;
--primary-050:#1A2233;
--tblr-body-bg:var(--canvas);
--tblr-body-color:var(--ink-1);
--tblr-secondary:var(--ink-2);
--tblr-border-color:var(--line);
--tblr-border-color-translucent:var(--line);
--tblr-card-bg:var(--surface);
--tblr-card-border-color:var(--line);
--tblr-bg-surface:var(--surface);
--tblr-bg-surface-secondary:var(--surface-2);
--tblr-bg-surface-tertiary:var(--surface-3);
}
/* ============================================================
Мягкая полировка компонентов под токены (консервативно).
Цель Фазы 1 — «осовременить» все экраны, ничего не сломав.
============================================================ */
body{
font-family:var(--font);
background:var(--tblr-body-bg);
color:var(--tblr-body-color);
-webkit-font-smoothing:antialiased;
}
/* Кнопки: в кодовой базе основное действие — .btn-primary и .btn-blue.
ВАЖНО: у Tabler solid-кнопка использует --tblr-btn-color как ФОН (и рамку),
--tblr-btn-color-text — текст, --tblr-btn-color-interactive — фон при hover.
(см. tabler.css: .btn { background:var(--tblr-btn-color); color:var(--tblr-btn-color-text) }) */
.btn-primary,.btn-blue{
--tblr-btn-color:var(--primary);
--tblr-btn-color-interactive:var(--primary-ink);
--tblr-btn-color-text:#fff;
}
.btn-outline-primary,.btn-outline-blue,.btn-ghost-primary,.btn-ghost-blue{
--tblr-btn-color:var(--primary);
--tblr-btn-color-interactive:var(--primary-ink);
--tblr-btn-color-text:#fff;
}
.btn{font-weight:500;}
/* Текст/ссылки бренда */
.text-primary,.text-blue{color:var(--primary)!important;}
a{color:var(--tblr-link-color);}
/* Карточки и поверхности */
.card{
border-radius:var(--r-md);
border-color:var(--line);
box-shadow:var(--shadow-1);
}
/* Поля ввода: радиус + фокус-кольцо в цвете бренда */
.form-control,.form-select,.input-group-text{border-radius:var(--r-sm);}
.input-group .form-control,.input-group .form-select,.input-group .input-group-text{border-radius:0;}
.form-control:focus,.form-select:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px var(--primary-050);
}
/* Переключатели/чекбоксы в цвете бренда */
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary);}
.form-check-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-050);}
/* Тёмная тема: пустые чекбоксы/радио видны на тёмном фоне (заметная рамка + фон) */
[data-bs-theme="dark"] .form-check-input:not(:checked),
.theme-dark .form-check-input:not(:checked){
background-color:var(--surface-3);
border-color:var(--ink-3);
}
/* Бейджи-«синие» → бренд */
.badge.bg-blue,.badge.bg-primary{background-color:var(--primary)!important;}
/* Аккуратные скроллбары (как в прототипе) */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#cfd4dd;border-radius:8px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:#b6bcc8;background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb,.theme-dark ::-webkit-scrollbar-thumb{background:#3a414f;background-clip:padding-box;}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover,.theme-dark ::-webkit-scrollbar-thumb:hover{background:#49515f;background-clip:padding-box;}
/* ============================================================
ФАЗА 2 — Каркас / навигация (сайдбар + верхний навбар)
Перекраска существующей разметки (кастомные классы сайдбара дописаны
в конец tabler.css) под прототип. Только CSS — разметку/Vue не трогаем.
============================================================ */
:root{ --sidebar-bg:#0E1320; --sidebar-ink:#cdd3df; --sidebar-ink-dim:#8a93a6; }
.sidebar{
background:var(--sidebar-bg);
border-right:1px solid rgba(255,255,255,.06);
box-shadow:2px 0 18px rgba(8,10,16,.20);
}
.sidebar-header{border-bottom:1px solid rgba(255,255,255,.07);}
.sidebar-bottom{border-top:1px solid rgba(255,255,255,.07);}
/* Пункты меню */
.menu-item{margin-bottom:3px;padding:0 8px;}
.menu-link{
color:var(--sidebar-ink);
border-radius:10px;
padding:8px 12px;
font-weight:500;
transition:background .15s,color .15s;
}
.menu-link:hover{background:rgba(255,255,255,.07);color:#fff;}
.menu-link .avatar{flex:none;}
/* Активный пункт — индиго-подсветка + левый акцент-бар */
.menu-item.bg-active,.bg-active{ background:rgba(76,111,255,.16)!important; border-radius:10px; }
.menu-item.bg-active .menu-link,.bg-active .menu-link{color:#fff;}
.menu-item.bg-active::before{
content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--primary);
}
/* Подменю (отделы / личные чаты) */
.dropmenu-menu{background:rgba(0,0,0,.22);border-radius:10px;margin:2px 8px;}
/* У раскрытого списка («Отделы» / «Личные чаты») — СВОЙ скролл, а не общий скролл сайдбара.
Иначе длинный список отделов (>500px) обрезался (tabler: overflow:hidden) и выдавливал чаты,
из-за чего последние названия не помещались. Теперь каждый список прокручивается отдельно. */
.menu-item.active .dropmenu-menu{max-height:40vh;overflow-y:auto;overscroll-behavior:contain;}
.dropmenu-link{color:rgba(255,255,255,.7);border-radius:8px;border-left:none;}
.dropmenu-link:hover{background:rgba(76,111,255,.18);color:#fff;}
.dropmenu-item.bg-active{background:rgba(76,111,255,.20)!important;border-radius:8px;}
/* Бейджи в меню */
.badge-menu{background:var(--primary);border-radius:20px;font-weight:600;padding:2px 8px;}
/* Верхний навбар (шапка страницы) */
.navbar.sticky-top{
background:var(--surface);
border-bottom:1px solid var(--line);
box-shadow:var(--shadow-1);
}
.navbar.sticky-top h2{font-weight:700;letter-spacing:-.3px;color:var(--ink-1);}
/* Шапка сайдбара: логотип СВЕРХУ, под ним данные (роль/имя), без обрезки имени */
.sidebar-header{height:auto;min-height:var(--header-height);align-items:flex-start;}
.sidebar .logo{
flex-direction:column;
align-items:flex-start;
gap:5px;
white-space:normal; /* разрешаем перенос длинного имени */
overflow:visible; /* снимаем обрезку */
line-height:1.25;
}
.sidebar .logo .hv-logo{height:22px;width:auto;display:block;flex:none;}
.sidebar .logo > div{padding-left:0!important;} /* убрать сдвиг ps-2 в колонке */
.sidebar .logo .small{color:rgba(255,255,255,.5);}
/* В свёрнутом виде — вернуть центрирование кнопки */
.sidebar.collapsed .sidebar-header{align-items:center;}
/* ============================================================
ФАЗА 3 — Доска (канбан)
Колонки = .card.col-350 с тинтами bg-task-60-*, верхняя полоса .card-status-top.
Цветовую систему bg-task-* НЕ трогаем — только форма/тени/поведение.
============================================================ */
.col-350{width:340px;}
.board-container .card.col-350{
border-radius:14px;
box-shadow:var(--shadow-1);
border:none;
overflow:hidden; /* чтобы цветная полоса повторяла скругление */
}
.board-container .card.col-350 > .card-status-top{
border-top-left-radius:14px;
border-top-right-radius:14px;
}
/* Карточки задач внутри колонок — мягкий подъём при наведении */
.board-container .horizontal-scroll .card{transition:box-shadow .15s ease, transform .15s ease;}
.board-container .horizontal-scroll .card:not(.col-350):hover{box-shadow:var(--shadow-2);transform:translateY(-1px);}
/* Чипы/счётчики на карточках */
.badge.bg-tag-gray,.badge.bg-tag-green{border-radius:6px;font-weight:600;}
/* Состояния перетаскивания (vuedraggable) */
.board-container .ghost{opacity:.55;}
.board-container .chosen{box-shadow:var(--shadow-2);}
/* Авто-оттенки колонок (светлые, слегка насыщенные тона) — для визуального разделения.
Циклическая палитра из 12 различимых тонов по позиции колонки (стабильная,
не «мигает» при перезагрузке; в пределах доски/отдела повтора нет до 12 колонок).
Только светлая тема и только колонки по умолчанию (color='muted') —
вручную заданный «Цвет колонки» сохраняется. */
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+1){background:#D6E2FF!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+2){background:#C9EEE3!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+3){background:#E6D6FB!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+4){background:#FFDFBD!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+5){background:#CFEDC8!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+6){background:#FBCFE0!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+7){background:#C8E2FA!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+8){background:#F7EBBE!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+9){background:#FFD2D6!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+10){background:#DEF0BE!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n+11){background:#C7EEF3!important;}
.theme-light .board-container .horizontal-scroll > .card.col-350.bg-task-60-muted:nth-child(12n){background:#DCD2F9!important;}
/* ============================================================
ФАЗА 4 — Панель задачи / «Мои задачи» + ОБЩИЕ КОМПОНЕНТЫ Tabler
02_1_vazifa.ejs (Мои задачи) и модалка задачи на доске построены на
list-group / card / table / dropdown / modal / badge. Эти же примитивы —
основа экранов Фазы 6 (компания, отчёты, профиль, склад…), поэтому
элевейтим их единым блоком. Всё через токены — разметку/Vue не трогаем.
============================================================ */
/* Списки (Мои задачи, чек-листы, списки сотрудников) */
.list-group-item{transition:background .12s;}
.list-group-flush > .list-group-item:hover{background:var(--surface-2);}
.custom-link-card{color:var(--ink-2);text-decoration:none;}
.custom-link-card:hover{color:var(--primary);}
/* Заголовки карточек */
.card-header{border-bottom-color:var(--line);}
.card-title{font-weight:700;letter-spacing:-.2px;}
/* Таблицы */
.table{--tblr-table-border-color:var(--line);}
.table thead th{font-weight:600;color:var(--ink-3);}
.table-vcenter td,.table-vcenter th{vertical-align:middle;}
/* Модалки */
.modal-content{border-radius:var(--r-lg);border:none;box-shadow:var(--shadow-pop);}
.modal-header{border-bottom-color:var(--line);}
.modal-footer{border-top-color:var(--line);}
/* Выпадающие меню */
.dropdown-menu{border-radius:var(--r-md);border-color:var(--line);box-shadow:var(--shadow-2);}
.dropdown-item{border-radius:8px;}
.dropdown-item:hover,.dropdown-item:focus{background:var(--primary-050);color:var(--primary);}
.dropdown-item.text-red:hover,.dropdown-item.text-red:focus{background:rgba(229,72,77,.10);color:var(--danger);}
/* Вкладки Tabler (.nav-tabs) — активная с индиго-подчёркиванием */
.nav-tabs{border-bottom-color:var(--line);}
.nav-tabs .nav-link.active{color:var(--primary);border-color:transparent;border-bottom:2px solid var(--primary);background:transparent;}
.nav-tabs .nav-link:hover{border-color:transparent;color:var(--primary);}
/* Бейджи-теги (стикеры задач) */
.badge[class*="bg-tag-"]{font-weight:600;}
/* ============================================================
ФАЗА 5 — Чат / мессенджер (chat.ejs + виджет чата в навбаре)
Перекраска существующих пузырей/композера/аудио под прототип chat/.
Структуру разметки и socket.io НЕ трогаем.
============================================================ */
/* Убираем «alert»-подложку строки сообщения — пузырь стоит сам по себе */
.chat-bubbles .row.alert-success,
.chat-bubbles .row.alert-secondary{background:transparent;border:none;padding-left:0;padding-right:0;margin-bottom:2px;}
/* Пузыри */
.chat-bubble{border-radius:16px;padding:8px 13px 6px;box-shadow:var(--shadow-1);}
.chat-bubble-all{
background:var(--surface);
border:1px solid var(--line-soft);
border-bottom-left-radius:5px;
color:var(--ink-1);
}
/* Тёмная тема: чужие сообщения заметно светлее фона чата */
[data-bs-theme="dark"] .chat-bubble-all,
.theme-dark .chat-bubble-all{
background:var(--surface-3);
border-color:var(--line);
}
/* Свои сообщения — светло-голубые, с тёмным текстом */
.chat-bubble-me{
background:#E8F0FE;
border:1px solid #D4E2FB;
border-bottom-right-radius:5px;
color:var(--ink-1);
box-shadow:var(--shadow-1);
}
[data-bs-theme="dark"] .chat-bubble-me,
.theme-dark .chat-bubble-me{
background:rgba(76,111,255,.20);
border-color:rgba(76,111,255,.34);
}
.chat-bubble-author{font-weight:600;font-size:13px;color:var(--ink-2);}
.chat-bubble-me .chat-bubble-author{color:var(--ink-1);}
.chat-bubble-me .chat-bubble-body{color:var(--ink-1);}
.chat-bubble-date{color:var(--ink-3);}
.chat-bubble-body strong{font-weight:500;}
/* Аудио-сообщение — Telegram-стиль волна с плавным прогрессом */
.audio-msg{display:flex;align-items:center;gap:10px;max-width:340px;}
.audio-play{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;font-size:13px;line-height:1;}
/* двухслойная волна: серая база + акцентная копия, открываемая clip-path по прогрессу */
.vwave{position:relative;flex:1 1 auto;min-width:110px;height:30px;display:flex;align-items:center;touch-action:none;cursor:pointer;user-select:none;--played:0;}
.vwave-bars{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;}
.vwave-bars i{flex:0 0 3px;width:3px;border-radius:2px;display:block;height:30%;}
.vwave-base i{background:var(--ink-3);opacity:.5;}
.vwave-fill{clip-path:inset(0 calc((1 - var(--played)) * 100%) 0 0);transition:clip-path .05s linear;}
.vwave-fill i{background:var(--primary);opacity:1;}
.vwave-thumb{position:absolute;top:50%;left:calc(var(--played) * 100%);width:11px;height:11px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 2px var(--surface);transform:translate(-50%,-50%);transition:left .05s linear;pointer-events:none;opacity:.9;}
.vwave:hover .vwave-thumb,.vwave:active .vwave-thumb{opacity:1;}
.audio-time{font-size:12px;color:var(--ink-2);min-width:74px;flex:none;white-space:nowrap;}
[data-bs-theme="dark"] .vwave-base i,.theme-dark .vwave-base i{opacity:.6;}
@supports not (clip-path: inset(0 50% 0 0)){.vwave-fill{display:none;}}
/* legacy: старые статичные превью ответов (.audio-msg-javob, .audio-wave) */
.audio-wave{display:flex;align-items:center;gap:2.5px;height:24px;}
.audio-wave span{width:3px;height:10px;border-radius:3px;background:var(--ink-3);opacity:.5;display:block;}
.audio-wave span.active{background:var(--primary);opacity:1;}
/* Инлайн-редактирование (переименование отделов / задач / колонок и т.п.):
прозрачный НЕ наследует цвет текста → в тёмной теме был почти невидим.
ВАЖНО: Vue пере-сериализует static style через CSSOM → в DOM это "background: transparent"
(с пробелом), поэтому матчим по слову transparent без привязки к пробелу.
Цвет тема-зависимый (--ink-1: тёмный в светлой теме, светлый в тёмной). */
input[style*="transparent"]:not(.text-white-custom){ color:var(--ink-1) !important; caret-color:var(--ink-1); }
/* Композер (chat.ejs) */
.textarea-wrapper .auto-textarea{border-radius:14px;border:1px solid var(--line);}
.textarea-wrapper .auto-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-050);}
.send-inside-btn{color:var(--primary);}
.rec-inside-btn.recording{color:var(--danger);}
/* Табы в чат-виджете навбара (Участники / Настройки прав).
Ровные пилюли с одинаковыми отступами и центрированием; user-select:none —
иначе по клику в -вкладку ставилась текстовая каретка и подсвечивалось
выделение (белая засветка на тёмном фоне). */
#offcanvasEnd .tabs{align-items:center;}
#offcanvasEnd .tabs .tab{
display:inline-flex;align-items:center;justify-content:center;
padding:5px 14px;border-radius:20px;line-height:1.2;
user-select:none;-webkit-user-select:none;
}
#offcanvasEnd .tabs .tab.active{background:var(--ink-1);color:#fff;}
/* В тёмной теме --ink-1 светлый → светлая пилюля + белый текст не читались:
активную вкладку красим в акцент-индиго. */
.theme-dark #offcanvasEnd .tabs .tab.active{background:var(--primary);color:#fff;}
/* ============================================================
ФАЗА 6 — Остальные экраны (компания, отчёты, профиль, лицензия,
склад, поддержка/новости, лента). Большинство построено на общих
компонентах (Фаза 4). Здесь — точечная полировка специфики.
============================================================ */
/* Заголовки страниц */
.page-header .page-title{font-weight:700;letter-spacing:-.3px;}
.page-pretitle{color:var(--ink-3);}
/* FAQ-аккордеон (Поддержка/Новости) */
.accordion{--tblr-accordion-border-color:var(--line);}
.accordion-button{border-radius:var(--r-sm)!important;font-weight:600;}
.accordion-button:not(.collapsed){background:var(--primary-050);color:var(--primary);box-shadow:none;}
.accordion-button:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-050);}
/* Прогресс-бары (отчёты/KPI, чек-лист задачи) */
.progress{background:var(--surface-3);border-radius:20px;}
.progress-bar{background:var(--primary);}
/* Пустые состояния */
.empty-title{font-weight:700;}
.empty-subtitle{color:var(--ink-3);}
/* Фильтр-пилюли / вторичные кнопки */
.btn-outline-secondary{--tblr-btn-border-radius:var(--r-sm);}
/* Аватары — единое кольцо при наложении (avatar-stack) */
.avatar{font-weight:600;}
/* Уведомления (.bg-eslatma): в тёмной теме подложка сливалась с фоном модалки */
.theme-dark .bg-eslatma,
[data-bs-theme="dark"] .bg-eslatma{
background:var(--surface-3)!important;
border-color:var(--line)!important;
}
.theme-dark .bg-eslatma:hover,
[data-bs-theme="dark"] .bg-eslatma:hover{
background:var(--surface-3)!important;
border-color:var(--primary)!important;
}
/* и hover в светлой — в цвет бренда */
.theme-light .bg-eslatma:hover{border-color:var(--primary)!important;}
/* ============================================================
ФАЗА 7 — Экран входа (sign-in.ejs)
Крупный логотип по центру + аккуратная карточка входа.
============================================================ */
.hv-login-logo{width:240px;max-width:80%;height:auto;}
.page-center .card-md{border-radius:var(--r-lg);box-shadow:var(--shadow-2);border:none;}
.page-center .card-md .card-body{padding:1.75rem;}
#langSwitch .btn-group .btn{border-radius:8px;}
#langSwitch .btn-outline-secondary{--tblr-btn-color:var(--ink-2);}
/* ============================================================
ФАЗА 8 — Мобильная адаптация
Мобильные вьюхи (00_app_mobile, navbarapk, 00_menu_down) включают link.ejs,
поэтому уже получают токены / Golos / тему. Здесь — точечные штрихи.
Нижняя навигация: активный пункт .text-blue уже индиго (см. Фаза 1).
============================================================ */
@media (max-width:768px){
.card{border-radius:var(--r-md);}
.hv-login-logo{width:200px;}
.modal-content{border-radius:var(--r-md);}
}
/* Нижняя мобильная панель — поверхность + аккуратная верхняя граница */
.border-top.w-100[style*="fixed"]{
background:var(--surface);
border-top:1px solid var(--line)!important;
box-shadow:0 -2px 12px rgba(16,24,40,.06);
}
/* ============================================================
Модалка «Настройка роль в отделе» (#modal-rol) — дерево «Объект системы».
При длинных названиях отдела/доски/колонки и многих участниках аватары
уезжали в горизонтальный скролл и обрезались (.menu-link2{overflow:hidden}),
из-за чего часть пользователей нельзя было выбрать (клик по аватару =
tanlaUser → детальная настройка прав). Переносим аватары на новые строки
в пределах панели — все участники видны и кликабельны.
============================================================ */
#modal-rol .card-body-scrollable{flex-direction:column!important;}
#modal-rol .card-body-scrollable>.divide-y{width:100%;}
.menu-link2{flex-wrap:wrap;overflow:visible;align-items:flex-start;row-gap:4px;}
.menu-link2>span[style*="margin-left"]{
display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
flex:1 1 100%;min-width:0;margin-left:0!important;row-gap:4px;
}
/* ============================================================
Дропдаун «Стикер Исполнитель» на карточке (выбор участников задачи).
Длинный список пользователей уезжал за низ экрана и обрезался
(у .dropdown-menu-column не было max-height/скролла). Делаем список
прокручиваемым. Бьём только по пикерам с таблицей (:has(> table.card-table)),
чтобы НЕ задеть дропдаун стикеров с боковыми подменю (dropend) — там
нельзя обрезать горизонтальный вылет.
============================================================ */
.dropdown-menu-column:has(> table.card-table){max-height:min(75vh,400px);overflow-y:auto;}