/* chart.css — styles for the chart.js component (.sr-chart).
   Uses the app tokens from styles/base.css / index.html:
   --bg --panel --panel2 --line (--border fallback) --text --muted --faint --gold --green --red
   Dark mode via html[data-theme="dark"] (tokens flip there; only a few overrides needed). */

.sr-chart {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--text, #0d0d0d);
  border: 1px solid var(--line, var(--border, #e6e6e6));
  border-radius: 2px;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- legend row ------------------------------------------------------- */

.sr-chart-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line, var(--border, #e6e6e6));
  background: var(--panel, #fff);
  font-size: 11px;
  line-height: 1.3;
}

.sr-chart-legend-data {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.sr-chart-legend-time {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--muted, #5f5f5f);
  white-space: nowrap;
}

.sr-chart-legend-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.sr-chart-legend-item .k {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted, #5f5f5f);
}
/* indicator chips get a coloured dot (colour passed as --dot from chart.js) */
.sr-chart-legend-item[style*="--dot"] .k::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 4px;
  border-radius: 1px;
  background: var(--dot);
  vertical-align: 1px;
}
.sr-chart-legend-item .v {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text, #0d0d0d);
}
.sr-chart-legend-item.up .v   { color: var(--green, #097a42); }
.sr-chart-legend-item.down .v { color: var(--red, #c92a26); }

/* ---- toolbar buttons -------------------------------------------------- */

.sr-chart-legend-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.sr-chart-btn {
  appearance: none;
  background: var(--panel2, #f6f6f6);
  color: var(--muted, #5f5f5f);
  border: 1px solid var(--line, var(--border, #e6e6e6));
  border-radius: 2px;
  padding: 3px 8px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.sr-chart-btn:hover { color: var(--gold, #9a5500); border-color: var(--gold, #9a5500); }
.sr-chart-btn:focus-visible { outline: 2px solid var(--gold, #9a5500); outline-offset: 1px; }
.sr-chart-btn.active { background: var(--gold, #9a5500); border-color: var(--gold, #9a5500); color: #fff; }

/* ---- panes ------------------------------------------------------------ */

.sr-chart-pane {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;            /* let the library own horizontal gestures, page keeps vertical scroll */
}
.sr-chart-pane + .sr-chart-pane { border-top: 1px solid var(--line, var(--border, #e6e6e6)); }
.sr-chart-pane[hidden] { display: none !important; }

/* pane label (RSI / MACD) in the top-left corner */
.sr-chart-pane.rsi::before,
.sr-chart-pane.macd::before {
  position: absolute;
  z-index: 2;
  left: 6px; top: 4px;
  pointer-events: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--faint, #767676);
}
.sr-chart-pane.rsi::before  { content: "RSI 14"; }
.sr-chart-pane.macd::before { content: "MACD 12 26 9"; }

/* the library's own container needs no extra chrome */
.sr-chart-pane .tv-lightweight-charts { outline: none; }

/* ---- annotation affordances ------------------------------------------- */

.sr-chart.add-mode .sr-chart-pane.main { cursor: crosshair; }
.sr-chart.add-mode .sr-chart-pane.main::after {
  content: "Click at a price to add a level";
  position: absolute;
  z-index: 2;
  right: 80px; top: 6px;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--gold, #9a5500);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}
.sr-chart-pane.main.near-annotation,
.sr-chart-pane.main.near-annotation canvas { cursor: ns-resize; }
.sr-chart-pane.main.dragging,
.sr-chart-pane.main.dragging canvas { cursor: grabbing; }

/* ---- empty state ------------------------------------------------------- */

.sr-chart-empty {
  position: absolute;
  inset: 29px 0 0 0;               /* below the legend row */
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--panel, #fff);
  color: var(--muted, #5f5f5f);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
}
.sr-chart-empty[hidden] { display: none !important; }
.sr-chart.is-empty { min-height: 160px; }

/* ---- dark mode --------------------------------------------------------- */

html[data-theme="dark"] .sr-chart,
.sr-chart[data-theme="dark"] {
  border-color: var(--line, var(--border, #26262a));
}
html[data-theme="dark"] .sr-chart-legend,
.sr-chart[data-theme="dark"] .sr-chart-legend,
html[data-theme="dark"] .sr-chart-empty,
.sr-chart[data-theme="dark"] .sr-chart-empty {
  background: var(--panel, #141416);
  border-color: var(--line, var(--border, #26262a));
}
html[data-theme="dark"] .sr-chart-btn,
.sr-chart[data-theme="dark"] .sr-chart-btn {
  background: var(--panel2, #1b1b1e);
}

/* ---- narrow screens ----------------------------------------------------- */

@media (max-width: 480px) {
  .sr-chart-legend { padding: 4px 6px; }
  .sr-chart-legend-data { gap: 2px 8px; }
  .sr-chart-legend-item .v { font-size: 10.5px; }
  .sr-chart.add-mode .sr-chart-pane.main::after { display: none; }
}