/* =====================================================
   Панель аналитики — статический каркас (Задача №3.1)
   Все цвета — через var(--dr-*), поддержка светлой/тёмной темы.
   ===================================================== */

/* ─── Заголовок панели ─────────────────────────────────── */
.ap-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.ap-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dr-text-main);
    margin: 0;
}

.ap-header__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ─── Toolbar панели (обновлено/кнопки) ────────────────── */
.ap-panel-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ap-panel-toolbar__updated {
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
    white-space: nowrap;
}

/* ─── Панель фильтров ──────────────────────────────────── */
.ap-filter-card {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--dr-bg-card);
    border: 1px solid var(--dr-border);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.ap-filter-card__group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ap-filter-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.ap-filter-card__value {
    font-size: 0.9375rem;
    color: var(--dr-text-main);
    font-weight: 500;
}

.ap-filter-card__hint {
    font-size: 0.75rem;
    color: var(--dr-text-muted-light);
}

.ap-filter-card__select {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--dr-border);
    border-radius: 0.375rem;
    background: var(--dr-bg-card);
    color: var(--dr-text-main);
    cursor: pointer;
    min-width: 160px;
}

.ap-filter-card__select:focus {
    outline: none;
    border-color: var(--dr-primary);
    box-shadow: 0 0 0 2px var(--dr-primary-light);
}

/* ─── Секция панели ────────────────────────────────────── */
.ap-section {
    margin-bottom: 2rem;
}

.ap-section__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dr-border);
}

.ap-section__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: var(--dr-primary-light);
    color: var(--dr-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.ap-section__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dr-text-main);
    margin: 0;
}

.ap-section__counter {
    font-size: 0.75rem;
    color: var(--dr-text-muted);
    background: var(--dr-bg-main);
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    margin-left: auto;
}

.ap-section__body {
    /* Контейнер для сетки плашек */
}

/* ─── 12-колоночная сетка плашек ───────────────────────── */
.ap-tiles-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 70px;
    gap: 8px;
}

/* Placing helpers (12-column) */
.ap-tile--col-1 { grid-column: span 1; }
.ap-tile--col-2 { grid-column: span 2; }
.ap-tile--col-3 { grid-column: span 3; }
.ap-tile--col-4 { grid-column: span 4; }
.ap-tile--col-5 { grid-column: span 5; }
.ap-tile--col-6 { grid-column: span 6; }
.ap-tile--col-7 { grid-column: span 7; }
.ap-tile--col-8 { grid-column: span 8; }
.ap-tile--col-9 { grid-column: span 9; }
.ap-tile--col-10 { grid-column: span 10; }
.ap-tile--col-11 { grid-column: span 11; }
.ap-tile--col-12 { grid-column: span 12; }

/* ─── Плашка метрики ───────────────────────────────────── */
.ap-tile {
    background: var(--dr-bg-card);
    border: 1px solid var(--dr-border);
    border-radius: 0.625rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ap-tile:hover {
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
}

.ap-tile__header {
    display: flex;
    background: var(--dr-bg-metric);
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0.875rem 0.55rem 0.875rem;
    border-bottom: 0;
    min-height: 2.25rem;
    border-radius: 0.625rem 0.625rem 0 0;
}

.ap-tile__name {
    min-width: 0;
    flex: 1;
    color: var(--dr-text-main);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.ap-tile__body {
    padding: 0.375rem 0.875rem 0.875rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 0 0 0.625rem 0.625rem;
    overflow: hidden;
}




/* ─── Scorecard sparkline ───────────────────────────────── */

/* ─── Scorecard sparkline ───────────────────────────── */

.ap-content .ap-tile--kpi .ap-sparkline {
    display: none;
}

.ap-content .ap-tile--kpi.ap-tile--w-3 .ap-sparkline,
.ap-content .ap-tile--kpi.ap-tile--w-4 .ap-sparkline,
.ap-content .ap-tile--kpi.ap-tile--w-5 .ap-sparkline,
.ap-content .ap-tile--kpi.ap-tile--w-6 .ap-sparkline,
.ap-content .ap-tile--kpi.ap-tile--w-7 .ap-sparkline,
.ap-content .ap-tile--kpi.ap-tile--w-8 .ap-sparkline,
.ap-content .ap-tile--kpi.ap-tile--w-9 .ap-sparkline,
.ap-content .ap-tile--kpi.ap-tile--w-10 .ap-sparkline,
.ap-content .ap-tile--kpi.ap-tile--w-11 .ap-sparkline,
.ap-content .ap-tile--kpi.ap-tile--w-12 .ap-sparkline {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: auto;
    padding: 0;
    border: 0;
}

.ap-content .ap-tile--kpi .ap-sparkline {
    color: var(--dr-chart-neutral);
}

.ap-content .ap-tile--kpi .ap-sparkline--positive {
    color: var(--dr-success);
}

.ap-content .ap-tile--kpi .ap-sparkline--negative {
    color: var(--dr-danger);
}

.ap-content .ap-tile--kpi .ap-sparkline--neutral {
    color: var(--dr-chart-neutral);
}

.ap-content .ap-tile--kpi .ap-sparkline__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ap-content .ap-tile--kpi .ap-sparkline__line {
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
}

.ap-content .ap-tile--kpi .ap-sparkline__area {
    pointer-events: none;
}









.ap-content .ap-tile--kpi .ap-tile__header {
    min-height: 0;
    /*padding: 14px 14px 0;*/
    padding: 0.35rem 0.875rem 0.55rem 0.875rem;
}

.ap-content .ap-tile--kpi .ap-tile__body {
    display: flex;
    min-height: 0;
    padding: 8px 14px 12px;
}

.ap-content .ap-tile--kpi .ap-kpi-content {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.ap-content .ap-tile--kpi .ap-kpi-main {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    margin-top: 2px;
}

.ap-content .ap-tile--kpi .ap-kpi-value {
    margin: 0;
    color: var(--dr-text-main);
    font-size: 2.75rem;
    font-weight: 650;
    line-height: 0.92;
    letter-spacing: -0.055em;
}

.ap-content .ap-tile--kpi .ap-kpi-change {
    margin: 0 0 4px;
    padding: 0;
}

.ap-content .ap-tile--kpi .ap-kpi-change__value {
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1;
}

.ap-content .ap-tile--kpi.ap-tile--w-2 .ap-kpi-content {
    justify-content: center;
}

.ap-content .ap-tile--kpi.ap-tile--w-2 .ap-kpi-value {
    font-size: 2.55rem;
}

.ap-content .ap-tile--kpi.ap-tile--w-3 .ap-kpi-main,
.ap-content .ap-tile--kpi.ap-tile--w-4 .ap-kpi-main {
    margin-bottom: 6px;
}
























/* ─── KPI Value ────────────────────────────────────────── */
.ap-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dr-text-main);
    line-height: 1.2;
    font-style: normal;
}

.ap-kpi-value--placeholder {
    color: var(--dr-text-muted-light);
    font-weight: 400;
    font-size: 1.25rem;
}

/* ─── KPI Change (рост/падение) ────────────────────────── */
.ap-kpi-change {
    padding: 0.25rem 0 0.5rem;
    font-style: normal;
}

.ap-kpi-change__value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dr-text-main);
}

.ap-kpi-change__value--positive {
    color: var(--dr-success);
}

.ap-kpi-change__value--negative {
    color: var(--dr-danger);
}

.ap-kpi-change__arrow {
    display: inline-block;
    margin-right: 0.125rem;
}

/* ─── KPI Row (сравнение, план, изменение) ──────────────── */
.ap-kpi-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    font-style: normal;
    font-size: 0.8125rem;
}

.ap-kpi-row__label {
    color: var(--dr-text-muted);
}

.ap-kpi-row__value {
    color: var(--dr-text-main);
    font-weight: 500;
}

.ap-kpi-row__value--positive {
    color: var(--dr-success);
}

.ap-kpi-row__value--negative {
    color: var(--dr-danger);
}

/* ─── Progress Bar ──────────────────────────────────────── */
.ap-progress {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--dr-border);
}

.ap-progress__bar {
    height: 6px;
    background: var(--dr-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.375rem;
}

.ap-progress__fill {
    height: 100%;
    background: var(--dr-primary);
    border-radius: 3px;
    opacity: 0.5;
    transition: width 0.3s ease;
}

/* Progress fill widths (5% increments) */
.ap-progress-fill--p0   { width: 0%; }
.ap-progress-fill--p5   { width: 5%; }
.ap-progress-fill--p10  { width: 10%; }
.ap-progress-fill--p15  { width: 15%; }
.ap-progress-fill--p20  { width: 20%; }
.ap-progress-fill--p25  { width: 25%; }
.ap-progress-fill--p30  { width: 30%; }
.ap-progress-fill--p35  { width: 35%; }
.ap-progress-fill--p40  { width: 40%; }
.ap-progress-fill--p45  { width: 45%; }
.ap-progress-fill--p50  { width: 50%; }
.ap-progress-fill--p55  { width: 55%; }
.ap-progress-fill--p60  { width: 60%; }
.ap-progress-fill--p65  { width: 65%; }
.ap-progress-fill--p70  { width: 70%; }
.ap-progress-fill--p75  { width: 75%; }
.ap-progress-fill--p80  { width: 80%; }
.ap-progress-fill--p85  { width: 85%; }
.ap-progress-fill--p90  { width: 90%; }
.ap-progress-fill--p95  { width: 95%; }
.ap-progress-fill--p100 { width: 100%; }

.ap-progress__text {
    font-size: 0.75rem;
    color: var(--dr-text-muted);
    font-style: normal;
}

/* ─── Sparkline (SVG placeholder) ───────────────────────── */
.ap-sparkline {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--dr-border);
    height: 45px;
    flex-shrink: 0;
}

.ap-sparkline__svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ap-sparkline__line {
    opacity: 0.6;
}

/* ─── Chart Placeholder (legacy — kept for backward compat) ── */
.ap-chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-height: 160px;
    color: var(--dr-text-muted-light);
    gap: 0.5rem;
}

/* Компактный вариант для мини-чартов (Inflow) */
.ap-chart-placeholder--compact {
    min-height: 50px;
    margin-top: 0.25rem;
}

.ap-chart-placeholder__icon {
    font-size: 2.5rem;
    opacity: 0.2;
}

.ap-chart-placeholder__text {
    font-size: 0.8125rem;
    font-style: italic;
}

/* ─── Line Chart (SVG placeholder) ──────────────────────── */
.ap-linechart {
    flex-grow: 1;
    display: flex;
    align-items: stretch;
    min-height: 80px;
}

.ap-linechart__svg {
    width: 100%;
    height: 100%;
}

.ap-linechart__grid-line {
    stroke: var(--dr-border);
    stroke-width: 0.5;
    opacity: 0.5;
}

.ap-linechart__fill {
    fill: var(--dr-primary);
    opacity: 0.08;
}

.ap-linechart__line {
    opacity: 0.7;
}

.ap-linechart__dot {
    opacity: 0.8;
}

/* ─── Bar Chart (SVG placeholder) ───────────────────────── */
.ap-barchart {
    flex-grow: 1;
    display: flex;
    align-items: stretch;
    min-height: 80px;
}

.ap-barchart__svg {
    width: 100%;
    height: 100%;
}

.ap-barchart__grid-line {
    stroke: var(--dr-border);
    stroke-width: 0.5;
    opacity: 0.4;
}

.ap-barchart__bar {
    opacity: 0.6;
}

.ap-barchart__label {
    font-family: system-ui, -apple-system, sans-serif;
}

/* ─── Donut Chart (SVG) ─────────────────────────────────── */
.ap-donut {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
}

.ap-donut__chart {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
}

.ap-donut__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ap-donut__segment {
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.ap-donut__segment:hover {
    opacity: 1;
}

.ap-donut__track {
    /* Фоновое кольцо рисуется последним в SVG, чтобы быть под сегментами */
}

.ap-donut__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.ap-donut__center-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dr-text-main);
    line-height: 1.2;
}

.ap-donut__center-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--dr-text-muted);
    font-style: normal;
    margin-top: 0.125rem;
}

.ap-donut__legend {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex-grow: 1;
    min-width: 0;
}

.ap-donut__legend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    font-style: normal;
    padding: 0.125rem 0;
}

.ap-donut__legend-label {
    color: var(--dr-text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-donut__legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ap-donut__legend-dot--primary { background: var(--dr-primary); }
.ap-donut__legend-dot--warning { background: var(--dr-warning); }
.ap-donut__legend-dot--danger  { background: var(--dr-danger); }
.ap-donut__legend-dot--success { background: var(--dr-success); }
.ap-donut__legend-dot--info    { background: var(--dr-info); }

.ap-donut__legend-value {
    color: var(--dr-text-main);
    font-weight: 500;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.ap-donut__legend-total {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--dr-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ap-donut__legend-total-label {
    font-size: 0.8125rem;
    font-style: normal;
    color: var(--dr-text-muted);
}

.ap-donut__legend-total-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dr-text-main);
}

/* ─── Donut Placeholder (legacy — backward compat) ──────── */
.ap-donut-placeholder {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
}

.ap-donut-placeholder__ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 8px solid var(--dr-border);
    border-top-color: var(--dr-primary);
    border-right-color: var(--dr-warning);
    border-bottom-color: var(--dr-danger);
    flex-shrink: 0;
    opacity: 0.5;
    transform: rotate(-45deg);
}

.ap-donut-placeholder__legend {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex-grow: 1;
}

.ap-donut-placeholder__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    font-style: normal;
    padding: 0.125rem 0;
}

.ap-donut-placeholder__item-name {
    color: var(--dr-text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ap-donut-placeholder__item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Цвета точек легенды Donut (legacy) */
.ap-donut-placeholder__item-dot--healthy {
    background: var(--dr-primary);
}

.ap-donut-placeholder__item-dot--warning {
    background: var(--dr-warning);
}

.ap-donut-placeholder__item-dot--danger {
    background: var(--dr-danger);
}

.ap-donut-placeholder__item-value {
    color: var(--dr-text-main);
    font-weight: 500;
}

.ap-donut-placeholder__total {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--dr-border);
    font-size: 0.8125rem;
    font-style: normal;
    color: var(--dr-text-main);
    font-weight: 600;
    text-align: right;
}

/* ─── Forecast ──────────────────────────────────────────── */
.ap-forecast-text {
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
    font-style: normal;
    padding: 0.375rem 0;
    margin-top: 0.25rem;
    border-top: 1px solid var(--dr-border);
}

.ap-forecast-probability {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    font-style: normal;
    font-size: 0.8125rem;
}

.ap-forecast-probability__label {
    color: var(--dr-text-muted);
}

.ap-forecast-probability__value {
    color: var(--dr-text-main);
    font-weight: 600;
}

.ap-forecast-closedate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    font-style: normal;
    font-size: 0.8125rem;
}

.ap-forecast-closedate__label {
    color: var(--dr-text-muted);
}

.ap-forecast-closedate__value {
    color: var(--dr-text-main);
    font-weight: 500;
}

/* ─── Timeline (HTML/CSS) ───────────────────────────────── */
.ap-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0 0.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--dr-border);
    gap: 0;
}

.ap-timeline__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 0;
}

.ap-timeline__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ap-timeline__dot--active {
    background: var(--dr-primary);
    box-shadow: 0 0 0 2px var(--dr-primary-light);
}

.ap-timeline__dot--inactive {
    background: var(--dr-border);
}

.ap-timeline__label {
    font-size: 0.625rem;
    color: var(--dr-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50px;
    text-align: center;
    font-style: normal;
}

.ap-timeline__connector {
    flex-grow: 1;
    height: 2px;
    background: var(--dr-border);
    margin: 0 2px;
    margin-bottom: 18px;
    min-width: 4px;
    flex-shrink: 1;
}

/* ─── Table ─────────────────────────────────────────────── */
.ap-table-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.ap-table thead th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    color: var(--dr-text-muted);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 2px solid var(--dr-border);
    white-space: nowrap;
    background: var(--dr-bg-card);
    position: sticky;
    top: 0;
    z-index: 1;
}

.ap-table tbody td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--dr-border-light);
    color: var(--dr-text-main);
    vertical-align: middle;
}

/* Zebra rows */
.ap-table__row:nth-child(even) td {
    background: var(--dr-bg-main);
}

/* Hover */
.ap-table__row:hover td {
    background: var(--dr-primary-light);
}

/* ─── Manager Avatar Placeholder ────────────────────────── */
.ap-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dr-primary-light);
    color: var(--dr-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    font-style: normal;
    margin-right: 0.5rem;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ─── Status Badge ──────────────────────────────────────── */
.ap-badge {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4;
    white-space: nowrap;
}

.ap-badge--healthy {
    background: var(--dr-success-soft);
    color: var(--dr-success);
}

.ap-badge--at-risk {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

.ap-badge--problematic {
    background: var(--dr-danger-soft);
    color: var(--dr-danger);
}

.ap-badge--neutral {
    background: var(--dr-bg-main);
    color: var(--dr-text-muted);
}

.ap-badge--success {
    background: var(--dr-success-soft);
    color: var(--dr-success);
}

.ap-badge--warning {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

.ap-badge--danger {
    background: var(--dr-danger-soft);
    color: var(--dr-danger);
}

/* ─── Legacy Status Badge (backward compat) ──────────────── */
.ap-status-badge {
    display: inline-block;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4;
}

.ap-status-badge--healthy {
    background: var(--dr-success-soft);
    color: var(--dr-success);
}

.ap-status-badge--at-risk {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

.ap-status-badge--problematic {
    background: var(--dr-danger-soft);
    color: var(--dr-danger);
}

/* ─── Action Link ───────────────────────────────────────── */
.ap-action-link {
    color: var(--dr-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    font-style: normal;
    opacity: 0.5;
    cursor: default;
}

.ap-action-link:hover {
    text-decoration: underline;
}

.ap-table__action-link {
    color: var(--dr-primary);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    font-style: normal;
    opacity: 0.5;
    cursor: default;
}

.ap-table__action-link:hover {
    opacity: 0.8;
}

/* ─── Table Footer ──────────────────────────────────────── */
.ap-table__footer {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
    border-top: 1px solid var(--dr-border);
    background: var(--dr-bg-card);
}

.ap-table__footer-link {
    color: var(--dr-primary);
    text-decoration: none;
    font-weight: 500;
    cursor: default;
}

.ap-table__footer-link:hover {
    text-decoration: underline;
}

/* ─── Legacy table footer (backward compat) ──────────────── */
.ap-manager-table-footer {
    padding: 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
}

.ap-manager-table-footer__link {
    color: var(--dr-primary);
    text-decoration: none;
    opacity: 0.5;
    cursor: default;
}

/* ─── Legacy Table (backward compat) ────────────────────── */
.ap-manager-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ap-manager-table thead th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    color: var(--dr-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 2px solid var(--dr-border);
    white-space: nowrap;
}

.ap-manager-table tbody td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--dr-border-light);
    color: var(--dr-text-main);
    vertical-align: middle;
}

.ap-manager-table tbody tr:hover {
    background: var(--dr-bg-main);
}

/* ─── Адаптивность ─────────────────────────────────────── */
@media (max-width: 992px) {
    .ap-tile--col-3 {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .ap-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ap-panel-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ap-filter-card {
        flex-direction: column;
        align-items: stretch;
    }

    .ap-filter-card__group {
        flex-wrap: wrap;
    }

    .ap-filter-card__select {
        width: 100%;
    }

    .ap-tiles-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .ap-tile--col-3,
    .ap-tile--col-4,
    .ap-tile--col-6,
    .ap-tile--col-12 {
        grid-column: span 6;
    }

    .ap-donut,
    .ap-donut-placeholder {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ap-table {
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .ap-tiles-grid {
        grid-template-columns: 1fr;
    }

    .ap-tile--col-3,
    .ap-tile--col-4,
    .ap-tile--col-6,
    .ap-tile--col-12 {
        grid-column: span 1;
    }

    .ap-tile__body {
        min-height: 100px;
    }

    .ap-table thead {
        display: none;
    }

    .ap-table tbody td {
        display: block;
        text-align: right;
        padding: 0.375rem 0.75rem;
    }

    .ap-table tbody td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--dr-text-muted);
        text-transform: uppercase;
        font-size: 0.6875rem;
    }

    .ap-table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--dr-border);
        border-radius: 0.375rem;
        overflow: hidden;
    }

    /* Legacy table mobile */
    .ap-manager-table thead {
        display: none;
    }

    .ap-manager-table tbody td {
        display: block;
        text-align: right;
        padding: 0.375rem 0.75rem;
    }

    .ap-manager-table tbody td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--dr-text-muted);
        text-transform: uppercase;
        font-size: 0.6875rem;
    }

    .ap-manager-table tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--dr-border);
        border-radius: 0.375rem;
        overflow: hidden;
    }
}

/* =====================================================
   Состояния плашек метрик (Задача №4)
   ===================================================== */

/* ─── Technical state code badge ─────────────────────── */
.ap-state-code {
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.6875rem;
    color: var(--dr-text-muted-light);
    background: var(--dr-bg-main);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* ─── Header badge (replaces ap-state-code in header) ── */
.ap-tile__header-badge {
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.6875rem;
    color: var(--dr-text-muted-light);
    background: var(--dr-bg-main);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* ─── Blocking state (adds relative positioning context) ─── */
.ap-tile--state-blocking {
    position: relative;
}

/* ─── Base state container (inside tile body) ───────── */
.ap-tile-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1rem;
    flex-grow: 1;
}

/* ─── Overlay for blocking states ───────────────────── */
.ap-tile-state--overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--dr-bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
}

/* ─── Demo state (non-blocking badge only) ──────────── */
.ap-tile-state--demo {
    position: static;
    padding: 0;
    display: block;
    text-align: left;
}

.ap-tile-state__badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
    margin: 0 0 0.5rem;
}

/* ─── No data state (non-blocking, neutral) ──────────── */
.ap-tile-state--no-data {
    color: var(--dr-text-muted);
}

/* ─── Error state ────────────────────────────────────── */
.ap-tile-state--error .ap-tile-state__icon {
    color: var(--dr-danger);
    font-size: 1.75rem;
}

/* ─── Requires mapping state ─────────────────────────── */
.ap-tile-state--requires-mapping .ap-tile-state__icon {
    color: var(--dr-warning);
    font-size: 1.75rem;
}

/* ─── Missing fields state ───────────────────────────── */
.ap-tile-state--missing-fields .ap-tile-state__icon {
    color: var(--dr-warning);
    font-size: 1.75rem;
}

/* ─── Archived state ─────────────────────────────────── */
.ap-tile-state--archived .ap-tile-state__icon {
    color: var(--dr-text-muted);
    font-size: 1.75rem;
}

