:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f5f7fa;color:#111827;--surface: #ffffff;--surface-soft: #f8fafc;--line: #dfe5ec;--muted: #64748b;--text: #111827;--teal: #0f9f8f;--green: #16a34a;--blue: #2563eb;--amber: #f59e0b;--red: #dc2626;--ink: #0f172a;--shadow: 0 18px 45px rgba(15, 23, 42, .08)}*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit}.app-shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;gap:22px}.brand{display:flex;align-items:center;gap:11px;min-height:44px}.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--teal);color:#fff;border-radius:8px}.brand strong,.vehicle-head h2,.section-header h2{display:block;letter-spacing:0}.brand strong{font-size:17px}.brand span,.firebase-card small,.vehicle-head small,.spark-card span{color:var(--muted);font-size:12px}nav{display:grid;gap:5px}.nav-item,.icon-button,.group-select,.filter-row button,.action-row button,.map-toolbar button{border:1px solid transparent;background:transparent;color:#172033;cursor:pointer}.nav-item{width:100%;min-height:44px;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;border-radius:7px;padding:0 10px;text-align:left;font-size:14px}.nav-item.active{background:#e9fffb;color:#087b73;border-left:4px solid var(--teal)}.nav-item em,.with-badge span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-style:normal;font-weight:700}.firebase-card{margin-top:auto;border:1px solid var(--line);border-radius:8px;padding:14px;background:#fbfdff}.status-line,.sync-chip,.vehicle-head>div,.section-header,.filter-row,.action-row,.detail-row,.topbar,.mission-actions,.connector-panel,.connector-panel>div{display:flex;align-items:center}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot.good{background:var(--green)}.dot.warn{background:var(--amber)}.firebase-card p{margin:8px 0 5px;color:#087b73;font-weight:700}.workspace{min-width:0;padding:16px 18px 20px}.topbar{gap:12px;margin-bottom:16px}.topbar-spacer{flex:1}.icon-button,.group-select,.sync-chip{min-height:38px;border:1px solid var(--line);background:var(--surface);border-radius:7px}.icon-button{width:40px;display:grid;place-items:center;position:relative}.group-select{padding:0 14px;display:flex;align-items:center;gap:16px}.role-switcher{display:inline-grid;grid-template-columns:repeat(3,minmax(82px,1fr));gap:4px;min-height:38px;padding:4px;border:1px solid var(--line);border-radius:8px;background:#eef2f7}.role-switcher button{border:0;border-radius:6px;background:transparent;color:#475569;cursor:pointer;font-size:12px;font-weight:800}.role-switcher button.active{background:#fff;color:#0f766e;box-shadow:0 6px 16px #0f172a14}.sync-chip{padding:0 12px;display:flex;gap:8px;font-weight:700;font-size:13px}.with-badge span{position:absolute;top:-7px;right:-7px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;margin-bottom:12px}.ops-panel{margin-bottom:14px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.ops-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.ops-head h2{margin:0;font-size:18px;letter-spacing:0}.ops-head p{margin:4px 0 0;color:var(--muted);font-size:13px}.ops-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:#ecfdf5;color:#0f766e}.ops-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px}.info-tile{border:1px solid var(--line);border-radius:8px;padding:12px;background:#fbfdff}.info-tile span,.info-tile small{color:var(--muted);font-size:12px}.info-tile strong{display:block;margin:7px 0 3px;font-size:16px}.device-form{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px}.device-form label,.access-form label{display:grid;gap:6px;color:#334155;font-size:12px;font-weight:800}.device-form input,.device-form select,.access-form input{width:100%;min-height:38px;border:1px solid var(--line);border-radius:7px;padding:0 10px;background:#fff;color:var(--ink);font:inherit;font-size:13px}.device-form button,.access-form button{min-height:38px;align-self:end;border:0;border-radius:7px;background:var(--teal);color:#fff;cursor:pointer;font-weight:800}.access-form{display:grid;grid-template-columns:minmax(180px,1fr) 150px 160px;gap:10px}.permission-editor{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.permission-editor label{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:#fbfdff;color:#334155;cursor:pointer;font-size:12px;font-weight:800}.permission-editor input{accent-color:var(--teal)}.login-list{display:grid;gap:9px;margin-top:12px}.login-list article{display:grid;grid-template-columns:170px minmax(220px,1fr) 110px minmax(220px,1.1fr);align-items:center;gap:10px;min-height:62px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fbfdff}.login-list strong,.login-list span,.login-list small{display:block}.login-list span,.login-list p{color:var(--muted);font-size:12px}.login-list code{overflow-wrap:anywhere;padding:8px 9px;border:1px solid #bfdbfe;border-radius:7px;background:#eff6ff;color:#1d4ed8;font-size:12px}.login-code{padding:7px 9px;border-radius:7px;background:#f0fdfa;color:#0f766e;font-weight:800}.login-code span{color:#0f766e;font-size:15px}.login-code small{color:#0f766e;font-size:11px}.login-list p{margin:0;line-height:1.35}.form-message{margin:10px 0 0;color:#0f766e;font-size:13px;font-weight:800}.device-list{display:grid;gap:8px;margin-top:12px}.device-list article{display:grid;grid-template-columns:140px 150px 1fr 90px;align-items:center;gap:10px;min-height:42px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#fbfdff;font-size:13px}.device-list span{color:var(--muted)}.device-list em{justify-self:end;border-radius:6px;padding:4px 8px;font-style:normal;font-size:12px;font-weight:800}.device-list em.connected{background:#dcfce7;color:#15803d}.device-list em.pending{background:#fef3c7;color:#b45309}.device-list em.blocked{background:#fee2e2;color:var(--red)}.mobile-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 300px;gap:14px;align-items:stretch}.phone-preview{min-height:286px;padding:14px;border:7px solid #172033;border-radius:28px;background:#f8fafc;box-shadow:inset 0 0 0 1px #fffc}.phone-speaker{width:52px;height:5px;margin:0 auto 14px;border-radius:999px;background:#334155}.phone-status,.phone-actions,.policy-card strong,.policy-card div,.policy-card span{display:flex;align-items:center}.phone-status{gap:8px;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px}.phone-map{height:128px;margin:12px 0;display:grid;place-items:center;gap:7px;border:1px solid #bfdbfe;border-radius:8px;color:#1d4ed8;background:repeating-linear-gradient(34deg,transparent 0 34px,rgba(37,99,235,.12) 35px 37px,transparent 38px 70px),#eff6ff;font-size:13px;font-weight:800}.phone-actions{gap:8px}.phone-actions button{min-width:0;flex:1;min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#172033;cursor:pointer;font-size:12px;font-weight:800}.phone-actions button:first-child{border-color:#fecaca;color:var(--red);background:#fff7f7}.access-card,.policy-card{min-width:0}.access-code{min-height:104px;margin-bottom:10px;padding:15px;border:1px solid rgba(15,159,143,.28);border-radius:8px;background:#f0fdfa}.access-code span,.access-code small{color:#0f766e;font-size:12px;font-weight:800}.access-code strong{display:block;margin:7px 0 4px;color:#0f172a;font-size:30px;letter-spacing:0}.permission-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.policy-card{padding:15px;border:1px solid #fecaca;border-radius:8px;background:#fff7f7}.policy-card strong{gap:8px;color:#991b1b}.policy-card p{margin:10px 0 12px;color:#475569;font-size:13px;line-height:1.5}.policy-card div{gap:8px;flex-wrap:wrap}.policy-card span{gap:5px;min-height:30px;padding:0 8px;border-radius:6px;background:#fff;color:#991b1b;font-size:12px;font-weight:800}.mission-strip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin-bottom:14px;padding:18px;background:linear-gradient(120deg,#0f9f8f1f,#2563eb14),var(--surface);border:1px solid var(--line);border-radius:8px}.mission-strip span{color:#087b73;font-size:12px;font-weight:800;text-transform:uppercase}.mission-strip h1{margin:5px 0 0;font-size:24px;line-height:1.18;letter-spacing:0;color:var(--ink)}.mission-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end}.mission-actions div{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:1px solid rgba(15,159,143,.22);background:#ffffffc7;border-radius:7px;color:#0f766e;font-size:12px;font-weight:800}.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px;min-height:76px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px}.metric-card span,.metric-card small,.insight-card small,.detail-row small{color:var(--muted);font-size:12px}.metric-card strong{display:block;font-size:24px;line-height:1.1}.metric-icon{width:38px;height:38px;display:grid;place-items:center;color:var(--blue);background:#eff6ff;border-radius:7px}.metric-card.good .metric-icon{color:var(--green);background:#ecfdf5}.metric-card.danger .metric-icon{color:var(--red);background:#fef2f2}.command-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px}.map-panel{min-height:510px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:linear-gradient(90deg,rgba(56,189,248,.35) 0 24%,transparent 24%),radial-gradient(circle at 42% 28%,rgba(255,255,255,.8),transparent 24%),repeating-linear-gradient(26deg,transparent 0 42px,rgba(37,99,235,.13) 43px 46px,transparent 47px 90px),repeating-linear-gradient(112deg,transparent 0 55px,rgba(15,159,143,.12) 56px 58px,transparent 59px 116px),#edf7fb}.map-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(15,23,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.05) 1px,transparent 1px);background-size:52px 52px}.map-toolbar{position:absolute;z-index:3;top:14px;left:14px;display:grid;gap:7px}.map-toolbar button{width:32px;height:32px;display:grid;place-items:center;background:#fff;border-color:var(--line);border-radius:6px;font-weight:800}.map-label{position:absolute;z-index:2;color:#0f172a;font-weight:800;text-shadow:0 1px white}.colombo{left:140px;top:210px;font-size:24px}.kaduwela{right:120px;top:190px}.nugegoda{left:260px;bottom:135px}.route-line{position:absolute;height:4px;background:#2563eb40;border-radius:99px;transform-origin:left center}.route-one{width:540px;left:220px;top:200px;transform:rotate(16deg)}.route-two{width:470px;left:330px;top:350px;transform:rotate(-10deg);background:#0f9f8f3d}.route-three{width:360px;left:130px;top:300px;transform:rotate(62deg);background:#f59e0b42}.vehicle-marker{position:absolute;z-index:4;display:flex;align-items:center;gap:6px;border:0;border-radius:6px;padding:7px 10px;color:#fff;font-size:12px;font-weight:800;box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease}.vehicle-marker:hover,.vehicle-marker.selected{transform:translateY(-2px);box-shadow:0 18px 36px #0f172a33;outline:3px solid rgba(255,255,255,.9)}.vehicle-marker.online{background:var(--teal)}.vehicle-marker.warning{background:var(--red)}.vehicle-marker.offline{background:#64748b}.marker-0{left:32%;top:24%}.marker-1{left:58%;top:38%}.marker-2{right:14%;top:50%}.marker-3{left:38%;bottom:25%;background:var(--amber)}.vehicle-panel,.alert-panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.vehicle-panel{padding:16px;min-width:0}.vehicle-head{border-bottom:1px solid var(--line);padding-bottom:14px}.vehicle-head>div{justify-content:space-between;gap:12px}.vehicle-head h2{margin:0;font-size:18px}.vehicle-head p{margin:8px 0 4px;font-weight:800}.status-pill{border-radius:6px;padding:5px 8px;font-size:12px;font-weight:800;text-transform:capitalize}.status-pill.online{background:#dcfce7;color:#15803d}.status-pill.warning{background:#fef2f2;color:var(--red)}.status-pill.offline{background:#f1f5f9;color:#475569}.vehicle-photo{height:72px;margin:14px 0;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:#475569;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.insight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.insight-card{border:1px solid var(--line);border-radius:8px;padding:11px;min-height:108px}.insight-card span{color:var(--green)}.insight-card strong{display:block;margin-top:7px;font-size:22px}.insight-card em{color:var(--muted);font-size:12px;font-style:normal}.insight-card.danger span,.insight-card.danger strong{color:var(--red)}.spark-card{margin-top:10px;border:1px solid var(--line);border-radius:8px;padding:12px}.spark-card div{display:flex;justify-content:space-between;gap:12px}.spark-card svg{width:100%;height:52px}.spark-card polyline{fill:none;stroke:var(--teal);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.detail-list{display:grid;gap:8px;margin-top:10px}.detail-row{gap:10px;border:1px solid var(--line);border-radius:8px;padding:10px}.detail-row>span{color:var(--blue)}.detail-row strong{display:block;font-size:13px}.action-row{gap:8px;margin-top:12px}.action-row button{flex:1;min-height:38px;border-color:var(--line);border-radius:7px;background:var(--surface-soft);font-weight:800;font-size:13px}.alert-panel{margin-top:12px;padding:14px}.connector-panel{justify-content:space-between;gap:12px;margin-top:12px;padding:14px;background:#0f172a;color:#fff;border-radius:8px}.connector-panel>div{gap:12px;min-width:0}.connector-panel h2{margin:0;font-size:16px;letter-spacing:0}.connector-panel p{margin:4px 0 0;color:#cbd5e1;font-size:13px}.connector-panel code{padding:9px 11px;background:#ffffff1a;border:1px solid rgba(255,255,255,.18);border-radius:7px;font-size:13px;white-space:nowrap}.connector-panel small{color:#93c5fd;font-weight:800;white-space:nowrap}.connector-icon{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;background:#ffffff1a;color:#5eead4;border-radius:8px}.connector-icon.live{background:#16a34a2e;color:#86efac}.section-header{justify-content:space-between;gap:12px;margin-bottom:10px}.section-header h2{margin:0;font-size:17px}.filter-row{gap:8px;flex-wrap:wrap}.filter-row button{min-height:32px;padding:0 12px;border-color:var(--line);border-radius:7px;background:var(--surface-soft);font-size:12px;font-weight:700}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:780px}th,td{border-top:1px solid var(--line);text-align:left;padding:11px 10px;font-size:13px}th{color:#334155;font-size:12px;background:#f8fafc}.severity,.status-dot{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:4px 8px;font-size:12px;font-weight:800;text-transform:capitalize}.severity.low{background:#dbeafe;color:#1d4ed8}.severity.medium{background:#fef3c7;color:#b45309}.severity.high,.severity.critical{background:#fee2e2;color:var(--red)}.status-dot{color:#64748b}.status-dot.new{color:var(--red)}@media (max-width: 1120px){.app-shell{grid-template-columns:78px minmax(0,1fr)}.brand div:last-child,.nav-item span,.firebase-card{display:none}.nav-item{grid-template-columns:1fr;justify-items:center}.command-grid{grid-template-columns:1fr}.mission-strip,.connector-panel{grid-template-columns:1fr;align-items:flex-start}.mission-actions{justify-content:flex-start}.ops-grid,.device-form,.access-form,.mobile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.access-form button,.policy-card{grid-column:1 / -1}.device-list article,.login-list article{grid-template-columns:1fr 1fr}}@media (max-width: 760px){.app-shell{display:block}.sidebar{display:none}.workspace{padding:12px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card{grid-template-columns:36px 1fr}.metric-card small{grid-column:2}.map-panel{min-height:430px}.vehicle-marker span{display:none}.vehicle-marker{padding:9px}.section-header{align-items:flex-start;flex-direction:column}.role-switcher{grid-template-columns:1fr}.topbar{align-items:stretch;flex-wrap:wrap}.ops-grid,.device-form,.access-form,.mobile-grid,.permission-list,.device-list article,.login-list article{grid-template-columns:1fr}.phone-preview{max-width:240px;margin:0 auto}.policy-card{grid-column:auto}.device-list em{justify-self:start}.mission-strip{padding:14px}.mission-strip h1{font-size:20px}.connector-panel{align-items:stretch;flex-direction:column}.connector-panel code,.connector-panel small{white-space:normal}}