/* start of sat.css */

:root{
  --header-bg:#0b4a63;
  --muted:#666;
  --accent:#0b4a63;
  --handle-size:12px;
  --handle-border:2px;
  --pred-opacity:0.7;
  --vector-opacity:0.95;
  --prediction-color:#ff7b00;
  --vector-color:#00b4ff;
}
html,body { height:100%; margin:0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; display:flex; flex-direction:column; min-height:100vh; }

header {
  padding:10px 12px;
  background:var(--header-bg);
  color:white;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  flex-wrap:nowrap; /* force single line */
}

header h1 {
  font-size:17px;
  margin:0;
  flex: 0 1 auto;
  white-space:nowrap;
  overflow:visible;
}

/* container for band select in header */
.band-in-header {
  display:flex;
  align-items:center;
  gap:8px;
  flex: 1 0 auto;
  justify-content:flex-end;
  min-width:0; /* allow truncation */
}
.band-in-header select {
  max-width:180px; /* shrink if necessary */
  min-width:60px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.controls-top, .controls-bottom {
  padding:8px 10px;
  background:#f5f7f8;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  box-sizing:border-box;
}
.controls-top { border-bottom:1px solid #eee; }
.controls-bottom { border-top:1px solid #eee; justify-content:center; }

.ctl { display:flex; gap:8px; align-items:center; }
label { font-size:13px; color:#333; }
select, input[type="text"], input[type="number"], input[type="range"] { padding:6px; font-size:14px; }
button { padding:6px 8px; border-radius:6px; border:1px solid #bbb; background:#fff; cursor:pointer; font-size:16px; line-height:1; }
button:hover { filter:brightness(0.97); }

#mapwrap { flex:1; display:flex; flex-direction:column; gap:0; min-height:300px; position:relative; }
#map { flex:1; min-height:300px; border:1px solid #ccc; }

/* frame slider — restored style: visible track + thumb */
#timeline {
  width:40%;
  min-width:360px;
  -webkit-appearance:none;
  height:6px;
  background:#ddd;
  border-radius:4px;
  outline:none;
  cursor:pointer;
}
#timeline::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
#timeline::-moz-range-thumb {
  width:14px; height:14px;
  border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}

@media (max-width:720px){
  /* slider full width on phones */
  #timeline { width:100%; min-width:0; }
  .band-in-header select { max-width:120px; }
}

.small { font-size:12px; color:#444; }
.hint { font-size:12px; color:var(--muted); margin-top:6px; }
.hidden { display:none !important; }
.leaflet-image-overlay { pointer-events:none; }

/* --------------------------
   Vector / Prediction UI
   -------------------------- */

/* container placed over the map (small control cluster) */
.leaflet-custom-control {
  position: absolute;
  z-index: 650;
  right: 8px;     /* move to right */
  top: 8px;       /* move to top */
  left: auto;     /* cancel left */
  bottom: auto;   /* cancel bottom */
  display: flex;
  gap: 6px;
  align-items: center;
  pointer-events: auto;
}

/* single button style */
#vectorToggleBtn.btn-toggle-vector {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  background:linear-gradient(180deg,#fff,#f4f4f4);
  border:1px solid #bfc9cc;
  border-radius:8px;
  box-shadow:0 1px 0 rgba(0,0,0,0.06);
  font-size:13px;
}

/* toggled state — visually different */
#vectorToggleBtn[aria-pressed="true"] {
  background:linear-gradient(180deg,var(--accent),#0a3b50);
  color: #fff;
  border-color: #044250;
  box-shadow: 0 2px 6px rgba(11,74,99,0.25);
}

/* Vector point handles — these style hooks are for elements you will create (L.circleMarker or custom DOM) */
.vector-handle {
  width: calc(var(--handle-size));
  height: calc(var(--handle-size));
  border-radius: 50%;
  background: #fff;
  border: var(--handle-border) solid var(--vector-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transform: translate(-50%, -50%); /* center on latlng */
  cursor: grab;
  z-index: 700;
  pointer-events: auto;
}

/* while dragging */
.vector-handle.dragging { cursor: grabbing; }

/* small label shown near handles (optional) */
.vector-handle::after {
  content: attr(data-label);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  background: rgba(255,255,255,0.95);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  display: none; /* enable when you want */
}

/* vector line styling — if using L.polyline you can add this class via setStyle or set its options accordingly */
.vector-line {
  stroke: var(--vector-color);
  stroke-width: 3;
  stroke-opacity: var(--vector-opacity);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: stroke;
}

/* small dashed segment around the active vector (hint) */
.vector-line-halo {
  stroke: rgba(11,74,99,0.12);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* prediction lines styling */
.prediction-line {
  stroke: var(--prediction-color);
  stroke-width: 2;
  stroke-opacity: var(--pred-opacity);
  stroke-linecap: round;
  stroke-dasharray: 8 6; /* dashed for future */
  fill: none;
  pointer-events: none;
}

/* anchor markers for predicted lines (small open circles) */
.prediction-handle { 
  /* Hides the marker/handle */
  display: none; 
} 

/*.prediction-handle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--prediction-color);
  transform: translate(-50%,-50%);
  pointer-events: none;
}*/

/* optional legend/mini help (you can toggle via JS) */
.vector-legend {
  position: absolute;
  right: 8px;
  top: 72px;
  z-index: 650;
  background: rgba(255,255,255,0.95);
  border: 1px solid #eee;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  display: none;
}

/* make sure overlays of vector UI are above overlays like imageOverlay (z-index wise) */
.leaflet-pane.vector-pane { z-index: 650; }

/* ensure marker cursor is helpful */
.leaflet-interactive.vector-handle {
  cursor: grab;        /* desktop */
  touch-action: none;  /* mobile: prevent map pan from stealing touches */
  pointer-events: auto; /* ensure layer receives pointer events */
}

.vector-handle, .leaflet-interactive {
  touch-action: none; /* prevents map from stealing touches */
  pointer-events: auto; /* ensure layer can capture pointer events */
}


/* small accessibility focus style for the button */
#vectorToggleBtn:focus { outline: 3px solid rgba(11,74,99,0.18); outline-offset: 1px; }
.prediction-label {
  font-size: 14px;
  font-weight: bold;
  color: #FFD700;
  /*-webkit-text-stroke: 1px #FFD700; */
  text-shadow: 0 0 2px #000;
  pointer-events: none;

  white-space: nowrap;
  min-width: 80px;  
  padding: 2px 4px; 
  text-align: left; 
}

/* force pointer events and disable touch-action on SVG / interactive elements */
.leaflet-interactive.vector-handle,
.leaflet-interactive.vector-handle path,
.leaflet-interactive.vector-handle circle {
  touch-action: none !important;  /* prevents map from stealing touches */
  pointer-events: all !important; /* ensure layer captures pointer events */
  cursor: grab;                   /* keeps the grab cursor */
}

.vector-handle, 
.leaflet-interactive.vector-handle {
  touch-action: none !important;      /* stop map from stealing touches */
  pointer-events: all !important;     /* force the element to receive pointer events */
  cursor: grab !important;
  -webkit-tap-highlight-color: transparent; /* remove blue tap highlight on iOS */
}

.vector-handle {
  width: var(--handle-size);
  height: var(--handle-size);
  border-radius: 50%;
  background: #fff;           /* white fill */
  border: var(--handle-border) solid var(--vector-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transform: translate(-50%, -50%); /* center on marker point */
  cursor: grab;
  z-index: 700;
  pointer-events: auto;
}

/* support for inner SVG paths if using L.circleMarker */
.leaflet-interactive.vector-handle circle,
.leaflet-interactive.vector-handle path {
  touch-action: none !important;
  pointer-events: all !important;
}

/* optional: active dragging cursor */
.vector-handle.dragging { cursor: grabbing !important; }

/* end of sat.css */