/* Mantrakshar Study Charts Polish
   Fixes unstyled trace toolbar, breadcrumb path, and metadata side panel for study-charts.js.
   Load after study-renderer.css.
*/

:root {
  --mk-chart-bg: #ffffff;
  --mk-chart-soft: #f6f9fd;
  --mk-chart-soft2: #eef5ff;
  --mk-chart-line: #d9e2ef;
  --mk-chart-line2: #cbd8eb;
  --mk-chart-text: #162033;
  --mk-chart-muted: #617189;
  --mk-chart-blue: #234b7a;
  --mk-chart-accent: #8a0f45;
  --mk-chart-green: #0f7b38;
  --mk-chart-warn: #a15c00;
}

/* Main chart card/wrapper */
.mk-chart-card {
  background: #ffffff;
  border: 1px solid var(--mk-chart-line);
  border-radius: 18px;
  padding: 18px;
  margin: 22px 0;
  box-shadow: 0 8px 28px rgba(10, 40, 80, .055);
}

.mk-chart-card > h3 {
  margin: 0 0 14px;
  color: #193c66;
  font-size: 22px;
  font-weight: 950;
}

.mk-chart {
  position: relative;
  width: 100%;
  min-height: 420px;
  border: 1px dashed var(--mk-chart-line2);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

/* Glyph trace shell generated by study-charts.js */
.mk-chart-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e7edf7;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  position: sticky;
  top: 0;
  z-index: 5;
}

.mk-chart-toolbar button,
.mk-chart-clear {
  appearance: none;
  border: 1px solid #cfd9e8;
  background: #ffffff;
  color: #234b7a;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(10, 40, 80, .055);
}

.mk-chart-toolbar button:hover,
.mk-chart-clear:hover {
  background: #eef5ff;
  border-color: #b7c9e3;
}

/* Two-column trace layout */
.mk-chart-trace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  padding: 14px;
  background: #fbfdff;
}

@media (max-width: 980px) {
  .mk-chart-trace {
    grid-template-columns: 1fr;
  }
}

.mk-chart-wrap {
  min-width: 0;
  position: relative;
  border: 1px solid #dce6f4;
  border-radius: 16px;
  background:
    radial-gradient(circle at 1px 1px, rgba(35, 75, 122, .06) 1px, transparent 0),
    #ffffff;
  background-size: 20px 20px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}

.mk-chart-canvas {
  width: 100%;
  min-height: 520px;
  background: transparent;
}

/* Breadcrumb path — make it look like a path ribbon instead of plain text */
.mk-chart-breadcrumbs {
  position: sticky;
  bottom: 0;
  left: 0;
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  border-top: 1px solid #dce6f4;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  color: #617189;
  font-size: 13px;
  font-weight: 800;
  z-index: 4;
}

.mk-chart-breadcrumbs span {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef5ff;
  color: #234b7a;
  border: 1px solid #d6e4f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-chart-breadcrumbs span.sep {
  background: transparent;
  border: 0;
  color: #9aa8bb;
  padding: 0 2px;
  max-width: none;
}

/* Metadata panel */
.mk-chart-sidepanel {
  align-self: stretch;
  min-width: 0;
  border: 1px solid #dce6f4;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(10, 40, 80, .055);
}

.mk-chart-sidepanel h4 {
  margin: 0;
  padding: 13px 15px;
  font-size: 15px;
  font-weight: 950;
  color: #193c66;
  border-bottom: 1px solid #e7edf7;
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
}

.mk-chart-empty {
  margin: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed #cbd8eb;
  background: #f8fbff;
  color: #617189;
  font-weight: 800;
  text-align: center;
}

/* Metadata table */
.mk-chart-meta-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.mk-chart-meta-table tr + tr th,
.mk-chart-meta-table tr + tr td {
  border-top: 1px solid #edf2f8;
}

.mk-chart-meta-table th,
.mk-chart-meta-table td {
  vertical-align: top;
  padding: 9px 10px;
}

.mk-chart-meta-table th {
  width: 112px;
  color: #162033;
  background: #f4f7fb;
  font-weight: 950;
  text-align: right;
  border-right: 1px solid #edf2f8;
}

.mk-chart-meta-table td {
  color: #243047;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
}

.mk-chart-meta-table td:empty::after {
  content: "—";
  color: #9aa8bb;
}

/* Tooltip images from study-charts.js */
.mk-chart-tooltip-img {
  max-width: 72px;
  max-height: 72px;
  object-fit: contain;
  display: block;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #d9e2ef;
  border-radius: 10px;
  padding: 5px;
}

/* Error box */
.mk-chart-error {
  margin: 16px;
  padding: 16px;
  border-radius: 14px;
  background: #fdeceb;
  color: #b42318;
  border: 1px solid #f2c4c0;
  font-weight: 750;
}

/* Give plain charts a nicer surface too */
.mk-chart:not([data-trace-shell="1"]) {
  background:
    radial-gradient(circle at 1px 1px, rgba(35, 75, 122, .055) 1px, transparent 0),
    #ffffff;
  background-size: 20px 20px;
}

/* ECharts SVG inside chart should not spill visually */
.mk-chart svg {
  max-width: none;
}

/* Compact mode class can be added manually to chart card if desired */
.mk-chart-card.compact .mk-chart-trace {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.mk-chart-card.compact .mk-chart-meta-table th {
  width: 94px;
}

.mk-chart-card.compact .mk-chart-canvas {
  min-height: 440px;
}