/**
 * Аналитика молний на «ДоДепе» (js/dodep-stats.js) и общие детали графиков
 * (js/charts.js).
 *
 * Данные — единственное громкое на экране: сетка и оси волосяные и
 * приглушённые, подписи текстовыми цветами, цвет носят только столбики и
 * линии. Крупные числа в плитках — пропорциональными цифрами (табличные
 * разъезжаются на крупном кегле), в таблице — табличными, чтобы колонки
 * стояли ровно.
 */

.ls { display: grid; gap: var(--s3); transition: opacity .2s var(--ease); }
/* Перезагрузка держит прежнюю картинку приглушённой — без мигания и скачков. */
.ls.loading { opacity: .55; pointer-events: none; }

.ls-bar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.ls-range { font-size: 11px; color: var(--text-mute); }

.ls-card {
  min-width: 0;
  padding: var(--s3) var(--s4) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--bg-1);
  box-shadow: var(--hairline);
}
.ls-card.ls-flush { padding-inline: 0; padding-bottom: 0; overflow: hidden; }
.ls-card.ls-flush .ls-card-h { padding-inline: var(--s4); }

.ls-card-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.ls-card-h h4 { margin: 0; font-size: 12.5px; font-weight: 650; }
.ls-sub { font-size: 11px; color: var(--text-mute); }
.ls-note { margin: var(--s2) 0 0; font-size: 11px; color: var(--text-mute); }
.ls-empty { padding: var(--s5) 0; text-align: center; font-size: 11.5px; color: var(--text-mute); }

/* Легенда повторяет форму метки: прямоугольник для столбиков, черта для линий. */
.ls-legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 11px; color: var(--text-dim); }
.ls-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ls-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ls-legend i.line { height: 2px; width: 14px; border-radius: 1px; }

.ls-row { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: var(--s3); }

/* ── Плитки ───────────────────────────────────────────────────────────── */

.ls-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.ls-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 50%), var(--bg-1);
  box-shadow: var(--hairline);
  overflow: hidden;
}
.ls-tile-l { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); }
.ls-tile-l i { width: 8px; height: 8px; border-radius: 2px; }
.ls-tile-v {
  font-size: 26px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: proportional-nums;
}
.ls-tile-s { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--text-mute); }
.ls-tile-s b { color: var(--text-dim); font-weight: 600; }
.ls-tile .ch-spark { position: absolute; right: var(--s3); top: var(--s3); opacity: .9; }

.ls-delta { font-weight: 600; color: var(--text-dim); }
.ls-delta.good { color: var(--ok); }
.ls-delta.bad { color: var(--err); }

/* Доля внесённого — трек тем же цветом, только бледнее. */
.ls-meter { height: 4px; margin-top: auto; border-radius: var(--r-pill); background: rgba(201, 133, 0, .18); }
.ls-meter i { display: block; height: 100%; border-radius: inherit; background: #c98500; }

/* ── Гильдии ──────────────────────────────────────────────────────────── */

/* Одна полоса на 100%: доли сравниваются длиной, сегменты разделены
   двумя пикселями фона, а не обводкой. */
.ls-stack { display: flex; gap: 2px; height: 14px; margin: var(--s2) 0 var(--s3); }
.ls-stack i { min-width: 3px; }
.ls-stack i:first-child { border-radius: 4px 0 0 4px; }
.ls-stack i:last-child { border-radius: 0 4px 4px 0; }
.ls-stack i:only-child { border-radius: 4px; }

/* Старые взносы без гильдии — штриховка: это не «ещё одна гильдия». */
.hatch {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 6px);
}

.ls-glist { display: grid; gap: 2px; }
.ls-g {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s2);
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}
.ls-g:last-child { border-bottom: 0; }
.ls-key { width: 10px; height: 10px; border-radius: 3px; }
.ls-g-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-g-name small { display: block; font-size: 10px; color: var(--text-mute); }
.ls-g-v { color: var(--text-dim); white-space: nowrap; }
.ls-g-v b { color: var(--text); font-weight: 640; }
.ls-g-n { color: var(--text-mute); font-size: 10.5px; white-space: nowrap; }

/* ── Таблица ──────────────────────────────────────────────────────────── */

