:root{ --bg:#eceae3;--card:#fff;--soft:#e3e1d7;--col:#e6e4db;--line:rgba(0,0,0,.17); --text:#161615;--t2:#4a4944;--t3:#63625a;--nav:#fff; /* ЦВЕТОВАЯ СИСТЕМА: цвет = смысл, везде одинаково */ --xps:#FF7A00;--xps-t:#a85200; /* XPS — оранжевый (-t: для текста) */ --pvc:#1240AB;--pvc-t:#1240AB; /* PVC — синий */ --pg:#539700;--pg-t:#3d6f00; /* PG — зелёный */ --komm:#c2417d; /* коммерческий блок — малиновый */ --teh:#5f7085; /* технический блок — стальной */ --st-ok:#199a62;--st-ok-t:#117048;--bg-ok:#e1f5ee; /* ≥80% (-t: для текста) */ --st-mid:#d9a400;--st-mid-t:#795d00;/* 40–79% */ --st-bad:#d1462f;--st-bad-t:#a1301c;/* <40% */ --accent:#2e2d2a;--accent-bg:#e2e0d8;--accent-t:#1f1e1c;--accent-btn:#2e2d2a;--info:#2a78d6;--info-bg:#e6f1fb;--info-t:#175196;--sel:#2e2d2a;--sel-t:#fff;--sel-bg:#e2e0d8; /* дизайн-токены */ --radius:14px; --shadow-1:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.07); --shadow-2:0 10px 34px rgba(0,0,0,.16); --ring:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent); --tr:.16s cubic-bezier(.4,0,.2,1); /* тему должны знать и системные элементы: полосы прокрутки, выпадающий список вариантов, флажки — иначе они остаются светлыми */ color-scheme:light; /* стрелка выпадающих списков — рисуем сами, у системной в разных браузерах свой отступ и размер, из-за чего она «уезжала» от края поля */ --sel-chev:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2363625a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5'/%3E%3C/svg%3E"); } @media(prefers-color-scheme:dark){:root{ color-scheme:dark; --bg:#141413;--card:#212120;--soft:#2f2f2c;--col:#262624;--line:rgba(255,255,255,.17); --text:#f4f4f0;--t2:#c0bfb6;--t3:#a4a399;--nav:#1b1b1a; --xps:#ff9433;--pvc:#5b7ce8;--pg:#7ebf2e;--komm:#e0619c;--teh:#8fa2b8; --xps-t:#ffab5e;--pvc-t:#8fa8f0;--pg-t:#9ed45c;--st-mid-t:#e8b93a; --st-ok:#3dbd85;--st-ok-t:#4fd196;--bg-ok:#0f3d33;--st-mid:#e8b93a;--st-bad:#e3684f;--st-bad-t:#f08a72; --accent:#e8e7e1;--accent-bg:#363531;--accent-t:#f4f4f0;--accent-btn:#e8e7e1;--info:#4a90e2;--info-bg:#12324f;--info-t:#8fbcf2;--sel:#e8e7e1;--sel-t:#161615;--sel-bg:#363531; --sel-chev:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2398978e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5'/%3E%3C/svg%3E");}} html[data-theme="light"]{ color-scheme:light; --bg:#eceae3;--card:#fff;--soft:#e3e1d7;--col:#e6e4db;--line:rgba(0,0,0,.17); --text:#161615;--t2:#4a4944;--t3:#63625a;--nav:#fff; --xps:#FF7A00;--pvc:#1240AB;--pg:#539700;--komm:#c2417d;--teh:#5f7085; --xps-t:#a85200;--pvc-t:#1240AB;--pg-t:#3d6f00;--st-mid-t:#795d00; --st-ok:#199a62;--st-ok-t:#117048;--st-mid:#d9a400;--st-bad:#d1462f;--st-bad-t:#a1301c; /* --bg-ok тоже нужно вернуть: иначе на тёмной машине ручное переключение в светлую оставляло тёмно-зелёные плашки «отгружено» с тёмным текстом */ --bg-ok:#e1f5ee; --accent:#2e2d2a;--accent-bg:#e2e0d8;--accent-t:#1f1e1c;--accent-btn:#2e2d2a;--info:#2a78d6;--info-bg:#e6f1fb;--info-t:#175196;--sel:#2e2d2a;--sel-t:#fff;--sel-bg:#e2e0d8; --sel-chev:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2363625a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5'/%3E%3C/svg%3E");} html[data-theme="dark"]{ color-scheme:dark; --bg:#141413;--card:#212120;--soft:#2f2f2c;--col:#262624;--line:rgba(255,255,255,.17); --text:#f4f4f0;--t2:#c0bfb6;--t3:#a4a399;--nav:#1b1b1a; --xps:#ff9433;--pvc:#5b7ce8;--pg:#7ebf2e;--komm:#e0619c;--teh:#8fa2b8; --xps-t:#ffab5e;--pvc-t:#8fa8f0;--pg-t:#9ed45c;--st-mid-t:#e8b93a; --st-ok:#3dbd85;--st-ok-t:#4fd196;--bg-ok:#0f3d33;--st-mid:#e8b93a;--st-bad:#e3684f;--st-bad-t:#f08a72; --accent:#e8e7e1;--accent-bg:#363531;--accent-t:#f4f4f0;--accent-btn:#e8e7e1;--info:#4a90e2;--info-bg:#12324f;--info-t:#8fbcf2;--sel:#e8e7e1;--sel-t:#161615;--sel-bg:#363531; --sel-chev:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2398978e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5'/%3E%3C/svg%3E");} *{box-sizing:border-box} /* Шрифт логотипа — Montserrat Medium, подрезанный до кириллицы и латиницы (39 КБ вместо 260). Лежит рядом с порталом: работает и без интернета, и в установленном PWA. Системный жирный текст для вывески смотрелся как ещё один заголовок, геометрический гротеск читается как знак. */ @font-face{font-family:"Sreda Logo";src:url(/static/logo-montserrat-500.ttf) format("truetype"); font-weight:400 600;font-style:normal;font-display:swap} /* жирное начертание вывески — «ДЕВЕЛОПМЕНТ» (тот же Montserrat 700, что в методологии) */ @font-face{font-family:"Sreda Logo";src:url(/static/meth-montserrat-700.ttf) format("truetype"); font-weight:700;font-style:normal;font-display:swap} /* Горизонтальной прокрутки у страницы быть не должно: всё широкое (таблицы, доски, недельный отчёт) прокручивается внутри своих контейнеров. Без этого случайные лишние пиксели уводили вбок всю страницу вместе с «липкой» шапкой — логотип уезжал за левый край (07.10.2026). */ html{overflow-x:clip} body{margin:0;background:var(--bg);color:var(--text);line-height:1.45; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Inter",Roboto,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:8px 18px;flex-wrap:wrap; background:color-mix(in srgb,var(--nav) 84%,transparent); backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px)} /* Вывеска: flex:0 0 auto — её нельзя сжимать, когда в шапке становится тесно, иначе первым «уезжает» именно знак. */ nav .brand{font-family:"Sreda Logo",Montserrat,-apple-system,BlinkMacSystemFont,sans-serif; font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.07em; margin-right:12px;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;flex:0 0 auto} /* «СРЕДА» — обычным, «ДЕВЕЛОПМЕНТ» — жирным (30.10.2026). em здесь только ради разметки, наклон снимаем. */ nav .brand em{font-style:normal;font-weight:700;color:var(--text)} /* та же вывеска на экране входа — первое, что видит человек */ .loginmark{font-family:"Sreda Logo",Montserrat,-apple-system,BlinkMacSystemFont,sans-serif; font-size:19px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;margin:10px 0 4px} .loginmark em{font-style:normal;font-weight:700;color:var(--text)} /* логотип: силуэт «крепости» без подложки, цветом текста — в тёмной теме светлый */ .logo-mark{width:24px;height:24px;flex:0 0 auto;display:block;color:var(--text)} nav a{font-size:14px;color:var(--t2);text-decoration:none;padding:6px 9px;border-radius:8px;cursor:pointer;white-space:nowrap} nav a:hover{background:var(--soft);color:var(--text)} nav a.on{background:var(--sel);color:var(--sel-t);font-weight:500} /* группы меню (выпадающие) */ .navgrp{position:relative;display:inline-flex} .navgrp>.navbtn{font:inherit;font-size:14px;color:var(--t2);background:none;border:0;padding:6px 8px 6px 9px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .navgrp>.navbtn:hover{background:var(--soft);color:var(--text)} .navgrp>.navbtn .chev{font-size:12px;line-height:1;opacity:.55;transition:transform .15s} .navgrp.open>.navbtn .chev{transform:rotate(180deg)} .navgrp.on>.navbtn{background:var(--sel);color:var(--sel-t);font-weight:500} .navgrp.on>.navbtn .chev{opacity:.85} .navmenu{position:absolute;top:calc(100% + 7px);left:0;min-width:212px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 36px rgba(0,0,0,.18);padding:6px;display:none;flex-direction:column;gap:2px;z-index:200} /* выпадашка — отдельная поверхность, светлее фона, чтобы не сливалась в тёмной теме */ @media(prefers-color-scheme:dark){.navmenu{background:#26241f;border-color:#3a332a;box-shadow:0 14px 40px rgba(0,0,0,.5)}} :root[data-theme="dark"] .navmenu{background:#26241f;border-color:#3a332a;box-shadow:0 14px 40px rgba(0,0,0,.5)} :root[data-theme="light"] .navmenu{background:#fff;border-color:var(--line);box-shadow:0 12px 36px rgba(0,0,0,.14)} .navgrp.open .navmenu{display:flex;animation:navpop .13s ease} @keyframes navpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .navmenu a{font-size:14px;color:var(--t2);padding:8px 12px;border-radius:8px;white-space:nowrap;display:block} .navmenu a:hover{background:var(--soft);color:var(--text)} .navmenu a.on{background:var(--sel-bg);color:var(--text);font-weight:600} .legend{margin-left:auto;display:flex;gap:12px;font-size:12px;color:var(--t3);flex-wrap:wrap} .legend span{display:inline-flex;align-items:center;gap:4px} .sw{width:9px;height:9px;border-radius:3px;display:inline-block} .main{max-width:1300px;margin:0 auto;padding:24px 20px 60px} h1{font-size:23px;font-weight:650;margin:0 0 4px;letter-spacing:-.015em} h2{font-size:16px;font-weight:600;margin:24px 0 10px;letter-spacing:-.01em} .sub{font-size:13px;color:var(--t3);margin-bottom:18px} .crumb{font-size:13px;color:var(--t3);margin-bottom:10px} /* ссылки — цветом текста с постоянным тонким подчёркиванием: без синего их иначе не отличить от текста, а на телефоне наведения нет (30.10.2026) */ .crumb a,a.link{color:var(--accent-t);cursor:pointer;font-weight:500; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--t3) 55%,transparent)} .crumb a:hover,a.link:hover{text-decoration-color:currentColor} a.link:hover{text-decoration:underline} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px} .kpi{background:var(--card);border:0.5px solid var(--line);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow-1)} .kpiL{cursor:pointer;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr)} .kpiL:hover{border-color:var(--accent-t);transform:translateY(-1px);box-shadow:var(--shadow-2)} /* Подпись занимает ровно две строки, как у плиток в карточках: иначе при длинной подписи («Города объектов без тарифа») цифра съезжала вниз и ряд плиток разъезжался по вертикали. */ .kpi .l{font-size:12px;color:var(--t2);line-height:1.3;min-height:2.6em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .kpi .v{font-size:24px;font-weight:650;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} /* Границу у карточек убрали: 0.5px на обычном мониторе рендерится неровно и местами пропадает, а тень отделяет карточку от фона надёжнее. */ .card{background:var(--card);border:0;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-1)} .dcard{cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}.dcard:hover{border-color:var(--accent-t);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.06)} .dcard .nm{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px; min-width:0;overflow-wrap:anywhere} .dcard-arch{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;border:0.5px solid var(--line);background:var(--card);color:var(--t3);cursor:pointer;opacity:0;transition:.12s;display:flex;align-items:center;justify-content:center;z-index:2} .dcard:hover .dcard-arch{opacity:1} .dcard-arch:hover{color:var(--st-mid-t);border-color:var(--st-mid-t)} .dot{width:8px;height:8px;border-radius:50%;display:inline-block} .row{display:flex;align-items:center;gap:8px;margin-top:6px} .row .k{font-size:12px;width:38px;color:var(--t3)} .track{flex:1;height:6px;background:var(--soft);border-radius:3px;overflow:hidden} .fill{height:100%;border-radius:3px} /* значение справа не переносим: «1 198 м²» ломалось на две строки */ .row .n{font-size:12px;min-width:44px;text-align:right;font-weight:600;white-space:nowrap} .foot{font-size:12px;color:var(--t2);border-top:1px solid var(--line);margin-top:10px;padding-top:9px} .btag{font-size:12px;padding:1px 8px;border-radius:6px;color:#fff} .two{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:820px){.two{grid-template-columns:1fr}} table{border-collapse:collapse;width:100%;font-size:13px} th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} th{color:var(--t2);font-weight:550;background:var(--soft);font-size:12px;text-transform:none;letter-spacing:.01em} td.l,th.l{text-align:left;white-space:normal} tbody tr{transition:background var(--tr)} tbody tr:hover td{background:color-mix(in srgb,var(--soft) 45%,transparent)} tbody tr:last-child td{border-bottom:none} .scroll{overflow-x:auto;border:0.5px solid var(--line);border-radius:8px;box-shadow:var(--shadow-1);background:var(--card)} input,select,textarea{border:1px solid var(--line);background:var(--card);color:var(--text);font-size:13px;padding:7px 10px;border-radius:8px;font-family:inherit;transition:border-color var(--tr),box-shadow var(--tr)} input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--t3) 55%,transparent)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-t);box-shadow:var(--ring)} textarea{width:100%;resize:vertical;line-height:1.55} /* Ширину задаёт колонка таблицы, а не само поле: фиксированные 52px и обрезали пятизначные объёмы («12000» → «1200»), и мешали таблице ужиматься под ширину экрана. */ input.cell{width:100%;min-width:0;border-color:transparent;text-align:right;padding:4px 5px; background:transparent;border-radius:6px} input.cell.plan{font-weight:600} /* Ячейка, которую можно исправить: обычный текст с пунктиром снизу, поле ввода подставляется по клику (cellEdit). */ /* ===== ОТЧЁТЫ ИИ ===== Единый вид у дайджеста, отчёта по застройщику, отчёта за период, месячного отчёта сотрудника и ответов по срезам: один ритм заголовков и абзацев, таблицы — настоящие таблицы портала. Отчёт показывают руководству, поэтому ширина строки ограничена, а числа в таблицах — моноширинными цифрами. */ .airep{white-space:normal;font-size:13.5px;line-height:1.6;color:var(--text)} .airep>*:first-child{margin-top:0} .airep h4{font-size:14px;font-weight:650;margin:16px 0 6px;letter-spacing:-.01em} .airep h4:first-child{margin-top:0} .airep p{margin:0 0 9px;max-width:78ch;color:var(--t2)} .airep b{color:var(--text);font-weight:650} .airep ul,.airep ol{margin:0 0 10px;padding-left:20px;max-width:78ch;color:var(--t2)} .airep li{margin-bottom:4px} .airep li::marker{color:var(--t3)} .airep code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px; background:var(--soft);border-radius:5px;padding:1px 5px} .airep a{overflow-wrap:anywhere} .airep hr{border:0;border-top:1px solid var(--line);margin:14px 0} .airep .scroll{margin:4px 0 12px} .airep table{font-size:13px} .airep table th{white-space:normal} .airep table td{white-space:normal} .airep table td.l{max-width:380px} /* печать и выгрузка отчёта: таблицы не рвём по строкам */ @media print{.airep tr{break-inside:avoid}.airep h4{break-after:avoid}} /* География карточки застройщика: город — полоса — ЖК — корпуса. Колонки подписаны шапкой, числовые отделены линией, иначе «19 50» читалось как одна цифра с хвостом (12.10.2026). */ .geohead,.georow{display:flex;align-items:center;gap:8px;font-size:12.5px} .geohead{color:var(--t3);font-size:12px;margin-bottom:5px} .georow{margin-bottom:6px} .geoname{width:38%;min-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .geobar{flex:1} .geonum{width:40px;text-align:right} .geocorp{width:62px;padding-left:10px;border-left:1px solid var(--line)} .georow .geocorp{color:var(--t2)} .geostar{color:var(--st-mid-t)} /* Короткая сводка в заголовке свёрнутого блока: видно, что внутри, без раскрытия. */ .fsec>summary .sumbrief{font-weight:400;color:var(--t3);font-size:12.5px;margin-left:10px} td.ced{cursor:text;border-bottom:1px solid var(--line)} td.ced:hover{background:color-mix(in srgb,var(--accent-bg) 55%,transparent)} td.ced:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} td.ced .cedz{color:var(--t3)} html[data-density="compact"] input.cell{padding:2px 4px} /* убираем стрелки-спиннеры: они съедают до 16px в узкой ячейке */ input.cell::-webkit-outer-spin-button,input.cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} input.cell[type=number]{-moz-appearance:textfield} input.cell:hover{border-color:var(--line)} input.cell:focus{background:var(--card);border-color:var(--accent-t)} tr.total td{background:var(--soft);font-weight:600} .btn{border:1px solid var(--line);background:var(--card);color:var(--text);font-size:13px;padding:8px 14px;border-radius:8px;cursor:pointer; display:inline-flex;align-items:center;gap:5px;justify-content:center; transition:background var(--tr),border-color var(--tr),transform var(--tr),box-shadow var(--tr)} .btn:hover{background:var(--soft);border-color:color-mix(in srgb,var(--t3) 55%,transparent)} .btn:active{transform:scale(.97)} .btn:focus-visible{outline:none;box-shadow:var(--ring)} /* главная кнопка — графит, как выбранные пункты: синим остаются только ссылки */ .btn.pri{border-color:transparent;background:var(--sel);color:var(--sel-t);font-weight:500;box-shadow:var(--shadow-1)} .btn.pri:hover{background:color-mix(in srgb,var(--sel) 84%,var(--bg));border-color:transparent} .controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden} .seg button{border:none;background:transparent;color:var(--t2);font-size:13px;padding:7px 13px;cursor:pointer} /* выбранный пункт — графит (--sel), а не синий: синим в портале отмечены действия */ .seg button.on{background:var(--sel);color:var(--sel-t)} .board{display:flex;gap:14px;overflow-x:auto;padding:10px 0;align-items:stretch;min-height:calc(100vh - 230px)} .column{background:var(--col);border-radius:8px;padding:11px;min-width:270px;max-width:270px;flex:0 0 auto;display:flex;flex-direction:column} .column .ch{font-size:14px;font-weight:600;padding:2px 4px 8px} .column .ch .cnt{color:var(--t3);font-weight:400;font-size:12px;float:right} .tcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13px;margin-bottom:8px;line-height:1.5} .tcard .wk{font-size:12px;color:var(--t3);margin-bottom:3px} .tcard textarea{border-color:transparent;background:transparent;padding:2px} .add{font-size:13px;color:var(--accent-t);font-weight:500;cursor:pointer;padding:8px 6px;margin-top:6px;border:1px dashed var(--line);border-radius:8px;text-align:center;font-weight:500} .colcards{display:flex;flex-direction:column;gap:8px;min-height:20px} .add:hover{background:var(--accent-bg);border-color:var(--accent-t)} .rep{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 18px;white-space:pre-wrap;font-size:14px;line-height:1.6;margin-bottom:12px} .rep .x{float:right;cursor:pointer;color:var(--t3)} .replist .r{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 15px;margin-bottom:10px;cursor:pointer} .replist .r:hover{border-color:var(--accent-t)} .tl{border-left:2px solid var(--line);padding-left:14px;margin-left:4px} .tl .item{margin-bottom:12px} .tl .meta{font-size:12px;color:var(--t3)} .tl .gl{font-size:13px;font-weight:500} .tl .tx{font-size:13px;color:var(--t2);white-space:pre-wrap;line-height:1.5} .saved{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--text);color:var(--bg);font-size:13px;padding:9px 18px;border-radius:8px;opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none;box-shadow:var(--shadow-2);z-index:120} .saved.show{opacity:1;transform:translateX(-50%) translateY(0)} .err{background:#faeeda;color:#a06400;padding:12px 16px;border-radius:8px;font-size:14px;margin:12px 0} .spin{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;animation:sp .7s linear infinite;vertical-align:-2px} @keyframes sp{to{transform:rotate(360deg)}} .empty{color:var(--t3);font-size:14px;padding:8px 0} /* Шкала лояльности: одиннадцать делений 0–10 в цвете своего уровня. Закрашено до текущей оценки, выбранное деление обведено. */ .relscale{display:flex;gap:3px;margin-top:10px} .relcell{flex:1;min-width:0;height:28px;border:0;border-radius:6px;cursor:pointer; font:600 11px/1 inherit;color:var(--t3);transition:transform .08s,filter .12s;padding:0} .relcell:hover{filter:brightness(1.12);transform:translateY(-1px)} .relcell.sel{outline:2px solid var(--text);outline-offset:1px} .relcell:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .score{display:flex;align-items:center;gap:10px} .score input[type=range]{flex:1;padding:0} .score .val{font-size:20px;font-weight:700;min-width:34px;text-align:center} .block-h{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:8px} .tabs2{display:flex;gap:5px;flex-wrap:wrap;border-top:0.5px solid var(--line);padding-top:12px;margin-top:14px} .tab2{font-size:13px;padding:6px 13px;border-radius:20px;color:var(--t2);cursor:pointer;border:0.5px solid transparent;background:none;transition:background var(--tr),box-shadow var(--tr)} .tab2:hover{background:var(--soft);color:var(--text)} .tab2.on{background:var(--sel-bg);border-color:transparent;color:var(--text);font-weight:600;box-shadow:none} /* Разделитель между смысловыми группами вкладок: двенадцать одинаковых пилюль в ряд читаются как сплошная полоса, глазу не за что зацепиться. */ .tabsep{width:1px;height:16px;background:var(--line);align-self:center;margin:0 4px;flex:0 0 auto} .tab2:focus-visible{outline:none;box-shadow:var(--ring)} .tab2 .c{color:var(--t3);font-weight:400} .al .ago{white-space:nowrap} /* ===== КАЛЬКУЛЯТОР ЦЕНЫ ===== Главная беда прежнего вида: справочные числа, поля ввода и результат выглядели одинаково, и было непонятно, что можно менять, а что приехало из прайса. Разделяем тремя способами сразу: групповой шапкой, фоном ячейки и рамкой у полей ввода. */ .pcalc{width:100%;border-collapse:separate;border-spacing:0} .pcalc th.grp{font-size:12px;font-weight:600; color:var(--t3);text-align:center;padding:0 6px 3px} .pcalc th.grp.ref{color:var(--t2)} .pcalc th.grp.act{color:var(--accent-t)} .pcalc th.grp.res{color:var(--st-ok-t)} .pcalc thead tr.cols th{font-size:12px;font-weight:600;color:var(--t2);padding:5px 8px; border-bottom:1px solid var(--line);white-space:nowrap} .pcalc td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right; font-variant-numeric:tabular-nums} .pcalc td.l,.pcalc th.l{text-align:left} .pcalc td.ref{background:var(--soft);color:var(--t2)} .pcalc td.act{background:color-mix(in srgb,var(--accent) 5%,transparent)} .pcalc .zone{border-left:2px solid var(--line)} .pcalc input{width:100%;max-width:110px;text-align:right;padding:5px 8px;border-radius:8px; border:1px solid var(--accent);background:var(--card);font-variant-numeric:tabular-nums} .pcalc input:focus{outline:none;box-shadow:var(--ring)} .pcalc input.wide{max-width:120px;font-weight:650} .pcstep{font-size:12.5px;font-weight:600; color:var(--t3);margin:14px 0 6px;display:flex;align-items:center;gap:7px} .pcstep .n{width:17px;height:17px;border-radius:50%;background:var(--accent-bg); color:var(--accent-t);font-size:12px;display:flex;align-items:center;justify-content:center} /* Плитки метрик прижаты влево и ограничены по ширине: растянутые на весь экран, они разносили три числа по метру друг от друга — глаз собирал их дольше, чем читал. */ .mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,212px));gap:10px;margin:16px 0;justify-content:start} /* fill — плитки занимают всю ширину контента и выравниваются по карточкам выше и ниже. Нужен там, где плиток пять и больше: при потолке в 212px строка обрывалась задолго до правого края (07.10.2026). */ .mini.fill{grid-template-columns:repeat(auto-fit,minmax(172px,1fr))} .mini .m{position:relative;background:var(--card);border:0;border-radius:8px;padding:12px 14px 13px; box-shadow:var(--shadow-1);overflow:hidden} /* Цветная полоса слева — метка смысла плитки: заложения розовые как комм-блок, вопросы жёлтые, контакт по свежести. Читается боковым зрением, до чтения цифр. */ .mini .m::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mc,transparent)} /* Шапка плитки фиксированной высоты: «Вопросы комм × тех» переносится на две строки, а «Заложения» нет — без резерва под вторую строку цифры в соседних плитках вставали на разной высоте и ряд выглядел кривым. */ .mini .m .mh{display:flex;align-items:flex-start;gap:7px;margin-bottom:8px;min-height:30px} .mini .m .mi{width:22px;height:22px;border-radius:7px;flex:0 0 auto;display:flex;align-items:center; justify-content:center;background:var(--mbg,var(--soft));color:var(--mc,var(--t2))} /* Подпись занимает ровно две строки независимо от длины: «Заложения» коротко, «Вопросы комм × тех» переносится — без фиксированной высоты цифры соседних плиток разъезжались по вертикали на 6 пикселей. */ /* Регистр подписи — как у плиток разделов (.kpi .l): две разные плитки с одной ролью читались по-разному — на «Обзоре» обычным текстом, на «Потенциале», «Прайсах» и «Логистике» капсом (11.10.2026). */ .mini .m .ml{font-size:12px;font-weight:550;letter-spacing:.01em;color:var(--t2); line-height:1.3;padding-top:3px;height:35px;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .mini .m .mv{font-size:24px;font-weight:680;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .mini .m .md{font-size:12px;color:var(--t3);margin-top:4px} /* Стрелка появляется только у кликабельной плитки и только под курсором: иначе четыре стрелки в ряд спорят с цифрами за внимание. */ .mini .m .mgo{margin-left:auto;color:var(--t3);opacity:0;transform:translateX(-3px); transition:opacity var(--tr),transform var(--tr);font-size:13px} .mini .m.kpiL:hover .mgo,.mini .m.kpiL:focus-visible .mgo{opacity:1;transform:none} /* Комментарий партнёра — две строки: после импорта подрядчиков в нём офис, регион и история работы, и строка таблицы вырастала на пол-экрана, сжимая остальные колонки (11.10.2026). Полный текст — в подсказке и в карточке. */ .prtnote{font-size:12px;color:var(--t3);line-height:1.35;max-width:430px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .avatar{width:46px;height:46px;border-radius:8px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--accent-t)} .pill{font-size:12px;padding:1px 9px;border-radius:20px} .tabpane{display:none}.tabpane.on{display:block} input.rk{-webkit-appearance:none;height:6px;border-radius:3px;outline:none} input.rk::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid var(--card)} .tcard{position:relative;padding-left:13px!important} .tcard .sbar{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:8px 0 0 8px} .tcard .shead{display:flex;align-items:center;gap:6px;margin-bottom:4px} .stbtn{border:none;background:none;cursor:pointer;font-size:12px;padding:2px 8px;border-radius:20px;font-weight:500} .stbtn2{background:var(--card);cursor:pointer;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;flex:0 0 auto} .cardtext{font-size:12px;line-height:1.5;color:var(--text);cursor:pointer;white-space:pre-wrap;margin-top:2px} .cardtext:hover{color:var(--accent-t)} .wkmonth{background:var(--card);color:var(--text);text-align:left;font-weight:600;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-bottom:none;border-radius:8px 12px 0 0;margin-top:22px; box-shadow:var(--shadow-1);display:flex;align-items:center;gap:9px} .wknav{margin-left:auto;display:flex;align-items:center;gap:6px} .wkpos{font-size:12px;color:var(--t2);font-weight:400;min-width:130px;text-align:center} .wkbtn{border:1px solid var(--line);background:var(--card);color:var(--text);width:28px;height:28px; border-radius:8px;cursor:pointer;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center; transition:background var(--tr)} .wkbtn:hover:not(:disabled){background:var(--soft)} .wkbtn:disabled{opacity:.35;cursor:default} /* колонка цели закреплена, недели прокручиваются */ .wkwrap{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:290px} .wkwrap::-webkit-scrollbar{height:11px} .wkwrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--t3) 60%,transparent);border-radius:6px; border:2px solid transparent;background-clip:content-box} .wkwrap::-webkit-scrollbar-thumb:hover{background:var(--t2);border:2px solid transparent;background-clip:content-box} .wkwrap::-webkit-scrollbar-track{background:var(--soft);border-radius:6px} /* в сетке отчёта полосы не нужны — есть рамки; закреплённой колонке нужен НЕпрозрачный фон, иначе сквозь неё просвечивают уезжающие недели */ .wkgrid tbody tr td{background:var(--card)} .wkgrid tbody tr:hover td{background:color-mix(in srgb,var(--accent) 6%,var(--card))} /* кнопка удаления строки: не мозолит глаза, но доступна с клавиатуры */ .wkgoal{position:relative} .wkdel{position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;border-radius:7px; border:1px solid transparent;background:var(--card);color:var(--t3);cursor:pointer; display:flex;align-items:center;justify-content:center;opacity:.3; transition:opacity var(--tr),color var(--tr),border-color var(--tr)} /* Кнопка видна всегда, просто приглушена. Появление только по наведению означало бы, что на планшете и телефоне её нет вообще, а с клавиатуры её видно лишь когда окно в фокусе. */ .wkgoal:hover .wkdel,.wkgoal:focus-within .wkdel,.wkdel:focus,.wkdel:focus-visible{opacity:1} .wkdel:hover{color:var(--st-bad-t);border-color:var(--st-bad-t)} .wkdel:focus-visible{outline:none;box-shadow:var(--ring)} .wkgrid tbody tr td.wkgoal{background:var(--soft)} .wkgrid tbody tr:hover td.wkgoal{background:color-mix(in srgb,var(--accent) 10%,var(--soft))} .wkgrid thead th{background:var(--soft)} .wkgrid th:first-child,.wkgrid td:first-child{position:sticky;left:0;z-index:2} .wkgrid thead th:first-child{z-index:3} .wkwrap.scrolled .wkgrid th:first-child,.wkwrap.scrolled .wkgrid td:first-child{ box-shadow:6px 0 10px -6px rgba(0,0,0,.28)} .wkgrid th+th,.wkgrid td+td{scroll-snap-align:start} .wkmonth::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--accent);display:inline-block} .wkgrid{border-collapse:separate;border-spacing:0;width:100%;min-width:1100px;table-layout:fixed} .wkgrid th{background:var(--soft);border:1px solid var(--line);padding:9px 11px;font-size:12.5px;font-weight:600;color:var(--text);text-align:left !important;vertical-align:top} .wkgrid th.wkgoalh{width:290px;text-align:left;background:var(--soft)} .wkdates{font-size:12px;font-weight:400;color:var(--t2);margin-top:2px} .wkalien{background:color-mix(in srgb,var(--st-mid) 12%,var(--soft))!important} .wkalien .wkdates{color:var(--st-mid-t)} .wkgrid col.wkgoalcol{width:290px} .wkgrid td{border:1px solid var(--line);padding:9px 11px;font-size:12.5px;line-height:1.55;vertical-align:top;text-align:left;overflow-wrap:anywhere;word-break:break-word} .wkgoal{background:var(--soft);cursor:pointer;font-weight:500;overflow-wrap:anywhere;word-break:break-word;white-space:normal;border-left:3px solid var(--accent)!important} .wkgoal:hover{background:color-mix(in srgb,var(--accent) 10%,var(--soft))} .wkgoal:hover{color:var(--accent-t)} .wkcell{white-space:pre-wrap;color:var(--t2);text-align:left;overflow-wrap:anywhere;word-break:break-word} .wtbl{display:flex;flex-direction:column;gap:8px} .wrow{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:14px;background:var(--card);border:0.5px solid var(--line);border-radius:8px;padding:12px 14px} .wgoal{display:flex;gap:8px;align-items:flex-start;font-size:13px;font-weight:500;cursor:pointer} .wgoal:hover{color:var(--accent-t)} .wgoal .stbtn2{flex:0 0 auto;margin-top:1px} .wweeks{display:flex;flex-direction:column;gap:6px} .wk-item{font-size:12px;line-height:1.5;color:var(--t2);background:var(--soft);padding:6px 10px;border-radius:8px;white-space:pre-wrap} .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow-y:auto;overscroll-behavior:contain; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .18s ease} /* margin:auto — окно по центру, пока помещается, и без обрезки сверху, когда не помещается: тогда контейнер просто прокручивается. */ .modal{background:var(--card);border-radius:8px;max-width:760px;width:100%;padding:24px;margin:auto 0; box-shadow:0 20px 60px rgba(0,0,0,.3);animation:popIn .2s cubic-bezier(.2,.9,.3,1.2)} /* Шапка высокого окна прилипает: закрыть и понять, что открыто, можно с любой прокрутки. Включается классом, а не «первым div подряд» — у разных окон первым элементом бывает и само содержимое. */ .modal>.mhead{position:sticky;top:-24px;z-index:3; background:linear-gradient(var(--card) 76%,transparent); margin:-24px -24px 0;padding:24px 24px 10px} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} .cmt{display:flex;gap:10px;margin:12px 0} .cmt-av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--sel-t);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:0 0 auto} .cmt-body{flex:1} .cmt-meta{font-size:12px;color:var(--t3);margin-bottom:2px} .cmt-text{font-size:13px;line-height:1.5;background:var(--soft);padding:8px 12px;border-radius:8px;white-space:pre-wrap} .devtag{font-size:12px;font-weight:600;color:var(--accent-t);background:var(--accent-bg);padding:2px 8px;border-radius:20px;cursor:pointer;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .colhead{display:flex;align-items:flex-start;gap:6px;padding:2px 4px 10px} .colprog{height:4px;border-radius:2px;background:var(--soft);overflow:hidden;margin:6px 0 2px} .colprog>div{height:100%;background:var(--st-ok)} /* Место под логотип всегда квадратное: без flex:0 0 auto длинное название («ГК ЕкатеринодарИнвест-Строй») сжимало картинку в узкую полоску 15×60, а сама подложка оставалась высотой в три строки (09.10.2026). */ .logo{width:60px;height:60px;flex:0 0 auto;align-self:flex-start; border-radius:8px;object-fit:contain;background:var(--soft)} .alerts{background:var(--card);border:0.5px solid var(--line);border-radius:8px;padding:6px 0;margin-bottom:22px;overflow:hidden} .alerts .ah{display:flex;align-items:center;gap:8px;padding:10px 16px 8px;font-weight:600;font-size:15px} .alerts .ah .cnt{margin-left:auto;font-size:12px;color:var(--t3);font-weight:400} .al{display:flex;align-items:flex-start;gap:10px;padding:9px 16px;border-top:0.5px solid var(--line);cursor:pointer} .al:hover{background:var(--soft)} .al .adot{width:7px;height:7px;border-radius:50%;margin-top:6px;flex:0 0 auto} .al .adev{font-weight:600;font-size:13px;min-width:96px} .al .atype{font-size:12px;padding:1px 8px;border-radius:6px;background:var(--soft);color:var(--t2);white-space:nowrap} .al .atext{font-size:13px;color:var(--t2)} .al .ago{margin-left:auto;color:var(--t3);font-size:13px} .alerts .more{padding:9px 16px;font-size:13px;color:var(--accent-t);font-weight:500;cursor:pointer;border-top:0.5px solid var(--line)} .alerts .more:hover{background:var(--soft)} .fsec{border:0.5px solid var(--line);border-radius:8px;margin-bottom:12px;overflow:hidden} .fsec>summary{list-style:none;cursor:pointer;padding:13px 16px;font-weight:600;font-size:15px;background:var(--soft);display:flex;align-items:center;gap:8px} .fsec>summary::-webkit-details-marker{display:none} .fsec>summary .cr{margin-left:auto;color:var(--t2);font-size:17px;line-height:1;font-weight:600;transition:transform .18s ease;transform-origin:50% 40%} .fsec[open]>summary .cr{transform:rotate(180deg)} .fsec .body{padding:14px 16px} /* Окно «чем закрыли конструктив»: два поля в строку, на телефоне — в одну колонку */ .fld2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} @media(max-width:520px){.fld2{grid-template-columns:1fr}} .factfrm .cell{border:1px solid var(--line);border-radius:8px;padding:7px 9px;text-align:left} .fld{margin-bottom:12px} .fld label{display:block;font-size:12px;color:var(--t2);margin-bottom:4px} .fld .hint{font-size:12px;color:var(--t3);margin-top:3px} .fld input,.fld textarea{width:100%} .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:700px){.f2{grid-template-columns:1fr}} .chk{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .chk-dev{display:inline-flex;align-items:center;gap:5px;font-size:12px;border:0.5px solid var(--line);border-radius:8px;padding:3px 9px;cursor:pointer} .chk-dev input{width:auto;margin:0} .chk label{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:0.5px solid var(--line);border-radius:20px;padding:5px 12px;cursor:pointer} .chk input{width:auto;margin:0} .regform{display:none;gap:6px;flex-wrap:wrap;margin-top:8px} .regform.open{display:flex} .tree{margin-top:8px} .tcenter{display:inline-block;background:var(--accent);color:var(--sel-t);font-weight:600;padding:8px 16px;border-radius:8px} .tline{width:2px;height:14px;background:var(--line);margin-left:44px} .tgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px} .tg{border:1px solid var(--line);border-radius:8px;padding:10px} .tgt{font-size:12px;color:var(--t2);font-weight:600;margin-bottom:7px} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:2px 9px;background:var(--soft)} .devhead{margin-bottom:16px} .dav{width:46px;height:46px;border-radius:8px;background:var(--accent-bg);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--accent-t)} .devmetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px} .mtile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 13px} .mtile .ml{font-size:12px;color:var(--t2)} .mtile .mv{font-size:20px;font-weight:600;margin-top:1px} .mtile .mh{font-size:12px;color:var(--t3);margin-top:1px} .devtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:18px 0 16px} .dtab{border:none;background:transparent;color:var(--t2);font-size:14px;padding:8px 13px;cursor:pointer;border-bottom:2px solid transparent;border-radius:0} .dtab:hover{color:var(--text)} .dtab.on{color:var(--text);border-bottom-color:var(--sel)} .estate{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--t2);font-size:14px;padding:28px 16px;border:1px dashed var(--line);border-radius:8px;margin-top:8px} input[type=range].rng-komm{accent-color:var(--komm)} input[type=range].rng-teh{accent-color:var(--teh)} .blk-komm{border-top:3px solid var(--komm)} .blk-teh{border-top:3px solid var(--teh)} /* ===== читаемость: контраст, границы, ритм ===== */ /* таблицы — заметная шапка, полосатые строки, различимые границы */ table th{background:var(--soft);color:var(--text);font-weight:600;font-size:12.5px; border-bottom:1.5px solid var(--line)} table td{font-size:13.5px;line-height:1.5;border-bottom:1px solid var(--line)} tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--soft) 34%,transparent)} tbody tr:hover td{background:color-mix(in srgb,var(--accent) 7%,var(--card))} .scroll{border:1px solid var(--line)} /* карточки и плитки — видимая рамка, чтобы не сливались с фоном */ .card,.kpi,.mini .m,.scroll,.fsec,.alerts,.rep,.replist .r,.tcard,.modal{border-color:var(--line)} .card,.kpi,.mini .m{border-width:1px} .column{border:1px solid var(--line)} /* вспомогательный текст — темнее, крупнее */ .sub{font-size:13.5px;color:var(--t2)} .kpi .l,.mini .m .ml{font-size:12.5px;color:var(--t2)} .mini .m .md,.fld .hint,.foot{font-size:12px;color:var(--t3)} .crumb{font-size:13.5px;color:var(--t2)} .empty{color:var(--t2)} /* поля и кнопки — различимая рамка в обеих темах */ input,select,textarea{border-color:color-mix(in srgb,var(--line) 100%,transparent);font-size:13.5px} .btn{border-color:var(--line);font-weight:500} .seg{border-color:var(--line)} .seg button{font-weight:500} .tab2.on{border-color:var(--line)} /* чипы и метки — контрастнее */ .pill{font-weight:500} .chip{border-color:var(--line);color:var(--text)} .devtag{font-weight:600} .btag{font-weight:600;padding:2px 9px} /* шапка — плотнее отделена от контента */ nav{border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.05)} h1{letter-spacing:-.015em} h2{padding-bottom:6px;border-bottom:1px solid var(--line)} /* ===== ТАБЛИЦЫ ===== Реестры длинные: без закреплённой шапки на 40-й строке уже не понять, что за колонка. Плотность переключается и запоминается — «просторно» удобно читать, «компактно» нужно, когда сравниваешь много строк разом. */ .scroll{max-height:none} /* текст только для скринридера: пустой иначе читается как «столбец» без имени */ .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 thead th{position:sticky;top:0;z-index:3; /* фон непрозрачный: под шапкой проезжают строки */ background:var(--soft); box-shadow:inset 0 -1px 0 var(--line)} /* когда таблица внутри .scroll с ограничением высоты — шапка липнет к её верху */ /* Базовое значение — в пикселях, а не в vh. Если высота окна почему-либо неизвестна (встраивание, headless-рендер), vh даёт 0 и таблица схлопывается в полоску. Проценты высоты подключаем только там, где окно точно измерено. */ .scroll.tall{max-height:560px;overflow-y:auto} @media(min-height:700px){.scroll.tall{max-height:70vh}} @media(min-height:1100px){.scroll.tall{max-height:760px}} /* ===== ТАБЛИЦА ПО ШИРИНЕ ЭКРАНА ===== .scroll.fit не создаёт своей прокрутки: таблица делит доступную ширину, а её шапка липнет к шапке портала (её высота меряется в JS и живёт в --navh). min-width на таблице — предохранитель: если экран уже этого, колонки начнут сминать цифры, поэтому там прокрутка возвращается. */ .scroll.fit{overflow:visible;border-radius:8px} .scroll.fit>table{table-layout:fixed;width:100%} .scroll.fit>table th,.scroll.fit>table td{padding-left:5px;padding-right:5px;overflow:hidden} .scroll.fit>table td.l,.scroll.fit>table th.l{padding-left:11px} .scroll.fit>table thead th{top:var(--navh,0px)} @media(max-width:1240px){ .scroll.fit{overflow-x:auto} .scroll.fit>table{min-width:1140px} .scroll.fit>table thead th{top:0} } th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 8%,var(--soft))} th .sortmark{opacity:.35;font-size:12px;margin-left:3px} th.sorted .sortmark{opacity:1;color:var(--accent-t)} tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--soft) 22%,transparent)} tbody tr:hover td{background:color-mix(in srgb,var(--accent) 8%,var(--card))} tbody tr:nth-child(even):hover td{background:color-mix(in srgb,var(--accent) 8%,var(--card))} td .num{font-variant-numeric:tabular-nums;font-weight:600} td .unit{color:var(--t3);font-size:12px;font-weight:400;margin-left:2px} td .sub{font-size:12px;color:var(--t3);margin:0} /* Итоговая строка обязана выигрывать у «зебры» и у подсветки при наведении: правило tbody tr:nth-child(even) td весомее, чем tr.total td, и раньше перекрашивало итог в цвет обычной чётной строки — он сливался с таблицей. Поэтому перечисляем состояния явно и повышаем специфичность. */ tbody tr.total td, tbody tr.total:nth-child(even) td, tbody tr.total:hover td, tbody tr.total:nth-child(even):hover td{ position:sticky;bottom:0;z-index:2; background:var(--soft); color:var(--text);font-weight:700; /* линия сверху отделяет итог от данных, тень — когда строка «висит» внизу */ box-shadow:inset 0 2px 0 var(--line), 0 -6px 12px -6px rgba(0,0,0,.14)} tbody tr.total td .num{font-weight:700} tbody tr.total td:first-child{border-bottom-left-radius:11px} tbody tr.total td:last-child{border-bottom-right-radius:11px} /* плотность строк: значение хранится на , поэтому применяется сразу ко всему */ html[data-density="compact"] th,html[data-density="compact"] td{padding:4px 9px;font-size:12.5px} html[data-density="compact"] .card{padding:12px 14px} html[data-density="compact"] .kpi{padding:11px 13px} html[data-density="comfortable"] th,html[data-density="comfortable"] td{padding:11px 13px} .density{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;height:32px} .density button{border:0;background:transparent;color:var(--t2);font:inherit;font-size:12.5px; padding:0 11px;cursor:pointer;display:inline-flex;align-items:center;gap:5px} .density button.on{background:var(--sel);color:var(--sel-t)} /* ===== СОСТОЯНИЯ: пусто / ошибка / загрузка ===== Единый вид вместо разнобоя: у пустого экрана должно быть объяснение и следующий шаг, у ошибки — кнопка «повторить», а не тупик. */ .state{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:34px 24px;text-align:center;box-shadow:var(--shadow-1)} .state .ico{width:44px;height:44px;border-radius:8px;background:var(--soft);color:var(--t3); display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px} .state .t{font-size:16px;font-weight:650;margin-bottom:5px} .state .d{font-size:13.5px;color:var(--t3);line-height:1.6;max-width:52ch;margin:0 auto} .state .act{margin-top:16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap} .state.err{border-color:var(--st-bad-t);background:color-mix(in srgb,var(--st-bad) 5%,var(--card))} .state.err .ico{background:color-mix(in srgb,var(--st-bad) 14%,transparent);color:var(--st-bad-t)} /* ===== ГРАФИКА В СТРОКАХ ===== Спарклайн и дельта отвечают на вопрос «это рост или падение», на который голое число не отвечает. */ .spark{display:block} /* ячейка «Темп» — кнопка: график, направление и средний темп рядом */ /* Две строки вместо одной: так ячейка вдвое уже и таблица помещается в экран. */ .tempcell{display:inline-flex;flex-direction:column;align-items:flex-end;gap:0;background:none; border:1px solid transparent;border-radius:8px;padding:2px 6px;cursor:pointer;font:inherit; color:inherit;transition:border-color var(--tr),background var(--tr);max-width:100%} .tempcell:hover{border-color:var(--line);background:var(--card)} .tempcell:focus-visible{outline:none;box-shadow:var(--ring)} .tempcell .templine{display:flex;align-items:center;gap:5px} .tempcell .tempnum{font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap} .tempcell .tempsub{font-size:12px;color:var(--t3);white-space:nowrap;line-height:1.3} html[data-density="compact"] .tempcell .tempsub{display:none} /* мини-плитки внутри разбора темпа */ /* окно импорта: зона перетаскивания и отчёт моноширинным */ .impdrop{border:2px dashed var(--line);border-radius:8px;padding:26px 18px;text-align:center; cursor:pointer;transition:border-color var(--tr),background var(--tr);background:var(--soft)} .impdrop:hover,.impdrop.over{border-color:var(--accent-t);background:var(--accent-bg)} .impdrop:focus-visible{outline:none;box-shadow:var(--ring)} .impdrop-t{font-size:14px;font-weight:600;margin-top:8px} .impdrop-s{font-size:12px;color:var(--t3);margin-top:2px} .impreport{margin:14px 0 0;padding:12px 14px;background:var(--soft);border-radius:8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.55; white-space:pre-wrap;max-height:340px;overflow:auto;color:var(--t2)} .minik-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-bottom:6px} .mini-k{background:var(--soft);border-radius:8px;padding:10px 12px} .mini-k .l{font-size:12px;color:var(--t2)} .mini-k .v{font-size:19px;font-weight:650;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .mini-k .s{font-size:12px;color:var(--t3);margin-top:2px} /* спарклайн живёт на своей строке: если ставить его рядом с подписью, на узкой плитке подпись ломается на две строки */ .sparkrow{margin-top:8px;padding-top:8px;border-top:1px solid var(--line); display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t3)} .sparkrow span{white-space:nowrap} .delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600; padding:1px 6px;border-radius:6px;line-height:1.5} .delta.up{color:var(--st-ok-t);background:color-mix(in srgb,var(--st-ok) 13%,transparent)} .delta.down{color:var(--st-bad-t);background:color-mix(in srgb,var(--st-bad) 12%,transparent)} .delta.flat{color:var(--t3);background:var(--soft)} .mbar{height:5px;border-radius:3px;background:var(--soft);overflow:hidden;min-width:52px} .mbar>i{display:block;height:100%;border-radius:3px} /* ===== правая часть шапки ===== Раньше здесь в строку лежали текст «логин · роль», голые ссылки «Дубли», «Пользователи», «выйти» и три кнопки — читалось как список без иерархии и переносилось на вторую строку. Теперь: поле поиска с подсказкой клавиш, иконки одного размера и меню пользователя, куда убраны служебные разделы. */ /* строка с галочкой: попадание по всей строке, а не по 13-пиксельному квадрату */ .checkrow{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13.5px; color:var(--text);padding:7px 8px;margin:0 -8px;border-radius:8px;transition:background var(--tr)} .checkrow:hover{background:var(--soft)} .checkrow input[type=checkbox]{width:17px;height:17px;margin:1px 0 0;accent-color:var(--sel);flex:0 0 auto;cursor:pointer} .checkrow .hint{display:block;font-size:12px;color:var(--t3);margin-top:2px} .checkrow:focus-within{box-shadow:var(--ring)} .navtools{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto} .searchbox{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px; border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--t3); font:inherit;font-size:13px;cursor:pointer;transition:border-color var(--tr),color var(--tr)} .searchbox:hover{border-color:color-mix(in srgb,var(--t3) 55%,transparent);color:var(--t2)} .searchbox .ti{font-size:15px;flex:0 0 auto} .searchbox kbd{font:inherit;font-size:12px;color:var(--t3);background:var(--soft); border:1px solid var(--line);border-radius:5px;padding:1px 5px;line-height:1.4} .navbadge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px; border-radius:8px;background:var(--st-mid);color:#fff;font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center;border:2px solid var(--nav)} #bellNav{position:relative;overflow:visible} .navbtn-icon{background:none;font:inherit} /* меню пользователя */ .userbtn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 4px; border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text); font:inherit;cursor:pointer;transition:border-color var(--tr)} .userbtn:hover{border-color:color-mix(in srgb,var(--t3) 55%,transparent)} .useravatar{width:24px;height:24px;border-radius:7px;background:var(--accent-bg);color:var(--accent-t); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto} .userinfo{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15} .username{font-size:12.5px;font-weight:600} .userrole{font-size:12px;color:var(--t3)} .usermenu .umhead{padding:10px 12px 8px;border-bottom:1px solid var(--line);margin-bottom:4px} .usermenu .umname{font-size:13.5px;font-weight:650} .usermenu .umsub{font-size:12px;color:var(--t3);margin-top:2px} .usermenu button{font:inherit;font-size:14px;color:var(--t2);background:none;border:0;text-align:left; padding:8px 12px;border-radius:8px;cursor:pointer;width:100%;display:flex;align-items:center;gap:8px} .usermenu button:hover{background:var(--soft);color:var(--text)} .usermenu .umsep{height:1px;background:var(--line);margin:4px 0} .legendmenu .legend{margin:0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--t2)} .legendmenu .sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto} /* Шапка должна оставаться в одну строку: две строки съедают вертикаль и опускают закреплённые шапки таблиц. Сжимаем по мере сужения экрана — сначала подсказка клавиш, затем слово «Поиск» и имя пользователя. */ /* Ниже 1500px шапке уже не хватает одной строки: вместо переноса на вторую убираем необязательное — подпись «Поиск», ⌘K и дату у часов (дата видна в календаре по клику), и слегка поджимаем пункты меню. Порог подобран по реальной ширине шапки: в одну строку ей нужно ~1570px (07.10.2026). */ @media(max-width:1500px){.searchbox kbd{display:none} .searchbox-t{display:none} .searchbox{padding:0 8px;width:32px;justify-content:center} nav .clock-d{display:none} nav a,.navbtn{padding-left:8px;padding-right:8px} nav .navlinks{gap:4px} .userrole{display:none}} @media(max-width:1100px){.userinfo{display:none}.userbtn{padding:0 4px}} /* ===== шапка: клавиатура и узкие экраны ===== Пункты меню теперь настоящие ссылки с href — их видно с клавиатуры, можно открыть в новой вкладке и скопировать адрес. Ниже 900px весь блок ссылок сворачивается в бургер: 15 пунктов с flex-wrap занимали пол-экрана, а шапка ещё и sticky. */ .navlinks{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .navburger{display:none;background:none;border:1px solid var(--line);border-radius:8px; color:var(--t2);cursor:pointer;padding:5px 9px;align-items:center} .navburger:hover{background:var(--soft);color:var(--text)} /* padding:0 обязателен: общее правило `nav a` даёт 6px 12px, из-за чего на саму иконку внутри 30-пиксельной кнопки оставалось 4px и она сплющивалась */ /* background:none обязателен: .navicon висит и на