@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{--bright-gold: #ffe100;--golden-pollen: #ffc917;--pure-red: #f00000;--blood-red: #8c0000;--black: #050505;--ink: #242424;--muted: #7f8085;--line: #e9e9e7;--surface: #fff;--soft: #f7f7f4;font-family:DM Sans,sans-serif;color:var(--ink);background:var(--soft);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{border:0;cursor:pointer}.app-shell{display:flex;min-height:100vh}.sidebar{background:var(--black);color:#fff;width:250px;padding:28px 16px 18px;display:flex;flex-direction:column;flex-shrink:0}.brand{display:flex;align-items:center;gap:11px;padding:0 10px 36px;position:relative}.brand-mark{width:37px;height:37px;border-radius:11px 11px 11px 3px;background:var(--bright-gold);color:var(--black);display:grid;place-items:center;font:700 12px Space Grotesk;transform:rotate(-5deg)}.brand-mark span{transform:rotate(5deg)}.brand strong,.brand span{display:block}.brand strong{font:700 17px Space Grotesk;letter-spacing:-.5px}.brand span{font-size:11px;color:#a5a5a5;margin-top:2px}.workspace-label{color:#666;font-size:9px;letter-spacing:1.4px;font-weight:700;padding:0 12px 13px}.main-nav{display:grid;gap:4px}.nav-item{width:100%;background:transparent;color:#929292;display:flex;align-items:center;gap:13px;border-radius:8px;padding:12px;text-align:left;font-size:13px;transition:.2s}.nav-item:hover{color:#fff;background:#1c1c1c}.nav-item-active{color:var(--black);background:var(--bright-gold);font-weight:700}.nav-item-active:hover{color:var(--black);background:var(--bright-gold)}.nav-item em{margin-left:auto;background:#fff2a0;color:#6d5d00;padding:2px 7px;border-radius:20px;font-size:10px;font-style:normal}.sidebar-bottom{margin-top:auto;display:grid;gap:16px}.help-card{border-top:1px solid #292929;padding:18px 8px 2px;display:flex;gap:10px;color:var(--golden-pollen)}.help-card strong,.help-card span{display:block}.help-card strong{color:#ddd;font-size:11px}.help-card span{color:#747474;font-size:10px;margin-top:4px}.profile-mini{border-top:1px solid #292929;padding:16px 7px 0;display:flex;align-items:center;gap:9px}.profile-mini strong,.profile-mini span{display:block}.profile-mini strong{font-size:11px}.profile-mini span{color:#777;font-size:10px;margin-top:3px}.profile-mini svg{margin-left:auto;color:#777}.avatar,.top-avatar,.small-avatar{border-radius:50%;display:grid;place-items:center;font-weight:700}.avatar{width:30px;height:30px;font-size:10px;color:var(--black);background:var(--golden-pollen)}.main-content{flex:1;min-width:0}.topbar{height:73px;border-bottom:1px solid var(--line);background:var(--surface);display:flex;align-items:center;padding:0 42px;gap:20px}.breadcrumb{display:flex;align-items:center;gap:10px;font-size:12px}.breadcrumb span{color:#9b9b9b}.breadcrumb b{color:#ccc;font-weight:400}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:22px}.connection{font-size:11px;color:#777;display:flex;align-items:center;gap:7px}.live-dot{width:7px;height:7px;border-radius:50%;background:#42b67a;display:inline-block;box-shadow:0 0 0 3px #ddf5e8}.icon-button{background:transparent;color:#777;display:inline-grid;place-items:center;padding:5px;border-radius:7px}.icon-button:hover{background:#f3f3f1;color:var(--black)}.notification-button{position:relative}.notification-button i{width:5px;height:5px;border-radius:50%;background:var(--pure-red);position:absolute;top:3px;right:3px;border:1px solid #fff}.top-avatar{width:31px;height:31px;background:#ebe9e2;font-size:10px}.menu-button,.mobile-close{display:none}.page{padding:35px 42px 55px;max-width:1550px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.eyebrow{color:#a0a09d;letter-spacing:1.2px;font-weight:700;font-size:9px;margin:0 0 9px}.page-heading h1{font:700 28px Space Grotesk;letter-spacing:-.8px;margin:0;color:var(--black)}.page-heading h1 span{font:22px sans-serif}.subtitle,.panel-heading p{color:var(--muted);font-size:12px;margin:8px 0 0}.primary-button{color:#fff;background:var(--pure-red);border-radius:7px;padding:11px 16px;font-weight:700;font-size:12px;box-shadow:0 5px 14px #f0000022}.primary-button span{font-size:18px;vertical-align:-1px;margin-right:5px}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:24px}.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;display:flex;gap:13px;align-items:flex-start}.metric-icon{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;border-radius:9px}.metric-icon.gold{background:#fff5ba;color:#af8c00}.metric-icon.red{background:#ffe2df;color:var(--pure-red)}.metric-icon.green{background:#e0f5e9;color:#2e9a5f}.metric-icon.dark{background:#ededeb;color:#333}.metric-card span,.metric-card strong,.metric-card small{display:block}.metric-card>div:last-child>span{font-size:11px;color:#888;margin:2px 0 4px}.metric-card strong{font:700 26px Space Grotesk;color:var(--black)}.metric-card strong small{display:inline;font-size:13px}.metric-card small{font-size:10px;color:#43a46c;margin-top:5px}.metric-card small i{color:#aaa;font-style:normal;margin-left:3px}.metric-card .neutral{color:#aaa}.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.8fr);gap:20px}.panel{border:1px solid var(--line);background:#fff;border-radius:10px;overflow:hidden}.shipments-panel{min-width:0}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 22px 16px}.panel-heading h2{margin:0;font:700 15px Space Grotesk;color:var(--black)}.text-button{color:var(--pure-red);font-weight:700;background:transparent;font-size:11px}.text-button span{font-size:16px;margin-left:4px}.table-tools{display:flex;gap:9px;padding:0 22px 16px;border-bottom:1px solid var(--line)}.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;flex:1;padding:0 10px;color:#aaa}.search-box input{border:0;outline:0;width:100%;min-width:0;padding:9px 0;font-size:11px}.filter-button{background:#fff;border:1px solid var(--line);border-radius:6px;color:#777;padding:0 10px;font-size:10px;display:flex;align-items:center;gap:9px;white-space:nowrap}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:700px}th{text-align:left;color:#ababab;letter-spacing:.8px;font-size:9px;font-weight:700;padding:14px 12px;border-bottom:1px solid var(--line)}th:first-child,td:first-child{padding-left:22px}th:last-child,td:last-child{padding-right:18px}td{padding:14px 12px;border-bottom:1px solid #f0f0ee;font-size:11px;vertical-align:middle}td>strong,td>span{display:block}td strong{font-size:11px}.tracking{color:var(--black)}.vehicle,td>span{color:#a1a1a1;margin-top:4px;font-size:10px}.driver-cell{display:flex;align-items:center;gap:7px;white-space:nowrap}.small-avatar{width:23px;height:23px;color:#745f00;background:#fff0a2;font-size:8px}.status{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:5px 8px;font-size:9px;font-weight:700;white-space:nowrap}.status i{width:5px;height:5px;border-radius:50%}.status-route{background:#fff1bb;color:#886d00}.status-route i{background:#d7aa00}.status-pending{background:#f1f1ef;color:#777}.status-pending i{background:#aaa}.status-delivered{background:#e0f5e9;color:#2d9360}.status-delivered i{background:#39ae70}.row-menu{background:transparent;color:#aaa;letter-spacing:1px}.table-footer{display:flex;align-items:center;gap:5px;padding:14px 22px;color:#999;font-size:10px}.table-footer span{margin-right:auto}.table-footer button{background:transparent;color:#999;width:24px;height:24px;border-radius:5px;font-size:11px}.table-footer .pagination-active{background:var(--black);color:#fff}.map-panel{align-self:start}.map-placeholder{margin:0 18px;height:280px;position:relative;overflow:hidden;border-radius:7px;background:#e9e8de;background-image:radial-gradient(#d2d1c5 1px,transparent 1px);background-size:16px 16px}.map-grid{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.55;background:linear-gradient(30deg,transparent 48%,#cecdc2 49%,#cecdc2 51%,transparent 52%),linear-gradient(115deg,transparent 48%,#d5d4c9 49%,#d5d4c9 51%,transparent 52%);background-size:80px 70px,100px 90px}.route-line{position:absolute;height:3px;background:var(--pure-red);transform-origin:left;box-shadow:0 0 0 2px #f000001c}.route-one{width:190px;left:58px;top:188px;transform:rotate(-35deg)}.route-two{width:150px;left:142px;top:135px;transform:rotate(28deg);background:var(--golden-pollen)}.map-pin{position:absolute;width:29px;height:29px;color:#fff;display:grid;place-items:center;border-radius:50% 50% 50% 3px;transform:rotate(-45deg);background:var(--pure-red)}.map-pin svg{transform:rotate(45deg)}.pin-one{left:89px;top:165px}.pin-two{left:265px;top:135px;background:var(--black)}.plant-pin{position:absolute;left:53px;top:199px;border-radius:50%;padding:7px;background:var(--bright-gold);color:var(--black);font:700 8px Space Grotesk;border:3px solid #fff}.map-label{position:absolute;bottom:10px;left:10px;background:#fff;border-radius:5px;padding:7px 9px;color:#555;font-size:10px;display:flex;align-items:center;gap:7px;box-shadow:0 2px 8px #0001}.map-summary{padding:17px 21px 20px;display:flex;align-items:end;justify-content:space-between}.map-summary strong,.map-summary span{display:block}.map-summary strong{font-size:11px}.map-summary span{color:#999;font-size:10px;margin-top:4px}@media(max-width:1100px){.sidebar{width:220px}.topbar,.page{padding-left:26px;padding-right:26px}.content-grid{grid-template-columns:1fr}.map-panel{display:none}.metrics-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.sidebar{position:fixed;z-index:10;inset:0 auto 0 0;transform:translate(-100%);transition:transform .25s;width:250px}.sidebar-open{transform:translate(0)}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9;background:#0008}.menu-button,.mobile-close{display:inline-grid}.mobile-close{margin-left:auto;color:#888}.topbar{height:61px;padding:0 17px;gap:10px}.breadcrumb{font-size:11px}.connection{display:none}.topbar-actions{gap:10px}.page{padding:25px 16px 35px}.page-heading{align-items:flex-start;flex-direction:column;gap:18px}.page-heading h1{font-size:24px}.primary-button{width:100%}.metrics-grid{gap:9px;margin-bottom:15px}.metric-card{padding:13px 10px;gap:8px}.metric-icon{width:31px;height:31px}.metric-card>div:last-child>span{font-size:9px}.metric-card strong{font-size:21px}.metric-card small{font-size:8px}.panel-heading{padding:17px 15px 14px}.panel-heading p{font-size:10px}.table-tools{padding:0 15px 13px}.filter-button{display:none}th:first-child,td:first-child{padding-left:15px}.table-footer{padding:12px 15px}.table-footer span{font-size:9px}}.status-incident{background:#ffe2df;color:var(--blood-red)}.row-action{border:1px solid var(--line);background:#fff;border-radius:5px;padding:6px 9px;color:var(--pure-red);font-size:10px;font-weight:700}.row-action:disabled{color:#aaa;cursor:default}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--black)}.login-brand{color:#fff;padding:12vh 10vw;position:relative;overflow:hidden;background:linear-gradient(135deg,#050505 50%,#190000)}.login-brand h1{font:700 42px Space Grotesk;margin:28px 0 8px}.login-brand p{color:#aaa;margin:0;font-size:16px}.login-mark{width:58px;height:58px;font-size:18px}.login-illustration{position:absolute;bottom:12vh;left:10vw;color:var(--golden-pollen);display:flex;align-items:center;gap:25px;opacity:.9}.login-illustration span{font-size:78px}.login-card{align-self:center;justify-self:center;width:min(390px,calc(100% - 40px));background:#fff;padding:38px;border-radius:14px}.login-card h2{font:700 27px Space Grotesk;margin:0;color:var(--black)}.login-subtitle{color:var(--muted);font-size:13px;margin:8px 0 28px}.login-card label{display:block;color:#555;font-size:11px;font-weight:700;margin-top:17px}.login-card input{display:block;width:100%;padding:12px;margin-top:7px;border:1px solid var(--line);border-radius:6px;outline-color:var(--golden-pollen);font-size:13px}.login-button{width:100%;margin-top:24px}.login-button:disabled{opacity:.7;cursor:wait}.form-error{color:var(--blood-red);background:#ffe8e5;border-radius:6px;padding:10px;margin-top:16px;font-size:11px}.demo-hint{text-align:center;color:#999;font-size:10px;margin:17px 0 0}.demo-hint strong{color:#666}.single-panel,.live-map-view,.directory-grid,.settings-grid{display:grid;gap:20px}.single-panel .shipments-panel{width:100%}.row-actions{display:flex;gap:5px;white-space:nowrap}.secondary-action{color:#555}.large-map{height:430px;margin:0 22px 20px}.live-map-view{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}.map-delivery-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px;padding:0 22px 22px}.map-delivery{display:flex;align-items:center;gap:9px;text-align:left;color:var(--pure-red);border:1px solid var(--line);border-radius:7px;padding:11px;background:#fff}.map-delivery span{flex:1}.map-delivery strong,.map-delivery small{display:block}.map-delivery strong{font-size:11px;color:var(--black)}.map-delivery small{color:#999;font-size:10px;margin-top:3px}.directory-grid{grid-template-columns:minmax(0,1.4fr) minmax(250px,.8fr)}.directory-panel,.dispatcher-card,.settings-panel{padding-bottom:10px}.driver-row,.setting-row{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--line)}.driver-row>div:nth-child(2),.setting-row>div{flex:1}.driver-row strong,.driver-row span,.setting-row strong,.setting-row span{display:block}.driver-row strong,.setting-row strong{font-size:12px}.driver-row div span,.setting-row div span{color:#999;font-size:10px;margin-top:4px}.driver-row .status{margin-left:auto}.dispatcher-card{padding:24px}.dispatcher-card h2{font:700 18px Space Grotesk;margin:18px 0 8px}.dispatcher-card p{color:#888;line-height:1.6;font-size:12px;margin-bottom:22px}.setting-badge{color:#8b7100;background:#fff3b2;border-radius:20px;padding:5px 9px;font-size:10px!important}.detail-backdrop{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;background:#05050599;display:grid;place-items:center;padding:20px}.shipment-detail{position:relative;width:min(500px,100%);background:#fff;border-radius:14px;padding:30px;box-shadow:0 20px 60px #0003}.detail-close{position:absolute;top:16px;right:16px}.back-link{display:flex;align-items:center;gap:5px;color:#888;background:transparent;font-size:11px;margin-bottom:26px}.shipment-detail h2{font:700 25px Space Grotesk;margin:0 0 10px}.destination-card{display:flex;gap:12px;align-items:flex-start;background:#fff9d8;border-radius:9px;padding:16px;margin:22px 0;color:var(--pure-red)}.destination-card div{flex:1}.destination-card small,.destination-card strong,.destination-card span{display:block}.destination-card small{color:#9a8500;font-size:9px;letter-spacing:.8px;font-weight:700}.destination-card strong{color:var(--black);font-size:14px;margin:6px 0}.destination-card span{color:#888;font-size:11px}.navigation-actions{border-top:1px solid var(--line);padding-top:18px}.navigation-actions strong{font-size:13px}.navigation-actions p{color:#999;font-size:11px;margin:6px 0 13px}.navigation-actions>div{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.map-button{display:flex;align-items:center;justify-content:center;gap:5px;border-radius:6px;padding:10px 6px;font-size:10px;font-weight:700;text-decoration:none}.map-button.google{background:#eaf2ff;color:#1769d2}.map-button.waze{background:#e2f9ff;color:#0085a6}.map-button.apple{background:#ededed;color:#222}.detail-action{width:100%;margin-top:22px}@media(max-width:700px){.login-page{display:block;background:var(--soft)}.login-brand{padding:35px 25px 80px;border-radius:0 0 28px 28px}.login-brand h1{font-size:30px;margin-top:20px}.login-brand p{font-size:13px}.login-illustration{bottom:15px;left:auto;right:35px}.login-illustration span{font-size:48px}.login-illustration svg{width:50px}.login-card{margin:-35px auto 0;position:relative;padding:28px 24px}.profile-mini .icon-button{margin-left:auto}}@media(max-width:700px){.directory-grid{grid-template-columns:1fr}.large-map{height:300px;margin-left:15px;margin-right:15px}.map-delivery-list{padding-left:15px;padding-right:15px}.navigation-actions>div{grid-template-columns:1fr}.shipment-detail{padding:24px}}