@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--surface: #161b27;--surface2: #1e2535;--border: #2a3144;--border-subtle: #1e2535;--text: #f1f5f9;--text-2: #94a3b8;--text-3: #4b5563;--green: #4ade80;--green-bg: #052e16;--blue: #60a5fa;--blue-bg: #1e3a5f;--amber: #f59e0b;--amber-bg: #451a03;--red: #ef4444;--red-bg: #450a0a;--radius: 8px;--font: "Inter", system-ui, sans-serif}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}.navbar{height:56px;display:flex;align-items:center;gap:32px;padding:0 24px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:200}.nav-logo{height:36px;width:auto}.nav-links{display:flex;gap:4px}.nav-link{padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;transition:background .15s,color .15s}.nav-link:hover{background:var(--surface2);color:var(--text)}.nav-link.active{color:var(--text);background:var(--surface2)}.app-body{padding:32px;max-width:1280px;margin:0 auto}.page-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.page-title{font-size:22px;font-weight:600;letter-spacing:-.02em}.page-sub{font-size:13px;color:var(--text-2);margin-top:2px}.search-input{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-family:var(--font);font-size:13px;color:var(--text);outline:none;width:260px;transition:border-color .15s}.search-input::placeholder{color:var(--text-3)}.search-input:focus{border-color:#4b6bae}.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.fleet-table{width:100%;border-collapse:collapse;font-size:13px}.fleet-table thead tr{border-bottom:1px solid var(--border)}.fleet-table th{padding:11px 16px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:color .15s}.fleet-table th:hover,.fleet-table th.sorted{color:var(--text)}.sort-icon{font-size:10px;margin-left:2px}.fleet-table td{padding:14px 16px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}.fleet-table tbody tr:last-child td{border-bottom:none}.clickable-row{cursor:pointer;transition:background .1s}.clickable-row:hover{background:var(--surface2)}.vehicle-name-cell{display:flex;flex-direction:column;gap:2px}.vname{font-weight:600;font-size:13px}.vvin{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}.num{font-variant-numeric:tabular-nums}.dim{color:var(--text-2)}.soc-cell{display:flex;align-items:center;gap:8px;min-width:90px}.soc-mini-track{flex:1;height:4px;background:var(--surface2);border-radius:2px;overflow:hidden}.soc-mini-fill{height:100%;border-radius:2px}.status-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}.status-chip.online{background:var(--green-bg);color:var(--green)}.status-chip.offline{background:var(--surface2);color:var(--text-3)}.chip-dot{width:5px;height:5px;border-radius:50%;background:currentColor}.status-chip.online .chip-dot{animation:blink 2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.badge-green{background:var(--green-bg);color:var(--green)}.badge-amber{background:var(--amber-bg);color:var(--amber)}.badge-red{background:var(--red-bg);color:var(--red)}.badge-gray{background:var(--surface2);color:var(--text-3)}.drawer-overlay{position:fixed;inset:0;background:#00000080;z-index:300;display:flex;justify-content:flex-end}.drawer{width:680px;max-width:95vw;height:100vh;background:var(--bg);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;animation:slideIn .2s ease}@keyframes slideIn{0%{transform:translate(40px);opacity:0}to{transform:translate(0);opacity:1}}.drawer-header{padding:24px 24px 0;border-bottom:1px solid var(--border);flex-shrink:0}.drawer-title-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.drawer-name{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:3px}.drawer-vin{font-size:11px;color:var(--text-3)}.drawer-header-right{display:flex;align-items:center;gap:12px}.close-btn{background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text-2);font-size:13px;padding:4px 10px;cursor:pointer;transition:background .15s,color .15s}.close-btn:hover{background:var(--border);color:var(--text)}.drawer-kpis{display:flex;gap:28px;padding-bottom:16px}.dkpi{display:flex;flex-direction:column;gap:4px}.dkpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2)}.dkpi-val{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.dkpi-val.blue{color:var(--blue)}.dkpi-val.dim{color:var(--text-2);font-weight:400}.drawer-tabs{display:flex;gap:0;padding:0 24px;border-bottom:1px solid var(--border);flex-shrink:0}.dtab{background:none;border:none;border-bottom:2px solid transparent;padding:12px 16px;font-family:var(--font);font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s}.dtab:hover{color:var(--text)}.dtab.active{color:var(--text);border-bottom-color:var(--blue)}.drawer-content{flex:1;overflow-y:auto;padding:20px 24px 24px}.tab-body{display:flex;flex-direction:column;gap:0}.kpi-row{display:flex;gap:12px;margin-bottom:16px}.kpi-card{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);margin-bottom:6px}.kpi-value{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}.kpi-value.green{color:var(--green)}.kpi-value.blue{color:var(--blue)}.kpi-value.amber{color:var(--amber)}.kpi-value.dim{color:var(--text-2);font-size:16px}.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px}.chart-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);margin-bottom:14px}.data-table{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}.data-table table{width:100%;border-collapse:collapse;font-size:12px}.data-table thead tr{border-bottom:1px solid var(--border)}.data-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}.data-table td{padding:11px 14px;border-bottom:1px solid var(--border-subtle);color:var(--text);font-variant-numeric:tabular-nums}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background:var(--surface2)}.green{color:var(--green)}.health-hero{display:flex;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:0}.health-ring-wrap{position:relative;flex-shrink:0}.health-ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.health-pct{font-size:22px;font-weight:700;line-height:1}.health-sub{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);margin-top:2px}.empty-state{text-align:center;color:var(--text-2);font-size:13px;padding:48px 0}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}@media(max-width:640px){.app-body{padding:16px}.navbar{gap:12px;padding:0 16px}.nav-logo{height:28px}.nav-link{padding:6px 9px;font-size:12px}.page-header{flex-direction:column;align-items:flex-start;gap:12px}.search-input{width:100%}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.fleet-table th:nth-child(4),.fleet-table td:nth-child(4),.fleet-table th:nth-child(5),.fleet-table td:nth-child(5),.fleet-table th:nth-child(6),.fleet-table td:nth-child(6){display:none}.fleet-table th,.fleet-table td{padding:11px 10px}.drawer-overlay{justify-content:stretch}.drawer{width:100%;max-width:100%;border-left:none;border-top:1px solid var(--border);animation:slideUp .22s ease}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.drawer-header{padding:16px 16px 0}.drawer-content{padding:16px}.drawer-name{font-size:18px}.drawer-kpis{flex-wrap:wrap;gap:16px}.dkpi{min-width:80px}.drawer-tabs{overflow-x:auto;gap:0;padding:0 16px}.drawer-tabs::-webkit-scrollbar{display:none}.dtab{padding:12px;font-size:12px;white-space:nowrap}.kpi-row{flex-wrap:wrap}.kpi-card{flex:1 1 calc(50% - 6px);min-width:0}.kpi-value{font-size:17px}.chart-card{padding:12px}.data-table{overflow-x:auto;-webkit-overflow-scrolling:touch}.health-hero{flex-direction:column;align-items:flex-start}}