/* Перенесено из app.css при разбиении стилей по модулям — финансовый блок (commerce/catalog/crm/kpi), module/finance.js. */

/* ---------- Finance module (CRM) ---------- */

/* --- Module shell --- */

#module-finance,
#module-commerce,
#module-crm,
#module-kpi,
#module-catalog {
  padding-bottom: 110px;
}

#module-finance:has(#view-finance-dashboard:not([hidden])),
#module-kpi:has(#view-kpi-dashboard:not([hidden])) {
  overflow: hidden;
}

/* --- Dashboard / Сводка --- */

/* The KPI dashboard sits inside the module chrome (editor bar), so it pins to
   the viewport below the global header instead of filling a flex cell. */
#view-kpi-dashboard.dash-shell {
  position: fixed;
  inset: var(--sz-header) 0 0;
}

/* While the dashboard is hidden, center its single loading label in the same
   viewport area that the dashboard will occupy. */
#kpi-loading {
  position: fixed;
  inset: var(--sz-header) 0 0;
  min-height: 0;
  pointer-events: none;
}

/* --- Динамика (cumulative earnings plot) --- */

#module-kpi {
  --current-obligated-series: var(--accent-soft);
}

.crm-dynamics {
  margin: 0;
}

.crm-dynamics-plot {
  display: block;
  width: 100%;
  height: auto;
}

/* Obligations level is a quiet background area beneath the turnover lines. */
.crm-dyn-area {
  fill-opacity: 1;
  pointer-events: none;
}

/* The active plan keeps its familiar dashed appearance at rest. Hovering its
   generous invisible hit path (or the Plan legend item) adds a solid overlay
   and reveals superseded trajectories as deliberately faint dashed context. */
.crm-dyn-plan-current {
  stroke: var(--text-dim);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  pointer-events: none;
}

.crm-dyn-plan-previous {
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}

.crm-dyn-plan-emphasis {
  stroke: var(--text);
  stroke-width: 2.25;
  stroke-linecap: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}

.crm-dyn-plan-hit {
  cursor: crosshair;
  pointer-events: stroke;
  outline: none;
}

.crm-dynamics:has(.crm-dyn-plan-hit:is(:hover, :focus-visible)) .crm-dyn-plan-previous,
.crm-dynamics:has(.crm-dyn-plan-legend:is(:hover, :focus-visible)) .crm-dyn-plan-previous {
  opacity: var(--plan-history-opacity, .22);
}

.crm-dynamics:has(.crm-dyn-plan-hit:is(:hover, :focus-visible)) .crm-dyn-plan-emphasis,
.crm-dynamics:has(.crm-dyn-plan-legend:is(:hover, :focus-visible)) .crm-dyn-plan-emphasis {
  opacity: 1;
}

.crm-dyn-plan-legend {
  cursor: help;
  border-radius: var(--radius);
}

.crm-dyn-plan-legend:is(:hover, :focus-visible) {
  color: var(--text);
}

.crm-dyn-plan-legend:focus-visible {
  outline: var(--sp-micro) solid var(--accent);
  outline-offset: var(--sp-xs);
}

.crm-dyn-label {
  font-size: var(--fs-tiny);
  font-weight: 600;
  fill: var(--accent);
}

.crm-dyn-tick {
  font-size: var(--fs-tiny);
  fill: var(--text-muted);
}

.crm-dyn-tick--quarter {
  font-weight: 600;
  fill: var(--text-dim);
}

.crm-dyn-tick--y {
  fill: var(--text-faint);
}

/* Clickable axis labels select their period. */
.crm-dyn-tick[data-from] {
  cursor: pointer;
}

.crm-dyn-tick[data-from]:hover {
  fill: var(--accent);
}

/* Grab handles for the selected time markers (WE arrow while hovering). */
.crm-dyn-grab {
  cursor: ew-resize;
}

/* Whole-range drag handle — moves both edges together (move cursor). */
.crm-dyn-grab--range {
  cursor: move;
}

/* Legend below the chart area, centered. */
.crm-dynamics-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.crm-dynamics-legend .swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
}

.crm-dynamics-legend .swatch::before {
  content: "";
  width: var(--sp-md);
  height: var(--sp-tiny);
  border-radius: var(--sp-tiny);
  background: var(--c, #ccc);
}

.crm-dynamics-legend .swatch--area::before {
  height: var(--sp-base);
  border: var(--sp-micro) solid var(--c, #ccc);
}

.crm-dynamics-legend .swatch--dash::before {
  background: transparent;
  border-radius: 0;
  border-top: 1px dashed var(--c, #ccc);
  height: 0;
}

/* Date/period statistics — 3 kv-style columns (start / mid / end) + period summary. */
.crm-dynamics-stats-wrap {
  margin-top: var(--sp-lg);
}

.crm-dynamics-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-xl);
}

.crm-dyn-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  max-width: var(--sz-form-w);
  min-width: 0;
}

/* Column header (date / «За период») as an h4. */
.crm-dyn-stat > h4 {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-main);
  font-weight: 600;
}

/* Values container — a two-column k-v grid. */
.crm-dyn-stat-values {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-md);
  row-gap: var(--sp-xs);
  align-items: baseline;
}

.crm-dyn-stat-values .k {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.crm-dyn-stat-values .v {
  color: var(--text);
  font-size: var(--fs-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Count values that open a deal roster on click. */
.crm-dyn-stat-values .v.crm-dyn-click {
  cursor: pointer;
}

.crm-dyn-stat-values .v.crm-dyn-click:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Thin separator between the chart values and the summary indicators. */
.crm-dyn-divider {
  grid-column: 1 / -1;
  border-top: var(--sp-micro) solid var(--border);
}

.crm-dynamics-hint {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  text-align: center;
}

.crm-plan-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-xl);
  min-height: 0;
  width: 100%;
}

.crm-plan-panel .kpi-organization-title {
  color: var(--text);
  font-size: var(--fs-3xl);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color .15s ease;
}

.kpi-organization-title:hover,
.kpi-organization-title.is-open {
  color: var(--accent);
}

.kpi-organization-title:focus-visible {
  outline: none;
  border-radius: var(--sp-sm);
  box-shadow: var(--focus-ring);
}

.kpi-organization-title.is-disabled {
  color: var(--text-faint);
  cursor: default;
}

.kpi-organization-options {
  position: fixed;
  inset: auto;
  z-index: 10000;
  display: block;
  width: auto;
  max-height: var(--sz-list-max-h);
  margin: 0;
  padding: 0;
  overflow: auto;
  box-sizing: border-box;
  border: var(--sp-micro) solid var(--border);
  border-radius: var(--sp-sm);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.kpi-organization-option {
  display: block;
  width: 100%;
  padding: var(--sp-sm) var(--sp-md);
  padding-left: calc(var(--sp-md) + var(--organization-depth, 0) * var(--sp-lg));
  border: 0;
  border-bottom: var(--sp-micro) solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-main);
  text-align: left;
  cursor: pointer;
}

.kpi-organization-option:last-child {
  border-bottom: 0;
}

.kpi-organization-option:hover,
.kpi-organization-option.active {
  background: var(--bg-hover);
}

.kpi-organization-option.active {
  font-weight: 600;
}

.kpi-organization-option>span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-plan-panel h2,
.crm-stats-detail h2 {
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-lg);
}

#finance-chart,
#crm-chart {
  width: 100%;
}

#finance-chart .gauge-arc,
#crm-chart .gauge-arc {
  fill: none;
  stroke-width: 20;
  stroke-linecap: butt;
}

#finance-chart .gauge-target,
#crm-chart .gauge-target {
  stroke: var(--bg-active);
}

#finance-chart .gauge-expected,
#crm-chart .gauge-expected {
  stroke: var(--border-strong);
}

#finance-chart .gauge-actual {
  stroke: var(--accent);
}

