/* owl-chart.css — styling for the shared OWL chart module (public/js/owl-chart.js)
 *
 * Two surfaces share one core:
 *   - Modal popup (.owlc-backdrop > .owlc-card) — watchlist, positions, moverlist.
 *   - Inline embed (.owlc-inline)              — details.
 *
 * Palette matches OWL's slate-on-black look so the chart feels native, not like
 * a bolted-on third-party widget. Class prefix `owlc-` to avoid collisions with
 * any page's existing styles. Extracted from the original inline chart in
 * public/moverlist.html (the `.chart-modal-*` / `.chart-pane-*` rules).
 */

/* ---------- modal shell ---------- */
.owlc-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.owlc-card {
  background: #020617;
  border: 1px solid #334155;
  border-radius: 8px;
  width: min(1200px, 100%);
  height: min(820px, 100%);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.owlc-header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid #1e293b;
  background: #0a0e1a;
  flex-shrink: 0;
}
.owlc-title { font-size: 16px; font-weight: 700; color: #fff; }
.owlc-title .owlc-ticker { color: #fcd34d; margin-right: 8px; }
.owlc-title .owlc-name { font-size: 14px; font-weight: 400; color: #cbd5e1; }
.owlc-meta {
  font-size: 12px; color: #94a3b8;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.owlc-meta .owlc-delta-up { color: #4ade80; font-weight: 600; }
.owlc-meta .owlc-delta-down { color: #f87171; font-weight: 600; }
.owlc-toggles { display: flex; gap: 6px; margin-left: auto; }
.owlc-mode-btn {
  padding: 4px 12px; font-size: 12px; font-weight: 600;
  border-radius: 4px; border: 1px solid #475569; background: #1e293b;
  color: #cbd5e1; cursor: pointer;
}
.owlc-mode-btn:hover { background: #334155; border-color: #94a3b8; }
.owlc-mode-btn.active { background: #3b82f6; border-color: #60a5fa; color: #fff; }
.owlc-mode-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.owlc-close {
  background: transparent; border: none; color: #94a3b8;
  font-size: 20px; line-height: 1; padding: 2px 8px;
  cursor: pointer; border-radius: 4px;
}
.owlc-close:hover { color: #fff; background: #1e293b; }

/* ---------- inline shell ---------- */
.owlc-inline {
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
  height: 560px;
}
.owlc-inline-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px;
  border-bottom: 1px solid #1e293b;
  background: #0a0e1a;
  flex-shrink: 0;
}
.owlc-inline .owlc-toggles { margin-left: auto; }

/* ---------- panes (shared) ---------- */
.owlc-panes {
  flex: 1; display: flex; flex-direction: column;
  background: #020617; min-height: 0;
}
/* price+volume 58%, RSI & CMO ~21% each — oscillators readable without
 * crowding the price action. Flex-basis driven so the chart resizes
 * gracefully on smaller viewports. */
.owlc-pane { width: 100%; position: relative; }
.owlc-pane.owlc-pane-price { flex: 0 0 58%; border-bottom: 1px solid #1e293b; }
.owlc-pane.owlc-pane-rsi { flex: 0 0 21%; border-bottom: 1px solid #1e293b; }
.owlc-pane.owlc-pane-cmo { flex: 0 0 21%; }

/* In-pane overlay row: pane label + SMA legend + crosshair-hover readout,
 * anchored top-LEFT so it can't bleed under the right-side price axis. */
.owlc-pane-overlay {
  position: absolute; top: 4px; left: 10px;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 14px;
  max-width: calc(100% - 80px);
  pointer-events: none; z-index: 2;
}
.owlc-pane-label {
  font-size: 10px; font-weight: 700; color: #94a3b8;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.owlc-legend {
  font-size: 10px; color: #cbd5e1;
  display: inline-flex; gap: 10px;
}
.owlc-legend .owlc-swatch {
  display: inline-block; width: 10px; height: 2px;
  margin-right: 4px; vertical-align: middle;
}
.owlc-hover {
  font-size: 11px;
  font-family: 'SF Mono','Monaco','Consolas',monospace;
  color: #e2e8f0;
  display: inline-flex; gap: 10px; flex-wrap: wrap;
}
.owlc-hover .hk { color: #64748b; }
.owlc-hover .hv-up { color: #4ade80; }
.owlc-hover .hv-down { color: #f87171; }

/* Hide the TradingView attribution baked into Lightweight Charts. The
 * v4.2.x layout option to disable it is unreliable across builds, so we
 * belt-and-brace via CSS. The library still renders fine. */
.owlc-pane a[href*="tradingview.com"] { display: none !important; }

/* ---------- status line (shared) ---------- */
.owlc-status {
  padding: 6px 14px;
  font-size: 11px; color: #64748b;
  background: #0a0e1a; border-top: 1px solid #1e293b;
  display: flex; gap: 14px; align-items: center;
  flex-shrink: 0;
}
.owlc-status .owlc-source-badge { padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.owlc-status .owlc-source-cache { background: #065f46; color: #a7f3d0; }
.owlc-status .owlc-source-live { background: #7f1d1d; color: #fecaca; }
.owlc-status .err { color: #fca5a5; }

/* ---------- trigger button (watchlist / positions / moverlist) ---------- */
.owl-chart-btn {
  background: #0f172a; border: 1px solid #334155; color: #94a3b8;
  border-radius: 4px; cursor: pointer; font-size: 13px;
  padding: 2px 6px; line-height: 1;
}
.owl-chart-btn:hover { background: #1e293b; border-color: #38bdf8; color: #7dd3fc; }
.owl-chart-btn[data-state="pending"] { cursor: wait; opacity: 0.7; }

/* ---------- chart link (clickable Last Price → popup) ---------- */
/* Applied to a table cell (watchlist desktop) or the mobile price block. Keeps
 * the existing value styling but signals it's clickable: pointer cursor +
 * dotted underline that brightens on hover. */
.owl-chart-link { cursor: pointer; }
td.owl-chart-link { text-decoration: underline dotted rgba(148, 163, 184, 0.6); text-underline-offset: 3px; }
td.owl-chart-link:hover { color: #7dd3fc; text-decoration-color: #38bdf8; }
.owl-chart-link .price-value { text-decoration: underline dotted rgba(148, 163, 184, 0.6); text-underline-offset: 3px; }
.owl-chart-link:hover .price-value { color: #7dd3fc; text-decoration-color: #38bdf8; }