/* ============================================================================ Визуальные улучшения: темы (тёмная/светлая), анимации, динамика. Подключается ПОСЛЕ styles.css и Tailwind — переопределяет ключевые поверхности. ============================================================================ */ :root, html[data-theme="dark"] { /* ── Clean Data — тёмная (чистый navy + sky-blue + янтарь) ─────────────── */ --bg: #0b0f22; --bg-2: #11132c; --glow: transparent; --glow-2: transparent; --text: #e7e9f7; --muted: #9aa0bd; /* Мелкие подписи на ТОНИРОВАННОЙ подложке (карточка календаря, чипы) не дотягивали до 4.5:1 замером — для них отдельный, более контрастный оттенок (аудит 15.08). */ --muted-strong: #b6bcd8; --accent-ink: #aab4ff; /* акцент как ТЕКСТ на своей же подложке */ --tile-bg: #141831; --tile-bg-h: #1b2040; --tile-border: #262a4a; --accent: #818cf8; /* индиго-400 — основной (ярко на navy) */ --accent-2: #a78bfa; /* фиолет-400 — вторичный/градиенты */ --neon: #818cf8; --shadow: rgba(2, 6, 18, 0.55); --good: #4ade80; --mid: #fbbf24; /* янтарь — предупреждение (семантика) */ --bad: #f87171; --ring: #6366f1; /* фокус-кольцо */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display:'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; } /* Шрифты: IBM Plex Sans (текст/UI/заголовки) + IBM Plex Mono (цифры/данные — «технологично») */ html[data-theme] body, body { font-family: var(--font-ui) !important; } .pj-title, .rp-title, .au-h, .ac-h, .sb-logo-tx b, h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; } .pj-rd-chip b, .pj-table td.num, .rp-table tfoot td { font-family: var(--font-mono); } /* ── КОРЕНЬ единообразия текста (UI/UX аудит 2026-07-01) ────────────────────── «Шрифты пляшут / текст раскидан» — системная причина, не один экран: 1) поля форм — явно наследуют шрифт (страховка поверх Tailwind preflight); 2) в проекте намешаны микро-размеры 8/9/10/11px (text-[10px] ×93, [9px] ×15, [8px] ×2) вперемешку с 12/14px → поднимаем «пол» мелкого текста к единым 11px (меньше разнобоя, читаемее); 3) числа без табличных цифр «прыгали» разрядами в колонках → tabular-nums. */ input, select, textarea, button, optgroup { font-family: inherit; } table td, table th, input, .num, .tabular-nums { font-variant-numeric: tabular-nums; } .text-\[8px\], .text-\[9px\], .text-\[10px\] { font-size: 11px !important; } html[data-theme="light"] { color-scheme: light; /* Clean Data — светлая (холодно-серый + уверенный синий + янтарь) */ --bg: #f1f5f9; --bg-2: #e7eef6; --glow: transparent; --glow-2: transparent; --text: #0f172a; /* slate-900 — почти 16:1 */ --muted: #64748b; /* slate-500 — ≈4.7:1 */ --muted-strong: #4b5563; /* gray-600 — ≈7:1, для подписей на тонированном фоне */ --accent-ink: #3730a3; /* индиго-800 — акцент как ТЕКСТ (на светлой подложке) */ --tile-bg: #ffffff; --tile-bg-h: #f8fafc; --tile-border: #e2e8f0; /* slate-200 */ --accent: #4f46e5; /* индиго (indigo-600) — основной */ --accent-2: #7c3aed; /* фиолет (violet-600) — вторичный/градиенты */ --shadow: rgba(30, 27, 75, 0.12); --good: #15803d; /* green-700 */ --mid: #b45309; /* amber-700 — предупреждение (семантика) */ --bad: #dc2626; /* red-600 */ --ring: #6366f1; } /* ── Фон: базовый цвет на html (канва), аврора в body::before, контент выше ─ */ html[data-theme="light"] { background: linear-gradient(168deg, #f4f7fb 0%, #e7eef6 100%) fixed; } html[data-theme="dark"] { background: linear-gradient(165deg, #0b0f22 0%, #131233 100%) fixed; } html[data-theme] body, body { background: transparent; color: var(--text) !important; transition: color .3s ease; } /* Дрейфующая «аврора» — мягкое цветное свечение за контентом (оба темы). В светлой — очень бледная (чтобы текст оставался читаемым), в тёмной — заметнее. z-index:-1 + html-канва → видна над фоном, под контентом. GPU (transform). */ body::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(32% 38% at 20% 26%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 60%), radial-gradient(30% 36% at 80% 16%, color-mix(in srgb, var(--accent-2) 52%, transparent), transparent 60%), radial-gradient(34% 42% at 70% 84%, color-mix(in srgb, #8b5cf6 58%, transparent), transparent 62%), radial-gradient(28% 34% at 36% 78%, color-mix(in srgb, #6366f1 52%, transparent), transparent 60%); filter: blur(48px) saturate(125%); opacity: .42; /* Анимация авроры отключена: бесконечный дрейф размытого слоя держал GPU занятым постоянно и не давал кешировать backdrop-filter (тормозил ховер/скролл). Градиент остаётся статичным — выглядит так же, но композитится один раз. */ } html[data-theme="light"] body::before { opacity: .14; filter: blur(60px) saturate(115%); } @keyframes auroraDrift { 0% { transform: translate3d(-3%, -2%, 0) scale(1.05) rotate(0deg); } 50% { transform: translate3d(3%, 2%, 0) scale(1.13) rotate(5deg); } 100% { transform: translate3d(-2%, 3%, 0) scale(1.07) rotate(-4deg); } } /* ── Clean Data: чистая глубина вместо неона (только тёмная тема) ────────── */ html[data-theme="dark"] .pj-table-wrap, html[data-theme="dark"] .rp-panel, html[data-theme="dark"] .panel, html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .pj-project, html[data-theme="dark"] .rp-card { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7); } /* Липкая шапка таблиц — непрозрачная, чтобы строки не просвечивали на тёмном */ html[data-theme="dark"] .pj-table th, html[data-theme="dark"] .rp-table th, html[data-theme="dark"] .au-table th { background: #14182f; color: #b3b9d8; } html[data-theme="dark"] .pj-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* CTA-кнопки: ровная тень-elevation */ html[data-theme="dark"] .pj-save { color: #06121f; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -8px rgba(96,165,250,.55); } html[data-theme="dark"] .pj-save:hover { box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 10px 24px -8px rgba(96,165,250,.7); } html[data-theme="dark"] .pj-btn-ghost:hover { border-color: var(--accent); } /* Чистый скроллбар */ html[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b0f22; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #343a63; border-radius: 11px; border: 2px solid #0b0f22; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #444a7a; } html[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); color: #eaf2ff; } /* ── Светлая тема: переопределение «тёмных» утилит Tailwind ──────────────── */ html[data-theme="light"] .text-white { color: #0f172a !important; } html[data-theme="light"] .text-slate-100, html[data-theme="light"] .text-slate-200, html[data-theme="light"] .text-slate-300 { color: #1e293b !important; } html[data-theme="light"] .text-slate-400, html[data-theme="light"] .text-slate-500, html[data-theme="light"] .text-slate-600 { color: #64748b !important; } /* Тёмная тема: slate-500/600 на тёмном фоне легаси-форм проваливали контраст (2.36–3.75:1) → #94a3b8 (≈7:1) */ html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-slate-600 { color: #94a3b8 !important; } /* Светлая тема: охра --mid (#b9842f) как ТЕКСТ давала 3.28:1 (провал AA) → тёмная охра #8a5d12 (≈5.2:1). */ /* Заливки/бары/кромки (--mid там не нормируется) НЕ трогаем — только текстовые роли. */ html[data-theme="light"] .kpi-pct.mid .kpi-value, html[data-theme="light"] .o-due-soon, html[data-theme="light"] .o-days-soon, html[data-theme="light"] .pj-rd-chip.mid b, html[data-theme="light"] .imp-warn, html[data-theme="light"] .dc-badge.warn { color: #8a5d12; } html[data-theme="light"] .bg-slate-950, html[data-theme="light"] .bg-slate-900, html[data-theme="light"] .bg-slate-800 { background-color: #ffffff !important; } html[data-theme="light"] .bg-slate-700, html[data-theme="light"] .bg-slate-600 { background-color: #e2e8f0 !important; } html[data-theme="light"] .bg-slate-700.text-white, html[data-theme="light"] .bg-slate-600.text-white, html[data-theme="light"] .bg-slate-700 .text-white, html[data-theme="light"] .bg-slate-600 .text-white { color: #334155 !important; } html[data-theme="light"] .bg-white\/5, html[data-theme="light"] .bg-white\/\[0\.09\], html[data-theme="light"] .bg-white\/10 { background-color: rgba(15,23,42,0.035) !important; } html[data-theme="light"] .border-white\/5, html[data-theme="light"] .border-white\/10, html[data-theme="light"] .border-white\/20 { border-color: rgba(15,23,42,0.10) !important; } html[data-theme="light"] .menu-tile { background: var(--tile-bg) !important; border-color: var(--tile-border) !important; } html[data-theme="light"] .menu-tile .text-white { color: #0f172a !important; } /* ── Светлая тема: ДОБОРКА тёмных утилит, протекавших мимо переопределений (аудит 2026-07-13) ── Легаси свёрстан под тёмный фон; всё, чего нет в списке выше, в светлой теме рисовалось «белым по белому» (плашки/ховеры) или пастелью с контрастом 1.5–2:1 (цветной текст). */ /* Пастельный цветной текст → тёмные читаемые тона (AA ≥ 4.5:1 на белом) */ html[data-theme="light"] .text-emerald-300, html[data-theme="light"] .text-emerald-400, html[data-theme="light"] .text-green-400 { color: #047857 !important; } html[data-theme="light"] .text-amber-300, html[data-theme="light"] .text-amber-400 { color: #92400e !important; } html[data-theme="light"] .text-cyan-300, html[data-theme="light"] .text-cyan-400, html[data-theme="light"] .text-sky-300, html[data-theme="light"] .text-blue-300 { color: #0e7490 !important; } html[data-theme="light"] .text-violet-300, html[data-theme="light"] .text-violet-400 { color: #6d28d9 !important; } html[data-theme="light"] .text-red-300, html[data-theme="light"] .text-red-400, html[data-theme="light"] .text-rose-300, html[data-theme="light"] .text-rose-400 { color: #b91c1c !important; } /* ПРАВИЛО ЧИТАЕМОСТИ (жалоба 2026-07-21: «+7,7 млн ₽» red-200/90 слился с розовой заливкой): светлые оттенки текста 100/200 — тёмнотемные, на светлой теме затемняются ПРИНУДИТЕЛЬНО. Атрибут-селекторы ловят и варианты с opacity (text-red-200/90 и т.п.). Новый цветной текст — только оттенки 300+/токены темы (у них перекрытия выше). */ html[data-theme="light"] [class*="text-red-100"], html[data-theme="light"] [class*="text-red-200"], html[data-theme="light"] [class*="text-rose-100"], html[data-theme="light"] [class*="text-rose-200"] { color: #b91c1c !important; } html[data-theme="light"] [class*="text-amber-100"], html[data-theme="light"] [class*="text-amber-200"], html[data-theme="light"] [class*="text-yellow-100"], html[data-theme="light"] [class*="text-yellow-200"] { color: #92400e !important; } html[data-theme="light"] [class*="text-emerald-100"], html[data-theme="light"] [class*="text-emerald-200"], html[data-theme="light"] [class*="text-green-100"], html[data-theme="light"] [class*="text-green-200"] { color: #047857 !important; } html[data-theme="light"] [class*="text-cyan-100"], html[data-theme="light"] [class*="text-cyan-200"], html[data-theme="light"] [class*="text-sky-100"], html[data-theme="light"] [class*="text-sky-200"], html[data-theme="light"] [class*="text-blue-100"], html[data-theme="light"] [class*="text-blue-200"] { color: #0e7490 !important; } html[data-theme="light"] [class*="text-violet-100"], html[data-theme="light"] [class*="text-violet-200"] { color: #6d28d9 !important; } html[data-theme="light"] [class*="text-slate-200"], html[data-theme="light"] [class*="text-slate-100"] { color: #334155 !important; } /* Плашки на едва заметном белом фоне — сливались с фоном страницы */ html[data-theme="light"] .bg-white\/\[0\.012\], html[data-theme="light"] .bg-white\/\[0\.015\], html[data-theme="light"] .bg-white\/\[0\.02\], html[data-theme="light"] .bg-white\/\[0\.03\], html[data-theme="light"] .bg-white\/\[0\.04\], html[data-theme="light"] .bg-white\/\[0\.05\], html[data-theme="light"] .bg-white\/\[0\.06\], html[data-theme="light"] .bg-white\/\[0\.07\], html[data-theme="light"] .bg-white\/\[0\.08\] { background-color: rgba(15,23,42,0.045) !important; } html[data-theme="light"] .bg-white\/20 { background-color: rgba(15,23,42,0.10) !important; } /* Рамки-невидимки */ html[data-theme="light"] .border-white\/8, html[data-theme="light"] .border-white\/15, html[data-theme="light"] .border-white\/\[0\.04\], html[data-theme="light"] .border-white\/\[0\.05\], html[data-theme="light"] .border-white\/\[0\.06\], html[data-theme="light"] .border-white\/\[0\.07\] { border-color: rgba(15,23,42,0.12) !important; } /* Ховеры: hover:bg-white/10 компилируется в ОТДЕЛЬНЫЙ класс и не ловился правилом .bg-white\/10 — кнопки в светлой теме не откликались на наведение вовсе */ html[data-theme="light"] .hover\:bg-white\/5:hover, html[data-theme="light"] .hover\:bg-white\/10:hover, html[data-theme="light"] .hover\:bg-white\/20:hover, html[data-theme="light"] .hover\:bg-white\/\[0\.02\]:hover, html[data-theme="light"] .hover\:bg-white\/\[0\.03\]:hover, html[data-theme="light"] .hover\:bg-white\/\[0\.04\]:hover, html[data-theme="light"] .hover\:bg-white\/\[0\.06\]:hover, html[data-theme="light"] .hover\:bg-white\/\[0\.07\]:hover, html[data-theme="light"] .hover\:bg-white\/\[0\.08\]:hover, html[data-theme="light"] .hover\:bg-white\/\[0\.09\]:hover { background-color: rgba(15,23,42,0.07) !important; } /* Sticky-фоны таблиц (frozen-table.js теперь берёт переменные) */ html[data-theme="light"] { --tbl-bg: #ffffff; --tbl-bg-head: #eef2f6; } /* Подсветка результатов поиска () была невидима */ html[data-theme="light"] mark { color: #155e75 !important; background: rgba(14,116,144,0.16) !important; } /* ── Светлая тема: легаси-модалки (.modal-panel) — таблицы/поля/фоны ──────── */ /* backdrop светлее (был rgba(0,0,0,.6)) */ html[data-theme="light"] .modal-overlay { background: rgba(20, 33, 61, 0.32) !important; } html[data-theme="light"] .modal-panel { box-shadow: 0 18px 60px rgba(20, 50, 90, 0.18) !important; } /* заголовки таблиц (sticky-фон зашит по id в styles.css → перекрываем) */ html[data-theme="light"] #catalogTableWrap table thead th, html[data-theme="light"] #contractItemsWrap table thead th, html[data-theme="light"] #orderItemsWrap table thead th, html[data-theme="light"] #warehouseStockWrap table thead th, html[data-theme="light"] #needsMatrixWrap table thead th, html[data-theme="light"] #needsTableWrap table thead th, html[data-theme="light"] #needsTableWrap thead th, html[data-theme="light"] #whItemsSection table thead th, html[data-theme="light"] #shipmentTableWrap table thead th, html[data-theme="light"] .tbl-scroll table thead th, html[data-theme="light"] .sticky-thead thead th { background: #eef2f6 !important; color: #475569 !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; } /* строки таблиц */ html[data-theme="light"] #catalogTableWrap table tbody tr, html[data-theme="light"] #contractItemsWrap table tbody tr, html[data-theme="light"] #orderItemsWrap table tbody tr, html[data-theme="light"] #warehouseStockWrap table tbody tr, html[data-theme="light"] #needsMatrixWrap table tbody tr, html[data-theme="light"] #needsTableWrap table tbody tr, html[data-theme="light"] #needsTableWrap tbody tr, html[data-theme="light"] #shipmentTableWrap table tbody tr, html[data-theme="light"] .tbl-scroll table tbody tr { background: #ffffff !important; } /* итоговые строки (tfoot) */ html[data-theme="light"] #contractItemsWrap table tfoot td, html[data-theme="light"] #orderItemsWrap table tfoot td, html[data-theme="light"] .tbl-scroll table tfoot td { background: #eef2f6 !important; } /* поля ввода/селекты/textarea внутри легаси-модалок */ html[data-theme="light"] .modal-panel input:not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] .modal-panel select, html[data-theme="light"] .modal-panel textarea { background-color: #ffffff !important; color: #1e293b !important; border: 1px solid rgba(15, 23, 42, 0.14) !important; } html[data-theme="light"] .modal-panel input::placeholder, html[data-theme="light"] .modal-panel textarea::placeholder { color: #94a3b8 !important; } /* hover строк */ html[data-theme="light"] .modal-panel tbody tr:hover { background: #f5f8fb !important; } /* «тёмные» поверхности по opacity-вариантам Tailwind (шапки/тулбары панелей, напр. .catalog-panel с bg-slate-950/80) — глобально в светлой теме */ html[data-theme="light"] .bg-slate-950\/40, html[data-theme="light"] .bg-slate-950\/50, html[data-theme="light"] .bg-slate-950\/60, html[data-theme="light"] .bg-slate-950\/70, html[data-theme="light"] .bg-slate-950\/80, html[data-theme="light"] .bg-slate-950\/90, html[data-theme="light"] .bg-slate-900\/40, html[data-theme="light"] .bg-slate-900\/50, html[data-theme="light"] .bg-slate-900\/60, html[data-theme="light"] .bg-slate-900\/70, html[data-theme="light"] .bg-slate-900\/80, html[data-theme="light"] .bg-slate-800\/40, html[data-theme="light"] .bg-slate-800\/50, html[data-theme="light"] .bg-slate-800\/60 { background-color: rgba(248, 250, 252, 0.88) !important; } html[data-theme="light"] .bg-black\/20, html[data-theme="light"] .bg-black\/30, html[data-theme="light"] .bg-black\/40 { background-color: rgba(15, 23, 42, 0.04) !important; } /* панели-обёртки на весь экран (каталог товаров и т.п.) */ html[data-theme="light"] .catalog-panel { background-color: #f4f7fa !important; } /* Bitrix24-стиль: белые карточки с мягкими тенями (вместо рамок) в светлой теме */ html[data-theme="light"] .menu-tile, html[data-theme="light"] .kpi-card, html[data-theme="light"] .panel, html[data-theme="light"] .pj-project, html[data-theme="light"] .pj-cab, html[data-theme="light"] .rp-card, html[data-theme="light"] .rp-panel, html[data-theme="light"] .pj-rd-chip, html[data-theme="light"] .stock-chip, html[data-theme="light"] .rp-table-wrap, html[data-theme="light"] .pj-table-wrap, html[data-theme="light"] .au-table-wrap { box-shadow: 0 1px 2px rgba(9, 30, 66, 0.10), 0 3px 10px rgba(9, 30, 66, 0.05); } html[data-theme="light"] .menu-tile:hover, html[data-theme="light"] .pj-cab:hover, html[data-theme="light"] .pj-project:hover, html[data-theme="light"] .rp-card:hover, html[data-theme="light"] .kpi-card:hover { box-shadow: 0 8px 22px rgba(2, 150, 220, 0.18) !important; } /* ── Светлая тема: тёплая «васи»-бумага (кремовый тон) — спокойно, без сетки ───── Основа — тёплый кремовый градиент (настоящая васи — экрю, не белая), поэтому фон ЗАМЕТЕН, а белые карточки/сайдбар выделяются как бумажные панели. Сверху — мягкое киноварное свечение в углах (далёкое солнце/печать 印) и светлый центр листа, чтобы рабочая зона оставалась светлой. Никаких линий — глаз не дробится. */ /* светлый фон-канва задан на html выше; body прозрачный, аврора в body::before */ /* сайдбар: непрозрачный фон без backdrop-filter — блюр над движущимся фоном переблюривался на каждый ховер/скролл (главный тормоз навигации) */ html[data-theme="light"] #sidebar { background: rgba(255,255,255,.94) !important; } /* плотные таблицы — чистый белый фон */ html[data-theme="light"] .rp-table-wrap, html[data-theme="light"] .pj-table-wrap, html[data-theme="light"] .au-table-wrap { background: #ffffff !important; } /* карточки/панели — белые с мягкой границей и тонкой слоёной тенью (Clean Data) */ html[data-theme="light"] .menu-tile, html[data-theme="light"] .kpi-card, html[data-theme="light"] .panel, html[data-theme="light"] .pj-cab, html[data-theme="light"] .pj-project, html[data-theme="light"] .rp-card, html[data-theme="light"] .rp-panel, html[data-theme="light"] .pj-table-wrap, html[data-theme="light"] .rp-table-wrap, html[data-theme="light"] .au-table-wrap { border: 1px solid var(--tile-border) !important; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06) !important; } /* ── Плитки меню: вход со сдвигом, ховер-подъём, динамичная иконка ───────── */ .menu-tile { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, background-color .3s, border-color .3s !important; animation: tileIn .5s cubic-bezier(.16,1,.3,1) both; } .menu-tile:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 34px -10px var(--shadow) !important; border-color: var(--accent) !important; } .menu-tile:active { transform: translateY(-1px) scale(.98) !important; } /* эмодзи-иконка в плитке (первый span с aria-hidden) — «парит» только при наведении */ /* (бесконечный floatY + drop-shadow на 10–12 иконках = постоянная фоновая перерисовка → лаги) */ .menu-tile > span[aria-hidden="true"] { display: inline-block; transition: transform .35s cubic-bezier(.16,1,.3,1), filter .35s; filter: drop-shadow(0 4px 8px var(--shadow)); } .menu-tile:hover > span[aria-hidden="true"] { transform: scale(1.28) rotate(-7deg); } /* стаггер появления плиток */ .menu-tile:nth-child(1){animation-delay:.02s} .menu-tile:nth-child(2){animation-delay:.06s} .menu-tile:nth-child(3){animation-delay:.10s} .menu-tile:nth-child(4){animation-delay:.14s} .menu-tile:nth-child(5){animation-delay:.18s} .menu-tile:nth-child(6){animation-delay:.22s} .menu-tile:nth-child(7){animation-delay:.26s} .menu-tile:nth-child(8){animation-delay:.30s} .menu-tile:nth-child(9){animation-delay:.34s} .menu-tile:nth-child(10){animation-delay:.38s} .menu-tile:nth-child(11){animation-delay:.42s} .menu-tile:nth-child(12){animation-delay:.46s} /* ── Лоадер загрузки данных ─────────────────────────────────────────────── */ #appLoader { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; background: radial-gradient(900px 600px at 50% 30%, var(--glow), transparent 60%), linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); transition: opacity .5s ease; } #appLoader.hide { opacity: 0; pointer-events: none; } #appLoader .loader-logo { font-size: 2.75rem; animation: floatY 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 14px var(--shadow)); } #appLoader .loader-ring { width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--tile-border); border-top-color: var(--accent); animation: spin .85s linear infinite; } #appLoader .loader-text { font-family: var(--font-display, sans-serif); color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .16em; animation: pulseGlow 1.6s ease-in-out infinite; } /* Чистый лоадер: тонкое кольцо + полоса прогресса */ #appLoader .loader-bar { width: 230px; height: 6px; border-radius: 99px; background: var(--tile-border); overflow: hidden; } #appLoader .loader-bar > span { display: block; height: 100%; width: 42%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2))); animation: barSlide 1.25s ease-in-out infinite; } @keyframes barSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } /* ── Переключатель темы ─────────────────────────────────────────────────── */ #themeToggle { position: fixed; top: .75rem; left: .75rem; z-index: 250; width: 38px; height: 38px; border-radius: .7rem; display: flex; align-items: center; justify-content: center; background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); font-size: 1.05rem; cursor: pointer; transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .3s, box-shadow .25s; backdrop-filter: blur(6px); } #themeToggle:hover { transform: rotate(25deg) scale(1.1); box-shadow: 0 8px 20px -6px var(--shadow); } #themeToggle:active { transform: scale(.92); } /* ── Keyframes ──────────────────────────────────────────────────────────── */ @keyframes tileIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulseGlow{ 0%,100% { opacity: .5; } 50% { opacity: 1; } } /* уважение к prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .menu-tile, .menu-tile > span[aria-hidden="true"], #appLoader .loader-logo, #appLoader .loader-ring, #appLoader .loader-text, html[data-theme="light"] body { animation: none !important; } } /* ============================================================================ ДАШБОРД (KPI-strip + разрезы) ============================================================================ */ :root { --good: #22c55e; --mid: #f59e0b; --bad: #ef4444; } .dash { margin: 0 0 1.5rem; animation: tileIn .5s cubic-bezier(.16,1,.3,1) both; } .dash-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; } .dash-title { font-size: 1.35rem; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.01em; } .dash-scope { color: var(--accent); } .dash-sub { font-size: .78rem; color: var(--muted); margin: .2rem 0 0; } .dash-refresh { width: 36px; height: 36px; border-radius: .65rem; flex-shrink: 0; background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--muted); font-size: 1.05rem; cursor: pointer; transition: transform .5s, color .2s; } .dash-refresh:hover { transform: rotate(180deg); color: var(--accent); } .dash-loading, .dash-error { color: var(--muted); font-size: .85rem; padding: 1.5rem; display: flex; align-items: center; gap: .6rem; } .dash-error { color: var(--bad); } /* KPI hero-strip */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; } .kpi-card { position: relative; overflow: hidden; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .9rem; padding: 1rem 1.1rem; transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .22s; animation: kpiRise .5s cubic-bezier(.16,1,.3,1) both; } /* тонкая акцентная полоса сверху — проявляется на ховере (Clean Data) */ .kpi-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16,1,.3,1); } .kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--tile-border)); } .kpi-card:hover::before { transform: scaleX(1); } .kpi-grid .kpi-card:nth-child(1){animation-delay:.03s} .kpi-grid .kpi-card:nth-child(2){animation-delay:.08s} .kpi-grid .kpi-card:nth-child(3){animation-delay:.13s} .kpi-grid .kpi-card:nth-child(4){animation-delay:.18s} .kpi-grid .kpi-card:nth-child(5){animation-delay:.23s} .kpi-grid .kpi-card:nth-child(6){animation-delay:.28s} .kpi-top { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; } .kpi-ic { display: inline-flex; align-items: center; color: var(--accent); } .kpi-ic .d-svg { width: 18px; height: 18px; } .kpi-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .kpi-value { font-size: 1.85rem; font-weight: 800; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kpi-unit { font-size: 1rem; font-weight: 700; color: var(--muted); margin-left: 2px; } .kpi-sub { font-size: .72rem; color: var(--muted); margin-top: .45rem; } .kpi-bar { height: 6px; border-radius: 99px; background: var(--tile-border); margin-top: .6rem; overflow: hidden; } .kpi-bar > span { display: block; height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.16,1,.3,1); } .kpi-pct.ok .kpi-bar > span { background: var(--good); } .kpi-pct.mid .kpi-bar > span { background: var(--mid); } .kpi-pct.low .kpi-bar > span { background: var(--bad); } .kpi-pct.ok .kpi-value { color: var(--good); } .kpi-pct.mid .kpi-value { color: var(--mid); } .kpi-pct.low .kpi-value { color: var(--bad); } /* Панели и бары */ .dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: .8rem; } @media (max-width: 760px) { .dash-cols { grid-template-columns: 1fr; } } .panel { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 1rem; padding: 1.1rem 1.2rem; } .panel-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .9rem; } .bars { display: flex; flex-direction: column; gap: .6rem; } .bar-row { display: grid; grid-template-columns: minmax(72px, 38%) 1fr auto; align-items: center; gap: .6rem; } .bar-name { font-size: .76rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-track { height: 9px; border-radius: 99px; background: var(--tile-border); overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .8s cubic-bezier(.16,1,.3,1); } .bar-fill.accent { background: linear-gradient(90deg, var(--accent), #818cf8); } .bar-val { font-size: .74rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; } /* Недельный отчёт: товарная группа → категория (Главная) */ .wr-panel { margin-bottom: .8rem; } .wr-wrap { overflow-x: auto; } .wr-table { width: 100%; border-collapse: collapse; font-size: .8rem; } .wr-table th { text-align: left; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .3rem .6rem; border-bottom: 1px solid var(--tile-border); position: sticky; top: 0; background: var(--tile-bg); } .wr-table th.num, .wr-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .wr-table td { padding: .34rem .6rem; color: var(--text); } .wr-grp td { font-weight: 700; background: color-mix(in srgb, var(--accent) 7%, transparent); border-top: 1px solid var(--tile-border); } .wr-grp .wr-gname { color: var(--accent-2); } .wr-cat .wr-cname { padding-left: 1.4rem; color: var(--muted); font-size: .76rem; } .wr-cat td.num { color: var(--text); font-weight: 600; } .wr-cat:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); } /* Билинг проекта на Главной (деньги/потеряшки) */ .dash-billing { margin: 0 0 1.1rem; } .dash-billing .panel { margin-bottom: .9rem; } /* Компактная денежная полоса (вместо больших KPI-карточек) */ .dash-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .55rem; margin: .2rem 0 .5rem; } .dm-cell { display: flex; flex-direction: column; gap: .12rem; padding: .5rem .7rem; border: 1px solid var(--tile-border); border-left: 3px solid var(--tile-border); border-radius: .5rem; background: var(--tile-bg); } .dm-cell .dm-l { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .dm-cell .dm-v { font-family: var(--font-mono, monospace); font-size: 1.08rem; font-weight: 700; color: var(--text); line-height: 1.15; } .dm-cell .dm-s { font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; } .dm-cell.accent { border-left-color: var(--accent); } .dm-cell.ok { border-left-color: var(--good); } .dm-cell.warn { border-left-color: var(--bad); } .dm-cell.warn .dm-v { color: var(--bad); } .dash-note { font-size: .72rem; color: var(--muted); margin: 0 0 .8rem; } .dash-rub { display: block; font-size: .66rem; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; } .dash-addr { display: block; font-size: .68rem; color: var(--muted); font-weight: 400; } .dash-rn { font-family: var(--font-mono, monospace); font-weight: 600; color: var(--accent-2); white-space: nowrap; } .dash-total td { font-weight: 700; border-top: 2px solid var(--tile-border); background: color-mix(in srgb, var(--accent) 6%, transparent); } .dash-total .wr-gname { color: var(--accent-2); } /* Пул проектов (2026-07-08): объединённая строка + разворачиваемая детализация */ .dash-pool-row { cursor: pointer; } .dash-pool-row:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); } .dash-pool-row td { font-weight: 700; } .dash-pool-row .wr-gname { color: var(--accent-2); } .dash-pool-arrow { display: inline-block; font-size: .6rem; color: var(--muted); transition: transform .15s ease; margin-right: .3rem; } .dash-pool-row.open .dash-pool-arrow { transform: rotate(90deg); } .dash-pool-sub .wr-cname { padding-left: 1.4rem; } .dash-pool-link { display: inline-block; margin: -.2rem 0 .6rem; padding: .2rem .5rem; border: none; background: none; color: var(--accent-2); font-size: .74rem; font-weight: 600; cursor: pointer; } .dash-pool-link:hover { text-decoration: underline; } .dash-loss { color: var(--bad); font-weight: 700; } .dash-scroll { max-height: 340px; overflow: auto; } .dash-search { width: min(320px, 100%); margin: 0 0 .5rem; padding: .34rem .6rem; border: 1px solid var(--tile-border); border-radius: .5rem; background: var(--tile-bg); color: var(--text); font-size: .8rem; } .dash-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .dash-frow:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); } .dash-billing .wr-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--muted) 4%, transparent); } /* Редактор товарных групп (Настройки) */ .pg-groups { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .9rem; } .pg-grow { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: .4rem; } .pg-gname { font-size: .82rem; font-weight: 600; width: 100%; } .pg-gcount { font-size: .7rem; color: var(--muted); white-space: nowrap; } .pg-mini { border: 1px solid var(--tile-border); background: var(--tile-bg); color: var(--text); border-radius: .4rem; width: 26px; height: 26px; cursor: pointer; font-size: .8rem; line-height: 1; } .pg-mini:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-2); } .pg-mini:disabled { opacity: .35; cursor: default; } .pg-del:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); } .pg-add { display: flex; gap: .4rem; margin-top: .3rem; } .pg-add .pj-inp { flex: 1; } .pg-cats-head { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .4rem 0 .5rem; } .pg-cats { display: flex; flex-direction: column; gap: .35rem; max-height: 38vh; overflow-y: auto; } .pg-crow { display: grid; grid-template-columns: 1fr 220px; align-items: center; gap: .6rem; } .pg-cname { font-size: .8rem; color: var(--text); } .pg-cn { font-size: .68rem; color: var(--muted); } .pg-csel { font-size: .78rem; padding: .3rem .4rem; border: 1px solid var(--tile-border); border-radius: .5rem; background: var(--bg); color: var(--text); } /* Склад-чипы */ .stock-row { display: flex; flex-wrap: wrap; gap: .7rem; } .stock-chip { display: flex; flex-direction: column; gap: .1rem; padding: .7rem 1rem; border-radius: .8rem; border: 1px solid var(--tile-border); background: var(--tile-bg); min-width: 120px; } .stock-chip.pos { border-color: rgba(34,197,94,.4); } .stock-chip.neg { border-color: rgba(239,68,68,.4); } .stock-wh { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .stock-bal { font-size: 1.4rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .stock-chip.pos .stock-bal { color: var(--good); } .stock-chip.neg .stock-bal { color: var(--bad); } .stock-cap { font-size: .66rem; color: var(--muted); } .loader-ring.small { width: 22px; height: 22px; border-width: 3px; } .muted { color: var(--muted); font-size: .8rem; } /* ============================================================================ РАЗДЕЛ «ПРОЕКТЫ» → ЛК школ → приёмка (оверлей) ============================================================================ */ #projectsOverlay { position: fixed; inset: 0; z-index: 300; display: none; overflow-y: auto; background: radial-gradient(900px 600px at 50% -5%, var(--glow), transparent 60%), linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); } .pj-wrap { max-width: 1320px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; } /* разделы с широкими таблицами (Склад, Финансы) — шире, чтобы все колонки помещались */ /* Окна данных занимают всю рабочую область (не «предпросмотр» с пустой половиной) */ #warehouseOverlay .pj-wrap, #financeOverlay .pj-wrap, #ordersOverlay .pj-wrap, #shippingOverlay .pj-wrap, #actsOverlay .pj-wrap, #assemblyOverlay .pj-wrap, #projectsOverlay .pj-wrap, #reportsOverlay .rp-wrap, #auditOverlay .au-wrap, #managersOverlay .pj-wrap, #announcementsOverlay .pj-wrap, #raznaryadkaOverlay .pj-wrap, #deliveryOverlay, #prioritiesOverlay .pj-wrap, #lotsOverlay .pj-wrap, #thOverlay .th-wrap { max-width: min(1840px, 96vw); } /* Таблицы данных тянутся по высоте экрана */ #financeOverlay .pj-table-wrap, #warehouseOverlay .pj-table-wrap, #reportsOverlay .rp-table-wrap, #auditOverlay .au-table-wrap, #managersOverlay .pj-table-wrap, #announcementsOverlay .pj-table-wrap { max-height: 76vh; overflow: auto; } .pj-head { display: flex; align-items: center; gap: 1rem; margin: .25rem 0 1.5rem; } .pj-back { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .7rem; padding: .5rem .9rem; font-size: .82rem; cursor: pointer; transition: border-color .2s; } .pj-back:hover { border-color: var(--accent); } .pj-title { font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.01em; } .pj-loading, .pj-error { color: var(--muted); padding: 2rem; } .pj-error { color: var(--bad); } .pj-projects { display: grid; gap: 1rem; } .pj-project { position: relative; text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 1.1rem; padding: 1.3rem 1.5rem; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; } .pj-proj-del { position: absolute; top: .55rem; right: .55rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: .5rem; font-size: .82rem; line-height: 1; color: var(--muted); background: transparent; border: 1px solid transparent; opacity: 0; transition: opacity .15s, color .15s, background .15s, border-color .15s; z-index: 2; } .pj-project:hover .pj-proj-del, .pj-proj-del:focus-visible { opacity: 1; } .pj-proj-del:hover { color: #fff; background: var(--bad); border-color: var(--bad); } .pj-project:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 34px -12px var(--shadow); } .pj-proj-top { display: flex; align-items: center; justify-content: space-between; } .pj-proj-name { font-size: 1.4rem; font-weight: 800; color: var(--text); } .pj-proj-status { font-size: .72rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: .25rem .6rem; border-radius: 99px; } .pj-proj-desc { color: var(--muted); font-size: .85rem; margin: .4rem 0 1rem; } .pj-proj-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: .9rem; } .pj-proj-stats div { display: flex; flex-direction: column; } .pj-proj-stats b { font-size: 1.3rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .pj-proj-stats span { font-size: .7rem; color: var(--muted); } .pj-cabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: .8rem; } .pj-cab { text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 1rem; padding: 1rem 1.1rem; cursor: pointer; transition: transform .2s, border-color .2s; } .pj-cab:hover { transform: translateY(-2px); border-color: var(--accent); } .pj-cab-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .pj-cab-name { font-weight: 700; color: var(--text); font-size: .9rem; } .pj-cab-addr { font-size: .72rem; color: var(--muted); margin: .3rem 0 .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* финансирование (целевая субсидия) адреса/школы в ЛК */ .pj-cab-fin { font-size: .7rem; font-weight: 600; color: var(--accent-2); margin: -.3rem 0 .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pj-sec-fin { font-size: .72rem; font-weight: 600; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 99px; padding: .12rem .55rem; margin-left: .4rem; vertical-align: 1px; } /* вкладка «Финансирования» проекта */ .pj-fin-split { font-size: .7rem; color: var(--muted); margin-top: .2rem; } .pj-fin-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .85rem; padding: .2rem .4rem; border-radius: 6px; } .pj-fin-del:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); } /* вкладка «Реализация» + селектор финансирования адреса в ЛК */ .rz-ctr { display: inline-block; font-size: .72rem; padding: .12rem .5rem; margin: .1rem .15rem .1rem 0; border-radius: 99px; background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--text); white-space: nowrap; } .rz-offer { display: inline-block; font-size: .72rem; padding: .12rem .5rem; margin: .1rem .15rem .1rem 0; border-radius: 99px; background: color-mix(in srgb, var(--mid) 14%, transparent); color: var(--text); white-space: nowrap; } .rz-def { color: var(--bad); } .rz-take { border: 0; border-radius: 8px; padding: .1rem .5rem; margin-left: .3rem; font-size: .7rem; font-weight: 700; cursor: pointer; background: var(--accent); color: #fff; } .rz-take:hover { filter: brightness(1.08); } .rz-take:disabled { opacity: .6; cursor: default; } .pj-sec-finsel { font-size: .72rem; font-weight: 600; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--tile-border); border-radius: 99px; padding: .12rem .5rem; margin-left: .4rem; vertical-align: 1px; max-width: 340px; } /* заявка поставщику: разнесение по целевой программе */ .o-fin-alloc { margin: .5rem 0 .8rem; } .o-fin-alloc > summary { cursor: pointer; font-size: .82rem; color: var(--muted); } .o-fin-alloc > summary b { color: var(--text); } /* Плитки показателей: подпись сверху мелким, значение снизу крупным. Сетка в 2 колонки — карточки выравниваются между собой независимо от длины подписи, и ничего не обрезается (ui-ux-pro-max: truncation-strategy). */ .pj-cab-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; font-size: .74rem; color: var(--muted); margin: .1rem 0 .6rem; } /* Значение сверху, подпись снизу — как в чипах стадий и показателях проекта. Так числа стоят на ОДНОЙ линии независимо от того, во сколько строк легла подпись. */ /* По центру — как в чипах стадий: подписи разной длины перестают выглядеть рвано, а значения читаются столбиком по середине ячейки. */ .pj-cab-nums > span { display: flex; flex-direction: column; align-items: center; gap: .05rem; min-width: 0; text-align: center; } .pj-cab-nums i { font-style: normal; font-size: .67rem; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; hyphens: auto; } /* tabular-nums: цифры не пляшут по ширине между карточками (правило number-tabular) */ .pj-cab-nums b { color: var(--text); font-size: 1rem; font-weight: 700; line-height: 1.2; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Проценты — та же сетка, но тише: это производные, а не факты */ .pj-cab-nums-sub { margin: .45rem 0 .5rem; } .pj-cab-nums-sub b { font-size: .82rem; font-weight: 600; } .pj-badge { font-size: .64rem; font-weight: 700; padding: .2rem .5rem; border-radius: 99px; white-space: nowrap; } .pj-badge.ok { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); } .pj-badge.mid { color: var(--mid); background: color-mix(in srgb, var(--mid) 16%, transparent); } .pj-badge.low { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); } .pj-badge.muted { color: var(--muted); background: var(--tile-border); } /* Светлая тема: тёмный «чернильный» текст бейджей для контраста (сами тинты-фоны оставляем) */ html[data-theme="light"] .pj-badge.ok { color: #15803d; } html[data-theme="light"] .pj-badge.mid { color: #b45309; } html[data-theme="light"] .pj-badge.low { color: #dc2626; } html[data-theme="light"] .pj-rd-chip.mid b { color: #b45309; } .pj-bar { height: 7px; border-radius: 99px; background: var(--tile-border); overflow: hidden; } .pj-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .8s cubic-bezier(.16,1,.3,1); } .pj-bar > span.ok { background: var(--good); } .pj-bar > span.mid { background: var(--mid); } .pj-bar > span.low { background: var(--bad); } .pj-bar > span.muted { background: var(--muted); } .pj-cab-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .pj-cab-sub { color: var(--muted); font-size: .82rem; } .pj-save { background: linear-gradient(135deg, var(--accent-2), var(--accent)); border: none; color: #00211d; font-weight: 700; border-radius: .7rem; padding: .6rem 1.2rem; cursor: pointer; font-size: .85rem; } .pj-save:disabled { opacity: .6; cursor: default; } /* Вторичная кнопка (ghost) — чтобы рядом не конкурировали два первичных CTA */ .pj-btn-ghost { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); font-weight: 600; border-radius: .7rem; padding: .6rem 1.1rem; cursor: pointer; font-size: .85rem; transition: border-color .2s, color .2s; } .pj-btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .pj-btn-ghost:disabled { opacity: .6; cursor: default; } /* Видимый фокус для клавиатуры (доступность) — только keyboard (:focus-visible), мышь не трогаем */ :where(button, a, select, input, [role="tab"], [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .pj-readonly { color: var(--muted); font-size: .8rem; } /* Готовность школ */ .pj-cab-headl { display: flex; flex-direction: column; gap: .4rem; } .pj-rd-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: .6rem; margin-bottom: 1rem; } .pj-rd-chip { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; padding: .6rem .55rem; border-radius: .8rem; border: 1px solid var(--tile-border); background: var(--tile-bg); } .pj-rd-chip b { font-size: 1.3rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .pj-rd-chip span { font-size: .66rem; line-height: 1.25; color: var(--muted); margin-top: .15rem; text-align: center; overflow-wrap: anywhere; hyphens: auto; } .pj-rd-chip.ok b { color: var(--good); } .pj-rd-chip.mid b { color: var(--mid); } .pj-rd-chip.low b { color: var(--accent); } .pj-rd-chip.bad b { color: var(--bad); } .pj-cab-rd { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--muted); margin-bottom: .5rem; } .pj-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; flex-shrink: 0; } .pj-dot.ok { background: var(--good); } .pj-dot.mid { background: var(--mid); } .pj-dot.low { background: var(--accent); } .pj-dot.bad { background: var(--bad); } .pj-dot.muted { background: var(--muted); } .pj-rd-set, .pj-rd-show { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .45rem; } .pj-rd-set select { background: var(--bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .5rem; padding: .3rem .5rem; font-size: .82rem; } .pj-rd-show b { color: var(--text); } /* ============================================================================ ЛЕВЫЙ САЙДБАР (стиль Bitrix24) ============================================================================ */ :root { --sidebar-w: 250px; } #sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 400; background: var(--tile-bg); border-right: 1px solid var(--tile-border); display: flex; flex-direction: column; overflow-y: auto; } html[data-theme="dark"] #sidebar { background: rgba(16, 18, 42, .97); border-right: 1px solid #262a4a; box-shadow: 1px 0 0 rgba(255,255,255,.02); } html[data-theme="dark"] .sb-logo { border-bottom: 1px solid #262a4a; } html[data-theme="dark"] .sb-item { position: relative; } html[data-theme="dark"] .sb-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } html[data-theme="dark"] .sb-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #cfe2ff; } html[data-theme="dark"] .sb-item.active .sb-ic, html[data-theme="dark"] .sb-item.active:hover .sb-ic { color: var(--accent); } html[data-theme="dark"] .sb-item.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 4px 4px 0; background: var(--accent); } html[data-theme="dark"] .sb-bottom { border-top: 1px solid #262a4a; background: rgba(8,14,26,.5); } html[data-theme="dark"] .sb-mini:hover { border-color: var(--accent); } .sb-logo { display: flex; align-items: center; gap: .6rem; padding: 1.1rem; border-bottom: 1px solid var(--tile-border); } .sb-logo-ic { display: flex; color: #1e2340; } /* «чернила» кубиков (светлая тема) */ html[data-theme="dark"] .sb-logo-ic { color: #eef0fb; } /* светлые кубики на тёмной */ .sb-logo-ic .sb-svg { width: 34px; height: 30px; } .sb-logo-tx b { display: block; color: var(--text); font-size: 1.02rem; font-weight: 800; letter-spacing: .045em; } .sb-logo-tx small { color: var(--muted); font-size: .62rem; line-height: 1.25; display: block; margin-top: 1px; } .sb-nav { flex: 1; padding: .6rem .5rem; display: flex; flex-direction: column; gap: .12rem; } .sb-item { display: flex; align-items: center; gap: .7rem; padding: .58rem .7rem; border: none; background: none; border-radius: .6rem; color: var(--text); font-size: .86rem; cursor: pointer; text-align: left; transition: background-color .15s, color .15s; } .sb-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .sb-item.active { background: var(--accent); color: #fff; } .sb-svg { width: 18px; height: 18px; display: block; } .sb-ic { display: flex; align-items: center; justify-content: center; width: 1.5rem; color: var(--muted); transition: color .15s; } .sb-item:hover .sb-ic { color: var(--accent); } .sb-item.active .sb-ic, .sb-item.active:hover .sb-ic { color: #fff; } .sb-bottom { border-top: 1px solid var(--tile-border); padding: .7rem; display: flex; flex-direction: column; gap: .55rem; } .sb-user { display: flex; align-items: center; gap: .5rem; } .sb-uic { display: flex; color: var(--muted); } .sb-uic .sb-svg { width: 22px; height: 22px; } .sb-utx b { display: block; color: var(--text); font-size: .76rem; } .sb-utx small { color: var(--muted); font-size: .64rem; word-break: break-all; } .sb-actions { display: flex; gap: .5rem; } .sb-mini { flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem; background: var(--bg); border: 1px solid var(--tile-border); border-radius: .5rem; padding: .45rem; cursor: pointer; color: var(--muted); font-size: .76rem; transition: color .15s, border-color .15s; } .sb-mini .sb-svg { width: 16px; height: 16px; } .sb-mini:hover { color: var(--accent); border-color: var(--accent); } body.has-sidebar { padding-left: var(--sidebar-w); } body.has-sidebar #themeToggle, body.has-sidebar #logoutBtn { display: none !important; } body.has-sidebar #homeTiles { display: none; } /* все полноэкранные оверлеи/модалки сдвигаем правее сайдбара, чтобы он их не перекрывал */ body.has-sidebar #cabinetOverlay, body.has-sidebar #registrationsOverlay, body.has-sidebar #staffOverlay, body.has-sidebar #tasksOverlay, body.has-sidebar #projectsOverlay, body.has-sidebar #reportsOverlay, body.has-sidebar #auditOverlay, body.has-sidebar #ordersOverlay, body.has-sidebar #shippingOverlay, body.has-sidebar #actsOverlay, body.has-sidebar #assemblyOverlay, body.has-sidebar #warehouseOverlay, body.has-sidebar #financeOverlay, body.has-sidebar #paymentsOverlay, body.has-sidebar #managersOverlay, body.has-sidebar #announcementsOverlay, body.has-sidebar #docCheckOverlay, body.has-sidebar #raznaryadkaOverlay, body.has-sidebar #deliveryOverlay, #prioritiesOverlay, body.has-sidebar #lotsOverlay, body.has-sidebar #thOverlay, body.has-sidebar .modal-overlay { left: var(--sidebar-w); } @media (max-width: 920px) { #sidebar { display: none; } body.has-sidebar { padding-left: 0; } body.has-sidebar #homeTiles { display: grid; } body.has-sidebar #cabinetOverlay, body.has-sidebar #registrationsOverlay, body.has-sidebar #staffOverlay, body.has-sidebar #tasksOverlay, body.has-sidebar #projectsOverlay, body.has-sidebar #reportsOverlay, body.has-sidebar #auditOverlay, body.has-sidebar #ordersOverlay, body.has-sidebar #shippingOverlay, body.has-sidebar #actsOverlay, body.has-sidebar #assemblyOverlay, body.has-sidebar #warehouseOverlay, body.has-sidebar #financeOverlay, body.has-sidebar #paymentsOverlay, body.has-sidebar #managersOverlay, body.has-sidebar #announcementsOverlay, body.has-sidebar #announcementsOverlay, body.has-sidebar #docCheckOverlay, body.has-sidebar #raznaryadkaOverlay, body.has-sidebar #deliveryOverlay, #prioritiesOverlay, body.has-sidebar #deliveryOverlay, #prioritiesOverlay, body.has-sidebar #lotsOverlay, body.has-sidebar #thOverlay, body.has-sidebar .modal-overlay { left: 0; } } /* ════════════════════════════════════════════════════════════════════════ C1/H1: легаси-разделы открываются как ПОЛНОЦЕННАЯ СТРАНИЦА, а не модалка поверх живого дашборда. Фон непрозрачный → дашборд не просвечивает и не скроллится сзади. Применяется ТОЛЬКО к разделам (не к формам/диалогам). ════════════════════════════════════════════════════════════════════════ */ body.has-sidebar #catalogModal, body.has-sidebar #recipientsModal, body.has-sidebar #needsMatrixModal, body.has-sidebar #contractsModal, body.has-sidebar #suppliersModal { background: var(--bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* светлая тема: легаси-разделы — та же тёплая «васи», что и фон главной (цельность) */ html[data-theme="light"] body.has-sidebar #catalogModal, html[data-theme="light"] body.has-sidebar #recipientsModal, html[data-theme="light"] body.has-sidebar #needsMatrixModal, html[data-theme="light"] body.has-sidebar #contractsModal, html[data-theme="light"] body.has-sidebar #suppliersModal { background: radial-gradient(1000px 680px at 100% -12%, rgba(29, 78, 216, .045), transparent 62%), linear-gradient(160deg, #f4f7fb 0%, #e7eef6 100%) !important; } /* карточные разделы растягиваем во всю рабочую область (как новые разделы) */ body.has-sidebar #recipientsModal, body.has-sidebar #contractsModal, body.has-sidebar #suppliersModal { align-items: stretch !important; padding: 1.1rem 1.4rem !important; } body.has-sidebar #recipientsModal > .modal-panel, body.has-sidebar #contractsModal > .modal-panel, body.has-sidebar #suppliersModal > .modal-panel { max-width: 1080px !important; width: 100% !important; max-height: none !important; height: 100% !important; margin: 0 auto !important; } /* C5: действия каталога (импорт/категории/группы) в шапке самого каталога */ .cat-hdr-act { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--tile-border); background: var(--tile-bg); color: var(--text); border-radius: .7rem; padding: .55rem .85rem; font-size: .82rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; } .cat-hdr-act:hover { border-color: var(--accent); color: var(--accent); } .pj-table-wrap { overflow-x: auto; border: 1px solid var(--tile-border); border-radius: 1rem; } .pj-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .pj-table th { text-align: left; padding: .7rem .9rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--tile-bg); position: sticky; top: 0; white-space: nowrap; } .pj-table th.num, .pj-table td.num { text-align: right; } .pj-table td.num { font-variant-numeric: tabular-nums; } /* выравнивание разрядов в денежных колонках */ .pj-table td { padding: .55rem .9rem; border-top: 1px solid var(--tile-border); color: var(--text); vertical-align: middle; } .pj-td-name b { font-weight: 600; display: block; } .pj-code { font-size: .7rem; color: var(--muted); } /* Таблица приёмки в ЛК школы (9 колонок): без min-width авто-раскладка отдавала колонке «Поставка» ~65px, и номер поставки рассыпался по 1–3 символа в строку, а «Наличие брака» уезжало за край экрана. Обёртка .pj-table-wrap уже скроллится — задаём ей ширину (аудит 2026-08-08). */ .pj-dl-table { min-width: 58rem; } .pj-dl-table .pj-dl-src { min-width: 11rem; max-width: 15rem; } .pj-dl-table .pj-dl-goods { max-width: 16rem; } .pj-dl-src .pj-code { display: inline-block; white-space: nowrap; margin-left: .35rem; } .pj-dl-src .pj-dl-sup { white-space: nowrap; } /* строка, которую сервер не принял: видно, куда смотреть, введённое при этом не стирается */ .pj-dl-table tr.pj-dl-bad-row > td { background: color-mix(in srgb, var(--bad) 12%, transparent); } .pj-dl-table tr.pj-dl-bad-row > td:first-child { box-shadow: inset 3px 0 0 var(--bad); } /* Узкий экран (телефон школы): 9 колонок не помещаются ни при какой ширине — строка разворачивается в карточку, «Наличие брака» и критерий видны без горизонтальной прокрутки (аудит приёмки 2026-08-08). */ @media (max-width: 900px) { .pj-dl-table, .pj-dl-table tbody, .pj-dl-table tr, .pj-dl-table td { display: block; width: auto; } .pj-dl-table { min-width: 0; } .pj-dl-table thead { display: none; } .pj-dl-table tr.pj-dl-row { border: 1px solid var(--tile-border); border-radius: .75rem; margin: .5rem 0; padding: .35rem .1rem; background: var(--tile-bg); } .pj-dl-table tr.pj-dl-row > td { display: flex; justify-content: space-between; align-items: center; gap: .75rem; border: 0; padding: .3rem .7rem; text-align: left; max-width: none; } .pj-dl-table tr.pj-dl-row > td::before { content: attr(data-l); flex: 0 0 auto; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; } .pj-dl-table tr.pj-dl-row > td.pj-dl-src { display: block; } .pj-dl-table tr.pj-dl-row > td.pj-dl-src::before { display: block; margin-bottom: .25rem; } .pj-dl-table .pj-inp { max-width: 7rem; } .pj-dl-table tr.pj-dl-photos > td { padding: 0 .7rem .4rem; } .pj-dl-table tr.pj-dl-photos > td::before { content: none; } } /* Читаемость плотных таблиц: зебра, ховер строки, отделение липкой шапки */ .pj-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--muted) 5%, transparent); } .pj-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .pj-table th { box-shadow: inset 0 -1px 0 var(--tile-border); } .pj-inp { width: 78px; text-align: right; background: var(--bg); border: 1px solid var(--tile-border); border-radius: .5rem; padding: .35rem .5rem; color: var(--text); font-size: .82rem; font-variant-numeric: tabular-nums; } .pj-inp:focus { outline: none; border-color: var(--accent); } /* ============================================================================ ЖУРНАЛ ИЗМЕНЕНИЙ (audit_log) ============================================================================ */ #auditOverlay, #ordersOverlay, #shippingOverlay, #actsOverlay, #assemblyOverlay, #warehouseOverlay, #financeOverlay, #paymentsOverlay, #managersOverlay, #announcementsOverlay, #docCheckOverlay, #raznaryadkaOverlay, #deliveryOverlay, #prioritiesOverlay, #lotsOverlay, #thOverlay { position: fixed; inset: 0; z-index: 300; display: none; overflow-y: auto; background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); } .pj-inc-banner { border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); border-radius: .7rem; padding: .7rem .8rem; margin-bottom: 1rem; } .pj-inc-h { font-size: .9rem; margin-bottom: .5rem; } .rz-mtabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 .8rem; } .rz-mtab { background: transparent; border: 1px solid var(--tile-border); border-radius: .6rem; padding: .45rem .9rem; color: var(--muted); font-size: .85rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .rz-mtab:hover { color: var(--text); background: var(--tile-bg); } .rz-mtab.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 600; } .rz-mtab b { font-variant-numeric: tabular-nums; opacity: .8; } .rz-chips { display: flex; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 1rem; } .rz-chip { padding: .35rem .7rem; border-radius: .6rem; background: var(--tile-bg); border: 1px solid var(--tile-border); font-size: .82rem; } .rz-filter { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .8rem; } /* Мастер разнарядки: панель управления + поиск школы (combobox) + тумблер СО */ .rz-ctl { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .rz-search-wrap { position: relative; flex: 1; min-width: 280px; max-width: 560px; } .rz-search { width: 100%; box-sizing: border-box; text-align: left; padding: .6rem .8rem; font-size: .9rem; } .rz-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--bg); border: 1px solid var(--tile-border); border-radius: .7rem; box-shadow: 0 12px 30px rgba(15,23,42,.18); max-height: 320px; overflow-y: auto; } .rz-res { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--tile-border); padding: .55rem .8rem; cursor: pointer; font-size: .85rem; color: var(--text); transition: background .12s; } .rz-res:last-child { border-bottom: none; } .rz-res:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); } .rz-res b { display: block; font-weight: 600; } .rz-res span { display: block; color: var(--muted); font-size: .76rem; margin-top: .1rem; } .rz-res-empty { padding: .7rem .8rem; color: var(--muted); font-size: .84rem; } .rz-soflt { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; } .rz-soflt input { margin: 0; } .rz-block-body { padding-bottom: .4rem; } .o-row { cursor: pointer; } .o-row:hover { background: var(--tile-bg); } .o-note { font-size: .85rem; color: var(--muted); } .o-due-lbl { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .o-due-lbl .pj-inp { width: auto; } .o-due-lbl select { margin: 0 .3rem; } .o-due-late { color: var(--bad); border-color: var(--bad) !important; font-weight: 700; } .o-due-soon { color: var(--mid); border-color: var(--mid) !important; font-weight: 700; } .o-days-late { color: var(--bad); font-weight: 700; } .o-days-soon { color: var(--mid); font-weight: 700; } .o-days-muted { color: var(--muted); } .o-ind { text-align: center; } .o-dot { display: inline-block; width: .72rem; height: .72rem; border-radius: 50%; background: var(--muted); vertical-align: middle; box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 22%, transparent); } .o-dot.red { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 24%, transparent); } .o-dot.amber { background: var(--mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mid) 24%, transparent); } .o-dot.green { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 24%, transparent); } .o-dot.grey { background: var(--muted); } .o-leg { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; } .o-leg .o-dot { margin: 0 .1rem; } .o-addr-add { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .4rem 0 1rem; } .o-hint { font-size: .78rem; color: var(--muted); } .o-addr-group { margin-bottom: 1.1rem; border: 1px solid var(--tile-border); border-radius: .7rem; overflow: hidden; } .o-addr-h { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; font-weight: 700; background: var(--tile-bg); border-bottom: 1px solid var(--tile-border); } .o-addr-del { margin-left: auto; border: none; background: transparent; color: var(--bad); cursor: pointer; font-size: 1rem; line-height: 1; padding: .1rem .35rem; border-radius: .4rem; } .o-addr-del:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); } .o-form-foot { margin-top: 1rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .o-method { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .2rem 0 .9rem; padding: .5rem .8rem; border: 1px solid var(--tile-border); border-radius: .7rem; background: var(--tile-bg); } .o-method-opt { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .9rem; } .o-method-badge { font-size: .8rem; white-space: nowrap; } .o-item-add { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .8rem; border-top: 1px solid var(--tile-border); } .o-item-add select { max-width: 60%; } .o-item-x { width: 2.2rem; text-align: center; } .o-item-del { border: none; background: transparent; color: var(--bad); cursor: pointer; font-size: .95rem; line-height: 1; padding: .1rem .35rem; border-radius: .4rem; } .o-item-del:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); } .o-qty-over { color: var(--bad); border-color: var(--bad) !important; background: color-mix(in srgb, var(--bad) 8%, transparent) !important; font-weight: 700; } .o-limit-warn { margin: .6rem 0; padding: .5rem .8rem; border-radius: .6rem; background: color-mix(in srgb, var(--bad) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); font-size: .85rem; } /* позиция упёрлась в договор — объём закроется увеличением договора (допсоглашением); ховер/тап = деталь в title */ .o-inc-warn { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: .5rem; background: color-mix(in srgb, var(--mid) 14%, transparent); border: 1px solid color-mix(in srgb, var(--mid) 40%, transparent); color: var(--mid); font-size: .72rem; font-weight: 600; white-space: nowrap; cursor: help; } html[data-theme="light"] .o-inc-warn { color: #b45309; } /* ── Мастер заявки: выбор контракта поиском по части номера ── */ .o-ct-pick { position: relative; } .o-ct-list { position: absolute; z-index: 40; top: 100%; left: 6.2rem; min-width: 420px; max-width: 640px; max-height: 46vh; overflow: auto; background: var(--tile-bg, #fff); border: 1px solid var(--tile-border); border-radius: .7rem; box-shadow: 0 10px 28px rgba(0,0,0,.14); } .o-ct-item { padding: .5rem .8rem; cursor: pointer; font-size: .87rem; border-bottom: 1px solid var(--tile-border); } .o-ct-item:last-child { border-bottom: none; } .o-ct-item:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); } .o-ct-item .pj-code { display: block; } html[data-theme="dark"] .o-ct-list { background: #140d33; } .o-code .pj-code { white-space: nowrap; } .o-neg { color: var(--bad); font-weight: 700; } /* ── Главная: фильтр отчётов по проектам (мультивыбор чипами) ── */ .dash-pflt { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; } .dash-pflt-l { font-size: .78rem; color: var(--muted); } .dash-pflt-chip { border: 1px solid var(--tile-border); background: var(--tile-bg, #fff); color: var(--text, inherit); border-radius: 999px; padding: .28rem .8rem; font-size: .8rem; cursor: pointer; line-height: 1.1; transition: border-color .15s, background .15s; } .dash-pflt-chip:hover { border-color: var(--accent); } .dash-pflt-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .dash-pflt-note { font-size: .74rem; color: var(--muted); margin-left: .3rem; } /* ── ЛК адреса: приёмка поставок (недокомплект/брак/фото) + документы (ТЗ 2026-07-12) ── */ .pj-dl-row.pj-dl-done td { opacity: .62; } .pj-dl-lbl { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; white-space: nowrap; cursor: pointer; } .pj-dl-ok { color: var(--good); font-size: .8rem; } .pj-dl-bad { color: var(--bad); font-size: .8rem; font-weight: 600; } .pj-dl-defx { display: inline-flex; align-items: center; gap: .35rem; margin-left: .35rem; } .pj-dl-acc { width: 90px; } .pj-dl-photos td { background: color-mix(in srgb, var(--accent) 5%, transparent); } .pj-ph-list { display: inline-flex; gap: .7rem; flex-wrap: wrap; align-items: center; } .pj-ph-item { display: inline-flex; align-items: center; gap: .25rem; } .pj-doc-list { list-style: none; margin: .4rem 0 0; padding: 0; } .pj-doc-item { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; font-size: .85rem; } .pj-doc-del { border: none; background: transparent; color: var(--bad); cursor: pointer; border-radius: .4rem; padding: .05rem .3rem; } .pj-doc-del:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); } .pj-doc-add { cursor: pointer; } .sh-vio { display: inline-block; margin-bottom: 1rem; padding: .6rem 1rem; border-radius: .7rem; background: color-mix(in srgb, var(--bad) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); font-size: .82rem; cursor: pointer; } .sh-vio:hover { background: color-mix(in srgb, var(--bad) 18%, transparent); } /* ── Акты приёмки (Модуль 9) ── */ .ac-h { font-size: .92rem; margin: 1.1rem 0 .5rem; color: var(--text); } .ac-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem 1rem; align-items: end; } .ac-form-grid label { display: flex; flex-direction: column; gap: .25rem; font-size: .76rem; color: var(--muted); } .ac-form-grid .pj-inp, .ac-form-grid select, .ac-form-grid textarea { width: 100%; text-align: left; } .ac-cols { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: .6rem; font-size: .85rem; } .ac-list { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--text); } .ac-list li { margin: .15rem 0; } .ac-rep-row { display: flex; gap: .5rem; margin-bottom: .4rem; } .ac-rep-row .pj-inp { width: 220px; text-align: left; } /* Чек-лист характеристик при приёмке */ .cf-spec-toggle { display: inline-block; margin-top: 3px; font-size: .7rem; color: var(--accent-2); background: none; border: none; cursor: pointer; padding: 0; } .cf-spec-toggle:hover { text-decoration: underline; } .cf-specrow > td { background: color-mix(in srgb, var(--accent) 5%, transparent); padding: .5rem .7rem !important; } .cf-specs-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .35rem; } /* построчный чек-лист характеристик: параметр | факт | соотв./не соотв. (шаблон прежней системы) */ .cf-spec-grid { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; } .cf-specitem { display: flex; align-items: center; gap: .8rem; padding: .22rem .35rem; font-size: .8rem; flex-wrap: wrap; border-radius: .4rem; } .cf-specitem:nth-child(even) { background: color-mix(in srgb, var(--text) 4%, transparent); } .cf-specitem:has(.cf-spec-no:checked) { background: color-mix(in srgb, #ef4444 10%, transparent); } .cf-specitem:has(.cf-spec-ok:checked) .cf-lb-ok { color: #16a34a; font-weight: 600; } .cf-specitem:has(.cf-spec-no:checked) .cf-lb-no { color: #dc2626; font-weight: 600; } .cf-specname { flex: 1; min-width: 200px; color: var(--text); } .cf-spec-fact { width: 150px; font-size: .74rem; padding: .2rem .45rem; } .cf-speclb { display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; color: var(--muted); white-space: nowrap; cursor: pointer; } /* фото/видео приёмки (планшет): кнопки + сетка миниатюр + видео-оверлей */ .cf-media-btns { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .55rem; } .cf-media-add { cursor: pointer; user-select: none; } .cf-media-grid { display: flex; flex-wrap: wrap; gap: .5rem; } .cf-thumb { position: relative; width: 96px; height: 96px; border-radius: .6rem; overflow: hidden; border: 1px solid var(--tile-border, rgba(255,255,255,.14)); background: color-mix(in srgb, var(--text) 6%, transparent); display: flex; align-items: center; justify-content: center; } .cf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cf-thumb-ico { font-size: 1.6rem; opacity: .75; } .cf-thumb-st { position: absolute; left: 4px; bottom: 4px; font-size: .75rem; background: rgba(0,0,0,.55); color: #fff; border-radius: .35rem; padding: 0 .3rem; } .cf-thumb.is-up { opacity: .65; } .cf-thumb.is-err { border-color: #ef4444; } .cf-thumb-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: .4rem; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; line-height: 1; cursor: pointer; } .cf-thumb-del:hover { background: rgba(239,68,68,.85); } .cf-video-ov { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 2rem; } .cf-video-ov video { max-width: min(92vw, 1100px); max-height: 84vh; border-radius: .6rem; background: #000; } .cf-video-x { position: absolute; top: 1rem; right: 1.2rem; width: 40px; height: 40px; border-radius: .6rem; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: 1.1rem; cursor: pointer; } .cf-video-x:hover { background: rgba(239,68,68,.7); } /* свотч нормализованного цвета товара (палитра colors) — каталог и hover-карточка */ .cat-swatch, .pi-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.25); } /* ═══ Приёмка v2 — макет прежней системы (ac2-*) ═══════════════════════════ */ .ac2-head { align-items: center; } .ac2-bc-top { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .ac2-center { flex: 1; display: flex; justify-content: center; } .ac2-docx { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-2, var(--accent)); border-radius: .6rem; padding: .5rem 1rem; font-weight: 600; font-size: .85rem; cursor: pointer; } .ac2-docx:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); } /* вкладки */ .ac2-tabs { display: flex; gap: 0; border: 1px solid var(--tile-border); border-radius: .7rem; overflow: hidden; margin-bottom: .9rem; } .ac2-tab { flex: 1; padding: .6rem 1rem; background: transparent; border: none; color: var(--muted); font-size: .88rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; } .ac2-tab.active { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom-color: var(--accent); } .ac2-tabs-sub .ac2-tab { font-size: .82rem; padding: .5rem .8rem; } /* панели-аккордеоны */ .ac2-panel { border: 1px solid var(--tile-border); border-radius: .8rem; background: var(--tile-bg, rgba(255,255,255,.03)); margin-bottom: .8rem; } .ac2-panel-h { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; cursor: pointer; font-size: .9rem; user-select: none; } .ac2-panel-b { padding: .3rem .9rem .8rem; } .ac2-fold { color: var(--muted); font-size: .8rem; } /* строки реестров людей */ .ac2-mhead { display: grid; grid-template-columns: 1fr 1.3fr 34px; gap: .5rem; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .3rem 0; } .ac2-mhead-3 { grid-template-columns: 1fr 1fr 1.3fr 34px; } .ac2-mrow { display: grid; grid-template-columns: 1fr 1.3fr 34px; gap: .5rem; margin-bottom: .4rem; align-items: center; } .ac2-mrow:has(.m-org), .ac2-mrow:has(.r-org) { grid-template-columns: 1fr 1fr 1.3fr 34px; } .ac2-mhead-proxy, .ac2-mrow:has(.r-proxy) { grid-template-columns: 1fr 1.3fr 1fr 34px; } .ac2-mrow .pj-inp { width: 100%; text-align: left; } .ac2-mdel { width: 30px; height: 30px; border-radius: .45rem; border: 1px solid var(--tile-border); background: transparent; color: var(--muted); cursor: pointer; } .ac2-mdel:hover { color: #ef4444; border-color: rgba(239,68,68,.5); } .ac2-mrow-actions { display: flex; gap: .5rem; margin-top: .4rem; } /* график: повторная проверка по контракту — синяя подсветка строки (ТЗ 2026-07-03) */ .ac2-grid tr.s-repeat td { background: rgba(37, 99, 235, .10); } html[data-theme="dark"] .ac2-grid tr.s-repeat td { background: rgba(59, 130, 246, .16); } .sg-legend-repeat { display: inline-block; width: .85rem; height: .85rem; border-radius: .2rem; background: rgba(37, 99, 235, .35); vertical-align: -.1rem; } /* график: несколько экспертов на строку — чипсы */ .sg-chips { display: flex; flex-wrap: wrap; gap: .2rem; margin-bottom: .25rem; } .sg-chip { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--tile-border); border-radius: 999px; padding: .05rem .45rem; font-size: .72rem; white-space: nowrap; background: var(--tile-bg, rgba(255,255,255,.04)); } .sg-chip-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: .85rem; padding: 0 0 0 .1rem; line-height: 1; } .sg-chip-x:hover { color: #ef4444; } /* № позиции в карточке товара акта */ .ac2-i-num { min-width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--tile-border); border-radius: .45rem; font-size: .78rem; color: var(--muted); } /* карточки-переходы */ .ac2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin-top: 1rem; } .ac2-card { position: relative; text-align: left; border: 1px solid var(--tile-border); border-radius: .9rem; background: var(--tile-bg, rgba(255,255,255,.03)); padding: 1rem 1.1rem 1.1rem; cursor: pointer; transition: transform .15s, border-color .15s; display: flex; flex-direction: column; gap: .45rem; } .ac2-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .ac2-card-ico { font-size: 1.5rem; } .ac2-card-t { font-weight: 700; font-size: .95rem; color: var(--text); } .ac2-card-d { font-size: .78rem; color: var(--muted); line-height: 1.45; } .ac2-card-go { position: absolute; top: .9rem; right: 1rem; color: var(--muted); } .ac2-chip { border: 1px solid var(--tile-border); border-radius: .45rem; background: transparent; color: var(--text); font-size: .74rem; padding: .18rem .5rem; cursor: pointer; } .ac2-chip:hover { border-color: var(--accent); color: var(--accent-2, var(--accent)); } /* реестр актов */ .ac2-search { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--tile-border); border-radius: .6rem; padding: .35rem .7rem; margin: .6rem 0; } .ac2-search input { flex: 1; border: none; background: transparent; color: var(--text); font-size: .85rem; outline: none; } .ac2-search button { border: none; background: transparent; color: var(--muted); cursor: pointer; } .ac2-acts { display: flex; flex-direction: column; gap: .55rem; } .ac2-act { border: 1px solid var(--tile-border); border-radius: .75rem; background: var(--tile-bg, rgba(255,255,255,.03)); padding: .55rem .8rem; } .ac2-act-line { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .ac2-exp { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: .8rem; padding: 0; } .ac2-act-t { font-weight: 600; font-size: .86rem; } .ac2-act-meta { color: var(--muted); font-size: .76rem; white-space: nowrap; } .ac2-act-btns { margin-left: auto; display: flex; gap: .3rem; } .ac2-ib { width: 30px; height: 30px; border-radius: .45rem; border: 1px solid var(--tile-border); background: transparent; cursor: pointer; font-size: .82rem; } .ac2-ib:hover { border-color: var(--accent); } .ac2-ib-del:hover { border-color: rgba(239,68,68,.6); } .ac2-act-det { padding: .5rem 0 .15rem 1.6rem; font-size: .8rem; display: flex; flex-direction: column; gap: .15rem; } .ac2-upd { color: var(--accent-2, var(--accent)); font-size: .78rem; } .ac2-st { border-radius: .45rem; padding: .16rem .55rem; font-size: .7rem; font-weight: 700; white-space: nowrap; } .ac2-st-ok { color: #16a34a; background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.35); } .ac2-st-warn { color: #d97706; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); } .ac2-st-na { color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--tile-border); } .ac2-mode { color: #a78bfa; border: 1px solid rgba(167,139,250,.4); background: rgba(167,139,250,.1); border-radius: .45rem; padding: .16rem .5rem; font-size: .66rem; font-weight: 700; letter-spacing: .04em; } .ac2-ph-row { display: flex; gap: .6rem; flex-wrap: wrap; } .ac2-hist-open { border: none; background: transparent; color: var(--accent-2, var(--accent)); cursor: pointer; font-size: .78rem; text-decoration: underline; } /* форма акта */ .ac2-sec { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 1.1rem 0 .45rem; } .ac2-lbl { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: .5rem 0 .25rem; } .ac2-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } @media (max-width: 760px) { .ac2-2col { grid-template-columns: 1fr; } } .ac2-experts { display: flex; flex-direction: column; gap: .5rem; } .ac2-expert { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--tile-border); border-radius: .7rem; padding: .55rem .75rem; cursor: pointer; font-size: .82rem; } .ac2-expert:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* карточка товара в акте */ .ac2-item { border: 1px solid var(--tile-border); border-radius: .85rem; background: var(--tile-bg, rgba(255,255,255,.03)); padding: .7rem .9rem; margin-bottom: .8rem; } .ac2-item-blocked { opacity: .85; } .ac2-item-h { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .4rem; } .ac2-i-flag { font-size: .74rem; font-weight: 700; border-radius: .45rem; padding: .18rem .5rem; } .ac2-i-flag.ok { color: #16a34a; background: rgba(74,222,128,.1); } .ac2-i-flag.bad { color: #dc2626; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); } .ac2-hist { border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.06); border-radius: .6rem; padding: .5rem .7rem; margin: .4rem 0; } .ac2-hist-h { color: #d97706; font-weight: 700; font-size: .78rem; margin-bottom: .25rem; } .ac2-hist-row { font-size: .76rem; color: var(--text); padding: .07rem 0; } .ac2-block { border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.07); border-radius: .6rem; padding: .5rem .7rem; margin: .4rem 0; } .ac2-block-h { color: #dc2626; font-weight: 700; font-size: .8rem; margin-bottom: .2rem; } /* таблица характеристик */ .ac2-params { border-top: 1px solid var(--tile-border); margin-top: .5rem; } .ac2-params-h, .ac2-param { display: grid; grid-template-columns: 1.2fr .4fr .9fr 1.4fr 150px; gap: .6rem; align-items: center; padding: .3rem 0; } .ac2-params-h { font-size: .72rem; color: var(--muted); border-bottom: 1px solid var(--tile-border); } .ac2-param { border-bottom: 1px dashed color-mix(in srgb, var(--text) 8%, transparent); font-size: .8rem; } .ac2-p-val { color: var(--accent-2, var(--accent)); } .ac2-p-fact { width: 100%; text-align: left; font-size: .78rem; } @media (max-width: 900px) { .ac2-params-h { display: none; } .ac2-param { grid-template-columns: 1fr 1fr; } } /* тумблер */ .ac2-toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none; } .ac2-toggle input { display: none; } .ac2-tgl { width: 34px; height: 19px; border-radius: 999px; background: rgba(239,68,68,.55); position: relative; transition: background .15s; flex-shrink: 0; } .ac2-tgl::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s; } .ac2-toggle.on .ac2-tgl, .ac2-toggle:has(input:checked) .ac2-tgl { background: rgba(34,197,94,.7); } .ac2-toggle:has(input:checked) .ac2-tgl::after { transform: translateX(15px); } .ac2-toggle.big .ac2-tgl { width: 40px; height: 22px; } .ac2-toggle.big .ac2-tgl::after { width: 18px; height: 18px; } .ac2-toggle.big:has(input:checked) .ac2-tgl::after { transform: translateX(18px); } .ac2-tgl-lb { font-size: .78rem; color: var(--muted); } .ac2-tgl-lb.okc { color: #16a34a; font-weight: 700; } .ac2-tgl-lb.badc { color: #dc2626; font-weight: 700; } /* «Замечание» тумблер красный при выключенном ok — инвертированная семантика */ .ac2-param .ac2-toggle .ac2-tgl { background: color-mix(in srgb, var(--text) 18%, transparent); } .ac2-param .ac2-toggle:has(input:checked) .ac2-tgl { background: rgba(239,68,68,.75); } .ac2-i-foot { display: flex; align-items: center; gap: .7rem; border-top: 1px solid var(--tile-border); margin-top: .5rem; padding-top: .55rem; } .ac2-nd { margin-top: .5rem; } .ac2-nd-t { width: 100%; text-align: left; border: 1px solid var(--tile-border); background: transparent; color: var(--accent-2, var(--accent)); border-radius: .5rem; padding: .4rem .7rem; font-size: .78rem; cursor: pointer; } .ac2-nd-b { padding: .5rem .2rem 0; } /* медиа-секция */ .ac2-media-sec .ac2-media-row { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); } .ac2-media-sec .ac2-media-row:last-of-type { border-bottom: none; } .ac2-media-btn { white-space: nowrap; cursor: pointer; } /* фильтры графика */ .ac2-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; border: 1px solid var(--tile-border); border-radius: .8rem; padding: .7rem .9rem .9rem; background: var(--tile-bg, rgba(255,255,255,.03)); } /* широкая сетка графика */ .ac2-grid-wrap { overflow: auto; border: 1px solid var(--tile-border); border-radius: .7rem; max-height: 64vh; } .ac2-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; } .ac2-grid th { position: sticky; top: 0; z-index: 2; background: var(--bg-2, var(--bg)); text-align: left; font-size: .7rem; letter-spacing: .03em; color: var(--muted); padding: .55rem .6rem; border-bottom: 1px solid var(--tile-border); } .ac2-grid td { padding: .45rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--text) 7%, transparent); vertical-align: top; } .ac2-grid .pj-inp, .ac2-grid select, .ac2-grid textarea { width: 100%; font-size: .78rem; text-align: left; } .ac2-grid .s-ro { font-size: .78rem; color: var(--muted); max-width: 250px; } .ac2-grid .s-wrap { white-space: normal; } .ac2-actlink { color: #d97706; border: 1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.09); border-radius: .4rem; padding: .1rem .45rem; font-size: .74rem; font-weight: 700; } /* светлая тема */ html[data-theme="light"] .ac2-panel, html[data-theme="light"] .ac2-card, html[data-theme="light"] .ac2-act, html[data-theme="light"] .ac2-item, html[data-theme="light"] .ac2-filters { background: #fff; } html[data-theme="light"] .ac2-grid th { background: #eef2f6; } .ac-charsum { font-size: .68rem; color: var(--muted); margin-top: 2px; } /* Бейдж вида приёмки: СО (киноварь — основной процесс) / Товар (нейтральный). */ .ac-vid { display: inline-block; font-size: .68rem; font-weight: 700; line-height: 1; padding: .22rem .42rem; border-radius: .4rem; white-space: nowrap; border: 1px solid transparent; } .ac-vid-so { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); border-color: color-mix(in srgb, var(--accent-2) 38%, transparent); } .ac-vid-tv { color: var(--text); background: rgba(120, 120, 120, .14); border-color: var(--tile-border); } html[data-theme="dark"] .ac-vid-so { color: #fcd9a3; background: color-mix(in srgb, var(--accent-2) 18%, transparent); border-color: color-mix(in srgb, var(--accent-2) 42%, transparent); } html[data-theme="dark"] .ac-vid-tv { color: var(--text); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); } /* ── График приёмки: взгляд «от договора» (работники ищут именно так) ── */ .ac2-cts { display: flex; flex-direction: column; gap: .5rem; } .ac2-ct { border: 1px solid var(--tile-border); border-radius: .7rem; background: var(--tile-bg, rgba(255,255,255,.03)); overflow: hidden; } .ac2-ct-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem .7rem; cursor: pointer; } .ac2-ct-h:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .ac2-ct-t { font-size: .82rem; min-width: 0; flex: 1; } .ac2-ct-sup { font-size: .76rem; white-space: nowrap; } .ac2-ct-m { font-size: .74rem; color: var(--muted); white-space: nowrap; } /* Повторная проверка — главный сигнал: и чип на договоре, и подсветка строки. */ .ac2-chip-rep { font-size: .7rem; font-weight: 700; color: #1d4ed8; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.35); border-radius: .45rem; padding: .1rem .4rem; white-space: nowrap; } .ac2-chip-warn { font-size: .7rem; font-weight: 700; color: #b45309; background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.4); border-radius: .45rem; padding: .1rem .4rem; white-space: nowrap; } .ac2-ctbar { display: flex; height: 4px; margin: 0 .7rem .5rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); } .ac2-ctbar-s.s-ok { background: #16a34a; } .ac2-ctbar-s.s-mid { background: #f59e0b; } .ac2-ctbar-s.s-bad { background: #dc2626; } .ac2-ctbar-s.s-nd { background: #991b1b; } .ac2-ctbar-s.s-plan { background: #64748b; } .ac2-ct-body { border-top: 1px solid var(--tile-border); padding: .5rem .7rem .7rem; } .ac2-ct-tbl td { font-size: .78rem; vertical-align: top; } .ac2-ct-tbl tr.ac2-ct-rep td { background: rgba(59,130,246,.09); } .ac2-repno { font-size: .66rem; font-weight: 700; color: #1d4ed8; white-space: nowrap; } .ac2-ct-res { max-width: 260px; white-space: normal; } html[data-theme="light"] .ac2-ct { background: #fff; } html[data-theme="dark"] .ac2-chip-rep, html[data-theme="dark"] .ac2-repno { color: #93c5fd; } html[data-theme="dark"] .ac2-chip-warn { color: #fcd34d; } html[data-theme="dark"] .ac2-ct-tbl tr.ac2-ct-rep td { background: rgba(59,130,246,.16); } /* ── Приёмка: состояния позиции и графика (перенос механики прежней системы) ── */ /* Итог позиции виден по рамке карточки — не приходится читать каждое поле. */ .ac2-item-ok { border-color: rgba(74,222,128,.45); } .ac2-item-bad { border-color: rgba(239,68,68,.35); } .ac2-item-nd { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.04); } .ac2-item-skip { border-color: rgba(16,185,129,.4); } .ac2-i-flag.skip { color: #059669; background: rgba(16,185,129,.12); } .ac2-st-skip { color: #059669; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); } .ac2-st-bad { color: #dc2626; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.32); } /* Баннеры: жёлтый — «внимание, но работать можно», зелёный — «проверка не нужна». */ .ac2-warn { border: 1px solid rgba(251,191,36,.42); background: rgba(251,191,36,.09); border-radius: .6rem; padding: .5rem .7rem; margin: .5rem 0; } .ac2-warn b { color: #b45309; } .ac2-skip { border: 1px solid rgba(16,185,129,.4); background: rgba(16,185,129,.08); border-radius: .6rem; padding: .5rem .7rem; margin: .4rem 0; } .ac2-skip b { color: #059669; } .ac2-warn-inline { grid-column: 1 / -1; font-size: .76rem; font-weight: 600; color: #b45309; } .ac2-nd-hint { grid-column: 1 / -1; font-size: .76rem; font-weight: 600; color: #dc2626; } .ac2-nd-note-box { border: 1px solid rgba(239,68,68,.3); background: rgba(239,68,68,.07); border-radius: .6rem; padding: .5rem .7rem; margin: .45rem 0; font-size: .8rem; color: #b91c1c; } /* Строка количества приёмки: план · факт · сколько уже доставлено получателю. */ .ac2-qty { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: end; margin: .45rem 0; } .ac2-qty-side { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; } .ac2-deliv { font-size: .76rem; color: var(--muted); white-space: nowrap; } .ac2-deliv b { color: #059669; } .ac2-i-nd.on { color: #dc2626; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); } .ac2-param.is-bad { background: rgba(239,68,68,.05); } /* Заключение экспертизы: выбор ответственных при положительной приёмке. */ .ac2-concl { border: 1px solid rgba(16,185,129,.4); background: rgba(16,185,129,.07); border-radius: .7rem; padding: .7rem .85rem; margin-top: .9rem; } .ac2-concl b { color: #059669; } .ac2-concl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .45rem; } /* График: новая строка и ручная отметка «Повторная». */ .ac2-grid tr.s-new td { background: rgba(251,191,36,.10); } .sg-acts { display: flex; gap: .25rem; } /* Кто хозяин строки: книга обновляет её сама, либо её закрепил за собой человек. */ .sg-book { margin-top: .3rem; font-size: .66rem; color: var(--muted); white-space: nowrap; } .sg-own { margin-top: .3rem; font-size: .66rem; font-weight: 700; color: #7c3aed; white-space: nowrap; } html[data-theme="dark"] .sg-own { color: #c4b5fd; } .sg-new { display: inline-block; margin-top: .3rem; font-size: .68rem; font-weight: 700; color: #b45309; background: rgba(251,191,36,.16); border-radius: .35rem; padding: .1rem .4rem; } .sg-rep { display: flex; align-items: center; gap: .25rem; margin-top: .3rem; font-size: .7rem; color: var(--muted); white-space: nowrap; } /* История по товару в реестре — группами по товару. */ .ac2-phg-wrap { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; } .ac2-phg { border: 1px solid var(--tile-border); border-radius: .6rem; padding: .5rem .7rem; background: var(--tile-bg, rgba(255,255,255,.03)); } .ac2-phg-h { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .3rem; } .ac2-hist-det { margin-top: .3rem; font-size: .74rem; } .ac2-hist-det summary { cursor: pointer; color: var(--accent-2, var(--accent)); } html[data-theme="light"] .ac2-phg { background: #fff; } html[data-theme="dark"] .ac2-warn b { color: #fcd34d; } html[data-theme="dark"] .ac2-warn-inline { color: #fcd34d; } html[data-theme="dark"] .ac2-skip b, html[data-theme="dark"] .ac2-concl b { color: #6ee7b7; } html[data-theme="dark"] .ac2-nd-note-box { color: #fca5a5; } @media (max-width: 720px) { .ac2-qty { grid-template-columns: 1fr; } } #actsOverlay select, #actsOverlay textarea, #assemblyOverlay select, #warehouseOverlay select { background: var(--bg); border: 1px solid var(--tile-border); border-radius: .5rem; padding: .35rem .5rem; color: var(--text); font-size: .82rem; } #actsOverlay .cf-note, #actsOverlay .cf-bydoc, #actsOverlay .cf-act { width: auto; } @media (max-width: 720px) { .ac-form-grid { grid-template-columns: 1fr 1fr; } } /* ── Склад (Модуль 8) ── */ .wh-tabs { display: flex; gap: .3rem; margin-left: 1.2rem; } .wh-tab { background: transparent; border: 1px solid transparent; border-radius: .6rem; padding: .4rem .85rem; color: var(--muted); font-size: .82rem; cursor: pointer; } .wh-tab:hover { color: var(--text); background: var(--tile-bg); } .wh-tab.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 600; } .wh-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .6rem 0; flex-wrap: wrap; } .wh-filters { display: flex; gap: .3rem; } .wh-f { background: transparent; border: 1px solid var(--tile-border); border-radius: .5rem; padding: .35rem .8rem; color: var(--muted); font-size: .8rem; cursor: pointer; } .wh-f.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .wh-spec { display: block; font-size: .66rem; color: var(--muted); margin-top: .15rem; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wh-qcell { white-space: nowrap; } .wh-qcell .wh-q { margin-right: .35rem; } .wh-ok { display: inline-block; margin-top: .6rem; padding: .6rem 1rem; border-radius: .7rem; background: color-mix(in srgb, var(--good) 14%, transparent); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); color: var(--good); font-size: .85rem; } /* разнарядка */ .wh-dist-grid { display: grid; grid-template-columns: 340px 1fr; gap: 1.2rem; align-items: start; } .wh-pick-col { position: sticky; top: 0; } .wh-pick-head { font-size: .8rem; color: var(--muted); margin-bottom: .5rem; } .wh-pick-list { max-height: 60vh; overflow: auto; border: 1px solid var(--tile-border); border-radius: .8rem; padding: .4rem; } .wh-pick { display: flex; gap: .5rem; align-items: center; padding: .4rem .5rem; border-radius: .5rem; cursor: pointer; } .wh-pick:hover { background: var(--tile-bg); } .wh-pick > span:first-of-type { display: flex; flex-direction: column; font-size: .8rem; flex: 1; min-width: 0; } .wh-pick small { color: var(--muted); font-size: .68rem; } .wh-nso { flex: none; font-size: .62rem; font-weight: 600; color: #b45309; background: rgba(245,158,11,.16); padding: 1px 6px; border-radius: 999px; white-space: nowrap; } .wh-soflt { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--muted); margin-bottom: .5rem; cursor: pointer; user-select: none; } .wh-soflt input { margin: 0; } .wh-mblock { margin-bottom: 1.2rem; } .wh-mhead { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; } .wh-bal { margin-left: auto; font-size: .78rem; color: var(--muted); } .wh-save-bar { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; position: sticky; bottom: 0; background: var(--bg); padding: .6rem 0; } @media (max-width: 900px) { .wh-dist-grid { grid-template-columns: 1fr; } .wh-pick-col { position: static; } } .au-wrap { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .au-head { display: flex; align-items: center; gap: 1rem; margin: .25rem 0 1.2rem; } .au-back { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .7rem; padding: .5rem .9rem; font-size: .82rem; cursor: pointer; transition: border-color .2s; } .au-back:hover { border-color: var(--accent); } .au-title { font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0; } .au-count { margin-left: auto; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; } .au-filters { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .au-filters label { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; } .au-filters select { background: var(--bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .5rem; padding: .35rem .6rem; font-size: .8rem; } .au-refresh { width: 34px; height: 34px; border-radius: .6rem; background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--muted); cursor: pointer; transition: transform .4s, color .2s; } .au-refresh:hover { transform: rotate(180deg); color: var(--accent); } .au-table-wrap { border: 1px solid var(--tile-border); border-radius: 1rem; overflow: hidden; } .au-table { width: 100%; border-collapse: collapse; font-size: .8rem; } .au-table th { text-align: left; padding: .65rem .9rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--tile-bg); } .au-table td { padding: .6rem .9rem; border-top: 1px solid var(--tile-border); color: var(--text); vertical-align: top; } .au-table tbody tr:hover { background: var(--tile-bg); } .au-time { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; } .au-role { display: block; font-size: .66rem; color: var(--muted); } .au-entity { font-weight: 600; } .au-act { font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; white-space: nowrap; } .au-act.au-create { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); } .au-act.au-update { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); } .au-act.au-delete { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); } .au-change { min-width: 220px; } .au-diff { font-size: .74rem; margin: .1rem 0; } .au-k { color: var(--muted); } .au-old { color: var(--bad); text-decoration: line-through; opacity: .85; } .au-new { color: var(--good); font-weight: 600; } .au-reason { color: var(--muted); font-size: .72rem; } .au-muted { color: var(--muted); } .au-empty { padding: 2rem; text-align: center; color: var(--muted); } .au-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; color: var(--muted); font-size: .8rem; } .au-pager button { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .6rem; padding: .4rem .8rem; cursor: pointer; } .au-pager button:disabled { opacity: .4; cursor: default; } /* ============================================================================ ОТЧЁТЫ ============================================================================ */ #reportsOverlay { position: fixed; inset: 0; z-index: 300; display: none; overflow-y: auto; background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); } .rp-wrap { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .rp-head { display: flex; align-items: center; gap: 1rem; margin: .25rem 0 1.4rem; } .rp-back { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .7rem; padding: .5rem .9rem; font-size: .82rem; cursor: pointer; transition: border-color .2s; } .rp-back:hover { border-color: var(--accent); } .rp-title { font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0; } .rp-loading, .rp-error, .rp-empty { color: var(--muted); padding: 2rem; text-align: center; } .rp-error { color: var(--bad); } .rp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; } .rp-card { display: flex; align-items: flex-start; gap: .9rem; text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 1rem; padding: 1.1rem 1.2rem; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; } .rp-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px -12px var(--shadow); } .rp-ic { font-size: 1.6rem; } .rp-name { font-weight: 700; color: var(--text); font-size: .95rem; } .rp-desc { color: var(--muted); font-size: .76rem; margin-top: .25rem; line-height: 1.4; } .rp-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; } .rp-count { color: var(--muted); font-size: .8rem; } .rp-filter { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; } .rp-filter select { background: var(--bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .5rem; padding: .35rem .6rem; } .rp-csv { margin-left: auto; background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .6rem; padding: .45rem .9rem; font-size: .8rem; cursor: pointer; transition: border-color .2s, color .2s; } .rp-csv:hover { border-color: var(--accent); color: var(--accent); } .rp-table-wrap { border: 1px solid var(--tile-border); border-radius: 1rem; overflow: auto; max-height: 72vh; } .rp-table { width: 100%; border-collapse: collapse; font-size: .8rem; } .rp-table th { text-align: left; padding: .6rem .9rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--tile-bg); position: sticky; top: 0; } .rp-table th.num, .rp-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .rp-table td { padding: .5rem .9rem; border-top: 1px solid var(--tile-border); color: var(--text); white-space: nowrap; } .rp-table tbody tr:hover { background: var(--tile-bg); } .rp-table tfoot td { border-top: 2px solid var(--accent); font-weight: 800; color: var(--text); background: var(--tile-bg); position: sticky; bottom: 0; font-variant-numeric: tabular-nums; } /* Конструктор отчётов */ .rp-hint { color: var(--muted); font-size: .82rem; margin: 0 0 1rem; } .rp-builder { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: .8rem; margin-bottom: 1rem; align-items: start; } @media (max-width: 820px) { .rp-builder { grid-template-columns: 1fr; } } .rp-panel { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 1rem; padding: 1rem 1.1rem; } .rp-cap { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .7rem; } .rp-checks { display: flex; flex-wrap: wrap; gap: .5rem .9rem; } .rp-check { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text); cursor: pointer; } .rp-fl { display: flex; flex-direction: column; gap: .6rem; } .rp-f { display: flex; flex-direction: column; gap: .25rem; font-size: .74rem; color: var(--muted); } .rp-f input[type=text], .rp-f input[type=number], .rp-f select { background: var(--bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .5rem; padding: .35rem .55rem; font-size: .82rem; } .rp-f-bool { flex-direction: row; align-items: center; gap: .45rem; color: var(--text); font-size: .8rem; cursor: pointer; } /* Фильтр с множественным выбором (напр. «Проекты») — чекбоксы вместо select */ .rp-multi { display: flex; flex-direction: column; gap: .22rem; max-height: 8.4rem; overflow-y: auto; background: var(--bg); border: 1px solid var(--tile-border); border-radius: .5rem; padding: .4rem .55rem; } .rp-mopt { display: flex; align-items: center; gap: .4rem; color: var(--text); font-size: .8rem; cursor: pointer; } .rp-mopt input { margin: 0; } .rp-mhint { font-size: .68rem; color: var(--muted); margin-top: .2rem; } .rp-sortrow { display: flex; gap: .5rem; margin-bottom: .9rem; } .rp-sortrow select { flex: 1; background: var(--bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .5rem; padding: .4rem .5rem; font-size: .8rem; } .rp-run { width: 100%; background: linear-gradient(135deg, var(--accent-2), var(--accent)); border: none; color: #00211d; font-weight: 700; border-radius: .7rem; padding: .6rem; cursor: pointer; font-size: .85rem; } .rp-run:hover { filter: brightness(1.05); } /* ── Кликабельные данные дашборда (провал в раздел) ── */ .kpi-card.is-nav, .panel.is-nav { cursor: pointer; position: relative; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .kpi-card.is-nav:hover, .panel.is-nav:hover { transform: translateY(-2px); border-color: var(--accent) !important; box-shadow: 0 10px 28px var(--shadow); } .kpi-card.is-nav:focus-visible, .panel.is-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kpi-go { position: absolute; top: .7rem; right: .9rem; color: var(--accent); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; } .kpi-card.is-nav:hover .kpi-go { opacity: 1; transform: translateX(0); } .panel-go { color: var(--accent); font-weight: 700; opacity: 0; transition: opacity .15s ease; } .panel.is-nav:hover .panel-go { opacity: 1; } /* ─── Подсказка-карточка при наведении на товар (product-insight.js) ───────── */ .pinsight { position: fixed; z-index: 10050; width: 340px; max-width: 92vw; background: var(--tile-bg, #fff); color: var(--text, #2b3445); border: 1px solid rgba(120,140,170,.22); border-radius: 14px; padding: 12px 13px; box-shadow: 0 12px 38px rgba(15,23,42,.22), 0 2px 8px rgba(15,23,42,.12); font-size: 12.5px; line-height: 1.4; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; animation: piIn .12s ease; } @keyframes piIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pinsight { animation: none; } } .pinsight.pi-pinned { box-shadow: 0 12px 38px rgba(15,23,42,.30), 0 0 0 2px var(--accent, #02b0f5); } .pi-head { display: flex; align-items: baseline; gap: 7px; } .pi-num { flex: none; font-weight: 700; color: var(--accent, #02b0f5); font-size: 11.5px; } .pi-name { font-weight: 700; font-size: 13.5px; } .pi-code { margin-top: 2px; font-size: 12px; color: var(--muted, #7b8794); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2px; } .pi-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .pi-chip { display: inline-block; padding: 1px 7px; border-radius: 7px; font-size: 11px; background: var(--tile-bg-h, #f1f5f9); color: var(--muted, #64748b); border: 1px solid rgba(120,140,170,.16); } .pi-chip.pi-cat { color: #b45309; background: rgba(245,158,11,.14); border-color: transparent; } .pi-chip.pi-price { color: #0a7d3c; background: rgba(34,197,94,.13); border-color: transparent; font-weight: 600; } .pi-row { margin-top: 8px; } .pi-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; } .pi-badge.pi-ok { color: #0a7d3c; background: rgba(34,197,94,.15); } .pi-badge.pi-bad { color: #c0312b; background: rgba(255,91,86,.15); } .pi-badge.pi-neutral { color: var(--muted, #64748b); background: var(--tile-bg-h, #eef2f6); } .pi-sect { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(120,140,170,.16); } .pi-sect-t { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #94a3b8); margin-bottom: 4px; } .pi-empty { color: var(--muted, #94a3b8); font-style: italic; } .pi-cname { font-size: 12px; color: var(--text, #1a1a1a); padding: 3px 7px; border-left: 2px solid var(--accent, #cf4520); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 4px 4px 0; margin-bottom: 3px; } .pi-stk { display: flex; align-items: baseline; gap: 8px; padding: 1px 0; } .pi-stk > span:first-child { min-width: 54px; color: var(--muted, #64748b); } .pi-stk > b { font-variant-numeric: tabular-nums; font-size: 13px; } .pi-stk-sub { font-size: 11px; color: var(--muted, #94a3b8); margin-left: auto; } .pi-stk-total { margin-top: 3px; border-top: 1px dashed rgba(120,140,170,.25); padding-top: 4px; } .pi-stk-total > b { color: var(--accent, #02b0f5); } .pi-bar { height: 7px; border-radius: 5px; background: var(--tile-bg-h, #eef2f6); overflow: hidden; } .pi-bar > span { display: block; height: 100%; border-radius: 5px; } .pi-bar-ok { background: #22c55e; } .pi-bar-mid { background: var(--accent, #02b0f5); } .pi-bar-low { background: #f59e0b; } .pi-need { margin-top: 4px; font-size: 11.5px; color: var(--muted, #64748b); } .pi-need b { color: var(--text, #2b3445); } .pi-spec { font-size: 11.5px; color: var(--muted, #64748b); padding: 1px 0; } .pi-close { position: absolute; top: 6px; right: 8px; border: none; background: transparent; color: var(--muted, #94a3b8); cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 6px; } .pi-close:hover { background: var(--tile-bg-h, #f1f5f9); color: var(--text, #2b3445); } /* Метод приёмки в ЛК школы (projects.js): со склада / от поставщика / смешанно */ .pj-mtd { display: inline-block; font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; } .pj-mtd.wh { color: #0a7d3c; background: rgba(34,197,94,.14); } .pj-mtd.sup { color: #b45309; background: rgba(245,158,11,.16); } .pj-mtd.mix { color: #6d28d9; background: rgba(139,92,246,.15); } /* ============================================================================ ГЛОБАЛЬНЫЙ ПОИСК (командная палитра ⌘K) + ПОИСК/СВОРАЧИВАНИЕ В САЙДБАРЕ + доводка визуала «японский минимализм» (васи + киноварь 朱) ============================================================================ */ /* ── Поиск в сайдбаре (кнопка, открывает палитру) ───────────────────────── */ .sb-search { display: flex; align-items: center; gap: .55rem; margin: .15rem .6rem .5rem; padding: .5rem .7rem; background: var(--bg); border: 1px solid var(--tile-border); border-radius: .6rem; color: var(--muted); font-size: .82rem; cursor: pointer; text-align: left; transition: border-color .15s, color .15s, background .15s; } .sb-search:hover { border-color: var(--accent); color: var(--text); } .sb-search-ic { display: inline-flex; } .sb-search-ic .sb-svg { width: 16px; height: 16px; } .sb-search-tx { flex: 1; } .sb-search-kbd { font-family: var(--font-mono); font-size: .64rem; color: var(--muted); border: 1px solid var(--tile-border); border-radius: .35rem; padding: .05rem .3rem; background: var(--tile-bg); } html[data-theme="dark"] .sb-search { background: rgba(8,6,26,.5); } html[data-theme="dark"] .sb-search:hover { box-shadow: 0 0 16px -6px var(--accent); } /* Кнопка ИИ-помощника в сайдбаре (вместо плавающего круга над контентом) */ .sb-asst { display: flex; align-items: center; gap: .55rem; margin: 0 .6rem .55rem; padding: .55rem .7rem; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--tile-border)); border-radius: .6rem; color: var(--accent); font-size: .82rem; font-weight: 600; cursor: pointer; text-align: left; width: calc(100% - 1.2rem); transition: border-color .15s, box-shadow .15s, transform .12s, background .2s; } .sb-asst:hover { border-color: var(--accent); box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 60%, transparent); } .sb-asst:active { transform: scale(.98); } .sb-asst-ic { display: inline-flex; } .sb-asst-ic .sb-svg { width: 17px; height: 17px; } .sb-asst-tx { flex: 1; } /* в свёрнутом сайдбаре — только иконка */ @media (min-width: 921px) { body.sb-collapsed #sidebar:not(:hover) .sb-asst { justify-content: center; } body.sb-collapsed #sidebar:not(:hover) .sb-asst-tx { display: none; } } /* ── Кнопка сворачивания/закрепления сайдбара ───────────────────────────── */ .sb-collapse { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none; border-radius: .5rem; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; } .sb-collapse:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .sb-collapse .sb-svg { width: 18px; height: 18px; } .sb-cl-ic, .sb-cl-pin { display: inline-flex; } .sb-cl-pin { display: none; } body.sb-collapsed .sb-cl-ic { display: none; } body.sb-collapsed .sb-cl-pin { display: inline-flex; } /* ── Свёрнутый сайдбар = икон-рейл; наведение раскрывает «выезжающим» оверлеем ── (только на широких экранах; на узких сайдбар — полноразмерный слайд-овер) */ #sidebar { transition: width .2s ease, transform .25s ease; } @media (min-width: 921px) { body.sb-collapsed { --sidebar-w: 68px; } body.sb-collapsed #sidebar { width: 68px; } body.sb-collapsed #sidebar:hover { width: 250px; z-index: 460; box-shadow: 8px 0 40px -10px rgba(20, 30, 50, .28); } html[data-theme="dark"] body.sb-collapsed #sidebar:hover { box-shadow: 8px 0 44px -12px rgba(0,0,0,.6); } /* в свёрнутом состоянии (когда НЕ наведён) — прячем подписи, центрируем иконки */ body.sb-collapsed #sidebar:not(:hover) .sb-logo-ic, body.sb-collapsed #sidebar:not(:hover) .sb-logo-tx, body.sb-collapsed #sidebar:not(:hover) .sb-lb, body.sb-collapsed #sidebar:not(:hover) .sb-search-tx, body.sb-collapsed #sidebar:not(:hover) .sb-search-kbd, body.sb-collapsed #sidebar:not(:hover) .sb-utx, body.sb-collapsed #sidebar:not(:hover) .sb-mini span { display: none; } body.sb-collapsed #sidebar:not(:hover) .sb-logo { justify-content: center; padding: 1.1rem .5rem; } body.sb-collapsed #sidebar:not(:hover) .sb-collapse { margin: 0; } body.sb-collapsed #sidebar:not(:hover) .sb-item, body.sb-collapsed #sidebar:not(:hover) .sb-search { justify-content: center; } body.sb-collapsed #sidebar:not(:hover) .sb-search { padding: .5rem; margin: .15rem .5rem .5rem; } body.sb-collapsed #sidebar:not(:hover) .sb-user { justify-content: center; } body.sb-collapsed #sidebar:not(:hover) .sb-actions { flex-direction: column; } } /* Тёмная тема: поля ввода и селекты внутри оверлеев оставались белыми (Склад, приёмка) */ html[data-theme="dark"] #warehouseOverlay input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] #warehouseOverlay select, html[data-theme="dark"] #warehouseOverlay textarea, html[data-theme="dark"] .pj-inp, html[data-theme="dark"] .wh-inp { background: color-mix(in srgb, var(--tile-bg) 92%, #000); color: var(--text); border: 1px solid var(--tile-border); } html[data-theme="dark"] #warehouseOverlay input::placeholder, html[data-theme="dark"] .pj-inp::placeholder { color: var(--muted); } /* ── Мобильный «выезжающий» сайдбар (узкие экраны) ──────────────────────── */ #sbMobileToggle { display: none; position: fixed; top: .8rem; left: .8rem; z-index: 401; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--tile-border); border-radius: .7rem; cursor: pointer; background: var(--tile-bg); color: var(--text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 16px -6px var(--shadow); } #sbMobileToggle .sb-svg { width: 22px; height: 22px; } #sbScrim { display: none; position: fixed; inset: 0; z-index: 395; background: rgba(20, 25, 40, .38); } @media (max-width: 920px) { #sbMobileToggle { display: flex; } /* Кнопка меню фиксирована в левом верхнем углу и перекрывала «← Назад» и заголовок раздела (аудит 2026-08-08). Освобождаем ей место отступом сверху у контента — так и кнопка доступна, и шапка раздела ничем не накрыта. */ body.has-sidebar { padding-left: 0; padding-top: 3.6rem; } body.has-sidebar .pj-head, body.has-sidebar .rp-head, body.has-sidebar .au-head { padding-top: .2rem; } #sidebar { display: flex; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 8px 0 40px -8px rgba(20, 30, 50, .35); } body.sb-mobile-open #sidebar { transform: translateX(0); } body.sb-mobile-open #sbScrim { display: block; } /* в мобильном слайд-овере сайдбар всегда полный (не «икон-рейл»); правила «икон-рейла» живут в @media (min-width:921px), сюда не доходят */ body.sb-collapsed #sidebar { width: 250px; } /* плитки-фоллбэк больше не нужны — навигация в слайд-овере */ body.has-sidebar #homeTiles { display: none; } body.has-sidebar #projectsOverlay, body.has-sidebar #reportsOverlay, body.has-sidebar #auditOverlay, body.has-sidebar #ordersOverlay, body.has-sidebar #shippingOverlay, body.has-sidebar #actsOverlay, body.has-sidebar #assemblyOverlay, body.has-sidebar #warehouseOverlay, body.has-sidebar #financeOverlay, body.has-sidebar #paymentsOverlay, body.has-sidebar #managersOverlay, body.has-sidebar #announcementsOverlay, body.has-sidebar #announcementsOverlay, body.has-sidebar #docCheckOverlay, body.has-sidebar #raznaryadkaOverlay, body.has-sidebar #deliveryOverlay, #prioritiesOverlay, body.has-sidebar #deliveryOverlay, #prioritiesOverlay, body.has-sidebar #lotsOverlay, body.has-sidebar #thOverlay, body.has-sidebar .modal-overlay { left: 0; } } /* ── Командная палитра поиска ───────────────────────────────────────────── */ .gs-overlay { position: fixed; inset: 0; z-index: 10060; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; background: rgba(26, 26, 26, .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .16s ease; } .gs-overlay.open { opacity: 1; } html[data-theme="dark"] .gs-overlay { background: rgba(6, 4, 20, .55); } .gs-box { width: 100%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .9rem; overflow: hidden; box-shadow: 0 24px 70px -20px rgba(20, 30, 50, .4); transform: translateY(-8px) scale(.99); transition: transform .16s cubic-bezier(.16,1,.3,1); } .gs-overlay.open .gs-box { transform: translateY(0) scale(1); } html[data-theme="light"] .gs-box { background: #fffefb; } html[data-theme="dark"] .gs-box { background: #141831; border-color: #2c3158; box-shadow: 0 24px 70px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.03); } .gs-input-row { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--tile-border); } .gs-input-ic { display: inline-flex; color: var(--accent); } .gs-input-ic .gs-svg { width: 19px; height: 19px; } .gs-input-row input { flex: 1; border: none; background: transparent; outline: none; color: var(--text); font-size: 1rem; font-family: var(--font-ui); } .gs-input-row input::placeholder { color: var(--muted); } .gs-esc { font-family: var(--font-mono); font-size: .64rem; color: var(--muted); border: 1px solid var(--tile-border); border-radius: .35rem; padding: .1rem .4rem; } .gs-results { overflow-y: auto; padding: .35rem; flex: 1; } .gs-group { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .6rem .7rem .25rem; } .gs-row { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; border: none; background: none; border-radius: .55rem; padding: .5rem .65rem; cursor: pointer; color: var(--text); } .gs-row.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); } html[data-theme="dark"] .gs-row.is-active { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 2px 0 0 var(--accent); } .gs-ic { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex: none; border-radius: .45rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); } .gs-ic .gs-svg { width: 16px; height: 16px; } .gs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gs-tt { font-size: .86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-row.is-active .gs-sub { color: color-mix(in srgb, var(--text) 70%, var(--muted)); } .gs-tag { font-size: .64rem; color: var(--muted); border: 1px solid var(--tile-border); border-radius: .35rem; padding: .1rem .4rem; flex: none; } .gs-more { font-size: .72rem; color: var(--muted); padding: .25rem .7rem .5rem; font-style: italic; } .gs-empty, .gs-hint { padding: 1.6rem 1rem; text-align: center; color: var(--muted); font-size: .84rem; } .gs-hint { padding: .5rem 1rem; } .gs-foot { display: flex; gap: 1.1rem; padding: .55rem 1rem; border-top: 1px solid var(--tile-border); color: var(--muted); font-size: .68rem; } .gs-foot kbd { font-family: var(--font-mono); border: 1px solid var(--tile-border); border-radius: .3rem; padding: 0 .3rem; margin-right: .15rem; } /* ── Доводка «японского минимализма» (светлая тема) ─────────────────────── */ /* KPI-цифры — моноширинный (技術的): чёткие колонки разрядов */ .kpi-value { font-family: var(--font-mono); } /* Заголовки сводки — киноварный «штрих-печать» 朱 слева (вместо жирной заливки) */ .dash-title { display: inline-flex; align-items: center; gap: .55rem; } .dash-title::before { content: ""; width: 4px; height: 1.05em; border-radius: 2px; background: var(--accent); flex: none; } /* KPI-карта: тонкая киноварная кромка сверху при наведении (минимум теней) */ html[data-theme="light"] .kpi-card { transition: border-color .18s, box-shadow .18s, transform .18s; } html[data-theme="light"] .kpi-card:hover { transform: translateY(-2px); border-color: var(--accent) !important; box-shadow: 0 6px 18px -10px var(--shadow) !important; } /* Сайдбар (светлая тема): активный пункт — васи-подложка + киноварный якорь-бар, без сплошной заливки */ html[data-theme="light"] .sb-item { position: relative; } html[data-theme="light"] .sb-item.active { background: color-mix(in srgb, var(--accent) 8%, transparent) !important; color: var(--accent); font-weight: 600; } html[data-theme="light"] .sb-item.active .sb-ic, html[data-theme="light"] .sb-item.active:hover .sb-ic { color: var(--accent); } html[data-theme="light"] .sb-item.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } html[data-theme="light"] .sb-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } /* лого ГАУ ЦТО — полноцветный куб, без подложки-квадрата */ .lg-brand-ic svg { width: 68px !important; height: 60px !important; } /* Оверлеи-разделы (Финансы/Склад/Отчёты/…) в светлой теме — та же спокойная «васи», что и фон главной, для цельности (мягкое свечение, без сетки) */ html[data-theme="light"] #auditOverlay, html[data-theme="light"] #ordersOverlay, html[data-theme="light"] #shippingOverlay, html[data-theme="light"] #actsOverlay, html[data-theme="light"] #assemblyOverlay, html[data-theme="light"] #warehouseOverlay, html[data-theme="light"] #financeOverlay, html[data-theme="light"] #reportsOverlay, html[data-theme="light"] #projectsOverlay, html[data-theme="light"] #paymentsOverlay, html[data-theme="light"] #managersOverlay, html[data-theme="light"] #announcementsOverlay, html[data-theme="light"] #docCheckOverlay, html[data-theme="light"] #raznaryadkaOverlay, html[data-theme="light"] #lotsOverlay, html[data-theme="light"] #thOverlay { background: radial-gradient(1000px 680px at 100% -12%, rgba(29, 78, 216, .05), transparent 62%), linear-gradient(160deg, #f4f7fb 0%, #e7eef6 100%); } /* ============================================================================ КОНТЕКСТНЫЙ ИМПОРТ «ПО ВКЛАДКАМ» (ui/import-tab.js) — модалка в стиле минимализма ============================================================================ */ .imp-overlay { position: fixed; inset: 0; z-index: 10055; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 1rem 2rem; background: rgba(26, 26, 26, .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .16s ease; overflow-y: auto; } .imp-overlay.open { opacity: 1; } html[data-theme="dark"] .imp-overlay { background: rgba(6, 4, 20, .55); } .imp-box { width: 100%; max-width: 760px; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .9rem; padding: 1.2rem 1.4rem 1.4rem; box-shadow: 0 24px 70px -20px rgba(20, 30, 50, .4); transform: translateY(-8px) scale(.99); transition: transform .16s cubic-bezier(.16,1,.3,1); } .imp-overlay.open .imp-box { transform: translateY(0) scale(1); } html[data-theme="light"] .imp-box { background: #fffefb; } html[data-theme="dark"] .imp-box { background: #141831; border-color: #2c3158; } .imp-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; } .imp-title { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text); } .imp-seal { width: 16px; height: 16px; border-radius: 4px; background: var(--accent); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .imp-seal.ok { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 18%, transparent); } .imp-x { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: .2rem .45rem; border-radius: .4rem; } .imp-x:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); } .imp-hint { font-size: .82rem; color: var(--muted); margin: 0 0 .9rem; line-height: 1.5; } .imp-acts { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .imp-btn-ghost { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--tile-border); background: var(--tile-bg); color: var(--text); border-radius: .6rem; padding: .55rem .9rem; font-size: .84rem; cursor: pointer; transition: border-color .15s, color .15s; } .imp-btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .imp-file { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .imp-file > span { display: inline-flex; align-items: center; gap: .4rem; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--tile-border)); background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--accent-2); border-radius: .6rem; padding: .55rem .9rem; font-size: .84rem; } .imp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .imp-status { font-size: .82rem; color: var(--muted); margin: .7rem 0 0; min-height: 0; } .imp-status.err { color: var(--bad); } .imp-stats, .imp-result { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; } .imp-stat { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--tile-border); border-radius: .6rem; padding: .5rem .8rem; background: var(--bg); min-width: 96px; } .imp-stat b { font-family: var(--font-mono); font-size: 1.1rem; color: var(--text); } .imp-stat span { font-size: .68rem; color: var(--muted); } .imp-modes { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 1rem; flex-wrap: wrap; } .imp-modes-lb { font-size: .78rem; color: var(--muted); } .imp-mode { border: 1px solid var(--tile-border); background: var(--tile-bg); color: var(--text); border-radius: .5rem; padding: .4rem .8rem; font-size: .8rem; cursor: pointer; } .imp-mode.active { background: var(--accent); color: #fff; border-color: var(--accent); } .imp-tbl-wrap { max-height: 34vh; overflow: auto; border: 1px solid var(--tile-border); border-radius: .6rem; margin-bottom: .4rem; } .imp-tbl { width: 100%; border-collapse: collapse; font-size: .78rem; } .imp-tbl th { position: sticky; top: 0; background: var(--tile-bg-h); color: var(--muted); font-weight: 600; text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--tile-border); white-space: nowrap; } .imp-tbl td { padding: .35rem .6rem; border-bottom: 1px solid var(--tile-border); color: var(--text); } .imp-tbl tbody tr:nth-child(even) { background: color-mix(in srgb, var(--muted) 5%, transparent); } .imp-rn { color: var(--muted); font-family: var(--font-mono); } .imp-count { font-size: .72rem; color: var(--muted); margin-bottom: .6rem; } .imp-warn { font-size: .78rem; color: var(--mid); background: color-mix(in srgb, var(--mid) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mid) 35%, transparent); border-radius: .5rem; padding: .55rem .8rem; margin: .6rem 0; line-height: 1.5; } .imp-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; } .imp-btn { border: none; background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); color: #fff; border-radius: .6rem; padding: .6rem 1.3rem; font-size: .86rem; font-weight: 600; cursor: pointer; } .imp-btn:hover { filter: brightness(1.05); } .imp-btn:disabled { opacity: .6; cursor: default; } /* Тулбар «Склады»: поле + кнопка добавить */ .wh-add { display: flex; gap: .5rem; align-items: center; } /* Оплаты/УПД: выпадающий список выбора контракта (новый УПД) */ .pm-pick { position: relative; max-width: 620px; margin-bottom: 1rem; } .pm-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 320px; overflow-y: auto; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .6rem; box-shadow: 0 16px 40px -16px rgba(20, 30, 50, .35); } html[data-theme="light"] .pm-dropdown { background: #fffefb; } html[data-theme="dark"] .pm-dropdown { background: #141831; border-color: #2c3158; } .pm-dd-item { display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: .55rem .8rem; font-size: .84rem; color: var(--text); border-bottom: 1px solid var(--tile-border); } .pm-dd-item:last-child { border-bottom: none; } .pm-dd-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .pm-dd-item b { color: var(--accent-2); } .pm-dd-sup { display: block; font-size: .72rem; color: var(--muted); margin-top: 1px; } .pm-dd-empty { padding: .8rem; text-align: center; color: var(--muted); font-size: .82rem; } /* Оплаты/УПД: панель кнопок «Документы» в карточке */ .pm-docs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0 .8rem; } .pm-docs-lb { font-size: .8rem; color: var(--muted); font-weight: 600; } /* Оплаты/УПД: поле цены без значения в договоре — подсветка (нужен ручной ввод) */ .pm-price-empty { background: color-mix(in srgb, var(--mid) 16%, var(--tile-bg)) !important; border-color: var(--mid) !important; } /* Настройки — форма реквизитов */ .set-grid { display: flex; flex-direction: column; gap: .7rem; margin: .6rem 0 1rem; max-height: 56vh; overflow-y: auto; } .set-row { display: flex; flex-direction: column; gap: .25rem; } .set-lb { font-size: .76rem; color: var(--muted); font-weight: 600; } /* ─── Проекты v2: импорт, дашборд, редактор договоров, закрытие ─────────────── */ .pj-toolbar { display: flex; justify-content: flex-end; margin-bottom: 1rem; } .pj-empty { color: var(--muted); font-size: .85rem; padding: 1.2rem; text-align: center; } .pj-proj-code { font-family: var(--font-mono); font-size: .75rem; color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--tile-border)); border-radius: .4rem; padding: 1px 6px; margin-left: .4rem; } .pj-head-extra { margin-left: auto; } .pj-mut { color: var(--muted); font-size: .75rem; } /* Дашборд проекта: шапка-чипы + действия + вкладки */ .pj-proj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .pj-proj-chips { display: flex; flex-wrap: wrap; gap: .6rem; } /* Плитка показателя: значение сверху, подпись снизу, ПО ЦЕНТРУ — те же правила, что у чипов стадий и показателей в карточках учреждений (единый вид на экране). */ .pj-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid var(--tile-border); border-radius: .6rem; padding: .5rem .9rem; background: var(--tile-bg); min-width: 110px; text-align: center; } .pj-chip b { font-family: var(--font-mono); font-size: 1.15rem; color: var(--text); } .pj-chip span { font-size: .68rem; color: var(--muted); } .pj-proj-acts { display: flex; gap: .5rem; flex-wrap: wrap; } .pj-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; border-bottom: 1px solid var(--tile-border); } .pj-tab { border: none; background: none; color: var(--muted); font-size: .9rem; font-weight: 600; padding: .55rem .9rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .pj-tab:hover { color: var(--text); } .pj-tab.active { color: var(--accent-2); border-bottom-color: var(--accent); } /* Редактор договоров */ .pj-ed-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; } .pj-ed-hint { font-size: .8rem; color: var(--muted); line-height: 1.5; max-width: 720px; } .pj-cx { border: 1px solid var(--tile-border); background: var(--tile-bg); color: var(--bad); border-radius: .5rem; width: 26px; height: 26px; cursor: pointer; font-size: .8rem; line-height: 1; } .pj-cx:hover { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); } /* Закрытие договором в ЛК */ .pj-cov { display: inline-flex; flex-direction: column; gap: 1px; font-size: .8rem; } .pj-cov.ok b, .pj-cov.ok { color: var(--text); font-family: var(--font-mono); } .pj-cov small { color: var(--muted); font-size: .7rem; font-family: var(--font-ui); } .pj-cov.no { color: var(--muted); font-style: italic; font-size: .78rem; } /* «Планируемый договор» в ЛК: закрепление сверх ёмкости договора — ждёт допсоглашения */ .pj-plan { color: var(--mid); font-weight: 700; font-family: var(--font-mono); } /* Деление закрепления по поставщикам (ТЗ 2026-07-16 п.3) */ .pj-cov-split { border: 1px solid var(--tile-border); background: transparent; border-radius: 6px; padding: 0 6px; cursor: pointer; color: var(--muted); font-size: .8rem; vertical-align: middle; } /* «предложить количество» / «✎ контакты» в ЛК школы (В2/шаг 3 ЛК-механики, 2026-07-18) */ .pj-npr { border: 1px solid var(--tile-border); background: transparent; border-radius: 6px; padding: 0 6px; cursor: pointer; color: var(--muted); font-size: .8rem; vertical-align: middle; } .pj-npr:hover { color: var(--accent); border-color: var(--accent); } .pj-cov-split:hover { color: var(--accent); border-color: var(--accent); } .pj-cov-editor > td { background: color-mix(in srgb, var(--accent) 6%, transparent); } .pj-covedit { display: flex; flex-direction: column; gap: .45rem; padding: .5rem .3rem; font-size: .85rem; } .pj-covedit-title { font-size: .85rem; } .pj-covedit-rows { display: flex; flex-direction: column; gap: .35rem; } .pj-covedit-row { display: flex; align-items: center; gap: .45rem; } .pj-covedit-row select { max-width: 480px; } .pj-covedit-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .pj-need-inp { text-align: right; } .pj-cab-rd2 { font-size: .78rem; color: var(--muted); } .pj-cab-rd2 b { color: var(--text); font-family: var(--font-mono); } /* Окно выбора договоров (picker) поверх .imp-overlay */ .pj-pick-search { width: 100%; box-sizing: border-box; border: 1px solid var(--tile-border); background: var(--tile-bg); color: var(--text); border-radius: .6rem; padding: .55rem .8rem; font-size: .85rem; margin-bottom: .7rem; } .pj-pick-search:focus { outline: none; border-color: var(--accent); } .pj-pick-list { max-height: 44vh; overflow-y: auto; border: 1px solid var(--tile-border); border-radius: .6rem; } .pj-pick-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--tile-border); cursor: pointer; font-size: .84rem; } .pj-pick-row:last-child { border-bottom: none; } .pj-pick-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .pj-pick-row.on { background: color-mix(in srgb, var(--accent) 12%, transparent); } .pj-pick-row input { flex: none; } .pj-pick-main { flex: 1; color: var(--text); min-width: 0; } .pj-pick-main b { font-family: var(--font-mono); color: var(--accent-2); } .pj-pick-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; } .pj-match { font-size: .72rem; color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border-radius: .4rem; padding: 1px 6px; white-space: nowrap; } .pj-fromp { font-size: .7rem; color: var(--muted); white-space: nowrap; } /* Окно имени проекта в мастере импорта */ .pj-imp-name { display: flex; gap: .8rem; margin: .9rem 0; flex-wrap: wrap; } .pj-imp-name label { display: flex; flex-direction: column; gap: .25rem; font-size: .76rem; color: var(--muted); font-weight: 600; flex: 1; min-width: 160px; } .pj-imp-name input { border: 1px solid var(--tile-border); background: var(--tile-bg); color: var(--text); border-radius: .6rem; padding: .5rem .7rem; font-size: .9rem; } .pj-imp-name input:focus { outline: none; border-color: var(--accent); } /* Тост уведомления (закрытие/ошибки) */ #pjToast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 10070; background: var(--text); color: var(--bg); font-size: .85rem; font-weight: 600; padding: .7rem 1.2rem; border-radius: .7rem; box-shadow: 0 16px 40px -12px rgba(20,30,50,.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 80vw; } #pjToast.show { opacity: 1; transform: translate(-50%, 0); } #pjToast.err { background: var(--bad); color: #fff; } /* Проекты v2: ЛК школы → секции по адресам (корпусам) */ .pj-school-head { margin-bottom: 1rem; } .pj-sec { border: 1px solid var(--tile-border); border-radius: .9rem; padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--tile-bg); } .pj-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; } .pj-sec-l { display: flex; flex-direction: column; gap: .2rem; min-width: 0; } .pj-sec-addr { font-weight: 700; color: var(--text); font-size: .92rem; } .pj-sec-meta { font-size: .76rem; color: var(--muted); } .pj-sec-r { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .pj-sec-save { padding: .45rem .9rem; font-size: .8rem; } /* ============================================================================ МЕНЕДЖЕРЫ — администрирование контрактов по менеджерам (дашборд загрузки) ============================================================================ */ /* хелперы (доопределяем недостающие — переиспускают токены темы) */ .pj-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; } .pj-chip-warn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--tile-bg)); } .pj-chip-warn b { color: var(--accent-2); } .pj-hint { color: var(--muted); font-size: .78rem; margin: 0 0 .9rem; } .pj-subhead { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 1rem; } .pj-subhead h3 { margin: 0; font-size: 1.05rem; color: var(--text); font-weight: 700; } .pj-back2 { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .6rem; padding: .4rem .8rem; font-size: .8rem; cursor: pointer; } .pj-back2:hover { border-color: var(--accent); } .mg-count { color: var(--muted); font-weight: 400; font-size: .85rem; } .mg-table td, .mg-table th { vertical-align: middle; } .mg-table .num { text-align: right; font-variant-numeric: tabular-nums; } .mg-row { cursor: pointer; transition: background .15s; } .mg-row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .mg-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .mg-name { font-weight: 600; color: var(--text); } .mg-email { font-size: .72rem; color: var(--muted); } .mg-off { font-size: .65rem; color: var(--bad); border: 1px solid var(--bad); border-radius: .4rem; padding: 0 .35rem; font-weight: 600; } .mg-unrow { background: color-mix(in srgb, var(--accent) 6%, transparent); } .mg-unrow .mg-name { color: var(--accent-2); } /* полоса загрузки: трек + заливка + число поверх */ .mg-bar { position: relative; min-width: 150px; height: 22px; border-radius: .45rem; background: var(--tile-border); overflow: hidden; } .mg-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: .45rem; min-width: 3px; } .mg-bar b { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: .82rem; color: var(--text); } .mg-act { text-align: right; white-space: nowrap; } .mg-mini { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .5rem; padding: .35rem .7rem; font-size: .76rem; cursor: pointer; } .mg-mini:hover { border-color: var(--accent); } .mg-distribute { color: var(--accent-2); font-weight: 600; } .mg-assign { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .5rem; padding: .35rem .5rem; font-size: .8rem; max-width: 220px; } .mg-assign:focus { outline: none; border-color: var(--accent); } tr.mg-saved { background: color-mix(in srgb, var(--good) 18%, transparent) !important; transition: background .2s; } .mg-addform { border: 1px solid var(--accent); border-radius: .8rem; padding: 1rem 1.2rem; margin-bottom: 1.2rem; background: var(--tile-bg); max-width: 460px; } .mg-addform h3 { margin: 0 0 .8rem; font-size: 1rem; color: var(--text); } .mg-addform label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: var(--muted); margin-bottom: .7rem; } .mg-addform input { background: var(--bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .5rem; padding: .5rem .7rem; font-size: .9rem; } .mg-addform input:focus { outline: none; border-color: var(--accent); } .mg-formbtns { display: flex; gap: .5rem; margin-top: .3rem; } .mg-err { color: var(--bad); font-size: .78rem; margin-top: .6rem; min-height: 1em; } /* Ответственный в legacy-разделе «Контракты»: панель-фильтр + бейджи в списке/карточке */ .ct-mgrbar { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; } .ct-mgrbar-lb { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; } .ct-mgrsel { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: inherit; border-radius: .6rem; padding: .4rem .7rem; font-size: .82rem; min-width: 200px; } html[data-theme="light"] .ct-mgrsel { background: #fff; border-color: var(--tile-border); color: var(--text); } .ct-mgrsel:focus { outline: none; border-color: var(--accent); } .ct-mgr-badge { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .68rem; font-weight: 600; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); vertical-align: middle; } html[data-theme="light"] .ct-mgr-badge { color: var(--accent-2); } .ct-mgr-none { border-color: rgba(160, 160, 160, .4); background: transparent; color: var(--muted); } /* Вкладки-проекты финансирования в «Контрактах»: 2-зонная подложка (зона 1 — проекты + «Все контракты»; зона 2 — внутри проекта) */ .ct-pjzone { margin: 0 0 .8rem; border: 1px solid var(--tile-border); border-radius: .8rem; overflow: hidden; background: color-mix(in srgb, var(--accent) 4%, transparent); } .ct-pjbar { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem .55rem; } .ct-pjtab { border: 1px solid var(--tile-border); border-radius: .55rem; padding: .3rem .7rem; font-size: .78rem; font-weight: 600; color: var(--muted); background: transparent; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .ct-pjtab:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .ct-pjtab.active { background: var(--accent); border-color: var(--accent); color: #fff; } .ct-pjcnt { opacity: .7; font-weight: 500; font-size: .68rem; } .ct-pjsub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .45rem .55rem .5rem; border-top: 1px dashed var(--tile-border); background: color-mix(in srgb, var(--accent) 7%, transparent); } .ct-pjsub-lb { font-size: .72rem; color: var(--muted); font-weight: 600; margin-right: .15rem; } .ct-pjsubtab { border: 1px solid var(--tile-border); border-radius: 999px; padding: .2rem .65rem; font-size: .74rem; color: var(--muted); background: transparent; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .ct-pjsubtab:hover { color: var(--accent); } .ct-pjsubtab.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; } .ct-pjsub-fin { margin-left: auto; font-size: .7rem; color: var(--muted); opacity: .8; } .ct-pj-badge { display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 6px; font-size: .68rem; font-weight: 600; border: 1px solid color-mix(in srgb, #22c55e 45%, transparent); background: color-mix(in srgb, #22c55e 14%, transparent); color: #16a34a; vertical-align: middle; } html[data-theme="dark"] .ct-pj-badge { color: #4ade80; } .ct-fin-badge { display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 6px; font-size: .68rem; font-weight: 600; border: 1px solid color-mix(in srgb, #d97706 45%, transparent); background: color-mix(in srgb, #d97706 12%, transparent); color: #b45309; vertical-align: middle; } html[data-theme="dark"] .ct-fin-badge { color: #fbbf24; } .ct-ord-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; font-size: .68rem; font-weight: 600; border: 1px solid color-mix(in srgb, #0ea5e9 45%, transparent); background: color-mix(in srgb, #0ea5e9 12%, transparent); color: #0369a1; vertical-align: middle; } html[data-theme="dark"] .ct-ord-badge { color: #7dd3fc; } .ct-pjsub-sep { margin-left: .5rem; font-size: .7rem; color: var(--muted); font-weight: 600; } .ct-pjmoney { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: center; padding: .5rem .7rem; border-top: 1px dashed var(--tile-border); background: color-mix(in srgb, #d97706 6%, transparent); } .ct-fincell { display: inline-flex; flex-direction: column; gap: 1px; } .ct-fincell i { font-style: normal; font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .ct-fincell b { font-size: .82rem; font-variant-numeric: tabular-nums; } .ct-fin-paid b { color: #16a34a; } html[data-theme="dark"] .ct-fin-paid b { color: #4ade80; } .ct-fin-rest b { color: #b45309; } html[data-theme="dark"] .ct-fin-rest b { color: #fbbf24; } .ct-fin-warn b { color: #dc2626; } /* Разбивка финансирования контракта по проектам ЦС (таблица в карточке) */ .cfin-title { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .2rem 0 .3rem; } /* max-width расширен с 980 → 1220 (ТЗ 2026-07-08 п.5/11: добавились колонки «Заказано»/ «Своб. остаток ЦС» — на 980px последняя колонка обрезалась по правому краю карточки) */ .cfin-tblwrap { overflow-x: auto; border: 1px solid color-mix(in srgb, #d97706 30%, transparent); border-radius: .6rem; max-width: 1380px; } .cfin-tbl { width: 100%; border-collapse: collapse; font-size: .74rem; } .cfin-tbl th { background: color-mix(in srgb, #d97706 9%, transparent); color: var(--muted); font-weight: 600; padding: .28rem .55rem; text-align: right; white-space: nowrap; } .cfin-tbl td { padding: .24rem .55rem; border-top: 1px solid var(--tile-border); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .cfin-tbl .cfin-name { text-align: left; } .cfin-tbl .cfin-name b, .cfin-tbl tfoot td { font-weight: 700; } .cfin-yr { font-size: .64rem; color: var(--muted); border: 1px solid var(--tile-border); border-radius: 4px; padding: 0 4px; } .cfin-tbl .cfin-zero { color: var(--muted); opacity: .45; } .cfin-tbl .cfin-paid { color: #16a34a; } html[data-theme="dark"] .cfin-tbl .cfin-paid { color: #4ade80; } .cfin-tbl .cfin-rest { color: #b45309; font-weight: 600; } .cfin-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .8rem; padding: 0 .3rem; } .cfin-del:hover { color: var(--bad); } html[data-theme="dark"] .cfin-tbl .cfin-rest { color: #fbbf24; } .cfin-mute td { opacity: .55; } /* Строка «оплачено по документам» (ТЗ 2026-07-08 п.13) — обычный муted-текст под названием ЦС, БЕЗ бейджа-рамки .cfin-yr (та рассчитана на короткие метки типа года, целое предложение в рамке смотрелось тесно) */ .cfin-tbl .cfin-paiddocs { font-size: .64rem; font-weight: 500; color: #16a34a; margin-top: 1px; } html[data-theme="dark"] .cfin-tbl .cfin-paiddocs { color: #4ade80; } .cfin-tbl tfoot td { border-top: 2px solid color-mix(in srgb, #d97706 35%, transparent); } /* Секции таблицы позиций по финансированиям + селектор в строке */ .ci-fin-group td { padding: .5rem .8rem !important; font-size: .78rem; background: color-mix(in srgb, #d97706 10%, transparent); border-top: 2px solid color-mix(in srgb, #d97706 40%, transparent); color: var(--text, inherit); } .ci-fin-group b { color: #b45309; } html[data-theme="dark"] .ci-fin-group b { color: #fbbf24; } .ci-fin-meta { color: var(--muted); } .ci-fin-un td { background: rgba(148, 163, 184, .12); border-top: 2px dashed var(--tile-border); } .ci-fin-hint { font-size: .7rem; color: #b45309; font-weight: 600; } html[data-theme="dark"] .ci-fin-hint { color: #fbbf24; } .ci-fin-sel { margin-top: 3px; width: 100%; max-width: 100%; font-size: .68rem; padding: 2px 4px; border-radius: 6px; border: 1px solid color-mix(in srgb, #d97706 40%, transparent); background: color-mix(in srgb, #d97706 7%, transparent); color: inherit; } html[data-theme="dark"] .ci-fin-sel { background: rgba(217, 119, 6, .12); } .ci-fin-sel:focus { outline: none; border-color: #d97706; } /* «Размноженные» таблицы позиций (ТЗ 2026-07-08): секция общего проекта → плашка финансирования → своя таблица; внизу — «Не распределено» */ .ci-sec { margin: .8rem 0 1rem; } .ci-sec-project { margin: 0 0 .35rem; padding: .45rem .8rem; border-radius: .6rem; font-size: .82rem; background: color-mix(in srgb, var(--accent, #0ea5e9) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #0ea5e9) 30%, transparent); } .ci-sec-project b { color: var(--accent-2, #0369a1); } html[data-theme="dark"] .ci-sec-project b { color: #7dd3fc; } .ci-sec-cap { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .68rem; letter-spacing: .04em; } .ci-sec-fin { margin: .45rem 0 .3rem; padding: .4rem .8rem; border-radius: .55rem; font-size: .78rem; background: color-mix(in srgb, #d97706 10%, transparent); border-left: 3px solid color-mix(in srgb, #d97706 55%, transparent); } .ci-sec-fin b { color: #b45309; } html[data-theme="dark"] .ci-sec-fin b { color: #fbbf24; } .ci-sec-fin.ci-fin-un { background: rgba(148, 163, 184, .12); border-left: 3px dashed var(--tile-border, #94a3b8); } .ci-sec-empty { margin: 0 0 .4rem; padding: .5rem .8rem; border: 1px dashed var(--tile-border, rgba(148,163,184,.4)); border-radius: .6rem; font-size: .74rem; color: var(--muted); } .ci-sec .overflow-x-auto { margin-bottom: .45rem; } /* Разделение товара контракта по проектам (карточка контракта) */ .cpj-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 .3rem; } .cpj-chip { border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 999px; padding: .18rem .6rem; font-size: .72rem; } .cpj-chip b { color: var(--accent); } html[data-theme="light"] .cpj-chip b { color: var(--accent-2); } .cpj-chip-rest { border-color: rgba(160, 160, 160, .4); background: transparent; } .cpj-chip-rest b { color: var(--muted); } .cpj-tblwrap { max-height: 300px; overflow: auto; border: 1px solid var(--tile-border); border-radius: .6rem; } .cpj-tbl { width: 100%; border-collapse: collapse; font-size: .74rem; } .cpj-tbl th { position: sticky; top: 0; background: var(--bg-2, #f3f1ea); color: var(--muted); font-weight: 600; padding: .3rem .5rem; text-align: right; white-space: nowrap; z-index: 1; } .cpj-tbl td { padding: .24rem .5rem; border-top: 1px solid var(--tile-border); text-align: right; font-variant-numeric: tabular-nums; } .cpj-tbl .cpj-code { text-align: left; color: var(--muted); white-space: nowrap; } .cpj-tbl .cpj-zero { color: var(--muted); opacity: .45; } .cpj-tbl .cpj-rest { color: #d97706; font-weight: 600; } html[data-theme="dark"] .cpj-tbl th { background: #141230; } /* Подсказка-описание раздела сайдбара (наведение на пункт меню) */ #sbTip { position: fixed; z-index: 480; max-width: 290px; background: #ffffff; border: 1px solid var(--tile-border); border-left: 3px solid var(--accent); border-radius: .6rem; padding: .55rem .8rem .62rem; box-shadow: 0 10px 28px rgba(20, 15, 10, .16); pointer-events: none; opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .14s ease, transform .14s ease; } #sbTip.show { opacity: 1; visibility: visible; transform: translateX(0); } #sbTip b { display: block; font-size: .82rem; font-weight: 700; color: var(--accent-2); margin-bottom: 3px; } #sbTip span { display: block; font-size: .745rem; line-height: 1.4; color: var(--text); } html[data-theme="dark"] #sbTip { background: #160e36; border-color: rgba(177, 77, 255, .38); border-left-color: var(--accent); box-shadow: 0 10px 28px rgba(0, 0, 0, .55); } html[data-theme="dark"] #sbTip b { color: var(--accent); } html[data-theme="dark"] #sbTip span { color: #e7e3f5; } /* ============================================================================ ИИ-АССИСТЕНТ — плавающий чат-виджет ============================================================================ */ /* Запуск ассистента перенесён в САЙДБАР (кнопка #sbAssistant) — плавающего круга над контентом больше нет. #aiAsst — только контейнер панели чата, видим при открытии. */ #aiAsst { position: fixed; right: 22px; bottom: 22px; z-index: 40; pointer-events: none; } #aiAsst.ai-open { z-index: 10080; pointer-events: auto; } #aiToggle { display: none !important; } /* плавающая кнопка убрана */ #aiAsst #aiPanel { bottom: 0; } /* панель у нижнего-правого угла */ #aiToggle { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; } #aiToggle:hover { transform: translateY(-2px) scale(1.04); } #aiToggle svg { width: 26px; height: 26px; } #aiAsst.ai-open #aiToggle { transform: scale(.9); opacity: .85; } #aiPanel { position: absolute; right: 0; bottom: 70px; width: min(380px, 92vw); height: min(560px, 72vh); display: none; flex-direction: column; overflow: hidden; background: var(--bg); border: 1px solid var(--tile-border); border-radius: 1rem; box-shadow: 0 18px 50px rgba(20, 15, 10, .22); } #aiAsst.ai-open #aiPanel { display: flex; animation: aiPop .18s ease; } @keyframes aiPop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .ai-head { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--tile-border); background: var(--tile-bg); } .ai-head b { font-size: .9rem; color: var(--text); } .ai-head small { color: var(--muted); font-size: .7rem; margin-left: .2rem; } .ai-head .ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); } #aiClose { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; line-height: 1; } #aiClose:hover { color: var(--accent); } .ai-log { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; } .ai-msg { max-width: 86%; padding: .55rem .75rem; border-radius: .8rem; font-size: .85rem; line-height: 1.45; word-wrap: break-word; } .ai-user { align-self: flex-end; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-bottom-right-radius: .25rem; } .ai-assistant { align-self: flex-start; background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-bottom-left-radius: .25rem; } .ai-pending { color: var(--muted); font-style: italic; } .ai-form { display: flex; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid var(--tile-border); background: var(--tile-bg); } #aiInput { flex: 1; background: var(--bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .7rem; padding: .55rem .8rem; font-size: .85rem; } #aiInput:focus { outline: none; border-color: var(--accent); } #aiSend { border: none; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-radius: .7rem; width: 40px; display: flex; align-items: center; justify-content: center; } #aiSend svg { width: 18px; height: 18px; } #aiSend:hover { filter: brightness(1.06); } @media (max-width: 920px) { #aiAsst { right: 14px; bottom: 78px; } } /* ════════════════════════════════════════════════════════════════════════ ПРОВЕРКА ПАКЕТОВ НА ОПЛАТУ (ИИ-агент) — #docCheckOverlay ============================================================================ */ .dc-wrap { max-width: min(1500px, 94vw); margin: 0 auto; padding: 26px 26px 70px; } .dc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .dc-title { font-size: 1.5rem; font-weight: 700; color: var(--text); } .dc-sub { font-size: .9rem; color: var(--muted); margin-top: 4px; max-width: 70ch; } .dc-x { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 1rem; flex: none; } .dc-x:hover { border-color: var(--accent); color: var(--accent); } .dc-windows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 18px; } @media (max-width: 860px) { .dc-windows { grid-template-columns: 1fr; } } .dc-win-t { font-weight: 600; color: var(--text); margin-bottom: 8px; font-size: .95rem; } .dc-drop { border: 1.5px dashed var(--tile-border); border-radius: 14px; background: var(--tile-bg); padding: 22px 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .dc-drop:hover, .dc-drop:focus-visible { border-color: var(--accent); } .dc-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--tile-bg)); } .dc-drop-ic { font-size: 1.6rem; color: var(--accent); line-height: 1; } .dc-drop-tx { font-weight: 600; color: var(--text); margin-top: 6px; font-size: .9rem; } .dc-drop-h { font-size: .78rem; color: var(--muted); margin-top: 4px; } .dc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .dc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 8px; padding: 3px 6px 3px 9px; font-size: .8rem; } .dc-chip-n { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-chip-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .75rem; padding: 0 2px; } .dc-chip-x:hover { color: var(--bad); } .dc-opts { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; } .dc-lbl { display: block; font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 6px; } .dc-prompt { width: 100%; box-sizing: border-box; border: 1px solid var(--tile-border); border-radius: 10px; background: var(--bg); color: var(--text); padding: 8px 10px; font: inherit; font-size: .88rem; resize: vertical; } .dc-prompt:focus { outline: none; border-color: var(--accent); } .dc-flags { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; } .dc-chk { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--muted); cursor: pointer; } .dc-chk input { accent-color: var(--accent); } .dc-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .dc-check { font-size: 1rem; padding: 11px 30px; } .dc-check:disabled { opacity: .5; cursor: not-allowed; } .dc-count { font-size: .85rem; color: var(--muted); } .dc-result { margin-top: 16px; } .dc-loading { display: flex; align-items: center; gap: 12px; padding: 28px; color: var(--muted); font-size: .95rem; } .dc-spin { width: 22px; height: 22px; border: 3px solid var(--tile-border); border-top-color: var(--accent); border-radius: 50%; animation: dcSpin .8s linear infinite; flex: none; } @keyframes dcSpin { to { transform: rotate(360deg); } } .dc-err { background: color-mix(in srgb, var(--bad) 12%, var(--tile-bg)); border: 1px solid var(--bad); color: var(--bad); border-radius: 12px; padding: 14px 16px; } .dc-verdict { border-radius: 14px; padding: 16px 20px; border: 1px solid var(--tile-border); margin-bottom: 14px; } .dc-verdict.ok { background: color-mix(in srgb, var(--good) 12%, var(--tile-bg)); border-color: color-mix(in srgb, var(--good) 45%, var(--tile-border)); } .dc-verdict.warn { background: color-mix(in srgb, var(--mid) 14%, var(--tile-bg)); border-color: color-mix(in srgb, var(--mid) 45%, var(--tile-border)); } .dc-verdict.error { background: color-mix(in srgb, var(--bad) 12%, var(--tile-bg)); border-color: color-mix(in srgb, var(--bad) 45%, var(--tile-border)); } .dc-verdict-t { font-size: 1.25rem; font-weight: 700; color: var(--text); } .dc-verdict-c { font-size: .9rem; color: var(--muted); margin-top: 3px; } .dc-meta { font-size: .88rem; color: var(--muted); margin-bottom: 16px; } .dc-meta b { color: var(--text); } .dc-block-t { font-weight: 600; color: var(--text); margin: 18px 0 8px; font-size: 1rem; } .dc-tbl-wrap { overflow-x: auto; border: 1px solid var(--tile-border); border-radius: 12px; } .dc-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; } .dc-tbl th { background: var(--tile-bg); color: var(--muted); text-align: left; padding: 9px 12px; font-weight: 600; position: sticky; top: 0; border-bottom: 1px solid var(--tile-border); } .dc-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--tile-border); color: var(--text); vertical-align: top; } .dc-tbl tbody tr:last-child td { border-bottom: none; } .dc-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .dc-row-error td { background: color-mix(in srgb, var(--bad) 8%, transparent); } .dc-row-warn td { background: color-mix(in srgb, var(--mid) 8%, transparent); } .dc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; white-space: nowrap; } .dc-badge.ok { color: var(--good); } .dc-badge.warn { color: var(--mid); } .dc-badge.error { color: var(--bad); } .dc-clean { color: var(--good); font-size: .9rem; padding: 6px 0; } .dc-unread { margin: 4px 0 0 18px; color: var(--muted); font-size: .85rem; } .dc-concl { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 12px; padding: 14px 18px; line-height: 1.6; color: var(--text); font-size: .92rem; } .dc-dl { margin-top: 18px; } .dc-unread-line { font-size: .82rem; color: var(--muted); font-style: italic; margin-top: 8px; } /* Проверка пакетов: быстрый режим «вся папка» */ .dc-folder { margin-bottom: 8px; } .dc-drop-folder { padding: 26px 18px; border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--tile-bg)); } .dc-pick-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; } .dc-pick-files, .dc-pick-folder { border-radius: 9px; padding: 8px 18px; font: inherit; font-weight: 600; cursor: pointer; } .dc-pick-files { background: var(--accent); color: #fff; border: none; } .dc-pick-files:hover { filter: brightness(1.06); } .dc-pick-folder { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .dc-pick-folder:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .dc-or { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: .82rem; margin: 14px 0; } .dc-or::before, .dc-or::after { content: ''; flex: 1; border-top: 1px solid var(--tile-border); } .dc-or span { padding: 0 12px; } /* Проверка документов: переключатель режимов «Пакет» / «По договору» */ .dc-modes { display: flex; gap: 8px; margin: 4px 0 18px; border-bottom: 1px solid var(--tile-border); } .dc-mode { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 9px 16px; font: inherit; font-weight: 600; font-size: .92rem; color: var(--muted); cursor: pointer; border-radius: 8px 8px 0 0; } .dc-mode:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 6%, transparent); } .dc-mode.active { color: var(--accent); border-bottom-color: var(--accent); } /* Режим «По договору»: выбор договора */ .dcc-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .dcc-search { flex: 1; min-width: 240px; } .dcc-search, .dcc-verdict { padding: 8px 11px; border: 1px solid var(--tile-border); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: .88rem; } .dcc-total { font-size: .82rem; color: var(--muted); margin-bottom: 8px; } .dcc-tbl tbody tr { cursor: pointer; } .dcc-tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } .dcc-sub { font-size: .78rem; color: var(--muted); margin-top: 2px; line-height: 1.35; } .dcc-none { color: var(--muted); font-size: .82rem; } /* Режим «По договору»: шапка досье и сводные чипы */ .dcc-back { margin-bottom: 14px; } .dcc-head { margin-bottom: 14px; } .dcc-num { font-size: 1.2rem; font-weight: 700; color: var(--text); font-family: var(--font-mono, inherit); } .dcc-title { font-size: .92rem; color: var(--text); margin-top: 3px; line-height: 1.4; } .dcc-meta { font-size: .84rem; color: var(--muted); margin-top: 5px; } .dcc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .dcc-chip { border: 1px solid var(--tile-border); border-radius: 10px; padding: 8px 13px; background: var(--tile-bg); display: flex; flex-direction: column; gap: 2px; min-width: 120px; } .dcc-chip span { font-size: .75rem; color: var(--muted); } .dcc-chip b { font-size: .95rem; color: var(--text); font-variant-numeric: tabular-nums; } .dcc-chip.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--tile-border)); } .dcc-chip.bad b { color: var(--bad); } .dcc-saved { font-size: .8rem; color: var(--muted); margin-top: 6px; } /* Режим «По договору»: матрица обязательных документов */ .dcc-matrix td { vertical-align: top; } .dcc-matrix .dcc-na { display: none; } .dcc-matrix.show-na .dcc-na { display: table-row; opacity: .6; } .dcc-matrix tr.dcc-missing { background: color-mix(in srgb, var(--bad) 7%, transparent); } .dcc-matrix tr.dcc-manual { background: color-mix(in srgb, var(--mid) 8%, transparent); } .dcc-st { margin-right: 4px; } .dcc-up { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 6px 13px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .dcc-up:hover { filter: brightness(1.06); } .dcc-msg { margin-top: 10px; } .dcc-ok-msg { color: var(--good); font-size: .88rem; } .dcc-showna { margin-left: 14px; } /* Глубокие проверки (товары, количество, ТХ, конфликты, стадии, нарушения) */ .dcd-dim { color: var(--muted); } .dcd-error > td { background: color-mix(in srgb, var(--bad) 7%, transparent); } .dcd-warn > td { background: color-mix(in srgb, var(--mid) 8%, transparent); } .dcd-vgroup { margin: 10px 0 4px; } .dcd-vtitle { font-weight: 700; font-size: .92rem; margin-bottom: 6px; color: var(--text); } .dcd-vtitle.error { color: var(--bad); } .dcd-vtitle.warn { color: var(--mid); } html[data-theme="light"] .dcd-vtitle.warn { color: #8a5d12; } .dcd-v { border-left: 3px solid var(--tile-border); padding: 6px 0 6px 11px; margin-bottom: 7px; font-size: .87rem; color: var(--text); } .dcd-vtitle.error + .dcd-v, .dcd-vgroup .dcd-v { border-left-color: var(--tile-border); } .dcd-vsrc { font-size: .78rem; color: var(--muted); margin-bottom: 2px; } .dcd-vrec { font-size: .82rem; color: var(--accent); margin-top: 3px; } /* Мониторинг работы менеджеров по заявкам (31.07): очередь дел + три оси */ .mw-bar { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; flex-wrap: wrap; margin-bottom: .8rem; } .mw-days { padding: .35rem .6rem; border: 1px solid var(--tile-border); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: .85rem; } .mw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .6rem; margin-bottom: 1.1rem; } .mw-kpi { border: 1px solid var(--tile-border); border-radius: 10px; padding: .6rem .8rem; background: var(--tile-bg); display: flex; flex-direction: column; gap: .1rem; } .mw-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .mw-val { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; } .mw-hint { font-size: .74rem; color: var(--muted); } .mw-kpi.alert { border-color: color-mix(in srgb, var(--bad) 45%, var(--tile-border)); } .mw-kpi.alert .mw-val { color: var(--bad); } .mw-kpi.watch { border-color: color-mix(in srgb, var(--mid) 45%, var(--tile-border)); } .mw-kpi.watch .mw-val { color: var(--mid); } html[data-theme="light"] .mw-kpi.watch .mw-val { color: #8a5d12; } .mw-queue { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; } .mw-q { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; cursor: pointer; padding: .55rem .7rem; border: 1px solid var(--tile-border); border-radius: 9px; background: var(--tile-bg); } .mw-q:hover { background: color-mix(in srgb, var(--accent) 7%, var(--tile-bg)); } .mw-stripe { width: 3px; align-self: stretch; border-radius: 2px; flex: none; background: var(--tile-border); } .mw-q.mw-crit .mw-stripe { background: var(--bad); } .mw-q.mw-warn .mw-stripe { background: var(--mid); } .mw-qmain { flex: 1; min-width: 13rem; display: flex; flex-direction: column; } .mw-qsub { font-size: .78rem; color: var(--muted); margin-top: 2px; } .mw-table td { vertical-align: top; } .mw-sub { font-size: .76rem; color: var(--muted); margin-top: 2px; } .mw-dim { color: var(--muted); } .mw-worse { font-size: .76rem; color: var(--bad); } .mw-better { font-size: .76rem; color: var(--good); } .mw-proc { display: flex; flex-direction: column; gap: .35rem; } .mw-procrow { font-size: .86rem; color: var(--text); padding: .5rem .7rem; border: 1px solid var(--tile-border); border-left: 3px solid var(--mid); border-radius: 0 8px 8px 0; background: var(--tile-bg); } /* ============================================================================ CLEAN DATA — современная анимация (входы, микро-взаимодействия, блики) Намеренно НЕ анимируем строки больших таблиц (tbody tr) — иначе лаги на 7720 строках. Анимируем только карточки/панели/контролы. Всё уважает prefers-reduced-motion (внизу). ============================================================================ */ @keyframes kpiRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } } @keyframes overlayIn { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } } /* Вход панелей/таблиц/карточек разделов — мягкий подъём со стаггером */ .panel, .pj-table-wrap, .rp-panel, .au-table-wrap, .wr-panel, .dash-cols > * { animation: panelIn .45s cubic-bezier(.16,1,.3,1) both; } .dash-cols > *:nth-child(2) { animation-delay: .06s; } /* «Бегущий блик» по прогресс-барам — заметно, но не назойливо (один проход на показ) */ .kpi-bar, .bar-track, .pj-bar { position: relative; overflow: hidden; } .kpi-bar > span, .bar-fill, .pj-bar > span { position: relative; overflow: hidden; } .kpi-bar > span::after, .bar-fill::after, .pj-bar > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-130%); animation: sheen 1.4s ease-in-out .4s 2; } html[data-theme="dark"] .kpi-bar > span::after, html[data-theme="dark"] .bar-fill::after, html[data-theme="dark"] .pj-bar > span::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); } /* Микро-нажатие кнопок и плавный ховер (Clean Data: чёткая обратная связь) */ .pj-save, .pj-btn-ghost, .rp-csv, .au-back, .pj-back, .rp-back, .wh-tab, .wh-f, .dc-pick-files, .dc-pick-folder, .sb-mini { transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease; } .pj-save:hover, .dc-pick-files:hover { transform: translateY(-1px); } .pj-save:active, .pj-btn-ghost:active, .rp-csv:active, .wh-tab:active, .wh-f:active, .dc-pick-files:active, .dc-pick-folder:active { transform: scale(.97); } /* Анимированный индикатор активной вкладки (выезжает снизу) */ .wh-tab { position: relative; } .wh-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform .25s cubic-bezier(.16,1,.3,1); } .wh-tab.active::after { transform: scaleX(1); } /* Вход полноэкранных оверлеев разделов */ #warehouseOverlay > *, #financeOverlay > *, #ordersOverlay > *, #paymentsOverlay > *, #actsOverlay > *, #assemblyOverlay > *, #projectsOverlay > *, #reportsOverlay > *, #auditOverlay > *, #managersOverlay > *, #announcementsOverlay > *, #docCheckOverlay > *, #thOverlay > * { animation: overlayIn .35s cubic-bezier(.16,1,.3,1) both; } /* Строки таблиц — только плавный ховер (без entrance-анимации) */ .pj-table tbody tr, .rp-table tbody tr, .au-table tbody tr, .wr-cat, table tbody tr { transition: background-color .14s ease; } @media (prefers-reduced-motion: reduce) { .kpi-card, .panel, .pj-table-wrap, .rp-panel, .au-table-wrap, .wr-panel, .dash-cols > *, #warehouseOverlay > *, #financeOverlay > *, #ordersOverlay > *, #paymentsOverlay > *, #actsOverlay > *, #assemblyOverlay > *, #projectsOverlay > *, #reportsOverlay > *, #auditOverlay > *, #managersOverlay > *, #announcementsOverlay > *, #docCheckOverlay > *, #thOverlay > * { animation: none !important; } .kpi-bar > span::after, .bar-fill::after, .pj-bar > span::after { animation: none !important; content: none !important; } .pj-save:hover, .dc-pick-files:hover, .pj-save:active, .pj-btn-ghost:active, .wh-tab:active, .wh-f:active { transform: none !important; } body::before { animation: none !important; } } /* ============================================================================ AURORA-GLASS + ГРАДИЕНТНЫЕ АКЦЕНТЫ — «оживляж» поверх Clean Data. Стеклим только карточки/панели/сайдбар; data-таблицы остаются ПЛОТНЫМИ. ============================================================================ */ .kpi-card, .panel { background: color-mix(in srgb, var(--tile-bg) 80%, transparent); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); } .kpi-card:hover, .panel:hover { box-shadow: 0 16px 38px -18px color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 8px -4px rgba(0,0,0,.18); } html[data-theme="dark"] .kpi-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--tile-border)); box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--accent) 65%, transparent); } /* Бренд-текст ГАУ ЦТО — сплошной (официальный вид), адаптируется к теме */ .sb-logo-tx b { color: var(--text); -webkit-text-fill-color: var(--text); background: none; } /* «Печать»-штрих у заголовка сводки — градиент */ .dash-title::before { background: linear-gradient(180deg, var(--accent), var(--accent-2)) !important; } /* KPI обеспеченности (главная метрика «в норме») — градиентное число */ .kpi-pct.ok .kpi-value { background: linear-gradient(120deg, var(--good), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Первичная кнопка — градиент accent→микс с янтарём */ .pj-save { background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--accent-2))) !important; } /* Акцентная полоса KPI-карты на ховере — градиент (усиливаем) */ .kpi-card::before { background: linear-gradient(90deg, var(--accent), var(--accent-2), #8b5cf6) !important; height: 2.5px; } /* ============================================================================ ЛИЧНЫЙ КАБИНЕТ (персональный стартовый экран под роль) — #cabinetOverlay ============================================================================ */ #cabinetOverlay { position: fixed; inset: 0; z-index: 300; display: none; overflow-y: auto; background: radial-gradient(900px 600px at 50% -5%, var(--glow), transparent 60%), linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); } .cab-wrap { max-width: min(1480px, 96vw); margin: 0 auto; padding: 1.6rem 1.6rem 4rem; } .cab-loading, .cab-error { padding: 3rem 1rem; text-align: center; color: var(--muted); } .cab-error { color: var(--bad); } .cab-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; } .cab-hi { font-family: var(--font-display, var(--font-ui)); font-size: 1.7rem; font-weight: 700; margin: 0; letter-spacing: -.01em; } .cab-role { color: var(--muted); font-size: .9rem; margin-top: .25rem; } .cab-refresh { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .7rem; padding: .5rem .9rem; font-size: .82rem; cursor: pointer; transition: border-color .2s, background .2s; } .cab-refresh:hover { border-color: var(--accent); background: var(--tile-bg-h); } .cab-grid { display: grid; grid-template-columns: 1fr 360px; gap: 1.4rem; align-items: start; } @media (max-width: 1080px) { .cab-grid { grid-template-columns: 1fr; } } .cab-h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.2rem 0 .7rem; font-weight: 600; } .cab-col > .cab-h2:first-child { margin-top: 0; } /* KPI / «мои показатели» */ .cab-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; } .cab-kpi { position: relative; text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .9rem; padding: .9rem 1rem; cursor: pointer; display: flex; flex-direction: column; gap: .25rem; transition: transform .15s, border-color .2s, box-shadow .2s; } .cab-kpi:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.12); } .cab-kpi-lb { font-size: .78rem; color: var(--muted); } .cab-kpi-val { font-family: var(--font-mono); font-size: 1.45rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .cab-kpi-sub { font-size: .73rem; color: var(--muted); } .cab-kpi-go { position: absolute; top: .7rem; right: .8rem; color: var(--accent); opacity: 0; transition: opacity .2s; font-size: .9rem; } .cab-kpi:hover .cab-kpi-go { opacity: 1; } /* левая цветовая кромка по тону */ .cab-kpi::before { content: ""; position: absolute; left: 0; top: .7rem; bottom: .7rem; width: 3px; border-radius: 3px; background: var(--accent); } .cab-t-ok::before { background: var(--good); } .cab-t-warn::before { background: var(--mid); } .cab-t-bad::before { background: var(--bad); } .cab-t-info::before { background: var(--accent); } /* Задачи «мне» */ .cab-tasks { display: flex; flex-direction: column; gap: .55rem; } .cab-task { position: relative; display: flex; align-items: center; gap: .8rem; text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .8rem; padding: .7rem .9rem; cursor: pointer; transition: border-color .2s, background .2s; } .cab-task:hover { border-color: var(--accent); background: var(--tile-bg-h); } .cab-task-c { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; min-width: 2.4rem; text-align: center; padding: .15rem .45rem; border-radius: .5rem; background: color-mix(in srgb, var(--accent) 14%, transparent); } .cab-t-bad .cab-task-c { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); } .cab-t-warn .cab-task-c { background: color-mix(in srgb, var(--mid) 18%, transparent); color: var(--mid); } .cab-task-lb { flex: 1; font-size: .9rem; } .cab-go { color: var(--accent); opacity: 0; transition: opacity .2s; } .cab-task:hover .cab-go, .cab-qa:hover .cab-go, .cab-note:hover .cab-go { opacity: 1; } .cab-empty { color: var(--muted); font-size: .88rem; padding: .8rem .2rem; } .cab-empty.cab-ok { color: var(--good); } /* Быстрые действия */ .cab-qas { display: flex; flex-direction: column; gap: .5rem; } .cab-qa { position: relative; display: flex; align-items: center; justify-content: space-between; text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .7rem; padding: .65rem .85rem; cursor: pointer; font-size: .88rem; transition: border-color .2s, background .2s; } .cab-qa:hover { border-color: var(--accent); background: var(--tile-bg-h); } /* Уведомления */ .cab-notes { display: flex; flex-direction: column; gap: .5rem; } .cab-note { display: flex; gap: .7rem; align-items: flex-start; text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-border); border-left-width: 3px; border-radius: .7rem; padding: .6rem .8rem; cursor: pointer; transition: border-color .2s, background .2s; } .cab-note:hover { background: var(--tile-bg-h); } .cab-note.cab-t-bad { border-left-color: var(--bad); } .cab-note.cab-t-ok { border-left-color: var(--good); } .cab-note.cab-t-info { border-left-color: var(--accent); } .cab-note-dt { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); min-width: 3.4rem; padding-top: .15rem; } .cab-note-tx { display: flex; flex-direction: column; gap: .1rem; } .cab-note-tx b { font-size: .85rem; font-weight: 600; } .cab-note-tx small { font-size: .76rem; color: var(--muted); } /* ============================================================================ «ПРОСМОТР КАК РОЛЬ» (admin, тестирование) — выезжающая панель слева ============================================================================ */ .rsw-handle { position: fixed; right: 0; left: auto; top: 50%; transform: translateY(-50%); z-index: 1401; display: flex; flex-direction: column; align-items: center; gap: .45rem; background: var(--accent); color: #fff; border: none; border-radius: .7rem 0 0 .7rem; padding: .85rem .42rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.28); font-size: .72rem; font-weight: 600; letter-spacing: .02em; transition: padding .15s, filter .15s; } .rsw-handle .rsw-eye { display: flex; } .rsw-handle .rsw-htx { writing-mode: vertical-rl; white-space: nowrap; } .rsw-handle:hover { filter: brightness(1.08); padding-left: .62rem; } .rsw-handle.rsw-active { background: var(--mid); color: #2a1c00; } .rsw-backdrop { position: fixed; inset: 0; z-index: 1399; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .2s; } .rsw-backdrop.open { opacity: 1; pointer-events: auto; } .rsw-panel { position: fixed; right: 0; left: auto; top: 0; bottom: 0; width: 300px; max-width: 86vw; z-index: 1400; background: var(--bg-2); border-left: 1px solid var(--tile-border); box-shadow: -6px 0 24px rgba(0,0,0,.3); transform: translateX(100%); transition: transform .24s ease; overflow-y: auto; padding: 1rem 1rem 2rem; display: flex; flex-direction: column; gap: .8rem; } .rsw-panel.open { transform: translateX(0); } .rsw-head { display: flex; align-items: center; justify-content: space-between; } .rsw-title { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: 1rem; } .rsw-x { background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; } .rsw-x:hover { color: var(--text); } .rsw-note { color: var(--muted); font-size: .8rem; line-height: 1.45; margin: 0; } .rsw-roles { display: flex; flex-direction: column; gap: .5rem; } .rsw-role { text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .7rem; padding: .65rem .8rem; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; transition: border-color .2s, background .2s; } .rsw-role:hover { border-color: var(--accent); background: var(--tile-bg-h); } .rsw-role.rsw-cur { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .rsw-rl { font-size: .9rem; font-weight: 600; } .rsw-rl em { color: var(--accent); font-style: normal; font-weight: 600; font-size: .8rem; } .rsw-rs { font-size: .76rem; color: var(--muted); } .rsw-role.rsw-loading { opacity: .6; pointer-events: none; } .rsw-warn { color: var(--mid); font-size: .76rem; margin: .2rem 0 0; line-height: 1.4; } @media (max-width: 920px) { .rsw-handle .rsw-htx { display: none; } } /* ============================================================================ РАЗДЕЛ «ЗАЯВКИ НА ДОСТУП» (модерация регистраций, admin) — #registrationsOverlay ============================================================================ */ #registrationsOverlay, #staffOverlay { position: fixed; inset: 0; z-index: 300; display: none; overflow-y: auto; background: radial-gradient(900px 600px at 50% -5%, var(--glow), transparent 60%), linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); } #registrationsOverlay .pj-wrap, #staffOverlay .pj-wrap { max-width: min(1200px, 96vw); } /* Форма создания работника (раздел «Сотрудники») */ .st-card { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .8rem; padding: 1rem 1.1rem; margin-bottom: 1rem; } .st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; } .st-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--muted); } .st-hint { color: var(--muted); font-size: .72rem; margin-top: .5rem; } .st-role { min-width: 150px; } @media (max-width: 640px) { .st-grid { grid-template-columns: 1fr; } } .rg-tabs { display: flex; gap: .5rem; margin: .2rem 0 .8rem; flex-wrap: wrap; } .rg-tab { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--muted); border-radius: .6rem; padding: .42rem .85rem; font-size: .82rem; cursor: pointer; transition: all .15s; } .rg-tab:hover { border-color: var(--accent); color: var(--text); } .rg-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; } .rg-note { color: var(--muted); font-size: .82rem; margin: 0 0 1rem; } .rg-table-wrap { max-height: 74vh; overflow: auto; border: 1px solid var(--tile-border); border-radius: .8rem; } .rg-table { width: 100%; border-collapse: collapse; font-size: .86rem; background: var(--tile-bg); } .rg-table th { position: sticky; top: 0; background: var(--bg-2); text-align: left; padding: .6rem .8rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--tile-border); } .rg-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--tile-border); vertical-align: top; } .rg-table tbody tr:hover { background: var(--tile-bg-h); } .rg-mut { color: var(--muted); font-size: .8rem; } /* Привязка адреса к заявке школы: без recipient_id её кабинет пуст, поэтому строка заявки прямо подсвечивает проблему и даёт выбрать адрес из активных проектов. */ .rg-bind { margin-top: .4rem; display: flex; flex-direction: column; gap: .25rem; max-width: 260px; } .rg-bindwarn { font-size: .72rem; color: var(--bad); font-weight: 600; } .rg-addr { width: 100%; font-size: .78rem; padding: .3rem .45rem; border-radius: .45rem; border: 1px solid var(--tile-border); background: var(--tile-bg); color: inherit; } .rg-addr:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .rg-empty { text-align: center; color: var(--muted); padding: 1.5rem; } .rg-act { white-space: nowrap; } .rg-ok, .rg-no { border: none; border-radius: .55rem; padding: .4rem .7rem; font-size: .78rem; cursor: pointer; margin-right: .35rem; } .rg-ok { background: var(--good); color: #04261a; } .rg-no { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); } .rg-ok:hover { filter: brightness(1.06); } .rg-no:hover { background: color-mix(in srgb, var(--bad) 28%, transparent); } .rg-badge { font-size: .76rem; padding: .2rem .5rem; border-radius: .5rem; } .rg-badge.rg-approved { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); } .rg-badge.rg-rejected { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); } /* Бейдж числа ожидающих заявок на пункте сайдбара */ .sb-item { position: relative; } .sb-badge { position: absolute; top: 50%; right: .7rem; transform: translateY(-50%); min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: .6rem; background: var(--bad); color: #fff; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } body.sb-collapsed .sb-badge { top: .5rem; right: .5rem; transform: none; } /* ============================================================================ ФИНАНСЫ → «Контракты и товар»: 2 показателя-дашборда + сверка ============================================================================ */ .fcg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .2rem 0 1rem; } @media (max-width: 720px) { .fcg-cards { grid-template-columns: 1fr; } } .fcg-card { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 1rem; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; position: relative; overflow: hidden; } .fcg-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); } .fcg-card.alt::before { background: var(--accent-2); } .fcg-lb { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .fcg-val { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; } .fcg-card.alt .fcg-val { color: var(--accent-2); } .fcg-sub { font-size: .78rem; color: var(--muted); } .fcg-neg { color: var(--bad); } .fcg-pos { color: var(--good); } /* Сводка финансистов (шапка отчёта «как у финансистов») */ .fcg-fin { border: 1px solid var(--tile-border); border-radius: .9rem; padding: .7rem .9rem; margin: .2rem 0 1rem; background: color-mix(in srgb, var(--accent) 5%, var(--tile-bg)); } .fcg-fin-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin-bottom: .5rem; } .fcg-fin-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; } @media (max-width: 860px) { .fcg-fin-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .fcg-fin-row { grid-template-columns: repeat(2, 1fr); } } .fcg-fin-cell { display: flex; flex-direction: column; gap: .12rem; } .fcg-fin-cell span { font-family: var(--font-mono); font-weight: 700; font-size: 1.02rem; } .fcg-fin-cell small { font-size: .7rem; color: var(--muted); } .fcg-fin-cell.ok span { color: var(--good); } .fcg-fin-cell.low span { color: var(--bad); } /* ============================================================================ ДОСКА ЗАДАЧ (канбан) — #tasksOverlay ============================================================================ */ #tasksOverlay { position: fixed; inset: 0; z-index: 300; display: none; overflow-y: auto; background: radial-gradient(900px 600px at 50% -5%, var(--glow), transparent 60%), linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%); } .tb-wrap { max-width: min(1840px, 97vw); margin: 0 auto; padding: 1.4rem 1.4rem 2.4rem; } .tb-tools { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .tb-f { width: auto; min-width: 160px; padding: .5rem .75rem; text-align: left; font-size: .85rem; } .tb-mine { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .85rem; white-space: nowrap; cursor: pointer; padding: 0 .3rem; } .tb-hint { color: var(--muted); font-size: .82rem; margin: .1rem 0 1.1rem; line-height: 1.45; } .tb-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; } @media (max-width: 1100px) { .tb-board { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .tb-board { grid-template-columns: 1fr; } } .tb-col { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 1rem; display: flex; flex-direction: column; min-height: 140px; } .tb-col-head { display: flex; align-items: center; gap: .55rem; padding: .75rem .95rem; border-bottom: 1px solid var(--tile-border); font-size: .9rem; } .tb-col-head b { font-weight: 700; letter-spacing: .01em; } .tb-col-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); } .tb-col[data-status="new"] .tb-col-dot { background: #94a3b8; } .tb-col[data-status="in_progress"] .tb-col-dot { background: var(--accent); } .tb-col[data-status="review"] .tb-col-dot { background: #f59e0b; } .tb-col[data-status="done"] .tb-col-dot { background: var(--good); } .tb-col-cnt { margin-left: auto; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-2); border-radius: 999px; min-width: 22px; text-align: center; padding: .05rem .45rem; font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; } .tb-col-body { padding: .65rem; display: flex; flex-direction: column; gap: .6rem; min-height: 64px; transition: background .15s; max-height: 72vh; overflow-y: auto; border-radius: 0 0 1rem 1rem; } .tb-col-body.tb-over { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); } .tb-empty { color: var(--muted); text-align: center; padding: 1.2rem .5rem; font-size: .8rem; border: 1px dashed var(--tile-border); border-radius: .7rem; opacity: .8; } .tb-card { position: relative; display: flex; background: var(--bg); border: 1px solid var(--tile-border); border-radius: .8rem; overflow: hidden; cursor: pointer; transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; } .tb-card:hover { box-shadow: 0 8px 22px rgba(15,23,42,.13); transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--tile-border)); } .tb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tb-card[draggable="true"] { cursor: grab; } .tb-card[draggable="true"]:active { cursor: grabbing; } .tb-card.tb-dragging { opacity: .5; transform: scale(.98); } .tb-pri-bar { width: 4px; flex: none; border-radius: .8rem 0 0 .8rem; background: var(--muted); } .tb-pri-bar.tb-pri-low { background: #94a3b8; } .tb-pri-bar.tb-pri-normal { background: var(--accent); } .tb-pri-bar.tb-pri-high { background: var(--bad); } .tb-card-body { padding: .65rem .8rem; flex: 1; min-width: 0; } .tb-card-title { font-size: .88rem; font-weight: 600; line-height: 1.35; word-break: break-word; } .tb-card-foot { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; } .tb-asg { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; font-size: .76rem; color: var(--text); } .tb-asg-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; } .tb-asg-no { color: var(--muted); font-style: italic; } .tb-av { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; color: #fff; letter-spacing: .02em; } .tb-av-0 { background: #6366f1; } .tb-av-1 { background: #0ea5e9; } .tb-av-2 { background: #10b981; } .tb-av-3 { background: #f59e0b; } .tb-av-4 { background: #ec4899; } .tb-av-5 { background: #8b5cf6; } .tb-av-no { background: var(--tile-border); color: var(--muted); } .tb-chips { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; flex: none; } .tb-chip { display: inline-flex; align-items: center; gap: .22rem; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .tb-chip svg { width: 13px; height: 13px; } .tb-due { color: var(--text); } .tb-due.tb-over-d, .tb-over-d { color: var(--bad); font-weight: 700; } /* модалка карточки/формы */ #tbModal { position: fixed; inset: 0; z-index: 360; display: none; align-items: center; justify-content: center; padding: 1rem; } .tb-modal-bg { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); } .tb-modal-card { position: relative; z-index: 1; width: min(640px, 96vw); max-height: 90vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--tile-border); border-radius: 1.1rem; box-shadow: 0 28px 70px rgba(15,23,42,.4); animation: tbModalIn .18s ease-out; } @keyframes tbModalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } .tb-modal-head { display: flex; align-items: center; gap: .6rem; padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--tile-border); position: sticky; top: 0; background: var(--bg); border-radius: 1.1rem 1.1rem 0 0; z-index: 2; } .tb-modal-head h3 { font-size: 1.08rem; font-weight: 700; flex: 1; word-break: break-word; line-height: 1.3; } .tb-x { background: none; border: none; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .tb-x:hover { background: var(--tile-bg); color: var(--text); } .tb-modal-body { padding: 1.2rem 1.3rem 1.4rem; } /* поля формы/карточки — ПОЛНОШИРИННЫЕ, левое выравнивание (перекрывают числовой .pj-inp 78px) */ .tb-modal-body .pj-inp, .tb-modal-body select, .tb-modal-body textarea, .tb-fl .pj-inp, .tb-fl select, .tb-fl textarea { width: 100%; text-align: left; box-sizing: border-box; min-height: 42px; padding: .6rem .75rem; font-size: .9rem; font-family: inherit; border-radius: .6rem; background: var(--bg); border: 1px solid var(--tile-border); color: var(--text); } .tb-modal-body textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .tb-modal-body .pj-inp:focus, .tb-modal-body select:focus, .tb-modal-body textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .tb-fl { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; margin-bottom: 1rem; } .tb-fl > span:first-child, .tb-fl-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .tb-req { color: var(--bad); margin-left: .15rem; } .tb-help { color: var(--muted); font-size: .72rem; margin-top: -.55rem; margin-bottom: 1rem; line-height: 1.4; } .tb-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem .9rem; } @media (max-width: 560px) { .tb-fields, .tb-form-grid { grid-template-columns: 1fr; } } .tb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; margin-bottom: 1rem; } .tb-fields > div { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; min-width: 0; } .tb-k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .tb-pri-tag { display: inline-block; border-radius: .45rem; padding: .12rem .55rem; font-size: .78rem; font-weight: 600; color: #fff; width: fit-content; } .tb-pri-tag.tb-pri-low { background: #94a3b8; } .tb-pri-tag.tb-pri-normal { background: var(--accent); } .tb-pri-tag.tb-pri-high { background: var(--bad); } .tb-badge { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .45rem; padding: .15rem .55rem; font-size: .82rem; width: fit-content; } .tb-desc { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .7rem; padding: .8rem .9rem; font-size: .88rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin-bottom: 1rem; } .tb-actions-row { display: flex; gap: .5rem; margin: .2rem 0 1.1rem; flex-wrap: wrap; } .tb-cmt-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin: 1.1rem 0 .55rem; } .tb-cmts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; } .tb-cmt { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .7rem; padding: .55rem .75rem; } .tb-cmt-h { display: flex; justify-content: space-between; gap: .6rem; font-size: .74rem; color: var(--muted); margin-bottom: .3rem; } .tb-cmt-h b { color: var(--text); font-weight: 600; } .tb-cmt-b { font-size: .86rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .tb-cmt-add { display: flex; gap: .5rem; align-items: flex-end; } .tb-cmt-add textarea { flex: 1; min-height: 58px; } /* вложения в карточке задачи */ .tb-atts { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .65rem; } .tb-att { display: flex; align-items: center; gap: .55rem; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .6rem; padding: .45rem .7rem; font-size: .84rem; } .tb-att-ic { flex: none; opacity: .7; } .tb-att-name { flex: 1; min-width: 0; text-align: left; background: none; border: none; color: var(--accent-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; padding: 0; } .tb-att-name:hover { text-decoration: underline; } .tb-att-sz { color: var(--muted); font-size: .72rem; flex: none; font-variant-numeric: tabular-nums; } .tb-att-del { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; width: 24px; height: 24px; border-radius: .4rem; transition: background .15s, color .15s; } .tb-att-del:hover { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); } .tb-att-add { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; } .tb-att-hint { color: var(--muted); font-size: .72rem; } @media (prefers-reduced-motion: reduce) { .tb-card, .tb-x, .tb-att-del { transition: none; } .tb-card:hover { transform: none; } .tb-modal-card { animation: none; } } /* ── Каталог: читаемость строк (UI/UX аудит 2026-07-01) ────────────────────── Строки каталога свёрстаны тёмными Tailwind-классами (text-slate-400/violet-300/ bg-slate-700), которые на светлой теме выцветали до нечитаемого. Даём бейджам семантические классы с контрастом AA в ОБЕИХ темах + показываем код и цвет в строке (различать одноимённые варианты) + зебра для скана. */ .cat-name { font-weight: 600; color: var(--text); } .cat-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: 3px; font-size: 11.5px; line-height: 1.3; } .cat-code { font-family: var(--font-mono, ui-monospace, monospace); color: var(--muted); } .cat-color { font-weight: 600; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-tag, .cat-asm { display: inline-flex; align-items: center; border-radius: .5rem; padding: .14rem .5rem; font-size: 11.5px; font-weight: 600; white-space: nowrap; } html[data-theme="light"] .cat-tag { background: #ede9fe; color: #5b21b6; } html[data-theme="light"] .cat-asm { background: #eef2f7; color: #475569; } html[data-theme="light"] .cat-asm.cat-asm-req { background: #fef3c7; color: #92400e; } html[data-theme="light"] .cat-color { color: #b0431f; } html[data-theme="dark"] .cat-tag { background: rgba(167,139,250,.20); color: #c4b5fd; } html[data-theme="dark"] .cat-asm { background: rgba(148,163,184,.18); color: #cbd5e1; } html[data-theme="dark"] .cat-asm.cat-asm-req { background: rgba(251,191,36,.20); color: #fcd34d; } html[data-theme="dark"] .cat-color { color: #fca5a5; } html[data-theme="light"] [data-frozen-key="catalog"] tbody tr:nth-child(even) { background: #f8fafc; } html[data-theme="light"] [data-frozen-key="catalog"] tbody tr:hover { background: #eff6ff; } html[data-theme="light"] [data-frozen-key="catalog"] .text-slate-400 { color: #475569 !important; } /* ── Лотирование: форма лота (UI/UX 2026-07-01) ─────────────────────────────── */ .lt-form { max-width: 920px; } .lt-lbl { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin: .6rem 0 .25rem; } .lt-irow { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; } .lt-iprod { flex: 1; min-width: 0; position: relative; } .lt-irow .lt-iname { width: 100%; } .lt-irow .lt-iqty { width: 100px; flex: none; text-align: right; } .lt-prodres { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .5rem; box-shadow: 0 8px 24px var(--shadow); max-height: 220px; overflow: auto; } .lt-prodres:empty { display: none; } .lt-idel { flex: none; width: 30px; height: 30px; border: 1px solid var(--tile-border); background: var(--bg); color: var(--muted); border-radius: .5rem; cursor: pointer; line-height: 1; } .lt-idel:hover { color: #dc2626; border-color: #dc2626; } .lt-recres { display: flex; flex-direction: column; gap: 2px; margin-top: .3rem; max-height: 220px; overflow: auto; } .lt-recopt { text-align: left; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .5rem; padding: .4rem .6rem; cursor: pointer; font-size: .82rem; color: var(--text); } .lt-recopt:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--tile-bg)); } .lt-chip b { cursor: pointer; margin-left: .25rem; } /* Кол-во, подтянутое из лота (интеграция Контракты↔Лотирование) — мягкая подсветка, значение редактируемо */ .item-qty.lot-qty { background: rgba(34,211,238,.16) !important; border-color: rgba(34,211,238,.55) !important; box-shadow: inset 0 0 0 1px rgba(34,211,238,.28); } html[data-theme="light"] .item-qty.lot-qty { background: #cffafe !important; border-color: #0891b2 !important; color: #0e7490 !important; } /* ── Документы контракта (под-панель «Документы»; поверхность тёмная, как «Заявки»/«Проверки») ── */ .cdoc-upload { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); border-radius: .9rem; padding: .9rem 1rem; margin-bottom: 1rem; } .cdoc-up-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; align-items: center; } .cdoc-up-row:last-of-type { margin-bottom: 0; } .cdoc-sel, .cdoc-inp, .cdoc-file { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: .6rem; color: #e2e8f0; font-size: .85rem; padding: .5rem .7rem; } .cdoc-sel { min-width: 130px; } .cdoc-inp { flex: 1; min-width: 180px; } .cdoc-file { flex: 1; min-width: 200px; color: #cbd5e1; } .cdoc-file::file-selector-button { background: rgba(255,255,255,.1); border: 0; border-radius: .4rem; color: #e2e8f0; padding: .25rem .6rem; margin-right: .6rem; cursor: pointer; } .cdoc-btn-primary { background: var(--accent, #22d3ee); color: #06111f; font-weight: 700; font-size: .85rem; border: 0; border-radius: .6rem; padding: .55rem 1.1rem; cursor: pointer; transition: filter .15s, opacity .15s; white-space: nowrap; } .cdoc-btn-primary:hover { filter: brightness(1.08); } .cdoc-btn-primary:disabled { opacity: .6; cursor: default; } .cdoc-hint { font-size: .72rem; color: #94a3b8; margin: .5rem 0 0; } .cdoc-empty { padding: 2.5rem 1rem; text-align: center; font-size: .85rem; color: #94a3b8; } .cdoc-list { display: flex; flex-direction: column; gap: .5rem; } .cdoc-item { display: flex; align-items: center; gap: .75rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); border-radius: .7rem; padding: .6rem .8rem; transition: background .15s, border-color .15s; } .cdoc-item:hover { background: rgba(255,255,255,.07); border-color: rgba(34,211,238,.25); } .cdoc-type { flex-shrink: 0; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .2rem .5rem; border-radius: .4rem; background: rgba(148,163,184,.18); color: #cbd5e1; min-width: 66px; text-align: center; } .cdoc-type-invoice { background: rgba(34,197,94,.16); color: #4ade80; } .cdoc-type-upd { background: rgba(34,211,238,.16); color: #22d3ee; } .cdoc-type-act { background: rgba(59,130,246,.16); color: #60a5fa; } .cdoc-type-claim { background: rgba(239,68,68,.16); color: #f87171; } .cdoc-type-contract { background: rgba(168,85,247,.16); color: #c084fc; } .cdoc-main { flex: 1; min-width: 0; } .cdoc-name { font-size: .85rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cdoc-meta { font-size: .72rem; color: #94a3b8; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cdoc-dl, .cdoc-del { flex-shrink: 0; width: 32px; height: 32px; border-radius: .5rem; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #cbd5e1; cursor: pointer; font-size: .9rem; line-height: 1; transition: background .15s, color .15s, border-color .15s; } .cdoc-dl:hover { background: rgba(34,211,238,.15); color: #22d3ee; border-color: rgba(34,211,238,.4); } .cdoc-del:hover { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.4); } /* ── Претензии по контракту (реестр в под-панели карточки) ─────────────────── */ .ccl-form { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); border-radius: .9rem; padding: .9rem 1rem; margin-bottom: .8rem; display: flex; flex-direction: column; gap: .5rem; } .ccl-form-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .ccl-inp { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #e2e8f0; border-radius: .55rem; padding: .5rem .65rem; font-size: .85rem; } .ccl-inp:focus { outline: none; border-color: rgba(251,191,36,.5); } .ccl-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; } .ccl-list { display: flex; flex-direction: column; gap: .55rem; } .ccl-item { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); border-radius: .8rem; padding: .65rem .85rem; } .ccl-item-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .ccl-num { font-weight: 700; color: #fbbf24; font-size: .9rem; } .ccl-meta { color: #94a3b8; font-size: .78rem; } .ccl-subject { margin-top: .35rem; font-size: .86rem; color: #e2e8f0; line-height: 1.45; } .ccl-note { margin-top: .25rem; font-size: .78rem; color: #94a3b8; font-style: italic; } .ccl-files { margin-top: .45rem; display: flex; gap: .35rem; flex-wrap: wrap; } .ccl-file { border: 1px solid rgba(34,211,238,.3); background: rgba(34,211,238,.08); color: #67e8f9; border-radius: .45rem; padding: .2rem .55rem; font-size: .74rem; cursor: pointer; transition: background .15s; } .ccl-file:hover { background: rgba(34,211,238,.18); } .ccl-status { border-radius: .5rem; padding: .25rem .55rem; font-size: .76rem; font-weight: 700; border: 1px solid transparent; cursor: pointer; } select.ccl-status { background-color: rgba(2,6,23,.6); } .ccl-st-sent { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); } .ccl-st-answered { color: #67e8f9; border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.1); } .ccl-st-satisfied { color: #4ade80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.1); } .ccl-st-rejected { color: #f87171; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.1); } .ccl-st-court { color: #c4b5fd; border-color: rgba(167,139,250,.4); background: rgba(167,139,250,.1); } /* светлая тема */ html[data-theme="light"] .ccl-form, html[data-theme="light"] .ccl-item { background: #fff; border-color: var(--tile-border, #e2e8f0); } html[data-theme="light"] .ccl-inp { background: #fff; color: #0f172a; border-color: #cbd5e1; } html[data-theme="light"] .ccl-subject { color: #1e293b; } html[data-theme="light"] .ccl-meta, html[data-theme="light"] .ccl-note { color: #64748b; } html[data-theme="light"] .ccl-num { color: #b45309; } html[data-theme="light"] select.ccl-status { background-color: #fff; } html[data-theme="light"] .ccl-st-sent { color: #b45309; } html[data-theme="light"] .ccl-st-answered { color: #0e7490; } html[data-theme="light"] .ccl-st-satisfied { color: #15803d; } html[data-theme="light"] .ccl-st-rejected { color: #b91c1c; } html[data-theme="light"] .ccl-st-court { color: #6d28d9; } /* «Документы» контракта: блок был захардкожен под тёмную поверхность (имена файлов и поля формы «белым по белому» в светлой теме) — light-переопределения по образцу .ccl-* */ html[data-theme="light"] .cdoc-upload, html[data-theme="light"] .cdoc-item { background: #fff; border-color: var(--tile-border, #e2e8f0); } html[data-theme="light"] .cdoc-item:hover { background: #f8fafc; } html[data-theme="light"] .cdoc-sel, html[data-theme="light"] .cdoc-inp, html[data-theme="light"] .cdoc-file { background: #fff; color: #0f172a; border-color: #cbd5e1; } html[data-theme="light"] .cdoc-file::file-selector-button { background: #e2e8f0; color: #1e293b; } html[data-theme="light"] .cdoc-name { color: #0f172a; } html[data-theme="light"] .cdoc-meta, html[data-theme="light"] .cdoc-hint, html[data-theme="light"] .cdoc-empty { color: #64748b; } html[data-theme="light"] .cdoc-type { background: #e2e8f0; color: #475569; } html[data-theme="light"] .cdoc-type-invoice { background: #dcfce7; color: #15803d; } html[data-theme="light"] .cdoc-type-upd { background: #cffafe; color: #0e7490; } html[data-theme="light"] .cdoc-type-act { background: #dbeafe; color: #1d4ed8; } html[data-theme="light"] .cdoc-type-claim { background: #fee2e2; color: #b91c1c; } html[data-theme="light"] .cdoc-type-contract { background: #f3e8ff; color: #7e22ce; } html[data-theme="light"] .cdoc-dl, html[data-theme="light"] .cdoc-del { background: #f1f5f9; color: #475569; border-color: #cbd5e1; } html[data-theme="light"] .cdoc-btn-primary { color: #fff; } html[data-theme="light"] .ccl-file { color: #0e7490; border-color: rgba(14,116,144,.35); background: rgba(14,116,144,.08); } /* CTA-кнопки: реликтовый бирюзовый #00211d/#04261a как текст на текущем акценте светлой темы давал контраст ~2.4:1 — главные кнопки полунечитаемы */ html[data-theme="light"] .pj-save, html[data-theme="light"] .rp-run { color: #fff !important; } html[data-theme="light"] .rg-ok { color: #fff; } /* «К оплате» (этап 3.1): доступно к оплате / оплачено вперёд приёмки */ .pm-pay-do { color: var(--good, #22c55e); font-variant-numeric: tabular-nums; } .pm-pay-over { color: var(--mid, #f59e0b); font-variant-numeric: tabular-nums; } html[data-theme="light"] .pm-pay-do { color: #047857; } html[data-theme="light"] .pm-pay-over { color: #92400e; } /* «Ожидаемые поступления» на складе (этап 5): просроченные заявки поставщику */ .wh-exp-overdue td { background: color-mix(in srgb, var(--bad, #ef4444) 8%, transparent); } .wh-exp-late { color: var(--bad, #ef4444); } html[data-theme="light"] .wh-exp-late { color: #b91c1c; } /* «Брак и претензии» (этап 4): маркеры проблем и просрочки */ .ac2-def-bad { color: var(--bad, #ef4444); font-weight: 700; } .ac2-def-mid { color: var(--mid, #f59e0b); font-weight: 700; } .ac2-def-claim { color: var(--accent); font-weight: 600; white-space: nowrap; } .ac2-claim-overdue td { background: color-mix(in srgb, var(--bad, #ef4444) 9%, transparent); } html[data-theme="light"] .ac2-def-bad { color: #b91c1c; } html[data-theme="light"] .ac2-def-mid { color: #92400e; } /* «АПП подписан» — бейдж финализации адреса в ЛК (этап 2.2 аудита 2026-07-13) */ .pj-ho-badge { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid rgba(52,211,153,.45); background: rgba(52,211,153,.12); color: #34d399; border-radius: .55rem; padding: .3rem .6rem; font-size: .74rem; font-weight: 700; white-space: nowrap; } html[data-theme="light"] .pj-ho-badge { color: #047857; background: #d1fae5; border-color: #6ee7b7; } /* ── Вкладка «Совместимость» карточки проекта (ТЗ 2026-07-10) ── */ .cmp-stages { display: inline-flex; border: 1px solid var(--tile-border); border-radius: 9px; overflow: hidden; } .cmp-stage { padding: .3rem .7rem; font-size: .74rem; font-weight: 700; border: 0; background: none; color: var(--muted); cursor: pointer; } .cmp-stage.active { background: var(--accent); color: #fff; } .cmp-sec { padding: .3rem .7rem; font-size: .74rem; font-weight: 700; border: 1px solid var(--tile-border); border-radius: 9px; background: none; color: var(--muted); cursor: pointer; } .cmp-sec.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .cmp-grp { border: 1px solid var(--tile-border); border-radius: 11px; margin-bottom: .55rem; overflow: hidden; } .cmp-head { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; align-items: center; padding: .55rem .8rem; cursor: pointer; background: color-mix(in srgb, var(--accent) 4%, transparent); } .cmp-head:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .cmp-who { min-width: 230px; } .cmp-num { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; } .cmp-kv { font-size: .66rem; color: var(--muted); } .cmp-kv b { display: block; font-size: .8rem; color: var(--text); font-variant-numeric: tabular-nums; } .cmp-kv b.ok { color: var(--good); } .cmp-kv b.bad { color: var(--bad); } .cmp-sub { display: block; font-size: .62rem; color: var(--muted); } .cmp-sub.x2 { color: var(--mid); font-weight: 600; } .cmp-chev { margin-left: auto; color: var(--accent); font-size: .72rem; font-weight: 700; white-space: nowrap; } .cmp-bdg { display: inline-flex; align-items: center; font-size: .64rem; font-weight: 700; padding: .05rem .45rem; border-radius: 99px; white-space: nowrap; } .cmp-bdg.ok { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good); } .cmp-bdg.warn { background: color-mix(in srgb, var(--mid) 13%, transparent); color: var(--mid); } .cmp-bdg.bad { background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad); } .cmp-bdg.mut { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); } html[data-theme="light"] .cmp-bdg.ok { color: #15803d; } html[data-theme="light"] .cmp-bdg.warn { color: #b45309; } /* ── Раздел контракта по проектам (фаза 1 целевой модели 2026-07-14) ── */ .csp-table { border-collapse: collapse; font-size: .72rem; } .csp-table th, .csp-table td { border: 1px solid color-mix(in srgb, var(--tile-border) 80%, transparent); padding: .3rem .45rem; vertical-align: top; } .csp-table th { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: color-mix(in srgb, var(--tile-border) 25%, transparent); } .csp-cell.csp-on { background: color-mix(in srgb, var(--accent) 7%, transparent); } .csp-cell.csp-empty { color: var(--muted); text-align: center; } .csp-pend { color: var(--mid); font-weight: 600; } .csp-sub { color: var(--muted); font-size: .64rem; } .csp-code { font-family: var(--font-mono, monospace); font-size: .64rem; color: var(--muted); } .csp-tot td { font-weight: 700; background: color-mix(in srgb, var(--tile-border) 22%, transparent); } .csp-fit-ok { color: var(--good); font-weight: 700; font-size: .66rem; } .csp-fit-bad { color: var(--bad); font-weight: 700; font-size: .66rem; } html[data-theme="light"] .csp-fit-ok { color: #15803d; } html[data-theme="light"] .csp-pend { color: #b45309; } /* ── Воронка проекта (фаза 4 целевой модели 2026-07-14) ── */ .pjf-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: .35rem; margin-bottom: .6rem; } .pjf-step { border: 1px solid var(--tile-border); border-radius: .55rem; padding: .35rem .65rem; background: color-mix(in srgb, var(--tile-bg) 70%, transparent); min-width: 108px; } .pjf-step b { display: block; font-size: .82rem; font-variant-numeric: tabular-nums; } .pjf-step span { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .pjf-step i { display: block; font-style: normal; font-size: .64rem; color: var(--muted); } .pjf-arr { align-self: center; color: var(--muted); font-weight: 700; } .pjf-so { align-self: center; margin-left: auto; font-size: .72rem; color: var(--muted); } /* ─── Цветовая база потребности (2026-07-23) ───────────────────────────── */ .pj-color-wrap { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; } .pj-color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--tile-border); flex: none; } .rz-mode { display: inline-flex; align-items: center; gap: .3rem; margin-right: .6rem; font-size: .84rem; cursor: pointer; user-select: none; } .rz-mode input { accent-color: var(--accent); } .rz-chip { display: inline-flex; align-items: center; gap: .25rem; margin: 0 .35rem .4rem 0; padding: .3rem .6rem; font-size: .8rem; border: 1px solid var(--tile-border); border-radius: 999px; background: var(--tile-bg); cursor: pointer; } .rz-chip:hover { border-color: var(--accent); color: var(--accent); } .rz-ready { display: inline-flex; align-items: center; gap: .3rem; margin-right: .6rem; padding: .3rem .65rem; font-size: .82rem; border-radius: .6rem; border: 1px solid var(--tile-border); background: var(--tile-bg); white-space: nowrap; } .rz-ready b { color: var(--accent-2); } .rzp-dim td { opacity: .55; } .rzp-card .pj-sec-r { display: flex; align-items: center; gap: .4rem; } /* Инфо-вариант плашки лимита (2026-07-27): сверх плана спецификации, но деньги ЦС согласованы в ЕАИСТ — нейтральное информирование вместо предупреждения */ .o-limit-warn.o-limit-info { background: rgba(2, 132, 199, .08); border-color: rgba(2, 132, 199, .35); color: var(--accent-2); } html[data-theme="dark"] .o-limit-warn.o-limit-info { color: #7dd3fc; } /* ── Проверка ЛК: превью «как видит школа» (2026-07-28) ─────────────────── */ .pj-preview-banner { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-2); border-radius: .7rem; padding: .6rem .9rem; font-size: .88rem; font-weight: 600; margin-bottom: .7rem; } .pj-school-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .pj-school-head #pjSchoolView { margin-left: auto; } .pj-sec-preview { position: relative; } .pj-sec-preview input, .pj-sec-preview select, .pj-sec-preview textarea, .pj-sec-preview button { opacity: .85; cursor: not-allowed; } /* ── Доска объявлений (2026-07-28) ──────────────────────────────────────── */ .an-card { border: 1px solid var(--tile-border); border-radius: .8rem; background: var(--tile-bg); padding: .8rem 1rem; margin-bottom: .7rem; } .an-card.an-off { opacity: .55; } .an-card-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; } .an-card-head .an-acts { margin-left: auto; display: flex; gap: .4rem; } .an-body { margin: .45rem 0 .2rem; white-space: pre-wrap; font-size: .9rem; } .an-aud { margin-top: .35rem; font-size: .8rem; color: var(--muted); display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; } .an-form { max-width: 760px; display: flex; flex-direction: column; gap: .8rem; } .an-form > label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); } .an-ta { width: 100%; text-align: left; resize: vertical; font: inherit; } .an-aud-block { border: 1px solid var(--tile-border); border-radius: .8rem; padding: .7rem .9rem; } .an-aud-block h4 { margin: 0 0 .5rem; font-size: .85rem; } .an-chks { display: flex; flex-wrap: wrap; gap: .35rem .9rem; } .an-chk { display: flex; align-items: center; gap: .4rem; font-size: .86rem; cursor: pointer; } .an-addr-list { max-height: 300px; overflow: auto; border: 1px solid var(--tile-border); border-radius: .6rem; padding: .4rem .6rem; margin-top: .4rem; display: flex; flex-direction: column; gap: .25rem; } .an-addr .pj-code { margin-left: .3rem; } /* ── Объявления в «Моём кабинете» ───────────────────────────────────────── */ .cab-anns { margin: 0 0 1rem; } .cab-ann { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--tile-border)); background: color-mix(in srgb, var(--accent) 6%, var(--tile-bg)); border-radius: .8rem; padding: .7rem .95rem; margin-bottom: .55rem; } .cab-ann-head { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; } .cab-ann-meta { margin-left: auto; font-size: .78rem; color: var(--muted); } .cab-ann-body { margin-top: .35rem; font-size: .88rem; white-space: pre-wrap; } /* ── Школьный вид ЛК: вкладки Потребность/Приёмка (2026-07-28) ──────────── */ .pj-ltabs { display: flex; gap: .4rem; margin: .8rem 0 .2rem; border-bottom: 1px solid var(--tile-border); } .pj-ltab-body { margin-top: .6rem; } .pj-merged-docs .pj-docs { margin-top: .25rem; } /* ── Приёмка ЛК: группировка по поставщикам (2026-07-28) ────────────────── */ .pj-dl-group td { background: color-mix(in srgb, var(--accent) 7%, var(--tile-bg)); font-weight: 700; font-size: .86rem; border-top: 2px solid color-mix(in srgb, var(--accent) 30%, var(--tile-border)); } .pj-dl-sup { font-size: .85rem; } /* ── Документы под поставку в приёмке ЛК (2026-07-28) ───────────────────── */ .pj-dl-docsrow td { background: color-mix(in srgb, var(--accent) 3%, transparent); font-size: .82rem; padding-top: .35rem; padding-bottom: .45rem; border-bottom: 1px solid var(--tile-border); } .pj-dl-docsrow .pj-doc-dl { margin-right: .15rem; } .pj-sdoc-add { font-size: .78rem; padding: .2rem .55rem; margin-left: .4rem; cursor: pointer; } /* ── Вложения объявлений (2026-07-28) ───────────────────────────────────── */ .an-file { color: var(--accent-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .an-file:hover { color: var(--accent); } .an-files-tail { margin-top: .4rem; display: flex; gap: .7rem; flex-wrap: wrap; } .an-ta-hint { display: block; font-size: .78rem; margin: .15rem 0 .3rem; } .an-attach-btn { font-size: .78rem; padding: .15rem .5rem; cursor: pointer; } .an-ta-drag { outline: 2px dashed var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 6%, transparent); } .an-up-state { display: block; margin-top: .25rem; font-size: .8rem; } /* ── Обязательная дата поставки в мастере заявки (2026-07-28) ───────────── */ .o-req { color: var(--bad); font-weight: 700; margin-left: .1rem; } .o-due-missing { outline: 2px solid var(--bad); outline-offset: 1px; } /* ── Отчёт «Готовность к заявкам» (2026-07-29) ──────────────────────────── */ .rd-chip { cursor: pointer; transition: border-color .15s, background .15s; } .rd-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .rd-chip-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } /* ── Аванс по заявке (2026-07-29) ───────────────────────────────────────── */ .o-adv { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--tile-border)); border-radius: .8rem; background: color-mix(in srgb, var(--accent) 5%, var(--tile-bg)); padding: .7rem .95rem; margin-top: .7rem; } .o-adv-remind { margin-top: .4rem; font-size: .88rem; } .o-adv-remind-bad { color: var(--bad); font-weight: 600; } .o-adv-due { color: var(--muted); font-size: .82rem; } .o-adv-overdue { color: var(--bad); font-weight: 700; font-size: .84rem; } .o-adv-form { margin-top: .5rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .o-adv-sum { margin-top: .35rem; font-size: .9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .o-adv-steps { margin-top: .5rem; display: flex; flex-direction: column; gap: .3rem; } .o-adv-step { font-size: .86rem; color: var(--muted); } .o-adv-step.o-adv-done { color: var(--text); } .o-adv-chk { cursor: pointer; display: flex; align-items: center; gap: .45rem; } /* ── Условия оплаты договора в блоке аванса (2026-07-29) ────────────────── */ .o-adv-terms { margin-top: .35rem; font-size: .82rem; color: var(--muted); } .o-adv-terms b { color: var(--accent-2); } /* ── Этапы оплат по заявке (2026-07-30): чек-лист аванс/поставка/монтаж ──── */ .o-pay-stages { margin-top: .55rem; display: flex; flex-direction: column; gap: .45rem; } .o-pay-stage { border-left: 3px solid var(--tile-border); padding: .35rem .7rem; border-radius: .35rem; } .o-pay-h { font-size: .9rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .o-pay-ico { flex: none; } .o-pay-b { margin-left: 1.55rem; } .o-pay-waiting { opacity: .75; } /* «рано» — серым */ .o-pay-ready, .o-pay-submitted, .o-pay-form { /* активный этап — подсветка */ border-left-color: var(--mid); background: color-mix(in srgb, var(--mid) 7%, transparent); } .o-pay-paid { border-left-color: var(--good); } .o-pay-paid .o-pay-h { color: var(--text); } /* ============================================================================ ИНСТРУКЦИИ ВНУТРИ СИСТЕМЫ (2026-08-11) — школа читает справку там, где работает. Окно наследует .imp-overlay; здесь — читаемая колонка текста и скриншоты. ============================================================================ */ .gd-box { max-width: min(920px, 94vw); display: flex; flex-direction: column; max-height: 86vh; } .gd-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; } .gd-head .imp-title { flex: 1; min-width: 0; } .gd-dl { flex: none; padding: .35rem .7rem; font-size: .78rem; } .gd-body { overflow-y: auto; padding: .2rem .2rem 1rem; } .gd-h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); margin: .2rem 0 .6rem; } .gd-h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--accent-2); margin: 1.6rem 0 .5rem; padding-top: .9rem; border-top: 1px solid var(--tile-border); } .gd-body > .gd-h2:first-child { border-top: none; padding-top: 0; margin-top: 0; } .gd-lead { font-size: .95rem; color: var(--muted); line-height: 1.6; margin: 0 0 1rem; } .gd-p { font-size: .9rem; color: var(--text); line-height: 1.65; margin: 0 0 .7rem; } .gd-ul { margin: 0 0 .8rem 1.1rem; padding: 0; } .gd-ul li { font-size: .9rem; color: var(--text); line-height: 1.6; margin-bottom: .25rem; } /* скриншот интерфейса: рамка, чтобы не сливался с фоном страницы */ .gd-shot { margin: .6rem 0 .5rem; } .gd-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--tile-border); border-radius: .6rem; box-shadow: 0 6px 24px -12px rgba(20, 30, 50, .35); } /* подписи-выноски «1 — что это» под скриншотом */ .gd-legend { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; } .gd-legend li { display: flex; gap: .5rem; align-items: baseline; font-size: .85rem; color: var(--text); line-height: 1.55; } .gd-num { flex: none; min-width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* Карточка «Инструкция» в личном кабинете */ .cab-guide { margin-bottom: 1rem; } .cab-guide-btn { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--tile-border); background: var(--tile-bg); border-radius: .8rem; padding: .8rem .9rem; transition: border-color .15s, transform .15s; } .cab-guide-btn:hover { border-color: var(--accent); transform: translateY(-1px); } .cab-guide-hi .cab-guide-btn { border-color: color-mix(in srgb, var(--accent) 45%, var(--tile-border)); background: color-mix(in srgb, var(--accent) 6%, var(--tile-bg)); } .cab-guide-ic { font-size: 1.4rem; line-height: 1; flex: none; } .cab-guide-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cab-guide-tx b { font-size: .92rem; color: var(--text); } .cab-guide-tx small { font-size: .76rem; color: var(--muted); line-height: 1.4; } /* ── Расшифровка платежа (2026-08-11): строка реестра кликабельна ─────────── */ .pj-table tbody tr.bs-row { cursor: pointer; } .imp-tbl tr.bd-addr td { background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: .8rem; padding-top: .45rem; padding-bottom: .35rem; } /* ── Предпросмотр выписки (2026-08-10, правка 11.08) ──────────────────────── Замечание должно ЧИТАТЬСЯ: обрезка в одну строку прятала причину под многоточие (фидбэк юзера). Переносим в 2 строки и не даём колонке съезжать за край окна; полный текст остаётся в подсказке. Ширину держим, чтобы строки не раздувались. */ .imp-tbl td.bs-note { min-width: 260px; max-width: 340px; font-size: .72rem; color: var(--muted); white-space: normal; line-height: 1.35; /* 3 строки: у платежа бывает сразу два замечания (заявка + ЦС), в две они не влезали */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .imp-tbl td, .imp-tbl th { vertical-align: middle; } /* длинные значения не должны распирать таблицу до горизонтального скролла */ .imp-tbl td:nth-child(4) { max-width: 190px; } .imp-tbl td:nth-child(5) { max-width: 210px; white-space: normal; } /* ── Разбивка денег договора по целям под блокировкой (2026-08-11) ───────── */ .o-csb-legacy { color: var(--muted); } /* предупреждение (не блок) — янтарным, а не красным */ .o-sum-warn { color: var(--mid) !important; background: color-mix(in srgb, var(--mid) 10%, transparent) !important; border-color: color-mix(in srgb, var(--mid) 40%, transparent) !important; } /* Мониторинг денег ЦС в мастере: полоса «свободно по целям» */ .o-csm { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; } .o-csm-lb { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .o-csm-cell { display: inline-flex; flex-direction: column; gap: 1px; padding: .3rem .6rem; border: 1px solid var(--tile-border); border-radius: .5rem; background: var(--tile-bg); line-height: 1.15; } .o-csm-cell b { font-family: var(--font-mono); font-size: .84rem; } .o-csm-cell small { font-size: .66rem; color: var(--muted); } .o-csm-cell.is-cur { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); } .o-csm-ok b { color: var(--good); } .o-csm-mid b { color: var(--mid); } .o-csm-bad b { color: var(--bad); } .o-csm-note { font-size: .72rem; color: var(--muted); } .o-csb { margin-top: .5rem; font-size: .8rem; font-weight: 400; } .o-csb ul { margin: .25rem 0 0; padding-left: 1.1rem; } .o-csb li { margin-bottom: .15rem; line-height: 1.5; } /* ── Факт по выписке в блоке оплат заявки (2026-08-10) ──────────────────── */ .o-adv-bank { margin-top: .7rem; border-top: 1px dashed var(--tile-border); padding-top: .6rem; } .o-adv-bank > b { font-size: .88rem; color: var(--good); } .o-bank-tbl { width: 100%; border-collapse: collapse; margin-top: .4rem; font-size: .8rem; } .o-bank-tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: .72rem; padding: .25rem .5rem; border-bottom: 1px solid var(--tile-border); white-space: nowrap; } .o-bank-tbl td { padding: .3rem .5rem; border-bottom: 1px solid var(--tile-border); color: var(--text); } .o-bank-tbl tr:last-child td { border-bottom: none; } .o-bank-tbl .num { text-align: right; white-space: nowrap; font-family: var(--font-mono); } /* ============================================================================ РАЗБОР ТХ (#thOverlay) — автономный разбор проектной таблицы из Word. Позиционирование/фон/анимация оверлея наследуются от общих правил разделов; здесь — только внутренняя раскладка инструмента. ============================================================================ */ .th-wrap { max-width: min(1840px, 96vw); margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .th-head { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin: .25rem 0 1.4rem; } .th-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } /* ── Экран загрузки файла ─────────────────────────────────────────────── */ .th-intro { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--tile-border); background: color-mix(in srgb, var(--accent) 5%, var(--tile-bg)); border-radius: 1rem; padding: 1.1rem 1.2rem; margin-bottom: 1rem; } .th-intro-ic { font-size: 1.6rem; line-height: 1; } .th-intro h3 { margin: 0 0 .35rem; font-size: .95rem; font-weight: 700; color: var(--text); } .th-intro p { margin: 0 0 .4rem; font-size: .82rem; line-height: 1.55; color: var(--muted); } .th-intro p:last-child { margin-bottom: 0; } .th-intro-cols b { color: var(--text); font-weight: 600; } .th-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; border: 2px dashed var(--tile-border); border-radius: 1rem; background: var(--tile-bg); padding: 2.4rem 1rem; cursor: pointer; text-align: center; transition: border-color .2s, background .2s; } .th-drop:hover, .th-drop.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--tile-bg)); } .th-drop-ic { font-size: 2rem; line-height: 1; margin-bottom: .2rem; } .th-drop b { font-size: .9rem; color: var(--text); } .th-drop span:last-child { font-size: .78rem; color: var(--muted); } .th-status { min-height: 1.3rem; margin: .8rem 0 0; font-size: .8rem; color: var(--muted); } .th-status-ok { color: var(--good); } .th-status-error { color: var(--bad); } /* ── Экран отчёта ─────────────────────────────────────────────────────── */ .th-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .th-summary .pj-chips { margin-bottom: .35rem; } .th-source { font-size: .75rem; color: var(--muted); } .th-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .th-tabs { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid var(--tile-border); margin-bottom: .3rem; } .th-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: .82rem; font-weight: 600; padding: .55rem .9rem; cursor: pointer; transition: color .2s, border-color .2s; } .th-tab:hover { color: var(--text); } .th-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .th-report { display: flex; flex-direction: column; gap: 1.2rem; } .th-section { border: 1px solid var(--tile-border); border-radius: 1rem; background: var(--tile-bg); padding: 1rem 1.1rem; } .th-section-warn { border-color: color-mix(in srgb, var(--mid) 55%, var(--tile-border)); } .th-section-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; } .th-kicker { display: block; font-family: var(--font-mono); font-size: .95rem; font-weight: 700; color: var(--accent); } .th-section-head h3 { margin: .1rem 0 0; font-size: .95rem; font-weight: 600; color: var(--text); } .th-total { font-family: var(--font-mono); font-size: .8rem; color: var(--text); background: color-mix(in srgb, var(--muted) 12%, transparent); border-radius: .5rem; padding: .3rem .7rem; white-space: nowrap; } .th-note { margin-top: .35rem; font-size: .75rem; color: var(--mid); } /* Восстановленные по аналогии строки — янтарь (семантика «проверить»), не заливка фоном текста */ .th-row-warn td { background: color-mix(in srgb, var(--mid) 10%, transparent); } .th-room-line { display: flex; justify-content: space-between; gap: .8rem; padding: .15rem 0; font-size: .78rem; } .th-room-line b { font-family: var(--font-mono); } .th-room-warn { color: var(--mid); } .th-empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; border: 1px dashed var(--tile-border); border-radius: 1rem; } .th-empty span { font-size: 1.8rem; display: block; margin-bottom: .4rem; } .th-empty b { display: block; color: var(--text); font-size: .9rem; margin-bottom: .25rem; } .th-empty p { margin: 0; font-size: .8rem; } /* Таблицы отчёта тянутся по высоте экрана — как в прочих разделах */ #thOverlay .pj-table-wrap { max-height: 70vh; overflow: auto; } /* Договор поступления, определённый по коду товара (в движении он не проставлен) — отличаем догадку от факта: система показывает, откуда взяла значение. */ .wh-guess { display: inline-block; margin-left: .35rem; padding: 0 .3rem; border-radius: .3rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border: 1px dashed var(--tile-border); } /* ── Тосты (замена системных alert) ───────────────────────────────────────── */ #appToasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; pointer-events: none; max-width: min(30rem, calc(100vw - 2rem)); } .app-toast { pointer-events: auto; cursor: pointer; background: var(--tile-bg); color: var(--text); border: 1px solid var(--tile-border); border-left: 3px solid var(--accent); border-radius: .6rem; padding: .6rem .85rem; font-size: .82rem; line-height: 1.35; box-shadow: 0 10px 30px -12px var(--shadow); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: pre-line; /* перечень ошибок с сервера приходит списком через «; » */ } .app-toast-in { opacity: 1; transform: translateY(0); } .app-toast-bad { border-left-color: var(--bad); } @media (max-width: 640px) { #appToasts { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; align-items: stretch; } } /* ── Раздел «Приоритеты» (ТЗ 2026-08-12) ───────────────────────────────────── Очереди адресов и товаров. Цвет чипа приходит ИЗ СПРАВОЧНИКА (пользователь правит палитру), поэтому цвет подаётся переменной --pr-c инлайн-стилем, а правила здесь только раскладывают. Текст чипа — сам цвет очереди на светлой подложке того же тона: правило «текст не красим в цвета фона» соблюдено, подложка берётся 12%-смесью, а не оттенком 50/100. */ .pr-chip { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; color: var(--pr-c, #6b7280); background: color-mix(in srgb, var(--pr-c, #6b7280) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pr-c, #6b7280) 35%, transparent); } .pr-chip-none { color: var(--muted); background: transparent; border-color: var(--tile-border); font-weight: 500; } .pr-ok { color: var(--good); font-weight: 600; } .pr-warn { color: var(--mid); font-weight: 600; } .pr-bad { color: var(--bad); font-weight: 600; } .pr-muted{ color: var(--muted); } .pr-name { font-weight: 600; } .pr-addr { font-size: .72rem; color: var(--muted); } .pr-code { font-family: var(--font-mono); font-size: .76rem; white-space: nowrap; } .pr-h3 { margin: 1.4rem 0 .6rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .pr-hint { margin: .5rem 0; font-size: .76rem; color: var(--muted); } .pr-filters { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: .2rem 0 .8rem; } .pr-filters input[type="search"] { flex: 1 1 14rem; max-width: 26rem; padding: .45rem .7rem; font: inherit; font-size: .82rem; border: 1px solid var(--tile-border); border-radius: .6rem; background: var(--tile-bg); color: var(--text); } /* Панель массовой простановки: липкая, чтобы при длинном списке кнопка «Применить» не уезжала за экран (выбирают десятками). */ .pr-bulk { position: sticky; top: 0; z-index: 3; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .6rem .8rem; margin: 0 0 .8rem; border: 1px solid var(--tile-border); border-radius: .8rem; background: var(--tile-bg); } .pr-bulk-n b { font-family: var(--font-mono); } .pr-bulk-lb { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); } .pr-bulk select, .pr-bulk input[type="date"], .pr-bulk input[type="number"], .pr-bulk input[type="text"] { padding: .35rem .5rem; font: inherit; font-size: .8rem; color: var(--text); border: 1px solid var(--tile-border); border-radius: .5rem; background: var(--bg); } .pr-bulk input[type="text"] { flex: 1 1 12rem; min-width: 8rem; } .pr-table td.pr-cb, .pr-table th.pr-cb { width: 2.2rem; text-align: center; } .pr-table tr.pr-sel > td { background: color-mix(in srgb, var(--accent) 10%, transparent); } .pr-row[data-rid] { cursor: pointer; } /* Разбор «чего не хватает» — поверх раздела */ #prModal { position: fixed; inset: 0; z-index: 400; display: none; } .pr-modal-back { position: absolute; inset: 0; background: rgba(0,0,0,.45); } .pr-modal-box { position: relative; max-width: 68rem; margin: 4vh auto; max-height: 88vh; overflow: auto; background: var(--bg); border: 1px solid var(--tile-border); border-radius: 1rem; padding: 1rem 1.2rem; } .pr-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; } .pr-modal-sub { font-size: .78rem; color: var(--muted); margin-bottom: .8rem; } /* Чип очереди в мастере разнарядки — компактнее, чтобы не ломать строку адреса */ .rz-prio { margin-left: .4rem; font-size: .68rem; } .rz-prio-days { margin-left: .35rem; font-size: .68rem; color: var(--muted); } /* ── Telegram-бот заявок на доступ (2026-08-12) ───────────────────────────── */ /* Только переменные, реально объявленные в палитре проекта: --bg-2/--tile-bg/--tile-border/ --text/--muted. Тексты не красим в цвета фона (правило контраста) — цветом работает только подложка плашки, буквы остаются --text/--muted. */ .rg-tg-back { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 72%, transparent); padding: 1rem; } .rg-tg-card { background: var(--bg-2); color: var(--text); border: 1px solid var(--tile-border); border-radius: .9rem; max-width: 46rem; width: 100%; max-height: 88vh; overflow: auto; box-shadow: var(--shadow); } .rg-tg-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--tile-border); font-size: 1.05rem; } .rg-tg-x { margin-left: auto; background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: var(--muted); } .rg-tg-x:hover { color: var(--text); } .rg-tg-body { padding: 1.25rem; } .rg-tg-p { color: var(--muted); font-size: .87rem; margin: .75rem 0 1rem; } .rg-tg-ok, .rg-tg-warn { padding: .6rem .8rem; border-radius: .55rem; font-size: .87rem; color: var(--text); border-left: 3px solid var(--muted); } .rg-tg-ok { background: color-mix(in srgb, var(--good) 14%, transparent); border-left-color: var(--good); } .rg-tg-warn { background: color-mix(in srgb, var(--bad) 12%, transparent); border-left-color: var(--bad); } .rg-tg-link { margin-bottom: .75rem; } .rg-tg-code { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .55rem; padding: .8rem 1rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .4rem; font-size: .87rem; } .rg-tg-codeval { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; user-select: all; letter-spacing: .06em; color: var(--text); } .rg-tg-table { width: 100%; margin-top: .5rem; } .rg-tg-me { color: var(--muted); font-size: .78rem; } @media (max-width: 640px) { .rg-tg-table thead { display: none; } .rg-tg-table tr { display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; padding: .5rem 0; border-bottom: 1px solid var(--tile-border); } .rg-tg-table td { border: 0; padding: 0; } } /* Адреса в заявке на доступ: несколько ЛК на одну учётку (2026-08-12) */ .rg-addrs { display: flex; flex-direction: column; gap: .3rem; } .rg-addr { display: flex; align-items: flex-start; gap: .45rem; cursor: pointer; line-height: 1.3; } .rg-addr input { margin-top: .2rem; flex: none; } .rg-addr-ro { line-height: 1.3; } .rg-already { margin-top: .4rem; padding: .35rem .5rem; border-left: 3px solid var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border-radius: .35rem; font-size: .76rem; color: var(--text); } .rg-current { margin-top: .4rem; padding: .35rem .5rem; border-left: 3px solid var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); border-radius: .35rem; font-size: .76rem; color: var(--text); } /* Выбор нескольких проектов в объявлении (2026-08-13): настройки охвата должны визуально принадлежать своему проекту, иначе переключатели читаются как общие. */ #anProjs .an-proj { border: 1px solid var(--tile-border); border-radius: .6rem; padding: .5rem .7rem; margin-bottom: .5rem; background: var(--tile-bg); } #anProjs .an-proj:has(.an-proj-on:checked) { border-color: var(--accent); } #anProjs .an-proj-scope { margin: .35rem 0 0 1.6rem; padding-left: .7rem; border-left: 2px solid var(--tile-border); display: flex; flex-direction: column; gap: .15rem; } #anProjs .an-proj-addrs { margin-top: .4rem; } #anProjs .an-addr-list { max-height: 15rem; overflow-y: auto; margin-top: .35rem; border: 1px solid var(--tile-border); border-radius: .5rem; } /* ── «Доступы ЛК»: массовая выдача по учреждениям (2026-08-13) ─────────────── */ .lk-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .6rem 0 .5rem; } .lk-search { flex: 1 1 22rem; min-width: 14rem; text-align: left; } .lk-filters { display: flex; gap: .35rem; flex-wrap: wrap; } .pj-lkf { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.4rem; padding: .35rem .7rem; border: 1px solid var(--tile-border); border-radius: .6rem; background: var(--tile-bg); color: var(--text); font-size: .82rem; cursor: pointer; } .pj-lkf b { font-variant-numeric: tabular-nums; color: var(--muted); } .pj-lkf:hover { border-color: var(--accent); } .pj-lkf.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .pj-lkf.active b { color: var(--text); } .lk-meta { color: var(--muted); font-size: .8rem; margin-left: auto; } .lk-list { display: flex; flex-direction: column; gap: .4rem; max-height: 62vh; overflow: auto; padding-bottom: .2rem; } .lk-list.has-bar { padding-bottom: 4.6rem; } /* место под липкую панель — она не должна перекрывать строки */ .lk-org { border: 1px solid var(--tile-border); border-radius: .7rem; background: var(--tile-bg); overflow: hidden; flex: none; } /* ⚠️ без flex:none колонка-флекс сжимает 54 секции в полоски по 9px */ .lk-org-h { display: flex; align-items: center; gap: .5rem; padding: .3rem .6rem; } .lk-org-t { flex: 1; display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .3rem 0; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; font-size: .9rem; } .lk-caret { color: var(--muted); width: 1rem; flex: none; } .lk-org-sub { color: var(--muted); font-size: .78rem; font-weight: 400; } .lk-org-pick { color: var(--accent); font-size: .78rem; white-space: nowrap; } .lk-chk { display: flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; cursor: pointer; } .lk-chk input, .lk-row-cb { width: 1.05rem; height: 1.05rem; cursor: pointer; } .lk-rows { display: none; border-top: 1px solid var(--tile-border); } .lk-org.open .lk-rows { display: block; } .lk-row { display: grid; grid-template-columns: 2.75rem minmax(12rem, 2fr) minmax(8rem, 1fr) minmax(10rem, 1.4fr) auto; align-items: center; gap: .5rem; padding: .1rem .6rem; min-height: 2.9rem; border-bottom: 1px solid color-mix(in srgb, var(--tile-border) 60%, transparent); cursor: pointer; } .lk-row:last-child { border-bottom: 0; } .lk-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .lk-row.picked { background: color-mix(in srgb, var(--accent) 11%, transparent); } .lk-row .lk-row-cb { justify-self: center; } .lk-addr { font-size: .85rem; } .lk-contact, .lk-logins { color: var(--muted); font-size: .78rem; } .lk-login { font-family: var(--font-mono); font-size: .75rem; color: var(--text); display: block; } .lk-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: -3.9rem; padding: .6rem .8rem; border: 1px solid var(--accent); border-radius: .7rem; background: var(--bg-2); box-shadow: var(--shadow); } .lk-bar-n { font-size: .86rem; } .lk-bar-n b { font-variant-numeric: tabular-nums; } .lk-warn { color: var(--bad); } .lk-bar-x { margin-left: auto; } .lk-done { border-color: var(--good); } .lk-modal-back { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 72%, transparent); padding: 1rem; } .lk-modal { background: var(--bg-2); border: 1px solid var(--tile-border); border-radius: .9rem; width: 100%; max-width: 40rem; max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow); } .lk-modal-h { display: flex; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--tile-border); } .lk-modal-x { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; } .lk-modal-b { padding: 1rem 1.2rem; overflow: auto; } #lkuQ { width: 100%; text-align: left; } .lk-users { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; } .lk-user { display: grid; gap: .15rem; text-align: left; padding: .6rem .7rem; min-height: 2.75rem; border: 1px solid var(--tile-border); border-radius: .6rem; background: var(--tile-bg); color: var(--text); cursor: pointer; } .lk-user:hover { border-color: var(--accent); } .lk-user-n { display: flex; align-items: center; gap: .45rem; font-size: .88rem; } .lk-user-m { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); } .lk-user-a { font-size: .76rem; color: var(--muted); } .lk-user-s { font-size: .74rem; color: var(--muted); opacity: .85; } @media (max-width: 860px) { .lk-row { grid-template-columns: 2.75rem 1fr auto; } .lk-contact, .lk-logins { grid-column: 2 / -1; } .lk-meta { margin-left: 0; } .lk-bar { flex-direction: column; align-items: stretch; } .lk-bar-x { margin-left: 0; } } /* ═══ Календарь приёмок (лицевой экран раздела «Приёмка», 2026-08-15) ═════════ Приёмщик видит свои проверки по дням и часам и входит в нужную одним кликом. */ .cal-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .6rem; } .cal-nav { display: flex; gap: .25rem; } .cal-title { font-size: 1rem; letter-spacing: .01em; } .cal-views { display: inline-flex; border: 1px solid var(--tile-border); border-radius: .6rem; overflow: hidden; } .cal-v { border: none; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; padding: .3rem .8rem; cursor: pointer; } .cal-v.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .cal-filters { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto; gap: .5rem; align-items: center; margin-bottom: .6rem; } .cal-filters .pj-inp { width: 100%; text-align: left; } .cal-sum { font-size: .78rem; color: var(--muted); white-space: nowrap; } @media (max-width: 900px) { .cal-filters { grid-template-columns: 1fr; } } .cal-grid { border: 1px solid var(--tile-border); border-radius: .8rem; overflow: auto; background: var(--tile-bg, transparent); } .cal-row { display: grid; grid-template-columns: 58px repeat(var(--cal-cols), minmax(148px, 1fr)); border-top: 1px solid var(--tile-border); } .cal-row:first-child { border-top: none; } .cal-grid.cal-day .cal-row { grid-template-columns: 58px 1fr; } .cal-head { position: sticky; top: 0; z-index: 2; background: var(--panel, var(--bg)); backdrop-filter: none; } .cal-t { font-size: .72rem; color: var(--muted-strong); font-weight: 700; padding: .35rem .3rem; text-align: right; border-right: 1px solid var(--tile-border); line-height: 1.15; } .cal-h { display: flex; align-items: baseline; gap: .35rem; padding: .45rem .55rem; border-left: 1px solid var(--tile-border); cursor: pointer; } .cal-h:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .cal-h-dow { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-strong); font-weight: 700; } .cal-h-num { font-size: 1rem; font-weight: 700; } .cal-h-cnt { font-size: .7rem; font-weight: 700; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 99px; padding: .02rem .38rem; } .cal-h-zero { color: var(--muted); background: transparent; } .cal-h-done { font-size: .68rem; color: #16a34a; font-weight: 700; } .cal-h.is-today { background: color-mix(in srgb, var(--accent) 12%, transparent); } .cal-h.is-we .cal-h-dow, .cal-h.is-we .cal-h-num { color: #b45309; } .cal-cell { border-left: 1px solid var(--tile-border); padding: .2rem; display: flex; flex-direction: column; gap: .2rem; min-height: 2.1rem; } .cal-cell.is-today { background: color-mix(in srgb, var(--accent) 5%, transparent); } .cal-card { display: flex; flex-direction: column; gap: .1rem; text-align: left; width: 100%; cursor: pointer; border: 1px solid var(--tile-border); border-left: 3px solid var(--muted); border-radius: .45rem; background: color-mix(in srgb, var(--text) 3%, transparent); padding: .25rem .35rem; font: inherit; color: inherit; } .cal-card:hover { border-color: var(--accent); box-shadow: 0 6px 16px -10px var(--shadow); transform: translateY(-1px); } .cal-c-top { display: flex; align-items: center; gap: .25rem; } .cal-time { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; } .cal-ic { font-size: .7rem; } .cal-num { font-size: .74rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-sub { font-size: .7rem; color: var(--muted-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-card.cal-na { border-left-color: #94a3b8; } .cal-card.cal-ok { border-left-color: #16a34a; } .cal-card.cal-warn { border-left-color: #d97706; } .cal-card.cal-bad { border-left-color: #dc2626; } .cal-grid.cal-day .cal-card { flex-direction: row; align-items: center; gap: .6rem; padding: .4rem .6rem; } .cal-grid.cal-day .cal-num { flex: 0 0 auto; } .cal-grid.cal-day .cal-sub { flex: 1 1 auto; } .cal-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--muted); margin-top: .5rem; } .cal-legend span { display: inline-flex; align-items: center; gap: .3rem; } .cal-dot { width: .6rem; height: .6rem; border-radius: 99px; display: inline-block; } .cal-dot.cal-na { background: #94a3b8; } .cal-dot.cal-ok { background: #16a34a; } .cal-dot.cal-warn { background: #d97706; } .cal-dot.cal-bad { background: #dc2626; } /* Модалка «кто я в графике» */ .cal-modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 12000; padding: 1rem; } .cal-modal { background: var(--panel, var(--bg)); border: 1px solid var(--tile-border); border-radius: .9rem; padding: 1rem 1.1rem; width: min(560px, 100%); max-height: 84vh; overflow: auto; box-shadow: 0 24px 60px -24px var(--shadow); } .cal-modal-h { font-weight: 700; font-size: 1rem; margin-bottom: .3rem; } .cal-who-list { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-top: .5rem; } @media (max-width: 620px) { .cal-who-list { grid-template-columns: 1fr; } } .cal-modal-a { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; } /* Карточка проверки — боковая панель из календаря */ .chk-bg { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 12000; display: flex; justify-content: flex-end; } .chk-panel { background: var(--panel, var(--bg)); border-left: 1px solid var(--tile-border); width: min(560px, 100%); height: 100%; overflow: auto; padding: 1rem 1.1rem 2rem; box-shadow: -20px 0 50px -30px var(--shadow); } .chk-h { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .chk-when { font-size: .95rem; font-weight: 700; margin: .6rem 0 .2rem; } .chk-body { display: flex; flex-direction: column; gap: .1rem; margin: .6rem 0; } .chk-l { display: grid; grid-template-columns: 190px 1fr; gap: .6rem; padding: .32rem 0; border-top: 1px solid var(--tile-border); font-size: .82rem; align-items: baseline; } .chk-l > span { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } .chk-l > b { overflow-wrap: anywhere; } @media (max-width: 620px) { .chk-l { grid-template-columns: 1fr; gap: .1rem; } } .chk-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; } /* Выбор позиций договора в листе приёмки + прогресс по характеристикам */ .ac2-pickbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0 .45rem; } .ac2-pickbar .pj-inp { flex: 1 1 240px; min-width: 200px; text-align: left; } .ac2-pickstat { font-size: .78rem; color: var(--muted); margin-left: auto; } .ac2-progress { height: .35rem; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; margin-bottom: .5rem; } .ac2-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .4s ease; } .ac2-pick { display: flex; align-items: center; gap: .5rem; padding: .32rem .55rem; border: 1px solid var(--tile-border); border-radius: .55rem; margin-bottom: .25rem; cursor: pointer; font-size: .82rem; } .ac2-pick:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); } .ac2-pick.is-blocked { opacity: .6; cursor: not-allowed; } .ac2-pick-n { font-size: .72rem; color: var(--muted); min-width: 1.6rem; font-variant-numeric: tabular-nums; } .ac2-pick-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac2-pick-tx, .ac2-pick-h { font-size: .72rem; color: var(--muted-strong); white-space: nowrap; } .ac2-i-prog { font-size: .72rem; font-weight: 700; color: var(--accent-ink); white-space: nowrap; } .ac2-i-allok { font-size: .72rem; padding: .12rem .45rem; } /* Перенос проверки перетаскиванием + подсветка целевой ячейки календаря */ .cal-card[draggable="true"] { cursor: grab; } .cal-card.cal-dragging { opacity: .45; cursor: grabbing; } .cal-cell.cal-drop { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 2px dashed var(--accent); outline-offset: -2px; } /* ── Доступность календаря (аудит 15.08) ───────────────────────────────────── Замер показал: подписи на тонированной подложке давали 4.3–4.4:1 (нужно 4.5), а управление на сенсорном экране — 29–42px (нужно 44). Ниже — точечные правки. */ .cal-card:focus-visible, .cal-h:focus-visible, .cal-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .45rem; } @media (pointer: coarse) { .cal-nav .pj-btn-ghost, .cal-v, .cal-bar .pj-btn-ghost { min-height: 44px; } .cal-h { min-height: 44px; align-items: center; } .cal-card { min-height: 44px; } .ac2-pick { min-height: 44px; } .chk-actions .pj-back, .chk-actions .pj-save { min-height: 44px; } } /* ── Хлебные крошки и общий возврат (18.08.2026, задача по навигации) ───────── Панель рисуется НАД шапкой раздела `.pj-head` общим слоем ui/nav.js. Цвета — только токенные: текст крошки var(--muted), активный шаг var(--text) (правило проекта: текст не красим в оттенки фона). */ .nv-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 .6rem; font-size: .8rem; } .nv-crumb { background: none; border: 0; padding: .15rem .25rem; font: inherit; color: var(--muted); cursor: pointer; border-radius: .4rem; } .nv-crumb:hover { color: var(--accent); text-decoration: underline; } .nv-crumb.nv-cur { color: var(--text); font-weight: 600; cursor: default; padding-left: .25rem; } .nv-crumb.nv-cur:hover { color: var(--text); text-decoration: none; } .nv-sep { color: var(--muted); opacity: .6; } /* Крошки внутри легаси-модалок: панель узкая, поэтому компактнее и с отбивкой снизу */ .nv-bar-legacy { margin: 0 0 .5rem; font-size: .75rem; } /* «Связанное»: прямые переходы из карточки к договору и его заявкам/разнарядкам/проверкам */ .nv-rel { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-left: .6rem; padding-left: .6rem; border-left: 1px solid var(--tile-border); } .nv-rel-lbl { color: var(--muted); margin-right: .1rem; } .nv-rel-chip { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .5rem; padding: .1rem .45rem; font: inherit; font-size: .75rem; cursor: pointer; } .nv-rel-chip:hover { border-color: var(--accent); color: var(--accent-2, var(--accent)); } .nv-rel-menu { position: fixed; z-index: 9500; min-width: 190px; max-width: 320px; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: .6rem; box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.18)); padding: .3rem; display: flex; flex-direction: column; gap: .15rem; } .nv-rel-menu button { background: none; border: 0; text-align: left; padding: .32rem .5rem; border-radius: .4rem; font: inherit; font-size: .8rem; color: var(--text); cursor: pointer; } .nv-rel-menu button:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-2, var(--accent)); } .nv-rel-menu i { color: var(--muted); font-size: .72rem; font-style: normal; padding: .2rem .5rem; } /* ── Пользователи и права (ТЗ 19.08.2026) ─────────────────────────────────── */ .st-scope { display: inline-flex; gap: .25rem; } .st-sc { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text); border-radius: .6rem; padding: .35rem .7rem; font: inherit; font-size: .82rem; cursor: pointer; } .st-sc.active { border-color: var(--accent); color: var(--accent-2, var(--accent)); font-weight: 600; } .st-rights-bg { position: fixed; inset: 0; z-index: 9600; background: rgba(0,0,0,.35); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 2vw; overflow: auto; } .st-rights { background: var(--bg); border: 1px solid var(--tile-border); border-radius: .8rem; box-shadow: var(--shadow, 0 12px 40px rgba(0,0,0,.25)); padding: 1rem 1.2rem; width: min(980px, 96vw); } .st-modes { display: flex; gap: .3rem; flex-wrap: wrap; } .st-mode { background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--muted); border-radius: .5rem; padding: .25rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; white-space: nowrap; } .st-mode:hover { border-color: var(--accent); color: var(--text); } .st-mode.on { border-color: var(--accent); color: var(--text); font-weight: 600; } .st-mode.on.custom { background: var(--accent); color: #fff; border-color: var(--accent); } .st-byrole { white-space: nowrap; } /* ── Распределение потребности по адресам организации (ТЗ 20.08.2026) ─────── */ .ns-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .6rem 0 .4rem; } .ns-tools .ns-search { min-width: 260px; } .ns-tools-r { margin-left: auto; display: inline-flex; gap: .4rem; align-items: center; } .ns-chk { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted-strong, var(--muted)); } .ns-stat { font-size: .8rem; color: var(--muted-strong, var(--muted)); } .ns-stat b { color: var(--text); font-family: var(--font-mono); } .ns-warn { color: var(--bad); font-weight: 600; } .ns-legend { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .75rem; color: var(--muted-strong, var(--muted)); margin-bottom: .5rem; } .ns-legend b { color: var(--text); font-family: var(--font-mono); } .ns-wrap { overflow: auto; max-height: 68vh; border: 1px solid var(--tile-border); border-radius: 1rem; } .ns-table { width: 100%; } .ns-table th { position: sticky; top: 0; z-index: 2; } .ns-table td { padding: .3rem .5rem; border-top: 1px solid var(--tile-border); } .ns-table td.ns-name { min-width: 260px; max-width: 380px; } .ns-name b { display: block; font-weight: 600; line-height: 1.25; } .ns-code { color: var(--muted-strong, var(--muted)); font-family: var(--font-mono); font-size: .7rem; } /* ⚠️ position/z-index обязательны: поля ввода браузер рисует поздней фазой и они «пробивались» сквозь липкий подвал с итогами — цифры накладывались друг на друга */ .ns-i { width: 5.4rem; padding: .22rem .35rem; text-align: right; font-family: var(--font-mono); font-size: .8rem; background: transparent; color: var(--text); border: 1px solid transparent; border-radius: .4rem; position: relative; z-index: 0; } .ns-i:hover { border-color: var(--tile-border); } .ns-i:focus { border-color: var(--accent); outline: none; } .ns-i.ns-locked { border-color: color-mix(in srgb, var(--mid) 55%, transparent); } .ns-i.ns-changed { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; } .ns-table .ns-sum { font-weight: 600; } .ns-table tr.ns-bad { background: color-mix(in srgb, var(--bad) 9%, transparent); } .ns-table tr.ns-bad .ns-left { color: var(--bad); font-weight: 700; } .ns-act { white-space: nowrap; } .ns-eq { background: none; border: 1px solid var(--tile-border); color: var(--muted-strong, var(--muted)); border-radius: .45rem; padding: .15rem .45rem; font: inherit; font-size: .72rem; cursor: pointer; } .ns-eq:hover { border-color: var(--accent); color: var(--accent-2, var(--accent)); } #nsSave[disabled] { opacity: .5; cursor: default; } @media (pointer: coarse) { .ns-i { width: 5.8rem; padding: .5rem .4rem; } .ns-eq { padding: .45rem .6rem; } } /* список организаций на вкладке «Раскладка по корпусам» */ .nso-table td { vertical-align: top; } .nso-table tbody tr { cursor: pointer; } .nso-addr { font-size: .74rem; color: var(--muted-strong, var(--muted)); margin-top: .1rem; } .nso-share { font-size: .72rem; font-weight: 600; margin-top: .1rem; } .nso-share.bad { color: var(--bad); } .nso-share.mid { color: var(--mid); } .nso-share.ok { color: var(--good); } .nso-sub { font-size: .72rem; color: var(--muted-strong, var(--muted)); font-weight: 400; } .nso-ok { font-size: .78rem; color: var(--good); } .nso-go { white-space: nowrap; } /* детализация раскладки: адреса организации и итоги по корпусам */ .nso-caret { display: inline-block; width: 1rem; color: var(--muted); } .nso-row.open { background: color-mix(in srgb, var(--accent) 7%, transparent); } .nso-det > td { background: var(--raised, var(--tile-bg)); padding: .5rem .9rem .8rem; } .nso-det-head { display: flex; align-items: center; gap: .8rem; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; } .nso-det-head button { margin-left: auto; } .nso-det-table { width: 100%; border-collapse: collapse; font-size: .8rem; } .nso-det-table th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-strong, var(--muted)); font-weight: 600; padding: .25rem .5rem; white-space: nowrap; } .nso-det-table td { padding: .28rem .5rem; border-top: 1px solid var(--tile-border); } .nso-det-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .nso-det-addr { max-width: 34rem; } .nso-head { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-2, var(--accent)); border: 1px solid var(--tile-border); border-radius: .35rem; padding: 0 .25rem; } .nso-bar { display: inline-block; width: 8rem; height: .4rem; background: var(--tile-border); border-radius: .2rem; overflow: hidden; vertical-align: middle; margin-right: .4rem; } .nso-bar i { display: block; height: 100%; background: var(--accent); } .nso-mut { color: var(--muted); } /* строка адресов над таблицей — она же живая сводка по корпусам */ .ns-leg { display: inline-flex; align-items: baseline; gap: .3rem; padding: .1rem .4rem; border-radius: .4rem; } .ns-leg.changed { background: color-mix(in srgb, var(--accent) 12%, transparent); } .ns-leg-tot { font-style: normal; font-family: var(--font-mono); font-size: .72rem; color: var(--muted-strong, var(--muted)); } .ns-leg-tot b { font-family: var(--font-mono); } .ns-leg-tot b.up { color: var(--good); } .ns-leg-tot b.down { color: var(--bad); } /* подбор договоров внутри детализации организации */ .nso-ctr { margin-top: .7rem; border-top: 1px dashed var(--tile-border); padding-top: .55rem; } .nso-ctr-load { font-size: .8rem; color: var(--muted); } .nso-ctr-head { font-size: .8rem; font-weight: 600; margin-bottom: .35rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; } .nso-ctr-head .nso-sub { font-weight: 400; } .nso-ctr-none { font-size: .8rem; color: var(--ink-2, var(--text)); margin-bottom: .4rem; } .nso-ctr-table { width: 100%; border-collapse: collapse; font-size: .78rem; } .nso-ctr-table th { text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-strong, var(--muted)); font-weight: 600; padding: .22rem .5rem; white-space: nowrap; } .nso-ctr-table td { padding: .26rem .5rem; border-top: 1px solid var(--tile-border); } .nso-ctr-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .nso-cnum { font-family: var(--font-mono); font-size: .74rem; white-space: nowrap; } .nso-ds { color: var(--mid); } .nso-ctr-note { font-size: .74rem; color: var(--muted-strong, var(--muted)); margin-top: .35rem; } .nso-unmet { font-size: .78rem; margin-top: .5rem; } .nso-unmet ul { margin: .2rem 0 0; padding-left: 1.1rem; color: var(--ink-2, var(--text)); } .nso-unmet li { margin: .1rem 0; } /* ── Проверка поставок (ТЗ 22.08.2026) ────────────────────────────────────── */ .dc-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .6rem; } .dc-search { min-width: 18rem; max-width: 26rem; margin-left: auto; } .dc-count { font-size: .8rem; color: var(--muted-strong, var(--muted)); } .dc-count b { color: var(--text); font-family: var(--font-mono); } .dc-table tbody tr { cursor: pointer; } .dc-sub { font-size: .72rem; color: var(--muted-strong, var(--muted)); } .dc-mut { color: var(--muted); font-size: .8rem; } .dc-ok { color: var(--good); font-weight: 600; font-size: .8rem; } .dc-bad { color: var(--bad); font-weight: 600; font-size: .8rem; } .dc-gap-ok { color: var(--muted); } .dc-gap-bad { color: var(--bad); font-weight: 600; } .dc-gap-warn { color: var(--mid); font-weight: 600; } .dc-flag { font-size: .7rem; padding: .05rem .35rem; border-radius: .35rem; border: 1px solid var(--tile-border); white-space: nowrap; } .dc-flag.warn { color: var(--mid); border-color: color-mix(in srgb, var(--mid) 45%, transparent); } .dc-flag.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); } .dc-code { font-family: var(--font-mono); font-size: .7rem; color: var(--muted-strong, var(--muted)); } /* Три оси фильтра отдельными строками (разбор 2026-08-25). Раньше семь кнопок стояли одним рядом и читались как один список взаимоисключающих состояний — а они были вложены друг в друга и половина совпадала со «Все». */ .dc-axes { display: flex; flex-direction: column; gap: .3rem; margin: .6rem 0 .5rem; } .dc-axis { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .dc-axis-t { font-size: .75rem; color: var(--muted-strong, var(--muted)); min-width: 11.5rem; flex: none; } @media (max-width: 900px) { .dc-axis-t { min-width: 100%; } } .dc-n { font-family: var(--font-mono); opacity: .75; } .dc-reset { align-self: flex-start; margin-top: .1rem; font-size: .78rem; } .dc-stage { font-size: .8rem; font-weight: 600; } .dc-stage.none { color: var(--muted); } .dc-stage.open { color: var(--mid); } .dc-stage.closed { color: var(--good); } .dc-stage-flags { margin-top: .15rem; display: flex; gap: .25rem; flex-wrap: wrap; } /* Окно «приёмка не сохранена»: причин бывает несколько, у каждой своё действие (26.08). */ .pj-chk-bg { position: fixed; inset: 0; z-index: 9800; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; } .pj-chk { background: var(--bg); border: 1px solid var(--tile-border); border-radius: .9rem; width: min(680px, 96vw); max-height: 86vh; overflow: auto; padding: 1.1rem 1.3rem; box-shadow: var(--shadow, 0 16px 48px rgba(0,0,0,.3)); } .pj-chk-head { font-size: 1.05rem; font-weight: 700; color: var(--bad); } .pj-chk-sub { font-size: .85rem; color: var(--muted-strong, var(--muted)); margin: .3rem 0 .8rem; } .pj-chk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .pj-chk-item { border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--tile-border)); border-radius: .6rem; padding: .6rem .8rem; background: color-mix(in srgb, var(--bad) 6%, transparent); } .pj-chk-ship { font-size: .78rem; color: var(--muted-strong, var(--muted)); font-family: var(--font-mono); } .pj-chk-bad { font-weight: 600; margin: .15rem 0 .3rem; } .pj-chk-fix { font-size: .88rem; } .pj-chk-foot { display: flex; justify-content: flex-end; margin-top: .9rem; } .pj-doc-note { font-size: .8rem; margin-top: .35rem; max-width: 52rem; line-height: 1.45; } /* ТХ товара школе на приёмке — по клику, подстрокой, без загромождения (26.08) */ .pj-dl-spec { display: block; margin-top: .2rem; background: none; border: none; padding: 0; color: var(--accent-ink, var(--accent)); font: inherit; font-size: .74rem; cursor: pointer; } .pj-dl-spec:hover { text-decoration: underline; } .pj-spec-box { padding: .5rem .7rem; border: 1px solid var(--tile-border); border-radius: .6rem; background: var(--tile-bg); } .pj-spec-list { margin: .4rem 0 0; padding-left: 1.1rem; columns: 2; column-gap: 2rem; font-size: .84rem; line-height: 1.5; } .pj-spec-list li { break-inside: avoid; margin-bottom: .15rem; } @media (max-width: 900px) { .pj-spec-list { columns: 1; } } .dc-head { display: flex; flex-wrap: wrap; gap: 1.2rem; padding: .7rem .9rem; border: 1px solid var(--tile-border); border-radius: .8rem; background: var(--tile-bg); margin-bottom: .8rem; } .dc-head-col b { display: block; font-size: 1.05rem; font-family: var(--font-mono); } .dc-head-col:first-child { min-width: 22rem; } .dc-head-col:first-child b { font-family: var(--font-ui); font-size: .92rem; } .dc-cur { padding: .5rem .8rem; border-radius: .6rem; font-size: .84rem; margin-bottom: .7rem; border: 1px solid var(--tile-border); } .dc-cur.ok { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); } .dc-cur.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 8%, transparent); } .dc-sec-head { font-size: .84rem; font-weight: 600; margin: 1rem 0 .4rem; } .dc-lines tr.dc-row-warn td { background: color-mix(in srgb, var(--mid) 7%, transparent); } .dc-lines tr.dc-row-bad td { background: color-mix(in srgb, var(--bad) 8%, transparent); } .dc-files { display: flex; flex-direction: column; gap: .3rem; } .dc-file { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border: 1px solid var(--tile-border); border-radius: .5rem; background: var(--tile-bg); font-size: .82rem; } .dc-file-ic { font-size: 1rem; } .dc-file-name { font-weight: 600; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-file .dc-sub { margin-right: auto; } .dc-verdict { margin-top: 1rem; padding: .8rem .9rem; border: 1px solid var(--tile-border); border-radius: .8rem; background: var(--tile-bg); max-width: 46rem; } .dc-verdict-head { font-size: .84rem; font-weight: 600; margin-bottom: .5rem; } .dc-verdict-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; } .dc-note { width: 100%; resize: vertical; } @media (pointer: coarse) { .dc-file button { padding: .5rem .7rem; } } .dc-proj { width: auto; min-width: 15rem; } /* предпросмотр документа адреса — внутри приложения, без скачивания */ .dc-prev-bg { position: fixed; inset: 0; z-index: 9700; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; } .dc-prev { background: var(--bg); border: 1px solid var(--tile-border); border-radius: .9rem; width: min(1100px, 96vw); height: min(88vh, 1000px); display: flex; flex-direction: column; box-shadow: var(--shadow, 0 16px 48px rgba(0,0,0,.3)); overflow: hidden; } .dc-prev-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-bottom: 1px solid var(--tile-border); font-size: .88rem; } .dc-prev-head b { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-prev-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--sunk, var(--tile-bg)); } .dc-prev-body iframe { width: 100%; height: 100%; border: 0; background: #fff; } .dc-prev-body img { max-width: 100%; max-height: 100%; object-fit: contain; }