/* ─── Shared state elements ──────────────────────────── */
.ap-tile-state__icon {
    font-size: 1.75rem;
    line-height: 1;
    opacity: 0.85;
}

.ap-tile-state__message {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dr-text-main);
    margin: 0;
    max-width: 100%;
    word-wrap: break-word;
}

.ap-tile-state__action {
    font-size: 0.8125rem;
    opacity: 0.7;
}

/* ─── Skeleton (loading state) ───────────────────────── */
.ap-tile-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 100%;
    padding: 0.125rem 0;
}

.ap-tile-skeleton__line {
    height: 0.875rem;
    background: var(--dr-border);
    border-radius: 0.25rem;
    animation: ap-skeleton-pulse 1.6s ease-in-out infinite;
}

.ap-tile-skeleton__line--value {
    width: 40%;
    height: 1.125rem;
}

.ap-tile-skeleton__line--short {
    width: 65%;
}

.ap-tile-skeleton__line--shorter {
    width: 50%;
}

.ap-tile-skeleton__chart {
    height: 90px;
    background: var(--dr-border);
    border-radius: 0.375rem;
    margin-top: 0.25rem;
    animation: ap-skeleton-pulse 1.6s ease-in-out infinite;
}

@keyframes ap-skeleton-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

/* ─── Reduced motion: disable skeleton animation ─────── */
@media (prefers-reduced-motion: reduce) {
    .ap-tile-skeleton__line,
    .ap-tile-skeleton__chart {
        animation: none;
    }
}

/* ─── Subtitle for states page ───────────────────────── */
.ap-states-subtitle {
    font-size: 0.9375rem;
    color: var(--dr-text-muted);
    margin-bottom: 1.5rem;
    margin-top: -0.75rem;
}

/* ─── Placeholder content (for states page) ──────────── */
.ap-placeholder-content {
    opacity: 0.4;
    pointer-events: none;
}

/* =====================================================
   Visualization Container (Задача №8.4)
   Все цвета — через var(--dr-*)
   ===================================================== */

/* ─── Wrapper ────────────────────────────────────────── */
.ap-visualization-wrapper {
    display: contents;
}

/* ─── Container ──────────────────────────────────────── */
.ap-visualization {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* ─── Fallback (текущий SVG/HTML renderer) ──────────── */
.ap-visualization__fallback {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* ─── JSON config script block (не отображается) ────── */
.ap-visualization__config {
    display: none;
}

/* ─── Type modifiers (Задача 8.5: размеры для ECharts) ─── */
.ap-visualization--line,
.ap-visualization--bar,
.ap-visualization--donut {
    width: 100%;
    min-height: 180px;
}

.ap-visualization--table { /* будущие стили Tabulator */ }

/* ─── Library-active: скрыть fallback после успешного render ─── */
.ap-visualization--library-active .ap-visualization__fallback {
    display: none;
}

/* =====================================================
   Tabulator Overrides (Задача №8.6)
   Все цвета — через var(--dr-*), поддержка светлой/тёмной темы.
   ===================================================== */

/* ─── After-library footer ───────────────────────────── */
.ap-visualization__after-library {
    /* Footer всегда видим, в потоке wrapper */
}

/* ─── Tabulator container ────────────────────────────── */
.ap-visualization--table .tabulator {
    font-size: 0.8125rem;
    color: var(--dr-text-main);
    background: var(--dr-bg-card);
    border: 0;
}

.ap-visualization--table .tabulator-header {
    color: var(--dr-text-muted);
    background: var(--dr-bg-card);
    border-bottom: 1px solid var(--dr-border);
    font-weight: 600;
}

.ap-visualization--table .tabulator-header .tabulator-col {
    color: var(--dr-text-muted);
    background: var(--dr-bg-card);
    border-right: 0;
}

.ap-visualization--table .tabulator-header .tabulator-col-content {
    padding: 0.625rem 0.75rem;
}

.ap-visualization--table .tabulator-header .tabulator-col-title {
    color: var(--dr-text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.ap-visualization--table .tabulator-header .tabulator-col-sorter {
    color: var(--dr-text-muted);
}

.ap-visualization--table .tabulator-tableholder,
.ap-visualization--table .tabulator-table {
    background: var(--dr-bg-card);
}

.ap-visualization--table .tabulator-row,
.ap-visualization--table .tabulator-row:nth-child(even),
.ap-visualization--table .tabulator-row:nth-child(odd) {
    color: var(--dr-text-main);
    background: var(--dr-bg-card);
    border-bottom: 1px solid var(--dr-border);
}

.ap-visualization--table .tabulator-row .tabulator-cell {
    padding: 0.625rem 0.75rem;
    color: var(--dr-text-main);
    background: transparent;
    border-right: 0;
}

.ap-visualization--table .tabulator-row:hover,
.ap-visualization--table .tabulator-row:hover .tabulator-cell {
    color: var(--dr-text-main);
    background: var(--dr-bg-hover);
}

/* ─── Manager cell (avatar + text) ───────────────────── */
.ap-tabulator-cell--manager {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ap-tabulator-cell--manager .ap-avatar {
    flex-shrink: 0;
}

/* ─── Badge inside Tabulator cell ────────────────────── */
.ap-visualization--table .tabulator-cell .ap-badge {
    display: inline-block;
}

/* ─── Action link inside Tabulator cell ──────────────── */
.ap-visualization--table .tabulator-cell .ap-table__action-link {
    display: inline;
}

/* ─── Tabulator placeholder (no data) ────────────────── */
.ap-visualization--table .tabulator-placeholder {
    color: var(--dr-text-muted);
}

/* ─── Tabulator table holder ─────────────────────────── */
.ap-visualization--table .tabulator-tableholder {
    /* Высота по содержимому, без скролла */
}

/* ─── Horizontal scroll for small screens ────────────── */
@media (max-width: 768px) {
    .ap-visualization--table {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .ap-visualization--table .tabulator-tableholder {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .ap-visualization--table .tabulator-cell,
    .ap-visualization--table .tabulator-col-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* =====================================================
   Compact Analytics Workspace (Задача №8.7)
   Новые ap-dashboard-* классы + компактные оверрайды
   ===================================================== */

.ap-tile__heading {
    flex: 1;
    min-width: 0;
}

.ap-tile__heading-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ap-tile__period {
    margin-top: 2px;
    color: var(--dr-text-muted);
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.2;
}

.ap-tile__info {
    position: relative;
    flex-shrink: 0;
    color: var(--dr-text-muted);
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: help;
    opacity: 0.75;
}

.ap-tile__info:hover,
.ap-tile__info:focus {
    color: var(--dr-primary);
    opacity: 1;
    outline: none;
}

.dr-metric-tooltip .tooltip-inner {
    max-width: 260px;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.dr-metric-tooltip {
    --bs-tooltip-opacity: 1;
}

.ap-tile__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--dr-text-muted);
    font-size: 0.6875rem;
    cursor: help;
    opacity: 0.65;
}

.ap-tile__info:hover,
.ap-tile__info:focus {
    color: var(--dr-primary);
    opacity: 1;
    outline: none;
}

.ap-tile__passport {
    position: relative;
    flex-shrink: 0;
    margin: 0;
}

.ap-tile__passport > summary {
    list-style: none;
}

.ap-tile__passport > summary::-webkit-details-marker {
    display: none;
}

.ap-tile__passport-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dr-text-muted);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.ap-tile__passport-trigger:hover,
.ap-tile__passport-trigger:focus {
    background: rgba(13, 110, 253, 0.08);
    color: var(--dr-primary);
    opacity: 1;
    outline: none;
}

.ap-tile__passport[open] .ap-tile__passport-trigger {
    background: rgba(13, 110, 253, 0.08);
    color: var(--dr-primary);
    opacity: 1;
}

.ap-tile__passport-menu {
    position: absolute;
    z-index: 1080;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    padding: 14px 16px;
    border: 1px solid var(--dr-border);
    border-radius: 10px;
    background: var(--dr-bg-card);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    color: var(--dr-text-main);
    text-align: left;
}

.ap-tile__passport-title {
    margin-bottom: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.ap-tile__passport-section {
    padding: 8px 0;
    border-top: 1px solid var(--dr-border);
}

.ap-tile__passport-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.ap-tile__passport-label {
    margin-bottom: 3px;
    color: var(--dr-text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ap-tile__passport-value {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
}

.ap-tile__passport-section--filters {
    margin: 4px -8px;
    padding: 8px;
    border-radius: 6px;
    background: rgba(13, 110, 253, 0.05);
}

.ap-tile__passport-note {
    margin-top: 5px;
    color: var(--dr-text-muted);
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1.35;
}

/* ─── Dashboard Topline ──────────────────────────────── */
.ap-dashboard-topline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--dr-border);
    flex-wrap: wrap;
}

/* ─── Dashboard Header ───────────────────────────────── */
.ap-dashboard-header {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 0.25rem;
    gap: 0.5rem;
}

.ap-dashboard-header__menu-icon,
.ap-dashboard-header__edit,
.ap-dashboard-header__export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--dr-text-muted);
    font-size: 1.325rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ap-dashboard-header__menu-icon:hover,
.ap-dashboard-header__edit:hover,
.ap-dashboard-header__export-btn:hover {
    background: var(--dr-bg-hover);
    color: var(--dr-text-main);
}

.ap-dashboard-tabs {
    display: flex;
    align-items: center;
    min-width: 0;
}

.ap-dashboard-title {
    margin: 0;
    overflow: hidden;
    color: var(--dr-text-main);
    font-size: 1.725rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-dashboard-header__export {
    display: inline-flex;
    align-items: center;
}

.ap-dashboard-header__export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ap-dashboard-header__export .dropdown-menu {
    min-width: 170px;
}

.ap-dashboard-header__export .dropdown-item {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.ap-dashboard-header__export .dropdown-item:disabled {
    opacity: .55;
    cursor: wait;
}

.is-dashboard-snapshot .ap-dashboard-header__menu-icon,
.is-dashboard-snapshot .ap-dashboard-header__edit,
.is-dashboard-snapshot .ap-dashboard-header__export {
    display: none;
}


/* ─── Dashboard Filters ──────────────────────────────── */
.ap-dashboard-filters {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0 0 0.5rem;
    margin: 0;
    border: 0;
    flex-wrap: wrap;
}

.ap-dashboard-filters [data-dashboard-canonical-filters] {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.ap-dashboard-filters__group {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
}

.ap-dashboard-filters__label {
    color: var(--dr-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
}

.ap-dashboard-filters__value {
    color: var(--dr-text-main);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ap-dashboard-filters__hint {
    color: var(--dr-text-muted-light);
    font-size: 0.6875rem;
}

.ap-dashboard-filters__select {
    min-width: 130px;
    height: 30px;
    padding: 0.1875rem 1.75rem 0.1875rem 0.5rem;
    border: 1px solid var(--dr-border);
    border-radius: 0.375rem;
    background-color: var(--dr-bg-card);
    color: var(--dr-text-main);
    font-size: 0.8125rem;
    line-height: 1.2;
}

.ap-dashboard-filters__select:hover {
    border-color: var(--dr-text-muted-light);
}

.ap-dashboard-filters__select:focus {
    outline: none;
    border-color: var(--dr-primary);
    box-shadow: 0 0 0 2px var(--dr-primary-light);
}

.ap-dashboard-filter-dropdown__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 160px;
    text-align: left;
}

.ap-dashboard-filter-dropdown__toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-dashboard-filter-dropdown__menu {
    min-width: 220px;
    max-height: 280px;
    padding: 0.375rem;
    overflow-y: auto;
    background: var(--dr-bg-card);
    border: 1px solid var(--dr-border);
}

.ap-dashboard-filter-dropdown__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--dr-text-main);
    font-size: 0.8125rem;
    cursor: pointer;
}

.ap-dashboard-filter-dropdown__option:hover {
    background: var(--dr-bg-hover);
}

.ap-dashboard-filter-dropdown__option .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

/* ─── Dashboard Subtitle ─────────────────────────────── */
.ap-dashboard-subtitle {
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
    margin-bottom: 1rem;
    margin-top: 0;
}

/* ═══════════════════════════════════════════════════════
   Compact overrides (scoped to .ap-content)
   Уменьшают отступы, размеры карточек, шрифты
   для увеличения полезной площади экрана на 20-30%.
   ═══════════════════════════════════════════════════════ */

/* ─── Section spacing (уменьшено ~30%) ───────────────── */
.ap-content .ap-section {
    margin-bottom: 1.25rem;
}

.ap-content .ap-section__header {
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
}

.ap-content .ap-section__title {
    font-size: 1rem;
}

.ap-content .ap-section__icon {
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
}

/* ─── Grid gap (уменьшено) ───────────────────────────── */
.ap-content .ap-tiles-grid {
    gap: 0.75rem;
}

/* ─── Tile card (компактные padding'и) ───────────────── */


.ap-content .ap-tile__icon {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

.ap-content .ap-tiles-grid {
    gap: 0.625rem;
}

.ap-content .ap-tile__body--table {
    padding: 0;
}

/* ─── KPI compact ────────────────────────────────────── */

.ap-content .ap-kpi-row {
    padding: 0.25rem 0;
    font-size: 0.75rem;
}

/* ─── Progress compact ───────────────────────────────── */
.ap-content .ap-progress {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
}

/* ─── Sparkline compact ──────────────────────────────── */
.ap-content .ap-sparkline {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    height: 36px;
}

/* ─── Visualization compact (уменьшены min-height) ───── */
.ap-content .ap-visualization--line,
.ap-content .ap-visualization--bar,
.ap-content .ap-visualization--donut {
    min-height: 140px;
}

/* ─── Donut chart compact ────────────────────────────── */
.ap-content .ap-donut {
    gap: 0.75rem;
}

.ap-content .ap-donut__chart {
    width: 100px;
    height: 100px;
}

.ap-content .ap-donut__center-value {
    font-size: 1.125rem;
}

/* ─── Chart placeholder compact ──────────────────────── */
.ap-content .ap-chart-placeholder {
    min-height: 120px;
}

.ap-content .ap-chart-placeholder--compact {
    min-height: 40px;
}

/* ─── Timeline compact ───────────────────────────────── */
.ap-content .ap-timeline {
    padding: 0.5rem 0 0.125rem;
    margin-top: 0.375rem;
}

/* ─── Forecast compact ───────────────────────────────── */
.ap-content .ap-forecast-text {
    padding: 0.25rem 0;
    margin-top: 0.125rem;
}

.ap-content .ap-forecast-probability,
.ap-content .ap-forecast-closedate {
    padding: 0.25rem 0;
}

/* ─── Donut legend compact ───────────────────────────── */
.ap-content .ap-donut__legend {
    gap: 0.25rem;
}

.ap-content .ap-donut__legend-item {
    font-size: 0.75rem;
}

/* ─── Skeleton compact ───────────────────────────────── */
.ap-content .ap-tile-skeleton__chart {
    height: 70px;
}

/* =====================================================
   Responsive adjustments for compact layout
   ===================================================== */

@media (max-width: 992px) {
    .ap-dashboard-filters {
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    .ap-dashboard-title {
        font-size: 1rem;
    }

    .ap-dashboard-filters {
        align-items: stretch;
    }

    .ap-dashboard-filters__group {
        flex: 1 1 160px;
    }

    .ap-dashboard-filters__select {
        width: 100%;
    }
}
/* =====================================================
   Drill-down: кнопка «Показать данные» (Задача №8.9)
   Все цвета — через var(--dr-*)
   ===================================================== */

/* ─── Кнопка действия в заголовке плашки ─────────────── */
.ap-tile__data-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    margin-left: auto;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--dr-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
}

.ap-tile__data-action:hover {
    color: var(--dr-primary);
    background: var(--dr-primary-light);
    border-color: var(--dr-primary);
}

.ap-tile__data-action:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 1px;
    color: var(--dr-primary);
}

/* На touch-устройствах кнопка всегда видима */
@media (hover: none) and (pointer: coarse) {
    .ap-tile__data-action {
        color: var(--dr-text-muted);
    }
}

/* На desktop кнопка заметнее при hover/focus плашки */
@media (hover: hover) and (pointer: fine) {
    .ap-tile__data-action {
        opacity: 0.5;
    }

    .ap-tile:hover .ap-tile__data-action,
    .ap-tile:focus-within .ap-tile__data-action {
        opacity: 1;
    }
}

/* ─── Плашка с включённой детализацией ───────────────── */
.ap-tile--drilldown-enabled {
    /* Зарезервировано для будущих стилей плашки с drilldown */
}

/* Компактный вариант кнопки внутри .ap-content */
.ap-content .ap-tile__data-action {
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
}

/* ─── Primary Value (Задача 8.22) ──────────────────────── */

/* Обёртка главного показателя над графиком (bar, line, area, stacked_bar, horizontal_bar) */
.ap-primary-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0 0 0.5rem 0;
    margin: 0;
}

.ap-primary-value__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dr-text-muted);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ap-primary-value__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dr-text-main);
    line-height: 1.2;
}

.ap-primary-value__unit {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--dr-text-muted);
    margin-left: 0.25rem;
}

/* Состояние отсутствия данных */
.ap-primary-value--no-data .ap-primary-value__value {
    color: var(--dr-text-muted-light);
    font-weight: 400;
    font-size: 1.25rem;
    font-style: italic;
}

/* Primary value в центре donut/pie (когда центр свободен) */
.ap-donut__center .ap-primary-value {
    padding: 0;
    align-items: center;
    gap: 0;
}

.ap-donut__center .ap-primary-value__label {
    font-size: 0.625rem;
    text-transform: none;
    letter-spacing: 0;
}

.ap-donut__center .ap-primary-value__value {
    font-size: 1.125rem;
}

/* Адаптивность */
@media (max-width: 576px) {
    .ap-primary-value__value {
        font-size: 1.25rem;
    }
    .ap-primary-value__label {
        font-size: 0.6875rem;
    }
}

/* Тёмная тема — без изменений, используются var(--dr-*) */

/* ═══════════════════════════════════════════════════════
   Sprint M1.2.1 — Diagnostic funnel + SYSTEM KPI (`money_stuck`)
   Scoped-блок: только плашки системной панели Management Analytics.
   Все цвета — через var(--dr-*); светлая/тёмная тема без дублей layout.
   ═══════════════════════════════════════════════════════ */

/* ─── Diagnostic funnel (renderer `diagnostic-funnel`) ─── */

.ap-diagnostic-funnel {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-diagnostic-funnel__stage {
    --ap-funnel-accent: var(--dr-text-muted);
    --ap-funnel-soft: var(--dr-bg-main);

    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem 0.75rem;
    background-color: var(--dr-bg-card);
    border: 1px solid var(--dr-border);
    border-top: 3px solid var(--ap-funnel-accent);
    border-radius: 0.5rem;
}

/* Severity → акцент (design tokens, обе темы) */
.ap-diagnostic-funnel__stage--low {
    --ap-funnel-accent: var(--dr-success);
    --ap-funnel-soft: var(--dr-success-soft);
}

.ap-diagnostic-funnel__stage--medium {
    --ap-funnel-accent: var(--dr-warning);
    --ap-funnel-soft: var(--dr-warning-soft);
}

.ap-diagnostic-funnel__stage--high {
    --ap-funnel-accent: var(--dr-danger);
    --ap-funnel-soft: var(--dr-danger-soft);
}

.ap-diagnostic-funnel__stage--critical {
    --ap-funnel-accent: var(--dr-danger);
    --ap-funnel-soft: var(--dr-danger-soft);

    border-top-width: 4px;
    /* Мягкая подсветка проблемного этапа вместо агрессивной заливки карточки */
    background-image: linear-gradient(180deg, var(--dr-danger-soft) 0%, transparent 65%);
}

/* Стрелка последовательности процесса (чистый CSS) */
.ap-diagnostic-funnel__stage:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -0.5rem;
    width: 0.4rem;
    height: 0.4rem;
    border-top: 2px solid var(--dr-text-muted-light);
    border-right: 2px solid var(--dr-text-muted-light);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

.ap-diagnostic-funnel__stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.ap-diagnostic-funnel__name {
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dr-text-main);
}

.ap-diagnostic-funnel__severity {
    flex: 0 0 auto;
    padding: 0.0625rem 0.375rem;
    border-radius: 1rem;
    background: var(--ap-funnel-soft);
    color: var(--ap-funnel-accent);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Сумма не влияет на геометрию этапа: одинаковый размер шрифта у всех этапов */
.ap-diagnostic-funnel__amount {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dr-text-main);
}

.ap-diagnostic-funnel__meta {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

.ap-diagnostic-funnel__details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--dr-border-light);
}

.ap-diagnostic-funnel__detail {
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--dr-text-muted);
}

.ap-diagnostic-funnel__detail--delay {
    color: var(--ap-funnel-accent);
    font-weight: 600;
}

.ap-diagnostic-funnel__empty {
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
}

@media (max-width: 992px) {
    .ap-diagnostic-funnel {
        flex-wrap: wrap;
    }

    .ap-diagnostic-funnel__stage {
        flex: 1 1 12rem;
    }

    .ap-diagnostic-funnel__stage:not(:last-child)::after {
        display: none;
    }
}

/* ─── SYSTEM KPI (`money_stuck`): место под крупные значения ───
   Scoped по коду метрики системной панели, чтобы не менять внешний вид
   KPI панелей USER/TEMPLATE (общие правила `.ap-tile--kpi` не изменены). */
.ap-content .ap-tile--kpi[data-metric-code^="money_stuck"] {
    grid-row: span 2;
}

.ap-content .ap-tile--kpi[data-metric-code^="money_stuck"] .ap-kpi-content {
    justify-content: center;
}

.ap-content .ap-tile--kpi[data-metric-code^="money_stuck"] .ap-kpi-main {
    margin-top: 0;
    margin-bottom: 0;
}

.ap-content .ap-tile--kpi[data-metric-code^="money_stuck"] .ap-kpi-value {
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

/* ═══════════════════════════════════════════════════════
   Sprint M1.2.2 — Management composition (`money_stuck`)
   Scoped: .ap-management-dashboard / .ap-money-stuck-*.
   Все цвета — через var(--dr-*): light/dark без дублей layout.
   USER/TEMPLATE UI не затрагивается.
   ═══════════════════════════════════════════════════════ */

.ap-management-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ─── Hero ─── */
.ap-money-stuck__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ap-money-stuck__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--dr-text-main);
}

/* Sprint M1.2.5: burger списка панелей стоит в одной строке с заголовком. */
.ap-money-stuck__hero-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ap-money-stuck__hero-head .ap-dashboard-header {
    margin-bottom: 0;
}

.ap-money-stuck__subtitle {
    margin: 0.375rem 0 0 calc(30px + 0.5rem);
    max-width: 60rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--dr-text-muted);
}