/* The actual arc is deliberately light; a selected dynamics interval and the
   percentage/conclusion emphasis use the darker member of each pace palette. */
#crm-chart {
  --crm-kpi-gauge-main-color: var(--accent);
  --crm-kpi-gauge-selection-color: color-mix(in srgb, var(--accent) 70%, #000);
  --crm-kpi-gauge-emphasis-color: color-mix(in srgb, var(--accent) 70%, #000);
}
#crm-chart .gauge-actual {
  stroke: var(--crm-kpi-gauge-main-color);
}

/* Obligation-value interval selected on the dynamics chart. It is drawn last
   so the darker interval remains visible over the obligated gauge layer. */
#crm-chart .gauge-selection {
  stroke: var(--crm-kpi-gauge-selection-color);
  pointer-events: none;
}

#crm-chart .gauge-selection-marker {
  stroke-width: var(--sp-tiny);
  stroke-linecap: butt;
}

#finance-chart .gauge-value,
#finance-chart .gauge-end,
#crm-chart .gauge-value,
#crm-chart .gauge-end {
  font-family: inherit;
  font-size: var(--fs-xl);
  fill: var(--text);
}

/* The gauge, legend and conclusion share each pace palette. The actual arc
   uses its light colour. The selection, percentage and conclusion use the
   darker colour; error keeps black because it is darker than its gray range. */
:is(#crm-chart, .crm-chart-legend)[data-status="error"],
.crm-chart-conclusion.error {
  --crm-kpi-gauge-main-color: #000;
  --crm-kpi-gauge-selection-color: #6b7280;
  --crm-kpi-gauge-emphasis-color: #000;
}
:is(#crm-chart, .crm-chart-legend)[data-status="critical"],
.crm-chart-conclusion.critical {
  --crm-kpi-gauge-main-color: color-mix(in srgb, #be123c 25%, #fff);
  --crm-kpi-gauge-selection-color: #be123c;
  --crm-kpi-gauge-emphasis-color: #be123c;
}
:is(#crm-chart, .crm-chart-legend)[data-status="bad"],
.crm-chart-conclusion.bad {
  --crm-kpi-gauge-main-color: color-mix(in srgb, #dc2626 25%, #fff);
  --crm-kpi-gauge-selection-color: #dc2626;
  --crm-kpi-gauge-emphasis-color: #dc2626;
}
:is(#crm-chart, .crm-chart-legend)[data-status="ok"],
.crm-chart-conclusion.ok {
  --crm-kpi-gauge-main-color: var(--accent);
  --crm-kpi-gauge-selection-color: color-mix(in srgb, var(--accent) 70%, #000);
  --crm-kpi-gauge-emphasis-color: color-mix(in srgb, var(--accent) 70%, #000);
}
:is(#crm-chart, .crm-chart-legend)[data-status="good"],
.crm-chart-conclusion.good {
  --crm-kpi-gauge-main-color: color-mix(in srgb, #16a34a 25%, #fff);
  --crm-kpi-gauge-selection-color: #16a34a;
  --crm-kpi-gauge-emphasis-color: #16a34a;
}
/* The central percentage uses the darker pace emphasis colour, not the light
   actual-arc tint. */
#crm-chart[data-status] .gauge-value {
  fill: var(--crm-kpi-gauge-emphasis-color);
}

.crm-chart-legend {
  display: grid;
  gap: var(--sp-sm);
  font-size: var(--fs-sm);
  width: 100%;
  padding: 0 var(--sp-xl);
}

.crm-chart-legend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-sm);
  align-items: center;
}

.crm-chart-legend-row>span::before {
  content: "";
  display: inline-block;
  width: var(--sp-base);
  height: var(--sp-base);
  margin-right: var(--sp-sm);
  border-radius: 50%;
  background: var(--bg-active);
}

.crm-chart-legend-row.expected>span::before {
  background: var(--border-strong);
}

.crm-chart-legend-row.actual>span::before {
  background: var(--crm-kpi-gauge-main-color, var(--accent));
}

.crm-chart-legend-row.delegated>span::before {
  background: var(--ok, #15803d);
  opacity: .7;
}

.crm-chart-legend-row.delegated {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding-left: var(--sp-lg);
}

.crm-chart-legend-row>b {
  color: var(--text);
  font-weight: 600;
}

.crm-chart-target-link {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
}

.crm-chart-target-link:hover,
.crm-chart-target-link:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.crm-chart-conclusion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-md);
  align-items: start;
  padding: var(--sp-lg);
  margin: var(--sp-lg);
  border: var(--sp-micro) solid;
  /* Пустой блок вывода не должен оставлять видимую рамку: цвет появляется
     только вместе с состоянием (error/critical/bad/ok/good/warn). */
  border-color: transparent;
  border-radius: var(--sp-sm);
  font-size: var(--fs-sm);
}

.crm-chart-conclusion>.i {
  margin-top: var(--sp-tiny);
  font-size: var(--fs-lg);
}

.crm-chart-conclusion strong,
.crm-chart-conclusion small {
  display: block;
  text-align: left;
}

.crm-chart-conclusion small {
  margin-top: var(--sp-xs);
  font-size: var(--fs-xs);
  font-weight: 400;
}

/* The conclusion uses the darker pace emphasis in its text and outline. It
   deliberately has no tinted fill, so the panel background stays visible. */
.crm-chart-conclusion.error,
.crm-chart-conclusion.critical,
.crm-chart-conclusion.bad,
.crm-chart-conclusion.ok,
.crm-chart-conclusion.good {
  color: var(--crm-kpi-gauge-emphasis-color);
  background: transparent;
  border-color: var(--crm-kpi-gauge-emphasis-color);
}

/* The no-data branch has no pace colour, but follows the same transparent
   treatment while retaining its informational warning tone. */
.crm-chart-conclusion.warn {
  color: var(--warn);
  background: transparent;
  border-color: var(--warn);
}

.crm-insights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.crm-insights .stat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  width: max-content;
  min-width: calc(5 * var(--sp-huge));
  gap: var(--sp-sm);
}

.crm-insights::-webkit-scrollbar {
  display: none;
}

.crm-insights .stat-card>.i {
  grid-area: icon;
  margin: 0;
  font-size: var(--fs-lg);
}

.crm-insights .stat-card-label {
  grid-area: label;
}

.crm-insights .stat-card-value {
  grid-area: value;
  margin: 0;
  font-size: var(--fs-md);
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-insight-customer {
  grid-column: 1 / -1;
  min-height: auto !important;
}

.side-panel.deal-roster-panel .sp-pdf,
.side-panel.deal-roster-panel .sp-edit,
.side-panel.deal-roster-panel .sp-footer {
  display: none;
}

.side-panel.deal-roster-panel .deal-roster-lead {
  margin: 0 0 var(--sp-lg);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.side-panel.deal-roster-panel .deal-roster {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.side-panel.deal-roster-panel .deal-roster-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  width: 100%;
  padding: var(--sp-md) 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.side-panel.deal-roster-panel .deal-roster-item:hover {
  background: var(--bg-hover);
}

.side-panel.deal-roster-panel .deal-roster-status {
  flex: 0 0 auto;
  width: var(--sp-md);
  height: var(--sp-md);
  margin-top: .35em;
  border-radius: 50%;
  background: var(--deal-status, var(--deal-neutral));
  box-shadow: inset 0 0 0 var(--sp-micro) rgba(0, 0, 0, .12);
}

.side-panel.deal-roster-panel .deal-roster-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.catalog-product-table .catalog-cat-row .group-toggle,
.catalog-product-table .catalog-product-row td.col-name {
  padding-left: calc(var(--sp-lg) + var(--cat-depth, 0) * var(--sp-xl));
}

.side-panel.deal-roster-panel .deal-roster-name {
  display: block;
  font-weight: 600;
}

.side-panel.deal-roster-panel .deal-roster-meta {
  display: block;
  margin-top: var(--sp-xs);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* --- Сводные финансовые показатели (grid of category cards) --- */

.crm-core-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-md);
}

/* h4 заголовки рядов: «Договоры», «Исходящие поручения», «Входящие поручения».
   Только отступы через переменные темы — прочие свойства не трогаем. */
.crm-core-section-title {
  margin: var(--sp-md) 0 var(--sp-xs);
}
.crm-core-grid + .crm-core-section-title,
.crm-core-section-empty + .crm-core-section-title {
  margin-top: var(--sp-xl);
}

/* Пустой блок секции («Нет активных договоров» и т.п.) вместо ряда карточек. */
.crm-core-section-empty {
  margin: var(--sp-xs) 0 var(--sp-md);
}

/* Сравнение результатов дочерних подразделений — тот же вид, что у таблицы
   планов в боковой панели KPI (main-table plans-table). Таблица является
   прямым flex-элементом dash-main: так её ширина не искажается обёрткой. */
.crm-compare-table {
  min-width: 0;
  font-size: var(--fs-xs);
}
/* thead задаёт свой размер в общих стилях таблиц, поэтому фиксируем его
   отдельно: весь блок сравнения должен использовать один --fs-xs. */
.crm-compare-table th {
  font-size: var(--fs-xs);
}
.crm-compare-table td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.crm-compare-table td:first-child {
  text-align: left;
  white-space: normal;
}
.crm-compare-table .group-toggle {
  align-items: baseline;
  gap: var(--sp-xs);
  padding: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.4;
}
/* Подпись начинается там же, где текст в обычной ячейке. Шеврон стоит после
   неё и имеет размер буквы, не сдвигая и не утяжеляя название. */
.crm-compare-table .group-label {
  flex: 0 1 auto;
}
.crm-compare-table .group-chevron {
  align-self: center;
  width: 1em;
  height: 1em;
  font-size: 1em;
}
/* group-row в основных таблицах — строка с одной colspan-ячейкой и потому
   сбрасывает padding у всех td. В сравнении их пять: возвращаем единый
   горизонтальный отступ, чтобы числа попадали ровно под заголовки колонок. */
.crm-compare-table .crm-compare-row.group-row td {
  padding: var(--sp-base) var(--sp-md);
  border-bottom: 0;
}
.crm-compare-table .crm-compare-row.group-row .crm-compare-name:has(.group-toggle) {
  padding: 0;
}
.crm-compare-table .crm-compare-row.group-row .crm-compare-name .group-toggle {
  padding: var(--sp-base) var(--sp-md);
}
/* Сравнение — плоская таблица: разделители строк из общих table-стилей здесь
   не нужны. Оставляем границу таблицы и линию под её заголовком. */
.crm-compare-table tbody tr,
.crm-compare-table tbody tr.group-row {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.crm-compare-table tbody td {
  border-bottom: 0;
}
.crm-compare-secondary {
  color: var(--text-faint);
  font-size: var(--fs-xs);
  margin-top: var(--sp-micro);
}
/* Семантические уровни меняют только основное число: critical — жирный
   малиновый, bad — красный, good — зелёный; вторичный процент сохраняет
   приглушённый серый цвет. */
.crm-compare-table td.critical .crm-compare-main {
  color: #be123c;
  font-weight: 700;
}
.crm-compare-table td.bad .crm-compare-main {
  color: #dc2626;
}
.crm-compare-table td.good .crm-compare-main {
  color: #16a34a;
}
/* Поп с полной расшифровкой показателя. Его узел живёт в body: нативный
   popover попадает в top layer, а fallback не зависит от overflow таблицы. */
.crm-compare-table td[data-tip] {
  cursor: help;
}
.crm-compare-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  display: none;
  box-sizing: border-box;
  width: max-content;
  max-width: min(380px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: var(--sp-sm) var(--sp-md);
  border: var(--sp-micro) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  white-space: pre-line;
  overflow-wrap: anywhere;
  pointer-events: none;
  z-index: 2147483647;
}
.crm-compare-tooltip.is-visible {
  display: block;
}
/* Сбрасываем центрирование, которое браузер по умолчанию задаёт popover. */
.crm-compare-tooltip[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
}
.crm-compare-date {
  padding-left: var(--sp-xl);
  color: var(--text-muted);
}

.crm-core-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-xl);
}

/* Total cards (contracts and delegations) — light accent background
   (shadowed-card supplies the rest). */
.crm-core-card.crm-core-total,
.crm-core-card.crm-core-total-deleg {
  background: var(--accent-soft);
}

.crm-core-card-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}

.crm-core-card-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-md);
  row-gap: var(--sp-xs);
  align-items: baseline;
}

.crm-core-card-kv .k {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.crm-core-card-kv .v {
  color: var(--text);
  font-size: var(--fs-xs);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}

.crm-core-click {
  cursor: pointer;
}

.crm-core-click:hover {
  background: var(--bg-hover);
}

/* --- Stats / Статистика --- */

#view-finance-stats,
#view-crm-stats {
  padding-bottom: var(--sp-huge);
}

#view-finance-stats .crm-stats,
#view-crm-stats .crm-stats {
  display: block;
}

.crm-stats {
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}

.crm-stats::-webkit-scrollbar {
  display: none;
}

.crm-stats .crm-stats-picker {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-xl);
}

.crm-stats-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.crm-stats-detail+.crm-stats-detail {
  margin-top: var(--sp-xl);
}

.crm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(var(--sz-stats-col-min), 1fr));
  gap: var(--sp-md);
}

