/* ============================================================
   Park Train Tracker — Frontend Stylesheet
   ============================================================ */

/* ── Variables ── */
:root {
  --ptt-primary:      #1a472a;
  --ptt-accent:       #f4a261;
  --ptt-accent-dark:  #e76f51;
  --ptt-surface:      #ffffff;
  --ptt-surface-2:    #f5f5f0;
  --ptt-text:         #2c2c2c;
  --ptt-text-muted:   #6b6b6b;
  --ptt-border:       rgba(0,0,0,.08);
  --ptt-shadow:       0 4px 24px rgba(0,0,0,.12);
  --ptt-radius:       12px;
  --ptt-train-size:   60px;
}

/* Dark theme override */
.ptt-tracker-wrap[data-theme="dark"] {
  --ptt-surface:    #1a1f16;
  --ptt-surface-2:  #252c1f;
  --ptt-text:       #e8f0e5;
  --ptt-text-muted: #8ea882;
  --ptt-border:     rgba(255,255,255,.08);
}

/* ── Wrapper ── */
.ptt-tracker-wrap {
  font-family: 'Georgia', serif;
  color: var(--ptt-text);
  background: var(--ptt-surface);
  border-radius: var(--ptt-radius);
  overflow: hidden;
  box-shadow: var(--ptt-shadow);
  border: 1px solid var(--ptt-border);
}

/* ── Status Bar ── */
.ptt-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--ptt-primary);
  color: #fff;
  font-size: .85rem;
  flex-wrap: wrap;
}

.ptt-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pulse dot */
.ptt-pulse {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
  position: relative;
}

.ptt-status-indicator[data-status="live"] .ptt-pulse {
  background: #4caf50;
  box-shadow: 0 0 0 0 rgba(76,175,80,.7);
  animation: ptt-pulsate 1.4s infinite;
}

.ptt-status-indicator[data-status="warning"] .ptt-pulse { background: var(--ptt-accent); }
.ptt-status-indicator[data-status="error"]   .ptt-pulse { background: #ef5350; }

@keyframes ptt-pulsate {
  0%   { box-shadow: 0 0 0 0 rgba(76,175,80,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(76,175,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}

.ptt-nearest-label { flex: 1; text-align: center; font-style: italic; opacity: .9; }
.ptt-last-updated  { margin-left: auto; font-size: .75rem; opacity: .7; }

/* ── Map container ── */
.ptt-map-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #d4e8c2;
  cursor: crosshair;
}

.ptt-map-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.ptt-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.ptt-map-placeholder {
  width: 100%;
  height: 100%;
}

/* ── Train icon ── */
.ptt-train-icon {
  position: absolute;
  width: var(--ptt-train-size);
  height: var(--ptt-train-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
  /* transition set dynamically via JS */
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
}

.ptt-train-icon img,
.ptt-train-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ptt-train-icon.ptt-hidden { opacity: 0; }

/* Subtle bounce when position updates */
.ptt-train-icon.ptt-train-moving {
  animation: ptt-train-bounce .6s ease;
}

@keyframes ptt-train-bounce {
  0%,100% { filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
  50%      { filter: drop-shadow(0 6px 16px rgba(244,162,97,.6)); }
}

/* Train position pulse ring */
.ptt-train-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--ptt-train-size);
  height: var(--ptt-train-size);
  border-radius: 50%;
  border: 3px solid var(--ptt-accent);
  transform: translate(-50%,-50%) scale(1);
  opacity: 0;
  pointer-events: none;
}

.ptt-train-pulse.ptt-pulse-active {
  animation: ptt-ring-expand 1.5s ease-out;
}

@keyframes ptt-ring-expand {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(3.5); opacity: 0;  }
}

/* Smoke animation on SVG train */
.ptt-smoke { transition: opacity .4s ease; }

/* ── Stop markers ── */
.ptt-stop-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 8;
  cursor: pointer;
  text-align: center;
}

.ptt-stop-pin {
  width: 18px;
  height: 18px;
  background: var(--ptt-primary);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: transform .2s ease, background .2s ease;
}

.ptt-stop-marker:hover .ptt-stop-pin,
.ptt-stop-marker.ptt-stop-active .ptt-stop-pin {
  background: var(--ptt-accent);
  transform: rotate(-45deg) scale(1.3);
}

.ptt-stop-marker.ptt-stop-train-near .ptt-stop-pin {
  background: #4caf50;
  animation: ptt-stop-alert .8s ease infinite alternate;
}

@keyframes ptt-stop-alert {
  from { transform: rotate(-45deg) scale(1); }
  to   { transform: rotate(-45deg) scale(1.4); }
}

.ptt-stop-label {
  display: inline-block;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: .65rem;
  padding: 2px 5px;
  border-radius: 4px;
  margin-top: 4px;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.ptt-stop-badge {
  display: inline-block;
  background: var(--ptt-accent);
  color: #fff;
  font-size: .6rem;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 10px;
  margin-top: 2px;
  min-width: 28px;
  text-align: center;
}

/* ── Stop list / cards ── */
.ptt-stop-list {
  padding: 16px 18px;
  background: var(--ptt-surface-2);
  border-top: 1px solid var(--ptt-border);
}

.ptt-stop-list-heading {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--ptt-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ptt-stops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.ptt-stop-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ptt-surface);
  border: 1px solid var(--ptt-border);
  border-radius: 10px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}

.ptt-stop-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.ptt-stop-card.ptt-stop-arriving {
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76,175,80,.2);
  animation: ptt-card-pulse 1s ease infinite alternate;
}