/* Sprint M1.2.5: глобальные фильтры SYSTEM-панели — разметка Dashboard Shell, слева. */
.ap-money-stuck .ap-dashboard-filters {
    justify-content: flex-start;
    padding: 0 0 0.25rem;
}

.ap-money-stuck__state {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--dr-border);
    border-radius: 1rem;
    background: var(--dr-bg-card);
    color: var(--dr-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 20px;
}

/* ─── KPI row ─── */
.ap-money-stuck__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.ap-money-stuck__kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    background: var(--dr-bg-card);
    border: 1px solid var(--dr-border);
    border-radius: 0.5rem;
}

.ap-money-stuck__kpi-label {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

.ap-money-stuck__kpi .ap-kpi-content {
    gap: 0.125rem;
}

.ap-money-stuck__kpi .ap-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--dr-text-main);
}

/* secondary context KPI-карточки (например, «риск растёт») */
.ap-kpi-note {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dr-warning);
}

/* ─── Основная диагностическая сетка ─── */
.ap-money-stuck__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.ap-money-stuck__block--stages {
    grid-column: 1;
    grid-row: 1;
}

.ap-money-stuck__block--trend {
    grid-column: 2;
    grid-row: 1;
}

.ap-money-stuck__block--managers {
    grid-column: 1;
    grid-row: 2;
}

.ap-money-stuck__block--deals {
    grid-column: 2;
    grid-row: 2;
}

.ap-money-stuck__diag {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ap-money-stuck__block {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.875rem 1rem 1rem;
    background: var(--dr-bg-card);
    border: 1px solid var(--dr-border);
    border-radius: 0.5rem;
}

.ap-money-stuck__block-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dr-text-muted);
}

.ap-money-stuck__block-body {
    min-width: 0;
}

/* ─── Trend block ─── */
.ap-money-stuck__trend-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--dr-text-main);
}

.ap-money-stuck__trend-chart {
    margin: 0.25rem 0 0.5rem;
}

.ap-money-stuck__block--trend .ap-visualization--line {
    min-height: 170px;
}

.ap-money-stuck__trend-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--dr-border-light);
}

.ap-money-stuck__trend-stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ap-money-stuck__trend-stat-label {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

.ap-money-stuck__trend-stat-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dr-text-main);
}

/* ─── Right diagnostic column ─── */
.ap-money-stuck__diag-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 0.875rem;
    background: var(--dr-bg-card);
    border: 1px solid var(--dr-border);
    border-radius: 0.5rem;
}

.ap-money-stuck__diag-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dr-text-muted);
}

.ap-money-stuck__diag-lead {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dr-text-main);
}

.ap-money-stuck__diag-note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--dr-text-muted);
}

.ap-money-stuck__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.ap-money-stuck__fact {
    position: relative;
    padding-left: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--dr-text-main);
}

.ap-money-stuck__fact::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--dr-text-muted-light);
}

.ap-money-stuck__actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ap-money-stuck__action {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    padding: 0.4375rem 0.5rem;
    border: 1px solid var(--dr-border-light);
    border-radius: 0.375rem;
    background: var(--dr-bg-main);
}

.ap-money-stuck__action-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--dr-text-main);
}

.ap-money-stuck__action-title {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

/* ─── Methodology ─── */
.ap-money-stuck__methodology {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 0.875rem;
    background: var(--dr-bg-main);
    border: 1px solid var(--dr-border-light);
    border-radius: 0.5rem;
}

.ap-money-stuck__methodology-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dr-text-main);
}

.ap-money-stuck__methodology-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--dr-text-muted);
}

/* ─── Diagnostic funnel: компактные строки этапов ─── */
.ap-diagnostic-funnel--rows {
    display: block;
}

.ap-diagnostic-funnel__row {
    --ap-funnel-accent: var(--dr-text-muted);

    position: relative;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--dr-border-light);
}

.ap-diagnostic-funnel__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ap-diagnostic-funnel__row--low {
    --ap-funnel-accent: var(--dr-success);
}

.ap-diagnostic-funnel__row--medium {
    --ap-funnel-accent: var(--dr-warning);
}

.ap-diagnostic-funnel__row--high,
.ap-diagnostic-funnel__row--critical {
    --ap-funnel-accent: var(--dr-danger);
}

.ap-diagnostic-funnel__row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.ap-diagnostic-funnel__summary {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.ap-diagnostic-funnel__track {
    margin-top: 0.375rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: var(--dr-bg-hover);
    overflow: hidden;
}

.ap-diagnostic-funnel__fill {
    display: block;
    height: 100%;
    border-radius: 0.25rem;
    background: var(--ap-funnel-accent);
}

.ap-diagnostic-funnel__sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.25rem;
}

/* ─── Адаптив: последовательный перенос блоков ─── */
@media (max-width: 1100px) {
    .ap-money-stuck__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-money-stuck__block--stages,
    .ap-money-stuck__block--trend,
    .ap-money-stuck__block--managers,
    .ap-money-stuck__block--deals,
    .ap-money-stuck__diag {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 720px) {
    .ap-money-stuck__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ap-money-stuck__trend-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════
   Sprint M1.2.3 — KPI context + diagnostic navigation + polish
   Scoped: .ap-money-stuck / .ap-diagnostic-funnel--rows.
   Все цвета — только var(--dr-*): light/dark без дублей layout.
   ═══════════════════════════════════════════════════════ */

/* ─── KPI: icon surface + смысловые состояния ─── */
.ap-money-stuck__kpi-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ap-money-stuck__kpi-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: var(--dr-bg-main);
    color: var(--dr-text-muted);
    font-size: 0.9375rem;
    line-height: 1;
}

.ap-money-stuck__kpi-label {
    flex: 1 1 auto;
    min-width: 0;
}

.ap-money-stuck__kpi-arrow {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--dr-text-muted-light);
    transition: transform 0.15s ease, color 0.15s ease;
}

/* Семантика состояний — цвет по смыслу, а не декоративно */
.ap-money-stuck__kpi--warning {
    border-left: 3px solid var(--dr-warning);
}

.ap-money-stuck__kpi--warning .ap-money-stuck__kpi-icon {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

.ap-money-stuck__kpi--info {
    border-left: 3px solid var(--dr-primary-light);
}

.ap-money-stuck__kpi--info .ap-money-stuck__kpi-icon {
    background: var(--dr-primary-light);
    color: var(--dr-primary);
}

.ap-money-stuck__kpi--danger {
    border-left: 3px solid var(--dr-danger);
}

.ap-money-stuck__kpi--danger .ap-money-stuck__kpi-icon {
    background: var(--dr-danger-soft);
    color: var(--dr-danger);
}

/* Secondary context KPI */
.ap-money-stuck__kpi .ap-kpi-context {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

.ap-money-stuck__kpi .ap-kpi-context--danger {
    color: var(--dr-danger);
}

.ap-money-stuck__kpi .ap-kpi-context--warning {
    color: var(--dr-warning);
}

.ap-money-stuck__kpi .ap-kpi-context--success {
    color: var(--dr-success);
}

/* KPI как точка перехода к проблемным сделкам */
.ap-money-stuck__kpi--nav {
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ap-money-stuck__kpi--nav:hover {
    background: var(--dr-bg-hover);
    border-color: var(--dr-primary);
}

.ap-money-stuck__kpi--nav:hover .ap-money-stuck__kpi-arrow,
.ap-money-stuck__kpi--nav:focus-visible .ap-money-stuck__kpi-arrow {
    color: var(--dr-primary);
    transform: translateX(2px);
}

.ap-money-stuck__kpi--nav:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 2px;
}

/* ─── Trend stats: семантика вошло / вернулось / остаток ─── */
.ap-money-stuck__trend-stat--danger .ap-money-stuck__trend-stat-value {
    color: var(--dr-danger);
}

.ap-money-stuck__trend-stat--success .ap-money-stuck__trend-stat-value {
    color: var(--dr-success);
}

.ap-money-stuck__trend-stat--neutral .ap-money-stuck__trend-stat-value {
    color: var(--dr-text-main);
}

/* ─── Diagnostic funnel rows: severity + navigation ─── */
.ap-diagnostic-funnel__row {
    padding: 0.5rem 0.375rem 0.5rem 0.625rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ap-diagnostic-funnel__row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 2px;
    background: var(--ap-funnel-accent);
    opacity: 0.5;
}

.ap-diagnostic-funnel__row:hover {
    background: var(--dr-bg-hover);
}

.ap-diagnostic-funnel__row:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: -2px;
}

/* Главный проблемный этап визуально очевиден */
.ap-diagnostic-funnel__row--critical {
    background-image: linear-gradient(90deg, var(--dr-danger-soft) 0%, transparent 70%);
}

.ap-diagnostic-funnel__row--critical::before {
    opacity: 1;
}

.ap-diagnostic-funnel__row--critical .ap-diagnostic-funnel__name {
    font-weight: 700;
}

.ap-diagnostic-funnel__nav {
    flex: 0 0 auto;
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: var(--dr-text-muted-light);
}

.ap-diagnostic-funnel__row:hover .ap-diagnostic-funnel__nav {
    color: var(--dr-primary);
}

.ap-diagnostic-funnel__bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.375rem;
}

.ap-diagnostic-funnel__bar .ap-diagnostic-funnel__track {
    flex: 1 1 auto;
    margin-top: 0;
}

.ap-diagnostic-funnel__bar .ap-diagnostic-funnel__meta {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ─── Компактные таблицы без горизонтального скролла ─── */
.ap-money-stuck__table-wrap {
    overflow: hidden;
}

.ap-money-stuck__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.ap-money-stuck__table th {
    padding: 0.375rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    color: var(--dr-text-muted);
    border-bottom: 1px solid var(--dr-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-money-stuck__table td {
    padding: 0.4375rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--dr-text-main);
    border-bottom: 1px solid var(--dr-border-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.ap-money-stuck__table th:first-child,
.ap-money-stuck__table td:first-child {
    padding-left: 0.625rem;
}

.ap-money-stuck__table tbody tr {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.ap-money-stuck__table tbody tr:hover td {
    background: var(--dr-bg-hover);
}

.ap-money-stuck__table tbody tr:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: -2px;
}

.ap-money-stuck__table tbody tr:last-child td {
    border-bottom: 0;
}

.ap-money-stuck__cell-strong {
    font-weight: 600;
}

.ap-money-stuck__cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ap-money-stuck__cell-muted {
    color: var(--dr-text-muted);
}

.ap-money-stuck__manager {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.ap-money-stuck__manager-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-money-stuck__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--dr-primary-light);
    color: var(--dr-primary);
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1;
}

/* Semantic status pills */
.ap-money-stuck__pill {
    display: inline-block;
    max-width: 100%;
    padding: 0.0625rem 0.375rem;
    border-radius: 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-money-stuck__pill--danger {
    background: var(--dr-danger-soft);
    color: var(--dr-danger);
}

.ap-money-stuck__pill--warning {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

.ap-money-stuck__pill--success {
    background: var(--dr-success-soft);
    color: var(--dr-success);
}

.ap-money-stuck__pill--neutral {
    background: var(--dr-bg-main);
    color: var(--dr-text-muted);
}

.ap-money-stuck__empty {
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
}

/* ─── «Почему»: numbered markers + drill-down ─── */
.ap-money-stuck__reasons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ap-money-stuck__reason {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.4375rem;
    border: 1px solid var(--dr-border-light);
    border-radius: 0.375rem;
    background: var(--dr-bg-main);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ap-money-stuck__reason:hover {
    background: var(--dr-bg-hover);
    border-color: var(--dr-primary);
}

.ap-money-stuck__reason:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 1px;
}

.ap-money-stuck__reason-marker {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--dr-primary-light);
    color: var(--dr-primary);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

.ap-money-stuck__reason-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--dr-text-main);
}

/* ─── «Что разобрать сегодня»: action rows + CTA ─── */
.ap-money-stuck__today-total {
    margin: 0 0 0.125rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dr-text-main);
}

.ap-money-stuck__action {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ap-money-stuck__action:hover {
    background: var(--dr-bg-hover);
    border-color: var(--dr-primary);
}

.ap-money-stuck__action:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 1px;
}

.ap-money-stuck__action-main {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.ap-money-stuck__action-arrow {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--dr-text-muted-light);
}

.ap-money-stuck__action:hover .ap-money-stuck__action-arrow {
    color: var(--dr-primary);
}

.ap-money-stuck__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    margin-top: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dr-primary);
    border-radius: 0.5rem;
    background: var(--dr-primary-light);
    color: var(--dr-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.ap-money-stuck__cta:hover {
    box-shadow: 0 0 0 2px var(--dr-primary-light);
}

.ap-money-stuck__cta:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 2px;
}

/* ─── Диагностическая колонка визуально отделена ─── */
.ap-money-stuck__diag {
    padding-left: 0.75rem;
    border-left: 1px solid var(--dr-border);
}

/* Bottleneck — тоже точка перехода к этапу */
.ap-money-stuck__diag-lead[data-drilldown] {
    cursor: pointer;
}

.ap-money-stuck__diag-lead[data-drilldown]:hover {
    color: var(--dr-primary);
}

@media (max-width: 1100px) {
    .ap-money-stuck__diag {
        padding-left: 0;
        border-left: 0;
    }
}

/* SPRINT-M1.2.4-MARKER */

/* ═══════════════════════════════════════════════════════
   Sprint M1.2.4-fix — визуальная композиция SYSTEM money_stuck
   Перенос scoped-стилей из `views/dashboard/_money-stuck.php`:
   `<style>` во view не остаётся. Scoped: .ap-money-stuck-* /
   .ap-diagnostic-funnel--chevrons. Все цвета — только var(--dr-*),
   light/dark без отдельной копии layout.
   ═══════════════════════════════════════════════════════ */

/* ─── KPI row: chevron-группа ₽4,8 млн + отдельные счётчики справа ─── */
.ap-money-stuck__kpis {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0.75rem;
}

.ap-money-stuck__kpi-seq {
    display: flex;
    align-items: stretch;
    flex: 3 1 0;
    min-width: 0;
    gap: 0;
}

.ap-money-stuck__kpis > .ap-money-stuck__kpi {
    flex: 1 1 0;
    min-width: 0;
}

/* Соприкасающаяся chevron-геометрия: одинаковая форма у всех трёх блоков */
.ap-money-stuck__kpi-seq .ap-money-stuck__kpi {
    --ap-kpi-chevron: 0.85rem;

    position: relative;
    flex: 1 1 0;
    min-width: 0;
    margin-left: calc(var(--ap-kpi-chevron) * -1);
    padding: 0.625rem calc(0.875rem + var(--ap-kpi-chevron)) 0.625rem calc(0.875rem + var(--ap-kpi-chevron));
    border: 0;
    border-radius: 0;
    background: var(--dr-bg-hover);
    clip-path: polygon(
        0 0,
        calc(100% - var(--ap-kpi-chevron)) 0,
        100% 50%,
        calc(100% - var(--ap-kpi-chevron)) 100%,
        0 100%,
        var(--ap-kpi-chevron) 50%
    );
}

.ap-money-stuck__kpi-seq .ap-money-stuck__kpi:first-child {
    margin-left: 0;
    padding-left: 0.875rem;
    clip-path: polygon(
        0 0,
        calc(100% - var(--ap-kpi-chevron)) 0,
        100% 50%,
        calc(100% - var(--ap-kpi-chevron)) 100%,
        0 100%
    );
}

.ap-money-stuck__kpi-seq .ap-money-stuck__kpi:last-child {
    padding-right: 0.875rem;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%,
        var(--ap-kpi-chevron) 50%
    );
}

/* clip-path убирает outline — фокус показываем inset-тенью */
.ap-money-stuck__kpi-seq .ap-money-stuck__kpi--nav:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--dr-primary);
}

/* Приглушённые тона (light/dark): текст остаётся var(--dr-text-main) */
.ap-money-stuck__kpi-seq .ap-money-stuck__kpi--total {
    background: var(--dr-primary-light);
}

.ap-money-stuck__kpi-seq .ap-money-stuck__kpi--part {
    background: var(--dr-warning-soft);
}

.ap-money-stuck__kpi-seq .ap-money-stuck__kpi--part.ap-money-stuck__kpi--danger {
    background: var(--dr-danger-soft);
}

.ap-money-stuck__kpi-seq .ap-money-stuck__kpi-label {
    color: var(--dr-text-main);
}

/* ─── Общая desktop-сетка: MAIN ~75% / RAIL ~25% ─── */
.ap-money-stuck__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.ap-money-stuck__main {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.ap-money-stuck__row {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

/* Центральный и нижний ряды: ~40% / ~60% */
.ap-money-stuck__row--split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

/* Блоки внутри MAIN больше не задают собственные координаты сетки */
.ap-money-stuck__block--stages,
.ap-money-stuck__block--concentration,
.ap-money-stuck__block--reasons,
.ap-money-stuck__block--managers,
.ap-money-stuck__block--deals {
    grid-column: auto;
    grid-row: auto;
}

.ap-money-stuck__diag {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
    border-left: 0;
}

/* ─── Компактность блоков и вторичный текст ─── */
.ap-money-stuck__block {
    gap: 0.5rem;
    padding: 0.75rem 0.875rem 0.875rem;
}

.ap-money-stuck__block-note {
    margin: -0.25rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted-light);
}

/* ─── «Где задержаны деньги»: chevron-карточки этапов ─── */
.ap-diagnostic-funnel--chevrons {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-diagnostic-funnel__card {
    --ap-chevron: 1rem;

    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.75rem calc(0.75rem + var(--ap-chevron)) 0.75rem calc(0.875rem + var(--ap-chevron));
    margin-left: calc(var(--ap-chevron) * -1);
    cursor: pointer;
    background: var(--dr-bg-card);
    background: color-mix(in srgb, var(--ap-stage-color, var(--dr-text-muted-light)) 15%, var(--dr-bg-card));
    box-shadow: inset 0 0 0 1px var(--dr-border);
    clip-path: polygon(
        0 0,
        calc(100% - var(--ap-chevron)) 0,
        100% 50%,
        calc(100% - var(--ap-chevron)) 100%,
        0 100%,
        var(--ap-chevron) 50%
    );
}

.ap-diagnostic-funnel__card:first-child {
    margin-left: 0;
    padding-left: 0.875rem;
    clip-path: polygon(
        0 0,
        calc(100% - var(--ap-chevron)) 0,
        100% 50%,
        calc(100% - var(--ap-chevron)) 100%,
        0 100%
    );
}

.ap-diagnostic-funnel__card:last-child {
    padding-right: 0.875rem;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%,
        var(--ap-chevron) 50%
    );
}

.ap-diagnostic-funnel__card:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--dr-primary);
}

.ap-diagnostic-funnel__card-head {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ap-diagnostic-funnel__card-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dr-text-main);
}

/* Название воронки — вторичный текст (режим «Все воронки»: Top pipeline + stage) */
.ap-diagnostic-funnel__card-pipeline {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.625rem;
    line-height: 1.3;
    color: var(--dr-text-muted-light);
}

/* Сумма не влияет на геометрию: одинаковый размер шрифта у всех карточек */
.ap-diagnostic-funnel__card-amount {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--dr-text-main);
}

.ap-diagnostic-funnel__card-stats {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.ap-diagnostic-funnel__card-deals {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}

.ap-diagnostic-funnel__card-share {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--ap-stage-color, var(--dr-text-muted)) 55%, var(--dr-text-main));
}

.ap-diagnostic-funnel__card-timing {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted-light);
}

/* Severity (смысловой акцент) отделён от цвета CRM-этапа */
.ap-diagnostic-funnel__card-timing--delay {
    font-weight: 600;
    color: var(--dr-danger);
}

.ap-diagnostic-funnel__nav {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--dr-text-muted-light);
    pointer-events: none;
}

.ap-diagnostic-funnel__card:hover .ap-diagnostic-funnel__nav {
    color: var(--dr-primary);
}

/* ─── «Концентрация задержанных денег»: компактный donut + Top-3 справа ─── */
.ap-money-stuck__concentration {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.ap-money-stuck__donut {
    position: relative;
    flex: 0 0 auto;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: conic-gradient(
        var(--dr-danger) 0 var(--ap-donut-a, 50%),
        var(--dr-warning) var(--ap-donut-a, 50%) 100%
    );
}

.ap-money-stuck__donut::after {
    content: '';
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: var(--dr-bg-card);
}

.ap-money-stuck__donut-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.0625rem;
    text-align: center;
}

.ap-money-stuck__donut-total {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dr-text-main);
}

.ap-money-stuck__donut-share {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--dr-text-muted);
}

.ap-money-stuck__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 10rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

.ap-money-stuck__legend-item {
    display: grid;
    grid-template-columns: 0.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.ap-money-stuck__legend-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--dr-text-muted-light);
}

.ap-money-stuck__legend-dot--a {
    background: var(--dr-danger);
}

.ap-money-stuck__legend-dot--b {
    background: var(--dr-warning);
}

.ap-money-stuck__legend-dot--stage {
    background: var(--ap-stage-color, var(--dr-text-muted-light));
}

.ap-money-stuck__legend-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dr-text-main);
}

.ap-money-stuck__legend-amount {
    font-weight: 600;
    color: var(--dr-text-main);
}

.ap-money-stuck__legend-percent {
    min-width: 2.25rem;
    text-align: right;
    color: var(--dr-text-muted);
}

.ap-money-stuck__concentration-caption {
    margin: 0.625rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--dr-text-muted);
}

/* ─── RAIL: главный затор / динамика ─── */
.ap-money-stuck__diag-stage {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.ap-money-stuck__diag-stage-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dr-text-main);
}

.ap-money-stuck__delta {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dr-text-main);
}

.ap-money-stuck__delta--danger {
    color: var(--dr-danger);
}

.ap-money-stuck__diag-disclaimer {
    margin: 0.25rem 0 0;
    font-size: 0.625rem;
    color: var(--dr-text-muted-light);
}

