:root{
--nav:#081a2b;--nav2:#0f304d;--blue:#2563eb;--blue2:#1d4ed8;--bg:#f4f7fb;--card:#fff;
--ink:#102033;--muted:#718096;--line:#e4eaf1;--green:#16a36b;--amber:#d99400;--red:#db4b55;
--purple:#7c3aed;--shadow:0 8px 24px rgba(15,23,42,.07)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}button{cursor:pointer}
.sidebar{position:fixed;inset:0 auto 0 0;width:258px;background:linear-gradient(180deg,var(--nav),#061421);color:#fff;padding:18px 14px;z-index:30;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;scrollbar-gutter:stable}
.brand{display:flex;align-items:center;gap:11px;padding:6px 10px 24px;font-weight:850;font-size:21px}
.brandmark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--blue),#4f8cff);display:grid;place-items:center;box-shadow:0 8px 24px #2563eb44}
.section{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#7690a7;padding:12px 11px 7px}
.nav{display:grid;gap:4px}.nav button{border:0;background:transparent;color:#bdcad7;text-align:left;padding:11px 12px;border-radius:9px}
.nav button:hover,.nav button.active{background:var(--nav2);color:#fff}.nav span{margin-left:8px}
.sidefoot{position:absolute;bottom:17px;left:24px;right:24px;color:#7890a5;font-size:11px;border-top:1px solid #ffffff12;padding-top:12px}
.main{margin-left:258px;padding:24px 28px 42px}
.header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.header h1{margin:0;font-size:28px}.header p{margin:5px 0 0;color:var(--muted)}
.headerActions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:9px;padding:10px 14px;font-weight:750}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 7px 18px #2563eb2e}.btn.primary:hover{background:var(--blue2)}
.btn.light{background:#fff;border:1px solid var(--line);color:#26384c}.btn.danger{background:#fff1f2;color:#b52f3b;border:1px solid #ffd8dc}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;box-shadow:var(--shadow)}
.kpiTop{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px}.kpiIcon{width:31px;height:31px;border-radius:9px;background:#edf3ff;color:var(--blue);display:grid;place-items:center;font-weight:900}
.kpiNum{font-size:25px;font-weight:850;margin-top:8px}.kpiFoot{font-size:10px;color:var(--muted);margin-top:4px}
.grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:16px;margin-top:16px}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.ph{padding:15px 17px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.ph h2{margin:0;font-size:16px}.sub{font-size:11px;color:var(--muted);margin-top:3px}
.map{height:360px;position:relative;overflow:hidden;background:#dfeadf;background-image:linear-gradient(28deg,transparent 47%,#fff 48%,#fff 51%,transparent 52%),linear-gradient(112deg,transparent 47%,#fff 48%,#fff 51%,transparent 52%),linear-gradient(#c7d5ca 1px,transparent 1px),linear-gradient(90deg,#c7d5ca 1px,transparent 1px);background-size:170px 125px,190px 140px,45px 45px,45px 45px}
.road{position:absolute;height:20px;background:#fff;border:2px solid #cbd5cf;width:130%;left:-15%;top:44%;transform:rotate(-14deg)}.road.r2{top:64%;transform:rotate(29deg)}.road.r3{top:22%;transform:rotate(4deg)}
.marker{position:absolute;width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:3px solid #fff;background:var(--blue);box-shadow:0 3px 10px #0003;transition:.8s}.marker:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;left:4px;top:4px}
.m1{left:22%;top:30%}.m2{left:55%;top:49%;background:var(--green)}.m3{left:74%;top:21%;background:var(--amber)}.m4{left:43%;top:72%;background:var(--red)}
.mapTag{position:absolute;background:#fff;padding:6px 8px;border-radius:7px;font-size:10px;font-weight:800;box-shadow:0 2px 8px #0002}.t1{left:18%;top:22%}.t2{left:50%;top:55%}.t3{right:7%;top:13%}.t4{left:34%;bottom:10%}
.legend{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.ld{width:8px;height:8px;border-radius:50%}
.activity{padding:4px 16px 11px}.act{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #eef2f6}.actIcon{width:32px;height:32px;border-radius:8px;background:#edf3ff;display:grid;place-items:center;color:var(--blue);font-size:12px;font-weight:800}.act strong{display:block;font-size:11px}.act small{font-size:10px;color:var(--muted)}
.sectionPanel{margin-top:16px}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tab{border:1px solid var(--line);background:#fff;padding:8px 11px;border-radius:8px;font-size:11px;font-weight:750}.tab.active{background:#eaf1ff;color:#1d5fd1;border-color:#cfe0ff}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.search{border:1px solid var(--line);border-radius:8px;padding:9px 10px;min-width:180px;outline:none}
.tableWrap{overflow:auto}.dataTable{width:100%;border-collapse:collapse;min-width:1000px}.dataTable th,.dataTable td{padding:12px 13px;text-align:left;border-bottom:1px solid #eef2f6;font-size:11px}.dataTable th{background:#fafbfd;text-transform:uppercase;color:#7b8999;font-size:9px;letter-spacing:.3px}
.jobid{font-weight:850;color:#1d5fd3}.pill{padding:4px 7px;border-radius:20px;font-size:9px;font-weight:850;white-space:nowrap}.pending{background:#fff3d3;color:#986500}.accepted{background:#f0e7ff;color:#6b2ab7}.progress{background:#e5efff;color:#155bc3}.complete{background:#dcf7eb;color:#14744d}.cancelled{background:#f4e8ea;color:#8f3e46}.priorityHigh{background:#ffe6e8;color:#bd2d3a}.priorityNormal{background:#eef3f8;color:#4b5d71}.priorityUrgent{background:#f0e7ff;color:#6b2ab7}
.rowActions{display:flex;gap:5px}.rowActions button{border:0;background:#eef3f8;border-radius:6px;padding:5px 7px;font-size:10px}
.driverCards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:15px}.driverCard{border:1px solid var(--line);border-radius:12px;padding:14px}.driverHead{display:flex;align-items:center;gap:10px}.avatar{width:40px;height:40px;border-radius:50%;background:#e9f0f8;display:grid;place-items:center;font-size:11px;font-weight:850;color:#315171}.driverHead strong{display:block;font-size:12px}.driverHead small{font-size:10px;color:var(--muted)}.statusLine{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;color:var(--muted)}.miniStats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.mini{background:#f8fafc;border-radius:8px;padding:8px;text-align:center}.mini b{display:block;font-size:12px}.mini span{font-size:9px;color:var(--muted)}
.vehicleGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:15px}.vehicle{border:1px solid var(--line);border-radius:12px;padding:13px}.vehicle h3{margin:0 0 5px;font-size:12px}.vehicle p{margin:3px 0;color:var(--muted);font-size:10px}
.timeline{padding:12px 16px}.timelineRow{display:grid;grid-template-columns:85px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #eef2f6}.timelineRow time{font-size:10px;color:var(--muted)}.timelineRow strong{font-size:11px;display:block}.timelineRow small{font-size:10px;color:var(--muted)}
.modal{display:none;position:fixed;inset:0;z-index:50;background:#071727b8;align-items:center;justify-content:center;padding:18px}.modal.open{display:flex}.modalBox{background:#fff;border-radius:16px;width:min(760px,100%);max-height:90vh;overflow:auto;padding:22px;box-shadow:0 20px 70px #0005}.modalBox h2{margin:0}.modalBox p{color:var(--muted);font-size:11px}
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.field{display:grid;gap:5px}.field.full{grid-column:1/-1}.field.third{grid-column:span 1}.field label{font-size:10px;font-weight:800}.field input,.field select,.field textarea{width:100%;border:1px solid #d8e1eb;border-radius:8px;padding:9px;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
.modalActions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.detailsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.detail{background:#f8fafc;border:1px solid #eef2f6;border-radius:9px;padding:10px}.detail span{font-size:9px;color:var(--muted);display:block}.detail b{font-size:11px}
.toast{position:fixed;right:22px;bottom:22px;background:#0c2135;color:#fff;padding:11px 14px;border-radius:9px;display:none;z-index:70;font-size:11px;box-shadow:0 10px 30px #0003}.toast.show{display:block}.hidden{display:none!important}.empty{padding:28px;text-align:center;color:var(--muted)}
@media(max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}.vehicleGrid{grid-template-columns:repeat(2,1fr)}.driverCards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.sidebar{width:70px}.brand span,.nav span,.section,.sidefoot{display:none}.brand{justify-content:center}.nav button{text-align:center;font-size:0}.nav button:first-letter{font-size:17px}.main{margin-left:70px}.grid{grid-template-columns:1fr}.form{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media(max-width:620px){.main{padding:16px 12px}.header{align-items:flex-start}.header h1{font-size:21px}.kpis{grid-template-columns:repeat(2,1fr)}.driverCards,.vehicleGrid{grid-template-columns:1fr}.headerActions .light{display:none}.detailsGrid{grid-template-columns:1fr 1fr}}
.bulkRows{display:grid;gap:10px;margin-top:12px}
.bulkRow{display:grid;grid-template-columns:1.1fr 1fr 1fr .55fr .55fr auto;gap:8px;align-items:end;border:1px solid var(--line);background:#fafbfd;border-radius:10px;padding:10px}
.bulkRow .field{margin:0}
.bulkRow button{height:38px}
.bulkHint{font-size:10px;color:var(--muted);margin:6px 0 0}
@media(max-width:900px){.bulkRow{grid-template-columns:1fr 1fr}.bulkRow button{height:auto}.bulkRow .wide{grid-column:1/-1}}
.customerGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:15px}
.customerCard{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.customerCard.customerCardActive{border-color:#86d5a7;background:linear-gradient(145deg,#f3fff7 0%,#fff 72%);box-shadow:inset 4px 0 0 #22a85a}
.customerCardHeading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.customerCardHeading h3,.customerCard h3{margin:0;font-size:13px}
.customerAccountStatus{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;background:#eef2f6;color:#52606d;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.customerAccountStatus.active{background:#dff7e8;color:#08783b;border:1px solid #9eddb8}
.customerCard.customerCardOnHold{border-color:#f3bd71;background:linear-gradient(145deg,#fff8ec 0%,#fff 72%);box-shadow:inset 4px 0 0 #ed8b16}
.customerAccountStatus.onHold{background:#fff0d8;color:#a65100;border:1px solid #f1bd78}
.customerCard.customerCardInactive{border-color:#efa0a0;background:linear-gradient(145deg,#fff3f3 0%,#fff 72%);box-shadow:inset 4px 0 0 #dc3030}
.customerAccountStatus.inactive{background:#ffe1e1;color:#a71414;border:1px solid #efa0a0}
.customerCard p{margin:4px 0;color:var(--muted);font-size:10px}
.customerMeta{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.customerMeta div{background:#f8fafc;border-radius:8px;padding:8px}
.customerMeta b{display:block;font-size:11px}.customerMeta span{font-size:9px;color:var(--muted)}
.customerActions{display:flex;gap:6px;margin-top:10px}
.customerActions button{padding:7px 9px;font-size:10px}
.quickInfo{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:8px}
.quickInfo strong{display:block;font-size:11px}.quickInfo span{font-size:10px;color:var(--muted)}
@media(max-width:1100px){.customerGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.customerGrid{grid-template-columns:1fr}}
.driverActions{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.driverActions button{padding:7px 9px;font-size:10px}
.driverDetailGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:650px){.driverDetailGrid{grid-template-columns:1fr}}


.authGate{position:fixed;inset:0;z-index:99999;background:#f4f7fb;display:flex;align-items:center;justify-content:center;padding:20px;font-family:Inter,Segoe UI,Arial,sans-serif}
.authGate.hidden{display:none}.authCard{width:min(440px,100%);background:#fff;border:1px solid #e4eaf1;border-radius:20px;padding:28px;box-shadow:0 18px 55px rgba(15,23,42,.14)}
.authLogo{width:52px;height:52px;border-radius:14px;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:24px;font-weight:900}
.authCard h1{margin:16px 0 5px}.authCard p{color:#718096;margin:0 0 18px}.authTabs{display:flex;background:#f1f5f9;padding:4px;border-radius:11px;margin-bottom:18px}
.authTabs button{flex:1;border:0;background:transparent;padding:10px;border-radius:8px;font-weight:800;cursor:pointer}.authTabs button.active{background:#fff;box-shadow:0 1px 5px rgba(15,23,42,.1)}
.authField{margin:11px 0}.authField label{display:block;font-size:12px;font-weight:800;margin-bottom:6px;color:#425466}.authField input,.authField select{width:100%;box-sizing:border-box;border:1px solid #d9e2ec;border-radius:10px;padding:12px;font:inherit}
.authBtn{width:100%;border:0;border-radius:10px;padding:13px;background:#2563eb;color:#fff;font-weight:900;cursor:pointer;margin-top:10px}.authLink{border:0;background:none;color:#2563eb;font-weight:800;cursor:pointer;padding:10px 0}
.authMsg{min-height:20px;margin-top:10px!important;font-size:13px}.authDemo{font-size:12px!important;background:#f8fafc;padding:10px;border-radius:9px;margin-top:12px!important}
.accountChip{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e4eaf1;border-radius:10px;background:#fff;font-size:12px}.accountChip b{display:block}

/* Keep long admin screens and the fixed navigation fully reachable. */
#settingsView{padding-bottom:24px}
.sidebar::-webkit-scrollbar{width:7px}.sidebar::-webkit-scrollbar-thumb{background:#ffffff33;border-radius:999px}.sidebar::-webkit-scrollbar-track{background:transparent}

/* Keep Leaflet map layers behind FleetFlow dialogs and forms. */
.map,.leaflet-container{isolation:isolate;z-index:0!important}
.leaflet-pane,.leaflet-top,.leaflet-bottom{z-index:auto}
.modal{z-index:10000!important}
.modal.open{isolation:isolate}
.modal.open .modalBox{position:relative;z-index:10001;background:#fff}
body:has(.modal.open) .map{visibility:hidden}


/* FleetFlow brand identity */
.brandmark,.authLogo{overflow:hidden;background:#fff;box-shadow:0 10px 28px rgba(37,99,235,.24)}
.brandmark{padding:4px;border:1px solid rgba(255,255,255,.2)}
.authLogo{width:58px;height:58px;padding:6px;border-radius:16px;background:#edf4ff;border:1px solid #dce8fb}
.brandLogoImage{display:block;width:100%;height:100%;object-fit:contain}


/* Quick job assignment */
.rowActions{flex-wrap:wrap}
.rowActions .assignAction{background:#e7f0ff;color:#155bc3;font-weight:850}
.inlineAssign{max-width:155px;border:1px solid #cddcf4;border-radius:999px;padding:5px 9px;background:#edf4ff;color:#155bc3;font:800 10px/1.2 inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.inlineAssign:not(.assigned){background:#155bc3;border-color:#155bc3;color:#fff}
.quickAssignBox{width:min(680px,100%)}
.quickAssignHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.quickAssignHead span{display:block;margin-bottom:4px;color:#2468d8;font-size:9px;font-weight:900;letter-spacing:.14em}
.quickAssignHead h2{font-size:22px}
.quickAssignClose{width:36px;height:36px;border:0;border-radius:50%;background:#eef3f8;color:#3f5368;font-size:24px;line-height:1;cursor:pointer}
.quickAssignSummary{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0;padding:14px 16px;border:1px solid #dfe7ef;border-radius:13px;background:#f8fafc}
.quickAssignSummary strong{font-size:14px;color:#183149}
.quickAssignSummary span{font-size:10px;color:#6f7f90}
.quickAssignSummary .quickAssignJobId{grid-row:1/3;align-self:center;padding:7px 9px;border-radius:9px;background:#e7f0ff;color:#155bc3;font-size:11px;font-weight:900}
.quickAssignDrivers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quickDriverOption{display:flex;align-items:center;gap:11px;width:100%;padding:13px;border:1px solid #dfe7ef;border-radius:13px;background:#fff;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.quickDriverOption:hover:not(:disabled){border-color:#8bb4f5;box-shadow:0 7px 20px rgba(21,91,195,.1);transform:translateY(-1px)}
.quickDriverOption.current{border-color:#74a7f3;background:#f5f9ff}
.quickDriverOption:disabled{cursor:not-allowed;opacity:.55;background:#f8fafc}
.quickDriverAvatar{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:#e7f0ff;color:#155bc3;font-size:12px;font-weight:900}
.quickDriverInfo{min-width:0;flex:1}
.quickDriverInfo strong{display:block;overflow:hidden;text-overflow:ellipsis;color:#183149;font-size:12px;white-space:nowrap}
.quickDriverInfo span{display:block;margin-top:3px;color:#6f7f90;font-size:10px}
.quickDriverStatus{display:flex;align-items:center;gap:5px;white-space:nowrap}
.quickDriverStatus i{width:7px;height:7px;border-radius:50%;background:#94a3b8}
.quickDriverStatus.online i{background:#20b779}
.quickDriverPick{color:#2468d8;font-size:16px;font-weight:900}
.quickAssignEmpty{grid-column:1/-1;padding:28px 16px;border:1px dashed #cbd5e1;border-radius:13px;text-align:center;color:#64748b;font-size:12px}
@media(max-width:620px){.quickAssignDrivers{grid-template-columns:1fr}.quickAssignBox{padding:18px}.quickAssignSummary{grid-template-columns:auto 1fr}.quickDriverOption{padding:12px}}

.jobDriverAssign{display:flex;flex-direction:column;align-items:flex-start;min-width:110px;border:1px solid #cbdcf6;border-radius:10px;padding:7px 9px;background:#edf4ff;color:#155bc3;cursor:pointer}
.jobDriverAssign span{max-width:135px;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:850;white-space:nowrap}
.jobDriverAssign small{margin-top:2px;color:#4976b5;font-size:8px;font-weight:750}
.jobDriverAssign:not(.assigned){background:#155bc3;border-color:#155bc3;color:#fff}
.jobDriverAssign:not(.assigned) small{color:#dbeafe}


/* Primary sidebar shortcut */
.sideCreateJob{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;margin:0 0 12px;padding:11px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:linear-gradient(135deg,#2563eb,#155bc3);color:#fff;font:800 13px/1 inherit;cursor:pointer;box-shadow:0 10px 24px rgba(37,99,235,.28);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.sideCreateJob:hover{transform:translateY(-1px);background:linear-gradient(135deg,#3478ee,#155bc3);box-shadow:0 14px 28px rgba(37,99,235,.35)}
.sideCreateJob span{font-size:20px;line-height:1}
.sideCreateJob b{font:inherit}
@media(max-width:980px){.sideCreateJob{width:44px;min-height:44px;margin:0 auto 12px;padding:6px;font-size:9px;line-height:1.1;text-align:center}.sideCreateJob b{display:block}}


/* Modern driver management cards */
.driverCards{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;padding:18px}
.driverCard{position:relative;overflow:hidden;min-width:0;padding:0;border:1px solid #dfe7ef;border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(15,23,42,.07);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.driverCard:before{content:"";display:block;height:4px;background:#94a3b8}.driverCard.driverOnline:before{background:linear-gradient(90deg,#16a34a,#4ade80)}.driverCard.driverOffline:before{background:linear-gradient(90deg,#64748b,#94a3b8)}
.driverCard:hover{transform:translateY(-2px);border-color:#c8d5e3;box-shadow:0 14px 34px rgba(15,23,42,.1)}
.driverCard .driverHead{position:relative;display:flex;align-items:center;gap:12px;padding:17px 17px 14px}
.driverCard .avatar{flex:0 0 48px;width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#e8f1ff,#dbeafe);color:#155bc3;font-size:14px;box-shadow:inset 0 0 0 1px #cfe0f7}
.driverIdentity{min-width:0;flex:1}.driverNameRow{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.driverCard .driverNameRow>strong{font-size:14px;line-height:1.25;color:#172033}.driverIdentity small{display:block;margin-top:5px;color:#64748b;font-size:11px}
.driverAvailability{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 9px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.driverAvailability i{width:7px;height:7px;border-radius:50%;background:#94a3b8}.driverAvailability.online{background:#dcfce7;color:#166534}.driverAvailability.online i{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.13)}
.driverMetaGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 17px 14px}.driverMetaGrid>div{min-width:0;padding:11px 12px;border:1px solid #e8edf3;border-radius:12px;background:#f8fafc}.driverMetaGrid span{display:block;margin-bottom:5px;color:#7b8a9b;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.driverMetaGrid strong{display:block;overflow:hidden;text-overflow:ellipsis;color:#26384b;font-size:11px;white-space:nowrap}
.driverCard .miniStats{gap:8px;margin:0;padding:0 17px 15px}.driverCard .mini{padding:10px 7px;border:1px solid #e8edf3;border-radius:11px;background:#fff}.driverCard .mini b{font-size:16px;color:#172033}.driverCard .mini span{display:block;margin-top:3px;font-size:9px}
.driverCard .driverActions{display:grid;gap:8px;margin:0;padding:0 17px}.driverCard .driverActions button{min-width:0;min-height:36px;padding:8px 9px;border-radius:9px;font-size:10px;font-weight:750;white-space:nowrap}
.driverPrimaryActions{grid-template-columns:repeat(2,minmax(0,1fr))}.driverMoreActions{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px!important;padding-bottom:17px!important}.driverMoreActions .danger{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}
@media(max-width:620px){.driverCards{grid-template-columns:1fr;padding:12px}.driverCard .driverHead{align-items:flex-start}.driverAvailability{position:absolute;right:14px;top:14px}.driverIdentity{padding-right:62px}.driverMetaGrid{grid-template-columns:1fr}.driverMoreActions{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* Driver day and night shift toggle */
.driverBadges{display:flex;flex:0 0 auto;align-items:flex-end;flex-direction:column;gap:6px}
.driverShiftBadge{min-width:88px;padding:6px 9px;border:1px solid transparent;border-radius:999px;font:800 9px/1 system-ui;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.driverShiftBadge:hover{transform:translateY(-1px)}
.driverShiftBadge.day{border-color:#fde68a;background:#fffbeb;color:#a16207;box-shadow:0 3px 10px rgba(217,119,6,.08)}
.driverShiftBadge.night{border-color:#c7d2fe;background:#eef2ff;color:#4338ca;box-shadow:0 3px 10px rgba(79,70,229,.1)}
@media(max-width:620px){.driverBadges{position:absolute;right:14px;top:12px}.driverBadges .driverAvailability{position:static}.driverIdentity{padding-right:100px}}


/* Driver availability dropdown */
.driverStatusSelect{width:100%;min-width:0;min-height:36px;padding:8px 26px 8px 9px;border:1px solid #cbd5e1;border-radius:9px;background:#f8fafc;color:#334155;font:750 10px/1 system-ui;outline:none;cursor:pointer}
.driverStatusSelect:hover,.driverStatusSelect:focus{border-color:#7aa7ea;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.09)}


/* Driver emergency callout availability */
.driverEmergencyToggle{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:42px;padding:10px 12px;border:1px solid;border-radius:12px;cursor:pointer;text-align:left;transition:transform .15s ease,box-shadow .15s ease}
.driverEmergencyToggle:hover{transform:translateY(-1px)}
.driverEmergencyToggle span{margin:0;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.driverEmergencyToggle strong{font-size:11px}
.driverEmergencyToggle.available{border-color:#fecaca;background:#fff1f2;color:#b91c1c;box-shadow:0 3px 10px rgba(185,28,28,.06)}
.driverEmergencyToggle.unavailable{border-color:#e2e8f0;background:#f8fafc;color:#64748b}


/* Compact driver card sizing */
.driverCards{grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:12px;padding:14px}
.driverCard .driverHead{gap:10px;padding:12px 13px 10px}
.driverCard .avatar{flex-basis:40px;width:40px;height:40px;border-radius:12px;font-size:12px}
.driverCard .driverNameRow>strong{font-size:12px}.driverIdentity small{margin-top:3px;font-size:9px}
.driverBadges{gap:4px}.driverAvailability,.driverShiftBadge{min-width:auto;padding:5px 7px;font-size:8px}
.driverMetaGrid{gap:7px;padding:0 13px 10px}.driverMetaGrid>div{padding:8px 9px;border-radius:9px}.driverMetaGrid span{margin-bottom:3px;font-size:8px}.driverMetaGrid strong{font-size:10px}
.driverEmergencyToggle{min-height:34px;padding:7px 9px;border-radius:9px}.driverEmergencyToggle span{font-size:8px}.driverEmergencyToggle strong{font-size:9px}
.driverCard .miniStats{gap:6px;padding:0 13px 10px}.driverCard .mini{padding:7px 5px;border-radius:9px}.driverCard .mini b{font-size:13px}.driverCard .mini span{font-size:8px}
.driverCard .driverActions{gap:6px;padding:0 13px}.driverCard .driverActions button,.driverStatusSelect{min-height:32px;padding-top:6px;padding-bottom:6px;font-size:9px}
.driverMoreActions{margin-top:6px!important;padding-bottom:12px!important}

/* Keep driver cards compact instead of stretching across the page */
.driverCards{grid-template-columns:repeat(auto-fill,minmax(285px,340px));justify-content:start}
.driverCard{width:100%;max-width:340px}
@media(max-width:640px){.driverCards{grid-template-columns:minmax(0,1fr)}.driverCard{max-width:none}}