/* industry.css — оформление «Industry». * * Слой включается галочкой в настройках: класс theme-industry на . * Выключили — возвращается прежний вид, потому что здесь нет ни одного * правила без этого класса. Разметку не меняет: работает по тем же * классам, что и styles.css. * * Специфичность: `body.theme-industry` — это (0,2,1), чего хватает против * почти всего в styles.css. Там, где в styles.css правила с идентификатором * (блок сетки платежей, #page-scheduleGrid), здесь тоже добавлен * идентификатор — иначе слой молча проиграет. * * Шрифты: Fira Sans + Fira Sans Condensed из /fonts.css, локально. * В макете значились Barlow и Barlow Condensed, но у них нет кириллицы, * а интерфейс русский; Fira — ближайшая суперсемья с полным набором. */ /* ══════════════════════════════════════════════════════════════════ ТОКЕНЫ ══════════════════════════════════════════════════════════════════ */ body.theme-industry { --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-accent: #5980a6; --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d; --color-neutral-700: #5d5d60; --color-neutral-800: #424244; --color-neutral-900: #2b2b2d; --color-accent-100: #eef6ff; --color-accent-200: #d6ebff; --color-accent-300: #b5d9fd; --color-accent-400: #94bce3; --color-accent-500: #749dc4; --color-accent-600: #597ea3; --color-accent-700: #416180; --color-accent-800: #2c455d; --color-accent-900: #1d2d3d; /* Цвета состояний взносов. Значения зафиксированы в передаче дизайна и совпадают со смыслом в scheduleCellState(): их менять нельзя. */ --st-paid-bg: #b7dfb9; --st-paid-fg: #14351a; --st-over-bg: #f4a6a0; --st-over-fg: #46110c; --st-today-bg: #d5d8de; --st-today-fg: #23262c; --st-soon-bg: #a9c9f5; --st-soon-fg: #10294f; --st-month-bg: #f6e29a; --st-month-fg: #453708; --st-future-bg: #ffffff; --st-future-fg: #667085; --color-growth: #2d6a32; --color-debt: #9b2b22; --color-debt-line: #e7a39d; --color-dot: #e0685f; --font-heading: "Fira Sans Condensed", "Barlow Condensed", system-ui, sans-serif; --font-body: "Fira Sans", "Barlow", system-ui, sans-serif; --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px; --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent); /* Мосты к токенам styles.css: всё, что слой не переопределит поимённо, всё равно попадёт в нужную палитру. */ --bg: var(--color-bg); --panel: var(--color-bg); --text: var(--color-text); --muted: var(--color-neutral-700); --line: var(--color-divider); --primary: var(--color-accent); --primary-weak: var(--color-accent-100); --success: var(--color-growth); --warning: #8a6d1f; --danger: var(--color-debt); --shadow: none; --page-pad: var(--space-8); --page-pad-sm: var(--space-4); --page-pad-xs: var(--space-4); background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px; line-height: 1.55; } /* ══════════════════════════════════════════════════════════════════ БАЗОВЫЕ ЭЛЕМЕНТЫ Специфичность здесь намеренно низкая — (0,1,2). Правила слоя для отдельных блоков идут выше по весу и перекрывают эти без ухищрений. Там, где правило из styles.css оказывается сильнее (их всего десяток, и все с двумя классами или идентификатором), стоит точечный перебой в конце файла, а не общее поднятие веса: однажды поднятое, оно перебило собственные правила слоя — поле суммы в окне приёма вернулось к 36px, а кнопки на телефоне к 36px вместо 44px. ══════════════════════════════════════════════════════════════════ */ body.theme-industry h1, body.theme-industry h2, body.theme-industry h3, body.theme-industry h4, body.theme-industry h5 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-text); } body.theme-industry h1 { font-size: 40px; margin: 0; } body.theme-industry h2 { font-size: 22px; margin: 0 0 var(--space-2); } body.theme-industry h3 { font-size: 17px; margin: 0 0 var(--space-2); } body.theme-industry a { color: var(--color-accent-700); text-underline-offset: 3px; } body.theme-industry a:hover { color: var(--color-accent-800); } body.theme-industry :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } body.theme-industry ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* Цифры выравниваем по разрядам: суммы стоят в столбик и читаются как в бухгалтерской книге, а не «пляшут». */ body.theme-industry { font-variant-numeric: tabular-nums; } /* — кнопки — Тут же уходит старая «чернильная» проблема: никаких градиентов и скруглений, рамка в 1px. */ body.theme-industry button { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2; min-height: 36px; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: 0; border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-bg); box-shadow: none; transform: none; filter: none; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } body.theme-industry button:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); box-shadow: none; filter: none; transform: none; } body.theme-industry button:active { background: var(--color-accent-700); border-color: var(--color-accent-700); } body.theme-industry button:disabled { opacity: 0.45; cursor: not-allowed; } body.theme-industry button.secondary, body.theme-industry button.link { background: transparent; border-color: var(--color-divider); color: var(--color-text); } body.theme-industry button.secondary:hover, body.theme-industry button.link:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-text); } body.theme-industry button.link { border-color: transparent; color: var(--color-accent-700); padding: var(--space-2) var(--space-2); } body.theme-industry button.danger { background: transparent; border-color: var(--color-debt-line); color: var(--color-debt); } body.theme-industry button.danger:hover { background: color-mix(in srgb, var(--color-debt) 10%, transparent); border-color: var(--color-debt); color: var(--color-debt); } /* — поля ввода — */ body.theme-industry label { display: grid; gap: 5px; font-family: var(--font-body); font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); } body.theme-industry input, body.theme-industry select, body.theme-industry textarea { min-height: 36px; padding: 6px 10px; font-family: var(--font-body); font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0; box-shadow: none; } body.theme-industry input:hover, body.theme-industry select:hover, body.theme-industry textarea:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } body.theme-industry input:focus, body.theme-industry select:focus, body.theme-industry textarea:focus, body.theme-industry input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } body.theme-industry textarea { min-height: 90px; } body.theme-industry input[type="checkbox"] { min-height: 0; accent-color: var(--color-accent); } /* — таблицы — */ body.theme-industry table { font-size: 14px; } body.theme-industry th { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); border-bottom: 1px solid var(--color-divider); padding: var(--space-2) var(--space-3); } body.theme-industry td { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); padding: var(--space-2) var(--space-3); } body.theme-industry tbody tr:hover { background: var(--color-neutral-100); } /* ══════════════════════════════════════════════════════════════════ ОБОЛОЧКА ══════════════════════════════════════════════════════════════════ */ body.theme-industry .shell { background: var(--color-bg); } /* Точка перелома у этого оформления одна — 760px, как в макете. У прежнего интерфейса она 1100px: там сайдбар уже уезжает за экран и превращается в бургер-меню. Между 761 и 1100 получалось противоречие — меню спрятано, а колонка под него осталась, и весь контент сжимался в 244px. Поэтому здесь мобильные правила прежнего слоя отменяются до самой точки 760px. */ @media (min-width: 761px) { body.theme-industry .shell { grid-template-columns: 244px minmax(0, 1fr); } /* Свёрнутое меню. styles.css:81 сжимает колонку до 64px правилом body.sidebar-collapsed .shell, но специфичность у него та же, что у правила выше, а industry.css грузится позже — и выигрывал он. Меню оставалось шириной 244px: подписи прятались, а тёмная колонка во весь рост оставалась, с мелкими иконками по центру. */ body.theme-industry.sidebar-collapsed .shell { grid-template-columns: 64px minmax(0, 1fr); } body.theme-industry .sidebar { position: sticky; top: 0; left: auto; z-index: auto; width: auto; /* См. .sidebar в styles.css: на iOS 100vh больше видимой высоты, и подвал с кнопкой уходил под панель браузера. */ height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; padding: 0; transform: none; box-shadow: none; } body.theme-industry .mobile-menu-btn { display: none; } /* styles.css:2742 прячет кнопку сворачивания с 1100px — у прежнего интерфейса там меню уже уехало за экран. Здесь оно остаётся на месте до 760px, значит и кнопка нужна: без неё свёрнутое меню между 761 и 1100 нечем было развернуть. */ body.theme-industry .sidebar-toggle { display: flex; } /* Отменяем отмену свёрнутого меню. styles.css:2706-2750 внутри @media (max-width: 1100px) разбирает свёрнутое состояние обратно: возвращает подписи пунктов, словесный логотип и пилюлю «API online», растягивает кнопки списка на всю ширину и прячет кнопку сворачивания. Для прежнего интерфейса это верно — там с 1100px меню уезжает за экран, и «свёрнутый» вид не имеет смысла. Здесь меню остаётся на месте до 760px. Между 761 и 1100 получалось худшее из двух: рейка шириной 64px, набитая содержимым развёрнутого меню. Подписи и пилюля лезли за край, а кнопка разворота выдавливалась за пределы рейки и обрезалась — на планшете меню нечем было вернуть. */ body.theme-industry.sidebar-collapsed .brand span, body.theme-industry.sidebar-collapsed .brand strong, body.theme-industry.sidebar-collapsed .nav-label, body.theme-industry.sidebar-collapsed .sidebar-footer small, body.theme-industry.sidebar-collapsed .sidebar-footer #apiStatus { display: none; } body.theme-industry.sidebar-collapsed .nav button { justify-content: center; width: 44px; height: 40px; margin: 0 auto; padding: 9px; gap: 0; } body.theme-industry .sidebar-backdrop { display: none; } body.theme-industry .topbar { position: sticky; top: 0; z-index: 20; margin: 0; } } body.theme-industry .sidebar { background: var(--color-accent-900); color: var(--color-accent-100); border-right: 0; } body.theme-industry .brand { padding: var(--space-6) var(--space-6) var(--space-4); gap: var(--space-2); border-bottom: 0; } body.theme-industry .brand-mark { display: none; } /* В свёрнутом меню знак возвращается. В этом оформлении шапка меню — словесный логотип «INSTALLMENT GO», а картинка-знак скрыта. При сворачивании текст прячется по общему правилу styles.css:496, и наверху рейки оставалось пустое место в 72px: меню выглядело безымянным. */ body.theme-industry.sidebar-collapsed .brand-mark { display: grid; width: 36px; height: 36px; border-radius: 0; background: var(--color-accent-800); } body.theme-industry.sidebar-collapsed .brand { padding: var(--space-4) 0; justify-content: center; } body.theme-industry .brand strong { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-100); } body.theme-industry .brand span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-400); } body.theme-industry .nav { padding: var(--space-2) var(--space-3) var(--space-4); gap: var(--space-6); } body.theme-industry .nav-group { gap: 2px; } body.theme-industry .nav-group-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-400); padding: 0 10px 6px; } body.theme-industry .nav button[data-page] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--color-accent-100); font-family: var(--font-body); font-size: 14px; font-weight: 400; text-align: left; } body.theme-industry .nav button[data-page]:hover { background: var(--color-accent-800); border-color: transparent; color: var(--color-accent-100); } body.theme-industry .nav button[data-page].active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-900); font-weight: 500; } body.theme-industry .nav-icon { width: 18px; height: 18px; flex: none; stroke-width: 1.5; } body.theme-industry .nav-label { flex: 1; } /* Бейдж у пункта меню: число просроченных договоров. Рисует app.js. */ body.theme-industry .nav-badge { font-size: 11px; font-weight: 600; padding: 1px 6px; background: var(--st-over-bg); color: var(--st-over-fg); } body.theme-industry .sidebar-footer { border-top: 1px solid var(--color-accent-800); padding: var(--space-4) var(--space-6); gap: var(--space-2); background: transparent; } body.theme-industry .sidebar-footer small { color: var(--color-accent-300); font-size: 12px; } body.theme-industry .sidebar-footer .pill { background: var(--color-accent-800); color: var(--color-accent-200); border-radius: 0; } body.theme-industry .sidebar-toggle { border-radius: 0; background: transparent; border: 1px solid var(--color-accent-800); color: var(--color-accent-300); min-height: 32px; } /* В свёрнутом виде это единственный способ вернуть меню, поэтому кнопка должна читаться: прежние 32×32 прозрачным контуром на тёмном фоне терялись, и найти её было нельзя. Размер — как у иконок списка. */ body.theme-industry.sidebar-collapsed .sidebar-toggle { width: 40px; height: 40px; min-height: 40px; background: var(--color-accent-800); border-color: var(--color-accent-700); color: var(--color-accent-100); } body.theme-industry.sidebar-collapsed .sidebar-footer { padding: var(--space-3) 0; justify-content: center; } body.theme-industry .sidebar-toggle:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); color: var(--color-accent-100); } /* — верхняя полоса — */ body.theme-industry .main { background: var(--color-bg); } body.theme-industry .topbar { background: var(--color-accent-100); border-bottom: 1px solid var(--color-accent-300); padding: var(--space-3) var(--space-8); box-shadow: none; } body.theme-industry .eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 4px; } body.theme-industry .topbar h1 { font-size: 30px; letter-spacing: 0.01em; } body.theme-industry .account-info { font-family: var(--font-body); font-weight: 500; color: var(--color-text); background: transparent; border: 0; border-left: 1px solid var(--color-accent-300); border-radius: 0; padding-left: var(--space-3); } body.theme-industry .topbar-icon-btn { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 0; border: 1px solid var(--color-divider); background: transparent; color: var(--color-accent-800); } body.theme-industry .topbar-icon-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-accent-900); } body.theme-industry .topbar-icon-btn.danger { border-color: transparent; color: var(--color-neutral-700); } body.theme-industry .notification-dot { background: var(--color-dot); border-radius: 0; width: 7px; height: 7px; } body.theme-industry .page { padding: var(--space-8); } /* ══════════════════════════════════════════════════════════════════ ОБЩИЕ БЛОКИ ══════════════════════════════════════════════════════════════════ */ body.theme-industry .panel { border: 1px solid var(--color-divider); border-radius: 0; background: transparent; box-shadow: none; padding: var(--space-6); } body.theme-industry .panel-head { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-3); margin-bottom: var(--space-4); } body.theme-industry .panel-head h2 { margin: 0; } body.theme-industry .item { border: 1px solid var(--color-divider); border-radius: 0; background: transparent; padding: var(--space-3) var(--space-4); } body.theme-industry .item:hover { border-color: var(--color-accent-400); background: var(--color-neutral-100); } body.theme-industry .item strong { font-weight: 500; color: var(--color-accent-800); } body.theme-industry .empty { border: 1px solid var(--color-divider); border-radius: 0; padding: var(--space-8); color: var(--color-neutral-700); } body.theme-industry .muted { color: var(--color-neutral-700); } body.theme-industry .pill { border-radius: 0; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; padding: 3px 10px; } body.theme-industry .pill.neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } body.theme-industry .pill.success { background: var(--st-paid-bg); color: var(--st-paid-fg); } body.theme-industry .pill.warning { background: var(--st-month-bg); color: var(--st-month-fg); } body.theme-industry .pill.danger { background: var(--st-over-bg); color: var(--st-over-fg); } body.theme-industry .pill.info, body.theme-industry .pill.purple { background: var(--color-accent-100); color: var(--color-accent-800); } body.theme-industry .toast { top: auto; bottom: max(24px, env(safe-area-inset-bottom, 0px)); border-radius: 0; padding: 10px 16px; background: var(--color-accent-900); color: var(--color-bg); box-shadow: var(--shadow-md); font-family: var(--font-body); font-weight: 500; font-size: 14px; } body.theme-industry .modal { background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); } body.theme-industry .modal-card { border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-bg); box-shadow: var(--shadow-lg); padding: var(--space-6); } body.theme-industry .badge, body.theme-industry .motion-badge { border-radius: 0; background: var(--color-accent-100); color: var(--color-accent-800); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } /* «Чертёжная» рамка с засечками по углам — фирменный приём системы. Вешается на элемент вместе с четырьмя . */ body.theme-industry .blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; } body.theme-industry .blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; } body.theme-industry .blueprint > .corner::before, body.theme-industry .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; } body.theme-industry .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; } body.theme-industry .blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; } body.theme-industry .blueprint > .corner.tl { top: -6px; left: -6px; } body.theme-industry .blueprint > .corner.tr { top: -6px; right: -6px; } body.theme-industry .blueprint > .corner.bl { bottom: -6px; left: -6px; } body.theme-industry .blueprint > .corner.br { bottom: -6px; right: -6px; } /* Сегмент-контрол: ряд кнопок в общей рамке. */ body.theme-industry .ind-seg { display: inline-flex; border: 1px solid var(--color-divider); background: transparent; } body.theme-industry .ind-seg > button { border: 0; border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 13px; font-weight: 400; min-height: 34px; padding: 0 12px; white-space: nowrap; } body.theme-industry .ind-seg > button + button { border-left: 1px solid var(--color-divider); } body.theme-industry .ind-seg > button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); } body.theme-industry .ind-seg > button.active { background: var(--color-accent); color: var(--color-bg); } /* Кикер секции: «01 · Название» с линией под заголовком. */ body.theme-industry .ind-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); } body.theme-industry .ind-section-title { border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-2); margin-bottom: var(--space-4); } /* ══════════════════════════════════════════════════════════════════ МОБИЛЬНАЯ ОБОЛОЧКА: нижний таб-бар и шторка «Ещё» Строит industry.js, поэтому классы свои. ══════════════════════════════════════════════════════════════════ */ body.theme-industry .ind-tabbar { display: none; } body.theme-industry .ind-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; } body.theme-industry .ind-sheet.hidden { display: none; } body.theme-industry .ind-sheet-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); } body.theme-industry .ind-sheet-panel { position: relative; width: 100%; max-height: 82vh; overflow: auto; background: var(--color-bg); border-top: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); } body.theme-industry .ind-sheet-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-heading); font-weight: 600; font-size: 18px; text-transform: uppercase; margin-bottom: var(--space-4); } body.theme-industry .ind-sheet-close { width: 44px; height: 44px; min-height: 44px; padding: 0; border-color: transparent; background: transparent; color: var(--color-text); font-size: 18px; } body.theme-industry .ind-sheet-close:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: transparent; color: var(--color-text); } body.theme-industry .ind-sheet-group { margin-bottom: var(--space-6); } body.theme-industry .ind-sheet-group-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: var(--space-2); } body.theme-industry .ind-sheet-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } body.theme-industry .ind-sheet-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: var(--space-2); border: 0; border-radius: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 12px; font-weight: 400; text-align: center; line-height: 1.2; } body.theme-industry .ind-sheet-tile:hover { background: var(--color-neutral-100); border: 0; color: var(--color-text); } body.theme-industry .ind-sheet-tile.active { background: var(--color-accent); color: var(--color-bg); } body.theme-industry .ind-sheet-tile-icon svg { width: 22px; height: 22px; stroke-width: 1.5; display: block; } body.theme-industry .ind-sheet-logout { width: 100%; min-height: 44px; background: transparent; border-color: var(--color-debt-line); color: var(--color-debt); } body.theme-industry .ind-sheet-logout:hover { background: color-mix(in srgb, var(--color-debt) 10%, transparent); border-color: var(--color-debt); color: var(--color-debt); } body.theme-industry.ind-sheet-open { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════ ТЕЛЕФОН: точка перелома 760px, как в дизайне ══════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { body.theme-industry .shell { grid-template-columns: minmax(0, 1fr); } /* Боковое меню на телефоне не нужно: снизу есть таб-бар. */ body.theme-industry .sidebar, body.theme-industry .sidebar-backdrop, body.theme-industry .mobile-menu-btn { display: none !important; } body.theme-industry .topbar { min-height: 52px; padding: var(--space-2) var(--space-4); } body.theme-industry .topbar h1 { font-size: 20px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-industry .eyebrow { font-size: 10px; margin-bottom: 2px; } body.theme-industry .page { padding: var(--space-4) var(--space-4) calc(58px + var(--space-8) + env(safe-area-inset-bottom, 0px)); } body.theme-industry .panel { padding: var(--space-4); } /* Палец: любая кнопка не ниже 44px. */ body.theme-industry button { min-height: 44px; } body.theme-industry .topbar-icon-btn { width: 44px; height: 44px; min-height: 44px; border-color: transparent; } body.theme-industry .ind-seg > button { min-height: 42px; } /* На экране входа нижнего меню быть не должно: разделов ещё нет. */ body.theme-industry.auth-mode .ind-tabbar, body.theme-industry.auth-mode .support-report-fab { display: none; } body.theme-industry .ind-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; background: var(--color-accent-900); padding-bottom: env(safe-area-inset-bottom, 0px); } body.theme-industry .ind-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; min-height: 58px; padding: 6px 2px; border: 0; border-top: 2px solid transparent; border-radius: 0; background: transparent; color: var(--color-accent-500); font-family: var(--font-body); font-size: 11px; font-weight: 400; } body.theme-industry .ind-tab:hover { background: transparent; border-top-color: transparent; color: var(--color-accent-400); } body.theme-industry .ind-tab.active { border-top-color: var(--color-accent-400); color: var(--color-accent-300); background: transparent; } body.theme-industry .ind-tab.hidden { display: none; } body.theme-industry .ind-tab-icon svg { width: 22px; height: 22px; stroke-width: 1.5; display: block; } body.theme-industry .ind-tab-badge { position: absolute; top: 4px; right: 50%; transform: translateX(22px); min-width: 16px; padding: 0 4px; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; background: var(--st-over-bg); color: var(--st-over-fg); } /* Кнопка «Сообщить о проблеме» перекрывала бы таб-бар. */ body.theme-industry .support-report-fab { bottom: calc(58px + 12px + env(safe-area-inset-bottom, 0px)); } body.theme-industry .toast { bottom: calc(58px + 18px + env(safe-area-inset-bottom, 0px)); } } /* ══════════════════════════════════════════════════════════════════ СЕТКА ПЛАТЕЖЕЙ В этом оформлении сетка рисуется своей разметкой (#scheduleGridIndustry), а классическая панель прячется. Селекторы с идентификатором страницы — чтобы перебить блок сетки в styles.css, который тоже с идентификатором. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-scheduleGrid > .panel { display: none; } body.theme-industry #page-scheduleGrid .ind-grid { display: flex; flex-direction: column; gap: var(--space-4); } body.theme-industry #page-scheduleGrid .ind-grid.hidden { display: none; } /* — кнопки страницы — */ body.theme-industry .ind-page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; } /* — итоги-фильтры — Зазор 1px по фону divider даёт разделительные линии без лишних границ. */ body.theme-industry .ind-grid-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } body.theme-industry .ind-sum { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; min-height: 0; padding: var(--space-3) var(--space-4); border: 0; border-top: 5px solid var(--sum-color); border-radius: 0; background: color-mix(in srgb, var(--sum-color) var(--sum-mix), var(--color-bg)); color: var(--sum-ink); font-family: var(--font-body); font-weight: 400; } body.theme-industry .ind-sum:hover { filter: brightness(0.97); background: color-mix(in srgb, var(--sum-color) var(--sum-mix), var(--color-bg)); border-top-color: var(--sum-color); color: var(--sum-ink); } /* Рамка активности — внутренней тенью, а не border: border сдвинул бы содержимое ячейки на 2px и сетка бы «дёргалась» при выборе. */ body.theme-industry .ind-sum.active { box-shadow: inset 0 0 0 2px var(--color-accent-700); } body.theme-industry .ind-sum-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } body.theme-industry .ind-sum-amount { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1.05; } body.theme-industry .ind-sum-sub { font-size: 12px; opacity: 0.8; } /* — панель инструментов — */ body.theme-industry .ind-grid-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } body.theme-industry .ind-search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-neutral-700); } body.theme-industry .ind-search input { flex: 1; min-width: 0; min-height: 0; border: 0; padding: 0; background: transparent; color: var(--color-text); font-size: 14px; } body.theme-industry .ind-search input:hover, body.theme-industry .ind-search input:focus { border: 0; } body.theme-industry .ind-search-clear { min-height: 0; padding: 4px; border: 0; background: none; color: var(--color-neutral-700); } body.theme-industry .ind-search-clear:hover { background: none; border: 0; color: var(--color-text); } body.theme-industry .ind-zoom { display: flex; align-items: center; margin-left: auto; border: 1px solid var(--color-divider); } body.theme-industry .ind-zoom-label { font-size: 12px; color: var(--color-neutral-700); padding: 0 10px; } body.theme-industry .ind-zoom button { width: 34px; min-height: 34px; padding: 0; border: 0; border-left: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); font-size: 16px; } body.theme-industry .ind-zoom button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-left-color: var(--color-divider); color: var(--color-text); } body.theme-industry .ind-zoom-value { width: 52px; text-align: center; font-size: 13px; } /* — легенда — */ body.theme-industry .ind-grid-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--color-neutral-800); } body.theme-industry .ind-legend-item { display: inline-flex; align-items: center; gap: 6px; } body.theme-industry .ind-legend-item i { width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); } body.theme-industry .ind-legend-hint { color: var(--color-neutral-700); } /* — таблица — Ширины колонок и клеток заданы переменными: масштаб клеток меняет одну --ind-zoom, а не пересобирает разметку. */ body.theme-industry .ind-grid-scroll { --ind-zoom: 1; --ind-client-w: 230px; --ind-sum-w: 92px; --ind-rem-w: 116px; --ind-cell-w: calc(62px * var(--ind-zoom)); --ind-cell-h: calc(40px * var(--ind-zoom)); overflow: auto; max-height: max(440px, calc(100vh - 380px)); border: 1px solid var(--color-divider); background: var(--color-bg); } body.theme-industry .ind-grid-head { position: sticky; top: 0; z-index: 3; display: flex; width: max-content; background: var(--color-accent-900); color: var(--color-accent-100); } body.theme-industry .ind-gc { flex: none; padding: 8px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-100); background: var(--color-accent-900); } body.theme-industry .ind-gc-client { position: sticky; left: 0; z-index: 4; width: var(--ind-client-w); border-right: 1px solid var(--color-accent-800); } body.theme-industry .ind-gc-sum { position: sticky; left: var(--ind-client-w); z-index: 4; width: var(--ind-sum-w); padding: 8px 10px; text-align: right; border-right: 1px solid var(--color-divider); } body.theme-industry .ind-gc-rem { position: sticky; left: calc(var(--ind-client-w) + var(--ind-sum-w)); z-index: 4; width: var(--ind-rem-w); padding: 8px 10px; text-align: right; border-right: 2px solid var(--color-neutral-400); } body.theme-industry .ind-gc-n { width: var(--ind-cell-w); padding: 8px 0; text-align: center; font-size: 11px; color: var(--color-accent-200); border-right: 1px solid var(--color-accent-800); } body.theme-industry .ind-grid-row { display: flex; width: max-content; border-bottom: 1px solid var(--color-divider); } body.theme-industry .ind-gr { flex: none; /* Фон липких колонок обязан быть непрозрачным: иначе при горизонтальной прокрутке под ними просвечивают клетки взносов. */ background: var(--color-bg); } body.theme-industry .ind-gr-client { position: sticky; left: 0; z-index: 2; width: var(--ind-client-w); min-height: var(--ind-cell-h); padding: 4px 12px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; border-right: 1px solid var(--color-divider); } body.theme-industry .ind-gr-client:hover { background: var(--color-neutral-100); } body.theme-industry .ind-gr-name { font-weight: 500; font-size: 13px; color: var(--color-accent-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-industry .ind-gr-meta { font-size: 11px; color: var(--color-neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-industry .ind-gr-sum { position: sticky; left: var(--ind-client-w); z-index: 2; width: var(--ind-sum-w); padding: 0 10px; display: flex; align-items: center; justify-content: flex-end; font-size: 13px; border-right: 1px solid var(--color-divider); } body.theme-industry .ind-gr-rem { position: sticky; left: calc(var(--ind-client-w) + var(--ind-sum-w)); z-index: 2; width: var(--ind-rem-w); padding: 0 10px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; font-size: 13px; border-right: 2px solid var(--color-neutral-400); } body.theme-industry .ind-progress { display: block; width: 100%; height: 3px; background: var(--color-neutral-200); } body.theme-industry .ind-progress > i { display: block; height: 100%; background: var(--color-accent); } body.theme-industry .ind-progress-lg { height: 6px; margin-top: var(--space-3); } body.theme-industry .ind-progress-note { font-size: 12px; color: var(--color-neutral-700); margin-top: 4px; } /* — клетки взносов — Палитра состояний зафиксирована в передаче дизайна и совпадает со смыслом в scheduleCellState(). Разделитель полупрозрачно-белый: он читается на всех шести заливках, в отличие от серого. */ body.theme-industry .ind-cell { flex: none; width: var(--ind-cell-w); min-height: var(--ind-cell-h); display: flex; align-items: center; justify-content: center; font-size: calc(12px * var(--ind-zoom)); border-right: 1px solid rgba(255, 255, 255, 0.85); cursor: pointer; } body.theme-industry .ind-cell:hover { outline: 2px solid var(--color-accent-700); outline-offset: -2px; } body.theme-industry .ind-cell.cell-paid { background: var(--st-paid-bg); color: var(--st-paid-fg); } body.theme-industry .ind-cell.cell-overdue { background: var(--st-over-bg); color: var(--st-over-fg); font-weight: 600; } body.theme-industry .ind-cell.cell-today { background: var(--st-today-bg); color: var(--st-today-fg); font-weight: 600; } body.theme-industry .ind-cell.cell-soon { background: var(--st-soon-bg); color: var(--st-soon-fg); } body.theme-industry .ind-cell.cell-month { background: var(--st-month-bg); color: var(--st-month-fg); } body.theme-industry .ind-cell.cell-future { background: var(--st-future-bg); color: var(--st-future-fg); } body.theme-industry .ind-cell.ind-cell-none { background: var(--color-neutral-100); color: transparent; cursor: default; } body.theme-industry .ind-cell.ind-cell-none:hover { outline: none; } /* — карточки сетки (телефон) — */ body.theme-industry .ind-grid-cards { display: flex; flex-direction: column; gap: var(--space-4); } body.theme-industry .ind-card { display: flex; flex-direction: column; gap: 10px; padding: var(--space-3) var(--space-4); } body.theme-industry .ind-card-head { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; } body.theme-industry .ind-card-who { flex: 1; min-width: 0; display: flex; flex-direction: column; } body.theme-industry .ind-card-name { font-weight: 500; font-size: 15px; color: var(--color-accent-800); } body.theme-industry .ind-card-meta { font-size: 12px; color: var(--color-neutral-700); } body.theme-industry .ind-card-money { text-align: right; display: flex; flex-direction: column; } body.theme-industry .ind-card-rem { font-family: var(--font-heading); font-weight: 600; font-size: 18px; } body.theme-industry .ind-card-squares { display: flex; flex-wrap: wrap; gap: 3px; } body.theme-industry .ind-sq { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); cursor: pointer; } body.theme-industry .ind-sq.cell-paid { background: var(--st-paid-bg); color: var(--st-paid-fg); } body.theme-industry .ind-sq.cell-overdue { background: var(--st-over-bg); color: var(--st-over-fg); font-weight: 600; } body.theme-industry .ind-sq.cell-today { background: var(--st-today-bg); color: var(--st-today-fg); font-weight: 600; } body.theme-industry .ind-sq.cell-soon { background: var(--st-soon-bg); color: var(--st-soon-fg); } body.theme-industry .ind-sq.cell-month { background: var(--st-month-bg); color: var(--st-month-fg); } body.theme-industry .ind-sq.cell-future { background: var(--st-future-bg); color: var(--st-future-fg); } body.theme-industry .ind-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body.theme-industry .ind-card-next { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 8px; } body.theme-industry .ind-card-spacer { flex: 1; } body.theme-industry .ind-card-pay { min-height: 44px; padding-inline: 16px; } /* — пусто и подвал — */ body.theme-industry .ind-grid-empty { padding: var(--space-8); text-align: center; color: var(--color-neutral-700); } body.theme-industry .ind-grid-foot { font-size: 12px; color: var(--color-neutral-700); } @media (max-width: 760px) { body.theme-industry .ind-grid-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.theme-industry .ind-sum-amount { font-size: 22px; } body.theme-industry .ind-sum { min-height: 0; } body.theme-industry .ind-search { min-height: 44px; } body.theme-industry .ind-zoom button { min-height: 42px; width: 42px; } body.theme-industry .ind-grid-scroll { --ind-client-w: 150px; max-height: 70vh; } /* На телефоне липкими остаются только имя и договор: «Взнос» и «Остаток» съели бы весь экран. */ body.theme-industry .ind-gc-sum, body.theme-industry .ind-gc-rem, body.theme-industry .ind-gr-sum, body.theme-industry .ind-gr-rem { display: none; } body.theme-industry .ind-page-actions { justify-content: stretch; } body.theme-industry .ind-page-actions button { flex: 1 1 140px; } } /* ══════════════════════════════════════════════════════════════════ ОКНО «ПРИНЯТЬ ПЛАТЁЖ» ══════════════════════════════════════════════════════════════════ */ body.theme-industry .ind-pay-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: var(--space-4); } body.theme-industry .ind-pay-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } body.theme-industry .ind-pay { position: relative; width: min(460px, 100%); max-height: 90dvh; overflow: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-bg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); } body.theme-industry .ind-pay-head { display: flex; gap: 10px; align-items: flex-start; } body.theme-industry .ind-pay-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } body.theme-industry .ind-pay-name { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 1.1; text-transform: uppercase; } body.theme-industry .ind-pay-sub { font-size: 13px; color: var(--color-neutral-700); } body.theme-industry .ind-pay-tag, body.theme-industry .ind-status-tag { display: inline-flex; align-items: center; font-size: 11px; padding: 3px 8px; white-space: nowrap; } body.theme-industry .ind-pay-field { display: grid; gap: 5px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } body.theme-industry .ind-pay-input { min-height: 52px; font-size: 22px; } body.theme-industry .ind-pay-quick { display: flex; gap: 6px; flex-wrap: wrap; } body.theme-industry .ind-pay-quick button { flex: 1 1 auto; } body.theme-industry .ind-pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-divider); } body.theme-industry .ind-pay-methods button { min-height: 36px; border: 0; border-right: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 13px; font-weight: 400; } body.theme-industry .ind-pay-methods button:last-child { border-right: 0; } body.theme-industry .ind-pay-methods button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-text); } body.theme-industry .ind-pay-methods button.active { background: var(--color-accent); color: var(--color-bg); } body.theme-industry .ind-pay-actions { display: flex; gap: var(--space-2); } body.theme-industry .ind-pay-cancel { flex: 1; } body.theme-industry .ind-pay-confirm { flex: 2; } /* ══════════════════════════════════════════════════════════════════ ВЫЕЗЖАЮЩАЯ КАРТОЧКА ДОГОВОРА ══════════════════════════════════════════════════════════════════ */ body.theme-industry .ind-drawer { position: fixed; inset: 0; z-index: 65; } body.theme-industry .ind-drawer.hidden { display: none; } body.theme-industry .ind-drawer-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); } body.theme-industry .ind-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column; background: var(--color-bg); border-left: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); } body.theme-industry.ind-drawer-open { overflow: hidden; } body.theme-industry .ind-drawer-head { flex: none; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-6); background: var(--color-accent-100); border-bottom: 1px solid var(--color-accent-300); } body.theme-industry .ind-drawer-title { flex: 1; min-width: 0; } body.theme-industry .ind-drawer-name { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1.05; text-transform: uppercase; margin: 2px 0 0; } body.theme-industry .ind-drawer-sub { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; } body.theme-industry .ind-drawer-product { font-size: 13px; color: var(--color-neutral-800); } body.theme-industry .ind-drawer-close { width: 44px; height: 44px; min-height: 44px; padding: 0; border-color: transparent; background: transparent; color: var(--color-text); font-size: 18px; } body.theme-industry .ind-drawer-close:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: transparent; color: var(--color-text); } body.theme-industry .ind-drawer-body { flex: 1; overflow: auto; padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); } body.theme-industry .ind-contact { display: flex; gap: 6px; flex-wrap: wrap; } body.theme-industry .ind-btn-sec { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: var(--space-2) calc(var(--space-3) * 1.2); border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font-family: var(--font-heading); font-weight: 600; font-size: 14px; text-decoration: none; } body.theme-industry .ind-btn-sec:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); } body.theme-industry .ind-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } body.theme-industry .ind-kpi-cell { background: var(--color-bg); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; } body.theme-industry .ind-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); } body.theme-industry .ind-kpi-value { font-family: var(--font-heading); font-weight: 600; font-size: 22px; } body.theme-industry .ind-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 13px; } body.theme-industry .ind-fact { display: flex; flex-direction: column; } body.theme-industry .ind-fact-key { color: var(--color-neutral-700); font-size: 12px; } body.theme-industry .ind-fact-value { font-weight: 500; } body.theme-industry .ind-sched-title { border-bottom: 2px solid var(--color-accent); padding-bottom: 6px; margin-bottom: var(--space-2); } body.theme-industry .ind-sched-row { display: grid; grid-template-columns: 28px 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); font-size: 13px; } body.theme-industry .ind-sched-n { color: var(--color-neutral-700); } body.theme-industry .ind-sched-tag { justify-self: start; font-size: 11px; padding: 3px 8px; } body.theme-industry .ind-row-pay { min-height: 36px; } body.theme-industry .ind-row-sum { text-align: right; color: var(--color-neutral-800); padding-right: 8px; } body.theme-industry .ind-drawer-foot > .blueprint { padding-inline: 18px; } body.theme-industry .ind-drawer-foot { flex: none; display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; padding: var(--space-3) var(--space-6); border-top: 1px solid var(--color-divider); } @media (max-width: 760px) { body.theme-industry .ind-pay-overlay { align-items: flex-end; padding: 0; } body.theme-industry .ind-pay { width: 100%; max-height: 92dvh; padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); } body.theme-industry .ind-pay-input { min-height: 56px; } body.theme-industry .ind-drawer-panel { top: 40px; width: 100%; border-left: 0; border-top: 1px solid var(--color-divider); } body.theme-industry .ind-drawer-head, body.theme-industry .ind-drawer-body, body.theme-industry .ind-drawer-foot { padding-left: var(--space-4); padding-right: var(--space-4); } body.theme-industry .ind-drawer-name { font-size: 22px; } body.theme-industry .ind-facts { grid-template-columns: minmax(0, 1fr); } } /* ══════════════════════════════════════════════════════════════════ ПОДВАЛ САЙДБАРА: ПРОБНЫЙ ПЕРИОД Блок собирает industry.js из состояния подписки. ══════════════════════════════════════════════════════════════════ */ body.theme-industry .ind-trial { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin-bottom: var(--space-3); } body.theme-industry .ind-trial-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--color-accent-300); } body.theme-industry .ind-trial-tag { background: var(--st-month-bg); color: var(--st-month-fg); font-size: 11px; padding: 3px 8px; white-space: nowrap; } body.theme-industry .ind-trial-btn { width: 100%; min-height: 36px; background: var(--color-accent-500); border-color: var(--color-accent-500); color: var(--color-accent-900); font-size: 13px; } body.theme-industry .ind-trial-btn:hover { background: var(--color-accent-400); border-color: var(--color-accent-400); color: var(--color-accent-900); } body.theme-industry .ind-trial-btn > .corner { color: var(--color-accent-400); } /* Подпись про Docker volume — техническая заметка для разработчика, в этом оформлении она в подвале меню только мешает. Состояние API оставляем. */ body.theme-industry .sidebar-footer small { display: none; } body.theme-industry .sidebar-footer .pill#apiStatus { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } /* 10-dashboard.css — оформление «Industry» для главной (#page-dashboard). * * Главную рисует web/dashboard-builder.js: виджеты .db-*, а не статическая * разметка. Конструктор сохраняется целиком — здесь только оформление того, * что он строит. Токены и приёмы взяты из web/industry.css. * * Всё под префиксом body.theme-industry: галочку сняли — вернулся прежний вид. * Модалка «Добавить виджет» и инспектор виджета уходят в document.body * (dashboard-builder.js:475 и :913), поэтому их правила идут без #page-dashboard — * иначе они просто не совпадут. */ /* ══════════════════════════════════════════════════════════════════ СТРАНИЦА ══════════════════════════════════════════════════════════════════ */ /* .page.active — грид, и его единственная колонка по умолчанию растягивается под содержимое. Внутри дашборда лежит грид на 24 колонки с таблицами и графиками: без minmax(0,1fr) он раздвигает страницу наружу. Тот же приём, что в styles.css у #page-scheduleGrid. */ body.theme-industry #page-dashboard.active { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } /* Хост дашборда перестаёт быть карточкой: рамка и фон переезжают на сам грид, а 8px падинга оставлены под чертёжные уголки, которые выходят за его край. */ body.theme-industry #page-dashboard #sellerDashboard { padding: 8px; border: 0; background: transparent; box-shadow: none; overflow: visible; } body.theme-industry #page-dashboard .load-error-banner { border-radius: 0; border: 1px solid var(--color-debt-line); background: var(--st-over-bg); color: var(--st-over-fg); padding: var(--space-2) var(--space-4); font-size: 13px; } /* — панель первых шагов — */ body.theme-industry #page-dashboard .onboarding-panel { border: 1px solid var(--color-accent-300); border-radius: 0; background: var(--color-accent-100); margin-bottom: 0; } body.theme-industry #page-dashboard .onboarding-checklist { gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } body.theme-industry #page-dashboard .onboarding-checklist li { border: 0; border-radius: 0; background: var(--color-bg); padding: var(--space-2) var(--space-3); } body.theme-industry #page-dashboard .onboarding-checklist li strong { font-family: var(--font-body); font-weight: 500; } /* ══════════════════════════════════════════════════════════════════ ВЕРХНЯЯ ПОЛОСА КОНСТРУКТОРА Заголовок «Дашборд» дублирует H1 в топбаре, поэтому он подаётся кикером, а не вторым заголовком. Ничего не прячем: конструктор должен остаться доступным целиком. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-dashboard .db-toolbar { gap: var(--space-3); flex-wrap: wrap; padding: 0 0 var(--space-3); border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-4); } body.theme-industry #page-dashboard .db-title { font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); } body.theme-industry #page-dashboard .db-toolbar-actions { gap: var(--space-2); flex-wrap: wrap; } body.theme-industry #page-dashboard .db-period-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); gap: var(--space-2); } body.theme-industry #page-dashboard .db-period-label select, body.theme-industry #page-dashboard .db-select { border-radius: 0; padding: 6px 10px; font-size: 13px; min-height: 36px; } /* — чип кросс-фильтра — */ body.theme-industry #page-dashboard .db-crossfilter { background: var(--color-accent-100); border-bottom: 1px solid var(--color-accent-300); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); gap: var(--space-3); } body.theme-industry #page-dashboard .db-cf-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); } body.theme-industry #page-dashboard .db-cf-chip { border-radius: 0; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); padding: 3px 4px 3px 10px; font-size: 13px; } body.theme-industry #page-dashboard .db-cf-chip b { color: var(--color-accent-800); font-weight: 600; } body.theme-industry #page-dashboard .db-cf-clear { width: 20px; height: 20px; min-height: 20px; padding: 0; border-radius: 0; border: 0; background: var(--color-accent); color: var(--color-bg); } body.theme-industry #page-dashboard .db-cf-clear:hover { background: var(--color-accent-700); border: 0; color: var(--color-bg); } /* ══════════════════════════════════════════════════════════════════ СЕТКА ВИДЖЕТОВ Листовой набор без скруглений: зазор 1px, а разделительная линия рисуется не фоном грида, а outline самих плиток. Фон грида здесь не годится — последний ряд почти никогда не заполнен целиком (10 KPI на 24 колонки), и незанятые ячейки превратились бы в серые прямоугольники. Outline лежит вне потока, поэтому линии соседей ложатся в один и тот же зазор и получается ровно одна волосяная линия. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-dashboard .db-grid { position: relative; gap: 1px; padding: 1px; /* чтобы outline крайних плиток не срезался */ align-items: stretch; /* в styles.css start: плитки в ряду были разной высоты и зазор рвался */ background: var(--color-bg); counter-reset: dbsec; } /* Чертёжные уголки вокруг всего листа — фирменная рамка системы (.blueprint). Уголков-элементов конструктор не рисует, поэтому четыре «плюса» собраны из восьми полосок-градиентов на одном псевдоэлементе. */ body.theme-industry #page-dashboard .db-grid::after { content: ""; position: absolute; inset: -6px; pointer-events: none; color: color-mix(in srgb, var(--color-text) 55%, transparent); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px; background-position: left 5px top 1px, left 0 top 6px, right 5px top 1px, right 0 top 6px, left 5px bottom 1px, left 0 bottom 6px, right 5px bottom 1px, right 0 bottom 6px; } body.theme-industry #page-dashboard .db-widget { min-width: 0; padding: var(--space-4); border: 0; border-radius: 0; background: var(--color-bg); box-shadow: none; outline: 1px solid var(--color-divider); outline-offset: 0; } /* Режим настройки: пунктир и рамка ресайза перебиты правилами выше по специфичности — возвращаем их обратно. */ body.theme-industry #page-dashboard .db-grid.editing .db-widget { outline-style: dashed; outline-color: var(--color-accent-600); } body.theme-industry #page-dashboard .db-grid.editing .db-widget.dragging { outline-color: var(--color-accent); } body.theme-industry #page-dashboard .db-widget.resizing { outline: 2px solid var(--color-accent-700); } /* — заголовок виджета: кикер с линией 2px под ним — Номер секции даёт CSS-счётчик: при перестановке виджетов нумерация пересчитывается сама, KPI-плитки в счёт не идут. */ body.theme-industry #page-dashboard .db-widget:not(.db-widget--kpi) { counter-increment: dbsec; } body.theme-industry #page-dashboard .db-widget:not(.db-widget--kpi) > .db-widget-head { font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-2); margin: 0 0 var(--space-4); } body.theme-industry #page-dashboard .db-widget:not(.db-widget--kpi) > .db-widget-head::before, body.theme-industry #page-dashboard .db-widget-slot .panel-head h2::before { content: counter(dbsec, decimal-leading-zero) " · "; color: var(--color-accent-600); } /* ══════════════════════════════════════════════════════════════════ KPI-ПЛИТКИ ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-dashboard .db-widget--kpi { gap: 4px; padding: var(--space-4); background: var(--color-accent-100); color: var(--color-text); } body.theme-industry #page-dashboard .db-widget--kpi > .db-widget-head { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: inherit; opacity: 0.8; margin: 0; border-bottom: 0; } body.theme-industry #page-dashboard .db-kpi { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: 0; color: inherit; font-variant-numeric: tabular-nums; } body.theme-industry #page-dashboard .db-kpi-delta { font-size: 12px; font-weight: 400; margin-top: 0; color: var(--color-neutral-700); } /* Тон плитки — по смыслу показателя. Смысл уже посчитан самим билдером: db-delta-up = «стало лучше», db-delta-down = «стало хуже» (для инвертированных мер вроде «Просрочки» уменьшение попадает в up, dashboard-builder.js:722). Поэтому тон берётся из классов дельты, а не из позиции плитки: пользователь может переставить виджеты местами, и фон по номеру перестал бы соответствовать показателю. Доли 45% и цвета — из спецификации KPI. */ body.theme-industry #page-dashboard .db-widget--kpi:has(.db-delta-up) { background: color-mix(in srgb, var(--st-paid-bg) 45%, var(--color-bg)); color: var(--st-paid-fg); } body.theme-industry #page-dashboard .db-widget--kpi:has(.db-delta-down) { background: color-mix(in srgb, var(--st-over-bg) 45%, var(--color-bg)); color: var(--st-over-fg); } body.theme-industry #page-dashboard .db-widget--kpi:has(.db-delta-flat) { background: color-mix(in srgb, var(--st-today-bg) 45%, var(--color-bg)); color: var(--st-today-fg); } body.theme-industry #page-dashboard .db-widget--kpi:has(.db-kpi-delta) .db-kpi-delta { color: inherit; opacity: 0.85; } /* Первая плитка листа — стальной якорь блока 4×2, как в дизайне: главный показатель стоит первым в раскладке (sellerDefaultLayout, «Получено»). */ body.theme-industry #page-dashboard .db-grid > .db-widget--kpi:first-child { background: var(--color-accent-900); color: var(--color-accent-100); } body.theme-industry #page-dashboard .db-grid > .db-widget--kpi:first-child .db-kpi-delta { color: var(--color-accent-300); opacity: 1; } body.theme-industry #page-dashboard .db-grid > .db-widget--kpi:first-child { outline-color: var(--color-accent-900); } /* ══════════════════════════════════════════════════════════════════ ГРАФИКИ ECharts 5.5.1 в режиме renderer:"svg" пишет цвет атрибутом (fill="#315efb"), а не inline-стилем, — CSS-свойство fill/stroke перебивает атрибут без !important. Поэтому палитра переносится в стальную заменой конкретных значений: серии остаются различимыми, в отличие от одной заливки на всё. Хексы в селекторах — это то, что рисует dashboard-builder.js (PALETTES, строки 776–781, и цвета осей в chartOption); флаг i — на случай, если ECharts отдаст их в другом регистре. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-dashboard .db-chart { min-height: 180px; } /* сетка и оси */ body.theme-industry #page-dashboard .db-chart [stroke="#E0E6F1" i] { stroke: var(--color-neutral-300); } body.theme-industry #page-dashboard .db-chart [stroke="#6E7079" i] { stroke: var(--color-neutral-600); } body.theme-industry #page-dashboard .db-chart [fill="#6E7079" i], body.theme-industry #page-dashboard .db-chart [fill="#7a8499" i] { fill: var(--color-neutral-700); } body.theme-industry #page-dashboard .db-chart [fill="#1d2939" i] { fill: var(--color-text); } body.theme-industry #page-dashboard .db-chart [fill="#e6ecf5" i] { fill: var(--color-neutral-200); } body.theme-industry #page-dashboard .db-chart [fill="#fff" i] { fill: var(--color-bg); } /* «синяя» и «монохром» палитры → стальная лестница */ body.theme-industry #page-dashboard .db-chart [fill="#315efb" i] { fill: var(--color-accent-700); } body.theme-industry #page-dashboard .db-chart [stroke="#315efb" i] { stroke: var(--color-accent-700); } body.theme-industry #page-dashboard .db-chart [fill="#1e40af" i] { fill: var(--color-accent-800); } body.theme-industry #page-dashboard .db-chart [stroke="#1e40af" i] { stroke: var(--color-accent-800); } body.theme-industry #page-dashboard .db-chart [fill="#3b82f6" i], body.theme-industry #page-dashboard .db-chart [fill="#5b8fff" i] { fill: var(--color-accent-600); } body.theme-industry #page-dashboard .db-chart [stroke="#3b82f6" i], body.theme-industry #page-dashboard .db-chart [stroke="#5b8fff" i] { stroke: var(--color-accent-600); } body.theme-industry #page-dashboard .db-chart [fill="#60a5fa" i], body.theme-industry #page-dashboard .db-chart [fill="#0ea5e9" i] { fill: var(--color-accent-500); } body.theme-industry #page-dashboard .db-chart [stroke="#60a5fa" i], body.theme-industry #page-dashboard .db-chart [stroke="#0ea5e9" i] { stroke: var(--color-accent-500); } body.theme-industry #page-dashboard .db-chart [fill="#8fb3ff" i], body.theme-industry #page-dashboard .db-chart [fill="#93c5fd" i], body.theme-industry #page-dashboard .db-chart [fill="#06b6d4" i], body.theme-industry #page-dashboard .db-chart [fill="#22d3ee" i] { fill: var(--color-accent-400); } body.theme-industry #page-dashboard .db-chart [stroke="#8fb3ff" i], body.theme-industry #page-dashboard .db-chart [stroke="#93c5fd" i], body.theme-industry #page-dashboard .db-chart [stroke="#06b6d4" i], body.theme-industry #page-dashboard .db-chart [stroke="#22d3ee" i] { stroke: var(--color-accent-400); } /* смысловые цвета остаются смысловыми: рост — зелёный, падение — красный */ body.theme-industry #page-dashboard .db-chart [fill="#16a34a" i], body.theme-industry #page-dashboard .db-chart [fill="#14b8a6" i] { fill: var(--color-growth); } body.theme-industry #page-dashboard .db-chart [stroke="#16a34a" i], body.theme-industry #page-dashboard .db-chart [stroke="#14b8a6" i] { stroke: var(--color-growth); } body.theme-industry #page-dashboard .db-chart [fill="#ef4444" i], body.theme-industry #page-dashboard .db-chart [fill="#fb7185" i] { fill: var(--color-debt); } body.theme-industry #page-dashboard .db-chart [stroke="#ef4444" i], body.theme-industry #page-dashboard .db-chart [stroke="#fb7185" i] { stroke: var(--color-debt); } /* остальные «яркие» из тёплой палитры — в приглушённые метки состояний */ body.theme-industry #page-dashboard .db-chart [fill="#f59e0b" i], body.theme-industry #page-dashboard .db-chart [fill="#facc15" i], body.theme-industry #page-dashboard .db-chart [fill="#f97316" i] { fill: var(--st-month-fg); } body.theme-industry #page-dashboard .db-chart [stroke="#f59e0b" i], body.theme-industry #page-dashboard .db-chart [stroke="#facc15" i], body.theme-industry #page-dashboard .db-chart [stroke="#f97316" i] { stroke: var(--st-month-fg); } body.theme-industry #page-dashboard .db-chart [fill="#8b5cf6" i], body.theme-industry #page-dashboard .db-chart [fill="#ec4899" i] { fill: var(--color-neutral-600); } body.theme-industry #page-dashboard .db-chart [stroke="#8b5cf6" i], body.theme-industry #page-dashboard .db-chart [stroke="#ec4899" i] { stroke: var(--color-neutral-600); } /* Шрифт подписей ECharts пишет в атрибут style элемента (font-family: sans-serif), а inline-стиль перебивается только !important. */ body.theme-industry #page-dashboard .db-chart text { font-family: var(--font-body) !important; } /* ══════════════════════════════════════════════════════════════════ ТАБЛИЦЫ ВИДЖЕТОВ ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-dashboard .db-table th { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); background: var(--color-bg); border-bottom: 1px solid var(--color-divider); } body.theme-industry #page-dashboard .db-table td { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); font-variant-numeric: tabular-nums; } body.theme-industry #page-dashboard .db-table tbody tr:hover { background: var(--color-neutral-100); } body.theme-industry #page-dashboard .db-empty, body.theme-industry #page-dashboard .db-error { color: var(--color-neutral-700); font-size: 13px; } body.theme-industry #page-dashboard .db-error { color: var(--color-debt); border: 1px solid var(--color-debt-line); background: color-mix(in srgb, var(--st-over-bg) 35%, var(--color-bg)); padding: var(--space-3); } /* ══════════════════════════════════════════════════════════════════ ГОТОВЫЕ БЛОКИ (slot-виджеты) Слот-виджет не помечен именем слота, поэтому блоки опознаются по тому, что в них лежит: #sellerEarningsPanel, #dashboardOpsList, #recentContracts. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-dashboard .db-widget-slot .panel-head { align-items: baseline; border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-2); margin-bottom: var(--space-4); } body.theme-industry #page-dashboard .db-widget-slot .panel-head h2 { font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin: 0; } body.theme-industry #page-dashboard .db-widget-slot .panel-head p.muted { font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-dashboard .db-widget-slot .panel-head .link { font-family: var(--font-body); font-size: 12px; font-weight: 400; min-height: 0; padding: 0; } /* — 01/02 «Операции на сегодня»: вкладки как сегмент-контрол — */ body.theme-industry #page-dashboard .ops-tabs { display: inline-flex; flex-wrap: nowrap; gap: 0; margin: 0 0 var(--space-3); border: 1px solid var(--color-divider); } body.theme-industry #page-dashboard .ops-tab { font-family: var(--font-body); font-size: 13px; font-weight: 400; min-height: 34px; padding: 0 12px; border: 0; border-left: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); white-space: nowrap; } body.theme-industry #page-dashboard .ops-tab:first-child { border-left: 0; } body.theme-industry #page-dashboard .ops-tab:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-text); } body.theme-industry #page-dashboard .ops-tab.active { background: var(--color-accent); border-color: var(--color-divider); color: var(--color-bg); } /* — строки списков: не карточки, а строки с волосяной линией снизу, как в дизайне — */ body.theme-industry #page-dashboard #dashboardOpsList, body.theme-industry #page-dashboard #recentContracts { gap: 0; } body.theme-industry #page-dashboard #dashboardOpsList .item, body.theme-industry #page-dashboard #recentContracts .item { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); border-radius: 0; background: transparent; padding: 10px 0; } body.theme-industry #page-dashboard #dashboardOpsList .item:hover, body.theme-industry #page-dashboard #recentContracts .item:hover { background: var(--color-neutral-100); border-color: color-mix(in srgb, var(--color-text) 8%, transparent); } body.theme-industry #page-dashboard #dashboardOpsList .item strong, body.theme-industry #page-dashboard #recentContracts .item strong { font-family: var(--font-body); font-weight: 500; color: var(--color-accent-800); } /* Цветная полоса состояния слева — в дизайне это 10px-заливка у строки «К оплате» и «Просрочка». Состояние читается по тегу внутри строки. */ body.theme-industry #page-dashboard #dashboardOpsList .item { border-left: 10px solid var(--st-today-bg); padding-left: var(--space-3); } body.theme-industry #page-dashboard #dashboardOpsList .item:has(.pill.danger) { border-left-color: var(--st-over-bg); } body.theme-industry #page-dashboard #dashboardOpsList .item:has(.pill.warning) { border-left-color: var(--st-month-bg); } body.theme-industry #page-dashboard #dashboardOpsList .item:has(.pill.neutral) { border-left-color: var(--st-soon-bg); } body.theme-industry #page-dashboard #dashboardOpsList .item .muted { font-size: 12px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; } body.theme-industry #page-dashboard .notification-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } body.theme-industry #page-dashboard .ops-item .linkish { margin-top: 6px; } /* — 03 «Заработок» — */ body.theme-industry #page-dashboard .earnings-block { border: 1px solid var(--color-divider); border-radius: 0; background: transparent; padding: var(--space-4); } body.theme-industry #page-dashboard .earnings-block h3 { font-size: 13px; letter-spacing: 0.08em; color: var(--color-accent-700); border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-2); margin: 0 0 var(--space-3); } body.theme-industry #page-dashboard .earnings-lifetime { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1.05; font-variant-numeric: tabular-nums; margin: 0 0 var(--space-2); } body.theme-industry #page-dashboard .earnings-lifetime strong { font-weight: 600; } body.theme-industry #page-dashboard .earnings-subtitle { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-neutral-700); margin: var(--space-4) 0 var(--space-2); } body.theme-industry #page-dashboard .earnings-month-table table { font-size: 13px; } body.theme-industry #page-dashboard .earnings-month-table td strong { font-weight: 500; font-variant-numeric: tabular-nums; } /* — 04 «Последние договоры» — */ body.theme-industry #page-dashboard #recentContracts .item-row { gap: 8px 12px; } body.theme-industry #page-dashboard #recentContracts .muted { font-size: 12px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; } /* В дизайне тег статуса на главной уже общего .pill: 3px 8px вместо 3px 10px. */ body.theme-industry #page-dashboard #recentContracts .pill, body.theme-industry #page-dashboard #dashboardOpsList .pill { padding: 3px 8px; } /* — «Быстрый сценарий» — */ body.theme-industry #page-dashboard .steps { color: var(--color-neutral-800); line-height: 1.7; padding-left: 22px; } body.theme-industry #page-dashboard .steps li::marker { color: var(--color-accent-700); font-family: var(--font-heading); font-weight: 600; } /* ══════════════════════════════════════════════════════════════════ РЕЖИМ НАСТРОЙКИ ВИДЖЕТОВ ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-dashboard .db-widget-bar { gap: var(--space-2); /* отрицательные поля должны совпадать с падингом плитки, иначе полоса не ляжет вровень с её краем */ margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3); padding: 5px 10px; border-radius: 0; background: var(--color-accent-900); color: var(--color-accent-100); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } body.theme-industry #page-dashboard .db-handle { font-weight: 500; } body.theme-industry #page-dashboard .db-widget-bar button { min-height: 24px; padding: 2px 7px; border: 1px solid transparent; border-radius: 0; background: var(--color-accent-800); color: var(--color-accent-100); font-family: var(--font-body); font-size: 11px; font-weight: 500; } body.theme-industry #page-dashboard .db-widget-bar button:hover { background: var(--color-accent-700); border-color: transparent; color: var(--color-accent-100); } body.theme-industry #page-dashboard .db-widget-bar .db-remove { background: var(--color-debt); color: var(--color-bg); } body.theme-industry #page-dashboard .db-widget-bar .db-remove:hover { background: var(--st-over-fg); color: var(--color-bg); } body.theme-industry #page-dashboard .db-resize-handle { border-radius: 0; background: linear-gradient(135deg, transparent 45%, var(--color-accent-700) 45%, var(--color-accent-700) 55%, transparent 55%), linear-gradient(135deg, transparent 65%, var(--color-accent-700) 65%, var(--color-accent-700) 75%, transparent 75%); } /* — подсказка «?» — */ body.theme-industry #page-dashboard .db-info { border-radius: 0; width: 16px; height: 16px; min-height: 0; border: 1px solid var(--color-divider); background: transparent; color: var(--color-neutral-700); font-family: var(--font-body); font-weight: 600; } body.theme-industry #page-dashboard .db-info:hover, body.theme-industry #page-dashboard .db-info:focus-visible { background: var(--color-accent-100); color: var(--color-accent-800); } body.theme-industry #page-dashboard .db-info::after { border-radius: 0; background: var(--color-accent-900); color: var(--color-accent-100); box-shadow: var(--shadow-md); font-weight: 400; } body.theme-industry #page-dashboard .db-info::before { border-bottom-color: var(--color-accent-900); } /* ══════════════════════════════════════════════════════════════════ МОДАЛКА «ДОБАВИТЬ ВИДЖЕТ» И ИНСПЕКТОР Оба уходят в document.body, поэтому без префикса #page-dashboard. ══════════════════════════════════════════════════════════════════ */ body.theme-industry .db-modal-overlay { background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); padding: var(--space-4); } body.theme-industry .db-modal { border-radius: 0; border: 1px solid var(--color-divider); background: var(--color-bg); box-shadow: var(--shadow-lg); padding: var(--space-6); } body.theme-industry .db-modal-head { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-3); margin-bottom: var(--space-4); } body.theme-industry .db-modal-head strong { font-family: var(--font-heading); font-weight: 600; font-size: 22px; text-transform: uppercase; } body.theme-industry .db-modal-close, body.theme-industry .db-insp-close { border-radius: 0; border: 1px solid transparent; background: transparent; color: var(--color-text); padding: 4px 10px; } body.theme-industry .db-modal-close:hover, body.theme-industry .db-insp-close:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: transparent; color: var(--color-text); } body.theme-industry .db-modal-section, body.theme-industry .db-insp-section { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-accent-700); border-top-color: var(--color-divider); } body.theme-industry .db-wcatalog { gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } body.theme-industry .db-wcard { border: 0; border-radius: 0; background: var(--color-bg); box-shadow: none; padding: var(--space-3) var(--space-4); min-height: 0; font-family: var(--font-body); transition: background 0.12s ease; } body.theme-industry .db-wcard:hover { background: var(--color-neutral-100); border: 0; box-shadow: none; transform: none; color: var(--color-text); } body.theme-industry .db-wcard-label { font-family: var(--font-heading); font-weight: 600; font-size: 15px; text-transform: uppercase; color: var(--color-text); } body.theme-industry .db-wcard-desc { font-size: 12px; color: var(--color-neutral-700); } body.theme-industry .db-inspector { border-radius: 0; border-left: 1px solid var(--color-divider); background: var(--color-bg); box-shadow: var(--shadow-lg); padding: var(--space-6) var(--space-4); } body.theme-industry .db-insp-head { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-3); } body.theme-industry .db-insp-head strong { font-family: var(--font-heading); font-weight: 600; font-size: 18px; text-transform: uppercase; } body.theme-industry .db-inspector label { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); } /* ══════════════════════════════════════════════════════════════════ ПЛАНШЕТ 761–900px Старый слой в этом диапазоне жёстко ставит 2 колонки и span 2 / span 1 через !important — точка 900px не наша. Отменить его можно только своим !important, но трогать span нельзя: ширины виджетов приходят из inline- стиля, который конструктор пишет на каждый виджет, и !important на grid-column стёр бы их все. Поэтому меняется только число колонок: при четырёх колонках чужой span 2 даёт половину ширины (пары секций), а span 1 у KPI — четверть, то есть ровно 4 плитки в ряд. ══════════════════════════════════════════════════════════════════ */ @media (min-width: 761px) and (max-width: 900px) { body.theme-industry #page-dashboard .db-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1px !important; } } /* ══════════════════════════════════════════════════════════════════ ТЕЛЕФОН: точка перелома 760px ══════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { /* Старый слой на 480px схлопывает дашборд в одну колонку, в дизайне на телефоне KPI идут по две. Оба чужих правила с !important, перебить их можно только своим. */ body.theme-industry #page-dashboard .db-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1px !important; } body.theme-industry #page-dashboard .db-widget { grid-column: span 2 !important; } body.theme-industry #page-dashboard .db-widget--kpi { grid-column: span 1 !important; } body.theme-industry #page-dashboard.active { gap: var(--space-4); } body.theme-industry #page-dashboard .db-widget { padding: var(--space-3); } body.theme-industry #page-dashboard .db-widget--kpi { padding: var(--space-3); } body.theme-industry #page-dashboard .db-kpi { font-size: 22px; } body.theme-industry #page-dashboard .db-toolbar { flex-direction: column; align-items: stretch; } body.theme-industry #page-dashboard .db-toolbar-actions button, body.theme-industry #page-dashboard .db-period-label select, body.theme-industry #page-dashboard .db-select { min-height: 44px; } body.theme-industry #page-dashboard .db-toolbar-actions button { flex: 1 1 120px; } body.theme-industry #page-dashboard .db-select { max-width: none; flex: 1 1 100%; } /* Сегмент вкладок операций — во всю ширину, палец 44px. */ body.theme-industry #page-dashboard .ops-tabs { display: flex; width: 100%; } body.theme-industry #page-dashboard .ops-tab { flex: 1; min-height: 44px; padding: 0 6px; } body.theme-industry #page-dashboard .db-widget-slot .earnings-summary-grid { gap: var(--space-3); } body.theme-industry #page-dashboard .earnings-lifetime { font-size: 22px; } body.theme-industry #page-dashboard .notification-actions button, body.theme-industry #page-dashboard .ops-item .linkish { min-height: 44px; } body.theme-industry #page-dashboard .db-info { width: 20px; height: 20px; } /* Уголки чертёжной рамки на телефоне только мешают у края экрана. */ body.theme-industry #page-dashboard .db-grid::after { display: none; } body.theme-industry #page-dashboard #sellerDashboard { padding: 0; } body.theme-industry .db-modal { padding: var(--space-4); } body.theme-industry .db-wcatalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ═══════════════════════════════════════════════════════════════════ 11-contracts.css — «ДОГОВОРЫ» (#page-contracts) и «НОВЫЙ ДОГОВОР» (#page-contractCreate) в оформлении «Industry». Слой надстраивается над industry.css: токены, кнопки, поля, .panel, .item, .pill, .empty и .blueprint приходят оттуда, здесь — только раскладка и детали этих двух экранов. Каждое правило начинается с body.theme-industry: выключили галочку — вернулся прежний вид целиком. Специфичность: там, где styles.css бьёт по идентификатору или по button.item.contract-list-item (0,2,1), здесь добавлен идентификатор контейнера — иначе правило молча проиграет. ═══════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────── ОБЩЕЕ ДЛЯ ОБЕИХ СТРАНИЦ ─────────────────────────────────────────────────────────────────── */ body.theme-industry #page-contracts.page.active, body.theme-industry #page-contractCreate.page.active { display: grid; gap: var(--space-4); align-content: start; } /* ═══════════════════════════════════════════════════════════════════ ДОГОВОРЫ — #page-contracts ═══════════════════════════════════════════════════════════════════ */ /* — шапка страницы — Первая панель экрана в дизайне не блок, а строка заголовка с действием: рамку и подложку снимаем, оставляем линию под текстом. */ body.theme-industry #page-contracts > .panel:first-child { border: 0; padding: 0; background: transparent; } body.theme-industry #page-contracts > .panel:first-child .panel-head { align-items: flex-end; gap: var(--space-4); padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 2px solid var(--color-accent); } body.theme-industry #page-contracts > .panel:first-child .panel-head h2 { margin: 0; font-size: 22px; } body.theme-industry #page-contracts #toggleContractFormBtn { min-height: 36px; padding-inline: 20px; } body.theme-industry #page-contracts > .panel:first-child > p.muted { margin: 0; max-width: 70ch; font-size: 13px; color: var(--color-neutral-700); } /* — рабочая область — Дизайн показывает таблицу во всю ширину, а карточку договора и график под ней, поэтому колонка одна на всех ширинах. */ body.theme-industry #page-contracts .contracts-workspace { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } /* — панель списка: рамка одна на всю таблицу, внутренние отступы у содержимого, а не у панели — */ body.theme-industry #page-contracts .contracts-list-panel { display: grid; gap: 0; padding: 0; border: 1px solid var(--color-divider); background: transparent; } /* Стальная шапка таблицы. */ body.theme-industry #page-contracts .contracts-list-panel .panel-head { align-items: center; gap: var(--space-3); margin: 0; padding: 8px 14px; background: var(--color-accent-900); border-bottom: 0; } body.theme-industry #page-contracts .contracts-list-panel .panel-head h2 { margin: 0; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-100); } body.theme-industry #page-contracts .contracts-list-panel .panel-head button.secondary { min-height: 28px; padding: 2px 12px; font-size: 12px; background: transparent; border-color: var(--color-accent-700); color: var(--color-accent-100); } body.theme-industry #page-contracts .contracts-list-panel .panel-head button.secondary:hover { background: var(--color-accent-800); border-color: var(--color-accent-600); color: var(--color-accent-100); } /* — поиск и фильтры — */ body.theme-industry #page-contracts .contracts-list-panel > label { margin: 0; padding: var(--space-3) var(--space-4); } body.theme-industry #page-contracts #contractSearch { width: 100%; min-height: 36px; } body.theme-industry #page-contracts #contractFilters { margin: 0; padding: 0 var(--space-4) var(--space-3); border: 0; border-radius: 0; background: transparent; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } body.theme-industry #page-contracts #contractFilters select, body.theme-industry #page-contracts #contractFilters input { min-height: 36px; } /* — таблица: строки — .contract-list-head и .contract-list-body — обёртки из шаблона app.js. display:contents поднимает их содержимое в сетку строки, поэтому номер, клиент, платёж, остаток и статус встают в колонки без правки разметки. Каждой ячейке задана и строка, и колонка: иначе автораскладка уводит следующий элемент на новую строку. */ body.theme-industry #page-contracts #contractList { display: block; gap: 0; margin: 0; padding: 0; max-height: none; overflow: visible; border-top: 1px solid var(--color-divider); } body.theme-industry #page-contracts #contractList button.item.contract-list-item { display: grid; /* Имя клиента и товар занимают первую колонку в два этажа, поэтому колонок четыре, а не пять: подзаголовок из разметки ушёл. */ grid-template-columns: minmax(0, 1.7fr) 140px minmax(0, 1.4fr) 104px; gap: 2px 12px; align-items: center; width: 100%; min-height: 0; padding: 10px 14px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; } body.theme-industry #page-contracts #contractList button.item.contract-list-item:hover { background: var(--color-neutral-100); border-color: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); } body.theme-industry #page-contracts #contractList .contract-list-head, body.theme-industry #page-contracts #contractList .contract-list-body { display: contents; } body.theme-industry #page-contracts #contractList .contract-list-name { grid-row: 1; grid-column: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--color-accent-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-industry #page-contracts #contractList .contract-list-product { grid-row: 2; grid-column: 1; min-width: 0; font-size: 13px; color: var(--color-neutral-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-industry #page-contracts #contractList .contract-list-subtitle { grid-row: 1; grid-column: 2; min-width: 0; font-size: 14px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-industry #page-contracts #contractList .contract-list-payment { grid-row: 1 / span 2; grid-column: 2; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; } body.theme-industry #page-contracts #contractList .contract-list-meta { grid-row: 1 / span 2; grid-column: 3; min-width: 0; font-size: 13px; color: var(--color-neutral-800); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-industry #page-contracts #contractList .pill { grid-row: 1 / span 2; grid-column: 4; justify-self: start; border-radius: 0; padding: 3px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; } /* Теги статуса договора по палитре дизайна. Ограничение: pill() в app.js отдаёт «active» и «completed» одним классом .pill.success, поэтому «Закрыт» пока красится как «Активен». Зелёный тег закрытого договора требует отдельного класса в pill(). */ body.theme-industry #page-contracts #contractList .pill.success { background: var(--color-accent-100); color: var(--color-accent-800); } body.theme-industry #page-contracts #contractList .pill.danger { background: var(--st-over-bg); color: var(--st-over-fg); } body.theme-industry #page-contracts #contractList .pill.neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } body.theme-industry #page-contracts #contractList .pill.warning { background: var(--st-month-bg); color: var(--st-month-fg); } body.theme-industry #page-contracts #contractList .empty { border: 0; padding: var(--space-8); text-align: center; color: var(--color-neutral-700); } /* — пагинация — */ body.theme-industry #page-contracts #contractsPagination { justify-content: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider); } body.theme-industry #page-contracts #contractsPageInfo { font-size: 13px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; } /* — карточка выбранного договора и график — */ body.theme-industry #contractSidePanel { position: static; max-height: none; overflow: visible; padding: 0; border: 1px solid var(--color-divider); } body.theme-industry #contractSidePanel > .panel-head { align-items: center; margin: 0; padding: 8px 14px; background: var(--color-accent-900); border-bottom: 0; } body.theme-industry #contractSidePanel > .panel-head.section-gap { margin-top: var(--space-4); border-top: 1px solid var(--color-divider); } body.theme-industry #contractSidePanel > .panel-head h2 { margin: 0; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-100); } body.theme-industry #contractSidePanel > .panel-head .pill { border-radius: 0; background: var(--color-accent-800); color: var(--color-accent-100); font-size: 11px; font-weight: 500; } body.theme-industry #contractSidePanel > .panel-head button.secondary { min-height: 28px; padding: 2px 12px; font-size: 12px; background: transparent; border-color: var(--color-accent-700); color: var(--color-accent-100); } body.theme-industry #contractSidePanel > .panel-head button.secondary:hover { background: var(--color-accent-800); border-color: var(--color-accent-600); color: var(--color-accent-100); } body.theme-industry #contractDetailPanel { padding: var(--space-4); gap: var(--space-3); } body.theme-industry #contractDetailPanel.empty { border: 0; padding: var(--space-8); color: var(--color-neutral-700); } body.theme-industry #contractDetailPanel .grid.two { gap: var(--space-3); } body.theme-industry #contractDetailPanel .item p { margin: 2px 0; font-size: 13px; } /* График платежей на странице: стальная шапка таблицы. */ body.theme-industry #schedulePanel { padding: 0 var(--space-4) var(--space-4); } body.theme-industry #schedulePanel.empty { border: 0; padding: var(--space-8); color: var(--color-neutral-700); } body.theme-industry #schedulePanel thead th { padding: 8px 12px; background: var(--color-accent-900); border-bottom: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-100); text-align: left; } body.theme-industry #schedulePanel tbody td { padding: 8px 12px; font-size: 13px; font-variant-numeric: tabular-nums; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } body.theme-industry #schedulePanel tbody .pill { border-radius: 0; padding: 3px 8px; font-size: 11px; font-weight: 500; } body.theme-industry #schedulePanel tbody button { min-height: 30px; padding: 2px 12px; font-size: 13px; } /* ═══════════════════════════════════════════════════════════════════ МАСТЕР — #page-contractCreate ═══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-contractCreate .contract-create-panel { max-width: 1180px; padding: var(--space-6); } body.theme-industry #page-contractCreate .contract-create-panel > .panel-head { align-items: flex-end; padding-bottom: var(--space-2); margin-bottom: var(--space-4); border-bottom: 2px solid var(--color-accent); } body.theme-industry #page-contractCreate .contract-create-panel > .panel-head h2 { margin: 0; font-size: 22px; } body.theme-industry #page-contractCreate #closeContractFormBtn { min-height: 36px; } /* — степпер: пять ячеек в общей рамке — */ body.theme-industry #page-contractCreate #contractWizardSteps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--space-6); padding: 0; border: 1px solid var(--color-divider); background: var(--color-bg); position: sticky; top: 0; z-index: 5; } body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn { display: block; min-width: 0; min-height: 36px; padding: 10px 8px; border: 0; border-right: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-neutral-700); font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; text-transform: uppercase; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn:last-child { border-right: 0; } body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-right-color: var(--color-divider); color: var(--color-text); } body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn.is-done { background: transparent; color: var(--color-accent-700); } body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn.is-active, body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn.is-active:hover { background: var(--color-accent-900); border-color: var(--color-accent-900); color: var(--color-bg); } /* Будущие шаги приходят из app.js с атрибутом disabled. Дизайн рисует их обычными, поэтому общее затемнение 0.45 из industry.css снимаем и отличаем их только цветом текста. */ body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn:disabled { opacity: 1; color: var(--color-neutral-700); cursor: not-allowed; } body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn:disabled:hover { background: transparent; } /* — форма и шаги — */ body.theme-industry #page-contractCreate #contractForm { display: grid; gap: 0; } body.theme-industry #page-contractCreate .contract-wizard-step { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } body.theme-industry #page-contractCreate .contract-wizard-step .wizard-step-title { margin: 0; font-size: 18px; } body.theme-industry #page-contractCreate .contract-wizard-step .wizard-step-desc, body.theme-industry #page-contractCreate .client-scope-hint { margin: 0; max-width: 70ch; color: var(--color-neutral-800); } body.theme-industry #page-contractCreate .contract-wizard-step .grid { gap: var(--space-3); } body.theme-industry #page-contractCreate .section-gap { margin-top: 0; } body.theme-industry #page-contractCreate #contractTrialHint { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); font-size: 13px; } /* — шаг 1: поиск клиента и подсказки — */ body.theme-industry #page-contractCreate .client-picker { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; } body.theme-industry #page-contractCreate .client-picker > label { margin: 0; } body.theme-industry #page-contractCreate .suggestions { gap: var(--space-2); } body.theme-industry #page-contractCreate .suggestions.empty { display: block; padding: var(--space-3) var(--space-4); text-align: left; border: 1px solid var(--color-divider); border-radius: 0; color: var(--color-neutral-700); font-size: 13px; } body.theme-industry #page-contractCreate .suggestion { display: block; width: 100%; min-height: 36px; padding: 12px 14px; border: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; } body.theme-industry #page-contractCreate .suggestion:hover { background: var(--color-neutral-100); border-color: var(--color-accent-400); color: var(--color-text); } body.theme-industry #page-contractCreate .suggestion.active { background: var(--color-accent-100); border-color: var(--color-accent); color: var(--color-text); } body.theme-industry #page-contractCreate .suggestion strong { display: inline; margin: 0; font-weight: 500; } body.theme-industry #page-contractCreate .suggestion .muted { font-size: 12px; color: var(--color-neutral-700); } /* — шаг 1: блок паспорта — Две зоны загрузки — пунктирные, как в дизайне; сами из разметки и служат зонами. */ body.theme-industry #page-contractCreate .passport-box { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #page-contractCreate .passport-box h3 { margin: 0; font-size: 18px; } body.theme-industry #page-contractCreate .passport-tips { margin: 0; padding-left: 1.1rem; font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-contractCreate .passport-box > .grid.two { gap: var(--space-3); } body.theme-industry #page-contractCreate .passport-box > .grid.two > label { display: flex; flex-direction: column; gap: 8px; padding: var(--space-3); border: 1px dashed var(--color-neutral-400); font-size: 14px; font-weight: 500; color: var(--color-text); } body.theme-industry #page-contractCreate .passport-box .file-source-row { display: flex; gap: 6px; margin: 0; } body.theme-industry #page-contractCreate .passport-box .file-source-btn { flex: 1; min-width: 0; min-height: 36px; font-size: 13px; } body.theme-industry #page-contractCreate .passport-box .file-name { margin: 0; font-size: 12px; font-weight: 400; color: var(--color-neutral-700); } body.theme-industry #page-contractCreate .passport-ocr-note { margin: 0; font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-contractCreate #extractPassportBtn { align-self: flex-start; min-height: 36px; } body.theme-industry #page-contractCreate #passportResult, body.theme-industry #page-contractCreate #productTermsHint { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; text-align: left; font-size: 13px; color: var(--color-neutral-700); } /* — шаг 1: поручитель — */ body.theme-industry #page-contractCreate .guarantor-box { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; } body.theme-industry #page-contractCreate .guarantor-box summary { cursor: pointer; font-weight: 500; } body.theme-industry #page-contractCreate .guarantor-box > *:not(summary) { margin-top: var(--space-3); } body.theme-industry #page-contractCreate .phones-wrap { display: flex; flex-direction: column; gap: var(--space-2); } /* — шаг 2: плитки товаров — */ body.theme-industry #page-contractCreate #productSuggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } /* — шаг 3: инвесторы — Правило с идентификатором страницы побеждает и базовое .three, и @media (max-width:900px) .investor-row.three из styles.css, которое иначе схлопывало бы строку в одну колонку уже с 900px. */ body.theme-industry #page-contractCreate .investor-allocations { margin: 0; padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #page-contractCreate .investor-allocations > .panel-head { margin: 0 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); align-items: center; } body.theme-industry #page-contractCreate .investor-allocations > .panel-head strong { font-family: var(--font-heading); font-weight: 600; font-size: 17px; text-transform: uppercase; } body.theme-industry #page-contractCreate .investor-allocations > p.muted { margin: 0 0 var(--space-3); font-size: 13px; color: var(--color-neutral-800); } body.theme-industry #page-contractCreate .investor-rows { gap: var(--space-2); margin-top: var(--space-3); } body.theme-industry #page-contractCreate .investor-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; padding: var(--space-3); border: 1px solid var(--color-divider); } body.theme-industry #page-contractCreate .investor-row select, body.theme-industry #page-contractCreate .investor-row input { min-height: 36px; } body.theme-industry #page-contractCreate .investor-amount-actions { gap: 6px; margin-top: 6px; } body.theme-industry #page-contractCreate .investor-amount-actions .preset-btn, body.theme-industry #page-contractCreate .investor-row button.secondary { min-height: 36px; padding: 0 12px; border: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 13px; font-weight: 400; cursor: pointer; } body.theme-industry #page-contractCreate .investor-amount-actions .preset-btn:hover, body.theme-industry #page-contractCreate .investor-row button.secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-text); } body.theme-industry #page-contractCreate .investor-amount-actions .preset-btn:disabled { opacity: 0.45; cursor: not-allowed; } body.theme-industry #page-contractCreate #contractInvestorTotal { margin: var(--space-3) 0 0; font-size: 13px; color: var(--color-neutral-800); font-variant-numeric: tabular-nums; } body.theme-industry #page-contractCreate .empty-inline { margin: 0; font-size: 13px; color: var(--color-neutral-700); } body.theme-industry #page-contractCreate #addContractInvestorRow { min-height: 36px; } /* — шаг 4: пресеты условий — */ body.theme-industry #page-contractCreate .term-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; } body.theme-industry #page-contractCreate .term-presets .preset-btn { min-height: 36px; padding: 8px 14px; border: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 13px; font-weight: 400; cursor: pointer; } body.theme-industry #page-contractCreate .term-presets .preset-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-text); } body.theme-industry #page-contractCreate .term-presets .preset-btn.is-active, body.theme-industry #page-contractCreate .term-presets .preset-btn.is-active:hover { background: var(--color-accent-900); border-color: var(--color-accent-900); color: var(--color-bg); } body.theme-industry #page-contractCreate .field-hint { font-size: 12px; color: var(--color-neutral-700); } /* — шаг 4: две колонки «форма + липкая панель Расчёт 300px» — Панель расчёта лежит внутри секции четвёртого шага, поэтому колонки строятся здесь. Ей отдана вторая колонка и запас строк: пустые неявные строки имеют нулевую высоту, а row-gap обнулён, поэтому вертикальный ритм задан отступами у левой колонки. */ body.theme-industry #page-contractCreate .contract-wizard-step[data-wizard-step="4"] { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--space-8); row-gap: 0; align-items: start; } body.theme-industry #page-contractCreate .contract-wizard-step[data-wizard-step="4"] > * { grid-column: 1; margin-bottom: var(--space-4); } body.theme-industry #page-contractCreate .contract-wizard-step[data-wizard-step="4"] > *:last-child { margin-bottom: 0; } body.theme-industry #page-contractCreate .contract-wizard-step[data-wizard-step="4"] > #contractTermsPreview { grid-column: 2; grid-row: 1 / span 12; align-self: start; position: sticky; top: var(--space-4); margin-bottom: 0; } /* — панель «Расчёт» — */ body.theme-industry #page-contractCreate .terms-preview { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #page-contractCreate .terms-preview.empty { background: transparent; color: var(--color-neutral-700); text-align: left; } body.theme-industry #page-contractCreate .terms-preview.is-error { border-color: var(--color-debt-line); background: transparent; color: var(--color-debt); } body.theme-industry #page-contractCreate .terms-preview > strong { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); } body.theme-industry #page-contractCreate .terms-preview dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; } body.theme-industry #page-contractCreate .terms-preview dt, body.theme-industry #page-contractCreate .terms-preview dd { padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); font-size: 13px; } body.theme-industry #page-contractCreate .terms-preview dt { font-weight: 400; color: var(--color-neutral-700); } body.theme-industry #page-contractCreate .terms-preview dd { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; } /* Последняя пара списка — «Ежемесячный платёж»: в дизайне это главная цифра панели. Класса у неё нет, отсюда выбор по позиции. */ body.theme-industry #page-contractCreate .terms-preview dd:last-of-type { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1.1; } /* — шаг 5: сводка проверки — */ body.theme-industry #page-contractCreate .contract-review-summary { gap: 0; border: 1px solid var(--color-divider); } body.theme-industry #page-contractCreate .contract-review-summary .review-block { padding: 10px 14px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); border-radius: 0; background: transparent; } body.theme-industry #page-contractCreate .contract-review-summary .review-block:last-child { border-bottom: 0; } body.theme-industry #page-contractCreate .contract-review-summary .review-block h4 { margin: 0 0 4px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); } body.theme-industry #page-contractCreate .contract-review-summary p { margin: 2px 0; font-size: 13px; font-variant-numeric: tabular-nums; } body.theme-industry #page-contractCreate .contract-review-summary p strong { font-weight: 500; } /* — кнопки навигации мастера — */ body.theme-industry #page-contractCreate .wizard-actions { gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); padding: var(--space-4) 0 max(var(--space-3), env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-divider); background: var(--color-bg); } /* Распорка дизайна: левая кнопка прижата к левому краю, правая — к правому, и «Далее» остаётся справа даже когда «Назад» скрыта на первом шаге. */ body.theme-industry #page-contractCreate #contractWizardBack { margin-right: auto; min-height: 36px; } body.theme-industry #page-contractCreate #contractWizardNext, body.theme-industry #page-contractCreate #contractWizardSubmit { min-height: 36px; padding-inline: 20px; } /* ═══════════════════════════════════════════════════════════════════ ДИАПАЗОН 761–1100: снимаем мобильные правила прежнего слоя У старого интерфейса точки 1100/900/680; здесь перелом один — 760px. ═══════════════════════════════════════════════════════════════════ */ @media (min-width: 761px) { /* styles.css:2695 схлопывает рабочую область с 1100px; в этом оформлении колонка и так одна, но фиксируем это явно. */ body.theme-industry #page-contracts .contracts-workspace { grid-template-columns: minmax(0, 1fr); } /* styles.css:1053 переводит строку инвестора в одну колонку с 900px. */ body.theme-industry #page-contractCreate .investor-row.three { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; } /* styles.css:2760 снимает ограничение высоты списка — это как раз то, что нужно таблице, но вернём предсказуемость и сверху. */ body.theme-industry #page-contracts #contractList { max-height: none; overflow: visible; } body.theme-industry #page-contracts #contractFilters.filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ═══════════════════════════════════════════════════════════════════ ТЕЛЕФОН — единственная точка перелома 760px ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { /* — договоры — */ body.theme-industry #page-contracts > .panel:first-child .panel-head { align-items: stretch; flex-direction: column; gap: var(--space-2); } body.theme-industry #page-contracts #toggleContractFormBtn { width: 100%; min-height: 44px; } body.theme-industry #page-contracts .contracts-list-panel { border-left: 0; border-right: 0; } body.theme-industry #page-contracts .contracts-list-panel .panel-head { flex-direction: row; align-items: center; padding: 8px var(--space-4); } body.theme-industry #page-contracts .contracts-list-panel .panel-head button.secondary { width: auto; min-height: 34px; } body.theme-industry #page-contracts #contractSearch { min-height: 44px; } body.theme-industry #page-contracts #contractFilters { grid-template-columns: minmax(0, 1fr); } body.theme-industry #page-contracts #contractFilters select, body.theme-industry #page-contracts #contractFilters input { min-height: 44px; } /* Карточки-строки: слева имя, номер и платёж, справа статус и остаток. */ body.theme-industry #page-contracts #contractList button.item.contract-list-item { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px var(--space-4); } /* Три этажа: имя и статус, товар и платёж, строка с номером и остатком. Раньше имя и товар попадали в одну ячейку и накладывались друг на друга — правило писалось, когда в первой колонке стоял номер. */ body.theme-industry #page-contracts #contractList .contract-list-name { grid-row: 1; grid-column: 1; font-size: 15px; font-weight: 500; color: var(--color-accent-800); } body.theme-industry #page-contracts #contractList .pill { grid-row: 1; grid-column: 2; justify-self: end; } body.theme-industry #page-contracts #contractList .contract-list-product { grid-row: 2; grid-column: 1; font-size: 13px; color: var(--color-neutral-800); } body.theme-industry #page-contracts #contractList .contract-list-payment { grid-row: 2; grid-column: 2; justify-self: end; font-size: 13px; } body.theme-industry #page-contracts #contractList .contract-list-meta { grid-row: 3; grid-column: 1 / -1; text-align: left; font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-contracts #contractsPagination { flex-wrap: nowrap; } body.theme-industry #contractSidePanel { border-left: 0; border-right: 0; } body.theme-industry #contractDetailPanel .grid.two { grid-template-columns: minmax(0, 1fr); } body.theme-industry #schedulePanel { padding: 0 var(--space-4) var(--space-4); } body.theme-industry #schedulePanel tbody button { min-height: 44px; } /* — мастер — */ body.theme-industry #page-contractCreate .contract-create-panel { padding: var(--space-4); } /* Пять ячеек в ряд на телефоне нечитаемы: две строки по три и две. */ body.theme-industry #page-contractCreate #contractWizardSteps { grid-template-columns: repeat(3, minmax(0, 1fr)); position: static; } body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn { min-height: 44px; font-size: 13px; padding: 8px; } body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn:nth-child(3n) { border-right: 0; } body.theme-industry #page-contractCreate #contractWizardSteps .wizard-step-btn:nth-child(-n + 3) { border-bottom: 1px solid var(--color-divider); } body.theme-industry #page-contractCreate .contract-wizard-step .grid.two, body.theme-industry #page-contractCreate .passport-box > .grid.two, body.theme-industry #page-contractCreate #productSuggestions { grid-template-columns: minmax(0, 1fr); } body.theme-industry #page-contractCreate .investor-row { grid-template-columns: minmax(0, 1fr); } body.theme-industry #page-contractCreate .investor-row select, body.theme-industry #page-contractCreate .investor-row input, body.theme-industry #page-contractCreate .investor-amount-actions .preset-btn, body.theme-industry #page-contractCreate .investor-row button.secondary, body.theme-industry #page-contractCreate .term-presets .preset-btn, body.theme-industry #page-contractCreate .suggestion, body.theme-industry #page-contractCreate .passport-box .file-source-btn, body.theme-industry #page-contractCreate #extractPassportBtn, body.theme-industry #page-contractCreate #addContractInvestorRow, body.theme-industry #page-contractCreate #closeContractFormBtn, body.theme-industry #page-contractCreate #contractWizardBack, body.theme-industry #page-contractCreate #contractWizardNext, body.theme-industry #page-contractCreate #contractWizardSubmit { min-height: 44px; } /* Панель «Расчёт» уезжает под форму. */ body.theme-industry #page-contractCreate .contract-wizard-step[data-wizard-step="4"] { grid-template-columns: minmax(0, 1fr); } body.theme-industry #page-contractCreate .contract-wizard-step[data-wizard-step="4"] > #contractTermsPreview { grid-column: 1; grid-row: auto; position: static; margin-bottom: var(--space-4); } body.theme-industry #page-contractCreate .terms-preview dd:last-of-type { font-size: 24px; } body.theme-industry #page-contractCreate .wizard-actions { justify-content: stretch; } body.theme-industry #page-contractCreate #contractWizardNext, body.theme-industry #page-contractCreate #contractWizardSubmit { flex: 1; } } /* 12-ops.css — оформление «Industry» для трёх операционных экранов: * «Платежи» (#page-payments), «Напоминания» (#page-notifications), * «Клиенты» (#page-clients). * * Каждое правило начинается с body.theme-industry: галочка в настройках * выключает слой и прежний вид возвращается целиком. * * Разметку не трогаем — работаем по тем классам и идентификаторам, которые * реально рисует app.js: * renderPayments() → #paymentsTable > table (Номер|Клиент|Сумма|Дата) * renderPaymentDetail() → #paymentDetailPanel (.empty либо .list с .item) * renderNotificationItems() → #notificationList > .item.ops-item * renderUsers() → #usersTable > table (Имя|База|Телефоны|Рейтинг|Действие) * * Специфичность: везде, где перебиваем styles.css или industry.css, в селектор * добавлен идентификатор страницы или блока — иначе правило молча проиграет. * Файл рассчитан на подключение ПОСЛЕ industry.css. */ /* ══════════════════════════════════════════════════════════════════ ПЛАТЕЖИ — #page-payments ══════════════════════════════════════════════════════════════════ */ /* Список в макете — не карточка, а колонка «поиск → строки → листалка». Рамку и внутренние отступы панели снимаем, шаг оставляем как у макета. */ body.theme-industry #page-payments .payments-list-panel { border: 0; background: transparent; box-shadow: none; padding: 0; gap: var(--space-4); } body.theme-industry #page-payments .payments-list-panel .panel-head { align-items: center; border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-2); margin: 0; } body.theme-industry #page-payments .payments-list-panel .panel-head h2 { margin: 0; font-size: 22px; } body.theme-industry #page-payments #paymentSearch { width: 100%; max-width: 420px; } /* — таблица списка — Колонки заданы в renderPayments(): 1 Номер, 2 Клиент, 3 Сумма, 4 Дата. Порядок жёсткий, поэтому обращаемся по nth-child. */ body.theme-industry #page-payments #paymentsTable table { width: 100%; border-collapse: collapse; } /* Шапка тёмной полосой, как у сетки платежей и таблицы договоров. Липкая: список прокручивается внутри своей области на широком экране. */ body.theme-industry #page-payments #paymentsTable th { position: sticky; top: 0; z-index: 2; background: var(--color-accent-900); color: var(--color-accent-100); border: 0; padding: 8px 14px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } body.theme-industry #page-payments #paymentsTable td { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); padding: 10px 14px; vertical-align: middle; } body.theme-industry #page-payments #paymentsTable tbody tr { /* Опорная точка для накладки, которая делает кликабельной всю строку. */ position: relative; cursor: pointer; } body.theme-industry #page-payments #paymentsTable tbody tr:hover { background: var(--color-neutral-100); } body.theme-industry #page-payments #paymentsTable td:nth-child(1) { font-variant-numeric: tabular-nums; } body.theme-industry #page-payments #paymentsTable td:nth-child(2) { font-weight: 500; } body.theme-industry #page-payments #paymentsTable th:nth-child(3), body.theme-industry #page-payments #paymentsTable td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; } body.theme-industry #page-payments #paymentsTable td:nth-child(3) strong { font-weight: 500; } body.theme-industry #page-payments #paymentsTable td:nth-child(4) { font-size: 13px; color: var(--color-neutral-800); font-variant-numeric: tabular-nums; } /* Номер платежа — кнопка .link. В макете это обычный текст строки, а не ссылка, поэтому снимаем кнопочную типографику. */ body.theme-industry #page-payments #paymentsTable button.link { min-height: 0; padding: 0; border: 0; background: none; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--color-text); font-variant-numeric: tabular-nums; text-align: left; } body.theme-industry #page-payments #paymentsTable button.link:hover { background: none; color: var(--color-accent-700); } /* Клик по всей строке, как в макете: кнопка-номер растягивается невидимой накладкой на всю строку. Заодно это даёт палец >=44px на телефоне, хотя сам текст номера маленький. */ body.theme-industry #page-payments #paymentsTable button.link::after { content: ""; position: absolute; inset: 0; } body.theme-industry #page-payments #paymentsTable .empty { border: 0; padding: var(--space-8); text-align: center; color: var(--color-neutral-700); } /* — карточка платежа — Шапка макета: полоса --color-accent-100 с линией --color-accent-300. Отступ снимаем с панели и переносим внутрь, иначе полосу во всю ширину пришлось бы тянуть отрицательными полями, а панель прокручиваемая — получили бы лишнюю горизонтальную прокрутку. */ body.theme-industry #page-payments .payments-detail-panel { padding: 0; } body.theme-industry #page-payments .payments-detail-panel .panel-head { position: sticky; top: 0; z-index: 1; align-items: center; margin: 0; padding: var(--space-4) var(--space-6); background: var(--color-accent-100); border-bottom: 1px solid var(--color-accent-300); } body.theme-industry #page-payments .payments-detail-panel .panel-head h2 { margin: 0; font-size: 22px; } /* Номер платежа играет роль кикера «Платёж · {дата}» из макета. */ body.theme-industry #page-payments #paymentDetailBadge { padding: 0; background: transparent; color: var(--color-accent-700); font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; } body.theme-industry #page-payments #paymentDetailPanel { padding: var(--space-4) var(--space-6); gap: var(--space-3); } body.theme-industry #page-payments #paymentDetailPanel.empty { border: 0; text-align: left; color: var(--color-neutral-700); } /* Факты карточки — строками с волосяной линией, как в макете. */ body.theme-industry #page-payments #paymentDetailPanel .item { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); border-radius: 0; background: transparent; padding: var(--space-3) 0; } body.theme-industry #page-payments #paymentDetailPanel .item:hover { border-color: color-mix(in srgb, var(--color-text) 8%, transparent); background: transparent; } body.theme-industry #page-payments #paymentDetailPanel button.item:hover { background: var(--color-neutral-100); } body.theme-industry #page-payments #paymentDetailPanel .item strong { display: block; margin: 0 0 4px; font-family: var(--font-heading); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-accent-800); } body.theme-industry #page-payments #paymentDetailPanel .item p { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; } body.theme-industry #page-payments #paymentDetailPanel .item p + p { margin-top: 3px; } body.theme-industry #page-payments #paymentDetailPanel .item-row { justify-content: space-between; gap: var(--space-2); } /* «Сторнировать»: цвет и рамка из токенов долга — ровно #9b2b22 / #e7a39d из макета. Высоту не задаём: industry.css уже даёт 36px, а на телефоне 44px. */ body.theme-industry #page-payments #paymentDetailPanel button.danger { background: transparent; border-color: var(--color-debt-line); color: var(--color-debt); } body.theme-industry #page-payments #paymentDetailPanel button.danger:hover { background: color-mix(in srgb, var(--color-debt) 10%, transparent); border-color: var(--color-debt); color: var(--color-debt); } /* ══════════════════════════════════════════════════════════════════ НАПОМИНАНИЯ — #page-notifications ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-notifications > .panel { border: 0; background: transparent; box-shadow: none; padding: 0; } body.theme-industry #page-notifications .panel-head { align-items: center; border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-2); margin-bottom: var(--space-4); } body.theme-industry #page-notifications .panel-head h2 { margin: 0; font-size: 22px; } body.theme-industry #page-notifications > .panel > p.muted { max-width: 70ch; margin: 0 0 var(--space-4); color: var(--color-neutral-800); } body.theme-industry #page-notifications .panel-head .account { gap: var(--space-2); max-width: none; } /* Поле «Дней вперёд» в макете — строка: подпись слева от ввода. В industry.css label по умолчанию грид с подписью сверху. */ body.theme-industry #page-notifications .panel-head .account label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-neutral-800); white-space: nowrap; } body.theme-industry #page-notifications #notificationDays { flex: none; width: 70px; } /* — вкладки-сегменты — */ body.theme-industry #page-notifications .notification-tabs { display: flex; flex-wrap: nowrap; gap: 0; width: max-content; max-width: 100%; overflow-x: auto; margin: 0 0 var(--space-4); border: 1px solid var(--color-divider); } body.theme-industry #page-notifications .notification-tab { min-height: 34px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 13px; font-weight: 400; white-space: nowrap; } body.theme-industry #page-notifications .notification-tab + .notification-tab { border-left: 1px solid var(--color-divider); } body.theme-industry #page-notifications .notification-tab:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-text); } body.theme-industry #page-notifications .notification-tab.active { background: var(--color-accent); border-color: var(--color-divider); color: var(--color-bg); } /* — список строками — */ body.theme-industry #page-notifications #notificationList { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--color-divider); } body.theme-industry #page-notifications #notificationList .ops-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0 12px 24px; border: 0; border-bottom: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #page-notifications #notificationList .ops-item:hover { border-color: var(--color-divider); background: transparent; } /* Цветная полоса состояния слева. В разметке от состояния взноса есть только значок: pill.danger — просрочка, pill.neutral — ближайший взнос. Четырёх градаций макета (сегодня / 1-3 дня / в этом месяце) в DOM нет. */ body.theme-industry #page-notifications #notificationList .ops-item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 10px; min-height: 36px; background: var(--st-soon-bg); } body.theme-industry #page-notifications #notificationList .ops-item:has(.pill.danger)::before { background: var(--st-over-bg); } /* Имя клиента — первым в строке. */ body.theme-industry #page-notifications #notificationList .ops-item > p { order: 1; flex: 1 1 200px; min-width: 0; margin: 0; font-weight: 500; } /* Номер договора и состояние — сразу за именем, мелким шрифтом. */ body.theme-industry #page-notifications #notificationList .ops-item > .item-row { order: 2; flex: 0 1 auto; justify-content: flex-start; gap: 8px; } body.theme-industry #page-notifications #notificationList .ops-item > .item-row strong { display: inline; margin: 0; font-size: 12px; font-weight: 400; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; } /* Сумма и срок. */ body.theme-industry #page-notifications #notificationList .ops-item > .muted { order: 3; flex: 0 0 150px; font-size: 13px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; } body.theme-industry #page-notifications #notificationList .ops-item:has(.pill.danger) > .muted { color: var(--color-debt); } /* Кнопки каналов — справа, шаг 6px, как в макете. */ body.theme-industry #page-notifications #notificationList .ops-item > .notification-actions { order: 4; flex: 1 1 auto; justify-content: flex-end; gap: 6px; margin: 0; } body.theme-industry #page-notifications #notificationList .ops-item > .linkish { order: 5; width: auto; margin: 0; } /* Текст напоминания в макете отдельной строки не имеет, но и прятать данные нельзя: уводим его под строку мелким шрифтом. Селектор по «без класса» — у .item-row и .notification-actions классы есть, у этого div нет. */ body.theme-industry #page-notifications #notificationList .ops-item > div:not([class]) { order: 6; flex: 1 1 100%; font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-notifications #notificationList .empty { border: 0; padding: var(--space-8); text-align: center; color: var(--color-neutral-700); } /* ══════════════════════════════════════════════════════════════════ КЛИЕНТЫ — #page-clients ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-clients > .panel { border: 0; background: transparent; box-shadow: none; padding: 0; } body.theme-industry #page-clients .panel-head { align-items: center; border-bottom: 2px solid var(--color-accent); padding-bottom: var(--space-2); margin-bottom: var(--space-3); } body.theme-industry #page-clients .panel-head h2 { margin: 0; font-size: 22px; } body.theme-industry #page-clients #clientsHint { max-width: 70ch; margin: 0 0 var(--space-4); color: var(--color-neutral-800); } /* Колонки renderUsers(): 1 Имя, 2 База, 3 Телефоны, 4 Рейтинг, 5 Действие. */ body.theme-industry #page-clients #usersTable table { width: 100%; border-collapse: collapse; } body.theme-industry #page-clients #usersTable th { background: var(--color-accent-900); color: var(--color-accent-100); border: 0; padding: 8px 14px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } body.theme-industry #page-clients #usersTable td { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); padding: 10px 14px; vertical-align: middle; } body.theme-industry #page-clients #usersTable tbody tr:hover { background: var(--color-neutral-100); } body.theme-industry #page-clients #usersTable td:nth-child(1) { font-weight: 500; } body.theme-industry #page-clients #usersTable td:nth-child(3) { font-size: 13px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; } body.theme-industry #page-clients #usersTable td:nth-child(4) { font-size: 13px; color: var(--color-neutral-800); font-variant-numeric: tabular-nums; } body.theme-industry #page-clients #usersTable th:nth-child(5), body.theme-industry #page-clients #usersTable td:nth-child(5) { text-align: right; } body.theme-industry #page-clients #usersTable .empty { border: 0; padding: var(--space-8); text-align: center; color: var(--color-neutral-700); } /* Теги клиента. «Общая база» — нейтральный тег, «На проверке» — контурный, как .tag-neutral и .tag-outline в передаче дизайна. */ body.theme-industry #page-clients .scope-pill { border-radius: 0; padding: 3px 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; } body.theme-industry #page-clients .scope-pill.global { background: var(--color-neutral-100); color: var(--color-neutral-800); } body.theme-industry #page-clients .scope-pill.pending { background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); } body.theme-industry #page-clients .scope-pill.private { background: var(--color-neutral-100); color: var(--color-neutral-700); } /* ══════════════════════════════════════════════════════════════════ ЛИСТАЛКА (платежи и клиенты) ══════════════════════════════════════════════════════════════════ */ body.theme-industry #paymentsPagination, body.theme-industry #clientsPagination { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-2); padding-top: 0; border-top: 0; } /* Скрытие обязано пережить правило выше: у .contracts-pagination.hidden специфичность ниже, чем у селектора с идентификатором. */ body.theme-industry #paymentsPagination.hidden, body.theme-industry #clientsPagination.hidden { display: none; } body.theme-industry #paymentsPageInfo, body.theme-industry #clientsPageInfo { font-size: 13px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════════ ТЕЛЕФОН — единственная точка перелома 760px ══════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { /* Ниже 680px styles.css разворачивает .panel-head в колонку. Вместе с align-items: center с десктопа это выгоняло заголовок на середину — в макете он прижат влево. */ body.theme-industry #page-payments .panel-head, body.theme-industry #page-notifications .panel-head, body.theme-industry #page-clients .panel-head { align-items: flex-start; } /* — платежи: таблица превращается в список строк — */ body.theme-industry #page-payments .payments-list-panel .table-wrap { overflow-x: visible; } body.theme-industry #page-payments #paymentsTable table, body.theme-industry #page-payments #paymentsTable tbody { display: block; width: 100%; } body.theme-industry #page-payments #paymentsTable thead { display: none; } body.theme-industry #page-payments #paymentsTable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); } body.theme-industry #page-payments #paymentsTable td { min-width: 0; padding: 0; border: 0; overflow: hidden; text-overflow: ellipsis; } body.theme-industry #page-payments #paymentsTable td:nth-child(2) { grid-row: 1; grid-column: 1; } body.theme-industry #page-payments #paymentsTable td:nth-child(3) { grid-row: 1; grid-column: 2; font-weight: 500; } body.theme-industry #page-payments #paymentsTable td:nth-child(1) { grid-row: 2; grid-column: 1; font-size: 12px; } body.theme-industry #page-payments #paymentsTable td:nth-child(4) { grid-row: 2; grid-column: 2; font-size: 12px; text-align: right; } body.theme-industry #page-payments #paymentsTable td:nth-child(1) button.link { font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-payments .payments-detail-panel .panel-head, body.theme-industry #page-payments #paymentDetailPanel { padding-left: var(--space-4); padding-right: var(--space-4); } /* Палец 44px. industry.css задаёт это правилом `body.theme-industry button` (0,1,2), но его же базовое правило с удвоенным классом `body.theme-industry button { min-height: 36px }` (0,2,1) выигрывает по специфичности, и 44px не доезжают. Возвращаем на своих экранах. Исключения: сегменты вкладок (в макете 42px) и номер платежа — он текст, а нажимается вся строка целиком. */ body.theme-industry #page-payments button:not(.link), body.theme-industry #page-notifications button:not(.notification-tab), body.theme-industry #page-clients button { min-height: 44px; } /* — напоминания — */ body.theme-industry #page-notifications .notification-tab { /* Сегмент в макете на телефоне 42px, а не 44px, как обычная кнопка. */ min-height: 42px; } body.theme-industry #page-notifications .panel-head .account { flex-wrap: wrap; justify-content: flex-start; max-width: none; } body.theme-industry #page-notifications #notificationList .ops-item { padding-left: 20px; } body.theme-industry #page-notifications #notificationList .ops-item > p, body.theme-industry #page-notifications #notificationList .ops-item > .muted, body.theme-industry #page-notifications #notificationList .ops-item > .notification-actions, body.theme-industry #page-notifications #notificationList .ops-item > .linkish { flex: 1 1 100%; } body.theme-industry #page-notifications #notificationList .ops-item > .notification-actions { justify-content: flex-start; } body.theme-industry #page-notifications #notificationList .ops-item > .notification-actions button { flex: 1 1 auto; } /* — клиенты: таблица превращается в список строк — */ body.theme-industry #page-clients #usersTable { overflow-x: visible; } body.theme-industry #page-clients #usersTable table, body.theme-industry #page-clients #usersTable tbody { display: block; width: 100%; } body.theme-industry #page-clients #usersTable thead { display: none; } body.theme-industry #page-clients #usersTable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-divider); } body.theme-industry #page-clients #usersTable td { min-width: 0; padding: 0; border: 0; overflow: hidden; text-overflow: ellipsis; } body.theme-industry #page-clients #usersTable td:nth-child(1) { grid-row: 1; grid-column: 1; } body.theme-industry #page-clients #usersTable td:nth-child(5) { grid-row: 1; grid-column: 2; justify-self: end; } body.theme-industry #page-clients #usersTable td:nth-child(3) { grid-row: 2; grid-column: 1; font-size: 12px; } body.theme-industry #page-clients #usersTable td:nth-child(2) { grid-row: 2; grid-column: 2; justify-self: end; overflow: visible; } body.theme-industry #page-clients #usersTable td:nth-child(4) { grid-row: 3; grid-column: 1 / -1; font-size: 12px; } /* — листалка во всю ширину — */ body.theme-industry #paymentsPagination, body.theme-industry #clientsPagination { flex-wrap: wrap; } body.theme-industry #paymentsPagination button, body.theme-industry #clientsPagination button { flex: 1 1 120px; } } /* 13-catalog.css — оформление «Industry» для восьми экранов: * магазин и команда, товары, скоринг, инвесторы, касса и учёт, * импорт из Excel, тариф, настройки. * * Каждое правило начинается с body.theme-industry — галочка в настройках * выключает слой, и прежний вид возвращается целиком. * * Токены и приёмы взяты из web/industry.css: ничего нового не заводится. * Идентификатор страницы в селекторе стоит там, где нужно перебить * правило styles.css из медиазапроса 1100/900px: специфичность (1,x,y) * выигрывает у (0,1,0) независимо от точки перелома, поэтому отдельный * блок @media (min-width: 761px) не понадобился — старые мобильные * правила прежнего слоя в диапазоне 761–1100px проигрывают по весу. */ /* ══════════════════════════════════════════════════════════════════ РАСКЛАДКА СТРАНИЦ L.cols2 — два равных столбца; L.prodCols — форма 360px + список. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-merchants, body.theme-industry #page-scoring, body.theme-industry #page-excel, body.theme-industry #page-billing, body.theme-industry #page-settings, body.theme-industry #page-products, body.theme-industry #page-investors, body.theme-industry #page-finance { gap: var(--space-8); align-items: start; } body.theme-industry #page-merchants { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.theme-industry #page-finance { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } body.theme-industry #page-investors, body.theme-industry #page-billing { grid-template-columns: minmax(0, 1fr); } /* Внутренние двухколоночники: .two в styles.css схлопывается в одну колонку уже на 1100px — здесь он остаётся двумя до самой точки 760px. */ body.theme-industry #page-scoring > .grid.two, body.theme-industry #page-excel > .grid.two, body.theme-industry #page-settings > .grid.two, body.theme-industry #financePanelCash > .grid.two, body.theme-industry #financePanelMessages .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; } body.theme-industry #financePanelMessages .grid.two { gap: var(--space-4); } /* Форма слева 360px, каталог/список справа (L.prodCols). */ body.theme-industry #page-products > .grid.two, body.theme-industry #page-investors > .grid.two { grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-8); align-items: start; } /* ══════════════════════════════════════════════════════════════════ ЗАГОЛОВКИ СЕКЦИЙ — КИКЕРЫ В макете внутри страницы нет крупных заголовков: секции подписаны кикером 12px. Шрифт — var(--font-heading) по требованию к слою (в прототипе кикер шёл основным шрифтом; на 12px разница минимальна). ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-merchants .panel > h2, body.theme-industry #page-merchants .panel-head h2, body.theme-industry #page-products .panel > h2, body.theme-industry #page-scoring .panel > h2, body.theme-industry #page-investors .panel > h2, body.theme-industry #page-investors .panel-head h2, body.theme-industry #page-finance .panel > h2, body.theme-industry #page-finance .panel-head h2, body.theme-industry #page-finance .panel > h3, body.theme-industry #page-finance .panel-head h3, body.theme-industry #page-excel .panel > h2, body.theme-industry #page-billing .panel-head h2, body.theme-industry #page-settings .panel > h2, body.theme-industry #page-settings .settings-subheading, body.theme-industry #page-settings .linked-accounts h3, body.theme-industry #investorOverviewStats .earnings-subtitle { font-family: var(--font-heading); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 var(--space-3); } /* Нумерация кикеров есть только там, где разметка совпадает с макетом один в один. Остальные секции остаются без номера — выдуманная нумерация разъехалась бы молча. */ body.theme-industry #page-merchants > .panel:first-child > .panel-head h2::before { content: "01 · "; } body.theme-industry #merchantTeamPanel > .panel-head h2::before { content: "02 · "; } body.theme-industry #page-settings .settings-account-panel > h2::before { content: "01 · "; } body.theme-industry #securitySettingsPanel > h2::before { content: "02 · "; } /* Подпись-пояснение под кикером. */ body.theme-industry #page-merchants .panel > p.muted, body.theme-industry #page-scoring .panel > p.muted, body.theme-industry #page-finance .panel > p.muted, body.theme-industry #page-excel .panel > p.muted, body.theme-industry #page-settings .panel > p.muted { margin: 0 0 var(--space-3); font-size: 13px; color: var(--color-neutral-800); } /* ══════════════════════════════════════════════════════════════════ ФОРМЫ ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-merchants .form, body.theme-industry #page-products .form, body.theme-industry #page-scoring .form, body.theme-industry #page-investors .form, body.theme-industry #page-finance .form, body.theme-industry #page-excel .form, body.theme-industry #page-settings .form { gap: var(--space-3); } body.theme-industry #page-merchants .grid.two, body.theme-industry #page-products .form .grid.two, body.theme-industry #page-settings .form .grid.two { gap: var(--space-2); } body.theme-industry #page-merchants #merchantTeamInviteForm .grid.two { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; } /* Поля наследуют вид из industry.css; ширину задаём здесь, потому что в прежнем слое её держал .form. */ body.theme-industry #page-merchants input, body.theme-industry #page-merchants select, body.theme-industry #page-merchants textarea, body.theme-industry #page-products input, body.theme-industry #page-products select, body.theme-industry #page-products textarea, body.theme-industry #page-scoring input, body.theme-industry #page-scoring select, body.theme-industry #page-investors input:not([type="radio"]), body.theme-industry #page-investors select, body.theme-industry #page-finance input:not([type="checkbox"]), body.theme-industry #page-finance select, body.theme-industry #page-excel input, body.theme-industry #page-settings input:not([type="checkbox"]), body.theme-industry #page-settings select { width: 100%; } body.theme-industry #page-merchants textarea, body.theme-industry #page-products textarea { min-height: 74px; resize: vertical; } /* ══════════════════════════════════════════════════════════════════ УГОЛКИ «BLUEPRINT» У ГЛАВНЫХ КНОПОК В разметке нет , поэтому четыре уголка рисуются восемью слоями фона на псевдоэлементе, вынесенном на 6px за кнопку. Геометрия повторяет .blueprint > .corner из industry.css: вертикаль 1×11 на 5px от края, горизонталь 11×1 на 5px от края. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #merchantForm > button, body.theme-industry #productForm > button, body.theme-industry #scoringForm > button, body.theme-industry #investorForm > button, body.theme-industry #cardEntryForm > button, body.theme-industry #importExcelForm > button, body.theme-industry #exportExcelBtn, body.theme-industry #billingPayBtn { position: relative; overflow: visible; justify-self: start; min-height: 36px; } body.theme-industry #merchantForm > button::after, body.theme-industry #productForm > button::after, body.theme-industry #scoringForm > button::after, body.theme-industry #investorForm > button::after, body.theme-industry #cardEntryForm > button::after, body.theme-industry #importExcelForm > button::after, body.theme-industry #exportExcelBtn::after, body.theme-industry #billingPayBtn::after { content: ""; position: absolute; inset: -6px; pointer-events: none; color: color-mix(in srgb, var(--color-text) 55%, transparent); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px, 1px 11px, 11px 1px; background-position: left 5px top 0, left 0 top 5px, right 5px top 0, right 0 top 5px, left 5px bottom 0, left 0 bottom 5px, right 5px bottom 0, right 0 bottom 5px; } /* Кнопки-вторички на моих экранах: прозрачные, рамка divider, без уголков. */ body.theme-industry #merchantTeamInviteForm > button, body.theme-industry #cashOpeningForm > button, body.theme-industry #page-settings form > button, body.theme-industry #page-settings .item > button:not(.danger) { background: transparent; border-color: var(--color-divider); color: var(--color-text); justify-self: start; min-height: 36px; } body.theme-industry #merchantTeamInviteForm > button:hover, body.theme-industry #cashOpeningForm > button:hover, body.theme-industry #page-settings form > button:hover, body.theme-industry #page-settings .item > button:not(.danger):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-text); } /* «Записать» в кассе — primary, но без уголков: их съедает сетка формы. */ body.theme-industry #cashEntryForm > button { min-height: 36px; } /* ══════════════════════════════════════════════════════════════════ РАДИО И ТУМБЛЕРЫ ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-investors .investor-income-mode-fieldset { border: 1px solid var(--color-divider); border-radius: 0; padding: var(--space-3) var(--space-4); margin: var(--space-2) 0; display: flex; flex-direction: column; gap: 6px; } body.theme-industry #page-investors .investor-income-mode-fieldset legend { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); padding: 0 6px; } body.theme-industry #page-investors label.scope-option { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--color-text); cursor: pointer; } body.theme-industry #page-investors input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; min-height: 0; padding: 0; border: 1.5px solid var(--color-divider); border-radius: 50%; background: transparent; cursor: pointer; } body.theme-industry #page-investors label.scope-option:hover input[type="radio"] { border-color: var(--color-accent); } body.theme-industry #page-investors input[type="radio"]:checked { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); } /* Тумблер-дорожка 40×22 с бегунком 16×16 — шаблон 0.6 из макета. Разметка рисует обычный чекбокс, поэтому дорожка собирается из самого input (appearance:none) и его ::before. */ body.theme-industry #page-settings label.checkbox-row, body.theme-industry #page-settings label.theme-toggle-row { display: flex; align-items: center; gap: 12px; min-height: 36px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--color-text); cursor: pointer; } body.theme-industry #page-settings label.checkbox-row > input[type="checkbox"], body.theme-industry #page-settings label.theme-toggle-row > input[type="checkbox"] { order: 2; margin-left: auto; appearance: none; -webkit-appearance: none; flex: none; display: flex; align-items: center; justify-content: flex-start; width: 40px; height: 22px; min-height: 0; padding: 2px; border: 1px solid var(--color-divider); border-radius: 0; background: transparent; cursor: pointer; } body.theme-industry #page-settings label.checkbox-row > input[type="checkbox"]::before, body.theme-industry #page-settings label.theme-toggle-row > input[type="checkbox"]::before { content: ""; width: 16px; height: 16px; background: var(--color-neutral-400); } body.theme-industry #page-settings label.checkbox-row > input[type="checkbox"]:checked, body.theme-industry #page-settings label.theme-toggle-row > input[type="checkbox"]:checked { justify-content: flex-end; border-color: var(--color-accent); background: var(--color-accent); } body.theme-industry #page-settings label.checkbox-row > input[type="checkbox"]:checked::before, body.theme-industry #page-settings label.theme-toggle-row > input[type="checkbox"]:checked::before { background: var(--color-bg); } /* ══════════════════════════════════════════════════════════════════ ПОЛОСА KPI Разделители — зазор 1px по фону divider, а не рамки у ячеек. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #investorOverviewStats, body.theme-industry #cashMetrics, body.theme-industry #cardMetrics, body.theme-industry #dealTotals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } body.theme-industry #investorOverviewStats .investor-stat-card, body.theme-industry #cashMetrics .investor-stat-card, body.theme-industry #cardMetrics .investor-stat-card, body.theme-industry #dealTotals .investor-stat-card { display: flex; flex-direction: column; gap: 4px; width: auto; padding: var(--space-4); border: 0; border-radius: 0; background: var(--color-bg); box-shadow: none; text-align: left; } body.theme-industry #investorOverviewStats .investor-stat-card span, body.theme-industry #cashMetrics .investor-stat-card span, body.theme-industry #cardMetrics .investor-stat-card span, body.theme-industry #dealTotals .investor-stat-card span { display: block; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); } body.theme-industry #investorOverviewStats .investor-stat-card strong, body.theme-industry #cashMetrics .investor-stat-card strong, body.theme-industry #cardMetrics .investor-stat-card strong, body.theme-industry #dealTotals .investor-stat-card strong { display: block; margin: 0; font-family: var(--font-heading); font-size: 28px; font-weight: 600; line-height: 1.05; } /* Сноски внутри полосы (строка «По статусам» и таблица заработка) — тоже ячейки, иначе просвечивает фон-разделитель. */ body.theme-industry #investorOverviewStats > p.muted, body.theme-industry #investorOverviewStats > div:not(.investor-stat-card) { background: var(--color-bg); padding: var(--space-3) var(--space-4); } /* Отступы этим блокам app.js проставляет инлайном — снять их можно только !important. */ body.theme-industry #investorOverviewStats > p.muted, body.theme-industry #investorOverviewStats > div:not(.investor-stat-card) { margin: 0 !important; } /* ══════════════════════════════════════════════════════════════════ 1. МАГАЗИН И КОМАНДА (#page-merchants) ══════════════════════════════════════════════════════════════════ */ body.theme-industry #merchantList .item, body.theme-industry #merchantTeamList .item { border: 0; border-bottom: 1px solid var(--color-divider); border-radius: 0; padding: 10px 0; background: transparent; display: flex; flex-direction: column; gap: 4px; } body.theme-industry #merchantList .item:hover, body.theme-industry #merchantTeamList .item:hover { border-color: var(--color-divider); background: transparent; } body.theme-industry #merchantList .item strong, body.theme-industry #merchantTeamList .item strong { margin: 0; font-weight: 500; color: var(--color-text); } body.theme-industry #merchantTeamList .item .item-row + .item-row { gap: 8px; } body.theme-industry #merchantTeamList select[data-member-role] { width: auto; min-height: 34px; flex: 0 1 auto; } body.theme-industry #merchantList, body.theme-industry #merchantTeamList { gap: 0; } /* Список участников — обычный список, рамка «пусто» ему не нужна, пока в нём есть строки. */ body.theme-industry #merchantTeamList.list:not(:empty) { border: 0; padding: 0; } body.theme-industry #merchantTeamRoleBadge { align-self: center; } /* ══════════════════════════════════════════════════════════════════ 2. ТОВАРЫ (#page-products) ══════════════════════════════════════════════════════════════════ */ body.theme-industry #productList.catalog { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); align-items: start; } body.theme-industry #productList .item { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #productList .item strong { margin: 0; font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.12; text-transform: uppercase; color: var(--color-text); } /* Строка с ценой — первый блок после шапки плитки. */ body.theme-industry #productList .item > .item-row + div { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--color-text); } body.theme-industry #productList .item .muted { font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #productList .item > .item-row { align-items: flex-start; } body.theme-industry #productList .item .secondary { min-height: 30px; padding: 2px 8px; font-size: 12px; } /* ══════════════════════════════════════════════════════════════════ 3. СКОРИНГ (#page-scoring) Карточка результата: балл крупно, тег риска рядом с вердиктом. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #scoringResult.item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #scoringResult.item:hover { border-color: var(--color-divider); background: transparent; } body.theme-industry #scoringResult .item-row { align-items: center; } body.theme-industry #scoringResult strong { margin: 0; font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); } /* Первый абзац — «Рейтинг: N». Колонкой: подпись сверху, балл под ней крупно, как в макете. */ body.theme-industry #scoringResult > p:first-of-type { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-700); } body.theme-industry #scoringResult > p:first-of-type b { font-family: var(--font-heading); font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; color: var(--color-text); } body.theme-industry #scoringResult > p:first-of-type ~ p { margin: 0; font-size: 13px; color: var(--color-neutral-800); font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════════ 4. ИНВЕСТОРЫ (#page-investors) ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-investors .investor-overview-panel { margin-bottom: 0; } body.theme-industry #page-investors .panel-head { flex-wrap: wrap; gap: 8px; } body.theme-industry #page-investors .forecast-period-label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); } body.theme-industry #page-investors .forecast-period-label select { width: auto; min-width: 140px; min-height: 34px; } body.theme-industry #investorForecastPeriodHint { margin: 0 0 var(--space-3); font-size: 12px; color: var(--color-neutral-700); } /* Строка инвестора: имя и цифры слева, «Удалить» справа. */ body.theme-industry #investorList { gap: 0; } body.theme-industry #investorList .item.investor-list-item { border: 0; border-bottom: 1px solid var(--color-divider); border-radius: 0; padding: 12px 0; background: transparent; gap: 4px; } body.theme-industry #investorList .item.investor-list-item:hover { border-color: var(--color-divider); background: transparent; } body.theme-industry #investorList .investor-list-main { display: flex; flex-direction: row; align-items: center; gap: 10px; width: auto; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); } body.theme-industry #investorList .investor-list-main:hover { background: transparent; border: 0; color: var(--color-text); } body.theme-industry #investorList .investor-list-main strong { margin: 0; font-weight: 500; font-size: 15px; color: var(--color-accent-800); } body.theme-industry #investorList .investor-list-body { gap: 2px; min-height: 0; padding: 0; border: 0; background: transparent; } body.theme-industry #investorList .investor-list-body:hover { background: transparent; border: 0; } body.theme-industry #investorList .investor-list-body .muted { font-size: 12px; color: var(--color-neutral-700); font-variant-numeric: tabular-nums; } body.theme-industry #investorList .investor-list-delete { min-height: 30px; padding: 2px 10px; font-size: 12px; } body.theme-industry #page-investors .field-hint { font-size: 12px; color: var(--color-neutral-700); } /* ══════════════════════════════════════════════════════════════════ 5. КАССА И УЧЁТ (#page-finance) ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-finance .finance-panel { display: flex; flex-direction: column; gap: var(--space-6); } body.theme-industry #page-finance .finance-panel.hidden { display: none; } /* Вкладки: общая рамка, без зазоров и скруглений. */ body.theme-industry #page-finance .ops-tabs.finance-tabs { display: flex; flex-wrap: nowrap; gap: 0; align-self: flex-start; max-width: 100%; overflow-x: auto; margin: var(--space-3) 0 0; border: 1px solid var(--color-divider); } body.theme-industry #page-finance .finance-tabs .ops-tab { min-height: 34px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 13px; font-weight: 400; white-space: nowrap; } body.theme-industry #page-finance .finance-tabs .ops-tab:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border: 0; color: var(--color-text); } body.theme-industry #page-finance .finance-tabs .ops-tab.active { background: var(--color-accent); border: 0; color: var(--color-bg); } /* Форма операции по кассе — L.cashForm. */ body.theme-industry #cashEntryForm { display: grid; grid-template-columns: 160px 160px minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; } body.theme-industry #cashOpeningForm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; } /* Журнал кассы — строки данных: нижняя граница 8%, а не divider. */ body.theme-industry #cashEntriesList { gap: 0; border-top: 1px solid var(--color-divider); } body.theme-industry #cashEntriesList .item { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); border-radius: 0; background: transparent; } body.theme-industry #cashEntriesList .item:hover { border-color: color-mix(in srgb, var(--color-text) 8%, transparent); background: var(--color-neutral-100); } body.theme-industry #cashEntriesList .item strong { margin: 0; font-weight: 500; color: var(--color-text); } body.theme-industry #cashEntriesList .item .item-row > span { font-weight: 500; font-variant-numeric: tabular-nums; } body.theme-industry #cashEntriesList .item .muted { font-size: 12px; color: var(--color-neutral-700); } /* Фильтр месяца в «Марже». */ body.theme-industry #page-finance .compact-label { display: grid; gap: 5px; min-width: 190px; width: auto; font-family: var(--font-body); font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); } body.theme-industry #page-finance .panel-head .compact-label { flex: 0 1 auto; } /* Шаблоны сообщений. */ body.theme-industry #financePanelMessages .item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #financePanelMessages .item:hover { border-color: var(--color-divider); background: transparent; } body.theme-industry #financePanelMessages .item strong { margin: 0; font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); } body.theme-industry #page-finance .message-template { margin: 0; padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-surface); color: var(--color-text); font-family: var(--font-body); font-size: 13px; line-height: 1.5; } body.theme-industry #page-finance .item > a.pill { align-self: flex-start; text-decoration: none; } body.theme-industry #page-finance .section-gap { margin-top: var(--space-4); } /* ══════════════════════════════════════════════════════════════════ ТАБЛИЦЫ (карты, маржа) Шапка — тёмная сталь, числовые колонки по правому краю. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #cardEntriesTable.table-wrap, body.theme-industry #dealAnalyticsTable.table-wrap { border: 1px solid var(--color-divider); } body.theme-industry #cardEntriesTable thead tr, body.theme-industry #dealAnalyticsTable thead tr { background: var(--color-accent-900); } body.theme-industry #cardEntriesTable thead tr:hover, body.theme-industry #dealAnalyticsTable thead tr:hover { background: var(--color-accent-900); } body.theme-industry #cardEntriesTable th, body.theme-industry #dealAnalyticsTable th { padding: 8px 14px; border-bottom: 0; color: var(--color-accent-100); } body.theme-industry #cardEntriesTable td, body.theme-industry #dealAnalyticsTable td { padding: 10px 14px; } body.theme-industry #cardEntriesTable td:nth-child(3), body.theme-industry #cardEntriesTable td:nth-child(4), body.theme-industry #cardEntriesTable td:nth-child(5), body.theme-industry #cardEntriesTable th:nth-child(3), body.theme-industry #cardEntriesTable th:nth-child(4), body.theme-industry #cardEntriesTable th:nth-child(5), body.theme-industry #dealAnalyticsTable td:nth-child(n + 5):nth-child(-n + 9), body.theme-industry #dealAnalyticsTable th:nth-child(n + 5):nth-child(-n + 9) { text-align: right; font-variant-numeric: tabular-nums; } /* ══════════════════════════════════════════════════════════════════ 6. ИМПОРТ ИЗ EXCEL (#page-excel) Пунктирная зона загрузки: рамкой служит сам поля файла. ══════════════════════════════════════════════════════════════════ */ body.theme-industry #importExcelForm { gap: var(--space-4); } body.theme-industry #importExcelForm > label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); border: 1px dashed var(--color-neutral-400); background: transparent; text-align: center; font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.12; letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-text); cursor: pointer; } body.theme-industry #importExcelForm > label:hover { border-color: var(--color-accent); } body.theme-industry #importExcelFile { width: auto; min-height: 0; padding: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-neutral-700); cursor: pointer; } body.theme-industry #importExcelFile:hover { border: 0; } body.theme-industry #importExcelFile::file-selector-button { min-height: 36px; margin-right: 10px; padding: var(--space-2) calc(var(--space-3) * 1.2); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-heading); font-size: 14px; font-weight: 600; cursor: pointer; } body.theme-industry #importExcelFile::file-selector-button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } body.theme-industry #importExcelResult { margin-top: var(--space-4); } body.theme-industry #importExcelResult.item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #importExcelResult.item:hover { border-color: var(--color-divider); background: transparent; } body.theme-industry #importExcelResult strong { margin: 0; font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); } body.theme-industry #importExcelResult p { margin: 0; font-size: 13px; color: var(--color-neutral-800); } body.theme-industry #importExcelResult pre { margin: 0; padding: var(--space-3); overflow: auto; max-height: 280px; border: 1px solid var(--color-divider); background: var(--color-surface); font-size: 12px; } body.theme-industry #page-excel .excel-format-help { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #page-excel .excel-format-help > summary { font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); cursor: pointer; } body.theme-industry #page-excel .excel-format-help ul, body.theme-industry #page-excel .excel-format-help ol { margin: var(--space-3) 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-neutral-800); font-size: 13px; } body.theme-industry #page-excel .excel-format-help p { margin: var(--space-3) 0 0; font-size: 13px; } /* ══════════════════════════════════════════════════════════════════ 7. ТАРИФ (#page-billing) ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-billing .billing-panel { display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; } body.theme-industry #billingSummary { gap: var(--space-3); } body.theme-industry #billingSummary .item { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; border: 0; border-radius: 0; background: transparent; } body.theme-industry #billingSummary .item:hover { border: 0; background: transparent; } body.theme-industry #billingSummary .item strong { margin: 0; font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); } /* Первая строка карточки — цена тарифа. */ body.theme-industry #billingSummary .item > p.muted:first-of-type { margin: 0; font-family: var(--font-heading); font-size: 28px; font-weight: 600; line-height: 1.05; color: var(--color-text); font-variant-numeric: tabular-nums; } body.theme-industry #billingSummary .item > p.muted:first-of-type ~ p.muted { margin: 0; font-size: 13px; color: var(--color-neutral-700); } body.theme-industry #page-billing .subscription-pay-btn { width: 100%; margin-top: var(--space-3); } /* ══════════════════════════════════════════════════════════════════ 8. НАСТРОЙКИ (#page-settings) ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-settings .settings-grid { align-items: start; } body.theme-industry #accountSettings { gap: var(--space-3); } body.theme-industry #page-settings .item { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; } body.theme-industry #page-settings .item:hover { border-color: var(--color-divider); background: transparent; } body.theme-industry #page-settings .item strong { margin: 0; font-weight: 500; color: var(--color-text); } body.theme-industry #page-settings .item p { margin: 0; font-size: 13px; } /* Блок «Оформление» с переключателем редизайна. */ body.theme-industry #page-settings .settings-appearance { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); } body.theme-industry #page-settings .settings-appearance-hint { margin: var(--space-3) 0 0; font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-settings .motion-badge { margin-left: 6px; } /* Связанные аккаунты и способы входа. */ body.theme-industry #page-settings .linked-accounts { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); } body.theme-industry #page-settings .linked-hint { margin: 0 0 var(--space-3); font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-settings .linked-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); } body.theme-industry #page-settings .linked-row strong { font-weight: 500; } body.theme-industry #page-settings .linked-row .muted { font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-settings .oauth-btn { display: inline-flex; width: auto; min-width: 0; min-height: 36px; padding: var(--space-2) calc(var(--space-3) * 1.2); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-heading); font-size: 14px; font-weight: 600; box-shadow: none; transform: none; } body.theme-industry #page-settings .oauth-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); box-shadow: none; transform: none; } /* Поля с паролем. */ body.theme-industry #page-settings .password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: stretch; } body.theme-industry #page-settings .password-toggle { min-height: 36px; padding: 0 12px; border: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); font-size: 13px; } body.theme-industry #page-settings .password-toggle:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); color: var(--color-text); } /* Каналы напоминаний. */ body.theme-industry #page-settings .reminder-channels { margin: 0; padding: var(--space-3) var(--space-4) var(--space-2); border: 1px solid var(--color-divider); border-radius: 0; } body.theme-industry #page-settings .reminder-channels legend { padding: 0 6px; font-family: var(--font-body); font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); } /* Последний тумблер в группе — без висящей линии. */ body.theme-industry #page-settings .reminder-channels label.checkbox-row:last-of-type { border-bottom: 0; } /* Подсказка-«вопросик» у токена бота: в этом оформлении кругов нет. */ body.theme-industry #page-settings .help-trigger { width: 26px; height: 26px; min-height: 26px; border: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-neutral-700); font-family: var(--font-heading); font-weight: 600; } body.theme-industry #page-settings .help-trigger:hover, body.theme-industry #page-settings .field-help[open] > .help-trigger { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); } body.theme-industry #page-settings .help-popover { border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-bg); box-shadow: var(--shadow-md); color: var(--color-text); } body.theme-industry #page-settings .help-popover code, body.theme-industry #page-settings .mfa-secret { border-radius: 0; background: var(--color-surface); color: var(--color-text); } body.theme-industry #page-settings .label-with-help { display: inline-flex; align-items: center; gap: 8px; } body.theme-industry #page-settings .field-hint { font-size: 12px; color: var(--color-neutral-700); } body.theme-industry #page-settings .settings-appearance .settings-subheading { margin: 0 0 var(--space-2); } /* ══════════════════════════════════════════════════════════════════ ТЕЛЕФОН: точка перелома 760px ══════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { body.theme-industry #page-merchants, body.theme-industry #page-products, body.theme-industry #page-scoring, body.theme-industry #page-investors, body.theme-industry #page-finance, body.theme-industry #page-excel, body.theme-industry #page-billing, body.theme-industry #page-settings { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } body.theme-industry #page-scoring > .grid.two, body.theme-industry #page-excel > .grid.two, body.theme-industry #page-settings > .grid.two, body.theme-industry #financePanelCash > .grid.two, body.theme-industry #financePanelMessages .grid.two, body.theme-industry #page-products > .grid.two, body.theme-industry #page-investors > .grid.two, body.theme-industry #page-merchants #merchantTeamInviteForm .grid.two, body.theme-industry #page-products .form .grid.two, body.theme-industry #page-settings .form .grid.two { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } body.theme-industry #page-finance .finance-panel { gap: var(--space-4); } /* KPI — две колонки, цифра мельче. */ body.theme-industry #investorOverviewStats, body.theme-industry #cashMetrics, body.theme-industry #cardMetrics, body.theme-industry #dealTotals { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.theme-industry #investorOverviewStats .investor-stat-card strong, body.theme-industry #cashMetrics .investor-stat-card strong, body.theme-industry #cardMetrics .investor-stat-card strong, body.theme-industry #dealTotals .investor-stat-card strong { font-size: 22px; } body.theme-industry #investorOverviewStats .investor-stat-card, body.theme-industry #cashMetrics .investor-stat-card, body.theme-industry #cardMetrics .investor-stat-card, body.theme-industry #dealTotals .investor-stat-card { padding: var(--space-3); } /* Палец: поля и кнопки не ниже 44px, вкладки — 42px. */ body.theme-industry #page-merchants input, body.theme-industry #page-merchants select, body.theme-industry #page-merchants textarea, body.theme-industry #page-products input, body.theme-industry #page-products select, body.theme-industry #page-products textarea, body.theme-industry #page-scoring input, body.theme-industry #page-scoring select, body.theme-industry #page-investors input:not([type="radio"]), body.theme-industry #page-investors select, body.theme-industry #page-finance input:not([type="checkbox"]), body.theme-industry #page-finance select, body.theme-industry #page-excel input:not([type="file"]), body.theme-industry #page-settings input:not([type="checkbox"]), body.theme-industry #page-settings select { min-height: 44px; } body.theme-industry #merchantForm > button, body.theme-industry #productForm > button, body.theme-industry #scoringForm > button, body.theme-industry #investorForm > button, body.theme-industry #cardEntryForm > button, body.theme-industry #importExcelForm > button, body.theme-industry #exportExcelBtn, body.theme-industry #billingPayBtn, body.theme-industry #cashEntryForm > button, body.theme-industry #merchantTeamInviteForm > button, body.theme-industry #cashOpeningForm > button, body.theme-industry #page-settings form > button, body.theme-industry #page-settings .item > button:not(.danger) { min-height: 44px; justify-self: stretch; } body.theme-industry #page-finance .finance-tabs .ops-tab { min-height: 42px; } body.theme-industry #page-settings .password-toggle { min-height: 44px; } /* Каталог товаров в одну колонку. */ body.theme-industry #productList.catalog { grid-template-columns: minmax(0, 1fr); } /* Форма операции по кассе разворачивается в столбик. */ body.theme-industry #cashEntryForm, body.theme-industry #cashOpeningForm { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } /* Таблицы уезжают вбок внутри своей рамки. */ body.theme-industry #cardEntriesTable.table-wrap, body.theme-industry #dealAnalyticsTable.table-wrap { overflow-x: auto; } body.theme-industry #cardEntriesTable th, body.theme-industry #dealAnalyticsTable th, body.theme-industry #cardEntriesTable td, body.theme-industry #dealAnalyticsTable td { padding: 8px 10px; } body.theme-industry #page-finance .compact-label { min-width: 0; width: 100%; } body.theme-industry #page-finance .panel-head .compact-label { flex: 1 1 100%; } body.theme-industry #page-settings .oauth-btn { width: 100%; min-height: 44px; } body.theme-industry #page-billing .billing-panel { max-width: none; } /* Зона загрузки Excel компактнее — иначе занимает весь экран. */ body.theme-industry #importExcelForm > label { padding: var(--space-6) var(--space-4); font-size: 17px; } body.theme-industry #scoringResult > p:first-of-type b { font-size: 48px; } body.theme-industry #investorList .investor-list-delete, body.theme-industry #productList .item .secondary, body.theme-industry #merchantTeamList .item .secondary { min-height: 44px; } body.theme-industry #page-investors .forecast-period-label { flex: 1 1 100%; } body.theme-industry #page-investors .forecast-period-label select { width: 100%; min-height: 42px; } body.theme-industry #merchantTeamList select[data-member-role] { width: 100%; min-height: 42px; } } /* 14-common.css — «Industry»: экран входа, общие элементы, тёмная тема. * * Подключать ПОСЛЕ industry.css: часть правил здесь намеренно совпадает по * специфичности с правилами слоя и рассчитывает выиграть порядком. * * Каждое правило начинается с `body.theme-industry` — галочка в настройках * снимается, и прежний вид возвращается целиком. * * Токены и приёмы взяты из industry.css. Новых цветов нет: всё выражено * через --color-*, --st-* и запасные плоские значения тех же токенов * (их приходится писать хексом там, где иначе нужен color-mix). * * Точка перелома одна — 760px. Старые точки слоя styles.css (1100/900/680/ * 600/480) в диапазоне 761–1100 отменяются блоком `@media (min-width: 761px)` * в конце файла. */ /* ══════════════════════════════════════════════════════════════════ A. ЭКРАН ВХОДА, РЕГИСТРАЦИИ И ПРИГЛАШЕНИЯ В переданном дизайне этого экрана нет — собран на его языке: стальной левый блок (--color-accent-900), узкие uppercase-заголовки, нулевые скругления, чертёжные уголки у карточки формы. ══════════════════════════════════════════════════════════════════ */ body.theme-industry .auth-gate { flex-direction: row; background: var(--color-bg); } /* — левый стальной блок — */ body.theme-industry .auth-marketing { background: var(--color-accent-900); color: var(--color-accent-100); border-right: 0; } /* Три декоративных цветных пятна прошлого оформления. Радиальные градиенты чужды этой системе, гасим их вместе с носителями. */ body.theme-industry .auth-marketing::before, body.theme-industry .auth-marketing::after, body.theme-industry .auth-marketing .auth-brand::after { content: none; } body.theme-industry .auth-marketing-inner { gap: var(--space-8); padding: var(--space-8); } body.theme-industry .auth-brand { gap: var(--space-3); } body.theme-industry .auth-brand-icon { width: 36px; height: 36px; border-radius: 0; background: transparent; border: 1px solid var(--color-accent-700); color: var(--color-accent-200); } body.theme-industry .auth-brand-name { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-100); } body.theme-industry .auth-pitch { margin-top: 0; } /* Заголовок шёл градиентной заливкой по тексту. Возвращаем сплошной цвет: без сброса -webkit-text-fill-color буквы остаются прозрачными. */ body.theme-industry .auth-pitch-title { font-family: var(--font-heading); font-size: 44px; font-weight: 600; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--color-accent-100); margin: 0 0 var(--space-3); } body.theme-industry .auth-pitch-sub { font-size: 14px; line-height: 1.6; color: var(--color-accent-300); max-width: 38ch; } body.theme-industry .auth-feature-list { display: flex; gap: var(--space-4); } body.theme-industry .auth-feature-list li { gap: var(--space-3); align-items: flex-start; } /* Шесть разноцветных значков заменяем одним стальным: в этой системе цветом кодируется только состояние взноса, а не украшение. Селектор с `li` — старое правило .auth-feature-list li:nth-child(N) .af-icon весит (0,3,1), простого (0,3,1) не хватило бы наверняка. */ body.theme-industry .auth-feature-list li .af-icon { width: 32px; height: 32px; border-radius: 0; background: transparent; border: 1px solid var(--color-accent-700); color: var(--color-accent-300); margin-top: 2px; } body.theme-industry .auth-feature-list strong { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--color-accent-100); margin-bottom: 1px; } body.theme-industry .auth-feature-list span { font-size: 12px; line-height: 1.45; color: var(--color-accent-400); } body.theme-industry .auth-marketing-footer { padding-top: var(--space-4); border-top: 1px solid var(--color-accent-800); gap: var(--space-2); } body.theme-industry .auth-marketing-footer p { font-size: 11px; line-height: 1.5; color: var(--color-accent-400); } /* В styles.css у этой заметки стоит !important по двум свойствам — перебить её можно только тем же !important. */ body.theme-industry .auth-terms-note { font-size: 11px !important; color: var(--color-accent-500) !important; } /* — правая колонка с формами — */ body.theme-industry .auth-forms-col { background: var(--color-bg); padding: var(--space-8); } body.theme-industry .auth-forms-card { max-width: 400px; border-radius: 0; border: 1px solid var(--color-divider); background: transparent; box-shadow: none; padding: var(--space-8); /* Уголки-засечки рисуются за пределами бокса — обрезка их съест. */ overflow: visible; } /* Чертёжная засечка: вертикальная и горизонтальная линии по 1px, как у .blueprint > .corner, но без отдельных элементов в разметке — разметку трогать нельзя, поэтому уголки собраны из двух градиентов. Так получаются только два угла из четырёх (::before и ::after). */ body.theme-industry .auth-forms-card::before, body.theme-industry .auth-forms-card::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 0; color: var(--color-neutral-500); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 1px 100%, 100% 1px; background-position: 5px 0, 0 5px; background-repeat: no-repeat; } body.theme-industry .auth-forms-card::before { top: -6px; left: -6px; right: auto; bottom: auto; height: 11px; } body.theme-industry .auth-forms-card::after { bottom: -6px; right: -6px; top: auto; left: auto; } body.theme-industry .auth-forms-header { margin-bottom: var(--space-6); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-accent); } body.theme-industry .auth-forms-header h2 { font-size: 22px; letter-spacing: 0.02em; margin: 0 0 4px; } body.theme-industry .auth-forms-header p { font-size: 12px; color: var(--color-neutral-700); } body.theme-industry .auth-forms-card .form label { font-size: 12px; } body.theme-industry .auth-forms-card .muted.small { font-size: 13px; margin-bottom: var(--space-3); } body.theme-industry .auth-links-row { margin-top: var(--space-1); gap: var(--space-2); } /* Сообщение под формой входа: цвета берём из палитры состояний взносов — другого набора «ошибка/предупреждение/успех» в системе нет. */ body.theme-industry .login-form-message { border-radius: 0; padding: var(--space-2) var(--space-3); font-size: 13px; border-left: 3px solid currentColor; } body.theme-industry .login-form-message.danger { background: var(--st-over-bg); color: var(--st-over-fg); } body.theme-industry .login-form-message.warning { background: var(--st-month-bg); color: var(--st-month-fg); } body.theme-industry .login-form-message.success { background: var(--st-paid-bg); color: var(--st-paid-fg); } /* — вход через внешние сервисы — */ body.theme-industry .oauth-providers { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); } body.theme-industry .oauth-divider { margin: 0 0 var(--space-3); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); } body.theme-industry .oauth-buttons { gap: var(--space-2); } body.theme-industry .oauth-btn { min-height: 36px; padding: var(--space-2) var(--space-4); border-radius: 0; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font-family: var(--font-heading); font-weight: 600; font-size: 14px; transition: background 0.12s ease, border-color 0.12s ease; } body.theme-industry .oauth-btn:hover { background: var(--color-neutral-200); /* запас для старых WebView */ background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); box-shadow: none; transform: none; } /* Фирменные цвета сервисов остаются только в значках (они внутри svg). */ body.theme-industry .oauth-btn.google, body.theme-industry .oauth-btn.vk { border-color: var(--color-divider); color: var(--color-text); } /* — экран подтверждения почты (#emailGate) — */ body.theme-industry .auth-grid { gap: var(--space-6); padding: var(--space-8); align-content: start; } body.theme-industry .auth-grid .hero { min-height: 0; background: var(--color-accent-100); border-color: var(--color-accent-300); } body.theme-industry .auth-grid .hero h2 { font-size: 30px; } body.theme-industry .auth-grid .hero p { font-size: 14px; color: var(--color-neutral-800); } /* ══════════════════════════════════════════════════════════════════ B. ОБЩИЕ ЭЛЕМЕНТЫ ВСЕХ ЭКРАНОВ ══════════════════════════════════════════════════════════════════ */ /* — пароль: кнопка «Показать» примыкает к полю общей рамкой — */ body.theme-industry .password-field { gap: 0; } body.theme-industry .password-toggle { min-height: 36px; height: auto; padding: 0 var(--space-3); border: 1px solid var(--color-divider); border-left: 0; border-radius: 0; background: transparent; color: var(--color-accent-700); font-family: var(--font-body); font-size: 12px; font-weight: 500; } body.theme-industry .password-toggle:hover { background: var(--color-neutral-200); /* запас для старых WebView */ background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--color-divider); border-left: 0; color: var(--color-accent-800); } body.theme-industry .field-hint { font-size: 11px; color: var(--color-neutral-700); margin-top: 3px; } /* — строка с галочкой — В styles.css есть `.form label.checkbox-row` (0,2,1) с font-weight:700, поэтому здесь два класса и два элемента: (0,2,2). */ body.theme-industry label.checkbox-row, body.theme-industry label.theme-toggle-row { display: flex; gap: var(--space-2); align-items: center; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--color-text); min-height: 28px; } body.theme-industry label.checkbox-row input[type="checkbox"], body.theme-industry label.theme-toggle-row input[type="checkbox"] { width: 16px; height: 16px; border-radius: 0; } /* — пагинация — */ body.theme-industry .pagination, body.theme-industry .contracts-pagination { gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); } body.theme-industry .pagination button, body.theme-industry .contracts-pagination button { min-width: 36px; padding: 0 var(--space-3); font-size: 14px; } body.theme-industry .pagination-info { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--color-neutral-700); } /* — значки-ярлыки — .badge и .motion-badge уже описаны в industry.css; здесь только то, чего там нет: размеры и отступ от соседнего текста. */ body.theme-industry .motion-badge { display: inline-flex; align-items: center; padding: 2px 7px; margin-left: 6px; font-weight: 600; line-height: 1.3; } /* — подсказка «?» у поля — */ body.theme-industry .label-with-help { gap: var(--space-2); } body.theme-industry .help-trigger { width: 22px; height: 22px; min-height: 22px; border-radius: 0; border: 1px solid var(--color-divider); background: transparent; color: var(--color-neutral-700); font-family: var(--font-heading); font-size: 13px; font-weight: 600; padding: 0; } body.theme-industry .help-trigger:hover, body.theme-industry .field-help[open] > .help-trigger { background: transparent; border-color: var(--color-accent); color: var(--color-accent-700); } body.theme-industry .help-popover { width: min(340px, calc(100vw - 48px)); padding: var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-bg); box-shadow: var(--shadow-lg); font-size: 13px; } body.theme-industry .help-popover strong { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); } body.theme-industry .help-popover code { padding: 1px 4px; background: var(--color-neutral-100); } /* — колокольчик и панель уведомлений — */ body.theme-industry .notification-bell:hover, body.theme-industry .notification-bell[aria-expanded="true"] { border-color: var(--color-accent); box-shadow: none; color: var(--color-accent-900); } body.theme-industry .notification-panel { border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-bg); box-shadow: var(--shadow-lg); padding: var(--space-4); } body.theme-industry .notification-panel-head { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); } body.theme-industry .notification-panel-head strong { font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; } body.theme-industry .notification-count { min-width: 20px; height: 20px; border-radius: 0; background: var(--st-month-bg); color: var(--st-month-fg); font-family: var(--font-body); font-size: 11px; font-weight: 600; } body.theme-industry .notification-panel .muted { font-size: 13px; } body.theme-industry .notification-meta { margin-top: var(--space-2); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-700); } /* — кнопка «Сообщить о проблеме» и её окно — */ body.theme-industry .support-report-fab { gap: var(--space-2); padding: 0 var(--space-4); min-height: 40px; border-radius: 0; border: 1px solid var(--color-accent-800); background: var(--color-accent-900); color: var(--color-accent-100); font-family: var(--font-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: var(--shadow-md); } body.theme-industry .support-report-fab:hover { background: var(--color-accent-800); border-color: var(--color-accent-800); color: var(--color-accent-100); filter: none; transform: none; } body.theme-industry .support-report-preview-media { border-radius: 0; border: 1px solid var(--color-divider); background: var(--color-neutral-100); } body.theme-industry .support-report-status { border-radius: 0; padding: var(--space-2) var(--space-3); font-size: 13px; border-left: 3px solid currentColor; } body.theme-industry .support-report-status.danger { background: var(--st-over-bg); color: var(--st-over-fg); } body.theme-industry .support-report-status.success { background: var(--st-paid-bg); color: var(--st-paid-fg); } body.theme-industry .support-report-status.neutral { background: var(--color-accent-100); color: var(--color-accent-800); } body.theme-industry .required-mark { color: var(--color-debt); } /* — полоса загрузки страницы — */ body.theme-industry .page-progress { height: 2px; background: var(--color-neutral-200); } body.theme-industry .page-progress-bar { background: var(--color-accent); } /* — плавающий индикатор загрузки — */ body.theme-industry .global-loader { gap: var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-bg); box-shadow: var(--shadow-md); } /* Кольцо спиннера квадратное: правило «скругления везде 0» распространяется и сюда, вращающийся квадратный контур читается как технический индикатор. Если это покажется чересчур — достаточно вернуть border-radius: 50%. */ body.theme-industry .loader-spinner { width: 18px; height: 18px; border: 2px solid var(--color-neutral-300); border-top-color: var(--color-accent); border-radius: 0; } body.theme-industry .loader-text { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--color-text); } body.theme-industry .loader-count { font-size: 11px; font-weight: 600; color: var(--color-neutral-700); } /* — кнопка в состоянии отправки — */ body.theme-industry button.is-loading::after, body.theme-industry .btn-loading::after { border-radius: 0; border-color: var(--color-accent-300); border-top-color: var(--color-bg); } body.theme-industry button.secondary.is-loading::after, body.theme-industry button.secondary.btn-loading::after { border-color: var(--color-neutral-300); border-top-color: var(--color-accent); } /* — поля с файлами — */ body.theme-industry input[type="file"] { padding: 4px 6px; background: var(--color-surface); } body.theme-industry input[type="file"]::file-selector-button { min-height: 28px; margin-right: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--color-divider); border-radius: 0; background: transparent; color: var(--color-text); font-family: var(--font-heading); font-size: 13px; font-weight: 600; cursor: pointer; } body.theme-industry .file-source-row { gap: var(--space-2); margin-top: var(--space-2); } body.theme-industry .file-source-row .file-source-btn { font-weight: 600; } body.theme-industry .file-name { font-size: 12px; color: var(--color-neutral-700); } /* — каталог плиток (товары) — Сетка из спецификации: repeat(auto-fill, minmax(220px, 1fr)). */ body.theme-industry .catalog { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); } body.theme-industry .list { gap: var(--space-2); } body.theme-industry .item-row { gap: var(--space-2) var(--space-3); } body.theme-industry .panel-head-actions { gap: var(--space-2); } /* — таблицы внутри панелей — Канон из спецификации: шапка тёмной сталью, подписи 11px/600/uppercase. */ body.theme-industry .panel table, body.theme-industry .table-wrap table { border-collapse: collapse; } body.theme-industry .panel thead th, body.theme-industry .table-wrap thead th { background: var(--color-accent-900); color: var(--color-accent-100); border-bottom: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-2) var(--space-3); } body.theme-industry .table-wrap { border: 1px solid var(--color-divider); } /* Панель уже даёт рамку — вторая рамка вокруг таблицы её удвоит. */ body.theme-industry .panel > .table-wrap { border: 0; } /* — полосы прокрутки — */ body.theme-industry * { scrollbar-width: thin; scrollbar-color: var(--color-neutral-400) transparent; } body.theme-industry ::-webkit-scrollbar { width: 10px; height: 10px; } body.theme-industry ::-webkit-scrollbar-track { background: transparent; } body.theme-industry ::-webkit-scrollbar-thumb { border-radius: 0; background: var(--color-neutral-400); border: 2px solid transparent; background-clip: padding-box; } body.theme-industry ::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-600); background-clip: padding-box; } body.theme-industry ::-webkit-scrollbar-corner { background: transparent; } /* Меню в тёмном сайдбаре: там нужен светлый ползунок. */ body.theme-industry .sidebar *, body.theme-industry .nav { scrollbar-color: var(--color-accent-700) transparent; } body.theme-industry .sidebar ::-webkit-scrollbar-thumb { background: var(--color-accent-700); background-clip: padding-box; } /* ══════════════════════════════════════════════════════════════════ C. ТЕЛЕФОН — единственная точка перелома ══════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { /* — вход — */ body.theme-industry .auth-gate { flex-direction: column; } body.theme-industry .auth-marketing { flex: none; position: static; height: auto; overflow: visible; } body.theme-industry .auth-marketing-inner { gap: var(--space-4); padding: var(--space-6) var(--space-4); } body.theme-industry .auth-pitch-title { font-size: 28px; } body.theme-industry .auth-pitch-sub { font-size: 13px; } /* Список возможностей и подвал на телефоне отодвигают форму за экран. */ body.theme-industry .auth-feature-list, body.theme-industry .auth-marketing-footer { display: none; } body.theme-industry .auth-forms-col { min-height: auto; padding: var(--space-6) var(--space-4) var(--space-8); } body.theme-industry .auth-forms-card { max-width: 100%; padding: var(--space-6) var(--space-4); } /* Уголки выходят за бокс на 6px — при padding 13.6px они упёрлись бы в край экрана, поэтому прижимаем их к самой рамке. */ body.theme-industry .auth-forms-card::before { top: -1px; left: -1px; } body.theme-industry .auth-forms-card::after { bottom: -1px; right: -1px; } body.theme-industry .auth-grid { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); } body.theme-industry .auth-links-row { flex-direction: column; align-items: stretch; } /* — общее — */ body.theme-industry .password-toggle { min-height: 44px; } body.theme-industry .pagination button, body.theme-industry .contracts-pagination button { min-height: 44px; flex: 1 1 auto; } body.theme-industry .pagination-info, body.theme-industry #contractsPageInfo { order: -1; width: 100%; text-align: center; } body.theme-industry .pagination, body.theme-industry .contracts-pagination { flex-wrap: wrap; } body.theme-industry .help-trigger { width: 32px; height: 32px; min-height: 32px; } body.theme-industry .help-popover { position: fixed; left: var(--space-4); right: var(--space-4); top: auto; bottom: calc(58px + var(--space-4) + env(safe-area-inset-bottom, 0px)); width: auto; } /* Панель уведомлений — шторка снизу, над таб-баром. */ body.theme-industry .notification-panel { position: fixed; top: auto; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: none; z-index: 100002; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: var(--space-4); box-shadow: var(--shadow-lg); } /* Ярлык у кнопки проблемы прятался только с 640px — переносим на 760px, чтобы перелом во всём оформлении был один. */ body.theme-industry .support-report-fab-label { display: none; } body.theme-industry .support-report-fab { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 0; } /* Модалки на телефоне — шторки снизу (спецификация 0.15). */ body.theme-industry .modal { padding: 0; align-items: end; } body.theme-industry .modal-card { width: 100%; max-height: 92dvh; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); } body.theme-industry .catalog { grid-template-columns: minmax(0, 1fr); } /* На узком экране вторичная кнопка в строке занимает всю ширину — раньше это случалось только с 600px. */ body.theme-industry .item-row .secondary { width: 100%; margin-left: 0; } body.theme-industry .panel-head-actions { width: 100%; flex-wrap: wrap; } body.theme-industry .panel-head-actions button { flex: 1 1 140px; } body.theme-industry .oauth-btn { min-height: 44px; } body.theme-industry .global-loader { right: var(--space-4); bottom: calc(58px + var(--space-3) + env(safe-area-inset-bottom, 0px)); } } /* ══════════════════════════════════════════════════════════════════ D. ДЕСКТОП ≥761px — отмена чужих точек перелома У прежнего слоя экран входа складывается в колонку уже на 1100px, а панель уведомлений становится нижней шторкой на 900px. В диапазоне 761–1100 это противоречит единственной точке этого оформления. ══════════════════════════════════════════════════════════════════ */ @media (min-width: 761px) { body.theme-industry .auth-gate { flex-direction: row; } body.theme-industry .auth-marketing { flex: 0 0 42%; position: sticky; top: 0; height: 100vh; } body.theme-industry .auth-marketing-inner { gap: var(--space-8); padding: var(--space-8); } body.theme-industry .auth-feature-list { display: flex; } body.theme-industry .auth-marketing-footer { display: flex; } body.theme-industry .auth-pitch-title { font-size: 44px; } body.theme-industry .auth-forms-col { min-height: 100vh; padding: var(--space-8); } body.theme-industry .auth-forms-card { max-width: 400px; padding: var(--space-8); } body.theme-industry .notification-panel { position: absolute; top: calc(100% + 8px); right: 0; left: auto; bottom: auto; width: min(320px, calc(100vw - 32px)); max-width: none; z-index: 30; padding-bottom: var(--space-4); border-left: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); } } /* ══════════════════════════════════════════════════════════════════ E. ТЁМНАЯ ТЕМА В приложении темой управляет :root[data-theme="dark"]. Здесь тёмный набор тех же токенов — акцентная шкала --color-accent-* и палитра состояний взносов --st-* НЕ меняются: на них держится смысл цвета. Специфичность :root[data-theme="dark"] body.theme-industry — (0,2,2), этого хватает против (0,1,1) у токенов industry.css. ══════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] body.theme-industry { /* Плоские значения без color-mix: значение пользовательского свойства с неизвестной функцией становится недействительным в момент использования, и запасной строкой это не лечится. */ --color-bg: #16181a; --color-surface: #1e2124; --color-text: #e6e8ea; --color-divider: #3c4043; /* Шкала нейтральных разворачивается: 100 — самая тёмная поверхность наведения, 700–800 — светлый текст подписей. --color-neutral-900 намеренно оставлен тёмным: на нём построены подложки модалок и шторок (color-mix … 45%), светлый дал бы белую пелену поверх экрана. */ --color-neutral-100: #232629; --color-neutral-200: #2c3033; --color-neutral-300: #3a3e42; --color-neutral-400: #565b61; --color-neutral-500: #8b9197; --color-neutral-600: #a3a9af; --color-neutral-700: #b2b8be; --color-neutral-800: #ccd1d6; /* Смысловые цвета сумм — светлее, иначе тонут в тёмном фоне. */ --color-growth: #6cbb73; --color-debt: #ef9188; --color-debt-line: #a8534b; --warning: #d8ae4a; /* Тени на тёмном должны быть чернее, иначе их не видно. */ --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.62); /* Системные элементы — селекты, календари, полосы прокрутки. */ color-scheme: dark; background: var(--color-bg); color: var(--color-text); } /* — поверхности, которые в светлой теме держались на accent-100 — */ :root[data-theme="dark"] body.theme-industry .topbar, :root[data-theme="dark"] body.theme-industry .ind-drawer-head { background: var(--color-accent-900); border-bottom-color: var(--color-accent-800); } :root[data-theme="dark"] body.theme-industry .auth-grid .hero { background: var(--color-surface); border-color: var(--color-divider); } :root[data-theme="dark"] body.theme-industry .auth-grid .hero p { color: var(--color-neutral-800); } /* — тексты, набранные тёмным концом акцентной шкалы — */ :root[data-theme="dark"] body.theme-industry a, :root[data-theme="dark"] body.theme-industry button.link, :root[data-theme="dark"] body.theme-industry .eyebrow, :root[data-theme="dark"] body.theme-industry .ind-kicker, :root[data-theme="dark"] body.theme-industry .notification-meta, :root[data-theme="dark"] body.theme-industry .password-toggle, :root[data-theme="dark"] body.theme-industry .item strong, :root[data-theme="dark"] body.theme-industry .ind-card-name, :root[data-theme="dark"] body.theme-industry .help-trigger:hover, :root[data-theme="dark"] body.theme-industry .field-help[open] > .help-trigger { color: var(--color-accent-300); } :root[data-theme="dark"] body.theme-industry a:hover, :root[data-theme="dark"] body.theme-industry button.link:hover, :root[data-theme="dark"] body.theme-industry .password-toggle:hover { color: var(--color-accent-200); } :root[data-theme="dark"] body.theme-industry .topbar-icon-btn { color: var(--color-accent-200); } :root[data-theme="dark"] body.theme-industry .topbar-icon-btn:hover { background: #2a3a4b; /* запас для старых WebView */ background: color-mix(in srgb, var(--color-accent-100) 12%, transparent); color: var(--color-accent-100); } :root[data-theme="dark"] body.theme-industry .account-info { border-left-color: var(--color-accent-800); color: var(--color-accent-100); } /* Чипы на акцентной шкале переворачиваются на её тёмный конец. */ :root[data-theme="dark"] body.theme-industry .pill.info, :root[data-theme="dark"] body.theme-industry .pill.purple, :root[data-theme="dark"] body.theme-industry .badge, :root[data-theme="dark"] body.theme-industry .motion-badge, :root[data-theme="dark"] body.theme-industry .support-report-status.neutral { background: var(--color-accent-800); color: var(--color-accent-100); } /* Белая заливка «предстоящего» взноса — единственная из --st-*, которая в тегах статуса вне сетки смотрится дырой; в сетке она остаётся белой. */ :root[data-theme="dark"] body.theme-industry .ind-status-tag, :root[data-theme="dark"] body.theme-industry .ind-pay-tag { border: 1px solid var(--color-divider); } /* Первичная кнопка: ink на акценте в светлой теме — это --color-bg, в тёмной он стал почти чёрным. Возвращаем светлую надпись точечно, не задевая secondary/link/danger и собственные кнопки сетки. */ :root[data-theme="dark"] body.theme-industry button:not(.secondary):not(.link):not(.danger):not(.password-toggle), :root[data-theme="dark"] body.theme-industry .ind-seg > button.active, :root[data-theme="dark"] body.theme-industry .ind-sheet-tile.active, :root[data-theme="dark"] body.theme-industry .ind-pay-methods button.active { color: var(--color-accent-100); } /* Опасная кнопка на тёмном: рамка и надпись светлеют вместе с токенами. */ :root[data-theme="dark"] body.theme-industry button.danger:hover { background: #3a2320; /* запас для старых WebView */ background: color-mix(in srgb, var(--color-debt) 18%, transparent); } /* Сообщения статуса набраны тёмным ink по светлой плашке --st-*: в тёмной теме плашка остаётся светлой, ink тоже — трогать не нужно. */ /* — поля и таблицы — */ :root[data-theme="dark"] body.theme-industry input, :root[data-theme="dark"] body.theme-industry select, :root[data-theme="dark"] body.theme-industry textarea { background: var(--color-surface); border-color: var(--color-divider); color: var(--color-text); } :root[data-theme="dark"] body.theme-industry input::placeholder, :root[data-theme="dark"] body.theme-industry textarea::placeholder { color: var(--color-neutral-600); } :root[data-theme="dark"] body.theme-industry .help-trigger, :root[data-theme="dark"] body.theme-industry .help-popover, :root[data-theme="dark"] body.theme-industry .notification-panel, :root[data-theme="dark"] body.theme-industry .global-loader, :root[data-theme="dark"] body.theme-industry .modal-card { background: var(--color-bg); border-color: var(--color-divider); } :root[data-theme="dark"] body.theme-industry .help-popover { box-shadow: var(--shadow-lg); } /* — ОСТРОВОК СВЕТА: сетка платежей — Цвета клеток несут смысл, поэтому вся прокрутка сетки остаётся светлой в обеих темах. Токены переопределены на самом контейнере: каждый потомок — шапка, липкие колонки, клетки, прогресс — пересчитает var() сам, без отдельного правила на каждый класс. Липкие колонки при этом сохраняют непрозрачный фон var(--color-bg). */ :root[data-theme="dark"] body.theme-industry .ind-grid-scroll { --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-divider: #cdcdcf; --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d; --color-neutral-700: #5d5d60; --color-neutral-800: #424244; background: var(--color-bg); color: var(--color-text); border-color: #3c4043; color-scheme: light; } /* Квадратики взносов в мобильных карточках живут вне прокрутки. Заливка у них своя из --st-*, но рамка считается от --color-text — вернём ей тёмное перо, иначе светлая рамка растворится в светлом квадрате. */ :root[data-theme="dark"] body.theme-industry .ind-sq, :root[data-theme="dark"] body.theme-industry .ind-legend-item i { --color-text: #1d1f20; } /* Плитки итогов подмешивают цвет состояния к фону страницы, а перо --sum-ink приходит тёмным из app.js. Держим основу светлой, иначе надписи на плитках пропадают. */ :root[data-theme="dark"] body.theme-industry .ind-sum { --color-bg: #f2f2f3; } :root[data-theme="dark"] body.theme-industry .ind-grid-summary { border-color: var(--color-divider); } /* ══════════════════════════════════════════════════════════════════ ХВОСТЫ ПРЕЖНЕГО ОФОРМЛЕНИЯ Найдены обходом всех страниц: остатки скруглений и тёмных плашек там, куда не дотянулись постраничные блоки выше. ══════════════════════════════════════════════════════════════════ */ /* Виджеты конструктора живут не только на дашборде — те же .db-* рисуются на странице инвесторов, а правила выше привязаны к #page-dashboard. */ body.theme-industry .db-widget, body.theme-industry .db-widget-slot, body.theme-industry .db-wcard, body.theme-industry .db-chart, body.theme-industry .db-kpi { border-radius: 0; } body.theme-industry .db-info { border-radius: 0; background: var(--color-neutral-100); color: var(--color-neutral-800); border: 1px solid var(--color-divider); } body.theme-industry .investor-stat-card, body.theme-industry .excel-format-help, body.theme-industry .client-scope-hint, body.theme-industry .reminder-channels, body.theme-industry .help-popover, body.theme-industry .passport-box, body.theme-industry .create-account-options { border-radius: 0; } body.theme-industry .help-trigger { border-radius: 0; background: var(--color-neutral-100); color: var(--color-neutral-800); border: 1px solid var(--color-divider); } body.theme-industry .help-popover { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); } /* Ползунки (например период прогноза у инвесторов) — квадратные и стальные. */ body.theme-industry input[type="range"] { border-radius: 0; background: transparent; border: 0; accent-color: var(--color-accent); } /* ══════════════════════════════════════════════════════════════════ МАСТЕР ДОГОВОРА: липкая панель «Расчёт» Колонку собирает industry.js — в разметке расчёт лежит внутри шага 4. ══════════════════════════════════════════════════════════════════ */ body.theme-industry .ind-calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; } body.theme-industry .ind-calc-inner { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-divider); background: var(--color-bg); } body.theme-industry .ind-calc .terms-preview { margin: 0; border: 0; padding: 0; background: transparent; } @media (max-width: 1000px) { body.theme-industry .ind-calc-layout { grid-template-columns: minmax(0, 1fr); } body.theme-industry .ind-calc-inner { position: static; } } /* Счётчик во вкладке напоминаний — часть подписи, а не отдельная плашка. */ body.theme-industry .ops-tab-count { font-variant-numeric: tabular-nums; opacity: 0.75; } /* Приход и расход в журнале кассы: знак и цвет, иначе строки не отличить. */ body.theme-industry .cash-amount { font-family: var(--font-heading); font-weight: 600; font-variant-numeric: tabular-nums; } body.theme-industry .cash-in { color: var(--color-growth); } body.theme-industry .cash-out { color: var(--color-debt); } /* ══════════════════════════════════════════════════════════════════ ТАРИФ ══════════════════════════════════════════════════════════════════ */ body.theme-industry .billing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; } body.theme-industry .billing-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); } body.theme-industry .billing-price { font-family: var(--font-heading); font-weight: 600; font-size: 56px; line-height: 1; } body.theme-industry .billing-price span { font-size: 20px; color: var(--color-neutral-700); } body.theme-industry .billing-benefits { margin: 0; padding-left: 18px; color: var(--color-neutral-800); display: flex; flex-direction: column; gap: 4px; } body.theme-industry .billing-state { display: flex; flex-direction: column; gap: var(--space-2); } body.theme-industry #billingPayBtn { margin-top: var(--space-4); } @media (max-width: 760px) { body.theme-industry .billing-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } body.theme-industry .billing-price { font-size: 44px; } } /* Карточка тарифа с полосой пробного периода идёт в две колонки во всю ширину контента — узкая панель их сплющивала. */ body.theme-industry #page-billing .billing-panel { max-width: none; } /* ══════════════════════════════════════════════════════════════════ ТОЧЕЧНЫЕ ПЕРЕБОИ Правила из styles.css, которые сильнее базовых правил слоя по специфичности. Их всего десяток — проще перебить поимённо, чем поднимать вес всему слою. ══════════════════════════════════════════════════════════════════ */ /* :root[data-theme="dark"] select — (0,2,1) — красил поля в #121a26 мимо палитры слоя. */ :root[data-theme="dark"] body.theme-industry input, :root[data-theme="dark"] body.theme-industry select, :root[data-theme="dark"] body.theme-industry textarea { background: var(--color-surface); border-color: var(--color-divider); color: var(--color-text); } /* Синий ореол на кнопке при наведении — (0,4,1) из-за цепочки :not(). */ body.theme-industry button:not(.secondary):not(.link):not(.danger):not(.password-toggle):hover { box-shadow: none; } /* Поля в строке инвестора и кнопки в старом окне оплаты — (0,2,1). */ body.theme-industry .investor-row .item-row input { border-radius: 0; background: var(--color-surface); } body.theme-industry .pay-modal .pay-modal-actions button { border-radius: 0; } /* Заголовки панелей списков — (0,2,1). */ body.theme-industry .payments-list-panel .panel-head h2, body.theme-industry .contracts-list-panel .panel-head h2, body.theme-industry .contract-review-summary .review-block h4 { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.01em; } body.theme-industry .auth-forms-card .form label { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: color-mix(in srgb, var(--color-text) 70%, transparent); } body.theme-industry #dealAnalyticsTable table { font-size: 14px; } /* Палец: правила слоя, которые задают свои 36px, на телефоне обязаны подняться до 44px — общее правило для button их не догоняет по специфичности. */ @media (max-width: 760px) { body.theme-industry .ind-pay-methods button, body.theme-industry .ind-row-pay, body.theme-industry .ind-btn-sec, body.theme-industry .ind-trial-btn, body.theme-industry .ind-drawer-foot button, body.theme-industry .ind-page-actions button { min-height: 44px; } } /* Кнопка приёма платежа в строке напоминания. Строка раскладывается через order, и кнопка без него уезжала в самое начало — перед именем клиента. */ body.theme-industry #page-notifications #notificationList .ops-item > .ops-pay, body.theme-industry #page-dashboard .ops-item > .ops-pay { order: 4; margin: 0; white-space: nowrap; } /* Поиск по клиентам. */ body.theme-industry #page-clients .clients-search { max-width: 420px; margin-bottom: var(--space-3); } /* ══════════════════════════════════════════════════════════════════ ПОИСК В ВЕРХНЕЙ ПОЛОСЕ Выглядит как поле, но открывает уже существующую палитру ⌘K. ══════════════════════════════════════════════════════════════════ */ body.theme-industry .ind-topsearch { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 460px; min-height: 36px; margin-left: var(--space-4); padding: 0 10px; border: 1px solid var(--color-accent-300); border-radius: 0; background: var(--color-bg); color: var(--color-accent-700); font-family: var(--font-body); font-size: 14px; font-weight: 400; text-align: left; } body.theme-industry .ind-topsearch:hover { background: var(--color-bg); border-color: var(--color-accent-500); color: var(--color-accent-800); } body.theme-industry .ind-topsearch-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.theme-industry .ind-topsearch-key { font-size: 11px; border: 1px solid var(--color-divider); padding: 1px 5px; color: var(--color-neutral-700); } body.theme-industry .topbar-leading { flex: 1; min-width: 0; gap: var(--space-3); } /* Палитра команд — в языке слоя. */ body.theme-industry .command-palette-card { border-radius: 0; border: 1px solid var(--color-divider); background: var(--color-bg); box-shadow: var(--shadow-lg); } body.theme-industry .command-palette-results li { border-radius: 0; } @media (max-width: 760px) { /* На телефоне поле не влезает: в макете там отдельная иконка поиска. */ body.theme-industry .ind-topsearch { flex: none; max-width: 44px; width: 44px; min-height: 44px; margin-left: 0; justify-content: center; border-color: transparent; background: transparent; } body.theme-industry .ind-topsearch-label, body.theme-industry .ind-topsearch-key { display: none; } } /* ══════════════════════════════════════════════════════════════════ ЧАСТИЧНО ОПЛАЧЕННЫЙ ВЗНОС Клетка закрашивается зелёным ровно на долю внесённого, остаток остаётся цветом срока. Отдельного цвета нет намеренно: так видно и что заплатили, и сколько ещё должны. ══════════════════════════════════════════════════════════════════ */ body.theme-industry .ind-cell.is-partial, body.theme-industry .ind-sq.is-partial { background-image: linear-gradient( to right, var(--st-paid-bg) 0, var(--st-paid-bg) var(--paid, 0%), transparent var(--paid, 0%) ); } body.theme-industry .ind-legend-partial { width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); background-color: var(--st-over-bg); background-image: linear-gradient( to right, var(--st-paid-bg) 0, var(--st-paid-bg) var(--paid, 0%), transparent var(--paid, 0%) ); } /* ══════════════════════════════════════════════════════════════════ КАПИТАЛ И РАСПРЕДЕЛЕНИЕ ПРИБЫЛИ ══════════════════════════════════════════════════════════════════ */ body.theme-industry #page-investors .capital-panel .item-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 4px 0; } body.theme-industry #page-investors .capital-actions { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); } body.theme-industry #page-investors .capital-spacer { flex: 1; } body.theme-industry #page-investors .capital-own-label, body.theme-industry #page-investors .capital-month-label { max-width: 240px; } body.theme-industry #page-investors .capital-note { font-size: 11px; } body.theme-industry #page-investors .capital-own-label.hidden, body.theme-industry #page-investors #capitalOwnSave.hidden { display: none; } /* Палитра поиска (⌘K). Строки списка — это кнопки, и базовое правило кнопок слоя красило их сплошным акцентом: весь список получался синим и читался плохо. Специфичность у обоих правил равная, а industry.css идёт позже — поэтому перебиваем здесь явно. */ body.theme-industry .command-palette-results li button { background: transparent; border: 0; border-radius: 0; color: var(--color-text); font-family: var(--font-body); font-weight: 400; text-align: left; padding: 8px 10px; min-height: 0; } body.theme-industry .command-palette-results li button:hover, body.theme-industry .command-palette-results li button.focused { background: var(--color-accent-100); border: 0; color: var(--color-accent-900); } /* Подпись рядом с названием раздела — приглушённая, чтобы не спорить с ним. */ body.theme-industry .command-palette-results li button span, body.theme-industry .command-palette-results li button small { color: var(--color-neutral-700); font-weight: 400; } body.theme-industry .command-palette-card input { border-radius: 0; } body.theme-industry .command-palette-hint { color: var(--color-neutral-700); font-size: 12px; } /* Полная карточка договора окном. Крестик стоит в правом верхнем углу карточки, поэтому сверху нужен запас: оформление Industry задаёт свой padding у .modal-card, и он перебивает базовое правило. Скруглений в этом оформлении нет — крестик квадратный, как и всё остальное. */ body.theme-industry .contract-full-card { padding-top: 0; } body.theme-industry .contract-full-bar { background: var(--color-bg); } body.theme-industry .contract-full-close { border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-surface); color: var(--color-neutral-700); } body.theme-industry .contract-full-close:hover { background: var(--color-accent-100); border-color: var(--color-accent-800); color: var(--color-accent-900); } /* Внутри окна у панели своей рамки быть не должно: рамка окна уже есть, иначе получается рама в раме. На странице рамка остаётся. */ body.theme-industry #contractFullSlot > #contractSidePanel { border: 0; } @media (max-width: 760px) { /* Пока открыта карточка, таб-бара нет. Он лежит выше окна (z-index 55 против 45) и оставался нажимаемым: страница под окном переключалась, а окно продолжало висеть поверх чужой страницы. Заодно снимается вопрос с запасом снизу. */ body.theme-industry.contract-full-open .ind-tabbar { display: none; } body.theme-industry .contract-full-card { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); } } /* Плашка «связаться»: скруглений в этом оформлении нет, текст сообщения — моноширинным, как всё техническое. */ body.theme-industry .contact-sheet-text { border: 1px solid var(--color-divider); border-radius: 0; background: var(--color-surface); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; } body.theme-industry .contact-sheet-phones .is-active { border-color: var(--color-accent-800); background: var(--color-accent-100); color: var(--color-accent-900); } /* Поручитель в выезжающей карточке — кнопка, а не просто текст: по ней открывается плашка с его телефоном. */ body.theme-industry .ind-fact-link { padding: 0; border: 0; background: none; color: var(--color-accent-800); font: inherit; text-align: right; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 0; } body.theme-industry .ind-fact-link:hover { color: var(--color-accent-900); } /* Ссылки-действия в плашке «связаться» — под кнопки этого оформления: прямые углы, заголовочный шрифт, та же высота. */ body.theme-industry .contact-sheet-actions a { min-height: 36px; padding: var(--space-2) calc(var(--space-3) * 1.2); border: 1px solid var(--color-accent); border-radius: 0; font-family: var(--font-heading); font-size: 14px; line-height: 1.2; } body.theme-industry .contact-sheet-actions a[data-contact-whatsapp] { background: var(--color-accent); color: var(--color-bg); } body.theme-industry .contact-sheet-actions a:not([data-contact-whatsapp]) { background: transparent; border-color: var(--color-divider); color: var(--color-text); } @media (pointer: coarse) { /* Перебиваем свой же font-size: 14px из правила для полей ввода. Почему 16px — в комментарии к такому же блоку в styles.css: Safari на iOS приближает экран при фокусе в поле мельче 16px и обратно не отдаляет. Правило в styles.css той же специфичности, а этот файл грузится позже — без этого блока выигрывали бы 14px. */ body.theme-industry input, body.theme-industry select, body.theme-industry textarea { font-size: 16px; } /* Поиск в сетке платежей — то самое поле, из-за которого экран и уезжал: ему размер задан правилом посильнее (industry.css:1252). */ body.theme-industry .ind-search input, body.theme-industry input[type="file"] { font-size: 16px; } }