:root { /* --- Фирменные цвета (чром: топбар, кнопки, акценты) --- */ --brand-navy: #0b1f3a; --brand-navy-2: #14335c; --brand-yellow: #f5b700; --brand-yellow-dark: #c99400; /* --- Контент: поверхности и текст (адаптируются под тему) --- */ --surface-1: #ffffff; --surface-2: #f4f6f9; --page-plane: #eef1f6; --text-primary: #10141c; --text-secondary: #4d5566; --text-muted: #838a99; --gridline: #e6e9ef; --baseline: #c7cdd9; --border: rgba(11, 31, 58, 0.10); --shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 8px 24px rgba(11, 31, 58, 0.06); /* --- Данные: валидированная категориальная палитра (dataviz-скилл), --- */ /* --- порядок начинается с blue/yellow — ближе к фирменным цветам --- */ --series-1: #2a78d6; /* выручка */ --series-2: #eda100; /* маржа */ --series-3: #1baf7a; /* себестоимость / доп. ряд */ --series-4: #e34948; --series-5: #8a63d2; /* наценка */ --series-6: #0aa5a0; /* доп. метрика (доставка/разгрузка/самовывоз/возвраты) */ --stage-top: #86b6ef; --stage-confirmed: #2a78d6; --stage-success: #104281; --status-good: #0ca30c; --status-warning: #fab219; --status-critical: #d03b3b; } @media (prefers-color-scheme: dark) { :root { --surface-1: #161a23; --surface-2: #1d222d; --page-plane: #0e1116; --text-primary: #f5f6f8; --text-secondary: #b7bdca; --text-muted: #838a99; --gridline: #2a2f3a; --baseline: #3a4152; --border: rgba(255, 255, 255, 0.08); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35); --series-1: #3987e5; --series-2: #c98500; --series-3: #199e70; --series-4: #e66767; --series-5: #9c7ce0; --series-6: #1cbdb8; --stage-top: #6da7ec; --stage-confirmed: #2a78d6; --stage-success: #184f95; } } /* --- Ручное переключение темы (кнопка в топбаре, theme-toggle.js) --- Без выбора пользователя тема по-прежнему следует prefers-color-scheme (правило выше) — [data-theme] на появляется только после явного клика (или если раньше уже выбирали — см. инлайн-скрипт в base.html). :root[data-theme="..."] специфичнее голого :root внутри @media, поэтому всегда перебивает системную тему, независимо от порядка правил в файле. */ :root[data-theme="dark"] { --surface-1: #161a23; --surface-2: #1d222d; --page-plane: #0e1116; --text-primary: #f5f6f8; --text-secondary: #b7bdca; --text-muted: #838a99; --gridline: #2a2f3a; --baseline: #3a4152; --border: rgba(255, 255, 255, 0.08); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35); --series-1: #3987e5; --series-2: #c98500; --series-3: #199e70; --series-4: #e66767; --series-5: #9c7ce0; --series-6: #1cbdb8; --stage-top: #6da7ec; --stage-confirmed: #2a78d6; --stage-success: #184f95; } :root[data-theme="light"] { --surface-1: #ffffff; --surface-2: #f4f6f9; --page-plane: #eef1f6; --text-primary: #10141c; --text-secondary: #4d5566; --text-muted: #838a99; --gridline: #e6e9ef; --baseline: #c7cdd9; --border: rgba(11, 31, 58, 0.10); --shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 8px 24px rgba(11, 31, 58, 0.06); --series-1: #2a78d6; --series-2: #eda100; --series-3: #1baf7a; --series-4: #e34948; --series-5: #8a63d2; --series-6: #0aa5a0; --stage-top: #86b6ef; --stage-confirmed: #2a78d6; --stage-success: #104281; } :root[data-theme="dark"] .stat-value.accent { color: var(--brand-yellow); } :root[data-theme="light"] .stat-value.accent { color: var(--brand-navy); } :root[data-theme="dark"] .order-phone-link.accent { color: var(--brand-yellow); } :root[data-theme="light"] .order-phone-link.accent { color: var(--brand-navy); } :root[data-theme="dark"] .login-box h1 { color: var(--brand-yellow); } :root[data-theme="light"] .login-box h1 { color: var(--brand-navy); } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--page-plane); color: var(--text-primary); -webkit-font-smoothing: antialiased; } /* --- Топбар: фирменный навы+жёлтый, не зависит от темы --- */ .topbar { display: flex; align-items: center; gap: 28px; padding: 0 24px; height: 56px; background: linear-gradient(90deg, var(--brand-navy), var(--brand-navy-2)); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; letter-spacing: 0.2px; } .brand-logo { width: 18px; height: 18px; display: block; } .nav { display: flex; gap: 4px; flex: 1; } .nav a { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 7px; transition: background 0.15s, color 0.15s; } .nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .nav a.active { color: var(--brand-navy); background: var(--brand-yellow); } .nav-icon { width: 15px; height: 15px; } /* --- Бургер-меню разделов (см. CLAUDE.md) — на широком десктопе не показывается вообще (.nav всегда виден в строке); ниже порога .nav выпадает панелью под топбаром, открывается/закрывается этой кнопкой (dashboard.js: initNavBurger, класс .nav-open — не переиспользуем .op-picker-panel/[hidden], т.к. выше порога .nav должен быть виден ВСЕГДА независимо от состояния кнопки, а [hidden] так просто не выключить обратно без лишних оговорок в каждом брейкпоинте). Порог — 1440px, а не 900px как у остальных "планшетных" правил ниже: при всех разделах меню (Продажи/Склад/Финансы/.../Настройки) топбар упирается в ~1418px собственного контента (проверено вживую) — это ПРЕДСУЩЕСТВУЮЩАЯ проблема, не привнесённая адаптивом, но она означает, что бургер должен появляться раньше обычного "планшетного" 900px, иначе на ноутбучных 1280-1366px топбар обрезается по правому краю уже сегодня, без какого-либо телефона/планшета. */ .nav-burger { display: none; } @media (max-width: 1440px) { .nav-burger { display: inline-flex; } .nav { display: none; position: absolute; top: 56px; left: 0; right: 0; z-index: 20; flex-direction: column; gap: 2px; padding: 8px; background: linear-gradient(180deg, var(--brand-navy), var(--brand-navy-2)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .nav.nav-open { display: flex; } .nav a { width: 100%; } } @media (max-width: 900px) { .topbar { gap: 10px; padding: 0 12px; } } @media (max-width: 480px) { .user { display: none; } } /* --- Иконки: базовый inline-SVG (см. _macros.html: macro icon) --- */ .icon { flex-shrink: 0; display: inline-block; vertical-align: middle; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: rgba(255, 255, 255, 0.72); cursor: pointer; } .icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } .icon-btn.active { color: var(--brand-navy); background: var(--brand-yellow); } /* --- Переключатель темы: два SVG в разметке всегда, виден только один (какую тему предлагает включить клик — солнце на тёмной теме, луна на светлой) — переключает theme-toggle.js добавлением/снятием классов на самой кнопке, без привязки к prefers-color-scheme напрямую (иначе кнопка не отражала бы явный выбор пользователя, только системный). --- */ .theme-icon { width: 17px; height: 17px; } .theme-icon-moon { display: none; } #theme-toggle.is-dark .theme-icon-sun { display: none; } #theme-toggle.is-dark .theme-icon-moon { display: block; } .user { color: rgba(255, 255, 255, 0.85); font-size: 13px; } .topbar form { margin: 0; } .topbar button.link-btn { background: none; border: none; color: rgba(255, 255, 255, 0.72); cursor: pointer; font-size: 13px; padding: 6px 10px; } .topbar button.link-btn:hover { color: #fff; } /* --- Подраздел (второй уровень навигации внутри раздела, например "Продажи" -> "Главная сводка") — просто текст, без плашек-кнопок, в отличие от .nav/.topbar (те на тёмном фоне и заметно крупнее). --- */ .subnav { display: flex; gap: 16px; padding: 4px 24px; align-items: center; background: var(--surface-1); border-bottom: 1px solid var(--border); overflow-x: auto; flex-wrap: nowrap; } .subnav a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 4px 0; white-space: nowrap; flex-shrink: 0; } .subnav a:hover { color: var(--text-primary); } .subnav a.active { color: var(--series-1); font-weight: 600; } .subnav-icon { width: 14px; height: 14px; } main { padding: 14px 24px 24px; } @media (max-width: 640px) { main { padding: 12px 12px 16px; } } h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.2px; } h2 { font-size: 15px; color: var(--text-secondary); margin: 0 0 14px; font-weight: 600; } .page-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .page-head h1 { margin: 0; } .page-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 20px; } .page-head .page-sub { margin: 0; } /* --- Кнопки --- */ button, .btn { font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 7px; border: none; cursor: pointer; padding: 8px 16px; } .btn-primary, .filters button, .login-box button { background: var(--brand-yellow); color: var(--brand-navy); } .btn-primary:hover, .filters button:hover, .login-box button:hover { background: var(--brand-yellow-dark); } .btn-secondary { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .btn-secondary:hover { color: var(--text-primary); border-color: var(--brand-navy); } .btn-icon { padding: 8px 10px; justify-content: center; line-height: 1; } .btn-primary { display: inline-flex; align-items: center; gap: 6px; } .btn .icon, .btn-primary .icon, .btn-secondary .icon { width: 14px; height: 14px; } .table-card tfoot .icon { width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; } /* --- Панель фильтров: пресеты периода + гранулярность + сравнение --- */ .controls { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .preset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .controls-lead-icon { width: 15px; height: 15px; color: var(--text-muted); margin-right: 2px; } .preset-pill { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .preset-pill:hover { border-color: var(--brand-navy); color: var(--text-primary); } .preset-pill.active { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-navy); } .control-group { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; min-width: 0; } /* Попап "Перепутали" — цена товара расчётная (не инпут, см. pricing/), всё должно остаться в одну строку с заголовком независимо от ширины диалога, а не переноситься под него. */ .misdelivered-price-row { flex-wrap: nowrap; } .misdelivered-price-value { color: var(--text-muted); white-space: nowrap; } .misdelivered-price-diff { font-weight: 600; white-space: nowrap; } .misdelivered-price-diff.price-diff-overpay { color: var(--status-critical); } .misdelivered-price-diff.price-diff-save { color: var(--status-good); } /* --- Быстрые фильтры (Канал/Оплата/Покупка/Клиент) — компактные пилюли, без отдельной "Все": ничего не нажато = фильтр не применяется, повторный клик по активной снимает её же. --- */ .quick-filter-group { display: flex; gap: 4px; flex-wrap: wrap; } .quick-filter-pill { font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .quick-filter-pill:hover { border-color: var(--brand-navy); color: var(--text-primary); } .quick-filter-pill.active { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-navy); } .control-group input[type="date"], .control-group input[type="text"], .control-group select { font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); min-width: 0; max-width: 100%; } /* --- Несколько фильтров "доп. поле" (динамические строки) --- */ .attr-filters { flex-wrap: wrap; align-items: flex-start; } #attr-filter-rows { display: flex; flex-direction: column; gap: 6px; } .attr-filter-row { display: flex; align-items: center; gap: 6px; } .attr-remove-btn { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; } .attr-remove-btn:hover { background: var(--surface-2); color: var(--status-critical); } #attr-add-btn { border: 1px dashed var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 12.5px; padding: 5px 10px; border-radius: 6px; align-self: flex-start; } #attr-add-btn:hover { border-color: var(--brand-navy); color: var(--text-primary); } .segmented { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; } .segmented a { padding: 5px 12px; font-size: 13px; text-decoration: none; color: var(--text-secondary); background: var(--surface-2); border-right: 1px solid var(--border); } .segmented a:last-child { border-right: none; } .segmented a.active { background: var(--brand-navy); color: #fff; } /* .segmented с