@keyframes ptt-card-pulse {
  from { box-shadow: 0 0 0 3px rgba(76,175,80,.2); }
  to   { box-shadow: 0 0 0 6px rgba(76,175,80,.4); }
}

.ptt-stop-card.ptt-stop-user-here {
  background: #e8f5e9;
  border-color: #4caf50;
}

.ptt-stop-card-icon { font-size: 1.3rem; flex-shrink: 0; }

.ptt-stop-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ptt-stop-card-info strong { font-size: .9rem; }

.ptt-stop-distance-label {
  font-size: .75rem;
  color: var(--ptt-text-muted);
}

.ptt-stop-arrival-badge {
  font-size: .7rem;
  font-weight: bold;
  color: #fff;
  background: var(--ptt-accent-dark);
  padding: 2px 7px;
  border-radius: 20px;
  display: none;
}

.ptt-stop-card.ptt-stop-arriving .ptt-stop-arrival-badge {
  display: block;
}

/* ── Stop Status widget (compact) ── */
.ptt-stop-status {
  background: var(--ptt-primary);
  color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.ptt-stop-status-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: .95rem;
}

.ptt-stop-status.ptt-arriving {
  background: #2e7d32;
  animation: ptt-arriving-flash .6s ease infinite alternate;
}

@keyframes ptt-arriving-flash {
  from { background: #2e7d32; }
  to   { background: #4caf50; }
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ptt-stops-grid { grid-template-columns: 1fr 1fr; }
  .ptt-status-bar { font-size: .78rem; padding: 8px 12px; }
}

@media (max-width: 400px) {
  .ptt-stops-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ETA Display — v1.2.0
   ============================================================ */

/* ── Stop card ETA column ── */
.ptt-stop-eta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--ptt-surface-2, #f5f5f0);
  flex-shrink: 0;
  transition: background .3s ease, color .3s ease;
}

.ptt-stop-eta-label {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ptt-text, #2c2c2c);
  white-space: nowrap;
}

.ptt-stop-eta-sublabel {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ptt-text-muted, #6b6b6b);
  margin-top: 2px;
}

/* ETA state colours on the wrap */
.ptt-stop-card[data-eta-state="enroute"] .ptt-stop-eta-wrap  { background: #e8f5e9; }
.ptt-stop-card[data-eta-state="enroute"] .ptt-stop-eta-label { color: #2e7d32; }

.ptt-stop-card[data-eta-state="soon"]    .ptt-stop-eta-wrap  { background: #e8f5e9; }
.ptt-stop-card[data-eta-state="soon"]    .ptt-stop-eta-label { color: #388e3c; }

.ptt-stop-card[data-eta-state="imminent"] .ptt-stop-eta-wrap { background: #fff8e1; }
.ptt-stop-card[data-eta-state="imminent"] .ptt-stop-eta-label{ color: #f57f17; }

.ptt-stop-card[data-eta-state="arriving"] .ptt-stop-eta-wrap {
  background: #ffebee;
  animation: ptt-eta-arriving-pulse .8s ease-in-out infinite alternate;
}
.ptt-stop-card[data-eta-state="arriving"] .ptt-stop-eta-label { color: #c62828; }

@keyframes ptt-eta-arriving-pulse {
  from { background: #ffebee; transform: scale(1); }
  to   { background: #ffcdd2; transform: scale(1.04); }
}

/* ── Map pin badge ETA state ── */
.ptt-stop-badge[data-eta-state="enroute"]  { background: #4caf50; }
.ptt-stop-badge[data-eta-state="soon"]     { background: #66bb6a; }
.ptt-stop-badge[data-eta-state="imminent"] { background: #ffa000; }
.ptt-stop-badge[data-eta-state="arriving"] {
  background: #e53935;
  animation: ptt-badge-arriving .5s ease-in-out infinite alternate;
}

@keyframes ptt-badge-arriving {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}

/* ── ETA chip in nearest-stop status bar ── */
.ptt-eta-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: .8rem;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

.ptt-eta-chip[data-eta-state="enroute"],
.ptt-eta-chip[data-eta-state="soon"]     { background: rgba(76,175,80,.25); color: #1b5e20; }
.ptt-eta-chip[data-eta-state="imminent"] { background: rgba(255,160,0,.25);  color: #e65100; }
.ptt-eta-chip[data-eta-state="arriving"] {
  background: rgba(229,57,53,.2);
  color: #b71c1c;
  animation: ptt-chip-blink .7s ease infinite alternate;
}

@keyframes ptt-chip-blink {
  from { opacity: 1; }
  to   { opacity: .6; }
}

/* ── Compact stop-status widget ETA ── */
.ptt-stop-widget-eta {
  display: inline-block;
  margin-left: 10px;
  font-weight: 700;
  font-size: 1rem;
  vertical-align: middle;
  min-width: 60px;
  text-align: right;
}

.ptt-stop-status[data-eta-state="arriving"] { animation: ptt-arriving-flash .6s ease infinite alternate; }
.ptt-stop-status[data-eta-state="imminent"] .ptt-stop-widget-eta { color: #ffa000; }
.ptt-stop-status[data-eta-state="arriving"] .ptt-stop-widget-eta { color: #fff; }

/* ── Dark theme overrides ── */
.ptt-tracker-wrap[data-theme="dark"] .ptt-stop-card[data-eta-state="enroute"]  .ptt-stop-eta-wrap { background: rgba(76,175,80,.15); }
.ptt-tracker-wrap[data-theme="dark"] .ptt-stop-card[data-eta-state="soon"]     .ptt-stop-eta-wrap { background: rgba(76,175,80,.15); }
.ptt-tracker-wrap[data-theme="dark"] .ptt-stop-card[data-eta-state="imminent"] .ptt-stop-eta-wrap { background: rgba(255,160,0,.15); }
.ptt-tracker-wrap[data-theme="dark"] .ptt-stop-card[data-eta-state="arriving"] .ptt-stop-eta-wrap { background: rgba(229,57,53,.2); }

/* ============================================================
   Offline ETA State — v1.3.0
   When no conductor is on shift, ETAs are hidden and stops
   show a neutral offline indicator instead.
   ============================================================ */

/* Stop card offline state — neutral, no colour */
.ptt-stop-card[data-eta-state="offline"] .ptt-stop-eta-wrap {
  background: var(--ptt-surface-2, #f5f5f0);
}
.ptt-stop-card[data-eta-state="offline"] .ptt-stop-eta-label {
  color: var(--ptt-text-muted, #6b6b6b);
  font-size: .8rem;
  font-weight: 400;
}
.ptt-stop-card[data-eta-state="offline"] .ptt-stop-eta-sublabel {
  opacity: .4;
}

/* Map badge hides when offline */
.ptt-stop-badge[data-eta-state="offline"] {
  display: none;
}

/* Stop-status compact widget offline */
.ptt-stop-status[data-eta-state="offline"] {
  opacity: .65;
}
.ptt-stop-status[data-eta-state="offline"] .ptt-stop-widget-eta {
  display: none;
}

/* Dark theme offline */
.ptt-tracker-wrap[data-theme="dark"] .ptt-stop-card[data-eta-state="offline"] .ptt-stop-eta-wrap {
  background: rgba(255,255,255,.05);
}