/* ============================================================
   stats.css — страница «Кудрово в цифрах» (/Stats).
   Поверх глобальных tokens.css + dashboard.css (dash-*) + page-ribbon.
   Здесь только Stats-специфика: KPI, zero-dep графика, jtp-* (на /Stats
   не загружается jobs.css), §10 .dash-source, лейаут-классы stats-*.
   Все цвета — через переменные tokens.css → тёмная тема подхватывается сама.
   Никаких inline-стилей в .cshtml: ширина баров — классами .w-N.
   ============================================================ */

/* ===== sr-only (доступность): визуально скрыто, читается скринридером.
   Bootstrap 5 переименовал .sr-only → .visually-hidden, поэтому определяем здесь,
   иначе таблицы-дублёры показываются как видимые «дурацкие списки». ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
table.sr-only { table-layout: fixed; }

/* ===== Панель управления / дата ===== */
.stats-controls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.stats-updated { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.stats-updated i { color: var(--accent-primary); }

/* ===== Hero KPI-грид ===== */
.stats-hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.4vw, 1.1rem); }
@media (max-width: 900px) { .stats-hero-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stats-hero-grid { grid-template-columns: 1fr; } }
.stats-hero-grid .dash-card { padding: clamp(0.9rem, 1.6vw, 1.25rem); }

/* ===== Двухколоночные блоки ===== */
.stats-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); align-items: start; margin-top: 0.85rem; }
@media (max-width: 980px) { .stats-2col { grid-template-columns: 1fr; } }

/* ===== Мини-KPI (годовой ряд) ===== */
.stats-mini-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 0.5rem; margin: 0.85rem 0; }
.stats-mini { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.6rem 0.7rem; text-align: center; }
[data-theme="dark"] .stats-mini { background: rgba(255,255,255,0.03); }
.stats-mini__v { font-size: clamp(0.95rem, 1.6vw, 1.15rem); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stats-mini__l { font-size: 0.72rem; color: var(--text-secondary); font-weight: 600; margin-top: 0.15rem; }

.stats-pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.85rem 0 1rem; }
.stats-subpill { font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; }
.stats-caption { font-size: 0.8rem !important; margin-top: 0.4rem; }
.stats-context { font-size: 0.86rem !important; margin-top: 0.85rem; }
.stats-compact-value { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; margin: 0.3rem 0; }
.stats-acts { margin-top: 0.4rem; font-size: 0.84rem; }
.stats-acts li { line-height: 1.4; }
.stats-table-wrap { overflow-x: auto; }
.stats-sources-inline { font-size: 0.82rem !important; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: center; }
.stats-sources-inline > i { color: var(--accent-primary); }

/* ===== KPI карточка (big-number + sparkline + дельта) ===== */
.kpi { display: flex; flex-direction: column; gap: 0.35rem; }
.kpi__label { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.4rem; }
.kpi__label i { color: var(--accent-primary); }
.kpi__value { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kpi__unit { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); margin-left: 0.2rem; }
.kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem; flex-wrap: wrap; }
.kpi__delta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-weight: 700; }
.kpi__delta i { font-size: 0.85rem; }
/* дельты нейтральны: направление показывает стрелка, оценку (хорошо/плохо) не навязываем */
.kpi__delta--up { color: var(--text-secondary); }
.kpi__delta--down { color: var(--text-secondary); }
.kpi__delta--flat { color: var(--text-muted); }
.kpi__delta--good-down { color: var(--text-secondary); }
.kpi__note { font-size: 0.78rem; color: var(--text-muted); }

