:root { --navy:#132238; --blue:#1f7a8c; --mint:#d8f3ec; --ink:#16202c; --muted:#718096; --line:#e5eaf0; --paper:#f6f8fb; --orange:#e07a5f; --red:#d9534f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:242px; background:var(--navy); color:#fff; padding:26px 18px; display:flex; flex-direction:column; }
.brand { display:flex; gap:11px; align-items:center; margin:0 8px 52px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--navy); background:#b8eadf; font-size:12px; font-weight:800; }
.brand strong { display:block; font-size:13px; letter-spacing:-.2px; }.brand span { display:block; color:#9db0c5; font-size:10px; margin-top:3px; }
.nav { display:grid; gap:6px; }.nav-item { color:#a9b7c8; text-decoration:none; padding:12px 12px; border-radius:10px; display:flex; gap:12px; align-items:center; font-size:12px; font-weight:600; }.nav-item span { width:18px; text-align:center; font-size:16px; }.nav-item.active,.nav-item:hover { background:#223650; color:#fff; }
.sidebar-note { margin-top:auto; display:flex; align-items:center; gap:9px; padding:12px; border:1px solid #2a3b54; border-radius:12px; }.sidebar-note b,.sidebar-note small { display:block; }.sidebar-note b { font-size:10px; }.sidebar-note small { color:#94a7bd; font-size:9px; margin-top:3px; }.status-dot,.live-pill i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#64d5b6; box-shadow:0 0 0 4px #2e5260; }
.main-content { width:calc(100% - 242px); padding:35px 42px 24px; max-width:1600px; margin:0 auto; }.topbar { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:26px; }h1,h2,p { margin:0; }h1 { font-size:27px; letter-spacing:-1px; }.eyebrow { color:var(--blue); font-size:10px; text-transform:uppercase; letter-spacing:1.2px; font-weight:800; margin-bottom:7px; }.topbar-meta { display:flex; align-items:center; gap:14px; }.live-pill { color:#3f786d; background:var(--mint); padding:7px 10px; border-radius:999px; font-size:10px; font-weight:800; }.live-pill i { width:6px; height:6px; margin-right:5px; box-shadow:none; }.date-label { font-size:11px; color:var(--muted); }
.scenario-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 22px; color:#fff; background:linear-gradient(105deg,#15384c,#1f7a8c); border-radius:16px; margin-bottom:18px; box-shadow:0 10px 30px rgba(31,122,140,.14); }.scenario-panel .eyebrow { color:#a9ded5; }.scenario-panel h2 { font-size:19px; letter-spacing:-.4px; }.scenario-panel p:last-child { color:#c7e2e2; font-size:11px; }.scenario-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }.scenario-button { cursor:pointer; border:1px solid rgba(255,255,255,.26); color:#eafffb; background:rgba(255,255,255,.1); border-radius:8px; padding:9px 11px; font:600 10px Manrope; }.scenario-button:hover,.scenario-button.selected { background:#fff; color:#185267; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }.card,.metric { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 5px 18px rgba(27,50,75,.035); }.metric { padding:17px 18px; }.metric-label { color:var(--muted); font-size:10px; font-weight:700; }.metric-value { margin-top:8px; font-size:25px; letter-spacing:-1px; }.metric-hint { margin-top:4px; font-size:9px; color:#93a1ae; }.metric-accent { color:var(--blue); }.metric-warning { color:#d77b45; }.metric-danger { color:var(--red); }
.content-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.9fr); gap:18px; margin-bottom:18px; }.card { padding:20px; }.card-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:15px; }.card-heading h2 { font-size:16px; letter-spacing:-.4px; }.legend { color:var(--muted); font-size:10px; display:flex; gap:6px; align-items:center; }.legend-bus { width:8px; height:8px; display:inline-block; border-radius:50%; background:var(--blue); }.count-badge { background:#edf7f6; color:#267d76; border-radius:8px; padding:5px 8px; font-size:11px; font-weight:800; }
#map { height:340px; border-radius:11px; overflow:hidden; background:#dae7e6; }.leaflet-container { font-family:Manrope,system-ui,sans-serif; }.bus-marker { width:22px; height:22px; display:grid; place-items:center; background:#fff; color:#1f7a8c; border:3px solid #1f7a8c; border-radius:50%; font-size:10px; font-weight:800; box-shadow:0 2px 8px rgba(0,0,0,.2); animation:bus-pulse 1.8s ease-in-out infinite; }.stop-marker { width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid #6f8190; }
@keyframes bus-pulse { 0%,100% { box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0 rgba(31,122,140,.15); } 50% { box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 5px rgba(31,122,140,.08); } }
.incident-list { display:grid; gap:9px; }.incident { padding:12px 11px; border-left:3px solid #e5a34a; background:#fbfcfd; border-radius:0 9px 9px 0; }.incident.high { border-left-color:var(--red); }.incident-title { font-size:11px; font-weight:800; }.incident-meta { color:var(--muted); font-size:9px; margin-top:5px; }.incident-status { display:inline-block; color:#9a6822; background:#fff5dc; border-radius:5px; padding:2px 5px; margin-left:5px; }
.route-card { margin-bottom:18px; }.ghost-button { color:var(--blue); background:#f2f8f8; border:0; border-radius:8px; padding:9px 11px; font:700 10px Manrope; cursor:pointer; }.table-wrap { overflow:auto; }table { width:100%; border-collapse:collapse; font-size:11px; }th { text-align:left; color:#92a0af; font-size:9px; text-transform:uppercase; letter-spacing:.6px; padding:10px 8px; border-bottom:1px solid var(--line); }td { padding:13px 8px; border-bottom:1px solid #eef1f4; }tbody tr:last-child td { border-bottom:0; }.route-id { color:var(--blue); font-weight:800; }.route-name { display:block; font-weight:700; margin-top:2px; }.bar-wrap { width:85px; height:6px; background:#edf0f3; border-radius:9px; display:inline-block; vertical-align:middle; margin-right:5px; }.bar { height:100%; border-radius:9px; background:#e3a55c; }.load-label { color:#9b6c2b; font-size:10px; }.load-low { color:#438b76; }.load-low .bar { background:#7acbb7; }
.analytics-row { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; }.insight-card { background:#eff8f6; border-color:#d5eee8; }.insight-card h2 { font-size:17px; margin-bottom:7px; }.insight-card p:last-child,.kpi-card p:last-child { color:#72878a; font-size:11px; line-height:1.6; }.kpi-value { font-size:35px; font-weight:800; color:var(--blue); letter-spacing:-2px; margin:4px 0 2px; }.kpi-bar { height:7px; border-radius:10px; background:#deeeeb; margin-top:14px; }.kpi-bar span { display:block; height:100%; border-radius:10px; background:var(--blue); transition:width .3s; }
footer { display:flex; justify-content:space-between; margin-top:23px; color:#9ba7b3; font-size:9px; }footer a { color:var(--blue); text-decoration:none; }
@media (max-width:900px) { .sidebar { width:70px; padding:20px 10px; }.brand { margin:0 0 38px; justify-content:center; }.brand>div:last-child,.nav-item:not(.active)::after,.nav-item { font-size:0; }.nav-item { justify-content:center; padding:12px 0; }.nav-item span { font-size:17px; }.sidebar-note { padding:8px; justify-content:center; }.sidebar-note div { display:none; }.main-content { width:calc(100% - 70px); padding:25px 20px; }.content-grid,.analytics-row { grid-template-columns:1fr; }.metric-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .topbar,.scenario-panel,footer { display:block; }.topbar-meta { margin-top:12px; }.scenario-actions { justify-content:flex-start; margin-top:16px; }.metric-grid { gap:8px; }.metric { padding:13px; }.metric-value { font-size:21px; }.main-content { padding:20px 12px; }h1 { font-size:23px; }#map { height:280px; }footer span { display:block; margin-top:5px; } }