/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── VARIABLES ────────────────────────────────────────────── */
:root {
  --bg:        #000000;
  --surface:   rgba(14, 14, 18, 0.97);
  --surface-2: rgba(22, 22, 28, 0.95);
  --surface-3: rgba(28, 28, 36, 0.90);
  --card:      rgba(20, 20, 26, 0.98);
  --border:    rgba(255,255,255,0.07);
  --border-2:  rgba(255,255,255,0.12);

  --accent:      #00e676;
  --accent-glow: rgba(0,230,118,0.28);
  --accent-dim:  rgba(0,230,118,0.10);
  --accent-2:    #00b854;

  --danger:      #ff3b30;
  --danger-glow: rgba(255,59,48,0.25);
  --danger-dim:  rgba(255,59,48,0.10);

  --warning:     #ff9f0a;
  --warning-dim: rgba(255,159,10,0.12);

  --sky:         #0a84ff;
  --sky-dim:     rgba(10,132,255,0.10);

  --text:    #ffffff;
  --text-2:  rgba(255,255,255,0.55);
  --text-3:  rgba(255,255,255,0.28);

  --font:    -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --font-bn: 'Tiro Bangla', serif;

  --r:      20px;
  --r-md:   14px;
  --r-sm:   10px;
  --blur:   blur(28px) saturate(1.4);
  --shadow: 0 32px 64px rgba(0,0,0,0.8), 0 0 0 1px var(--border);

  --tb-h:   54px;
  --sb-w:   360px;
  --dp-w:   380px;

  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body { height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--font); color: var(--text); -webkit-font-smoothing: antialiased; }

/* ── LANG ─────────────────────────────────────────────────── */
.lang-en .lang-show-bn,
.lang-en .lang-show-bn-input { display: none !important; }
.lang-bn .lang-show-en,
.lang-bn .lang-show-en-input { display: none !important; }

/* ── APP BODY (full screen map) ───────────────────────────── */
.app-body { position: fixed; inset: 0; }
#map      { position: absolute; inset: 0; z-index: 1; }

#map.map-dark .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(82%) contrast(92%) saturate(0.55);
}
.leaflet-container { background: #040406; font-family: var(--font); }
.leaflet-control-zoom { display: none; }
.leaflet-control-attribution {
  background: rgba(0,0,0,0.72) !important;
  color: var(--text-2) !important;
  font-size: 10px !important;
  border-radius: 8px 0 0 0 !important;
  backdrop-filter: blur(8px);
}
.leaflet-control-attribution a { color: var(--accent) !important; }

/* ── TOP STATUS CAPSULE ───────────────────────────────────── */
.top-bar {
  position: absolute;
  top: calc(12px + var(--safe-top));
  left: 50%; transform: translateX(-50%);
  z-index: 800;
  display: flex; align-items: center; gap: 10px;
  height: var(--tb-h);
  padding: 0 16px;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.05);
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}

.tb-logo { display: flex; align-items: center; gap: 9px; }
.tb-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #000;
  box-shadow: 0 2px 10px var(--accent-glow);
}
.tb-name { font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; }

.tb-divider { width: 1px; height: 18px; background: var(--border-2); flex-shrink: 0; }

.tb-live {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.8px;
  color: var(--danger);
}
.tb-live.connected { color: var(--accent); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--danger); box-shadow: 0 0 8px var(--danger);
  animation: liveblink 1.4s ease-in-out infinite;
}
.tb-live.connected .live-dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: none; }
@keyframes liveblink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .3; transform: scale(.6); }
}

