/* ══════════════════════════════════════════════════════════ THEME: Dark Classic (dark) ────────────────────────────────────────────────────────── Activated by body[data-theme="dark-classic"] in base.html (+ data-bs-theme="dark" на body — нативный тёмный Bootstrap). Тёмная версия classic-палитры: slate-фоны, тот же синий акцент, статус-цвета в тех же hue. Спека: docs/superpowers/specs/2026-07-17-dark-theme-design.md NB: --gantt-* и --sidebar-* НЕ переопределяем — они dark by design. ══════════════════════════════════════════════════════════ */ body[data-theme="dark-classic"] { color-scheme: dark; /* === АНАЛИТИКА: серии графиков === Те же слоты, dark-ступени; провалидированы на #1e293b. */ --series-project: #3987e5; --series-dry: #199e70; --series-cancel: #f87171; --series-staff: #3987e5; --series-tax: #c98500; --series-other: #199e70; --series-profit: #9085e9; --series-cat-1: #3987e5; --series-cat-2: #d95926; --series-cat-3: #199e70; --series-cat-4: #c98500; --series-cat-5: #d55181; --series-cat-6: #9085e9; --chart-grid: #2b3a52; --chart-axis: #3a4a63; /* === SURFACES === */ --bg-page: #0f172a; /* slate-900 */ --bg-card: #1e293b; /* slate-800 */ --bg-subtle: #283548; --bg-elevated: #243044; --bg-tinted-blue: #1e3a5f; --bg-tinted-warning: #3b3320; --bg-tinted-success: #16321f; --bg-tinted-danger: #3a2226; /* === BORDERS === */ --border-strong: #475569; /* slate-600 */ --border-default: #334155; /* slate-700 */ --border-subtle: #283548; /* === TEXT === */ --text-primary: #e2e8f0; /* slate-200 */ --text-secondary: #94a3b8; /* slate-400 */ --text-tertiary: #64748b; /* slate-500 */ --text-inverse: #ffffff; --text-link: #60a5fa; /* blue-400 */ /* === ACCENT (тот же синий, ярче для тёмного) === */ --accent-primary: #3b82f6; /* blue-500: кнопки с белым текстом */ --accent-primary-hover: #60a5fa; /* на тёмном hover — светлее */ --accent-primary-soft: #1e3a5f; --accent-primary-soft-strong: #27497a; --accent-primary-border: #3b6cb0; --accent-primary-text: #ffffff; /* === STATUS (те же hue, яркость под тёмный фон) === */ --status-success: #22c55e; --status-success-soft: #16321f; --status-success-text: #4ade80; --status-warning: #eab308; --status-warning-soft: #3b3320; --status-warning-text: #fbbf24; --status-danger: #ef4444; --status-danger-soft: #3a2226; --status-danger-text: #f87171; --status-info: #0ea5e9; --status-info-soft: #12303f; --status-info-text: #38bdf8; /* === LOGISTICS (модуль «Рейсы», Task C2) — хоз. рейс без проекта === */ --logi-hoz-bg: #3a1930; --logi-hoz-border: #ec4899; --logi-hoz-text: #f472b6; /* === TEXT EXTENSIONS === */ --text-strong: #f8fafc; --text-emphasis: #f8fafc; --text-ink: #f1f5f9; --gray-text-strong: #cbd5e1; --gray-text-mid: #94a3b8; --gray-text-soft: #64748b; --gray-text-legacy: #cbd5e1; --gray-bg-soft: #283548; /* === STATUS EXTENSIONS === */ --status-success-strong: #4ade80; --status-success-strong-hover: #86efac; --success-deep-text: #34d399; --success-deep-text-hover: #6ee7b7; --accent-text-deep: #93c5fd; --warning-bg-softest: #33290f; --warning-text-deep: #fbbf24; --chip-warning-text: #fcd34d; --chip-danger-text: #fca5a5; --chip-danger-bg: #450a0a; --chip-danger-border: #7f1d1d; --chip-neutral-bg: #334155; --chip-neutral-text: #cbd5e1; --info-chip-bg: #0c3346; --info-chip-text: #38bdf8; /* === SPARE / TRANSFER === */ --spare-accent: #fb923c; --spare-border-soft: #7c2d12; --transfer-accent: #22d3ee; --transfer-border-soft: #155e75; --transfer-bg-soft: #103a43; /* === COMPONENT TINTS === */ --rack-child-bg: #14301c; --folder-row-bg: #173424; --subrent-block-bg: #243044; --subrent-toggle-active-bg: #232a4d; --combo-soft-bg: #2a2440; --combo-soft-bg-2: #262038; --combo-soft-bg-hover: #332a52; --combo-soft-border: #4c3d78; --accent-selected-hover: #2f5a8f; --input-border-soft: #475569; --text-caps: #cbd5e1; --text-title: #f8fafc; --text-heading: #f1f5f9; --text-gray-500: #9ca3af; --text-gray-400: #6b7280; /* === ACCENT EXTENSIONS === */ --accent-bright: #60a5fa; --accent-deep: #64a9f0; --bs-accent: #4d94ff; --warning-bright: #fbbf24; /* === LEGACY GRAY SURFACES === */ --gray-border-soft: #334155; --gray-bg-softest: #243044; --surface-gray-100: #243044; --surface-gray-50: #232e42; --bg-tinted-success-soft: #10241a; --bg-chip-slate: #334155; /* === ROSE === */ --rose-accent: #fb7185; --rose-bg-soft: #3a1a20; --rose-border-soft: #7f1d2d; /* === ДОБОРНЫЕ СТАТУС-ОТТЕНКИ === */ --amber-border-soft: #78350f; --amber-text-deep: #fcd34d; --cyan-text-deep: #22d3ee; /* Подсветка поиска: жёлтая заливка на тёмном ослепляет и роняет текст, поэтому глухой amber-800 — совпадение всё так же выделено, а --text-emphasis (#f8fafc) даёт на нём 6.5:1. */ --search-highlight-bg: #854d0e; --success-border-soft: #14532d; --teardown-accent: #22d3ee; --row-hover-bg: #223049; --scanner-banner-bg: #14321f; --scanner-banner-border: #166534; --scanner-banner-blue-bg: #16324f; --scanner-banner-blue-border: #1e4976; --scanner-banner-warn-bg: #3b3320; --scanner-banner-warn-border: #997404; --panel-head-bg: #1a2740; --deep-navy-text: #93c5fd; --indigo-chip-bg: #26264d; --indigo-chip-text: #a5b4fc; /* Активная пилюля: пару ИНВЕРТИРУЕМ, а не подсвечиваем. В светлой теме это почти чёрная заливка на белой странице; прямой перенос (#212529) совпал бы с --bg-card (#1e293b) — белый текст читался, но «нажато» переставало отличаться от «не нажато», состояние держал один font-weight (1.05:1). Любая нейтрально-тёмная замена упирается в вилку: чтобы заливка взяла 3:1 против карточки (WCAG 1.4.11, нетекстовый индикатор), она светлеет настолько, что белый текст 12px проваливает 4.5:1. Светлая заливка с тёмной краской снимает вилку целиком: 11.4:1 к карточке и 15.8:1 текста — и это ровно то же соотношение, что в classic, только зеркально. */ --pill-active-bg: #e2e8f0; --pill-active-text: #0f172a; --pill-active-text-muted: #475569; --selected-warm-bg: #3a3110; --gantt-weekend-bg: #1c2940; --gantt-grid-line: #33415e; /* === КАЛЕНДАРЬ ПЕРСОНАЛА === */ --bg-tinted-orange: #33231a; --staffcal-even-bg: #223049; --staffcal-even-hdr: #1a2740; --staffcal-even-subhdr: #182338; /* === BOOTSTRAP BRIDGE (выравниваем BS-dark под slate) === */ --bs-body-bg: var(--bg-page); --bs-body-color: var(--text-primary); --bs-emphasis-color: #f8fafc; --bs-secondary-color: var(--text-secondary); --bs-tertiary-color: var(--text-tertiary); --bs-secondary-bg: var(--bg-subtle); --bs-tertiary-bg: var(--bg-elevated); --bs-border-color: var(--border-default); --bs-link-color: var(--text-link); --bs-link-hover-color: #93c5fd; --bs-info-rgb: 21, 94, 117; /* .bg-info → cyan-800, белый текст читаем */ --bs-light-rgb: 40, 53, 72; /* .bg-light → slate-подложка */ /* === FULLCALENDAR BRIDGE (сетка календаря проектов) === */ --fc-page-bg-color: var(--bg-card); --fc-neutral-bg-color: var(--bg-subtle); --fc-border-color: var(--border-default); --fc-today-bg-color: rgba(59, 130, 246, 0.12); --fc-list-event-hover-bg-color: var(--bg-subtle); } /* === BOOTSTRAP-КОМПОНЕНТЫ, не подхватывающие data-bs-theme === */ body[data-theme="dark-classic"] .table-light { --bs-table-bg: var(--bg-subtle); --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-default); --bs-table-striped-bg: var(--bg-subtle); --bs-table-hover-bg: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); } body[data-theme="dark-classic"] .table-success { --bs-table-bg: #14321f; --bs-table-color: var(--text-primary); color: var(--text-primary); } body[data-theme="dark-classic"] .table-warning { --bs-table-bg: #3b3320; --bs-table-color: var(--text-primary); color: var(--text-primary); } body[data-theme="dark-classic"] .table-danger { --bs-table-bg: #3a2226; --bs-table-color: var(--text-primary); color: var(--text-primary); } body[data-theme="dark-classic"] .archive-banner { background: #332701; border-color: #997404; } /* .bg-light выше перелит в тёмный slate, а .text-dark берёт --bs-dark-rgb (#212529) — пара «badge bg-light text-dark» давала тёмное по тёмному. Целимся ТОЛЬКО в эту пару: на фиксированно-светлых заливках (.bg-warning text-dark) литеральный тёмный текст обязан остаться. */ body[data-theme="dark-classic"] .bg-light.text-dark, body[data-theme="dark-classic"] .bg-white.text-dark { color: var(--text-primary) !important; } /* .bg-white не перекрашивается data-bs-theme (это literal-белый утилити). Все её потребители в проекте — UI-панели (карточка субаренд-дашборда, вкладки импорта, вывод truss-калькулятора), а не «бумага» для печати. */ body[data-theme="dark-classic"] .bg-white { background-color: var(--bg-card) !important; } /* Панель множественного выделения сметы: «инверсная» плашка сидит на var(--est-text) как на фоне — в dark текст-токен светлеет и панель становится светлой под белым текстом. Даём ей elevated-тёмный фон. */ body[data-theme="dark-classic"] .selection-toolbar { background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: 0 4px 24px rgba(0,0,0,.5); } body[data-theme="dark-classic"] .selection-toolbar select option { background: var(--bg-elevated); } /* Приёмка: шапка довозов, тулбар, numpad, зелёная панель */ body[data-theme="dark-classic"] .extras-header { background: #2a1f3d; } body[data-theme="dark-classic"] .shipment-item.has-extras { background: #2a1f3d; } /* Дашборд склада, карточка «Приёмка возвратов»: светлый violet-градиент остался литеральным, а текст внутри — токенный (в dark светлеет). Заливка pending-иконки (#7c3aed + белый) специфичнее — её не трогаем. */ body[data-theme="dark-classic"] .acceptance-card.has-pending { background: linear-gradient(135deg, #2a1f3d 0%, #241a35 100%); border-color: #7c3aed; } body[data-theme="dark-classic"] .acceptance-icon { background: #2e2450; color: #a78bfa; } body[data-theme="dark-classic"] .acceptance-count.has-pending { color: #a78bfa; } body[data-theme="dark-classic"] .acpt-toolbar { background: var(--bg-subtle); border-color: var(--border-default); } body[data-theme="dark-classic"] .acc-numpad-grid button:active { background: #475569; } body[data-theme="dark-classic"] .acc-numpad-confirm:disabled { background: #334155; } body[data-theme="dark-classic"] .acc-numpad-quick button { background: var(--bg-tinted-success-soft); } /* Погрузочная (loading_list_detail): страница несёт локальный :root со светлыми значениями — body[data-theme] специфичнее :root, перекрываем проблемные. --bg-hover = #fafafa давал белую hover-строку под светлым текстом. */ body[data-theme="dark-classic"] { --bg-hover: #243044; } /* Numpad погрузочной — зеркало acc-numpad выше (тот же попап, другие классы). */ body[data-theme="dark-classic"] .ll-numpad-grid button:active { background: #475569; } body[data-theme="dark-classic"] .ll-numpad-confirm:disabled { background: #334155; } body[data-theme="dark-classic"] .ll-numpad-quick button { background: var(--bg-tinted-success-soft); } body[data-theme="dark-classic"] .ll-numpad-reset { background: #33231a; color: #fb923c; } body[data-theme="dark-classic"] .ll-numpad-reset:hover { background: #4a3320; } /* Погрузочная, шапки групп: обе сидят на полупрозрачной заливке из iOS-палитры (rgba(52,199,89,.06) и rgba(88,86,214,.08)) — на тёмном она почти прозрачна, а тёмно-зелёный/индиговый текст под ней проваливается. Красим ТОЛЬКО текст: заливка и бордер остаются семейством своего акцента. */ body[data-theme="dark-classic"] .ll-table tr.vr-hdr-row td { color: var(--status-success-text); } body[data-theme="dark-classic"] .combo-hdr-row td { color: var(--indigo-chip-text); } /* Деньги в панели рейса: три оттенка из 700-й шкалы (violet/amber/red) точного токена не имеют, а на --bg-card дают 2.6–2.9:1. Заводить три токена ради одного места — лишнее, поэтому переливка здесь. Оставшиеся три оттенка той же группы (.ok/.muted/.frozen) совпали с токенами и адоптированы по месту. ⚠️ .logi-money-badge.* НЕ трогаем: у них своя светлая заливка и свой тёмный текст, пара самодостаточна в обеих темах. */ body[data-theme="dark-classic"] .ltp-money.channel { color: #c4b5fd; } body[data-theme="dark-classic"] .ltp-money.not-synced { color: #fcd34d; } body[data-theme="dark-classic"] .ltp-money.error { color: #fca5a5; } /* Каталог поставщика, чип «без категории»: #9ca3af на #f3f4f6 — 1.9:1 в ОБЕИХ темах, в тёмной вдобавок светлое пятно. Классику намеренно не трогаем (приглушённость там — решение по месту, и это не баг тёмной темы), переливаем только тёмную. */ body[data-theme="dark-classic"] .pc-item .item-cat.none { background: var(--chip-neutral-bg); color: var(--chip-neutral-text); } /* Bootstrap .btn-outline-dark (кнопка «Роли» и др.): почти-чёрные текст/бордер невидимы на тёмном фоне — нейтральный светлый outline. */ body[data-theme="dark-classic"] .btn-outline-dark { --bs-btn-color: #cbd5e1; --bs-btn-border-color: #475569; --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #334155; --bs-btn-hover-border-color: #64748b; --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #475569; --bs-btn-active-border-color: #64748b; --bs-btn-disabled-color: #64748b; --bs-btn-disabled-border-color: #334155; } /* Bootstrap .btn-light: почти-белая заливка (#f8f9fa) остаётся светлым пятном на тёмном фоне. Ловится сразу в двух местах, поэтому чинится здесь, а не локальным переопределением: степперы запаса «−/+» в редакторе сметы (`templates/estimates/includes/_items.html`, `_combo_block.html`) и степперы количества на экране сборки заявки гостя (`showcase/templates/showcase/builder.html`). Значения — та же нейтральная шкала slate, что у `.btn-outline-dark` выше. */ body[data-theme="dark-classic"] .btn-light { --bs-btn-color: #e2e8f0; --bs-btn-bg: #334155; --bs-btn-border-color: #475569; --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #64748b; --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #64748b; --bs-btn-active-border-color: #94a3b8; --bs-btn-disabled-color: #64748b; --bs-btn-disabled-bg: #273244; --bs-btn-disabled-border-color: #334155; } /* Профиль: hover строк проектов и карточек-кандидатов */ body[data-theme="dark-classic"] .project-row:hover { background: var(--row-hover-bg); } body[data-theme="dark-classic"] .candidate-card:hover { background: var(--bg-tinted-blue); } /* Вкладка «Персонал»: слоты, договорная цена (чипы/чат-пузыри) */ body[data-theme="dark-classic"] .st-slot-seg { background: #2c3a55; } body[data-theme="dark-classic"] .st-rate-pending { background: #332701; border-color: #997404; color: #fbbf24; } body[data-theme="dark-classic"] .st-rate-msg-st { background: #243044; } body[data-theme="dark-classic"] .st-rate-msg-co { background: #1c3326; } /* Орг-календарь: сухая аренда / отменённые / штриховка планирования */ body[data-theme="dark-classic"] .fc-event.dry-rental { border-color: #94a3b8 !important; color: #e2e8f0 !important; } body[data-theme="dark-classic"] .fc-event.dry-rental .fc-event-title, body[data-theme="dark-classic"] .fc-event.dry-rental .fc-event-time { color: #e2e8f0; } body[data-theme="dark-classic"] .fc-event.project-cancelled { background: linear-gradient(transparent calc(50% - 1px), #94a3b8 calc(50% - 1px), #94a3b8 calc(50% + 1px), transparent calc(50% + 1px)), var(--bg-card) !important; } body[data-theme="dark-classic"] .fc-event.dry-rental.setup-event { background: repeating-linear-gradient(-45deg, var(--bg-card), var(--bg-card) 3px, #334155 3px, #334155 6px) !important; } /* Статус-чипы календаря персонала: пастель → тёмный тинт + яркий текст */ body[data-theme="dark-classic"] .staff-cal-grid .stat-vacation { background:#3a1a2b; color:#f472b6; } body[data-theme="dark-classic"] .staff-cal-grid .stat-sick { background:#33231a; color:#fb923c; } body[data-theme="dark-classic"] .staff-cal-grid .stat-dayoff { background:#2e1f3a; color:#c084fc; } body[data-theme="dark-classic"] .staff-cal-grid .stat-project { background:#33261a; color:#fdba74; } /* === КОМПОНЕНТНЫЕ OVERRIDE (one-off rose-хвост панели уведомлений) === */ body[data-theme="dark-classic"] #notif-panel .notif-header-btn-danger { color: #fb7185; border-color: #7f1d2d; } body[data-theme="dark-classic"] #notif-panel .notif-header-btn-danger:hover { background: #3a1a20; } body[data-theme="dark-classic"] #notif-panel .notif-delete:hover { color: #fb7185; background: #3a1a20; } /* === SCROLLBARS === */ body[data-theme="dark-classic"] { scrollbar-color: #334155 #0f172a; /* Firefox */ } body[data-theme="dark-classic"] ::-webkit-scrollbar { width: 10px; height: 10px; } body[data-theme="dark-classic"] ::-webkit-scrollbar-track { background: #0f172a; } body[data-theme="dark-classic"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; } body[data-theme="dark-classic"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* === ОФЕР (offer_upload.html) — захардкоженные светлые фоны таблицы === */ body[data-theme="dark-classic"] .offer-table tr.section-header td { background: #1e293b; /* было #e3f2fd */ } body[data-theme="dark-classic"] .offer-table td.comment { background: #1e2a44 !important; /* было #e3f2fd !important */ } body[data-theme="dark-classic"] .offer-table td.filled { background: #14532d; /* было #a5d6a7 */ color: #dcfce7; } body[data-theme="dark-classic"] .offer-table td.filled:hover { background: #166534; /* было #81c784 */ } body[data-theme="dark-classic"] .offer-table td.droppable.drop-highlight { background: #1e3a5f !important; /* было #bbdefb !important */ } body[data-theme="dark-classic"] .drop-zone:hover, body[data-theme="dark-classic"] .drop-zone.dragover { background: #12291a; /* было #e8f5e9 */ } /* Диалог «пометить проект отменённым»: подтверждающая кнопка необратима, и читаться она обязана в обеих темах. `--status-danger-text` — токен ТЕКСТА, в тёмной теме он светлеет до #f87171, и белая надпись на нём даёт 2.8:1. Тёмно-красная заливка возвращает контраст к 6.4:1. */ body[data-theme="dark-classic"] .wcp-btn--danger { background: #b91c1c; /* было var(--status-danger-text) = #f87171 */ } /* Счётчик корзины каталога — тот же случай: белые цифры 9px на светлом красном нечитаемы. Тёмно-красная заливка возвращает контраст. */ body[data-theme="dark-classic"] .trash-badge { background: #b91c1c; /* было var(--status-danger) = #ef4444 */ }