/* ===== inline-SVG sparkline ===== */
.spark { display: block; width: 100%; height: 32px; margin: 0.15rem 0; }
.spark__line { fill: none; stroke: var(--accent-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark__line--down { stroke: var(--accent-secondary); }
.kpi--accent .spark__line { stroke: var(--accent-secondary); }

/* ===== inline-SVG линия/тренд ===== */
.linechart { display: block; width: 100%; height: clamp(110px, 15vw, 160px); }
.linechart__area { fill: var(--accent-primary); opacity: 0.10; }
.linechart__line { fill: none; stroke: var(--accent-primary); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.linechart__line.spark__line--down { stroke: var(--accent-secondary); }
/* подписи оси X под линией (года/месяцы) */
.linechart-xlabels { display: flex; justify-content: space-between; gap: 0.25rem; margin-top: 0.3rem; font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.linechart-xlabels > span { text-align: center; line-height: 1.25; }
.linechart-xlabels b { display: block; color: var(--text-secondary); font-weight: 700; }
.stats-budget-years { margin-top: 1.1rem; }

/* интерактивный переключатель года в бюджете */
.budget-year-tabs { gap: 0.4rem; }
.budget-year-btn { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.35rem 0.55rem; cursor: pointer; font-family: inherit; font-size: 0.7rem; color: var(--text-muted); text-align: center; line-height: 1.3; font-variant-numeric: tabular-nums; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
[data-theme="dark"] .budget-year-btn { background: rgba(255,255,255,0.03); }
.budget-year-btn b { display: block; color: var(--text-secondary); font-weight: 700; font-size: 0.85rem; }
.budget-year-btn:hover { border-color: var(--accent-primary); }
.budget-year-btn--active { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.budget-year-btn--active b { color: #fff; }
.budget-panel { display: none; margin-top: 0.5rem; }
.budget-panel--active { display: block; }

/* интерактивный переключатель года в секции «Безопасность на дорогах» */
.acc-year-tabs { flex-wrap: wrap; gap: 0.15rem; }
.acc-year-btn { background: none; border: 1px solid transparent; border-radius: 7px; padding: 0.15rem 0.4rem; cursor: pointer; font-family: inherit; font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; line-height: 1.25; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.acc-year-btn:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.acc-year-btn--active { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; font-weight: 700; }
.acc-alltime-row { margin-top: 0.5rem; }
.acc-alltime-btn { padding: 0.3rem 0.7rem; border-color: var(--border-color); font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }
.acc-alltime-btn.acc-year-btn--active { color: #fff; }
.acc-panel { display: none; }
.acc-panel--active { display: block; }

/* распределение по полу (мужчины/женщины) */
.sex-split__bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--bg-primary); margin: 0.6rem 0 0.8rem; }
[data-theme="dark"] .sex-split__bar { background: rgba(255,255,255,0.05); }
.sex-split__men { width: var(--bar-pct, 50%); background: linear-gradient(90deg, var(--accent-primary), var(--accent-info)); }
.sex-split__women { flex: 1; background: linear-gradient(90deg, var(--accent-secondary), #fda99c); }
.sex-split__legend { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; color: var(--text-secondary); }
.sex-split__item b { color: var(--text-primary); font-weight: 700; }
.sex-split__item--men b { color: var(--accent-primary); }
.sex-split__item--women b { color: var(--accent-secondary); }

/* ===== CSS-бары: ширина через класс .w-N (без inline style=) ===== */
.barlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.barrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
.barrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.barrow__label { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow__val { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barrow__track { position: relative; height: 10px; border-radius: 999px; background: var(--bg-primary); overflow: hidden; }
[data-theme="dark"] .barrow__track { background: rgba(255,255,255,0.05); }
.barrow__fill { position: absolute; inset: 0 auto 0 0; width: var(--bar-pct, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-info)); animation: stats-bar-grow 700ms cubic-bezier(0.16,1,0.3,1) both; }
.barrow--coral .barrow__fill { background: linear-gradient(90deg, var(--accent-secondary), #fda99c); }
.barrow--muted .barrow__fill { background: linear-gradient(90deg, var(--text-muted), var(--border-color)); }
@keyframes stats-bar-grow { from { width: 0; } to { width: var(--bar-pct, 0%); } }

/* ширина баров шагом 5% (вместо style="--bar-pct") */
.w-0 { --bar-pct: 0%; } .w-5 { --bar-pct: 5%; } .w-10 { --bar-pct: 10%; } .w-15 { --bar-pct: 15%; }
.w-20 { --bar-pct: 20%; } .w-25 { --bar-pct: 25%; } .w-30 { --bar-pct: 30%; } .w-35 { --bar-pct: 35%; }
.w-40 { --bar-pct: 40%; } .w-45 { --bar-pct: 45%; } .w-50 { --bar-pct: 50%; } .w-55 { --bar-pct: 55%; }
.w-60 { --bar-pct: 60%; } .w-65 { --bar-pct: 65%; } .w-70 { --bar-pct: 70%; } .w-75 { --bar-pct: 75%; }
.w-80 { --bar-pct: 80%; } .w-85 { --bar-pct: 85%; } .w-90 { --bar-pct: 90%; } .w-95 { --bar-pct: 95%; }
.w-100 { --bar-pct: 100%; }

/* ===== «что это значит» подпись ===== */
.meaning { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.55; margin: 0.25rem 0 0; }
.meaning strong { color: var(--text-primary); }

/* ===== §10 — строка-источник под карточкой ===== */
.dash-source { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--border-color); }
.dash-source > i { color: var(--accent-primary); }
.dash-source__link { color: var(--accent-primary); font-weight: 600; text-decoration: none; }
.dash-source__link:hover { color: var(--accent-secondary); text-decoration: underline; }

/* ===== таблица «все показатели» ===== */
.alltable { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.alltable th, .alltable td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-color); }
.alltable th { color: var(--text-secondary); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.alltable td { color: var(--text-primary); }
.alltable td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.alltable a { color: var(--accent-primary); text-decoration: none; font-weight: 600; }
.alltable a:hover { text-decoration: underline; }
.alltable tr:last-child td { border-bottom: none; }

/* ===== jtp-* (ranked-bar) — на /Stats jobs.css не загружается, копия ===== */
.jobs-top-positions { margin-bottom: 0; }
.jtp-list { list-style: none; padding: 0; margin: 0.85rem 0 0; }
.jtp-list__item + .jtp-list__item { margin-top: 0.5rem; }
.jtp-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 0.85rem; width: 100%; padding: 0.6rem 0.7rem; border: 1px solid transparent; border-radius: 12px; background: transparent; color: inherit; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.jtp-row:hover { background: var(--bg-primary); border-color: var(--border-color); transform: translateX(2px); }
.jtp-rank { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.jtp-list__item:nth-child(1) .jtp-rank { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.jtp-list__item:nth-child(2) .jtp-rank { background: rgba(17,139,138,0.12); color: var(--accent-primary); border-color: rgba(17,139,138,0.25); }
.jtp-list__item:nth-child(3) .jtp-rank { background: rgba(252,108,101,0.12); color: var(--accent-secondary); border-color: rgba(252,108,101,0.25); }
.jtp-body { display: block; min-width: 0; }
.jtp-body__title { display: block; color: var(--text-primary); font-size: 0.95rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.4rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jtp-row:hover .jtp-body__title { color: var(--accent-primary); }
.jtp-bar { display: block; position: relative; height: 8px; border-radius: 999px; background: var(--bg-primary); overflow: hidden; }
[data-theme="dark"] .jtp-bar { background: rgba(255,255,255,0.05); }
.jtp-bar__fill { position: absolute; inset: 0 auto 0 0; width: var(--bar-pct, 0%); background: linear-gradient(90deg, var(--accent-primary), var(--accent-info)); border-radius: 999px; animation: stats-bar-grow 700ms cubic-bezier(0.16,1,0.3,1) both; }
.jtp-list__item:nth-child(3n+2) .jtp-bar__fill { background: linear-gradient(90deg, var(--accent-info), var(--accent-primary)); }
.jtp-list__item:nth-child(3n+3) .jtp-bar__fill { background: linear-gradient(90deg, var(--accent-secondary), #fda99c); }
.jtp-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 56px; }
.jtp-meta__count { font-size: 1rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.jtp-meta__pct { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.jobs-top-positions__footer { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; color: var(--text-muted); font-size: 0.85rem; }
.jobs-top-positions__footer strong { color: var(--text-primary); font-weight: 700; }
.jobs-top-positions__week { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 999px; font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; }
.jobs-top-positions__week > i { color: var(--accent-primary); font-size: 0.85rem; }
.salary-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: rgba(17,139,138,0.10); color: var(--accent-primary); font-weight: 700; font-size: 0.95rem; border: 1px solid rgba(17,139,138,0.2); }
[data-theme="dark"] .salary-pill { background: rgba(45,212,191,0.12); border-color: rgba(45,212,191,0.25); }

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    .barrow__fill, .jtp-bar__fill { animation: none; }
}