/* ─── Семантика статуса сделки (значение типа приходит из данных) ─── */
.ap-money-stuck__pill--delay {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

.ap-money-stuck__pill--critical {
    background: var(--dr-danger-soft);
    color: var(--dr-danger);
}

/* ─── Адаптив: сохранение читаемости вместо chevron-геометрии ─── */
@media (max-width: 1100px) {
    .ap-money-stuck__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-money-stuck__main,
    .ap-money-stuck__diag {
        grid-column: 1;
        grid-row: auto;
    }

    .ap-money-stuck__kpis {
        flex-wrap: wrap;
    }

    .ap-money-stuck__kpi-seq {
        flex-basis: 100%;
    }

    .ap-money-stuck__kpis > .ap-money-stuck__kpi {
        flex: 1 1 10rem;
    }

    .ap-diagnostic-funnel--chevrons {
        flex-wrap: wrap;
        gap: 0.625rem;
    }

    .ap-diagnostic-funnel__card,
    .ap-diagnostic-funnel__card:first-child,
    .ap-diagnostic-funnel__card:last-child {
        margin-left: 0;
        padding: 0.75rem 0.875rem;
        border-radius: 0.5rem;
        clip-path: none;
    }

    .ap-diagnostic-funnel__nav {
        display: none;
    }
}

@media (max-width: 720px) {
    .ap-money-stuck__row--split {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-money-stuck__kpi-seq {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ap-money-stuck__kpi-seq .ap-money-stuck__kpi,
    .ap-money-stuck__kpi-seq .ap-money-stuck__kpi:first-child,
    .ap-money-stuck__kpi-seq .ap-money-stuck__kpi:last-child {
        flex: 1 1 9rem;
        margin-left: 0;
        padding: 0.625rem 0.75rem;
        border-radius: 0.5rem;
        clip-path: none;
    }

    .ap-money-stuck__concentration {
        justify-content: center;
    }
}

/* SPRINT-M1.2.4-FIX-END */

/* =====================================================
   Sprint M3.5.3B: «Что изменилось за 7 дней» (temporal real data)
   Все цвета — через var(--dr-*), dark/light автоматически.
   ===================================================== */

.ap-money-stuck__delta--success {
    color: var(--dr-success);
}

.ap-money-stuck__delta--neutral {
    color: var(--dr-text-main);
}

.ap-money-stuck__delta-percent {
    margin-left: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dr-text-muted);
}

.ap-money-stuck__transitions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ap-money-stuck__transition {
    display: flex;
    align-items: baseline;
    gap: 0.3125rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--dr-text-main);
}

.ap-money-stuck__transition-arrow {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--dr-text-muted-light);
}

.ap-money-stuck__transitions--critical {
    margin-top: 0.125rem;
}

.ap-money-stuck__transition--critical {
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}

/* Exit reasons — вторичный уровень под строкой «вышло из задержки». */
.ap-money-stuck__exit-reasons {
    list-style: none;
    margin: 0.125rem 0 0;
    padding: 0 0 0 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ap-money-stuck__exit-reason {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--dr-text-muted);
}

.ap-money-stuck__exit-reason-count {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--dr-text-muted);
}

/* ═══════════════════════════════════════════════════════
   Sprint M4.4.2 — Unified Drill-down Bottom Overlay (visual parity)
   Reference: web/img/dashboards/drill_down.jpg
   Единая композиция для light/dark: все цвета — через var(--dr-*),
   локальные производные оттенки — через color-mix() от существующих tokens.
   Это НЕ Bootstrap modal: dashboard остаётся видимым позади.
   ======================================================= */

/* Backdrop: dashboard уходит на второй план, но остаётся читаемым. */
.ap-drilldown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    background: color-mix(in srgb, var(--dr-sidebar-bg) 45%, transparent);
    -webkit-backdrop-filter: blur(2px) saturate(0.9);
    backdrop-filter: blur(2px) saturate(0.9);
    animation: ap-drilldown-fade-in 0.18s ease;
}

/* Fallback без backdrop-filter. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ap-drilldown-backdrop {
        background: color-mix(in srgb, var(--dr-sidebar-bg) 58%, transparent);
    }
}

.ap-drilldown-overlay {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0;
    z-index: 1040;
    /* Desktop default: пропорции ближе к каноническому drill_down.jpg.
       M4.4.3: пользовательская drag-высота приходит через --ap-dv-height
       (JS); при её отсутствии действует прежний default 66vh. */
    height: var(--ap-dv-height, 66vh);
    min-height: min(520px, 88vh);
    max-height: 93vh;
    display: flex;
    flex-direction: column;
    background-color: var(--dr-bg-card);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dr-primary) 6%, var(--dr-bg-card)) 0%,
        var(--dr-bg-card) 26%
    );
    border: 1px solid color-mix(in srgb, var(--dr-border) 82%, var(--dr-sidebar-bg) 18%);
    border-bottom: 0;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 7%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--dr-text-main) 6%, transparent),
        0 -6px 18px color-mix(in srgb, var(--dr-sidebar-bg) 28%, transparent),
        0 -24px 60px color-mix(in srgb, var(--dr-sidebar-bg) 44%, transparent);
    color: var(--dr-text-main);
    overflow: hidden;
    animation: ap-drilldown-sheet-in 0.22s ease;
}

@keyframes ap-drilldown-sheet-in {
    from {
        transform: translateY(16px);
        opacity: 0.45;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ap-drilldown-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-drilldown-overlay,
    .ap-drilldown-backdrop {
        animation: none;
    }
}

/* Верхний handle: M4.4.3 — resize handle (визуальные размер/позиция не изменены).
   ::before — невидимая увеличенная зона захвата (без влияния на композицию). */
.ap-drilldown-overlay__handle {
    position: relative;
    width: 52px;
    height: 4px;
    flex: 0 0 auto;
    margin: 0.75rem auto 0.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dr-text-muted-light) 72%, transparent);
    transition: background 0.15s ease;
    cursor: ns-resize;
    touch-action: none;
}

.ap-drilldown-overlay__handle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -0.625rem;
    width: 8rem;
    height: 1.5rem;
    transform: translateX(-50%);
}

.ap-drilldown-overlay:hover .ap-drilldown-overlay__handle {
    background: color-mix(in srgb, var(--dr-primary) 55%, var(--dr-text-muted-light));
}

.ap-drilldown-overlay__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 1.5rem 1.125rem;
    flex: 0 0 auto;
}

.ap-drilldown-overlay__heading {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    min-width: 0;
}

.ap-drilldown-overlay__title {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--dr-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-drilldown-overlay__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--dr-text-muted);
}

.ap-drilldown-overlay__breadcrumb[hidden] {
    display: none;
}

.ap-drilldown-overlay__crumb-sep {
    color: var(--dr-text-muted-light);
}

.ap-drilldown-overlay__crumb:last-child {
    color: var(--dr-text-main);
    font-weight: 600;
}

.ap-drilldown-overlay__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
}

.ap-drilldown-overlay__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--dr-border);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--dr-bg-main) 60%, transparent);
    color: var(--dr-text-muted);
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ap-drilldown-overlay__action:hover {
    background: var(--dr-bg-hover);
    color: var(--dr-text-main);
    border-color: color-mix(in srgb, var(--dr-primary) 45%, var(--dr-border));
}

.ap-drilldown-overlay__action:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 1px;
}

.ap-drilldown-overlay__action--close:hover {
    color: var(--dr-danger);
    border-color: color-mix(in srgb, var(--dr-danger) 45%, var(--dr-border));
}

/* Filter chips (read-only). */
.ap-drilldown-overlay__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.5rem 0.875rem;
    flex: 0 0 auto;
}

.ap-drilldown-overlay__chips[hidden] {
    display: none;
}

.ap-drilldown-overlay__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--dr-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dr-bg-main) 70%, transparent);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--dr-text-muted);
}

.ap-drilldown-overlay__chip-label {
    color: var(--dr-text-muted-light);
}

.ap-drilldown-overlay__chip-value {
    color: var(--dr-text-main);
    font-weight: 600;
}

/* Summary + toolbar shell. */
.ap-drilldown-overlay__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--dr-border-light);
    border-bottom: 1px solid var(--dr-border-light);
    background: color-mix(in srgb, var(--dr-bg-main) 55%, var(--dr-bg-card));
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dr-primary) 4%, transparent) 0%,
        transparent 100%
    );
    flex: 0 0 auto;
}

.ap-drilldown-overlay__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-width: 0;
}

.ap-drilldown-overlay__summary[hidden] {
    display: none;
}

.ap-drilldown-overlay__card {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 1rem;
    border: 1px solid color-mix(in srgb, var(--dr-border) 78%, var(--dr-sidebar-bg) 22%);
    border-radius: 0.75rem;
    background: var(--dr-bg-card);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dr-text-main) 4%, transparent) 0%,
        transparent 60%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 6%, transparent),
        0 1px 2px color-mix(in srgb, var(--dr-sidebar-bg) 14%, transparent),
        0 6px 16px color-mix(in srgb, var(--dr-sidebar-bg) 14%, transparent);
}

/* Amount — доминирующая карточка summary (самая широкая). */
.ap-drilldown-overlay__card--amount {
    min-width: 15rem;
    padding-right: 1.375rem;
}

.ap-drilldown-overlay__card--count,
.ap-drilldown-overlay__card--share {
    min-width: 0;
}

.ap-drilldown-overlay__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 0.625rem;
    background: var(--dr-primary-light);
    color: var(--dr-primary);
    font-size: 1.0625rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dr-primary) 18%, transparent);
}

.ap-drilldown-overlay__card-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ap-drilldown-overlay__card-value {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--dr-text-main);
}

.ap-drilldown-overlay__card--amount .ap-drilldown-overlay__card-value {
    font-size: 1.1875rem;
}

.ap-drilldown-overlay__card-label {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

.ap-drilldown-overlay__controls {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ap-drilldown-overlay__search {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    height: 32px;
    padding: 0 0.625rem;
    border: 1px solid color-mix(in srgb, var(--dr-border) 78%, var(--dr-text-muted-light) 22%);
    border-radius: 0.5rem;
    background: var(--dr-bg-card);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 5%, transparent);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ap-drilldown-overlay__search:focus-within {
    border-color: var(--dr-primary);
    box-shadow: 0 0 0 2px var(--dr-primary-light);
}

.ap-drilldown-overlay__search-icon {
    color: var(--dr-text-muted-light);
    font-size: 0.75rem;
}

.ap-drilldown-overlay__search-input {
    width: 190px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--dr-text-main);
    font-size: 0.8125rem;
}

.ap-drilldown-overlay__search-input::placeholder {
    color: var(--dr-text-muted-light);
}

.ap-drilldown-overlay__control {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    height: 32px;
    padding: 0 0.625rem;
    border: 1px solid color-mix(in srgb, var(--dr-border) 78%, var(--dr-text-muted-light) 22%);
    border-radius: 0.5rem;
    background: var(--dr-bg-card);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 5%, transparent);
    color: var(--dr-text-main);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.ap-drilldown-overlay__control:hover:not(:disabled) {
    background: var(--dr-bg-hover);
    border-color: color-mix(in srgb, var(--dr-primary) 40%, var(--dr-border));
}

.ap-drilldown-overlay__control:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 1px;
}

.ap-drilldown-overlay__control:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ap-drilldown-overlay__control-caret {
    color: var(--dr-text-muted-light);
    font-size: 0.625rem;
}

.ap-drilldown-overlay__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.5rem 1.25rem;
}

.ap-drilldown-overlay__state {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--dr-text-muted);
}

/* Внутренняя рабочая поверхность таблицы (не тяжёлая card-рамка). */
.ap-drilldown-overlay__table-wrap {
    --ap-dv-table-surface: color-mix(in srgb, var(--dr-bg-main) 26%, var(--dr-bg-card));
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--dr-border) 72%, transparent);
    border-radius: 0.75rem;
    background: var(--ap-dv-table-surface);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 4%, transparent),
        0 1px 2px color-mix(in srgb, var(--dr-sidebar-bg) 10%, transparent);
}

.ap-drilldown-overlay__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.ap-drilldown-overlay__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.6875rem 1rem;
    background: var(--ap-dv-table-surface, var(--dr-bg-card));
    border-bottom: 1px solid var(--dr-border);
    font-size: 0.6563rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dr-text-muted-light);
    text-align: left;
    white-space: nowrap;
}

.ap-drilldown-overlay__table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--dr-border-light);
    color: var(--dr-text-main);
    vertical-align: middle;
}

.ap-drilldown-overlay__row {
    cursor: pointer;
    transition: background 0.12s ease;
}

/* Hover заметно, но не ярко; строка читается как интерактивный объект. */
.ap-drilldown-overlay__row:hover td {
    background: color-mix(in srgb, var(--dr-primary) 7%, var(--dr-bg-hover));
}

.ap-drilldown-overlay__row:hover td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--dr-primary) 70%, transparent);
}

.ap-drilldown-overlay__row:last-child td {
    border-bottom: 0;
}

.ap-drilldown-overlay__cell--primary {
    font-weight: 600;
}

.ap-drilldown-overlay__primary {
    color: var(--dr-text-main);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.ap-drilldown-overlay__cell--num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ap-drilldown-overlay__cell--strong {
    font-weight: 600;
}

.ap-drilldown-overlay__cell--muted {
    color: var(--dr-text-muted);
}

/* Critical age — ТОЛЬКО presentation emphasis (без domain-расчётов).
   Explicit modifier: `td.ap-...__cell--critical-age` специфичнее базового
   `.ap-drilldown-overlay__table td` → danger-цвет не перебивается. */
.ap-drilldown-overlay__table td.ap-drilldown-overlay__cell--critical-age,
.ap-drilldown-overlay__cell--critical-age {
    color: var(--dr-danger);
    font-weight: 700;
}

.ap-drilldown-overlay__cell--chevron {
    width: 2.5rem;
    text-align: right;
    color: color-mix(in srgb, var(--dr-text-muted-light) 82%, transparent);
}

.ap-drilldown-overlay__row:hover .ap-drilldown-overlay__cell--chevron {
    color: var(--dr-primary);
}

.ap-drilldown-overlay__manager {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ap-drilldown-overlay__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--dr-primary-light);
    color: var(--dr-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dr-primary) 18%, transparent);
}

.ap-drilldown-overlay__manager-name {
    color: var(--dr-text-main);
}

.ap-drilldown-overlay__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.71875rem;
    font-weight: 600;
    white-space: nowrap;
}

.ap-drilldown-overlay__badge--critical {
    background: color-mix(in srgb, var(--dr-danger) 14%, transparent);
    color: var(--dr-danger);
    border-color: color-mix(in srgb, var(--dr-danger) 32%, transparent);
}

.ap-drilldown-overlay__badge--delayed {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
    border-color: color-mix(in srgb, var(--dr-warning) 35%, transparent);
}

.ap-drilldown-overlay__badge--normal {
    background: var(--dr-success-soft);
    color: var(--dr-success);
    border-color: color-mix(in srgb, var(--dr-success) 30%, transparent);
}

.ap-drilldown-overlay__badge--neutral {
    background: var(--dr-bg-main);
    color: var(--dr-text-muted);
    border-color: var(--dr-border);
}

/* Footer (presentation-only pagination). */
.ap-drilldown-overlay__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--dr-border-light);
    background: color-mix(in srgb, var(--dr-bg-main) 52%, var(--dr-bg-card));
    flex: 0 0 auto;
}

.ap-drilldown-overlay__range {
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}

.ap-drilldown-overlay__pager {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ap-drilldown-overlay__pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--dr-border) 78%, var(--dr-text-muted-light) 22%);
    border-radius: 0.4375rem;
    background: var(--dr-bg-card);
    color: var(--dr-text-main);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.ap-drilldown-overlay__pager-btn:hover:not(:disabled) {
    background: var(--dr-bg-hover);
}

.ap-drilldown-overlay__pager-btn:disabled {
    opacity: 0.45;
    border-color: var(--dr-border-light);
    background: transparent;
    color: var(--dr-text-muted-light);
    cursor: default;
}

/* Current page — accent (presentation-only). */
.ap-drilldown-overlay__page {
    min-width: 2.5rem;
    padding: 0.1875rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--dr-primary) 38%, transparent);
    border-radius: 0.4375rem;
    background: var(--dr-primary-light);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dr-primary);
}

/* Compact control (presentation-only). */
.ap-drilldown-overlay__page-size {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--dr-border-light);
    border-radius: 0.4375rem;
    background: color-mix(in srgb, var(--dr-bg-main) 40%, transparent);
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}

/* ─── Theme polish (без отдельной palette: только существующие tokens/color-mix) ─── */

/* Light theme: тот же premium-компонент — заметнее граница sheet, мягкая
   верхняя тень, tinted topbar, depth у summary/table surface. */
[data-bs-theme="light"] .ap-drilldown-overlay,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--dr-sidebar-bg) 8%, transparent),
        0 -4px 16px color-mix(in srgb, var(--dr-sidebar-bg) 10%, transparent),
        0 -24px 64px color-mix(in srgb, var(--dr-sidebar-bg) 16%, transparent);
}

[data-bs-theme="light"] .ap-drilldown-overlay__topbar,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__topbar {
    background: color-mix(in srgb, var(--dr-primary) 3%, var(--dr-bg-main));
}

[data-bs-theme="light"] .ap-drilldown-overlay__card,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__card {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent),
        0 1px 2px color-mix(in srgb, var(--dr-sidebar-bg) 8%, transparent),
        0 8px 20px color-mix(in srgb, var(--dr-sidebar-bg) 8%, transparent);
}

[data-bs-theme="light"] .ap-drilldown-overlay__table-wrap,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__table-wrap {
    --ap-dv-table-surface: color-mix(in srgb, var(--dr-sidebar-bg) 4%, var(--dr-bg-card));
}

/* Dark theme: глубже navy-характер, чуть сильнее separation sheet vs backdrop,
   богаче summary cards и отделённая table surface. */
[data-bs-theme="dark"] .ap-drilldown-overlay {
    border-color: color-mix(in srgb, var(--dr-border) 70%, var(--dr-sidebar-bg) 30%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #ffffff 4%, transparent),
        0 -6px 20px color-mix(in srgb, #000000 34%, transparent),
        0 -28px 70px color-mix(in srgb, #000000 52%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__card {
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dr-primary) 8%, transparent) 0%,
        transparent 70%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent),
        0 1px 2px color-mix(in srgb, #000000 30%, transparent),
        0 8px 20px color-mix(in srgb, #000000 22%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__table-wrap {
    --ap-dv-table-surface: color-mix(in srgb, var(--dr-bg-main) 52%, var(--dr-bg-card));
    border-color: color-mix(in srgb, var(--dr-border) 68%, transparent);
}

/* ═══ M4.4.2.2 — Visual Effects & Diagnostic Emphasis (presentation-only) ═══
   Composition/geometry M4.4.2.1 не меняется: только depth/glow/semantic palette.
   Только существующие var(--dr-*) + производные через color-mix(). */

/* Critical age (dark): очень лёгкое danger text glow. */
[data-bs-theme="dark"] .ap-drilldown-overlay__table td.ap-drilldown-overlay__cell--critical-age {
    text-shadow: 0 0 9px color-mix(in srgb, var(--dr-danger) 34%, transparent);
}

/* ── Summary icon tile: layered semantic surface (не flat circle) ── */
.ap-drilldown-overlay__card .ap-drilldown-overlay__card-icon {
    border: 1px solid color-mix(in srgb, var(--dr-primary) 22%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 10%, transparent),
        0 2px 8px color-mix(in srgb, var(--dr-sidebar-bg) 16%, transparent);
}

/* ── Summary: amount (amber/gold, coins) ── */
.ap-drilldown-overlay__card--amount {
    border-color: color-mix(in srgb, var(--dr-warning) 26%, var(--dr-border));
    background-color: color-mix(in srgb, var(--dr-warning) 5%, var(--dr-bg-card));
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--dr-warning) 9%, transparent) 0%, transparent 65%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 7%, transparent),
        0 1px 2px color-mix(in srgb, var(--dr-sidebar-bg) 16%, transparent),
        0 8px 20px color-mix(in srgb, var(--dr-warning) 12%, transparent);
}

.ap-drilldown-overlay__card--amount .ap-drilldown-overlay__card-icon {
    background: color-mix(in srgb, var(--dr-warning) 14%, transparent);
    border-color: color-mix(in srgb, var(--dr-warning) 32%, transparent);
    color: var(--dr-warning);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-warning) 20%, transparent),
        0 2px 10px color-mix(in srgb, var(--dr-warning) 22%, transparent);
}

/* ── Summary: count (warm/gold collection, НЕ зелёный) ── */
.ap-drilldown-overlay__card--count {
    border-color: color-mix(in srgb, var(--dr-warning) 18%, var(--dr-border));
    background-color: color-mix(in srgb, var(--dr-warning) 3%, var(--dr-bg-card));
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--dr-warning) 6%, transparent) 0%, transparent 65%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 6%, transparent),
        0 1px 2px color-mix(in srgb, var(--dr-sidebar-bg) 14%, transparent),
        0 6px 16px color-mix(in srgb, var(--dr-sidebar-bg) 13%, transparent);
}

.ap-drilldown-overlay__card--count .ap-drilldown-overlay__card-icon {
    background: color-mix(in srgb, var(--dr-warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--dr-warning) 24%, transparent);
    color: color-mix(in srgb, var(--dr-warning) 78%, var(--dr-text-main));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-warning) 16%, transparent),
        0 2px 8px color-mix(in srgb, var(--dr-warning) 15%, transparent);
}

/* ── Summary: share (danger/coral pie) ── */
.ap-drilldown-overlay__card--share {
    border-color: color-mix(in srgb, var(--dr-danger) 26%, var(--dr-border));
    background-color: color-mix(in srgb, var(--dr-danger) 5%, var(--dr-bg-card));
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--dr-danger) 9%, transparent) 0%, transparent 65%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 7%, transparent),
        0 1px 2px color-mix(in srgb, var(--dr-sidebar-bg) 16%, transparent),
        0 8px 20px color-mix(in srgb, var(--dr-danger) 12%, transparent);
}

.ap-drilldown-overlay__card--share .ap-drilldown-overlay__card-icon {
    background: color-mix(in srgb, var(--dr-danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--dr-danger) 32%, transparent);
    color: var(--dr-danger);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-danger) 20%, transparent),
        0 2px 10px color-mix(in srgb, var(--dr-danger) 22%, transparent);
}

/* ── Handle: primary/cyan tinted (размер/позиция не меняются) ── */
.ap-drilldown-overlay__handle {
    background: color-mix(in srgb, var(--dr-primary) 46%, var(--dr-text-muted-light));
}

.ap-drilldown-overlay:hover .ap-drilldown-overlay__handle {
    background: color-mix(in srgb, var(--dr-primary) 74%, var(--dr-text-muted-light));
    box-shadow: 0 0 10px color-mix(in srgb, var(--dr-primary) 34%, transparent);
}

/* ── Controls: luminous border + primary-tinted hover ── */
.ap-drilldown-overlay__control,
.ap-drilldown-overlay__search,
.ap-drilldown-overlay__pager-btn,
.ap-drilldown-overlay__action {
    border-color: color-mix(in srgb, var(--dr-border) 64%, var(--dr-text-muted-light) 36%);
}

