<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EIGIS · Engineering Geology & Geohazard Information System</title>
<link rel="stylesheet" href="eigis_styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.6.0/dist/tabler-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
/* Leaflet custom marker styles */
.eigis-marker{border:none;background:none}
.eigis-marker-dot{width:14px;height:14px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.eigis-marker-dot.surface{background:#0F6E56}
.eigis-marker-dot.structural{background:#BA7517}
.eigis-marker-dot.geothermal{background:#DC2626}
.eigis-marker-dot.combined{background:linear-gradient(135deg,#0F6E56 33%,#BA7517 33%,#BA7517 66%,#DC2626 66%)}
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.leaflet-popup-content{margin:12px 16px;font-family:var(--font-sans)}
.popup-title{font-size:13px;font-weight:600;color:var(--eigis-text-primary);margin-bottom:4px}
.popup-detail{font-size:11px;color:var(--eigis-text-secondary);line-height:1.5}
.popup-badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;margin-right:4px}
</style>
</head>
<body>

<div class="shell">
  <!-- ========== SIDEBAR ========== -->
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="sidebar-logo">GIE · EIGIS</div>
      <div class="sidebar-title">Engineering Geology</div>
      <div class="sidebar-subtitle">Geohazard & Geothermal Module</div>
    </div>

    <div class="nav-section-label">Dashboard</div>
    <a class="nav-item active" onclick="switchView('dashboard')" id="navDashboard">
      <i class="ti ti-dashboard"></i>Analytics Dashboard
    </a>
    <a class="nav-item" onclick="switchView('map')" id="navMap">
      <i class="ti ti-map-2"></i>Interactive WebGIS Map
      <span class="nav-badge">Live</span>
    </a>

    <div class="nav-section-label">Data Collection</div>
    <a class="nav-item" onclick="switchView('form')" id="navForm">
      <i class="ti ti-edit"></i>Data Encoding Forms
    </a>
