/* Bagyo Serye v1.3.3D — continuous regional tracking corrective release */

.source-transition-banner {
  margin: 0 0 18px;
  padding: 18px 20px;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(255, 191, 71, .48);
  border-left: 5px solid #ffbf47;
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(255, 191, 71, .17), rgba(45, 157, 255, .11)),
    rgba(7, 22, 39, .92);
  box-shadow: 0 16px 45px rgba(0, 0, 0, .2);
  color: #eef8ff;
}

.source-transition-banner[hidden] {
  display: none !important;
}

.source-transition-banner strong {
  color: #ffd581;
  font-size: clamp(.88rem, 1.7vw, 1.05rem);
  letter-spacing: .06em;
}

.source-transition-banner span {
  line-height: 1.55;
  color: #c7d9e8;
}

.source-badge {
  min-width: 78px;
  text-align: center;
}

.source-badge[data-source="PAGASA"] {
  color: #bceeff;
  border-color: rgba(75, 210, 255, .5);
  background: rgba(41, 151, 211, .17);
}

.source-badge[data-source="JMA RSMC"] {
  color: #d6c9ff;
  border-color: rgba(154, 120, 255, .55);
  background: rgba(117, 82, 221, .18);
}

.source-badge[data-source="JTWC"] {
  color: #c5f5d8;
  border-color: rgba(75, 220, 145, .5);
  background: rgba(35, 154, 101, .16);
}

.source-badge[data-source="CACHED"] {
  color: #ffe099;
  border-color: rgba(255, 191, 71, .5);
  background: rgba(187, 123, 19, .18);
}

.classification-comparison {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(151, 181, 207, .25);
  border-radius: 12px;
  display: grid;
  gap: 5px;
  background: rgba(6, 20, 35, .48);
  color: #c4d6e6;
  font-size: .88rem;
}

.classification-comparison b {
  color: #f0f8ff;
}

.pipeline-status-card {
  overflow: hidden;
}

.pipeline-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pipeline-status-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(137, 177, 207, .2);
  border-radius: 12px;
  display: grid;
  gap: 5px;
  background: rgba(4, 18, 32, .5);
}

.pipeline-status-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pipeline-status-item b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #eef8ff;
}

.pipeline-status-item small,
.pipeline-status-item span {
  color: #99afc2;
  line-height: 1.35;
}

.pipeline-status-item em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #91a6b9;
}

.pipeline-status-item[data-status="operational"] em,
.pipeline-status-item[data-status="current"] em {
  color: #65e5a5;
}

.pipeline-status-item[data-status="ended"] em {
  color: #8ac7ff;
}

.pipeline-status-item[data-status="cached"] em,
.pipeline-status-item[data-status="delayed"] em {
  color: #ffd06c;
}

.pipeline-status-item[data-status="unavailable"] em,
.pipeline-status-item[data-status="stale"] em {
  color: #ff9b9b;
}

.track-history-line {
  stroke: #7e9fbd;
  stroke-width: 2;
  stroke-dasharray: 5 7;
  fill: none;
}

.track-forecast-line {
  stroke: #bca8ff;
  stroke-width: 2;
  stroke-dasharray: 8 10;
  fill: none;
}

.historical-track-point,
.forecast-track-point {
  min-width: 82px;
  padding: 6px 8px;
  border-radius: 8px;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #eaf5ff;
  font: 800 .61rem/1.1 Inter, system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .3);
}

.historical-track-point {
  border: 1px solid rgba(255, 191, 71, .7);
  background: rgba(69, 50, 22, .9);
}

.forecast-track-point {
  border: 1px solid rgba(188, 168, 255, .72);
  background: rgba(43, 34, 75, .9);
}

.track-point-divicon {
  background: transparent !important;
  border: 0 !important;
}

.source-transition-log {
  grid-column: 1 / -1;
}

.source-transition-row {
  padding: 11px 13px;
  border: 1px solid rgba(132, 172, 204, .2);
  border-radius: 11px;
  display: grid;
  grid-template-columns: minmax(140px, .55fr) minmax(220px, 1fr) minmax(220px, 1.3fr);
  gap: 12px;
  color: #a9bfd1;
  background: rgba(5, 19, 33, .48);
}

.source-transition-row + .source-transition-row {
  margin-top: 8px;
}

.source-transition-row b {
  color: #eef8ff;
}

.disturbance-marker__source-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 6px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(5, 18, 31, .93);
  color: #f4fbff;
  font: 800 9px/1 system-ui, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .pipeline-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-transition-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pipeline-status-grid {
    grid-template-columns: 1fr;
  }

  .source-transition-banner {
    padding: 15px;
  }

  #cyclones-view .page-toolbar .toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  #cyclones-view .page-toolbar .toolbar-actions > * {
    min-width: 0;
    white-space: normal;
  }
}