:root{
  --bg:#f4f6f9;
  --accent:#1a237e;
  --accent-2:#3949ab;
  --muted:#7d8793;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.6);
  --danger: #e53935;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:#0f1720;
  -webkit-font-smoothing:antialiased;
}

/* App layout */
.app{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  width:260px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:white;
  display:flex;
  flex-direction:column;
  padding:22px;
  gap:10px;
  box-shadow: 6px 0 24px rgba(10,20,40,0.06);
}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.logo{background:rgba(255,255,255,0.12);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700}
.title{font-size:18px;letter-spacing:1px;font-weight:700}

.nav{flex:1;overflow:auto}
.nav ul{list-style:none;padding:0;margin:0}
.sidebar-item, .nav-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:8px;cursor:pointer;gap:12px;transition:background .18s}
.sidebar-item:hover,nav-toggle:hover{background:rgba(255,255,255,0.06)}
.sidebar-item .left i, .nav-toggle .left i{width:26px;text-align:center}
.label{font-weight:700;font-size:15px;margin-left:8px}

.nav-group .submenu{list-style:none;padding-left:10px;margin-top:8px;display:none}
.nav-group .submenu li{padding:8px 12px;border-radius:6px;color:rgba(255,255,255,0.95);cursor:pointer}
.nav-group .submenu li:hover{background:rgba(255,255,255,0.06)}
.nav-group.open .submenu{display:block}
.arrow{transition:transform .28s ease}

/* badges */
.badge{background:rgba(255,255,255,0.12);padding:4px 8px;border-radius:12px;font-weight:700}

/* Sidebar footer */
.sidebar-footer{padding-top:8px;text-align:center;font-size:12px;color:rgba(255,255,255,0.8)}

/* Main */
.main{flex:1;display:flex;flex-direction:column}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;background:#fff;box-shadow:0 2px 8px rgba(12,24,48,0.06);z-index:10}
.top-nav{display:flex;gap:12px;align-items:center}
.top-btn{border:0;background:transparent;padding:8px 14px;border-radius:8px;font-weight:700;font-size:16px;color:#111;cursor:pointer;transition:all .18s ease}
.top-btn:hover{background:#f0f3ff}
.top-btn.active{background:var(--accent);color:white;box-shadow:0 6px 20px rgba(26,35,126,0.12)}

.top-right{display:flex;align-items:center;gap:18px}
.wallet-panel{display:flex;align-items:center;gap:12px}
.wallet-stats .muted{font-size:12px;color:var(--muted)}
.btn{background:var(--accent);color:white;padding:8px 14px;border-radius:8px;border:0;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent;border:1px solid #e5e7eb;color:#111}
.btn.danger{background:var(--danger);color:white}
.admin-user{display:flex;align-items:center;gap:10px;position:relative;cursor:pointer}
.avatar{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#5b21b6,#1e90ff);display:flex;align-items:center;justify-content:center;color:white;font-weight:700}
.admin-info .admin-name{font-weight:700}
.muted{color:var(--muted)}

/* admin dropdown */
.admin-dropdown{position:absolute;top:62px;right:0;background:white;border-radius:8px;padding:8px;box-shadow:0 8px 24px rgba(12,24,48,0.12);min-width:160px;z-index:30}
.admin-dropdown .dd-item{display:block;width:100%;border:0;background:none;padding:8px 10px;text-align:left;cursor:pointer;border-radius:6px}
.admin-dropdown .dd-item:hover{background:#f6f8ff}

/* Content */
.content{padding:20px 28px;overflow:auto}
.page{display:none}
.page.active{display:block}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.page-header h1{font-size:28px;margin:0}
.page-actions{display:flex;gap:10px}

/* Grid utils */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

/* Cards & panels */
.card, .panel{background:var(--card);border-radius:10px;padding:16px;box-shadow:0 6px 20px rgba(18,25,40,0.04)}
.big-card{padding:22px;text-align:left}
.card-title{font-size:13px;color:var(--muted);font-weight:700}
.card-value{font-size:28px;font-weight:800;margin-top:8px}
.card-sub{font-size:12px;color:var(--muted);margin-top:8px}

/* tables */
.table{width:100%;border-collapse:collapse}
.table thead th{background:#f8fafc;padding:10px;text-align:left;color:var(--muted);font-size:13px}
.table tbody td{padding:12px;border-top:1px solid #f1f5f9}

/* forms */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form-grid label{display:flex;flex-direction:column;font-size:13px}
.form-grid input, .form-grid textarea{padding:10px;border-radius:8px;border:1px solid #e6eef8}
.form-grid textarea{resize:vertical;min-height:80px}

/* tabs */
.tabs{display:flex;gap:8px}
.tab{padding:8px 12px;border-radius:8px;border:0;background:#f6f9ff;cursor:pointer}
.tab.active{background:var(--accent);color:white}

/* hidden */
.hidden{display:none}

/* activity list */
.activity-list{list-style:none;padding:0;margin:0}
.activity-list li{padding:10px;border-bottom:1px dashed #eee}

/* tx log */
.tx-log{list-style:none;padding:0}
.tx-log li{padding:8px;border-bottom:1px solid #f1f5f9}


/* map */
.map-view{height:420px;width:100%;border-radius:8px;border:1px solid #e6eef8;overflow:hidden}

/* small helpers */
.small{font-size:13px}
.mt{margin-top:12px}
.form-actions{grid-column:span 2;display:flex;justify-content:flex-end}
.panel.small{padding:12px}
.card.small{padding:12px}

/* responsive */
@media (max-width:980px){
  .sidebar{display:none}
  .grid-3{grid-template-columns:repeat(1,1fr)}
  .top-nav{overflow:auto}
  .form-grid{grid-template-columns:1fr}
  .form-actions{grid-column:1}
}

/* Google Maps overlay styles (ADDED) */
#gmapOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
}
.gmap-modal{
  width:90%;
  max-width:1100px;
  height:80%;
  background:var(--card);
  border-radius:10px;
  overflow:hidden;
  position:relative;
  box-shadow:0 12px 40px rgba(2,6,23,0.4);
  display:flex;
  flex-direction:column;
}
.gmap-modal .modal-close{position:absolute;top:10px;right:10px;z-index:10;background:transparent;border:0;padding:8px;cursor:pointer}
.gmap-header{padding:12px 16px;border-bottom:1px solid #eef2ff;font-weight:700}
#gmapIframe{flex:1;width:100%;border:0}
#gmapOverlay.hidden{display:none}