.crm-stats-grid>div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.crm-stat-section h3 {
  margin: 0 0 var(--sp-md);
  font-size: var(--fs-md);
}

.crm-stat-cards {
  display: grid;
  gap: var(--sp-md);
}

.crm-stats[hidden] {
  display: none !important;
}

/* --- Deals / Дела --- */

.cards-flow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding: var(--sp-lg);
}

/* CRM follows the same document flow as the main tables: the hero and cards
   belong to the module page, so scrolling moves the hero out of the viewport
   instead of scrolling a separate full-screen canvas underneath it. */
#module-crm .cards-flow {
  padding: 0;
}

/* Календарь выбора даты — всплывает из своего FAB, как панель группировки:
   та же геометрия «вырастания» из центра кнопки и то же поведение закрытия. */
.deals-date-panel {
  position: fixed;
  right: var(--deals-date-right, calc(max(var(--sp-xl), env(safe-area-inset-right)) + var(--sp-xl) + var(--sp-xs)));
  bottom: var(--deals-date-bottom, calc(max(var(--sp-xl), env(safe-area-inset-bottom)) + var(--sp-xl) + var(--sp-xs)));
  z-index: 120;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  border: var(--sp-micro) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  transform-origin: 100% 100%;
  transform: scale(.04);
  opacity: 0;
  pointer-events: none;
  transition: transform .26s cubic-bezier(.2, .85, .2, 1), opacity .18s ease;
  will-change: transform, opacity;
}

.deals-date-panel.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Внутри панели календарь показан сразу: триггер ему не нужен, его роль
   играет FAB. Поэтому убираем абсолютное позиционирование поповера. */
.deals-date-panel .drp-inline {
  min-height: 0;
}

.deals-date-panel .drp-inline .drp-trigger {
  display: none;
}

.deals-date-panel .drp-inline .drp-popover {
  display: block;
  position: static;
  width: 310px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Вместо иконки на кнопке — сама дата в две строки: число и месяц. */
.fab-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-micro);
  line-height: 1;
}

.fab-date-day {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.02em;
}

.fab-date-month {
  font-size: var(--fs-tiny);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .02em;
}

/* Выбран не сегодняшний день — подсвечиваем акцентом, чтобы отличие от
   состояния по умолчанию было видно без чтения даты. */
