/* * Глобальные темы (ui_theme) и стили текста (text_style). * Атрибуты задаются на из настроек интерфейса. */ /* --- Цветовые сочетания --- Полный набор токенов на , чтобы кастомные блоки (дашборд, запись, модалки) не оставались на «дефолтном» синем/сером Bootstrap. */ html[data-ui-theme="default"] { --app-theme-color: #212529; --app-text-primary: #1a1d21; --app-text-secondary: #495057; --app-text-tertiary: #6c757d; --bs-secondary-bg: #e9ecef; --bs-tertiary-bg: #f8f9fa; --crm-surface-elevated: #ffffff; --crm-table-header-bg: #f1f3f5; --crm-line-soft: #f0f0f0; --crm-line-softer: #f5f5f5; --crm-scrollbar-track: #f1f1f1; /* Шапка и offcanvas «Разделы» — светлая панель в тон странице */ --app-shell-bg: #ffffff; --app-shell-text: #212529; --app-shell-muted: #6c757d; --app-shell-border: #dee2e6; --app-shell-hover-bg: rgba(0, 0, 0, 0.045); --app-shell-active-bg: rgba(13, 110, 253, 0.12); --app-shell-active-text: #0d6efd; /* Модальные окна .crm-modal — светлые */ --crm-modal-surface: #ffffff; --crm-modal-text: #212529; --crm-modal-text-muted: #6c757d; --crm-modal-border: rgba(0, 0, 0, 0.1); --crm-modal-header-bg: #f8f9fa; --crm-modal-surface-muted: #f8f9fa; --crm-modal-input-bg: #ffffff; --crm-modal-input-focus-bg: #ffffff; --crm-modal-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); --crm-modal-backdrop-opacity: 0.35; } html[data-ui-theme="azure"] { --app-theme-color: #134e4a; --bs-primary: #0f766e; --bs-primary-rgb: 15, 118, 110; --bs-link-color: #0d9488; --bs-link-hover-color: #115e59; --bs-body-bg: #f1f5f9; --bs-body-color: #0f172a; --bs-secondary-color: #475569; --bs-border-color: #cbd5e1; --bs-heading-color: #0f172a; --app-text-primary: #0f172a; --app-text-secondary: #475569; --app-text-tertiary: #64748b; --bs-secondary-bg: #e2e8f0; --bs-tertiary-bg: #f1f5f9; --crm-surface-elevated: #ffffff; --crm-table-header-bg: #e8eef4; --crm-line-soft: #e2e8f0; --crm-line-softer: #e8eef4; --crm-scrollbar-track: #e2e8f0; --app-shell-bg: #ffffff; --app-shell-text: #0f172a; --app-shell-muted: #64748b; --app-shell-border: #cbd5e1; --app-shell-hover-bg: rgba(15, 23, 42, 0.04); --app-shell-active-bg: rgba(15, 118, 110, 0.14); --app-shell-active-text: #0f766e; --crm-modal-surface: #ffffff; --crm-modal-text: #0f172a; --crm-modal-text-muted: #64748b; --crm-modal-border: rgba(15, 23, 42, 0.1); --crm-modal-header-bg: #f1f5f9; --crm-modal-surface-muted: #f8fafc; --crm-modal-input-bg: #ffffff; --crm-modal-input-focus-bg: #ffffff; --crm-modal-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.1); --crm-modal-backdrop-opacity: 0.35; } html[data-ui-theme="terra"] { --app-theme-color: #44403c; --bs-primary: #c2410c; --bs-primary-rgb: 194, 65, 12; --bs-link-color: #c2410c; --bs-link-hover-color: #9a3412; --bs-body-bg: #faf8f5; --bs-body-color: #292524; --bs-secondary-color: #57534e; --bs-border-color: #d6d3d1; --bs-heading-color: #1c1917; --app-text-primary: #292524; --app-text-secondary: #57534e; --app-text-tertiary: #78716c; --bs-secondary-bg: #e7e5e4; --bs-tertiary-bg: #f5f5f4; --crm-surface-elevated: #ffffff; --crm-table-header-bg: #eeedeb; --crm-line-soft: #e7e5e4; --crm-line-softer: #f0efed; --crm-scrollbar-track: #ebe9e6; --app-shell-bg: #fffefb; --app-shell-text: #292524; --app-shell-muted: #78716c; --app-shell-border: #d6d3d1; --app-shell-hover-bg: rgba(41, 37, 36, 0.05); --app-shell-active-bg: rgba(194, 65, 12, 0.12); --app-shell-active-text: #c2410c; --crm-modal-surface: #ffffff; --crm-modal-text: #292524; --crm-modal-text-muted: #78716c; --crm-modal-border: rgba(41, 37, 36, 0.12); --crm-modal-header-bg: #f5f5f4; --crm-modal-surface-muted: #fafaf9; --crm-modal-input-bg: #ffffff; --crm-modal-input-focus-bg: #ffffff; --crm-modal-shadow: 0 0.5rem 1.5rem rgba(28, 25, 23, 0.08); --crm-modal-backdrop-opacity: 0.35; } /* * Полночь: тёмный фон, светлый текст. Вместе с data-bs-theme="dark" на * Bootstrap подтягивает карточки, формы и таблицы; ниже — акцент и наши токены CRM. */ html[data-ui-theme="midnight"] { color-scheme: dark; --app-theme-color: #1a1d21; --bs-body-bg: #141619; --bs-body-color: #e8eaed; --bs-secondary-color: #adb5bd; --bs-tertiary-color: rgba(233, 236, 239, 0.55); --bs-border-color: rgba(255, 255, 255, 0.14); --bs-heading-color: #f8f9fa; --bs-emphasis-color: #fff; --bs-primary: #6ea8fe; --bs-primary-rgb: 110, 168, 254; --bs-link-color: #9ec5fe; --bs-link-hover-color: #cfe2ff; --bs-secondary-bg: #2c3138; --bs-tertiary-bg: #1e2228; --app-text-primary: #e8eaed; --app-text-secondary: #ced4da; --app-text-tertiary: #adb5bd; --crm-surface-elevated: #1e2228; --crm-table-header-bg: #252b34; --crm-line-soft: rgba(255, 255, 255, 0.07); --crm-line-softer: rgba(255, 255, 255, 0.04); --crm-scrollbar-track: #2a3038; --app-shell-bg: #1a1d21; --app-shell-text: #f1f3f5; --app-shell-muted: #9ca3af; --app-shell-border: rgba(255, 255, 255, 0.12); --app-shell-hover-bg: rgba(255, 255, 255, 0.08); --app-shell-active-bg: rgba(110, 168, 254, 0.22); --app-shell-active-text: #b6d4fe; --crm-modal-surface: #1e2125; --crm-modal-text: #f1f3f5; --crm-modal-text-muted: rgba(241, 243, 245, 0.68); --crm-modal-border: rgba(255, 255, 255, 0.1); --crm-modal-header-bg: rgba(0, 0, 0, 0.28); --crm-modal-surface-muted: rgba(0, 0, 0, 0.22); --crm-modal-input-bg: rgba(0, 0, 0, 0.25); --crm-modal-input-focus-bg: rgba(0, 0, 0, 0.38); --crm-modal-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.55); --crm-modal-backdrop-opacity: 0.62; } /* * Полночь: таблицы — без смены «цвета букв»: тёмный фон панели и приглушённые фоны строк * вместо ярких пастелей из colors.css; переменные Bootstrap для читаемого текста на тёмной сетке. */ html[data-ui-theme="midnight"] .table:not(.table-dark) { --bs-table-color: var(--bs-body-color); --bs-table-bg: transparent; --bs-table-striped-color: var(--bs-body-color); --bs-table-striped-bg: rgba(255, 255, 255, 0.035); --bs-table-hover-color: var(--bs-body-color); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-active-color: var(--bs-body-color); --bs-table-active-bg: rgba(255, 255, 255, 0.08); --bs-table-border-color: var(--bs-border-color); } html[data-ui-theme="midnight"] .table:not(.table-dark) thead th, html[data-ui-theme="midnight"] .tab-pane .table:not(.table-dark) thead th, html[data-ui-theme="midnight"] .dashboard-table-prefs .table:not(.table-dark) thead th { color: var(--bs-body-color); } html[data-ui-theme="midnight"] thead.table-light th, html[data-ui-theme="midnight"] .table thead.table-light th { background-color: var(--crm-table-header-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color); } html[data-ui-theme="midnight"] .bg-white { background-color: var(--crm-surface-elevated) !important; color: var(--bs-body-color); } /* Тот же уровень, что у карточек (.bg-white → crm-surface-elevated), иначе списки выглядят «лишним» тёмным слоем */ html[data-ui-theme="midnight"] .tab-pane .table-responsive, html[data-ui-theme="midnight"] .dashboard-table-prefs.table-responsive, html[data-ui-theme="midnight"] .table-responsive.shadow-sm.rounded.border, html[data-ui-theme="midnight"] .table-responsive.bg-white { background-color: var(--crm-surface-elevated) !important; } /* Поле статуса (селект / Choices): тёмные полупрозрачные тона вместо пастельных строк */ html[data-ui-theme="midnight"] .table tbody select.form-select.status-select.row-white, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell:has(select.status-select.row-white) .choices__inner, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-white .choices__inner { background-color: rgba(255, 255, 255, 0.05) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html[data-ui-theme="midnight"] .table tbody select.form-select.status-select.row-gray, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell:has(select.status-select.row-gray) .choices__inner, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-gray .choices__inner { background-color: rgba(255, 255, 255, 0.085) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html[data-ui-theme="midnight"] .table tbody select.form-select.status-select.row-green, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell:has(select.status-select.row-green) .choices__inner, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-green .choices__inner { background-color: rgba(34, 197, 94, 0.14) !important; color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(34, 197, 94, 0.35) !important; } html[data-ui-theme="midnight"] .table tbody select.form-select.status-select.row-yellow, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell:has(select.status-select.row-yellow) .choices__inner, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-yellow .choices__inner { background-color: rgba(234, 179, 8, 0.12) !important; color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(234, 179, 8, 0.35) !important; } html[data-ui-theme="midnight"] .table tbody select.form-select.status-select.row-red, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell:has(select.status-select.row-red) .choices__inner, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-red .choices__inner { background-color: rgba(248, 113, 113, 0.14) !important; color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(248, 113, 113, 0.35) !important; } html[data-ui-theme="midnight"] .table tbody select.form-select.status-select.row-blue, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell:has(select.status-select.row-blue) .choices__inner, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-blue .choices__inner { background-color: rgba(96, 165, 250, 0.14) !important; color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(96, 165, 250, 0.35) !important; } html[data-ui-theme="midnight"] .table tbody select.form-select.status-select.row-orange, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell:has(select.status-select.row-orange) .choices__inner, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-orange .choices__inner { background-color: rgba(251, 146, 60, 0.12) !important; color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(251, 146, 60, 0.35) !important; } html[data-ui-theme="midnight"] .table tbody select.form-select.status-select.row-turquoise, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell:has(select.status-select.row-turquoise) .choices__inner, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-turquoise .choices__inner { background-color: rgba(34, 211, 238, 0.12) !important; color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(34, 211, 238, 0.35) !important; } html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell:has(select.status-select) .choices__inner .choices__item--selectable, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-white .choices__inner .choices__item--selectable, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-gray .choices__inner .choices__item--selectable, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-green .choices__inner .choices__item--selectable, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-yellow .choices__inner .choices__item--selectable, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-red .choices__inner .choices__item--selectable, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-blue .choices__inner .choices__item--selectable, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-orange .choices__inner .choices__item--selectable, html[data-ui-theme="midnight"] .table tbody .choices.choices--table-cell.row-turquoise .choices__inner .choices__item--selectable { color: inherit !important; } html[data-ui-theme="midnight"] .table tbody td.cell-red, html[data-ui-theme="midnight"] .table-responsive tbody td.cell-red { background-color: rgba(248, 113, 113, 0.18) !important; } html[data-ui-theme="midnight"] .table tbody td.cell-orange, html[data-ui-theme="midnight"] .table-responsive tbody td.cell-orange { background-color: rgba(251, 146, 60, 0.16) !important; } html[data-ui-theme="midnight"] .table tbody td.cell-yellow, html[data-ui-theme="midnight"] .table-responsive tbody td.cell-yellow { background-color: rgba(234, 179, 8, 0.14) !important; } html[data-ui-theme="midnight"] .table tbody td.cell-gray, html[data-ui-theme="midnight"] .table-responsive tbody td.cell-gray { background-color: rgba(255, 255, 255, 0.09) !important; } html[data-ui-theme="midnight"] .table tbody .reglament-date-display.cell-red, html[data-ui-theme="midnight"] .table tbody .planned-date-display.cell-red, html[data-ui-theme="midnight"] .table-responsive tbody .reglament-date-display.cell-red, html[data-ui-theme="midnight"] .table-responsive tbody .planned-date-display.cell-red { background-color: rgba(248, 113, 113, 0.18) !important; border-color: rgba(220, 80, 80, 0.85) !important; color: rgba(255, 255, 255, 0.95) !important; } html[data-ui-theme="midnight"] .table tbody .reglament-date-display.cell-orange, html[data-ui-theme="midnight"] .table tbody .planned-date-display.cell-orange, html[data-ui-theme="midnight"] .table-responsive tbody .reglament-date-display.cell-orange, html[data-ui-theme="midnight"] .table-responsive tbody .planned-date-display.cell-orange { background-color: rgba(251, 146, 60, 0.16) !important; border-color: rgba(234, 120, 40, 0.85) !important; color: rgba(255, 255, 255, 0.95) !important; } html[data-ui-theme="midnight"] .table tbody .reglament-date-display.cell-yellow, html[data-ui-theme="midnight"] .table tbody .planned-date-display.cell-yellow, html[data-ui-theme="midnight"] .table-responsive tbody .reglament-date-display.cell-yellow, html[data-ui-theme="midnight"] .table-responsive tbody .planned-date-display.cell-yellow { background-color: rgba(234, 179, 8, 0.14) !important; border-color: rgba(200, 155, 20, 0.85) !important; color: rgba(255, 255, 255, 0.95) !important; } html[data-ui-theme="midnight"] .table tbody .reglament-date-display.cell-gray, html[data-ui-theme="midnight"] .table tbody .planned-date-display.cell-gray, html[data-ui-theme="midnight"] .table-responsive tbody .reglament-date-display.cell-gray, html[data-ui-theme="midnight"] .table-responsive tbody .planned-date-display.cell-gray { background-color: rgba(255, 255, 255, 0.09) !important; border-color: rgba(255, 255, 255, 0.28) !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .modal.crm-modal .table thead.table-light th { background-color: var(--crm-table-header-bg) !important; color: var(--crm-modal-text) !important; border-color: var(--crm-modal-border); } /* Верхняя панель */ .app-topbar { background-color: var(--app-shell-bg) !important; color: var(--app-shell-text); border-color: var(--app-shell-border) !important; } .app-topbar .navbar-brand { color: var(--app-shell-text) !important; } /* Тёмная тема: контраст у кнопки меню и модалок */ html[data-ui-theme="midnight"] .app-topbar .btn-outline-secondary { --bs-btn-color: var(--app-shell-text); --bs-btn-border-color: rgba(255, 255, 255, 0.35); --bs-btn-hover-color: var(--app-shell-text); --bs-btn-hover-bg: rgba(255, 255, 255, 0.1); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.45); --bs-btn-active-color: var(--app-shell-text); --bs-btn-active-bg: rgba(255, 255, 255, 0.14); --bs-btn-active-border-color: rgba(255, 255, 255, 0.5); } html[data-ui-theme="midnight"] .crm-modal .modal-header .btn-outline-secondary { --bs-btn-color: var(--crm-modal-text); --bs-btn-border-color: rgba(255, 255, 255, 0.35); --bs-btn-hover-color: var(--crm-modal-text); --bs-btn-hover-bg: rgba(255, 255, 255, 0.08); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.45); } html[data-ui-theme="midnight"] .modal.crm-modal .btn-close { filter: invert(1) grayscale(1); opacity: 0.85; } html[data-ui-theme="midnight"] .modal.crm-modal .btn-close:hover { opacity: 1; } html[data-ui-theme="midnight"] .modal.crm-modal .modal-footer .btn-outline-secondary { --bs-btn-color: var(--crm-modal-text); --bs-btn-border-color: rgba(255, 255, 255, 0.38); --bs-btn-hover-color: var(--crm-modal-text); --bs-btn-hover-bg: rgba(255, 255, 255, 0.1); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5); --bs-btn-active-color: var(--crm-modal-text); --bs-btn-active-bg: rgba(255, 255, 255, 0.14); --bs-btn-active-border-color: rgba(255, 255, 255, 0.55); } /* * Полночь: выпадающие списки (Choices.js с CDN часто оставляет светлый фон списка при тёмном тексте). * Не трогаем виджет статуса в таблице: там фон/текст задают блоки с :has(select.status-select.row-*) выше и colors.css. */ html[data-ui-theme="midnight"] .choices:not(:has(select.status-select)) .choices__inner { background-color: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .choices:not(:has(select.status-select)).is-focused .choices__inner, html[data-ui-theme="midnight"] .choices:not(:has(select.status-select)) .choices__inner:focus { border-color: rgba(var(--bs-primary-rgb), 0.55) !important; box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12); } html[data-ui-theme="midnight"] .choices:not(:has(select.status-select)) .choices__list--single .choices__item { color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .choices__input { background-color: transparent !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .choices__placeholder { color: var(--bs-secondary-color) !important; opacity: 1; } html[data-ui-theme="midnight"] .choices__list--dropdown, html[data-ui-theme="midnight"] .choices__list[aria-expanded] { background-color: var(--crm-surface-elevated) !important; border: 1px solid var(--bs-border-color) !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .choices__list--dropdown .choices__item, html[data-ui-theme="midnight"] .choices__list[aria-expanded] .choices__item { color: var(--bs-body-color) !important; background-color: transparent !important; } html[data-ui-theme="midnight"] .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: rgba(var(--bs-primary-rgb), 0.28) !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .choices__list--dropdown .choices__item--disabled { color: var(--bs-secondary-color) !important; opacity: 0.65; } html[data-ui-theme="midnight"] .choices[data-type*="select-one"] .choices__button { filter: invert(1); opacity: 0.68; } html[data-ui-theme="midnight"] select.form-select:not(.status-select), html[data-ui-theme="midnight"] select.form-select-sm:not(.status-select) { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } html[data-ui-theme="midnight"] .dropdown-menu { --bs-dropdown-bg: var(--crm-surface-elevated); --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-link-color: var(--bs-body-color); --bs-dropdown-link-hover-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: rgba(var(--bs-primary-rgb), 0.22); --bs-dropdown-link-active-color: var(--bs-body-color); --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), 0.32); --bs-dropdown-header-color: var(--bs-secondary-color); background-color: var(--crm-surface-elevated) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color); } html[data-ui-theme="midnight"] .dropdown-item { color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .dropdown-item:hover, html[data-ui-theme="midnight"] .dropdown-item:focus { background-color: rgba(var(--bs-primary-rgb), 0.22) !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .dropdown-item.active, html[data-ui-theme="midnight"] .dropdown-item:active { background-color: rgba(var(--bs-primary-rgb), 0.32) !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .dropdown-header { color: var(--bs-secondary-color) !important; } html[data-ui-theme="midnight"] .dropdown-divider { border-top-color: var(--bs-border-color) !important; } html[data-ui-theme="midnight"] .dropdown-item-text { color: var(--bs-secondary-color) !important; } /* Модалки: специфичность .modal.crm-modal выше — дублируем контраст списка Choices */ html[data-ui-theme="midnight"] .modal.crm-modal .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: rgba(var(--bs-primary-rgb), 0.3) !important; color: var(--crm-modal-text) !important; } html[data-ui-theme="midnight"] .site-nav-offcanvas .btn-close { filter: invert(1) grayscale(1); opacity: 0.85; } /* * Полночь: мобильные (≤768px) — те же фоны и выпадающие списки, что на десктопе, * с повышенной специфичностью (карточки вместо таблицы, узкий viewport, fullscreen-модалки). */ @media screen and (max-width: 768px) { html[data-ui-theme="midnight"] .table-responsive tbody tr { color: var(--bs-body-color); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.42); border-color: var(--bs-border-color); } html[data-ui-theme="midnight"] .table-responsive tbody tr td { color: var(--bs-body-color); border-bottom-color: var(--crm-line-soft); } html[data-ui-theme="midnight"] .table-responsive td:before { color: var(--app-text-secondary); } html[data-ui-theme="midnight"] .tab-pane .table-responsive, html[data-ui-theme="midnight"] .dashboard-table-prefs.table-responsive, html[data-ui-theme="midnight"] .table-responsive.shadow-sm.rounded.border, html[data-ui-theme="midnight"] .table-responsive.bg-white { background-color: var(--crm-surface-elevated) !important; } html[data-ui-theme="midnight"] .filter-gov-mobile .form-control { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html[data-ui-theme="midnight"] .filter-panel-grid .input-group .form-control, html[data-ui-theme="midnight"] .filter-panel-grid .input-group .form-select { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /* Choices: таблица-карточки и панель фильтров (без поля статуса — см. colors.css / блок row-* выше) */ html[data-ui-theme="midnight"] .table-responsive .choices:not(:has(select.status-select)) .choices__inner, html[data-ui-theme="midnight"] .filter-panel-grid .choices__inner, html[data-ui-theme="midnight"] .executors-page .choices--fit-content .choices__inner { background-color: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .table-responsive .choices:not(:has(select.status-select)) .choices__list--single .choices__item, html[data-ui-theme="midnight"] .filter-panel-grid .choices__list--single .choices__item, html[data-ui-theme="midnight"] .executors-page .choices--fit-content .choices__list--single .choices__item { color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .table-responsive .choices__list--dropdown, html[data-ui-theme="midnight"] .table-responsive .choices__list[aria-expanded], html[data-ui-theme="midnight"] .filter-panel-grid .choices__list--dropdown, html[data-ui-theme="midnight"] .filter-panel-grid .choices__list[aria-expanded], html[data-ui-theme="midnight"] .executors-page .choices--fit-content .choices__list--dropdown, html[data-ui-theme="midnight"] .executors-page .choices--fit-content .choices__list[aria-expanded] { background-color: var(--crm-surface-elevated) !important; border: 1px solid var(--bs-border-color) !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .table-responsive .choices__list--dropdown .choices__item, html[data-ui-theme="midnight"] .filter-panel-grid .choices__list--dropdown .choices__item, html[data-ui-theme="midnight"] .executors-page .choices--fit-content .choices__list--dropdown .choices__item { color: var(--bs-body-color) !important; background-color: transparent !important; } html[data-ui-theme="midnight"] .table-responsive .choices__list--dropdown .choices__item--selectable.is-highlighted, html[data-ui-theme="midnight"] .filter-panel-grid .choices__list--dropdown .choices__item--selectable.is-highlighted, html[data-ui-theme="midnight"] .executors-page .choices--fit-content .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: rgba(var(--bs-primary-rgb), 0.3) !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .table-responsive .choices__input, html[data-ui-theme="midnight"] .filter-panel-grid .choices__input { background-color: transparent !important; color: var(--bs-body-color) !important; } html[data-ui-theme="midnight"] .table-responsive td select.form-select:not(.status-select), html[data-ui-theme="midnight"] .table-responsive td select.form-select-sm:not(.status-select) { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } /* Полноэкранные модалки (дашборд и др.): списки Choices как в .crm-modal */ html[data-ui-theme="midnight"] .modal.modal-fullscreen-sm-down.crm-modal .choices__inner { background-color: var(--crm-modal-input-bg) !important; border-color: var(--bs-border-color) !important; color: var(--crm-modal-text) !important; } html[data-ui-theme="midnight"] .modal.modal-fullscreen-sm-down.crm-modal .choices__list--single .choices__item { color: var(--crm-modal-text) !important; } html[data-ui-theme="midnight"] .modal.modal-fullscreen-sm-down.crm-modal .choices__list--dropdown, html[data-ui-theme="midnight"] .modal.modal-fullscreen-sm-down.crm-modal .choices__list[aria-expanded] { background-color: var(--crm-modal-surface) !important; border: 1px solid var(--crm-modal-border) !important; color: var(--crm-modal-text) !important; } html[data-ui-theme="midnight"] .modal.modal-fullscreen-sm-down.crm-modal .choices__list--dropdown .choices__item--selectable { color: var(--crm-modal-text) !important; } html[data-ui-theme="midnight"] .modal.modal-fullscreen-sm-down.crm-modal .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: rgba(var(--bs-primary-rgb), 0.32) !important; color: var(--crm-modal-text) !important; } html[data-ui-theme="midnight"] .modal.modal-fullscreen-sm-down.crm-modal .choices__input { background-color: transparent !important; color: var(--crm-modal-text) !important; } } /* Основная область под фон темы */ body { background-color: var(--bs-body-bg); } /* --- Стили текста (семейство + плотность) --- */ html[data-text-style="inter"] { --app-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; } html[data-text-style="editorial"] { --app-font-sans: "Source Serif 4", Georgia, "Times New Roman", serif; --bs-body-line-height: 1.6; --app-leading-normal: 1.6; --app-leading-snug: 1.45; } html[data-text-style="editorial"] .navbar-brand, html[data-text-style="editorial"] .nav-tabs .nav-link, html[data-text-style="editorial"] .btn { font-family: "Source Serif 4", Georgia, serif; } html[data-text-style="technical"] { --app-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-body-line-height: 1.5; --app-leading-normal: 1.5; --app-leading-snug: 1.35; } html[data-text-style="technical"] .navbar-brand, html[data-text-style="technical"] .nav-tabs .nav-link, html[data-text-style="technical"] .btn { font-family: "IBM Plex Sans", system-ui, sans-serif; } html[data-text-style="editorial"] h1, html[data-text-style="editorial"] .h1, html[data-text-style="editorial"] h2, html[data-text-style="editorial"] .h2 { letter-spacing: -0.01em; } html[data-text-style="technical"] h1, html[data-text-style="technical"] .h1, html[data-text-style="technical"] h2, html[data-text-style="technical"] .h2 { letter-spacing: 0; }