/* ── Map View ────────────────────────────────────────────────────── */

.mv-wrap {
  display:        flex;
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
  position:       relative;
}

/* ── Toolbar ─────────────────────────────────────────────────────── */
.mv-toolbar {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       0 12px;
  height:        40px;
  background:    var(--bg1);
  border-bottom: 1px solid var(--bdr);
  flex-shrink:   0;
  z-index:       10;
}
.mv-toolbar-left, .mv-toolbar-right {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.mv-btn {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  background:  var(--bg2);
  border:      1px solid var(--bdr);
  border-radius: 5px;
  color:       var(--t1);
  font-family: var(--font-sans);
  font-size:   11px;
  padding:     4px 10px;
  cursor:      pointer;
  white-space: nowrap;
  transition:  all .12s;
}
.mv-btn:hover    { border-color: var(--bdr2); color: var(--t0); }
.mv-btn:disabled { opacity: .4; cursor: not-allowed; }

.mv-select {
  background:   var(--bg2);
  border:       1px solid var(--bdr);
  border-radius: 5px;
  color:        var(--t0);
  font-family:  var(--font-sans);
  font-size:    11px;
  padding:      4px 8px;
  outline:      none;
  cursor:       pointer;
  max-width:    200px;
}

.mv-seg-info {
  display:     flex;
  align-items: center;
  font-size:   10px;
  font-family: var(--font-mono);
  color:       var(--t1);
  background:  var(--bg2);
  border:      1px solid var(--bdr);
  border-radius: 4px;
  padding:     3px 8px;
  white-space: nowrap;
}

/* ── Body ────────────────────────────────────────────────────────── */
.mv-body {
  flex:     1;
  display:  flex;
  overflow: hidden;
  position: relative;
}

/* ── Leaflet Map ─────────────────────────────────────────────────── */
.mv-map {
  flex:     1;
  height:   100%;
  z-index:  1;
}

/* Override Leaflet defaults to match dark theme */
.mv-map .leaflet-control-zoom a {
  background:  var(--bg2) !important;
  border-color: var(--bdr2) !important;
  color:       var(--t0) !important;
}
.mv-map .leaflet-control-zoom a:hover {
  background: var(--bg3) !important;
}
.mv-map .leaflet-control-attribution {
  background:  rgba(13,15,20,.7) !important;
  color:       var(--t2) !important;
  font-size:   9px !important;
}
.mv-map .leaflet-control-attribution a { color: var(--t2) !important; }

/* ── Side Panel ──────────────────────────────────────────────────── */
.mv-panel {
  width:         300px;
  min-width:     300px;
  background:    var(--bg1);
  border-left:   1px solid var(--bdr);
  overflow-y:    auto;
  z-index:       5;
  flex-shrink:   0;
}
.mv-panel::-webkit-scrollbar       { width: 4px; }
.mv-panel::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }

.mv-panel-placeholder {
  height:      100%;
  display:     flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:         10px;
  padding:     20px;
}
.mv-ph-icon  { font-size: 36px; opacity: .3; }
.mv-ph-title { font-size: 13px; font-weight: 600; color: var(--t1); }
.mv-ph-sub   { font-size: 10px; color: var(--t2); text-align: center; line-height: 1.6; }

.mv-panel-inner { padding: 0 0 20px; }

/* Panel header */
.mv-panel-hdr {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       12px 14px 10px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink:   0;
  position:      sticky;
  top:           0;
  background:    var(--bg1);
  z-index:       2;
}
.mv-panel-title {
  display:  flex;
  align-items: center;
  gap:      6px;
  flex-wrap: wrap;
}
.mv-seg-badge {
  font-family:  var(--font-mono);
  font-size:    9px;
  background:   var(--bg3);
  color:        var(--t2);
  padding:      2px 6px;
  border-radius: 4px;
}
.mv-pip-badge {
  font-size:    10px;
  font-weight:  500;
  padding:      2px 7px;
  border-radius: 4px;
  border:       1px solid var(--bdr);
  color:        var(--t1);
  background:   var(--bg2);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
  max-width:    150px;
}
.mv-close-btn {
  background:  none;
  border:      none;
  color:       var(--t2);
  cursor:      pointer;
  font-size:   14px;
  padding:     2px;
  transition:  color .12s;
  flex-shrink: 0;
}
.mv-close-btn:hover { color: var(--t0); }

/* Panel sections */
.mv-section {
  padding:       14px;
  border-bottom: 1px solid var(--bdr);
}
.mv-section:last-child { border-bottom: none; }

