/* Working Point Explorer — tool-specific styles.
   Layout (body.mt-app), sidebar sections, inputs, buttons and
   collapsibles come from shared/theme.css.  This page is mirrored:
   charts on the left, the control panel (.panel) on the right. */

.panel { --panel-w: 340px; }

/* ══════════════════════════════════════════════════════════
   Charts column
   ══════════════════════════════════════════════════════════ */
.charts-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.chart-wrap,
.sweep-chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chart-wrap { position: relative; flex: 1; }
.sweep-chart-wrap { height: 280px; flex-shrink: 0; }
canvas { flex: 1; min-height: 0; }
#chart { cursor: default; }

/* ── Draggable working-point box (floats over the main chart) ── */
.info-box {
  position: absolute;
  top: 30px; right: 20px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  display: none;         /* shown once a working point exists */
  cursor: grab;
  user-select: none;
  box-shadow: var(--shadow-lg);
  z-index: 10;
  overflow: hidden;
}
.info-box.dragging { cursor: grabbing; }
.info-box-handle {
  background: var(--hint-bg);
  border-bottom: 1px solid var(--border);
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-box-handle::before { content: '⠿'; color: var(--text3); }
.info-box-body { padding: 8px 12px 10px; white-space: pre; }

/* ── key / value / unit / note tables (info box + Fixed Speed) ── */
.wp-kv { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.wp-kv td { padding: 1px 0; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-xs); }
.wp-kv .k { padding-right: 8px; color: var(--text2); }
.wp-kv .v { text-align: right; padding-right: 4px; font-weight: 500; }
.wp-kv .u { padding-right: 10px; color: var(--text2); }
.wp-kv .n { font-family: var(--sans); color: var(--text3); }
.wp-kv.ok  .v { color: var(--green); }
.wp-kv.bad .v { color: var(--red); }
.wp-kv-head { padding-bottom: 6px !important; color: var(--text2); }
.wp-kv.ok  .wp-kv-head b { color: var(--green); }
.wp-kv.bad .wp-kv-head b { color: var(--red); }
.wp-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.wp-badge.ok  { background: color-mix(in srgb, var(--green) 14%, var(--surface)); color: var(--green); }
.wp-badge.bad { background: color-mix(in srgb, var(--red) 12%, var(--surface));   color: var(--red); }

/* ── torque split bar ── */
.wp-tbar { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; white-space: normal; }
.wp-tbar-legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text2);
  margin-bottom: 4px;
}
.wp-tbar-track {
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  background: var(--bar-bg);
}
.wp-tbar-a, .wp-tbar-f {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  transition: width .3s ease;
}
/* same blue / amber as the T_A / T_F series in the chart */
.wp-tbar-a { background: #2563eb; color: #fff; }
.wp-tbar-f { background: #f59e0b; color: #1f1300; }
.wp-tbar-ratio { margin-top: 6px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text2); }
.wp-tbar-ratio b { color: var(--accent); }

/* ── fixed-speed marker over the chart (currently disabled in app.js) ── */
.speed-marker-box {
  position: absolute;
  display: none;
  z-index: 9;
  pointer-events: none;
  min-width: 180px;
  padding: 6px 10px 8px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border: 1.5px solid var(--green);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.speed-marker-box table { border-collapse: collapse; width: 100%; }
.speed-marker-box td { padding: 1px 0; white-space: nowrap; }
.sm-head {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--green);
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.sm-status { float: right; font-weight: 400; }
.speed-marker-box .sm-sym  { color: var(--text2); padding-right: 6px; }
.speed-marker-box .sm-val  { font-weight: 600; color: var(--green); text-align: right; padding-right: 5px; }
.speed-marker-box .sm-unit { color: var(--text2); }

/* ══════════════════════════════════════════════════════════
   Control panel
   ══════════════════════════════════════════════════════════ */
.motor-group,
.fixed-box,
.fixed-speed-box,
.oil-box,
.query-box,
.sweep-box,
.torque-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  flex-shrink: 0;
}
.section-title .wp-hint-inline {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text3);
  margin-left: 4px;
}
/* small secondary line under a label, e.g. "Target speed" */
.wp-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text3);
  margin-top: 1px;
}

.motor-select {
  width: 100%;
  height: var(--ctl-h);
  margin-top: 8px;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border-s);
  border-radius: var(--r-sm);
  outline: none;
  cursor: pointer;
}
.motor-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-l); }
#motorSelect { border-color: var(--accent); background: var(--accent-l); color: var(--accent-d); font-weight: 600; }

