.tracpro-detail-panel {
  margin: 18px 0;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(17,24,39,.72);
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.tracpro-detail-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.tracpro-detail-title {
  font-size:22px;
  font-weight:700;
}

.tracpro-sub {
  opacity:.62;
  font-size:12px;
  margin-top:4px;
}

.tracpro-status {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}

.tracpro-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}

.tracpro-status.moving .tracpro-dot {
  background:#22c55e;
  box-shadow:0 0 10px rgba(34,197,94,.7);
}

.tracpro-status.stopped .tracpro-dot {
  background:#f59e0b;
}

.tracpro-status.parked .tracpro-dot {
  background:#94a3b8;
}

.tracpro-status.offline .tracpro-dot {
  background:#ef4444;
}

.tracpro-ignition {
  font-size:11px;
  font-weight:700;
}

.tracpro-ignition.on {
  color:#22c55e;
}

.tracpro-ignition.off {
  opacity:.55;
}

.tracpro-metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.tracpro-metric {
  padding:15px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

.tracpro-metric span,
.tracpro-location span {
  display:block;
  font-size:11px;
  opacity:.55;
  margin-bottom:6px;
}

.tracpro-metric strong,
.tracpro-location strong {
  font-size:14px;
}

.tracpro-location {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.tracpro-location > div {
  padding:15px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

.tracpro-vehicle-row {
  cursor:pointer;
  transition:background .15s ease;
}

.tracpro-vehicle-row:hover {
  background:rgba(255,255,255,.045);
}

.tracpro-auto-stat {
  display:block;
  font-size:24px;
  margin-top:5px;
}

@media (max-width: 1000px) {
  .tracpro-metrics {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 600px) {
  .tracpro-metrics,
  .tracpro-location {
    grid-template-columns:1fr;
  }

  .tracpro-detail-header {
    align-items:flex-start;
    flex-direction:column;
  }
}