/* ───────────────────────────────────────────────────────────────────────────────────────── * [CARD-V8-LOOK] Вид карточки сделки по эталонным мокапам (v8-order / v8-purchase). * * ЧТО ЭТО. Владелец: «нам надо ТОЧНО ПО МОКАПУ дизайн сделать, сейчас вообще не то». Файл — * собранные слои мокапа в том же порядке, в каком их подключает генератор: базовый вид → * карточка v8 → финальные правки → шкала → док задач → вкладка расчётов → доступность. * Порядок значим: каждый следующий слой правит предыдущий, перестановка меняет вид. * * ⛔ ПРАВИЛА ПРАВКИ. Источник истины — слои в scratchpad, этот файл СОБИРАЕТСЯ из них скриптом. * Править здесь руками нельзя: правка потеряется при следующей сборке мокапа, и живой вид * разойдётся с эталоном — ровно то расхождение, которое сторож [CARD-MOCKUP-MATCHES-LIVE] * и должен ловить. * * Применяется ТОЛЬКО при включённом виде v8 (флаг sc_pref_deal_card_v8) — классика и v6 * остаются нетронутыми, откат = одна запись в ключ. * ───────────────────────────────────────────────────────────────────────────────────────── */ /* Всё ниже действует только при html[data-card-v8] — признак ставит клиент по личной настройке. Без признака файл не влияет ни на один экран. */ @scope (html[data-card-v8]) { /* ───────────────────────────────────────────────────────────────────────────────────────── * [CARD-V8-LOOK] Вид карточки сделки по эталонным мокапам (v8-order / v8-purchase). * * ЧТО ЭТО. Владелец: «нам надо ТОЧНО ПО МОКАПУ дизайн сделать, сейчас вообще не то». Файл — * собранные слои мокапа в том же порядке, в каком их подключает генератор: базовый вид → * карточка v8 → финальные правки → шкала → док задач → вкладка расчётов → доступность. * Порядок значим: каждый следующий слой правит предыдущий, перестановка меняет вид. * * ⛔ ПРАВИЛА ПРАВКИ. Источник истины — слои в scratchpad, этот файл СОБИРАЕТСЯ из них скриптом. * Править здесь руками нельзя: правка потеряется при следующей сборке мокапа, и живой вид * разойдётся с эталоном — ровно то расхождение, которое сторож [CARD-MOCKUP-MATCHES-LIVE] * и должен ловить. * * Применяется ТОЛЬКО при включённом виде v8 (флаг sc_pref_deal_card_v8) — классика и v6 * остаются нетронутыми, откат = одна запись в ключ. * ───────────────────────────────────────────────────────────────────────────────────────── */ /* ═══ слой: sales-css.txt ═══ */ :root{ --bg:#f6f7f9; --surface:#ffffff; --surface2:#f3f4f6; --surface3:#e9ebef; --border:#e5e7eb; --border2:#d1d5db; --text:#111827; --text2:#374151; --text3:#6b7280; --accent:#3b82f6; --pri-bg:#2563eb; --pri-bg-h:#1d4ed8; --green:#16a34a; --green-bg:#dcfce7; --green-fg:#166534; --red:#ef4444; --red-bg:#fee2e2; --red-fg:#991b1b; --orange:#d97706; --orange-bg:#fef3c7; --orange-fg:#92400e; --blue-bg:#eff6ff; --blue-bd:#bfdbfe; --blue-fg:#1e40af; --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace; } *{box-sizing:border-box} /* [FONT-SELF-HOSTED] тот же подключённый файлом Inter, что и в живой системе */ @font-face{font-family:'InterVariable';src:url('/fonts/InterVariable.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap} /* [FONT-MANAT-GLYPH] ₼ (U+20BC) нет ни в одном шрифте — без этого фейса он рисуется пустым квадратом рядом с каждой суммой. unicode-range ровно на манат: на остальной текст фейс не влияет. */ @font-face{font-family:'SofconManat';src:url('/fonts/SofconManat.woff2') format('woff2'); unicode-range:U+20BC;font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Inter-fallback';src:local('Arial'),local('Liberation Sans'),local('DejaVu Sans'); size-adjust:107%;ascent-override:90%;descent-override:22.5%;line-gap-override:0%} a{color:var(--accent);text-decoration:none} button{font:inherit} .main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0} /* ── шапка ── */ .hero{background:var(--surface);border-bottom:1px solid var(--border);padding:6px 20px 0;flex-shrink:0} .crumbs{font-size:12px;color:var(--text3);display:flex;gap:6px} .crumbs b{color:var(--text2);font-weight:600} .title-row{display:flex;align-items:center;gap:10px;margin:2px 0 2px;flex-wrap:wrap} .title-row h1{font-size:17px;margin:0;letter-spacing:-.02em;font-weight:700} .badge{font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;display:inline-flex;align-items:center;gap:5px} .badge.ok{background:var(--green-bg);color:var(--green-fg)} .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--green)} .title-row .sp{flex:1} .btn{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:6px 13px; font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;gap:6px} .btn:hover{border-color:var(--border2);background:var(--surface2)} .btn.pri{background:var(--pri-bg);border-color:transparent;color:#fff} .btn.pri:hover{background:var(--pri-bg-h)} .btn.sm{padding:4px 10px;min-height:24px} .me{display:flex;align-items:center;gap:9px;padding:2px 6px} .me .ava{width:30px;height:30px;border-radius:50%;background:#5e35b1;color:#fff;font-size:12px; font-weight:700;display:flex;align-items:center;justify-content:center} .me .nm{font-size:12px;font-weight:600;line-height:1.2} .me .rl{font-size:11px;color:var(--text3);line-height:1.2} .meta-row{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text3);margin:2px 0 8px;flex-wrap:wrap} .pchips{display:flex;gap:6px;margin:3px 0 6px;flex-wrap:wrap} .pchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px; background:var(--surface);padding:3px 9px;min-width:0;color:inherit;transition:border-color .12s,box-shadow .12s} .pchip:hover{border-color:var(--accent);box-shadow:0 1px 6px rgba(59,130,246,.15)} .pchip.flat:hover{box-shadow:none;border-color:var(--border)} .pchip .pa{width:26px;height:26px;border-radius:50%;color:#fff;font-size:11px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .pchip .pt{display:flex;flex-direction:row;align-items:baseline;gap:5px;min-width:0} .pchip .pl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);line-height:1.2} .pchip .pv{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;line-height:1.25} .pchip .pgo{color:var(--border2);font-size:12px} .pchip:hover .pgo{color:var(--accent)} .pchip .pact{color:var(--text3);font-size:12px;padding:2px 3px;border-radius:5px} .pchip .pact:hover{background:var(--blue-bg);color:var(--accent)} .meta-row b{color:var(--text2);font-weight:600} .alerts{display:flex;gap:8px;margin:0 0 8px;flex-wrap:wrap} .alert{font-size:11px;font-weight:600;border-radius:7px;padding:3px 10px} .alert.red{background:var(--red-bg);color:var(--red-fg)} .alert.amb{background:var(--orange-bg);color:var(--orange-fg)} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0 -20px;border-top:1px solid var(--border)} .kpi{padding:4px 14px 6px;border-right:1px solid var(--border);min-width:0} .kpi:last-child{border-right:0} .kpi .kl{font-size:11px;color:var(--text3)} .kpi .kv{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-top:1px;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis} .kpi .kv .of{font-size:11px;color:var(--text3);font-weight:500} .kpi .kv.red{color:var(--red)} /* [SETUP-MARKS-FORCED-VISIBLE] Пустое поле, показанное ТОЛЬКО ради настройки, помечено — так же, как Salesforce App Builder и Power Apps помечают скрытые элементы в редакторе. Без пометки настройщик видит полный список и решает, что его видит и пользователь. Метка тихая: пунктир слева и приглушённая подпись, чтобы не спорить с содержимым. ⛔ ПРАВИЛО ЖИВЁТ ЗДЕСЬ, В СЛОЕ-ИСТОЧНИКЕ. Раньше оно лежало ТОЛЬКО в собранном public/card-v8.css (правка руками мимо слоёв) — и первая же честная пересборка стёрла бы его вместе с инвариантом, который его проверяет (scripts/check-invariants.sh, «v8-forced-visible» в card-v8.css). Ровно тот класс, о котором предупреждает [CSS-EDIT-GOES-TO-SOURCE-LAYER]. */ .fi.v8-forced-visible{position:relative;opacity:.72} .fi.v8-forced-visible::before{content:'';position:absolute;left:-6px;top:2px;bottom:2px; border-left:2px dashed var(--text3);border-radius:1px} /* Размер — из общей шкалы {11,13,15,17,19}: гейт справедливо поймал 10px как чужой. Единая шкала — это не придирка: разнобой размеров и есть та «неаккуратность», которую видно глазом раньше, чем осознаёшь причину. */ .fi.v8-forced-visible .k::after{content:' · скрыто вне настройки';font-size:11px;color:var(--text3);font-weight:400} .kpi .kv.grn{color:var(--green-fg)} .kpi .bar{height:4px;border-radius:999px;background:#eef1f5;margin-top:3px;overflow:hidden} .kpi .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3b82f6,#60a5fa)} .kpi .bar i.sup{background:linear-gradient(90deg,#d97706,#f59e0b)} /* липкая навигация по вкладкам */ .anchor-bar{display:flex;gap:2px;margin:0 -20px;padding:0 12px;border-top:1px solid var(--border); background:var(--surface);position:sticky;top:0;z-index:30;box-shadow:0 1px 0 var(--border); overflow-x:auto;scrollbar-width:none;align-items:center} .anchor-bar a{font-size:11px;font-weight:600;color:var(--text3);padding:8px 9px;border-bottom:2px solid transparent;white-space:nowrap;text-transform:uppercase;letter-spacing:.4px} .anchor-bar a:hover{color:var(--text)} .anchor-bar a.on{color:var(--accent);border-bottom-color:var(--accent)} .anchor-bar .he{margin-left:auto;font-size:11px;color:var(--text3);display:flex;gap:5px;align-items:center;cursor:pointer;white-space:nowrap;padding-right:6px} .cardb[id]{scroll-margin-top:44px} /* ── тело: центр + фиксированный док ── */ .body-scroll{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:12px} .body{min-width:0;display:flex;flex-direction:column;gap:12px;padding-bottom:24px} /* СКОЛЬКО ВКЛАДОК В РЯДУ — живая настройка владельца: число колонок держит --sec-cols, его выставляет applyCols() (JS), измерив реальную ширину тела. Настройка = МАКСИМУМ: на узком окне applyCols сам ужимает число колонок, чтобы не было горизонтального скролла. */ .grid3{display:grid;grid-template-columns:repeat(var(--sec-cols,2),minmax(0,1fr));gap:12px;align-items:start} @media (max-width:1180px){ .grid3{--sec-cols:1} } /* запасной путь, если JS не отработал */ .stack{display:flex;flex-direction:column;gap:12px;min-width:0} /* карточка-вкладка (плотность живой системы: шапка 7×11, строки 32px) */ .cardb{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 32px -16px rgba(15,23,42,.10)} .cardb .hd{display:flex;align-items:center;gap:7px;padding:7px 11px;border-bottom:1px solid var(--border); background:var(--surface2);cursor:pointer;user-select:none} .cardb .hd svg{width:13px;height:13px;color:var(--text3);flex-shrink:0} .cardb .hd h3{font-size:12px;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:.4px;color:var(--text2)} .cardb .hd .cnt{font-size:11px;color:var(--text3);font-weight:500} .cardb .hd::after{content:'▾';margin-left:auto;color:var(--text3);font-size:11px;transition:transform .15s} .cardb.collapsed .hd::after{transform:rotate(-90deg)} .cardb.collapsed .hd{border-bottom:0} .cardb.collapsed .bd{display:none} .cardb .hd .act{margin-left:6px;color:var(--text3);cursor:pointer;font-size:12px;min-height:22px;display:inline-flex;align-items:center} .cardb .hd .act:hover{color:var(--accent)} .cardb .bd{padding:0} /* поля: подпись 110-150 / значение справа; широкие вкладки — сетка колонок */ .fgrid{display:block} .cardb .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 22px;align-items:start;grid-auto-rows:min-content} .cardb .fgrid .fi.long{grid-column:1/-1} .fi{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,240px) minmax(0,1fr);align-items:center;gap:12px; padding:5px 12px;min-height:32px;border-bottom:1px solid var(--surface2);min-width:0} .fgrid > .fi:last-child{border-bottom:0} .fi:hover{background:var(--surface2)} .fi .k{font-size:11px;color:var(--text3);white-space:normal;line-height:1.2;overflow:visible} .fi .k .sig{margin-left:4px;color:var(--text3);font-size:11px} .fi .v{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;justify-self:stretch; width:100%;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:7px;padding:2px 7px;cursor:pointer} .fi .v:hover{background:var(--surface3)} .fi.ro .v{cursor:default} .fi.ro .v:hover{background:transparent} .fi.long{grid-template-columns:1fr;gap:1px;align-items:start} .fi.long .v{text-align:left;white-space:normal;justify-self:start;max-width:100%} .fi .v .pen{opacity:0;color:var(--border2);margin-left:4px} .fi:hover .v .pen{opacity:1} .fi .v:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .fi.empty .v{color:var(--text3);font-weight:400;font-style:italic;border:1px dashed var(--border2); border-radius:7px;padding:2px 9px;font-size:12px} .fi.empty .v:hover{color:var(--accent);border-color:var(--accent);background:transparent} .fi input,.fi select{font:600 13px/1.4 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;color:var(--text);height:28px; border:1px solid var(--blue-bd);border-radius:7px;padding:2px 8px;background:var(--surface); outline:2px solid var(--blue-bg);justify-self:end;min-width:0;width:min(100%,320px);text-align:right} .fi select{text-align:left} .fi.saved .v{animation:sf .8s} @keyframes sf{0%{background:var(--green-bg)}100%{background:transparent}} .presets{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;grid-column:1/-1} .presets .pr{font-size:11px;font-weight:600;border:1px solid var(--border);border-radius:999px;padding:2px 9px; background:var(--surface);cursor:pointer;color:var(--text2);min-height:22px} .presets .pr:hover{border-color:var(--accent);color:var(--accent)} /* таблица товаров */ table.items{width:auto;min-width:100%;border-collapse:collapse;font-size:12px} table.items th:first-child,table.items td.nm{position:sticky;left:0;z-index:1;background:var(--surface);max-width:420px} table.items thead th:first-child{background:var(--surface2)} table.items tfoot td:first-child{position:sticky;left:0;background:var(--surface2)} table.items th:last-child .th-rz{right:0;width:4px} #items-box,#rel-box{scrollbar-gutter:stable} table.items th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);text-align:left; padding:6px 10px;border-bottom:1px solid var(--border);background:var(--surface2)} table.items th.r,table.items td.r{text-align:right} table.items td{padding:5px 10px;border-bottom:1px solid var(--surface2);white-space:nowrap} table.items td.nm{white-space:normal;font-weight:600;min-width:200px} table.items td.r{font-variant-numeric:tabular-nums} table.items tfoot td{font-weight:700;border-top:1px solid var(--border);border-bottom:0;background:var(--surface2)} .check{font-size:11px;font-weight:600;border-radius:7px;padding:3px 10px;display:inline-flex;gap:6px;align-items:center} .check.ok{background:var(--green-bg);color:var(--green-fg)} .check.warn{background:var(--orange-bg);color:var(--orange-fg)} /* ── ПРАВЫЙ ДОК: на всю высоту экрана, ФИКСИРОВАН, композер ПРИЖАТ К НИЗУ ── */ /* док НИЖЕ шапки: колонка на всю оставшуюся высоту, до низа окна; фиксирован по построению */ .dock{width:clamp(320px,26vw,460px);flex-shrink:0;display:flex;flex-direction:column;min-height:0;height:100%; background:var(--surface);border-left:1px solid var(--border);overflow:hidden} .dock .dock-hd{padding:8px 14px 6px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:6px;flex-shrink:0} .dock .dock-hd b{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text3)} .dock .dock-hd .sub{font-size:11px;color:var(--text3)} .dock .sec-hd{display:flex;align-items:center;gap:7px;padding:8px 14px 4px;flex-shrink:0} .dock .sec-hd h3{font-size:12px;font-weight:700;margin:0} .dock .sec-hd .cnt{font-size:11px;color:var(--text3)} .dock .sec-hd .act{margin-left:auto;color:var(--text3);cursor:pointer;min-height:22px} .dock .sec-hd.hist{border-top:1px solid var(--border);margin-top:2px} .dock-tasks{flex-shrink:0;max-height:clamp(84px,26vh,240px);overflow-y:auto;overscroll-behavior:contain} .tasks-list{padding:0 14px 6px} .task{display:flex;align-items:flex-start;gap:9px;padding:6px 0;border-bottom:1px solid var(--surface2)} .task:last-child{border-bottom:0} .task .chk{width:18px;height:18px;border:1.5px solid var(--border2);border-radius:4px;margin-top:1px;flex-shrink:0;cursor:pointer; display:flex;align-items:center;justify-content:center;color:transparent;font-size:11px} .task.done .chk{background:var(--green);border-color:var(--green);color:#fff} .task.done .chk::after{content:'✓'} .task .tx .t{font-size:12px;font-weight:600} .task.done .tx .t{text-decoration:line-through;color:var(--text3);font-weight:500} .task .tx .d{font-size:11px;color:var(--text3)} .fchips{display:flex;gap:3px;background:var(--surface2);border-radius:8px;padding:2px;margin:4px 14px 2px;width:fit-content;flex-shrink:0} .fchips .fc{font-size:11px;padding:3px 9px;border-radius:6px;border:0;background:transparent;color:var(--text2);cursor:pointer;font-weight:600;min-height:24px} .fchips .fc.on{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.08)} /* лента: растягивается на всё оставшееся, свой скролл, прикол к низу как чат */ .act-scroll{flex:1;min-height:80px;overflow-y:auto;overscroll-behavior:contain;padding:2px 14px 8px; display:flex;flex-direction:column; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%)} .act-item{display:flex;gap:9px;padding:6px 0} .act-item .ic{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--surface); display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text3);font-size:11px} .act-item .bx{flex:1;min-width:0} .act-item .who{font-size:12px} .act-item .who b{font-weight:600} .act-item .who .tm{color:var(--text3);margin-left:6px;font-size:11px} .act-item .msg{font-size:12px;color:var(--text2);margin-top:1px;overflow-wrap:anywhere} .act-item .msg .fc-old{text-decoration:line-through;color:var(--text3)} .act-item .msg .fc-new{font-weight:600;color:var(--text)} /* композер ПРИЖАТ К НИЗУ дока (требование владельца) */ .compose{border-top:1px solid var(--border);padding:8px 12px 10px;flex-shrink:0;background:var(--surface);box-shadow:0 -8px 16px -14px rgba(15,23,42,.4)} .compose .row{display:flex;gap:6px;align-items:flex-end} .compose .row.kinds{margin-bottom:6px;align-items:center} .ckind.on{background:var(--blue-bg);border-color:var(--blue-bd);color:#1d4ed8} .compose textarea{flex:1;border:1px solid var(--border);border-radius:10px;background:var(--surface); min-height:34px;max-height:150px;resize:none;overflow-y:auto;padding:7px 11px;font:12px/1.45 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;color:var(--text)} .compose textarea:focus{outline:2px solid var(--blue-bd);border-color:var(--blue-bd)} .compose #send{height:34px;width:38px;justify-content:center;font-size:15px} @media (max-width:1345px){ .main{display:block} .body-scroll{overflow:visible;padding:12px} .dock{width:auto;height:auto;max-height:70vh;border:1px solid var(--border);border-radius:11px;margin:0 12px 12px} } details.fold{border-top:1px solid var(--border)} details.fold summary{font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;padding:6px 12px;list-style:none;display:flex;gap:6px;align-items:center;min-height:27px} details.fold summary::before{content:'▸';font-size:11px;transition:transform .15s} details.fold[open] summary::before{transform:rotate(90deg)} /* режим настройки вкладок: перестановка/удаление/добавление вкладок и полей */ .sec-tools{display:none;gap:4px;margin-left:8px} .sec-tools button{border:1px solid var(--border);background:var(--surface);border-radius:6px; font-size:11px;padding:1px 7px;cursor:pointer;color:var(--text2);min-height:22px} .sec-tools button:hover{border-color:var(--accent);color:var(--accent)} #add-sec{display:none;margin:0 0 12px;border:1px dashed var(--border2);background:transparent;border-radius:11px; padding:10px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;width:100%} #add-sec:hover{color:var(--accent);border-color:var(--accent)} .modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:90;display:none;align-items:center;justify-content:center} .modal-bg.on{display:flex} .modal{background:var(--surface);border-radius:14px;padding:18px 20px;width:430px;max-width:92vw;box-shadow:0 18px 50px rgba(0,0,0,.25)} .modal h4{margin:0 0 10px;font-size:15px} .modal input[type=text]{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 11px;font:13px Inter,sans-serif;margin-bottom:10px} .type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px} .type-grid button{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:7px 4px; font-size:11px;font-weight:600;color:var(--text2);cursor:pointer} .type-grid button.on,.type-grid button:hover{border-color:var(--accent);color:var(--accent);background:var(--blue-bg)} .modal .row{display:flex;gap:8px;justify-content:flex-end} .fi.hit{outline:2px solid var(--accent);outline-offset:-1px;border-radius:7px} /* ── ЖИВАЯ ПЛОСКОСТЬ: свободное перетаскивание вкладок и полей в режиме настройки ── */ .drag-h{cursor:grab;color:var(--text3);font-size:13px;padding:0 4px;user-select:none} .drag-h:active{cursor:grabbing} .cardb.dragging{opacity:.45;outline:2px solid var(--accent)} /* плейсхолдер МЕСТА вставки: горизонтальная полоса там, куда встанет вкладка/поле */ .drop-ph{border-top:3px solid var(--accent);border-radius:3px;margin:2px 0;box-shadow:0 0 6px rgba(59,130,246,.5);pointer-events:none} .drop-phf{pointer-events:none;background:var(--accent);border-radius:3px} .fgrid .drop-phf{height:3px;margin:2px 8px} .hfields .drop-phf{width:3px;align-self:stretch;min-height:34px} /* поля в режиме настройки таскаются, не редактируются */ .fi.dragging{opacity:.45;outline:2px solid var(--accent);border-radius:7px} /* пустая колонка: в настройке — пунктирная зона-приёмник, вне настройки — сетка схлопывается без дыры */ /* тонкая полоса-хинт сверху при входе в режим настройки */ .admin-hint{display:none;background:var(--blue-bg);color:var(--blue-fg);border-bottom:1px solid var(--blue-bd);font-size:11px;font-weight:600;text-align:center;padding:4px 10px;flex-shrink:0} /* регулятор «сколько вкладок в ряду» — сегментированный переключатель в панели настройки */ .cols-ctl{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .cols-ctl .lbl{font-size:11px;font-weight:600;color:var(--blue-fg)} .cols-seg{display:inline-flex;border:1px solid var(--blue-bd);border-radius:8px;overflow:hidden;background:var(--surface)} .cols-seg button{border:0;border-left:1px solid var(--blue-bd);background:transparent;color:var(--text2); font:600 11px/1 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;padding:0 9px;min-height:22px;cursor:pointer} .cols-seg button:first-child{border-left:0} .cols-seg button:hover{color:var(--accent)} .cols-seg button.on{background:var(--blue-bg);color:var(--accent)} .cols-eff{font-size:11px;font-weight:600;color:var(--text3)} /* крестик на чипе шапки: «убрать из шапки» — поле вернётся в свою вкладку */ .hf-x{display:none;position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:1px solid var(--border2);color:var(--text3);font-size:11px;align-items:center;justify-content:center;cursor:pointer;z-index:3;line-height:1} .hf-x:hover{color:var(--red);border-color:var(--red)} /* настраиваемые таблицы: попап колонок + ручки ресайза */ .tcols{margin-left:auto} .colpop{position:fixed;z-index:95;background:var(--surface);border:1px solid var(--border);border-radius:11px; box-shadow:0 12px 34px rgba(15,23,42,.18);padding:10px 13px;width:220px;display:flex;flex-direction:column;gap:2px} .colpop b{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:4px} .colpop label{display:flex;gap:7px;align-items:center;font-size:12px;padding:3px 2px;cursor:pointer;border-radius:6px} .colpop label:hover{background:var(--surface2)} .colpop .mut{color:var(--text3);font-size:11px} th{position:relative} .th-rz{position:absolute;right:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:2} .th-rz:hover{background:linear-gradient(90deg,transparent 3px,var(--accent) 3px,var(--accent) 5px,transparent 5px)} /* перетаскивание колонки за заголовок th */ table.items th[draggable]{cursor:grab} table.items th.col-drag{opacity:.45;background:var(--blue-bg)} table.items th.col-drop{box-shadow:inset 3px 0 0 var(--accent)} /* задачи — живые данные системы в новом дизайне */ .task{align-items:flex-start} .task.late{border-left:3px solid var(--red);padding-left:8px;margin-left:-11px;background:linear-gradient(90deg,var(--red-bg),transparent 60%);border-radius:0 8px 8px 0} .task .tx{min-width:0;flex:1} .task .tx .d{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .task .due.red{color:var(--red);font-weight:700} .task .ava-s{width:16px;height:16px;border-radius:50%;color:#fff;font-size:11px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .task-res{display:block;font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:100%;margin-top:1px;font-style:italic;cursor:pointer} .task-res:hover{color:var(--text2)} /* задачи внутри единой ленты (как амо): чекбокс вместо иконки, карточка-строка */ .act-item.task-line{border:1px solid var(--border);border-radius:10px;padding:7px 10px;margin:3px 0;background:var(--surface)} .act-item.task-line.late{border-left:3px solid var(--red);background:linear-gradient(90deg,var(--red-bg),var(--surface) 55%)} .act-item.task-line.done .who b{text-decoration:line-through;color:var(--text3);font-weight:500} .act-item.task-line .chk{width:18px;height:18px;border:1.5px solid var(--border2);border-radius:4px;margin-top:1px;flex-shrink:0; cursor:pointer;display:flex;align-items:center;justify-content:center;color:transparent;font-size:11px} .act-item.task-line.done .chk{background:var(--green);border-color:var(--green);color:#fff} .act-item.task-line.done .chk::after{content:'✓'} .fchips .cnt{font-size:11px;color:var(--text3)} /* поля ОСНОВНОГО в шапке: компактные чип-поля, кликом редактируются (тот же .fi-движок) */ .hfields{display:flex;gap:5px;margin:0 0 6px;flex-wrap:wrap;align-items:stretch} .hfields .fi{display:inline-flex;flex-direction:row;align-items:center;gap:6px;min-height:0; border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:4px 9px;min-width:0} .hfields .fi:hover{background:var(--surface)} .hfields .fi .k{font-size:11px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap} .hfields .fi .v{font-size:12px;font-weight:600;text-align:left;justify-self:start;max-width:220px;padding:0} .hfields .fi.empty .v{border:none;padding:0;font-size:11px} .hfields .fi.ro{background:var(--surface2);border-color:transparent} .hfields .fi input,.hfields .fi select{height:24px;width:150px;min-width:0;text-align:left;font-size:12px} /* D4: низкое окно/зум — шапка не съедает пол-экрана */ @media (max-height:820px){ .hero{padding:6px 20px 0} .title-row h1{font-size:17px} .kpi{padding:5px 14px 6px} .kpi .kv{font-size:15px} .kpi .bar{display:none} .pchips{margin:2px 0 6px} .hfields{margin:0 0 5px} } @media (max-height:720px){ .crumbs{display:none} .pchip .pl{display:none} .compose{padding:5px 10px 6px} .fchips{margin:2px 14px 0} } /* фильтр ленты классом (0 инлайн-стилей) */ #feed.f-task .act-item:not([data-kind="task"]), #feed.f-note .act-item:not([data-kind="note"]), #feed.f-change .act-item:not([data-kind="change"]){display:none} /* containment: медиана кадра 23→17мс, 43→58 FPS (замер аудита) */ .cardb{content-visibility:auto;contain-intrinsic-size:auto 320px} #feed .act-item{content-visibility:auto;contain-intrinsic-size:auto 56px} /* липкая шапка таблиц при длинных списках */ table.items thead th{position:sticky;top:0;z-index:2;background:var(--surface2)} table.items thead th:first-child{z-index:3} #items-box,#rel-box{max-height:70vh;overflow-y:auto} /* навигация: вкладки не прячутся за краем, поиск/тумблер закреплены справа */ .anchor-bar{scrollbar-width:thin} .anchor-bar::-webkit-scrollbar{height:6px} .anchor-bar .he{position:sticky;right:0;background:var(--surface);z-index:2} /* ── A11Y: контраст и фокус ── */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .cardb .hd h3,.cardb .hd .cnt,.cardb .hd .act,table.items th{color:#57606e} .btn.pri{background:#2563eb} .btn.pri:hover{background:#1d4ed8} .kpi .kv.red{color:var(--red-fg)} .pchip .pgo{color:var(--text3)} .chk,.task .chk,.task-line .chk{border-color:#9ca3af} .ava-s{color:#fff!important;border-radius:50%!important} .task .chk,.task-line .chk{width:20px;height:20px;padding:0} .colpop label{min-height:26px} .sec-tools button,.cardb .hd .act,.pact{min-height:24px} .th-rz{width:10px;right:-5px} .hfields .fi{align-self:start} .hfields .fi input,.hfields .fi select{width:150px;max-width:150px;min-width:150px} .hfields .fi.long{grid-template-columns:1fr} .hfields .fi .v,.hfields .fi.long .v{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fi input,.fi select{height:24px;min-width:min(180px,100%)} .fi textarea{font:500 13px/1.4 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;border:1px solid var(--blue-bd);border-radius:7px;padding:6px 9px} .hfields .fi .v{max-height:34px;overflow:hidden} .act-item .msg{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} /* аудит типографа 2026-08-14: tabular-nums на все числа-метаданные, единые пары */ .who .tm,.msg .due,.hd .cnt,.fchips .fc,.dock-hd .sub,.badge,.alert,.check,.crumbs b{font-variant-numeric:tabular-nums} .fchips .fc{white-space:nowrap} .title-row h1{line-height:1.2} .compose textarea{font-size:13px} .msg .due{font-size:11px} /* длина строки юртекстов ограничена читаемым пределом */ .fi.long .v{max-width:72ch} .kpi .kv.txt{font-size:15px;font-family:'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif} .kpi .kv .of{font-size:11px;color:var(--text3);font-weight:500;font-family:'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif} /* владелец: полоса вкладок не нужна; поиск поля и тумблер пустых переехали в титульную строку — полоса скрыта целиком (якоря остаются в DOM для навигации/скролл-спая) */ .anchor-bar a{display:none} .anchor-bar{display:none;padding:4px 12px;box-shadow:none;border-top:1px solid var(--border)} /* [BUG-3/П.5] поиск поля удалён совсем; «скрыть пустые» живёт в титульной строке рядом с «Настроить вкладки» */ .title-row .crumbs{margin-right:4px} .title-row .he{font-size:11px;color:var(--text3);display:flex;gap:5px;align-items:center;cursor:pointer;white-space:nowrap} /* [BUG-4] компакт-бейджи статусов у KPI/чипов: полный текст — в tooltip (title) */ .kbadge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;line-height:1; border-radius:999px;padding:2px 6px;margin-left:5px;vertical-align:middle;cursor:help;white-space:nowrap} .kbadge.ok{background:var(--green-bg);color:var(--green-fg)} .kbadge.warn{background:var(--orange-bg);color:var(--orange-fg)} .kbadge.red{background:var(--red-bg);color:var(--red-fg)} .kbadge.blu{background:var(--blue-bg);color:var(--blue-fg)} .pchips .kbadge{align-self:center;margin-left:0} .late-b{color:var(--red-fg);font-weight:700} /* [BUG-2] режим настройки: «✕» скрытия есть у КАЖДОГО поля тела и чипа шапки (виден на hover) */ .fi-x{display:none;position:absolute;top:50%;right:8px;transform:translateY(-50%);width:16px;height:16px; border-radius:50%;background:var(--surface);border:1px solid var(--border2);color:var(--text3); font-size:11px;align-items:center;justify-content:center;cursor:pointer;z-index:3;line-height:1} .fi-x:hover{color:var(--red);border-color:var(--red)} .hfields .fi .fi-x{top:-6px;right:-6px;transform:none} /* ── [layout_orientation] ОРИЕНТАЦИЯ ВКЛАДКИ: «вертикально» = колонка в сетке .grid3, «горизонтально» (.cardb.horiz) = вкладка во всю ширину тела, а её поля — ГАЗЕТНЫМИ колонками на ЕДИНОЙ сетке: порядок чтения сверху вниз внутри колонки, затем следующая колонка (grid-auto-flow:column; число строк --hrows считает applyHoriz() от числа полей и ширины); колонки равной ширины (grid-auto-columns:minmax(0,1fr)); поля одной строки делят ОБЩИЙ row-track сетки → подписи/значения соседних колонок сидят на одной горизонтали. INFO/SYSTEM — те же вкладки с «горизонтально» по умолчанию (один механизм, не вторая реализация). */ .cardb.horiz .bd > .fgrid{grid-template-columns:none;grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);grid-template-rows:repeat(var(--hrows,8),auto)} .cardb.horiz .bd > .fgrid > .fi.long{grid-column:auto} /* переключатель ориентации на заголовке вкладки (виден только в режиме настройки — внутри .sec-tools) */ .sec-tools [data-orient]{font-size:12px;line-height:1} .sec-tools [data-orient].h-on{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--accent)} /* ═══ слой: v8-css.txt ═══ */ /* ══════════════════════════════════════════════════════════════════════════════════════ v8 · ОБЩИЙ СЛОЙ ДВУХ ФИНАЛЬНЫХ МОКАПОВ (v8-order.html + v8-purchase.html). Файл ТОЛЬКО для v8: подключается ПОСЛЕ общего sales-css.txt, ничего в нём не правит. v7-17/18/19 этот файл не подключают → их вид не может измениться. ══════════════════════════════════════════════════════════════════════════════════════ */ /* ── компактная шапка: крошки в одной строке с заголовком, фактов-строка, прогресс ── */ .hero{padding:5px 20px 0} .title-row{margin:0 0 1px;gap:9px} .title-row .crumbs{align-self:center} /* крошка-родитель: ЕДИНСТВЕННЫЙ путь от закупки к её заказу — обычная ссылка, как в SLDS breadcrumbs */ .crumbs a.c-up{color:var(--accent);font-weight:600;text-decoration:none} .crumbs a.c-up:hover{text-decoration:underline} .crumbs .c-top{display:flex;gap:6px;color:var(--text3)} .crumbs .cpos{color:var(--text3);cursor:help} .factbar{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text3); white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin:1px 0 2px} .factbar::-webkit-scrollbar{height:0} .factbar b{color:var(--text2);font-weight:600} .factbar .sep{color:var(--border2)} .prog{height:6px;border-radius:999px;background:var(--surface3);overflow:hidden} .prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#60a5fa)} .prog-cap{font-size:11px;color:var(--text3);margin:2px 0 3px} /* строка условий сделки (инкотермс/поставка/оплата) — под чипами, одной строкой */ .terms{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3); white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 5px} .terms::-webkit-scrollbar{height:0} .terms .tl{text-transform:uppercase;font-size:11px;letter-spacing:.4px} .terms b{color:var(--text);font-weight:600} .terms .sep{color:var(--border2)} .tset{border:1px dashed var(--border2);border-radius:7px;background:transparent;color:var(--text3); font:600 11px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;padding:1px 8px;cursor:pointer;min-height:20px} .tset:hover{border-color:var(--accent);color:var(--accent)} .terms a.edit{font-size:11px;font-weight:600} /* ── денежная полоса хаба: ровно 4 числа, тот же вид, что у KPI ── */ /* внутри карточки отрицательные поля общей .kpis не нужны — первое число резалось слева */ #sec-money .kpis{margin:0;grid-template-columns:repeat(4,minmax(0,1fr));border-top:0} #sec-money .kpi{padding:7px 14px 8px} #sec-money .kpi .kv{font-size:17px} .moneybar{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.05)} .moneybar .kpis{margin:0;border-top:0;grid-template-columns:repeat(4,minmax(0,1fr))} .moneybar .kpi{padding:7px 14px 8px} .moneybar .kpi .kv{font-size:17px} .money-note{font-size:11px;color:var(--text3);padding:0 14px 7px} .money-text{padding:12px 14px;font-size:12px;color:var(--orange-fg);background:var(--orange-bg);font-weight:600} /* ── красный блок «не разнесено» ── */ .redbox{background:var(--surface);border:1px solid var(--red);border-radius:12px;overflow:hidden} .redbox .rb-hd{display:flex;align-items:baseline;gap:8px;padding:9px 13px 1px;flex-wrap:wrap} .redbox .rb-t{font-size:13px;font-weight:700;color:var(--red-fg)} .redbox .rb-s{font-size:11px;color:var(--text3)} .redbox .rb-d{font-size:11px;color:var(--text3);padding:0 13px 6px} .ur{display:flex;align-items:center;gap:10px;padding:5px 13px;border-top:1px solid var(--surface2);font-size:12px} .ur:hover{background:var(--surface2)} .ur.all{background:var(--surface2);font-weight:600} .ur input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;margin:0} .ur .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ur .q{color:var(--text3);font-variant-numeric:tabular-nums;min-width:26px;text-align:right} .ur .sum{font-weight:700;font-variant-numeric:tabular-nums;min-width:104px;text-align:right} .selbar{display:none;align-items:center;gap:8px;padding:8px 13px;border-top:1px solid var(--border); background:var(--blue-bg);flex-wrap:wrap} .selbar.on{display:flex} .selbar .cnt2{font-size:12px;font-weight:700;color:var(--blue-fg)} .selbar input[type=text]{border:1px solid var(--blue-bd);border-radius:8px;padding:4px 9px;min-height:26px; font:12px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;background:var(--surface);color:var(--text);width:250px;max-width:100%} .splitbar{display:flex;align-items:center;gap:9px;padding:8px 13px;border-top:1px solid var(--border);flex-wrap:wrap} .splitbar .hint{font-size:11px;color:var(--text3)} /* ── [SPLIT-COMMAND-LIVES-WITH-DATA] форма разбиения по количеству: ОДНО поле и живой остаток ── Раскрывается ПОД полосой выбора, в той же карточке, где стоит строка. Отдельным окном её делать нельзя: боковая панель закрывает предыдущую, и человек теряет из виду сам состав, ради которого всё затевалось (тот же довод, что у формы отделения на экране заказа). */ .qsplit{padding:9px 13px;border-top:1px solid var(--border);background:var(--surface2)} .qsplit[hidden]{display:none} .qsplit .qs-t{font-size:13px;font-weight:600;margin-bottom:6px} /* шкала {11,13,15,17,19}: 12px вне её */ .qsplit .qs-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .qsplit .qs-l{font-size:11px;color:var(--text3)} .qsplit .qs-i{border:1px solid var(--blue-bd);border-radius:8px;padding:4px 9px;min-height:26px;width:110px; text-align:right;font:12px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif; font-variant-numeric:tabular-nums;background:var(--surface);color:var(--text)} .qsplit .qs-u{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums} .qsplit .qs-left{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums} .qsplit .qs-left.bad{color:var(--red-fg)} .qsplit .qs-act{display:flex;gap:8px;margin-top:8px} /* ── таблицы v8: чекбоксы строк, группы по этапам, сортировка, знак маржи ── */ table.items th.selc,table.items td.selc{width:38px;padding:5px 4px 5px 12px;text-align:center} table.items td.selc input,table.items th.selc input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);margin:0} table.items tr.sel td{background:var(--blue-bg)} table.items tr.grp td{background:var(--surface3);color:var(--text3);font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.5px;padding:4px 12px;white-space:nowrap} table.items td.neg{color:var(--red-fg);font-weight:700} table.items td.pos{color:var(--green-fg);font-weight:600} table.items td.mut{color:var(--text3)} table.items td.code{font-family:var(--mono);font-weight:700;white-space:nowrap} table.items th.srt{cursor:pointer} /* ручка ресайза ВНУТРИ своей ячейки: при right:-5px её перекрывал следующий th и потянуть было нельзя */ table.items th .th-rz{right:0;width:12px;z-index:5} table.items th .sar{font-size:11px;margin-left:4px;color:var(--accent)} .sdot{display:inline-block;width:3px;height:12px;border-radius:2px;margin-right:8px;vertical-align:-1px} .tbl-cap{font-size:11px;color:var(--text3);padding:7px 14px} .tbl-cap b{color:var(--text2)} /* ── сворачиваемый блок условий оплаты ── */ details.terms-fold{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden} details.terms-fold > summary{list-style:none;cursor:pointer;padding:9px 13px;font-size:12px;font-weight:700; text-transform:uppercase;letter-spacing:.4px;color:var(--text2);display:flex;gap:7px;align-items:center;background:var(--surface2)} details.terms-fold > summary::-webkit-details-marker{display:none} details.terms-fold > summary::before{content:'▸';font-size:11px;color:var(--text3);transition:transform .15s} details.terms-fold[open] > summary::before{transform:rotate(90deg)} .terms-body{padding:10px 14px;font-size:12px;color:var(--text2);line-height:1.6} .terms-body .row2{display:flex;gap:10px;align-items:baseline;padding:3px 0;border-bottom:1px solid var(--surface2);flex-wrap:wrap} .terms-body .row2:last-child{border-bottom:0} .terms-body .lb{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);min-width:150px} /* ── плашка RBAC ── */ .rbac{display:flex;align-items:center;gap:9px;background:var(--surface2);border:1px dashed var(--border2); border-radius:11px;padding:9px 13px;font-size:12px;color:var(--text3)} .rbac b{color:var(--text2)} /* ── меню «⚡ Действия» (D4) ── */ .menu{position:fixed;z-index:96;background:var(--surface);border:1px solid var(--border);border-radius:11px; box-shadow:0 12px 34px rgba(15,23,42,.18);padding:5px;min-width:250px;display:flex;flex-direction:column;gap:1px} .menu button{border:0;background:transparent;text-align:left;cursor:pointer;color:var(--text2); font:600 12px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;padding:7px 9px;border-radius:8px; display:flex;gap:8px;align-items:center;min-height:28px} .menu button:hover{background:var(--surface2);color:var(--text)} .menu button.danger{color:var(--red-fg)} .menu button.danger:hover{background:var(--red-bg)} .menu .sep{height:1px;background:var(--border);margin:4px 2px} .menu .mt{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);padding:5px 9px 2px;font-weight:700} /* ── D1: пул скрытых вкладок + инлайн-подтверждение вместо confirm (D6) ── */ .tabs-pool{display:none;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--text3); border:1px dashed var(--border2);border-radius:11px;padding:7px 11px;background:var(--surface)} .tabs-pool.on{display:flex} .tabs-pool .tp-l{font-weight:700;text-transform:uppercase;letter-spacing:.4px} .tabs-pool button{border:1px solid var(--border);background:var(--surface);border-radius:999px; font:700 11px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;color:var(--text2);padding:3px 11px;cursor:pointer;min-height:24px} .tabs-pool button:hover{border-color:var(--accent);color:var(--accent);background:var(--blue-bg)} .hd-confirm{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:11px;font-weight:700;color:var(--red-fg)} .hd-confirm button{border:1px solid var(--border);background:var(--surface);border-radius:7px; font:700 11px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;padding:2px 9px;cursor:pointer;min-height:22px;color:var(--text2)} .hd-confirm button.yes{background:var(--red-bg);border-color:var(--red-bg);color:var(--red-fg)} .hd-confirm button:hover{border-color:var(--accent)} /* ── D15: чипы связей настраиваются как поля (✕ + перетаскивание) ── */ .pchip-x{display:none;position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%; background:var(--surface);border:1px solid var(--border2);color:var(--text3);font-size:11px; align-items:center;justify-content:center;cursor:pointer;z-index:3;line-height:1} .pchip-x:hover{color:var(--red);border-color:var(--red)} .pchip.dragging{opacity:.45;outline:2px solid var(--accent)} .pchips .drop-phc{width:3px;align-self:stretch;min-height:30px;background:var(--accent);border-radius:3px;pointer-events:none} .chip-add{display:none;border:1px dashed var(--border2);background:transparent;border-radius:10px; font:600 11px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;color:var(--text3);padding:4px 10px;cursor:pointer;min-height:26px} .chip-add:hover{border-color:var(--accent);color:var(--accent)} /* ── D2: лента открывается снизу, кнопка возврата к новым ── */ .dock{position:relative} .to-new{position:absolute;right:16px;bottom:96px;z-index:5;display:none;align-items:center;gap:6px; background:var(--pri-bg);color:#fff;border:0;border-radius:999px;padding:5px 12px;cursor:pointer; font:700 11px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;box-shadow:0 6px 18px rgba(37,99,235,.35);min-height:26px} .to-new.on{display:inline-flex} .act-item.fresh{animation:v8fresh 1.6s ease-out} @keyframes v8fresh{0%{background:var(--blue-bg)}100%{background:transparent}} /* ── 5a: полоса фильтров дока — ОДНА строка, ≤28px, без переноса ── */ .dock .fchips{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;width:auto;margin:4px 10px 2px; padding:2px;max-height:26px;overflow:hidden} .dock .fchips .fc{font-size:11px;font-weight:700;padding:2px 6px;min-height:20px;line-height:16px; display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0} .dock .fchips .fc i{font-style:normal;font-size:11px;font-weight:700;color:var(--text3); background:var(--surface3);border-radius:5px;padding:0 4px;line-height:14px} .dock .fchips .fc.on i{background:var(--blue-bg);color:var(--blue-fg)} .dock .fchips .fsum{margin-left:auto;font-size:11px;color:var(--text3);white-space:nowrap; cursor:help;font-variant-numeric:tabular-nums;padding-left:6px;min-width:0;flex-shrink:0} .dock .fchips .fsum b{color:var(--red-fg);font-weight:700} .dock .fchips.tight{gap:1px} .dock .fchips.tight .fc{padding:2px 4px;gap:3px} .dock .fchips.tight .fc i{padding:0 3px} .dock .fchips.tight .fsum{padding-left:4px} /* подпись прогресса на узком окне переезжает в строку фактов (шапка не растёт) */ .only-narrow{display:none} /* просроченный срок в ленте — красным (в общем CSS правило было только для старого .task) */ .act-item.task-line .due.red{color:var(--red-fg);font-weight:700} /* ── D13: композер растёт до 5 строк ── */ .compose textarea{max-height:112px} /* ── горизонтальные вкладки в 4 колонки: подпись сверху, значение под ней (эталон владельца) ── */ .cardb.horiz .bd > .fgrid{gap:0 18px} .cardb.horiz .bd > .fgrid > .fi{grid-template-columns:minmax(0,1fr);gap:0;align-items:start; padding:4px 12px 5px;min-height:0} .cardb.horiz .bd > .fgrid > .fi.long{grid-column:auto} .cardb.horiz .fi .k{font-size:11px;text-transform:uppercase;letter-spacing:.4px;line-height:1.35} .cardb.horiz .fi .v{text-align:left;justify-self:start;width:100%;max-width:100%;white-space:normal; overflow:visible;text-overflow:clip;min-height:20px;padding:1px 5px;margin-left:-5px;line-height:1.35} .cardb.horiz .fi.empty .v{display:inline-block;width:auto;margin-left:0;padding:1px 8px} .cardb.horiz .fi input,.cardb.horiz .fi select{justify-self:start;text-align:left} .cardb.horiz .fi .inh{font-size:11px;font-weight:700;color:var(--blue-fg);background:var(--blue-bg); border-radius:5px;padding:0 4px;margin-left:5px;cursor:help;letter-spacing:0;text-transform:none} /* ── D7: на узком окне чипы одной строкой, док остаётся закреплённым справа, шапка ужимается (была 29-31%, стала ~19-20%) ── */ @media (max-width:1400px){ .pchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:1px;margin:2px 0 4px} .pchips::-webkit-scrollbar{height:0} .pchip,.chip-add{flex-shrink:0} .pchip{padding:2px 8px} .pchip .pa{width:22px;height:22px;font-size:11px} .pchip .pv{max-width:170px} .hero{padding:4px 14px 0} .title-row h1{font-size:17px} /* узко — крошки уступают место названию; но крошка С РОДИТЕЛЕМ не исчезает: это единственный путь наверх. Усечение как в SLDS: верхние уровни скрываются, остаются родитель и текущая запись. */ .title-row .crumbs{display:none} .title-row .crumbs.has-parent{display:flex} .crumbs.has-parent .c-top{display:none} .kpis{margin:0 -14px} .kpi{padding:3px 12px 5px} .kpi .kv{font-size:15px} .moneybar .kpi .kv{font-size:15px} .terms{margin-bottom:4px} .factbar{margin:0 0 2px} .prog-cap{display:none} .only-narrow{display:inline} /* заголовочная строка обязана оставаться ОДНОЙ строкой: демо-селектор ужимается */ .demo label{display:none} .demo select{max-width:170px} .title-row .btn{padding:5px 10px} .title-row .he{font-size:11px} } /* отмена «блочного потока» общего CSS: док не уезжает вниз, шапка не растёт */ @media (max-width:1345px){ .main{display:flex} .body-scroll{overflow-y:auto;padding:12px} .dock{width:clamp(300px,26vw,400px);height:100%;max-height:none;margin:0;border:0; border-left:1px solid var(--border);border-radius:0} } /* .sibs (полоса-переключатель соседних закупок) и .idbar (полоса идентичности) удалены вместе со своей разметкой: семья заказа перечисляется таблицей «Связанные сделки», связь с родителем — крошкой. */ /* ── демо-переключатель состояний (только мокап) ── */ .demo{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3)} .demo select{border:1px solid var(--border);border-radius:7px;padding:2px 6px;min-height:24px; font:600 11px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;background:var(--surface);color:var(--text2)} body.demo-empty #sec-money,body.demo-empty #sec-unalloc,body.demo-empty #sec-parts, body.demo-empty #sec-terms,body.demo-empty #sec-rbac,body.demo-empty .factbar, /* ── мастер трёх шагов (перенесён из v7-19 без изменений) ── */ .wz-card{border-color:var(--blue-bd);box-shadow:0 2px 10px rgba(59,130,246,.10)} .wz-card > .hd{background:var(--blue-bg)} .wz-card > .hd h3,.wz-card > .hd .cnt{color:var(--blue-fg)} .wz{display:flex;align-items:stretch;gap:8px;padding:12px 14px;flex-wrap:wrap} .wz-arr{align-self:center;color:var(--border2);font-size:15px;flex-shrink:0} .wz-step{flex:1 1 260px;min-width:250px;display:flex;gap:10px;border:1px solid var(--border); border-radius:11px;padding:10px 12px;background:var(--surface)} .wz-step .wz-n{width:26px;height:26px;border-radius:50%;background:var(--surface3);color:var(--text3); font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .wz-step .wz-b{min-width:0;flex:1} .wz-step .wz-t{font-size:13px;font-weight:700} .wz-step .wz-d{font-size:11px;color:var(--text3);margin-top:2px;line-height:1.35} .wz-step .wz-act{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap} .wz-step .wz-lb{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px} .wz-step select{border:1px solid var(--border);border-radius:7px;padding:4px 7px; font:12px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif; background:var(--surface);color:var(--text);max-width:210px;min-height:26px} .wz-step.active{border-color:var(--accent);background:var(--blue-bg);box-shadow:0 0 0 3px rgba(59,130,246,.12)} .wz-step.active .wz-n{background:var(--accent);color:#fff} .wz-step.active .wz-d{color:var(--blue-fg)} .wz-step.done{border-color:#bbf7d0;background:#f0fdf4} .wz-step.done .wz-n{background:var(--green);color:#fff;font-size:0} .wz-step.done .wz-n::after{content:'✓';font-size:13px} .wz-step.locked{opacity:.62;background:var(--surface2)} .wz-step.locked .wz-t{color:var(--text3)} .wz-step.locked .wz-act{display:none} .btn:disabled,.wz-step select:disabled{opacity:.5;cursor:not-allowed} .empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px;text-align:center} .empty-state .es-ic{width:38px;height:38px;border-radius:11px;background:var(--surface2);color:var(--text3); display:flex;align-items:center;justify-content:center;font-size:17px} .empty-state .es-t{font-size:13px;font-weight:700} .empty-state .es-d{font-size:12px;color:var(--text3);max-width:520px;line-height:1.45} .empty-state .es-act{display:flex;gap:7px;margin-top:3px;flex-wrap:wrap;justify-content:center} .pv-rule{font-size:11px;color:var(--text3);padding:8px 14px;border-bottom:1px solid var(--border);line-height:1.5} .pv-rule b{color:var(--text2)} .pv-foot{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid var(--border);flex-wrap:wrap} .pv-foot .sp{flex:1} table.items select.supsel{width:100%;max-width:100%;border:1px solid var(--border);border-radius:7px; padding:2px 5px;font:12px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif; background:var(--surface);color:var(--text);min-height:24px} table.items select.supsel.none{border-style:dashed;border-color:var(--border2);color:var(--text3)} /* ══ ЗАДАЧИ И ПРИМЕЧАНИЯ: те же настройки, что в живой системе ══ */ /* компактная форма задачи в доке (не модалка): поля в две колонки */ .tform{display:none;border:1px solid var(--blue-bd);background:var(--blue-bg);border-radius:10px; padding:7px 9px;margin-bottom:6px} .tform .tf-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 9px} .tform .tf-f{display:flex;flex-direction:column;gap:2px;min-width:0} .tform .tf-f.wide{grid-column:1/-1} .tform label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);font-weight:700} .tform select,.tform input{border:1px solid var(--border);border-radius:7px;background:var(--surface); color:var(--text);min-height:24px;padding:2px 6px;min-width:0;width:100%; font:600 11px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif} .tform .tf-quick{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap} .tform .tf-quick button{border:1px solid var(--border);background:var(--surface);border-radius:999px; font:700 10px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif; color:var(--text2);padding:2px 8px;cursor:pointer;min-height:20px} .tform .tf-quick button:hover,.tform .tf-quick button.on{border-color:var(--accent);color:var(--accent);background:var(--surface)} .tform .tf-note{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.4} .tform .tdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0} /* тип задачи в ленте */ .act-item.task-line .ttype{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700; border-radius:999px;padding:1px 7px;margin-right:6px;background:var(--surface2);color:var(--text2);white-space:nowrap} .act-item.task-line .tteam{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700; border-radius:999px;padding:1px 7px;background:var(--orange-bg);color:var(--orange-fg);margin-left:5px} .act-item.task-line .claim{border:1px solid var(--border);background:var(--surface);border-radius:7px; font:700 10px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif; padding:1px 8px;cursor:pointer;color:var(--text2);margin-left:6px;min-height:20px} .act-item.task-line .claim:hover{border-color:var(--accent);color:var(--accent)} .act-item.task-line .tdur{font-size:11px;color:var(--text3);margin-left:5px} /* форма результата при закрытии задачи (результат живёт ВНУТРИ карточки задачи) */ .tres{display:flex;flex-direction:column;gap:5px;margin-top:6px;border-top:1px dashed var(--border);padding-top:6px} .tres textarea{border:1px solid var(--blue-bd);border-radius:8px;padding:5px 8px;resize:vertical;min-height:42px; font:12px/1.4 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;color:var(--text);background:var(--surface)} .tres .rw{display:flex;gap:6px;align-items:center} .tres .err{font-size:11px;color:var(--red-fg);font-weight:700;display:none} .tres.bad .err{display:block} .tres.bad textarea{border-color:var(--red)} /* шаблоны примечаний и @-упоминания */ .tplpop{position:fixed;z-index:97;background:var(--surface);border:1px solid var(--border);border-radius:12px; box-shadow:0 14px 40px rgba(15,23,42,.2);width:360px;max-width:94vw;display:flex;flex-direction:column;overflow:hidden} .tplpop .tp-s{padding:8px;border-bottom:1px solid var(--border)} .tplpop .tp-s input{width:100%;border:1px solid var(--border);border-radius:8px;padding:5px 9px;min-height:26px; font:12px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;color:var(--text);background:var(--surface)} .tplpop .tp-c{display:flex;gap:3px;padding:6px 8px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none} .tplpop .tp-c button{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:2px 8px; font:700 10px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;color:var(--text2);cursor:pointer;white-space:nowrap;min-height:20px} .tplpop .tp-c button.on{background:var(--blue-bg);border-color:var(--accent);color:var(--blue-fg)} .tplpop .tp-l{max-height:270px;overflow-y:auto;padding:4px} .tplpop .tp-i{padding:6px 8px;border-radius:8px;cursor:pointer} .tplpop .tp-i:hover{background:var(--surface2)} .tplpop .tp-i b{display:block;font-size:12px;font-weight:700} .tplpop .tp-i span{display:block;font-size:11px;color:var(--text3);margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tplpop .tp-i i{font-style:normal;font-size:11px;font-weight:700;color:var(--blue-fg);background:var(--blue-bg);border-radius:5px;padding:0 4px;margin-left:5px} .tplpop .tp-e{padding:14px;font-size:12px;color:var(--text3);text-align:center} .mentions{position:fixed;z-index:98;background:var(--surface);border:1px solid var(--border);border-radius:10px; box-shadow:0 12px 30px rgba(15,23,42,.18);width:220px;max-height:210px;overflow-y:auto;padding:4px;display:none} .mentions.on{display:block} .mentions button{display:flex;width:100%;gap:7px;align-items:center;border:0;background:transparent;cursor:pointer; border-radius:7px;padding:5px 7px;font:600 12px/1.3 'SofconManat','InterVariable','Inter-fallback',-apple-system,sans-serif;color:var(--text2);text-align:left} .mentions button:hover,.mentions button.on{background:var(--blue-bg);color:var(--blue-fg)} .msg .mn{color:var(--accent);font-weight:700} /* низкое окно: шапка не съедает экран (дополняет общие правила) */ @media (max-height:820px){ .moneybar .kpi{padding:5px 14px 6px} .moneybar .kpi .kv{font-size:15px} .prog-cap{margin:1px 0 2px} } /* ══════════════════════════════════════════════════════════════════════════════════════ v9 · ДИЗАЙН-СИСТЕМА И ШАПКА (по итогам трёх аудитов). Порядок: токены → шапка (сворачивание, якоря, деньги) → таблицы → мелочи. ══════════════════════════════════════════════════════════════════════════════════════ */ /* ── 1. ТОКЕНЫ. Ни одного литерального цвета вне этого блока: всё, что рисуется, берёт var(). Акцент поднят #3b82f6 → #2563eb (было 3.68:1 — кнопка не проходила по контрасту, стало 5.17:1), --text3 #6b7280 → #5f6773 (на самом тёмном фоне --surface3 было 4.05:1, стало 4.79:1), --border2 больше НИКОГДА не используется как цвет текста (разделитель «·» давал 1.47:1). ── */ :root{ --accent:#2563eb; --pri-bg:#2563eb; --pri-bg-h:#1d4ed8; --text3:#5f6773; --border2:#b7bec9; --violet:#6d28d9; --violet-bg:#ede9fe; --pink:#be185d; --teal:#0e7490; --lime:#4d7c0f; --amber:#b45309; --indigo:#4338ca; --cyan:#0e7490; --grey-fg:#3c434d; /* цвет-метка поставщика: закреплён за поставщиком так же, как буква кода */ --sup-a:#1d4ed8; --sup-b:#c2410c; --sup-c:#0f766e; --sup-d:#6d28d9; --sup-e:#be185d; --sup-f:#0e7490; --sup-g:#4d7c0f; --sup-h:#b45309; --sup-i:#4338ca; /* типографическая шкала — в rem, чтобы настройка размера шрифта в браузере работала */ --fs-1:.6875rem; --fs-2:.8125rem; --fs-3:.9375rem; --fs-4:1.0625rem; --fs-5:1.1875rem; --lh-1:1rem; --lh-2:1.25rem; --lh-3:1.5rem; /* шкала отступов и радиусов */ --s-0:2px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --r-c:6px; --r-b:10px; --r-p:999px; --sh-card:0 1px 2px rgba(15,23,42,.06); --sh-pop:0 12px 32px rgba(15,23,42,.18); } /* шрифт больше не прибит к html: 100% = размер, выбранный ЧЕЛОВЕКОМ в браузере */ /* ── 2. ШАПКА ────────────────────────────────────────────────────────────────────────── */ /* заголовочная строка — РОВНО одна строка на всех вьюпортах: «Действия» не прыгают вниз */ .title-row{flex-wrap:nowrap;min-height:32px} .title-row h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto} .title-row h1 .h1-dim{color:var(--text3);font-weight:400;padding:0 var(--s-0)} .title-row .crumbs{flex-shrink:0;white-space:nowrap} .title-row .badge,.title-row .he,.title-row .btn,.title-row .demo{flex-shrink:0} .title-row .demo select{max-width:190px} /* сворачивание шапки: прячется всё «контекстное», остаётся строка заголовка */ .hero-sub{display:block} /* ОДНА полоса на замену свёрнутому контексту: слева якоря разделов, справа прибитые деньги. Две отдельные строки съедали бы 64px — ровно то место, что освободило сворачивание. */ .hero-min{display:none} .hero .anchor-bar{display:none} .anchor-bar a.on{color:var(--accent);border-bottom-color:var(--accent)} /* прибитая денежная полоса: появляется вместе со сворачиванием, одинаково на обоих экранах */ .money-mini{display:none;gap:var(--s-3);align-items:center;overflow-x:auto;scrollbar-width:none; white-space:nowrap;margin-left:auto;padding-left:var(--s-3);min-width:0} .money-mini::-webkit-scrollbar{height:0} .money-mini .mm{display:inline-flex;gap:var(--s-1);align-items:baseline;flex-shrink:0;cursor:help} .money-mini .mm i{font-style:normal;color:var(--text3)} .money-mini .mm b{font-variant-numeric:tabular-nums;color:var(--text)} .money-mini .mm b.red{color:var(--red-fg)} .money-mini .mm b.grn{color:var(--green-fg)} /* строка фактов: имя сделки мелким, красная пилюля «не разнесено» ведёт к красному блоку */ .factbar .dn{color:var(--text2);font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:44ch} .factbar .sep,.terms .sep{color:var(--text3)} .pill-red{border:1px solid var(--red);background:var(--red-bg);color:var(--red-fg); border-radius:var(--r-p);padding:var(--s-0) var(--s-2);cursor:pointer;font:inherit;font-weight:700; display:inline-flex;align-items:center;gap:var(--s-1);min-height:20px} .pill-red:hover{background:var(--red);color:var(--surface)} .pill-red b{font-variant-numeric:tabular-nums} .redbox.flash{animation:v8flash 1.2s ease-out} @keyframes v8flash{0%{box-shadow:0 0 0 4px var(--red-bg)}100%{box-shadow:0 0 0 0 transparent}} /* прогресс — два отрезка: сделано и ОСТАТОК красным (по строкам, не по деньгам) */ .prog{display:flex} .prog i{display:block;height:100%;border-radius:0} .prog i.done{background:var(--accent);border-radius:var(--r-p) 0 0 var(--r-p)} .prog i.left{background:var(--red);border-radius:0 var(--r-p) var(--r-p) 0} .prog i.left[style*="width:0"]{display:none} /* ── 3. ТАБЛИЦЫ ──────────────────────────────────────────────────────────────────────── */ .tw{position:relative} .tw .tscroll{overflow-x:auto;max-height:70vh;overflow-y:auto} .tw .tshade{display:none;position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;z-index:4; background:linear-gradient(90deg,rgba(15,23,42,0),rgba(15,23,42,.13))} .tw.more .tshade{display:block} /* ячейка НИКОГДА не вылезает в соседнюю колонку: обрезка в одну строку + полный текст в title */ table.items td{vertical-align:top;overflow:hidden} table.items td .c1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; overflow-wrap:anywhere;max-width:100%} table.items tr.exp td .c1{white-space:normal;overflow:visible;text-overflow:clip} table.items td.nm{overflow-wrap:anywhere} /* строка отзывается на наведение; кликабельная строка показывает, что она ссылка */ table.items tbody tr:not(.grp){cursor:pointer} table.items tbody tr:not(.grp):hover > td{background:var(--surface2)} table.items tbody tr.clk:hover > td{background:var(--blue-bg)} table.items tbody tr.clk td.code a.cl,table.items tbody tr.clk td:first-of-type a.cl{color:var(--accent)} table.items tbody tr.clk:hover td .cl{text-decoration:underline} table.items td a.cl{color:var(--accent);font:inherit} /* липкие левые колонки */ table.items td.stk,table.items th.stk{position:sticky;z-index:3;background:var(--surface)} table.items thead th.stk{z-index:6} table.items tfoot td.stk{z-index:5;background:var(--surface2)} table.items .stk0{left:0} table.items .stk1{left:0} table.items .stk1.off{left:38px} .tw.scrolled table.items .stk1{box-shadow:6px 0 8px -6px rgba(15,23,42,.28)} table.items tbody tr:hover > td.stk{background:var(--surface2)} table.items tbody tr.clk:hover > td.stk{background:var(--blue-bg)} table.items tbody tr.sel > td.stk{background:var(--blue-bg)} table.items thead th.stk{background:var(--surface2)} table.items th.srt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} table.items th .sar{color:var(--accent);font-size:var(--fs-1)} /* деньги, количества и коды — только табличные цифры */ table.items td.r,table.items th.r,table.items tfoot td,.crumbs b,.crumbs .cpos,.ur .sum,.ur .q, .money-mini .mm b,.kpi .kv{font-variant-numeric:tabular-nums} /* ── 4. ФОРМЫ И МЕЛОЧИ ───────────────────────────────────────────────────────────────── */ /* нативный чекбокс заменён своим: одинаковый во всех браузерах, попадание 16px */ .cbx{display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer;position:relative} .cbx input{position:absolute;opacity:0;width:16px;height:16px;margin:0;cursor:pointer} .cbx .bx{width:16px;height:16px;border:1px solid var(--border2);border-radius:var(--r-c); background:var(--surface);display:inline-block;position:relative} .cbx input:checked + .bx{background:var(--accent);border-color:var(--accent)} .cbx input:checked + .bx::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)} .cbx input:focus-visible + .bx{outline:2px solid var(--accent);outline-offset:2px} /* пояснение дизайнера больше не абзац в вёрстке, а подсказка у заголовка */ .hint-i{border:0;background:transparent;color:var(--text3);cursor:help;padding:0 var(--s-1); display:inline-flex;align-items:center;min-height:20px} .hint-i:hover{color:var(--accent)} .ic14{width:14px;height:14px;flex-shrink:0} .btn .ic14,.menu .mi .ic14,.ckind .ic14{margin-right:var(--s-0)} .menu .mi{display:inline-flex;color:var(--text3)} .pchip .pa.none{background:var(--surface3);color:var(--text3)} .pchip .pv.none{color:var(--text3);font-style:italic} .pchip .pact .ic14,.pchip .pgo .ic14{width:13px;height:13px} .ava-s.av-teal{background:var(--teal)} .ava-s.av-violet{background:var(--violet)} .ava-s.av-pink{background:var(--pink)} .pa.av-teal{background:var(--teal)} .pa.av-pink{background:var(--pink)} /* тип задачи: нейтральный чип + цветная точка (новой заливки палитра не получает) */ .act-item.task-line .ttype{background:var(--surface2);color:var(--text2)} .act-item.task-line .ttype .tdot{width:6px;height:6px;border-radius:var(--r-p);display:inline-block;flex-shrink:0} .tdot.t-blue{background:var(--accent)} .tdot.t-violet{background:var(--violet)} .tdot.t-green{background:var(--green)} .tdot.t-pink{background:var(--pink)} .act-item.task-line .tteam .ic14{width:12px;height:12px} .act-item .ic .ic14{width:12px;height:12px} .wz-arr .ic14{width:16px;height:16px} /* выпадашка типа задачи: цвет — левой полоской-точкой, а не заливкой всего контрола */ .tform .ttype-sel{border-left-width:3px;border-left-style:solid} .ttype-sel.t-blue{border-left-color:var(--accent)} .ttype-sel.t-violet{border-left-color:var(--violet)} .ttype-sel.t-green{border-left-color:var(--green)} .ttype-sel.t-pink{border-left-color:var(--pink)} .ttype-sel.t-amber{border-left-color:var(--orange)} .ttype-sel.t-red{border-left-color:var(--red)} .ttype-sel.t-cyan{border-left-color:var(--cyan)} .tdot.t-amber{background:var(--orange)} .tdot.t-red{background:var(--red)} .tdot.t-cyan{background:var(--cyan)} .late-w{color:var(--red-fg);font-weight:700} .badge.amb{background:var(--orange-bg);color:var(--orange-fg)} .badge.amb .dot{background:var(--orange)} .badge.vio{background:var(--violet-bg);color:var(--violet)} .badge.vio .dot{background:var(--violet)} .badge.grey{background:var(--surface3);color:var(--grey-fg)} .badge.grey .dot{background:var(--text3)} .rbac .ic14{color:var(--text3)} .redbox .rb-ic{color:var(--red-fg)} .selbar .hint.blue{color:var(--blue-fg)} .ur.done-note{background:var(--green-bg);color:var(--green-fg);font-weight:600;justify-content:space-between} .ur[hidden],.pill-red[hidden]{display:none} .redbox.empty-ok{border-color:var(--green)} .redbox.empty-ok .rb-t{color:var(--green-fg)} .redbox.empty-ok .rb-ic{color:var(--green-fg)} .fi .v.muted-val{color:var(--text3);font-weight:400} /* «сделал — вижу»: короткое сообщение о совершённом действии. ⛔ [TOAST-MOCKUP-SELECTOR-IS-ID] СЕЛЕКТОР — ID СОБСТВЕННОЙ ПЛАШКИ МОКАПА, А НЕ ОБЩИЙ КЛАСС .toast. Мокапная плашка живёт по правилу «спрятана, пока не добавили .on» (v8Toast её и ставит, см. v8-js.txt: t.id='v8-toast'). У ПРОДУКТА своя механика — sofcon-app.src.js рисует сообщения классом .toast внутри #toast-container и класса .on НЕ ставит НИКОГДА (у него анимация @keyframes toastIn). Пока здесь стоял голый класс, правило уезжало в @scope(html[data-card-v8]) — то есть на ВСЕ экраны с новой карточкой — и гасило opacity ЛЮБОГО продуктового сообщения до 0. Замерено в живом браузере: продуктовая плашка 286×40 в видимой области, computed opacity = 0. Для человека это «система не отвечает»: сервер честно объяснял отказ («Все позиции у одного поставщика — делить нечего»), а на экране не появлялось ничего. Мокапу класс не нужен: его плашка одна и у неё есть id. Продуктовые сообщения этим правилом больше не задеваются ни на одном экране. Сторож: scripts/qa/gate-toast-visible-v8.sh. */ #v8-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:99; background:var(--text);color:var(--surface);border-radius:var(--r-b);padding:var(--s-2) var(--s-3); box-shadow:var(--sh-pop);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;max-width:80vw} #v8-toast.on{opacity:1;transform:translate(-50%,0)} /* тени: ровно две (карточка и поповер), цветного свечения под кнопкой больше нет */ .cardb,.moneybar,.redbox,details.terms-fold{box-shadow:var(--sh-card)} .menu,.tplpop,.mentions,.modal,.colpop{box-shadow:var(--sh-pop)} .pchip:hover{box-shadow:none;border-color:var(--accent)} .to-new{box-shadow:var(--sh-card)} .wz-card{box-shadow:var(--sh-card)} .wz-step.active{box-shadow:none;border-color:var(--accent)} .wz-step.done{border-color:var(--green);background:var(--green-bg)} .kpi .bar{background:var(--surface3)} .kpi .bar i{background:var(--accent)} .kpi .bar i.sup{background:var(--orange)} #sec-money .kpis,.moneybar .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .empty-state .es-ic .ic14{width:20px;height:20px} /* ═══ слой: v8-final.txt ═══ */ /* ══════════════════════════════════════════════════════════════════════════════════════ v9 · ПОСЛЕДНИЙ СЛОЙ. Идёт ПОСЛЕ сгенерированных шкал, поэтому здесь и только здесь можно уточнить то, что шкала переизложила слишком грубо, и дожать адаптив. Правило слоя: никаких «сырых» чисел — только токены из :root. ══════════════════════════════════════════════════════════════════════════════════════ */ /* [NO-FONT-SWAP-JUMP] то же объявление шрифта, но display:optional — если Inter не успел к первому кадру, страница остаётся на метрически подогнанном Inter-fallback и НЕ дёргается позже (swap давал скачок макета на холодном кэше). Файл при этом предзагружается ссылкой в , поэтому практически всегда успевает. У манатного фейса display оставлен свапом: там 360 байт и ровно один глиф ₼ — потерять его нельзя, а сдвинуть он ничего не может. */ @font-face{font-family:'InterVariable';src:url('/fonts/InterVariable.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:optional} /* [TWO-SHADOWS-ONLY] теней ровно две: карточка и поповер. Активный чип фильтра поднимался собственной чёрной тенью, композер — верхней «дымкой»; и то и другое отличалось от карточки на глаз и ни на что не работало. */ .fchips .fc.on{box-shadow:var(--sh-card)} .compose{box-shadow:none;border-top:1px solid var(--border)} /* браузерные значения по умолчанию у