/* Professional FleetFlow dashboard polish */
#dashboardView{--dash-border:#e5eaf1;--dash-muted:#64748b;--dash-text:#0f172a}
#dashboardView .kpis{gap:16px}
#dashboardView .kpi{min-height:126px;padding:20px;border-color:var(--dash-border);border-radius:16px;background:#fff;box-shadow:0 4px 18px rgba(15,23,42,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#dashboardView .kpi:hover{transform:translateY(-2px);border-color:#cbd5e1;box-shadow:0 10px 28px rgba(15,23,42,.09)}
#dashboardView .kpi:after{width:72px;height:72px;right:-24px;top:-24px;background:rgba(37,99,235,.055)}
#dashboardView .kpiTop{font-size:11px;letter-spacing:.075em;color:var(--dash-muted)}
#dashboardView .kpiNum{margin-top:18px;font-size:32px;font-weight:800;color:var(--dash-text)}
#dashboardView .panel{border-color:var(--dash-border);border-radius:16px;box-shadow:0 4px 20px rgba(15,23,42,.055);overflow:hidden}
#dashboardView .ph{min-height:70px;padding:17px 20px;background:#fff;border-bottom:1px solid #edf1f5}
#dashboardView .ph h2{font-size:16px;font-weight:750}
#dashboardView .ph .sub{font-size:12px;color:var(--dash-muted)}
#dashboardView .btn.light{min-height:38px;padding:8px 13px;border-radius:9px;font-weight:650}
#dashboardView .map{border-radius:0!important}
#dashboardView .activity{padding:6px 14px 10px;background:#fff}
#dashboardView .activity>div{padding:14px 10px;border-radius:8px}
#dashboardView .sectionPanel{margin-top:20px}
#dashboardView .sectionPanel .ph{min-height:64px}
#dashboardView .tableWrap{padding:4px 14px 14px;background:#fff}
#dashboardView .dataTable{border-spacing:0 6px}
#dashboardView .dataTable thead th{padding:10px 12px;font-size:10px;color:#718096}
#dashboardView .dataTable tbody tr{background:#f8fafc;transition:background .15s ease,transform .15s ease}
#dashboardView .dataTable tbody tr:hover{background:#f1f5f9}
#dashboardView .dataTable tbody td{padding:14px 12px;color:#334155}
@media(max-width:1200px){#dashboardView .kpi{min-height:112px}#dashboardView .kpiNum{font-size:28px}}

/* Recent activity typography and status treatment */
#dashboardView #activityList .liveActivity{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr);gap:12px;align-items:start;margin:0;padding:15px 10px;border-bottom:1px solid #eef2f6;background:#fff}
#dashboardView #activityList .liveActivity:last-child{border-bottom:0}
#dashboardView #activityList .liveActivity>div:last-child{display:flex;min-width:0;flex-direction:column;gap:4px}
#dashboardView #activityList .liveActivity b{display:block;font-size:13.5px;line-height:1.35;font-weight:750;letter-spacing:-.01em;color:#172033}
#dashboardView #activityList .liveActivity span{display:block;font-size:12.5px;line-height:1.45;font-weight:500;color:#526070;white-space:normal;overflow-wrap:anywhere}
#dashboardView #activityList .liveActivity small{display:block;margin-top:2px;font-size:10.5px;line-height:1.3;font-weight:650;letter-spacing:.02em;color:#94a3b8}
#dashboardView #activityList .actdot{width:9px;height:9px;margin-top:4px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 4px #f1f5f9}
#dashboardView #activityList .liveActivity.emergency .actdot{background:#dc2626;box-shadow:0 0 0 4px #fee2e2}
#dashboardView #activityList .liveActivity.pod .actdot{background:#16a34a;box-shadow:0 0 0 4px #dcfce7}
#dashboardView #activityList .liveActivity.driver .actdot{background:#2563eb;box-shadow:0 0 0 4px #dbeafe}
#dashboardView #activityList .liveActivity.vehicle .actdot{background:#d97706;box-shadow:0 0 0 4px #fef3c7}
#dashboardView #activityList .liveActivity:hover{background:#f8fafc}


/* Keep the five main dashboard totals fitted to the available width */
#dashboardView .kpis{width:100%;min-width:0;grid-template-columns:repeat(5,minmax(0,1fr))}
#dashboardView .kpi{min-width:0}
@media(max-width:1100px){#dashboardView .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){#dashboardView .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){#dashboardView .kpis{grid-template-columns:1fr}}


/* Live on-call driver dashboard panel */
#dashboardView .dashboardOnCallPanel{margin:18px 0 20px;border-color:#fecaca;background:linear-gradient(135deg,#fff 0%,#fff8f8 100%)}
#dashboardView .dashboardOnCallPanel .ph{border-bottom-color:#fee2e2}
.dashboardOnCallCount{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:#fff1f2;color:#b91c1c;font-size:11px;font-weight:850;letter-spacing:.04em}
.dashboardOnCallList{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:10px;padding:14px;background:transparent}
.dashboardOnCallDriver{display:grid;grid-template-columns:auto minmax(120px,1.25fr) minmax(130px,1fr) auto auto;gap:12px;align-items:center;width:100%;min-width:0;padding:13px 14px;border:1px solid #fee2e2;border-radius:13px;background:#fff;color:#172033;text-align:left;cursor:pointer;box-shadow:0 4px 14px rgba(127,29,29,.055)}
.dashboardOnCallDriver:hover{border-color:#fca5a5;box-shadow:0 8px 22px rgba(127,29,29,.1);transform:translateY(-1px)}
.dashboardOnCallLight{width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 5px #fee2e2}
.dashboardOnCallIdentity,.dashboardOnCallVehicle{display:flex;min-width:0;flex-direction:column;gap:3px}
.dashboardOnCallIdentity strong,.dashboardOnCallVehicle strong{overflow:hidden;color:#172033;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.dashboardOnCallIdentity small{color:#64748b;font-size:11px}
.dashboardOnCallVehicle small{color:#94a3b8;font-size:9px;font-weight:800;letter-spacing:.08em}
.dashboardOnCallStatus{padding:6px 9px;border-radius:999px;background:#f8fafc;color:#475569;font-size:10px;font-weight:750;white-space:nowrap}
.dashboardOnCallArrow{color:#b91c1c;font-size:24px;line-height:1}
.dashboardOnCallEmpty{display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px dashed #fecaca;border-radius:13px;background:rgba(255,255,255,.72)}
.dashboardOnCallEmpty>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ecfdf5;color:#15803d;font-weight:900}
.dashboardOnCallEmpty div{display:flex;flex-direction:column;gap:3px}.dashboardOnCallEmpty strong{font-size:13px;color:#334155}.dashboardOnCallEmpty small{font-size:11px;color:#64748b}
@media(max-width:720px){.dashboardOnCallDriver{grid-template-columns:auto minmax(0,1fr) auto}.dashboardOnCallVehicle,.dashboardOnCallStatus{display:none}.dashboardOnCallList{grid-template-columns:1fr}}

.dashboardOnCallArrow{border:0;background:transparent;cursor:pointer}
.dashboardOnCallLocation{grid-column:2/-1;display:flex;align-items:center;gap:9px;min-width:0;padding:9px 11px;border-radius:10px;background:#f8fafc;color:#334155;text-decoration:none}
.dashboardOnCallLocation>b{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:#e2e8f0;color:#475569}
.dashboardOnCallLocation>span{display:flex;min-width:0;flex-direction:column;gap:2px}.dashboardOnCallLocation small{font-size:8px;font-weight:850;letter-spacing:.08em;color:#94a3b8}.dashboardOnCallLocation strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.dashboardOnCallLocation.live{background:#ecfdf5;color:#166534}.dashboardOnCallLocation.live>b{background:#bbf7d0;color:#15803d}.dashboardOnCallLocation.live small{color:#16a34a}
.dashboardOnCallLocation.stale{background:#fff7ed;color:#9a3412}.dashboardOnCallLocation.stale>b{background:#fed7aa;color:#c2410c}.dashboardOnCallLocation.waiting{color:#64748b}
.dashboardOnCallLocation:hover{filter:brightness(.98)}

.dashboardOnCallPlace{grid-column:2/-1;display:flex;min-width:0;flex-direction:column;gap:2px;padding:8px 10px;border-radius:9px;background:#f8fafc;color:#334155}.dashboardOnCallPlace small{font-size:8px;font-weight:850;letter-spacing:.08em;color:#94a3b8}.dashboardOnCallPlace strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.dashboardOnCallPlace.waiting{color:#64748b}

/* Compact on-call dashboard panel */
#dashboardView .dashboardOnCallPanel{margin:12px 0 14px}
#dashboardView .dashboardOnCallPanel .ph{min-height:52px;padding:10px 14px}
#dashboardView .dashboardOnCallPanel .ph h2{font-size:14px}
#dashboardView .dashboardOnCallPanel .ph .sub{font-size:10px}
.dashboardOnCallCount{padding:5px 8px;font-size:9px}
.dashboardOnCallList{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:7px;padding:9px}
.dashboardOnCallDriver{grid-template-columns:auto minmax(95px,1.15fr) minmax(105px,1fr) auto auto;gap:8px;padding:8px 10px;border-radius:10px}
.dashboardOnCallLight{width:7px;height:7px;box-shadow:0 0 0 3px #fee2e2}
.dashboardOnCallIdentity strong,.dashboardOnCallVehicle strong{font-size:11px}
.dashboardOnCallIdentity small{font-size:9px}
.dashboardOnCallVehicle small{font-size:7px}
.dashboardOnCallStatus{padding:4px 6px;font-size:8px}
.dashboardOnCallArrow{font-size:18px}
.dashboardOnCallPlace{padding:5px 7px;border-radius:7px}
.dashboardOnCallPlace small{font-size:7px}
.dashboardOnCallPlace strong{font-size:9px}
.dashboardOnCallEmpty{padding:10px 12px}
.dashboardOnCallEmpty>span{width:27px;height:27px}
.dashboardOnCallEmpty strong{font-size:11px}
.dashboardOnCallEmpty small{font-size:9px}
@media(max-width:720px){.dashboardOnCallDriver{grid-template-columns:auto minmax(0,1fr) auto;padding:8px 9px}.dashboardOnCallList{padding:8px}}

/* Square on-call driver tile columns */
.dashboardOnCallList{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,190px));align-items:start;justify-content:start;gap:9px}
.dashboardOnCallDriver{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:7px;aspect-ratio:1/1;width:100%;min-height:0;padding:13px 12px 11px}
.dashboardOnCallLight{position:absolute;top:12px;right:12px}
.dashboardOnCallIdentity{padding-right:18px;gap:2px}
.dashboardOnCallIdentity strong{font-size:12px}
.dashboardOnCallIdentity small{font-size:9px}
.dashboardOnCallVehicle{gap:2px;padding-top:7px;border-top:1px solid #f1f5f9}
.dashboardOnCallVehicle strong{font-size:10px;white-space:normal}
.dashboardOnCallStatus{align-self:flex-start;padding:4px 7px}
.dashboardOnCallPlace{grid-column:auto;margin-top:auto;padding:6px 7px}
.dashboardOnCallPlace strong{white-space:normal;line-height:1.25}
.dashboardOnCallArrow{position:absolute;right:8px;bottom:7px}
@media(max-width:720px){.dashboardOnCallList{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.dashboardOnCallDriver{display:flex;aspect-ratio:1/1;padding:11px 10px 9px}.dashboardOnCallVehicle,.dashboardOnCallStatus{display:flex}}
@media(max-width:390px){.dashboardOnCallList{grid-template-columns:1fr}.dashboardOnCallDriver{aspect-ratio:auto;min-height:150px}}

/* Colour treatment for square on-call cards */
.dashboardOnCallDriver{border-color:#fecaca;background:linear-gradient(155deg,#fff 0%,#fff7f7 58%,#fff1f2 100%);box-shadow:inset 0 3px 0 #ef4444,0 5px 16px rgba(190,24,93,.09)}
.dashboardOnCallDriver:hover{border-color:#fb7185;box-shadow:inset 0 3px 0 #e11d48,0 9px 23px rgba(190,24,93,.15)}
.dashboardOnCallIdentity strong{color:#881337}
.dashboardOnCallIdentity small{color:#9f1239}
.dashboardOnCallVehicle{margin:0 -3px;padding:7px 7px 6px;border:1px solid #ddd6fe;border-radius:8px;background:#f5f3ff}
.dashboardOnCallVehicle small{color:#7c3aed}
.dashboardOnCallVehicle strong{color:#4c1d95}
.dashboardOnCallStatus{border:1px solid #bbf7d0;background:#dcfce7;color:#166534}
.dashboardOnCallPlace{border:1px solid #bae6fd;background:#f0f9ff;color:#075985}
.dashboardOnCallPlace small{color:#0284c7}
.dashboardOnCallPlace.waiting{border-color:#fde68a;background:#fffbeb;color:#92400e}
.dashboardOnCallLight{background:#f43f5e;box-shadow:0 0 0 4px #ffe4e6,0 0 12px rgba(244,63,94,.5)}
.dashboardOnCallArrow{color:#e11d48}

.dashboardOnCallStatus.emergency{border-color:#fecaca;background:#fee2e2;color:#b91c1c;box-shadow:0 0 0 2px rgba(239,68,68,.08)}

.dashboardOnCallJobRef{display:flex;flex-direction:column;gap:1px;align-items:flex-start;width:100%;padding:5px 7px;border:1px solid #fecaca;border-radius:7px;background:#fff1f2;color:#9f1239;text-align:left;cursor:pointer}
.dashboardOnCallJobRef:hover{border-color:#fb7185;background:#ffe4e6}
.dashboardOnCallJobRef small{font-size:7px;font-weight:850;letter-spacing:.08em;color:#e11d48}
.dashboardOnCallJobRef strong{max-width:100%;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.dashboardOnCallDriver:has(.dashboardOnCallJobRef){aspect-ratio:auto;min-height:190px}

.dashboardOnCallJobRef{gap:6px}
.dashboardOnCallJobRef>span{display:flex;min-width:0;flex-direction:column;gap:1px;width:100%}
.dashboardOnCallEta{padding-top:5px;border-top:1px solid #fecdd3}
.dashboardOnCallEta small{color:#c2410c}
.dashboardOnCallEta strong{color:#7c2d12}
.dashboardOnCallDriver:has(.dashboardOnCallJobRef){min-height:215px}

.dashboardOnCallEta strong{white-space:normal;line-height:1.25}