/* =============================================================================
   TJ Navigator v2 — Material 3 Expressive + Neobrutalism (outline tegas, permukaan super-flat,
   tanpa gradient/blur/glassmorphism, keterbacaan tinggi)
   ============================================================================= */
:root {
  --ink: #111111; --paper: #FFF8EC; --surface: #FFFFFF; --surface-2: #F3EBDD; --muted: #5B5348;
  --primary: #0057B8; --on-primary: #FFFFFF; --primary-c: #D6E4FF;
  --yellow: #FFD23F; --green: #16A34A; --green-c: #DCFCE7; --red: #E5484D; --red-c: #FFE1E2; --orange: #F37021;
  --bw: 3px; --sh: 4px 4px 0 var(--ink); --sh-sm: 2px 2px 0 var(--ink);
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --nav-h: 64px; --bar-h: 76px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---------- komponen dasar ---------- */
.nb { background: var(--surface); border: var(--bw) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--sh); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: var(--bw) solid var(--ink);
  border-radius: 999px; background: var(--surface); font-weight: 800; cursor: pointer; box-shadow: var(--sh-sm); transition: transform .08s, box-shadow .08s; white-space: nowrap; }
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.yellow { background: var(--yellow); } .btn.green { background: var(--green); color: #fff; } .btn.red { background: var(--red); color: #fff; }
.btn.ghost { box-shadow: none; background: transparent; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 13px; cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.input, select.input { height: 48px; padding: 0 14px; border: var(--bw) solid var(--ink); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; width: 100%; }
.row { display: flex; gap: 10px; align-items: center; } .col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; } .muted { color: var(--muted); } .small { font-size: 12px; } .b { font-weight: 800; }
.badge-route { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 30px; padding: 0 9px; border-radius: 999px;
  border: 2px solid var(--ink); font-weight: 900; font-size: 14px; }
.badge-line { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 8px; border-radius: 999px;
  background: #fff; color: #000; border: 3px solid; font-weight: 900; font-size: 13px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; border: 2px solid var(--ink); font-size: 11px; font-weight: 800; }
.tag.test { background: var(--yellow); } .tag.warn { background: var(--red-c); } .tag.ok { background: var(--green-c); }
.sep { height: 0; border-top: 2px dashed #0003; margin: 4px 0; }
.empty { padding: 22px; text-align: center; color: var(--muted); font-weight: 600; }

/* ---------- shell ---------- */
#app { display: grid; height: 100%; grid-template-rows: var(--nav-h) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.nav { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--paper); border-bottom: var(--bw) solid var(--ink); z-index: 5; }
.nav .logo { height: 30px; width: auto; display: block; }
.nav .title { font-weight: 900; font-size: 17px; letter-spacing: -.01em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .title small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.nav .spacer { flex: 1; }
.conn { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: #bbb; }
.conn.on { background: var(--green); } .conn.off { background: var(--red); }
.main { position: relative; display: grid; grid-template-columns: 76px 420px 1fr 340px; min-height: 0; }
.rail { display: flex; flex-direction: column; gap: 8px; padding: 12px 8px; border-right: var(--bw) solid var(--ink); background: var(--paper); }
.rail button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 0; border-radius: var(--r-md); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.ic svg { width: 22px; height: 22px; display: block; }
.rail button .ic { width: 52px; height: 32px; border-radius: 999px; display: grid; place-items: center; border: 2px solid transparent; }
.rail button.on .ic { background: var(--yellow); border-color: var(--ink); }
.panel { overflow: auto; padding: 16px; border-right: var(--bw) solid var(--ink); background: var(--paper); display: flex; flex-direction: column; gap: 14px; }
.panel h2 { margin: 2px 0; font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.mapwrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: #e8e4da; }
.side { overflow: auto; padding: 16px; background: var(--paper); display: flex; flex-direction: column; gap: 12px; border-left: var(--bw) solid var(--ink); }
.fab-stack { position: absolute; right: 14px; bottom: 18px; z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.fab { width: 52px; height: 52px; border-radius: 18px; border: var(--bw) solid var(--ink); background: var(--surface); box-shadow: var(--sh-sm); display: grid; place-items: center; cursor: pointer; font-weight: 900; }

/* ---------- daftar & kartu ---------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.item { display: flex; gap: 12px; align-items: center; padding: 12px; border: var(--bw) solid var(--ink); border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-align: left; width: 100%; }
.item:hover { background: #FFFDF6; }
.item .t { font-weight: 800; } .item .s { font-size: 12px; color: var(--muted); }
.plan { padding: 14px; border: var(--bw) solid var(--ink); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm); cursor: pointer; }
.plan.sel { box-shadow: var(--sh); background: #FFFBEA; }
.plan .ph { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan .pt { font-weight: 900; font-size: 18px; } .plan .pm { font-weight: 900; font-size: 24px; }
.legs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.legs .arrow { font-weight: 900; color: var(--muted); }
.legdetail { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.legdetail .ld { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: start; }
.legdetail .ld .ico { width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 12px; background: var(--surface-2); }
.legdetail .ld .ico { overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* ikon resmi berasio potret (LRT/MRT/KRL/BRT) & persegi (Bus Stop/Jalan Kaki): selalu muat di kotak 42x42 */
.legdetail img.mode { display: block; width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.seg { display: inline-flex; border: var(--bw) solid var(--ink); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; padding: 0 14px; height: 40px; background: var(--surface); font-weight: 800; cursor: pointer; }
.seg button + button { border-left: 2px solid var(--ink); }
.seg button.on { background: var(--ink); color: #fff; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { border: 2px solid var(--ink); border-radius: var(--r-sm); padding: 8px; background: var(--surface); }
.stat .v { font-weight: 900; font-size: 20px; } .stat .k { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.arr { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--r-sm); background: var(--surface); }
.arr .eta { font-weight: 900; font-size: 20px; }

/* ---------- dialog (native <dialog>: lapisan teratas browser, tanpa perang z-index) ---------- */
dialog { border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: 8px 8px 0 var(--ink); padding: 0; background: var(--paper); color: var(--ink); width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 760px); }
dialog::backdrop { background: rgba(17, 17, 17, .45); }
dialog .dh { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: var(--bw) solid var(--ink); background: var(--yellow); }
dialog .dh h3 { margin: 0; font-size: 18px; font-weight: 900; flex: 1; }
dialog .db { padding: 16px; overflow: auto; max-height: calc(min(86vh, 760px) - 70px); display: flex; flex-direction: column; gap: 12px; }
dialog.wide { width: min(1100px, calc(100vw - 24px)); }
.toast { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 18px); transform: translateX(-50%); z-index: 3000; display: none; max-width: min(520px, calc(100vw - 24px));
  padding: 14px 16px; border: var(--bw) solid var(--ink); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh); font-weight: 700; }
.toast.on { display: block; }
.iframe-box { border: var(--bw) solid var(--ink); border-radius: var(--r-md); overflow: hidden; background: #000; }
.iframe-box iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- bottom bar (mobile) ---------- */
.bottombar { display: none; }
.sheet-handle { display: none; }

/* ---------- MOBILE: navigator genggam ---------- */
@media (max-width: 900px) {
  :root { --nav-h: 56px; }
  .nav .title small { display: none; } .nav .hide-m { display: none; }
  .main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-width: 0; }
  .nav { gap: 8px; padding: 0 10px; } .nav .btn { padding: 0 12px; }
  .rail, .side { display: none; }
  .mapwrap { position: absolute; inset: 0 0 var(--bar-h) 0; }
  .nav .title { font-size: 15px; }
  .nav .logo { height: 24px; }
  .panel { position: absolute; left: 0; right: 0; bottom: var(--bar-h); z-index: 1000; max-height: 62%; border: 0; border-top: var(--bw) solid var(--ink);
    border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -4px 0 var(--ink); padding-top: 8px; transition: max-height .2s; }
  /* bottom sheet yang bisa ditarik: min / half / full */
  .panel { max-height: none !important; height: var(--sheet-h, 52%); transition: height .3s cubic-bezier(.2,.9,.25,1); padding-top: 0; overscroll-behavior: contain; }
  .panel[data-sheet="min"] { --sheet-h: 96px; overflow: hidden; }
  .panel[data-sheet="half"] { --sheet-h: 52%; }
  .panel[data-sheet="full"] { --sheet-h: calc(100% - var(--bar-h) - 10px); }
  .panel.dragging { transition: none; }
  .sheet-grip { position: sticky; top: 0; z-index: 6; margin: 0 -16px 6px; padding: 10px 0 8px; background: var(--paper); cursor: grab; touch-action: none; display: flex; justify-content: center; }
  .sheet-grip:active { cursor: grabbing; }
  .sheet-handle { display: block; width: 56px; height: 6px; border-radius: 6px; background: var(--ink); margin: 0 auto; border: 0; padding: 0; pointer-events: none; cursor: pointer; }
  .bottombar { display: grid; grid-template-columns: repeat(4, 1fr); position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar-h); z-index: 1001;
    background: var(--paper); border-top: var(--bw) solid var(--ink); padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .bottombar button { border: 2px solid transparent; border-radius: var(--r-md); background: transparent; font-weight: 900; font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
  .bottombar button.on { background: var(--yellow); border-color: var(--ink); }
  .bottombar svg { width: 24px; height: 24px; }
  .fab-stack { bottom: calc(var(--bar-h) + 104px); }
  dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; }
}
@media (min-width: 901px) and (max-width: 1280px) { .main { grid-template-columns: 76px 380px 1fr; } .side { display: none; } }
.leaflet-container { font-family: var(--font); }
.veh { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #111; box-shadow: 1px 1px 0 #111; }
.veh.test { border-style: dashed; }
.pin-me { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--ink); }

/* ---------- tambahan: fokus peta, PIDS navigasi, pilihan bus ---------- */
.focus-chip { position: absolute; left: 14px; top: 14px; z-index: 500; display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 14px; border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--yellow); box-shadow: var(--sh-sm); font-weight: 800; font-size: 13px; max-width: calc(100% - 90px); }
.focus-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navpids-box { aspect-ratio: 9 / 16; width: 100%; max-height: 72vh; margin: 0 auto; }
.navpids-box iframe { width: 100%; height: 100%; border: 0; }
.choice { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px; border: var(--bw) solid var(--ink); border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-align: left; width: 100%; }
.choice.pref { background: #FFFBEA; box-shadow: var(--sh-sm); }
.choice[disabled] { opacity: .5; cursor: not-allowed; }
.choice .eta { font-weight: 900; font-size: 22px; }
.countdown { height: 8px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: #fff; }
.countdown i { display: block; height: 100%; background: var(--ink); transition: width 1s linear; }
.gchip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 4px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 800; font-size: 13px; }
.gchip img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); }
@media (max-width: 900px) { #dlg-navpids .navpids-box { max-height: 78vh; } }

/* atribut hidden selalu menang atas display:flex/grid komponen */
[hidden] { display: none !important; }
@media (min-width: 901px) { #fab-navpids { display: none !important; } }

/* ---------- ANIMASI (hanya transform/opacity -> ringan untuk GPU; titik peta TIDAK dianimasikan) ---------- */
@keyframes vIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes itemIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dlgIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: none; } }
html.anim-full .view:not([hidden]), html.anim-lite .view:not([hidden]) { animation: vIn .28s ease both; }
html.anim-full .list > *:nth-child(-n+12) { animation: itemIn .32s ease both; }
html.anim-full .list > *:nth-child(2) { animation-delay: .03s; } html.anim-full .list > *:nth-child(3) { animation-delay: .06s; }
html.anim-full .list > *:nth-child(4) { animation-delay: .09s; } html.anim-full .list > *:nth-child(5) { animation-delay: .12s; }
html.anim-full .list > *:nth-child(6) { animation-delay: .15s; } html.anim-full .list > *:nth-child(n+7):nth-child(-n+12) { animation-delay: .18s; }
html:not(.anim-off) dialog[open] { animation: dlgIn .24s cubic-bezier(.2,.9,.3,1.15); }
html:not(.anim-off) dialog[open]::backdrop { animation: fadeIn .2s ease; }
html:not(.anim-off) .toast.on { animation: toastIn .25s cubic-bezier(.2,.9,.3,1.2); }
html.anim-full .plan { transition: transform .15s ease, box-shadow .15s ease; }
html.anim-full .plan:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
html.anim-full .rail button.on .ic, html.anim-full .bottombar button.on { animation: pop .3s ease; }
html.anim-full .focus-chip { animation: itemIn .3s ease; }
html.anim-off *, html.anim-off *::before, html.anim-off *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { html:not(.anim-force) * { animation: none !important; transition: none !important; } }

.dis-note { padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--r-sm); background: #FFF3D6; font-size: 13px; margin-top: 8px; }
.dis-note .muted { font-size: 12px; }

/* ---------- HP: sub-tab Simulasi / Tracker OBU / Layanan ---------- */
.sim-tabs { position: sticky; top: 30px; z-index: 5; background: var(--paper); padding: 2px 0 8px; margin: 0 -16px 4px; padding-left: 16px; padding-right: 16px; }
.seg.full { display: flex; width: 100%; }
.seg.full button { flex: 1; padding: 0 6px; font-size: 13px; white-space: nowrap; position: relative; }
.seg button.live::after { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); margin-left: 6px; vertical-align: middle; animation: livePulse 1.6s ease-in-out infinite; }
.bottombar button.live { position: relative; }
.bottombar button.live::after { content: ''; position: absolute; top: 6px; right: calc(50% - 22px); width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .seg button.live::after, .bottombar button.live::after { animation: none; } }
/* HP: atribusi peta (wajib: OpenStreetMap/CARTO) dipindah ke kiri atas agar tidak menabrak panel bawah */
@media (max-width: 900px) {
  .leaflet-bottom.leaflet-right { bottom: auto; right: auto; top: 0; left: 0; }
  .leaflet-control-attribution { font-size: 10px; max-width: 70vw; white-space: normal; line-height: 1.25; border-bottom-right-radius: 8px; }
}

/* sub-tab Bus Stop; "Armada" hanya di HP (desktop sudah punya panel Monitor Armada) */
@media (min-width: 901px) { .m-only { display: none !important; } }
#view-stops .sim-tabs { top: 0; }
@media (max-width: 900px) { #view-stops .sim-tabs { top: 30px; } }
.follow-chip { top: 62px; background: #DCFCE7; }
.rt-stop { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-left: 4px solid var(--rc, #0057B8); margin-left: 9px; cursor: pointer; }
.rt-stop .d { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; margin-left: -18px; }
.rt-stop .bus { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rt-stop .bus .tag { cursor: pointer; }

/* titik perjalanan (bisa diseret) */
.rp { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; cursor: default; user-select: none; }
.rp .rp-pick { all: unset; cursor: pointer; display: block; min-width: 0; }
.rp .rp-pick .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.drag-h { cursor: grab; touch-action: none; font-weight: 900; letter-spacing: -2px; padding: 6px 4px; color: var(--muted); }
.rp.dragging { z-index: 5; box-shadow: var(--sh-md); opacity: .95; position: relative; }
.rp.drop-target { outline: 3px dashed var(--ink); outline-offset: 2px; }
.pt-pin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #111; background: #fff; color: #111; display: grid; place-items: center; font-weight: 900; font-size: 13px; box-shadow: 2px 2px 0 #111; }
.pt-pin.a { background: #0057B8; color: #fff; } .pt-pin.b { background: #FFD23F; }
.wp-chip { background: #FFF3D6; }

/* ===================== TEMA GELAP (Otomatis mengikuti sistem / Terang / Gelap) ===================== */
html[data-theme="dark"] {
  --ink: #F2EDE3; --paper: #121417; --surface: #1B1F25; --surface-2: #252A32; --muted: #A9A296;
  --primary: #5AA2FF; --on-primary: #0B0C0E; --primary-c: #1E3350;
  --yellow: #FFD23F; --green: #34D399; --green-c: #12352A; --red: #FF6B70; --red-c: #3A1B1D;
  --sh: 4px 4px 0 #000; --sh-sm: 2px 2px 0 #000;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .item, html[data-theme="dark"] .gchip, html[data-theme="dark"] .choice, html[data-theme="dark"] .countdown,
html[data-theme="dark"] .rp, html[data-theme="dark"] .input, html[data-theme="dark"] select.input { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .choice.pref, html[data-theme="dark"] .plan.sel { background: #2A2618; }
html[data-theme="dark"] .dis-note { background: #2E2614; }
html[data-theme="dark"] .wp-chip { background: #2E2614; }
html[data-theme="dark"] .focus-chip { color: #111; }
html[data-theme="dark"] .follow-chip { background: #BBF7D0; color: #111; }
html[data-theme="dark"] .btn.yellow, html[data-theme="dark"] .seg button.on, html[data-theme="dark"] .bottombar button.on { color: #111; }
html[data-theme="dark"] .pt-pin { border-color: #000; box-shadow: 2px 2px 0 #000; }
html[data-theme="dark"] .leaflet-container { background: #0E1013; }
html[data-theme="dark"] .leaflet-bar a, html[data-theme="dark"] .leaflet-control-attribution { background: var(--surface) !important; color: var(--ink) !important; }
html[data-theme="dark"] .leaflet-control-attribution a { color: var(--primary) !important; }
html[data-theme="dark"] dialog { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .tag { color: var(--ink); }
html[data-theme="dark"] .tag.ok { background: var(--green-c); } html[data-theme="dark"] .tag.warn { background: #3A2E10; } html[data-theme="dark"] .tag.test { background: #3A3110; }


/* Badge rute & lintas = LINGKARAN (gaya Transjakarta); huruf mengecil untuk kode panjang */
.badge-route { width: 34px; height: 34px; min-width: 0; padding: 0; border-radius: 50%; flex: 0 0 auto; font-size: 14px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; flex-direction: column; }
.badge-route.l3 { font-size: 11.5px; } .badge-route.l4 { font-size: 9.5px; letter-spacing: -.04em; }
.badge-route.jak { font-size: 12px; } .badge-route.jak small { font-size: 7px; font-weight: 800; margin-bottom: -1px; }
.badge-line { width: 32px; height: 32px; min-width: 0; padding: 0; border-radius: 50%; flex: 0 0 auto; font-size: 12px; }

/* Header: logo teks Tipsyn lebih besar; versi hitam/putih mengikuti tema; logo Indeed di subjudul */
.nav .logo { height: 38px; }
.lg-dark { display: none !important; }
html[data-theme="dark"] .lg-light { display: none !important; }
html[data-theme="dark"] .lg-dark { display: inline-block !important; }
html[data-theme="dark"] .nav .logo.lg-dark { display: block !important; }
.indeed-logo { height: 1.15em; width: auto; vertical-align: -.22em; margin-left: 3px; }
@media (max-width: 900px) { .nav .logo { height: 30px; } }

.sim-fleet-list { max-height: 320px; overflow: auto; }
.sim-fleet-list .item.sel { outline: 3px solid var(--ink); background: #FFFBEA; }
html[data-theme="dark"] .sim-fleet-list .item.sel { background: #2A2618; }

/* ---------- NAVIGASI PETA (tanpa PIDS): kartu petunjuk di atas peta ---------- */
.nav-guide { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; z-index: 600; width: min(520px, calc(100% - 24px));
  background: var(--surface); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; }
.nav-guide .ng-main { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 12px 14px; }
.nav-guide .ng-ic { width: 52px; height: 52px; border-radius: 16px; border: 3px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 15px; background: var(--yellow); color: #111; }
.nav-guide .ng-ic svg { width: 28px; height: 28px; }
.nav-guide .ng-t { font-weight: 900; font-size: 18px; line-height: 1.15; }
.nav-guide .ng-s { font-size: 13px; color: var(--muted); margin-top: 2px; }
.nav-guide .ng-next { border-top: 2px dashed var(--ink); padding: 8px 14px; font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.nav-guide .ng-prog { height: 6px; background: var(--surface-2); } .nav-guide .ng-prog i { display: block; height: 100%; background: var(--primary); transition: width .6s ease; }
.nav-guide.alert .ng-ic { background: var(--red); color: #fff; animation: ngPulse 1s ease-in-out infinite; }
@keyframes ngPulse { 50% { transform: scale(1.08); } }
@media (max-width: 900px) { .nav-guide { top: 8px; } .nav-guide .ng-t { font-size: 16px; } }