:root{
  --bg-dark:#0f1420;
  --bg-panel:#161d2e;
  --bg-card:#1a2236;
  --border:#232c42;
  --text-light:#e6e9f0;
  --text-muted:#8891a5;
  --accent-blue:#3b82f6;
  --accent-green:#22c55e;
  --accent-purple:#8b5cf6;
  --accent-orange:#f59e0b;
  --accent-red:#ef4444;
  --accent-cyan:#06b6d4;
}
body{background:var(--bg-dark); color:var(--text-light); font-family:'Segoe UI',system-ui,sans-serif;}
.login-body{background:var(--bg-dark); height:100vh;}
.login-card{background:var(--bg-panel); padding:35px; border-radius:12px; width:360px; border:1px solid var(--border);}

/* Topbar */
.topbar{background:var(--bg-panel); border-bottom:1px solid var(--border); padding:10px 20px; display:flex; align-items:center; gap:15px;}
.topbar .search-box{background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:6px 12px; color:var(--text-light); width:220px;}
.brand-logo{font-weight:700; font-size:18px;}
.brand-logo small{display:block; font-size:10px; color:var(--text-muted); font-weight:400;}

/* Sidebar */
.sidebar{background:var(--bg-panel); min-height:100vh; border-right:1px solid var(--border); width:220px;}
.sidebar a{color:var(--text-muted); text-decoration:none; display:flex; align-items:center; gap:10px; padding:10px 18px; font-size:14px; border-left:3px solid transparent;}
.sidebar a:hover, .sidebar a.active{background:var(--bg-card); color:var(--text-light); border-left-color:var(--accent-blue);}

/* Cards */
.stat-card{background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:14px 16px;}
.stat-card .icon-box{width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px;}
.stat-card .value{font-size:22px; font-weight:700;}
.stat-card .label{font-size:12px; color:var(--text-muted);}
.stat-card .growth{font-size:11px; color:var(--accent-green);}

.panel{background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:16px;}
.panel h6{font-size:12px; letter-spacing:.5px; color:var(--text-muted); text-transform:uppercase; margin-bottom:14px;}

.status-row{display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:6px 0; border-bottom:1px solid var(--border);}
.status-row:last-child{border-bottom:none;}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px;}

.quick-btn{display:flex; align-items:center; gap:8px; border:none; border-radius:8px; padding:10px 14px; font-size:13px; font-weight:600; width:100%; margin-bottom:8px; text-align:left;}

.mini-stat{background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center;}
.mini-stat .num{font-size:18px; font-weight:700;}
.mini-stat .lbl{font-size:11px; color:var(--text-muted);}

.footer-status{background:var(--bg-panel); border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); padding:8px 20px;}

.demo-banner{background:#3b2410; border:1px solid #f59e0b; color:#f59e0b; font-size:12px; padding:6px 14px; border-radius:6px;}

/* New elements for strict desktop-reference match */
.location-badge{background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:12px; color:var(--text-light); align-items:center;}
.btn-purple{background:var(--accent-purple); color:#fff; border:none;}
.topbar-icon{background:var(--bg-card); border:1px solid var(--border); width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; position:relative;}
.avatar-circle{width:34px; height:34px; border-radius:50%; background:var(--accent-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.growth-badge{font-size:10px; color:var(--accent-green); background:#16351f; padding:1px 6px; border-radius:10px; margin-left:6px;}
.mini-donut-wrap{display:flex; align-items:center; gap:10px;}
.mini-donut-wrap canvas{max-width:70px; max-height:70px;}
.feed-item{display:flex; justify-content:space-between; font-size:12px; padding:6px 0; border-bottom:1px solid var(--border);}
.feed-item:last-child{border-bottom:none;}
.feed-time{color:var(--text-muted); font-size:10px;}
.bottom-mini-stat{background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; align-items:center; gap:10px;}
.footer-metric{display:flex; align-items:center; gap:6px;}
.footer-metric .dot-status{width:6px;height:6px;border-radius:50%;background:var(--accent-green);display:inline-block;}
#opsMap{height:280px; border-radius:8px;}
.leaflet-container{background:#0d1220 !important;}