/*
 * RADARCESKA — BUS DETAIL POLISH v2.0.0
 * Compact premium transport card.
 * Presentation only. No motion / journey / observer ownership.
 */


/* ============================================================
   CARD SHELL
   ============================================================ */

body .app-shell[data-mode="buses"] #busDetailCard {
  scrollbar-width:thin;
}

body .app-shell[data-mode="buses"] #busPassengerV180 {
  display:grid;
  gap:8px;
  min-width:0;
}

body .app-shell[data-mode="buses"] #busPassengerV180 > * {
  min-width:0;
}


/* ============================================================
   LIVE / DELAY PILLS
   ============================================================ */

body .app-shell[data-mode="buses"] .bus-p18-status {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:5px;
  min-height:18px;
  margin:0 2px -1px;
}

body .app-shell[data-mode="buses"] .bus-p18-chip {
  min-height:18px;
  padding:2px 6px;
  border-radius:999px;
  font-size:8.5px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.01em;
}


/* ============================================================
   MAIN HERO
   ============================================================ */

body .app-shell[data-mode="buses"] .bus-p18-head {
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-height:44px;
  margin:0;
  padding:0 1px;
}

body .app-shell[data-mode="buses"] .bus-p18-line {
  width:42px;
  height:42px;
  min-width:42px;
  display:grid;
  place-items:center;
  margin:0;
  border-radius:12px;
  font-size:17px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
}

body .app-shell[data-mode="buses"] .bus-p18-heading {
  min-width:0;
}

body .app-shell[data-mode="buses"] .bus-p18-route {
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  font-size:12.5px;
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.015em;
}

body .app-shell[data-mode="buses"] .bus-p18-route span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body .app-shell[data-mode="buses"] .bus-p18-route span:first-child {
  flex:0 1 auto;
  max-width:42%;
}

body .app-shell[data-mode="buses"] .bus-p18-route span:last-child {
  flex:1 1 auto;
}

body .app-shell[data-mode="buses"] .bus-p18-arrow {
  flex:none;
  font-size:11px;
  opacity:.48;
}

body .app-shell[data-mode="buses"] .bus-p18-subtitle {
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  line-height:1.25;
  opacity:.66;
}


/* ============================================================
   NEXT STOP — ONE COMPACT PRIMARY STRIP
   ============================================================ */

body .app-shell[data-mode="buses"] .bus-p18-next {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:54px;
  margin:0;
  padding:7px 9px;
  border-radius:13px;
}

body .app-shell[data-mode="buses"] .bus-p18-next-icon {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  font-size:13px;
}

body .app-shell[data-mode="buses"] .bus-p18-next-copy {
  min-width:0;
}

body .app-shell[data-mode="buses"] .bus-p18-next-copy small {
  display:block;
  margin:0 0 2px;
  font-size:8px;
  line-height:1.1;
  font-weight:750;
}

body .app-shell[data-mode="buses"] .bus-p18-next-copy strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12.5px;
  line-height:1.18;
  letter-spacing:-.012em;
}

body .app-shell[data-mode="buses"] .bus-p18-next-copy em {
  display:block;
  margin-top:2px;
  font-size:8px;
  line-height:1.1;
}

body .app-shell[data-mode="buses"] .bus-p18-next-time {
  min-width:47px;
  text-align:right;
}

body .app-shell[data-mode="buses"] .bus-p18-next-time strong {
  display:block;
  font-size:17px;
  line-height:1;
  letter-spacing:-.04em;
}

body .app-shell[data-mode="buses"] .bus-p18-next-time small {
  display:block;
  margin-top:3px;
  font-size:8px;
  line-height:1.1;
}


/* ============================================================
   ROUTE PROGRESS
   ============================================================ */

body .app-shell[data-mode="buses"] .bus-p18-progress {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  min-height:58px;
  margin:0;
  padding:7px 4px 15px;
  border-radius:12px;
}

body .app-shell[data-mode="buses"] .bus-p18-progress-item {
  min-width:0;
  padding:0 6px;
}

