* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
#app { display: flex; height: 100vh; }
#map { flex: 1; height: 100%; }
#side {
  width: 320px; max-width: 40vw; height: 100%; overflow-y: auto;
  background: #fff; border-left: 1px solid #e3e3e3; padding: 12px 14px;
}
#side h1 { font-size: 16px; margin: 0 0 4px; }
#side .sub { color: #666; font-size: 12px; margin-bottom: 12px; }
.loop-h { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 14px 0 6px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.pickup { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f0f0f0; }
.pickup .name { font-size: 14px; }
.pickup .eta { font-variant-numeric: tabular-nums; font-weight: 600; color: #146c2e; white-space: nowrap; }
.pickup .eta.stale { color: #999; font-weight: 400; }
.empty { color: #888; font-size: 13px; padding: 8px 0; }
.badge { display: inline-block; font-size: 11px; background: #eef; color: #335; border-radius: 10px; padding: 1px 8px; margin-left: 6px; }
.shuttle { position: relative; width: 16px; height: 16px; }
.shuttle-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); position: absolute; left: 0; top: 0; }
/* heading arrow, shown only when the shuttle is moving (>1 mph); marker is rotated to course */
.shuttle-arrow { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #222; display: none; }
.shuttle.moving .shuttle-arrow { display: block; }

/* admin: draggable stops list */
.stops-list { border: 1px solid #e3e3e3; border-radius: 6px; max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
.stop-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #f0f0f0; background: #fff; }
.stop-row:last-child { border-bottom: none; }
.stop-row .grip { cursor: grab; color: #999; }
.stop-row .nm { flex: 1; font-size: 14px; }
.stop-row .del { padding: 2px 8px; }
.stop-row.dragging { opacity: .5; }
.stop-row.over { box-shadow: inset 0 2px 0 #1a73e8; }
.stop-dot { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid #555; cursor: grab; }
.via-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(110,110,110,.9); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); cursor: grab; }

/* admin */
#admin-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.col { flex: 1; min-width: 320px; }
.card { border: 1px solid #e3e3e3; border-radius: 8px; padding: 14px; margin-bottom: 16px; }
.card h2 { font-size: 15px; margin: 0 0 10px; }
label { display: block; font-size: 12px; color: #555; margin: 8px 0 3px; }
input, select, button { font: inherit; padding: 7px 9px; border: 1px solid #ccc; border-radius: 6px; }
button { background: #1a73e8; color: #fff; border: none; cursor: pointer; }
button.secondary { background: #eee; color: #222; }
button:disabled { opacity: .5; cursor: default; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { text-align: left; padding: 6px 4px; border-bottom: 1px solid #eee; }
#admin-map { height: 420px; border-radius: 8px; }
.hint { font-size: 12px; color: #777; }
.pill { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: #eee; }
#whoami { font-size: 13px; color: #444; }
.batt { display:inline-block; width:42px; height:12px; border:1px solid #aaa; border-radius:3px; vertical-align:middle; overflow:hidden; background:#f3f3f3; }
.batt-fill { display:block; height:100%; }

/* tracker assignments table: keep rows aligned and controls on one line */
#assign-tbl th, #assign-tbl td { vertical-align: middle; white-space: nowrap; }
#assign-tbl select { min-width: 150px; }
#assign-tbl td.actions { text-align: right; }
#assign-tbl td button { padding: 5px 10px; }
#assign-tbl td button + button { margin-left: 6px; }