/* HIBRYD RoadScan Video Journey UI v0.2.1e COMPACT
   - panel diperkecil agar proporsional dengan dashboard desktop
   - selector dibuat lebih spesifik + !important agar tidak tertimpa dashboard.css
   - mobile/tablet tetap responsif
*/
#videoJourneySection #roadscanVideoJourney{
  width:min(100%,680px) !important;
  max-width:680px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#videoJourneySection #roadscanVideoJourney .rs-video-journey,
.rs-video-journey{
  font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#183047;
  background:#fff;
  border:1px solid #d7e2e8;
  border-radius:10px;
  overflow:hidden;
  width:min(100%,680px) !important;
  max-width:680px !important;
  margin:0 auto !important;
  box-sizing:border-box;
}

.rs-video-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px;
  background:#079bb4;
  color:#fff;
  font-weight:700;
}
.rs-video-body{padding:10px}
.rs-video-select{
  width:100%;
  padding:7px 9px;
  margin-bottom:9px;
  border:1px solid #c9d8e2;
  border-radius:6px;
  background:#fff;
  box-sizing:border-box;
}
.rs-video-player{
  display:block;
  width:100% !important;
  max-width:660px !important;
  aspect-ratio:16/9;
  height:auto !important;
  max-height:372px !important;
  margin:0 auto;
  background:#06131f;
  border-radius:7px;
  object-fit:contain;
}
.rs-video-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 12px;
  margin-top:9px;
}
.rs-video-meta b{
  display:block;
  font-size:10px;
  color:#6a7d8b;
  text-transform:uppercase;
}
.rs-video-empty{padding:16px;text-align:center;color:#6a7d8b}
.rs-video-sync{font-size:12px;color:#4b697a;margin-top:8px}

@media (max-width:760px){
  #videoJourneySection #roadscanVideoJourney,
  #videoJourneySection #roadscanVideoJourney .rs-video-journey,
  .rs-video-journey{
    width:100% !important;
    max-width:100% !important;
  }
  .rs-video-player{max-width:100% !important;max-height:none !important}
  .rs-video-meta{grid-template-columns:1fr}
  .rs-video-body{padding:8px}
}

/* v0.2.1f Video/GNSS/STA/Event sync controls */
.rs-video-tools{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:-1px 0 8px;font-size:11px;color:#526d7b;
}
.rs-video-tools label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.rs-video-tools button{
  border:1px solid #b9cbd5;background:#f6fafc;color:#23465a;border-radius:5px;
  padding:4px 8px;font-size:11px;cursor:pointer
}
.rs-video-tools button:disabled{opacity:.45;cursor:default}
#rsvChainage{margin-left:auto;font-weight:800;color:#087d94;background:#e9f7fa;border:1px solid #bce8ef;border-radius:999px;padding:3px 8px}
.rs-video-eventbar{position:relative;height:5px;margin:4px 4px 0;background:#dce8ed;border-radius:999px;overflow:visible}
.rs-video-eventbar:not(.has-events){opacity:.35}
.rs-video-eventmark{
  position:absolute;top:50%;width:10px;height:10px;padding:0;border:2px solid #fff;border-radius:50%;
  background:#e04d3f;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.2);cursor:pointer
}
.rs-video-eventmark:hover{transform:translate(-50%,-50%) scale(1.35)}
@media(max-width:760px){#rsvChainage{margin-left:0}.rs-video-tools{gap:6px}}