body .app-shell[data-mode="buses"]
.bus-p18-progress-item + .bus-p18-progress-item {
  border-left-width:1px;
}

body .app-shell[data-mode="buses"] .bus-p18-progress-item small {
  display:block;
  margin:0 0 2px;
  font-size:7.5px;
  line-height:1.1;
}

body .app-shell[data-mode="buses"] .bus-p18-progress-item strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9.5px;
  line-height:1.2;
  letter-spacing:-.01em;
}

body .app-shell[data-mode="buses"] .bus-p18-progress-item em {
  display:block;
  margin-top:2px;
  font-size:8px;
  line-height:1.1;
}

body .app-shell[data-mode="buses"] .bus-p18-progress-line {
  left:11px;
  right:11px;
  bottom:7px;
  height:6px;
}


/* ============================================================
   SECTION TITLE
   ============================================================ */

body .app-shell[data-mode="buses"] .bus-p18-section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:25px;
  margin:1px 1px -1px;
  padding:0;
}

body .app-shell[data-mode="buses"] .bus-p18-section-title strong {
  font-size:10.5px;
  line-height:1.2;
  font-weight:850;
}

body .app-shell[data-mode="buses"] .bus-p18-section-title small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8px;
  line-height:1.2;
  opacity:.62;
}


/* ============================================================
   TIMELINE
   ============================================================ */

body .app-shell[data-mode="buses"] #busJourneyTimeline {
  margin:0;
  padding:0;
}

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop {
  min-height:40px;
  margin:0;
  padding:5px 3px;
}

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop-copy {
  min-width:0;
}

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop-copy b {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10.5px;
  line-height:1.18;
  letter-spacing:-.006em;
}

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop-copy small {
  margin-top:2px;
  font-size:7.5px;
  line-height:1.12;
}

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop time {
  min-width:39px;
  font-size:9.5px;
  line-height:1.1;
  text-align:right;
}

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop-rail {
  width:20px;
}

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop-rail i {
  width:8px;
  height:8px;
}


/* ============================================================
   MORE STOPS
   ============================================================ */

body .app-shell[data-mode="buses"] .bus-p18-more {
  min-height:34px;
  margin:1px 0 0;
  padding:6px 10px;
  border-radius:10px;
  font-size:9px;
  line-height:1.15;
  font-weight:800;
}


/* ============================================================
   VEHICLE — SHOW ONLY WHEN FACTUAL FIELDS EXIST
   ============================================================ */

body .app-shell[data-mode="buses"]
.bus-p18-vehicle:not(:has(.bus-p18-fields dd)) {
  display:none;
}

body .app-shell[data-mode="buses"] .bus-p18-vehicle {
  margin:2px 0 0;
  padding:8px 9px;
  border-radius:12px;
}

body .app-shell[data-mode="buses"] .bus-p18-card-head {
  display:flex;
  align-items:center;
  min-height:23px;
  gap:6px;
}

body .app-shell[data-mode="buses"] .bus-p18-card-title {
  font-size:9.5px;
  line-height:1.15;
}

body .app-shell[data-mode="buses"] .bus-p18-card-icon {
  width:22px;
  height:22px;
  border-radius:7px;
  font-size:10px;
}

body .app-shell[data-mode="buses"] .bus-p18-card-tag {
  padding:2px 5px;
  border-radius:999px;
  font-size:7.5px;
}

body .app-shell[data-mode="buses"]
.bus-p18-photo:not(:has(img)) {
  display:none;
}

body .app-shell[data-mode="buses"] .bus-p18-vehicle-body {
  display:block;
  margin-top:4px;
}

body .app-shell[data-mode="buses"]
.bus-p18-vehicle-body:has(.bus-p18-photo img) {
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  gap:8px;
  align-items:start;
}

body .app-shell[data-mode="buses"] .bus-p18-photo {
  width:68px;
  min-height:48px;
  border-radius:9px;
}

