:root{--navy:#10233f;--navy-2:#173554;--blue:#1677ff;--cyan:#17b5cf;--green:#11a66a;--amber:#f2a51a;--red:#e5484d;--violet:#7457d9;--ink:#16263a;--muted:#69778b;--line:#e5ebf2;--bg:#f3f6fa;--panel:#fff;--shadow:0 8px 30px rgba(17,39,67,.07);--radius:14px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,#10233f 0%,#132b49 100%);color:#fff;padding:26px 18px 20px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;padding:0 8px 28px}.brand-mark{position:relative;width:38px;height:38px;border:2px solid #fff;border-radius:9px;overflow:hidden;transform:skew(-7deg)}.brand-mark i{position:absolute;width:28px;height:7px;background:#f5a623;transform:rotate(-38deg);left:-4px;top:10px}.brand-mark i+ i{left:12px;top:22px;background:#22b6d3}.brand strong{font-size:20px;letter-spacing:2.4px}.brand small{display:block;color:#8fa7c0;font-size:9px;letter-spacing:1.6px;margin-top:2px}.main-nav{display:flex;flex-direction:column;gap:5px}.nav-link{border:0;background:transparent;color:#9fb0c4;display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:9px;text-align:left;font:600 13px inherit;cursor:pointer}.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.09);color:#fff}.nav-link.active{box-shadow:inset 3px 0 #1eb7d3}.nav-icon{display:grid;place-items:center;width:23px;height:23px;font-size:17px;color:#67cbe0}.sidebar-card{margin-top:auto;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px}.eyebrow{font-size:10px;letter-spacing:1.25px;font-weight:800;color:#8593a6}.sidebar-card .eyebrow{color:#7890aa}.health-score{display:flex;align-items:end;gap:9px;margin:10px 0 8px}.health-score strong{font-size:27px}.health-score span{font-size:11px;color:#95a9be;margin-bottom:4px}.health-track{height:5px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}.health-track i{display:block;height:100%;background:#19b77a}.sidebar-card small{display:block;margin-top:9px;color:#8ea2b8;font-size:10px}.profile{display:flex;align-items:center;gap:9px;border-top:1px solid rgba(255,255,255,.09);margin-top:15px;padding:16px 5px 0}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#dce8f6;color:#23466c;font-size:11px;font-weight:800}.profile strong,.profile small{display:block}.profile strong{font-size:12px}.profile small{font-size:9px;color:#8fa4bc;margin-top:3px}.profile button{margin-left:auto;background:none;border:0;color:#8fa4bc;cursor:pointer}.main{margin-left:250px;min-height:100vh}.topbar{min-height:110px;background:#fff;border-bottom:1px solid var(--line);padding:22px 30px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.breadcrumb{margin:0 0 6px;color:#8b98a8;font-size:11px}.breadcrumb span{color:#3d5776}.topbar h1{font-size:25px;margin:0 0 4px;letter-spacing:-.5px}.topbar>div>p:last-child{margin:0;color:var(--muted);font-size:12px}.top-actions{display:flex;align-items:center;gap:10px}.demo-pill{background:#eef8fb;color:#147d93;border:1px solid #cdeaf0;padding:8px 10px;border-radius:7px;font-weight:800;font-size:9px;letter-spacing:.8px}.icon-button{position:relative;border:1px solid var(--line);background:#fff;border-radius:8px;width:38px;height:38px;font-size:19px;color:#53657a}.icon-button b{position:absolute;right:-4px;top:-4px;background:var(--red);color:#fff;border:2px solid #fff;width:17px;height:17px;border-radius:50%;font-size:8px;display:grid;place-items:center}.primary-button{border:0;background:linear-gradient(135deg,#166dca,#1688d8);color:#fff;border-radius:8px;padding:11px 16px;font:700 12px inherit;box-shadow:0 5px 14px rgba(23,117,204,.22);cursor:pointer}.mobile-menu{display:none}.view{display:none;padding:22px 28px 35px}.view.active{display:block}.date-strip{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;color:#52657b;font-size:11px}.date-strip>span{display:flex;align-items:center;gap:7px;font-weight:700}.live-dot{width:7px;height:7px;border-radius:50%;background:#14b873;box-shadow:0 0 0 4px rgba(20,184,115,.12)}.date-strip strong{font-size:10px;color:#78879a}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.metric-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:17px;display:flex;align-items:center;gap:13px;box-shadow:var(--shadow);min-width:0}.metric-card.warning{border-color:#f5dcb0;background:linear-gradient(135deg,#fff,#fffaf1)}.metric-icon{flex:0 0 42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:17px;font-weight:900}.metric-icon.blue{background:#e7f2ff;color:var(--blue)}.metric-icon.green{background:#e6f7ef;color:var(--green)}.metric-icon.amber{background:#fff1d7;color:#d98c00}.metric-icon.violet{background:#f0ebff;color:var(--violet)}.metric-icon.red{background:#ffeaeb;color:var(--red)}.metric-card span,.metric-card strong,.metric-card small{display:block}.metric-card span{color:#66768a;font-size:11px;font-weight:700}.metric-card strong{font-size:23px;margin:3px 0}.metric-card small{font-size:9px;color:#8895a5}.metric-card small b{color:var(--green)}.metric-card>em{position:absolute;right:15px;top:15px;font-size:9px;font-style:normal;color:#738297;background:#f3f6f9;padding:4px 6px;border-radius:5px}.dashboard-grid{display:grid;gap:16px;margin-bottom:16px}.hero-grid{grid-template-columns:1.65fr .85fr}.middle-grid{grid-template-columns:1.75fr .75fr}.analytics-grid{grid-template-columns:1.2fr 1fr .82fr}.bottom-grid{grid-template-columns:1fr 1fr}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;min-width:0}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:15px}.panel-header h2{font-size:15px;margin:4px 0 0}.text-button,.more-button{border:0;background:none;color:#1875c8;font:700 10px inherit;cursor:pointer}.more-button{color:#8695a7;font-size:14px}.issue-list{display:flex;flex-direction:column}.issue{border:0;border-bottom:1px solid #edf0f4;background:#fff;width:100%;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:11px 4px;text-align:left;color:var(--ink);cursor:pointer}.issue:last-child{border-bottom:0}.issue:hover{background:#fafcfe}.issue-symbol{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;font-weight:900}.issue.critical .issue-symbol{background:#ffeaeb;color:var(--red)}.issue.warning .issue-symbol{background:#fff2dc;color:#d68b00}.issue strong,.issue small{display:block}.issue strong{font-size:11px}.issue small{font-size:9px;color:#8390a0;margin-top:3px}.issue em{font-style:normal;font-size:8px;text-transform:uppercase;font-weight:800;border-radius:99px;padding:4px 7px}.issue.critical em{color:#c6343a;background:#ffeff0}.issue.warning em{color:#b87300;background:#fff4df}.fleet-ring-wrap{display:flex;align-items:center;justify-content:center;gap:22px;padding:3px 0 13px}.fleet-ring{width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0 77.7%,var(--blue) 77.7% 88.8%,var(--amber) 88.8% 97.2%,var(--red) 97.2%);position:relative}.fleet-ring:before{content:"";position:absolute;inset:13px;background:#fff;border-radius:50%}.fleet-ring div{position:relative;text-align:center}.fleet-ring strong,.fleet-ring span{display:block}.fleet-ring strong{font-size:25px}.fleet-ring span{font-size:9px;color:#7d8999}.ring-legend{display:grid;gap:10px}.ring-legend span{display:grid;grid-template-columns:8px 20px 1fr;align-items:center;gap:6px;font-size:9px;color:#758397}.ring-legend b{color:var(--ink);font-size:12px}.ring-legend i,.map-footer i,.chart-legend i{width:7px;height:7px;border-radius:50%}.green-bg{background:var(--green)}.blue-bg{background:var(--blue)}.amber-bg{background:var(--amber)}.red-bg{background:var(--red)}.wide-button{width:100%;border:1px solid #dae5ef;background:#f7fafc;color:#285a86;border-radius:8px;padding:9px;font:700 10px inherit;cursor:pointer}.segmented{background:#eff3f7;border-radius:7px;padding:3px;display:flex}.segmented button{border:0;background:none;border-radius:5px;padding:5px 9px;color:#7b8999;font:700 9px inherit;cursor:pointer}.segmented button.active{background:#fff;color:#175f9e;box-shadow:0 2px 6px rgba(30,56,84,.1)}.schedule-content{display:none}.schedule-content.active{display:block}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:630px}th{text-align:left;text-transform:uppercase;letter-spacing:.5px;font-size:8px;color:#7f8b9a;background:#f7f9fb;padding:9px 10px;border-bottom:1px solid var(--line)}td{padding:10px;border-bottom:1px solid #edf1f5;font-size:10px;vertical-align:middle}td strong,td small{display:block}td small{font-size:8px;color:#8995a3;margin-top:3px}.late-row td{background:#fffafb}.status{display:inline-block;border-radius:99px;padding:5px 8px;font-size:8px;font-weight:800;white-space:nowrap}.status.done{background:#e8f8f0;color:#158558}.status.moving{background:#e6f2ff;color:#1670c5}.status.late{background:#ffeaeb;color:#ca363d}.status.scheduled{background:#f0f2f5;color:#697688}.week-planner{overflow:auto;min-width:670px}.week-head,.week-row{display:grid;grid-template-columns:140px repeat(5,1fr);gap:5px;align-items:center}.week-head{font-size:8px;color:#7f8b99;text-transform:uppercase;margin-bottom:6px}.week-head>*{padding:5px}.today-col{color:#1675ca;background:#edf6ff;border-radius:5px}.week-row{border-top:1px solid #eef1f5;min-height:50px}.week-row>span{padding:7px}.week-row strong,.week-row small{display:block}.week-row strong{font-size:9px}.week-row small{font-size:8px;color:#8a96a4;margin-top:3px}.job{font-style:normal;font-size:8px;font-weight:700;border-radius:5px;padding:8px 5px;text-align:center}.blue-job{background:#e7f2ff;color:#176db9}.purple-job{background:#f0ebff;color:#684dc0}.green-job{background:#e5f7ef;color:#118255}.amber-job{background:#fff1d8;color:#a96b00}.return-job{background:#edf0f4;color:#6b7888}.free-job{background:#fff;border:1px dashed #b9c7d6;color:#8695a5}.red-job{background:#ffeaeb;color:#c53138}.span-2{grid-column:span 2}.span-3{grid-column:span 3}.map-canvas{position:relative;height:250px;background:linear-gradient(145deg,#f4f8fb,#edf3f7);border-radius:10px;overflow:hidden}.map-canvas svg{width:100%;height:100%}.country{fill:#e3ebf1;stroke:#ced9e3;stroke-width:2}.route{fill:none;stroke:#3d9ed2;stroke-width:3;stroke-dasharray:5 5}.route.faint{opacity:.55}.hub{fill:#1577bc;stroke:#fff;stroke-width:5}.point{fill:#13a66b;stroke:#fff;stroke-width:4}.alert-point{fill:#e5484d}.map-label{position:absolute;background:#fff;border:1px solid #dbe5ed;border-radius:5px;padding:4px 6px;font-size:8px;font-weight:800;box-shadow:0 2px 7px rgba(20,48,75,.12)}.map-label b{color:#1476bd;margin-left:2px}.map-label.jhb{top:27%;left:57%}.map-label.dbn{bottom:19%;right:18%}.map-label.cpt{bottom:19%;left:17%}.map-label.blm{top:49%;left:46%}.map-footer{display:flex;justify-content:center;gap:18px;padding-top:12px;font-size:8px;color:#758395}.map-footer span,.chart-legend span{display:flex;align-items:center;gap:5px}.chart-summary{display:flex;gap:38px}.chart-summary span,.chart-summary strong,.chart-summary small{display:block}.chart-summary span{font-size:8px;text-transform:uppercase;color:#8693a1}.chart-summary strong{font-size:17px;margin:3px 0}.chart-summary small{font-size:8px;color:var(--green)}.bar-chart{height:120px;display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--line);margin-top:14px;padding:0 8px}.bar-chart div{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px}.bar-chart i,.bar-chart b{display:block;width:10px;background:linear-gradient(#58a9ee,#1975c6);border-radius:3px 3px 0 0}.bar-chart b{background:linear-gradient(#38c78b,#12a267);width:6px}.bar-chart span{position:absolute;bottom:-17px;font-size:8px;color:#8995a4}.chart-legend{display:flex;justify-content:center;gap:14px;margin-top:23px;font-size:8px;color:#758394}.route-list>div{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:9px 0;border-bottom:1px solid #edf1f4}.route-list>div:last-child{border-bottom:0}.route-list span strong,.route-list span small{display:block}.route-list strong{font-size:10px}.route-list small{font-size:8px;color:#8793a2;margin-top:3px}.route-list b{font-size:10px;color:#138659}.route-list i{grid-column:1/-1;height:4px;background:#edf1f4;border-radius:99px;overflow:hidden}.route-list i em{display:block;height:100%;background:linear-gradient(90deg,#1d85d4,#15b274);border-radius:99px}.route-list .loss b{color:var(--red)}.route-list .loss i em{background:var(--red)}.client-list>div{display:grid;grid-template-columns:26px 1fr auto;align-items:center;padding:10px 0;border-bottom:1px solid #edf1f4}.client-list>div:last-child{border:0}.rank{font-size:9px;color:#9aa5b2}.client-list strong,.client-list small{display:block}.client-list strong{font-size:9px}.client-list small{font-size:8px;color:#8995a4;margin-top:2px}.client-list b{font-size:9px}.period{font-size:8px;color:#6f7e8f;background:#f1f4f7;padding:5px 7px;border-radius:5px}.compliance-items>div{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #edf1f4}.avatar.small{width:30px;height:30px;font-size:9px}.compliance-items strong,.compliance-items small{display:block}.compliance-items strong{font-size:9px}.compliance-items small{font-size:8px;color:#8b97a6;margin-top:2px}.compliance-items b{font-size:9px}.danger-line b,.critical-text{color:var(--red)!important}.warning-line b,.warning-text{color:#cf8500!important}.service-row{display:grid;grid-template-columns:34px 1fr auto 80px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #edf1f4}.truck-icon{width:31px;height:31px;border-radius:7px;background:#e8f2fc;color:#1d75bc;display:grid;place-items:center}.service-row strong,.service-row small{display:block}.service-row strong{font-size:9px}.service-row small{font-size:8px;color:#8995a5;margin-top:2px}.service-row em{font-style:normal;font-size:8px;font-weight:800}.service-row>b{font-size:8px;color:#6c7b8d;text-align:right}.demo-footer{display:flex;justify-content:space-between;border-top:1px solid #dce3ea;padding:18px 4px 0;color:#95a0ac;font-size:8px;letter-spacing:.6px}.placeholder-view{padding-top:30px}.view-hero{background:linear-gradient(135deg,#102c4a,#174c72);color:#fff;border-radius:16px;padding:30px;margin-bottom:18px;position:relative;overflow:hidden}.view-hero:after{content:"";position:absolute;width:240px;height:240px;border:55px solid rgba(55,186,208,.09);border-radius:50%;right:-60px;top:-90px}.view-hero span{color:#57c8dc;font-size:9px;font-weight:900;letter-spacing:1.4px}.view-hero h2{font-size:25px;max-width:690px;margin:8px 0}.view-hero p{max-width:700px;color:#b8c8d9;margin:0;line-height:1.6}.metric-grid.compact .metric-card>em{display:none}.large-placeholder{padding:25px}.week-planner.full{min-width:850px}.workflow{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;align-items:center;margin-bottom:16px;box-shadow:var(--shadow)}.workflow span{border:1px solid #dce4ec;border-radius:99px;padding:8px 11px;font-size:9px;font-weight:800;color:#7c8998}.workflow span.complete{background:#e8f8f0;border-color:#c2ecd8;color:#16895b}.workflow span.active{background:#e8f3ff;border-color:#bedcff;color:#166ebc}.workflow i{height:2px;background:#dce4ec;flex:1}.mini-progress{width:100px;height:5px;background:#e9eef3;border-radius:99px;overflow:hidden}.mini-progress i{display:block;height:100%;background:#1683d1}.mini-progress.red i{background:var(--red)}.route-list.expanded>div{padding:16px 5px}.drawer-backdrop{position:fixed;inset:0;background:rgba(9,24,42,.42);z-index:40;opacity:0;pointer-events:none;transition:.2s}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer{position:fixed;right:-480px;top:0;bottom:0;width:min(450px,100%);background:#fff;z-index:50;padding:25px;box-shadow:-20px 0 50px rgba(10,26,44,.18);transition:.3s;overflow:auto}.drawer.open{right:0}.drawer-header{display:flex;justify-content:space-between}.drawer-header h2{margin:5px 0}.drawer-header button{border:0;background:#f0f3f6;border-radius:50%;width:34px;height:34px;font-size:20px;cursor:pointer}.drawer-intro{color:var(--muted);line-height:1.6;font-size:12px}.drawer form{display:grid;gap:14px;margin-top:23px}.drawer label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:800}.drawer input,.drawer select,.drawer textarea{width:100%;border:1px solid #dbe3eb;border-radius:8px;padding:11px;color:var(--ink);font:12px inherit;background:#fff}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.approval-preview{background:#eff7ff;border-left:3px solid #1682d1;padding:12px}.approval-preview span,.approval-preview strong{display:block}.approval-preview span{font-size:8px;color:#6f8295;text-transform:uppercase}.approval-preview strong{font-size:10px;margin-top:4px}.full-button{width:100%}.toast{position:fixed;right:25px;bottom:-100px;background:#142b47;color:#fff;padding:14px 18px;border-radius:10px;z-index:70;box-shadow:0 10px 30px rgba(8,25,44,.25);transition:.3s}.toast.show{bottom:25px}.toast strong,.toast span{display:block}.toast strong{font-size:11px}.toast span{font-size:9px;color:#aabbd0;margin-top:4px}
@media(max-width:1250px){.analytics-grid{grid-template-columns:1fr 1fr}.clients-panel{grid-column:1/-1}.metric-card>em{display:none}.middle-grid{grid-template-columns:1.5fr 1fr}}
@media(max-width:1000px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.main{margin-left:0}.mobile-menu{display:block;border:0;background:#edf2f7;border-radius:8px;width:38px;height:38px}.hero-grid,.middle-grid,.analytics-grid,.bottom-grid{grid-template-columns:1fr}.clients-panel{grid-column:auto}.metric-grid{grid-template-columns:1fr 1fr}.topbar{padding:18px}.view{padding:18px}.demo-pill{display:none}}
@media(max-width:640px){.topbar{align-items:flex-start}.topbar h1{font-size:20px}.top-actions .primary-button{display:none}.icon-button{display:none}.metric-grid{grid-template-columns:1fr}.date-strip{align-items:flex-start;gap:5px;flex-direction:column}.fleet-ring-wrap{flex-direction:column}.metric-card>em{display:block}.form-row{grid-template-columns:1fr}.view{padding:13px}.topbar{padding:15px 13px}.view-hero{padding:22px}.view-hero h2{font-size:20px}.demo-footer{flex-direction:column;gap:7px}.workflow{overflow:auto}.workflow span{white-space:nowrap}.service-row{grid-template-columns:34px 1fr auto}.service-row>b{display:none}}

/* Client-provided Detour Logistics Solutions logo. */
.brand{display:flex;align-items:center;gap:0;padding:0 5px 25px}
.brand img{display:block;width:100%;max-width:202px;height:auto;filter:brightness(0) invert(1);opacity:.96}