/** * Модалки .crm-modal и offcanvas «Разделы». * Цвета задаются на в ui-appearance.css (--crm-modal-*, --app-shell-*). */ :root { --crm-modal-radius: 0.5rem; --crm-modal-backdrop-opacity: 0.35; --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-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); } .modal-backdrop.show { --bs-backdrop-opacity: var(--crm-modal-backdrop-opacity, 0.35); } .modal.crm-modal .modal-content { background-color: var(--crm-modal-surface); color: var(--crm-modal-text); border: 1px solid var(--crm-modal-border); border-radius: var(--crm-modal-radius); box-shadow: var(--crm-modal-shadow); } .modal.crm-modal .modal-header { background-color: var(--crm-modal-header-bg); border-bottom: 1px solid var(--crm-modal-border); padding: 1rem 1.25rem; } .modal.crm-modal .modal-footer { border-top: 1px solid var(--crm-modal-border); padding: 0.875rem 1.25rem; gap: 0.5rem; } .modal.crm-modal .modal-body { padding: 1.25rem; } .modal.crm-modal .modal-title { color: var(--crm-modal-text); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } .modal.crm-modal .btn-close { opacity: 0.75; } .modal.crm-modal .btn-close:hover { opacity: 1; } .modal.crm-modal .form-label { color: var(--crm-modal-text-muted); } .modal.crm-modal .form-control, .modal.crm-modal .form-select, .modal.crm-modal textarea.form-control { background-color: var(--crm-modal-input-bg); border-color: var(--bs-border-color); color: var(--crm-modal-text); } .modal.crm-modal .form-control::placeholder { color: var(--crm-modal-text-muted); } .modal.crm-modal .form-control:focus, .modal.crm-modal .form-select:focus, .modal.crm-modal textarea.form-control:focus { background-color: var(--crm-modal-input-focus-bg); border-color: rgba(var(--bs-primary-rgb), 0.55); color: var(--crm-modal-text); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15); } /* Bootstrap: plaintext в модалке должен совпадать с текстом модалки */ .modal.crm-modal .form-control-plaintext { color: var(--crm-modal-text); background-color: transparent; } .modal.crm-modal .form-text, .modal.crm-modal .text-muted { color: var(--crm-modal-text-muted) !important; } /* В светлой модалке вторичные кнопки — стандартный вид Bootstrap */ .modal.crm-modal .table { --bs-table-color: var(--crm-modal-text); --bs-table-bg: transparent; --bs-table-border-color: var(--crm-modal-border); } .modal.crm-modal .table thead th { color: var(--crm-modal-text-muted); border-color: var(--crm-modal-border); } /* Шапка с Bootstrap table-light: фон светлый — нужен тёмный текст, иначе не видно на белом */ .modal.crm-modal .table thead.table-light th { color: var(--bs-emphasis-color, #212529) !important; border-color: rgba(0, 0, 0, 0.12); } .modal.crm-modal .table td { border-color: var(--crm-modal-border); } .modal.crm-modal .form-check-input { border-color: var(--bs-border-color); background-color: var(--crm-modal-input-bg); } .modal.crm-modal .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .modal.crm-modal .form-check-label { color: var(--crm-modal-text); } /* Choices.js внутри модалки */ .modal.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; } .modal.crm-modal .choices__input { background-color: transparent !important; color: var(--crm-modal-text) !important; } .modal.crm-modal .choices__list--dropdown, .modal.crm-modal .choices__list[aria-expanded] { background-color: var(--crm-modal-surface) !important; border-color: var(--crm-modal-border) !important; } .modal.crm-modal .choices__list--dropdown .choices__item--selectable { color: var(--crm-modal-text); } .modal.crm-modal .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: rgba(var(--bs-primary-rgb), 0.14) !important; } .modal.crm-modal .choices[data-type*="select-one"] .choices__button { opacity: 0.55; filter: none; } /* Боковое меню «Разделы» */ .site-nav-offcanvas { --bs-offcanvas-width: min(100vw, 17.6rem); background-color: var(--app-shell-bg) !important; color: var(--app-shell-text); border-color: var(--app-shell-border) !important; } .site-nav-offcanvas .offcanvas-header { color: var(--app-shell-text); border-color: var(--app-shell-border) !important; } .site-nav-offcanvas .offcanvas-title { color: var(--app-shell-text) !important; font-weight: 600; } .site-nav-offcanvas .btn-close { padding: 0.3rem; transform: scale(0.88); transform-origin: center; } .site-nav-offcanvas .site-nav-offcanvas__link { font-size: 0.8125rem; line-height: 1.3; padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; padding-left: 0.65rem !important; padding-right: 0.65rem !important; transition: background-color 0.12s ease, color 0.12s ease; background-color: transparent !important; color: var(--app-shell-text) !important; border-color: var(--app-shell-border) !important; } .site-nav-offcanvas .site-nav-offcanvas__link:hover { background-color: var(--app-shell-hover-bg) !important; color: var(--app-shell-text) !important; } .site-nav-offcanvas .site-nav-offcanvas__link:focus-visible { background-color: var(--app-shell-hover-bg) !important; color: var(--app-shell-text) !important; outline: 2px solid rgba(var(--bs-primary-rgb), 0.45); outline-offset: -2px; z-index: 1; } .site-nav-offcanvas .site-nav-offcanvas__link.active { background-color: var(--app-shell-active-bg) !important; color: var(--app-shell-active-text) !important; font-weight: 600; } .site-nav-offcanvas .site-nav-offcanvas__link.active:hover, .site-nav-offcanvas .site-nav-offcanvas__link.active:focus-visible { background-color: var(--app-shell-active-bg) !important; color: var(--app-shell-active-text) !important; } .site-nav-offcanvas .site-nav-offcanvas__link--nested { padding-left: 1.05rem !important; font-size: 0.75rem; } .site-nav-offcanvas .site-nav-offcanvas__section { font-size: 0.65rem; letter-spacing: 0.05em; line-height: 1.25; padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; background-color: var(--bs-tertiary-bg) !important; color: var(--app-shell-muted) !important; border-color: var(--app-shell-border) !important; } .site-nav-offcanvas .site-nav-offcanvas__logout { font-size: 0.8125rem; line-height: 1.3; transition: background-color 0.12s ease, color 0.12s ease; color: var(--app-shell-text) !important; } .site-nav-offcanvas .site-nav-offcanvas__footer { background-color: transparent !important; border-color: var(--app-shell-border) !important; } .site-nav-offcanvas .site-nav-offcanvas__logout:hover { background-color: var(--app-shell-hover-bg) !important; color: var(--app-shell-text) !important; } .site-nav-offcanvas .site-nav-offcanvas__logout:focus-visible { background-color: var(--app-shell-hover-bg) !important; outline: 2px solid rgba(var(--bs-primary-rgb), 0.45); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .site-nav-offcanvas .site-nav-offcanvas__link, .site-nav-offcanvas .site-nav-offcanvas__logout { transition: none; } } /* Склад: зона загрузки фото в модалке */ .modal.crm-modal .warehouse-photo-drop { position: relative; border: 1px dashed var(--crm-modal-border); border-radius: var(--crm-modal-radius); padding: 1.25rem 1rem; text-align: center; cursor: pointer; background-color: var(--crm-modal-surface-muted); transition: border-color 0.15s ease, background-color 0.15s ease; } .modal.crm-modal .warehouse-photo-drop:hover, .modal.crm-modal .warehouse-photo-drop:focus-visible { border-color: rgba(var(--bs-primary-rgb), 0.55); outline: none; } .modal.crm-modal .warehouse-photo-drop--active { border-color: rgba(var(--bs-primary-rgb), 0.85); background-color: rgba(var(--bs-primary-rgb), 0.12); } .modal.crm-modal .warehouse-photo-drop__input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .modal.crm-modal .warehouse-photo-drop__hint { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: var(--crm-modal-text-muted); font-size: 0.875rem; } .modal.crm-modal .warehouse-photo-drop__icon { font-size: 1.75rem; opacity: 0.85; } .modal.crm-modal .warehouse-photo-drop__sub { font-size: 0.75rem; opacity: 0.8; } .warehouse-table-thumb { max-width: 48px; max-height: 48px; vertical-align: middle; } /* Модалка «Заказ-наряд»: вкладки используют .tab-pane .table-responsive с белым фоном (style.css), а общие правила .crm-modal красят поля в светлый текст — в табличной части текст нечитаем. */ #workOrderModal .tab-pane .table { --bs-table-color: var(--bs-body-color, #212529); } #workOrderModal .tab-pane .table tbody td { color: var(--bs-body-color, #212529); } #workOrderModal .tab-pane .table tbody .form-control, #workOrderModal .tab-pane .table tbody .form-select { background-color: var(--crm-surface-elevated, #fff); border-color: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.15); color: var(--bs-body-color, #212529); } #workOrderModal .tab-pane .table tbody .form-control:focus, #workOrderModal .tab-pane .table tbody .form-select:focus { background-color: var(--crm-surface-elevated, #fff); color: var(--bs-body-color, #212529); border-color: rgba(var(--bs-primary-rgb), 0.55); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15); } #workOrderModal .tab-pane .table tbody .form-control::placeholder { color: var(--bs-secondary-color); opacity: 0.8; } /* Товары: «на складе» — фон из темы модалки + акцент успеха (не Bootstrap .table-success) */ #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse > td { color: var(--crm-modal-text, var(--bs-body-color)); border-color: var(--crm-modal-border, var(--bs-border-color)); background-color: rgba(var(--bs-success-rgb, 25, 135, 84), 0.12); box-shadow: inset 3px 0 0 rgba(var(--bs-success-rgb, 25, 135, 84), 0.55); } @supports (background-color: color-mix(in srgb, white 10%, black)) { #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse > td { background-color: color-mix(in srgb, var(--bs-success) 13%, var(--crm-modal-surface, var(--bs-body-bg))); } } #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse > td .form-control, #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse > td .form-select { background-color: var(--crm-modal-input-bg, var(--crm-surface-elevated, #fff)); color: var(--crm-modal-text, var(--bs-body-color)); border-color: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.15); } #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse > td .form-control:focus, #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse > td .form-select:focus { background-color: var(--crm-modal-input-focus-bg, var(--crm-modal-input-bg, #fff)); color: var(--crm-modal-text, var(--bs-body-color)); border-color: rgba(var(--bs-primary-rgb), 0.55); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15); } /* Шапка ЗН: строка 1 — заголовок + номер + статус слева, В черновик / Печать / закрыть справа; строка 2 — сохранение и Провести */ #workOrderModal .wo-modal-header { align-items: stretch; } #workOrderModal .wo-modal-header-actions { justify-content: flex-end; } /* Заказ-наряд: высота по окну, без прокрутки всего modal-body — только области таблиц/списка */ #workOrderModal .wo-modal-dialog { max-height: calc(100vh - 2rem); margin-top: 0.75rem; margin-bottom: 0.75rem; } /* Ширина +10% к modal-xl Bootstrap 5.3 (1140px → 1254px), без выхода за край вьюпорта */ #workOrderModal .wo-modal-dialog.modal-xl { max-width: min(calc(100vw - 2rem), calc(1140px * 1.1)); } #workOrderModal .wo-modal-dialog .modal-content { /* Фиксированная высота по окну — не зависит от активной вкладки */ height: calc(100vh - 2rem); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; overflow: hidden; } #workOrderModal .wo-modal-body { flex: 1 1 auto; min-height: 0; } #workOrderModal .wo-modal-tab-content { min-height: 0; } #workOrderModal .wo-modal-tab-content > .tab-pane.active { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Вкладка «Информация»: при нехватке места прокрутка только внутри вкладки, не у всего окна */ #workOrderModal .wo-modal-tab-content > .tab-pane.active#tabWoInfo { overflow-x: hidden; overflow-y: auto; } #workOrderModal .wo-modal-table-panel { min-height: 0; } #workOrderModal .wo-modal-table-scroll { overflow: auto; -webkit-overflow-scrolling: touch; } #workOrderModal .wo-modal-table-main, #workOrderModal .wo-modal-table-summary-table { table-layout: fixed; width: 100%; } /* Работы: ширины колонок (общие для основной таблицы и строки «Итого») */ #workOrderModal .wo-works-col-sel { width: 2.25rem; max-width: 2.25rem; } #workOrderModal .wo-works-col-labor { width: 88px; } /* Остальные колонки в px — эта забирает clamp, чтобы длинные наименования помещались */ #workOrderModal .wo-works-col-name { width: clamp(260px, 36vw, 560px); } #workOrderModal .wo-works-col-hourly { width: 76px; } /* «Трудоёмкость/цена» и «Стоимость н/ч»: уже + заголовок в 2 строки */ #workOrderModal #woWorksTable thead th:nth-child(3), #workOrderModal #woWorksTable tbody td:nth-child(3) { max-width: 5.5rem; width: 5.5rem; white-space: normal; line-height: 1.2; hyphens: auto; word-break: break-word; vertical-align: middle; text-align: center; } #workOrderModal #woWorksTable thead th:nth-child(3) { vertical-align: bottom; } #workOrderModal #woWorksTable thead th:nth-child(4), #workOrderModal #woWorksTable tbody td:nth-child(4) { max-width: 4.75rem; width: 4.75rem; white-space: normal; line-height: 1.2; hyphens: auto; word-break: break-word; vertical-align: middle; text-align: center; } #workOrderModal #woWorksTable thead th:nth-child(4) { vertical-align: bottom; } #workOrderModal #woWorksTable .js-wo-work-name { max-width: none; width: 100%; } #workOrderModal .wo-works-col-exec { width: 180px; } #workOrderModal .wo-works-col-sum { width: 120px; } #workOrderModal .wo-works-col-act { width: 50px; max-width: 50px; } /* Товары: ширины колонок */ #workOrderModal .wo-goods-col-name { width: 280px; } #workOrderModal .wo-goods-col-qty { width: 100px; } #workOrderModal .wo-goods-col-res { width: 100px; } #workOrderModal .wo-goods-col-price { width: 120px; } #workOrderModal .wo-goods-col-sum { width: 120px; } #workOrderModal .wo-goods-col-act { width: 50px; max-width: 50px; } #workOrderModal .wo-modal-table-scroll thead th { position: sticky; top: 0; z-index: 2; color: var(--crm-modal-text, var(--bs-body-color)); box-shadow: 0 1px 0 var(--crm-modal-border, var(--bs-border-color)); } #workOrderModal .wo-modal-table-scroll thead.table-light th { background-color: var(--crm-modal-surface-muted, var(--bs-table-bg, var(--bs-secondary-bg))); color: var(--crm-modal-text, var(--bs-body-color)); border-color: var(--crm-modal-border, var(--bs-border-color)); } /* Строка «Итого» закреплена под областью прокрутки (отдельная таблица) */ #workOrderModal .wo-modal-table-summary { background-color: var(--crm-modal-surface, var(--bs-body-bg)); } #workOrderModal .wo-modal-table-summary tbody.wo-table-tfoot td, #workOrderModal .wo-modal-table-summary tbody.wo-table-tfoot th { background-color: var(--crm-modal-surface-muted, var(--bs-tertiary-bg)); color: var(--crm-modal-text, var(--bs-body-color)); border-color: var(--crm-modal-border, var(--bs-border-color)); } #workOrderModal .wo-modal-footer-totals { color: var(--crm-modal-text-muted, var(--bs-secondary-color)); } #workOrderModal .wo-modal-footer-totals strong { color: var(--crm-modal-text, var(--bs-body-color)); } #workOrderModal .wo-modal-footer-totals__label { color: var(--crm-modal-text, var(--bs-body-color)); } #workOrderModal .wo-modal-footer-totals__sep { opacity: 0.65; } #workOrderModal .wo-modal-footer-totals__grand { margin-left: auto; } #workOrderModal #tabWoInfo .form-control-sm, #workOrderModal #tabWoInfo .form-select-sm { min-height: calc(1.5em + 0.5rem + 2px); } #workOrderModal .wo-modal-docs-scroll { -webkit-overflow-scrolling: touch; } /* Мобильная адаптация модалки «Заказ-наряд» */ @media (max-width: 991.98px) { #workOrderModal .wo-modal-dialog { max-height: 100vh; margin: 0; } #workOrderModal .wo-modal-dialog.modal-xl { max-width: 100vw; } #workOrderModal .wo-modal-dialog .modal-content { height: 100vh; max-height: 100vh; border-radius: 0; border-left: 0; border-right: 0; } #workOrderModal .wo-modal-header { padding: 0.5rem 0.625rem; gap: 0.35rem; } #workOrderModal .wo-modal-header__row--top { gap: 0.35rem !important; } #workOrderModal .wo-modal-header__row--actions { gap: 0.35rem !important; padding-top: 0.35rem !important; margin-top: 0.35rem !important; } #workOrderModal .wo-modal-header__row--actions .btn, #workOrderModal .wo-modal-header-actions .btn { min-height: 1.8rem; font-size: 0.75rem; padding: 0.2rem 0.45rem; line-height: 1.2; } #workOrderModal .wo-modal-header .btn-close { padding: 0.3rem; transform: scale(0.9); transform-origin: center; } #workOrderModal .wo-modal-header .badge { font-size: 0.68rem; } #workOrderModal .wo-modal-header__row--top > .d-flex.flex-wrap.align-items-baseline.gap-2.gap-md-3.min-w-0 { flex: 1 1 auto; min-width: 0; gap: 0.25rem 0.5rem !important; } #workOrderModal .wo-modal-header__row--top > .d-flex.flex-wrap.align-items-baseline.gap-2.gap-md-3.min-w-0 > .small.text-muted:first-of-type { display: none; } #workOrderModal .wo-modal-header-actions { gap: 0.35rem !important; } #workOrderModal #woSaveBtn { flex: 1 1 auto; } #workOrderModal #woSaveKeepOpenBtn { width: 1.95rem; min-width: 1.95rem; padding-left: 0; padding-right: 0; } #workOrderModal #woPostBtn, #workOrderModal #woRevertDraftBtn { flex: 0 0 auto; } #workOrderModal .wo-modal-body { padding: 0.75rem 0.75rem 0.5rem !important; } #workOrderModal .nav.nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; gap: 0.25rem; padding-bottom: 0.25rem; } #workOrderModal .nav.nav-tabs .nav-item { flex: 0 0 auto; } #workOrderModal .nav.nav-tabs .nav-link { white-space: nowrap; font-size: 0.8125rem; padding: 0.375rem 0.625rem; } #workOrderModal #tabWoInfo .row.g-2 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; } /* Табличная часть: карточки по строкам вместо горизонтальной прокрутки */ #workOrderModal .wo-modal-table-scroll { overflow-x: hidden; -webkit-overflow-scrolling: touch; } #workOrderModal .wo-modal-table-main, #workOrderModal .wo-modal-table-summary-table { min-width: 0; width: 100%; table-layout: auto; display: block; } #workOrderModal .wo-modal-table-main colgroup { display: none; } #workOrderModal .wo-modal-table-main tbody, #workOrderModal .wo-modal-table-summary-table tbody { display: block; width: 100%; } #workOrderModal .wo-modal-table-scroll thead { display: none; } #workOrderModal .wo-modal-table-main tbody tr { display: block; border: 1px solid var(--crm-modal-border, var(--bs-border-color)); border-radius: 0.375rem; margin-bottom: 0.75rem; padding: 0.5rem 0.625rem; background-color: var(--crm-modal-surface-muted, var(--bs-tertiary-bg)); } #workOrderModal .wo-modal-table-main tbody tr:last-child { margin-bottom: 0; } #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse > td { box-shadow: none; background-color: transparent; } #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse { background-color: rgba(var(--bs-success-rgb, 25, 135, 84), 0.12); box-shadow: inset 3px 0 0 rgba(var(--bs-success-rgb, 25, 135, 84), 0.55); } @supports (background-color: color-mix(in srgb, white 10%, black)) { #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse { background-color: color-mix(in srgb, var(--bs-success) 13%, var(--crm-modal-surface, var(--bs-body-bg))); } } #workOrderModal .wo-modal-table-main tbody td { display: block; border: none; padding: 0.35rem 0; width: 100% !important; max-width: none !important; } #workOrderModal .wo-modal-table-main tbody td + td { border-top: 1px solid rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.08); } #workOrderModal .wo-modal-table-main tbody td::before { display: block; content: attr(data-label); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--crm-modal-text-muted, var(--bs-secondary-color)); margin-bottom: 0.25rem; } #workOrderModal .wo-modal-table-main tbody td .form-control, #workOrderModal .wo-modal-table-main tbody td .form-select { width: 100%; max-width: none; } #workOrderModal .wo-modal-table-main tbody td.wo-td-sel { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; border-top: none; padding-top: 0; } #workOrderModal .wo-modal-table-main tbody td.wo-td-sel::before { margin-bottom: 0; flex: 0 0 auto; } #workOrderModal .wo-modal-table-main tbody td.wo-td-act { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; } #workOrderModal .wo-modal-table-main tbody td.wo-td-act::before { margin-bottom: 0; flex: 1 1 auto; text-align: left; text-transform: none; font-size: 0.7rem; } #workOrderModal .wo-modal-table-summary { border-top: 1px solid var(--crm-modal-border, var(--bs-border-color)); } #workOrderModal .wo-modal-table-summary-table thead { display: none; } #workOrderModal .wo-modal-table-summary-table colgroup { display: none; } #workOrderModal .wo-modal-table-summary-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1rem; padding: 0.5rem 0.25rem; } #workOrderModal .wo-modal-table-summary-table tbody tr td:empty { display: none !important; } #workOrderModal .wo-modal-table-summary-table tbody tr td { border: none; padding: 0; width: auto !important; max-width: 100%; } #workOrderModal .wo-modal-table-summary-table tbody tr td[colspan] { flex: 0 1 auto; } #workOrderModal .wo-modal-footer-totals { flex-direction: column; align-items: flex-start !important; gap: 0.25rem !important; font-size: 0.8125rem; padding-top: 0.5rem !important; margin-top: 0.5rem !important; } #workOrderModal .wo-modal-footer-totals__grand { margin-left: 0; text-align: left !important; } } @media (max-width: 575.98px) { #workOrderModal .modal-title { font-size: 1rem; } #workOrderModal #woDocNumberHeader, #workOrderModal .wo-modal-header .small { font-size: 0.75rem; } #workOrderModal .wo-modal-header__row--actions .btn { flex: 0 0 auto; } #workOrderModal #woSaveBtn, #workOrderModal #woPostBtn { width: auto; } #workOrderModal #woSaveBtn { flex: 1 1 auto; } #workOrderModal #woDocStatusDisplay { padding: 0.2em 0.45em; } } /* Безопасный fallback для табличной части ЗН на мобильных: если карточная раскладка конфликтует с браузером/вебвью, оставляем классическую таблицу со скроллом */ @media (max-width: 991.98px) { #workOrderModal .wo-modal-table-scroll { overflow-x: auto !important; } #workOrderModal .wo-modal-table-main, #workOrderModal .wo-modal-table-summary-table { display: table !important; /* Ширина по содержимому + горизонтальный скролл у .wo-modal-table-scroll */ width: max-content !important; min-width: 0 !important; max-width: none !important; table-layout: auto !important; } /* Без col — браузер сам распределяет ширины колонок */ #workOrderModal .wo-modal-table-main colgroup, #workOrderModal .wo-modal-table-summary-table colgroup { display: none !important; } #workOrderModal .wo-modal-table-scroll thead, #workOrderModal .wo-modal-table-summary-table thead { display: table-header-group !important; } #workOrderModal .wo-modal-table-main tbody, #workOrderModal .wo-modal-table-summary-table tbody { display: table-row-group !important; width: auto !important; } #workOrderModal .wo-modal-table-main tbody tr, #workOrderModal .wo-modal-table-summary-table tbody tr { display: table-row !important; border: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; } #workOrderModal .wo-modal-table-main tbody td, #workOrderModal .wo-modal-table-summary-table tbody td { display: table-cell !important; width: auto !important; max-width: none !important; border-top: 1px solid var(--crm-modal-border, var(--bs-border-color)) !important; padding: 0.25rem !important; } #workOrderModal .wo-modal-table-main tbody td::before, #workOrderModal .wo-modal-table-summary-table tbody td::before { content: none !important; display: none !important; } #workOrderModal .wo-modal-table-main tbody td.wo-td-sel, #workOrderModal .wo-modal-table-main tbody td.wo-td-act { display: table-cell !important; } #workOrderModal #woGoodsTable tbody tr.wo-goods-row--on-warehouse > td { background-color: rgba(var(--bs-success-rgb, 25, 135, 84), 0.12) !important; box-shadow: inset 3px 0 0 rgba(var(--bs-success-rgb, 25, 135, 84), 0.55) !important; } /* Компактнее: меньше горизонтальный скролл */ #workOrderModal #woWorksTable, #workOrderModal #woGoodsTable, #workOrderModal #woWorksTableSummary, #workOrderModal #woGoodsTableSummary { font-size: 0.72rem; } #workOrderModal #woWorksTable thead th, #workOrderModal #woGoodsTable thead th, #workOrderModal #woWorksTableSummary thead th, #workOrderModal #woGoodsTableSummary thead th { padding: 0.15rem 0.2rem !important; font-size: 0.62rem !important; font-weight: 600; line-height: 1.15; white-space: normal; vertical-align: bottom; hyphens: auto; word-break: break-word; } #workOrderModal #woWorksTable tbody td, #workOrderModal #woGoodsTable tbody td, #workOrderModal #woWorksTableSummary tbody td, #workOrderModal #woGoodsTableSummary tbody td { padding: 0.12rem 0.18rem !important; } #workOrderModal #woWorksTable .form-control, #workOrderModal #woWorksTable .form-select, #workOrderModal #woGoodsTable .form-control, #workOrderModal #woGoodsTable .form-select { padding: 0.08rem 0.22rem; /* ≥16px: иначе iOS Safari даёт принудительный zoom при фокусе/открытии select */ font-size: 16px; min-height: calc(1.35em + 0.34rem + 2px); } #workOrderModal #woWorksTable .js-wo-labor, #workOrderModal #woWorksTable .js-wo-hourly { max-width: 3.35rem !important; } #workOrderModal #woWorksTable .js-wo-sum, #workOrderModal #woGoodsTable .js-wo-g-qty, #workOrderModal #woGoodsTable .js-wo-g-res, #workOrderModal #woGoodsTable .js-wo-g-price, #workOrderModal #woGoodsTable .js-wo-g-amount { max-width: 4.5rem; } #workOrderModal #woWorksTable thead th:nth-child(3), #workOrderModal #woWorksTable tbody td:nth-child(3) { max-width: 4.5rem !important; width: 4.5rem !important; } #workOrderModal #woWorksTable thead th:nth-child(4), #workOrderModal #woWorksTable tbody td:nth-child(4) { max-width: 3.85rem !important; width: 3.85rem !important; } #workOrderModal #woWorksTable thead th:nth-child(2), #workOrderModal #woWorksTable tbody td:nth-child(2) { min-width: min(22rem, 85vw); max-width: none !important; width: auto !important; } #workOrderModal #woWorksTable .js-wo-exec-name, #workOrderModal #woGoodsTable .js-wo-g-name { max-width: 11rem; } #workOrderModal #woWorksTable .btn-sm, #workOrderModal #woGoodsTable .btn-sm { padding: 0.08rem 0.2rem; font-size: 0.7rem; } #workOrderModal #woWorksTable .form-check-input, #workOrderModal #woGoodsTable .form-check-input { width: 0.95rem; height: 0.95rem; margin-top: 0.1rem; } } @media (min-width: 992px) and (hover: none) and (pointer: coarse) { #workOrderModal #woWorksTable .form-control, #workOrderModal #woWorksTable .form-select, #workOrderModal #woGoodsTable .form-control, #workOrderModal #woGoodsTable .form-select { font-size: 16px; } }