/* Дашборды ТЗ №93: «Группа», «Динамика», «Нагрузка и смены», «Голос клиента во времени», плеер с отметками, виды, колокольчик. Цвета и размеры — только переменные tokens.css. */

/* ---- графики с несколькими линиями (components/chart.js#renderMultiLineChart) ---- */
.series-0 { --series: var(--text-tertiary); }
.series-1 { --series: var(--org-1); }
.series-2 { --series: var(--org-2); }
.series-3 { --series: var(--org-3); }
.series-4 { --series: var(--org-4); }
.series-5 { --series: var(--org-5); }
.series-6 { --series: var(--org-6); }
.chart-multi-line { fill: none; stroke: var(--series); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-multi-dot { fill: var(--series); }
.chart-swatch { display: inline-block; width: var(--sp-3); height: var(--sp-3); border-radius: var(--radius-sm); background: var(--series); margin-right: var(--sp-2); vertical-align: middle; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; margin: var(--sp-2) 0 0; padding: 0; font-size: var(--fs-caption); color: var(--text-secondary); }
.chart-legend-value { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.chart-axis-title { fill: var(--text-tertiary); }
.chart-mark-dot { fill: var(--chart-marker); }
.chart-mark-task .chart-mark-dot { fill: var(--org-4); }
.chart-mark-task .chart-marker { stroke: var(--org-4); }
.chart-multi { overflow-x: auto; }
.chart-multi-svg { height: auto; max-height: 20rem; min-width: 34rem; }

/* ---- тепловые карты (components/heatmap.js) ---- */
.heat-wrap { overflow-x: auto; }
.heat-table { border-collapse: separate; border-spacing: 2px; width: 100%; font-variant-numeric: tabular-nums; }
.heat-table th { font-weight: 500; font-size: var(--fs-caption); color: var(--text-secondary); padding: var(--sp-1) var(--sp-2); text-align: center; white-space: nowrap; }
.heat-table th.heat-row-head { text-align: left; position: sticky; left: 0; background: var(--card-bg, var(--content-bg)); }
.heat-cell { min-width: 2.5rem; min-height: 44px; height: 44px; text-align: center; font-size: var(--fs-caption); border-radius: var(--radius-sm); padding: 0 var(--sp-1); }
.heat-cell a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 44px; color: inherit; text-decoration: none; }
.heat-0 { background: var(--ds-neutral-bg); color: var(--ds-neutral-fg); }
.heat-ok { background: var(--ds-ok-bg); color: var(--ds-ok-fg); }
.heat-warn { background: var(--ds-warn-bg); color: var(--ds-warn-fg); }
.heat-bad { background: var(--ds-bad-bg); color: var(--ds-bad-fg); }
.heat-off { background: transparent; color: var(--text-tertiary); border: 1px dashed var(--card-border); }
.heat-short { background: var(--ds-neutral-bg); color: var(--text-tertiary); }
.heat-i1 { background: color-mix(in srgb, var(--ds-info-fg) 14%, var(--content-bg)); }
.heat-i2 { background: color-mix(in srgb, var(--ds-info-fg) 28%, var(--content-bg)); }
.heat-i3 { background: color-mix(in srgb, var(--ds-info-fg) 44%, var(--content-bg)); }
.heat-i4 { background: color-mix(in srgb, var(--ds-info-fg) 62%, var(--content-bg)); color: var(--text-primary); }
.heat-legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-secondary); margin-top: var(--sp-2); }
.heat-legend span::before { content: ""; display: inline-block; width: var(--sp-3); height: var(--sp-3); border-radius: var(--radius-sm); margin-right: var(--sp-1); vertical-align: middle; background: var(--ds-neutral-bg); }
.heat-legend .heat-ok::before { background: var(--ds-ok-bg); }
.heat-legend .heat-warn::before { background: var(--ds-warn-bg); }
.heat-legend .heat-bad::before { background: var(--ds-bad-bg); }

