: иначе tr-фон закрывает
зону border-spacing сплошным цветом. */
.cr-table-fixed tbody tr {
background: transparent !important;
}
.cr-table-fixed > thead {
background: transparent !important;
}
.cr-table-fixed th .hx-grid-header-cell-template {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
/* min-height отключён (1em = 1 строка): высота берётся от естественного
контента (2 строки у .cr-col-flag через pre-line),
1-строчные подтягиваются через table-layout: fixed + vertical-align. */
min-height: 1em;
}
/* Карточка строки: белый фон, тонкая рамка, скруглённые крайние ячейки,
мягкая тень в покое, тень/lift на hover. */
.cr-table-fixed tbody td {
background: #fff;
border-top: 1px solid #eef0f3;
border-bottom: 1px solid #eef0f3;
padding: 6px 12px !important;
vertical-align: middle;
color: #1f2937;
font-size: 14px !important;
line-height: 1.4;
overflow: hidden;
}
/* Внутренние span'ы наследуют размер ячейки — иначе перекрывают наш 14px. */
.cr-table-fixed tbody td * {
font-size: inherit;
}
.cr-table-fixed tbody td:first-child {
border-left: 1px solid #eef0f3;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.cr-table-fixed tbody td:last-child {
border-right: 1px solid #eef0f3;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* Hover — лёгкая подсветка фона и рамки. Без translateY/drop-shadow:
при компактных строках 40px любое смещение visually «прыгает». */
.cr-table-fixed tbody tr:hover td {
background: #fafbfc;
border-color: #e1e5ea;
}
/* Срочные заявки — розовая карточка вместо bootstrap.table-danger.
Класс «cr-urgent» проставляется в ItemRowCssSelector (см. razor.cs). */
.cr-table-fixed tbody tr.cr-urgent td {
background: #fef2f2;
border-color: #fecaca;
}
.cr-table-fixed tbody tr.cr-urgent:hover td {
border-color: #fca5a5;
}
/* Серый фон страницы под белыми карточками. Селектор :has() локализует
правило только на страницах с этой таблицей — другие страницы остаются
белыми. Поддержка :has() — Chrome/Edge 105+, Safari 15.4+, Firefox 121+. */
.main:has(.cr-table-fixed) {
background-color: #f4f5f7;
}
/* HxListLayout рисует свои белые .card/.card-body внутри .main — снимаем
их фон/рамки/тени, чтобы серый фон страницы был виден между белыми
карточками-строками таблицы. */
.main:has(.cr-table-fixed) .hx-list-layout,
.main:has(.cr-table-fixed) .hx-list-layout-content,
.main:has(.cr-table-fixed) .hx-list-layout > .card,
.main:has(.cr-table-fixed) .hx-list-layout .card-body {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Белая «шапка» тулбара — отделяет «заголовок + кнопки» от серого холста
со списком. Покрываем все возможные имена контейнера, какие HxListLayout
может использовать; реальное имя — то, у которого селектор сработает. */
.main:has(.cr-table-fixed) .hx-list-layout-toolbar,
.main:has(.cr-table-fixed) .hx-list-layout-header,
.main:has(.cr-table-fixed) .hx-toolbar,
.main:has(.cr-table-fixed) .hx-list-layout > .card > .card-header,
.main:has(.cr-table-fixed) .hx-list-layout .card-header {
background: #fff !important;
border-bottom: 1px solid #e9ecef !important;
padding: 14px 20px !important;
border-radius: 0 !important;
margin-bottom: 16px;
}
/* На белом фоне шапки серый «трей» вокруг табов выглядит как «коробка в коробке» —
снимаем его, оставляя только сами белые активные пилюли. */
.main:has(.cr-table-fixed) .hx-list-layout-toolbar .cr-tab-bar,
.main:has(.cr-table-fixed) .hx-list-layout-header .cr-tab-bar,
.main:has(.cr-table-fixed) .card-header .cr-tab-bar {
background: transparent;
padding: 0;
gap: 6px;
}
/* Tabular figures for numeric columns — keeps `ch` widths predictable */
.cr-col-idno,
.cr-col-tid,
.cr-col-created,
.cr-col-date {
font-variant-numeric: tabular-nums;
}
/* Моноширинный шрифт + чуть меньший size для IDNO и ID терминала —
цифры выровнены в столбец, текст не доминирует над комментарием. */
td.cr-col-idno,
td.cr-col-tid {
font-family: inherit;
font-size: 12.5px;
color: #1f2937;
}
/* Плейсхолдеры «—» и явно приглушённые элементы — мягкий серый,
чтобы отделять «пустые» ячейки от значимых данных. */
.cr-table-fixed tbody .text-muted {
color: #9ca3af !important;
}
.cr-col-date {
width: 7ch;
white-space: normal;
}
/* ==========================================================================
Фиксированные ширины колонок (table-layout: fixed).
Правило: сумма px-ширин < viewport, а width:auto хотя бы у одной колонки
(legalname + comment) поглощают остаток. Если все колонки фиксированы и
сумма > viewport — таблица сжимает их пропорционально, кнопки уезжают.
========================================================================== */
.cr-table-fixed { width: 100%; }
.cr-table-fixed .cr-col-created { width: 8em; }
.cr-table-fixed .cr-col-status { width: 210px; }
/* Колонка Статус: badge слева, круглишок «возраст статуса» прижат к правому
краю ячейки. При отсутствии круглишка (статус без даты или Cancelled/OnHold)
badge остаётся слева — space-between с одним flex-child оставляет его в начале. */
td.cr-col-status > div {
justify-content: space-between;
}
.cr-table-fixed .cr-col-pos { width: 8em;}
.cr-table-fixed .cr-col-tid { width: 18ch; }
/* Bank-specific: «Куратор» (MAIB) и «Код активации» (MICB).
ВНИМАНИЕ: ch-единицы здесь нерабочие — в каскаде на th получается font-size ~10px,
из-за чего 26ch даёт всего 144px. Используем px напрямую.
160px впритык вмещает «2093 2281 8721 9754» (19 chars × ~7px + 24px padding ≈ 157px). */
.cr-table-fixed .cr-col-curator { width: 160px; }
.cr-table-fixed .cr-col-actcode { width: 160px; }
.cr-table-fixed .cr-col-flag { width: 10em; }
.cr-table-fixed .cr-col-legalname { width: 34ch; max-width: 34ch; }
.cr-table-fixed .cr-col-idno { width: 22ch; }
.cr-table-fixed .cr-col-address { width: 40ch; }
.cr-table-fixed .cr-col-partner { width: 16ch; }
/* min-width: 10ch — Comment динамическая, сжимается при дефиците места под
bank-specific колонки, но держит читаемый минимум (~70px) для не-MAIB/не-MICB,
где bank-specific колонок нет и схлопывание до нуля выглядело бы как баг.
Полный текст всегда виден в HxTooltip на hover. */
.cr-table-fixed .cr-col-comment { width: auto; min-width: 10ch; }
/* Ширины подогнаны под фактический размер кнопок (28px) + gap (4px) + 4px воздуха справа.
Padding на td убираем (он создавал 12px пустоты слева и справа от ряда кнопок).
Партнёр: 3 иконки → 28*3 + 4*2 + 4 = 96px.
Оператор/админ: 4 иконки → 28*4 + 4*3 + 4 = 128px (модификатор cr-col-actions-wide,
проставляется в razor когда роль ≠ Partner — см. ItemCssClass в HxGridColumn). */
.cr-table-fixed .cr-col-actions { width: 96px; }
.cr-table-fixed .cr-col-actions.cr-col-actions-wide { width: 128px; }
.cr-table-fixed .cr-col-delete { width: 36px; }
.cr-table-fixed tbody td.cr-col-actions {
padding: 0 4px 0 0 !important;
}
/* Убираем общий td-padding (10px 12px) — он создавал 12px пустоты справа
от корзины до закругления карточки. 36px ширины + центрирование =
иконка 28px сидит ровно посередине с 4px воздуха по бокам. */
.cr-table-fixed tbody td.cr-col-delete {
padding: 0 !important;
}
.cr-col-delete {
text-align: center;
}
.cr-col-status {
white-space: nowrap;
}
.cr-col-status .badge {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
text-align: left;
}
/* Пилюля статуса выровнена по левому краю ячейки (заголовок «СТАТУС» тоже слева).
Совпадение padding-left у td и th устраняет «лесенку» заголовок↔пилюля. */
.cr-table-fixed td.cr-col-status,
.cr-table-fixed th.cr-col-status {
padding-left: 8px !important;
}
.cr-table-fixed td.cr-col-status {
text-align: left;
}
.cr-table-fixed td.cr-col-status .badge {
margin: 0;
display: inline-flex;
}
.cr-table-fixed td.cr-col-status > * {
margin-left: 0 !important;
}
/* «ID терминала» — увеличенный padding-left для отрыва от «Статус POS». */
.cr-col-tid {
white-space: nowrap;
padding-left: 1rem !important;
}
/* Заголовок «ID терминала» в шапке таблицы — перенос по пробелу и центр.
Значение в ячейке td остаётся nowrap (см. .cr-col-tid выше).
Обёртка `.hx-grid-header-cell-template` тоже принимает normal, потому что
текст шапки рендерится именно внутри неё, и иначе наследуется nowrap. */
th.cr-col-tid,
th.cr-col-tid .hx-grid-header-cell-template {
white-space: normal !important;
text-align: center;
}
/* Класс используется на обёртке HxTooltip (теперь — не на голом span),
поэтому селектор без префикса тега, чтобы сработать независимо от того,
во что Havit упакует обёртку. */
.cr-col-name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* min-width:0 нужен, чтобы ellipsis работал, когда .cr-col-name — flex-item
(в колонке «Юр. название» обёрнут d-flex для иконки ⚠ NeedsReview слева). */
min-width: 0;
max-width: 100%;
}
td.cr-col-name-td,
td.cr-col-partner {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Колонка «Адрес торговой точки»: фиксированная ширина 28ch, длинный адрес
обрезается ellipsis, полное значение видно во встроенном HxTooltip. */
td.cr-col-address {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.cr-col-address-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 100%;
}
td.cr-col-comment {
min-width: 0;
overflow: hidden;
}
td.cr-col-comment .cr-col-comment-text {
/* Ограничение в ОДНУ строку с ellipsis: в ячейке показывается только последний день
событий (см. ClientRequestEventsSummaryFormatter.GetLastDayFragment), полная история
по дням — в HxTooltip-плашке (CssClass="cr-comment-tooltip", стили ниже).
!important на display обязателен: класс задаётся через HxTooltip.WrapperCssClass,
а сам wrapper-span получает ещё и bootstrap-класс `d-inline-block`
(display: inline-block !important), который иначе ломает overflow+ellipsis в флексе. */
display: -webkit-box !important;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: normal;
overflow-wrap: normal;
min-width: 0;
max-width: 100%;
}
/* Кастомная стилизация Bootstrap-tooltip для колонки «Комментарий»:
увеличенный шрифт, ширина под многострочный текст, выравнивание слева.
`white-space: pre-line` рендерит `\n` из JoinDaysMultiline как переводы строк
без HTML — это даёт многострочный tooltip без Html=true и без XSS-риска. */
.cr-comment-tooltip .tooltip-inner {
font-size: 0.95rem;
line-height: 1.5;
max-width: 600px;
text-align: left;
padding: 0.55rem 0.8rem;
white-space: pre-line;
}
/* Тултип круглишка «возраст статуса» в колонке Статус. Содержимое — 3 короткие
строки (Дата / Просрочено-Возраст / Порог), `white-space: pre-line` рендерит
\n из ресурсной строки как переводы строк, text-align:left выравнивает по
левому краю как у комментариев. */
.cr-stage-tooltip .tooltip-inner {
white-space: pre-line;
text-align: left;
}
/* Тултип расширенного описания колонки на th. Короткий заголовок (uppercase 10px)
раскрывается в полнотекстовое объяснение при наведении. Сброс text-transform/
letter-spacing/font-weight нужен из-за наследования стилей шапки. */
.cr-header-tooltip .tooltip-inner {
font-size: 0.85rem;
line-height: 1.4;
max-width: 280px;
text-align: left;
text-transform: none;
letter-spacing: normal;
font-weight: normal;
}
.cr-col-actions {
white-space: nowrap;
}
/* Колонка «действия» (.cr-col-actions): несколько иконок прижимаем к правому
краю, иначе они уплывают от текста соседних колонок. */
.cr-col-actions > div,
.cr-col-actions .d-flex {
display: flex;
flex-wrap: nowrap;
gap: 4px;
justify-content: flex-end;
align-items: center;
white-space: nowrap;
}
/* Колонка «корзина» (.cr-col-delete): одиночная иконка по центру —
совпадает с центром заголовка «…» в шапке. */
.cr-col-delete > div,
.cr-col-delete .d-flex {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.cr-col-actions .btn,
.cr-col-delete .btn {
flex-shrink: 0;
width: 24px;
height: 24px;
padding: 0;
}
/* Таблица «Данные по импорту» — каждая ячейка обрезана 32ch с word-wrap,
чтобы длинные «Comentariu intern» не растягивали всю строку. Заголовки
тоже wrap (а не nowrap), чтобы соответствовали ширине своих значений. */
.cr-import-data-table th,
.cr-import-data-table td {
min-width: 8ch;
max-width: 32ch;
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
vertical-align: top;
}
/* Подпись под-секции внутри карточки «Данные по импорту» (над таблицами). */
.cr-import-section-label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--bs-secondary-color, #6c757d);
text-transform: uppercase;
letter-spacing: 0.02em;
margin-bottom: 0.35rem;
}
/* Client Request List — Split-button category filters */
.cr-tab-bar {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.cr-split-pill .btn {
border: 1px solid var(--bs-primary);
background: transparent;
color: var(--bs-primary);
font-size: 0.8rem;
line-height: 1.4;
padding: 0.2rem 0.5rem;
transition: background-color 0.15s, color 0.15s;
}
.cr-split-pill .cr-tab-pill-main {
border-radius: 50rem 0 0 50rem;
padding-left: 0.6rem;
cursor: pointer;
white-space: nowrap;
}
.cr-split-pill .cr-tab-pill-split {
border-radius: 0 50rem 50rem 0;
padding: 0.2rem 0.35rem;
border-left: none;
cursor: pointer;
}
.cr-split-pill .btn:hover {
background-color: var(--bs-primary);
color: #fff;
opacity: 0.85;
}
.cr-split-pill .btn.active {
background-color: var(--bs-primary);
color: #fff;
border-color: var(--bs-primary);
}
.cr-split-pill .btn.active + .cr-tab-pill-split {
border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.cr-split-pill .dropdown-toggle-split::after {
vertical-align: 0.2em;
}
/* Dropdown menu */
.cr-split-dropdown {
font-size: 0.85rem;
min-width: 10rem;
}
.cr-split-dropdown .dropdown-item {
display: flex;
align-items: center;
padding: 0.3rem 0.75rem;
}
.cr-split-dropdown .dropdown-item.active,
.cr-split-dropdown .dropdown-item:active {
background-color: var(--bs-primary);
color: #fff;
}
/* Status color dot in dropdown */
.cr-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.cr-split-dropdown .dropdown-item.active .cr-dot {
border: 1px solid rgba(255, 255, 255, 0.5);
}
.cr-partner-filter {
min-width: 11em;
max-width: 16em;
width: 14em;
}
.two-lines-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal !important;
word-break: break-word;
min-height: 3rem;
max-height: 3rem;
line-height: 1.5rem;
}
/* ==========================================================================
Client Request Object Form — vertical side labels, white cards, grey bg
========================================================================== */
.dashboard-form {
background-color: #F0F1F3;
margin: -1rem;
margin-top: 0;
padding: 0.75rem;
padding-top: 0.5rem;
flex-grow: 1;
}
.cr-card {
display: flex;
flex-direction: column;
margin-bottom: 12px;
}
.cr-card-label {
font-weight: 700;
font-size: 13px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #555;
margin-bottom: 6px;
padding: 0 0 0 4px;
}
.cr-card-body {
flex: 1;
background-color: #FFFFFF;
border: 1px solid #E0E0E0;
border-left: 3px solid #00bcd4;
border-radius: 8px;
padding: 0.5rem;
min-width: 0;
}
/* Journal table headers — exact match of .form-label from Havit bootstrap.css */
.cr-th-label {
font-weight: 500 !important;
font-size: 0.875rem !important;
color: #6c757d !important;
background-color: transparent !important;
border-top: none !important;
border-bottom: none !important;
padding: 0.25rem 0.5rem;
}
/* Journal data cells — match form-control value appearance */
.cr-journal-val {
font-size: 1rem;
font-weight: 400;
color: var(--bs-body-color);
line-height: 1.5;
}
/* Journal table wrapper — disable .table-responsive scroll-overflow so the
HxInputDate calendar popup (and other dropdowns) don't get clipped vertically. */
.cr-journal-wrap.table-responsive {
overflow: visible;
}
/* Large switch — match form-control height, centered */
.cr-switch-lg {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.cr-switch-lg .form-check {
min-height: calc(1.5em + 0.75rem + 2px); /* same as .form-control */
display: flex;
align-items: center;
}
.cr-switch-lg .form-check-input {
width: 3em;
height: 1.5em;
margin-top: 0;
}
/* Large checkbox — ~2x bigger, used in list cells */
.cr-checkbox-lg .form-check {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding-left: 0;
min-height: 0;
}
.cr-checkbox-lg .form-check-input {
width: 18px;
height: 18px;
margin: 0;
cursor: pointer;
border-radius: 5px;
border: 1.5px solid #d1d5db;
}
.cr-checkbox-lg .form-check-input:checked {
background-color: #1ab6e0;
border-color: #1ab6e0;
}
/* Read-only state — clear gray, not faded blue */
.cr-checkbox-lg .form-check-input:disabled {
opacity: 1;
background-color: #e9ecef;
border-color: #adb5bd;
cursor: not-allowed;
}
.cr-checkbox-lg .form-check-input:disabled:checked {
background-color: #6c757d;
border-color: #6c757d;
}
/* Заголовок «Статус POS» — две строки + центрирование (и шапка, и ячейки).
pre-line нужен, чтобы перенос строки из ресурса локализации работал как
. */
.cr-col-pos {
white-space: pre-line;
text-align: center;
vertical-align: middle;
}
/* Обёртка тултипа должна совпадать с границами , включая зону padding'а.
Иначе hover «не ловится» в пустоте вокруг иконки — это были 10px 12px padding'а
от .cr-table-fixed tbody td. Переносим padding с | внутрь обёртки. */
.cr-pos-cell {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 24px;
padding: 6px 12px;
box-sizing: border-box;
line-height: 1;
cursor: default;
}
/* Убираем padding с самой ячейки колонки POS — он теперь живёт внутри .cr-pos-cell,
так что вся видимая площадь столбца становится hover-зоной тултипа.
!important — чтобы перебить общее правило .cr-table-fixed tbody td { padding: 10px 12px }. */
.cr-table-fixed tbody td.cr-col-pos {
padding: 0 !important;
vertical-align: middle;
}
.cr-pos-icon {
font-size: 22px;
line-height: 1;
color: #6c757d; /* fallback */
}
.cr-pos-icon-prep { color: #6c757d; } /* серый — подготавливается у банка */
.cr-pos-icon-ready { color: #0d6efd; } /* синий — готов, ещё у банка */
.cr-pos-icon-installed { color: #198754; } /* зелёный — установлен у клиента */
/* Кликабельная зона ячейки POS: вся площадь td является hover/click-зоной,
поэтому и placeholder-иконка (chevron-down при пустом статусе), и реальная
иконка статуса одинаково легко «попадаются» курсором. */
.cr-pos-cell-clickable {
cursor: pointer;
transition: background-color 0.12s ease;
}
.cr-pos-cell-clickable:hover {
background-color: rgba(13, 110, 253, 0.08);
}
/* Placeholder для PosStatus = null. Синий plus-circle — стандартный
affordance "добавить значение", сигналит кликабельность лучше, чем серый
chevron-down (тот сливался с обычной иконкой раскрытия и не звал кликнуть). */
.cr-pos-icon-empty {
color: #0d6efd;
font-size: 20px;
}
.cr-pos-cell-clickable:hover .cr-pos-icon-empty {
color: #0a58ca;
}
/* Ленивый общий dropdown для смены PosStatus. position:fixed + координаты
клика — попап появляется рядом с курсором, не зависит от scroll position.
z-index 1080 — выше Bootstrap modal-backdrop (1040) но ниже tooltip (1090). */
.cr-pos-dropdown {
position: fixed;
z-index: 1080;
min-width: 220px;
padding: 4px 0;
}
.cr-pos-dropdown .dropdown-item {
padding: 6px 16px;
font-size: 14px;
}
.cr-pos-dropdown .dropdown-item .cr-pos-icon {
font-size: 18px;
}
/* Невидимый overlay на весь viewport — ловит клики «вне» dropdown'а и
закрывает его. Прозрачный (без фона), но перекрывает остальной UI,
чтобы случайный клик не сработал по другим элементам. */
.cr-pos-backdrop {
position: fixed;
inset: 0;
z-index: 1079;
background: transparent;
}
.cr-stage-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
margin-left: 6px;
border-radius: 999px;
font-family: inherit;
font-size: 12px !important;
font-weight: 600;
line-height: 1;
background: #dbe9ff;
color: #0d6efd;
vertical-align: middle;
box-sizing: border-box;
}
/* Иконка ⚠ перед именем клиента в колонке «Юр. название» — выравниваем
по бейслайну текста, чтобы не висела сверху. */
.cr-col-legalname .text-warning {
font-size: 13px;
margin-right: 4px;
vertical-align: -1px;
line-height: 1;
}
.cr-stage-badge.overdue {
background: #fde0e3;
color: #b3192a;
}
/* Плейсхолдер для строк с незаполненной датой статуса.
Не бейдж — просто тихое тире в той же позиции, что и числовой бейдж.
Внешний отступ от badge'а Status задаёт flex-gap родителя (.gap-1). */
.cr-stage-missing {
display: inline-block;
color: #adb5bd;
font-size: 12px;
line-height: 1;
vertical-align: middle;
cursor: help;
}
/* Multi-line column header for narrow flag columns (Принято к фискал. / Активир.) */
.cr-col-flag {
white-space: pre-line;
text-align: center;
}
/* Textarea resize */
.cr-resize-vertical {
resize: vertical;
}
/* Partner field highlight */
.cr-highlight-field .form-control,
.cr-highlight-field .form-select {
border-color: #ffc107;
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
animation: cr-pulse 1.5s ease-in-out 3;
}
@keyframes cr-pulse {
0%, 100% { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); }
50% { box-shadow: 0 0 0 0.35rem rgba(255, 193, 7, 0.4); }
}
/* Excel diff highlight */
.excel-diff-changed {
background-color: #fff3cd;
border-radius: 4px;
padding: 2px 4px;
}
/* ==========================================================================
Status pills — приглушённая палитра + ::before dot слева.
Селектор [class*="cr-status-"] ловит .badge с любым из 8 cr-status-* классов.
Палитра — мягкие tint + насыщенный текст; яркий цвет уходит в точку.
========================================================================== */
.badge[class*="cr-status-"] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px 4px 9px;
border-radius: 999px;
font-size: 13px !important;
font-weight: 500;
line-height: 1.4;
border: 1px solid transparent;
text-transform: none;
letter-spacing: 0;
}
.badge[class*="cr-status-"]::before {
content: "";
width: 6px;
height: 6px;
border-radius: 99px;
flex-shrink: 0;
}
.badge.cr-status-new { background: transparent; color: #495057; border-color: #dee2e6; }
.badge.cr-status-new::before { background: #adb5bd; }
.badge.cr-status-inprogress { background: #faf3d8; color: #8a6e1a; }
.badge.cr-status-inprogress::before { background: #d4b73a; }
.badge.cr-status-atclient { background: #ebf6cf; color: #4d6b1a; }
.badge.cr-status-atclient::before { background: #8fb71a; }
.badge.cr-status-sentctif { background: #d9eef5; color: #15657a; }
.badge.cr-status-sentctif::before { background: #4ab2ce; }
.badge.cr-status-ctifpayment{ background: #cce8f8; color: #0c5a82; }
.badge.cr-status-ctifpayment::before{ background: #00a0e6; }
.badge.cr-status-fiscalized { background: #d4eedd; color: #1f6b3a; }
.badge.cr-status-fiscalized::before { background: #28b453; }
.badge.cr-status-onhold { background: #fde0e6; color: #8a3d4a; }
.badge.cr-status-onhold::before { background: #e87a8c; }
.badge.cr-status-cancelled { background: #f5d6dc; color: #7a2c3a; }
.badge.cr-status-cancelled::before { background: #c46478; }
/* Точки в dropdown'е «Выбрать статус» (cr-dot — отдельный span). */
.cr-dot.cr-status-new { background: #adb5bd; }
.cr-dot.cr-status-inprogress { background: #d4b73a; }
.cr-dot.cr-status-atclient { background: #8fb71a; }
.cr-dot.cr-status-sentctif { background: #4ab2ce; }
.cr-dot.cr-status-ctifpayment{ background: #00a0e6; }
.cr-dot.cr-status-fiscalized { background: #28b453; }
.cr-dot.cr-status-onhold { background: #e87a8c; }
.cr-dot.cr-status-cancelled { background: #c46478; }
/* ==========================================================================
Toolbar — заголовок страницы, сегментированный фильтр статусов, кнопки
========================================================================== */
.main:has(.cr-table-fixed) h1,
.main:has(.cr-table-fixed) .hx-list-layout-title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0;
}
/* Фильтр-пилюли категорий — цвет зависит от модификатора:
.cr-tab-active (синий), .cr-tab-suspended (жёлтый), .cr-tab-archived (зелёный).
Класс модификатора проставляется в razor от category.State. Базовые стили
(radius/padding/font) идут из старого блока .cr-split-pill .btn ниже в файле. */
.cr-split-pill.cr-tab-active .btn {
border-color: #0d6efd;
color: #0d6efd;
}
.cr-split-pill.cr-tab-active .btn:hover,
.cr-split-pill.cr-tab-active .btn.active {
background-color: #0d6efd;
border-color: #0d6efd;
color: #fff;
}
.cr-split-pill.cr-tab-suspended .btn {
border-color: #d4b73a;
color: #8a6e1a;
}
.cr-split-pill.cr-tab-suspended .btn:hover,
.cr-split-pill.cr-tab-suspended .btn.active {
background-color: #d4b73a;
border-color: #d4b73a;
color: #1f2937;
}
.cr-split-pill.cr-tab-archived .btn {
border-color: #28b453;
color: #1f6b3a;
}
.cr-split-pill.cr-tab-archived .btn:hover,
.cr-split-pill.cr-tab-archived .btn.active {
background-color: #28b453;
border-color: #28b453;
color: #fff;
}
/* Главная кнопка «Создать заявку» — бренд-цвет (бирюза). */
.main:has(.cr-table-fixed) .btn.btn-primary {
background: #1ab6e0;
border-color: #1ab6e0;
border-radius: 7px;
font-weight: 500;
padding: 6px 14px;
box-shadow: none;
}
/* Вторичные кнопки тулбара — белые с тонкой рамкой. */
.main:has(.cr-table-fixed) .hx-list-layout-toolbar .btn-secondary,
.main:has(.cr-table-fixed) .hx-list-layout-toolbar .btn.btn-outline-secondary {
background: #fff;
border: 1px solid #e5e7eb;
color: #374151;
border-radius: 7px;
font-weight: 500;
}
/* Тёмные chip'ы активных фильтров в HxFilterForm — перекрасить под
светлую палитру тулбара. */
.main:has(.cr-table-fixed) .hx-filter-form-chip,
.main:has(.cr-table-fixed) .hx-filter-form .badge {
background: #fff !important;
color: #374151 !important;
border: 1px solid #e5e7eb;
font-weight: 500;
border-radius: 7px;
padding: 4px 8px;
}
/* ==========================================================================
Table head — uppercase grey без фона/рамок (sticky сохраняется через
HeaderRowCssClass="sticky-top" в EntityListForm).
========================================================================== */
.cr-table-fixed thead th {
background: #f4f5f7 !important;
border: 0 !important;
/* font-size 10px (было 11) + line-height 1 (было 1.1) — режем высоту до
упора. 2-строчные заголовки (.cr-col-flag) теперь дают ~20px вместо ~25px. */
font-size: 10px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.04em;
/* bottom-padding 12px: визуальный «воздух» между sticky-шапкой и первой
карточкой при скролле — иначе строки выезжают в шапку впритык. */
padding: 0 12px 12px !important;
line-height: 1;
vertical-align: middle;
/* Заголовки могут переноситься в 2 строки по своим колоночным правилам
(.cr-col-flag использует white-space: pre-line). */
position: sticky;
top: 0;
z-index: 5;
/* Мягкая тень-капля под sticky-шапкой при скролле. */
box-shadow: 0 6px 8px -6px rgba(17, 24, 39, .08);
}
/* Дополнительный зазор между шапкой и первой карточкой (поверх border-spacing). */
.cr-table-fixed thead + tbody tr:first-child td {
padding-top: 8px !important;
}
.cr-table-fixed thead tr {
background: #f4f5f7 !important;
height: auto;
}
/* ==========================================================================
Comment column — chip даты + тело комментария
Дата вынесена в синий моно-чип (.cr-event-date), тело — приглушённый серый.
Разбор «[12.05] body» делается в razor.cs (SplitEventFragment).
========================================================================== */
.cr-col-comment-text {
font-size: 13px;
color: #1f2937 !important;
}
.cr-event-date {
display: inline-block;
font-family: inherit;
font-size: 12px !important;
font-weight: 600;
color: #0d6efd;
background: #eaf1ff;
padding: 2px 7px;
border-radius: 6px;
margin-right: 6px;
letter-spacing: 0.01em;
vertical-align: 1px;
}
.cr-event-body {
color: #1f2937 !important;
font-size: 13px;
}
/* ==========================================================================
Action icons — flat, появляются при hover строки.
========================================================================== */
.cr-col-actions .btn,
.cr-col-delete .btn {
border: 0 !important;
background: transparent !important;
color: #6b7280 !important;
width: 24px;
height: 24px;
padding: 0;
border-radius: 6px;
box-shadow: none !important;
opacity: 0;
transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.cr-col-actions .btn:hover {
background: #f3f4f6 !important;
color: #111827 !important;
}
.cr-col-delete .btn:hover {
background: #fee2e2 !important;
color: #dc2626 !important;
}
.cr-table-fixed tbody tr:hover .cr-col-actions .btn,
.cr-table-fixed tbody tr:hover .cr-col-delete .btn,
.cr-col-actions .btn:focus-visible,
.cr-col-delete .btn:focus-visible {
opacity: 1;
}
/* ==========================================================================
Read-only карточки (для роли Партнёр на Fiscal Cloud / Даты) —
диагональная штриховка, пунктирная рамка, чёрная боковая полоска.
Для редактируемых карточек левая полоска остаётся бирюзовой (.cr-card-body).
========================================================================== */
.cr-card.cr-readonly {
opacity: 0.7;
}
.cr-card.cr-readonly > .cr-card-body {
background: repeating-linear-gradient(
135deg,
#f3f4f6 0,
#f3f4f6 8px,
#ececec 8px,
#ececec 9px
);
border: 1px dashed #d1d5db;
border-left: 3px solid #000;
}
.cr-card.cr-readonly .cr-card-label {
color: #9ca3af;
}
/* ==========================================================================
ВНИМАНИЕ: не задавать `height: auto !important` на `tbody tr` глобально!
Blazor рендерит ВНУТРИ tbody невидимые spacer-`` со
значением inline `height` = (оставшиеся неподгруженные строки × ItemSize),
именно они задают полный scrollHeight контейнера. `height: auto !important`
пробивает inline у спейсеров → scrollHeight коллапсирует до видимой пачки
→ IntersectionObserver Virtualize не триггерит подгрузку следующей страницы.
Компактная высота строки достигается через ItemRowHeight (см. RowHeight в
ClientRequestList.razor.cs): HxGrid рендерит ` `
и спейсеры тоже корректно — никаких !important-оверайдов высоты не нужно.
========================================================================== */
/* ==========================================================================
Drill-down модал статистики (/portal/statistics): фиксируем высоту модала,
чтобы вложенный HxGrid (его .hx-progress-overlay = flex-grow:1) получил
высоту и заработал infinite-scroll. BodyCssClass="d-flex flex-column" на
самом модале делает тело flex-колонкой. На малых экранах модал и так
fullscreen (ModalFullscreen.LargeDown), поэтому высоту ограничиваем только
на >= lg, где модал не на весь экран.
========================================================================== */
@media (min-width: 992px) {
.cr-drill-modal .modal-content {
height: 85vh;
}
}
/* ==========================================================================
Drill-down дашборда статистики и список drill-модала открываются по двойному
клику (карточки/элементы графиков, строки таблицы). Двойной клик в браузере
выделяет текст — гасим выделение, чтобы оно не «прилипало» после дабл-клика.
На input/textarea выделение не трогаем (там оно нужно для редактирования).
========================================================================== */
.cp-stats-noselect,
.cr-drill-modal .modal-body {
user-select: none;
-webkit-user-select: none;
}
.cp-stats-noselect input,
.cp-stats-noselect textarea,
.cr-drill-modal .modal-body input,
.cr-drill-modal .modal-body textarea {
user-select: text;
-webkit-user-select: text;
}
|