/* Indicators v1.1 (public/js/ui/indicatorEditor.js, indicatorTemplates.js, chart/legend.js): the indicator editor and
   templates, and the legend additions (hover eye, chips, sub-pane legends, hidden rows). Uses the shell's colours
   (styles.css :root); loads after styles.css, so .ind-panel here wins over v1's 340 px. */

/* ---- legend ---- */
/* The eye is absolutely positioned right after the row: an un-hovered row's name, x and value sit exactly where v1
   put them, and nothing takes the pointer over the chart. Hovering the name (or the x) makes the whole row hoverable,
   so the pointer can glide along it to the eye. */
.lg-ind { position: relative; }
.lg-ind:hover { pointer-events: auto; }
.lg-ind .lg-eye {
  position: absolute; left: 100%; top: 0; width: 22px; height: 18px; min-width: 0; padding: 0 0 0 4px;
  display: grid; place-items: center; border-radius: 3px; color: var(--muted); background: transparent;
  opacity: 0; pointer-events: none;
}
.lg-ind .lg-eye svg { width: 14px; height: 14px; }
.lg-ind:hover .lg-eye, .lg-ind .lg-eye:focus-visible { opacity: 1; pointer-events: auto; }
.lg-ind .lg-eye:hover { color: var(--text); background: transparent; }
.lg-ind.lg-hidden .lg-eye { opacity: 0.8; pointer-events: auto; }
.lg-ind.lg-hidden .lg-name, .lg-ind.lg-hidden .lg-ck, .lg-ind.lg-hidden .lg-msg { opacity: 0.45; }
.lg-chip { display: inline-flex; gap: 4px; align-items: baseline; margin-right: 4px; }
.lg-chip-off { opacity: 0.4; }
.lg-ck { opacity: 0.8; }
.lg-msg { color: var(--muted); }
.lg-panes { position: static; }
.legend-pane { position: absolute; left: 0; width: max-content; }
.legend-pane .lg-row { min-height: 16px; }

