/* АП74 Отчёты — веб-версия. Плоское оформление, без анимаций и теней. Две темы: тёмная (по умолчанию, цвета как Theme.Colors в iOS-приложении) и светлая. Тему выставляет атрибут data-theme на (скрипт в и js/theme.js). Любой цвет — только через токены ниже: так обе темы остаются согласованными. Читаемость проверяет tools/contrast_check.py (текст ≥ 4.5:1 в обеих темах). */ :root { color-scheme: dark; --bg: #070B14; --bg-top: #0B1220; --surface: #111A2E; --surface-raised: #16213A; --surface-high: #1E2C4B; --stroke: rgba(255, 255, 255, 0.08); --stroke-strong: rgba(255, 255, 255, 0.14); --text: #E8EDF7; --text-2: #97A3B8; --text-3: #7E8AA0; /* Цвета тонов годятся для текста. Для заливок под белым текстом — *-fill. */ --accent: #5B9DFF; --accent-fill: #2A72E5; --accent2: #22D3EE; --good: #22C55E; --warn: #F59E0B; --bad: #F87171; --bad-fill: #DC2626; --info: #60A5FA; --violet: #A78BFA; --orange: #F97316; --pink: #F472B6; --lime: #84CC16; /* Дорожки полос и колец, нейтральные подложки, журнал, затемнение под окном. */ --track: rgba(255, 255, 255, 0.07); --log-bg: rgba(0, 0, 0, 0.35); --scrim: rgba(0, 0, 0, 0.6); --r-card: 12px; --r-md: 10px; --r-sm: 8px; --pad: 14px; --gap: 10px; --tabbar-h: 62px; --topbar-h: 48px; --maxw: 900px; } :root[data-theme="light"] { color-scheme: light; --bg: #F3F5F9; --bg-top: #FFFFFF; --surface: #FFFFFF; --surface-raised: #F1F4F9; --surface-high: #E6EBF3; --stroke: rgba(15, 23, 42, 0.10); --stroke-strong: rgba(15, 23, 42, 0.18); --text: #0F172A; --text-2: #475569; --text-3: #5B6778; --accent: #1D5FD6; --accent-fill: #1D5FD6; --accent2: #0E6F8A; --good: #15793A; --warn: #A64B07; --bad: #C62828; --bad-fill: #C62828; --info: #0369A1; --violet: #7C3AED; --orange: #B33C0B; --pink: #BE185D; --lime: #4A7A0E; --track: rgba(15, 23, 42, 0.07); --log-bg: #F1F4F9; --scrim: rgba(15, 23, 42, 0.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; } body { min-height: 100svh; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Строки и карточки-ссылки ведут себя как элементы интерфейса, а не как текстовые ссылки. */ a.row, a.tile, a.btn, a.chip { text-decoration: none; } a.row:hover, a.tile:hover, a.btn:hover, a.chip:hover { text-decoration: none; } a.row:hover { background: var(--surface-raised); } [hidden] { display: none !important; } /* ── Заставка ────────────────────────────────────────────── */ .boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bg); z-index: 50; } .boot__mark { font-size: 26px; font-weight: 800; letter-spacing: 1px; color: var(--accent); } .boot__text { color: var(--text-3); font-size: 13px; } /* ── Каркас ──────────────────────────────────────────────── */ .app { min-height: 100svh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: var(--topbar-h); padding: 0 12px; padding-top: env(safe-area-inset-top); background: var(--bg-top); border-bottom: 1px solid var(--stroke); } .topbar__back { background: none; border: 0; color: var(--accent); font-size: 26px; line-height: 1; padding: 0 6px 4px; margin-left: -6px; } .topbar__title { font-size: 16px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__actions { display: flex; align-items: center; gap: 4px; } .topbar__actions button { background: var(--surface); border: 1px solid var(--stroke); color: var(--text); border-radius: var(--r-sm); padding: 6px 10px; font-size: 13px; white-space: nowrap; } .topbar__actions button:disabled { opacity: .45; cursor: default; } .topbar__actions button.is-accent { color: var(--accent); } .topbar__actions button.is-icon { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; color: var(--text-2); } .topbar__actions button.is-icon svg { display: block; width: 18px; height: 18px; } .screen { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 12px 12px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); outline: none; } /* Панель вкладок: каждая вкладка — отдельная кнопка с рамкой, выбранная выделена цветом. */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 6px; background: var(--bg-top); border-top: 1px solid var(--stroke-strong); padding: 6px 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); } .tabbar button { flex: 1 1 0; min-width: 0; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-sm); color: var(--text-2); padding: 6px 2px; font-size: 11px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; justify-content: center; position: relative; } .tabbar__brand { display: none; } /* Счётчик этапа («Новые», «Активные») — нейтральный, в отличие от красного бейджа новых отчётов. */ .tabbar .badge-dot.is-count { background: var(--surface-high); color: var(--text); border-color: var(--stroke-strong); } .tabbar__extra { display: none; } .tabbar button .ic { display: block; width: 20px; height: 20px; } .tabbar button .ic svg { display: block; width: 20px; height: 20px; } .tabbar button .tx { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar button:hover { background: var(--surface-raised); border-color: var(--stroke-strong); color: var(--text); } .tabbar button.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); } .tabbar .badge-dot { position: absolute; top: -6px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--bad-fill); color: #fff; border: 1px solid var(--bg-top); font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; } /* ── Экран входа ─────────────────────────────────────────── */ .auth { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .auth__box { width: 100%; max-width: 380px; } .auth__logo { text-align: center; margin-bottom: 18px; } .auth__logo b { display: block; font-size: 24px; font-weight: 800; color: var(--text); } .auth__logo span { display: block; font-size: 13px; color: var(--text-2); margin-top: 4px; } /* Выбор раздела до входа: две одинаковые крупные кнопки. */ .entry { display: grid; gap: var(--gap); } .entry__card { display: block; width: 100%; text-align: center; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: 18px var(--pad); color: var(--text); font-size: 18px; font-weight: 700; } .entry__card:hover { border-color: var(--stroke-strong); background: var(--surface-raised); } /* ── Карточки и типографика ──────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: var(--pad); margin-bottom: var(--gap); } .card--flat { padding: 0; overflow: hidden; } .card--good { border-color: color-mix(in srgb, var(--good) 35%, transparent); } .card--warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .card--bad { border-color: color-mix(in srgb, var(--bad) 35%, transparent); } .card--info { border-color: color-mix(in srgb, var(--info) 35%, transparent); } .card--accent { border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .section { margin: 18px 0 8px; display: flex; align-items: baseline; gap: 8px; } .section h2 { margin: 0; font-size: 15px; font-weight: 700; } .section .sub { font-size: 12px; color: var(--text-2); flex: 1; } .section .act { background: none; border: 0; color: var(--accent); font-size: 13px; padding: 4px 0; } h3.row-title { margin: 0; font-size: 15px; font-weight: 600; } .muted { color: var(--text-2); } .dim { color: var(--text-3); } .small { font-size: 12px; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } .num { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .pre-line { white-space: pre-line; } .t-good { color: var(--good); } .t-warn { color: var(--warn); } .t-bad { color: var(--bad); } .t-info { color: var(--info); } .t-accent { color: var(--accent); } .t-neutral { color: var(--text); } /* ── Кнопки ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--stroke); border-radius: var(--r-sm); padding: 9px 14px; font-size: 14px; min-height: 40px; } .btn:disabled { opacity: .5; cursor: default; } .btn--primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; font-weight: 600; } .btn--wide { width: 100%; } .btn--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .btn--good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); } .btn--bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .btn--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .btn--sm { min-height: 32px; padding: 5px 10px; font-size: 13px; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; } /* ── Поля ────────────────────────────────────────────────── */ .field { display: block; margin-bottom: 12px; } .field > span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 5px; } .field input, .field select, .input { width: 100%; background: var(--surface-raised); color: var(--text); border: 1px solid var(--stroke); border-radius: var(--r-sm); padding: 10px 12px; min-height: 42px; } .field input:focus, .field select:focus, .input:focus { outline: 1px solid var(--accent); } .field .err { display: block; color: var(--bad); font-size: 12px; margin-top: 4px; } .field .hint { display: block; color: var(--text-3); font-size: 12px; margin-top: 4px; } .field--invalid input { border-color: color-mix(in srgb, var(--bad) 60%, transparent); } .search { position: relative; margin-bottom: 10px; } .search input { padding-right: 34px; } /* Своя кнопка очистки — системную у type="search" убираем, чтобы не было двух крестиков. */ .search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--text-3); font-size: 18px; padding: 4px 8px; } .switch { display: flex; align-items: center; gap: 10px; min-height: 40px; } .switch input { width: 20px; height: 20px; accent-color: var(--accent); } .switch span { flex: 1; } /* ── Чипы и сегменты ─────────────────────────────────────── */ .chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; background: var(--surface); color: var(--text-2); border: 1px solid var(--stroke); border-radius: 999px; padding: 6px 12px; font-size: 13px; white-space: nowrap; } .chip.is-active { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); } .chip .cnt { color: var(--text-3); margin-left: 5px; font-variant-numeric: tabular-nums; } /* На подложке выбранного чипа третичный текст бледнее нормы (4.3:1) — берём вторичный. */ .chip.is-active .cnt { color: var(--text-2); } .segments { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-sm); padding: 3px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; } .segments::-webkit-scrollbar { display: none; } .segments button { flex: 1 0 auto; background: none; border: 0; color: var(--text-2); border-radius: 6px; padding: 7px 12px; font-size: 13px; white-space: nowrap; } .segments button.is-active { background: var(--surface-high); color: var(--text); font-weight: 600; } /* ── Бейджи ──────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .badge--good { background: color-mix(in srgb, var(--good) 10%, var(--surface)); color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); } .badge--warn { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .badge--bad { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); } .badge--info { background: color-mix(in srgb, var(--info) 10%, var(--surface)); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); } .badge--accent { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .badge--neutral { background: var(--track); color: var(--text-2); border-color: var(--stroke); } .badges { display: flex; flex-wrap: wrap; gap: 5px; } .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; } /* Точка состояния перед текстом: центрируется по первой строке, с отступом до текста. */ .dot-line { display: flex; align-items: flex-start; gap: 9px; } .dot-line > .dot-holder { display: inline-flex; align-items: center; height: 1.4em; flex: 0 0 auto; } /* Высота держателя = строке текста рядом, поэтому размер шрифта задаём по соседнему тексту. */ .dot-line--sm > .dot-holder { font-size: 12px; } .dot--good { background: var(--good); } .dot--warn { background: var(--warn); } .dot--bad { background: var(--bad); } .dot--info { background: var(--info); } .dot--neutral { background: var(--text-3); } .grade { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 7px; font-weight: 800; font-size: 12px; border: 1px solid currentColor; background: var(--track); } /* ── Плитки показателей ──────────────────────────────────── */ .kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-bottom: var(--gap); } .kpis--3 { grid-template-columns: repeat(3, 1fr); } @media (min-width: 620px) { .kpis { grid-template-columns: repeat(4, 1fr); } } .kpi { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: 12px; } .kpi__t { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .4px; } .kpi__v { font-size: 20px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; line-height: 1.15; } .kpi__v .u { font-size: 12px; font-weight: 500; color: var(--text-2); margin-left: 3px; } .kpi__d { font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; } .kpi__f { font-size: 11px; color: var(--text-3); margin-top: 3px; } /* ── Пары «подпись → значение» ───────────────────────────── */ .kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; } .kv--3 { grid-template-columns: repeat(3, 1fr); } .kv--1 { grid-template-columns: 1fr; } .kv > div > .k { font-size: 11px; color: var(--text-3); } .kv > div > .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; word-break: break-word; } .rows > * + * { border-top: 1px solid var(--stroke); } .row { display: flex; align-items: center; gap: 10px; padding: 11px var(--pad); min-height: 44px; width: 100%; background: none; border: 0; text-align: left; color: inherit; } .row__main { flex: 1; min-width: 0; } .row__val { font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; } .row__chev { color: var(--text-3); font-size: 18px; line-height: 1; } button.row:hover { background: var(--surface-raised); } /* ── Списки-карточки ─────────────────────────────────────── */ .tile { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: var(--pad); margin-bottom: var(--gap); color: inherit; } button.tile:hover { border-color: var(--stroke-strong); } /* Карточка закупки: кликабельная область + «кто/когда» + кнопки действий (кнопки не вкладываются в кнопку). */ .tile--tender { padding: 0; overflow: hidden; } .tile--tender:hover { border-color: var(--stroke-strong); } .tile__open { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: var(--pad); font: inherit; } .tile__by { padding: 0 var(--pad) 10px; } .tile__open + .tile__by { margin-top: -4px; } /* Рамка фокуса — внутри карточки: снаружи её срезает overflow у скруглённой рамки. */ .tile__open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r-card); } .tile__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px var(--pad) var(--pad); border-top: 1px solid var(--stroke); } .tile__foot .btn { flex: 1 1 auto; } .tile__head { display: flex; align-items: flex-start; gap: 10px; } .tile__head .grow { flex: 1; min-width: 0; } .metric-inline { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .metric-inline > div { min-width: 70px; } .metric-inline .mv { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .metric-inline .ml { font-size: 11px; color: var(--text-3); } /* ── Пустые состояния / ошибки / скелетоны ───────────────── */ .empty { text-align: center; padding: 22px 12px; } .empty__t { font-weight: 600; margin-bottom: 6px; } .empty__m { color: var(--text-2); font-size: 13px; } .empty .btn { margin-top: 12px; } .note { display: flex; align-items: center; gap: 8px; border-radius: var(--r-sm); padding: 8px 10px; font-size: 12px; border: 1px solid var(--stroke); background: var(--surface); margin-bottom: 10px; } .note--warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); } .note--bad { border-color: color-mix(in srgb, var(--bad) 30%, transparent); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); } .note--info { border-color: color-mix(in srgb, var(--info) 30%, transparent); background: color-mix(in srgb, var(--info) 8%, var(--surface)); } .note__grow { flex: 1; } .skel { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: var(--pad); margin-bottom: var(--gap); } .skel__l { height: 10px; background: var(--surface-raised); border-radius: 5px; margin: 8px 0; } .skel__l:first-child { width: 45%; height: 13px; } .loading-line { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; padding: 14px 0; justify-content: center; } .spinner { width: 14px; height: 14px; border: 2px solid var(--stroke-strong); border-top-color: var(--accent); border-radius: 50%; animation: sp .8s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } } /* ── Графики ─────────────────────────────────────────────── */ .chart-card { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: var(--pad); margin-bottom: var(--gap); } .chart-card__h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .chart-card__h h3 { margin: 0; font-size: 14px; font-weight: 600; } .chart-card__h .sub { font-size: 12px; color: var(--text-3); flex: 1; } .chart { width: 100%; display: block; overflow: visible; } .chart text { font-size: 10px; fill: var(--text-3); } .chart text.chart-value { font-size: 15px; font-weight: 700; fill: var(--text); } .chart .grid { stroke: var(--stroke); stroke-width: .5; stroke-dasharray: 3 3; } .chart .axis { stroke: var(--stroke); stroke-width: .5; } .legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--text-2); } .legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; } .legend-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 12px; } .legend-list > div { display: flex; align-items: center; gap: 6px; } .legend-list .nm { flex: 1; color: var(--text-2); } .legend-list .vl { font-weight: 600; font-variant-numeric: tabular-nums; } .bar-track { height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; } .bar-fill { height: 100%; background: var(--accent); } .ring { display: flex; align-items: center; gap: 10px; } .ring__v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .ring__l { font-size: 11px; color: var(--text-3); } /* ── Журнал запуска ──────────────────────────────────────── */ .log { background: var(--log-bg); border: 1px solid var(--stroke); border-radius: var(--r-sm); padding: 10px; max-height: 260px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: var(--text-2); } .log .e { color: var(--bad); } /* ── Дерево JSON ─────────────────────────────────────────── */ .json { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } .json details { margin-left: 10px; } .json summary { cursor: pointer; color: var(--accent2); padding: 2px 0; } .json .k { color: var(--accent2); } .json .s { color: var(--good); } .json .n { color: var(--warn); } .json .b { color: var(--violet); } .json .nl { color: var(--text-3); } .json .leaf { padding: 2px 0 2px 10px; word-break: break-word; } /* ── Тосты ───────────────────────────────────────────────── */ .toasts { position: fixed; left: 0; right: 0; z-index: 40; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding: 0 12px; } .toast { pointer-events: auto; max-width: 420px; width: 100%; background: var(--surface-high); border: 1px solid var(--stroke-strong); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; display: flex; align-items: center; gap: 10px; } .toast--good { border-color: color-mix(in srgb, var(--good) 50%, transparent); } .toast--warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); } .toast--bad { border-color: color-mix(in srgb, var(--bad) 50%, transparent); } .toast__t { font-weight: 600; } .toast__grow { flex: 1; min-width: 0; } .toast button { background: none; border: 0; color: var(--accent); font-size: 13px; } /* ── Модальные окна ──────────────────────────────────────── */ .modal-back { position: fixed; inset: 0; z-index: 45; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 620px) { .modal-back { align-items: center; } } .modal { width: 100%; max-width: 560px; max-height: 88svh; overflow: auto; background: var(--bg-top); border: 1px solid var(--stroke); border-radius: 14px 14px 0 0; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); } @media (min-width: 620px) { .modal { border-radius: 14px; } } .modal__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .modal__h h2 { margin: 0; font-size: 17px; flex: 1; } .modal__h button { background: none; border: 0; color: var(--text-2); font-size: 22px; line-height: 1; padding: 0 4px; } /* ── Разное ──────────────────────────────────────────────── */ .webframe { width: 100%; height: calc(100svh - var(--topbar-h) - var(--tabbar-h) - 40px); border: 1px solid var(--stroke); border-radius: var(--r-md); background: #fff; } .list-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); min-height: 26px; margin-bottom: 4px; } .list-head .grow { flex: 1; } .month-head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin: 14px 0 6px; } .strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; } .strip::-webkit-scrollbar { display: none; } .strip button { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-sm); color: var(--text-2); padding: 7px 10px; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; } .strip button.is-active { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); } .strip .d1 { font-size: 11px; } .strip .d2 { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .strip .d3 { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; } .month-bar { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-sm); margin-bottom: 10px; } .month-bar button { background: none; border: 0; color: var(--text-2); padding: 10px 14px; font-size: 15px; } .month-bar select { flex: 1; background: none; border: 0; text-align: center; color: var(--text); font-weight: 600; padding: 10px 0; min-height: 42px; } .month-bar button:disabled { color: var(--text-3); opacity: .5; } .flex { display: flex; align-items: center; gap: 8px; } .flex-top { display: flex; align-items: flex-start; gap: 8px; } .grow { flex: 1; min-width: 0; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mb8 { margin-bottom: 8px; } .mb0 { margin-bottom: 0; } .right { text-align: right; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Пути и идентификаторы без пробелов — переносить где угодно, иначе растягивают экран телефона. */ .break-any { overflow-wrap: anywhere; } .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Сетка карточек ──────────────────────────────────────── */ /* Список карточек: на узком экране — одна колонка, на широком — несколько. Заголовки месяцев, кнопки «загрузить ещё» и подписи занимают всю ширину. */ .grid-cards > .tile, .grid-cards > .card { margin-bottom: var(--gap); } /* ── Экран ПК и ноутбука ─────────────────────────────────── */ @media (min-width: 1024px) { :root { --maxw: 1240px; --sidebar-w: 224px; --pad: 16px; } .app { padding-left: var(--sidebar-w); } /* Вкладки переезжают в боковую панель. */ .tabbar { top: 0; bottom: 0; right: auto; width: var(--sidebar-w); flex-direction: column; justify-content: flex-start; gap: 4px; border-top: 0; border-right: 1px solid var(--stroke-strong); padding: 12px 10px; padding-bottom: 12px; overflow-y: auto; } .tabbar__brand { display: block; font-size: 15px; font-weight: 800; letter-spacing: .3px; color: var(--text); padding: 6px 12px 12px; } .tabbar__brand span { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); margin-top: 2px; } .tabbar button { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 40px; padding: 8px 12px; font-size: 14px; } .tabbar button .tx { flex: 1; text-align: left; } .tabbar .badge-dot { position: static; margin-left: auto; border-color: transparent; } .tabbar__extra { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 12px; } /* «Архив» раздела «Тендеры» на ПК — внизу панели, а на телефоне — третьей кнопкой снизу. */ .tabbar .only-phone { display: none; } .tabbar__extra::before { content: ''; display: block; height: 1px; background: var(--stroke); margin: 0 4px 8px; } .topbar { padding: 0 20px; } .screen { padding: 16px 20px 40px; } /* Формы и настройки: длинная строка читается плохо, колонку сужаем. */ .screen.is-narrow { max-width: 880px; } /* Плитки показателей заполняют ширину, а не растягиваются по две. */ .kpis { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } .kpis--3 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } .kv:not(.kv--1):not(.kv--3) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* Списки карточек — в две колонки. */ .grid-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); align-items: start; } .grid-cards--wide { grid-template-columns: 1fr; } .grid-cards > .span-all, .grid-cards > .month-head, .grid-cards > .loading-line, .grid-cards > .section { grid-column: 1 / -1; } /* Чипы и сегменты на ПК переносятся, а не прокручиваются вбок: горизонтальной прокрутки мышью нет, а полоса скрыта — часть фильтров была бы не видна. Лента дней (.strip) остаётся горизонтальной: это шкала времени. */ .chips { flex-wrap: wrap; overflow: visible; padding-bottom: 2px; } .segments { flex-wrap: wrap; overflow: visible; } .row { min-height: 40px; padding: 9px var(--pad); } .modal { max-width: 620px; max-height: 84svh; } .toasts { left: auto; right: 0; bottom: 16px; align-items: flex-end; padding: 0 20px; } .webframe { height: calc(100svh - var(--topbar-h) - 76px); } /* Экран входа: поле по центру, но не во всю ширину. */ .auth__box { max-width: 400px; } } @media (min-width: 1500px) { :root { --maxw: 1440px; } /* Компактные карточки (машины, закупки) помещаются по три. */ .grid-cards--dense { grid-template-columns: repeat(3, minmax(0, 1fr)); } }