/* ══════════════════════════════════════════════════════════════
   BLUEBOX LIVE TRACKING — literal port of Portal's BlueBoxTrackingPanel.razor
   and AirTrackingPanel.razor styles (bbt-* / bbair-*), used by
   BBMS.WebUI/Components/BlueBox/. Dark-mode (.portal-shell.dark) rules
   omitted (brace-matched removal) — this page has no dark theme in WebUI.
   ══════════════════════════════════════════════════════════════ */
/* ??????????????????????????????????????????????????????
   BLUEBOX LIVE TRACKING PANEL  (bbt-)
?????????????????????????????????????????????????????? */

.bbt-root { display:flex; flex-direction:column; gap:14px; padding:2px 0; }

/* Loading */
.bbt-loading-shell { display:flex; flex-direction:column; align-items:center; gap:16px; padding:60px 0; }
.bbt-pulse-ring { width:56px; height:56px; border-radius:50%; border:3px solid transparent;
  border-top-color:var(--accent); border-right-color:var(--teal);
  animation:bbt-spin 1s linear infinite; }
@keyframes bbt-spin { to { transform:rotate(360deg); } }
.bbt-loading-label { font-size:13px; color:var(--text-muted); }

/* Empty states */
.bbt-empty-shell { display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 20px; text-align:center; }
.bbt-empty-globe { opacity:.7; animation:bbt-float 3s ease-in-out infinite; }
@keyframes bbt-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.bbt-empty-title { font-size:16px; font-weight:700; color:var(--navy-dark); }
.bbt-empty-sub { font-size:13px; color:var(--text-muted); max-width:380px; line-height:1.6; }
.bbt-last-sync { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* Radar animation for "subscribed, no events yet" */
.bbt-radar-wrap { position:relative; width:80px; height:80px; }
.bbt-radar-ring { position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); opacity:0; animation:bbt-radar 2.4s ease-out infinite; }
.bbt-radar-ring.r2 { animation-delay:.8s; }
.bbt-radar-ring.r3 { animation-delay:1.6s; }
.bbt-radar-dot { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; background:var(--accent); }
@keyframes bbt-radar { 0%{transform:scale(.2);opacity:.9} 100%{transform:scale(1.8);opacity:0} }