body .app-shell[data-mode="buses"] .bus-p18-fields {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:3px 7px;
  margin:3px 0 0;
}

body .app-shell[data-mode="buses"] .bus-p18-fields dt {
  font-size:7.5px;
  line-height:1.25;
}

body .app-shell[data-mode="buses"] .bus-p18-fields dd {
  margin:0;
  font-size:8.5px;
  line-height:1.25;
}


/* ============================================================
   CURRENT ASSIGNMENT — DATA STRIP, NOT ANOTHER BIG CARD
   ============================================================ */

body .app-shell[data-mode="buses"]
.bus-p18-assignment:not(:has(.bus-p18-duty)) {
  display:none;
}

body .app-shell[data-mode="buses"] .bus-p18-assignment {
  margin:1px 0 0;
  padding:7px 9px;
  border-radius:11px;
}

body .app-shell[data-mode="buses"] .bus-p18-assignment-body {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 10px;
  margin-top:3px;
}

body .app-shell[data-mode="buses"] .bus-p18-duty {
  min-width:0;
  padding:4px 0;
}

body .app-shell[data-mode="buses"] .bus-p18-duty small {
  display:block;
  font-size:7px;
  line-height:1.1;
}

body .app-shell[data-mode="buses"] .bus-p18-duty strong {
  display:block;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8.5px;
  line-height:1.2;
}


/* ============================================================
   LEGACY FACTUAL FOOT
   ============================================================ */

body .app-shell[data-mode="buses"]
#busDetailCard .train-detail-foot {
  margin-top:5px;
  padding-top:6px;
  font-size:8px;
  line-height:1.25;
  opacity:.72;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width:901px) {

  body .app-shell[data-mode="buses"] #busDetailCard {
    width:386px;
    max-width:calc(100vw - 28px);
    max-height:calc(100dvh - 104px);
    padding:11px 11px 9px;
    border-radius:18px;
  }

  body .app-shell[data-mode="buses"]
  #busDetailCard .card-close {
    width:28px;
    height:28px;
    min-width:28px;
    min-height:28px;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:900px) {

  body .app-shell[data-mode="buses"] #busPassengerV180 {
    gap:7px;
  }

  body .app-shell[data-mode="buses"] .bus-p18-head {
    grid-template-columns:38px minmax(0,1fr);
    gap:8px;
    min-height:40px;
  }

  body .app-shell[data-mode="buses"] .bus-p18-line {
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:11px;
    font-size:16px;
  }

  body .app-shell[data-mode="buses"] .bus-p18-next {
    min-height:50px;
    padding:6px 8px;
  }

  body .app-shell[data-mode="buses"] .bus-p18-progress {
    min-height:54px;
    padding-top:6px;
  }

  body .app-shell[data-mode="buses"]
  #busJourneyTimeline .bus-journey-stop {
    min-height:39px;
  }
}


/* Small phones */
@media (max-width:390px) {

  body .app-shell[data-mode="buses"] .bus-p18-route {
    font-size:12px;
  }

  body .app-shell[data-mode="buses"]
  .bus-p18-progress-item strong {
    font-size:9px;
  }

  body .app-shell[data-mode="buses"]
  .bus-p18-assignment-body {
    grid-template-columns:1fr;
  }
}

/* RADARCESKA — BUS DETAIL POLISH v2.0.0 END */


/* ============================================================
   RADARCESKA BUS DETAIL POLISH v2.0.1
   HIGHER PANEL + OWN SCROLL
   ============================================================ */

