/* ced-charts.css — Premium chart styling for ced-charts.js
   Depends on Ced design tokens (--bg-*, --tx-*, --f-*, --sh-*, --r-*).
   Chart palette: --ch-1 through --ch-12.
   Glass tooltip, synced crosshair, legend toggle, minimal ink grid. */

/* ── CHART PALETTE ───────────────────────────────────────── */
:root {
  --ch-1:#3b82f6; --ch-2:#ef4444; --ch-3:#22c55e; --ch-4:#f59e0b;
  --ch-5:#8b5cf6; --ch-6:#ec4899; --ch-7:#06b6d4; --ch-8:#f97316;
  --ch-9:#14b8a6; --ch-10:#a855f7; --ch-11:#6366f1; --ch-12:#84cc16;

  --ch-grid:rgba(255,255,255,.08);
  --ch-axis:rgba(255,255,255,.45);
  --ch-tip-bg:rgba(9,8,13,.82);
  --ch-tip-bdr:rgba(255,255,255,.10);
}

/* Koligo theme — warm gold palette, navy grid */
[data-theme="koligo"] {
  --ch-1:#c4a265; --ch-2:#ef6b4a; --ch-3:#2db88a; --ch-4:#4a8ff0;
  --ch-5:#dbb97a; --ch-6:#e0607e; --ch-7:#3ac9c1; --ch-8:#f0a830;
  --ch-9:#6b9f5b; --ch-10:#a87be0; --ch-11:#5b8dd9; --ch-12:#d4c26a;

  --ch-grid:rgba(196,162,101,.08);
  --ch-axis:rgba(255,255,255,.50);
  --ch-tip-bg:rgba(6,13,26,.85);
  --ch-tip-bdr:rgba(196,162,101,.12);
}

/* Cream surface — dark chart ink on light background */
[data-surface="cream"] {
  --ch-1:#8c6430; --ch-2:#c44a2e; --ch-3:#1a8a5a; --ch-4:#2d6bc4;
  --ch-5:#a07038; --ch-6:#b8405a; --ch-7:#1a8a8a; --ch-8:#c47820;
  --ch-9:#4a7a3a; --ch-10:#7a50b8; --ch-11:#3a60b8; --ch-12:#8a9a30;

  --ch-grid:rgba(26,21,16,.12);
  --ch-axis:rgba(26,21,16,.92);
  --ch-tip-bg:rgba(26,21,16,.92);
  --ch-tip-bdr:rgba(196,162,101,.15);
}

/* ── CONTAINER ───────────────────────────────────────────── */
.ax {
  position: relative;
  width: 100%;
}
.ax svg {
  display: block;
}
.ax-wrap {
  position: relative;
  width: 100%;
}

/* ── RANGE SELECTOR ─────────────────────────────────────── */
.ax-range {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 10px;
}
.ax-range-presets {
  display: flex;
  gap: 2px;
  border: 1px solid var(--ch-grid);
  border-radius: 8px;
  padding: 2px;
}
.ax-range-btn {
  background: none;
  border: none;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--ch-axis);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ax-range-btn:hover { background: var(--ch-grid); }
.ax-range-btn.active {
  background: #c4a265;
  color: #0a0d1a;
}
.ax-range-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.ax-range-sep {
  color: var(--ch-axis);
  font-size: .75rem;
}
.ax-range-input {
  background: transparent;
  border: 1px solid var(--ch-grid);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--ch-axis);
  outline: none;
  transition: border-color .15s;
}
.ax-range-input:focus { border-color: var(--ch-axis); }
.ax-range-input::-webkit-calendar-picker-indicator {
  filter: invert(.5);
}

/* ── GRID (horizontal only, minimal ink) ─────────────────── */
.ax-grid line {
  stroke: var(--ch-grid);
  stroke-width: 1;
  stroke-dasharray: 4,4;
}

/* ── AXES (floating labels, no axis lines) ───────────────── */
.ax-axes text {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--ch-axis);
  letter-spacing: .02em;
}

/* ── MARKS (reference lines + bands, behind data) ────────── */
.ax-mark-line {
  stroke-width: 1;
  stroke-dasharray: 6,3;
  opacity: 0.6;
}
.ax-mark-label {
  font-family: var(--f-mono);
  font-size: 9px;
  fill: var(--ch-axis);
}

/* ── SERIES ──────────────────────────────────────────────── */
.ax-s {
  transition: opacity .2s ease;
}
.ax-line {
  vector-effect: non-scaling-stroke;
}
.ax-bar {
  transition: opacity .15s ease;
}
.ax-dot {
  transition: opacity .15s ease;
}
.ax-wedge {
  stroke: var(--bg-0);
  stroke-width: 2;
}
.ax-pie-label {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  fill: var(--bg-0);
}

