:root{
  --bg:#f4fbff;
  --card:#ffffff;
  --primary:#0369a1;
  --accent:#06b6d4;
  --muted:#6b7280;
  --danger:#ef4444;
  --glass:rgba(255,255,255,0.9);
  --hover-shadow:0 12px 24px rgba(0,0,0,0.12);
  --transition-speed:0.25s;
}

/* reset basics */
*{box-sizing:border-box;transition:all var(--transition-speed) ease}
html,body,#mapContainer{height:100%}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:#07203a;transition:background var(--transition-speed)}
a{text-decoration:none; color:inherit}

/* layout */
.app{display:flex;min-height:100vh}
.sidebar{
  width:220px;background:linear-gradient(180deg,var(--primary),var(--accent));
  color:white;padding:18px;display:flex;flex-direction:column;justify-content:space-between;
  transition:all var(--transition-speed);
}
.sidebar:hover{box-shadow:var(--hover-shadow)}
.logo h2{margin:0;font-size:18px}
.logo small{opacity:0.95;font-size:12px;transition:all var(--transition-speed)}
.role-select{background:rgba(255,255,255,0.06);padding:8px;border-radius:8px;margin-top:12px;transition:all var(--transition-speed)}
.role-select select:hover{background:rgba(255,255,255,0.12);cursor:pointer}

/* nav */
.nav{display:flex;flex-direction:column;margin-top:16px;gap:6px}
.nav-btn{
  display:flex;align-items:center;gap:8px;background:transparent;border:0;color:white;padding:10px 8px;text-align:left;border-radius:8px;cursor:pointer;
  opacity:0.95;font-size:14px;transition:all var(--transition-speed);
}
.nav-btn span.material-icons{font-size:18px;transition:all var(--transition-speed)}
.nav-btn:hover,.nav-btn.active{
  background:rgba(255,255,255,0.12);
  transform:translateX(4px);
}

/* sidebar actions */
.sidebar-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.small{
  padding:8px;border-radius:8px;border:0;cursor:pointer;background:rgba(255,255,255,0.06);color:white;
  transition:all var(--transition-speed);
}
.small:hover{background:rgba(255,255,255,0.12);transform:scale(1.05)}

.main{flex:1;display:flex;flex-direction:column}
.topbar{
  display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:transparent;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);border-radius:12px;margin-bottom:12px;
  transition:all var(--transition-speed);
}
.topbar h1{margin:0;font-size:18px}
.tag{color:var(--muted);margin-top:4px;font-size:13px}
.top-actions{display:flex;gap:8px}
.btn{
  padding:8px 12px;border-radius:8px;border:0;cursor:pointer;background:var(--primary);color:white;
  transition:all var(--transition-speed);box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--hover-shadow)}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid rgba(3,105,161,0.12)}
.btn.danger{background:var(--danger);color:white}
.btn.primary{background:var(--accent);color:white}

/* content */
.content{padding:16px;flex:1;overflow:auto}