.tb-stats { display: flex; align-items: center; gap: 10px; }
.tb-stat-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-2);
}
.tb-stat-item i { font-size: 13px; }
.tb-stat-item b { font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.tb-stat-item.green i, .tb-stat-item.green b { color: var(--accent); }
.tb-stat-item.red   i, .tb-stat-item.red   b { color: var(--danger); }

.lang-toggle {
  display: flex; gap: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 100px; padding: 3px;
}
.lang-opt {
  padding: 4px 11px; border-radius: 100px;
  font-size: 11px; font-weight: 700;
  cursor: pointer; color: var(--text-2);
  transition: all .2s; user-select: none;
}
.lang-opt.active { background: var(--accent); color: #000; box-shadow: 0 2px 8px var(--accent-glow); }

/* ── MAP CONTROLS ─────────────────────────────────────────── */
.map-controls {
  position: absolute;
  right: 16px; bottom: 220px;
  z-index: 400;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
.mc-btn {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 44px;
  background: none; border: none;
  color: var(--text-2); font-size: 20px;
  cursor: pointer; font-family: var(--font);
  transition: all .15s;
}
.mc-btn:hover  { background: rgba(255,255,255,0.06); color: var(--text); }
.mc-btn:active { background: rgba(255,255,255,0.10); }
.mc-divider { height: 1px; background: var(--border); margin: 0 10px; }

/* ── FABS ─────────────────────────────────────────────────── */
.map-fabs {
  position: absolute;
  right: 16px; bottom: 120px;
  z-index: 400;
  display: flex; flex-direction: column; gap: 10px;
}
.fab-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--text-2);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
  transition: all .2s;
}
.fab-btn:hover  { background: var(--accent); color: #000; border-color: transparent; box-shadow: 0 4px 20px var(--accent-glow); transform: scale(1.08); }
.fab-btn:active { transform: scale(.95); }
.fab-btn.locating { animation: locSpin .9s linear infinite; color: var(--accent); pointer-events: none; }
@keyframes locSpin { to { transform: rotate(360deg); } }

/* ── USER LOCATION DOT ────────────────────────────────────── */
.user-loc-dot {
  width: 18px; height: 18px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.user-loc-dot::after {
  content: ""; position: absolute;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sky); border: 2.5px solid #fff;
  box-shadow: 0 0 8px rgba(10,132,255,0.6);
  z-index: 1;
}
.user-loc-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(10,132,255,0.25);
  animation: locPulse 2s ease-out infinite;
}
@keyframes locPulse {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(2.8); opacity: 0;  }
}

/* ── SIDEBAR / TRAIN LIST SHEET ───────────────────────────── */
.sidebar {
  position: absolute;
  top: 80px; left: 16px; bottom: 16px;
  width: var(--sb-w);
  z-index: 500;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}

.drag-handle {
  display: none;
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.14);
  border-radius: 4px;
  margin: 12px auto 6px;
  flex-shrink: 0; cursor: grab;
}

/* ── SHEET HEADER ─────────────────────────────────────────── */
.sheet-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sh-row1 {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.sh-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.3px;
}
.sh-count {
  background: var(--accent-dim); color: var(--accent);
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 100px;
}
.sh-mini-stats { display: flex; align-items: center; gap: 10px; }
.sm-stat {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
}
.sm-stat i { font-size: 12px; }
.sm-stat.green i, .sm-stat.green { color: var(--accent); }
.sm-stat.red   i, .sm-stat.red   { color: var(--danger); }

/* ── SEARCH ───────────────────────────────────────────────── */
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--border);
  border-radius: 12px; padding: 0 12px;
  margin-bottom: 10px; transition: all .2s;
}
.search-box:focus-within {
  border-color: rgba(0,230,118,0.4);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.sb-icon { color: var(--text-3); font-size: 15px; flex-shrink: 0; }
.search-box input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--font); font-size: 14px;
  padding: 12px 0;
}
.search-box input::placeholder { color: var(--text-3); }
.search-clear {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; padding: 4px; font-size: 17px;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.search-clear.visible { opacity: 1; pointer-events: auto; }

/* ── FILTER PILLS ─────────────────────────────────────────── */
.filter-row {
  display: flex; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }

.fpill {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 100px;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-2); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all .18s; font-family: var(--font);
}
.fpill i { font-size: 12px; }
.fpill:hover { border-color: var(--border-2); color: var(--text); }
.fpill.active         { background: rgba(255,255,255,0.08); border-color: var(--border-2); color: var(--text); }
.fpill.green.active   { background: var(--accent-dim); border-color: rgba(0,230,118,0.3);  color: var(--accent); }
.fpill.red.active     { background: var(--danger-dim); border-color: rgba(255,59,48,0.3);  color: var(--danger); }
.fpill.gold.active    { background: var(--warning-dim); border-color: rgba(255,159,10,0.3); color: var(--warning); }
.fpill-count {
  background: rgba(255,255,255,0.08);
  border-radius: 100px; padding: 1px 6px;
  font-size: 10px; font-weight: 700;
}