.fab.deals-timeline-fab.has-date {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

#module-crm .deal-cards {
  margin: 0;
}

.deal-group-title {
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: var(--sp-base);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.deal-group-title .group-count {
  background: var(--bg-soft);
  border: var(--sp-micro) solid var(--border);
  border-radius: var(--radius-full);
  padding: 0 var(--sp-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.deal-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin: 0 calc((100vw - var(--sz-max-width) - 2 * var(--sp-huge)) / 2 * -1);
}

/* Списки вне «Обзора дел» (коммерческие документы) используют прежнюю
   крупную карточку — там нет компактного состояния. */
.deal-card {
  width: var(--sz-deal-card-w);
  border-radius: var(--sp-md);
  padding: var(--sp-xl);
  background: var(--bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  box-shadow: var(--shadow-2);
}

.deal-card:hover {
  transform: translateY(-1px);
  transition: box-shadow .15s, transform .15s;
}

/* Карточка «Обзора дел» имеет два состояния. Слот держит место в потоке и
   всегда компактный; тело лежит поверх него, прижатое к верхнему краю, и
   при раскрытии уходит вниз, не сдвигая соседей.
   Ширина в обоих состояниях одна и та же — меняется только высота:
   свёрнутая показывает короткое имя дела и сумму, раскрытая добавляет
   ответственного, контрагента и полное название. */
#crm-deals-cards .deal-card {
  position: relative;
  height: var(--sz-deal-card-h);
  cursor: pointer;
  /* Слот — пустой держатель места: фон, тень и отступы несёт тело карточки.
     Тело спозиционировано абсолютно и размеров слоту не сообщает, поэтому
     место под компактную карточку резервируем flex-базисом. */
  display: block;
  flex: 0 0 var(--sz-deal-card-w);
  width: auto;
  /* min-width у flex-элемента по умолчанию auto: длинное название дела или
     контрагента растягивало бы карточку шире базиса. */
  min-width: 0;
  max-width: var(--sz-deal-card-w);
  padding: 0;
  gap: 0;
  background: transparent;
  box-shadow: none;
}

/* Базовое правило .deal-card:hover задаёт transform, а он создаёт контекст
   наложения и запирает z-index тела внутри слота — тогда следующие карточки
   рисуются поверх раскрытой. Отменяем его и поднимаем сам слот. */
#crm-deals-cards[data-card-mode="compact"] .deal-card:hover,
#crm-deals-cards[data-card-mode="compact"] .deal-card:focus-within {
  transform: none;
  z-index: 6;
}

#crm-deals-cards .deal-card-body {
  position: absolute;
  /* Прикреплено к верхнему краю слота: раскрытие уходит только вниз, верх
     карточки остаётся на месте. */
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  border-radius: var(--sp-md);
  padding: var(--sp-xl);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-shadow: var(--shadow-1);
  transition: box-shadow .22s ease;
}

/* Ни одна строка внутри карточки не должна распирать её по ширине:
   всё длинное ужимается многоточием. */
#crm-deals-cards .deal-card-body > *,
#crm-deals-cards .deal-card-more-inner > * {
  min-width: 0;
  max-width: 100%;
}

/* В компактном состоянии развёрнутой части нет вовсе: display:none убирает
   её из потока целиком, поэтому лишняя высота не остаётся. */
#crm-deals-cards .deal-card-more {
  display: none;
}

#crm-deals-cards .deal-card-more-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  /* Отступ от шапки живёт внутри скрываемой части: gap самого тела добавлял бы
     пустое место под статусом и в компактном состоянии. */
  padding-top: var(--sp-md);
}

/* Пока список назначения раскрыт, обрезку снимаем — иначе выпадающий список
   срезался бы краем карточки. Он открывается только по клику, то есть уже
   после того, как раскрытие завершилось. */
#crm-deals-cards .deal-card-more-inner:has(.deal-principal-lookup.open) {
  overflow: visible;
}

/* Раскрытое состояние — прежняя крупная карточка. Ширина и отступы те же,
   что в компактном виде, поэтому меняется только высота. */
#crm-deals-cards[data-card-mode="compact"] .deal-card:hover .deal-card-body,
#crm-deals-cards[data-card-mode="compact"] .deal-card:focus-within .deal-card-body {
  box-shadow: var(--shadow-3);
}

#crm-deals-cards[data-card-mode="compact"] .deal-card:hover .deal-card-more,
#crm-deals-cards[data-card-mode="compact"] .deal-card:focus-within .deal-card-more {
  display: block;
  /* display нельзя анимировать переходом, поэтому проявление содержимого
     задаёт keyframes — без него карточка раскрывалась бы рывком. */
  animation: deal-card-unfold .22s ease-out both;
}

/* Режим «Крупно»: все карточки раскрыты постоянно. Тело возвращается в поток,
   а слот растёт по содержимому — иначе абсолютные тела наложились бы друг на
   друга поверх слотов компактной высоты. */
#crm-deals-cards[data-card-mode="full"] .deal-card {
  height: auto;
}

#crm-deals-cards[data-card-mode="full"] .deal-card-body {
  position: static;
  transition: box-shadow .15s ease, transform .15s ease;
}

#crm-deals-cards[data-card-mode="full"] .deal-card-more {
  display: block;
}

/* На наведение не реагируем — только лёгкий подъём, чтобы курсор было видно. */
#crm-deals-cards[data-card-mode="full"] .deal-card:hover .deal-card-body {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

@keyframes deal-card-unfold {
  from {
    opacity: 0;
    transform: translateY(calc(var(--sp-xs) * -1));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.deal-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text);
}

.deal-card-status {
  font-weight: 600;
}

.deal-card-amount {
  font-weight: 900;
  font-size: var(--fs-3xl);
}

.deal-card-title {
  display: flex;
  flex-direction: column;
  gap: var(--sp-micro);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.3;
  min-width: 0;
}

.deal-card-title-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Contractor sits between the head (status + amount) and the deal name. */
.deal-card-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: var(--sp-md);
}

/* Компактная типографика «Обзора дел»: шапка мельче, сумма не доминирует.
   Действует только в свёрнутом виде — раскрытая карточка повторяет прежнюю. */
#crm-deals-cards[data-card-mode="compact"] .deal-card:not(:hover):not(:focus-within) .deal-card-head {
  /* Шапка занимает всю высоту компактного тела, а содержимое центрируется
     по вертикали — иначе короткое имя прижималось бы к верхнему краю. */
  flex: 1 1 auto;
  align-items: center;
  gap: var(--sp-base);
  font-size: var(--fs-xs);
}

#crm-deals-cards .deal-card-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* В свёрнутом виде в шапке стоит название дела: статус уже виден по цвету
   фона, а название иначе было бы недоступно без наведения. При раскрытии
   меняются местами — название повторяется ниже крупным текстом. */
#crm-deals-cards .deal-card-lead {
  /* Длинное название ужимается многоточием, а сумма не сжимается — иначе
     обрезалась бы она, а не название. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-main);
  font-weight: 600;
}

#crm-deals-cards[data-card-mode="compact"] .deal-card:not(:hover):not(:focus-within) .deal-card-amount {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: var(--fs-lg);
  white-space: nowrap;
  margin-left: auto;
}

#crm-deals-cards[data-card-mode="full"] .deal-card-lead,
#crm-deals-cards[data-card-mode="compact"] .deal-card:hover .deal-card-lead,
#crm-deals-cards[data-card-mode="compact"] .deal-card:focus-within .deal-card-lead {
  display: none;
}

#crm-deals-cards[data-card-mode="compact"] .deal-card:not(:hover):not(:focus-within) .deal-card-status {
  display: none;
}

#crm-deals-cards .deal-card-amount {
  white-space: nowrap;
}

/* Расстояние между строками раскрытой части задаёт gap контейнера, поэтому
   собственный отступ контрагента здесь лишний. */
