/* ========================================================================= theme_b.css — ОМК-Строй. Концепция B (тёмная профессиональная) — ОСНОВНАЯ. Подключается в templates/base_new.html ДО design-system.css. Стратегия интеграции (preview-only, боевой НЕ трогаем): 1) :root[data-theme="b"] — токены Концепции B (по спеке) + БРИДЖ: переопределяем СУЩЕСТВУЮЩИЕ токены design-system.css (--bg-elevated/--accent-blue/--sidebar-bg/ --text-primary/--status-*/--border-*/--shadow-*…) значениями Концепции B. Specificity :root[data-theme="b"] (0,2,0) > :root (0,1,0) → bridge побеждает. Алиасы (--bg-card, --color-text, --accent-primary, --color-success…) в design-system.css выражены через var() и авто-адаптируются под новые значения. 2) Базовые стили + компоненты (ниже) — загружаются ДО design-system.css, поэтому для совпадающих классов (.btn/.card/.sidebar/.topbar/.badge/.kpi-grid/.empty-state) побеждает design-system.css → существующие страницы ТОЛЬКО перекрашиваются, разметка/вёрстка не ломается. Уникальные классы спеки (.theme-btn/.app-layout/ .td-mono/.divider/.skeleton/.progress-bar…) работают как gap-filler. 3) Reset смягчён до box-sizing only (без margin:0/padding:0) — чтобы не обнулить отступы bare-элементов на готовых страницах (условие «UI не сломается»). Под блоки [data-theme="dark"]/[data-theme="light"] из design-system.css НЕ применяются — поэтому bridge задаёт палитру полностью. ========================================================================= */ :root[data-theme="b"] { /* Фоны */ --bg-base: #0f1117; --bg-surface: #161b27; --bg-surface-2: #1c2333; --bg-surface-3: #232b3e; --bg-card: #1e2538; --bg-hover: #252d42; /* Акцентный цвет — стальной синий */ --accent: #3b82f6; --accent-hover: #2563eb; --accent-muted: rgba(59, 130, 246, 0.15); --accent-border: rgba(59, 130, 246, 0.3); /* Текст */ --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --text-inverse: #0f1117; /* Статусы */ --color-success: #22c55e; --color-success-bg: rgba(34, 197, 94, 0.12); --color-warning: #f59e0b; --color-warning-bg: rgba(245, 158, 11, 0.12); --color-danger: #ef4444; --color-danger-bg: rgba(239, 68, 68, 0.12); --color-info: #3b82f6; --color-info-bg: rgba(59, 130, 246, 0.12); --color-purple: #a855f7; --color-purple-bg: rgba(168, 85, 247, 0.12); /* Границы */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); --border-accent: rgba(59, 130, 246, 0.4); /* Тени */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 12px 40px rgba(0,0,0,0.6); /* Радиусы */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; /* Сайдбар */ --sidebar-bg: #0d1321; --sidebar-width: 240px; --sidebar-text: #8892a4; --sidebar-text-active: #e2e8f0; --sidebar-item-active: rgba(59, 130, 246, 0.15); --sidebar-item-active-border: #3b82f6; --topbar-bg: #0f1117; --topbar-border: rgba(255,255,255,0.06); /* Типографика */ --font-ui: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Отступы */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Анимации */ --transition: 160ms cubic-bezier(0.16, 1, 0.3, 1); /* ---------- БРИДЖ → существующие токены design-system.css (Концепция B) ---------- */ /* Фоны/поверхности (псевдонимы --bg-card/--bg-input в design-system берёт var() — но --bg-card у спеки свой, фиксируем явно, чтобы карточки были #1e2538). */ --bg-elevated: #1c2333; --bg-overlay: #232b3e; --bg-highlight: #252d42; --bg-card-hover: #252d42; --bg-input: #1c2333; /* Сайдбар */ --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-item-hover: rgba(255, 255, 255, 0.05); --sidebar-accent: #3b82f6; /* Топбар (высоту保持 56px — не 52 из спеки, чтобы не сдвигать layout) */ --topbar-height: 56px; /* Акценты (цвет + фон) — маппинг на существующие имена --accent-* */ --accent-blue: #3b82f6; --accent-blue-bg: rgba(59, 130, 246, 0.12); --accent-green: #22c55e; --accent-green-bg: rgba(34, 197, 94, 0.12); --accent-orange: #f59e0b; --accent-orange-bg: rgba(245, 158, 11, 0.12); --accent-red: #ef4444; --accent-red-bg: rgba(239, 68, 68, 0.12); --accent-purple: #a855f7; --accent-purple-bg: rgba(168, 85, 247, 0.12); --accent-yellow: #facc15; --accent-yellow-bg: rgba(250, 204, 21, 0.12); /* Статусы (цвет + фон) */ --status-success: #22c55e; --status-success-bg: rgba(34, 197, 94, 0.12); --status-warning: #f59e0b; --status-warning-bg: rgba(245, 158, 11, 0.12); --status-error: #ef4444; --status-error-bg: rgba(239, 68, 68, 0.12); --status-info: #3b82f6; --status-info-bg: rgba(59, 130, 246, 0.12); --status-neutral: #94a3b8; --status-neutral-bg: rgba(148, 163, 184, 0.12); /* Границы (маппинг на --border-subtle/default/strong/focus) */ --border-subtle: rgba(255, 255, 255, 0.08); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.15); --border-focus: #3b82f6; } /* ===================== БАЗОВЫЕ СТИЛИ (общие для обеих тем) ===================== Reset смягчён: только box-sizing (без margin:0/padding:0) — чтобы не обнулить отступы bare-элементов на готовых страницах. */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-ui); font-size: 14px; -webkit-font-smoothing: antialiased; } body { background: var(--bg-base); color: var(--text-primary); min-height: 100vh; } /* LAYOUT */ .app-layout { display: flex; height: 100vh; overflow: hidden; } .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); display: flex; flex-direction: column; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; } .main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .topbar { height: 52px; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); display: flex; align-items: center; padding: 0 var(--space-5); gap: var(--space-3); flex-shrink: 0; } .page-content { flex: 1; overflow-y: auto; padding: var(--space-6); } /* SIDEBAR */ .sidebar-logo { padding: var(--space-5) var(--space-4); border-bottom: 1px solid rgba(255,255,255,0.06); } .sidebar-logo-text { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.3px; } .sidebar-section-label { padding: var(--space-4) var(--space-4) var(--space-2); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-text); opacity: 0.5; } .sidebar-item { display: flex; align-items: center; gap: var(--space-3); padding: 8px var(--space-4); color: var(--sidebar-text); text-decoration: none; font-size: 13px; font-weight: 450; border-left: 2px solid transparent; transition: var(--transition); cursor: pointer; } .sidebar-item:hover { background: rgba(255,255,255,0.05); color: var(--sidebar-text-active); } .sidebar-item.active { background: var(--sidebar-item-active); color: var(--sidebar-text-active); border-left-color: var(--sidebar-item-active-border); } .sidebar-item svg { width: 15px; height: 15px; flex-shrink: 0; } .sidebar-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .badge-danger { background: var(--color-danger); color: #fff; } .badge-warning { background: var(--color-warning); color: #fff; } .badge-info { background: var(--color-info); color: #fff; } /* TOPBAR */ .topbar-search { flex: 1; max-width: 320px; height: 32px; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-3); color: var(--text-primary); font-size: 13px; } .topbar-search:focus { outline: none; border-color: var(--accent); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } .theme-switcher { display: flex; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .theme-btn { padding: 4px 10px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: var(--transition); border: none; background: none; } .theme-btn.active { background: var(--accent); color: #fff; } .topbar-icon-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; transition: var(--transition); border: none; background: none; position: relative; } .topbar-icon-btn:hover { background: var(--bg-surface-2); color: var(--text-primary); } .topbar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-danger); position: absolute; top: 5px; right: 5px; } .topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--text-inverse); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; } .topbar-date { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* PAGE HEADER */ .page-header { margin-bottom: var(--space-6); } .page-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; } .page-subtitle { font-size: 13px; color: var(--text-secondary); margin-top: 2px; } /* CARDS */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); } .card-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 14px; font-weight: 600; } .card-body { padding: var(--space-5); } /* KPI CARDS */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .kpi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .kpi-icon { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); } .kpi-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; } .kpi-value { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; font-family: var(--font-mono); } .kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .kpi-alert { border-color: var(--color-danger); background: color-mix(in oklch, var(--bg-card), var(--color-danger) 4%); } .kpi-alert .kpi-value { color: var(--color-danger); } /* TABLES */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { padding: 10px var(--space-4); text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } tbody tr { border-bottom: 1px solid var(--border); transition: var(--transition); } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--bg-hover); } tbody td { padding: 10px var(--space-4); vertical-align: middle; } .td-mono { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; } .td-muted { color: var(--text-secondary); font-size: 12px; } /* BADGES / STATUS */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full, 9999px); font-size: 11px; font-weight: 600; } .badge-success { background: var(--color-success-bg); color: var(--color-success); } .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); } .badge-danger { background: var(--color-danger-bg); color: var(--color-danger); } .badge-info { background: var(--color-info-bg); color: var(--color-info); } .badge-purple { background: var(--color-purple-bg); color: var(--color-purple); } .badge-neutral { background: var(--bg-surface-3); color: var(--text-secondary); } /* BUTTONS */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); border: none; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--bg-surface-2); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-surface-3); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-surface-2); color: var(--text-primary); } .btn-danger { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-bg); } .btn-danger:hover { background: var(--color-danger); color: #fff; } .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-icon { width: 30px; height: 30px; padding: 0; justify-content: center; } /* FORMS */ .form-group { margin-bottom: var(--space-4); } .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; } .form-control { width: 100%; height: 36px; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 var(--space-3); color: var(--text-primary); font-size: 13px; font-family: var(--font-ui); transition: var(--transition); } .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); } textarea.form-control { height: auto; padding: var(--space-3); resize: vertical; } select.form-control { cursor: pointer; } .form-row { display: grid; gap: var(--space-4); } .form-row-2 { grid-template-columns: 1fr 1fr; } .form-row-3 { grid-template-columns: 1fr 1fr 1fr; } /* MODAL */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--transition); } /* display:flex выше перекрывает UA [hidden]{display:none} — скрываем явно, иначе «закрытая» [hidden]-модалка невидимо висит поверх страницы. */ .modal-overlay[hidden] { display: none; } /* Открытое состояние. Ни одна модалка в проекте не использует класс .open — все открываются либо классом .modal-visible (УПД/контрагенты), либо снятием [hidden] (вложения/распределение/сопоставление/объекты/загрузка). Поэтому видимость+кликабельность — для любого .modal-overlay без [hidden]. Это снимает pointer-events:none из базового правила (без него клики пробивают оверлей на элементы под модалкой). .open оставлен для совместимости. */ .modal-overlay.open, .modal-overlay.modal-visible, .modal-overlay:not([hidden]) { opacity: 1; pointer-events: all; } .modal { background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); width: 90%; max-width: 560px; max-height: 90vh; overflow-y: auto; transform: translateY(16px) scale(0.98); transition: transform var(--transition); box-shadow: var(--shadow-lg); } .modal-overlay.open .modal { transform: translateY(0) scale(1); } .modal-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-title { font-size: 16px; font-weight: 700; } .modal-body { padding: var(--space-6); } .modal-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--space-3); } /* TOAST */ .toast-container { position: fixed; top: var(--space-5); right: var(--space-5); z-index: 2000; display: flex; flex-direction: column; gap: var(--space-2); } .toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: 13px; min-width: 280px; transform: translateX(120%); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); } .toast.show { transform: translateX(0); } .toast-success { border-left: 3px solid var(--color-success); } .toast-warning { border-left: 3px solid var(--color-warning); } .toast-error { border-left: 3px solid var(--color-danger); } .toast-info { border-left: 3px solid var(--color-info); } /* PROGRESS BAR */ .progress { height: 5px; background: var(--bg-surface-3); border-radius: 3px; overflow: hidden; } .progress-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; } .progress-success { background: var(--color-success); } .progress-warning { background: var(--color-warning); } .progress-danger { background: var(--color-danger); } .progress-info { background: var(--color-info); } /* DIVIDER */ .divider { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; } /* EMPTY STATE */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-16) var(--space-8); color: var(--text-muted); } .empty-state svg { margin-bottom: var(--space-4); opacity: 0.4; } .empty-state h3 { font-size: 15px; color: var(--text-primary); margin-bottom: var(--space-2); } .empty-state p { font-size: 13px; max-width: 36ch; } /* SKELETON */ @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } .skeleton { background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-surface-3) 50%, var(--bg-surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); } /* RESPONSIVE */ @media (max-width: 768px) { .sidebar { position: fixed; left: -240px; top: 0; height: 100%; z-index: 100; transition: left var(--transition); } .sidebar.open { left: 0; } .form-row-2, .form-row-3 { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr 1fr; } }