.svm-wrap { width: 100%; }
.svm-map { width: 100%; border: 1px solid #000; border-radius: 8px; overflow: hidden; }

.svm-status {
  margin: 8px 0;
  font-size: 13px;
  color: #000;
}

.svm-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.svm-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 260px;
}
.svm-toolbar-label {
  font-size: 12px;
  font-weight: 800;
  color: #000;
}
.svm-toolbar-select {
  min-height: 38px;
  border: 2px solid #000;
  border-radius: 8px;
  background: #fff;
  color: #000;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
}
.svm-toolbar-btn {
  min-height: 38px;
  border: 2px solid #000;
  border-radius: 8px;
  background: #feff00;
  color: #000;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.svm-toolbar-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.svm-notice {
  padding: 12px;
  border: 1px solid #000;
  border-radius: 8px;
  background: #feff00;
  color: #000;
}

.svm-divicon { background: transparent; border: none; }

.svm-marker {
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.svm-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #090379;
  border: 2px solid #000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.svm-label {
  background: #feff00;
  color: #000;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.svm-popup .svm-muted { opacity: 0.75; font-size: 12px; margin-top: 4px; }


.svm-history { margin-top: 8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.svm-history select, .svm-history button { font-size: 12px; }
.svm-history button { border: 2px solid #000; background:#feff00; color:#000; border-radius: 6px; padding: 2px 8px; cursor:pointer; font-weight: 700; }
.svm-history button:hover { filter: brightness(0.98); }
.svm-history-status { font-size: 12px; color:#000; opacity: 0.85; }


.svm-telemetry { margin-top: 10px; padding-top: 8px; border-top: 1px solid #000; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.svm-telemetry-head { font-weight: 800; margin-right: 6px; }
.svm-telemetry button { border: 2px solid #000; background:#feff00; color:#000; border-radius: 6px; padding: 2px 8px; cursor:pointer; font-weight: 700; }
.svm-telemetry-status { font-size: 12px; color:#000; opacity: 0.85; }
.svm-telemetry-body { width: 100%; margin-top: 8px; }

.svm-table { width: 100%; border-collapse: collapse; }
.svm-table th, .svm-table td { border: 1px solid #000; padding: 6px 8px; font-size: 12px; text-align:left; }
.svm-table th { background: #feff00; }


/* Tabs */
.svm-tabs { display:flex; gap:6px; margin-top: 8px; }
.svm-tab {
  border: 2px solid #000;
  background: #feff00;
  color: #000;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.svm-tab.is-active { background: #090379; color: #feff00; }
.svm-pane { display:none; margin-top: 8px; }
.svm-pane.is-active { display:block; }


/* Stop markers (static > 10 min) */
.svm-stop-icon { background: transparent; border: none; }
.svm-stop { transform: translate(-50%, -100%); display:inline-flex; align-items:center; gap:6px; }
.svm-stop-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #feff00;
  border: 2px solid #000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.svm-stop-label {
  background: #feff00;
  color: #000;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}


/* Selected vehicle marker (swap colors) */
.svm-marker.is-selected .svm-dot {
  background: #feff00;
}
.svm-marker.is-selected .svm-label {
  background: #090379;
  color: #feff00;
}


/* Layout with sidebar */
.svm-layout {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
  height: auto;
}
.svm-layout .svm-map { height: 100%; min-height: 520px; }
.svm-sidebar {
  border: 1px solid #000;
  border-radius: 8px;
  background: #feff00;
  color: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svm-sidebar-head {
  padding: 10px 12px;
  font-weight: 900;
  border-bottom: 1px solid #000;
  background: #090379;
  color: #feff00;
}
.svm-stops-list {
  padding: 10px;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svm-stop-item {
  width: 100%;
  text-align: left;
  border: 2px solid #000;
  border-radius: 10px;
  background: #feff00;
  color: #000;
  padding: 8px 10px;
  cursor: pointer;
}
.svm-stop-item:hover { filter: brightness(0.98); }
.svm-stop-item-title { font-weight: 900; }
.svm-stop-item-sub { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.svm-stop-item-addr { font-size: 12px; margin-top: 4px; }
@media (max-width: 900px) {
  .svm-layout { grid-template-columns: 1fr; }
  .svm-sidebar { max-height: 260px; }
}


/* Layout override: keep sidebar on the right in normal layouts */
.svm-layout {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.svm-map-wrap { flex: 1 1 auto; min-width: 0; }
.svm-sidebar { flex: 0 0 340px; max-width: 380px; }
@media (max-width: 900px) {
  .svm-layout { flex-direction: column; }
  .svm-sidebar { flex: 0 0 auto; max-width: none; }
}
.svm-csv-btn {
  margin-left: auto;
  border: 2px solid #000;
  background: #feff00;
  color: #000;
  border-radius: 8px;
  padding: 2px 8px;
  font-weight: 800;
  cursor: pointer;
}


.svm-fatal{border:2px solid #000;background:#feff00;color:#000;padding:10px 12px;border-radius:10px;margin:10px 0;font-weight:800;}


.svm-sidebar-head .svm-csv-btn:hover { filter: brightness(0.98); }


/* Stop list item radius */
.svm-stops-list > .svm-stop-item {
    border-radius: 10px !important;
}

/* Download CSV button styling (anchor-safe, theme-proof) */
.svm-sidebar-head .svm-csv-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    border: 2px solid #feff00 !important;
    background: #090379 !important;
    color: #feff00 !important;
    border-radius: 50px !important;
    padding: 2px 10px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1.6 !important;
    font-size: 12px;
}


/* VOR (Vehicles Off Road) bar */
.svm-vor-bar{
    border: 2px solid #000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}
.svm-vor-toggle{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #090379;
    color: #feff00;
    border: none;
    cursor: pointer;
    font-weight: 900;
    text-align: left;
}
.svm-vor-count{
    margin-left: auto;
    background: #feff00;
    color: #000;
    border: 2px solid #000;
    border-radius: 999px;
    padding: 0 10px;
    font-weight: 900;
}
.svm-vor-panel{
    background: #feff00;
    color: #000;
    padding: 10px 12px;
}
.svm-vor-actions{
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.svm-vor-view{
    border: 2px solid #000;
    background: #feff00;
    color: #000;
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 800;
    cursor: pointer;
}
.svm-vor-view.is-active{
    background: #090379;
    color: #feff00;
    border-color: #feff00;
}
.svm-vor-item{
    border: 2px solid #000;
    border-radius: 10px;
    padding: 8px 10px;
    background: #feff00;
    margin-bottom: 8px;
}
.svm-vor-reg{ font-weight: 900; }
.svm-vor-meta{ font-size: 12px; opacity: 0.85; margin-top: 2px; }
.svm-vor-note{ font-size: 12px; margin-top: 4px; }


/* VOR vehicle marker styling */
.svm-marker.svm-marker-vor{
  border-color: #ff0000 !important;
}
.svm-marker-label.svm-marker-label-vor{
  color: #ff0000 !important;
}
.svm-vor-note-box{
  margin-top: 8px;
  border: 2px solid #ff0000;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  color: #000;
  font-size: 12px;
}
.svm-vor-badge{
  display: inline-block;
  background: #ff0000;
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 900;
  margin-bottom: 6px;
}


/* VOR marker styling (red takes priority even when selected) */
.svm-marker.is-vor .svm-dot { background: #d40000 !important; border-color: #d40000 !important; }
.svm-marker.is-vor .svm-label { color: #d40000 !important; border-color: #d40000 !important; }
.svm-marker.is-selected.is-vor .svm-dot { background: #d40000 !important; border-color: #d40000 !important; }
.svm-marker.is-selected.is-vor .svm-label { color: #d40000 !important; border-color: #d40000 !important; }

/* OFF ROAD notice in popup */
.svm-offroad{
  border: 2px solid #d40000;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: #fff;
}
.svm-offroad-title{
  font-weight: 900;
  color: #d40000;
  margin-bottom: 4px;
}
.svm-offroad-notes{
  font-size: 12px;
  color: #000;
}


/* Sidebar slideout (map full width) */
.svm-layout{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.svm-map-wrap{ position: relative; width: 100%; }
.svm-layout .svm-map{ min-height: 520px; height: 620px; }

.svm-sidebar{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 360px;
  max-width: calc(100% - 20px);
  height: calc(100% - 20px);
  z-index: 50;
  transform: translateX(110%);
  transition: transform 180ms ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.svm-sidebar.is-open{ transform: translateX(0); }

.svm-sidebar-backdrop{
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0,0,0,.25);
  border-radius: 8px;
}

.svm-sidebar-toggle{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid #feff00;
  background: #090379;
  color: #feff00;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 900;
  cursor: pointer;
}

.svm-sidebar-close{
  margin-left: auto;
  border: 2px solid #000;
  background: #feff00;
  color: #000;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}


/* Sidebar slideout fix (position within map wrap) */
.svm-map-wrap{ position: relative !important; }
.svm-map-wrap .svm-sidebar{
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 0 0 12px !important;
  transform: translateX(100%) !important;
}
.svm-map-wrap .svm-sidebar.is-open{ transform: translateX(0) !important; }

.svm-map-wrap .svm-sidebar-backdrop{
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  border-radius: 0 !important;
}

.svm-map-wrap .svm-sidebar-toggle{
  top: 12px !important;
  right: 12px !important;
}


/* Slideout v1.8.2 (force map full width + overlay sidebar) */
.svm-layout{
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.svm-map-wrap{
  position: relative !important;
  width: 100% !important;
}

.svm-sidebar{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: 360px !important;
  max-width: calc(100% - 16px) !important;
  z-index: 60 !important;
  transform: translateX(105%) !important;
  transition: transform 180ms ease !important;
}

.svm-sidebar.is-open{ transform: translateX(0) !important; }

.svm-sidebar-backdrop{
  position: absolute !important;
  inset: 0 !important;
  z-index: 55 !important;
  background: rgba(0,0,0,.25) !important;
}

.svm-sidebar-toggle{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 50 !important;
}


/* Slideout v1.8.3 (definitive overrides) */
.svm-layout{ display:block !important; width:100% !important; }
.svm-map-wrap{ position:relative !important; width:100% !important; }
.svm-map{ width:100% !important; min-height:620px !important; height:620px !important; }

#svm-sidebar-toggle{
  position:absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 1000 !important; /* above Leaflet */
}

#svm-sidebar{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  height:100% !important;
  width:360px !important;
  max-width: calc(100% - 16px) !important;
  z-index: 1100 !important;
  transform: translateX(105%) !important;
  transition: transform 180ms ease !important;
}

#svm-sidebar.is-open{ transform: translateX(0) !important; }

#svm-sidebar-backdrop{
  position:absolute !important;
  inset:0 !important;
  z-index:1050 !important;
  background: rgba(0,0,0,.25) !important;
}


/* Slideout v1.8.4 (extra specificity to beat theme CSS) */
.svm-layout .svm-map-wrap{ display:block !important; }
.svm-layout .svm-map-wrap > *{ box-sizing: border-box !important; }

.svm-layout .svm-map-wrap #svm-sidebar{
  float:none !important;
  left:auto !important;
  display:block !important;
  will-change: transform;
}
.svm-layout .svm-map-wrap #svm-sidebar.is-open{ transform: translateX(0) !important; }
.svm-layout .svm-map-wrap #svm-sidebar:not(.is-open){ transform: translateX(105%) !important; }


/* Slideout v1.8.5 (closed = truly hidden / no reserved space) */
.svm-layout .svm-map-wrap{
  width: 100% !important;
}

.svm-layout .svm-map-wrap #svm-sidebar{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  z-index: 1100 !important;
}

/* Closed state: off-canvas + not clickable + not visible */
.svm-layout .svm-map-wrap #svm-sidebar:not(.is-open){
  transform: translateX(105%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Open state: visible + clickable */
.svm-layout .svm-map-wrap #svm-sidebar.is-open{
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Backdrop only active when open */
.svm-layout .svm-map-wrap #svm-sidebar-backdrop[hidden]{
  display: none !important;
}


/* Sidebar scroll v1.8.6 */
#svm-sidebar{
  display:flex !important;
  flex-direction:column !important;
}

#svm-sidebar .svm-sidebar-head{
  flex: 0 0 auto !important;
}

#svm-sidebar .svm-stops-list{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  max-height: 100% !important;
  padding-right: 4px !important;
}


/* Sidebar scroll fix v1.8.7 (prevents flex overflow cutting off bottom) */
#svm-sidebar{
  overflow: hidden !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}

#svm-sidebar .svm-stops-list{
  min-height: 0 !important; /* critical for flex children to allow scrolling */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px !important;
}


/* Sidebar scroll fix v1.8.8 (absolute scroll area to avoid cut-off) */
#svm-sidebar{
  position: absolute !important;
}

#svm-sidebar .svm-sidebar-head{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 52px !important;
  z-index: 2 !important;
}

#svm-stops-list.svm-stops-list{
  position: absolute !important;
  top: 52px !important; /* matches head min-height */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 16px 12px !important;
  box-sizing: border-box !important;
}