/* LeadOS — дизайн-система (design-system/MASTER.md): Data-Dense админка, светлая тема, системный шрифт. */ :root { --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --fg: #0f172a; --muted: #475569; --subtle: #64748b; --line: #e2e8f0; --line-strong: #cbd5e1; --primary: #1e40af; --primary-hover: #1e3a8a; --primary-soft: #eff6ff; --primary-line: #bfdbfe; --accent: #b45309; --warn-soft: #fffbeb; --warn-line: #fcd34d; --ok: #15803d; --ok-soft: #f0fdf4; --ok-line: #bbf7d0; --err: #b91c1c; --err-soft: #fef2f2; --err-line: #fecaca; --radius: 8px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(15, 23, 42, 0.06); --focus: 0 0 0 3px rgba(30, 64, 175, 0.35); --sidebar-w: 232px; --z-sticky: 10; --z-dropdown: 20; --z-toast: 50; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 14px/1.5 var(--font); color: var(--fg); background: var(--bg); } a { color: var(--primary); text-underline-offset: 2px; } a:hover { color: var(--primary-hover); } /* Прозрачный outline вместо none: в режиме высокой контрастности Windows (forced-colors) тени не рисуются, а outline — да. */ :focus-visible { outline: 2px solid transparent; box-shadow: var(--focus); border-radius: var(--radius-sm); } h1 { font-size: 20px; line-height: 1.3; margin: 0 0 16px; font-weight: 650; } h2 { font-size: 16px; line-height: 1.35; margin: 24px 0 10px; font-weight: 650; } h3 { font-size: 14px; margin: 16px 0 8px; font-weight: 650; } p { margin: 0 0 12px; } code, .mono { font-family: var(--mono); font-size: 13px; } .muted { color: var(--muted); } .subtle { color: var(--subtle); font-size: 13px; } .num { text-align: right; font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } /* Ссылка «К содержимому» появляется при фокусе с клавиатуры. */ .sr-only:focus, .sr-only:active { position: fixed; top: 8px; left: 8px; z-index: var(--z-toast); width: auto; height: auto; margin: 0; padding: 8px 14px; overflow: visible; clip: auto; font-weight: 550; color: var(--primary); background: var(--surface); border: 1px solid var(--primary); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .icon { width: 16px; height: 16px; flex: none; vertical-align: -3px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Публичные страницы (вход, 2FA, смена пароля) ---------- */ .top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); } .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--fg); text-decoration: none; } .brand-logo { width: 28px; height: 28px; border-radius: 7px; flex: none; } .login-wordmark { display: block; width: 260px; max-width: 100%; height: auto; margin: 0 auto 16px; } .top nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .who { color: var(--muted); } main { padding: 24px 16px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; max-width: 1100px; margin: 0 auto; box-shadow: var(--shadow); } .card.narrow { max-width: 420px; } .qr { display: block; margin: 12px auto; } .secret code { word-break: break-all; } /* ---------- Формы ---------- */ label { display: block; margin: 0 0 12px; font-weight: 500; } label .hint, .field-hint { display: block; font-weight: 400; color: var(--subtle); font-size: 12.5px; margin-top: 2px; } input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; min-height: 36px; font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color 0.15s, box-shadow 0.15s; } input:focus, select:focus, textarea:focus { outline: 2px solid transparent; border-color: var(--primary); box-shadow: var(--focus); } input[type="checkbox"], input[type="radio"] { display: inline-block; width: 16px; height: 16px; min-height: 0; margin: 0 6px 0 0; vertical-align: -3px; accent-color: var(--primary); } textarea { min-height: 72px; resize: vertical; } /* Одинаковый вид в Safari на macOS, Chrome и Edge (ТЗ v2.2 §2.6). Safari рисует select, дату, поиск и кнопки системными: скруглёнными, серыми, другой высоты. Системный вид сбрасываем и задаём свой явно — рамку, фон, высоту, стрелку у списка и галочку у чекбокса. Картинки — data:-SVG, CSP (img-src data:) их пропускает. */ input, select, textarea, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; } select { padding-right: 32px; text-overflow: ellipsis; cursor: pointer; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 12px; } select::-ms-expand { display: none; } input[type="date"] { line-height: 1.25; } input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.25em; } input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.65; cursor: pointer; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input[type="checkbox"] { flex: none; padding: 0; border: 1.5px solid var(--subtle); border-radius: 4px; cursor: pointer; background: var(--surface) no-repeat center / 12px 12px; } input[type="checkbox"]:checked { border-color: var(--primary); background-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } input[type="checkbox"]:focus-visible { box-shadow: var(--focus); } input[type="radio"] { -webkit-appearance: radio; appearance: auto; } .req { color: var(--err); } .check { display: flex; align-items: center; font-weight: 400; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; } .form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; } /* ---------- Кнопки ---------- */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 14px; font: inherit; font-weight: 550; line-height: 1.2; color: #fff; background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } button:hover, .btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; } button:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } button[aria-busy="true"] { cursor: progress; } .btn-secondary { color: var(--fg); background: var(--surface); border-color: var(--line-strong); } .btn-secondary:hover { color: var(--fg); background: var(--surface-2); border-color: var(--line-strong); } .btn-download { color: #fff; background: linear-gradient(110deg, #1d4ed8 0%, #6d28d9 35%, #0e7490 70%, #1d4ed8 100%); background-size: 240% 100%; border-color: #1d4ed8; box-shadow: 0 3px 10px rgba(29, 78, 216, 0.3); transition: box-shadow 0.15s, transform 0.15s, filter 0.15s; } .btn-download:hover { animation: download-shimmer 3.2s ease-in-out infinite; color: #fff; border-color: #1e40af; box-shadow: 0 5px 16px rgba(79, 70, 229, 0.38); filter: brightness(1.08); transform: translateY(-1px); } .btn-download:disabled, .btn-download[aria-disabled="true"] { color: var(--muted); background: var(--surface-2); border-color: var(--line-strong); box-shadow: none; animation: none; filter: none; transform: none; } .btn-danger { background: var(--err); border-color: var(--err); } .btn-danger:hover { background: #991b1b; border-color: #991b1b; } .btn-ghost { color: var(--primary); background: transparent; border-color: transparent; } .btn-ghost:hover { color: var(--primary-hover); background: var(--primary-soft); border-color: transparent; } .btn-sm { min-height: 30px; padding: 4px 10px; font-size: 13px; } button.link { min-height: 0; padding: 0; color: var(--primary); background: none; border: 0; font-weight: 400; } button.link:hover { color: var(--primary-hover); text-decoration: underline; background: none; } form.inline { display: inline; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; } .refresh { display: inline-flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .refresh[data-refresh-state="running"] .icon { animation: spin 1.2s linear infinite; } /* «Обновить» в кабинете подрядчика (ТЗ v2.2 §2.2): закреплена справа вверху, цветная и крупнее обычных кнопок. */ .refresh-updated { font-size: 13px; color: var(--muted); } .refresh-updated strong { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } .btn-refresh { min-height: 38px; padding: 8px 18px; box-shadow: 0 1px 3px rgba(30, 64, 175, 0.35); } /* Неактивная («Можно через N мин») — не бледно-синяя с белым текстом, а читаемая серая. */ .btn-refresh:disabled, .btn-refresh:disabled:hover { opacity: 1; color: var(--muted); background: var(--surface-2); border-color: var(--line-strong); box-shadow: none; } .p-topbar { justify-content: flex-end; min-height: 52px; padding: 8px 24px; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes download-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---------- Сообщения ---------- */ .error { color: var(--err); } .notice, .alert { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--primary-soft); border: 1px solid var(--primary-line); margin: 0 0 16px; } .alert { display: flex; gap: 10px; align-items: flex-start; } .alert > .icon { margin-top: 2px; } .alert p:last-child, .alert ul:last-child { margin-bottom: 0; } .alert-ok { background: var(--ok-soft); border-color: var(--ok-line); } .alert-ok > .icon { color: var(--ok); } .alert-warn { background: var(--warn-soft); border-color: var(--warn-line); } .alert-warn > .icon { color: var(--accent); } .alert-err { background: var(--err-soft); border-color: var(--err-line); } .alert-err > .icon { color: var(--err); } .alert-info > .icon { color: var(--primary); } .secret-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; } .secret-box code { font-size: 18px; padding: 6px 12px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); user-select: all; letter-spacing: 0.5px; } /* ---------- Бейджи ---------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 550; line-height: 20px; white-space: nowrap; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } .badge-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); } .badge-err { background: var(--err-soft); color: var(--err); border-color: var(--err-line); } .badge-warn { background: var(--warn-soft); color: var(--accent); border-color: var(--warn-line); } .badge-info { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); } .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; } /* ---------- Каркас админки ---------- */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; } .sidebar .brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 16px; font-size: 15px; } .sidebar-wordmark { display: block; width: 140px; max-width: 100%; height: auto; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 36px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-weight: 500; transition: background-color 0.15s, color 0.15s; } .nav a:hover { background: var(--surface-2); color: var(--fg); } .nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); } /* Вкладки страниц внутри пункта меню (views/admin/_head.ejs): URL страниц прежние, меняется только навигация. */ .tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: -4px 0 16px; border-bottom: 1px solid var(--line); } .tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; text-decoration: none; } .tabs a:hover { color: var(--fg); background: var(--surface-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .tabs a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .nav .count { margin-left: auto; } .sidebar-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .content { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 24px; min-height: 56px; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); } .topbar .spacer { flex: 1; } .queue-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; font-size: 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-indicator:hover { color: var(--fg); } .queue-indicator[data-active="1"] { color: var(--primary); background: var(--primary-soft); border-color: var(--primary-line); } .queue-indicator[data-active="1"] .dot { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.35; } } .page { padding: 20px 24px 40px; max-width: 1440px; width: 100%; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .page-head h1 { margin: 0; } .page-head .lead { margin: 4px 0 0; color: var(--muted); } .breadcrumbs { font-size: 13px; color: var(--subtle); margin-bottom: 4px; } .breadcrumbs a { color: var(--subtle); } /* ---------- Панели, KPI ---------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); } .panel-head h2 { margin: 0; font-size: 15px; } .panel-body { padding: 16px; } .panel-body > :last-child { margin-bottom: 0; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; } .cols-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: start; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; } /* Ряды плиток без «сирот» (7 → 5+2, 4 → 3+1): число колонок подбирается по числу плиток. */ .kpis:has(> :nth-child(4):last-child), .kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis:has(> :nth-child(7):last-child), .kpis:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (min-width: 700px) { .kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .kpis:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 560px) { .kpis:has(> :nth-child(6):last-child), .kpis:has(> :nth-child(7):last-child), .kpis:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; } a.kpi:hover { border-color: var(--primary-line); color: inherit; } /* Плитка со ссылкой и подсказкой «?»: интерактив нельзя вкладывать в , поэтому ссылка — на подписи, а её ::after растягивается на всю плитку; значок «?» поднят над ней. */ .kpi-link { position: relative; } .kpi-link:hover { border-color: var(--primary-line); } .kpi-link .kpi-main { color: inherit; text-decoration: none; } .kpi-link .kpi-main::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .kpi-link .kpi-main:focus-visible { box-shadow: none; } .kpi-link .kpi-main:focus-visible::after { box-shadow: var(--focus); } .kpi-link .tip { z-index: 1; } .kpi .kpi-label { font-size: 12.5px; color: var(--muted); } .kpi .kpi-value { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.3; } .kpi .kpi-sub { font-size: 12.5px; color: var(--subtle); } .kpi.warn .kpi-value { color: var(--accent); } .kpi.err .kpi-value { color: var(--err); } dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; } dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* Длинный бейдж («временно заблокирован до …») переносится внутри панели, а не вылезает за неё. */ dl.kv dd .badge { white-space: normal; border-radius: var(--radius-sm); } /* ---------- Фильтры ---------- */ .filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; } .filters label { margin: 0; font-size: 12.5px; color: var(--muted); font-weight: 500; min-width: 140px; flex: 0 1 180px; } .filters label.grow { flex: 1 1 260px; } .filters input:not([type="checkbox"]):not([type="radio"]), .filters select { min-height: 34px; padding: 6px 8px; } .filters select { padding-right: 30px; } .filters .check { min-height: 34px; color: var(--fg); font-size: 13px; } .filters .form-actions { margin: 0; } /* Множественный выбор без JS: details + чекбоксы, раскрывается поверх фильтров. */ .multi-field { min-width: 140px; flex: 0 1 200px; font-size: 12.5px; color: var(--muted); font-weight: 500; } .multi { position: relative; margin-top: 4px; } .multi > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 34px; padding: 6px 8px; font-size: 14px; font-weight: 400; color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .multi > summary::-webkit-details-marker { display: none; } .multi > summary::after { content: "▾"; color: var(--subtle); } .multi[open] > summary { border-color: var(--primary); box-shadow: var(--focus); } .multi-list { position: absolute; z-index: var(--z-dropdown); left: 0; top: calc(100% + 4px); min-width: 100%; width: max-content; max-width: min(360px, calc(100vw - 32px)); max-height: 320px; overflow-y: auto; margin: 0; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } .multi-list .check { min-height: 32px; font-size: 13px; color: var(--fg); } .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); text-decoration: none; font-size: 13px; } .chip:hover { color: var(--fg); border-color: var(--subtle); } .chip[aria-current="true"] { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); font-weight: 550; } /* ---------- Таблицы ---------- */ /* Прокрутка в обе стороны внутри обёртки: иначе overflow-x делает её контейнером прокрутки и липкая шапка (thead th) «залипает» к обёртке, а не к окну, то есть не работает. Горизонтальный скролл виден у нижнего края окна, а тень по краю подсказывает, что справа есть ещё колонки. */ .table-wrap { overflow: auto; max-height: 78vh; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local, linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0)) left center / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0)) right center / 10px 100% no-repeat scroll, var(--surface); } /* Первая колонка (название) остаётся на месте при горизонтальной прокрутке — opt-in классом на . */ .sticky-first th:first-child, .sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); } .sticky-first thead th:first-child { z-index: 2; background: var(--surface-2); } .sticky-first tfoot td:first-child { background: var(--surface-2); } .sticky-first tbody tr:hover td:first-child { background: #f8fafc; } .sticky-first tr.flag-err td:first-child { background: var(--err-soft); } .sticky-first tr.flag-warn td:first-child { background: var(--warn-soft); } /* Колонка с кнопками действий (последняя) не уезжает за край — иначе «Отвязать» не видно. */ .sticky-actions th:last-child, .sticky-actions td:last-child { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -1px 0 0 var(--line); } .sticky-actions thead th:last-child { z-index: 2; background: var(--surface-2); } @media print { .table-wrap { max-height: none; overflow: visible; } } .marketing-table { width: max-content; min-width: 100%; } .marketing-table [hidden] { display: none; } .marketing-table .marketing-name { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 220px; max-width: 300px; white-space: normal; } .marketing-table thead .marketing-name { z-index: 3; background: var(--surface-2); } .marketing-table .marketing-depth-0 .marketing-name { font-weight: 700; } .marketing-table .marketing-depth-1 .marketing-name { padding-left: 22px; } .marketing-table .marketing-depth-2 .marketing-name { padding-left: 38px; } .marketing-table .marketing-depth-3 .marketing-name { padding-left: 54px; font-weight: 400; } .marketing-table .marketing-depth--1 { background: var(--primary-soft); font-weight: 700; } .marketing-table .marketing-key { background: #eff6ff; font-weight: 650; } .marketing-toggle, .marketing-sort { color: var(--primary); background: transparent; border: 0; cursor: pointer; font: inherit; } .marketing-toggle { min-width: 22px; padding: 0 4px; margin-right: 4px; } .marketing-sort { font-weight: 700; white-space: nowrap; } .marketing-delta { color: var(--subtle); font-size: 11px; } .marketing-delta.good { color: #16734b; } .marketing-delta.bad { color: #b42318; } .chart .bar.partial { opacity: .45; } .panel .table-wrap { border: 0; border-radius: 0 0 var(--radius) var(--radius); } table { border-collapse: collapse; width: 100%; font-size: 13.5px; } th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; } thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 12.5px; z-index: 1; } /* --subtle на сером фоне шапки даёт 4.34:1 — в шапке берём --muted. */ thead .subtle, thead .field-hint { color: var(--muted); } tbody tr:hover { background: #f8fafc; } tbody tr:last-child td { border-bottom: 0; } th a.sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } th a.sort:hover { color: var(--fg); } th[aria-sort] a.sort { color: var(--primary); } td.wrap, th.wrap { white-space: normal; min-width: 180px; max-width: 360px; } td.err-text { white-space: normal; max-width: 360px; color: var(--err); } tr.flag-err td { background: var(--err-soft); } tr.flag-warn td { background: var(--warn-soft); } tr.muted-row td { color: var(--subtle); } .empty { padding: 28px 16px; text-align: center; color: var(--muted); } .pager { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 0; } .table-meta { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; color: var(--muted); font-size: 13px; } .table-note { margin: 0; padding: 8px 16px 12px; font-size: 12.5px; color: var(--subtle); } th.center, td.center { text-align: center; } /* ---------- Журнал подрядчика (ТЗ v2.2 §2.4) ---------- */ /* Явная панель «Фильтры»: подписи тёмные, поля белые с заметной рамкой на тонированном фоне, выбранное — синим. */ .filter-panel .panel-head h2 { display: inline-flex; align-items: center; gap: 8px; } .filter-panel .filters { margin: 0; border: 0; border-radius: 0; background: var(--surface-2); padding: 14px 16px; } .filter-panel .filters:last-child { border-radius: 0 0 var(--radius) var(--radius); } .filter-panel .filters label, .filter-panel .multi-field { color: var(--fg); font-weight: 550; } .filter-panel .filters input, .filter-panel .filters select, .filter-panel .multi > summary { border-color: #94a3b8; } .filters .is-set, .multi > summary.is-set { border-color: var(--primary); background-color: var(--primary-soft); } .active-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); } .chip-active { color: var(--primary); border-color: var(--primary-line); background: var(--primary-soft); } .chip-active:hover { color: var(--primary-hover); border-color: var(--primary); } .chip-active .icon { width: 14px; height: 14px; } /* Квал / назначен / явка — значками: сам факт, без даты. */ .flag { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; } .flag .icon { width: 14px; height: 14px; stroke-width: 3; vertical-align: 0; } .flag-yes { color: var(--ok); background: var(--ok-soft); } .flag-no { color: var(--subtle); } /* Фильтр в заголовке колонки. Выпадашка позиционируется из contractor.js (position: fixed), чтобы её не обрезала прокрутка таблицы; без JS — обычный absolute. */ .th-inner { display: inline-flex; align-items: center; gap: 4px; } .th-filter { display: inline-block; position: relative; } .th-filter > summary { list-style: none; } .th-filter > summary::-webkit-details-marker { display: none; } .th-filter-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--subtle); cursor: pointer; } .th-filter-btn:hover { color: var(--fg); background: var(--surface); border-color: var(--line-strong); } .th-filter-btn.is-set { color: #fff; background: var(--primary); border-color: var(--primary); } .th-filter[open] > .th-filter-btn { box-shadow: var(--focus); } .th-filter-btn .icon { width: 13px; height: 13px; vertical-align: 0; } .th-pop { position: absolute; z-index: var(--z-dropdown); top: calc(100% + 4px); left: 0; min-width: 150px; max-width: min(340px, calc(100vw - 16px)); max-height: 360px; overflow-y: auto; padding: 6px; font-size: 13px; font-weight: 400; color: var(--fg); text-align: left; white-space: normal; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } .th-pop > a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--fg); text-decoration: none; } .th-pop > a:hover { background: var(--surface-2); } .th-pop > a[aria-current="true"] { color: var(--primary); background: var(--primary-soft); font-weight: 600; } .th-pop .check { min-height: 30px; margin: 0; white-space: nowrap; } .th-pop .form-actions { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } /* ---------- Таблица по связкам на обзоре подрядчика (ТЗ v2.2 §2.8) ---------- */ table.funnel th, table.funnel td { padding: 8px 10px; } .funnel thead th { white-space: normal; min-width: 84px; vertical-align: bottom; } .funnel .sticky-col { position: sticky; left: 0; z-index: 1; min-width: 180px; max-width: 280px; white-space: normal; background: var(--surface); box-shadow: 1px 0 0 var(--line); } .funnel thead .sticky-col { z-index: 2; background: var(--surface-2); } .funnel tfoot .sticky-col { background: var(--surface-2); } .funnel tbody tr:hover .sticky-col { background: #f8fafc; } /* Стоимость явки — ключевой показатель источника (§5.3): колонка выделена. */ .funnel .col-key { background: var(--primary-soft); color: var(--primary-hover); font-weight: 650; } .funnel thead .col-key, .funnel tfoot .col-key { background: #dbeafe; } /* ---------- Прогресс и график нагрузки ---------- */ .progress { position: relative; height: 8px; min-width: 120px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); } .progress > span { position: absolute; inset: 0 auto 0 0; background: var(--primary); border-radius: 999px; transition: width 0.3s ease; } .progress.indeterminate > span { width: 30%; animation: slide 1.4s ease-in-out infinite; } @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } } .job-live { display: grid; gap: 4px; min-width: 200px; } .job-live .meta { font-size: 12.5px; color: var(--muted); } .load-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 8px 0 0; border-bottom: 1px solid var(--line-strong); position: relative; } .load-chart .bar { flex: 1; min-width: 3px; background: var(--primary); border-radius: 2px 2px 0 0; opacity: 0.85; } .load-chart .bar.has-429 { background: var(--err); } .load-chart .bar.zero { background: var(--line); height: 2px !important; } .load-chart .limit { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--accent); } .load-chart .limit span { position: absolute; right: 0; top: -20px; font-size: 12px; color: var(--accent); background: var(--surface); padding: 0 4px; } .load-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--subtle); margin-top: 4px; } /* ---------- Графики статистики (SVG с сервера, src/web/charts.ts) ---------- Категориальные слоты 1–3 проверены валидатором палитры (dataviz): CVD ΔE ≥ 9.2 по всем парам. Слот 3 ниже 3:1 к фону — поэтому у каждого графика есть таблица с теми же числами. */ :root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; } .chart svg { display: block; width: 100%; height: auto; font-family: var(--font); overflow: visible; } .chart .grid { stroke: var(--line); stroke-width: 1; } .chart .base { stroke: var(--line-strong); stroke-width: 1; } .chart .ax { fill: var(--subtle); font-size: 11px; font-variant-numeric: tabular-nums; } .chart .cat { fill: var(--fg); font-size: 12.5px; } .chart .lbl { fill: var(--muted); font-size: 12px; font-weight: 600; } .chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; } .chart .dot { stroke: var(--surface); stroke-width: 2; pointer-events: none; } .chart .hit { fill: transparent; } .chart .hit:hover, .chart g:hover > .hit { fill: rgba(15, 23, 42, 0.04); } .chart .ln.s1 { stroke: var(--series-1); } .chart .ln.s2 { stroke: var(--series-2); } .chart .ln.s3 { stroke: var(--series-3); } .chart .ln.dashed { stroke-dasharray: 6 5; opacity: .7; } .chart .dot.s1, .chart .bar.s1 { fill: var(--series-1); } .chart .dot.s2 { fill: var(--series-2); } .chart .dot.s3 { fill: var(--series-3); } .sparkline { display: block; width: 132px; max-width: 100%; height: 34px; margin-top: 8px; overflow: visible; } .sparkline .ln { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .sparkline .spark-hit { fill: transparent; stroke: transparent; } .sparkline .spark-hit:hover { fill: var(--series-1); } .analytics-tabs { margin-bottom: 16px; } .toolbar-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; } .toolbar-row .chips { margin-bottom: 0; } .cohort-table .cohort-cell { background: rgba(42, 120, 214, calc(var(--cohort) * .32)); min-width: 105px; } .cohort-cell small, .heat-cell small { display: block; font-size: 10px; font-weight: 400; } .cohort-cell.partial { opacity: .55; } .chart .matrix-average { stroke: var(--subtle); stroke-width: 1; stroke-dasharray: 5 4; } .chart .matrix-dot { fill: var(--series-1); fill-opacity: .62; stroke: var(--surface); stroke-width: 2; } .chart .matrix-label { fill: var(--fg); font-size: 10px; } .heatmap { width: max-content; min-width: 100%; } .heatmap th, .heatmap td { padding: 6px 8px; text-align: center; } .heat-cell { background: rgba(42, 120, 214, calc(var(--heat) * .55)); min-width: 54px; font-variant-numeric: tabular-nums; } .heat-cell.low-data { opacity: .45; } .legend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13px; color: var(--muted); } .legend .key { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .key.s1 { background: var(--series-1); } .key.s2 { background: var(--series-2); } .key.s3 { background: var(--series-3); } details.table-view { margin-top: 12px; } details.table-view > summary { cursor: pointer; color: var(--primary); font-size: 13px; width: max-content; } details.table-view .table-wrap { margin-top: 8px; max-height: 420px; overflow: auto; } .share { display: flex; align-items: center; gap: 8px; min-width: 160px; } .share .share-bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .share .share-bar > span { display: block; height: 100%; background: var(--series-1); border-radius: 999px; } .share .share-val { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; } tfoot td { font-weight: 650; background: var(--surface-2); border-top: 1px solid var(--line-strong); border-bottom: 0; } .panel-head .chips { margin: 0; } .kpi .kpi-sub .sep { color: var(--line-strong); margin: 0 4px; } /* ---------- Деньги и план-факт (ТЗ v2.0 §5, §8, §9) ---------- */ th.col-money-first, td.col-money-first { border-left: 1px solid var(--line-strong); } .goal-bar { display: inline-block; position: relative; width: 120px; height: 8px; vertical-align: middle; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; } .goal-bar > span { position: absolute; inset: 0 auto 0 0; background: var(--primary); border-radius: 999px; } .goal-bar.goal-ok > span { background: var(--ok); } .goal-bar.goal-bad > span { background: var(--err); } .goal-pct { display: inline-block; min-width: 56px; margin-left: 8px; text-align: right; font-variant-numeric: tabular-nums; } .goal-state { margin-left: 6px; font-size: 12.5px; } .goal-state.goal-ok { color: var(--ok); } .goal-state.goal-bad { color: var(--err); } td.goal-cell.goal-ok strong { color: var(--ok); } td.goal-cell.goal-bad strong { color: var(--err); } .plan + form { margin-top: 8px; } .money-note { font-size: 13px; color: var(--muted); margin: 0; } .basis { white-space: normal; min-width: 220px; color: var(--muted); font-size: 13px; } /* «Ваш доход за период» (ТЗ v2.2 §3.7) — на видном месте. */ .kpi-accent { border-color: var(--primary-line); background: var(--primary-soft); } .kpi-accent .kpi-value { color: var(--primary-hover); } /* Вознаграждение подрядчика в форме условий (ТЗ v2.2 §3.4): необязательная группа полей. */ fieldset.group { margin: 4px 0 12px; padding: 10px 14px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; } fieldset.group > legend { padding: 0 6px; font-weight: 600; font-size: 13.5px; } /* Рейтинг (§10): изменение места к прошлому месяцу. */ .rank-delta { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; font-size: 12.5px; font-weight: 550; vertical-align: middle; } .rank-delta .icon { width: 14px; height: 14px; } .rank-delta.up { color: var(--ok); } .rank-delta.down { color: var(--err); } .rank-delta.same { color: var(--subtle); } /* ---------- Значок-подсказка «?» (fmt.tip + public/tips.js) ---------- */ .tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; min-height: 0; padding: 0; margin-left: 4px; vertical-align: 1px; font: 600 11px/1 var(--font); color: var(--subtle); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 50%; cursor: help; flex-shrink: 0; } .tip:hover, .tip:focus-visible { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } /* Зона касания больше самого значка — на телефоне по 16px не попасть. */ .tip { position: relative; } .tip::before { content: ""; position: absolute; inset: -12px; } .tip-pop { position: fixed; z-index: var(--z-toast); max-width: min(320px, calc(100vw - 16px)); padding: 8px 10px; font-size: 12.5px; font-weight: 400; line-height: 1.45; white-space: normal; text-align: left; color: #fff; background: #1e293b; border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2); pointer-events: none; } @media print { .tip { display: none; } } /* ---------- Подсказки справочника ---------- */ .hints { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 16px; } .hint { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius); padding: 12px 14px; } .hint.warn { border-left-color: var(--accent); } .hint.info { border-left-color: var(--primary); } .hint.err { border-left-color: var(--err); } .hint h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; } .hint p { font-size: 13px; color: var(--muted); margin-bottom: 8px; } .hint ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; } /* Только в карточках-подсказках (div.hint): списки