#crm-deals-cards .deal-card-meta {
  margin-top: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Имя ответственного без лукапа (нет права записи) тоже ужимаем. */
.deal-card-principal .deal-principal-name,
.deal-card-principal .deal-principal-empty {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* overflow оставляем видимым: выпадающий список назначения не должен
   обрезаться карточкой. Многоточие делает вложенный .wp-preview. */
.deal-card-principal {
  position: relative;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  min-height: 1.45em;
  line-height: 1.45;
}

/* Назначение исполнителя прямо на карточке — тот же лукап, что в таймлайне
   формы дела, поэтому и оформление то же: без рамок, по месту текста. */
.deal-card-principal .deal-principal-lookup.lookup {
  width: 100%;
  min-width: 0;
}

.deal-card-principal .deal-principal-lookup .wp-preview,
.deal-card-principal .deal-principal-lookup input {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
}

.deal-card-principal .deal-principal-lookup .wp-preview {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-card-principal .deal-principal-lookup.picked input {
  display: none;
}

.deal-card-principal .deal-principal-lookup:not(.picked) .wp-preview {
  display: none;
}

.deal-card-principal .deal-principal-lookup .wp-preview.is-empty,
.deal-card-principal .deal-principal-empty,
.deal-card-principal .deal-principal-lookup input::placeholder {
  color: var(--text-faint);
}

.deal-card-principal .deal-principal-lookup.is-inherited .wp-preview,
.deal-card-principal .deal-principal-name.is-inherited {
  color: var(--text-muted);
}

.deal-card-principal .deal-principal-lookup input:focus,
.deal-card-principal .deal-principal-lookup input:focus-visible,
.deal-card-principal .deal-principal-lookup .wp-preview:focus,
.deal-card-principal .deal-principal-lookup .wp-preview:focus-visible {
  outline: none;
  box-shadow: none;
}

.deal-card-principal .deal-principal-lookup .results {
  left: 0;
  right: auto;
  width: max-content;
  min-width: 12em;
  max-width: min(22em, 100%);
  z-index: 40;
}

.deal-card-principal .deal-principal-lookup.open .results {
  display: block;
}

/* Карточка с раскрытым списком поднимается над соседними — иначе те
   перекрывают выпадающий список, так как идут следующими в потоке. */
.deal-card:has(.deal-principal-lookup.open) {
  position: relative;
  z-index: 7;
}

/* Карточка с раскрытым списком — выше даже наведённой соседней. */
#crm-deals-cards .deal-card:has(.deal-principal-lookup.open) {
  z-index: 8;
}

.crm-deals-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
}

.crm-deals-hero>.date-range-standalone {
  flex: 0 0 255px;
  padding-top: var(--sp-xs);
}

.crm-deals-hero>.date-range-standalone label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.crm-deals-hero>.search-card {
  flex: 1 1 auto;
}

#finance-deals-filters .filters,
#commerce-deals-filters .filters {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  align-items: end;
}

#view-finance-deals .toolbar .deal-status-date {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

#view-finance-deals .toolbar .deal-status-date input,
#view-commerce-deals .toolbar .deal-status-date input {
  height: var(--ht-input);
  box-sizing: border-box;
  padding: 0 var(--sp-sm);
  border: var(--sp-micro) solid var(--border-strong);
  border-radius: var(--sp-sm);
  background: var(--bg);
  color: var(--text);
}

#view-finance-deals .toolbar .group-by {
  margin-left: 0;
}

#finance-deals-table-wrap th[data-deal-sort],
#commerce-deals-table-wrap th[data-deal-sort] {
  cursor: pointer;
}

#finance-deals-tbody tr[data-deal-id],
#commerce-deals-tbody tr[data-deal-id] {
  box-shadow: inset var(--sp-xs) 0 0 var(--deal-status);
}

#finance-deals-tbody .fin-zero,
#commerce-deals-tbody .fin-zero {
  color: var(--text-faint);
  opacity: .48;
}

#finance-deals-table-wrap .group-count,
#finance-deals-cards .group-count,
#commerce-deals-table-wrap .group-count,
#commerce-deals-cards .group-count,
#crm-deals-cards .group-count {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--text-muted);
  font: inherit;
}

#crm-deals-cards .group-count {
  flex: 0 0 auto;
  white-space: nowrap;
}

#finance-deals-cards .deal-group-title .group-toggle,
#commerce-deals-cards .deal-group-title .group-toggle,
#crm-deals-cards .deal-group-title .group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}

#finance-deals-cards .deal-group.collapsed .deal-cards,
#commerce-deals-cards .deal-group.collapsed .deal-cards,
#crm-deals-cards .deal-group.collapsed .deal-cards {
  display: none;
}

/* Многоуровневая группировка: вложенные ветки сдвигаются по глубине, а
   свёрнутой прячется вся ветка целиком, включая подуровни. */
#crm-deals-cards .deal-group .deal-group {
  margin-left: var(--sp-lg);
}

#crm-deals-cards .deal-group.collapsed > .deal-group-body {
  display: none;
}

#crm-deals-cards .deal-group-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

#crm-deals-cards .deal-group[data-group-depth="0"] > .deal-group-title .group-label {
  font-size: var(--fs-md);
}

#finance-deals-cards .deal-group.collapsed .group-chevron,
#commerce-deals-cards .deal-group.collapsed .group-chevron,
#crm-deals-cards .deal-group.collapsed .group-chevron {
  transform: rotate(-90deg);
}

.fin-status-dot {
  display: inline-block;
  width: var(--sp-md);
  height: var(--sp-md);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--sp-micro) rgba(0, 0, 0, .12);
}

.fin-issue {
  font-size: var(--fs-md);
}

.fin-issue.error {
  color: var(--not-error);
}

.fin-issue.warning {
  color: var(--not-warning);
}

.fin-issue.message {
  color: var(--not-message);
}

.fin-deal-issues {
  text-align: center;
}

/* Diagnostic counter is a plain inline action, not a FAB. */

#finance-diag-btn,
#commerce-deals-diag-btn {
  position: fixed;
  left: max(var(--sp-xl), env(safe-area-inset-left));
  right: auto;
  bottom: max(var(--sp-xl), env(safe-area-inset-bottom));
  z-index: 109;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  gap: var(--sp-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#finance-diag-btn.has-errors,
#commerce-deals-diag-btn.has-errors {
  color: #dc2626;
}

#finance-diag-btn.has-warnings,
#commerce-deals-diag-btn.has-warnings {
  color: #d97706;
}

#finance-diag-btn.has-messages,
#commerce-deals-diag-btn.has-messages {
  color: #16a34a;
}

#finance-diag-btn:hover,
#commerce-deals-diag-btn:hover {
  transform: none;
  opacity: .78;
}

#finance-diag-btn:disabled,
#commerce-deals-diag-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

#finance-diag-panel,
#commerce-deals-diag-panel {
  position: fixed;
  left: var(--sp-xl);
  bottom: calc(var(--sp-xl) + 120px);
  z-index: 108;
  width: min(420px, var(--sz-avail-w));
  max-height: 50vh;
  overflow: auto;
}

.crm-diag-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

