/* ===== Cosmic Viz — графики и таблицы по правилам dataviz (классы cv-*, cosmic-viz.js) =====
   Эталон — «Аналитика ТТ.pro» (cosmic-ttpro.css). Тонкие марки, волосяные линии, шапки таблиц
   обычным регистром, числа в колонках tabular, текст цветом текста (не цветом серии).
   Палитра из crm-theme.css; цвета серий — проверенные валидатором (#3b82f6 / #0ea5b7 / #d97706). */

.cv-keys { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; }
.cv-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.cv-key i { width: 14px; height: 2px; border-radius: 2px; }
.cv-key-sq i { width: 9px; height: 9px; border-radius: 2px; }
.cv-muted { color: var(--text-3); }
[data-cv-pane][hidden] { display: none !important; }

.cv-chart { position: relative; height: 280px; }
.cv-chart-sm { position: relative; height: 200px; }
.cv-chart-mini { position: relative; height: 130px; }

/* --- Переключатель «График / Таблица» и любые сегменты --- */
.cv-seg { margin-left: auto; display: inline-flex; gap: 4px; padding: 3px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); }
.cv-seg button {
  background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--text-3);
  font-size: 12px; font-family: inherit; padding: 4px 12px; cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.cv-seg button:hover { color: var(--text); }
.cv-seg button.active { color: var(--text); background: var(--accent-soft); border-color: var(--ring); }

/* --- Спарклайны --- */
.cv-spark { display: block; width: 96px; height: 24px; overflow: visible; }
.cv-spark-fluid { width: 100%; height: 26px; margin-top: 8px; }

/* --- Таблицы --- */
.cv-mtable-wrap { overflow-x: auto; container-type: inline-size; }
.cv-mtable-scroll { max-height: 320px; overflow-y: auto; border-top: 1px solid var(--border);
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
table.cv-mtable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 0;
  margin: 0; background: transparent; border-radius: 0; overflow: visible; table-layout: auto; }
/* Глобальные правила таблиц CRM (styles.css, crm-theme.css) идут с !important: капс, разрядка, плашка шапки */
table.cv-mtable thead { background: transparent; }
table.cv-mtable thead th, table.cv-mtable th {
  background: transparent !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 12px !important; color: var(--text-3) !important; font-weight: 500;
  text-align: right; padding: 8px 12px; border-bottom: 1px solid var(--border) !important; white-space: nowrap;
}
.cv-mtable-scroll table.cv-mtable thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2) !important; }
table.cv-mtable td, table.cv-mtable tbody td {
  background: transparent !important; text-align: right; padding: 9px 12px; color: var(--text-2) !important;
  border-bottom: 1px solid var(--border) !important; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle;
}
table.cv-mtable th:first-child, table.cv-mtable td:first-child { text-align: left; padding-left: 2px; }
table.cv-mtable th:last-child, table.cv-mtable td:last-child { padding-right: 2px; }
table.cv-mtable .cv-left { text-align: left; }
table.cv-mtable tbody tr { background: transparent !important; transition: background .15s; }
table.cv-mtable tbody tr:hover td { background: rgba(255,255,255,.025) !important; }
table.cv-mtable tbody tr:last-child td { border-bottom: 0 !important; }
table.cv-mtable tfoot td { border-top: 1px solid var(--border-2) !important; border-bottom: 0 !important; color: var(--text) !important; font-weight: 600; }
table.cv-mtable td.cv-num-strong, table.cv-mtable .cv-num-strong { color: var(--text) !important; font-weight: 600; }
table.cv-mtable tbody .cv-weekend td:first-child { color: var(--text-3) !important; }
.cv-name { color: var(--text); font-weight: 500; }
.cv-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-uid { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text); }
.cv-rank { color: var(--muted) !important; width: 28px; }
.cv-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
  color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.cv-th-short { display: none; }
/* Ширину таблицы определяет колонка, а не окно: в узкой — второстепенные столбцы (.cv-opt) прячутся */
@container (max-width: 720px) {
  table.cv-mtable .cv-opt { display: none; }
}
@container (max-width: 480px) {
  .cv-th-full { display: none; }
  .cv-th-short { display: inline; }
  table.cv-mtable td, table.cv-mtable th { padding-left: 6px; padding-right: 6px; }
  table.cv-mtable th { white-space: normal; }
}
.cv-share { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.cv-share-track { flex: 1 1 120px; min-width: 32px; max-width: 120px; height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, #3b82f6 14%, transparent); }
.cv-share-track i { display: block; height: 100%; border-radius: 3px; background: #3b82f6; transition: width .5s ease; }
.cv-share span { min-width: 44px; flex: none; }
table.cv-mtable td:has(> .cv-share) { width: 28%; }
.cv-delta { font-size: 12px; font-weight: 600; }
.cv-up { color: var(--good); }
.cv-down { color: var(--accent-2); }
.cv-flat { color: var(--text-3); }
.cv-spark-cell { width: 110px; }
.cv-spark-cell .cv-spark { margin-left: auto; }

/* --- Сегментные полосы --- */
.cv-segblock + .cv-segblock { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.cv-segblock-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.cv-segblock-h span { font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.cv-segbar { display: flex; gap: 2px; height: 28px; }
.cv-segpart { min-width: 3px; border-radius: 4px; display: flex; align-items: center; padding: 0 8px;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; transition: filter .15s; }
.cv-segpart:hover { filter: brightness(1.12); }
.cv-seglegend { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.cv-segrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cv-segrow i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cv-segname { flex: 1; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-segval { color: var(--text); font-variant-numeric: tabular-nums; }
.cv-segpct { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.cv-segsingle { font-size: 12.5px; color: var(--text-3); }
.cv-segsingle b { color: var(--text); font-weight: 600; }

/* --- Шкала-доля --- */
.cv-meter { height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--cv-m, #3b82f6) 16%, transparent); }
.cv-meter i { display: block; height: 100%; border-radius: 4px; background: var(--cv-m, #3b82f6); }
.cv-meter-cap { margin-top: 8px; font-size: 12px; color: var(--text-3); }
.cv-meter-cap b { color: var(--text); font-weight: 600; }

/* --- Ранжированные полосы --- */
.cv-hbars { display: flex; flex-direction: column; gap: 9px; }
.cv-hbar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 84px; align-items: center; gap: 12px; }
.cv-hbars-wide .cv-hbar { grid-template-columns: minmax(110px, 30%) minmax(0, 1fr) 84px; }
.cv-hbar-lbl { font-size: 12.5px; color: var(--text-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-hbars-wide .cv-hbar-lbl { text-align: left; }
.cv-hbar-lbl small { display: block; font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.cv-hbar-track { height: 16px; }
.cv-hbar-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #3b82f6; transition: width .5s ease; }
.cv-hbar:hover .cv-hbar-track i { filter: brightness(1.12); }
.cv-hbar-val { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-hbar-val small { color: var(--text-3); font-size: 11.5px; margin-left: 6px; }

@media (max-width: 720px) {
  .cv-chart { height: 230px; }
  .cv-seg { margin-left: 0; }
  .cv-hbar { grid-template-columns: 72px minmax(0, 1fr) 74px; gap: 8px; }
  .cv-hbars-wide .cv-hbar { grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) 70px; }
}
@media (hover: none) and (pointer: coarse) {
  .cv-seg button { padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-share-track i, .cv-hbar-track i { transition: none; }
}