/* label | input  and  label | slider | input rows */
.fixed-row,
.oil-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.param-row,
.fixed-speed-row,
.oil-row.oil-row-3 {
  display: grid;
  grid-template-columns: 104px 1fr 64px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.fixed-label,
.oil-label,
.param-row .param-label {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.3;
}
.param-row .param-label { white-space: nowrap; transition: color .2s; }
.param-label.modified        { color: var(--amber); font-weight: 600; }
.param-label.modified::after { content: ' *'; }
.param-row .param-input,
.fixed-speed-row .param-input,
.oil-row-3 .param-input { padding: 0 6px; }

/* measured values: editable, tinted to show they are the calibration reference */
.fixed-val {
  width: 100%;
  height: var(--ctl-h);
  padding: 0 9px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: right;
  color: var(--accent-d);
  background: var(--accent-l);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--surface));
  border-radius: var(--r-sm);
  outline: none;
  cursor: text;
}
.fixed-val:focus { border-color: var(--accent); background: var(--surface); }

.query-btn-green { background: var(--green); }
.query-btn-green:hover { background: color-mix(in srgb, var(--green) 85%, #000); }
.wp-full { width: 100%; margin-top: 8px; }

.wp-fs-result { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.wp-oil-result {
  min-height: 16px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--green);
  text-align: right;
}

/* sliders */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--track);
  outline: none;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .1s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: pointer;
}

/* oil database editor */
.oildb-hint { font-size: var(--fs-xs); color: var(--text2); line-height: 1.55; margin-top: 6px; }
.oildb-card { padding: 8px 0; border-bottom: 1px dashed var(--border-s); }
.oildb-card:first-child { padding-top: 6px; }
.oildb-card-head { display: flex; gap: 6px; align-items: center; }
.oildb-card-head .oildb-name { flex: 1; text-align: left; }
.oildb-del {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.oildb-del:hover { color: var(--red); }
.oildb-point-row {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.oildb-mini-label { font-size: var(--fs-xs); color: var(--text2); }

/* parameter sweep */
.wp-sweep-field { margin-top: 8px; }
.wp-mini-label { font-size: var(--fs-xs); color: var(--text2); margin-bottom: 4px; }
.wp-sweep-field .motor-select { margin-top: 0; }
.wp-range-row { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.wp-range-row .wp-mini-label { margin: 0; }
.wp-range-row .param-input { flex: 1; min-width: 0; }

/* curve warning: shown by app.js via style.display */
.warning-box { display: none; font-family: var(--mono); }

/* ══════════════════════════════════════════════════════════
   Saved working-point cards
   ══════════════════════════════════════════════════════════ */
.query-cards-wrap { max-height: 220px; overflow-y: auto; min-height: 0; }
.query-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.query-card {
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s;
}
.query-card:hover { box-shadow: var(--shadow-lg); }
.query-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--hint-bg);
  cursor: pointer;
}
.query-card-chevron {
  font-size: 10px;
  color: var(--text3);
  transition: transform .15s;
  flex-shrink: 0;
}
.query-card.expanded .query-card-chevron { transform: rotate(90deg); }
.query-card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.query-card-title {
  flex: 1;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.query-card-del {
  background: none;
  border: none;
  font-size: var(--fs-sm);
  color: var(--text3);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.query-card-del:hover { color: var(--red); }
.query-card-body {
  display: none;
  padding: 6px 10px 8px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
}
.query-card.expanded .query-card-body,
.query-card.expanded .query-card-hint { display: block; }
.query-card-body table { border-collapse: collapse; width: 100%; }
.query-card-body td { padding: 0 4px 0 0; white-space: nowrap; }
.query-card-body td:first-child { color: var(--text2); }
.query-card-body td:last-child  { text-align: right; }
.query-card-hint {
  display: none;
  padding: 0 10px 6px;
  font-size: 11px;
  color: var(--text3);
  background: var(--surface);
}

/* ══════════════════════════════════════════════════════════
   Fixed-speed toggle / torque box (kept for the toggle UI)
   ══════════════════════════════════════════════════════════ */
.fixed-speed-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.torque-bar-wrap { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════
   ≤ 900px: stacked layout (must stay last to override the above)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .charts-col { overflow: visible; }
  .chart-wrap { flex: none; }
  .chart-wrap canvas { flex: none; height: 360px !important; }
  /* no room to float over the chart on a phone: show it below instead */
  .info-box { position: static; margin-top: 10px; box-shadow: none; cursor: default; }
  .info-box-handle::before { content: none; }
}