:root {
  --bg: #0b3d2e;
  --bg2: #0f4f3b;
  --card: #ffffff;
  --text: #14201b;
  --muted: #5b6b63;
  --accent: #3ddc97;
  --danger: #c62828;
  --sany: #e53935;
  --manitou: #d4a017;
  --ar: #ec407a;
  --prospect: #7e57c2;
  --customer: #1e88ff;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--text); background:#111; }
.hidden { display:none !important; }
.screen { height:100%; }
#login { display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--bg),#06261c); padding:24px; }
.card { background:var(--card); border-radius:16px; padding:28px 24px; width:min(380px,100%); box-shadow:0 12px 40px rgba(0,0,0,.35); }
.logo { width:64px; height:64px; display:block; margin:0 auto 8px; }
.card h1 { text-align:center; margin:0 0 8px; font-size:1.35rem; }
.card label { display:block; font-size:.85rem; margin:12px 0 4px; }
.card input { width:100%; padding:12px; border:1px solid #ccd5d0; border-radius:10px; font-size:1rem; }
.primary { background:var(--bg); color:#fff; border:0; border-radius:10px; padding:12px 16px; font-weight:600; width:100%; margin-top:16px; cursor:pointer; }
.primary:active { opacity:.9; }
.ghost { background:#eef2f0; border:0; border-radius:10px; padding:10px 12px; cursor:pointer; }
.muted { color:var(--muted); font-size:.85rem; }
.hint { color:var(--muted); font-size:.75rem; margin-top:12px; line-height:1.35; }

#app { display:flex; flex-direction:column; height:100%; }
header { display:flex; align-items:center; gap:8px; padding:8px 10px; padding-top:max(8px, env(safe-area-inset-top)); background:var(--bg); color:#fff; z-index:5; }
.titles { flex:1; min-width:0; display:flex; flex-direction:column; }
.titles .muted { color:#b7d7cb; }
.iconbtn { background:transparent; border:0; color:#fff; font-size:1.25rem; width:40px; height:40px; border-radius:10px; cursor:pointer; }
.iconbtn:active { background:rgba(255,255,255,.12); }
#map { flex:1; min-height:0; }

.panel { position:absolute; top:58px; left:0; bottom:0; width:min(300px,90vw); background:#fff; z-index:4; padding:12px; overflow:auto; box-shadow:4px 0 20px rgba(0,0,0,.2); transform:translateX(-105%); transition:transform .2s ease; }
.panel.open { transform:translateX(0); }
.panel.right { left:auto; right:0; transform:translateX(105%); box-shadow:-4px 0 20px rgba(0,0,0,.2); }
.panel.right.open { transform:translateX(0); }
.panel.right.hidden { display:none !important; }
.panel-h { display:flex; align-items:center; justify-content:space-between; }
.panel-h h2 { margin:0; font-size:1.05rem; }
.panel .iconbtn { color:var(--text); }
.chk { display:flex; align-items:center; gap:8px; padding:8px 0; font-size:.95rem; }
.chk input { width:18px; height:18px; }
hr { border:0; border-top:1px solid #e4ebe7; margin:10px 0; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.row .primary, .row .ghost { width:auto; flex:1; margin-top:0; font-size:.85rem; }

#routeList { padding-left:20px; margin:8px 0; }
#routeList li { margin:6px 0; font-size:.9rem; }

.popup { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:min(420px,94vw); max-height:50vh; overflow:auto; background:#fff; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.35); z-index:6; padding:14px 14px 16px; }
.popup-x { position:absolute; right:8px; top:8px; border:0; background:#eef2f0; width:36px; height:36px; border-radius:10px; cursor:pointer; }
#popupBody h3 { margin:0 28px 6px 0; font-size:1.05rem; }
#popupBody .meta { color:var(--muted); font-size:.85rem; margin-bottom:8px; }
#popupBody .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#popupBody a.btn, #popupBody button.btn {
  display:inline-block; text-decoration:none; background:var(--bg); color:#fff; border:0;
  border-radius:8px; padding:10px 12px; font-size:.85rem; cursor:pointer;
}
#popupBody button.btn.secondary { background:#455a64; }
#popupBody button.btn.visit-on { background:#2e7d32; }

#toast {
  position:absolute; left:50%; top:70px; transform:translateX(-50%);
  background:rgba(20,32,27,.92); color:#fff; padding:10px 14px; border-radius:10px;
  z-index:10; display:none; max-width:90vw; font-size:.9rem;
}
#toast.show { display:block; }

.maplibregl-popup-content { display:none; } /* we use custom popup */

@media (min-width: 800px) {
  .panel { top:0; padding-top:70px; }
}

.error{color:#c62828;font-size:14px;margin:8px 0 0;min-height:1.2em}

.visit-row{margin:2px 0}
.linkish{background:none;border:none;color:#c62828;text-decoration:underline;padding:0 4px;font:inherit;cursor:pointer}

.add-stop-bar{position:absolute;z-index:5;left:12px;right:12px;top:58px;background:#0b3d2e;color:#fff;padding:10px 12px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.add-stop-bar.hidden{display:none}
.add-stop-bar button{background:#fff;color:#0b3d2e;border:none;border-radius:8px;padding:6px 10px;font-weight:600}

.iconbtn { position: relative; }
.badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #ff7043; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.badge-inline {
  display: inline-block; min-width: 18px; padding: 1px 6px;
  border-radius: 9px; background: #ff7043; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.missed-list { font-size: .85rem; max-height: 180px; overflow: auto; }
.missed-item {
  padding: 8px 0; border-bottom: 1px solid #e4ebe7;
}
.missed-item strong { display: block; }
.missed-item .gap-meta { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.missed-item .gap-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.missed-item button {
  border: 0; border-radius: 6px; padding: 4px 8px; font-size: .75rem; cursor: pointer;
  background: #eef2f0;
}
.missed-item button.primary-sm { background: var(--bg); color: #fff; }

.legend { font-size: .8rem; color: var(--muted); margin: 4px 0 10px; }
.legend div { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.legend .dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none;
  border: 1px solid #fff; box-shadow: 0 0 0 1px #ccc;
}
.legend .dot.split {
  background: linear-gradient(90deg, #1e6fd9 50%, #f28c18 50%);
}
.legend .dot.ar {
  background: #fff; border: 3px solid #b5122e; box-shadow: none;
}

.chk.indent { padding-left: 18px; font-size: .9rem; }
.chk .dot, .filt .dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  border: 1px solid #ccc; vertical-align: middle;
}
.chk .dot.split { background: linear-gradient(90deg,#1e6fd9 50%,#f28c18 50%); }
.ar-legend { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .72rem; color: var(--muted); margin: 4px 0 8px; }
.ar-legend i {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 3px solid #b5122e; vertical-align: middle; margin-right: 3px; background: #fff;
}
.filt { display: block; font-size: .8rem; margin: 6px 0; color: var(--muted); }
.filt select {
  display: block; width: 100%; margin-top: 4px; padding: 8px;
  border: 1px solid #ccd5d0; border-radius: 8px; font-size: .9rem; color: var(--text);
}
.ghost.full { width: 100%; margin-top: 8px; }
#popupBody .block {
  margin: 8px 0; padding: 8px; border-radius: 8px; font-size: .85rem;
  border-left: 3px solid #888; background: #f7f9f8;
}
#popupBody .block.fl { border-left-color: #1e6fd9; background: #f2f7ff; }
#popupBody .block.ar { border-left-color: #b5122e; background: #fff5f7; }
#popupBody .block.sany { border-left-color: #d62728; background: #fff4f4; }
#popupBody .block.man { border-left-color: #d4a017; background: #fdf8e7; }
#popupBody .block.por { border-left-color: #34495e; background: #f4f6f7; }
#popupBody .block.hs { border-left-color: #f28c18; background: #fff8ef; }
#popupBody .meta a { color: #0b3d2e; }
.me-dot {
  width: 16px; height: 16px; border-radius: 50%; background: #1e88ff;
  border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(30,136,255,.7);
  animation: mepulse 1.8s infinite; box-sizing: border-box;
}
@keyframes mepulse {
  0% { box-shadow: 0 0 0 0 rgba(30,136,255,.7); }
  70% { box-shadow: 0 0 0 14px rgba(30,136,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,136,255,0); }
}
.maplibregl-ctrl button.on { background: #1e6fd9; color: #fff; }

.filt input[type="search"] {
  display: block; width: 100%; margin-top: 4px; padding: 8px;
  border: 1px solid #ccd5d0; border-radius: 8px; font-size: .9rem; color: var(--text);
}
.chk-row { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 8px; }
.chk-col { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.chk.inline { padding: 2px 0; font-size: .82rem; }
.chk-row label, .chk-col label { font-size: .82rem; color: var(--muted); }
.chk-row input, .chk-col input { width: 16px; height: 16px; vertical-align: middle; }