/* ==========================================================================
   Окно «Статистика по сделкам» (#deal_table_form)
   Разметка — buildDealTableForm() в js/modules/v2_forms.js, логика — js/modules/v2_deals_table.js
   ========================================================================== */

#deal_table_form.dtf {
    /* ряды графика: эксперт / группа / отдел (проверенная категориальная палитра) */
    --dtf-s1: #2a78d6;
    --dtf-s2: #eb6834;
    --dtf-s3: #1baf7a;
    --dtf-bg: #f3f4f6;
    --dtf-surface: var(--c-white, #fff);
    --dtf-surface-2: #f6f7f9;
    --dtf-border: var(--c-border-light, #e5e5e5);
    --dtf-text: #343a40;
    --dtf-strong: var(--c-text-strong, #1a1a1a);
    --dtf-muted: var(--c-muted, #6c757d);
    --dtf-grid: #eceef1;
    --dtf-accent: var(--c-primary, #436EE6);
    --dtf-accent-bg: var(--c-hover-bg, #eef4ff);
    --dtf-bar: #c9d6f2;
    --dtf-good-bg: #e6f4ea;
    --dtf-good: #1e7a3a;
    --dtf-bad-bg: #fdecea;
    --dtf-bad: #b42318;
    --dtf-tooltip-bg: rgba(33, 37, 41, 0.95);

    width: min(1240px, 96vw);
    padding: 0;
    background: var(--dtf-bg);
    color: var(--dtf-text);
    overflow-y: auto;
    scrollbar-width: thin;
}
#deal_table_form.dtf::-webkit-scrollbar { width: 8px; }
#deal_table_form.dtf::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 4px; }

html[data-theme="dark"] #deal_table_form.dtf {
    --dtf-s1: #3987e5;
    --dtf-s2: #d95926;
    --dtf-s3: #199e70;
    --dtf-bg: var(--dt-bg, #15171b);
    --dtf-surface: var(--dt-surface, #1e2126);
    --dtf-surface-2: var(--dt-surface-2, #262a31);
    --dtf-border: var(--dt-border, #363b44);
    --dtf-text: var(--dt-text, #e2e5ea);
    --dtf-strong: var(--dt-text-strong, #f2f4f7);
    --dtf-muted: var(--dt-muted, #9aa2ad);
    --dtf-grid: #2c3038;
    --dtf-accent: var(--dt-accent, #7095f2);
    --dtf-accent-bg: var(--dt-accent-bg, #23304d);
    --dtf-bar: #34446b;
    --dtf-good-bg: #1d3527;
    --dtf-good: #7dd69b;
    --dtf-bad-bg: #3d2020;
    --dtf-bad: #f29b9b;
    --dtf-tooltip-bg: rgba(10, 12, 15, 0.95);
}

/* ---------------------------------------------------------------- шапка */
.dtf .dtf-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 16px;
    padding: 18px 24px 0;
    background: var(--dtf-surface);
    border-bottom: 1px solid var(--dtf-border);
}
.dtf .dtf-heading h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--dtf-strong);
}
.dtf .dtf-sub {
    font-size: 0.85rem;
    color: var(--dtf-muted);
}
.dtf .dtf-actions {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.dtf .dtf-icon {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dtf-muted);
    font-size: 1.1rem;
    line-height: 1;
}
.dtf .dtf-icon:hover { background: var(--dtf-accent-bg); color: var(--dtf-accent); }

.dtf .dtf-filters {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}
.dtf .dtf-presets {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--dtf-surface-2);
    border: 1px solid var(--dtf-border);
    border-radius: 10px;
}
.dtf .dtf-preset,
.dtf .dtf-stat {
    padding: 4px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--dtf-text);
    font-size: 0.85rem;
    white-space: nowrap;
}
.dtf .dtf-preset:hover,
.dtf .dtf-stat:hover { color: var(--dtf-accent); }
.dtf .dtf-preset.active,
.dtf .dtf-stat.active {
    background: var(--dtf-surface);
    color: var(--dtf-accent);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.dtf .dtf-range {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--dtf-muted);
}
.dtf .dtf-range input { width: 145px; }

.dtf .dtf-tabs {
    grid-column: 1 / -1;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: -1px;
}
.dtf .dtf-tab {
    padding: 8px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--dtf-muted);
    font-weight: 500;
    white-space: nowrap;
}
.dtf .dtf-tab:hover { color: var(--dtf-text); }
.dtf .dtf-tab.active { color: var(--dtf-accent); border-bottom-color: var(--dtf-accent); }

/* ---------------------------------------------------------------- тело */
.dtf .dtf-body {
    padding: 18px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: opacity 0.15s;
}
.dtf .dtf-body.dtf-loading { opacity: 0.45; pointer-events: none; }

.dtf .dtf-card {
    background: var(--dtf-surface);
    border: 1px solid var(--dtf-border);
    border-radius: 12px;
    padding: 14px 18px;
}
.dtf .dtf-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.dtf .dtf-card-head h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dtf-strong);
}
.dtf .dtf-card-head .eo-icon-btn {
    padding: 2px 6px;
    font-size: 1rem;
    border: 0;
    background: transparent;
    color: var(--dtf-muted);
}
.dtf .dtf-hint {
    margin: 2px 0 8px;
    font-size: 0.8rem;
    color: var(--dtf-muted);
}
.dtf .dtf-legend {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.85rem;
    color: var(--dtf-text);
}
.dtf .dtf-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dtf .dtf-legend-item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.dtf .dtf-legend-item i.dtf-legend-norm {
    width: 0;
    height: 14px;
    border-radius: 0;
    border-left: 2px dashed var(--dtf-text);
}
.dtf .dtf-chart { position: relative; width: 100%; }

/* ---------------------------------------------------------------- KPI */
.dtf .dtf-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.dtf .dtf-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px;
    text-align: left;
    background: var(--dtf-surface);
    border: 1px solid var(--dtf-border);
    border-radius: 12px;
    color: var(--dtf-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dtf button.dtf-kpi:not([disabled]):hover { border-color: var(--dtf-accent); }
.dtf .dtf-kpi[disabled] { cursor: default; opacity: 1; }
.dtf .dtf-kpi.selected {
    border-color: var(--dtf-accent);
    box-shadow: 0 0 0 2px var(--dtf-accent) inset;
}
.dtf .dtf-kpi-label { font-size: 0.85rem; color: var(--dtf-muted); font-weight: 500; }
.dtf .dtf-kpi-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--dtf-strong);
    font-variant-numeric: tabular-nums;
}
.dtf .dtf-kpi-value small { font-size: 0.9rem; font-weight: 500; color: var(--dtf-muted); }
.dtf .dtf-kpi-compare {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: 0.8rem;
    color: var(--dtf-muted);
}
.dtf .dtf-kpi-compare b { color: var(--dtf-text); font-weight: 600; }
.dtf .dtf-kpi-n { font-size: 0.75rem; color: var(--dtf-muted); }
.dtf .dtf-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.dtf .dtf-delta.good { background: var(--dtf-good-bg); color: var(--dtf-good); }
.dtf .dtf-delta.bad { background: var(--dtf-bad-bg); color: var(--dtf-bad); }
.dtf .dtf-delta.even { background: var(--dtf-surface-2); color: var(--dtf-muted); font-weight: 500; }

/* согласование: группа из трёх плиток под общим заголовком */
.dtf .dtf-kpi-group {
    grid-column: 1 / -1;
    padding: 10px 12px 12px;
    border: 1px solid var(--dtf-border);
    border-radius: 14px;
    background: var(--dtf-surface-2);
}
.dtf .dtf-kpi-group.selected { border-color: var(--dtf-accent); }
.dtf .dtf-kpi-group-head {
    margin-bottom: 8px;
    border: 0;
    background: transparent;
    font-weight: 600;
    color: var(--dtf-strong);
    padding: 0 4px;
}
.dtf .dtf-kpi-group-head i { color: var(--dtf-muted); font-size: 0.8rem; }
.dtf .dtf-kpi-group-head:hover i { color: var(--dtf-accent); }
.dtf .dtf-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

/* ---------------------------------------------------------------- таблица */
.dtf .dtf-table-head { margin-bottom: 10px; }
.dtf .dtf-count { font-weight: 400; font-size: 0.85rem; color: var(--dtf-muted); margin-left: 4px; }
.dtf .dtf-table-tools {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.dtf .dtf-table-tools select { width: auto; max-width: 260px; }
.dtf .dtf-search { position: relative; }
.dtf .dtf-search i {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dtf-muted);
    font-size: 0.8rem;
}
.dtf .dtf-search input { padding-left: 28px; width: 240px; }

.dtf .dtf-table-wrap {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--dtf-border);
    border-radius: 8px;
}
.dtf .dtf-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}
.dtf .dtf-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0;
    background: var(--dtf-surface-2);
    border: 0;
    border-bottom: 1px solid var(--dtf-border);
    white-space: nowrap;
}
.dtf .dtf-table th button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--dtf-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-align: left;
}
.dtf .dtf-table th.num button { justify-content: flex-end; }
.dtf .dtf-table th button i { font-size: 0.75rem; opacity: 0.45; }
.dtf .dtf-table th.sorted button { color: var(--dtf-accent); }
.dtf .dtf-table th.sorted button i { opacity: 1; }
.dtf .dtf-table td {
    padding: 7px 12px;
    border: 0;
    border-bottom: 1px solid var(--dtf-border);
    vertical-align: middle;
}
.dtf .dtf-table tbody tr:last-child td { border-bottom: 0; }
.dtf .dtf-table tbody tr:hover td { background: var(--dtf-accent-bg); }
.dtf .dtf-table td.wide {
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dtf .dtf-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dtf .dtf-barcell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 170px;
}
.dtf .dtf-barcell > span:last-child { min-width: 44px; }
.dtf .dtf-bar {
    flex: 1;
    max-width: 120px;
    height: 6px;
    border-radius: 3px;
    background: var(--dtf-surface-2);
    overflow: hidden;
    direction: ltr;
}
.dtf .dtf-bar i { display: block; height: 100%; background: var(--dtf-s1); border-radius: 3px; opacity: 0.7; }
.dtf .dtf-more { text-align: center; }
.dtf .dtf-more:not(:empty) { margin-top: 10px; }

