* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: 56px 1fr; height: 100vh; }

header {
  grid-column: 1 / -1;
  background: #0a2e5c;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #0a2e5c;
}
.brand { font-size: 16px; letter-spacing: 0.3px; }
.brand .version { color: #9bb8e0; font-weight: normal; font-size: 12px; margin-left: 8px; }
.stats { font-size: 13px; color: #cfd8e3; }

.header-right { display: flex; align-items: center; gap: 18px; }

.view-toggle { display: flex; background: rgba(255,255,255,0.08); border-radius: 6px; padding: 2px; }
.vbtn {
  font: inherit;
  font-size: 12px;
  background: transparent;
  color: #cfd8e3;
  border: 0;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.vbtn:hover { color: white; }
.vbtn.active { background: rgba(255,255,255,0.95); color: #0a2e5c; font-weight: 600; }

.sidebar {
  background: #f7f8fa;
  border-right: 1px solid #e3e6eb;
  padding: 16px;
  overflow-y: auto;
}
.sidebar h3 {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6b7382;
  margin: 16px 0 8px;
}
.sidebar section:first-child h3 { margin-top: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-scroll { max-height: 220px; overflow-y: auto; }
.chip {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  background: white;
  border: 1px solid #cdd3dc;
  border-radius: 14px;
  cursor: pointer;
  color: #333;
}
.chip:hover { background: #eef2f7; }
.chip.active { background: #0a2e5c; color: white; border-color: #0a2e5c; }
.chip .count { color: inherit; opacity: 0.65; margin-left: 4px; font-size: 11px; }

.detail {
  font-size: 13px;
  color: #444;
  line-height: 1.45;
  background: white;
  border: 1px solid #e3e6eb;
  border-radius: 6px;
  padding: 12px;
  min-height: 80px;
}
.detail .headline { font-weight: 600; color: #0a2e5c; margin-bottom: 6px; display: block; }
.detail .meta { font-size: 11px; color: #6b7382; }
.detail a { color: #1f60c4; text-decoration: none; }
.detail a:hover { text-decoration: underline; }

#map { height: 100%; }

/* Category color dots */
.cat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.cat-crime    { background: #d32f2f; }
.cat-disaster { background: #ef6c00; }
.cat-traffic  { background: #f9a825; }
.cat-protest  { background: #6a1b9a; }
.cat-health   { background: #2e7d32; }
.cat-politics { background: #1565c0; }
.cat-economy  { background: #00838f; }
.cat-other    { background: #607d8b; }

.leaflet-popup-content { font-size: 13px; max-width: 280px; }
.leaflet-popup-content .pcat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.leaflet-popup-content a { color: #1f60c4; }