/* ---- the editor (500 px popover) ---- */
.ind-panel.ind-editor { width: 500px; max-width: calc(100vw - 16px); padding-bottom: 8px; outline: none; }
.ind-editor .panel-head { display: flex; align-items: center; justify-content: space-between; }
.ind-editor .ip-revert { height: 20px; padding: 0 6px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.ind-editor .ip-revert:hover { color: var(--text); }
.ind-editor .ip-list { list-style: none; margin: 0; padding: 0 6px; }
.ind-editor .ip-list li.ip-row {
  display: grid; align-items: center; gap: 4px; padding: 3px 2px; border-radius: 4px;
  grid-template-columns: 12px 22px 104px 56px 70px 28px 48px 66px 20px 22px;
}
.ind-editor .ip-list li.ip-row.focus { background: rgba(41, 98, 255, 0.12); }
.ind-editor .ip-list li.ip-row.ip-hidden > :not(.ip-eye):not(.ip-x):not(.ip-handle) { opacity: 0.5; }
.ind-editor .ip-list li.dragging { opacity: 0.4; }
.ind-editor .ip-list li.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.ind-editor .ip-list li.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.ind-editor .ip-list li.empty { color: var(--muted); padding: 6px 4px; }
.ind-editor .ip-list select, .ind-editor .ip-list input { width: 100%; min-width: 0; padding: 0 4px; }
.ind-editor .ip-list input[type="color"] { padding: 1px 2px; }
.ind-editor .ip-handle { display: grid; place-items: center; height: 24px; color: var(--muted); cursor: grab; }
.ind-editor .ip-handle svg { width: 8px; height: 14px; fill: currentColor; stroke: none; }
.ind-editor .ip-eye, .ind-editor .ip-exp, .ind-editor .ip-x { width: 22px; min-width: 0; height: 24px; padding: 0; display: grid; place-items: center; color: var(--muted); }
.ind-editor .ip-eye[aria-pressed="true"] { color: var(--muted); background: transparent; opacity: 0.7; }
.ind-editor .ip-eye svg { width: 14px; height: 14px; }
.ind-editor .ip-exp { width: 20px; }
.ind-editor .ip-exp svg { width: 12px; height: 12px; transition: transform 0.12s; }
.ind-editor .ip-exp[aria-expanded="true"] svg { transform: rotate(90deg); }
.ind-editor .ip-eye:hover, .ind-editor .ip-exp:hover, .ind-editor .ip-x:hover { color: var(--text); }
.ind-editor .ip-blank { display: block; }
.ind-editor .ip-hint { grid-column: 1 / -1; color: var(--down); font-size: 11px; padding: 1px 2px 2px 38px; }
.ind-editor [aria-invalid] { border-color: var(--down); }

/* expanded settings of a multi-line kind */
.ind-editor .ip-list li.ip-more {
  margin: 0 2px 4px 38px; padding: 6px 8px; border-left: 2px solid var(--line); display: block;
}
.ind-editor .ip-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.ind-editor .ip-fields label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 11px; }
.ind-editor .ip-fields label small { color: var(--muted); opacity: 0.8; font-size: 10px; }
.ind-editor .ip-fields input, .ind-editor .ip-fields select { color: var(--text); font-size: 12px; }
.ind-editor .ip-check { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--text) !important; font-size: 12px !important; }
.ind-editor .ip-check input { width: auto; height: auto; }
.ind-editor .ip-lines { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.ind-editor .ip-line { display: grid; grid-template-columns: 1fr 22px 28px 76px; gap: 4px; align-items: center; }
.ind-editor .ip-line-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-editor li.ip-more .ip-hint { padding-left: 0; }

.ind-editor .ip-add { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 2px; }
.ind-editor .ip-add button { border: 1px solid var(--line); padding: 0 7px; }

/* ---- templates ---- */
.ip-tpls .ip-tpl-list { list-style: none; margin: 0; padding: 0 6px; }
.ip-tpls .ip-tpl-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px; align-items: center; }
.ip-tpls .ip-tpl-main {
  width: 100%; height: auto; min-height: 30px; padding: 4px 6px; text-align: left; display: flex; flex-direction: column; gap: 1px; overflow: hidden;
}
.ip-tpls .ip-tpl-main span, .ip-tpls .ip-tpl-main small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-tpls .ip-tpl-main small { color: var(--muted); }
.ip-tpls .ip-tpl-btn { height: 24px; padding: 0 7px; color: var(--muted); border: 1px solid transparent; }
.ip-tpls .ip-tpl-btn:hover { color: var(--text); border-color: var(--line); }
.ip-tpls .ip-tpl-more { width: 26px; padding: 0; }
.ip-tpls .ip-tpl-menu, .ip-tpls .ip-tpl-edit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px 6px; padding: 4px 6px;
  border-left: 2px solid var(--line);
}
.ip-tpls .ip-tpl-menu button, .ip-tpls .ip-tpl-edit button { border: 1px solid var(--line); height: 24px; width: auto; }
.ip-tpls .ip-tpl-edit input { flex: 1; min-width: 160px; }
.ip-tpls .ip-tpl-edit .ip-hint { flex-basis: 100%; }
.ip-tpls button.danger { color: var(--down); }
.ip-tpls .ip-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.ip-tpls .ip-muted { color: var(--muted); padding: 4px 6px; font-size: 11px; list-style: none; }
.ip-tpls .ip-error { color: var(--down); }
.ip-tpls .ip-save { padding: 6px 8px 0; }
.ip-tpls .ip-save-open { border: 1px solid var(--line); }
.ip-tpls .ip-save-open:disabled { opacity: 0.5; cursor: default; }
.ip-tpls .ip-save-form { display: flex; flex-direction: column; gap: 6px; }
.ip-tpls .ip-save-form input[type="text"] { width: 100%; }
.ip-tpls .ip-check { display: flex; align-items: center; gap: 6px; }
.ip-tpls .ip-check b { font-weight: 600; }
.ip-tpls .ip-hint { color: var(--down); font-size: 11px; }
.ip-tpls .ip-save-actions { display: flex; gap: 6px; }
.ip-tpls .ip-save-actions button { border: 1px solid var(--line); }
.ip-tpls .ip-save-actions button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }

/* With a % from MA sub-pane the auto/manual badge sits at the foot of the price axis (chart.js placeAxisBadge):
   an opaque background keeps it readable over the axis. */
.axis-mode.in-axis:not(.manual) { background: var(--bg); }