/* Фирменный стиль «Колесник Инвестиции». Фон #FAFAFA, текст #262626, линии #202020, акцент #B08F78, зелёный #86E86E. Красного нет — просрочка показана густотой коричневого и словом, а не цветом тревоги (правило Сергея от 03.09.2026). GT America — только капсом. */ /* hidden сильнее любых display: иначе «.поля label {display:flex}» показывает спрятанные поля. */ [hidden] { display: none !important; } @font-face { font-family: 'GT America Compressed'; src: url('/static/fonts/GTAmericaCompressed-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/static/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/static/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/static/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } :root { --фон: #FAFAFA; --текст: #262626; --линия: #202020; --акцент: #B08F78; --зелёный: #86E86E; --золото: #C9A227; --серый: #6E6762; --поле: #FFFFFF; --рамка: #E2E2E2; /* Контраст (ревью дизайнера 05.11.2026): серый текст 5,4:1; акцент как ТЕКСТ — коричневый потемнее (7,0:1), сам #B08F78 остаётся для фона и линий; граница кнопок и полей не светлее 3:1. */ --акцент-текст: #7A5C47; --рамка-поля: #8A8580; --тень: 0 1px 2px rgba(38,38,38,.06); --долг-слабо: #EFE6DF; --долг-средне: #DCC4B3; --долг-сильно: #B08F78; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--фон); color: var(--текст); font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.45; } a { color: inherit; text-decoration: none; } a.ссылка { border-bottom: 1px solid #D6D0CA; } a.ссылка:hover { border-bottom-color: var(--акцент); } /* «Что сделать» в «Моих объектах»: пункт — переход к делу, должен читаться как ссылка. */ a.ссылка.дело { color: var(--акцент-текст); border-bottom-color: var(--акцент); font-weight: 600; } /* Номер договора — одно слово: «072.047-18,9» не должен рваться на дефисе в три строки. */ .номер-договора { white-space: nowrap; } /* Реестр задатков: поля оплаты, брокера и документов в узкой колонке складывались столбиком и раздували строку на полэкрана. Даём им ширину — таблица едет вбок, но строка низкая. */ .реестр-задатков { font-size: 13px; } .реестр-задатков td, .реестр-задатков th { padding-left: 6px; padding-right: 6px; vertical-align: top; } .реестр-задатков td[data-имя="Помещение"] { min-width: 120px; } .реестр-задатков td[data-имя="Покупатель"] { min-width: 120px; max-width: 170px; } .реестр-задатков td[data-имя="Оплата"] { min-width: 170px; max-width: 210px; } .реестр-задатков td[data-имя="Внешний брокер"] { min-width: 140px; } .реестр-задатков td[data-имя="Документы"] { min-width: 130px; max-width: 190px; } .реестр-задатков td[data-имя="Задаток"] { min-width: 120px; } .реестр-задатков input[type="date"], .реестр-задатков select { max-width: 100%; } /* Названия из 1С бывают на семь строк капсом — в списке хватит двух, целиком — в подсказке. */ .два-ряда { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Подвкладки — строка текстом под основными вкладками: не кнопки, чтобы не спорить с ними. */ .подвкладки { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 14px; padding: 2px 0 0; border-bottom: 1px solid var(--рамка); font-size: 13px; } .подвкладки a { padding: 4px 0 6px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--серый); } .подвкладки a:hover { color: var(--текст); } .подвкладки a.тут { border-bottom-color: var(--акцент); color: var(--текст); font-weight: 600; } .подвкладки .счёт { color: var(--серый); font-weight: 400; } /* Шаги месяца коммуналки: отметка «готово» зелёным кружком, не готово — номер шага в рамке. */ .шаги-месяца { gap: 6px 10px; align-items: center; } .шаги-месяца .стрелка { color: var(--рамка); } .шаги-месяца .отметка { display: inline-block; min-width: 18px; height: 18px; line-height: 16px; margin-right: 5px; border: 1px solid var(--рамка); border-radius: 9px; text-align: center; font-size: 11px; color: var(--серый); } .шаги-месяца a.готово .отметка { background: var(--зелёный); border-color: var(--зелёный); color: var(--текст); } .шаги-месяца a.тут .отметка { border-color: var(--акцент); } .шаги-месяца .дальше { margin-left: auto; border-bottom: none; padding: 4px 12px; font-weight: 700; } @media (max-width: 700px) { .шаги-месяца .стрелка, .шаги-месяца .счёт { display: none; } .шаги-месяца .дальше { margin-left: 0; } } h1, h2, h3, .капс, th, .кнопка, button, summary.заголовок { font-family: 'GT America Compressed', 'Inter', sans-serif; text-transform: uppercase; font-weight: 700; letter-spacing: .01em; } h1 { font-size: 30px; margin: 0 0 2px; } h2 { font-size: 17px; margin: 26px 0 10px; padding-top: 8px; border-top: 2px solid var(--линия); } h3 { font-size: 14px; margin: 16px 0 8px; } .мелко { font-size: 12px; color: var(--серый); } .тусклое { color: var(--серый); } .число { font-variant-numeric: tabular-nums; } /* --- шапка --- */ header.шапка { position: sticky; top: 0; z-index: 20; background: var(--фон); border-bottom: 2px solid var(--линия); padding: 10px 18px 0; } .шапка .верх { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .шапка .лого { font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-size: 15px; } .шапка .кто { margin-left: auto; font-size: 12px; color: var(--серый); } .шапка .кто b { color: var(--текст); } .шапка .кто-ещё { display: inline; position: relative; } .шапка .кто-ещё summary { display: inline; cursor: pointer; list-style: none; } .шапка .кто-ещё summary::-webkit-details-marker { display: none; } .шапка .кто-ещё[open] form { position: absolute; right: 0; top: 1.6em; background: var(--фон, #fafafa); border: 1px solid var(--линия, #202020); padding: 8px 10px; z-index: 30; white-space: nowrap; } nav.меню { display: flex; gap: 16px; flex-wrap: wrap; padding: 6px 0 8px; } nav.меню a { padding-bottom: 2px; border-bottom: 2px solid transparent; } nav.меню a.тут { border-bottom-color: var(--акцент); } main { padding: 18px; max-width: 1280px; margin: 0 auto; min-width: 0; } /* --- боковое меню --- */ /* Разделов стало больше семи: в верхней полосе они не читаются, а боковая колонка с группами — читается. Скрывается кнопкой ☰, состояние помнит браузер. */ .корпус { display: flex; align-items: flex-start; } .боковое { flex: 0 0 210px; width: 210px; position: sticky; top: 46px; height: calc(100vh - 46px); overflow-y: auto; background: #F3F0ED; border-right: 1px solid var(--рамка); padding: 10px 0 20px; transition: width .15s ease, flex-basis .15s ease; } .боковое nav { display: flex; flex-direction: column; } .боковое .группа { font-family: 'GT America Compressed', 'Inter', sans-serif; text-transform: uppercase; font-size: 11px; letter-spacing: .06em; color: var(--серый); padding: 14px 16px 4px; display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; } .боковое button.группа:hover { color: var(--текст); } .боковое .группа .галка { transition: transform .15s ease; font-size: 12px; } .боковое .группа.свёрнута .галка { transform: rotate(-90deg); } .боковое .пункт { display: block; padding: 7px 16px 7px 14px; border-left: 3px solid transparent; white-space: nowrap; } .боковое .пункт:hover { background: #ECE7E1; } .боковое .пункт.тут { border-left-color: var(--акцент); background: #ECE7E1; font-weight: 600; } .боковое .пункты { display: flex; flex-direction: column; } .боковое .ряд { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; } .боковое .ряд .пункт { flex: 1 1 auto; cursor: pointer; } .боковое .ряд.тащится { opacity: .35; } .боковое .ряд.над { box-shadow: inset 0 2px 0 var(--акцент); } /* Звёздочка: маленькая, без рамки и фона, золотая. Видна на наведении и всегда — у избранных, иначе меню рябит точками. Правила перебивают общий вид кнопок. */ .боковое .ряд button.звезда { flex: 0 0 auto; align-self: center; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 10px 0 2px; margin: 0; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 1; letter-spacing: 0; text-transform: none; color: #C9C2BA; opacity: 0; transition: opacity .12s, transform .12s; } .боковое .ряд:hover button.звезда, .боковое .ряд button.звезда.горит { opacity: 1; } .боковое .ряд button.звезда:hover { color: var(--золото); } .боковое .ряд button.звезда.горит { color: var(--золото); } .боковое .ряд button.звезда.перебор { opacity: 1; color: var(--золото); transform: scale(1.4); } .корпус > main { flex: 1 1 auto; } body.меню-скрыто .боковое { flex-basis: 0; width: 0; padding: 0; border: 0; overflow: hidden; } .кнопка-меню { font-family: inherit; font-size: 18px; line-height: 1; background: none; border: 1px solid var(--рамка); border-radius: 3px; padding: 2px 8px; cursor: pointer; color: var(--текст); text-transform: none; } .кнопка-меню:hover { border-color: var(--акцент); } .шапка .верх { padding-bottom: 8px; } @media (max-width: 900px) { .боковое { position: fixed; left: 0; top: 46px; z-index: 90; box-shadow: 0 10px 30px rgba(0,0,0,.18); } body.меню-скрыто .боковое { display: none; } } /* Мем на странице ошибки: крупно, моноширинно, чтобы рожица не разъезжалась. */ .мем { font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', monospace; font-size: 34px; line-height: 1.2; color: var(--акцент-текст); margin: 10px 0 6px; white-space: nowrap; overflow-x: auto; } @media (max-width: 700px) { .мем { font-size: 24px; } } .мем-картинка { display: block; max-width: min(420px, 100%); height: auto; border-radius: 3px; border: 1px solid var(--рамка); margin: 10px 0 12px; } .сетка-мемов { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 10px 0; } .сетка-мемов figure { margin: 0; } .сетка-мемов img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 2px; } .сетка-мемов figcaption { margin-top: 6px; word-break: break-all; } /* Сделка, у которой сняли рассрочку: её надо расторгать. Помечаем полосой и меткой — ярко, но без красного: у нас его не используют даже для плохих новостей. */ tr.расторжение > td { background: #F6F0EA; box-shadow: inset 3px 0 0 var(--акцент); } .метка.расторжение-метка { background: #7A5C47; color: #fff; border: 0; display: inline-block; } /* Месяц, в котором начислили, но не заплатили: в таблице оплат это главное, что ищут глазами. */ td.нет-оплаты { background: #F6F0EA; box-shadow: inset 0 -2px 0 var(--акцент); } /* Строка без показания или без счёта ресурсника: полоса слева и бежевая заливка. */ tr.нет-показания td { background: #F6F0EA; } tr.нет-показания td:first-child { box-shadow: inset 3px 0 0 var(--акцент); } /* --- плашка сообщения --- */ .сообщение { background: #E8F8E0; border: 1px solid #C9E9BA; padding: 8px 12px; border-radius: 3px; margin: 0 0 14px; } /* Часть данных не принята: полоса не должна выглядеть как «всё сохранено». */ .сообщение.с-отказом { background: #F4EEE8; border-color: #B08F78; } /* Показание, не принятое контролем, остаётся в поле с пометкой (A2). */ .диалоги-сетка { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 760px) { .диалоги-сетка { grid-template-columns: minmax(0, 1fr); } } input.проверьте { border-color: #B08F78; background: #F4EEE8; } .проверьте-подпись { color: #7A5C47; font-weight: 700; text-align: right; } .внимание { background: #F1EEEA; border: 1px solid var(--акцент); padding: 8px 12px; border-radius: 3px; margin: 0 0 14px; } /* --- KPI --- */ .kpi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); margin: 14px 0 6px; padding-bottom: 14px; border-bottom: 2px solid var(--линия); } .kpi .значение { font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-size: 26px; line-height: 1.1; } .kpi .значение.акцент { color: #7A5C47; } /* Долг, остаток, сбой в таблицах: тёмно-коричневый и жирным, не красным. */ .акцент { color: #7A5C47; font-weight: 700; } .kpi .подпись { font-size: 12px; color: var(--серый); } /* --- карточки --- */ .карточки { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } .карточка { background: var(--поле); border: 1px solid var(--рамка); border-radius: 3px; padding: 12px 14px; box-shadow: var(--тень); } .карточка:hover { border-color: var(--акцент); } .карточка .код { color: var(--акцент-текст); font-size: 12px; } .карточка .имя { font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-size: 16px; margin: 2px 0 6px; } .карточка .сумма { font-size: 20px; font-weight: 600; } /* --- таблицы --- */ table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { text-align: left; font-size: 11.5px; letter-spacing: .04em; border-bottom: 1px solid var(--линия); padding: 6px 8px; white-space: nowrap; } td { padding: 6px 8px; border-bottom: 1px solid rgba(38,38,38,.10); vertical-align: top; } td.ч, th.ч { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Ссылки-действия в конце строки («Помещения»): переносятся между собой, сами не режутся. Раньше стоял .ч (nowrap) — колонка тянулась на ~400 px и таблица вылезала за 1360 px. */ td.действия { text-align: right; white-space: normal; max-width: 15em; } td.действия a { white-space: nowrap; } tr.итог td { border-top: 1px solid var(--линия); font-weight: 600; } /* Подпись в «Итого» сверки («Остаток на нас: N ₽ (не перевыставлено арендаторам)») длинная: переносится на две строки, а не растягивает последнюю колонку и таблицу за край блока. */ th.итог-сверки { white-space: normal; max-width: 16em; font-family: 'Inter', sans-serif; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; } th.итог-сверки [data-остаток-на-нас] { font-size: 12px; } .обёртка { overflow-x: auto; } /* Шапка группы в таблице: счётчики одного арендатора идут подряд, имя пишем один раз. */ tr.строка-группы th { text-align: left; background: #F1EEEA; border-top: 1px solid var(--рамка); padding: 8px 10px; font-size: 13px; letter-spacing: .02em; } tr.строка-группы th .мелко { font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; } /* Просрочка — коричневым по густоте, без красного. */ .срок { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; white-space: nowrap; } .срок.до30 { background: var(--долг-слабо); } .срок.до60 { background: var(--долг-средне); } .срок.до90 { background: #7A5C47; color: #fff; } .срок.больше90 { background: var(--линия); color: var(--фон); } .метка { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; background: #F1EEEA; } .метка.зелёная { background: #E8F8E0; } .метка.уточнить { background: var(--долг-слабо); border: 1px dashed var(--акцент); } /* --- формы --- */ .форма { background: var(--поле); border: 1px solid var(--рамка); border-radius: 3px; padding: 4px 16px 14px; margin: 0 0 14px; } .поля { display: grid; gap: 10px 14px; margin: 10px 0 12px; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); } .поля label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--серый); } .поля .широко { grid-column: 1 / -1; } /* Те же правила под именами, которыми пользуются страницы коммуналки. */ .форма-раздела { background: var(--поле); border: 1px solid var(--рамка); border-radius: 3px; padding: 4px 16px 14px; margin: 0 0 14px; } .поля-формы { display: grid; gap: 10px 14px; margin: 10px 0 12px; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); } .поля-формы label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--серый); } .поля-формы label input, .поля-формы label select { font: inherit; font-size: 14px; color: var(--текст); padding: 6px 8px; border: 1px solid #D6D0CA; background: #FFF; border-radius: 2px; min-width: 0; } .поля-формы .широко { grid-column: 1 / -1; } input, select, textarea { font: inherit; font-size: 14px; color: var(--текст); padding: 6px 8px; min-width: 0; border: 1px solid var(--рамка-поля); background: var(--поле); border-radius: 2px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--акцент); } /* Строка поиска над длинным списком (search.js): стоит прямо над своим select. */ .поиск-в-списке { margin-bottom: 4px; } /* «Нет в списке — задача в 1С» под списком контрагентов: одной строкой, не рвётся посреди текста в узкой колонке формы. */ .кнопка.нет-в-списке { display: inline-block; white-space: nowrap; align-self: flex-start; margin: 4px 0 2px; padding: 5px 10px; font-size: 11.5px; } select[size] { padding: 2px 0; } button, .кнопка { font-size: 12.5px; padding: 8px 16px; border: 1px solid var(--линия); border-radius: 2px; background: var(--поле); color: var(--текст); cursor: pointer; } button.главная, .кнопка.главная { background: var(--линия); color: var(--фон); } button:hover, .кнопка:hover { border-color: var(--акцент); } button.тихо { border-color: var(--рамка-поля); color: var(--серый); padding: 4px 10px; } .ряд { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .фильтры { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; } /* --- раскрывающиеся блоки --- */ details.блок { border-bottom: 1px solid var(--линия); } details.блок > summary { cursor: pointer; padding: 9px 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-size: 14px; } details.блок > summary .справа { margin-left: auto; font-family: 'Inter', sans-serif; text-transform: none; font-size: 13px; font-weight: 500; } details.блок[open] > summary { border-bottom: 1px dashed var(--рамка); } details.движения summary { cursor: pointer; font-size: 12px; color: var(--серый); padding: 2px 0; } /* --- вход --- */ .вход-экран { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .вход-окно { width: 320px; background: var(--поле); border: 2px solid var(--линия); padding: 22px 24px 24px; } .вход-окно h1 { font-size: 24px; } .вход-окно label { display: block; font-size: 11px; color: var(--серый); margin: 14px 0 4px; text-transform: uppercase; } .вход-окно input { width: 100%; } .вход-окно button { width: 100%; margin-top: 18px; } .вход-окно .ошибка { color: #7A5C47; font-weight: 700; font-size: 13px; margin-top: 10px; min-height: 16px; } /* «Показания» на десктопе: строка счётчика — в одну линию (находка G1 эксплуатации 09.10.2026). Раньше «внутренний № СЧ-21 · ПК-42» переносился на три строки, а галочки «Подтвердить цифру» и «Стереть показание» ломались посередине: строка вырастала до ~105 px, 23 счётчика давали страницу в 4 160 px. Теперь подписи не переносятся, поля уже, а галочки стоят друг под другом в колонке нужной ширины: строка ≈ 52 px. На телефоне — карточки, как были. */ @media (min-width: 641px) { table.показания td { vertical-align: middle; padding-top: 4px; padding-bottom: 4px; } table.показания td[data-имя="№"] .тусклое, table.показания td[data-имя="Проверка"] label, table.показания td[data-имя="Прошлое"] .мелко, table.показания td[data-имя="Кто"] .мелко { white-space: nowrap; } table.показания td[data-имя="Проверка"] label.ряд { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; line-height: 1.35; } /* Таблица должна помещаться в блок при окне от 1280 px (блок 1020 px, с полосой прокрутки Windows — 1005 px). Честный замер 26.10.2026 (Playwright + Edge с настоящей полосой прокрутки, копия демо-базы, /ku/72047, период 2026-09, 23 счётчика, строка с «Фото счётчика», выбранный источник по очереди во всех строках): при окне 1280 px блок 1005 px, минимальная ширина таблицы — 982 px при «Передал арендатор» (запас 23 px; до сужения отступов списка и поля «Кто передал» было 996, запас 9), 960 при «Фото в Telegram», 955 при «Снято обходом», «Взято среднее», «Из таблицы», «Через бота» (запас 45–50). При 1340 / 1360 / 1500 px (блок 1065 / 1085 / 1225) запас от 83 до 270 px. Для этого боковые поля ячеек по 6 px, шрифт списка и имени — 12 px, как у соседнего текста, «Текущее» уже, у «Источника» и «Кто передал» есть верхняя граница ширины, а отступы внутри списка (слева 6, справа 2 px; стрелку браузер оставляет себе сам) и поля «Кто передал» (по 5 px) уже обычных 8 px (находка H1 эксплуатации). */ table.показания th, table.показания td { padding-left: 6px; padding-right: 6px; } table.показания td[data-имя="Текущее"] input.ячейка { width: 7.5em !important; } /* «Кто передал»: подставленное по умолчанию имя («Эксплуатация Демо») читается целиком — 11.5em / 150 px при 12 px шрифте. «Источник»: список не шире 160 px; два длинных пункта в закрытом списке показаны коротко: «Нет показания: взято среднее» как «Взято среднее», «Загружено из таблицы» как «Из таблицы» (атрибут label у пункта: текст и значение пункта не меняются, полный текст — в title пункта и в подсказке списка). Без label «Загружено из таблицы» (135 px текста) в 160 px не влезало: в закрытом списке было «Загружено из табли…». «Фото в Telegram», «Через бота», «Снято обходом», «Передал арендатор» целиком. Где браузер умеет field-sizing (Chrome/Edge), оба поля берут ширину по выбранному значению: «Снято обходом» занимает меньше места; в остальных — запасные ширины. */ table.показания td[data-имя="Кто"] input { width: 11.5em !important; font-size: 12px; padding-left: 5px; padding-right: 5px; } table.показания td[data-имя="Источник"] select { width: auto; min-width: 9em; max-width: 160px; font-size: 12px; padding-left: 6px; padding-right: 2px; } @supports (field-sizing: content) { table.показания td[data-имя="Кто"] input { width: auto !important; min-width: 7em; max-width: 150px; field-sizing: content; } table.показания td[data-имя="Источник"] select { field-sizing: content; } } table.показания td[data-имя="Текущее"] .проверьте-подпись { white-space: nowrap; } /* «Фото счётчика» (появляется после отказа «меньше прошлого» / нулевой расход): подпись над полем, поле не шире галочек колонки «Проверка» — иначе стандартный «Выбор файла / Не выбран ни один файл» растягивал таблицу шире блока (находка H1 эксплуатации 26.10.2026). Имя выбранного файла обрезается многоточием, кнопка «Выбор файла» остаётся целой. */ table.показания td[data-имя="Проверка"] label.фото-счётчика { display: block; white-space: normal; width: 12em; margin: 2px 0; line-height: 1.3; } table.показания td[data-имя="Проверка"] input.выбор-фото { display: block; width: 100%; max-width: 100%; box-sizing: border-box; font-size: 11px; overflow: hidden; text-overflow: ellipsis; } table.показания td[data-имя="Проверка"] input.выбор-фото::file-selector-button { padding: 2px 6px; margin-right: 4px; font-size: 11px; } } /* --- телефон --- */ @media (max-width: 640px) { main { padding: 12px; } h1 { font-size: 24px; } .kpi { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kpi .значение { font-size: 20px; } table { font-size: 13px; } th, td { padding: 6px 5px; } td.действия { text-align: left; max-width: none; } /* Длинные таблицы движений — карточками, чтобы не ехать вбок. */ /* Сама таблица тоже становится блоком: иначе её ширину задаёт самая широкая графа, строка-грид растягивается вместе с ней и правые поля уезжают за экран. */ table.карточками, table.карточками tbody, table.карточками tfoot { display: block; width: 100%; } table.карточками thead { display: none; } table.карточками tr { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; border-bottom: 1px solid rgba(38,38,38,.14); padding: 6px 0; } table.карточками td { border: none; padding: 1px 0; } table.карточками td[data-имя]::before { content: attr(data-имя) ': '; color: var(--серый); font-size: 11px; } /* Поля в карточках: на телефоне ширины в em из вёрстки вылезают за экран, поэтому тянем их по месту. !important — потому что ширина задана инлайном. */ table.карточками td input, table.карточками td select, table.карточками td textarea { width: 100% !important; max-width: 100% !important; min-width: 0; } table.карточками td { min-width: 0; } /* Подпись под названием («нет кадастрового номера», КН) на десктопе стоит в одну строку инлайном; в карточке она переносится, иначе вылезает из своей колонки и налезает на этаж справа («но1мера»). */ table.карточками td > .мелко { white-space: normal !important; overflow-wrap: anywhere; } table.карточками td[data-имя] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } table.карточками td[data-имя]::before { align-self: end; } /* Первая графа без подписи (название, номер) — заголовок карточки на всю ширину: иначе узкая колонка «1fr» рвёт текст по буквам, когда соседняя колонка «auto» занимает всё место. */ table.карточками td:not([data-имя]):first-child { grid-column: 1 / -1; font-weight: 600; overflow-wrap: anywhere; } /* Пилот раскладки (ревью 05.11.2026): название объекта и «Следующий шаг» — на всю ширину карточки, без подписи «Объект:»; раньше правило «на всю ширину» не касалось ячеек с data-имя, и название жалось в узкую колонку. */ table.карточками td[data-имя="Объект"], table.карточками td[data-имя="Следующий шаг"] { grid-column: 1 / -1; } table.карточками td[data-имя="Объект"]::before, table.карточками td[data-имя="Следующий шаг"]::before { display: none; } /* Должники: имя контрагента — заголовок карточки на всю ширину (в узкой первой колонке оно рвалось по букве), «что» и «объекты» тоже на всю ширину, суммы остаются парами. */ table.должники td:first-child { grid-column: 1 / -1; font-weight: 600; padding-bottom: 2px; overflow-wrap: anywhere; } table.должники td.мелко { grid-column: 1 / -1; } /* Движения по договору: дата и «что» на всю ширину, три суммы в ряд, подписи над числами — без нахлёста подписей друг на друга. */ table.движения tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 8px 0; } table.движения td[data-имя="Дата"], table.движения td[data-имя="Что"] { grid-column: 1 / -1; text-align: left; } table.движения td[data-имя="Дата"] { font-weight: 600; } table.движения td[data-имя="Что"]::before, table.движения td[data-имя="Дата"]::before { display: none; } table.движения td.ч { text-align: left; } table.движения td[data-имя]::before { align-self: start; } /* Таблицы, где каждая графа — поле ввода (счета, показания): на телефоне раскладываем в один столбец, иначе правая колонка уезжает за экран. */ table.формой tr { grid-template-columns: minmax(0, 1fr); } table.формой td, table.формой th { text-align: left; } table.формой td.ч { text-align: left; } table.формой tr { padding: 10px 0; } table.формой td:first-child { font-weight: 600; padding-bottom: 4px; } /* Дата и примечание в одной графе — каждая со своей строки. */ table.карточками td input[type=date] + input { margin-top: 4px; } } @media print { header.шапка, .боковое, .фильтры, form, button { display: none !important; } body { background: #FFF; } } /* --- легенда статусов --- */ .легенда { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--серый); font-size: 12px; margin: 0 0 10px; } .легенда span { display: flex; align-items: center; gap: 6px; } .легенда i { width: 15px; height: 15px; border: 1px solid #C6BFB8; border-radius: 2px; display: inline-block; } /* --- карта аренды и продажи --- */ /* Подложка — картинка от брокера, поверх неё слой многоугольников. Слой тянется ровно по картинке, поэтому координаты из пикселей исходника работают при любом размере экрана. */ .карта-обёртка { position: relative; display: inline-block; max-width: 100%; border: 1px solid #E2E2E2; background: var(--поле); } .карта-подложка { display: block; max-width: 100%; height: auto; } .карта-слой { position: absolute; inset: 0; width: 100%; height: 100%; } /* Карта показывается как есть, без нашей обводки: помещение подсвечивается только под курсором — цветом статуса из наших данных и тонкой рамкой. */ .карта-слой .зона { cursor: pointer; transition: fill-opacity .12s; } .карта-слой .зона:hover { fill-opacity: .85 !important; stroke: #202020; stroke-width: 2; } .карта-слой .номер-зоны { font: 600 13px Inter, sans-serif; fill: #202020; text-anchor: middle; pointer-events: none; } /* Карточка при наведении: ходит за курсором, как подсказка «кто правил». */ .карта-карточка { position: fixed; z-index: 100; max-width: 340px; background: var(--поле); color: var(--текст); border: 1px solid var(--линия); border-radius: 3px; padding: 10px 12px; font-size: 12.5px; box-shadow: 0 8px 22px rgba(0,0,0,.18); pointer-events: none; } .карта-карточка .заголовок { font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 15px; margin-bottom: 6px; } .карта-карточка table { width: 100%; border: none; margin: 0; } .карта-карточка th { width: 42%; text-align: left; font-size: 11px; color: var(--серый); font-weight: 400; text-transform: none; letter-spacing: 0; border: none; padding: 2px 6px 2px 0; white-space: nowrap; } .карта-карточка td { border: none; padding: 2px 0; } .разметка { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 900px) { .разметка { grid-template-columns: minmax(0, 1fr); } } /* --- калькулятор продажи объекта --- */ .таблица-калькулятора { font-size: 12.5px; } .таблица-калькулятора th, .таблица-калькулятора td { padding: 4px 6px; white-space: nowrap; } .таблица-калькулятора input.исход { background: #FFF8E1; border: 1px solid #E6DCC0; border-radius: 2px; padding: 3px 5px; font: inherit; text-align: right; } .таблица-калькулятора input.исход:focus { outline: none; border-color: var(--акцент); } /* Строка красится по статусу помещения — как на карте брокера. */ .таблица-калькулятора tr.статус-сдано td:nth-child(2) { box-shadow: inset 4px 0 0 var(--ст-сдано); } .таблица-калькулятора tr.статус-задаток td:nth-child(2) { box-shadow: inset 4px 0 0 var(--ст-задаток); } .таблица-калькулятора tr.статус-продано td:nth-child(2) { box-shadow: inset 4px 0 0 var(--ст-продано); } .таблица-калькулятора tr.статус-продано td { color: var(--серый); } .полоса-доли { display: flex; height: 26px; border: 1px solid #C6BFB8; border-radius: 3px; overflow: hidden; margin: 6px 0 4px; } .полоса-доли div { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; min-width: 0; } /* Меню: четыре главных раздела, остальное под «Ещё». */ .меню details.ещё { display: inline-block; position: relative; } .меню details.ещё summary { cursor: pointer; list-style: none; padding: 0 2px; } .меню details.ещё summary::-webkit-details-marker { display: none; } .меню details.ещё[open] > a { display: block; } .меню details.ещё > a { display: none; } .меню details.ещё[open] { position: relative; } .меню details.ещё[open] summary + a, .меню details.ещё[open] a { margin-left: 0; } .меню details.ещё[open]::after { content: ''; } .меню details.ещё[open] > a { position: static; padding: 4px 0; } .меню details.ещё[open] { background: var(--поле); border: 1px solid #E2E2E2; border-radius: 3px; padding: 4px 10px; } /* --- проекты: небольшие карточки, карты по этажам, увеличение при наведении --- */ .сетка-проектов { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; } .карточка-проекта { background: var(--поле); border: 1px solid #E2E2E2; border-radius: 3px; padding: 12px 14px 10px; position: relative; } /* Черновик — копия для проверки теории: пунктир, чтобы не путать с объектом компании. */ .карточка-проекта.черновик { border-style: dashed; border-color: var(--акцент); background: #FCFBFA; } .карточка-проекта .заголовок-проекта { font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 18px; } .карточка-проекта .полоса-доли { height: 10px; margin: 8px 0 6px; } .цифры-проекта { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--серый); } .цифры-проекта b { color: var(--текст); } .цифры-проекта .акцент b { color: #7A5C47; } .этажи-проекта { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .этаж-мини { width: calc(50% - 5px); min-width: 130px; } .карта-обёртка.мини { display: block; width: 100%; transition: transform .18s ease; transform-origin: center center; background: #FFF; } .карта-обёртка.мини.раскрыта { z-index: 60; box-shadow: 0 12px 34px rgba(0,0,0,.28); } .карта-обёртка.мини .карта-слой .зона:hover { fill-opacity: .85 !important; stroke: #202020; stroke-width: 2; } .низ-карточки { gap: 12px; margin-top: 10px; } /* Печатные формы: соглашение о расторжении и всё, что подписывают руками. */ .документ { max-width: 780px; background: #fff; border: 1px solid #E6E2DE; padding: 34px 38px; } .документ h1 { font-size: 20px; text-align: center; margin: 0 0 18px; } .документ .строка-даты { display: flex; justify-content: space-between; margin: 0 0 18px; } .документ p, .документ li { line-height: 1.6; } .документ ol { padding-left: 20px; } .документ ol > li { margin-bottom: 8px; } .подписи { display: flex; gap: 40px; margin-top: 34px; } .подписи > div { flex: 1; } .подпись-роль { font-weight: 600; margin-bottom: 4px; } .линия-подписи { border-bottom: 1px solid #202020; height: 34px; } @media print { .не-печатать, nav, header, footer { display: none !important; } .документ { border: 0; padding: 0; max-width: none; } } /* Показание, посчитанное за того, кто не передал: видно, что это не с обхода. */ .ячейка.посчитано { background: #F3EEE9; border-color: #B08F78; } /* Таблица условий внутри печатной формы: сроки и ставки по датам. */ .документ table.условия { width: 100%; border-collapse: collapse; margin: 8px 0; } .документ table.условия th, .документ table.условия td { border: 1px solid #D6D0CA; padding: 5px 8px; text-align: left; } .документ table.условия th { background: #F4F2F0; font-weight: 600; } .документ .реквизиты-заголовок { font-size: 14px; margin: 26px 0 8px; } /* --- окно поверх страницы --- */ dialog.окно { border: 1px solid var(--линия); border-radius: 4px; padding: 0; width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 40px); background: var(--фон); color: var(--текст); box-shadow: 0 20px 60px rgba(0,0,0,.3); } dialog.окно::backdrop { background: rgba(38,38,38,.45); } .окно-тело { padding: 16px 20px 20px; overflow: auto; max-height: calc(100vh - 42px); } .окно-шапка { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .закрыть-окно { font-family: inherit; font-size: 22px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--серый); padding: 0 4px; } .закрыть-окно:hover { color: var(--текст); } /* Узкое окно для короткой формы — «Новый контрагент»: два поля, на 960 px им тесно не бывает. */ dialog.окно.узкое { width: min(520px, calc(100vw - 32px)); } /* «Проекты» в шапке: главный раздел доступен и при свёрнутом меню. Рядом — до пяти избранных разделов, помеченных звёздочкой в боковом меню. */ .верх-проекты { margin-left: 6px; padding: 3px 10px; font-size: 12px; } .избранное { display: inline-flex; gap: 0; flex-wrap: wrap; } .верх-избранное { margin-left: 6px; border-style: dashed; } .верх-избранное.главная { border-style: solid; } /* --- полоса согласования --- */ .полоса-согласования { background: #F1EEEA; border: 1px solid var(--акцент); border-radius: 3px; padding: 8px 12px; margin: 0 0 14px; } .строка-согласования { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 2px 0; } .кнопки-согласования { display: inline-flex; gap: 6px; margin-left: auto; } .кнопки-согласования button { padding: 3px 10px; font-size: 11px; } /* Строка счёта, куда подставились данные из платёжки: видно, что это не ручной ввод. */ tr.подставлено td { background: #F3F7F0; } /* Объекты редактора — раскрывающийся список галочек */ .выбор-объектов summary { cursor: pointer; padding: 6px 8px; border: 1px solid var(--линия, #ddd); min-width: 12em; } .выбор-объектов .список-объектов { max-height: 16em; overflow: auto; display: grid; gap: 2px; padding: 6px 2px; } /* Плашка согласования: утвердить — зелёным, отклонить — тёмно-коричневым (красного у нас нет). */ .кнопки-согласования button[data-решение="согласовано"] { background: #86E86E; border-color: #86E86E; color: #262626; } .кнопки-согласования button[data-решение="отклонено"] { background: #7A5C47; border-color: #7A5C47; color: #FAFAFA; } /* Весь экран: содержимое во всю ширину, от шапки остаётся тонкая полоса — ☰ слева (разделы открываются как обычно), избранное и кнопка «свернуть» справа. Меню при входе прячется. */ body.весь-экран .шапка .лого, body.весь-экран .шапка .верх-проекты, body.весь-экран .шапка .кто { display: none; } body.весь-экран .шапка { padding-top: 4px; padding-bottom: 4px; } body.весь-экран .шапка .верх { padding-bottom: 0; align-items: center; } body.весь-экран #весь-экран { margin-left: auto; } body.весь-экран main { max-width: none; padding-top: 10px; } /* Меню свёрнуто — место слева отдаём странице, а не оставляем пустым полем по бокам. */ body.меню-скрыто main { max-width: none; margin: 0; } body.весь-экран .обёртка-таблицы { max-height: calc(100vh - 90px); } #весь-экран { margin-left: 4px; } /* Претензия: деловое письмо — бланк, адресат справа, таблицы расчёта с рамками. */ .претензия .бланк { text-align: center; border-bottom: 2px solid var(--линия); padding-bottom: 8px; margin-bottom: 14px; font-size: 12px; } .претензия .бланк-орг { font-weight: 700; font-size: 14px; } .претензия table.шапка-письма { width: 100%; margin-bottom: 8px; } .претензия table.шапка-письма td { vertical-align: top; border: 0; padding: 0; } .претензия td.исходящий { width: 45%; } .претензия td.адресат { width: 55%; } .претензия h1.заголовок-претензии { text-align: center; margin: 18px 0 2px; } .претензия .подзаголовок-претензии { text-align: center; font-weight: 600; } .претензия p { text-align: justify; margin: 0 0 8px; } .претензия table.расчёт, .претензия table.реквизиты-оплаты { border-collapse: collapse; width: 100%; margin: 6px 0 10px; } .претензия table.расчёт th, .претензия table.расчёт td, .претензия table.реквизиты-оплаты td { border: 1px solid #BDBDBD; padding: 4px 8px; } .претензия tr.итог td { font-weight: 700; } .претензия .сноска { font-size: 12px; color: var(--серый); } .претензия table.подпись-претензии { width: 100%; margin-top: 28px; } .претензия table.подпись-претензии td { border: 0; } .претензия td.справа { text-align: right; } /* Фото помещения: сетка превью, по щелчку — оригинал. */ .галерея { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 10px 0; } .галерея figure { margin: 0; } .галерея img { width: 100%; height: 140px; object-fit: cover; border: 1px solid var(--рамка); display: block; } /* ---- обходы, обращения, потери ---- */ .потери-тревога td { background: var(--долг-слабо); } tr.просрочено td { background: var(--долг-слабо); } .тревога-текст { color: #7A5C47; font-weight: 700; } .метка.авария { background: #7A5C47; color: #fff; font-weight: 600; } .пункт-обхода { background: var(--поле); border: 1px solid var(--рамка); border-left: 4px solid var(--рамка); border-radius: 4px; padding: 10px 12px; margin: 0 0 10px; scroll-margin-top: 70px; } .пункт-обхода.незакрыт { border-left-color: #7A5C47; border-left-width: 6px; } .пункт-обхода.готов { border-left-color: var(--зелёный); } .сезонный-обход { margin: 4px 0 0; } .пункт-заголовок { font-weight: 600; } .пункт-проблема { color: #7A5C47; font-weight: 600; font-size: 12px; margin-top: 4px; } .пункт-обхода textarea { width: 100%; box-sizing: border-box; margin-top: 4px; } .выбор { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .выбор label { flex: 1 1 28%; min-width: 92px; position: relative; } .выбор input { position: absolute; opacity: 0; pointer-events: none; } .выбор span { display: block; text-align: center; padding: 10px 6px; border: 1px solid var(--рамка); border-radius: 4px; cursor: pointer; background: var(--фон); } .выбор input:checked + span { background: var(--линия); color: var(--фон); border-color: var(--линия); } .выбор input[value="замечание"]:checked + span { background: #7A5C47; border-color: #7A5C47; color: #fff; } .выбор input:focus-visible + span { outline: 2px solid var(--акцент); } .файл-кнопка { cursor: pointer; } .фото-ряд { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .фото-ряд figure { margin: 0; max-width: 96px; } .фото-ряд img { width: 96px; height: 96px; object-fit: cover; border-radius: 3px; display: block; } .фото-ряд > a img { width: 140px; height: 140px; } .фото-ряд figcaption { font-size: 11px; color: #7A5C47; font-weight: 600; } .прогресс { height: 6px; background: var(--рамка); border-radius: 3px; overflow: hidden; margin: 6px 0 4px; } .прогресс > div { height: 100%; background: var(--акцент); } .низ-обхода { position: sticky; bottom: 0; background: var(--фон); border-top: 1px solid var(--рамка); padding: 10px 0; margin-top: 12px; } .пункт-чеклиста { display: grid; grid-template-columns: 1.1fr 2fr 1.6fr 1.3fr auto auto 4em auto; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--рамка); } .пункт-чеклиста input:not([type=checkbox]), .пункт-чеклиста select { width: 100%; box-sizing: border-box; min-width: 0; } .пункт-чеклиста.выключен { opacity: .5; } @media (max-width: 760px) { .пункт-чеклиста { grid-template-columns: 1fr 1fr; } .пункт-чеклиста input[name="пункт"], .пункт-чеклиста input[name="подсказка"] { grid-column: 1 / -1; } .выбор span { padding: 13px 6px; } } .листовка { max-width: 640px; margin: 0 auto; text-align: center; padding: 28px 24px; border: 1px solid var(--рамка); background: #fff; } .листовка h1 { font-size: 36px; line-height: 1.15; margin: 12px 0; } .листовка-марка { font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--акцент-текст); font-size: 18px; } .листовка-qr svg { width: 280px; height: 280px; } .листовка-ссылка { font-size: 13px; word-break: break-all; } .листовка ol { text-align: left; display: inline-block; margin: 10px auto; } .листовка-авария { font-weight: 600; } body.публично { background: var(--фон); color: var(--текст); } .публично-лист { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; } .публично-лист .поля { display: grid; grid-template-columns: 1fr; gap: 10px; } .публично-лист label { display: block; } .публично-лист label.ряд { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: center; } .публично-лист label.ряд input { width: auto; flex: none; } .публично-лист input:not([type=checkbox]):not([type=radio]), .публично-лист select, .публично-лист textarea { width: 100%; box-sizing: border-box; font-size: 16px; padding: 8px; } .публично-лист button { font-size: 16px; padding: 10px 18px; margin-top: 10px; } .ловушка { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .оценка { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 36px; } .оценка input { position: absolute; opacity: 0; } .оценка label { color: var(--серый); cursor: pointer; } .оценка input:checked ~ label, .оценка label:hover, .оценка label:hover ~ label { color: var(--золото); } @media print { .листовка { border: 0; } } .обращения-реестр td { vertical-align: top; } .номер-обращения { font-weight: 600; } .исполнитель { color: var(--акцент-текст); } .звёзды-строка { color: var(--серый); font-size: 13px; letter-spacing: 1px; } .звёзды-строка .горит { color: var(--золото); } .строка-ленты td { background: #F6F4F2; padding-top: 2px; } .лента-строка { border-left: 3px solid var(--рамка); padding: 2px 0 2px 8px; margin: 4px 0; } /* Оценка после выполнения — как на маркетплейсе: крупные звёзды и подпись под ними. */ .оценка-крупно { text-align: center; margin: 14px 0; } .оценка-крупно .звёзды { display: inline-flex; flex-direction: row-reverse; gap: 8px; font-size: 46px; line-height: 1; } .оценка-крупно input { position: absolute; opacity: 0; width: 1px; height: 1px; } .оценка-крупно label { color: var(--серый); cursor: pointer; transition: transform .1s, color .1s; } .оценка-крупно input:checked ~ label, .оценка-крупно label:hover, .оценка-крупно label:hover ~ label { color: var(--золото); } .оценка-крупно label:hover { transform: scale(1.12); } .оценка-крупно input:focus-visible + label { outline: 2px solid var(--акцент); outline-offset: 2px; } .подпись-оценки { font-family: 'GT America Compressed', 'Inter', sans-serif; text-transform: uppercase; font-size: 17px; margin-top: 6px; min-height: 22px; } .видно-арендатору { border-left: 3px solid var(--акцент); padding-left: 8px; margin: 8px 0; } /* Личный кабинет арендатора: телефон, одна колонка, крупные кнопки. */ .лк { max-width: 720px; } .лк h2 { font-size: 16px; margin-top: 22px; } .лк-меню { font-size: 13px; margin: 6px 0 4px; } .лк-меню a { border-bottom: 1px solid #D6D0CA; } .лк-цифры { margin: 6px 0; } .акцент-текст { color: #7A5C47; font-weight: 700; } .лк .блок { background: var(--поле); border: 1px solid var(--рамка); border-radius: 4px; padding: 10px 12px; margin: 0 0 10px; } .лк .реквизиты-оплаты td:first-child { color: var(--серый); padding-right: 10px; } .запуск a.шаг { border-bottom: 0; white-space: nowrap; } .запуск a.шаг.ок { color: var(--текст); } .запуск a.шаг.нет { color: #7A5C47; font-weight: 700; } /* Блок «Юрист» на странице документа (юрист.py): статус согласования и отправка юристу. */ .блок-юриста { border: 1px solid var(--рамка); border-left: 3px solid var(--акцент); background: var(--поле); padding: 10px 12px; margin: 10px 0 14px; } .блок-юриста label { max-width: 100%; min-width: 0; } .блок-юриста input[type=file] { max-width: 100%; width: 100%; } .документ-юристу { border-top: 1px solid var(--рамка); padding: 12px 0; } .документ-юристу:target { background: var(--долг-слабо); } /* Шапка на телефоне: имя, «пароль», «выйти» и «везде» важнее подписи роли — без неё строка не переносится. */ @media (max-width: 560px) { .роль-в-шапке { display: none; } } /* --- тёмное боковое меню (04.10.2026) --- Как в программах для стройки: тёмная колонка, у каждой группы значок, текущий раздел подсвечен акцентом бренда. Только вид: порядок, избранное и сворачивание живут в базе.html. */ .боковое { background: #20242B; border-right: 0; color: #D6D8DD; flex-basis: 224px; width: 224px; padding: 12px 0 24px; scrollbar-width: thin; scrollbar-color: #3A4050 transparent; } .боковое .группа { color: #8C93A3; padding: 18px 18px 6px; font-size: 11px; letter-spacing: .08em; gap: 10px; justify-content: flex-start; } .боковое .группа::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--значок) center / contain no-repeat; mask: var(--значок) center / contain no-repeat; } .боковое .группа .галка { margin-left: auto; } .боковое button.группа:hover { color: #FFFFFF; } .боковое .пункт { color: #D6D8DD; padding: 8px 16px 8px 18px; margin: 1px 8px; border-left: 0; border-radius: 8px; } .боковое .пункт:hover { background: #2A2F39; color: #FFFFFF; } .боковое .пункт.тут { background: #343A48; color: #FFFFFF; font-weight: 600; box-shadow: inset 3px 0 0 var(--акцент); } .боковое .ряд button.звезда { color: #6C7384; padding-right: 14px; } .боковое .ряд button.звезда:hover, .боковое .ряд button.звезда.горит { color: var(--золото); } .боковое .ряд.над { box-shadow: inset 0 2px 0 var(--акцент); } .боковое .группа[data-группа="объекты"] { --значок: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 21h18M5 21V7l7-4 7 4v14M9 9h1M14 9h1M9 13h1M14 13h1M9 17h6%22/%3E%3C/svg%3E"); } .боковое .группа[data-группа="аренда"] { --значок: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%227%22 width=%2218%22 height=%2213%22 rx=%222%22/%3E%3Cpath d=%22M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18%22/%3E%3C/svg%3E"); } .боковое .группа[data-группа="деньги"] { --значок: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 21V4h5a4 4 0 0 1 0 8H7M7 16h8%22/%3E%3C/svg%3E"); } .боковое .группа[data-группа="эксплуатация"] { --значок: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z%22/%3E%3C/svg%3E"); } .боковое .группа[data-группа="справочники"] { --значок: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4h12a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3zM8 8h7M8 12h7%22/%3E%3C/svg%3E"); } .боковое .группа[data-группа="служебное"] { --значок: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h10M18 7h2M4 17h2M10 17h10%22/%3E%3Ccircle cx=%2216%22 cy=%227%22 r=%222%22/%3E%3Ccircle cx=%228%22 cy=%2217%22 r=%222%22/%3E%3C/svg%3E"); } .боковое .группа[data-группа="чат"] { --значок: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h16v11H9l-5 4z%22/%3E%3C/svg%3E"); } .боковое .группа[data-группа="согласование"] { --значок: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 11l2 2 4-4M5 4h14v16H5z%22/%3E%3C/svg%3E"); } .боковое .группа[data-группа="проектный_отдел"] { --значок: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 17l4-4 3 3 5-6 6 7M3 21h18M4 5h6v4H4z%22/%3E%3C/svg%3E"); } /* --- помощник в шапке (04.10.2026): плашка ЭкспБота, уведомления, лицо пользователя --- */ .шапка .верх { align-items: center; } .шапка .помощник { display: flex; align-items: center; gap: 8px; } .плашка-помощника { display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 12px; border-radius: 999px; background: #F3F0ED; border: 1px solid var(--рамка); text-decoration: none; color: var(--текст); } .плашка-помощника:hover { border-color: var(--акцент); } .имя-помощника { display: flex; flex-direction: column; line-height: 1.1; text-align: right; } .имя-помощника b { font-size: 12px; } .имя-помощника i { font-style: normal; font-size: 10px; color: var(--серый); } .лицо-помощника { width: 28px; height: 28px; border-radius: 50%; background: #20242B; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; } .значок-шапки { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--текст); border: 1px solid var(--рамка); background: #fff; text-decoration: none; } a.значок-шапки:hover { border-color: var(--акцент); } .значок-шапки.лицо { background: #7A5C47; color: #fff; border-color: #7A5C47; font-weight: 700; font-size: 13px; } body.весь-экран .шапка .помощник { display: none; } @media (max-width: 700px) { .имя-помощника { display: none; } .плашка-помощника { padding: 3px; } } /* «Мои объекты»: дела строки идут списком с промежутком — главная кнопка не налезает на следующую ссылку (находка E1 эксплуатации, 08.10.2026). */ td[data-имя="Что сделать"] > div { line-height: 1.4; } td[data-имя="Что сделать"] > div + div { margin-top: 10px; } td[data-имя="Что сделать"] > div:has(> .кнопка.дело) { margin-bottom: 4px; } td[data-имя="Что сделать"] .кнопка.дело { display: inline-block; } /* --- телефон: страница не шире экрана (находки A10 и Д11, 08.10.2026) --- */ /* Длинное слово без пробелов (номер договора, ссылка, название фирмы) переносится, а не растягивает страницу. На компьютере — break-word: anywhere сжимало минимальную ширину граф, и слова в таблицах рвались по буквам («Электроэнергия / я», даты «28.01.2026»; ревью 08.10.2026). anywhere остаётся только для телефона (ниже). */ h1, h2, h3, p, li, label, .мелко, .внимание, summary { overflow-wrap: break-word; } td, th { overflow-wrap: break-word; } img, svg, video, canvas { max-width: 100%; } pre { max-width: 100%; overflow-x: auto; } @media (max-width: 640px) { h1, h2, h3, p, li, label, .мелко, .внимание, summary { overflow-wrap: anywhere; } td, th { overflow-wrap: break-word; } /* Поле или список с длинным текстом внутри не шире экрана: иначе