/* Стили графика и навигации группами. Живут отдельно от app.css: тот файл правится
   в другой зоне, а версии ассетов в base.html подняты вместе с этим файлом. */

/* --- График --------------------------------------------------------------- */
.chart-svg { width: 100%; height: 100%; overflow: visible; }
.chart-axis { fill: var(--color-fg-dim); font: 10px var(--font-mono); }
.chart-area { stroke: none; fill: var(--color-accent); opacity: .14; }
.chart-area.purple { fill: #b2a3f4; }
.chart-area.amber { fill: var(--color-warning); }
.chart-point, .chart-dot { fill: var(--color-accent); stroke: var(--color-bg-elevated); stroke-width: 2; }
.chart-point.purple, .chart-dot.purple { fill: #b2a3f4; }
.chart-point.amber, .chart-dot.amber { fill: var(--color-warning); }
.series.amber { stroke: var(--color-warning); }

.chart-cursor { opacity: 0; pointer-events: none; transition: opacity .12s; }
.chart-cursor.is-on { opacity: 1; }
.chart-cursor-line { stroke: var(--color-border-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

.chart-tip { position: absolute; z-index: 5; display: grid; gap: 6px; min-width: 138px; max-width: 230px; padding: 9px 11px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: #0f1519f5; box-shadow: 0 12px 34px #0008; color: var(--color-fg); font-size: 11px; pointer-events: none; }
.chart-tip[hidden] { display: none; }
.chart-tip-time { color: var(--color-fg-dim); font: 10px var(--font-mono); }
.chart-tip-row { display: flex; align-items: center; gap: 8px; }
.chart-tip-row i { flex: 0 0 10px; width: 10px; height: 2px; border-radius: 2px; background: var(--color-fg-dim); }
.chart-tip-row i.cyan { background: var(--color-accent); }
.chart-tip-row i.purple { background: #b2a3f4; }
.chart-tip-row i.amber { background: var(--color-warning); }
.chart-tip-row b { margin-left: auto; font: 11px var(--font-mono); font-weight: 550; }
.chart-tip-row em { color: var(--color-fg-dim); font-style: normal; font: 10px var(--font-mono); }

/* Кнопки периода. В app.css оформлены ссылки, а период теперь переключается без перехода. */
.periods button { display: grid; place-items: center; min-width: 40px; min-height: 32px; padding: 6px 9px; border: 0; border-radius: 4px; background: none; color: var(--color-fg-muted); font: inherit; font-size: 11px; cursor: pointer; transition: color .18s, background .18s; }
.periods button:hover:not(:disabled) { color: var(--color-fg); background: #ffffff08; }
.periods button.is-active, .periods button[aria-pressed="true"] { color: var(--color-accent); background: #56dbcb14; }
.periods button:disabled { opacity: .5; cursor: default; }

.chart-block { position: relative; }
.chart-block.is-loading .chart { opacity: .45; transition: opacity .15s; }
.chart-note { margin: 0 22px 16px; color: var(--color-warning); font-size: 11px; }
.chart-window { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0 22px 18px; color: var(--color-fg-dim); font-size: 11px; }
.chart-window > span { display: flex; align-items: baseline; gap: 7px; }
.chart-window [data-window] { color: var(--color-fg); font: 12px var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Навигация группами ---------------------------------------------------- */
/* Раскрытие держит нативный <details>: меню работает даже без единой строки CSS. */
.nav-group + .nav-group { margin-top: 12px; }
.nav-group-title { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 14px; color: var(--color-fg-dim); font-size: 10px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; cursor: pointer; list-style: none; }
.nav-group-title::-webkit-details-marker { display: none; }
.nav-group-title:hover { color: var(--color-fg-muted); }
.nav-group-title::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); transition: transform .18s; }
.nav-group[open] > .nav-group-title::after { transform: translateY(1px) rotate(45deg); }
.nav-group-links { display: grid; gap: 4px; padding-bottom: 2px; }
.nav-badge { display: inline-grid; place-items: center; min-width: 21px; height: 19px; margin-left: auto; padding: 0 6px; border-radius: 5px; background: #56dbcb18; color: var(--color-accent); font: 10px var(--font-mono); }
.nav-badge.warn { background: #fb929218; color: var(--color-danger); }
.nav-link.active .nav-badge { margin-right: 2px; }

@media (max-width: 760px) {
  .periods button { min-height: 38px; }
  .chart-tip { font-size: 12px; }
  .nav-group-title { min-height: 36px; }
}