/* Job monitor — navbar widget.
   Colours are literal hex, not var(--studio-*): those tokens are declared inside
   Sensor_Research_Studio's stylesheet and are undefined on every other page. */

#jm-root { position: relative; }

#jm-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  color: rgba(255, 255, 255, .55); font-size: 20px;
  position: relative; cursor: pointer; background: none; border: 0;
  transition: color .15s;
}
#jm-toggle:hover { color: #55e6d1; text-decoration: none; }
#jm-root.jm-has-active #jm-toggle { color: #55e6d1; }
#jm-icon.jm-idle { opacity: .75; }

#jm-badge {
  position: absolute; top: 5px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: #a892ff; color: #0b0f18;
  font: 700 10px/16px "SFMono-Regular", Consolas, monospace;
  text-align: center; box-shadow: 0 0 10px rgba(168, 146, 255, .55);
}

/* ── dropdown ───────────────────────────────────────────────────── */
#jm-panel {
  display: none;
  position: absolute; top: 48px; right: 0; z-index: 99998;
  width: 340px; max-height: 420px; overflow-y: auto;
  background: #0e131f;
  border: 1px solid rgba(151, 169, 206, .18);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  color: #f5f7fc;
  font-family: Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
}
#jm-panel.jm-open { display: block; }

.jm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid rgba(151, 169, 206, .15);
  font: 700 10px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: #8d97ad;
}

.jm-empty { padding: 26px 16px; text-align: center; font-size: 12px; color: #8d97ad; }

/* ── rows ───────────────────────────────────────────────────────── */
.jm-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; cursor: pointer;
  border-bottom: 1px solid rgba(151, 169, 206, .08);
  transition: background .12s;
}
.jm-row:last-child { border-bottom: 0; }
.jm-row:hover { background: rgba(255, 255, 255, .035); }

.jm-row-icon { font-size: 15px; flex: none; width: 18px; text-align: center; }
.jm-row-body { flex: 1 1 auto; min-width: 0; }

.jm-row-title {
  font-size: 12.5px; color: #f5f7fc; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jm-row-sub {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font: 10px/1.4 "SFMono-Regular", Consolas, monospace; color: #8d97ad;
}

.jm-dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: rgba(151, 169, 206, .45);
}
.jm-state-running  .jm-dot { background: #55e6d1; animation: jm-pulse 1.6s ease-in-out infinite; }
.jm-state-queued   .jm-dot { background: #f5c96a; }
.jm-state-stopping .jm-dot { background: #f5c96a; animation: jm-pulse 1s ease-in-out infinite; }
.jm-state-done     .jm-dot { background: #5fb37e; }
.jm-state-failed   .jm-dot { background: #ff7a8d; }
.jm-state-lost     .jm-dot { background: rgba(151, 169, 206, .3); }

.jm-state-done .jm-row-title,
.jm-state-cancelled .jm-row-title,
.jm-state-lost .jm-row-title { color: #8d97ad; }

@keyframes jm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── stop button ────────────────────────────────────────────────── */
.jm-stop {
  flex: none; width: 24px; height: 24px; padding: 0;
  border-radius: 6px; cursor: pointer; font-size: 9px; line-height: 1;
  background: rgba(255, 122, 141, .1);
  border: 1px solid rgba(255, 122, 141, .3);
  color: #ff7a8d;
  transition: background .12s;
}
.jm-stop:hover:not(:disabled) { background: rgba(255, 122, 141, .22); }
.jm-stop:disabled { opacity: .4; cursor: not-allowed; }