.ap-drilldown-overlay__control:hover:not(:disabled),
.ap-drilldown-overlay__pager-btn:hover:not(:disabled),
.ap-drilldown-overlay__action:hover {
    border-color: color-mix(in srgb, var(--dr-primary) 50%, var(--dr-border));
    background: color-mix(in srgb, var(--dr-primary) 8%, var(--dr-bg-hover));
}

/* ── Chevron: cold accent → primary + glow на hover ── */
.ap-drilldown-overlay__cell--chevron {
    color: color-mix(in srgb, var(--dr-primary) 52%, var(--dr-text-muted-light));
}

.ap-drilldown-overlay__row:hover .ap-drilldown-overlay__cell--chevron {
    color: var(--dr-primary);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--dr-primary) 42%, transparent));
}

/* ── Status: translucent danger (не solid red) ── */
.ap-drilldown-overlay__badge--critical {
    background: color-mix(in srgb, var(--dr-danger) 16%, transparent);
    border-color: color-mix(in srgb, var(--dr-danger) 38%, transparent);
    color: var(--dr-danger);
}

/* ── Table rows: очень слабое layered separation + primary hover ── */
.ap-drilldown-overlay__table tbody tr td {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--dr-text-main) 2%, transparent) 0%, transparent 46%);
}

.ap-drilldown-overlay__row:hover td {
    background-color: color-mix(in srgb, var(--dr-primary) 9%, var(--dr-bg-hover));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dr-primary) 9%, transparent);
}

/* ── DARK: layered glass sheet + elevated surfaces ── */
[data-bs-theme="dark"] .ap-drilldown-overlay {
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--dr-primary) 13%, transparent) 0%, transparent 8%),
        linear-gradient(180deg, color-mix(in srgb, var(--dr-primary) 5%, var(--dr-bg-card)) 0%, var(--dr-bg-card) 30%);
    border-top-color: color-mix(in srgb, var(--dr-primary) 28%, var(--dr-border-light));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-primary) 22%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--dr-text-main) 4%, transparent),
        0 -8px 24px color-mix(in srgb, var(--dr-sidebar-bg) 55%, transparent),
        0 -30px 80px color-mix(in srgb, var(--dr-sidebar-bg) 72%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__topbar {
    background: color-mix(in srgb, var(--dr-primary) 6%, color-mix(in srgb, var(--dr-bg-main) 55%, var(--dr-bg-card)));
    border-top-color: color-mix(in srgb, var(--dr-primary) 16%, var(--dr-border-light));
}

[data-bs-theme="dark"] .ap-drilldown-overlay__body {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--dr-sidebar-bg) 16%, transparent) 0%, transparent 20%);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__card--amount {
    border-color: color-mix(in srgb, var(--dr-warning) 34%, var(--dr-border));
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--dr-warning) 14%, transparent) 0%, transparent 70%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-warning) 18%, transparent),
        0 2px 4px color-mix(in srgb, var(--dr-sidebar-bg) 55%, transparent),
        0 10px 26px color-mix(in srgb, var(--dr-warning) 16%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__card--count {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--dr-warning) 9%, transparent) 0%, transparent 70%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 7%, transparent),
        0 2px 4px color-mix(in srgb, var(--dr-sidebar-bg) 55%, transparent),
        0 8px 22px color-mix(in srgb, var(--dr-sidebar-bg) 40%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__card--share {
    border-color: color-mix(in srgb, var(--dr-danger) 34%, var(--dr-border));
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--dr-danger) 14%, transparent) 0%, transparent 70%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-danger) 18%, transparent),
        0 2px 4px color-mix(in srgb, var(--dr-sidebar-bg) 55%, transparent),
        0 10px 26px color-mix(in srgb, var(--dr-danger) 15%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__badge--critical {
    background: color-mix(in srgb, var(--dr-danger) 20%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--dr-danger) 24%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__badge--delayed {
    box-shadow: 0 0 8px color-mix(in srgb, var(--dr-warning) 16%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__table-wrap {
    border-color: color-mix(in srgb, var(--dr-primary) 14%, var(--dr-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 5%, transparent),
        0 2px 10px color-mix(in srgb, var(--dr-sidebar-bg) 45%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__table th {
    background: color-mix(in srgb, var(--dr-primary) 8%, var(--ap-dv-table-surface, var(--dr-bg-card)));
    border-bottom-color: color-mix(in srgb, var(--dr-border) 80%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 5%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__control,
[data-bs-theme="dark"] .ap-drilldown-overlay__search {
    border-color: color-mix(in srgb, var(--dr-primary) 24%, var(--dr-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 6%, transparent),
        0 1px 3px color-mix(in srgb, var(--dr-sidebar-bg) 45%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__control:hover:not(:disabled),
[data-bs-theme="dark"] .ap-drilldown-overlay__action:hover {
    border-color: color-mix(in srgb, var(--dr-primary) 55%, var(--dr-border));
    background: color-mix(in srgb, var(--dr-primary) 14%, var(--dr-bg-card));
    box-shadow: 0 0 12px color-mix(in srgb, var(--dr-primary) 20%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__control:disabled {
    opacity: 0.42;
    border-color: color-mix(in srgb, var(--dr-border) 60%, transparent);
    box-shadow: none;
}

[data-bs-theme="dark"] .ap-drilldown-overlay__action {
    border-color: color-mix(in srgb, var(--dr-primary) 20%, var(--dr-border));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 6%, transparent);
}

/* ── LIGHT: чистый, но не плоский (cool tint + semantic tints) ── */
[data-bs-theme="light"] .ap-drilldown-overlay__header,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__header {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--dr-primary) 4%, transparent) 0%, transparent 100%);
}

[data-bs-theme="light"] .ap-drilldown-overlay__handle,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__handle {
    background: color-mix(in srgb, var(--dr-primary) 26%, var(--dr-text-muted-light));
    box-shadow: none;
}

[data-bs-theme="light"] .ap-drilldown-overlay__card--amount,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__card--amount {
    background-color: color-mix(in srgb, var(--dr-warning) 6%, var(--dr-bg-card));
    border-color: color-mix(in srgb, var(--dr-warning) 22%, var(--dr-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 4%, transparent),
        0 1px 2px color-mix(in srgb, var(--dr-sidebar-bg) 8%, transparent),
        0 8px 18px color-mix(in srgb, var(--dr-warning) 14%, transparent);
}

[data-bs-theme="light"] .ap-drilldown-overlay__card--count,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__card--count {
    background-color: color-mix(in srgb, var(--dr-warning) 4%, var(--dr-bg-card));
    border-color: color-mix(in srgb, var(--dr-warning) 16%, var(--dr-border));
}

[data-bs-theme="light"] .ap-drilldown-overlay__card--share,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__card--share {
    background-color: color-mix(in srgb, var(--dr-danger) 5%, var(--dr-bg-card));
    border-color: color-mix(in srgb, var(--dr-danger) 22%, var(--dr-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 4%, transparent),
        0 1px 2px color-mix(in srgb, var(--dr-sidebar-bg) 8%, transparent),
        0 8px 18px color-mix(in srgb, var(--dr-danger) 12%, transparent);
}

[data-bs-theme="light"] .ap-drilldown-overlay__table-wrap,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__table-wrap {
    --ap-dv-table-surface: color-mix(in srgb, var(--dr-sidebar-bg) 6%, var(--dr-bg-card));
    border-color: color-mix(in srgb, var(--dr-border) 84%, var(--dr-sidebar-bg) 16%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 4%, transparent),
        0 1px 3px color-mix(in srgb, var(--dr-sidebar-bg) 9%, transparent);
}

[data-bs-theme="light"] .ap-drilldown-overlay__table th,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__table th {
    background: color-mix(in srgb, var(--dr-primary) 5%, var(--ap-dv-table-surface, var(--dr-bg-card)));
}

/* Responsive: overlay не выходит за viewport, controlled stacking. */
@media (max-width: 991.98px) {
    .ap-drilldown-overlay {
        height: 70vh;
        min-height: min(420px, 86vh);
    }

    .ap-drilldown-overlay__topbar {
        align-items: stretch;
    }

    .ap-drilldown-overlay__controls {
        width: 100%;
    }

    .ap-drilldown-overlay__search {
        flex: 1 1 auto;
    }

    .ap-drilldown-overlay__search-input {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .ap-drilldown-overlay {
        left: 0.25rem;
        right: 0.25rem;
        height: 78vh;
        min-height: 0;
    }

    .ap-drilldown-overlay__header {
        padding: 0.75rem 0.875rem 0.875rem;
    }

    .ap-drilldown-overlay__chips,
    .ap-drilldown-overlay__topbar,
    .ap-drilldown-overlay__body,
    .ap-drilldown-overlay__footer {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    .ap-drilldown-overlay__title {
        font-size: 1.0625rem;
    }
}

/* ═══════════════════════════════════════════════════════
   Sprint M4.4.3 — Overlay Interaction Mechanics
   normal / minimized / fullscreen + drag-resize за верхний handle.
   Визуал M4.4.2.x не переписывается: только состояния, геометрия, курсоры.
   ======================================================= */

/* Пользовательская (drag) высота normal-режима задаётся JS через
   --ap-dv-height. min-height: min(520px, 88vh) не даёт выйти ниже рабочего
   минимума, поэтому в resized-состоянии он снимается — нижняя граница
   контролируется JS-clamp'ом (35vh). */
.ap-drilldown-overlay--resized {
    min-height: 0;
}

/* ── Minimized: компактная полоса (~высота header, handle/title/controls) ── */
.ap-drilldown-overlay--minimized {
    height: auto;
    min-height: 0;
    max-height: none;
}

.ap-drilldown-overlay--minimized .ap-drilldown-overlay__chips,
.ap-drilldown-overlay--minimized .ap-drilldown-overlay__topbar,
.ap-drilldown-overlay--minimized .ap-drilldown-overlay__body,
.ap-drilldown-overlay--minimized .ap-drilldown-overlay__footer {
    display: none;
}

/* ── Fullscreen: максимум web-viewport, те же боковые отступы и скругления ── */
.ap-drilldown-overlay--fullscreen {
    top: 1.25rem;
    height: auto;
    min-height: 0;
    max-height: none;
}

/* Drag/resize в fullscreen не обещается. */
.ap-drilldown-overlay--fullscreen .ap-drilldown-overlay__handle,
.ap-drilldown-overlay--fullscreen .ap-drilldown-overlay__handle::before {
    cursor: default;
}

/* ── Активный drag: без transition высоты, без выделения текста ── */
.ap-drilldown-overlay.is-resizing {
    transition: none;
}

body.ap-drilldown-overlay-resizing {
    cursor: ns-resize;
    -webkit-user-select: none;
    user-select: none;
}

/* Responsive: состояния имеют приоритет над базовыми responsive-высотами. */
@media (max-width: 991.98px) {
    .ap-drilldown-overlay--fullscreen {
        top: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .ap-drilldown-overlay--fullscreen {
        top: 0.5rem;
    }
}

/* =====================================================
   Sprint M4.4.4 — Data View Search / Sorting / Pagination
   Минимальные состояния существующей композиции overlay.
   Только существующие --dr-* + производные color-mix().
   ===================================================== */

/* ── Sortable header (interaction state) ── */
.ap-drilldown-overlay__th--sortable {
    cursor: pointer;
    user-select: none;
}

.ap-drilldown-overlay__th--sortable:hover {
    color: var(--dr-text-main);
}

.ap-drilldown-overlay__th--sortable:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: -2px;
}

.ap-drilldown-overlay__th-label {
    vertical-align: middle;
}

/* DEMO.4A.3: пояснение универсальной колонки status (presentation-only hint). */
.ap-drilldown-overlay__th--hint .ap-drilldown-overlay__th-label {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

/* Активный direction — accent; неактивный — очень слабый нейтральный indicator. */
.ap-drilldown-overlay__sort-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 0.375rem;
    vertical-align: middle;
    font-size: 0.6875rem;
    color: var(--dr-primary);
}

.ap-drilldown-overlay__sort-icon.is-idle {
    opacity: 0.25;
    color: var(--dr-text-muted-light);
}

/* ── Working page-size control (existing compact control) ── */
select.ap-drilldown-overlay__page-size {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.25rem;
    cursor: pointer;
}

select.ap-drilldown-overlay__page-size:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--dr-primary) 42%, var(--dr-border));
    color: var(--dr-text-main);
}

select.ap-drilldown-overlay__page-size:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 2px;
}

select.ap-drilldown-overlay__page-size:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Lightweight loading state внутри table area (без full-page loader) ── */
.ap-drilldown-overlay__body {
    position: relative;
}

.ap-drilldown-overlay__body--loading::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--dr-text-muted-light) 40%, transparent);
    border-top-color: var(--dr-primary);
    border-radius: 50%;
    animation: ap-drilldown-spin 0.7s linear infinite;
    pointer-events: none;
}

@keyframes ap-drilldown-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ap-drilldown-overlay__body--loading::after {
        animation-duration: 1.6s;
    }
}

.ap-drilldown-overlay--loading .ap-drilldown-overlay__table-wrap {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

/* Pagination/sort/page-size временно не принимают повторные запросы. */
.ap-drilldown-overlay--loading .ap-drilldown-overlay__pager-btn,
.ap-drilldown-overlay--loading .ap-drilldown-overlay__th--sortable,
.ap-drilldown-overlay--loading .ap-drilldown-overlay__page-size {
    pointer-events: none;
}

/* ── Inline error повторного запроса (rows/summary сохраняются) ── */
.ap-drilldown-overlay__inline-error {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--dr-danger) 32%, var(--dr-border));
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--dr-danger) 8%, transparent);
    color: var(--dr-danger);
    font-size: 0.8125rem;
}

.ap-drilldown-overlay__inline-error.ap-hidden {
    display: none;
}

/* ────────────────────────────────────────────────────────────────
   Sprint M4.4.5 — Data View Column Selection (presentation-only)
   Компактный popover выбора колонок: только --dr-* tokens + color-mix().
   Утверждённая геометрия overlay/table/summary не изменяется.
   ──────────────────────────────────────────────────────────────── */

.ap-drilldown-overlay__control-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ap-drilldown-overlay__columns-menu {
    position: absolute;
    top: calc(100% + 0.4375rem);
    right: 0;
    z-index: 30;
    min-width: 13.5rem;
    max-width: 18rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.625rem;
    border: 1px solid color-mix(in srgb, var(--dr-border) 70%, var(--dr-text-muted-light) 30%);
    border-radius: 0.75rem;
    background: var(--dr-bg-card);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dr-primary) 4%, transparent) 0%,
        transparent 62%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 6%, transparent),
        0 3px 8px color-mix(in srgb, var(--dr-sidebar-bg) 16%, transparent),
        0 14px 32px color-mix(in srgb, var(--dr-sidebar-bg) 26%, transparent);
    backdrop-filter: blur(6px) saturate(1.05);
    animation: ap-drilldown-columns-in 0.14s ease;
}

/* Fallback без backdrop-filter: та же surface, без стекла. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ap-drilldown-overlay__columns-menu {
        background: var(--dr-bg-card);
    }
}

@keyframes ap-drilldown-columns-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-drilldown-overlay__columns-menu {
        animation: none;
    }
}

.ap-drilldown-overlay__columns-menu[hidden],
.ap-drilldown-overlay__columns-menu.ap-hidden {
    display: none;
}

.ap-drilldown-overlay__columns-title {
    margin: 0 0 0.5rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dr-text-muted-light);
}

.ap-drilldown-overlay__columns-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-drilldown-overlay__columns-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-drilldown-overlay__columns-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--dr-text-main);
    transition: background 0.15s ease, color 0.15s ease;
}

.ap-drilldown-overlay__columns-label:hover {
    background: var(--dr-bg-hover);
}

/* Required: checked + disabled, визуально отличается от обычного пункта. */
.ap-drilldown-overlay__columns-item--required .ap-drilldown-overlay__columns-label {
    cursor: default;
    color: var(--dr-text-muted);
}

.ap-drilldown-overlay__columns-item--required .ap-drilldown-overlay__columns-label:hover {
    background: transparent;
}

.ap-drilldown-overlay__columns-check {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--dr-primary);
    cursor: pointer;
}

.ap-drilldown-overlay__columns-check:disabled {
    opacity: 0.75;
    cursor: default;
}

.ap-drilldown-overlay__columns-check:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 2px;
}

.ap-drilldown-overlay__columns-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-drilldown-overlay__columns-lock {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: color-mix(in srgb, var(--dr-primary) 62%, var(--dr-text-muted-light));
    font-size: 0.6875rem;
}

.ap-drilldown-overlay__columns-reset {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.4375rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--dr-border) 74%, var(--dr-text-muted-light) 26%);
    border-radius: 0.5rem;
    background: var(--dr-bg-main);
    color: var(--dr-text-main);
    font-size: 0.8125rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ap-drilldown-overlay__columns-reset:hover {
    background: var(--dr-bg-hover);
    border-color: color-mix(in srgb, var(--dr-primary) 44%, var(--dr-border));
}

.ap-drilldown-overlay__columns-reset:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 2px;
}

/* ── Dark: layered glass surface + primary tint ── */
[data-bs-theme="dark"] .ap-drilldown-overlay__columns-menu {
    background-color: color-mix(in srgb, var(--dr-bg-main) 42%, var(--dr-bg-card));
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dr-text-main) 5%, transparent) 0%,
        transparent 60%
    );
    border-color: color-mix(in srgb, var(--dr-primary) 24%, var(--dr-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 8%, transparent),
        0 16px 36px color-mix(in srgb, var(--dr-sidebar-bg) 42%, transparent);
}

[data-bs-theme="dark"] .ap-drilldown-overlay__columns-reset {
    background: color-mix(in srgb, var(--dr-primary) 7%, var(--dr-bg-main));
    border-color: color-mix(in srgb, var(--dr-primary) 20%, var(--dr-border));
}

/* ── Light: чистый, но не плоский (cool tint) ── */
[data-bs-theme="light"] .ap-drilldown-overlay__columns-menu,
:root:not([data-bs-theme="dark"]) .ap-drilldown-overlay__columns-menu {
    background-color: color-mix(in srgb, var(--dr-primary) 2%, var(--dr-bg-card));
}

/* На узких экранах popover остаётся внутри overlay. */
@media (max-width: 575.98px) {
    .ap-drilldown-overlay__columns-menu {
        right: auto;
        left: 0;
        min-width: 12rem;
        max-width: calc(100vw - 3rem);
    }
}

/* ═══════════════════════════════════════════════════════
   Sprint M4.5.2 — Unified Object Card (Right Overlay Shell)
   Только оболочка: container / header / body / close /
   loading / error / responsive width / shadow.
   Содержимое карточки (subject-specific HTML) здесь НЕ стилизуется.
   Data View не перекрывается: карточка выше него, но dashboard
   и Data View остаются видимыми (второй fullscreen backdrop не создаётся).
   Все цвета — через существующие var(--dr-*) tokens (light/dark).
   ======================================================= */

.ap-object-card {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045; /* выше Data View (1040), ниже Bootstrap modal */
    display: flex;
    flex-direction: column;
    /* M4.6.2: широкая карточка (~половина desktop viewport) вместо узкого drawer. */
    width: clamp(380px, 50vw, 960px);
    max-width: calc(100vw - 0.75rem);
    margin: 0.75rem 0.75rem 0.75rem 0;
    background-color: var(--dr-bg-card);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dr-primary) 5%, var(--dr-bg-card)) 0%,
        var(--dr-bg-card) 30%
    );
    border: 1px solid color-mix(in srgb, var(--dr-border) 82%, var(--dr-sidebar-bg) 18%);
    border-radius: 1rem;
    color: var(--dr-text-main);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dr-text-main) 6%, transparent),
        -6px 0 18px color-mix(in srgb, var(--dr-sidebar-bg) 22%, transparent),
        -18px 0 48px color-mix(in srgb, var(--dr-sidebar-bg) 34%, transparent);
    overflow: hidden;
    animation: ap-object-card-in 0.2s ease;
}

@keyframes ap-object-card-in {
    from {
        transform: translateX(18px);
        opacity: 0.5;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-object-card {
        animation: none;
    }
}

.ap-object-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid color-mix(in srgb, var(--dr-border) 78%, var(--dr-sidebar-bg) 22%);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dr-primary) 4%, transparent) 0%,
        transparent 100%
    );
}

.ap-object-card__title {
    margin: 0;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dr-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-object-card__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--dr-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ap-object-card__close:hover {
    background: var(--dr-bg-hover);
    border-color: color-mix(in srgb, var(--dr-border) 74%, var(--dr-text-muted-light) 26%);
    color: var(--dr-text-main);
}

.ap-object-card__close:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 2px;
}

.ap-object-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 0.875rem 1.25rem;
}

.ap-object-card__state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--dr-text-muted);
}

.ap-object-card__state--error {
    color: var(--dr-danger);
}

.ap-object-card__content {
    font-size: 0.875rem;
    color: var(--dr-text-main);
}

/* На узком viewport карточка занимает почти всю ширину. */
@media (max-width: 575.98px) {
    .ap-object-card {
        top: 0.25rem;
        right: 0.25rem;
        bottom: 0.25rem;
        left: 0.25rem;
        width: auto;
        max-width: none;
        margin: 0;
        border-radius: 0.875rem;
    }
}

/* ─── Sprint M4.5.3A: Deal Object Card — identity/base-data ───
   Только скелет первой карточки (название/ID/сумма/воронка/этап/
   ответственный). Без tabs/gauge/timeline/reasons. Светлая/тёмная тема
   через существующие --dr-*. */
.ap-deal-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.ap-deal-card__identity {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ap-deal-card__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

.ap-deal-card__id {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--dr-text-muted);
}

.ap-deal-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
}

.ap-deal-card__fact {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    background: var(--dr-bg-main);
    border: 1px solid var(--dr-border-light);
    border-radius: 0.5rem;
}

.ap-deal-card__fact-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--dr-text-muted);
}

.ap-deal-card__fact-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

.ap-deal-card__fact-value--amount {
    font-variant-numeric: tabular-nums;
}

.ap-deal-card__pipeline {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dr-border);
}

.ap-deal-card__pipeline-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--dr-text-muted);
}

.ap-deal-card__pipeline-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

/* ─── Sprint M4.5.3B: Deal Object Card — stage analytical state ───
   Простой блок состояния этапа (status pill + age/P50/P75/P90).
   Без timeline/progress bar/маркеров. Semantic pills — только
   существующие --dr-* токены (danger/warning/success/neutral). */
.ap-deal-card__state {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dr-border);
}

.ap-deal-card__state-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ap-deal-card__state-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--dr-text-muted);
}

.ap-deal-card__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.ap-deal-card__pill--critical {
    background: var(--dr-danger-soft);
    color: var(--dr-danger);
}

