:root{ /* --- Design-token reskin (see project brief) --- Old names kept (avoids touching every selector in this file / ui.rs class references) but VALUES now come from the approved palette: --bg/--surface/--surface-2/--border -> --bg/--surface/--surface-2/--border --text/--muted/--faint -> --text/--text-dim/--text-faint --primary/--primary-d/--primary-l -> --accent/--accent-strong/--accent-soft --amber/--amber-l -> --warn/--warn-soft --red/--red-l -> --danger/--danger-soft --cyan/--cyan-l -> --info/--info-soft --slate/--slate-l -> --text-dim/--chip-bg --green/--purple/--ink have no equivalent in the new token set (the approved palette only defines accent/warn/danger/info) — approximated in the same hue family/contrast so status chips still read distinctly. */ --bg:#F4F5F7; --surface:#FFFFFF; --surface-2:#ECEEF2; --border:#DBDFE6; --border-2:#C7CCD6; /* --faint затемнён (#8990A0 -> #64697A): использовался на обычном тексте 11-11.5px (заголовки таблиц, подписи форм/KPI) при контрасте ~2.9-3.2:1 к --surface/--bg — ниже WCAG AA (4.5:1). Тёмная тема уже проходила (~6.15:1), её не трогаем. */ --text:#161B26; --muted:#5B6472; --faint:#64697A; --primary:#28406E; --primary-d:#1B2C4D; --primary-l:#E4E9F3; --green:#2F7A4D; --green-l:#E3F1E7; --amber:#95620B; --amber-l:#F7EEDD; --red:#9C3B33; --red-l:#F6E7E4; --purple:#5B4A9C; --purple-l:#EBE7F5; --cyan:#2E5F8A; --cyan-l:#E4EDF4; --slate:#5B6472; --slate-l:#EDEFF3; --ink:#161B26; /* Рамка при наведении (кнопки, поле выбора файла) и рамка «мягко опасного» действия. Токены, а не литералы: раньше здесь стояли светлые #b6c2d4 и #f1c6c6 — на тёмной теме они давали рамку СВЕТЛЕЕ основного акцента, то есть наведение выглядело ярче нажатия. */ --border-h:#B6C2D4; --red-b:#E0AEA8; /* Затемнение вокруг подсвеченного блока в интерактивном обучении (.tour-hole, см. tour.js). Токен, а не литерал: в тёмной теме тот же светлый scrim давал бы серую вуаль вместо затемнения. */ --tour-scrim:rgba(15,23,42,.55); --radius:10px; --radius-sm:7px; --radius-xs:5px; --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px -8px rgba(16,24,40,.10); --shadow-md:0 4px 12px rgba(16,24,40,.10); --shadow-lg:0 8px 22px -12px rgba(16,24,40,.24); } /* Тёмная тема — ТОЛЬКО по явному выбору пользователя (см. .theme-toggle в app.js — ставит data-theme на , хранит выбор в localStorage). Раньше тут же был @media(prefers-color-scheme:dark), автоматически включавший тёмную по системной теме ОС/браузера — убран по прямой просьбе пользователя: базовая тема продукта — светлая, а не «следует за системой», тёмная — только когда её выбрали явно тумблером. */ :root[data-theme="dark"]{ --bg:#12161D; --surface:#1E2531; --surface-2:#293244; --border:#4D5A78; --border-2:#5C6A8A; --text:#FBFCFE; --muted:#CAD1E0; --faint:#9BA4B8; --primary:#AEC2F1; --primary-d:#DAE3FA; --primary-l:#35446C; --green:#8FD9A8; --green-l:#1E3A28; --amber:#EEC17E; --amber-l:#4A3714; --red:#EB9F98; --red-l:#4A2523; --purple:#C7BEEF; --purple-l:#332B54; --cyan:#9BC5F1; --cyan-l:#263B54; --slate:#CAD1E0; --slate-l:#303A4D; --border-h:#7B8AAD; --red-b:#7A3F39; --tour-scrim:rgba(2,6,16,.72); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:'Manrope',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased} a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{margin:0} .mono{font-family:"IBM Plex Mono","SF Mono",Consolas,"Roboto Mono",monospace;font-variant-numeric:tabular-nums} .muted{color:var(--muted)} .small{font-size:12.5px} .tabnum{font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace} /* ---------- Числа: неразрывность (правило проекта) ---------- Значащее число (сумма, счётчик, срок, SLA, процент, дата) никогда не переносится на следующую строку и не отрывается от своей единицы измерения. Три эшелона: 1) money() в ui.rs склеивает разряды и «₽» через U+00A0 — работает даже там, где класс не проставлен (тосты, баннеры, print.rs); 2) правила ниже — nowrap на самих носителях чисел; 3) .kpi .val + min-width плиток — чтобы nowrap не приводил к обрезке. .nw — точечная утилита для пар «число + слово» («SLA 24ч», «3 из 5»). */ .nw{white-space:nowrap} .num,.mono,.tabnum, .due, .tab .cnt,.nav-badge,.plan-note, .log-ts,.feed .when{white-space:nowrap;font-variant-numeric:tabular-nums} /* Обратный клапан: длинный неразрывный токен (URL приглашения в .mono-ячейке, ключ объекта в аудите) должен уметь перенестись — иначе он растягивает таблицу до бесконечности. */ .mono.brk,.num.brk{white-space:normal;overflow-wrap:anywhere} /* Иконка спрайта (замена эмодзи) — размер и цвет наследуются от текста вокруг. */ .ico{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;flex-shrink:0} /* Точка вкл/выкл (замена 🟢/🔴) — простой цветной индикатор, не значок. */ .dot-on,.dot-off{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:2px} .dot-on{background:var(--green)} .dot-off{background:var(--red)} /* Цвет беджа этапа (задача 95, /admin/workflow) — свободно выбираемый произвольный цвет (`` в редакторе этапа, тот же контрол, что и у цвета страховой), не токен темы: в узких местах (ячейка номера в таблице этапов, акцент полосы этапа карточки направления) рендерится маленьким кружком-свотчем тем же приёмом, что .dot-on/.dot-off, а не заливкой всего блока — контраст текста тогда считать не нужно вовсе. Сам цвет — через inline style на элементе. */ .color-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;flex:none} /* ---------- Текст поверх насыщенных заливок ---------- Единое правило проекта (заведено полосой этапов, см. .sb-cur ниже): на заливке --primary/--primary-d/--green/--red текст пишется цветом var(--bg), а НЕ #fff. Токены заливок в тёмной теме инвертируются (--primary #28406E → #AEC2F1, --red #9C3B33 → #EB9F98, --primary-d #1B2C4D → #DAE3FA), а захардкоженный белый — нет: кнопка «Войти», аватар и бейдж колокольчика давали контраст 1.15–1.9:1 и были нечитаемы. --bg инвертируется вместе с темой, поэтому контраст верный в обеих. */ /* Skip-link: невидим, пока не получит фокус (Tab с самого начала страницы) — даёт обойти боковую навигацию и сразу попасть в контент. */ .skip-link{position:absolute;top:-40px;left:8px;z-index:100;background:var(--primary);color:var(--bg);padding:8px 14px;border-radius:6px;font-size:13px;font-weight:600} .skip-link:focus{top:8px} main:focus{outline:none} /* ---------- Topbar (единая шапка страницы — заголовок+действия в один ряд; логотип бренда переехал в .sidebar .brand, см. ниже) ---------- */ .topbar{position:sticky;top:0;z-index:51;display:flex;align-items:center;gap:16px;min-height:64px;padding:12px 22px;background:var(--bg);border-bottom:1px solid var(--border)} .page-title{font-size:19px;font-weight:800;letter-spacing:-.01em} /* .page-head раньше был flex:0 1 auto (наследие обычной страницы, где он лежит в потоке .wrap и растягивается как блочный элемент) — внутри .topbar это же flex:0 1 auto делает его flex-item'ом БЕЗ роста: он съёживается по контенту (title+кнопки) и виснет сразу после бургера, а весь остаток ширины шапки съедает .spacer, который следует ПОСЛЕ него. В итоге justify-content:space-between внутри .page-head бесполезен — ему некуда распределять пространство, оно всё уже отдано соседу — и кнопка #dash-settings-btn (и любая другая кнопка справа page-head) виснет вплотную к заголовку, а не у правого края страницы, как должно быть независимо от длины title. Даём .page-head расти (flex:1 1 auto) — он занимает всё место ДО .tenant, и внутренний space-between наконец прижимает правый блок кнопок к правому краю (или к .tenant, если он есть на странице). .spacer тогда не нужен именно на страницах с page-head — гасим его рост только когда он идёт СРАЗУ за .page-head (сосед по разметке — см. nav_shell: {page_head}
), чтобы не трогать страницы без page-head (там заголовок — просто .page-title, и .spacer по-прежнему должен расти, чтобы прижать .tenant вправо). */ .topbar .page-head{margin-bottom:0;flex:1 1 auto;min-width:0} .topbar .page-head h1{font-size:19px} .topbar .spacer{flex:1} .topbar .page-head + .spacer{flex:0 0 auto} .topbar .tenant{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700} .topbar .tenant .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan)} /* ---------- Меню пользователя — теперь в подвале сайдбара, а не в шапке (
) — колокольчик топбара убран целиком (дублировал бейдж «Ленты событий» в меню, см. ui.rs::nav_shell), а бейдж аккаунта переехал в самый низ боковой панели. Раскрытие — нативное (details), поэтому работает и без JS; app.js только добавляет Esc/клик-вне/стрелки. Маркер треугольника гасим двумя способами: ::marker для стандартных браузеров и ::-webkit-details-marker для Safari. */ .user-menu{position:relative} .user-menu>summary{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px; border:1px solid transparent;border-radius:var(--radius-xs);cursor:pointer;list-style:none; color:var(--text);font-size:13px;font-weight:600} .user-menu>summary::-webkit-details-marker{display:none} .user-menu>summary::marker{content:''} .user-menu>summary:hover,.user-menu[open]>summary{background:var(--surface-2);border-color:var(--border)} .user-menu>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .user-menu .user-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-menu .chev{display:inline-flex;margin-left:auto;color:var(--faint);transition:transform .15s} .user-menu .chev .ico{width:14px;height:14px} .user-menu[open] .chev{transform:rotate(180deg)} /* Панель прижата к низу вьюпорта — список открывается ВВЕРХ (bottom:100%), иначе он бы норовил уйти за нижний край экрана. Левый край, не правый: якорь (summary) занимает всю ширину узкой панели, а не висит справа. */ .user-menu-list{position:absolute;left:0;right:auto;bottom:calc(100% + 8px);top:auto;z-index:5;min-width:240px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)} .user-menu-head{padding:6px 10px 10px;margin-bottom:6px;border-bottom:1px solid var(--border)} .user-menu-name{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-menu-sub{font-size:11.5px;color:var(--faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-menu-head .role-chip{margin-top:8px} .user-menu-item,.settings-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-xs);color:var(--text);font-size:13.5px;font-weight:550} .user-menu-item:hover,.user-menu-item:focus-visible,.settings-link:hover,.settings-link:focus-visible{background:var(--slate-l);color:var(--text);text-decoration:none} .user-menu-item .ico,.settings-link .ico{width:16px;height:16px;color:var(--muted);flex:none} .user-menu-item.danger,.settings-link.danger,.user-menu-item.danger .ico,.settings-link.danger .ico{color:var(--red)} .user-menu-item.danger:hover,.settings-link.danger:hover{background:var(--red-l);color:var(--red)} .user-menu-sep{height:1px;background:var(--border);margin:6px 4px} .avatar{position:relative;width:32px;height:32px;border-radius:var(--radius-xs);background:var(--primary-d);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--bg);text-transform:uppercase} /* Точка на аватаре — тариф истекает/просрочен (см. ui.rs::nav_shell, urgent). Обводка цветом сайдбара — визуально «вырезает» точку из аватара, тот же приём, что у бейджей на иконках (см. .nav-burger-badge). */ .avatar-alert{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%; background:var(--red);border:2px solid var(--surface)} /* ---------- Layout ---------- */ .wrap{padding:22px 26px 40px;container:card / inline-size} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap} .page-head h1{font-size:21px;font-weight:700} .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .card-head .toolbar{margin-bottom:0} /* ---------- Переполнение командной панели (app.js::initToolbarOverflow) ---------- Панель, отмеченная [data-overflow-bar], не переносит элементы на вторую строку (в отличие от обычного .toolbar) — то, что не поместилось по ширине, JS уводит под кнопку «Ещё» в поповер рядом (полным списком, вертикально, с подписями — те же кнопки, что были бы видны на широком экране). Поповер — СОСЕД панели (общая обёртка .toolbar-overflow-wrap), а не её потомок: overflow:hidden на самой панели (без него хвост урезанных элементов на миг мелькал бы перед тем, как JS их спрячет) иначе обрезал бы и поповер тоже. */ .toolbar-overflow-wrap{position:relative} .toolbar-overflow-wrap[hidden]{display:none} [data-overflow-bar]{flex-wrap:nowrap;overflow:hidden;margin-bottom:0} .toolbar-more{flex:none} .toolbar-more-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:15; display:flex;flex-direction:column;gap:4px;min-width:230px;max-width:min(340px,90vw); padding:8px;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)} .toolbar-more-pop>*{width:100%} .toolbar-more-pop>.btn,.toolbar-more-pop>form>.btn{width:100%;justify-content:flex-start} .toolbar-more-pop>form{display:flex;width:100%} .toolbar-more-pop .wf-bulk-actions{display:flex;flex-direction:column;gap:6px;width:100%} /* Карточка направления: смета и реквизиты. ПО УМОЛЧАНИЮ — одна колонка, и реквизиты СВЕРХУ. Смете нужно ~820px (семь колонок, см. .table-scroll .est), и пока она этого не получает, она листается вбок внутри вкладки — то есть таблицу приходится читать в форточку. Реквизиты в этом случае уезжают наверх, а не вниз: под широкой таблицей их пришлось бы искать прокруткой, а сверху они всегда на виду и отдают смете всю ширину под собой. Две колонки включаются, ТОЛЬКО если левой реально хватит на 820px: (W - 16) * 1.6/2.6 >= 820 => W >= 1348. Порог считается от контейнера, а не от окна, поэтому раскладка сама перестраивается, когда пользователь сворачивает боковую панель и места становится больше. Container query как ДОБАВКА к одноколоночной раскладке, а не наоборот: браузер без её поддержки покажет одну колонку — она полностью рабочая. */ .grid-2{display:grid;grid-template-columns:1fr;gap:16px;align-items:start} /* min-width:0 обязателен: по умолчанию у grid-элемента min-width:auto, то есть колонка не может стать уже своего содержимого. Внутри левой лежит таблица сметы с min-width:820px, и колонка растягивалась до 850px — на телефоне по горизонтали ехала ВСЯ страница вместо .table-scroll внутри карточки. */ .grid-2>*{min-width:0} /* Реквизиты (второй элемент) наверх, пока раскладка одноколоночная. */ .grid-2>*:last-child{order:-1} @container card (min-width:1348px){ .grid-2{grid-template-columns:1.6fr 1fr} .grid-2>*:last-child{order:0} } /* ---------- Card ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)} .card+.card{margin-top:16px} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--border)} .card-head h2{font-size:14px;font-weight:650} .card-body{padding:16px 18px} .card-body.tight{padding:12px 14px} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);padding:8px 14px;font-size:13.5px;font-weight:550;cursor:pointer;transition:.12s;white-space:nowrap;font-family:inherit} .btn:hover{background:var(--surface-2);border-color:var(--border-h);text-decoration:none} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--primary);border-color:var(--primary);color:var(--bg)} .btn.primary:hover{background:var(--primary-d);border-color:var(--primary-d)} .btn.success{background:var(--green);border-color:var(--green);color:var(--bg)} .btn.success:hover{filter:brightness(.95)} .btn.ghost{background:transparent;border-color:transparent;color:var(--muted)} .btn.ghost:hover{background:var(--slate-l);color:var(--text)} .btn.sm{padding:5px 11px;font-size:12px;font-weight:700;color:var(--muted)} .btn.sm:hover{border-color:var(--primary);color:var(--primary-d)} /* .btn.sm задаёт color ПОСЛЕ .btn.primary/.success/.danger и с той же специфичностью — на заливке это давало приглушённый текст поверх цветного фона, а в тёмной теме (где --primary светлый, а --muted тоже светлый) кнопка читалась почти никак. Возвращаем цвет текста НА ЗАЛИВКЕ: в проекте это var(--bg), а не #fff — токены инвертируются вместе с темой. */ .btn.sm.primary,.btn.sm.success,.btn.sm.danger, .btn.sm.primary:hover,.btn.sm.success:hover,.btn.sm.danger:hover{color:var(--bg)} .btn.icon{padding:6px 9px} .btn.danger-soft{color:var(--red);border-color:var(--red-b);background:var(--surface)} .btn.danger-soft:hover{background:var(--red-l)} /* Заливка (не -soft) — для НЕОБРАТИМЫХ действий вне списка (сброс всех сессий, отзыв доступа): визуальная иерархия опасности должна совпадать с последствиями. Раньше класс не был определён вовсе — самая опасная кнопка в админке («Сбросить все сессии») выглядела как обычная серая. */ .btn.danger{background:var(--red);border-color:var(--red);color:var(--bg)} .btn.danger:hover{filter:brightness(.9)} .btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none} /* Более узкий случай disabled — «идёт отправка» (см. блокировку двойного сабмита в app.js): та же .btn:disabled-специфичность (класс+псевдокласс у одной, класс+класс у другой) — держим правило ПОСЛЕ .btn:disabled по каскаду, иначе оно окажется молча перекрыто (проверено ревью волны 1.5: изначально это правило стояло раньше и не применялось вовсе). */ .btn.is-submitting{cursor:wait;opacity:.6} .btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} /* ---------- Inputs ---------- */ .input,select.input,input[type=text],input[type=password],input[type=number]{appearance:none;border:1px solid var(--border-2);background:var(--surface);border-radius:var(--radius-sm);padding:8px 11px;font-size:13.5px;font-family:inherit;color:var(--text);transition:.12s} /* Поле выбора обязано ВЫГЛЯДЕТЬ полем выбора. appearance:none выше снимает стрелку вместе с нативным оформлением, и — нажать на него догадывались не все. Рисуем шеврон фоном (data-URI, а не в разметке: селектов на странице десятки) и оставляем справа место под него. currentColor в data-URI не работает — цвет задан явно и приглушён, чтобы годиться и в светлой, и в тёмной теме. То же и для input со списком (list=…): выбор там тоже есть. */ select,select.input,input[list]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23808A9B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 9px center;background-size:14px; padding-right:30px} /* Нативная стрелка Chrome у input[list] встала бы рядом с нашей. */ input[list]::-webkit-calendar-picker-indicator{display:none!important} select:disabled,input[list]:disabled{background-image:none} /* Мультиселект и «размер > 1» — это список, а не выпадашка: шеврон там лжёт. */ select[multiple],select[size]:not([size="1"]){background-image:none;padding-right:11px} .input:focus,input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-l)} .field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px} .field label{font-size:12.5px;font-weight:600;color:var(--slate)} /* ---------- Единый компонент формы (разметку собирает ui.rs::field_html и обёртки text_field/select_field/textarea_field) ---------- Раньше каждая форма размечалась по-своему: «» подряд во flex-column (профиль, уведомления) либо «

» во flex-wrap (все админские «Добавить …»). В первом случае подпись и контрол оказывались в ОДНОЙ строке и каждое поле начиналось на своём X; во втором вёрстку держал
, а ширину — индивидуальный style= на каждом контроле. Ниже — единственное место, где решается, как выглядит и выравнивается поле. Ширина 100% намеренно ограничена потомками .form-field: глобальный .input{width:100%} сломал бы .search input и микроформы в ячейках таблиц. */ .form{display:flex;flex-direction:column;gap:18px} .form>.card+.card{margin-top:0} .form-section+.form-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)} .form-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:0 0 10px} .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 18px;align-items:start} .form-grid.cols-1{grid-template-columns:1fr} .form-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .form-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .form-field{display:flex;flex-direction:column;gap:6px;min-width:0} .form-field>.form-label{font-size:12px;font-weight:650;color:var(--muted);line-height:1.3} .form-label .req{color:var(--red);margin-left:2px} .form-field>.input{width:100%;min-width:0} .form-hint{font-size:11.5px;color:var(--faint);line-height:1.35} .form-error{font-size:11.5px;font-weight:650;color:var(--red)} .form-field.f-invalid>.input{border-color:var(--red);box-shadow:0 0 0 3px var(--red-l)} .form-field.f-span2{grid-column:1/-1} .form-field.f-num>.input{max-width:160px} .form-field.f-sm>.input{max-width:220px} .form-field.f-color>.input{width:76px;height:38px;padding:3px;cursor:pointer} /* Инлайн-форма смены цвета страховой на /admin/providers — бедж + пикер + кнопка «Сохранить» в одну строку под основными данными провайдера. */ .prov-color-form{display:flex;align-items:center;gap:6px;margin-top:6px} .prov-color-form input[type=color]{width:32px;height:28px;padding:2px;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-sm)} /* display:contents — дети остаются участниками сетки родителя, но el.style.display='none' (app.js) по-прежнему прячет группу целиком. */ .form-fieldset{display:contents} .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)} .form-actions.end{justify-content:flex-end} .form-actions.bare{border-top:none;padding-top:0} /* Компактная форма в строку — фильтры, «Добавить …», формы в ячейках таблиц. Заменяет 7 дословных копий style='display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end'. */ .form-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px} .form-inline .form-field{flex:0 1 auto;min-width:160px} .form-inline .form-field.f-grow{flex:1 1 240px;min-width:200px} .form-inline .form-field.f-narrow{flex:none;width:110px;min-width:0} .form-inline .form-field.f-num>.input,.form-inline .form-field.f-sm>.input{max-width:none} .form-inline>.btn{flex:none} textarea.input{min-height:70px;resize:vertical;line-height:1.45} .input[type=color]{padding:3px;height:38px;width:76px;cursor:pointer} @media(max-width:680px){ .form-grid,.form-grid.cols-2,.form-grid.cols-3{grid-template-columns:1fr} .form-field.f-num>.input,.form-field.f-sm>.input{max-width:none} .form-inline{flex-direction:column;align-items:stretch} .form-inline .form-field,.form-inline .form-field.f-narrow,.form-inline .form-field.f-grow{width:auto;min-width:0;flex:none} .form-inline>.btn{width:100%;justify-content:center} .form-actions>.btn{width:100%;justify-content:center} } .search{position:relative} .search input{padding-left:34px;min-width:240px} .search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--faint)} /* Сегментированный переключатель «Все/Мои/Просрочено» в шапке карточки (и «Схема/Таблица» на /admin/workflow — тот же вид, но кнопки, не ссылки). */ .tab-row{display:flex;gap:4px;background:var(--slate-l);padding:3px;border-radius:9px} /* Счётчик в кружке: сколько направлений окажется на вкладке. Ряд KPI-плиток над таблицей показывал ровно эти же числа — один фильтр, показанный дважды; плитки сняты, числа переехали к самим вкладкам. */ .tab-row a{display:inline-flex;align-items:center;gap:6px} .tab-n{min-width:18px;padding:0 5px;border-radius:999px;background:var(--surface-2); color:var(--muted);font-size:11px;font-weight:700;line-height:17px;text-align:center} .tab-row a.on .tab-n{background:var(--primary);color:var(--bg)} .tab-row a,.tab-row button{border:none;background:transparent;padding:6px 12px;border-radius:7px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit} .tab-row a.on,.tab-row button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)} .tab-row a:hover{text-decoration:none} .tab-row button:hover{color:var(--text)} /* Переключатель Схема/Таблица/Справка (/admin/workflow) — те же пилюли .tab-row, но иконки без подписи: подпись — title/aria-label кнопки. */ #wf-view-switch button{padding:7px 10px} #wf-view-switch .ico{width:16px;height:16px} /* Группа действий в правом углу шапки страницы: [Версии] [Схема/Таблица/ Справка] — версии ЛЕВЕЕ переключателя режимов. */ .wf-head-actions{display:flex;align-items:center;gap:8px} /* Срок этапа — три уровня: в пределах нормы / горит (<24ч) / просрочен. */ .due{font-size:12px} .due.ok{color:var(--muted)} .due.soon{color:var(--amber);font-weight:700} .due.over{color:var(--red);font-weight:700} /* ---------- Chip (единый компонент статуса — раньше .pill/.tag/.badge порознь) ---------- */ .chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap} .chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9} .chip-stage{border-radius:var(--radius-sm);padding:4px 9px} .chip-slate{background:var(--slate-l);color:var(--slate)} .chip-amber{background:var(--amber-l);color:var(--amber)} .chip-green{background:var(--green-l);color:var(--green)} .chip-red{background:var(--red-l);color:var(--red)} .chip-blue{background:var(--primary-l);color:var(--primary-d)} .chip-purple{background:var(--purple-l);color:var(--purple)} .chip-cyan{background:var(--cyan-l);color:var(--cyan)} .chip-dark{background:var(--ink);color:#fff} /* Бедж страховой (реестр /admin/providers) — цвет произвольный, задан человеком через , поэтому background/color приходят инлайн-стилем из ui::insurer_badge(), а не через модификатор chip-* (см. app.css «Единый компонент формы» рядом — там же f-color). Этот класс только про геометрию/обрезку длинного названия. */ .chip-insurer{margin-right:6px;max-width:120px;overflow:hidden;text-overflow:ellipsis} .flags{display:flex;gap:6px} .flag{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;background:var(--slate-l)} .flag.on{background:var(--primary-l)} .flag.warn{background:var(--amber-l)} .flag.over{background:var(--red-l)} /* ---------- Table ---------- */ .tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.3px} .tbl th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:11px 18px;border-bottom:1px solid var(--border);white-space:nowrap} .tbl td{padding:13px 18px;border-bottom:1px solid var(--border);vertical-align:middle} /* Последняя колонка почти везде — действия (иконки/кнопки «Изменить», «Удалить»...) и визуально требует больше воздуха до края таблицы/карточки, чем обычный текстовый столбец — иначе кнопка читается как забытый отступ. Специфичнее любого табличного варианта padding (.wfe-tbl и т.п.) — действует поверх него, см. комментарий у .wfe-tbl th,.wfe-tbl td ниже. */ .tbl th:last-child,.tbl td:last-child{padding-right:24px} /* table-layout остаётся auto (нужен для .table-scroll с overflow-x), но при width:100% браузер распределяет ЛЮБОЙ свободный остаток пропорционально ВСЕМ колонкам — включая узкие иконка/бейдж/дата, которым лишнее место не нужно и только раздвигает соседние ячейки (напр. /notifications: пустая колонка-иконка перед беджем «прочитано»). width:1% — стандартный приём «не расти сверх контента» для auto-layout таблиц; текстовая колонка (обычно с min-width:0) забирает освободившееся место вместо этого. */ .tbl th.nw,.tbl td.nw{width:1%} /* Рука-курсор и подсветка — ТОЛЬКО там, где строка действительно открывает карточку (журнал: , см. app.js). Раньше правило висело на всех .tbl разом, и в /admin/outbox, /admin/audit, /admin/incidents, /admin/tenants, /admin/providers, /admin/users курсор обещал переход, которого нет ни по клику, ни по Enter. */ .tbl tbody tr{transition:background .1s} .tbl tbody tr[data-href]{cursor:pointer} .tbl tbody tr[data-href]:hover{background:var(--surface-2)} /* Чекбокс «обязателен» (с подписью, не голый квадратик) над полем названия статуса у конкретной страховой — ячейка матрицы «Обязательные статусы» (/admin/providers). Раньше это был один неподписанный чекбокс, а после первой попытки добавить название — тесное поле с обрезанным плейсхолдером рядом, которое легко принять за задизейбленное. Теперь чекбокс и поле стоят друг под другом, поле — на всю ширину ячейки. */ .chk-line{display:inline-flex;align-items:center;gap:6px;cursor:pointer} /* Двойной клик по строке открывает её модалку правки — тот же контрол, что и явная иконка-карандаш в ячейке (см. app.js: делегированный dblclick, data-row-edit). Курсор — тот же сигнал, что и у кликабельных строк журнала выше, чтобы обещание было согласовано с поведением. */ .tbl tbody tr:has([data-row-edit]){cursor:pointer} .tbl tbody tr:has([data-row-edit]):hover{background:var(--surface-2)} .notes li:has([data-row-edit]){cursor:pointer} /* Несколько иконок-действий в одной ячейке строки — в столбик на узкой колонке, без обёртки-карточки. */ .row-act{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .tbl tbody tr:last-child td{border-bottom:none} .dot-new{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);margin-right:6px;vertical-align:middle} /* Заголовок-разделитель фазы в таблице этапов (/admin/workflow, докс «группировка 31 этапа по фазам») — не строка данных. Управление группой (переименовать фазу СРАЗУ у всех её этапов, добавить/удалить группу) — кнопки с краю той же строки, поэтому внутри ячейки flex: имя слева, кнопки справа. display:flex — на ОБЁРТКЕ .phase-row-inner, не на самой : flex на td с colspan под table-layout:fixed ломает расчёт ширины colspan-ячейки в некоторых браузерах (сводит её к ширине первой охватываемой колонки вместо суммы всех) — сама остаётся обычной table-cell, оборачивающий div ничего в геометрии таблицы не решает. */ .tbl tr.phase-row td{background:var(--surface-2);padding:0} .phase-row-inner{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);padding:6px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px} .phase-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Кнопка наследует внешний вид заголовка (капс/трекинг) по умолчанию — тут явно возвращаем нормальный текст, иначе «Переименовать» читается криком. */ .phase-row .btn{text-transform:none;letter-spacing:normal;font-weight:500;flex:none} /* Заголовок с сортировкой: ссылка внутри (см. Pager::sort_th). */ .th-sort a{display:inline-flex;align-items:center;gap:4px} .th-sort:hover a{color:var(--primary)} .tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace} .veh{font-weight:600} .veh small{display:block;font-weight:400;color:var(--muted);font-size:12px} /* estimate editable table */ .est{width:100%;border-collapse:collapse;font-size:13.5px} .est th{text-align:left;font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:1px solid var(--border)} .est td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle} .est tfoot td{border-top:2px solid var(--border);border-bottom:none;font-weight:700} .est .num{text-align:right;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace} .est .kindtag{font-size:11px;padding:1px 7px;border-radius:5px;background:var(--slate-l);color:var(--slate);white-space:nowrap} .est .kindtag.part{background:var(--cyan-l);color:var(--cyan)} .est tr.disagreement{background:var(--amber-l)} /* --- Инлайн-правка: ячейка И ЕСТЬ поле ввода --------------------------- Отдельного режима «просмотр/правка» нет — поле стилизовано под текст и проявляет рамку на hover/focus. Отсюда бесплатно берутся Tab (нативный переход), Enter (implicit submit формы строки) и работа без JS. */ .est .ed{width:100%;min-width:0;font:inherit;color:inherit;background:transparent; border:1px solid transparent;border-radius:var(--radius-xs);padding:3px 6px;margin:-3px -6px;appearance:none} .est .ed:hover{border-color:var(--border);background:var(--surface)} .est .ed:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--primary-l)} .est .ed::placeholder{color:var(--faint)} .est td.num .ed{text-align:right;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace} .est .cell-art .ed{padding:1px 6px;margin:-1px -6px} /* Спиннеры съедают половину узкой колонки */ .est .ed[type=number]::-webkit-outer-spin-button, .est .ed[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .est .ed[type=number]{-moz-appearance:textfield;appearance:textfield} .est .cell-note{display:block;color:var(--amber);font-size:11.5px;margin-top:2px} /* Состояние строки. Маркер — левая граница первой ячейки, а не фон и не box-shadow: у .est border-collapse:collapse, тень на в этом режиме рисуется браузерами по-разному, а фон конфликтовал бы с .disagreement. */ .est tbody tr[data-row] td:first-child{border-left:3px solid transparent} .est tbody tr.is-dirty td:first-child{border-left-color:var(--amber)} .est tbody tr.is-saving td:first-child{border-left-color:var(--faint)} .est tbody tr.is-saved td:first-child{border-left-color:var(--green)} .est tbody tr.is-error td:first-child{border-left-color:var(--red)} .est tbody tr.is-saving{opacity:.6} .est tbody tr[data-row]:hover{background:var(--surface-2)} .est tbody tr.disagreement:hover{background:var(--amber-l)} /* Тот же паттерн, что у строки журнала (.tbl tbody tr[data-href]) — курсор pointer только там, где клик по строке действительно что-то открывает. Позиция сметы редактируется в модалке (см. .row-edit/app.js), поэтому курсор появляется только пока смета редактируема — иначе он обещал бы клик, которого после согласования уже нет. */ .est tbody tr[data-row]:has(.row-edit){cursor:pointer} .row-state{display:inline-block;min-width:78px;text-align:right;font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap} .est tr.is-dirty .row-state{color:var(--amber)} .est tr.is-saved .row-state{color:var(--green)} .est tr.is-error .row-state{color:var(--red)} /* ✓ показываем, только когда есть что сохранять (или строка в фокусе) — иначе в каждой строке висят две одинаково важные иконки. */ .est .row-save{visibility:hidden} .est tr.is-dirty .row-save,.est tr:focus-within .row-save{visibility:visible} /* display:flex НЕ на самой (ломает вычисление ширины/высоты строки таблицы у некоторых браузеров под auto table-layout — тот же класс бага, что раньше чинился у workflow-table.js), а на внутреннем div — остаётся обычной table-cell. */ .est td.c-act{white-space:nowrap} .est .c-act-inner{display:flex;gap:4px;justify-content:flex-end;align-items:center} .est td.c-act form{display:inline;margin:0} #est-total.is-preview{color:var(--amber)} /* Строка добавления — часть таблицы, а не форма-простыня под ней. */ .est-add td{background:var(--surface-2)} .est-add .ed{border-color:var(--border);background:var(--surface)} .est-add .addsub{display:flex;gap:10px;margin-top:6px} .est-add .addrow{display:inline-flex;margin:0;padding:0;border:none;gap:6px} /* Заголовок группы при включённой группировке позиций по разделу (est-toolbar, тумблер «Группировка по разделам» — ui.rs::estimate_tab). */ .est-section-row td{background:var(--surface-2);font-weight:700;font-size:11.5px; text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:6px 10px; border-bottom:1px solid var(--border)} /* ---------- Tabs ---------- */ .tabs{display:flex;gap:4px;padding:0 6px;border-bottom:1px solid var(--border);background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;overflow:auto} .tab{appearance:none;border:none;background:none;padding:13px 14px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px;font-family:inherit;white-space:nowrap} .tab:hover{color:var(--text)} .tab.active{color:var(--primary-d);border-bottom-color:var(--primary)} .tab .cnt{background:var(--slate-l);color:var(--slate);border-radius:999px;font-size:11px;padding:0 7px;font-weight:700} .tab.active .cnt{background:var(--primary-l);color:var(--primary-d)} /* Счётчик «требуется действие» (невыполненные условия перехода во вкладке «Что дальше») — единственный, который значит «надо что-то сделать», а не «столько всего накопилось». Идёт после .tab.active .cnt, поэтому побеждает в обоих состояниях вкладки. */ .tab .cnt.cnt-warn{background:var(--red-l);color:var(--red)} .tab-panel{display:none} .tab-panel.active{display:block} /* ---------- Info grid ---------- */ /* minmax(0,1fr), а не 1fr: по умолчанию у колонки грид-трека минимум min-content, и длинное значение (VIN, UUID станции) распирало первую колонку шире всей карточки — реквизиты вылезали за её край. */ .info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px} /* Значение переносится, а не растягивает колонку. Числа и суммы от этого не страдают: у них своя защита от переноса (.num/.nw/money). */ .info .v{overflow-wrap:anywhere} .info .k{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em} .info .v{font-size:13.5px;font-weight:550;margin-top:1px} /* Уточнение под значением: адрес станции, её идентификатор у страховой. */ .info .v-sub{font-size:11.5px;font-weight:400;color:var(--faint);margin-top:1px;overflow-wrap:anywhere} /* Логотип марки в заголовке карточки направления (ui::detail, car_logos::resolve_direction_logo) — намеренно КРУПНЕЕ plate-badge (номера, ~33.5px) рядом в том же