/* ---- «Группа» ---- */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--sp-4); }
.group-card { border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card-bg, var(--content-bg)); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.group-card h3 { margin: 0; font-size: var(--fs-body); }
.group-card h3 a { color: inherit; text-decoration: none; }
.group-metrics { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-caption); margin: 0; }
.group-metrics dt { color: var(--text-secondary); }
.group-metrics dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.group-delta { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.group-delta.good { color: var(--ds-ok-fg); }
.group-delta.badd { color: var(--ds-bad-fg); }
.group-toolbar { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin: var(--sp-3) 0; }
.group-small-chart svg { height: 7rem; }

/* ---- плеер с отметками (pages/call/player_marks.js) ---- */
.pm-wrap { position: relative; }
.pm-track { position: relative; height: 44px; margin-top: var(--sp-2); }
.pm-mark { position: absolute; top: 0; width: 1.75rem; height: 44px; margin-left: -0.875rem; background: transparent; border: 0; padding: 0; cursor: pointer; }
.pm-mark::before { content: ""; position: absolute; left: 50%; top: var(--sp-1); bottom: var(--sp-1); width: 4px; margin-left: -2px; border-radius: var(--radius-sm); background: var(--pm-color, var(--chart-marker)); }
.pm-mark:focus-visible { outline: 2px solid var(--brand-primary); }
.pm-mark.pm-mistake { --pm-color: var(--ds-warn-fg); }
.pm-mark.pm-objection { --pm-color: var(--org-4); }
.pm-mark.pm-flag { --pm-color: var(--ds-bad-fg); }
.pm-mark.pm-agreement { --pm-color: var(--ds-ok-fg); }
.pm-legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-secondary); }
.pm-legend span::before { content: ""; display: inline-block; width: var(--sp-1); height: var(--sp-3); border-radius: var(--radius-sm); margin-right: var(--sp-1); vertical-align: middle; background: var(--pm-color, var(--chart-marker)); }
.pm-legend .pm-mistake { --pm-color: var(--ds-warn-fg); }
.pm-legend .pm-objection { --pm-color: var(--org-4); }
.pm-legend .pm-flag { --pm-color: var(--ds-bad-fg); }
.pm-legend .pm-agreement { --pm-color: var(--ds-ok-fg); }
.pm-controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-2); }
.pm-controls .btn, .pm-controls select { min-height: 44px; }
.pm-line { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: var(--sp-2); border-radius: var(--radius-sm); cursor: pointer; color: inherit; font: inherit; min-height: 44px; }
.pm-line.pm-operator { border-left: 3px solid var(--org-1); }
.pm-line.pm-client { border-left: 3px solid var(--org-2); }
.pm-line.pm-current { background: var(--ds-info-bg, var(--ds-neutral-bg)); }
.pm-line .pm-time { color: var(--text-tertiary); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }
.pm-sticky { position: sticky; bottom: 0; z-index: 5; background: var(--content-bg); }
@media (max-width: 768px) {
  .pm-wrap.pm-fixed { position: fixed; left: 0; right: 0; bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); z-index: 40; background: var(--content-bg); border-top: 1px solid var(--card-border); padding: var(--sp-2) var(--sp-3); }
}

