/* css/meter.css — Floating instrument styles (redesign v3)
   Meter body is transparent — all visual comes from SVG.
   All overlay positions use % based on each meter's viewBox ratio.        */

/* ── Meter body ─────────────────────────────────────────────────────────── */
.meter-body {
  position: absolute;
  cursor: move;
  user-select: none;
  z-index: 500;
  background: transparent;   /* SVG provides all visuals — no white box   */
  border: none;
  box-shadow: none;          /* shadow via SVG drop-shadow filter          */
  border-radius: 0;
  overflow: visible;         /* allow jaw to be visible above body rect    */
}

/* Block canvas terminal dots from bleeding inside meter (defensive) */
.meter-body .terminal,
.meter-body .comp-sel-box,
.meter-body .comp-handle,
.meter-body .comp-label { display: none !important; }

/* SVG fills width; height follows viewBox aspect ratio */
.meter-body > svg {
  display: block;
  width: 100%;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.52));
  overflow: visible;
}

/* ── Size: matches new viewBox widths ────────────────────────────────────── */
.meter-multimeter { width: 130px; }   /* viewBox 0 0 130 223 */
.meter-clamp      { width: 100px; }   /* viewBox 0 0 100 240 */

/* ── LCD display overlay ─────────────────────────────────────────────────── */
/* Multimeter: SVG LCD rect x=8 y=24 w=114 h=38 (in 130×210)
   Clamp:      SVG LCD rect x=10 y=100 w=80 h=40 (in 100×240)             */