/* ── CROSSHAIR (dashed, subtle) ──────────────────────────── */
.ax-cross {
  stroke: var(--ch-axis);
  stroke-width: 1;
  stroke-dasharray: 4,3;
  opacity: 0.4;
  pointer-events: none;
}

/* ── TOOLTIP (glass panel, sorted values) ────────────────── */
.ax-tip {
  /* absolute (NOT fixed) — matches the ceduix SSOT. The JS positions the tip
     in coordinates RELATIVE to the `.ax` chart element (relX = clientX -
     elRect.left) and clamps it inside the chart box, so the offset parent must
     be `.ax` (position: relative). `position: fixed` resolves those same numbers
     against the viewport / nearest transform|filter|backdrop ancestor instead,
     sending the tip to a page-dependent location far from the cursor. The JS
     already keeps the tip within the box, so no overflow:hidden ancestor can
     clip it — `fixed` bought nothing and broke placement. */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: var(--ch-tip-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ch-tip-bdr);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--sh-lg, 0 12px 48px rgba(0,0,0,.7));
  padding: 10px 14px;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  font-family: var(--f-ui);
  min-width: 140px;
  /* Cap WIDTH only — names ellipsis so the box can't grow wider than the chart.
     No height cap / no scroll: the tooltip always shows every row. */
  max-width: 380px;
}

.ax-tip-time {
  font-family: var(--f-mono);
  font-size: .7rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
  margin-bottom: 6px;
  white-space: nowrap;
}

.ax-tip-row {
  /* grid so the value lands in its own right-aligned column — values line up
     across rows (and within each column in 2-col mode) regardless of name
     length. The name column truncates with ellipsis to keep width bounded. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  font-size: .8rem;
  line-height: 1.6;
}

.ax-tip-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;            /* allow the label to shrink so ellipsis engages */
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}

.ax-tip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ax-tip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ax-tip-val {
  justify-self: end;       /* own column, right-aligned */
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
}

/* Tooltip multi-column for many series */
.ax-tip-rows {}
.ax-tip-cols {
  column-count: 2;
  column-gap: 20px;
}
.ax-tip-cols .ax-tip-row {
  break-inside: avoid;
}

/* Hover emphasis — series nearest the cursor renders fatter; its tooltip row
   is bigger/bolder. JS toggles .ax-active (series) + .ax-tip-row-active (row). */
.ax-s.ax-active .ax-line { stroke-width: 3; }
.ax-s.ax-active .ax-mark { r: 3.5; }
.ax-tip-row-active { font-size: .92rem; line-height: 1.55; }
.ax-tip-row-active .ax-tip-name { color: var(--tx-0); font-weight: 600; }
.ax-tip-row-active .ax-tip-dot {
  width: 9px; height: 9px; border-radius: 3px;
  box-shadow: 0 0 0 2px var(--ch-tip-bg, rgba(0,0,0,.4));
}
.ax-tip-row-active .ax-tip-val { font-weight: 700; font-size: 1em; }

/* ── LEGEND (columnar, click to toggle, sorted by value) ── */
.ax-leg {
  column-width: 210px;
  column-gap: 4px;
  padding: 8px 0 0;
}

.ax-leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: opacity .2s ease;
  font-size: .78rem;
  break-inside: avoid;
  height: 22px;
}
.ax-leg-item.off {
  opacity: 0.3;
}
.ax-leg-item.off .ax-leg-dot {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    var(--tx-3) 2px,
    var(--tx-3) 3px
  ) !important;
}

.ax-leg-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ax-leg-name {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--tx-2);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ax-leg-val {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--tx-1);
  margin-left: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── HEATMAP ────────────────────────────────────────────── */
.ax-heatmap { }
.ax-heat-cell {
  transition: opacity .15s ease;
}
.ax-heat-cell:hover {
  opacity: 0.8;
  stroke: var(--ch-axis);
  stroke-width: 1.5;
}
.ax-heat-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
}
.ax-heat-x,
.ax-heat-y {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  fill: var(--ch-axis);
}
.ax-heat-legend-label {
  font-family: var(--f-mono);
  font-size: 10px;
  fill: var(--ch-axis);
}

/* ── MOBILE TOOLTIP ──────────────────────────────────────────
   On narrow viewports keep the tip compact and let many-series content
   scroll instead of covering the screen. The JS still positions it
   relative to the chart box (clamped within bounds) on touch as on
   desktop — there is no separate docking codepath. */
@media (max-width: 640px) {
  .ax-tip {
    max-width: calc(100vw - 16px);
    padding: 8px 10px;
    font-size: .85rem;
  }
  .ax-tip-row { gap: 10px; }
  .ax-tip-name { min-width: 0; }   /* allow the label to shrink so ellipsis engages */
  .ax-tip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 38vw;               /* short names on phone — dot colour + value still identify the series */
  }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ax-tip,
  .ax-s,
  .ax-bar,
  .ax-dot,
  .ax-leg-item { transition: none; }
}