/* ---- сохранённые виды (components/saved_views.js) ---- */
.sv-bar .btn { min-height: 44px; }
.sv-tab { display: inline-flex; align-items: center; text-decoration: none; }
.sv-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0 0 var(--sp-3); }
.sv-tab { min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--content-bg); color: var(--text-secondary); cursor: pointer; }
.sv-tab[aria-selected="true"] { border-color: var(--brand-primary); color: var(--text-primary); }
.sv-shared { font-size: var(--fs-caption); color: var(--text-tertiary); margin-left: var(--sp-1); }
.sv-manage { display: flex; flex-direction: column; gap: var(--sp-2); }
.sv-manage li { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* ---- колокольчик (components/bell.js) ---- */
.bell-btn { position: relative; min-width: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
.bell-btn[hidden] { display: none; }
.bell-btn .bell-label { display: none; }
.bottom-nav .bell-btn { flex-direction: column; font-size: var(--fs-12); margin-left: 0; }
.bottom-nav .bell-btn { min-width: 0; }
.bottom-nav .bell-btn .bell-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-count { position: absolute; top: var(--sp-1); right: var(--sp-1); min-width: 1.25rem; height: 1.25rem; border-radius: var(--radius-pill); background: var(--ds-bad-fg); color: var(--content-bg); font-size: var(--fs-12); line-height: 1.25rem; text-align: center; padding: 0 var(--sp-1); }
.bell-panel { position: fixed; right: var(--sp-3); top: 3.5rem; width: min(24rem, calc(100vw - 2 * var(--sp-3))); max-height: 70vh; overflow: auto; background: var(--content-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop, none); z-index: 60; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--card-border); }
.bell-empty, .bell-foot { padding: var(--sp-3); margin: 0; }
.bell-item { display: block; padding: var(--sp-3); border-bottom: 1px solid var(--card-border); color: inherit; text-decoration: none; min-height: 44px; }
.bell-item.unread { background: var(--ds-info-bg, var(--ds-neutral-bg)); }
.bell-item small { display: block; color: var(--text-tertiary); }
.bottom-nav .bell-btn { flex: 1; }

/* ---- мобильные: крупные строки и кнопки ---- */
@media (max-width: 768px) {
  .heat-cell { min-width: 44px; }
  .group-grid { grid-template-columns: 1fr; }
  .sv-tab, .btn { min-height: 44px; }
}
.chart-stack { fill: var(--series); stroke: var(--content-bg); stroke-width: 1; }
.chart-stack:hover { opacity: 0.85; }

/* ---- «Динамика», «Смены», «Голос клиента во времени»: общие мелочи ---- */
.dyn-block { margin-bottom: var(--gap-blocks); }
.dyn-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-3); }
.dyn-note { margin: var(--sp-2) 0 0; font-size: var(--fs-caption); }
.dyn-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.dyn-chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; padding: 0 var(--sp-2); border: 1px solid var(--card-border); border-radius: var(--radius-pill); cursor: pointer; }
.dyn-chip input { margin-right: var(--sp-1); }
.dyn-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--sp-4); }
.dyn-h { font-size: var(--fs-body); margin: 0 0 var(--sp-2); }
.dyn-list { margin: 0; padding-left: var(--sp-5, 1.5rem); display: flex; flex-direction: column; gap: var(--sp-2); }
.dyn-list li { min-height: 44px; }
.dyn-change { font-variant-numeric: tabular-nums; margin-left: var(--sp-1); }
.dyn-change.up { color: var(--ds-ok-fg); }
.dyn-change.down { color: var(--ds-bad-fg); }
.spike-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.spike-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); border-radius: var(--radius-pill); background: var(--ds-bad-bg); color: var(--ds-bad-fg); text-decoration: none; }

/* ---- отметки на дорожке плеера (ТЗ №93, п. 5): рядом с прежними засечками .tick-mark / .tick-evidence / .tick-issue ---- */
.tick-mistake { background: var(--ds-warn-fg); }
.tick-objection { background: var(--org-4); }
.tick-flag { background: var(--ds-bad-fg); }
.tick-agreement { background: var(--ds-ok-fg); }
.progress-tick { min-width: 6px; }
.progress-tick::after { content: ""; position: absolute; left: -9px; right: -9px; top: -12px; bottom: -12px; }
.player-check { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-size: var(--fs-caption); color: var(--text-secondary); }
@media (max-width: 768px) { .player-card .player-check { display: inline-flex; } }
.saved-views-slot { margin: 0 0 var(--sp-3); }
@media print { .saved-views-slot { display: none; } }
.voice-trends-fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: var(--fw-strong); }
.voice-trends-fold[open] > summary { margin-bottom: var(--sp-3); }
.voice-trends-fold .dyn-block { margin-bottom: var(--sp-3); }
.rows-collapsed tr[data-extra] { display: none; }
.my-direct-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.my-direct-list li { padding: var(--sp-2) 0; min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); }

/* «На линии были: …» под плиткой «Пропущено за смену» (ТЗ №93, п. 10): одна компактная строка, чтобы «Сегодня» оставалась в пределах высоты. */
.shift-online { margin: var(--sp-4) 0 0; font-size: var(--fs-12); line-height: 1.3; }