: марка — первое, на что смотрят, мельче номера она снова терялась бы. Белая подложка без обводки: логотипы auto.ru часто тёмный знак на прозрачном фоне (на тёмной теме иначе сливались бы с карточкой), а обводка поверх и так контрастного белого пятна на тёмном фоне была лишней — просто визуальный шум. ФИКСИРОВАННЫЙ width+height (не auto!) с object-fit:contain — сами PNG заранее обрезаны по альфа-каналу до плотного bbox (см. скрипт обрезки, генерирующий эти файлы), но соотношение сторон у разных марок разное (от почти квадратных эмблем до широких тонких текстовых лого) и внутри исходного bbox всё ещё бывает мельче контейнера — auto-размер тогда НЕ растягивал бы такой логотип, просто оставлял мелким. Фиксированный бокс заставляет браузер масштабировать КАЖДЫЙ логотип (вверх или вниз) под размер бокса, сохраняя пропорции, — то самое «растянуть на всю область картинки», а не только «не даём вылезти за рамки». */ .brand-logo{width:68px;height:44px;object-fit:contain;background:#fff;border-radius:4px;padding:2px;vertical-align:middle;flex:none} .kpis{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;margin-bottom:16px} .kpi{flex:1;min-width:150px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px} .kpi .lbl{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em} /* размеры .kpi .val — ниже, отскоуплены по контексту (.kpi-row / .kpis) */ .kpi .val{font-weight:700;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace} .kpi.accent .val{color:var(--primary-d)} .kpi.warn .val{color:var(--amber)} /* ---------- Вкладка «Что дальше»: гейт перехода ---------- Раньше здесь жил вертикальный степпер (.steps/.step) на все 31 этап; он уехал наверх, в полосу этапов (.stagebar), а вкладка теперь показывает чек-лист условий перехода, ветки и триггеры. */ .proc-next{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-top:10px;background:var(--surface-2)} .proc-next-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px} .proc-next-head b{font-size:13.5px} .proc-checks{list-style:none;margin:4px 0 0;padding:0} .proc-checks li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;padding:3px 0;color:var(--muted)} .proc-checks li .ico{flex:none;margin-top:2px} .proc-checks li.ok{color:var(--green)} .proc-checks li.no{color:var(--red);font-weight:650} .proc-vars{display:flex;gap:6px;flex-wrap:wrap} /* Пагинация вкладки «История» — стандартная раскладка: количество на странице слева, страницы с переходами вперёд/назад справа, одной строкой под списком (см. ui.rs::history_tab). */ /* padding — .hist-pager обычно стоит ПОСЛЕДНИМ прямым потомком .card (после .table-scroll, БЕЗ обёртки .card-body — см. ui::audit/ui::messages), а у .card самого по себе отступов нет (их обычно даёт .card-body) — без своего padding текст пагинатора упирался в края карточки. */ .hist-pager{display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:8px;margin-top:10px;padding:0 16px 16px} /* ---------- Documents gallery ---------- */ .gallery{display:flex;gap:12px;flex-wrap:wrap} .doc{width:150px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface);transition:.12s} .doc:hover{box-shadow:var(--shadow-md);border-color:var(--border-2)} .doc .thumb{height:96px;background:var(--slate-l);display:grid;place-items:center;overflow:hidden} .doc .thumb img{width:100%;height:100%;object-fit:cover} .doc .thumb .file-ico{font-size:34px;opacity:.5} .doc .meta{padding:8px 10px} .doc .meta .name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .doc .meta .sub{font-size:11px;color:var(--muted)} .dropzone{margin-top:14px;border:2px dashed var(--border-2);border-radius:var(--radius-sm);padding:16px;background:var(--surface-2)} .dropzone .upload-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .file-input{display:flex;align-items:center;gap:8px} .doc.local{position:relative} .doc-del{position:absolute;top:4px;right:4px;margin:0} .doc-del .btn{width:24px;height:24px;padding:0;border-radius:999px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow-md)} /* Селектор с классом .icon (а не просто .doc-del .btn) — эта кнопка несёт ещё и класс .btn.icon, у которого в touch-таргет блоке ниже есть ОТДЕЛЬНОЕ, более специфичное правило `.btn.icon{min-width:44px}` (та же специфичность 0-2-0, что у .doc-del .btn, но позже по каскаду — значит без класса .icon в этом селекторе min-width всё равно перебивался бы обратно на 44px, а min-height — нет, там такого доп. правила нет). Тот же осознанный отказ от 44px, что и у .topbar .tenant-switch .btn — без него кнопка раздувалась на любом тач-устройстве, вылезая квадратом за пределы превью документа. */ .doc-del .btn.icon{min-width:24px;min-height:24px} .upload-queue{margin-top:10px;display:flex;flex-direction:column;gap:6px} .upload-queue:empty{display:none} /* Строка очереди загрузки фото. Класс называется .upload-item, а НЕ .queue-item: то имя занимала очередь «Мои этапы» в снятом рейле журнала (см. ниже) — два разных компонента делили одно имя, побеждал поздний по каскаду, и у строк загрузки пропадал горизонтальный padding, а текст прилипал к цветной левой полосе. Разметку строит app.js (queueFile) — класс менять только вместе с ним. */ .upload-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-left:4px solid var(--amber);border-radius:var(--radius-sm);background:var(--surface);font-size:12.5px} .upload-item.done{border-left-color:var(--green)} .upload-item.error{border-left-color:var(--red)} .upload-item .qi-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .upload-item .qi-status{color:var(--muted);white-space:nowrap} .upload-item.error .qi-status{color:var(--red)} .upload-item.done .qi-status{color:var(--green)} .upload-item .qi-retry{appearance:none;border:none;background:none;color:var(--primary);cursor:pointer;font-size:12px;padding:0;text-decoration:underline} /* ---------- Feed / history ---------- */ .feed{list-style:none;margin:0;padding:0} .feed li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px} .feed li:last-child{border-bottom:none} .feed .ic{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--slate-l);font-size:13px} .feed .ic.note{background:var(--primary-l)} .feed .ic.appr{background:var(--green-l)} .feed .ic.stat{background:var(--purple-l)} .feed .ic.stage{background:var(--primary-l);color:var(--primary-d)} .feed .when{color:var(--faint);font-size:11.5px} /* Единая строка ленты активностей: «Ответственный — действие», затем описание, затем необязательная мелкая строка (срок/канал/комментарий). Раньше у каждого из 4 источников ленты был свой набор полей в своём порядке — теперь верстается одним и тем же кодом (см. ui::activity_row). */ .act-line{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .act-verb{color:var(--muted);font-weight:600} .act-desc{white-space:pre-wrap} .act-desc:empty{display:none} /* Пустое состояние списка/таблицы — ЕДИНСТВЕННОЕ объявление (раньше .empty был объявлен здесь и ещё раз ниже по файлу с другим выравниванием; побеждало второе, а первое только путало при чтении). */ .empty{padding:20px 0;text-align:center;color:var(--faint);font-size:13px} /* Онбординг нового тенанта (журнал без единого направления) — более заметный вариант .empty: заголовок + абзац вместо однострочной подписи. */ .empty.onboarding{text-align:left;max-width:480px;margin:0 auto;padding:28px 16px} .empty.onboarding b{display:block;color:var(--text);font-size:14px;margin-bottom:6px} .empty.onboarding p{margin:0;line-height:1.5} /* ---------- Action bar ---------- */ .actionbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(0deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow)} .actionbar .stage-now{display:flex;flex-direction:column} .actionbar .stage-now .lbl{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.03em} .actionbar .stage-now .name{font-size:15px;font-weight:700} .actionbar .sep{width:1px;align-self:stretch;background:var(--border)} /* Отключённая до поры возможность: разметка и маршрут живы, но из интерфейса убрана (печатные формы, выгрузка CSV). Возврат — снятие класса, а не восстановление удалённого кода. */ .feature-off{display:none!important} /* ---------- Toast ---------- */ .toast{position:fixed;top:70px;right:22px;z-index:50;max-width:380px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--amber);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:13px 16px;display:flex;align-items:flex-start;gap:10px;animation:slidein .25s ease} .toast.warn{border-left-color:var(--amber)} .toast.ok{border-left-color:var(--green)} .toast.error{border-left-color:var(--red)} .toast .ico,.proc-gate .ico{width:18px;height:18px;flex:none;margin-top:1px} .toast .msg,.proc-gate .msg{font-size:13px;flex:1} /* Плашка-блокер вкладки «Что дальше» — выглядит как статичный баннер, но НЕ .toast: класс .toast на карточке означает одноразовый flash, и на нём висят проверки его одноразовости (tools/smoke.sh) и e2e-локаторы. */ .proc-gate{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:13px 16px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--green);border-radius:var(--radius-sm)} .proc-gate.warn{border-left-color:var(--amber)} /* Постоянные плашки в потоке страницы (отказ СК, разногласия, превышение резерва, ожидание согласования) — тот же вид, что у тоста, но без fixed-позиционирования, анимации появления и скрытия при печати. Раньше каждая из четырёх несла дословную копию inline-стиля style='position:static;max-width:none;margin-bottom:14px' и вместе с одноразовыми тостами исчезала из распечатки. */ .banner{position:static;max-width:none;margin-bottom:14px;animation:none;box-shadow:none;top:auto;right:auto} @media print{.banner{display:flex!important}} .toast-close{appearance:none;border:none;background:none;padding:0;margin-left:4px;font-size:13px;line-height:1;color:var(--faint);cursor:pointer} .toast-close:hover{color:var(--text)} @keyframes slidein{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}} /* ---------- Login ---------- */ .login-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#28406E,#1B2C4D)} .login-card{width:360px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:28px} .login-card .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;margin-bottom:4px} .login-card .brand .logo{width:44px;height:44px;display:grid;place-items:center;color:var(--primary)} .logo-svg{width:100%;height:100%;transform:rotate(-8deg)} .login-card .sub{color:var(--muted);font-size:13px;margin-bottom:20px} .login-card .btn.primary{width:100%;justify-content:center;padding:11px} .login-err{background:var(--red-l);color:var(--red);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;margin-bottom:14px} .demo-hint{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)} .demo-hint code{background:var(--slate-l);padding:1px 6px;border-radius:5px;color:var(--text)} /* .admin-link удалён вместе с .appbar: класса нет ни в одном шаблоне (ссылки администрирования переехали в сайдбар и меню аккаунта). Правила были рассчитаны на фиксированно-тёмный фон — #C6D3EC и белый hover на светлой теме сливались бы с var(--bg), так что оживлять их нельзя. */ /* ---------- Admin: triggers ---------- */ .btn.icon.xs{padding:2px 5px;font-size:10px} /* ---------- Outbox log entries ---------- */ .log-row td{padding:0 14px 8px;background:var(--surface-2)} .log-entry{font-size:11.5px;color:var(--muted);padding:2px 0;font-family:"IBM Plex Mono",Consolas,monospace} .log-ts{color:var(--faint);margin-right:4px} /* Журнал доставки убран под
: раньше он был развёрнут ВСЕГДА и удваивал высоту таблицы (строка-лог на каждую строку сообщения), хотя нужен ровно при разборе одного зависшего сообщения. Нативный
работает без JS. */ .log-row summary{cursor:pointer;list-style:none;padding:4px 0;font-size:11.5px;color:var(--muted)} .log-row summary::-webkit-details-marker{display:none} .log-row summary::marker{content:''} .log-row summary::before{content:"\25B8 ";color:var(--faint)} .log-row details[open] summary::before{content:"\25BE "} /* ---------- Role cards ---------- */ .roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:768px){.roles-grid{grid-template-columns:1fr}} .role-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:var(--surface-2)} .role-name{font-weight:700;font-size:14px;margin-bottom:8px} .role-perms{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} .perm-check{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:3px 8px;cursor:pointer} .perm-check input{margin:0} .perm-check:hover{border-color:var(--primary)} /* ---------- Accessibility helpers ---------- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- Table scroll (адаптивность) ---------- */ /* СИСТЕМНЫЙ фикс «таблица вылезает за экран» (жалоба повторялась на /admin/incidents, /admin/audit, /directions и многих других страницах). История вопроса: раньше по умолчанию здесь стоял overflow-x:visible, auto включался ТОЛЬКО ниже 1100px — резон был в position:sticky у ``: overflow-x!=visible на контейнере всегда тянет за собой overflow-y:auto (спецификация не разрешает паре «visible + не-visible» разъезжаться), из-за чего .table-scroll становится СВОИМ scroll- контейнером, и sticky-шапка прилипает к НЕМУ, а не к #main-content. Сначала попробовали оставить это как точечное исключение для журнала направлений и таблицы схемы процесса (#journal-wrap/#wf-table-wrap) — но и это не спасало: #main-content сам держит overflow-y:auto, и по той же спецификации его СОБСТВЕННЫЙ overflow-x тоже становится auto (даже не будучи задан явно) — широкая таблица внутри переполняла уже ЕГО, а не document, и document.scrollWidth оставался чистым, маскируя баг под автоматическими проверками, но пользователь по факту всё равно таскал вбок ВЕСЬ #main-content (поиск, фильтры, KPI-плитки — не только таблицу). Поэтому теперь скролл ВСЕГДА свой, внутри таблицы, без исключений — ценой sticky-шапки почти везде (эту жалобу видели куда чаще, и по историческому опыту проекта у самой длинной таблицы — 31 строка на этапах — общая с документом полоса прокрутки тоже когда-то была источником путаницы, не только удобством). ДОБАВЛЕНО ПОЗЖЕ: тот самый sticky-thead (см. `.tbl thead th` ниже) без этого блока был МЁРТВЫМ кодом — раз .table-scroll сам никогда не скроллится по Y (высота равна содержимому, весь вертикальный скролл уходит наверх, в #main-content), sticky относительно НЕГО никогда не срабатывает: шапка просто уезжает вместе с таблицей, как самый обычный ``. Ограничиваем высоту — теперь .table-scroll ДЕЙСТВИТЕЛЬНО скроллится сам по себе, и sticky-шапка прилипает по-настоящему, ценой отдельной полосы прокрутки у высоких таблиц (не всей страницы — только таблицы, что и было целью запроса «шапка должна прилипать»). */ .table-scroll{position:relative;overflow-x:auto;overflow-y:auto;max-height:max(360px, calc(100vh - 220px)); -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .table-scroll .tbl{min-width:640px} /* Семь колонок, из них пять с полями ввода — уже 520px строка добавления схлопывалась в кашу. Таблица листается горизонтально (.table-scroll). */ .table-scroll .est{min-width:820px} /* Фокус-стиль для кликабельных строк журнала (keyboard nav) */ .tbl tbody tr:focus-within{outline:2px solid var(--primary);outline-offset:-2px} /* Журнал на мобильном: карточки-строки вместо горизонтального скролла (единственная широкая таблица, которую реально листают с телефона — админские таблицы горизонтальный скролл устраивает, их открывают намного реже и почти всегда с десктопа). Не трогаем .table-scroll .tbl в общем виде — только #journal, у него одного есть data-label на . */ @media(max-width:700px){ #journal-wrap{overflow-x:visible;overflow-y:visible;max-height:none} #journal{min-width:0} #journal thead{display:none} #journal tbody tr{display:block;border-bottom:1px solid var(--border);padding:10px 14px} #journal tbody tr:last-child{border-bottom:none} #journal td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0;border-bottom:none;text-align:right} #journal td[data-label]::before{content:attr(data-label);color:var(--faint);font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.03em;text-align:left;flex:none} #journal td[data-label='']::before{display:none} #journal td.mono{justify-content:space-between} #journal .veh{text-align:right} #journal .veh small{display:block} /* Флаги на телефоне подписываем словами: title-тултип там не показывается вовсе, а иконка без подписи ничего не сообщает (см. flags_html). */ #journal .flags .sr-only{position:static;width:auto;height:auto;clip:auto;clip-path:none;margin:0;overflow:visible;white-space:normal;font-size:11px;color:var(--muted)} #journal .flag{width:auto;padding:2px 7px;gap:4px;display:inline-flex;align-items:center} } /* Сетка имени/артикула в смете */ .est .cell-name{font-weight:550} .est .cell-art{display:block;font-weight:400;color:var(--muted);font-size:11.5px} /* ---------- Documents: hover + загрузчик ---------- */ .doc{cursor:pointer} .doc:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)} .file-input{cursor:pointer;border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:8px 12px;background:var(--surface);font-size:13px;color:var(--muted);transition:.12s;display:inline-flex;gap:7px;align-items:center} .file-input:hover{background:var(--surface-2);border-color:var(--border-h)} /* Реальный input скрыт (label.file-input — стилизованный триггер) */ .dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} .file-input-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px} /* ---------- Адаптивность: формы и actionbar на узких экранах ---------- */ @media(max-width:680px){ /* .addrow — теперь одна кнопка в ячейке , разворачивать нечего; на узком экране таблица листается горизонтально (.table-scroll). */ .est-add .addsub{flex-direction:column;gap:6px} .actionbar{flex-direction:column;align-items:stretch} .actionbar .sep{display:none} /* Формы «перейти на этап» и «завершить до» — это select + кнопка в строку. Кнопка получает width:100% (правило ниже), поэтому в одну строку с select'ом она не помещалась и её подпись обрезалась до «Изменить эт…». На узком экране кладём select и кнопку друг под друга. */ .actionbar form{width:100%;flex-wrap:wrap} .actionbar form .input,.actionbar form select{flex:1 1 100%;min-width:0} .actionbar .btn{width:100%;justify-content:center} /* Таблицы, выведенные БЕЗ обёртки .table-scroll (версии процесса и т.п.), на узком экране молча обрезались по краю карточки — вместе с последней колонкой, где живут кнопки действий («Активировать»), и добраться до них было нельзя: страница по горизонтали не прокручивается. display:block превращает саму таблицу в область прокрутки. */ .card-body>.tbl,.wrap>.tbl{display:block;overflow-x:auto;max-width:100%} .info{grid-template-columns:1fr} .kpis{flex-direction:column} .login-card{width:calc(100vw - 32px);max-width:360px} .wrap{padding:14px} .page-head h1{font-size:18px} } /* ---------- Печатная версия (опционально) ---------- */ @media print{ /* .topbar целиком НЕ прячем: после консолидации шапки именно в нём живёт

страницы (см. split_page_head в ui.rs) — распечатка журнала/аудита выходила вообще без названия. Убираем из него только интерактив. */ .topbar{position:static;border:none;padding:0 0 8px;min-height:0} .topbar .nav-burger,.topbar .spacer, .topbar .tenant,.topbar .page-head .btn{display:none!important} .sidebar,.nav-scrim,.skip-link, .toolbar,.actionbar,.addrow,.est-add,.est-locked,.est .c-act,.dropzone,.toast{display:none!important} /* На печати смета — таблица, а не форма: рамки полей только мешают. */ .est .ed{border:none!important;background:none!important;padding:0;margin:0} /* Единая область прокрутки (app-shell, см. .layout ниже) держит высоту ровно в 100vh и обрезает всё остальное — на экране так и нужно, но на печати это обрубало распечатку до одной страницы. На бумаге прокрутки нет, поэтому высоты/overflow снимаем — контент течёт по страницам как обычный документ. */ .layout{height:auto;overflow:visible} .main{height:auto} #main-content{overflow:visible} body{background:var(--surface)} } /* ---------- App layout: sidebar ---------- */ /* Раньше .layout был min-height:100vh — страница росла вместе с содержимым, и своя вертикальная полоса прокрутки была у ДОКУМЕНТА, а ЕЩЁ одна — у любой внутренней области с overflow (например у широкой таблицы, .table-scroll). Прокручивать такую страницу означало гадать, в какую из двух полос попадёт курсор. Теперь .layout — РОВНО высота экрана, ничего лишнего не растёт; единственная область, которая реально прокручивается — #main-content ниже (flex:1;overflow-y:auto), сайдбар и шапка остаются на месте не через sticky «пока не уедет», а просто потому, что не участвуют в прокрутке вообще. */ /* .app-shell — колонка на всю высоту экрана: полоса «Войти как» (если активна) занимает свою естественную высоту сверху, ВСЁ ОСТАЛЬНОЕ (сайдбар+контент, .layout) — оставшееся место. Раньше полоса рендерилась ВНУТРИ
, соседом контента одной конкретной страницы — не на всю ширину экрана (сайдбар оставался рядом) и не закреплена сверху. */ .app-shell{display:flex;flex-direction:column;height:100vh} .layout{display:flex;flex:1;min-height:0;overflow:hidden} /* Full-width полоса поверх .layout (см. .app-shell) — не карточка внутри контента: без внутреннего скругления/отступа снизу и с паддингом по боковому краю экрана, а не по .wrap контента. */ .user-impersonation{flex:none;margin-bottom:0;border-radius:0;border-width:0 0 1px;padding:10px 22px} /* 258px — не произвольное число: 20 (паддинг .sidebar) + 20 (паддинг .nav-item) + 22 (.nav-ico) + 10 (gap) + 180 (.nav-label max-width) + 6px запас. При 224px самый длинный пункт меню («Настройки уведомлений») не помещался и текст обрезался ДО того, как достигал собственного max-width:180px у .nav-label — панели банально не хватало ширины. */ .sidebar{width:258px;flex:none;background:var(--surface);border-right:1px solid var(--border);padding:14px 10px;height:100%;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;transition:width .32s ease-in-out,padding .32s ease-in-out;will-change:width} /* Прямые flex-дети .sidebar (лого, заголовки групп, пункты меню, подвал) по умолчанию flex-shrink:1 — когда суммарная высота содержимого больше доступной (много пунктов меню + низкое окно), flexbox СНАЧАЛА сжимает каждого ребёнка, а не пускает .sidebar в прокрутку через overflow-y:auto (та включается только когда сжимать уже некуда). На практике это резало .nav-group (10px текст + 12px паддинг = 30px) до ~17px — подпись группы («Работа»/«Настройки») обрезалась почти целиком. flex-shrink:0 на всех прямых детях отдаёт браузеру то же самое место под естественный размер, а излишек уходит в скролл самого сайдбара, как и задумано. */ .sidebar>*{flex-shrink:0} .main{flex:1;min-width:0;display:flex;flex-direction:column;height:100%} /* min-height:0 — классическая ловушка flex: без него колонка-ребёнок с overflow:auto просто растёт под содержимое вместо того, чтобы сжаться и реально прокручиваться внутри отведённых .main границ. */ #main-content{flex:1;min-height:0;overflow-y:auto} /* Логотип бренда — теперь в верхней части сайдбара (см. project brief: консолидация appbar+page-head), а не в отдельном appbar. */ .sidebar .brand{display:flex;align-items:center;gap:9px;padding:2px 8px 16px} /* Лого — сам flex-ряд (значок + подпись «Рабочий стол», см. logo_html): раньше это был квадрат display:grid;place-items:center строго под одну иконку, подписи в нём было негде встать. Иконка — фиксированный размер через .sidebar .brand .logo-svg (ниже), не растягивается на весь .logo. */ .sidebar .brand .logo{display:flex;align-items:center;gap:9px;color:var(--primary);flex:none} /* Подпись лого — того же стиля, что у обычного пункта меню (.nav-item — 13.5px/600/var(--slate)), а не крупнее/жирнее — просто первая строка списка, ведущая на рабочий стол. Сама иконка — НЕ 20px, как у пунктов меню (пробовали: при разворачивании панели лого визуально «сжималось» с 26px свёрнутого до 20px — читалось как баг, а не как дизайн). 26px — один и тот же размер в обоих состояниях сайдбара, чуть крупнее icoн меню (бренд заметен), но без скачка при разворачивании/сворачивании. */ .sidebar .brand .logo-svg{width:26px;height:26px;flex:none} .logo-svg{width:100%;height:100%;transform:rotate(-8deg)} /* Подпись рядом с лого — тот же .nav-label, что и у пунктов меню: гаснет той же анимацией при сворачивании панели (см. .nav-collapsed .nav-label ниже), а не отдельным правилом только для этого места. */ .logo-label{font-weight:600;font-size:13.5px;color:var(--slate)} .nav-group{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);padding:12px 10px 5px} /* padding/gap здесь НЕ анимируем: пробовали — вместе с шириной .sidebar (тоже animated) на каждой иконке получалось двойное, рассинхронизированное движение (сама анимация паддинга плюс пересчёт justify-content от живой ширины контейнера каждый кадр) — по многим пунктам сразу это читалось как дрожание всего меню. Мгновенная смена паддинга/gap + анимированная ТОЛЬКО ширина панели (см. .sidebar) даёт один непрерывный чистый сдвиг. */ .nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-xs);color:var(--slate);font-size:13.5px;font-weight:600;margin-bottom:2px} .nav-item:hover{background:var(--slate-l);text-decoration:none;color:var(--text)} .nav-item.active{background:var(--primary-l);color:var(--primary-d)} .nav-ico{width:22px;text-align:center} .nav-ico .ico{width:20px;height:20px} .nav-badge{margin-left:auto;background:var(--red);color:var(--bg);border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px} /* ---------- Блок тарифа (низ сайдбара) — см. docs/11 «Биллинг-минимум» ---------- */ .sidebar-bottom{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:12px} .plan-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;margin-top:10px;margin-bottom:0} .plan-name{font-size:12px;font-weight:700;color:var(--text)} .plan-note{font-size:11px;color:var(--faint);margin-top:3px} .plan-card.warn{background:var(--amber-l);border-color:var(--amber)} .plan-card.warn .plan-note{color:var(--amber);font-weight:700} .plan-card.danger{background:var(--red-l);border-color:var(--red)} .plan-card.danger .plan-note{color:var(--red);font-weight:700} /* ---------- Мобильное меню навигации (<860px) ---------- */ .nav-burger{display:none;position:relative;appearance:none;border:none;background:none;font-size:20px;line-height:1;cursor:pointer;padding:6px 8px;border-radius:8px;color:var(--muted);font-family:inherit} .nav-burger:hover{background:var(--surface-2)} /* На мобильном пункты меню (в т.ч. бейдж «Ленты событий») вне экрана, пока панель не открыта бургером — единственное видимое место для бейджа непрочитанного тогда сам бургер (см. ui.rs::nav_shell). */ .nav-burger-badge{position:absolute;top:1px;right:1px;min-width:15px;height:15px;padding:0 3px; border-radius:999px;background:var(--red);color:var(--bg);font-size:10px;font-weight:700; line-height:15px;text-align:center} .nav-burger-badge.is-empty{display:none} .nav-scrim{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:39} @media(max-width:860px){ .sidebar{ display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:40; height:100vh;box-shadow:var(--shadow-lg);transform:translateX(-100%);transition:transform .18s ease; } .nav-burger{display:inline-block} /* Класс .nav-open переключается кнопкой через app.js (тот же механизм, что и у вкладок карточки направления) — надёжнее чекбокс-приёма. */ body.nav-open .sidebar{transform:none} body.nav-open .nav-scrim{display:block} } /* ---------- KPI row ---------- */ .kpi-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px} .kpi-row .kpi{flex:1;min-width:190px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);transition:border-color .15s} .kpi-row .kpi:hover{border-color:var(--border-2)} .kpi.danger .val{color:var(--red)} .kpi.warn .val{color:var(--amber)} .kpi-link{display:block;color:inherit} .kpi-link:hover{text-decoration:none;box-shadow:var(--shadow-md)} /* Плитка, соответствующая ТЕКУЩЕМУ фильтру журнала: без неё единственным следом выбора после клика оставалась адресная строка. */ .kpi-link.is-active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-l)} .kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .kpi .lbl{font-size:12px;color:var(--muted);font-weight:700} .kpi-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none} .kpi-icon svg{width:14px;height:14px} .kpi-icon.total{background:var(--cyan-l);color:var(--cyan)} .kpi-icon.wait{background:var(--amber-l);color:var(--amber)} .kpi-icon.work{background:var(--primary-l);color:var(--primary)} .kpi-icon.over{background:var(--red-l);color:var(--red)} /* Значение KPI: число НИКОГДА не переносится — вместо переноса уменьшается кегль (clamp). Два размера, отскоупленные явно: раньше .kpi .val был объявлен дважды с одинаковой специфичностью и 27px «протекали» в компактные плитки карточки направления (.kpis .kpi) — сумма там ломалась. */ .kpi .val{font-family:"IBM Plex Mono",monospace;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap} .kpi-row .kpi .val{font-size:clamp(19px,2.4vw,27px);margin-top:10px} .kpis .kpi .val{font-size:clamp(15px,1.9vw,19px);margin-top:2px} .kpi-delta{font-size:11.5px;margin-top:5px;color:var(--faint)} /* ---------- Журнал направлений ---------- */ /* Одна колонка: правая боковая полоса журнала снята — «Мои этапы» дублировали вкладку «Мои», лента событий уехала в свой раздел, а карточка организации повторяла меню аккаунта. */ .content-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start} .content-grid>*{min-width:0} @media(max-width:1180px){ } /* ---------- Security/Accessibility improvements ---------- */ /* Focus visibility: keyboard navigation outline */ :focus-visible{outline:2px solid var(--primary);outline-offset:2px} .btn:focus-visible{outline:2px solid var(--primary-d);outline-offset:2px} a:focus-visible{outline:2px solid var(--primary);outline-offset:1px;border-radius:4px} input:focus-visible,select:focus-visible{outline:2px solid var(--primary-d);outline-offset:1px} /* Touch targets: минимум 44px для мобильных */ @media(pointer:coarse){ .btn{min-height:44px;min-width:44px} .btn.icon{min-width:44px} .perm-check{min-height:44px;padding:8px 12px} .tab{padding:14px 16px} /* Иконочные контролы вне .btn — раньше оставались мелкой мишенью (закрытие тоста, бургер меню). */ .toast-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} .nav-burger{min-width:44px;min-height:44px} } /* Reduced motion */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .toast{animation:none} } /* Адаптивная шапка. ВНИМАНИЕ: раньше эти правила были нацелены на .appbar, которого в разметке больше нет (шапка консолидирована в .topbar, см. ui.rs::nav_shell) — блок был мёртвым, и на 360px в одну flex-строку пытались влезть бургер + заголовок + тема + колокол + чип тенанта + аватар + логин + ссылки аккаунта. */ @media(max-width:860px){ .topbar{gap:10px;padding:10px 14px;min-height:56px} .topbar .page-head h1,.topbar .page-title{font-size:16px} } @media(max-width:640px){ .topbar .tenant{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;padding:4px 8px} /* Заголовок и кнопки страницы — в ОДНУ строку. .page-head наследует от десктопного правила flex-wrap:wrap, и на 375px кнопка («CSV», «Добавить») съезжала под заголовок: шапка вырастала до 100px, то есть на каждой странице отдавала телефону восьмую часть экрана. Заголовок теперь ужимается с многоточием, кнопка остаётся справа. */ .topbar .page-head{flex-wrap:nowrap;align-items:center;min-width:0;gap:8px} /* min-width:0 нужен именно ОБЁРТКЕ заголовка (в разметке это безымянный div с .crumbs и h1): по умолчанию у flex-элемента min-width:auto, и обёртка отказывалась сжиматься ниже ширины nowrap-заголовка — кнопка страницы выезжала за шапку и наползала на колокольчик. */ .topbar .page-head>*:first-child{flex:1 1 auto;min-width:0} /* :not(:first-child) — на страницах без кнопок в шапке единственный потомок .page-head одновременно и первый, и последний; без этой оговорки flex:none перебивал бы правило выше и длинный заголовок распирал бы шапку вместо того, чтобы ужаться многоточием. */ .topbar .page-head>*:last-child:not(:first-child){flex:none} .topbar .page-head h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar .page-head .btn{flex:none;padding:5px 9px;font-size:12px} /* ДВА и более действия в шапке (карточка направления: «Акт приёмки» + «Заказ-наряд») в одну строку с бургером, колокольчиком и аватаром не влезают — кнопки наползали на колокольчик, а заголовок ужимался до нуля. Такой шапке отдаём кнопкам отдельную строку. Одна кнопка (журнал — «CSV») рядом с заголовком помещается, и шапка остаётся однострочной, поэтому условие на количество кнопок, а не на ширину экрана. display:contents поднимает детей .page-head на уровень flex-строк .topbar: без него перенос происходил бы ВНУТРИ её 199-пиксельной коробки и кнопки всё равно вылезали бы за край. */ /* Тот же перенос нужен и форме фильтра по организации (журнал направлений, супер-админ): внутри неё растягиваются (flex:1;min-width:0), кнопка остаётся по своей ширине. Без этого select держит внутреннюю intrinsic-ширину по самому длинному