.mv-section-title {
  font-family:    var(--font-mono);
  font-size:      8.5px;
  font-weight:    600;
  color:          var(--t2);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom:  10px;
}

/* Segment info grid */
.mv-info-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}
.mv-info-item { display: flex; flex-direction: column; gap: 2px; }
.mv-info-lbl  { font-size: 8.5px; color: var(--t2); font-family: var(--font-mono); text-transform: uppercase; }
.mv-info-val  { font-size: 11px; color: var(--t0); }

/* Style fields */
.mv-field {
  margin-bottom: 12px;
}
.mv-field:last-of-type { margin-bottom: 0; }
.mv-lbl {
  display:       block;
  font-size:     9px;
  color:         var(--t2);
  font-family:   var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}
.mv-input {
  width:         100%;
  background:    var(--bg2);
  border:        1px solid var(--bdr);
  border-radius: 4px;
  color:         var(--t0);
  font-family:   var(--font-sans);
  font-size:     11px;
  padding:       5px 8px;
  outline:       none;
  box-sizing:    border-box;
  transition:    border-color .12s;
}
.mv-input:focus { border-color: var(--acc); }

.mv-select-full {
  width:         100%;
  background:    var(--bg2);
  border:        1px solid var(--bdr);
  border-radius: 4px;
  color:         var(--t0);
  font-family:   var(--font-sans);
  font-size:     11px;
  padding:       5px 8px;
  outline:       none;
  cursor:        pointer;
}
.mv-select-full:focus { border-color: var(--acc); }

/* Dash style options */
.mv-dash-opts {
  display: flex;
  gap:     6px;
}
.mv-dash-opt {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           4px;
  padding:       6px 10px;
  border:        1px solid var(--bdr);
  border-radius: 5px;
  cursor:        pointer;
  font-size:     9px;
  color:         var(--t2);
  transition:    all .12s;
}
.mv-dash-opt:hover { border-color: var(--bdr2); color: var(--t1); }
.mv-dash-opt.active {
  border-color: var(--acc);
  background:   rgba(74,158,255,.08);
  color:        var(--acc);
}

/* Save button */
.mv-save-btn {
  width:         100%;
  margin-top:    14px;
  background:    var(--acc);
  border:        none;
  border-radius: 6px;
  color:         #fff;
  font-family:   var(--font-sans);
  font-size:     12px;
  font-weight:   600;
  padding:       8px 0;
  cursor:        pointer;
  transition:    background .13s;
}
.mv-save-btn:hover { background: #6aafff; }

/* Pipeline metadata table */
.mv-meta-table {
  display:       grid;
  grid-template-columns: auto 1fr;
  gap:           4px 12px;
  font-size:     10.5px;
}
.mv-meta-key {
  color:         var(--t2);
  font-family:   var(--font-mono);
  font-size:     9.5px;
  white-space:   nowrap;
  padding-top:   1px;
}
.mv-meta-val { color: var(--t0); }

.mv-notes {
  margin-top:    10px;
  padding:       8px 10px;
  background:    var(--bg2);
  border-radius: 5px;
  font-size:     10.5px;
  color:         var(--t1);
  line-height:   1.6;
  border:        1px solid var(--bdr);
}

/* ── Legend ──────────────────────────────────────────────────────── */
.mv-legend {
  position:      absolute;
  bottom:        30px;
  left:          14px;
  background:    var(--bg1);
  border:        1px solid var(--bdr2);
  border-radius: 8px;
  min-width:     200px;
  max-height:    280px;
  overflow-y:    auto;
  z-index:       500;
  box-shadow:    0 8px 24px rgba(0,0,0,.5);
}
.mv-legend::-webkit-scrollbar       { width: 3px; }
.mv-legend::-webkit-scrollbar-thumb { background: var(--bg3); }

.mv-legend-hdr {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       8px 12px 6px;
  font-size:     9px;
  font-weight:   600;
  color:         var(--t2);
  font-family:   var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bdr);
}

.mv-legend-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     6px 12px;
  cursor:      pointer;
  transition:  background .1s;
}
.mv-legend-item:hover { background: var(--bg2); }

.mv-legend-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  border:        1.5px solid rgba(255,255,255,.15);
}
.mv-legend-name {
  flex:        1;
  font-size:   10.5px;
  color:       var(--t0);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.mv-legend-count {
  font-size:   9px;
  color:       var(--t2);
  font-family: var(--font-mono);
}