/* tesla-navservice harness — mobile-first, vertical stack on phones, 3 columns on desktop */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", "Menlo", monospace;
  font-size: 14px;
  background: #0f1117; color: #d6d8df;
  -webkit-text-size-adjust: 100%;
}

button, input, select {
  font: inherit; color: inherit;
  background: #0d1018; border: 1px solid #2a3043;
  border-radius: 6px; padding: 10px 12px;
  min-height: 44px;
}
button { cursor: pointer; }
button:active { transform: scale(0.98); }
input, select { background: #0d1018; }

/* ===== Header ===== */
header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: #161a23; border-bottom: 1px solid #232634;
  position: sticky; top: 0; z-index: 1000;
}
header h1 { font-size: 14px; margin: 0; color: #e9ecf1; flex-shrink: 0; }
.config { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.urlField {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 200px; color: #7a829a; font-size: 12px;
}
.urlField input { flex: 1; min-width: 100px; }
.badge {
  padding: 6px 12px; border-radius: 12px;
  font-size: 12px; background: #2a3043; color: #d6d8df;
  white-space: nowrap;
}
.badge.ok  { background: #1c5d3b; color: #b4f0c8; }
.badge.bad { background: #5d1c1c; color: #f0b4b4; }

/* ===== Main layout: vertical stack on mobile ===== */
main {
  display: block;
  padding: 10px;
  padding-bottom: 60px;            /* room for sticky status bar */
}
.card {
  background: #131722;
  border: 1px solid #232634;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.card h3 {
  font-size: 12px; margin: 0 0 10px; color: #b6c0d6;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.mapCard { padding: 0; overflow: hidden; }
#map {
  width: 100%; height: 55vh; min-height: 320px; max-height: 70vh;
  background: #0a0c12;
}

/* ===== Endpoint tabs ===== */
#tabs { display: flex; flex-wrap: wrap; gap: 6px; }
#tabs button {
  padding: 10px 14px; font-size: 13px;
}
#tabs button.active {
  background: #2a64c8; color: white; border-color: #2a64c8;
}

/* ===== Placement bar ===== */
.placementBar { display: flex; flex-direction: column; gap: 8px; }
.placementLabel { color: #7a829a; font-size: 12px; }
.modeRow { display: flex; flex-wrap: wrap; gap: 6px; }
.modeBtn { padding: 10px 14px; font-size: 14px; flex: 1 1 80px; }
.modeBtn.active { background: #2a64c8; color: white; border-color: #2a64c8; }
.resetBtn {
  background: #3a2333; border-color: #6b3a52; color: #f0c8d8;
  flex: 1 1 80px;
}

/* ===== Form ===== */
#formArea h2 { font-size: 15px; margin: 0 0 10px; color: #b6c0d6; }
#formArea label {
  display: block; margin: 10px 0; color: #aab2ca;
}
#formArea label > span {
  display: block; color: #7a829a; font-size: 11px;
  margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
#formArea input[type=text],
#formArea input[type=number],
#formArea select {
  width: 100%;
}
#formArea .row { display: flex; gap: 8px; }
#formArea .row input { flex: 1; min-width: 0; }
#formArea fieldset {
  border: 1px solid #232634; margin: 10px 0; padding: 12px;
  border-radius: 6px;
}
#formArea legend {
  padding: 0 8px; color: #7a829a; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
#formArea label.checkbox {
  display: flex; gap: 10px; align-items: center;
}
#formArea label.checkbox > span {
  display: inline; margin: 0; text-transform: none; letter-spacing: 0;
  font-size: 14px; color: #aab2ca;
}
#formArea input[type=checkbox] {
  width: 22px; height: 22px;
  min-height: 22px; padding: 0; margin: 0;
  accent-color: #2a64c8;
}
#formArea .actions {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px;
}
#formArea .actions .primary {
  background: #2a64c8; border-color: #2a64c8; color: white;
  padding: 14px 18px; font-weight: 600;
  flex: 1; min-height: 50px;
}
.hint { color: #7a829a; font-size: 12px; margin: 6px 0 0; }

/* ===== Summary / right panel ===== */
#summary { margin-bottom: 10px; }
#summary .stat {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin: 4px 0; font-size: 13px;
}
#summary .stat .k { color: #7a829a; flex-shrink: 0; }
#summary .stat .v {
  color: #e9ecf1; text-align: right;
  word-break: break-all; margin-left: 12px; max-width: 65%;
}
#summary .err { color: #ff8080; }
#summary .ok  { color: #80ff90; }

#rightTabs {
  display: flex; border-radius: 6px; overflow: hidden;
  border: 1px solid #232634; margin-bottom: 8px;
}
#rightTabs .rt {
  flex: 1; padding: 10px 6px; font-size: 12px;
  background: #131722; border: none; border-right: 1px solid #232634;
  border-radius: 0; min-height: 42px;
}
#rightTabs .rt:last-child { border-right: none; }
#rightTabs .rt.active { background: #2a64c8; color: white; }

#rightPanel {
  background: #0a0c12;
  padding: 10px;
  border: 1px solid #232634; border-radius: 6px;
  min-height: 150px; max-height: 55vh;
  overflow: auto;
  white-space: pre-wrap; word-break: break-all;
  font-size: 11px; color: #d6d8df; margin: 0;
}

/* ===== Scenarios / Captures ===== */
#scenarioPick, #captureScope, #captureSubdir, #captureFile {
  width: 100%; margin-bottom: 8px;
}
#scenarioApply { width: 100%; }
.captureBtns { display: flex; gap: 8px; }
.captureBtns button { flex: 1; }

/* ===== Status bar ===== */
#statusBar {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  background: #161a23; border-top: 1px solid #232634;
  color: #d6d8df; font-size: 12px;
  z-index: 1000;
}

/* ===== Desktop (≥1024px): 3-column layout, same content ===== */
@media (min-width: 1024px) {
  body { font-size: 13px; }
  main {
    display: grid;
    grid-template-columns: 380px 1fr 440px;
    grid-template-rows: auto;
    gap: 12px;
    padding: 12px;
    padding-bottom: 50px;
    align-items: start;
  }
  /* Layout the cards: tabs+placement+form on left, map in center, response/scenarios/captures on right */
  main > .card:nth-child(1) { grid-column: 1; }   /* tabs */
  main > .card:nth-child(2) { grid-column: 1; }   /* placement */
  main > #formArea          { grid-column: 1; }
  main > .mapCard           { grid-column: 2; grid-row: 1 / span 7; height: calc(100vh - 80px); }
  main > .mapCard #map      { height: 100%; max-height: none; }
  main > .card:nth-child(5) { grid-column: 3; grid-row: 1; }   /* response */
  main > .card:nth-child(6) { grid-column: 3; grid-row: 2; }   /* scenarios */
  main > .card:nth-child(7) { grid-column: 3; grid-row: 3; }   /* captures */
}

/* Leaflet polish */
.start-marker, .end-marker, .via-marker { font-size: 22px; line-height: 22px; text-align: center; }
.leaflet-container { font-family: inherit; }