.meter-display {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: #2a5a00;
  background: transparent;
  text-align: right;
  letter-spacing: 1.5px;
  position: absolute;
  padding: 0 5px;
  text-shadow: 0 0 6px rgba(60,100,0,0.5);
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Multimeter LCD: dikalibrasi ke posisi layar pada avometer.svg */
.meter-multimeter .meter-display {
  top: 17%; height: 14%;
  left: 8%; right: 8%;
  font-size: 1em;
}
/* Clamp LCD: 100/240=41.7% from top, 40/240=16.7% height */
.meter-clamp .meter-display {
  top: 41.7%; height: 16.7%;
  left: 10%; right: 10%;
  font-size: 0.9em;
}

/* ── Selector row ────────────────────────────────────────────────────────── */
.meter-selector-row {
  position: absolute;
  left: 4px; right: 4px;
  height: 22px;
  display: flex;
  gap: 2px;
}
/* Multimeter: overlay area rotary dial pada avometer.svg */
.meter-multimeter .meter-selector-row { top: 62%; }
/* Clamp: 155/240=64.6% — just inside rotary top */
.meter-clamp .meter-selector-row      { top: 64.6%; }

.mm-mode, .cl-mode {
  all: unset;
  flex: 1;
  height: 22px;
  line-height: 22px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  background: rgba(0,0,0,0.45);
  color: #eee;
  font-size: 0.58em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: Arial, sans-serif;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
  backdrop-filter: blur(2px);
}
.mm-mode.active, .cl-mode.active {
  background: #f59f00;
  color: #1a1a1a;
  border-color: #f59f00;
}
.mm-mode:hover:not(.active), .cl-mode:hover:not(.active) {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* ── Probe sockets (multimeter only) ─────────────────────────────────────── */
/* Probe sockets: dikalibrasi ke posisi jack pada avometer.svg */
.meter-probes-row {
  position: absolute;
  bottom: 3.5%;
  left: 0; right: 0;
  height: 6.5%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.probe-socket {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid;
  cursor: crosshair;
  transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 0;             /* hide emoji character */
  color: transparent;
  flex-shrink: 0;
}
.probe-socket::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #111;
  display: block;
  pointer-events: none;
}
.probe-socket.probe-red   { background: #7a0000; border-color: #ff6b6b; }
.probe-socket.probe-black { background: #111;    border-color: #f59f00; }
.probe-socket:hover { transform: scale(1.5); }

/* ── Clamp jaw button ────────────────────────────────────────────────────── */
/* Position: 199/240=82.9% from top */
.clamp-jaw-btn {
  all: unset;
  position: absolute;
  top: 82.9%;
  left: 10%; right: 10%;
  height: 9.2%;             /* 22/240 */
  line-height: 1;
  padding: 0;
  background: rgba(0,0,0,0.55);
  color: #51cf66;
  border: 1.5px solid #51cf66;
  border-radius: 5px;
  font-size: 0.65em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: Arial, sans-serif;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.clamp-jaw-btn:hover {
  background: rgba(81,207,102,0.25);
  color: #fff;
}

/* ── Delete button ───────────────────────────────────────────────────────── */
.meter-delete-btn {
  position: absolute;
  top: -8px; right: -8px;
  width: 20px; height: 20px;
  background: #e03131;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  display: none;
  z-index: 10;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.meter-body:hover .meter-delete-btn { display: block; }

/* ── Burnout overlay ─────────────────────────────────────────────────────── */
.meter-burnout-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  color: #ff6b6b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82em;
  font-weight: bold;
  border-radius: 12px;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.meter-reset-btn {
  padding: 5px 12px;
  background: #f59f00;
  color: #1a1a1a;
  border: none;
  border-radius: 6px;
  font-size: 0.72em;
  font-weight: bold;
  cursor: pointer;
  margin-top: 4px;
  font-family: Arial, sans-serif;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes meterBurn {
  0%,100% { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.52)); }
  30%      { filter: drop-shadow(0 0 24px rgba(255,50,50,0.95)); }
  60%      { filter: drop-shadow(0 0 16px rgba(255,140,0,0.8)); }
}
.meter-burning > svg { animation: meterBurn 0.6s ease; }
.meter-burned  { opacity: 0.75; filter: grayscale(0.4) sepia(0.4); }

/* Clamp jaw animation */
.clamp-jaw-l { transition: transform 0.22s ease; }
.clamp-jaw-r { transition: transform 0.22s ease; }
.clamp-jaw-l.jaw-closing { transform: translateX(8px); }
.clamp-jaw-r.jaw-closing { transform: translateX(-8px); }

/* Pulse saat mode jepit aktif */
body.clamp-mode .clamp-jaw-l,
body.clamp-mode .clamp-jaw-r {
  animation: jawPulse 0.75s ease-in-out infinite alternate;
}
@keyframes jawPulse {
  from { opacity: 0.6; }
  to   { opacity: 1; filter: drop-shadow(0 0 5px rgba(81,207,102,0.85)); }
}

/* ── Cursor modes ────────────────────────────────────────────────────────── */
body.clamp-mode .canvas-container { cursor: crosshair !important; }
body.clamp-mode .cable-path {
  cursor: crosshair !important;
  filter: drop-shadow(0 0 5px rgba(245,159,0,0.7)) !important;
}

/* ── Sidebar meter cards ─────────────────────────────────────────────────── */
.meter-card { cursor: grab; }
.meter-card:active { cursor: grabbing; }

/* ── Analog AVO meter ───────────────────────────────────────────────────── */
/* viewBox 100×134 | pivot SVG (50,110) | jarum dalam SVG, bukan div        */
.meter-analog { width: 100px; }

/* Jarum sebagai SVG <g>: transform-origin di pivot (50px,110px) SVG space  */
.avo-needle-svg {
  transform-origin: 50px 110px;
  transform: rotate(-45deg);   /* rest = 0V */
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Probe sockets: display:contents membuat probe langsung relatif ke .meter-body */
.meter-analog .meter-probes-row {
  display: contents;
}
.meter-analog .probe-socket {
  position: absolute;
  top: 83.6%;              /* cy=112/134 = 83.6% dari atas .meter-body     */
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  pointer-events: auto;
  background: transparent;
  border-color: transparent;
}
.meter-analog .probe-socket::after { background: transparent; }
.meter-analog .probe-socket.probe-black { left: 25%; }
.meter-analog .probe-socket.probe-red   { left: 75%; }
.meter-analog .probe-socket.probe-red:hover {
  background: rgba(200,42,42,0.55);
  border-color: #ff6b6b;
  box-shadow: 0 0 8px rgba(200,42,42,0.8);
}
.meter-analog .probe-socket.probe-black:hover {
  background: rgba(180,180,180,0.2);
  border-color: #aaa;
  box-shadow: 0 0 8px rgba(180,180,180,0.5);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .meter-multimeter { width: 105px; }
  .meter-clamp      { width: 82px;  }
  .meter-avometer   { width: 105px; }
  .meter-multimeter .meter-display { font-size: 0.85em; letter-spacing: 1px; }
  .meter-clamp      .meter-display { font-size: 0.75em; }
}

/* ── AVOMETER Analog Multimeter (full-featured) ───────────────────────────── */
/* viewBox 0 0 130 205 | pivot SVG (65,85) | knob center SVG (65,123)         */
.meter-avometer { width: 130px; }

/* Jarum dalam SVG — pivot (65,85), dirotasi via JS physics, tanpa CSS transition */
.avo-meter-needle-svg {
  transform-origin: 65px 85px;
  transform: rotate(-45deg);
}

/* Probe sockets: COM kiri 20%, V/Ω/A tengah 50%                              */
/* cy terminal = 173/205 = 84.4%                                              */
.meter-avometer .meter-probes-row { display: contents; }
.meter-avometer .probe-socket {
  position: absolute;
  top: 84.4%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  pointer-events: auto;
  background: transparent;
  border-color: transparent;
}
.meter-avometer .probe-socket::after { background: transparent; }
.meter-avometer .probe-socket.probe-black { left: 20%; }
.meter-avometer .probe-socket.probe-red   { left: 50%; }
.meter-avometer .probe-socket.probe-red:hover {
  background: rgba(200,42,42,0.55);
  border-color: #ff6b6b;
  box-shadow: 0 0 8px rgba(200,42,42,0.8);
}
.meter-avometer .probe-socket.probe-black:hover {
  background: rgba(180,180,180,0.2);
  border-color: #aaa;
  box-shadow: 0 0 8px rgba(180,180,180,0.5);
}

/* Zona drag transparan di atas knob selector                                  */
/* Knob center: 50% H, 123/205=60% V | diameter=50px (r=25)                  */
.avo-meter-rotary-zone {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: grab;
  background: transparent;
  z-index: 10;
}
.avo-meter-rotary-zone:active { cursor: grabbing; }

/* ── Multimeter: rotary dial interaction ─────────────────────────────────── */

/* Zona drag transparan di atas area rotary SVG                              */
/* Rotary center: 50% horizontal, 62.8% vertical (140/223px)                */
.mm-rotary-zone {
  position: absolute;
  left: 50%;
  top: 62.8%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: grab;
  background: transparent;
  z-index: 10;
}
.mm-rotary-zone:active { cursor: grabbing; }

/* Jarum indikator mode: pangkal di rotary center, ujung ke atas (12 o'clock) */
.mm-dial-indicator {
  position: absolute;
  bottom: 37.2%;
  left: calc(50% - 2px);
  width: 4px;
  height: 22px;
  background: linear-gradient(to bottom, #f59f00, #e74c3c);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom center;
  transform: rotate(0deg);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 9;
  filter: drop-shadow(0 0 4px rgba(231,76,60,0.8));
}

/* Probe row: posisi absolut mengikuti koordinat SVG                         */
/* COM jack: cx=82/130=63.1% | VΩHz jack: cx=111/130=85.4% | cy=200/223=89.7% */
.meter-multimeter .meter-probes-row {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.meter-multimeter .probe-socket {
  position: absolute;
  top: 89.7%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  pointer-events: auto;
  background: transparent;
  border-color: transparent;
}
.meter-multimeter .probe-socket::after { background: transparent; }
.meter-multimeter .probe-socket.probe-black { left: 63.1%; }
.meter-multimeter .probe-socket.probe-red   { left: 85.4%; }
.meter-multimeter .probe-socket.probe-red:hover {
  background: rgba(200,42,42,0.55);
  border-color: #ff6b6b;
  box-shadow: 0 0 8px rgba(200,42,42,0.8);
}
.meter-multimeter .probe-socket.probe-black:hover {
  background: rgba(200,200,200,0.2);
  border-color: #cccccc;
  box-shadow: 0 0 8px rgba(200,200,200,0.5);
}

/* LCD overlay: x=8,y=21,w=114,h=38 dalam viewBox 130×223                   */
/* top=21/223=9.4% | height=38/223=17% | left=8/130=6.2% right=8/130=6.2%  */
.meter-multimeter .meter-display {
  top: 9.5%;
  height: 17%;
  left: 19%;    /* skip area AC/DC di kiri (24/130=18.5%) */
  right: 6.5%;
  color: #1a3a1a;
  font-size: 0.95em;
}