/* ── TRAIN LIST ───────────────────────────────────────────── */
.train-list { flex: 1; overflow-y: auto; padding: 8px 10px 10px; }
.train-list::-webkit-scrollbar { width: 3px; }
.train-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

/* ── TRAIN CARD ───────────────────────────────────────────── */
.train-card {
  position: relative;
  padding: 13px 14px 0;
  border-radius: var(--r-md);
  margin-bottom: 6px;
  cursor: pointer;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: all .18s;
  overflow: hidden;
}
.train-card:hover  { background: rgba(255,255,255,0.04); border-color: var(--border-2); transform: translateX(2px); }
.train-card:active { transform: scale(.99); }
.train-card.active {
  background: rgba(0,230,118,0.04);
  border-color: rgba(0,230,118,0.20);
  border-left-color: var(--accent) !important;
}
.train-card.st-on-time { border-left-color: var(--accent); }
.train-card.st-delayed { border-left-color: var(--danger); }
.train-card.st-arrived { border-left-color: var(--warning); }

.tc-row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.tc-num {
  font-size: 10px; font-weight: 800; letter-spacing: 0.2px;
  color: var(--accent); background: var(--accent-dim);
  padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.badge {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 100px;
}
.badge-on-time { background: var(--accent-dim);  color: var(--accent);  border: 1px solid rgba(0,230,118,0.18); }
.badge-delayed { background: var(--danger-dim);  color: var(--danger);  border: 1px solid rgba(255,59,48,0.18); }
.badge-arrived { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(255,159,10,0.18); }
.badge-delay   { background: var(--danger-dim);  color: var(--danger);  border: 1px solid rgba(255,59,48,0.18); font-variant-numeric: tabular-nums; }
.badge-type    { background: rgba(255,255,255,0.05); color: var(--text-2); border: 1px solid var(--border); }
.badge-off     { background: var(--danger-dim);  color: #ff6b6b; border: 1px solid rgba(255,59,48,0.25); }

.tc-name  { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: -0.2px; line-height: 1.25; }
.tc-route { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.tc-route i { color: var(--accent); font-size: 11px; flex-shrink: 0; }

.tc-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  padding: 9px 0 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.tc-stat { display: flex; flex-direction: column; gap: 2px; }
.tc-stat-label { font-size: 9px; color: var(--text-3); text-transform: uppercase; letter-spacing: .6px; }
.tc-stat-val   { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tc-stat-val.accent  { color: var(--accent); }
.tc-stat-val.danger  { color: var(--danger); }
.tc-stat-val.warning { color: var(--warning); }

.tc-prog {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,0.05);
  border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden;
}
.tc-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .6s ease;
}
.train-card.st-delayed .tc-prog-fill { background: linear-gradient(90deg, #a00000, var(--danger)); }
.train-card.st-arrived .tc-prog-fill { background: linear-gradient(90deg, #b06000, var(--warning)); }

/* Off-today card */
.tc-offdays {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 4px; font-size: 10px; color: var(--text-3);
}
.tc-offdays i { font-size: 11px; color: var(--danger); flex-shrink: 0; }
.off-today-card { opacity: .70; }
.off-today-card::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-md);
  border: 1.5px dashed rgba(255,59,48,0.35); pointer-events: none;
}

/* Day chips */
.day-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 6px; border-radius: 5px;
  font-size: 10px; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.day-chip.on  { background: rgba(0,230,118,0.10); color: var(--accent); border: 1px solid rgba(0,230,118,0.22); }
.day-chip.off { background: rgba(255,59,48,0.08);  color: #ff6b6b;      border: 1px solid rgba(255,59,48,0.18); }
.day-chip.today     { outline: 2px solid var(--accent); outline-offset: 1px; }
.day-chip.off-today { outline: 2px solid var(--danger); outline-offset: 1px; font-weight: 900; }
.days-wrap { display: flex; gap: 4px; flex-wrap: wrap; }
.info-row-days .ir-val { flex-wrap: wrap; gap: 4px; display: flex; justify-content: flex-end; }

/* ── DETAIL PANEL ─────────────────────────────────────────── */
.detail-panel {
  position: absolute;
  top: 80px; right: 16px; bottom: 16px;
  width: var(--dp-w);
  z-index: 600;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  display: none; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.detail-panel.open {
  display: flex;
  animation: dpIn .28s cubic-bezier(.175,.885,.32,1.2);
}
@keyframes dpIn {
  from { opacity:0; transform: translateY(12px) scale(.97); }
  to   { opacity:1; transform: none; }
}

/* ── DETAIL HERO ──────────────────────────────────────────── */
.dp-hero {
  position: relative; flex-shrink: 0; overflow: hidden;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.dp-hero-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.dp-hero.status-on-time .dp-hero-glow { opacity:1; background: radial-gradient(ellipse at 85% 0%, rgba(0,230,118,0.18) 0%, transparent 60%); }
.dp-hero.status-delayed .dp-hero-glow { opacity:1; background: radial-gradient(ellipse at 85% 0%, rgba(255,59,48,0.16) 0%, transparent 60%); }
.dp-hero.status-arrived .dp-hero-glow { opacity:1; background: radial-gradient(ellipse at 85% 0%, rgba(255,159,10,0.16) 0%, transparent 60%); }
.dp-hero-content { position: relative; z-index: 1; }
.dp-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.dp-num  { font-size: 11px; font-weight: 800; color: var(--accent); margin-bottom: 3px; letter-spacing: .4px; }
.dp-name { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.2; letter-spacing: -0.4px; }
.dp-route {
  font-size: 12px; color: var(--text-2);
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.dp-route i { color: var(--accent); font-size: 12px; }

.close-btn {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  color: var(--text-2); font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s;
}
.close-btn:hover  { background: rgba(255,255,255,0.13); color: var(--text); }
.close-btn:active { transform: scale(.92); }

/* ── DETAIL METRICS ───────────────────────────────────────── */
.dp-metrics {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 8px; padding: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.metric-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 8px 8px;
  text-align: center;
  transition: border-color .2s;
}
.metric-card:hover { border-color: var(--border-2); }

/* Speedometer */
.speed-card { padding: 6px 6px 8px; }
.speedo-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.speedo-svg { width: 100%; max-width: 86px; margin-bottom: -4px; }
.speedo-track { stroke: rgba(255,255,255,0.06); }
.speedo-arc   {
  stroke: var(--accent);
  stroke-dasharray: 131.95; stroke-dashoffset: 131.95;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1), stroke .4s;
}
.speedo-num {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: 21px; font-weight: 900; color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1;
}
.speedo-unit { font-size: 9px; color: var(--text-2); text-align: center; margin-top: 2px; }

.mc-icon { font-size: 20px; color: var(--text-3); margin-bottom: 4px; }
.dist-card .mc-icon i { color: var(--sky); }
.eta-card  .mc-icon i { color: var(--warning); }
.mc-value {
  font-size: 21px; font-weight: 800; color: var(--text); line-height: 1;
  margin-bottom: 2px; font-variant-numeric: tabular-nums;
}
.mc-unit  { font-size: 9.5px; color: var(--text-2); margin-bottom: 5px; }
.mc-label { font-size: 9px; color: var(--text-3); font-weight: 500; letter-spacing: .5px; text-transform: uppercase; }
.dist-card .mc-value { color: var(--sky); }
.eta-card  .mc-value { color: var(--warning); }

/* ── JOURNEY PROGRESS ─────────────────────────────────────── */
.jp-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.jp-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px; font-size: 11.5px; color: var(--text-2);
}
.jp-pct { font-weight: 800; color: var(--accent); font-size: 12px; }
.jp-endpoint { max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.jp-track {
  height: 7px; background: rgba(255,255,255,0.06);
  border-radius: 100px; position: relative;
  margin-bottom: 10px; overflow: visible;
}
.jp-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 100px; transition: width .9s ease;
  box-shadow: 0 0 8px var(--accent-glow);
}
.jp-train {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  font-size: 14px; line-height: 1; transition: left .9s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.9));
  pointer-events: none; z-index: 2;
}
.jp-stop-dots { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.jp-stop-dot {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.22);
  transition: all .3s;
}
.jp-stop-dot.passed  { background: var(--accent-2); border-color: var(--accent); width: 6px; height: 6px; }
.jp-stop-dot.current { background: #fff; border-color: var(--accent); width: 7px; height: 7px; box-shadow: 0 0 0 3px var(--accent-glow); }

.jp-next-row { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.jp-next-row i { color: var(--accent); font-size: 13px; flex-shrink: 0; }
.jp-next-row strong { color: var(--text); font-weight: 600; }
.jp-eta {
  margin-left: auto;
  background: var(--warning-dim); color: var(--warning);
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}

/* ── DETAIL TABS ──────────────────────────────────────────── */
.dp-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  padding: 0 14px; flex-shrink: 0;
}
.dp-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 13px; border: none;
  border-bottom: 2px solid transparent;
  background: none; color: var(--text-2);
  font-size: 12px; font-weight: 500; cursor: pointer;
  white-space: nowrap; transition: all .18s;
  margin-bottom: -1px; font-family: var(--font);
}
.dp-tab i { font-size: 14px; }
.dp-tab:hover  { color: var(--text); }
.dp-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

.tab-body { flex: 1; overflow-y: auto; }
.tab-body::-webkit-scrollbar { width: 3px; }
.tab-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.tab-pane { display: none; padding: 14px; }
.tab-pane.active { display: block; }

/* ── INFO ROWS ────────────────────────────────────────────── */
.info-rows { display: flex; flex-direction: column; gap: 4px; }
.info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: rgba(255,255,255,0.02);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 12.5px; transition: background .15s;
}
.info-row:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }
.ir-label { color: var(--text-2); display: flex; align-items: center; gap: 8px; min-width: 0; }
.ir-label i { color: var(--accent); font-size: 14px; opacity:.8; flex-shrink: 0; }
.ir-val { font-weight: 600; color: var(--text); font-size: 12.5px; text-align: right; }
.ir-val.accent  { color: var(--accent); }
.ir-val.danger  { color: var(--danger); }
.ir-val.warning { color: var(--warning); }

/* ── STOPS TIMELINE ───────────────────────────────────────── */
.stops-list { padding: 4px 0; }
.stop-item {
  display: flex; align-items: flex-start;
  gap: 13px; padding: 9px 0; position: relative;
}
.stop-item:not(:last-child)::after {
  content: ''; position: absolute; left: 19px; top: 28px;
  width: 2px; height: calc(100% - 10px);
  background: var(--border);
}
.stop-item.passed::after  { background: rgba(0,230,118,0.18); }
.stop-item.current::after { background: rgba(0,230,118,0.32); }

.stop-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 2px solid var(--text-2);
  flex-shrink: 0; margin-top: 3px; position: relative; z-index: 1;
  transition: all .2s;
}
.stop-item.passed  .stop-dot { background: var(--accent); border-color: var(--accent); }
.stop-item.current .stop-dot {
  width: 12px; height: 12px; margin-top: 2px;
  background: var(--bg); border-color: var(--accent); border-width: 2.5px;
  box-shadow: 0 0 0 4px var(--accent-glow), 0 0 14px var(--accent-glow);
  animation: pdot 2s ease-in-out infinite;
}
@keyframes pdot {
  0%,100% { box-shadow: 0 0 0 4px var(--accent-glow); }
  50%     { box-shadow: 0 0 0 7px rgba(0,230,118,0.07); }
}

.stop-info { flex: 1; min-width: 0; }
.stop-name { font-size: 13px; font-weight: 500; color: var(--text-2); }
.stop-item.passed  .stop-name { color: var(--text); }
.stop-item.current .stop-name { color: var(--accent); font-weight: 700; }
.stop-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.stop-time { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.stop-time.actual { color: rgba(0,230,118,0.7); }
.stop-chip { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 8px; }
.stop-chip.current { background: var(--accent-dim); color: var(--accent); }
.stop-chip.next    { background: var(--warning-dim); color: var(--warning); }
.stop-chip.passed  { background: rgba(255,255,255,0.05); color: var(--text-2); }

/* ── OCCUPANCY ────────────────────────────────────────────── */
.occ-section {
  margin-top: 12px; padding: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.occ-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.occ-title { font-size: 12px; color: var(--text-2); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.occ-title i { color: var(--accent); }
.occ-pct { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.occ-bar-bg { height: 7px; background: rgba(255,255,255,0.06); border-radius: 100px; overflow: hidden; }
.occ-bar { height: 100%; border-radius: 100px; transition: width .6s ease; }
.occ-low  { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.occ-mid  { background: linear-gradient(90deg, #b07000, var(--warning)); }
.occ-high { background: linear-gradient(90deg, #b00000, var(--danger)); }
.occ-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--text-3); }

/* ── TRAIN MARKERS ────────────────────────────────────────── */
.train-icon-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
}
.train-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(4,4,6,0.90);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.75);
  transition: transform .2s; user-select: none;
}
.train-icon.sel { width: 42px; height: 42px; font-size: 20px; transform: scale(1.1); }
.train-icon-ring {
  position: absolute; width: 42px; height: 42px; border-radius: 50%;
  border: 2.5px solid; pointer-events: none;
  animation: trainring 1.6s ease-out infinite;
}
@keyframes trainring {
  0%   { transform: scale(.7); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ── LEAFLET POPUP ────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  background: rgba(10,10,14,0.97) !important;
  backdrop-filter: var(--blur) !important;
  -webkit-backdrop-filter: var(--blur) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 16px !important; color: var(--text) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7) !important;
}
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-content { margin: 14px !important; font-family: var(--font) !important; min-width: 180px; }
.pu-num  { font-size: 10.5px; font-weight: 800; color: var(--accent); margin-bottom: 3px; }
.pu-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px; line-height: 1.3; }
.pu-row  { font-size: 11.5px; color: var(--text-2); margin-bottom: 5px; display: flex; justify-content: space-between; gap: 12px; }
.pu-row span:last-child { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.pu-badges { margin-top: 10px; display: flex; gap: 5px; flex-wrap: wrap; }

/* ── TOOLTIP ──────────────────────────────────────────────── */
.leaflet-tooltip {
  background: rgba(10,10,14,0.96) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 9px !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55) !important;
  padding: 5px 10px !important;
}
.leaflet-tooltip::before { display: none !important; }

/* ── TOAST ────────────────────────────────────────────────── */
.toast-wrap {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 2000; display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  background: rgba(12,12,16,0.97);
  border: 1px solid var(--border-2); border-radius: 14px;
  padding: 12px 18px; font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  backdrop-filter: var(--blur); animation: tin .28s ease;
  pointer-events: auto; min-width: 220px; max-width: 320px;
}
@keyframes tin  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.toast-exit { animation: tout .28s ease forwards; }
@keyframes tout { to{opacity:0;transform:translateY(10px)} }
.toast i { font-size: 18px; flex-shrink: 0; }
.toast.success i { color: var(--accent); }
.toast.warn    i { color: var(--warning); }

/* ── CATALOG / SCHEDULED CARDS ────────────────────────────── */
.train-card.st-scheduled { border-left-color: rgba(255,255,255,0.15); opacity: .78; }
.train-card.st-scheduled:hover { opacity: 1; }
.tc-sched { font-size: 10px; color: var(--text-3); margin-top: 4px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.list-sep {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text-3);
  padding: 10px 14px 4px; margin-top: 4px;
  border-top: 1px solid var(--border-2); text-transform: uppercase;
}

/* ── LOADING OVERLAY ──────────────────────────────────────── */
.load-overlay {
  position: fixed; inset: 0; z-index: 9999; background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  transition: opacity .45s ease;
}
.load-overlay.hidden { opacity: 0; pointer-events: none; }
.load-icon-wrap {
  position: relative; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.load-icon {
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #000;
  box-shadow: 0 8px 28px var(--accent-glow);
  animation: loadPulse 1.6s ease-in-out infinite;
  position: relative; z-index: 1;
}
.load-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent);
  animation: loadRing 2s ease-out infinite;
}
.load-ring.r1 { animation-delay: 0s; }
.load-ring.r2 { animation-delay: .7s; }
@keyframes loadRing  { 0%{transform:scale(.6);opacity:.8} 100%{transform:scale(1.65);opacity:0} }
@keyframes loadPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.load-title { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.load-bar-wrap { width: 160px; height: 3px; background: rgba(255,255,255,0.07); border-radius: 100px; overflow: hidden; }
.load-bar {
  height: 100%; width: 30%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 100px; animation: loadBar 1.8s ease-in-out infinite;
}
@keyframes loadBar { 0%{transform:translateX(-100%);width:40%} 50%{width:60%} 100%{transform:translateX(350%);width:40%} }
.load-sub { font-size: 12px; color: var(--text-2); letter-spacing: .03em; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }

/* ══════════════════════════════════════════════════════════
   MOBILE — bottom sheet layout
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .top-bar {
    top: calc(10px + var(--safe-top));
    left: 50%; transform: translateX(-50%);
    height: 48px;
    padding: 0 14px; gap: 8px;
    border-radius: 100px;
    max-width: calc(100vw - 24px);
  }
  .tb-name { font-size: 12px; }
  .tb-icon { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }

  /* Map controls shift based on sheet state */
  .map-controls {
    right: 12px; bottom: calc(52vh + 30px);
    transition: bottom .32s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.sheet-collapsed ~ .map-controls { bottom: 160px; }
  .detail-panel.open ~ .map-controls       { bottom: calc(65vh + 10px); }

  .map-fabs {
    right: 12px; bottom: calc(52vh + 130px);
    transition: bottom .32s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.sheet-collapsed ~ .map-fabs { bottom: 260px; }
  .detail-panel.open ~ .map-fabs       { bottom: calc(65vh + 100px); }

  /* ── Sidebar = bottom sheet ── */
  .sidebar {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 52vh; min-height: 120px;
    border-radius: 24px 24px 0 0;
    border: none; border-top: 1px solid var(--border-2);
    transition: height .3s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.sheet-collapsed { height: 120px !important; overflow: hidden; }
  .drag-handle { display: block; }

  /* ── Detail panel = bottom sheet ── */
  .detail-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 65vh;
    border-radius: 24px 24px 0 0;
    border: none; border-top: 1px solid var(--border-2);
    padding-bottom: var(--safe-bottom);
  }
  .detail-panel.open { animation: slideUpM .32s cubic-bezier(.175,.885,.32,1.2); }
  @keyframes slideUpM { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:none} }
  .detail-panel .drag-handle { display: block; }
  .detail-panel.open ~ .sidebar { display: none; }

  .dp-metrics { padding: 10px; gap: 6px; }
  .mc-value { font-size: 19px; }
  .speedo-num { font-size: 19px; }
  .dp-tab span { display: none; }
  .dp-tab { padding: 11px 12px; font-size: 11px; }

  .toast-wrap { bottom: calc(12px + var(--safe-bottom)); }

  .train-list { padding-bottom: max(10px, var(--safe-bottom)); }
}

@media (max-width: 440px) {
  .tb-stats .tb-stat-item:first-child { display: none; }
  .tb-divider:nth-child(4) { display: none; }
}

/* ── ROUTE POLYLINES (Leaflet classes) ────────────────────── */
.route-passed { }
.route-remain { }

/* ══════════════════════════════════════════════════════════
   MY STATION SHEET
   ══════════════════════════════════════════════════════════ */
.my-station-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 450;
  background: var(--bg2, #181c24);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,.55);
  padding: 6px 0 max(16px, var(--safe-bottom));
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.32,1.1,.6,1);
  will-change: transform;
}
.my-station-sheet.open {
  transform: translateY(0);
}

/* header row */
.ms-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px 8px;
}
.ms-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(99,179,237,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: #63b3ed;
}
.ms-title-wrap { flex: 1; min-width: 0; }
.ms-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #718096);
}
.ms-station-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-station-nameBn {
  font-size: 14px;
  color: var(--muted, #718096);
  font-family: 'Tiro Bangla', serif;
}
.ms-dist-badge {
  flex-shrink: 0;
  background: rgba(99,179,237,.18);
  color: #63b3ed;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
  align-self: center;
}
.ms-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted, #718096);
  padding: 4px 16px 6px;
}
.ms-train-list {
  overflow-y: auto;
  flex: 1;
  padding: 0 10px 4px;
}
.ms-train-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s;
  margin-bottom: 3px;
}
.ms-train-item:hover, .ms-train-item:active {
  background: rgba(255,255,255,.06);
}
.ms-train-num {
  flex-shrink: 0;
  min-width: 46px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 4px 6px;
  color: var(--text, #e2e8f0);
}
.ms-train-info { flex: 1; min-width: 0; }
.ms-train-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-train-route {
  font-size: 11px;
  color: var(--muted, #718096);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-train-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 7px;
  letter-spacing: .04em;
}
.ms-train-badge.on-time  { background: rgba(72,187,120,.2); color: #48bb78; }
.ms-train-badge.delayed  { background: rgba(252,129,74,.2);  color: #fc814a; }
.ms-train-badge.arrived  { background: rgba(237,187,100,.2); color: #edbb64; }
.ms-empty {
  text-align: center;
  color: var(--muted, #718096);
  font-size: 13px;
  padding: 24px 16px;
}

/* FAB "my station" state */
#fabMyStation.locating i { animation: spin .8s linear infinite; }
#fabMyStation.active { background: rgba(99,179,237,.25); color: #63b3ed; }

/* ══════════════════════════════════════════════════════════
   LOCATION PERMISSION PROMPT
   ══════════════════════════════════════════════════════════ */
.loc-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.loc-prompt-overlay.show {
  opacity: 1;
  pointer-events: all;
}
.loc-prompt {
  background: var(--bg2, #181c24);
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.loc-prompt-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(99,179,237,.15);
  color: #63b3ed;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.loc-prompt-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #e2e8f0);
  margin-bottom: 8px;
}
.loc-prompt-body {
  font-size: 13px;
  color: var(--muted, #718096);
  line-height: 1.5;
  margin-bottom: 20px;
}
.loc-prompt-btns {
  display: flex;
  gap: 10px;
}
.loc-btn-deny {
  flex: 1;
  padding: 11px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,.07);
  color: var(--muted, #718096);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.loc-btn-allow {
  flex: 2;
  padding: 11px;
  border-radius: 12px;
  border: none;
  background: #63b3ed;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.loc-btn-allow:hover { background: #90cdf4; }
.loc-btn-deny:hover  { background: rgba(255,255,255,.12); }