.crm-diag-item {
  text-align: left;
  cursor: pointer;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.crm-diag-item:hover b {
  text-decoration: underline;
}

.crm-diag-item p {
  margin: var(--sp-xs) 0 0;
  color: var(--text-muted);
}

.crm-diag-item .item-link {
  font-weight: 200;
}

/* --- Docs / Документы --- */

/* Deal view: История — vertical timeline.
   Date leads, the document full name is prominent, details below,
   amount in its own right-hand column. Documents sit on a single axis with a
   round marker each; focus highlights exactly that circle. When a document
   belonging to an obligation is focused (and the deal has several
   obligations), its whole obligation chain is tinted with a dim accent. */
.finance-docs-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.finance-doc-bar {
  display: grid;
  grid-template-columns: var(--sz-doc-col-marker) var(--sz-doc-col-date) 1fr auto;
  gap: var(--sp-sm);
  align-items: start;
  padding: var(--sp-sm);
  border-radius: var(--sp-xs);
  background: transparent;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background .12s ease;
}

.finance-doc-marker {
  position: relative;
  align-self: stretch; /* full row height so the axis segment can span it */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Single axis: a segment from this document's dot down to the next one's dot. */
.finance-doc-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(1.5em / 2); /* dot center */
  /* span: own padding-bottom + flow gap + next padding-top + next dot center */
  bottom: calc(-1 * (2 * var(--sp-sm) + var(--sp-md) + 1.5em / 2));
  width: var(--sp-tiny);
  transform: translateX(-50%);
  background: var(--border-strong);
  z-index: 0;
}

/* The last document ends the axis — no segment below it. */
.finance-doc-bar:last-child .finance-doc-marker::after {
  display: none;
}

.finance-doc-dot {
  position: relative;
  z-index: 1; /* above the axis */
  flex: 0 0 auto;
  /* center the dot on the first text line (1.5em line height) */
  margin-top: calc((1.5em - var(--sp-md)) / 2);
  width: var(--sp-md);
  height: var(--sp-md);
  border-radius: 50%;
  background: var(--bg);
  border: var(--sp-tiny) solid var(--border-strong);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Dim accent background over the whole obligation chain when one of its
   documents is focused (only when several obligations exist). */
.finance-doc-bar.is-related {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.finance-doc-date {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  white-space: nowrap;
  line-height: 1.5; /* matches the name's first line */
}

.finance-doc-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.finance-doc-name {
  font-weight: 600;
  color: var(--text);
  line-height: 1.5; /* first line is the alignment reference for the circle */
  overflow-wrap: anywhere;
  transition: color .12s ease;
}

.finance-doc-details {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Deal view: per-obligation running balance under the obligation node. */
.finance-doc-balance {
  font-variant-numeric: tabular-nums;
}

/* Deal view: obligation binding of a bill/act. Reuses the principal lookup
   (.finance-doc-principal .deal-principal-lookup — markup, colours, sizes,
   popover) verbatim, sentinel «Выберите обязательство» included, so it looks
   exactly like «Назначить исполнителя». Only the timeline dot marks an
   unallocated document, plus the bulk strip above the timeline. */
.finance-doc-bar.is-unallocated .finance-doc-dot {
  border-color: var(--warn);
}

/* Bulk «Отнести все N документов на … к {Выберите обязательство}» strip
   below the timeline: one sentence, the lookup is its last word. */
.finance-bulk-bind {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.35em;
  margin-top: var(--sp-md);
  padding: var(--sp-sm);
  border-radius: var(--sp-xs);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.finance-bulk-bind-label {
  color: var(--text);
  white-space: nowrap;
}

.finance-bulk-bind .finance-doc-binding {
  position: relative;
  flex: 1 1 12em;
  min-width: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Open-file / open-in-Bitrix buttons on their own line under the doc text.
   Styled by the shared .actions button look (square icon buttons). */
.finance-doc-actions {
  margin-top: var(--sp-xs);
  margin-left: unset !important;
  justify-content: flex-start;
}

.finance-doc-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  text-align: right;
}

/* Deal view: Спецификация — contract items in a grid with a total row.
   Each item: name on top, qty/price/sum in a 3-column grid below. */
.finance-spec {
  margin-bottom: var(--sp-md);
}

.finance-spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  font-size: var(--fs-xs);
}

.finance-spec-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.finance-spec-name {
  overflow-wrap: anywhere;
}

.finance-spec-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-md);
}

.finance-spec-cell {
  display: flex;
  justify-content: space-between;
}

.finance-spec-k {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.finance-spec-v {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.finance-spec-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-sm) 0;
  margin-top: var(--sp-sm);
  border-top: var(--sp-tiny) solid var(--border-strong);
  font-weight: 600;
}

/* Expand hidden spec items — same full-width secondary toggle as wf-toggle. */
.finance-spec-toggle {
  display: flex;
  width: 100% !important;
  justify-content: center;
  border: 0 !important;
  background: transparent !important;
  padding: var(--sp-xs) var(--sp-base);
  border-radius: var(--sp-sm);
  box-shadow: none;
}

.finance-spec-toggle:hover:not(:disabled) {
  background: var(--bg-hover) !important;
}

/* Deal view: Связанные исследования. */
.finance-researches {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-md);
}

.finance-research {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border: var(--sp-micro) solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background .12s ease;
}

.finance-research:hover {
  background: var(--bg-hover);
}

.finance-research-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.finance-research-year {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Deal view: Диагностика — summary block before the timeline + popup with a
   criteria checklist. Pass/fail marks are filled dots on the right. */
.deal-diag {
  position: relative;
  margin: var(--sp-xs) 0 var(--sp-md);
}

.deal-diag-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  width: 100%;
  padding: var(--sp-lg);
  border: none;
  background: var(--bg);
  font-size: var(--fs-tiny);
  text-align: left;
  cursor: pointer;
}

.deal-diag-summary-icon {
  flex: 0 0 auto;
  line-height: 1.5;
}

/* Deal panel header: severity icon as one of the header actions (same square
   icon button as expand/close via .actions button), errors/warnings only.
   Keeps the severity colour on hover; click scrolls to the diagnostics. */
.side-panel header .actions .sp-issue.fin-issue.error,
.side-panel header .actions .sp-issue.fin-issue.error:hover {
  color: var(--not-error);
}

.side-panel header .actions .sp-issue.fin-issue.warning,
.side-panel header .actions .sp-issue.fin-issue.warning:hover {
  color: var(--not-warning);
}

.deal-diag-summary-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.deal-diag-summary-line {
  overflow-wrap: anywhere;
}

/* Empty or single-line notifications are center aligned; several stay left. */
.deal-diag[data-count="0"] .deal-diag-summary,
.deal-diag[data-count="1"] .deal-diag-summary {
  align-items: center;
}

.fin-criteria {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-lg);
  gap: var(--sp-lg);
  font-size: var(--fs-tiny);
}

.fin-crit-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.fin-crit-group-title {
  padding-bottom: var(--sp-md);
  font-weight: 600;
}

.fin-crit {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.fin-crit-label {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Dotted leader between the criterion and its result. */
.fin-crit-leader {
  flex: 1 1 auto;
  align-self: center;
  min-width: var(--sp-lg);
  border-bottom: var(--sp-tiny) dotted var(--border-strong);
}

.fin-crit-mark {
  flex: 0 0 auto;
  font-weight: 700;
}

.fin-crit--pass .fin-crit-mark {
  color: var(--ok);
}

.fin-crit--fail .fin-crit-mark {
  color: var(--not-error);
}

/* Hover: visible on the circle and the name */
.finance-doc-bar:hover .finance-doc-dot {
  border-color: var(--accent);
}

.finance-doc-bar:hover .finance-doc-name {
  color: var(--accent);
}

/* Focus highlight = the circle only */
.finance-doc-bar.is-focused .finance-doc-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--ring-3) color-mix(in srgb, var(--accent) 25%, transparent);
}

.fin-doc-row {
  cursor: pointer;
}

#commerce-docs-tables .fin-doc-row[data-deal-id],
#finance-docs-tables .fin-doc-row[data-deal-id] {
  box-shadow: inset var(--sp-xs) 0 0 var(--deal-status, var(--deal-neutral));
}

#commerce-docs-tables .fin-doc-row.is-tender td,
#finance-docs-tables .fin-doc-row.is-tender td {
  background: var(--tender);
}

