
/* PhazTrack professional trip playback */
body[data-product="phaztrack"] .pt-playback-shell{display:grid;gap:14px}
body[data-product="phaztrack"] .pt-playback-header{padding:16px}
body[data-product="phaztrack"] .pt-playback-header .section-title{align-items:flex-start;gap:12px}
body[data-product="phaztrack"] .pt-playback-header .section-title p{margin:5px 0 0;color:#68798a;line-height:1.45;font-size:.78rem}
body[data-product="phaztrack"] .pt-playback-filters{display:grid;grid-template-columns:minmax(180px,1.15fr) minmax(130px,.7fr) minmax(180px,1fr) minmax(180px,1fr) auto;gap:10px;align-items:end;margin-top:14px}
body[data-product="phaztrack"] .pt-playback-filters label,
body[data-product="phaztrack"] .pt-playback-map-head label,
body[data-product="phaztrack"] .pt-playback-options label{display:grid;gap:5px;color:#607080;font-size:.67rem;font-weight:850}
body[data-product="phaztrack"] .pt-playback-filters select,
body[data-product="phaztrack"] .pt-playback-filters input,
body[data-product="phaztrack"] .pt-playback-map-head select,
body[data-product="phaztrack"] .pt-playback-options select{min-height:42px;border:1px solid #d8e1e8;border-radius:9px;background:#fff;color:#223445;padding:7px 9px;font:inherit}
body[data-product="phaztrack"] .pt-primary{border:0!important;background:#c9152a!important;color:#fff!important;font-weight:900!important}
body[data-product="phaztrack"] .pt-playback-filters button{min-height:42px;border-radius:9px;padding:0 16px;cursor:pointer}
body[data-product="phaztrack"] .pt-playback-filters button:disabled{opacity:.55;cursor:wait}
body[data-product="phaztrack"] .pt-playback-status{margin-top:12px;padding:10px 12px;border-radius:10px;background:#eef3f7;color:#425568;font-size:.72rem;line-height:1.4}
body[data-product="phaztrack"] .pt-playback-status[data-kind="success"]{background:#edf8f1;color:#17633a}
body[data-product="phaztrack"] .pt-playback-status[data-kind="warning"]{background:#fff7e8;color:#805718}
body[data-product="phaztrack"] .pt-playback-status[data-kind="error"]{background:#fff0f1;color:#8d1c28}
body[data-product="phaztrack"] .pt-playback-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
body[data-product="phaztrack"] .pt-playback-kpi{padding:12px 13px;min-height:78px;display:grid;align-content:center;gap:5px}
body[data-product="phaztrack"] .pt-playback-kpi span{font-size:.65rem;color:#6f7e8c;font-weight:800;text-transform:uppercase;letter-spacing:.035em}
body[data-product="phaztrack"] .pt-playback-kpi strong{font-size:1.1rem;color:#1e3142}
body[data-product="phaztrack"] .pt-playback-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.6fr);gap:14px;min-height:620px}
body[data-product="phaztrack"] .pt-playback-map-card{padding:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(380px,1fr) auto}
body[data-product="phaztrack"] .pt-playback-map-head{display:flex;align-items:end;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid #e5eaee;background:#fff}
body[data-product="phaztrack"] .pt-playback-map-head label{min-width:min(440px,60%)}
body[data-product="phaztrack"] .pt-map-modes{display:flex;gap:5px;flex-wrap:wrap}
body[data-product="phaztrack"] .pt-map-modes button{min-height:36px;border:1px solid #d7e0e7;border-radius:8px;background:#f7f9fb;color:#34485a;font-size:.65rem;font-weight:850;padding:0 10px;cursor:pointer}
body[data-product="phaztrack"] .pt-map-modes button.active{background:#172635;color:#fff;border-color:#172635}
body[data-product="phaztrack"] #ptPlaybackMap{min-height:420px;width:100%;background:#dfe7ed}
body[data-product="phaztrack"] .pt-playback-controls{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;gap:10px;align-items:center;padding:11px 13px;border-top:1px solid #dde5ea;background:#fff}
body[data-product="phaztrack"] .pt-playback-buttons{display:flex;gap:6px}
body[data-product="phaztrack"] .pt-playback-buttons button{min-width:42px;height:38px;border:1px solid #d4dde4;border-radius:8px;background:#f8fafb;color:#2d4154;font-weight:900;cursor:pointer}
body[data-product="phaztrack"] #ptPlaybackPlay{min-width:68px}
body[data-product="phaztrack"] #ptPlaybackSlider{width:100%}
body[data-product="phaztrack"] .pt-playback-options{display:flex;align-items:center;gap:10px}
body[data-product="phaztrack"] .pt-playback-options label{display:flex;align-items:center;gap:6px;white-space:nowrap}
body[data-product="phaztrack"] .pt-playback-options select{min-height:36px}
body[data-product="phaztrack"] .pt-follow{min-height:36px}
body[data-product="phaztrack"] .pt-playback-moment{grid-column:1/-1;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:2px;color:#526475;font-size:.7rem}
body[data-product="phaztrack"] .pt-playback-moment strong{color:#172635}
body[data-product="phaztrack"] .pt-playback-side{padding:14px;overflow:auto}
body[data-product="phaztrack"] .pt-playback-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body[data-product="phaztrack"] .pt-playback-details>div{padding:9px;border:1px solid #e3e8ed;border-radius:9px;background:#f8fafb;display:grid;gap:3px}
body[data-product="phaztrack"] .pt-playback-details>div.wide{grid-column:1/-1}
body[data-product="phaztrack"] .pt-playback-details span{font-size:.61rem;text-transform:uppercase;letter-spacing:.03em;color:#788795;font-weight:850}
body[data-product="phaztrack"] .pt-playback-details strong{font-size:.72rem;color:#233648;overflow-wrap:anywhere}
body[data-product="phaztrack"] .pt-playback-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 16px}
body[data-product="phaztrack"] .pt-playback-actions button{min-height:39px;border:1px solid #d6dfe6;border-radius:8px;background:#fff;color:#25394c;font-weight:850;cursor:pointer}
body[data-product="phaztrack"] .pt-events-title{margin-top:4px}
body[data-product="phaztrack"] .pt-playback-events{display:grid;gap:7px}
body[data-product="phaztrack"] .pt-playback-event{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:9px;border:1px solid #e2e8ed;border-radius:9px;background:#fff}
body[data-product="phaztrack"] .pt-playback-event div{min-width:0;display:grid;gap:3px}
body[data-product="phaztrack"] .pt-playback-event strong{font-size:.7rem;color:#24384a;text-transform:capitalize}
body[data-product="phaztrack"] .pt-playback-event small{font-size:.62rem;line-height:1.35;color:#6d7d8c}

@media(max-width:1100px){
  body[data-product="phaztrack"] .pt-playback-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-product="phaztrack"] .pt-playback-filters button{grid-column:1/-1}
  body[data-product="phaztrack"] .pt-playback-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-product="phaztrack"] .pt-playback-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  body[data-product="phaztrack"] #customerApp>.main>.view[data-view="history"].active{overflow:auto!important;padding:8px!important}
  body[data-product="phaztrack"] .pt-playback-shell{padding-bottom:12px}
  body[data-product="phaztrack"] .pt-playback-header{padding:12px}
  body[data-product="phaztrack"] .pt-playback-header .section-title{display:grid}
  body[data-product="phaztrack"] .pt-playback-filters{grid-template-columns:1fr 1fr;gap:8px}
  body[data-product="phaztrack"] .pt-playback-filters label:first-child{grid-column:1/-1}
  body[data-product="phaztrack"] .pt-playback-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body[data-product="phaztrack"] .pt-playback-kpi{min-height:68px;padding:9px 10px}
  body[data-product="phaztrack"] .pt-playback-grid{min-height:0;gap:9px}
  body[data-product="phaztrack"] .pt-playback-map-card{grid-template-rows:auto 56dvh auto}
  body[data-product="phaztrack"] .pt-playback-map-head{display:grid;gap:8px}
  body[data-product="phaztrack"] .pt-playback-map-head label{min-width:0;width:100%}
  body[data-product="phaztrack"] .pt-map-modes{overflow-x:auto;flex-wrap:nowrap}
  body[data-product="phaztrack"] #ptPlaybackMap{min-height:0;height:56dvh}
  body[data-product="phaztrack"] .pt-playback-controls{position:sticky;bottom:0;z-index:800;grid-template-columns:1fr;gap:7px;padding:9px;background:rgba(255,255,255,.98)}
  body[data-product="phaztrack"] .pt-playback-buttons{justify-content:center}
  body[data-product="phaztrack"] .pt-playback-options{justify-content:space-between}
  body[data-product="phaztrack"] .pt-playback-moment{gap:8px;font-size:.64rem}
  body[data-product="phaztrack"] .pt-playback-side{padding:12px}
}
@media print{
  body[data-product="phaztrack"] #customerApp>.side,
  body[data-product="phaztrack"] #pt3MobileHeader,
  body[data-product="phaztrack"] .mobilebar,
  body[data-product="phaztrack"] .pt-playback-filters,
  body[data-product="phaztrack"] .pt-playback-controls,
  body[data-product="phaztrack"] .pt-playback-actions,
  body[data-product="phaztrack"] .pt-map-modes{display:none!important}
  body[data-product="phaztrack"] #customerApp>.main{position:static!important}
  body[data-product="phaztrack"] #customerApp>.main>.view{display:none!important}
  body[data-product="phaztrack"] #customerApp>.main>.view[data-view="history"]{display:block!important;position:static!important;padding:0!important}
  body[data-product="phaztrack"] .pt-playback-grid{grid-template-columns:1fr!important}
  body[data-product="phaztrack"] #ptPlaybackMap{height:520px!important}
}


/* Visible animated vehicle marker for trip playback */
body[data-product="phaztrack"] .pt-playback-vehicle-wrapper{
  background:transparent!important;border:0!important;overflow:visible!important;
}
body[data-product="phaztrack"] .pt-playback-vehicle-pin{
  position:relative;width:48px;height:54px;display:block;filter:drop-shadow(0 6px 10px rgba(4,14,24,.28));
}
body[data-product="phaztrack"] .pt-playback-vehicle-bubble{
  position:absolute;left:4px;top:1px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#172635;border:4px solid #d7193f;box-sizing:border-box;
}
body[data-product="phaztrack"] .pt-playback-vehicle-bubble svg{
  width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(var(--pt-heading));transform-origin:50% 50%;
}
body[data-product="phaztrack"] .pt-playback-vehicle-pointer{
  position:absolute;left:18px;top:34px;width:12px;height:12px;background:#172635;
  transform:rotate(45deg);border-right:3px solid #d7193f;border-bottom:3px solid #d7193f;box-sizing:border-box;
}
body[data-product="phaztrack"] .leaflet-tooltip.pt-playback-label{
  font-weight:850;
}