.ls-table-wrap { overflow-x: auto; }
.ls-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ls-table th {
  position: sticky;
  top: 0;
  padding: 0;
  background: var(--solid-1);
  border-block: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.ls-table th.txt, .ls-table td.txt { text-align: left; }
/* Заголовок без сортировки — той же капителью, что и кнопки соседей. */
.ls-table th:not(:has(button)) {
  padding: 7px var(--s3);
  color: var(--text-mute);
  font: 700 10px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ls-table th button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-content: inherit;
  padding: 7px var(--s3);
  border: 0;
  background: none;
  color: var(--text-mute);
  font: 700 10px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur), background var(--dur);
}
.ls-table th:not(.txt) button { justify-content: flex-end; }
.ls-table th button:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.ls-table th button i { font-style: normal; opacity: .45; letter-spacing: 0; }
.ls-table th[aria-sort="ascending"] button,
.ls-table th[aria-sort="descending"] button { color: var(--accent-hi); }
.ls-table th[aria-sort="ascending"] button i,
.ls-table th[aria-sort="descending"] button i { opacity: 1; }

.ls-table td {
  padding: 6px var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.ls-table tbody tr { transition: background var(--dur); }
.ls-table tbody tr:hover { background: rgba(146, 115, 238, .07); }
.ls-table td.neg { color: var(--err); }
.ls-table .muted-cell { color: var(--text-mute); }
.ls-table tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .25);
  font-weight: 650;
}

.ls-who { display: inline-flex; align-items: center; gap: var(--s2); max-width: 220px; }
.ls-who em { width: 16px; font-style: normal; font-size: 10.5px; color: var(--text-mute); text-align: right; }
.ls-who img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; background: var(--bg-3); flex: none; }
.ls-who span { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }

/* Число и под ним полоска доли от лучшего — сравнение без отдельного графика. */
.ls-cell { display: inline-grid; justify-items: end; gap: 3px; min-width: 80px; }
.ls-cell b { font-weight: 640; }
.ls-mini { display: block; height: 3px; min-width: 2px; border-radius: 2px; justify-self: end; opacity: .85; }

/* ── Графики (js/charts.js) ───────────────────────────────────────────── */

.ls-chart { min-height: 40px; }
.ch-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.ch-base { stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.ch-ax { fill: var(--text-mute); font: 10px var(--sans); font-variant-numeric: tabular-nums; }
.ch-val { fill: var(--text); font: 600 10.5px var(--sans); }
.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { opacity: .12; }
.ch-dot { stroke: var(--solid-1); stroke-width: 2; }
.ch-hover { opacity: 0; transition: opacity var(--dur); }
.ch-cross { stroke: rgba(255, 255, 255, .25); stroke-width: 1; opacity: 0; }
.ch-svg.hovering .ch-hover, .ch-svg.hovering .ch-cross { opacity: 1; }
.ch-hit { fill: transparent; cursor: crosshair; }
.ch-col { outline: none; }
.ch-col .ch-hit { cursor: default; }
.ch-col path { transition: filter var(--dur); }
.ch-col:hover path, .ch-col:focus-visible path { filter: brightness(1.3); }
.ch-col:hover .ch-hit, .ch-col:focus-visible .ch-hit { fill: rgba(255, 255, 255, .035); }

.ch-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  min-width: 150px;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(16, 13, 29, .96);
  box-shadow: var(--shadow-2);
  font-size: 11.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
}
.ch-tip.on { opacity: 1; }
.ch-tip-h { margin-bottom: 4px; color: var(--text-dim); font-size: 11px; }
.ch-tip-row { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.ch-tip-row i { width: 10px; height: 2px; border-radius: 1px; flex: none; }
.ch-tip-row b { font-weight: 650; font-variant-numeric: tabular-nums; }
.ch-tip-row span { color: var(--text-mute); }

/* ── Адаптив ──────────────────────────────────────────────────────────── */

@media (max-width: 1240px) {
  .ls-row { grid-template-columns: 1fr 1fr; }
  .ls-row > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ls-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ls-row { grid-template-columns: 1fr; }
  .ls-tile-v { font-size: 22px; }
  .ls-tile .ch-spark { display: none; }
  .ls-card { padding-inline: var(--s3); }
}