*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f4f7fb;color:#152033}body{min-height:100vh}.topbar{height:64px;background:#0f1f33;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;box-shadow:0 2px 10px rgba(15,31,51,.15)}.subbrand{font-size:12px;opacity:.7;margin-left:10px;text-transform:uppercase;letter-spacing:.12em}.top-actions{display:flex;gap:18px;align-items:center;font-size:13px}.top-actions a{color:#dce8f7;text-decoration:none}.page{padding:20px;max-width:1800px;margin:0 auto}.card{background:#fff;border:1px solid #e5ebf3;border-radius:14px;box-shadow:0 5px 20px rgba(29,55,90,.06)}.toolbar{padding:14px 16px;display:flex;align-items:end;gap:12px;flex-wrap:wrap}.toolbar label,.auth-card label,.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#52627a}.toolbar select,.toolbar input,.auth-card input,.form-grid input,.form-grid select,.form-grid textarea,textarea{border:1px solid #ccd6e4;border-radius:8px;padding:10px 11px;background:#fff;color:#152033;font:inherit}.custom-range{display:flex;gap:10px}.hidden{display:none!important}.toolbar-meta{margin-left:auto;display:flex;align-items:center;gap:14px;color:#65748a;font-size:12px}.health.ok{color:#178455}.health.bad{color:#c33b3b;font-weight:700}.btn{border:0;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer;background:#e9eef6;color:#24354d;text-decoration:none;display:inline-block}.btn.primary{background:#1464d2;color:#fff}.btn.small{padding:6px 9px;font-size:11px}.btn.danger{background:#fce8e8;color:#b12626}.stats-row{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:14px;margin:14px 0}.stat{padding:14px 16px;display:flex;justify-content:space-between;align-items:center}.stat span{font-size:12px;color:#6a7890}.stat strong{font-size:25px}.stat.danger strong{color:#cf3d3d}.stat.success strong{color:#1b985f}.stat.warning strong{color:#dc8a12}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{min-height:360px;overflow:hidden}.panel-head{padding:16px 18px 8px;display:flex;justify-content:space-between;align-items:start}.panel-head h2{font-size:16px;margin:0 0 4px}.panel-head p{font-size:12px;color:#7b8798;margin:0}.chart-panel{position:relative}.chart-wrap{height:280px;padding:4px 18px 18px}.table-wrap{overflow:auto;max-height:310px}table{width:100%;border-collapse:collapse;font-size:12px}thead th{position:sticky;top:0;background:#f8fafc;z-index:1;text-align:left;padding:10px 12px;color:#59687d;border-bottom:1px solid #e5ebf3;white-space:nowrap}tbody td{padding:10px 12px;border-bottom:1px solid #eef2f7;vertical-align:top}tbody tr:hover{background:#fbfdff}.veh-name{font-weight:700}.muted{color:#7a8799;font-size:12px}.pill{display:inline-block;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase}.pill.info{background:#e7f0ff;color:#315f9c}.pill.warning{background:#fff3d8;color:#936205}.pill.critical{background:#fde8e8;color:#b72f2f}.pill.open{background:#fff3d8;color:#936205}.pill.resolved{background:#e7f7ef;color:#17734a}.actions{display:flex;gap:5px;flex-wrap:wrap}.customer{max-width:180px}.new-alert{position:absolute;left:18px;right:18px;bottom:18px;background:#fff3d8;color:#805400;border:1px solid #f0d48d;border-radius:8px;padding:9px 10px;font-size:12px;font-weight:700}.modal{position:fixed;inset:0;background:rgba(15,26,43,.58);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.modal-card{background:#fff;border-radius:14px;width:min(560px,96vw);max-height:90vh;overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,.28)}.modal-card.wide{width:min(1200px,96vw)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #e8edf4}.modal-head h2{font-size:16px;margin:0}.icon-btn{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#607087}#map{height:70vh;min-height:440px}.comment-list{padding:10px 18px;max-height:280px;overflow:auto}.comment-item{border-bottom:1px solid #edf1f6;padding:9px 0}.comment-item strong{font-size:12px}.comment-item p{margin:5px 0 0;white-space:pre-wrap;font-size:13px}.comment-item time{font-size:10px;color:#8a96a7;margin-left:8px}#commentContext{padding:12px 18px 0}#commentForm{padding:12px 18px 18px;display:flex;flex-direction:column;gap:10px}.auth-body{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f1f33,#1d4b7b);padding:20px}.auth-card{width:min(420px,95vw);background:#fff;border-radius:16px;padding:28px;box-shadow:0 24px 80px rgba(0,0,0,.26)}.auth-card h1{margin:8px 0 6px;font-size:24px}.auth-card form{display:flex;flex-direction:column;gap:14px;margin-top:20px}.brand-mark{width:44px;height:44px;border-radius:12px;background:#1464d2;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}.alert{padding:10px 12px;border-radius:8px;margin:12px 0;font-size:12px}.alert.error{background:#fde8e8;color:#a42626}.alert.success{background:#e6f7ee;color:#157347}.admin-page{max-width:1300px}.admin-section{padding:18px;margin-bottom:16px}.admin-section h2{margin:0 0 5px;font-size:18px}.admin-section .desc{margin:0 0 16px;color:#718096;font-size:12px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px}.form-grid .span2{grid-column:span 2}.form-grid .span3{grid-column:span 3}.config-table input,.config-table select{width:100%;padding:7px 8px;border:1px solid #ccd6e4;border-radius:7px}.check{width:auto!important}.template-box{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px}.template-box textarea{min-height:140px;font-family:Consolas,monospace;font-size:12px}.savebar{position:sticky;bottom:12px;display:flex;justify-content:flex-end;padding:10px;background:rgba(244,247,251,.92);backdrop-filter:blur(5px)}@media(max-width:1050px){.dashboard-grid{grid-template-columns:1fr}.stats-row{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr 1fr}}@media(max-width:700px){.topbar{height:auto;padding:14px;align-items:flex-start;gap:12px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.page{padding:10px}.toolbar-meta{margin-left:0;width:100%;flex-wrap:wrap}.stats-row{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.form-grid .span2,.form-grid .span3{grid-column:span 1}.custom-range{width:100%;flex-direction:column}.modal{padding:5px}#map{height:75vh}}