.ap-deal-card__pill--delayed {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

.ap-deal-card__pill--normal {
    background: var(--dr-success-soft);
    color: var(--dr-success);
}

.ap-deal-card__pill--unavailable {
    background: var(--dr-bg-main);
    color: var(--dr-text-muted);
    border: 1px solid var(--dr-border-light);
}

.ap-deal-card__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.ap-deal-card__metric {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    background: var(--dr-bg-main);
    border: 1px solid var(--dr-border-light);
    border-radius: 0.5rem;
}

.ap-deal-card__metric-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--dr-text-muted);
}

.ap-deal-card__metric-value {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--dr-text-main);
}

/* ─── Sprint M4.5.3C: Deal Object Card — attention reasons ───
   Компактный диагностический warning-style block (простой список причин).
   Без severity scoring, отдельных больших карточек, icons, CTA,
   recommendation buttons/timeline. Светлая/тёмная тема — только
   существующие --dr-* токены. */
.ap-deal-card__attention {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    background: var(--dr-warning-soft);
    border: 1px solid var(--dr-border-light);
    border-radius: 0.5rem;
}

.ap-deal-card__attention-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--dr-warning);
}

.ap-deal-card__attention-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding-left: 1rem;
    list-style: disc;
}

.ap-deal-card__attention-item {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

/* ─── Sprint M4.6.2: Deal Card Shell & Summary Layout ───
   Верх body: «Ключевая информация» | «Health Score» (desktop — 2 колонки,
   узкий viewport — 1 колонка). Identity (name/ID) здесь отсутствует: она
   в shell header. Только существующие --dr-* tokens (+ color-mix()):
   light/dark без отдельной копии layout. */
.ap-deal-card__summary {
    --ap-deal-surface: color-mix(in srgb, var(--dr-bg-main) 55%, var(--dr-bg-card));

    display: grid;
    /* M4.6.2a: пропорция prototype — Key Info заметно шире Health (~65/35). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    /* M4.7: высота секций определяется содержимым — никакого искусственного
       stretch, растягивающего короткую карточку до самой высокой. */
    align-items: start;
}

.ap-deal-card__key,
.ap-deal-card__health {
    display: flex;
    flex-direction: column;
    /* M4.6.2a: компактные вертикальные интервалы вместо разреженной таблицы. */
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    background: var(--ap-deal-surface);
    border: 1px solid var(--dr-border-light);
    border-radius: 0.75rem;
}

.ap-deal-card__section-title {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dr-text-muted);
}

/* ─── Ключевая информация: компактная info grid (M4.6.2a) ───
   Не вертикальная таблица и не четыре KPI-плитки: маленькая contextual icon,
   muted label и значение под label; разделение — только spacing, без рамок. */
.ap-deal-card__info {
    display: grid;
    /* M4.7: 6 компактных элементов — 3 колонки × 2 строки (prototype), НЕ 2×3. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.875rem;
    margin: 0;
}

.ap-deal-card__info-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.4375rem;
    min-width: 0;
}

.ap-deal-card__info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 auto;
    border-radius: 0.375rem;
    background: color-mix(in srgb, var(--dr-text-muted-light) 16%, transparent);
    color: var(--dr-text-muted);
    font-size: 0.75rem;
    line-height: 1;
}

.ap-deal-card__info-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.ap-deal-card__info-label {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

.ap-deal-card__info-value {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

.ap-deal-card__info-value--amount {
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

/* M4.10B: клиентский контекст — компания основной строкой, контакт small-строкой.
   Значения уже escaping-нуты view; здесь только presentation. */
.ap-deal-card__info-value-company {
    display: block;
}

.ap-deal-card__info-value-contact {
    display: block;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}

/* ─── Health Score: компактный CSS-only gauge/ring + canonical status ─── */
.ap-deal-card__gauge {
    --ap-health-value: 0%;
    --ap-health-accent: var(--dr-text-muted);

    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.ap-deal-card__gauge-ring {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: conic-gradient(
        var(--ap-health-accent) 0 var(--ap-health-value),
        var(--dr-border) var(--ap-health-value) 100%
    );
}

.ap-deal-card__gauge-ring::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--ap-deal-surface);
}

.ap-deal-card__gauge-center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ap-deal-card__gauge-score {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--dr-text-main);
}

.ap-deal-card__gauge-unit {
    margin-top: 0.125rem;
    font-size: 0.625rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__gauge-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* Canonical Health status → accent (без пересчёта из score). */
.ap-deal-card__gauge--normal { --ap-health-accent: var(--dr-success); }
.ap-deal-card__gauge--delayed { --ap-health-accent: var(--dr-warning); }
.ap-deal-card__gauge--critical { --ap-health-accent: var(--dr-danger); }
.ap-deal-card__gauge--unavailable { --ap-health-accent: var(--dr-text-muted-light); }

/* ─── Health top: compact gauge + canonical status рядом (M4.6.2a) ───
   Gauge остаётся CSS-only и не увеличивается; status не расходится по площади. */
.ap-deal-card__health-top {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

/* ─── Health factors: компактная сетка 2×2 (canonical H8 values) ───
   Без горизонтальных строк на всю ширину и без individual card-рамок. */
.ap-deal-card__factors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.875rem;
    margin: 0;
}

.ap-deal-card__factor {
    display: flex;
    flex-direction: row;
    gap: 0.0625rem;
    min-width: 0;
}

.ap-deal-card__factor-label {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

.ap-deal-card__factor-score {
    margin: 0 0 0 5px;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--dr-text-main);
}

/* ─── Primary Health reason: canonical code → presentation label (M4.6.2a) ───
   Показывается только при наличии canonical primaryReason; никаких новых
   вычислений и никаких «отклонений» (семантика/единицы reason codes разные). */
.ap-deal-card__reason {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    margin-top: 0.125rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--dr-border-light);
}

.ap-deal-card__reason-label {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

.ap-deal-card__reason-value {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

/* Средняя ширина: ~60/40 — Key Info остаётся шире, grid'ы читаемы. */
@media (max-width: 1099.98px) {
    .ap-deal-card__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Узкий viewport: одна колонка вместо двух; Key Info перестраивается. */
@media (max-width: 767.98px) {
    .ap-deal-card__summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-deal-card__info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: Health/factors и Key Info без horizontal overflow. */
@media (max-width: 479.98px) {
    .ap-deal-card__info {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-deal-card__factors {
        gap: 0.4375rem 0.625rem;
    }
}

/* ─── Sprint M4.7: shell status metadata (presentation-neutral) ───
   Оболочка отображает только полученные label/tone и не знает ни один
   subject/status enum. Цвета — существующие --dr-* tokens. */
.ap-object-card__status {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--dr-border-light);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.ap-object-card__status--positive {
    background: var(--dr-success-soft);
    color: var(--dr-success);
}

.ap-object-card__status--warning {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

.ap-object-card__status--danger {
    background: var(--dr-danger-soft);
    color: var(--dr-danger);
}

.ap-object-card__status--neutral {
    background: var(--dr-bg-main);
    color: var(--dr-text-muted);
}

/* ─── Sprint M4.7: prototype density надстройки (Health остаётся компактным) ─── */
.ap-deal-card__health-top {
    gap: 0.625rem;
}

.ap-deal-card__gauge-ring {
    width: 68px;
    height: 68px;
}

.ap-deal-card__gauge-ring::after {
    inset: 7px;
}

.ap-deal-card__gauge-score {
    font-size: 1.25rem;
}

/* Factors не доминируют: компактнее, чем основной summary. */
.ap-deal-card__factors {
    gap: 0.375rem 0.875rem;
}

.ap-deal-card__factor-score {
    font-size: 0.875rem;
}

/* Primary reason идёт непосредственно под canonical status (без отдельной рамки). */
.ap-deal-card__reason {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ─── Sprint M4.7: Deal Stage Path (canonical H4.7 visits) ───
   Horizontal timeline: каждое посещение — отдельный chip; между ними стрелки
   направления (forward/backward). Long history не сжимается: controlled
   horizontal overflow только внутри секции (Object Card и drawer не расширяются).
   Никаких table/vertical-list/Bootstrap steps/generic progress bar. */
.ap-deal-card__path {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    background: var(--ap-deal-surface, color-mix(in srgb, var(--dr-bg-main) 55%, var(--dr-bg-card)));
    border: 1px solid var(--dr-border-light);
    border-radius: 0.75rem;
}

.ap-deal-card__path-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ap-deal-card__path-scroll {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.25rem;
}

.ap-deal-card__path-track {
    display: flex;
    align-items: stretch;
    gap: 0.375rem;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-deal-card__path-visit {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 8.5rem;
    max-width: 12rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--dr-border-light);
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--dr-bg-card) 70%, transparent);
}

.ap-deal-card__path-chip {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dr-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-deal-card__path-duration {
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dr-text-main);
}

.ap-deal-card__path-dates {
    font-size: 0.6875rem;
    color: var(--dr-text-muted);
    white-space: nowrap;
}

.ap-deal-card__path-visit--done {
    opacity: 0.92;
}

/* Current visit — явное ring/highlight по canonical current stage. */
.ap-deal-card__path-visit--current {
    border-color: var(--dr-primary);
    background: color-mix(in srgb, var(--dr-primary) 8%, var(--dr-bg-card));
    box-shadow: 0 0 0 1px var(--dr-primary);
}

/* Returned/backward-переход визуально отличается от forward. */
.ap-deal-card__path-visit--returned {
    border-color: var(--dr-warning);
    background: color-mix(in srgb, var(--dr-warning) 8%, var(--dr-bg-card));
}

.ap-deal-card__path-arrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    font-size: 0.875rem;
    color: var(--dr-text-muted-light);
}

.ap-deal-card__path-arrow--forward {
    color: var(--dr-success);
}

.ap-deal-card__path-arrow--backward {
    color: var(--dr-warning);
}

.ap-deal-card__path-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    font-size: 0.6875rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ap-deal-card__legend-item--forward .bi {
    color: var(--dr-success);
}

.ap-deal-card__legend-item--backward .bi {
    color: var(--dr-warning);
}

.ap-deal-card__legend-item--current .bi {
    color: var(--dr-primary);
}

/* ─── Sprint M4.8: Deal Intelligence Card — Progress & Activity + Why Attention ───
   Один ряд сразу после Stage Path: desktop — 2 колонки ~50/50, узкий viewport —
   вертикально. Обе cards используют ту же surface/border/radius family, что Key
   Info / Health / Stage Path. Цвет Why Attention — только semantic accent
   (marker/title/небольшой border), без большой warning-заливки. Новые
   theme-specific цвета не вводятся: только существующие --dr-* tokens. */
.deal-insight-progress-attention {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.875rem;
    align-items: stretch;
    min-width: 0;
}

.ap-deal-card__panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.875rem 0.9375rem;
    background: var(--ap-deal-surface, color-mix(in srgb, var(--dr-bg-main) 55%, var(--dr-bg-card)));
    border: 1px solid var(--dr-border-light);
    border-radius: 0.75rem;
}

/* Progress & Activity — визуально спокойный informational block. */
.ap-deal-card__pa-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

.ap-deal-card__pa-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.5rem;
}

.ap-deal-card__pa-label {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-value {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3125rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dr-text-main);
}

.ap-deal-card__pa-value--forward .bi {
    color: var(--dr-success);
}

.ap-deal-card__pa-value--backward .bi {
    color: var(--dr-warning);
}

.ap-deal-card__pa-stage {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-deal-card__pa-meta,
.ap-deal-card__pa-muted {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--dr-border-light);
}

.ap-deal-card__pa-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-count b {
    font-variant-numeric: tabular-nums;
    color: var(--dr-text-main);
}

.ap-deal-card__pa-count .bi {
    color: var(--dr-text-muted-light);
}

.ap-deal-card__pa-note {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    margin: 0;
    padding-top: 0.375rem;
    border-top: 1px solid var(--dr-border-light);
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-note strong {
    font-weight: 600;
    color: var(--dr-text-main);
}

/* Why Attention — цвет только как semantic accent (marker), без заливки. */
.ap-deal-card__wa-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-deal-card__wa-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.4375rem;
    min-width: 0;
}

.ap-deal-card__wa-marker {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.3125rem;
    border-radius: 50%;
    background: var(--dr-text-muted-light);
}

.ap-deal-card__wa-item--attention .ap-deal-card__wa-marker {
    background: var(--dr-warning);
}

.ap-deal-card__wa-item--serious .ap-deal-card__wa-marker {
    background: var(--dr-danger);
}

.ap-deal-card__wa-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.ap-deal-card__wa-title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

.ap-deal-card__wa-desc {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--dr-text-muted);
    overflow-wrap: anywhere;
}

.ap-deal-card__wa-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
}

/* Mobile/narrow: колонки складываются вертикально. */
@media (max-width: 767.98px) {
    .deal-insight-progress-attention {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── Sprint M4.9: Deal Intelligence Card — Next Steps + Recent Actions ───
   Один ряд после Progress & Activity: desktop — 2 колонки ~50/50, узкий
   viewport — вертикально. Оба panel используют ту же surface/border/radius
   family (`.ap-deal-card__panel`) и существующие --dr-* tokens; отдельные
   light/dark палитры не вводятся. */
.deal-insight-next-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.875rem;
    align-items: stretch;
    min-width: 0;
}

/* Next Steps — компактный operational block; accent только semantic. */
.ap-deal-card__next-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--dr-text-main);
    background: var(--dr-bg-main);
}

.ap-deal-card__next-status--overdue {
    background: var(--dr-danger-soft);
    color: var(--dr-danger);
}

.ap-deal-card__next-status--upcoming {
    background: var(--dr-success-soft);
    color: var(--dr-success);
}

.ap-deal-card__next-status--unscheduled {
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

.ap-deal-card__next-task {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

.ap-deal-card__next-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
}

.ap-deal-card__next-due {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dr-text-muted);
    font-variant-numeric: tabular-nums;
}

.ap-deal-card__next-resp {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__next-resp .bi {
    color: var(--dr-text-muted-light);
}

.ap-deal-card__next-empty,
.ap-deal-card__recent-empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
}

/* Recent Actions — компактный хронологический список (newest-first). */
.ap-deal-card__recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-deal-card__recent-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.4375rem;
    min-width: 0;
}

.ap-deal-card__recent-marker {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.3125rem;
    border-radius: 50%;
    background: var(--dr-text-muted-light);
}

.ap-deal-card__recent-item--communication .ap-deal-card__recent-marker {
    background: var(--dr-primary);
}

.ap-deal-card__recent-item--stage .ap-deal-card__recent-marker {
    background: var(--dr-success);
}

.ap-deal-card__recent-item--task .ap-deal-card__recent-marker {
    background: var(--dr-warning);
}

.ap-deal-card__recent-text {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.ap-deal-card__recent-title {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

.ap-deal-card__recent-meta {
    font-size: 0.6875rem;
    color: var(--dr-text-muted);
}

/* M4.9: header action оболочки (subject-neutral: только переданные label/url). */
.ap-object-card__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border: 1px solid color-mix(in srgb, var(--dr-border) 74%, var(--dr-text-muted-light) 26%);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dr-text-main);
    background: transparent;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ap-object-card__action:hover {
    background: var(--dr-bg-hover);
    color: var(--dr-text-main);
    text-decoration: none;
}

.ap-object-card__action:focus-visible {
    outline: 2px solid var(--dr-primary);
    outline-offset: 2px;
}

/* Mobile/narrow: Next Steps / Recent Actions складываются вертикально. */
@media (max-width: 767.98px) {
    .deal-insight-next-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─── Deal Intelligence Card — Visual pass V1: geometry ─── */

@media (min-width: 1100px) {
    .ap-object-card {
        width: min(59vw, 1140px);
        max-width: calc(100vw - 1.5rem);
    }
}

.ap-object-card__header {
    min-height: 56px;
    padding: 0.875rem 1.125rem;
    gap: 0.75rem;
}

.ap-object-card__title {
    font-size: 1rem;
    font-weight: 700;
}

.ap-object-card__body {
    padding: 1rem 1.125rem 1.375rem;
}

.ap-object-card__content {
    font-size: 0.9375rem;
}

.ap-deal-card {
    gap: 1rem;
}

.ap-deal-card__summary {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr);
    gap: 1rem;
}

.ap-deal-card__key,
.ap-deal-card__health,
.ap-deal-card__path,
.ap-deal-card__panel {
    padding: 0.875rem 1rem;
}

.ap-deal-card__section-title {
    font-size: 0.75rem;
    line-height: 1.35;
}

.ap-deal-card__info {
    gap: 0.75rem 1rem;
}

.ap-deal-card__info-label,
.ap-deal-card__factor-label {
    font-size: 0.75rem;
}

.ap-deal-card__info-value {
    font-size: 0.9375rem;
}

.ap-deal-card__info-value--amount {
    font-size: 1rem;
}


/* ─── Deal Intelligence Card — Visual pass V2: Key Info + Health ─── */

.ap-deal-card__key,
.ap-deal-card__health {
    min-height: 100%;
    gap: 0.75rem;
}

/* Key Info */

.ap-deal-card__info {
    flex: 1;
    align-content: space-between;
    gap: 0.875rem 1.25rem;
}

.ap-deal-card__info-item {
    align-items: center;
    gap: 0.625rem;
}

.ap-deal-card__info-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.ap-deal-card__info-text {
    gap: 0.125rem;
}

.ap-deal-card__info-label {
    font-size: 0.6875rem;
}

.ap-deal-card__info-value {
    font-size: 0.9375rem;
    font-weight: 600;
}

.ap-deal-card__info-value--amount {
    font-size: 1rem;
    font-weight: 700;
}

/* Semantic icon accents */

.ap-deal-card__info-item--amount .ap-deal-card__info-icon {
    color: var(--dr-warning);
    background: color-mix(in srgb, var(--dr-warning) 14%, transparent);
}

.ap-deal-card__info-item--manager .ap-deal-card__info-icon {
    color: var(--dr-primary);
    background: color-mix(in srgb, var(--dr-primary) 14%, transparent);
}

.ap-deal-card__info-item--client .ap-deal-card__info-icon {
    color: var(--dr-primary);
    background: color-mix(in srgb, var(--dr-primary) 14%, transparent);
}

.ap-deal-card__info-item--created .ap-deal-card__info-icon,
.ap-deal-card__info-item--planned .ap-deal-card__info-icon {
    color: var(--dr-text-muted);
    background: color-mix(in srgb, var(--dr-text-muted-light) 14%, transparent);
}

.ap-deal-card__info-item--stage .ap-deal-card__info-icon {
    color: var(--dr-warning);
    background: color-mix(in srgb, var(--dr-warning) 14%, transparent);
}

/* Health */

.ap-deal-card__health-top {
    gap: 1rem;
    align-items: center;
}

.ap-deal-card__gauge-ring {
    width: 86px;
    height: 86px;
}

.ap-deal-card__gauge-ring::after {
    inset: 8px;
}

.ap-deal-card__gauge-score {
    font-size: 1.625rem;
    font-weight: 700;
}

.ap-deal-card__gauge-unit {
    font-size: 0.625rem;
}

.ap-deal-card__gauge-meta {
    flex: 1;
    gap: 0.375rem;
}

.ap-deal-card__gauge-meta .ap-deal-card__pill {
    align-self: flex-start;
}

.ap-deal-card__reason {
    gap: 0.125rem;
}

.ap-deal-card__reason-label {
    font-size: 0.6875rem;
}

.ap-deal-card__reason-value {
    font-size: 0.875rem;
    line-height: 1.3;
}

.ap-deal-card__factors {
    margin-top: auto;
    padding-top: 0.625rem;
    border-top: 1px solid var(--dr-border-light);
    gap: 0.5rem 1rem;
}

.ap-deal-card__factor {
    gap: 0.125rem;
}

.ap-deal-card__factor-score {
    font-size: 1rem;
    font-weight: 700;
}















/* ─── Deal Intelligence Card — Visual pass V3: Stage Path ─── */

.ap-deal-card__path {
    gap: 0.75rem;
    padding: 0.875rem 1rem;
}

.ap-deal-card__path-scroll {
    min-width: 0;
    overflow: hidden;
    padding: 0.125rem 0 0.25rem;
}

.ap-deal-card__path-track {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ─── Stage node ─── */

.ap-deal-card__path-visit {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    max-width: none;
    padding: 0 0 0.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
}

/* Название этапа */

.ap-deal-card__path-chip {
    order: 1;
    display: block;
    max-width: calc(100% - 1rem);
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--dr-primary) 45%, var(--dr-border-light));
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--dr-primary) 14%, var(--dr-bg-card));
    color: var(--dr-text-main);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Кружок этапа — центр timeline */

.ap-deal-card__path-visit::before {
    content: '';
    order: 2;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    margin-top: 0.65rem;
    border: 2px solid var(--dr-primary);
    border-radius: 50%;
    background: var(--ap-deal-surface);
    box-shadow:
            0 0 0 3px color-mix(in srgb, var(--dr-primary) 13%, transparent),
            0 0 8px color-mix(in srgb, var(--dr-primary) 22%, transparent);
}

/* ─── Duration / dates ─── */

.ap-deal-card__path-duration {
    order: 3;
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--dr-text-main);
}

.ap-deal-card__path-dates {
    order: 4;
    margin-top: 0.15rem;
    font-size: 0.625rem;
    line-height: 1.2;
    color: var(--dr-text-muted);
    white-space: nowrap;
}

/* ─── Connector / movement pulse ─── */

.ap-deal-card__path-arrow {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    align-self: flex-start;
    min-width: 2rem;
    height: 12px;
    margin: 2.55rem -2.5rem 0;
    color: var(--dr-primary);
    font-size: 0;
}

.ap-deal-card__path-arrow::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
            90deg,
            color-mix(in srgb, currentColor 35%, transparent) 0%,
            currentColor 20%,
            currentColor 80%,
            color-mix(in srgb, currentColor 35%, transparent) 100%
    );
    box-shadow: 0 0 5px color-mix(in srgb, currentColor 25%, transparent);
}

.ap-deal-card__path-arrow .bi {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--ap-deal-surface);
    color: currentColor;
    font-size: 1rem;
    line-height: 1;
}

.ap-deal-card__path-arrow--forward {
    color: var(--dr-primary);
}

.ap-deal-card__path-arrow--backward {
    color: var(--dr-warning);
}

.ap-deal-card__path-arrow--same {
    color: var(--dr-text-muted-light);
}

/* ─── Returned stage ─── */

.ap-deal-card__path-visit--returned {
    border: 0;
    background: transparent;
}

.ap-deal-card__path-visit--returned .ap-deal-card__path-chip {
    border-color: color-mix(in srgb, var(--dr-warning) 55%, var(--dr-border-light));
    background: color-mix(in srgb, var(--dr-warning) 14%, var(--dr-bg-card));
}