@media (min-width:901px) {

  body .app-shell[data-mode="buses"] #busDetailCard {
    top:114px;
    bottom:auto;

    max-height:calc(100dvh - 126px);

    overflow-y:auto;
    overflow-x:hidden;

    overscroll-behavior:contain;
    scrollbar-gutter:stable;

    scroll-behavior:smooth;
  }


  body .app-shell[data-mode="buses"]
  #busDetailCard::-webkit-scrollbar {
    width:7px;
  }


  body .app-shell[data-mode="buses"]
  #busDetailCard::-webkit-scrollbar-track {
    background:transparent;
  }


  body .app-shell[data-mode="buses"]
  #busDetailCard::-webkit-scrollbar-thumb {
    background:rgba(65,91,84,.22);
    border-radius:999px;
    border:2px solid transparent;
    background-clip:padding-box;
  }


  body .app-shell[data-mode="buses"]
  #busDetailCard::-webkit-scrollbar-thumb:hover {
    background:rgba(65,91,84,.38);
    border:2px solid transparent;
    background-clip:padding-box;
  }
}


/* More stops always belongs visually to the end of current batch */

body .app-shell[data-mode="buses"] .bus-p18-more {
  width:100%;
  margin:6px 0 2px;
  flex:none;
}


/* END RADARCESKA BUS DETAIL POLISH v2.0.1 */


/* ============================================================
   BUS MODE — CLEAN MAP CONTROLS v2.0.2
   Keep zoom / overview / location.
   Hide display settings / tourist layer / weather alerts.
   ============================================================ */

.app-shell[data-mode="buses"] #layersBtn,
.app-shell[data-mode="buses"] #touristMapBtn,
.app-shell[data-mode="buses"] #alertBtn {
  display:none;
}

/* END BUS MODE — CLEAN MAP CONTROLS v2.0.2 */


/* ============================================================
   RADARCESKA BUS TIMELINE STATE POLISH v2.0.3

   Visual hierarchy:
   - current = strong blue
   - next    = soft blue
   - past/future = neutral
   ============================================================ */


/* Base rows stay neutral */

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop {
  background:transparent;
  box-shadow:none;
}


/* Past = contextual, deliberately quiet */

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop.is-past {
  opacity:.58;
  background:transparent;
}


/* ------------------------------------------------------------
   CURRENT STOP
   Only one strong visual anchor.
   ------------------------------------------------------------ */

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop.is-current {
  opacity:1;
  background:rgba(28,100,210,.095);
  box-shadow:inset 3px 0 0 #2467c8;
  border-radius:9px;
}


body .app-shell[data-mode="buses"]
#busJourneyTimeline
.bus-journey-stop.is-current
.bus-journey-stop-copy b {
  color:#174f9d;
  font-weight:850;
}


body .app-shell[data-mode="buses"]
#busJourneyTimeline
.bus-journey-stop.is-current time {
  color:#174f9d;
  font-weight:850;
}


body .app-shell[data-mode="buses"]
#busJourneyTimeline
.bus-journey-stop.is-current
.bus-journey-stop-rail i {
  background:#2467c8;
  border-color:#ffffff;
  box-shadow:
    0 0 0 2px rgba(36,103,200,.16);
}


/* ------------------------------------------------------------
   NEXT STOP
   Still obvious, but clearly subordinate to current.
   ------------------------------------------------------------ */

body .app-shell[data-mode="buses"]
#busJourneyTimeline .bus-journey-stop.is-next {
  opacity:1;
  background:rgba(28,100,210,.035);
  box-shadow:none;
  border-radius:8px;
}


body .app-shell[data-mode="buses"]
#busJourneyTimeline
.bus-journey-stop.is-next
.bus-journey-stop-copy b {
  color:#355d88;
  font-weight:800;
}


body .app-shell[data-mode="buses"]
#busJourneyTimeline
.bus-journey-stop.is-next time {
  color:#496d91;
  font-weight:750;
}


body .app-shell[data-mode="buses"]
#busJourneyTimeline
.bus-journey-stop.is-next
.bus-journey-stop-rail i {
  background:#79a2ce;
  border-color:#ffffff;
  box-shadow:none;
}


/* Future / normal rows remain visually neutral */

body .app-shell[data-mode="buses"]
#busJourneyTimeline
.bus-journey-stop:not(.is-current):not(.is-next):not(.is-past)
.bus-journey-stop-copy b {
  color:inherit;
}


/* END RADARCESKA BUS TIMELINE STATE POLISH v2.0.3 */