/* Live vehicle markers: car icon + always-visible vehicle name */
.vehicle-div-icon{background:transparent!important;border:0!important;overflow:visible!important}
.vehicle-map-marker{position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;overflow:visible;color:#64748b;filter:drop-shadow(0 2px 2px rgba(15,23,42,.25))}
.vehicle-map-marker.status-moving{color:#15803d}
.vehicle-map-marker.status-offline{color:#dc2626}
.vehicle-map-marker.status-offline-warning{color:#f59e0b}
.vehicle-map-marker.status-offline-critical{color:#dc2626}
.vehicle-map-marker.status-stopped{color:#64748b}
.vehicle-car-wrap{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 7px rgba(15,23,42,.18)}
.vehicle-car-svg{width:24px;height:24px;display:block}
.vehicle-map-label{position:absolute;left:39px;top:50%;transform:translateY(-50%);white-space:nowrap;background:rgba(255,255,255,.96);color:#152033;border:1px solid #d7e0ec;border-radius:6px;padding:3px 6px;font-size:11px;font-weight:800;line-height:1.2;box-shadow:0 2px 7px rgba(15,23,42,.16);pointer-events:none}
.vehicle-map-label:before{content:"";position:absolute;right:100%;top:50%;margin-top:-4px;border-width:4px;border-style:solid;border-color:transparent #d7e0ec transparent transparent}
.vehicle-map-label:after{content:"";position:absolute;right:100%;top:50%;margin-top:-3px;border-width:3px;border-style:solid;border-color:transparent rgba(255,255,255,.96) transparent transparent}
.map-head-title{display:flex;align-items:center;gap:12px;min-width:0}
.map-updated{font-size:11px;color:#7a8799;font-weight:500;white-space:nowrap}
.leaflet-marker-icon.vehicle-div-icon{z-index:400!important}

/* v5 language selector */
.language-form{margin:0;display:inline-flex;align-items:center}.language-form label{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;font-weight:600;color:inherit}.language-form select{min-width:112px;padding:6px 26px 6px 9px;border:1px solid rgba(255,255,255,.28);border-radius:7px;background:#fff;color:#223047;font-size:12px}.auth-language{display:flex;justify-content:flex-end;margin-bottom:12px}.auth-language label{color:#64748b}.auth-language select{border-color:#d9e1ec}.top-actions .language-form{margin-left:4px}@media(max-width:760px){.top-actions{gap:8px;flex-wrap:wrap}.language-form select{min-width:100px}}

/* v5.2 live-map transition alerts */
.checkbox-setting{justify-content:flex-start!important;align-items:flex-start}.checkbox-setting>span{font-weight:700}.checkbox-setting>.check{margin-top:4px;transform:scale(1.15)}.checkbox-setting small{font-weight:400;color:#7a8799;line-height:1.35}

.vehicle-div-icon.marker-enter-alert .vehicle-map-marker{animation:gpsmon-marker-pop-bounce 2.6s cubic-bezier(.2,.85,.25,1) both;z-index:9999}
.vehicle-div-icon.marker-enter-alert .vehicle-car-wrap{animation:gpsmon-marker-halo 2.6s ease-out both}
.vehicle-div-icon.marker-exit-alert .vehicle-map-marker{animation:gpsmon-marker-zoom-fade 1.85s cubic-bezier(.22,.72,.25,1) both;z-index:9998;pointer-events:none}
@keyframes gpsmon-marker-pop-bounce{
  0%{transform:scale(.18);opacity:.15}
  18%{transform:scale(2.05);opacity:1}
  34%{transform:scale(.78)}
  48%{transform:scale(1.58)}
  62%{transform:scale(.9)}
  75%{transform:scale(1.28)}
  88%{transform:scale(.97)}
  100%{transform:scale(1);opacity:1}
}
@keyframes gpsmon-marker-halo{
  0%{box-shadow:0 0 0 0 rgba(20,100,210,.75),0 2px 7px rgba(15,23,42,.18)}
  30%{box-shadow:0 0 0 22px rgba(20,100,210,.08),0 0 28px 10px rgba(20,100,210,.4)}
  65%{box-shadow:0 0 0 12px rgba(20,100,210,.04),0 0 20px 5px rgba(20,100,210,.22)}
  100%{box-shadow:0 2px 7px rgba(15,23,42,.18)}
}
@keyframes gpsmon-marker-zoom-fade{
  0%{transform:scale(1);opacity:1;filter:blur(0)}
  24%{transform:scale(2);opacity:1;filter:blur(0)}
  48%{transform:scale(1.55);opacity:.9;filter:blur(0)}
  72%{transform:scale(.75);opacity:.52;filter:blur(.4px)}
  100%{transform:scale(.12);opacity:0;filter:blur(2px)}
}

.modal-card.wide{position:relative}
.map-status-alert{position:absolute;z-index:1200;left:50%;top:70px;transform:translate(-50%,-18px) scale(.88);width:min(720px,calc(100% - 36px));display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:12px;background:rgba(15,31,51,.96);color:#fff;border:2px solid rgba(255,255,255,.7);box-shadow:0 18px 50px rgba(15,23,42,.42);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .25s cubic-bezier(.2,.9,.3,1)}
.map-status-alert.show{opacity:1;transform:translate(-50%,0) scale(1);animation:gpsmon-alert-pulse .72s ease-out 1}
.map-status-alert.status-offline{background:rgba(166,27,27,.97)}
.map-status-alert.status-moving{background:rgba(17,112,72,.97)}
.map-status-alert.status-stopped{background:rgba(63,78,98,.97)}
.map-alert-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#b42318;font-size:25px;font-weight:900;box-shadow:0 0 0 6px rgba(255,255,255,.14)}
.map-status-alert.status-moving .map-alert-icon{color:#117048}.map-status-alert.status-stopped .map-alert-icon{color:#3f4e62}
.map-alert-title{display:block;font-size:14px;margin-bottom:5px;text-transform:uppercase;letter-spacing:.045em}
.map-alert-row{font-size:13px;line-height:1.45;margin-top:2px}.map-alert-more{font-size:12px;font-weight:800;margin-top:4px;opacity:.85}.transition-arrow{font-size:17px;font-weight:900;margin:0 3px}
@keyframes gpsmon-alert-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7),0 18px 50px rgba(15,23,42,.42)}45%{box-shadow:0 0 0 18px rgba(255,255,255,.08),0 24px 65px rgba(15,23,42,.55)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0),0 18px 50px rgba(15,23,42,.42)}}
@media(max-width:700px){.map-status-alert{top:66px;width:calc(100% - 18px);grid-template-columns:34px 1fr;padding:11px 12px}.map-alert-icon{width:31px;height:31px;font-size:20px}.map-alert-row{font-size:12px}}

/* v5.3 moving vehicle trail + live speed label */
.vehicle-map-marker.status-moving .vehicle-map-label{border-color:#b9dec8}
.vehicle-map-marker.status-moving .vehicle-map-speed{font-weight:900;color:#15803d;margin-left:2px}
.leaflet-overlay-pane path{transition:opacity .25s ease}


/* v6 HERE speeding */
.clickable-stat{width:100%;font:inherit;text-align:left;cursor:pointer;border:1px solid #e5ebf3}
.clickable-stat:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(29,55,90,.11)}
.stat.speeding strong{color:#c62828}.stat.speeding span{color:#8f3030}
.speed-excess{font-weight:900;color:#c62828}
.vehicle-map-marker.status-speeding{color:#c62828}
.vehicle-map-marker.status-speeding .vehicle-map-label{border-color:#efb2b2;background:rgba(255,248,248,.97)}
.vehicle-map-marker.status-speeding .vehicle-map-speed{font-weight:900;color:#b91c1c;margin-left:2px}
.map-status-alert.status-speeding{background:rgba(139,24,24,.98)}
.map-status-alert.status-speeding .map-alert-icon{color:#9f1d1d}
.speeding-panel{grid-column:1 / -1}
@media(max-width:1200px){.stats-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.stats-row{grid-template-columns:1fr 1fr}.speeding-panel{grid-column:auto}}