.ap-deal-card__path-visit--returned::before {
    border-color: var(--dr-warning);
    box-shadow:
            0 0 0 3px color-mix(in srgb, var(--dr-warning) 13%, transparent),
            0 0 8px color-mix(in srgb, var(--dr-warning) 22%, transparent);
}

/* ─── Current stage ─── */

.ap-deal-card__path-visit--current {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ap-deal-card__path-visit--current .ap-deal-card__path-chip {
    border-color: var(--dr-primary);
    background: color-mix(in srgb, var(--dr-primary) 20%, var(--dr-bg-card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dr-primary) 30%, transparent);
}

.ap-deal-card__path-visit--current::before {
    background: var(--dr-primary);
    border-color: var(--dr-primary);
    box-shadow:
            0 0 0 6px color-mix(in srgb, var(--dr-primary) 25%, transparent),
            0 0 10px color-mix(in srgb, var(--dr-primary) 30%, transparent);
}

/* ─── Legend ─── */

.ap-deal-card__path-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    padding-top: 0.125rem;
    font-size: 0.6875rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ap-deal-card__legend-item--forward .bi {
    color: var(--dr-primary);
}

.ap-deal-card__legend-item--backward .bi {
    color: var(--dr-warning);
}

.ap-deal-card__legend-item--current .bi {
    color: var(--dr-primary);
}













/* ─── Deal Intelligence Card — Visual pass V4: Operational blocks ─── */

/* Общая геометрия двух нижних рядов */

.deal-insight-progress-attention,
.deal-insight-next-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.875rem;
    align-items: stretch;
    min-width: 0;
}

.ap-deal-card__panel {
    gap: 0.7rem;
    min-width: 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--dr-border-light);
    border-radius: 0.75rem;
    background: var(--ap-deal-surface, color-mix(in srgb, var(--dr-bg-main) 55%, var(--dr-bg-card)));
}


/* ═══════════════════════════════════════
   PROGRESS & ACTIVITY
   ═══════════════════════════════════════ */

.ap-deal-card__pa-rows {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 0.5rem;
}

.ap-deal-card__pa-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.625rem 0.7rem 0.625rem 2.6rem;
    border: 1px solid color-mix(in srgb, var(--dr-border-light) 75%, transparent);
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--dr-bg-main) 32%, transparent);
}

/* Visual event icon */

.ap-deal-card__pa-row::before {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    transform: translateY(-50%);
    border-radius: 0.4rem;
    font-family: "bootstrap-icons";
    font-size: 0.75rem;
    font-weight: 400;
}

.ap-deal-card__pa-row:first-child::before {
    content: "\f138";
    color: var(--dr-success);
    background: var(--dr-success-soft);
}

.ap-deal-card__pa-row:nth-child(2)::before {
    content: "\f4e7";
    color: var(--dr-primary);
    background: color-mix(in srgb, var(--dr-primary) 13%, transparent);
}

.ap-deal-card__pa-label {
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-value {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    max-width: 100%;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--dr-text-main);
}

.ap-deal-card__pa-stage {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-deal-card__pa-meta,
.ap-deal-card__pa-muted {
    font-size: 0.6875rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-value--forward .bi {
    color: var(--dr-success);
}

.ap-deal-card__pa-value--backward .bi {
    color: var(--dr-warning);
}


/* Forward / Backward counters */

.ap-deal-card__pa-counts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0;
    border: 0;
}

.ap-deal-card__pa-count {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--dr-border-light) 75%, transparent);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--dr-bg-main) 25%, transparent);
    font-size: 0.6875rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-count b {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--dr-text-main);
}

.ap-deal-card__pa-count:first-child .bi {
    color: var(--dr-success);
}

.ap-deal-card__pa-count:last-child .bi {
    color: var(--dr-warning);
}


/* Communication / progress relation */

.ap-deal-card__pa-note {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-left: 2px solid var(--dr-primary);
    border-radius: 0 0.4rem 0.4rem 0;
    background: color-mix(in srgb, var(--dr-primary) 5%, transparent);
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-note strong {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--dr-text-main);
}


/* ═══════════════════════════════════════
   WHY ATTENTION
   ═══════════════════════════════════════ */

.ap-deal-card__wa-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-deal-card__wa-item {
    display: grid;
    grid-template-columns: 1.65rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--dr-bg-main) 22%, transparent);
}

.ap-deal-card__wa-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    margin: 0;
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--dr-text-muted) 12%, transparent);
}

.ap-deal-card__wa-marker::before {
    content: "!";
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--dr-text-muted);
}

.ap-deal-card__wa-item--attention .ap-deal-card__wa-marker {
    background: var(--dr-warning-soft);
}

.ap-deal-card__wa-item--attention .ap-deal-card__wa-marker::before {
    color: var(--dr-warning);
}

.ap-deal-card__wa-item--serious .ap-deal-card__wa-marker {
    background: var(--dr-danger-soft);
}

.ap-deal-card__wa-item--serious .ap-deal-card__wa-marker::before {
    color: var(--dr-danger);
}

.ap-deal-card__wa-text {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}

.ap-deal-card__wa-title {
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--dr-text-main);
}

.ap-deal-card__wa-desc {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}


/* ═══════════════════════════════════════
   NEXT STEPS
   ═══════════════════════════════════════ */

.ap-deal-card__next {
    position: relative;
}

.ap-deal-card__next-task {
    position: relative;
    display: block;
    padding: 0.6rem 0.7rem 0.6rem 2.5rem;
    border: 1px solid color-mix(in srgb, var(--dr-border-light) 75%, transparent);
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--dr-bg-main) 28%, transparent);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--dr-text-main);
}

.ap-deal-card__next-task::before {
    content: "\f26b";
    position: absolute;
    left: 0.65rem;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    transform: translateY(-50%);
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--dr-primary) 13%, transparent);
    color: var(--dr-primary);
    font-family: "bootstrap-icons";
    font-size: 0.75rem;
    font-weight: 400;
}

.ap-deal-card__next-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.ap-deal-card__next-status {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.4;
}

.ap-deal-card__next-status--overdue {
    color: var(--dr-danger);
    background: var(--dr-danger-soft);
}

.ap-deal-card__next-status--upcoming {
    color: var(--dr-success);
    background: var(--dr-success-soft);
}

.ap-deal-card__next-status--unscheduled {
    color: var(--dr-warning);
    background: var(--dr-warning-soft);
}

.ap-deal-card__next-due,
.ap-deal-card__next-resp {
    font-size: 0.6875rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__next-resp {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.ap-deal-card__next-resp .bi {
    color: var(--dr-primary);
}

.ap-deal-card__next-empty {
    position: relative;
    margin: 0;
    padding: 0.6rem 0.7rem 0.6rem 2.5rem;
    border: 1px dashed var(--dr-border-light);
    border-radius: 0.55rem;
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__next-empty::before {
    content: "+";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 500;
    color: var(--dr-primary);
}


/* ═══════════════════════════════════════
   RECENT ACTIONS
   ═══════════════════════════════════════ */

.ap-deal-card__recent-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-deal-card__recent-item {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.28rem 0;
}

/* vertical activity timeline */

.ap-deal-card__recent-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.69rem;
    top: 1.45rem;
    bottom: -0.15rem;
    width: 1px;
    background: var(--dr-border-light);
}

.ap-deal-card__recent-marker {
    position: relative;
    z-index: 2;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0.25rem 0 0 0.32rem;
    border: 2px solid var(--ap-deal-surface);
    border-radius: 50%;
    background: var(--dr-text-muted-light);
    box-shadow: 0 0 0 1px var(--dr-border-light);
}

.ap-deal-card__recent-item--communication .ap-deal-card__recent-marker {
    background: var(--dr-primary);
}

.ap-deal-card__recent-item--stage .ap-deal-card__recent-marker {
    background: var(--dr-success);
}

.ap-deal-card__recent-item--task .ap-deal-card__recent-marker {
    background: var(--dr-warning);
}

.ap-deal-card__recent-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.ap-deal-card__recent-title {
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dr-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-deal-card__recent-meta {
    font-size: 0.625rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
    white-space: nowrap;
}


/* Empty states */

.ap-deal-card__pa-empty,
.ap-deal-card__wa-empty,
.ap-deal-card__recent-empty {
    margin: 0;
    padding: 0.45rem 0;
    font-size: 0.75rem;
    color: var(--dr-text-muted);
}


/* Narrow card */

@media (max-width: 767.98px) {
    .deal-insight-progress-attention,
    .deal-insight-next-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-deal-card__pa-rows {
        grid-template-columns: minmax(0, 1fr);
    }
}







/* ─── V4.1 refinement ─── */

/* Progress relation — легче, чтобы не конкурировал с KPI */
.ap-deal-card__pa-note {
    padding: 0.45rem 0.65rem;
    background: color-mix(in srgb, var(--dr-primary) 3%, transparent);
    border-left-width: 2px;
}

.ap-deal-card__pa-note strong {
    font-size: 0.6875rem;
}

.ap-deal-card__pa-note span {
    font-size: 0.625rem;
}


/* Why Attention — чуть крупнее и плотнее */
.ap-deal-card__wa-item {
    min-height: 2.65rem;
    padding: 0.5rem 0.65rem;
}

.ap-deal-card__wa-title {
    font-size: 0.8125rem;
    font-weight: 700;
}

.ap-deal-card__wa-desc {
    margin-top: 0.1rem;
    font-size: 0.6875rem;
}


/* Next Step empty state — operational warning вместо placeholder */
.ap-deal-card__next-empty {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.65rem;
    margin: 0;
    padding: 0.55rem 0.7rem 0.55rem 2.65rem;
    border: 1px solid color-mix(in srgb, var(--dr-warning) 28%, var(--dr-border-light));
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--dr-warning) 5%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dr-text-main);
}

.ap-deal-card__next-empty::before {
    content: "!";
    left: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.4rem;
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
    font-size: 0.75rem;
    font-weight: 800;
}


/* Recent Actions — как activity feed */
.ap-deal-card__recent-item {
    grid-template-columns: 1.65rem minmax(0, 1fr);
    min-height: 1.75rem;
    padding: 0.2rem 0;
}

.ap-deal-card__recent-marker {
    display: block;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    border: 0;
    border-radius: 0.38rem;
    box-shadow: none;
}

.ap-deal-card__recent-item:not(:last-child)::after {
    left: 0.655rem;
    top: 1.35rem;
    bottom: -0.2rem;
    background: var(--dr-border-light);
}

.ap-deal-card__recent-item--communication .ap-deal-card__recent-marker {
    background: color-mix(in srgb, var(--dr-primary) 75%, var(--dr-bg-card));
}

.ap-deal-card__recent-item--stage .ap-deal-card__recent-marker {
    background: color-mix(in srgb, var(--dr-success) 80%, var(--dr-bg-card));
}

.ap-deal-card__recent-item--task .ap-deal-card__recent-marker {
    background: color-mix(in srgb, var(--dr-warning) 85%, var(--dr-bg-card));
}

.ap-deal-card__recent-text {
    min-height: 1.35rem;
    align-items: center;
}

.ap-deal-card__recent-title {
    font-size: 0.75rem;
}

.ap-deal-card__recent-meta {
    font-size: 0.625rem;
}

/* ─── V5: Recent Actions — prototype visual ─── */

.ap-deal-card__recent-list {
    gap: 0.25rem;
}

.ap-deal-card__recent-item {
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    min-height: 1.65rem;
    padding: 0;
}

.ap-deal-card__recent-marker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    border: 0;
    border-radius: 0.35rem;
    box-shadow: none;
    color: #fff;
}

.ap-deal-card__recent-marker .bi {
    font-size: 0.7rem;
    line-height: 1;
    color: inherit;
}

/* В прототипе коммуникации — зелёные */
.ap-deal-card__recent-item--communication .ap-deal-card__recent-marker {
    background: var(--dr-success);
}

/* Примечание — жёлто/оранжевое */
.ap-deal-card__recent-item--note .ap-deal-card__recent-marker {
    background: var(--dr-warning);
}

/* Смена ответственного — оранжевая */
.ap-deal-card__recent-item--responsible .ap-deal-card__recent-marker {
    background: var(--dr-warning);
}

/* Смена этапа — жёлто/оранжевая */
.ap-deal-card__recent-item--stage .ap-deal-card__recent-marker {
    background: var(--dr-warning);
}

/* Задача */
.ap-deal-card__recent-item--task .ap-deal-card__recent-marker {
    background: var(--dr-primary);
}

.ap-deal-card__recent-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 1.35rem;
}

.ap-deal-card__recent-title {
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dr-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-deal-card__recent-meta {
    font-size: 0.625rem;
    line-height: 1;
    color: var(--dr-text-muted);
    white-space: nowrap;
}

/* Убираем timeline-линию из V4:
   в TARGET это самостоятельные action rows */
.ap-deal-card__recent-item:not(:last-child)::after {
    display: none;
}

/* ─── V5: Recent Actions ─── */

.ap-deal-card__recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-deal-card__recent-item {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
    padding: 0;
}

.ap-deal-card__recent-item::after {
    display: none !important;
}

.ap-deal-card__recent-marker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    border: 0;
    border-radius: 0.35rem;
    box-shadow: none;
    color: #fff;
}

.ap-deal-card__recent-marker .bi {
    display: block;
    font-size: 0.68rem;
    line-height: 1;
    color: inherit;
}

/* Коммуникации — зелёные, как в TARGET */
.ap-deal-card__recent-item--communication .ap-deal-card__recent-marker {
    background: var(--dr-success-soft);
}

/* Примечания — amber */
.ap-deal-card__recent-item--note .ap-deal-card__recent-marker {
    background: var(--dr-warning-soft);
}

/* Изменения сделки — amber */
.ap-deal-card__recent-item--stage .ap-deal-card__recent-marker {
    background: var(--dr-warning-soft);
}

/* Задачи — primary */
.ap-deal-card__recent-item--task .ap-deal-card__recent-marker {
    background: var(--dr-primary-soft);
}

/* ─── Recent Actions: яркие иконки на soft background ─── */

.ap-deal-card__recent-item--communication .ap-deal-card__recent-marker .bi {
    color: var(--dr-success);
}

.ap-deal-card__recent-item--note .ap-deal-card__recent-marker .bi,
.ap-deal-card__recent-item--stage .ap-deal-card__recent-marker .bi {
    color: var(--dr-warning);
}

.ap-deal-card__recent-item--task .ap-deal-card__recent-marker .bi {
    color: var(--dr-primary);
}

.ap-deal-card__recent-item--other .ap-deal-card__recent-marker .bi {
    color: var(--dr-text-muted-light);
}

.ap-deal-card__recent-marker {
    color: inherit;
}

/* Остальные lifecycle-события */
.ap-deal-card__recent-item--other .ap-deal-card__recent-marker {
    background: var(--dr-text-muted-light);
}

.ap-deal-card__recent-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    min-height: 1.35rem;
}

.ap-deal-card__recent-title {
    min-width: 0;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dr-text-main);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-deal-card__recent-meta {
    font-size: 0.625rem;
    line-height: 1;
    color: var(--dr-text-muted);
    white-space: nowrap;
}









/* ═══════════════════════════════════════════════════════════════
   V5 — Deal Intelligence Card: final visual polish
   ═══════════════════════════════════════════════════════════════ */

/* ─── Общий ритм нижних панелей ─── */

.deal-insight-progress-attention,
.deal-insight-next-actions {
    gap: 0.75rem;
}

.deal-insight-progress-attention .ap-deal-card__panel,
.deal-insight-next-actions .ap-deal-card__panel {
    padding: 0.8rem 0.9rem;
}

.deal-insight-progress-attention .ap-deal-card__section-title,
.deal-insight-next-actions .ap-deal-card__section-title {
    margin-bottom: 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}


/* ─── Progress & Activity ─── */

.ap-deal-card__pa-rows {
    gap: 0.5rem;
}

.ap-deal-card__pa-card {
    min-height: 3.25rem;
    padding: 0.55rem 0.65rem;
    border-color: color-mix(in srgb, var(--dr-border-light) 80%, transparent);
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--dr-bg-main) 20%, transparent);
}

.ap-deal-card__pa-icon {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.4rem;
}

.ap-deal-card__pa-icon .bi {
    font-size: 0.75rem;
}

/* semantic soft tiles */
.ap-deal-card__pa-icon--progress {
    background: var(--dr-success-soft);
    color: var(--dr-success);
}

.ap-deal-card__pa-icon--contact {
    background: var(--dr-primary-soft);
    color: var(--dr-primary);
}

.ap-deal-card__pa-label {
    font-size: 0.65rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__pa-value {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dr-text-main);
}

/* forward / backward — компактные operational KPI */
.ap-deal-card__pa-movement {
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    border-color: color-mix(in srgb, var(--dr-border-light) 75%, transparent);
    background: color-mix(in srgb, var(--dr-bg-main) 16%, transparent);
}

.ap-deal-card__pa-movement--forward .bi {
    color: var(--dr-success);
}

.ap-deal-card__pa-movement--backward .bi {
    color: var(--dr-warning);
}

/* связь коммуникации с продвижением */
.ap-deal-card__pa-note {
    min-height: 2.55rem;
    padding: 0.5rem 0.65rem;
    border-left: 2px solid var(--dr-success);
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--dr-success) 4%, transparent);
}

.ap-deal-card__pa-note strong {
    font-size: 0.7rem;
    font-weight: 700;
}

.ap-deal-card__pa-note span {
    margin-top: 0.1rem;
    font-size: 0.625rem;
}


/* ─── Why Attention ─── */

.ap-deal-card__wa-list {
    gap: 0.35rem;
}

.ap-deal-card__wa-item {
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.5rem;
    background: transparent;
}

.ap-deal-card__wa-marker {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.4rem;
}

.ap-deal-card__wa-item--attention .ap-deal-card__wa-marker {
    background: var(--dr-warning-soft);
}

.ap-deal-card__wa-item--attention .ap-deal-card__wa-marker::before {
    color: var(--dr-warning);
}

.ap-deal-card__wa-item--serious .ap-deal-card__wa-marker {
    background: var(--dr-danger-soft);
}

.ap-deal-card__wa-item--serious .ap-deal-card__wa-marker::before {
    color: var(--dr-danger);
}

.ap-deal-card__wa-title {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
}

.ap-deal-card__wa-desc {
    margin-top: 0.08rem;
    font-size: 0.65rem;
    line-height: 1.3;
}


/* ─── Next Steps ─── */

.ap-deal-card__next-task,
.ap-deal-card__next-empty {
    min-height: 2.8rem;
    border-radius: 0.55rem;
}

/* Нет следующего шага — warning, но без тяжёлой заливки */
.ap-deal-card__next-empty {
    padding: 0.6rem 0.75rem 0.6rem 2.75rem;
    border-color: color-mix(in srgb, var(--dr-warning) 30%, var(--dr-border-light));
    background: color-mix(in srgb, var(--dr-warning) 4%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
}

.ap-deal-card__next-empty::before {
    left: 0.7rem;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.4rem;
    background: var(--dr-warning-soft);
    color: var(--dr-warning);
}

/* Запланированная задача */
.ap-deal-card__next-task {
    padding: 0.65rem 0.75rem 0.65rem 2.75rem;
    background: color-mix(in srgb, var(--dr-bg-main) 20%, transparent);
}

.ap-deal-card__next-task::before {
    left: 0.7rem;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.4rem;
    background: var(--dr-primary-soft);
    color: var(--dr-primary);
}


/* ─── Recent Actions ─── */

.ap-deal-card__recent-list {
    gap: 0.28rem;
}

.ap-deal-card__recent-item {
    grid-template-columns: 1.55rem minmax(0, 1fr);
    gap: 0.5rem;
    min-height: 1.55rem;
}

.ap-deal-card__recent-marker {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.38rem;
}

.ap-deal-card__recent-marker .bi {
    font-size: 0.7rem;
}

/* единая semantic-система: soft tile + насыщенная icon */
.ap-deal-card__recent-item--communication .ap-deal-card__recent-marker {
    background: var(--dr-success-soft);
}

.ap-deal-card__recent-item--communication .ap-deal-card__recent-marker .bi {
    color: var(--dr-success);
}

.ap-deal-card__recent-item--note .ap-deal-card__recent-marker,
.ap-deal-card__recent-item--stage .ap-deal-card__recent-marker {
    background: var(--dr-warning-soft);
}

.ap-deal-card__recent-item--note .ap-deal-card__recent-marker .bi,
.ap-deal-card__recent-item--stage .ap-deal-card__recent-marker .bi {
    color: var(--dr-warning);
}

.ap-deal-card__recent-item--task .ap-deal-card__recent-marker {
    background: var(--dr-primary-soft);
}

.ap-deal-card__recent-item--task .ap-deal-card__recent-marker .bi {
    color: var(--dr-primary);
}

/* neutral events тоже soft, а не сплошной серый квадрат */
.ap-deal-card__recent-item--other .ap-deal-card__recent-marker {
    background: color-mix(in srgb, var(--dr-text-muted-light) 14%, transparent);
}

.ap-deal-card__recent-item--other .ap-deal-card__recent-marker .bi {
    color: var(--dr-text-muted-light);
}

.ap-deal-card__recent-title {
    font-size: 0.75rem;
    font-weight: 600;
}

.ap-deal-card__recent-meta {
    font-size: 0.625rem;
}


/* ─── Stage Path: только polish, геометрию не меняем ─── */

.ap-deal-card__path-chip {
    font-weight: 650;
}

.ap-deal-card__path-duration {
    font-weight: 750;
}

.ap-deal-card__path-legend {
    opacity: 0.9;
}


/* ─── Narrow card ─── */

@media (max-width: 767.98px) {
    .deal-insight-progress-attention,
    .deal-insight-next-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.65rem;
    }

    .deal-insight-progress-attention .ap-deal-card__panel,
    .deal-insight-next-actions .ap-deal-card__panel {
        padding: 0.75rem;
    }
}










/* ─── Deal Card responsive относительно ширины самого drawer ─── */

/* Родитель карточки становится query-container */
.ap-deal-card {
    container-type: inline-size;
}