/* cards & grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.card{
  background:var(--card);padding:12px;border-radius:12px;
  box-shadow:0 8px 22px rgba(4,11,20,0.06);
  transition:all var(--transition-speed);cursor:default;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--hover-shadow)}
.stat-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:14px}
.stat{font-size:22px;font-weight:700;color:#0b5468;margin-top:6px}
.risk-card{display:flex;flex-direction:column;align-items:center;justify-content:center}
.risk-text{margin-top:6px;font-weight:700;transition:color var(--transition-speed)}

.charts{display:flex;gap:12px;padding:12px}
.chart-item{flex:1;padding:8px;background:#fbfdff;border-radius:10px;transition:all var(--transition-speed)}
.chart-item:hover{transform:scale(1.02);box-shadow:var(--hover-shadow)}

.hotspot-brief{margin-top:12px}
.hotspot-list{display:flex;flex-direction:column;gap:8px;transition:all var(--transition-speed)}
.hotspot{
  padding:10px;border-radius:8px;background:#fff7ed;color:#6b370b;
  transition:all var(--transition-speed);
}
.hotspot:hover{transform:translateX(4px);background:#ffe4b5}

/* map */
.map-card{height:360px;padding:0;overflow:hidden;border-radius:12px;transition:all var(--transition-speed)}
.map-card:hover{box-shadow:var(--hover-shadow)}
.map{height:100%;width:100%}
.map-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:6px}
.map-legend{font-size:13px}
.legend{display:inline-block;width:12px;height:12px;border-radius:2px;margin:0 6px;vertical-align:middle}
.legend.high{background:#fca5a5}
.legend.med{background:#fde68a}
.legend.low{background:#bbf7d0}

/* forms & table */
.form-card .row{display:flex;gap:8px;flex-wrap:wrap;transition:all var(--transition-speed)}
.form-card label{flex:1;display:block;font-size:13px}
.form-card input, .form-card textarea, .card select{
  width:100%;padding:8px;border-radius:8px;border:1px solid #e6eef6;
  transition:all var(--transition-speed);
}
.form-card input:focus, .form-card textarea:focus, .card select:focus{
  border-color:var(--accent);box-shadow:0 0 6px rgba(6,182,212,0.3);outline:none;
}
.form-actions{display:flex;gap:8px;margin-top:8px}
.table-card{margin-top:12px}
.table-controls{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.table-wrap{max-height:280px;overflow:auto}
.reports-table{width:100%;border-collapse:collapse;transition:all var(--transition-speed)}
.reports-table th, .reports-table td{padding:8px;border-bottom:1px solid #eef4fb;text-align:center;transition:all var(--transition-speed)}
.reports-table tr:hover{background:rgba(6,182,212,0.05);transform:scale(1.01)}

/* alerts */
.alerts-area{display:flex;flex-direction:column;gap:8px}
.alert{
  padding:10px;border-radius:8px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 6px 16px rgba(2,6,23,0.04);transition:all var(--transition-speed);
}
.alert:hover{transform:translateY(-2px);box-shadow:var(--hover-shadow)}
.alert.high{background:#fff0f0;border-left:6px solid var(--danger)}
.alert.med{background:#fff9ec;border-left:6px solid #f59e0b}
.alert.info{background:#eef8ff;border-left:6px solid var(--primary)}
.alert small{color:var(--muted);font-size:13px;transition:color var(--transition-speed)}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.35);
  opacity:0;pointer-events:none;transition:all var(--transition-speed);}
.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.modal-content{width:640px;max-width:95%;transition:all var(--transition-speed);transform:translateY(-20px);}
.modal[aria-hidden="false"] .modal-content{transform:translateY(0);}

/* toast */
.toast{
  position:fixed;right:18px;bottom:18px;padding:12px 16px;border-radius:12px;background:#0369a1;color:white;
  box-shadow:0 6px 16px rgba(0,0,0,0.1);opacity:0;pointer-events:none;transition:all var(--transition-speed);
}
.toast.show{opacity:1;pointer-events:auto;transform:translateY(-10px);}
/* Global smooth transition */
* {
  transition: all 0.3s ease;
}

/* Demo Controls Card */
.demo-controls {
  background: #ffffff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-20px);
  opacity: 0;
  animation: fadeInUp 0.5s forwards;
}

/* Fade-in Up Animation */
@keyframes fadeInUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Buttons */
.btn {
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 300%; height: 300%;
  background: rgba(255,255,255,0.2);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.5s ease;
}
.btn:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Alerts Animation */
.alert {
  transform: translateX(-30px);
  opacity: 0;
  animation: slideIn 0.5s forwards;
}
@keyframes slideIn {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Table hover effect */
.reports-table tr {
  transition: all 0.3s ease;
}
.reports-table tr:hover {
  background: #f0faff;
  transform: scale(1.01);
}

/* Hotspot animation */
.hotspot {
  transform: scale(0.9);
  opacity: 0;
  animation: popIn 0.4s forwards;
}
@keyframes popIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Chart card hover */
.chart-item {
  transform: scale(0.95);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.chart-item:hover {
  transform: scale(1);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* Input focus */
input, textarea, select {
  border: 1px solid #d0e6f7;
  outline: none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: #06b6d4;
  box-shadow: 0 0 8px rgba(6,182,212,0.3);
}

/* Toast notifications */
.toast {
  transform: translateY(20px);
  opacity: 0;
  animation: toastIn 0.5s forwards;
}
@keyframes toastIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}