#commerce-docs-tables .fin-doc-row.is-tender:hover td,
#finance-docs-tables .fin-doc-row.is-tender:hover td {
  background: color-mix(in srgb, var(--tender) 85%, var(--text) 15%);
}

.fin-doc-row:hover td {
  background: var(--bg-soft);
}

.main-table .fin-doc-context {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.main-table th.fin-doc-context {
  font-weight: 500;
}

/* Назначение исполнителя прямо в таблице документов — тот же лукап, что на
   карточке дела и в таймлайне формы, поэтому и оформление то же: без рамок,
   по месту текста ячейки. */
.main-table td.fin-doc-context .deal-principal-lookup.lookup {
  width: 100%;
  min-width: 0;
}

.main-table td.fin-doc-context .deal-principal-lookup .wp-preview,
.main-table td.fin-doc-context .deal-principal-lookup input {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
}

.main-table td.fin-doc-context .deal-principal-lookup .wp-preview {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-table td.fin-doc-context .deal-principal-lookup.picked input {
  display: none;
}

.main-table td.fin-doc-context .deal-principal-lookup:not(.picked) .wp-preview {
  display: none;
}

.main-table td.fin-doc-context .deal-principal-lookup .wp-preview.is-empty,
.main-table td.fin-doc-context .deal-principal-empty,
.main-table td.fin-doc-context .deal-principal-lookup input::placeholder {
  color: var(--text-faint);
}

.main-table td.fin-doc-context .deal-principal-lookup.is-inherited .wp-preview,
.main-table td.fin-doc-context .deal-principal-name.is-inherited {
  color: var(--text-muted);
}

.main-table td.fin-doc-context .deal-principal-lookup input:focus,
.main-table td.fin-doc-context .deal-principal-lookup input:focus-visible,
.main-table td.fin-doc-context .deal-principal-lookup .wp-preview:focus,
.main-table td.fin-doc-context .deal-principal-lookup .wp-preview:focus-visible {
  outline: none;
  box-shadow: none;
}

.main-table td.fin-doc-context .deal-principal-lookup .results {
  left: 0;
  right: auto;
  width: max-content;
  min-width: 12em;
  max-width: min(22em, 60vw);
  z-index: 40;
}

.main-table td.fin-doc-context .deal-principal-lookup.open .results {
  display: block;
}

/* Ячейка с раскрытым списком поднимается над соседними строками. */
.main-table tr:has(.deal-principal-lookup.open) td {
  position: relative;
  z-index: 3;
}

#finance-docs-tables .main-table,
#finance-index .main-table,
#commerce-docs-tables .main-table,
#commerce-index .main-table {
  margin-top: var(--sp-md);
}

#commerce-docs-tables .main-table,
#finance-docs-tables .main-table {
  table-layout: fixed;
}

#commerce-docs-tables .main-table th.straight,
#commerce-docs-tables .main-table td.straight,
#finance-docs-tables .main-table th.straight,
#finance-docs-tables .main-table td.straight {
  box-sizing: border-box;
  width: 10%;
  min-width: 10%;
}

#finance-docs-amount-min,
#finance-docs-amount-max,
#commerce-docs-amount-min,
#commerce-docs-amount-max {
  min-width: 140px;
  flex: 1 1 140px;
}

#finance-docs-filters .filters,
#commerce-docs-filters .filters {
  grid-template-columns: minmax(220px, 1fr) minmax(var(--sz-grid-cell), .9fr) minmax(250px, 1.2fr) minmax(250px, 1.2fr);
  align-items: end;
}

#finance-docs-filters .date-range-picker,
#commerce-docs-filters .date-range-picker {
  width: 100%;
}

#finance-docs-filters .len-range,
#commerce-docs-filters .len-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-xs);
}

#finance-docs-filters .len-range input,
#commerce-docs-filters .len-range input {
  min-width: 0;
}

#finance-docs-filters .filters-footer,
#commerce-docs-filters .filters-footer {
  margin-top: var(--sp-xs);
}

#finance-docs-filters .fin-doc-picker,
#commerce-docs-filters .fin-doc-picker {
  width: 100%;
}

#finance-docs-filters .fin-doc-picker input,
#commerce-docs-filters .fin-doc-picker input {
  width: 100%;
}

#finance-docs-filters .fin-doc-picker .results,
#commerce-docs-filters .fin-doc-picker .results {
  z-index: 320;
  max-height: 260px;
  overflow: auto;
}

.date-range-picker {
  position: relative;
  min-height: var(--ht-input);
  font-weight: 400;
}

.date-range-picker.open {
  z-index: 300;
}

.drp-trigger {
  width: 100%;
  height: var(--ht-input);
  min-height: var(--ht-input);
  display: flex;
  align-items: center;
  gap: var(--sp-base);
  padding: 7px 10px;
  border: var(--sp-micro) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}

.drp-trigger:hover,
.date-range-picker.open .drp-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--ring-3) color-mix(in srgb, var(--accent) 14%, transparent);
}

.drp-trigger .i {
  color: var(--text-muted);
  font-size: 17px;
}

.drp-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drp-popover {
  display: none;
  position: absolute;
  z-index: 301;
  top: calc(100% + var(--sp-sm));
  left: 0;
  width: 310px;
  padding: var(--sp-md);
  border: var(--sp-micro) solid var(--border);
  border-radius: var(--sp-md);
  background: var(--bg);
  box-shadow: var(--shadow-2);
}

.date-range-picker.open .drp-popover {
  display: block;
}

.drp-nav {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  margin-bottom: var(--sp-base);
}

.drp-nav button,
.drp-day {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  border-radius: 7px;
}

.drp-nav button:hover,
.drp-title:hover {
  background: var(--bg-soft);
}

.drp-title {
  padding: var(--sp-sm);
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
}

.drp-weekdays,
.drp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  gap: var(--sp-tiny);
}

.drp-weekdays {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  margin-bottom: 3px;
}

.drp-day {
  height: 32px;
  position: relative;
  z-index: 1;
}

.drp-day:hover {
  background: var(--bg-soft);
}

.drp-day.outside {
  color: var(--text-muted);
  opacity: .5;
}

.drp-day.in-range {
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.drp-day.range-start,
.drp-day.range-end {
  color: #fff;
  background: var(--accent);
  border-radius: 7px;
}

.drp-day.range-start:not(.range-end)::after,
.drp-day.range-end:not(.range-start)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.drp-day.range-start::after {
  right: -2px;
}

.drp-day.range-end::before {
  left: -2px;
}

.drp-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.drp-month {
  border: 0;
  border-radius: 7px;
  padding: var(--sp-md) 3px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.drp-month:hover {
  background: var(--bg-soft);
}

.drp-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border-top: var(--sp-micro) solid var(--border);
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
}

.drp-preset-col {
  display: grid;
  gap: 5px;
}

.drp-preset {
  border: 0;
  border-radius: var(--sp-sm);
  padding: var(--sp-sm);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-xs);
  text-align: left;
  cursor: pointer;
}

.drp-preset:hover {
  background: var(--border);
}

.search-card:has(.date-range-picker) {
  overflow: visible;
}

.date-range-picker.selecting .drp-day.in-range:not(.range-start):not(.range-end) {
  opacity: .5;
}

.date-range-picker.selecting .drp-day.range-start.range-end {
  opacity: 1;
}

/* The planning form reuses the catalog's collapsible tree rows. */
.plans-table--grouped tr {
  cursor: default;
}

.plans-table--grouped .plan-group-row td {
  width: 100%;
}

.plans-table--grouped .plan-group-row .group-toggle,
.plans-table--grouped .plan-target-row td:first-child {
  padding-left: calc(var(--sp-lg) + var(--plan-depth, 0) * var(--sp-xl));
}

.plans-table--grouped .plan-version-row.plan-superseded .group-toggle,
.plans-table--grouped .plan-target-row.plan-superseded td {
  color: var(--text-dim);
}

