:root{--ink:#14232d;--muted:#82909a;--line:#e9eef0;--green:#27b879;--navy:#112b3b;--red:#ef6560;--amber:#f3ad43}*{box-sizing:border-box}body{margin:0;background:#f7f9fa;color:var(--ink);font-family:'DM Sans',sans-serif}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:var(--navy);color:#fff;padding:28px 17px;display:flex;flex-direction:column;flex-shrink:0}.brand{display:flex;align-items:center;gap:11px;padding:0 12px 39px}.brand-mark{width:35px;height:35px;border-radius:10px;background:#31c98a;color:#0d3a32;font:700 12px 'Space Grotesk';display:grid;place-items:center}.brand strong{display:block;font:700 19px 'Space Grotesk';letter-spacing:-.5px}.brand span{font-size:8px;letter-spacing:1.5px;color:#87a0aa}.side-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#71909b;margin:0 12px 12px}.sidebar nav{margin-bottom:30px}.sidebar a{display:flex;align-items:center;gap:13px;padding:12px 13px;color:#a6bac1;text-decoration:none;border-radius:8px;font-size:13px;margin:3px 0}.sidebar a i{width:17px;text-align:center;font-style:normal;font-size:17px}.sidebar a b{margin-left:auto;background:#e85d5c;color:#fff;border-radius:10px;font-size:10px;padding:2px 7px}.sidebar a.active,.sidebar a:hover{background:#1e4658;color:white}.sidebar-bottom{margin-top:auto}.gateway{border:1px solid #2c5261;border-radius:8px;padding:12px;display:flex;align-items:center;gap:9px;margin:0 4px 25px}.gateway small,.user small{display:block;color:#7fa0aa;font-size:9px}.gateway strong{font-size:11px}.gateway em{margin-left:auto;color:#36d394;font-size:11px;font-style:normal}.pulse,.green-dot,.yellow-dot,.red-dot,.grey-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--green)}.pulse{box-shadow:0 0 0 4px rgba(39,184,121,.15)}.user{display:flex;align-items:center;gap:10px;padding:0 8px}.user .avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#e4b46f;color:#fff;font-size:10px;font-weight:bold}.user strong{font-size:12px}.user>span{margin-left:auto;color:#9eb5bd}.main{padding:37px 42px 23px;flex:1;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:27px}.eyebrow{color:#9aa8b0;font-size:10px;font-weight:700;letter-spacing:1.4px;margin-bottom:8px}.topbar h1{font:700 27px 'Space Grotesk';margin:0;letter-spacing:-1px}.topbar h1 span{color:#efb448;font-size:20px}.topbar p{color:var(--muted);font-size:12px;margin:7px 0}.top-actions{display:flex;align-items:center;gap:18px}.live{color:#2ca979;font-size:10px;font-weight:700;letter-spacing:1px}.live span{width:7px;height:7px;background:var(--green);display:inline-block;border-radius:50%;margin-right:6px}.icon-btn,.notif{background:none;border:0;font-size:22px;color:#8b9aa1;position:relative}.notif{font-size:22px}.notif b{position:absolute;right:-6px;top:-4px;background:#ef6560;color:#fff;border-radius:50%;font-size:8px;padding:3px 5px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:19px}.stat-card{height:127px;background:#fff;border:1px solid #edf1f2;border-radius:9px;padding:20px;display:flex;gap:13px;position:relative;overflow:hidden}.stat-icon{width:32px;height:32px;border-radius:8px;background:#e9f7f0;color:#28b980;display:grid;place-items:center;font-weight:bold}.amber .stat-icon{background:#fff6e8;color:#eea943}.red .stat-icon{background:#fff0ef;color:#ed6c67}.stat-card span{font-size:11px;color:#7e8d95;display:block;margin:1px 0 5px}.stat-card strong{display:block;font:700 25px 'Space Grotesk'}.stat-card strong small{font:500 11px 'DM Sans';color:#839099}.stat-card em{display:block;color:#2cb67d;font-style:normal;font-size:9px;margin-top:5px}.stat-card em.danger{color:#ed6b66}.stat-card>div:nth-child(2){min-width:0;max-width:calc(100% - 78px)}.stat-card .ring{top:18px;right:16px;width:44px;height:44px}.stat-card .alert-dot{top:18px;right:16px;width:36px;height:36px}.stat-card .battery-mini{top:24px;right:18px}@media(max-width:1300px){.stats{grid-template-columns:repeat(2,1fr)}.stat-card{height:118px}.stat-card>div:nth-child(2){max-width:calc(100% - 78px)}}.mini-chart{position:absolute;right:16px;top:20px;height:30px;width:46px;display:flex;align-items:end;gap:3px}.mini-chart i{display:block;flex:1;background:#9fdfc4;border-radius:2px}.ring{position:absolute;right:18px;top:43px;width:45px;height:45px;border:5px solid #d8f3e8;border-top-color:#2cbd80;border-radius:50%;font-size:9px;display:grid;place-items:center;color:#31b77e}.battery-mini{position:absolute;right:20px;top:46px;width:43px;height:20px;border:2px solid #f2c477;border-radius:4px}.battery-mini:after{content:'';position:absolute;right:-5px;top:5px;width:3px;height:6px;background:#f2c477}.battery-mini i{display:block;background:#f2bd5f;width:65%;height:100%}.alert-dot{position:absolute;right:27px;top:45px;width:38px;height:38px;border-radius:50%;background:#fff0ef;color:#eb6b66;display:grid;place-items:center;font-weight:bold}.content-grid,.bottom-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:19px;margin-bottom:19px}.bottom-grid{grid-template-columns:1.5fr 1fr}.panel{background:#fff;border:1px solid #edf1f2;border-radius:9px;padding:20px;min-width:0}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.panel h2{font:600 15px 'Space Grotesk';margin:0 0 4px}.panel-head p{font-size:10px;color:#95a1a7;margin:0}.map-panel{padding-bottom:13px}.map-tools{display:flex;gap:6px}.filter{border:1px solid #edf0f1;background:#fff;color:#7d8b92;border-radius:4px;padding:6px 8px;font-size:9px}.filter.active{background:#eefaf5;color:#27ae76;border-color:#d5f1e4}.filter b{font-size:9px}.filter i{margin-right:4px}.yellow-dot{background:#f0bb55}.red-dot{background:#ef6861}.grey-dot{background:#a7b1b6}#map{height:258px;border-radius:7px;background:#dfe8e5;z-index:0}.map-legend{display:flex;gap:17px;padding:10px 3px 0;color:#849198;font-size:9px}.map-legend i{margin-right:4px}.view-all{font-size:10px;color:#31b17c;text-decoration:none}.view-all span{font-size:15px;margin-left:3px}.alerts{min-height:337px}.alert-list{display:flex;flex-direction:column;gap:8px}.alert-item{display:flex;gap:11px;padding:11px 9px;border-radius:6px;border-left:3px solid #ee6560;background:#fff7f7;align-items:flex-start}.alert-item.warning{border-color:#f0b44e;background:#fffbf3}.alert-item.info{border-color:#62a9df;background:#f5faff}.alert-symbol{width:22px;height:22px;border-radius:50%;background:#ffe5e4;color:#ed6560;display:grid;place-items:center;font-size:11px;font-weight:bold}.warning .alert-symbol{background:#ffedc9;color:#ecae45}.info .alert-symbol{background:#dcedfc;color:#5396cb}.alert-item strong{font-size:10px}.alert-item p{margin:3px 0;color:#74828a;font-size:9px}.alert-item small{font-size:8px;color:#a6b0b5}.alert-item button{margin-left:auto;border:0;background:none;color:#b5c0c4;font-size:20px}.outline-btn{width:100%;margin-top:18px;border:1px solid #cceee0;background:#f7fffb;color:#2bb47c;border-radius:5px;padding:10px;font-size:10px}.outline-btn span{float:right;font-size:15px}.telemetry{min-height:329px}.telemetry select{border:1px solid #e5ecee;border-radius:4px;padding:7px;color:#829096;font-size:9px;background:white}.chart-wrap{display:flex;height:164px}.chart-y{width:34px;display:flex;flex-direction:column;justify-content:space-between;color:#acb7bb;font-size:8px;padding:0 0 23px}.chart{position:relative;flex:1}.chart svg{width:100%;height:132px;position:absolute;top:2px}.area{fill:url(#fill)}.line{fill:none;stroke:#36bd84;stroke-width:3}.gridline{position:absolute;left:0;right:0;border-top:1px dashed #e8edef}.l1{top:0}.l2{top:33px}.l3{top:66px}.l4{top:99px}.chart-x{display:flex;justify-content:space-between;color:#a5b0b4;font-size:8px;position:absolute;bottom:9px;left:0;right:0}.chart-summary{display:flex;border-top:1px solid #eef1f2;padding-top:14px;gap:25px}.chart-summary span{display:block;color:#94a0a6;font-size:9px}.chart-summary strong{font:600 15px 'Space Grotesk';display:block;margin-top:5px}.chart-summary em{font-size:9px;font-style:normal;color:#2cb77e;margin-left:4px}.chart-summary em.down{color:#e0a646}.chart-summary em.danger{color:#ef6863}.unit-table{font-size:9px}.table-head,.unit-row{display:grid;grid-template-columns:1.45fr .9fr 1.1fr .7fr;align-items:center;gap:6px}.table-head{color:#a0acb0;font-size:8px;letter-spacing:.8px;padding:0 4px 10px;border-bottom:1px solid #eef1f2}.unit-row{padding:11px 4px;border-bottom:1px solid #f1f3f4}.unit-name{display:flex;gap:8px;align-items:center}.unit-name strong{display:block;font-size:10px}.unit-name small{display:block;color:#9aa6ab;font-size:8px;margin-top:2px}.unit-avatar{width:25px;height:25px;border-radius:6px;display:grid;place-items:center;font-size:10px;background:#e8f8f1;color:#27b87d}.unit-avatar.idle{background:#fff5e5;color:#ecac42}.unit-avatar.warning{background:#fff0ef;color:#ee6964}.unit-avatar.offline{background:#f0f2f3;color:#8e9a9f}.status-pill{justify-self:start;border-radius:10px;padding:4px 7px;background:#e9f8f1;color:#2bad77;font-size:8px}.status-pill.idle{background:#fff5e6;color:#df9e37}.status-pill.warning{background:#fff0ef;color:#e6605b}.status-pill.offline{background:#f0f2f3;color:#859298}.soc{display:flex;align-items:center;gap:7px}.soc-bar{height:5px;background:#eaf0ef;border-radius:3px;width:45px;overflow:hidden}.soc-bar i{display:block;height:100%;background:#30be83;border-radius:3px}.warning .soc-bar i{background:#ef6863}.soc strong,.speed{font-size:9px}.speed small{font-size:7px;color:#9ca8ad;font-weight:400}.fleet-list{min-height:329px}footer{display:flex;justify-content:space-between;color:#a4afb3;font-size:9px;margin-top:6px}footer strong{color:#6d7d85;font-weight:500}footer .green-dot{margin:0 4px}.drawer{position:fixed;inset:0;background:rgba(14,37,48,.35);display:none;justify-content:flex-end;z-index:1000}.drawer.show{display:flex}.drawer-inner{width:390px;background:#fff;height:100%;padding:30px;box-shadow:-5px 0 20px #0001;position:relative}.close{position:absolute;right:20px;top:15px;border:0;background:none;font-size:25px;color:#88979d}.detail-title{font:600 22px 'Space Grotesk';margin:20px 0 4px}.detail-sub{color:#91a0a5;font-size:11px;margin-bottom:25px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-box{border:1px solid #edf1f2;border-radius:7px;padding:14px}.detail-box span{display:block;color:#99a5aa;font-size:10px}.detail-box strong{display:block;font:600 19px 'Space Grotesk';margin-top:5px}.detail-box em{font-style:normal;font-size:9px;color:#2bb77c}.leaflet-control-attribution{font-size:7px}@media(max-width:1100px){.sidebar{width:210px}.main{padding:25px}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.sidebar{display:none}.main{padding:20px 14px}.content-grid,.bottom-grid{grid-template-columns:1fr}.top-actions .icon-btn,.top-actions .notif{display:none}.topbar h1{font-size:22px}.stats{grid-template-columns:1fr 1fr}.map-tools{display:none}.panel{padding:15px}.unit-table{overflow:auto}.unit-table>*{min-width:430px}footer{display:block;line-height:2}.chart-summary{gap:10px;justify-content:space-between}.chart-summary strong{font-size:13px}}