/* ──────────────────────────────────────────────────────────
   Stats page (trader /statistic + admin /admin/statistics)
   Палитра — индиго/фиолетовый из tokens.css.
   ────────────────────────────────────────────────────────── */

.stat-page {
    padding: 20px 20px 40px;
    max-width: 1600px;
    margin: 0 auto;
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.stat-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2e2a45;
    display: flex;
    align-items: center;
    gap: 8px;
}

html.app-dark .stat-title { color: #c9d1d9; }

/* ── Период ────────────────────────────────────────────── */
.stat-period-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.stat-period-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #c5c9df;
    background: #f0f1f8;
    color: #464e80;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.stat-period-btn:hover {
    background: #e4e6f5;
    border-color: #a8aed6;
}

.stat-period-btn.active {
    background: #e8eaf8;
    border-color: #7c83c8;
    color: #2e3570;
    box-shadow: 0 2px 8px rgba(70,78,128,0.18);
}

html.app-dark .stat-period-btn {
    background: rgba(70,78,128,0.10);
    border-color: #3d4470;
    color: #9aa0cc;
}

html.app-dark .stat-period-btn:hover {
    background: rgba(70,78,128,0.20);
}

html.app-dark .stat-period-btn.active {
    background: rgba(70,78,128,0.28);
    border-color: #6870b8;
    color: #c5caee;
}

/* ── Кастомный диапазон ─────────────────────────────────── */
.stat-custom-range {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #f5f5fb;
    border: 1px solid #d8daf0;
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 16px;
}

html.app-dark .stat-custom-range {
    background: rgba(70,78,128,0.08);
    border-color: #30363d;
}

.stat-range-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #7070a0;
}

html.app-dark .stat-range-label { color: #8b949e; }

.stat-date-edit {
    min-width: 130px;
    max-width: 160px;
}

.stat-apply-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #a8d8b8;
    background: #e8f5ed;
    color: #246b40;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s;
}

.stat-apply-btn:hover { background: #d4eddc; }

html.app-dark .stat-apply-btn {
    background: rgba(35,100,60,0.15);
    border-color: #2a6640;
    color: #7cc99a;
}

html.app-dark .stat-apply-btn:hover { background: rgba(35,100,60,0.25); }

/* ── Загрузка ──────────────────────────────────────────── */
.stat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    gap: 14px;
    color: #8080a8;
    font-size: 0.9rem;
}

html.app-dark .stat-loading { color: #8b949e; }

.stat-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #d0cce8;
    border-top-color: #7c6bc4;
    border-radius: 50%;
    animation: stat-spin 0.8s linear infinite;
}

html.app-dark .stat-spinner {
    border-color: #30363d;
    border-top-color: #58a6ff;
}

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

/* ── KPI ───────────────────────────────────────────────── */
.stat-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

@media (max-width: 900px) { .stat-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stat-kpi-grid { grid-template-columns: 1fr; } }

.stat-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e8e8f5;
    box-shadow: 0 2px 10px rgba(70,50,160,0.06);
    transition: box-shadow 0.2s;
}

.stat-kpi-card:hover { box-shadow: 0 4px 18px rgba(70,50,160,0.10); }

html.app-dark .stat-kpi-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

html.app-dark .stat-kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.40); }

.stat-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.kpi-purple { background: #ede8fb; color: #7c6bc4; }
.kpi-green  { background: #e2f5e8; color: #2a8a48; }
.kpi-blue   { background: #e2eeff; color: #1f6feb; }
.kpi-teal   { background: #e0f5f5; color: #0e8282; }
.kpi-amber  { background: #fef3df; color: #b07800; }
.kpi-pink   { background: #fce8f3; color: #a0286e; }

html.app-dark .kpi-purple { background: rgba(124,107,196,0.15); color: #b8adee; }
html.app-dark .kpi-green  { background: rgba(52,168,90,0.12);   color: #7cc99a; }
html.app-dark .kpi-blue   { background: rgba(31,111,235,0.12);  color: #58a6ff; }
html.app-dark .kpi-teal   { background: rgba(0,180,180,0.10);   color: #5ecece; }
html.app-dark .kpi-amber  { background: rgba(232,168,56,0.12);  color: #ffd666; }
html.app-dark .kpi-pink   { background: rgba(200,60,140,0.12);  color: #e890c8; }

.stat-kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8080a8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

html.app-dark .stat-kpi-label { color: #8b949e; }

.stat-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2e2a45;
    line-height: 1.1;
}

html.app-dark .stat-kpi-value { color: #e6edf3; }

.stat-kpi-unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: #a0a0c8;
    margin-left: 3px;
}

html.app-dark .stat-kpi-unit { color: #6e7681; }

/* ── Карточки графиков ─────────────────────────────────── */
.stat-chart-full { margin-bottom: 14px; }

.stat-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

@media (max-width: 768px) { .stat-chart-grid { grid-template-columns: 1fr; } }

.stat-chart-card {
    background: #ffffff;
    border: 1px solid #e8e8f5;
    border-radius: 16px;
    padding: 16px 20px 12px;
    box-shadow: 0 2px 10px rgba(70,50,160,0.05);
}

html.app-dark .stat-chart-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

.stat-chart-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4a4870;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

html.app-dark .stat-chart-title { color: #8b949e; }

.stat-chart-body {
    position: relative;
    width: 100%;
    height: 220px;
}

.stat-chart-full .stat-chart-body { height: 280px; }

/* ── Empty ──────────────────────────────────────────────── */
.stat-empty {
    text-align: center;
    padding: 60px 0;
    color: #a0a0c0;
    font-size: 0.95rem;
}

.stat-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.5;
}

html.app-dark .stat-empty { color: #484f58; }

/* ── Admin-specific: per-user grid под графиками ───────── */
.stat-rows-card {
    background: #ffffff;
    border: 1px solid #e8e8f5;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(70,50,160,0.05);
    margin-bottom: 14px;
}

html.app-dark .stat-rows-card {
    background: #161b22;
    border-color: #30363d;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

.stat-rows-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4a4870;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

html.app-dark .stat-rows-title { color: #8b949e; }

/* ── Таблица «Статистика по GEO с сравнением» ── */
.stat-geo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.stat-geo-table thead th {
    text-align: left;
    font-weight: 700;
    color: #4a4870;
    padding: 8px 10px;
    border-bottom: 2px solid #e8e8f5;
    white-space: nowrap;
}
.stat-geo-table tbody td {
    padding: 10px;
    border-bottom: 1px solid #f0eef8;
    vertical-align: middle;
}
.stat-geo-name { font-weight: 700; color: #2e2a45; }
.stat-geo-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.stat-geo-metrics span { display: flex; flex-direction: column; }
.stat-geo-metrics b { font-size: 1.05rem; font-weight: 700; color: #2e2a45; }
.stat-geo-metrics b.ok { color: #34a85a; }
.stat-geo-metrics small { font-size: 0.72rem; color: #9a94b8; }

html.app-dark .stat-geo-table thead th { color: #8b949e; border-bottom-color: #30363d; }
html.app-dark .stat-geo-table tbody td { border-bottom-color: #21262d; }
html.app-dark .stat-geo-name,
html.app-dark .stat-geo-metrics b { color: #c9d1d9; }
html.app-dark .stat-geo-metrics small { color: #6e7681; }