.dtf .dtf-empty {
    padding: 28px 12px;
    text-align: center;
    color: var(--dtf-muted);
}

/* ---------------------------------------------------------------- скелетон */
.dtf .dtf-skeleton {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.dtf .dtf-skeleton > div {
    height: 110px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--dtf-surface-2) 25%, var(--dtf-surface) 50%, var(--dtf-surface-2) 75%);
    background-size: 200% 100%;
    animation: dtf-shimmer 1.2s infinite linear;
}
.dtf .dtf-skeleton-big { grid-template-columns: 1fr; }
.dtf .dtf-skeleton-big > div { height: 320px; }
@keyframes dtf-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .dtf .dtf-skeleton > div { animation: none; }
}

/* ---------------------------------------------------------------- узкий экран */
@media (max-width: 575px) {
    #deal_table_form.dtf { width: 100vw; max-width: 100% !important; }
    .dtf .dtf-header { padding: 14px 16px 0; }
    .dtf .dtf-body { padding: 14px 16px 20px; }
    .dtf .dtf-range input { width: 130px; }
    .dtf .dtf-search input { width: 100%; }
    .dtf .dtf-table-tools { margin-left: 0; width: 100%; }
    .dtf .dtf-table-tools select { max-width: none; flex: 1; }
    .dtf .dtf-legend { margin-left: 0; width: 100%; }
    .dtf .dtf-skeleton { grid-template-columns: 1fr; }
}