.plans-table--grouped .plan-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Editing keeps the same nested groups, but active target cells become the
   shared spreadsheet surface. The version action floats over the full-width
   disclosure button without shrinking its clickable row. */
.plans-table--editing tr.plan-group-row td:first-child {
  padding: 0;
}

.plans-table--editing .plan-version-row td {
  position: relative;
}

.plans-table--editing .plan-version-row:has(.plan-version-add) .group-toggle {
  padding-right: calc(var(--sz-ui-action) + var(--sp-xl));
}

.plans-table--editing .plan-version-add {
  position: absolute;
  top: 50%;
  right: var(--sp-md);
  z-index: 1;
  transform: translateY(-50%);
}

.plans-table--editing .plan-target-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Finance media queries (same 1000 / 750 breakpoints as the rest of the sheet) --- */

@media (max-width: 1000px) {
  /* Tablet: the KPI dashboard shell flows and scrolls out with the page like
     the main menu, so the module must not clip it and the shell is unpinned. */
  #module-kpi:has(#view-kpi-dashboard:not([hidden])) {
    overflow: visible;
  }

  #view-kpi-dashboard.dash-shell {
    position: relative;
    inset: auto;
  }

  /* The plan panel is flex:1 inside the fixed shell; in the tablet flow it
     must size to its content instead of collapsing. */
  .crm-plan-panel {
    flex: none;
  }

  /* The shared mobile table layout turns comparison rows into cards. Keep
     a visibly larger gap than the generic card-table gap and give every
     comparison card the same inset; the desktop table deliberately stays
     flat. */
  .crm-compare-table tbody tr,
  .crm-compare-table tbody tr.group-row {
    margin-bottom: var(--sp-xl);
    padding: var(--sp-md);
  }

  /* Parent rows have two markup variants: a plain division name or a name
     inside a disclosure button. In card mode the shared row inset, rather
     than either variant's desktop cell/button inset, owns their spacing. */
  .crm-compare-table .crm-compare-row.group-row td,
  .crm-compare-table .crm-compare-row.group-row .crm-compare-name:has(.group-toggle) {
    padding: var(--sp-sm) 0 0;
  }
  .crm-compare-table .crm-compare-row.group-row .crm-compare-name .group-toggle {
    padding: 0;
  }

  /* The generic grouped-table hover fill otherwise makes only the row under
     a pointer look like a differently padded card. Comparison parent rows
     stay neutral; checkpoint rows below retain their deliberate tone. */
  .crm-compare-table tbody tr.group-row:hover,
  .crm-compare-table .group-toggle:hover {
    background: var(--surface);
  }

  /* A checkpoint row is one card on mobile, not a collection of faintly
     shaded cells. Applying the neutral tone to the row keeps every card
     visually solid across its flex gaps and its shared inset keeps labels
     and values away from the coloured edge. */
  .crm-compare-table .crm-compare-subrow {
    background: color-mix(in srgb, var(--text) 10%, var(--surface));
  }

  #commerce-docs-tables .main-table,
  #finance-docs-tables .main-table {
    table-layout: auto;
  }

  #commerce-docs-tables .main-table th.straight,
  #commerce-docs-tables .main-table td.straight,
  #commerce-docs-tables .main-table td.straight.num,
  #commerce-docs-tables .main-table td.straight.curr,
  #finance-docs-tables .main-table th.straight,
  #finance-docs-tables .main-table td.straight,
  #finance-docs-tables .main-table td.straight.num,
  #finance-docs-tables .main-table td.straight.curr {
    width: unset;
    min-width: unset;
    white-space: normal;
  }

  /* Card-mode rows have a gap between cells: cell fills leave patches.
     Colour the whole card instead, same tokens as the desktop cell fills. */
  #commerce-docs-tables .fin-doc-row.is-tender td,
  #finance-docs-tables .fin-doc-row.is-tender td,
  #commerce-docs-tables .fin-doc-row.is-tender:hover td,
  #finance-docs-tables .fin-doc-row.is-tender:hover td,
  #commerce-docs-tables .fin-doc-row:hover td,
  #finance-docs-tables .fin-doc-row:hover td {
    background: unset;
  }

  #commerce-docs-tables .fin-doc-row.is-tender,
  #finance-docs-tables .fin-doc-row.is-tender {
    background: var(--tender);
  }

  #commerce-docs-tables .fin-doc-row:hover,
  #finance-docs-tables .fin-doc-row:hover {
    background: var(--bg-soft);
  }

  #commerce-docs-tables .fin-doc-row.is-tender:hover,
  #finance-docs-tables .fin-doc-row.is-tender:hover {
    background: color-mix(in srgb, var(--tender) 85%, var(--text) 15%);
  }

  #finance-docs-filters .filters,
  #commerce-docs-filters .filters {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .crm-deals-hero {
    flex-direction: column;
  }

  .crm-deals-hero>.date-range-standalone {
    flex-basis: auto;
    width: 100%;
  }

  /* Tablet: two deal cards per row (they shrink and wrap as needed). */
  .deal-card {
    width: calc(50% - var(--sp-sm));
    min-width: 260px;
  }

  /* На планшете карточка «Обзора дел» ужимается вместе с рядом, но не уже
     260px — иначе короткое имя и сумма перестают помещаться в строку. */
  #crm-deals-cards .deal-card {
    flex: 1 1 var(--sz-deal-card-w);
    width: auto;
    max-width: var(--sz-deal-card-w);
    min-width: 260px;
  }

  #finance-deals-filters .filters,
  #commerce-deals-filters .filters {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 750px) {
  .deal-card {
    width: 100%;
    min-width: 0;
    padding: var(--sp-lg);
  }

  .deal-card-amount {
    font-size: var(--fs-xl);
  }

  /* На телефоне карточка занимает всю доступную ширину: 400px не помещаются
     и дали бы горизонтальный скролл. */
  #crm-deals-cards .deal-card {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
  }

  #crm-deals-cards[data-card-mode="compact"] .deal-card:not(:hover):not(:focus-within) .deal-card-amount {
    font-size: var(--fs-lg);
  }

  .finance-doc-bar {
    grid-template-columns: var(--sp-xl) 1fr;
  }

  .finance-doc-marker {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .finance-doc-date,
  .finance-doc-main,
  .finance-doc-amount {
    grid-column: 2;
  }

  .finance-doc-amount {
    text-align: left;
  }

  .crm-stats-grid {
    grid-template-columns: repeat(2, minmax(var(--sz-stats-col-min), 1fr));
  }

  #finance-docs-filters .filters,
  #commerce-docs-filters .filters {
    grid-template-columns: 1fr;
  }

  .date-range-picker {
    min-width: 220px;
  }

  .drp-popover {
    width: min(310px, var(--sz-avail-w));
  }
}
/* Вспомогательные классы для SVG-графиков (inline-стили перенесены из JS: см. readme п.13). */
.crm-dyn-marker {
  stroke: var(--accent);
}

.crm-dyn-shading {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
}

.fin-diag-block {
  margin-bottom: var(--sp-md);
}

.fin-diag-block b {
  display: block;
}

.fin-diag-block ul {
  margin: var(--sp-xs) 0 0 var(--sp-lg);
  padding-left: var(--sp-lg);
}

/* Единый блок для пользователей, отключивших анимацию: отключаем переходы и
   анимацию у всех компонентов, где они заданы (вместо двух @media-блоков). */
@media (prefers-reduced-motion: reduce) {
  .deals-date-panel {
    transition: none;
  }

  #crm-deals-cards .deal-card-body,
  #crm-deals-cards .deal-card-more {
    transition: none;
  }

  #crm-deals-cards[data-card-mode="compact"] .deal-card:hover .deal-card-more,
  #crm-deals-cards[data-card-mode="compact"] .deal-card:focus-within .deal-card-more {
    animation: none;
  }
}