/* * Buenos CRM — app shell (2026-06-24 nav redesign). * * Replaces the horizontal navbar + mega-menu dropdowns with a thin navy HEADER * (brand · club switcher · client search · BandejaGPT · profile) + a vertical * left SIDEBAR rendered from /api/menu (menu.js:renderSidebar), collapsible to an * icon rail. Refined-minimalist on purpose: airy padding, hairline borders, the * brand palette only (var(--bp-*), brand-tokens.css). Bootstrap 5 + Alpine, no * SPA. The legacy .navbar/.mega-menu rules in styles.css/crm-theme.css are now * inert (no .navbar element) — left in place, safe to delete in a later cleanup. */ :root { --app-header-h: 52px; --app-sidebar-w: 204px; --app-sidebar-rail-w: 60px; } /* ───────────────────────── Header ───────────────────────── */ .app-header { position: sticky; top: 0; z-index: 1030; /* below chat dock (1050) / improve FAB (1050) */ display: flex; align-items: center; gap: 10px; height: var(--app-header-h); padding: 0 12px; background: var(--bp-blue); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); font-family: var(--ff-body); } .app-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: var(--ff-display); font-size: 1rem; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; } .app-brand:hover { color: #fff; opacity: 0.92; } .app-brand .bi { font-size: 1.1rem; } /* Календарь сайдбара приходит готовым из Jinja (`base.html` + web/utils/sidebar_calendar.py), и резерв ему больше не нужен — сетка есть уже в первом кадре. Правило оставлено СТРАХОВКОЙ на один случай: браузер держит закешированный старый `base.html` без разметки календаря, и его собирает `menu.js`. Тогда без резерва повторяется прежнее: календарь занимает 16px вместо 200 и на КАЖДОМ переходе между разделами роняет меню под собой на 184px (CRM многостраничная, страница строится заново каждый раз). 200px — высота месячной сетки, замерено на живой странице. */ #sidebar-calendar { min-height: 200px; } /* Слоты левой части шапки: держат место, пока переключатель клуба и поиск едут со своими запросами. Иначе всё правее них — поиск, BandejaGPT, «Посмотреть как…» — уезжает вбок, когда виджеты приходят. ⚠️ Включаются КЛАССОМ на , который ставит скрипт в по данным прошлого визита (`base.html`). Безусловный резерв тут вреден: у роли без клубов или без права `clients` виджета не будет никогда, и слот навсегда останется дырой — так и вышло в первой версии. У клуба `min-width`, а не фиксация: длинное имя должно раздвинуть слот, а не наехать на поиск. Только широкий экран — на узком у шапки своя раскладка. */ @media (min-width: 992px) { .app-header .header-slot { display: flex; align-items: center; } .has-club-switcher .app-header .header-slot--club { flex: 0 0 auto; min-width: 235px; } .has-client-search .app-header .header-slot--search { flex: 0 0 232px; width: 232px; } } /* На узких десктопах поиску отводится меньше: с полным слотом шапка не помещалась и выезжала за край экрана — весь документ получал горизонтальную прокрутку, страница ездила вбок на каждой ширине от 1024 до 1350px. Уступает именно поиск: он единственный тут тянущийся, у остальных ширина по содержимому. Резерв остаётся ФИКСИРОВАННЫМ внутри своей ширины экрана — то есть он по-прежнему занят с первого кадра и сдвига не добавляет. */ @media (min-width: 992px) and (max-width: 1199.98px) { .has-client-search .app-header .header-slot--search { flex: 0 0 180px; width: 180px; } .app-header .app-search .input-group { min-width: 0; } } /* BandejaGPT раскрывает `menu.js` после `/api/menu`, а ссылку «Посмотреть как…» — Alpine после `/api/auth/me`. Приходя вразнобой, они толкали друг друга вбок на 130px, и это видно на каждом обновлении страницы. Право `ai_query` известно из прошлого визита (класс на ставит скрипт в ), поэтому кнопку рисуем сразу — и место занято с первого кадра. Если право отобрали, её уберёт тот же `menu.js`: единственный случай, когда она мигнёт, и он разовый. Ссылке имперсонации своего правила НЕ даём намеренно: она последняя в строке, и раз BandejaGPT держит место, её появление уже ничего не двигает (замерено). А раннее раскрытие ей вредно — Alpine прячет её обратно, пока не подтянется его store, и вышло бы мигание на ровном месте. ⚠️ `!important` вынужденный: перебиваем `.d-none` Bootstrap с тем же `!important`. */ .has-bandeja #bandeja-btn.d-none { display: inline-flex !important; } /* Ширина переключателя клуба: чтобы чип утилизации и имя клуба, приезжающие РАЗНЫМИ запросами, не дёргали строку внутри самого тоггла. `min-width`, а не фиксация: длинное имя («Тверь - Центральный рынок») должно раздвинуть тоггл, а не наехать на поиск. ⚠️ Только для широкого экрана. Без медиа-запроса эти 235px душат шапку на всех узких ширинах: переполнение начиналось уже с ~1350px, на 992px доходило до 116px, а на 390px иконка поиска уезжала под ссылку профиля и переставала нажиматься вовсе. */ @media (min-width: 992px) { .app-header .header-left .dropdown-toggle { min-width: 235px; justify-content: flex-start; } } /* Слот под чип утилизации: держит ширину независимо от того, что внутри — значок-заглушка или сам процент. Они приходят в РАЗНОЕ время: клубы одним запросом, проценты вторым, поэтому без общего слота значок сменялся чипом и двигал название клуба вместе с поиском. `min-width` на самом чипе тут не работает: пока `x-show` держит его в `display: none`, он не занимает ничего. */ .app-header .header-left .club-chip-slot { display: inline-flex; align-items: center; justify-content: center; width: 48px; margin-right: 4px; flex: 0 0 48px; } .app-header .header-left .club-chip-slot .badge { min-width: 48px; text-align: center; } /* Слот под полосу выручки: 32px заняты с первого кадра, ещё до ответа API. Полоса живёт в base.html, то есть на КАЖДОЙ странице CRM, и её появление толкало вниз сайдбар и всё содержимое — системный сдвиг вёрстки. Фон и рамка здесь, а не на самой полосе: если данные не пришли (нет прав, ошибка), остаётся тонкий разделитель, а не пустая дыра. */ .revenue-bar-slot { display: none; } /* Полоса — только у клубов, где план на месяц заведён. Без плана показывать нечего, а лента с одним «/ (план )» занимала строку зря. Признак известен заранее из прошлого визита (`base.html`, reserveHeaderSlots), поэтому место отводится ещё до отрисовки и полоса ничего не двигает; свежий ответ поправит флаг сам (`revenue-progress.js`). */ .has-revenue-plan .revenue-bar-slot { display: block; height: 32px; background: var(--bp-paper-2); border-bottom: 1px solid var(--bp-line); } .revenue-bar { display: flex; } /* Цифры выручки: полоса показывается, когда `data` уже есть, а сумм в нём ещё нет — блок разрастался с 81 до 322px и прыгал левым краем на 241px, отъедая ширину у прогресс-дорожки рядом. Ширина замерена на живой странице. `min-width`, а не фиксация: длинные суммы должны раздвинуть блок, а не вылезти за него. Только широкий экран — на узком часть цифр скрыта (`d-none d-sm-inline`, `d-none d-md-inline`), и запас был бы лишним. */ @media (min-width: 992px) { .revenue-bar .revenue-stats { min-width: 322px; justify-content: flex-end; } } .app-header .header-spacer { flex: 1 1 auto; } .app-header .header-left, .app-header .header-right { display: flex; align-items: center; gap: 8px; min-width: 0; } .app-header .header-left { flex: 0 1 auto; } /* club · search · BandejaGPT, by the logo */ /* Drawer / search toggles (mobile only) */ .app-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 1.15rem; cursor: pointer; } .app-icon-btn:hover { background: rgba(255, 255, 255, 0.12); } /* Club switcher + search inherit a navy-friendly look (the old theme-blue * navbar rules used to do this; they no longer match .app-header). */ .app-header .nav-link, .app-header .dropdown-toggle { color: #fff; } .app-header .nav-link:hover { color: rgba(255, 255, 255, 0.85); } .app-header .form-control, .app-header .input-group-text { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; } .app-header .form-control::placeholder { color: rgba(255, 255, 255, 0.6); } .app-header .badge.bg-primary { background: rgba(255, 255, 255, 0.92) !important; color: var(--bp-blue) !important; } /* BandejaGPT button — quiet accent pill, the one «sparkle» in the header. */ .app-bandeja { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: transparent; color: #fff; font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .app-bandeja:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .app-bandeja .bi { color: var(--bp-green-on-dark); } /* Profile dropdown */ .app-profile { display: flex; align-items: center; gap: 1px; } /* Avatar/name → «Моя карточка» directly; the caret opens the dropdown. */ .app-profile-link { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 3px; border-radius: 999px; color: #fff; text-decoration: none; } .app-profile-link:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .app-profile-caret { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.85); font-size: 0.72rem; cursor: pointer; } .app-profile-caret:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .app-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); overflow: hidden; font-size: 0.85rem; } .app-profile-name { font-size: 0.85rem; white-space: nowrap; } /* Wide-ish client search */ .app-search { display: flex; } .app-search .input-group { min-width: 230px; } /* ───────────────────────── Shell + sidebar ───────────────────────── */ .app-shell { display: flex; align-items: stretch; } /* Сайдбар — БЕЛЫЙ лист на сером фоне страницы (2026-07-29). До этого он был var(--bp-paper), то есть того же цвета, что и контент: два поля разделяла только волосяная линия. Инверсия «белое меню / серая страница» повторяет раскладку YClients и сразу отделяет навигацию от данных. */ .app-sidebar { flex: 0 0 var(--app-sidebar-w); width: var(--app-sidebar-w); /* No inner scrollbar (product decision): the menu flows with the page — the whole page scrolls, never a scroll region inside the sidebar. */ min-height: calc(100vh - var(--app-header-h)); /* Нижний отступ с запасом под fixed-кнопку «Новая задача для IT…» (левый нижний угол): без него она стабильно накрывала последний пункт. 64px = высота пилюли (38) + её отступ от низа (16) + воздух. */ padding: 10px 8px 64px; background: var(--bp-sheet); border-right: 1px solid var(--bp-line); font-family: var(--ff-body); } .app-main { flex: 1 1 auto; min-width: 0; } /* ── Обратные отсчёты (partials/_countdowns.html) ── Никакой анимации и мигания — блок висит на КАЖДОМ экране CRM, любое движение здесь отвлекает от работы. ⚠️ Оформление и место ВЫБИРАЮТСЯ, а не заданы кодом (миграция 642): «отключение через неделю» и «переезд кассы через полгода» требуют разной громкости. Базовая геометрия — здесь, пять скинов — ниже, `.countdown--*`. Сплошной чёрный лист по умолчанию убран: в белом сайдбаре он читался траурно и занимал много места (правка Дениса 06.09.2026). Резерв высоты (`.has-countdowns`) нужен только верхнему слоту — под меню блоку толкать нечего. */ .countdown { display: flex; flex-direction: column; gap: 1px; margin: 2px 4px 6px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--bp-radius-sm); font-family: var(--ff-body); text-decoration: none; } /* Известно из прошлого визита, сколько отсчётов включено, — место под них занято ещё до ответа API: блоки стоят НАД календарём и меню, и их появление сдвигало бы вниз весь сайдбар. 96px на блок — ЗАМЕР собранного блока на живой странице (подпись переносится на две строки, ниже цифра и дата), а не прикидка: неверный резерв — тот же сдвиг, только на разницу. Число блоков кладёт в `--countdown-count` скрипт в (base.html). */ .countdown-list:empty { display: block; } /* Резерв — только ВЕРХНЕМУ слоту: он один стоит над календарём и меню. `--countdown-count` считает именно верхние блоки (countdowns.js), поэтому при умолчании «под меню» резерв равен нулю и вёрстка не дёргается вовсе. 78px на блок — замер собранного блока скина `brand`. */ .has-countdowns .countdown-list[data-countdowns="above"]:empty { min-height: calc(var(--countdown-count, 1) * 78px); } .countdown__label { display: flex; align-items: center; gap: 5px; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .countdown__clock { font-family: var(--ff-mono); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; } .countdown__deadline { font-size: 0.68rem; } /* Свёрнутая рельса показывает только это — в развёрнутом меню оно лишнее. */ .countdown__short { display: none; } /* ── Пять заготовок оформления. Выбор хранится у отсчёта и приезжает классом из countdowns.js; всё — на фирменных токенах. ── */ /* brand — умолчание: фирменная зелёная плашка, спокойная и компактная. */ .countdown--brand { background: var(--bp-green-tint); border-color: var(--bp-green); } .countdown--brand .countdown__label { color: var(--bp-green-dark); } .countdown--brand .countdown__clock { color: var(--bp-ink); } .countdown--brand .countdown__deadline { color: var(--bp-ink-soft); } /* soft — почти без фона, зелёная черта слева: для сроков «когда-нибудь». */ .countdown--soft { background: transparent; border-color: transparent; border-left: 3px solid var(--bp-green); border-radius: 0; padding-left: 8px; } .countdown--soft .countdown__label { color: var(--bp-ink-soft); } .countdown--soft .countdown__clock { color: var(--bp-ink); } .countdown--soft .countdown__deadline { color: var(--bp-muted); } /* line — одна строка без плашки: самый тихий вариант, занимает минимум. */ .countdown--line { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px; padding: 4px 9px; background: transparent; } .countdown--line .countdown__label { color: var(--bp-muted); text-transform: none; letter-spacing: 0; font-size: 0.72rem; } .countdown--line .countdown__clock { color: var(--bp-ink); font-size: 0.78rem; } .countdown--line .countdown__deadline { display: none; } /* amber — янтарная: срок близко и это важно, но ещё не авария. */ .countdown--amber { background: var(--bp-warning-tint); border-color: var(--bp-warning-fill); } .countdown--amber .countdown__label { color: var(--bp-warning-deep); } .countdown--amber .countdown__clock { color: var(--bp-ink); } .countdown--amber .countdown__deadline { color: var(--bp-ink-soft); } /* dark — прежний вид: тёмный лист с янтарной строкой. Оставлен вариантом для тех объявлений, которым и нужна максимальная громкость. */ .countdown--dark { background: var(--bp-ink); border-color: var(--bp-ink); } .countdown--dark .countdown__label { color: var(--bp-warning-fill); } .countdown--dark .countdown__clock { color: var(--bp-sheet); } .countdown--dark .countdown__deadline { color: var(--bp-muted); } .countdown[href]:hover { border-color: var(--bp-green-dark); } /* Последние сутки: до них блок обязан быть фоном, а не тревогой. Красным красим ЦИФРУ, а не всю плашку — иначе спокойные скины теряют смысл. */ .countdown.is-final { border-color: var(--bp-stamp-red); } .countdown.is-final .countdown__clock { color: var(--bp-stamp-red); } .countdown--dark.is-final .countdown__clock { color: var(--bp-warning-bg); } /* ── Month calendar (above search) — ‹ › switch months, each day links to the calendar for that date (/timetable?date=…). ── */ /* Сайдбар белый, поэтому календарь и поиск «вдавлены» серой заливкой, а не выложены белыми карточками — иначе на белом они не читались бы как блоки. */ .sidebar-calendar { margin: 2px 4px 8px; padding: 8px 8px 6px; background: var(--bp-paper); border: 1px solid var(--bp-line); border-radius: 10px; font-family: var(--ff-body); } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .cal-title { font-size: 0.76rem; font-weight: 600; color: var(--bp-ink); } .cal-nav { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--bp-muted); font-size: 0.78rem; cursor: pointer; } .cal-nav:hover { background: rgba(4, 65, 132, 0.08); color: var(--bp-blue); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .cal-wd { text-align: center; font-size: 0.58rem; font-weight: 600; color: var(--bp-muted); padding: 2px 0; } .cal-empty { aspect-ratio: 1; } .cal-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 6px; font-size: 0.72rem; color: var(--bp-ink-soft); text-decoration: none; } .cal-day:hover { background: rgba(4, 65, 132, 0.08); color: var(--bp-blue); } .cal-day.is-today { font-weight: 700; color: var(--bp-blue); box-shadow: inset 0 0 0 1px var(--bp-blue); } .cal-day.is-selected { background: var(--bp-blue); color: #fff; font-weight: 700; box-shadow: none; } /* ── Menu search (top of sidebar) — filters items by label + description ── */ .sidebar-search { display: flex; align-items: center; gap: 6px; margin: 2px 4px 8px; padding: 6px 10px; background: var(--bp-paper); border: 1px solid var(--bp-line); border-radius: 9px; } .sidebar-search .bi { color: var(--bp-muted); font-size: 0.9rem; } .sidebar-search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--ff-body); font-size: 0.82rem; color: var(--bp-ink); } .sidebar-search-input::placeholder { color: var(--bp-muted); } .sidebar-search-results { padding: 0 0 8px; } .sidebar-search-results .sidebar-search-desc { display: block; font-size: 0.72rem; color: var(--bp-muted); margin-top: 1px; } .sidebar-search-results .sidebar-search-sec { display: block; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bp-blue); opacity: 0.75; margin-top: 2px; } .sidebar-search-results mark { background: var(--bp-warning-bg); color: inherit; padding: 0 1px; border-radius: 2px; } .sidebar-search-empty { padding: 12px 10px; color: var(--bp-muted); font-size: 0.8rem; } /* ── Accordion sections: the active section is expanded, the rest collapse to a header. Click a header to open it (single-open — setupSidebarAccordion). Three tiers: SECTION header (uppercase, accent icon, chevron) > item (readable) > group caption (tiny, muted, own icon). ── */ .sidebar-section { position: relative; margin-bottom: 1px; } /* Section header — shared look for the link and the