/* Узкая Deal Card */
@container (max-width: 700px) {
    .ap-deal-card__summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem;
    }

    .ap-deal-card__key,
    .ap-deal-card__health {
        width: 100%;
        min-width: 0;
    }

    /* Key Info */
    .ap-deal-card__info {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ap-deal-card__info-item,
    .ap-deal-card__info-text {
        min-width: 0;
    }

    .ap-deal-card__info-value {
        overflow-wrap: anywhere;
    }

    /* Health */
    .ap-deal-card__health-top {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .ap-deal-card__factors {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Нижние пары секций тоже друг под другом */
    .deal-insight-progress-attention,
    .deal-insight-next-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Совсем узкая карточка */
@container (max-width: 430px) {
    .ap-deal-card__info {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ap-deal-card__health-top {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ap-deal-card__gauge-meta {
        min-width: 0;
    }
}

@container (max-width: 700px) {
    .ap-deal-card__key .ap-deal-card__info {
        flex: initial;
        align-content: normal;
    }
}

/* ═══════════════════════════════════════════════════════
   Sprint 14.6.13.1 — Snapshot Mode (authenticated dashboard)
   Presentation-only: скрывается служебный UI, но НЕ меняются
   dashboard data/layout. Селекторы активны только при snapshot
   state на root (.is-dashboard-snapshot).
   ═══════════════════════════════════════════════════════ */

/* Служебный UI: burger, edit-карандаш, Apply/Reset фильтров.
   Выбранные значения фильтров остаются видимыми. */
.is-dashboard-snapshot .ap-dashboard-header__menu-icon,
.is-dashboard-snapshot .ap-dashboard-header__edit,
.is-dashboard-snapshot .ap-dashboard-filters__actions {
    display: none !important;
}

/* Drill-down overlay/backdrop — сервисный интерактив, в snapshot не показывается. */
.is-dashboard-snapshot [data-drilldown-overlay],
.is-dashboard-snapshot [data-drilldown-backdrop] {
    display: none !important;
}

/* Drill-down affordance: аналитическое содержимое (KPI, строки таблицы,
   legend items, transition/action элементы) сохраняется полностью.
   Убирается только interactive affordance. */
.is-dashboard-snapshot [data-drilldown-population] {
    cursor: default;
    pointer-events: none;
}

/* Snapshot-specific hover/navigation decoration существующих триггеров. */
.is-dashboard-snapshot [data-drilldown-population]:hover,
.is-dashboard-snapshot [data-drilldown-population]:focus,
.is-dashboard-snapshot [data-drilldown-population]:focus-visible {
    background: transparent;
    box-shadow: none;
}

/* ─── Sprint MS.4: «Мои точки роста» (SYSTEM my_sales) ──────────────────── */

/* Sprint MS.6.7.2.1: единая адаптивная grid-сетка «Мои результаты».
   Ряд 1: прогноз | распределение. Ряд 2: прогресс | точки роста.
   Ряд 3: дисциплина на всю ширину. Высота карточек в ряду равна более
   высокой карточке (align-items: stretch), фиксированных высот нет. */
.ap-management-dashboard {
    container: my-sales-layout / inline-size;
}
.my-sales-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 12px;
    align-items: stretch;
    grid-auto-flow: row;
}

.my-sales-insights > * {
    min-width: 0;
}

/* Третий ряд занимает обе колонки. */
.my-sales-insights > .my-sales-discipline {
    grid-column: 1 / -1;
}

/* Узкая панель: все секции располагаются друг под другом. */
@container my-sales-layout (max-width: 1099.98px) {
    .my-sales-insights {
        grid-template-columns: minmax(0, 1fr);
    }
}

.my-sales-growth {
    padding: 1rem 1.25rem;
    background: var(--dr-bg-card);
    border: 1px solid var(--dr-border);
    border-radius: 0.75rem;
}

.my-sales-growth__title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dr-text-muted);
}

.my-sales-growth__list {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.375rem;
}

.my-sales-growth__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.my-sales-growth__row:hover,
.my-sales-growth__row:focus-visible {
    background: var(--dr-bg-hover);
    border-color: var(--dr-border);
}

.my-sales-growth__priority {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--dr-bg-main);
    color: var(--dr-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.my-sales-growth__item--p1 .my-sales-growth__priority {
    background: color-mix(in srgb, var(--dr-danger) 18%, var(--dr-bg-main));
    color: var(--dr-danger);
}

.my-sales-growth__item--p2 .my-sales-growth__priority,
.my-sales-growth__item--p3 .my-sales-growth__priority {
    background: color-mix(in srgb, var(--dr-warning) 18%, var(--dr-bg-main));
    color: var(--dr-warning);
}

.my-sales-growth__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
}

.my-sales-growth__headline {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dr-text-main);
    line-height: 1.3;
}

.my-sales-growth__reason {
    font-size: 0.75rem;
    color: var(--dr-text-muted);
    line-height: 1.3;
}

.my-sales-growth__action {
    flex: 0 0 auto;
    max-width: 45%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dr-primary);
    line-height: 1.3;
    text-align: right;
}

.my-sales-growth__empty,
.my-sales-growth__empty-note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dr-text-muted);
}

.my-sales-growth__empty-note {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--dr-text-muted-light);
}

@media (max-width: 575.98px) {
    .my-sales-growth__row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .my-sales-growth__action {
        max-width: 100%;
        padding-left: 1.875rem;
        text-align: left;
    }
}

/* ─── Sprint MS.6.6.5: «Распределение активных сделок по воронкам и этапам» ── */
/* Блок использует только готовый presentation DTO (MS.6.6.4):
   ширина полосы = dealsShare, порядок воронок/этапов — исходный CRM. */

.my-sales-distribution {
    --my-sales-distribution-bg: #ffffff;
    --my-sales-distribution-border: #e1e7ef;
    --my-sales-distribution-text: #1e293b;
    --my-sales-distribution-muted: #64748b;
    --my-sales-distribution-marker: #94a3b8;
    --my-sales-distribution-track: #e8eef6;
    --my-sales-distribution-fill: #3488e8;

    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    /* Первая карточка правой колонки: вертикальный отступ задаёт gap сетки. */
    margin-top: 0;
    padding: 14px 16px;
    border: 1px solid var(--my-sales-distribution-border);
    border-radius: 10px;
    background: var(--my-sales-distribution-bg);
    color: var(--my-sales-distribution-text);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

[data-bs-theme="dark"] .my-sales-distribution {
    --my-sales-distribution-bg: #0e1b2d;
    --my-sales-distribution-border: rgba(110, 145, 185, 0.14);
    --my-sales-distribution-text: #e7edf6;
    --my-sales-distribution-muted: #8da0ba;
    --my-sales-distribution-marker: #64748b;
    --my-sales-distribution-track: #243449;
    --my-sales-distribution-fill: #4a9eff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.my-sales-distribution__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    margin-bottom: 12px;
    min-width: 0;
}

.my-sales-distribution__title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dr-text-muted);
}

.my-sales-distribution__summary {
    font-size: 11px;
    line-height: 16px;
    color: var(--my-sales-distribution-muted);
    white-space: nowrap;
}

.my-sales-distribution__state {
    margin: 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--my-sales-distribution-muted);
}

.my-sales-distribution__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    min-width: 0;
}

/* Одна воронка занимает всю ширину карточки. */
.my-sales-distribution__grid--single {
    grid-template-columns: minmax(0, 1fr);
}

/* Две колонки воронок: тонкий вертикальный разделитель в цвете границы. */
.my-sales-distribution__grid:not(.my-sales-distribution__grid--single) > .my-sales-distribution__pipeline:nth-child(even) {
    border-left: 1px solid var(--my-sales-distribution-border);
    padding-left: 18px;
}

.my-sales-distribution__pipeline {
    min-width: 0;
}

.my-sales-distribution__pipeline-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 10px;
    margin-bottom: 11px;
    min-width: 0;
}

.my-sales-distribution__pipeline-name {
    min-width: 0;
    font-size: 12.5px;
    line-height: 17px;
    font-weight: 600;
    color: var(--my-sales-distribution-text);
    overflow-wrap: anywhere;
}

.my-sales-distribution__pipeline-summary {
    font-size: 11.5px;
    line-height: 16px;
    color: var(--my-sales-distribution-muted);
    white-space: nowrap;
}

.my-sales-distribution__stages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.my-sales-distribution__stage {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr) auto auto minmax(44px, 1.4fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 17px;
    font-size: 11.5px;
    line-height: 17px;
}

/* Sprint MS.6.7.2: строка этапа — drill-down триггер общего overlay.
   Hover/focus-подсветка только визуальная; геометрия строки не меняется. */
.my-sales-distribution__stage.ap-sales-management__drilldown-trigger {
    cursor: pointer;
    border-radius: 4px;
    margin-inline: -4px;
    padding-inline: 4px;
}

.my-sales-distribution__stage.ap-sales-management__drilldown-trigger:hover,
.my-sales-distribution__stage.ap-sales-management__drilldown-trigger:focus-visible {
    background: var(--dr-bg-secondary, rgba(120, 130, 150, .08));
}

.my-sales-distribution__stage.ap-sales-management__drilldown-trigger:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 1px;
}

.my-sales-distribution__stage-marker {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--my-sales-distribution-marker);
}

.my-sales-distribution__stage-name {
    min-width: 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--my-sales-distribution-text);
    overflow-wrap: anywhere;
}

.my-sales-distribution__stage-deals,
.my-sales-distribution__stage-amount {
    color: var(--my-sales-distribution-muted);
    text-align: right;
    white-space: nowrap;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.my-sales-distribution__stage-percent {
    color: var(--my-sales-distribution-muted);
    text-align: right;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.my-sales-distribution__stage-bar {
    display: block;
    width: 100%;
    min-width: 0;
    height: 7px;
    border-radius: 999px;
    background: var(--my-sales-distribution-track);
    overflow: hidden;
}

.my-sales-distribution__stage-bar-fill {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: 999px;
    background: var(--my-sales-distribution-fill);
}

@media (max-width: 991.98px) {
    .my-sales-distribution__grid,
    .my-sales-distribution__grid--single {
        grid-template-columns: minmax(0, 1fr);
    }

    /* На мобильных экранах вертикальный разделитель воронок убирается. */
    .my-sales-distribution__grid:not(.my-sales-distribution__grid--single) > .my-sales-distribution__pipeline:nth-child(even) {
        border-left: 0;
        padding-left: 0;
    }
}

.ap-money-stuck__pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 0 4px; font-size: 13px; }
.ap-money-stuck__page-btn { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 6px; background: transparent; cursor: pointer; }
.ap-money-stuck__page-btn[aria-current="page"] { background: #e9efff; border-color: #9cb5ff; font-weight: 600; }
.ap-money-stuck__page-btn:disabled { opacity: .4; cursor: default; }
.ap-money-stuck__table--deals tbody tr[hidden] { display: none !important; }
.ap-money-stuck__show-all { display: flex; justify-content: flex-end; padding: 8px 0 4px; }
.ap-money-stuck__show-all-btn { padding: 8px 14px; border: 1px solid #334155; border-radius: 6px; background: #172638; color: #e2e8f0; font-size: 13px; cursor: pointer; }
.ap-money-stuck__show-all-btn:hover { background: #24364c; }
.ap-money-stuck__table-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 0 4px; }
.ap-money-stuck__table-footer .ap-money-stuck__pagination { padding: 0; justify-content: flex-start; }
.ap-money-stuck__table-footer .ap-money-stuck__show-all { padding: 0; }

.ap-money-stuck__page-btn[aria-current="page"] {
    background: #164e63;
    border-color: #0891b2;
    color: #ecfeff;
    font-weight: 600;
}
.ap-money-stuck__page-btn:not(:disabled):hover { background: #24364c; color: #fff; }

/* H8-U.4 — Zombie marker */
.ap-deal-card__health-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ap-deal-card__zombie { display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; cursor: help; }
/* H8-U.4 — Zombie marker in Deal Control */
.ap-deal-control__cell-health { white-space: nowrap; }
.ap-deal-control__zombie { display: inline-flex; align-items: center; margin-left: 0.35rem; font-size: 1.1rem; line-height: 1; vertical-align: middle; cursor: help; }
.ap-deal-control__zombie,
.ap-deal-card__zombie { color: #dc3545; }

/* ═══════════════════════════════════════════════════════════════════════
   DR.RM.1 — Stage Path historical benchmarks (Light/Dark)
   Только существующие --dr-* токены + минимальные локальные переменные
   Roadmap с определениями для обеих тем. Активная тема наследуется штатно
   через [data-bs-theme]; отдельных переключателей/JS нет.
   ═══════════════════════════════════════════════════════════════════════ */

/* Light (default) — локальные ориентиры Roadmap. */
.ap-deal-card__path {
    --ap-roadmap-chip-bg: color-mix(in srgb, var(--dr-primary) 10%, var(--dr-bg-card));
    --ap-roadmap-chip-border: color-mix(in srgb, var(--dr-primary) 40%, var(--dr-border-light));
    --ap-roadmap-panel-bg: var(--dr-bg-card);
    --ap-roadmap-panel-border: var(--dr-border);
    --ap-roadmap-panel-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    --ap-roadmap-muted: var(--dr-text-muted);
    --ap-roadmap-completed: var(--dr-success);
    /* На светлом фоне канонические warning/danger слишком бледные для текста. */
    --ap-roadmap-warning: #b45309;
    --ap-roadmap-critical: #b91c1c;
}

/* Dark — те же семантические состояния в оттенках тёмной темы. */
[data-bs-theme="dark"] .ap-deal-card__path {
    --ap-roadmap-chip-bg: color-mix(in srgb, var(--dr-primary) 20%, var(--dr-bg-card));
    --ap-roadmap-chip-border: color-mix(in srgb, var(--dr-primary) 55%, var(--dr-border-light));
    --ap-roadmap-panel-bg: color-mix(in srgb, var(--dr-bg-main) 40%, var(--dr-bg-card));
    --ap-roadmap-panel-border: var(--dr-border);
    --ap-roadmap-panel-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    --ap-roadmap-muted: var(--dr-text-muted);
    --ap-roadmap-completed: var(--dr-success);
    --ap-roadmap-warning: var(--dr-warning);
    --ap-roadmap-critical: var(--dr-danger);
}

/* Горизонтальная прокрутка сохраняется; popover этапа не обрезается по X. */
.ap-deal-card__path-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Завершённый этап — success-плашка/маркер; движение по этапам не меняется. */
.ap-deal-card__path-visit--done .ap-deal-card__path-chip {
    border-color: color-mix(in srgb, var(--ap-roadmap-completed) 45%, var(--dr-border-light));
    background: color-mix(in srgb, var(--ap-roadmap-completed) 10%, var(--dr-bg-card));
}

.ap-deal-card__path-visit--done::before {
    border-color: var(--ap-roadmap-completed);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ap-roadmap-completed) 13%, transparent),
        0 0 8px color-mix(in srgb, var(--ap-roadmap-completed) 22%, transparent);
}

/* Текущий этап остаётся акцентным (зелёная семантика движения). */
.ap-deal-card__path-visit--current .ap-deal-card__path-chip {
    background: color-mix(in srgb, var(--dr-primary) 18%, var(--dr-bg-card));
}

/* Длительность + отдельный индикатор задержки. */
.ap-deal-card__path-duration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.ap-deal-card__path-duration-flag {
    font-size: 0.75rem;
    line-height: 1;
}

.ap-deal-card__path-visit--warning .ap-deal-card__path-duration,
.ap-deal-card__path-visit--warning .ap-deal-card__path-duration-flag {
    color: var(--ap-roadmap-warning);
}

.ap-deal-card__path-visit--critical .ap-deal-card__path-duration,
.ap-deal-card__path-visit--critical .ap-deal-card__path-duration-flag {
    color: var(--ap-roadmap-critical);
}

.ap-deal-card__path-visit--unknown .ap-deal-card__path-duration {
    color: var(--dr-text-main);
}

/* Повторный визит: дополнительная строка суммарного времени этапа. */
.ap-deal-card__path-total {
    order: 5;
    margin-top: 0.15rem;
    font-size: 0.625rem;
    line-height: 1.2;
    color: var(--ap-roadmap-muted);
    text-align: center;
    white-space: nowrap;
}

/* Детализация нормативов: hover на desktop, tap/click на мобильном. */
.ap-deal-card__path-detail {
    order: 6;
    display: flex;
    justify-content: center;
    margin-top: 0.3rem;
}

.ap-deal-card__path-detail > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    color: var(--ap-roadmap-muted);
    cursor: pointer;
    list-style: none;
}

.ap-deal-card__path-detail > summary::-webkit-details-marker {
    display: none;
}

.ap-deal-card__path-detail > summary:hover,
.ap-deal-card__path-detail > summary:focus-visible {
    background: var(--dr-bg-hover);
    color: var(--dr-text-main);
    outline: none;
}

.ap-deal-card__path-detail-panel {
    position: relative;
    z-index: 8;
    width: max-content;
    min-width: 11rem;
    max-width: 15rem;
    margin-top: 0.35rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ap-roadmap-panel-border);
    border-radius: 0.5rem;
    background: var(--ap-roadmap-panel-bg);
    box-shadow: var(--ap-roadmap-panel-shadow);
    color: var(--dr-text-main);
    text-align: left;
}

.ap-deal-card__path-detail-title {
    margin-bottom: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.3;
}

.ap-deal-card__path-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.625rem;
    line-height: 1.55;
}

.ap-deal-card__path-detail-row span {
    color: var(--ap-roadmap-muted);
}

.ap-deal-card__path-detail-row strong {
    color: var(--dr-text-main);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ap-deal-card__path-detail-row--deviation strong {
    color: var(--ap-roadmap-muted);
}

.ap-deal-card__path-detail-empty {
    font-size: 0.625rem;
    line-height: 1.45;
    color: var(--ap-roadmap-muted);
}

/* ─── DR.RM.1.1: ещё не посещённые стадии воронки ─────────────────────────
   Нейтральное оформление: серая пунктирная плашка/маркер, приглушённая
   подпись, без success-галочки и без warning/critical. Обе темы — только
   существующие токены (--ap-roadmap-muted / --dr-*), без фиксированных
   тёмных HEX. */
.ap-deal-card__path-visit--upcoming .ap-deal-card__path-chip {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--ap-roadmap-muted) 45%, var(--dr-border-light));
    background: color-mix(in srgb, var(--ap-roadmap-muted) 7%, var(--dr-bg-card));
    color: var(--ap-roadmap-muted);
    font-weight: 500;
}

.ap-deal-card__path-visit--upcoming::before {
    border-style: dashed;
    border-color: var(--ap-roadmap-muted);
    background: var(--ap-deal-surface);
    box-shadow: none;
}

.ap-deal-card__path-arrow--upcoming {
    color: var(--ap-roadmap-muted);
}

.ap-deal-card__path-arrow--upcoming::before {
    background: repeating-linear-gradient(
            90deg,
            color-mix(in srgb, currentColor 70%, transparent) 0 6px,
            transparent 6px 12px
    );
    box-shadow: none;
}

/* Tablet/mobile: минимальная ширина этапа, без вертикальной колонки. */
@media (max-width: 767.98px) {
    .ap-deal-card__path-track {
        width: max-content;
        min-width: 100%;
    }

    .ap-deal-card__path-visit {
        flex: 0 0 110px;
        min-width: 110px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   DR.RM.2 — Forecast panel под Roadmap (План / Прогноз DealRule /
   Оставшийся путь / Отклонение) + компактный F3 reachability.
   Только существующие --dr-* токены: обе темы (Light/Dark) наследуются
   штатно через [data-bs-theme]. HEX-цвета одной темы не фиксируются.
   ═══════════════════════════════════════════════════════════════════════ */
.ap-deal-card__forecast {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    margin-top: 0.125rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--dr-border-light);
}

.ap-deal-card__forecast-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
}

.ap-deal-card__forecast-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.125rem 0.75rem;
}

.ap-deal-card__forecast-kpi:first-child {
    padding-left: 0;
}

.ap-deal-card__forecast-kpi + .ap-deal-card__forecast-kpi {
    border-left: 1px solid var(--dr-border-light);
}

.ap-deal-card__forecast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    line-height: 1.2;
    color: var(--dr-primary);
}

.ap-deal-card__forecast-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ap-deal-card__forecast-label {
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--dr-text-muted);
}

.ap-deal-card__forecast-value {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    color: var(--dr-text-main);
    white-space: nowrap;
}

.ap-deal-card__forecast-value--muted {
    font-weight: 600;
    color: var(--dr-text-muted);
}

.ap-deal-card__forecast-value--normal {
    color: var(--dr-text-main);
}

.ap-deal-card__forecast-value--early {
    color: var(--dr-success);
}

.ap-deal-card__forecast-value--late {
    color: var(--dr-warning);
}

.ap-deal-card__forecast-hint {
    font-size: 0.625rem;
    line-height: 1.2;
    color: var(--dr-text-muted-light);
}

/* F3 Reachability: оценка конца КАЛЕНДАРНОГО месяца (не плановой даты CRM). */
.ap-deal-card__forecast-reach {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--dr-text-muted);
}

.ap-deal-card__forecast-reach-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--dr-text-muted-light);
}

.ap-deal-card__forecast-reach--good .ap-deal-card__forecast-reach-dot {
    background: var(--dr-success);
}

.ap-deal-card__forecast-reach--warn .ap-deal-card__forecast-reach-dot {
    background: var(--dr-warning);
}

.ap-deal-card__forecast-reach--bad .ap-deal-card__forecast-reach-dot {
    background: var(--dr-danger);
}

/* Узкий экран — адаптивное размещение 2×2. */
@media (max-width: 767.98px) {
    .ap-deal-card__forecast-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ap-deal-card__forecast-kpi:nth-child(odd) {
        padding-left: 0;
        border-left: none;
    }

    .ap-deal-card__forecast-kpi:nth-child(n+3) {
        border-top: 1px solid var(--dr-border-light);
    }
}

/* ─── DR.RM.2.7.2: Deal Health Recommendations — «Рекомендуемые действия» ───
   Компактный нейтральный блок рядом с диагностикой здоровья сделки. Только
   существующая surface/border/radius family (`.ap-deal-card__panel`) и
   существующие --dr-* tokens: больших цветных карточек и warning-заливок нет.
   Один столбец на всех ширинах (список рекомендаций читается сверху вниз). */
.deal-insight-recommendations {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    min-width: 0;
}

.ap-deal-card__rec-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-deal-card__rec-item {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
    padding-top: 0.625rem;
    border-top: 1px solid var(--dr-border-light);
}

.ap-deal-card__rec-item:first-child {
    padding-top: 0;
    border-top: none;
}

.ap-deal-card__rec-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.ap-deal-card__rec-num {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dr-text-muted);
    font-variant-numeric: tabular-nums;
}

.ap-deal-card__rec-icon {
    flex: 0 0 auto;
    font-size: 0.875rem;
    color: var(--dr-text-muted);
}

.ap-deal-card__rec-title {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dr-text-main);
    overflow-wrap: anywhere;
}

.ap-deal-card__rec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.3125rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--dr-text-main);
}

.ap-deal-card__rec-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--dr-text-muted);
}