/* Header bar */
.bbt-header { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:linear-gradient(135deg,#0A1F44 0%,#0d2d5e 100%);
  padding:14px 18px; border-radius:10px; }
.bbt-header-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.bbt-live-badge { display:flex; align-items:center; gap:5px; background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.4);
  color:#f87171; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:800; letter-spacing:.08em; flex-shrink:0; }
.bbt-live-dot { width:6px; height:6px; border-radius:50%; background:#ef4444; animation:bbt-pulse-dot 1.2s ease-in-out infinite; }
@keyframes bbt-pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
.bbt-header-title { font-size:14px; font-weight:700; color:#fff; }
.bbt-header-sub { font-size:11px; color:rgba(255,255,255,.5); }
.bbt-header-right { display:flex; align-items:center; gap:8px; }
.bbt-last-updated { display:flex; align-items:center; gap:4px; font-size:11px; color:rgba(255,255,255,.55); }
.bbt-event-count-chip { font-size:11px; background:rgba(255,255,255,.1); color:#fff; padding:2px 8px; border-radius:12px; border:1px solid rgba(255,255,255,.15); }
.bbt-email-alert-btn { display:flex; align-items:center; gap:5px; font-size:11px; padding:3px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); cursor:pointer; transition:all .2s; white-space:nowrap; }
.bbt-email-alert-btn:hover:not(:disabled) { background:rgba(255,255,255,.15); color:#fff; }
.bbt-email-alert-btn.active { background:rgba(16,185,129,.25); border-color:rgba(16,185,129,.6); color:#6ee7b7; }
.bbt-email-alert-btn.active:hover:not(:disabled) { background:rgba(16,185,129,.35); }
.bbt-email-alert-btn:disabled { opacity:.6; cursor:not-allowed; }

/* Gear / config button */
.bbt-config-gear { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); color:rgba(255,255,255,.55); cursor:pointer; transition:all .2s; flex-shrink:0; }
.bbt-config-gear:hover { background:rgba(255,255,255,.15); color:#fff; }
.bbt-config-gear.active { background:rgba(99,102,241,.35); border-color:rgba(99,102,241,.6); color:#a5b4fc; }

/* Alert config panel */
.bbt-alert-config-panel { background:var(--off-white); border:1px solid #e2e8f0; border-top:none; padding:18px 20px; animation:bbt-panel-slide .2s ease both; }
.bbt-acp-header { margin-bottom:14px; }
.bbt-acp-title { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--navy-dark); margin-bottom:3px; }
.bbt-acp-sub { font-size:11.5px; color:#64748b; }

/* Container tabs */
.bbt-acp-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.bbt-acp-tab { padding:5px 12px; border-radius:20px; font-size:11.5px; font-weight:600; font-family:monospace; cursor:pointer; border:1px solid #cbd5e1; background:#fff; color:#475569; transition:all .15s; }
.bbt-acp-tab.active { background:var(--navy-dark); border-color:var(--navy-dark); color:#fff; }

/* Milestone checklist grid */
.bbt-acp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:6px; margin-bottom:16px; }
.bbt-acp-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; transition:all .15s; }
.bbt-acp-item.on { border-color:#bbf7d0; background:#f0fdf4; }
.bbt-acp-item input[type=checkbox] { width:14px; height:14px; accent-color:#10b981; flex-shrink:0; cursor:pointer; }
.bbt-acp-label { font-size:12px; color:#374151; flex:1; }
.bbt-acp-code { font-size:10px; font-family:monospace; color:#94a3b8; background:#f1f5f9; padding:1px 5px; border-radius:4px; flex-shrink:0; }

/* Footer */
.bbt-acp-footer { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bbt-acp-save { display:flex; align-items:center; gap:6px; padding:7px 16px; border-radius:7px; background:var(--navy-dark); color:#fff; border:none; font-size:12.5px; font-weight:600; cursor:pointer; transition:opacity .15s; }
.bbt-acp-save:hover:not(:disabled) { opacity:.88; }
.bbt-acp-save:disabled { opacity:.55; cursor:not-allowed; }
.bbt-acp-reset { padding:7px 14px; border-radius:7px; background:transparent; border:1px solid #cbd5e1; color:#64748b; font-size:12.5px; cursor:pointer; }
.bbt-acp-reset:hover:not(:disabled) { border-color:#94a3b8; color:#374151; }
.bbt-acp-msg { font-size:12px; font-weight:600; }
.bbt-acp-msg.ok { color:#16a34a; }
.bbt-acp-msg.err { color:#dc2626; }

/* Stats row */
.bbt-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:640px){ .bbt-stats-row { grid-template-columns:repeat(2,1fr); } }
.bbt-stat-card { display:flex; align-items:center; gap:10px; background:var(--off-white); border:1px solid #e5e9f0; border-radius:10px; padding:12px 14px; }
.bbt-stat-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--si-bg,#e0f2fe); flex-shrink:0; }
.bbt-stat-body {}
.bbt-stat-val { font-size:20px; font-weight:800; color:var(--sc,var(--accent)); line-height:1; }
.bbt-stat-lbl { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* Vessel strip */
.bbt-vessel-strip { position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(135deg,#1a3a6e 0%,#0d5ea8 100%); border-radius:10px; padding:14px 18px; }
.bbt-vessel-icon { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bbt-vessel-info { display:flex; flex-direction:column; gap:1px; }
.bbt-vessel-label { font-size:10px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.06em; }
.bbt-vessel-name { font-size:14px; font-weight:700; color:#fff; }
.bbt-vessel-divider { width:1px; height:32px; background:rgba(255,255,255,.2); }
.bbt-vessel-wave { position:absolute; bottom:0; left:0; right:0; height:30px; }
.bbt-vessel-wave svg { width:100%; height:100%; }

/* Latest milestone banner */
.bbt-latest-banner { display:flex; align-items:center; gap:14px; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:10px; padding:14px 18px; }
.bbt-latest-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bbt-latest-icon.vessel { background:#DBEAFE; color:#1D4ED8; }
.bbt-latest-icon.gate-in { background:#D1FAE5; color:#065F46; }
.bbt-latest-icon.gate-out { background:#FEE2E2; color:#991B1B; }
.bbt-latest-icon.arrived { background:#E0F2FE; color:#0369A1; }
.bbt-latest-icon.departed { background:#EDE9FE; color:#5B21B6; }
.bbt-latest-icon.customs { background:#D1FAE5; color:#065F46; }
.bbt-latest-icon { background:#ECFDF5; color:#059669; }
.bbt-latest-body { flex:1; min-width:0; }
.bbt-latest-chip { font-size:10px; font-weight:700; color:#059669; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; }
.bbt-latest-title { font-size:16px; font-weight:700; color:var(--navy-dark); }
.bbt-latest-loc { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); margin-top:3px; }
.bbt-un-code { font-size:10px; color:var(--text-muted); background:rgba(0,0,0,.05); padding:0 4px; border-radius:3px; font-family:monospace; }
.bbt-latest-time { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; }
.bbt-latest-date { font-size:13px; font-weight:600; color:var(--navy-dark); }
.bbt-latest-hour { font-size:11px; color:var(--text-muted); }

/* Timeline */
.bbt-timeline-wrap { background:var(--off-white); border:1px solid #e5e9f0; border-radius:10px; overflow:hidden; }
.bbt-tl-header { display:flex; align-items:center; gap:8px; padding:12px 16px; font-size:13px; font-weight:700;
  color:var(--navy-dark); border-bottom:1px solid #e5e9f0; }
.bbt-tl-list { }
.bbt-tl-date-sep { font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.08em;
  padding:8px 16px; background:rgba(42,110,187,.05); border-bottom:1px solid rgba(42,110,187,.08); }

.bbt-tl-item { display:flex; align-items:flex-start; gap:0; padding:0 16px; cursor:pointer;
  border-bottom:1px solid #f0f4f8; transition:background .15s; }
.bbt-tl-item:last-child { border-bottom:none; }
.bbt-tl-item:hover { background:rgba(42,110,187,.04); }

.bbt-tl-node { display:flex; flex-direction:column; align-items:center; padding:14px 14px 14px 0; flex-shrink:0; width:36px; }
.bbt-tl-node-inner { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bbt-tl-node-inner.done { background:linear-gradient(135deg,#10b981,#059669); color:#fff; box-shadow:0 2px 8px rgba(16,185,129,.35); }
.bbt-tl-node-inner.plan { background:#fff; border:2px dashed #cbd5e1; color:#94a3b8; }
.bbt-tl-line { flex:1; width:2px; background:#e5e9f0; margin-top:4px; min-height:8px; }
.bbt-tl-item:last-child .bbt-tl-line { display:none; }
.bbt-tl-item.actual .bbt-tl-line { background:linear-gradient(to bottom,rgba(16,185,129,.3),transparent); }

.bbt-tl-content { flex:1; min-width:0; padding:14px 8px 14px 0; }
.bbt-tl-top { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:4px; }
.bbt-tl-name { font-size:13px; font-weight:600; color:var(--navy-dark); }
.bbt-tl-classifier { font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; }
.bbt-tl-classifier.act { background:#D1FAE5; color:#065F46; }
.bbt-tl-classifier.pln { background:#FEF3C7; color:#92400E; }
.bbt-tl-classifier.est { background:#E0F2FE; color:#075985; }
.bbt-tl-mode { font-size:10px; color:var(--text-muted); background:rgba(0,0,0,.05); padding:1px 6px; border-radius:10px; font-family:monospace; }
.bbt-tl-loc { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); }

.bbt-tl-detail { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; animation:bbt-slide-in .2s ease; }
@keyframes bbt-slide-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.bbt-detail-chip { display:flex; align-items:center; gap:5px; font-size:11px; background:rgba(42,110,187,.07);
  border:1px solid rgba(42,110,187,.15); color:var(--navy-dark); padding:2px 8px; border-radius:12px; font-family:monospace; }

.bbt-tl-time { display:flex; flex-direction:column; align-items:flex-end; gap:4px; padding:14px 0; flex-shrink:0; }
.bbt-tl-time span { font-size:11px; color:var(--text-muted); white-space:nowrap; }
.bbt-tl-chevron { color:var(--text-muted); transition:transform .2s; flex-shrink:0; }
.bbt-tl-chevron.open { transform:rotate(90deg); color:var(--accent); }

/* Legend */
.bbt-legend { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:4px 0; }
.bbt-leg-item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-muted); }
.bbt-leg-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.bbt-leg-dot.act { background:linear-gradient(135deg,#10b981,#059669); }
.bbt-leg-dot.est { background:#fff; border:2px dashed #cbd5e1; }

/* Map card */
.bbt-map-card { background:var(--off-white); border:1px solid #e5e9f0; border-radius:10px; overflow:hidden; }
.bbt-map-header { display:flex; align-items:center; gap:8px; padding:10px 14px;
  font-size:13px; font-weight:700; color:var(--navy-dark); border-bottom:1px solid #e5e9f0; flex-wrap:wrap; }
.bbt-map-legend { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:400; color:var(--text-muted); margin-left:auto; }
.bbt-map-leg-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.bbt-map-geocoding { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-muted); font-weight:400; }
.bbt-map-container { height:340px; width:100%; background:#e8eef4; position:relative; z-index:0; }
.bbt-map-card { isolation:isolate; }
@media(max-width:640px){ .bbt-map-container { height:240px; } }

/* Leaflet popup overrides */
.bbt-map-popup .leaflet-popup-content-wrapper { border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.15); padding:0; border:none; }
.bbt-map-popup .leaflet-popup-content { margin:0; }
.bbt-map-popup .leaflet-popup-tip { background:#fff; }
.bbt-popup { padding:12px 14px; min-width:160px; }
.bbt-popup-title { font-size:13px; font-weight:700; color:#0A1F44; margin-bottom:3px; }
.bbt-popup-loc { font-size:12px; color:#4B5563; }
.bbt-popup-time { font-size:11px; color:#9CA3AF; margin-top:2px; }
.bbt-popup-vessel { font-size:11px; color:#6B7280; margin-top:4px; }
.bbt-popup-cls { display:inline-block; margin-top:5px; font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; }
.bbt-popup-cls.act { background:#D1FAE5; color:#065F46; }
.bbt-popup-cls.pln { background:#FEF3C7; color:#92400E; }
.bbt-popup-cls.est { background:#E0F2FE; color:#075985; }

/* Pulsing latest-event map marker */
.bbt-map-pulse { position:relative; width:18px; height:18px; }
.bbt-map-pulse::before { content:''; position:absolute; inset:-6px; border-radius:50%;
  background:rgba(16,185,129,.25); animation:bbt-map-pulse 1.6s ease-out infinite; }
.bbt-map-dot { position:absolute; inset:2px; border-radius:50%; background:#10B981;
  border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); }
@keyframes bbt-map-pulse { 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.8);opacity:0} }

/* Subscribe button */
.bbt-subscribe-btn { display:flex; align-items:center; gap:8px; margin-top:6px;
  background:linear-gradient(135deg,var(--accent),#1a5cb0); color:#fff;
  border:none; border-radius:10px; padding:11px 24px; font-size:13px; font-weight:700;
  cursor:pointer; transition:opacity .15s, transform .15s; box-shadow:0 4px 14px rgba(42,110,187,.35); }
.bbt-subscribe-btn:hover:not(:disabled) { opacity:.9; transform:translateY(-1px); }
.bbt-subscribe-btn:disabled { opacity:.65; cursor:not-allowed; }
.bbt-subscribe-spinner { width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; animation:bbt-spin .8s linear infinite; flex-shrink:0; }
.bbt-sub-error { display:flex; align-items:center; gap:6px; font-size:12px; color:#ef4444;
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); border-radius:8px; padding:8px 12px; max-width:360px; }

/* Live Tracking tab button */
.sd-tab-live { display:flex; align-items:center; gap:6px; }
.sd-tab-live-dot { width:6px; height:6px; border-radius:50%; background:#ef4444; animation:bbt-pulse-dot 1.2s ease-in-out infinite; }
.sd-tab.active .sd-tab-live-dot { background:#fff; }

/* ??????????????????????????????????????????????????????
   END BLUEBOX LIVE TRACKING PANEL
?????????????????????????????????????????????????????? */

/* ??????????????????????????????????????????????????????
   LIVE TRACKING PAGE  (trk-)
?????????????????????????????????????????????????????? */

.trk-root { display:flex; flex-direction:column; gap:16px; padding:2px 0; }

/* Success / error messages */
.bbt-sub-success,.trk-success { display:flex; align-items:center; gap:6px; font-size:12px; color:#059669;
  background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25); border-radius:8px; padding:8px 12px; max-width:400px; font-weight:600; }

/* Page header */
.trk-page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  background:linear-gradient(135deg,#0A1F44 0%,#0d3572 100%); border-radius:12px; padding:20px 24px; }
.trk-page-header-left { display:flex; align-items:center; gap:14px; }
.trk-page-icon { width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trk-page-title { font-size:18px; font-weight:800; color:#fff; }
.trk-page-sub { font-size:12px; color:rgba(255,255,255,.55); margin-top:2px; }
.trk-mode-btn { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.6); padding:5px 14px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.04em; cursor:pointer; transition:all .15s; }
.trk-mode-btn:hover { background:rgba(255,255,255,.14); color:#fff; }
.trk-mode-btn.active { background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.5); color:#f87171; }
.trk-mode-btn.active.air { background:rgba(14,165,233,.18); border-color:rgba(14,165,233,.5); color:#38bdf8; }
.trk-live-pill { display:flex; align-items:center; gap:6px; background:rgba(239,68,68,.15);
  border:1px solid rgba(239,68,68,.4); color:#f87171; padding:5px 12px; border-radius:20px;
  font-size:11px; font-weight:800; letter-spacing:.06em; }
.trk-live-dot { width:7px; height:7px; border-radius:50%; background:#ef4444; animation:bbt-pulse-dot 1.2s ease-in-out infinite; flex-shrink:0; }

/* Search card */
.trk-search-card { background:var(--off-white); border:1px solid #e5e9f0; border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:14px; }
.trk-search-tabs { display:flex; gap:6px; }
.trk-stab { background:none; border:1.5px solid #e5e9f0; border-radius:8px; padding:6px 14px; font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .15s; }
.trk-stab:hover { border-color:var(--accent); color:var(--accent); }
.trk-stab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.trk-search-row { display:flex; gap:10px; }
.trk-search-input-wrap { flex:1; position:relative; display:flex; align-items:center; }
.trk-search-ico { position:absolute; left:12px; color:var(--text-muted); flex-shrink:0; }
.trk-search-input { width:100%; border:1.5px solid #e5e9f0; border-radius:10px; padding:11px 36px 11px 36px;
  font-size:14px; background:var(--off-white); color:var(--navy-dark); outline:none; transition:border .15s; font-family:inherit; }
.trk-search-input:focus { border-color:var(--accent); }
.trk-search-clear { position:absolute; right:10px; background:none; border:none; cursor:pointer; color:var(--text-muted); display:flex; padding:4px; border-radius:4px; }
.trk-search-clear:hover { color:var(--navy-dark); }
.trk-search-btn { display:flex; align-items:center; gap:7px; background:linear-gradient(135deg,var(--accent),#1a5cb0);
  color:#fff; border:none; border-radius:10px; padding:11px 22px; font-size:13px; font-weight:700;
  cursor:pointer; transition:opacity .15s; white-space:nowrap; flex-shrink:0; }
.trk-search-btn:hover:not(:disabled) { opacity:.9; }
.trk-search-btn:disabled { opacity:.65; cursor:not-allowed; }
.trk-spinner { width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; animation:bbt-spin .8s linear infinite; flex-shrink:0; }
.trk-error { display:flex; align-items:center; gap:7px; font-size:12px; color:#ef4444;
  background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.2); border-radius:8px; padding:9px 12px; }

/* Job info card */
.trk-job-card { background:var(--off-white); border:1px solid #e5e9f0; border-radius:12px; padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.trk-job-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.trk-job-code { font-size:16px; font-weight:800; color:var(--navy-dark); }
.trk-status-chip { display:flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; }
.trk-status-chip.active { background:#D1FAE5; color:#065F46; }
.trk-status-chip.inactive { background:#FEF3C7; color:#92400E; }
.trk-job-refs { display:flex; flex-wrap:wrap; gap:10px; }
.trk-ref-item { display:flex; flex-direction:column; gap:1px; background:rgba(42,110,187,.05);
  border:1px solid rgba(42,110,187,.1); border-radius:8px; padding:7px 12px; }
.trk-ref-lbl { font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
.trk-ref-val { font-size:13px; font-weight:600; color:var(--navy-dark); font-family:monospace; }
.trk-sub-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#FFFBEB;
  border:1px solid #FDE68A; border-radius:8px; padding:10px 14px; font-size:13px; color:#92400E; }
.trk-subscribe-btn { display:flex; align-items:center; gap:6px; margin-left:auto; background:linear-gradient(135deg,var(--accent),#1a5cb0);
  color:#fff; border:none; border-radius:8px; padding:7px 16px; font-size:12px; font-weight:700; cursor:pointer; transition:opacity .15s; white-space:nowrap; }
.trk-subscribe-btn:disabled { opacity:.65; cursor:not-allowed; }
.trk-last-sync { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-muted); }
.trk-containers-section { margin-top:10px; }
.trk-containers-label { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.trk-containers-chips { display:flex; flex-wrap:wrap; gap:6px; }
.trk-container-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; background:var(--bafco-blue-light); border:1px solid #bae6fd; border-radius:20px; font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; transition:background .15s; font-family:monospace; }
.trk-container-chip:hover { background:#bae6fd; }
.trk-nodata-banner { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#FEF3C7; border:1px solid #FCD34D; border-radius:8px; padding:10px 14px; font-size:13px; color:#92400E; margin-top:10px; }
.trk-nodata-banner.trk-nodata-retrack { background:#EFF6FF; border-color:#BFDBFE; color:#1E40AF; }
.trk-retrack-btn { display:inline-flex; align-items:center; gap:5px; margin-left:auto; background:#0071C1; color:#fff; border:none; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:opacity .15s; white-space:nowrap; }
.trk-retrack-btn:hover { opacity:.88; }
.trk-retrack-btn:disabled { opacity:.55; cursor:not-allowed; }

/* ?? Container summary list ??????????????????????????????????????????????? */
.trk-clist { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.trk-clist-row { background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }

/* card header row */
.trk-clist-card-header { display:flex; align-items:center; gap:10px; padding:10px 16px; background:#f8fafc; border-bottom:1px solid #f0f2f5; flex-wrap:wrap; }
.trk-clist-jobcode { font-size:14px; font-weight:800; color:#0a1f44; letter-spacing:.01em; }
.trk-clist-active-badge { display:inline-flex; align-items:center; font-size:11px; font-weight:600; color:#059669; background:#d1fae5; border:1px solid #6ee7b7; border-radius:20px; padding:2px 9px; }
.trk-clist-lastev { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#6b7280; }
.trk-clist-view-btn { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:8px; font-size:13px; font-weight:700; text-decoration:none; background:#0071c1; color:#fff; transition:background .15s; flex-shrink:0; }
.trk-clist-view-btn:hover { background:#005a9e; }

/* card body: fields in one horizontal row */
.trk-clist-card-body { display:flex; align-items:center; gap:0; padding:12px 16px; }
.trk-clist-divider { width:1px; height:34px; background:#e5e7eb; margin:0 18px; flex-shrink:0; }
.trk-clist-field { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.trk-clist-lbl { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#9ca3af; white-space:nowrap; }
.trk-clist-val { font-size:13px; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trk-clist-val.bold { font-weight:700; color:#0a1f44; }
.trk-clist-cn-link { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:#0071c1; text-decoration:none; white-space:nowrap; }
.trk-clist-cn-link:hover { color:#005a9e; text-decoration:underline; }

/* Stats row */
.trk-stats-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media(max-width:640px){ .trk-stats-row { grid-template-columns:repeat(3,1fr); } }
.trk-stat { background:var(--off-white); border:1px solid #e5e9f0; border-radius:10px; padding:14px;
  display:flex; flex-direction:column; gap:3px; border-top:3px solid var(--sc); }
.trk-stat-val { font-size:24px; font-weight:800; color:var(--sc); line-height:1; }
.trk-stat-lbl { font-size:11px; color:var(--text-muted); }

/* Map */
.trk-map-card { background:var(--off-white); border:1px solid #e5e9f0; border-radius:12px; overflow:hidden; }
.trk-map-header { display:flex; align-items:center; gap:8px; padding:11px 16px; font-size:13px; font-weight:700;
  color:var(--navy-dark); border-bottom:1px solid #e5e9f0; flex-wrap:wrap; }
.trk-map-container { height:380px; width:100%; }
@media(max-width:640px){ .trk-map-container { height:250px; } }

/* Filter bar */
.trk-filter-bar { display:flex; gap:6px; flex-wrap:wrap; }
.trk-ftab { background:none; border:1.5px solid #e5e9f0; border-radius:20px; padding:5px 14px;
  font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .15s;
  display:flex; align-items:center; gap:5px; }
.trk-ftab:hover { border-color:var(--accent); color:var(--accent); }
.trk-ftab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.trk-dot { width:8px; height:8px; border-radius:50%; }
.trk-dot.act { background:#10B981; }

/* Table */
.trk-table-card { background:var(--off-white); border:1px solid #e5e9f0; border-radius:12px; overflow:hidden; overflow-x:auto; }
.trk-table { width:100%; border-collapse:collapse; font-size:13px; }
.trk-table thead th { padding:11px 14px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); background:rgba(42,110,187,.04); border-bottom:1px solid #e5e9f0; white-space:nowrap; }
.trk-table tbody tr { border-bottom:1px solid #f0f4f8; transition:background .12s; }
.trk-table tbody tr:last-child { border-bottom:none; }
.trk-table tbody tr:hover { background:rgba(42,110,187,.03); }
.trk-table tbody tr.actual { border-left:3px solid #10B981; }
.trk-table tbody tr.planned { border-left:3px solid #F59E0B; }
.trk-table td { padding:11px 14px; vertical-align:middle; }
.trk-td-time { white-space:nowrap; }
.trk-time-date { font-size:12px; font-weight:600; color:var(--navy-dark); }
.trk-time-hour { font-size:11px; color:var(--text-muted); }
.trk-event-name { font-size:13px; font-weight:600; color:var(--navy-dark); }
.trk-event-type { font-size:10px; color:var(--text-muted); margin-top:1px; }
.trk-cls-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; }
.trk-cls-badge.act { background:#D1FAE5; color:#065F46; }
.trk-cls-badge.pln { background:#FEF3C7; color:#92400E; }
.trk-cls-badge.est { background:#E0F2FE; color:#075985; }
.trk-loc { font-size:12px; color:var(--navy-dark); }
.trk-uncode { font-size:10px; color:var(--text-muted); font-family:monospace; }
.trk-mono { font-family:monospace; font-size:12px; color:var(--navy-dark); }
.trk-vessel { font-size:12px; font-weight:600; color:var(--navy-dark); }
.trk-voyage { font-size:10px; color:var(--text-muted); font-family:monospace; }
.trk-mode { font-size:10px; background:rgba(42,110,187,.07); border:1px solid rgba(42,110,187,.15);
  color:var(--navy-dark); padding:2px 7px; border-radius:8px; font-weight:600; white-space:nowrap; }
.trk-na { color:#CBD5E1; font-size:12px; }
.trk-empty-row { text-align:center; padding:24px !important; color:var(--text-muted); font-size:13px; }

/* Awaiting / No result states */
.trk-awaiting { display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 20px; }
.trk-awaiting-title { font-size:15px; font-weight:700; color:var(--navy-dark); }
.trk-awaiting-sub { font-size:13px; color:var(--text-muted); text-align:center; max-width:360px; }
.trk-no-result { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 20px; color:var(--text-muted); font-size:13px; }

/* Direct subscribe fallback card */
.trk-direct-card { background:#fff; border:1.5px dashed var(--accent); border-radius:12px; padding:22px 24px; margin-top:0; display:flex; flex-direction:column; gap:10px; }
.trk-direct-header { font-size:13px; font-weight:700; color:var(--navy-dark); display:flex; align-items:center; gap:7px; }
.trk-direct-body { font-size:12.5px; color:var(--text-muted); line-height:1.6; max-width:600px; }

/* Sidebar live item */
.nav-item-live { position:relative; }
.sb-live-badge { font-size:9px; font-weight:800; background:#ef4444; color:#fff; padding:1px 5px;
  border-radius:8px; letter-spacing:.04em; margin-left:auto; animation:bbt-pulse-dot 2s ease-in-out infinite; }
.nav-item-live.active .sb-live-badge { background:rgba(255,255,255,.25); animation:none; }

/* ?? Container Journey Bars ??????????????????????????????????????????????? */
.bbt-cj-section { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }

.bbt-cj-card {
    background:#fff; border:1px solid #E8EDF4; border-radius:12px;
    padding:14px 16px; display:flex; align-items:center; gap:16px;
}

.bbt-cj-meta { display:flex; flex-direction:column; gap:5px; min-width:108px; flex-shrink:0; }

.bbt-cj-no { font-family:monospace; font-size:11.5px; font-weight:700; color:#1E3A5F; letter-spacing:.5px; }

.bbt-cj-badge { font-size:10px; font-weight:600; padding:2px 9px; border-radius:20px; display:inline-block; white-space:nowrap; }
.bbt-cj-badge.arrived { background:#D1FAE5; color:#065F46; }
.bbt-cj-badge.transit  { background:#DBEAFE; color:#1E40AF; }
.bbt-cj-badge.pending  { background:#F3F4F6; color:#6B7280; }

/* scrollable track */
.bbt-cj-track {
    flex:1; display:flex; align-items:flex-start;
    overflow-x:auto; padding:4px 0 10px;
    scrollbar-width:thin; scrollbar-color:#CBD5E1 transparent;
}
.bbt-cj-track::-webkit-scrollbar { height:3px; }
.bbt-cj-track::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:4px; }

/* each port stop */
.bbt-cj-stop { display:flex; flex-direction:column; align-items:center; min-width:64px; flex-shrink:0; }

.bbt-cj-node {
    width:22px; height:22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:box-shadow .2s;
}
.bbt-cj-node.done         { background:#10B981; color:#fff; }
.bbt-cj-node.plan         { background:#fff; border:2px solid #CBD5E1; color:#94A3B8; }
.bbt-cj-node.origin.done  { background:#0EA5E9; }
.bbt-cj-node.origin.plan  { border-color:#94A3B8; }
.bbt-cj-node.dest.done    { background:#059669; }
.bbt-cj-node.current {
    background:#10B981; color:#fff;
    animation:bbt-cj-pulse 2s ease-in-out infinite;
}
@keyframes bbt-cj-pulse {
    0%,100% { box-shadow:0 0 0 3px rgba(16,185,129,.25), 0 0 0 7px rgba(16,185,129,.1); }
    50%      { box-shadow:0 0 0 5px rgba(16,185,129,.2),  0 0 0 10px rgba(16,185,129,.07); }
}

/* port label */
.bbt-cj-label { text-align:center; margin-top:5px; }
.bbt-cj-code  { font-size:10px; font-weight:700; color:#374151; letter-spacing:.3px; white-space:nowrap; }
.bbt-cj-date  { font-size:9px; color:#9CA3AF; white-space:nowrap; margin-top:1px; }

/* connecting line */
.bbt-cj-line {
    flex:1; height:2px; min-width:28px;
    margin-top:10px; /* align with center of 22px node */
    position:relative; flex-shrink:1;
}
.bbt-cj-line.done { background:#10B981; }
.bbt-cj-line.plan {
    background:repeating-linear-gradient(90deg,#CBD5E1 0,#CBD5E1 5px,transparent 5px,transparent 10px);
}

/* ship marker on the active line */
.bbt-cj-ship {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    color:#2A6EBB; background:#fff; border-radius:50%;
    width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 2px #10B981;
}

/* days late/early badge */
.bbt-cj-late { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.bbt-cj-late.behind { background:#FEE2E2; color:#991B1B; }
.bbt-cj-late.ahead  { background:#D1FAE5; color:#065F46; }

/* ?? Per-container card wrapper ??????????????????????????????????????????? */
.bbt-cntr-wrap {
    margin: 6px 0;
    border-radius: 12px;
    transition: box-shadow .2s;
}
.bbt-cntr-wrap.open {
    box-shadow: 0 4px 20px rgba(30,58,95,.13), 0 1px 6px rgba(30,58,95,.08);
}

/* ?? Container collapsible header in timeline ????????????????????????????? */
.bbt-tl-ctr-header {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px; margin:0;
    background:#F0F6FF; border:1px solid #D1E3F8; border-radius:10px;
    cursor:pointer; user-select:none; transition:background .15s, border-radius .15s;
}
.bbt-tl-ctr-header:hover { background:#E0EEF9; }
.bbt-tl-ctr-header.open  {
    background:#E0EEF9; border-color:#2A6EBB;
    border-radius: 12px 12px 0 0;
    border-bottom-color: transparent;
}

/* Status-colored container icon circle */
.bbt-ctr-icon {
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.bbt-ctr-icon.transit   { background:#EFF6FF; color:#3B82F6; }
.bbt-ctr-icon.arriving  { background:#ECFDF5; color:#10B981; }
.bbt-ctr-icon.transship { background:#FFFBEB; color:#F59E0B; }
.bbt-ctr-icon.loaded    { background:#F5F3FF; color:#8B5CF6; }
.bbt-ctr-icon.departed  { background:#FFF7ED; color:#F97316; }
.bbt-ctr-icon.customs   { background:#F0FDFA; color:#14B8A6; }
.bbt-ctr-icon.unknown   { background:#F9FAFB; color:#6B7280; }

/* Info body: stacked rows */
.bbt-ctr-body { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.bbt-ctr-row1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bbt-ctr-row2 { display:flex; align-items:center; gap:12px; }
.bbt-ctr-evcount {
    display:inline-flex; align-items:center; gap:4px;
    font-size:11.5px; color:#64748b; font-weight:500;
}
.bbt-ctr-loc {
    display:inline-flex; align-items:center; gap:4px;
    font-size:11.5px; color:#475569; font-weight:400;
    max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bbt-ctr-dt {
    font-size:11px; font-weight:500; color:#64748b;
    white-space:nowrap;
}

.bbt-tl-ctr-left { display:flex; align-items:center; gap:8px; color:#1E3A5F; }

.bbt-tl-ctr-no { font-family:monospace; font-size:14px; font-weight:800; letter-spacing:.6px; color:#1E3A5F; }
.bbt-tl-ctr-count { font-size:11px; color:#6B7280; background:#fff; border:1px solid #E5E7EB;
    padding:1px 7px; border-radius:20px; }

/* ?? Scenario status badges ??????????????????????????????????????????????? */
.bbt-sc-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.76rem; font-weight:700; padding:4px 11px;
    border-radius:20px; white-space:nowrap; letter-spacing:.02em;
}
.bbt-sc-badge.transit   { background:#DBEAFE; color:#1D4ED8; }
.bbt-sc-badge.arriving  { background:#D1FAE5; color:#065F46; }
.bbt-sc-badge.transship { background:#FEF3C7; color:#92400E; }
.bbt-sc-badge.loaded    { background:#EDE9FE; color:#5B21B6; }
.bbt-sc-badge.departed  { background:#FFEDD5; color:#C2410C; }
.bbt-sc-badge.customs   { background:#CCFBF1; color:#0F766E; }
.bbt-sc-badge.unknown   { background:#F3F4F6; color:#6B7280; }

.bbt-sc-detail {
    font-size:.75rem; padding:5px 14px 6px;
    border-left:3px solid transparent;
    border-radius:0 0 6px 6px; margin:-2px 0 4px;
}
.bbt-sc-detail.transit   { border-color:#3B82F6; background:#EFF6FF; color:#1E40AF; }
.bbt-sc-detail.arriving  { border-color:#10B981; background:#ECFDF5; color:#065F46; }
.bbt-sc-detail.transship { border-color:#F59E0B; background:#FFFBEB; color:#92400E; }
.bbt-sc-detail.loaded    { border-color:#8B5CF6; background:#F5F3FF; color:#5B21B6; }
.bbt-sc-detail.departed  { border-color:#F97316; background:#FFF7ED; color:#C2410C; }
.bbt-sc-detail.customs   { border-color:#14B8A6; background:#F0FDFA; color:#0F766E; }
.bbt-sc-detail.unknown   { border-color:#D1D5DB; background:#F9FAFB; color:#6B7280; }

.bbt-sc-alert {
    display:flex; align-items:center; gap:8px;
    padding:8px 14px; margin:4px 0 8px;
    border-radius:8px; font-size:.78rem; font-weight:500;
}
.bbt-sc-alert.mixed { background:#FEF9C3; color:#854D0E; border:1px solid #FDE047; }

/* ?? Keyframe animations ??????????????????????????????????????????????????? */
@keyframes bbt-row-in {
    from { opacity:0; transform:translateX(-10px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes bbt-line-draw {
    from { transform:scaleY(0); }
    to   { transform:scaleY(1); }
}
@keyframes bbt-pulse-ring {
    0%   { box-shadow:0 0 0 0 rgba(16,185,129,.55); }
    65%  { box-shadow:0 0 0 7px rgba(16,185,129,0); }
    100% { box-shadow:0 0 0 0 rgba(16,185,129,0); }
}
@keyframes bbt-panel-slide {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes bbt-header-pop {
    0%   { transform:scale(1); }
    40%  { transform:scale(1.012); }
    100% { transform:scale(1); }
}

/* ?? Compact event rows (hairline sidebar + inline single-row) ?????????????? */
.bbt-ctr-body {
    border-left: 2px solid #dde3ec;
    margin: 4px 0 8px 28px;
    padding-bottom: 4px;
    overflow: visible;
    transform-origin: top;
    animation: bbt-line-draw .35s cubic-bezier(.4,0,.2,1) both;
}

.bbt-erow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 18px;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s, transform .1s;
    min-height: 36px;
    animation: bbt-row-in .28s cubic-bezier(.4,0,.2,1) calc(var(--i,0) * 45ms) both;
}
.bbt-erow:hover    { background: rgba(42,110,187,.05); transform: translateX(2px); }
.bbt-erow.expanded { background: rgba(42,110,187,.07); border-radius: 6px 6px 0 0; }

/* dot absolutely placed to sit on the sidebar line */
.bbt-erow-dot {
    position: absolute;
    left: -11px;
    top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 1;
}
.bbt-erow-dot.done {
    background: linear-gradient(135deg,#10b981,#059669);
    color: #fff; box-shadow: 0 1px 4px rgba(16,185,129,.4);
    transition: transform .15s;
}
.bbt-erow:hover .bbt-erow-dot.done { transform: translateY(-50%) scale(1.15); }
.bbt-erow-dot.done.latest { animation: bbt-pulse-ring 2.2s ease-out infinite; }

.bbt-erow-dot.plan {
    background: #fff; border: 2px dashed #cbd5e1; color: #94a3b8;
    transition: transform .15s;
}
.bbt-erow:hover .bbt-erow-dot.plan { transform: translateY(-50%) scale(1.12); }

/* info area: name � location  UNCODE � single line, ellipsis on overflow */
.bbt-erow-info {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 5px;
    overflow: hidden;
}
.bbt-erow-name {
    font-size: 12.5px; font-weight: 600; color: #1E3A5F;
    white-space: nowrap;
}

.bbt-erow-sep { color: #94a3b8; font-size: 11px; flex-shrink: 0; }

.bbt-erow-loc {
    font-size: 12px; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bbt-erow-uc {
    font-family: monospace; font-size: 10px; font-weight: 700;
    background: #EEF4FB; color: #2A6EBB; padding: 1px 5px; border-radius: 3px;
    flex-shrink: 0;
}

/* right side: badges + datetime + chevron */
.bbt-erow-right {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.bbt-erow-cls {
    font-size: 10px; font-weight: 700; padding: 2px 7px;
    border-radius: 20px; letter-spacing: .04em; white-space: nowrap;
}
.bbt-erow-cls.act { background: #d1fae5; color: #065f46; }
.bbt-erow-cls.pln { background: #f1f5f9; color: #64748b; }
.bbt-erow-cls.est { background: #fef3c7; color: #92400e; }

.bbt-erow-mode {
    font-size: 10px; font-weight: 600; color: #6b7280;
    background: #f3f4f6; padding: 2px 6px; border-radius: 4px;
    letter-spacing: .04em; white-space: nowrap;
}

.bbt-erow-dt {
    font-size: 11px; color: #94a3b8; white-space: nowrap;
}

/* expanded detail panel (vessel/voyage chips) */
.bbt-erow-panel {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 12px 8px 18px;
    background: rgba(42,110,187,.05);
    border-radius: 0 0 6px 6px;
    margin-bottom: 2px;
    animation: bbt-panel-slide .2s ease both;
}

/* container header animation on toggle */
.bbt-tl-ctr-header { animation: none; }
.bbt-tl-ctr-header.open { animation: bbt-header-pop .2s ease; }

/* chevron smooth rotation */
.bbt-tl-chevron { transition: transform .25s cubic-bezier(.4,0,.2,1); flex-shrink:0; }
.bbt-tl-chevron.open { transform: rotate(180deg); }

.bbt-error-icon { margin-bottom:12px; opacity:.85; }

/* ?? Horizontal milestone timeline ????????????????????????????????????????? */
@keyframes bbt-active-line {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes bbt-current-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.6); }
    65%  { box-shadow: 0 0 0 9px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* ??????????????????????????????????????????????????????????????????????
   BlueBox � Horizontal Port Stepper + Event Panel (View 2)
   ?????????????????????????????????????????????????????????????????????? */

/* ?? View 2 redesign: all-ports expanded timeline ?? */
.bbt-vtl2 {
    padding: 12px 16px 16px;
    position: relative;
    background: #fff;
    border: 1px solid #2A6EBB;
    border-top: none;
    border-radius: 0 0 12px 12px;
}
/* Gradient fade + scroll hint at bottom */
.bbt-vtl2--has-more::after {
    content: '?  scroll to see more ports';
    position: absolute;
    bottom: 0; left: 16px; right: 16px;
    height: 38px;
    background: linear-gradient(to bottom, transparent 0%, rgba(246,249,252,.97) 70%);
    display: flex; align-items: flex-end; justify-content: center;
    font-size: 8.5px; font-weight: 700; letter-spacing: .3px;
    color: #94a3b8; padding-bottom: 4px;
    pointer-events: none; z-index: 4;
}

/* Multi-row container � fixed height, vertical scroll only */
.bbt-vtl2-rows {
    display: flex; flex-direction: column; gap: 0;
    max-height: 540px;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
    scrollbar-color: #b0bbcc transparent;
}
.bbt-vtl2-rows::-webkit-scrollbar       { width: 5px; }
.bbt-vtl2-rows::-webkit-scrollbar-thumb { background: #b0bbcc; border-radius: 3px; }

.bbt-vtl2-track {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    padding: 6px 8px 12px;
}

/* Horizontal connector � fixed width so sparse rows don't stretch */
.bbt-vtl2-hconn {
    height: 2px;
    flex: 0 0 36px; min-width: 0;
    align-self: flex-start;
    margin-top: 19px;
    border-radius: 1px;
}
.bbt-vtl2-hconn.act  { background: #059669; }
.bbt-vtl2-hconn.plan {
    background: repeating-linear-gradient(to right, #CBD5E1 0, #CBD5E1 5px, transparent 5px, transparent 10px);
}

/* "More ports below" inline badge at end of track row */
.bbt-vtl2-more-hint {
    display: flex; flex-direction: column; align-items: center;
    gap: 0;
    position: absolute; right: 6px; top: 6px;
}
.bbt-vtl2-more-conn {
    width: 2px; height: 10px; border-radius: 1px; flex-shrink: 0;
}
.bbt-vtl2-more-conn.act  { background: #0EA5E9; }
.bbt-vtl2-more-conn.plan {
    background: repeating-linear-gradient(to right, #CBD5E1 0, #CBD5E1 4px, transparent 4px, transparent 8px);
}
.bbt-vtl2-more-badge {
    writing-mode: vertical-lr;
    display: inline-block;
    height: fit-content;
    background: #EFF6FF; border: 1.5px solid #BFDBFE;
    border-radius: 6px; padding: 3px 3px;
    font-size: 11px; font-weight: 700; color: #2563EB;
    white-space: nowrap; cursor: default;
    animation: bbt-cj-pulse 2.5s ease-in-out infinite;
    letter-spacing: 0px;
}

/* Row continuation bridge � full-width separator with label */
.bbt-vtl2-row-bridge {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px;
    font-size: 9px; font-weight: 700; letter-spacing: .3px;
}
.bbt-vtl2-row-bridge::before,
.bbt-vtl2-row-bridge::after {
    content: ''; flex: 1; height: 1px;
}
.bbt-vtl2-row-bridge.act  { color: #0EA5E9; }
.bbt-vtl2-row-bridge.act::before,
.bbt-vtl2-row-bridge.act::after  { background: #bae6fd; }
.bbt-vtl2-row-bridge.plan { color: #94a3b8; }
.bbt-vtl2-row-bridge.plan::before,
.bbt-vtl2-row-bridge.plan::after { background: #e2e8f0; }

/* Port column � fixed width matching the max-columns-per-row so all rows align */
.bbt-vtl2-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 var(--bbt-col-basis, 110px); min-width: 80px; max-width: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 5px 5px 8px;
    transition: background .15s, box-shadow .15s;
    position: relative;
    z-index: 1; /* above backbone ::before line */
}
/* Vertical separator line between port columns */
.bbt-vtl2-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -14px;
    top: 44px;
    bottom: 0;
    width: 1px;
    background: #94a3b8;
    border-radius: 1px;
    z-index: 0;
}

.bbt-vtl2-col:hover   { background: rgba(42,110,187,.05); z-index: 50; }
.bbt-vtl2-col.sel     { background: rgba(42,110,187,.09); box-shadow: 0 0 0 1.5px rgba(42,110,187,.35); }
.bbt-vtl2-col.current {
    border-radius: 10px;
    animation: bbt-cur-col-blink 2.4s ease-in-out infinite;
}
@keyframes bbt-cur-col-blink {
    0%,100% { background: transparent; box-shadow: none; }
    50%     { background: rgba(14,165,233,.15); box-shadow: 0 0 0 3px rgba(14,165,233,.6) inset, 0 0 22px rgba(14,165,233,.2); }
}
/* Vessel span labels above timeline rows */
.bbt-vtl2-vspans {
    display: flex; align-items: stretch; gap: 0;
    padding: 0 0 3px; min-height: 26px;
}
.bbt-vtl2-vspan {
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
    padding: 0; border-radius: 6px 6px 0 0; min-width: 0;
    overflow: visible; position: relative;
    border-top: 2px solid; border-left: 1px solid; border-right: 1px solid;
    flex-shrink: 0;
}
.bbt-vspan-label {
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap; padding: 4px 8px;
}
.bbt-vspan-label svg { width: 11px; height: 11px; flex-shrink: 0; }
.bbt-vtl2-vspan.done   { color:#fff; border-color:#0f766e; background:#0f766e; }
.bbt-vtl2-vspan.active { color:#fff; border-color:#1d4ed8; background:#1d4ed8; }
.bbt-vtl2-vspan.plan   { color:#fff; border-color:#475569; background:#475569; }

/* Port dot */
.bbt-vtl2-dot {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: box-shadow .2s;
    box-shadow: 0 0 0 3px #fff;
    position: relative; z-index: 2;
}
.bbt-vtl2-dot.act     { background: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.15); }
.bbt-vtl2-dot.plan    { background: #fff; border: 2px solid #CBD5E1; }
.bbt-vtl2-dot.current {
    background: #0EA5E9;
    box-shadow: 0 0 0 4px rgba(14,165,233,.25), 0 0 0 8px rgba(14,165,233,.1);
    animation: bbt-cj-pulse 1.8s ease-in-out infinite;
}
.bbt-vtl2-col:hover .bbt-vtl2-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(42,110,187,.18); }
.bbt-vtl2-col.sel   .bbt-vtl2-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(42,110,187,.35); }

.bbt-vtl2-name {
    font-size: 12px; font-weight: 700; color: #1E3A5F;
    text-align: center; max-width: 120px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bbt-vtl2-code {
    font-size: 9px; font-weight: 700; font-family: monospace;
    color: #6B7280; letter-spacing: .3px; text-align: center;
}

.bbt-vtl2-cur {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 800; color: #fff;
    background: #0EA5E9; padding: 5px 13px; border-radius: 20px;
    margin-top: 7px; box-shadow: 0 2px 10px rgba(14,165,233,.55);
    animation: bbt-cur-badge-glow 2s ease-in-out infinite;
}
@keyframes bbt-cur-badge-glow {
    0%,100% { box-shadow: 0 2px 10px rgba(14,165,233,.55); }
    50%     { box-shadow: 0 2px 20px rgba(14,165,233,.9), 0 0 0 5px rgba(14,165,233,.2); }
}
.bbt-vtl2-cur-pulse {
    width: 7px; height: 7px; border-radius: 50%; background: #fff;
    animation: bbt-cj-pulse 1.4s ease-in-out infinite; flex-shrink: 0;
}

/* Planned port with no events placeholder */
.bbt-vtl2-no-events {
    display: flex; align-items: center; gap: 4px; flex-direction: column;
    padding: 8px 4px;
    font-size: 8.5px; font-weight: 500; color: #CBD5E1;
    text-align: center; line-height: 1.4;
}

/* Port header (dot + name + code) */
.bbt-vtl2-port {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding-bottom: 2px;
}

/* Down-connector from port dot to first event */
.bbt-vtl2-down {
    width: 2px; height: 14px; border-radius: 1px;
}
.bbt-vtl2-down.act     { background: #059669; }
.bbt-vtl2-down.current { background: #0EA5E9; }
.bbt-vtl2-down.plan    { background: #CBD5E1; }

/* Events list */
.bbt-vtl2-evlist {
    display: flex; flex-direction: column;
    width: 100%; padding: 0 2px;
}

/* Single event row � positioned anchor for the popup */
.bbt-vtl2-ev {
    display: flex; align-items: flex-start; gap: 5px;
    position: relative;
}

/* Left: icon + vertical line */
.bbt-vtl2-ev-left {
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0; width: 18px;
    padding-top: 1px;
}

/* Event icon circle */
.bbt-vtl2-ev-icon {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bbt-vtl2-ev-icon.act { background: #10B981; color: #fff; }
.bbt-vtl2-ev-icon.pln { background: #f1f5f9; color: #94a3b8; border: 1.5px solid #CBD5E1; }
.bbt-vtl2-ev-icon.est { background: #fffbeb; color: #f59e0b; border: 1.5px solid #F59E0B; }

/* Vertical line connecting dots */
.bbt-vtl2-ev-vline {
    width: 2px; flex: 1; min-height: 20px;
    border-radius: 1px; margin-top: 2px;
}
.bbt-vtl2-ev-vline.act { background: #10B981; }
.bbt-vtl2-ev-vline.pln {
    background: repeating-linear-gradient(to bottom, #CBD5E1 0, #CBD5E1 4px, transparent 4px, transparent 8px);
}
.bbt-vtl2-ev-vline.est {
    background: repeating-linear-gradient(to bottom, #F59E0B 0, #F59E0B 4px, transparent 4px, transparent 8px);
}

/* Event info column (right side) */
.bbt-vtl2-ev-info {
    display: flex; flex-direction: column; gap: 1px;
    padding-bottom: 12px;
    min-width: 0; flex: 1;
}

.bbt-vtl2-ev-name {
    font-size: 11.5px; font-weight: 600; color: #1E3A5F;
    line-height: 1.35; word-break: break-word;
}

.bbt-vtl2-ev-dt {
    display: flex; flex-direction: column; gap: 2px;
}
.bbt-vtl2-ev-dt-row {
    display: flex; align-items: center; gap: 4px;
    font-size: 9.5px; font-weight: 600; color: #374151;
    white-space: nowrap;
}
.bbt-vtl2-ev-dt-row svg { color: #94a3b8; flex-shrink: 0; }

/* Detail popup � absolute so it floats above layout without causing overflow */
.bbt-vtl2-evdet {
    display: none;
    position: absolute;
    left: 22px; top: 0;
    z-index: 300;
    flex-direction: column; gap: 4px;
    min-width: 185px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 2.5px solid #0EA5E9;
    border-radius: 0 7px 7px 7px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    padding: 7px 9px;
}
.bbt-vtl2-ev-info:hover .bbt-vtl2-evdet { display: flex; }

/* Flip popup leftward for last 2 columns so it doesn't go off-screen */
.bbt-vtl2-col:last-child .bbt-vtl2-evdet,
.bbt-vtl2-col:nth-last-child(3) .bbt-vtl2-evdet {
    left: auto; right: 22px;
    border-radius: 7px 0 7px 7px;
}

.bbt-vtl2-evdet-row {
    display: flex; flex-direction: row; align-items: flex-start; gap: 6px;
}
.bbt-vtl2-evdet-ico {
    flex-shrink: 0; color: #0EA5E9; margin-top: 1px; line-height: 1;
}
.bbt-vtl2-evdet-cnt { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.bbt-vtl2-evdet-lbl {
    font-size: 8px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .4px;
}
.bbt-vtl2-evdet-val {
    font-size: 9.5px; font-weight: 600; color: #1E3A5F; word-break: break-word;
}

.bbt-vtl2-evdet-tsf {
    font-size: 8.5px; font-weight: 700; color: #7C3AED;
    background: #EDE9FE; padding: 1px 6px; border-radius: 4px;
    align-self: flex-start; margin-top: 2px;
}

.bbt-vtl {
    display: flex;
    flex-direction: column;
    padding: 12px 16px 16px;
    gap: 12px;
}

/* ?? Horizontal scrollable stepper ?? */
.bbt-vtl-hstep-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #d1dae6 transparent;
    padding-bottom: 4px;
}
.bbt-vtl-hstep-wrap::-webkit-scrollbar { height: 4px; }
.bbt-vtl-hstep-wrap::-webkit-scrollbar-thumb { background: #d1dae6; border-radius: 2px; }

.bbt-vtl-hstep {
    display: flex;
    align-items: flex-start;
    width: max-content;
    min-width: 100%;
    padding: 8px 4px 4px;
}

/* ?? Connector line between ports ?? */
.bbt-vtl-hconn {
    height: 2px;
    flex: 1;
    min-width: 24px;
    max-width: 56px;
    align-self: center;
    margin-bottom: 24px;
    border-radius: 1px;
}
.bbt-vtl-hconn.act  { background: #0EA5E9; }
.bbt-vtl-hconn.plan { background: #E2E8F0; }

/* ?? Port node ?? */
.bbt-vtl-hport {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 6px 10px 8px;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: background .15s, border-color .15s, transform .12s;
    min-width: 80px;
    max-width: 100px;
}
.bbt-vtl-hport:hover { background: rgba(42,110,187,.07); transform: translateY(-2px); }
.bbt-vtl-hport.sel  { background: rgba(42,110,187,.1); border-color: #2A6EBB; }

/* Port dot */
.bbt-vtl-hp-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    background: #fff;
    transition: transform .12s;
    flex-shrink: 0;
}

.bbt-vtl-hp-dot.act     { background: #0EA5E9; border-color: #0EA5E9; box-shadow: 0 2px 6px rgba(14,165,233,.35); }
.bbt-vtl-hp-dot.current { background: #10B981; border-color: #10B981; box-shadow: 0 0 0 4px rgba(16,185,129,.2); animation: bbt-current-pulse 2s ease-out infinite; }
.bbt-vtl-hp-dot.plan    { background: #fff; border-color: #CBD5E1; }

.bbt-vtl-hport.sel .bbt-vtl-hp-dot { transform: scale(1.18); }

.bbt-vtl-hp-name {
    font-size: .76rem;
    font-weight: 600;
    color: #1E3A5F;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}
.bbt-vtl-hport.sel .bbt-vtl-hp-name { color: #2A6EBB; }

.bbt-vtl-hp-code {
    font-size: .66rem;
    background: rgba(42,110,187,.1);
    color: #2A6EBB;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.bbt-vtl-hp-cur {
    font-size: .62rem;
    font-weight: 700;
    background: #D1FAE5;
    color: #059669;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

/* ?? Event panel below stepper ?? */
.bbt-vtl-panel {
    background: rgba(42,110,187,.04);
    border: 1px solid rgba(42,110,187,.12);
    border-radius: 10px;
    overflow: visible; /* allow tooltip popups to overflow */
}

.bbt-vtl-panel-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(42,110,187,.08);
    border-bottom: 1px solid rgba(42,110,187,.1);
    border-radius: 10px 10px 0 0; /* clip header bg within panel corners */
    flex-wrap: wrap;
    color: #2A6EBB;
}

.bbt-vtl-panel-loc {
    font-size: .84rem;
    font-weight: 700;
    color: #1E3A5F;
}

.bbt-vtl-loc-code {
    font-size: .69rem;
    background: rgba(42,110,187,.1);
    color: #2A6EBB;
    padding: 2px 7px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.bbt-vtl-loc-count {
    font-size: .72rem;
    color: #6B7280;
    margin-left: auto;
}

/* ?? Activity rows inside panel ?? */
.bbt-vtl-act-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    gap: 12px;
    border-bottom: 1px solid rgba(42,110,187,.06);
    transition: background .12s;
    position: relative;
    overflow: visible;
}
.bbt-vtl-act-row:last-child { border-bottom: none; }
.bbt-vtl-act-row:hover { background: rgba(42,110,187,.07); }

/* ?? Event detail tooltip (on hover) ?? */
.bbt-vtl-tip {
    display: none;
    position: absolute;
    z-index: 500;
    left: 0; top: calc(100% + 5px);
    min-width: 230px; max-width: 310px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
    pointer-events: none;
    flex-direction: column;
    gap: 5px;
}
.bbt-vtl-act-row:hover .bbt-vtl-tip { display: flex; }

.bbt-vtl-tip-hdr {
    font-size: .75rem; font-weight: 700; color: #1E3A5F;
    padding-bottom: 5px; margin-bottom: 3px;
    border-bottom: 1px solid #e2e8f0;
}

.bbt-vtl-tip-row { display: flex; align-items: baseline; gap: 6px; font-size: .71rem; }
.bbt-vtl-tip-lbl { color: #9CA3AF; font-weight: 600; min-width: 62px; flex-shrink: 0; }
.bbt-vtl-tip-val { color: #374151; font-weight: 500; word-break: break-word; }

.bbt-vtl-tip-tsf {
    margin-top: 4px; font-size: .67rem; font-weight: 700;
    color: #D97706; background: #FEF3C7; padding: 2px 8px;
    border-radius: 20px; text-align: center; align-self: flex-start;
}

/* ?? Port dot hover tooltip ?? */
.bbt-vtl-hport { position: relative; }
.bbt-vtl-hp-tip {
    display: none;
    position: absolute;
    z-index: 500;
    left: 50%; transform: translateX(-50%);
    bottom: calc(100% + 8px);
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 9px 13px;
    box-shadow: 0 6px 20px rgba(0,0,0,.13);
    pointer-events: none;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
}
.bbt-vtl-hport:hover .bbt-vtl-hp-tip { display: flex; }

.bbt-vtl-act-name {
    font-size: .82rem;
    font-weight: 600;
    color: #1E3A5F;
    flex: 1;
    min-width: 0;
}
.bbt-vtl-act-row.pln .bbt-vtl-act-name,
.bbt-vtl-act-row.est .bbt-vtl-act-name { color: #94a3b8; font-weight: 500; }

.bbt-vtl-act-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.bbt-vtl-act-date {
    font-size: .8rem;
    font-weight: 700;
    color: #1E3A5F;
}

.bbt-vtl-act-time {
    font-size: .76rem;
    color: #6B7280;
    min-width: 64px;
    text-align: right;
}

/* ??????????????????????????????????????????????????????????????????????
   BlueBox � Vessel Cards View (View 5)
   ?????????????????????????????????????????????????????????????????????? */

.bbt-vc-wrap {
    display: flex; flex-direction: column; gap: 10px;
    padding: 6px 4px 10px;
}

.bbt-vc {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
}
.bbt-vc.done       { border-left: 4px solid #10B981; }
.bbt-vc.inprogress { border-left: 4px solid #0EA5E9; }
.bbt-vc.sel        { box-shadow: 0 4px 18px rgba(14,165,233,.14); border-color: #0EA5E9; }

/* Card header */
.bbt-vc-hdr {
    display: flex; align-items: center;
    padding: 11px 14px;
    background: linear-gradient(to right, #1e3a5f, #1a4f8a);
    color: #fff; cursor: pointer; gap: 7px;
    user-select: none;
}
.bbt-vc.done .bbt-vc-hdr       { background: linear-gradient(to right, #064e3b, #065f46); }
.bbt-vc.inprogress .bbt-vc-hdr { background: linear-gradient(to right, #1e3a5f, #1a4f8a); }

.bbt-vc-hdr-left  { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; flex-wrap: wrap; }
.bbt-vc-hdr-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.bbt-vc-num {
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    background: rgba(255,255,255,.18); padding: 1px 7px; border-radius: 20px;
    white-space: nowrap;
}
.bbt-vc-vname {
    font-size: 13px; font-weight: 800; letter-spacing: .3px; white-space: nowrap;
}
.bbt-vc-voy {
    font-family: monospace; font-size: 10.5px; font-weight: 700;
    background: rgba(255,255,255,.15); padding: 1px 7px; border-radius: 5px;
    white-space: nowrap;
}
.bbt-vc-carrier {
    font-size: 10px; color: rgba(255,255,255,.75);
}
.bbt-vc-portbadge {
    font-size: 9.5px; font-weight: 700;
    background: rgba(255,255,255,.18); padding: 2px 8px; border-radius: 20px;
    white-space: nowrap;
}
.bbt-vc-statusbadge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 20px;
    white-space: nowrap;
}
.bbt-vc-statusbadge.done       { background: rgba(16,185,129,.25); color: #d1fae5; }
.bbt-vc-statusbadge.inprogress { background: rgba(255,255,255,.15); color: #fff; }

.bbt-vc-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff; display: inline-block;
    animation: bbt-cj-pulse 1.5s ease-in-out infinite;
}

.bbt-vc-chevron { color: rgba(255,255,255,.8); transition: transform .2s; }
.bbt-vc-chevron.open { transform: rotate(180deg); }

/* GET IN / GET OUT row */
.bbt-vc-io {
    display: flex; align-items: stretch; gap: 0;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.bbt-vc-io-col {
    display: flex; flex-direction: column; gap: 3px; flex: 1;
}
.bbt-vc-io-col.in  { padding-right: 12px; }
.bbt-vc-io-col.out { padding-left: 12px; }

.bbt-vc-io-arrow {
    display: flex; align-items: center; padding: 0 8px;
    color: #94a3b8;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

.bbt-vc-io-lbl {
    display: flex; align-items: center; gap: 4px;
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
    color: #6B7280;
}
.bbt-vc-io-col.in  .bbt-vc-io-lbl { color: #0EA5E9; }
.bbt-vc-io-col.out .bbt-vc-io-lbl { color: #10B981; }

.bbt-vc-io-port {
    font-size: 13px; font-weight: 700; color: #1E3A5F; line-height: 1.3;
}

.bbt-vc-io-code {
    font-family: monospace; font-size: 10px; font-weight: 700;
    color: #6B7280; letter-spacing: .5px;
}

.bbt-vc-io-date {
    font-size: 10.5px; font-weight: 600; color: #374151;
}

.bbt-vc-pending {
    font-size: 11px; font-style: italic; color: #9CA3AF;
}

/* Expanded port timeline inside vessel card */
.bbt-vc-portlist {
    padding: 8px 14px 12px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* ??????????????????????????????????????????????????????????????????????
   BlueBox � Voyage View (View 4)
   Port Stepper + Leg Cards
   ?????????????????????????????????????????????????????????????????????? */

.bbt-voyage {
    padding: 0 4px 8px;
}

/* ?? Port Stepper ??????????????????????????????????????????????????? */
.bbt-voy-stepper {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding: 14px 8px 6px;
    gap: 0;
    scrollbar-width: thin;
    scrollbar-color: #d1dae6 transparent;
}
.bbt-voy-stepper::-webkit-scrollbar { height: 4px; }
.bbt-voy-stepper::-webkit-scrollbar-thumb { background: #d1dae6; border-radius: 2px; }

.bbt-voy-sp-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.bbt-voy-sp-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 3px solid #cbd5e1;
    background: #fff;
    transition: transform .15s;
}
.bbt-voy-sp-dot.done     { background: #10b981; border-color: #059669; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.bbt-voy-sp-dot.active   { background: #f59e0b; border-color: #d97706; box-shadow: 0 0 0 3px rgba(245,158,11,.2); animation: bbt-voy-pulse 1.6s ease-in-out infinite; }
.bbt-voy-sp-dot.plan     { background: #e2e8f0; border-color: #cbd5e1; }
.bbt-voy-sp-dot.upcoming { background: #fff; border-color: #cbd5e1; border-style: dashed; }

@keyframes bbt-voy-pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(245,158,11,.1); }
}

.bbt-voy-sp-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
    max-width: 72px;
    text-align: center;
}
.bbt-voy-sp-name {
    font-size: 11px; font-weight: 800;
    color: #1e3a5f; letter-spacing: .3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px;
}
.bbt-voy-sp-code {
    font-size: 8.5px; font-weight: 500; color: #6b7280;
    margin-top: 1px; letter-spacing: .4px;
}

/* Connecting segment between two ports */
.bbt-voy-sp-seg {
    flex: 1; min-width: 80px; max-width: 180px;
    height: 6px;
    border-radius: 3px;
    align-self: center;
    margin: 0 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px; /* align with dot center */
}
/* Full-width single segment (origin ? destination mode) */
.bbt-voy-sp-seg-full { flex: 1 !important; max-width: none !important; }
.bbt-voy-sp-summary  { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bbt-voy-sp-seg.done   { background: linear-gradient(to right, #059669, #10b981); }
.bbt-voy-sp-seg.active {
    background: linear-gradient(90deg, #10b981 0%, #f59e0b 60%, #10b981 100%);
    background-size: 200% 100%;
    animation: bbt-active-line 1.8s linear infinite;
}
.bbt-voy-sp-seg.plan   { background: #dde3ec; }

.bbt-voy-sp-vname {
    position: absolute;
    top: -18px;
    font-size: 9px; font-weight: 600;
    color: #2a6ebb;
    white-space: nowrap;
    display: flex; align-items: center; gap: 3px;
    background: var(--card-bg, #fff);
    padding: 1px 5px; border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}

/* ?? Current Status Banner (bbt-cst) ??????????????????????????????? */
.bbt-cst-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-radius: 8px; margin-bottom: 10px;
    border-left: 4px solid;
}
.bbt-cst-banner.transit   { background:#EFF6FF; border-color:#3B82F6; color:#1D4ED8; }
.bbt-cst-banner.arriving  { background:#ECFDF5; border-color:#10B981; color:#065F46; }
.bbt-cst-banner.transship { background:#FFFBEB; border-color:#F59E0B; color:#92400E; }
.bbt-cst-banner.loaded    { background:#F5F3FF; border-color:#8B5CF6; color:#5B21B6; }
.bbt-cst-banner.departed  { background:#FFF7ED; border-color:#F97316; color:#C2410C; }
.bbt-cst-banner.customs   { background:#F0FDFA; border-color:#14B8A6; color:#0F766E; }
.bbt-cst-banner.unknown   { background:#F9FAFB; border-color:#D1D5DB; color:#6B7280; }
.bbt-cst-led {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: currentColor; animation: bbt-cj-pulse 2s ease-in-out infinite;
}
.bbt-cst-body  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bbt-cst-title { font-size: 12.5px; font-weight: 800; }
.bbt-cst-loc   { font-size: 10.5px; font-weight: 500; opacity: .75; }
.bbt-cst-dt    { font-size: 10px; font-weight: 600; white-space: nowrap; opacity: .7; }

/* ?? Full Port Stepper (bbt-fsp) ??????????????????????????????????? */
.bbt-fsp-wrap {
    overflow-x: auto; padding: 4px 0 8px;
    scrollbar-width: thin; scrollbar-color: #d1dae6 transparent;
}
.bbt-fsp-wrap::-webkit-scrollbar { height: 4px; }
.bbt-fsp-wrap::-webkit-scrollbar-thumb { background: #d1dae6; border-radius: 2px; }
.bbt-fsp { display: grid; width: 100%; }
.bbt-fsp-vlbl {
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
    padding: 0; border-radius: 6px 6px 0 0;
    border-top: 2px solid; border-left: 1px solid; border-right: 1px solid;
    overflow: hidden; position: relative; align-self: end; margin-bottom: 2px; min-height: 26px;
}
.bbt-fsp-vlbl.done   { color:#fff; border-color:#0f766e; background:#0f766e; }
.bbt-fsp-vlbl.active { color:#fff; border-color:#1d4ed8; background:#1d4ed8; }
.bbt-fsp-vlbl.plan   { color:#fff; border-color:#475569; background:#475569; }
.bbt-fsp-conn {
    height: 4px; border-radius: 2px; align-self: start; margin-top: 7px;
}
.bbt-fsp-conn.done   { background:linear-gradient(to right,#059669,#10b981); }
.bbt-fsp-conn.active {
    background:linear-gradient(90deg,#10b981 0%,#f59e0b 60%,#10b981 100%);
    background-size:200% 100%; animation:bbt-active-line 1.8s linear infinite;
}
.bbt-fsp-conn.plan   { background:#e2e8f0; }
.bbt-fsp-node {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 0 6px; align-self: start;
}
.bbt-fsp-dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2.5px solid; flex-shrink: 0; position: relative;
    transition: transform .15s;
}
.bbt-fsp-dot.done     { background:#10b981; border-color:#059669; box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.bbt-fsp-dot.active   { background:#f59e0b; border-color:#d97706; box-shadow:0 0 0 3px rgba(245,158,11,.2); animation:bbt-voy-pulse 1.6s ease-in-out infinite; }
.bbt-fsp-dot.plan     { background:#e2e8f0; border-color:#cbd5e1; }
.bbt-fsp-dot.upcoming { background:#fff; border-color:#cbd5e1; border-style:dashed; }
.bbt-fsp-dot.current  {
    background:#0EA5E9; border-color:#0284c7;
    box-shadow:0 0 0 5px rgba(14,165,233,.25);
    animation:bbt-fsp-cpulse 1.8s ease-in-out infinite;
}
@keyframes bbt-fsp-cpulse {
    0%,100% { box-shadow:0 0 0 5px rgba(14,165,233,.25); }
    50%     { box-shadow:0 0 0 10px rgba(14,165,233,0); }
}
.bbt-fsp-r1, .bbt-fsp-r2 {
    position:absolute; inset:-7px; border-radius:50%;
    border:2px solid #0EA5E9; animation:bbt-fsp-ripple 2.2s ease-out infinite;
    pointer-events:none;
}
.bbt-fsp-r2 { inset:-13px; border-color:rgba(14,165,233,.35); animation-delay:.7s; }
@keyframes bbt-fsp-ripple {
    0%   { opacity:1; transform:scale(.6); }
    100% { opacity:0; transform:scale(1.5); }
}
.bbt-fsp-pname {
    font-size:11px; font-weight:700; color:#1e3a5f;
    white-space:nowrap; min-width:0; width:100%; overflow:hidden; text-overflow:ellipsis;
    text-align:center; margin-top:4px;
}
.bbt-fsp-pcode { font-size:8.5px; font-weight:500; color:#94a3b8; letter-spacing:.5px; text-align:center; }
.bbt-fsp-node.current .bbt-fsp-pname { color:#0284c7; font-weight:800; }
.bbt-fsp-cur {
    display:inline-flex; align-items:center; gap:4px;
    font-size:9px; font-weight:800; color:#fff;
    background:#0EA5E9; padding:2px 8px; border-radius:20px;
    white-space:nowrap; box-shadow:0 2px 6px rgba(14,165,233,.45); margin-top:3px;
}
.bbt-fsp-cpulse {
    width:6px; height:6px; border-radius:50%; background:#fff;
    animation:bbt-cj-pulse 1.5s ease-in-out infinite; flex-shrink:0;
}

/* ?? Animated Ship on Active Connector ????????????????????????????? */
.bbt-active-conn { position:relative !important; overflow:visible !important; }

/* Timeline active connector � wavy sea line (same as voyage) */
.bbt-vtl2-hconn.bbt-active-conn {
    height: 5px !important; border-radius: 2px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='5'%3E%3Cpath d='M0 2.5 Q10 0.5 20 2.5 Q30 4.5 40 2.5' fill='none' stroke='%230EA5E9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 center / 40px 5px !important;
    box-shadow: none !important;
    animation: bbt-sea-route 1.5s linear infinite !important;
}
.bbt-fsp-conn.bbt-active-conn {
    height: 7px !important; border-radius: 4px !important;
    background: linear-gradient(90deg, #1d4ed8, #0EA5E9 55%, rgba(14,165,233,.35)) !important;
    box-shadow: 0 0 12px rgba(14,165,233,.45);
}

/* Ship (voyage view only � timeline connectors are too narrow for ship icon) */
.bbt-ship-sail {
    position: absolute; left: 2px;
    pointer-events: none; z-index: 30;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)) drop-shadow(0 1px 3px rgba(0,0,0,.25));
}

/* Timeline: ship sail hidden � name shown via vessel span bar instead */
.bbt-vtl2-hconn .bbt-ship-sail { display: none !important; }

/* Hide the old moving dot on active connector */
.bbt-vtl2-hconn.bbt-active-conn::after { display: none !important; }

/* Voyage ship: large, properly visible on wide connectors */
.bbt-fsp-conn .bbt-ship-sail {
    top: -30px;
    animation: bbt-ship-voy-x 4.5s ease-in-out infinite;
}
.bbt-fsp-conn .bbt-ship-sail svg { width: 54px !important; height: 34px !important; }

@keyframes bbt-ship-voy-x {
    0%   { left: 2px;               opacity: 0;  transform: translateY(0); }
    7%   { opacity: 1; }
    45%  { transform: translateY(-4px); }
    55%  { transform: translateY(0); }
    88%  { opacity: 1; }
    94%  { left: calc(100% - 57px); opacity: 0;  transform: translateY(0); }
    100% { left: 2px;               opacity: 0;  transform: translateY(0); }
}

/* ?? Voyage View: Ocean Sea Background ????????????????????????????? */
.bbt-voyage .bbt-fsp-wrap {
    padding: 4px 0 8px;
    border-radius: 14px;
    border: 1px solid rgba(14,165,233,.18);
    background:
        /* Diagonal wave-stripe texture */
        repeating-linear-gradient(
            -52deg,
            transparent 0,
            transparent 22px,
            rgba(14,165,233,.032) 22px,
            rgba(14,165,233,.032) 23px
        ),
        /* Secondary softer stripe at opposite angle */
        repeating-linear-gradient(
            52deg,
            transparent 0,
            transparent 38px,
            rgba(56,189,248,.018) 38px,
            rgba(56,189,248,.018) 39px
        ),
        /* Ocean depth gradient */
        linear-gradient(175deg,
            #e0f2fe 0%,
            #bae6fd 40%,
            #cde8f9 70%,
            #e0f2fe 100%);
    box-shadow: inset 0 3px 10px rgba(14,165,233,.07), 0 2px 6px rgba(0,0,0,.05);
    scrollbar-color: #93c5fd transparent;
}
/* Wavy sea route � thin, centered in the voyage strip */
.bbt-voyage .bbt-fsp-conn.active,
.bbt-voyage .bbt-fsp-conn.bbt-active-conn {
    height: 5px !important;
    border-radius: 2px !important;
    margin-top: 0 !important;
    align-self: center !important;
    position: relative !important;
    overflow: visible !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='5'%3E%3Cpath d='M0 2.5 Q10 0.5 20 2.5 Q30 4.5 40 2.5' fill='none' stroke='%230EA5E9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 center / 40px 5px !important;
    box-shadow: none !important;
    animation: bbt-sea-route 1.5s linear infinite !important;
}
/* Compact port nodes � smaller dot, no code, reduced fonts for thin strip */
.bbt-voyage .bbt-fsp-node  { align-self: center !important; gap: 1px !important; }
.bbt-voyage .bbt-fsp-dot   { width: 12px !important; height: 12px !important; }
.bbt-voyage .bbt-fsp-r1    { inset: -4px !important; }
.bbt-voyage .bbt-fsp-r2    { inset: -8px !important; }
.bbt-voyage .bbt-fsp-pname { font-size: 10px !important; margin-top: 0 !important; }
.bbt-voyage .bbt-fsp-pcode { display: none !important; }
.bbt-voyage .bbt-fsp-cur   { font-size: 8px !important; padding: 1px 6px !important; margin-top: 1px !important; }
/* Plain done/plan connectors: also center */
.bbt-voyage .bbt-fsp-conn  { align-self: center !important; margin-top: 0 !important; }
@keyframes bbt-sea-route {
    from { background-position: 0 center; }
    to   { background-position: 40px center; }
}
/* Ship SVG — flat icon, bow faces right, floats on ocean strip. Flex column so the
   vessel-name badge sits right under the ship and travels together with it. */
.bbt-fsp-ship-svg {
    position: absolute;
    top: -16px;
    left: 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    pointer-events: none;
    z-index: 30;
    animation: bbt-fsp-ship-x 2.6s ease-in-out infinite;
}
.bbt-fsp-ship-name {
    font-size: 9px; font-weight: 700; letter-spacing: .2px;
    color: #1e3a5f; background: rgba(255,255,255,.92);
    padding: 1px 8px; border-radius: 10px;
    border: 1px solid rgba(14,165,233,.3);
    white-space: nowrap; box-shadow: 0 1px 4px rgba(14,165,233,.18);
}
/* Starts right at the origin port, sails to just short of the destination port
   (never overlapping its dot), then briefly fades before looping back. */
@keyframes bbt-fsp-ship-x {
    0%   { left: 0;                  opacity: 1; }
    90%  { left: calc(100% - 70px);  opacity: 1; }
    96%  { opacity: 0; }
    100% { left: 0;                  opacity: 0; }
}
/* Ocean background stripe drift animation */
@keyframes bbt-ocean-wave {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 92px 0, -156px 0, 0 0; }
}
.bbt-voyage .bbt-fsp-wrap { animation: bbt-ocean-wave 12s linear infinite; }
/* Port loading / discharge crane icon */
.bbt-fsp-port-ico { display: flex; justify-content: center; margin-top: 3px; }
/* Vessel label bar: hide in voyage view (shown as overlay on connector instead) */
.bbt-voyage .bbt-fsp-vlbl { display: none !important; }
/* Vessel name badge overlaid on the active wave connector */
.bbt-fsp-conn-vessel {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: -20px;
    white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    color: #1e3a5f;
    background: rgba(255,255,255,.88);
    padding: 2px 10px 2px 7px;
    border-radius: 20px;
    border: 1px solid rgba(14,165,233,.35);
    box-shadow: 0 1px 6px rgba(14,165,233,.18);
    display: flex; align-items: center; gap: 5px;
    pointer-events: none; z-index: 25;
}
.bbt-fsp-conn-vessel svg { flex-shrink: 0; opacity: .75; }

/* ?? Leg Cards Grid ????????????????????????????????????????????????? */
.bbt-voy-legs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    padding: 0 4px 4px;
}

.bbt-voy-leg-card {
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: var(--card-bg, #fff);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: box-shadow .2s, transform .2s;
}
.bbt-voy-leg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-1px); }
.bbt-voy-leg-card.done   { border-left: 3px solid #10b981; }
.bbt-voy-leg-card.active { border-left: 3px solid #f59e0b; box-shadow: 0 2px 12px rgba(245,158,11,.15); }
.bbt-voy-leg-card.plan   { border-left: 3px solid #cbd5e1; opacity: .85; }

.bbt-voy-lc-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.bbt-voy-lc-num {
    font-size: 10px; font-weight: 800;
    color: #64748b; text-transform: uppercase; letter-spacing: .6px;
}

.bbt-voy-lc-route {
    font-size: 13px; font-weight: 700; color: #1e3a5f;
    display: flex; align-items: center; gap: 4px; flex: 1;
}

.bbt-voy-lc-badge {
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 20px;
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.bbt-voy-lc-badge.done   { background: #d1fae5; color: #065f46; }
.bbt-voy-lc-badge.active { background: #fef3c7; color: #92400e; }
.bbt-voy-lc-badge.plan   { background: #f1f5f9; color: #64748b; }

.bbt-voy-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: #f59e0b; display: inline-block;
    animation: bbt-voy-pulse-dot 1.2s ease-in-out infinite;
}
@keyframes bbt-voy-pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .5; transform: scale(.6); }
}

.bbt-voy-lc-body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bbt-voy-lc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,.04);
    font-size: 12px;
}
.bbt-voy-lc-row:last-child { border-bottom: none; }
.bbt-voy-lc-row.bbt-voy-missing .bbt-voy-lc-v { color: #cbd5e1; }

.bbt-voy-lc-k {
    color: #6b7280; font-size: 11px; flex-shrink: 0; margin-right: 8px;
}
.bbt-voy-lc-v {
    color: #1e3a5f; font-weight: 600; font-size: 11.5px;
    text-align: right;
}
.bbt-voy-vessel { color: #2a6ebb; }
.bbt-voy-act { color: #059669; font-weight: 700; }
.bbt-voy-est { color: #d97706; font-weight: 600; }

.bbt-voy-lc-section-lbl {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: #94a3b8; padding: 2px 0 1px; margin-top: 2px;
}

.bbt-sched-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 12px;
    white-space: nowrap;
}
.bbt-sched-late  { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.bbt-sched-early { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.bbt-sched-est   { font-weight: 400; opacity: .8; }

.bbt-voy-lc-divider {
    height: 1px; background: #e2e8f0; margin: 4px 0;
}

.bbt-voy-empty {
    padding: 24px; text-align: center;
    font-size: 13px; color: #94a3b8;
}

/* ??????????????????????????????????????????????????????????????????????
   BlueBox � Vessel Group Cards (inside Voyage view)
   ?????????????????????????????????????????????????????????????????????? */

.bbt-vgc-wrap {
    display: flex; flex-direction: column; gap: 10px;
    padding: 4px 0 8px;
}
.bbt-vgc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 10px;
}

/* Vessel card: inherits bbt-voy-leg-card, overrides for parent look */
.bbt-voy-leg-card.bbt-vgc {
    cursor: pointer; user-select: none;
    box-shadow: 0 4px 18px rgba(0,0,0,.11);
    overflow: hidden;
}
.bbt-voy-leg-card.bbt-vgc.done   { border-left: 6px solid #10B981; border-right: 3px solid rgba(16,185,129,.35); }
.bbt-voy-leg-card.bbt-vgc.active { border-left: 6px solid #f59e0b; border-right: 3px solid rgba(245,158,11,.35); box-shadow: 0 4px 18px rgba(245,158,11,.18); }
.bbt-voy-leg-card.bbt-vgc.plan   { border-left: 6px solid #cbd5e1; border-right: 3px solid #e2e8f0; opacity: 1; }
.bbt-voy-leg-card.bbt-vgc:hover  { box-shadow: 0 8px 24px rgba(0,0,0,.14); transform: translateY(-2px); }
.bbt-voy-leg-card.bbt-vgc.open           { border-radius: 10px; }
.bbt-voy-leg-card.bbt-vgc.open.done     { box-shadow: 0 0 0 2px #10b981, 0 6px 22px rgba(16,185,129,.22); }
.bbt-voy-leg-card.bbt-vgc.open.active   { box-shadow: 0 0 0 2px #f59e0b, 0 6px 22px rgba(245,158,11,.22); }
.bbt-voy-leg-card.bbt-vgc.open.plan     { box-shadow: 0 0 0 2px #94a3b8, 0 4px 14px rgba(0,0,0,.1); }

/* Parent card header � tinted gradient to clearly distinguish from child */
.bbt-voy-leg-card.bbt-vgc.plan   > .bbt-voy-lc-hdr { background: linear-gradient(145deg, #f8fafc 0%, #eef2f7 100%); border-radius: 9px 9px 0 0; }
.bbt-voy-leg-card.bbt-vgc.done   > .bbt-voy-lc-hdr { background: linear-gradient(145deg, #f0fdf9 0%, #d1fae5 100%); border-radius: 9px 9px 0 0; }
.bbt-voy-leg-card.bbt-vgc.active > .bbt-voy-lc-hdr { background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%); border-radius: 9px 9px 0 0; }

/* 2-row compact header for vessel parent card */
.bbt-vgc-hdr {
    flex-direction: column !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}
.bbt-vgc-hdr-top {
    display: flex; align-items: center; gap: 6px; min-width: 0;
}
.bbt-vgc-hdr-btm {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.bbt-vgc-vname {
    font-size: 13.5px; font-weight: 700; color: #1e3a5f;
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ship icon label pill */
.bbt-vgc-num {
    display: inline-flex; align-items: center; gap: 4px;
    background: #f1f5f9; padding: 2px 7px; border-radius: 20px;
    color: #4b5563; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
    white-space: nowrap; flex-shrink: 0;
}

/* Voyage number pill */
.bbt-vgc-voy {
    font-family: monospace; font-size: 11px; font-weight: 700; color: #0EA5E9;
    background: #E0F2FE; padding: 2px 8px; border-radius: 5px; white-space: nowrap;
}

/* Leg count pill */
.bbt-vgc-legbadge {
    font-size: 10.5px; font-weight: 700; color: #374151;
    background: #f1f5f9; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}

/* Push status badge to the far right in vessel header */
.bbt-vgc-badge { margin-left: auto; }

/* Compact body override for vessel card */
.bbt-vgc-body { padding: 10px 14px !important; }

/* Port + date row inside vessel card */
.bbt-vgc-pp-row {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 8px;
}
.bbt-vgc-pp-main {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.bbt-vgc-pp-val {
    font-size: 12px; font-weight: 600; color: #374151;
    line-height: 1.3; word-break: break-word;
}
.bbt-vgc-pp-date {
    font-size: 9px; font-weight: 500; color: #9ca3af;
}
.bbt-vgc-pp-lbl {
    font-size: 7.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .4px; color: #9ca3af;
    white-space: nowrap; text-align: right; align-self: center; flex-shrink: 0;
}

/* "? View X legs" expand hint */
.bbt-vgc-expand-bar {
    display: flex; align-items: center; justify-content: center;
    padding: 6px 14px;
    font-size: 10.5px; font-weight: 700; color: #0EA5E9;
    background: #f8fafc; letter-spacing: .2px;
    transition: background .15s;
}
.bbt-voy-leg-card.bbt-vgc:hover .bbt-vgc-expand-bar { background: #EFF6FF; }

/* ?? Port journey inside inner leg cards (anchor icon ? ship ? flag) ?? */
.bbt-lc-port-journey { display: flex; flex-direction: column; margin-bottom: 4px; }
.bbt-lc-pj-row { display: flex; align-items: center; gap: 8px; }
.bbt-lc-pj-icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bbt-lc-pj-icon.pol { background: #dbeafe; color: #2563eb; }
.bbt-lc-pj-icon.pod { background: #d1fae5; color: #059669; }
.bbt-lc-pj-info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.bbt-lc-pj-lbl {
    font-size: 7.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .4px; color: #9ca3af;
}
.bbt-lc-pj-name {
    font-size: 12px; font-weight: 600; color: #374151;
    line-height: 1.3; word-break: break-word;
}
.bbt-lc-pj-connector {
    display: flex; align-items: center; gap: 4px;
    padding: 3px 0 3px 13px; color: #94a3b8;
}
.bbt-lc-pj-vline { flex: 1; height: 1.5px; background: #e2e8f0; }

/* Full-width legs panel (appears below the card grid) */
.bbt-vgc-legs-panel {
    padding: 12px 0 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
.bbt-vgc-legs-panel .bbt-voy-legs-grid { padding: 0 10px; }

/* ?? Container header: right side with Map button + chevron ?? */
.bbt-tl-ctr-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.bbt-map-open-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    font-size: 11.5px; font-weight: 600;
    color: #2a6ebb; background: rgba(42,110,187,.08);
    border: 1px solid rgba(42,110,187,.25);
    cursor: pointer; transition: background .15s, box-shadow .15s;
    white-space: nowrap;
}
.bbt-map-open-btn:hover {
    background: rgba(42,110,187,.15);
    box-shadow: 0 2px 8px rgba(42,110,187,.15);
}

/* ?? Per-Container Map Modal ?? */
.bbt-map-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    animation: bbt-fade-in .18s ease;
    padding: 16px;
}
@keyframes bbt-fade-in { from { opacity:0 } to { opacity:1 } }

.bbt-map-modal-box {
    background: #fff; border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,.3);
    width: 100%; max-width: 860px;
    overflow: hidden;
    animation: bbt-modal-up .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bbt-modal-up { from { transform:translateY(24px);opacity:0 } to { transform:translateY(0);opacity:1 } }

.bbt-map-modal-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.bbt-map-modal-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: #1e3a5f;
}

.bbt-map-modal-cno {
    font-family: monospace; font-size: 13px; font-weight: 800;
    color: #2a6ebb; background: rgba(42,110,187,.1);
    padding: 2px 8px; border-radius: 5px;
}

.bbt-map-modal-meta {
    display: flex; align-items: center; gap: 10px;
}

.bbt-map-modal-geocoding {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: #6b7280;
}

.bbt-map-modal-close {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid #e2e8f0;
    color: #6b7280; cursor: pointer;
    transition: background .15s, color .15s;
}
.bbt-map-modal-close:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

.bbt-map-modal-map {
    height: 480px;
    width: 100%;
}


/* ??????????????????????????????????????????????????????
   JOURNEY BANNER
?????????????????????????????????????????????????????? */
.bbt-jb { background:linear-gradient(135deg,#0f2035 0%,#1a3554 100%); border-radius:12px; padding:16px 20px; margin-bottom:14px; }
.bbt-jb-top { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.bbt-jb-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.6px; }
.bbt-jb-badge.transit { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.3); }
.bbt-jb-badge.delivered { background:rgba(5,150,105,.15); color:#10b981; border:1px solid rgba(5,150,105,.3); }
.bbt-jb-badge.pending { background:rgba(148,163,184,.1); color:#94a3b8; border:1px solid rgba(148,163,184,.2); }
.bbt-jb-pulse { width:7px; height:7px; border-radius:50%; background:#f59e0b; animation:bbt-pulse-dot 1.4s ease infinite; flex-shrink:0; }
@keyframes bbt-pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
.bbt-jb-meta { font-size:11px; color:#64748b; display:flex; gap:6px; flex-wrap:wrap; }
.bbt-jb-sep { color:#334155; }

.bbt-jb-route { display:flex; align-items:center; gap:10px; }
.bbt-jb-port-label { font-size:11px; font-weight:600; color:#94a3b8; white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.bbt-jb-port-label.dest { text-align:right; }
.bbt-jb-track-wrap { flex:1; display:flex; flex-direction:column; gap:4px; }
.bbt-jb-track { height:8px; background:#1e3a5f; border-radius:4px; position:relative; overflow:visible; }
.bbt-jb-fill { height:100%; background:linear-gradient(90deg,#059669,#10b981); border-radius:4px; position:relative; transition:width .6s ease; min-width:20px; }
.bbt-jb-ship { position:absolute; right:-10px; top:50%; transform:translateY(-50%); color:#f59e0b; cursor:default; }
.bbt-jb-ship svg { filter:drop-shadow(0 0 4px rgba(245,158,11,.6)); }
.bbt-jb-pct-label { font-size:10px; color:#475569; text-align:right; }

/* ?? View Toggle Buttons ?? */
.bbt-tl-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bbt-view-toggle { margin-left:auto; display:flex; gap:0; border:1px solid #d1d5db; border-radius:8px; overflow:hidden; }
.bbt-vt-btn {
    display:flex; align-items:center; gap:5px;
    padding:6px 12px; border:none; border-right:1px solid #d1d5db;
    background:#f8fafc; cursor:pointer; color:#64748b;
    font-size:12px; font-weight:500; font-family:inherit;
    transition:all .15s ease; white-space:nowrap;
}
.bbt-vt-btn:last-child { border-right:none; }
.bbt-vt-btn:hover { background:#e8f0fe; color:#1e40af; }
.bbt-vt-btn.active { background:#1e40af; color:#fff; }

/* ??????????????????????????????????????????????????????
   VIEW 1 � PROFESSIONAL PORT STEPPER
?????????????????????????????????????????????????????? */
.bbt-ps { padding:8px 0; }
.bbt-ps-group { display:grid; grid-template-columns:44px 1fr; gap:0; }

/* Spine */
.bbt-ps-spine { display:flex; flex-direction:column; align-items:center; padding-top:3px; }
.bbt-ps-node { width:20px; height:20px; border-radius:50%; flex-shrink:0; border:3px solid #94a3b8; background:#fff; z-index:1; transition:all .2s; }
.bbt-ps-node.completed { background:#059669; border-color:#059669; }
.bbt-ps-node.current { background:#fff; border-color:#f59e0b; border-width:3px; }
.bbt-ps-node.upcoming { background:#fff; border-color:#cbd5e1; }
.bbt-ps-node.pulse { animation:bbt-node-pulse 1.8s ease infinite; }
@keyframes bbt-node-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)} 50%{box-shadow:0 0 0 8px rgba(245,158,11,0)} }
.bbt-ps-line { flex:1; width:3px; margin:3px 0; min-height:16px; border-radius:2px; }
.bbt-ps-line.done { background:#059669; }
.bbt-ps-line.active { background:linear-gradient(to bottom,#059669,#cbd5e1); }
.bbt-ps-line.plan { background:#e2e8f0; }

/* Vessel segment between ports */
.bbt-ps-vessel-seg { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; color:#475569; font-size:9px; min-height:40px; }
.bbt-ps-vessel-seg.done { color:#059669; }
.bbt-ps-vessel-seg.active { color:#f59e0b; }
.bbt-ps-vn { font-weight:600; font-size:9px; text-align:center; line-height:1.2; }
.bbt-ps-vo { font-size:9px; color:#94a3b8; }

/* Port header */
.bbt-ps-content { padding:0 0 20px 6px; }
.bbt-ps-port-hdr { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.bbt-ps-port-info { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.bbt-ps-port-name { font-size:13px; font-weight:700; color:#0f172a; }
.bbt-ps-port-code { font-size:10px; background:#e0e7ff; color:#3730a3; padding:2px 6px; border-radius:4px; font-weight:600; }
.bbt-ps-port-fac  { font-size:10px; color:#94a3b8; }
.bbt-ps-port-status { font-size:10px; font-weight:600; white-space:nowrap; padding:2px 7px; border-radius:10px; flex-shrink:0; }
.bbt-ps-port-status.completed { background:#f0fdf4; color:#059669; }
.bbt-ps-port-status.current   { background:#fffbeb; color:#d97706; }
.bbt-ps-port-status.upcoming  { background:#f1f5f9; color:#94a3b8; }

/* Events under each port */
.bbt-ps-events { display:flex; flex-direction:column; gap:4px; border-left:2px solid #f1f5f9; padding-left:10px; margin-left:4px; }
.bbt-ps-ev { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:7px; background:#f8fafc; flex-wrap:wrap; }
.bbt-ps-ev.act { background:#f0fdf4; }
.bbt-ps-ev.plan { background:#f8fafc; opacity:.85; }
.bbt-ps-ev-dot { width:7px; height:7px; border-radius:50%; background:#cbd5e1; flex-shrink:0; }
.bbt-ps-ev-dot.act { background:#059669; }
.bbt-ps-ev-name { font-size:12px; font-weight:600; color:#1e293b; display:flex; align-items:center; gap:5px; flex-wrap:wrap; flex:1; }
.bbt-ps-ev.plan .bbt-ps-ev-name { color:#64748b; }
.bbt-ps-ev-vessel { font-size:10px; color:#475569; font-style:italic; white-space:nowrap; }
.bbt-ps-ev-dt { font-size:10px; color:#94a3b8; white-space:nowrap; margin-left:auto; }

/* ??????????????????????????????????????????????????????
   VIEW 2 � PORT-GROUPED VERTICAL
?????????????????????????????????????????????????????? */
.bbt-pv { padding:4px 0 8px; }
.bbt-pv-row { display:grid; grid-template-columns:160px 32px 1fr; gap:0 4px; }
.bbt-pv-port { padding:6px 8px 6px 0; text-align:right; }
.bbt-pv-port-name { font-size:12px; font-weight:600; color:#1e293b; line-height:1.3; }
.bbt-pv-port-code { font-size:10px; color:#64748b; margin-top:2px; }
.bbt-pv-port-fac  { font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:.4px; margin-top:1px; }

.bbt-pv-spine { display:flex; flex-direction:column; align-items:center; padding-top:10px; }
.bbt-pv-dot {
    width:14px; height:14px; border-radius:50%; border:2px solid #94a3b8;
    background:#fff; flex-shrink:0; z-index:1;
    transition:all .2s;
}
.bbt-pv-dot.act { background:#059669; border-color:#059669; }
.bbt-pv-vline { flex:1; width:2px; background:#e2e8f0; margin:2px 0; min-height:20px; }

.bbt-pv-events { padding:4px 0 12px 4px; display:flex; flex-direction:column; gap:6px; }
.bbt-pv-evt { padding:8px 10px; border-radius:8px; border-left:3px solid #e2e8f0; background:#f8fafc; }
.bbt-pv-evt.act { border-left-color:#059669; background:#f0fdf4; }
.bbt-pv-evt.plan { border-left-color:#94a3b8; }
.bbt-pv-evt-name { font-size:12px; font-weight:600; color:#1e293b; }
.bbt-pv-evt-dt   { font-size:11px; color:#475569; margin-top:2px; }
.bbt-pv-evt-vessel { font-size:11px; color:#64748b; margin-top:3px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.bbt-pv-tsf { font-size:9px; background:#fef3c7; color:#92400e; padding:1px 5px; border-radius:4px; font-weight:600; text-transform:uppercase; }
.bbt-pv-laden { font-size:9px; padding:1px 6px; border-radius:4px; font-weight:600; text-transform:uppercase; }
.bbt-pv-laden.laden { background:#dbeafe; color:#1d4ed8; }
.bbt-pv-laden.empty { background:#f3f4f6; color:#6b7280; }
.bbt-pv-mode { font-size:9px; background:#e0e7ff; color:#3730a3; padding:1px 5px; border-radius:4px; margin-left:4px; }

/* ??????????????????????????????????????????????????????
   VIEW 3 � CARD LIST (2-column grid)
?????????????????????????????????????????????????????? */
.bbt-cl { padding:8px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bbt-cl-card {
    border:1px solid #e2e8f0; border-radius:10px; padding:12px 14px;
    background:#f8fafc; transition:box-shadow .15s;
}
.bbt-cl-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); }
.bbt-cl-card.act { border-left:3px solid #059669; background:#f0fdf4; }
.bbt-cl-card.plan { border-left:3px solid #cbd5e1; }
.bbt-cl-card.current { border-left:3px solid #f59e0b; background:#fffbeb; box-shadow:0 0 0 2px rgba(245,158,11,.15); }

.bbt-cl-top { display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.bbt-cl-dot {
    width:10px; height:10px; border-radius:50%; flex-shrink:0;
    border:2px solid #cbd5e1; background:#fff;
}
.bbt-cl-dot.act { background:#059669; border-color:#059669; }
.bbt-cl-dot.cur { background:#f59e0b; border-color:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.2); }
.bbt-cl-evname { font-size:12px; font-weight:700; color:#0f172a; flex:1; }
.bbt-cl-cls { margin-left:auto; flex-shrink:0; }

.bbt-cl-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.bbt-cl-field { display:flex; flex-direction:column; gap:2px; }
.bbt-cl-lbl {
    font-size:10px; color:#94a3b8; font-weight:600; text-transform:uppercase;
    letter-spacing:.4px; display:flex; align-items:center; gap:3px;
}
.bbt-cl-val { font-size:11px; color:#334155; font-weight:500; }


?????????????????????????????????????????????????????? */

/* ??????????????????????????????????????????????????????
   AIR TRACKING PANEL  (AirTrackingPanel.razor)
?????????????????????????????????????????????????????? */

/* Loading */
.bbair-loading { display:flex; align-items:center; gap:12px; padding:40px; color:#64748b; font-size:14px; }
.bbair-spinner { width:22px; height:22px; border:3px solid #e2e8f0; border-top-color:#0EA5E9; border-radius:50%; animation:bbair-spin .8s linear infinite; }
@keyframes bbair-spin { to { transform:rotate(360deg); } }

/* Not subscribed */
.bbair-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 24px; text-align:center; }
.bbair-empty-icon { width:80px; height:80px; background:linear-gradient(135deg,#EFF6FF,#E0F2FE); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.bbair-empty-title { font-size:17px; font-weight:700; color:#1E3A5F; }
.bbair-empty-sub { font-size:13px; color:#64748b; max-width:340px; line-height:1.6; }
.bbair-subscribe-btn { display:inline-flex; align-items:center; gap:8px; background:#0EA5E9; color:#fff; border:none; border-radius:10px; padding:11px 22px; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s; }
.bbair-subscribe-btn:hover:not([disabled]) { background:#0284c7; }
.bbair-subscribe-btn[disabled] { opacity:.7; cursor:not-allowed; }
.bbair-btn-spinner { width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:bbair-spin .8s linear infinite; }
.bbair-error { font-size:12px; color:#ef4444; background:#fef2f2; padding:8px 14px; border-radius:8px; border:1px solid #fecaca; }

/* Awaiting */
.bbair-awaiting { display:flex; flex-direction:column; align-items:center; gap:14px; padding:48px 24px; text-align:center; }
.bbair-radar { position:relative; width:80px; height:80px; display:flex; align-items:center; justify-content:center; }
.bbair-radar-ring { position:absolute; border-radius:50%; border:1.5px solid #0EA5E9; animation:bbair-radar-pulse 2.4s ease-out infinite; }
.bbair-radar-ring.r1 { width:80px; height:80px; animation-delay:0s; }
.bbair-radar-ring.r2 { width:56px; height:56px; animation-delay:.4s; }
.bbair-radar-ring.r3 { width:32px; height:32px; animation-delay:.8s; }
@keyframes bbair-radar-pulse { 0%{opacity:.9;transform:scale(.7)} 100%{opacity:0;transform:scale(1)} }
.bbair-radar-center { background:#EFF6FF; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; z-index:1; }
.bbair-awaiting-title { font-size:16px; font-weight:700; color:#1E3A5F; }
.bbair-awaiting-sub { font-size:13px; color:#64748b; max-width:360px; line-height:1.6; }

/* Panel */
.bbair-panel { display:flex; flex-direction:column; gap:14px; }

/* Header */
.bbair-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
    background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:12px 16px; }
.bbair-header-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bbair-live-badge { display:inline-flex; align-items:center; gap:5px; background:#0EA5E9; color:#fff; font-size:11px; font-weight:800; letter-spacing:.8px; padding:3px 9px; border-radius:20px; }
/* Marks this card's data as air (vs ocean) at a glance */
.bbair-mode-badge { display:inline-flex; align-items:center; gap:4px; background:#EFF6FF; color:#0369a1; border:1px solid #bae6fd; font-size:10.5px; font-weight:800; letter-spacing:.5px; padding:2px 8px; border-radius:20px; }
.bbair-live-dot { width:7px; height:7px; background:#fff; border-radius:50%; animation:bbair-blink 1.2s ease-in-out infinite; }
@keyframes bbair-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.bbair-mawb { font-size:13px; color:#334155; }
.bbair-mawb strong { color:#1E3A5F; }
.bbair-hawb { font-size:12px; color:#64748b; background:#f1f5f9; padding:2px 8px; border-radius:6px; }
.bbair-header-right { display:flex; align-items:center; gap:10px; }
.bbair-updated { font-size:11px; color:#94a3b8; }

/* Status badges */
.bbair-status-badge { font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; }
.bbair-status-dlv   { background:#DCFCE7; color:#15803d; }
.bbair-status-arr   { background:#EFF6FF; color:#2563eb; }
.bbair-status-dep   { background:#FFF7ED; color:#c2410c; }
.bbair-status-man   { background:#F5F3FF; color:#7c3aed; }
.bbair-status-rcs   { background:#F0FDF4; color:#16a34a; }
.bbair-status-booked{ background:#F8FAFC; color:#64748b; }

/* Route banner */
.bbair-route { display:flex; align-items:center; background:linear-gradient(135deg,#EFF6FF,#E0F2FE); border-radius:12px; padding:16px 24px; gap:0; }
.bbair-airport { display:flex; flex-direction:column; align-items:center; gap:2px; }
.bbair-iata { font-size:28px; font-weight:900; letter-spacing:2px; color:#1E3A5F; line-height:1; }
.bbair-airport-label { font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.6px; }
.bbair-route-line { flex:1; display:flex; align-items:center; justify-content:center; position:relative; }
.bbair-plane-svg { width:36px; height:36px; color:#0EA5E9; animation:bbair-plane-rock 3s ease-in-out infinite; }
@keyframes bbair-plane-rock { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-6px) rotate(5deg)} }

/* Milestone strip */
.bbair-milestones { display:flex; align-items:center; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px 20px; overflow-x:auto; }
.bbair-ms-step { display:flex; flex-direction:column; align-items:center; gap:5px; }
.bbair-ms-dot { width:22px; height:22px; border-radius:50%; border:2px solid #e2e8f0; background:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.bbair-ms-label { font-size:10.5px; color:#94a3b8; font-weight:600; white-space:nowrap; }
.bbair-ms-step.done .bbair-ms-dot { background:#0EA5E9; border-color:#0EA5E9; color:#fff; }
.bbair-ms-step.done .bbair-ms-label { color:#0EA5E9; }
.bbair-ms-step.current .bbair-ms-dot { background:#1d4ed8; border-color:#1d4ed8; animation:bbair-ms-glow 1.8s ease-in-out infinite; }
.bbair-ms-step.current .bbair-ms-label { color:#1d4ed8; font-weight:800; }
@keyframes bbair-ms-glow { 0%,100%{box-shadow:0 0 0 0 rgba(29,78,216,.4)} 50%{box-shadow:0 0 0 6px rgba(29,78,216,.0)} }
.bbair-ms-conn { flex:1; height:2px; background:#e2e8f0; min-width:24px; margin:0 4px; margin-bottom:14px; }
.bbair-ms-conn.done { background:#0EA5E9; }

/* Stats row */
.bbair-stats { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 16px; background:#f8fafc; border-radius:10px; }
.bbair-stat { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:#475569; font-weight:600; }
.bbair-stat svg { color:#94a3b8; }
.bbair-stat-dlv { color:#15803d; }
.bbair-stat-dlv svg { color:#15803d; }

/* Flight legs */
.bbair-legs { display:flex; flex-direction:column; gap:10px; }

/* ?? Air Timeline Card ?? */
.bbair-timeline-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px 16px 8px; margin-top:12px; }

/* ?? Single Air Card ?? */
.bbair-card { background:#fff; border:1px solid #dde3ec; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); }
.bbair-card-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 18px 12px; border-bottom:1px solid #edf0f5; }
.bbair-card-header-left { display:flex; align-items:center; flex-wrap:wrap; gap:10px; row-gap:6px; }
/* Stays one solid unit — if there's no room it drops to its own line as a whole,
   instead of the view-toggle breaking off from the status badge next to it. */
.bbair-card-header-right { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; flex-shrink:0; }
.bbair-card-mawb { font-size:14px; color:var(--navy-dark,#0a1f44); }
.bbair-card-hawb { font-size:12px; color:var(--text-muted,#64748b); margin-left:8px; }

/* Stops timeline */
.bbair-stops-wrap { padding:18px 18px 10px; overflow-x:auto; border-bottom:1px solid #edf0f5; display:flex; flex-direction:column; gap:0; }
/* width:100% + flex-grow on each stop spreads them across the full row when there are
   few stops; min-width keeps each stop readable and overflow-x scrolls when there isn't
   room (many stops), instead of everything bunching up on the left. */
.bbair-stops-track { display:flex; align-items:flex-start; width:100%; gap:0; }
.bbair-stop {
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    flex:1 1 160px; min-width:150px; max-width:230px; box-sizing:border-box;
    background:#fff; border:1.5px solid #e5e9f0; border-radius:12px;
    padding:14px 10px 14px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
/* Row continuation connector */
.bbair-row-continues { display:flex; align-items:center; gap:8px; padding:6px 2px 10px; }
.bbair-continues-line { flex:1; height:1px; background:linear-gradient(90deg,#0EA5E9,#e2e8f0); }
.bbair-continues-label { font-size:11px; color:#94a3b8; font-weight:600; white-space:nowrap; }
.bbair-stop-dot { width:36px; height:36px; border-radius:50%; border:2px solid #cbd5e1; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bbair-stop-dot.done { background:#10B981; border-color:#10B981; color:#fff; }
.bbair-stop-dot.origin { border-color:#0EA5E9; background:#0EA5E9; color:#fff; }
.bbair-stop-dot.current { border:3px solid #0EA5E9; background:#EFF6FF; animation:bbair-pulse-dot 2s ease-in-out infinite; }
@keyframes bbair-pulse-dot { 0%,100%{box-shadow:0 0 0 4px rgba(14,165,233,.15)} 50%{box-shadow:0 0 0 9px rgba(14,165,233,.04)} }
/* Connector grows with extra space so stops spread edge-to-edge; floor keeps it visible
   when the row is packed and scrolls instead of shrinking to nothing. */
.bbair-stop-line { flex:1 1 30px; min-width:16px; height:2px; background:#e2e8f0; margin-top:32px; align-self:flex-start; border-radius:1px; }
.bbair-stop-line.done { background:#10B981; }
/* Current stop column */
.bbair-stop.is-current { background:linear-gradient(180deg,rgba(14,165,233,.08) 0%,rgba(14,165,233,.02) 100%); border-color:rgba(14,165,233,.35); box-shadow:0 2px 8px rgba(14,165,233,.12); }
/* Floated above the card border (not in the flex flow) so every stop's dot sits at the
   same height, whether or not it's the current one — keeps the connector lines level. */
.bbair-current-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:4px; background:#0EA5E9; color:#fff; font-size:10px; font-weight:800; letter-spacing:.5px; padding:3px 10px; border-radius:20px; box-shadow:0 2px 6px rgba(14,165,233,.35); white-space:nowrap; }
.bbair-current-badge-dot { width:5px; height:5px; background:#fff; border-radius:50%; animation:bbair-blink 1.2s ease-in-out infinite; }
.bbair-stop-iata { font-size:10px; color:#94a3b8; cursor:default; }
.bbair-stop-name { font-size:12px; font-weight:600; color:#0f172a; text-align:center; max-width:190px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; cursor:default; }
.bbair-stop-events { margin-top:10px; display:flex; flex-direction:column; gap:6px; width:100%; }
/* Event card */
.bbair-stop-ev { background:#fff; border:1px solid #e5e9f0; border-radius:9px; padding:9px 11px; width:100%; box-sizing:border-box; transition:border-color .15s,box-shadow .15s; cursor:default; }
.bbair-stop-ev:hover { border-color:#0EA5E9; box-shadow:0 0 0 3px rgba(14,165,233,.08); }
.bbair-stop-ev-label { display:flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:#334155; letter-spacing:.2px; margin-bottom:4px; }
.bbair-stop-ev-flight { display:inline-block; font-size:11px; font-weight:700; color:#0EA5E9; background:#EFF6FF; padding:2px 7px; border-radius:5px; margin-bottom:6px; }
/* Time rows */
.bbair-stop-ev-times { display:flex; flex-direction:column; gap:4px; border-top:1px solid #f1f5f9; padding-top:6px; margin-top:2px; }
.bbair-stop-ev-tr { display:flex; align-items:center; justify-content:space-between; gap:6px; }
/* Classifier badges */
.bbair-ev-badge { font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:4px; white-space:nowrap; flex-shrink:0; }
.bbair-ev-badge.planned   { background:#f1f5f9; color:#64748b; }
.bbair-ev-badge.estimated { background:#FFF7ED; color:#b45309; }
.bbair-ev-badge.actual    { background:#DCFCE7; color:#15803d; }
/* Time value */
.bbair-ev-time { font-size:11.5px; color:#475569; font-weight:500; text-align:right; white-space:nowrap; }
.bbair-ev-time.is-actual { color:#15803d; font-weight:700; }
.bbair-ev-time.is-empty  { color:#cbd5e1; }

/* View toggle */
.bbair-vtgl-label { font-size:11px; font-weight:600; color:#94a3b8; }
.bbair-view-toggle { display:flex; gap:2px; background:#f1f5f9; border-radius:7px; padding:2px; }
.bbair-vtgl { border:none; background:transparent; border-radius:5px; padding:5px 9px; cursor:pointer; color:#64748b; display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; transition:background .15s,color .15s; }
.bbair-vtgl:hover { background:#e2e8f0; color:#334155; }
.bbair-vtgl.active { background:#fff; color:#0EA5E9; box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* Stats */
.bbair-card-stats { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 18px; border-bottom:1px solid #f1f5f9; }
.bbair-stat-pill { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; border-radius:20px; padding:3px 10px; }

/* ?? Voyage (flight card) view ?? */
.bbair-voyage-wrap { padding:16px 18px; display:flex; flex-direction:column; gap:10px; border-bottom:1px solid #f1f5f9; }
/* Flight card */
.bbair-flight-card { border:1.5px solid #e2e8f0; border-radius:12px; overflow:hidden; transition:box-shadow .15s; }
.bbair-flight-card.done   { border-color:rgba(16,185,129,.35); }
.bbair-flight-card.active { border-color:rgba(14,165,233,.4); box-shadow:0 0 0 3px rgba(14,165,233,.06); }
/* Card header */
.bbair-fcard-hdr { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; cursor:pointer; background:#f8fafc; transition:background .15s; user-select:none; }
.bbair-fcard-hdr:hover { background:#f1f5f9; }
.bbair-fcard-hdr.expanded { background:linear-gradient(90deg,#EFF6FF,#F0F9FF); }
.bbair-fcard-hdr-left  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bbair-fcard-hdr-right { display:flex; align-items:center; gap:8px; }
.bbair-fcard-num   { font-size:10px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.5px; }
.bbair-fcard-badge { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:800; color:#0f172a; background:#fff; border:1.5px solid #e2e8f0; border-radius:7px; padding:3px 10px; }
.bbair-fcard-pcs   { font-size:11px; color:#64748b; background:#f1f5f9; padding:2px 7px; border-radius:5px; }
.bbair-fcard-status { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.bbair-fcard-status.done    { background:#DCFCE7; color:#15803d; }
.bbair-fcard-status.active  { background:#EFF6FF; color:#0369a1; }
.bbair-fcard-status.planned { background:#f1f5f9; color:#64748b; }
.bbair-fcard-chevron { color:#94a3b8; transition:transform .2s; }
.bbair-fcard-chevron.open { transform:rotate(180deg); }
/* Route row */
.bbair-fcard-route { display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid #f1f5f9; }
.bbair-fcard-port { display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.bbair-fcard-port.right { align-items:flex-end; text-align:right; }
.bbair-fcard-port-lbl  { font-size:9px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.6px; }
.bbair-fcard-port-name { font-size:12.5px; font-weight:600; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bbair-fcard-port-time { display:flex; align-items:center; gap:5px; font-size:12px; color:#475569; flex-wrap:wrap; }
.bbair-fcard-arrow { color:#0EA5E9; flex-shrink:0; padding:0 6px; }
/* Classifier badges */
.bbair-fclf { font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:4px; white-space:nowrap; }
.bbair-fclf.act { background:#DCFCE7; color:#15803d; }
.bbair-fclf.est { background:#FFF7ED; color:#b45309; }
.bbair-fclf.pln { background:#f1f5f9; color:#64748b; }
/* Expanded detail */
.bbair-fcard-detail { display:flex; border-top:1px solid #f1f5f9; background:#f8fafc; }
.bbair-fcard-detail-col { flex:1; padding:14px 16px; display:flex; flex-direction:column; gap:7px; }
.bbair-fcard-detail-div { width:1px; background:#f1f5f9; flex-shrink:0; }
.bbair-fcard-detail-hdr { font-size:9px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px; }
.bbair-fcard-detail-row { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12px; }
.bbair-fcard-dl { color:#94a3b8; font-weight:600; }
.bbair-fcard-dv { color:#475569; font-weight:500; white-space:nowrap; }
.bbair-fcard-dv.act { color:#15803d; font-weight:700; }
.bbair-fcard-dv.est { color:#b45309; font-weight:600; }

/* Legs */
.bbair-card-legs { padding:6px 0 4px; }
.bbair-card-leg { border-bottom:1px solid #f8fafc; }
.bbair-card-leg:last-child { border-bottom:none; }
.bbair-card-leg-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:10px 18px; }

/* Leg expanded detail */
.bbair-leg-detail { display:flex; align-items:flex-start; gap:10px; padding:12px 18px 14px; background:#f8fafc; border-top:1px solid #f1f5f9; }
.bbair-leg-port-box { flex:1; display:flex; flex-direction:column; gap:4px; }
.bbair-leg-port-iata { font-size:13px; font-weight:600; color:#0f172a; }
.bbair-leg-port-iata small { font-size:11px; font-weight:400; color:#94a3b8; }
.bbair-leg-port-times { margin-top:6px; display:flex; flex-direction:column; gap:4px; }
.bbair-leg-pt-row { display:flex; justify-content:space-between; font-size:12px; color:#475569; }
.bbair-leg-pt-lbl { color:#94a3b8; font-size:11px; min-width:70px; }
.bbair-leg-detail-arrow { display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:2px; color:#64748b; font-size:11px; font-weight:500; flex-shrink:0; }
.bbair-tl-item { display:flex; gap:12px; }
.bbair-tl-left { display:flex; flex-direction:column; align-items:center; width:20px; flex-shrink:0; }
.bbair-tl-dot { width:18px; height:18px; border-radius:50%; border:2px solid #cbd5e1; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bbair-tl-dot.done { background:#0EA5E9; border-color:#0EA5E9; color:#fff; }
.bbair-tl-dot.current { background:#fff; border-color:#0EA5E9; border-width:3px; box-shadow:0 0 0 3px rgba(14,165,233,0.15); }
.bbair-tl-line { width:2px; background:#e2e8f0; flex:1; min-height:12px; margin:3px 0; }
.bbair-tl-line.done { background:#0EA5E9; }
.bbair-tl-content { flex:1; padding-bottom:12px; }
.bbair-tl-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:4px 0; }
.bbair-tl-route { display:flex; align-items:center; gap:6px; }
.bbair-tl-iata { font-size:14px; font-weight:700; color:#0f172a; letter-spacing:0.5px; }
.bbair-tl-meta { display:flex; align-items:center; gap:8px; }
.bbair-tl-flight { display:flex; align-items:center; gap:4px; font-size:12px; color:#64748b; font-weight:500; }
.bbair-tl-times { margin-top:8px; padding:10px 12px; background:#f8fafc; border-radius:8px; border:1px solid #f1f5f9; }
.bbair-leg { background:#fff; border:1.5px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.bbair-leg.bbair-leg-done   { border-color:rgba(14,165,233,.3); }
.bbair-leg.bbair-leg-active { border-color:rgba(29,78,216,.4); box-shadow:0 0 0 3px rgba(29,78,216,.06); }
.bbair-leg.bbair-leg-cancelled { opacity:.6; }

.bbair-leg-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid #f1f5f9; }
.bbair-leg-clickable { cursor:pointer; user-select:none; }
.bbair-leg-clickable:hover { background:rgba(14,165,233,0.04); }
.bbair-leg-chevron { color:#94a3b8; transition:transform 0.2s ease; flex-shrink:0; }
.bbair-leg-chevron.open { transform:rotate(180deg); }
.bbair-leg-route { display:flex; align-items:center; gap:8px; }
.bbair-leg-iata { font-size:20px; font-weight:900; color:#1E3A5F; letter-spacing:1.5px; }
.bbair-leg-arrow { color:#94a3b8; flex-shrink:0; }
.bbair-leg-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bbair-flight-no { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; color:#334155; background:#F1F5F9; padding:4px 10px; border-radius:8px; }
.bbair-leg-status-badge { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px; }
.bbair-leg-done .bbair-leg-status-badge     { background:#EFF6FF; color:#0EA5E9; }
.bbair-leg-active .bbair-leg-status-badge   { background:#EEF2FF; color:#4f46e5; }
.bbair-leg-plan .bbair-leg-status-badge     { background:#F8FAFC; color:#64748b; }
.bbair-leg-cancelled .bbair-leg-status-badge{ background:#FEF2F2; color:#ef4444; }
.bbair-leg-pcs { font-size:11.5px; color:#64748b; background:#f8fafc; padding:3px 8px; border-radius:8px; }

/* Time table */
.bbair-leg-times { padding:12px 16px; display:flex; flex-direction:column; gap:6px; }
.bbair-leg-time-row { display:grid; grid-template-columns:110px 1fr 1fr 1fr; gap:8px; font-size:12px; }
.bbair-leg-time-row.header { color:#94a3b8; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid #f1f5f9; padding-bottom:5px; margin-bottom:2px; }
.bbair-leg-time-row.header span:first-child { color:transparent; }
.bbair-time-label { display:flex; align-items:center; gap:4px; color:#64748b; font-weight:600; }
.bbair-time-label svg { flex-shrink:0; }
.bbair-time-diff { color:#f59e0b; font-weight:600; }
.bbair-time-act  { color:#16a34a; font-weight:700; }
.bbair-leg-man { display:flex; align-items:center; gap:5px; margin-top:6px; padding-top:6px; border-top:1px solid #f1f5f9; font-size:11.5px; color:#7c3aed; font-weight:600; }

/* ?? Vertical bubble timeline ???????????????????????????????????????????? */
.bbair-vtl { padding:14px 20px 8px; display:flex; flex-direction:column; }

.bbair-vtl-row { display:flex; gap:0; align-items:flex-start; }

.bbair-vtl-left { display:flex; flex-direction:column; align-items:center; width:38px; flex-shrink:0; }

.bbair-vtl-dot {
    width:30px; height:30px; border-radius:50%;
    border:2px solid #cbd5e1; background:#fff;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; z-index:1;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.bbair-vtl-dot.done    { background:#10B981; border-color:#10B981; }
.bbair-vtl-dot.current { border:2.5px solid #0EA5E9; background:#EFF6FF; animation:bbair-pulse-dot 2s ease-in-out infinite; }

.bbair-vtl-spine { width:2px; flex:1; min-height:16px; background:#e2e8f0; margin:3px 0; border-radius:1px; }
.bbair-vtl-spine.done { background:#10B981; }

.bbair-vtl-body { flex:1; padding:0 0 20px 14px; min-width:0; }
.bbair-vtl-body.is-current {
    background:linear-gradient(135deg,rgba(14,165,233,.06),rgba(14,165,233,.02));
    border:1.5px solid rgba(14,165,233,.22);
    border-radius:12px;
    padding:10px 14px 14px;
    margin-bottom:20px;
}

.bbair-vtl-airport { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:2px 0 10px; }
.bbair-vtl-aname { font-size:14px; font-weight:700; color:var(--navy-dark,#0a1f44); }
.bbair-vtl-aiata { font-size:11px; color:#64748b; background:#f1f5f9; padding:2px 7px; border-radius:5px; font-weight:600; }

.bbair-vtl-card {
    background:#fff; border:1.5px solid #e5e9f0;
    border-radius:10px; padding:10px 14px;
    margin-bottom:8px; max-width:340px;
}
.bbair-vtl-card.arr { border-left:3px solid #10b981; }
.bbair-vtl-card.dep { border-left:3px solid #0EA5E9; }

.bbair-vtl-card-lbl { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#334155; margin-bottom:8px; }
.bbair-vtl-fn { font-size:11px; font-weight:700; color:#0EA5E9; background:#EFF6FF; padding:2px 8px; border-radius:5px; margin-left:auto; }

.bbair-vtl-times { display:flex; flex-direction:column; gap:5px; border-top:1px solid #f1f5f9; padding-top:7px; }
.bbair-vtl-tr { display:flex; align-items:center; gap:8px; }
.bbair-vtl-tv { font-size:12px; color:#475569; font-weight:500; white-space:nowrap; }
.bbair-vtl-tv.is-actual { color:#15803d; font-weight:700; }
.bbair-vtl-tv.is-empty  { color:#cbd5e1; }

/* Flight row: horizontal cards like ocean legs */
.bbair-frow { display:flex; flex-wrap:wrap; gap:14px; padding:16px 18px; }
.bbair-frow-card { flex:1; min-width:220px; max-width:300px; border:1.5px solid #e2e8f0; border-radius:12px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.bbair-frow-card.done    { border-left:4px solid #10b981; }
.bbair-frow-card.active  { border-left:4px solid #0EA5E9; box-shadow:0 0 0 3px rgba(14,165,233,.06); }
.bbair-frow-card.planned { border-left:4px solid #cbd5e1; }
.bbair-frow-hdr { display:flex; align-items:center; gap:6px; padding:9px 12px; background:#f8fafc; border-bottom:1px solid #f1f5f9; flex-wrap:wrap; }
.bbair-frow-num { font-size:9.5px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.6px; }
.bbair-frow-fn  { font-size:11.5px; font-weight:700; color:#0f172a; }
.bbair-frow-status { font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:8px; margin-left:auto; white-space:nowrap; }
.bbair-frow-status.done    { background:#DCFCE7; color:#15803d; }
.bbair-frow-status.active  { background:#E0F2FE; color:#0369a1; }
.bbair-frow-status.planned { background:#f1f5f9; color:#64748b; }
.bbair-frow-ports { display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid #f1f5f9; }
.bbair-frow-port { display:flex; flex-direction:column; gap:2px; flex:1; }
.bbair-frow-port-lbl  { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#94a3b8; }
.bbair-frow-port-name { font-size:11px; font-weight:600; color:#334155; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bbair-frow-port-iata { font-size:10px; color:#64748b; }
.bbair-frow-route-arrow { font-size:16px; color:#cbd5e1; padding:0 4px; flex-shrink:0; }
.bbair-frow-times { display:flex; gap:0; padding:10px 12px; flex:1; }
.bbair-frow-tsec { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.bbair-frow-ts-lbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#94a3b8; margin-bottom:2px; }
.bbair-frow-trow { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.bbair-frow-tl   { font-size:10px; color:#94a3b8; white-space:nowrap; flex-shrink:0; }
.bbair-frow-tv   { font-size:10.5px; color:#475569; font-weight:500; white-space:nowrap; }
.bbair-frow-tv.act { color:#15803d; font-weight:700; }
.bbair-frow-tv.est { color:#b45309; font-weight:600; }
.bbair-frow-tdiv { width:1px; background:#f1f5f9; margin:0 8px; flex-shrink:0; }

/* All-MAWB list view */
.bbair-all-wrap { display:flex; flex-direction:column; gap:12px; padding:16px 0; }
.bbair-all-card { background:#fff; border:1.5px solid #dde3ec; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); transition:box-shadow .15s; }
.bbair-all-card-hdr { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:12px 18px; cursor:pointer; background:#f8fafc; user-select:none; transition:background .15s; }
.bbair-all-card-hdr:hover { background:#f1f5f9; }
.bbair-all-card-hdr-left  { display:flex; align-items:center; gap:10px; row-gap:6px; flex-wrap:wrap; }
.bbair-all-card-hdr-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.bbair-card-mawb  { font-size:13px; color:#334155; }
.bbair-card-mawb strong { font-weight:700; color:#0f172a; }
.bbair-card-hawb  { font-size:11px; background:#f1f5f9; color:#64748b; border-radius:5px; padding:2px 7px; }
.bbair-status-badge { font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:10px; }
.bbair-status-badge.bbair-status-arr { background:#DCFCE7; color:#15803d; }
.bbair-status-badge.bbair-status-dlv { background:#DCFCE7; color:#15803d; }
.bbair-status-badge.bbair-status-dep { background:#E0F2FE; color:#0369a1; }
.bbair-status-badge.bbair-status-man { background:#FFF7ED; color:#b45309; }
.bbair-status-badge.bbair-status-rcs { background:#F5F3FF; color:#6d28d9; }
.bbair-status-badge.bbair-status-booked { background:#f1f5f9; color:#64748b; }
.bbair-all-content { padding:14px 18px; border-top:1px solid #f1f5f9; }
.bbair-card-stats { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.bbair-stat-pill { font-size:11px; background:#EFF6FF; color:#1d4ed8; border-radius:20px; padding:3px 10px; font-weight:600; }

/* GENERAL INQUIRY PANEL */
.gi-fab {
    position:fixed;bottom:28px;right:28px;z-index:1100;
    display:flex;align-items:center;gap:8px;
    background:linear-gradient(135deg,#1560a8 0%,#0A1F44 100%);
    color:#fff;border:none;border-radius:50px;padding:13px 20px 13px 16px;
    font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;
    box-shadow:0 4px 20px rgba(21,96,168,.45),0 1px 4px rgba(0,0,0,.18);
    transition:transform .2s ease,box-shadow .2s ease;
}
.gi-fab:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(21,96,168,.55),0 2px 6px rgba(0,0,0,.2);}
.gi-fab-active{background:linear-gradient(135deg,#334155 0%,#0f172a 100%);}
.gi-fab-icon{flex-shrink:0;}
.gi-fab-icon-close{display:none;}
.gi-fab-active .gi-fab-icon-mail{display:none;}
.gi-fab-active .gi-fab-icon-close{display:block;}
.gi-fab-label{white-space:nowrap;}
.gi-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:1099;backdrop-filter:blur(2px);}
.gi-panel{
    position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;
    background:var(--bg,#f5f7fa);border-left:1px solid var(--border,#e2e8f0);
    box-shadow:-6px 0 32px rgba(0,0,0,.14);z-index:1100;
    display:flex;flex-direction:column;
    transform:translateX(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.gi-panel-open{transform:translateX(0);}
.gi-panel-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px;background:var(--navy-dark,#0A1F44);color:#fff;flex-shrink:0;
}
.gi-panel-header-left{display:flex;align-items:center;gap:12px;}
.gi-panel-icon{
    width:36px;height:36px;background:rgba(255,255,255,.12);
    border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.gi-panel-title{font-size:15px;font-weight:700;}
.gi-panel-subtitle{font-size:11px;color:rgba(255,255,255,.55);margin-top:1px;}
.gi-close-btn{
    width:32px;height:32px;background:rgba(255,255,255,.1);
    border:none;border-radius:8px;color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s;flex-shrink:0;
}
.gi-close-btn:hover{background:rgba(255,255,255,.2);}
.gi-panel-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;}
.gi-field-group{display:flex;flex-direction:column;gap:6px;}
.gi-field-grow{flex:1;}
.gi-field-label{
    display:flex;align-items:center;justify-content:space-between;
    font-size:11px;font-weight:700;color:var(--text-muted,#8898aa);
    text-transform:uppercase;letter-spacing:.06em;
}
.gi-char-count{font-size:11px;font-weight:400;color:var(--text-muted,#8898aa);text-transform:none;letter-spacing:0;}
.gi-recipient-chip{
    display:flex;align-items:center;gap:7px;padding:9px 13px;
    border-radius:8px;font-size:12.5px;font-weight:500;transition:opacity .2s;
}
.gi-chip-to{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;}
.gi-chip-cc{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0;}
.gi-chip-disabled{opacity:.4;}
.gi-recipient-skeleton{
    height:38px;border-radius:8px;
    background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
    background-size:200% 100%;animation:gi-shimmer 1.2s infinite;
}
@keyframes gi-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.gi-toggle-label{display:flex;align-items:center;cursor:pointer;}
.gi-toggle-label input[type=checkbox]{display:none;}
.gi-toggle-track{
    width:34px;height:18px;background:#cbd5e1;border-radius:100px;
    position:relative;transition:background .2s;display:flex;align-items:center;
}
.gi-toggle-label input:checked + .gi-toggle-track{background:#22c55e;}
.gi-toggle-thumb{
    width:14px;height:14px;background:#fff;border-radius:50%;
    position:absolute;left:2px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.gi-toggle-label input:checked + .gi-toggle-track .gi-toggle-thumb{transform:translateX(16px);}
.gi-input,.gi-textarea{
    width:100%;box-sizing:border-box;padding:10px 13px;
    border:1.5px solid var(--border,#e2e8f0);border-radius:9px;
    background:var(--surface,#fff);font-size:13px;color:var(--navy-dark,#0A1F44);
    font-family:inherit;transition:border-color .15s,box-shadow .15s;outline:none;
}
.gi-input:focus,.gi-textarea:focus{border-color:#1560a8;box-shadow:0 0 0 3px rgba(21,96,168,.12);}
.gi-textarea{resize:none;flex:1;min-height:120px;line-height:1.6;}
.gi-error-banner{
    display:flex;align-items:center;gap:8px;padding:10px 14px;
    background:#fef2f2;border:1px solid #fecaca;border-radius:8px;
    font-size:12.5px;color:#dc2626;font-weight:500;
}
.gi-success{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;}
.gi-success-icon{
    width:64px;height:64px;background:linear-gradient(135deg,#dcfce7,#bbf7d0);
    border-radius:50%;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:16px;
}
.gi-success-title{font-size:18px;font-weight:700;color:var(--navy-dark,#0A1F44);margin-bottom:8px;}
.gi-success-msg{font-size:13px;color:var(--text-muted,#64748b);line-height:1.6;max-width:280px;}
.gi-panel-footer{
    display:flex;align-items:center;justify-content:flex-end;gap:10px;
    padding:16px 20px;border-top:1px solid var(--border,#e2e8f0);
    background:var(--surface,#fff);flex-shrink:0;
}
.gi-btn-ghost{
    padding:9px 18px;border:1.5px solid var(--border,#e2e8f0);border-radius:8px;
    background:transparent;color:var(--text-muted,#64748b);
    font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s;
}
.gi-btn-ghost:hover{border-color:#94a3b8;color:var(--navy-dark,#0A1F44);}
.gi-btn-primary{
    display:flex;align-items:center;gap:7px;padding:9px 18px;border:none;border-radius:8px;
    background:linear-gradient(135deg,#1560a8,#0A1F44);color:#fff;
    font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s;
    box-shadow:0 2px 8px rgba(21,96,168,.35);
}
.gi-btn-primary:hover:not(:disabled){opacity:.9;transform:translateY(-1px);}
.gi-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.gi-spinner{
    width:14px;height:14px;border:2px solid rgba(255,255,255,.3);
    border-top-color:#fff;border-radius:50%;animation:gi-spin .7s linear infinite;flex-shrink:0;
}
@keyframes gi-spin{to{transform:rotate(360deg)}}
@media(max-width:480px){
    .gi-panel{width:100vw;}
    .gi-fab-label{display:none;}
    .gi-fab{padding:13px;border-radius:50%;}
}.gi-chip-self{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;}
/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   ANNOUNCEMENT POPUP  (ap- prefix)
╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.ap-backdrop {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(10,24,60,.55);
    backdrop-filter: blur(6px);
    animation: ap-fade .3s ease;
}
@keyframes ap-fade { from{opacity:0} to{opacity:1} }

.ap-popup {
    position: fixed; inset: 0; z-index: 1101;
    display: flex; flex-direction: column;
    width: calc(100% - 48px); max-width: 820px;
    height: 520px; max-height: 90vh;
    margin: auto;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 32px 100px rgba(0,0,0,.35);
    animation: ap-pop .35s cubic-bezier(.34,1.15,.64,1);
}
@keyframes ap-pop {
    from { opacity:0; transform:scale(.88) translateY(24px) }
    to   { opacity:1; transform:scale(1)   translateY(0) }
}

/* ── Announcement header strip ──────────────────────────────────────── */
.ap-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 20px 11px 20px; flex-shrink: 0;
    background: linear-gradient(90deg, #1a237e 0%, #283593 100%);
    border-radius: 22px 22px 0 0;
}
.ap-header-left { display: flex; align-items: center; gap: 8px; }
.ap-header-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.ap-header-title {
    font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .4px;
}
.ap-header-sub {
    font-size: 10px; color: rgba(255,255,255,.65); margin-left: 4px; font-weight: 500;
}

/* Close — inside header strip */
.ap-close {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    cursor: pointer; background: rgba(255,255,255,.18); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s; flex-shrink: 0;
}
.ap-close:hover { background: rgba(255,255,255,.32); }

.ap-slide { display: flex; flex: 1; min-height: 0; }

/* ── Left panel ─────────────────────────────────────────────────────── */
.ap-left {
    width: 70%; flex-shrink: 0;
    position: relative; overflow: hidden;
}

/* Full image — contain so nothing is cropped, bg color fills the gaps */
.ap-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; padding: 12px;
    box-sizing: border-box;
}
/* No overlay needed with contain — image is fully visible */
.ap-img-overlay { display: none; }

/* Emoji fallback — centered in colored panel */
.ap-emoji-wrap {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
}
.ap-emoji { font-size: 80px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0,0,0,.2)); }

/* Slide counter badge */
.ap-offer-no {
    position: absolute; top: 16px; left: 16px; z-index: 5;
    background: rgba(255,255,255,.22); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; padding: 4px 12px; border-radius: 20px;
    backdrop-filter: blur(6px);
}

/* ── Right content ───────────────────────────────────────────────────── */
.ap-right {
    flex: 1; padding: 28px 24px 20px;
    display: flex; flex-direction: column; justify-content: center;
    overflow-y: auto; gap: 2px; min-width: 0;
}
.ap-badge {
    display: inline-flex; align-items: center;
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; padding: 4px 10px;
    border-radius: 20px; margin-bottom: 8px; width: fit-content;
}
.ap-title {
    font-size: 18px; font-weight: 900; line-height: 1.25;
    color: #0f172a; margin-bottom: 8px;
    word-break: break-word;
}
.ap-desc {
    font-size: 12px; color: #475569; line-height: 1.65; margin-bottom: 12px;
}
.ap-validity {
    font-size: 10px; color: #94a3b8; margin-bottom: 16px;
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.ap-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; flex-direction: column; }
.ap-btn-primary {
    padding: 9px 16px; border-radius: 8px; border: none;
    font-size: 12px; font-weight: 700; cursor: pointer; color: #fff;
    text-decoration: none; display: inline-block; text-align: center;
    transition: opacity .15s, transform .15s;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.ap-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.ap-btn-next, .ap-btn-done {
    padding: 9px 16px; border-radius: 8px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    transition: all .15s; width: 100%;
}
.ap-btn-next { border: 1.5px solid #e2e8f0; background: #fff; color: #475569; }
.ap-btn-next:hover { background: #f8fafc; border-color: #cbd5e1; }
.ap-btn-done { border: none; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.ap-btn-done:hover { opacity: .88; transform: translateY(-1px); }

/* ── Progress bar ───────────────────────────────────────────────────── */
.ap-progress { height: 3px; background: #f1f5f9; flex-shrink: 0; }
.ap-progress-fill { height: 100%; transition: width .4s ease; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.ap-footer {
    border-top: 1px solid #f1f5f9; padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between;
    background: #fafafa; flex-shrink: 0;
}
.ap-dots { display: flex; gap: 6px; align-items: center; }
.ap-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #e2e8f0; border: none; cursor: pointer;
    transition: all .25s; padding: 0;
}
.ap-dot-active { border-radius: 4px; }
.ap-nav { display: flex; gap: 6px; align-items: center; }
.ap-nav-btn {
    width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #e2e8f0;
    background: #fff; cursor: pointer; font-size: 15px; color: #64748b;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.ap-nav-btn:hover:not(:disabled) { background: #f1f5f9; }
.ap-nav-btn:disabled { opacity: .35; cursor: default; }
.ap-dismiss-link {
    font-size: 12px; color: #94a3b8; background: none; border: none;
    cursor: pointer; margin-left: 8px; transition: color .15s;
    font-weight: 500;
}
.ap-dismiss-link:hover { color: #64748b; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ap-popup { width: 100%; border-radius: 20px 20px 0 0; margin: auto 0 0; height: auto; max-height: 92vh; }
    .ap-slide { flex-direction: column; }
    .ap-left  { width: 100%; height: 240px; flex-shrink: 0; }
    .ap-emoji { font-size: 60px; }
    .ap-right { padding: 20px 20px 12px; }
    .ap-title { font-size: 17px; }
    .ap-actions { flex-direction: column; }
}